@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.
@@ -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.12";
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(JSON.stringify(json));
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/card/Card.tsx
7759
- var import_react6 = require("react");
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 import_jsx_runtime4 = require("react/jsx-runtime");
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, import_jsx_runtime4.jsx)(
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 import_jsx_runtime5 = require("react/jsx-runtime");
8391
+ var import_jsx_runtime4 = require("react/jsx-runtime");
8167
8392
  var Icon2 = ({ name, className, ...props }) => {
8168
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: (0, import_classnames.default)("i", `i-${name}`, className), ...props });
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 import_jsx_runtime6 = require("react/jsx-runtime");
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, import_jsx_runtime6.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon2, { name }) });
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 import_jsx_runtime7 = require("react/jsx-runtime");
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, import_jsx_runtime7.jsxs)(
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, import_jsx_runtime7.jsx)(
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, import_jsx_runtime7.jsx)(
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, import_jsx_runtime7.jsx)(
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, import_jsx_runtime7.jsxs)(Text, { $size: 14, $weight: 500, children: [
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 color = l2 > 50 ? "#000000" : "#FFFFFF";
8581
+ const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
8260
8582
  return lt`
8261
- color: ${color};
8583
+ color: ${textColor};
8262
8584
 
8263
8585
  ${Text} {
8264
- color: ${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
- background-color: ${color};
8273
- border-color: ${color};
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
- background-color: ${color};
8284
- border-color: ${color};
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: ${8 / 16}rem;
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: ${10 / 16}rem;
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: ${12 / 16}rem;
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 { data, settings, layout, setLayout } = useEmbed();
8346
- const { plan, plans, addOns } = (0, import_react7.useMemo)(() => {
8347
- return {
8348
- plan: data.company?.plan || {},
8349
- plans: data.company?.plans?.map(({ name, description }) => ({
8350
- name,
8351
- description,
8352
- price: void 0
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: void 0
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.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", $margin: "0 0 3rem", children: [
8363
- props.header.isVisible && plan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
8364
- Flex,
8365
- {
8366
- $justifyContent: "space-between",
8367
- $alignItems: "center",
8368
- $width: "100%",
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.jsx)(
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.addOns.fontStyle].fontFamily,
8434
- $size: settings.theme.typography[props.addOns.fontStyle].fontSize,
8435
- $weight: settings.theme.typography[props.addOns.fontStyle].fontWeight,
8436
- $color: settings.theme.typography[props.addOns.fontStyle].color,
8437
- children: addOn.name
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
- index
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
- children,
8473
- layout === "checkout" && (0, import_react_dom.createPortal)(
8474
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
8475
- Box,
8476
- {
8477
- $position: "absolute",
8478
- $top: "50%",
8479
- $left: "50%",
8480
- $zIndex: "999999",
8481
- $transform: "translate(-50%, -50%)",
8482
- $width: "100%",
8483
- $height: "100%",
8484
- $backgroundColor: "#B5B5B580",
8485
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
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
- $position: "relative",
8489
- $top: "50%",
8490
- $left: "50%",
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: "8px",
8496
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
8497
- id: "select-plan-dialog",
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.jsx)(
8503
- Box,
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
- as: "h1",
8520
- id: "select-plan-dialog-label",
8521
- $size: 24,
8522
- $weight: 800,
8523
- children: "Select plan"
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)(Flex, { $flexDirection: "column", $gap: "1rem", children: plans.map((plan2, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
9181
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
8527
9182
  Flex,
8528
9183
  {
8529
- $justifyContent: "space-between",
8530
- $alignItems: "center",
8531
- $width: "100%",
8532
- children: [
8533
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 800, children: plan2.name }),
8534
- plan2.price >= 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { children: [
8535
- "$",
8536
- plan2.price,
8537
- "/mo"
8538
- ] })
8539
- ]
8540
- },
8541
- index
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, { $flexShrink: "0", $gap: "1rem", children: [
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 { bill } = (0, import_react10.useMemo)(() => {
9642
+ const { data, settings, stripe } = useEmbed();
9643
+ const { latestInvoice } = (0, import_react10.useMemo)(() => {
8857
9644
  return {
8858
- bill: {
8859
- amount: 200,
8860
- period: "monthly",
8861
- dueDate: toPrettyDate(/* @__PURE__ */ new Date("2024-06-12")),
8862
- endDate: (/* @__PURE__ */ new Date("2025-05-12")).toLocaleDateString()
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
- bill.dueDate
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
- bill.amount
9704
+ latestInvoice.amountDue
8908
9705
  ]
8909
9706
  }
8910
9707
  ) }),
8911
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $maxWidth: "140px", $lineHeight: "1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
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 cardNumber = "4512";
8954
- const expirationDate = "2024-12-22";
8955
- const timeToExpiration = Math.round(
8956
- +new Date(expirationDate) - +/* @__PURE__ */ new Date()
8957
- );
8958
- const monthsToExpiration = Math.round(
8959
- timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
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
- cardNumber,
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.cardNumber
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.jsx)(
9031
- Box,
9032
- {
9033
- $position: "absolute",
9034
- $top: "50%",
9035
- $left: "50%",
9036
- $zIndex: "999999",
9037
- $transform: "translate(-50%, -50%)",
9038
- $width: "100%",
9039
- $height: "100%",
9040
- $backgroundColor: "#B5B5B580",
9041
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
9042
- Flex,
9043
- {
9044
- $position: "relative",
9045
- $top: "50%",
9046
- $left: "50%",
9047
- $transform: "translate(-50%, -50%)",
9048
- $width: "956px",
9049
- $height: "700px",
9050
- $backgroundColor: "#FBFBFB",
9051
- $borderRadius: "8px",
9052
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9053
- id: "select-plan-dialog",
9054
- role: "dialog",
9055
- "aria-labelledby": "select-plan-dialog-label",
9056
- "aria-modal": "true",
9057
- children: [
9058
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
9059
- Box,
9060
- {
9061
- $position: "absolute",
9062
- $top: "0.25rem",
9063
- $right: "0.75rem",
9064
- $cursor: "pointer",
9065
- onClick: () => {
9066
- setLayout("portal");
9067
- },
9068
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } })
9069
- }
9070
- ),
9071
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
9072
- Text,
9073
- {
9074
- as: "h1",
9075
- id: "select-plan-dialog-label",
9076
- $size: 24,
9077
- $weight: 800,
9078
- children: "Add payment method"
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 import_react14 = require("react");
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 = true } = options || {};
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, import_react13.createElement)(
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 import_jsx_runtime14 = require("react/jsx-runtime");
10353
+ var import_jsx_runtime18 = require("react/jsx-runtime");
9238
10354
  var ComponentTree = () => {
9239
- const [children, setChildren] = (0, import_react14.useState)("Loading");
10355
+ const [children, setChildren] = (0, import_react18.useState)("Loading");
9240
10356
  const { error, nodes } = useEmbed();
9241
- (0, import_react14.useEffect)(() => {
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, import_jsx_runtime14.jsx)("div", { children: error.message });
10362
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: error.message });
9247
10363
  }
9248
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children });
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 import_jsx_runtime15 = require("react/jsx-runtime");
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, import_jsx_runtime15.jsx)("div", { children: "Please provide an access token." });
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, import_jsx_runtime15.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
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, import_jsx_runtime15.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ComponentTree, {}) });
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