npm - @burdenoff/microfe-billing - Versions diffs - 2026.517.1 → 2026.517.2 - Mend

@burdenoff/microfe-billing 2026.517.1 → 2026.517.2

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 (65) hide show

package/dist/billing/modules/credits/pages/CreditWithdrawalPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CreditWithdrawalPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditWithdrawalPage.tsx"],"sourcesContent":["/*\n Credits Module - Credit Withdrawal Page\n * Allows users to withdraw withdrawable credits (purchased + earned) to a payout account.\n /\n\nimport { useState, useEffect, type FC } from 'react';\nimport {\n CreditWithdrawalHistoryDocument,\n GetCreditBalanceByTypeDocument,\n RequestCreditWithdrawalDocument,\n} from '../../../../generated/global-operations';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport {\n fetchPayoutAccounts,\n addPayoutAccount,\n type PayoutAccount,\n type PayoutRequest,\n} from '../../earnings/api';\nimport { formatDate, formatRelativeTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditBalanceByType } from '../../../shared/types';\n\n// ============================================================================\n// API helpers (credit-specific)\n// ============================================================================\n\ninterface GatewayContext {\n apiGatewayUrl?: string;\n authToken?: string;\n orgId?: string;\n}\n\nasync function fetchCreditBalanceByType(\n billingAccountId: string,\n ctx: GatewayContext\n): Promise<CreditBalanceByType> {\n const data = await directBillingGraphqlRequest<\n { getCreditBalanceByType: CreditBalanceByType },\n { billingAccountId: string }\n >({\n ...ctx,\n query: GetCreditBalanceByTypeDocument,\n variables: { billingAccountId },\n });\n return data.getCreditBalanceByType;\n}\n\nasync function requestCreditWithdrawal(\n input: {\n billingAccountId: string;\n creditAmount: number;\n payoutAccountId: string;\n currency?: string;\n notes?: string;\n },\n ctx: GatewayContext\n): Promise<{ id: string; status: string; requestedAmount: number; currency: string }> {\n const data = await directBillingGraphqlRequest<\n {\n requestCreditWithdrawal: {\n id: string;\n status: string;\n requestedAmount: number;\n currency: string;\n };\n },\n { input: typeof input }\n >({\n ...ctx,\n query: RequestCreditWithdrawalDocument,\n variables: { input },\n });\n return data.requestCreditWithdrawal;\n}\n\nasync function fetchCreditWithdrawalHistory(\n billingAccountId: string,\n ctx: GatewayContext\n): Promise<PayoutRequest[]> {\n const data = await directBillingGraphqlRequest<\n { myPayoutRequests: { items: PayoutRequest[] } },\n { billingAccountId: string }\n >({\n ...ctx,\n query: CreditWithdrawalHistoryDocument,\n variables: { billingAccountId },\n });\n return data.myPayoutRequests.items;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface BalanceCardProps {\n label: string;\n value: number;\n description?: string;\n highlight?: boolean;\n}\n\nconst BalanceCard: FC<BalanceCardProps> = ({ label, value, description, highlight }) => (\n <div\n className={`border border-border rounded-lg p-5 ${\n highlight ? 'bg-gradient-to-br from-primary/5 to-primary/10' : 'bg-card'\n }`}\n >\n <p className=\"text-sm text-muted-foreground\">{label}</p>\n <p className={`text-2xl font-bold mt-1 ${highlight ? 'text-primary' : 'text-foreground'}`}>\n {value.toLocaleString()} <span className=\"text-base font-normal\">credits</span>\n </p>\n {description && <p className=\"text-xs text-muted-foreground mt-1\">{description}</p>}\n </div>\n);\n\nfunction getWithdrawalStatusColor(status: string): string {\n switch (status.toUpperCase()) {\n case 'PAID':\n return statusTokens.success.text;\n case 'APPROVED':\n case 'PROCESSING':\n return statusTokens.info.text;\n case 'REQUESTED':\n return statusTokens.warning.text;\n case 'REJECTED':\n case 'FAILED':\n case 'CANCELED':\n return statusTokens.error.text;\n default:\n return 'text-muted-foreground';\n }\n}\n\nfunction getWithdrawalStatusBg(status: string): string {\n switch (status.toUpperCase()) {\n case 'PAID':\n return `${statusTokens.success.bg} ${statusTokens.success.text}`;\n case 'APPROVED':\n case 'PROCESSING':\n return `${statusTokens.info.bg} ${statusTokens.info.text}`;\n case 'REQUESTED':\n return `${statusTokens.warning.bg} ${statusTokens.warning.text}`;\n case 'REJECTED':\n case 'FAILED':\n case 'CANCELED':\n return `${statusTokens.error.bg} ${statusTokens.error.text}`;\n default:\n return 'bg-muted text-muted-foreground';\n }\n}\n\n// ============================================================================\n// Main Page\n// ============================================================================\n\nexport const CreditWithdrawalPage: FC = () => {\n const permissions = useBillingPermissions();\n const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n const { apiGatewayUrl, authToken, orgId } = useBilling();\n const { emit } = useBillingEventEmitter();\n\n // Balance state\n const [balance, setBalance] = useState<CreditBalanceByType \| null>(null);\n const [isLoadingBalance, setIsLoadingBalance] = useState(false);\n const [balanceError, setBalanceError] = useState<string \| null>(null);\n\n // Payout accounts state\n const [payoutAccounts, setPayoutAccounts] = useState<PayoutAccount[]>([]);\n const [isLoadingAccounts, setIsLoadingAccounts] = useState(false);\n\n // Withdrawal history state\n const [history, setHistory] = useState<PayoutRequest[]>([]);\n const [isLoadingHistory, setIsLoadingHistory] = useState(false);\n\n // Withdrawal form state\n const [selectedAccountId, setSelectedAccountId] = useState<string>('');\n const [creditAmount, setCreditAmount] = useState<string>('');\n const [notes, setNotes] = useState<string>('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [submitError, setSubmitError] = useState<string \| null>(null);\n const [submitSuccess, setSubmitSuccess] = useState(false);\n\n // New payout account form state\n const [showAddAccount, setShowAddAccount] = useState(false);\n const [accountForm, setAccountForm] = useState({\n label: '',\n type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' \| 'UPI' \| 'WALLET',\n accountNumber: '',\n ifscCode: '',\n routingNumber: '',\n upiId: '',\n country: 'IN',\n currency: 'USD',\n });\n const [isAddingAccount, setIsAddingAccount] = useState(false);\n const [addAccountError, setAddAccountError] = useState<string \| null>(null);\n\n const billingAccountId = billingAccount?.id;\n\n const getCtx = (): GatewayContext => ({\n apiGatewayUrl,\n authToken,\n orgId,\n });\n\n const loadBalance = async () => {\n if (!billingAccountId) return;\n setIsLoadingBalance(true);\n setBalanceError(null);\n try {\n const b = await fetchCreditBalanceByType(billingAccountId, getCtx());\n setBalance(b);\n } catch (e) {\n setBalanceError(e instanceof Error ? e.message : 'Failed to load balance');\n } finally {\n setIsLoadingBalance(false);\n }\n };\n\n const loadAccounts = async () => {\n if (!billingAccountId) return;\n setIsLoadingAccounts(true);\n try {\n const accounts = await fetchPayoutAccounts(billingAccountId, getCtx());\n setPayoutAccounts(accounts);\n const defaultAcc = accounts.find((a) => a.isDefault) ?? accounts[0];\n if (defaultAcc) setSelectedAccountId(defaultAcc.id);\n } catch {\n // silently fail - user will see empty state\n } finally {\n setIsLoadingAccounts(false);\n }\n };\n\n const loadHistory = async () => {\n if (!billingAccountId) return;\n setIsLoadingHistory(true);\n try {\n const items = await fetchCreditWithdrawalHistory(billingAccountId, getCtx());\n setHistory(items);\n } catch {\n // silently fail\n } finally {\n setIsLoadingHistory(false);\n }\n };\n\n useEffect(() => {\n if (billingAccountId) {\n void loadBalance();\n void loadAccounts();\n void loadHistory();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [billingAccountId]);\n\n const handleAddAccount = async () => {\n if (!billingAccountId) return;\n setAddAccountError(null);\n setIsAddingAccount(true);\n try {\n const details: Record<string, string> = {};\n if (accountForm.type === 'BANK_ACCOUNT') {\n if (accountForm.country === 'IN') {\n details.accountNumber = accountForm.accountNumber;\n details.ifscCode = accountForm.ifscCode;\n } else {\n details.accountNumber = accountForm.accountNumber;\n details.routingNumber = accountForm.routingNumber;\n }\n } else if (accountForm.type === 'UPI') {\n details.upiId = accountForm.upiId;\n }\n\n await addPayoutAccount(\n {\n billingAccountId,\n label: accountForm.label,\n type: accountForm.type,\n country: accountForm.country,\n currency: accountForm.currency,\n accountDetails: details,\n },\n getCtx()\n );\n emit('billing.payout_account.added', {\n route: '/billing/credits/withdraw',\n entityId: billingAccountId,\n source: 'credit-withdrawal',\n });\n await loadAccounts();\n setShowAddAccount(false);\n setAccountForm({\n label: '',\n type: 'BANK_ACCOUNT',\n accountNumber: '',\n ifscCode: '',\n routingNumber: '',\n upiId: '',\n country: 'IN',\n currency: 'USD',\n });\n } catch (e) {\n setAddAccountError(e instanceof Error ? e.message : 'Failed to add account');\n } finally {\n setIsAddingAccount(false);\n }\n };\n\n const handleWithdraw = async () => {\n if (!billingAccountId \|\| !selectedAccountId) return;\n const amount = parseFloat(creditAmount);\n if (!amount \|\| amount <= 0) return;\n\n setSubmitError(null);\n setIsSubmitting(true);\n try {\n const withdrawal = await requestCreditWithdrawal(\n {\n billingAccountId,\n creditAmount: amount,\n payoutAccountId: selectedAccountId,\n notes: notes \|\| undefined,\n },\n getCtx()\n );\n emit('billing.credits.withdrawal_requested', {\n route: '/billing/credits/withdraw',\n entityId: withdrawal.id,\n source: 'credit-withdrawal',\n amount,\n });\n setSubmitSuccess(true);\n setCreditAmount('');\n setNotes('');\n await loadBalance();\n await loadHistory();\n } catch (e) {\n setSubmitError(e instanceof Error ? e.message : 'Withdrawal request failed');\n } finally {\n setIsSubmitting(false);\n }\n };\n\n // Permission check\n if (!permissions.canWithdrawCredits) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n <svg\n className=\"w-6 h-6 text-muted-foreground\"\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=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n <p className=\"text-sm text-muted-foreground\">\n You don't have permission to withdraw credits.\n </p>\n </div>\n </div>\n );\n }\n\n if (isLoadingAccount && !billingAccount) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"h-8 w-64 bg-muted animate-pulse rounded\" />\n <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"border border-border rounded-lg p-5\">\n <div className=\"h-4 w-24 bg-muted animate-pulse rounded mb-2\" />\n <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n const withdrawable = balance?.withdrawable ?? 0;\n const amount = parseFloat(creditAmount) \|\| 0;\n const amountValid = amount > 0 && amount <= withdrawable;\n const activeAccounts = payoutAccounts.filter((a) => a.status !== 'ARCHIVED');\n\n return (\n <div className=\"space-y-6 p-6\">\n {/ Header /}\n <div>\n <h1 className=\"text-2xl font-bold text-foreground\">Withdraw Credits</h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Convert your withdrawable credits (purchased & earned) to a payout\n </p>\n </div>\n\n {/ Balance breakdown /}\n <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n {isLoadingBalance ? (\n [1, 2, 3, 4].map((i) => (\n <div key={i} className=\"border border-border rounded-lg p-5\">\n <div className=\"h-4 w-20 bg-muted animate-pulse rounded mb-2\" />\n <div className=\"h-8 w-28 bg-muted animate-pulse rounded\" />\n </div>\n ))\n ) : balanceError ? (\n <div className=\"col-span-4 text-sm text-destructive\">{balanceError}</div>\n ) : (\n <>\n <BalanceCard\n label=\"Purchased\"\n value={balance?.purchased ?? 0}\n description=\"From credit purchases\"\n />\n <BalanceCard\n label=\"Earned\"\n value={balance?.earned ?? 0}\n description=\"From sales & referrals\"\n />\n <BalanceCard\n label=\"Granted\"\n value={balance?.granted ?? 0}\n description=\"Coupons & admin grants — non-withdrawable\"\n />\n <BalanceCard\n label=\"Withdrawable\"\n value={withdrawable}\n description=\"Purchased + earned\"\n highlight\n />\n </>\n )}\n </div>\n\n {/ Success banner /}\n {submitSuccess && (\n <div className=\"flex items-center gap-3 p-4 rounded-lg bg-status-success-bg-subtle border border-status-success-border text-status-success-text\">\n <svg className=\"w-5 h-5 shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n </svg>\n <div>\n <p className=\"font-medium\">Withdrawal request submitted</p>\n <p className=\"text-sm opacity-80\">Our team will review and process your request.</p>\n </div>\n <button\n onClick={() => setSubmitSuccess(false)}\n className=\"ml-auto text-current opacity-60 hover:opacity-100\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M6 18L18 6M6 6l12 12\"\n />\n </svg>\n </button>\n </div>\n )}\n\n {/ Main two-column layout /}\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/ Left: Payout account management /}\n <div className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <h2 className=\"text-base font-semibold text-foreground\">Payout Account</h2>\n <button\n onClick={() => setShowAddAccount((v) => !v)}\n className=\"text-sm text-primary hover:underline\"\n >\n {showAddAccount ? 'Cancel' : '+ Add new'}\n </button>\n </div>\n\n {/ Add account form /}\n {showAddAccount && (\n <div className=\"border border-border rounded-lg p-4 space-y-3 bg-muted/30\">\n <h3 className=\"text-sm font-medium text-foreground\">New Payout Account</h3>\n\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">Label</label>\n <input\n type=\"text\"\n value={accountForm.label}\n onChange={(e) => setAccountForm((f) => ({ ...f, label: e.target.value }))}\n placeholder=\"e.g. My Bank Account\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">Type</label>\n <select\n value={accountForm.type}\n onChange={(e) =>\n setAccountForm((f) => ({\n ...f,\n type: e.target.value as typeof accountForm.type,\n }))\n }\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n >\n <option value=\"BANK_ACCOUNT\">Bank Account</option>\n <option value=\"UPI\">UPI</option>\n <option value=\"WALLET\">Wallet</option>\n </select>\n </div>\n\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">Country</label>\n <select\n value={accountForm.country}\n onChange={(e) => setAccountForm((f) => ({ ...f, country: e.target.value }))}\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n >\n <option value=\"IN\">India</option>\n <option value=\"US\">United States</option>\n <option value=\"GB\">United Kingdom</option>\n <option value=\"SG\">Singapore</option>\n <option value=\"AU\">Australia</option>\n <option value=\"CA\">Canada</option>\n <option value=\"DE\">Germany</option>\n </select>\n </div>\n </div>\n\n {accountForm.type === 'BANK_ACCOUNT' && (\n <>\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">\n Account Number\n </label>\n <input\n type=\"text\"\n value={accountForm.accountNumber}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, accountNumber: e.target.value }))\n }\n placeholder=\"Account number\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n {accountForm.country === 'IN' ? (\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">IFSC Code</label>\n <input\n type=\"text\"\n value={accountForm.ifscCode}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, ifscCode: e.target.value.toUpperCase() }))\n }\n placeholder=\"e.g. SBIN0001234\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n ) : (\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">\n Routing Number\n </label>\n <input\n type=\"text\"\n value={accountForm.routingNumber}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, routingNumber: e.target.value }))\n }\n placeholder=\"Routing / sort code\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n )}\n </>\n )}\n\n {accountForm.type === 'UPI' && (\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">UPI ID</label>\n <input\n type=\"text\"\n value={accountForm.upiId}\n onChange={(e) => setAccountForm((f) => ({ ...f, upiId: e.target.value }))}\n placeholder=\"yourname@upi\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n )}\n\n {addAccountError && <p className=\"text-xs text-destructive\">{addAccountError}</p>}\n\n <button\n onClick={() => void handleAddAccount()}\n disabled={isAddingAccount \|\| !accountForm.label}\n className=\"w-full py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {isAddingAccount ? 'Saving…' : 'Save Account'}\n </button>\n </div>\n )}\n\n {/ Existing accounts /}\n {isLoadingAccounts ? (\n <div className=\"space-y-2\">\n {[1, 2].map((i) => (\n <div\n key={i}\n className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n />\n ))}\n </div>\n ) : activeAccounts.length === 0 && !showAddAccount ? (\n <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border rounded-lg\">\n <svg\n className=\"w-8 h-8 text-muted-foreground mb-2\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n />\n </svg>\n <p className=\"text-sm text-muted-foreground\">No payout accounts yet</p>\n <button\n onClick={() => setShowAddAccount(true)}\n className=\"mt-2 text-sm text-primary hover:underline\"\n >\n Add a bank account or UPI\n </button>\n </div>\n ) : (\n <div className=\"space-y-2\">\n {activeAccounts.map((account) => (\n <button\n key={account.id}\n onClick={() => setSelectedAccountId(account.id)}\n className={`w-full text-left p-4 border rounded-lg transition-colors ${\n selectedAccountId === account.id\n ? 'border-primary bg-primary/5'\n : 'border-border bg-card hover:border-primary/40'\n }`}\n >\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"text-sm font-medium text-foreground\">{account.label}</p>\n <p className=\"text-xs text-muted-foreground mt-0.5\">\n {account.type.replaceAll('_', ' ')}\n {account.displayName ? ` · ${account.displayName}` : ''}\n {account.accountLast4 ? ` ···${account.accountLast4}` : ''}\n {account.country ? ` · ${account.country}` : ''}\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n {account.isDefault && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-primary/10 text-primary font-medium\">\n Default\n </span>\n )}\n <span\n className={`text-xs px-2 py-0.5 rounded font-medium ${\n account.status === 'ACTIVE'\n ? `${statusTokens.success.bg} ${statusTokens.success.text}`\n : account.status === 'PENDING_VERIFICATION'\n ? `${statusTokens.warning.bg} ${statusTokens.warning.text}`\n : `${statusTokens.error.bg} ${statusTokens.error.text}`\n }`}\n >\n {account.status.replaceAll('_', ' ').toLowerCase()}\n </span>\n {selectedAccountId === account.id && (\n <svg\n className=\"w-4 h-4 text-primary 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=\"M5 13l4 4L19 7\"\n />\n </svg>\n )}\n </div>\n </div>\n </button>\n ))}\n </div>\n )}\n </div>\n\n {/ Right: Withdrawal request form /}\n <div className=\"space-y-4\">\n <h2 className=\"text-base font-semibold text-foreground\">Request Withdrawal</h2>\n\n <div className=\"border border-border rounded-lg p-5 bg-card space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-foreground mb-1\">\n Credits to Withdraw\n </label>\n <input\n type=\"number\"\n min={1}\n max={withdrawable}\n step={1}\n value={creditAmount}\n onChange={(e) => setCreditAmount(e.target.value)}\n placeholder=\"Enter credit amount\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n Max withdrawable:{' '}\n <span className=\"font-medium\">{withdrawable.toLocaleString()} credits</span>\n </p>\n {amount > 0 && amount > withdrawable && (\n <p className=\"text-xs text-destructive mt-1\">\n Amount exceeds your withdrawable balance\n </p>\n )}\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-foreground mb-1\">\n Notes <span className=\"text-muted-foreground font-normal\">(optional)</span>\n </label>\n <textarea\n value={notes}\n onChange={(e) => setNotes(e.target.value)}\n placeholder=\"Any notes for this withdrawal request\"\n rows={2}\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none\"\n />\n </div>\n\n {submitError && (\n <div className=\"p-3 rounded-md bg-destructive/10 border border-destructive/20\">\n <p className=\"text-sm text-destructive\">{submitError}</p>\n </div>\n )}\n\n <div className=\"pt-1 border-t border-border\">\n <p className=\"text-xs text-muted-foreground mb-3\">\n Credits will be converted to USD at the current credit rate. Withdrawals are\n reviewed before processing and may take 3–5 business days.\n </p>\n <button\n onClick={() => void handleWithdraw()}\n disabled={\n isSubmitting \|\| !amountValid \|\| !selectedAccountId \|\| activeAccounts.length === 0\n }\n className=\"w-full py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {isSubmitting ? 'Submitting…' : 'Request Withdrawal'}\n </button>\n </div>\n </div>\n </div>\n </div>\n\n {/ Withdrawal history */}\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <h2 className=\"text-base font-semibold text-foreground\">Withdrawal History</h2>\n <button\n onClick={() => void loadHistory()}\n className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\"\n aria-label=\"Refresh withdrawal history\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n />\n </svg>\n </button>\n </div>\n\n {isLoadingHistory ? (\n <div className=\"space-y-2\">\n {[1, 2, 3].map((i) => (\n <div\n key={i}\n className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n />\n ))}\n </div>\n ) : history.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg\">\n <svg\n className=\"w-8 h-8 text-muted-foreground mb-2\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n />\n </svg>\n <p className=\"text-sm text-muted-foreground\">No withdrawal requests yet</p>\n </div>\n ) : (\n <div className=\"border border-border rounded-lg overflow-hidden\">\n <table className=\"w-full text-sm\">\n <thead className=\"bg-muted/50 border-b border-border\">\n <tr>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n Amount\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n Status\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden sm:table-cell\">\n Payout Account\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n Requested\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n Completed\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border\">\n {history.map((req) => (\n <tr key={req.id} className=\"hover:bg-muted/30 transition-colors\">\n <td className=\"px-4 py-3 font-medium text-foreground\">\n {req.requestedAmount.toLocaleString()} {req.currency}\n </td>\n <td className=\"px-4 py-3\">\n <span\n className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getWithdrawalStatusBg(req.status)}`}\n >\n {req.status.charAt(0) + req.status.slice(1).toLowerCase()}\n </span>\n {req.failureReason && (\n <p\n className=\"text-xs text-destructive mt-0.5 max-w-[180px] truncate\"\n title={req.failureReason}\n >\n {req.failureReason}\n </p>\n )}\n </td>\n <td className=\"px-4 py-3 text-muted-foreground hidden sm:table-cell\">\n {req.payoutAccount ? (\n <span>\n {req.payoutAccount.label}\n {req.payoutAccount.accountLast4\n ? ` ···${req.payoutAccount.accountLast4}`\n : ''}\n </span>\n ) : (\n '—'\n )}\n </td>\n <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n <span title={formatDate(req.createdAt, 'long')}>\n {formatRelativeTime(req.createdAt)}\n </span>\n </td>\n <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n {req.paidAt ? (\n <span className={getWithdrawalStatusColor('PAID')}>\n {formatDate(req.paidAt, 'short')}\n </span>\n ) : (\n '—'\n )}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"CreditWithdrawalPage.js","names":[],"sources":["../../../../../src/billing/modules/credits/pages/CreditWithdrawalPage.tsx"],"sourcesContent":["/*\n Credits Module - Credit Withdrawal Page\n * Allows users to withdraw withdrawable credits (purchased + earned) to a payout account.\n /\n\nimport { useState, useEffect, type FC } from 'react';\nimport {\n CreditWithdrawalHistoryDocument,\n GetCreditBalanceByTypeDocument,\n RequestCreditWithdrawalDocument,\n useGetCostOfCreditsCheckoutQuery,\n} from '../../../../generated/global-operations';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useDefaultBillingAccount } from '../../subscriptions/hooks';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport {\n fetchPayoutAccounts,\n addPayoutAccount,\n type PayoutAccount,\n type PayoutRequest,\n} from '../../earnings/api';\nimport { formatDate, formatRelativeTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport type { CreditBalanceByType } from '../../../shared/types';\n\n// ============================================================================\n// API helpers (credit-specific)\n// ============================================================================\n\ninterface GatewayContext {\n apiGatewayUrl?: string;\n authToken?: string;\n orgId?: string;\n}\n\nasync function fetchCreditBalanceByType(\n billingAccountId: string,\n ctx: GatewayContext\n): Promise<CreditBalanceByType> {\n const data = await directBillingGraphqlRequest<\n { getCreditBalanceByType: CreditBalanceByType },\n { billingAccountId: string }\n >({\n ...ctx,\n query: GetCreditBalanceByTypeDocument,\n variables: { billingAccountId },\n });\n return data.getCreditBalanceByType;\n}\n\nasync function requestCreditWithdrawal(\n input: {\n billingAccountId: string;\n creditAmount: number;\n payoutAccountId: string;\n currency?: string;\n notes?: string;\n },\n ctx: GatewayContext\n): Promise<{ id: string; status: string; requestedAmount: number; currency: string }> {\n const data = await directBillingGraphqlRequest<\n {\n requestCreditWithdrawal: {\n id: string;\n status: string;\n requestedAmount: number;\n currency: string;\n };\n },\n { input: typeof input }\n >({\n ...ctx,\n query: RequestCreditWithdrawalDocument,\n variables: { input },\n });\n return data.requestCreditWithdrawal;\n}\n\nasync function fetchCreditWithdrawalHistory(\n billingAccountId: string,\n ctx: GatewayContext\n): Promise<PayoutRequest[]> {\n const data = await directBillingGraphqlRequest<\n { myPayoutRequests: { items: PayoutRequest[] } },\n { billingAccountId: string }\n >({\n ...ctx,\n query: CreditWithdrawalHistoryDocument,\n variables: { billingAccountId },\n });\n return data.myPayoutRequests.items;\n}\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\ninterface BalanceCardProps {\n label: string;\n value: number;\n description?: string;\n highlight?: boolean;\n}\n\nconst BalanceCard: FC<BalanceCardProps> = ({ label, value, description, highlight }) => (\n <div\n className={`border border-border rounded-lg p-5 ${\n highlight ? 'bg-gradient-to-br from-primary/5 to-primary/10' : 'bg-card'\n }`}\n >\n <p className=\"text-sm text-muted-foreground\">{label}</p>\n <p className={`text-2xl font-bold mt-1 ${highlight ? 'text-primary' : 'text-foreground'}`}>\n {value.toLocaleString()} <span className=\"text-base font-normal\">credits</span>\n </p>\n {description && <p className=\"text-xs text-muted-foreground mt-1\">{description}</p>}\n </div>\n);\n\nfunction getWithdrawalStatusColor(status: string): string {\n switch (status.toUpperCase()) {\n case 'PAID':\n return statusTokens.success.text;\n case 'APPROVED':\n case 'PROCESSING':\n return statusTokens.info.text;\n case 'REQUESTED':\n return statusTokens.warning.text;\n case 'REJECTED':\n case 'FAILED':\n case 'CANCELED':\n return statusTokens.error.text;\n default:\n return 'text-muted-foreground';\n }\n}\n\nfunction getWithdrawalStatusBg(status: string): string {\n switch (status.toUpperCase()) {\n case 'PAID':\n return `${statusTokens.success.bg} ${statusTokens.success.text}`;\n case 'APPROVED':\n case 'PROCESSING':\n return `${statusTokens.info.bg} ${statusTokens.info.text}`;\n case 'REQUESTED':\n return `${statusTokens.warning.bg} ${statusTokens.warning.text}`;\n case 'REJECTED':\n case 'FAILED':\n case 'CANCELED':\n return `${statusTokens.error.bg} ${statusTokens.error.text}`;\n default:\n return 'bg-muted text-muted-foreground';\n }\n}\n\n// ============================================================================\n// Main Page\n// ============================================================================\n\nexport const CreditWithdrawalPage: FC = () => {\n const permissions = useBillingPermissions();\n const { billingAccount, isLoading: isLoadingAccount } = useDefaultBillingAccount();\n const { apiGatewayUrl, authToken, orgId } = useBilling();\n const { emit } = useBillingEventEmitter();\n\n // Balance state\n const [balance, setBalance] = useState<CreditBalanceByType \| null>(null);\n const [isLoadingBalance, setIsLoadingBalance] = useState(false);\n const [balanceError, setBalanceError] = useState<string \| null>(null);\n\n // Payout accounts state\n const [payoutAccounts, setPayoutAccounts] = useState<PayoutAccount[]>([]);\n const [isLoadingAccounts, setIsLoadingAccounts] = useState(false);\n\n // Withdrawal history state\n const [history, setHistory] = useState<PayoutRequest[]>([]);\n const [isLoadingHistory, setIsLoadingHistory] = useState(false);\n\n // Withdrawal form state\n const [selectedAccountId, setSelectedAccountId] = useState<string>('');\n const [creditAmount, setCreditAmount] = useState<string>('');\n const [notes, setNotes] = useState<string>('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [submitError, setSubmitError] = useState<string \| null>(null);\n const [submitSuccess, setSubmitSuccess] = useState(false);\n\n // New payout account form state\n const [showAddAccount, setShowAddAccount] = useState(false);\n const [accountForm, setAccountForm] = useState({\n label: '',\n type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' \| 'UPI',\n accountHolderName: '',\n accountNumber: '',\n ifscCode: '',\n routingNumber: '',\n upiId: '',\n country: '',\n currency: 'USD',\n });\n const [isAddingAccount, setIsAddingAccount] = useState(false);\n const [addAccountError, setAddAccountError] = useState<string \| null>(null);\n\n const billingAccountId = billingAccount?.id;\n\n const getCtx = (): GatewayContext => ({\n apiGatewayUrl,\n authToken,\n orgId,\n });\n\n const loadBalance = async () => {\n if (!billingAccountId) return;\n setIsLoadingBalance(true);\n setBalanceError(null);\n try {\n const b = await fetchCreditBalanceByType(billingAccountId, getCtx());\n setBalance(b);\n } catch (e) {\n setBalanceError(e instanceof Error ? e.message : 'Failed to load balance');\n } finally {\n setIsLoadingBalance(false);\n }\n };\n\n const loadAccounts = async () => {\n if (!billingAccountId) return;\n setIsLoadingAccounts(true);\n try {\n const accounts = await fetchPayoutAccounts(billingAccountId, getCtx());\n setPayoutAccounts(accounts);\n const defaultAcc = accounts.find((a) => a.isDefault) ?? accounts[0];\n if (defaultAcc) setSelectedAccountId(defaultAcc.id);\n } catch {\n // silently fail - user will see empty state\n } finally {\n setIsLoadingAccounts(false);\n }\n };\n\n const loadHistory = async () => {\n if (!billingAccountId) return;\n setIsLoadingHistory(true);\n try {\n const items = await fetchCreditWithdrawalHistory(billingAccountId, getCtx());\n setHistory(items);\n } catch {\n // silently fail\n } finally {\n setIsLoadingHistory(false);\n }\n };\n\n useEffect(() => {\n if (billingAccountId) {\n void loadBalance();\n void loadAccounts();\n void loadHistory();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [billingAccountId]);\n\n // Sync payout account currency to billing account currency when it loads\n useEffect(() => {\n if (billingAccount?.currency) {\n setAccountForm((f) => ({ ...f, currency: billingAccount.currency ?? 'USD' }));\n }\n }, [billingAccount?.currency]);\n\n const handleAddAccount = async () => {\n if (!billingAccountId) return;\n setAddAccountError(null);\n setIsAddingAccount(true);\n try {\n const isIndia =\n accountForm.country.trim().toUpperCase() === 'IN' \|\|\n accountForm.country.trim().toLowerCase() === 'india';\n\n await addPayoutAccount(\n {\n billingAccountId,\n label: accountForm.label,\n type: accountForm.type,\n accountHolderName: accountForm.accountHolderName,\n country: accountForm.country \|\| undefined,\n currency: accountForm.currency,\n ...(accountForm.type === 'BANK_ACCOUNT' && {\n accountNumber: accountForm.accountNumber,\n ...(isIndia\n ? { ifsc: accountForm.ifscCode }\n : { routingNumber: accountForm.routingNumber }),\n }),\n ...(accountForm.type === 'UPI' && { upiId: accountForm.upiId }),\n },\n getCtx()\n );\n emit('billing.payout_account.added', {\n route: '/billing/credits/withdraw',\n entityId: billingAccountId,\n source: 'credit-withdrawal',\n });\n await loadAccounts();\n setShowAddAccount(false);\n setAccountForm({\n label: '',\n type: 'BANK_ACCOUNT' as 'BANK_ACCOUNT' \| 'UPI',\n accountHolderName: '',\n accountNumber: '',\n ifscCode: '',\n routingNumber: '',\n upiId: '',\n country: '',\n currency: 'USD',\n });\n } catch (e) {\n setAddAccountError(e instanceof Error ? e.message : 'Failed to add account');\n } finally {\n setIsAddingAccount(false);\n }\n };\n\n const handleWithdraw = async () => {\n if (!billingAccountId \|\| !selectedAccountId) return;\n const amount = parseFloat(creditAmount);\n if (!amount \|\| amount <= 0) return;\n\n setSubmitError(null);\n setIsSubmitting(true);\n try {\n const withdrawal = await requestCreditWithdrawal(\n {\n billingAccountId,\n creditAmount: amount,\n payoutAccountId: selectedAccountId,\n notes: notes \|\| undefined,\n },\n getCtx()\n );\n emit('billing.credits.withdrawal_requested', {\n route: '/billing/credits/withdraw',\n entityId: withdrawal.id,\n source: 'credit-withdrawal',\n amount,\n });\n setSubmitSuccess(true);\n setCreditAmount('');\n setNotes('');\n await loadBalance();\n await loadHistory();\n } catch (e) {\n setSubmitError(e instanceof Error ? e.message : 'Withdrawal request failed');\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const accountCurrency = billingAccount?.currency ?? 'USD';\n const withdrawAmount = parseFloat(creditAmount) \|\| 0;\n\n const { data: costData, loading: isFetchingCost } = useGetCostOfCreditsCheckoutQuery({\n variables: { creditAmount: withdrawAmount, currency: accountCurrency },\n skip: withdrawAmount <= 0 \|\| !billingAccount,\n });\n\n const estimatedPayout = costData?.getCostOfCredits?.amount;\n\n // Permission check\n if (!permissions.canWithdrawCredits) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"w-12 h-12 mx-auto rounded-full bg-muted flex items-center justify-center\">\n <svg\n className=\"w-6 h-6 text-muted-foreground\"\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=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n />\n </svg>\n </div>\n <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n <p className=\"text-sm text-muted-foreground\">\n You don't have permission to withdraw credits.\n </p>\n </div>\n </div>\n );\n }\n\n if (!isLoadingAccount && !billingAccount) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <h2 className=\"text-lg font-semibold text-foreground\">No Billing Account</h2>\n <p className=\"text-sm text-muted-foreground\">\n You need a billing account to withdraw credits.\n </p>\n </div>\n </div>\n );\n }\n\n if (isLoadingAccount && !billingAccount) {\n return (\n <div className=\"space-y-6 p-6\">\n <div className=\"h-8 w-64 bg-muted animate-pulse rounded\" />\n <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"border border-border rounded-lg p-5\">\n <div className=\"h-4 w-24 bg-muted animate-pulse rounded mb-2\" />\n <div className=\"h-8 w-32 bg-muted animate-pulse rounded\" />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n const withdrawable = balance?.withdrawable ?? 0;\n const amountValid = withdrawAmount > 0 && withdrawAmount <= withdrawable;\n const activeAccounts = payoutAccounts.filter((a) => a.status !== 'ARCHIVED');\n\n return (\n <div className=\"space-y-6 p-6\">\n {/ Header /}\n <div>\n <h1 className=\"text-2xl font-bold text-foreground\">Withdraw Credits</h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Convert your withdrawable credits (purchased & earned) to a payout\n </p>\n </div>\n\n {/ Balance breakdown /}\n <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-4\">\n {isLoadingBalance ? (\n [1, 2, 3, 4].map((i) => (\n <div key={i} className=\"border border-border rounded-lg p-5\">\n <div className=\"h-4 w-20 bg-muted animate-pulse rounded mb-2\" />\n <div className=\"h-8 w-28 bg-muted animate-pulse rounded\" />\n </div>\n ))\n ) : balanceError ? (\n <div className=\"col-span-4 text-sm text-destructive\">{balanceError}</div>\n ) : (\n <>\n <BalanceCard\n label=\"Purchased\"\n value={balance?.purchased ?? 0}\n description=\"From credit purchases\"\n />\n <BalanceCard\n label=\"Earned\"\n value={balance?.earned ?? 0}\n description=\"From sales & referrals\"\n />\n <BalanceCard\n label=\"Granted\"\n value={balance?.granted ?? 0}\n description=\"Coupons & admin grants — non-withdrawable\"\n />\n <BalanceCard\n label=\"Withdrawable\"\n value={withdrawable}\n description=\"Purchased + earned\"\n highlight\n />\n </>\n )}\n </div>\n\n {/ Success banner /}\n {submitSuccess && (\n <div className=\"flex items-center gap-3 p-4 rounded-lg bg-status-success-bg-subtle border border-status-success-border text-status-success-text\">\n <svg className=\"w-5 h-5 shrink-0\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n </svg>\n <div>\n <p className=\"font-medium\">Withdrawal request submitted</p>\n <p className=\"text-sm opacity-80\">Our team will review and process your request.</p>\n </div>\n <button\n onClick={() => setSubmitSuccess(false)}\n className=\"ml-auto text-current opacity-60 hover:opacity-100\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M6 18L18 6M6 6l12 12\"\n />\n </svg>\n </button>\n </div>\n )}\n\n {/ Main two-column layout /}\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n {/ Left: Payout account management /}\n <div className=\"space-y-4\">\n <div className=\"flex items-center justify-between\">\n <h2 className=\"text-base font-semibold text-foreground\">Payout Account</h2>\n <button\n onClick={() => setShowAddAccount((v) => !v)}\n className=\"text-sm text-primary hover:underline\"\n >\n {showAddAccount ? 'Cancel' : '+ Add new'}\n </button>\n </div>\n\n {/ Add account form /}\n {showAddAccount && (\n <div className=\"border border-border rounded-lg p-4 space-y-3 bg-muted/30\">\n <h3 className=\"text-sm font-medium text-foreground\">New Payout Account</h3>\n\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">Label</label>\n <input\n type=\"text\"\n value={accountForm.label}\n onChange={(e) => setAccountForm((f) => ({ ...f, label: e.target.value }))}\n placeholder=\"e.g. My Bank Account\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">\n Account Holder Name\n </label>\n <input\n type=\"text\"\n value={accountForm.accountHolderName}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, accountHolderName: e.target.value }))\n }\n placeholder=\"Full name as on bank account\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n\n <div className=\"grid grid-cols-2 gap-3\">\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">Type</label>\n <select\n value={accountForm.type}\n onChange={(e) =>\n setAccountForm((f) => ({\n ...f,\n type: e.target.value as typeof accountForm.type,\n }))\n }\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n >\n <option value=\"BANK_ACCOUNT\">Bank Account</option>\n <option value=\"UPI\">UPI</option>\n </select>\n </div>\n\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">Country</label>\n <input\n type=\"text\"\n value={accountForm.country}\n onChange={(e) => setAccountForm((f) => ({ ...f, country: e.target.value }))}\n placeholder=\"e.g. India, US, UK\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n </div>\n\n {accountForm.type === 'BANK_ACCOUNT' && (\n <>\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">\n Account Number\n </label>\n <input\n type=\"text\"\n value={accountForm.accountNumber}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, accountNumber: e.target.value }))\n }\n placeholder=\"Account number\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n {accountForm.country.trim().toUpperCase() === 'IN' \|\|\n accountForm.country.trim().toLowerCase() === 'india' ? (\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">IFSC Code</label>\n <input\n type=\"text\"\n value={accountForm.ifscCode}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, ifscCode: e.target.value.toUpperCase() }))\n }\n placeholder=\"e.g. SBIN0001234\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n ) : (\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">\n Routing Number\n </label>\n <input\n type=\"text\"\n value={accountForm.routingNumber}\n onChange={(e) =>\n setAccountForm((f) => ({ ...f, routingNumber: e.target.value }))\n }\n placeholder=\"Routing / sort code\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n )}\n </>\n )}\n\n {accountForm.type === 'UPI' && (\n <div>\n <label className=\"block text-xs text-muted-foreground mb-1\">UPI ID</label>\n <input\n type=\"text\"\n value={accountForm.upiId}\n onChange={(e) => setAccountForm((f) => ({ ...f, upiId: e.target.value }))}\n placeholder=\"yourname@upi\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n </div>\n )}\n\n {addAccountError && <p className=\"text-xs text-destructive\">{addAccountError}</p>}\n\n <button\n onClick={() => void handleAddAccount()}\n disabled={isAddingAccount \|\| !accountForm.label \|\| !accountForm.accountHolderName}\n className=\"w-full py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {isAddingAccount ? 'Saving…' : 'Save Account'}\n </button>\n </div>\n )}\n\n {/ Existing accounts /}\n {isLoadingAccounts ? (\n <div className=\"space-y-2\">\n {[1, 2].map((i) => (\n <div\n key={i}\n className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n />\n ))}\n </div>\n ) : activeAccounts.length === 0 && !showAddAccount ? (\n <div className=\"flex flex-col items-center justify-center py-8 border border-dashed border-border rounded-lg\">\n <svg\n className=\"w-8 h-8 text-muted-foreground mb-2\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z\"\n />\n </svg>\n <p className=\"text-sm text-muted-foreground\">No payout accounts yet</p>\n <button\n onClick={() => setShowAddAccount(true)}\n className=\"mt-2 text-sm text-primary hover:underline\"\n >\n Add a bank account or UPI\n </button>\n </div>\n ) : (\n <div className=\"space-y-2\">\n {activeAccounts.map((account) => (\n <button\n key={account.id}\n onClick={() => setSelectedAccountId(account.id)}\n className={`w-full text-left p-4 border rounded-lg transition-colors ${\n selectedAccountId === account.id\n ? 'border-primary bg-primary/5'\n : 'border-border bg-card hover:border-primary/40'\n }`}\n >\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"text-sm font-medium text-foreground\">{account.label}</p>\n <p className=\"text-xs text-muted-foreground mt-0.5\">\n {account.type.replaceAll('_', ' ')}\n {account.displayName ? ` · ${account.displayName}` : ''}\n {account.accountLast4 ? ` ···${account.accountLast4}` : ''}\n {account.country ? ` · ${account.country}` : ''}\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n {account.isDefault && (\n <span className=\"text-xs px-2 py-0.5 rounded bg-primary/10 text-primary font-medium\">\n Default\n </span>\n )}\n <span\n className={`text-xs px-2 py-0.5 rounded font-medium ${\n account.status === 'ACTIVE'\n ? `${statusTokens.success.bg} ${statusTokens.success.text}`\n : account.status === 'PENDING_VERIFICATION'\n ? `${statusTokens.warning.bg} ${statusTokens.warning.text}`\n : `${statusTokens.error.bg} ${statusTokens.error.text}`\n }`}\n >\n {account.status.replaceAll('_', ' ').toLowerCase()}\n </span>\n {selectedAccountId === account.id && (\n <svg\n className=\"w-4 h-4 text-primary 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=\"M5 13l4 4L19 7\"\n />\n </svg>\n )}\n </div>\n </div>\n </button>\n ))}\n </div>\n )}\n </div>\n\n {/ Right: Withdrawal request form /}\n <div className=\"space-y-4\">\n <h2 className=\"text-base font-semibold text-foreground\">Request Withdrawal</h2>\n\n <div className=\"border border-border rounded-lg p-5 bg-card space-y-4\">\n <div>\n <label className=\"block text-sm font-medium text-foreground mb-1\">\n Credits to Withdraw\n </label>\n <input\n type=\"number\"\n min={1}\n max={withdrawable}\n step={1}\n value={creditAmount}\n onChange={(e) => setCreditAmount(e.target.value)}\n placeholder=\"Enter credit amount\"\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30\"\n />\n <p className=\"text-xs text-muted-foreground mt-1\">\n Max withdrawable:{' '}\n <span className=\"font-medium\">{withdrawable.toLocaleString()} credits</span>\n </p>\n {withdrawAmount > 0 && withdrawAmount <= withdrawable && (\n <p className=\"text-xs text-muted-foreground mt-1\">\n {isFetchingCost ? (\n 'Calculating…'\n ) : estimatedPayout != null ? (\n <>\n Estimated payout:{' '}\n <span className=\"font-semibold text-foreground\">\n {estimatedPayout.toLocaleString(undefined, {\n style: 'currency',\n currency: accountCurrency,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n </span>{' '}\n at the current credit rate\n </>\n ) : null}\n </p>\n )}\n {withdrawAmount > 0 && withdrawAmount > withdrawable && (\n <p className=\"text-xs text-destructive mt-1\">\n Amount exceeds your withdrawable balance\n </p>\n )}\n </div>\n\n <div>\n <label className=\"block text-sm font-medium text-foreground mb-1\">\n Notes <span className=\"text-muted-foreground font-normal\">(optional)</span>\n </label>\n <textarea\n value={notes}\n onChange={(e) => setNotes(e.target.value)}\n placeholder=\"Any notes for this withdrawal request\"\n rows={2}\n className=\"w-full px-3 py-2 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 resize-none\"\n />\n </div>\n\n {submitError && (\n <div className=\"p-3 rounded-md bg-destructive/10 border border-destructive/20\">\n <p className=\"text-sm text-destructive\">{submitError}</p>\n </div>\n )}\n\n <div className=\"pt-1 border-t border-border\">\n <p className=\"text-xs text-muted-foreground mb-3\">\n Credits will be converted to {accountCurrency} at the current credit rate.\n Withdrawals are reviewed before processing and may take 3–5 business days.\n </p>\n <button\n onClick={() => void handleWithdraw()}\n disabled={\n isSubmitting \|\| !amountValid \|\| !selectedAccountId \|\| activeAccounts.length === 0\n }\n className=\"w-full py-2.5 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {isSubmitting ? 'Submitting…' : 'Request Withdrawal'}\n </button>\n </div>\n </div>\n </div>\n </div>\n\n {/ Withdrawal history */}\n <div className=\"space-y-3\">\n <div className=\"flex items-center justify-between\">\n <h2 className=\"text-base font-semibold text-foreground\">Withdrawal History</h2>\n <button\n onClick={() => void loadHistory()}\n className=\"text-sm text-muted-foreground hover:text-foreground transition-colors\"\n aria-label=\"Refresh withdrawal history\"\n >\n <svg className=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n />\n </svg>\n </button>\n </div>\n\n {isLoadingHistory ? (\n <div className=\"space-y-2\">\n {[1, 2, 3].map((i) => (\n <div\n key={i}\n className=\"h-16 border border-border rounded-lg bg-muted animate-pulse\"\n />\n ))}\n </div>\n ) : history.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg\">\n <svg\n className=\"w-8 h-8 text-muted-foreground mb-2\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n />\n </svg>\n <p className=\"text-sm text-muted-foreground\">No withdrawal requests yet</p>\n </div>\n ) : (\n <div className=\"border border-border rounded-lg overflow-hidden\">\n <table className=\"w-full text-sm\">\n <thead className=\"bg-muted/50 border-b border-border\">\n <tr>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n Amount\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide\">\n Status\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden sm:table-cell\">\n Payout Account\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n Requested\n </th>\n <th className=\"text-left px-4 py-3 text-xs font-medium text-muted-foreground uppercase tracking-wide hidden md:table-cell\">\n Completed\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border\">\n {history.map((req) => (\n <tr key={req.id} className=\"hover:bg-muted/30 transition-colors\">\n <td className=\"px-4 py-3 font-medium text-foreground\">\n {req.requestedAmount.toLocaleString()} {req.currency}\n </td>\n <td className=\"px-4 py-3\">\n <span\n className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${getWithdrawalStatusBg(req.status)}`}\n >\n {req.status.charAt(0) + req.status.slice(1).toLowerCase()}\n </span>\n {req.failureReason && (\n <p\n className=\"text-xs text-destructive mt-0.5 max-w-[180px] truncate\"\n title={req.failureReason}\n >\n {req.failureReason}\n </p>\n )}\n </td>\n <td className=\"px-4 py-3 text-muted-foreground hidden sm:table-cell\">\n {req.payoutAccount ? (\n <span>\n {req.payoutAccount.label}\n {req.payoutAccount.accountLast4\n ? ` ···${req.payoutAccount.accountLast4}`\n : ''}\n </span>\n ) : (\n '—'\n )}\n </td>\n <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n <span title={formatDate(req.createdAt, 'long')}>\n {formatRelativeTime(req.createdAt)}\n </span>\n </td>\n <td className=\"px-4 py-3 text-muted-foreground hidden md:table-cell\">\n {req.paidAt ? (\n <span className={getWithdrawalStatusColor('PAID')}>\n {formatDate(req.paidAt, 'short')}\n </span>\n ) : (\n '—'\n )}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/dashboard/pages/OverviewPage.js CHANGED Viewed

