@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/layout/components/verification-banner/index.tsx

@@ -0,0 +1,217 @@
+"use client"
+
+import React, { useState } from "react"
+import { usePathname } from "next/navigation"
+import { HttpTypes } from "@medusajs/types"
+import { sendCustomerOTP, verifyCustomerOTP } from "@core/data/customer-registration"
+import { updateCustomer } from "@core/data/customer"
+import { XMark } from "@medusajs/icons"
+
+interface VerificationBannerProps {
+  customer: HttpTypes.StoreCustomer
+}
+
+const VerificationBanner: React.FC<VerificationBannerProps> = ({ customer }) => {
+  const pathname = usePathname()
+  const [isVisible, setIsVisible] = useState(true)
+  const [isVerifying, setIsVerifying] = useState(false)
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otpCode, setOtpCode] = useState("")
+  const [otpError, setOtpError] = useState<string | null>(null)
+  const [isSendingOtp, setIsSendingOtp] = useState(false)
+  const [isSubmittingOtp, setIsSubmittingOtp] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
+
+  // Logic to hide on specific pages
+  const countryCode = pathname.split('/')[1]
+  const isHomePage = pathname === `/${countryCode}` || pathname === `/${countryCode}/` || pathname === "/"
+  const isProductListing = pathname.includes(`/${countryCode}/store`) || pathname.includes(`/${countryCode}/collections`) || pathname.includes(`/${countryCode}/categories`)
+  const isProductDetails = pathname.includes(`/${countryCode}/products`)
+
+  // Check if verified
+  const isVerified = 
+    (customer as any).email_verified === true || 
+    (customer as any).email_verified === "true" ||
+    customer.metadata?.email_verified === true || 
+    customer.metadata?.email_verified === "true"
+
+  if (!isVisible || (isVerified && !isSuccess) || isHomePage || isProductListing || isProductDetails) return null
+
+  const handleSendOtp = async () => {
+    setIsSendingOtp(true)
+    setOtpError(null)
+    try {
+      const res = await sendCustomerOTP(customer.id, "email_verification")
+      if (res.success) {
+        setOtpToken(res.token)
+        setIsVerifying(true)
+      } else {
+        setOtpError(res.error || "Failed to send OTP")
+      }
+    } catch (err: any) {
+      setOtpError(err.message || "An error occurred")
+    } finally {
+      setIsSendingOtp(false)
+    }
+  }
+
+  const handleVerifyOtp = async () => {
+    if (!otpToken || !otpCode) return
+
+    setIsSubmittingOtp(true)
+    setOtpError(null)
+    try {
+      const res = await verifyCustomerOTP(otpToken, otpCode)
+      if (res.success) {
+        setIsSuccess(true)
+        setIsVerifying(false)
+        
+        // Persist verification status in metadata
+        const newMetadata = {
+          ...(customer.metadata as Record<string, any> || {}),
+          email_verified: true
+        }
+        await updateCustomer({ metadata: newMetadata })
+        
+        // Hide banner after success
+        setTimeout(() => setIsVisible(false), 3000)
+      } else {
+        setOtpError(res.error || "Invalid OTP")
+      }
+    } catch (err: any) {
+      setOtpError(err.message || "An error occurred")
+    } finally {
+      setIsSubmittingOtp(false)
+    }
+  }
+
+  return (
+    <>
+      {/* Banner */}
+      <div className="bg-[#FFF9F2] border-b border-amber-100/50 py-2 px-4 sticky top-0 z-[40]">
+        <div className="max-w-[1440px] mx-auto flex items-center justify-center gap-4 relative">
+          <div className="flex items-center gap-3">
+            <div className="flex w-6 h-6 bg-amber-100 rounded-full items-center justify-center text-amber-600 flex-shrink-0">
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+            </div>
+            <p className="text-[13px] sm:text-[14px] font-medium text-amber-900/80 tracking-tight text-center">
+              Verify your email to enjoy shopping at Chocomelon. <span className="font-bold text-amber-900">{customer.email}</span>
+              <button 
+                onClick={handleSendOtp}
+                disabled={isSendingOtp}
+                className="ml-4 text-amber-700 hover:text-amber-900 font-bold disabled:opacity-50 inline-flex items-center gap-1 border-b border-amber-200 hover:border-amber-900"
+              >
+                {isSendingOtp ? "..." : "Verify Now"}
+              </button>
+            </p>
+          </div>
+          <button 
+            onClick={() => setIsVisible(false)}
+            className="absolute right-0 text-amber-300 hover:text-amber-600 p-1"
+          >
+            <XMark size={18} />
+          </button>
+        </div>
+      </div>
+
+      {/* OTP Modal */}
+      {isVerifying && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/40 backdrop-blur-[2px] p-4">
+          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-gray-100">
+            <div className="bg-white p-6 text-center relative border-b border-gray-50">
+              <button 
+                onClick={() => setIsVerifying(false)}
+                className="absolute right-3 top-3 p-1.5 bg-gray-50 rounded-full hover:bg-gray-100 text-gray-400"
+              >
+                <XMark size={16} />
+              </button>
+              <div className="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-3 border" style={{ backgroundColor: 'rgba(139, 90, 177, 0.1)', borderColor: 'rgba(139, 90, 177, 0.2)' }}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8B5AB1" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+              </div>
+              <h3 className="text-lg font-bold tracking-tight text-gray-900">Verify Email</h3>
+              <p className="text-gray-500 text-[11px] mt-1.5 leading-relaxed px-4">
+                We've sent a 6-digit code to <br/>
+                <span className="font-bold" style={{ color: '#8B5AB1' }}>{customer.email}</span>
+              </p>
+            </div>
+            
+            <div className="p-6">
+              <div className="space-y-6 text-center">
+                <div>
+                  <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-[0.2em] mb-3">Verification Code</label>
+                  <input
+                    type="text"
+                    maxLength={6}
+                    value={otpCode}
+                    onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, ""))}
+                    className="w-full text-center text-3xl font-black tracking-[0.3em] py-3 border-b-2 border-gray-100 focus:border-purple-500 focus:outline-none placeholder:text-gray-100 bg-transparent"
+                    placeholder="000000"
+                    autoFocus
+                  />
+                </div>
+
+                {otpError && (
+                  <div className="text-red-500 text-[11px] font-bold flex items-center justify-center gap-1.5">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
+                    {otpError}
+                  </div>
+                )}
+
+                <div className="flex flex-col gap-3">
+                  <button
+                    type="button"
+                    onClick={handleVerifyOtp}
+                    disabled={isSubmittingOtp || otpCode.length < 6}
+                    className="w-full py-3 text-white rounded-xl font-bold text-sm flex items-center justify-center"
+                    style={{ backgroundColor: '#8B5AB1' }}
+                  >
+                    {isSubmittingOtp ? "Verifying..." : "Verify & Continue"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleSendOtp}
+                    className="text-[11px] font-bold uppercase tracking-wider"
+                    style={{ color: '#8B5AB1' }}
+                  >
+                    Resend Code
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Success Notification - Premium Static Modal */}
+      {isSuccess && (
+        <div className="fixed inset-0 z-[10001] flex items-center justify-center p-4">
+          {/* Plain Overlay */}
+          <div className="absolute inset-0 bg-gray-900/40" />
+          
+          {/* High-End Card */}
+          <div className="relative bg-white p-10 rounded-[40px] flex flex-col items-center text-center max-w-sm w-full border-4 border-gray-50 shadow-sm">
+            <div className="w-40 h-40 flex items-center justify-center mb-4">
+              <img 
+                src="/uploads/profile-images/t-shirt.gif" 
+                alt="Success" 
+                className="w-36 h-36 object-contain"
+              />
+            </div>
+            
+            <div className="space-y-1">
+              <h3 className="text-2xl font-black text-gray-900 tracking-tighter uppercase leading-none mb-2">Email Verified</h3>
+              <div className="h-1 w-10 bg-[#8B5AB1] mx-auto rounded-full mb-4" />
+              <p className="text-gray-400 text-[10px] font-bold uppercase tracking-widest mb-3">Welcome to the family</p>
+              <p className="text-gray-600 text-[13px] font-medium leading-relaxed px-2">
+                Your email is successfully verified.<br/>
+                Now you can enjoy shopping at <span className="text-gray-900 font-bold">Chocomelon</span>.
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VerificationBanner

package/templates/storefront/src/modules/layout/components/wishlist-counter/index.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { useWishlist } from "@core/context/wishlist-context"
+
+const WishlistCounter = () => {
+    const { count } = useWishlist()
+
+    if (count === 0) return null
+
+    return (
+        <div className="absolute -top-1.5 -right-1.5 h-3.5 w-3.5 sm:h-4 sm:w-4 flex items-center justify-center bg-[#8B5AB1] text-white text-[8px] sm:text-[10px] rounded-full font-bold shadow-sm">
+            {count}
+        </div>
+    )
+}
+
+export default WishlistCounter

package/templates/storefront/src/modules/layout/templates/footer/index.tsx

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

package/templates/storefront/src/modules/layout/templates/nav/index.tsx

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

package/templates/storefront/src/modules/order/components/cancel-order-modal/index.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import { XMark } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Button, Heading, Select, Text, clx } from "@medusajs/ui"
+import { listReturnReasons } from "@core/data/returns"
+import React from "react"
+
+type CancelOrderModalProps = {
+  isOpen: boolean
+  isSubmitting: boolean
+  onClose: () => void
+  onConfirm: (reasonId: string) => void
+}
+
+const CancelOrderModal = ({
+  isOpen,
+  isSubmitting,
+  onClose,
+  onConfirm,
+}: CancelOrderModalProps) => {
+  const [reasons, setReasons] = React.useState<HttpTypes.StoreReturnReason[]>([])
+  const [selectedReasonId, setSelectedReasonId] = React.useState("")
+  const [isFetchingReasons, setIsFetchingReasons] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!isOpen) {
+      setSelectedReasonId("")
+      return
+    }
+
+    let isMounted = true
+
+    const fetchReasons = async () => {
+      setIsFetchingReasons(true)
+      const res = await listReturnReasons()
+      if (isMounted) {
+        setReasons(res)
+        setIsFetchingReasons(false)
+      }
+    }
+
+    fetchReasons()
+
+    return () => {
+      isMounted = false
+    }
+  }, [isOpen])
+
+  const handleClose = () => {
+    setSelectedReasonId("")
+    onClose()
+  }
+
+  const handleConfirm = () => {
+    if (!selectedReasonId) {
+      alert("Please select a reason for cancellation")
+      return
+    }
+
+    onConfirm(selectedReasonId)
+  }
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+      <div
+        className="w-full max-w-md p-6 sm:p-8 bg-white rounded-3xl shadow-2xl"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="cancel-order-title"
+      >
+        <div className="flex flex-col gap-y-6">
+          <div className="flex items-center justify-between">
+            <Heading id="cancel-order-title" level="h2" className="text-xl font-bold text-gray-900">
+              Cancel Order
+            </Heading>
+            <button
+              type="button"
+              onClick={handleClose}
+              className="p-2 hover:bg-gray-100 rounded-full transition-colors"
+              aria-label="Close cancel order dialog"
+            >
+              <XMark className="w-5 h-5 text-gray-400" />
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            <Text className="text-sm text-gray-500 leading-relaxed">
+              We're sorry to see you go! Please let us know why you're cancelling this order so we can improve our service.
+            </Text>
+
+            <div className="space-y-2">
+              <label
+                htmlFor="cancel-reason-select"
+                className="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1"
+              >
+                Reason for Cancellation
+              </label>
+              <Select
+                value={selectedReasonId || undefined}
+                onValueChange={setSelectedReasonId}
+              >
+                <Select.Trigger
+                  id="cancel-reason-select"
+                  className={clx(
+                    "w-full rounded-2xl h-12 border transition-colors text-sm font-medium",
+                    selectedReasonId
+                      ? "bg-purple-50/50 text-[#8B5AB1] border-[#8B5AB1]/20"
+                      : "bg-gray-50/50 text-gray-500 border-gray-200"
+                  )}
+                >
+                  <Select.Value placeholder="Select a reason" />
+                </Select.Trigger>
+                <Select.Content
+                  position="popper"
+                  sideOffset={8}
+                  collisionPadding={16}
+                  className="z-[10001] rounded-2xl border border-gray-100 bg-white shadow-xl p-1.5 min-w-[var(--radix-select-trigger-width)]"
+                >
+                  {reasons.map((reason) => (
+                    <Select.Item
+                      key={reason.id}
+                      value={reason.id}
+                      className="text-sm font-medium rounded-xl px-3 py-2.5 cursor-pointer"
+                    >
+                      {reason.label}
+                    </Select.Item>
+                  ))}
+                  {reasons.length === 0 && !isFetchingReasons && (
+                    <Select.Item value="other" className="text-sm font-medium rounded-xl px-3 py-2.5">
+                      Other / Not Specified
+                    </Select.Item>
+                  )}
+                </Select.Content>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-3 pt-2">
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={handleClose}
+              className="flex-1 rounded-2xl h-12 font-bold border-gray-100"
+            >
+              Keep Order
+            </Button>
+            <Button
+              type="button"
+              onClick={handleConfirm}
+              isLoading={isSubmitting}
+              disabled={!selectedReasonId || isSubmitting}
+              className="flex-1 rounded-2xl h-12 font-bold bg-red-500 hover:bg-red-600 text-white border-none shadow-lg shadow-red-100 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Cancel Order
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CancelOrderModal

