@riosst100/pwa-marketplace 3.0.1 → 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.1",
+  "version": "3.0.4",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -1,5 +1,7 @@
 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',
     [`@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js',
     [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',

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/peregrine/lib/talons/CartPage/useCartPage.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLazyQuery } from '@apollo/client';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CartPage/cartPage.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+/**
+ * This talon contains logic for a cart page component.
+ * It performs effects and returns prop data for rendering the component.
+ *
+ * This talon performs the following effects:
+ *
+ * - Manages the updating state of the cart while cart details data is being fetched
+ *
+ * @function
+ *
+ * @param {Object} props
+ * @param {CartPageQueries} props.queries GraphQL queries
+ *
+ * @returns {CartPageTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
+ */
+export const useCartPage = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getCartDetailsQuery } = operations;
+
+    const [{ cartId }] = useCartContext();
+    const [{ isSignedIn }] = useUserContext();
+
+    const [isProceedToCheckout, setIsProceedToCheckout] = useState(false);
+
+    const [isCartUpdating, setIsCartUpdating] = useState(false);
+    const [wishlistSuccessProps, setWishlistSuccessProps] = useState(null);
+
+    const [fetchCartDetails, { called, data, loading }] = useLazyQuery(
+        getCartDetailsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            errorPolicy: 'all'
+        }
+    );
+
+    const hasItems = !!data?.cart?.total_quantity;
+    const shouldShowLoadingIndicator = called && loading && !hasItems;
+
+    const cartItems = useMemo(() => {
+        return data?.cart?.items || [];
+    }, [data]);
+
+    const onAddToWishlistSuccess = useCallback(successToastProps => {
+        setWishlistSuccessProps(successToastProps);
+    }, []);
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (!called && cartId) {
+            fetchCartDetails({ variables: { cartId } });
+        }
+
+        // Let the cart page know it is updating while we're waiting on network data.
+        setIsCartUpdating(loading);
+    }, [fetchCartDetails, called, cartId, loading]);
+
+    useEffect(() => {
+        if (called && cartId && !loading) {
+            dispatch({
+                type: 'CART_PAGE_VIEW',
+                payload: {
+                    cart_id: cartId,
+                    products: cartItems
+                }
+            });
+        }
+    }, [called, cartItems, cartId, loading, dispatch]);
+
+    return {
+        cartItems,
+        hasItems,
+        isCartUpdating,
+        isGuestCheckout: !isSignedIn,
+        fetchCartDetails,
+        onAddToWishlistSuccess,
+        setIsCartUpdating,
+        shouldShowLoadingIndicator,
+        wishlistSuccessProps,
+        isProceedToCheckout,
+        setIsProceedToCheckout
+    };
+};
+
+/** JSDoc type definitions */
+
+/**
+ * GraphQL formatted string queries used in this talon.
+ *
+ * @typedef {Object} CartPageQueries
+ *
+ * @property {GraphQLAST} getCartDetailsQuery Query for getting the cart details.
+ *
+ * @see [cartPage.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering a cart page component.
+ *
+ * @typedef {Object} CartPageTalonProps
+ *
+ * @property {Array<Object>} cartItems An array of item objects in the cart.
+ * @property {boolean} hasItems True if the cart has items. False otherwise.
+ * @property {boolean} isCartUpdating True if the cart is updating. False otherwise.
+ * @property {function} setIsCartUpdating Callback function for setting the updating state of the cart page.
+ * @property {boolean} shouldShowLoadingIndicator True if the loading indicator should be rendered. False otherwise.
+ */

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>