WIP change product variants layout

shopsys · Mar 15, 2024 · a700939 · a700939
1 parent b81864e
commit a700939
Show file tree

Hide file tree

Showing 36 changed files with 320 additions and 532 deletions.
diff --git a/project-base/app/schema.graphql b/project-base/app/schema.graphql
@@ -1625,8 +1625,8 @@ input ProductListInput {
 
 "One of possible types of the product list"
 enum ProductListTypeEnum {
-  COMPARISON
   WISHLIST
+  COMPARISON
 }
 
 input ProductListUpdateInput {
@@ -1637,16 +1637,16 @@ input ProductListUpdateInput {
 
 "One of possible ordering modes for product"
 enum ProductOrderingModeEnum {
-  "Order by name ascending"
-  NAME_ASC
-  "Order by name descending"
-  NAME_DESC
+  "Order by priority"
+  PRIORITY
   "Order by price ascending"
   PRICE_ASC
   "Order by price descending"
   PRICE_DESC
-  "Order by priority"
-  PRIORITY
+  "Order by name ascending"
+  NAME_ASC
+  "Order by name descending"
+  NAME_DESC
   "Order by relevance"
   RELEVANCE
 }

diff --git a/project-base/storefront/components/Basic/Head/ProductMetadata.tsx b/project-base/storefront/components/Basic/Head/ProductMetadata.tsx
@@ -1,10 +1,10 @@
 import { useDomainConfig } from 'components/providers/DomainConfigProvider';
-import { AvailabilityStatusEnumApi, MainVariantDetailFragmentApi, ProductDetailFragmentApi } from 'graphql/generated';
+import { AvailabilityStatusEnumApi, ProductDetailFragmentApi } from 'graphql/generated';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 type ProductMetadataProps = {
-    product: ProductDetailFragmentApi | MainVariantDetailFragmentApi;
+    product: ProductDetailFragmentApi;
 };
 
 export const ProductMetadata: FC<ProductMetadataProps> = ({ product }) => {

diff --git a/project-base/storefront/components/Basic/Image/Image.tsx b/project-base/storefront/components/Basic/Image/Image.tsx
@@ -1,18 +1,17 @@
 import NextImage, { ImageProps as NextImageProps } from 'next/image';
-import { useState } from 'react';
 
 type ImageProps = {
     src: NextImageProps['src'] | undefined | null;
 } & Omit<NextImageProps, 'src'>;
 
-export const Image: FC<ImageProps> = ({ src, ...props }) => {
-    const [imageUrl, setImageUrl] = useState(src ?? '/images/optimized-noimage.webp');
+const imagePlaceholderPath = '/images/noimage.jpg';
 
+export const Image: FC<ImageProps> = ({ src, ...props }) => {
     return (
         <NextImage
             loader={({ src, width }) => `${src}?width=${width || '0'}`}
-            src={imageUrl}
-            onError={() => setImageUrl('/images/optimized-noimage.webp')}
+            src={src || imagePlaceholderPath}
+            unoptimized={!src}
             {...props}
         />
     );

diff --git a/project-base/storefront/components/Blocks/Product/AddToCartPopup.tsx b/project-base/storefront/components/Blocks/Product/AddToCartPopup.tsx
@@ -25,8 +25,6 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
     const { url } = useDomainConfig();
     const [cartUrl] = getInternationalizedStaticUrls(['/cart'], url);
 
-    const productUrl = (product.__typename === 'Variant' && product.mainVariant?.slug) || product.slug;
-
     return (
         <Popup hideCloseButton className="w-11/12 max-w-2xl" onCloseCallback={onCloseCallback}>
             <div className="mb-4 flex w-full items-center md:mb-6">
@@ -51,10 +49,7 @@ export const AddToCartPopup: FC<AddToCartPopupProps> = ({ onCloseCallback, added
                         className="block break-words text-primary"
                         tid={TIDs.blocks_product_addtocartpopup_product_name}
                     >
-                        <ExtendedNextLink
-                            href={productUrl}
-                            type={product.__typename === 'RegularProduct' ? 'product' : 'productMainVariant'}
-                        >
+                        <ExtendedNextLink href={product.slug} type="product">
                             {product.fullName}
                         </ExtendedNextLink>
                     </div>

diff --git a/project-base/storefront/components/Blocks/Product/ProductAction.tsx b/project-base/storefront/components/Blocks/Product/ProductAction.tsx
@@ -21,7 +21,7 @@ export const ProductAction: FC<ProductActionProps> = ({ product, gtmProductListN
     if (product.isMainVariant) {
         return (
             <div className={wrapperTwClass}>
-                <ExtendedNextLink href={product.slug} type="productMainVariant">
+                <ExtendedNextLink href={product.slug} type="product">
                     <Button className="w-full py-2" name="choose-variant" size="small">
                         {t('Choose variant')}
                     </Button>

diff --git a/project-base/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx b/project-base/storefront/components/Blocks/Product/ProductsList/ProductListItem.tsx
@@ -69,7 +69,7 @@ export const ProductListItem = forwardRef<HTMLLIElement, ProductItemProps>(
                     className="flex h-full select-none flex-col gap-3 no-underline hover:no-underline"
                     draggable={false}
                     href={product.slug}
-                    type={product.isMainVariant ? 'productMainVariant' : 'product'}
+                    type="product"
                     onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
                 >
                     <div className="relative flex h-56 items-center justify-center">

diff --git a/project-base/storefront/components/Blocks/Product/ProductsSlider.tsx b/project-base/storefront/components/Blocks/Product/ProductsSlider.tsx
@@ -13,8 +13,6 @@ type ProductsSliderProps = {
     gtmMessageOrigin?: GtmMessageOriginType;
 };
 
-const productTwClass = 'snap-center border-b-0 md:snap-start';
-
 export const ProductsSlider: FC<ProductsSliderProps> = ({
     products,
     gtmProductListName,
@@ -75,8 +73,8 @@ export const ProductsSlider: FC<ProductsSliderProps> = ({
             )}
 
             <ProductsListContent
-                className="grid snap-x snap-mandatory auto-cols-[80%] grid-flow-col overflow-x-auto overscroll-x-contain [-ms-overflow-style:'none'] [scrollbar-width:'none'] md:auto-cols-[45%] lg:auto-cols-[30%] vl:auto-cols-[25%] [&::-webkit-scrollbar]:hidden"
-                classNameProduct={productTwClass}
+                className="scroll-mb-1.5 grid snap-x snap-mandatory auto-cols-[80%] grid-flow-col overflow-x-auto overscroll-x-contain [-ms-overflow-style:'none'] [scrollbar-width:'none'] md:auto-cols-[45%] lg:auto-cols-[30%] vl:auto-cols-[25%] [&::-webkit-scrollbar]:hidden"
+                classNameProduct="snap-center border-b-0 md:snap-start"
                 gtmMessageOrigin={gtmMessageOrigin}
                 gtmProductListName={gtmProductListName}
                 productRefs={productElementRefs}

diff --git a/project-base/storefront/components/Blocks/Skeleton/SkeletonManager.tsx b/project-base/storefront/components/Blocks/Skeleton/SkeletonManager.tsx
@@ -5,7 +5,6 @@ import { SkeletonPageHome } from './SkeletonPageHome';
 import { SkeletonPageOrder } from './SkeletonPageOrder';
 import { SkeletonPageOrders } from './SkeletonPageOrders';
 import { SkeletonPageProductDetail } from './SkeletonPageProductDetail';
-import { SkeletonPageProductDetailMainVariant } from './SkeletonPageProductDetailMainVariant';
 import { SkeletonPageProductsList } from './SkeletonPageProductsList';
 import { SkeletonPageProductsListSimple } from './SkeletonPageProductsListSimple';
 import { SkeletonPageStore } from './SkeletonPageStore';
@@ -37,8 +36,6 @@ export const SkeletonManager: FC<SkeletonManagerProps> = ({ isFetchingData, isPa
             return <SkeletonPageHome />;
         case 'product':
             return <SkeletonPageProductDetail />;
-        case 'productMainVariant':
-            return <SkeletonPageProductDetailMainVariant />;
         case 'category':
             return <SkeletonPageProductsList />;
         case 'brand':

diff --git a/project-base/storefront/components/Blocks/Skeleton/SkeletonPageProductDetailMainVariant.tsx b/project-base/storefront/components/Blocks/Skeleton/SkeletonPageProductDetailMainVariant.tsx
diff --git a/project-base/storefront/components/Layout/Header/Cart/CartListItem.tsx b/project-base/storefront/components/Layout/Header/Cart/CartListItem.tsx
@@ -13,7 +13,6 @@ type ListItemProps = {
 
 export const ListItem: FC<ListItemProps> = ({ cartItem: { product, uuid, quantity }, onItemRemove }) => {
     const formatPrice = useFormatPrice();
-    const productSlug = product.__typename === 'Variant' ? product.mainVariant!.slug : product.slug;
 
     return (
         <li key={uuid} className="flex w-full items-center gap-x-3 border-b border-greyLighter py-3">
@@ -29,7 +28,7 @@ export const ListItem: FC<ListItemProps> = ({ cartItem: { product, uuid, quantit
 
             <ExtendedNextLink
                 className="flex-1 cursor-pointer text-sm font-bold text-greyDark no-underline outline-none"
-                href={productSlug}
+                href={product.slug}
                 type="product"
             >
                 {product.fullName}

diff --git a/project-base/storefront/components/Pages/Cart/CartList/CartListItem.tsx b/project-base/storefront/components/Pages/Cart/CartList/CartListItem.tsx
@@ -27,7 +27,6 @@ export const CartListItem: FC<CartListItemProps> = ({
     const spinboxRef = useRef<HTMLInputElement>(null);
     const { t } = useTranslation();
     const formatPrice = useFormatPrice();
-    const productSlug = product.__typename === 'Variant' ? product.mainVariant!.slug : product.slug;
 
     const onChangeValueHandler = () => {
         if (timeoutRef.current === null) {
@@ -51,7 +50,7 @@ export const CartListItem: FC<CartListItemProps> = ({
         >
             <div className="flex flex-1 basis-full pr-8 vl:basis-auto vl:pr-0">
                 <div className="flex h-12 w-24 shrink-0">
-                    <ExtendedNextLink className="relative h-full w-full" href={productSlug} type="product">
+                    <ExtendedNextLink className="relative h-full w-full" href={product.slug} type="product">
                         <Image
                             alt={product.mainImage?.name || product.fullName}
                             className="mx-auto max-h-full w-auto"
@@ -66,7 +65,7 @@ export const CartListItem: FC<CartListItemProps> = ({
                     <div className="h-full text-left vl:w-[16.875rem]" tid={TIDs.pages_cart_list_item_name}>
                         <ExtendedNextLink
                             className="text-sm font-bold uppercase leading-4 text-dark no-underline hover:text-dark hover:no-underline"
-                            href={productSlug}
+                            href={product.slug}
                             type="product"
                         >
                             {product.fullName}

diff --git a/...front/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx b/...front/components/Pages/CategoryDetail/CategoryBestsellers/CategoryBestsellersListItem.tsx
@@ -22,14 +22,12 @@ export const CategoryBestsellersListItem: FC<CategoryBestsellersListItemProps> =
     const formatPrice = useFormatPrice();
     const { url } = useDomainConfig();
 
-    const productUrl = (product.__typename === 'Variant' && product.mainVariant?.slug) || product.slug;
-
     return (
         <div className="flex flex-wrap items-center gap-y-4 border-t border-greyLight py-4 first-of-type:border-0 lg:flex-nowrap lg:gap-5">
             <ExtendedNextLink
                 className="flex items-center gap-5 font-bold no-underline lg:flex-1"
-                href={productUrl}
-                type={product.__typename === 'RegularProduct' ? 'product' : 'productMainVariant'}
+                href={product.slug}
+                type="product"
                 onClick={() => onGtmProductClickEventHandler(product, gtmProductListName, listIndex, url)}
             >
                 <div className="flex w-20 shrink-0 items-center justify-center">

diff --git a/project-base/storefront/components/Pages/ProductDetail/ProductDetailContent.tsx b/project-base/storefront/components/Pages/ProductDetail/ProductDetailContent.tsx
@@ -6,6 +6,7 @@ import { ProductDetailAvailabilityList } from './ProductDetailAvailabilityList';
 import { ProductDetailGallery } from './ProductDetailGallery';
 import { ProductDetailTabs } from './ProductDetailTabs';
 import { ProductDetailUsps } from './ProductDetailUsps';
+import { ProductDetailVariants } from './ProductDetailVariants';
 import { ProductMetadata } from 'components/Basic/Head/ProductMetadata';
 import { ProductCompareButton } from 'components/Blocks/Product/ButtonsAction/ProductCompareButton';
 import { ProductWishlistButton } from 'components/Blocks/Product/ButtonsAction/ProductWishlistButton';
@@ -43,6 +44,10 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({ product, f
     useLastVisitedProductView(product.catalogNumber);
     useGtmProductDetailViewEvent(product, getUrlWithoutGetParameters(router.asPath), fetching);
 
+    const productVariants =
+        (product.__typename === 'MainVariant' && product.variants) ||
+        (product.__typename === 'Variant' && product.mainVariant?.variants);
+
     return (
         <>
             <ProductMetadata product={product} />
@@ -69,9 +74,13 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({ product, f
                             </ProductDetailCode>
                         </div>
 
+                        {!!productVariants && (
+                            <ProductDetailVariants currentProductUuid={product.uuid} variants={productVariants} />
+                        )}
+
                         {product.shortDescription && <div>{product.shortDescription}</div>}
 
-                        {product.usps.length > 0 && <ProductDetailUsps usps={product.usps} />}
+                        {!!product.usps.length && <ProductDetailUsps usps={product.usps} />}
 
                         <ProductDetailAddToCart product={product} />
 
@@ -102,6 +111,7 @@ export const ProductDetailContent: FC<ProductDetailContentProps> = ({ product, f
 
                 {!!product.accessories.length && <ProductDetailAccessories accessories={product.accessories} />}
             </Webline>
+
             {isPopupCompareOpen && <ProductComparePopup onCloseCallback={() => setIsPopupCompareOpen(false)} />}
         </>
     );

diff --git a/project-base/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx b/project-base/storefront/components/Pages/ProductDetail/ProductDetailGallery.tsx
@@ -13,7 +13,7 @@ const ModalGallery = dynamic(() =>
 type ProductDetailGalleryProps = {
     images: ImageFragmentApi[];
     productName: string;
-    flags: SimpleFlagFragmentApi[];
+    flags: SimpleFlagFragmentApi[] | undefined | null;
     videoIds?: VideoTokenFragmentApi[];
 };
 
@@ -44,7 +44,7 @@ export const ProductDetailGallery: FC<ProductDetailGalleryProps> = ({ flags, ima
                         onClickCapture={() => setSelectedGalleryItemIndex(0)}
                     />
 
-                    {!!flags.length && (
+                    {!!flags?.length && (
                         <div className="absolute top-3 left-4 flex flex-col">
                             <ProductFlags flags={flags} />
                         </div>

diff --git a/project-base/storefront/components/Pages/ProductDetail/ProductDetailMainVariantContent.tsx b/project-base/storefront/components/Pages/ProductDetail/ProductDetailMainVariantContent.tsx