@riosst100/pwa-marketplace 3.0.3 → 3.0.4

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.4",
   "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/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/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/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/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/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>