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

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>
+  );
+};

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

@@ -1,24 +1,64 @@
 'use client';
 
-import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
-import { PriceWrapper } from '@theme/views/product';
 import { ProductPageProps } from './layout';
-import MiscButtons from './misc-buttons';
 import { pushProductViewed } from '@theme/utils/gtm';
 import { useSession } from 'next-auth/react';
 import { isVariantSelectionComplete } from '../../utils/variant-validation';
 import { useProductCart } from '../../hooks/use-product-cart';
 import { useStockAlert } from '../../hooks/use-stock-alert';
-import { ProductVariants } from './product-variants';
 import { ProductActions } from './product-actions';
-import { ProductShare } from './product-share';
+import { QuantitySection } from './quantity-section';
+import { VariantsSection } from './variants-section';
+import { ProductInfoSection } from './product-info-section';
+import ProductShare from './product-share';
+import MiscButtons from './misc-buttons';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import {
+  ProductDetailRegistrar,
+  AddToCartStyles,
+  QuantityStyles,
+  QuantityProperties,
+  VariantsStyles,
+  ProductInfoStyles,
+  ShareStyles,
+  ShareProperties,
+  AccordionStyles,
+  FavoritesButtonStyles,
+  FavoritesButtonProperties,
+  FindInStoreStyles,
+  FindInStoreProperties
+} from '@theme/views/product-detail';
+import { AccordionWrapper } from '@theme/views/product';
+
+export interface ProductDetailSettings {
+  addToCartStyles?: AddToCartStyles;
+  quantityStyles?: QuantityStyles;
+  quantityProperties?: QuantityProperties;
+  variantsStyles?: VariantsStyles;
+  productInfoStyles?: ProductInfoStyles;
+  shareStyles?: ShareStyles;
+  shareProperties?: ShareProperties;
+  accordionStyles?: AccordionStyles;
+  favoritesButtonStyles?: FavoritesButtonStyles;
+  favoritesButtonProperties?: FavoritesButtonProperties;
+  findInStoreStyles?: FindInStoreStyles;
+  findInStoreProperties?: FindInStoreProperties;
+}
 
-export default function ProductInfo({ data }: ProductPageProps) {
+interface ProductInfoProps extends ProductPageProps {
+  productDetailSettings?: ProductDetailSettings;
+  deliveryReturn?: any;
+}
+
+export default function ProductInfo({
+  data,
+  productDetailSettings,
+  deliveryReturn
+}: ProductInfoProps) {
   const { data: session } = useSession();
   const [isVariantLoading, setIsVariantLoading] = useState(false);
-
+  const [quantity, setQuantity] = useState(1);
   const inStock = data.selected_variant !== null || data.product.in_stock;
 
   const {
@@ -72,30 +112,26 @@ export default function ProductInfo({ data }: ProductPageProps) {
   };
 
   return (
-    <>
-      <div
-        className={clsx(
-          'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
-          'sm:relative sm:flex sm:items-center sm:mt-5 sm:border-none'
-        )}
-      >
-        <PriceWrapper
-          price={data.product.price}
-          retailPrice={data.product.retail_price}
-        />
-      </div>
-
-      <ProductVariants
+    <ProductDetailRegistrar initialSettings={productDetailSettings}>
+      <ProductInfoSection product={data.product} />
+
+      <VariantsSection
         variants={data.variants}
         onVariantChange={handleVariantChange}
       />
 
+      <QuantitySection
+        quantity={quantity}
+        onChange={setQuantity}
+        disabled={!inStock || isVariantLoading}
+      />
+
       <ProductActions
         product={data.product}
         variants={data.variants}
         inStock={inStock}
         isVariantLoading={isVariantLoading}
-        onAddToCart={addProductToCart}
+        onAddToCart={() => addProductToCart(quantity)}
         onAddToStockAlert={addProductToStockAlertList}
         onClearError={clearProductError}
         isAddToCartLoading={isAddToCartLoading}
@@ -106,13 +142,7 @@ export default function ProductInfo({ data }: ProductPageProps) {
         onCloseModal={closeModal}
       />
 
-      <PluginModule
-        component={Component.VirtualTryOnPlugin}
-        props={{
-          product: data.product,
-          className: 'hidden sm:flex'
-        }}
-      />
+      <ProductShare productName={data.product.name} />
 
       <MiscButtons
         productName={data.product.name}
@@ -120,7 +150,15 @@ export default function ProductInfo({ data }: ProductPageProps) {
         variants={data.variants}
       />
 
-      <ProductShare productName={data.product.name} className="my-2 sm:mb-4" />
-    </>
+      <AccordionWrapper data={data} deliveryReturn={deliveryReturn} />
+
+      <PluginModule
+        component={Component.VirtualTryOnPlugin}
+        props={{
+          product: data.product,
+          className: 'hidden sm:flex'
+        }}
+      />
+    </ProductDetailRegistrar>
   );
 }

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

@@ -1,5 +1,7 @@
+'use client';
+
 import React, { useState, useEffect } from 'react';
-import Share from '@theme/views/share';
+import { ShareSection } from './share-section';
 import { useLocalization } from '@akinon/next/hooks';
 
 interface ProductShareProps {
@@ -7,7 +9,7 @@ interface ProductShareProps {
   className?: string;
 }
 
-export const ProductShare: React.FC<ProductShareProps> = ({
+const ProductShare: React.FC<ProductShareProps> = ({
   productName,
   className
 }) => {
@@ -28,29 +30,32 @@ export const ProductShare: React.FC<ProductShareProps> = ({
         currentUrl
       )}`,
       iconName: 'facebook' as const,
-      iconSize: 22
+      iconSize: 16
     },
     {
       href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
         currentUrl
       )}`,
       iconName: 'twitter' as const,
-      iconSize: 22
+      iconSize: 16
     },
     {
       href: `https://api.whatsapp.com/send?text=${productName}%20${encodeURIComponent(
         currentUrl
       )}`,
       iconName: 'whatsapp' as const,
-      iconSize: 22
+      iconSize: 16
     }
   ];
 
   return (
-    <Share
-      className={className}
+    <ShareSection
+      productName={productName}
       buttonText={t('product.share')}
       items={shareItems}
+      className={className}
     />
   );
-};
+};
+
+export default ProductShare;

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

@@ -17,10 +17,10 @@ export const ProductVariants: React.FC<ProductVariantsProps> = ({
         <Variant
           key={variant.attribute_key}
           {...variant}
-          className="items-center mt-8"
+          className="mb-4"
           onChange={onVariantChange}
         />
       ))}
     </div>
   );
-};
+};

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

