@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/cart/templates/preview.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import repeat from "@core/util/repeat"
+import { HttpTypes } from "@medusajs/types"
+import { Table, clx } from "@medusajs/ui"
+
+import Item from "@modules/cart/components/item"
+import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
+
+type ItemsTemplateProps = {
+  cart: HttpTypes.StoreCart
+}
+
+const ItemsPreviewTemplate = ({ cart }: ItemsTemplateProps) => {
+  const items = cart.items
+  const hasOverflow = items && items.length > 4
+
+  return (
+    <div
+      className={clx({
+        "pl-[1px] overflow-y-scroll overflow-x-hidden no-scrollbar max-h-[420px]":
+          hasOverflow,
+      })}
+    >
+      <Table>
+        <Table.Body data-testid="items-table">
+          {items
+            ? items
+                .sort((a, b) => {
+                  return (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1
+                })
+                .map((item) => {
+                  return (
+                    <Item
+                      key={item.id}
+                      item={item}
+                      type="preview"
+                      currencyCode={cart.currency_code}
+                    />
+                  )
+                })
+            : repeat(5).map((i) => {
+                return <SkeletonLineItem key={i} />
+              })}
+        </Table.Body>
+      </Table>
+    </div>
+  )
+}
+
+export default ItemsPreviewTemplate

package/templates/storefront/src/modules/cart/templates/summary.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import CartTotals from "@modules/common/components/cart-totals"
+import DiscountCode from "@modules/checkout/components/discount-code"
+import { HttpTypes } from "@medusajs/types"
+
+type SummaryProps = {
+  cart: HttpTypes.StoreCart & {
+    promotions: HttpTypes.StorePromotion[]
+  }
+  customer: HttpTypes.StoreCustomer | null
+}
+
+function getCheckoutStep(cart: HttpTypes.StoreCart, customer: HttpTypes.StoreCustomer | null) {
+  return "payment"
+}
+
+const Summary = ({ cart, customer }: SummaryProps) => {
+  const step = getCheckoutStep(cart, customer)
+
+  return (
+    <div className="flex flex-col gap-y-4 min-[550px]:gap-y-5 sm:gap-y-6">
+      <DiscountCode cart={cart} />
+      <CartTotals totals={cart} items={cart.items} checkoutStep={step} customer={customer} />
+    </div>
+  )
+}
+
+export default Summary

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

@@ -0,0 +1,390 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import React, { useState, useEffect } from "react"
+import { createPortal } from "react-dom"
+import Input from "@modules/common/components/input"
+import CountrySelect from "../country-select"
+import Checkbox from "@modules/common/components/checkbox"
+import PhoneInput from "react-phone-input-2"
+import "react-phone-input-2/lib/style.css"
+
+import { useModal } from "@core/context/modal-context"
+
+type AddAddressModalProps = {
+  isOpen: boolean
+  onClose: () => void
+  onSave: (formData: FormData) => void
+  cart: HttpTypes.StoreCart | null
+  editingAddress?: HttpTypes.StoreCustomerAddress | null
+}
+
+const AddAddressModal: React.FC<AddAddressModalProps> = ({
+  isOpen,
+  onClose,
+  onSave,
+  cart,
+  editingAddress,
+}) => {
+  const { setIsModalOpen } = useModal()
+  const [addressType, setAddressType] = useState<"HOME" | "OFFICE">(
+    (editingAddress?.metadata?.address_type as "HOME" | "OFFICE") || "HOME"
+  )
+  const [isDefault, setIsDefault] = useState(
+    editingAddress?.is_default_shipping ||
+    editingAddress?.metadata?.is_default === "true" ||
+    editingAddress?.metadata?.is_default === true ||
+    false
+  )
+
+  const [fullName, setFullName] = useState(editingAddress?.first_name || "")
+  const [phone, setPhone] = useState(editingAddress?.phone || "")
+  const [postalCode, setPostalCode] = useState(editingAddress?.postal_code || "")
+  const [city, setCity] = useState(editingAddress?.city || "")
+  const [province, setProvince] = useState(editingAddress?.province || "")
+  const [phoneError, setPhoneError] = useState<string | null>(null)
+
+  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)
+  }
+
+  React.useEffect(() => {
+    setIsModalOpen(isOpen)
+    if (isOpen) {
+      document.body.style.overflow = "hidden"
+      // Sync form states with editingAddress when opening
+      setAddressType((editingAddress?.metadata?.address_type as "HOME" | "OFFICE") || "HOME")
+      setIsDefault(
+        editingAddress?.is_default_shipping ||
+        editingAddress?.metadata?.is_default === "true" ||
+        editingAddress?.metadata?.is_default === true ||
+        false
+      )
+      setPostalCode(editingAddress?.postal_code || "")
+      setCity(editingAddress?.city || "")
+      setProvince(editingAddress?.province || "")
+      setFullName(editingAddress?.first_name || "")
+      setPhone(editingAddress?.phone || "")
+    } else {
+      document.body.style.overflow = "unset"
+      setPhoneError(null)
+    }
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [isOpen, setIsModalOpen, editingAddress])
+
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!isOpen || !mounted) return null
+
+  const modalContent = (
+    <div
+      className="fixed inset-0 bg-black/75 backdrop-blur-md z-[10000] flex justify-center p-4 items-center"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div className="bg-white rounded-xl w-full max-h-[90vh] shadow-2xl relative flex flex-col" style={{ width: '600px' }}>
+        <div className="checkout-modal-header px-6 py-5 flex items-center justify-between rounded-t-xl shrink-0">
+          <h2 className="text-xl font-bold">
+            {editingAddress ? "Edit Address" : "Add New Address"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-inverse hover:text-gray-200 text-2xl font-bold transition-colors w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/20"
+          >
+            ×
+          </button>
+        </div>
+
+        <form
+          action={(formData) => {
+            const digits = phone.replace(/\D/g, "")
+            if (digits.length < 12) {
+              setPhoneError("Please enter a valid 10-digit mobile number")
+              return
+            }
+
+            // Add address type and default address metadata
+            formData.append("address_type", addressType)
+            formData.append("is_default", isDefault ? "true" : "false")
+            formData.append("email", cart?.email || "")
+            formData.append("same_as_billing", "on")
+            formData.set("shipping_address.phone", phone)
+            if (editingAddress?.id) {
+              formData.append("address_id", editingAddress.id)
+            }
+            onSave(formData)
+            onClose()
+          }}
+          className="flex-1 flex flex-col overflow-hidden bg-gray-50 rounded-b-xl"
+        >
+          <div className="flex-1 overflow-y-auto p-6 space-y-6">
+            <div className="bg-white p-5 rounded-lg shadow-sm">
+              <h3 className="text-lg font-semibold text-heading mb-4 flex items-center gap-2">
+                <span className="w-1 h-6 rounded bg-brand-accent"></span>
+                CONTACT DETAILS
+              </h3>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Full Name<span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    label=""
+                    name="shipping_address.first_name"
+                    value={fullName}
+                    onChange={handleTextOnlyChange(setFullName)}
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Mobile No<span className="text-red-500">*</span>
+                  </label>
+                  <div className="relative w-full h-[48px]">
+                    <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: "8px",
+                        border: phoneError ? "1px solid #EF4444" : "1px solid #D1D5DB",
+                        backgroundColor: "var(--color-surface)",
+                        fontFamily: "inherit",
+                        color: "#000"
+                      }}
+                      containerStyle={{
+                        width: "100%",
+                        height: "48px"
+                      }}
+                      buttonStyle={{
+                        border: phoneError ? "1px solid #EF4444" : "1px solid #D1D5DB",
+                        borderRight: "none",
+                        backgroundColor: "var(--color-surface)",
+                        borderRadius: "8px 0 0 8px",
+                        width: "48px",
+                        height: "48px",
+                        zIndex: 11
+                      }}
+                      dropdownStyle={{
+                        width: "280px",
+                        zIndex: 1000
+                      }}
+                    />
+                    {phoneError && (
+                      <p className="text-[#EF4444] text-[11px] font-medium italic mt-1 leading-none">{phoneError}</p>
+                    )}
+                    {/* Invisible validatable input for phone validation */}
+                    <input
+                      type="text"
+                      name="shipping_address.phone"
+                      value={phone}
+                      required
+                      pattern="[0-9]{12,15}"
+                      title="Please enter a valid 10-digit mobile number"
+                      className="absolute opacity-0 pointer-events-none w-px h-px overflow-hidden"
+                      tabIndex={-1}
+                      readOnly
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white p-5 rounded-lg shadow-sm">
+              <h3 className="text-lg font-semibold text-heading mb-4 flex items-center gap-2">
+                <span className="w-1 h-6 rounded bg-brand-accent"></span>
+                ADDRESS DETAILS
+              </h3>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Pin Code<span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    label=""
+                    name="shipping_address.postal_code"
+                    value={postalCode}
+                    onChange={handlePincodeChange}
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Address (locality, building, street)<span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    label=""
+                    name="shipping_address.address_1"
+                    defaultValue={editingAddress?.address_1 || ""}
+                    required
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Locality / Town<span className="text-red-500">*</span>
+                  </label>
+                  <Input
+                    label=""
+                    name="shipping_address.city"
+                    value={city}
+                    onChange={handleTextOnlyChange(setCity)}
+                    required
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      Country
+                    </label>
+                    <CountrySelect
+                      name="shipping_address.country_code"
+                      region={cart?.region}
+                      defaultValue={editingAddress?.country_code || undefined}
+                      required
+                      disabled
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-1">
+                      State<span className="text-red-500">*</span>
+                    </label>
+                    <Input
+                      label=""
+                      name="shipping_address.province"
+                      value={province}
+                      onChange={handleTextOnlyChange(setProvince)}
+                      required
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white p-5 rounded-lg shadow-sm">
+              <h3 className="text-lg font-semibold text-heading mb-4 flex items-center gap-2">
+                <span className="w-1 h-6 rounded bg-brand-accent"></span>
+                ADDRESS TYPE
+              </h3>
+              <div className="flex gap-6">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <div className="relative">
+                    <input
+                      type="radio"
+                      name="address_type"
+                      value="HOME"
+                      checked={addressType === "HOME"}
+                      onChange={() => setAddressType("HOME")}
+                      className="sr-only"
+                    />
+                    <div
+                      className={addressType === "HOME" ? "w-5 h-5 rounded-full border-2 flex items-center justify-center" : "w-5 h-5 rounded-full border-2 border-gray-300 bg-white"}
+                      style={addressType === "HOME" ? { backgroundColor: 'var(--color-brand-accent)', borderColor: 'var(--color-brand-accent)' } : {}}
+                    >
+                      {addressType === "HOME" && (
+                        <div className="w-2 h-2 rounded-full bg-white" />
+                      )}
+                    </div>
+                  </div>
+                  <span className="text-gray-700">Home</span>
+                </label>
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <div className="relative">
+                    <input
+                      type="radio"
+                      name="address_type"
+                      value="OFFICE"
+                      checked={addressType === "OFFICE"}
+                      onChange={() => setAddressType("OFFICE")}
+                      className="sr-only"
+                    />
+                    <div
+                      className={addressType === "OFFICE" ? "w-5 h-5 rounded-full border-2 flex items-center justify-center" : "w-5 h-5 rounded-full border-2 border-gray-300 bg-white"}
+                      style={addressType === "OFFICE" ? { backgroundColor: 'var(--color-brand-accent)', borderColor: 'var(--color-brand-accent)' } : {}}
+                    >
+                      {addressType === "OFFICE" && (
+                        <div className="w-2 h-2 rounded-full bg-white" />
+                      )}
+                    </div>
+                  </div>
+                  <span className="text-gray-700">Office</span>
+                </label>
+              </div>
+            </div>
+
+            <div className="bg-white p-5 rounded-lg shadow-sm">
+              <Checkbox
+                label="Make this as my default address"
+                name="is_default"
+                checked={isDefault}
+                onChange={() => setIsDefault(!isDefault)}
+              />
+            </div>
+
+          </div>
+
+          <div className="flex gap-4 p-6 border-t border-[var(--color-border)] bg-surface shrink-0">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 px-4 py-3 border-2 border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50 hover:border-gray-400 transition-all"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="flex-1 px-4 py-3 rounded-lg font-medium shadow-brand-sm checkout-btn-primary"
+            >
+              Save Address
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+
+  return createPortal(modalContent, document.body)
+}
+
+export default AddAddressModal

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

