@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/layout/components/language-select/index.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from "@headlessui/react"
+import { Fragment, useEffect, useMemo, useState, useTransition } from "react"
+import { useRouter } from "next/navigation"
+import ReactCountryFlag from "react-country-flag"
+
+import { StateType } from "@core/hooks/use-toggle-state"
+import { updateLocale } from "@core/data/locale-actions"
+import { Locale } from "@core/data/locales"
+
+type LanguageOption = {
+  code: string
+  name: string
+  localizedName: string
+  countryCode: string
+}
+
+const getCountryCodeFromLocale = (localeCode: string): string => {
+  try {
+    const locale = new Intl.Locale(localeCode)
+    if (locale.region) {
+      return locale.region.toUpperCase()
+    }
+    const maximized = locale.maximize()
+    return maximized.region?.toUpperCase() ?? localeCode.toUpperCase()
+  } catch {
+    const parts = localeCode.split(/[-_]/)
+    return parts.length > 1 ? parts[1].toUpperCase() : parts[0].toUpperCase()
+  }
+}
+
+type LanguageSelectProps = {
+  toggleState: StateType
+  locales: Locale[]
+  currentLocale: string | null
+}
+
+/**
+ * Gets the localized display name for a language code using Intl API.
+ * Falls back to the provided name if Intl is unavailable.
+ */
+const getLocalizedLanguageName = (
+  code: string,
+  fallbackName: string,
+  displayLocale: string = "en-US"
+): string => {
+  try {
+    const displayNames = new Intl.DisplayNames([displayLocale], {
+      type: "language",
+    })
+    return displayNames.of(code) ?? fallbackName
+  } catch {
+    return fallbackName
+  }
+}
+
+const DEFAULT_OPTION: LanguageOption = {
+  code: "",
+  name: "Default",
+  localizedName: "Default",
+  countryCode: "",
+}
+
+const LanguageSelect = ({
+  toggleState,
+  locales,
+  currentLocale,
+}: LanguageSelectProps) => {
+  const [current, setCurrent] = useState<LanguageOption | undefined>(undefined)
+  const [isPending, startTransition] = useTransition()
+  const router = useRouter()
+
+  const { state, close } = toggleState
+
+  const options = useMemo(() => {
+    const localeOptions = locales.map((locale) => ({
+      code: locale.code,
+      name: locale.name,
+      localizedName: getLocalizedLanguageName(
+        locale.code,
+        locale.name,
+        currentLocale ?? "en-US"
+      ),
+      countryCode: getCountryCodeFromLocale(locale.code),
+    }))
+    return [DEFAULT_OPTION, ...localeOptions]
+  }, [locales, currentLocale])
+
+  useEffect(() => {
+    if (currentLocale) {
+      const option = options.find(
+        (o) => o.code.toLowerCase() === currentLocale.toLowerCase()
+      )
+      setCurrent(option ?? DEFAULT_OPTION)
+    } else {
+      setCurrent(DEFAULT_OPTION)
+    }
+  }, [options, currentLocale])
+
+  const handleChange = (option: LanguageOption) => {
+    startTransition(async () => {
+      await updateLocale(option.code)
+      close()
+      router.refresh()
+    })
+  }
+
+  return (
+    <div>
+      <Listbox
+        as="span"
+        onChange={handleChange}
+        defaultValue={
+          currentLocale
+            ? options.find(
+                (o) => o.code.toLowerCase() === currentLocale.toLowerCase()
+              ) ?? DEFAULT_OPTION
+            : DEFAULT_OPTION
+        }
+        disabled={isPending}
+      >
+        <ListboxButton className="py-1 w-full">
+          <div className="txt-compact-small flex items-start gap-x-2">
+            <span>Language:</span>
+            {current && (
+              <span className="txt-compact-small flex items-center gap-x-2">
+                {current.countryCode && (
+                  /* @ts-ignore */
+                  <ReactCountryFlag
+                    svg
+                    style={{
+                      width: "16px",
+                      height: "16px",
+                    }}
+                    countryCode={current.countryCode}
+                  />
+                )}
+                {isPending ? "..." : current.localizedName}
+              </span>
+            )}
+          </div>
+        </ListboxButton>
+        <div className="flex relative w-full min-w-[320px]">
+          <Transition
+            show={state}
+            as={Fragment}
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <ListboxOptions
+              className="absolute -bottom-[calc(100%-36px)] left-0 xsmall:left-auto xsmall:right-0 max-h-[442px] overflow-y-scroll z-[900] bg-white drop-shadow-md text-small-regular uppercase text-black no-scrollbar rounded-rounded w-full"
+              static
+            >
+              {options.map((o) => (
+                <ListboxOption
+                  key={o.code || "default"}
+                  value={o}
+                  className="py-2 hover:bg-gray-200 px-3 cursor-pointer flex items-center gap-x-2"
+                >
+                  {o.countryCode ? (
+                    /* @ts-ignore */
+                    <ReactCountryFlag
+                      svg
+                      style={{
+                        width: "16px",
+                        height: "16px",
+                      }}
+                      countryCode={o.countryCode}
+                    />
+                  ) : (
+                    <span style={{ width: "16px", height: "16px" }} />
+                  )}
+                  {o.localizedName}
+                </ListboxOption>
+              ))}
+            </ListboxOptions>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+  )
+}
+
+export default LanguageSelect

