"use client"; import React, { useEffect, useRef, useState } from "react"; import dynamic from "next/dynamic"; import { useDispatch, useSelector } from "react-redux"; import { toast } from "react-toastify"; import { useRouter } from "next/navigation"; import { FiMapPin, FiPlus, FiMinus, FiTrash2, FiCreditCard, FiShoppingBag, FiTag, FiChevronRight, FiChevronLeft, FiEdit2, FiHome, FiBriefcase, FiMoreVertical, FiCheck, FiInfo, } from "react-icons/fi"; import { CiWallet } from "react-icons/ci"; import { FaMoneyBillWave } from "react-icons/fa"; import { MdOutlineCelebration, MdRemoveShoppingCart } from "react-icons/md"; import { RiCouponLine, RiWallet3Line, RiCloseFill } from "react-icons/ri"; import { TbDiscount } from "react-icons/tb"; import { IoMdArrowBack, IoMdArrowForward } from "react-icons/io"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { Swiper, SwiperSlide } from "swiper/react"; import { Navigation } from "swiper/modules"; import "swiper/css"; import "swiper/css/navigation"; import * as api from "@/api/apiRoutes"; import { t } from "@/utils/translation"; import { formatCurrency, hasMissingRequiredPrescriptions, getMaxAddableQuantity, } from "@/utils/helperFunction"; import { useDebouncedQuantity, FlushCtx } from "@/hooks/useDebouncedQuantity"; // PrescriptionUpload.jsx (out of scope for this migration batch) is still untyped // JS; under this project's allowJs/checkJs:false config TS misinfers its exported // component type from its JSDoc param comments as `(string | number)`. Cast to // `any` at the import boundary — same pattern used in the cart/** files above. import PrescriptionUploadRaw from "@/components/prescription/PrescriptionUpload"; const PrescriptionUpload = PrescriptionUploadRaw as any; import { isRtl } from "@/lib/utils"; import { LuTriangleAlert } from "react-icons/lu"; import { Dialog as DialogRaw, DialogContent as DialogContentRaw, DialogOverlay as DialogOverlayRaw, } from "@/components/ui/dialog"; import ImageWithPlaceholder from "../image-with-placeholder/ImageWithPlaceholder"; import CheckoutSkeleton from "./CheckoutSkeleton"; import Image from "next/image"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import PhoneNumberInput from "@/components/phonenumberinput/PhoneNumberInput"; import useBillingDetails from "@/hooks/useBillingDetails"; import useCurrency from "@/hooks/useCurrency"; // src/components/ui/dialog.tsx (out of scope for this migration batch, owned by a // concurrent agent) is a .tsx file but its exports are still untyped forwardRef // components, so TS infers overly-narrow prop types for them. Cast to `any` at the // boundary rather than touch the shared ui component — same pattern as // StripeModal.tsx / VariantsModal.tsx elsewhere in this migration. const Dialog = DialogRaw as any; const DialogContent = DialogContentRaw as any; const DialogOverlay = DialogOverlayRaw as any; // Brand payment-gateway logos (same SVGs as the wallet recharge modal) so each // method shows its real logo instead of a generic GPay/card icon. import RazorpayLogo from "@/assets/payment_methods_svgs/ic_razorpay.svg"; import PaypalLogo from "@/assets/payment_methods_svgs/ic_paypal.svg"; import PaystackLogo from "@/assets/payment_methods_svgs/ic_paystack.svg"; import StripeLogo from "@/assets/payment_methods_svgs/ic_stripe.svg"; import CashfreeLogo from "@/assets/payment_methods_svgs/ic_cashfree.svg"; import MidtransLogo from "@/assets/payment_methods_svgs/Midtrans.svg"; import PhonePeLogo from "@/assets/payment_methods_svgs/Phonepe.svg"; import PaytabsLogo from "@/assets/payment_methods_svgs/ic_paytabs.svg"; const HomeVerticleProductCard = dynamic( () => import("../productcards/HomeVerticleProductCard"), { ssr: false }, ); import { clearCartPromo, clearPrescriptions, setCartCheckout, setCartProducts, setCartPromo, } from "@/redux/slices/cartSlice"; import { setAllAddresses, setSelectedAddresForEdit, } from "@/redux/slices/addressSlice"; import { setAddress, setCheckoutTotal, setPhonePeCheckoutDetails, setOrderType, setPaymentMethod, setWalletChecked, setUserWalletBalance, setOrderNote, } from "@/redux/slices/checkoutSlice"; import { setCurrentUser } from "@/redux/slices/userSlice"; const NewAddressModal = dynamic( () => import("../newaddressmodal/NewAddressModal"), { ssr: false }, ); const StripeModal = dynamic(() => import("./StripeModal"), { ssr: false }); import UnlockCouponNudge from "@/components/cart/UnlockCouponNudge"; const CouponCodeDrawer = dynamic( () => import("../couponcode/CouponCodeDrawer"), { ssr: false }, ); const Lottie = dynamic(() => import("lottie-react"), { ssr: false }); import couponBurstAnimation from "@/assets/order_place_animation/order_placed_back_animation.json"; import useZoneHref from "@/hooks/useZoneHref"; import useStoreClosed from "@/hooks/useStoreClosed"; // @paystack/inline-js touches `window` at module scope, so a static top-level // import throws during SSR now that this component is imported directly // (no longer behind next/dynamic's ssr:false). Same lazy-load pattern already // used by WalletBalanceModal.jsx for the same package. // No bundled types for this package — `any` is the pragmatic choice for a // third-party payment SDK internal, per this project's typing policy. let PaystackPop: any; if (typeof window !== "undefined") { import("@paystack/inline-js").then((module) => { PaystackPop = module.default; }); } interface CheckoutItemRowProps { /** checkout cart line shape from api.getCart(checkout:1) — no exported type, * kept `any` per this migration's pragmatic-TS policy for API row shapes. */ product: any; money: (amount?: number | string) => string; onCommitQty: ( product: any, variantId: number | string, nextQty: number, ctx?: FlushCtx, ) => void | Promise; onRemoveUnits: ( product: any, variantId: number | string, units?: number, ctx?: FlushCtx, ) => void | Promise; /** Store-wide cap on total cart quantity (setting?.setting?.max_cart_items_count * from the parent). Missing/unlimited → no store-wide cap. */ maxCartItemsCount?: number | string | null; /** Cart's total quantity across every other line (i.e. itemCount minus this * line's own current qty) — the headroom left under maxCartItemsCount before * this line's own qty is added back in. */ otherLinesQty?: number; } // One cart line. Owns its optimistic+debounced stepper so rapid +/- clicks fire // a single network call (matches HomeVerticleProductCard). Parent supplies the // commit/remove side effects (they refetch checkout totals + reapply coupon). const CheckoutItemRow = ({ product, money, onCommitQty, onRemoveUnits, maxCartItemsCount, otherLinesQty, }: CheckoutItemRowProps) => { const { guard: guardClosed, closedProps } = useStoreClosed(); const variant = product?.variants?.[0] || {}; const unitPrice = product?.discounted_price && product?.discounted_price != 0 ? product?.discounted_price : product?.price; const productName = product?.product?.translations?.name || product?.name; const imageUrl = product?.images?.[0]?.image_url || variant?.image; const serverQty = Number(variant?.quantity ?? product?.qty ?? 0); const variantText = variant?.attributes_text; const variantId = variant?.id ?? product?.variant_id; const maxQty = getMaxAddableQuantity({ maxCartItemsCount, otherLinesQty, totalAllowedQty: product?.total_allowed_quantity, isUnlimitedStock: product?.is_unlimited_stock !== 0, stock: product?.stock, }); // Out of stock: limited stock (is_unlimited_stock === 0) AND nothing left. // Variant stock takes precedence when present, else the product-level stock. const stockLeft = Number(variant?.stock ?? product?.stock ?? 0); const outOfStock = Number(product?.is_unlimited_stock) === 0 && stockLeft <= 0; const { displayQty, increment, decrement } = useDebouncedQuantity({ serverQty, onCommit: (qty, ctx) => onCommitQty(product, variantId, qty, ctx), onRemove: (units, ctx) => onRemoveUnits(product, variantId, units, ctx), max: Number.isFinite(maxQty) ? maxQty : undefined, onMax: () => toast.error(t("max_cart_limit_error"), { toastId: "max_cart_limit_error", }), }); const qty = displayQty; // At the cap (max_cart_items_count headroom, total_allowed_quantity, or stock // when limited) → grey out "+", matching CartProductCard / HomeVerticleProductCard. // The hook already refuses to go past `maxQty`; this stops the button looking // clickable when it can only ever fire the max-limit toast. maxQty folds in all // three ceilings, so atMaxQty derives from it alone rather than recomputing. const atMaxQty = Number.isFinite(maxQty) && qty >= maxQty; // Strike-through original price + % off when the item is discounted. const basePrice = Number(product?.price) || 0; const hasDiscount = unitPrice && basePrice && unitPrice < basePrice; const offPercent = hasDiscount ? Math.round(((basePrice - unitPrice) / basePrice) * 100) : 0; return (
{/* image */}
{/* details */}
{/* top row: name (left) + line total (right) — Flipkart-style alignment */}

