@pradip1995/theme-sahsha 3.1.0

package/src/slots/product/ProductActions/size-chart-data.ts

@@ -0,0 +1,108 @@
+export type SizeChartRow = Record<string, string>
+
+export type SizeChartSection = {
+  id: string
+  title: string
+  subtitle?: string
+  columns: { key: string; label: string; align?: "left" | "center" }[]
+  rows: SizeChartRow[]
+}
+
+export const KURTI_SIZE_CHART: SizeChartSection = {
+  id: "kurti",
+  title: "Kurti & Kurti Sets",
+  subtitle: "Body measurements in inches",
+  columns: [
+    { key: "size", label: "Size" },
+    { key: "bust", label: "Bust", align: "center" },
+    { key: "waist", label: "Waist", align: "center" },
+    { key: "hip", label: "Hip", align: "center" },
+    { key: "length", label: "Length", align: "center" },
+  ],
+  rows: [
+    { size: "XS", bust: "34", waist: "30", hip: "36", length: "38" },
+    { size: "S", bust: "36", waist: "32", hip: "38", length: "40" },
+    { size: "M", bust: "38", waist: "34", hip: "40", length: "42" },
+    { size: "L", bust: "40", waist: "36", hip: "42", length: "44" },
+    { size: "XL", bust: "42", waist: "38", hip: "44", length: "46" },
+    { size: "XXL", bust: "44", waist: "40", hip: "46", length: "48" },
+  ],
+}
+
+export const SAREE_BLOUSE_SIZE_CHART: SizeChartSection = {
+  id: "saree-blouse",
+  title: "Saree Blouse",
+  subtitle: "Blouse size by bust measurement (inches)",
+  columns: [
+    { key: "size", label: "Size" },
+    { key: "bust", label: "Bust", align: "center" },
+    { key: "underbust", label: "Under", align: "center" },
+    { key: "shoulder", label: "Shldr", align: "center" },
+    { key: "length", label: "Len", align: "center" },
+  ],
+  rows: [
+    { size: "32", bust: "32", underbust: "28", shoulder: "13", length: "14" },
+    { size: "34", bust: "34", underbust: "30", shoulder: "13.5", length: "14" },
+    { size: "36", bust: "36", underbust: "32", shoulder: "14", length: "15" },
+    { size: "38", bust: "38", underbust: "34", shoulder: "14.5", length: "15" },
+    { size: "40", bust: "40", underbust: "36", shoulder: "15", length: "16" },
+    { size: "42", bust: "42", underbust: "38", shoulder: "15.5", length: "16" },
+  ],
+}
+
+export const SAREE_LENGTH_CHART: SizeChartSection = {
+  id: "saree-length",
+  title: "Saree Drape Guide",
+  subtitle: "Standard unstitched saree dimensions",
+  columns: [
+    { key: "type", label: "Type" },
+    { key: "length", label: "Length", align: "center" },
+    { key: "width", label: "Width", align: "center" },
+    { key: "blouse", label: "Blouse", align: "center" },
+  ],
+  rows: [
+    {
+      type: "Standard",
+      length: "5.5 m",
+      width: "44–48\"",
+      blouse: "0.8 m",
+    },
+    {
+      type: "Designer",
+      length: "5.5–6 m",
+      width: "48\"",
+      blouse: "1 m",
+    },
+    {
+      type: "Pre-Stitched",
+      length: "Free",
+      width: "Adj.",
+      blouse: "Yes",
+    },
+  ],
+}
+
+export const SIZE_CHART_SECTIONS = [
+  KURTI_SIZE_CHART,
+  SAREE_BLOUSE_SIZE_CHART,
+  SAREE_LENGTH_CHART,
+]
+
+export const SIZE_CHART_MEASURE_TIPS = [
+  {
+    title: "Bust",
+    text: "Measure around the fullest part of your chest, keeping the tape parallel to the floor.",
+  },
+  {
+    title: "Waist",
+    text: "Measure around your natural waistline — typically the narrowest part of your torso.",
+  },
+  {
+    title: "Hip",
+    text: "Measure around the fullest part of your hips, about 7–9 inches below the waist.",
+  },
+  {
+    title: "Length",
+    text: "For kurtis, measure from shoulder to desired hem. For blouses, shoulder to waist.",
+  },
+]

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