package/templates/storefront/src/modules/order/components/help/index.tsx

@@ -0,0 +1,25 @@
+import { Heading } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import React from "react"
+
+const Help = () => {
+  return (
+    <div className="mt-6">
+      <Heading className="text-base-semi">Need help?</Heading>
+      <div className="text-base-regular my-2">
+        <ul className="gap-y-2 flex flex-col">
+          <li>
+            <LocalizedClientLink href="/contact">Contact</LocalizedClientLink>
+          </li>
+          <li>
+            <LocalizedClientLink href="/contact">
+              Returns & Exchanges
+            </LocalizedClientLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Help

package/templates/storefront/src/modules/order/components/item/index.tsx

@@ -0,0 +1,62 @@
+import { HttpTypes } from "@medusajs/types"
+import { Table, Text } from "@medusajs/ui"
+
+import LineItemOptions from "@modules/common/components/line-item-options"
+import LineItemPrice from "@modules/common/components/line-item-price"
+import LineItemUnitPrice from "@modules/common/components/line-item-unit-price"
+import Thumbnail from "@modules/products/components/thumbnail"
+
+type ItemProps = {
+  item: HttpTypes.StoreCartLineItem | HttpTypes.StoreOrderLineItem
+  currencyCode: string
+}
+
+const Item = ({ item, currencyCode }: ItemProps) => {
+  return (
+    <Table.Row className="w-full" data-testid="product-row">
+      <Table.Cell className="!pl-0 p-4 w-24">
+        <div className="flex w-16">
+          <Thumbnail 
+            thumbnail={item.thumbnail} 
+            variantImages={item.variant?.images}
+            images={item.variant?.product?.images}
+            size="square" 
+          />
+        </div>
+      </Table.Cell>
+
+      <Table.Cell className="text-left">
+        <Text
+          className="txt-medium-plus text-ui-fg-base"
+          data-testid="product-name"
+        >
+          {item.product_title}
+        </Text>
+        <LineItemOptions variant={item.variant} data-testid="product-variant" />
+      </Table.Cell>
+
+      <Table.Cell className="!pr-0">
+        <span className="!pr-0 flex flex-col items-end h-full justify-center">
+          <span className="flex gap-x-1 ">
+            <Text className="text-ui-fg-muted">
+              <span data-testid="product-quantity">{item.quantity}</span>x{" "}
+            </Text>
+            <LineItemUnitPrice
+              item={item}
+              style="tight"
+              currencyCode={currencyCode}
+            />
+          </span>
+
+          <LineItemPrice
+            item={item}
+            style="tight"
+            currencyCode={currencyCode}
+          />
+        </span>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default Item

package/templates/storefront/src/modules/order/components/items/index.tsx

@@ -0,0 +1,44 @@
+import repeat from "@core/util/repeat"
+import { HttpTypes } from "@medusajs/types"
+import { Table } from "@medusajs/ui"
+
+import Divider from "@modules/common/components/divider"
+import Item from "@modules/order/components/item"
+import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
+
+type ItemsProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const Items = ({ order }: ItemsProps) => {
+  const items = order.items
+
+  return (
+    <div className="flex flex-col">
+      <Divider className="!mb-0" />
+      <Table>
+        <Table.Body data-testid="products-table">
+          {items?.length
+            ? items
+                .sort((a, b) => {
+                  return (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1
+                })
+                .map((item) => {
+                  return (
+                    <Item
+                      key={item.id}
+                      item={item}
+                      currencyCode={order.currency_code}
+                    />
+                  )
+                })
+            : repeat(5).map((i) => {
+                return <SkeletonLineItem key={i} />
+              })}
+        </Table.Body>
+      </Table>
+    </div>
+  )
+}
+
+export default Items

package/templates/storefront/src/modules/order/components/onboarding-cta/index.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { resetOnboardingState } from "@core/data/onboarding"
+import { Button, Container, Text } from "@medusajs/ui"
+
+const OnboardingCta = ({ orderId }: { orderId: string }) => {
+  return (
+    <Container className="max-w-4xl h-full bg-ui-bg-subtle w-full">
+      <div className="flex flex-col gap-y-4 center p-4 md:items-center">
+        <Text className="text-ui-fg-base text-xl">
+          Your test order was successfully created! 🎉
+        </Text>
+        <Text className="text-ui-fg-subtle text-small-regular">
+          You can now complete setting up your store in the admin.
+        </Text>
+        <Button
+          className="w-fit"
+          size="xlarge"
+          onClick={() => resetOnboardingState(orderId)}
+        >
+          Complete setup in admin
+        </Button>
+      </div>
+    </Container>
+  )
+}
+
+export default OnboardingCta

package/templates/storefront/src/modules/order/components/order-confirmation-back-handler/index.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
+
+export default function OrderConfirmationBackHandler() {
+  const router = useRouter()
+  const params = useParams()
+  const countryCode = params?.countryCode || "in"
+
+  useEffect(() => {
+    const handlePopState = (event: PopStateEvent) => {
+      // Redirect to localized store
+      router.push(`/${countryCode}/store`)
+    }
+
+    // Push an dummy state
+    window.history.pushState(null, "", window.location.href)
+    
+    window.addEventListener("popstate", handlePopState)
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState)
+    }
+  }, [router, countryCode])
+
+  return null
+}

package/templates/storefront/src/modules/order/components/order-details/index.tsx

@@ -0,0 +1,63 @@
+import { HttpTypes } from "@medusajs/types"
+import { Text } from "@medusajs/ui"
+
+type OrderDetailsProps = {
+  order: HttpTypes.StoreOrder
+  showStatus?: boolean
+}
+
+const OrderDetails = ({ order, showStatus }: OrderDetailsProps) => {
+  const formatStatus = (str: string) => {
+    const formatted = str.split("_").join(" ")
+
+    return formatted.slice(0, 1).toUpperCase() + formatted.slice(1)
+  }
+
+  return (
+    <div>
+      <Text>
+        We have sent the order confirmation details to{" "}
+        <span
+          className="text-ui-fg-medium-plus font-semibold"
+          data-testid="order-email"
+        >
+          {order.email}
+        </span>
+        .
+      </Text>
+      <Text className="mt-2">
+        Order date:{" "}
+        <span data-testid="order-date">
+          {new Date(order.created_at).toDateString()}
+        </span>
+      </Text>
+      <Text className="mt-2 text-ui-fg-interactive">
+        Order number: <span data-testid="order-id">{order.display_id}</span>
+      </Text>
+
+      <div className="flex items-center text-compact-small gap-x-4 mt-4">
+        {showStatus && (
+          <>
+            <Text>
+              Order status:{" "}
+              <span className="text-ui-fg-subtle " data-testid="order-status">
+                {formatStatus(order.fulfillment_status)}
+              </span>
+            </Text>
+            <Text>
+              Payment status:{" "}
+              <span
+                className="text-ui-fg-subtle "
+                sata-testid="order-payment-status"
+              >
+                {formatStatus(order.payment_status)}
+              </span>
+            </Text>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default OrderDetails