@pradip1995/theme-sahsha 3.1.0

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

@@ -0,0 +1,156 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState } from "react"
+import { useParams } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import { useProductVariant } from "@core/hooks/use-product-variant"
+import { useProductActions } from "@core/hooks/use-product-actions"
+import { getDisplayPrice } from "@core/domain/product/pricing"
+import LoginPopup from "@modules/common/components/login-popup"
+import { ProductPriceSection } from "./ProductPriceSection"
+import { ProductOptionsSection } from "./ProductOptionsSection"
+import { ProductCTASection } from "./ProductCTASection"
+import { ProductTrustSection } from "./ProductTrustSection"
+import { ProductFeaturePanel } from "./ProductFeaturePanel"
+import { ProductDetailsSection } from "./ProductDetailsSection"
+
+type ProductActionsProps = {
+  product: HttpTypes.StoreProduct
+  region?: HttpTypes.StoreRegion
+  disabled?: boolean
+  cart?: HttpTypes.StoreCart | null
+}
+
+export default function ProductActions({
+  product,
+  region,
+  disabled,
+  cart,
+}: ProductActionsProps) {
+  const countryCode = useParams().countryCode as string
+  const actionsRef = useRef<HTMLDivElement>(null)
+
+  const {
+    options,
+    setOptionValue,
+    setColorValue,
+    selectedVariant,
+    isValidVariant,
+    validationErrors,
+    validateOptions,
+    colorOption,
+    sizeOption,
+    otherOptions,
+    colorVariants,
+    selectedColorValue,
+  } = useProductVariant({ product })
+
+  const displayPrice = useMemo(
+    () => getDisplayPrice(product, selectedVariant),
+    [product, selectedVariant]
+  )
+
+  const {
+    quantity,
+    setQuantity,
+    isAdding,
+    isBuyingNow,
+    variantInCart,
+    quantityInCart,
+    inStock,
+    inventoryLimit,
+    handleAddToCart,
+    handleBuyNow,
+    handleIncreaseQuantity,
+    handleDecreaseQuantity,
+  } = useProductActions({
+    product,
+    region,
+    cart,
+    selectedVariant,
+    options,
+    isValidVariant,
+    displayPrice,
+    validateOptions,
+  })
+
+  const [activeFeature, setActiveFeature] = useState<string | null>(null)
+  const [showLoginPopup, setShowLoginPopup] = useState(false)
+  const [showNotifyMessage, setShowNotifyMessage] = useState(false)
+
+  useEffect(() => {
+    setShowNotifyMessage(false)
+  }, [options])
+
+  return (
+    <>
+      <div
+        className="flex flex-col gap-4 sm:gap-5 w-full"
+        ref={actionsRef}
+      >
+        {displayPrice && (
+          <ProductPriceSection
+            displayPrice={displayPrice}
+            quantityInCart={quantityInCart}
+          />
+        )}
+
+        <ProductOptionsSection
+          product={product}
+          disabled={disabled}
+          isAdding={isAdding}
+          options={options}
+          setOptionValue={setOptionValue}
+          setColorValue={setColorValue}
+          validationErrors={validationErrors}
+          colorOption={colorOption}
+          sizeOption={sizeOption}
+          otherOptions={otherOptions}
+          colorVariants={colorVariants}
+          selectedColorValue={selectedColorValue}
+          onOpenSizeChart={() => setActiveFeature("size_chart")}
+        />
+
+        <ProductCTASection
+          product={product}
+          selectedVariant={selectedVariant}
+          options={options}
+          isValidVariant={isValidVariant}
+          disabled={disabled}
+          inStock={inStock}
+          inventoryLimit={inventoryLimit}
+          quantity={quantity}
+          setQuantity={setQuantity}
+          quantityInCart={quantityInCart}
+          variantInCart={variantInCart}
+          isAdding={isAdding}
+          isBuyingNow={isBuyingNow}
+          showNotifyMessage={showNotifyMessage}
+          setShowNotifyMessage={setShowNotifyMessage}
+          handleAddToCart={handleAddToCart}
+          handleBuyNow={handleBuyNow}
+          handleIncreaseQuantity={handleIncreaseQuantity}
+          handleDecreaseQuantity={handleDecreaseQuantity}
+        />
+
+        <ProductTrustSection
+          selectedVariantId={selectedVariant?.id}
+          onOpenFeature={setActiveFeature}
+        />
+
+        <ProductFeaturePanel
+          activeFeature={activeFeature}
+          onClose={() => setActiveFeature(null)}
+        />
+
+        <ProductDetailsSection product={product} />
+      </div>
+
+      <LoginPopup
+        isOpen={showLoginPopup}
+        onClose={() => setShowLoginPopup(false)}
+        countryCode={countryCode}
+      />
+    </>
+  )
+}