package/templates/storefront/src/modules/layout/components/medusa-cta/index.tsx

@@ -0,0 +1,21 @@
+import { Text } from "@medusajs/ui"
+
+import Medusa from "../../../common/icons/medusa"
+import NextJs from "../../../common/icons/nextjs"
+
+const MedusaCTA = () => {
+  return (
+    <Text className="flex gap-x-2 txt-compact-small-plus items-center">
+      Powered by
+      <a href="https://www.medusajs.com" target="_blank" rel="noreferrer">
+        <Medusa fill="#9ca3af" className="fill-[#9ca3af]" />
+      </a>
+      &
+      <a href="https://nextjs.org" target="_blank" rel="noreferrer">
+        <NextJs fill="#9ca3af" />
+      </a>
+    </Text>
+  )
+}
+
+export default MedusaCTA

package/templates/storefront/src/modules/layout/components/mobile-menu/index.tsx

@@ -0,0 +1,296 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { usePathname } from "next/navigation"
+import Image from "next/image"
+
+import Menu from "@modules/common/icons/menu"
+import X from "@modules/common/icons/x"
+import User from "@modules/common/icons/user"
+import Package from "@modules/common/icons/package"
+import MapPin from "@modules/common/icons/map-pin"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import CartButton from "@modules/layout/components/cart-button"
+import { Suspense } from "react"
+import WishlistCounter from "@modules/layout/components/wishlist-counter"
+
+import { signout } from "@core/data/customer"
+import { HttpTypes } from "@medusajs/types"
+
+// Helper function to get profile image URL from metadata
+const getProfileImageUrl = (customer: HttpTypes.StoreCustomer | null): string | null => {
+  if (!customer) {
+    return null
+  }
+  const metadata = customer.metadata as Record<string, any> | undefined
+  if (metadata?.profile_image_url) {
+    return metadata.profile_image_url
+  }
+  return null
+}
+
+const MobileMenu = ({ customer, countryCode }: { customer: HttpTypes.StoreCustomer | null, countryCode: string }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+  const scrollYRef = useRef(0)
+
+  const isActive = (href: string) => {
+    const path = pathname.split("/").slice(2).join("/") || "/"
+    const linkPath = href === "/" ? "/" : href.replace(/^\//, "")
+
+    if (href === "/") {
+      return path === "" || path === "/"
+    }
+
+    return path === linkPath || path.startsWith(linkPath + "/")
+  }
+
+  const linkClass = (href: string) => {
+    const active = isActive(href)
+    return `flex items-center gap-3 py-3 px-4 text-base transition-colors ${active
+      ? "text-brand-accent font-semibold bg-brand-accent-muted"
+      : "text-body hover:text-brand-accent hover:bg-surface-muted"
+      }`
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      // Save current scroll position
+      scrollYRef.current = window.scrollY || document.documentElement.scrollTop || 0
+
+      // Lock scroll on both html and body
+      const body = document.body
+      const html = document.documentElement
+
+      // Apply styles to prevent scrolling
+      body.style.position = "fixed"
+      body.style.top = `-${scrollYRef.current}px`
+      body.style.left = "0"
+      body.style.right = "0"
+      body.style.overflow = "hidden"
+      body.style.width = "100%"
+
+      html.style.overflow = "hidden"
+      html.style.height = "100%"
+
+      // Prevent touch scrolling on backdrop (but allow in menu panel)
+      const preventScroll = (e: TouchEvent | WheelEvent) => {
+        const target = e.target as Element
+        // Allow scrolling inside the menu panel
+        if (target.closest('[data-menu-panel]')) {
+          return
+        }
+        e.preventDefault()
+      }
+
+      // Add event listeners
+      document.addEventListener("touchmove", preventScroll as EventListener, { passive: false })
+      document.addEventListener("wheel", preventScroll as EventListener, { passive: false })
+
+      return () => {
+        document.removeEventListener("touchmove", preventScroll as EventListener)
+        document.removeEventListener("wheel", preventScroll as EventListener)
+      }
+    } else {
+      // Restore scrolling
+      const body = document.body
+      const html = document.documentElement
+
+      body.style.position = ""
+      body.style.top = ""
+      body.style.left = ""
+      body.style.right = ""
+      body.style.overflow = ""
+      body.style.width = ""
+
+      html.style.overflow = ""
+      html.style.height = ""
+
+      // Restore scroll position
+      const savedScroll = scrollYRef.current
+      if (savedScroll !== undefined && savedScroll !== null) {
+        window.scrollTo({
+          top: savedScroll,
+          behavior: "auto"
+        })
+      }
+    }
+  }, [isOpen])
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const closeMenu = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      {/* Hamburger Button */}
+      <button
+        onClick={toggleMenu}
+        className="lg:hidden p-2 hover:opacity-80 transition-opacity text-heading"
+        aria-label="Toggle menu"
+        data-testid="mobile-menu-button"
+        type="button"
+      >
+        <Menu size={20} className="w-5 h-5" />
+      </button>
+
+      {/* Mobile Menu Overlay */}
+      <div
+        className={`fixed inset-0 z-[100] lg:hidden transition-opacity duration-300 ${isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+        onClick={closeMenu}
+      >
+        {/* Backdrop */}
+        <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+        {/* Menu Panel */}
+        <div
+          className={`absolute left-0 top-0 h-full w-64 min-[350px]:w-72 min-[450px]:w-80 max-w-[85vw] bg-page-bg shadow-xl overflow-y-auto transition-transform duration-300 ease-out ${isOpen ? 'translate-x-0' : '-translate-x-full'}`}
+          onClick={(e) => e.stopPropagation()}
+          data-menu-panel
+          style={{ display: 'flex', flexDirection: 'column' }}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-[var(--color-border)] flex-none">
+            <h2 className="text-lg font-semibold text-heading">Menu</h2>
+            <button
+              onClick={closeMenu}
+              className="p-2 hover:opacity-80 transition-opacity"
+              aria-label="Close menu"
+              type="button"
+            >
+              <X size={24} className="text-heading" />
+            </button>
+          </div>
+
+          {/* Navigation Links */}
+          <nav className="py-2 flex-1">
+            <LocalizedClientLink
+              href="/"
+              className={linkClass("/")}
+              onClick={closeMenu}
+              data-testid="mobile-nav-home-link"
+            >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M7.5 16.6667V11.6667H12.5V16.6667H16.6667V10H19.1667L10 2.5L0.833336 10H3.33334V16.6667H7.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+              <span>Home</span>
+            </LocalizedClientLink>
+            <LocalizedClientLink
+              href="/store"
+              className={linkClass("/store")}
+              onClick={closeMenu}
+              data-testid="mobile-nav-shop-link"
+            >
+              <Package size={20} />
+              <span>Shop</span>
+            </LocalizedClientLink>
+
+            {customer && (
+              <LocalizedClientLink
+                href="/wishlist"
+                className={linkClass("/wishlist")}
+                onClick={closeMenu}
+                data-testid="mobile-nav-wishlist-link"
+              >
+                <div className="relative">
+                  <Image
+                    src="/Wishlist.svg"
+                    alt="Wishlist"
+                    width={20}
+                    height={20}
+                    className="w-5 h-5"
+                  />
+                  <WishlistCounter />
+                </div>
+                <span>Wishlist</span>
+              </LocalizedClientLink>
+            )}
+
+            <LocalizedClientLink
+              href="/contact"
+              className={linkClass("/contact")}
+              onClick={closeMenu}
+              data-testid="mobile-nav-contact-link"
+            >
+              <MapPin size={20} />
+              <span>Contact Us</span>
+            </LocalizedClientLink>
+
+            <LocalizedClientLink
+              href="/help"
+              className={linkClass("/help")}
+              onClick={closeMenu}
+              data-testid="mobile-nav-help-link"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10"></circle>
+                <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+                <line x1="12" y1="17" x2="12.01" y2="17"></line>
+              </svg>
+              <span>Help</span>
+            </LocalizedClientLink>
+            {customer && (
+              <LocalizedClientLink
+                href="/account"
+                className={linkClass("/account")}
+                onClick={closeMenu}
+                data-testid="mobile-nav-account-link"
+              >
+                {getProfileImageUrl(customer) ? (
+                  <div className="w-8 h-8 rounded-full overflow-hidden border border-gray-200 flex-shrink-0">
+                    <Image
+                      src={getProfileImageUrl(customer)!}
+                      alt="Account"
+                      width={32}
+                      height={32}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <User size={20} />
+                )}
+                <span>Account</span>
+              </LocalizedClientLink>
+            )}
+          </nav>
+
+          <div className="mt-auto border-t border-[var(--color-border)] flex-none bg-page-bg">
+            {!customer ? (
+              <LocalizedClientLink
+                href="/account"
+                className={linkClass("/account")}
+                onClick={closeMenu}
+                data-testid="mobile-nav-login-link"
+              >
+                <User size={20} />
+                <span>Login</span>
+              </LocalizedClientLink>
+            ) : (
+              <button
+                onClick={async () => {
+                  closeMenu()
+                  await signout(countryCode)
+                }}
+                className="flex items-center gap-3 w-full py-4 px-4 text-base text-red-600 hover:bg-red-50 transition-colors"
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                  <polyline points="16 17 21 12 16 7" />
+                  <line x1="21" y1="12" x2="9" y2="12" />
+                </svg>
+                <span>Logout</span>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default MobileMenu
+

package/templates/storefront/src/modules/layout/components/nav-links/index.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+const NavLinks = () => {
+  const pathname = usePathname() || ""
+
+  const isActive = (href: string) => {
+    // Remove country code from pathname for comparison
+    const path = pathname ? pathname.split("/").slice(2).join("/") || "/" : "/"
+    const linkPath = href === "/" ? "/" : href.replace(/^\//, "")
+
+    // For home page
+    if (href === "/") {
+      return path === "" || path === "/"
+    }
+
+    // For other pages, check if path starts with linkPath
+    return path === linkPath || path.startsWith(linkPath + "/")
+  }
+
+  const linkClass = (href: string) => {
+    const active = isActive(href)
+    return `text-sm xl:text-base transition-colors whitespace-nowrap ${active
+      ? "text-brand-accent"
+      : "text-muted hover:text-brand-accent"
+      }`
+  }
+
+  return (
+    <>
+      <LocalizedClientLink
+        href="/"
+        className={linkClass("/")}
+        data-testid="nav-home-link"
+      >
+        Home
+      </LocalizedClientLink>
+      <LocalizedClientLink
+        href="/store"
+        className={linkClass("/store")}
+        data-testid="nav-shop-link"
+      >
+        Shop
+      </LocalizedClientLink>
+      <LocalizedClientLink
+        href="/contact"
+        className={linkClass("/contact")}
+        data-testid="nav-contact-link"
+      >
+        Contact Us
+      </LocalizedClientLink>
+      <LocalizedClientLink
+        href="/help"
+        className={linkClass("/help")}
+        data-testid="nav-help-link"
+      >
+        Help
+      </LocalizedClientLink>
+    </>
+  )
+}
+
+export default NavLinks
+

package/templates/storefront/src/modules/layout/components/nav-wrapper/index.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { useModal } from "@core/context/modal-context"
+import React from "react"
+
+export default function NavWrapper({ children }: { children: React.ReactNode }) {
+    const { isModalOpen } = useModal()
+
+    if (isModalOpen) {
+        return null
+    }
+
+    return <>{children}</>
+}

package/templates/storefront/src/modules/layout/components/promo-bar/index.tsx

@@ -0,0 +1,7 @@
+import { loadLayoutData } from "@controllers/layout/load-layout-data"
+import PromoBar from "@theme/slots/layout/PromoBar"
+
+export default async function PromoBarWithData() {
+  const { promoBar } = await loadLayoutData()
+  return <PromoBar {...promoBar} />
+}