@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/checkout/components/shipping-address/index.tsx

@@ -0,0 +1,521 @@
+import { HttpTypes } from "@medusajs/types"
+import { Container } from "@medusajs/ui"
+import Checkbox from "@modules/common/components/checkbox"
+import Input from "@modules/common/components/input"
+import { mapKeys } from "lodash"
+import React, { useEffect, useMemo, useState } from "react"
+import AddressSelect from "../address-select"
+import CountrySelect from "../country-select"
+import PhoneInput from "react-phone-input-2"
+import "react-phone-input-2/lib/style.css"
+import { State, City } from "country-state-city"
+import Select from "@modules/common/components/select"
+
+
+// Normalize phone — default to India (+91) if no country code present
+const normalizePhone = (phone?: string | null): string => {
+  if (!phone) return ""
+  const digits = phone.replace(/\D/g, "")
+  if (digits.length === 10) return `+91${digits}`
+  return `+${digits}`
+}
+
+const ShippingAddress = ({
+  customer,
+  cart,
+  checked,
+  onChange,
+  clearForm = false,
+}: {
+  customer: HttpTypes.StoreCustomer | null
+  cart: HttpTypes.StoreCart | null
+  checked: boolean
+  onChange: () => void
+  clearForm?: boolean
+}) => {
+  const [formData, setFormData] = useState<Record<string, any>>({
+    "shipping_address.full_name": clearForm ? "" : (cart?.shipping_address?.first_name ? `${cart.shipping_address.first_name} ${cart.shipping_address.last_name === "." ? "" : cart.shipping_address.last_name}`.trim() : ""),
+    "shipping_address.first_name": clearForm ? "" : (cart?.shipping_address?.first_name || ""),
+    "shipping_address.last_name": clearForm ? "" : (cart?.shipping_address?.last_name || ""),
+    "shipping_address.address_1": clearForm ? "" : (cart?.shipping_address?.address_1 || ""),
+    "shipping_address.company": clearForm ? "" : (cart?.shipping_address?.company || ""),
+    "shipping_address.postal_code": clearForm ? "" : (cart?.shipping_address?.postal_code || ""),
+    "shipping_address.city": clearForm ? "" : (cart?.shipping_address?.city || ""),
+    "shipping_address.country_code": clearForm ? "" : (cart?.shipping_address?.country_code || ""),
+    "shipping_address.province": clearForm ? "" : (cart?.shipping_address?.province || ""),
+    "shipping_address.phone": clearForm ? "" : normalizePhone(cart?.shipping_address?.phone),
+    email: clearForm ? "" : (cart?.email || ""),
+  })
+
+  const countryCodeUpper = (formData["shipping_address.country_code"] || "").toUpperCase()
+
+  const stateOptions = useMemo(() => {
+    if (!countryCodeUpper) return []
+    try {
+      return State.getStatesOfCountry(countryCodeUpper).map((s) => ({
+        value: s.name,
+        label: s.name,
+        isoCode: s.isoCode,
+      }))
+    } catch (e) {
+      return []
+    }
+  }, [countryCodeUpper])
+
+  const cityOptions = useMemo(() => {
+    if (!countryCodeUpper || !formData["shipping_address.province"]) return []
+    try {
+      const selectedStateObj = stateOptions.find(
+        (s) => s.value === formData["shipping_address.province"]
+      )
+      if (!selectedStateObj) return []
+      const cities = City.getCitiesOfState(countryCodeUpper, selectedStateObj.isoCode)
+      const uniqueNames = Array.from(new Set(cities.map((c) => c.name)))
+      return uniqueNames.map((name) => ({
+        value: name,
+        label: name,
+      }))
+    } catch (e) {
+      return []
+    }
+  }, [countryCodeUpper, formData["shipping_address.province"], stateOptions])
+
+  const countriesInRegion = useMemo(
+    () => cart?.region?.countries?.map((c) => c.iso_2),
+    [cart?.region]
+  )
+
+  // check if customer has saved addresses that are in the current region
+  const addressesInRegion = useMemo(
+    () =>
+      customer?.addresses.filter(
+        (a) => a.country_code && countriesInRegion?.includes(a.country_code)
+      ),
+    [customer?.addresses, countriesInRegion]
+  )
+
+  const setFormAddress = (
+    address?: HttpTypes.StoreCartAddress,
+    email?: string
+  ) => {
+    address &&
+      setFormData((prevState: Record<string, any>) => ({
+        ...prevState,
+        "shipping_address.full_name": address?.first_name ? `${address.first_name} ${address.last_name === "." ? "" : address.last_name}`.trim() : "",
+        "shipping_address.first_name": address?.first_name || "",
+        "shipping_address.last_name": address?.last_name || "",
+        "shipping_address.address_1": address?.address_1 || "",
+        "shipping_address.company": address?.company || "",
+        "shipping_address.postal_code": address?.postal_code || "",
+        "shipping_address.city": address?.city || "",
+        "shipping_address.country_code": address?.country_code || "",
+        "shipping_address.province": address?.province || "",
+        "shipping_address.phone": normalizePhone(address?.phone),
+      }))
+
+    email &&
+      setFormData((prevState: Record<string, any>) => ({
+        ...prevState,
+        email: email,
+      }))
+  }
+
+  // Unified Sync Watcher: Handles clean-form, cart-sync, and customer-sync with local priority
+  useEffect(() => {
+    if (clearForm) {
+      setFormData({
+        "shipping_address.full_name": "",
+        "shipping_address.first_name": "",
+        "shipping_address.last_name": "",
+        "shipping_address.address_1": "",
+        "shipping_address.company": "",
+        "shipping_address.postal_code": "",
+        "shipping_address.city": "",
+        "shipping_address.country_code": "",
+        "shipping_address.province": "",
+        "shipping_address.phone": "",
+        email: "",
+      })
+      return
+    }
+
+    if (cart && cart.shipping_address) {
+      const shipping = cart.shipping_address
+      setFormData((prev: any) => ({
+        ...prev,
+        email: prev.email || cart.email || "",
+        "shipping_address.full_name": prev["shipping_address.full_name"] || (shipping.first_name ? `${shipping.first_name} ${shipping.last_name === "." ? "" : shipping.last_name}`.trim() : ""),
+        "shipping_address.first_name": prev["shipping_address.first_name"] || shipping.first_name || "",
+        "shipping_address.last_name": prev["shipping_address.last_name"] || shipping.last_name || "",
+        "shipping_address.address_1": prev["shipping_address.address_1"] || shipping.address_1 || "",
+        "shipping_address.company": prev["shipping_address.company"] || shipping.company || "",
+        "shipping_address.postal_code": prev["shipping_address.postal_code"] || shipping.postal_code || "",
+        "shipping_address.city": prev["shipping_address.city"] || shipping.city || "",
+        "shipping_address.province": prev["shipping_address.province"] || shipping.province || "",
+        "shipping_address.phone": prev["shipping_address.phone"] || normalizePhone(shipping.phone),
+        "shipping_address.country_code": prev["shipping_address.country_code"] || shipping.country_code || "",
+      }))
+    }
+
+    if (customer && !formData.email && !formData["shipping_address.first_name"]) {
+      setFormData((prev) => ({
+        ...prev,
+        "shipping_address.full_name": prev["shipping_address.full_name"] || (customer.first_name ? `${customer.first_name} ${customer.last_name === "." ? "" : customer.last_name}`.trim() : ""),
+        "shipping_address.first_name": prev["shipping_address.first_name"] || customer.first_name || "",
+        "shipping_address.last_name": prev["shipping_address.last_name"] || customer.last_name || "",
+        "shipping_address.phone": prev["shipping_address.phone"] || normalizePhone(customer.phone),
+        email: prev.email || customer.email || "",
+      }))
+    }
+  }, [cart?.id, cart?.shipping_address?.id, clearForm, customer]) 
+
+  // Triple Lock Watcher: Automatically trigger shipping calculation when all 3 fields are ready
+  useEffect(() => {
+    const pincode = formData["shipping_address.postal_code"]
+    const email = formData.email
+    const phone = formData["shipping_address.phone"]
+    const cleanedPhone = phone ? phone.replace(/\D/g, "") : ""
+
+    if (pincode?.length === 6 && email?.includes("@") && email?.includes(".") && cleanedPhone.length >= 12) {
+      if ((window as any).triggerTimeout) clearTimeout((window as any).triggerTimeout);
+      // Check if data has actually changed compared to the cart to prevent redundant updates
+      const currentShipping = (cart as any)?.shipping_address
+      const hasChanged = 
+          (pincode?.trim() || "") !== ((currentShipping?.postal_code as string)?.trim() || "") ||
+          (email?.trim().toLowerCase() || "") !== ((cart?.email as string)?.trim().toLowerCase() || "") ||
+          (formData["shipping_address.city"]?.trim().toLowerCase() || "") !== ((currentShipping?.city as string)?.trim().toLowerCase() || "") ||
+          (formData["shipping_address.province"]?.trim().toLowerCase() || "") !== ((currentShipping?.province as string)?.trim().toLowerCase() || "") ||
+          (formData["shipping_address.phone"]?.replace(/\D/g, "") !== currentShipping?.phone?.replace(/\D/g, ""))
+
+      if (!hasChanged) return;
+
+      (window as any).triggerTimeout = setTimeout(() => {
+        window.dispatchEvent(new CustomEvent('postal-code-updated', { 
+            detail: { 
+                postal_code: pincode,
+                city: formData["shipping_address.city"],
+                province: formData["shipping_address.province"],
+                email: email,
+                phone: formData["shipping_address.phone"],
+                first_name: formData["shipping_address.first_name"],
+                last_name: formData["shipping_address.last_name"],
+                address_1: formData["shipping_address.address_1"],
+                company: formData["shipping_address.company"]
+            } 
+        }))
+      }, 400)
+    }
+  }, [
+    formData["shipping_address.postal_code"],
+    formData.email,
+    formData["shipping_address.phone"],
+    formData["shipping_address.city"],
+    formData["shipping_address.province"]
+  ])
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target
+    let sanitizedValue = value
+
+    // Handle full name specifically
+    if (name === "shipping_address.full_name") {
+        const [first, ...rest] = value.split(" ")
+        const last = rest.join(" ") || "."
+        setFormData((prev) => ({
+            ...prev,
+            [name]: value,
+            "shipping_address.first_name": first || "",
+            "shipping_address.last_name": last,
+        }))
+        return
+    }
+
+    // Reset province/city when country changes
+    if (name === "shipping_address.country_code") {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: sanitizedValue,
+        "shipping_address.province": "",
+        "shipping_address.city": "",
+      }))
+      return
+    }
+
+    // Reset city when province changes
+    if (name === "shipping_address.province") {
+      setFormData((prev) => ({
+        ...prev,
+        [name]: sanitizedValue,
+        "shipping_address.city": "",
+      }))
+      return
+    }
+
+    // 1. Sanitize names and locations
+    if (name.includes("first_name") || name.includes("last_name") || name.includes("city") || name.includes("province")) {
+      sanitizedValue = value.replace(/[^A-Za-z\s]/g, "")
+    }
+
+    // 2. Sanitize pincode
+    if (name.includes("postal_code")) {
+      sanitizedValue = value.replace(/\D/g, "").slice(0, 6)
+    }
+
+    setFormData((prev) => ({
+      ...prev,
+      [name]: sanitizedValue,
+    }))
+
+    // 3. Immediate City/State fetch for Pincode
+    if (name === "shipping_address.postal_code" && sanitizedValue.length === 6) {
+        const fetchLocation = async () => {
+          try {
+            const response = await fetch(`https://api.postalpincode.in/pincode/${sanitizedValue}`)
+            const data = await response.json()
+            if (data[0].Status === "Success") {
+              const postOffice = data[0].PostOffice[0]
+              setFormData((prev) => ({
+                ...prev,
+                "shipping_address.city": postOffice.District,
+                "shipping_address.province": postOffice.State,
+              }))
+            }
+          } catch (e) {}
+        }
+        fetchLocation()
+    }
+  }
+
+  const [phoneError, setPhoneError] = useState(false)
+
+  useEffect(() => {
+    const handleTrigger = () => {
+      const phoneValue = formData["shipping_address.phone"] || ""
+      const digits = phoneValue.replace(/\D/g, "")
+      // For India (+91), expect at least 12 digits (2 for 91, 10 for local)
+      if (digits.length < 12) {
+        setPhoneError(true)
+      } else {
+        setPhoneError(false)
+      }
+    }
+    window.addEventListener('trigger-checkout-step', handleTrigger)
+    return () => window.removeEventListener('trigger-checkout-step', handleTrigger)
+  }, [formData["shipping_address.phone"]])
+
+  return (
+    <>
+      {customer && (addressesInRegion?.length || 0) > 0 && (
+        <Container className="mb-6 flex flex-col gap-y-4 p-5">
+          <p className="text-small-regular">
+            {`Hi ${customer.first_name}, do you want to use one of your saved addresses?`}
+          </p>
+          <AddressSelect
+            addresses={customer.addresses}
+            addressInput={
+              mapKeys(formData, (_, key) =>
+                key.replace("shipping_address.", "")
+              ) as HttpTypes.StoreCartAddress
+            }
+            onSelect={setFormAddress}
+          />
+        </Container>
+      )}
+      {/* Full Name */}
+      <div className="mb-4">
+        <Input
+          label="Full name"
+          name="shipping_address.full_name"
+          id="shipping_full_name_field"
+          autoComplete="name"
+          value={formData["shipping_address.full_name"]}
+          onChange={handleChange}
+          required
+          maxLength={60}
+          data-testid="shipping-full-name-input"
+        />
+        {/* Hidden inputs to feed Medusa's first/last name fields */}
+        <input type="hidden" name="shipping_address.first_name" value={formData["shipping_address.first_name"]} />
+        <input type="hidden" name="shipping_address.last_name" value={formData["shipping_address.last_name"]} />
+      </div>
+
+      {/* Address */}
+      <div className="mb-4">
+        <Input
+          label="Address"
+          name="shipping_address.address_1"
+          id="shipping_address_1_field"
+          autoComplete="off"
+          value={formData["shipping_address.address_1"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-address-input"
+        />
+      </div>
+
+      {/* Postal, City, State Flattened Grid */}
+      <div className="grid grid-cols-1 min-[550px]:grid-cols-3 gap-4 mb-4">
+        <Input
+          label="Postal code*"
+          name="shipping_address.postal_code"
+          id="shipping_postal_code_field"
+          autoComplete="off"
+          value={formData["shipping_address.postal_code"]}
+          onChange={handleChange}
+          required
+          maxLength={formData["shipping_address.country_code"] === "in" ? 6 : 10}
+          data-testid="shipping-postal-code-input"
+        />
+        {cityOptions.length > 0 ? (
+          <Select
+            label="City*"
+            name="shipping_address.city"
+            id="shipping_city_field"
+            value={formData["shipping_address.city"]}
+            onChange={handleChange}
+            required
+            options={cityOptions}
+            data-testid="shipping-city-input"
+          />
+        ) : (
+          <Input
+            label="City*"
+            name="shipping_address.city"
+            id="shipping_city_field"
+            autoComplete="off"
+            value={formData["shipping_address.city"]}
+            onChange={handleChange}
+            required
+            data-testid="shipping-city-input"
+          />
+        )}
+        {stateOptions.length > 0 ? (
+          <Select
+            label="State / Province*"
+            name="shipping_address.province"
+            id="shipping_province_field"
+            value={formData["shipping_address.province"]}
+            onChange={handleChange}
+            required
+            options={stateOptions}
+            data-testid="shipping-province-input"
+          />
+        ) : (
+          <Input
+            label="State / Province*"
+            name="shipping_address.province"
+            id="shipping_province_field"
+            autoComplete="off"
+            value={formData["shipping_address.province"]}
+            onChange={handleChange}
+            maxLength={30}
+            data-testid="shipping-province-input"
+          />
+        )}
+      </div>
+
+      {/* Country Select */}
+      <div className="mb-4">
+        <CountrySelect
+          name="shipping_address.country_code"
+          id="shipping_country_code_field"
+          autoComplete="off"
+          region={cart?.region}
+          value={formData["shipping_address.country_code"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-country-select"
+        />
+      </div>
+      <div className="my-6 min-[550px]:my-8">
+        <Checkbox
+          label="Billing address same as shipping address"
+          name="same_as_billing"
+          checked={checked}
+          onChange={onChange}
+          data-testid="billing-address-checkbox"
+        />
+      </div>
+      {/* Email and Phone at bottom left - Single column for 340px-550px */}
+      <div className="grid grid-cols-1 min-[550px]:grid-cols-2 gap-4 mb-4 mt-4">
+        <Input
+          label="Email"
+          name="email"
+          id="shipping_email_field"
+          type="email"
+          title="Enter a valid email address."
+          autoComplete="off"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          data-testid="shipping-email-input"
+        />
+        <div className="relative w-full" suppressHydrationWarning>
+          <div className="relative w-full h-12">
+            <label
+              htmlFor="phone_hidden_input"
+              className="absolute left-[58px] top-1.5 z-[20] text-[11px] font-medium text-ui-fg-subtle pointer-events-none"
+            >
+              Phone<span className="text-red-500">*</span>
+            </label>
+            <PhoneInput
+              country={"in"}
+              value={formData["shipping_address.phone"]}
+              onChange={(value) => {
+                setFormData((prev) => ({
+                  ...prev,
+                  "shipping_address.phone": value,
+                }))
+                // Clear error when user changes value and it's valid
+                if (value.replace(/\D/g, "").length >= 12) {
+                  setPhoneError(false)
+                }
+              }}
+              inputProps={{
+                name: "shipping_address_phone_input",
+                id: "shipping_phone_field"
+              }}
+              inputStyle={{
+                width: "100%",
+                height: "48px",
+                fontSize: "14px",
+                paddingLeft: "58px",
+                paddingTop: "22px",
+                borderRadius: "6px",
+                border: phoneError ? "1px solid #EF4444" : "1px solid #C0C0C0",
+                backgroundColor: "var(--color-surface)",
+                fontFamily: "inherit",
+                color: "#000"
+              }}
+              containerStyle={{
+                width: "100%",
+                height: "48px"
+              }}
+              buttonStyle={{
+                border: phoneError ? "1px solid #EF4444" : "1px solid #C0C0C0",
+                borderRight: "none",
+                backgroundColor: "var(--color-surface)",
+                borderRadius: "6px 0 0 6px",
+                width: "48px",
+                height: "48px",
+                zIndex: 11
+              }}
+              dropdownStyle={{
+                width: "280px",
+                zIndex: 1000
+              }}
+            />
+            <input type="hidden" id="shipping_phone_field_internal" name="shipping_address.phone" value={formData["shipping_address.phone"]} />
+          </div>
+          {phoneError && (
+            <p className="text-red-500 text-[11px] mt-1 font-medium italic">
+              Enter 10 digit valid phone number.
+            </p>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ShippingAddress

package/templates/storefront/src/modules/checkout/components/submit-button/index.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Button } from "@medusajs/ui"
+import React from "react"
+import { useFormStatus } from "react-dom"
+
+export function SubmitButton({
+  children,
+  variant = "primary",
+  className,
+  "data-testid": dataTestId,
+}: {
+  children: React.ReactNode
+  variant?: "primary" | "secondary" | "transparent" | "danger" | null
+  className?: string
+  "data-testid"?: string
+}) {
+  const { pending } = useFormStatus()
+
+  return (
+    <Button
+      size="large"
+      className={className ?? "checkout-btn-primary border-0"}
+      type="submit"
+      isLoading={pending}
+      variant={variant || "primary"}
+      data-testid={dataTestId}
+    >
+      {children}
+    </Button>
+  )
+}

package/templates/storefront/src/modules/checkout/templates/checkout-form/index.tsx

@@ -0,0 +1,38 @@
+import { listCartShippingMethods } from "@core/data/fulfillment"
+import { HttpTypes } from "@medusajs/types"
+import Addresses from "@modules/checkout/components/addresses"
+import Shipping from "@modules/checkout/components/shipping"
+import Payment from "@modules/checkout/components/payment"
+import Review from "@modules/checkout/components/review"
+
+export default async function CheckoutForm({
+  cart,
+  customer,
+}: {
+  cart: HttpTypes.StoreCart | null
+  customer: HttpTypes.StoreCustomer | null
+}) {
+  if (!cart) {
+    return null
+  }
+
+  const shippingMethods = await listCartShippingMethods(cart.id)
+  const paymentMethods = cart.region?.payment_providers || []
+
+  if (!shippingMethods) {
+    return null
+  }
+
+  return (
+    <div className="w-full grid grid-cols-1 gap-y-6 min-[550px]:gap-y-8">
+      <Addresses cart={cart} customer={customer} />
+
+      <Shipping cart={cart} availableShippingMethods={shippingMethods} />
+
+      {/* Payment and Review components are shown on /checkout/payment page */}
+      <Payment cart={cart} availablePaymentMethods={paymentMethods} />
+
+      {/* <Review cart={cart} /> */}
+    </div>
+  )
+}