@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/account/components/address-card/edit-address-modal.tsx

@@ -0,0 +1,468 @@
+"use client"
+
+import React, { useEffect, useState, useActionState, useMemo } from "react"
+import { PencilSquare as Edit, Trash } from "@medusajs/icons"
+import { Button, Heading, Text, clx } from "@medusajs/ui"
+
+import useToggleState from "@core/hooks/use-toggle-state"
+import CountrySelect from "@modules/checkout/components/country-select"
+import Input from "@modules/common/components/input"
+import Modal from "@modules/common/components/modal"
+import Spinner from "@modules/common/icons/spinner"
+import { SubmitButton } from "@modules/checkout/components/submit-button"
+import { HttpTypes } from "@medusajs/types"
+import { updateCustomerAddress } from "@core/data/customer"
+import { State, City } from "country-state-city"
+import Select from "@modules/common/components/select"
+import PhoneInput from "react-phone-input-2"
+import "react-phone-input-2/lib/style.css"
+import {
+  deleteCustomerAddress,
+  setDefaultAddress,
+} from "@core/data/customer"
+
+type EditAddressProps = {
+  region: HttpTypes.StoreRegion
+  address: HttpTypes.StoreCustomerAddress
+  isActive?: boolean
+}
+
+const EditAddress: React.FC<EditAddressProps> = ({
+  region,
+  address,
+  isActive = false,
+}) => {
+  const [removing, setRemoving] = useState(false)
+  const [settingDefault, setSettingDefault] = useState(false)
+  const [successState, setSuccessState] = useState(false)
+  const { state, open, close: closeModal } = useToggleState(false)
+
+  const [fullName, setFullName] = useState(address.first_name ? `${address.first_name} ${address.last_name === "." ? "" : address.last_name}`.trim() : "")
+  const [firstName, setFirstName] = useState(address.first_name || "")
+  const [lastName, setLastName] = useState(address.last_name || "")
+  const [postalCode, setPostalCode] = useState(address.postal_code || "")
+  const [city, setCity] = useState(address.city || "")
+  const [province, setProvince] = useState(address.province || "")
+  const [phone, setPhone] = useState(address.phone || "")
+  const [phoneError, setPhoneError] = useState<string | null>(null)
+  const [countryCode, setCountryCode] = useState(address.country_code || "")
+
+  const countryCodeUpper = (countryCode || "").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 || !province) return []
+    try {
+      const selectedStateObj = stateOptions.find(
+        (s) => s.value === 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, province, stateOptions])
+
+  const [formState, formAction] = useActionState(updateCustomerAddress, {
+    success: false,
+    error: null,
+    addressId: address.id,
+  })
+
+  const handlePincodeChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.replace(/\D/g, "").slice(0, 6)
+    setPostalCode(val)
+
+    if (val.length === 6) {
+      try {
+        const response = await fetch(`https://api.postalpincode.in/pincode/${val}`)
+        const data = await response.json()
+        if (data[0].Status === "Success") {
+          const postOffice = data[0].PostOffice[0]
+          setCity(postOffice.District)
+          setProvince(postOffice.State)
+        }
+      } catch (error) {
+        // Silence error
+      }
+    }
+  }
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.replace(/\D/g, "").slice(0, 10)
+    setPhone(val)
+  }
+
+  const handleTextOnlyChange = (setter: (v: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.replace(/[^A-Za-z\s]/g, "")
+    setter(val)
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    const digits = phone.replace(/\D/g, "")
+    if (digits.length < 12) {
+      e.preventDefault()
+      setPhoneError("Please enter a valid 10-digit phone number.")
+      return
+    }
+    setPhoneError(null)
+  }
+
+  const close = () => {
+    setSuccessState(false)
+    closeModal()
+  }
+
+  useEffect(() => {
+    if (successState) {
+      close()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [successState])
+
+  useEffect(() => {
+    if (formState.success) {
+      setSuccessState(true)
+    }
+  }, [formState])
+
+  const removeAddress = async () => {
+    setRemoving(true)
+    await deleteCustomerAddress(address.id)
+    setRemoving(false)
+  }
+
+  const handleSetDefault = async () => {
+    setSettingDefault(true)
+    await setDefaultAddress(address.id)
+    setSettingDefault(false)
+  }
+
+  return (
+    <>
+      <div
+        className={clx(
+          "bg-white border border-gray-100 rounded-xl p-8 w-full flex flex-col justify-between transition-all hover:shadow-lg",
+          {
+            "border-gray-900": isActive || address.is_default_shipping,
+          }
+        )}
+        data-testid="address-container"
+      >
+        <div className="flex flex-col mb-6">
+          <div className="flex justify-between items-start mb-4">
+            <div className="flex flex-col gap-y-1">
+              <Heading
+                className="text-left text-xl font-bold text-heading"
+                data-testid="address-name"
+              >
+                {address.first_name} {address.last_name}
+              </Heading>
+              {address.is_default_shipping && (
+                <Text className="text-brand-accent text-xs font-bold uppercase">
+                  Default Address
+                </Text>
+              )}
+            </div>
+            <div className="flex gap-x-2">
+              {address.is_default_shipping && (
+                <div className="bg-brand-accent text-inverse px-3 py-1 rounded text-[10px] font-bold uppercase tracking-wider">
+                  Default
+                </div>
+              )}
+              <div className="border border-[#D69EFD] text-[#a855f7] px-3 py-1 rounded text-[10px] font-bold uppercase tracking-wider">
+                {String(address.metadata?.address_type || "HOME")}
+              </div>
+            </div>
+          </div>
+
+          <div className="text-gray-500 text-sm leading-relaxed mb-4">
+            <p className="block mb-4">
+              {address.address_1}, {address.city}, {address.province ? `${address.province}, ` : ""}{address.postal_code}
+            </p>
+            <p className="mt-2 text-heading">
+              <span className="text-gray-500 mr-2">Mobile:</span>
+              <span className="font-bold">{address.phone}</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3">
+          <button
+            className="border border-gray-300 rounded-full px-6 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors flex items-center justify-center min-w-[100px]"
+            onClick={removeAddress}
+            data-testid="address-delete-button"
+            disabled={removing}
+          >
+            {removing && <Spinner className="animate-spin mr-2" />}
+            Remove
+          </button>
+
+          <button
+            className="border border-gray-300 rounded-full px-6 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50 transition-colors flex items-center justify-center min-w-[100px]"
+            onClick={open}
+            data-testid="address-edit-button"
+          >
+            Edit
+          </button>
+
+          {!address.is_default_shipping && (
+            <button
+              className="border border-brand-accent rounded-full px-6 py-2 text-sm font-semibold text-brand-accent hover:bg-brand-accent-muted transition-colors flex items-center justify-center min-w-[120px]"
+              onClick={handleSetDefault}
+              disabled={settingDefault}
+            >
+              {settingDefault && <Spinner className="animate-spin mr-2" />}
+              Set as Default
+            </button>
+          )}
+        </div>
+      </div>
+
+      <Modal isOpen={state} close={close} data-testid="edit-address-modal" size="small">
+        <Modal.Title>Edit Address</Modal.Title>
+        <form 
+          action={formAction} 
+          onSubmit={handleSubmit}
+          className="flex flex-col h-full overflow-hidden"
+        >
+          <input type="hidden" name="addressId" value={address.id} />
+          <Modal.Body>
+            <div className="flex flex-col gap-y-4">
+              <div>
+                <Input
+                  label="Full name"
+                  name="full_name"
+                  required
+                  autoComplete="name"
+                  value={fullName}
+                  onChange={(e) => {
+                    const val = e.target.value
+                    setFullName(val)
+                    const [first, ...rest] = val.split(" ")
+                    setFirstName(first || "")
+                    setLastName(rest.join(" ") || ".")
+                  }}
+                  data-testid="full-name-input"
+                />
+                {/* Hidden fields for backend compatibility */}
+                <input type="hidden" name="first_name" value={firstName} />
+                <input type="hidden" name="last_name" value={lastName} />
+              </div>
+              <div>
+                <Input
+                  label="Address"
+                  name="address_1"
+                  required
+                  autoComplete="address-line1"
+                  defaultValue={address.address_1 || undefined}
+                  data-testid="address-1-input"
+                />
+              </div>
+              <div>
+                <Input
+                  label="Postal code"
+                  name="postal_code"
+                  required
+                  autoComplete="postal-code"
+                  data-testid="postal-code-input"
+                  value={postalCode}
+                  onChange={handlePincodeChange}
+                />
+              </div>
+              <div>
+                <CountrySelect
+                  name="country_code"
+                  region={region}
+                  required
+                  autoComplete="country"
+                  value={countryCode}
+                  onChange={(e) => {
+                    setCountryCode(e.target.value)
+                    setProvince("")
+                    setCity("")
+                  }}
+                  data-testid="country-select"
+                />
+              </div>
+              <div>
+                {stateOptions.length > 0 ? (
+                  <Select
+                    label="Province / State"
+                    name="province"
+                    required
+                    value={province}
+                    onChange={(e) => {
+                      setProvince(e.target.value)
+                      setCity("")
+                    }}
+                    options={stateOptions}
+                    data-testid="state-input"
+                  />
+                ) : (
+                  <Input
+                    label="Province / State"
+                    name="province"
+                    autoComplete="address-level1"
+                    data-testid="state-input"
+                    value={province}
+                    onChange={handleTextOnlyChange(setProvince)}
+                  />
+                )}
+              </div>
+              <div>
+                {cityOptions.length > 0 ? (
+                  <Select
+                    label="City"
+                    name="city"
+                    required
+                    value={city}
+                    onChange={(e) => setCity(e.target.value)}
+                    options={cityOptions}
+                    data-testid="city-input"
+                  />
+                ) : (
+                  <Input
+                    label="City"
+                    name="city"
+                    required
+                    autoComplete="locality"
+                    data-testid="city-input"
+                    value={city}
+                    onChange={handleTextOnlyChange(setCity)}
+                  />
+                )}
+              </div>
+              <div className="flex flex-col gap-y-2">
+                <Text className="text-sm font-semibold text-gray-700">Phone<span className="text-rose-500">*</span></Text>
+                <div className="relative w-full h-12">
+                  <PhoneInput
+                    country={"in"}
+                    value={phone}
+                    onChange={(value) => {
+                      setPhone(value)
+                      if (value.replace(/\D/g, "").length >= 12) {
+                        setPhoneError(null)
+                      }
+                    }}
+                    inputStyle={{
+                      width: "100%",
+                      height: "48px",
+                      fontSize: "14px",
+                      paddingLeft: "58px",
+                      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" name="phone" value={phone} />
+                </div>
+                {phoneError && (
+                  <Text className="text-rose-500 text-[11px] font-medium italic mt-1 leading-none">{phoneError}</Text>
+                )}
+              </div>
+
+              {/* Address Type Selection */}
+              <div className="small:col-span-2 flex flex-col gap-y-2 mt-2">
+                <Text className="text-sm font-semibold text-gray-700">Address Type</Text>
+                <div className="flex gap-x-6">
+                  <label className="flex items-center gap-x-2 cursor-pointer group">
+                    <input
+                      type="radio"
+                      name="address_type"
+                      value="HOME"
+                      defaultChecked={(address.metadata?.address_type as string) !== "OFFICE"}
+                      className="peer hidden"
+                    />
+                    <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center group-hover:border-brand-accent transition-all peer-checked:border-brand-accent peer-checked:[&>div]:scale-100">
+                      <div className="w-3 h-3 rounded-full bg-brand-accent scale-0 transition-transform"></div>
+                    </div>
+                    <span className="text-base font-medium text-gray-600 peer-checked:text-brand-accent transition-colors">Home</span>
+                  </label>
+
+                  <label className="flex items-center gap-x-2 cursor-pointer group">
+                    <input
+                      type="radio"
+                      name="address_type"
+                      value="OFFICE"
+                      defaultChecked={(address.metadata?.address_type as string) === "OFFICE"}
+                      className="peer hidden"
+                    />
+                    <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center group-hover:border-brand-accent transition-all peer-checked:border-brand-accent peer-checked:[&>div]:scale-100">
+                      <div className="w-3 h-3 rounded-full bg-brand-accent scale-0 transition-transform"></div>
+                    </div>
+                    <span className="text-base font-medium text-gray-600 peer-checked:text-brand-accent transition-colors">Office</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+            {formState.error && (
+              <div
+                className="text-rose-500 text-small-regular py-4 mt-2 bg-rose-50 px-4 rounded-lg border border-rose-100"
+                data-testid="address-error"
+              >
+                {formState.error}
+              </div>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <div className="flex flex-col small:flex-row gap-3 w-full small:w-auto">
+              <button
+                type="reset"
+                onClick={close}
+                className="w-full small:w-auto px-8 py-3 rounded-full border border-gray-300 font-bold text-gray-700 hover:bg-gray-50 transition-all text-base order-2 small:order-1"
+                data-testid="cancel-button"
+              >
+                Cancel
+              </button>
+              <SubmitButton
+                data-testid="save-button"
+                className="w-full small:w-auto px-8 py-3 rounded-full bg-brand-accent font-bold text-inverse hover:bg-brand-accent-hover transition-all text-base order-1 small:order-2"
+              >
+                Update Address
+              </SubmitButton>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal>
+    </>
+  )
+}
+
+export default EditAddress

package/templates/storefront/src/modules/account/components/deletion-pending-modal/index.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button, Heading, Text } from "@medusajs/ui"
+import Modal from "@modules/common/components/modal"
+import {
+    requestAccountDeletionCancel,
+    confirmAccountDeletionCancel
+} from "@core/data/customer-registration"
+import { signout } from "@core/data/customer"
+import Spinner from "@modules/common/icons/spinner"
+
+// Re-using common components
+const DeletionPendingModal = ({
+    isOpen,
+    close,
+    email,
+    countryCode
+}: {
+    isOpen: boolean
+    close?: () => void
+    email?: string
+    countryCode?: string
+}) => {
+    const [step, setStep] = useState<"initial" | "otp" | "success">("initial")
+    const [token, setToken] = useState("")
+    const [otp, setOtp] = useState("")
+    const [isLoading, setIsLoading] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const [emailInput, setEmailInput] = useState(email || "")
+
+    useEffect(() => {
+        if (email) {
+            setEmailInput(email)
+        } else if (typeof document !== 'undefined' && !emailInput) {
+            const getCookie = (name: string) => {
+                const value = `; ${document.cookie}`
+                const parts = value.split(`; ${name}=`)
+                if (parts.length === 2) return decodeURIComponent(parts.pop()?.split(';').shift() || "")
+                return null
+            }
+            const cookieEmail = getCookie("_medusa_customer_email")
+            if (cookieEmail) {
+                setEmailInput(cookieEmail)
+            }
+        }
+    }, [email])
+
+    const handleRequestCancel = async () => {
+        setIsLoading(true)
+        setError(null)
+
+        if (!emailInput || !emailInput.includes("@")) {
+            setError("Please enter a valid email address.")
+            setIsLoading(false)
+            return
+        }
+
+        const result = await requestAccountDeletionCancel(emailInput)
+        if (result.success && result.token) {
+            setToken(result.token)
+            setStep("otp")
+        } else {
+            setError(result.error || "Failed to request cancellation")
+        }
+        setIsLoading(false)
+    }
+
+    const handleConfirmCancel = async () => {
+        if (!otp || !token) return
+        setIsLoading(true)
+        setError(null)
+        const result = await confirmAccountDeletionCancel(token, otp)
+        if (result.success) {
+            setStep("success")
+        } else {
+            setError(result.error || "Invalid verification code")
+        }
+        setIsLoading(false)
+    }
+
+    const handleLogout = async () => {
+        setIsLoading(true)
+        await signout(countryCode || "in")
+        close?.()
+        window.location.reload()
+    }
+
+    return (
+        <div className={isOpen ? "fixed inset-0 z-[100] flex items-center justify-center bg-black/50" : "hidden"}>
+            <div className="bg-white rounded-2xl w-full max-w-md p-8 shadow-2xl animate-in fade-in zoom-in duration-300">
+                <div className="flex flex-col gap-y-6 text-center">
+                    {step === "initial" ? (
+                        <>
+                            <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-2">
+                                <Text className="text-amber-600 text-2xl font-bold">!</Text>
+                            </div>
+                            <Heading level="h2" className="text-2xl font-bold text-heading">Account Deletion Pending</Heading>
+                            <Text className="text-gray-500 font-medium">
+                                Your account is currently scheduled for deletion. Please confirm your email to withdraw the request.
+                            </Text>
+                            <div className="mt-2">
+                                <input
+                                    type="email"
+                                    placeholder="Enter your email"
+                                    value={emailInput}
+                                    onChange={(e) => setEmailInput(e.target.value)}
+                                    className="w-full px-4 py-3 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-accent text-center text-heading"
+                                    style={{ borderRadius: '30px' }}
+                                />
+                            </div>
+                            {error && <Text className="text-red-500 text-sm">{error}</Text>}
+                            <div className="flex flex-col gap-y-3 mt-4">
+                                <Button
+                                    className="w-full py-3 bg-brand-accent text-inverse font-bold hover:bg-brand-accent-hover"
+                                    style={{ borderRadius: '30px' }}
+                                    onClick={handleRequestCancel}
+                                    disabled={isLoading}
+                                >
+                                    {isLoading ? <Spinner /> : "Withdraw Deletion Request"}
+                                </Button>
+                                <Button
+                                    variant="secondary"
+                                    className="w-full py-3 border border-gray-300 hover:bg-gray-50"
+                                    style={{ borderRadius: '30px' }}
+                                    onClick={handleLogout}
+                                    disabled={isLoading}
+                                >
+                                    Logout
+                                </Button>
+                            </div>
+                        </>
+                    ) : step === "otp" ? (
+                        <>
+                            <Heading level="h2" className="text-2xl font-bold text-heading">Verify Cancellation</Heading>
+                            <Text className="text-gray-500">
+                                A verification code has been sent to your email. Please enter it below to confirm cancellation.
+                            </Text>
+                            <div className="relative flex justify-center gap-x-3 mt-8">
+                                {[0, 1, 2, 3, 4, 5].map((index) => (
+                                    <div
+                                        key={index}
+                                        className={`w-12 h-14 flex items-center justify-center border-2 rounded-xl text-2xl font-bold transition-all duration-200 ${otp.length === index
+                                                ? "border-brand-accent ring-3 ring-brand-accent/10 bg-white"
+                                                : otp.length > index
+                                                    ? "border-gray-400 bg-white shadow-sm"
+                                                    : "border-gray-200 bg-gray-50/50"
+                                            }`}
+                                    >
+                                        {otp[index] || ""}
+                                    </div>
+                                ))}
+                                <input
+                                    type="text"
+                                    maxLength={6}
+                                    className="absolute inset-0 opacity-0 cursor-pointer"
+                                    value={otp}
+                                    onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))}
+                                    autoFocus
+                                />
+                            </div>
+                            {error && <Text className="text-red-500 text-sm mt-4">{error}</Text>}
+                            <div className="flex flex-col gap-y-3 mt-8">
+                                <Button
+                                    className="w-full py-3 bg-brand-accent text-inverse font-bold"
+                                    style={{ borderRadius: '30px' }}
+                                    onClick={handleConfirmCancel}
+                                    disabled={isLoading || otp.length !== 6}
+                                >
+                                    {isLoading ? <Spinner /> : "Confirm Cancellation"}
+                                </Button>
+                                <Button
+                                    variant="secondary"
+                                    className="w-full py-3"
+                                    style={{ borderRadius: '30px' }}
+                                    onClick={() => setStep("initial")}
+                                    disabled={isLoading}
+                                >
+                                    Back
+                                </Button>
+                            </div>
+                        </>
+                    ) : (
+                        <div className="flex flex-col items-center text-center py-6 animate-in zoom-in duration-300">
+                            <div className="w-20 h-20 bg-green-50 rounded-full flex items-center justify-center mb-6 shadow-sm border border-green-100">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                                    <polyline points="20 6 9 17 4 12"></polyline>
+                                </svg>
+                            </div>
+                            <Heading level="h2" className="text-2xl font-bold text-heading mb-2">Request Withdrawn</Heading>
+                            <Text className="text-gray-600 max-w-[300px] mx-auto">
+                                Your account deletion request has been cancelled. You can now use your account normally.
+                            </Text>
+                            <Button
+                                variant="primary"
+                                className="mt-8 w-full bg-brand-accent text-inverse py-3 font-bold"
+                                style={{ borderRadius: '30px' }}
+                                onClick={() => {
+                                    close?.()
+                                    window.location.reload()
+                                }}
+                            >
+                                Continue to Login
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DeletionPendingModal

package/templates/storefront/src/modules/account/components/forgot-password/index.tsx

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

package/templates/storefront/src/modules/account/components/login/index.tsx

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