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

package/app-template/src/components/widget-content.tsx

@@ -0,0 +1,323 @@
+'use client';
+
+import { useMemo } from 'react';
+import { WidgetContentProps } from '../types/widget';
+import clsx from 'clsx';
+import { getResponsiveStyle, ResponsiveSize } from '../utils/styles';
+import { ActionTooltip } from '@theme/components';
+
+export function WidgetContent({
+  widgetData,
+  skipParentWrapper = false,
+  onWidgetClick,
+  selectedWidget,
+  designMode,
+  responsive,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}: WidgetContentProps) {
+  const componentId = Object.keys(widgetData.attributes)[0];
+  const componentData = widgetData.attributes[componentId];
+  const parentData = widgetData.parent;
+
+  const combinedStyles = useMemo(
+    () =>
+      getResponsiveStyle(
+        componentData?.style || {},
+        responsive as ResponsiveSize
+      ),
+    [componentData?.style, responsive]
+  );
+
+  if (!componentData) return null;
+
+  const parentStyles = parentData?.style
+    ? Object.keys(parentData.style).reduce(
+        (acc, breakpoint) => ({
+          ...acc,
+          ...parentData.style[breakpoint]
+        }),
+        {}
+      )
+    : {};
+
+  const getClickableStyles = (isSelected: boolean) => {
+    const baseComponentId = componentId.split('-')[0];
+    const baseSelectedId = selectedWidget?.id?.split('-')[0];
+
+    return clsx(
+      designMode && [
+        'cursor-pointer',
+        (isSelected || baseComponentId === baseSelectedId) &&
+          'outline outline-2 outline-[#3B82F6] outline-offset-2'
+      ]
+    );
+  };
+
+  const renderActionTooltip = () => {
+    if (!designMode || !selectedWidget || selectedWidget.id !== componentId) {
+      return null;
+    }
+
+    return (
+      <ActionTooltip
+        widgetData={widgetData}
+        selectedWidget={selectedWidget}
+        designMode={designMode}
+        onDelete={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_DELETE',
+              data: { id: componentId }
+            },
+            '*'
+          );
+        }}
+        onMoveUp={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_MOVE',
+              data: { id: componentId, direction: 'up' }
+            },
+            '*'
+          );
+        }}
+        onMoveDown={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_MOVE',
+              data: { id: componentId, direction: 'down' }
+            },
+            '*'
+          );
+        }}
+        onCopy={() => {
+          window.parent.postMessage(
+            {
+              type: 'WIDGET_COPY',
+              data: { id: componentId }
+            },
+            '*'
+          );
+        }}
+      />
+    );
+  };
+
+  const wrapWithTooltip = (component: React.ReactNode) => {
+    return (
+      <div className="relative">
+        {renderActionTooltip()}
+        {component}
+      </div>
+    );
+  };
+
+  const renderComponent = () => {
+    let iconSvg;
+    let Tag;
+    let CustomTag;
+
+    const dragProps =
+      designMode && draggable
+        ? {
+            draggable: true,
+            onDragStart,
+            onDragOver,
+            onDragLeave,
+            onDrop
+          }
+        : {};
+
+    switch (componentData.type) {
+      case 'text':
+        Tag = (
+          componentData.tag || 'div'
+        ).toLowerCase() as keyof JSX.IntrinsicElements;
+        return wrapWithTooltip(
+          <Tag
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            className={getClickableStyles(selectedWidget?.id === componentId)}
+            {...dragProps}
+          >
+            {componentData.value?.text}
+          </Tag>
+        );
+
+      case 'image': {
+        const {
+          src,
+          mobileSrc,
+          tabletSrc,
+          desktopSrc,
+          alt = '',
+          sizes,
+          mediaQueries = {
+            mobile: '(max-width: 767px)',
+            tablet: '(min-width: 768px) and (max-width: 1023px)',
+            desktop: '(min-width: 1024px)'
+          }
+        } = componentData.value || {};
+
+        return wrapWithTooltip(
+          <picture
+            id={componentId}
+            onClick={onWidgetClick}
+            className={clsx(
+              designMode && [
+                'cursor-pointer relative',
+                selectedWidget?.id === componentId
+                  ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                  : ''
+              ]
+            )}
+            {...dragProps}
+          >
+            {mobileSrc && (
+              <source
+                media={mediaQueries.mobile}
+                srcSet={mobileSrc}
+                sizes={sizes?.mobile}
+              />
+            )}
+            {tabletSrc && (
+              <source
+                media={mediaQueries.tablet}
+                srcSet={tabletSrc}
+                sizes={sizes?.tablet}
+              />
+            )}
+            {desktopSrc && (
+              <source
+                media={mediaQueries.desktop}
+                srcSet={desktopSrc}
+                sizes={sizes?.desktop}
+              />
+            )}
+            <img
+              className={clsx(
+                designMode && [
+                  'cursor-pointer',
+                  selectedWidget?.id === componentId
+                    ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                    : ''
+                ]
+              )}
+              src={src || desktopSrc || tabletSrc || mobileSrc || ''}
+              alt={alt}
+              style={combinedStyles}
+              loading="lazy"
+            />
+          </picture>
+        );
+      }
+
+      case 'icon':
+        iconSvg =
+          componentData.value?.sizes?.[
+            Object.keys(componentData.value.sizes || {})[0]
+          ];
+        if (!iconSvg) return null;
+        return wrapWithTooltip(
+          <div
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            className={clsx(
+              'relative',
+              designMode && [
+                'cursor-pointer',
+                selectedWidget?.id === componentId
+                  ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                  : ''
+              ]
+            )}
+            dangerouslySetInnerHTML={{ __html: iconSvg }}
+            {...dragProps}
+          />
+        );
+
+      case 'link':
+        return wrapWithTooltip(
+          <a
+            id={componentId}
+            href={componentData.value?.href || '#'}
+            target={componentData.value?.target}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            className={clsx(
+              'relative data-container',
+              designMode && [
+                'cursor-pointer',
+                selectedWidget?.id === componentId
+                  ? 'outline outline-2 outline-[#3B82F6] outline-offset-2'
+                  : ''
+              ]
+            )}
+            {...dragProps}
+          >
+            {componentData.value?.text || componentData.value?.title || 'Link'}
+          </a>
+        );
+
+      case 'divider':
+        return wrapWithTooltip(
+          <hr
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            {...dragProps}
+          />
+        );
+
+      default:
+        if (componentData.tag) {
+          CustomTag =
+            componentData.tag.toLowerCase() as keyof JSX.IntrinsicElements;
+          return wrapWithTooltip(
+            <CustomTag
+              id={componentId}
+              style={combinedStyles}
+              onClick={onWidgetClick}
+              className={getClickableStyles(selectedWidget?.id === componentId)}
+              {...dragProps}
+            >
+              {componentData.value?.text}
+            </CustomTag>
+          );
+        }
+        return wrapWithTooltip(
+          <div
+            id={componentId}
+            style={combinedStyles}
+            onClick={onWidgetClick}
+            {...dragProps}
+          >
+            {componentData.value?.text}
+          </div>
+        );
+    }
+  };
+
+  if (parentData && !skipParentWrapper) {
+    const ParentTag = (
+      parentData.tag || 'div'
+    ).toLowerCase() as keyof JSX.IntrinsicElements;
+    return (
+      <ParentTag
+        id={parentData.id}
+        style={parentStyles}
+        onClick={onWidgetClick}
+      >
+        {renderComponent()}
+      </ParentTag>
+    );
+  }
+
+  return renderComponent();
+}

