@riosst100/pwa-marketplace 3.0.4 → 3.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -1,4 +1,5 @@
 module.exports = componentOverrideMapping = {
+    ['@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js',
     ['@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js']: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.js',
     ['@magento/peregrine/lib/talons/Header/useCartTrigger.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useCartTrigger.js',
     ['@magento/peregrine/lib/talons/CartPage/useCartPage.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/useCartPage.js',

package/src/components/CrossSeller/item.js

@@ -9,7 +9,7 @@ import logoImage from './logo_seller.png';
 
 const Item = ({ sellerName, sales, price, condition }) => {
     return (
-        <div className='flex flex-col items-center text-center lg_text-left md_text-left lg_flex-row md_flex-row bg-white rounded-lg border border-gray-100 p-[15px] gap-y-4'>
+        <div className='flex flex-col items-center text-center justify-around lg_text-left md_text-left lg_flex-row md_flex-row bg-white rounded-lg border border-gray-100 p-[15px] gap-y-4'>
             <div className='seller_info-container flex flex-row gap-x-[15px] lg_w-1/3 md_w-1/3'>
                 <div className='flex flex-col gap-y-[15px]'>
                     <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
@@ -41,16 +41,15 @@ const Item = ({ sellerName, sales, price, condition }) => {
                     onSubmit={() => { }}
                     className="flex flex-col gap-x-7 gap-y-7 items-center lg_flex-row md_flex-row"
                 >
-                    <QuantityStepper min={1} />
                     <Button
-                        data-cy="addToCartButton"
+                        data-cy="viewProductButton"
                         classes={{
                             content: 'normal-case font-medium text-[16px]'
                         }}
                         priority="high"
                         type="button"
                     >
-                        Add To Cart
+                        View Product
                     </Button>
                 </Form>
             </div>

package/src/components/LinkToOtherStores/index.js

@@ -18,10 +18,10 @@ const LinkToOtherStores = (props) => {
             'product_link': 'https://tokopedia.com',
             'stores': 'Tokopedia'
         },
-        {
-            'product_link': 'https://lazada.sg',
-            'stores': 'Lazada'
-        }
+        // {
+        //     'product_link': 'https://lazada.sg',
+        //     'stores': 'Lazada'
+        // }
     ];
 
     const getLogo = (stores) => {

package/src/components/ProductListTab/productListTab.js

@@ -37,7 +37,7 @@ const ProductListTab = props => {
         },
         {
             'label': 'Pre Order',
-            'value': 'lof_preorder'
+            'value': 'card_pre_orders'
         },
         // {
         //     'label': 'Auction',

package/src/components/commons/Select/index.js

@@ -7,7 +7,9 @@ const Select = (props) => {
         className,
         options = [],
         value,
-        onChange
+        onChange,
+        showPlaceholder = true,
+        placeholder = 'Choose Option'
     } = props;
 
     return (
@@ -17,9 +19,11 @@ const Select = (props) => {
                 value={value}
                 onChange={onChange}
             >
-                <option value=''>
-                    Choose Option
-                </option>
+                {showPlaceholder && (
+                    <option value=''>
+                        {placeholder}
+                    </option>
+                )}
                 {options.map((item) => (
                     <option key={item.value} value={item.value}>
                         {item.label}

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js

@@ -22,6 +22,9 @@ export const PriceSummaryFragment = gql`
         items {
             uid
             quantity
+            is_preorder
+            pre_order_payment_type
+            pre_order_deposit
         }
         ...ShippingSummaryFragment
         prices {

package/src/overwrites/peregrine/lib/talons/CartPage/ProductListing/productListingFragments.gql.js

@@ -6,6 +6,9 @@ export const ProductListingFragment = gql`
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
             uid
+            is_preorder
+            pre_order_payment_type
+            pre_order_deposit
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             seller {
                 seller_name
@@ -17,6 +20,7 @@ export const ProductListingFragment = gql`
                 name
                 sku
                 url_key
+                release_date
                 thumbnail {
                     url
                 }

package/src/overwrites/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods.js

@@ -0,0 +1,84 @@
+import { useCallback } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
+import useFieldState from '@magento/peregrine/lib/hooks/hook-wrappers/useInformedFieldStateWrapper';
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/paymentMethods.gql';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+
+export const usePaymentMethods = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const {
+        getPaymentMethodsQuery,
+        setPaymentMethodOnCartMutation
+    } = operations;
+
+    const [setPaymentMethod] = useMutation(setPaymentMethodOnCartMutation);
+
+    const [{ cartId }] = useCartContext();
+
+    const { data, loading } = useQuery(getPaymentMethodsQuery, {
+        skip: !cartId,
+        variables: { cartId }
+    });
+
+    const { value: currentSelectedPaymentMethod } = useFieldState(
+        'selectedPaymentMethod'
+    );
+
+    const availablePaymentMethods =
+        (data && data.cart.available_payment_methods) || [];
+
+    // If there is one payment method, select it by default.
+    // If more than one, none should be selected by default.
+    const defaultPaymentCode =
+        (availablePaymentMethods.length && availablePaymentMethods[0].code) ||
+        null;
+    const selectedPaymentCode =
+        (data && data.cart.selected_payment_method.code) || null;
+
+    const initialSelectedMethod =
+        availablePaymentMethods.length > 1
+            ? selectedPaymentCode
+            : null;
+
+    console.log('availablePaymentMethods.length',availablePaymentMethods.length)
+    console.log('defaultPaymentCode',defaultPaymentCode)
+    console.log('selectedPaymentCode',selectedPaymentCode)
+    console.log('initialSelectedMethod',initialSelectedMethod)
+
+    const handlePaymentMethodSelection = useCallback(
+        element => {
+            const value = element.target.value;
+
+            const paymentMethodData =
+                value == 'braintree'
+                    ? {
+                          code: value,
+                          braintree: {
+                              payment_method_nonce: value,
+                              is_active_payment_token_enabler: false
+                          }
+                      }
+                    : {
+                          code: value
+                      };
+
+            setPaymentMethod({
+                variables: {
+                    cartId,
+                    paymentMethod: paymentMethodData
+                }
+            });
+        },
+        [cartId, setPaymentMethod]
+    );
+
+    return {
+        availablePaymentMethods,
+        currentSelectedPaymentMethod,
+        handlePaymentMethodSelection,
+        initialSelectedMethod,
+        isLoading: loading
+    };
+};

package/src/overwrites/peregrine/lib/talons/CheckoutPage/checkoutPage.extended.gql.js

@@ -13,6 +13,20 @@ export const ITEM_SELLER_FRAGMENT = gql`
     }
 `;
 
+// Extend items to include preorder fields used in ItemsReview/item.js overwrite
+export const ITEM_PREORDER_FRAGMENT = gql`
+    fragment ItemPreorderFragment on Cart {
+        items {
+            is_preorder
+            pre_order_payment_type
+            pre_order_deposit
+            product {
+                release_date
+            }
+        }
+    }
+`;
+
 export const CREATE_CART = gql`
     mutation createCart {
         cartId: createEmptyCart
@@ -64,10 +78,12 @@ export const GET_ORDER_DETAILS = gql`
             }
             ...ItemsReviewFragment
             ...ItemSellerFragment
+            ...ItemPreorderFragment
         }
     }
     ${ItemsReviewFragment}
     ${ITEM_SELLER_FRAGMENT}
+    ${ITEM_PREORDER_FRAGMENT}
 `;
 
 export const GET_CHECKOUT_DETAILS = gql`
@@ -77,11 +93,13 @@ export const GET_CHECKOUT_DETAILS = gql`
             ...CheckoutPageFragment
             ...ItemsReviewFragment
             ...ItemSellerFragment
+            ...ItemPreorderFragment
         }
     }
     ${CheckoutPageFragment}
     ${ItemsReviewFragment}
     ${ITEM_SELLER_FRAGMENT}
+    ${ITEM_PREORDER_FRAGMENT}
 `;
 
 export const GET_CUSTOMER = gql`
@@ -100,5 +118,6 @@ export default {
     getCustomerQuery: GET_CUSTOMER,
     getOrderDetailsQuery: GET_ORDER_DETAILS,
     placeOrderMutation: PLACE_ORDER,
-    itemSellerFragment: ITEM_SELLER_FRAGMENT
+    itemSellerFragment: ITEM_SELLER_FRAGMENT,
+    itemPreorderFragment: ITEM_PREORDER_FRAGMENT
 };

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/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/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/checkoutPage.js

@@ -84,7 +84,7 @@ const CheckoutPage = props => {
         toggleAddressBookContent,
         toggleSignInContent
     } = talonProps;
-
+    
     const [, { addToast }] = useToasts();
 
     const history = useHistory();
@@ -301,7 +301,12 @@ const CheckoutPage = props => {
         // Show ItemsReview from the beginning, not only at the REVIEW step
         const itemsReview = (
             <div className={classes.items_review_container}>
-                <ItemsReview />
+                <ItemsReview
+                    isPreorder={cartItems?.[0]?.is_preorder}
+                    preOrderDeposit={cartItems?.[0]?.pre_order_deposit}
+                    preOrderPaymentType={cartItems?.[0]?.pre_order_payment_type}
+                    releaseDate={cartItems?.[0]?.product?.release_date} 
+                />
             </div>
         );