Show variant price, refactor isOutOfStock util (#50)

Co-authored-by: olehrakwix <[email protected]>
codux-templates · Sep 20, 2024 · 79a17a4 · 79a17a4
1 parent f722a37
commit 79a17a4
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/app/routes/products.$productSlug/route.tsx b/app/routes/products.$productSlug/route.tsx
@@ -13,7 +13,7 @@ import { ProductOption } from '~/components/product-option/product-option';
 import { UnsafeRichText } from '~/components/rich-text/rich-text';
 import { getChoiceValue } from '~/components/product-option/product-option-utils';
 import { ROUTES } from '~/router/config';
-import { getUrlOriginWithPath, isOutOfStock } from '~/utils';
+import { getPriceData, getUrlOriginWithPath, isOutOfStock } from '~/utils';
 import { EcomApiErrorCodes } from '~/api/types';
 import commonStyles from '~/styles/common-styles.module.scss';
 import styles from './product-details.module.scss';
@@ -56,6 +56,7 @@ export default function ProductDetailsPage() {
     );
 
     const outOfStock = isOutOfStock(product, selectedOptions);
+    const priceData = getPriceData(product, selectedOptions);
 
     async function addToCartHandler() {
         if (!product?._id || outOfStock) {
@@ -87,10 +88,10 @@ export default function ProductDetailsPage() {
                 <div>
                     <div className={styles.productName}>{product.name}</div>
                     {product.sku !== undefined && <div className={styles.sku}>SKU: {product.sku}</div>}
-                    {product.priceData?.formatted?.price && (
+                    {priceData?.formatted?.price && (
                         <Price
-                            fullPrice={product.priceData?.formatted?.price}
-                            discountedPrice={product.priceData?.formatted?.discountedPrice}
+                            fullPrice={priceData?.formatted?.price}
+                            discountedPrice={priceData?.formatted?.discountedPrice}
                         />
                     )}
                 </div>

diff --git a/src/utils/product-utils.ts b/src/utils/product-utils.ts
@@ -7,15 +7,31 @@ export function isOutOfStock(
     product: Product | SerializeFrom<Product>,
     selectedOptions: Record<string, string | undefined> = {}
 ) {
-    if (product.stock?.inventoryStatus === wixStoresProducts.InventoryStatus.OUT_OF_STOCK) {
-        return true;
+    if (product.manageVariants) {
+        const selectedVariant = getSelectedVariant(product, selectedOptions);
+        if (selectedVariant?.stock?.inStock !== undefined) {
+            return !selectedVariant?.stock?.inStock;
+        }
     }
 
-    const selectedVariant = product.variants?.find((variant) => deepEqual(variant.choices, selectedOptions));
+    return product.stock?.inventoryStatus === wixStoresProducts.InventoryStatus.OUT_OF_STOCK;
+}
 
-    if (selectedVariant) {
-        return !selectedVariant.stock?.inStock;
+export function getPriceData(
+    product: Product | SerializeFrom<Product>,
+    selectedOptions: Record<string, string | undefined> = {}
+) {
+    if (product.manageVariants) {
+        const selectedVariant = getSelectedVariant(product, selectedOptions);
+        return selectedVariant?.variant?.priceData ?? product.priceData;
     }
 
-    return false;
+    return product.priceData;
+}
+
+export function getSelectedVariant(
+    product: Product | SerializeFrom<Product>,
+    selectedOptions: Record<string, string | undefined> = {}
+) {
+    return product.variants?.find((variant) => deepEqual(variant.choices, selectedOptions));
 }