@pradip1995/theme-sahsha 3.1.0

package/src/slots/product/ProductActions/ProductHighlightsSection.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import { clx } from "@medusajs/ui"
+import { HttpTypes } from "@medusajs/types"
+import { formatMetadataValue, PRODUCT_METADATA_FIELDS } from "./product-metadata-fields"
+
+function getMetadataDisplay(
+  metadata: Record<string, unknown> | null | undefined,
+  key: string
+) {
+  const field = PRODUCT_METADATA_FIELDS.find((item) => item.key === key)
+  if (!field || !metadata) {
+    return null
+  }
+
+  return formatMetadataValue(metadata[key], field)
+}
+
+export function ProductHighlightsSection({ product }: { product: HttpTypes.StoreProduct }) {
+  return (
+    <div className="product-highlights flex flex-col gap-6 py-8 border-t border-[#e5e5e5]">
+      <div className="flex items-center gap-3">
+        <div className="product-highlights__accent" aria-hidden />
+        <h3 className="product-highlights__title">Product highlights</h3>
+      </div>
+      
+      <div className="grid grid-cols-2 gap-3 sm:gap-4 mt-2">
+        {(() => {
+          // Extract unique colors from variants/options instead of metadata
+          const colorOpt = product.options?.find((opt: HttpTypes.StoreProductOption) =>
+            opt.title?.toLowerCase().includes("color") ||
+            opt.title?.toLowerCase().includes("colour")
+          )
+          const variantColors =
+            colorOpt?.values?.map((v: { value?: string }) => v.value).filter(Boolean) || []
+          const uniqueColors = Array.from(new Set(variantColors))
+          const colorValue = uniqueColors.length > 0 ? uniqueColors.join(', ') : null
+
+          const highlights = [
+            { id: 'style', label: "Style", value: getMetadataDisplay(product.metadata, 'style'), icon: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
+            { id: 'fabric', label: "Fabric", value: getMetadataDisplay(product.metadata, 'fabric'), icon: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
+            { id: 'top_pattern', label: "Pattern", value: getMetadataDisplay(product.metadata, 'top_pattern'), icon: 'M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z' },
+            { id: 'top_length', label: "Length", value: getMetadataDisplay(product.metadata, 'top_length'), icon: 'M12 19V5M5 12l7-7 7 7' },
+            { id: 'color', label: "Available Colors", value: colorValue, icon: 'M12 2.25l-7.5 12.13a6.75 6.75 0 1015 0L12 2.25z' },
+          ].filter(h => h.value)
+
+          return highlights.map((highlight) => (
+            <div 
+              key={highlight.id} 
+              className={clx(
+                "product-highlights__card group flex items-center gap-3 sm:gap-4 p-3 sm:p-4",
+                highlight.id === 'color' && "col-span-2"
+              )}
+            >
+              <div className="flex-shrink-0 w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-surface-muted flex items-center justify-center group-hover:bg-purple-50 transition-all duration-300 shadow-inner overflow-hidden">
+                {highlight.id === 'color' ? (
+                  <svg width="28" height="28" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="transform group-hover:scale-110 transition-transform duration-300">
+                    {/* Palette Body */}
+                    <path d="M75 55c0 15-12 27-27 27S21 70 21 55s12-27 27-27 27 12 27 27z" fill="#E8B088" stroke="#333" strokeWidth="3" />
+                    
+                    {/* Color Dots */}
+                    <circle cx="40" cy="45" r="5" fill="#FF4D4D" stroke="#333" strokeWidth="1.5" /> {/* Red */}
+                    <circle cx="56" cy="46" r="5" fill="#2ECC71" stroke="#333" strokeWidth="1.5" /> {/* Green */}
+                    <circle cx="42" cy="62" r="5" fill="#3498DB" stroke="#333" strokeWidth="1.5" /> {/* Blue */}
+                    <circle cx="58" cy="64" r="5" fill="#F06292" stroke="#333" strokeWidth="1.5" /> {/* Pink */}
+                    
+                    {/* Brush */}
+                    <g transform="rotate(25 70 40)">
+                      <rect x="68" y="15" width="6" height="35" rx="3" fill="#F39C12" stroke="#333" strokeWidth="2" /> {/* Handle */}
+                      <path d="M68 12c0-4 3-8 3-8s3 4 3 8H68z" fill="#AED6F1" stroke="#333" strokeWidth="2" /> {/* Tip */}
+                      <rect x="68" y="45" width="6" height="4" fill="#BDC3C7" stroke="#333" strokeWidth="1.5" /> {/* Ferrule */}
+                    </g>
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" className="w-[18px] h-[18px] sm:w-5 sm:h-5 text-brand-accent">
+                    <path d={highlight.icon} />
+                  </svg>
+                )}
+              </div>
+              <div className="flex flex-col min-w-0 flex-1">
+                <span className="text-[9px] sm:text-[10px] font-black text-gray-800 uppercase tracking-widest mb-0.5 sm:mb-1">{highlight.label}</span>
+                <div className="flex items-center gap-2">
+                  {highlight.id === 'color' ? (
+                    <div className="flex flex-wrap gap-x-4 gap-y-1.5">
+                      {String(highlight.value || '').split(/[,\s]+/).map((color, i) => {
+                        const trimmedColor = color.trim().toLowerCase()
+                        if (!trimmedColor) return null
+                        return (
+                          <div key={i} className="flex items-center gap-2">
+                            <div 
+                              className="w-3.5 h-3.5 rounded-full border border-gray-100 shadow-sm"
+                              style={{ backgroundColor: trimmedColor }}
+                            />
+                            <span className="text-sm text-gray-800 font-semibold capitalize leading-none tracking-tight">{trimmedColor}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ) : (
+                    <span className="text-xs sm:text-sm text-gray-800 font-semibold tracking-tight truncate">
+                      {String(highlight.value || '')}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        })()}
+      </div>
+    </div>
+  )
+}

package/src/slots/product/ProductActions/ProductOptionsSection.tsx

@@ -0,0 +1,215 @@
+"use client"
+
+import Image from "next/image"
+import { HttpTypes } from "@medusajs/types"
+import OptionSelect from "@modules/products/components/product-actions/option-select"
+import type { ProductOptions } from "@core/domain/product/variant-selection"
+
+function getUniqueOptionValues(option: HttpTypes.StoreProductOption): string[] {
+  const values =
+    option.values?.map((v) => v.value).filter((v): v is string => Boolean(v)) ?? []
+  return Array.from(new Set(values))
+}
+
+function shouldShowOptionSection(
+  option: HttpTypes.StoreProductOption | undefined,
+  colorVariants: HttpTypes.StoreProductVariant[] = []
+): boolean {
+  if (!option) return false
+
+  const isColor =
+    option.title?.toLowerCase().includes("color") ||
+    option.title?.toLowerCase().includes("colour")
+
+  if (isColor && colorVariants.length > 1) {
+    return true
+  }
+
+  const uniqueValues = getUniqueOptionValues(option)
+  if (uniqueValues.length <= 1) {
+    return false
+  }
+
+  const title = (option.title || "").toLowerCase()
+  if (title.includes("default")) {
+    return false
+  }
+
+  return true
+}
+
+type ProductOptionsSectionProps = {
+  product: HttpTypes.StoreProduct
+  disabled?: boolean
+  isAdding: boolean
+  options: ProductOptions
+  setOptionValue: (optionId: string, value: string) => void
+  setColorValue: (optionId: string, value: string) => void
+  validationErrors: Record<string, string>
+  colorOption?: HttpTypes.StoreProductOption
+  sizeOption?: HttpTypes.StoreProductOption
+  otherOptions: HttpTypes.StoreProductOption[]
+  colorVariants: HttpTypes.StoreProductVariant[]
+  selectedColorValue?: string
+  onOpenSizeChart: () => void
+}
+
+export function ProductOptionsSection({
+  product,
+  disabled,
+  isAdding,
+  options,
+  setOptionValue,
+  setColorValue,
+  validationErrors,
+  colorOption,
+  sizeOption,
+  otherOptions,
+  colorVariants,
+  selectedColorValue,
+  onOpenSizeChart,
+}: ProductOptionsSectionProps) {
+  return (
+    <>
+      {shouldShowOptionSection(sizeOption) && sizeOption && (
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <h3 className="font-display text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+                Select Size
+              </h3>
+              {validationErrors[sizeOption.id] && (
+                <span className="text-[10px] text-red-600 font-black uppercase tracking-wider animate-pulse border-l-2 border-red-600 pl-2">
+                  Please Select {String(sizeOption.title || "")}
+                </span>
+              )}
+            </div>
+            <button
+              type="button"
+              onClick={onOpenSizeChart}
+              className="product-size-chart-link flex items-center gap-1.5 text-xs sm:text-sm font-medium hover:opacity-80"
+            >
+              <Image
+                src="/Size Chart.svg"
+                alt=""
+                width={16}
+                height={16}
+                className="product-size-chart-link__icon"
+                aria-hidden
+              />
+              Size Chart
+            </button>
+          </div>
+          <OptionSelect
+            option={sizeOption}
+            current={options[sizeOption.id]}
+            updateOption={setOptionValue}
+            title={sizeOption.title ?? ""}
+            data-testid="product-options"
+            disabled={!!disabled || isAdding}
+            error={!!validationErrors[sizeOption.id]}
+          />
+        </div>
+      )}
+
+      {shouldShowOptionSection(colorOption, colorVariants) && colorOption && (
+        <div className="product-color-variants flex flex-col gap-3">
+          <div className="flex items-center gap-2">
+            <h3 className="font-display text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+              {colorVariants.length > 0
+                ? "More Colors"
+                : `Select ${colorOption.title}`}
+            </h3>
+            {validationErrors[colorOption.id] && (
+              <span className="text-[10px] text-red-600 font-black uppercase tracking-wider animate-pulse border-l-2 border-red-600 pl-2">
+                Please Select {String(colorOption.title || "")}
+              </span>
+            )}
+          </div>
+          {colorVariants.length > 0 ? (
+            <div className="product-color-variants__list flex gap-2.5 sm:gap-3 overflow-x-auto pb-1">
+              {colorVariants.map((variant) => {
+                const variantImage =
+                  (variant.metadata?.image as string) ||
+                  variant.thumbnail ||
+                  variant.images?.[0]?.url ||
+                  product.thumbnail
+                const variantColorValue = variant.options?.find(
+                  (opt: HttpTypes.StoreProductOptionValue) =>
+                    opt.option_id === colorOption.id
+                )?.value
+                const isSelected = variantColorValue === selectedColorValue
+
+                return (
+                  <button
+                    key={variant.id}
+                    type="button"
+                    className={`product-color-variants__card relative flex-shrink-0 overflow-hidden border ${
+                      isSelected
+                        ? "border-brand-accent ring-1 ring-brand-accent"
+                        : "border-[var(--color-header-border)] hover:border-brand-accent-light"
+                    }`}
+                    onClick={() => {
+                      if (colorOption && variantColorValue) {
+                        setColorValue(colorOption.id, variantColorValue)
+                      }
+                    }}
+                    title={variantColorValue}
+                  >
+                    {variantImage && (
+                      <Image
+                        src={variantImage}
+                        alt={`Color variant: ${variantColorValue || "Unknown"}`}
+                        fill
+                        sizes="(max-width: 640px) 72px, 88px"
+                        className="object-cover"
+                      />
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+          ) : (
+            <OptionSelect
+              option={colorOption}
+              current={options[colorOption.id]}
+              updateOption={setOptionValue}
+              title={colorOption.title ?? ""}
+              data-testid="product-options"
+              disabled={!!disabled || isAdding}
+              error={!!validationErrors[colorOption.id]}
+            />
+          )}
+        </div>
+      )}
+
+      {otherOptions
+        .filter((option) => shouldShowOptionSection(option))
+        .sort((a, b) => (a.title || "").localeCompare(b.title || ""))
+        .map((option) => (
+          <div key={option.id} className="flex flex-col gap-3">
+            <div className="flex items-center gap-2">
+              <h3 className="text-[11px] font-semibold text-heading uppercase tracking-[var(--letter-spacing-nav)]">
+                Select {String(option.title || "")}
+              </h3>
+              {validationErrors[option.id] && (
+                <span className="text-[10px] text-red-600 font-black uppercase tracking-wider animate-pulse border-l-2 border-red-600 pl-2">
+                  Please Select {String(option.title || "")}
+                </span>
+              )}
+            </div>
+            <OptionSelect
+              option={option}
+              current={options[option.id]}
+              updateOption={setOptionValue}
+              title={option.title ?? ""}
+              data-testid="product-options"
+              disabled={!!disabled || isAdding}
+              error={!!validationErrors[option.id]}
+            />
+          </div>
+        ))}
+
+    </>
+  )
+}

package/src/slots/product/ProductActions/ProductPriceSection.tsx

@@ -0,0 +1,53 @@
+import {
+  formatDisplayPrice,
+  formatINRPrice,
+  type VariantPrice,
+} from "@core/domain/product/pricing"
+
+type ProductPriceSectionProps = {
+  displayPrice: VariantPrice
+  quantityInCart: number
+}
+
+export function ProductPriceSection({
+  displayPrice,
+  quantityInCart,
+}: ProductPriceSectionProps) {
+  const originalPrice = displayPrice?.original_price_number
+  const currentPrice = displayPrice?.calculated_price_number
+  const discountPercentage =
+    originalPrice && currentPrice && originalPrice > currentPrice
+      ? Math.round(((originalPrice - currentPrice) / originalPrice) * 100)
+      : null
+
+  return (
+    <div className="product-price">
+      <div className="product-price__row">
+        <div className="product-price__main">
+          <span className="product-price__current">
+            {formatDisplayPrice(displayPrice, currentPrice)}
+          </span>
+          {originalPrice && currentPrice && originalPrice > currentPrice && (
+            <>
+              <span className="product-price__mrp">
+                MRP {formatINRPrice(originalPrice)}
+              </span>
+              {discountPercentage !== null && (
+                <span className="product-price__discount">
+                  ({discountPercentage}% OFF)
+                </span>
+              )}
+            </>
+          )}
+        </div>
+
+        {quantityInCart > 0 && (
+          <span className="product-price__in-bag">
+            {quantityInCart} in bag
+          </span>
+        )}
+      </div>
+      <p className="product-price__tax">inclusive of all taxes</p>
+    </div>
+  )
+}

package/src/slots/product/ProductActions/ProductTrustSection.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import Image from "next/image"
+import PincodeChecker from "@modules/cart/components/pincode-checker"
+
+type ProductTrustSectionProps = {
+  selectedVariantId?: string
+  onOpenFeature: (feature: string) => void
+}
+
+export function ProductTrustSection({ selectedVariantId, onOpenFeature }: ProductTrustSectionProps) {
+  return (
+    <>
+    <div className="product-trust-bar flex items-center justify-between py-3 px-4 bg-[#f8f4ef] border border-[#e5e5e5] mt-2 mb-2">
+      <div className="flex items-center gap-3 sm:gap-4">
+        <Image src="/Item.svg" alt="Mastercard" width={40} height={28} className="h-6 sm:h-7 w-auto grayscale-[0.2]" />
+        <Image src="/Item (1).svg" alt="Amex" width={40} height={28} className="h-6 sm:h-7 w-auto grayscale-[0.2]" />
+        <Image src="/Item (2).svg" alt="Diners" width={40} height={28} className="h-7 sm:h-7 w-auto grayscale-[0.2]" />
+        <Image src="/visa.svg" alt="Visa" width={40} height={28} className="h-5 sm:h-6 w-auto grayscale-[0.2]" />
+      </div>
+      <div className="flex items-center gap-1.5 sm:gap-2 ml-2 sm:ml-0">
+         <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#156229" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+           <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+           <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+         </svg>
+         <span className="text-[9px] sm:text-[11px] font-bold text-gray-700 uppercase tracking-wider whitespace-nowrap">Secure Payments</span>
+      </div>
+    </div>
+
+    {/* Pincode Checker Section */}
+    <div className="mt-0.5 sm:-mt-1.5 mb-0">
+      <PincodeChecker variantId={selectedVariantId} />
+    </div>
+
+    {/* Service Features Section */}
+    <div className="product-trust-features flex flex-row overflow-x-auto no-scrollbar py-4 border-t border-[#e5e5e5] gap-4 min-[500px]:gap-0 min-[500px]:justify-between min-[500px]:overflow-visible">
+      {/* 7 Days Easy Return */}
+      <div className="flex flex-col items-center gap-2 flex-shrink-0 min-w-[120px] min-[500px]:flex-1 min-[500px]:min-w-0 group">
+        <div className="w-8 h-8 flex items-center justify-center">
+          <Image src="/Return.svg" alt="Return" width={28} height={26} />
+        </div>
+        <div className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenFeature('return')}>
+          <span className="text-xs text-gray-800 font-medium text-center whitespace-nowrap leading-none">7 Days Easy Return</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" className="product-trust-features__chevron">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+
+      {/* Separator */}
+      <div className="hidden min-[500px]:block w-px h-12 bg-gray-200 flex-shrink-0"></div>
+
+      {/* Fast Delivery */}
+      <div className="flex flex-col items-center gap-2 flex-shrink-0 min-w-[120px] min-[500px]:flex-1 min-[500px]:min-w-0 group">
+        <div className="w-8 h-8 flex items-center justify-center">
+          <Image src="/delivery.svg" alt="Delivery" width={30} height={18} />
+        </div>
+        <div className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenFeature('delivery')}>
+          <span className="text-xs text-gray-800 font-medium text-center whitespace-nowrap leading-none">Fast Delivery</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" className="product-trust-features__chevron">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+
+      {/* Separator */}
+      <div className="hidden min-[500px]:block w-px h-12 bg-gray-200 flex-shrink-0"></div>
+
+      {/* Cash On Delivery Available */}
+      <div className="flex flex-col items-center gap-2 flex-shrink-0 min-w-[120px] min-[500px]:flex-1 min-[500px]:min-w-0 group">
+        <div className="w-8 h-8 flex items-center justify-center">
+          <Image src="/Cod.svg" alt="COD" width={30} height={18} />
+        </div>
+        <div className="flex items-center gap-1.5 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => onOpenFeature('cod')}>
+          <span className="text-xs text-gray-800 font-medium text-center whitespace-nowrap leading-none">Cash On Delivery Available</span>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" className="product-trust-features__chevron">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </div>
+      </div>
+    </div>
+    </>
+  )
+}

package/src/slots/product/ProductActions/SizeChartPanel.tsx

@@ -0,0 +1,93 @@
+import {
+  SIZE_CHART_MEASURE_TIPS,
+  SIZE_CHART_SECTIONS,
+  type SizeChartSection,
+} from "./size-chart-data"
+
+function SizeChartTable({ section }: { section: SizeChartSection }) {
+  return (
+    <div className="size-chart__table-wrap">
+      <table className="size-chart__table">
+        <thead>
+          <tr>
+            {section.columns.map((column) => (
+              <th
+                key={column.key}
+                className={column.align === "center" ? "text-center" : undefined}
+              >
+                {column.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {section.rows.map((row, index) => (
+            <tr key={`${section.id}-${index}`}>
+              {section.columns.map((column) => (
+                <td
+                  key={column.key}
+                  className={column.align === "center" ? "text-center" : undefined}
+                >
+                  {row[column.key]}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export function SizeChartPanel() {
+  return (
+    <div className="size-chart">
+      <div className="size-chart__tip">
+        <div className="size-chart__tip-icon" aria-hidden>
+          💡
+        </div>
+        <div>
+          <h4 className="size-chart__tip-title">Pro Tip</h4>
+          <p className="size-chart__tip-text">
+            Measure yourself in inches before ordering. If you are between sizes,
+            choose the larger size for a comfortable ethnic fit. For saree blouses,
+            match your bust measurement to the blouse size chart.
+          </p>
+        </div>
+      </div>
+
+      <div className="size-chart__measure">
+        <h4 className="size-chart__section-title">How to measure</h4>
+        <ul className="size-chart__measure-list">
+          {SIZE_CHART_MEASURE_TIPS.map((tip) => (
+            <li key={tip.title}>
+              <strong>{tip.title}:</strong> {tip.text}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className="size-chart__sections">
+        {SIZE_CHART_SECTIONS.map((section) => (
+          <section key={section.id} className="size-chart__section">
+            <div className="size-chart__section-head">
+              <div className="size-chart__section-icon" aria-hidden>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <div>
+                <h4 className="size-chart__section-title">{section.title}</h4>
+                {section.subtitle && (
+                  <p className="size-chart__section-subtitle">{section.subtitle}</p>
+                )}
+              </div>
+            </div>
+            <SizeChartTable section={section} />
+          </section>
+        ))}
+      </div>
+    </div>
+  )
+}