@riosst100/pwa-marketplace 3.0.3 → 3.0.5

package/i18n/en_US.json

@@ -63,7 +63,7 @@
     "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
-    "checkoutPage.couponCode": "Apply Coupon Code",
+    "checkoutPage.couponCode": "Apply Coupon",
     "checkoutPage.createAccount": "Create Account",
     "checkoutPage.editPaymentInformation": "Edit Payment Information",
     "checkoutPage.editShippingInfo": "Edit Shipping Information",
@@ -82,7 +82,7 @@
     "checkoutPage.loadingPaymentInformation": "Fetching Payment Information",
     "checkoutPage.noPaymentAvailable": "Payment is currently unavailable.",
     "checkoutPage.orderNumber": "Order Number: {orderNumber}",
-    "checkoutPage.orderSummary": "Summary",
+    "checkoutPage.orderSummary": "Order Summary",
     "checkoutPage.paymentInformation": "Payment Information",
     "checkoutPage.paymentInformationStep": "Payment Information",
     "checkoutPage.paymentLoadingError": "There was an error loading payments.",
@@ -139,7 +139,7 @@
     "country.label": "Country",
     "couponCode.apply": "Apply",
     "couponCode.couponCode": "Coupon Code",
-    "couponCode.enterCode": "Enter code",
+    "couponCode.enterCode": "Enter coupon code",
     "couponCode.errorContainer": "Something went wrong. Please refresh and try again.",
     "couponCode.removeButton": "Remove",
     "createAccount.cancelText": "Cancel",

package/i18n/id_ID.json

@@ -64,7 +64,7 @@
     "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
-    "checkoutPage.couponCode": "Apply Coupon Code",
+    "checkoutPage.couponCode": "Apply Coupon",
     "checkoutPage.createAccount": "Create Account",
     "checkoutPage.editPaymentInformation": "Edit Payment Information",
     "checkoutPage.editShippingInfo": "Edit Shipping Information",
@@ -140,7 +140,7 @@
     "country.label": "Country",
     "couponCode.apply": "Apply",
     "couponCode.couponCode": "Coupon Code",
-    "couponCode.enterCode": "Enter code",
+    "couponCode.enterCode": "Enter coupon code",
     "couponCode.errorContainer": "Something went wrong. Please refresh and try again.",
     "couponCode.removeButton": "Remove",
     "createAccount.cancelText": "Cancel",

package/package.json

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

package/src/componentOverrideMapping.js

