@riosst100/pwa-marketplace 3.0.0 → 3.0.1

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

@@ -37,6 +37,8 @@ const ProductListingBySeller = props => {
         setIsCartUpdating,
         fetchCartDetails,
         activeEditItem,
+        setIsProceedToCheckout,
+        isProceedToCheckout,
         setActiveEditItem,
         wishlistConfig,
         isLoading,
@@ -80,7 +82,7 @@ const ProductListingBySeller = props => {
         ));
  
         const priceSummary = hasItems ? (
-            <PriceSummary isUpdating={isCartUpdating} sellerUrl={seller.seller_url} />
+            <PriceSummary isProceedToCheckout={isProceedToCheckout} setIsProceedToCheckout={setIsProceedToCheckout} setIsCartUpdating={setIsCartUpdating} isUpdating={isCartUpdating} sellerUrl={seller.seller_url} />
         ) : null;
         return (
             <Fragment>

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

@@ -14,6 +14,7 @@ import PriceSummary from './PriceSummary';
 import ProductListing from './ProductListing';
 import defaultClasses from './cartPage.module.css';
 import cn from 'classnames';
+import { useHistory } from 'react-router-dom';
 
 const CheckIcon = <Icon size={20} src={Check} />;
 
@@ -45,19 +46,31 @@ const CartPage = props => {
         onAddToWishlistSuccess,
         setIsCartUpdating,
         shouldShowLoadingIndicator,
-        wishlistSuccessProps
+        isProceedToCheckout,
+        setIsProceedToCheckout,
+        wishlistSuccessProps,
+        isGuestCheckout
     } = talonProps;
-
+    
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
     const [, { addToast }] = useToasts();
 
+    const history = useHistory();
+
+    useEffect(() => {
+        if (isGuestCheckout) {
+            history.push('/sign-in');
+        }
+    }, [isGuestCheckout, history]);
+
     useEffect(() => {
         if (wishlistSuccessProps) {
             addToast({ ...wishlistSuccessProps, icon: CheckIcon });
         }
     }, [addToast, wishlistSuccessProps]);
 
+
     if (shouldShowLoadingIndicator) {
         return fullPageLoadingIndicator;
     }
@@ -70,7 +83,9 @@ const CartPage = props => {
         <ProductListing
             onAddToWishlistSuccess={onAddToWishlistSuccess}
             setIsCartUpdating={setIsCartUpdating}
+            isProceedToCheckout={isProceedToCheckout}
             fetchCartDetails={fetchCartDetails}
+            setIsProceedToCheckout={setIsProceedToCheckout}
             isCartUpdating={isCartUpdating}
             hasItems={hasItems}
         />
@@ -93,7 +108,7 @@ const CartPage = props => {
             <StoreTitle>
                 {formatMessage({
                     id: 'cartPage.title',
-                    defaultMessage: 'Cart'
+                    defaultMessage: 'Shopping Cart'
                 })}
             </StoreTitle>
             <div className={cn(classes.heading_container, 'mb-[30px]')}>
@@ -104,7 +119,7 @@ const CartPage = props => {
                 >
                     <FormattedMessage
                         id={'cartPage.heading'}
-                        defaultMessage={'Cart'}
+                        defaultMessage={'Shopping Cart'}
                     />
                 </h1>
                 <div className={classes.stockStatusMessageContainer}>
@@ -127,3 +142,4 @@ const CartPage = props => {
 };
 
 export default CartPage;
+

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

@@ -12,7 +12,7 @@ const OrderSummary = props => {
             <h2 aria-live="polite" className="text-[16px] font-medium mb-4">
                 <FormattedMessage
                     id={'checkoutPage.orderSummary'}
-                    defaultMessage={'Summary'}
+                    defaultMessage={'Order Summary'}
                 />
             </h2>
             <PriceSummary isUpdating={props.isUpdating} />

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentInformation.js

@@ -49,7 +49,7 @@ const PaymentInformation = props => {
             <LoadingIndicator classes={{ root: classes.loading }}>
                 <FormattedMessage
                     id={'checkoutPage.loadingPaymentInformation'}
-                    defaultMessage={'Fetching Payment Information'}
+                    defaultMessage={'Fetching Payment Method'}
                 />
             </LoadingIndicator>
         );

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -180,7 +180,7 @@ const PaymentMethods = props => {
             <h5 className={classes.cardTitle}>
                 {formatMessage({
                     id: 'checkoutPage.paymentInformation',
-                    defaultMessage: 'Payment Information'
+                    defaultMessage: 'Payment Method'
                 })}
             </h5>
             <RadioGroup

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PriceAdjustments/priceAdjustments.js

@@ -1,11 +1,14 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { func } from 'prop-types';
+import { useMutation, useQuery } from '@apollo/client';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
 import { Accordion, Section } from '@magento/venia-ui/lib/components/Accordion';
-import CouponCode from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode';
+import SellerCouponCheckout from '@riosst100/pwa-marketplace/src/components/SellerCoupon/sellerCouponCheckout';
+import couponCodeOperations from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/couponCode.gql';
 import GiftCardSection from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/giftCardSection';
 import GiftOptionsSection from '@magento/venia-ui/lib/components/CartPage/PriceAdjustments/giftOptionsSection';
 
@@ -20,8 +23,44 @@ import cn from 'classnames';
 const PriceAdjustments = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
-    const { setPageIsUpdating } = props;
+    const { setPageIsUpdating, couponData, couponLoading, couponError } = props;
     const { formatMessage } = useIntl();
+    const [{ cartId }] = useCartContext();
+    const [applyCoupon, { loading: applyingCoupon }] = useMutation(couponCodeOperations.applyCouponMutation);
+    const [removeCoupon, { loading: removingCoupon }] = useMutation(couponCodeOperations.removeCouponMutation);
+    const { data: appliedData, loading: appliedLoading } = useQuery(
+        couponCodeOperations.getAppliedCouponsQuery,
+        { variables: { cartId }, skip: !cartId }
+    );
+    const [sectionOpen, setSectionOpen] = useState(false);
+
+    const handleApplyFromClaim = useCallback(async (item) => {
+        if (!item?.code || !cartId) return;
+        try {
+            setPageIsUpdating(true);
+            await applyCoupon({
+                variables: { cartId, couponCode: item.code }
+            });
+        } catch (e) {
+            // silent; error surfaced by apollo links/toasts if configured
+        } finally {
+            setPageIsUpdating(false);
+        }
+    }, [applyCoupon, cartId, setPageIsUpdating]);
+
+    const handleRemoveCoupon = useCallback(async () => {
+        if (!cartId) return;
+        try {
+            setPageIsUpdating(true);
+            await removeCoupon({ variables: { cartId } });
+        } catch (e) {
+            // silent
+        } finally {
+            setPageIsUpdating(false);
+        }
+    }, [removeCoupon, cartId, setPageIsUpdating]);
+
+    const appliedCoupons = appliedData?.cart?.applied_coupons || [];
 
     return (
         <div className={classes.root}>
@@ -36,17 +75,46 @@ const PriceAdjustments = props => {
                     id={'coupon_code'}
                     title={formatMessage({
                         id: 'checkoutPage.couponCode',
-                        defaultMessage: 'Enter Coupon Code'
+                        defaultMessage: 'Apply Coupon Code'
                     })}
                     classes={{
                         root: cn('border border-gray-100 rounded-md max-w-[400px] p-2.5'),
-                        title: 'text-[16px] font-medium',
+                        title: 'text-[16px] font-medium cursor-pointer',
                         title_wrapper: 'gap-sm grid grid-cols-1 grid-flow-col h-[38px] items-center justify-items-start',
                         contents_container: 'p-0'
                     }}
+                    onClick={() => setSectionOpen(prev => !prev)}
                 >
                     <Suspense fallback={<LoadingIndicator />}>
-                        <CouponCode setIsCartUpdating={setPageIsUpdating} />
+                        {sectionOpen && (
+                            <SellerCouponCheckout
+                                couponData={couponData}
+                                couponLoading={couponLoading || applyingCoupon || appliedLoading || removingCoupon}
+                                couponError={couponError}
+                                autoOpen={true}
+                                closeOnClaim={true}
+                                onSelectCoupon={handleApplyFromClaim}
+                                onTriggerRender={() => null}
+                            />
+                        )}
+                        {appliedCoupons.length > 0 && (
+                            <div className="mt-3 flex items-center gap-2 flex-wrap">
+                                {appliedCoupons.map(c => (
+                                    <div key={c.code} className="flex items-center gap-2 bg-[#fff8f1] border border-[#ffb891] rounded px-2 py-1 text-sm font-medium text-[#f76b1c]">
+                                        <span>{c.code}</span>
+                                        <button
+                                            type="button"
+                                            onClick={handleRemoveCoupon}
+                                            disabled={removingCoupon}
+                                            className="text-[#a94442] hover:text-[#f26313] disabled:opacity-50"
+                                            aria-label={formatMessage({ id: 'checkoutPage.removeCoupon', defaultMessage: 'Remove coupon' })}
+                                        >
+                                            ×
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
                     </Suspense>
                 </Section>
                 <GiftCardSection setIsCartUpdating={setPageIsUpdating} />

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.js

@@ -50,7 +50,7 @@ const ShippingInformation = props => {
             <LoadingIndicator classes={{ root: classes.loading }}>
                 <FormattedMessage
                     id={'shippingInformation.loading'}
-                    defaultMessage={'Fetching Shipping Information...'}
+                    defaultMessage={'Fetching Shipping Address...'}
                 />
             </LoadingIndicator>
         );
@@ -68,7 +68,7 @@ const ShippingInformation = props => {
                 <h5 className={classes.cardTitle}>
                     <FormattedMessage
                         id={'shippingInformation.cardTitle'}
-                        defaultMessage={'Shipping Information'}
+                        defaultMessage={'Shipping Address'}
                     />
                 </h5>
                 <LinkButton
@@ -100,7 +100,7 @@ const ShippingInformation = props => {
             >
                 <FormattedMessage
                     id={'shippingInformation.editTitle'}
-                    defaultMessage={'Shipping Information'}
+                    defaultMessage={'Shipping Address'}
                 />
             </h3>
             <div className={classes.editWrapper}>

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

@@ -1,4 +1,5 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useMemo } from 'react';
+import { useQuery } from '@apollo/client';
 import { shape, string } from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
@@ -28,9 +29,11 @@ import ShippingInformation from './ShippingInformation';
 import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
 import GoogleReCaptcha from '@magento/venia-ui/lib/components/GoogleReCaptcha';
+import { GET_COUPON_CODE_QUERY } from '@riosst100/pwa-marketplace/src/talons/Seller/seller.gql';
 
 import defaultClasses from './checkoutPage.module.css';
 import ScrollAnchor from '@magento/venia-ui/lib/components/ScrollAnchor/scrollAnchor';
+import { useHistory } from 'react-router-dom';
 
 const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
 
@@ -84,6 +87,21 @@ const CheckoutPage = props => {
 
     const [, { addToast }] = useToasts();
 
+    const history = useHistory();
+
+    
+    useEffect(() => {
+        if (isGuestCheckout) {
+            history.push('/sign-in');
+        }
+    }, [isGuestCheckout, history]);
+
+    useEffect(() => {
+        if (!isLoading && !isUpdating && !cartItems.length && isCartEmpty) {
+            history.push('/cart');
+        }
+    }, [isCartEmpty, isLoading, isUpdating, cartItems, history]);
+
     useEffect(() => {
         if (hasError) {
             const message =
@@ -115,6 +133,34 @@ const CheckoutPage = props => {
 
     let checkoutContent;
 
+    const sellerUrls = useMemo(() => {
+        if (!cartItems || !cartItems.length) return [];
+        const urls = cartItems
+            .map(item => item?.seller?.seller_url)
+            .filter(Boolean);
+        return Array.from(new Set(urls));
+    }, [cartItems]);
+
+    const sellerUrl = sellerUrls[0] || null;
+
+    const {
+        data: couponData,
+        loading: couponLoading,
+        error: couponError
+    } = useQuery(GET_COUPON_CODE_QUERY, {
+        variables: {
+            sellerUrl,
+            pageSize: 20,
+            currentPage: 1,
+            filters: {
+                is_public: { eq: '1' }
+            }
+        },
+        skip: !sellerUrl,
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
     const heading = isGuestCheckout
         ? formatMessage({
             id: 'checkoutPage.guestCheckout',
@@ -240,7 +286,12 @@ const CheckoutPage = props => {
         const priceAdjustmentsSection =
             checkoutStep === CHECKOUT_STEP.PAYMENT ? (
                 <div className={classes.price_adjustments_container}>
-                    <PriceAdjustments setPageIsUpdating={setIsUpdating} />
+                    <PriceAdjustments
+                        setPageIsUpdating={setIsUpdating}
+                        couponData={couponData}
+                        couponLoading={couponLoading}
+                        couponError={couponError}
+                    />
                 </div>
             ) : null;
 

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

@@ -2,7 +2,7 @@
     composes: mx-0 from global;
     composes: my-0 from global;
     composes: px-0 from global;
-    composes: py-md from global;
+    /* composes: py-md from global; */
 }
 
 /* prettier-ignore */

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -44,7 +44,6 @@ const FilterItemRadio = props => {
             classes={classes}
             id={`item-${group}-${value}`}
             label={title}
-            isSubFilter={isSubFilter}
             value={value}
             onChange={handleOnchange}
             data-cy="FilterDefault-radio"
@@ -74,7 +73,7 @@ FilterItemRadio.propTypes = {
         path: string
     }).isRequired,
     onApply: func,
-    labels: instanceOf(Map).isRequired
+    labels: instanceOf(WeakMap).isRequired
 };
 
 export default FilterItemRadio;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/filterItemRadioGroup.js

@@ -45,32 +45,15 @@ const FilterItemRadioGroup = props => {
             // }
             
             return (
-                <>
-                    <FilterItemRadio
-                        key={code}
-                        filterApi={filterApi}
-                        filterState={filterState}
-                        group={group}
-                        item={item}
-                        onApply={onApply}
-                        labels={labels}
-                    />
-                    {/* {subFilter && <FilterBlock
-                        key={subFilter.key}
-                        filterApi={subFilter.filterApi}
-                        filterState={subFilter.filterState}
-                        filterFrontendInput={subFilter.filterFrontendInput}
-                        group={subFilter.group}
-                        allowedSubFilters={newAllowedSubFilters}
-                        subFilterItems={subFilterItems}
-                        isSubFilter={true}
-                        items={subFilter.items}
-                        name={''}
-                        onApply={subFilter.onApply}
-                        initialOpen={true}
-                    />} */}
-                    {/* {subFilterBlock} */}
-                </>
+                <FilterItemRadio
+                    key={index}
+                    filterApi={filterApi}
+                    filterState={filterState}
+                    group={group}
+                    item={item}
+                    onApply={onApply}
+                    labels={labels}
+                />
             );
         });
     }, [filterApi, allowedSubFilters, subFilter, filterState, group, items, labels, onApply,isListExpanded,itemCountToShow]);
@@ -122,7 +105,7 @@ FilterItemRadioGroup.propTypes = {
         })
     ).isRequired,
     onApply: func,
-    labels: instanceOf(Map).isRequired
+    labels: instanceOf(WeakMap).isRequired
 };
 
 export default FilterItemRadioGroup;

package/src/overwrites/venia-ui/lib/components/FilterModal/FilterList/subFilterItemRadioGroup.js

@@ -85,7 +85,7 @@ SubFilterItemRadioGroup.propTypes = {
         })
     ).isRequired,
     onApply: func,
-    labels: instanceOf(Map).isRequired
+    labels: instanceOf(WeakMap).isRequired
 };
 
 export default SubFilterItemRadioGroup;

package/src/overwrites/venia-ui/lib/components/Footer/footer.js

@@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { shape, string } from 'prop-types';
 import { useFooter } from '@magento/peregrine/lib/talons/Footer/useFooter';
+import { useLocation } from 'react-router-dom';
 
 import Logo from '@magento/venia-ui/lib/components/Logo';
 import Newsletter from '@magento/venia-ui/lib/components/Newsletter';
@@ -19,6 +20,9 @@ const Footer = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useFooter();
 
+    const location = useLocation();
+    const isCheckoutPage = location.pathname === '/checkout';
+
     const { copyrightText } = talonProps;
     const { formatMessage } = useIntl();
     const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
@@ -62,10 +66,16 @@ const Footer = props => {
             data-cy="Footer-root"
             className={cn(
                 classes.root,
-                '!pt-[50px] !px-6 lg_!px-4'
+                // '!pt-[50px] !px-6 lg_!px-4'
             )}
+            style={
+                {
+                    "zIndex": 1,
+                    "position": "relative"
+                }
+            }
         >
-            <div className={classes.links}>
+            {!isCheckoutPage && <div className={classes.links}>
                 {linkGroups}
                 <div>
                     <Newsletter />
@@ -107,8 +117,8 @@ const Footer = props => {
                         </li>
                     </ul>
                 </div>
-            </div>
-            <div className="flex flex-row justify-between py-2 border-t border-gray-100">
+            </div>}
+            <div className={"flex flex-row justify-between py-4 border-t border-gray-100 w-full py-[15px] mx-[auto] flex justify-between items-center" + (isCheckoutPage ? " max-w-[1000px]" : " max-w-[1300px]")}>
                 <p className="text-colorDefault">{copyrightText || null}</p>
                 <ul className="flex flex-row gap-x-2.5">
                     <li data-cy="Footer-terms" className={classes.terms}>

package/src/overwrites/venia-ui/lib/components/Footer/footer.module.css

@@ -2,14 +2,14 @@
     composes: border-t from global;
     composes: border-solid from global;
     composes: border-gray-100 from global;
-    composes: gap-y-16 from global;
+    composes: gap-y-0 from global;
     composes: grid from global;
     composes: leading-normal from global;
-    composes: max-w-site from global;
-    composes: min-h-[15rem] from global;
+    /* composes: max-w-site from global; */
+    /* composes: min-h-[15rem] from global; */
     composes: mx-auto from global;
     composes: my-0 from global;
-    composes: pt-16 from global;
+    /* composes: pt-16 from global; */
     composes: text-sm from global;
     composes: text-subtle from global;
     composes: w-full from global;
@@ -19,12 +19,24 @@
     composes: gap-x-md from global;
     composes: gap-y-lg from global;
     composes: grid from global;
+    composes: py-6 from global;
     composes: grid-cols-1 from global;
     composes: md_grid-cols-1 from global;
     composes: grid-flow-row-dense from global;
     composes: lg_gap-x-sm from global;
     composes: lg_gap-y-md from global;
     composes: lg_grid-cols-4 from global;
+    composes: flex from global;
+    composes: flex-row from global;
+    composes: justify-between from global;
+    composes: w-full from global;
+    composes: w-full from global;
+    composes: mx-[auto] from global;
+    composes: max-w-[1300px] from global;
+    /* composes: py-[10px] from global; */
+    /* composes: px-[15px] from global; */
+
+     /* border-t border-gray-100  px-[15px] py-[10px] mx-[auto] */
 }
 
 .linkGroup {

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

@@ -108,10 +108,10 @@ const GalleryItem = props => {
             >
                 <div className={cn('item-product relative z-[1]')}>
                     <ProductLabel item={item} />
-                    <Link
+                    <span
                         aria-label={name}
-                        onClick={handleLinkClick}
-                        to={productLink}
+                        // onClick={handleLinkClick}
+                        // to={productLink}
                         className={classes.images}
                     >
                         <Image
@@ -127,17 +127,18 @@ const GalleryItem = props => {
                             widths={IMAGE_WIDTHS}
                         />
                         {ratingAverage}
-                    </Link>
+                    </span>
                 </div>
                 <div className={cn('item-info px-[15px] pb-[20px]')}>
-                    <Link
+                    {/* <Link
                         onClick={handleLinkClick}
                         to={productLink}
                         className={cn(classes.name, 'xs_!no-underline')}
                         data-cy="GalleryItem-name"
-                    >
-                        <span>{name}</span>
-                    </Link>
+                    > */}
+                        <span className={cn(classes.name, 'xs_!no-underline')}
+                        data-cy="GalleryItem-name">{name}</span>
+                    {/* </Link> */}
                     <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
                         <p className='font-medium !text-[#f76b1c] text-[1.1rem] !mb-1 !leading-[14px]'>
                             <Price

package/src/overwrites/venia-ui/lib/components/Header/accountTrigger.js

@@ -4,9 +4,9 @@ import { shape, string } from 'prop-types';
 
 import { useAccountTrigger } from '@magento/peregrine/lib/talons/Header/useAccountTrigger';
 import { useStyle } from '@magento/venia-ui/lib/classify';
-
+import Icon from '@magento/venia-ui/lib/components/Icon';
 // import AccountChip from '../AccountChip';
-import { User } from 'iconsax-react';
+import { User as UserIcon } from 'react-feather';
 import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
 import cn from 'classnames';
 
@@ -67,7 +67,7 @@ const AccountTrigger = props => {
                         })}
                         shouldIndicateLoading={true}
                     /> */}
-                    <User size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    <Icon src={UserIcon} attrs={{ width: 20 }} />
                     {isUserSignedIn ? <span className='text-base font-medium'>
                         {formatMessage({
                             id: 'accountTrigger.myAccount',

package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.js

@@ -10,7 +10,7 @@ import Icon from '@magento/venia-ui/lib/components/Icon';
 import defaultClasses from './cartTrigger.module.css';
 import { GET_ITEM_COUNT_QUERY } from '@magento/venia-ui/lib/components/Header/cartTrigger.gql';
 import cn from 'classnames';
-import { ShoppingCart } from 'iconsax-react';
+import { ShoppingCart } from 'react-feather';
 import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
 import { Link } from 'react-router-dom';
 
@@ -49,8 +49,8 @@ const CartTrigger = props => {
         <span
             className={cn(
                 classes.counter,
-                'bg-yellow-300 min-w-[18px] min-h-[18px] text-base font-regular leading-[18px] top-[-2px]',
-                '!left-auto right-[3px]'
+                'bg-[#f76b1c] min-w-[18px] min-h-[18px] text-[10px] font-regular leading-[18px] top-[-5px]',
+                '!left-auto right-[-4px] absolute p-0 bg'
             )}
             data-cy="CartTrigger-counter"
         >
@@ -58,6 +58,8 @@ const CartTrigger = props => {
         </span>
     ) : null;
 
+    // const ShoppingCartIcon = <Icon src={ShoppingCart} attrs={{ width: 20 }} />;
+
     const cartTrigger = hideCartTrigger ? null : (
         // Because this button behaves differently on desktop and mobile
         // we render two buttons that differ only in their click handler
@@ -67,13 +69,14 @@ const CartTrigger = props => {
                 <Link
                     className={cn(
                         classes.trigger,
-                        'gap-[5px] !min-h-[30px] !h-auto !min-w-[35px] !w-fit !justify-between',
+                        'gap-[5px] !min-h-[30px] !h-auto !min-w-[35px] !w-fit',
                     )}
                     to='/cart'
                 >
                     <span>
                         {/* <Icon src={ShoppingCartIcon} /> */}
-                        <ShoppingCart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                        {/* <ShoppingCart size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" /> */}
+                        <Icon src={ShoppingCart} attrs={{ width: 20 }} />
                         {maybeItemCounter}
                     </span>
                 </Link>
@@ -84,7 +87,7 @@ const CartTrigger = props => {
                 className={classes.link}
                 onClick={handleLinkClick}
             >
-                <Icon src={ShoppingCartIcon} />
+                <Icon src={ShoppingCart} attrs={{ width: 20 }} />
                 {maybeItemCounter}
             </button>
         </Fragment>

package/src/overwrites/venia-ui/lib/components/Header/cartTrigger.module.css

@@ -1,5 +1,5 @@
 .counter {
-    composes: absolute from global;
+    /* composes: absolute from global; */
     composes: bg-brand-dark from global;
     composes: font-medium from global;
     composes: leading-tight from global;