refactor ProductVariantsTable (#2899)

storefront/components/Basic/Image/Image.tsx

@@ -34,14 +34,16 @@ export const Image: FC<ImageProps> = ({
 
     if (!img) {
         return (
-            <img
-                alt={alt || ''}
-                className={twMergeCustom('h-auto w-full', imageTwClass)}
-                data-testid={getDataTestId(dataTestId) + '-empty'}
-                height={height || 160}
-                src="/images/optimized-noimage.webp"
-                width={width || 160}
-            />
+            <div className={wrapperClassName}>
+                <img
+                    alt={alt || ''}
+                    className={twMergeCustom('h-auto w-full', imageTwClass)}
+                    data-testid={getDataTestId(dataTestId) + '-empty'}
+                    height={height || 160}
+                    src="/images/optimized-noimage.webp"
+                    width={width || 160}
+                />
+            </div>
         );
     }
 

storefront/components/Pages/ProductDetail/ProductDetailMainVariantContent.tsx

@@ -2,7 +2,7 @@ import { ProductDetailCode, ProductDetailHeading, ProductDetailPrefix } from './
 import { ProductDetailAccessories } from './ProductDetailAccessories';
 import { ProductDetailGallery } from './ProductDetailGallery';
 import { ProductDetailTabs } from './ProductDetailTabs';
-import { ProductVariantsTable } from './ProductVariantsTable/ProductVariantsTable';
+import { ProductVariantsTable } from './ProductDetailVariantsTable';
 import { ProductMetadata } from 'components/Basic/Head/ProductMetadata';
 import { Webline } from 'components/Layout/Webline/Webline';
 import { ImageSizesFragmentApi, MainVariantDetailFragmentApi } from 'graphql/generated';

storefront/components/Pages/ProductDetail/ProductDetailVariantsTable.tsx

@@ -0,0 +1,80 @@
+import { ProductDetailAvailabilityList } from './ProductDetailAvailabilityList';
+import { Image } from 'components/Basic/Image/Image';
+import { AddToCart } from 'components/Blocks/Product/AddToCart';
+import { ProductAvailableStoresCount } from 'components/Blocks/Product/ProductAvailableStoresCount';
+import { Popup } from 'components/Layout/Popup/Popup';
+import { MainVariantDetailFragmentApi, StoreAvailabilityFragmentApi } from 'graphql/generated';
+import { GtmMessageOriginType, GtmProductListNameType } from 'gtm/types/enums';
+import { useFormatPrice } from 'hooks/formatting/useFormatPrice';
+import useTranslation from 'next-translate/useTranslation';
+import { useState } from 'react';
+
+type ProductVariantsTableProps = {
+    variants: MainVariantDetailFragmentApi['variants'];
+    isSellingDenied: boolean;
+};
+
+const TEST_IDENTIFIER = 'pages-productdetail-variant-';
+
+export const ProductVariantsTable: FC<ProductVariantsTableProps> = ({ isSellingDenied, variants }) => {
+    const { t } = useTranslation();
+    const formatPrice = useFormatPrice();
+    const [popupStoreAvailabilities, setPopupStoreAvailabilities] = useState<StoreAvailabilityFragmentApi[]>();
+
+    return (
+        <>
+            <ul className="grid grid-cols-1 gap-2 divide-greyLighter md:grid-cols-2 lg:grid-cols-1 lg:gap-0 lg:divide-y">
+                {variants.map((variant, index) => (
+                    <li
+                        key={variant.uuid}
+                        className="mx-auto flex w-full max-w-sm flex-col items-center gap-2 border border-greyLighter p-2 md:max-w-none lg:flex-row lg:border-0 "
+                        data-testid={TEST_IDENTIFIER + variant.catalogNumber}
+                    >
+                        <Image
+                            alt={variant.mainImage?.name || variant.fullName}
+                            image={variant.mainImage}
+                            type="default"
+                            wrapperClassName="flex h-48 lg:h-16 lg:w-16"
+                        />
+
+                        <div className="flex-1 text-center lg:text-left">{variant.fullName}</div>
+
+                        <div
+                            className="flex-1 cursor-pointer text-center lg:text-left"
+                            onClick={() => setPopupStoreAvailabilities(variant.storeAvailabilities)}
+                        >
+                            {variant.availability.name}
+                            <ProductAvailableStoresCount
+                                availableStoresCount={variant.availableStoresCount}
+                                isMainVariant={false}
+                            />
+                        </div>
+
+                        <div className="lg:w-40 lg:text-right">{formatPrice(variant.price.priceWithVat)}</div>
+
+                        <div className="text-right max-lg:clear-both max-lg:pl-0 lg:w-60">
+                            {isSellingDenied ? (
+                                t('This item can no longer be purchased')
+                            ) : (
+                                <AddToCart
+                                    gtmMessageOrigin={GtmMessageOriginType.product_detail_page}
+                                    gtmProductListName={GtmProductListNameType.product_detail_variants_table}
+                                    listIndex={index}
+                                    maxQuantity={variant.stockQuantity}
+                                    minQuantity={1}
+                                    productUuid={variant.uuid}
+                                />
+                            )}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+
+            {!!popupStoreAvailabilities && (
+                <Popup className="w-11/12 max-w-2xl" onCloseCallback={() => setPopupStoreAvailabilities(undefined)}>
+                    <ProductDetailAvailabilityList storeAvailabilities={popupStoreAvailabilities} />
+                </Popup>
+            )}
+        </>
+    );
+};

storefront/public/locales/cs/common.json

@@ -174,7 +174,6 @@
     "Monday": "Pondělí",
     "My account": "Můj účet",
     "My orders": "Mé objednávky",
-    "Name": "Název",
     "name ascending": "Název A-Z",
     "name descending": "Název Z-A",
     "Need advice?": "Potřebujete poradit?",

storefront/public/locales/en/common.json

@@ -170,7 +170,6 @@
     "Monday": "Monday",
     "My account": "My account",
     "My orders": "My orders",
-    "Name": "Name",
     "name ascending": "Name A-Z",
     "name descending": "Name Z-A",
     "Need advice?": "Need advice?",

storefront/public/locales/sk/common.json

@@ -174,7 +174,6 @@
     "Monday": "Pondelok",
     "My account": "Môj účet",
     "My orders": "Moje objednávky",
-    "Name": "Názov",
     "name ascending": "Názov A-Z",
     "name descending": "Názov Z-A",
     "Need advice?": "Potrebujete poradiť?",