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

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

@@ -1,20 +1,12 @@
 'use client';
 
 import { FindInStore } from '@theme/views/find-in-store';
-import React, { useState, useMemo, CSSProperties, useCallback } from 'react';
+import useFavButton from '../../hooks/use-fav-button';
+import React, { useState } 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;
@@ -28,345 +20,39 @@ export default function MiscButtons({
   productName
 }: MiscButtonsProps) {
   const { t } = useLocalization();
-  const { status } = useSession();
-  const {
-    favoritesButtonStyles,
-    favoritesButtonProperties,
-    findInStoreStyles,
-    findInStoreProperties
-  } = useProductDetail();
+  const { FavButton } = useFavButton(productPk);
   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 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>
-      </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 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>
-      </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>
+      </Button>
       <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"
-          style={{
-            padding: findInStoreStyles['modal-padding']
-          }}
-        >
+        <div className="px-6">
           <FindInStore
             productName={productName}
             productPk={productPk}

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

@@ -1,14 +1,10 @@
-import React, { CSSProperties, useMemo } from 'react';
+import React 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;
@@ -32,21 +28,6 @@ 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,
@@ -63,63 +44,6 @@ 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,
@@ -127,8 +51,6 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
     addBeforeClick: () => validateVariantSelection(variants).isValid,
     openMiniBasket: false,
     className: clsx([
-      'h-12',
-      'mb-4',
       'py-2.5',
       'bg-black',
       'relative',
@@ -149,8 +71,7 @@ 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(', ')}`
         );
@@ -161,7 +82,7 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
 
   const handleMainActionClick = () => {
     onClearError();
-
+    
     if (inStock) {
       onAddToCart();
     } else {
@@ -169,32 +90,6 @@ 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 && (
@@ -203,37 +98,13 @@ 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
-        }
-        onClick={isDesigner ? handleDesignerClick : handleMainActionClick}
+        disabled={isAddToCartLoading || isAddToStockAlertLoading || isVariantLoading}
         className={clsx(
-          'w-full',
-          hasHoverStyles && 'add-to-cart-styled',
-          isAddToCartSectionSelected && 'ring-2 ring-blue-500 ring-offset-2'
+          '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'
         )}
-        style={combinedButtonStyles}
+        onClick={handleMainActionClick}
         data-testid="product-add-to-cart"
       >
         {isVariantLoading ? (
@@ -291,4 +162,4 @@ export const ProductActions: React.FC<ProductActionsProps> = ({
       </Modal>
     </>
   );
-};
+};