@pradip1995/theme-sahsha 3.1.0

package/src/blocks/home/ShopByAge/collections-showcase-client.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { HttpTypes } from "@medusajs/types"
+import type { ProductCardRating } from "@core/types/product-card"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import ProductCard from "@theme/slots/product/ProductCard"
+import type { CollectionTab } from "./collections-showcase-types"
+
+type CollectionsShowcaseClientProps = {
+  tabs: CollectionTab[]
+  productsByCollection: Record<string, HttpTypes.StoreProduct[]>
+  region: HttpTypes.StoreRegion
+  ratings?: ProductCardRating[]
+}
+
+function getDefaultActiveTabId(tabs: CollectionTab[]) {
+  if (!tabs.length) {
+    return ""
+  }
+
+  const middleIndex = Math.floor(tabs.length / 2)
+  return tabs[middleIndex]?.id ?? tabs[0].id
+}
+
+const CollectionsShowcaseClient = ({
+  tabs,
+  productsByCollection,
+  region,
+  ratings,
+}: CollectionsShowcaseClientProps) => {
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const [activeId, setActiveId] = useState(() => getDefaultActiveTabId(tabs))
+
+  const activeProducts = productsByCollection[activeId] ?? []
+
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (viewport) {
+      viewport.scrollLeft = 0
+    }
+  }, [activeId])
+
+  const scrollByPage = (direction: "prev" | "next") => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const amount = Math.max(viewport.clientWidth * 0.85, 280)
+    viewport.scrollBy({
+      left: direction === "next" ? amount : -amount,
+      behavior: "smooth",
+    })
+  }
+
+  if (!tabs.length) {
+    return null
+  }
+
+  return (
+    <>
+      <nav className="collections-showcase__tabs" aria-label="Collections">
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeId
+
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              className={`collections-showcase__tab${isActive ? " is-active" : ""}`}
+              aria-current={isActive ? "true" : undefined}
+              onClick={() => setActiveId(tab.id)}
+            >
+              {tab.title}
+            </button>
+          )
+        })}
+      </nav>
+
+      <div className="collections-showcase__slider">
+        <button
+          type="button"
+          className="collections-showcase__nav collections-showcase__nav--prev"
+          onClick={() => scrollByPage("prev")}
+          aria-label="Previous products"
+        >
+          <ChevronLeft size={18} strokeWidth={1.5} />
+        </button>
+
+        <div ref={viewportRef} className="collections-showcase__viewport">
+          <div className="collections-showcase__track">
+            {activeProducts.length > 0 ? (
+              activeProducts.map((product) => (
+                <div key={product.id} className="collections-showcase__slide">
+                  <ProductCard
+                    product={product}
+                    region={region}
+                    rating={ratings?.find((r) => r.product_id === product.id)}
+                    className="h-full"
+                    imageClassName="shop-grid__card-image"
+                    quickAddClassName="product-card__quick-add--hero"
+                    showWishlistIcon
+                  />
+                </div>
+              ))
+            ) : (
+              <p className="collections-showcase__empty">No products in this collection yet.</p>
+            )}
+          </div>
+        </div>
+
+        <button
+          type="button"
+          className="collections-showcase__nav collections-showcase__nav--next"
+          onClick={() => scrollByPage("next")}
+          aria-label="Next products"
+        >
+          <ChevronRight size={18} strokeWidth={1.5} />
+        </button>
+      </div>
+
+      <div className="collections-showcase__footer">
+        <LocalizedClientLink href="/collections" className="collections-showcase__view-all">
+          View all
+        </LocalizedClientLink>
+      </div>
+    </>
+  )
+}
+
+export default CollectionsShowcaseClient

package/src/blocks/home/ShopByAge/collections-showcase-types.ts

@@ -0,0 +1,4 @@
+export type CollectionTab = {
+  id: string
+  title: string
+}

package/src/blocks/home/ShopByAge/index.tsx

