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

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

@@ -0,0 +1,294 @@
+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;
+  name: string;
+  [key: string]: any;
+}
+
+interface ProductActionsProps {
+  product: Product;
+  variants: VariantType[];
+  inStock: boolean;
+  isVariantLoading: boolean;
+  onAddToCart: () => void;
+  onAddToStockAlert: () => void;
+  onClearError: () => void;
+  isAddToCartLoading: boolean;
+  isAddToStockAlertLoading: boolean;
+  productError: React.ReactNode | null;
+  isModalOpen: boolean;
+  stockAlertResponseMessage: React.ReactNode | null;
+  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,
+  inStock,
+  isVariantLoading,
+  onAddToCart,
+  onAddToStockAlert,
+  onClearError,
+  isAddToCartLoading,
+  isAddToStockAlertLoading,
+  productError,
+  isModalOpen,
+  stockAlertResponseMessage,
+  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,
+    clearBasket: true,
+    addBeforeClick: () => validateVariantSelection(variants).isValid,
+    openMiniBasket: false,
+    className: clsx([
+      'h-12',
+      'mb-4',
+      'py-2.5',
+      'bg-black',
+      'relative',
+      'hover:bg-black',
+      'before:content-[""]',
+      'before:w-6',
+      'before:h-6',
+      'before:bg-white',
+      'before:absolute',
+      'before:rounded-r-[18px]',
+      'before:left-0',
+      'after:content-[""]',
+      'after:absolute',
+      'after:w-3',
+      'after:h-3',
+      'after:bg-[#d02c2f]',
+      'after:rounded-xl',
+      'after:left-1'
+    ]),
+    onError: (error: any) => {
+      const formattedError =
+        error?.data?.non_field_errors ||
+        Object.keys(error?.data || {}).map(
+          (key) => `${key}: ${error?.data[key].join(', ')}`
+        );
+      // This would need to be handled by parent component
+      console.error('Checkout error:', formattedError);
+    }
+  };
+
+  const handleMainActionClick = () => {
+    onClearError();
+
+    if (inStock) {
+      onAddToCart();
+    } else {
+      onAddToStockAlert();
+    }
+  };
+
+  // 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 && (
+        <div className="mt-4 text-xs text-center text-error">
+          {productError}
+        </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}
+        className={clsx(
+          'w-full',
+          hasHoverStyles && 'add-to-cart-styled',
+          isAddToCartSectionSelected && 'ring-2 ring-blue-500 ring-offset-2'
+        )}
+        style={combinedButtonStyles}
+        data-testid="product-add-to-cart"
+      >
+        {isVariantLoading ? (
+          <Icon
+            name="spinner"
+            size={20}
+            className="animate-spin mr-4 fill-primary"
+          />
+        ) : inStock ? (
+          <span>{t('product.add_to_cart')}</span>
+        ) : (
+          <>
+            <Icon name="bell" size={20} className="mr-4" />
+            <span>{t('product.add_stock_alert')}</span>
+          </>
+        )}
+      </Button>
+
+      <PluginModule
+        component={Component.AkifastCheckoutButton}
+        props={{
+          ...checkoutProviderProps,
+          isPdp: true
+        }}
+      />
+
+      <PluginModule
+        component={Component.OneClickCheckoutButtons}
+        props={checkoutProviderProps}
+      />
+
+      <Modal
+        portalId="stock-alert-modal"
+        open={isModalOpen}
+        setOpen={onCloseModal}
+        showCloseButton={false}
+        className="w-5/6 md:max-w-md"
+      >
+        <div className="flex flex-col items-center justify-center gap-4 px-6 py-9">
+          <Icon name="bell" size={48} />
+          <h2 className="text-xl font-semibold">
+            {t('product.stock_alert.title')}
+          </h2>
+          <div className="max-w-40 text-xs text-center leading-4">
+            <p>{stockAlertResponseMessage}</p>
+          </div>
+          <Button
+            onClick={onCloseModal}
+            appearance="outlined"
+            className="font-semibold px-10 h-12"
+          >
+            {t('product.stock_alert.close_button')}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+};

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

