@pradip1995/theme-sahsha 3.1.0

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

@@ -0,0 +1,232 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import type { ProductOptions } from "@core/domain/product/variant-selection"
+
+export type ProductCTASectionProps = {
+  product: HttpTypes.StoreProduct
+  selectedVariant?: HttpTypes.StoreProductVariant
+  options: ProductOptions
+  isValidVariant: boolean
+  disabled?: boolean
+  inStock: boolean
+  inventoryLimit: number | null
+  quantity: number
+  setQuantity: (value: number) => void
+  quantityInCart: number
+  variantInCart: HttpTypes.StoreCartLineItem | undefined
+  isAdding: boolean
+  isBuyingNow: boolean
+  showNotifyMessage: boolean
+  setShowNotifyMessage: (v: boolean) => void
+  handleAddToCart: () => void
+  handleBuyNow: () => void
+  handleIncreaseQuantity: () => void
+  handleDecreaseQuantity: () => void
+}
+
+const btnBase =
+  "product-cta-btn h-12 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+
+export function ProductCTASection(props: ProductCTASectionProps) {
+  const router = useRouter()
+  const {
+    product,
+    selectedVariant,
+    options,
+    isValidVariant,
+    disabled,
+    inStock,
+    inventoryLimit,
+    quantity,
+    setQuantity,
+    quantityInCart,
+    variantInCart,
+    isAdding,
+    isBuyingNow,
+    showNotifyMessage,
+    setShowNotifyMessage,
+    handleAddToCart,
+    handleBuyNow,
+    handleIncreaseQuantity,
+    handleDecreaseQuantity,
+  } = props
+
+  if (!inStock && selectedVariant) {
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <p className="text-sm font-medium text-brand-sale uppercase tracking-[var(--letter-spacing-nav)]">
+          Sold out
+        </p>
+
+        {showNotifyMessage ? (
+          <div className="border border-[var(--color-header-border)] p-5 flex flex-col gap-3">
+            <p className="text-sm text-body">
+              We&apos;ll notify you when this item is back in stock.
+            </p>
+            <button
+              onClick={() => {
+                const relatedSection = document.getElementById("related-products")
+                if (relatedSection) {
+                  relatedSection.scrollIntoView({ behavior: "smooth" })
+                } else {
+                  router.push("/store")
+                }
+              }}
+              className="text-sm font-medium underline underline-offset-4 text-heading hover:opacity-70 w-fit"
+            >
+              Browse similar products
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowNotifyMessage(true)}
+            className={`${btnBase} w-full bg-brand-accent text-inverse hover:bg-brand-accent-hover`}
+          >
+            Notify me when available
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 w-full">
+      {inventoryLimit !== null && inventoryLimit > 0 && inventoryLimit <= 5 && (
+        <p className="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-orange-600 text-right">
+          Hurry! Only {inventoryLimit} left
+        </p>
+      )}
+
+      <div className="flex items-stretch gap-3 w-full">
+        {variantInCart ? (
+          <div className="flex h-12 shrink-0 w-[120px] border border-brand-accent rounded-full overflow-hidden">
+            <button
+              onClick={handleDecreaseQuantity}
+              disabled={isAdding}
+              className="w-10 flex items-center justify-center hover:bg-surface-muted transition-colors disabled:opacity-50"
+              aria-label="Decrease quantity"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+            <div className="flex-1 flex items-center justify-center text-sm font-semibold text-heading">
+              {variantInCart.quantity}
+            </div>
+            <button
+              onClick={handleIncreaseQuantity}
+              disabled={isAdding || !inStock}
+              className="w-10 flex items-center justify-center hover:bg-surface-muted transition-colors disabled:opacity-50"
+              aria-label="Increase quantity"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <line x1="12" y1="5" x2="12" y2="19" />
+                <line x1="5" y1="12" x2="19" y2="12" />
+              </svg>
+            </button>
+          </div>
+        ) : (
+          <div className="flex h-12 shrink-0 w-[120px] items-center border border-[var(--color-header-border)] rounded-full overflow-hidden bg-surface">
+            <button
+              type="button"
+              onClick={() => setQuantity(Math.max(1, quantity - 1))}
+              disabled={quantity <= 1}
+              className="w-10 h-full flex items-center justify-center hover:bg-gray-50 disabled:opacity-50"
+            >
+              −
+            </button>
+            <span className="flex-1 text-center font-semibold text-gray-900">
+              {quantity}
+            </span>
+            <button
+              type="button"
+              onClick={() => {
+                if (inventoryLimit === null || quantity < inventoryLimit) {
+                  setQuantity(quantity + 1)
+                }
+              }}
+              disabled={inventoryLimit !== null && quantity >= inventoryLimit}
+              className="w-10 h-full flex items-center justify-center hover:bg-gray-50 disabled:opacity-50"
+            >
+              +
+            </button>
+          </div>
+        )}
+
+        {!variantInCart && (
+          <button
+            onClick={handleAddToCart}
+            disabled={
+              !inStock ||
+              !!disabled ||
+              isAdding ||
+              isBuyingNow ||
+              (!isValidVariant && product.options?.every((opt) => options[opt.id]))
+            }
+            className={`${btnBase} flex-1 min-w-0 product-cta-btn--secondary`}
+            data-testid="add-product-button"
+            data-ga-event="add_to_bag_click"
+            data-ga-label={product.title || "Product"}
+          >
+            {isAdding ? (
+              <span className="product-cta-btn__label">
+                <Spinner />
+              </span>
+            ) : (
+              <span className="product-cta-btn__label">
+                {!selectedVariant || !isValidVariant
+                  ? product.options?.every((opt) => options[opt.id])
+                    ? "Unavailable"
+                    : "Select options"
+                  : !inStock
+                    ? inventoryLimit !== null &&
+                      inventoryLimit + quantityInCart > 0 &&
+                      quantity > inventoryLimit
+                      ? inventoryLimit <= 0
+                        ? "Sold out"
+                        : "Max quantity reached"
+                      : "Sold out"
+                    : `Add to Cart${quantity > 1 ? ` (${quantity})` : ""}`}
+              </span>
+            )}
+          </button>
+        )}
+      </div>
+
+      <button
+        onClick={handleBuyNow}
+        disabled={
+          !inStock ||
+          !!disabled ||
+          isAdding ||
+          isBuyingNow ||
+          (!isValidVariant && product.options?.every((opt) => options[opt.id]))
+        }
+        className={`${btnBase} w-full product-cta-btn--primary`}
+      >
+        {isBuyingNow ? (
+          <span className="product-cta-btn__label">
+            <Spinner />
+          </span>
+        ) : (
+          <span className="product-cta-btn__label">Buy It Now</span>
+        )}
+      </button>
+    </div>
+  )
+}
+
+function Spinner() {
+  return (
+    <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,200 @@
+"use client"
+
+import { useState } from "react"
+import { HttpTypes } from "@medusajs/types"
+import RatingsTab from "@modules/products/components/product-tabs/ratings-tab"
+import {
+  getProductDetailsNarratives,
+  getProductMetadataEntries,
+  hasProductDetailsContent,
+} from "./product-metadata-fields"
+
+function AccordionItem({
+  title,
+  isOpen,
+  onToggle,
+  children,
+}: {
+  title: string
+  isOpen: boolean
+  onToggle: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <div className="product-accordion__item border-t border-[var(--color-header-border)]">
+      <button
+        onClick={onToggle}
+        className="product-accordion__trigger flex items-center justify-between w-full py-4 text-left"
+      >
+        <h3 className="product-accordion__title">{title}</h3>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          className={`transition-transform text-heading ${isOpen ? "rotate-180" : ""}`}
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="pb-5 text-sm text-body leading-relaxed">{children}</div>
+      )}
+    </div>
+  )
+}
+
+function NarrativeBlock({
+  title,
+  items,
+}: {
+  title: string
+  items: string[]
+}) {
+  return (
+    <div className="product-details__block">
+      <h4 className="product-details__block-title">{title}</h4>
+      {items.length === 1 ? (
+        <p className="product-details__block-text">{items[0]}</p>
+      ) : (
+        <ul className="product-details__list">
+          {items.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export function ProductDetailsSection({ product }: { product: HttpTypes.StoreProduct }) {
+  const metadataEntries = getProductMetadataEntries(product.metadata)
+  const narrativeSections = getProductDetailsNarratives(product.metadata)
+  const careGuide = product.metadata?.care_guide
+  const hasCareGuide =
+    careGuide !== null &&
+    careGuide !== undefined &&
+    String(careGuide).trim() !== ""
+  const showProductDetails = hasProductDetailsContent(product)
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false)
+  const [isDescriptionOpen, setIsDescriptionOpen] = useState(false)
+  const [isCareGuideOpen, setIsCareGuideOpen] = useState(false)
+
+  return (
+    <div className="product-details-section mt-2">
+      {showProductDetails && (
+        <AccordionItem
+          title="Product details"
+          isOpen={isDetailsOpen}
+          onToggle={() => setIsDetailsOpen(!isDetailsOpen)}
+        >
+          {product.title && (
+            <p className="product-details__product-title">{product.title}</p>
+          )}
+
+          {narrativeSections.map((section) => (
+            <NarrativeBlock
+              key={section.key}
+              title={section.title}
+              items={section.items}
+            />
+          ))}
+
+          {metadataEntries.length > 0 && (
+            <>
+              <p className="product-details__spec-heading">Specifications</p>
+              <div className="product-details__grid">
+                {metadataEntries.map((entry) => (
+                  <div key={entry.key} className="product-details__item">
+                    <span className="product-details__label">{entry.label}</span>
+                    <span className="product-details__value">{entry.value}</span>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </AccordionItem>
+      )}
+
+      {product.description && (
+        <AccordionItem
+          title="Description"
+          isOpen={isDescriptionOpen}
+          onToggle={() => setIsDescriptionOpen(!isDescriptionOpen)}
+        >
+          <div
+            className="mb-3 whitespace-pre-line"
+            dangerouslySetInnerHTML={{
+              __html: product.description
+                ? product.description.replace(/\n/g, "<br />")
+                : "",
+            }}
+          />
+          {(() => {
+            const features = product.metadata?.features
+            if (!features) return null
+
+            if (typeof features === "string") {
+              return (
+                <ul className="list-disc list-inside space-y-1">
+                  {features.split(",").map((feature: string, index: number) => (
+                    <li key={index}>{feature.trim()}</li>
+                  ))}
+                </ul>
+              )
+            }
+
+            if (Array.isArray(features)) {
+              return (
+                <ul className="list-disc list-inside space-y-1">
+                  {(features as string[]).map((feature: string, index: number) => (
+                    <li key={index}>{feature}</li>
+                  ))}
+                </ul>
+              )
+            }
+
+            return null
+          })()}
+        </AccordionItem>
+      )}
+
+      {hasCareGuide && (
+        <AccordionItem
+          title="Care guide"
+          isOpen={isCareGuideOpen}
+          onToggle={() => setIsCareGuideOpen(!isCareGuideOpen)}
+        >
+          {(() => {
+            const careGuideStr =
+              typeof careGuide === "string" ? careGuide : String(careGuide)
+
+            const items = careGuideStr.includes(",")
+              ? careGuideStr.split(",").map((item) => item.trim()).filter(Boolean)
+              : careGuideStr.includes("\n")
+                ? careGuideStr.split("\n").map((item) => item.trim()).filter(Boolean)
+                : [careGuideStr]
+
+            if (items.length > 1) {
+              return (
+                <ul className="list-disc list-inside space-y-1">
+                  {items.map((item: string, index: number) => (
+                    <li key={index}>{item}</li>
+                  ))}
+                </ul>
+              )
+            }
+
+            return <p>{careGuideStr}</p>
+          })()}
+        </AccordionItem>
+      )}
+
+      <div className="product-reviews-section border-t border-[var(--color-header-border)] pt-4 pb-2">
+        <RatingsTab product={product} />
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,150 @@
+"use client"
+
+import SidePanel from "@modules/common/components/side-panel"
+import { SizeChartPanel } from "./SizeChartPanel"
+
+type ProductFeaturePanelProps = {
+  activeFeature: string | null
+  onClose: () => void
+}
+
+export function ProductFeaturePanel({ activeFeature, onClose }: ProductFeaturePanelProps) {
+  return (
+    <SidePanel
+      isOpen={!!activeFeature}
+      onClose={() => onClose()}
+      title={
+        activeFeature === 'return' ? '7 Days Easy Return' :
+          activeFeature === 'delivery' ? 'Fast Delivery' :
+            activeFeature === 'cod' ? 'Cash On Delivery' :
+              activeFeature === 'size_chart' ? 'Size Guide' : ''
+      }
+    >
+      {activeFeature === 'return' && (
+        <div className="space-y-6">
+          <div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
+            <p className="text-sm text-purple-900 leading-relaxed font-medium">
+              We offer a hassle-free 7-day return policy for all our customers. If you're not satisfied with your purchase, we're here to help!
+            </p>
+          </div>
+          <div className="space-y-4">
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <span className="font-bold text-gray-700">1</span>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900 mb-1">Unused Conditions</h4>
+                <p className="text-sm text-gray-600">Items must be returned in their original condition, unused, and with all tags intact.</p>
+              </div>
+            </div>
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <span className="font-bold text-gray-700">2</span>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900 mb-1">Easy Process</h4>
+                <p className="text-sm text-gray-600">Raise a return request from your account or contact our support team directly.</p>
+              </div>
+            </div>
+            <div className="flex gap-4">
+              <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+                <span className="font-bold text-gray-700">3</span>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900 mb-1">Quick Refund</h4>
+                <p className="text-sm text-gray-600">Once the quality check is completed, your refund will be processed within 24–48 hours. The amount may take a few business days to reflect in your account depending on your bank.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeFeature === 'delivery' && (
+        <div className="space-y-6">
+          <div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
+            <p className="text-sm text-blue-900 leading-relaxed font-medium">
+              We prioritize your excitement! Our fast delivery network ensures your order reaches you as soon as possible.
+            </p>
+          </div>
+          <div className="space-y-6">
+            <div>
+              <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-blue-500">
+                  <path d="M12 2v20m10-10H2"></path>
+                </svg>
+                Order Processing
+              </h4>
+              <p className="text-sm text-gray-600 pl-7">Most orders are processed and dispatched within 24 hours of placement.</p>
+            </div>
+            <div>
+              <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-blue-500">
+                  <circle cx="12" cy="12" r="10"></circle>
+                  <polyline points="12 6 12 12 16 14"></polyline>
+                </svg>
+                Average Timelines
+              </h4>
+              <ul className="text-sm text-gray-600 pl-7 space-y-2 list-disc">
+                <li>Metro Cities: 2-3 business days</li>
+                <li>Tier 2 Cities: 4-5 business days</li>
+                <li>Rest of India: 5-7 business days</li>
+              </ul>
+            </div>
+            <div>
+              <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-blue-500">
+                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+                  <circle cx="12" cy="10" r="3"></circle>
+                </svg>
+                Live Tracking
+              </h4>
+              <p className="text-sm text-gray-600 pl-7">You will receive a real-time tracking link via Email & WhatsApp once your order is shipped.</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeFeature === 'cod' && (
+        <div className="space-y-6">
+          <div className="bg-green-50 p-4 rounded-xl border border-green-100">
+            <p className="text-sm text-green-900 leading-relaxed font-medium">
+              Shop with confidence! Pay only when you receive your package at your doorstep.
+            </p>
+          </div>
+          <div className="space-y-5">
+            <div className="flex gap-4 p-4 bg-gray-50 rounded-lg">
+              <div className="w-10 h-10 flex items-center justify-center bg-page-bg rounded-lg shadow-sm flex-shrink-0">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2">
+                  <rect x="2" y="5" width="20" height="14" rx="2"></rect>
+                  <line x1="2" y1="10" x2="22" y2="10"></line>
+                </svg>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900">Zero Upfront Cost</h4>
+                <p className="text-xs text-gray-500">No need for credit cards or online payments to place your order.</p>
+              </div>
+            </div>
+            <div className="flex gap-4 p-4 bg-gray-50 rounded-lg">
+              <div className="w-10 h-10 flex items-center justify-center bg-page-bg rounded-lg shadow-sm flex-shrink-0">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" strokeWidth="2">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                </svg>
+              </div>
+              <div>
+                <h4 className="font-bold text-gray-900">Safe & Secure</h4>
+                <p className="text-xs text-gray-500">Verify your package and then pay our delivery partner directly.</p>
+              </div>
+            </div>
+            <ul className="text-xs text-gray-500 italic space-y-1 pl-4 list-disc">
+              <li>Available for orders up to ₹10,000.</li>
+              <li>Please keep the exact change ready for a smoother experience.</li>
+              <li>Only cash payments are accepted for COD.</li>
+            </ul>
+          </div>
+        </div>
+      )}
+
+      {activeFeature === 'size_chart' && <SizeChartPanel />}
+    </SidePanel>
+  )
+}