@pradip1995/theme-sahsha 3.1.0

package/src/slots/layout/Nav/nav-collections-dropdown.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import Image from "next/image"
+import { useRef, useState } from "react"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+import { getCollectionImage } from "@lib/category-collection-images"
+
+type NavCollectionsDropdownProps = {
+  collections: HttpTypes.StoreCollection[]
+}
+
+export default function NavCollectionsDropdown({
+  collections,
+}: NavCollectionsDropdownProps) {
+  const [open, setOpen] = useState(false)
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleOpen = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    closeTimerRef.current = setTimeout(() => setOpen(false), 200)
+  }
+
+  if (!collections.length) {
+    return (
+      <LocalizedClientLink href="/collections" className="nav-luxury-link group">
+        <span className="nav-luxury-link-label">Collections</span>
+        <span className="nav-luxury-link-line" aria-hidden />
+      </LocalizedClientLink>
+    )
+  }
+
+  return (
+    <div
+      className={`nav-collections${open ? " nav-collections--open" : ""}`}
+      onMouseEnter={handleOpen}
+      onMouseLeave={handleClose}
+      onFocus={handleOpen}
+      onBlur={handleClose}
+    >
+      <button
+        type="button"
+        className="nav-luxury-link nav-collections__trigger group"
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <span className="nav-luxury-link-label">Collections</span>
+        <span className="nav-luxury-link-line" aria-hidden />
+      </button>
+
+      <div className="nav-collections__panel" aria-hidden={!open}>
+        <div className="nav-collections__grid">
+          {collections.map((collection) => {
+            const imageUrl = getCollectionImage(collection)
+            const title = collection.title || "Collection"
+
+            return (
+              <LocalizedClientLink
+                key={collection.id}
+                href={`/store?collection=${collection.id}`}
+                className="nav-collections__card"
+                onClick={() => setOpen(false)}
+              >
+                <div className="nav-collections__card-media">
+                  {imageUrl ? (
+                    <Image
+                      src={imageUrl}
+                      alt={title}
+                      fill
+                      unoptimized
+                      sizes="160px"
+                      className="nav-collections__card-image"
+                    />
+                  ) : (
+                    <div className="nav-collections__card-placeholder">
+                      <PlaceholderImage size={28} />
+                    </div>
+                  )}
+                </div>
+                <span className="nav-collections__card-title">{title}</span>
+              </LocalizedClientLink>
+            )
+          })}
+        </div>
+
+        <div className="nav-collections__footer">
+          <LocalizedClientLink
+            href="/collections"
+            className="nav-collections__view-all"
+            onClick={() => setOpen(false)}
+          >
+            View all collections
+          </LocalizedClientLink>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/slots/layout/Nav/nav-header-content.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+import { type ReactNode } from "react"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import MobileMenu from "@modules/layout/components/mobile-menu"
+import {
+  DesktopSearchIcon,
+  useSearchContext,
+} from "@modules/layout/components/desktop-search"
+import AccountDropdown from "@modules/layout/components/account-dropdown"
+import WishlistCounter from "@modules/layout/components/wishlist-counter"
+import SmartSearchResults from "@modules/layout/components/smart-search/smart-search-results"
+import SmartSearchInline from "@modules/layout/components/smart-search/smart-search-inline"
+import NavLinkLuxury from "./nav-link-luxury"
+import NavCategoriesDropdown from "./nav-categories-dropdown"
+import NavCollectionsDropdown from "./nav-collections-dropdown"
+
+type NavHeaderContentProps = {
+  currentLocale: string
+  customer: HttpTypes.StoreCustomer | null
+  categories: HttpTypes.StoreProductCategory[]
+  collections: HttpTypes.StoreCollection[]
+  logo: ReactNode
+  cartButton: ReactNode
+}
+
+export default function NavHeaderContent({
+  currentLocale,
+  customer,
+  categories,
+  collections,
+  logo,
+  cartButton,
+}: NavHeaderContentProps) {
+  const { isSearchOpen } = useSearchContext()
+
+  return (
+    <div
+      className="nav-header-search-wrap relative"
+      data-search-open={isSearchOpen ? "true" : "false"}
+    >
+      <header className="nav-header">
+        <div className="nav-header-inner">
+          <div className="nav-header-mobile relative flex h-full w-full items-center lg:hidden">
+            {isSearchOpen ? (
+              <div className="nav-header-search-inline">
+                <SmartSearchInline />
+              </div>
+            ) : (
+              <>
+                <div className="nav-header-mobile__start flex flex-1 items-center justify-start min-w-0">
+                  <MobileMenu
+                    customer={customer}
+                    countryCode={currentLocale || "in"}
+                    categories={categories}
+                    collections={collections}
+                  />
+                </div>
+
+                <div className="nav-header-mobile__logo absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none">
+                  <div className="nav-header-logo-wrap pointer-events-auto flex justify-center">
+                    {logo}
+                  </div>
+                </div>
+
+                <div className="nav-header-mobile__end flex flex-1 items-center justify-end min-w-0">
+                  <div className="nav-header-icons flex items-center justify-end gap-2 min-w-0">
+                    <DesktopSearchIcon />
+
+                    {!customer ? (
+                      <LocalizedClientLink
+                        href="/account"
+                        className="nav-header-profile-link"
+                        data-testid="nav-login-link"
+                      >
+                        <span className="sr-only">Login</span>
+                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                        <img
+                          src="/Account.svg"
+                          alt="Login"
+                          width={22}
+                          height={22}
+                          className="nav-header-icon w-[22px] h-[22px]"
+                        />
+                      </LocalizedClientLink>
+                    ) : (
+                      <AccountDropdown customer={customer} />
+                    )}
+
+                    <div className="nav-header-cart flex items-center">{cartButton}</div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          {isSearchOpen ? (
+            <div className="nav-header-search-inline nav-header-search-inline--desktop">
+              <SmartSearchInline />
+            </div>
+          ) : (
+          <div className="hidden lg:grid h-full grid-cols-[1fr_auto_1fr] items-center gap-4">
+                <div className="flex items-center justify-start min-w-0">
+                  <nav
+                    className="nav-header-menu flex items-center gap-8 xl:gap-10"
+                    aria-label="Main"
+                  >
+                    <NavLinkLuxury href="/" label="Home" />
+                    <NavLinkLuxury href="/store" label="Shop" />
+                    <NavCategoriesDropdown categories={categories} />
+                    <NavCollectionsDropdown collections={collections} />
+                    <NavLinkLuxury href="/help" label="Help" />
+                  </nav>
+                </div>
+
+                <div className="nav-header-logo-wrap flex justify-center px-2">
+                  {logo}
+                </div>
+
+                <div className="nav-header-actions flex items-center justify-end h-full w-full min-w-0">
+                  <div className="nav-header-icons flex items-center justify-end gap-5 min-w-0">
+                    <DesktopSearchIcon />
+
+                    {!customer ? (
+                      <LocalizedClientLink
+                        href="/account"
+                        className="nav-header-login-btn"
+                        data-testid="nav-login-link"
+                      >
+                        Login
+                      </LocalizedClientLink>
+                    ) : (
+                      <AccountDropdown customer={customer} />
+                    )}
+
+                    <LocalizedClientLink
+                      href="/wishlist"
+                      className="nav-header-icon-link inline-flex items-center relative"
+                      data-testid="nav-wishlist-link"
+                    >
+                      <span className="sr-only">Wishlist</span>
+                      {/* eslint-disable-next-line @next/next/no-img-element */}
+                      <img
+                        src="/Wishlist.svg"
+                        alt=""
+                        width={22}
+                        height={22}
+                        className="nav-header-icon w-[22px] h-[22px]"
+                      />
+                      <WishlistCounter />
+                    </LocalizedClientLink>
+
+                    <div className="nav-header-cart flex items-center">{cartButton}</div>
+                  </div>
+                </div>
+              </div>
+          )}
+        </div>
+      </header>
+
+      <SmartSearchResults countryCode={currentLocale || "in"} />
+    </div>
+  )
+}

package/src/slots/layout/Nav/nav-header-shell.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { useSearchContext } from "@modules/layout/components/desktop-search"
+import { usePathname } from "next/navigation"
+import { useEffect, useState, type ReactNode } from "react"
+
+function isHomePath(pathname: string) {
+  const segments = pathname.split("/").filter(Boolean)
+  return segments.length <= 1
+}
+
+export default function NavHeaderShell({ children }: { children: ReactNode }) {
+  const pathname = usePathname() || ""
+  const isHome = isHomePath(pathname)
+  const { isSearchOpen } = useSearchContext()
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    if (!isHome) {
+      setScrolled(true)
+      return
+    }
+
+    const onScroll = () => {
+      setScrolled(window.scrollY > 24)
+    }
+
+    onScroll()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [isHome])
+
+  const isTransparent = isHome && !scrolled && !isSearchOpen
+
+  return (
+    <>
+      <div
+        className="nav-header-fixed"
+        data-nav-transparent={isTransparent ? "true" : "false"}
+        data-search-open={isSearchOpen ? "true" : "false"}
+      >
+        {children}
+      </div>
+      <div className="nav-header-spacer" aria-hidden />
+    </>
+  )
+}

package/src/slots/layout/Nav/nav-link-luxury.tsx

@@ -0,0 +1,15 @@
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type NavLinkLuxuryProps = {
+  href: string
+  label: string
+}
+
+export default function NavLinkLuxury({ href, label }: NavLinkLuxuryProps) {
+  return (
+    <LocalizedClientLink href={href} className="nav-luxury-link group">
+      <span className="nav-luxury-link-label">{label}</span>
+      <span className="nav-luxury-link-line" aria-hidden />
+    </LocalizedClientLink>
+  )
+}

package/src/slots/layout/PromoBar/index.tsx

@@ -0,0 +1,9 @@
+import PromoBarContent from "./promo-bar-content"
+
+export default function PromoBar() {
+  return (
+    <div className="promo-bar" role="region" aria-label="Store promotions">
+      <PromoBarContent />
+    </div>
+  )
+}

package/src/slots/layout/PromoBar/promo-bar-content.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import {
+  Truck,
+  Sparkles,
+  Gem,
+  Tag,
+  ShieldCheck,
+  type LucideIcon,
+} from "lucide-react"
+
+export type PromoMessage = {
+  icon: LucideIcon
+  text: string
+  highlight?: string
+}
+
+const PROMO_MESSAGES: PromoMessage[] = [
+  {
+    icon: Truck,
+    text: "Free Shipping on Orders Above ₹999",
+  },
+  {
+    icon: Sparkles,
+    text: "New Arrivals Are Live • Shop The Latest Saree Collection",
+  },
+  {
+    icon: Gem,
+    text: "Handpicked Sarees Crafted For Every Celebration",
+  },
+  {
+    icon: Tag,
+    text: "Flat 10% OFF On Your First Order • Use Code: WELCOME10",
+    highlight: "WELCOME10",
+  },
+  {
+    icon: ShieldCheck,
+    text: "Free Shipping • Easy Returns • Secure Payments",
+  },
+]
+
+const HOLD_MS = 1000
+const ANIMATION_MS = 280
+
+function PromoMessageItem({ text, highlight }: PromoMessage) {
+  if (!highlight || !text.includes(highlight)) {
+    return <span>{text}</span>
+  }
+
+  const [before, after] = text.split(highlight)
+
+  return (
+    <span>
+      {before}
+      <span className="promo-bar__highlight">{highlight}</span>
+      {after}
+    </span>
+  )
+}
+
+export default function PromoBarContent() {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [phase, setPhase] = useState<"idle" | "exit" | "enter">("enter")
+
+  useEffect(() => {
+    let holdTimer: ReturnType<typeof setTimeout>
+    let exitTimer: ReturnType<typeof setTimeout>
+    let enterTimer: ReturnType<typeof setTimeout>
+
+    const scheduleNext = () => {
+      holdTimer = setTimeout(() => {
+        setPhase("exit")
+
+        exitTimer = setTimeout(() => {
+          setActiveIndex((i) => (i + 1) % PROMO_MESSAGES.length)
+          setPhase("enter")
+
+          enterTimer = setTimeout(() => {
+            setPhase("idle")
+            scheduleNext()
+          }, ANIMATION_MS)
+        }, ANIMATION_MS)
+      }, HOLD_MS)
+    }
+
+    const startTimer = setTimeout(() => {
+      setPhase("idle")
+      scheduleNext()
+    }, ANIMATION_MS)
+
+    return () => {
+      clearTimeout(startTimer)
+      clearTimeout(holdTimer)
+      clearTimeout(exitTimer)
+      clearTimeout(enterTimer)
+    }
+  }, [])
+
+  const message = PROMO_MESSAGES[activeIndex]
+  const Icon = message.icon
+
+  return (
+    <div className="promo-bar__viewport" aria-live="polite">
+      <div
+        key={activeIndex}
+        className={`promo-bar__slide promo-bar__slide--${phase}`}
+      >
+        <span className="promo-bar__icon" aria-hidden>
+          <Icon size={14} strokeWidth={1.65} />
+        </span>
+        <span className="promo-bar__text">
+          <PromoMessageItem {...message} />
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/slots/order/OrderDetails/index.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
+import type { HttpTypes } from "@medusajs/types"
+
+type OrderDetailsProps = {
+  order: HttpTypes.StoreOrder
+}
+
+export default function OrderDetails({ order }: OrderDetailsProps) {
+  return <OrderDetailsTemplate order={order} />
+}