@riosst100/pwa-marketplace 3.0.3 → 3.0.5

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -189,11 +189,11 @@ export const useFilterSidebar = props => {
             },
             {
                 'label': 'Preorder',
-                'value': 'lof_preorder',
+                'value': 'card_pre_orders',
                 'path': '',
                 'options': [
-                    {'value':'0','label':'No','title':'No'},
-                    {'value':'1','label':'Yes','title':'Yes'}
+                    {'value':'0','label':'','title':''},
+                    {'value':'1','label':'Pre Orders','title':'Pre Orders'}
                 ]
             },
             {

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -579,7 +579,7 @@ export const useProductFullDetail = props => {
 
     const handleAddToCart = useCallback(
         async formValues => {
-            const { quantity } = formValues;
+            const { quantity, preorder } = formValues;
 
             /*
                 @deprecated in favor of general addProductsToCart mutation. Will support until the next MAJOR.
@@ -636,15 +636,13 @@ export const useProductFullDetail = props => {
                     product: {
                         sku: product.sku,
                         quantity
-                    },
-                    entered_options: [
-                        {
-                            uid: product.uid,
-                            value: product.name
-                        }
-                    ]
+                    }
                 };
 
+                if (preorder && Object.keys(preorder).length) {
+                    variables.product.preorder = preorder;
+                }
+
                 if (selectedOptionsArray.length) {
                     variables.product.selected_options = selectedOptionsArray;
                 }
@@ -721,6 +719,7 @@ export const useProductFullDetail = props => {
         price_range: product?.price_range,
         sku: productSku,
         publish_status: product.publish_status,
+        custom_table_metadata: product.custom_table_metadata,
         term_and_conditions: product.term_and_conditions,
         link_to_other_stores: product.link_to_other_stores,
         shipping_policy: product.shipping_policy,

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -116,6 +116,11 @@ export const ProductDetailsFragment = gql`
             pre_order_date
         }
         term_and_conditions
+        custom_table_metadata {
+            mainAttrCode
+            mainAttrVal
+            mainAttrLabel
+        }
         shipping_policy
         return_policy
         small_image {

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -22,7 +22,7 @@ import { useLocation } from 'react-router-dom';
 const Breadcrumbs = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
-    const { categoryId, currentProduct, customPage, currentFilter } = props;
+    const { categoryId, currentProduct, customPage, currentFilter, currentProductCustomTableMetadata, customAttributesDetails } = props;
 
     const talonProps = useBreadcrumbs({ categoryId });
 
@@ -103,6 +103,25 @@ const Breadcrumbs = props => {
 
     const params = removeShopbyParam(search);
 
+    if (currentProductCustomTableMetadata) {
+        const mainAttrCode = currentProductCustomTableMetadata.mainAttrCode;
+        const mainAttrVal = currentProductCustomTableMetadata.mainAttrVal;
+        const mainAttrLabel = currentProductCustomTableMetadata.mainAttrLabel;
+
+        filterBreadcrumbsElement.push(
+            <Fragment>
+                <span className={classes.divider}>{DELIMITER}</span>
+                <Link
+                    className={classes.link}
+                    to={resourceUrl('/' + currentCategoryPath + '?' + mainAttrCode + '[filter]=' + mainAttrLabel + ',' + mainAttrVal)}
+                    onClick={handleClick}
+                >
+                    {mainAttrLabel}
+                </Link>
+            </Fragment>
+        )
+    }
+
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
             filterBreadcrumbsElement.push(

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js

@@ -93,31 +93,31 @@ const CouponCode = props => {
     }
 
     if (data.cart.applied_coupons) {
-        const codes = data.cart.applied_coupons.map(({ code }) => {
-            return (
-                <Fragment key={code}>
-                    <span>{code}</span>
-                    <LinkButton
-                        className={classes.removeButton}
-                        disabled={removingCoupon}
-                        data-cy="CouponCode-removeCouponButton"
-                        onClick={() => {
-                            handleRemoveCoupon(code);
-                        }}
-                        onKeyDown={() => {
-                            handleRemoveCouponOnEnter(code);
-                        }}
-                    >
-                        <FormattedMessage
-                            id={'couponCode.removeButton'}
-                            defaultMessage={'Remove'}
-                        />
-                    </LinkButton>
-                </Fragment>
-            );
-        });
+        // const codes = data.cart.applied_coupons.map(({ code }) => {
+        //     return (
+        //         <Fragment key={code}>
+        //             <span>{code}</span>
+        //             <LinkButton
+        //                 className={classes.removeButton}
+        //                 disabled={removingCoupon}
+        //                 data-cy="CouponCode-removeCouponButton"
+        //                 onClick={() => {
+        //                     handleRemoveCoupon(code);
+        //                 }}
+        //                 onKeyDown={() => {
+        //                     handleRemoveCouponOnEnter(code);
+        //                 }}
+        //             >
+        //                 <FormattedMessage
+        //                     id={'couponCode.removeButton'}
+        //                     defaultMessage={'Remove'}
+        //                 />
+        //             </LinkButton>
+        //         </Fragment>
+        //     );
+        // });
 
-        return <div className={classes.appliedCoupon}>{codes}</div>;
+        return '';
     } else {
         const errorMessage = deriveErrorMessage([
             errors.get('applyCouponMutation')
@@ -160,9 +160,6 @@ const CouponCode = props => {
                         priority={'normal'}
                         type={'submit'}
                         onKeyDown={handleApplyCouponOnEnter}
-                        classes={{
-                            content: 'gap-1.5 grid-flow-col inline-grid items-center justify-center justify-items-center capitalize font-medium'
-                        }}
                     >
                         <FormattedMessage
                             id={'couponCode.apply'}

package/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.module.css

@@ -2,6 +2,7 @@
 .entryForm,
 .entryFormError {
     composes: gap-x-sm from global;
+    composes: pb-2 from global;
     composes: grid from global;
     composes: grid-cols-autoLast from global;
 }
@@ -14,6 +15,7 @@
         /* switch to rows. */
         grid-template-columns: unset;
         grid-template-rows: 1fr 1fr;
+        composes: pb-2 from global;
     }
 }
 

package/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -10,6 +10,7 @@ import GiftCardSummary from './giftCardSummary';
 import GiftOptionsSummary from './giftOptionsSummary';
 import ShippingSummary from './shippingSummary';
 import TaxSummary from './taxSummary';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
 import cn from 'classnames';
 
 /**
@@ -74,9 +75,10 @@ const PriceSummary = props => {
 
     const isPriceUpdating = isUpdating || isLoading;
     const priceClass = isPriceUpdating ? classes.priceUpdating : classes.price;
-    const totalPriceClass = isPriceUpdating
-        ? classes.priceUpdating
-        : classes.totalPrice;
+    const totalPriceClass = classes.totalPrice;
+    // const totalPriceClass = isPriceUpdating
+    //     ? classes.priceUpdating
+    //     : classes.totalPrice;
 
     const totalPriceLabel = isCheckout
         ? formatMessage({
@@ -88,7 +90,7 @@ const PriceSummary = props => {
             defaultMessage: 'Estimated Total'
         });
 
-    const proceedToCheckoutButton = (
+    const proceedToCheckoutButton = !isCheckout && (
         <div className={cn(classes.checkoutButton_container, 'block !mt-6 !min-h-auto')}>
             <Button
                 disabled={isPriceUpdating}
@@ -127,8 +129,15 @@ const PriceSummary = props => {
     );
 
     return (
-        <div className={cn(classes.root, 'pb-6 px-3')} data-cy="PriceSummary-root">
+        <div className={cn(classes.root, isCheckout ? 'pb-0 px-3' : 'pb-6 px-3')} data-cy="PriceSummary-root">
             {isCheckout && (
+                isPriceUpdating ? <>
+                    <Shimmer width="100%" height="20px" />
+                    <Shimmer width="100%" height="20px" />
+                    <Shimmer width="100%" height="20px" />
+                    <Shimmer width="100%" height="20px" />
+                    <Shimmer width="100%" height="20px" />
+                </> : 
                 <div>
                     <ul>
                         <li className={classes.lineItems}>

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.js

@@ -30,7 +30,6 @@ const HeartIcon = <Heart size="16" color="#909090" />;
 
 const Product = props => {
     const { item } = props;
-
     const { formatMessage } = useIntl();
     const talonProps = useProduct({
         operations: {
@@ -123,8 +122,49 @@ const Product = props => {
                     </Link>
                     <div className='flex flex-col'>
                         <div className={cn(classes.name, 'text-[14px] font-normal max-w-[260px]')} data-cy="Product-name">
+                            {item.is_preorder && (
+                                <span className="inline-flex items-center gap-1 px-2 py-[2px] mb-3 rounded-full bg-blue-600 text-white border border-blue-700 text-[11px] font-medium">
+                                    Preorder
+                                </span>
+                            )}
+                            <br/>
                             <Link to={itemLink}>{name}</Link>
                         </div>
+                        {item.is_preorder && (
+                            <div className="mt-2 flex flex-col gap-1" aria-label="Preorder information">
+                                <div className="flex flex-wrap items-center gap-2">
+                                    <span className="text-[11px] text-amber-800">
+                                        Release: {(() => {
+                                            const rd = item?.product?.release_date;
+                                            if (!rd) return '-';
+                                            const d = new Date(rd);
+                                            if (isNaN(d.getTime())) return rd;
+                                            const dd = String(d.getDate()).padStart(2, '0');
+                                            const mm = String(d.getMonth() + 1).padStart(2, '0');
+                                            const yyyy = d.getFullYear();
+                                            return `${dd}/${mm}/${yyyy}`;
+                                        })()}
+                                    </span>
+                                    {item.pre_order_payment_type === 'deposit' && item.pre_order_deposit != null && (
+                                        <span className="text-[11px] text-amber-800">
+                                            {(() => {
+                                                const raw = item.pre_order_deposit;
+                                                const n = typeof raw === 'number' ? raw : Number.parseFloat(String(raw).replace(/[^0-9.-]/g,''));
+                                                if (!Number.isFinite(n)) {
+                                                    return `Deposit: ${raw}`;
+                                                }
+                                                let str = n.toString();
+                                                if (str.includes('.')) {
+                                                    str = str.replace(/\.0+$/,'');
+                                                    str = str.replace(/\.(\d*[1-9])0+$/,'.$1');
+                                                }
+                                                return `Deposit: ${str}%`;
+                                            })()}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        )}
                         <ProductOptions
                             options={options}
                             classes={{

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.module.css

@@ -71,7 +71,7 @@
     /* composes: font-medium from global; */
     grid-area: name;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: normal;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/productListingBySeller.js

@@ -80,7 +80,46 @@ const ProductListingBySeller = props => {
                 wishlistConfig={wishlistConfig}
             />
         ));
- 
+        // Helpers for currency + subtotal formatting
+        const aggregateSubtotal = items => {
+            let total = 0;
+            let currency = null;
+            for (const it of items) {
+                const priceObj = it?.prices?.price;
+                if (priceObj) {
+                    if (!currency) currency = priceObj.currency;
+                    const unit = Number(priceObj.value) || 0;
+                    const qty = Number(it?.quantity) || 0;
+                    total += unit * qty;
+                }
+            }
+            return { total, currency };
+        };
+
+        const formatMoney = (value, currency) => {
+            if (value == null || !isFinite(value)) return '-';
+            if (!currency) return value.toFixed(2);
+            try {
+                const locale = currency === 'IDR' ? 'id-ID' : (currency === 'SGD' ? 'en-SG' : 'en-US');
+                const opts = currency === 'IDR'
+                    ? { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }
+                    : { style: 'currency', currency, minimumFractionDigits: 2, maximumFractionDigits: 2 };
+                let formatted = new Intl.NumberFormat(locale, opts).format(value);
+                if (currency === 'SGD') {
+                    formatted = 'SGD ' + formatted
+                        .replace(/^S?\$/,'')
+                        .replace(/^SGD\s*/,'')
+                        .trim();
+                }
+                return formatted;
+            } catch (e) {
+                return currency + ' ' + value.toFixed(2);
+            }
+        };
+
+        const { total: subtotalValue, currency: detectedCurrency } = aggregateSubtotal(items);
+        const displayCurrency = detectedCurrency || seller.seller_currency || 'SGD';
+        const formattedSubtotal = formatMoney(subtotalValue, displayCurrency);
         const priceSummary = hasItems ? (
             <PriceSummary isProceedToCheckout={isProceedToCheckout} setIsProceedToCheckout={setIsProceedToCheckout} setIsCartUpdating={setIsCartUpdating} isUpdating={isCartUpdating} sellerUrl={seller.seller_url} />
         ) : null;
@@ -103,13 +142,7 @@ const ProductListingBySeller = props => {
                         {productComponents}
                         <div className={classes.subtotalContainer}>
                             <div className={classes.subtotalLabel}>Subtotal:</div>
-                            <div className={classes.subtotalAmount}>
-                                {seller.seller_currency || 'SGD'} {items.reduce((total, item) => {
-                                    const itemPrice = item?.prices?.price?.value || 0;
-                                    const quantity = item?.quantity || 0;
-                                    return total + (itemPrice * quantity);
-                                }, 0).toFixed(2)}
-                            </div>
+                            <div className={classes.subtotalAmount}>{formattedSubtotal}</div>
                         </div>
                         <div className={classes.summary_container}>
                             <div className={classes.summary_contents}>

package/src/overwrites/venia-ui/lib/components/CartPage/cartPage.js

@@ -75,10 +75,6 @@ const CartPage = props => {
         return fullPageLoadingIndicator;
     }
 
-    const priceSummary = hasItems ? (
-        <PriceSummary isUpdating={isCartUpdating} />
-    ) : null;
-
     const productListing = hasItems ? (
         <ProductListing
             onAddToWishlistSuccess={onAddToWishlistSuccess}
@@ -132,9 +128,6 @@ const CartPage = props => {
                     {priceAdjustments}
                 </div> */}
                 {/* <div className={classes.summary_container}>
-                    <div className={classes.summary_contents}>
-                        {priceSummary}
-                    </div>
                 </div> */}
             </div>
         </div>

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/item.js

@@ -15,11 +15,35 @@ const Item = props => {
         quantity,
         configurable_options,
         isHidden,
-        configurableThumbnailSource
+        configurableThumbnailSource,
+        // Preorder-related fields passed via {...item}
+        is_preorder,
+        pre_order_payment_type,
+        pre_order_deposit,
+        release_date
     } = props;
     const classes = useStyle(defaultClasses, propClasses);
     const className = isHidden ? classes.root_hidden : classes.root_visible;
     const configured_variant = configuredVariant(configurable_options, product);
+    const formatDate = value => {
+        if (!value) return '-';
+        const d = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(d.getTime())) return '-';
+        const dd = String(d.getDate()).padStart(2, '0');
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        const yyyy = d.getFullYear();
+        return `${dd}/${mm}/${yyyy}`;
+    };
+    const formatDepositPercent = raw => {
+        const n = typeof raw === 'number' ? raw : Number.parseFloat(String(raw).replace(/[^0-9.-]/g,''));
+        if (!Number.isFinite(n)) return raw;
+        let str = n.toString();
+        if (str.includes('.')) {
+            str = str.replace(/\.0+$/,'');
+            str = str.replace(/\.(\d*[1-9])0+$/,'.$1');
+        }
+        return `${str}%`;
+    };
     return (
         <div className={className}>
             <Image
@@ -33,7 +57,24 @@ const Item = props => {
                         : product.thumbnail.url
                 }
             />
-            <span className={classes.name}>{product.name}</span>
+            <div className={classes.headerRow}>
+                {is_preorder && (
+                    <span className={classes.preorderBadge}>Preorder</span>
+                )}
+                <span className={classes.name}>{product.name}</span>
+            </div>
+            {is_preorder && (
+                <div className={classes.preorderMeta} aria-label="Preorder information">
+                    <span className={classes.metaItem}>
+                        Release: {formatDate(typeof release_date !== 'undefined' ? release_date : product?.release_date)}
+                    </span>
+                    {pre_order_payment_type === 'deposit' && pre_order_deposit != null && (
+                        <span className={classes.metaItem}>
+                            Deposit: {formatDepositPercent(pre_order_deposit)}
+                        </span>
+                    )}
+                </div>
+            )}
             <ProductOptions
                 options={configurable_options}
                 classes={{

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/item.module.css

@@ -63,3 +63,39 @@
     grid-column: 2 / span 1;
     grid-row: 2 / span 1;
 }
+
+.headerRow {
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 1;
+    align-items: center;
+    gap: 8px;
+}
+
+.preorderBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    background: #f26313; /* orange accent for visibility */
+    color: #fff;
+    border: 1px solid #f26313;
+    font-size: 10px;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.preorderMeta {
+    grid-column: 2 / span 1;
+    grid-row: 2 / span 1;
+    margin-top: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    color: #000; /* amber-ish */
+    font-size: 11px;
+}
+
+.metaItem {
+    display: inline-block;
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js

@@ -15,8 +15,8 @@ import defaultClasses from './itemsReview.module.css';
  * @param {Object} props.data an optional static data object to render instead of making a query for data.
  */
 const ItemsReview = props => {
-    const { classes: propClasses } = props;
-
+    const { classes: propClasses, isPreorder, preOrderDeposit, preOrderPaymentType, releaseDate } = props;
+    
     const classes = useStyle(defaultClasses, propClasses);
 
     const talonProps = useItemsReview({
@@ -38,6 +38,12 @@ const ItemsReview = props => {
             {...item}
             isHidden={!showAllItems && index >= 2}
             configurableThumbnailSource={configurableThumbnailSource}
+            // Forward explicit preorder values from parent if provided
+            is_preorder={typeof isPreorder !== 'undefined' ? isPreorder : item.is_preorder}
+            pre_order_payment_type={typeof preOrderPaymentType !== 'undefined' ? preOrderPaymentType : item.pre_order_payment_type}
+            pre_order_deposit={typeof preOrderDeposit !== 'undefined' ? preOrderDeposit : item.pre_order_deposit}
+            // release_date may come from parent or item.product
+            release_date={typeof releaseDate !== 'undefined' ? releaseDate : (item?.product?.release_date)}
         />
     ));
 

package/src/overwrites/venia-ui/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -7,6 +7,9 @@ import defaultClasses from './orderSummary.module.css';
 
 const OrderSummary = props => {
     const classes = useStyle(defaultClasses, props.classes);
+
+    const { placeOrderButton } = props
+
     return (
         <div data-cy="OrderSummary-root" className={classes.root}>
             <h2 aria-live="polite" className="text-[16px] font-medium mb-4">
@@ -26,6 +29,7 @@ const OrderSummary = props => {
                     }
                 `}
             </style>
+            {placeOrderButton}
         </div>
     );
 };