@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,135 @@
+"use client"
+
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+  Transition,
+} from "@headlessui/react"
+import { Fragment, useEffect, useMemo, useState } from "react"
+import ReactCountryFlag from "react-country-flag"
+
+import { StateType } from "@core/hooks/use-toggle-state"
+import { useParams, usePathname } from "next/navigation"
+import { updateRegion } from "@core/data/cart"
+import { HttpTypes } from "@medusajs/types"
+
+type CountryOption = {
+  country: string
+  region: string
+  label: string
+}
+
+type CountrySelectProps = {
+  toggleState: StateType
+  regions: HttpTypes.StoreRegion[]
+}
+
+const CountrySelect = ({ toggleState, regions }: CountrySelectProps) => {
+  const [current, setCurrent] = useState<
+    | { country: string | undefined; region: string; label: string | undefined }
+    | undefined
+  >(undefined)
+
+  const { countryCode } = useParams()
+  const currentPath = usePathname().split(`/${countryCode}`)[1]
+
+  const { state, close } = toggleState
+
+  const options = useMemo(() => {
+    return regions
+      ?.map((r) => {
+        return r.countries?.map((c) => ({
+          country: c.iso_2,
+          region: r.id,
+          label: c.display_name,
+        }))
+      })
+      .flat()
+      .sort((a, b) => (a?.label ?? "").localeCompare(b?.label ?? ""))
+  }, [regions])
+
+  useEffect(() => {
+    if (countryCode) {
+      const option = options?.find((o) => o?.country === countryCode)
+      setCurrent(option)
+    }
+  }, [options, countryCode])
+
+  const handleChange = (option: CountryOption) => {
+    updateRegion(option.country, currentPath)
+    close()
+  }
+
+  return (
+    <div>
+      <Listbox
+        as="span"
+        onChange={handleChange}
+        defaultValue={
+          countryCode
+            ? options?.find((o) => o?.country === countryCode)
+            : undefined
+        }
+      >
+        <ListboxButton className="py-1 w-full">
+          <div className="txt-compact-small flex items-start gap-x-2">
+            <span>Shipping to:</span>
+            {current && (
+              <span className="txt-compact-small flex items-center gap-x-2">
+                {/* @ts-ignore */}
+                <ReactCountryFlag
+                  svg
+                  style={{
+                    width: "16px",
+                    height: "16px",
+                  }}
+                  countryCode={current.country ?? ""}
+                />
+                {current.label}
+              </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, index) => {
+                return (
+                  <ListboxOption
+                    key={index}
+                    value={o}
+                    className="py-2 hover:bg-gray-200 px-3 cursor-pointer flex items-center gap-x-2"
+                  >
+                    {/* @ts-ignore */}
+                    <ReactCountryFlag
+                      svg
+                      style={{
+                        width: "16px",
+                        height: "16px",
+                      }}
+                      countryCode={o?.country ?? ""}
+                    />{" "}
+                    {o?.label}
+                  </ListboxOption>
+                )
+              })}
+            </ListboxOptions>
+          </Transition>
+        </div>
+      </Listbox>
+    </div>
+  )
+}
+
+export default CountrySelect

