@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.22

package/app-template/src/views/product/product-info.tsx

@@ -1,64 +1,24 @@
 'use client';
 
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
+import { PriceWrapper } from '@theme/views/product';
 import { ProductPageProps } from './layout';
+import MiscButtons from './misc-buttons';
 import { pushProductViewed } from '@theme/utils/gtm';
 import { useSession } from 'next-auth/react';
 import { isVariantSelectionComplete } from '../../utils/variant-validation';
 import { useProductCart } from '../../hooks/use-product-cart';
 import { useStockAlert } from '../../hooks/use-stock-alert';
+import { ProductVariants } from './product-variants';
 import { ProductActions } from './product-actions';
-import { QuantitySection } from './quantity-section';
-import { VariantsSection } from './variants-section';
-import { ProductInfoSection } from './product-info-section';
-import ProductShare from './product-share';
-import MiscButtons from './misc-buttons';
+import { ProductShare } from './product-share';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import {
-  ProductDetailRegistrar,
-  AddToCartStyles,
-  QuantityStyles,
-  QuantityProperties,
-  VariantsStyles,
-  ProductInfoStyles,
-  ShareStyles,
-  ShareProperties,
-  AccordionStyles,
-  FavoritesButtonStyles,
-  FavoritesButtonProperties,
-  FindInStoreStyles,
-  FindInStoreProperties
-} from '@theme/views/product-detail';
-import { AccordionWrapper } from '@theme/views/product';
-
-export interface ProductDetailSettings {
-  addToCartStyles?: AddToCartStyles;
-  quantityStyles?: QuantityStyles;
-  quantityProperties?: QuantityProperties;
-  variantsStyles?: VariantsStyles;
-  productInfoStyles?: ProductInfoStyles;
-  shareStyles?: ShareStyles;
-  shareProperties?: ShareProperties;
-  accordionStyles?: AccordionStyles;
-  favoritesButtonStyles?: FavoritesButtonStyles;
-  favoritesButtonProperties?: FavoritesButtonProperties;
-  findInStoreStyles?: FindInStoreStyles;
-  findInStoreProperties?: FindInStoreProperties;
-}
 
