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

package/app-template/src/views/product/custom-button-group.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-import { Icon, Button } from '@theme/components';
-
-type CustomButtonGroupProps = {
-  carouselState?: {
-    currentSlide: number;
-    totalItems: number;
-  };
-  previous?: () => void;
-  next?: () => void;
-  goToSlide?: (slide: number) => void;
-};
-
-export default function CustomButtonGroup({
-  carouselState,
-  previous,
-  next
-}: CustomButtonGroupProps) {
-  const currentSlide = carouselState?.currentSlide ?? 0;
-  const totalItems = carouselState?.totalItems ?? 0;
-
-  if (!totalItems) return null;
-
-  const isFirstSlide = currentSlide === 0;
-  const isLastSlide = currentSlide >= totalItems - 1;
-
-  const handlePrevClick = () => {
-    if (isFirstSlide) return;
-    previous?.();
-  };
-
-  const handleNextClick = () => {
-    if (isLastSlide) return;
-    next?.();
-  };
-
-  return (
-    <div className="relative mt-3 w-full">
-      <div className="flex items-center justify-center gap-2 text-[13px] font-medium text-gray-650">
-        <Button
-          type="button"
-          aria-label="Previous image"
-          aria-disabled={isFirstSlide}
-          disabled={isFirstSlide}
-          onClick={handlePrevClick}
-          className="bg-transparent text-primary border-none"
-        >
-          <Icon name="chevron-start" size={12} />
-        </Button>
-
-        <span>
-          {currentSlide + 1}/{totalItems}
-        </span>
-
-        <Button
-          type="button"
-          aria-label="Next image"
-          aria-disabled={isLastSlide}
-          disabled={isLastSlide}
-          onClick={handleNextClick}
-          className="bg-transparent text-primary border-none"
-        >
-          <Icon name="chevron-end" size={12} className="text-gray-900" />
-        </Button>
-      </div>
-    </div>
-  );
-}

package/app-template/src/views/product/favorites-button-section.tsx

@@ -1,69 +0,0 @@
-'use client';
-
-/**
- * Favorites Button Section Wrapper
- *
- * Wraps favorites button with Theme Editor styling support.
- * Applies CSS variables for customization via Theme Editor.
- */
-
-import { PropsWithChildren, CSSProperties, useMemo } from 'react';
-import clsx from 'clsx';
-import {
-  useProductDetail,
-  FAVORITES_BUTTON_SECTION_ID
-} from '@theme/views/product-detail';
-
-export default function FavoritesButtonSection({
-  children
-}: PropsWithChildren) {
-  const { isDesigner, selectedSectionId, favoritesButtonStyles } =
-    useProductDetail();
-
-  // Check if this section is selected in designer mode
-  const isSelected =
-    isDesigner && selectedSectionId === FAVORITES_BUTTON_SECTION_ID;
-
-  // Build CSS variables from favoritesButtonStyles
-  const cssVariables = useMemo((): CSSProperties => {
-    if (!favoritesButtonStyles) return {};
-
-    const vars: Record<string, string> = {};
-    Object.entries(favoritesButtonStyles).forEach(([key, value]) => {
-      if (value) {
-        vars[`--favorites-button-${key}`] = value;
-      }
-    });
-    return vars as CSSProperties;
-  }, [favoritesButtonStyles]);
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isDesigner) {
-      e.stopPropagation();
-      window.parent?.postMessage(
-        {
-          type: 'SELECT_SECTION',
-          data: {
-            placeholderId: 'product-detail',
-            sectionId: FAVORITES_BUTTON_SECTION_ID
-          }
-        },
-        '*'
-      );
-    }
-  };
-
-  return (
-    <div
-      className={clsx(
-        'favorites-button-section',
-        isDesigner && 'cursor-pointer',
-        isSelected && 'ring-2 ring-blue-500 ring-offset-2'
-      )}
-      style={cssVariables}
-      onClick={handleClick}
-    >
-      {children}
-    </div>
-  );
-}

package/app-template/src/views/product/find-in-store-section.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import React, { CSSProperties, useMemo } from 'react';
-import { useDesignerFeatures } from '@akinon/next/components/theme-editor/hooks/use-designer-features';
-import {
-  useProductDetail,
-  PRODUCT_DETAIL_PLACEHOLDER_ID,
-  FIND_IN_STORE_SECTION_ID
-} from '@theme/views/product-detail';
-
-interface FindInStoreSectionProps {
-  children: React.ReactNode;
-}
-
-export default function FindInStoreSection({
-  children
-}: FindInStoreSectionProps) {
-  const { isDesigner, selectedSectionId, findInStoreStyles } =
-    useProductDetail();
-
-  const { handleClick } = useDesignerFeatures({
-    sectionId: FIND_IN_STORE_SECTION_ID,
-    placeholderId: PRODUCT_DETAIL_PLACEHOLDER_ID,
-    blockId: '',
-    isDesigner
-  });
-
-  const isSelected = selectedSectionId === FIND_IN_STORE_SECTION_ID;
-
-  const cssVariables = useMemo((): CSSProperties => {
-    if (!findInStoreStyles) return {};
-
-    const vars: Record<string, string> = {};
-    Object.entries(findInStoreStyles).forEach(([key, value]) => {
-      if (value) {
-        vars[`--find-in-store-${key}`] = value;
-      }
-    });
-    return vars as CSSProperties;
-  }, [findInStoreStyles]);
-
-  if (!isDesigner) {
-    return <>{children}</>;
-  }
-
-  return (
-    <div
-      onClick={handleClick}
-      style={{
-        ...cssVariables,
-        cursor: 'pointer',
-        outline: isSelected ? '2px solid #3b82f6' : 'none',
-        outlineOffset: '2px'
-      }}
-      data-section-id={FIND_IN_STORE_SECTION_ID}
-    >
-      {children}
-    </div>
-  );
-}

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

@@ -1,140 +0,0 @@
-'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/quantity-section.tsx

@@ -1,73 +0,0 @@
-'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

@@ -1,10 +0,0 @@
-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>
-  );
-}