@@ -0,0 +1,135 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import React from "react"
+
+type AddressCardProps = {
+  address: HttpTypes.StoreCustomerAddress | any
+  isSelected: boolean
+  isDefault?: boolean
+  onSelect: () => void
+  onEdit: () => void
+  onRemove: () => void
+}
+
+const AddressCard: React.FC<AddressCardProps> = ({
+  address,
+  isSelected,
+  isDefault = false,
+  onSelect,
+  onEdit,
+  onRemove,
+}) => {
+  const addressType = address.metadata?.address_type || "HOME"
+
+  const handleCardClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Don't trigger onSelect if clicking on buttons
+    const target = e.target as HTMLElement
+    if (target.closest('button')) {
+      return
+    }
+    onSelect()
+  }
+
+  return (
+    <div
+      className={`rounded-lg p-6 border-2 cursor-pointer transition-all ${isSelected
+        ? "shadow-md"
+        : ""
+        }`}
+      style={{
+        borderColor: 'var(--color-border)'
+      }}
+      onClick={handleCardClick}
+    >
+      <div className="flex items-start gap-4">
+        {/* Radio Button */}
+        <div className="flex-shrink-0 mt-1">
+          <div
+            className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${isSelected
+              ? ""
+              : "border-gray-300 bg-page-bg"
+              }`}
+            style={isSelected ? {
+              borderColor: 'var(--color-brand-accent)',
+              backgroundColor: 'var(--color-brand-accent)'
+            } : {}}
+          >
+            {isSelected && (
+              <div className="w-2 h-2 rounded-full bg-white"></div>
+            )}
+          </div>
+        </div>
+
+        {/* Address Content */}
+        <div className="flex-1">
+          {/* Name and Address Type Tag */}
+          <div className="flex items-center gap-3 mb-3">
+            <h3 className="text-lg font-bold text-heading">
+              {address.first_name} {address.last_name === "." ? "" : address.last_name}
+            </h3>
+            <span
+              className="px-2 py-1 rounded text-xs font-medium uppercase"
+              style={{
+                backgroundColor: 'var(--color-brand-accent-muted)',
+                color: 'var(--color-brand-accent)',
+                border: '1px solid var(--color-brand-accent)'
+              }}
+            >
+              {addressType}
+            </span>
+          </div>
+
+          {/* Address Details */}
+          <div className="text-base text-gray-700 mb-2">
+            <p>{address.address_1}</p>
+            {address.address_2 && <p>{address.address_2}</p>}
+            <p>
+              {address.city}
+              {address.province && `, ${address.province}`}
+              {address.postal_code && ` - ${address.postal_code}`}
+            </p>
+            {address.country_code && (
+              <p>{address.country_code.toUpperCase()}</p>
+            )}
+          </div>
+
+          {/* Mobile Number */}
+          {address.phone && (
+            <div className="text-base text-gray-700 mb-2">
+              <span className="text-gray-600">Mobile: </span>
+              <span className="font-semibold">{address.phone}</span>
+            </div>
+          )}
+
+          {/* Pay on Delivery */}
+          <div className="text-sm text-gray-500 mb-4">
+            <span>• Pay on Delivery available</span>
+          </div>
+
+          {/* Action Buttons */}
+          <div
+            className="flex gap-3 mt-4 relative z-10"
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+          >
+            <button
+              type="button"
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                onEdit()
+              }}
+              className="checkout-btn-outline flex items-center justify-center relative z-20 w-[89px] h-10 text-sm font-medium"
+            >
+              Edit
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AddressCard