[project-base] [SSP-2610] comparison and wishlist icon changes (#3360)

shopsys · Aug 20, 2024 · dd2034b · dd2034b
2 parents 35e8da8 + 8f48285
commit dd2034b
Show file tree

Hide file tree

Showing 98 changed files with 32 additions and 35 deletions.
diff --git a/storefront/components/Basic/Icon/CompareIcon.tsx b/storefront/components/Basic/Icon/CompareIcon.tsx
@@ -1,32 +1,11 @@
-export const CompareIcon: SvgFC = (props) => (
-    <svg {...props} viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg">
+export const CompareIcon: SvgFC<{ isFull: boolean }> = ({ isFull, ...props }) => (
+    <svg {...props} fill={isFull ? 'currentColor' : 'none'} viewBox="0 0 18 17" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="m10.117 14.488.083-.053-.083.053Zm.083.132 3.552 5.63h-7.16l3.608-5.63Z"
-            fill="transparent"
-            stroke="currentColor"
-            strokeLinejoin="round"
-            strokeWidth="2.5"
-        />
-        <path
-            d="M4.7 9.624c0 1.134-.897 2.028-1.975 2.028-1.077 0-1.975-.894-1.975-2.028 0-1.133.898-2.027 1.975-2.027 1.078 0 1.976.894 1.976 2.027Z"
-            fill="transparent"
-            stroke="currentColor"
-            strokeWidth="2.5"
-        />
-        <path d="M10.233 1v14.056" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
-        <path
-            d="M2.792 6.878V3.646h14.855v2.883"
-            fill="transparent"
+            d="M0.75 12.55V12.4261C0.75 12.165 0.75 12.0344 0.769971 11.9072C0.787703 11.7943 0.817123 11.6835 0.857757 11.5767C0.903521 11.4563 0.968295 11.343 1.09784 11.1163L4.05 5.95M0.75 12.55C0.75 14.3725 2.22746 15.85 4.05 15.85C5.87254 15.85 7.35 14.3725 7.35 12.55M0.75 12.55V12.385C0.75 12.154 0.75 12.0385 0.79496 11.9502C0.834508 11.8726 0.897612 11.8095 0.975229 11.77C1.06347 11.725 1.17898 11.725 1.41 11.725H6.69C6.92102 11.725 7.03653 11.725 7.12477 11.77C7.20239 11.8095 7.26549 11.8726 7.30504 11.9502C7.35 12.0385 7.35 12.154 7.35 12.385V12.55M4.05 5.95L7.00216 11.1163C7.1317 11.343 7.19648 11.4563 7.24224 11.5767C7.28288 11.6835 7.3123 11.7943 7.33003 11.9072C7.35 12.0344 7.35 12.165 7.35 12.4261V12.55M4.05 5.95L13.95 4.3M10.65 10.9V10.7761C10.65 10.515 10.65 10.3844 10.67 10.2572C10.6877 10.1443 10.7171 10.0335 10.7578 9.92668C10.8035 9.80634 10.8683 9.69298 10.9978 9.46628L13.95 4.3M10.65 10.9C10.65 12.7225 12.1275 14.2 13.95 14.2C15.7725 14.2 17.25 12.7225 17.25 10.9M10.65 10.9V10.735C10.65 10.504 10.65 10.3885 10.695 10.3002C10.7345 10.2226 10.7976 10.1595 10.8752 10.12C10.9635 10.075 11.079 10.075 11.31 10.075H16.59C16.821 10.075 16.9365 10.075 17.0248 10.12C17.1024 10.1595 17.1655 10.2226 17.205 10.3002C17.25 10.3885 17.25 10.504 17.25 10.735V10.9M13.95 4.3L16.9022 9.46628C17.0317 9.69298 17.0965 9.80634 17.1422 9.92668C17.1829 10.0335 17.2123 10.1443 17.23 10.2572C17.25 10.3844 17.25 10.515 17.25 10.7761V10.9M9 1V5.125"
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
-            strokeWidth="2.5"
-        />
-        <path
-            d="M19.25 8.671c0 .95-.751 1.695-1.648 1.695-.897 0-1.648-.745-1.648-1.694 0-.95.751-1.695 1.648-1.695.897 0 1.648.745 1.648 1.694Z"
-            fill="transparent"
-            stroke="currentColor"
-            strokeWidth="2.5"
+            strokeWidth="1.7"
         />
     </svg>
 );
diff --git a/storefront/components/Basic/Icon/HeartIcon.tsx b/storefront/components/Basic/Icon/HeartIcon.tsx
@@ -1,13 +1,17 @@
 export const HeartIcon: SvgFC<{ isFull: boolean }> = ({ isFull, ...props }) => (
-    <svg {...props} viewBox="0 0 23 19" xmlns="http://www.w3.org/2000/svg">
+    <svg
+        {...props}
+        fill={isFull ? 'currentColor' : 'none'}
+        viewBox="0 0 17 15"
+        width="17"
+        xmlns="http://www.w3.org/2000/svg"
+    >
         <path
-            clipRule="evenodd"
-            d="M20.046 2.591a5.43 5.43 0 0 0-7.681 0l-1.047 1.047-1.046-1.047a5.431 5.431 0 0 0-7.681 7.681l1.046 1.047 6.267 6.267a2 2 0 0 0 2.829 0L19 11.319l1.046-1.047a5.43 5.43 0 0 0 0-7.68Z"
-            fill={isFull ? 'currentColor' : 'transparent'}
+            d="M7.73766 2.45036C7.92761 2.6701 8.20372 2.79639 8.49418 2.79639C8.78464 2.79639 9.06075 2.6701 9.2507 2.45036C10.6472 0.834856 12.8338 0.485994 14.5217 1.87418C16.2586 3.30266 16.4712 5.71231 15.1273 7.42342C14.4873 8.23832 13.1449 9.56362 11.7386 10.877C10.4847 12.0481 9.23022 13.1639 8.49418 13.8114C7.75813 13.1639 6.50362 12.0481 5.24973 10.877C3.84348 9.56362 2.50101 8.23832 1.86102 7.42342C0.526134 5.72372 0.752877 3.32325 2.47712 1.86548C4.11809 0.478109 6.33367 0.826203 7.73766 2.45036Z"
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
-            strokeWidth="2.5"
+            strokeWidth="2"
         />
     </svg>
 );
diff --git a/storefront/components/Blocks/Product/ButtonsAction/ProductCompareButton.tsx b/storefront/components/Blocks/Product/ButtonsAction/ProductCompareButton.tsx
@@ -1,5 +1,6 @@
 import { CompareIcon } from 'components/Basic/Icon/CompareIcon';
 import useTranslation from 'next-translate/useTranslation';
+import { twJoin } from 'tailwind-merge';
 import { twMergeCustom } from 'utils/twMerge';
 
 type ProductCompareButtonProps = {
@@ -22,7 +23,10 @@ export const ProductCompareButton: FC<ProductCompareButtonProps> = ({
             title={isProductInComparison ? t('Remove product from comparison') : t('Add product to comparison')}
             onClick={toggleProductInComparison}
         >
-            <CompareIcon className={isProductInComparison ? 'text-linkHovered' : ''} />
+            <CompareIcon
+                className={twJoin('w-5', isProductInComparison ? 'text-link' : '')}
+                isFull={isProductInComparison}
+            />
             {isWithText && (
                 <span className="text-sm">{isProductInComparison ? t('Remove from comparison') : t('Compare')}</span>
             )}

diff --git a/storefront/components/Blocks/Product/ButtonsAction/ProductWishlistButton.tsx b/storefront/components/Blocks/Product/ButtonsAction/ProductWishlistButton.tsx
@@ -1,6 +1,7 @@
 import { HeartIcon } from 'components/Basic/Icon/HeartIcon';
 import useTranslation from 'next-translate/useTranslation';
 import { HTMLAttributes } from 'react';
+import { twJoin } from 'tailwind-merge';
 import { ExtractNativePropsFromDefault } from 'types/ExtractNativePropsFromDefault';
 import { twMergeCustom } from 'utils/twMerge';
 
@@ -26,7 +27,10 @@ export const ProductWishlistButton: FC<ProductCompareButtonProps & NativeProps>
             title={isProductInWishlist ? t('Remove product from wishlist') : t('Add product to wishlist')}
             onClick={toggleProductInWishlist}
         >
-            <HeartIcon className={isProductInWishlist ? 'text-linkHovered' : ''} isFull={isProductInWishlist} />
+            <HeartIcon
+                className={twJoin('w-5', isProductInWishlist ? 'text-heartIconFull' : '')}
+                isFull={isProductInWishlist}
+            />
             {isWithText && (
                 <span className="text-sm">
                     {isProductInWishlist ? t('Remove from wishlist') : t('Add to wishlist')}

diff --git a/storefront/components/Layout/Header/MenuIconic/MenuIconic.tsx b/storefront/components/Layout/Header/MenuIconic/MenuIconic.tsx
@@ -6,6 +6,7 @@ import { HeartIcon } from 'components/Basic/Icon/HeartIcon';
 import { MarkerIcon } from 'components/Basic/Icon/MarkerIcon';
 import { useDomainConfig } from 'components/providers/DomainConfigProvider';
 import useTranslation from 'next-translate/useTranslation';
+import { twJoin } from 'tailwind-merge';
 import { useIsUserLoggedIn } from 'utils/auth/useIsUserLoggedIn';
 import { useComparison } from 'utils/productLists/comparison/useComparison';
 import { useWishlist } from 'utils/productLists/wishlist/useWishlist';
@@ -41,14 +42,17 @@ export const MenuIconic: FC = () => {
 
             <MenuIconicItem className="max-lg:hidden">
                 <MenuIconicItemLink href={productComparisonUrl} title={t('Comparison')} type="comparison">
-                    <CompareIcon className="w-4" />
+                    <CompareIcon className="w-4" isFull={!!comparison?.products.length} />
                     {!!comparison?.products.length && <span>{comparison.products.length}</span>}
                 </MenuIconicItemLink>
             </MenuIconicItem>
 
             <MenuIconicItem>
                 <MenuIconicItemLink href={wishlistUrl} title={t('Wishlist')} type="wishlist">
-                    <HeartIcon className="w-6 lg:w-4" isFull={!!wishlist?.products.length} />
+                    <HeartIcon
+                        className={twJoin('w-6 lg:w-4', wishlist?.products.length ? 'text-heartIconFull' : '')}
+                        isFull={!!wishlist?.products.length}
+                    />
                     <span className="max-lg:hidden">
                         {!!wishlist?.products.length && <span>{wishlist.products.length}</span>}
                     </span>

diff --git a/storefront/components/Layout/Header/MenuIconic/MenuIconicPlaceholder.tsx b/storefront/components/Layout/Header/MenuIconic/MenuIconicPlaceholder.tsx
@@ -32,7 +32,7 @@ export const MenuIconicPlaceholder: FC = () => {
             </li>
 
             <li className={twJoin('max-lg:hidden', placeholderItemTwClass)}>
-                <CompareIcon className="w-4" />
+                <CompareIcon className="w-4" isFull={false} />
             </li>
 
             <li className={twJoin('max-lg:hidden', placeholderItemTwClass)}>

diff --git a/...ication/login.cy.ts/should login from header and then log out (after login).png b/...ication/login.cy.ts/should login from header and then log out (after login).png
diff --git a/...cation/login.cy.ts/should login from header and then log out (after logout).png b/...cation/login.cy.ts/should login from header and then log out (after logout).png
diff --git a/...ion/login.cy.ts/should login from login page and then log out (after login).png b/...ion/login.cy.ts/should login from login page and then log out (after login).png
diff --git a/...on/login.cy.ts/should login from login page and then log out (after logout).png b/...on/login.cy.ts/should login from login page and then log out (after logout).png
diff --git a/...h empty registration form, but then allow after filling (after invalid try).png b/...h empty registration form, but then allow after filling (after invalid try).png
diff --git a/...ith empty registration form, but then allow after filling (after valid try).png b/...ith empty registration form, but then allow after filling (after valid try).png
diff --git a/...ration with invalid info, but then allow after correction (after valid try).png b/...ration with invalid info, but then allow after correction (after valid try).png
diff --git a/...n/registration.cy.ts/should register as a B2C customer (customer edit page).png b/...n/registration.cy.ts/should register as a B2C customer (customer edit page).png
diff --git a/...stration.cy.ts/should register as a B2C customer (filled registration form).png b/...stration.cy.ts/should register as a B2C customer (filled registration form).png
diff --git a/...ing cart in header and then display empty cart message (after first remove).png b/...ing cart in header and then display empty cart message (after first remove).png
diff --git a/...ng cart in header and then display empty cart message (after second remove).png b/...ng cart in header and then display empty cart message (after second remove).png
diff --git a/...vious cart after logging in in order 3rd step (cart page after first login).png b/...vious cart after logging in in order 3rd step (cart page after first login).png
diff --git a/...ious cart after logging in in order 3rd step (cart page after first logout).png b/...ious cart after logging in in order 3rd step (cart page after first logout).png
diff --git a/...cart, and empty cart after log out (cart page after adding product to cart).png b/...cart, and empty cart after log out (cart page after adding product to cart).png
diff --git a/...uct to an empty cart, and empty cart after log out (cart page after logout).png b/...uct to an empty cart, and empty cart after log out (cart page after logout).png
diff --git a/...cart, and empty cart after log out (cart page after adding product to cart).png b/...cart, and empty cart after log out (cart page after adding product to cart).png
diff --git a/...lready prefilled cart, and empty cart after log out (cart page after login).png b/...lready prefilled cart, and empty cart after log out (cart page after login).png
diff --git a/...ready prefilled cart, and empty cart after log out (cart page after logout).png b/...ready prefilled cart, and empty cart after log out (cart page after logout).png
diff --git a/... cart for the registered customer) (cart page after adding product to cart).png b/... cart for the registered customer) (cart page after adding product to cart).png
diff --git a/...or the registered customer) (cart page after adding second product to cart).png b/...or the registered customer) (cart page after adding second product to cart).png
diff --git a/...ng with an empty cart for the registered customer) (cart page after logout).png b/...ng with an empty cart for the registered customer) (cart page after logout).png
diff --git a/...h an empty cart for the registered customer) (cart page after second login).png b/...h an empty cart for the registered customer) (cart page after second login).png
diff --git a/...rt, and then add a different one (cart page after applying first promocode).png b/...rt, and then add a different one (cart page after applying first promocode).png
diff --git a/...rt, and then add a different one (cart page after removing first promocode).png b/...rt, and then add a different one (cart page after removing first promocode).png
diff --git a/...t, and then add a different one (cart page after removing second promocode).png b/...t, and then add a different one (cart page after removing second promocode).png
diff --git a/...t that allows it, and see the promo code removed (after applying promocode).png b/...t that allows it, and see the promo code removed (after applying promocode).png
diff --git a/...d see the promo code removed (after removing product that allows promocode).png b/...d see the promo code removed (after removing product that allows promocode).png
diff --git a/...y using spinbox in cart (multiple times if clicked slowly) (after decrease).png b/...y using spinbox in cart (multiple times if clicked slowly) (after decrease).png
diff --git a/...y using spinbox in cart (multiple times if clicked slowly) (after increase).png b/...y using spinbox in cart (multiple times if clicked slowly) (after increase).png
diff --git a/...duct quantity using spinbox in cart (once if clicked fast) (after decrease).png b/...duct quantity using spinbox in cart (once if clicked fast) (after decrease).png
diff --git a/...duct quantity using spinbox in cart (once if clicked fast) (after increase).png b/...duct quantity using spinbox in cart (once if clicked fast) (after increase).png
diff --git a/.../cart/cartPage.cy.ts/should remove products from cart (after first removal).png b/.../cart/cartPage.cy.ts/should remove products from cart (after first removal).png
diff --git a/...ge.cy.ts/should remove products from cart (empty cart after second removal).png b/...ge.cy.ts/should remove products from cart (empty cart after second removal).png
diff --git a/...ransport limit (cart page with non-free transport after applying promocode).png b/...ransport limit (cart page with non-free transport after applying promocode).png
diff --git a/...ToCart.cy.ts/should add product to cart from brand page (add to cart popup).png b/...ToCart.cy.ts/should add product to cart from brand page (add to cart popup).png
diff --git a/...art.cy.ts/should add product to cart from category page (add to cart popup).png b/...art.cy.ts/should add product to cart from category page (add to cart popup).png
diff --git a/...rt.cy.ts/should add product to cart from product detail (add to cart popup).png b/...rt.cy.ts/should add product to cart from product detail (add to cart popup).png
diff --git a/... add product to cart from promoted products on homepage (add to cart popup).png b/... add product to cart from promoted products on homepage (add to cart popup).png
diff --git a/....ts/should add product to cart from search results page (add to cart popup).png b/....ts/should add product to cart from search results page (add to cart popup).png
diff --git a/.../should add variant product to cart from product detail (add to cart popup).png b/.../should add variant product to cart from product detail (add to cart popup).png
diff --git a/...t information form if cart is empty and user is logged in (empty cart page).png b/...t information form if cart is empty and user is logged in (empty cart page).png
diff --git a/...formation form if cart is empty and user is not logged in (empty cart page).png b/...formation form if cart is empty and user is not logged in (empty cart page).png
diff --git a/...o home, cash on delivery) and check it in order detail (order confirmation).png b/...o home, cash on delivery) and check it in order detail (order confirmation).png
diff --git a/...port to home, cash on delivery) and check it in order detail (order detail).png b/...port to home, cash on delivery) and check it in order detail (order detail).png
diff --git a/...d user (PPL, credit cart) and check it in order detail (order confirmation).png b/...d user (PPL, credit cart) and check it in order detail (order confirmation).png
diff --git a/...nlogged user (PPL, credit cart) and check it in order detail (order detail).png b/...nlogged user (PPL, credit cart) and check it in order detail (order detail).png
diff --git a/...ersonal collection, cash) and check it in order detail (order confirmation).png b/...ersonal collection, cash) and check it in order detail (order confirmation).png
diff --git a/...ser (personal collection, cash) and check it in order detail (order detail).png b/...ser (personal collection, cash) and check it in order detail (order detail).png
diff --git a/...o home, cash on delivery) and check it in order detail (order confirmation).png b/...o home, cash on delivery) and check it in order detail (order confirmation).png
diff --git a/...port to home, cash on delivery) and check it in order detail (order detail).png b/...port to home, cash on delivery) and check it in order detail (order detail).png
diff --git a/...o home, cash on delivery) and check it in order detail (order confirmation).png b/...o home, cash on delivery) and check it in order detail (order confirmation).png
diff --git a/...port to home, cash on delivery) and check it in order detail (order detail).png b/...port to home, cash on delivery) and check it in order detail (order detail).png
diff --git a/...ate order with promo code and check it in order detail (order confirmation).png b/...ate order with promo code and check it in order detail (order confirmation).png
diff --git a/...ld create order with promo code and check it in order detail (order detail).png b/...ld create order with promo code and check it in order detail (order detail).png
diff --git a/...heck that the just created order is in customer orders (customer edit page).png b/...heck that the just created order is in customer orders (customer edit page).png
diff --git a/...heck that the just created order is in customer orders (order confirmation).png b/...heck that the just created order is in customer orders (order confirmation).png
diff --git a/... and check that the just created order is in customer orders (order detail).png b/... and check that the just created order is in customer orders (order detail).png
diff --git a/... then fill and keep new delivery address after refresh (order confirmation).png b/... then fill and keep new delivery address after refresh (order confirmation).png
diff --git a/...r, but then fill and keep new delivery address after refresh (order detail).png b/...r, but then fill and keep new delivery address after refresh (order detail).png
diff --git a/...e and back to the new address which should stay filled (order confirmation).png b/...e and back to the new address which should stay filled (order confirmation).png
diff --git a/...ved one and back to the new address which should stay filled (order detail).png b/...ved one and back to the new address which should stay filled (order detail).png
diff --git a/...should keep filled delivery address after page refresh (order confirmation).png b/...should keep filled delivery address after page refresh (order confirmation).png
diff --git a/...cy.ts/should keep filled delivery address after page refresh (order detail).png b/...cy.ts/should keep filled delivery address after page refresh (order detail).png
diff --git a/... different delivery address and then checking it again (order confirmation).png b/... different delivery address and then checking it again (order confirmation).png
diff --git a/...ox for different delivery address and then checking it again (order detail).png b/...ox for different delivery address and then checking it again (order detail).png
diff --git a/...delivery address for logged-in user after page refresh (order confirmation).png b/...delivery address for logged-in user after page refresh (order confirmation).png
diff --git a/...illed delivery address for logged-in user after page refresh (order detail).png b/...illed delivery address for logged-in user after page refresh (order detail).png
diff --git a/... different delivery address and then checking it again (order confirmation).png b/... different delivery address and then checking it again (order confirmation).png
diff --git a/...ox for different delivery address and then checking it again (order detail).png b/...ox for different delivery address and then checking it again (order detail).png
diff --git a/...g and checking checkbox for different delivery address (order confirmation).png b/...g and checking checkbox for different delivery address (order confirmation).png
diff --git a/...hecking and checking checkbox for different delivery address (order detail).png b/...hecking and checking checkbox for different delivery address (order detail).png
diff --git a/...hen keep the filled delivery information after refresh (order confirmation).png b/...hen keep the filled delivery information after refresh (order confirmation).png
diff --git a/... and then keep the filled delivery information after refresh (order detail).png b/... and then keep the filled delivery information after refresh (order detail).png
diff --git a/...d pickup point and keep delivery contact after refresh (order confirmation).png b/...d pickup point and keep delivery contact after refresh (order confirmation).png
diff --git a/...elected pickup point and keep delivery contact after refresh (order detail).png b/...elected pickup point and keep delivery contact after refresh (order detail).png
diff --git a/... different delivery contact and then checking it again (order confirmation).png b/... different delivery contact and then checking it again (order confirmation).png
diff --git a/...ox for different delivery contact and then checking it again (order detail).png b/...ox for different delivery contact and then checking it again (order detail).png
diff --git a/...(pre-fill cart) for logged-in user with initially empty cart (after repeat).png b/...(pre-fill cart) for logged-in user with initially empty cart (after repeat).png
diff --git a/...ogged-in user with initially filled cart and allowed merging (after repeat).png b/...ogged-in user with initially filled cart and allowed merging (after repeat).png
diff --git a/...ed-in user with initially filled cart and disallowed merging (after repeat).png b/...ed-in user with initially filled cart and disallowed merging (after repeat).png
diff --git a/... (pre-fill cart) for unlogged user with initially empty cart (after repeat).png b/... (pre-fill cart) for unlogged user with initially empty cart (after repeat).png
diff --git a/...unlogged user with initially filled cart and allowed merging (after repeat).png b/...unlogged user with initially filled cart and allowed merging (after repeat).png
diff --git a/...ogged user with initially filled cart and disallowed merging (after repeat).png b/...ogged user with initially filled cart and disallowed merging (after repeat).png
diff --git a/...t is large enough for transport to be free (cart page with enough products).png b/...t is large enough for transport to be free (cart page with enough products).png
diff --git a/...ons if cart is empty and user is logged in (after redirecting to cart page).png b/...ons if cart is empty and user is logged in (after redirecting to cart page).png
diff --git a/...if cart is empty and user is not logged in (after redirecting to cart page).png b/...if cart is empty and user is not logged in (after redirecting to cart page).png
diff --git a/...shots.cy.ts/blog article detail visit with screenshot (blog article detail).png b/...shots.cy.ts/blog article detail visit with screenshot (blog article detail).png
diff --git a/...thScreenshots.cy.ts/category detail visit with screenshot (category detail).png b/...thScreenshots.cy.ts/category detail visit with screenshot (category detail).png
diff --git a/...simpleVisitsWithScreenshots.cy.ts/homepage visit with screenshot (homepage).png b/...simpleVisitsWithScreenshots.cy.ts/homepage visit with screenshot (homepage).png
diff --git a/...WithScreenshots.cy.ts/product detail visit with screenshot (product detail).png b/...WithScreenshots.cy.ts/product detail visit with screenshot (product detail).png
diff --git a/...VisitsWithScreenshots.cy.ts/stores page visit with screenshot (stores page).png b/...VisitsWithScreenshots.cy.ts/stores page visit with screenshot (stores page).png
diff --git a/storefront/tailwind.config.js b/storefront/tailwind.config.js
@@ -73,6 +73,8 @@ module.exports = {
             actionInvertedBorderHovered: '#004EB6',
             actionInvertedTextHovered: '#004EB6',
 
+            heartIconFull: '#EC5353',
+
             availabilityInStock: '#00CDBE',
             availabilityOutOfStock: '#EC5353',