@pradip1995/theme-sahsha 3.1.0

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

@@ -0,0 +1,39 @@
+import Image from "next/image"
+import type { WhyChooseUsBlockData } from "@core/types/home"
+
+const WhyChooseUs = ({ title, features }: WhyChooseUsBlockData) => {
+  if (features.length === 0) {
+    return null
+  }
+
+  return (
+    <section className="why-choose w-full bg-white py-8 sm:py-14 md:py-16">
+      <div className="why-choose__inner">
+        <h2 className="why-choose__title">{title}</h2>
+
+        <div className="why-choose__grid">
+          {features.map((feature, index) => (
+            <div
+              key={`${feature.name}-${index}`}
+              className="why-choose__item"
+            >
+              <div className="why-choose__icon-wrap">
+                <Image
+                  src={feature.icon}
+                  alt={feature.name}
+                  width={120}
+                  height={120}
+                  className="why-choose__icon"
+                  unoptimized
+                />
+              </div>
+              <h3 className="why-choose__label">{feature.name}</h3>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default WhyChooseUs

package/src/components/product-carousel.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { useRef } from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { HttpTypes } from "@medusajs/types"
+import type { ProductCardRating } from "@core/types/product-card"
+import ProductCard from "@theme/slots/product/ProductCard"
+
+type ProductCarouselProps = {
+  products: HttpTypes.StoreProduct[]
+  region: HttpTypes.StoreRegion
+  ratings?: ProductCardRating[]
+}
+
+const ProductCarousel = ({ products, region, ratings }: ProductCarouselProps) => {
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const trackRef = useRef<HTMLDivElement>(null)
+
+  const scrollBySlide = (direction: "prev" | "next") => {
+    const viewport = viewportRef.current
+    const track = trackRef.current
+    if (!viewport || !track) return
+
+    const firstSlide = track.querySelector<HTMLElement>(".bestsellers-carousel__slide")
+    if (!firstSlide) return
+
+    const trackStyles = getComputedStyle(track)
+    const gap =
+      Number.parseFloat(trackStyles.columnGap || trackStyles.gap || "0") || 0
+    const slideStep = firstSlide.offsetWidth + gap
+
+    viewport.scrollBy({
+      left: direction === "next" ? slideStep : -slideStep,
+      behavior: "smooth",
+    })
+  }
+
+  return (
+    <div className="bestsellers-carousel">
+      <button
+        type="button"
+        className="bestsellers-carousel__nav bestsellers-carousel__nav--prev"
+        onClick={() => scrollBySlide("prev")}
+        aria-label="Previous products"
+      >
+        <ChevronLeft size={20} strokeWidth={1.75} />
+      </button>
+
+      <div ref={viewportRef} className="bestsellers-carousel__viewport">
+        <div ref={trackRef} className="bestsellers-carousel__track">
+          {products.map((product) => (
+            <div key={product.id} className="bestsellers-carousel__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>
+          ))}
+        </div>
+      </div>
+
+      <button
+        type="button"
+        className="bestsellers-carousel__nav bestsellers-carousel__nav--next"
+        onClick={() => scrollBySlide("next")}
+        aria-label="Next products"
+      >
+        <ChevronRight size={20} strokeWidth={1.75} />
+      </button>
+    </div>
+  )
+}
+
+export default ProductCarousel

package/src/layouts/MainLayoutShell.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import { colorClasses } from "@theme/tokens"
+
+type MainLayoutShellProps = {
+  children: ReactNode
+}
+
+export function MainLayoutShell({ children }: MainLayoutShellProps) {
+  return (
+    <main className={`${colorClasses.pageBg} min-h-screen w-full mobile-layout-shell`}>
+      {children}
+    </main>
+  )
+}

package/src/primitives/Button.tsx

@@ -0,0 +1,31 @@
+import { Button as MedusaButton } from "@medusajs/ui"
+import { clx } from "@medusajs/ui"
+import type { ComponentProps } from "react"
+
+type ButtonVariant = "primary" | "secondary" | "ghost"
+
+type ButtonProps = Omit<ComponentProps<typeof MedusaButton>, "variant"> & {
+  variant?: ButtonVariant
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-brand-accent hover:bg-brand-accent-hover text-white rounded-none font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-xs",
+  secondary:
+    "bg-transparent border border-brand-accent text-brand-accent rounded-none font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-xs hover:bg-brand-accent hover:text-white",
+  ghost:
+    "bg-transparent text-heading hover:opacity-70 rounded-none font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-xs",
+}
+
+export function Button({
+  variant = "primary",
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <MedusaButton className={clx(variantClasses[variant], className)} {...props}>
+      {children}
+    </MedusaButton>
+  )
+}

package/src/primitives/Card.tsx

@@ -0,0 +1,32 @@
+import { clx } from "@medusajs/ui"
+import type { HTMLAttributes } from "react"
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+  padding?: "sm" | "md" | "lg"
+}
+
+const paddingClasses = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+}
+
+export function Card({
+  padding = "md",
+  className,
+  children,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={clx(
+        "rounded-xl bg-white border border-gray-100 shadow-sm",
+        paddingClasses[padding],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/primitives/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button"
+export { Card } from "./Card"

package/src/slots/account/ForgotPassword/index.tsx

@@ -0,0 +1 @@
+export { default } from "@pradip1995/commerce-auth/components/forgot-password"

package/src/slots/account/GoogleLogin/index.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { initiateGoogleAuth } from "@core/data/customer"
+import { GoogleLoginButton } from "@pradip1995/commerce-auth/components/google-login"
+import { useParams } from "next/navigation"
+
+const BUTTON_CLASS =
+  "w-full flex items-center justify-center gap-2.5 py-3 px-4 border border-gray-200 bg-surface hover:bg-gray-50 transition-all shadow-sm hover:shadow-md active:scale-[0.98]"
+
+type GoogleLoginProps = {
+  countryCode?: string
+}
+
+export default function GoogleLogin({
+  countryCode: countryCodeProp,
+}: GoogleLoginProps = {}) {
+  const params = useParams()
+
+  return (
+    <GoogleLoginButton
+      countryCode={
+        countryCodeProp ?? (params?.countryCode as string | undefined)
+      }
+      initiateAuth={initiateGoogleAuth}
+      className={BUTTON_CLASS}
+    />
+  )
+}

package/src/slots/account/Login/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/account/components/login"

package/src/slots/account/LoginTemplate/index.tsx

@@ -0,0 +1,12 @@
+import type { AccountPageData } from "@core/types/account"
+import { getLoginPagePanelFromConfig } from "@lib/data/login-panel"
+
+import LoginTemplateClient from "./login-template-client"
+
+type LoginTemplateProps = Pick<AccountPageData, "countryCode">
+
+export default async function LoginTemplate(_props: LoginTemplateProps) {
+  const panelImage = await getLoginPagePanelFromConfig()
+
+  return <LoginTemplateClient panelImage={panelImage} />
+}

package/src/slots/account/LoginTemplate/login-template-client.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { Suspense, useState } from "react"
+
+import { LOGIN_VIEW } from "@core/types/account"
+import Login from "@theme/slots/account/Login"
+import Register from "@theme/slots/account/Register"
+import ForgotPassword from "@theme/slots/account/ForgotPassword"
+import Spinner from "@modules/common/icons/spinner"
+
+type LoginTemplateClientProps = {
+  panelImage: string
+}
+
+const VIEW_COPY = {
+  [LOGIN_VIEW.SIGN_IN]: {
+    title: "Sign in",
+    subtitle: "Access your exclusive collection",
+  },
+  [LOGIN_VIEW.REGISTER]: {
+    title: "Create account",
+    subtitle: "Join Sahsha for a curated experience",
+  },
+  [LOGIN_VIEW.FORGOT_PASSWORD]: {
+    title: "Forgot password",
+    subtitle: "We'll help you get back in",
+  },
+} as const
+
+export default function LoginTemplateClient({
+  panelImage,
+}: LoginTemplateClientProps) {
+  const [currentView, setCurrentView] = useState(LOGIN_VIEW.SIGN_IN)
+  const copy = VIEW_COPY[currentView]
+
+  const renderView = () => {
+    switch (currentView) {
+      case LOGIN_VIEW.REGISTER:
+        return <Register setCurrentView={setCurrentView} />
+      case LOGIN_VIEW.FORGOT_PASSWORD:
+        return <ForgotPassword setCurrentView={setCurrentView} />
+      default:
+        return <Login setCurrentView={setCurrentView} />
+    }
+  }
+
+  return (
+    <div className="account-login">
+      <div className="account-login__hero" aria-hidden>
+        <img
+          src={panelImage}
+          alt=""
+          className="account-login__hero-image"
+          loading="eager"
+          decoding="async"
+        />
+      </div>
+
+      <div className="account-login__panel">
+        <div className="account-login__panel-inner">
+          <header className="account-login__header">
+            <h1 className="account-login__title">{copy.title}</h1>
+            <p className="account-login__subtitle">{copy.subtitle}</p>
+          </header>
+
+          <div
+            className={`account-login__card account-auth account-auth--${currentView}`}
+          >
+            <Suspense
+              fallback={
+                <div className="flex justify-center py-12">
+                  <Spinner />
+                </div>
+              }
+            >
+              {renderView()}
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/slots/account/Register/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/account/components/register"

package/src/slots/cart/CartItem/index.tsx

@@ -0,0 +1,11 @@
+import { HttpTypes } from "@medusajs/types"
+import CartItemCard from "@modules/cart/components/cart-item-card"
+
+export type CartItemSlotProps = {
+  item: HttpTypes.StoreCartLineItem
+  currencyCode: string
+}
+
+export default function CartItem({ item, currencyCode }: CartItemSlotProps) {
+  return <CartItemCard item={item} currencyCode={currencyCode} />
+}

package/src/slots/cart/CartSummary/index.tsx

@@ -0,0 +1,8 @@
+import type { CartSummaryProps } from "@core/types/cart"
+import Summary from "@modules/cart/templates/summary"
+
+export type CartSummarySlotProps = CartSummaryProps
+
+export default function CartSummary({ cart, customer }: CartSummarySlotProps) {
+  return <Summary cart={cart} customer={customer} />
+}

package/src/slots/checkout/CheckoutForm/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/checkout/templates/checkout-form"

package/src/slots/checkout/CheckoutSummary/index.tsx

@@ -0,0 +1 @@
+export { default } from "@modules/checkout/templates/checkout-summary"

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

@@ -0,0 +1,95 @@
+import type { FooterSlotData } from "@core/types/layout"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import FooterLogo from "@modules/layout/components/footer-logo"
+import FooterNewsletter from "@modules/layout/components/footer-newsletter"
+import FooterSocial from "@modules/layout/components/footer-social"
+
+const COMPANY_LINKS = [
+  { href: "/", label: "Home" },
+  { href: "/store", label: "Shop" },
+  { href: "/about", label: "About" },
+  { href: "/contact", label: "Contact" },
+  { href: "/help", label: "Help" },
+  { href: "/privacy-policy", label: "Privacy Policy" },
+  { href: "/terms-of-use", label: "Terms of Use" },
+]
+
+export default function Footer({ categories, socialLinks }: FooterSlotData) {
+  return (
+    <footer className="site-footer">
+      <div
+        className="site-footer__inner mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16"
+        style={{ maxWidth: "var(--container-max)" }}
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
+          <div className="sm:col-span-2 lg:col-span-1">
+            <FooterLogo />
+            <p className="site-footer__text max-w-xs mt-4">
+              Kurtis and ethnic wear curated for everyday elegance. Handpicked
+              styles, crafted with comfort and grace.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="site-footer__label">Shop</h3>
+            <ul className="space-y-2.5">
+              {(categories?.slice(0, 6) ?? []).map((cat) => (
+                <li key={cat.id}>
+                  <LocalizedClientLink
+                    href={`/store?category=${cat.id}`}
+                    className="site-footer__link"
+                  >
+                    {cat.name}
+                  </LocalizedClientLink>
+                </li>
+              ))}
+              {!categories?.length && (
+                <li>
+                  <LocalizedClientLink href="/store" className="site-footer__link">
+                    All products
+                  </LocalizedClientLink>
+                </li>
+              )}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="site-footer__label">Company</h3>
+            <ul className="space-y-2.5">
+              {COMPANY_LINKS.map((link) => (
+                <li key={link.href}>
+                  <LocalizedClientLink href={link.href} className="site-footer__link">
+                    {link.label}
+                  </LocalizedClientLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="site-footer__label">Newsletter</h3>
+            <p className="site-footer__text mb-4">
+              Subscribe for exclusive offers and new arrivals.
+            </p>
+            <FooterNewsletter />
+            <FooterSocial links={socialLinks ?? []} />
+          </div>
+        </div>
+
+        <div className="site-footer__divider mt-12 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p className="site-footer__copyright">
+            © {new Date().getFullYear()} Sahsha. All rights reserved.
+          </p>
+          <div className="flex gap-6">
+            <LocalizedClientLink href="/privacy-policy" className="site-footer__link text-xs">
+              Privacy
+            </LocalizedClientLink>
+            <LocalizedClientLink href="/terms-of-use" className="site-footer__link text-xs">
+              Terms
+            </LocalizedClientLink>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

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

@@ -0,0 +1,50 @@
+import { Suspense } from "react"
+import type { NavLayoutData } from "@controllers/layout/load-layout-data"
+import DesktopSearch from "@modules/layout/components/desktop-search"
+import DynamicLogo from "@modules/layout/components/dynamic-logo"
+import CartButton from "@modules/layout/components/cart-button"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import NavHeaderShell from "./nav-header-shell"
+import NavHeaderContent from "./nav-header-content"
+
+export default function Nav({ currentLocale, customer, categories, collections }: NavLayoutData) {
+  const cartButton = (
+    <Suspense
+      fallback={
+        <LocalizedClientLink
+          href="/cart"
+          className="nav-header-icon-link flex items-center"
+          data-testid="nav-cart-link"
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src="/shopping-bag (3).svg"
+            alt="Cart"
+            width={22}
+            height={22}
+            className="nav-header-icon w-[22px] h-[22px]"
+          />
+        </LocalizedClientLink>
+      }
+    >
+      <CartButton />
+    </Suspense>
+  )
+
+  return (
+    <Suspense fallback={null}>
+      <DesktopSearch countryCode={currentLocale || "in"} hideNavLinks>
+        <NavHeaderShell>
+          <NavHeaderContent
+            currentLocale={currentLocale || "in"}
+            customer={customer}
+            categories={categories}
+            collections={collections}
+            logo={<DynamicLogo />}
+            cartButton={cartButton}
+          />
+        </NavHeaderShell>
+      </DesktopSearch>
+    </Suspense>
+  )
+}

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

@@ -0,0 +1,74 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type NavCategoriesDropdownProps = {
+  categories: HttpTypes.StoreProductCategory[]
+}
+
+export default function NavCategoriesDropdown({
+  categories,
+}: NavCategoriesDropdownProps) {
+  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), 180)
+  }
+
+  if (!categories.length) {
+    return (
+      <LocalizedClientLink href="/store" className="nav-luxury-link group">
+        <span className="nav-luxury-link-label">Categories</span>
+        <span className="nav-luxury-link-line" aria-hidden />
+      </LocalizedClientLink>
+    )
+  }
+
+  return (
+    <div
+      className={`nav-categories${open ? " nav-categories--open" : ""}`}
+      onMouseEnter={handleOpen}
+      onMouseLeave={handleClose}
+      onFocus={handleOpen}
+      onBlur={handleClose}
+    >
+      <button
+        type="button"
+        className="nav-luxury-link nav-categories__trigger group"
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        <span className="nav-luxury-link-label">Categories</span>
+        <span className="nav-luxury-link-line" aria-hidden />
+      </button>
+
+      <div className="nav-categories__panel" role="menu" aria-hidden={!open}>
+        <ul className="nav-categories__list">
+          {categories.map((category) => (
+            <li key={category.id} role="none">
+              <LocalizedClientLink
+                href={`/store?category=${category.id}`}
+                className="nav-categories__link"
+                role="menuitem"
+                onClick={() => setOpen(false)}
+              >
+                <span className="nav-categories__link-text">{category.name}</span>
+              </LocalizedClientLink>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}