@schematichq/schematic-components 1.9.0 → 2.0.0

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.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/dist/schematic-components.cjs.js +1802 -1167
  3. package/dist/schematic-components.d.ts +18 -19
  4. package/dist/schematic-components.esm.js +1652 -1010
  5. package/package.json +34 -19
package/dist/schematic-components.cjs.js CHANGED
@@ -89,6 +89,82 @@ var require_void_elements = __commonJS({
89
89
  }
90
90
  });
91
91
 
92
+ // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
93
+ var require_use_sync_external_store_shim_development = __commonJS({
94
+ "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
95
+ "use strict";
96
+ (function() {
97
+ function is(x2, y2) {
98
+ return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
99
+ }
100
+ function useSyncExternalStore$2(subscribe, getSnapshot) {
101
+ didWarnOld18Alpha || void 0 === React3.startTransition || (didWarnOld18Alpha = true, console.error(
102
+ "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
103
+ ));
104
+ var value = getSnapshot();
105
+ if (!didWarnUncachedGetSnapshot) {
106
+ var cachedValue = getSnapshot();
107
+ objectIs(value, cachedValue) || (console.error(
108
+ "The result of getSnapshot should be cached to avoid an infinite loop"
109
+ ), didWarnUncachedGetSnapshot = true);
110
+ }
111
+ cachedValue = useState21({
112
+ inst: { value, getSnapshot }
113
+ });
114
+ var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
115
+ useLayoutEffect6(
116
+ function() {
117
+ inst.value = value;
118
+ inst.getSnapshot = getSnapshot;
119
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst });
120
+ },
121
+ [subscribe, value, getSnapshot]
122
+ );
123
+ useEffect11(
124
+ function() {
125
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst });
126
+ return subscribe(function() {
127
+ checkIfSnapshotChanged(inst) && forceUpdate({ inst });
128
+ });
129
+ },
130
+ [subscribe]
131
+ );
132
+ useDebugValue(value);
133
+ return value;
134
+ }
135
+ function checkIfSnapshotChanged(inst) {
136
+ var latestGetSnapshot = inst.getSnapshot;
137
+ inst = inst.value;
138
+ try {
139
+ var nextValue = latestGetSnapshot();
140
+ return !objectIs(inst, nextValue);
141
+ } catch (error) {
142
+ return true;
143
+ }
144
+ }
145
+ function useSyncExternalStore$1(subscribe, getSnapshot) {
146
+ return getSnapshot();
147
+ }
148
+ "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
149
+ var React3 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState21 = React3.useState, useEffect11 = React3.useEffect, useLayoutEffect6 = React3.useLayoutEffect, useDebugValue = React3.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
150
+ exports.useSyncExternalStore = void 0 !== React3.useSyncExternalStore ? React3.useSyncExternalStore : shim;
151
+ "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
152
+ })();
153
+ }
154
+ });
155
+
156
+ // node_modules/use-sync-external-store/shim/index.js
157
+ var require_shim = __commonJS({
158
+ "node_modules/use-sync-external-store/shim/index.js"(exports, module2) {
159
+ "use strict";
160
+ if (false) {
161
+ module2.exports = null;
162
+ } else {
163
+ module2.exports = require_use_sync_external_store_shim_development();
164
+ }
165
+ }
166
+ });
167
+
92
168
  // node_modules/lodash/isObject.js
