Let melted products trade without store inventory, and split TV sell prices with extra tickers.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/products/components/ProductItem.vue

@@ -105,6 +105,7 @@ import { computed } from 'vue'
 import type { Product } from '@/models/products'
 import { usePrice } from '@/utils/usePrice'
 import { getProductBuyPrice } from '@/utils/productPrice'
+import { isProductOutOfStock } from '@/utils/productCategories'
 import { isProductTradingHoursOpen } from '@/utils/productTradeOpen'
 import ProductImage from '@/components/ProductImage.vue'
 
@@ -114,9 +115,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const isOutOfStock = computed(
-  () => !props.ProductItem?.inventory || props.ProductItem.inventory === 0
-)
+const isOutOfStock = computed(() => isProductOutOfStock(props.ProductItem))
 
 const amountProduct = computed(() => {
   if (!props.ProductItem.amount) return ''

src/views/base/products/components/ProductItemVertical.vue

@@ -37,6 +37,7 @@ import { computed } from 'vue'
 import type { Product } from '@/models/products'
 import { usePrice } from '@/utils/usePrice'
 import { getProductBuyPrice } from '@/utils/productPrice'
+import { isProductOutOfStock } from '@/utils/productCategories'
 import { isProductTradingHoursOpen } from '@/utils/productTradeOpen'
 import ProductImage from '@/components/ProductImage.vue'
 
@@ -46,9 +47,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const isOutOfStock = computed(
-  () => !props.ProductItem?.inventory || props.ProductItem.inventory === 0
-)
+const isOutOfStock = computed(() => isProductOutOfStock(props.ProductItem))
 
 const amountProduct = computed(() => {
   if (!props.ProductItem.amount) return ''

src/views/base/products/composables/useProductsPageData.ts

@@ -2,6 +2,7 @@ import { ref, watch } from 'vue'
 import { getProductsCatalog, getProductsCatalogRef } from '@/composables/useProductsCatalog'
 import type { Product } from '@/models/products'
 import { loadProductCategoryTabNames } from '@/utils/categoryTabs'
+import { isProductOutOfStock } from '@/utils/productCategories'
 import { getLastPrices, startLastPricePolling, stopLastPricePolling } from '@/utils/price'
 import {
   priceSocketConnected,
@@ -27,8 +28,8 @@ export const productsPageLoading = ref(true)
 
 function sortProductsByInventory(products: Product[]) {
   return [...products].sort((a, b) => {
-    const aInStock = Number(a.inventory ?? 0) > 0 ? 0 : 1
-    const bInStock = Number(b.inventory ?? 0) > 0 ? 0 : 1
+    const aInStock = isProductOutOfStock(a) ? 1 : 0
+    const bInStock = isProductOutOfStock(b) ? 1 : 0
     if (aInStock !== bInStock) return aInStock - bInStock
     return Number(b.inventory ?? 0) - Number(a.inventory ?? 0)
   })

src/views/base/products/product/composables/useProductDetailPage.ts

@@ -6,6 +6,7 @@ import { getProductById } from '@/api/products'
 import { findProductInCatalog, getProductsCatalog, getProductsCatalogRef } from '@/composables/useProductsCatalog'
 import { getLastPrices, stopPriceInterval } from '@/utils/price'
 import { getProductBuyPrice } from '@/utils/productPrice'
+import { isProductOutOfStock } from '@/utils/productCategories'
 import { isProductTradingHoursOpen } from '@/utils/productTradeOpen'
 import { loading } from '@/utils'
 import type { Product } from '@/models/products'
@@ -34,7 +35,7 @@ export function useProductDetailPage() {
     return typeof id === 'string' ? parseInt(id) : Number(id)
   })
 
-  const isOutOfStock = computed(() => !product.value?.inventory || product.value.inventory === 0)
+  const isOutOfStock = computed(() => isProductOutOfStock(product.value))
   const hoursOpen = computed(() => isProductTradingHoursOpen(product.value))
 
   watch(productId, (newId, oldId) => {

src/views/base/products/product/desktop/DesktopProductDetailView.vue

@@ -18,7 +18,7 @@
               <div class="dproduct-info__price-row">
                 <span class="dproduct-info__price">{{ usePrice(getProductBuyPrice(product)) }}</span>
                 <BasicButton
-                  v-if="hoursOpen && product.open_buy && product.inventory"
+                  v-if="hoursOpen && product.open_buy && !isOutOfStock"
                   type="primary"
                   size="large"
                   @click="handleBuyClick"
@@ -48,7 +48,7 @@
                   <div class="dproduct-similar-card__image">
                     <ProductImage
                       :product="item"
-                      :dimmed="!item.inventory"
+                      :dimmed="isProductOutOfStock(item)"
                       img-class="h-20 object-contain"
                     />
                   </div>
@@ -70,6 +70,7 @@ import ProductImage from '@/components/ProductImage.vue'
 import DesktopPageTopbar from '@/layouts/components/DesktopPageTopbar.vue'
 import { loading } from '@/utils'
 import { usePrice } from '@/utils/usePrice'
+import { isProductOutOfStock } from '@/utils/productCategories'
 import { useProductDetailPageContext } from '../composables/useProductDetailPage'
 
 const { product, isOutOfStock, hoursOpen, handleBuyClick, goToProduct, getProductBuyPrice } = useProductDetailPageContext()

src/views/base/products/product/mobile/MobileProductDetailView.vue

@@ -17,7 +17,7 @@
             </div>
             <div class="flex-1">
               <BasicButton
-                v-if="hoursOpen && product?.open_buy && product?.inventory"
+                v-if="hoursOpen && product?.open_buy && !isOutOfStock"
                 class="w-full py-3"
                 type="primary"
                 size="large"
@@ -48,7 +48,7 @@
                   <div class="bg-gray-100 rounded-md flex justify-center p-4 mb-2">
                     <ProductImage
                       :product="item"
-                      :dimmed="!item.inventory"
+                      :dimmed="isProductOutOfStock(item)"
                       img-class="h-20 object-contain"
                     />
                   </div>
@@ -71,6 +71,7 @@ import img from '@/assets/img/user_ly1.svg'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import ProductImage from '@/components/ProductImage.vue'
 import { loading } from '@/utils'
+import { isProductOutOfStock } from '@/utils/productCategories'
 import { usePrice } from '@/utils/usePrice'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/swiper-bundle.css'