package/app-template/src/data/server/theme.ts

@@ -0,0 +1,70 @@
+import 'server-only';
+
+import { getWidgetData } from '@akinon/next/data/server';
+
+interface ThemeSettings {
+  logo?: string;
+  favicon?: string;
+  plainHeader?: boolean;
+  fontFamily?: string;
+  backupFontFamily?: string;
+  fontWeight?: string;
+  fontSubsets?: string;
+  fontSize?: string;
+  fontColor?: string;
+  fontOpacity?: number;
+  mainMenuSticky?: boolean;
+  breadcrumbSeparator?: string;
+  socialNetworks?: Record<string, { url?: string; icon?: string }>;
+}
+
+interface ThemeConfigWidget {
+  attributes?: {
+    theme_name?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_slug?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_settings?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_breakpoints?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+    theme_dataSources?: {
+      value?: string;
+      kwargs?: Record<string, unknown>;
+    };
+  };
+}
+
+/**
+ * Fetches theme configuration from the widget API
+ * This is a server-side function that reads theme settings stored in the theme-config widget
+ */
+export async function getThemeSettings(): Promise<ThemeSettings> {
+  try {
+    const themeConfigData = await getWidgetData<any>({
+      slug: 'theme-config'
+    });
+
+    if (!themeConfigData?.attributes?.theme_settings?.value) {
+      return {};
+    }
+
+    // Parse the theme_settings JSON string from the value property
+    const settings: ThemeSettings = JSON.parse(
+      themeConfigData.attributes.theme_settings.value
+    );
+
+    return settings;
+  } catch (error) {
+    console.error('Error loading theme settings:', error);
+    return {};
+  }
+}

