@schematichq/schematic-react 0.2.0-rc.1 → 0.2.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
|