@schematichq/schematic-react 0.2.0-rc.1 → 0.2.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/schematic-react.cjs.js +1510 -394
- package/dist/schematic-react.d.ts +403 -4
- package/dist/schematic-react.esm.js +1551 -433
- package/package.json +7 -3
@@ -133,6 +133,7 @@ __export(src_exports, {
|
|
133
133
|
Box: () => Box,
|
134
134
|
Button: () => Button2,
|
135
135
|
Card: () => Card,
|
136
|
+
Column: () => Column,
|
136
137
|
EmbedContext: () => EmbedContext,
|
137
138
|
EmbedProvider: () => EmbedProvider,
|
138
139
|
Flex: () => Flex,
|
@@ -141,14 +142,19 @@ __export(src_exports, {
|
|
141
142
|
IncludedFeatures: () => IncludedFeatures,
|
142
143
|
Invoices: () => Invoices,
|
143
144
|
MeteredFeatures: () => MeteredFeatures,
|
145
|
+
OverlayHeader: () => OverlayHeader,
|
146
|
+
OverlaySideBar: () => OverlaySideBar,
|
147
|
+
OverlayWrapper: () => OverlayWrapper,
|
144
148
|
PaymentMethod: () => PaymentMethod,
|
145
149
|
PlanManager: () => PlanManager,
|
146
150
|
ProgressBar: () => ProgressBar,
|
151
|
+
Root: () => Root,
|
147
152
|
Schematic: () => Schematic,
|
148
153
|
SchematicEmbed: () => SchematicEmbed,
|
149
154
|
SchematicProvider: () => SchematicProvider,
|
150
155
|
Text: () => Text,
|
151
156
|
UpcomingBill: () => UpcomingBill,
|
157
|
+
Viewport: () => Viewport,
|
152
158
|
defaultSettings: () => defaultSettings,
|
153
159
|
defaultTheme: () => defaultTheme,
|
154
160
|
useEmbed: () => useEmbed,
|
@@ -4972,7 +4978,7 @@ var unitlessKeys = {
|
|
4972
4978
|
var f = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
|
4973
4979
|
var m = "active";
|
4974
4980
|
var y = "data-styled-version";
|
4975
|
-
var v = "6.1.
|
4981
|
+
var v = "6.1.13";
|
4976
4982
|
var g = "/*!sc*/\n";
|
4977
4983
|
var S = "undefined" != typeof window && "HTMLElement" in window;
|
4978
4984
|
var w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : true);
|
@@ -5652,6 +5658,143 @@ var vt = function() {
|
|
5652
5658
|
var St = "__sc-".concat(f, "__");
|
5653
5659
|
"undefined" != typeof window && (window[St] || (window[St] = 0), 1 === window[St] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."), window[St] += 1);
|
5654
5660
|
|
5661
|
+
// node_modules/@stripe/stripe-js/dist/index.mjs
|
5662
|
+
var V3_URL = "https://js.stripe.com/v3";
|
5663
|
+
var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
|
5664
|
+
var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
|
5665
|
+
var findScript = function findScript2() {
|
5666
|
+
var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
|
5667
|
+
for (var i2 = 0; i2 < scripts.length; i2++) {
|
5668
|
+
var script = scripts[i2];
|
5669
|
+
if (!V3_URL_REGEX.test(script.src)) {
|
5670
|
+
continue;
|
5671
|
+
}
|
5672
|
+
return script;
|
5673
|
+
}
|
5674
|
+
return null;
|
5675
|
+
};
|
5676
|
+
var injectScript = function injectScript2(params) {
|
5677
|
+
var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
|
5678
|
+
var script = document.createElement("script");
|
5679
|
+
script.src = "".concat(V3_URL).concat(queryString);
|
5680
|
+
var headOrBody = document.head || document.body;
|
5681
|
+
if (!headOrBody) {
|
5682
|
+
throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
|
5683
|
+
}
|
5684
|
+
headOrBody.appendChild(script);
|
5685
|
+
return script;
|
5686
|
+
};
|
5687
|
+
var registerWrapper = function registerWrapper2(stripe, startTime) {
|
5688
|
+
if (!stripe || !stripe._registerWrapper) {
|
5689
|
+
return;
|
5690
|
+
}
|
5691
|
+
stripe._registerWrapper({
|
5692
|
+
name: "stripe-js",
|
5693
|
+
version: "4.3.0",
|
5694
|
+
startTime
|
5695
|
+
});
|
5696
|
+
};
|
5697
|
+
var stripePromise = null;
|
5698
|
+
var onErrorListener = null;
|
5699
|
+
var onLoadListener = null;
|
5700
|
+
var onError = function onError2(reject) {
|
5701
|
+
return function() {
|
5702
|
+
reject(new Error("Failed to load Stripe.js"));
|
5703
|
+
};
|
5704
|
+
};
|
5705
|
+
var onLoad = function onLoad2(resolve, reject) {
|
5706
|
+
return function() {
|
5707
|
+
if (window.Stripe) {
|
5708
|
+
resolve(window.Stripe);
|
5709
|
+
} else {
|
5710
|
+
reject(new Error("Stripe.js not available"));
|
5711
|
+
}
|
5712
|
+
};
|
5713
|
+
};
|
5714
|
+
var loadScript = function loadScript2(params) {
|
5715
|
+
if (stripePromise !== null) {
|
5716
|
+
return stripePromise;
|
5717
|
+
}
|
5718
|
+
stripePromise = new Promise(function(resolve, reject) {
|
5719
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
5720
|
+
resolve(null);
|
5721
|
+
return;
|
5722
|
+
}
|
5723
|
+
if (window.Stripe && params) {
|
5724
|
+
console.warn(EXISTING_SCRIPT_MESSAGE);
|
5725
|
+
}
|
5726
|
+
if (window.Stripe) {
|
5727
|
+
resolve(window.Stripe);
|
5728
|
+
return;
|
5729
|
+
}
|
5730
|
+
try {
|
5731
|
+
var script = findScript();
|
5732
|
+
if (script && params) {
|
5733
|
+
console.warn(EXISTING_SCRIPT_MESSAGE);
|
5734
|
+
} else if (!script) {
|
5735
|
+
script = injectScript(params);
|
5736
|
+
} else if (script && onLoadListener !== null && onErrorListener !== null) {
|
5737
|
+
var _script$parentNode;
|
5738
|
+
script.removeEventListener("load", onLoadListener);
|
5739
|
+
script.removeEventListener("error", onErrorListener);
|
5740
|
+
(_script$parentNode = script.parentNode) === null || _script$parentNode === void 0 ? void 0 : _script$parentNode.removeChild(script);
|
5741
|
+
script = injectScript(params);
|
5742
|
+
}
|
5743
|
+
onLoadListener = onLoad(resolve, reject);
|
5744
|
+
onErrorListener = onError(reject);
|
5745
|
+
script.addEventListener("load", onLoadListener);
|
5746
|
+
script.addEventListener("error", onErrorListener);
|
5747
|
+
} catch (error) {
|
5748
|
+
reject(error);
|
5749
|
+
return;
|
5750
|
+
}
|
5751
|
+
});
|
5752
|
+
return stripePromise["catch"](function(error) {
|
5753
|
+
stripePromise = null;
|
5754
|
+
return Promise.reject(error);
|
5755
|
+
});
|
5756
|
+
};
|
5757
|
+
var initStripe = function initStripe2(maybeStripe, args, startTime) {
|
5758
|
+
if (maybeStripe === null) {
|
5759
|
+
return null;
|
5760
|
+
}
|
5761
|
+
var stripe = maybeStripe.apply(void 0, args);
|
5762
|
+
registerWrapper(stripe, startTime);
|
5763
|
+
return stripe;
|
5764
|
+
};
|
5765
|
+
var stripePromise$1;
|
5766
|
+
var loadCalled = false;
|
5767
|
+
var getStripePromise = function getStripePromise2() {
|
5768
|
+
if (stripePromise$1) {
|
5769
|
+
return stripePromise$1;
|
5770
|
+
}
|
5771
|
+
stripePromise$1 = loadScript(null)["catch"](function(error) {
|
5772
|
+
stripePromise$1 = null;
|
5773
|
+
return Promise.reject(error);
|
5774
|
+
});
|
5775
|
+
return stripePromise$1;
|
5776
|
+
};
|
5777
|
+
Promise.resolve().then(function() {
|
5778
|
+
return getStripePromise();
|
5779
|
+
})["catch"](function(error) {
|
5780
|
+
if (!loadCalled) {
|
5781
|
+
console.warn(error);
|
5782
|
+
}
|
5783
|
+
});
|
5784
|
+
var loadStripe = function loadStripe2() {
|
5785
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
5786
|
+
args[_key] = arguments[_key];
|
5787
|
+
}
|
5788
|
+
loadCalled = true;
|
5789
|
+
var startTime = Date.now();
|
5790
|
+
return getStripePromise().then(function(maybeStripe) {
|
5791
|
+
return initStripe(maybeStripe, args, startTime);
|
5792
|
+
});
|
5793
|
+
};
|
5794
|
+
|
5795
|
+
// src/context/embed.tsx
|
5796
|
+
var import_react_stripe_js = require("@stripe/react-stripe-js");
|
5797
|
+
|
5655
5798
|
// src/api/runtime.ts
|
5656
5799
|
var BASE_PATH = "https://api.schematichq.com".replace(/\/+$/, "");
|
5657
5800
|
var Configuration = class {
|
@@ -5968,6 +6111,30 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
|
|
5968
6111
|
};
|
5969
6112
|
}
|
5970
6113
|
|
6114
|
+
// src/api/models/BillingProductForSubscriptionResponseData.ts
|
6115
|
+
function BillingProductForSubscriptionResponseDataFromJSON(json) {
|
6116
|
+
return BillingProductForSubscriptionResponseDataFromJSONTyped(json, false);
|
6117
|
+
}
|
6118
|
+
function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
6119
|
+
if (json == null) {
|
6120
|
+
return json;
|
6121
|
+
}
|
6122
|
+
return {
|
6123
|
+
accountId: json["account_id"],
|
6124
|
+
createdAt: new Date(json["created_at"]),
|
6125
|
+
currency: json["currency"],
|
6126
|
+
environmentId: json["environment_id"],
|
6127
|
+
externalId: json["external_id"],
|
6128
|
+
id: json["id"],
|
6129
|
+
interval: json["interval"] == null ? void 0 : json["interval"],
|
6130
|
+
name: json["name"],
|
6131
|
+
price: json["price"],
|
6132
|
+
quantity: json["quantity"],
|
6133
|
+
subscriptionId: json["subscription_id"],
|
6134
|
+
updatedAt: new Date(json["updated_at"])
|
6135
|
+
};
|
6136
|
+
}
|
6137
|
+
|
5971
6138
|
// src/api/models/BillingSubscriptionResponseData.ts
|
5972
6139
|
function BillingSubscriptionResponseDataFromJSON(json) {
|
5973
6140
|
return BillingSubscriptionResponseDataFromJSONTyped(json, false);
|
@@ -5990,7 +6157,6 @@ function ChangeSubscriptionRequestBodyToJSON(value) {
|
|
5990
6157
|
return value;
|
5991
6158
|
}
|
5992
6159
|
return {
|
5993
|
-
action: value["action"],
|
5994
6160
|
new_plan_id: value["newPlanId"],
|
5995
6161
|
new_price_id: value["newPriceId"]
|
5996
6162
|
};
|
@@ -6402,6 +6568,81 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
6402
6568
|
};
|
6403
6569
|
}
|
6404
6570
|
|
6571
|
+
// src/api/models/InvoiceResponseData.ts
|
6572
|
+
function InvoiceResponseDataFromJSON(json) {
|
6573
|
+
return InvoiceResponseDataFromJSONTyped(json, false);
|
6574
|
+
}
|
6575
|
+
function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
6576
|
+
if (json == null) {
|
6577
|
+
return json;
|
6578
|
+
}
|
6579
|
+
return {
|
6580
|
+
amountDue: json["amount_due"],
|
6581
|
+
amountPaid: json["amount_paid"],
|
6582
|
+
amountRemaining: json["amount_remaining"],
|
6583
|
+
collectionMethod: json["collection_method"],
|
6584
|
+
companyId: json["company_id"] == null ? void 0 : json["company_id"],
|
6585
|
+
createdAt: new Date(json["created_at"]),
|
6586
|
+
currency: json["currency"],
|
6587
|
+
customerExternalId: json["customer_external_id"],
|
6588
|
+
dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
|
6589
|
+
environmentId: json["environment_id"],
|
6590
|
+
externalId: json["external_id"],
|
6591
|
+
id: json["id"],
|
6592
|
+
subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
|
6593
|
+
subtotal: json["subtotal"],
|
6594
|
+
updatedAt: new Date(json["updated_at"])
|
6595
|
+
};
|
6596
|
+
}
|
6597
|
+
|
6598
|
+
// src/api/models/PaymentMethodResponseData.ts
|
6599
|
+
function PaymentMethodResponseDataFromJSON(json) {
|
6600
|
+
return PaymentMethodResponseDataFromJSONTyped(json, false);
|
6601
|
+
}
|
6602
|
+
function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
6603
|
+
if (json == null) {
|
6604
|
+
return json;
|
6605
|
+
}
|
6606
|
+
return {
|
6607
|
+
cardBrand: json["card_brand"] == null ? void 0 : json["card_brand"],
|
6608
|
+
cardExpMonth: json["card_exp_month"] == null ? void 0 : json["card_exp_month"],
|
6609
|
+
cardExpYear: json["card_exp_year"] == null ? void 0 : json["card_exp_year"],
|
6610
|
+
cardLast4: json["card_last4"] == null ? void 0 : json["card_last4"],
|
6611
|
+
companyId: json["company_id"] == null ? void 0 : json["company_id"],
|
6612
|
+
createdAt: new Date(json["created_at"]),
|
6613
|
+
customerExternalId: json["customer_external_id"],
|
6614
|
+
environmentId: json["environment_id"],
|
6615
|
+
externalId: json["external_id"],
|
6616
|
+
id: json["id"],
|
6617
|
+
invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
|
6618
|
+
paymentMethodType: json["payment_method_type"],
|
6619
|
+
subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
|
6620
|
+
updatedAt: new Date(json["updated_at"])
|
6621
|
+
};
|
6622
|
+
}
|
6623
|
+
|
6624
|
+
// src/api/models/CompanySubscriptionResponseData.ts
|
6625
|
+
function CompanySubscriptionResponseDataFromJSON(json) {
|
6626
|
+
return CompanySubscriptionResponseDataFromJSONTyped(json, false);
|
6627
|
+
}
|
6628
|
+
function CompanySubscriptionResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
6629
|
+
if (json == null) {
|
6630
|
+
return json;
|
6631
|
+
}
|
6632
|
+
return {
|
6633
|
+
customerExternalId: json["customer_external_id"],
|
6634
|
+
expiredAt: json["expired_at"] == null ? void 0 : new Date(json["expired_at"]),
|
6635
|
+
interval: json["interval"],
|
6636
|
+
latestInvoice: json["latest_invoice"] == null ? void 0 : InvoiceResponseDataFromJSON(json["latest_invoice"]),
|
6637
|
+
paymentMethod: json["payment_method"] == null ? void 0 : PaymentMethodResponseDataFromJSON(json["payment_method"]),
|
6638
|
+
products: json["products"].map(
|
6639
|
+
BillingProductForSubscriptionResponseDataFromJSON
|
6640
|
+
),
|
6641
|
+
subscriptionExternalId: json["subscription_external_id"],
|
6642
|
+
totalPrice: json["total_price"]
|
6643
|
+
};
|
6644
|
+
}
|
6645
|
+
|
6405
6646
|
// src/api/models/ComponentResponseData.ts
|
6406
6647
|
function ComponentResponseDataFromJSON(json) {
|
6407
6648
|
return ComponentResponseDataFromJSONTyped(json, false);
|
@@ -6466,7 +6707,7 @@ function StripeEmbedInfoFromJSONTyped(json, ignoreDiscriminator) {
|
|
6466
6707
|
return json;
|
6467
6708
|
}
|
6468
6709
|
return {
|
6469
|
-
customerEkey: json["customer_ekey"],
|
6710
|
+
customerEkey: json["customer_ekey"] == null ? void 0 : json["customer_ekey"],
|
6470
6711
|
publishableKey: json["publishable_key"]
|
6471
6712
|
};
|
6472
6713
|
}
|
@@ -6486,7 +6727,8 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
6486
6727
|
company: json["company"] == null ? void 0 : CompanyDetailResponseDataFromJSON(json["company"]),
|
6487
6728
|
component: json["component"] == null ? void 0 : ComponentResponseDataFromJSON(json["component"]),
|
6488
6729
|
featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
|
6489
|
-
stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"])
|
6730
|
+
stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
|
6731
|
+
subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"])
|
6490
6732
|
};
|
6491
6733
|
}
|
6492
6734
|
|
@@ -6699,28 +6941,36 @@ async function fetchComponent(id, accessToken, options) {
|
|
6699
6941
|
const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
|
6700
6942
|
to: "string"
|
6701
6943
|
});
|
6702
|
-
const ast = getEditorState(
|
6944
|
+
const ast = getEditorState(json);
|
6703
6945
|
if (ast) {
|
6704
6946
|
Object.assign(settings, ast.ROOT.props);
|
6705
6947
|
nodes.push(...parseEditorState(ast));
|
6706
6948
|
}
|
6707
6949
|
}
|
6950
|
+
let stripe = null;
|
6951
|
+
if (data.stripeEmbed?.publishableKey) {
|
6952
|
+
stripe = loadStripe(data.stripeEmbed.publishableKey);
|
6953
|
+
}
|
6708
6954
|
return {
|
6709
6955
|
data,
|
6710
6956
|
nodes,
|
6711
|
-
settings
|
6957
|
+
settings,
|
6958
|
+
stripe
|
6712
6959
|
};
|
6713
6960
|
}
|
6714
6961
|
var EmbedContext = (0, import_react2.createContext)({
|
6715
6962
|
data: {},
|
6716
6963
|
nodes: [],
|
6717
6964
|
settings: { ...defaultSettings },
|
6965
|
+
stripe: null,
|
6718
6966
|
layout: "portal",
|
6719
6967
|
error: void 0,
|
6720
6968
|
setData: () => {
|
6721
6969
|
},
|
6722
6970
|
updateSettings: () => {
|
6723
6971
|
},
|
6972
|
+
setStripe: () => {
|
6973
|
+
},
|
6724
6974
|
setLayout: () => {
|
6725
6975
|
}
|
6726
6976
|
});
|
@@ -6736,12 +6986,15 @@ var EmbedProvider = ({
|
|
6736
6986
|
data: {},
|
6737
6987
|
nodes: [],
|
6738
6988
|
settings: { ...defaultSettings },
|
6989
|
+
stripe: null,
|
6739
6990
|
layout: "portal",
|
6740
6991
|
error: void 0,
|
6741
6992
|
setData: () => {
|
6742
6993
|
},
|
6743
6994
|
updateSettings: () => {
|
6744
6995
|
},
|
6996
|
+
setStripe: () => {
|
6997
|
+
},
|
6745
6998
|
setLayout: () => {
|
6746
6999
|
}
|
6747
7000
|
};
|
@@ -6761,7 +7014,7 @@ var EmbedProvider = ({
|
|
6761
7014
|
if (!id || !accessToken) {
|
6762
7015
|
return;
|
6763
7016
|
}
|
6764
|
-
fetchComponent(id, accessToken, apiConfig).then((resolvedData) => {
|
7017
|
+
fetchComponent(id, accessToken, apiConfig).then(async (resolvedData) => {
|
6765
7018
|
setState((prev2) => ({ ...prev2, ...resolvedData }));
|
6766
7019
|
}).catch((error) => setState((prev2) => ({ ...prev2, error })));
|
6767
7020
|
}, [id, accessToken, apiConfig]);
|
@@ -6795,6 +7048,15 @@ var EmbedProvider = ({
|
|
6795
7048
|
},
|
6796
7049
|
[setState]
|
6797
7050
|
);
|
7051
|
+
const setStripe = (0, import_react2.useCallback)(
|
7052
|
+
(stripe) => {
|
7053
|
+
setState((prev2) => ({
|
7054
|
+
...prev2,
|
7055
|
+
stripe
|
7056
|
+
}));
|
7057
|
+
},
|
7058
|
+
[setState]
|
7059
|
+
);
|
6798
7060
|
const setLayout = (0, import_react2.useCallback)(
|
6799
7061
|
(layout) => {
|
6800
7062
|
setState((prev2) => ({
|
@@ -6804,6 +7066,47 @@ var EmbedProvider = ({
|
|
6804
7066
|
},
|
6805
7067
|
[setState]
|
6806
7068
|
);
|
7069
|
+
const renderChildren = () => {
|
7070
|
+
if (state.stripe) {
|
7071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
7072
|
+
import_react_stripe_js.Elements,
|
7073
|
+
{
|
7074
|
+
stripe: state.stripe,
|
7075
|
+
options: {
|
7076
|
+
appearance: {
|
7077
|
+
theme: "stripe",
|
7078
|
+
variables: {
|
7079
|
+
// Base
|
7080
|
+
spacingUnit: ".25rem",
|
7081
|
+
colorPrimary: "#0570de",
|
7082
|
+
colorBackground: "#FFFFFF",
|
7083
|
+
colorText: "#30313d",
|
7084
|
+
colorDanger: "#df1b41",
|
7085
|
+
fontFamily: "Public Sans, system-ui, sans-serif",
|
7086
|
+
borderRadius: ".5rem",
|
7087
|
+
// Layout
|
7088
|
+
gridRowSpacing: "1.5rem",
|
7089
|
+
gridColumnSpacing: "1.5rem"
|
7090
|
+
},
|
7091
|
+
rules: {
|
7092
|
+
".Label": {
|
7093
|
+
color: "#020202",
|
7094
|
+
fontWeight: "400",
|
7095
|
+
fontSize: "16px",
|
7096
|
+
marginBottom: "12px"
|
7097
|
+
}
|
7098
|
+
}
|
7099
|
+
},
|
7100
|
+
...state.data.stripeEmbed?.customerEkey && {
|
7101
|
+
clientSecret: state.data.stripeEmbed.customerEkey
|
7102
|
+
}
|
7103
|
+
},
|
7104
|
+
children
|
7105
|
+
}
|
7106
|
+
);
|
7107
|
+
}
|
7108
|
+
return children;
|
7109
|
+
};
|
6807
7110
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
6808
7111
|
EmbedContext.Provider,
|
6809
7112
|
{
|
@@ -6811,13 +7114,15 @@ var EmbedProvider = ({
|
|
6811
7114
|
data: state.data,
|
6812
7115
|
nodes: state.nodes,
|
6813
7116
|
settings: state.settings,
|
7117
|
+
stripe: state.stripe,
|
6814
7118
|
layout: state.layout,
|
6815
7119
|
error: state.error,
|
6816
7120
|
setData,
|
6817
7121
|
updateSettings,
|
7122
|
+
setStripe,
|
6818
7123
|
setLayout
|
6819
7124
|
},
|
6820
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children })
|
7125
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ot, { theme: state.settings.theme, children: renderChildren() })
|
6821
7126
|
}
|
6822
7127
|
);
|
6823
7128
|
};
|
@@ -7755,11 +8060,9 @@ var useSchematicFlag = (key, opts) => {
|
|
7755
8060
|
return value;
|
7756
8061
|
};
|
7757
8062
|
|
7758
|
-
// src/components/elements/
|
7759
|
-
var
|
7760
|
-
|
7761
|
-
// src/const/index.ts
|
7762
|
-
var TEXT_BASE_SIZE = 16;
|
8063
|
+
// src/components/elements/plan-manager/PlanManager.tsx
|
8064
|
+
var import_react7 = require("react");
|
8065
|
+
var import_react_dom = require("react-dom");
|
7763
8066
|
|
7764
8067
|
// src/utils/color.ts
|
7765
8068
|
function hexToHSL(color) {
|
@@ -7871,6 +8174,9 @@ function camelToHyphen(str) {
|
|
7871
8174
|
return str.replace(/([a-z][A-Z])/g, (g2) => `${g2[0]}-${g2[1].toLowerCase()}`);
|
7872
8175
|
}
|
7873
8176
|
|
8177
|
+
// src/const/index.ts
|
8178
|
+
var TEXT_BASE_SIZE = 16;
|
8179
|
+
|
7874
8180
|
// src/utils/style.ts
|
7875
8181
|
function attr(key, value) {
|
7876
8182
|
return typeof value !== "undefined" && lt`
|
@@ -7888,88 +8194,6 @@ attr.rem = function propAsRem(key, value) {
|
|
7888
8194
|
`;
|
7889
8195
|
};
|
7890
8196
|
|
7891
|
-
// src/components/elements/card/styles.ts
|
7892
|
-
var StyledCard = dt.div(
|
7893
|
-
({
|
7894
|
-
theme,
|
7895
|
-
$sectionLayout = "merged",
|
7896
|
-
$borderRadius = 8,
|
7897
|
-
$padding = 48,
|
7898
|
-
$shadow = true
|
7899
|
-
}) => {
|
7900
|
-
return lt`
|
7901
|
-
box-sizing: border-box;
|
7902
|
-
font-size: ${TEXT_BASE_SIZE}px;
|
7903
|
-
|
7904
|
-
*,
|
7905
|
-
*::before,
|
7906
|
-
*::after {
|
7907
|
-
box-sizing: inherit;
|
7908
|
-
}
|
7909
|
-
|
7910
|
-
> * {
|
7911
|
-
padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
|
7912
|
-
${$padding / TEXT_BASE_SIZE}rem;
|
7913
|
-
color: ${theme.typography.text.color};
|
7914
|
-
}
|
7915
|
-
|
7916
|
-
${() => {
|
7917
|
-
const { l: l2 } = hexToHSL(theme.card.background);
|
7918
|
-
const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
|
7919
|
-
const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
|
7920
|
-
const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
|
7921
|
-
if ($sectionLayout === "merged") {
|
7922
|
-
return lt`
|
7923
|
-
background: ${({ theme: theme2 }) => theme2.card.background};
|
7924
|
-
border-radius: ${borderRadius};
|
7925
|
-
|
7926
|
-
${$shadow && `box-shadow: ${boxShadow};`}
|
7927
|
-
|
7928
|
-
> :not(:last-child) {
|
7929
|
-
border-bottom: 1px solid ${borderColor};
|
7930
|
-
}
|
7931
|
-
`;
|
7932
|
-
}
|
7933
|
-
return lt`
|
7934
|
-
> :not(:last-child) {
|
7935
|
-
margin-bottom: 1rem;
|
7936
|
-
}
|
7937
|
-
|
7938
|
-
> * {
|
7939
|
-
background: ${theme.card.background};
|
7940
|
-
border-radius: ${borderRadius};
|
7941
|
-
${$shadow && `box-shadow: ${boxShadow};`}
|
7942
|
-
}
|
7943
|
-
`;
|
7944
|
-
}}
|
7945
|
-
`;
|
7946
|
-
}
|
7947
|
-
);
|
7948
|
-
|
7949
|
-
// src/components/elements/card/Card.tsx
|
7950
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
7951
|
-
var Card = (0, import_react6.forwardRef)(
|
7952
|
-
({ children, className }, ref) => {
|
7953
|
-
const { settings } = useEmbed();
|
7954
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
7955
|
-
StyledCard,
|
7956
|
-
{
|
7957
|
-
ref,
|
7958
|
-
className,
|
7959
|
-
$sectionLayout: settings.theme?.sectionLayout,
|
7960
|
-
$borderRadius: settings.theme?.card?.borderRadius,
|
7961
|
-
$padding: settings.theme?.card?.padding,
|
7962
|
-
$shadow: settings.theme?.card?.hasShadow,
|
7963
|
-
children
|
7964
|
-
}
|
7965
|
-
);
|
7966
|
-
}
|
7967
|
-
);
|
7968
|
-
|
7969
|
-
// src/components/elements/plan-manager/PlanManager.tsx
|
7970
|
-
var import_react7 = require("react");
|
7971
|
-
var import_react_dom = require("react-dom");
|
7972
|
-
|
7973
8197
|
// src/components/ui/box/styles.ts
|
7974
8198
|
var Box = dt.div((props) => {
|
7975
8199
|
const initialStyles = [];
|
@@ -8087,7 +8311,7 @@ var Button = dt.button`
|
|
8087
8311
|
`;
|
8088
8312
|
|
8089
8313
|
// src/components/ui/button/Button.tsx
|
8090
|
-
var
|
8314
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
8091
8315
|
var Button2 = ({
|
8092
8316
|
color = "white",
|
8093
8317
|
size = "md",
|
@@ -8096,7 +8320,7 @@ var Button2 = ({
|
|
8096
8320
|
children,
|
8097
8321
|
...props
|
8098
8322
|
}) => {
|
8099
|
-
return /* @__PURE__ */ (0,
|
8323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
8100
8324
|
Button,
|
8101
8325
|
{
|
8102
8326
|
$color: color,
|
@@ -8127,6 +8351,7 @@ var Container = dt.div`
|
|
8127
8351
|
display: flex;
|
8128
8352
|
justify-content: center;
|
8129
8353
|
align-items: center;
|
8354
|
+
flex-shrink: 0;
|
8130
8355
|
border-radius: 9999px;
|
8131
8356
|
${({ $size }) => {
|
8132
8357
|
const base = 24;
|
@@ -8163,13 +8388,13 @@ var Container = dt.div`
|
|
8163
8388
|
`;
|
8164
8389
|
|
8165
8390
|
// src/components/ui/icon/Icon.tsx
|
8166
|
-
var
|
8391
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
8167
8392
|
var Icon2 = ({ name, className, ...props }) => {
|
8168
|
-
return /* @__PURE__ */ (0,
|
8393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
|
8169
8394
|
};
|
8170
8395
|
|
8171
8396
|
// src/components/ui/icon/IconRound.tsx
|
8172
|
-
var
|
8397
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
8173
8398
|
var IconRound = ({
|
8174
8399
|
name,
|
8175
8400
|
variant = "filled",
|
@@ -8177,7 +8402,7 @@ var IconRound = ({
|
|
8177
8402
|
colors = ["white", "#e5e7eb"],
|
8178
8403
|
...props
|
8179
8404
|
}) => {
|
8180
|
-
return /* @__PURE__ */ (0,
|
8405
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
|
8181
8406
|
};
|
8182
8407
|
|
8183
8408
|
// src/components/ui/progress-bar/styles.ts
|
@@ -8186,7 +8411,7 @@ var Container2 = dt(Flex)`
|
|
8186
8411
|
`;
|
8187
8412
|
|
8188
8413
|
// src/components/ui/progress-bar/ProgressBar.tsx
|
8189
|
-
var
|
8414
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
8190
8415
|
var ProgressBar = ({
|
8191
8416
|
progress,
|
8192
8417
|
value,
|
@@ -8202,21 +8427,21 @@ var ProgressBar = ({
|
|
8202
8427
|
orange: "#DB6769",
|
8203
8428
|
red: "#EF4444"
|
8204
8429
|
};
|
8205
|
-
return /* @__PURE__ */ (0,
|
8430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
8206
8431
|
Container2,
|
8207
8432
|
{
|
8208
8433
|
$alignItems: "center",
|
8209
8434
|
$gap: `${16 / TEXT_BASE_SIZE}rem`,
|
8210
8435
|
...props,
|
8211
8436
|
children: [
|
8212
|
-
/* @__PURE__ */ (0,
|
8437
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
8213
8438
|
Flex,
|
8214
8439
|
{
|
8215
8440
|
$position: "relative",
|
8216
8441
|
$alignItems: "center",
|
8217
8442
|
$width: `${barWidth}`,
|
8218
8443
|
$maxWidth: "100%",
|
8219
|
-
children: /* @__PURE__ */ (0,
|
8444
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
8220
8445
|
Flex,
|
8221
8446
|
{
|
8222
8447
|
$position: "relative",
|
@@ -8225,7 +8450,7 @@ var ProgressBar = ({
|
|
8225
8450
|
$height: `${8 / TEXT_BASE_SIZE}rem`,
|
8226
8451
|
$background: "#F2F4F7",
|
8227
8452
|
$borderRadius: "9999px",
|
8228
|
-
children: /* @__PURE__ */ (0,
|
8453
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
8229
8454
|
Box,
|
8230
8455
|
{
|
8231
8456
|
$width: `${Math.min(progress, 100)}%`,
|
@@ -8238,7 +8463,7 @@ var ProgressBar = ({
|
|
8238
8463
|
)
|
8239
8464
|
}
|
8240
8465
|
),
|
8241
|
-
total !== 0 && /* @__PURE__ */ (0,
|
8466
|
+
total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Text, { $size: 14, $weight: 500, children: [
|
8242
8467
|
value,
|
8243
8468
|
"/",
|
8244
8469
|
total
|
@@ -8248,41 +8473,152 @@ var ProgressBar = ({
|
|
8248
8473
|
);
|
8249
8474
|
};
|
8250
8475
|
|
8476
|
+
// src/components/elements/plan-manager/CheckoutForm.tsx
|
8477
|
+
var import_react6 = require("react");
|
8478
|
+
var import_react_stripe_js2 = require("@stripe/react-stripe-js");
|
8479
|
+
var import_react_stripe_js3 = require("@stripe/react-stripe-js");
|
8480
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
8481
|
+
var CheckoutForm = () => {
|
8482
|
+
const stripe = (0, import_react_stripe_js3.useStripe)();
|
8483
|
+
const elements = (0, import_react_stripe_js3.useElements)();
|
8484
|
+
const [message, setMessage] = (0, import_react6.useState)(null);
|
8485
|
+
const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
|
8486
|
+
const handleSubmit = async (event) => {
|
8487
|
+
event.preventDefault();
|
8488
|
+
if (!stripe || !elements) {
|
8489
|
+
return;
|
8490
|
+
}
|
8491
|
+
setIsLoading(true);
|
8492
|
+
const { error } = await stripe.confirmPayment({
|
8493
|
+
elements,
|
8494
|
+
confirmParams: {
|
8495
|
+
return_url: window.location.href
|
8496
|
+
}
|
8497
|
+
});
|
8498
|
+
if (error.type === "card_error" || error.type === "validation_error") {
|
8499
|
+
setMessage(error.message);
|
8500
|
+
} else {
|
8501
|
+
setMessage("An unexpected error occured.");
|
8502
|
+
}
|
8503
|
+
setIsLoading(false);
|
8504
|
+
};
|
8505
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
8506
|
+
"form",
|
8507
|
+
{
|
8508
|
+
id: "payment-form",
|
8509
|
+
onSubmit: handleSubmit,
|
8510
|
+
style: {
|
8511
|
+
display: "flex",
|
8512
|
+
flexDirection: "column",
|
8513
|
+
height: "100%"
|
8514
|
+
},
|
8515
|
+
children: [
|
8516
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
8517
|
+
Box,
|
8518
|
+
{
|
8519
|
+
$fontSize: "18px",
|
8520
|
+
$marginBottom: "1.5rem",
|
8521
|
+
$display: "inline-block",
|
8522
|
+
$width: "100%",
|
8523
|
+
children: [
|
8524
|
+
"Add payment method",
|
8525
|
+
" "
|
8526
|
+
]
|
8527
|
+
}
|
8528
|
+
),
|
8529
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
8530
|
+
Flex,
|
8531
|
+
{
|
8532
|
+
$flexDirection: "column",
|
8533
|
+
$gap: "1.5rem",
|
8534
|
+
$marginBottom: "1.5rem",
|
8535
|
+
$width: "100%",
|
8536
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
8537
|
+
import_react_stripe_js2.LinkAuthenticationElement,
|
8538
|
+
{
|
8539
|
+
id: "link-authentication-element"
|
8540
|
+
}
|
8541
|
+
)
|
8542
|
+
}
|
8543
|
+
),
|
8544
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
|
8545
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
|
8546
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "payment-message", children: message })
|
8547
|
+
] }),
|
8548
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
8549
|
+
"button",
|
8550
|
+
{
|
8551
|
+
disabled: isLoading || !stripe || !elements,
|
8552
|
+
id: "submit",
|
8553
|
+
style: {
|
8554
|
+
backgroundColor: "#000000",
|
8555
|
+
color: "#ffffff",
|
8556
|
+
paddingTop: ".75rem",
|
8557
|
+
paddingBottom: ".75rem",
|
8558
|
+
fontSize: "15px",
|
8559
|
+
width: "100%",
|
8560
|
+
borderRadius: ".5rem",
|
8561
|
+
textAlign: "center",
|
8562
|
+
cursor: "pointer"
|
8563
|
+
},
|
8564
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: "button-text", style: { marginTop: "2.5rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "spinner", id: "spinner" }) : "Save payment method" })
|
8565
|
+
}
|
8566
|
+
) })
|
8567
|
+
]
|
8568
|
+
}
|
8569
|
+
);
|
8570
|
+
};
|
8571
|
+
|
8251
8572
|
// src/components/elements/plan-manager/styles.ts
|
8252
8573
|
var StyledButton = dt(Button2)`
|
8253
8574
|
font-family: "Public Sans", sans-serif;
|
8254
8575
|
font-weight: 500;
|
8255
8576
|
text-align: center;
|
8256
8577
|
width: 100%;
|
8578
|
+
|
8257
8579
|
${({ $color = "primary", theme }) => {
|
8258
8580
|
const { l: l2 } = hexToHSL(theme[$color]);
|
8259
|
-
const
|
8581
|
+
const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
|
8260
8582
|
return lt`
|
8261
|
-
color: ${
|
8583
|
+
color: ${textColor};
|
8262
8584
|
|
8263
8585
|
${Text} {
|
8264
|
-
color: ${
|
8586
|
+
color: ${textColor};
|
8265
8587
|
}
|
8266
8588
|
`;
|
8267
8589
|
}};
|
8268
8590
|
|
8269
|
-
${({ $color = "primary", theme }) => {
|
8591
|
+
${({ $color = "primary", theme, $variant = "filled" }) => {
|
8270
8592
|
const color = theme[$color];
|
8271
|
-
return lt`
|
8272
|
-
|
8273
|
-
|
8274
|
-
|
8593
|
+
return $variant === "filled" ? lt`
|
8594
|
+
background-color: ${color};
|
8595
|
+
border-color: ${color};
|
8596
|
+
` : lt`
|
8597
|
+
background-color: transparent;
|
8598
|
+
border-color: #d2d2d2;
|
8599
|
+
color: #194bfb;
|
8600
|
+
${Text} {
|
8601
|
+
color: #194bfb;
|
8602
|
+
}
|
8603
|
+
`;
|
8275
8604
|
}}
|
8276
8605
|
|
8277
8606
|
&:hover {
|
8278
|
-
${({ $color = "primary", theme }) => {
|
8607
|
+
${({ $color = "primary", theme, $variant = "filled" }) => {
|
8279
8608
|
const specified = theme[$color];
|
8280
8609
|
const lightened = lighten(specified, 15);
|
8281
8610
|
const color = specified === lightened ? darken(specified, 15) : lightened;
|
8282
|
-
return lt`
|
8283
|
-
|
8284
|
-
|
8285
|
-
|
8611
|
+
return $variant === "filled" ? lt`
|
8612
|
+
background-color: ${color};
|
8613
|
+
border-color: ${color};
|
8614
|
+
` : lt`
|
8615
|
+
background-color: ${color};
|
8616
|
+
border-color: ${color};
|
8617
|
+
color: #ffffff;
|
8618
|
+
${Text} {
|
8619
|
+
color: #ffffff;
|
8620
|
+
}
|
8621
|
+
`;
|
8286
8622
|
}}
|
8287
8623
|
}
|
8288
8624
|
|
@@ -8292,19 +8628,19 @@ var StyledButton = dt(Button2)`
|
|
8292
8628
|
return lt`
|
8293
8629
|
font-size: ${15 / 16}rem;
|
8294
8630
|
padding: ${12 / 16}rem 0;
|
8295
|
-
border-radius: ${
|
8631
|
+
border-radius: ${6 / 16}rem;
|
8296
8632
|
`;
|
8297
8633
|
case "md":
|
8298
8634
|
return lt`
|
8299
8635
|
font-size: ${17 / 16}rem;
|
8300
8636
|
padding: ${16 / 16}rem 0;
|
8301
|
-
border-radius: ${
|
8637
|
+
border-radius: ${8 / 16}rem;
|
8302
8638
|
`;
|
8303
8639
|
case "lg":
|
8304
8640
|
return lt`
|
8305
8641
|
font-size: ${19 / 16}rem;
|
8306
8642
|
padding: ${20 / 16}rem 0;
|
8307
|
-
border-radius: ${
|
8643
|
+
border-radius: ${10 / 16}rem;
|
8308
8644
|
`;
|
8309
8645
|
}
|
8310
8646
|
}}
|
@@ -8312,6 +8648,301 @@ var StyledButton = dt(Button2)`
|
|
8312
8648
|
|
8313
8649
|
// src/components/elements/plan-manager/PlanManager.tsx
|
8314
8650
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
8651
|
+
var OverlayHeader = ({ children }) => {
|
8652
|
+
const { setLayout } = useEmbed();
|
8653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8654
|
+
Flex,
|
8655
|
+
{
|
8656
|
+
$paddingLeft: "2.5rem",
|
8657
|
+
$paddingRight: "2.5rem",
|
8658
|
+
$padding: ".75rem 2.5rem",
|
8659
|
+
$flexDirection: "row",
|
8660
|
+
$justifyContent: "space-between",
|
8661
|
+
$alignItems: "center",
|
8662
|
+
$borderBottom: "1px solid #DEDEDE",
|
8663
|
+
$gap: "1rem",
|
8664
|
+
$backgroundColor: "#FFFFFF",
|
8665
|
+
$borderRadius: ".5rem .5rem 0 0",
|
8666
|
+
children: [
|
8667
|
+
children,
|
8668
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8669
|
+
Box,
|
8670
|
+
{
|
8671
|
+
$cursor: "pointer",
|
8672
|
+
onClick: () => {
|
8673
|
+
setLayout("portal");
|
8674
|
+
},
|
8675
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
|
8676
|
+
}
|
8677
|
+
) })
|
8678
|
+
]
|
8679
|
+
}
|
8680
|
+
);
|
8681
|
+
};
|
8682
|
+
var OverlayWrapper = ({
|
8683
|
+
children,
|
8684
|
+
size = "lg"
|
8685
|
+
}) => {
|
8686
|
+
const sizeWidthMap = {
|
8687
|
+
md: "700px",
|
8688
|
+
lg: "75%"
|
8689
|
+
};
|
8690
|
+
const sizeHeighthMap = {
|
8691
|
+
md: "auto",
|
8692
|
+
lg: "75%"
|
8693
|
+
};
|
8694
|
+
const sizeMaxWidthMap = {
|
8695
|
+
md: "auto",
|
8696
|
+
lg: "1140px"
|
8697
|
+
};
|
8698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8699
|
+
Box,
|
8700
|
+
{
|
8701
|
+
$position: "absolute",
|
8702
|
+
$top: "50%",
|
8703
|
+
$left: "50%",
|
8704
|
+
$zIndex: "999999",
|
8705
|
+
$transform: "translate(-50%, -50%)",
|
8706
|
+
$width: "100%",
|
8707
|
+
$height: "100%",
|
8708
|
+
$backgroundColor: "#D9D9D9",
|
8709
|
+
$overflow: "hidden",
|
8710
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8711
|
+
Flex,
|
8712
|
+
{
|
8713
|
+
$position: "relative",
|
8714
|
+
$top: "50%",
|
8715
|
+
$left: "50%",
|
8716
|
+
$transform: "translate(-50%, -50%)",
|
8717
|
+
$flexDirection: "column",
|
8718
|
+
$maxWidth: sizeMaxWidthMap[size],
|
8719
|
+
$width: sizeWidthMap[size],
|
8720
|
+
$height: sizeHeighthMap[size],
|
8721
|
+
$backgroundColor: "#FBFBFB",
|
8722
|
+
$borderBottom: "1px solid #DEDEDE",
|
8723
|
+
$borderRadius: "8px",
|
8724
|
+
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
8725
|
+
id: "select-plan-dialog",
|
8726
|
+
role: "dialog",
|
8727
|
+
"aria-labelledby": "select-plan-dialog-label",
|
8728
|
+
"aria-modal": "true",
|
8729
|
+
children
|
8730
|
+
}
|
8731
|
+
)
|
8732
|
+
}
|
8733
|
+
);
|
8734
|
+
};
|
8735
|
+
var OverlaySideBar = ({
|
8736
|
+
pricePeriod,
|
8737
|
+
setPricePeriod,
|
8738
|
+
setCheckoutStage
|
8739
|
+
}) => {
|
8740
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8741
|
+
Flex,
|
8742
|
+
{
|
8743
|
+
$flexDirection: "column",
|
8744
|
+
$background: "white",
|
8745
|
+
$borderRadius: "0 0 0.5rem",
|
8746
|
+
$maxWidth: "275px",
|
8747
|
+
$height: "100%",
|
8748
|
+
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
8749
|
+
children: [
|
8750
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8751
|
+
Flex,
|
8752
|
+
{
|
8753
|
+
$flexDirection: "column",
|
8754
|
+
$position: "relative",
|
8755
|
+
$gap: "1rem",
|
8756
|
+
$width: "100%",
|
8757
|
+
$height: "auto",
|
8758
|
+
$padding: "1.5rem",
|
8759
|
+
$borderBottom: "1px solid #DEDEDE",
|
8760
|
+
children: [
|
8761
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: [
|
8762
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }),
|
8763
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8764
|
+
Flex,
|
8765
|
+
{
|
8766
|
+
$border: "1px solid #D9D9D9",
|
8767
|
+
$padding: ".15rem .45rem .15rem .55rem",
|
8768
|
+
$alignItems: "center",
|
8769
|
+
$borderRadius: "5px",
|
8770
|
+
$fontSize: "12px",
|
8771
|
+
children: [
|
8772
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $marginRight: ".5rem", children: "$ USD" }),
|
8773
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8774
|
+
Icon2,
|
8775
|
+
{
|
8776
|
+
name: "chevron-down",
|
8777
|
+
style: {
|
8778
|
+
fontSize: "20px",
|
8779
|
+
lineHeight: "1em"
|
8780
|
+
}
|
8781
|
+
}
|
8782
|
+
)
|
8783
|
+
]
|
8784
|
+
}
|
8785
|
+
)
|
8786
|
+
] }),
|
8787
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8788
|
+
Flex,
|
8789
|
+
{
|
8790
|
+
$flexDirection: "row",
|
8791
|
+
$border: "1px solid #D9D9D9",
|
8792
|
+
$borderRadius: "40px",
|
8793
|
+
$fontSize: "12px",
|
8794
|
+
$textAlign: "center",
|
8795
|
+
$cursor: "pointer",
|
8796
|
+
children: [
|
8797
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8798
|
+
Box,
|
8799
|
+
{
|
8800
|
+
onClick: () => setPricePeriod("month"),
|
8801
|
+
$padding: ".25rem .5rem",
|
8802
|
+
$flex: "1",
|
8803
|
+
$fontWeight: pricePeriod === "month" ? "600" : "400",
|
8804
|
+
$backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
|
8805
|
+
$borderRadius: "40px",
|
8806
|
+
children: "Billed monthly"
|
8807
|
+
}
|
8808
|
+
),
|
8809
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8810
|
+
Box,
|
8811
|
+
{
|
8812
|
+
onClick: () => setPricePeriod("year"),
|
8813
|
+
$padding: ".25rem .5rem",
|
8814
|
+
$flex: "1",
|
8815
|
+
$fontWeight: pricePeriod === "year" ? "600" : "400",
|
8816
|
+
$backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
|
8817
|
+
$borderRadius: "40px",
|
8818
|
+
children: "Billed yearly"
|
8819
|
+
}
|
8820
|
+
)
|
8821
|
+
]
|
8822
|
+
}
|
8823
|
+
),
|
8824
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "11px", $color: "#194BFB", children: "Save up to 33% with yearly billing" })
|
8825
|
+
]
|
8826
|
+
}
|
8827
|
+
),
|
8828
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8829
|
+
Flex,
|
8830
|
+
{
|
8831
|
+
$flexDirection: "column",
|
8832
|
+
$position: "relative",
|
8833
|
+
$gap: "1rem",
|
8834
|
+
$width: "100%",
|
8835
|
+
$height: "auto",
|
8836
|
+
$padding: "1.5rem",
|
8837
|
+
$flex: "1",
|
8838
|
+
$borderBottom: "1px solid #DEDEDE",
|
8839
|
+
children: [
|
8840
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
|
8841
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8842
|
+
Flex,
|
8843
|
+
{
|
8844
|
+
$flexDirection: "column",
|
8845
|
+
$fontSize: "14px",
|
8846
|
+
$color: "#5D5D5D",
|
8847
|
+
$gap: ".5rem",
|
8848
|
+
children: [
|
8849
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8850
|
+
Flex,
|
8851
|
+
{
|
8852
|
+
$flexDirection: "row",
|
8853
|
+
$alignItems: "center",
|
8854
|
+
$justifyContent: "space-between",
|
8855
|
+
$fontSize: "14px",
|
8856
|
+
$color: "#5D5D5D",
|
8857
|
+
children: [
|
8858
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: "Free" }),
|
8859
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
|
8860
|
+
"$0/",
|
8861
|
+
pricePeriod
|
8862
|
+
] })
|
8863
|
+
]
|
8864
|
+
}
|
8865
|
+
),
|
8866
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8867
|
+
Box,
|
8868
|
+
{
|
8869
|
+
$width: "100%",
|
8870
|
+
$textAlign: "left",
|
8871
|
+
$opacity: "50%",
|
8872
|
+
$marginBottom: "-.25rem",
|
8873
|
+
$marginTop: "-.25rem",
|
8874
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8875
|
+
Icon2,
|
8876
|
+
{
|
8877
|
+
name: "arrow-down",
|
8878
|
+
style: {
|
8879
|
+
display: "inline-block"
|
8880
|
+
}
|
8881
|
+
}
|
8882
|
+
)
|
8883
|
+
}
|
8884
|
+
),
|
8885
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8886
|
+
Flex,
|
8887
|
+
{
|
8888
|
+
$flexDirection: "row",
|
8889
|
+
$alignItems: "center",
|
8890
|
+
$justifyContent: "space-between",
|
8891
|
+
$fontSize: "14px",
|
8892
|
+
$color: "#5D5D5D",
|
8893
|
+
children: [
|
8894
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: "Professional" }),
|
8895
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
|
8896
|
+
"$285/",
|
8897
|
+
pricePeriod
|
8898
|
+
] })
|
8899
|
+
]
|
8900
|
+
}
|
8901
|
+
)
|
8902
|
+
]
|
8903
|
+
}
|
8904
|
+
)
|
8905
|
+
]
|
8906
|
+
}
|
8907
|
+
),
|
8908
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8909
|
+
Flex,
|
8910
|
+
{
|
8911
|
+
$flexDirection: "column",
|
8912
|
+
$position: "relative",
|
8913
|
+
$gap: ".75rem",
|
8914
|
+
$width: "100%",
|
8915
|
+
$height: "auto",
|
8916
|
+
$padding: "1.5rem",
|
8917
|
+
children: [
|
8918
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#5D5D5D", $justifyContent: "space-between", children: [
|
8919
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
|
8920
|
+
"Monthly total:",
|
8921
|
+
" "
|
8922
|
+
] }),
|
8923
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#000000", children: "$285/mo" })
|
8924
|
+
] }),
|
8925
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8926
|
+
StyledButton,
|
8927
|
+
{
|
8928
|
+
$size: "sm",
|
8929
|
+
onClick: () => {
|
8930
|
+
setCheckoutStage("checkout");
|
8931
|
+
},
|
8932
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: ".5rem", $alignItems: "center", $justifyContent: "center", children: [
|
8933
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
|
8934
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
|
8935
|
+
] })
|
8936
|
+
}
|
8937
|
+
),
|
8938
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
|
8939
|
+
]
|
8940
|
+
}
|
8941
|
+
)
|
8942
|
+
]
|
8943
|
+
}
|
8944
|
+
);
|
8945
|
+
};
|
8315
8946
|
var resolveDesignProps = (props) => {
|
8316
8947
|
return {
|
8317
8948
|
header: {
|
@@ -8342,118 +8973,89 @@ var resolveDesignProps = (props) => {
|
|
8342
8973
|
};
|
8343
8974
|
var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal, ...rest }, ref) => {
|
8344
8975
|
const props = resolveDesignProps(rest);
|
8345
|
-
const
|
8346
|
-
|
8347
|
-
|
8348
|
-
|
8349
|
-
|
8350
|
-
|
8351
|
-
|
8352
|
-
|
8353
|
-
})
|
8354
|
-
addOns: data.company?.addOns?.map(({ name, description }) => ({
|
8976
|
+
const [checkoutStage, setCheckoutStage] = (0, import_react7.useState)(
|
8977
|
+
"plan"
|
8978
|
+
);
|
8979
|
+
const [planPeriod, setPlanPeriod] = (0, import_react7.useState)("month");
|
8980
|
+
const { data, settings, layout, stripe, setLayout } = useEmbed();
|
8981
|
+
const { currentPlan, canChangePlan, availablePlans } = (0, import_react7.useMemo)(() => {
|
8982
|
+
const canChangePlan2 = stripe !== null;
|
8983
|
+
const availablePlans2 = data.activePlans?.map(
|
8984
|
+
({ name, description, current, monthlyPrice, yearlyPrice }) => ({
|
8355
8985
|
name,
|
8356
8986
|
description,
|
8357
|
-
price:
|
8358
|
-
|
8987
|
+
price: planPeriod === "month" ? monthlyPrice?.price : yearlyPrice?.price,
|
8988
|
+
current
|
8989
|
+
})
|
8990
|
+
);
|
8991
|
+
return {
|
8992
|
+
currentPlan: data.company?.plan,
|
8993
|
+
canChangePlan: canChangePlan2,
|
8994
|
+
availablePlans: availablePlans2
|
8359
8995
|
};
|
8360
|
-
}, [data.company]);
|
8996
|
+
}, [data.company, data.activePlans, stripe, planPeriod]);
|
8361
8997
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className, children: [
|
8362
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.
|
8363
|
-
|
8364
|
-
|
8365
|
-
|
8366
|
-
|
8367
|
-
|
8368
|
-
|
8369
|
-
$margin: "0 0 1.5rem",
|
8370
|
-
children: [
|
8371
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
|
8372
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8373
|
-
Text,
|
8374
|
-
{
|
8375
|
-
$font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
|
8376
|
-
$size: settings.theme.typography[props.header.title.fontStyle].fontSize,
|
8377
|
-
$weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
|
8378
|
-
$color: settings.theme.typography[props.header.title.fontStyle].color,
|
8379
|
-
$lineHeight: 1,
|
8380
|
-
children: plan.name
|
8381
|
-
}
|
8382
|
-
) }),
|
8383
|
-
props.header.description.isVisible && plan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8384
|
-
Text,
|
8385
|
-
{
|
8386
|
-
$font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
|
8387
|
-
$size: settings.theme.typography[props.header.description.fontStyle].fontSize,
|
8388
|
-
$weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
|
8389
|
-
$color: settings.theme.typography[props.header.description.fontStyle].color,
|
8390
|
-
children: plan.description
|
8391
|
-
}
|
8392
|
-
)
|
8393
|
-
] }),
|
8394
|
-
props.header.price.isVisible && plan.planPrice >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8395
|
-
Text,
|
8396
|
-
{
|
8397
|
-
$font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
|
8398
|
-
$size: settings.theme.typography[props.header.price.fontStyle].fontSize,
|
8399
|
-
$weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
|
8400
|
-
$color: settings.theme.typography[props.header.price.fontStyle].color,
|
8401
|
-
children: [
|
8402
|
-
"$",
|
8403
|
-
plan.planPrice,
|
8404
|
-
"/",
|
8405
|
-
plan.planPeriod
|
8406
|
-
]
|
8407
|
-
}
|
8408
|
-
)
|
8409
|
-
]
|
8410
|
-
}
|
8411
|
-
),
|
8412
|
-
props.addOns.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
8413
|
-
props.addOns.showLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8414
|
-
Text,
|
8415
|
-
{
|
8416
|
-
$font: settings.theme.typography.text.fontFamily,
|
8417
|
-
$size: settings.theme.typography.text.fontSize,
|
8418
|
-
$weight: 500,
|
8419
|
-
$color: darken(settings.theme.typography.text.color, 20),
|
8420
|
-
children: "Add-Ons"
|
8421
|
-
}
|
8422
|
-
),
|
8423
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $width: "100%", $margin: "0 0 1rem", children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8998
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8999
|
+
Flex,
|
9000
|
+
{
|
9001
|
+
$flexDirection: "column",
|
9002
|
+
$gap: "0.75rem",
|
9003
|
+
...canChangePlan && { $margin: "0 0 0.5rem" },
|
9004
|
+
children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8424
9005
|
Flex,
|
8425
9006
|
{
|
8426
9007
|
$justifyContent: "space-between",
|
8427
9008
|
$alignItems: "center",
|
8428
9009
|
$width: "100%",
|
9010
|
+
...canChangePlan && { $margin: "0 0 1.5rem" },
|
8429
9011
|
children: [
|
8430
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.
|
9012
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
|
9013
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9014
|
+
Text,
|
9015
|
+
{
|
9016
|
+
$font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
|
9017
|
+
$size: settings.theme.typography[props.header.title.fontStyle].fontSize,
|
9018
|
+
$weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
|
9019
|
+
$color: settings.theme.typography[props.header.title.fontStyle].color,
|
9020
|
+
$lineHeight: 1,
|
9021
|
+
children: currentPlan.name
|
9022
|
+
}
|
9023
|
+
) }),
|
9024
|
+
props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9025
|
+
Text,
|
9026
|
+
{
|
9027
|
+
$font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
|
9028
|
+
$size: settings.theme.typography[props.header.description.fontStyle].fontSize,
|
9029
|
+
$weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
|
9030
|
+
$color: settings.theme.typography[props.header.description.fontStyle].color,
|
9031
|
+
children: currentPlan.description
|
9032
|
+
}
|
9033
|
+
)
|
9034
|
+
] }),
|
9035
|
+
props.header.price.isVisible && currentPlan.planPrice >= 0 && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8431
9036
|
Text,
|
8432
9037
|
{
|
8433
|
-
$font: settings.theme.typography[props.
|
8434
|
-
$size: settings.theme.typography[props.
|
8435
|
-
$weight: settings.theme.typography[props.
|
8436
|
-
$color: settings.theme.typography[props.
|
8437
|
-
children:
|
9038
|
+
$font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
|
9039
|
+
$size: settings.theme.typography[props.header.price.fontStyle].fontSize,
|
9040
|
+
$weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
|
9041
|
+
$color: settings.theme.typography[props.header.price.fontStyle].color,
|
9042
|
+
children: [
|
9043
|
+
"$",
|
9044
|
+
currentPlan.planPrice,
|
9045
|
+
"/",
|
9046
|
+
currentPlan.planPeriod
|
9047
|
+
]
|
8438
9048
|
}
|
8439
|
-
)
|
8440
|
-
addOn.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $weight: 500, children: [
|
8441
|
-
"$",
|
8442
|
-
addOn.price,
|
8443
|
-
"/mo"
|
8444
|
-
] })
|
9049
|
+
)
|
8445
9050
|
]
|
8446
|
-
}
|
8447
|
-
|
8448
|
-
|
8449
|
-
|
8450
|
-
|
8451
|
-
props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9051
|
+
}
|
9052
|
+
)
|
9053
|
+
}
|
9054
|
+
),
|
9055
|
+
canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8452
9056
|
StyledButton,
|
8453
9057
|
{
|
8454
9058
|
onClick: () => {
|
8455
|
-
if (layout !== "checkout")
|
8456
|
-
return;
|
8457
9059
|
setLayout("checkout");
|
8458
9060
|
},
|
8459
9061
|
$size: props.callToAction.buttonSize,
|
@@ -8469,83 +9071,269 @@ var PlanManager = (0, import_react7.forwardRef)(({ children, className, portal,
|
|
8469
9071
|
)
|
8470
9072
|
}
|
8471
9073
|
),
|
8472
|
-
|
8473
|
-
|
8474
|
-
|
8475
|
-
|
8476
|
-
|
8477
|
-
|
8478
|
-
|
8479
|
-
|
8480
|
-
|
8481
|
-
|
8482
|
-
|
8483
|
-
|
8484
|
-
|
8485
|
-
|
9074
|
+
canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(
|
9075
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(OverlayWrapper, { children: [
|
9076
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "1rem", children: [
|
9077
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
|
9078
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9079
|
+
Box,
|
9080
|
+
{
|
9081
|
+
$width: "15px",
|
9082
|
+
$height: "15px",
|
9083
|
+
$border: "2px solid #DDDDDD",
|
9084
|
+
$borderRadius: "999px",
|
9085
|
+
$backgroundColor: "white"
|
9086
|
+
}
|
9087
|
+
),
|
9088
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9089
|
+
"div",
|
9090
|
+
{
|
9091
|
+
...checkoutStage === "plan" && {
|
9092
|
+
style: {
|
9093
|
+
fontWeight: "700"
|
9094
|
+
}
|
9095
|
+
},
|
9096
|
+
children: "1. Select plan"
|
9097
|
+
}
|
9098
|
+
),
|
9099
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9100
|
+
Icon2,
|
9101
|
+
{
|
9102
|
+
name: "chevron-right",
|
9103
|
+
style: { fontSize: 16, color: "#D0D0D0" }
|
9104
|
+
}
|
9105
|
+
)
|
9106
|
+
] }),
|
9107
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $gap: "0.5rem", $alignItems: "center", children: [
|
9108
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9109
|
+
Box,
|
9110
|
+
{
|
9111
|
+
$width: "15px",
|
9112
|
+
$height: "15px",
|
9113
|
+
$border: "2px solid #DDDDDD",
|
9114
|
+
$borderRadius: "999px",
|
9115
|
+
$backgroundColor: "white"
|
9116
|
+
}
|
9117
|
+
),
|
9118
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9119
|
+
"div",
|
9120
|
+
{
|
9121
|
+
...checkoutStage === "checkout" && {
|
9122
|
+
style: {
|
9123
|
+
fontWeight: "700"
|
9124
|
+
}
|
9125
|
+
},
|
9126
|
+
children: "2. Checkout"
|
9127
|
+
}
|
9128
|
+
),
|
9129
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9130
|
+
Icon2,
|
9131
|
+
{
|
9132
|
+
name: "chevron-right",
|
9133
|
+
style: { fontSize: 16, color: "#D0D0D0" }
|
9134
|
+
}
|
9135
|
+
)
|
9136
|
+
] })
|
9137
|
+
] }) }),
|
9138
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "row", $height: "100%", children: [
|
9139
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
8486
9140
|
Flex,
|
8487
9141
|
{
|
8488
|
-
$
|
8489
|
-
$
|
8490
|
-
$
|
8491
|
-
$transform: "translate(-50%, -50%)",
|
8492
|
-
$width: "956px",
|
8493
|
-
$height: "700px",
|
9142
|
+
$flexDirection: "column",
|
9143
|
+
$gap: "1rem",
|
9144
|
+
$padding: "2rem 2.5rem 2rem 2.5rem",
|
8494
9145
|
$backgroundColor: "#FBFBFB",
|
8495
|
-
$borderRadius: "
|
8496
|
-
$
|
8497
|
-
|
8498
|
-
role: "dialog",
|
8499
|
-
"aria-labelledby": "select-plan-dialog-label",
|
8500
|
-
"aria-modal": "true",
|
9146
|
+
$borderRadius: "0 0.5rem 0",
|
9147
|
+
$flex: "1",
|
9148
|
+
$height: "100%",
|
8501
9149
|
children: [
|
8502
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.
|
8503
|
-
|
8504
|
-
|
8505
|
-
$position: "absolute",
|
8506
|
-
$top: "0.25rem",
|
8507
|
-
$right: "0.75rem",
|
8508
|
-
$cursor: "pointer",
|
8509
|
-
onClick: () => {
|
8510
|
-
setLayout("portal");
|
8511
|
-
},
|
8512
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
|
8513
|
-
}
|
8514
|
-
),
|
8515
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
|
8516
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8517
|
-
Text,
|
9150
|
+
checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
9151
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9152
|
+
Flex,
|
8518
9153
|
{
|
8519
|
-
|
8520
|
-
|
8521
|
-
$
|
8522
|
-
|
8523
|
-
|
9154
|
+
$flexDirection: "column",
|
9155
|
+
$gap: "1rem",
|
9156
|
+
$marginBottom: "1rem",
|
9157
|
+
children: [
|
9158
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9159
|
+
Text,
|
9160
|
+
{
|
9161
|
+
as: "h1",
|
9162
|
+
id: "select-plan-dialog-label",
|
9163
|
+
$size: 18,
|
9164
|
+
$marginBottom: ".5rem",
|
9165
|
+
children: "Select plan"
|
9166
|
+
}
|
9167
|
+
),
|
9168
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9169
|
+
Text,
|
9170
|
+
{
|
9171
|
+
as: "p",
|
9172
|
+
id: "select-plan-dialog-description",
|
9173
|
+
$size: 14,
|
9174
|
+
$weight: 400,
|
9175
|
+
children: "Choose your base plan"
|
9176
|
+
}
|
9177
|
+
)
|
9178
|
+
]
|
8524
9179
|
}
|
8525
9180
|
),
|
8526
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9181
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
8527
9182
|
Flex,
|
8528
9183
|
{
|
8529
|
-
$
|
8530
|
-
$
|
8531
|
-
$
|
8532
|
-
|
8533
|
-
|
8534
|
-
|
8535
|
-
|
8536
|
-
|
8537
|
-
|
8538
|
-
|
8539
|
-
|
8540
|
-
|
8541
|
-
|
8542
|
-
|
8543
|
-
|
9184
|
+
$flexDirection: "row",
|
9185
|
+
$gap: "1rem",
|
9186
|
+
$flex: "1",
|
9187
|
+
$height: "100%",
|
9188
|
+
children: availablePlans?.map((plan) => {
|
9189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9190
|
+
Flex,
|
9191
|
+
{
|
9192
|
+
$height: "100%",
|
9193
|
+
$flexDirection: "column",
|
9194
|
+
$backgroundColor: "white",
|
9195
|
+
$border: plan?.current ? `2px solid #194BFB` : "",
|
9196
|
+
$flex: "1",
|
9197
|
+
$borderRadius: ".5rem",
|
9198
|
+
$boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)",
|
9199
|
+
children: [
|
9200
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9201
|
+
Flex,
|
9202
|
+
{
|
9203
|
+
$flexDirection: "column",
|
9204
|
+
$position: "relative",
|
9205
|
+
$gap: "1rem",
|
9206
|
+
$width: "100%",
|
9207
|
+
$height: "auto",
|
9208
|
+
$padding: "1.5rem",
|
9209
|
+
$borderBottom: "1px solid #DEDEDE",
|
9210
|
+
children: [
|
9211
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: plan?.name }),
|
9212
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 14, children: plan?.description }),
|
9213
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
|
9214
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: ".90rem", children: "$" }),
|
9215
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: plan?.price ? plan.price : "350" }),
|
9216
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $display: "inline-block", $fontSize: ".75rem", children: [
|
9217
|
+
"/",
|
9218
|
+
planPeriod
|
9219
|
+
] })
|
9220
|
+
] }),
|
9221
|
+
plan?.current && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9222
|
+
Flex,
|
9223
|
+
{
|
9224
|
+
$position: "absolute",
|
9225
|
+
$right: "1rem",
|
9226
|
+
$top: "1rem",
|
9227
|
+
$fontSize: ".75rem",
|
9228
|
+
$color: "white",
|
9229
|
+
$backgroundColor: "#194BFB",
|
9230
|
+
$borderRadius: "999px",
|
9231
|
+
$padding: ".125rem .85rem",
|
9232
|
+
children: "Current plan"
|
9233
|
+
}
|
9234
|
+
)
|
9235
|
+
]
|
9236
|
+
}
|
9237
|
+
),
|
9238
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9239
|
+
Flex,
|
9240
|
+
{
|
9241
|
+
$flexDirection: "column",
|
9242
|
+
$position: "relative",
|
9243
|
+
$gap: "0.5rem",
|
9244
|
+
$flex: "1",
|
9245
|
+
$width: "100%",
|
9246
|
+
$height: "auto",
|
9247
|
+
$padding: "1.5rem",
|
9248
|
+
children: [{}, {}, {}].map(() => {
|
9249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $flexShrink: "0", $gap: "1rem", children: [
|
9250
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9251
|
+
IconRound,
|
9252
|
+
{
|
9253
|
+
name: "server-search",
|
9254
|
+
size: "tn",
|
9255
|
+
colors: ["#00000", "#F5F5F5"]
|
9256
|
+
}
|
9257
|
+
),
|
9258
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: ".75rem", $color: "#00000", children: "5 Queries/mo" }) })
|
9259
|
+
] });
|
9260
|
+
})
|
9261
|
+
}
|
9262
|
+
),
|
9263
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9264
|
+
Flex,
|
9265
|
+
{
|
9266
|
+
$flexDirection: "column",
|
9267
|
+
$position: "relative",
|
9268
|
+
$gap: "1rem",
|
9269
|
+
$width: "100%",
|
9270
|
+
$height: "auto",
|
9271
|
+
$padding: "1.5rem",
|
9272
|
+
children: plan.current ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9273
|
+
Flex,
|
9274
|
+
{
|
9275
|
+
$flexDirection: "row",
|
9276
|
+
$gap: ".5rem",
|
9277
|
+
$justifyContent: "center",
|
9278
|
+
$alignItems: "center",
|
9279
|
+
children: [
|
9280
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9281
|
+
Icon2,
|
9282
|
+
{
|
9283
|
+
name: "check-rounded",
|
9284
|
+
style: {
|
9285
|
+
fontSize: 24,
|
9286
|
+
lineHeight: "1em",
|
9287
|
+
color: "#194BFB"
|
9288
|
+
}
|
9289
|
+
}
|
9290
|
+
),
|
9291
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9292
|
+
"span",
|
9293
|
+
{
|
9294
|
+
style: {
|
9295
|
+
fontSize: "1rem",
|
9296
|
+
color: "#7B7B7B"
|
9297
|
+
},
|
9298
|
+
children: "Selected"
|
9299
|
+
}
|
9300
|
+
)
|
9301
|
+
]
|
9302
|
+
}
|
9303
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9304
|
+
StyledButton,
|
9305
|
+
{
|
9306
|
+
$size: "sm",
|
9307
|
+
$color: "secondary",
|
9308
|
+
$variant: "outline",
|
9309
|
+
onClick: () => {
|
9310
|
+
},
|
9311
|
+
children: "Select"
|
9312
|
+
}
|
9313
|
+
)
|
9314
|
+
}
|
9315
|
+
)
|
9316
|
+
]
|
9317
|
+
}
|
9318
|
+
);
|
9319
|
+
})
|
9320
|
+
}
|
9321
|
+
)
|
9322
|
+
] }),
|
9323
|
+
checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckoutForm, {})
|
8544
9324
|
]
|
8545
9325
|
}
|
9326
|
+
),
|
9327
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9328
|
+
OverlaySideBar,
|
9329
|
+
{
|
9330
|
+
pricePeriod: planPeriod,
|
9331
|
+
setPricePeriod: setPlanPeriod,
|
9332
|
+
setCheckoutStage
|
9333
|
+
}
|
8546
9334
|
)
|
8547
|
-
}
|
8548
|
-
),
|
9335
|
+
] })
|
9336
|
+
] }),
|
8549
9337
|
portal || document.body
|
8550
9338
|
)
|
8551
9339
|
] });
|
@@ -8587,7 +9375,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
|
|
8587
9375
|
allocationType,
|
8588
9376
|
feature,
|
8589
9377
|
period,
|
8590
|
-
usage,
|
9378
|
+
usage = 0,
|
8591
9379
|
...props2
|
8592
9380
|
}) => {
|
8593
9381
|
return {
|
@@ -8632,7 +9420,7 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
|
|
8632
9420
|
$alignItems: "center",
|
8633
9421
|
$gap: "1rem",
|
8634
9422
|
children: [
|
8635
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $
|
9423
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
|
8636
9424
|
props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
8637
9425
|
IconRound,
|
8638
9426
|
{
|
@@ -8651,7 +9439,6 @@ var IncludedFeatures = (0, import_react8.forwardRef)(({ className, ...rest }, re
|
|
8651
9439
|
$size: settings.theme.typography[props.icons.fontStyle].fontSize,
|
8652
9440
|
$weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
|
8653
9441
|
$color: settings.theme.typography[props.icons.fontStyle].color,
|
8654
|
-
$align: "center",
|
8655
9442
|
children: feature.name
|
8656
9443
|
}
|
8657
9444
|
) })
|
@@ -8852,19 +9639,29 @@ function resolveDesignProps4(props) {
|
|
8852
9639
|
}
|
8853
9640
|
var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref) => {
|
8854
9641
|
const props = resolveDesignProps4(rest);
|
8855
|
-
const { settings } = useEmbed();
|
8856
|
-
const {
|
9642
|
+
const { data, settings, stripe } = useEmbed();
|
9643
|
+
const { latestInvoice } = (0, import_react10.useMemo)(() => {
|
8857
9644
|
return {
|
8858
|
-
|
8859
|
-
|
8860
|
-
|
8861
|
-
|
8862
|
-
|
9645
|
+
latestInvoice: {
|
9646
|
+
...data.subscription?.latestInvoice?.amountDue && {
|
9647
|
+
amountDue: data.subscription.latestInvoice.amountDue
|
9648
|
+
},
|
9649
|
+
...data.subscription?.interval && {
|
9650
|
+
interval: data.subscription.interval
|
9651
|
+
},
|
9652
|
+
...data.subscription?.latestInvoice?.dueDate && {
|
9653
|
+
dueDate: toPrettyDate(
|
9654
|
+
new Date(data.subscription.latestInvoice.dueDate)
|
9655
|
+
)
|
9656
|
+
}
|
8863
9657
|
}
|
8864
9658
|
};
|
8865
|
-
}, []);
|
9659
|
+
}, [data.subscription]);
|
9660
|
+
if (!stripe || !data.subscription?.latestInvoice) {
|
9661
|
+
return null;
|
9662
|
+
}
|
8866
9663
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
|
8867
|
-
props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
9664
|
+
props.header.isVisible && latestInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
8868
9665
|
Flex,
|
8869
9666
|
{
|
8870
9667
|
$justifyContent: "space-between",
|
@@ -8880,13 +9677,13 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
|
|
8880
9677
|
children: [
|
8881
9678
|
props.header.prefix,
|
8882
9679
|
" ",
|
8883
|
-
|
9680
|
+
latestInvoice.dueDate
|
8884
9681
|
]
|
8885
9682
|
}
|
8886
9683
|
)
|
8887
9684
|
}
|
8888
9685
|
),
|
8889
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
|
9686
|
+
latestInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
|
8890
9687
|
props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
8891
9688
|
Text,
|
8892
9689
|
{
|
@@ -8904,27 +9701,18 @@ var UpcomingBill = (0, import_react10.forwardRef)(({ className, ...rest }, ref)
|
|
8904
9701
|
children: "$"
|
8905
9702
|
}
|
8906
9703
|
),
|
8907
|
-
|
9704
|
+
latestInvoice.amountDue
|
8908
9705
|
]
|
8909
9706
|
}
|
8910
9707
|
) }),
|
8911
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "
|
9708
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
8912
9709
|
Text,
|
8913
9710
|
{
|
8914
9711
|
$font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
|
8915
9712
|
$size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
|
8916
9713
|
$weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
|
8917
9714
|
$color: settings.theme.typography[props.contractEndDate.fontStyle].color,
|
8918
|
-
children:
|
8919
|
-
"Estimated monthly bill.",
|
8920
|
-
props.contractEndDate.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
8921
|
-
"\xA0",
|
8922
|
-
props.contractEndDate.prefix,
|
8923
|
-
" ",
|
8924
|
-
bill.endDate,
|
8925
|
-
"."
|
8926
|
-
] })
|
8927
|
-
]
|
9715
|
+
children: "Estimated monthly bill."
|
8928
9716
|
}
|
8929
9717
|
) })
|
8930
9718
|
] })
|
@@ -8948,21 +9736,26 @@ var resolveDesignProps5 = (props) => {
|
|
8948
9736
|
};
|
8949
9737
|
var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
|
8950
9738
|
const props = resolveDesignProps5(rest);
|
8951
|
-
const { settings, layout, setLayout } = useEmbed();
|
9739
|
+
const { data, settings, stripe, layout, setLayout } = useEmbed();
|
8952
9740
|
const paymentMethod = (0, import_react11.useMemo)(() => {
|
8953
|
-
const
|
8954
|
-
|
8955
|
-
|
8956
|
-
|
8957
|
-
|
8958
|
-
|
8959
|
-
|
8960
|
-
|
9741
|
+
const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
|
9742
|
+
let monthsToExpiration;
|
9743
|
+
if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
|
9744
|
+
const timeToExpiration = Math.round(
|
9745
|
+
+new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
|
9746
|
+
);
|
9747
|
+
monthsToExpiration = Math.round(
|
9748
|
+
timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
|
9749
|
+
);
|
9750
|
+
}
|
8961
9751
|
return {
|
8962
|
-
|
9752
|
+
cardLast4,
|
8963
9753
|
monthsToExpiration
|
8964
9754
|
};
|
8965
|
-
}, []);
|
9755
|
+
}, [data.subscription?.paymentMethod]);
|
9756
|
+
if (!stripe || !data.subscription?.paymentMethod) {
|
9757
|
+
return null;
|
9758
|
+
}
|
8966
9759
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
|
8967
9760
|
props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
8968
9761
|
Flex,
|
@@ -8981,7 +9774,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
|
|
8981
9774
|
children: "Payment Method"
|
8982
9775
|
}
|
8983
9776
|
),
|
8984
|
-
Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9777
|
+
typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
8985
9778
|
Text,
|
8986
9779
|
{
|
8987
9780
|
$font: settings.theme.typography.text.fontFamily,
|
@@ -8993,7 +9786,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
|
|
8993
9786
|
]
|
8994
9787
|
}
|
8995
9788
|
),
|
8996
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
9789
|
+
paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
8997
9790
|
Flex,
|
8998
9791
|
{
|
8999
9792
|
$justifyContent: "space-between",
|
@@ -9005,7 +9798,7 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
|
|
9005
9798
|
children: [
|
9006
9799
|
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
|
9007
9800
|
"\u{1F4B3} Card ending in ",
|
9008
|
-
paymentMethod.
|
9801
|
+
paymentMethod.cardLast4
|
9009
9802
|
] }),
|
9010
9803
|
props.functions.allowEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9011
9804
|
Text,
|
@@ -9027,62 +9820,246 @@ var PaymentMethod = (0, import_react11.forwardRef)(({ children, className, porta
|
|
9027
9820
|
}
|
9028
9821
|
),
|
9029
9822
|
layout === "payment" && (0, import_react_dom2.createPortal)(
|
9030
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.
|
9031
|
-
Box,
|
9032
|
-
|
9033
|
-
|
9034
|
-
|
9035
|
-
|
9036
|
-
|
9037
|
-
|
9038
|
-
|
9039
|
-
|
9040
|
-
|
9041
|
-
|
9042
|
-
|
9043
|
-
|
9044
|
-
|
9045
|
-
|
9046
|
-
|
9047
|
-
|
9048
|
-
|
9049
|
-
|
9050
|
-
|
9051
|
-
|
9052
|
-
|
9053
|
-
|
9054
|
-
|
9055
|
-
|
9056
|
-
|
9057
|
-
|
9058
|
-
|
9059
|
-
|
9060
|
-
|
9061
|
-
|
9062
|
-
|
9063
|
-
|
9064
|
-
|
9065
|
-
|
9066
|
-
|
9067
|
-
|
9068
|
-
|
9069
|
-
|
9070
|
-
|
9071
|
-
|
9072
|
-
|
9073
|
-
|
9074
|
-
|
9075
|
-
|
9076
|
-
|
9077
|
-
|
9078
|
-
|
9079
|
-
|
9080
|
-
|
9081
|
-
|
9082
|
-
|
9083
|
-
|
9084
|
-
|
9085
|
-
|
9823
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(OverlayWrapper, { size: "md", children: [
|
9824
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(OverlayHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
|
9825
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
9826
|
+
Flex,
|
9827
|
+
{
|
9828
|
+
$flexDirection: "column",
|
9829
|
+
$padding: "2.5rem",
|
9830
|
+
$height: "100%",
|
9831
|
+
$gap: "1.5rem",
|
9832
|
+
children: [
|
9833
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9834
|
+
Flex,
|
9835
|
+
{
|
9836
|
+
$flexDirection: "column",
|
9837
|
+
$gap: "1rem",
|
9838
|
+
$backgroundColor: "#FBFBFB",
|
9839
|
+
$borderRadius: "0 0 0.5rem 0.5rem",
|
9840
|
+
$flex: "1",
|
9841
|
+
$height: "100%",
|
9842
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
|
9843
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9844
|
+
Box,
|
9845
|
+
{
|
9846
|
+
$fontSize: "18px",
|
9847
|
+
$marginBottom: "1.5rem",
|
9848
|
+
$display: "inline-block",
|
9849
|
+
$width: "100%",
|
9850
|
+
children: "Default"
|
9851
|
+
}
|
9852
|
+
),
|
9853
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
|
9854
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9855
|
+
Flex,
|
9856
|
+
{
|
9857
|
+
$alignItems: "center",
|
9858
|
+
$padding: ".5rem 1rem",
|
9859
|
+
$border: "1px solid #E2E5E9",
|
9860
|
+
$borderRadius: ".5rem",
|
9861
|
+
$backgroundColor: "#ffffff",
|
9862
|
+
$flexDirection: "row",
|
9863
|
+
$gap: "1rem",
|
9864
|
+
$width: "100%",
|
9865
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
9866
|
+
Flex,
|
9867
|
+
{
|
9868
|
+
$flexDirection: "row",
|
9869
|
+
$justifyContent: "space-between",
|
9870
|
+
$flex: "1",
|
9871
|
+
children: [
|
9872
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
9873
|
+
Flex,
|
9874
|
+
{
|
9875
|
+
$flexDirection: "row",
|
9876
|
+
$alignItems: "center",
|
9877
|
+
$gap: "1rem",
|
9878
|
+
children: [
|
9879
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9880
|
+
"svg",
|
9881
|
+
{
|
9882
|
+
viewBox: "0 0 24 16",
|
9883
|
+
fill: "none",
|
9884
|
+
xmlns: "http://www.w3.org/2000/svg",
|
9885
|
+
width: "26px",
|
9886
|
+
height: "auto",
|
9887
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
|
9888
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9889
|
+
"rect",
|
9890
|
+
{
|
9891
|
+
stroke: "#DDD",
|
9892
|
+
fill: "#FFF",
|
9893
|
+
x: ".25",
|
9894
|
+
y: ".25",
|
9895
|
+
width: "23",
|
9896
|
+
height: "15.5",
|
9897
|
+
rx: "2"
|
9898
|
+
}
|
9899
|
+
),
|
9900
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9901
|
+
"path",
|
9902
|
+
{
|
9903
|
+
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",
|
9904
|
+
fill: "#1434CB"
|
9905
|
+
}
|
9906
|
+
)
|
9907
|
+
] })
|
9908
|
+
}
|
9909
|
+
) }),
|
9910
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
|
9911
|
+
]
|
9912
|
+
}
|
9913
|
+
),
|
9914
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
9915
|
+
]
|
9916
|
+
}
|
9917
|
+
)
|
9918
|
+
}
|
9919
|
+
),
|
9920
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9921
|
+
StyledButton,
|
9922
|
+
{
|
9923
|
+
$size: "sm",
|
9924
|
+
$color: "secondary",
|
9925
|
+
$variant: "outline",
|
9926
|
+
style: {
|
9927
|
+
whiteSpace: "nowrap",
|
9928
|
+
paddingLeft: "1rem",
|
9929
|
+
paddingRight: "1rem"
|
9930
|
+
},
|
9931
|
+
children: "Edit"
|
9932
|
+
}
|
9933
|
+
) })
|
9934
|
+
] })
|
9935
|
+
] })
|
9936
|
+
}
|
9937
|
+
),
|
9938
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9939
|
+
Flex,
|
9940
|
+
{
|
9941
|
+
$flexDirection: "column",
|
9942
|
+
$gap: "1rem",
|
9943
|
+
$backgroundColor: "#FBFBFB",
|
9944
|
+
$borderRadius: "0 0 0.5rem 0.5rem",
|
9945
|
+
$flex: "1",
|
9946
|
+
$height: "100%",
|
9947
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
|
9948
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9949
|
+
Box,
|
9950
|
+
{
|
9951
|
+
$fontSize: "18px",
|
9952
|
+
$marginBottom: "1.5rem",
|
9953
|
+
$display: "inline-block",
|
9954
|
+
$width: "100%",
|
9955
|
+
children: "Others"
|
9956
|
+
}
|
9957
|
+
),
|
9958
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
|
9959
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9960
|
+
Flex,
|
9961
|
+
{
|
9962
|
+
$alignItems: "center",
|
9963
|
+
$padding: ".5rem 1rem",
|
9964
|
+
$border: "1px solid #E2E5E9",
|
9965
|
+
$borderRadius: ".5rem",
|
9966
|
+
$backgroundColor: "#ffffff",
|
9967
|
+
$flexDirection: "row",
|
9968
|
+
$gap: "1rem",
|
9969
|
+
$width: "100%",
|
9970
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
9971
|
+
Flex,
|
9972
|
+
{
|
9973
|
+
$flexDirection: "row",
|
9974
|
+
$justifyContent: "space-between",
|
9975
|
+
$flex: "1",
|
9976
|
+
children: [
|
9977
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
9978
|
+
Flex,
|
9979
|
+
{
|
9980
|
+
$flexDirection: "row",
|
9981
|
+
$alignItems: "center",
|
9982
|
+
$gap: "1rem",
|
9983
|
+
children: [
|
9984
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9985
|
+
"svg",
|
9986
|
+
{
|
9987
|
+
viewBox: "0 0 24 16",
|
9988
|
+
fill: "none",
|
9989
|
+
xmlns: "http://www.w3.org/2000/svg",
|
9990
|
+
width: "26px",
|
9991
|
+
height: "auto",
|
9992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { children: [
|
9993
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
9994
|
+
"rect",
|
9995
|
+
{
|
9996
|
+
stroke: "#DDD",
|
9997
|
+
fill: "#FFF",
|
9998
|
+
x: ".25",
|
9999
|
+
y: ".25",
|
10000
|
+
width: "23",
|
10001
|
+
height: "15.5",
|
10002
|
+
rx: "2"
|
10003
|
+
}
|
10004
|
+
),
|
10005
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
10006
|
+
"path",
|
10007
|
+
{
|
10008
|
+
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",
|
10009
|
+
fill: "#1434CB"
|
10010
|
+
}
|
10011
|
+
)
|
10012
|
+
] })
|
10013
|
+
}
|
10014
|
+
) }),
|
10015
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
|
10016
|
+
]
|
10017
|
+
}
|
10018
|
+
),
|
10019
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
10020
|
+
]
|
10021
|
+
}
|
10022
|
+
)
|
10023
|
+
}
|
10024
|
+
),
|
10025
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
|
10026
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
10027
|
+
StyledButton,
|
10028
|
+
{
|
10029
|
+
$size: "sm",
|
10030
|
+
$color: "secondary",
|
10031
|
+
$variant: "outline",
|
10032
|
+
style: {
|
10033
|
+
whiteSpace: "nowrap",
|
10034
|
+
paddingLeft: "1rem",
|
10035
|
+
paddingRight: "1rem"
|
10036
|
+
},
|
10037
|
+
children: "Make Default"
|
10038
|
+
}
|
10039
|
+
),
|
10040
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
10041
|
+
StyledButton,
|
10042
|
+
{
|
10043
|
+
$size: "sm",
|
10044
|
+
$color: "secondary",
|
10045
|
+
$variant: "outline",
|
10046
|
+
style: {
|
10047
|
+
whiteSpace: "nowrap",
|
10048
|
+
paddingLeft: "1rem",
|
10049
|
+
paddingRight: "1rem"
|
10050
|
+
},
|
10051
|
+
children: "Edit"
|
10052
|
+
}
|
10053
|
+
)
|
10054
|
+
] })
|
10055
|
+
] })
|
10056
|
+
] })
|
10057
|
+
}
|
10058
|
+
)
|
10059
|
+
]
|
10060
|
+
}
|
10061
|
+
)
|
10062
|
+
] }),
|
9086
10063
|
portal || document.body
|
9087
10064
|
)
|
9088
10065
|
] });
|
@@ -9190,20 +10167,159 @@ var Invoices = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
|
|
9190
10167
|
});
|
9191
10168
|
|
9192
10169
|
// src/components/embed/ComponentTree.tsx
|
9193
|
-
var
|
10170
|
+
var import_react18 = require("react");
|
9194
10171
|
|
9195
10172
|
// src/components/embed/renderer.ts
|
10173
|
+
var import_react17 = require("react");
|
10174
|
+
|
10175
|
+
// src/components/layout/root/Root.tsx
|
9196
10176
|
var import_react13 = require("react");
|
10177
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
10178
|
+
var Root = (0, import_react13.forwardRef)(
|
10179
|
+
(props, ref) => {
|
10180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, ...props });
|
10181
|
+
}
|
10182
|
+
);
|
10183
|
+
|
10184
|
+
// src/components/layout/viewport/Viewport.tsx
|
10185
|
+
var import_react14 = require("react");
|
10186
|
+
|
10187
|
+
// src/components/layout/viewport/styles.ts
|
10188
|
+
var StyledViewport = dt.div`
|
10189
|
+
display: flex;
|
10190
|
+
flex-wrap: wrap;
|
10191
|
+
margin-left: auto;
|
10192
|
+
margin-right: auto;
|
10193
|
+
`;
|
10194
|
+
|
10195
|
+
// src/components/layout/viewport/Viewport.tsx
|
10196
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
10197
|
+
var Viewport = (0, import_react14.forwardRef)(
|
10198
|
+
({ children, ...props }, ref) => {
|
10199
|
+
const { settings, layout } = useEmbed();
|
10200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
10201
|
+
StyledViewport,
|
10202
|
+
{
|
10203
|
+
ref,
|
10204
|
+
$numberOfColumns: settings.theme.numberOfColumns,
|
10205
|
+
...props,
|
10206
|
+
children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "", children: "DISABLED" }) : children
|
10207
|
+
}
|
10208
|
+
);
|
10209
|
+
}
|
10210
|
+
);
|
10211
|
+
|
10212
|
+
// src/components/layout/column/Column.tsx
|
10213
|
+
var import_react16 = require("react");
|
10214
|
+
|
10215
|
+
// src/components/layout/card/Card.tsx
|
10216
|
+
var import_react15 = require("react");
|
10217
|
+
|
10218
|
+
// src/components/layout/card/styles.ts
|
10219
|
+
var StyledCard = dt.div(
|
10220
|
+
({
|
10221
|
+
theme,
|
10222
|
+
$sectionLayout = "merged",
|
10223
|
+
$borderRadius = 8,
|
10224
|
+
$padding = 48,
|
10225
|
+
$shadow = true
|
10226
|
+
}) => {
|
10227
|
+
return lt`
|
10228
|
+
box-sizing: border-box;
|
10229
|
+
font-size: ${TEXT_BASE_SIZE}px;
|
10230
|
+
|
10231
|
+
*,
|
10232
|
+
*::before,
|
10233
|
+
*::after {
|
10234
|
+
box-sizing: inherit;
|
10235
|
+
}
|
10236
|
+
|
10237
|
+
> * {
|
10238
|
+
padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
|
10239
|
+
${$padding / TEXT_BASE_SIZE}rem;
|
10240
|
+
color: ${theme.typography.text.color};
|
10241
|
+
}
|
10242
|
+
|
10243
|
+
${() => {
|
10244
|
+
const { l: l2 } = hexToHSL(theme.card.background);
|
10245
|
+
const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 30);
|
10246
|
+
const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
|
10247
|
+
const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
|
10248
|
+
if ($sectionLayout === "merged") {
|
10249
|
+
return lt`
|
10250
|
+
background: ${({ theme: theme2 }) => theme2.card.background};
|
10251
|
+
border-radius: ${borderRadius};
|
10252
|
+
|
10253
|
+
${$shadow && `box-shadow: ${boxShadow};`}
|
10254
|
+
|
10255
|
+
> :not(:last-child) {
|
10256
|
+
border-bottom: 1px solid ${borderColor};
|
10257
|
+
}
|
10258
|
+
`;
|
10259
|
+
}
|
10260
|
+
return lt`
|
10261
|
+
> :not(:last-child) {
|
10262
|
+
margin-bottom: 1rem;
|
10263
|
+
}
|
10264
|
+
|
10265
|
+
> * {
|
10266
|
+
background: ${theme.card.background};
|
10267
|
+
border-radius: ${borderRadius};
|
10268
|
+
${$shadow && `box-shadow: ${boxShadow};`}
|
10269
|
+
}
|
10270
|
+
`;
|
10271
|
+
}}
|
10272
|
+
`;
|
10273
|
+
}
|
10274
|
+
);
|
10275
|
+
|
10276
|
+
// src/components/layout/card/Card.tsx
|
10277
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
10278
|
+
var Card = (0, import_react15.forwardRef)(
|
10279
|
+
({ children, className }, ref) => {
|
10280
|
+
const { settings } = useEmbed();
|
10281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
10282
|
+
StyledCard,
|
10283
|
+
{
|
10284
|
+
ref,
|
10285
|
+
className,
|
10286
|
+
$sectionLayout: settings.theme?.sectionLayout,
|
10287
|
+
$borderRadius: settings.theme?.card?.borderRadius,
|
10288
|
+
$padding: settings.theme?.card?.padding,
|
10289
|
+
$shadow: settings.theme?.card?.hasShadow,
|
10290
|
+
children
|
10291
|
+
}
|
10292
|
+
);
|
10293
|
+
}
|
10294
|
+
);
|
10295
|
+
|
10296
|
+
// src/components/layout/column/styles.ts
|
10297
|
+
var StyledColumn = dt.div`
|
10298
|
+
flex-grow: 1;
|
10299
|
+
padding: 0.75rem;
|
10300
|
+
`;
|
10301
|
+
|
10302
|
+
// src/components/layout/column/Column.tsx
|
10303
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
10304
|
+
var Column = (0, import_react16.forwardRef)(
|
10305
|
+
({ children, ...props }, ref) => {
|
10306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Card, { children }) });
|
10307
|
+
}
|
10308
|
+
);
|
10309
|
+
|
10310
|
+
// src/components/embed/renderer.ts
|
9197
10311
|
var components = {
|
10312
|
+
Root,
|
10313
|
+
Viewport,
|
10314
|
+
Column,
|
9198
10315
|
Card,
|
9199
10316
|
PlanManager,
|
9200
10317
|
IncludedFeatures,
|
9201
10318
|
UpcomingBill,
|
9202
|
-
PaymentMethod
|
9203
|
-
MeteredFeatures
|
10319
|
+
PaymentMethod
|
9204
10320
|
};
|
9205
10321
|
function createRenderer(options) {
|
9206
|
-
const { useFallback =
|
10322
|
+
const { useFallback = false } = options || {};
|
9207
10323
|
return function renderNode(node2, index) {
|
9208
10324
|
const { type, props = {}, custom = {}, children } = node2;
|
9209
10325
|
const name = typeof type !== "string" ? type.resolvedName : type;
|
@@ -9220,12 +10336,12 @@ function createRenderer(options) {
|
|
9220
10336
|
const { className, ...rest } = props;
|
9221
10337
|
const resolvedProps = component === "div" ? rest : props;
|
9222
10338
|
const resolvedChildren = children.map(renderNode);
|
9223
|
-
return (0,
|
10339
|
+
return (0, import_react17.createElement)(
|
9224
10340
|
component,
|
9225
10341
|
{
|
9226
10342
|
className,
|
9227
10343
|
...component !== "div" && { resolvedProps },
|
9228
|
-
...Object.keys(custom).length > 0 && { custom },
|
10344
|
+
...component !== "div" && Object.keys(custom).length > 0 && { custom },
|
9229
10345
|
key: index
|
9230
10346
|
},
|
9231
10347
|
resolvedChildren
|
@@ -9234,30 +10350,30 @@ function createRenderer(options) {
|
|
9234
10350
|
}
|
9235
10351
|
|
9236
10352
|
// src/components/embed/ComponentTree.tsx
|
9237
|
-
var
|
10353
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
9238
10354
|
var ComponentTree = () => {
|
9239
|
-
const [children, setChildren] = (0,
|
10355
|
+
const [children, setChildren] = (0, import_react18.useState)("Loading");
|
9240
10356
|
const { error, nodes } = useEmbed();
|
9241
|
-
(0,
|
10357
|
+
(0, import_react18.useEffect)(() => {
|
9242
10358
|
const renderer = createRenderer();
|
9243
10359
|
setChildren(nodes.map(renderer));
|
9244
10360
|
}, [nodes]);
|
9245
10361
|
if (error) {
|
9246
|
-
return /* @__PURE__ */ (0,
|
10362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
|
9247
10363
|
}
|
9248
|
-
return /* @__PURE__ */ (0,
|
10364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children });
|
9249
10365
|
};
|
9250
10366
|
|
9251
10367
|
// src/components/embed/Embed.tsx
|
9252
|
-
var
|
10368
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
9253
10369
|
var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
|
9254
10370
|
if (accessToken?.length === 0) {
|
9255
|
-
return /* @__PURE__ */ (0,
|
10371
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: "Please provide an access token." });
|
9256
10372
|
}
|
9257
10373
|
if (!accessToken?.startsWith("token_")) {
|
9258
|
-
return /* @__PURE__ */ (0,
|
10374
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
|
9259
10375
|
}
|
9260
|
-
return /* @__PURE__ */ (0,
|
10376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ComponentTree, {}) });
|
9261
10377
|
};
|
9262
10378
|
/*! Bundled license information:
|
9263
10379
|
|