@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/checkout/components/processing-overlay/index.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import React, { useState, useEffect } from "react"
+
+const ProcessingOverlay = ({ 
+  isOpen, 
+  title,
+  subtitle = "Please do not refresh or close this window",
+  variant = "payment"
+}: { 
+  isOpen: boolean
+  title?: string
+  subtitle?: string
+  variant?: "payment" | "order"
+}) => {
+  const [messageIndex, setMessageIndex] = useState(0)
+  
+  const paymentMessages = [
+    "Securing your transaction...",
+    "Verifying with payment provider...",
+    "Finalizing your order...",
+    "Almost there...",
+    "Finishing up..."
+  ]
+  
+  const orderMessages = [
+    "Placing your order...",
+    "Preparing your confirmation...",
+    "Almost there...",
+    "Finalizing details...",
+    "Finishing up..."
+  ]
+  
+  const messages = variant === "payment" ? paymentMessages : orderMessages
+  const displayTitle = title || (variant === "payment" ? "Processing Payment" : "Placing Order")
+
+  useEffect(() => {
+    if (!isOpen) {
+      setMessageIndex(0)
+      return
+    }
+
+    const interval = setInterval(() => {
+      setMessageIndex((prev) => (prev + 1) % messages.length)
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [isOpen, messages.length])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white/70 backdrop-blur-md animate-in fade-in duration-300">
+      <div className="bg-white p-8 rounded-2xl shadow-2xl border border-brand-accent-border flex flex-col items-center max-w-xs w-full mx-4 transform animate-in zoom-in-95 duration-300">
+        <div className="relative mb-2">
+          <img 
+            src="/uploads/profile-images/t-shirt.gif" 
+            alt="Placing order..."
+            className="w-32 h-32 object-contain mx-auto"
+          />
+        </div>
+
+        <h3 className="text-xl font-bold text-heading mb-1 text-center">{displayTitle}</h3>
+        
+        <div className="h-6 flex items-center justify-center mb-2 text-center px-4">
+          <p key={messageIndex} className="text-brand-accent font-semibold text-sm animate-in slide-in-from-bottom-2 fade-in duration-500">
+            {messages[messageIndex]}
+          </p>
+        </div>
+
+        <div className="w-full bg-gray-100 h-1.5 rounded-full overflow-hidden mb-4">
+          <div className="h-full bg-brand-accent rounded-full animate-progress transition-all duration-500 ease-out"></div>
+        </div>
+
+        <p className="text-xs text-gray-400 text-center italic leading-relaxed">
+          {subtitle}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default ProcessingOverlay

package/templates/storefront/src/modules/checkout/components/review/index.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Heading, Text, clx } from "@medusajs/ui"
+
+import PaymentButton from "../payment-button"
+import { useSearchParams, usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+const Review = ({ cart }: { cart: any }) => {
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  // Scroll to top on mount
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })
+  }, [])
+
+  // Check if we're on the payment page or if step=review query param exists
+  const isOnPaymentPage = pathname.includes("/checkout/payment")
+  const paidByGiftcard =
+    cart?.gift_cards && cart?.gift_cards?.length > 0 && cart?.total === 0
+  const paymentReady = cart.payment_collection || paidByGiftcard
+  const isOpen = searchParams.get("step") === "review" || (isOnPaymentPage && paymentReady)
+
+  const previousStepsCompleted =
+    cart.shipping_address &&
+    cart.shipping_methods.length > 0 &&
+    paymentReady
+
+  if (!isOpen || !previousStepsCompleted) {
+    return null
+  }
+
+  return (
+    <div id="review-section" className="bg-white">
+      <div className="flex flex-row items-center justify-between mb-6">
+        <Heading
+          level="h2"
+          className="flex flex-row text-3xl-regular gap-x-2 items-baseline text-heading font-bold"
+        >
+          Review
+        </Heading>
+      </div>
+      <>
+        <div className="flex items-start gap-x-1 w-full mb-6">
+          <div className="w-full">
+            <Text className="txt-medium-plus text-ui-fg-base mb-1">
+              By clicking the Place Order button, you confirm that you have
+              read, understand and accept our Terms of Use, Terms of Sale and
+              Returns Policy and acknowledge that you have read Chocomelon&apos;s Privacy Policy.
+            </Text>
+          </div>
+        </div>
+        <PaymentButton cart={cart} data-testid="submit-order-button" />
+      </>
+    </div>
+  )
+}
+
+export default Review

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

@@ -0,0 +1,103 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import React, { useState, useEffect } from "react"
+import { createPortal } from "react-dom"
+import { useModal } from "@core/context/modal-context"
+import AddressCard from "../address-card"
+
+type SelectAddressModalProps = {
+    isOpen: boolean
+    onClose: () => void
+    addresses: HttpTypes.StoreCustomerAddress[]
+    selectedAddressId: string | null
+    onSelect: (addressId: string) => void
+    onEdit: (address: HttpTypes.StoreCustomerAddress) => void
+}
+
+const SelectAddressModal: React.FC<SelectAddressModalProps> = ({
+    isOpen,
+    onClose,
+    addresses,
+    selectedAddressId,
+    onSelect,
+    onEdit,
+}) => {
+    const { setIsModalOpen } = useModal()
+
+    React.useEffect(() => {
+        setIsModalOpen(isOpen)
+        if (isOpen) {
+            document.body.style.overflow = "hidden"
+        } else {
+            document.body.style.overflow = "unset"
+        }
+        return () => {
+            document.body.style.overflow = "unset"
+        }
+    }, [isOpen, setIsModalOpen])
+
+    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 overflow-y-auto items-start"
+            onClick={(e) => {
+                if (e.target === e.currentTarget) onClose()
+            }}
+        >
+            <div className="bg-white rounded-xl w-full max-h-fit shadow-2xl my-8 relative" style={{ width: '600px' }}>
+                <div className="checkout-modal-header text-inverse px-6 py-5 flex items-center justify-between rounded-t-xl sticky top-0 z-10">
+                    <h2 className="text-xl font-bold">Select Delivery 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>
+
+                <div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto bg-gray-50">
+                    {addresses.length > 0 ? (
+                        addresses.map((address) => (
+                            <AddressCard
+                                key={address.id}
+                                address={address}
+                                isSelected={selectedAddressId === address.id}
+                                onSelect={() => {
+                                    onSelect(address.id)
+                                    onClose()
+                                }}
+                                onEdit={() => onEdit(address)}
+                                onRemove={() => { }} // Remove option not needed in selection modal
+                            />
+                        ))
+                    ) : (
+                        <div className="text-center py-8">
+                            <p className="text-gray-500">No saved addresses found.</p>
+                        </div>
+                    )}
+                </div>
+
+                <div className="p-4 border-t bg-white rounded-b-xl flex justify-end">
+                    <button
+                        onClick={onClose}
+                        className="px-6 py-2 border border-gray-300 rounded-full font-medium text-gray-700 hover:bg-gray-50 transition-colors"
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+
+    return createPortal(modalContent, document.body)
+}
+
+export default SelectAddressModal