@@ -170,7 +170,7 @@ var g = () => {
 			})
 		]
 	}) : /* @__PURE__ */ h("div", {
-		className: "p-6 space-y-8",
+		className: "p-4 sm:p-6 space-y-6 sm:space-y-8",
 		children: [
 			/* @__PURE__ */ h("header", {
 				className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4",
@@ -246,7 +246,7 @@ var g = () => {
 				})] })]
 			}),
 			P && /* @__PURE__ */ h("div", {
-				className: "grid grid-cols-2 sm:grid-cols-4 gap-4",
+				className: "grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4",
 				children: [
 					/* @__PURE__ */ m(n, {
 						label: _("billing.overview.stats.creditBalance", "Credit Balance"),

package/dist/billing/modules/dashboard/pages/OverviewPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverviewPage.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/pages/OverviewPage.tsx"],"sourcesContent":["/*\n Billing Overview Page\n * Main dashboard for billing showing accounts, subscriptions, payment methods, and addons\n /\n\nimport { type FC, useState, useCallback, useEffect } from 'react';\nimport {\n Plus,\n Building2,\n RefreshCw,\n Loader2,\n Wallet,\n ChevronDown,\n Check,\n Activity,\n Receipt,\n ArrowRight,\n Sparkles,\n Crown,\n Coins,\n} from 'lucide-react';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { StatCard } from '../../../shared/components/StatCard';\nimport { EmptyState } from '../../../shared/components/EmptyState';\nimport { ServerError } from '../../../shared/components/ServerError';\nimport { AccessDenied } from '../../../shared/components/AccessDenied';\nimport { isServerError } from '../../../shared/utils';\nimport { useBillingOverviewData, useDashboardMutations } from '../hooks';\nimport {\n BillingAccountCard,\n PaymentMethodsSection,\n ActiveSubscriptionCard,\n RecommendedAddonsSection,\n CreateBillingAccountModal,\n AddPaymentMethodModal,\n} from '../components';\nimport { useAddonCartStore } from '../../addons/store/addonCartStore';\nimport { FloatingCartDrawer } from '../../addons/components/FloatingCartDrawer';\nimport {\n getStoredBillingAccountId,\n setStoredBillingAccountId,\n} from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport type {\n BillingAccount,\n CreateBillingAccountInput,\n SetBillingAddressInput,\n Addon,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const OverviewPage: FC = () => {\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 { navigate, basePath, orgId, productId } = useBilling();\n const permissions = useBillingPermissions();\n const { emit } = useBillingEventEmitter();\n\n const [selectedAccountId, setSelectedAccountIdState] = useState<string \| null>(() =>\n getStoredBillingAccountId(orgId)\n );\n\n const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);\n const [createError, setCreateError] = useState<string \| null>(null);\n const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n const [isAddPaymentModalOpen, setIsAddPaymentModalOpen] = useState(false);\n const [selectedSubscriptionIndex, setSelectedSubscriptionIndex] = useState(0);\n const [isSubscriptionSelectorOpen, setIsSubscriptionSelectorOpen] = useState(false);\n\n const {\n billingAccounts,\n currentAccount,\n paymentMethods,\n activeSubscriptions,\n hasActiveSubscription,\n recommendedAddons,\n isLoading,\n error,\n refetchAll,\n } = useBillingOverviewData(selectedAccountId, productId);\n\n const currentAccountId = currentAccount?.id;\n const isLoadingAddons = isLoading;\n\n const setSelectedAccountId = useCallback(\n (accountId: string \| null) => {\n setSelectedAccountIdState(accountId);\n setStoredBillingAccountId(orgId, accountId);\n },\n [orgId]\n );\n\n // Addon cart store for add to cart functionality\n const { addToCart, isInCart, getCartItem, updateQuantity, removeFromCart } = useAddonCartStore();\n\n const {\n createBillingAccount,\n setBillingAddress,\n setDefaultPaymentMethod,\n deletePaymentMethod,\n isCreatingAccount,\n } = useDashboardMutations();\n\n // Reset subscription selector when account changes or subscriptions change\n useEffect(() => {\n setSelectedSubscriptionIndex(0);\n setIsSubscriptionSelectorOpen(false);\n }, [currentAccountId, activeSubscriptions.length]);\n\n useEffect(() => {\n if (selectedAccountId && billingAccounts.length > 0) {\n const accountExists = billingAccounts.some((account) => account.id === selectedAccountId);\n if (!accountExists) {\n setSelectedAccountId(null);\n }\n }\n }, [billingAccounts, selectedAccountId, setSelectedAccountId]);\n\n useEffect(() => {\n if (!selectedAccountId && billingAccounts.length > 0) {\n const defaultAccount =\n billingAccounts.find((account) => account.isDefault) ?? billingAccounts[0];\n setSelectedAccountId(defaultAccount.id);\n }\n }, [billingAccounts, selectedAccountId, setSelectedAccountId]);\n\n // Derive selected subscription from active subscriptions\n const selectedSubscription =\n activeSubscriptions[selectedSubscriptionIndex] \|\| activeSubscriptions[0] \|\| null;\n\n // Helper for navigation - properly joins basePath and path\n const navigateTo = useCallback(\n (path: string) => {\n // Handle path joining to avoid double slashes (e.g., / + /plans = //plans)\n let fullPath = path;\n if (basePath && basePath !== '/') {\n // Remove trailing slash from basePath and leading slash from path if needed\n const base = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n const suffix = path.startsWith('/') ? path : `/${path}`;\n fullPath = `${base}${suffix}`;\n }\n navigate(fullPath);\n },\n [navigate, basePath]\n );\n\n // Handlers\n const handleCreateAccount = useCallback(\n async (\n input: CreateBillingAccountInput,\n address?: Omit<SetBillingAddressInput, 'billingAccountId'>\n ) => {\n setCreateError(null);\n try {\n const newAccount = await createBillingAccount(input);\n\n // If address data provided, set the billing address\n if (address && newAccount.id) {\n await setBillingAddress({\n billingAccountId: newAccount.id,\n ...address,\n });\n }\n\n setIsCreateModalOpen(false);\n setSelectedAccountId(newAccount.id);\n emit('billing.billing_account.created', {\n route: '/billing/overview',\n entityId: newAccount.id,\n source: 'overview',\n });\n await refetchAll();\n } catch (err) {\n setCreateError(err instanceof Error ? err.message : 'Failed to create billing account');\n }\n },\n [createBillingAccount, emit, refetchAll, setBillingAddress, setSelectedAccountId]\n );\n\n const handleAddPaymentMethod = useCallback(() => {\n setIsAddPaymentModalOpen(true);\n }, []);\n\n // Helper to refetch the current account data\n const refetchCurrentAccount = useCallback(async () => {\n await refetchAll();\n }, [refetchAll]);\n\n const handlePaymentMethodAdded = useCallback(async () => {\n emit('billing.payment_method.added', {\n route: '/billing/overview',\n entityId: currentAccountId,\n source: 'overview',\n });\n await refetchCurrentAccount();\n }, [currentAccountId, emit, refetchCurrentAccount]);\n\n const handleSetDefaultPaymentMethod = useCallback(\n async (id: string) => {\n if (!currentAccountId) return;\n await setDefaultPaymentMethod(id, currentAccountId);\n emit('billing.payment_method.default_set', {\n route: '/billing/overview',\n entityId: id,\n source: 'overview',\n });\n await refetchCurrentAccount();\n },\n [currentAccountId, emit, setDefaultPaymentMethod, refetchCurrentAccount]\n );\n\n const handleDeletePaymentMethod = useCallback(\n async (id: string) => {\n if (!currentAccountId) return;\n await deletePaymentMethod(id, currentAccountId);\n emit('billing.payment_method.deleted', {\n route: '/billing/overview',\n entityId: id,\n source: 'overview',\n });\n await refetchCurrentAccount();\n },\n [currentAccountId, deletePaymentMethod, emit, refetchCurrentAccount]\n );\n\n const handleSelectAccount = useCallback(\n (account: BillingAccount) => {\n setSelectedAccountId(account.id);\n setIsAccountSelectorOpen(false);\n },\n [setSelectedAccountId]\n );\n\n const handleRefresh = useCallback(async () => {\n await refetchAll();\n }, [refetchAll]);\n\n // Handler for adding addon to cart\n const handleAddToCart = useCallback(\n (addon: Addon) => {\n addToCart(addon);\n },\n [addToCart]\n );\n\n // Handler to check if addon is in cart\n const handleIsInCart = useCallback(\n (addonId: string) => {\n return isInCart(addonId);\n },\n [isInCart]\n );\n\n // Handler to get cart quantity for addon\n const handleGetCartQuantity = useCallback(\n (addonId: string) => {\n const item = getCartItem(addonId);\n return item?.quantity \|\| 0;\n },\n [getCartItem]\n );\n\n // Handler to update quantity in cart\n const handleUpdateQuantity = useCallback(\n (addonId: string, quantity: number) => {\n if (quantity <= 0) {\n removeFromCart(addonId);\n } else {\n updateQuantity(addonId, quantity);\n }\n },\n [updateQuantity, removeFromCart]\n );\n\n // Handler to remove from cart\n const handleRemoveFromCart = useCallback(\n (addonId: string) => {\n removeFromCart(addonId);\n },\n [removeFromCart]\n );\n\n // Permission check - must be after all hooks are defined\n if (!permissions.canViewBillingAccount) {\n return <AccessDenied message=\"You don't have permission to view billing information.\" />;\n }\n\n // Error state\n if (error && isServerError(error) && !isLoading) {\n return (\n <div className=\"p-6\">\n <ServerError\n title=\"Server Unavailable\"\n message=\"Unable to load billing overview. The server might be down or experiencing issues.\"\n onRetry={handleRefresh}\n showRetry\n />\n </div>\n );\n }\n\n // Loading state\n if (isLoading && !currentAccount) {\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"flex flex-col items-center gap-3\">\n <Loader2 className=\"w-8 h-8 animate-spin text-primary\" />\n <p className=\"text-sm text-muted-foreground\">\n {tr('billing.overview.loadingInfo', 'Loading billing information...')}\n </p>\n </div>\n </div>\n );\n }\n\n // No billing accounts state\n if (!isLoading && billingAccounts.length === 0) {\n return (\n <div className=\"p-6\">\n <header className=\"mb-8\">\n <h1 className=\"text-2xl font-bold text-foreground\">\n {tr('billing.overview.title', 'Billing Overview')}\n </h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n {tr(\n 'billing.overview.emptySetupDescription',\n 'Set up billing to manage subscriptions, payments, and invoices'\n )}\n </p>\n </header>\n <EmptyState\n icon={<Building2 className=\"w-6 h-6 text-muted-foreground\" />}\n title={tr('billing.overview.emptyTitle', 'No billing account')}\n description={tr(\n 'billing.overview.emptyDescription',\n 'Create a billing account to start managing your subscriptions and payments'\n )}\n action={\n permissions.canManageBillingAccount ? (\n <button\n onClick={() => setIsCreateModalOpen(true)}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors\"\n >\n <Plus className=\"w-4 h-4\" />\n {tr('billing.overview.createBillingAccount', 'Create Billing Account')}\n </button>\n ) : undefined\n }\n />\n\n <CreateBillingAccountModal\n isOpen={isCreateModalOpen}\n onClose={() => {\n setIsCreateModalOpen(false);\n setCreateError(null);\n }}\n onSubmit={handleCreateAccount}\n isSubmitting={isCreatingAccount}\n error={createError}\n />\n </div>\n );\n }\n\n return (\n <div className=\"p-6 space-y-8\">\n {/ Header /}\n <header className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4\">\n <div>\n <h1 className=\"text-2xl font-bold text-foreground\">\n {tr('billing.overview.title', 'Billing Overview')}\n </h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n {tr(\n 'billing.overview.description',\n 'Manage your billing accounts, subscriptions, and payment methods'\n )}\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={handleRefresh}\n className=\"p-2 rounded-lg border border-border hover:bg-muted text-muted-foreground hover:text-foreground transition-colors\"\n aria-label={tr('billing.overview.refresh', 'Refresh')}\n >\n <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />\n </button>\n {permissions.canManageBillingAccount && billingAccounts.length > 0 && (\n <button\n onClick={() => setIsCreateModalOpen(true)}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors\"\n >\n <Plus className=\"w-4 h-4\" />\n <span className=\"hidden sm:inline\">\n {tr('billing.overview.newAccount', 'New Account')}\n </span>\n </button>\n )}\n </div>\n </header>\n\n {/ Account Selector (if multiple accounts) /}\n {billingAccounts.length > 1 && (\n <div className=\"relative\">\n <button\n onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n <Building2 className=\"w-4 h-4 text-primary\" />\n </div>\n <div className=\"text-left\">\n <p className=\"text-sm font-medium text-foreground\">\n {currentAccount?.name \|\| tr('billing.overview.selectAccount', 'Select Account')}\n </p>\n <p className=\"text-xs text-muted-foreground\">{currentAccount?.email}</p>\n </div>\n </div>\n <ChevronDown\n className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\n />\n </button>\n\n {isAccountSelectorOpen && (\n <>\n <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n {billingAccounts.map((account) => (\n <button\n key={account.id}\n onClick={() => handleSelectAccount(account)}\n className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n <Building2 className=\"w-4 h-4 text-muted-foreground\" />\n </div>\n <div className=\"text-left min-w-0\">\n <p className=\"text-sm font-medium text-foreground truncate\">\n {account.name}\n </p>\n <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n </div>\n </div>\n {currentAccount?.id === account.id && (\n <Check className=\"w-4 h-4 text-primary flex-shrink-0\" />\n )}\n </button>\n ))}\n </div>\n </>\n )}\n </div>\n )}\n\n {/ Stats Row /}\n {currentAccount && (\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n <StatCard\n label={tr('billing.overview.stats.creditBalance', 'Credit Balance')}\n value={`${(currentAccount.creditAmount \|\| 0).toLocaleString()} Credits`}\n icon={<Wallet className=\"w-5 h-5\" />}\n />\n <StatCard\n label={tr('billing.overview.stats.activePlans', 'Active Plans')}\n value={\n activeSubscriptions.length > 0\n ? activeSubscriptions.length === 1\n ? activeSubscriptions[0]?.plan?.name \|\| '1 Plan'\n : `${activeSubscriptions.length} ${tr('billing.overview.stats.plansSuffix', 'Plans')}`\n : tr('billing.overview.stats.none', 'None')\n }\n icon={<RefreshCw className=\"w-5 h-5\" />}\n />\n <StatCard\n label={tr('billing.overview.stats.paymentMethods', 'Payment Methods')}\n value={paymentMethods.length}\n icon={<Building2 className=\"w-5 h-5\" />}\n />\n <StatCard\n label={tr('billing.overview.stats.paymentCurrency', 'Payment Currency')}\n value={currentAccount.currency \|\| 'USD'}\n icon={<Building2 className=\"w-5 h-5\" />}\n />\n </div>\n )}\n\n {/ Main Content Grid /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Left Column - Billing Account & Subscription /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Billing Account Card /}\n {currentAccount && (\n <BillingAccountCard\n account={currentAccount}\n isDefault={currentAccount.isDefault ?? false}\n onEdit={() =>\n currentAccount && navigateTo(`/settings?billingAccountId=${currentAccount.id}`)\n }\n onViewTransactions={() => navigateTo(`/transactions/${currentAccount.id}`)}\n onViewCreditTransactions={() =>\n navigateTo(`/creditTransactions/${currentAccount.id}`)\n }\n />\n )}\n\n {/ Active Subscriptions /}\n <div className=\"space-y-3\">\n {/ Subscription Selector (if multiple subscriptions) /}\n {activeSubscriptions.length > 1 && (\n <div className=\"relative\">\n <button\n onClick={() => setIsSubscriptionSelectorOpen(!isSubscriptionSelectorOpen)}\n className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n <Crown className=\"w-4 h-4 text-primary\" />\n </div>\n <div className=\"text-left\">\n <p className=\"text-sm font-medium text-foreground\">\n {selectedSubscription?.plan?.name \|\|\n tr('billing.overview.selectSubscription', 'Select Subscription')}\n {selectedSubscription?.plan?.product?.name && (\n <span className=\"text-muted-foreground font-normal\">\n {' '}\n · {selectedSubscription.plan.product.name}\n </span>\n )}\n </p>\n <p className=\"text-xs text-muted-foreground\">\n {activeSubscriptions.length}{' '}\n {tr('billing.overview.activeSubscriptions', 'active subscriptions')}\n </p>\n </div>\n </div>\n <ChevronDown\n className={`w-4 h-4 text-muted-foreground transition-transform ${isSubscriptionSelectorOpen ? 'rotate-180' : ''}`}\n />\n </button>\n\n {isSubscriptionSelectorOpen && (\n <>\n <div\n className=\"fixed inset-0 z-10\"\n onClick={() => setIsSubscriptionSelectorOpen(false)}\n />\n <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n {activeSubscriptions.map((subscription, index) => (\n <button\n key={subscription.id}\n onClick={() => {\n setSelectedSubscriptionIndex(index);\n setIsSubscriptionSelectorOpen(false);\n }}\n className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n <Crown className=\"w-4 h-4 text-muted-foreground\" />\n </div>\n <div className=\"text-left min-w-0\">\n <p className=\"text-sm font-medium text-foreground truncate\">\n {subscription.plan?.name \|\|\n tr('billing.overview.subscription', 'Subscription')}\n </p>\n <p className=\"text-xs text-muted-foreground truncate\">\n {subscription.plan?.product?.name \|\|\n tr('billing.overview.unknownProduct', 'Unknown Product')}{' '}\n · {tr('billing.overview.ends', 'Ends')}{' '}\n {new Date(subscription.endDate).toLocaleDateString()}\n </p>\n </div>\n </div>\n {selectedSubscriptionIndex === index && (\n <Check className=\"w-4 h-4 text-primary flex-shrink-0\" />\n )}\n </button>\n ))}\n </div>\n </>\n )}\n </div>\n )}\n\n {/ Single Subscription Card /}\n <ActiveSubscriptionCard\n subscription={selectedSubscription}\n onViewDetails={() =>\n selectedSubscription &&\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${selectedSubscription.id}`,\n selectedSubscription.billingAccountId ?? currentAccount?.id\n )\n )\n }\n onUpgrade={() =>\n selectedSubscription &&\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${selectedSubscription.id}/upgrade`,\n selectedSubscription.billingAccountId ?? currentAccount?.id\n )\n )\n }\n onManage={() =>\n currentAccount && navigateTo(`/subscriptions?billingAccountId=${currentAccount.id}`)\n }\n onPurchasePlan={() => navigateTo('/plans')}\n />\n </div>\n\n {/ Payment Methods /}\n {currentAccount && (\n <PaymentMethodsSection\n paymentMethods={paymentMethods}\n billingAccountId={currentAccount.id}\n onAddPaymentMethod={handleAddPaymentMethod}\n onSetDefault={handleSetDefaultPaymentMethod}\n onDelete={handleDeletePaymentMethod}\n isLoading={isLoading}\n />\n )}\n </div>\n\n {/ Right Column - Quick Actions & Info /}\n <div className=\"space-y-6\">\n {/ Quick Actions /}\n <section className=\"border border-border rounded-lg bg-card p-4\">\n <h3 className=\"font-semibold text-foreground mb-4\">Quick Actions</h3>\n <div className=\"space-y-2\">\n <button\n onClick={() => currentAccount && navigateTo(`/transactions/${currentAccount.id}`)}\n disabled={!currentAccount}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n <div className=\"w-8 h-8 rounded bg-status-info-bg-subtle flex items-center justify-center\">\n <Receipt className=\"w-4 h-4 text-accent-blue\" />\n </div>\n View Transactions\n </button>\n <button\n onClick={() =>\n currentAccount && navigateTo(`/creditTransactions/${currentAccount.id}`)\n }\n disabled={!currentAccount}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n <div className=\"w-8 h-8 rounded bg-status-warning-bg-subtle flex items-center justify-center\">\n <Wallet className=\"w-4 h-4 text-status-warning-text\" />\n </div>\n Credit History\n </button>\n <button\n onClick={() => navigateTo('/checkout/credits')}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors\"\n >\n <div className=\"w-8 h-8 rounded bg-status-success-bg-subtle flex items-center justify-center\">\n <Coins className=\"w-4 h-4 text-status-success-text\" />\n </div>\n Purchase Credits\n </button>\n <button\n onClick={() =>\n currentAccount && navigateTo(`/usage?billingAccountId=${currentAccount.id}`)\n }\n disabled={!currentAccount}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n <div className=\"w-8 h-8 rounded bg-accent-violet-subtle flex items-center justify-center\">\n <Activity className=\"w-4 h-4 text-accent-violet\" />\n </div>\n Usage Analytics\n </button>\n </div>\n </section>\n\n {/ Get Started (if no subscription) /}\n {!hasActiveSubscription && (\n <section className=\"border border-border rounded-lg bg-gradient-to-br from-primary/5 to-primary/10 p-4\">\n <div className=\"flex items-start gap-3 mb-4\">\n <div className=\"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0\">\n <Sparkles className=\"w-5 h-5 text-primary\" />\n </div>\n <div>\n <h3 className=\"font-semibold text-foreground\">Get Started</h3>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Choose a plan that fits your needs to unlock all features\n </p>\n </div>\n </div>\n <button\n onClick={() => navigateTo('/plans')}\n className=\"w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors\"\n >\n Browse Plans\n <ArrowRight className=\"w-4 h-4\" />\n </button>\n </section>\n )}\n </div>\n </div>\n\n {/ Recommended Addons (only if has subscription) - Limited to 3 with cart support /}\n <RecommendedAddonsSection\n addons={recommendedAddons}\n hasSubscription={hasActiveSubscription}\n onViewAddon={(addonId) => navigateTo(`/addons/${addonId}`)}\n onPurchaseAddon={(addonId) => navigateTo(`/addons/${addonId}?action=purchase`)}\n onViewAllAddons={() => navigateTo('/addons')}\n onAddToCart={handleAddToCart}\n isInCart={handleIsInCart}\n getCartQuantity={handleGetCartQuantity}\n onUpdateQuantity={handleUpdateQuantity}\n onRemoveFromCart={handleRemoveFromCart}\n maxAddons={3}\n isLoading={isLoadingAddons}\n />\n\n {/ Floating Cart Drawer - shows when items are in cart /}\n <FloatingCartDrawer />\n\n {/ Create Billing Account Modal /}\n <CreateBillingAccountModal\n isOpen={isCreateModalOpen}\n onClose={() => {\n setIsCreateModalOpen(false);\n setCreateError(null);\n }}\n onSubmit={handleCreateAccount}\n isSubmitting={isCreatingAccount}\n error={createError}\n />\n\n {/ Add Payment Method Modal */}\n {currentAccount && (\n <AddPaymentMethodModal\n isOpen={isAddPaymentModalOpen}\n onClose={() => setIsAddPaymentModalOpen(false)}\n billingAccountId={currentAccount.id}\n currency={currentAccount.currency}\n country={currentAccount.billingAddresses?.[0]?.country}\n onSuccess={handlePaymentMethodAdded}\n />\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"OverviewPage.js","names":[],"sources":["../../../../../src/billing/modules/dashboard/pages/OverviewPage.tsx"],"sourcesContent":["/*\n Billing Overview Page\n * Main dashboard for billing showing accounts, subscriptions, payment methods, and addons\n /\n\nimport { type FC, useState, useCallback, useEffect } from 'react';\nimport {\n Plus,\n Building2,\n RefreshCw,\n Loader2,\n Wallet,\n ChevronDown,\n Check,\n Activity,\n Receipt,\n ArrowRight,\n Sparkles,\n Crown,\n Coins,\n} from 'lucide-react';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { StatCard } from '../../../shared/components/StatCard';\nimport { EmptyState } from '../../../shared/components/EmptyState';\nimport { ServerError } from '../../../shared/components/ServerError';\nimport { AccessDenied } from '../../../shared/components/AccessDenied';\nimport { isServerError } from '../../../shared/utils';\nimport { useBillingOverviewData, useDashboardMutations } from '../hooks';\nimport {\n BillingAccountCard,\n PaymentMethodsSection,\n ActiveSubscriptionCard,\n RecommendedAddonsSection,\n CreateBillingAccountModal,\n AddPaymentMethodModal,\n} from '../components';\nimport { useAddonCartStore } from '../../addons/store/addonCartStore';\nimport { FloatingCartDrawer } from '../../addons/components/FloatingCartDrawer';\nimport {\n getStoredBillingAccountId,\n setStoredBillingAccountId,\n} from '../../../hooks/useBillingAccountSelection';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport type {\n BillingAccount,\n CreateBillingAccountInput,\n SetBillingAddressInput,\n Addon,\n} from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nexport const OverviewPage: FC = () => {\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 { navigate, basePath, orgId, productId } = useBilling();\n const permissions = useBillingPermissions();\n const { emit } = useBillingEventEmitter();\n\n const [selectedAccountId, setSelectedAccountIdState] = useState<string \| null>(() =>\n getStoredBillingAccountId(orgId)\n );\n\n const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);\n const [createError, setCreateError] = useState<string \| null>(null);\n const [isAccountSelectorOpen, setIsAccountSelectorOpen] = useState(false);\n const [isAddPaymentModalOpen, setIsAddPaymentModalOpen] = useState(false);\n const [selectedSubscriptionIndex, setSelectedSubscriptionIndex] = useState(0);\n const [isSubscriptionSelectorOpen, setIsSubscriptionSelectorOpen] = useState(false);\n\n const {\n billingAccounts,\n currentAccount,\n paymentMethods,\n activeSubscriptions,\n hasActiveSubscription,\n recommendedAddons,\n isLoading,\n error,\n refetchAll,\n } = useBillingOverviewData(selectedAccountId, productId);\n\n const currentAccountId = currentAccount?.id;\n const isLoadingAddons = isLoading;\n\n const setSelectedAccountId = useCallback(\n (accountId: string \| null) => {\n setSelectedAccountIdState(accountId);\n setStoredBillingAccountId(orgId, accountId);\n },\n [orgId]\n );\n\n // Addon cart store for add to cart functionality\n const { addToCart, isInCart, getCartItem, updateQuantity, removeFromCart } = useAddonCartStore();\n\n const {\n createBillingAccount,\n setBillingAddress,\n setDefaultPaymentMethod,\n deletePaymentMethod,\n isCreatingAccount,\n } = useDashboardMutations();\n\n // Reset subscription selector when account changes or subscriptions change\n useEffect(() => {\n setSelectedSubscriptionIndex(0);\n setIsSubscriptionSelectorOpen(false);\n }, [currentAccountId, activeSubscriptions.length]);\n\n useEffect(() => {\n if (selectedAccountId && billingAccounts.length > 0) {\n const accountExists = billingAccounts.some((account) => account.id === selectedAccountId);\n if (!accountExists) {\n setSelectedAccountId(null);\n }\n }\n }, [billingAccounts, selectedAccountId, setSelectedAccountId]);\n\n useEffect(() => {\n if (!selectedAccountId && billingAccounts.length > 0) {\n const defaultAccount =\n billingAccounts.find((account) => account.isDefault) ?? billingAccounts[0];\n setSelectedAccountId(defaultAccount.id);\n }\n }, [billingAccounts, selectedAccountId, setSelectedAccountId]);\n\n // Derive selected subscription from active subscriptions\n const selectedSubscription =\n activeSubscriptions[selectedSubscriptionIndex] \|\| activeSubscriptions[0] \|\| null;\n\n // Helper for navigation - properly joins basePath and path\n const navigateTo = useCallback(\n (path: string) => {\n // Handle path joining to avoid double slashes (e.g., / + /plans = //plans)\n let fullPath = path;\n if (basePath && basePath !== '/') {\n // Remove trailing slash from basePath and leading slash from path if needed\n const base = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;\n const suffix = path.startsWith('/') ? path : `/${path}`;\n fullPath = `${base}${suffix}`;\n }\n navigate(fullPath);\n },\n [navigate, basePath]\n );\n\n // Handlers\n const handleCreateAccount = useCallback(\n async (\n input: CreateBillingAccountInput,\n address?: Omit<SetBillingAddressInput, 'billingAccountId'>\n ) => {\n setCreateError(null);\n try {\n const newAccount = await createBillingAccount(input);\n\n // If address data provided, set the billing address\n if (address && newAccount.id) {\n await setBillingAddress({\n billingAccountId: newAccount.id,\n ...address,\n });\n }\n\n setIsCreateModalOpen(false);\n setSelectedAccountId(newAccount.id);\n emit('billing.billing_account.created', {\n route: '/billing/overview',\n entityId: newAccount.id,\n source: 'overview',\n });\n await refetchAll();\n } catch (err) {\n setCreateError(err instanceof Error ? err.message : 'Failed to create billing account');\n }\n },\n [createBillingAccount, emit, refetchAll, setBillingAddress, setSelectedAccountId]\n );\n\n const handleAddPaymentMethod = useCallback(() => {\n setIsAddPaymentModalOpen(true);\n }, []);\n\n // Helper to refetch the current account data\n const refetchCurrentAccount = useCallback(async () => {\n await refetchAll();\n }, [refetchAll]);\n\n const handlePaymentMethodAdded = useCallback(async () => {\n emit('billing.payment_method.added', {\n route: '/billing/overview',\n entityId: currentAccountId,\n source: 'overview',\n });\n await refetchCurrentAccount();\n }, [currentAccountId, emit, refetchCurrentAccount]);\n\n const handleSetDefaultPaymentMethod = useCallback(\n async (id: string) => {\n if (!currentAccountId) return;\n await setDefaultPaymentMethod(id, currentAccountId);\n emit('billing.payment_method.default_set', {\n route: '/billing/overview',\n entityId: id,\n source: 'overview',\n });\n await refetchCurrentAccount();\n },\n [currentAccountId, emit, setDefaultPaymentMethod, refetchCurrentAccount]\n );\n\n const handleDeletePaymentMethod = useCallback(\n async (id: string) => {\n if (!currentAccountId) return;\n await deletePaymentMethod(id, currentAccountId);\n emit('billing.payment_method.deleted', {\n route: '/billing/overview',\n entityId: id,\n source: 'overview',\n });\n await refetchCurrentAccount();\n },\n [currentAccountId, deletePaymentMethod, emit, refetchCurrentAccount]\n );\n\n const handleSelectAccount = useCallback(\n (account: BillingAccount) => {\n setSelectedAccountId(account.id);\n setIsAccountSelectorOpen(false);\n },\n [setSelectedAccountId]\n );\n\n const handleRefresh = useCallback(async () => {\n await refetchAll();\n }, [refetchAll]);\n\n // Handler for adding addon to cart\n const handleAddToCart = useCallback(\n (addon: Addon) => {\n addToCart(addon);\n },\n [addToCart]\n );\n\n // Handler to check if addon is in cart\n const handleIsInCart = useCallback(\n (addonId: string) => {\n return isInCart(addonId);\n },\n [isInCart]\n );\n\n // Handler to get cart quantity for addon\n const handleGetCartQuantity = useCallback(\n (addonId: string) => {\n const item = getCartItem(addonId);\n return item?.quantity \|\| 0;\n },\n [getCartItem]\n );\n\n // Handler to update quantity in cart\n const handleUpdateQuantity = useCallback(\n (addonId: string, quantity: number) => {\n if (quantity <= 0) {\n removeFromCart(addonId);\n } else {\n updateQuantity(addonId, quantity);\n }\n },\n [updateQuantity, removeFromCart]\n );\n\n // Handler to remove from cart\n const handleRemoveFromCart = useCallback(\n (addonId: string) => {\n removeFromCart(addonId);\n },\n [removeFromCart]\n );\n\n // Permission check - must be after all hooks are defined\n if (!permissions.canViewBillingAccount) {\n return <AccessDenied message=\"You don't have permission to view billing information.\" />;\n }\n\n // Error state\n if (error && isServerError(error) && !isLoading) {\n return (\n <div className=\"p-6\">\n <ServerError\n title=\"Server Unavailable\"\n message=\"Unable to load billing overview. The server might be down or experiencing issues.\"\n onRetry={handleRefresh}\n showRetry\n />\n </div>\n );\n }\n\n // Loading state\n if (isLoading && !currentAccount) {\n return (\n <div className=\"flex items-center justify-center min-h-[400px]\">\n <div className=\"flex flex-col items-center gap-3\">\n <Loader2 className=\"w-8 h-8 animate-spin text-primary\" />\n <p className=\"text-sm text-muted-foreground\">\n {tr('billing.overview.loadingInfo', 'Loading billing information...')}\n </p>\n </div>\n </div>\n );\n }\n\n // No billing accounts state\n if (!isLoading && billingAccounts.length === 0) {\n return (\n <div className=\"p-6\">\n <header className=\"mb-8\">\n <h1 className=\"text-2xl font-bold text-foreground\">\n {tr('billing.overview.title', 'Billing Overview')}\n </h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n {tr(\n 'billing.overview.emptySetupDescription',\n 'Set up billing to manage subscriptions, payments, and invoices'\n )}\n </p>\n </header>\n <EmptyState\n icon={<Building2 className=\"w-6 h-6 text-muted-foreground\" />}\n title={tr('billing.overview.emptyTitle', 'No billing account')}\n description={tr(\n 'billing.overview.emptyDescription',\n 'Create a billing account to start managing your subscriptions and payments'\n )}\n action={\n permissions.canManageBillingAccount ? (\n <button\n onClick={() => setIsCreateModalOpen(true)}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors\"\n >\n <Plus className=\"w-4 h-4\" />\n {tr('billing.overview.createBillingAccount', 'Create Billing Account')}\n </button>\n ) : undefined\n }\n />\n\n <CreateBillingAccountModal\n isOpen={isCreateModalOpen}\n onClose={() => {\n setIsCreateModalOpen(false);\n setCreateError(null);\n }}\n onSubmit={handleCreateAccount}\n isSubmitting={isCreatingAccount}\n error={createError}\n />\n </div>\n );\n }\n\n return (\n <div className=\"p-4 sm:p-6 space-y-6 sm:space-y-8\">\n {/ Header /}\n <header className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4\">\n <div>\n <h1 className=\"text-2xl font-bold text-foreground\">\n {tr('billing.overview.title', 'Billing Overview')}\n </h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n {tr(\n 'billing.overview.description',\n 'Manage your billing accounts, subscriptions, and payment methods'\n )}\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n <button\n onClick={handleRefresh}\n className=\"p-2 rounded-lg border border-border hover:bg-muted text-muted-foreground hover:text-foreground transition-colors\"\n aria-label={tr('billing.overview.refresh', 'Refresh')}\n >\n <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />\n </button>\n {permissions.canManageBillingAccount && billingAccounts.length > 0 && (\n <button\n onClick={() => setIsCreateModalOpen(true)}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors\"\n >\n <Plus className=\"w-4 h-4\" />\n <span className=\"hidden sm:inline\">\n {tr('billing.overview.newAccount', 'New Account')}\n </span>\n </button>\n )}\n </div>\n </header>\n\n {/ Account Selector (if multiple accounts) /}\n {billingAccounts.length > 1 && (\n <div className=\"relative\">\n <button\n onClick={() => setIsAccountSelectorOpen(!isAccountSelectorOpen)}\n className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n <Building2 className=\"w-4 h-4 text-primary\" />\n </div>\n <div className=\"text-left\">\n <p className=\"text-sm font-medium text-foreground\">\n {currentAccount?.name \|\| tr('billing.overview.selectAccount', 'Select Account')}\n </p>\n <p className=\"text-xs text-muted-foreground\">{currentAccount?.email}</p>\n </div>\n </div>\n <ChevronDown\n className={`w-4 h-4 text-muted-foreground transition-transform ${isAccountSelectorOpen ? 'rotate-180' : ''}`}\n />\n </button>\n\n {isAccountSelectorOpen && (\n <>\n <div className=\"fixed inset-0 z-10\" onClick={() => setIsAccountSelectorOpen(false)} />\n <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n {billingAccounts.map((account) => (\n <button\n key={account.id}\n onClick={() => handleSelectAccount(account)}\n className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n <Building2 className=\"w-4 h-4 text-muted-foreground\" />\n </div>\n <div className=\"text-left min-w-0\">\n <p className=\"text-sm font-medium text-foreground truncate\">\n {account.name}\n </p>\n <p className=\"text-xs text-muted-foreground truncate\">{account.email}</p>\n </div>\n </div>\n {currentAccount?.id === account.id && (\n <Check className=\"w-4 h-4 text-primary flex-shrink-0\" />\n )}\n </button>\n ))}\n </div>\n </>\n )}\n </div>\n )}\n\n {/ Stats Row /}\n {currentAccount && (\n <div className=\"grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4\">\n <StatCard\n label={tr('billing.overview.stats.creditBalance', 'Credit Balance')}\n value={`${(currentAccount.creditAmount \|\| 0).toLocaleString()} Credits`}\n icon={<Wallet className=\"w-5 h-5\" />}\n />\n <StatCard\n label={tr('billing.overview.stats.activePlans', 'Active Plans')}\n value={\n activeSubscriptions.length > 0\n ? activeSubscriptions.length === 1\n ? activeSubscriptions[0]?.plan?.name \|\| '1 Plan'\n : `${activeSubscriptions.length} ${tr('billing.overview.stats.plansSuffix', 'Plans')}`\n : tr('billing.overview.stats.none', 'None')\n }\n icon={<RefreshCw className=\"w-5 h-5\" />}\n />\n <StatCard\n label={tr('billing.overview.stats.paymentMethods', 'Payment Methods')}\n value={paymentMethods.length}\n icon={<Building2 className=\"w-5 h-5\" />}\n />\n <StatCard\n label={tr('billing.overview.stats.paymentCurrency', 'Payment Currency')}\n value={currentAccount.currency \|\| 'USD'}\n icon={<Building2 className=\"w-5 h-5\" />}\n />\n </div>\n )}\n\n {/ Main Content Grid /}\n <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n {/ Left Column - Billing Account & Subscription /}\n <div className=\"lg:col-span-2 space-y-6\">\n {/ Billing Account Card /}\n {currentAccount && (\n <BillingAccountCard\n account={currentAccount}\n isDefault={currentAccount.isDefault ?? false}\n onEdit={() =>\n currentAccount && navigateTo(`/settings?billingAccountId=${currentAccount.id}`)\n }\n onViewTransactions={() => navigateTo(`/transactions/${currentAccount.id}`)}\n onViewCreditTransactions={() =>\n navigateTo(`/creditTransactions/${currentAccount.id}`)\n }\n />\n )}\n\n {/ Active Subscriptions /}\n <div className=\"space-y-3\">\n {/ Subscription Selector (if multiple subscriptions) /}\n {activeSubscriptions.length > 1 && (\n <div className=\"relative\">\n <button\n onClick={() => setIsSubscriptionSelectorOpen(!isSubscriptionSelectorOpen)}\n className=\"w-full sm:w-auto flex items-center justify-between gap-3 px-4 py-3 border border-border rounded-lg bg-card hover:bg-muted/50 transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <div className=\"w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center\">\n <Crown className=\"w-4 h-4 text-primary\" />\n </div>\n <div className=\"text-left\">\n <p className=\"text-sm font-medium text-foreground\">\n {selectedSubscription?.plan?.name \|\|\n tr('billing.overview.selectSubscription', 'Select Subscription')}\n {selectedSubscription?.plan?.product?.name && (\n <span className=\"text-muted-foreground font-normal\">\n {' '}\n · {selectedSubscription.plan.product.name}\n </span>\n )}\n </p>\n <p className=\"text-xs text-muted-foreground\">\n {activeSubscriptions.length}{' '}\n {tr('billing.overview.activeSubscriptions', 'active subscriptions')}\n </p>\n </div>\n </div>\n <ChevronDown\n className={`w-4 h-4 text-muted-foreground transition-transform ${isSubscriptionSelectorOpen ? 'rotate-180' : ''}`}\n />\n </button>\n\n {isSubscriptionSelectorOpen && (\n <>\n <div\n className=\"fixed inset-0 z-10\"\n onClick={() => setIsSubscriptionSelectorOpen(false)}\n />\n <div className=\"absolute top-full left-0 right-0 sm:right-auto mt-1 w-full sm:w-80 bg-popover border border-border rounded-lg shadow-lg z-20 py-1 max-h-60 overflow-y-auto\">\n {activeSubscriptions.map((subscription, index) => (\n <button\n key={subscription.id}\n onClick={() => {\n setSelectedSubscriptionIndex(index);\n setIsSubscriptionSelectorOpen(false);\n }}\n className=\"w-full flex items-center justify-between gap-3 px-4 py-3 hover:bg-muted transition-colors\"\n >\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-lg bg-muted flex items-center justify-center flex-shrink-0\">\n <Crown className=\"w-4 h-4 text-muted-foreground\" />\n </div>\n <div className=\"text-left min-w-0\">\n <p className=\"text-sm font-medium text-foreground truncate\">\n {subscription.plan?.name \|\|\n tr('billing.overview.subscription', 'Subscription')}\n </p>\n <p className=\"text-xs text-muted-foreground truncate\">\n {subscription.plan?.product?.name \|\|\n tr('billing.overview.unknownProduct', 'Unknown Product')}{' '}\n · {tr('billing.overview.ends', 'Ends')}{' '}\n {new Date(subscription.endDate).toLocaleDateString()}\n </p>\n </div>\n </div>\n {selectedSubscriptionIndex === index && (\n <Check className=\"w-4 h-4 text-primary flex-shrink-0\" />\n )}\n </button>\n ))}\n </div>\n </>\n )}\n </div>\n )}\n\n {/ Single Subscription Card /}\n <ActiveSubscriptionCard\n subscription={selectedSubscription}\n onViewDetails={() =>\n selectedSubscription &&\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${selectedSubscription.id}`,\n selectedSubscription.billingAccountId ?? currentAccount?.id\n )\n )\n }\n onUpgrade={() =>\n selectedSubscription &&\n navigateTo(\n withBillingAccountId(\n `/subscriptions/${selectedSubscription.id}/upgrade`,\n selectedSubscription.billingAccountId ?? currentAccount?.id\n )\n )\n }\n onManage={() =>\n currentAccount && navigateTo(`/subscriptions?billingAccountId=${currentAccount.id}`)\n }\n onPurchasePlan={() => navigateTo('/plans')}\n />\n </div>\n\n {/ Payment Methods /}\n {currentAccount && (\n <PaymentMethodsSection\n paymentMethods={paymentMethods}\n billingAccountId={currentAccount.id}\n onAddPaymentMethod={handleAddPaymentMethod}\n onSetDefault={handleSetDefaultPaymentMethod}\n onDelete={handleDeletePaymentMethod}\n isLoading={isLoading}\n />\n )}\n </div>\n\n {/ Right Column - Quick Actions & Info /}\n <div className=\"space-y-6\">\n {/ Quick Actions /}\n <section className=\"border border-border rounded-lg bg-card p-4\">\n <h3 className=\"font-semibold text-foreground mb-4\">Quick Actions</h3>\n <div className=\"space-y-2\">\n <button\n onClick={() => currentAccount && navigateTo(`/transactions/${currentAccount.id}`)}\n disabled={!currentAccount}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n <div className=\"w-8 h-8 rounded bg-status-info-bg-subtle flex items-center justify-center\">\n <Receipt className=\"w-4 h-4 text-accent-blue\" />\n </div>\n View Transactions\n </button>\n <button\n onClick={() =>\n currentAccount && navigateTo(`/creditTransactions/${currentAccount.id}`)\n }\n disabled={!currentAccount}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n <div className=\"w-8 h-8 rounded bg-status-warning-bg-subtle flex items-center justify-center\">\n <Wallet className=\"w-4 h-4 text-status-warning-text\" />\n </div>\n Credit History\n </button>\n <button\n onClick={() => navigateTo('/checkout/credits')}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors\"\n >\n <div className=\"w-8 h-8 rounded bg-status-success-bg-subtle flex items-center justify-center\">\n <Coins className=\"w-4 h-4 text-status-success-text\" />\n </div>\n Purchase Credits\n </button>\n <button\n onClick={() =>\n currentAccount && navigateTo(`/usage?billingAccountId=${currentAccount.id}`)\n }\n disabled={!currentAccount}\n className=\"w-full flex items-center gap-3 px-3 py-2.5 text-sm text-left text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n <div className=\"w-8 h-8 rounded bg-accent-violet-subtle flex items-center justify-center\">\n <Activity className=\"w-4 h-4 text-accent-violet\" />\n </div>\n Usage Analytics\n </button>\n </div>\n </section>\n\n {/ Get Started (if no subscription) /}\n {!hasActiveSubscription && (\n <section className=\"border border-border rounded-lg bg-gradient-to-br from-primary/5 to-primary/10 p-4\">\n <div className=\"flex items-start gap-3 mb-4\">\n <div className=\"w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0\">\n <Sparkles className=\"w-5 h-5 text-primary\" />\n </div>\n <div>\n <h3 className=\"font-semibold text-foreground\">Get Started</h3>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Choose a plan that fits your needs to unlock all features\n </p>\n </div>\n </div>\n <button\n onClick={() => navigateTo('/plans')}\n className=\"w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium text-primary-foreground bg-primary rounded-lg hover:bg-primary/90 transition-colors\"\n >\n Browse Plans\n <ArrowRight className=\"w-4 h-4\" />\n </button>\n </section>\n )}\n </div>\n </div>\n\n {/ Recommended Addons (only if has subscription) - Limited to 3 with cart support /}\n <RecommendedAddonsSection\n addons={recommendedAddons}\n hasSubscription={hasActiveSubscription}\n onViewAddon={(addonId) => navigateTo(`/addons/${addonId}`)}\n onPurchaseAddon={(addonId) => navigateTo(`/addons/${addonId}?action=purchase`)}\n onViewAllAddons={() => navigateTo('/addons')}\n onAddToCart={handleAddToCart}\n isInCart={handleIsInCart}\n getCartQuantity={handleGetCartQuantity}\n onUpdateQuantity={handleUpdateQuantity}\n onRemoveFromCart={handleRemoveFromCart}\n maxAddons={3}\n isLoading={isLoadingAddons}\n />\n\n {/ Floating Cart Drawer - shows when items are in cart /}\n <FloatingCartDrawer />\n\n {/ Create Billing Account Modal /}\n <CreateBillingAccountModal\n isOpen={isCreateModalOpen}\n onClose={() => {\n setIsCreateModalOpen(false);\n setCreateError(null);\n }}\n onSubmit={handleCreateAccount}\n isSubmitting={isCreatingAccount}\n error={createError}\n />\n\n {/ Add Payment Method Modal */}\n {currentAccount && (\n <AddPaymentMethodModal\n isOpen={isAddPaymentModalOpen}\n onClose={() => setIsAddPaymentModalOpen(false)}\n billingAccountId={currentAccount.id}\n currency={currentAccount.currency}\n country={currentAccount.billingAddresses?.[0]?.country}\n onSuccess={handlePaymentMethodAdded}\n />\n )}\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/billing/modules/discounts/pages/DiscountsListPage.js CHANGED Viewed

@@ -246,9 +246,9 @@ var g = {
 				]
 			}),
 			/* @__PURE__ */ d("div", {
-				className: "flex flex-wrap items-center gap-4 pb-4 border-b border-border",
+				className: "flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center gap-3 sm:gap-4 pb-4 border-b border-border",
 				children: /* @__PURE__ */ f("div", {
-					className: "relative flex-1 min-w-[200px] max-w-md",
+					className: "relative flex-1 min-w-0 w-full sm:max-w-md",
 					children: [/* @__PURE__ */ d("svg", {
 						className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground",
 						fill: "none",