package/templates/storefront/src/modules/layout/components/desktop-search/index.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { useState, useEffect, useRef, createContext, useContext } from "react"
+import Image from "next/image"
+import { XMark } from "@medusajs/icons"
+import { useRouter, useSearchParams } from "next/navigation"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import NavLinks from "@modules/layout/components/nav-links"
+
+type SearchContextType = {
+  isSearchOpen: boolean
+  setIsSearchOpen: (isOpen: boolean) => void
+}
+
+const SearchContext = createContext<SearchContextType | undefined>(undefined)
+
+export const useSearchContext = () => {
+  const context = useContext(SearchContext)
+  if (!context) {
+    throw new Error("useSearchContext must be used within DesktopSearch")
+  }
+  return context
+}
+
+type DesktopSearchProps = {
+  countryCode: string
+  children?: React.ReactNode
+  hideNavLinks?: boolean
+}
+
+const DesktopSearch = ({ countryCode, children, hideNavLinks = false }: DesktopSearchProps) => {
+  const searchParams = useSearchParams()
+  const q = searchParams.get("q") || ""
+  const [isSearchOpen, setIsSearchOpen] = useState(!!q)
+  const [searchQuery, setSearchQuery] = useState(q)
+  const prevOpenRef = useRef(!!q)
+  const router = useRouter()
+
+  useEffect(() => {
+    setSearchQuery(q)
+  }, [q])
+
+  // Lock body scroll when search is open
+  useEffect(() => {
+    if (isSearchOpen !== prevOpenRef.current) {
+      prevOpenRef.current = isSearchOpen
+      if (isSearchOpen) {
+        document.body.style.overflow = "hidden"
+      } else {
+        document.body.style.overflow = "unset"
+      }
+    }
+  }, [isSearchOpen])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [])
+
+  const handleCloseSearch = () => {
+    setIsSearchOpen(false)
+    // Don't clear searchQuery so it stays if user reopens
+  }
+
+  const handleSearchSubmit = () => {
+    if (searchQuery.trim()) {
+      const query = searchQuery.trim()
+      // Navigate to search page
+      router.push(`/store?q=${encodeURIComponent(query)}`)
+      setIsSearchOpen(false)
+    }
+  }
+
+  return (
+    <SearchContext.Provider value={{ isSearchOpen, setIsSearchOpen }}>
+      {/* Navigation Links - Hidden when search is open. Visible from 640px (sm) */}
+      {!hideNavLinks && (
+      <div className={`hidden sm:flex items-center gap-x-6 xl:gap-x-8 h-full transition-all duration-300 ${isSearchOpen ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100 w-auto"
+        }`}>
+        <NavLinks />
+      </div>
+      )}
+
+      {/* Search Bar - ONLY shows on Desktop (1024px+) */}
+      <div className={`hidden lg:flex items-center gap-x-6 xl:gap-x-8 h-full transition-all duration-300 ${isSearchOpen ? "opacity-100 w-auto" : "opacity-0 pointer-events-none w-0 overflow-hidden"
+        }`}>
+        <div className="flex items-center gap-3 w-[650px]">
+          <div className="relative flex-1">
+            <input
+              type="text"
+              placeholder="Search for products, brands and more"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleSearchSubmit()
+                }
+              }}
+              className="w-full h-11 pl-12 pr-4 border border-[var(--color-border)] bg-surface-muted focus:bg-surface focus:outline-none focus:ring-2 focus:ring-brand-accent"
+            />
+            <Image
+              src="/Search.svg"
+              alt="Search"
+              width={20}
+              height={20}
+              className="absolute left-4 top-1/2 -translate-y-1/2 opacity-60"
+            />
+          </div>
+
+          <button
+            onClick={handleCloseSearch}
+            className="h-11 w-11 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition"
+          >
+            <XMark className="w-4 h-5 text-muted" />
+          </button>
+        </div>
+
+      </div>
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+// Search Icon Component - to be used in action icons area
+export const DesktopSearchIcon = () => {
+  const { isSearchOpen, setIsSearchOpen } = useSearchContext()
+
+  return (
+    <button
+      onClick={() => setIsSearchOpen(true)}
+      className={`hidden lg:flex items-center hover:opacity-80 transition-all duration-300 ${isSearchOpen ? "opacity-0 pointer-events-none w-0 overflow-hidden" : "opacity-100 w-auto"
+        }`}
+      data-testid="nav-search-button"
+    >
+      <Image
+        src="/Search.svg"
+        alt="Search"
+        width={26}
+        height={26}
+        className="w-5 h-5"
+      />
+    </button>
+  )
+}
+
+export default DesktopSearch

package/templates/storefront/src/modules/layout/components/dynamic-logo/index.tsx