@@ -1,4 +1,5 @@
 module.exports = componentOverrideMapping = {
+    ['@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',
     [`@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.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/OrderDetail/components/itemsOrdered.js

@@ -11,11 +11,6 @@ const ItemsOrdered = ({ order }) => {
     const tax = order?.total?.total_tax?.value || 0;
     const grandTotal = order?.total?.grand_total?.value || 0;
 
-    const itemLink = useMemo(
-        () => resourceUrl(`/${urlKey}${urlSuffix || ''}`),
-        [urlKey, urlSuffix]
-    );
-
     return (
         <>
             <div className='rounded-md border border-gray-100 pb-4'>
@@ -34,7 +29,7 @@ const ItemsOrdered = ({ order }) => {
                             {items.map((item, idx) => (
                                 <tr key={item.id || idx} className='border-b border-gray-150'>
                                     <td className="col name text-left align-top py-3 px-2.5" data-th="Product Name">
-                                        <Link  to={itemLink} className="product name product-item-name">{item.product_name}</Link>
+                                        <strong className="product name product-item-name">{item.product_name}</strong>
                                         {item.selected_options && item.selected_options.length > 0 && (
                                             <dl className="item-options">
                                                 {item.selected_options.map((opt, i) => (

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/RMAPage/components/productItem.js

@@ -4,9 +4,7 @@ import { Link } from 'react-router-dom';
 import Select from '@riosst100/pwa-marketplace/src/components/commons/Select';
 import TextField from '@riosst100/pwa-marketplace/src/components/commons/Textfield';
 import Checkbox from '@riosst100/pwa-marketplace/src/components/commons/Checkbox';
-import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
-import defaultClasses from './productItem.module.css';
-import { useStyle } from '@magento/venia-ui/lib/classify';
+
 
 const productItem = (props) => {
     const {
@@ -43,8 +41,6 @@ const productItem = (props) => {
     // Input change handler with qty_requested validation
     const handleFieldChange = (field, value) => {
         if (field === 'qty_requested' && item && item.quantity_ordered) {
-            console.log('value',value)
-            console.log('item.quantity_ordered',item.quantity_ordered)
             if (value > item.quantity_ordered) {
                 value = item.quantity_ordered;
             }
@@ -55,8 +51,6 @@ const productItem = (props) => {
         if (onItemChange) onItemChange(field, value);
     };
 
-    const classes = useStyle(defaultClasses, props.classes);
-
     return (
         <>
             <div className='item flex flex-col lg_flex-row justify-between border border-gray-100 rounded-md p-4'>
@@ -108,47 +102,23 @@ const productItem = (props) => {
                                 <p className='mb-1'>
                                     Qty Return
                                 </p>
-                                <QuantityStepper
-                                    classes={{
-                                        root: classes.quantityRoot
-                                    }}
-                                    initialValue={item.quantity_ordered}
-                                    // itemId={item.id}
-                                />
-                                {/* <TextField
-                                    type="number"
+                                <TextField
                                     value={
-                                        itemState.qty_requested !== undefined
-                                        ? String(itemState.qty_requested)
-                                        : ''
+                                        itemState.qty_requested > item.quantity_ordered
+                                            ? item.quantity_ordered
+                                            : itemState.qty_requested || ''
                                     }
-                                    min={1}
-                                    max={item.quantity_ordered}
-                                    onChange={(e) => {
-                                        let val = e.target.value;
-
-                                        // Jika kosong
-                                        if (val === '') {
-                                        handleFieldChange('qty_requested', '');
-                                        return;
-                                        }
-
-                                        val = parseFloat(val);
-
-                                        if (isNaN(val)) {
-                                        handleFieldChange('qty_requested', '');
-                                        return;
-                                        }
-
-                                        // batas maksimum
+                                    onChange={e => {
+                                        let val = parseFloat(e.target.value);
+                                        if (isNaN(val)) val = '';
                                         if (val > item.quantity_ordered) val = item.quantity_ordered;
-
-                                        // batas minimum
-                                        if (val < 1) val = 1;
-
+                                        if (val < 1 && val !== '') val = 1;
                                         handleFieldChange('qty_requested', val);
                                     }}
-                                    /> */}
+                                    type="number"
+                                    min={1}
+                                    max={item.quantity_ordered}
+                                />
                             </div>
                             <div className='flex flex-col mb-2.5'>
                                 <p className='mb-1'>

package/src/components/SellerCoupon/index.js

@@ -1 +1,2 @@
 export { default } from './sellerCoupon';
+export { default as SellerCouponCheckoutShimmer } from './sellerCouponCheckout.shimmer';

package/src/components/SellerCoupon/sellerCoupon.js

@@ -1,5 +1,6 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import classes from './sellerCoupon.module.css';
+import SellerCouponCheckout from '@riosst100/pwa-marketplace/src/components/SellerCoupon/sellerCouponCheckout';
 
 const dayDiff = (toDate) => {
     if (!toDate) return null;
@@ -13,20 +14,24 @@ const dayDiff = (toDate) => {
 
 const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
     if (couponLoading) {
-        return <div className={classes.container}><p className={classes.metaText}>Loading coupons...</p></div>;
+        return '';
+        // return <div className={classes.container}><p className={classes.metaText}>Loading coupons...</p></div>;
     }
 
     if (couponError) {
-        return <div className={classes.container}><p className={classes.metaText}>Failed to load coupons.</p></div>;
+        return '';
+        // return <div className={classes.container}><p className={classes.metaText}>Failed to load coupons.</p></div>;
     }
 
     const items = couponData?.sellerCoupons?.items || [];
 
     if (!items.length) {
-        return <div className={classes.container}><p className={classes.metaText}>No coupons available.</p></div>;
+        return '';
+        // return <div className={classes.container}><p className={classes.metaText}>No coupons available.</p></div>;
     }
 
     const [copied, setCopied] = useState(null);
+    const [couponModalOpen, setCouponModalOpen] = useState(false);
 
     const handleClaim = async (code) => {
         try {
@@ -40,10 +45,14 @@ const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
         setTimeout(() => setCopied(null), 2000);
     };
 
+    const handleViewCoupons = useCallback(() => {
+        setCouponModalOpen(true);
+    }, [setCouponModalOpen]);
+
     return (
         <section className={classes.container} aria-label="Seller coupons">
             <div className={classes.scroller}>
-                {items.map(item => {
+                {items.slice(0, 3).map(item => {
                     const key = item.couponcode_id || item.coupon_id || item.code;
                     const daysLeft = dayDiff(item.to_date);
                     const expiryLabel = daysLeft === null
@@ -66,7 +75,7 @@ const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
                             <div className={classes.actions}>
                                 <button
                                     type="button"
-                                    className={classes.claimBtn}
+                                    className={copied === item.code ? classes.claimedBtn : classes.claimBtn}
                                     onClick={() => handleClaim(item.code)}
                                     aria-label={`Claim coupon ${item.code}`}
                                 >
@@ -76,6 +85,32 @@ const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
                         </div>
                     );
                 })}
+                {couponModalOpen && (
+                    <SellerCouponCheckout
+                        couponData={couponData}
+                        couponLoading={couponLoading}
+                        couponError={couponError}
+                        autoOpen={true}
+                        closeOnClaim={true}
+                        couponModalOpen={couponModalOpen}
+                        setCouponModalOpen={setCouponModalOpen}
+                        onSelectCoupon={handleClaim}
+                        onTriggerRender={() => null}
+                        isCopyAction={true}
+                    />
+                )}
+                <div className={classes.viewAllCard} role="group" aria-label="View All Coupons">
+                    <div className={classes.actions}>
+                        <button
+                            type="button"
+                            className={classes.viewAllBtn}
+                            onClick={handleViewCoupons}
+                            aria-label="View All Coupons"
+                        >
+                            View All Coupons
+                        </button>
+                    </div>
+                </div>
             </div>
         </section>
     );

package/src/components/SellerCoupon/sellerCoupon.module.css

@@ -19,6 +19,14 @@
     padding:8px 4px 12px;
     scroll-snap-type:x mandatory;
 }
+.viewAllCard {
+    position:relative;
+    display:flex;
+    align-items:stretch;
+    padding:0 12px 0 24px;
+    scroll-snap-align:start;
+    overflow:hidden;
+}
 .card{
     position:relative;
     background:#fff8f1;
@@ -90,6 +98,20 @@
     justify-content:center;
     padding:10px 0;
 }
+.viewAllBtn {
+    color:#f76b1c;
+    padding:8px 18px;
+    font-weight:600;
+    cursor:pointer;
+    text-decoration:underline;
+}
+.claimedBtn {
+    color: #a19791;
+    border:none;
+    border-radius:6px;
+    padding:8px 18px;
+    cursor:pointer;
+}
 .claimBtn{
     background: #f76b1c;
     color:#fff;

package/src/components/SellerCoupon/sellerCouponCheckout.js

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import listClasses from './sellerCoupon.module.css';
 import modalClasses from './sellerCouponCheckout.module.css';
+import { SellerCouponCheckoutShimmer } from '@riosst100/pwa-marketplace/src/components/SellerCoupon';
 
 // Reuse day diff logic
 const dayDiff = (toDate) => {
@@ -28,23 +29,26 @@ const getPortalRoot = () => {
 const SellerCouponCheckout = ({
     couponData,
     couponError,
+    setCouponModalOpen,
+    couponModalOpen,
     couponLoading,
+    isCopyAction,
     triggerLabel = 'View Seller Coupons',
     onSelectCoupon,
     onTriggerRender, // optional custom trigger renderer
     autoOpen = false, // auto open modal when mounted
     closeOnClaim = true // close after claiming
 }) => {
-    const [open, setOpen] = useState(false);
+    // const [open, setOpen] = useState(false);
     const [copied, setCopied] = useState(null);
 
     const items = couponData?.sellerCoupons?.items || [];
 
-    const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
+    const handleOpen = () => setCouponModalOpen(true);
+    const handleClose = () => setCouponModalOpen(false);
 
     useEffect(() => {
-        if (!open) return;
+        if (!couponModalOpen) return;
         const onKey = (e) => {
             if (e.key === 'Escape') {
                 handleClose();
@@ -52,7 +56,7 @@ const SellerCouponCheckout = ({
         };
         document.addEventListener('keydown', onKey);
         return () => document.removeEventListener('keydown', onKey);
-    }, [open]);
+    }, [couponModalOpen]);
 
     const handleClaim = async (item) => {
         try {
@@ -62,29 +66,34 @@ const SellerCouponCheckout = ({
         } catch (_) {
             /* ignore */
         }
+        console.log('item.code',item.code)
         setCopied(item.code);
         setTimeout(() => setCopied(null), 2000);
-        if (onSelectCoupon) onSelectCoupon(item);
-        if (closeOnClaim) handleClose();
+        if (!isCopyAction) {
+            if (onSelectCoupon) onSelectCoupon(item);
+            if (closeOnClaim) handleClose();
+        }
     };
 
     // Auto open behavior
     useEffect(() => {
-        if (autoOpen && !open) {
-            setOpen(true);
+        if (autoOpen && !couponModalOpen) {
+            setCouponModalOpen(true);
         }
-    }, [autoOpen, open]);
+    }, [autoOpen, couponModalOpen]);
+
+    console.log('copied',copied)
 
-    const modal = open ? (
+    const modal = couponModalOpen ? (
         <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Seller coupons list">
             <div className={modalClasses.backdrop} onClick={handleClose} />
             <div className={modalClasses.dialog}>
                 <div className={modalClasses.header}>
-                    <h2 className={modalClasses.title}>Seller Coupons</h2>
+                    <h2 className={modalClasses.title}>{isCopyAction ? 'Store Coupons' : 'Apply Coupon'}</h2>
                     <button type="button" className={modalClasses.closeBtn} onClick={handleClose} aria-label="Close coupon modal">×</button>
                 </div>
                 <div className={modalClasses.body}>
-                    {couponLoading && <p className={listClasses.metaText}>Loading coupons...</p>}
+                    {couponLoading && <SellerCouponCheckoutShimmer />}
                     {!couponLoading && couponError && <p className={listClasses.metaText}>Failed to load coupons.</p>}
                     {!couponLoading && !couponError && !items.length && <p className={listClasses.metaText}>No coupons available.</p>}
                     {!couponLoading && !couponError && items.length > 0 && (
@@ -108,14 +117,22 @@ const SellerCouponCheckout = ({
                                         </div>
                                         <div className={listClasses.divider} aria-hidden="true" />
                                         <div className={listClasses.actions}>
-                                            <button
+                                            {isCopyAction ? <button
                                                 type="button"
-                                                className={listClasses.claimBtn}
+                                                className={copied === item.code ? listClasses.claimedBtn : listClasses.claimBtn}
                                                 onClick={() => handleClaim(item)}
                                                 aria-label={`Claim coupon ${item.code}`}
                                             >
                                                 {copied === item.code ? 'Copied' : 'Claim'}
-                                            </button>
+                                            </button> : 
+                                            <button
+                                                type="button"
+                                                className={copied === item.code ? listClasses.claimedBtn : listClasses.claimBtn}
+                                                onClick={() => handleClaim(item)}
+                                                aria-label={`Apply coupon ${item.code}`}
+                                            >
+                                                {copied === item.code ? 'Applied' : 'Apply'}
+                                            </button>}
                                         </div>
                                     </div>
                                 );
@@ -128,20 +145,20 @@ const SellerCouponCheckout = ({
     ) : null;
 
     const trigger = onTriggerRender
-        ? onTriggerRender({ open, setOpen, handleOpen })
+        ? onTriggerRender({ couponModalOpen, setCouponModalOpen, handleOpen })
         : (
             <button
                 type="button"
                 className={modalClasses.triggerBtn}
                 onClick={handleOpen}
                 aria-haspopup="dialog"
-                aria-expanded={open}
+                aria-expanded={couponModalOpen}
             >
                 {triggerLabel}
             </button>
         );
 
-    return <>{onTriggerRender ? trigger : trigger}{open ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+    return <>{onTriggerRender ? trigger : trigger}{couponModalOpen ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
 };
 
 export default SellerCouponCheckout;

package/src/components/SellerCoupon/sellerCouponCheckout.shimmer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+const SellerCouponCheckout = props => {
+    return (
+        <>
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+        </>
+    );
+};
+
+export default SellerCouponCheckout;

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/PriceSummary/usePriceSummary.js

@@ -104,8 +104,6 @@ export const usePriceSummary = (props = {}) => {
         //     }
         // });
 
-        await setCheckoutState(true);
-
         await createSellerCart({ initCheckoutSplitCart, sellerUrl });
 
         await removeCart();
@@ -114,6 +112,8 @@ export const usePriceSummary = (props = {}) => {
         await createCart({
             fetchCartId
         });
+
+        await setCheckoutState(true);
         
         history.push('/checkout');
     }, [history, setCheckoutState, createSellerCart, fetchCartId, createCart, apolloClient, removeCart, cartId, initCheckoutSplitCart, initCheckoutSplitCartData]);

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/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
 };