93
169
  var require_isObject = __commonJS({
94
170
  "node_modules/lodash/isObject.js"(exports, module2) {
@@ -1895,7 +1971,6 @@ __export(index_exports, {
1895
1971
  useEmbed: () => useEmbed,
1896
1972
  useIsLightBackground: () => useIsLightBackground,
1897
1973
  usePaymentConfirmation: () => usePaymentConfirmation,
1898
- usePrevious: () => usePrevious2,
1899
1974
  useRequest: () => useRequest,
1900
1975
  useTrialEnd: () => useTrialEnd,
1901
1976
  useWrapChildren: () => useWrapChildren
@@ -1903,10 +1978,10 @@ __export(index_exports, {
1903
1978
  module.exports = __toCommonJS(index_exports);
1904
1979
 
1905
1980
  // src/components/elements/button/Button.tsx
1906
- var import_react40 = require("react");
1981
+ var import_react42 = require("react");
1907
1982
 
1908
1983
  // src/components/layout/card/Card.tsx
1909
- var import_react24 = require("react");
1984
+ var import_react26 = require("react");
1910
1985
 
1911
1986
  // src/const/components.ts
1912
1987
  var VISIBLE_ENTITLEMENT_COUNT = 4;
@@ -2613,15 +2688,7 @@ function getFeatureName(feature, count = 0) {
2613
2688
  return pluralize(name, count);
2614
2689
  }
2615
2690
 
2616
- // src/utils/api/hydrate.ts
2617
- function isCheckoutData(data) {
2618
- return typeof data === "object" && data !== null && "company" in data;
2619
- }
2620
-
2621
2691
  // src/utils/api/plan.ts
2622
- function isHydratedPlan(plan) {
2623
- return typeof plan !== "undefined" && "current" in plan;
2624
- }
2625
2692
  function entitlementCountsReducer(acc, plan) {
2626
2693
  acc[plan.id] = {
2627
2694
  size: plan.entitlements.length,
@@ -4176,20 +4243,12 @@ var St = "__sc-".concat(f, "__");
4176
4243
 
4177
4244
  // src/utils/style.ts
4178
4245
  function attr(key, value) {
4179
- return typeof value !== "undefined" && lt`
4246
+ if (typeof value !== "undefined") {
4247
+ return lt`
4180
4248
  ${key}: ${value};
4181
4249
  `;
4250
+ }
4182
4251
  }
4183
- attr.px = function propAsPx(key, value) {
4184
- return typeof value !== "undefined" && lt`
4185
- ${key}: ${typeof value === "number" ? `${value}px` : value};
4186
- `;
4187
- };
4188
- attr.rem = function propAsRem(key, value) {
4189
- return typeof value !== "undefined" && lt`
4190
- ${key}: ${typeof value === "number" ? `${value / TEXT_BASE_SIZE}rem` : value};
4191
- `;
4192
- };
4193
4252
 
4194
4253
  // src/hooks/useAvailablePlans.ts
4195
4254
  function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true }) {
@@ -4222,11 +4281,16 @@ function useAvailablePlans(activePeriod, options = { useSelectedPeriod: true })
4222
4281
  addOns: getActivePlans(data?.activeAddOns || []),
4223
4282
  periods: getAvailablePeriods()
4224
4283
  };
4225
- }, [data, getAvailablePeriods, getActivePlans]);
4284
+ }, [
4285
+ data?.activePlans,
4286
+ data?.activeAddOns,
4287
+ getActivePlans,
4288
+ getAvailablePeriods
4289
+ ]);
4226
4290
  }
4227
4291
 
4228
4292
  // src/hooks/useEmbed.ts
4229
- var import_react13 = require("react");
4293
+ var import_react16 = require("react");
4230
4294
 
4231
4295
  // src/context/embedState.ts
4232
4296
  var defaultTheme = {
@@ -6687,17 +6751,485 @@ var ReportNamespaces = class {
6687
6751
  }
6688
6752
  };
6689
6753
 
6754
+ // node_modules/react-i18next/dist/es/IcuTrans.js
6755
+ var import_react9 = require("react");
6756
+
6757
+ // node_modules/react-i18next/dist/es/IcuTransWithoutContext.js
6758
+ var import_react8 = __toESM(require("react"), 1);
6759
+
6760
+ // node_modules/react-i18next/dist/es/IcuTransUtils/TranslationParserError.js
6761
+ var TranslationParserError = class _TranslationParserError extends Error {
6762
+ constructor(message, position2, translationString) {
6763
+ super(message);
6764
+ this.name = "TranslationParserError";
6765
+ this.position = position2;
6766
+ this.translationString = translationString;
6767
+ if (Error.captureStackTrace) {
6768
+ Error.captureStackTrace(this, _TranslationParserError);
6769
+ }
6770
+ }
6771
+ };
6772
+
6773
+ // node_modules/react-i18next/dist/es/IcuTransUtils/htmlEntityDecoder.js
6774
+ var commonEntities = {
6775
+ " ": "\xA0",
6776
+ "&": "&",
6777
+ "&lt;": "<",
6778
+ "&gt;": ">",
6779
+ "&quot;": '"',
6780
+ "&apos;": "'",
6781
+ "&copy;": "\xA9",
6782
+ "&reg;": "\xAE",
6783
+ "&trade;": "\u2122",
6784
+ "&hellip;": "\u2026",
6785
+ "&ndash;": "\u2013",
6786
+ "&mdash;": "\u2014",
6787
+ "&lsquo;": "\u2018",
6788
+ "&rsquo;": "\u2019",
6789
+ "&sbquo;": "\u201A",
6790
+ "&ldquo;": "\u201C",
6791
+ "&rdquo;": "\u201D",
6792
+ "&bdquo;": "\u201E",
6793
+ "&dagger;": "\u2020",
6794
+ "&Dagger;": "\u2021",
6795
+ "&bull;": "\u2022",
6796
+ "&prime;": "\u2032",
6797
+ "&Prime;": "\u2033",
6798
+ "&lsaquo;": "\u2039",
6799
+ "&rsaquo;": "\u203A",
6800
+ "&sect;": "\xA7",
6801
+ "&para;": "\xB6",
6802
+ "&middot;": "\xB7",
6803
+ "&ensp;": "\u2002",
6804
+ "&emsp;": "\u2003",
6805
+ "&thinsp;": "\u2009",
6806
+ "&euro;": "\u20AC",
6807
+ "&pound;": "\xA3",
6808
+ "&yen;": "\xA5",
6809
+ "&cent;": "\xA2",
6810
+ "&curren;": "\xA4",
6811
+ "&times;": "\xD7",
6812
+ "&divide;": "\xF7",
6813
+ "&minus;": "\u2212",
6814
+ "&plusmn;": "\xB1",
6815
+ "&ne;": "\u2260",
6816
+ "&le;": "\u2264",
6817
+ "&ge;": "\u2265",
6818
+ "&asymp;": "\u2248",
6819
+ "&equiv;": "\u2261",
6820
+ "&infin;": "\u221E",
6821
+ "&int;": "\u222B",
6822
+ "&sum;": "\u2211",
6823
+ "&prod;": "\u220F",
6824
+ "&radic;": "\u221A",
6825
+ "&part;": "\u2202",
6826
+ "&permil;": "\u2030",
6827
+ "&deg;": "\xB0",
6828
+ "&micro;": "\xB5",
6829
+ "&larr;": "\u2190",
6830
+ "&uarr;": "\u2191",
6831
+ "&rarr;": "\u2192",
6832
+ "&darr;": "\u2193",
6833
+ "&harr;": "\u2194",
6834
+ "&crarr;": "\u21B5",
6835
+ "&lArr;": "\u21D0",
6836
+ "&uArr;": "\u21D1",
6837
+ "&rArr;": "\u21D2",
6838
+ "&dArr;": "\u21D3",
6839
+ "&hArr;": "\u21D4",
6840
+ "&alpha;": "\u03B1",
6841
+ "&beta;": "\u03B2",
6842
+ "&gamma;": "\u03B3",
6843
+ "&delta;": "\u03B4",
6844
+ "&epsilon;": "\u03B5",
6845
+ "&zeta;": "\u03B6",
6846
+ "&eta;": "\u03B7",
6847
+ "&theta;": "\u03B8",
6848
+ "&iota;": "\u03B9",
6849
+ "&kappa;": "\u03BA",
6850
+ "&lambda;": "\u03BB",
6851
+ "&mu;": "\u03BC",
6852
+ "&nu;": "\u03BD",
6853
+ "&xi;": "\u03BE",
6854
+ "&omicron;": "\u03BF",
6855
+ "&pi;": "\u03C0",
6856
+ "&rho;": "\u03C1",
6857
+ "&sigma;": "\u03C3",
6858
+ "&tau;": "\u03C4",
6859
+ "&upsilon;": "\u03C5",
6860
+ "&phi;": "\u03C6",
6861
+ "&chi;": "\u03C7",
6862
+ "&psi;": "\u03C8",
6863
+ "&omega;": "\u03C9",
6864
+ "&Alpha;": "\u0391",
6865
+ "&Beta;": "\u0392",
6866
+ "&Gamma;": "\u0393",
6867
+ "&Delta;": "\u0394",
6868
+ "&Epsilon;": "\u0395",
6869
+ "&Zeta;": "\u0396",
6870
+ "&Eta;": "\u0397",
6871
+ "&Theta;": "\u0398",
6872
+ "&Iota;": "\u0399",
6873
+ "&Kappa;": "\u039A",
6874
+ "&Lambda;": "\u039B",
6875
+ "&Mu;": "\u039C",
6876
+ "&Nu;": "\u039D",
6877
+ "&Xi;": "\u039E",
6878
+ "&Omicron;": "\u039F",
6879
+ "&Pi;": "\u03A0",
6880
+ "&Rho;": "\u03A1",
6881
+ "&Sigma;": "\u03A3",
6882
+ "&Tau;": "\u03A4",
6883
+ "&Upsilon;": "\u03A5",
6884
+ "&Phi;": "\u03A6",
6885
+ "&Chi;": "\u03A7",
6886
+ "&Psi;": "\u03A8",
6887
+ "&Omega;": "\u03A9",
6888
+ "&Agrave;": "\xC0",
6889
+ "&Aacute;": "\xC1",
6890
+ "&Acirc;": "\xC2",
6891
+ "&Atilde;": "\xC3",
6892
+ "&Auml;": "\xC4",
6893
+ "&Aring;": "\xC5",
6894
+ "&AElig;": "\xC6",
6895
+ "&Ccedil;": "\xC7",
6896
+ "&Egrave;": "\xC8",
6897
+ "&Eacute;": "\xC9",
6898
+ "&Ecirc;": "\xCA",
6899
+ "&Euml;": "\xCB",
6900
+ "&Igrave;": "\xCC",
6901
+ "&Iacute;": "\xCD",
6902
+ "&Icirc;": "\xCE",
6903
+ "&Iuml;": "\xCF",
6904
+ "&ETH;": "\xD0",
6905
+ "&Ntilde;": "\xD1",
6906
+ "&Ograve;": "\xD2",
6907
+ "&Oacute;": "\xD3",
6908
+ "&Ocirc;": "\xD4",
6909
+ "&Otilde;": "\xD5",
6910
+ "&Ouml;": "\xD6",
6911
+ "&Oslash;": "\xD8",
6912
+ "&Ugrave;": "\xD9",
6913
+ "&Uacute;": "\xDA",
6914
+ "&Ucirc;": "\xDB",
6915
+ "&Uuml;": "\xDC",
6916
+ "&Yacute;": "\xDD",
6917
+ "&THORN;": "\xDE",
6918
+ "&szlig;": "\xDF",
6919
+ "&agrave;": "\xE0",
6920
+ "&aacute;": "\xE1",
6921
+ "&acirc;": "\xE2",
6922
+ "&atilde;": "\xE3",
6923
+ "&auml;": "\xE4",
6924
+ "&aring;": "\xE5",
6925
+ "&aelig;": "\xE6",
6926
+ "&ccedil;": "\xE7",
6927
+ "&egrave;": "\xE8",
6928
+ "&eacute;": "\xE9",
6929
+ "&ecirc;": "\xEA",
6930
+ "&euml;": "\xEB",
6931
+ "&igrave;": "\xEC",
6932
+ "&iacute;": "\xED",
6933
+ "&icirc;": "\xEE",
6934
+ "&iuml;": "\xEF",
6935
+ "&eth;": "\xF0",
6936
+ "&ntilde;": "\xF1",
6937
+ "&ograve;": "\xF2",
6938
+ "&oacute;": "\xF3",
6939
+ "&ocirc;": "\xF4",
6940
+ "&otilde;": "\xF5",
6941
+ "&ouml;": "\xF6",
6942
+ "&oslash;": "\xF8",
6943
+ "&ugrave;": "\xF9",
6944
+ "&uacute;": "\xFA",
6945
+ "&ucirc;": "\xFB",
6946
+ "&uuml;": "\xFC",
6947
+ "&yacute;": "\xFD",
6948
+ "&thorn;": "\xFE",
6949
+ "&yuml;": "\xFF",
6950
+ "&iexcl;": "\xA1",
6951
+ "&iquest;": "\xBF",
6952
+ "&fnof;": "\u0192",
6953
+ "&circ;": "\u02C6",
6954
+ "&tilde;": "\u02DC",
6955
+ "&OElig;": "\u0152",
6956
+ "&oelig;": "\u0153",
6957
+ "&Scaron;": "\u0160",
6958
+ "&scaron;": "\u0161",
6959
+ "&Yuml;": "\u0178",
6960
+ "&ordf;": "\xAA",
6961
+ "&ordm;": "\xBA",
6962
+ "&macr;": "\xAF",
6963
+ "&acute;": "\xB4",
6964
+ "&cedil;": "\xB8",
6965
+ "&sup1;": "\xB9",
6966
+ "&sup2;": "\xB2",
6967
+ "&sup3;": "\xB3",
6968
+ "&frac14;": "\xBC",
6969
+ "&frac12;": "\xBD",
6970
+ "&frac34;": "\xBE",
6971
+ "&spades;": "\u2660",
6972
+ "&clubs;": "\u2663",
6973
+ "&hearts;": "\u2665",
6974
+ "&diams;": "\u2666",
6975
+ "&loz;": "\u25CA",
6976
+ "&oline;": "\u203E",
6977
+ "&frasl;": "\u2044",
6978
+ "&weierp;": "\u2118",
6979
+ "&image;": "\u2111",
6980
+ "&real;": "\u211C",
6981
+ "&alefsym;": "\u2135"
6982
+ };
6983
+ var entityPattern = new RegExp(Object.keys(commonEntities).map((entity) => entity.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|"), "g");
6984
+ var decodeHtmlEntities = (text) => text.replace(entityPattern, (match2) => commonEntities[match2]).replace(/&#(\d+);/g, (_2, num) => String.fromCharCode(parseInt(num, 10))).replace(/&#x([0-9a-fA-F]+);/g, (_2, hex) => String.fromCharCode(parseInt(hex, 16)));
6985
+
6986
+ // node_modules/react-i18next/dist/es/IcuTransUtils/tokenizer.js
6987
+ var tokenize2 = (translation) => {
6988
+ const tokens = [];
6989
+ let position2 = 0;
6990
+ let currentText = "";
6991
+ const flushText = () => {
6992
+ if (currentText) {
6993
+ tokens.push({
6994
+ type: "Text",
6995
+ value: currentText,
6996
+ position: position2 - currentText.length
6997
+ });
6998
+ currentText = "";
6999
+ }
7000
+ };
7001
+ while (position2 < translation.length) {
7002
+ const char2 = translation[position2];
7003
+ if (char2 === "<") {
7004
+ const tagMatch = translation.slice(position2).match(/^<(\d+)>/);
7005
+ if (tagMatch) {
7006
+ flushText();
7007
+ tokens.push({
7008
+ type: "TagOpen",
7009
+ value: tagMatch[0],
7010
+ position: position2,
7011
+ tagNumber: parseInt(tagMatch[1], 10)
7012
+ });
7013
+ position2 += tagMatch[0].length;
7014
+ } else {
7015
+ const closeTagMatch = translation.slice(position2).match(/^<\/(\d+)>/);
7016
+ if (closeTagMatch) {
7017
+ flushText();
7018
+ tokens.push({
7019
+ type: "TagClose",
7020
+ value: closeTagMatch[0],
7021
+ position: position2,
7022
+ tagNumber: parseInt(closeTagMatch[1], 10)
7023
+ });
7024
+ position2 += closeTagMatch[0].length;
7025
+ } else {
7026
+ currentText += char2;
7027
+ position2 += 1;
7028
+ }
7029
+ }
7030
+ } else {
7031
+ currentText += char2;
7032
+ position2 += 1;
7033
+ }
7034
+ }
7035
+ flushText();
7036
+ return tokens;
7037
+ };
7038
+
7039
+ // node_modules/react-i18next/dist/es/IcuTransUtils/renderTranslation.js
7040
+ var import_react7 = __toESM(require("react"), 1);
7041
+ var renderDeclarationNode = (declaration2, children, childDeclarations) => {
7042
+ const {
7043
+ type,
7044
+ props = {}
7045
+ } = declaration2;
7046
+ if (props.children && Array.isArray(props.children) && childDeclarations) {
7047
+ const {
7048
+ children: _childrenToRemove,
7049
+ ...propsWithoutChildren
7050
+ } = props;
7051
+ return import_react7.default.createElement(type, propsWithoutChildren, ...children);
7052
+ }
7053
+ if (children.length === 0) {
7054
+ return import_react7.default.createElement(type, props);
7055
+ }
7056
+ if (children.length === 1) {
7057
+ return import_react7.default.createElement(type, props, children[0]);
7058
+ }
7059
+ return import_react7.default.createElement(type, props, ...children);
7060
+ };
7061
+ var renderTranslation = (translation, declarations = []) => {
7062
+ if (!translation) {
7063
+ return [];
7064
+ }
7065
+ const tokens = tokenize2(translation);
7066
+ const result = [];
7067
+ const stack = [];
7068
+ const literalTagNumbers = /* @__PURE__ */ new Set();
7069
+ const getCurrentDeclarations = () => {
7070
+ if (stack.length === 0) {
7071
+ return declarations;
7072
+ }
7073
+ const parentFrame = stack[stack.length - 1];
7074
+ if (parentFrame.declaration.props?.children && Array.isArray(parentFrame.declaration.props.children)) {
7075
+ return parentFrame.declaration.props.children;
7076
+ }
7077
+ return parentFrame.declarations;
7078
+ };
7079
+ tokens.forEach((token2) => {
7080
+ switch (token2.type) {
7081
+ case "Text":
7082
+ {
7083
+ const decoded = decodeHtmlEntities(token2.value);
7084
+ const targetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
7085
+ targetArray.push(decoded);
7086
+ }
7087
+ break;
7088
+ case "TagOpen":
7089
+ {
7090
+ const {
7091
+ tagNumber
7092
+ } = token2;
7093
+ const currentDeclarations = getCurrentDeclarations();
7094
+ const declaration2 = currentDeclarations[tagNumber];
7095
+ if (!declaration2) {
7096
+ literalTagNumbers.add(tagNumber);
7097
+ const literalText = `<${tagNumber}>`;
7098
+ const targetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
7099
+ targetArray.push(literalText);
7100
+ break;
7101
+ }
7102
+ stack.push({
7103
+ tagNumber,
7104
+ children: [],
7105
+ position: token2.position,
7106
+ declaration: declaration2,
7107
+ declarations: currentDeclarations
7108
+ });
7109
+ }
7110
+ break;
7111
+ case "TagClose":
7112
+ {
7113
+ const {
7114
+ tagNumber
7115
+ } = token2;
7116
+ if (literalTagNumbers.has(tagNumber)) {
7117
+ const literalText = `</${tagNumber}>`;
7118
+ const literalTargetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
7119
+ literalTargetArray.push(literalText);
7120
+ literalTagNumbers.delete(tagNumber);
7121
+ break;
7122
+ }
7123
+ if (stack.length === 0) {
7124
+ throw new TranslationParserError(`Unexpected closing tag </${tagNumber}> at position ${token2.position}`, token2.position, translation);
7125
+ }
7126
+ const frame = stack.pop();
7127
+ if (frame.tagNumber !== tagNumber) {
7128
+ throw new TranslationParserError(`Mismatched tags: expected </${frame.tagNumber}> but got </${tagNumber}> at position ${token2.position}`, token2.position, translation);
7129
+ }
7130
+ const element = renderDeclarationNode(frame.declaration, frame.children, frame.declarations);
7131
+ const elementTargetArray = stack.length > 0 ? stack[stack.length - 1].children : result;
7132
+ elementTargetArray.push(element);
7133
+ }
7134
+ break;
7135
+ }
7136
+ });
7137
+ if (stack.length > 0) {
7138
+ const unclosed = stack[stack.length - 1];
7139
+ throw new TranslationParserError(`Unclosed tag <${unclosed.tagNumber}> at position ${unclosed.position}`, unclosed.position, translation);
7140
+ }
7141
+ return result;
7142
+ };
7143
+
7144
+ // node_modules/react-i18next/dist/es/IcuTransWithoutContext.js
7145
+ function IcuTransWithoutContext({
7146
+ i18nKey,
7147
+ defaultTranslation,
7148
+ content,
7149
+ ns,
7150
+ values = {},
7151
+ i18n: i18nFromProps,
7152
+ t: tFromProps
7153
+ }) {
7154
+ const i18n = i18nFromProps || getI18n();
7155
+ if (!i18n) {
7156
+ warnOnce(i18n, "NO_I18NEXT_INSTANCE", `IcuTrans: You need to pass in an i18next instance using i18nextReactModule`, {
7157
+ i18nKey
7158
+ });
7159
+ return import_react8.default.createElement(import_react8.default.Fragment, {}, defaultTranslation);
7160
+ }
7161
+ const t2 = tFromProps || i18n.t?.bind(i18n) || ((k2) => k2);
7162
+ let namespaces = ns || t2.ns || i18n.options?.defaultNS;
7163
+ namespaces = isString2(namespaces) ? [namespaces] : namespaces || ["translation"];
7164
+ let mergedValues = values;
7165
+ if (i18n.options?.interpolation?.defaultVariables) {
7166
+ mergedValues = values && Object.keys(values).length > 0 ? {
7167
+ ...values,
7168
+ ...i18n.options.interpolation.defaultVariables
7169
+ } : {
7170
+ ...i18n.options.interpolation.defaultVariables
7171
+ };
7172
+ }
7173
+ const translation = t2(i18nKey, {
7174
+ defaultValue: defaultTranslation,
7175
+ ...mergedValues,
7176
+ ns: namespaces
7177
+ });
7178
+ try {
7179
+ const rendered = renderTranslation(translation, content);
7180
+ return import_react8.default.createElement(import_react8.default.Fragment, {}, ...rendered);
7181
+ } catch (error) {
7182
+ warn(i18n, "ICU_TRANS_RENDER_ERROR", `IcuTrans component error for key "${i18nKey}": ${error.message}`, {
7183
+ i18nKey,
7184
+ error
7185
+ });
7186
+ return import_react8.default.createElement(import_react8.default.Fragment, {}, translation);
7187
+ }
7188
+ }
7189
+ IcuTransWithoutContext.displayName = "IcuTransWithoutContext";
7190
+
7191
+ // node_modules/react-i18next/dist/es/IcuTrans.js
7192
+ function IcuTrans({
7193
+ i18nKey,
7194
+ defaultTranslation,
7195
+ content,
7196
+ ns,
7197
+ values = {},
7198
+ i18n: i18nFromProps,
7199
+ t: tFromProps
7200
+ }) {
7201
+ const {
7202
+ i18n: i18nFromContext,
7203
+ defaultNS: defaultNSFromContext
7204
+ } = (0, import_react9.useContext)(I18nContext) || {};
7205
+ const i18n = i18nFromProps || i18nFromContext || getI18n();
7206
+ const t2 = tFromProps || i18n?.t.bind(i18n);
7207
+ return IcuTransWithoutContext({
7208
+ i18nKey,
7209
+ defaultTranslation,
7210
+ content,
7211
+ ns: ns || t2?.ns || defaultNSFromContext || i18n?.options?.defaultNS,
7212
+ values,
7213
+ i18n,
7214
+ t: tFromProps
7215
+ });
7216
+ }
7217
+ IcuTrans.displayName = "IcuTrans";
7218
+
6690
7219
  // node_modules/react-i18next/dist/es/useTranslation.js
6691
- var import_react7 = require("react");
6692
- var usePrevious = (value, ignore) => {
6693
- const ref = (0, import_react7.useRef)();
6694
- (0, import_react7.useEffect)(() => {
6695
- ref.current = ignore ? ref.current : value;
6696
- }, [value, ignore]);
6697
- return ref.current;
6698
- };
6699
- var alwaysNewT = (i18n, language, namespace, keyPrefix) => i18n.getFixedT(language, namespace, keyPrefix);
6700
- var useMemoizedT = (i18n, language, namespace, keyPrefix) => (0, import_react7.useCallback)(alwaysNewT(i18n, language, namespace, keyPrefix), [i18n, language, namespace, keyPrefix]);
7220
+ var import_react10 = require("react");
7221
+ var import_shim = __toESM(require_shim(), 1);
7222
+ var notReadyT = (k2, optsOrDefaultValue) => {
7223
+ if (isString2(optsOrDefaultValue)) return optsOrDefaultValue;
7224
+ if (isObject(optsOrDefaultValue) && isString2(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
7225
+ return Array.isArray(k2) ? k2[k2.length - 1] : k2;
7226
+ };
7227
+ var notReadySnapshot = {
7228
+ t: notReadyT,
7229
+ ready: false
7230
+ };
7231
+ var dummySubscribe = () => () => {
7232
+ };
6701
7233
  var useTranslation = (ns, props = {}) => {
6702
7234
  const {
6703
7235
  i18n: i18nFromProps
@@ -6705,106 +7237,106 @@ var useTranslation = (ns, props = {}) => {
6705
7237
  const {
6706
7238
  i18n: i18nFromContext,
6707
7239
  defaultNS: defaultNSFromContext
6708
- } = (0, import_react7.useContext)(I18nContext) || {};
7240
+ } = (0, import_react10.useContext)(I18nContext) || {};
6709
7241
  const i18n = i18nFromProps || i18nFromContext || getI18n();
6710
7242
  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
6711
7243
  if (!i18n) {
6712
7244
  warnOnce(i18n, "NO_I18NEXT_INSTANCE", "useTranslation: You will need to pass in an i18next instance by using initReactI18next");
6713
- const notReadyT = (k2, optsOrDefaultValue) => {
6714
- if (isString2(optsOrDefaultValue)) return optsOrDefaultValue;
6715
- if (isObject(optsOrDefaultValue) && isString2(optsOrDefaultValue.defaultValue)) return optsOrDefaultValue.defaultValue;
6716
- return Array.isArray(k2) ? k2[k2.length - 1] : k2;
6717
- };
6718
- const retNotReady = [notReadyT, {}, false];
6719
- retNotReady.t = notReadyT;
6720
- retNotReady.i18n = {};
6721
- retNotReady.ready = false;
6722
- return retNotReady;
6723
- }
6724
- if (i18n.options.react?.wait) warnOnce(i18n, "DEPRECATED_OPTION", "useTranslation: It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
6725
- const i18nOptions = {
7245
+ }
7246
+ const i18nOptions = (0, import_react10.useMemo)(() => ({
6726
7247
  ...getDefaults(),
6727
- ...i18n.options.react,
7248
+ ...i18n?.options?.react,
6728
7249
  ...props
6729
- };
7250
+ }), [i18n, props]);
6730
7251
  const {
6731
7252
  useSuspense,
6732
7253
  keyPrefix
6733
7254
  } = i18nOptions;
6734
- let namespaces = ns || defaultNSFromContext || i18n.options?.defaultNS;
6735
- namespaces = isString2(namespaces) ? [namespaces] : namespaces || ["translation"];
6736
- i18n.reportNamespaces.addUsedNamespaces?.(namespaces);
6737
- const ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace2(n, i18n, i18nOptions));
6738
- const memoGetT = useMemoizedT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
6739
- const getT = () => memoGetT;
6740
- const getNewT = () => alwaysNewT(i18n, props.lng || null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
6741
- const [t2, setT] = (0, import_react7.useState)(getT);
6742
- let joinedNS = namespaces.join();
6743
- if (props.lng) joinedNS = `${props.lng}${joinedNS}`;
6744
- const previousJoinedNS = usePrevious(joinedNS);
6745
- const isMounted = (0, import_react7.useRef)(true);
6746
- (0, import_react7.useEffect)(() => {
7255
+ const namespaces = (0, import_react10.useMemo)(() => {
7256
+ const nsOrContext = ns || defaultNSFromContext || i18n?.options?.defaultNS;
7257
+ return isString2(nsOrContext) ? [nsOrContext] : nsOrContext || ["translation"];
7258
+ }, [ns, defaultNSFromContext, i18n]);
7259
+ i18n?.reportNamespaces?.addUsedNamespaces?.(namespaces);
7260
+ const subscribe = (0, import_react10.useCallback)((callback) => {
7261
+ if (!i18n) return dummySubscribe;
6747
7262
  const {
6748
7263
  bindI18n,
6749
7264
  bindI18nStore
6750
7265
  } = i18nOptions;
6751
- isMounted.current = true;
6752
- if (!ready && !useSuspense) {
7266
+ if (bindI18n) i18n.on(bindI18n, callback);
7267
+ if (bindI18nStore) i18n.store.on(bindI18nStore, callback);
7268
+ return () => {
7269
+ if (bindI18n) bindI18n.split(" ").forEach((e2) => i18n.off(e2, callback));
7270
+ if (bindI18nStore) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, callback));
7271
+ };
7272
+ }, [i18n, i18nOptions]);
7273
+ const snapshotRef = (0, import_react10.useRef)();
7274
+ const getSnapshot = (0, import_react10.useCallback)(() => {
7275
+ if (!i18n) {
7276
+ return notReadySnapshot;
7277
+ }
7278
+ const calculatedReady = !!(i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every((n) => hasLoadedNamespace2(n, i18n, i18nOptions));
7279
+ const calculatedT = i18n.getFixedT(props.lng || i18n.language, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
7280
+ const lastSnapshot = snapshotRef.current;
7281
+ if (lastSnapshot && lastSnapshot.ready === calculatedReady && lastSnapshot.lng === (props.lng || i18n.language) && lastSnapshot.keyPrefix === keyPrefix) {
7282
+ return lastSnapshot;
7283
+ }
7284
+ const newSnapshot = {
7285
+ t: calculatedT,
7286
+ ready: calculatedReady,
7287
+ lng: props.lng || i18n.language,
7288
+ keyPrefix
7289
+ };
7290
+ snapshotRef.current = newSnapshot;
7291
+ return newSnapshot;
7292
+ }, [i18n, namespaces, keyPrefix, i18nOptions, props.lng]);
7293
+ const [loadCount, setLoadCount] = (0, import_react10.useState)(0);
7294
+ const {
7295
+ t: t2,
7296
+ ready
7297
+ } = (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
7298
+ (0, import_react10.useEffect)(() => {
7299
+ if (i18n && !ready && !useSuspense) {
7300
+ const onLoaded = () => setLoadCount((c2) => c2 + 1);
6753
7301
  if (props.lng) {
6754
- loadLanguages2(i18n, props.lng, namespaces, () => {
6755
- if (isMounted.current) setT(getNewT);
6756
- });
7302
+ loadLanguages2(i18n, props.lng, namespaces, onLoaded);
6757
7303
  } else {
6758
- loadNamespaces2(i18n, namespaces, () => {
6759
- if (isMounted.current) setT(getNewT);
6760
- });
7304
+ loadNamespaces2(i18n, namespaces, onLoaded);
7305
+ }
7306
+ }
7307
+ }, [i18n, props.lng, namespaces, ready, useSuspense, loadCount]);
7308
+ const finalI18n = i18n || {};
7309
+ const ret = (0, import_react10.useMemo)(() => {
7310
+ const arr = [t2, finalI18n, ready];
7311
+ arr.t = t2;
7312
+ arr.i18n = finalI18n;
7313
+ arr.ready = ready;
7314
+ return arr;
7315
+ }, [t2, finalI18n, ready]);
7316
+ if (i18n && useSuspense && !ready) {
7317
+ throw new Promise((resolve) => {
7318
+ const onLoaded = () => resolve();
7319
+ if (props.lng) {
7320
+ loadLanguages2(i18n, props.lng, namespaces, onLoaded);
7321
+ } else {
7322
+ loadNamespaces2(i18n, namespaces, onLoaded);
6761
7323
  }
6762
- }
6763
- if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
6764
- setT(getNewT);
6765
- }
6766
- const boundReset = () => {
6767
- if (isMounted.current) setT(getNewT);
6768
- };
6769
- if (bindI18n) i18n?.on(bindI18n, boundReset);
6770
- if (bindI18nStore) i18n?.store.on(bindI18nStore, boundReset);
6771
- return () => {
6772
- isMounted.current = false;
6773
- if (i18n && bindI18n) bindI18n?.split(" ").forEach((e2) => i18n.off(e2, boundReset));
6774
- if (bindI18nStore && i18n) bindI18nStore.split(" ").forEach((e2) => i18n.store.off(e2, boundReset));
6775
- };
6776
- }, [i18n, joinedNS]);
6777
- (0, import_react7.useEffect)(() => {
6778
- if (isMounted.current && ready) {
6779
- setT(getT);
6780
- }
6781
- }, [i18n, keyPrefix, ready]);
6782
- const ret = [t2, i18n, ready];
6783
- ret.t = t2;
6784
- ret.i18n = i18n;
6785
- ret.ready = ready;
6786
- if (ready) return ret;
6787
- if (!ready && !useSuspense) return ret;
6788
- throw new Promise((resolve) => {
6789
- if (props.lng) {
6790
- loadLanguages2(i18n, props.lng, namespaces, () => resolve());
6791
- } else {
6792
- loadNamespaces2(i18n, namespaces, () => resolve());
6793
- }
6794
- });
7324
+ });
7325
+ }
7326
+ return ret;
6795
7327
  };
6796
7328
 
6797
7329
  // node_modules/react-i18next/dist/es/withTranslation.js
6798
- var import_react8 = require("react");
7330
+ var import_react11 = require("react");
6799
7331
 
6800
7332
  // node_modules/react-i18next/dist/es/I18nextProvider.js
6801
- var import_react9 = require("react");
7333
+ var import_react12 = require("react");
6802
7334
 
6803
7335
  // node_modules/react-i18next/dist/es/withSSR.js
6804
- var import_react11 = require("react");
7336
+ var import_react14 = require("react");
6805
7337
 
6806
7338
  // node_modules/react-i18next/dist/es/useSSR.js
6807
- var import_react10 = require("react");
7339
+ var import_react13 = require("react");
6808
7340
 
6809
7341
  // src/localization/en.json
6810
7342
  var en_default = {
@@ -6814,7 +7346,7 @@ var en_default = {
6814
7346
  Active: "Active",
6815
7347
  Add: "Add",
6816
7348
  "Add new payment method": "Add new payment method",
6817
- "Add Seats": "Add More",
7349
+ "Add More": "Add More",
6818
7350
  "Add-ons": "Add-ons",
6819
7351
  "Add-ons Quantity": "Add-ons Quantity",
6820
7352
  Additional: "Additional",
@@ -7150,9 +7682,9 @@ var Icon = ({ name, className = "", ...rest }) => {
7150
7682
  };
7151
7683
 
7152
7684
  // src/context/EmbedProvider.tsx
7153
- var import_debounce = __toESM(require_debounce());
7154
- var import_merge2 = __toESM(require_merge());
7155
- var import_react12 = require("react");
7685
+ var import_debounce = __toESM(require_debounce(), 1);
7686
+ var import_merge2 = __toESM(require_merge(), 1);
7687
+ var import_react15 = require("react");
7156
7688
 
7157
7689
  // node_modules/uuid/dist/stringify.js
7158
7690
  var byteToHex = [];
@@ -10633,7 +11165,7 @@ var ComponentspublicApi = class extends BaseAPI2 {
10633
11165
  };
10634
11166
 
10635
11167
  // src/context/embedReducer.ts
10636
- var import_merge = __toESM(require_merge());
11168
+ var import_merge = __toESM(require_merge(), 1);
10637
11169
  var dispatchPlanChangedEvent = (detail) => {
10638
11170
  const event = new CustomEvent("plan-changed", {
10639
11171
  bubbles: true,
@@ -10641,6 +11173,33 @@ var dispatchPlanChangedEvent = (detail) => {
10641
11173
  });
10642
11174
  window.dispatchEvent(event);
10643
11175
  };
11176
+ function normalize(data) {
11177
+ return (0, import_merge.default)({}, data, {
11178
+ activePlans: data?.activePlans.map((plan) => ({
11179
+ companyCanTrial: false,
11180
+ current: false,
11181
+ valid: true,
11182
+ usageViolations: [],
11183
+ ...plan
11184
+ })),
11185
+ activeAddOns: data?.activeAddOns.map((plan) => ({
11186
+ companyCanTrial: false,
11187
+ current: false,
11188
+ valid: true,
11189
+ usageViolations: [],
11190
+ ...plan
11191
+ })),
11192
+ activeUsageBasedEntitlements: [],
11193
+ checkoutSettings: {
11194
+ collectAddress: false,
11195
+ collectEmail: false,
11196
+ collectPhone: false,
11197
+ taxCollectionEnabled: false
11198
+ },
11199
+ creditBundles: [],
11200
+ creditGrants: []
11201
+ });
11202
+ }
10644
11203
  var reducer = (state, action) => {
10645
11204
  switch (action.type) {
10646
11205
  case "SET_ACCESS_TOKEN": {
@@ -10656,7 +11215,15 @@ var reducer = (state, action) => {
10656
11215
  isPending: true
10657
11216
  };
10658
11217
  }
10659
- case "HYDRATE_PUBLIC":
11218
+ case "HYDRATE_PUBLIC": {
11219
+ return {
11220
+ ...state,
11221
+ data: normalize(action.data),
11222
+ error: void 0,
11223
+ isPending: false,
11224
+ stale: false
11225
+ };
11226
+ }
10660
11227
  case "HYDRATE":
10661
11228
  case "HYDRATE_COMPONENT":
10662
11229
  case "HYDRATE_EXTERNAL": {
@@ -10677,44 +11244,38 @@ var reducer = (state, action) => {
10677
11244
  };
10678
11245
  }
10679
11246
  case "UPDATE_PAYMENT_METHOD": {
10680
- if (!isCheckoutData(state.data)) {
10681
- return state;
11247
+ const updated = normalize(state.data);
11248
+ if (updated.subscription) {
11249
+ updated.subscription.paymentMethod = action.paymentMethod;
10682
11250
  }
10683
- const data = { ...state.data };
10684
- if (data.subscription) {
10685
- data.subscription.paymentMethod = action.paymentMethod;
10686
- }
10687
- if (data.company) {
10688
- const updatedPaymentMethods = data.company.paymentMethods.filter(
11251
+ if (updated.company) {
11252
+ const updatedPaymentMethods = updated.company.paymentMethods.filter(
10689
11253
  (paymentMethod) => paymentMethod.id !== action.paymentMethod.id
10690
11254
  );
10691
- data.company.paymentMethods = [
11255
+ updated.company.paymentMethods = [
10692
11256
  action.paymentMethod,
10693
11257
  ...updatedPaymentMethods
10694
11258
  ];
10695
- if (!data.subscription) {
10696
- data.company.defaultPaymentMethod = action.paymentMethod;
11259
+ if (!updated.subscription) {
11260
+ updated.company.defaultPaymentMethod = action.paymentMethod;
10697
11261
  }
10698
11262
  }
10699
11263
  return {
10700
11264
  ...state,
10701
- data
11265
+ data: updated
10702
11266
  };
10703
11267
  }
10704
11268
  case "DELETE_PAYMENT_METHOD": {
10705
- if (!isCheckoutData(state.data)) {
10706
- return state;
10707
- }
10708
- const data = { ...state.data };
10709
- if (data.company) {
10710
- const paymentMethods = [...data.company.paymentMethods];
10711
- data.company.paymentMethods = paymentMethods.filter(
11269
+ const updated = normalize(state.data);
11270
+ if (updated.company) {
11271
+ const paymentMethods = [...updated.company.paymentMethods];
11272
+ updated.company.paymentMethods = paymentMethods.filter(
10712
11273
  (paymentMethod) => paymentMethod.id !== action.paymentMethodId
10713
11274
  );
10714
11275
  }
10715
11276
  return {
10716
11277
  ...state,
10717
- data
11278
+ data: updated
10718
11279
  };
10719
11280
  }
10720
11281
  case "RESET": {
@@ -10761,28 +11322,25 @@ var reducer = (state, action) => {
10761
11322
 
10762
11323
  // src/context/EmbedProvider.tsx
10763
11324
  var import_jsx_runtime2 = require("react/jsx-runtime");
11325
+ var getCustomHeaders = (sessionId) => ({
11326
+ "X-Schematic-Components-Version": "2.0.0",
11327
+ "X-Schematic-Session-ID": sessionId
11328
+ });
10764
11329
  var EmbedProvider = ({
10765
11330
  children,
10766
11331
  apiKey,
10767
11332
  apiConfig,
10768
11333
  ...options
10769
11334
  }) => {
10770
- const sessionIdRef = (0, import_react12.useRef)(v4_default());
10771
- const styleRef = (0, import_react12.useRef)(null);
10772
- const [state, dispatch] = (0, import_react12.useReducer)(reducer, options, (opts) => {
11335
+ const sessionIdRef = (0, import_react15.useRef)(v4_default());
11336
+ const styleRef = (0, import_react15.useRef)(null);
11337
+ const [state, dispatch] = (0, import_react15.useReducer)(reducer, options, (opts) => {
10773
11338
  const providedState = { settings: opts.settings || {} };
10774
11339
  const resolvedState = (0, import_merge2.default)({}, initialState, providedState);
10775
11340
  return resolvedState;
10776
11341
  });
10777
- const customHeaders = (0, import_react12.useMemo)(
10778
- () => ({
10779
- "X-Schematic-Components-Version": "1.9.0",
10780
- "X-Schematic-Session-ID": sessionIdRef.current
10781
- }),
10782
- []
10783
- );
10784
- const [api, setApi] = (0, import_react12.useState)({});
10785
- const debug = (0, import_react12.useCallback)(
11342
+ const [api, setApi] = (0, import_react15.useState)({});
11343
+ const debug = (0, import_react15.useCallback)(
10786
11344
  (message, ...args) => {
10787
11345
  if (options.debug) {
10788
11346
  console.debug(`[Schematic] ${message}`, ...args);
@@ -10790,7 +11348,7 @@ var EmbedProvider = ({
10790
11348
  },
10791
11349
  [options.debug]
10792
11350
  );
10793
- const finishCheckout = (0, import_react12.useCallback)(
11351
+ const finishCheckout = (0, import_react15.useCallback)(
10794
11352
  (checkoutData) => {
10795
11353
  dispatch({
10796
11354
  type: "CHECKOUT",
@@ -10799,7 +11357,7 @@ var EmbedProvider = ({
10799
11357
  },
10800
11358
  [dispatch]
10801
11359
  );
10802
- const hydratePublic = (0, import_react12.useCallback)(async () => {
11360
+ const hydratePublic = (0, import_react15.useCallback)(async () => {
10803
11361
  dispatch({ type: "HYDRATE_STARTED" });
10804
11362
  try {
10805
11363
  const response = await api.public?.getPublicPlans();
@@ -10817,7 +11375,7 @@ var EmbedProvider = ({
10817
11375
  });
10818
11376
  }
10819
11377
  }, [api.public]);
10820
- const debouncedHydratePublic = (0, import_react12.useMemo)(
11378
+ const debouncedHydratePublic = (0, import_react15.useMemo)(
10821
11379
  () => (0, import_debounce.default)(
10822
11380
  hydratePublic,
10823
11381
  FETCH_DEBOUNCE_TIMEOUT,
@@ -10825,7 +11383,7 @@ var EmbedProvider = ({
10825
11383
  ),
10826
11384
  [hydratePublic]
10827
11385
  );
10828
- const hydrate = (0, import_react12.useCallback)(async () => {
11386
+ const hydrate = (0, import_react15.useCallback)(async () => {
10829
11387
  dispatch({ type: "HYDRATE_STARTED" });
10830
11388
  try {
10831
11389
  const response = await api.checkout?.hydrate();
@@ -10843,11 +11401,11 @@ var EmbedProvider = ({
10843
11401
  });
10844
11402
  }
10845
11403
  }, [api.checkout]);
10846
- const debouncedHydrate = (0, import_react12.useMemo)(
11404
+ const debouncedHydrate = (0, import_react15.useMemo)(
10847
11405
  () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
10848
11406
  [hydrate]
10849
11407
  );
10850
- const hydrateComponent = (0, import_react12.useCallback)(
11408
+ const hydrateComponent = (0, import_react15.useCallback)(
10851
11409
  async (id) => {
10852
11410
  dispatch({ type: "HYDRATE_STARTED" });
10853
11411
  try {
@@ -10870,7 +11428,7 @@ var EmbedProvider = ({
10870
11428
  },
10871
11429
  [api.checkout]
10872
11430
  );
10873
- const debouncedHydrateComponent = (0, import_react12.useMemo)(
11431
+ const debouncedHydrateComponent = (0, import_react15.useMemo)(
10874
11432
  () => (0, import_debounce.default)(
10875
11433
  hydrateComponent,
10876
11434
  FETCH_DEBOUNCE_TIMEOUT,
@@ -10878,7 +11436,7 @@ var EmbedProvider = ({
10878
11436
  ),
10879
11437
  [hydrateComponent]
10880
11438
  );
10881
- const hydrateExternal = (0, import_react12.useCallback)(async function(fn) {
11439
+ const hydrateExternal = (0, import_react15.useCallback)(async function(fn) {
10882
11440
  dispatch({ type: "HYDRATE_STARTED" });
10883
11441
  try {
10884
11442
  const response = await fn();
@@ -10894,7 +11452,7 @@ var EmbedProvider = ({
10894
11452
  });
10895
11453
  }
10896
11454
  }, []);
10897
- const debouncedHydrateExternal = (0, import_react12.useMemo)(
11455
+ const debouncedHydrateExternal = (0, import_react15.useMemo)(
10898
11456
  () => (0, import_debounce.default)(
10899
11457
  hydrateExternal,
10900
11458
  FETCH_DEBOUNCE_TIMEOUT,
@@ -10902,10 +11460,10 @@ var EmbedProvider = ({
10902
11460
  ),
10903
11461
  [hydrateExternal]
10904
11462
  );
10905
- const createSetupIntent = (0, import_react12.useCallback)(async () => {
11463
+ const createSetupIntent = (0, import_react15.useCallback)(async () => {
10906
11464
  return api.checkout?.createSetupIntent();
10907
11465
  }, [api.checkout]);
10908
- const debouncedCreateSetupIntent = (0, import_react12.useMemo)(
11466
+ const debouncedCreateSetupIntent = (0, import_react15.useMemo)(
10909
11467
  () => (0, import_debounce.default)(
10910
11468
  createSetupIntent,
10911
11469
  FETCH_DEBOUNCE_TIMEOUT,
@@ -10913,7 +11471,7 @@ var EmbedProvider = ({
10913
11471
  ),
10914
11472
  [createSetupIntent]
10915
11473
  );
10916
- const updatePaymentMethod = (0, import_react12.useCallback)(
11474
+ const updatePaymentMethod = (0, import_react15.useCallback)(
10917
11475
  async (paymentMethodId) => {
10918
11476
  const response = await api.checkout?.updatePaymentMethod({
10919
11477
  updatePaymentMethodRequestBody: { paymentMethodId }
@@ -10928,7 +11486,7 @@ var EmbedProvider = ({
10928
11486
  },
10929
11487
  [api.checkout]
10930
11488
  );
10931
- const debouncedUpdatePaymentMethod = (0, import_react12.useMemo)(
11489
+ const debouncedUpdatePaymentMethod = (0, import_react15.useMemo)(
10932
11490
  () => (0, import_debounce.default)(
10933
11491
  updatePaymentMethod,
10934
11492
  FETCH_DEBOUNCE_TIMEOUT,
@@ -10936,7 +11494,7 @@ var EmbedProvider = ({
10936
11494
  ),
10937
11495
  [updatePaymentMethod]
10938
11496
  );
10939
- const deletePaymentMethod = (0, import_react12.useCallback)(
11497
+ const deletePaymentMethod = (0, import_react15.useCallback)(
10940
11498
  async (paymentMethodId) => {
10941
11499
  const response = await api.checkout?.deletePaymentMethod({
10942
11500
  checkoutId: paymentMethodId
@@ -10951,7 +11509,7 @@ var EmbedProvider = ({
10951
11509
  },
10952
11510
  [api.checkout]
10953
11511
  );
10954
- const debouncedDeletePaymentMethod = (0, import_react12.useMemo)(
11512
+ const debouncedDeletePaymentMethod = (0, import_react15.useMemo)(
10955
11513
  () => (0, import_debounce.default)(
10956
11514
  deletePaymentMethod,
10957
11515
  FETCH_DEBOUNCE_TIMEOUT,
@@ -10959,7 +11517,7 @@ var EmbedProvider = ({
10959
11517
  ),
10960
11518
  [deletePaymentMethod]
10961
11519
  );
10962
- const checkout = (0, import_react12.useCallback)(
11520
+ const checkout = (0, import_react15.useCallback)(
10963
11521
  async (changeSubscriptionRequestBody) => {
10964
11522
  const response = await api.checkout?.checkout({
10965
11523
  changeSubscriptionRequestBody
@@ -10974,17 +11532,17 @@ var EmbedProvider = ({
10974
11532
  },
10975
11533
  [api.checkout]
10976
11534
  );
10977
- const debouncedCheckout = (0, import_react12.useMemo)(
11535
+ const debouncedCheckout = (0, import_react15.useMemo)(
10978
11536
  () => (0, import_debounce.default)(checkout, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
10979
11537
  [checkout]
10980
11538
  );
10981
- const previewCheckout = (0, import_react12.useCallback)(
11539
+ const previewCheckout = (0, import_react15.useCallback)(
10982
11540
  async (changeSubscriptionRequestBody) => {
10983
11541
  return api.checkout?.previewCheckout({ changeSubscriptionRequestBody });
10984
11542
  },
10985
11543
  [api.checkout]
10986
11544
  );
10987
- const unsubscribe = (0, import_react12.useCallback)(async () => {
11545
+ const unsubscribe = (0, import_react15.useCallback)(async () => {
10988
11546
  const response = await api.checkout?.checkoutUnsubscribe();
10989
11547
  if (response) {
10990
11548
  dispatch({
@@ -10994,11 +11552,11 @@ var EmbedProvider = ({
10994
11552
  }
10995
11553
  return response;
10996
11554
  }, [api.checkout]);
10997
- const debouncedUnsubscribe = (0, import_react12.useMemo)(
11555
+ const debouncedUnsubscribe = (0, import_react15.useMemo)(
10998
11556
  () => (0, import_debounce.default)(unsubscribe, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
10999
11557
  [unsubscribe]
11000
11558
  );
11001
- const getUpcomingInvoice = (0, import_react12.useCallback)(
11559
+ const getUpcomingInvoice = (0, import_react15.useCallback)(
11002
11560
  async (id) => {
11003
11561
  return api.checkout?.hydrateUpcomingInvoice({
11004
11562
  componentId: id
@@ -11006,7 +11564,7 @@ var EmbedProvider = ({
11006
11564
  },
11007
11565
  [api.checkout]
11008
11566
  );
11009
- const debouncedGetUpcomingInvoice = (0, import_react12.useMemo)(
11567
+ const debouncedGetUpcomingInvoice = (0, import_react15.useMemo)(
11010
11568
  () => (0, import_debounce.default)(
11011
11569
  getUpcomingInvoice,
11012
11570
  FETCH_DEBOUNCE_TIMEOUT,
@@ -11014,10 +11572,10 @@ var EmbedProvider = ({
11014
11572
  ),
11015
11573
  [getUpcomingInvoice]
11016
11574
  );
11017
- const getCustomerBalance = (0, import_react12.useCallback)(async () => {
11575
+ const getCustomerBalance = (0, import_react15.useCallback)(async () => {
11018
11576
  return api.checkout?.fetchCustomerBalance();
11019
11577
  }, [api.checkout]);
11020
- const debouncedGetCustomerBalance = (0, import_react12.useMemo)(
11578
+ const debouncedGetCustomerBalance = (0, import_react15.useMemo)(
11021
11579
  () => (0, import_debounce.default)(
11022
11580
  getCustomerBalance,
11023
11581
  FETCH_DEBOUNCE_TIMEOUT,
@@ -11025,39 +11583,39 @@ var EmbedProvider = ({
11025
11583
  ),
11026
11584
  [getCustomerBalance]
11027
11585
  );
11028
- const listInvoices = (0, import_react12.useCallback)(async () => {
11586
+ const listInvoices = (0, import_react15.useCallback)(async () => {
11029
11587
  return api.checkout?.listInvoices();
11030
11588
  }, [api.checkout]);
11031
- const debouncedListInvoices = (0, import_react12.useMemo)(
11589
+ const debouncedListInvoices = (0, import_react15.useMemo)(
11032
11590
  () => (0, import_debounce.default)(listInvoices, FETCH_DEBOUNCE_TIMEOUT, LEADING_DEBOUNCE_SETTINGS),
11033
11591
  [listInvoices]
11034
11592
  );
11035
- const setError = (0, import_react12.useCallback)(
11593
+ const setError = (0, import_react15.useCallback)(
11036
11594
  (error) => {
11037
11595
  debug(error.message);
11038
11596
  dispatch({ type: "ERROR", error });
11039
11597
  },
11040
11598
  [debug]
11041
11599
  );
11042
- const setAccessToken = (0, import_react12.useCallback)((token2) => {
11600
+ const setAccessToken = (0, import_react15.useCallback)((token2) => {
11043
11601
  dispatch({ type: "SET_ACCESS_TOKEN", token: token2 });
11044
11602
  }, []);
11045
- const setData = (0, import_react12.useCallback)((data) => {
11603
+ const setData = (0, import_react15.useCallback)((data) => {
11046
11604
  dispatch({ type: "SET_DATA", data });
11047
11605
  }, []);
11048
- const updateSettings = (0, import_react12.useCallback)(
11606
+ const updateSettings = (0, import_react15.useCallback)(
11049
11607
  (settings = {}, options2) => {
11050
11608
  dispatch({ type: "UPDATE_SETTINGS", settings, update: options2?.update });
11051
11609
  },
11052
11610
  []
11053
11611
  );
11054
- const setLayout = (0, import_react12.useCallback)((layout) => {
11612
+ const setLayout = (0, import_react15.useCallback)((layout) => {
11055
11613
  dispatch({ type: "CHANGE_LAYOUT", layout });
11056
11614
  }, []);
11057
- const setCheckoutState = (0, import_react12.useCallback)((state2) => {
11615
+ const setCheckoutState = (0, import_react15.useCallback)((state2) => {
11058
11616
  dispatch({ type: "SET_CHECKOUT_STATE", state: state2 });
11059
11617
  }, []);
11060
- (0, import_react12.useEffect)(() => {
11618
+ (0, import_react15.useEffect)(() => {
11061
11619
  const element = document.getElementById(
11062
11620
  "schematic-fonts"
11063
11621
  );
@@ -11090,7 +11648,7 @@ var EmbedProvider = ({
11090
11648
  darkModeQuery.removeEventListener("change", darkModeQueryHandler);
11091
11649
  };
11092
11650
  }, []);
11093
- (0, import_react12.useEffect)(() => {
11651
+ (0, import_react15.useEffect)(() => {
11094
11652
  const fontSet = /* @__PURE__ */ new Set([]);
11095
11653
  Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
11096
11654
  fontSet.add(fontFamily);
@@ -11105,11 +11663,11 @@ var EmbedProvider = ({
11105
11663
  }
11106
11664
  }
11107
11665
  }, [styleRef, state.settings.theme.typography]);
11108
- (0, import_react12.useEffect)(() => {
11666
+ (0, import_react15.useEffect)(() => {
11109
11667
  if (apiKey) {
11110
11668
  const configParams = (0, import_merge2.default)({}, apiConfig, {
11111
11669
  apiKey,
11112
- headers: customHeaders
11670
+ headers: getCustomHeaders(sessionIdRef.current)
11113
11671
  });
11114
11672
  const publicApi = new ComponentspublicApi(
11115
11673
  new Configuration2(configParams)
@@ -11119,12 +11677,12 @@ var EmbedProvider = ({
11119
11677
  public: publicApi
11120
11678
  }));
11121
11679
  }
11122
- }, [apiKey, apiConfig, customHeaders]);
11123
- (0, import_react12.useEffect)(() => {
11680
+ }, [apiKey, apiConfig]);
11681
+ (0, import_react15.useEffect)(() => {
11124
11682
  if (state.accessToken) {
11125
11683
  const configParams = (0, import_merge2.default)({}, apiConfig, {
11126
11684
  apiKey: state.accessToken,
11127
- headers: customHeaders
11685
+ headers: getCustomHeaders(sessionIdRef.current)
11128
11686
  });
11129
11687
  setApi((prev2) => ({
11130
11688
  ...prev2,
@@ -11133,13 +11691,13 @@ var EmbedProvider = ({
11133
11691
  )
11134
11692
  }));
11135
11693
  }
11136
- }, [state.accessToken, apiConfig, customHeaders]);
11137
- (0, import_react12.useEffect)(() => {
11694
+ }, [state.accessToken, apiConfig]);
11695
+ (0, import_react15.useEffect)(() => {
11138
11696
  if (options.settings) {
11139
11697
  updateSettings(options.settings, { update: true });
11140
11698
  }
11141
11699
  }, [options.settings, updateSettings]);
11142
- (0, import_react12.useEffect)(() => {
11700
+ (0, import_react15.useEffect)(() => {
11143
11701
  function planChangedHandler(event) {
11144
11702
  if (event instanceof CustomEvent) {
11145
11703
  debug("plan changed", event.detail);
@@ -11192,20 +11750,20 @@ var EmbedProvider = ({
11192
11750
  };
11193
11751
 
11194
11752
  // src/hooks/useEmbed.ts
11195
- var useEmbed = () => (0, import_react13.useContext)(EmbedContext);
11753
+ var useEmbed = () => (0, import_react16.useContext)(EmbedContext);
11196
11754
 
11197
11755
  // src/hooks/useIsLightBackground.ts
11198
- var import_react14 = require("react");
11756
+ var import_react17 = require("react");
11199
11757
  function useIsLightBackground() {
11200
11758
  const { settings } = useEmbed();
11201
- const isLightBackground = (0, import_react14.useMemo)(() => {
11759
+ const isLightBackground = (0, import_react17.useMemo)(() => {
11202
11760
  return hexToHSL(settings.theme.card.background).l > 50;
11203
11761
  }, [settings.theme.card.background]);
11204
11762
  return isLightBackground;
11205
11763
  }
11206
11764
 
11207
11765
  // src/hooks/usePaymentConfirmation.ts
11208
- var import_react15 = require("react");
11766
+ var import_react18 = require("react");
11209
11767
  var usePaymentConfirmation = ({
11210
11768
  stripe,
11211
11769
  clientSecret,
@@ -11213,12 +11771,12 @@ var usePaymentConfirmation = ({
11213
11771
  onError: onError3,
11214
11772
  autoConfirm = false
11215
11773
  }) => {
11216
- const [isConfirming, setIsConfirming] = (0, import_react15.useState)(false);
11217
- const [error, setError] = (0, import_react15.useState)(null);
11218
- const [status, setStatus] = (0, import_react15.useState)("idle");
11219
- const confirmedSecrets = (0, import_react15.useRef)(/* @__PURE__ */ new Set());
11220
- const abortControllerRef = (0, import_react15.useRef)(null);
11221
- const confirmPayment = (0, import_react15.useCallback)(async () => {
11774
+ const [isConfirming, setIsConfirming] = (0, import_react18.useState)(false);
11775
+ const [error, setError] = (0, import_react18.useState)(null);
11776
+ const [status, setStatus] = (0, import_react18.useState)("idle");
11777
+ const confirmedSecrets = (0, import_react18.useRef)(/* @__PURE__ */ new Set());
11778
+ const abortControllerRef = (0, import_react18.useRef)(null);
11779
+ const confirmPayment = (0, import_react18.useCallback)(async () => {
11222
11780
  if (!stripe || !clientSecret) {
11223
11781
  const error2 = new Error(
11224
11782
  "Missing required parameters: stripe instance or client secret"
@@ -11273,7 +11831,7 @@ var usePaymentConfirmation = ({
11273
11831
  abortControllerRef.current = null;
11274
11832
  }
11275
11833
  }, [stripe, clientSecret, onSuccess, onError3, isConfirming]);
11276
- const reset = (0, import_react15.useCallback)(() => {
11834
+ const reset = (0, import_react18.useCallback)(() => {
11277
11835
  if (clientSecret) {
11278
11836
  confirmedSecrets.current.delete(clientSecret);
11279
11837
  }
@@ -11285,12 +11843,12 @@ var usePaymentConfirmation = ({
11285
11843
  abortControllerRef.current = null;
11286
11844
  }
11287
11845
  }, [clientSecret]);
11288
- (0, import_react15.useEffect)(() => {
11846
+ (0, import_react18.useEffect)(() => {
11289
11847
  if (autoConfirm && status === "idle" && stripe && clientSecret) {
11290
11848
  confirmPayment();
11291
11849
  }
11292
11850
  }, [autoConfirm, stripe, clientSecret]);
11293
- (0, import_react15.useEffect)(() => {
11851
+ (0, import_react18.useEffect)(() => {
11294
11852
  return () => {
11295
11853
  if (abortControllerRef.current) {
11296
11854
  abortControllerRef.current.abort();
@@ -11298,7 +11856,7 @@ var usePaymentConfirmation = ({
11298
11856
  }
11299
11857
  };
11300
11858
  }, []);
11301
- (0, import_react15.useEffect)(() => {
11859
+ (0, import_react18.useEffect)(() => {
11302
11860
  if (clientSecret && status !== "idle") {
11303
11861
  reset();
11304
11862
  }
@@ -11312,23 +11870,13 @@ var usePaymentConfirmation = ({
11312
11870
  };
11313
11871
  };
11314
11872
 
11315
- // src/hooks/usePrevious.ts
11316
- var import_react16 = require("react");
11317
- function usePrevious2(value) {
11318
- const ref = (0, import_react16.useRef)(void 0);
11319
- (0, import_react16.useEffect)(() => {
11320
- ref.current = value;
11321
- }, [value]);
11322
- return ref.current;
11323
- }
11324
-
11325
11873
  // src/hooks/useRequest.ts
11326
- var import_react17 = require("react");
11874
+ var import_react19 = require("react");
11327
11875
  function useRequest(fn) {
11328
- const [isLoading, setIsLoading] = (0, import_react17.useState)(false);
11329
- const [error, setError] = (0, import_react17.useState)(null);
11330
- const [data, setData] = (0, import_react17.useState)(void 0);
11331
- const request = (0, import_react17.useCallback)(async () => {
11876
+ const [isLoading, setIsLoading] = (0, import_react19.useState)(false);
11877
+ const [error, setError] = (0, import_react19.useState)(null);
11878
+ const [data, setData] = (0, import_react19.useState)(void 0);
11879
+ const request = (0, import_react19.useCallback)(async () => {
11332
11880
  try {
11333
11881
  setError(null);
11334
11882
  setIsLoading(true);
@@ -11343,7 +11891,7 @@ function useRequest(fn) {
11343
11891
  setIsLoading(false);
11344
11892
  }
11345
11893
  }, [fn]);
11346
- const value = (0, import_react17.useMemo)(() => {
11894
+ const value = (0, import_react19.useMemo)(() => {
11347
11895
  const state = { isLoading, error, data };
11348
11896
  return [state, request];
11349
11897
  }, [isLoading, error, data, request]);
@@ -11351,12 +11899,12 @@ function useRequest(fn) {
11351
11899
  }
11352
11900
 
11353
11901
  // src/hooks/useTrialEnd.ts
11354
- var import_react18 = require("react");
11902
+ var import_react20 = require("react");
11355
11903
  function useTrialEnd() {
11356
11904
  const { t: t2 } = useTranslation();
11357
11905
  const { data } = useEmbed();
11358
- const { endDate, formatted } = (0, import_react18.useMemo)(() => {
11359
- const billingSubscription = isCheckoutData(data) ? data.company?.billingSubscription : void 0;
11906
+ const { endDate, formatted } = (0, import_react20.useMemo)(() => {
11907
+ const billingSubscription = data?.company?.billingSubscription;
11360
11908
  const end = typeof billingSubscription?.trialEnd === "number" ? new Date(billingSubscription.trialEnd * 1e3) : void 0;
11361
11909
  let formatted2;
11362
11910
  if (end) {
@@ -11383,21 +11931,19 @@ function useTrialEnd() {
11383
11931
  });
11384
11932
  }
11385
11933
  return { endDate: end, formatted: formatted2 };
11386
- }, [t2, data]);
11934
+ }, [t2, data?.company?.billingSubscription]);
11387
11935
  return { endDate, formatted };
11388
11936
  }
11389
11937
 
11390
11938
  // src/hooks/useWrapChildren.ts
11391
- var import_react19 = require("react");
11392
- function useWrapChildren(elements) {
11393
- const [shouldWrap, setShouldWrap] = (0, import_react19.useState)(
11394
- () => new Array(elements.length).fill(false)
11395
- );
11396
- (0, import_react19.useLayoutEffect)(() => {
11939
+ var import_react21 = require("react");
11940
+ function useWrapChildren(ref) {
11941
+ const [shouldWrap, setShouldWrap] = (0, import_react21.useState)([]);
11942
+ (0, import_react21.useLayoutEffect)(() => {
11397
11943
  const rowShouldWrap = (parent) => [...parent.children].some(
11398
11944
  (el) => el instanceof HTMLElement && el.previousElementSibling instanceof HTMLElement && el.offsetLeft <= el.previousElementSibling.offsetLeft
11399
11945
  );
11400
- elements.forEach((el, idx) => {
11946
+ ref.current.forEach((el, idx) => {
11401
11947
  new ResizeObserver((entries) => {
11402
11948
  setShouldWrap((prev2) => {
11403
11949
  const next2 = [...prev2];
@@ -11411,12 +11957,12 @@ function useWrapChildren(elements) {
11411
11957
  return next2;
11412
11958
  });
11413
11959
  });
11414
- }, [elements]);
11960
+ }, [ref]);
11415
11961
  return shouldWrap.some((wrap) => wrap);
11416
11962
  }
11417
11963
 
11418
11964
  // src/components/ui/box/styles.ts
11419
- var Box = dt.div((props) => {
11965
+ var Box = dt("div")((props) => {
11420
11966
  function reducer2(acc, [key, value]) {
11421
11967
  if (key.startsWith("$") && !["$viewport"].includes(key)) {
11422
11968
  acc.push(
@@ -11914,7 +12460,7 @@ var Input = dt.input(({ theme, $size = "md", $variant = "filled" }) => {
11914
12460
  });
11915
12461
 
11916
12462
  // src/components/ui/modal/Modal.tsx
11917
- var import_react20 = require("react");
12463
+ var import_react22 = require("react");
11918
12464
 
11919
12465
  // src/components/ui/modal/styles.ts
11920
12466
  var Overlay = dt(Box)`
@@ -11979,12 +12525,12 @@ var Modal2 = ({
11979
12525
  }) => {
11980
12526
  const { setLayout } = useEmbed();
11981
12527
  const isLightBackground = useIsLightBackground();
11982
- const ref = (0, import_react20.useRef)(null);
11983
- const handleClose = (0, import_react20.useCallback)(() => {
12528
+ const ref = (0, import_react22.useRef)(null);
12529
+ const handleClose = (0, import_react22.useCallback)(() => {
11984
12530
  setLayout("portal");
11985
12531
  onClose?.();
11986
12532
  }, [setLayout, onClose]);
11987
- (0, import_react20.useLayoutEffect)(() => {
12533
+ (0, import_react22.useLayoutEffect)(() => {
11988
12534
  contentRef?.current?.focus({ preventScroll: true });
11989
12535
  }, [contentRef]);
11990
12536
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Container, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -12014,7 +12560,7 @@ var Modal2 = ({
12014
12560
  Modal2.displayName = "Modal";
12015
12561
 
12016
12562
  // src/components/ui/modal/ModalHeader.tsx
12017
- var import_react21 = require("react");
12563
+ var import_react23 = require("react");
12018
12564
  var import_jsx_runtime5 = require("react/jsx-runtime");
12019
12565
  var ModalHeader = ({
12020
12566
  children,
@@ -12023,7 +12569,7 @@ var ModalHeader = ({
12023
12569
  }) => {
12024
12570
  const { settings, setLayout } = useEmbed();
12025
12571
  const isLightBackground = useIsLightBackground();
12026
- const handleClose = (0, import_react21.useCallback)(() => {
12572
+ const handleClose = (0, import_react23.useCallback)(() => {
12027
12573
  setLayout("portal");
12028
12574
  onClose?.();
12029
12575
  }, [setLayout, onClose]);
@@ -12080,7 +12626,7 @@ var ModalHeader = ({
12080
12626
  };
12081
12627
 
12082
12628
  // src/components/ui/progress-bar/ProgressBar.tsx
12083
- var import_react22 = require("react");
12629
+ var import_react24 = require("react");
12084
12630
  var import_jsx_runtime6 = require("react/jsx-runtime");
12085
12631
  var progressColorMap = [
12086
12632
  "blue",
@@ -12090,7 +12636,7 @@ var progressColorMap = [
12090
12636
  "red",
12091
12637
  "red"
12092
12638
  ];
12093
- var ProgressBar = (0, import_react22.forwardRef)(
12639
+ var ProgressBar = (0, import_react24.forwardRef)(
12094
12640
  ({
12095
12641
  progress,
12096
12642
  value,
@@ -12211,8 +12757,8 @@ var Text = dt.span.withConfig({
12211
12757
  );
12212
12758
 
12213
12759
  // src/components/ui/tooltip/Tooltip.tsx
12214
- var import_debounce2 = __toESM(require_debounce());
12215
- var import_react23 = require("react");
12760
+ var import_debounce2 = __toESM(require_debounce(), 1);
12761
+ var import_react25 = require("react");
12216
12762
  var import_react_dom = require("react-dom");
12217
12763
 
12218
12764
  // src/components/ui/tooltip/styles.ts
@@ -12362,6 +12908,22 @@ var Content = dt.div.withConfig({
12362
12908
 
12363
12909
  // src/components/ui/tooltip/Tooltip.tsx
12364
12910
  var import_jsx_runtime7 = require("react/jsx-runtime");
12911
+ var getCoords = (element, { position: position2 }) => {
12912
+ const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
12913
+ const rect = element.getBoundingClientRect();
12914
+ let x2 = position2 === "left" ? rect.left : rect.right;
12915
+ if (position2 === "top" || position2 === "bottom") {
12916
+ x2 -= rect.width / 2;
12917
+ }
12918
+ let y2 = position2 === "top" ? rect.top : rect.bottom;
12919
+ if (position2 === "left" || position2 === "right") {
12920
+ y2 -= rect.height / 2;
12921
+ }
12922
+ return {
12923
+ x: Math.round(x2 - offsetLeft),
12924
+ y: Math.round(y2 - offsetTop)
12925
+ };
12926
+ };
12365
12927
  var Tooltip = ({
12366
12928
  trigger,
12367
12929
  content,
@@ -12369,42 +12931,29 @@ var Tooltip = ({
12369
12931
  fullWidth = false,
12370
12932
  ...rest
12371
12933
  }) => {
12372
- const ref = (0, import_react23.useRef)(null);
12373
- const [show, setShow] = (0, import_react23.useState)(false);
12374
- const [coords2, setCoords] = (0, import_react23.useState)({ x: 0, y: 0 });
12375
- const updateCoords = (0, import_react23.useCallback)(() => {
12934
+ const ref = (0, import_react25.useRef)(null);
12935
+ const [show, setShow] = (0, import_react25.useState)(false);
12936
+ const [coords2, setCoords] = (0, import_react25.useState)({ x: 0, y: 0 });
12937
+ const updateCoords = (0, import_react25.useCallback)(() => {
12376
12938
  if (ref.current) {
12377
- const { top: offsetTop, left: offsetLeft } = document.body.getBoundingClientRect();
12378
- const rect = ref.current.getBoundingClientRect();
12379
- let x2 = position2 === "left" ? rect.left : rect.right;
12380
- if (position2 === "top" || position2 === "bottom") {
12381
- x2 -= rect.width / 2;
12382
- }
12383
- let y2 = position2 === "top" ? rect.top : rect.bottom;
12384
- if (position2 === "left" || position2 === "right") {
12385
- y2 -= rect.height / 2;
12386
- }
12387
- setCoords({
12388
- x: Math.round(x2 - offsetLeft),
12389
- y: Math.round(y2 - offsetTop)
12390
- });
12939
+ setCoords(getCoords(ref.current, { position: position2 }));
12391
12940
  }
12392
12941
  }, [position2]);
12393
- (0, import_react23.useLayoutEffect)(() => {
12942
+ (0, import_react25.useLayoutEffect)(() => {
12394
12943
  const handleResize = (0, import_debounce2.default)(updateCoords, EVENT_DEBOUNCE_TIMEOUT);
12395
12944
  window.addEventListener("resize", handleResize);
12945
+ updateCoords();
12396
12946
  return () => {
12397
12947
  window.removeEventListener("resize", handleResize);
12398
12948
  };
12399
12949
  }, [updateCoords]);
12400
- (0, import_react23.useLayoutEffect)(() => {
12401
- updateCoords();
12402
- }, [updateCoords, show]);
12403
12950
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
12404
12951
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
12405
12952
  Trigger,
12406
12953
  {
12407
12954
  ref,
12955
+ onFocus: () => setShow(true),
12956
+ onBlur: () => setShow(false),
12408
12957
  onPointerEnter: () => setShow(true),
12409
12958
  onPointerLeave: () => setShow(false),
12410
12959
  $fullWidth: fullWidth,
@@ -12460,7 +13009,7 @@ var StyledCard = dt.div(({ theme }) => {
12460
13009
 
12461
13010
  // src/components/layout/card/Card.tsx
12462
13011
  var import_jsx_runtime8 = require("react/jsx-runtime");
12463
- var Card = (0, import_react24.forwardRef)(
13012
+ var Card = (0, import_react26.forwardRef)(
12464
13013
  ({ children, className }, ref) => {
12465
13014
  const { settings, isPending } = useEmbed();
12466
13015
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(StyledCard, { ref, className, children: [
@@ -12488,7 +13037,7 @@ var Card = (0, import_react24.forwardRef)(
12488
13037
  Card.displayName = "Card";
12489
13038
 
12490
13039
  // src/components/layout/column/Column.tsx
12491
- var import_react25 = require("react");
13040
+ var import_react27 = require("react");
12492
13041
 
12493
13042
  // src/components/layout/column/styles.ts
12494
13043
  var StyledColumn = dt.div`
@@ -12497,15 +13046,15 @@ var StyledColumn = dt.div`
12497
13046
 
12498
13047
  // src/components/layout/column/Column.tsx
12499
13048
  var import_jsx_runtime9 = require("react/jsx-runtime");
12500
- var Column = (0, import_react25.forwardRef)(
13049
+ var Column = (0, import_react27.forwardRef)(
12501
13050
  ({ children, basis, ...props }, ref) => {
12502
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react25.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
13051
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledColumn, { ref, ...props, children: import_react27.Children.count(children) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Card, { children }) : children });
12503
13052
  }
12504
13053
  );
12505
13054
  Column.displayName = "Column";
12506
13055
 
12507
13056
  // src/components/layout/root/Root.tsx
12508
- var import_react26 = require("react");
13057
+ var import_react28 = require("react");
12509
13058
 
12510
13059
  // src/components/layout/root/styles.ts
12511
13060
  var Container = dt.div`
@@ -12542,7 +13091,7 @@ var Container = dt.div`
12542
13091
 
12543
13092
  // src/components/layout/root/Root.tsx
12544
13093
  var import_jsx_runtime10 = require("react/jsx-runtime");
12545
- var Root = (0, import_react26.forwardRef)(
13094
+ var Root = (0, import_react28.forwardRef)(
12546
13095
  ({ data, settings, ...props }, ref) => {
12547
13096
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Container, { ref, ...props });
12548
13097
  }
@@ -12550,8 +13099,8 @@ var Root = (0, import_react26.forwardRef)(
12550
13099
  Root.displayName = "Root";
12551
13100
 
12552
13101
  // src/components/layout/viewport/Viewport.tsx
12553
- var import_debounce3 = __toESM(require_debounce());
12554
- var import_react39 = require("react");
13102
+ var import_debounce3 = __toESM(require_debounce(), 1);
13103
+ var import_react41 = require("react");
12555
13104
  var import_react_dom2 = require("react-dom");
12556
13105
 
12557
13106
  // src/components/shared/billing-threshold-tooltip/BillingThresholdTooltip.tsx
@@ -12584,10 +13133,10 @@ var BillingThresholdTooltip = ({
12584
13133
  };
12585
13134
 
12586
13135
  // src/components/shared/checkout-dialog/CheckoutDialog.tsx
12587
- var import_react31 = require("react");
13136
+ var import_react33 = require("react");
12588
13137
 
12589
13138
  // src/components/shared/sidebar/Sidebar.tsx
12590
- var import_react28 = require("react");
13139
+ var import_react30 = require("react");
12591
13140
 
12592
13141
  // src/components/shared/sidebar/EntitlementRow.tsx
12593
13142
  var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -12661,11 +13210,11 @@ var EntitlementRow = (entitlement) => {
12661
13210
  };
12662
13211
 
12663
13212
  // src/components/shared/sidebar/Proration.tsx
12664
- var import_react27 = require("react");
13213
+ var import_react29 = require("react");
12665
13214
  var import_jsx_runtime13 = require("react/jsx-runtime");
12666
13215
  var Proration = ({ currency, charges }) => {
12667
13216
  const { t: t2 } = useTranslation();
12668
- const [open, setOpen] = (0, import_react27.useState)(false);
13217
+ const [open, setOpen] = (0, import_react29.useState)(false);
12669
13218
  const toggle = (e2) => {
12670
13219
  e2.preventDefault();
12671
13220
  e2.stopPropagation();
@@ -12707,6 +13256,24 @@ var Proration = ({ currency, charges }) => {
12707
13256
 
12708
13257
  // src/components/shared/sidebar/StageButton.tsx
12709
13258
  var import_jsx_runtime14 = require("react/jsx-runtime");
13259
+ var NoPaymentRequired = ({
13260
+ isDisabled,
13261
+ isLoading,
13262
+ onClick
13263
+ }) => {
13264
+ const { t: t2 } = useTranslation();
13265
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13266
+ Button,
13267
+ {
13268
+ type: "button",
13269
+ disabled: isDisabled,
13270
+ onClick,
13271
+ $isLoading: isLoading,
13272
+ $fullWidth: true,
13273
+ children: t2("Subscribe and close")
13274
+ }
13275
+ );
13276
+ };
12710
13277
  var StageButton = ({
12711
13278
  checkout,
12712
13279
  checkoutStage,
@@ -12727,19 +13294,6 @@ var StageButton = ({
12727
13294
  }) => {
12728
13295
  const { t: t2 } = useTranslation();
12729
13296
  const isDisabled = isLoading || !hasPlan || inEditMode;
12730
- const NoPaymentRequired = () => {
12731
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12732
- Button,
12733
- {
12734
- type: "button",
12735
- disabled: isDisabled,
12736
- onClick: checkout,
12737
- $isLoading: isLoading,
12738
- $fullWidth: true,
12739
- children: t2("Subscribe and close")
12740
- }
12741
- );
12742
- };
12743
13297
  if (checkoutStage === "plan") {
12744
13298
  if (isSelectedPlanTrialable && trialPaymentMethodRequired && shouldTrial) {
12745
13299
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -12773,7 +13327,14 @@ var StageButton = ({
12773
13327
  if (!isPaymentMethodRequired && !checkoutStages?.some(
12774
13328
  (stage) => stage.id === "usage" || stage.id === "addons" || stage.id === "credits"
12775
13329
  )) {
12776
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoPaymentRequired, {});
13330
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13331
+ NoPaymentRequired,
13332
+ {
13333
+ isDisabled,
13334
+ isLoading,
13335
+ onClick: checkout
13336
+ }
13337
+ );
12777
13338
  }
12778
13339
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12779
13340
  Button,
@@ -12801,7 +13362,14 @@ var StageButton = ({
12801
13362
  if (!isPaymentMethodRequired && !checkoutStages?.some(
12802
13363
  (stage) => stage.id === "addons" || stage.id === "credits"
12803
13364
  )) {
12804
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoPaymentRequired, {});
13365
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13366
+ NoPaymentRequired,
13367
+ {
13368
+ isDisabled,
13369
+ isLoading,
13370
+ onClick: checkout
13371
+ }
13372
+ );
12805
13373
  }
12806
13374
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12807
13375
  Button,
@@ -12842,7 +13410,14 @@ var StageButton = ({
12842
13410
  (stage) => stage.id === "credits"
12843
13411
  );
12844
13412
  if (!isPaymentMethodRequired && !hasAddonsUsageStage && !hasCreditsStage) {
12845
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoPaymentRequired, {});
13413
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13414
+ NoPaymentRequired,
13415
+ {
13416
+ isDisabled,
13417
+ isLoading,
13418
+ onClick: checkout
13419
+ }
13420
+ );
12846
13421
  }
12847
13422
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12848
13423
  Button,
@@ -12877,7 +13452,14 @@ var StageButton = ({
12877
13452
  }
12878
13453
  if (checkoutStage === "addonsUsage") {
12879
13454
  if (!isPaymentMethodRequired && !checkoutStages?.some((stage) => stage.id === "credits")) {
12880
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoPaymentRequired, {});
13455
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13456
+ NoPaymentRequired,
13457
+ {
13458
+ isDisabled,
13459
+ isLoading,
13460
+ onClick: checkout
13461
+ }
13462
+ );
12881
13463
  }
12882
13464
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12883
13465
  Button,
@@ -12909,7 +13491,14 @@ var StageButton = ({
12909
13491
  }
12910
13492
  if (checkoutStage === "credits") {
12911
13493
  if (!isPaymentMethodRequired) {
12912
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoPaymentRequired, {});
13494
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13495
+ NoPaymentRequired,
13496
+ {
13497
+ isDisabled,
13498
+ isLoading,
13499
+ onClick: checkout
13500
+ }
13501
+ );
12913
13502
  }
12914
13503
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12915
13504
  Button,
@@ -12941,7 +13530,14 @@ var StageButton = ({
12941
13530
  }
12942
13531
  if (checkoutStage === "checkout") {
12943
13532
  if (!isPaymentMethodRequired) {
12944
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NoPaymentRequired, {});
13533
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
13534
+ NoPaymentRequired,
13535
+ {
13536
+ isDisabled,
13537
+ isLoading,
13538
+ onClick: checkout
13539
+ }
13540
+ );
12945
13541
  }
12946
13542
  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
12947
13543
  Button,
@@ -13003,33 +13599,30 @@ var Sidebar = ({
13003
13599
  billingSubscription,
13004
13600
  paymentMethod,
13005
13601
  trialPaymentMethodRequired
13006
- } = (0, import_react28.useMemo)(() => {
13007
- if (isCheckoutData(data)) {
13008
- const currentEntitlements2 = data.featureUsage?.features || [];
13009
- return {
13010
- currentPlan: data.company?.plan,
13011
- currentAddOns: data.company?.addOns || [],
13012
- currentEntitlements: currentEntitlements2,
13013
- currentUsageBasedEntitlements: extractCurrentUsageBasedEntitlements(
13014
- data.featureUsage?.features,
13015
- planPeriod
13016
- ),
13017
- billingSubscription: data.company?.billingSubscription,
13018
- paymentMethod: data.subscription?.paymentMethod,
13019
- trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
13020
- };
13021
- }
13602
+ } = (0, import_react30.useMemo)(() => {
13603
+ const currentEntitlements2 = data?.featureUsage?.features || [];
13022
13604
  return {
13023
- currentPlan: void 0,
13024
- currentAddOns: [],
13025
- currentEntitlements: [],
13026
- currentUsageBasedEntitlements: [],
13027
- billingSubscription: void 0,
13028
- paymentMethod: void 0,
13029
- trialPaymentMethodRequired: false
13605
+ currentPlan: data?.company?.plan,
13606
+ currentAddOns: data?.company?.addOns || [],
13607
+ currentEntitlements: currentEntitlements2,
13608
+ currentUsageBasedEntitlements: extractCurrentUsageBasedEntitlements(
13609
+ currentEntitlements2,
13610
+ planPeriod
13611
+ ),
13612
+ billingSubscription: data?.company?.billingSubscription,
13613
+ paymentMethod: data?.subscription?.paymentMethod,
13614
+ trialPaymentMethodRequired: data?.trialPaymentMethodRequired === true
13030
13615
  };
13031
- }, [data, planPeriod]);
13032
- const { payInAdvanceEntitlements } = (0, import_react28.useMemo)(() => {
13616
+ }, [
13617
+ planPeriod,
13618
+ data?.company?.addOns,
13619
+ data?.company?.billingSubscription,
13620
+ data?.company?.plan,
13621
+ data?.featureUsage?.features,
13622
+ data?.subscription?.paymentMethod,
13623
+ data?.trialPaymentMethodRequired
13624
+ ]);
13625
+ const { payInAdvanceEntitlements } = (0, import_react30.useMemo)(() => {
13033
13626
  const payAsYouGoEntitlements = [];
13034
13627
  const payInAdvanceEntitlements2 = usageBasedEntitlements.filter(
13035
13628
  (entitlement) => {
@@ -13041,7 +13634,7 @@ var Sidebar = ({
13041
13634
  );
13042
13635
  return { payAsYouGoEntitlements, payInAdvanceEntitlements: payInAdvanceEntitlements2 };
13043
13636
  }, [usageBasedEntitlements]);
13044
- const subscriptionPrice = (0, import_react28.useMemo)(() => {
13637
+ const subscriptionPrice = (0, import_react30.useMemo)(() => {
13045
13638
  let planPrice;
13046
13639
  let currency;
13047
13640
  if (selectedPlan) {
@@ -13078,7 +13671,7 @@ var Sidebar = ({
13078
13671
  proration,
13079
13672
  taxAmount,
13080
13673
  taxDescription
13081
- } = (0, import_react28.useMemo)(() => {
13674
+ } = (0, import_react30.useMemo)(() => {
13082
13675
  return {
13083
13676
  amountOff: charges?.amountOff ?? 0,
13084
13677
  dueNow: charges?.dueNow ?? 0,
@@ -13090,7 +13683,7 @@ var Sidebar = ({
13090
13683
  taxDescription: charges?.taxDisplayName
13091
13684
  };
13092
13685
  }, [charges]);
13093
- const updatedUsageBasedEntitlements = (0, import_react28.useMemo)(() => {
13686
+ const updatedUsageBasedEntitlements = (0, import_react30.useMemo)(() => {
13094
13687
  const changedUsageBasedEntitlements = [];
13095
13688
  const addedUsageBasedEntitlements = selectedPlan ? usageBasedEntitlements.reduce(
13096
13689
  (acc, selected) => {
@@ -13141,19 +13734,19 @@ var Sidebar = ({
13141
13734
  currentUsageBasedEntitlements,
13142
13735
  usageBasedEntitlements
13143
13736
  ]);
13144
- const selectedAddOns = (0, import_react28.useMemo)(
13737
+ const selectedAddOns = (0, import_react30.useMemo)(
13145
13738
  () => addOns.filter((addOn) => addOn.isSelected),
13146
13739
  [addOns]
13147
13740
  );
13148
- const addedCreditBundles = (0, import_react28.useMemo)(
13741
+ const addedCreditBundles = (0, import_react30.useMemo)(
13149
13742
  () => creditBundles.filter((bundle) => bundle.count > 0),
13150
13743
  [creditBundles]
13151
13744
  );
13152
- const discountApplied = (0, import_react28.useMemo)(
13745
+ const discountApplied = (0, import_react30.useMemo)(
13153
13746
  () => promoCode && (amountOff > 0 || percentOff > 0),
13154
13747
  [promoCode, amountOff, percentOff]
13155
13748
  );
13156
- const handleCheckout = (0, import_react28.useCallback)(async () => {
13749
+ const handleCheckout = (0, import_react30.useCallback)(async () => {
13157
13750
  const planId = selectedPlan?.id;
13158
13751
  const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
13159
13752
  try {
@@ -13195,7 +13788,7 @@ var Sidebar = ({
13195
13788
  newPlanId: planId,
13196
13789
  newPriceId: priceId,
13197
13790
  addOnIds: addOns.reduce((acc, addOn) => {
13198
- if (addOn.isSelected && isHydratedPlan(selectedPlan) && !selectedPlan.companyCanTrial) {
13791
+ if (addOn.isSelected && !selectedPlan.companyCanTrial) {
13199
13792
  const addOnPriceId = getAddOnPrice(addOn, planPeriod)?.id;
13200
13793
  if (addOnPriceId) {
13201
13794
  acc.push({
@@ -13274,7 +13867,7 @@ var Sidebar = ({
13274
13867
  promoCode,
13275
13868
  finishCheckout
13276
13869
  ]);
13277
- const handleUnsubscribe = (0, import_react28.useCallback)(async () => {
13870
+ const handleUnsubscribe = (0, import_react30.useCallback)(async () => {
13278
13871
  try {
13279
13872
  setError(void 0);
13280
13873
  setIsLoading(true);
@@ -13287,8 +13880,7 @@ var Sidebar = ({
13287
13880
  setError(t2("Unsubscribe failed"));
13288
13881
  }
13289
13882
  }, [t2, unsubscribe, setError, setIsLoading, setLayout]);
13290
- const willPlanChange = isHydratedPlan(selectedPlan) && !selectedPlan.current;
13291
- const { removedAddOns, willAddOnsChange } = (0, import_react28.useMemo)(() => {
13883
+ const { removedAddOns, willAddOnsChange } = (0, import_react30.useMemo)(() => {
13292
13884
  const addedAddOns = selectedAddOns.filter(
13293
13885
  (selected) => !currentAddOns.some((current) => selected.id === current.id)
13294
13886
  );
@@ -13302,7 +13894,7 @@ var Sidebar = ({
13302
13894
  willAddOnsChange: willAddOnsChange2
13303
13895
  };
13304
13896
  }, [currentAddOns, selectedAddOns]);
13305
- const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
13897
+ const isSelectedPlanTrialable = selectedPlan?.companyCanTrial === true && selectedPlan?.isTrialable === true;
13306
13898
  const now = /* @__PURE__ */ new Date();
13307
13899
  const trialEndsOn = new Date(now);
13308
13900
  if (isSelectedPlanTrialable && selectedPlan.trialDays) {
@@ -13362,7 +13954,7 @@ var Sidebar = ({
13362
13954
  $justifyContent: "space-between",
13363
13955
  $alignItems: "center",
13364
13956
  $gap: "1rem",
13365
- ...willPlanChange && {
13957
+ ...selectedPlan && !selectedPlan.current && {
13366
13958
  $opacity: "0.625",
13367
13959
  $textDecoration: "line-through",
13368
13960
  $color: settings.theme.typography.heading4.color
@@ -13382,7 +13974,7 @@ var Sidebar = ({
13382
13974
  ]
13383
13975
  }
13384
13976
  ),
13385
- willPlanChange && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box, { children: [
13977
+ selectedPlan && !selectedPlan.current && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Box, { children: [
13386
13978
  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
13387
13979
  Box,
13388
13980
  {
@@ -13884,8 +14476,6 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
13884
14476
  $gap: "1rem",
13885
14477
  children: addOns.map((addOn, index) => {
13886
14478
  const { price, currency } = getAddOnPrice(addOn, period) || {};
13887
- const isAddOnValid = isHydratedPlan(addOn) && addOn.valid;
13888
- const isAddOnCurrent = isHydratedPlan(addOn) && addOn.current;
13889
14479
  const displayableEntitlements = addOn.entitlements?.filter(
13890
14480
  (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
13891
14481
  "pay_as_you_go" /* PayAsYouGo */,
@@ -13956,7 +14546,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
13956
14546
  }
13957
14547
  )
13958
14548
  ] }) }),
13959
- isAddOnCurrent && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
14549
+ addOn.current && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
13960
14550
  Flex,
13961
14551
  {
13962
14552
  $position: "absolute",
@@ -14076,7 +14666,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
14076
14666
  Button,
14077
14667
  {
14078
14668
  type: "button",
14079
- disabled: isLoading || !isAddOnValid,
14669
+ disabled: isLoading || !addOn.valid,
14080
14670
  onClick: () => toggle(addOn.id),
14081
14671
  $size: "sm",
14082
14672
  $color: "primary",
@@ -14088,13 +14678,13 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
14088
14678
  Button,
14089
14679
  {
14090
14680
  type: "button",
14091
- disabled: isLoading || !isAddOnValid,
14681
+ disabled: isLoading || !addOn.valid,
14092
14682
  onClick: () => toggle(addOn.id),
14093
14683
  $size: "sm",
14094
- $color: isAddOnCurrent ? "danger" : "primary",
14095
- $variant: isAddOnCurrent ? "ghost" : "text",
14684
+ $color: addOn.current ? "danger" : "primary",
14685
+ $variant: addOn.current ? "ghost" : "text",
14096
14686
  $fullWidth: true,
14097
- children: isAddOnCurrent ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
14687
+ children: addOn.current ? t2("Remove add-on") : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
14098
14688
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon3, { name: "check-rounded", size: "sm" }),
14099
14689
  t2("Selected")
14100
14690
  ] })
@@ -14113,7 +14703,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
14113
14703
  };
14114
14704
 
14115
14705
  // src/components/shared/checkout-dialog/Checkout.tsx
14116
- var import_react29 = require("react");
14706
+ var import_react31 = require("react");
14117
14707
  var import_jsx_runtime17 = require("react/jsx-runtime");
14118
14708
  var Checkout = ({
14119
14709
  isPaymentMethodRequired,
@@ -14125,7 +14715,7 @@ var Checkout = ({
14125
14715
  }) => {
14126
14716
  const { t: t2 } = useTranslation();
14127
14717
  const isLightBackground = useIsLightBackground();
14128
- const [discount, setDiscount] = (0, import_react29.useState)("");
14718
+ const [discount, setDiscount] = (0, import_react31.useState)("");
14129
14719
  if (!isPaymentMethodRequired) {
14130
14720
  return null;
14131
14721
  }
@@ -14339,7 +14929,7 @@ var Navigation = ({
14339
14929
  };
14340
14930
 
14341
14931
  // src/components/shared/checkout-dialog/Plan.tsx
14342
- var import_react30 = require("react");
14932
+ var import_react32 = require("react");
14343
14933
 
14344
14934
  // src/components/shared/checkout-dialog/styles.ts
14345
14935
  var FlexWithAlignEnd = dt(Flex)`
@@ -14351,7 +14941,7 @@ var import_jsx_runtime20 = require("react/jsx-runtime");
14351
14941
  var Selected = ({ isCurrent = false, isTrial = false }) => {
14352
14942
  const { t: t2 } = useTranslation();
14353
14943
  const { settings } = useEmbed();
14354
- const text = (0, import_react30.useMemo)(() => {
14944
+ const text = (0, import_react32.useMemo)(() => {
14355
14945
  if (isCurrent) {
14356
14946
  return isTrial ? t2("Trial in progress") : t2("Current plan");
14357
14947
  }
@@ -14387,22 +14977,16 @@ var PlanButtonGroup = ({
14387
14977
  }) => {
14388
14978
  const { t: t2 } = useTranslation();
14389
14979
  const { data } = useEmbed();
14390
- const isTrialing = (0, import_react30.useMemo)(() => {
14391
- return isCheckoutData(data) && data.subscription?.status === "trialing" || false;
14980
+ const isTrialing = (0, import_react32.useMemo)(() => {
14981
+ return data?.subscription?.status === "trialing" || false;
14392
14982
  }, [data]);
14393
- const { isCurrentPlan, isValidPlan } = (0, import_react30.useMemo)(() => {
14394
- if (isCheckoutData(data)) {
14395
- return {
14396
- isCurrentPlan: data.company?.plan?.id === plan.id,
14397
- isValidPlan: isHydratedPlan(plan) && plan.valid
14398
- };
14399
- }
14983
+ const { isCurrentPlan, isValidPlan } = (0, import_react32.useMemo)(() => {
14400
14984
  return {
14401
- isCurrentPlan: false,
14402
- isValidPlan: true
14985
+ isCurrentPlan: data?.company?.plan?.id === plan.id,
14986
+ isValidPlan: plan.valid
14403
14987
  };
14404
- }, [data, plan]);
14405
- if (isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable) {
14988
+ }, [plan.id, plan.valid, data?.company?.plan?.id]);
14989
+ if (plan.companyCanTrial && plan.isTrialable) {
14406
14990
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "1.5rem", children: [
14407
14991
  !isTrialing && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: isSelected && shouldTrial ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan, isTrial: shouldTrial }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
14408
14992
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -14430,7 +15014,7 @@ var PlanButtonGroup = ({
14430
15014
  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Start X day trial", { days: plan.trialDays })
14431
15015
  }
14432
15016
  ),
14433
- isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
15017
+ !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
14434
15018
  ] }) }),
14435
15019
  !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: isSelected && (!shouldTrial || isTrialing) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Selected, { isCurrent: isCurrentPlan }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
14436
15020
  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -14448,7 +15032,7 @@ var PlanButtonGroup = ({
14448
15032
  children: !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Box, { $textAlign: "center", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) }) : t2("Choose plan")
14449
15033
  }
14450
15034
  ),
14451
- isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
15035
+ !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
14452
15036
  ] }) })
14453
15037
  ] });
14454
15038
  }
@@ -14475,7 +15059,7 @@ var PlanButtonGroup = ({
14475
15059
  children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !isValidPlan ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Choose plan")
14476
15060
  }
14477
15061
  ),
14478
- isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
15062
+ !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UsageViolationText, { violations: plan.usageViolations })
14479
15063
  ] });
14480
15064
  };
14481
15065
  var Plan = ({
@@ -14489,28 +15073,22 @@ var Plan = ({
14489
15073
  const { t: t2 } = useTranslation();
14490
15074
  const { data, settings } = useEmbed();
14491
15075
  const isLightBackground = useIsLightBackground();
14492
- const [entitlementCounts, setEntitlementCounts] = (0, import_react30.useState)(
15076
+ const [entitlementCounts, setEntitlementCounts] = (0, import_react32.useState)(
14493
15077
  () => plans.reduce(entitlementCountsReducer, {})
14494
15078
  );
14495
- const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = (0, import_react30.useMemo)(() => {
14496
- const showCredits2 = data?.showCredits ?? true;
14497
- const showPeriodToggle2 = data?.showPeriodToggle ?? true;
14498
- const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
14499
- if (isCheckoutData(data)) {
14500
- return {
14501
- isTrialing: data.subscription?.status === "trialing",
14502
- showCredits: showCredits2,
14503
- showPeriodToggle: showPeriodToggle2,
14504
- showZeroPriceAsFree: showZeroPriceAsFree2
14505
- };
14506
- }
15079
+ const { isTrialing, showCredits, showPeriodToggle, showZeroPriceAsFree } = (0, import_react32.useMemo)(() => {
14507
15080
  return {
14508
- isTrialing: false,
14509
- showCredits: showCredits2,
14510
- showPeriodToggle: showPeriodToggle2,
14511
- showZeroPriceAsFree: showZeroPriceAsFree2
15081
+ isTrialing: data?.subscription?.status === "trialing",
15082
+ showCredits: data?.showCredits ?? true,
15083
+ showPeriodToggle: data?.showPeriodToggle ?? true,
15084
+ showZeroPriceAsFree: data?.showZeroPriceAsFree ?? false
14512
15085
  };
14513
- }, [data]);
15086
+ }, [
15087
+ data?.showCredits,
15088
+ data?.showPeriodToggle,
15089
+ data?.showZeroPriceAsFree,
15090
+ data?.subscription?.status
15091
+ ]);
14514
15092
  const handleToggleShowAll = (id) => {
14515
15093
  setEntitlementCounts((prev2) => {
14516
15094
  const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -14526,7 +15104,7 @@ var Plan = ({
14526
15104
  return prev2;
14527
15105
  });
14528
15106
  };
14529
- (0, import_react30.useEffect)(() => {
15107
+ (0, import_react32.useEffect)(() => {
14530
15108
  setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
14531
15109
  }, [plans]);
14532
15110
  const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
@@ -14656,7 +15234,7 @@ var Plan = ({
14656
15234
  })
14657
15235
  }
14658
15236
  ),
14659
- isHydratedPlan(plan) && plan.current && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
15237
+ plan.current && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
14660
15238
  Flex,
14661
15239
  {
14662
15240
  $position: "absolute",
@@ -14699,7 +15277,7 @@ var Plan = ({
14699
15277
  packageSize: entitlementPackageSize = 1
14700
15278
  } = getEntitlementPrice(entitlement, planPeriod) || {};
14701
15279
  const metricPeriodName = getMetricPeriodName(entitlement);
14702
- const UsageDetailsContainer = entitlement.billingThreshold ? FlexWithAlignEnd : import_react30.Fragment;
15280
+ const UsageDetailsContainer = entitlement.billingThreshold ? FlexWithAlignEnd : import_react32.Fragment;
14703
15281
  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
14704
15282
  Flex,
14705
15283
  {
@@ -14969,7 +15547,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
14969
15547
  {
14970
15548
  $size: "lg",
14971
15549
  type: "number",
14972
- value: entitlement.quantity,
15550
+ defaultValue: entitlement.quantity,
14973
15551
  min: 0,
14974
15552
  autoFocus: true,
14975
15553
  onFocus: (event) => {
@@ -15057,8 +15635,8 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
15057
15635
  const featureUsage = entitlements.find(
15058
15636
  (usage2) => usage2.feature?.id === entitlement.feature?.id
15059
15637
  );
15060
- const allocation = featureUsage?.allocation || 0;
15061
- const usage = featureUsage?.usage || 0;
15638
+ const allocation = featureUsage?.allocation ?? entitlement.valueNumeric ?? 0;
15639
+ const usage = featureUsage?.usage ?? 0;
15062
15640
  acc.push({
15063
15641
  ...entitlement,
15064
15642
  allocation,
@@ -15072,46 +15650,40 @@ var CheckoutDialog = ({ top = 0 }) => {
15072
15650
  const { t: t2 } = useTranslation();
15073
15651
  const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
15074
15652
  const isLightBackground = useIsLightBackground();
15075
- const contentRef = (0, import_react31.useRef)(null);
15076
- const checkoutRef = (0, import_react31.useRef)(null);
15077
- const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = (0, import_react31.useState)(void 0);
15078
- const [charges, setCharges] = (0, import_react31.useState)();
15079
- const [paymentMethodId, setPaymentMethodId] = (0, import_react31.useState)(
15653
+ const contentRef = (0, import_react33.useRef)(null);
15654
+ const checkoutRef = (0, import_react33.useRef)(null);
15655
+ const [confirmPaymentIntentProps, setConfirmPaymentIntentProps] = (0, import_react33.useState)(void 0);
15656
+ const [charges, setCharges] = (0, import_react33.useState)();
15657
+ const [paymentMethodId, setPaymentMethodId] = (0, import_react33.useState)(
15080
15658
  () => {
15081
- if (isCheckoutData(data)) {
15082
- return (data.subscription?.paymentMethod || data.company?.defaultPaymentMethod)?.externalId;
15083
- }
15659
+ return data?.subscription?.paymentMethod?.externalId || data?.company?.defaultPaymentMethod?.externalId;
15084
15660
  }
15085
15661
  );
15086
- const [isLoading, setIsLoading] = (0, import_react31.useState)(false);
15087
- const [error, setError] = (0, import_react31.useState)();
15662
+ const [isLoading, setIsLoading] = (0, import_react33.useState)(false);
15663
+ const [error, setError] = (0, import_react33.useState)();
15088
15664
  const {
15089
15665
  currentPlanId,
15090
15666
  currentEntitlements,
15091
15667
  showPeriodToggle,
15092
15668
  trialPaymentMethodRequired
15093
- } = (0, import_react31.useMemo)(() => {
15094
- const showPeriodToggle2 = data?.showPeriodToggle ?? true;
15095
- if (isCheckoutData(data)) {
15096
- return {
15097
- currentPlanId: data.company?.plan?.id,
15098
- currentEntitlements: data.featureUsage ? data.featureUsage.features : [],
15099
- showPeriodToggle: showPeriodToggle2,
15100
- trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
15101
- };
15102
- }
15669
+ } = (0, import_react33.useMemo)(() => {
15103
15670
  return {
15104
- currentPlanId: void 0,
15105
- currentEntitlements: [],
15106
- showPeriodToggle: showPeriodToggle2,
15107
- trialPaymentMethodRequired: false
15671
+ currentPlanId: data?.company?.plan?.id,
15672
+ currentEntitlements: data?.featureUsage ? data.featureUsage.features : [],
15673
+ showPeriodToggle: data?.showPeriodToggle ?? true,
15674
+ trialPaymentMethodRequired: data?.trialPaymentMethodRequired === true
15108
15675
  };
15109
- }, [data]);
15110
- const currentPeriod = (0, import_react31.useMemo)(
15111
- () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
15112
- [data, checkoutState?.period]
15676
+ }, [
15677
+ data?.company?.plan?.id,
15678
+ data?.featureUsage,
15679
+ data?.showPeriodToggle,
15680
+ data?.trialPaymentMethodRequired
15681
+ ]);
15682
+ const currentPeriod = (0, import_react33.useMemo)(
15683
+ () => checkoutState?.period || data?.company?.plan?.planPeriod || "month",
15684
+ [data?.company?.plan?.planPeriod, checkoutState?.period]
15113
15685
  );
15114
- const [planPeriod, setPlanPeriod] = (0, import_react31.useState)(currentPeriod);
15686
+ const [planPeriod, setPlanPeriod] = (0, import_react33.useState)(currentPeriod);
15115
15687
  const {
15116
15688
  plans: availablePlans,
15117
15689
  addOns: availableAddOns,
@@ -15119,35 +15691,29 @@ var CheckoutDialog = ({ top = 0 }) => {
15119
15691
  } = useAvailablePlans(planPeriod, {
15120
15692
  useSelectedPeriod: showPeriodToggle
15121
15693
  });
15122
- const [selectedPlan, setSelectedPlan] = (0, import_react31.useState)(
15694
+ const [selectedPlan, setSelectedPlan] = (0, import_react33.useState)(
15123
15695
  () => {
15124
15696
  return availablePlans.find(
15125
- (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : isHydratedPlan(plan) && plan.current
15697
+ (plan) => checkoutState?.planId ? plan.id === checkoutState.planId : plan.current
15126
15698
  );
15127
15699
  }
15128
15700
  );
15129
- const [shouldTrial, setShouldTrial] = (0, import_react31.useState)(false);
15130
- const [addOns, setAddOns] = (0, import_react31.useState)(() => {
15131
- if (isCheckoutData(data)) {
15132
- return availableAddOns.map((addOn) => ({
15133
- ...addOn,
15134
- isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data.company?.addOns || []).some(
15135
- (currentAddOn) => addOn.id === currentAddOn.id
15136
- )
15137
- }));
15138
- }
15139
- return [];
15701
+ const [shouldTrial, setShouldTrial] = (0, import_react33.useState)(false);
15702
+ const [addOns, setAddOns] = (0, import_react33.useState)(() => {
15703
+ return availableAddOns.map((addOn) => ({
15704
+ ...addOn,
15705
+ isSelected: typeof checkoutState?.addOnId !== "undefined" ? addOn.id === checkoutState.addOnId : (data?.company?.addOns || []).some(
15706
+ (currentAddOn) => addOn.id === currentAddOn.id
15707
+ )
15708
+ }));
15140
15709
  });
15141
- const [creditBundles, setCreditBundles] = (0, import_react31.useState)(() => {
15142
- if (isCheckoutData(data)) {
15143
- return data.creditBundles.map((bundle) => ({
15144
- ...bundle,
15145
- count: 0
15146
- }));
15147
- }
15148
- return [];
15710
+ const [creditBundles, setCreditBundles] = (0, import_react33.useState)(() => {
15711
+ return (data?.creditBundles || []).map((bundle) => ({
15712
+ ...bundle,
15713
+ count: 0
15714
+ }));
15149
15715
  });
15150
- const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react31.useState)(
15716
+ const [usageBasedEntitlements, setUsageBasedEntitlements] = (0, import_react33.useState)(
15151
15717
  () => (selectedPlan?.entitlements || []).reduce(
15152
15718
  createActiveUsageBasedEntitlementsReducer(
15153
15719
  currentEntitlements,
@@ -15156,10 +15722,8 @@ var CheckoutDialog = ({ top = 0 }) => {
15156
15722
  []
15157
15723
  )
15158
15724
  );
15159
- const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react31.useState)(() => {
15160
- if (!isCheckoutData(data)) return [];
15161
- const currentAddOns = data.company?.addOns || [];
15162
- return currentAddOns.flatMap((currentAddOn) => {
15725
+ const [addOnUsageBasedEntitlements, setAddOnUsageBasedEntitlements] = (0, import_react33.useState)(() => {
15726
+ return (data?.company?.addOns || []).flatMap((currentAddOn) => {
15163
15727
  const availableAddOn = availableAddOns.find(
15164
15728
  (available) => available.id === currentAddOn.id
15165
15729
  );
@@ -15173,26 +15737,26 @@ var CheckoutDialog = ({ top = 0 }) => {
15173
15737
  );
15174
15738
  });
15175
15739
  });
15176
- const payInAdvanceEntitlements = (0, import_react31.useMemo)(
15740
+ const payInAdvanceEntitlements = (0, import_react33.useMemo)(
15177
15741
  () => usageBasedEntitlements.filter(
15178
15742
  (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
15179
15743
  ),
15180
15744
  [usageBasedEntitlements]
15181
15745
  );
15182
- const addOnPayInAdvanceEntitlements = (0, import_react31.useMemo)(
15746
+ const addOnPayInAdvanceEntitlements = (0, import_react33.useMemo)(
15183
15747
  () => addOnUsageBasedEntitlements.filter(
15184
15748
  (entitlement) => entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */
15185
15749
  ),
15186
15750
  [addOnUsageBasedEntitlements]
15187
15751
  );
15188
- const [promoCode, setPromoCode] = (0, import_react31.useState)(null);
15189
- const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react31.useState)(false);
15190
- const willTrialWithoutPaymentMethod = (0, import_react31.useMemo)(
15752
+ const [promoCode, setPromoCode] = (0, import_react33.useState)(null);
15753
+ const [isPaymentMethodRequired, setIsPaymentMethodRequired] = (0, import_react33.useState)(false);
15754
+ const willTrialWithoutPaymentMethod = (0, import_react33.useMemo)(
15191
15755
  () => shouldTrial && !trialPaymentMethodRequired,
15192
15756
  [shouldTrial, trialPaymentMethodRequired]
15193
15757
  );
15194
- const isSelectedPlanTrialable = isHydratedPlan(selectedPlan) && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
15195
- const checkoutStages = (0, import_react31.useMemo)(() => {
15758
+ const isSelectedPlanTrialable = selectedPlan && selectedPlan.isTrialable && selectedPlan.companyCanTrial;
15759
+ const checkoutStages = (0, import_react33.useMemo)(() => {
15196
15760
  const stages = [];
15197
15761
  if (availablePlans.length > 0) {
15198
15762
  stages.push({
@@ -15259,7 +15823,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15259
15823
  creditBundles,
15260
15824
  isPaymentMethodRequired
15261
15825
  ]);
15262
- const [checkoutStage, setCheckoutStage] = (0, import_react31.useState)(() => {
15826
+ const [checkoutStage, setCheckoutStage] = (0, import_react33.useState)(() => {
15263
15827
  if (checkoutState?.addOnId) {
15264
15828
  return "addons";
15265
15829
  }
@@ -15277,7 +15841,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15277
15841
  }
15278
15842
  return "plan";
15279
15843
  });
15280
- const handlePreviewCheckout = (0, import_react31.useCallback)(
15844
+ const handlePreviewCheckout = (0, import_react33.useCallback)(
15281
15845
  async (updates) => {
15282
15846
  const period = updates.period || planPeriod;
15283
15847
  const plan = updates.plan || selectedPlan;
@@ -15401,28 +15965,17 @@ var CheckoutDialog = ({ top = 0 }) => {
15401
15965
  promoCode
15402
15966
  ]
15403
15967
  );
15404
- const selectPlan = (0, import_react31.useCallback)(
15968
+ const selectPlan = (0, import_react33.useCallback)(
15405
15969
  (updates) => {
15406
15970
  const plan = updates.plan;
15407
15971
  const period = updates.period || planPeriod;
15408
- const entitlements = plan.entitlements.reduce(
15409
- (acc, entitlement) => {
15410
- if (entitlement.priceBehavior && (period === "month" && entitlement.meteredMonthlyPrice || period === "year" && entitlement.meteredYearlyPrice)) {
15411
- const allocation = entitlement.valueNumeric || 0;
15412
- acc.push({
15413
- ...entitlement,
15414
- allocation,
15415
- usage: 0,
15416
- quantity: allocation
15417
- });
15418
- }
15419
- return acc;
15420
- },
15972
+ const updatedUsageBasedEntitlements = plan.entitlements.reduce(
15973
+ createActiveUsageBasedEntitlementsReducer(currentEntitlements, period),
15421
15974
  []
15422
15975
  );
15423
15976
  if (plan.id !== selectedPlan?.id) {
15424
15977
  setSelectedPlan(plan);
15425
- setUsageBasedEntitlements(entitlements);
15978
+ setUsageBasedEntitlements(updatedUsageBasedEntitlements);
15426
15979
  }
15427
15980
  const updatedShouldTrial = updates.shouldTrial ?? shouldTrial;
15428
15981
  setShouldTrial(updatedShouldTrial);
@@ -15442,7 +15995,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15442
15995
  addOns: [],
15443
15996
  payInAdvanceEntitlements: []
15444
15997
  } : {
15445
- payInAdvanceEntitlements: entitlements.filter(
15998
+ payInAdvanceEntitlements: updatedUsageBasedEntitlements.filter(
15446
15999
  ({ priceBehavior }) => priceBehavior === "pay_in_advance" /* PayInAdvance */
15447
16000
  )
15448
16001
  }
@@ -15451,12 +16004,13 @@ var CheckoutDialog = ({ top = 0 }) => {
15451
16004
  [
15452
16005
  selectedPlan?.id,
15453
16006
  planPeriod,
16007
+ currentEntitlements,
15454
16008
  shouldTrial,
15455
16009
  willTrialWithoutPaymentMethod,
15456
16010
  handlePreviewCheckout
15457
16011
  ]
15458
16012
  );
15459
- const changePlanPeriod = (0, import_react31.useCallback)(
16013
+ const changePlanPeriod = (0, import_react33.useCallback)(
15460
16014
  (period) => {
15461
16015
  if (period !== planPeriod) {
15462
16016
  setPlanPeriod(period);
@@ -15465,7 +16019,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15465
16019
  },
15466
16020
  [planPeriod, setPlanPeriod, handlePreviewCheckout]
15467
16021
  );
15468
- const toggleAddOn = (0, import_react31.useCallback)(
16022
+ const toggleAddOn = (0, import_react33.useCallback)(
15469
16023
  (id) => {
15470
16024
  setAddOns((prev2) => {
15471
16025
  const updated = prev2.map((addOn) => ({
@@ -15492,7 +16046,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15492
16046
  },
15493
16047
  [handlePreviewCheckout]
15494
16048
  );
15495
- const updateUsageBasedEntitlementQuantity = (0, import_react31.useCallback)(
16049
+ const updateUsageBasedEntitlementQuantity = (0, import_react33.useCallback)(
15496
16050
  (id, updatedQuantity) => {
15497
16051
  setUsageBasedEntitlements((prev2) => {
15498
16052
  const updated = prev2.map(
@@ -15511,7 +16065,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15511
16065
  },
15512
16066
  [handlePreviewCheckout]
15513
16067
  );
15514
- const updateCreditBundleCount = (0, import_react31.useCallback)(
16068
+ const updateCreditBundleCount = (0, import_react33.useCallback)(
15515
16069
  (id, updatedCount) => {
15516
16070
  setCreditBundles((prev2) => {
15517
16071
  const updated = prev2.map(
@@ -15526,7 +16080,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15526
16080
  },
15527
16081
  [handlePreviewCheckout]
15528
16082
  );
15529
- const updateAddOnEntitlementQuantity = (0, import_react31.useCallback)(
16083
+ const updateAddOnEntitlementQuantity = (0, import_react33.useCallback)(
15530
16084
  (id, updatedQuantity) => {
15531
16085
  setAddOnUsageBasedEntitlements((prev2) => {
15532
16086
  const updated = prev2.map(
@@ -15543,18 +16097,24 @@ var CheckoutDialog = ({ top = 0 }) => {
15543
16097
  },
15544
16098
  [handlePreviewCheckout]
15545
16099
  );
15546
- const updatePromoCode = (0, import_react31.useCallback)(
16100
+ const updatePromoCode = (0, import_react33.useCallback)(
15547
16101
  async (code) => {
15548
16102
  handlePreviewCheckout({ promoCode: code });
15549
16103
  },
15550
16104
  [handlePreviewCheckout]
15551
16105
  );
15552
- (0, import_react31.useEffect)(() => {
16106
+ (0, import_react33.useEffect)(() => {
15553
16107
  if (selectedPlan) {
15554
16108
  selectPlan({ plan: selectedPlan, period: currentPeriod });
15555
16109
  }
15556
16110
  }, []);
15557
- (0, import_react31.useEffect)(() => {
16111
+ (0, import_react33.useEffect)(() => {
16112
+ const plan = availablePlans.find(
16113
+ (plan2) => checkoutState?.planId ? plan2.id === checkoutState.planId : plan2.current
16114
+ );
16115
+ setSelectedPlan(plan);
16116
+ }, [availablePlans, checkoutState?.planId]);
16117
+ (0, import_react33.useEffect)(() => {
15558
16118
  setAddOns((prevAddOns) => {
15559
16119
  return availableAddOns.filter((availAddOn) => {
15560
16120
  if (!selectedPlan) {
@@ -15575,8 +16135,8 @@ var CheckoutDialog = ({ top = 0 }) => {
15575
16135
  };
15576
16136
  });
15577
16137
  });
15578
- }, [availableAddOns, data?.addOnCompatibilities, selectedPlan]);
15579
- (0, import_react31.useEffect)(() => {
16138
+ }, [data?.addOnCompatibilities, availableAddOns, selectedPlan]);
16139
+ (0, import_react33.useEffect)(() => {
15580
16140
  if (charges) {
15581
16141
  checkoutRef.current?.scrollTo({
15582
16142
  top: 0,
@@ -15585,7 +16145,7 @@ var CheckoutDialog = ({ top = 0 }) => {
15585
16145
  });
15586
16146
  }
15587
16147
  }, [charges]);
15588
- (0, import_react31.useLayoutEffect)(() => {
16148
+ (0, import_react33.useLayoutEffect)(() => {
15589
16149
  contentRef.current?.scrollTo({
15590
16150
  top: 0,
15591
16151
  left: 0,
@@ -15789,11 +16349,11 @@ var CheckoutDialog = ({ top = 0 }) => {
15789
16349
  };
15790
16350
 
15791
16351
  // src/components/shared/payment-dialog/PaymentDialog.tsx
15792
- var import_react32 = require("react");
16352
+ var import_react34 = require("react");
15793
16353
  var import_jsx_runtime23 = require("react/jsx-runtime");
15794
16354
  var PaymentDialog = ({ top = 0 }) => {
15795
16355
  const { t: t2 } = useTranslation();
15796
- const contentRef = (0, import_react32.useRef)(null);
16356
+ const contentRef = (0, import_react34.useRef)(null);
15797
16357
  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Modal2, { size: "md", top, contentRef, children: [
15798
16358
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { $size: 18, children: t2("Edit payment method") }) }),
15799
16359
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PaymentMethodDetails, {})
@@ -15802,7 +16362,7 @@ var PaymentDialog = ({ top = 0 }) => {
15802
16362
 
15803
16363
  // src/components/shared/payment-form/PaymentForm.tsx
15804
16364
  var import_react_stripe_js = require("@stripe/react-stripe-js");
15805
- var import_react33 = require("react");
16365
+ var import_react35 = require("react");
15806
16366
 
15807
16367
  // src/components/shared/payment-form/styles.ts
15808
16368
  var Label = dt.label`
@@ -15864,17 +16424,14 @@ var PaymentForm = ({ onConfirm, financeData }) => {
15864
16424
  const stripe = (0, import_react_stripe_js.useStripe)();
15865
16425
  const elements = (0, import_react_stripe_js.useElements)();
15866
16426
  const { data } = useEmbed();
15867
- const [email, setEmail] = (0, import_react33.useState)("");
15868
- const [message, setMessage] = (0, import_react33.useState)();
15869
- const [isLoading, setIsLoading] = (0, import_react33.useState)(false);
15870
- const [isConfirmed, setIsConfirmed] = (0, import_react33.useState)(false);
15871
- const [isPaymentComplete, setIsPaymentComplete] = (0, import_react33.useState)(false);
15872
- const [isAddressComplete, setIsAddressComplete] = (0, import_react33.useState)(() => {
15873
- if (!isCheckoutData(data)) {
15874
- return true;
15875
- }
16427
+ const [email, setEmail] = (0, import_react35.useState)("");
16428
+ const [message, setMessage] = (0, import_react35.useState)();
16429
+ const [isLoading, setIsLoading] = (0, import_react35.useState)(false);
16430
+ const [isConfirmed, setIsConfirmed] = (0, import_react35.useState)(false);
16431
+ const [isPaymentComplete, setIsPaymentComplete] = (0, import_react35.useState)(false);
16432
+ const [isAddressComplete, setIsAddressComplete] = (0, import_react35.useState)(() => {
15876
16433
  const shouldCollectAddress = shouldCollectBillingAddress(
15877
- data.checkoutSettings.collectAddress,
16434
+ data?.checkoutSettings.collectAddress ?? false,
15878
16435
  financeData
15879
16436
  );
15880
16437
  return !shouldCollectAddress;
@@ -15933,7 +16490,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
15933
16490
  }
15934
16491
  }
15935
16492
  ) }),
15936
- stripe && isCheckoutData(data) && data.checkoutSettings.collectEmail && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
16493
+ stripe && data?.checkoutSettings.collectEmail && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Box, { "data-field": "name", $marginBottom: "1.5rem", $verticalAlign: "top", children: [
15937
16494
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { htmlFor: "email", children: "Email" }),
15938
16495
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
15939
16496
  Input2,
@@ -15947,16 +16504,16 @@ var PaymentForm = ({ onConfirm, financeData }) => {
15947
16504
  }
15948
16505
  )
15949
16506
  ] }),
15950
- isCheckoutData(data) && (shouldCollectBillingAddress(
15951
- data.checkoutSettings.collectAddress,
16507
+ (shouldCollectBillingAddress(
16508
+ data?.checkoutSettings.collectAddress ?? false,
15952
16509
  financeData
15953
- ) || data.checkoutSettings.collectPhone) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
16510
+ ) || data?.checkoutSettings.collectPhone) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Box, { $marginBottom: "3.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
15954
16511
  import_react_stripe_js.AddressElement,
15955
16512
  {
15956
16513
  options: {
15957
16514
  mode: "billing",
15958
16515
  fields: {
15959
- phone: data.checkoutSettings.collectPhone ? "always" : "never"
16516
+ phone: data?.checkoutSettings.collectPhone ? "always" : "never"
15960
16517
  }
15961
16518
  },
15962
16519
  id: "address-element",
@@ -15984,7 +16541,7 @@ var PaymentForm = ({ onConfirm, financeData }) => {
15984
16541
  };
15985
16542
 
15986
16543
  // src/components/shared/period-toggle/PeriodToggle.tsx
15987
- var import_react34 = require("react");
16544
+ var import_react36 = require("react");
15988
16545
  var import_jsx_runtime25 = require("react/jsx-runtime");
15989
16546
  var PeriodToggle = ({
15990
16547
  options,
@@ -15995,7 +16552,7 @@ var PeriodToggle = ({
15995
16552
  const { t: t2 } = useTranslation();
15996
16553
  const { settings } = useEmbed();
15997
16554
  const isLightBackground = useIsLightBackground();
15998
- const savingsPercentage = (0, import_react34.useMemo)(() => {
16555
+ const savingsPercentage = (0, import_react36.useMemo)(() => {
15999
16556
  if (selectedPlan) {
16000
16557
  const monthlyBillingPrice = getPlanPrice(selectedPlan, "month");
16001
16558
  const yearlyBillingPrice = getPlanPrice(selectedPlan, "year");
@@ -16008,6 +16565,7 @@ var PeriodToggle = ({
16008
16565
  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
16009
16566
  Flex,
16010
16567
  {
16568
+ "data-testid": "sch-period-toggle",
16011
16569
  $margin: 0,
16012
16570
  $backgroundColor: settings.theme.card.background,
16013
16571
  $borderWidth: "1px",
@@ -16022,9 +16580,11 @@ var PeriodToggle = ({
16022
16580
  },
16023
16581
  children: options.map((option) => {
16024
16582
  const element = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
16025
- Flex,
16583
+ Button,
16026
16584
  {
16027
- tabIndex: 0,
16585
+ "data-testid": "sch-period-toggle-button",
16586
+ $size: "sm",
16587
+ $variant: "text",
16028
16588
  onClick: () => onSelect(option),
16029
16589
  onKeyDown: (event) => {
16030
16590
  if (event.key === "Enter" || event.key === " ") {
@@ -16032,19 +16592,22 @@ var PeriodToggle = ({
16032
16592
  onSelect(option);
16033
16593
  }
16034
16594
  },
16035
- $justifyContent: "center",
16036
- $alignItems: "center",
16037
- $flexBasis: "50%",
16038
- $whiteSpace: "nowrap",
16039
- $padding: "0.75rem 1rem",
16040
- ...option === selectedOption && {
16041
- $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
16595
+ style: {
16596
+ flexBasis: "50%",
16597
+ textDecoration: "none",
16598
+ whiteSpace: "nowrap",
16599
+ borderRadius: "2.5rem",
16600
+ ...option === selectedOption && {
16601
+ backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
16602
+ }
16042
16603
  },
16043
- $borderRadius: "2.5rem",
16044
16604
  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
16045
16605
  Text,
16046
16606
  {
16047
- style: { flexShrink: 0 },
16607
+ style: {
16608
+ flexShrink: 0,
16609
+ color: settings.theme.typography.text.color
16610
+ },
16048
16611
  $size: 15,
16049
16612
  $weight: option === selectedOption ? 600 : 400,
16050
16613
  children: t2("Billed", { period: adjectify(option) })
@@ -16053,7 +16616,7 @@ var PeriodToggle = ({
16053
16616
  },
16054
16617
  option
16055
16618
  );
16056
- if (option === "year" && savingsPercentage > 0) {
16619
+ if (option === "year") {
16057
16620
  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
16058
16621
  Tooltip,
16059
16622
  {
@@ -16075,10 +16638,10 @@ var PeriodToggle = ({
16075
16638
  };
16076
16639
 
16077
16640
  // src/components/shared/pricing-tiers-tooltip/PricingTiersTooltip.tsx
16078
- var import_react36 = require("react");
16641
+ var import_react38 = require("react");
16079
16642
 
16080
16643
  // src/components/shared/pricing-tiers-tooltip/PriceText.tsx
16081
- var import_react35 = require("react");
16644
+ var import_react37 = require("react");
16082
16645
  var import_jsx_runtime26 = require("react/jsx-runtime");
16083
16646
  var PriceText = ({
16084
16647
  feature,
@@ -16088,7 +16651,7 @@ var PriceText = ({
16088
16651
  perUnitPrice = 0
16089
16652
  }) => {
16090
16653
  const { settings } = useEmbed();
16091
- const text = (0, import_react35.useMemo)(() => {
16654
+ const text = (0, import_react37.useMemo)(() => {
16092
16655
  if (!flatAmount && perUnitPrice) {
16093
16656
  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
16094
16657
  formatCurrency(perUnitPrice, currency),
@@ -16136,19 +16699,22 @@ var PricingTiersTooltip = ({
16136
16699
  const { t: t2 } = useTranslation();
16137
16700
  const { settings } = useEmbed();
16138
16701
  const isLightBackground = useIsLightBackground();
16139
- const tiers = (0, import_react36.useMemo)(() => {
16140
- let start = 1;
16141
- return priceTiers.map((tier) => {
16142
- const { upTo, ...rest } = tier;
16143
- const end = upTo ?? Infinity;
16144
- const mapped = {
16145
- ...rest,
16146
- from: start,
16147
- to: end
16148
- };
16149
- start = end + 1;
16150
- return mapped;
16151
- });
16702
+ const { tiers } = (0, import_react38.useMemo)(() => {
16703
+ return priceTiers.reduce(
16704
+ (acc, tier) => {
16705
+ const end = tier.upTo ?? Infinity;
16706
+ acc.tiers.push({
16707
+ flatAmount: tier.flatAmount ?? void 0,
16708
+ perUnitPrice: tier.perUnitPrice ?? void 0,
16709
+ perUnitPriceDecimal: tier.perUnitPriceDecimal ?? void 0,
16710
+ from: acc.start,
16711
+ to: end
16712
+ });
16713
+ acc.start = end + 1;
16714
+ return acc;
16715
+ },
16716
+ { start: 1, tiers: [] }
16717
+ );
16152
16718
  }, [priceTiers]);
16153
16719
  if (!priceTiers.length) {
16154
16720
  return null;
@@ -16224,13 +16790,13 @@ var PricingTiersTooltip = ({
16224
16790
  };
16225
16791
 
16226
16792
  // src/components/shared/tiered-pricing-details/TieredPricingDetails.tsx
16227
- var import_react37 = require("react");
16793
+ var import_react39 = require("react");
16228
16794
  var TieredPricingDetails = ({
16229
16795
  entitlement,
16230
16796
  period
16231
16797
  }) => {
16232
16798
  const { t: t2 } = useTranslation();
16233
- const { currency, flatAmount, perUnitPrice, upTo } = (0, import_react37.useMemo)(() => {
16799
+ const { currency, flatAmount, perUnitPrice, upTo } = (0, import_react39.useMemo)(() => {
16234
16800
  const { currency: currency2, priceTier } = getEntitlementPrice(entitlement, period) || {};
16235
16801
  const { flatAmount: flatAmount2, perUnitPrice: perUnitPrice2, perUnitPriceDecimal, upTo: upTo2 } = priceTier?.[0] || {};
16236
16802
  return {
@@ -16278,36 +16844,32 @@ var TieredPricingDetails = ({
16278
16844
  };
16279
16845
 
16280
16846
  // src/components/shared/unsubscribe-dialog/UnsubscribeDialog.tsx
16281
- var import_react38 = require("react");
16847
+ var import_react40 = require("react");
16282
16848
  var import_jsx_runtime28 = require("react/jsx-runtime");
16283
16849
  var UnsubscribeDialog = ({ top = 0 }) => {
16284
16850
  const { t: t2 } = useTranslation();
16285
16851
  const { data, setCheckoutState } = useEmbed();
16286
- const contentRef = (0, import_react38.useRef)(null);
16287
- const [error, setError] = (0, import_react38.useState)();
16288
- const [isLoading, setIsLoading] = (0, import_react38.useState)(false);
16289
- const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = (0, import_react38.useMemo)(() => {
16290
- if (isCheckoutData(data)) {
16291
- return {
16292
- planPeriod: data.company?.plan?.planPeriod || "month",
16293
- currentPlan: data.company?.plan,
16294
- currentAddOns: data.company?.addOns || [],
16295
- featureUsage: data.featureUsage,
16296
- cancelDate: new Date(
16297
- data.subscription?.cancelAt || data.upcomingInvoice?.dueDate || Date.now()
16298
- )
16299
- };
16300
- }
16852
+ const contentRef = (0, import_react40.useRef)(null);
16853
+ const [error, setError] = (0, import_react40.useState)();
16854
+ const [isLoading, setIsLoading] = (0, import_react40.useState)(false);
16855
+ const { planPeriod, currentPlan, currentAddOns, featureUsage, cancelDate } = (0, import_react40.useMemo)(() => {
16856
+ const cancelDate2 = data?.subscription?.cancelAt || data?.upcomingInvoice?.dueDate;
16301
16857
  return {
16302
- planPeriod: "month",
16303
- currentPlan: void 0,
16304
- currentAddOns: [],
16305
- featureUsage: void 0,
16306
- cancelDate: /* @__PURE__ */ new Date()
16858
+ planPeriod: data?.company?.plan?.planPeriod || "month",
16859
+ currentPlan: data?.company?.plan,
16860
+ currentAddOns: data?.company?.addOns || [],
16861
+ featureUsage: data?.featureUsage,
16862
+ cancelDate: cancelDate2 ? new Date(cancelDate2) : /* @__PURE__ */ new Date()
16307
16863
  };
16308
- }, [data]);
16864
+ }, [
16865
+ data?.company?.addOns,
16866
+ data?.company?.plan,
16867
+ data?.featureUsage,
16868
+ data?.subscription?.cancelAt,
16869
+ data?.upcomingInvoice?.dueDate
16870
+ ]);
16309
16871
  const { plans: availablePlans, addOns: availableAddOns } = useAvailablePlans(planPeriod);
16310
- const selectedPlan = (0, import_react38.useMemo)(
16872
+ const selectedPlan = (0, import_react40.useMemo)(
16311
16873
  () => availablePlans.find((plan) => plan.id === currentPlan?.id),
16312
16874
  [currentPlan?.id, availablePlans]
16313
16875
  );
@@ -16316,7 +16878,7 @@ var UnsubscribeDialog = ({ top = 0 }) => {
16316
16878
  createActiveUsageBasedEntitlementsReducer(currentEntitlements, planPeriod),
16317
16879
  []
16318
16880
  );
16319
- const addOns = (0, import_react38.useMemo)(
16881
+ const addOns = (0, import_react40.useMemo)(
16320
16882
  () => availableAddOns.map((available) => ({
16321
16883
  ...available,
16322
16884
  isSelected: currentAddOns.some((current) => available.id === current.id) ?? false
@@ -16580,31 +17142,36 @@ var StyledViewport = dt.div.withConfig({
16580
17142
 
16581
17143
  // src/components/layout/viewport/Viewport.tsx
16582
17144
  var import_jsx_runtime32 = require("react/jsx-runtime");
16583
- var Viewport = (0, import_react39.forwardRef)(
17145
+ var Viewport = (0, import_react41.forwardRef)(
16584
17146
  ({ children, portal, ...props }, ref) => {
17147
+ const portalRef = (0, import_react41.useRef)(portal || document.body);
16585
17148
  const { data, layout, settings } = useEmbed();
16586
- const [top, setTop] = (0, import_react39.useState)(0);
16587
- const { canCheckout, isBadgeVisible } = (0, import_react39.useMemo)(() => {
17149
+ const [top, setTop] = (0, import_react41.useState)(0);
17150
+ const { canCheckout, isBadgeVisible } = (0, import_react41.useMemo)(() => {
16588
17151
  return {
16589
17152
  canCheckout: data?.capabilities?.checkout ?? true,
16590
17153
  isBadgeVisible: !data?.capabilities?.badgeVisibility || settings.badge?.visibility !== "hidden"
16591
17154
  };
16592
- }, [data, settings]);
16593
- (0, import_react39.useLayoutEffect)(() => {
16594
- const parent = portal || document.body;
17155
+ }, [
17156
+ data?.capabilities?.badgeVisibility,
17157
+ data?.capabilities?.checkout,
17158
+ settings.badge?.visibility
17159
+ ]);
17160
+ (0, import_react41.useLayoutEffect)(() => {
17161
+ const portal2 = portalRef.current;
16595
17162
  const setModalY = (0, import_debounce3.default)(() => {
16596
17163
  const value = Math.abs(
16597
- (parent === document.body ? window.scrollY : parent.scrollTop) ?? 0
17164
+ (portal2 === document.body ? window.scrollY : portal2.scrollTop) ?? 0
16598
17165
  );
16599
17166
  setTop(value);
16600
17167
  }, 250);
16601
- parent.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
17168
+ portal2.style.overflow = layout === "checkout" || layout === "unsubscribe" || layout === "payment" ? "hidden" : "";
16602
17169
  window.addEventListener("scroll", setModalY);
16603
17170
  return () => {
16604
17171
  window.removeEventListener("scroll", setModalY);
16605
- parent.style.overflow = "";
17172
+ portal2.style.overflow = "";
16606
17173
  };
16607
- }, [portal, layout]);
17174
+ }, [layout]);
16608
17175
  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
16609
17176
  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(StyledViewport, { ref, ...props, children: [
16610
17177
  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(RenderLayout, { children }),
@@ -16637,7 +17204,7 @@ var resolveDesignProps = (props) => {
16637
17204
  }
16638
17205
  };
16639
17206
  };
16640
- var ButtonElement = (0, import_react40.forwardRef)(({ children, className, ...rest }, ref) => {
17207
+ var ButtonElement = (0, import_react42.forwardRef)(({ children, className, ...rest }, ref) => {
16641
17208
  const props = resolveDesignProps(rest);
16642
17209
  const buttonStyles2 = {
16643
17210
  primary: {
@@ -16682,10 +17249,10 @@ var ButtonElement = (0, import_react40.forwardRef)(({ children, className, ...re
16682
17249
  ButtonElement.displayName = "Button";
16683
17250
 
16684
17251
  // src/components/elements/included-features/IncludedFeatures.tsx
16685
- var import_react42 = require("react");
17252
+ var import_react44 = require("react");
16686
17253
 
16687
17254
  // src/components/elements/included-features/UsageDetails.tsx
16688
- var import_react41 = require("react");
17255
+ var import_react43 = require("react");
16689
17256
  var import_jsx_runtime34 = require("react/jsx-runtime");
16690
17257
  var UsageDetails = ({
16691
17258
  entitlement,
@@ -16704,24 +17271,17 @@ var UsageDetails = ({
16704
17271
  } = entitlement;
16705
17272
  const { t: t2 } = useTranslation();
16706
17273
  const { data } = useEmbed();
16707
- const { period, showCredits } = (0, import_react41.useMemo)(() => {
16708
- const showCredits2 = data?.showCredits ?? true;
16709
- if (isCheckoutData(data)) {
16710
- return {
16711
- period: data.company?.plan?.planPeriod || void 0,
16712
- showCredits: showCredits2
16713
- };
16714
- }
17274
+ const { period, showCredits } = (0, import_react43.useMemo)(() => {
16715
17275
  return {
16716
- period: void 0,
16717
- showCredits: showCredits2
17276
+ period: data?.company?.plan?.planPeriod || void 0,
17277
+ showCredits: data?.showCredits ?? true
16718
17278
  };
16719
- }, [data]);
16720
- const { billingPrice, cost, currentTier } = (0, import_react41.useMemo)(
17279
+ }, [data?.company?.plan?.planPeriod, data?.showCredits]);
17280
+ const { billingPrice, cost, currentTier } = (0, import_react43.useMemo)(
16721
17281
  () => getUsageDetails(entitlement, period),
16722
17282
  [entitlement, period]
16723
17283
  );
16724
- const text = (0, import_react41.useMemo)(() => {
17284
+ const text = (0, import_react43.useMemo)(() => {
16725
17285
  if (!feature) {
16726
17286
  return;
16727
17287
  }
@@ -16794,10 +17354,10 @@ var UsageDetails = ({
16794
17354
  priceBehavior,
16795
17355
  softLimit,
16796
17356
  billingPrice,
16797
- currentTier?.to,
17357
+ currentTier,
16798
17358
  showCredits
16799
17359
  ]);
16800
- const usageText = (0, import_react41.useMemo)(() => {
17360
+ const usageText = (0, import_react43.useMemo)(() => {
16801
17361
  if (!feature) {
16802
17362
  return;
16803
17363
  }
@@ -16806,7 +17366,7 @@ var UsageDetails = ({
16806
17366
  let index = 0;
16807
17367
  if (priceBehavior === "pay_in_advance" /* PayInAdvance */ && typeof period === "string" && typeof price === "number") {
16808
17368
  acc.push(
16809
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
17369
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react43.Fragment, { children: [
16810
17370
  formatCurrency(price, currency),
16811
17371
  "/",
16812
17372
  packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
@@ -16821,7 +17381,7 @@ var UsageDetails = ({
16821
17381
  index += 1;
16822
17382
  } else if ((priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "overage" /* Overage */ || priceBehavior === "tier" /* Tiered */ || priceBehavior === "credit_burndown" /* Credit */) && typeof usage === "number") {
16823
17383
  acc.push(
16824
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
17384
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react43.Fragment, { children: [
16825
17385
  usage,
16826
17386
  " ",
16827
17387
  getFeatureName(feature, usage),
@@ -16833,14 +17393,14 @@ var UsageDetails = ({
16833
17393
  }
16834
17394
  if (typeof cost === "number" && cost > 0) {
16835
17395
  acc.push(
16836
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
17396
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react43.Fragment, { children: [
16837
17397
  acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: " \u2022 " }),
16838
17398
  formatCurrency(cost, currency)
16839
17399
  ] }, index)
16840
17400
  );
16841
17401
  index += 1;
16842
17402
  if (feature.featureType === "trait" /* Trait */ && typeof period === "string") {
16843
- acc.push(/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
17403
+ acc.push(/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react43.Fragment, { children: [
16844
17404
  "/",
16845
17405
  shortenPeriod(period)
16846
17406
  ] }, index));
@@ -16849,7 +17409,7 @@ var UsageDetails = ({
16849
17409
  }
16850
17410
  if (metricResetAt) {
16851
17411
  acc.push(
16852
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react41.Fragment, { children: [
17412
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react43.Fragment, { children: [
16853
17413
  acc.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: " \u2022 " }),
16854
17414
  t2("Resets", {
16855
17415
  date: toPrettyDate(metricResetAt, {
@@ -16942,40 +17502,38 @@ function resolveDesignProps2(props) {
16942
17502
  visibleFeatures: props.visibleFeatures
16943
17503
  };
16944
17504
  }
16945
- var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, ref) => {
17505
+ var IncludedFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, ref) => {
16946
17506
  const props = resolveDesignProps2(rest);
16947
17507
  const { t: t2 } = useTranslation();
16948
17508
  const { data, settings } = useEmbed();
16949
- const elements = (0, import_react42.useRef)([]);
16950
- const shouldWrapChildren = useWrapChildren(elements.current);
17509
+ const elementsRef = (0, import_react44.useRef)([]);
17510
+ const shouldWrapChildren = useWrapChildren(elementsRef);
16951
17511
  const isLightBackground = useIsLightBackground();
16952
- const [showCount, setShowCount] = (0, import_react42.useState)(VISIBLE_ENTITLEMENT_COUNT);
16953
- const { plan, addOns, featureUsage } = (0, import_react42.useMemo)(() => {
16954
- if (isCheckoutData(data)) {
16955
- const orderedFeatureUsage = props.visibleFeatures?.reduce(
16956
- (acc, id) => {
16957
- const mappedFeatureUsage = data.featureUsage?.features.find(
16958
- (usage) => usage.feature?.id === id
16959
- );
16960
- if (mappedFeatureUsage) {
16961
- acc.push(mappedFeatureUsage);
16962
- }
16963
- return acc;
16964
- },
16965
- []
16966
- );
16967
- return {
16968
- plan: data.company?.plan,
16969
- addOns: data.company?.addOns || [],
16970
- featureUsage: orderedFeatureUsage || data.featureUsage?.features || []
16971
- };
16972
- }
17512
+ const [showCount, setShowCount] = (0, import_react44.useState)(VISIBLE_ENTITLEMENT_COUNT);
17513
+ const { plan, addOns, featureUsage } = (0, import_react44.useMemo)(() => {
17514
+ const orderedFeatureUsage = props.visibleFeatures?.reduce(
17515
+ (acc, id) => {
17516
+ const mappedFeatureUsage = data?.featureUsage?.features.find(
17517
+ (usage) => usage.feature?.id === id
17518
+ );
17519
+ if (mappedFeatureUsage) {
17520
+ acc.push(mappedFeatureUsage);
17521
+ }
17522
+ return acc;
17523
+ },
17524
+ []
17525
+ );
16973
17526
  return {
16974
- plan: void 0,
16975
- addOns: [],
16976
- featureUsage: []
17527
+ plan: data?.company?.plan,
17528
+ addOns: data?.company?.addOns || [],
17529
+ featureUsage: orderedFeatureUsage || data?.featureUsage?.features || []
16977
17530
  };
16978
- }, [props.visibleFeatures, data]);
17531
+ }, [
17532
+ props.visibleFeatures,
17533
+ data?.company?.plan,
17534
+ data?.company?.addOns,
17535
+ data?.featureUsage?.features
17536
+ ]);
16979
17537
  const featureListSize = featureUsage.length;
16980
17538
  const handleToggleShowAll = () => {
16981
17539
  setShowCount(
@@ -17005,7 +17563,7 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
17005
17563
  {
17006
17564
  ref: (el) => {
17007
17565
  if (el) {
17008
- elements.current.push(el);
17566
+ elementsRef.current.push(el);
17009
17567
  }
17010
17568
  },
17011
17569
  $flexWrap: "wrap",
@@ -17086,7 +17644,7 @@ var IncludedFeatures = (0, import_react42.forwardRef)(({ className, ...rest }, r
17086
17644
  IncludedFeatures.displayName = "IncludedFeatures";
17087
17645
 
17088
17646
  // src/components/elements/invoices/Invoices.tsx
17089
- var import_react43 = require("react");
17647
+ var import_react45 = require("react");
17090
17648
  var import_jsx_runtime36 = require("react/jsx-runtime");
17091
17649
  function resolveDesignProps3(props) {
17092
17650
  return {
@@ -17121,15 +17679,15 @@ function formatInvoices(invoices, options) {
17121
17679
  url: url || void 0
17122
17680
  }));
17123
17681
  }
17124
- var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref) => {
17682
+ var Invoices = (0, import_react45.forwardRef)(({ className, data, ...rest }, ref) => {
17125
17683
  const props = resolveDesignProps3(rest);
17126
17684
  const { t: t2 } = useTranslation();
17127
17685
  const { listInvoices, settings } = useEmbed();
17128
- const [isLoading, setIsLoading] = (0, import_react43.useState)(false);
17129
- const [error, setError] = (0, import_react43.useState)();
17130
- const [invoices, setInvoices] = (0, import_react43.useState)(() => formatInvoices(data));
17131
- const [listSize, setListSize] = (0, import_react43.useState)(props.limit.number);
17132
- const getInvoices = (0, import_react43.useCallback)(async () => {
17686
+ const [isLoading, setIsLoading] = (0, import_react45.useState)(false);
17687
+ const [error, setError] = (0, import_react45.useState)();
17688
+ const [invoices, setInvoices] = (0, import_react45.useState)(() => formatInvoices(data));
17689
+ const [listSize, setListSize] = (0, import_react45.useState)(props.limit.number);
17690
+ const getInvoices = (0, import_react45.useCallback)(async () => {
17133
17691
  try {
17134
17692
  setError(void 0);
17135
17693
  setIsLoading(true);
@@ -17148,10 +17706,10 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
17148
17706
  (prev2) => prev2 !== props.limit.number ? props.limit.number : MAX_VISIBLE_INVOICE_COUNT
17149
17707
  );
17150
17708
  };
17151
- (0, import_react43.useEffect)(() => {
17709
+ (0, import_react45.useEffect)(() => {
17152
17710
  getInvoices();
17153
17711
  }, [getInvoices]);
17154
- (0, import_react43.useEffect)(() => {
17712
+ (0, import_react45.useEffect)(() => {
17155
17713
  setInvoices(formatInvoices(data));
17156
17714
  }, [data]);
17157
17715
  if (invoices.length === 0) {
@@ -17231,7 +17789,7 @@ var Invoices = (0, import_react43.forwardRef)(({ className, data, ...rest }, ref
17231
17789
  Invoices.displayName = "Invoices";
17232
17790
 
17233
17791
  // src/components/elements/metered-features/MeteredFeatures.tsx
17234
- var import_react44 = require("react");
17792
+ var import_react46 = require("react");
17235
17793
 
17236
17794
  // src/components/elements/metered-features/Meter.tsx
17237
17795
  var import_jsx_runtime37 = require("react/jsx-runtime");
@@ -17431,51 +17989,37 @@ function resolveDesignProps4(props) {
17431
17989
  visibleFeatures: props.visibleFeatures
17432
17990
  };
17433
17991
  }
17434
- var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, ref) => {
17992
+ var MeteredFeatures = (0, import_react46.forwardRef)(({ className, ...rest }, ref) => {
17435
17993
  const props = resolveDesignProps4(rest);
17436
- const elements = (0, import_react44.useRef)([]);
17437
- const shouldWrapChildren = useWrapChildren(elements.current);
17994
+ const elementsRef = (0, import_react46.useRef)([]);
17995
+ const shouldWrapChildren = useWrapChildren(elementsRef);
17438
17996
  const { t: t2 } = useTranslation();
17439
17997
  const { data, settings, setCheckoutState } = useEmbed();
17440
17998
  const isLightBackground = useIsLightBackground();
17441
- const { period, meteredFeatures, creditGroups, showCredits } = (0, import_react44.useMemo)(() => {
17442
- const showCredits2 = data?.showCredits ?? true;
17443
- if (isCheckoutData(data)) {
17444
- const period2 = typeof data.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
17445
- const orderedFeatureUsage = props.visibleFeatures?.reduce(
17446
- (acc, id) => {
17447
- const mappedFeatureUsage = data.featureUsage?.features.find(
17448
- (usage) => usage.feature?.id === id
17449
- );
17450
- if (mappedFeatureUsage) {
17451
- acc.push(mappedFeatureUsage);
17452
- }
17453
- return acc;
17454
- },
17455
- []
17456
- );
17457
- return {
17458
- period: period2,
17459
- meteredFeatures: (orderedFeatureUsage || data.featureUsage?.features || []).filter(
17460
- ({ feature }) => feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */
17461
- ),
17462
- creditGroups: groupCreditGrants(data.creditGrants, {
17463
- groupBy: "credit"
17464
- }),
17465
- showCredits: showCredits2
17466
- };
17467
- }
17468
- return {
17469
- period: void 0,
17470
- meteredFeatures: [],
17471
- creditGroups: [],
17472
- showCredits: showCredits2
17473
- };
17474
- }, [props.visibleFeatures, data]);
17475
- const [creditVisibility, setCreditVisibility] = (0, import_react44.useState)(
17999
+ const meteredFeatures = (0, import_react46.useMemo)(() => {
18000
+ const orderedFeatureUsage = props.visibleFeatures?.reduce(
18001
+ (acc, id) => {
18002
+ const mappedFeatureUsage = data?.featureUsage?.features.find(
18003
+ (usage) => usage.feature?.id === id
18004
+ );
18005
+ if (mappedFeatureUsage) {
18006
+ acc.push(mappedFeatureUsage);
18007
+ }
18008
+ return acc;
18009
+ },
18010
+ []
18011
+ );
18012
+ return (orderedFeatureUsage || data?.featureUsage?.features || []).filter(
18013
+ ({ feature }) => feature?.featureType === "event" /* Event */ || feature?.featureType === "trait" /* Trait */
18014
+ );
18015
+ }, [props.visibleFeatures, data?.featureUsage?.features]);
18016
+ const creditGroups = groupCreditGrants(data?.creditGrants || [], {
18017
+ groupBy: "credit"
18018
+ });
18019
+ const [creditVisibility, setCreditVisibility] = (0, import_react46.useState)(
17476
18020
  creditGroups.map(({ id }) => ({ id, isExpanded: false }))
17477
18021
  );
17478
- const toggleBalanceDetails = (0, import_react44.useCallback)((id) => {
18022
+ const toggleBalanceDetails = (0, import_react46.useCallback)((id) => {
17479
18023
  setCreditVisibility(
17480
18024
  (prev2) => prev2.map(
17481
18025
  (item) => item.id === id ? { ...item, isExpanded: !item.isExpanded } : item
@@ -17486,6 +18030,9 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
17486
18030
  if (!shouldShowFeatures) {
17487
18031
  return null;
17488
18032
  }
18033
+ const period = typeof data?.company?.plan?.planPeriod === "string" ? data.company?.plan?.planPeriod : void 0;
18034
+ const canCheckout = data?.capabilities?.checkout ?? false;
18035
+ const showCredits = data?.showCredits ?? true;
17489
18036
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Container2, { ref, className, children: [
17490
18037
  meteredFeatures.reduce((acc, entitlement, index) => {
17491
18038
  if (!entitlement.feature) {
@@ -17512,7 +18059,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
17512
18059
  {
17513
18060
  ref: (el) => {
17514
18061
  if (el) {
17515
- elements.current.push(el);
18062
+ elementsRef.current.push(el);
17516
18063
  }
17517
18064
  },
17518
18065
  $flexWrap: "wrap",
@@ -17563,7 +18110,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
17563
18110
  usageDetails
17564
18111
  }
17565
18112
  ),
17566
- priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
18113
+ canCheckout && priceBehavior === "pay_in_advance" /* PayInAdvance */ && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
17567
18114
  Button,
17568
18115
  {
17569
18116
  type: "button",
@@ -17618,7 +18165,7 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
17618
18165
  )]
17619
18166
  }
17620
18167
  ),
17621
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
18168
+ canCheckout && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
17622
18169
  Button,
17623
18170
  {
17624
18171
  type: "button",
@@ -17744,10 +18291,10 @@ var MeteredFeatures = (0, import_react44.forwardRef)(({ className, ...rest }, re
17744
18291
  MeteredFeatures.displayName = "MeteredFeatures";
17745
18292
 
17746
18293
  // src/components/elements/payment-method/PaymentMethod.tsx
17747
- var import_react46 = require("react");
18294
+ var import_react48 = require("react");
17748
18295
 
17749
18296
  // src/components/elements/payment-method/PaymentMethodElement.tsx
17750
- var import_react45 = require("react");
18297
+ var import_react47 = require("react");
17751
18298
  var import_jsx_runtime40 = require("react/jsx-runtime");
17752
18299
  var PaymentElement2 = ({
17753
18300
  iconName,
@@ -17867,7 +18414,7 @@ var PaymentListElement = ({
17867
18414
  }) => {
17868
18415
  const isLightBackground = useIsLightBackground();
17869
18416
  const { iconName, iconTitle, label, paymentLast4 } = getPaymentMethodData(paymentMethod);
17870
- const expirationDate = (0, import_react45.useMemo)(() => {
18417
+ const expirationDate = (0, import_react47.useMemo)(() => {
17871
18418
  const { cardExpMonth, cardExpYear } = paymentMethod;
17872
18419
  if (!cardExpMonth || !cardExpYear) {
17873
18420
  return;
@@ -17952,34 +18499,28 @@ var resolveDesignProps5 = (props) => {
17952
18499
  }
17953
18500
  };
17954
18501
  };
17955
- var PaymentMethod = (0, import_react46.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
18502
+ var PaymentMethod = (0, import_react48.forwardRef)(({ children, className, portal, allowEdit = true, ...rest }, ref) => {
17956
18503
  const props = resolveDesignProps5(rest);
17957
18504
  const { data, setLayout } = useEmbed();
17958
- const { paymentMethod, monthsToExpiration } = (0, import_react46.useMemo)(() => {
17959
- if (isCheckoutData(data)) {
17960
- const paymentMethod2 = data.subscription?.paymentMethod || data.company?.defaultPaymentMethod;
17961
- let monthsToExpiration2;
17962
- if (typeof paymentMethod2?.cardExpYear === "number" && typeof paymentMethod2?.cardExpMonth === "number") {
17963
- const now = /* @__PURE__ */ new Date();
17964
- const currentYear = now.getFullYear();
17965
- const currentMonth = now.getMonth();
17966
- const timeToExpiration = Math.round(
17967
- +new Date(paymentMethod2.cardExpYear, paymentMethod2.cardExpMonth - 1) - +new Date(currentYear, currentMonth)
17968
- );
17969
- monthsToExpiration2 = Math.round(
17970
- timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
17971
- );
17972
- }
17973
- return {
17974
- paymentMethod: paymentMethod2,
17975
- monthsToExpiration: monthsToExpiration2
17976
- };
18505
+ const { paymentMethod, monthsToExpiration } = (0, import_react48.useMemo)(() => {
18506
+ const paymentMethod2 = data?.subscription?.paymentMethod || data?.company?.defaultPaymentMethod;
18507
+ let monthsToExpiration2;
18508
+ if (typeof paymentMethod2?.cardExpYear === "number" && typeof paymentMethod2?.cardExpMonth === "number") {
18509
+ const now = /* @__PURE__ */ new Date();
18510
+ const currentYear = now.getFullYear();
18511
+ const currentMonth = now.getMonth();
18512
+ const timeToExpiration = Math.round(
18513
+ +new Date(paymentMethod2.cardExpYear, paymentMethod2.cardExpMonth - 1) - +new Date(currentYear, currentMonth)
18514
+ );
18515
+ monthsToExpiration2 = Math.round(
18516
+ timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
18517
+ );
17977
18518
  }
17978
18519
  return {
17979
- paymentMethod: void 0,
17980
- monthsToExpiration: void 0
18520
+ paymentMethod: paymentMethod2,
18521
+ monthsToExpiration: monthsToExpiration2
17981
18522
  };
17982
- }, [data]);
18523
+ }, [data?.company?.defaultPaymentMethod, data?.subscription?.paymentMethod]);
17983
18524
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
17984
18525
  PaymentMethodElement,
17985
18526
  {
@@ -18148,7 +18689,7 @@ var loadStripe = function loadStripe2() {
18148
18689
  };
18149
18690
 
18150
18691
  // src/components/elements/payment-method/PaymentMethodDetails.tsx
18151
- var import_react47 = require("react");
18692
+ var import_react49 = require("react");
18152
18693
  var import_jsx_runtime42 = require("react/jsx-runtime");
18153
18694
  var resolveDesignProps6 = () => {
18154
18695
  return {
@@ -18177,28 +18718,25 @@ var PaymentMethodDetails = ({
18177
18718
  updatePaymentMethod,
18178
18719
  deletePaymentMethod
18179
18720
  } = useEmbed();
18180
- const { defaultPaymentMethod, paymentMethods, subscription } = (0, import_react47.useMemo)(() => {
18181
- if (isCheckoutData(data)) {
18182
- return {
18183
- defaultPaymentMethod: data.company?.defaultPaymentMethod,
18184
- paymentMethods: data.company?.paymentMethods || [],
18185
- subscription: data.subscription
18186
- };
18187
- }
18721
+ const { defaultPaymentMethod, paymentMethods, subscription } = (0, import_react49.useMemo)(() => {
18188
18722
  return {
18189
- defaultPaymentMethod: void 0,
18190
- paymentMethods: [],
18191
- subscription: void 0
18723
+ defaultPaymentMethod: data?.company?.defaultPaymentMethod,
18724
+ paymentMethods: data?.company?.paymentMethods || [],
18725
+ subscription: data?.subscription
18192
18726
  };
18193
- }, [data]);
18727
+ }, [
18728
+ data?.company?.defaultPaymentMethod,
18729
+ data?.company?.paymentMethods,
18730
+ data?.subscription
18731
+ ]);
18194
18732
  const isLightBackground = useIsLightBackground();
18195
- const [isLoading, setIsLoading] = (0, import_react47.useState)(false);
18196
- const [error, setError] = (0, import_react47.useState)();
18197
- const [showPaymentForm, setShowPaymentForm] = (0, import_react47.useState)(false);
18198
- const [stripe, setStripe] = (0, import_react47.useState)(null);
18199
- const [setupIntent, setSetupIntent] = (0, import_react47.useState)();
18200
- const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react47.useState)(false);
18201
- const [currentPaymentMethod, setCurrentPaymentMethod] = (0, import_react47.useState)(subscription?.paymentMethod || defaultPaymentMethod);
18733
+ const [isLoading, setIsLoading] = (0, import_react49.useState)(false);
18734
+ const [error, setError] = (0, import_react49.useState)();
18735
+ const [showPaymentForm, setShowPaymentForm] = (0, import_react49.useState)(false);
18736
+ const [stripe, setStripe] = (0, import_react49.useState)(null);
18737
+ const [setupIntent, setSetupIntent] = (0, import_react49.useState)();
18738
+ const [showDifferentPaymentMethods, setShowDifferentPaymentMethods] = (0, import_react49.useState)(false);
18739
+ const [currentPaymentMethod, setCurrentPaymentMethod] = (0, import_react49.useState)(subscription?.paymentMethod || defaultPaymentMethod);
18202
18740
  const { isConfirming: isConfirmingPayment } = usePaymentConfirmation({
18203
18741
  stripe,
18204
18742
  clientSecret: confirmPaymentIntentProps?.clientSecret,
@@ -18211,7 +18749,7 @@ var PaymentMethodDetails = ({
18211
18749
  },
18212
18750
  autoConfirm: true
18213
18751
  });
18214
- const monthsToExpiration = (0, import_react47.useMemo)(() => {
18752
+ const monthsToExpiration = (0, import_react49.useMemo)(() => {
18215
18753
  let expiration;
18216
18754
  if (typeof currentPaymentMethod?.cardExpYear === "number" && typeof currentPaymentMethod?.cardExpMonth === "number") {
18217
18755
  const now = /* @__PURE__ */ new Date();
@@ -18234,7 +18772,7 @@ var PaymentMethodDetails = ({
18234
18772
  const toggleShowPaymentMethods = () => {
18235
18773
  setShowDifferentPaymentMethods((prev2) => !prev2);
18236
18774
  };
18237
- const initializePaymentMethod = (0, import_react47.useCallback)(async () => {
18775
+ const initializePaymentMethod = (0, import_react49.useCallback)(async () => {
18238
18776
  try {
18239
18777
  setIsLoading(true);
18240
18778
  const response = await createSetupIntent();
@@ -18250,7 +18788,7 @@ var PaymentMethodDetails = ({
18250
18788
  setIsLoading(false);
18251
18789
  }
18252
18790
  }, [t2, createSetupIntent]);
18253
- const handleUpdatePaymentMethod = (0, import_react47.useCallback)(
18791
+ const handleUpdatePaymentMethod = (0, import_react49.useCallback)(
18254
18792
  async (paymentMethodId) => {
18255
18793
  try {
18256
18794
  setIsLoading(true);
@@ -18272,7 +18810,7 @@ var PaymentMethodDetails = ({
18272
18810
  },
18273
18811
  [t2, setPaymentMethodId, updatePaymentMethod, onPaymentMethodSaved]
18274
18812
  );
18275
- const handleDeletePaymentMethod = (0, import_react47.useCallback)(
18813
+ const handleDeletePaymentMethod = (0, import_react49.useCallback)(
18276
18814
  async (paymentMethodId) => {
18277
18815
  try {
18278
18816
  setIsLoading(true);
@@ -18285,7 +18823,7 @@ var PaymentMethodDetails = ({
18285
18823
  },
18286
18824
  [t2, deletePaymentMethod]
18287
18825
  );
18288
- (0, import_react47.useEffect)(() => {
18826
+ (0, import_react49.useEffect)(() => {
18289
18827
  if (!stripe && setupIntent) {
18290
18828
  let publishableKey = setupIntent.publishableKey || setupIntent.schematicPublishableKey;
18291
18829
  const stripeOptions = {};
@@ -18297,7 +18835,7 @@ var PaymentMethodDetails = ({
18297
18835
  setStripe(stripePromise2);
18298
18836
  }
18299
18837
  }, [stripe, setupIntent]);
18300
- (0, import_react47.useEffect)(() => {
18838
+ (0, import_react49.useEffect)(() => {
18301
18839
  if (!setupIntent && (!currentPaymentMethod || showPaymentForm)) {
18302
18840
  initializePaymentMethod();
18303
18841
  }
@@ -18454,7 +18992,7 @@ var PaymentMethodDetails = ({
18454
18992
  };
18455
18993
 
18456
18994
  // src/components/elements/plan-manager/PlanManager.tsx
18457
- var import_react49 = require("react");
18995
+ var import_react51 = require("react");
18458
18996
 
18459
18997
  // src/components/elements/plan-manager/AddOn.tsx
18460
18998
  var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -18478,7 +19016,7 @@ var AddOn = ({ addOn, currency, layout }) => {
18478
19016
  };
18479
19017
 
18480
19018
  // src/components/elements/plan-manager/UsageDetails.tsx
18481
- var import_react48 = require("react");
19019
+ var import_react50 = require("react");
18482
19020
  var import_jsx_runtime44 = require("react/jsx-runtime");
18483
19021
  var UsageDetails2 = ({
18484
19022
  entitlement,
@@ -18493,18 +19031,18 @@ var UsageDetails2 = ({
18493
19031
  limit,
18494
19032
  amount = 0,
18495
19033
  cost = 0
18496
- } = (0, import_react48.useMemo)(
19034
+ } = (0, import_react50.useMemo)(
18497
19035
  () => getUsageDetails(entitlement, period),
18498
19036
  [entitlement, period]
18499
19037
  );
18500
- const description = (0, import_react48.useMemo)(() => {
19038
+ const description = (0, import_react50.useMemo)(() => {
18501
19039
  const acc = [];
18502
19040
  let index = 0;
18503
19041
  if (entitlement.priceBehavior === "overage" /* Overage */) {
18504
19042
  acc.push(
18505
- amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react48.Fragment, { children: t2("X additional", {
19043
+ amount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react50.Fragment, { children: t2("X additional", {
18506
19044
  amount
18507
- }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
19045
+ }) }, index) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react50.Fragment, { children: [
18508
19046
  t2("Additional"),
18509
19047
  ": "
18510
19048
  ] }, index)
@@ -18515,7 +19053,7 @@ var UsageDetails2 = ({
18515
19053
  if (entitlement.priceBehavior !== "tier" /* Tiered */ && entitlement.feature && typeof price === "number" && !amount) {
18516
19054
  const packageSize = billingPrice?.packageSize ?? 1;
18517
19055
  acc.push(
18518
- /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
19056
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react50.Fragment, { children: [
18519
19057
  formatCurrency(price, billingPrice?.currency),
18520
19058
  /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
18521
19059
  "/",
@@ -18536,7 +19074,7 @@ var UsageDetails2 = ({
18536
19074
  if (showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.planEntitlement?.consumptionRate && entitlement.planEntitlement?.valueCredit) {
18537
19075
  const creditAmount = entitlement.planEntitlement.consumptionRate * amount;
18538
19076
  acc.push(
18539
- creditAmount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
19077
+ creditAmount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react50.Fragment, { children: [
18540
19078
  creditAmount,
18541
19079
  " ",
18542
19080
  getFeatureName(
@@ -18545,7 +19083,7 @@ var UsageDetails2 = ({
18545
19083
  ),
18546
19084
  " ",
18547
19085
  t2("used")
18548
- ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react48.Fragment, { children: [
19086
+ ] }, index) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react50.Fragment, { children: [
18549
19087
  entitlement.planEntitlement.consumptionRate,
18550
19088
  " ",
18551
19089
  getFeatureName(
@@ -18643,7 +19181,7 @@ var resolveDesignProps7 = (props) => {
18643
19181
  }
18644
19182
  };
18645
19183
  };
18646
- var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal, ...rest }, ref) => {
19184
+ var PlanManager = (0, import_react51.forwardRef)(({ children, className, portal, ...rest }, ref) => {
18647
19185
  const props = resolveDesignProps7(rest);
18648
19186
  const { t: t2 } = useTranslation();
18649
19187
  const { data, settings, setCheckoutState } = useEmbed();
@@ -18661,20 +19199,12 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
18661
19199
  showCredits,
18662
19200
  showZeroPriceAsFree,
18663
19201
  trialPaymentMethodRequired
18664
- } = (0, import_react49.useMemo)(() => {
18665
- const showCredits2 = data?.showCredits ?? true;
18666
- const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
18667
- if (isCheckoutData(data)) {
18668
- const {
18669
- company,
18670
- creditBundles: creditBundles2,
18671
- creditGrants,
18672
- capabilities,
18673
- postTrialPlan: postTrialPlan2,
18674
- featureUsage: featureUsage2,
18675
- trialPaymentMethodRequired: trialPaymentMethodRequired2
18676
- } = data;
18677
- const creditGroups2 = groupCreditGrants(creditGrants, {
19202
+ } = (0, import_react51.useMemo)(() => {
19203
+ return {
19204
+ currentPlan: data?.company?.plan,
19205
+ currentAddOns: data?.company?.addOns || [],
19206
+ creditBundles: data?.creditBundles || [],
19207
+ creditGroups: groupCreditGrants(data?.creditGrants || [], {
18678
19208
  groupBy: "bundle"
18679
19209
  }).reduce(
18680
19210
  (acc, grant) => {
@@ -18691,36 +19221,29 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
18691
19221
  return acc;
18692
19222
  },
18693
19223
  { plan: [], bundles: [], promotional: [] }
18694
- );
18695
- return {
18696
- currentPlan: company?.plan,
18697
- currentAddOns: company?.addOns || [],
18698
- creditBundles: creditBundles2,
18699
- creditGroups: creditGroups2,
18700
- billingSubscription: company?.billingSubscription,
18701
- canCheckout: capabilities?.checkout ?? true,
18702
- postTrialPlan: postTrialPlan2,
18703
- featureUsage: featureUsage2?.features || [],
18704
- trialPaymentMethodRequired: trialPaymentMethodRequired2,
18705
- showCredits: showCredits2,
18706
- showZeroPriceAsFree: showZeroPriceAsFree2
18707
- };
18708
- }
18709
- return {
18710
- currentPlan: void 0,
18711
- currentAddOns: [],
18712
- creditBundles: [],
18713
- creditGroups: { plan: [], bundles: [], promotional: [] },
18714
- billingSubscription: void 0,
18715
- canCheckout: false,
18716
- postTrialPlan: void 0,
18717
- featureUsage: [],
18718
- trialPaymentMethodRequired: false,
18719
- showCredits: showCredits2,
18720
- showZeroPriceAsFree: showZeroPriceAsFree2
19224
+ ),
19225
+ billingSubscription: data?.company?.billingSubscription,
19226
+ canCheckout: data?.capabilities?.checkout ?? false,
19227
+ postTrialPlan: data?.postTrialPlan,
19228
+ featureUsage: data?.featureUsage?.features || [],
19229
+ trialPaymentMethodRequired: data?.trialPaymentMethodRequired ?? false,
19230
+ showCredits: data?.showCredits ?? true,
19231
+ showZeroPriceAsFree: data?.showZeroPriceAsFree ?? false
18721
19232
  };
18722
- }, [data]);
18723
- const usageBasedEntitlements = (0, import_react49.useMemo)(
19233
+ }, [
19234
+ data?.capabilities?.checkout,
19235
+ data?.company?.addOns,
19236
+ data?.company?.billingSubscription,
19237
+ data?.company?.plan,
19238
+ data?.creditBundles,
19239
+ data?.creditGrants,
19240
+ data?.featureUsage?.features,
19241
+ data?.postTrialPlan,
19242
+ data?.showCredits,
19243
+ data?.showZeroPriceAsFree,
19244
+ data?.trialPaymentMethodRequired
19245
+ ]);
19246
+ const usageBasedEntitlements = (0, import_react51.useMemo)(
18724
19247
  () => featureUsage.filter((usage) => typeof usage.priceBehavior === "string"),
18725
19248
  [featureUsage]
18726
19249
  );
@@ -18729,7 +19252,7 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
18729
19252
  subscriptionCurrency,
18730
19253
  willSubscriptionCancel,
18731
19254
  isTrialSubscription
18732
- } = (0, import_react49.useMemo)(() => {
19255
+ } = (0, import_react51.useMemo)(() => {
18733
19256
  const subscriptionInterval2 = billingSubscription?.interval;
18734
19257
  const subscriptionCurrency2 = billingSubscription?.currency;
18735
19258
  const isTrialSubscription2 = billingSubscription?.status === "trialing";
@@ -19042,43 +19565,107 @@ var PlanManager = (0, import_react49.forwardRef)(({ children, className, portal,
19042
19565
  PlanManager.displayName = "PlanManager";
19043
19566
 
19044
19567
  // src/components/elements/pricing-table/PricingTable.tsx
19045
- var import_react52 = require("react");
19568
+ var import_react54 = require("react");
19046
19569
 
19047
19570
  // src/components/elements/pricing-table/AddOn.tsx
19048
- var import_react50 = require("react");
19571
+ var import_react52 = require("react");
19049
19572
  var import_jsx_runtime46 = require("react/jsx-runtime");
19573
+ function renderMeteredEntitlementPricing2({
19574
+ priceBehavior,
19575
+ softLimit,
19576
+ price,
19577
+ currency,
19578
+ packageSize,
19579
+ feature,
19580
+ featureName,
19581
+ isTiered
19582
+ }) {
19583
+ if (priceBehavior === "overage" /* Overage */ && softLimit) {
19584
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19585
+ "Additional: ",
19586
+ formatCurrency(price, currency),
19587
+ "/",
19588
+ feature ? getFeatureName(
19589
+ feature,
19590
+ packageSize
19591
+ ) : featureName || "unit"
19592
+ ] });
19593
+ }
19594
+ if (priceBehavior === "pay_as_you_go" /* PayAsYouGo */ || priceBehavior === "pay_in_advance" /* PayInAdvance */) {
19595
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19596
+ formatCurrency(price, currency),
19597
+ "/",
19598
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19599
+ packageSize,
19600
+ " "
19601
+ ] }),
19602
+ feature ? getFeatureName(
19603
+ feature,
19604
+ packageSize
19605
+ ) : featureName || "unit"
19606
+ ] });
19607
+ }
19608
+ if (isTiered) {
19609
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: "Tier-based pricing" });
19610
+ }
19611
+ return null;
19612
+ }
19613
+ function shouldShowUsageBased2(price, displayableEntitlements) {
19614
+ return price < 0.01 && displayableEntitlements.some((ent) => !ent.isUnlimited);
19615
+ }
19050
19616
  var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19051
19617
  const { layout } = sharedProps;
19052
19618
  const { t: t2 } = useTranslation();
19053
19619
  const { data, settings, setCheckoutState } = useEmbed();
19054
19620
  const isLightBackground = useIsLightBackground();
19055
- const { currentAddOns, canCheckout, isStandalone, showCallToAction } = (0, import_react50.useMemo)(() => {
19056
- if (isCheckoutData(data)) {
19621
+ const { currentAddOns, canCheckout, isStandalone } = (0, import_react52.useMemo)(() => {
19622
+ const isStandalone2 = typeof data?.component === "undefined";
19623
+ return {
19624
+ currentAddOns: data?.company?.addOns || [],
19625
+ canCheckout: isStandalone2 || (data?.capabilities?.checkout ?? true),
19626
+ isStandalone: isStandalone2
19627
+ };
19628
+ }, [data?.capabilities?.checkout, data?.company?.addOns, data?.component]);
19629
+ const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
19630
+ const isActiveAddOn = addOn.current && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
19631
+ const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
19632
+ const displayableEntitlements = addOn.entitlements?.filter(
19633
+ (entitlement) => entitlement.valueType === "unlimited" || entitlement.priceBehavior && [
19634
+ "pay_as_you_go" /* PayAsYouGo */,
19635
+ "pay_in_advance" /* PayInAdvance */,
19636
+ "overage" /* Overage */,
19637
+ "tier" /* Tiered */
19638
+ ].includes(entitlement.priceBehavior)
19639
+ ).map((entitlement) => {
19640
+ if (entitlement.valueType === "unlimited" && !entitlement.priceBehavior) {
19057
19641
  return {
19058
- currentAddOns: data.company?.addOns || [],
19059
- canCheckout: data.capabilities?.checkout ?? true,
19060
- isStandalone: false,
19061
- showCallToAction: true
19642
+ isUnlimited: true,
19643
+ featureName: entitlement.feature?.name,
19644
+ feature: entitlement.feature
19062
19645
  };
19063
19646
  }
19647
+ const priceData = getEntitlementPrice(entitlement, selectedPeriod);
19064
19648
  return {
19065
- currentAddOns: [],
19066
- canCheckout: true,
19067
- isStandalone: true,
19068
- showCallToAction: typeof layout.callToActionUrl === "string"
19649
+ isUnlimited: false,
19650
+ featureName: entitlement.feature?.name,
19651
+ feature: entitlement.feature,
19652
+ priceBehavior: entitlement.priceBehavior,
19653
+ softLimit: entitlement.softLimit,
19654
+ price: priceData?.price ?? 0,
19655
+ currency: priceData?.currency || addOnCurrency,
19656
+ packageSize: priceData?.packageSize ?? 1,
19657
+ isTiered: entitlement.priceBehavior === "tier" /* Tiered */
19069
19658
  };
19070
- }, [data, layout.callToActionUrl]);
19071
- const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
19072
- const isCurrentAddOn = isHydratedPlan(addOn) && addOn.current;
19073
- const isActiveAddOn = isCurrentAddOn && selectedPeriod === currentAddOns.find((currentAddOn) => currentAddOn.id === addOn.id)?.planPeriod;
19074
- const { price: addOnPrice, currency: addOnCurrency } = getAddOnPrice(addOn, selectedPeriod) || {};
19659
+ }) || [];
19075
19660
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19076
19661
  Flex,
19077
19662
  {
19663
+ className: "sch-PricingTable_AddOn",
19664
+ "data-testid": "sch-addon",
19665
+ "data-addon-id": addOn.id,
19078
19666
  $position: "relative",
19079
19667
  $flexDirection: "column",
19080
- $gap: "2rem",
19081
- $padding: `${cardPadding}rem`,
19668
+ $padding: `${0.75 * cardPadding}rem 0`,
19082
19669
  $backgroundColor: settings.theme.card.background,
19083
19670
  $borderRadius: `${settings.theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
19084
19671
  $outlineWidth: "2px",
@@ -19088,36 +19675,56 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19088
19675
  $boxShadow: cardBoxShadow
19089
19676
  },
19090
19677
  children: [
19091
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.75rem", children: [
19092
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
19093
- layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
19094
- /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text, { display: layout.plans.name.fontStyle, children: [
19095
- formatCurrency(addOnPrice ?? 0, addOnCurrency),
19096
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
19097
- "/",
19098
- selectedPeriod
19099
- ] })
19100
- ] }) }),
19101
- isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19102
- Flex,
19103
- {
19104
- $position: "absolute",
19105
- $right: "1rem",
19106
- $top: "1rem",
19107
- $backgroundColor: settings.theme.primary,
19108
- $borderRadius: "9999px",
19109
- $padding: "0.125rem 0.85rem",
19110
- children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19111
- Text,
19112
- {
19113
- $size: 0.75 * settings.theme.typography.text.fontSize,
19114
- $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
19115
- children: t2("Active")
19116
- }
19117
- )
19118
- }
19119
- )
19120
- ] }),
19678
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19679
+ Flex,
19680
+ {
19681
+ $flexDirection: "column",
19682
+ $gap: "0.75rem",
19683
+ $padding: `0 ${cardPadding}rem ${displayableEntitlements.length > 0 ? 0.75 * cardPadding : 0}rem`,
19684
+ $borderWidth: "0",
19685
+ $borderBottomWidth: displayableEntitlements.length > 0 ? "1px" : "0",
19686
+ $borderStyle: "solid",
19687
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
19688
+ children: [
19689
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.name.fontStyle, children: addOn.name }) }),
19690
+ layout.addOns.showDescription && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { $marginBottom: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { display: layout.plans.description.fontStyle, children: addOn.description }) }),
19691
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19692
+ Text,
19693
+ {
19694
+ "data-testid": "sch-addon-price",
19695
+ display: layout.plans.name.fontStyle,
19696
+ children: shouldShowUsageBased2(addOnPrice ?? 0, displayableEntitlements) ? t2("Usage-based") : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19697
+ formatCurrency(addOnPrice ?? 0, addOnCurrency),
19698
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("sub", { children: [
19699
+ "/",
19700
+ selectedPeriod
19701
+ ] })
19702
+ ] })
19703
+ }
19704
+ ) }),
19705
+ isActiveAddOn && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19706
+ Flex,
19707
+ {
19708
+ "data-testid": "sch-addon-active",
19709
+ $position: "absolute",
19710
+ $right: "1rem",
19711
+ $top: "1rem",
19712
+ $backgroundColor: settings.theme.primary,
19713
+ $borderRadius: "9999px",
19714
+ $padding: "0.125rem 0.85rem",
19715
+ children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19716
+ Text,
19717
+ {
19718
+ $size: 0.75 * settings.theme.typography.text.fontSize,
19719
+ $color: hexToHSL(settings.theme.primary).l > 50 ? "#000000" : "#FFFFFF",
19720
+ children: t2("Active")
19721
+ }
19722
+ )
19723
+ }
19724
+ )
19725
+ ]
19726
+ }
19727
+ ),
19121
19728
  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19122
19729
  Flex,
19123
19730
  {
@@ -19125,24 +19732,19 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19125
19732
  $justifyContent: "end",
19126
19733
  $gap: `${cardPadding}rem`,
19127
19734
  $flexGrow: 1,
19735
+ $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
19128
19736
  children: [
19129
- layout.addOns.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19130
- Flex,
19131
- {
19132
- $flexDirection: "column",
19133
- $position: "relative",
19134
- $gap: "1rem",
19135
- $flexGrow: 1,
19136
- children: addOn.entitlements.map((entitlement, entitlementIndex) => {
19137
- const metricPeriodName = getMetricPeriodName(entitlement);
19138
- return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19139
- Flex,
19140
- {
19141
- $flexWrap: "wrap",
19142
- $justifyContent: "space-between",
19143
- $alignItems: "center",
19144
- $gap: "1rem",
19145
- children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
19737
+ layout.addOns.showEntitlements && displayableEntitlements.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: 1, children: displayableEntitlements.map((entitlement, idx) => {
19738
+ if (entitlement.isUnlimited) {
19739
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19740
+ Flex,
19741
+ {
19742
+ $flexWrap: "wrap",
19743
+ $justifyContent: "space-between",
19744
+ $alignItems: "center",
19745
+ $gap: "1rem",
19746
+ children: [
19747
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
19146
19748
  layout.addOns.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19147
19749
  Icon3,
19148
19750
  {
@@ -19152,57 +19754,82 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19152
19754
  rounded: true
19153
19755
  }
19154
19756
  ),
19155
- /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
19156
- entitlement.feature?.name && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $alignItems: "center", $flexGrow: 1, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19157
- entitlement.valueType === "unlimited" /* Unlimited */ ? t2("Unlimited", {
19158
- item: getFeatureName(entitlement.feature)
19159
- }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19160
- formatNumber(entitlement.valueNumeric),
19161
- " ",
19162
- getFeatureName(
19163
- entitlement.feature,
19164
- entitlement.valueNumeric
19165
- )
19166
- ] }),
19167
- metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
19168
- " ",
19169
- t2("per"),
19170
- " ",
19171
- t2(metricPeriodName)
19172
- ] })
19173
- ] }) : entitlement.feature.name }) }),
19174
- layout.plans.showFeatureDescriptions && entitlement.feature?.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19175
- Text,
19176
- {
19177
- $size: 0.875 * settings.theme.typography.text.fontSize,
19178
- $color: `color-mix(in oklch, ${settings.theme.typography.text.color}, ${settings.theme.card.background})`,
19179
- children: entitlement.feature.description
19180
- }
19181
- )
19182
- ] })
19183
- ] })
19184
- },
19185
- entitlementIndex
19186
- );
19187
- })
19757
+ entitlement.feature && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19758
+ Flex,
19759
+ {
19760
+ $flexDirection: "column",
19761
+ $justifyContent: "center",
19762
+ children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: getFeatureName(entitlement.feature) })
19763
+ }
19764
+ )
19765
+ ] }),
19766
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19767
+ Text,
19768
+ {
19769
+ style: { opacity: 0.54 },
19770
+ $size: 0.875 * settings.theme.typography.text.fontSize,
19771
+ $color: settings.theme.typography.text.color,
19772
+ children: "Unlimited"
19773
+ }
19774
+ )
19775
+ ]
19776
+ },
19777
+ idx
19778
+ );
19188
19779
  }
19189
- ),
19190
- showCallToAction && layout.upgrade.isVisible && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19780
+ const meteredEntitlement = entitlement;
19781
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
19782
+ Flex,
19783
+ {
19784
+ $flexWrap: "wrap",
19785
+ $justifyContent: "space-between",
19786
+ $alignItems: "center",
19787
+ $gap: "1rem",
19788
+ children: [
19789
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Flex, { $gap: "1rem", children: [
19790
+ meteredEntitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19791
+ Icon3,
19792
+ {
19793
+ "data-testid": "sch-feature-icon",
19794
+ name: meteredEntitlement.feature.icon,
19795
+ color: settings.theme.primary,
19796
+ background: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)",
19797
+ rounded: true
19798
+ }
19799
+ ),
19800
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text, { children: meteredEntitlement.priceBehavior === "overage" /* Overage */ && meteredEntitlement.softLimit ? `${meteredEntitlement.softLimit} ${getEntitlementFeatureName(meteredEntitlement, "units")}` : getEntitlementFeatureName(meteredEntitlement) }) })
19801
+ ] }),
19802
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19803
+ Text,
19804
+ {
19805
+ style: { opacity: 0.54 },
19806
+ $size: 0.875 * settings.theme.typography.text.fontSize,
19807
+ $color: settings.theme.typography.text.color,
19808
+ children: renderMeteredEntitlementPricing2(meteredEntitlement)
19809
+ }
19810
+ )
19811
+ ]
19812
+ },
19813
+ idx
19814
+ );
19815
+ }) }),
19816
+ sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
19191
19817
  Button,
19192
19818
  {
19193
19819
  type: "button",
19194
- disabled: isHydratedPlan(addOn) && !addOn.valid || !canCheckout,
19820
+ disabled: !addOn.valid || !canCheckout,
19821
+ "data-testid": "sch-addon-cta-button",
19195
19822
  $size: layout.upgrade.buttonSize,
19196
19823
  $color: isActiveAddOn ? "danger" : layout.upgrade.buttonStyle,
19197
- $variant: isActiveAddOn ? "ghost" : isCurrentAddOn ? "outline" : "filled",
19198
- ...layout.callToActionUrl ? {
19824
+ $variant: isActiveAddOn ? "ghost" : addOn.current ? "outline" : "filled",
19825
+ ...sharedProps.callToActionUrl ? {
19199
19826
  as: "a",
19200
- href: layout.callToActionUrl,
19827
+ href: sharedProps.callToActionUrl,
19201
19828
  rel: "noreferrer",
19202
19829
  target: "_blank"
19203
19830
  } : {
19204
19831
  onClick: () => {
19205
- layout.onCallToAction?.(addOn);
19832
+ sharedProps.onCallToAction?.(addOn);
19206
19833
  if (!isStandalone && !addOn.custom) {
19207
19834
  setCheckoutState({
19208
19835
  period: selectedPeriod,
@@ -19213,9 +19840,9 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19213
19840
  }
19214
19841
  },
19215
19842
  $fullWidth: true,
19216
- children: isActiveAddOn ? t2("Remove add-on") : isCurrentAddOn ? t2("Change add-on") : t2("Choose add-on")
19843
+ children: isActiveAddOn ? t2("Remove add-on") : addOn.current ? t2("Change add-on") : t2("Choose add-on")
19217
19844
  }
19218
- )
19845
+ ) })
19219
19846
  ]
19220
19847
  }
19221
19848
  )
@@ -19225,16 +19852,16 @@ var AddOn2 = ({ addOn, sharedProps, selectedPeriod }) => {
19225
19852
  };
19226
19853
 
19227
19854
  // src/components/elements/pricing-table/Plan.tsx
19228
- var import_react51 = require("react");
19855
+ var import_react53 = require("react");
19229
19856
 
19230
19857
  // src/components/elements/pricing-table/Entitlement.tsx
19231
19858
  var import_jsx_runtime47 = require("react/jsx-runtime");
19232
19859
  var Entitlement = ({
19233
19860
  entitlement,
19861
+ sharedProps,
19862
+ selectedPeriod = "month" /* Month */,
19234
19863
  credits = [],
19235
- selectedPeriod,
19236
- showCredits,
19237
- sharedProps
19864
+ showCredits = true
19238
19865
  }) => {
19239
19866
  const { layout } = sharedProps;
19240
19867
  const { t: t2 } = useTranslation();
@@ -19246,7 +19873,7 @@ var Entitlement = ({
19246
19873
  currency: entitlementCurrency,
19247
19874
  packageSize: entitlementPackageSize = 1
19248
19875
  } = getEntitlementPrice(entitlement, selectedPeriod) || {};
19249
- const limit = entitlement.softLimit ?? entitlement.valueNumeric;
19876
+ const limit = entitlement.softLimit ?? entitlement.valueNumeric ?? void 0;
19250
19877
  const metricPeriodName = getMetricPeriodName(entitlement);
19251
19878
  const creditBasedEntitlementLimit = getCreditBasedEntitlementLimit(
19252
19879
  entitlement,
@@ -19256,6 +19883,7 @@ var Entitlement = ({
19256
19883
  layout.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
19257
19884
  Icon3,
19258
19885
  {
19886
+ "data-testid": "sch-feature-icon",
19259
19887
  name: entitlement.feature.icon,
19260
19888
  color: settings.theme.primary,
19261
19889
  background: `color-mix(in oklch, ${settings.theme.card.background} 87.5%, ${isLightBackground ? "black" : "white"})`,
@@ -19270,7 +19898,7 @@ var Entitlement = ({
19270
19898
  t2("per"),
19271
19899
  " ",
19272
19900
  entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19273
- entitlementPackageSize,
19901
+ formatNumber(entitlementPackageSize),
19274
19902
  " "
19275
19903
  ] }),
19276
19904
  getFeatureName(entitlement.feature, entitlementPackageSize),
@@ -19286,26 +19914,26 @@ var Entitlement = ({
19286
19914
  entitlement,
19287
19915
  period: selectedPeriod
19288
19916
  }
19289
- ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19290
- entitlement.consumptionRate,
19917
+ ) : showCredits && entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit && entitlement.consumptionRate ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19918
+ formatNumber(entitlement.consumptionRate),
19291
19919
  " ",
19292
19920
  getFeatureName(
19293
19921
  entitlement.valueCredit,
19294
- entitlement.consumptionRate || void 0
19922
+ entitlement.consumptionRate
19295
19923
  ),
19296
19924
  " ",
19297
19925
  t2("per"),
19298
19926
  " ",
19299
19927
  getFeatureName(entitlement.feature, 1)
19300
19928
  ] }) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && creditBasedEntitlementLimit ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: creditBasedEntitlementLimit?.period ? t2("Up to X units per period", {
19301
- amount: creditBasedEntitlementLimit.limit,
19929
+ amount: formatNumber(creditBasedEntitlementLimit.limit),
19302
19930
  units: getFeatureName(
19303
19931
  entitlement.feature,
19304
19932
  creditBasedEntitlementLimit.limit
19305
19933
  ),
19306
19934
  period: creditBasedEntitlementLimit.period
19307
19935
  }) : t2("Up to X units", {
19308
- amount: creditBasedEntitlementLimit.limit,
19936
+ amount: formatNumber(creditBasedEntitlementLimit.limit),
19309
19937
  units: getFeatureName(
19310
19938
  entitlement.feature,
19311
19939
  creditBasedEntitlementLimit.limit
@@ -19313,9 +19941,11 @@ var Entitlement = ({
19313
19941
  }) }) : entitlement.valueType === "numeric" /* Numeric */ || entitlement.valueType === "unlimited" /* Unlimited */ || entitlement.valueType === "trait" /* Trait */ ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19314
19942
  entitlement.valueType === "unlimited" /* Unlimited */ && !entitlement.priceBehavior ? t2("Unlimited", {
19315
19943
  item: getFeatureName(entitlement.feature)
19316
- }) : typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19317
- formatNumber(limit),
19318
- " ",
19944
+ }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19945
+ typeof limit === "number" && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19946
+ formatNumber(limit),
19947
+ " "
19948
+ ] }),
19319
19949
  getFeatureName(entitlement.feature, limit)
19320
19950
  ] }),
19321
19951
  metricPeriodName && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
@@ -19337,7 +19967,7 @@ var Entitlement = ({
19337
19967
  formatCurrency(entitlementPrice, entitlementCurrency),
19338
19968
  "/",
19339
19969
  entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
19340
- entitlementPackageSize,
19970
+ formatNumber(entitlementPackageSize),
19341
19971
  " "
19342
19972
  ] }),
19343
19973
  getFeatureName(entitlement.feature, entitlementPackageSize),
@@ -19403,9 +20033,6 @@ var Plan2 = ({
19403
20033
  const { data, settings, setCheckoutState } = useEmbed();
19404
20034
  const isLightBackground = useIsLightBackground();
19405
20035
  const trialEnd = useTrialEnd();
19406
- const showCallToAction = (0, import_react51.useMemo)(() => {
19407
- return typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function";
19408
- }, [sharedProps.callToActionUrl, sharedProps.onCallToAction]);
19409
20036
  const {
19410
20037
  currentPeriod,
19411
20038
  canCheckout,
@@ -19414,53 +20041,29 @@ var Plan2 = ({
19414
20041
  isStandalone,
19415
20042
  showCredits,
19416
20043
  showZeroPriceAsFree
19417
- } = (0, import_react51.useMemo)(() => {
19418
- const showCredits2 = data?.showCredits ?? true;
19419
- const showZeroPriceAsFree2 = data?.showZeroPriceAsFree ?? false;
19420
- if (isCheckoutData(data)) {
19421
- const billingSubscription = data.company?.billingSubscription;
19422
- const isTrialSubscription2 = billingSubscription?.status === "trialing";
19423
- const willSubscriptionCancel2 = typeof billingSubscription?.cancelAt === "number";
19424
- return {
19425
- currentPeriod: data.company?.plan?.planPeriod || "month",
19426
- canCheckout: data.capabilities?.checkout ?? true,
19427
- isTrialSubscription: isTrialSubscription2,
19428
- willSubscriptionCancel: willSubscriptionCancel2,
19429
- isStandalone: false,
19430
- showCredits: showCredits2,
19431
- showZeroPriceAsFree: showZeroPriceAsFree2
19432
- };
19433
- }
20044
+ } = (0, import_react53.useMemo)(() => {
20045
+ const isStandalone2 = typeof data?.component === "undefined";
19434
20046
  return {
19435
- currentPeriod: "month",
19436
- canCheckout: true,
19437
- isTrialSubscription: false,
19438
- willSubscriptionCancel: false,
19439
- isStandalone: true,
19440
- showCredits: showCredits2,
19441
- showZeroPriceAsFree: showZeroPriceAsFree2
20047
+ currentPeriod: data?.company?.plan?.planPeriod || "month",
20048
+ canCheckout: isStandalone2 || (data?.capabilities?.checkout ?? true),
20049
+ isTrialSubscription: data?.company?.billingSubscription?.status === "trialing",
20050
+ willSubscriptionCancel: typeof data?.company?.billingSubscription?.cancelAt === "number",
20051
+ isStandalone: isStandalone2,
20052
+ showCredits: data?.showCredits ?? true,
20053
+ showZeroPriceAsFree: data?.showZeroPriceAsFree ?? false
19442
20054
  };
19443
- }, [data]);
19444
- const callToActionTarget = (0, import_react51.useMemo)(() => {
19445
- if (sharedProps.callToActionTarget) {
19446
- return sharedProps.callToActionTarget;
19447
- }
19448
- if (sharedProps.callToActionUrl) {
19449
- try {
19450
- const ctaUrlOrigin = new URL(sharedProps.callToActionUrl).origin;
19451
- if (ctaUrlOrigin === window.location.hostname) {
19452
- return "_self";
19453
- }
19454
- } catch {
19455
- }
19456
- }
19457
- return "_blank";
19458
- }, [sharedProps.callToActionUrl, sharedProps.callToActionTarget]);
20055
+ }, [
20056
+ data?.capabilities?.checkout,
20057
+ data?.company?.billingSubscription?.cancelAt,
20058
+ data?.company?.billingSubscription?.status,
20059
+ data?.company?.plan?.planPeriod,
20060
+ data?.component,
20061
+ data?.showCredits,
20062
+ data?.showZeroPriceAsFree
20063
+ ]);
19459
20064
  const cardPadding = settings.theme.card.padding / TEXT_BASE_SIZE;
19460
- const currentPlanIndex = plans.findIndex(
19461
- (plan2) => isHydratedPlan(plan2) && plan2.current
19462
- );
19463
- const isActivePlan = isHydratedPlan(plan) && plan.current && currentPeriod === selectedPeriod;
20065
+ const currentPlanIndex = plans.findIndex((plan2) => plan2.current);
20066
+ const isActivePlan = plan.current && currentPeriod === selectedPeriod;
19464
20067
  const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, selectedPeriod) || {};
19465
20068
  const credits = groupPlanCreditGrants(plan.includedCreditGrants);
19466
20069
  const hasUsageBasedEntitlements = plan.entitlements.some(
@@ -19475,6 +20078,7 @@ var Plan2 = ({
19475
20078
  Flex,
19476
20079
  {
19477
20080
  className: "sch-PricingTable_Plan",
20081
+ "data-testid": "sch-plan",
19478
20082
  "data-plan-id": plan.id,
19479
20083
  $position: "relative",
19480
20084
  $flexDirection: "column",
@@ -19504,6 +20108,7 @@ var Plan2 = ({
19504
20108
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
19505
20109
  Text,
19506
20110
  {
20111
+ "data-testid": "sch-plan-price",
19507
20112
  $font: headerPriceFontStyle.fontFamily,
19508
20113
  $size: headerPriceFontStyle.fontSize,
19509
20114
  $weight: headerPriceFontStyle.fontWeight,
@@ -19529,6 +20134,7 @@ var Plan2 = ({
19529
20134
  layout.plans.showFeatureIcons && credit.icon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
19530
20135
  Icon3,
19531
20136
  {
20137
+ "data-testid": "sch-feature-icon",
19532
20138
  name: credit.icon,
19533
20139
  color: settings.theme.primary,
19534
20140
  background: `color-mix(in oklch, ${settings.theme.card.background} 87.5%, ${isLightBackground ? "black" : "white"})`,
@@ -19561,6 +20167,7 @@ var Plan2 = ({
19561
20167
  isActivePlan && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
19562
20168
  Flex,
19563
20169
  {
20170
+ "data-testid": "sch-plan-active",
19564
20171
  $position: "absolute",
19565
20172
  $right: "1rem",
19566
20173
  $top: "1rem",
@@ -19658,12 +20265,13 @@ var Plan2 = ({
19658
20265
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { $size: 15, $leading: 1, children: t2("Current plan") })
19659
20266
  ]
19660
20267
  }
19661
- ) : showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
20268
+ ) : sharedProps.showCallToAction && (layout.upgrade.isVisible || layout.downgrade.isVisible) && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
19662
20269
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
19663
20270
  Button,
19664
20271
  {
19665
20272
  type: "button",
19666
- disabled: (isHydratedPlan(plan) && !plan.valid || !canCheckout) && !plan.custom,
20273
+ disabled: (!plan.valid || !canCheckout) && !plan.custom,
20274
+ "data-testid": "sch-plan-cta-button",
19667
20275
  ...index > currentPlanIndex ? {
19668
20276
  $size: layout.upgrade.buttonSize,
19669
20277
  $color: layout.upgrade.buttonStyle,
@@ -19681,12 +20289,12 @@ var Plan2 = ({
19681
20289
  } : sharedProps.callToActionUrl ? {
19682
20290
  as: "a",
19683
20291
  href: sharedProps.callToActionUrl,
19684
- target: callToActionTarget,
20292
+ target: sharedProps.callToActionTarget,
19685
20293
  rel: "noreferrer"
19686
20294
  } : {
19687
20295
  onClick: () => {
19688
20296
  sharedProps.onCallToAction?.(plan);
19689
- if (!isStandalone && isHydratedPlan(plan) && !plan.custom) {
20297
+ if (!isStandalone && !plan.custom) {
19690
20298
  setCheckoutState({
19691
20299
  period: selectedPeriod,
19692
20300
  planId: isActivePlan ? null : plan.id,
@@ -19696,10 +20304,10 @@ var Plan2 = ({
19696
20304
  }
19697
20305
  },
19698
20306
  $fullWidth: true,
19699
- children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : isHydratedPlan(plan) && !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : isHydratedPlan(plan) && plan.companyCanTrial && plan.isTrialable ? t2("Start X day trial", { days: plan.trialDays }) : t2("Choose plan")
20307
+ children: plan.custom ? plan.customPlanConfig?.ctaText ?? t2("Talk to support") : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Text, { as: Box, $align: "center", children: t2("Over plan limit") }) : t2("Choose plan")
19700
20308
  }
19701
20309
  ),
19702
- isHydratedPlan(plan) && !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UsageViolationText, { violations: plan.usageViolations })
20310
+ !plan.valid && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UsageViolationText, { violations: plan.usageViolations })
19703
20311
  ] })
19704
20312
  ]
19705
20313
  }
@@ -19752,197 +20360,215 @@ var resolveDesignProps8 = (props) => {
19752
20360
  }
19753
20361
  };
19754
20362
  };
19755
- var PricingTable = (0, import_react52.forwardRef)(
19756
- ({ className, callToActionUrl, callToActionTarget, onCallToAction, ...rest }, ref) => {
19757
- const props = resolveDesignProps8(rest);
19758
- const { t: t2 } = useTranslation();
19759
- const { data, settings, isPending, hydratePublic } = useEmbed();
19760
- const { currentPeriod, showPeriodToggle, isStandalone } = (0, import_react52.useMemo)(() => {
19761
- const showPeriodToggle2 = data?.showPeriodToggle ?? props.showPeriodToggle;
19762
- if (isCheckoutData(data)) {
19763
- const billingSubscription = data.company?.billingSubscription;
19764
- const isTrialSubscription = billingSubscription?.status === "trialing";
19765
- const willSubscriptionCancel = billingSubscription?.cancelAt;
20363
+ var PricingTable = (0, import_react54.forwardRef)(({ className, ...rest }, ref) => {
20364
+ const props = resolveDesignProps8(rest);
20365
+ const { t: t2 } = useTranslation();
20366
+ const { data, settings, isPending, hydratePublic } = useEmbed();
20367
+ const getCallToActionTarget = (0, import_react54.useCallback)(
20368
+ (url, target) => {
20369
+ if (target) {
20370
+ return target;
20371
+ }
20372
+ if (url) {
20373
+ try {
20374
+ const ctaUrlOrigin = new URL(url).origin;
20375
+ if (ctaUrlOrigin === window.location.hostname) {
20376
+ return "_self";
20377
+ }
20378
+ } catch {
20379
+ }
20380
+ }
20381
+ return "_blank";
20382
+ },
20383
+ []
20384
+ );
20385
+ const { currentPeriod, isStandalone } = (0, import_react54.useMemo)(() => {
20386
+ const isStandalone2 = typeof data?.component === "undefined";
20387
+ return {
20388
+ currentPeriod: data?.company?.plan?.planPeriod || "month",
20389
+ currentAddOns: data?.company?.addOns || [],
20390
+ canCheckout: isStandalone2 ?? data?.capabilities?.checkout ?? true,
20391
+ isTrialSubscription: data?.company?.billingSubscription?.status === "trialing",
20392
+ willSubscriptionCancel: data?.company?.billingSubscription?.cancelAt,
20393
+ isStandalone: isStandalone2
20394
+ };
20395
+ }, [
20396
+ data?.capabilities?.checkout,
20397
+ data?.company?.addOns,
20398
+ data?.company?.billingSubscription?.cancelAt,
20399
+ data?.company?.billingSubscription?.status,
20400
+ data?.company?.plan?.planPeriod,
20401
+ data?.component
20402
+ ]);
20403
+ const [selectedPeriod, setSelectedPeriod] = (0, import_react54.useState)(currentPeriod);
20404
+ const showPeriodToggle = rest.showPeriodToggle ?? data?.showPeriodToggle ?? true;
20405
+ const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
20406
+ useSelectedPeriod: showPeriodToggle
20407
+ });
20408
+ const [entitlementCounts, setEntitlementCounts] = (0, import_react54.useState)(
20409
+ () => plans.reduce(entitlementCountsReducer, {})
20410
+ );
20411
+ const handleToggleShowAll = (id) => {
20412
+ setEntitlementCounts((prev2) => {
20413
+ const count = prev2[id] ? { ...prev2[id] } : void 0;
20414
+ if (count) {
19766
20415
  return {
19767
- currentPeriod: data.company?.plan?.planPeriod || "month",
19768
- currentAddOns: data.company?.addOns || [],
19769
- canCheckout: data.capabilities?.checkout ?? true,
19770
- showPeriodToggle: showPeriodToggle2,
19771
- isTrialSubscription,
19772
- willSubscriptionCancel,
19773
- isStandalone: false
20416
+ ...prev2,
20417
+ [id]: {
20418
+ size: count.size,
20419
+ limit: count.limit > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : count.size
20420
+ }
19774
20421
  };
19775
20422
  }
19776
- return {
19777
- currentPeriod: "month",
19778
- currentAddOns: [],
19779
- canCheckout: true,
19780
- showPeriodToggle: showPeriodToggle2,
19781
- isTrialSubscription: false,
19782
- willSubscriptionCancel: false,
19783
- isStandalone: true
19784
- };
19785
- }, [props.showPeriodToggle, data]);
19786
- const [selectedPeriod, setSelectedPeriod] = (0, import_react52.useState)(currentPeriod);
19787
- const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
19788
- useSelectedPeriod: showPeriodToggle
20423
+ return prev2;
19789
20424
  });
19790
- const [entitlementCounts, setEntitlementCounts] = (0, import_react52.useState)(
19791
- () => plans.reduce(entitlementCountsReducer, {})
19792
- );
19793
- const handleToggleShowAll = (id) => {
19794
- setEntitlementCounts((prev2) => {
19795
- const count = prev2[id] ? { ...prev2[id] } : void 0;
19796
- if (count) {
19797
- return {
19798
- ...prev2,
19799
- [id]: {
19800
- size: count.size,
19801
- limit: count.limit > VISIBLE_ENTITLEMENT_COUNT ? VISIBLE_ENTITLEMENT_COUNT : count.size
19802
- }
19803
- };
19804
- }
19805
- return prev2;
19806
- });
19807
- };
19808
- (0, import_react52.useEffect)(() => {
19809
- if (isStandalone) {
19810
- hydratePublic();
19811
- }
19812
- }, [isStandalone, hydratePublic]);
19813
- (0, import_react52.useEffect)(() => {
19814
- setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
19815
- }, [plans]);
19816
- if (isPending) {
19817
- return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19818
- Flex,
19819
- {
19820
- $width: "100%",
19821
- $height: "100%",
19822
- $alignItems: "center",
19823
- $justifyContent: "center",
19824
- $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
19825
- children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Loader, { $size: "2xl" })
19826
- }
19827
- );
20425
+ };
20426
+ (0, import_react54.useEffect)(() => {
20427
+ if (isStandalone) {
20428
+ hydratePublic();
19828
20429
  }
19829
- const Wrapper = isStandalone ? Container : import_react52.Fragment;
19830
- return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
19831
- FussyChild,
20430
+ }, [isStandalone, hydratePublic]);
20431
+ (0, import_react54.useEffect)(() => {
20432
+ setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
20433
+ }, [plans]);
20434
+ if (isPending) {
20435
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20436
+ Flex,
19832
20437
  {
19833
- ref,
19834
- className: `sch-PricingTable ${className}`,
19835
- as: Flex,
19836
- $flexDirection: "column",
19837
- $gap: "2rem",
19838
- children: [
19839
- /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Box, { children: [
19840
- /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
19841
- Flex,
19842
- {
19843
- $flexDirection: "column",
19844
- $justifyContent: "center",
19845
- $alignItems: "center",
19846
- $gap: "1rem",
19847
- $marginBottom: "1rem",
19848
- $viewport: {
19849
- md: {
19850
- $flexDirection: "row",
19851
- $justifyContent: "space-between"
19852
- }
19853
- },
19854
- children: [
19855
- /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
19856
- showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19857
- PeriodToggle,
19858
- {
19859
- options: periods,
19860
- selectedOption: selectedPeriod,
19861
- onSelect: (period) => {
19862
- if (period !== selectedPeriod) {
19863
- setSelectedPeriod(period);
19864
- }
20438
+ $width: "100%",
20439
+ $height: "100%",
20440
+ $alignItems: "center",
20441
+ $justifyContent: "center",
20442
+ $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
20443
+ children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Loader, { "aria-label": "loading", $size: "2xl" })
20444
+ }
20445
+ );
20446
+ }
20447
+ const showCallToAction = typeof data?.component !== "undefined" || typeof rest.callToActionUrl === "string" || typeof rest.onCallToAction === "function";
20448
+ const callToActionTarget = getCallToActionTarget(
20449
+ rest.callToActionUrl,
20450
+ rest.callToActionTarget
20451
+ );
20452
+ const Wrapper = isStandalone ? Container : import_react54.Fragment;
20453
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
20454
+ FussyChild,
20455
+ {
20456
+ ref,
20457
+ className: `sch-PricingTable ${className}`,
20458
+ as: Flex,
20459
+ "data-testid": "sch-pricing-table",
20460
+ $flexDirection: "column",
20461
+ $gap: "2rem",
20462
+ children: [
20463
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Box, { children: [
20464
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
20465
+ Flex,
20466
+ {
20467
+ $flexDirection: "column",
20468
+ $justifyContent: "center",
20469
+ $alignItems: "center",
20470
+ $gap: "1rem",
20471
+ $marginBottom: "1rem",
20472
+ $viewport: {
20473
+ md: {
20474
+ $flexDirection: "row",
20475
+ $justifyContent: "space-between"
20476
+ }
20477
+ },
20478
+ children: [
20479
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans") }),
20480
+ showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20481
+ PeriodToggle,
20482
+ {
20483
+ options: periods,
20484
+ selectedOption: selectedPeriod,
20485
+ onSelect: (period) => {
20486
+ if (period !== selectedPeriod) {
20487
+ setSelectedPeriod(period);
19865
20488
  }
19866
20489
  }
19867
- )
19868
- ]
19869
- }
19870
- ),
19871
- props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19872
- Box,
19873
- {
19874
- $display: "grid",
19875
- $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
19876
- $gap: "1rem",
19877
- children: plans.map((plan, index, self2) => {
19878
- const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
19879
- return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19880
- Plan2,
19881
- {
19882
- plan,
19883
- index,
19884
- sharedProps: {
19885
- layout: props,
19886
- callToActionUrl,
19887
- callToActionTarget,
19888
- onCallToAction
19889
- },
19890
- plans: self2,
19891
- selectedPeriod: planPeriod,
19892
- entitlementCounts,
19893
- handleToggleShowAll
20490
+ }
20491
+ )
20492
+ ]
20493
+ }
20494
+ ),
20495
+ props.plans.isVisible && plans.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20496
+ Box,
20497
+ {
20498
+ "data-testid": "sch-plans",
20499
+ $display: "grid",
20500
+ $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
20501
+ $gap: "1rem",
20502
+ children: plans.map((plan, index, self2) => {
20503
+ const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
20504
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20505
+ Plan2,
20506
+ {
20507
+ plan,
20508
+ index,
20509
+ sharedProps: {
20510
+ layout: props,
20511
+ showCallToAction,
20512
+ callToActionUrl: rest.callToActionUrl,
20513
+ callToActionTarget,
20514
+ onCallToAction: rest.onCallToAction
19894
20515
  },
19895
- index
19896
- );
19897
- })
19898
- }
19899
- )
19900
- ] }),
19901
- /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
19902
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19903
- Flex,
19904
- {
19905
- $justifyContent: "space-between",
19906
- $alignItems: "center",
19907
- $marginBottom: "1rem",
19908
- children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
19909
- }
19910
- ),
19911
- /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19912
- Box,
19913
- {
19914
- $display: "grid",
19915
- $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
19916
- $gap: "1rem",
19917
- children: addOns.map((addOn, index) => {
19918
- const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
19919
- return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
19920
- AddOn2,
19921
- {
19922
- addOn,
19923
- sharedProps: {
19924
- layout: props,
19925
- callToActionUrl,
19926
- callToActionTarget,
19927
- onCallToAction
19928
- },
19929
- selectedPeriod: addOnPeriod
20516
+ plans: self2,
20517
+ selectedPeriod: planPeriod,
20518
+ entitlementCounts,
20519
+ handleToggleShowAll
20520
+ },
20521
+ index
20522
+ );
20523
+ })
20524
+ }
20525
+ )
20526
+ ] }),
20527
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
20528
+ props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20529
+ Flex,
20530
+ {
20531
+ $justifyContent: "space-between",
20532
+ $alignItems: "center",
20533
+ $marginBottom: "1rem",
20534
+ children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Text, { display: props.header.fontStyle, children: t2("Add-ons") })
20535
+ }
20536
+ ),
20537
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20538
+ Box,
20539
+ {
20540
+ $display: "grid",
20541
+ $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
20542
+ $gap: "1rem",
20543
+ children: addOns.map((addOn, index) => {
20544
+ const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
20545
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
20546
+ AddOn2,
20547
+ {
20548
+ addOn,
20549
+ sharedProps: {
20550
+ layout: props,
20551
+ showCallToAction,
20552
+ callToActionUrl: rest.callToActionUrl,
20553
+ callToActionTarget,
20554
+ onCallToAction: rest.onCallToAction
19930
20555
  },
19931
- index
19932
- );
19933
- })
19934
- }
19935
- )
19936
- ] }) })
19937
- ]
19938
- }
19939
- ) });
19940
- }
19941
- );
20556
+ selectedPeriod: addOnPeriod
20557
+ },
20558
+ index
20559
+ );
20560
+ })
20561
+ }
20562
+ )
20563
+ ] }) })
20564
+ ]
20565
+ }
20566
+ ) });
20567
+ });
19942
20568
  PricingTable.displayName = "PricingTable";
19943
20569
 
19944
20570
  // src/components/elements/text/Text.tsx
19945
- var import_react53 = require("react");
20571
+ var import_react55 = require("react");
19946
20572
  var import_jsx_runtime50 = require("react/jsx-runtime");
19947
20573
  var resolveDesignProps9 = (props) => {
19948
20574
  return {
@@ -19953,7 +20579,7 @@ var resolveDesignProps9 = (props) => {
19953
20579
  }
19954
20580
  };
19955
20581
  };
19956
- var TextElement = (0, import_react53.forwardRef)(({ children, className, ...rest }, ref) => {
20582
+ var TextElement = (0, import_react55.forwardRef)(({ children, className, ...rest }, ref) => {
19957
20583
  const props = resolveDesignProps9(rest);
19958
20584
  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Element, { as: Flex, ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
19959
20585
  Text,
@@ -19968,7 +20594,7 @@ var TextElement = (0, import_react53.forwardRef)(({ children, className, ...rest
19968
20594
  TextElement.displayName = "Text";
19969
20595
 
19970
20596
  // src/components/elements/unsubscribe-button/UnsubscribeButton.tsx
19971
- var import_react54 = require("react");
20597
+ var import_react56 = require("react");
19972
20598
  var import_jsx_runtime51 = require("react/jsx-runtime");
19973
20599
  var buttonStyles = {
19974
20600
  primary: {
@@ -19995,13 +20621,13 @@ var resolveDesignProps10 = (props) => {
19995
20621
  }
19996
20622
  };
19997
20623
  };
19998
- var UnsubscribeButton = (0, import_react54.forwardRef)(({ children, className, ...rest }, ref) => {
20624
+ var UnsubscribeButton = (0, import_react56.forwardRef)(({ children, className, ...rest }, ref) => {
19999
20625
  const props = resolveDesignProps10(rest);
20000
20626
  const { t: t2 } = useTranslation();
20001
20627
  const { data, setLayout } = useEmbed();
20002
- const hasActiveSubscription = (0, import_react54.useMemo)(() => {
20003
- return isCheckoutData(data) && data.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
20004
- }, [data]);
20628
+ const hasActiveSubscription = (0, import_react56.useMemo)(() => {
20629
+ return data?.subscription && data.subscription.status !== "cancelled" && !data.subscription.cancelAt;
20630
+ }, [data?.subscription]);
20005
20631
  if (!hasActiveSubscription) {
20006
20632
  return null;
20007
20633
  }
@@ -20034,7 +20660,7 @@ var UnsubscribeButton = (0, import_react54.forwardRef)(({ children, className, .
20034
20660
  UnsubscribeButton.displayName = "UnsubscribeButton";
20035
20661
 
20036
20662
  // src/components/elements/upcoming-bill/UpcomingBill.tsx
20037
- var import_react55 = require("react");
20663
+ var import_react57 = require("react");
20038
20664
  var import_jsx_runtime52 = require("react/jsx-runtime");
20039
20665
  function resolveDesignProps11(props) {
20040
20666
  return {
@@ -20054,29 +20680,27 @@ function resolveDesignProps11(props) {
20054
20680
  }
20055
20681
  };
20056
20682
  }
20057
- var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref) => {
20683
+ var UpcomingBill = (0, import_react57.forwardRef)(({ className, ...rest }, ref) => {
20058
20684
  const props = resolveDesignProps11(rest);
20059
20685
  const { t: t2 } = useTranslation();
20060
20686
  const { data, settings, debug, getUpcomingInvoice, getCustomerBalance } = useEmbed();
20061
20687
  const isLightBackground = useIsLightBackground();
20062
- const [isLoading, setIsLoading] = (0, import_react55.useState)(false);
20063
- const [error, setError] = (0, import_react55.useState)();
20064
- const [upcomingInvoice, setUpcomingInvoice] = (0, import_react55.useState)();
20065
- const [balances, setBalances] = (0, import_react55.useState)([]);
20066
- const discounts = (0, import_react55.useMemo)(() => {
20067
- return (isCheckoutData(data) && data.subscription?.discounts || []).map(
20068
- (discount) => ({
20069
- couponId: discount.couponId,
20070
- customerFacingCode: discount.customerFacingCode || void 0,
20071
- currency: discount.currency || void 0,
20072
- amountOff: discount.amountOff ?? void 0,
20073
- percentOff: discount.percentOff ?? void 0,
20074
- isActive: discount.isActive
20075
- })
20076
- );
20077
- }, [data]);
20078
- const getInvoice = (0, import_react55.useCallback)(async () => {
20079
- if (isCheckoutData(data) && data.component?.id && data.subscription && !data.subscription.cancelAt) {
20688
+ const [isLoading, setIsLoading] = (0, import_react57.useState)(false);
20689
+ const [error, setError] = (0, import_react57.useState)();
20690
+ const [upcomingInvoice, setUpcomingInvoice] = (0, import_react57.useState)();
20691
+ const [balances, setBalances] = (0, import_react57.useState)([]);
20692
+ const discounts = (0, import_react57.useMemo)(() => {
20693
+ return (data?.subscription?.discounts || []).map((discount) => ({
20694
+ couponId: discount.couponId,
20695
+ customerFacingCode: discount.customerFacingCode || void 0,
20696
+ currency: discount.currency || void 0,
20697
+ amountOff: discount.amountOff ?? void 0,
20698
+ percentOff: discount.percentOff ?? void 0,
20699
+ isActive: discount.isActive
20700
+ }));
20701
+ }, [data?.subscription?.discounts]);
20702
+ const getInvoice = (0, import_react57.useCallback)(async () => {
20703
+ if (data?.component?.id && data?.subscription && !data.subscription.cancelAt) {
20080
20704
  try {
20081
20705
  setError(void 0);
20082
20706
  setIsLoading(true);
@@ -20090,8 +20714,8 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
20090
20714
  setIsLoading(false);
20091
20715
  }
20092
20716
  }
20093
- }, [data, getUpcomingInvoice]);
20094
- const getBalances = (0, import_react55.useCallback)(async () => {
20717
+ }, [data?.component?.id, data?.subscription, getUpcomingInvoice]);
20718
+ const getBalances = (0, import_react57.useCallback)(async () => {
20095
20719
  try {
20096
20720
  const response = await getCustomerBalance();
20097
20721
  if (response) {
@@ -20101,13 +20725,13 @@ var UpcomingBill = (0, import_react55.forwardRef)(({ className, ...rest }, ref)
20101
20725
  debug("Failed to fetch customer balance.", err2);
20102
20726
  }
20103
20727
  }, [debug, getCustomerBalance]);
20104
- (0, import_react55.useEffect)(() => {
20728
+ (0, import_react57.useEffect)(() => {
20105
20729
  getInvoice();
20106
20730
  }, [getInvoice]);
20107
- (0, import_react55.useEffect)(() => {
20731
+ (0, import_react57.useEffect)(() => {
20108
20732
  getBalances();
20109
20733
  }, [getBalances]);
20110
- if (!isCheckoutData(data) || !data.subscription || data.subscription.cancelAt) {
20734
+ if (!data?.subscription || data.subscription.cancelAt) {
20111
20735
  return null;
20112
20736
  }
20113
20737
  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Element, { ref, className, children: [
@@ -24416,10 +25040,10 @@ var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
24416
25040
  var inflate_1 = inflate;
24417
25041
 
24418
25042
  // src/components/embed/Embed.tsx
24419
- var import_react57 = require("react");
25043
+ var import_react59 = require("react");
24420
25044
 
24421
25045
  // src/components/embed/renderer.ts
24422
- var import_react56 = require("react");
25046
+ var import_react58 = require("react");
24423
25047
  var components = {
24424
25048
  Root,
24425
25049
  Viewport,
@@ -24483,7 +25107,7 @@ function createRenderer(options) {
24483
25107
  const { className, ...rest } = props;
24484
25108
  const resolvedProps = component === "div" ? rest : props;
24485
25109
  const resolvedChildren = children.map(renderNode);
24486
- return (0, import_react56.createElement)(
25110
+ return (0, import_react58.createElement)(
24487
25111
  component,
24488
25112
  {
24489
25113
  key: index,
@@ -24497,6 +25121,7 @@ function createRenderer(options) {
24497
25121
 
24498
25122
  // src/components/embed/Embed.tsx
24499
25123
  var import_jsx_runtime53 = require("react/jsx-runtime");
25124
+ var renderer = createRenderer();
24500
25125
  var Loading = () => {
24501
25126
  const { settings } = useEmbed();
24502
25127
  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -24531,8 +25156,8 @@ var Error2 = ({ message }) => {
24531
25156
  );
24532
25157
  };
24533
25158
  var SchematicEmbed = ({ id, accessToken }) => {
24534
- const [children, setChildren] = (0, import_react57.useState)(/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, {}));
24535
- const theme = (0, import_react57.useContext)(et);
25159
+ const [children, setChildren] = (0, import_react59.useState)(/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, {}));
25160
+ const theme = (0, import_react59.useContext)(et);
24536
25161
  const {
24537
25162
  data,
24538
25163
  error,
@@ -24543,20 +25168,19 @@ var SchematicEmbed = ({ id, accessToken }) => {
24543
25168
  setAccessToken,
24544
25169
  updateSettings
24545
25170
  } = useEmbed();
24546
- (0, import_react57.useEffect)(() => {
25171
+ (0, import_react59.useEffect)(() => {
24547
25172
  if (accessToken) {
24548
25173
  setAccessToken(accessToken);
24549
25174
  }
24550
25175
  }, [accessToken, setAccessToken]);
24551
- (0, import_react57.useEffect)(() => {
25176
+ (0, import_react59.useEffect)(() => {
24552
25177
  if (id && stale) {
24553
25178
  hydrateComponent(id);
24554
25179
  }
24555
25180
  }, [id, hydrateComponent, stale]);
24556
- (0, import_react57.useEffect)(() => {
24557
- const renderer = createRenderer();
25181
+ (0, import_react59.useEffect)(() => {
24558
25182
  try {
24559
- if (isCheckoutData(data) && data.component?.ast) {
25183
+ if (data?.component?.ast) {
24560
25184
  const nodes = [];
24561
25185
  const compressed = data.component.ast;
24562
25186
  const json = inflate_1(
@@ -24576,7 +25200,7 @@ var SchematicEmbed = ({ id, accessToken }) => {
24576
25200
  } catch (err2) {
24577
25201
  setError(isError(err2) ? err2 : ERROR_UNKNOWN);
24578
25202
  }
24579
- }, [data, setError, updateSettings]);
25203
+ }, [data?.component?.ast, setError, updateSettings]);
24580
25204
  if (!theme) {
24581
25205
  return stub();
24582
25206
  }
@@ -24597,10 +25221,21 @@ var SchematicEmbed = ({ id, accessToken }) => {
24597
25221
  if (isPending) {
24598
25222
  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, {});
24599
25223
  }
24600
- return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children });
25224
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { className: "sch-Embed", "data-testid": "sch-embed", children });
24601
25225
  };
24602
25226
  /*! Bundled license information:
24603
25227
 
25228
+ use-sync-external-store/cjs/use-sync-external-store-shim.development.js:
25229
+ (**
25230
+ * @license React
25231
+ * use-sync-external-store-shim.development.js
25232
+ *
25233
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
25234
+ *
25235
+ * This source code is licensed under the MIT license found in the
25236
+ * LICENSE file in the root directory of this source tree.
25237
+ *)
25238
+
24604
25239
  pako/dist/pako.esm.mjs:
24605
25240
  (*! pako 2.1.0 https://github.com/nodeca/pako @license (MIT AND Zlib) *)
24606
25241
  */