-interface ProductInfoProps extends ProductPageProps {
-  productDetailSettings?: ProductDetailSettings;
-  deliveryReturn?: any;
-}
-
-export default function ProductInfo({
-  data,
-  productDetailSettings,
-  deliveryReturn
-}: ProductInfoProps) {
+export default function ProductInfo({ data }: ProductPageProps) {
   const { data: session } = useSession();
   const [isVariantLoading, setIsVariantLoading] = useState(false);
-  const [quantity, setQuantity] = useState(1);
+
   const inStock = data.selected_variant !== null || data.product.in_stock;
 
   const {
@@ -112,26 +72,30 @@ export default function ProductInfo({
   };
 
   return (
-    <ProductDetailRegistrar initialSettings={productDetailSettings}>
-      <ProductInfoSection product={data.product} />
-
-      <VariantsSection
+    <>
+      <div
+        className={clsx(
+          'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
+          'sm:relative sm:flex sm:items-center sm:mt-5 sm:border-none'
+        )}
+      >
+        <PriceWrapper
+          price={data.product.price}
+          retailPrice={data.product.retail_price}
+        />
+      </div>
+
+      <ProductVariants
         variants={data.variants}
         onVariantChange={handleVariantChange}
       />
 
-      <QuantitySection
-        quantity={quantity}
-        onChange={setQuantity}
-        disabled={!inStock || isVariantLoading}
-      />
-
       <ProductActions
         product={data.product}
         variants={data.variants}
         inStock={inStock}
         isVariantLoading={isVariantLoading}
-        onAddToCart={() => addProductToCart(quantity)}
+        onAddToCart={addProductToCart}
         onAddToStockAlert={addProductToStockAlertList}
         onClearError={clearProductError}
         isAddToCartLoading={isAddToCartLoading}
@@ -142,16 +106,6 @@ export default function ProductInfo({
         onCloseModal={closeModal}
       />
 
-      <ProductShare productName={data.product.name} />
-
-      <MiscButtons
-        productName={data.product.name}
-        productPk={data.product.pk}
-        variants={data.variants}
-      />
-
-      <AccordionWrapper data={data} deliveryReturn={deliveryReturn} />
-
       <PluginModule
         component={Component.VirtualTryOnPlugin}
         props={{
@@ -159,6 +113,14 @@ export default function ProductInfo({
           className: 'hidden sm:flex'
         }}
       />
-    </ProductDetailRegistrar>
+
+      <MiscButtons
+        productName={data.product.name}
+        productPk={data.product.pk}
+        variants={data.variants}
+      />
+
+      <ProductShare productName={data.product.name} className="my-2 sm:mb-4" />
+    </>
   );
 }

package/app-template/src/views/product/product-share.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { ShareSection } from './share-section';
+import Share from '@theme/views/share';
 import { useLocalization } from '@akinon/next/hooks';
 
 interface ProductShareProps {
@@ -9,7 +9,7 @@ interface ProductShareProps {
   className?: string;
 }
 
-const ProductShare: React.FC<ProductShareProps> = ({
+export const ProductShare: React.FC<ProductShareProps> = ({
   productName,
   className
 }) => {
@@ -30,32 +30,29 @@ const ProductShare: React.FC<ProductShareProps> = ({
         currentUrl
       )}`,
       iconName: 'facebook' as const,
-      iconSize: 16
+      iconSize: 22
     },
     {
       href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
         currentUrl
       )}`,
       iconName: 'twitter' as const,
-      iconSize: 16
+      iconSize: 22
     },
     {
       href: `https://api.whatsapp.com/send?text=${productName}%20${encodeURIComponent(
         currentUrl
       )}`,
       iconName: 'whatsapp' as const,
-      iconSize: 16
+      iconSize: 22
     }
   ];
 
   return (
-    <ShareSection
-      productName={productName}
+    <Share
+      className={className}
       buttonText={t('product.share')}
       items={shareItems}
-      className={className}
     />
   );
-};
-
-export default ProductShare;
+};

package/app-template/src/views/product/slider.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useState, useRef } from 'react';
 import { CarouselCore } from '@theme/components/carousel-core';
+import { Icon } from '@theme/components';
 import { Product } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
-import { Icon, Button } from '@theme/components';
-import CustomButtonGroup from './custom-button-group';
+import useFavButton from '../../hooks/use-fav-button';
+import { twMerge } from 'tailwind-merge';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 type ProductSliderItem = {
@@ -13,32 +14,81 @@ type ProductSliderItem = {
 };
 
 export default function ProductInfoSlider({ product }: ProductSliderItem) {
+  const { FavButton } = useFavButton(product.pk);
   const carouselRef = useRef(null);
-  const [zoomedImage, setZoomedImage] = useState<string | null>(null);
-  const handleOpenZoom = useCallback((src: string) => setZoomedImage(src), []);
-  const handleCloseZoom = useCallback(() => setZoomedImage(null), []);
-  const productImages = product?.productimage_set ?? [];
   const [activeIndex, setActiveIndex] = useState(0);
 
-  const firstImage = productImages[0];
-  const remainingImages = productImages.slice(1);
-  const smallImagePairs = [];
-  let trailingLargeImage = null;
+  const goToPrev = () => {
+    const newIndex =
+      activeIndex === 0
+        ? product?.productimage_set?.length - 1
+        : activeIndex - 1;
+    setActiveIndex(newIndex);
+    carouselRef.current?.previous();
+  };
 
-  for (let i = 0; i < remainingImages.length; i += 2) {
-    if (remainingImages[i + 1]) {
-      smallImagePairs.push([remainingImages[i], remainingImages[i + 1]]);
-    } else {
-      trailingLargeImage = remainingImages[i];
-    }
-  }
+  const goToNext = () => {
+    const newIndex =
+      activeIndex === product?.productimage_set?.length - 1
+        ? 0
+        : activeIndex + 1;
+    setActiveIndex(newIndex);
+    carouselRef.current?.next();
+  };
+
+  const handleThumbnailClick = (index) => {
+    setActiveIndex(index);
+    carouselRef.current?.goToSlide(index);
+  };
 
   return (
-    <>
-      <div className="relative lg:hidden">
-        <div className="absolute left-6 top-6 z-[20] w-8 h-8 flex items-center justify-center rounded-full bg-white border border-gray-30">
-          <Icon name="zoom" size={11} className="text-primary" />
+    <div className="lg:grid lg:grid-cols-6">
+      <div className="lg:col-span-1">
+        <div className="flex flex-col items-center justify-center md:mr-[6px]">
+          <button
+            onClick={goToPrev}
+            className={twMerge(
+              'hidden justify-center p-2 mb-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+              [activeIndex === 0 && 'cursor-not-allowed opacity-45']
+            )}
+            disabled={activeIndex === 0}
+          >
+            <Icon name="chevron-up" size={15} className="fill-[#000000]" />
+          </button>
+          <div className="hidden flex-col items-center overflow-scroll w-[80px] max-h-[620px] lg:block">
+            {product?.productimage_set?.map((item, index) => (
+              <Image
+                key={index}
+                src={item.image}
+                alt={`Thumbnail ${index}`}
+                width={80}
+                height={128}
+                className={twMerge('cursor-pointer', [
+                  activeIndex === index && 'border-2 border-primary'
+                ])}
+                onClick={() => handleThumbnailClick(index)}
+              />
+            ))}
+          </div>
+          <button
+            onClick={goToNext}
+            className={twMerge(
+              'hidden justify-center p-2 mt-3 border border-gray-100 rounded-full cursor-pointer lg:block',
+              [
+                activeIndex === product.productimage_set.length - 1 &&
+                  'cursor-not-allowed opacity-45'
+              ]
+            )}
+            disabled={activeIndex === product.productimage_set.length - 1}
+          >
+            <Icon name="chevron-down" size={15} className="fill-[#000000]" />
+          </button>
         </div>
+      </div>
+
+      <div className="relative lg:col-span-5">
+        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
+
         <PluginModule
           component={Component.ProductImageSearchFeature}
           props={{
@@ -46,8 +96,7 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
             activeIndex,
             showResetButton: true,
             enableTextSearch: true,
-            isEnabled: true,
-            className: 'right-2 top-6 absolute z-[30] w-auto px-4 text-xs mt-0'
+            isEnabled: true
           }}
         />
 
@@ -59,6 +108,7 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
               'sm:hidden absolute bottom-[70px] right-[5px] z-[30] w-auto px-4 text-xs mt-0'
           }}
         />
+
         <CarouselCore
           responsive={{
             all: {
@@ -67,117 +117,29 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
             }
           }}
           arrows={false}
-          swipeable
+          swipeable={true}
           ref={carouselRef}
           afterChange={(previousSlide, { currentSlide }) => {
             setActiveIndex(currentSlide);
           }}
-          containerAspectRatio={{ mobile: 1, desktop: 1 }}
-          renderButtonGroupOutside
-          customButtonGroup={<CustomButtonGroup />}
+          containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
         >
-          {productImages.map((item, i) => (
+          {product?.productimage_set?.map((item, i) => (
             <Image
               key={i}
               src={item.image}
               alt={product.name}
               draggable={false}
-              aspectRatio={1}
+              aspectRatio={484 / 726}
               sizes="(min-width: 425px) 512px,
             (min-width: 601px) 576px,
             (min-width: 768px) 336px,
             (min-width: 1024px) 484px, 368px"
               fill
-              className="cursor-zoom-in"
-              onClick={() => handleOpenZoom(item.image)}
             />
           ))}
         </CarouselCore>
       </div>
-      <div className="hidden lg:flex lg:flex-col lg:gap-2.5">
-        {firstImage && (
-          <div className="relative w-full overflow-hidden bg-gray-50 aspect-square">
-            <div className="absolute left-6 top-6 z-[20] w-8 h-8 flex items-center justify-center rounded-full bg-white border border-gray-30">
-              <Icon name="zoom" size={11} className="text-primary" />
-            </div>
-
-            <Image
-              src={firstImage.image}
-              alt={`${product.name} 1`}
-              draggable={false}
-              fill
-              aspectRatio={1}
-              sizes="(min-width: 1024px) 50vw, 90vw"
-              imageClassName="object-cover cursor-zoom-in"
-              onClick={() => handleOpenZoom(firstImage.image)}
-            />
-          </div>
-        )}
-        {smallImagePairs.map((pair, pairIndex) => (
-          <div key={pairIndex} className="grid grid-cols-2 gap-2.5">
-            {pair.map((item, itemIndex) => (
-              <div
-                key={itemIndex}
-                className="relative w-full overflow-hidden bg-gray-50 aspect-square"
-              >
-                <Image
-                  src={item.image}
-                  alt={`${product.name} ${pairIndex * 2 + itemIndex + 2}`}
-                  draggable={false}
-                  fill
-                  aspectRatio={1}
-                  sizes="(min-width: 1024px) 25vw, 45vw"
-                  imageClassName="object-cover cursor-zoom-in"
-                  onClick={() => handleOpenZoom(item.image)}
-                />
-              </div>
-            ))}
-          </div>
-        ))}
-        {trailingLargeImage && (
-          <div className="relative w-full overflow-hidden bg-gray-50 aspect-square">
-            <Image
-              src={trailingLargeImage.image}
-              alt={`${product.name} ${productImages.length}`}
-              draggable={false}
-              fill
-              aspectRatio={1}
-              sizes="(min-width: 1024px) 50vw, 90vw"
-              imageClassName="object-cover cursor-zoom-in"
-              onClick={() => handleOpenZoom(trailingLargeImage.image)}
-            />
-          </div>
-        )}
-      </div>
-      {zoomedImage && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
-          onClick={handleCloseZoom}
-        >
-          <div
-            className="relative w-full max-w-3xl aspect-square"
-            onClick={(event) => event.stopPropagation()}
-          >
-            <Button
-              type="button"
-              aria-label="Close zoomed image"
-              className="absolute right-3 top-3 z-10 rounded-full bg-white/90 px-3 py-1 text-sm font-medium text-gray-900 shadow cursor-pointer"
-              onClick={handleCloseZoom}
-            >
-              ×
-            </Button>
-            <Image
-              src={zoomedImage}
-              alt={`${product.name} zoomed`}
-              draggable={false}
-              fill
-              aspectRatio={1}
-              sizes="100vw"
-              imageClassName="object-contain"
-            />
-          </div>
-        </div>
-      )}
-    </>
+    </div>
   );
 }

package/app-template/src/views/product-item/index.tsx

@@ -10,9 +10,6 @@ import useFavButton from '../../hooks/use-fav-button';
 import { Product } from '@akinon/next/types';
 import { Image } from '@akinon/next/components/image';
 import { Price, Link } from '@theme/components';
-import { SaleTag } from '../product/sale-tag';
-import { useProductList } from '../category/product-list-registrar';
-import { useNativeWidget } from '../category/native-widget-context';
 
 interface Props {
   product: Product;
@@ -22,42 +19,17 @@ interface Props {
 }
 
 export const ProductItem = (props: Props) => {
+  // TODO: Static image will change (TR)
   const { product, width, height, index } = props;
   const [viewed, setViewed] = useState(false);
   const { FavButton } = useFavButton(product.pk);
   const { ref, inView } = useInView();
 
-  // Get product-item properties from ProductListRegistrar
-  const {
-    productItemProperties: registrarProps,
-    productItemStyles: registrarStyles
-  } = useProductList();
-
-  // Get product-item properties from NativeWidgetProvider
-  const {
-    productItemProperties: widgetProps,
-    productItemStyles: widgetStyles
-  } = useNativeWidget();
-
-  // Designer mode uses registrar props, saved widget uses widget props
-  const isDesigner = typeof window !== 'undefined' && window.parent !== window;
-  const properties = isDesigner
-    ? { ...widgetProps, ...registrarProps }
-    : widgetProps;
-  const styles = isDesigner
-    ? { ...widgetStyles, ...registrarStyles }
-    : widgetStyles;
-
-  const showFavButton = properties['show-fav-button'] !== false;
-  const favButtonPosition =
-    (properties['fav-button-position'] as string) || 'top-right';
-
-  const image_url = product.productimage_set?.[0]?.image;
+  const image_url = product.productimage_set[0]?.image;
   const absolute_url = product.absolute_url;
   const product_name = product.name;
   const retail_price = product.retail_price;
   const price = product.price;
-  const isOnSale = parseFloat(String(retail_price)) > parseFloat(String(price));
 
   useEffect(() => {
     if (!viewed && inView) {
@@ -66,103 +38,58 @@ export const ProductItem = (props: Props) => {
     }
   }, [inView, viewed, product]);
 
-  // Position classes
-  const positionClasses = {
-    'top-left': 'top-2.5 left-2.5',
-    'top-right': 'top-2.5 right-2.5',
-    'bottom-left': 'bottom-2.5 left-2.5',
-    'bottom-right': 'bottom-2.5 right-2.5'
-  };
-
-  const favButtonStyles: React.CSSProperties = {
-    width: (styles['fav-button-size'] as string) || '32px',
-    height: (styles['fav-button-size'] as string) || '32px',
-    backgroundColor:
-      (styles['fav-button-bg-color'] as string) || 'rgba(255, 255, 255, 0.8)',
-    color: (styles['fav-button-icon-color'] as string) || '#000000',
-    borderRadius: (styles['fav-button-border-radius'] as string) || '50%'
-  };
-
-  const productNameStyles: React.CSSProperties = {
-    fontSize: (styles['product-name-font-size'] as string) || '14px',
-    color: (styles['product-name-color'] as string) || '#1a1a1a',
-    fontWeight: (styles['product-name-font-weight'] as string) || '400',
-    display: '-webkit-box',
-    WebkitLineClamp: parseInt(
-      (styles['product-name-line-clamp'] as string) || '2',
-      10
-    ),
-    WebkitBoxOrient: 'vertical' as const,
-    overflow: 'hidden'
-  };
-
-  const priceStyles: React.CSSProperties = {
-    fontSize: (styles['price-font-size'] as string) || '16px',
-    color: (styles['price-color'] as string) || '#1a1a1a',
-    fontWeight: (styles['price-font-weight'] as string) || '400'
-  };
-
-  const oldPriceStyles: React.CSSProperties = {
-    fontSize: (styles['old-price-font-size'] as string) || '14px',
-    color: (styles['old-price-color'] as string) || '#6b7280'
-  };
-
   return (
     <div
-      className="flex flex-col group w-full"
+      className="text-sm text-left flex flex-col justify-between"
       data-testid="product-box"
       ref={ref}
-      data-section-id="product-item-section"
     >
-      <div className="relative mb-2 w-full aspect-square">
+      <div className="relative mb-3 h-full">
         <Link href={absolute_url} onClick={() => pushProductClicked(product)}>
-          <Image
-            loading="lazy"
-            src={image_url || '/noimage.jpg'}
-            alt={product_name}
-            aspectRatio={width / height}
-            fill
-            crop="center"
-            sizes={`(max-width: 768px) ${
-              width === 260 ? 170 : width
-            }px, ${width}px`}
-            imageClassName="object-cover"
-          />
+          {image_url ? (
+            <Image
+              fill
+              loading="lazy"
+              src={image_url}
+              alt={product_name}
+              aspectRatio={width / height}
+              sizes="
+              (max-width: 768px) 50vw,
+              (max-width: 1024px) 30vw,
+              33vw"
+              crop="center"
+            />
+          ) : (
+            <Image
+              className="h-full"
+              src="/noimage.jpg"
+              fill
+              aspectRatio={width / height}
+              sizes="100vw"
+              alt={product_name}
+              imageClassName="object-cover"
+            />
+          )}
         </Link>
-
-        {showFavButton && (
-          <FavButton
-            className={`absolute ${positionClasses[favButtonPosition]} hover:opacity-100 transition-all flex items-center justify-center z-10`}
-            style={favButtonStyles}
-          />
-        )}
-
-        {isOnSale && (
-          <div className="absolute bottom-4 left-2 z-10">
-            <SaleTag />
-          </div>
-        )}
+        <FavButton className="absolute top-4 right-4" />
       </div>
-
-      <Link
-        href={absolute_url}
-        data-testid={`${product_name}-${index}`}
-        onClick={() => pushProductClicked(product)}
-        className="hover:underline"
-        style={productNameStyles}
-      >
-        {product_name}
-      </Link>
-
-      <div className="flex items-center gap-2">
-        {isOnSale && (
-          <Price
-            value={retail_price}
-            className="line-through"
-            style={oldPriceStyles}
-          />
-        )}
-        <Price value={price} data-testid="product-price" style={priceStyles} />
+      <div>
+        <Link
+          href={absolute_url}
+          data-testid={`${product_name}-${index}`}
+          onClick={() => pushProductClicked(product)}
+        >
+          {product_name}
+        </Link>
+        <div className="font-semibold">
+          {parseFloat(retail_price) > parseFloat(price) && (
+            <Price
+              value={retail_price}
+              className="font-normal line-through mr-3"
+            />
+          )}
+          <Price value={price} data-testid="product-price" />
+        </div>
       </div>
     </div>
   );