@@ -0,0 +1,168 @@
+import { listCollections } from "@core/data/collections"
+import { listProducts } from "@core/data/products"
+import { fetchRatings } from "@core/data/reviews"
+import { getRegion } from "@core/data/regions"
+import type { ProductCardRating } from "@core/types/product-card"
+import { HttpTypes } from "@medusajs/types"
+import { storefrontConfig } from "@storefront-config"
+import CollectionsShowcaseClient from "./collections-showcase-client"
+import type { CollectionTab } from "./collections-showcase-types"
+
+type ShopByAgeProps = {
+  collections: HttpTypes.StoreCollection[]
+}
+
+const FEATURED_TAB_COUNT = 3
+const PRODUCTS_PER_COLLECTION = 12
+
+function normalizeCollectionKey(value: string) {
+  return value.toLowerCase().replace(/[\s_-]+/g, "")
+}
+
+function getCollectionMetadata(collection: HttpTypes.StoreCollection) {
+  return (collection.metadata || {}) as Record<string, unknown>
+}
+
+function isHomeFeatured(collection: HttpTypes.StoreCollection) {
+  const value = getCollectionMetadata(collection).home_featured
+  return value === true || value === "true" || value === "1"
+}
+
+function getHomeSort(collection: HttpTypes.StoreCollection) {
+  const raw = getCollectionMetadata(collection).home_sort
+  const num = Number.parseInt(String(raw ?? ""), 10)
+  return Number.isFinite(num) ? num : 999
+}
+
+function pickFeaturedFromMetadata(collections: HttpTypes.StoreCollection[]) {
+  return collections
+    .filter(isHomeFeatured)
+    .sort((a, b) => getHomeSort(a) - getHomeSort(b))
+    .slice(0, FEATURED_TAB_COUNT)
+}
+
+function pickFeaturedFromConfig(collections: HttpTypes.StoreCollection[]) {
+  const configuredHandles = storefrontConfig.homeFeaturedCollectionHandles ?? []
+  if (!configuredHandles.length) {
+    return []
+  }
+
+  const picked: HttpTypes.StoreCollection[] = []
+
+  for (const handle of configuredHandles) {
+    const key = normalizeCollectionKey(handle)
+    const found = collections.find((collection) => {
+      const byHandle = normalizeCollectionKey(collection.handle || "")
+      const byTitle = normalizeCollectionKey(collection.title || "")
+      return byHandle === key || byTitle === key
+    })
+
+    if (found && !picked.some((item) => item.id === found.id)) {
+      picked.push(found)
+    }
+  }
+
+  return picked
+}
+
+function pickFeaturedCollections(collections: HttpTypes.StoreCollection[]) {
+  const fromMetadata = pickFeaturedFromMetadata(collections)
+  if (fromMetadata.length > 0) {
+    return fromMetadata
+  }
+
+  const fromConfig = pickFeaturedFromConfig(collections)
+  if (fromConfig.length > 0) {
+    return fromConfig
+  }
+
+  return collections.slice(0, FEATURED_TAB_COUNT)
+}
+
+const ShopByAge = async ({ collections: fallbackCollections }: ShopByAgeProps) => {
+  let collections = fallbackCollections
+
+  try {
+    const result = await listCollections({
+      limit: "100",
+      fields: "id,handle,title,metadata",
+    })
+    if (result.collections.length > 0) {
+      collections = result.collections
+    }
+  } catch {
+    collections = fallbackCollections
+  }
+
+  if (!collections || collections.length === 0) {
+    return null
+  }
+
+  const countryCode = process.env.NEXT_PUBLIC_DEFAULT_REGION ?? "in"
+  const region = await getRegion(countryCode)
+
+  if (!region) {
+    return null
+  }
+
+  const ratings = (await fetchRatings().catch(() => [])) as ProductCardRating[]
+  const featuredCollections = pickFeaturedCollections(collections)
+  const tabs: CollectionTab[] = featuredCollections.map((collection) => ({
+    id: collection.id,
+    title: collection.title || "Collection",
+  }))
+
+  const productGroups = await Promise.all(
+    featuredCollections.map(async (collection) => {
+      try {
+        const { response } = await listProducts({
+          regionId: region.id,
+          queryParams: {
+            collection_id: collection.id,
+            limit: PRODUCTS_PER_COLLECTION,
+            fields: "*variants.calculated_price",
+          },
+        })
+
+        return {
+          collectionId: collection.id,
+          products: response.products ?? [],
+        }
+      } catch {
+        return {
+          collectionId: collection.id,
+          products: [] as HttpTypes.StoreProduct[],
+        }
+      }
+    })
+  )
+
+  const productsByCollection = productGroups.reduce<
+    Record<string, HttpTypes.StoreProduct[]>
+  >((acc, group) => {
+    acc[group.collectionId] = group.products
+    return acc
+  }, {})
+
+  return (
+    <section className="collections-showcase w-full bg-page-bg">
+      <div
+        className="collections-showcase__inner mx-auto"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <header className="collections-showcase__header">
+          <p className="collections-showcase__eyebrow">What&apos;s new</p>
+        </header>
+
+        <CollectionsShowcaseClient
+          tabs={tabs}
+          productsByCollection={productsByCollection}
+          region={region}
+          ratings={ratings}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default ShopByAge

package/src/blocks/home/ShopByCategory/index.tsx

@@ -0,0 +1,111 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+import {
+  getCategoryImage,
+  getCategoryProductCount,
+} from "@lib/category-collection-images"
+
+type ShopByCategoryProps = {
+  categories: HttpTypes.StoreProductCategory[]
+}
+
+const ShopByCategory = ({ categories }: ShopByCategoryProps) => {
+  if (!categories || categories.length === 0) {
+    return null
+  }
+
+  const parentCategories = categories.filter(
+    (category) => !category.parent_category_id
+  )
+
+  if (parentCategories.length === 0) {
+    return null
+  }
+
+  const categoryGroups: HttpTypes.StoreProductCategory[][] = []
+  for (let i = 0; i < parentCategories.length; i += 5) {
+    categoryGroups.push(parentCategories.slice(i, i + 5))
+  }
+
+  return (
+    <section className="shop-by-category w-full bg-white py-8 sm:py-9 md:py-10 font-[family-name:var(--sf-font-family)]">
+      <div
+        className="shop-by-category__inner"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="shop-by-category__header">
+          <h2 className="font-display text-2xl md:text-3xl text-heading">
+            Shop by category
+          </h2>
+        </div>
+
+        <div className="shop-by-category__groups">
+          {categoryGroups.map((group, groupIndex) => (
+            <div key={groupIndex} className="shop-by-category__grid">
+              {group.map((category, index) => {
+                const categoryImage = getCategoryImage(category)
+                const productCount = getCategoryProductCount(category)
+                const categoryUrl = category.id
+                  ? `/store?category=${category.id}`
+                  : "#"
+                const rowClass =
+                  index < 3
+                    ? "shop-by-category__card--top"
+                    : "shop-by-category__card--bottom"
+
+                return (
+                  <LocalizedClientLink
+                    key={category.id}
+                    href={categoryUrl}
+                    data-ga-event="shop_by_category_click"
+                    data-ga-label={category.name || "Category"}
+                    className={`shop-by-category__card group ${rowClass}`}
+                  >
+                    <div className="shop-by-category__frame">
+                      {categoryImage ? (
+                        <Image
+                          src={categoryImage}
+                          alt={category.name || "Category"}
+                          fill
+                          sizes="(max-width: 1024px) 50vw, 33vw"
+                          className="shop-by-category__image"
+                        />
+                      ) : (
+                        <div className="shop-by-category__placeholder">
+                          <PlaceholderImage size={48} />
+                        </div>
+                      )}
+
+                      <div className="shop-by-category__overlay" aria-hidden />
+
+                      {productCount > 0 && (
+                        <p className="shop-by-category__count">
+                          {productCount}{" "}
+                          {productCount === 1 ? "Product" : "Products"}
+                        </p>
+                      )}
+
+                      <div className="shop-by-category__content">
+                        <h3 className="shop-by-category__name">{category.name}</h3>
+                        <p className="shop-by-category__cta">
+                          View the collection
+                          <span className="shop-by-category__cta-arrow" aria-hidden>
+                            ›
+                          </span>
+                        </p>
+                      </div>
+                    </div>
+                  </LocalizedClientLink>
+                )
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ShopByCategory

package/src/blocks/home/Testimonials/index.tsx

@@ -0,0 +1,25 @@
+import { enrichTestimonialsData } from "@lib/data/testimonials"
+import TestimonialsClient from "./testimonials-client"
+
+interface TestimonialsProps {
+  initialData?: {
+    title: string
+    eyebrow?: string
+    description?: string
+    testimonials: Array<{
+      id: string
+      text: string
+      name: string
+      rating: number
+      avatar?: string
+    }>
+  } | null
+}
+
+const Testimonials = async ({ initialData }: TestimonialsProps) => {
+  const enrichedData = await enrichTestimonialsData(initialData ?? null)
+
+  return <TestimonialsClient initialData={enrichedData} />
+}
+
+export default Testimonials

package/src/blocks/home/Testimonials/reviews-scroll.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import { useEffect, useState, type CSSProperties } from "react"
+import Image from "next/image"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+export type ReviewItem = {
+  id: string
+  text: string
+  name: string
+  rating: number
+  avatar?: string
+}
+
+type ReviewsScrollProps = {
+  items: ReviewItem[]
+}
+
+function CardStars({ rating }: { rating: number }) {
+  const clamped = Math.max(0, Math.min(5, rating))
+  const fullStars = Math.floor(clamped)
+  const hasHalf = clamped % 1 >= 0.5
+
+  return (
+    <div
+      className="customer-reviews__card-stars"
+      aria-label={`${clamped} out of 5 stars`}
+    >
+      {Array.from({ length: 5 }, (_, index) => {
+        const filled = index < fullStars || (index === fullStars && hasHalf)
+
+        return (
+          <span
+            key={index}
+            className={
+              filled
+                ? "customer-reviews__star customer-reviews__star--filled"
+                : "customer-reviews__star"
+            }
+          >
+            ★
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+function ReviewCard({ item }: { item: ReviewItem }) {
+  return (
+    <article className="customer-reviews__card">
+      <div className="customer-reviews__card-media">
+        {item.avatar ? (
+          <Image
+            src={item.avatar}
+            alt={item.name}
+            fill
+            sizes="(max-width: 768px) 80vw, 320px"
+            className="customer-reviews__card-image"
+            unoptimized
+          />
+        ) : (
+          <div className="customer-reviews__card-placeholder">
+            <PlaceholderImage size={36} />
+          </div>
+        )}
+      </div>
+
+      <div className="customer-reviews__card-body">
+        <p className="customer-reviews__card-quote">{item.text}</p>
+        <CardStars rating={item.rating} />
+
+        <p className="customer-reviews__card-meta">
+          <span className="customer-reviews__card-name">{item.name}</span>
+          <span className="customer-reviews__card-divider" aria-hidden>
+            |
+          </span>
+          <span className="customer-reviews__card-verified">Verified</span>
+        </p>
+      </div>
+    </article>
+  )
+}
+
+const ReviewsScroll = ({ items }: ReviewsScrollProps) => {
+  const [reduceMotion, setReduceMotion] = useState(false)
+  const loopedItems = items.length > 1 ? [...items, ...items] : items
+  const canAnimate = !reduceMotion && items.length > 1
+  const duration = Math.max(items.length * 7, 18)
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const update = () => setReduceMotion(media.matches)
+    update()
+    media.addEventListener("change", update)
+    return () => media.removeEventListener("change", update)
+  }, [])
+
+  return (
+    <div className="customer-reviews__scroll">
+      <div className="customer-reviews__fade customer-reviews__fade--top" aria-hidden />
+      <div className="customer-reviews__fade customer-reviews__fade--bottom" aria-hidden />
+
+      <div className="customer-reviews__viewport">
+        <div
+          className={`customer-reviews__track${canAnimate ? " customer-reviews__track--animate" : ""}`}
+          style={
+            canAnimate
+              ? ({ "--reviews-duration": `${duration}s` } as CSSProperties)
+              : undefined
+          }
+        >
+          {loopedItems.map((item, index) => (
+            <ReviewCard key={`${item.id}-${index}`} item={item} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ReviewsScroll

package/src/blocks/home/Testimonials/testimonials-client.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import ReviewsScroll, { type ReviewItem } from "./reviews-scroll"
+
+interface TestimonialsClientProps {
+  initialData?: {
+    title: string
+    eyebrow?: string
+    description?: string
+    testimonials: ReviewItem[]
+  } | null
+}
+
+const DEFAULT_EYEBROW = "Trusted by Those Who Lounge in Luxury"
+const DEFAULT_TITLE_LINE_1 = "What Our Customers"
+const DEFAULT_TITLE_LINE_2 = "Are Saying"
+const DEFAULT_DESCRIPTION =
+  "Crafted with the finest materials and designed for the modern woman, our pieces promise unparalleled comfort without compromising on style. Join the community of women who have transformed their at-home attire into statements of sophistication"
+
+const defaultTestimonials: ReviewItem[] = [
+  {
+    id: "1",
+    text: "Absolutely love the quality! The rompers are so soft, and the colors stay vibrant even after multiple washes.",
+    name: "Priya Sharma",
+    rating: 5,
+  },
+  {
+    id: "2",
+    text: "The sizing guide was perfect. Shipping was super fast — received it in 2 days. Packaging was cute and sustainable.",
+    name: "Rahul Mehta",
+    rating: 5,
+  },
+  {
+    id: "3",
+    text: "Finally found trendy clothes for my toddler that are comfortable. ChocoMelon is my go-to for birthday outfits now!",
+    name: "Anita Kulkarni",
+    rating: 5,
+  },
+  {
+    id: "4",
+    text: "Best quality kids clothing I have ever bought. The fabric is soft and the designs are adorable. Highly recommend!",
+    name: "Sneha Patel",
+    rating: 5,
+  },
+]
+
+function HeaderStars() {
+  return (
+    <div className="customer-reviews__header-stars" aria-label="5 out of 5 stars">
+      {Array.from({ length: 5 }, (_, index) => (
+        <span
+          key={index}
+          className="customer-reviews__star customer-reviews__star--filled"
+        >
+          ★
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function ReviewTitle({ title }: { title: string }) {
+  const normalized = title.trim()
+  const upper = normalized.toUpperCase()
+
+  if (upper === "WHAT OUR CUSTOMERS ARE SAYING") {
+    return (
+      <h2 className="customer-reviews__title">
+        <span className="customer-reviews__title-line">{DEFAULT_TITLE_LINE_1}</span>
+        <span className="customer-reviews__title-line">{DEFAULT_TITLE_LINE_2}</span>
+      </h2>
+    )
+  }
+
+  const areIndex = upper.indexOf(" ARE ")
+  if (areIndex > 0) {
+    return (
+      <h2 className="customer-reviews__title">
+        <span>{normalized.slice(0, areIndex + 1)}</span>
+        <span>{normalized.slice(areIndex + 1).trim()}</span>
+      </h2>
+    )
+  }
+
+  return <h2 className="customer-reviews__title">{normalized}</h2>
+}
+
+const TestimonialsClient = ({ initialData }: TestimonialsClientProps) => {
+  const title = initialData?.title || `${DEFAULT_TITLE_LINE_1} ${DEFAULT_TITLE_LINE_2}`
+  const eyebrow = initialData?.eyebrow || DEFAULT_EYEBROW
+  const description = initialData?.description || DEFAULT_DESCRIPTION
+  const testimonials = (
+    initialData?.testimonials && initialData.testimonials.length > 0
+      ? initialData.testimonials
+      : defaultTestimonials
+  ).map((testimonial, index) => ({
+    ...testimonial,
+    id: testimonial.id || `testimonial-${index}`,
+    rating: Number.isFinite(testimonial.rating) ? testimonial.rating : 5,
+  }))
+
+  if (testimonials.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="customer-reviews w-full bg-white">
+      <div className="customer-reviews__inner">
+        <div className="customer-reviews__layout">
+          <div className="customer-reviews__intro">
+            <div className="customer-reviews__intro-top">
+              <HeaderStars />
+              <p className="customer-reviews__eyebrow">{eyebrow}</p>
+            </div>
+
+            <ReviewTitle title={title} />
+            <p className="customer-reviews__description">{description}</p>
+          </div>
+
+          <ReviewsScroll items={testimonials} />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default TestimonialsClient