@@ -0,0 +1,27 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getLogoFromConfig } from "@core/data/dynamic-config"
+
+const DynamicLogo = async () => {
+  const logoUrl = (await getLogoFromConfig()) || "/Logo.png"
+
+  return (
+    <LocalizedClientLink
+      href="/"
+      className="flex items-center h-full"
+      data-testid="nav-store-link"
+    >
+      <Image
+        src={logoUrl}
+        alt="Chocomelon"
+        width={150}
+        height={60}
+        className="h-8 sm:h-10 md:h-12 lg:h-14 xl:h-auto w-auto object-contain max-w-[120px] sm:max-w-[140px] md:max-w-[150px]"
+        priority
+      />
+    </LocalizedClientLink>
+  )
+}
+
+export default DynamicLogo
+

package/templates/storefront/src/modules/layout/components/footer-categories/index.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type FooterCategoriesProps = {
+    categories: HttpTypes.StoreProductCategory[]
+}
+
+const FooterCategories = ({ categories }: FooterCategoriesProps) => {
+    return (
+        <div className="flex flex-col gap-y-3 sm:gap-y-4">
+            <h3 className="text-white text-sm sm:text-base font-semibold mb-1 sm:mb-2">
+                Shop
+            </h3>
+            <ul className="flex flex-col gap-y-1.5 sm:gap-y-2">
+                {categories.map((category) => (
+                    <li key={category.id}>
+                        <LocalizedClientLink
+                            href={`/store?category=${category.id}`}
+                            data-ga-event="footer_category_click"
+                            data-ga-label={category.name || "Category"}
+                            className="text-white text-xs sm:text-sm hover:text-pink-400 transition-colors"
+                        >
+                            {category.name}
+                        </LocalizedClientLink>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+export default FooterCategories

package/templates/storefront/src/modules/layout/components/footer-contact/index.tsx

@@ -0,0 +1,87 @@
+import ObfuscatedEmail from "@modules/common/components/obfuscated-email"
+import { getContactInfoFromConfig } from "@core/data/dynamic-config"
+
+const FooterContact = async () => {
+  const fetchedContact = await getContactInfoFromConfig()
+
+  const contactInfo = {
+    phone: fetchedContact?.phone || "+91 82382 57652",
+    email: fetchedContact?.email || "support@smartbytelabs.com",
+    address: fetchedContact?.address || "312, Silver trade center, Mota Varachha, Surat",
+  }
+
+  return (
+    <div className="flex flex-col gap-y-4 sm:gap-y-6">
+      <h3 className="text-white text-sm sm:text-base font-semibold mb-2 sm:mb-3">Contact Us</h3>
+      <div className="flex flex-col gap-y-4 sm:gap-y-5">
+        {/* Phone */}
+        <div className="flex items-center gap-4 sm:gap-5">
+          <div className="w-9 h-9 sm:w-11 sm:h-11 rounded-full bg-gray-600/50 flex items-center justify-center flex-shrink-0">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-white"
+            >
+              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
+            </svg>
+          </div>
+          <span className="text-white text-xs sm:text-sm font-medium">{contactInfo.phone}</span>
+        </div>
+
+        {/* Email */}
+        <div className="flex items-center gap-4 sm:gap-5">
+          <div className="w-9 h-9 sm:w-11 sm:h-11 rounded-full bg-gray-600/50 flex items-center justify-center flex-shrink-0">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-white"
+            >
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+              <polyline points="22,6 12,13 2,6" />
+            </svg>
+          </div>
+          <ObfuscatedEmail
+            email={contactInfo.email}
+            className="text-white text-xs sm:text-sm font-medium hover:text-pink-400 transition-colors"
+          />
+        </div>
+
+        {/* Address */}
+        <div className="flex items-start gap-4 sm:gap-5">
+          <div className="w-9 h-9 sm:w-11 sm:h-11 rounded-full bg-gray-600/50 flex items-center justify-center flex-shrink-0">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-white"
+            >
+              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+              <circle cx="12" cy="10" r="3" />
+            </svg>
+          </div>
+          <span className="text-white text-xs sm:text-sm font-medium leading-normal">{contactInfo.address}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default FooterContact
+

package/templates/storefront/src/modules/layout/components/footer-description/index.tsx

@@ -0,0 +1,12 @@
+import { getWebsiteDescriptionFromConfig } from "@core/data/dynamic-config"
+
+const FooterDescription = async () => {
+  const description = (await getWebsiteDescriptionFromConfig()) || "Chocomelon is a kids clothing brand creating soft, stylish outfits for babies and children from newborn to 15 years. Our designs focus on skin-friendly fabrics, comfortable fits, and playful details kids love. From everyday wear to special occasions, we deliver quality, durability, and trusted comfort for growing kids."
+
+  return (
+    <p className="text-white text-xs sm:text-sm leading-relaxed">{description}</p>
+  )
+}
+
+export default FooterDescription
+

package/templates/storefront/src/modules/layout/components/footer-logo/index.tsx

@@ -0,0 +1,22 @@
+import Image from "next/image"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getLogoFromConfig } from "@core/data/dynamic-config"
+
+const FooterLogo = async () => {
+  const logoUrl = (await getLogoFromConfig()) || "/Logo.png"
+
+  return (
+    <LocalizedClientLink href="/" className="block mb-3 sm:mb-4">
+      <Image
+        src={logoUrl}
+        alt="Chocomelon"
+        width={180}
+        height={60}
+        className="h-auto object-contain w-32 sm:w-40 md:w-44 lg:w-[180px]"
+      />
+    </LocalizedClientLink>
+  )
+}
+
+export default FooterLogo
+

package/templates/storefront/src/modules/layout/components/footer-newsletter/index.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { useState } from "react"
+import { subscribeToNewsletter } from "@core/data/newsletter"
+
+const FooterNewsletter = () => {
+  const [email, setEmail] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
+
+
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!email || !email.includes("@")) {
+      setMessage({ type: "error", text: "Please enter a valid email address" })
+      return
+    }
+
+    setIsSubmitting(true)
+    setMessage(null)
+
+    try {
+      const result = await subscribeToNewsletter(email)
+
+      if (result.success) {
+        // Track form submission in Google Analytics
+        if (typeof window !== 'undefined') {
+          window.dataLayer = window.dataLayer || [];
+          window.dataLayer.push({
+            event: 'form_submit',
+            form_type: 'footer_newsletter_subscribe'
+          });
+        }
+
+        setMessage({ type: "success", text: result.message })
+        setEmail("")
+        // Clear message after 3 seconds
+        setTimeout(() => {
+          setMessage(null)
+        }, 3000)
+      } else {
+        setMessage({ type: "error", text: result.message })
+      }
+    } catch (error: any) {
+      setMessage({
+        type: "error",
+        text: "Something went wrong. Please try again."
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="w-full sm:w-[560px] flex-1 sm:flex-initial">
+      <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-2">
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Enter your email"
+          className="flex-1 px-3 sm:px-4 py-2 text-sm sm:text-base rounded-lg bg-white text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500"
+          required
+          disabled={isSubmitting}
+        />
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          data-ga-event="newsletter_subscribe"
+          data-ga-label="Footer Newsletter"
+          className="px-4 sm:px-6 py-2 text-sm sm:text-base rounded-lg font-semibold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+          style={{ backgroundColor: '#8B5AB1' }}
+          onMouseEnter={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.backgroundColor = '#7a4a9a'
+            }
+          }}
+          onMouseLeave={(e) => {
+            if (!isSubmitting) {
+              e.currentTarget.style.backgroundColor = '#8B5AB1'
+            }
+          }}
+        >
+          <span className="pointer-events-none block">
+            {isSubmitting ? "..." : "Subscribe"}
+          </span>
+        </button>
+      </form>
+      {message && (
+        <p className={`text-xs sm:text-sm mt-2 ${message.type === "success" ? "text-green-400" : "text-red-400"}`}>
+          {message.text}
+        </p>
+      )}
+    </div>
+  )
+}
+
+export default FooterNewsletter