{productName}

{variantText && (

{variantText}

)}
{money(unitPrice * qty)} {qty > 1 && ( {qty} × {money(unitPrice)} )}
{/* unit price + strike + % off */}
{money(unitPrice)} {hasDiscount && ( <> {money(basePrice)} {offPercent}% {t("off")} )}
{product?.slab_discount_message && (

{product?.slab_discount_message}

)} {/* qty stepper + inline prescription upload + remove — one row when empty (3 together); uploaded file link wraps to its own line below. */}
{outOfStock ? ( {t("sold_out") || "Sold Out"} ) : (
{qty}
)} {/* prescription — medical (product_type 5) only */} {Number(product?.product_type) === 5 && ( )}
); }; const CheckoutUI = () => { const zoneHref = useZoneHref(); const { storeClosed, notifyClosed, closedProps } = useStoreClosed(); const router = useRouter(); const dispatch = useDispatch(); const rtl = isRtl(); const cart = useSelector((state: any) => state.Cart); const address = useSelector((state: any) => state.Addresses); const user = useSelector((state: any) => state.User.user); const setting = useSelector((state: any) => state.Setting); const checkout = useSelector((state: any) => state.Checkout); const prescriptions = useSelector((state: any) => state.Cart.prescriptions); const city = useSelector((state: any) => state.City.city); const theme = useSelector((state: any) => state.Theme.theme); // Active sales channel (quick vs ecommerce). Header keeps cart.activeChannel // in sync with the shop-mode toggle; we watch it so the checkout refetches // when the channel changes mid-checkout (was stale before — no channel dep). const shopMode = useSelector((state: any) => state.ShopMode.mode); const activeChannel = cart?.activeChannel; // Redux cart line count — drives a checkout refetch when an item is added or // removed OUTSIDE this page's own handlers (e.g. the Frequently Bought Together // strip, which dispatches setCartProducts). Without watching this, adding a // cross-sell product left "Your Cart" showing the stale list until reload. const reduxCartCount = cart?.cartProducts?.length ?? 0; const guestCartCount = cart?.guestCart?.length ?? 0; const [loading, setLoading] = useState(true); const [checkoutLoading, setCheckoutLoading] = useState(false); const [paymentLoading, setPaymentLoading] = useState(false); // Checkout (/cart?checkout=1) response payload — no exported type, kept `any` // per this migration's pragmatic-TS policy for API response shapes. const [checkoutData, setCheckoutData] = useState(null); const [checkOutError, setCheckOutError] = useState(false); // Delivery validation is SEPARATE from cart contents. status:0 ("not delivering // on selected address") must NOT empty the cart — it only means charges/total // can't be computed for this address. Cart items stay visible from the last // successful checkout response held in `lastCartRef`. const [deliveryError, setDeliveryError] = useState(""); const lastCartRef = useRef(null); // Guard against out-of-order responses when the user switches addresses fast. const fetchSeqRef = useRef(0); const [crossSell, setCrossSell] = useState([]); const [upSell, setUpSell] = useState([]); // Confetti burst shown briefly when a coupon is newly applied. const [showCouponBurst, setShowCouponBurst] = useState(false); const [showAddAddres, setShowAddAddres] = useState(false); const [isAddressSelected, setIsAddressSelected] = useState(false); // Address pending deletion — drives the styled confirm modal (replaces the // native window.confirm). null = modal closed. const [addressToDelete, setAddressToDelete] = useState(null); const [deletingAddress, setDeletingAddress] = useState(false); // Currency symbol + decimal precision — countrySetting (zone-aware, // refetched on city change) is authoritative for this LIVE checkout screen; // checkout/cart response fields have been seen carrying a stale/wrong // currency (e.g. the merchant's default INR even in an AED zone), so they // are only used when countrySetting hasn't loaded yet. const { currency: liveCurrency, currencyCode: liveCurrencyCode, decimals: liveDecimals, } = useCurrency(); const currency = liveCurrency || checkoutData?.currency || cart?.currency; const decimals = liveDecimals || checkoutData?.decimal_point || 0; const currencyCode = liveCurrencyCode || checkoutData?.currency_code || cart?.currency_code; const [discountInput, setDiscountInput] = useState(""); const [showCouponCode, setShowCouponCode] = useState(false); // Payment picker drawer. Collapsed payment card shows just the selected method // + "Change"; the drawer lists all enabled methods. Keeps the right column // short so Order Summary + Place Order stay visible even with 10-12 gateways. const [showPaymentPicker, setShowPaymentPicker] = useState(false); // Inline "+ Add delivery instruction" below the cart. Collapsed by default; // opens a textarea when clicked (or when a note already exists). const [showNotesInput, setShowNotesInput] = useState(false); const billingDetails = useBillingDetails(); // Ecom orders are detailed by order_item_id (?type=ecommerce). place_order // RETURNS order_item_id ONLY for ecom orders (Quick orders don't), so its // presence is the reliable ecom signal — more reliable than cart.activeChannel, // which can read "quick" (shop-mode header) even when the order went out on the // ecommerce channel. const orderItemIdRef = useRef(null); // Suffix appended to every status URL: for ecom orders, carries the // order_item_id + order_from=ecommerce so the status page routes View Order to // the ecom detail. Empty for Quick. const statusOrderSuffix = () => orderItemIdRef.current ? `&order_item_id=${orderItemIdRef.current}&order_from=ecommerce` : ""; const [showStripe, setShowStripe] = useState(false); const [stripeOrderId, setStripeOrderId] = useState(null); const [stripeClientSecret, setStripeClientSecret] = useState(null); const [stripeTransactionId, setStripeTransactionId] = useState(null); const getCurrentUser = async () => { try { // Pass city coords so user_details is zone-scoped (wallet/serviceability // vary by location); bare call returns unscoped/stale data on checkout. const response = await api.getUser({ latitude: city?.latitude, longitude: city?.longitude, }); dispatch(setCurrentUser({ data: response.data })); } catch (error) { console.log("error", error); } }; const validateCouponCode = async () => { if ( !cart?.promo_code?.promo_code || !checkout?.address?.latitude || !checkout?.address?.longitude ) return; try { const response = await api.setPromoCode({ promoCodeName: cart?.promo_code?.promo_code, amount: cart?.cartSubTotal, latitude: checkout?.address?.latitude, longitude: checkout?.address?.longitude, }); if (response.status == 1) { dispatch(setCartPromo({ data: response.data })); } else { dispatch(clearCartPromo()); } } catch (error) { console.log("Error", error); } }; const handleFetchCheckout = async () => { const couponseCodeId = cart?.promo_code?.promo_code_id; // Blinkit-style: products must show even before an address is picked. Use // the selected delivery address coords when available, otherwise fall back // to the active city coords so getCart returns the cart immediately. Once // the user selects an address (checkout.address.id changes), this refetches // with the precise coords so delivery/zone charges recompute correctly. const latitude = checkout?.address?.latitude ?? city?.latitude; const longitude = checkout?.address?.longitude ?? city?.longitude; const orderType = checkout?.orderType; // No location at all (no address AND no city) — release the skeleton so a // channel switch before any location is set doesn't leave it stuck. if (!latitude || !longitude || !orderType) { setLoading(false); return; } // Sequence token: only the latest request is allowed to commit state, so a // slow response for a previously-selected address can't clobber a newer one. const seq = ++fetchSeqRef.current; console.log("[checkout] cart request →", { seq, addressId: checkout?.address?.id ?? null, latitude, longitude, orderType, promocode_id: couponseCodeId, }); try { const response = await api.getCart({ latitude, longitude, checkout: 1, promocode_id: couponseCodeId, address_id: checkout?.address?.id, }); // Drop stale response (a newer fetch already fired). if (seq !== fetchSeqRef.current) { console.log("[checkout] cart response IGNORED (stale)", { seq, latest: fetchSeqRef.current, }); return; } // Deliverability is driven SOLELY by `is_deliverable_address` (1 = OK, // 0 = address not serviceable). It is independent of cart contents — the // cart is always populated from the response so products stay visible. const isDeliverable = Number(response?.data?.is_deliverable_address) === 1; console.log("[checkout] cart response ←", { seq, status: response?.status, is_deliverable_address: response?.data?.is_deliverable_address, cartBefore: (checkoutData?.cart ?? lastCartRef.current?.cart ?? []) .length, }); if (response?.status == 1) { // status:1 = valid cart response. ALWAYS populate the cart (items + // currency etc.) regardless of deliverability so products never vanish. dispatch(setCartCheckout({ data: response?.data })); dispatch( setCheckoutTotal({ data: Number(response?.data?.total_amount || 0) }), ); setCheckoutData(response?.data); lastCartRef.current = response?.data; // remember last good cart if (isDeliverable) { // Serviceable → normal checkout flow, charges/total valid. setCheckOutError(false); setDeliveryError(""); } else { // NOT serviceable → keep cart visible, block checkout, show banner. setCheckOutError(true); setDeliveryError( t("sorry_we_are_not_delivering_on_selected_address") || "Sorry, We are not delivering on selected address", ); } console.log("[checkout] store updated", { deliverable: isDeliverable, cartAfter: response?.data?.cart?.length ?? 0, total: response?.data?.total_amount, }); } else { // status:0 with an HTTP response = the cart is EMPTY for this channel // (e.g. {"status":0,"message":"No item(s) found in users cart"}). This is // NOT a network failure (those throw → catch). Clear the on-screen cart so // an empty channel doesn't keep showing the other channel's items/total. // Genuine network failures never reach here; they go to catch, which // preserves whatever is on screen. console.warn("[checkout] empty cart for channel — clearing", { seq, message: response?.message, }); dispatch(setCartCheckout({ data: null })); dispatch(setCheckoutTotal({ data: 0 })); setCheckoutData(null); lastCartRef.current = null; setCheckOutError(false); setDeliveryError(""); } } catch (error) { console.log("[checkout] cart request error", error); if (seq === fetchSeqRef.current) setCheckOutError(true); } finally { if (seq === fetchSeqRef.current) setLoading(false); } }; // Cross-sell ("frequently bought together") + upsell ("upgrade your pick") // suggestions. Kept as two distinct buckets so each renders its own section. const fetchRecommendations = async () => { const latitude = checkout?.address?.latitude ?? city?.latitude; const longitude = checkout?.address?.longitude ?? city?.longitude; if (!latitude || !longitude) return; try { const response = await api.getCartRecommendations({ latitude, longitude, }); if (response?.status == 1) { setCrossSell(response?.data?.cross_sell?.products || []); setUpSell(response?.data?.upsell?.products || []); } else { setCrossSell([]); setUpSell([]); } } catch (error) { console.log("Error", error); setCrossSell([]); setUpSell([]); } }; // `opts.selectNewestFrom` = list of address ids that existed BEFORE an add. // When provided, the address whose id is not in that list (the one just // added) is auto-selected, so adding an address from checkout immediately // makes it the active delivery address and recomputes charges. const fetchAddress = async (opts: { selectNewestFrom?: any[] } = {}) => { const { selectNewestFrom } = opts; try { const response: any = await api.getAddress(); if (response.status == 1) { const list = response.data || []; dispatch(setAllAddresses({ data: list })); const defaultAddress = list.find((a: any) => a.is_default == 1); if (Array.isArray(selectNewestFrom)) { // Pick the freshly added address (id absent from the pre-add list). const prevIds = new Set(selectNewestFrom); const added = list.find((a: any) => !prevIds.has(a.id)); dispatch(setAddress({ data: added || defaultAddress || list[0] })); } else if (checkout?.address != null) { // keep current selection } else if (!defaultAddress) { dispatch(setAddress({ data: list[0] })); } else { dispatch(setAddress({ data: defaultAddress })); } } else { dispatch(setAllAddresses({ data: [] })); } } catch (error) { console.log("Error", error); } finally { setLoading(false); } }; useEffect(() => { fetchAddress(); getCurrentUser(); dispatch(setOrderType({ data: "doorstep" })); // eslint-disable-next-line react-hooks/exhaustive-deps -- run-once on mount only }, []); useEffect(() => { validateCouponCode(); // eslint-disable-next-line react-hooks/exhaustive-deps -- validateCouponCode is redefined every render (not memoized); only the coupon/subtotal inputs it reads should re-trigger it }, [cart?.promo_code?.promo_code, cart?.cartSubTotal]); // Confetti burst when a coupon transitions from none → applied. Watching the // redux promo_code covers every apply path once, and skips the silent // re-validate (same code) + removal. `hadCouponRef` holds the previous code. const hadCouponRef = useRef(cart?.promo_code?.promo_code || null); useEffect(() => { const nowCode = cart?.promo_code?.promo_code || null; const prevCode = hadCouponRef.current; hadCouponRef.current = nowCode; if (nowCode && nowCode !== prevCode) { setShowCouponBurst(true); const timer = setTimeout(() => setShowCouponBurst(false), 1600); return () => clearTimeout(timer); } }, [cart?.promo_code?.promo_code]); useEffect(() => { // eslint-disable-next-line react-hooks/set-state-in-effect -- data fetch when address/city/channel/coupon change handleFetchCheckout(); fetchRecommendations(); // eslint-disable-next-line react-hooks/exhaustive-deps -- handleFetchCheckout/fetchRecommendations are redefined every render (not memoized); deps below are the intentional trigger list }, [ cart?.promo_code?.promo_code_id, checkout?.address?.id, // City coords are the fallback location when no address is selected — refetch // the cart when the active city changes so products/pricing stay correct. city?.latitude, city?.longitude, checkout?.orderType, // Refetch when the sales channel changes (quick <-> ecommerce). The axios // middleware tags requests with the active channel, so a refetch returns the // correct channel's cart/pricing. Watching both the cart bucket and the raw // shop mode covers either propagating first. activeChannel, shopMode, // Refetch when the cart contents change from OUTSIDE this page (e.g. the // Frequently Bought Together strip adds a line) so "Your Cart" stays in sync. reduxCartCount, guestCartCount, ]); // Drop stale checkout data the instant the channel changes and show the // skeleton (not the previous channel's products, nor a false "empty cart" // flash) until the refetch for the new channel resolves. handleFetchCheckout // clears `loading` when it completes. const didMountChannel = useRef(false); useEffect(() => { // Skip the initial mount — the mount effect already drives the first load. if (!didMountChannel.current) { didMountChannel.current = true; return; } // Channel switch: DROP the previous channel's cart. The /cart API returns // status != 1 for an empty cart, which handleFetchCheckout's else-branch // treats as a soft failure and *preserves* whatever is on screen. Without // clearing here, switching into an empty channel (e.g. Quick has items, // Shop all is empty) would keep showing the other channel's items with a // ₹0 total. The `loading` skeleton masks the brief blank until the refetch // for the new channel resolves; lastCartRef must clear too or `products` // falls back to it. console.log("[checkout] channel changed → refetching", { activeChannel, shopMode, }); lastCartRef.current = null; setCheckoutData(null); setCheckOutError(false); setDeliveryError(""); setLoading(true); }, [activeChannel, shopMode]); // ---- cart quantity handlers ---- // Commit a NET INCREASE: upsert the absolute target qty. Called by each row's // debounced stepper after clicks settle. Stale guard drops a slow earlier // response so it can't overwrite the latest totals. const handleCommitQty = async ( product: any, variantId: number | string, nextQty: number, ctx?: FlushCtx, ) => { if (nextQty < 1) return; try { const response = await api.addToCart({ product_id: product?.id, product_variant_id: variantId, qty: nextQty, latitude: city?.latitude, longitude: city?.longitude, }); if (ctx?.isStale?.()) return; if (response.status == 1) { await handleFetchCheckout(); fetchRecommendations(); await reapplyCoupon(response.sub_total); } else { toast.error(response.message); } } catch (error) { console.log("Error", error); } }; // Drop `units` from a line (debounced decrease) OR remove the whole line (the // trash button passes the full qty). ctx may be undefined for the trash path. // // OPTIMISTIC: update the on-screen cart + redux IMMEDIATELY, then hit the remove // API in the background. This kills the skeleton/refetch flash the user saw — // the row disappears (or its qty drops) instantly instead of waiting a full // round-trip. A quiet handleFetchCheckout afterwards reconciles totals/charges // (it doesn't touch `loading`, so no skeleton). On API failure we refetch to // restore the true server state. const handleRemoveUnits = async ( product: any, variantId: number | string, unitsArg?: number, ctx?: FlushCtx, ) => { const units = unitsArg ?? 1; // 1) Optimistically patch local checkout cart: remove the line when all its // units go, else decrement its quantity. setCheckoutData((prev: any) => { if (!prev?.cart) return prev; const nextCart = prev.cart .map((item: any) => { const itemVariantId = item?.variants?.[0]?.id ?? item?.variant_id; if (itemVariantId != variantId) return item; const curQty = Number( item?.variants?.[0]?.quantity ?? item?.qty ?? 0, ); const nextQty = curQty - units; if (nextQty <= 0) return null; return { ...item, qty: nextQty, variants: item?.variants?.[0] ? [ { ...item.variants[0], quantity: nextQty }, ...item.variants.slice(1), ] : item?.variants, }; }) .filter(Boolean); return { ...prev, cart: nextCart }; }); // 2) Optimistically patch redux cartProducts so item count / other screens // (header badge, cross-sell filter) reflect the removal right away. const nextRedux = (cart?.cartProducts ?? []) .map((p: any) => { if (p?.product_variant_id != variantId) return p; const nextQty = Number(p?.qty ?? 0) - units; return nextQty <= 0 ? null : { ...p, qty: nextQty }; }) .filter(Boolean); dispatch(setCartProducts({ data: nextRedux })); // 3) Fire the remove in the background; reconcile totals quietly on success, // or refetch to restore true state on failure. try { const response = await api.removeFromCart({ product_id: product?.id, product_variant_id: variantId, qty: units, }); if (ctx?.isStale?.()) return; const alreadyGone = response?.status != 1 && /not found|no item/i.test(response?.message || ""); if (response?.status == 1 || alreadyGone) { handleFetchCheckout(); fetchRecommendations(); await reapplyCoupon(response?.sub_total); } else { toast.error(response.message); // Server rejected the removal — resync so the UI matches the server. handleFetchCheckout(); } } catch (error) { console.log("error", error); // Network failure — restore the true server cart. handleFetchCheckout(); } }; const reapplyCoupon = async (total?: number) => { const latitude = checkout?.address?.latitude; const longitude = checkout?.address?.longitude; if (!cart?.promo_code?.promo_code || !latitude || !longitude) return; try { const response = await api.setPromoCode({ promoCodeName: cart?.promo_code?.promo_code, amount: total, latitude, longitude, }); if (response.status == 1) { dispatch(setCartPromo({ data: response.data })); } else { dispatch(clearCartPromo()); } } catch (error) { console.log("Error", error); } }; // ---- discount code ---- const handleApplyDiscount = async () => { const latitude = checkout?.address?.latitude; const longitude = checkout?.address?.longitude; if (!discountInput?.trim() || !latitude || !longitude) return; try { const response = await api.setPromoCode({ promoCodeName: discountInput.trim(), amount: cart?.cartSubTotal, latitude, longitude, }); if (response.status == 1) { dispatch(setCartPromo({ data: response.data })); toast.success(response.message); setDiscountInput(""); } else { toast.error(response.message); } } catch (error) { console.log("Error", error); } }; const handleRemoveDiscount = () => { dispatch(clearCartPromo()); }; // ---- address ---- const handleSelectAddress = (addr: any) => { console.log("[checkout] address selected", { id: addr?.id, type: addr?.type, latitude: addr?.latitude, longitude: addr?.longitude, }); // Clear any prior delivery error immediately; the refetch (triggered by the // address.id dep) will re-validate. Cart items are NOT touched here. setDeliveryError(""); dispatch(setAddress({ data: addr })); }; // Open the address modal in EDIT mode: stash the row in redux so the modal // prefills + calls updateAddress (matches AddressCard's edit flow). const handleEditAddress = (addr: any) => { dispatch(setSelectedAddresForEdit({ data: addr })); setIsAddressSelected(true); setShowAddAddres(true); }; // Open the styled confirm modal (was native window.confirm). const handleDeleteAddress = (addr: any) => setAddressToDelete(addr); const confirmDeleteAddress = async () => { const addr = addressToDelete; if (!addr) return; setDeletingAddress(true); try { const response = await api.deleteAddress({ id: addr?.id }); if (response?.status == 1) { toast.success(response?.message || t("deleted")); // If the deleted address was selected, clear it so checkout falls back to city. if (checkout?.address?.id === addr?.id) dispatch(setAddress({ data: null })); fetchAddress(); setAddressToDelete(null); } else { toast.error(response?.message); } } catch (error) { console.log("Error", error); } finally { setDeletingAddress(false); } }; const formatAddress = (a: any) => [a?.address, a?.area, a?.city, a?.state, a?.pincode, a?.country] .filter(Boolean) .join(", "); // ---- wallet ---- const handleWalletToggle = () => { const nextChecked = !checkout?.isWalletChecked; if (nextChecked) { const balance = Number(user?.balance || 0); const total = Number(checkoutData?.total_amount || 0); const used = Math.min(balance, total); dispatch(setUserWalletBalance({ data: used })); // Only when the wallet covers the FULL order is "wallet" a complete // payment method (status 2, no gateway). On PARTIAL cover the wallet is // just a deduction — the remaining balance still needs a real method, so // don't set "wallet" as the selected method (leave the user to pick one). if (balance >= total && total > 0) { dispatch(setPaymentMethod({ data: "wallet" })); } else if (checkout?.selectedPaymentMethod === "wallet") { // was full-cover, now partial (e.g. total grew) — clear stale "wallet". dispatch(setPaymentMethod({ data: null })); } } else { dispatch(setUserWalletBalance({ data: 0 })); if (checkout?.selectedPaymentMethod === "wallet") { dispatch(setPaymentMethod({ data: null })); } } dispatch(setWalletChecked({ data: nextChecked })); }; // ---- payment gateways (parity with Checkout.jsx) ---- const initializeRazorpay = (): Promise => new Promise((resolve) => { const script = document.createElement("script"); script.src = "https://checkout.razorpay.com/v1/checkout.js"; script.onload = () => resolve(true); script.onerror = () => resolve(false); document.body.appendChild(script); }); const handleRazorpayCancel = async (order_id: number | string) => { await api.deleteOrder({ orderId: order_id }); }; const handleRozarpayPayment = async ( order_id: number | string, razorpay_transaction_id: string, amount: number, capitalizedMethod: string, ) => { try { const res = await initializeRazorpay(); if (!res) { console.error("RazorPay SDK Load Failed"); return; } // Razorpay SDK's request/response shapes are third-party payment SDK // internals with no bundled types — `any` is the pragmatic choice here, // matching useOrderPlacement.tsx's identical Razorpay integration. const options: any = { key: setting?.payment_setting?.razorpay_key, amount: Math.floor(amount * 100), currency: currencyCode ?? "", name: user?.name, description: setting?.setting?.app_name, image: setting?.setting?.web_settings?.web_logo, order_id: razorpay_transaction_id, handler: async (res: any) => { if (res.razorpay_payment_id) { try { setPaymentLoading(true); const response = await api.addTransaction({ orderId: order_id, transactionId: res.razorpay_payment_id, paymentMethod: capitalizedMethod, type: "order", }); if (response.status === 1) { setPaymentLoading(false); return router.push( zoneHref( `/web-payment-status?status=success&type=order&payment_method=${checkout?.selectedPaymentMethod}&order_id=${order_id}${statusOrderSuffix()}`, ), ); } setPaymentLoading(false); toast.error(response.message); } catch (error) { console.error("Transaction error:", error); } } }, modal: { confirm_close: true, ondismiss: async () => { // Always clean up the order on dismiss (deleteOrder is idempotent); // the old `reason === undefined` gate left orphaned orders when // Razorpay passed a defined dismiss reason. await handleRazorpayCancel(order_id); }, }, prefill: { name: user?.name, email: user?.email, contact: user?.mobile, }, theme: { color: setting?.setting?.web_settings?.color }, }; // window.Razorpay is injected by the SDK script loaded above; no bundled // types exist for it, so it's accessed via `any` — matches the identical // cast in useOrderPlacement.tsx's handleRazorpayPayment. const rzpay = new (window as any).Razorpay(options); rzpay.on("payment.cancel", () => handleRazorpayCancel(order_id)); rzpay.on("payment.failed", () => api.deleteOrder({ orderId: order_id })); rzpay.open(); } catch (error) { console.error("Error initializing Razorpay:", error); } }; const handlePayStackPayment = async ( orderId: number | string, amount: number | string, capitalizedMethod: string, ) => { try { const handler = PaystackPop.setup({ key: setting?.payment_setting?.paystack_public_key, email: user?.email, amount: Number.parseFloat(String(amount)) * 100, currency: setting?.payment_setting?.paystack_currency_code, ref: new Date().getTime().toString(), label: setting?.setting?.support_email, onClose: () => api.deleteOrder({ orderId }), callback: async (res: any) => { try { setPaymentLoading(true); const response = await api.addTransaction({ orderId, transactionId: res.reference, paymentMethod: capitalizedMethod, type: "order", }); if (response.status == 1) { setPaymentLoading(false); return router.push( zoneHref( `/web-payment-status?status=success&type=order&payment_method=${checkout?.selectedPaymentMethod}&order_id=${orderId}${statusOrderSuffix()}`, ), ); } setPaymentLoading(false); toast.error(response.message); } catch (error) { console.log("Error", error); } }, }); handler.openIframe(); } catch (error) { console.log("Paystack Error", error); } }; const handleInitiateTransaction = async ( currentOrderID: number | string, capitalizedMethod: string, ) => { try { const method = checkout?.selectedPaymentMethod; if (method == "COD" || method == "wallet") { return router.push( zoneHref( `/web-payment-status?status=success&type=order&payment_method=${method}&order_id=${currentOrderID}${statusOrderSuffix()}`, ), ); } if (method == "paystack") { // charge the wallet-reduced amount, not the full total return handlePayStackPayment( currentOrderID, payable, capitalizedMethod, ); } const response = await api.initiateTrasaction({ orderId: currentOrderID, paymentMethod: capitalizedMethod, type: "order", }); if (response.status == 1) { if (method == "phonepe") dispatch(setPhonePeCheckoutDetails(response?.data)); if (method == "razorpay") { handleRozarpayPayment( currentOrderID, response?.data?.transaction_id, payable, capitalizedMethod, ); } else if (method == "stripe") { setStripeOrderId(currentOrderID); setStripeClientSecret(response?.data?.client_secret); setStripeTransactionId(response?.data?.id); setShowStripe(true); } else { dispatch(clearCartPromo()); const paymentUrls: Record = { cashfree: response?.data?.redirectUrl, phonepe: response?.data?.redirectUrl, paytabs: response?.data?.redirectUrl, paypal: response?.data?.paypal_redirect_url, midtrans: response?.data?.snapUrl, }; const redirectUrl = paymentUrls[method]; if (redirectUrl) router.push(redirectUrl); else console.error("Unsupported payment method:", method); } } else { // Delete the order we just created (currentOrderID), not the stale // component-state orderId which is empty on the first attempt. await api.deleteOrder({ orderId: currentOrderID }); toast.error(response?.message); } } catch (error) { console.log("Error", error); } }; // place_order doesn't return the created order_id, so after a successful place // we read it back from the user's most-recent order. Returns the order id (its // `id`, matching the field the status/detail pages use) or null. const fetchLatestOrderId = async () => { try { const res = await api.getOrders({ limit: 1, offset: 0, type: "", orderType: "", }); const row = Array.isArray(res?.data) ? res.data[0] : res?.data; return row?.id ?? row?.order_id ?? null; } catch (error) { console.log("[placeOrder] fetchLatestOrderId failed", error); return null; } }; const handlePlaceOrder = async () => { if (storeClosed) { notifyClosed(); return; } const method = checkout?.selectedPaymentMethod; const capitalizedMethod = String(method).charAt(0).toUpperCase() + String(method).slice(1); const status = method === "COD" || method === "wallet" ? 2 : 1; try { // Hard block: can't place an order to an undeliverable address. if (deliveryError) { toast.error(deliveryError); return; } if (method == null) { toast.error(t("please_select_payment_method")); return; } // Guard: "wallet" as the sole method is only valid when the wallet covers // the FULL order. On partial cover the remaining amount needs another // method — never let a wallet-only order through (would skip real payment). if ( method === "wallet" && Number(user?.balance || 0) < Number(checkoutData?.total_amount || 0) ) { toast.error(t("please_select_payment_method")); return; } if (checkout?.address == null && checkout?.orderType == "doorstep") { toast.error(t("please_select_address")); return; } // Block: required prescriptions (medical, is_prescription_required=1) missing. if (hasMissingRequiredPrescriptions(products, prescriptions)) { toast.error( t("please_upload_required_prescription") || "Please upload a prescription for all required medical items", ); return; } // Block: billing details incomplete when "same as shipping" is off. if (!billingDetails.isValid) { toast.error( t("please_fill_billing_details") || "Please fill in billing details", ); return; } setCheckoutLoading(true); const response = await api.placeOrder({ productVariantId: cart?.checkout?.product_variant_id, quantity: cart?.checkout?.quantity, total: cart?.checkout?.sub_total, deliveryCharge: cart?.checkout?.delivery_charge, finalTotal: checkout?.checkoutTotal, walletUsed: checkout?.isWalletChecked, walletBalance: checkout?.usedWalletBalance, addressId: checkout?.address?.id, orderNote: checkout?.orderNote, paymentMethod: method, promocodeId: cart?.promo_code?.promo_code_id, status, order_type: checkout?.orderType, prescriptions, billingSameAsShipping: billingDetails.billing.sameAsShipping, billingName: billingDetails.billing.name, billingMobile: billingDetails.billing.mobile, billingCountryCode: billingDetails.billing.countryCode, billingAddress: billingDetails.billing.address, billingCity: billingDetails.billing.city, billingState: billingDetails.billing.state, billingPincode: billingDetails.billing.pincode, billingCountry: billingDetails.billing.country, billingRegionId: billingDetails.regionIdToSend, }); if (response?.status == 1) { // place_order responds with only { status, message } — it does NOT return // the created order_id, so the success URL showed `#undefined`. Prefer any // id the API might send (order_id top-level or nested), else fall back to // fetching the user's newest order and using its `id`. let placedOrderId = response?.order_id ?? response?.data?.order_id; if (!placedOrderId) { placedOrderId = await fetchLatestOrderId(); } // Capture the ecom order_item_id — but ONLY when this order was actually // placed on the ecommerce channel. place_order returns order_item_id on // EVERY order now, Quick included (confirmed via a raw request: a // `channel: quick` call came back with data.order_item_id set), so the // field's mere presence is no longer a valid ecom signal on its own — // using it alone false-positived Quick/COD orders as ecom (View Orders // then routed to the ecom detail page, which showed "No Orders"). // activeChannel, captured at the moment this request was sent, is what // actually set the `channel` header the backend read for this order — // same principle useOrderPlacement.js's quick-checkout flow follows, // where the status URL never carries order_item_id/order_from at all. orderItemIdRef.current = activeChannel === "ecommerce" ? (response?.order_item_id ?? response?.data?.order_item_id ?? null) : null; // Order created — prescription files are uploaded; drop them so they don't // linger for the next order. dispatch(clearPrescriptions()); // Same call for both COD/wallet and gateway methods — awaiting it keeps // the button disabled until the gateway modal/redirect is handed off // (or the COD/wallet redirect completes), preventing a double placeOrder // on double-click. await handleInitiateTransaction(placedOrderId, capitalizedMethod); setCheckoutLoading(false); } else { setCheckoutLoading(false); toast.error(response?.message); } } catch (error: any) { setCheckoutLoading(false); // The order may ALREADY be placed by the time we get here (place_order // succeeded, then the redirect threw). Swallowing this silently left the // user parked on /checkout with no feedback while the order existed — // surface it instead of only logging. console.error( "[placeOrder] failed AFTER order may have been created:", error, ); toast.error(error?.message || t("something_went_wrong")); } }; // ---- derived values ---- // Cart items decoupled from delivery validation: prefer the current response, // else the last good checkout cart, else the redux cart bucket. This keeps // products visible when the selected address is out of the delivery zone // (status:0), and prevents the empty-flash while switching addresses. // Intentional: lastCartRef must be current DURING this render (handleFetchCheckout // writes it synchronously before the state update that would otherwise trigger // a re-render), so the fallback below can't wait for an effect. `products` (and // everything derived from it below, through the JSX return) carries this same // ref read, hence the disable spans the rest of the render body. /* eslint-disable react-hooks/refs */ const products = checkoutData?.cart || lastCartRef.current?.cart || cart?.checkout?.cart || []; console.log("[checkout] render", { items: products.length, deliveryError: deliveryError || null, checkOutError, loading, }); // Hide cross-sell suggestions already in the cart (match on product id). // Upsell shows exactly what the API returns — no client-side filtering. const cartProductIds = new Set(products.map((p) => p?.id)); const crossSellItems = crossSell.filter((p) => !cartProductIds.has(p?.id)); const upSellItems = upSell; // Enabled selectable payment methods (COD + active online gateways) as a single // list — drives both the collapsed "selected + Change" row and the picker drawer. // `value` is what's dispatched/compared against checkout.selectedPaymentMethod. const paymentOptions = [ ...(checkoutData?.cod_allowed == "1" ? [{ value: "COD", label: t("cash_on_delivery") }] : []), ...paymentMethodKeys .filter((m) => setting?.payment_setting?.[m.key] === "1") .map((m) => ({ value: m.label, label: t(m.label) })), ]; const selectedPayment = paymentOptions.find( (o) => o.value === checkout?.selectedPaymentMethod, ); const itemCount = products.reduce( (sum, p) => sum + Number(p?.variants?.[0]?.quantity ?? p?.qty ?? 0), 0, ); // Delivery charge + its tax — backend has been seen sending this as a plain // `delivery_charge` scalar, a `delivery_charge` object with // total_delivery_charge/tax_amount/tax_name, OR a separate `delivery_charges` // (plural) object with amount/tax_amount/tax_name. All three are checked so // neither the amount nor its tax silently goes missing depending on which // shape a given response uses. const deliveryChargeObj = (typeof checkoutData?.delivery_charge === "object" ? checkoutData?.delivery_charge : null) || checkoutData?.delivery_charges; const shipping = deliveryChargeObj?.total_delivery_charge ?? deliveryChargeObj?.amount ?? (typeof checkoutData?.delivery_charge === "object" ? undefined : checkoutData?.delivery_charge); const deliveryChargeTax = deliveryChargeObj; // Per-tax breakdown (IGST/CGST/SGST) shown as a Subtotal tooltip rather than // its own bill rows — zero-amount entries dropped so a tax bucket the // backend still lists at ₹0 doesn't appear in the tooltip. Gated on the // array itself having real rows rather than a separate // tax_breakdown_available flag — that flag isn't reliably set even when // tax_breakdown carries real data. const taxBreakdownRows = !checkOutError ? (checkoutData?.tax_breakdown || []).filter( (tx: any) => Number(tx?.amount) > 0, ) : []; const walletUsed = checkout?.isWalletChecked ? Number(checkout?.usedWalletBalance || 0) : 0; // Wallet fully covers the order → the whole total is paid from the wallet, so // no other payment method is needed. When the toggle is ON in this case, hide // COD + online gateways (nothing left to pay via them). const walletCoversFull = checkout?.isWalletChecked && Number(user?.balance || 0) >= Number(checkoutData?.total_amount || 0) && Number(checkoutData?.total_amount || 0) > 0; const payable = checkOutError ? cart?.cartSubTotal : Math.max(Number(checkoutData?.total_amount || 0) - walletUsed, 0); // "wallet" apply-type coupons are cashback, not a price discount: credited after // the order, so they don't reduce the payable total and aren't counted as a // saving here. "instant" coupons (flat or percentage) reduce up-front. const isCashbackCoupon = (checkoutData?.promocode_details?.discount_apply_type ?? cart?.promo_code?.discount_apply_type) === "wallet"; const promoDiscount = Number(checkoutData?.promocode_details?.discount || 0); // Savings shown in the bill hero — read straight from the API's // `saved_amount`, which already accounts for the applied promo code. Adding // promoDiscount on top of it double-counted the coupon. const totalSaved = checkOutError ? 0 : Number(checkoutData?.saved_amount || 0); const money = (val: number | string = 0) => formatCurrency(val, currency, decimals); // Shared notch-mask gradient for the applied-coupon ticket (used identically // by both WebkitMaskImage and maskImage below) — mirrors horizontally for RTL. const notchMaskImage = rtl ? "radial-gradient(circle 7px at 32% 0, transparent 7px, #000 7.5px), radial-gradient(circle 7px at 32% 100%, transparent 7px, #000 7.5px)" : "radial-gradient(circle 7px at 68% 0, transparent 7px, #000 7.5px), radial-gradient(circle 7px at 68% 100%, transparent 7px, #000 7.5px)"; if (loading) return ; if (paymentLoading) return ; return (
{/* Coupon-applied confetti burst — full-screen, non-blocking, plays once. */} {showCouponBurst && (
)}
{/* page heading */}

{t("checkout")}

{/* ---------- LEFT ---------- */}
{/* Delivery Address */}
} title={t("delivery_address")} />
{address?.allAddresses?.length > 0 && ( )}
{address?.allAddresses?.length > 0 ? (
{address.allAddresses.map((addr) => ( handleSelectAddress(addr)} onEdit={() => handleEditAddress(addr)} onDelete={() => handleDeleteAddress(addr)} formatAddress={formatAddress} /> ))}
) : ( )} {/* Delivery validation banner — shown when the selected address is outside the delivery zone (status:0). Cart stays intact. */} {deliveryError && (

{deliveryError}

)}
{/* Billing Details — collapsed by default ("same as shipping"); the same country/region billingDetails.setField("name", e.target.value)} required />
{/* PhoneNumberInput bakes in its own mt-1.5 (expects to sit directly under a label with no gap); this wrapper's own gap-1.5 would double that spacing, so cancel it here. */}
billingDetails.setField("city", e.target.value)} required />
billingDetails.setField("address", e.target.value)} required />
billingDetails.setField("pincode", e.target.value)} />
{/* Countries with no region list on file (e.g. Italy) get a free-text field instead of a stuck-empty dropdown — regionId doubles as the typed name. */} {billingDetails.regionsEmpty ? ( billingDetails.handleRegionChange(e.target.value) } /> ) : ( )}
)}
{/* Your Cart */}
} title={t("your_cart")} count={`${itemCount} ${t("items")}`} />
{products.map((product) => ( ))} {products.length === 0 && (

{t("no_data_found")}

)} {/* Delivery instruction — collapsed "+ Add" trigger below the last item; click to reveal the textarea. Quick channel only (all-shop ships, no delivery-partner note). Auto-open when a note already exists so it stays editable. */} {shopMode === "quick" && products.length > 0 && (
{!showNotesInput && !checkout?.orderNote ? ( ) : (
{t("order_notes")}

{t("order_notes_hint")}