@@ -0,0 +1,258 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getProductPrice } from "@core/util/get-product-price"
+import { convertToLocale } from "@core/util/money"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+import ProductCardRatingDisplay from "@modules/common/components/product/product-card-rating"
+import WishlistIcon from "@modules/common/components/product/wishlist-icon"
+import {
+  QuickAddContent,
+  useProductQuickAdd,
+} from "@modules/wishlist/components/wishlist-item"
+import { clx } from "@medusajs/ui"
+import type { ProductCardProps } from "@core/types/product-card"
+
+type Props = ProductCardProps & {
+  imageClassName?: string
+  quickAddClassName?: string
+  showWishlistIcon?: boolean
+}
+
+export default function ProductCard({
+  product,
+  region,
+  className,
+  imageClassName,
+  quickAddClassName,
+  showWishlistIcon,
+  rating,
+}: Props) {
+  const [imageHover, setImageHover] = useState(false)
+  const {
+    showQuickAdd,
+    closeQuickAdd,
+    selectedOptions,
+    setOptionValue,
+    quantity,
+    setQuantity,
+    showError,
+    isAdding,
+    selectedVariantPrice,
+    handleQuickAdd,
+    cart,
+  } = useProductQuickAdd(product)
+
+  const { cheapestPrice } = getProductPrice({ product })
+  const thumbnail = product.thumbnail
+  const secondImage = product.images?.[1]?.url
+
+  const priceLabel = useMemo(() => {
+    if (!cheapestPrice) return null
+    return convertToLocale({
+      amount: cheapestPrice.calculated_price_number,
+      currency_code: cheapestPrice.currency_code,
+    })
+  }, [cheapestPrice])
+
+  const compareLabel = useMemo(() => {
+    if (!cheapestPrice?.original_price_number) return null
+    if (cheapestPrice.calculated_price_number >= cheapestPrice.original_price_number)
+      return null
+    return convertToLocale({
+      amount: cheapestPrice.original_price_number,
+      currency_code: cheapestPrice.currency_code,
+    })
+  }, [cheapestPrice])
+
+  const discountPercent = useMemo(() => {
+    if (!cheapestPrice?.original_price_number) return null
+    if (cheapestPrice.calculated_price_number >= cheapestPrice.original_price_number)
+      return null
+
+    const fromField = Number.parseInt(
+      String(cheapestPrice.percentage_diff ?? "").replace(/\D/g, ""),
+      10
+    )
+    if (fromField > 0) return fromField
+
+    return Math.round(
+      ((cheapestPrice.original_price_number - cheapestPrice.calculated_price_number) /
+        cheapestPrice.original_price_number) *
+        100
+    )
+  }, [cheapestPrice])
+
+  const onQuickAdd = (e: React.MouseEvent) => {
+    handleQuickAdd(e)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (!showQuickAdd || !product.id) return
+      const target = e.target as HTMLElement
+      if (!target.closest(`[data-product-id="${product.id}"]`)) {
+        closeQuickAdd()
+      }
+    }
+
+    if (showQuickAdd) {
+      document.addEventListener("mousedown", handleClickOutside)
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [showQuickAdd, product.id, closeQuickAdd])
+
+  return (
+    <article
+      data-product-id={product.id}
+      className={clx("product-card group flex flex-col w-full h-full relative", className)}
+    >
+      <LocalizedClientLink
+        href={`/products/${product.handle}`}
+        className="product-card__link flex flex-col h-full"
+        data-testid="product-card"
+      >
+        <div
+          className={clx(
+            "product-card__media relative overflow-hidden bg-surface-muted",
+            imageClassName
+          )}
+          onMouseEnter={() => setImageHover(true)}
+          onMouseLeave={() => setImageHover(false)}
+        >
+          {thumbnail ? (
+            <>
+              <Image
+                src={thumbnail}
+                alt={product.title || "Product"}
+                fill
+                sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 25vw"
+                className={clx(
+                  "object-cover transition-opacity duration-500",
+                  imageHover && secondImage ? "opacity-0" : "opacity-100"
+                )}
+              />
+              {secondImage && (
+                <Image
+                  src={secondImage}
+                  alt=""
+                  fill
+                  sizes="(max-width:640px) 50vw, (max-width:1024px) 33vw, 25vw"
+                  className={clx(
+                    "object-cover transition-opacity duration-500",
+                    imageHover ? "opacity-100" : "opacity-0"
+                  )}
+                />
+              )}
+            </>
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <PlaceholderImage size={48} />
+            </div>
+          )}
+
+          <div
+            className="product-card__actions"
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            {showWishlistIcon && product.id && (
+              <WishlistIcon productId={product.id} variant="card" />
+            )}
+            <button
+              type="button"
+              className="product-card__cart-btn"
+              onClick={onQuickAdd}
+              disabled={isAdding}
+              aria-label={isAdding ? "Adding to cart" : "Add to cart"}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="product-card__cart-icon"
+                aria-hidden
+              >
+                <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
+                <line x1="3" y1="6" x2="21" y2="6"></line>
+                <path d="M16 10a4 4 0 0 1-8 0"></path>
+              </svg>
+            </button>
+          </div>
+
+          {!showQuickAdd && (
+            <div className="product-card__quick-add-wrap">
+              <button
+                type="button"
+                onClick={onQuickAdd}
+                disabled={isAdding}
+                className={clx(
+                  "product-card__quick-add w-full disabled:opacity-60",
+                  quickAddClassName
+                )}
+              >
+                <span className="product-card__quick-add-label">
+                  {isAdding ? "Adding…" : "Quick add"}
+                </span>
+              </button>
+            </div>
+          )}
+
+          {showQuickAdd && (
+            <div
+              className="product-card__quick-add-panel"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}
+            >
+              <QuickAddContent
+                product={product}
+                selectedOptions={selectedOptions}
+                setOptionValue={setOptionValue}
+                handleAddToCart={handleQuickAdd}
+                isAdding={isAdding}
+                showError={showError}
+                onClose={closeQuickAdd}
+                isMobile={false}
+                selectedVariantPrice={selectedVariantPrice}
+                quantity={quantity}
+                setQuantity={setQuantity}
+                cart={cart}
+                actionLabel="Add to Bag"
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="product-card__info flex-1">
+          <h3 className="product-card__title text-heading group-hover:underline underline-offset-2">
+            {product.title}
+          </h3>
+          <ProductCardRatingDisplay product={product} rating={rating} />
+          <div className="product-card__prices">
+            {priceLabel && (
+              <span className="product-card__price">{priceLabel}</span>
+            )}
+            {compareLabel && (
+              <span className="product-card__compare">{compareLabel}</span>
+            )}
+            {discountPercent != null && discountPercent > 0 && (
+              <span className="product-card__discount">{discountPercent}% OFF</span>
+            )}
+          </div>
+        </div>
+      </LocalizedClientLink>
+    </article>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { HttpTypes } from "@medusajs/types"
+import ProductRating from "@modules/common/components/product/product-rating"
+import ShareButton from "@modules/common/components/product/share-button"
+import WishlistIcon from "@modules/common/components/product/wishlist-icon"
+
+type ProductInfoProps = {
+  product: HttpTypes.StoreProduct
+  region: HttpTypes.StoreRegion
+}
+
+export default function ProductInfo({ product }: ProductInfoProps) {
+  const metadataBrand = product.metadata?.brand as string | undefined
+  const brand = metadataBrand || product.collection?.title || "Sahsha"
+
+  return (
+    <div id="product-info" className="product-info">
+      <p className="product-info__brand">{brand}</p>
+
+      <div className="product-info__title-row">
+        <h1 className="product-info__title" data-testid="product-title">
+          {product.title}
+        </h1>
+        <div className="product-info__actions">
+          {product.id && <WishlistIcon productId={product.id} />}
+          <ShareButton
+            productTitle={product.title ?? ""}
+            productHandle={product.handle ?? ""}
+          />
+        </div>
+      </div>
+
+      <ProductRating product={product} showButton={false} variant="badge" />
+    </div>
+  )
+}

package/src/templates/CollectionsPage/index.tsx

@@ -0,0 +1,72 @@
+import Image from "next/image"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+import {
+  getCollectionImage,
+  getCollectionProductCount,
+} from "@lib/category-collection-images"
+
+type CollectionsPageProps = {
+  collections: HttpTypes.StoreCollection[]
+}
+
+export default function CollectionsPage({ collections }: CollectionsPageProps) {
+  return (
+    <div className="collections-index min-h-screen bg-page-bg">
+      <div
+        className="collections-index__inner mx-auto"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <nav className="collections-index__breadcrumb" aria-label="Breadcrumb">
+          <LocalizedClientLink href="/">Home</LocalizedClientLink>
+          <span aria-hidden>/</span>
+          <span>Collections</span>
+        </nav>
+
+        <h1 className="collections-index__title">Collections</h1>
+
+        <ul className="collections-index__grid">
+          {collections.map((collection) => {
+            const imageUrl = getCollectionImage(collection)
+            const productCount = getCollectionProductCount(collection)
+            const title = collection.title || "Collection"
+
+            return (
+              <li key={collection.id} className="collections-index__item">
+                <LocalizedClientLink
+                  href={`/store?collection=${collection.id}`}
+                  className="collections-index__link"
+                >
+                  <div className="collections-index__media">
+                    {imageUrl ? (
+                      <Image
+                        src={imageUrl}
+                        alt={title}
+                        fill
+                        unoptimized
+                        sizes="(max-width: 640px) 50vw, 25vw"
+                        className="collections-index__image"
+                      />
+                    ) : (
+                      <div className="collections-index__placeholder">
+                        <PlaceholderImage size={40} />
+                      </div>
+                    )}
+                  </div>
+
+                  <p className="collections-index__name">
+                    {title}
+                    {productCount > 0 && (
+                      <sup className="collections-index__count">{productCount}</sup>
+                    )}
+                  </p>
+                </LocalizedClientLink>
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </div>
+  )
+}

package/src/templates/StorePage/index.tsx

@@ -0,0 +1,134 @@
+import { Suspense } from "react"
+import SkeletonProductGrid from "@modules/skeletons/templates/skeleton-product-grid"
+import RefinementList from "@modules/store/components/refinement-list"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+import PaginatedProducts from "@modules/store/templates/paginated-products"
+import ShopPageBanner from "@modules/store/components/shop-page-banner"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import type { StoreMetadataFilterKey } from "@lib/store-filter-config"
+
+type StorePageProps = {
+  sortBy?: SortOptions
+  page?: string
+  countryCode: string
+  collections?: HttpTypes.StoreCollection[]
+  collection?: string | string[]
+  category?: string | string[]
+  color?: string | string[]
+  size?: string | string[]
+  style?: string | string[]
+  neck?: string | string[]
+  ornamentation?: string | string[]
+  minPrice?: string
+  maxPrice?: string
+  colorOptions?: { value: string; label: string; hex?: string }[]
+  sizeOptions?: { value: string; label: string }[]
+  metadataFilters?: {
+    param: StoreMetadataFilterKey
+    title: string
+    options: { value: string; label: string }[]
+  }[]
+  categoryOptions?: { value: string; label: string }[]
+  q?: string
+}
+
+export default function StorePage({
+  sortBy,
+  page,
+  countryCode,
+  collections,
+  collection,
+  category,
+  color,
+  size,
+  style,
+  neck,
+  ornamentation,
+  minPrice,
+  maxPrice,
+  colorOptions,
+  sizeOptions,
+  metadataFilters,
+  categoryOptions,
+  q,
+}: StorePageProps) {
+  const pageNumber = page ? parseInt(page, 10) : 1
+  const sort = sortBy || "created_at_desc"
+
+  const filterProps = {
+    sortBy: sort,
+    collections,
+    collectionValue: collection,
+    categoryValue: category,
+    categoryOptions,
+    colorValue: color,
+    sizeValue: size,
+    styleValue: style,
+    neckValue: neck,
+    ornamentationValue: ornamentation,
+    minPrice,
+    maxPrice,
+    colorOptions,
+    sizeOptions,
+    metadataFilters,
+    q,
+  }
+
+  return (
+    <div className="store-page min-h-screen bg-white">
+      <ShopPageBanner />
+
+      <div className="store-page__container">
+        <nav className="store-page__breadcrumb" aria-label="Breadcrumb">
+          <LocalizedClientLink href="/">Home</LocalizedClientLink>
+          <span aria-hidden>/</span>
+          <span>Shop</span>
+        </nav>
+
+        <div className="store-page__layout">
+          <aside className="store-page__sidebar">
+            <h2 className="store-page__sidebar-title">Shop by</h2>
+            <RefinementList {...filterProps} />
+          </aside>
+
+          <div className="store-page__main">
+            {q && (
+              <div className="store-page__search-banner">
+                <span>
+                  Results for <strong>&ldquo;{q}&rdquo;</strong>
+                </span>
+                <LocalizedClientLink href="/store">Clear</LocalizedClientLink>
+              </div>
+            )}
+
+            <Suspense fallback={<SkeletonProductGrid />}>
+              <PaginatedProducts
+                sortBy={sort}
+                page={pageNumber}
+                countryCode={countryCode}
+                collectionId={
+                  Array.isArray(collection) ? collection.join(",") : collection
+                }
+                categoryId={
+                  Array.isArray(category) ? category.join(",") : category
+                }
+                color={Array.isArray(color) ? color.join(",") : color}
+                size={Array.isArray(size) ? size.join(",") : size}
+                style={Array.isArray(style) ? style.join(",") : style}
+                neck={Array.isArray(neck) ? neck.join(",") : neck}
+                ornamentation={
+                  Array.isArray(ornamentation) ? ornamentation.join(",") : ornamentation
+                }
+                min_price={minPrice}
+                max_price={maxPrice}
+                q={q}
+                filterProps={filterProps}
+              />
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/tokens/colors.ts

@@ -0,0 +1,21 @@
+/**
+ * Semantic Tailwind classes mapped to CSS variables in theme.css.
+ * Do not hardcode hex values here — edit theme.css instead.
+ */
+export const colorClasses = {
+  pageBg: "bg-page-bg",
+  surface: "bg-surface",
+  surfaceMuted: "bg-surface-muted",
+  brandAccent: "bg-brand-accent text-inverse",
+  brandAccentText: "text-brand-accent",
+  brandAccentBorder: "border-brand-accent",
+  brandAccentMuted: "bg-brand-accent-muted",
+  heading: "text-heading",
+  headingSub: "text-heading-sub",
+  body: "text-body",
+  muted: "text-muted",
+  inverse: "text-inverse",
+  footerBg: "bg-brand-footer",
+  promoGradient: "bg-promo-gradient",
+  cartBorder: "bg-cart-border",
+} as const

package/src/tokens/fonts.ts

@@ -0,0 +1,16 @@
+/**
+ * Sitewide typography — only two families:
+ * - Playfair Display: page titles, section headings (h1–h6, .font-display)
+ * - Montserrat: body, paragraphs, buttons, product names, prices, labels, nav
+ */
+export const fontClasses = {
+  sans: "font-sans",
+  heading: "font-heading",
+  display: "font-display",
+  quote: "font-quote",
+  mono: "font-sans",
+  body: "font-sans leading-body tracking-body",
+  pageTitle: "font-heading font-normal leading-heading tracking-heading",
+  uiLabel: "font-sans text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)]",
+  productName: "font-sans font-medium",
+} as const

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export * from "./colors"
+export * from "./fonts"
+export * from "./spacing"

package/src/tokens/spacing.ts

@@ -0,0 +1,9 @@
+export const spacing = {
+  sectionY: {
+    sm: "py-8",
+    md: "py-12",
+    lg: "py-16",
+  },
+  container: "max-w-[1440px] mx-auto",
+  content: "max-w-[1360px] mx-auto",
+} as const