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

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 {
@@ -33,12 +33,12 @@ export default async function ProductLayout({
     .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
@@ -49,6 +49,7 @@ export default async function ProductLayout({
           <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,36 +10,11 @@ export interface PriceProps {
 }
 
 export default function PriceWrapper(props: PriceProps) {
-  const { t } = useLocalization();
-  const { price, retailPrice } = props;
-  const hasRetailPrice =
-    parseFloat(retailPrice || '0') > parseFloat(price || '0');
+  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 || '0') / parseInt(retailPrice || '1')) * 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>
   );
 }

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

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { CSSProperties, useMemo } from 'react';
 import clsx from 'clsx';
 import { Button, Icon, Modal } from '@theme/components';
 import { useLocalization } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { validateVariantSelection } from '../../utils/variant-validation';
 import { VariantType } from '@akinon/next/types';
+import {
+  useProductDetail,
+  ADD_TO_CART_SECTION_ID
+} from '@theme/views/product-detail';
 
 interface Product {
   pk: number;
@@ -28,6 +32,21 @@ interface ProductActionsProps {
   onCloseModal: () => void;
 }
 
+/**
+ * Format style value - ensures proper CSS unit
+ */
+const formatStyleValue = (
+  value: string | number | undefined,
+  unit: string = 'px'
+): string | undefined => {
+  if (value === undefined || value === null || value === '') return undefined;
+  const strValue = String(value);
+  if (strValue.endsWith(unit)) return strValue;
+  const numValue = parseInt(strValue, 10);
+  if (isNaN(numValue)) return strValue;
+  return `${numValue}${unit}`;
+};
+
 export const ProductActions: React.FC<ProductActionsProps> = ({
   product,
   variants,
@@ -44,6 +63,63 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
   onCloseModal
 }) => {
   const { t } = useLocalization();
+  const { isDesigner, selectedSectionId, addToCartStyles } = useProductDetail();
+
+  const isAddToCartSectionSelected =
+    isDesigner && selectedSectionId === ADD_TO_CART_SECTION_ID;
+
+  // Generate button styles from theme editor
+  const buttonStyles = useMemo((): CSSProperties => {
+    const styles: CSSProperties = {};
+
+    if (addToCartStyles['font-size']) {
+      styles.fontSize = formatStyleValue(addToCartStyles['font-size']);
+    }
+    if (addToCartStyles['font-weight']) {
+      styles.fontWeight = addToCartStyles['font-weight'];
+    }
+    if (addToCartStyles.color) {
+      styles.color = addToCartStyles.color;
+    }
+    if (addToCartStyles['background-color']) {
+      styles.backgroundColor = addToCartStyles['background-color'];
+    }
+    if (addToCartStyles['border-color']) {
+      styles.borderColor = addToCartStyles['border-color'];
+    }
+    if (addToCartStyles['border-width']) {
+      styles.borderWidth = formatStyleValue(addToCartStyles['border-width']);
+      styles.borderStyle = 'solid';
+    }
+    if (addToCartStyles['border-radius']) {
+      styles.borderRadius = formatStyleValue(addToCartStyles['border-radius']);
+    }
+    if (addToCartStyles.height) {
+      styles.height = formatStyleValue(addToCartStyles.height);
+    }
+    if (addToCartStyles['padding-x']) {
+      const paddingX = formatStyleValue(addToCartStyles['padding-x']);
+      styles.paddingLeft = paddingX;
+      styles.paddingRight = paddingX;
+    }
+
+    return styles;
+  }, [addToCartStyles]);
+
+  // Generate hover styles as CSS variables
+  const hoverStyleVars = useMemo((): Record<string, string> => {
+    const vars: Record<string, string> = {};
+
+    if (addToCartStyles['hover-background-color']) {
+      vars['--add-to-cart-hover-bg'] =
+        addToCartStyles['hover-background-color'];
+    }
+    if (addToCartStyles['hover-text-color']) {
+      vars['--add-to-cart-hover-color'] = addToCartStyles['hover-text-color'];
+    }
+
+    return vars;
+  }, [addToCartStyles]);
 
   const checkoutProviderProps = {
     product,
@@ -51,6 +127,8 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
     addBeforeClick: () => validateVariantSelection(variants).isValid,
     openMiniBasket: false,
     className: clsx([
+      'h-12',
+      'mb-4',
       'py-2.5',
       'bg-black',
       'relative',
@@ -71,7 +149,8 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
       'after:left-1'
     ]),
     onError: (error: any) => {
-      const formattedError = error?.data?.non_field_errors ||
+      const formattedError =
+        error?.data?.non_field_errors ||
         Object.keys(error?.data || {}).map(
           (key) => `${key}: ${error?.data[key].join(', ')}`
         );
@@ -82,7 +161,7 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
 
   const handleMainActionClick = () => {
     onClearError();
-    
+
     if (inStock) {
       onAddToCart();
     } else {
@@ -90,6 +169,32 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
     }
   };
 
+  // Handle designer click to select this section
+  const handleDesignerClick = (e: React.MouseEvent) => {
+    if (!isDesigner) return;
+
+    e.stopPropagation();
+    window.parent?.postMessage(
+      {
+        type: 'SELECT_SECTION',
+        placeholderId: 'product-detail',
+        sectionId: ADD_TO_CART_SECTION_ID
+      },
+      '*'
+    );
+  };
+
+  // Combine base styles with theme editor styles
+  const combinedButtonStyles: CSSProperties = {
+    ...buttonStyles,
+    ...hoverStyleVars
+  };
+
+  // Determine if we have custom hover styles
+  const hasHoverStyles =
+    addToCartStyles['hover-background-color'] ||
+    addToCartStyles['hover-text-color'];
+
   return (
     <>
       {productError && (
@@ -98,13 +203,37 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
         </div>
       )}
 
+      {/* Add hover styles via inline style tag when custom hover colors are set */}
+      {hasHoverStyles && (
+        <style>
+          {`
+            .add-to-cart-styled:hover {
+              ${
+                addToCartStyles['hover-background-color']
+                  ? `background-color: ${addToCartStyles['hover-background-color']} !important;`
+                  : ''
+              }
+              ${
+                addToCartStyles['hover-text-color']
+                  ? `color: ${addToCartStyles['hover-text-color']} !important;`
+                  : ''
+              }
+            }
+          `}
+        </style>
+      )}
+
       <Button
-        disabled={isAddToCartLoading || isAddToStockAlertLoading || isVariantLoading}
+        disabled={
+          isAddToCartLoading || isAddToStockAlertLoading || isVariantLoading
+        }
+        onClick={isDesigner ? handleDesignerClick : handleMainActionClick}
         className={clsx(
-          'fixed bottom-0 right-0 w-1/2 h-14 z-[20] flex items-center justify-center fill-primary-foreground',
-          'hover:fill-primary sm:relative sm:w-full sm:mt-3 sm:font-semibold sm:h-12'
+          'w-full',
+          hasHoverStyles && 'add-to-cart-styled',
+          isAddToCartSectionSelected && 'ring-2 ring-blue-500 ring-offset-2'
         )}
-        onClick={handleMainActionClick}
+        style={combinedButtonStyles}
         data-testid="product-add-to-cart"
       >
         {isVariantLoading ? (
@@ -162,4 +291,4 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
       </Modal>
     </>
   );
-};
+};