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

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

@@ -0,0 +1,357 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button, Icon } from '@theme/components';
+// eslint-disable-next-line @akinon/projectzero/link-import
+import Link from 'next/link';
+import {
+  useProductDetail,
+  SHARE_SECTION_ID,
+  ShareLayoutType
+} from '@theme/views/product-detail';
+import clsx from 'clsx';
+
+interface ShareItem {
+  href: string;
+  iconName: 'facebook' | 'twitter' | 'whatsapp';
+  iconSize?: number;
+}
+
+interface ShareSectionProps {
+  productName: string;
+  buttonText?: string;
+  items: ShareItem[];
+  className?: string;
+}
+
+export const ShareSection: React.FC<ShareSectionProps> = ({
+  productName,
+  buttonText,
+  items,
+  className
+}) => {
+  const { isDesigner, selectedSectionId, shareStyles, shareProperties } =
+    useProductDetail();
+
+  const [open, setOpen] = useState(false);
+  const isSelected = selectedSectionId === SHARE_SECTION_ID;
+  const layout = shareProperties.layout || 'floating';
+  const showLabel = shareProperties.showLabel ?? true;
+
+  // Handle designer click for section selection
+  const handleDesignerClick = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      e.stopPropagation();
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: SHARE_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  // Build CSS variables from shareStyles
+  const shareStyleVars: Record<string, string> = {};
+
+  // Button styles
+  if (shareStyles['button-font-size'])
+    shareStyleVars['--share-button-font-size'] =
+      shareStyles['button-font-size'];
+  if (shareStyles['button-font-weight'])
+    shareStyleVars['--share-button-font-weight'] =
+      shareStyles['button-font-weight'];
+  if (shareStyles['button-color'])
+    shareStyleVars['--share-button-color'] = shareStyles['button-color'];
+  if (shareStyles['button-background-color'])
+    shareStyleVars['--share-button-background-color'] =
+      shareStyles['button-background-color'];
+  if (shareStyles['button-border-color'])
+    shareStyleVars['--share-button-border-color'] =
+      shareStyles['button-border-color'];
+  if (shareStyles['button-border-width'])
+    shareStyleVars['--share-button-border-width'] =
+      shareStyles['button-border-width'];
+  if (shareStyles['button-border-radius'])
+    shareStyleVars['--share-button-border-radius'] =
+      shareStyles['button-border-radius'];
+  if (shareStyles['button-padding-x'])
+    shareStyleVars['--share-button-padding-x'] =
+      shareStyles['button-padding-x'];
+  if (shareStyles['button-padding-y'])
+    shareStyleVars['--share-button-padding-y'] =
+      shareStyles['button-padding-y'];
+
+  // Icon styles
+  if (shareStyles['icon-size'])
+    shareStyleVars['--share-icon-size'] = shareStyles['icon-size'];
+  if (shareStyles['icon-color'])
+    shareStyleVars['--share-icon-color'] = shareStyles['icon-color'];
+  if (shareStyles['icon-hover-color'])
+    shareStyleVars['--share-icon-hover-color'] =
+      shareStyles['icon-hover-color'];
+  if (shareStyles['icon-background-color'])
+    shareStyleVars['--share-icon-background-color'] =
+      shareStyles['icon-background-color'];
+  if (shareStyles['icon-hover-background-color'])
+    shareStyleVars['--share-icon-hover-background-color'] =
+      shareStyles['icon-hover-background-color'];
+  if (shareStyles['icon-border-radius'])
+    shareStyleVars['--share-icon-border-radius'] =
+      shareStyles['icon-border-radius'];
+  if (shareStyles['icon-spacing'])
+    shareStyleVars['--share-icon-spacing'] = shareStyles['icon-spacing'];
+
+  // Render different layouts
+  const renderFloatingLayout = () => (
+    <div className={clsx('flex items-center gap-4 border-t', className)}>
+      <Button
+        onClick={() => setOpen(!open)}
+        appearance="ghost"
+        className="text-base p-0 bg-transparent hover:bg-transparent hover:text-primary"
+        style={{
+          fontSize: 'var(--share-button-font-size, 16px)',
+          fontWeight: 'var(--share-button-font-weight, 400)',
+          color: 'var(--share-button-color, inherit)',
+          backgroundColor: 'var(--share-button-background-color, transparent)',
+          borderColor: 'var(--share-button-border-color, transparent)',
+          borderWidth: 'var(--share-button-border-width, 0)',
+          borderRadius: 'var(--share-button-border-radius, 0)',
+          paddingLeft: 'var(--share-button-padding-x, 0)',
+          paddingRight: 'var(--share-button-padding-x, 0)',
+          paddingTop: 'var(--share-button-padding-y, 0)',
+          paddingBottom: 'var(--share-button-padding-y, 0)'
+        }}
+        aria-label="Share"
+      >
+        <div className="flex items-center gap-2">
+          <Icon
+            name="share"
+            size={Number(shareStyles['icon-size']) || 24}
+            style={{
+              color: 'var(--share-icon-color, inherit)'
+            }}
+          />
+          {showLabel && buttonText && <span>{buttonText}</span>}
+        </div>
+      </Button>
+
+      <div
+        className={clsx(
+          'share-group flex transition-max-width ease-linear duration-300',
+          open
+            ? 'opacity-100 max-w-xs visible pointer-events-auto'
+            : 'opacity-0 max-w-0 invisible pointer-events-none'
+        )}
+        style={{
+          gap: 'var(--share-icon-spacing, 0)'
+        }}
+      >
+        {items.map((item, index) => (
+          <Link
+            key={index}
+            target="_blank"
+            href={item.href}
+            className="p-4 h-auto flex items-center hover:bg-gray-100"
+            style={{
+              borderRadius: 'var(--share-icon-border-radius, 0)',
+              backgroundColor: 'var(--share-icon-background-color, transparent)'
+            }}
+          >
+            <Icon
+              name={item.iconName}
+              size={Number(shareStyles['icon-size']) || item.iconSize || 12}
+              style={{
+                color: 'var(--share-icon-color, inherit)'
+              }}
+            />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+
+  const renderInlineHorizontalLayout = () => (
+    <div
+      className={clsx('flex items-center flex-wrap', className)}
+      style={{
+        gap: 'var(--share-icon-spacing, 12px)'
+      }}
+    >
+      {showLabel && buttonText && (
+        <span
+          style={{
+            fontSize: 'var(--share-button-font-size, 16px)',
+            fontWeight: 'var(--share-button-font-weight, 400)',
+            color: 'var(--share-button-color, inherit)'
+          }}
+        >
+          {buttonText}:
+        </span>
+      )}
+      {items.map((item, index) => (
+        <Link
+          key={index}
+          target="_blank"
+          href={item.href}
+          className="inline-flex items-center justify-center transition-colors"
+          style={{
+            padding: 'var(--share-button-padding-y, 8px)',
+            borderRadius: 'var(--share-icon-border-radius, 4px)',
+            backgroundColor: 'var(--share-icon-background-color, #f3f4f6)',
+            color: 'var(--share-icon-color, inherit)'
+          }}
+        >
+          <Icon
+            name={item.iconName}
+            size={Number(shareStyles['icon-size']) || item.iconSize || 20}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+
+  const renderInlineVerticalLayout = () => (
+    <div
+      className={clsx('flex flex-col', className)}
+      style={{
+        gap: 'var(--share-icon-spacing, 12px)'
+      }}
+    >
+      {showLabel && buttonText && (
+        <span
+          style={{
+            fontSize: 'var(--share-button-font-size, 16px)',
+            fontWeight: 'var(--share-button-font-weight, 400)',
+            color: 'var(--share-button-color, inherit)'
+          }}
+        >
+          {buttonText}
+        </span>
+      )}
+      <div className="flex flex-col gap-2">
+        {items.map((item, index) => (
+          <Link
+            key={index}
+            target="_blank"
+            href={item.href}
+            className="inline-flex items-center justify-center transition-colors"
+            style={{
+              padding: 'var(--share-button-padding-y, 8px)',
+              borderRadius: 'var(--share-icon-border-radius, 4px)',
+              backgroundColor: 'var(--share-icon-background-color, #f3f4f6)',
+              color: 'var(--share-icon-color, inherit)',
+              width: 'fit-content'
+            }}
+          >
+            <Icon
+              name={item.iconName}
+              size={Number(shareStyles['icon-size']) || item.iconSize || 20}
+            />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+
+  const renderIconOnlyLayout = () => (
+    <div
+      className={clsx('flex items-center flex-wrap', className)}
+      style={{
+        gap: 'var(--share-icon-spacing, 8px)'
+      }}
+    >
+      {items.map((item, index) => (
+        <Link
+          key={index}
+          target="_blank"
+          href={item.href}
+          className="inline-flex items-center justify-center transition-colors"
+          style={{
+            padding: 'var(--share-button-padding-y, 8px)',
+            borderRadius: 'var(--share-icon-border-radius, 50%)',
+            backgroundColor: 'var(--share-icon-background-color, #f3f4f6)',
+            color: 'var(--share-icon-color, inherit)'
+          }}
+        >
+          <Icon
+            name={item.iconName}
+            size={Number(shareStyles['icon-size']) || item.iconSize || 18}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+
+  const renderCompactLayout = () => (
+    <div
+      className={clsx('flex items-center', className)}
+      style={{
+        gap: 'var(--share-icon-spacing, 6px)'
+      }}
+    >
+      {showLabel && buttonText && (
+        <span
+          style={{
+            fontSize: 'var(--share-button-font-size, 14px)',
+            fontWeight: 'var(--share-button-font-weight, 400)',
+            color: 'var(--share-button-color, inherit)'
+          }}
+        >
+          {buttonText}
+        </span>
+      )}
+      {items.map((item, index) => (
+        <Link
+          key={index}
+          target="_blank"
+          href={item.href}
+          className="inline-flex items-center justify-center transition-colors"
+          style={{
+            padding: 'var(--share-button-padding-y, 4px)',
+            borderRadius: 'var(--share-icon-border-radius, 4px)',
+            backgroundColor: 'var(--share-icon-background-color, transparent)',
+            color: 'var(--share-icon-color, inherit)'
+          }}
+        >
+          <Icon
+            name={item.iconName}
+            size={Number(shareStyles['icon-size']) || item.iconSize || 16}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+
+  const renderLayout = () => {
+    switch (layout) {
+      case 'inline-horizontal':
+        return renderInlineHorizontalLayout();
+      case 'inline-vertical':
+        return renderInlineVerticalLayout();
+      case 'icon-only':
+        return renderIconOnlyLayout();
+      case 'compact':
+        return renderCompactLayout();
+      case 'floating':
+      default:
+        return renderFloatingLayout();
+    }
+  };
+
+  return (
+    <div
+      style={shareStyleVars}
+      className={clsx('relative', {
+        'ring-2 ring-blue-500 ring-offset-2': isDesigner && isSelected
+      })}
+      onClick={handleDesignerClick}
+    >
+      {renderLayout()}
+    </div>
+  );
+};

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

@@ -1,12 +1,11 @@
 'use client';
 
-import React, { useState, useRef } from 'react';
+import React, { useRef, useState, useCallback } 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 useFavButton from '../../hooks/use-fav-button';
-import { twMerge } from 'tailwind-merge';
+import { Icon, Button } from '@theme/components';
+import CustomButtonGroup from './custom-button-group';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 
 type ProductSliderItem = {
@@ -14,81 +13,32 @@ 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 goToPrev = () => {
-    const newIndex =
-      activeIndex === 0
-        ? product?.productimage_set?.length - 1
-        : activeIndex - 1;
-    setActiveIndex(newIndex);
-    carouselRef.current?.previous();
-  };
+  const firstImage = productImages[0];
+  const remainingImages = productImages.slice(1);
+  const smallImagePairs = [];
+  let trailingLargeImage = null;
 
-  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);
-  };
+  for (let i = 0; i < remainingImages.length; i += 2) {
+    if (remainingImages[i + 1]) {
+      smallImagePairs.push([remainingImages[i], remainingImages[i + 1]]);
+    } else {
+      trailingLargeImage = remainingImages[i];
+    }
+  }
 
   return (
-    <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 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>
-      </div>
-
-      <div className="relative lg:col-span-5">
-        <FavButton className="absolute right-8 top-6 z-[20] sm:hidden" />
-
         <PluginModule
           component={Component.ProductImageSearchFeature}
           props={{
@@ -96,7 +46,8 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
             activeIndex,
             showResetButton: true,
             enableTextSearch: true,
-            isEnabled: true
+            isEnabled: true,
+            className: 'right-2 top-6 absolute z-[30] w-auto px-4 text-xs mt-0'
           }}
         />
 
@@ -108,7 +59,6 @@ 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: {
@@ -117,29 +67,117 @@ export default function ProductInfoSlider({ product }: ProductSliderItem) {
             }
           }}
           arrows={false}
-          swipeable={true}
+          swipeable
           ref={carouselRef}
           afterChange={(previousSlide, { currentSlide }) => {
             setActiveIndex(currentSlide);
           }}
-          containerAspectRatio={{ mobile: 520 / 798, desktop: 484 / 726 }}
+          containerAspectRatio={{ mobile: 1, desktop: 1 }}
+          renderButtonGroupOutside
+          customButtonGroup={<CustomButtonGroup />}
         >
-          {product?.productimage_set?.map((item, i) => (
+          {productImages.map((item, i) => (
             <Image
               key={i}
               src={item.image}
               alt={product.name}
               draggable={false}
-              aspectRatio={484 / 726}
+              aspectRatio={1}
               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>
+      <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>
+      )}
+    </>
   );
 }