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

package/app-template/src/views/product/custom-button-group.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { Icon, Button } from '@theme/components';
+
+type CustomButtonGroupProps = {
+  carouselState?: {
+    currentSlide: number;
+    totalItems: number;
+  };
+  previous?: () => void;
+  next?: () => void;
+  goToSlide?: (slide: number) => void;
+};
+
+export default function CustomButtonGroup({
+  carouselState,
+  previous,
+  next
+}: CustomButtonGroupProps) {
+  const currentSlide = carouselState?.currentSlide ?? 0;
+  const totalItems = carouselState?.totalItems ?? 0;
+
+  if (!totalItems) return null;
+
+  const isFirstSlide = currentSlide === 0;
+  const isLastSlide = currentSlide >= totalItems - 1;
+
+  const handlePrevClick = () => {
+    if (isFirstSlide) return;
+    previous?.();
+  };
+
+  const handleNextClick = () => {
+    if (isLastSlide) return;
+    next?.();
+  };
+
+  return (
+    <div className="relative mt-3 w-full">
+      <div className="flex items-center justify-center gap-2 text-[13px] font-medium text-gray-650">
+        <Button
+          type="button"
+          aria-label="Previous image"
+          aria-disabled={isFirstSlide}
+          disabled={isFirstSlide}
+          onClick={handlePrevClick}
+          className="bg-transparent text-primary border-none"
+        >
+          <Icon name="chevron-start" size={12} />
+        </Button>
+
+        <span>
+          {currentSlide + 1}/{totalItems}
+        </span>
+
+        <Button
+          type="button"
+          aria-label="Next image"
+          aria-disabled={isLastSlide}
+          disabled={isLastSlide}
+          onClick={handleNextClick}
+          className="bg-transparent text-primary border-none"
+        >
+          <Icon name="chevron-end" size={12} className="text-gray-900" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/app-template/src/views/product/favorites-button-section.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+/**
+ * Favorites Button Section Wrapper
+ *
+ * Wraps favorites button with Theme Editor styling support.
+ * Applies CSS variables for customization via Theme Editor.
+ */
+
+import { PropsWithChildren, CSSProperties, useMemo } from 'react';
+import clsx from 'clsx';
+import {
+  useProductDetail,
+  FAVORITES_BUTTON_SECTION_ID
+} from '@theme/views/product-detail';
+
+export default function FavoritesButtonSection({
+  children
+}: PropsWithChildren) {
+  const { isDesigner, selectedSectionId, favoritesButtonStyles } =
+    useProductDetail();
+
+  // Check if this section is selected in designer mode
+  const isSelected =
+    isDesigner && selectedSectionId === FAVORITES_BUTTON_SECTION_ID;
+
+  // Build CSS variables from favoritesButtonStyles
+  const cssVariables = useMemo((): CSSProperties => {
+    if (!favoritesButtonStyles) return {};
+
+    const vars: Record<string, string> = {};
+    Object.entries(favoritesButtonStyles).forEach(([key, value]) => {
+      if (value) {
+        vars[`--favorites-button-${key}`] = value;
+      }
+    });
+    return vars as CSSProperties;
+  }, [favoritesButtonStyles]);
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      e.stopPropagation();
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: FAVORITES_BUTTON_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  return (
+    <div
+      className={clsx(
+        'favorites-button-section',
+        isDesigner && 'cursor-pointer',
+        isSelected && 'ring-2 ring-blue-500 ring-offset-2'
+      )}
+      style={cssVariables}
+      onClick={handleClick}
+    >
+      {children}
+    </div>
+  );
+}

package/app-template/src/views/product/find-in-store-section.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import React, { CSSProperties, useMemo } from 'react';
+import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
+import {
+  useProductDetail,
+  PRODUCT_DETAIL_PLACEHOLDER_ID,
+  FIND_IN_STORE_SECTION_ID
+} from '@theme/views/product-detail';
+
+interface FindInStoreSectionProps {
+  children: React.ReactNode;
+}
+
+export default function FindInStoreSection({
+  children
+}: FindInStoreSectionProps) {
+  const { isDesigner, selectedSectionId, findInStoreStyles } =
+    useProductDetail();
+
+  const { handleClick } = useDesignerFeatures({
+    sectionId: FIND_IN_STORE_SECTION_ID,
+    placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
+    blockId: '',
+    isDesigner
+  });
+
+  const isSelected = selectedSectionId === FIND_IN_STORE_SECTION_ID;
+
+  const cssVariables = useMemo((): CSSProperties => {
+    if (!findInStoreStyles) return {};
+
+    const vars: Record<string, string> = {};
+    Object.entries(findInStoreStyles).forEach(([key, value]) => {
+      if (value) {
+        vars[`--find-in-store-${key}`] = value;
+      }
+    });
+    return vars as CSSProperties;
+  }, [findInStoreStyles]);
+
+  if (!isDesigner) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      style={{
+        ...cssVariables,
+        cursor: 'pointer',
+        outline: isSelected ? '2px solid #3b82f6' : 'none',
+        outlineOffset: '2px'
+      }}
+      data-section-id={FIND_IN_STORE_SECTION_ID}
+    >
+      {children}
+    </div>
+  );
+}

package/app-template/src/views/product/index.ts

@@ -1,6 +1,7 @@
 export { default as PriceWrapper } from './price-wrapper';
 export { default as Variant } from './variant';
 export { default as ProductInfo } from './product-info';
+export { default as ProductShare } from './product-share';
 export { default as ProductGroupInfo } from './product-group-info';
 export { default as MiscButtons } from './misc-buttons';
 export { default as ProductInfoSlider } from './slider';

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

@@ -1,6 +1,6 @@
 import Breadcrumb from '@theme/views/breadcrumb';
 import { ProductInfoSlider } from '@theme/views/product';
-
+import ThemePlaceholder from '@akinon/next/components/theme-editor/theme-placeholder';
 import { BreadcrumbResultType, ProductResult } from '@akinon/next/types';
 
 interface DeliveryReturnItem {
@@ -22,19 +22,34 @@ export default async function ProductLayout({
   breadcrumbData,
   children
 }: ProductPageProps) {
+  const categoryIds = breadcrumbData
+    ?.map((item) => item.extra_context?.attributes?.category_id)
+    .filter(Boolean)
+    .join(',');
+
+  const categoryPaths = breadcrumbData
+    ?.map((item) => item.path)
+    .filter(Boolean)
+    .join(',');
+
   return (
-    <div className="container mx-auto">
-      <div className="max-w-5xl mx-auto my-5 px-7">
+    <div className="container mx-auto px-3 py-16 lg:px-0">
+      <div className="my-5">
         <Breadcrumb breadcrumbList={breadcrumbData} />
       </div>
-      <div className="grid max-w-5xl grid-cols-5 lg:gap-8 mx-auto px-7">
-        <div className="col-span-5 lg:col-span-3">
+      <div className="grid grid-cols-5 lg:gap-10 mx-auto">
+        <div className="mb-10 col-span-5 lg:col-span-3 lg:mb-0">
           <ProductInfoSlider product={data.product} />
         </div>
-        <div className="flex flex-col items-center col-span-5 lg:col-span-2">
+        <div
+          className="flex flex-col items-center col-span-5 lg:col-span-2"
+          data-category-ids={categoryIds}
+          data-category-paths={categoryPaths}
+        >
           <div className="w-full">{children}</div>
         </div>
       </div>
+      <ThemePlaceholder slug="product-page-new" />
     </div>
   );
 }

package/app-template/src/views/product/misc-buttons.tsx

@@ -1,12 +1,20 @@
 'use client';
 
 import { FindInStore } from '@theme/views/find-in-store';
-import useFavButton from '../../hooks/use-fav-button';
-import React, { useState } from 'react';
+import React, { useState, useMemo, CSSProperties, useCallback } from 'react';
 import { Button, Icon, Modal } from '@theme/components';
 import { VariantType } from '@akinon/next/types';
 import clsx from 'clsx';
 import { useLocalization } from '@akinon/next/hooks';
+import FavoritesButtonSection from './favorites-button-section';
+import FindInStoreSection from './find-in-store-section';
+import { useProductDetail } from '@theme/views/product-detail';
+import { useSession } from 'next-auth/react';
+import {
+  useAddFavoriteMutation,
+  useGetFavoritesQuery,
+  useRemoveFavoriteMutation
+} from '@akinon/next/data/client/wishlist';
 
 interface MiscButtonsProps {
   productPk: number;
@@ -20,39 +28,345 @@ export default function MiscButtons({
   productName
 }: MiscButtonsProps) {
   const { t } = useLocalization();
-  const { FavButton } = useFavButton(productPk);
+  const { status } = useSession();
+  const {
+    favoritesButtonStyles,
+    favoritesButtonProperties,
+    findInStoreStyles,
+    findInStoreProperties
+  } = useProductDetail();
   const [isFindinStoreModalOpen, setIsFindinStoreModalOpen] = useState(false);
 
+  const { data: favorites } = useGetFavoritesQuery(
+    { limit: 1000 },
+    { skip: status !== 'authenticated' }
+  );
+
+  const favoriteItem = useMemo(
+    () =>
+      favorites?.results?.find(
+        (item) => Number(item.product.pk) === Number(productPk)
+      ),
+    [favorites, productPk]
+  );
+
+  const [addFavorite] = useAddFavoriteMutation();
+  const [removeFavorite] = useRemoveFavoriteMutation();
+
+  const handleFavoriteClick = useCallback(async () => {
+    try {
+      if (favoriteItem) {
+        await removeFavorite(favoriteItem.pk);
+      } else {
+        await addFavorite(productPk);
+      }
+    } catch (error) {
+      console.error('Failed operation:', error);
+    }
+  }, [favoriteItem, productPk, addFavorite, removeFavorite]);
+
+  const isActive = Boolean(favoriteItem);
+
+  const iconName = useMemo(() => {
+    const name = isActive
+      ? favoritesButtonProperties.iconActive || 'fav-on'
+      : favoritesButtonProperties.icon || 'fav-off';
+    return name;
+  }, [isActive, favoritesButtonProperties]);
+
+  const hasCustomSvgIcon = useMemo(() => {
+    return (
+      iconName && typeof iconName === 'string' && iconName.includes('<svg')
+    );
+  }, [iconName]);
+
+  const buttonStyle = useMemo(
+    (): CSSProperties => ({
+      fontSize: favoritesButtonStyles['font-size'] || '16px',
+      fontWeight: favoritesButtonStyles['font-weight'] || '400',
+      color: favoritesButtonStyles.color || '#111827',
+      backgroundColor:
+        favoritesButtonStyles['background-color'] || 'transparent',
+      borderWidth: favoritesButtonStyles['border-width'] || '0px',
+      borderColor: favoritesButtonStyles['border-color'] || 'transparent',
+      borderStyle: 'solid',
+      borderRadius: favoritesButtonStyles['border-radius'] || '0px',
+      paddingTop: favoritesButtonStyles['padding-top'] || '16px',
+      paddingBottom: favoritesButtonStyles['padding-bottom'] || '16px',
+      paddingLeft: favoritesButtonStyles['padding-left'] || '16px',
+      paddingRight: favoritesButtonStyles['padding-right'] || '16px',
+      height: favoritesButtonStyles.height || 'auto'
+    }),
+    [favoritesButtonStyles]
+  );
+
+  const iconSize = useMemo(() => {
+    const size = favoritesButtonStyles['icon-size'];
+    const parsed = parseInt(size);
+    return !isNaN(parsed) ? parsed : 20;
+  }, [favoritesButtonStyles]);
+
+  const iconColor = useMemo(
+    () => favoritesButtonStyles['icon-color'] || '#6b7280',
+    [favoritesButtonStyles]
+  );
+
+  const iconActiveColor = useMemo(
+    () => favoritesButtonStyles['icon-active-color'] || '#ef4444',
+    [favoritesButtonStyles]
+  );
+
+  const findInStoreButtonStyle = useMemo(
+    (): CSSProperties => ({
+      fontSize: findInStoreStyles['button-font-size'] || '16px',
+      fontWeight: findInStoreStyles['button-font-weight'] || '400',
+      color: findInStoreStyles['button-color'] || '#111827',
+      backgroundColor:
+        findInStoreStyles['button-background-color'] || 'transparent',
+      borderWidth: findInStoreStyles['button-border-width'] || '1px',
+      borderColor: findInStoreStyles['button-border-color'] || '#d1d5db',
+      borderStyle: 'solid',
+      borderRadius: findInStoreStyles['button-border-radius'] || '0px',
+      paddingLeft: findInStoreStyles['button-padding-x'] || '48px',
+      paddingRight: findInStoreStyles['button-padding-x'] || '48px',
+      paddingTop: findInStoreStyles['button-padding-y'] || '16px',
+      paddingBottom: findInStoreStyles['button-padding-y'] || '16px',
+      height: findInStoreStyles['button-height'] || 'auto'
+    }),
+    [findInStoreStyles]
+  );
+
+  const findInStoreIconSize = useMemo(() => {
+    const size = findInStoreStyles['icon-size'];
+    const parsed = parseInt(size);
+    return !isNaN(parsed) ? parsed : 20;
+  }, [findInStoreStyles]);
+
+  const findInStoreIconColor = useMemo(
+    () => findInStoreStyles['icon-color'] || '#111827',
+    [findInStoreStyles]
+  );
+
+  const findInStoreIconName = useMemo(() => {
+    const customIcon = findInStoreProperties.icon;
+    if (customIcon) {
+      return customIcon;
+    }
+    return 'store-pin';
+  }, [findInStoreProperties]);
+
+  const hasFindInStoreCustomSvgIcon = useMemo(() => {
+    return (
+      findInStoreIconName &&
+      typeof findInStoreIconName === 'string' &&
+      findInStoreIconName.includes('<svg')
+    );
+  }, [findInStoreIconName]);
+
+  const showFindInStoreIcon =
+    findInStoreProperties.showIcon !== undefined
+      ? findInStoreProperties.showIcon
+      : true;
+
+  const modalWidth = useMemo(
+    () => findInStoreStyles['modal-width'] || '36rem',
+    [findInStoreStyles]
+  );
+
+  const modalMaxHeight = useMemo(
+    () => findInStoreStyles['modal-max-height'] || '90vh',
+    [findInStoreStyles]
+  );
+
   return (
-    <div className="grid grid-cols-1 gap-4 place-items-center mb-2 mt-4 sm:grid-cols-[1fr_auto_1fr] sm:my-4 xl:gap-6">
-      <FavButton
-        label={t('product.add_to_favorites')}
-        className="px-1 py-2 text-base hidden sm:flex"
-      />
-      <div className="h-5 border border-black hidden sm:block" />
-      <Button
-        appearance="outlined"
-        className="group px-12 py-2 text-xs place-self-start hover:bg-transparent hover:text-secondary-hover sm:text-base sm:border-none sm:px-4"
-        data-testid="product-find-in-store"
-        onClick={() => setIsFindinStoreModalOpen(true)}
-      >
-        <div className="flex items-center gap-2">
-          <span>{t('product.find_in_store.title')}</span>
-          <Icon
-            name="store-pin"
-            size={20}
-            className={clsx('hidden sm:block group-hover:fill-[white]')}
-          />
+    <div className="grid grid-cols-1 gap-4 border-y divide-x sm:grid-cols-[1fr_auto_1fr] xl:gap-6">
+      <FavoritesButtonSection>
+        <div style={buttonStyle} className="favorites-button-container">
+          <button
+            className="hidden sm:flex items-center hover:cursor-pointer"
+            onClick={handleFavoriteClick}
+            data-testid="favourites-icon"
+          >
+            {hasCustomSvgIcon ? (
+              <div
+                className="flex items-center justify-center"
+                style={{
+                  width: iconSize,
+                  height: iconSize,
+                  color: isActive ? iconActiveColor : iconColor
+                }}
+                dangerouslySetInnerHTML={{ __html: iconName }}
+              />
+            ) : (
+              iconName && <Icon name={iconName} size={iconSize} />
+            )}
+            <span className="ml-2">{t('product.add_to_favorites')}</span>
+          </button>
+          <style jsx global>{`
+            .favorites-button-container:hover {
+              background-color: ${favoritesButtonStyles[
+                'hover-background-color'
+              ] || 'transparent'};
+              color: ${favoritesButtonStyles['hover-text-color'] ||
+              favoritesButtonStyles.color ||
+              '#111827'};
+            }
+
+            .favorites-button-container [data-testid='favourites-icon'] i {
+              color: ${isActive ? iconActiveColor : iconColor} !important;
+            }
+
+            .favorites-button-container:hover
+              [data-testid='favourites-icon']
+              i {
+              color: ${favoritesButtonStyles['hover-icon-color'] ||
+              (isActive ? iconActiveColor : iconColor)} !important;
+            }
+
+            .favorites-button-container [data-testid='favourites-icon'] svg {
+              fill: currentColor;
+            }
+          `}</style>
         </div>
-      </Button>
+      </FavoritesButtonSection>
+      <div className="hidden w-px self-stretch bg-black/10 sm:block" />
+      <FindInStoreSection>
+        <div style={findInStoreButtonStyle} className="find-in-store-container">
+          <Button
+            appearance="outlined"
+            className="group place-self-start h-full hover:bg-transparent sm:border-none"
+            data-testid="product-find-in-store"
+            onClick={() => setIsFindinStoreModalOpen(true)}
+            style={{ all: 'unset', display: 'flex', cursor: 'pointer' }}
+          >
+            <div className="flex items-center gap-2">
+              <span>{t('product.find_in_store.title')}</span>
+              {showFindInStoreIcon &&
+                (hasFindInStoreCustomSvgIcon ? (
+                  <div
+                    className="flex items-center justify-center"
+                    style={{
+                      width: findInStoreIconSize,
+                      height: findInStoreIconSize,
+                      color: findInStoreIconColor
+                    }}
+                    dangerouslySetInnerHTML={{ __html: findInStoreIconName }}
+                  />
+                ) : (
+                  <Icon
+                    name={findInStoreIconName}
+                    size={findInStoreIconSize}
+                    className="hidden sm:block"
+                    style={{ color: findInStoreIconColor }}
+                  />
+                ))}
+            </div>
+          </Button>
+          <style jsx global>{`
+            .find-in-store-container:hover {
+              background-color: ${findInStoreStyles[
+                'button-hover-background-color'
+              ] || 'transparent'};
+              color: ${findInStoreStyles['button-hover-text-color'] ||
+              findInStoreStyles['button-color'] ||
+              '#111827'};
+            }
+
+            .find-in-store-container:hover
+              [data-testid='product-find-in-store']
+              svg {
+              fill: ${findInStoreStyles['button-hover-icon-color'] ||
+              findInStoreIconColor};
+            }
+          `}</style>
+        </div>
+      </FindInStoreSection>
+      <style>{`
+        #find-in-store-modal > section {
+          width: ${modalWidth} !important;
+          max-width: ${
+            findInStoreStyles['modal-max-width'] || '90vw'
+          } !important;
+          max-height: ${modalMaxHeight} !important;
+          background-color: ${
+            findInStoreStyles['modal-background-color'] || 'white'
+          } !important;
+          border-radius: ${
+            findInStoreStyles['modal-border-radius'] || '0.5rem'
+          } !important;
+          overflow-y: auto !important;
+        }
+
+        #find-in-store-modal h3 {
+          font-size: ${
+            findInStoreStyles['modal-title-font-size'] || '1.25rem'
+          } !important;
+          font-weight: ${
+            findInStoreStyles['modal-title-font-weight'] || '600'
+          } !important;
+          color: ${
+            findInStoreStyles['modal-title-color'] || '#111827'
+          } !important;
+        }
+
+        #find-in-store-modal button {
+          font-size: ${
+            findInStoreStyles['modal-button-font-size'] || '14px'
+          } !important;
+          font-weight: ${
+            findInStoreStyles['modal-button-font-weight'] || '500'
+          } !important;
+          color: ${
+            findInStoreStyles['modal-button-color'] || '#ffffff'
+          } !important;
+          background-color: ${
+            findInStoreStyles['modal-button-background-color'] || '#111827'
+          } !important;
+          border-color: ${
+            findInStoreStyles['modal-button-border-color'] || '#111827'
+          } !important;
+          border-width: ${
+            findInStoreStyles['modal-button-border-width'] || '1px'
+          } !important;
+          border-radius: ${
+            findInStoreStyles['modal-button-border-radius'] || '0px'
+          } !important;
+          padding-left: ${
+            findInStoreStyles['modal-button-padding-x'] || '16px'
+          } !important;
+          padding-right: ${
+            findInStoreStyles['modal-button-padding-x'] || '16px'
+          } !important;
+          padding-top: ${
+            findInStoreStyles['modal-button-padding-y'] || '8px'
+          } !important;
+          padding-bottom: ${
+            findInStoreStyles['modal-button-padding-y'] || '8px'
+          } !important;
+        }
+
+        #find-in-store-modal button:hover {
+          background-color: ${
+            findInStoreStyles['modal-button-hover-background-color'] ||
+            '#374151'
+          } !important;
+          color: ${
+            findInStoreStyles['modal-button-hover-text-color'] || '#ffffff'
+          } !important;
+        }
+      `}</style>
       <Modal
         portalId="find-in-store-modal"
         title={t('product.find_in_store.title')}
         open={isFindinStoreModalOpen}
         setOpen={setIsFindinStoreModalOpen}
-        className="w-[22rem] sm:w-[36rem] max-h-[90vh] overflow-y-auto"
       >
-        <div className="px-6">
+        <div
+          className="px-6"
+          style={{
+            padding: findInStoreStyles['modal-padding']
+          }}
+        >
           <FindInStore
             productName={productName}
             productPk={productPk}

package/app-template/src/views/product/price-wrapper.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 import { Price } from '@theme/components';
-import { useLocalization } from '@akinon/next/hooks';
 import { Product } from '@akinon/next/types';
 
 export interface PriceProps {
@@ -11,31 +10,11 @@ export interface PriceProps {
 }
 
 export default function PriceWrapper(props: PriceProps) {
-  const { t } = useLocalization();
-  const { price, retailPrice } = props;
-  const hasRetailPrice = parseFloat(retailPrice) > parseFloat(price);
+  const { price } = props;
 
   return (
-    <div className="flex items-center gap-3 justify-center h-full">
-      <div className="flex flex-col items-end">
-        {hasRetailPrice && (
-          <div>
-            <Price value={retailPrice} className="text-xs line-through" />
-          </div>
-        )}
-        <div className="-mt-2">
-          <Price value={price} className="text-2xl" data-testid="price" />
-        </div>
-      </div>
-
-      {hasRetailPrice && (
-        <div className="flex flex-col items-center w-9 py-0.5 text-xs text-white bg-secondary">
-          <span className="font-bold">
-            {Math.round(100 - (parseInt(price) / parseInt(retailPrice)) * 100)}%
-          </span>
-          <span>{t('product.off')}</span>
-        </div>
-      )}
+    <div className="text-black-750 mb-4">
+      <Price value={price} className="text-[17px]" data-testid="price" />
     </div>
   );
 }