@datatechsolutions/ui 3.3.0 → 3.5.0

package/dist/chunk-NKXQYFS7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/platform/billing/billing-panel.tsx"],"names":["useTranslations","useFormatter","useAuth","useState","useCallback","useEffect","triggerHaptic","jsx","InlineSpinner","jsxs","SectionCard","StatusBadge","Badge","Button","ListCard","ListCardItem"],"mappings":";;;;;;;;AAyCA,IAAM,UAAA,GAA+C;AAAA,EACnD,UAAA,EAAY,CAAA;AAAA,EACZ,OAAA,EAAS,CAAA;AAAA,EACT,YAAA,EAAc,CAAA;AAAA,EACd,UAAA,EAAY;AACd,CAAA;AAEO,SAAS,YAAA,CAAa;AAAA,EAC3B,sBAAA,GAAyB,SAAA;AAAA,EACzB;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,CAAA,GAAIA,iCAAgB,UAAU,CAAA;AACpC,EAAA,MAAM,SAASC,6BAAA,EAAa;AAC5B,EAAA,MAAM,EAAE,MAAA,EAAO,GAAIC,wBAAA,EAAQ;AAE3B,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAqC,IAAI,CAAA;AACjF,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,cAAA,CAA2B,EAAE,CAAA;AACvD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAS,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAwB,IAAI,CAAA;AACtD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAEhE,EAAA,MAAM,QAAA,GAAWC,iBAAA,CAAY,CAAC,GAAA,KAAgB;AAC5C,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,UAAA,CAAW,GAAG,CAAA;AAAA,IAChB,CAAA,MAAA,IAAW,OAAO,MAAA,KAAW,WAAA,EAAa;AACxC,MAAA,MAAA,CAAO,QAAA,CAAS,OAAO,GAAG,CAAA;AAAA,IAC5B;AAAA,EACF,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,IAAA,GAAOA,kBAAY,YAAY;AACnC,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAA,QAAA,CAAS,IAAI,CAAA;AACb,IAAA,IAAI;AACF,MAAA,MAAM,CAAC,GAAA,EAAK,cAAc,CAAA,GAAI,MAAM,QAAQ,GAAA,CAAI;AAAA,QAC9C,OAAO,eAAA,EAAgB;AAAA,QACvB,OAAO,QAAA;AAAS,OACjB,CAAA;AACD,MAAA,eAAA,CAAgB,GAAG,CAAA;AACnB,MAAA,QAAA;AAAA,QACE,CAAC,GAAG,cAAc,CAAA,CACf,OAAO,CAAC,IAAA,KAA8B,IAAA,CAAK,MAAM,CAAA,CACjD,IAAA;AAAA,UACC,CAAC,CAAA,EAA+B,CAAA,KAAA,CAC7B,UAAA,CAAW,CAAA,CAAE,IAAI,CAAA,IAAK,CAAA,KAAM,UAAA,CAAW,CAAA,CAAE,IAAI,CAAA,IAAK,CAAA;AAAA;AACvD,OACJ;AAAA,IACF,SAAS,SAAA,EAAW;AAClB,MAAA,QAAA,CAAS,qBAAqB,KAAA,GAAQ,SAAA,CAAU,OAAA,GAAU,MAAA,CAAO,SAAS,CAAC,CAAA;AAAA,IAC7E,CAAA,SAAE;AACA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,KAAK,IAAA,EAAK;AAAA,EACZ,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,gBAAA,GAAmBD,kBAAY,YAAY;AAC/C,IAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,IAAAE,8BAAA,CAAc,OAAO,CAAA;AACrB,IAAA,IAAI;AACF,MAAA,MAAM,EAAE,GAAA,EAAI,GAAI,MAAM,OAAO,mBAAA,EAAoB;AACjD,MAAA,QAAA,CAAS,GAAG,CAAA;AAAA,IACd,SAAS,WAAA,EAAa;AACpB,MAAA,QAAA,CAAS,uBAAuB,KAAA,GAAQ,WAAA,CAAY,OAAA,GAAU,MAAA,CAAO,WAAW,CAAC,CAAA;AACjF,MAAAA,8BAAA,CAAc,OAAO,CAAA;AAAA,IACvB,CAAA,SAAE;AACA,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,QAAQ,CAAC,CAAA;AAErB,EAAA,MAAM,mBAAA,GAAsBF,iBAAA,CAAY,OAAO,QAAA,KAAqB;AAClE,IAAA,aAAA,CAAc,CAAA,SAAA,EAAY,QAAQ,CAAA,CAAE,CAAA;AACpC,IAAAE,8BAAA,CAAc,OAAO,CAAA;AACrB,IAAA,IAAI;AACF,MAAA,MAAM,EAAE,GAAA,EAAI,GAAI,MAAM,MAAA,CAAO,qBAAA,CAAsB,UAAU,sBAAsB,CAAA;AACnF,MAAA,QAAA,CAAS,GAAG,CAAA;AAAA,IACd,SAAS,aAAA,EAAe;AACtB,MAAA,QAAA,CAAS,yBAAyB,KAAA,GAAQ,aAAA,CAAc,OAAA,GAAU,MAAA,CAAO,aAAa,CAAC,CAAA;AACvF,MAAAA,8BAAA,CAAc,OAAO,CAAA;AAAA,IACvB,CAAA,SAAE;AACA,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,sBAAA,EAAwB,QAAQ,CAAC,CAAA;AAE7C,EAAA,MAAM,YAAA,GAAeF,kBAAY,YAAY;AAC3C,IAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,MAAA,MAAM,SAAA,GAAY,MAAA,CAAO,OAAA,CAAQ,CAAA,CAAE,uBAAuB,CAAC,CAAA;AAC3D,MAAA,IAAI,CAAC,SAAA,EAAW;AAAA,IAClB;AACA,IAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,IAAAE,8BAAA,CAAc,SAAS,CAAA;AACvB,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,MAAM,MAAA,CAAO,kBAAA,EAAmB;AAC/C,MAAA,IAAI,CAAC,OAAO,OAAA,EAAS;AACnB,QAAA,MAAM,IAAI,KAAA,CAAM,MAAA,CAAO,KAAA,IAAS,kCAAkC,CAAA;AAAA,MACpE;AACA,MAAAA,8BAAA,CAAc,SAAS,CAAA;AACvB,MAAA,MAAM,IAAA,EAAK;AAAA,IACb,SAAS,WAAA,EAAa;AACpB,MAAA,QAAA,CAAS,uBAAuB,KAAA,GAAQ,WAAA,CAAY,OAAA,GAAU,MAAA,CAAO,WAAW,CAAC,CAAA;AACjF,MAAAA,8BAAA,CAAc,OAAO,CAAA;AAAA,IACvB,CAAA,SAAE;AACA,MAAA,aAAA,CAAc,IAAI,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,IAAA,EAAM,CAAC,CAAC,CAAA;AAEpB,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAA,EACb,QAAA,kBAAAC,cAAA,CAACC,kCAAc,CAAA,EACjB,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,WAAA,GAAc,YAAA,EAAc,IAAA,IAAQ,KAAA,CAAM,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,CAAK,EAAA,KAAO,YAAA,EAAc,MAAM,CAAA,IAAK,IAAA;AACpG,EAAA,MAAM,WAAA,GAAc,YAAA,EAAc,IAAA,IAAQ,WAAA,EAAa,IAAA,IAAQ,IAAA;AAE/D,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACZ,QAAA,EAAA;AAAA,IAAA,KAAA,oBACCF,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAU,6IAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBAGFA,cAAA;AAAA,MAACG,4BAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ;AAAA,UACN,KAAA,EAAO,EAAE,2BAA2B,CAAA;AAAA,UACpC,QAAA,EAAU,EAAE,iCAAiC;AAAA,SAC/C;AAAA,QAEC,QAAA,EAAA,YAAA,IAAgB,WAAA,mBACfD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,WAAA,EACb,QAAA,EAAA;AAAA,0BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACb,QAAA,EAAA;AAAA,4BAAAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,qDAAA,EACb,QAAA,EAAA,WAAA,CAAY,IAAA,EACf,CAAA;AAAA,4BACAA,cAAA;AAAA,cAACI,4BAAA;AAAA,cAAA;AAAA,gBACC,MAAA,EACE,aAAa,MAAA,KAAW,QAAA,GAAW,YACjC,YAAA,CAAa,MAAA,KAAW,aAAa,SAAA,GACrC,OAAA;AAAA,gBAEJ,KAAA,EAAO,CAAA,CAAE,CAAA,eAAA,EAAkB,YAAA,CAAa,MAAM,CAAA,CAAE;AAAA;AAAA,aAClD;AAAA,YACC,YAAA,CAAa,qCACZJ,cAAA,CAACK,sBAAA,EAAA,EAAM,OAAM,OAAA,EAAS,QAAA,EAAA,CAAA,CAAE,uCAAuC,CAAA,EAAE;AAAA,WAAA,EAErE,CAAA;AAAA,0BAEAH,eAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,+CAAA,EACZ,QAAA,EAAA;AAAA,4BAAAA,eAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,kCAAA,EACX,QAAA,EAAA,CAAA,CAAE,2BAA2B,CAAA,EAChC,CAAA;AAAA,8BACAE,eAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2CAAA,EACX,QAAA,EAAA;AAAA,gBAAA,MAAA,CAAO,MAAA,CAAO,YAAY,KAAA,EAAO,EAAE,OAAO,UAAA,EAAY,QAAA,EAAU,WAAA,CAAY,QAAA,EAAU,CAAA;AAAA,gBACtF,GAAA;AAAA,gBAAI,GAAA;AAAA,gBAAE,GAAA;AAAA,gBACN,CAAA,CAAE,CAAA,iBAAA,EAAoB,WAAA,CAAY,QAAQ,CAAA,CAAE;AAAA,eAAA,EAC/C;AAAA,aAAA,EACF,CAAA;AAAA,YACC,YAAA,CAAa,gBAAA,oBACZA,eAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,kCAAA,EACX,QAAA,EAAA,CAAA,CAAE,8BAA8B,CAAA,EACnC,CAAA;AAAA,8BACAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2CAAA,EACX,iBAAO,QAAA,CAAS,IAAI,IAAA,CAAK,YAAA,CAAa,gBAAgB,CAAA,EAAG,EAAE,SAAA,EAAW,QAAA,EAAU,CAAA,EACnF;AAAA,aAAA,EACF;AAAA,WAAA,EAEJ,CAAA;AAAA,0BAEAE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACb,QAAA,EAAA;AAAA,4BAAAF,cAAA;AAAA,cAACM,uBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,IAAA;AAAA,gBACL,KAAA,EAAM,gBAAA;AAAA,gBACN,OAAA,EAAS,gBAAA;AAAA,gBACT,SAAS,UAAA,KAAe,QAAA;AAAA,gBACxB,UAAU,UAAA,KAAe,IAAA;AAAA,gBAExB,YAAE,oCAAoC;AAAA;AAAA,aACzC;AAAA,YACC,YAAA,CAAa,MAAA,KAAW,QAAA,IAAY,CAAC,aAAa,iBAAA,oBACjDN,cAAA;AAAA,cAACM,uBAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,IAAA;AAAA,gBACL,KAAA,EAAM,eAAA;AAAA,gBACN,OAAA,EAAS,YAAA;AAAA,gBACT,SAAS,UAAA,KAAe,QAAA;AAAA,gBACxB,UAAU,UAAA,KAAe,IAAA;AAAA,gBAExB,YAAE,4BAA4B;AAAA;AAAA;AACjC,WAAA,EAEJ;AAAA,SAAA,EACF,oBAEAN,cAAA,CAAC,GAAA,EAAA,EAAE,WAAU,0CAAA,EACV,QAAA,EAAA,CAAA,CAAE,oCAAoC,CAAA,EACzC;AAAA;AAAA,KAEJ;AAAA,oBAEAA,cAAA;AAAA,MAACG,4BAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ;AAAA,UACN,KAAA,EAAO,EAAE,qBAAqB,CAAA;AAAA,UAC9B,QAAA,EAAU,EAAE,2BAA2B;AAAA,SACzC;AAAA,QAEC,gBAAM,MAAA,KAAW,CAAA,mBAChBH,cAAA,CAAC,GAAA,EAAA,EAAE,WAAU,0CAAA,EACV,QAAA,EAAA,CAAA,CAAE,qBAAqB,CAAA,EAC1B,oBAEAA,cAAA,CAACO,yBAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,UAAA,MAAM,SAAA,GAAY,WAAA,EAAa,EAAA,KAAO,IAAA,CAAK,EAAA;AAC3C,UAAA,MAAM,WAAA,GAAc,WAAA,IAAe,IAAA,IAAA,CAC7B,UAAA,CAAW,IAAA,CAAK,IAAI,CAAA,IAAK,CAAA,KAAM,UAAA,CAAW,WAAW,CAAA,IAAK,CAAA,CAAA;AAChE,UAAA,uBACEP,cAAA;AAAA,YAACQ,6BAAA;AAAA,YAAA;AAAA,cAEC,OAAA,kBACER,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kJACb,QAAA,kBAAAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAA,IAAA,CAAK,IAAA,CAAK,MAAA,CAAO,CAAC,GAAE,CAAA,EACrE,CAAA;AAAA,cAEF,QAAA,EACE,SAAA,mBACEA,cAAA,CAACK,sBAAA,EAAA,EAAM,KAAA,EAAM,SAAS,QAAA,EAAA,CAAA,CAAE,4BAA4B,CAAA,EAAE,CAAA,GAEtD,WAAA,mBACEL,cAAA;AAAA,gBAACM,uBAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,IAAA;AAAA,kBACL,KAAA,EAAK,IAAA;AAAA,kBACL,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAA,CAAK,IAAI,CAAA;AAAA,kBAC5C,OAAA,EAAS,UAAA,KAAe,CAAA,SAAA,EAAY,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,kBAC7C,UAAU,UAAA,KAAe,IAAA;AAAA,kBAExB,YAAE,+BAA+B;AAAA;AAAA,eACpC,mBAEAN,cAAA;AAAA,gBAACM,uBAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,IAAA;AAAA,kBACL,KAAA,EAAM,gBAAA;AAAA,kBACN,OAAA,EAAS,MAAM,mBAAA,CAAoB,IAAA,CAAK,IAAI,CAAA;AAAA,kBAC5C,OAAA,EAAS,UAAA,KAAe,CAAA,SAAA,EAAY,IAAA,CAAK,IAAI,CAAA,CAAA;AAAA,kBAC7C,UAAU,UAAA,KAAe,IAAA;AAAA,kBAExB,YAAE,4BAA4B;AAAA;AAAA,eACjC;AAAA,cAKN,QAAA,kBAAAJ,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACb,QAAA,EAAA;AAAA,gCAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,kCAAAF,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,mDAAA,EACV,QAAA,EAAA,IAAA,CAAK,IAAA,EACR,CAAA;AAAA,kCACAE,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,MAAA,CAAO,MAAA,CAAO,KAAK,KAAA,EAAO,EAAE,OAAO,UAAA,EAAY,QAAA,EAAU,IAAA,CAAK,QAAA,EAAU,CAAA;AAAA,oBACxE,GAAA;AAAA,oBAAI,GAAA;AAAA,oBAAE,GAAA;AAAA,oBACN,CAAA,CAAE,CAAA,iBAAA,EAAoB,IAAA,CAAK,QAAQ,CAAA,CAAE;AAAA,mBAAA,EACxC;AAAA,iBAAA,EACF,CAAA;AAAA,gBACC,KAAK,WAAA,oBACJF,cAAA,CAAC,OAAE,SAAA,EAAU,0CAAA,EACV,eAAK,WAAA,EACR;AAAA,eAAA,EAEJ;AAAA,aAAA;AAAA,YAlDK,IAAA,CAAK;AAAA,WAmDZ;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAEJ,GAAA,EACF,CAAA;AAEJ","file":"chunk-NKXQYFS7.js","sourcesContent":["// =============================================================================\n// @datatechsolutions/windsock/ui — BillingPanel\n// Shows the current organization subscription plus the plan catalogue, with\n// actions for opening the Stripe portal, starting checkout, or cancelling.\n// Backed by `AuthClient.getSubscription / getPlans / createPortalSession /\n// createCheckoutSession / cancelSubscription`.\n// =============================================================================\n\nimport { useEffect, useState, useCallback } from 'react'\nimport { useTranslations, useFormatter } from '@ui/lib/i18n-context'\nimport {\n  SectionCard,\n  Button,\n  Badge,\n  StatusBadge,\n  InlineSpinner,\n  ListCard,\n  ListCardItem,\n  triggerHaptic,\n} from '@ui/index'\nimport type {\n  SubscriptionDetails,\n  PlanDefinition,\n  SubscriptionTier,\n} from '@datatechsolutions/shared-domain'\nimport { useAuth } from '../../_auth'\n\nexport interface BillingPanelProps {\n  /**\n   * Which billing interval to prefer when starting checkout. Defaults to\n   * `'monthly'`. Surface a toggle in the host app if both matter.\n   */\n  defaultBillingInterval?: 'monthly' | 'yearly'\n  /**\n   * Called after the portal/checkout URL is resolved. Defaults to\n   * `window.location.assign(url)`. Override to open in a new tab, use a\n   * router, etc.\n   */\n  onRedirect?: (url: string) => void\n}\n\nconst TIER_ORDER: Record<SubscriptionTier, number> = {\n  free_trial: 0,\n  starter: 1,\n  professional: 2,\n  enterprise: 3,\n}\n\nexport function BillingPanel({\n  defaultBillingInterval = 'monthly',\n  onRedirect,\n}: BillingPanelProps) {\n  const t = useTranslations('windsock')\n  const format = useFormatter()\n  const { client } = useAuth()\n\n  const [subscription, setSubscription] = useState<SubscriptionDetails | null>(null)\n  const [plans, setPlans] = useState<PlanDefinition[]>([])\n  const [isLoading, setIsLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n  const [busyAction, setBusyAction] = useState<string | null>(null)\n\n  const redirect = useCallback((url: string) => {\n    if (onRedirect) {\n      onRedirect(url)\n    } else if (typeof window !== 'undefined') {\n      window.location.assign(url)\n    }\n  }, [onRedirect])\n\n  const load = useCallback(async () => {\n    setIsLoading(true)\n    setError(null)\n    try {\n      const [sub, availablePlans] = await Promise.all([\n        client.getSubscription(),\n        client.getPlans(),\n      ])\n      setSubscription(sub)\n      setPlans(\n        [...availablePlans]\n          .filter((plan: { active: boolean }) => plan.active)\n          .sort(\n            (a: { tier: SubscriptionTier }, b: { tier: SubscriptionTier }) =>\n              (TIER_ORDER[a.tier] ?? 0) - (TIER_ORDER[b.tier] ?? 0),\n          ),\n      )\n    } catch (loadError) {\n      setError(loadError instanceof Error ? loadError.message : String(loadError))\n    } finally {\n      setIsLoading(false)\n    }\n  }, [client])\n\n  useEffect(() => {\n    void load()\n  }, [load])\n\n  const handleOpenPortal = useCallback(async () => {\n    setBusyAction('portal')\n    triggerHaptic('light')\n    try {\n      const { url } = await client.createPortalSession()\n      redirect(url)\n    } catch (portalError) {\n      setError(portalError instanceof Error ? portalError.message : String(portalError))\n      triggerHaptic('error')\n    } finally {\n      setBusyAction(null)\n    }\n  }, [client, redirect])\n\n  const handleStartCheckout = useCallback(async (planCode: string) => {\n    setBusyAction(`checkout:${planCode}`)\n    triggerHaptic('light')\n    try {\n      const { url } = await client.createCheckoutSession(planCode, defaultBillingInterval)\n      redirect(url)\n    } catch (checkoutError) {\n      setError(checkoutError instanceof Error ? checkoutError.message : String(checkoutError))\n      triggerHaptic('error')\n    } finally {\n      setBusyAction(null)\n    }\n  }, [client, defaultBillingInterval, redirect])\n\n  const handleCancel = useCallback(async () => {\n    if (typeof window !== 'undefined') {\n      const confirmed = window.confirm(t('billing.cancelConfirm'))\n      if (!confirmed) return\n    }\n    setBusyAction('cancel')\n    triggerHaptic('warning')\n    try {\n      const result = await client.cancelSubscription()\n      if (!result.success) {\n        throw new Error(result.error ?? 'Subscription cancellation failed')\n      }\n      triggerHaptic('success')\n      await load()\n    } catch (cancelError) {\n      setError(cancelError instanceof Error ? cancelError.message : String(cancelError))\n      triggerHaptic('error')\n    } finally {\n      setBusyAction(null)\n    }\n  }, [client, load, t])\n\n  if (isLoading) {\n    return (\n      <div className=\"flex items-center justify-center py-12\">\n        <InlineSpinner />\n      </div>\n    )\n  }\n\n  const currentPlan = subscription?.plan ?? plans.find((plan) => plan.id === subscription?.planId) ?? null\n  const currentTier = subscription?.tier ?? currentPlan?.tier ?? null\n\n  return (\n    <div className=\"space-y-6\">\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"rounded-xl border border-red-300/40 bg-red-50/80 px-4 py-3 text-sm text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300\"\n        >\n          {error}\n        </div>\n      )}\n\n      <SectionCard\n        header={{\n          title: t('billing.currentPlan.title'),\n          subtitle: t('billing.currentPlan.description'),\n        }}\n      >\n        {subscription && currentPlan ? (\n          <div className=\"space-y-4\">\n            <div className=\"flex flex-wrap items-center gap-3\">\n              <span className=\"text-lg font-semibold text-gray-900 dark:text-white\">\n                {currentPlan.name}\n              </span>\n              <StatusBadge\n                status={\n                  subscription.status === 'active' ? 'success'\n                  : subscription.status === 'past_due' ? 'pending'\n                  : 'error'\n                }\n                label={t(`billing.status.${subscription.status}`)}\n              />\n              {subscription.cancelAtPeriodEnd && (\n                <Badge color=\"amber\">{t('billing.currentPlan.cancelAtPeriodEnd')}</Badge>\n              )}\n            </div>\n\n            <dl className=\"grid grid-cols-1 gap-3 text-sm sm:grid-cols-2\">\n              <div>\n                <dt className=\"text-gray-500 dark:text-gray-400\">\n                  {t('billing.currentPlan.price')}\n                </dt>\n                <dd className=\"font-medium text-gray-900 dark:text-white\">\n                  {format.number(currentPlan.price, { style: 'currency', currency: currentPlan.currency })}\n                  {' '}/{' '}\n                  {t(`billing.interval.${currentPlan.interval}`)}\n                </dd>\n              </div>\n              {subscription.currentPeriodEnd && (\n                <div>\n                  <dt className=\"text-gray-500 dark:text-gray-400\">\n                    {t('billing.currentPlan.renewsOn')}\n                  </dt>\n                  <dd className=\"font-medium text-gray-900 dark:text-white\">\n                    {format.dateTime(new Date(subscription.currentPeriodEnd), { dateStyle: 'medium' })}\n                  </dd>\n                </div>\n              )}\n            </dl>\n\n            <div className=\"flex flex-wrap gap-2 pt-2\">\n              <Button\n                size=\"sm\"\n                color=\"ios-glass-blue\"\n                onClick={handleOpenPortal}\n                loading={busyAction === 'portal'}\n                disabled={busyAction !== null}\n              >\n                {t('billing.currentPlan.manageInPortal')}\n              </Button>\n              {subscription.status === 'active' && !subscription.cancelAtPeriodEnd && (\n                <Button\n                  size=\"sm\"\n                  color=\"ios-glass-red\"\n                  onClick={handleCancel}\n                  loading={busyAction === 'cancel'}\n                  disabled={busyAction !== null}\n                >\n                  {t('billing.currentPlan.cancel')}\n                </Button>\n              )}\n            </div>\n          </div>\n        ) : (\n          <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n            {t('billing.currentPlan.noSubscription')}\n          </p>\n        )}\n      </SectionCard>\n\n      <SectionCard\n        header={{\n          title: t('billing.plans.title'),\n          subtitle: t('billing.plans.description'),\n        }}\n      >\n        {plans.length === 0 ? (\n          <p className=\"text-sm text-gray-500 dark:text-gray-400\">\n            {t('billing.plans.empty')}\n          </p>\n        ) : (\n          <ListCard>\n            {plans.map((plan) => {\n              const isCurrent = currentPlan?.id === plan.id\n              const isDowngrade = currentTier != null\n                && (TIER_ORDER[plan.tier] ?? 0) < (TIER_ORDER[currentTier] ?? 0)\n              return (\n                <ListCardItem\n                  key={plan.id}\n                  leading={\n                    <div className=\"flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500/20 to-blue-500/20 text-violet-600 dark:text-violet-300\">\n                      <span className=\"text-sm font-bold uppercase\">{plan.tier.charAt(0)}</span>\n                    </div>\n                  }\n                  trailing={\n                    isCurrent ? (\n                      <Badge color=\"green\">{t('billing.plans.currentBadge')}</Badge>\n                    ) : (\n                      isDowngrade ? (\n                        <Button\n                          size=\"sm\"\n                          plain\n                          onClick={() => handleStartCheckout(plan.code)}\n                          loading={busyAction === `checkout:${plan.code}`}\n                          disabled={busyAction !== null}\n                        >\n                          {t('billing.plans.downgradeAction')}\n                        </Button>\n                      ) : (\n                        <Button\n                          size=\"sm\"\n                          color=\"ios-glass-blue\"\n                          onClick={() => handleStartCheckout(plan.code)}\n                          loading={busyAction === `checkout:${plan.code}`}\n                          disabled={busyAction !== null}\n                        >\n                          {t('billing.plans.selectAction')}\n                        </Button>\n                      )\n                    )\n                  }\n                >\n                  <div className=\"flex flex-col gap-1\">\n                    <div className=\"flex items-center gap-2\">\n                      <p className=\"text-sm font-medium text-gray-900 dark:text-white\">\n                        {plan.name}\n                      </p>\n                      <span className=\"text-xs text-gray-500 dark:text-gray-400\">\n                        {format.number(plan.price, { style: 'currency', currency: plan.currency })}\n                        {' '}/{' '}\n                        {t(`billing.interval.${plan.interval}`)}\n                      </span>\n                    </div>\n                    {plan.description && (\n                      <p className=\"text-xs text-gray-500 dark:text-gray-400\">\n                        {plan.description}\n                      </p>\n                    )}\n                  </div>\n                </ListCardItem>\n              )\n            })}\n          </ListCard>\n        )}\n      </SectionCard>\n    </div>\n  )\n}\n"]}