@schematichq/schematic-react 0.2.0-rc.4 → 0.2.0-rc.5
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/schematic-react.cjs.js +878 -742
- package/dist/schematic-react.d.ts +18 -21
- package/dist/schematic-react.esm.js +827 -697
- package/package.json +1 -1
@@ -6192,6 +6192,11 @@ var Qe = function() {
|
|
6192
6192
|
}();
|
6193
6193
|
var et = o.createContext(void 0);
|
6194
6194
|
var tt = et.Consumer;
|
6195
|
+
function nt() {
|
6196
|
+
var e = c(et);
|
6197
|
+
if (!e) throw he(18);
|
6198
|
+
return e;
|
6199
|
+
}
|
6195
6200
|
function ot(e) {
|
6196
6201
|
var n = o.useContext(et), r2 = i(function() {
|
6197
6202
|
return function(e2, n2) {
|
@@ -6339,6 +6344,12 @@ function ft(n) {
|
|
6339
6344
|
}
|
6340
6345
|
return o.memo(l2);
|
6341
6346
|
}
|
6347
|
+
function mt(t) {
|
6348
|
+
for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
|
6349
|
+
"undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
|
6350
|
+
var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
|
6351
|
+
return new We(s2, r2);
|
6352
|
+
}
|
6342
6353
|
var vt = function() {
|
6343
6354
|
function e() {
|
6344
6355
|
var e2 = this;
|
@@ -7307,6 +7318,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
7307
7318
|
environmentId: json["environment_id"],
|
7308
7319
|
externalId: json["external_id"],
|
7309
7320
|
id: json["id"],
|
7321
|
+
paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
|
7310
7322
|
subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
|
7311
7323
|
subtotal: json["subtotal"],
|
7312
7324
|
updatedAt: new Date(json["updated_at"])
|
@@ -7958,8 +7970,8 @@ function parseEditorState(data) {
|
|
7958
7970
|
return arr;
|
7959
7971
|
}
|
7960
7972
|
async function fetchComponent(id, api) {
|
7961
|
-
const settings = { ...defaultSettings };
|
7962
7973
|
const nodes = [];
|
7974
|
+
const settings = { ...defaultSettings };
|
7963
7975
|
const response = await api.hydrateComponent({ componentId: id });
|
7964
7976
|
const { data } = response;
|
7965
7977
|
if (data.component?.ast) {
|
@@ -8073,9 +8085,11 @@ var EmbedProvider = ({
|
|
8073
8085
|
const setData = useCallback(
|
8074
8086
|
(data) => {
|
8075
8087
|
setState((prev2) => {
|
8076
|
-
const
|
8077
|
-
|
8078
|
-
|
8088
|
+
const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
|
8089
|
+
return {
|
8090
|
+
...prev2,
|
8091
|
+
data: updatedData
|
8092
|
+
};
|
8079
8093
|
});
|
8080
8094
|
},
|
8081
8095
|
[setState]
|
@@ -8083,9 +8097,11 @@ var EmbedProvider = ({
|
|
8083
8097
|
const updateSettings = useCallback(
|
8084
8098
|
(settings) => {
|
8085
8099
|
setState((prev2) => {
|
8086
|
-
const
|
8087
|
-
|
8088
|
-
|
8100
|
+
const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
|
8101
|
+
return {
|
8102
|
+
...prev2,
|
8103
|
+
settings: updatedSettings
|
8104
|
+
};
|
8089
8105
|
});
|
8090
8106
|
},
|
8091
8107
|
[setState]
|
@@ -9471,13 +9487,115 @@ var IconRound = ({
|
|
9471
9487
|
return /* @__PURE__ */ jsx5(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ jsx5(Icon2, { name }) });
|
9472
9488
|
};
|
9473
9489
|
|
9490
|
+
// src/components/ui/modal/Modal.tsx
|
9491
|
+
import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2 } from "react";
|
9492
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
9493
|
+
var Modal = ({ children, onClose }) => {
|
9494
|
+
const theme = nt();
|
9495
|
+
const { setLayout } = useEmbed();
|
9496
|
+
const ref = useRef2(null);
|
9497
|
+
const handleClose = useCallback2(() => {
|
9498
|
+
setLayout("portal");
|
9499
|
+
onClose?.();
|
9500
|
+
}, [setLayout, onClose]);
|
9501
|
+
useEffect4(() => {
|
9502
|
+
ref.current?.focus();
|
9503
|
+
}, []);
|
9504
|
+
return /* @__PURE__ */ jsx6(
|
9505
|
+
Box,
|
9506
|
+
{
|
9507
|
+
ref,
|
9508
|
+
tabIndex: 0,
|
9509
|
+
onClick: (event) => {
|
9510
|
+
if (event.target === event.currentTarget) {
|
9511
|
+
handleClose();
|
9512
|
+
}
|
9513
|
+
},
|
9514
|
+
onKeyDown: (event) => {
|
9515
|
+
if (event.key === "Escape") {
|
9516
|
+
handleClose();
|
9517
|
+
}
|
9518
|
+
},
|
9519
|
+
$position: "absolute",
|
9520
|
+
$top: "50%",
|
9521
|
+
$left: "50%",
|
9522
|
+
$zIndex: "999999",
|
9523
|
+
$transform: "translate(-50%, -50%)",
|
9524
|
+
$width: "100%",
|
9525
|
+
$height: "100%",
|
9526
|
+
$backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
|
9527
|
+
$overflow: "hidden",
|
9528
|
+
children: /* @__PURE__ */ jsx6(
|
9529
|
+
Flex,
|
9530
|
+
{
|
9531
|
+
$position: "relative",
|
9532
|
+
$top: "50%",
|
9533
|
+
$left: "50%",
|
9534
|
+
$transform: "translate(-50%, -50%)",
|
9535
|
+
$flexDirection: "column",
|
9536
|
+
$overflow: "hidden",
|
9537
|
+
$width: "calc(100% - 5rem)",
|
9538
|
+
$height: "calc(100% - 5rem)",
|
9539
|
+
$backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 2.5) : lighten(theme.card.background, 2.5),
|
9540
|
+
$borderRadius: "0.5rem",
|
9541
|
+
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
9542
|
+
id: "select-plan-dialog",
|
9543
|
+
role: "dialog",
|
9544
|
+
"aria-labelledby": "select-plan-dialog-label",
|
9545
|
+
"aria-modal": "true",
|
9546
|
+
children
|
9547
|
+
}
|
9548
|
+
)
|
9549
|
+
}
|
9550
|
+
);
|
9551
|
+
};
|
9552
|
+
|
9553
|
+
// src/components/ui/modal/ModalHeader.tsx
|
9554
|
+
import { useCallback as useCallback3 } from "react";
|
9555
|
+
import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
|
9556
|
+
var ModalHeader = ({ children, onClose }) => {
|
9557
|
+
const theme = nt();
|
9558
|
+
const { setLayout } = useEmbed();
|
9559
|
+
const handleClose = useCallback3(() => {
|
9560
|
+
setLayout("portal");
|
9561
|
+
onClose?.();
|
9562
|
+
}, [setLayout, onClose]);
|
9563
|
+
return /* @__PURE__ */ jsxs2(
|
9564
|
+
Flex,
|
9565
|
+
{
|
9566
|
+
$justifyContent: "space-between",
|
9567
|
+
$alignItems: "center",
|
9568
|
+
$gap: "1rem",
|
9569
|
+
$height: "3.75rem",
|
9570
|
+
$padding: "0 0.625rem 0 2.5rem",
|
9571
|
+
$backgroundColor: theme.card.background,
|
9572
|
+
$borderBottomWidth: "1px",
|
9573
|
+
$borderBottomStyle: "solid",
|
9574
|
+
$borderBottomColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
|
9575
|
+
children: [
|
9576
|
+
children,
|
9577
|
+
/* @__PURE__ */ jsx7(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx7(
|
9578
|
+
Icon2,
|
9579
|
+
{
|
9580
|
+
name: "close",
|
9581
|
+
style: {
|
9582
|
+
fontSize: 36,
|
9583
|
+
color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
|
9584
|
+
}
|
9585
|
+
}
|
9586
|
+
) })
|
9587
|
+
]
|
9588
|
+
}
|
9589
|
+
);
|
9590
|
+
};
|
9591
|
+
|
9474
9592
|
// src/components/ui/progress-bar/styles.ts
|
9475
9593
|
var Container2 = dt(Flex)`
|
9476
9594
|
position: relative;
|
9477
9595
|
`;
|
9478
9596
|
|
9479
9597
|
// src/components/ui/progress-bar/ProgressBar.tsx
|
9480
|
-
import { jsx as
|
9598
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
9481
9599
|
var ProgressBar = ({
|
9482
9600
|
progress,
|
9483
9601
|
value,
|
@@ -9493,21 +9611,21 @@ var ProgressBar = ({
|
|
9493
9611
|
orange: "#DB6769",
|
9494
9612
|
red: "#EF4444"
|
9495
9613
|
};
|
9496
|
-
return /* @__PURE__ */
|
9614
|
+
return /* @__PURE__ */ jsxs3(
|
9497
9615
|
Container2,
|
9498
9616
|
{
|
9499
9617
|
$alignItems: "center",
|
9500
9618
|
$gap: `${16 / TEXT_BASE_SIZE}rem`,
|
9501
9619
|
...props,
|
9502
9620
|
children: [
|
9503
|
-
/* @__PURE__ */
|
9621
|
+
/* @__PURE__ */ jsx8(
|
9504
9622
|
Flex,
|
9505
9623
|
{
|
9506
9624
|
$position: "relative",
|
9507
9625
|
$alignItems: "center",
|
9508
9626
|
$width: `${barWidth}`,
|
9509
9627
|
$maxWidth: "100%",
|
9510
|
-
children: /* @__PURE__ */
|
9628
|
+
children: /* @__PURE__ */ jsx8(
|
9511
9629
|
Flex,
|
9512
9630
|
{
|
9513
9631
|
$position: "relative",
|
@@ -9516,7 +9634,7 @@ var ProgressBar = ({
|
|
9516
9634
|
$height: `${8 / TEXT_BASE_SIZE}rem`,
|
9517
9635
|
$background: "#F2F4F7",
|
9518
9636
|
$borderRadius: "9999px",
|
9519
|
-
children: /* @__PURE__ */
|
9637
|
+
children: /* @__PURE__ */ jsx8(
|
9520
9638
|
Box,
|
9521
9639
|
{
|
9522
9640
|
$width: `${Math.min(progress, 100)}%`,
|
@@ -9529,7 +9647,7 @@ var ProgressBar = ({
|
|
9529
9647
|
)
|
9530
9648
|
}
|
9531
9649
|
),
|
9532
|
-
total !== 0 && /* @__PURE__ */
|
9650
|
+
total !== 0 && /* @__PURE__ */ jsxs3(Text, { $size: 14, $weight: 500, children: [
|
9533
9651
|
value,
|
9534
9652
|
"/",
|
9535
9653
|
total
|
@@ -9540,13 +9658,7 @@ var ProgressBar = ({
|
|
9540
9658
|
};
|
9541
9659
|
|
9542
9660
|
// src/components/elements/plan-manager/CheckoutDialog.tsx
|
9543
|
-
import {
|
9544
|
-
useEffect as useEffect4,
|
9545
|
-
useMemo as useMemo2,
|
9546
|
-
useRef as useRef2,
|
9547
|
-
useState as useState5,
|
9548
|
-
useCallback as useCallback2
|
9549
|
-
} from "react";
|
9661
|
+
import { useMemo as useMemo2, useState as useState5 } from "react";
|
9550
9662
|
|
9551
9663
|
// src/components/elements/plan-manager/PaymentForm.tsx
|
9552
9664
|
import { useState as useState4 } from "react";
|
@@ -9564,7 +9676,18 @@ var StyledButton = dt(Button2)`
|
|
9564
9676
|
width: 100%;
|
9565
9677
|
${({ disabled, $color = "primary", theme }) => {
|
9566
9678
|
const { l: l2 } = hexToHSL(theme[$color]);
|
9567
|
-
|
9679
|
+
let textColor;
|
9680
|
+
let colorFn;
|
9681
|
+
if (l2 > 50) {
|
9682
|
+
textColor = "#000000";
|
9683
|
+
colorFn = lighten;
|
9684
|
+
} else {
|
9685
|
+
textColor = "#FFFFFF";
|
9686
|
+
colorFn = darken;
|
9687
|
+
}
|
9688
|
+
if (disabled) {
|
9689
|
+
textColor = colorFn(textColor, 42.5);
|
9690
|
+
}
|
9568
9691
|
return lt`
|
9569
9692
|
color: ${textColor};
|
9570
9693
|
|
@@ -9575,35 +9698,47 @@ var StyledButton = dt(Button2)`
|
|
9575
9698
|
}};
|
9576
9699
|
|
9577
9700
|
${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
|
9578
|
-
|
9701
|
+
let color = theme[$color];
|
9702
|
+
if (disabled) {
|
9703
|
+
const { l: l2 } = hexToHSL(theme.card.background);
|
9704
|
+
color = hslToHex({ h: 0, s: 0, l: l2 });
|
9705
|
+
color = l2 > 50 ? darken(color, 7.5) : lighten(color, 7.5);
|
9706
|
+
}
|
9579
9707
|
return $variant === "filled" ? lt`
|
9580
9708
|
background-color: ${color};
|
9581
9709
|
border-color: ${color};
|
9582
9710
|
` : lt`
|
9583
9711
|
background-color: transparent;
|
9584
|
-
border-color:
|
9585
|
-
color:
|
9712
|
+
border-color: ${color};
|
9713
|
+
color: ${color};
|
9714
|
+
|
9586
9715
|
${Text} {
|
9587
|
-
color:
|
9716
|
+
color: ${color};
|
9588
9717
|
}
|
9589
9718
|
`;
|
9590
9719
|
}}
|
9591
9720
|
|
9592
|
-
&:hover {
|
9593
|
-
|
9594
|
-
|
9721
|
+
&:disabled:hover {
|
9722
|
+
cursor: not-allowed;
|
9723
|
+
}
|
9724
|
+
|
9725
|
+
&:not(:disabled):hover {
|
9726
|
+
${({ $color = "primary", theme, $variant = "filled" }) => {
|
9595
9727
|
const specified = theme[$color];
|
9596
9728
|
const lightened = lighten(specified, 15);
|
9597
|
-
const color =
|
9729
|
+
const color = specified === lightened ? darken(specified, 15) : lightened;
|
9730
|
+
const { l: l2 } = hexToHSL(theme[$color]);
|
9731
|
+
const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
|
9598
9732
|
return $variant === "filled" ? lt`
|
9599
9733
|
background-color: ${color};
|
9600
9734
|
border-color: ${color};
|
9601
9735
|
` : lt`
|
9602
9736
|
background-color: ${color};
|
9603
9737
|
border-color: ${color};
|
9604
|
-
color:
|
9738
|
+
color: ${textColor};
|
9739
|
+
|
9605
9740
|
${Text} {
|
9606
|
-
color:
|
9741
|
+
color: ${textColor};
|
9607
9742
|
}
|
9608
9743
|
`;
|
9609
9744
|
}}
|
@@ -9634,7 +9769,7 @@ var StyledButton = dt(Button2)`
|
|
9634
9769
|
`;
|
9635
9770
|
|
9636
9771
|
// src/components/elements/plan-manager/PaymentForm.tsx
|
9637
|
-
import { jsx as
|
9772
|
+
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
9638
9773
|
var PaymentForm = ({ plan, period, onConfirm }) => {
|
9639
9774
|
const stripe = useStripe();
|
9640
9775
|
const elements = useElements();
|
@@ -9665,8 +9800,6 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9665
9800
|
}
|
9666
9801
|
if (error?.type === "card_error" || error?.type === "validation_error") {
|
9667
9802
|
setMessage(error.message);
|
9668
|
-
} else {
|
9669
|
-
setMessage("An unexpected error occured.");
|
9670
9803
|
}
|
9671
9804
|
setIsLoading(false);
|
9672
9805
|
} catch (error) {
|
@@ -9678,7 +9811,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9678
9811
|
setIsLoading(false);
|
9679
9812
|
}
|
9680
9813
|
};
|
9681
|
-
return /* @__PURE__ */
|
9814
|
+
return /* @__PURE__ */ jsxs4(
|
9682
9815
|
"form",
|
9683
9816
|
{
|
9684
9817
|
id: "payment-form",
|
@@ -9691,27 +9824,15 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9691
9824
|
overflowY: "auto"
|
9692
9825
|
},
|
9693
9826
|
children: [
|
9694
|
-
/* @__PURE__ */
|
9695
|
-
|
9696
|
-
{
|
9697
|
-
$fontSize: "18px",
|
9698
|
-
$marginBottom: "1.5rem",
|
9699
|
-
$display: "inline-block",
|
9700
|
-
$width: "100%",
|
9701
|
-
children: [
|
9702
|
-
"Add payment method",
|
9703
|
-
" "
|
9704
|
-
]
|
9705
|
-
}
|
9706
|
-
),
|
9707
|
-
/* @__PURE__ */ jsx7(
|
9827
|
+
/* @__PURE__ */ jsx9(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx9(Text, { $size: 18, children: "Add payment method" }) }),
|
9828
|
+
/* @__PURE__ */ jsx9(
|
9708
9829
|
Flex,
|
9709
9830
|
{
|
9710
9831
|
$flexDirection: "column",
|
9711
9832
|
$gap: "1.5rem",
|
9712
9833
|
$marginBottom: "1.5rem",
|
9713
9834
|
$width: "100%",
|
9714
|
-
children: /* @__PURE__ */
|
9835
|
+
children: /* @__PURE__ */ jsx9(
|
9715
9836
|
LinkAuthenticationElement,
|
9716
9837
|
{
|
9717
9838
|
id: "link-authentication-element"
|
@@ -9719,18 +9840,18 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9719
9840
|
)
|
9720
9841
|
}
|
9721
9842
|
),
|
9722
|
-
/* @__PURE__ */
|
9723
|
-
/* @__PURE__ */
|
9724
|
-
message && /* @__PURE__ */
|
9843
|
+
/* @__PURE__ */ jsxs4(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
|
9844
|
+
/* @__PURE__ */ jsx9(PaymentElement, { id: "payment-element" }),
|
9845
|
+
message && /* @__PURE__ */ jsx9(Text, { id: "payment-message", children: message })
|
9725
9846
|
] }),
|
9726
|
-
/* @__PURE__ */
|
9847
|
+
/* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsx9(
|
9727
9848
|
StyledButton,
|
9728
9849
|
{
|
9729
9850
|
id: "submit",
|
9730
9851
|
disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
|
9731
9852
|
$size: "md",
|
9732
9853
|
$color: "primary",
|
9733
|
-
children: /* @__PURE__ */
|
9854
|
+
children: /* @__PURE__ */ jsx9(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
|
9734
9855
|
}
|
9735
9856
|
) })
|
9736
9857
|
]
|
@@ -9739,355 +9860,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9739
9860
|
};
|
9740
9861
|
|
9741
9862
|
// src/components/elements/plan-manager/CheckoutDialog.tsx
|
9742
|
-
import { Fragment, jsx as
|
9743
|
-
var OverlayHeader = ({
|
9744
|
-
children,
|
9745
|
-
onClose
|
9746
|
-
}) => {
|
9747
|
-
const { setLayout } = useEmbed();
|
9748
|
-
const handleClose = useCallback2(() => {
|
9749
|
-
setLayout("portal");
|
9750
|
-
onClose?.();
|
9751
|
-
}, [setLayout, onClose]);
|
9752
|
-
return /* @__PURE__ */ jsxs4(
|
9753
|
-
Flex,
|
9754
|
-
{
|
9755
|
-
$paddingLeft: "2.5rem",
|
9756
|
-
$paddingRight: "2.5rem",
|
9757
|
-
$padding: ".75rem 2.5rem",
|
9758
|
-
$flexDirection: "row",
|
9759
|
-
$justifyContent: "space-between",
|
9760
|
-
$alignItems: "center",
|
9761
|
-
$borderBottom: "1px solid #DEDEDE",
|
9762
|
-
$gap: "1rem",
|
9763
|
-
$backgroundColor: "#FFFFFF",
|
9764
|
-
$borderRadius: ".5rem .5rem 0 0",
|
9765
|
-
children: [
|
9766
|
-
children,
|
9767
|
-
/* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ jsx8(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } }) }) })
|
9768
|
-
]
|
9769
|
-
}
|
9770
|
-
);
|
9771
|
-
};
|
9772
|
-
var OverlayWrapper = ({
|
9773
|
-
children,
|
9774
|
-
size = "lg",
|
9775
|
-
onClose
|
9776
|
-
}) => {
|
9777
|
-
const { setLayout } = useEmbed();
|
9778
|
-
const ref = useRef2(null);
|
9779
|
-
const sizeWidthMap = {
|
9780
|
-
md: "700px",
|
9781
|
-
lg: "75%"
|
9782
|
-
};
|
9783
|
-
const sizeHeighthMap = {
|
9784
|
-
md: "auto",
|
9785
|
-
lg: "75%"
|
9786
|
-
};
|
9787
|
-
const sizeMaxWidthMap = {
|
9788
|
-
md: "auto",
|
9789
|
-
lg: "1140px"
|
9790
|
-
};
|
9791
|
-
const handleClose = useCallback2(() => {
|
9792
|
-
setLayout("portal");
|
9793
|
-
onClose?.();
|
9794
|
-
}, [setLayout, onClose]);
|
9795
|
-
useEffect4(() => {
|
9796
|
-
ref.current?.focus();
|
9797
|
-
}, []);
|
9798
|
-
return /* @__PURE__ */ jsx8(
|
9799
|
-
Box,
|
9800
|
-
{
|
9801
|
-
ref,
|
9802
|
-
tabIndex: 0,
|
9803
|
-
onClick: (event) => {
|
9804
|
-
if (event.target === event.currentTarget) {
|
9805
|
-
handleClose();
|
9806
|
-
}
|
9807
|
-
},
|
9808
|
-
onKeyDown: (event) => {
|
9809
|
-
if (event.key === "Escape") {
|
9810
|
-
handleClose();
|
9811
|
-
}
|
9812
|
-
},
|
9813
|
-
$position: "absolute",
|
9814
|
-
$top: "50%",
|
9815
|
-
$left: "50%",
|
9816
|
-
$zIndex: "999999",
|
9817
|
-
$transform: "translate(-50%, -50%)",
|
9818
|
-
$width: "100%",
|
9819
|
-
$height: "100%",
|
9820
|
-
$backgroundColor: "#D9D9D9",
|
9821
|
-
$overflow: "hidden",
|
9822
|
-
children: /* @__PURE__ */ jsx8(
|
9823
|
-
Flex,
|
9824
|
-
{
|
9825
|
-
$position: "relative",
|
9826
|
-
$top: "50%",
|
9827
|
-
$left: "50%",
|
9828
|
-
$transform: "translate(-50%, -50%)",
|
9829
|
-
$flexDirection: "column",
|
9830
|
-
$maxWidth: sizeMaxWidthMap[size],
|
9831
|
-
$width: sizeWidthMap[size],
|
9832
|
-
$height: sizeHeighthMap[size],
|
9833
|
-
$backgroundColor: "#FBFBFB",
|
9834
|
-
$borderBottom: "1px solid #DEDEDE",
|
9835
|
-
$borderRadius: "8px",
|
9836
|
-
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
9837
|
-
id: "select-plan-dialog",
|
9838
|
-
role: "dialog",
|
9839
|
-
"aria-labelledby": "select-plan-dialog-label",
|
9840
|
-
"aria-modal": "true",
|
9841
|
-
children
|
9842
|
-
}
|
9843
|
-
)
|
9844
|
-
}
|
9845
|
-
);
|
9846
|
-
};
|
9847
|
-
var OverlaySideBar = ({
|
9848
|
-
pricePeriod,
|
9849
|
-
setPricePeriod,
|
9850
|
-
checkoutStage,
|
9851
|
-
setCheckoutStage,
|
9852
|
-
currentPlan,
|
9853
|
-
selectedPlan,
|
9854
|
-
paymentMethodId
|
9855
|
-
}) => {
|
9856
|
-
const { api } = useEmbed();
|
9857
|
-
const savingsPercentage = useMemo2(() => {
|
9858
|
-
if (selectedPlan && pricePeriod === "month") {
|
9859
|
-
const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
|
9860
|
-
const yearly = selectedPlan?.yearlyPrice?.price || 0;
|
9861
|
-
return Math.round((monthly - yearly) / monthly * 1e4) / 100;
|
9862
|
-
}
|
9863
|
-
return 0;
|
9864
|
-
}, [selectedPlan, pricePeriod]);
|
9865
|
-
return /* @__PURE__ */ jsxs4(
|
9866
|
-
Flex,
|
9867
|
-
{
|
9868
|
-
$flexDirection: "column",
|
9869
|
-
$background: "white",
|
9870
|
-
$borderRadius: "0 0 0.5rem",
|
9871
|
-
$maxWidth: "275px",
|
9872
|
-
$height: "100%",
|
9873
|
-
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
9874
|
-
children: [
|
9875
|
-
/* @__PURE__ */ jsxs4(
|
9876
|
-
Flex,
|
9877
|
-
{
|
9878
|
-
$flexDirection: "column",
|
9879
|
-
$position: "relative",
|
9880
|
-
$gap: "1rem",
|
9881
|
-
$width: "100%",
|
9882
|
-
$height: "auto",
|
9883
|
-
$padding: "1.5rem",
|
9884
|
-
$borderBottom: "1px solid #DEDEDE",
|
9885
|
-
children: [
|
9886
|
-
/* @__PURE__ */ jsx8(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ jsx8(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
|
9887
|
-
/* @__PURE__ */ jsxs4(
|
9888
|
-
Flex,
|
9889
|
-
{
|
9890
|
-
$flexDirection: "row",
|
9891
|
-
$border: "1px solid #D9D9D9",
|
9892
|
-
$borderRadius: "40px",
|
9893
|
-
$fontSize: "12px",
|
9894
|
-
$textAlign: "center",
|
9895
|
-
$cursor: "pointer",
|
9896
|
-
children: [
|
9897
|
-
/* @__PURE__ */ jsx8(
|
9898
|
-
Box,
|
9899
|
-
{
|
9900
|
-
onClick: () => setPricePeriod("month"),
|
9901
|
-
$padding: ".25rem .5rem",
|
9902
|
-
$flex: "1",
|
9903
|
-
$fontWeight: pricePeriod === "month" ? "600" : "400",
|
9904
|
-
$backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
|
9905
|
-
$borderRadius: "40px",
|
9906
|
-
children: "Billed monthly"
|
9907
|
-
}
|
9908
|
-
),
|
9909
|
-
/* @__PURE__ */ jsx8(
|
9910
|
-
Box,
|
9911
|
-
{
|
9912
|
-
onClick: () => setPricePeriod("year"),
|
9913
|
-
$padding: ".25rem .5rem",
|
9914
|
-
$flex: "1",
|
9915
|
-
$fontWeight: pricePeriod === "year" ? "600" : "400",
|
9916
|
-
$backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
|
9917
|
-
$borderRadius: "40px",
|
9918
|
-
children: "Billed yearly"
|
9919
|
-
}
|
9920
|
-
)
|
9921
|
-
]
|
9922
|
-
}
|
9923
|
-
),
|
9924
|
-
savingsPercentage > 0 && /* @__PURE__ */ jsxs4(Box, { $fontSize: "11px", $color: "#194BFB", children: [
|
9925
|
-
"Save up to ",
|
9926
|
-
savingsPercentage,
|
9927
|
-
"% with yearly billing"
|
9928
|
-
] })
|
9929
|
-
]
|
9930
|
-
}
|
9931
|
-
),
|
9932
|
-
/* @__PURE__ */ jsxs4(
|
9933
|
-
Flex,
|
9934
|
-
{
|
9935
|
-
$flexDirection: "column",
|
9936
|
-
$position: "relative",
|
9937
|
-
$gap: "1rem",
|
9938
|
-
$width: "100%",
|
9939
|
-
$height: "auto",
|
9940
|
-
$padding: "1.5rem",
|
9941
|
-
$flex: "1",
|
9942
|
-
$borderBottom: "1px solid #DEDEDE",
|
9943
|
-
children: [
|
9944
|
-
/* @__PURE__ */ jsx8(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
|
9945
|
-
/* @__PURE__ */ jsxs4(
|
9946
|
-
Flex,
|
9947
|
-
{
|
9948
|
-
$flexDirection: "column",
|
9949
|
-
$fontSize: "14px",
|
9950
|
-
$color: "#5D5D5D",
|
9951
|
-
$gap: ".5rem",
|
9952
|
-
children: [
|
9953
|
-
currentPlan && /* @__PURE__ */ jsxs4(
|
9954
|
-
Flex,
|
9955
|
-
{
|
9956
|
-
$flexDirection: "row",
|
9957
|
-
$alignItems: "center",
|
9958
|
-
$justifyContent: "space-between",
|
9959
|
-
$fontSize: "14px",
|
9960
|
-
$color: "#5D5D5D",
|
9961
|
-
children: [
|
9962
|
-
/* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
|
9963
|
-
typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs4(Flex, { $fontSize: "12px", $color: "#000000", children: [
|
9964
|
-
formatCurrency(currentPlan.planPrice),
|
9965
|
-
"/",
|
9966
|
-
currentPlan.planPeriod
|
9967
|
-
] })
|
9968
|
-
]
|
9969
|
-
}
|
9970
|
-
),
|
9971
|
-
selectedPlan && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
9972
|
-
/* @__PURE__ */ jsx8(
|
9973
|
-
Box,
|
9974
|
-
{
|
9975
|
-
$width: "100%",
|
9976
|
-
$textAlign: "left",
|
9977
|
-
$opacity: "50%",
|
9978
|
-
$marginBottom: "-.25rem",
|
9979
|
-
$marginTop: "-.25rem",
|
9980
|
-
children: /* @__PURE__ */ jsx8(
|
9981
|
-
Icon2,
|
9982
|
-
{
|
9983
|
-
name: "arrow-down",
|
9984
|
-
style: {
|
9985
|
-
display: "inline-block"
|
9986
|
-
}
|
9987
|
-
}
|
9988
|
-
)
|
9989
|
-
}
|
9990
|
-
),
|
9991
|
-
/* @__PURE__ */ jsxs4(
|
9992
|
-
Flex,
|
9993
|
-
{
|
9994
|
-
$flexDirection: "row",
|
9995
|
-
$alignItems: "center",
|
9996
|
-
$justifyContent: "space-between",
|
9997
|
-
$fontSize: "14px",
|
9998
|
-
$color: "#5D5D5D",
|
9999
|
-
children: [
|
10000
|
-
/* @__PURE__ */ jsx8(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
|
10001
|
-
/* @__PURE__ */ jsxs4(Flex, { $fontSize: "12px", $color: "#000000", children: [
|
10002
|
-
formatCurrency(
|
10003
|
-
(pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
|
10004
|
-
),
|
10005
|
-
"/",
|
10006
|
-
pricePeriod
|
10007
|
-
] })
|
10008
|
-
]
|
10009
|
-
}
|
10010
|
-
)
|
10011
|
-
] })
|
10012
|
-
]
|
10013
|
-
}
|
10014
|
-
)
|
10015
|
-
]
|
10016
|
-
}
|
10017
|
-
),
|
10018
|
-
/* @__PURE__ */ jsxs4(
|
10019
|
-
Flex,
|
10020
|
-
{
|
10021
|
-
$flexDirection: "column",
|
10022
|
-
$position: "relative",
|
10023
|
-
$gap: ".75rem",
|
10024
|
-
$width: "100%",
|
10025
|
-
$height: "auto",
|
10026
|
-
$padding: "1.5rem",
|
10027
|
-
children: [
|
10028
|
-
selectedPlan && /* @__PURE__ */ jsxs4(
|
10029
|
-
Flex,
|
10030
|
-
{
|
10031
|
-
$fontSize: "12px",
|
10032
|
-
$color: "#5D5D5D",
|
10033
|
-
$justifyContent: "space-between",
|
10034
|
-
children: [
|
10035
|
-
/* @__PURE__ */ jsxs4(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
|
10036
|
-
"Monthly total:",
|
10037
|
-
" "
|
10038
|
-
] }),
|
10039
|
-
/* @__PURE__ */ jsxs4(Box, { $fontSize: "12px", $color: "#000000", children: [
|
10040
|
-
formatCurrency(
|
10041
|
-
(pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
|
10042
|
-
),
|
10043
|
-
"/",
|
10044
|
-
pricePeriod
|
10045
|
-
] })
|
10046
|
-
]
|
10047
|
-
}
|
10048
|
-
),
|
10049
|
-
checkoutStage === "plan" ? /* @__PURE__ */ jsx8(
|
10050
|
-
StyledButton,
|
10051
|
-
{
|
10052
|
-
$size: "sm",
|
10053
|
-
onClick: () => {
|
10054
|
-
setCheckoutStage("checkout");
|
10055
|
-
},
|
10056
|
-
...!selectedPlan && { disabled: true },
|
10057
|
-
children: /* @__PURE__ */ jsxs4(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
|
10058
|
-
/* @__PURE__ */ jsx8("span", { children: "Next: Checkout" }),
|
10059
|
-
/* @__PURE__ */ jsx8(Icon2, { name: "arrow-right" })
|
10060
|
-
] })
|
10061
|
-
}
|
10062
|
-
) : /* @__PURE__ */ jsx8(
|
10063
|
-
StyledButton,
|
10064
|
-
{
|
10065
|
-
disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId,
|
10066
|
-
onClick: async () => {
|
10067
|
-
const priceId = (pricePeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
|
10068
|
-
if (!api || !selectedPlan || !priceId || !paymentMethodId) {
|
10069
|
-
return;
|
10070
|
-
}
|
10071
|
-
await api.checkout({
|
10072
|
-
changeSubscriptionRequestBody: {
|
10073
|
-
newPlanId: selectedPlan.id,
|
10074
|
-
newPriceId: priceId,
|
10075
|
-
paymentMethodId
|
10076
|
-
}
|
10077
|
-
});
|
10078
|
-
},
|
10079
|
-
$size: "md",
|
10080
|
-
children: "Pay now"
|
10081
|
-
}
|
10082
|
-
),
|
10083
|
-
/* @__PURE__ */ jsx8(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
|
10084
|
-
]
|
10085
|
-
}
|
10086
|
-
)
|
10087
|
-
]
|
10088
|
-
}
|
10089
|
-
);
|
10090
|
-
};
|
9863
|
+
import { Fragment, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
10091
9864
|
var CheckoutDialog = () => {
|
10092
9865
|
const [checkoutStage, setCheckoutStage] = useState5(
|
10093
9866
|
"plan"
|
@@ -10095,40 +9868,52 @@ var CheckoutDialog = () => {
|
|
10095
9868
|
const [planPeriod, setPlanPeriod] = useState5("month");
|
10096
9869
|
const [selectedPlan, setSelectedPlan] = useState5();
|
10097
9870
|
const [paymentMethodId, setPaymentMethodId] = useState5();
|
10098
|
-
const
|
9871
|
+
const [isLoading, setIsLoading] = useState5(false);
|
9872
|
+
const [isCheckoutComplete, setIsCheckoutComplete] = useState5(false);
|
9873
|
+
const theme = nt();
|
9874
|
+
const { api, data, settings } = useEmbed();
|
10099
9875
|
const { currentPlan, availablePlans } = useMemo2(() => {
|
10100
9876
|
return {
|
10101
9877
|
currentPlan: data.company?.plan,
|
10102
9878
|
availablePlans: data.activePlans
|
10103
9879
|
};
|
10104
9880
|
}, [data.company, data.activePlans]);
|
10105
|
-
|
10106
|
-
|
10107
|
-
|
10108
|
-
|
9881
|
+
const savingsPercentage = useMemo2(() => {
|
9882
|
+
if (selectedPlan) {
|
9883
|
+
const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
|
9884
|
+
const yearly = selectedPlan?.yearlyPrice?.price || 0;
|
9885
|
+
return Math.round((monthly - yearly) / monthly * 1e4) / 100;
|
9886
|
+
}
|
9887
|
+
return 0;
|
9888
|
+
}, [selectedPlan]);
|
9889
|
+
return /* @__PURE__ */ jsxs5(Modal, { children: [
|
9890
|
+
/* @__PURE__ */ jsx10(ModalHeader, { children: /* @__PURE__ */ jsx10(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ jsxs5(Fragment, { children: [
|
9891
|
+
/* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
|
9892
|
+
checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
|
10109
9893
|
Box,
|
10110
9894
|
{
|
10111
|
-
$width: "
|
10112
|
-
$height: "
|
10113
|
-
$
|
10114
|
-
$
|
10115
|
-
$
|
9895
|
+
$width: "0.9375rem",
|
9896
|
+
$height: "0.9375rem",
|
9897
|
+
$borderWidth: "2px",
|
9898
|
+
$borderStyle: "solid",
|
9899
|
+
$borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
|
9900
|
+
$borderRadius: "9999px"
|
10116
9901
|
}
|
10117
|
-
) : /* @__PURE__ */
|
9902
|
+
) : /* @__PURE__ */ jsx10(
|
10118
9903
|
IconRound,
|
10119
9904
|
{
|
10120
9905
|
name: "check",
|
10121
9906
|
style: {
|
10122
|
-
color:
|
10123
|
-
backgroundColor:
|
9907
|
+
color: theme.card.background,
|
9908
|
+
backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
|
10124
9909
|
fontSize: 16,
|
10125
9910
|
width: "1rem",
|
10126
9911
|
height: "1rem"
|
10127
9912
|
}
|
10128
9913
|
}
|
10129
9914
|
),
|
10130
|
-
/* @__PURE__ */
|
10131
|
-
|
9915
|
+
/* @__PURE__ */ jsx10(
|
9916
|
+
Box,
|
10132
9917
|
{
|
10133
9918
|
tabIndex: 0,
|
10134
9919
|
...checkoutStage === "plan" ? {
|
@@ -10141,30 +9926,34 @@ var CheckoutDialog = () => {
|
|
10141
9926
|
},
|
10142
9927
|
onClick: () => setCheckoutStage("plan")
|
10143
9928
|
},
|
10144
|
-
children: "1. Select plan"
|
9929
|
+
children: /* @__PURE__ */ jsx10(Text, { children: "1. Select plan" })
|
10145
9930
|
}
|
10146
9931
|
),
|
10147
|
-
/* @__PURE__ */
|
9932
|
+
/* @__PURE__ */ jsx10(
|
10148
9933
|
Icon2,
|
10149
9934
|
{
|
10150
9935
|
name: "chevron-right",
|
10151
|
-
style: {
|
9936
|
+
style: {
|
9937
|
+
fontSize: 16,
|
9938
|
+
color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
|
9939
|
+
}
|
10152
9940
|
}
|
10153
9941
|
)
|
10154
9942
|
] }),
|
10155
|
-
/* @__PURE__ */
|
10156
|
-
/* @__PURE__ */
|
9943
|
+
/* @__PURE__ */ jsxs5(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
|
9944
|
+
/* @__PURE__ */ jsx10(
|
10157
9945
|
Box,
|
10158
9946
|
{
|
10159
|
-
$width: "
|
10160
|
-
$height: "
|
10161
|
-
$
|
10162
|
-
$
|
10163
|
-
$
|
9947
|
+
$width: "0.9375rem",
|
9948
|
+
$height: "0.9375rem",
|
9949
|
+
$borderWidth: "2px",
|
9950
|
+
$borderStyle: "solid",
|
9951
|
+
$borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
|
9952
|
+
$borderRadius: "9999px"
|
10164
9953
|
}
|
10165
9954
|
),
|
10166
|
-
/* @__PURE__ */
|
10167
|
-
|
9955
|
+
/* @__PURE__ */ jsx10(
|
9956
|
+
Box,
|
10168
9957
|
{
|
10169
9958
|
tabIndex: 0,
|
10170
9959
|
...checkoutStage === "checkout" && {
|
@@ -10172,36 +9961,51 @@ var CheckoutDialog = () => {
|
|
10172
9961
|
fontWeight: "700"
|
10173
9962
|
}
|
10174
9963
|
},
|
10175
|
-
children: "2. Checkout"
|
9964
|
+
children: /* @__PURE__ */ jsx10(Text, { children: "2. Checkout" })
|
10176
9965
|
}
|
10177
9966
|
)
|
10178
9967
|
] })
|
10179
|
-
] }) }),
|
10180
|
-
/* @__PURE__ */
|
10181
|
-
|
9968
|
+
] }) }) }),
|
9969
|
+
isCheckoutComplete && /* @__PURE__ */ jsx10(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ jsx10(
|
9970
|
+
Text,
|
9971
|
+
{
|
9972
|
+
as: "h1",
|
9973
|
+
$font: theme.typography.heading1.fontFamily,
|
9974
|
+
$size: theme.typography.heading1.fontSize,
|
9975
|
+
$weight: theme.typography.heading1.fontWeight,
|
9976
|
+
$color: theme.typography.heading1.color,
|
9977
|
+
children: "Subscription updated!"
|
9978
|
+
}
|
9979
|
+
) }),
|
9980
|
+
!isCheckoutComplete && /* @__PURE__ */ jsxs5(Flex, { $position: "relative", $flexGrow: "1", children: [
|
9981
|
+
/* @__PURE__ */ jsxs5(
|
10182
9982
|
Flex,
|
10183
9983
|
{
|
9984
|
+
$position: "absolute",
|
9985
|
+
$top: "0",
|
9986
|
+
$left: "0",
|
10184
9987
|
$flexDirection: "column",
|
10185
9988
|
$gap: "1rem",
|
10186
9989
|
$padding: "2rem 2.5rem 2rem 2.5rem",
|
10187
|
-
$backgroundColor:
|
10188
|
-
$borderRadius: "0 0.5rem 0",
|
9990
|
+
$backgroundColor: darken(settings.theme.card.background, 2.5),
|
10189
9991
|
$flex: "1",
|
9992
|
+
$width: "72.5%",
|
10190
9993
|
$height: "100%",
|
9994
|
+
$overflow: "auto",
|
10191
9995
|
children: [
|
10192
|
-
checkoutStage === "plan" && /* @__PURE__ */
|
10193
|
-
/* @__PURE__ */
|
10194
|
-
/* @__PURE__ */
|
9996
|
+
checkoutStage === "plan" && /* @__PURE__ */ jsxs5(Fragment, { children: [
|
9997
|
+
/* @__PURE__ */ jsxs5(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
|
9998
|
+
/* @__PURE__ */ jsx10(
|
10195
9999
|
Text,
|
10196
10000
|
{
|
10197
10001
|
as: "h1",
|
10198
10002
|
id: "select-plan-dialog-label",
|
10199
10003
|
$size: 18,
|
10200
|
-
$marginBottom: ".5rem",
|
10004
|
+
$marginBottom: "0.5rem",
|
10201
10005
|
children: "Select plan"
|
10202
10006
|
}
|
10203
10007
|
),
|
10204
|
-
/* @__PURE__ */
|
10008
|
+
/* @__PURE__ */ jsx10(
|
10205
10009
|
Text,
|
10206
10010
|
{
|
10207
10011
|
as: "p",
|
@@ -10212,19 +10016,23 @@ var CheckoutDialog = () => {
|
|
10212
10016
|
}
|
10213
10017
|
)
|
10214
10018
|
] }),
|
10215
|
-
/* @__PURE__ */
|
10216
|
-
return /* @__PURE__ */
|
10019
|
+
/* @__PURE__ */ jsx10(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
|
10020
|
+
return /* @__PURE__ */ jsxs5(
|
10217
10021
|
Flex,
|
10218
10022
|
{
|
10219
10023
|
$height: "100%",
|
10220
10024
|
$flexDirection: "column",
|
10221
|
-
$backgroundColor:
|
10025
|
+
$backgroundColor: settings.theme.card.background,
|
10222
10026
|
$flex: "1",
|
10223
|
-
$
|
10224
|
-
$
|
10225
|
-
$
|
10027
|
+
$outlineWidth: "2px",
|
10028
|
+
$outlineStyle: "solid",
|
10029
|
+
$outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
|
10030
|
+
$borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
|
10031
|
+
...settings.theme.card.hasShadow && {
|
10032
|
+
$boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
|
10033
|
+
},
|
10226
10034
|
children: [
|
10227
|
-
/* @__PURE__ */
|
10035
|
+
/* @__PURE__ */ jsxs5(
|
10228
10036
|
Flex,
|
10229
10037
|
{
|
10230
10038
|
$flexDirection: "column",
|
@@ -10232,38 +10040,40 @@ var CheckoutDialog = () => {
|
|
10232
10040
|
$gap: "1rem",
|
10233
10041
|
$width: "100%",
|
10234
10042
|
$height: "auto",
|
10235
|
-
$padding:
|
10236
|
-
$
|
10043
|
+
$padding: `${settings.theme.card.padding / 16}rem`,
|
10044
|
+
$borderBottomWidth: "1px",
|
10045
|
+
$borderStyle: "solid",
|
10046
|
+
$borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
|
10237
10047
|
children: [
|
10238
|
-
/* @__PURE__ */
|
10239
|
-
/* @__PURE__ */
|
10240
|
-
/* @__PURE__ */
|
10241
|
-
/* @__PURE__ */
|
10048
|
+
/* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: plan.name }),
|
10049
|
+
/* @__PURE__ */ jsx10(Text, { $size: 14, children: plan.description }),
|
10050
|
+
/* @__PURE__ */ jsxs5(Text, { children: [
|
10051
|
+
/* @__PURE__ */ jsx10(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
|
10242
10052
|
(planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
|
10243
10053
|
) }),
|
10244
|
-
/* @__PURE__ */
|
10054
|
+
/* @__PURE__ */ jsxs5(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
|
10245
10055
|
"/",
|
10246
10056
|
planPeriod
|
10247
10057
|
] })
|
10248
10058
|
] }),
|
10249
|
-
(plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */
|
10059
|
+
(plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx10(
|
10250
10060
|
Flex,
|
10251
10061
|
{
|
10252
10062
|
$position: "absolute",
|
10253
10063
|
$right: "1rem",
|
10254
10064
|
$top: "1rem",
|
10255
|
-
$fontSize: ".625rem",
|
10256
|
-
$color: "
|
10257
|
-
$backgroundColor:
|
10258
|
-
$borderRadius: "
|
10259
|
-
$padding: ".125rem .85rem",
|
10065
|
+
$fontSize: "0.625rem",
|
10066
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
10067
|
+
$backgroundColor: theme.primary,
|
10068
|
+
$borderRadius: "9999px",
|
10069
|
+
$padding: "0.125rem 0.85rem",
|
10260
10070
|
children: "Current plan"
|
10261
10071
|
}
|
10262
10072
|
)
|
10263
10073
|
]
|
10264
10074
|
}
|
10265
10075
|
),
|
10266
|
-
/* @__PURE__ */
|
10076
|
+
/* @__PURE__ */ jsx10(
|
10267
10077
|
Flex,
|
10268
10078
|
{
|
10269
10079
|
$flexDirection: "column",
|
@@ -10274,21 +10084,32 @@ var CheckoutDialog = () => {
|
|
10274
10084
|
$height: "auto",
|
10275
10085
|
$padding: "1.5rem",
|
10276
10086
|
children: plan.features.map((feature) => {
|
10277
|
-
return /* @__PURE__ */
|
10278
|
-
|
10279
|
-
|
10280
|
-
|
10281
|
-
|
10282
|
-
|
10283
|
-
|
10284
|
-
|
10285
|
-
|
10286
|
-
|
10287
|
-
|
10087
|
+
return /* @__PURE__ */ jsxs5(
|
10088
|
+
Flex,
|
10089
|
+
{
|
10090
|
+
$flexShrink: "0",
|
10091
|
+
$gap: "1rem",
|
10092
|
+
children: [
|
10093
|
+
/* @__PURE__ */ jsx10(
|
10094
|
+
IconRound,
|
10095
|
+
{
|
10096
|
+
name: feature.icon,
|
10097
|
+
size: "tn",
|
10098
|
+
colors: [
|
10099
|
+
settings.theme.primary,
|
10100
|
+
`${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
|
10101
|
+
]
|
10102
|
+
}
|
10103
|
+
),
|
10104
|
+
/* @__PURE__ */ jsx10(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx10(Text, { $size: 12, children: feature.name }) })
|
10105
|
+
]
|
10106
|
+
},
|
10107
|
+
feature.id
|
10108
|
+
);
|
10288
10109
|
})
|
10289
10110
|
}
|
10290
10111
|
),
|
10291
|
-
/* @__PURE__ */
|
10112
|
+
/* @__PURE__ */ jsxs5(
|
10292
10113
|
Flex,
|
10293
10114
|
{
|
10294
10115
|
$flexDirection: "column",
|
@@ -10298,7 +10119,7 @@ var CheckoutDialog = () => {
|
|
10298
10119
|
$height: "auto",
|
10299
10120
|
$padding: "1.5rem",
|
10300
10121
|
children: [
|
10301
|
-
plan.id === selectedPlan?.id && /* @__PURE__ */
|
10122
|
+
plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs5(
|
10302
10123
|
Flex,
|
10303
10124
|
{
|
10304
10125
|
$justifyContent: "center",
|
@@ -10307,22 +10128,22 @@ var CheckoutDialog = () => {
|
|
10307
10128
|
$fontSize: "0.9375rem",
|
10308
10129
|
$padding: "0.625rem 0",
|
10309
10130
|
children: [
|
10310
|
-
/* @__PURE__ */
|
10131
|
+
/* @__PURE__ */ jsx10(
|
10311
10132
|
Icon2,
|
10312
10133
|
{
|
10313
10134
|
name: "check-rounded",
|
10314
10135
|
style: {
|
10315
10136
|
fontSize: 20,
|
10316
10137
|
lineHeight: "1",
|
10317
|
-
color:
|
10138
|
+
color: theme.primary
|
10318
10139
|
}
|
10319
10140
|
}
|
10320
10141
|
),
|
10321
|
-
/* @__PURE__ */
|
10322
|
-
|
10142
|
+
/* @__PURE__ */ jsx10(
|
10143
|
+
Text,
|
10323
10144
|
{
|
10324
10145
|
style: {
|
10325
|
-
color: "#
|
10146
|
+
color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
|
10326
10147
|
lineHeight: "1.4"
|
10327
10148
|
},
|
10328
10149
|
children: "Selected"
|
@@ -10331,9 +10152,10 @@ var CheckoutDialog = () => {
|
|
10331
10152
|
]
|
10332
10153
|
}
|
10333
10154
|
),
|
10334
|
-
!(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */
|
10155
|
+
!(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx10(
|
10335
10156
|
StyledButton,
|
10336
10157
|
{
|
10158
|
+
disabled: plan.valid === false,
|
10337
10159
|
$size: "sm",
|
10338
10160
|
$color: "primary",
|
10339
10161
|
$variant: "outline",
|
@@ -10352,7 +10174,7 @@ var CheckoutDialog = () => {
|
|
10352
10174
|
);
|
10353
10175
|
}) })
|
10354
10176
|
] }),
|
10355
|
-
selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */
|
10177
|
+
selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ jsx10(
|
10356
10178
|
PaymentForm,
|
10357
10179
|
{
|
10358
10180
|
plan: selectedPlan,
|
@@ -10365,16 +10187,253 @@ var CheckoutDialog = () => {
|
|
10365
10187
|
]
|
10366
10188
|
}
|
10367
10189
|
),
|
10368
|
-
/* @__PURE__ */
|
10369
|
-
|
10190
|
+
/* @__PURE__ */ jsxs5(
|
10191
|
+
Flex,
|
10370
10192
|
{
|
10371
|
-
|
10372
|
-
|
10373
|
-
|
10374
|
-
|
10375
|
-
|
10376
|
-
|
10377
|
-
|
10193
|
+
$position: "absolute",
|
10194
|
+
$top: "0",
|
10195
|
+
$right: "0",
|
10196
|
+
$flexDirection: "column",
|
10197
|
+
$background: settings.theme.card.background,
|
10198
|
+
$borderRadius: "0 0 0.5rem",
|
10199
|
+
$width: "27.5%",
|
10200
|
+
$height: "100%",
|
10201
|
+
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
10202
|
+
children: [
|
10203
|
+
/* @__PURE__ */ jsxs5(
|
10204
|
+
Flex,
|
10205
|
+
{
|
10206
|
+
$flexDirection: "column",
|
10207
|
+
$position: "relative",
|
10208
|
+
$gap: "1rem",
|
10209
|
+
$width: "100%",
|
10210
|
+
$height: "auto",
|
10211
|
+
$padding: "1.5rem",
|
10212
|
+
$borderBottom: "1px solid #DEDEDE",
|
10213
|
+
children: [
|
10214
|
+
/* @__PURE__ */ jsx10(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ jsx10(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
|
10215
|
+
/* @__PURE__ */ jsxs5(
|
10216
|
+
Flex,
|
10217
|
+
{
|
10218
|
+
$border: "1px solid #D9D9D9",
|
10219
|
+
$borderRadius: "2.5rem",
|
10220
|
+
$cursor: "pointer",
|
10221
|
+
children: [
|
10222
|
+
/* @__PURE__ */ jsx10(
|
10223
|
+
Flex,
|
10224
|
+
{
|
10225
|
+
onClick: () => setPlanPeriod("month"),
|
10226
|
+
$justifyContent: "center",
|
10227
|
+
$alignItems: "center",
|
10228
|
+
$padding: "0.25rem 0.5rem",
|
10229
|
+
$flex: "1",
|
10230
|
+
$backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
|
10231
|
+
$borderRadius: "2.5rem",
|
10232
|
+
children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
|
10233
|
+
}
|
10234
|
+
),
|
10235
|
+
/* @__PURE__ */ jsx10(
|
10236
|
+
Flex,
|
10237
|
+
{
|
10238
|
+
onClick: () => setPlanPeriod("year"),
|
10239
|
+
$justifyContent: "center",
|
10240
|
+
$alignItems: "center",
|
10241
|
+
$padding: "0.25rem 0.5rem",
|
10242
|
+
$flex: "1",
|
10243
|
+
$backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
|
10244
|
+
$borderRadius: "2.5rem",
|
10245
|
+
children: /* @__PURE__ */ jsx10(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
|
10246
|
+
}
|
10247
|
+
)
|
10248
|
+
]
|
10249
|
+
}
|
10250
|
+
),
|
10251
|
+
savingsPercentage > 0 && /* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
|
10252
|
+
]
|
10253
|
+
}
|
10254
|
+
),
|
10255
|
+
/* @__PURE__ */ jsxs5(
|
10256
|
+
Flex,
|
10257
|
+
{
|
10258
|
+
$flexDirection: "column",
|
10259
|
+
$position: "relative",
|
10260
|
+
$gap: "1rem",
|
10261
|
+
$width: "100%",
|
10262
|
+
$height: "auto",
|
10263
|
+
$padding: "1.5rem",
|
10264
|
+
$flex: "1",
|
10265
|
+
$borderBottom: "1px solid #DEDEDE",
|
10266
|
+
children: [
|
10267
|
+
/* @__PURE__ */ jsx10(Box, { children: /* @__PURE__ */ jsx10(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
|
10268
|
+
/* @__PURE__ */ jsxs5(
|
10269
|
+
Flex,
|
10270
|
+
{
|
10271
|
+
$flexDirection: "column",
|
10272
|
+
$fontSize: "0.875rem",
|
10273
|
+
$color: "#5D5D5D",
|
10274
|
+
$gap: "0.5rem",
|
10275
|
+
children: [
|
10276
|
+
currentPlan && /* @__PURE__ */ jsxs5(
|
10277
|
+
Flex,
|
10278
|
+
{
|
10279
|
+
$alignItems: "center",
|
10280
|
+
$justifyContent: "space-between",
|
10281
|
+
$fontSize: "0.875rem",
|
10282
|
+
$color: "#5D5D5D",
|
10283
|
+
children: [
|
10284
|
+
/* @__PURE__ */ jsx10(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
|
10285
|
+
typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
|
10286
|
+
formatCurrency(currentPlan.planPrice),
|
10287
|
+
"/",
|
10288
|
+
currentPlan.planPeriod
|
10289
|
+
] })
|
10290
|
+
]
|
10291
|
+
}
|
10292
|
+
),
|
10293
|
+
selectedPlan && /* @__PURE__ */ jsxs5(Fragment, { children: [
|
10294
|
+
/* @__PURE__ */ jsx10(
|
10295
|
+
Box,
|
10296
|
+
{
|
10297
|
+
$width: "100%",
|
10298
|
+
$textAlign: "left",
|
10299
|
+
$opacity: "50%",
|
10300
|
+
$marginBottom: "-0.25rem",
|
10301
|
+
$marginTop: "-0.25rem",
|
10302
|
+
children: /* @__PURE__ */ jsx10(
|
10303
|
+
Icon2,
|
10304
|
+
{
|
10305
|
+
name: "arrow-down",
|
10306
|
+
style: {
|
10307
|
+
display: "inline-block"
|
10308
|
+
}
|
10309
|
+
}
|
10310
|
+
)
|
10311
|
+
}
|
10312
|
+
),
|
10313
|
+
/* @__PURE__ */ jsxs5(
|
10314
|
+
Flex,
|
10315
|
+
{
|
10316
|
+
$alignItems: "center",
|
10317
|
+
$justifyContent: "space-between",
|
10318
|
+
$fontSize: "0.875rem",
|
10319
|
+
$color: "#5D5D5D",
|
10320
|
+
children: [
|
10321
|
+
/* @__PURE__ */ jsx10(
|
10322
|
+
Flex,
|
10323
|
+
{
|
10324
|
+
$fontSize: "0.875rem",
|
10325
|
+
$color: "#000000",
|
10326
|
+
$fontWeight: "600",
|
10327
|
+
children: selectedPlan.name
|
10328
|
+
}
|
10329
|
+
),
|
10330
|
+
/* @__PURE__ */ jsxs5(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
|
10331
|
+
formatCurrency(
|
10332
|
+
(planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
|
10333
|
+
),
|
10334
|
+
"/",
|
10335
|
+
planPeriod
|
10336
|
+
] })
|
10337
|
+
]
|
10338
|
+
}
|
10339
|
+
)
|
10340
|
+
] })
|
10341
|
+
]
|
10342
|
+
}
|
10343
|
+
)
|
10344
|
+
]
|
10345
|
+
}
|
10346
|
+
),
|
10347
|
+
/* @__PURE__ */ jsxs5(
|
10348
|
+
Flex,
|
10349
|
+
{
|
10350
|
+
$flexDirection: "column",
|
10351
|
+
$position: "relative",
|
10352
|
+
$gap: "0.75rem",
|
10353
|
+
$width: "100%",
|
10354
|
+
$height: "auto",
|
10355
|
+
$padding: "1.5rem",
|
10356
|
+
children: [
|
10357
|
+
selectedPlan && /* @__PURE__ */ jsxs5(
|
10358
|
+
Flex,
|
10359
|
+
{
|
10360
|
+
$fontSize: "0.75rem",
|
10361
|
+
$color: "#5D5D5D",
|
10362
|
+
$justifyContent: "space-between",
|
10363
|
+
children: [
|
10364
|
+
/* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
|
10365
|
+
planPeriod === "month" ? "Monthly" : "Yearly",
|
10366
|
+
" total:",
|
10367
|
+
" "
|
10368
|
+
] }),
|
10369
|
+
/* @__PURE__ */ jsxs5(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
|
10370
|
+
formatCurrency(
|
10371
|
+
(planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
|
10372
|
+
),
|
10373
|
+
"/",
|
10374
|
+
planPeriod
|
10375
|
+
] })
|
10376
|
+
]
|
10377
|
+
}
|
10378
|
+
),
|
10379
|
+
checkoutStage === "plan" ? /* @__PURE__ */ jsx10(
|
10380
|
+
StyledButton,
|
10381
|
+
{
|
10382
|
+
disabled: !selectedPlan,
|
10383
|
+
onClick: () => {
|
10384
|
+
setCheckoutStage("checkout");
|
10385
|
+
},
|
10386
|
+
$size: "sm",
|
10387
|
+
children: /* @__PURE__ */ jsxs5(
|
10388
|
+
Flex,
|
10389
|
+
{
|
10390
|
+
$gap: "0.5rem",
|
10391
|
+
$alignItems: "center",
|
10392
|
+
$justifyContent: "center",
|
10393
|
+
$padding: "0 1rem",
|
10394
|
+
children: [
|
10395
|
+
/* @__PURE__ */ jsx10(Text, { $align: "left", children: "Next: Checkout" }),
|
10396
|
+
/* @__PURE__ */ jsx10(Icon2, { name: "arrow-right" })
|
10397
|
+
]
|
10398
|
+
}
|
10399
|
+
)
|
10400
|
+
}
|
10401
|
+
) : /* @__PURE__ */ jsx10(
|
10402
|
+
StyledButton,
|
10403
|
+
{
|
10404
|
+
disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
|
10405
|
+
onClick: async () => {
|
10406
|
+
const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
|
10407
|
+
if (!api || !selectedPlan || !priceId || !paymentMethodId) {
|
10408
|
+
return;
|
10409
|
+
}
|
10410
|
+
try {
|
10411
|
+
setIsLoading(true);
|
10412
|
+
setIsCheckoutComplete(false);
|
10413
|
+
await api.checkout({
|
10414
|
+
changeSubscriptionRequestBody: {
|
10415
|
+
newPlanId: selectedPlan.id,
|
10416
|
+
newPriceId: priceId,
|
10417
|
+
paymentMethodId
|
10418
|
+
}
|
10419
|
+
});
|
10420
|
+
setIsCheckoutComplete(true);
|
10421
|
+
} catch (error) {
|
10422
|
+
console.error(error);
|
10423
|
+
} finally {
|
10424
|
+
setIsCheckoutComplete(true);
|
10425
|
+
setIsLoading(false);
|
10426
|
+
}
|
10427
|
+
},
|
10428
|
+
$size: "md",
|
10429
|
+
children: "Pay now"
|
10430
|
+
}
|
10431
|
+
),
|
10432
|
+
/* @__PURE__ */ jsx10(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
|
10433
|
+
]
|
10434
|
+
}
|
10435
|
+
)
|
10436
|
+
]
|
10378
10437
|
}
|
10379
10438
|
)
|
10380
10439
|
] })
|
@@ -10382,7 +10441,7 @@ var CheckoutDialog = () => {
|
|
10382
10441
|
};
|
10383
10442
|
|
10384
10443
|
// src/components/elements/plan-manager/PlanManager.tsx
|
10385
|
-
import { jsx as
|
10444
|
+
import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
|
10386
10445
|
var resolveDesignProps = (props) => {
|
10387
10446
|
return {
|
10388
10447
|
header: {
|
@@ -10420,14 +10479,14 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10420
10479
|
canChangePlan: stripe !== null
|
10421
10480
|
};
|
10422
10481
|
}, [data.company, stripe]);
|
10423
|
-
return /* @__PURE__ */
|
10424
|
-
/* @__PURE__ */
|
10482
|
+
return /* @__PURE__ */ jsxs6("div", { ref, className, children: [
|
10483
|
+
/* @__PURE__ */ jsx11(
|
10425
10484
|
Flex,
|
10426
10485
|
{
|
10427
10486
|
$flexDirection: "column",
|
10428
10487
|
$gap: "0.75rem",
|
10429
10488
|
...canChangePlan && { $margin: "0 0 0.5rem" },
|
10430
|
-
children: props.header.isVisible && currentPlan && /* @__PURE__ */
|
10489
|
+
children: props.header.isVisible && currentPlan && /* @__PURE__ */ jsxs6(
|
10431
10490
|
Flex,
|
10432
10491
|
{
|
10433
10492
|
$justifyContent: "space-between",
|
@@ -10435,8 +10494,8 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10435
10494
|
$width: "100%",
|
10436
10495
|
...canChangePlan && { $margin: "0 0 1.5rem" },
|
10437
10496
|
children: [
|
10438
|
-
/* @__PURE__ */
|
10439
|
-
/* @__PURE__ */
|
10497
|
+
/* @__PURE__ */ jsxs6("div", { children: [
|
10498
|
+
/* @__PURE__ */ jsx11(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ jsx11(
|
10440
10499
|
Text,
|
10441
10500
|
{
|
10442
10501
|
$font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
|
@@ -10447,7 +10506,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10447
10506
|
children: currentPlan.name
|
10448
10507
|
}
|
10449
10508
|
) }),
|
10450
|
-
props.header.description.isVisible && currentPlan.description && /* @__PURE__ */
|
10509
|
+
props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ jsx11(
|
10451
10510
|
Text,
|
10452
10511
|
{
|
10453
10512
|
$font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
|
@@ -10458,7 +10517,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10458
10517
|
}
|
10459
10518
|
)
|
10460
10519
|
] }),
|
10461
|
-
props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */
|
10520
|
+
props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ jsxs6(
|
10462
10521
|
Text,
|
10463
10522
|
{
|
10464
10523
|
$font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
|
@@ -10477,7 +10536,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10477
10536
|
)
|
10478
10537
|
}
|
10479
10538
|
),
|
10480
|
-
canChangePlan && props.callToAction.isVisible && /* @__PURE__ */
|
10539
|
+
canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ jsx11(
|
10481
10540
|
StyledButton,
|
10482
10541
|
{
|
10483
10542
|
onClick: () => {
|
@@ -10485,7 +10544,7 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10485
10544
|
},
|
10486
10545
|
$size: props.callToAction.buttonSize,
|
10487
10546
|
$color: props.callToAction.buttonStyle,
|
10488
|
-
children: /* @__PURE__ */
|
10547
|
+
children: /* @__PURE__ */ jsx11(
|
10489
10548
|
Text,
|
10490
10549
|
{
|
10491
10550
|
$font: settings.theme.typography.text.fontFamily,
|
@@ -10496,13 +10555,13 @@ var PlanManager = forwardRef(({ children, className, portal, ...rest }, ref) =>
|
|
10496
10555
|
)
|
10497
10556
|
}
|
10498
10557
|
),
|
10499
|
-
canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */
|
10558
|
+
canChangePlan && layout === "checkout" && createPortal(/* @__PURE__ */ jsx11(CheckoutDialog, {}), portal || document.body)
|
10500
10559
|
] });
|
10501
10560
|
});
|
10502
10561
|
|
10503
10562
|
// src/components/elements/included-features/IncludedFeatures.tsx
|
10504
10563
|
import { forwardRef as forwardRef2, useMemo as useMemo4 } from "react";
|
10505
|
-
import { jsx as
|
10564
|
+
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
10506
10565
|
function resolveDesignProps2(props) {
|
10507
10566
|
return {
|
10508
10567
|
header: {
|
@@ -10555,8 +10614,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10555
10614
|
}
|
10556
10615
|
);
|
10557
10616
|
}, [data.featureUsage]);
|
10558
|
-
return /* @__PURE__ */
|
10559
|
-
props.header.isVisible && /* @__PURE__ */
|
10617
|
+
return /* @__PURE__ */ jsxs7(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
|
10618
|
+
props.header.isVisible && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
|
10560
10619
|
Text,
|
10561
10620
|
{
|
10562
10621
|
$font: settings.theme.typography[props.header.fontStyle].fontFamily,
|
@@ -10573,7 +10632,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10573
10632
|
}
|
10574
10633
|
return [
|
10575
10634
|
...acc,
|
10576
|
-
/* @__PURE__ */
|
10635
|
+
/* @__PURE__ */ jsxs7(
|
10577
10636
|
Flex,
|
10578
10637
|
{
|
10579
10638
|
$flexWrap: "wrap",
|
@@ -10581,8 +10640,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10581
10640
|
$alignItems: "center",
|
10582
10641
|
$gap: "1rem",
|
10583
10642
|
children: [
|
10584
|
-
/* @__PURE__ */
|
10585
|
-
props.icons.isVisible && feature?.icon && /* @__PURE__ */
|
10643
|
+
/* @__PURE__ */ jsxs7(Flex, { $gap: "1rem", children: [
|
10644
|
+
props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx12(
|
10586
10645
|
IconRound,
|
10587
10646
|
{
|
10588
10647
|
name: feature.icon,
|
@@ -10593,7 +10652,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10593
10652
|
]
|
10594
10653
|
}
|
10595
10654
|
),
|
10596
|
-
feature?.name && /* @__PURE__ */
|
10655
|
+
feature?.name && /* @__PURE__ */ jsx12(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx12(
|
10597
10656
|
Text,
|
10598
10657
|
{
|
10599
10658
|
$font: settings.theme.typography[props.icons.fontStyle].fontFamily,
|
@@ -10604,8 +10663,8 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10604
10663
|
}
|
10605
10664
|
) })
|
10606
10665
|
] }),
|
10607
|
-
allocationType === "numeric" && feature?.name && /* @__PURE__ */
|
10608
|
-
props.entitlement.isVisible && /* @__PURE__ */
|
10666
|
+
allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs7(Box, { $textAlign: "right", children: [
|
10667
|
+
props.entitlement.isVisible && /* @__PURE__ */ jsx12(
|
10609
10668
|
Text,
|
10610
10669
|
{
|
10611
10670
|
as: Box,
|
@@ -10616,7 +10675,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10616
10675
|
children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
|
10617
10676
|
}
|
10618
10677
|
),
|
10619
|
-
props.usage.isVisible && /* @__PURE__ */
|
10678
|
+
props.usage.isVisible && /* @__PURE__ */ jsx12(
|
10620
10679
|
Text,
|
10621
10680
|
{
|
10622
10681
|
as: Box,
|
@@ -10641,7 +10700,7 @@ var IncludedFeatures = forwardRef2(({ className, ...rest }, ref) => {
|
|
10641
10700
|
|
10642
10701
|
// src/components/elements/metered-features/MeteredFeatures.tsx
|
10643
10702
|
import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
|
10644
|
-
import { jsx as
|
10703
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
10645
10704
|
function resolveDesignProps3(props) {
|
10646
10705
|
return {
|
10647
10706
|
isVisible: props.isVisible ?? true,
|
@@ -10700,19 +10759,19 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
|
|
10700
10759
|
}
|
10701
10760
|
);
|
10702
10761
|
}, [data.featureUsage]);
|
10703
|
-
return /* @__PURE__ */
|
10762
|
+
return /* @__PURE__ */ jsx13(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
|
10704
10763
|
(acc, { allocation, allocationType, feature, usage }, index) => {
|
10705
10764
|
if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
|
10706
10765
|
return acc;
|
10707
10766
|
}
|
10708
10767
|
return [
|
10709
10768
|
...acc,
|
10710
|
-
/* @__PURE__ */
|
10711
|
-
props.icon.isVisible && feature?.icon && /* @__PURE__ */
|
10712
|
-
/* @__PURE__ */
|
10713
|
-
/* @__PURE__ */
|
10714
|
-
feature?.name && /* @__PURE__ */
|
10715
|
-
/* @__PURE__ */
|
10769
|
+
/* @__PURE__ */ jsxs8(Flex, { $gap: "1.5rem", children: [
|
10770
|
+
props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx13(Box, { $flexShrink: "0", children: /* @__PURE__ */ jsx13(IconRound, { name: feature.icon, size: "sm" }) }),
|
10771
|
+
/* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
|
10772
|
+
/* @__PURE__ */ jsxs8(Flex, { children: [
|
10773
|
+
feature?.name && /* @__PURE__ */ jsxs8(Box, { $flexGrow: "1", children: [
|
10774
|
+
/* @__PURE__ */ jsx13(
|
10716
10775
|
Text,
|
10717
10776
|
{
|
10718
10777
|
as: Box,
|
@@ -10723,7 +10782,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
|
|
10723
10782
|
children: feature.name
|
10724
10783
|
}
|
10725
10784
|
),
|
10726
|
-
props.description.isVisible && /* @__PURE__ */
|
10785
|
+
props.description.isVisible && /* @__PURE__ */ jsx13(
|
10727
10786
|
Text,
|
10728
10787
|
{
|
10729
10788
|
as: Box,
|
@@ -10735,8 +10794,8 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
|
|
10735
10794
|
}
|
10736
10795
|
)
|
10737
10796
|
] }),
|
10738
|
-
allocationType === "numeric" && feature?.name && /* @__PURE__ */
|
10739
|
-
props.allocation.isVisible && /* @__PURE__ */
|
10797
|
+
allocationType === "numeric" && feature?.name && /* @__PURE__ */ jsxs8(Box, { $textAlign: "right", children: [
|
10798
|
+
props.allocation.isVisible && /* @__PURE__ */ jsx13(
|
10740
10799
|
Text,
|
10741
10800
|
{
|
10742
10801
|
as: Box,
|
@@ -10747,7 +10806,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
|
|
10747
10806
|
children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
|
10748
10807
|
}
|
10749
10808
|
),
|
10750
|
-
props.usage.isVisible && /* @__PURE__ */
|
10809
|
+
props.usage.isVisible && /* @__PURE__ */ jsx13(
|
10751
10810
|
Text,
|
10752
10811
|
{
|
10753
10812
|
as: Box,
|
@@ -10760,7 +10819,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
|
|
10760
10819
|
)
|
10761
10820
|
] })
|
10762
10821
|
] }),
|
10763
|
-
typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */
|
10822
|
+
typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
|
10764
10823
|
ProgressBar,
|
10765
10824
|
{
|
10766
10825
|
progress: usage / allocation * 100,
|
@@ -10779,7 +10838,7 @@ var MeteredFeatures = forwardRef3(({ className, ...rest }, ref) => {
|
|
10779
10838
|
|
10780
10839
|
// src/components/elements/upcoming-bill/UpcomingBill.tsx
|
10781
10840
|
import { forwardRef as forwardRef4, useMemo as useMemo6 } from "react";
|
10782
|
-
import { jsx as
|
10841
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
10783
10842
|
function resolveDesignProps4(props) {
|
10784
10843
|
return {
|
10785
10844
|
header: {
|
@@ -10819,14 +10878,14 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
|
|
10819
10878
|
if (!stripe || !data.upcomingInvoice) {
|
10820
10879
|
return null;
|
10821
10880
|
}
|
10822
|
-
return /* @__PURE__ */
|
10823
|
-
props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */
|
10881
|
+
return /* @__PURE__ */ jsxs9("div", { ref, className, children: [
|
10882
|
+
props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx14(
|
10824
10883
|
Flex,
|
10825
10884
|
{
|
10826
10885
|
$justifyContent: "space-between",
|
10827
10886
|
$alignItems: "center",
|
10828
10887
|
$margin: "0 0 0.75rem",
|
10829
|
-
children: /* @__PURE__ */
|
10888
|
+
children: /* @__PURE__ */ jsxs9(
|
10830
10889
|
Text,
|
10831
10890
|
{
|
10832
10891
|
$font: settings.theme.typography[props.header.fontStyle].fontFamily,
|
@@ -10842,8 +10901,8 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
|
|
10842
10901
|
)
|
10843
10902
|
}
|
10844
10903
|
),
|
10845
|
-
upcomingInvoice.amountDue && /* @__PURE__ */
|
10846
|
-
props.price.isVisible && /* @__PURE__ */
|
10904
|
+
upcomingInvoice.amountDue && /* @__PURE__ */ jsxs9(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
|
10905
|
+
props.price.isVisible && /* @__PURE__ */ jsx14(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx14(
|
10847
10906
|
Text,
|
10848
10907
|
{
|
10849
10908
|
$font: settings.theme.typography[props.price.fontStyle].fontFamily,
|
@@ -10854,7 +10913,7 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
|
|
10854
10913
|
children: formatCurrency(upcomingInvoice.amountDue)
|
10855
10914
|
}
|
10856
10915
|
) }),
|
10857
|
-
/* @__PURE__ */
|
10916
|
+
/* @__PURE__ */ jsx14(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ jsx14(
|
10858
10917
|
Text,
|
10859
10918
|
{
|
10860
10919
|
$font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
|
@@ -10871,7 +10930,7 @@ var UpcomingBill = forwardRef4(({ className, ...rest }, ref) => {
|
|
10871
10930
|
// src/components/elements/payment-method/PaymentMethod.tsx
|
10872
10931
|
import { forwardRef as forwardRef5, useMemo as useMemo7 } from "react";
|
10873
10932
|
import { createPortal as createPortal2 } from "react-dom";
|
10874
|
-
import { jsx as
|
10933
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
10875
10934
|
var resolveDesignProps5 = (props) => {
|
10876
10935
|
return {
|
10877
10936
|
header: {
|
@@ -10905,15 +10964,15 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10905
10964
|
if (!stripe || !data.subscription?.paymentMethod) {
|
10906
10965
|
return null;
|
10907
10966
|
}
|
10908
|
-
return /* @__PURE__ */
|
10909
|
-
props.header.isVisible && /* @__PURE__ */
|
10967
|
+
return /* @__PURE__ */ jsxs10("div", { ref, className, children: [
|
10968
|
+
props.header.isVisible && /* @__PURE__ */ jsxs10(
|
10910
10969
|
Flex,
|
10911
10970
|
{
|
10912
10971
|
$justifyContent: "space-between",
|
10913
10972
|
$alignItems: "center",
|
10914
10973
|
$margin: "0 0 1rem",
|
10915
10974
|
children: [
|
10916
|
-
/* @__PURE__ */
|
10975
|
+
/* @__PURE__ */ jsx15(
|
10917
10976
|
Text,
|
10918
10977
|
{
|
10919
10978
|
$font: settings.theme.typography[props.header.fontStyle].fontFamily,
|
@@ -10923,7 +10982,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10923
10982
|
children: "Payment Method"
|
10924
10983
|
}
|
10925
10984
|
),
|
10926
|
-
typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */
|
10985
|
+
typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ jsx15(
|
10927
10986
|
Text,
|
10928
10987
|
{
|
10929
10988
|
$font: settings.theme.typography.text.fontFamily,
|
@@ -10935,7 +10994,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10935
10994
|
]
|
10936
10995
|
}
|
10937
10996
|
),
|
10938
|
-
paymentMethod.cardLast4 && /* @__PURE__ */
|
10997
|
+
paymentMethod.cardLast4 && /* @__PURE__ */ jsx15(
|
10939
10998
|
Flex,
|
10940
10999
|
{
|
10941
11000
|
$justifyContent: "space-between",
|
@@ -10944,16 +11003,16 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10944
11003
|
$background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
|
10945
11004
|
$padding: "0.375rem 1rem",
|
10946
11005
|
$borderRadius: "9999px",
|
10947
|
-
children: /* @__PURE__ */
|
11006
|
+
children: /* @__PURE__ */ jsxs10(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
|
10948
11007
|
"\u{1F4B3} Card ending in ",
|
10949
11008
|
paymentMethod.cardLast4
|
10950
11009
|
] })
|
10951
11010
|
}
|
10952
11011
|
),
|
10953
11012
|
layout === "payment" && createPortal2(
|
10954
|
-
/* @__PURE__ */
|
10955
|
-
/* @__PURE__ */
|
10956
|
-
/* @__PURE__ */
|
11013
|
+
/* @__PURE__ */ jsxs10(Modal, { size: "md", children: [
|
11014
|
+
/* @__PURE__ */ jsx15(ModalHeader, { children: /* @__PURE__ */ jsx15(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
|
11015
|
+
/* @__PURE__ */ jsxs10(
|
10957
11016
|
Flex,
|
10958
11017
|
{
|
10959
11018
|
$flexDirection: "column",
|
@@ -10961,7 +11020,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10961
11020
|
$height: "100%",
|
10962
11021
|
$gap: "1.5rem",
|
10963
11022
|
children: [
|
10964
|
-
/* @__PURE__ */
|
11023
|
+
/* @__PURE__ */ jsx15(
|
10965
11024
|
Flex,
|
10966
11025
|
{
|
10967
11026
|
$flexDirection: "column",
|
@@ -10970,8 +11029,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10970
11029
|
$borderRadius: "0 0 0.5rem 0.5rem",
|
10971
11030
|
$flex: "1",
|
10972
11031
|
$height: "100%",
|
10973
|
-
children: /* @__PURE__ */
|
10974
|
-
/* @__PURE__ */
|
11032
|
+
children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
|
11033
|
+
/* @__PURE__ */ jsx15(
|
10975
11034
|
Box,
|
10976
11035
|
{
|
10977
11036
|
$fontSize: "18px",
|
@@ -10981,8 +11040,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10981
11040
|
children: "Default"
|
10982
11041
|
}
|
10983
11042
|
),
|
10984
|
-
/* @__PURE__ */
|
10985
|
-
/* @__PURE__ */
|
11043
|
+
/* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
|
11044
|
+
/* @__PURE__ */ jsx15(
|
10986
11045
|
Flex,
|
10987
11046
|
{
|
10988
11047
|
$alignItems: "center",
|
@@ -10990,65 +11049,48 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
10990
11049
|
$border: "1px solid #E2E5E9",
|
10991
11050
|
$borderRadius: ".5rem",
|
10992
11051
|
$backgroundColor: "#ffffff",
|
10993
|
-
$flexDirection: "row",
|
10994
11052
|
$gap: "1rem",
|
10995
11053
|
$width: "100%",
|
10996
|
-
children: /* @__PURE__ */
|
10997
|
-
Flex,
|
10998
|
-
|
10999
|
-
|
11000
|
-
|
11001
|
-
|
11002
|
-
|
11003
|
-
|
11004
|
-
|
11005
|
-
|
11006
|
-
|
11007
|
-
|
11008
|
-
|
11009
|
-
|
11010
|
-
|
11011
|
-
"
|
11012
|
-
|
11013
|
-
|
11014
|
-
|
11015
|
-
|
11016
|
-
|
11017
|
-
|
11018
|
-
|
11019
|
-
|
11020
|
-
|
11021
|
-
|
11022
|
-
|
11023
|
-
|
11024
|
-
|
11025
|
-
|
11026
|
-
|
11027
|
-
|
11028
|
-
|
11029
|
-
|
11030
|
-
|
11031
|
-
|
11032
|
-
|
11033
|
-
{
|
11034
|
-
d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
|
11035
|
-
fill: "#1434CB"
|
11036
|
-
}
|
11037
|
-
)
|
11038
|
-
] })
|
11039
|
-
}
|
11040
|
-
) }),
|
11041
|
-
/* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
|
11042
|
-
]
|
11043
|
-
}
|
11044
|
-
),
|
11045
|
-
/* @__PURE__ */ jsx13(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx13(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
11046
|
-
]
|
11047
|
-
}
|
11048
|
-
)
|
11054
|
+
children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
|
11055
|
+
/* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
|
11056
|
+
/* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
|
11057
|
+
"svg",
|
11058
|
+
{
|
11059
|
+
viewBox: "0 0 24 16",
|
11060
|
+
fill: "none",
|
11061
|
+
xmlns: "http://www.w3.org/2000/svg",
|
11062
|
+
width: "26px",
|
11063
|
+
height: "auto",
|
11064
|
+
children: /* @__PURE__ */ jsxs10("g", { children: [
|
11065
|
+
/* @__PURE__ */ jsx15(
|
11066
|
+
"rect",
|
11067
|
+
{
|
11068
|
+
stroke: "#DDD",
|
11069
|
+
fill: "#FFF",
|
11070
|
+
x: ".25",
|
11071
|
+
y: ".25",
|
11072
|
+
width: "23",
|
11073
|
+
height: "15.5",
|
11074
|
+
rx: "2"
|
11075
|
+
}
|
11076
|
+
),
|
11077
|
+
/* @__PURE__ */ jsx15(
|
11078
|
+
"path",
|
11079
|
+
{
|
11080
|
+
d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
|
11081
|
+
fill: "#1434CB"
|
11082
|
+
}
|
11083
|
+
)
|
11084
|
+
] })
|
11085
|
+
}
|
11086
|
+
) }),
|
11087
|
+
/* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
|
11088
|
+
] }),
|
11089
|
+
/* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
11090
|
+
] })
|
11049
11091
|
}
|
11050
11092
|
),
|
11051
|
-
/* @__PURE__ */
|
11093
|
+
/* @__PURE__ */ jsx15(Flex, { children: /* @__PURE__ */ jsx15(
|
11052
11094
|
StyledButton,
|
11053
11095
|
{
|
11054
11096
|
$size: "sm",
|
@@ -11066,7 +11108,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
11066
11108
|
] })
|
11067
11109
|
}
|
11068
11110
|
),
|
11069
|
-
/* @__PURE__ */
|
11111
|
+
/* @__PURE__ */ jsx15(
|
11070
11112
|
Flex,
|
11071
11113
|
{
|
11072
11114
|
$flexDirection: "column",
|
@@ -11075,8 +11117,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
11075
11117
|
$borderRadius: "0 0 0.5rem 0.5rem",
|
11076
11118
|
$flex: "1",
|
11077
11119
|
$height: "100%",
|
11078
|
-
children: /* @__PURE__ */
|
11079
|
-
/* @__PURE__ */
|
11120
|
+
children: /* @__PURE__ */ jsxs10(Flex, { $flexDirection: "column", $height: "100%", children: [
|
11121
|
+
/* @__PURE__ */ jsx15(
|
11080
11122
|
Box,
|
11081
11123
|
{
|
11082
11124
|
$fontSize: "18px",
|
@@ -11086,8 +11128,8 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
11086
11128
|
children: "Others"
|
11087
11129
|
}
|
11088
11130
|
),
|
11089
|
-
/* @__PURE__ */
|
11090
|
-
/* @__PURE__ */
|
11131
|
+
/* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
|
11132
|
+
/* @__PURE__ */ jsx15(
|
11091
11133
|
Flex,
|
11092
11134
|
{
|
11093
11135
|
$alignItems: "center",
|
@@ -11095,66 +11137,49 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
11095
11137
|
$border: "1px solid #E2E5E9",
|
11096
11138
|
$borderRadius: ".5rem",
|
11097
11139
|
$backgroundColor: "#ffffff",
|
11098
|
-
$flexDirection: "row",
|
11099
11140
|
$gap: "1rem",
|
11100
11141
|
$width: "100%",
|
11101
|
-
children: /* @__PURE__ */
|
11102
|
-
Flex,
|
11103
|
-
|
11104
|
-
|
11105
|
-
|
11106
|
-
|
11107
|
-
|
11108
|
-
|
11109
|
-
|
11110
|
-
|
11111
|
-
|
11112
|
-
|
11113
|
-
|
11114
|
-
|
11115
|
-
|
11116
|
-
"
|
11117
|
-
|
11118
|
-
|
11119
|
-
|
11120
|
-
|
11121
|
-
|
11122
|
-
|
11123
|
-
|
11124
|
-
|
11125
|
-
|
11126
|
-
|
11127
|
-
|
11128
|
-
|
11129
|
-
|
11130
|
-
|
11131
|
-
|
11132
|
-
|
11133
|
-
|
11134
|
-
|
11135
|
-
|
11136
|
-
|
11137
|
-
|
11138
|
-
{
|
11139
|
-
d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
|
11140
|
-
fill: "#1434CB"
|
11141
|
-
}
|
11142
|
-
)
|
11143
|
-
] })
|
11144
|
-
}
|
11145
|
-
) }),
|
11146
|
-
/* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
|
11147
|
-
]
|
11148
|
-
}
|
11149
|
-
),
|
11150
|
-
/* @__PURE__ */ jsx13(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx13(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
11151
|
-
]
|
11152
|
-
}
|
11153
|
-
)
|
11142
|
+
children: /* @__PURE__ */ jsxs10(Flex, { $justifyContent: "space-between", $flex: "1", children: [
|
11143
|
+
/* @__PURE__ */ jsxs10(Flex, { $alignItems: "center", $gap: "1rem", children: [
|
11144
|
+
/* @__PURE__ */ jsx15(Box, { $display: "inline-block", children: /* @__PURE__ */ jsx15(
|
11145
|
+
"svg",
|
11146
|
+
{
|
11147
|
+
viewBox: "0 0 24 16",
|
11148
|
+
fill: "none",
|
11149
|
+
xmlns: "http://www.w3.org/2000/svg",
|
11150
|
+
width: "26px",
|
11151
|
+
height: "auto",
|
11152
|
+
children: /* @__PURE__ */ jsxs10("g", { children: [
|
11153
|
+
/* @__PURE__ */ jsx15(
|
11154
|
+
"rect",
|
11155
|
+
{
|
11156
|
+
stroke: "#DDD",
|
11157
|
+
fill: "#FFF",
|
11158
|
+
x: ".25",
|
11159
|
+
y: ".25",
|
11160
|
+
width: "23",
|
11161
|
+
height: "15.5",
|
11162
|
+
rx: "2"
|
11163
|
+
}
|
11164
|
+
),
|
11165
|
+
/* @__PURE__ */ jsx15(
|
11166
|
+
"path",
|
11167
|
+
{
|
11168
|
+
d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
|
11169
|
+
fill: "#1434CB"
|
11170
|
+
}
|
11171
|
+
)
|
11172
|
+
] })
|
11173
|
+
}
|
11174
|
+
) }),
|
11175
|
+
/* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
|
11176
|
+
] }),
|
11177
|
+
/* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
11178
|
+
] })
|
11154
11179
|
}
|
11155
11180
|
),
|
11156
|
-
/* @__PURE__ */
|
11157
|
-
/* @__PURE__ */
|
11181
|
+
/* @__PURE__ */ jsxs10(Flex, { $gap: "1rem", children: [
|
11182
|
+
/* @__PURE__ */ jsx15(
|
11158
11183
|
StyledButton,
|
11159
11184
|
{
|
11160
11185
|
$size: "sm",
|
@@ -11168,7 +11193,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
11168
11193
|
children: "Make Default"
|
11169
11194
|
}
|
11170
11195
|
),
|
11171
|
-
/* @__PURE__ */
|
11196
|
+
/* @__PURE__ */ jsx15(
|
11172
11197
|
StyledButton,
|
11173
11198
|
{
|
11174
11199
|
$size: "sm",
|
@@ -11198,7 +11223,7 @@ var PaymentMethod = forwardRef5(({ children, className, portal, ...rest }, ref)
|
|
11198
11223
|
|
11199
11224
|
// src/components/elements/invoices/Invoices.tsx
|
11200
11225
|
import { forwardRef as forwardRef6, useMemo as useMemo8 } from "react";
|
11201
|
-
import { jsx as
|
11226
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
11202
11227
|
function resolveDesignProps6(props) {
|
11203
11228
|
return {
|
11204
11229
|
header: {
|
@@ -11240,8 +11265,8 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
|
|
11240
11265
|
]
|
11241
11266
|
};
|
11242
11267
|
}, []);
|
11243
|
-
return /* @__PURE__ */
|
11244
|
-
props.header.isVisible && /* @__PURE__ */
|
11268
|
+
return /* @__PURE__ */ jsx16("div", { ref, className, children: /* @__PURE__ */ jsxs11(Flex, { $flexDirection: "column", $gap: "1rem", children: [
|
11269
|
+
props.header.isVisible && /* @__PURE__ */ jsx16(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ jsx16(
|
11245
11270
|
Text,
|
11246
11271
|
{
|
11247
11272
|
$font: settings.theme.typography[props.header.fontStyle].fontFamily,
|
@@ -11251,12 +11276,12 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
|
|
11251
11276
|
children: "Invoices"
|
11252
11277
|
}
|
11253
11278
|
) }),
|
11254
|
-
/* @__PURE__ */
|
11279
|
+
/* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
|
11255
11280
|
0,
|
11256
11281
|
props.limit.isVisible && props.limit.number || invoices.length
|
11257
11282
|
).map(({ date, amount }, index) => {
|
11258
|
-
return /* @__PURE__ */
|
11259
|
-
props.date.isVisible && /* @__PURE__ */
|
11283
|
+
return /* @__PURE__ */ jsxs11(Flex, { $justifyContent: "space-between", children: [
|
11284
|
+
props.date.isVisible && /* @__PURE__ */ jsx16(
|
11260
11285
|
Text,
|
11261
11286
|
{
|
11262
11287
|
$font: settings.theme.typography[props.date.fontStyle].fontFamily,
|
@@ -11266,7 +11291,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
|
|
11266
11291
|
children: toPrettyDate(date)
|
11267
11292
|
}
|
11268
11293
|
),
|
11269
|
-
props.amount.isVisible && /* @__PURE__ */
|
11294
|
+
props.amount.isVisible && /* @__PURE__ */ jsxs11(
|
11270
11295
|
Text,
|
11271
11296
|
{
|
11272
11297
|
$font: settings.theme.typography[props.amount.fontStyle].fontFamily,
|
@@ -11281,9 +11306,9 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
|
|
11281
11306
|
)
|
11282
11307
|
] }, index);
|
11283
11308
|
}) }),
|
11284
|
-
props.collapse.isVisible && /* @__PURE__ */
|
11285
|
-
/* @__PURE__ */
|
11286
|
-
/* @__PURE__ */
|
11309
|
+
props.collapse.isVisible && /* @__PURE__ */ jsxs11(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
|
11310
|
+
/* @__PURE__ */ jsx16(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
|
11311
|
+
/* @__PURE__ */ jsx16(
|
11287
11312
|
Text,
|
11288
11313
|
{
|
11289
11314
|
$font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
|
@@ -11305,10 +11330,10 @@ import { createElement } from "react";
|
|
11305
11330
|
|
11306
11331
|
// src/components/layout/root/Root.tsx
|
11307
11332
|
import { forwardRef as forwardRef7 } from "react";
|
11308
|
-
import { jsx as
|
11333
|
+
import { jsx as jsx17 } from "react/jsx-runtime";
|
11309
11334
|
var Root = forwardRef7(
|
11310
11335
|
(props, ref) => {
|
11311
|
-
return /* @__PURE__ */
|
11336
|
+
return /* @__PURE__ */ jsx17("div", { ref, ...props });
|
11312
11337
|
}
|
11313
11338
|
);
|
11314
11339
|
|
@@ -11324,17 +11349,53 @@ var StyledViewport = dt.div`
|
|
11324
11349
|
`;
|
11325
11350
|
|
11326
11351
|
// src/components/layout/viewport/Viewport.tsx
|
11327
|
-
import { jsx as
|
11352
|
+
import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
|
11328
11353
|
var Viewport = forwardRef8(
|
11329
11354
|
({ children, ...props }, ref) => {
|
11330
11355
|
const { settings, layout } = useEmbed();
|
11331
|
-
return /* @__PURE__ */
|
11356
|
+
return /* @__PURE__ */ jsx18(
|
11332
11357
|
StyledViewport,
|
11333
11358
|
{
|
11334
11359
|
ref,
|
11335
11360
|
$numberOfColumns: settings.theme.numberOfColumns,
|
11336
11361
|
...props,
|
11337
|
-
children: layout === "disabled" ? /* @__PURE__ */
|
11362
|
+
children: layout === "disabled" ? /* @__PURE__ */ jsx18(Box, { $width: "100%", children: /* @__PURE__ */ jsxs12(
|
11363
|
+
Flex,
|
11364
|
+
{
|
11365
|
+
$flexDirection: "column",
|
11366
|
+
$padding: `${settings.theme.card.padding / 16}rem`,
|
11367
|
+
$width: "100%",
|
11368
|
+
$height: "auto",
|
11369
|
+
$borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
|
11370
|
+
$backgroundColor: settings.theme.card.background,
|
11371
|
+
$alignItems: "center",
|
11372
|
+
$justifyContent: "center",
|
11373
|
+
children: [
|
11374
|
+
/* @__PURE__ */ jsx18(
|
11375
|
+
Box,
|
11376
|
+
{
|
11377
|
+
$marginBottom: "8px",
|
11378
|
+
$fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
|
11379
|
+
$fontFamily: settings.theme.typography.heading1.fontFamily,
|
11380
|
+
$fontWeight: settings.theme.typography.heading1.fontWeight,
|
11381
|
+
$color: settings.theme.typography.heading1.color,
|
11382
|
+
children: "Coming soon"
|
11383
|
+
}
|
11384
|
+
),
|
11385
|
+
/* @__PURE__ */ jsx18(
|
11386
|
+
Box,
|
11387
|
+
{
|
11388
|
+
$marginBottom: "8px",
|
11389
|
+
$fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
|
11390
|
+
$fontFamily: settings.theme.typography.text.fontFamily,
|
11391
|
+
$fontWeight: settings.theme.typography.text.fontWeight,
|
11392
|
+
$color: settings.theme.typography.text.color,
|
11393
|
+
children: "The plan manager will be back very soon."
|
11394
|
+
}
|
11395
|
+
)
|
11396
|
+
]
|
11397
|
+
}
|
11398
|
+
) }) : children
|
11338
11399
|
}
|
11339
11400
|
);
|
11340
11401
|
}
|
@@ -11373,7 +11434,7 @@ var StyledCard = dt.div(
|
|
11373
11434
|
|
11374
11435
|
${() => {
|
11375
11436
|
const { l: l2 } = hexToHSL(theme.card.background);
|
11376
|
-
const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background,
|
11437
|
+
const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 20);
|
11377
11438
|
const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
|
11378
11439
|
const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
|
11379
11440
|
if ($sectionLayout === "merged") {
|
@@ -11405,11 +11466,11 @@ var StyledCard = dt.div(
|
|
11405
11466
|
);
|
11406
11467
|
|
11407
11468
|
// src/components/layout/card/Card.tsx
|
11408
|
-
import { jsx as
|
11469
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
11409
11470
|
var Card = forwardRef9(
|
11410
11471
|
({ children, className }, ref) => {
|
11411
11472
|
const { settings } = useEmbed();
|
11412
|
-
return /* @__PURE__ */
|
11473
|
+
return /* @__PURE__ */ jsx19(
|
11413
11474
|
StyledCard,
|
11414
11475
|
{
|
11415
11476
|
ref,
|
@@ -11431,10 +11492,10 @@ var StyledColumn = dt.div`
|
|
11431
11492
|
`;
|
11432
11493
|
|
11433
11494
|
// src/components/layout/column/Column.tsx
|
11434
|
-
import { jsx as
|
11495
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
11435
11496
|
var Column = forwardRef10(
|
11436
11497
|
({ children, ...props }, ref) => {
|
11437
|
-
return /* @__PURE__ */
|
11498
|
+
return /* @__PURE__ */ jsx20(StyledColumn, { ref, ...props, children: /* @__PURE__ */ jsx20(Card, { children }) });
|
11438
11499
|
}
|
11439
11500
|
);
|
11440
11501
|
|
@@ -11480,31 +11541,101 @@ function createRenderer(options) {
|
|
11480
11541
|
};
|
11481
11542
|
}
|
11482
11543
|
|
11544
|
+
// src/components/ui/loader/styles.ts
|
11545
|
+
var spin = mt`
|
11546
|
+
0% {
|
11547
|
+
transform: rotate(0deg);
|
11548
|
+
}
|
11549
|
+
100% {
|
11550
|
+
transform: rotate(360deg);
|
11551
|
+
}
|
11552
|
+
`;
|
11553
|
+
var Loader = dt.div(() => {
|
11554
|
+
const { settings } = useEmbed();
|
11555
|
+
return lt`
|
11556
|
+
border: 4px solid rgba(0, 0, 0, 0.1);
|
11557
|
+
border-top: 4px solid ${settings.theme.primary};
|
11558
|
+
border-radius: 50%;
|
11559
|
+
width: 40px;
|
11560
|
+
height: 40px;
|
11561
|
+
animation: ${spin} 1.5s linear infinite;
|
11562
|
+
display: inline-block;
|
11563
|
+
`;
|
11564
|
+
});
|
11565
|
+
|
11483
11566
|
// src/components/embed/ComponentTree.tsx
|
11484
|
-
import { Fragment as Fragment2, jsx as
|
11567
|
+
import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
|
11485
11568
|
var ComponentTree = () => {
|
11486
|
-
const
|
11487
|
-
const
|
11569
|
+
const { error, nodes, settings } = useEmbed();
|
11570
|
+
const [children, setChildren] = useState6(
|
11571
|
+
/* @__PURE__ */ jsx21(
|
11572
|
+
Flex,
|
11573
|
+
{
|
11574
|
+
$width: "100%",
|
11575
|
+
$height: "100%",
|
11576
|
+
$alignItems: "center",
|
11577
|
+
$justifyContent: "center",
|
11578
|
+
$padding: `${settings.theme.card.padding / 16}rem`,
|
11579
|
+
children: /* @__PURE__ */ jsx21(Loader, {})
|
11580
|
+
}
|
11581
|
+
)
|
11582
|
+
);
|
11488
11583
|
useEffect5(() => {
|
11489
11584
|
const renderer = createRenderer();
|
11490
11585
|
setChildren(nodes.map(renderer));
|
11491
11586
|
}, [nodes]);
|
11492
11587
|
if (error) {
|
11493
|
-
return /* @__PURE__ */
|
11588
|
+
return /* @__PURE__ */ jsxs13(
|
11589
|
+
Flex,
|
11590
|
+
{
|
11591
|
+
$flexDirection: "column",
|
11592
|
+
$padding: `${settings.theme.card.padding / 16}rem`,
|
11593
|
+
$width: "100%",
|
11594
|
+
$height: "auto",
|
11595
|
+
$borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
|
11596
|
+
$backgroundColor: settings.theme.card.background,
|
11597
|
+
$alignItems: "center",
|
11598
|
+
$justifyContent: "center",
|
11599
|
+
children: [
|
11600
|
+
/* @__PURE__ */ jsx21(
|
11601
|
+
Box,
|
11602
|
+
{
|
11603
|
+
$marginBottom: "8px",
|
11604
|
+
$fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
|
11605
|
+
$fontFamily: settings.theme.typography.heading1.fontFamily,
|
11606
|
+
$fontWeight: settings.theme.typography.heading1.fontWeight,
|
11607
|
+
$color: settings.theme.typography.heading1.color,
|
11608
|
+
children: "404 Error"
|
11609
|
+
}
|
11610
|
+
),
|
11611
|
+
/* @__PURE__ */ jsx21(
|
11612
|
+
Box,
|
11613
|
+
{
|
11614
|
+
$marginBottom: "8px",
|
11615
|
+
$fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
|
11616
|
+
$fontFamily: settings.theme.typography.text.fontFamily,
|
11617
|
+
$fontWeight: settings.theme.typography.text.fontWeight,
|
11618
|
+
$color: settings.theme.typography.text.color,
|
11619
|
+
children: error.message
|
11620
|
+
}
|
11621
|
+
)
|
11622
|
+
]
|
11623
|
+
}
|
11624
|
+
);
|
11494
11625
|
}
|
11495
|
-
return /* @__PURE__ */
|
11626
|
+
return /* @__PURE__ */ jsx21(Fragment2, { children });
|
11496
11627
|
};
|
11497
11628
|
|
11498
11629
|
// src/components/embed/Embed.tsx
|
11499
|
-
import { jsx as
|
11630
|
+
import { jsx as jsx22 } from "react/jsx-runtime";
|
11500
11631
|
var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
|
11501
11632
|
if (accessToken?.length === 0) {
|
11502
|
-
return /* @__PURE__ */
|
11633
|
+
return /* @__PURE__ */ jsx22("div", { children: "Please provide an access token." });
|
11503
11634
|
}
|
11504
11635
|
if (!accessToken?.startsWith("token_")) {
|
11505
|
-
return /* @__PURE__ */
|
11636
|
+
return /* @__PURE__ */ jsx22("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
|
11506
11637
|
}
|
11507
|
-
return /* @__PURE__ */
|
11638
|
+
return /* @__PURE__ */ jsx22(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ jsx22(ComponentTree, {}) });
|
11508
11639
|
};
|
11509
11640
|
export {
|
11510
11641
|
Box,
|
@@ -11519,9 +11650,8 @@ export {
|
|
11519
11650
|
IncludedFeatures,
|
11520
11651
|
Invoices,
|
11521
11652
|
MeteredFeatures,
|
11522
|
-
|
11523
|
-
|
11524
|
-
OverlayWrapper,
|
11653
|
+
Modal,
|
11654
|
+
ModalHeader,
|
11525
11655
|
PaymentMethod,
|
11526
11656
|
PlanManager,
|
11527
11657
|
ProgressBar,
|