npm - @burdenoff/microfe-billing - Versions diffs - 2026.912.1 → 2026.912.3 - Mend

@burdenoff/microfe-billing 2026.912.1 → 2026.912.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/dist/billing/modules/checkout/components/UnifiedPaymentMethodSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UnifiedPaymentMethodSelector.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/UnifiedPaymentMethodSelector.tsx"],"sourcesContent":["/*\n Unified Payment Method Selector\n * Combines payment providers and saved payment methods into one clear interface\n /\n\nimport { type FC, useState } from 'react';\nimport { Coins, CreditCard, Wallet, ChevronDown } from 'lucide-react';\nimport type { SavedPaymentMethod } from '../types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface UnifiedPaymentMethodSelectorProps {\n // Saved cards\n savedPaymentMethods: SavedPaymentMethod[];\n selectedPaymentMethodId: string \| null;\n onSelectSavedCard: (id: string \| null) => void;\n\n // Provider selection (for new cards)\n selectedProvider: 'CREDITS' \| 'STRIPE' \| 'RAZORPAY' \| 'AUTO';\n onSelectProvider: (provider: 'CREDITS' \| 'STRIPE' \| 'RAZORPAY') => void;\n\n // Provider availability\n stripeEnabled: boolean;\n razorpayEnabled: boolean;\n canPayWithCredits: boolean;\n availableCredits: number;\n totalAmount: number;\n billingCountry?: string;\n\n // Save card option\n saveCard: boolean;\n onSaveCardChange: (save: boolean) => void;\n\n // Auto-renewal (when enabled, card must be saved - checkbox hidden)\n autoRenewEnabled?: boolean;\n\n isLoading?: boolean;\n}\n\nconst getCardIcon = (type: string) => {\n if (type === 'WALLET') return <Wallet className=\"size-4\" />;\n return <CreditCard className=\"size-4\" />;\n};\n\nconst getCardDisplay = (pm: SavedPaymentMethod): string => {\n const type =\n pm.type === 'CREDIT_CARD' ? 'Credit Card' : pm.type === 'DEBIT_CARD' ? 'Debit Card' : pm.type;\n const last4 = pm.last4 ? ` •••• ${pm.last4}` : '';\n const brand = pm.brand ? ` (${pm.brand})` : '';\n return `${type}${last4}${brand}`;\n};\n\nexport const UnifiedPaymentMethodSelector: FC<UnifiedPaymentMethodSelectorProps> = ({\n savedPaymentMethods,\n selectedPaymentMethodId,\n onSelectSavedCard,\n selectedProvider,\n onSelectProvider,\n stripeEnabled,\n razorpayEnabled,\n canPayWithCredits,\n availableCredits,\n totalAmount,\n billingCountry,\n saveCard,\n onSaveCardChange,\n autoRenewEnabled = false,\n isLoading = false,\n}) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const [showAllSavedCards, setShowAllSavedCards] = useState(false);\n const hasEnoughCredits = availableCredits >= totalAmount;\n const isIndia = billingCountry === 'IN';\n\n // Get default card or first card for collapsible view\n const defaultSavedCard = savedPaymentMethods.find((pm) => pm.isDefault) \|\| savedPaymentMethods[0];\n const otherSavedCards = savedPaymentMethods.filter((pm) => pm.id !== defaultSavedCard?.id);\n\n const handleSelect = (type: 'saved' \| 'new', value: string) => {\n if (type === 'saved') {\n // When selecting saved card, set it and auto-determine provider\n const selectedCard = savedPaymentMethods.find((pm) => pm.id === value);\n if (selectedCard) {\n onSelectSavedCard(value);\n // Auto-set provider based on card type\n if (selectedCard.razorpayPaymentMethodId) {\n onSelectProvider('RAZORPAY');\n } else if (selectedCard.stripePaymentMethodId) {\n onSelectProvider('STRIPE');\n }\n }\n } else {\n // When selecting new card payment, clear saved card selection\n onSelectSavedCard(null);\n onSelectProvider(value as 'CREDITS' \| 'STRIPE' \| 'RAZORPAY');\n }\n };\n\n const isSelected = (type: 'saved' \| 'new', value: string): boolean => {\n if (type === 'saved') {\n return selectedPaymentMethodId === value;\n } else {\n return !selectedPaymentMethodId && selectedProvider === value;\n }\n };\n\n return (\n <div className=\"space-y-3\">\n <h3 className=\"text-sm font-medium text-text-primary\">\n {tr('billing.checkout.paymentMethod', 'Payment Method')}\n </h3>\n\n {isLoading ? (\n <div className=\"space-y-2\">\n <div className=\"h-16 rounded-lg border border-border-subtle bg-bg-sunken animate-pulse\" />\n <div className=\"h-16 rounded-lg border border-border-subtle bg-bg-sunken animate-pulse\" />\n </div>\n ) : (\n <div className=\"space-y-2\">\n {/ Credits Option /}\n {canPayWithCredits && (\n <button\n type=\"button\"\n onClick={() => handleSelect('new', 'CREDITS')}\n disabled={!hasEnoughCredits}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('new', 'CREDITS')\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n ${!hasEnoughCredits && 'opacity-50 cursor-not-allowed'}\n `}\n >\n <Coins\n className={`size-5 shrink-0 ${isSelected('new', 'CREDITS') ? 'text-text-link' : 'text-text-secondary'}`}\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">Pay with Credits</div>\n <div className=\"text-xs text-text-secondary\">\n {hasEnoughCredits\n ? `Available: ${availableCredits.toLocaleString()} credits`\n : `Insufficient credits (need ${totalAmount.toLocaleString()})`}\n </div>\n </div>\n {hasEnoughCredits && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-success/10 text-success\">\n Instant\n </span>\n )}\n </button>\n )}\n\n {/ Saved Cards Section /}\n {savedPaymentMethods.length > 0 && (\n <>\n <div className=\"text-xs font-medium text-text-secondary uppercase tracking-wide pt-2\">\n Saved Cards\n </div>\n\n {/ Default/First Card - Always Shown /}\n {defaultSavedCard && (\n <button\n type=\"button\"\n onClick={() => handleSelect('saved', defaultSavedCard.id)}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('saved', defaultSavedCard.id)\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n {getCardIcon(defaultSavedCard.type)}\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">\n {getCardDisplay(defaultSavedCard)}\n </div>\n {defaultSavedCard.expiryMonth && defaultSavedCard.expiryYear && (\n <div className=\"text-xs text-text-secondary\">\n Expires {defaultSavedCard.expiryMonth.toString().padStart(2, '0')}/\n {defaultSavedCard.expiryYear}\n </div>\n )}\n </div>\n {defaultSavedCard.isDefault && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-[var(--color-accent-soft)] text-text-link\">\n Default\n </span>\n )}\n </button>\n )}\n\n {/ Other Cards - Collapsible /}\n {otherSavedCards.length > 0 && (\n <>\n {showAllSavedCards ? (\n <>\n {otherSavedCards.map((pm) => (\n <button\n key={pm.id}\n type=\"button\"\n onClick={() => handleSelect('saved', pm.id)}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('saved', pm.id)\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n {getCardIcon(pm.type)}\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">\n {getCardDisplay(pm)}\n </div>\n {pm.expiryMonth && pm.expiryYear && (\n <div className=\"text-xs text-text-secondary\">\n Expires {pm.expiryMonth.toString().padStart(2, '0')}/{pm.expiryYear}\n </div>\n )}\n </div>\n </button>\n ))}\n <button\n type=\"button\"\n onClick={() => setShowAllSavedCards(false)}\n className=\"text-xs text-text-link hover:underline flex items-center gap-1 pl-1\"\n >\n <ChevronDown className=\"size-3 rotate-180\" />\n Hide other cards\n </button>\n </>\n ) : (\n <button\n type=\"button\"\n onClick={() => setShowAllSavedCards(true)}\n className=\"text-xs text-text-link hover:underline flex items-center gap-1 pl-1\"\n >\n <ChevronDown className=\"size-3\" />\n Show {otherSavedCards.length} more card\n {otherSavedCards.length > 1 ? 's' : ''}\n </button>\n )}\n </>\n )}\n </>\n )}\n\n {/ New Card Options /}\n <div className=\"text-xs font-medium text-text-secondary uppercase tracking-wide pt-2\">\n {savedPaymentMethods.length > 0\n ? 'Or use new card'\n : canPayWithCredits\n ? 'Or pay with card'\n : 'Pay with Card'}\n </div>\n\n {/ Razorpay (India) /}\n {razorpayEnabled && isIndia && (\n <button\n type=\"button\"\n onClick={() => handleSelect('new', 'RAZORPAY')}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('new', 'RAZORPAY')\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n <CreditCard\n className={`size-5 shrink-0 ${isSelected('new', 'RAZORPAY') ? 'text-text-link' : 'text-text-secondary'}`}\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">\n UPI / Cards / Netbanking\n </div>\n <div className=\"text-xs text-text-secondary\">Razorpay</div>\n </div>\n <span className=\"text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue\">\n Recommended\n </span>\n </button>\n )}\n\n {/ Stripe (International) /}\n {stripeEnabled && (\n <button\n type=\"button\"\n onClick={() => handleSelect('new', 'STRIPE')}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('new', 'STRIPE')\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n <CreditCard\n className={`size-5 shrink-0 ${isSelected('new', 'STRIPE') ? 'text-text-link' : 'text-text-secondary'}`}\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">Credit / Debit Cards</div>\n <div className=\"text-xs text-text-secondary\">Stripe - Multi-currency</div>\n </div>\n {!isIndia && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue\">\n Recommended\n </span>\n )}\n </button>\n )}\n\n {/ Save Card Checkbox - Only show when using new card (not saved card, not credits) /}\n {!selectedPaymentMethodId &&\n selectedProvider !== 'CREDITS' &&\n selectedProvider !== 'AUTO' &&\n !autoRenewEnabled && (\n <div className=\"mt-4 pt-4 border-t border-border-subtle\">\n <label className=\"flex items-start gap-3 cursor-pointer group\">\n <input\n type=\"checkbox\"\n checked={saveCard}\n onChange={(e) => onSaveCardChange(e.target.checked)}\n className=\"mt-0.5 size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)] focus:ring-offset-0\"\n />\n <div className=\"flex-1\">\n <div className=\"text-sm font-medium text-text-primary group-hover:text-text-link transition-colors\">\n Save card for future use\n </div>\n <div className=\"text-xs text-text-secondary mt-0.5\">\n Securely save this payment method for faster checkout next time\n </div>\n </div>\n </label>\n </div>\n )}\n\n {/ Auto-renewal notice - Show when auto-renewal is enabled */}\n {!selectedPaymentMethodId &&\n selectedProvider !== 'CREDITS' &&\n selectedProvider !== 'AUTO' &&\n autoRenewEnabled && (\n <div className=\"mt-4 pt-4 border-t border-border-subtle\">\n <div className=\"flex items-start gap-2 text-xs text-text-secondary bg-bg-sunken p-3 rounded-lg\">\n <svg\n className=\"size-4 mt-0.5 flex-shrink-0\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <div>Your payment method will be securely saved for auto-renewal</div>\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"UnifiedPaymentMethodSelector.js","names":[],"sources":["../../../../../src/billing/modules/checkout/components/UnifiedPaymentMethodSelector.tsx"],"sourcesContent":["/*\n Unified Payment Method Selector\n * Combines payment providers and saved payment methods into one clear interface\n /\n\nimport { type FC, useState } from 'react';\nimport { Coins, CreditCard, Wallet, ChevronDown } from 'lucide-react';\nimport type { SavedPaymentMethod } from '../types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\ninterface UnifiedPaymentMethodSelectorProps {\n // Saved cards\n savedPaymentMethods: SavedPaymentMethod[];\n selectedPaymentMethodId: string \| null;\n onSelectSavedCard: (id: string \| null) => void;\n\n // Provider selection (for new cards)\n selectedProvider: 'CREDITS' \| 'STRIPE' \| 'RAZORPAY' \| 'AUTO';\n onSelectProvider: (provider: 'CREDITS' \| 'STRIPE' \| 'RAZORPAY') => void;\n\n // Provider availability\n stripeEnabled: boolean;\n razorpayEnabled: boolean;\n canPayWithCredits: boolean;\n availableCredits: number;\n /* Credits (not a currency amount) needed to pay for this purchase —\n * comparable directly to availableCredits. Passing a raw USD/local-\n * currency total here compares two different units and silently lets\n * a purchase proceed with insufficient credits (reproduced live,\n * BOFF-7192: 800 available credits read as \"enough\" for a 2,474-credit\n * item because the prop held $24.74, not 2,474). /\n creditsRequired: number;\n billingCountry?: string;\n\n // Save card option\n saveCard: boolean;\n onSaveCardChange: (save: boolean) => void;\n\n // Auto-renewal (when enabled, card must be saved - checkbox hidden)\n autoRenewEnabled?: boolean;\n\n isLoading?: boolean;\n}\n\nconst getCardIcon = (type: string) => {\n if (type === 'WALLET') return <Wallet className=\"size-4\" />;\n return <CreditCard className=\"size-4\" />;\n};\n\nconst getCardDisplay = (pm: SavedPaymentMethod): string => {\n const type =\n pm.type === 'CREDIT_CARD' ? 'Credit Card' : pm.type === 'DEBIT_CARD' ? 'Debit Card' : pm.type;\n const last4 = pm.last4 ? ` •••• ${pm.last4}` : '';\n const brand = pm.brand ? ` (${pm.brand})` : '';\n return `${type}${last4}${brand}`;\n};\n\nexport const UnifiedPaymentMethodSelector: FC<UnifiedPaymentMethodSelectorProps> = ({\n savedPaymentMethods,\n selectedPaymentMethodId,\n onSelectSavedCard,\n selectedProvider,\n onSelectProvider,\n stripeEnabled,\n razorpayEnabled,\n canPayWithCredits,\n availableCredits,\n creditsRequired,\n billingCountry,\n saveCard,\n onSaveCardChange,\n autoRenewEnabled = false,\n isLoading = false,\n}) => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const [showAllSavedCards, setShowAllSavedCards] = useState(false);\n const hasEnoughCredits = availableCredits >= creditsRequired;\n const isIndia = billingCountry === 'IN';\n\n // Get default card or first card for collapsible view\n const defaultSavedCard = savedPaymentMethods.find((pm) => pm.isDefault) \|\| savedPaymentMethods[0];\n const otherSavedCards = savedPaymentMethods.filter((pm) => pm.id !== defaultSavedCard?.id);\n\n const handleSelect = (type: 'saved' \| 'new', value: string) => {\n if (type === 'saved') {\n // When selecting saved card, set it and auto-determine provider\n const selectedCard = savedPaymentMethods.find((pm) => pm.id === value);\n if (selectedCard) {\n onSelectSavedCard(value);\n // Auto-set provider based on card type\n if (selectedCard.razorpayPaymentMethodId) {\n onSelectProvider('RAZORPAY');\n } else if (selectedCard.stripePaymentMethodId) {\n onSelectProvider('STRIPE');\n }\n }\n } else {\n // When selecting new card payment, clear saved card selection\n onSelectSavedCard(null);\n onSelectProvider(value as 'CREDITS' \| 'STRIPE' \| 'RAZORPAY');\n }\n };\n\n const isSelected = (type: 'saved' \| 'new', value: string): boolean => {\n if (type === 'saved') {\n return selectedPaymentMethodId === value;\n } else {\n return !selectedPaymentMethodId && selectedProvider === value;\n }\n };\n\n return (\n <div className=\"space-y-3\">\n <h3 className=\"text-sm font-medium text-text-primary\">\n {tr('billing.checkout.paymentMethod', 'Payment Method')}\n </h3>\n\n {isLoading ? (\n <div className=\"space-y-2\">\n <div className=\"h-16 rounded-lg border border-border-subtle bg-bg-sunken animate-pulse\" />\n <div className=\"h-16 rounded-lg border border-border-subtle bg-bg-sunken animate-pulse\" />\n </div>\n ) : (\n <div className=\"space-y-2\">\n {/ Credits Option /}\n {canPayWithCredits && (\n <button\n type=\"button\"\n onClick={() => handleSelect('new', 'CREDITS')}\n disabled={!hasEnoughCredits}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('new', 'CREDITS')\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n ${!hasEnoughCredits && 'opacity-50 cursor-not-allowed'}\n `}\n >\n <Coins\n className={`size-5 shrink-0 ${isSelected('new', 'CREDITS') ? 'text-text-link' : 'text-text-secondary'}`}\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">Pay with Credits</div>\n <div className=\"text-xs text-text-secondary\">\n {hasEnoughCredits\n ? `Available: ${availableCredits.toLocaleString()} credits`\n : `Insufficient credits (need ${creditsRequired.toLocaleString()})`}\n </div>\n </div>\n {hasEnoughCredits && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-success/10 text-success\">\n Instant\n </span>\n )}\n </button>\n )}\n\n {/ Saved Cards Section /}\n {savedPaymentMethods.length > 0 && (\n <>\n <div className=\"text-xs font-medium text-text-secondary uppercase tracking-wide pt-2\">\n Saved Cards\n </div>\n\n {/ Default/First Card - Always Shown /}\n {defaultSavedCard && (\n <button\n type=\"button\"\n onClick={() => handleSelect('saved', defaultSavedCard.id)}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('saved', defaultSavedCard.id)\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n {getCardIcon(defaultSavedCard.type)}\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">\n {getCardDisplay(defaultSavedCard)}\n </div>\n {defaultSavedCard.expiryMonth && defaultSavedCard.expiryYear && (\n <div className=\"text-xs text-text-secondary\">\n Expires {defaultSavedCard.expiryMonth.toString().padStart(2, '0')}/\n {defaultSavedCard.expiryYear}\n </div>\n )}\n </div>\n {defaultSavedCard.isDefault && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-[var(--color-accent-soft)] text-text-link\">\n Default\n </span>\n )}\n </button>\n )}\n\n {/ Other Cards - Collapsible /}\n {otherSavedCards.length > 0 && (\n <>\n {showAllSavedCards ? (\n <>\n {otherSavedCards.map((pm) => (\n <button\n key={pm.id}\n type=\"button\"\n onClick={() => handleSelect('saved', pm.id)}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('saved', pm.id)\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n {getCardIcon(pm.type)}\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">\n {getCardDisplay(pm)}\n </div>\n {pm.expiryMonth && pm.expiryYear && (\n <div className=\"text-xs text-text-secondary\">\n Expires {pm.expiryMonth.toString().padStart(2, '0')}/{pm.expiryYear}\n </div>\n )}\n </div>\n </button>\n ))}\n <button\n type=\"button\"\n onClick={() => setShowAllSavedCards(false)}\n className=\"text-xs text-text-link hover:underline flex items-center gap-1 pl-1\"\n >\n <ChevronDown className=\"size-3 rotate-180\" />\n Hide other cards\n </button>\n </>\n ) : (\n <button\n type=\"button\"\n onClick={() => setShowAllSavedCards(true)}\n className=\"text-xs text-text-link hover:underline flex items-center gap-1 pl-1\"\n >\n <ChevronDown className=\"size-3\" />\n Show {otherSavedCards.length} more card\n {otherSavedCards.length > 1 ? 's' : ''}\n </button>\n )}\n </>\n )}\n </>\n )}\n\n {/ New Card Options /}\n <div className=\"text-xs font-medium text-text-secondary uppercase tracking-wide pt-2\">\n {savedPaymentMethods.length > 0\n ? 'Or use new card'\n : canPayWithCredits\n ? 'Or pay with card'\n : 'Pay with Card'}\n </div>\n\n {/ Razorpay (India) /}\n {razorpayEnabled && isIndia && (\n <button\n type=\"button\"\n onClick={() => handleSelect('new', 'RAZORPAY')}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('new', 'RAZORPAY')\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n <CreditCard\n className={`size-5 shrink-0 ${isSelected('new', 'RAZORPAY') ? 'text-text-link' : 'text-text-secondary'}`}\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">\n UPI / Cards / Netbanking\n </div>\n <div className=\"text-xs text-text-secondary\">Razorpay</div>\n </div>\n <span className=\"text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue\">\n Recommended\n </span>\n </button>\n )}\n\n {/ Stripe (International) /}\n {stripeEnabled && (\n <button\n type=\"button\"\n onClick={() => handleSelect('new', 'STRIPE')}\n className={`\n w-full flex items-center gap-3 p-4 rounded-lg border transition-all text-left\n ${\n isSelected('new', 'STRIPE')\n ? 'border-border-strong bg-[var(--color-accent-soft)] ring-1 ring-[var(--color-focus-ring)]'\n : 'border-border-subtle hover:border-border-strong hover:bg-bg-sunken'\n }\n `}\n >\n <CreditCard\n className={`size-5 shrink-0 ${isSelected('new', 'STRIPE') ? 'text-text-link' : 'text-text-secondary'}`}\n />\n <div className=\"flex-1 min-w-0\">\n <div className=\"text-sm font-medium text-text-primary\">Credit / Debit Cards</div>\n <div className=\"text-xs text-text-secondary\">Stripe - Multi-currency</div>\n </div>\n {!isIndia && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-accent-blue-subtle text-accent-blue\">\n Recommended\n </span>\n )}\n </button>\n )}\n\n {/ Save Card Checkbox - Only show when using new card (not saved card, not credits) /}\n {!selectedPaymentMethodId &&\n selectedProvider !== 'CREDITS' &&\n selectedProvider !== 'AUTO' &&\n !autoRenewEnabled && (\n <div className=\"mt-4 pt-4 border-t border-border-subtle\">\n <label className=\"flex items-start gap-3 cursor-pointer group\">\n <input\n type=\"checkbox\"\n checked={saveCard}\n onChange={(e) => onSaveCardChange(e.target.checked)}\n className=\"mt-0.5 size-4 rounded border-border-subtle text-text-link focus:ring-[var(--color-focus-ring)] focus:ring-offset-0\"\n />\n <div className=\"flex-1\">\n <div className=\"text-sm font-medium text-text-primary group-hover:text-text-link transition-colors\">\n Save card for future use\n </div>\n <div className=\"text-xs text-text-secondary mt-0.5\">\n Securely save this payment method for faster checkout next time\n </div>\n </div>\n </label>\n </div>\n )}\n\n {/ Auto-renewal notice - Show when auto-renewal is enabled */}\n {!selectedPaymentMethodId &&\n selectedProvider !== 'CREDITS' &&\n selectedProvider !== 'AUTO' &&\n autoRenewEnabled && (\n <div className=\"mt-4 pt-4 border-t border-border-subtle\">\n <div className=\"flex items-start gap-2 text-xs text-text-secondary bg-bg-sunken p-3 rounded-lg\">\n <svg\n className=\"size-4 mt-0.5 flex-shrink-0\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <div>Your payment method will be securely saved for auto-renewal</div>\n </div>\n </div>\n )}\n </div>\n )}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/checkout/pages/CheckoutPage.js CHANGED Viewed

@@ -200,19 +200,19 @@ var $e = () => {
 		kt,
 		Jt
 	]);
-	let { availableCredits: Xt, billingAccount: Zt, canPayWithCredits: Qt, selectedCurrency: J, selectedPaymentMethodId: $t, selectedProvider: en, setCurrency: Y, setPaymentProvider: X, setSelectedPaymentMethodId: tn, total: nn } = F;
+	let { billingAccount: Xt, canPayWithCredits: Zt, hasEnoughCredits: Qt, selectedCurrency: J, selectedPaymentMethodId: $t, selectedProvider: en, setCurrency: Y, setPaymentProvider: X, setSelectedPaymentMethodId: tn } = F;
 	l(() => {
-		if (!Zt?.currency || q === "IN") return;
-		let e = Zt.currency;
+		if (!Xt?.currency || q === "IN") return;
+		let e = Xt.currency;
 		e !== "INR" && J !== e && Y(e);
 	}, [
 		q,
-		Zt,
+		Xt,
 		J,
 		Y
 	]), l(() => {
 		if (!(en !== "AUTO" && en !== null)) {
-			if (Qt && Xt >= nn) {
+			if (Zt && Qt) {
 				X("CREDITS"), tn(null);
 				return;
 			}
@@ -225,9 +225,8 @@ var $e = () => {
 			}
 		}
 	}, [
-		Xt,
+		Zt,
 		Qt,
-		nn,
 		G,
 		$t,
 		en,
@@ -490,7 +489,7 @@ var $e = () => {
 		v?.billingAccountId,
 		b
 	]);
-	let rn = !!(v?.upgradeFromSubscriptionId || v?.downgradeFromSubscriptionId);
+	let nn = !!(v?.upgradeFromSubscriptionId || v?.downgradeFromSubscriptionId);
 	l(() => {
 		w && C && S.length === 0 && !Z && _("/addons", { replace: !0 });
 	}, [
@@ -500,11 +499,11 @@ var $e = () => {
 		Z,
 		_
 	]);
-	let an = fe({
+	let rn = fe({
 		billingAccountId: F.billingAccount?.id,
 		purchaseType: E,
 		productId: D
-	}), on = c(async () => {
+	}), an = c(async () => {
 		if (!F.billingAccount) return;
 		let e = ht.current;
 		if (ht.current = !1, !e && !Ee(F.billingAccount)) {
@@ -589,7 +588,7 @@ var $e = () => {
 		g,
 		Rt,
 		Bt
-	]), sn = c((e) => {
+	]), on = c((e) => {
 		y("billing.payment.succeeded", {
 			route: "/billing/checkout",
 			entityId: A?.paymentId ?? A?.orderId,
@@ -599,7 +598,7 @@ var $e = () => {
 		y,
 		A?.orderId,
 		A?.paymentId
-	]), cn = c((e) => {
+	]), sn = c((e) => {
 		y("billing.payment.failed", {
 			route: "/billing/checkout",
 			entityId: A?.paymentId ?? A?.orderId,
@@ -610,7 +609,7 @@ var $e = () => {
 		y,
 		A?.orderId,
 		A?.paymentId
-	]), ln = c((e) => {
+	]), cn = c((e) => {
 		F.updateItemQuantity("credits-purchase", e);
 	}, [F]);
 	if (!rt.canProcessPayment) return /* @__PURE__ */ p(t, { message: "You don't have permission to make purchases." });
@@ -618,12 +617,12 @@ var $e = () => {
 		purchaseType: E,
 		productId: D,
 		billingAccountId: F.billingAccount?.id,
-		nativeCheckout: an,
+		nativeCheckout: rn,
 		onBack: () => _("dashboard")
 	});
-	let un = Nt || Ft && E === "PLAN" || It && E === "ADDON" && !w || w && !C;
+	let ln = Nt || Ft && E === "PLAN" || It && E === "ADDON" && !w || w && !C;
 	if (w && C && S.length === 0 && !Z) return null;
-	let dn = () => {
+	let un = () => {
 		if (w) {
 			let e = F.items.length;
 			return `Purchase ${e} Add-on${e === 1 ? "" : "s"}`;
@@ -634,7 +633,7 @@ var $e = () => {
 			case "ADDON": return "Purchase Add-on";
 			default: return "Checkout";
 		}
-	}, fn = () => {
+	}, dn = () => {
 		switch (E) {
 			case "CREDITS": return /* @__PURE__ */ p(Le, { className: "size-6" });
 			case "PLAN": return /* @__PURE__ */ p(Be, { className: "size-6" });
@@ -642,7 +641,7 @@ var $e = () => {
 			default: return /* @__PURE__ */ p(Ue, { className: "size-6" });
 		}
 	};
-	if (un) return /* @__PURE__ */ p("div", {
+	if (ln) return /* @__PURE__ */ p("div", {
 		className: "flex items-center justify-center min-h-[400px]",
 		children: /* @__PURE__ */ m("div", {
 			className: "text-center space-y-4",
@@ -1034,8 +1033,8 @@ var $e = () => {
 							publishableKey: it || Dt?.stripePublishableKey || "",
 							amount: Math.round((A.total ?? F.total) * 100),
 							currency: A.currency || F.selectedCurrency,
-							onSuccess: sn,
-							onError: cn,
+							onSuccess: on,
+							onError: sn,
 							onCancel: () => k("select"),
 							isCompletingExistingPayment: !!F.selectedPaymentMethodId
 						})
@@ -1067,8 +1066,8 @@ var $e = () => {
 								email: A.prefillEmail,
 								contact: A.prefillContact
 							},
-							onSuccess: (e) => sn(e.razorpay_payment_id),
-							onError: cn,
+							onSuccess: (e) => on(e.razorpay_payment_id),
+							onError: sn,
 							onCancel: () => k("select")
 						})]
 					})
@@ -1089,10 +1088,10 @@ var $e = () => {
 				className: "flex items-center gap-3 mb-6",
 				children: [/* @__PURE__ */ p("div", {
 					className: "p-2 rounded-lg bg-[var(--color-accent-soft)] text-text-link",
-					children: fn()
+					children: dn()
 				}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
 					className: "text-2xl font-bold text-text-primary",
-					children: dn()
+					children: un()
 				}), /* @__PURE__ */ p("p", {
 					className: "text-sm text-text-secondary",
 					children: "Complete your purchase securely"
@@ -1163,7 +1162,7 @@ var $e = () => {
 							className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6",
 							children: /* @__PURE__ */ p(ye, {
 								value: F.items[0].quantity,
-								onChange: ln,
+								onChange: cn,
 								costPerCredit: W,
 								currency: F.selectedCurrency,
 								disabled: qt
@@ -1176,8 +1175,8 @@ var $e = () => {
 								selectedAccountId: F.billingAccount?.id ?? null,
 								onSelect: F.setBillingAccount,
 								isLoading: Nt,
-								disabled: rn,
-								disabledMessage: rn ? "Billing account is locked for plan changes" : void 0
+								disabled: nn,
+								disabledMessage: nn ? "Billing account is locked for plan changes" : void 0
 							}), E === "ADDON" && !T && F.billingAccount && /* @__PURE__ */ p(Se, {
 								subscriptions: V,
 								selectedSubscriptionId: F.selectedSubscriptionId,
@@ -1203,7 +1202,7 @@ var $e = () => {
 									razorpayEnabled: kt,
 									canPayWithCredits: F.canPayWithCredits,
 									availableCredits: F.availableCredits,
-									totalAmount: F.subtotalUSD,
+									creditsRequired: F.creditsRequired,
 									billingCountry: q,
 									saveCard: F.saveCard,
 									onSaveCardChange: F.setSaveCard,
@@ -1379,8 +1378,8 @@ var $e = () => {
 							}),
 							/* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: on,
-								disabled: F.isProcessing || !F.billingAccount || F.items.length === 0 || E === "ADDON" && !T && Wt || E === "ADDON" && !T && V.length === 0 || E === "ADDON" && !T && !F.selectedSubscriptionId || z && (!B.shippingAddressId || !B.shippingMethodId),
+								onClick: an,
+								disabled: F.isProcessing || !F.billingAccount || F.items.length === 0 || F.selectedProvider === "CREDITS" && !Qt || E === "ADDON" && !T && Wt || E === "ADDON" && !T && V.length === 0 || E === "ADDON" && !T && !F.selectedSubscriptionId || z && (!B.shippingAddressId || !B.shippingMethodId),
 								className: "w-full px-6 py-4 rounded-lg bg-action-primary-bg text-action-primary-text font-semibold\n                hover:bg-action-primary-bgHover disabled:opacity-50 disabled:cursor-not-allowed\n                transition-colors flex items-center justify-center gap-2",
 								children: F.isProcessing ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(ze, { className: "size-5 animate-spin" }), "Processing…"] }) : F.selectedProvider === "CREDITS" ? "Pay with Credits" : "Proceed to Payment"
 							}),
@@ -1397,7 +1396,7 @@ var $e = () => {
 				hasPhone: !!F.billingAccount.contactNumber?.trim(),
 				hasAddress: !!(F.billingAccount.billingAddresses?.[0]?.line1?.trim() && F.billingAccount.billingAddresses?.[0]?.postalCode?.trim()),
 				onCompleted: () => {
-					ht.current = !0, mt(!1), on(), Pt().then((e) => {
+					ht.current = !0, mt(!1), an(), Pt().then((e) => {
 						let t = (e.data?.myBillingAccounts ?? []).map(Qe).find((e) => e?.id === F.billingAccount?.id);
 						t && F.setBillingAccount(t);
 					});