package/app-template/src/hooks/use-fav-button.tsx

@@ -15,6 +15,7 @@ interface FavButtonProps {
   label?: string;
   size?: number;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 const useFavButton = (productPk: number) => {
@@ -35,7 +36,7 @@ const useFavButton = (productPk: number) => {
     [favorites, productPk]
   );
 
-  const [isActive, setIsActive] = useState(Boolean(favoriteItem));
+  const isActive = Boolean(favoriteItem);
   const [isPushed, setIsPushed] = useState<boolean>(false);
 
   const [addFavorite] = useAddFavoriteMutation();
@@ -55,20 +56,16 @@ const useFavButton = (productPk: number) => {
   }, [favoriteItem, productPk, addFavorite, removeFavorite]);
 
   useEffect(() => {
-    setIsActive(Boolean(favoriteItem));
-  }, [favoriteItem]);
-
-  useEffect(() => {
-    if (favoriteItem && !isActive && isPushed) {
-      setIsActive(true);
+    if (favoriteItem && isPushed) {
       pushAddToWishlist({
         base_code: favoriteItem?.product?.base_code,
         name: favoriteItem?.product?.name,
         price: favoriteItem?.product?.price,
         currency_type: favoriteItem?.product?.currency_type
       });
+      setIsPushed(false);
     }
-  }, [favoriteItem, isActive, isPushed]);
+  }, [favoriteItem, isPushed]);
 
   const FavButton = useMemo(() => {
     const View = (props: FavButtonProps) => (
@@ -77,12 +74,14 @@ const useFavButton = (productPk: number) => {
           'flex items-center hover:text-secondary-hover hover:cursor-pointer',
           props.className
         )}
+        style={props.style}
         onClick={handleClick}
         data-testid="favourites-icon"
       >
         <Icon
-          name={isActive ? 'heart-full' : 'heart-stroke'}
-          className={clsx('text-2xl md:text-xl hover:fill-secondary-hover')}
+          name={isActive ? 'fav-on' : 'fav-off'}
+          size={props.size ?? 16}
+          className={clsx('hover:fill-secondary-hover')}
         />
         {props.label && <span className="ml-2">{props.label}</span>}
       </button>

package/app-template/src/hooks/use-product-cart.ts

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useAddProductToBasket } from './index';
+import { pushAddToCart } from '@theme/utils/gtm';
+import { validateVariantSelection } from '../utils/variant-validation';
+import { VariantType } from '@akinon/next/types';
+
+interface Product {
+  pk: number;
+  [key: string]: any;
+}
+
+interface UseProductCartProps {
+  product: Product;
+  variants: VariantType[];
+}
+
+interface AddToCartError {
+  data?: {
+    non_field_errors?: string[];
+    [key: string]: string[];
+  };
+}
+
+export const useProductCart = ({ product, variants }: UseProductCartProps) => {
+  const [productError, setProductError] = useState<React.ReactNode | null>(
+    null
+  );
+  const [addProduct, { isLoading: isAddToCartLoading }] =
+    useAddProductToBasket();
+
+  const formatError = (error: AddToCartError) => {
+    if (error?.data?.non_field_errors) {
+      return error.data.non_field_errors;
+    }
+
+    if (error?.data) {
+      return Object.keys(error.data).map(
+        (key) => `${key}: ${error.data[key].join(', ')}`
+      );
+    }
+
+    return 'An error occurred';
+  };
+
+  const addProductToCart = async (quantity: number = 1) => {
+    const validation = validateVariantSelection(variants);
+
+    if (!validation.isValid) {
+      setProductError(validation.errorMessage);
+      return false;
+    }
+
+    try {
+      await addProduct({
+        product: product.pk,
+        quantity,
+        attributes: {}
+      });
+
+      pushAddToCart(product);
+      setProductError(null);
+      return true;
+    } catch (error) {
+      const formattedError = formatError(error as AddToCartError);
+      setProductError(formattedError);
+      return false;
+    }
+  };
+
+  const clearProductError = () => {
+    setProductError(null);
+  };
+
+  return {
+    addProductToCart,
+    productError,
+    clearProductError,
+    isAddToCartLoading
+  };
+};

package/app-template/src/hooks/use-stock-alert.ts

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import { useAddStockAlertMutation } from '@akinon/next/data/client/wishlist';
+import { Trans } from '@akinon/next/components/trans';
+import { useLocalization } from '@akinon/next/hooks';
+
+interface UseStockAlertProps {
+  productPk: number;
+  userEmail?: string;
+}
+
+export const useStockAlert = ({ productPk, userEmail }: UseStockAlertProps) => {
+  const { t } = useLocalization();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [stockAlertResponseMessage, setStockAlertResponseMessage] = useState<React.ReactNode | null>(null);
+  const [productError, setProductError] = useState<React.ReactNode | null>(null);
+  
+  const [addStockAlert, { isLoading: isAddToStockAlertLoading }] = useAddStockAlertMutation();
+
+  const handleSuccess = () => {
+    setStockAlertResponseMessage(React.createElement(
+      Trans,
+      {
+        i18nKey: "product.stock_alert.success_description",
+        components: {
+          Email: React.createElement('span', {}, userEmail)
+        }
+      }
+    ));
+    setIsModalOpen(true);
+    setProductError(null);
+  };
+
+  const handleError = (err: any) => {
+    if (err.status !== 401) {
+      setStockAlertResponseMessage(
+        t('product.stock_alert.error_description').toString()
+      );
+      setIsModalOpen(true);
+    }
+  };
+
+  const addProductToStockAlertList = async () => {
+    try {
+      await addStockAlert({
+        productPk,
+        email: userEmail
+      })
+        .unwrap()
+        .then(handleSuccess)
+        .catch(handleError);
+    } catch (error: any) {
+      setProductError(error?.data?.non_field_errors || null);
+    }
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const clearError = () => {
+    setProductError(null);
+  };
+
+  return {
+    addProductToStockAlertList,
+    isModalOpen,
+    setIsModalOpen,
+    stockAlertResponseMessage,
+    productError,
+    isAddToStockAlertLoading,
+    closeModal,
+    clearError
+  };
+};

package/app-template/src/hooks/use-theme-settings.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface ThemeSettings {
+  logo?: string;
+  favicon?: string;
+  plainHeader?: boolean;
+  fontFamily?: string;
+  backupFontFamily?: string;
+  fontWeight?: string;
+  fontSubsets?: string;
+}
+
+/**
+ * Client-side hook to fetch theme settings
+ * Note: This makes a client-side API call. For server components, use getThemeSettings() instead.
+ */
+export function useThemeSettings() {
+  const [settings, setSettings] = useState<ThemeSettings>({});
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchSettings = async () => {
+      try {
+        const response = await fetch('/api/theme-settings');
+        if (response.ok) {
+          const data = await response.json();
+          setSettings(data);
+        }
+      } catch (error) {
+        console.error('Failed to fetch theme settings:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchSettings();
+  }, []);
+
+  return { settings, isLoading };
+}