package/src/slots/product/ProductActions/product-metadata-fields.ts

@@ -0,0 +1,503 @@
+type ProductMetadataField = {
+  key: string
+  label: string
+  options?: Record<string, string>
+}
+
+/** Sahsha product styles */
+export const SAHSHA_STYLE_OPTIONS: Record<string, string> = {
+  coords: "Coords",
+  straight_kurti_suit_pant: "Straight Kurti Suit Pant",
+  straight_kurti_suit_plazzo: "Straight Kurti Suit PLAZZO",
+  a_line_cut: "A line Cut",
+  anarkali_suit_with_duppatta: "Anarkali Suit with Duppatta",
+  indo_western: "Indo Western",
+  gown: "Gown",
+  drape_sarees: "Drape Saares",
+  pakistani_suits: "Pakistani Suits",
+}
+
+const STYLE_NARRATIVE_LABELS: Record<
+  string,
+  { top: string; bottom: string | null }
+> = {
+  coords: { top: "Top design", bottom: "Bottom design" },
+  straight_kurti_suit_pant: { top: "Kurti design", bottom: "Pant design" },
+  straight_kurti_suit_plazzo: { top: "Kurti design", bottom: "Plazzo design" },
+  a_line_cut: { top: "Kurti design", bottom: "Bottom design" },
+  anarkali_suit_with_duppatta: {
+    top: "Anarkali design",
+    bottom: "Dupatta & bottom design",
+  },
+  indo_western: { top: "Indo Western design", bottom: null },
+  gown: { top: "Gown design", bottom: null },
+  drape_sarees: { top: "Saree design", bottom: null },
+  pakistani_suits: { top: "Suit design", bottom: "Bottom design" },
+}
+
+export const PRODUCT_METADATA_FIELDS: ProductMetadataField[] = [
+  { key: "style", label: "Style", options: SAHSHA_STYLE_OPTIONS },
+  {
+    key: "sleeve_length",
+    label: "Sleeve Length",
+    options: {
+      sleeveless: "Sleeveless",
+      cap_sleeve: "Cap Sleeve",
+      short_sleeve: "Short Sleeve",
+      half_sleeve: "Half Sleeve",
+      three_quarter_sleeves: "Three-Quarter Sleeves",
+      full_sleeve: "Full Sleeve",
+    },
+  },
+  {
+    key: "top_type",
+    label: "Top Type",
+    options: {
+      kurta: "Kurta",
+      kurti: "Kurti",
+      coord_top: "Coord Top",
+      gown: "Gown",
+      anarkali: "Anarkali",
+      indo_western: "Indo Western",
+      saree: "Saree",
+      dupatta: "Dupatta",
+    },
+  },
+  {
+    key: "top_pattern",
+    label: "Top Pattern",
+    options: {
+      solid: "Solid",
+      printed: "Printed",
+      embroidered: "Embroidered",
+      woven_design: "Woven Design",
+      floral: "Floral",
+      geometric: "Geometric",
+    },
+  },
+  {
+    key: "top_hemline",
+    label: "Top Hemline",
+    options: {
+      straight: "Straight",
+      flared: "Flared",
+      asymmetric: "Asymmetric",
+      high_low: "High-Low",
+    },
+  },
+  {
+    key: "neck",
+    label: "Neck",
+    options: {
+      round_neck: "Round Neck",
+      v_neck: "V Neck",
+      boat_neck: "Boat Neck",
+      square_neck: "Square Neck",
+      mandarin_collar: "Mandarin Collar",
+      off_shoulder: "Off Shoulder",
+    },
+  },
+  {
+    key: "bottom_closure",
+    label: "Bottom Closure",
+    options: {
+      slip_on: "Slip-On",
+      zip: "Zip",
+      button: "Button",
+      drawstring: "Drawstring",
+    },
+  },
+  {
+    key: "ornamentation",
+    label: "Ornamentation",
+    options: {
+      thread_work: "Thread Work",
+      zari_work: "Zari Work",
+      sequins: "Sequins",
+      mirror_work: "Mirror Work",
+      stone_work: "Stone Work",
+      plain: "Plain",
+      printed: "Printed",
+    },
+  },
+  {
+    key: "weave_type",
+    label: "Weave Type",
+    options: {
+      machine_weave: "Machine Weave",
+      handloom: "Handloom",
+      power_loom: "Power Loom",
+    },
+  },
+  {
+    key: "top_shape",
+    label: "Top Shape",
+    options: {
+      straight: "Straight",
+      a_line: "A-Line",
+      anarkali: "Anarkali",
+      flared: "Flared",
+      empire: "Empire",
+    },
+  },
+  {
+    key: "bottom_type",
+    label: "Bottom Type",
+    options: {
+      trousers: "Trousers",
+      palazzo: "Palazzo",
+      pants: "Pants",
+      sharara: "Sharara",
+      lehenga: "Lehenga",
+      skirt: "Skirt",
+    },
+  },
+  {
+    key: "top_design_styling",
+    label: "Top Design Styling",
+    options: {
+      regular: "Regular",
+      layered: "Layered",
+      peplum: "Peplum",
+      panelled: "Panelled",
+    },
+  },
+  {
+    key: "top_length",
+    label: "Top Length",
+    options: {
+      above_knee: "Above Knee",
+      knee_length: "Knee Length",
+      calf_length: "Calf Length",
+      ankle_length: "Ankle Length",
+      floor_length: "Floor Length",
+    },
+  },
+  {
+    key: "bottom_pattern",
+    label: "Bottom Pattern",
+    options: {
+      solid: "Solid",
+      printed: "Printed",
+      embroidered: "Embroidered",
+      floral: "Floral",
+      geometric: "Geometric",
+    },
+  },
+  {
+    key: "waistband",
+    label: "Waistband",
+    options: {
+      elasticated: "Elasticated",
+      drawstring: "Drawstring",
+      fixed: "Fixed",
+    },
+  },
+  {
+    key: "weave_pattern",
+    label: "Weave Pattern",
+    options: {
+      regular: "Regular",
+      jacquard: "Jacquard",
+      dobby: "Dobby",
+      plain: "Plain",
+    },
+  },
+  {
+    key: "pattern_coverage",
+    label: "Pattern Coverage",
+    options: {
+      large: "Large",
+      all_over: "All Over",
+      border: "Border",
+      minimal: "Minimal",
+      yoke: "Yoke",
+    },
+  },
+  { key: "fabric", label: "Fabric" },
+]
+
+export type ProductMetadataEntry = {
+  key: string
+  label: string
+  value: string
+}
+
+export function formatMetadataValue(
+  raw: unknown,
+  field: ProductMetadataField
+): string | null {
+  if (raw === null || raw === undefined || raw === "") {
+    return null
+  }
+
+  const str = String(raw).trim()
+  if (!str) {
+    return null
+  }
+
+  if (field.options?.[str]) {
+    return field.options[str]
+  }
+
+  return str
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+export const PRODUCT_DETAILS_FIELD_OPTIONS: { key: string; label: string }[] =
+  PRODUCT_METADATA_FIELDS.map((field) => ({
+    key: field.key,
+    label: field.label,
+  }))
+
+export type ProductDetailsNarrative = {
+  key: string
+  title: string
+  items: string[]
+}
+
+function getNarrativeTitles(metadata: Record<string, unknown>) {
+  const styleKey = String(metadata.style || "").trim()
+  const labels =
+    STYLE_NARRATIVE_LABELS[styleKey] ||
+    STYLE_NARRATIVE_LABELS.coords
+
+  return {
+    top: labels.top,
+    bottom: labels.bottom,
+  }
+}
+
+function formatKeyAsLabel(key: string): string {
+  return key
+    .replace(/^custom_spec_/, "")
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+function parseMetadataFieldKeys(raw: unknown): string[] | null {
+  if (raw == null || raw === "") return null
+
+  if (Array.isArray(raw)) {
+    const keys = raw.map((item) => String(item).trim()).filter(Boolean)
+    return keys.length > 0 ? keys : null
+  }
+
+  if (typeof raw === "string") {
+    const trimmed = raw.trim()
+    if (!trimmed) return null
+
+    try {
+      const parsed = JSON.parse(trimmed) as unknown
+      if (Array.isArray(parsed)) {
+        const keys = parsed.map((item) => String(item).trim()).filter(Boolean)
+        return keys.length > 0 ? keys : null
+      }
+    } catch {
+      // fall through
+    }
+
+    const keys = trimmed.split(",").map((item) => item.trim()).filter(Boolean)
+    return keys.length > 0 ? keys : null
+  }
+
+  return null
+}
+
+export function parseMetadataBulletItems(raw: unknown): string[] {
+  if (raw === null || raw === undefined || raw === "") {
+    return []
+  }
+
+  if (Array.isArray(raw)) {
+    return raw.map((item) => String(item).trim()).filter(Boolean)
+  }
+
+  const str = String(raw).trim()
+  if (!str) {
+    return []
+  }
+
+  if (str.includes("\n")) {
+    return str.split("\n").map((item) => item.trim()).filter(Boolean)
+  }
+
+  if (str.includes(",")) {
+    return str.split(",").map((item) => item.trim()).filter(Boolean)
+  }
+
+  return [str]
+}
+
+function getDetailsFieldLabel(key: string): string {
+  return (
+    PRODUCT_DETAILS_FIELD_OPTIONS.find((item) => item.key === key)?.label ||
+    PRODUCT_METADATA_FIELDS.find((item) => item.key === key)?.label ||
+    formatKeyAsLabel(key)
+  )
+}
+
+function buildMetadataEntry(
+  key: string,
+  metadata: Record<string, unknown>
+): ProductMetadataEntry | null {
+  const field = PRODUCT_METADATA_FIELDS.find((item) => item.key === key)
+  if (!field) {
+    return null
+  }
+
+  const value = formatMetadataValue(metadata[key], field)
+  if (!value) {
+    return null
+  }
+
+  return {
+    key,
+    label: getDetailsFieldLabel(key),
+    value,
+  }
+}
+
+export function getProductMetadataEntries(
+  metadata: Record<string, unknown> | null | undefined
+): ProductMetadataEntry[] {
+  if (!metadata) {
+    return []
+  }
+
+  const adminSelectedKeys = parseMetadataFieldKeys(metadata.details_fields)
+  const entries: ProductMetadataEntry[] = []
+
+  const keysToShow = adminSelectedKeys ?? PRODUCT_METADATA_FIELDS.map((field) => field.key)
+
+  for (const key of keysToShow) {
+    const entry = buildMetadataEntry(key, metadata)
+    if (entry) {
+      entries.push(entry)
+    }
+  }
+
+  return entries
+}
+
+export function getProductDetailsNarratives(
+  metadata: Record<string, unknown> | null | undefined
+): ProductDetailsNarrative[] {
+  if (!metadata) {
+    return []
+  }
+
+  const titles = getNarrativeTitles(metadata)
+  const sections: ProductDetailsNarrative[] = []
+
+  const topItems = parseMetadataBulletItems(metadata.top_design)
+  if (topItems.length > 0) {
+    sections.push({
+      key: "top_design",
+      title: titles.top,
+      items: topItems,
+    })
+  }
+
+  const bottomItems = parseMetadataBulletItems(metadata.bottom_design)
+  if (bottomItems.length > 0 && titles.bottom) {
+    sections.push({
+      key: "bottom_design",
+      title: titles.bottom,
+      items: bottomItems,
+    })
+  }
+
+  const sizeFitItems = parseMetadataBulletItems(metadata.size_fit)
+  if (sizeFitItems.length > 0) {
+    sections.push({
+      key: "size_fit",
+      title: "Size & Fit",
+      items: sizeFitItems,
+    })
+  }
+
+  const materialCareItems = parseMetadataBulletItems(metadata.material_care)
+  if (materialCareItems.length > 0) {
+    sections.push({
+      key: "material_care",
+      title: "Material & Care",
+      items: materialCareItems,
+    })
+  }
+
+  return sections
+}
+
+export function hasProductDetailsContent(product: {
+  title?: string | null
+  metadata?: Record<string, unknown> | null
+}): boolean {
+  const metadata = product.metadata
+  return (
+    getProductMetadataEntries(metadata).length > 0 ||
+    getProductDetailsNarratives(metadata).length > 0 ||
+    Boolean(product.title?.trim())
+  )
+}
+
+const DEFAULT_STYLE_SPOTLIGHT_FIELDS = [
+  { key: "style", label: "Style" },
+  { key: "top_pattern", label: "Pattern" },
+  { key: "neck", label: "Neck" },
+  { key: "sleeve_length", label: "Sleeve Length" },
+]
+
+export const STYLE_SPOTLIGHT_FIELD_OPTIONS: { key: string; label: string }[] = [
+  ...PRODUCT_DETAILS_FIELD_OPTIONS,
+  { key: "color", label: "Color" },
+]
+
+export type StyleSpotlightEntry = {
+  label: string
+  value: string
+}
+
+function getSpotlightFieldLabel(key: string): string {
+  return (
+    STYLE_SPOTLIGHT_FIELD_OPTIONS.find((item) => item.key === key)?.label ||
+    getDetailsFieldLabel(key)
+  )
+}
+
+function parseSpotlightFieldKeys(raw: unknown): string[] | null {
+  return parseMetadataFieldKeys(raw)
+}
+
+export function getStyleSpotlightEntries(
+  metadata: Record<string, unknown> | null | undefined,
+  colorLabel?: string | null
+): StyleSpotlightEntry[] {
+  const adminSelectedKeys = parseSpotlightFieldKeys(metadata?.spotlight_fields)
+  const selectedKeys =
+    adminSelectedKeys ??
+    [...DEFAULT_STYLE_SPOTLIGHT_FIELDS.map((field) => field.key), "color"]
+
+  const entries: StyleSpotlightEntry[] = []
+
+  for (const key of selectedKeys) {
+    if (key === "color") {
+      const trimmedColor = colorLabel?.trim()
+      if (trimmedColor) {
+        entries.push({ label: getSpotlightFieldLabel("color"), value: trimmedColor })
+      }
+      continue
+    }
+
+    const field = PRODUCT_METADATA_FIELDS.find((item) => item.key === key)
+    if (!field) continue
+
+    const value = formatMetadataValue(metadata?.[key], field)
+    if (value) {
+      entries.push({ label: getSpotlightFieldLabel(key), value })
+    }
+  }
+
+  return entries
+}