@omnikit-js/ui 0.9.48 → 0.9.50
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.
- package/dist/{chunk-SRPYYSJZ.js → chunk-CBEYQYWG.js} +222 -132
- package/dist/chunk-CBEYQYWG.js.map +1 -0
- package/dist/{chunk-LIZKLYHH.js → chunk-ZYJBZ7WV.js} +3 -3
- package/dist/{chunk-LIZKLYHH.js.map → chunk-ZYJBZ7WV.js.map} +1 -1
- package/dist/components/client/index.js +1 -1
- package/dist/components/server/index.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +3 -3
- package/dist/chunk-SRPYYSJZ.js.map +0 -1
|
@@ -400,6 +400,88 @@ async function updateCustomer(config, customerId, data) {
|
|
|
400
400
|
}
|
|
401
401
|
return { success: true, data: result.data };
|
|
402
402
|
}
|
|
403
|
+
var billingStyles = `
|
|
404
|
+
/* === Container query grids === */
|
|
405
|
+
.ok-plans-wrap { container-type: inline-size; }
|
|
406
|
+
.ok-plans-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
|
|
407
|
+
@container (min-width: 550px) {
|
|
408
|
+
.ok-plans-grid[data-cols="2"],
|
|
409
|
+
.ok-plans-grid[data-cols="3"],
|
|
410
|
+
.ok-plans-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
411
|
+
}
|
|
412
|
+
@container (min-width: 800px) {
|
|
413
|
+
.ok-plans-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
414
|
+
.ok-plans-grid[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
415
|
+
}
|
|
416
|
+
@container (min-width: 1050px) {
|
|
417
|
+
.ok-plans-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.ok-form-wrap { container-type: inline-size; }
|
|
421
|
+
.ok-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
|
|
422
|
+
.ok-form-full { grid-column: 1 / -1; }
|
|
423
|
+
@container (min-width: 550px) {
|
|
424
|
+
.ok-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* === Text colors === */
|
|
428
|
+
.ok-text { color: #111827; }
|
|
429
|
+
.ok-text-sub { color: #374151; }
|
|
430
|
+
.ok-text-muted { color: #4b5563; }
|
|
431
|
+
.ok-text-faint { color: #6b7280; }
|
|
432
|
+
.ok-text-dim { color: #9ca3af; }
|
|
433
|
+
.ok-text-success { color: #059669; }
|
|
434
|
+
.ok-text-warn { color: #d97706; }
|
|
435
|
+
.ok-text-link { color: #2563eb; }
|
|
436
|
+
|
|
437
|
+
/* === Backgrounds === */
|
|
438
|
+
.ok-bg-blue { background-color: #dbeafe; }
|
|
439
|
+
.ok-bg-gray { background-color: #f3f4f6; }
|
|
440
|
+
.ok-bg-green { background-color: #dcfce7; }
|
|
441
|
+
.ok-bg-green-solid { background-color: #16a34a; }
|
|
442
|
+
.ok-bg-blue-solid { background-color: #2563eb; }
|
|
443
|
+
|
|
444
|
+
/* === Badges === */
|
|
445
|
+
.ok-badge { display: inline-flex; align-items: center; border-radius: 9999px; font-weight: 500; }
|
|
446
|
+
.ok-badge-active { background-color: #dcfce7; color: #166534; }
|
|
447
|
+
.ok-badge-error { background-color: #fee2e2; color: #991b1b; }
|
|
448
|
+
.ok-badge-warn { background-color: #fef9c3; color: #854d0e; }
|
|
449
|
+
.ok-badge-info { background-color: #dbeafe; color: #1e40af; }
|
|
450
|
+
.ok-badge-paid { background-color: #dcfce7; color: #166534; }
|
|
451
|
+
.ok-badge-open { background-color: #fef9c3; color: #854d0e; }
|
|
452
|
+
.ok-badge-neutral { background-color: #f3f4f6; color: #1f2937; }
|
|
453
|
+
|
|
454
|
+
/* === Borders === */
|
|
455
|
+
.ok-border { border-color: #e5e7eb; }
|
|
456
|
+
.ok-border-selected { border-color: #3b82f6; background-color: #eff6ff; }
|
|
457
|
+
.ok-border-dashed { border-style: dashed; border-color: #d1d5db; }
|
|
458
|
+
|
|
459
|
+
/* === Dark mode === */
|
|
460
|
+
.dark .ok-text { color: #f9fafb; }
|
|
461
|
+
.dark .ok-text-sub { color: #d4d4d4; }
|
|
462
|
+
.dark .ok-text-muted { color: #a3a3a3; }
|
|
463
|
+
.dark .ok-text-faint { color: #a3a3a3; }
|
|
464
|
+
.dark .ok-text-dim { color: #525252; }
|
|
465
|
+
.dark .ok-text-success { color: #4ade80; }
|
|
466
|
+
.dark .ok-text-warn { color: #fbbf24; }
|
|
467
|
+
.dark .ok-text-link { color: #d4d4d4; }
|
|
468
|
+
|
|
469
|
+
.dark .ok-bg-blue { background-color: #404040; }
|
|
470
|
+
.dark .ok-bg-gray { background-color: #262626; }
|
|
471
|
+
.dark .ok-bg-green { background-color: #14532d; }
|
|
472
|
+
|
|
473
|
+
.dark .ok-badge-active { background-color: rgba(22,101,52,0.3); color: #86efac; }
|
|
474
|
+
.dark .ok-badge-error { background-color: rgba(153,27,27,0.3); color: #fca5a5; }
|
|
475
|
+
.dark .ok-badge-warn { background-color: rgba(133,77,14,0.3); color: #fde047; }
|
|
476
|
+
.dark .ok-badge-info { background-color: #404040; color: #d4d4d4; }
|
|
477
|
+
.dark .ok-badge-paid { background-color: rgba(22,101,52,0.3); color: #86efac; }
|
|
478
|
+
.dark .ok-badge-open { background-color: rgba(133,77,14,0.3); color: #fde047; }
|
|
479
|
+
.dark .ok-badge-neutral { background-color: #262626; color: #d4d4d4; }
|
|
480
|
+
|
|
481
|
+
.dark .ok-border { border-color: #404040; }
|
|
482
|
+
.dark .ok-border-selected { border-color: #9ca3af; background-color: rgba(64,64,64,0.5); }
|
|
483
|
+
.dark .ok-border-dashed { border-color: #525252; }
|
|
484
|
+
`;
|
|
403
485
|
function BillingContent({
|
|
404
486
|
subscription,
|
|
405
487
|
invoices,
|
|
@@ -647,18 +729,18 @@ function BillingContent({
|
|
|
647
729
|
subscription ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
648
730
|
/* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
|
|
649
731
|
/* @__PURE__ */ jsx("span", { className: "text-3xl font-bold", children: subscription.price }),
|
|
650
|
-
/* @__PURE__ */ jsxs("span", { className: "
|
|
732
|
+
/* @__PURE__ */ jsxs("span", { className: "ok-text-muted", children: [
|
|
651
733
|
"/ ",
|
|
652
734
|
subscription.period
|
|
653
735
|
] })
|
|
654
736
|
] }),
|
|
655
|
-
/* @__PURE__ */ jsx("p", { className: "mt-2 text-sm
|
|
656
|
-
] }) : /* @__PURE__ */ jsx("p", { className: "
|
|
737
|
+
/* @__PURE__ */ jsx("p", { className: "mt-2 text-sm ok-text-muted", children: subscription.plan })
|
|
738
|
+
] }) : /* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: "No active subscription" })
|
|
657
739
|
] }),
|
|
658
|
-
subscription && /* @__PURE__ */ jsx("span", { className: `
|
|
740
|
+
subscription && /* @__PURE__ */ jsx("span", { className: `ok-badge px-3 py-1 text-sm ${subscription.status === "active" ? "ok-badge-active" : subscription.status === "canceled" ? "ok-badge-error" : "ok-badge-warn"}`, children: subscription.cancelAtPeriodEnd ? "Canceling" : subscription.status })
|
|
659
741
|
] }),
|
|
660
742
|
subscription && parseFloat(subscription.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-3 mb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
661
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
743
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Next billing date" }),
|
|
662
744
|
/* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.nextBilling })
|
|
663
745
|
] }) }),
|
|
664
746
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
|
|
@@ -691,8 +773,8 @@ function BillingContent({
|
|
|
691
773
|
const unit = usage.unit ? ` ${usage.unit}` : "";
|
|
692
774
|
const isLow = usage.remaining < 1e3;
|
|
693
775
|
return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
|
|
694
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
695
|
-
/* @__PURE__ */ jsxs("span", { className: `font-medium ${isLow ? "
|
|
776
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-sub", children: featureName }),
|
|
777
|
+
/* @__PURE__ */ jsxs("span", { className: `font-medium ${isLow ? "ok-text-warn" : "ok-text"}`, children: [
|
|
696
778
|
usage.remaining.toLocaleString(),
|
|
697
779
|
unit,
|
|
698
780
|
" remaining"
|
|
@@ -706,8 +788,8 @@ function BillingContent({
|
|
|
706
788
|
const unit = usage.unit ? ` ${usage.unit}` : "";
|
|
707
789
|
return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
|
|
708
790
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
709
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
710
|
-
/* @__PURE__ */ jsxs("span", { className: "
|
|
791
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-sub", children: featureName }),
|
|
792
|
+
/* @__PURE__ */ jsxs("span", { className: "ok-text-muted", children: [
|
|
711
793
|
currentUsage.toLocaleString(),
|
|
712
794
|
" / ",
|
|
713
795
|
limit.toLocaleString(),
|
|
@@ -729,18 +811,18 @@ function BillingContent({
|
|
|
729
811
|
const stringValue = entitlement?.value ? typeof entitlement.value === "object" && entitlement.value !== null && "value" in entitlement.value ? String(entitlement.value.value) : String(entitlement.value) : null;
|
|
730
812
|
if (stringValue) {
|
|
731
813
|
return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
|
|
732
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
733
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
814
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-sub", children: featureName }),
|
|
815
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text font-medium", children: stringValue })
|
|
734
816
|
] }, usage.feature_key);
|
|
735
817
|
}
|
|
736
818
|
}
|
|
737
819
|
const isEnabled = usage.feature_type === "boolean" || usage.limit === 0;
|
|
738
820
|
return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center text-sm", children: [
|
|
739
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
740
|
-
isEnabled ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5
|
|
821
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-sub", children: featureName }),
|
|
822
|
+
isEnabled ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 ok-text-success", children: [
|
|
741
823
|
/* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
|
|
742
824
|
"Included"
|
|
743
|
-
] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5
|
|
825
|
+
] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 ok-text-dim", children: [
|
|
744
826
|
/* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
|
|
745
827
|
"Not included"
|
|
746
828
|
] })
|
|
@@ -755,61 +837,68 @@ function BillingContent({
|
|
|
755
837
|
content: /* @__PURE__ */ jsxs("div", { className: "space-y-6 mt-6", children: [
|
|
756
838
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
757
839
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Choose Your Plan" }),
|
|
758
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm
|
|
840
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm ok-text-muted mb-6", children: "Select the plan that best fits your needs. You can upgrade or downgrade at any time." })
|
|
759
841
|
] }),
|
|
760
|
-
plans.length === 0 ? /* @__PURE__ */ jsx("p", { className: "
|
|
761
|
-
|
|
842
|
+
plans.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: "No plans available." }) : /* @__PURE__ */ jsx("div", { className: "ok-plans-wrap", children: /* @__PURE__ */ jsx(
|
|
843
|
+
"div",
|
|
762
844
|
{
|
|
763
|
-
className:
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
/* @__PURE__ */ jsx("span", { className: "text-
|
|
772
|
-
/* @__PURE__ */ jsxs("
|
|
773
|
-
"
|
|
774
|
-
plan.
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
children: /* @__PURE__ */ jsx(
|
|
787
|
-
"path",
|
|
845
|
+
className: "ok-plans-grid",
|
|
846
|
+
"data-cols": Math.min(plans.length, 4),
|
|
847
|
+
children: plans.map((plan) => /* @__PURE__ */ jsxs(
|
|
848
|
+
Card,
|
|
849
|
+
{
|
|
850
|
+
className: `relative flex flex-col ${plan.popular ? "shadow-lg" : ""}`,
|
|
851
|
+
children: [
|
|
852
|
+
plan.popular && !plan.current && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("span", { className: "ok-bg-blue-solid text-white text-xs font-semibold px-3 py-1 rounded-full", children: "Most Popular" }) }),
|
|
853
|
+
plan.current && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("span", { className: "ok-bg-green-solid text-white text-xs font-semibold px-3 py-1 rounded-full", children: "Current Plan" }) }),
|
|
854
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
855
|
+
/* @__PURE__ */ jsx("h4", { className: "text-xl font-bold mb-2", children: plan.name }),
|
|
856
|
+
plan.description && /* @__PURE__ */ jsx("p", { className: "text-sm ok-text-muted mb-2", children: plan.description }),
|
|
857
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
|
|
858
|
+
/* @__PURE__ */ jsx("span", { className: "text-3xl font-bold", children: plan.price }),
|
|
859
|
+
/* @__PURE__ */ jsxs("span", { className: "ok-text-muted", children: [
|
|
860
|
+
"/ ",
|
|
861
|
+
plan.period
|
|
862
|
+
] })
|
|
863
|
+
] })
|
|
864
|
+
] }),
|
|
865
|
+
/* @__PURE__ */ jsx("ul", { className: "space-y-3 mb-6 flex-1", children: plan.features.map((feature, idx) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
|
|
866
|
+
/* @__PURE__ */ jsx(
|
|
867
|
+
"svg",
|
|
788
868
|
{
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
869
|
+
className: "w-5 h-5 ok-text-success flex-shrink-0 mt-0.5",
|
|
870
|
+
fill: "none",
|
|
871
|
+
stroke: "currentColor",
|
|
872
|
+
viewBox: "0 0 24 24",
|
|
873
|
+
children: /* @__PURE__ */ jsx(
|
|
874
|
+
"path",
|
|
875
|
+
{
|
|
876
|
+
strokeLinecap: "round",
|
|
877
|
+
strokeLinejoin: "round",
|
|
878
|
+
strokeWidth: 2,
|
|
879
|
+
d: "M5 13l4 4L19 7"
|
|
880
|
+
}
|
|
881
|
+
)
|
|
793
882
|
}
|
|
794
|
-
)
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
)
|
|
883
|
+
),
|
|
884
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-sub", children: feature })
|
|
885
|
+
] }, idx)) }),
|
|
886
|
+
/* @__PURE__ */ jsx(
|
|
887
|
+
Button,
|
|
888
|
+
{
|
|
889
|
+
className: "w-full",
|
|
890
|
+
disabled: plan.current || isLoading,
|
|
891
|
+
variant: plan.current ? "secondary" : "primary",
|
|
892
|
+
onClick: () => handleSelectPlan(plan),
|
|
893
|
+
children: plan.current ? "Current Plan" : subscription ? "Switch Plan" : "Select Plan"
|
|
894
|
+
}
|
|
895
|
+
)
|
|
896
|
+
]
|
|
897
|
+
},
|
|
898
|
+
plan.id
|
|
899
|
+
))
|
|
900
|
+
}
|
|
901
|
+
) })
|
|
813
902
|
] })
|
|
814
903
|
},
|
|
815
904
|
{
|
|
@@ -817,16 +906,16 @@ function BillingContent({
|
|
|
817
906
|
label: "Invoices",
|
|
818
907
|
content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
|
|
819
908
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Invoice History" }),
|
|
820
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm
|
|
821
|
-
invoices.length === 0 ? /* @__PURE__ */ jsx("p", { className: "
|
|
909
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm ok-text-muted mb-6", children: "View and download your past invoices" }),
|
|
910
|
+
invoices.length === 0 ? /* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: "No invoices yet." }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: invoices.map((invoice) => /* @__PURE__ */ jsxs(Card, { className: "flex items-center justify-between", children: [
|
|
822
911
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
823
|
-
/* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-blue
|
|
912
|
+
/* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full ok-bg-blue flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 ok-text-link", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
|
|
824
913
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
825
914
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
826
915
|
/* @__PURE__ */ jsx("p", { className: "font-medium text-sm", children: invoice.id }),
|
|
827
|
-
/* @__PURE__ */ jsx("span", { className: `
|
|
916
|
+
/* @__PURE__ */ jsx("span", { className: `ok-badge px-2 py-0.5 text-xs ${invoice.status === "paid" ? "ok-badge-paid" : invoice.status === "open" ? "ok-badge-open" : "ok-badge-neutral"}`, children: invoice.status })
|
|
828
917
|
] }),
|
|
829
|
-
/* @__PURE__ */ jsx("p", { className: "text-xs
|
|
918
|
+
/* @__PURE__ */ jsx("p", { className: "text-xs ok-text-muted", children: invoice.date })
|
|
830
919
|
] })
|
|
831
920
|
] }),
|
|
832
921
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
@@ -849,14 +938,14 @@ function BillingContent({
|
|
|
849
938
|
label: "Payment Method",
|
|
850
939
|
content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
|
|
851
940
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Payment Methods" }),
|
|
852
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm
|
|
853
|
-
paymentMethods.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "border border-dashed
|
|
854
|
-
/* @__PURE__ */ jsx("p", { className: "
|
|
941
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm ok-text-muted mb-6", children: "Manage your payment methods" }),
|
|
942
|
+
paymentMethods.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "border ok-border-dashed rounded-lg text-center py-8", children: [
|
|
943
|
+
/* @__PURE__ */ jsx("p", { className: "ok-text-muted mb-4", children: "No payment methods on file" }),
|
|
855
944
|
/* @__PURE__ */ jsx(Button, { onClick: () => setIsAddPaymentModalOpen(true), disabled: stripeLoading, children: stripeLoading ? "Loading..." : "Add Payment Method" })
|
|
856
945
|
] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
857
946
|
paymentMethods.map((pm) => /* @__PURE__ */ jsxs(Card, { className: "flex items-center justify-between", children: [
|
|
858
947
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
859
|
-
/* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full bg-gray
|
|
948
|
+
/* @__PURE__ */ jsx("div", { className: "h-10 w-10 rounded-full ok-bg-gray flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5 ok-text-muted", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, 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" }) }) }),
|
|
860
949
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
861
950
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
862
951
|
/* @__PURE__ */ jsxs("p", { className: "font-medium text-sm", children: [
|
|
@@ -864,9 +953,9 @@ function BillingContent({
|
|
|
864
953
|
" \u2022\u2022\u2022\u2022 ",
|
|
865
954
|
pm.card_last4 || pm.bank_last4 || "****"
|
|
866
955
|
] }),
|
|
867
|
-
pm.is_default && /* @__PURE__ */ jsx("span", { className: "
|
|
956
|
+
pm.is_default && /* @__PURE__ */ jsx("span", { className: "ok-badge ok-badge-info px-2 py-0.5 text-xs", children: "Default" })
|
|
868
957
|
] }),
|
|
869
|
-
pm.card_exp_month && pm.card_exp_year && /* @__PURE__ */ jsxs("p", { className: "text-xs
|
|
958
|
+
pm.card_exp_month && pm.card_exp_year && /* @__PURE__ */ jsxs("p", { className: "text-xs ok-text-muted", children: [
|
|
870
959
|
"Expires ",
|
|
871
960
|
pm.card_exp_month,
|
|
872
961
|
"/",
|
|
@@ -915,11 +1004,11 @@ function BillingContent({
|
|
|
915
1004
|
label: "Preferences",
|
|
916
1005
|
content: /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxs(Card, { children: [
|
|
917
1006
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-2", children: "Billing Preferences" }),
|
|
918
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm
|
|
1007
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm ok-text-muted mb-6", children: "Manage your billing information and tax settings" }),
|
|
919
1008
|
preferencesSuccess && /* @__PURE__ */ jsx(Alert, { variant: "success", className: "mb-6", children: "Preferences saved successfully" }),
|
|
920
1009
|
/* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
|
|
921
1010
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
922
|
-
/* @__PURE__ */ jsx("label", { className: "block text-sm font-medium
|
|
1011
|
+
/* @__PURE__ */ jsx("label", { className: "block text-sm font-medium ok-text-sub mb-2", children: "Customer Type" }),
|
|
923
1012
|
/* @__PURE__ */ jsx(
|
|
924
1013
|
Radio,
|
|
925
1014
|
{
|
|
@@ -934,7 +1023,7 @@ function BillingContent({
|
|
|
934
1023
|
}
|
|
935
1024
|
)
|
|
936
1025
|
] }),
|
|
937
|
-
/* @__PURE__ */
|
|
1026
|
+
/* @__PURE__ */ jsx("div", { className: "ok-form-wrap", children: /* @__PURE__ */ jsxs("div", { className: "ok-form-grid", children: [
|
|
938
1027
|
/* @__PURE__ */ jsx(
|
|
939
1028
|
TextInput,
|
|
940
1029
|
{
|
|
@@ -973,7 +1062,7 @@ function BillingContent({
|
|
|
973
1062
|
placeholder: "Acme Inc."
|
|
974
1063
|
}
|
|
975
1064
|
)
|
|
976
|
-
] }),
|
|
1065
|
+
] }) }),
|
|
977
1066
|
preferencesForm.customer_type === "business" && /* @__PURE__ */ jsx(
|
|
978
1067
|
TextInput,
|
|
979
1068
|
{
|
|
@@ -985,9 +1074,9 @@ function BillingContent({
|
|
|
985
1074
|
}
|
|
986
1075
|
),
|
|
987
1076
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
988
|
-
/* @__PURE__ */ jsx("h4", { className: "text-sm font-medium
|
|
989
|
-
/* @__PURE__ */
|
|
990
|
-
/* @__PURE__ */ jsx("div", { className: "
|
|
1077
|
+
/* @__PURE__ */ jsx("h4", { className: "text-sm font-medium ok-text-sub mb-3", children: "Billing Address" }),
|
|
1078
|
+
/* @__PURE__ */ jsx("div", { className: "ok-form-wrap", children: /* @__PURE__ */ jsxs("div", { className: "ok-form-grid", children: [
|
|
1079
|
+
/* @__PURE__ */ jsx("div", { className: "ok-form-full", children: /* @__PURE__ */ jsx(
|
|
991
1080
|
TextInput,
|
|
992
1081
|
{
|
|
993
1082
|
label: "Address Line 1",
|
|
@@ -996,7 +1085,7 @@ function BillingContent({
|
|
|
996
1085
|
placeholder: "123 Main Street"
|
|
997
1086
|
}
|
|
998
1087
|
) }),
|
|
999
|
-
/* @__PURE__ */ jsx("div", { className: "
|
|
1088
|
+
/* @__PURE__ */ jsx("div", { className: "ok-form-full", children: /* @__PURE__ */ jsx(
|
|
1000
1089
|
TextInput,
|
|
1001
1090
|
{
|
|
1002
1091
|
label: "Address Line 2",
|
|
@@ -1072,7 +1161,7 @@ function BillingContent({
|
|
|
1072
1161
|
]
|
|
1073
1162
|
}
|
|
1074
1163
|
)
|
|
1075
|
-
] })
|
|
1164
|
+
] }) })
|
|
1076
1165
|
] }),
|
|
1077
1166
|
/* @__PURE__ */ jsx("div", { className: "flex justify-end pt-4", children: /* @__PURE__ */ jsx(
|
|
1078
1167
|
Button,
|
|
@@ -1087,6 +1176,7 @@ function BillingContent({
|
|
|
1087
1176
|
}
|
|
1088
1177
|
];
|
|
1089
1178
|
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
1179
|
+
/* @__PURE__ */ jsx("style", { children: billingStyles }),
|
|
1090
1180
|
/* @__PURE__ */ jsx(Tabs, { tabs, defaultIndex: activeTabIndex, onChange: setActiveTabIndex }, activeTabIndex),
|
|
1091
1181
|
/* @__PURE__ */ jsx(
|
|
1092
1182
|
Modal,
|
|
@@ -1104,7 +1194,7 @@ function BillingContent({
|
|
|
1104
1194
|
onCancel: () => setIsAddPaymentModalOpen(false),
|
|
1105
1195
|
onSubmit: handleAddPaymentMethod
|
|
1106
1196
|
}
|
|
1107
|
-
) : /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "
|
|
1197
|
+
) : /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: stripeLoading ? "Loading payment form..." : "Payment configuration not available" }) })
|
|
1108
1198
|
}
|
|
1109
1199
|
),
|
|
1110
1200
|
/* @__PURE__ */ jsx(
|
|
@@ -1117,19 +1207,19 @@ function BillingContent({
|
|
|
1117
1207
|
},
|
|
1118
1208
|
title: "Remove Payment Method",
|
|
1119
1209
|
children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
1120
|
-
/* @__PURE__ */ jsx("p", { className: "
|
|
1210
|
+
/* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: "Are you sure you want to remove this payment method?" }),
|
|
1121
1211
|
selectedPaymentMethod && /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
|
|
1122
|
-
/* @__PURE__ */ jsx("div", { className: "w-12 h-8 bg-
|
|
1212
|
+
/* @__PURE__ */ jsx("div", { className: "w-12 h-8 ok-bg-gray rounded-lg flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6 ok-text-muted", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, 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" }) }) }),
|
|
1123
1213
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
1124
|
-
/* @__PURE__ */ jsx("p", { className: "font-semibold
|
|
1125
|
-
/* @__PURE__ */ jsxs("p", { className: "text-sm
|
|
1214
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold ok-text", children: selectedPaymentMethod.card_brand || "Card" }),
|
|
1215
|
+
/* @__PURE__ */ jsxs("p", { className: "text-sm ok-text-muted", children: [
|
|
1126
1216
|
"\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ",
|
|
1127
1217
|
selectedPaymentMethod.card_last4 || "****"
|
|
1128
1218
|
] })
|
|
1129
1219
|
] })
|
|
1130
1220
|
] }) }),
|
|
1131
|
-
/* @__PURE__ */ jsx("p", { className: "text-sm
|
|
1132
|
-
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t
|
|
1221
|
+
/* @__PURE__ */ jsx("p", { className: "text-sm ok-text-faint", children: "This action cannot be undone." }),
|
|
1222
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t ok-border", children: [
|
|
1133
1223
|
/* @__PURE__ */ jsx(
|
|
1134
1224
|
Button,
|
|
1135
1225
|
{
|
|
@@ -1165,15 +1255,15 @@ function BillingContent({
|
|
|
1165
1255
|
/* @__PURE__ */ jsx(Alert, { variant: "warning", title: "Are you sure you want to cancel?", children: "You'll lose access to premium features when your current billing period ends." }),
|
|
1166
1256
|
subscription && /* @__PURE__ */ jsxs(Card, { children: [
|
|
1167
1257
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
1168
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1258
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Current Plan:" }),
|
|
1169
1259
|
/* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.plan })
|
|
1170
1260
|
] }),
|
|
1171
1261
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mt-2", children: [
|
|
1172
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1262
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Access Until:" }),
|
|
1173
1263
|
/* @__PURE__ */ jsx("span", { className: "font-medium", children: subscription.nextBilling })
|
|
1174
1264
|
] })
|
|
1175
1265
|
] }),
|
|
1176
|
-
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t
|
|
1266
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6 pt-4 border-t ok-border", children: [
|
|
1177
1267
|
/* @__PURE__ */ jsx(
|
|
1178
1268
|
Button,
|
|
1179
1269
|
{
|
|
@@ -1206,7 +1296,7 @@ function BillingContent({
|
|
|
1206
1296
|
},
|
|
1207
1297
|
title: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Start Free Plan" : subscription ? "Confirm Plan Change" : "Confirm Subscription",
|
|
1208
1298
|
children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
1209
|
-
/* @__PURE__ */ jsx("p", { className: "
|
|
1299
|
+
/* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1210
1300
|
"Start your free ",
|
|
1211
1301
|
/* @__PURE__ */ jsx("strong", { children: selectedPlan?.name }),
|
|
1212
1302
|
" plan"
|
|
@@ -1220,54 +1310,54 @@ function BillingContent({
|
|
|
1220
1310
|
" plan"
|
|
1221
1311
|
] }) }),
|
|
1222
1312
|
/* @__PURE__ */ jsxs(Card, { children: [
|
|
1223
|
-
/* @__PURE__ */ jsx("h4", { className: "font-semibold
|
|
1313
|
+
/* @__PURE__ */ jsx("h4", { className: "font-semibold ok-text mb-2", children: "Billing Summary" }),
|
|
1224
1314
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
|
|
1225
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1226
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1315
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Plan:" }),
|
|
1316
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text", children: selectedPlan?.name })
|
|
1227
1317
|
] }),
|
|
1228
1318
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
|
|
1229
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1230
|
-
/* @__PURE__ */ jsxs("span", { className: "font-medium
|
|
1319
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Billing Cycle:" }),
|
|
1320
|
+
/* @__PURE__ */ jsxs("span", { className: "font-medium ok-text", children: [
|
|
1231
1321
|
selectedPlan?.period || "month",
|
|
1232
1322
|
"ly"
|
|
1233
1323
|
] })
|
|
1234
1324
|
] }),
|
|
1235
1325
|
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1236
1326
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
|
|
1237
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1238
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1327
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Subtotal:" }),
|
|
1328
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text", children: selectedPlan.price })
|
|
1239
1329
|
] }),
|
|
1240
1330
|
taxLoading ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
|
|
1241
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1242
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1331
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Tax:" }),
|
|
1332
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-dim text-xs", children: "Calculating..." })
|
|
1243
1333
|
] }) : taxInfo && taxInfo.tax_rate > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
|
|
1244
|
-
/* @__PURE__ */ jsxs("span", { className: "
|
|
1334
|
+
/* @__PURE__ */ jsxs("span", { className: "ok-text-muted", children: [
|
|
1245
1335
|
taxInfo.tax_label,
|
|
1246
1336
|
" (",
|
|
1247
1337
|
taxInfo.tax_rate,
|
|
1248
1338
|
"%):"
|
|
1249
1339
|
] }),
|
|
1250
|
-
/* @__PURE__ */ jsxs("span", { className: "font-medium
|
|
1340
|
+
/* @__PURE__ */ jsxs("span", { className: "font-medium ok-text", children: [
|
|
1251
1341
|
"$",
|
|
1252
1342
|
(taxInfo.tax_amount / 100).toFixed(2)
|
|
1253
1343
|
] })
|
|
1254
1344
|
] }) : taxInfo && taxInfo.reverse_charge ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm mb-1", children: [
|
|
1255
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1256
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1345
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "VAT (Reverse Charge):" }),
|
|
1346
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text", children: "$0.00" })
|
|
1257
1347
|
] }) : null
|
|
1258
1348
|
] }),
|
|
1259
|
-
taxInfo && taxInfo.reverse_charge && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 border
|
|
1260
|
-
/* @__PURE__ */ jsx("div", { className: "border-t
|
|
1261
|
-
/* @__PURE__ */ jsx("span", { className: "font-semibold
|
|
1262
|
-
/* @__PURE__ */ jsx("span", { className: "font-bold text-lg
|
|
1349
|
+
taxInfo && taxInfo.reverse_charge && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 border ok-border rounded text-xs ok-text-sub", children: "EU reverse charge applies - you are responsible for reporting VAT in your country." }),
|
|
1350
|
+
/* @__PURE__ */ jsx("div", { className: "border-t ok-border mt-3 pt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
|
|
1351
|
+
/* @__PURE__ */ jsx("span", { className: "font-semibold ok-text", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Total:" : "Charged Today:" }),
|
|
1352
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold text-lg ok-text", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? /* @__PURE__ */ jsx("span", { className: "ok-text-success", children: "FREE" }) : taxInfo ? `$${(taxInfo.total / 100).toFixed(2)}` : selectedPlan?.price || "$0" })
|
|
1263
1353
|
] }) })
|
|
1264
1354
|
] }),
|
|
1265
1355
|
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
|
|
1266
|
-
/* @__PURE__ */ jsx("h4", { className: "font-semibold
|
|
1356
|
+
/* @__PURE__ */ jsx("h4", { className: "font-semibold ok-text text-sm", children: "Select Payment Method" }),
|
|
1267
1357
|
/* @__PURE__ */ jsx("div", { className: "space-y-2", children: paymentMethods.map((method) => /* @__PURE__ */ jsxs(
|
|
1268
1358
|
"label",
|
|
1269
1359
|
{
|
|
1270
|
-
className: `flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all ${selectedUpgradePaymentMethod === method.id ? "
|
|
1360
|
+
className: `flex items-center gap-3 p-3 border-2 rounded-lg cursor-pointer transition-all ${selectedUpgradePaymentMethod === method.id ? "ok-border-selected" : "ok-border"}`,
|
|
1271
1361
|
children: [
|
|
1272
1362
|
/* @__PURE__ */ jsx(
|
|
1273
1363
|
"input",
|
|
@@ -1277,15 +1367,15 @@ function BillingContent({
|
|
|
1277
1367
|
value: method.id,
|
|
1278
1368
|
checked: selectedUpgradePaymentMethod === method.id,
|
|
1279
1369
|
onChange: () => setSelectedUpgradePaymentMethod(method.id),
|
|
1280
|
-
className: "w-4 h-4
|
|
1370
|
+
className: "w-4 h-4"
|
|
1281
1371
|
}
|
|
1282
1372
|
),
|
|
1283
1373
|
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
1284
1374
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1285
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1286
|
-
method.is_default && /* @__PURE__ */ jsx("span", { className: "
|
|
1375
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text text-sm", children: method.card_brand ? method.card_brand.charAt(0).toUpperCase() + method.card_brand.slice(1) : "Card" }),
|
|
1376
|
+
method.is_default && /* @__PURE__ */ jsx("span", { className: "ok-badge ok-badge-info px-2 py-0.5 text-xs", children: "Default" })
|
|
1287
1377
|
] }),
|
|
1288
|
-
/* @__PURE__ */ jsxs("span", { className: "text-xs
|
|
1378
|
+
/* @__PURE__ */ jsxs("span", { className: "text-xs ok-text-muted", children: [
|
|
1289
1379
|
"\u2022\u2022\u2022\u2022 ",
|
|
1290
1380
|
method.card_last4 || "XXXX"
|
|
1291
1381
|
] })
|
|
@@ -1297,7 +1387,7 @@ function BillingContent({
|
|
|
1297
1387
|
] }),
|
|
1298
1388
|
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && paymentMethods.length === 0 && /* @__PURE__ */ jsx(Alert, { variant: "warning", children: "Please add a payment method before subscribing to a paid plan." }),
|
|
1299
1389
|
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 && /* @__PURE__ */ jsx(Alert, { variant: "success", children: "This is a free plan. No payment method required!" }),
|
|
1300
|
-
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs
|
|
1390
|
+
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsx("p", { className: "text-xs ok-text-faint", children: "Your payment method will be charged immediately. You can cancel anytime." }),
|
|
1301
1391
|
error && /* @__PURE__ */ jsx(Alert, { variant: "error", children: error }),
|
|
1302
1392
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end mt-6", children: [
|
|
1303
1393
|
/* @__PURE__ */ jsx(
|
|
@@ -1332,27 +1422,27 @@ function BillingContent({
|
|
|
1332
1422
|
onClose: handleCloseSuccessModal,
|
|
1333
1423
|
title: "Subscription Successful!",
|
|
1334
1424
|
children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
|
|
1335
|
-
/* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16
|
|
1425
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 ok-bg-green rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-8 h-8 ok-text-success", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }),
|
|
1336
1426
|
/* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
1337
|
-
/* @__PURE__ */ jsxs("h3", { className: "text-xl font-bold
|
|
1427
|
+
/* @__PURE__ */ jsxs("h3", { className: "text-xl font-bold ok-text mb-2", children: [
|
|
1338
1428
|
"Welcome to ",
|
|
1339
1429
|
selectedPlan?.name,
|
|
1340
1430
|
"!"
|
|
1341
1431
|
] }),
|
|
1342
|
-
/* @__PURE__ */ jsx("p", { className: "
|
|
1432
|
+
/* @__PURE__ */ jsx("p", { className: "ok-text-muted", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Your free plan is now active. Start exploring all the features!" : "Your subscription has been activated and your payment method has been charged." })
|
|
1343
1433
|
] }),
|
|
1344
1434
|
/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
|
|
1345
1435
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
1346
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1347
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1436
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Plan:" }),
|
|
1437
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text", children: selectedPlan?.name })
|
|
1348
1438
|
] }),
|
|
1349
1439
|
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
|
|
1350
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1351
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1440
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Billing:" }),
|
|
1441
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text", children: selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) === 0 ? "Free" : `${selectedPlan?.price}/${selectedPlan?.period}` })
|
|
1352
1442
|
] }),
|
|
1353
|
-
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm pt-2 border-t
|
|
1354
|
-
/* @__PURE__ */ jsx("span", { className: "
|
|
1355
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium
|
|
1443
|
+
selectedPlan && parseFloat(selectedPlan.price.replace(/[^0-9.]/g, "")) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm pt-2 border-t ok-border", children: [
|
|
1444
|
+
/* @__PURE__ */ jsx("span", { className: "ok-text-muted", children: "Status:" }),
|
|
1445
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium ok-text-success", children: "Active" })
|
|
1356
1446
|
] })
|
|
1357
1447
|
] }) }),
|
|
1358
1448
|
/* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
|
|
@@ -1975,5 +2065,5 @@ function PaymentForm2({
|
|
|
1975
2065
|
}
|
|
1976
2066
|
|
|
1977
2067
|
export { AddPaymentMethodForm, BillingContent, PaymentForm2 as PaymentForm };
|
|
1978
|
-
//# sourceMappingURL=chunk-
|
|
1979
|
-
//# sourceMappingURL=chunk-
|
|
2068
|
+
//# sourceMappingURL=chunk-CBEYQYWG.js.map
|
|
2069
|
+
//# sourceMappingURL=chunk-CBEYQYWG.js.map
|