@@ -0,0 +1,140 @@
+'use client';
+
+import React from 'react';
+import { Product } from '@akinon/next/types';
+import { Price } from '@theme/components';
+import {
+  useProductDetail,
+  PRODUCT_INFO_SECTION_ID
+} from '@theme/views/product-detail';
+import clsx from 'clsx';
+
+interface ProductInfoSectionProps {
+  product: Product;
+}
+
+export const ProductInfoSection: React.FC<ProductInfoSectionProps> = ({
+  product
+}) => {
+  const { isDesigner, selectedSectionId, productInfoStyles } =
+    useProductDetail();
+
+  const isSelected = selectedSectionId === PRODUCT_INFO_SECTION_ID;
+
+  // Handle designer click for section selection
+  const handleDesignerClick = () => {
+    if (isDesigner) {
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: PRODUCT_INFO_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  const infoStyles: Record<string, string> = {};
+
+  // Product name styles
+  if (productInfoStyles['name-font-size'])
+    infoStyles['--product-name-font-size'] =
+      productInfoStyles['name-font-size'];
+  if (productInfoStyles['name-font-weight'])
+    infoStyles['--product-name-font-weight'] =
+      productInfoStyles['name-font-weight'];
+  if (productInfoStyles['name-color'])
+    infoStyles['--product-name-color'] = productInfoStyles['name-color'];
+  if (productInfoStyles['name-line-height'])
+    infoStyles['--product-name-line-height'] =
+      productInfoStyles['name-line-height'];
+
+  // Price styles
+  if (productInfoStyles['price-font-size'])
+    infoStyles['--product-price-font-size'] =
+      productInfoStyles['price-font-size'];
+  if (productInfoStyles['price-font-weight'])
+    infoStyles['--product-price-font-weight'] =
+      productInfoStyles['price-font-weight'];
+  if (productInfoStyles['price-color'])
+    infoStyles['--product-price-color'] = productInfoStyles['price-color'];
+
+  // Retail price styles
+  if (productInfoStyles['retail-price-font-size'])
+    infoStyles['--product-retail-price-font-size'] =
+      productInfoStyles['retail-price-font-size'];
+  if (productInfoStyles['retail-price-font-weight'])
+    infoStyles['--product-retail-price-font-weight'] =
+      productInfoStyles['retail-price-font-weight'];
+  if (productInfoStyles['retail-price-color'])
+    infoStyles['--product-retail-price-color'] =
+      productInfoStyles['retail-price-color'];
+
+  // Description styles
+  if (productInfoStyles['description-font-size'])
+    infoStyles['--product-description-font-size'] =
+      productInfoStyles['description-font-size'];
+  if (productInfoStyles['description-font-weight'])
+    infoStyles['--product-description-font-weight'] =
+      productInfoStyles['description-font-weight'];
+  if (productInfoStyles['description-color'])
+    infoStyles['--product-description-color'] =
+      productInfoStyles['description-color'];
+  if (productInfoStyles['description-line-height'])
+    infoStyles['--product-description-line-height'] =
+      productInfoStyles['description-line-height'];
+
+  return (
+    <div
+      style={infoStyles}
+      className={clsx('relative', {
+        'ring-2 ring-blue-500 ring-offset-2': isDesigner && isSelected
+      })}
+      onClick={handleDesignerClick}
+    >
+      {/* Product Name */}
+      <h1
+        className="text-3xl text-black-750 mb-4"
+        style={{
+          fontSize: 'var(--product-name-font-size, 24px)',
+          fontWeight: 'var(--product-name-font-weight, 600)',
+          color: 'var(--product-name-color, #1f2937)',
+          lineHeight: 'var(--product-name-line-height, 1.2)'
+        }}
+        data-testid="product-name"
+      >
+        {product.name}
+      </h1>
+
+      {/* Price */}
+      <div
+        className="text-black-750 mb-4"
+        style={{
+          fontSize: 'var(--product-price-font-size, 28px)',
+          fontWeight: 'var(--product-price-font-weight, 700)',
+          color: 'var(--product-price-color, #030712)'
+        }}
+      >
+        <Price value={product.price} data-testid="price" />
+      </div>
+
+      {/* Description */}
+      {product.attributes?.description && (
+        <p
+          className="text-black-750 tracking-[0.64px] mb-4"
+          style={{
+            fontSize: 'var(--product-description-font-size, 14px)',
+            fontWeight: 'var(--product-description-font-weight, 400)',
+            color: 'var(--product-description-color, #6b7280)',
+            lineHeight: 'var(--product-description-line-height, 1.6)'
+          }}
+        >
+          {product.attributes.description}
+        </p>
+      )}
+    </div>
+  );
+};