@@ -0,0 +1,73 @@
+'use client';
+
+import { useLocalization } from '@akinon/next/hooks';
+import { QuantitySelector } from '@theme/components';
+import {
+  useProductDetail,
+  QUANTITY_SECTION_ID
+} from '@theme/views/product-detail';
+import clsx from 'clsx';
+
+interface QuantitySectionProps {
+  quantity: number;
+  onChange: (quantity: number) => void;
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+}
+
+/**
+ * QuantitySection Component
+ *
+ * Wraps QuantitySelector with Theme Editor integration.
+ * Allows customization of display type (buttons/dropdown) and styles.
+ */
+export function QuantitySection({
+  quantity,
+  onChange,
+  disabled = false,
+  min = 1,
+  max = 999
+}: QuantitySectionProps) {
+  const { t } = useLocalization();
+  const { isDesigner, selectedSectionId, quantityStyles, quantityProperties } =
+    useProductDetail();
+
+  const isSelected = selectedSectionId === QUANTITY_SECTION_ID;
+
+  // Handle designer click for section selection
+  const handleDesignerClick = () => {
+    if (isDesigner) {
+      window.parent?.postMessage(
+        {
+          type: 'SELECT_SECTION',
+          data: {
+            placeholderId: 'product-detail',
+            sectionId: QUANTITY_SECTION_ID
+          }
+        },
+        '*'
+      );
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2.5 mb-4">
+      <span className="text-[13px] text-black-750 tracking-[0.39px]">
+        {t('product.quantity')}
+      </span>
+      <QuantitySelector
+        quantity={quantity}
+        onChange={onChange}
+        disabled={disabled}
+        min={min}
+        max={max}
+        displayType={quantityProperties.displayType}
+        maxDropdownOptions={quantityProperties.maxDropdownOptions}
+        styles={quantityStyles}
+        isSelected={isSelected}
+        onDesignerClick={isDesigner ? handleDesignerClick : undefined}
+      />
+    </div>
+  );
+}

package/app-template/src/views/product/sale-tag.tsx

@@ -0,0 +1,10 @@
+import { useLocalization } from '@akinon/next/hooks';
+
+export function SaleTag() {
+  const { t } = useLocalization();
+  return (
+    <span className="inline-flex items-center px-3 py-1 rounded-full bg-[#014D4E] text-white text-[13px] tracking-[0.39px]">
+      {t('common.sale')}
+    </span>
+  );
+}