@schematichq/schematic-react 0.2.0-rc.5 → 0.2.0-rc.7

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.
@@ -849,6 +849,357 @@ var require_classnames = __commonJS({
849
849
  }
850
850
  });
851
851
 
852
+ // node_modules/pluralize/pluralize.js
853
+ var require_pluralize = __commonJS({
854
+ "node_modules/pluralize/pluralize.js"(exports, module2) {
855
+ (function(root, pluralize3) {
856
+ if (typeof require === "function" && typeof exports === "object" && typeof module2 === "object") {
857
+ module2.exports = pluralize3();
858
+ } else if (typeof define === "function" && define.amd) {
859
+ define(function() {
860
+ return pluralize3();
861
+ });
862
+ } else {
863
+ root.pluralize = pluralize3();
864
+ }
865
+ })(exports, function() {
866
+ var pluralRules = [];
867
+ var singularRules = [];
868
+ var uncountables = {};
869
+ var irregularPlurals = {};
870
+ var irregularSingles = {};
871
+ function sanitizeRule(rule) {
872
+ if (typeof rule === "string") {
873
+ return new RegExp("^" + rule + "$", "i");
874
+ }
875
+ return rule;
876
+ }
877
+ function restoreCase(word, token2) {
878
+ if (word === token2) return token2;
879
+ if (word === word.toLowerCase()) return token2.toLowerCase();
880
+ if (word === word.toUpperCase()) return token2.toUpperCase();
881
+ if (word[0] === word[0].toUpperCase()) {
882
+ return token2.charAt(0).toUpperCase() + token2.substr(1).toLowerCase();
883
+ }
884
+ return token2.toLowerCase();
885
+ }
886
+ function interpolate(str, args) {
887
+ return str.replace(/\$(\d{1,2})/g, function(match2, index) {
888
+ return args[index] || "";
889
+ });
890
+ }
891
+ function replace2(word, rule) {
892
+ return word.replace(rule[0], function(match2, index) {
893
+ var result = interpolate(rule[1], arguments);
894
+ if (match2 === "") {
895
+ return restoreCase(word[index - 1], result);
896
+ }
897
+ return restoreCase(match2, result);
898
+ });
899
+ }
900
+ function sanitizeWord(token2, word, rules) {
901
+ if (!token2.length || uncountables.hasOwnProperty(token2)) {
902
+ return word;
903
+ }
904
+ var len = rules.length;
905
+ while (len--) {
906
+ var rule = rules[len];
907
+ if (rule[0].test(word)) return replace2(word, rule);
908
+ }
909
+ return word;
910
+ }
911
+ function replaceWord(replaceMap, keepMap, rules) {
912
+ return function(word) {
913
+ var token2 = word.toLowerCase();
914
+ if (keepMap.hasOwnProperty(token2)) {
915
+ return restoreCase(word, token2);
916
+ }
917
+ if (replaceMap.hasOwnProperty(token2)) {
918
+ return restoreCase(word, replaceMap[token2]);
919
+ }
920
+ return sanitizeWord(token2, word, rules);
921
+ };
922
+ }
923
+ function checkWord(replaceMap, keepMap, rules, bool) {
924
+ return function(word) {
925
+ var token2 = word.toLowerCase();
926
+ if (keepMap.hasOwnProperty(token2)) return true;
927
+ if (replaceMap.hasOwnProperty(token2)) return false;
928
+ return sanitizeWord(token2, token2, rules) === token2;
929
+ };
930
+ }
931
+ function pluralize3(word, count, inclusive) {
932
+ var pluralized = count === 1 ? pluralize3.singular(word) : pluralize3.plural(word);
933
+ return (inclusive ? count + " " : "") + pluralized;
934
+ }
935
+ pluralize3.plural = replaceWord(
936
+ irregularSingles,
937
+ irregularPlurals,
938
+ pluralRules
939
+ );
940
+ pluralize3.isPlural = checkWord(
941
+ irregularSingles,
942
+ irregularPlurals,
943
+ pluralRules
944
+ );
945
+ pluralize3.singular = replaceWord(
946
+ irregularPlurals,
947
+ irregularSingles,
948
+ singularRules
949
+ );
950
+ pluralize3.isSingular = checkWord(
951
+ irregularPlurals,
952
+ irregularSingles,
953
+ singularRules
954
+ );
955
+ pluralize3.addPluralRule = function(rule, replacement) {
956
+ pluralRules.push([sanitizeRule(rule), replacement]);
957
+ };
958
+ pluralize3.addSingularRule = function(rule, replacement) {
959
+ singularRules.push([sanitizeRule(rule), replacement]);
960
+ };
961
+ pluralize3.addUncountableRule = function(word) {
962
+ if (typeof word === "string") {
963
+ uncountables[word.toLowerCase()] = true;
964
+ return;
965
+ }
966
+ pluralize3.addPluralRule(word, "$0");
967
+ pluralize3.addSingularRule(word, "$0");
968
+ };
969
+ pluralize3.addIrregularRule = function(single, plural) {
970
+ plural = plural.toLowerCase();
971
+ single = single.toLowerCase();
972
+ irregularSingles[single] = plural;
973
+ irregularPlurals[plural] = single;
974
+ };
975
+ [
976
+ // Pronouns.
977
+ ["I", "we"],
978
+ ["me", "us"],
979
+ ["he", "they"],
980
+ ["she", "they"],
981
+ ["them", "them"],
982
+ ["myself", "ourselves"],
983
+ ["yourself", "yourselves"],
984
+ ["itself", "themselves"],
985
+ ["herself", "themselves"],
986
+ ["himself", "themselves"],
987
+ ["themself", "themselves"],
988
+ ["is", "are"],
989
+ ["was", "were"],
990
+ ["has", "have"],
991
+ ["this", "these"],
992
+ ["that", "those"],
993
+ // Words ending in with a consonant and `o`.
994
+ ["echo", "echoes"],
995
+ ["dingo", "dingoes"],
996
+ ["volcano", "volcanoes"],
997
+ ["tornado", "tornadoes"],
998
+ ["torpedo", "torpedoes"],
999
+ // Ends with `us`.
1000
+ ["genus", "genera"],
1001
+ ["viscus", "viscera"],
1002
+ // Ends with `ma`.
1003
+ ["stigma", "stigmata"],
1004
+ ["stoma", "stomata"],
1005
+ ["dogma", "dogmata"],
1006
+ ["lemma", "lemmata"],
1007
+ ["schema", "schemata"],
1008
+ ["anathema", "anathemata"],
1009
+ // Other irregular rules.
1010
+ ["ox", "oxen"],
1011
+ ["axe", "axes"],
1012
+ ["die", "dice"],
1013
+ ["yes", "yeses"],
1014
+ ["foot", "feet"],
1015
+ ["eave", "eaves"],
1016
+ ["goose", "geese"],
1017
+ ["tooth", "teeth"],
1018
+ ["quiz", "quizzes"],
1019
+ ["human", "humans"],
1020
+ ["proof", "proofs"],
1021
+ ["carve", "carves"],
1022
+ ["valve", "valves"],
1023
+ ["looey", "looies"],
1024
+ ["thief", "thieves"],
1025
+ ["groove", "grooves"],
1026
+ ["pickaxe", "pickaxes"],
1027
+ ["passerby", "passersby"]
1028
+ ].forEach(function(rule) {
1029
+ return pluralize3.addIrregularRule(rule[0], rule[1]);
1030
+ });
1031
+ [
1032
+ [/s?$/i, "s"],
1033
+ [/[^\u0000-\u007F]$/i, "$0"],
1034
+ [/([^aeiou]ese)$/i, "$1"],
1035
+ [/(ax|test)is$/i, "$1es"],
1036
+ [/(alias|[^aou]us|t[lm]as|gas|ris)$/i, "$1es"],
1037
+ [/(e[mn]u)s?$/i, "$1s"],
1038
+ [/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, "$1"],
1039
+ [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1i"],
1040
+ [/(alumn|alg|vertebr)(?:a|ae)$/i, "$1ae"],
1041
+ [/(seraph|cherub)(?:im)?$/i, "$1im"],
1042
+ [/(her|at|gr)o$/i, "$1oes"],
1043
+ [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, "$1a"],
1044
+ [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, "$1a"],
1045
+ [/sis$/i, "ses"],
1046
+ [/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, "$1$2ves"],
1047
+ [/([^aeiouy]|qu)y$/i, "$1ies"],
1048
+ [/([^ch][ieo][ln])ey$/i, "$1ies"],
1049
+ [/(x|ch|ss|sh|zz)$/i, "$1es"],
1050
+ [/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, "$1ices"],
1051
+ [/\b((?:tit)?m|l)(?:ice|ouse)$/i, "$1ice"],
1052
+ [/(pe)(?:rson|ople)$/i, "$1ople"],
1053
+ [/(child)(?:ren)?$/i, "$1ren"],
1054
+ [/eaux$/i, "$0"],
1055
+ [/m[ae]n$/i, "men"],
1056
+ ["thou", "you"]
1057
+ ].forEach(function(rule) {
1058
+ return pluralize3.addPluralRule(rule[0], rule[1]);
1059
+ });
1060
+ [
1061
+ [/s$/i, ""],
1062
+ [/(ss)$/i, "$1"],
1063
+ [/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, "$1fe"],
1064
+ [/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, "$1f"],
1065
+ [/ies$/i, "y"],
1066
+ [/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, "$1ie"],
1067
+ [/\b(mon|smil)ies$/i, "$1ey"],
1068
+ [/\b((?:tit)?m|l)ice$/i, "$1ouse"],
1069
+ [/(seraph|cherub)im$/i, "$1"],
1070
+ [/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, "$1"],
1071
+ [/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, "$1sis"],
1072
+ [/(movie|twelve|abuse|e[mn]u)s$/i, "$1"],
1073
+ [/(test)(?:is|es)$/i, "$1is"],
1074
+ [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1us"],
1075
+ [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, "$1um"],
1076
+ [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, "$1on"],
1077
+ [/(alumn|alg|vertebr)ae$/i, "$1a"],
1078
+ [/(cod|mur|sil|vert|ind)ices$/i, "$1ex"],
1079
+ [/(matr|append)ices$/i, "$1ix"],
1080
+ [/(pe)(rson|ople)$/i, "$1rson"],
1081
+ [/(child)ren$/i, "$1"],
1082
+ [/(eau)x?$/i, "$1"],
1083
+ [/men$/i, "man"]
1084
+ ].forEach(function(rule) {
1085
+ return pluralize3.addSingularRule(rule[0], rule[1]);
1086
+ });
1087
+ [
1088
+ // Singular words with no plurals.
1089
+ "adulthood",
1090
+ "advice",
1091
+ "agenda",
1092
+ "aid",
1093
+ "aircraft",
1094
+ "alcohol",
1095
+ "ammo",
1096
+ "analytics",
1097
+ "anime",
1098
+ "athletics",
1099
+ "audio",
1100
+ "bison",
1101
+ "blood",
1102
+ "bream",
1103
+ "buffalo",
1104
+ "butter",
1105
+ "carp",
1106
+ "cash",
1107
+ "chassis",
1108
+ "chess",
1109
+ "clothing",
1110
+ "cod",
1111
+ "commerce",
1112
+ "cooperation",
1113
+ "corps",
1114
+ "debris",
1115
+ "diabetes",
1116
+ "digestion",
1117
+ "elk",
1118
+ "energy",
1119
+ "equipment",
1120
+ "excretion",
1121
+ "expertise",
1122
+ "firmware",
1123
+ "flounder",
1124
+ "fun",
1125
+ "gallows",
1126
+ "garbage",
1127
+ "graffiti",
1128
+ "hardware",
1129
+ "headquarters",
1130
+ "health",
1131
+ "herpes",
1132
+ "highjinks",
1133
+ "homework",
1134
+ "housework",
1135
+ "information",
1136
+ "jeans",
1137
+ "justice",
1138
+ "kudos",
1139
+ "labour",
1140
+ "literature",
1141
+ "machinery",
1142
+ "mackerel",
1143
+ "mail",
1144
+ "media",
1145
+ "mews",
1146
+ "moose",
1147
+ "music",
1148
+ "mud",
1149
+ "manga",
1150
+ "news",
1151
+ "only",
1152
+ "personnel",
1153
+ "pike",
1154
+ "plankton",
1155
+ "pliers",
1156
+ "police",
1157
+ "pollution",
1158
+ "premises",
1159
+ "rain",
1160
+ "research",
1161
+ "rice",
1162
+ "salmon",
1163
+ "scissors",
1164
+ "series",
1165
+ "sewage",
1166
+ "shambles",
1167
+ "shrimp",
1168
+ "software",
1169
+ "species",
1170
+ "staff",
1171
+ "swine",
1172
+ "tennis",
1173
+ "traffic",
1174
+ "transportation",
1175
+ "trout",
1176
+ "tuna",
1177
+ "wealth",
1178
+ "welfare",
1179
+ "whiting",
1180
+ "wildebeest",
1181
+ "wildlife",
1182
+ "you",
1183
+ /pok[eé]mon$/i,
1184
+ // Regexes.
1185
+ /[^aeiou]ese$/i,
1186
+ // "chinese", "japanese"
1187
+ /deer$/i,
1188
+ // "deer", "reindeer"
1189
+ /fish$/i,
1190
+ // "fish", "blowfish", "angelfish"
1191
+ /measles$/i,
1192
+ /o[iu]s$/i,
1193
+ // "carnivorous"
1194
+ /pox$/i,
1195
+ // "chickpox", "smallpox"
1196
+ /sheep$/i
1197
+ ].forEach(pluralize3.addUncountableRule);
1198
+ return pluralize3;
1199
+ });
1200
+ }
1201
+ });
1202
+
852
1203
  // src/index.ts
853
1204
  var src_exports = {};
854
1205
  __export(src_exports, {
@@ -863,6 +1214,7 @@ __export(src_exports, {
863
1214
  IconRound: () => IconRound,
864
1215
  IncludedFeatures: () => IncludedFeatures,
865
1216
  Invoices: () => Invoices,
1217
+ Loader: () => Loader,
866
1218
  MeteredFeatures: () => MeteredFeatures,
867
1219
  Modal: () => Modal,
868
1220
  ModalHeader: () => ModalHeader,
@@ -882,7 +1234,8 @@ __export(src_exports, {
882
1234
  useSchematic: () => useSchematic,
883
1235
  useSchematicContext: () => useSchematicContext,
884
1236
  useSchematicEvents: () => useSchematicEvents,
885
- useSchematicFlag: () => useSchematicFlag
1237
+ useSchematicFlag: () => useSchematicFlag,
1238
+ useSchematicIsPending: () => useSchematicIsPending
886
1239
  });
887
1240
  module.exports = __toCommonJS(src_exports);
888
1241
 
@@ -5063,7 +5416,7 @@ var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
5063
5416
  var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
5064
5417
  var inflate_1 = inflate;
5065
5418
 
5066
- // node_modules/tslib/tslib.es6.mjs
5419
+ // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
5067
5420
  var __assign = function() {
5068
5421
  __assign = Object.assign || function __assign2(t) {
5069
5422
  for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
@@ -6461,7 +6814,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
6461
6814
  }
6462
6815
  stripe._registerWrapper({
6463
6816
  name: "stripe-js",
6464
- version: "4.3.0",
6817
+ version: "4.4.0",
6465
6818
  startTime
6466
6819
  });
6467
6820
  };
@@ -6900,6 +7253,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
6900
7253
  interval: json["interval"] == null ? void 0 : json["interval"],
6901
7254
  name: json["name"],
6902
7255
  price: json["price"],
7256
+ priceExternalId: json["price_external_id"] == null ? void 0 : json["price_external_id"],
6903
7257
  quantity: json["quantity"],
6904
7258
  subscriptionId: json["subscription_id"],
6905
7259
  updatedAt: new Date(json["updated_at"])
@@ -7331,6 +7685,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7331
7685
  ),
7332
7686
  icon: json["icon"],
7333
7687
  id: json["id"],
7688
+ isDefault: json["is_default"],
7334
7689
  monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
7335
7690
  name: json["name"],
7336
7691
  planType: json["plan_type"],
@@ -7359,7 +7714,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7359
7714
  customerExternalId: json["customer_external_id"],
7360
7715
  dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
7361
7716
  environmentId: json["environment_id"],
7362
- externalId: json["external_id"],
7717
+ externalId: json["external_id"] == null ? void 0 : json["external_id"],
7363
7718
  id: json["id"],
7364
7719
  paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
7365
7720
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
@@ -7387,7 +7742,6 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7387
7742
  environmentId: json["environment_id"],
7388
7743
  externalId: json["external_id"],
7389
7744
  id: json["id"],
7390
- invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
7391
7745
  paymentMethodType: json["payment_method_type"],
7392
7746
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
7393
7747
  updatedAt: new Date(json["updated_at"])
@@ -7926,7 +8280,7 @@ var defaultTheme = {
7926
8280
  sectionLayout: "merged",
7927
8281
  colorMode: "light",
7928
8282
  primary: "#000000",
7929
- secondary: "#000000",
8283
+ secondary: "#194BFB",
7930
8284
  card: {
7931
8285
  background: "#FFFFFF",
7932
8286
  borderRadius: 10,
@@ -8012,33 +8366,6 @@ function parseEditorState(data) {
8012
8366
  });
8013
8367
  return arr;
8014
8368
  }
8015
- async function fetchComponent(id, api) {
8016
- const nodes = [];
8017
- const settings = { ...defaultSettings };
8018
- const response = await api.hydrateComponent({ componentId: id });
8019
- const { data } = response;
8020
- if (data.component?.ast) {
8021
- const compressed = data.component.ast;
8022
- const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
8023
- to: "string"
8024
- });
8025
- const ast = getEditorState(json);
8026
- if (ast) {
8027
- (0, import_lodash.default)(settings, ast.ROOT.props.settings);
8028
- nodes.push(...parseEditorState(ast));
8029
- }
8030
- }
8031
- let stripe = null;
8032
- if (data.stripeEmbed?.publishableKey) {
8033
- stripe = loadStripe(data.stripeEmbed.publishableKey);
8034
- }
8035
- return {
8036
- data,
8037
- nodes,
8038
- settings,
8039
- stripe
8040
- };
8041
- }
8042
8369
  var EmbedContext = (0, import_react2.createContext)({
8043
8370
  api: null,
8044
8371
  data: {
@@ -8049,6 +8376,9 @@ var EmbedContext = (0, import_react2.createContext)({
8049
8376
  stripe: null,
8050
8377
  layout: "portal",
8051
8378
  error: void 0,
8379
+ isPending: false,
8380
+ hydrate: () => {
8381
+ },
8052
8382
  setData: () => {
8053
8383
  },
8054
8384
  updateSettings: () => {
@@ -8075,7 +8405,10 @@ var EmbedProvider = ({
8075
8405
  settings: { ...defaultSettings },
8076
8406
  stripe: null,
8077
8407
  layout: "portal",
8408
+ isPending: false,
8078
8409
  error: void 0,
8410
+ hydrate: () => {
8411
+ },
8079
8412
  setData: () => {
8080
8413
  },
8081
8414
  updateSettings: () => {
@@ -8086,45 +8419,47 @@ var EmbedProvider = ({
8086
8419
  }
8087
8420
  };
8088
8421
  });
8089
- (0, import_react2.useEffect)(() => {
8090
- const element = document.getElementById("schematic-fonts");
8091
- if (element) {
8092
- return void (styleRef.current = element);
8093
- }
8094
- const style = document.createElement("link");
8095
- style.id = "schematic-fonts";
8096
- style.rel = "stylesheet";
8097
- document.head.appendChild(style);
8098
- styleRef.current = style;
8099
- }, []);
8100
- (0, import_react2.useEffect)(() => {
8101
- if (!accessToken) {
8102
- return;
8103
- }
8104
- const config = new Configuration({ ...apiConfig, apiKey: accessToken });
8105
- const api = new CheckoutApi(config);
8106
- setState((prev2) => ({ ...prev2, api }));
8107
- }, [accessToken, apiConfig]);
8108
- (0, import_react2.useEffect)(() => {
8109
- if (!id || !state.api) {
8110
- return;
8111
- }
8112
- fetchComponent(id, state.api).then(async (resolvedData) => {
8113
- setState((prev2) => ({ ...prev2, ...resolvedData }));
8114
- }).catch((error) => setState((prev2) => ({ ...prev2, error })));
8115
- }, [id, state.api]);
8116
- (0, import_react2.useEffect)(() => {
8117
- const fontSet = /* @__PURE__ */ new Set([]);
8118
- Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
8119
- fontSet.add(fontFamily);
8120
- });
8121
- if (fontSet.size > 0) {
8122
- const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
8123
- if (styleRef.current) {
8124
- styleRef.current.href = src;
8422
+ const hydrate = (0, import_react2.useCallback)(async () => {
8423
+ setState((prev2) => ({ ...prev2, isPending: true, error: void 0 }));
8424
+ try {
8425
+ const nodes = [];
8426
+ const settings = { ...defaultSettings };
8427
+ if (!id || !state.api) {
8428
+ return new Error("Invalid component id or api instance.");
8429
+ }
8430
+ const response = await state.api.hydrateComponent({ componentId: id });
8431
+ const { data } = response;
8432
+ if (data.component?.ast) {
8433
+ const compressed = data.component.ast;
8434
+ const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
8435
+ to: "string"
8436
+ });
8437
+ const ast = getEditorState(json);
8438
+ if (ast) {
8439
+ (0, import_lodash.default)(settings, ast.ROOT.props.settings);
8440
+ nodes.push(...parseEditorState(ast));
8441
+ }
8125
8442
  }
8443
+ let stripe = null;
8444
+ if (data.stripeEmbed?.publishableKey) {
8445
+ stripe = loadStripe(data.stripeEmbed.publishableKey);
8446
+ }
8447
+ setState((prev2) => ({
8448
+ ...prev2,
8449
+ data,
8450
+ nodes,
8451
+ settings,
8452
+ stripe,
8453
+ isPending: false
8454
+ }));
8455
+ } catch (error) {
8456
+ setState((prev2) => ({
8457
+ ...prev2,
8458
+ isPending: false,
8459
+ error: error instanceof Error ? error : new Error("An unknown error occurred.")
8460
+ }));
8126
8461
  }
8127
- }, [state.settings.theme.typography]);
8462
+ }, [id, state.api]);
8128
8463
  const setData = (0, import_react2.useCallback)(
8129
8464
  (data) => {
8130
8465
  setState((prev2) => {
@@ -8167,6 +8502,40 @@ var EmbedProvider = ({
8167
8502
  },
8168
8503
  [setState]
8169
8504
  );
8505
+ (0, import_react2.useEffect)(() => {
8506
+ const element = document.getElementById("schematic-fonts");
8507
+ if (element) {
8508
+ return void (styleRef.current = element);
8509
+ }
8510
+ const style = document.createElement("link");
8511
+ style.id = "schematic-fonts";
8512
+ style.rel = "stylesheet";
8513
+ document.head.appendChild(style);
8514
+ styleRef.current = style;
8515
+ }, []);
8516
+ (0, import_react2.useEffect)(() => {
8517
+ if (!accessToken) {
8518
+ return;
8519
+ }
8520
+ const config = new Configuration({ ...apiConfig, apiKey: accessToken });
8521
+ const api = new CheckoutApi(config);
8522
+ setState((prev2) => ({ ...prev2, api }));
8523
+ }, [accessToken, apiConfig]);
8524
+ (0, import_react2.useEffect)(() => {
8525
+ hydrate();
8526
+ }, [hydrate]);
8527
+ (0, import_react2.useEffect)(() => {
8528
+ const fontSet = /* @__PURE__ */ new Set([]);
8529
+ Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
8530
+ fontSet.add(fontFamily);
8531
+ });
8532
+ if (fontSet.size > 0) {
8533
+ const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
8534
+ if (styleRef.current) {
8535
+ styleRef.current.href = src;
8536
+ }
8537
+ }
8538
+ }, [state.settings.theme.typography]);
8170
8539
  const renderChildren = () => {
8171
8540
  if (state.stripe) {
8172
8541
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -8178,23 +8547,23 @@ var EmbedProvider = ({
8178
8547
  theme: "stripe",
8179
8548
  variables: {
8180
8549
  // Base
8181
- spacingUnit: ".25rem",
8182
- colorPrimary: "#0570de",
8550
+ fontFamily: '"Public Sans", system-ui, sans-serif',
8551
+ spacingUnit: "0.25rem",
8552
+ borderRadius: "0.5rem",
8553
+ colorText: "#30313D",
8183
8554
  colorBackground: "#FFFFFF",
8184
- colorText: "#30313d",
8185
- colorDanger: "#df1b41",
8186
- fontFamily: "Public Sans, system-ui, sans-serif",
8187
- borderRadius: ".5rem",
8555
+ colorPrimary: "#0570DE",
8556
+ colorDanger: "#DF1B41",
8188
8557
  // Layout
8189
8558
  gridRowSpacing: "1.5rem",
8190
8559
  gridColumnSpacing: "1.5rem"
8191
8560
  },
8192
8561
  rules: {
8193
8562
  ".Label": {
8194
- color: "#020202",
8563
+ fontSize: "1rem",
8195
8564
  fontWeight: "400",
8196
- fontSize: "16px",
8197
- marginBottom: "12px"
8565
+ marginBottom: "0.75rem",
8566
+ color: state.settings.theme.typography.text.color
8198
8567
  }
8199
8568
  }
8200
8569
  },
@@ -8219,6 +8588,8 @@ var EmbedProvider = ({
8219
8588
  stripe: state.stripe,
8220
8589
  layout: state.layout,
8221
8590
  error: state.error,
8591
+ isPending: state.isPending,
8592
+ hydrate,
8222
8593
  setData,
8223
8594
  updateSettings,
8224
8595
  setStripe,
@@ -8799,19 +9170,36 @@ function v4(options, buf, offset) {
8799
9170
  }
8800
9171
  var v4_default = v4;
8801
9172
  var import_polyfill = __toESM2(require_browser_polyfill());
9173
+ function contextString(context) {
9174
+ const sortedContext = Object.keys(context).reduce((acc, key) => {
9175
+ const sortedKeys = Object.keys(
9176
+ context[key] || {}
9177
+ ).sort();
9178
+ const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
9179
+ obj[sortedKey] = context[key][sortedKey];
9180
+ return obj;
9181
+ }, {});
9182
+ acc[key] = sortedObj;
9183
+ return acc;
9184
+ }, {});
9185
+ return JSON.stringify(sortedContext);
9186
+ }
8802
9187
  var anonymousIdKey = "schematicId";
8803
9188
  var Schematic = class {
8804
9189
  apiKey;
8805
9190
  apiUrl = "https://api.schematichq.com";
8806
- webSocketUrl = "wss://api.schematichq.com";
8807
- eventUrl = "https://c.schematichq.com";
8808
9191
  conn = null;
8809
9192
  context = {};
8810
9193
  eventQueue;
9194
+ eventUrl = "https://c.schematichq.com";
9195
+ flagListener;
9196
+ flagValueListeners = {};
9197
+ isPending = true;
9198
+ isPendingListeners = /* @__PURE__ */ new Set();
8811
9199
  storage;
8812
9200
  useWebSocket = false;
8813
9201
  values = {};
8814
- flagListener;
9202
+ webSocketUrl = "wss://api.schematichq.com";
8815
9203
  constructor(apiKey, options) {
8816
9204
  this.apiKey = apiKey;
8817
9205
  this.eventQueue = [];
@@ -8831,12 +9219,14 @@ var Schematic = class {
8831
9219
  if (options?.webSocketUrl !== void 0) {
8832
9220
  this.webSocketUrl = options.webSocketUrl;
8833
9221
  }
8834
- if (window?.addEventListener) {
9222
+ if (typeof window !== "undefined" && window?.addEventListener) {
8835
9223
  window.addEventListener("beforeunload", () => {
8836
9224
  this.flushEventQueue();
8837
9225
  });
8838
9226
  }
8839
9227
  }
9228
+ // Get value for a single flag
9229
+ // If in websocket mode, return the local value, otherwise make an API call
8840
9230
  async checkFlag(options) {
8841
9231
  const { fallback = false, key } = options;
8842
9232
  const context = options.context || this.context;
@@ -8864,7 +9254,7 @@ var Schematic = class {
8864
9254
  return fallback;
8865
9255
  });
8866
9256
  }
8867
- // Make a REST API call to fetch all flag values for a given context
9257
+ // Make an API call to fetch all flag values for a given context (use if not in websocket mode)
8868
9258
  checkFlags = async (context) => {
8869
9259
  context = context || this.context;
8870
9260
  const requestUrl = `${this.apiUrl}/flags/check`;
@@ -8894,18 +9284,6 @@ var Schematic = class {
8894
9284
  return false;
8895
9285
  });
8896
9286
  };
8897
- cleanup = async () => {
8898
- if (this.conn) {
8899
- try {
8900
- const socket = await this.conn;
8901
- socket.close();
8902
- } catch (error) {
8903
- console.error("Error during cleanup:", error);
8904
- } finally {
8905
- this.conn = null;
8906
- }
8907
- }
8908
- };
8909
9287
  // Send an identify event
8910
9288
  identify = (body) => {
8911
9289
  this.setContext({
@@ -8923,12 +9301,16 @@ var Schematic = class {
8923
9301
  this.context = context;
8924
9302
  return Promise.resolve();
8925
9303
  }
8926
- if (!this.conn) {
8927
- this.conn = this.wsConnect();
9304
+ try {
9305
+ this.setIsPending(true);
9306
+ if (!this.conn) {
9307
+ this.conn = this.wsConnect();
9308
+ }
9309
+ const socket = await this.conn;
9310
+ await this.wsSendMessage(socket, context);
9311
+ } catch (error) {
9312
+ console.error("Error setting Schematic context:", error);
8928
9313
  }
8929
- return this.conn.then((socket) => {
8930
- return this.wsSendMessage(socket, context);
8931
- });
8932
9314
  };
8933
9315
  // Send track event
8934
9316
  track = (body) => {
@@ -8940,6 +9322,9 @@ var Schematic = class {
8940
9322
  user: user ?? this.context.user
8941
9323
  });
8942
9324
  };
9325
+ /**
9326
+ * Event processing
9327
+ */
8943
9328
  flushEventQueue = () => {
8944
9329
  while (this.eventQueue.length > 0) {
8945
9330
  const event = this.eventQueue.shift();
@@ -8995,6 +9380,22 @@ var Schematic = class {
8995
9380
  this.eventQueue.push(event);
8996
9381
  return Promise.resolve();
8997
9382
  };
9383
+ /**
9384
+ * Websocket management
9385
+ */
9386
+ cleanup = async () => {
9387
+ if (this.conn) {
9388
+ try {
9389
+ const socket = await this.conn;
9390
+ socket.close();
9391
+ } catch (error) {
9392
+ console.error("Error during cleanup:", error);
9393
+ } finally {
9394
+ this.conn = null;
9395
+ }
9396
+ }
9397
+ };
9398
+ // Open a websocket connection
8998
9399
  wsConnect = () => {
8999
9400
  return new Promise((resolve, reject) => {
9000
9401
  const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
@@ -9010,6 +9411,8 @@ var Schematic = class {
9010
9411
  };
9011
9412
  });
9012
9413
  };
9414
+ // Send a message on the websocket indicating interest in a particular evaluation context
9415
+ // and wait for the initial set of flag values to be returned
9013
9416
  wsSendMessage = (socket, context) => {
9014
9417
  return new Promise((resolve, reject) => {
9015
9418
  if (contextString(context) == contextString(this.context)) {
@@ -9027,16 +9430,17 @@ var Schematic = class {
9027
9430
  (message.flags ?? []).forEach(
9028
9431
  (flag) => {
9029
9432
  this.values[contextString(context)][flag.flag] = flag.value;
9433
+ this.notifyFlagValueListeners(flag.flag);
9030
9434
  }
9031
9435
  );
9032
9436
  if (this.flagListener) {
9033
- this.flagListener(this.values[contextString(context)]);
9437
+ this.flagListener(this.getFlagValues());
9034
9438
  }
9439
+ this.setIsPending(false);
9035
9440
  if (!resolved) {
9036
9441
  resolved = true;
9037
9442
  resolve();
9038
9443
  }
9039
- socket.removeEventListener("message", messageHandler);
9040
9444
  };
9041
9445
  socket.addEventListener("message", messageHandler);
9042
9446
  socket.send(
@@ -9055,72 +9459,93 @@ var Schematic = class {
9055
9459
  }
9056
9460
  });
9057
9461
  };
9462
+ /**
9463
+ * State management
9464
+ */
9465
+ // isPending state
9466
+ getIsPending = () => {
9467
+ return this.isPending;
9468
+ };
9469
+ addIsPendingListener = (listener) => {
9470
+ this.isPendingListeners.add(listener);
9471
+ return () => {
9472
+ this.isPendingListeners.delete(listener);
9473
+ };
9474
+ };
9475
+ setIsPending = (isPending) => {
9476
+ this.isPending = isPending;
9477
+ this.isPendingListeners.forEach((listener) => listener());
9478
+ };
9479
+ // flagValues state
9480
+ getFlagValue = (flagKey) => {
9481
+ const values = this.getFlagValues();
9482
+ return values[flagKey];
9483
+ };
9484
+ getFlagValues = () => {
9485
+ const contextStr = contextString(this.context);
9486
+ return this.values[contextStr] ?? {};
9487
+ };
9488
+ addFlagValueListener = (flagKey, listener) => {
9489
+ if (!(flagKey in this.flagValueListeners)) {
9490
+ this.flagValueListeners[flagKey] = /* @__PURE__ */ new Set();
9491
+ }
9492
+ this.flagValueListeners[flagKey].add(listener);
9493
+ return () => {
9494
+ this.flagValueListeners[flagKey].delete(listener);
9495
+ };
9496
+ };
9497
+ notifyFlagValueListeners = (flagKey) => {
9498
+ const listeners = this.flagValueListeners?.[flagKey] ?? [];
9499
+ listeners.forEach((listener) => listener());
9500
+ };
9058
9501
  };
9059
- function contextString(context) {
9060
- const sortedContext = Object.keys(context).reduce((acc, key) => {
9061
- const sortedKeys = Object.keys(
9062
- context[key] || {}
9063
- ).sort();
9064
- const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
9065
- obj[sortedKey] = context[key][sortedKey];
9066
- return obj;
9067
- }, {});
9068
- acc[key] = sortedObj;
9069
- return acc;
9070
- }, {});
9071
- return JSON.stringify(sortedContext);
9072
- }
9073
9502
 
9074
9503
  // src/context/schematic.tsx
9075
- var import_react3 = require("react");
9504
+ var import_react3 = __toESM(require("react"));
9076
9505
  var import_jsx_runtime2 = require("react/jsx-runtime");
9077
- var SchematicContext = (0, import_react3.createContext)({
9078
- flagValues: {}
9079
- });
9506
+ var SchematicContext = (0, import_react3.createContext)(
9507
+ null
9508
+ );
9080
9509
  var SchematicProvider = ({
9081
9510
  children,
9082
9511
  client: providedClient,
9083
9512
  publishableKey,
9084
9513
  ...clientOpts
9085
9514
  }) => {
9086
- const [client, setClient] = (0, import_react3.useState)();
9087
- const [flagValues, setFlagValues] = (0, import_react3.useState)({});
9088
- const memoizedClientOpts = (0, import_react3.useMemo)(
9089
- () => clientOpts,
9090
- /* eslint-disable-next-line react-hooks/exhaustive-deps */
9091
- [JSON.stringify(clientOpts)]
9092
- );
9093
- const { useWebSocket = true } = clientOpts;
9094
- (0, import_react3.useEffect)(() => {
9095
- let cleanupFunction;
9515
+ const client = (0, import_react3.useMemo)(() => {
9516
+ const { useWebSocket = true } = clientOpts;
9096
9517
  if (providedClient) {
9097
- setClient(providedClient);
9098
- cleanupFunction = () => {
9099
- providedClient.cleanup().catch((error) => {
9100
- console.error("Error during cleanup:", error);
9101
- });
9102
- };
9103
- } else {
9104
- const newClient = new Schematic(publishableKey, {
9105
- ...memoizedClientOpts,
9106
- flagListener: setFlagValues,
9107
- useWebSocket
9108
- });
9109
- setClient(newClient);
9110
- cleanupFunction = () => {
9111
- newClient.cleanup().catch((error) => {
9518
+ return providedClient;
9519
+ }
9520
+ return new Schematic(publishableKey, {
9521
+ useWebSocket,
9522
+ ...clientOpts
9523
+ });
9524
+ }, [providedClient, publishableKey, clientOpts]);
9525
+ (0, import_react3.useEffect)(() => {
9526
+ return () => {
9527
+ if (!providedClient) {
9528
+ client.cleanup().catch((error) => {
9112
9529
  console.error("Error during cleanup:", error);
9113
9530
  });
9114
- };
9115
- }
9116
- return cleanupFunction;
9117
- }, [memoizedClientOpts, providedClient, publishableKey, useWebSocket]);
9118
- const contextValue = {
9119
- client,
9120
- flagValues
9121
- };
9531
+ }
9532
+ };
9533
+ }, [client, providedClient]);
9534
+ const contextValue = (0, import_react3.useMemo)(
9535
+ () => ({
9536
+ client
9537
+ }),
9538
+ [client]
9539
+ );
9122
9540
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SchematicContext.Provider, { value: contextValue, children });
9123
9541
  };
9542
+ var useSchematic = () => {
9543
+ const context = import_react3.default.useContext(SchematicContext);
9544
+ if (context === null) {
9545
+ throw new Error("useSchematic must be used within a SchematicProvider");
9546
+ }
9547
+ return context;
9548
+ };
9124
9549
 
9125
9550
  // src/hooks/embed.ts
9126
9551
  var import_react4 = require("react");
@@ -9128,46 +9553,63 @@ var useEmbed = () => (0, import_react4.useContext)(EmbedContext);
9128
9553
 
9129
9554
  // src/hooks/schematic.ts
9130
9555
  var import_react5 = require("react");
9131
- var useSchematic = () => (0, import_react5.useContext)(SchematicContext);
9132
9556
  var useSchematicClient = (opts) => {
9133
9557
  const schematic = useSchematic();
9134
9558
  const { client } = opts ?? {};
9135
- if (client) {
9136
- return client;
9137
- }
9138
- return schematic.client;
9559
+ return (0, import_react5.useMemo)(() => {
9560
+ if (client) {
9561
+ return client;
9562
+ }
9563
+ return schematic.client;
9564
+ }, [client, schematic.client]);
9139
9565
  };
9140
9566
  var useSchematicContext = (opts) => {
9141
9567
  const client = useSchematicClient(opts);
9142
- const { setContext } = client ?? {};
9143
- return { setContext };
9568
+ return (0, import_react5.useMemo)(
9569
+ () => ({
9570
+ setContext: client.setContext.bind(client)
9571
+ }),
9572
+ [client]
9573
+ );
9144
9574
  };
9145
9575
  var useSchematicEvents = (opts) => {
9146
9576
  const client = useSchematicClient(opts);
9147
- const { track, identify } = client ?? {};
9148
- return { track, identify };
9577
+ const track = (0, import_react5.useCallback)(
9578
+ (...args) => client.track(...args),
9579
+ [client]
9580
+ );
9581
+ const identify = (0, import_react5.useCallback)(
9582
+ (...args) => client.identify(...args),
9583
+ [client]
9584
+ );
9585
+ return (0, import_react5.useMemo)(() => ({ track, identify }), [track, identify]);
9149
9586
  };
9150
9587
  var useSchematicFlag = (key, opts) => {
9151
- const { flagValues } = useSchematic();
9152
- const { client } = opts ?? {};
9153
- const { fallback = false } = opts ?? {};
9154
- const [value, setValue] = (0, import_react5.useState)(fallback);
9155
- const flagValue = flagValues[key];
9156
- (0, import_react5.useEffect)(() => {
9157
- if (typeof flagValue !== "undefined") {
9158
- setValue(flagValue);
9159
- } else if (client) {
9160
- client.checkFlag({ key, fallback }).then(setValue);
9161
- } else {
9162
- setValue(fallback);
9163
- }
9164
- }, [key, fallback, flagValue, client]);
9165
- return value;
9588
+ const client = useSchematicClient(opts);
9589
+ const fallback = opts?.fallback ?? false;
9590
+ const subscribe = (0, import_react5.useCallback)(
9591
+ (callback) => client.addFlagValueListener(key, callback),
9592
+ [client, key]
9593
+ );
9594
+ const getSnapshot = (0, import_react5.useCallback)(() => {
9595
+ const value = client.getFlagValue(key);
9596
+ return typeof value === "undefined" ? fallback : value;
9597
+ }, [client, key, fallback]);
9598
+ return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
9599
+ };
9600
+ var useSchematicIsPending = (opts) => {
9601
+ const client = useSchematicClient(opts);
9602
+ const subscribe = (0, import_react5.useCallback)(
9603
+ (callback) => client.addIsPendingListener(callback),
9604
+ [client]
9605
+ );
9606
+ const getSnapshot = (0, import_react5.useCallback)(() => client.getIsPending(), [client]);
9607
+ return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
9166
9608
  };
9167
9609
 
9168
9610
  // src/components/elements/plan-manager/PlanManager.tsx
9169
- var import_react10 = require("react");
9170
- var import_react_dom = require("react-dom");
9611
+ var import_react11 = require("react");
9612
+ var import_react_dom2 = require("react-dom");
9171
9613
 
9172
9614
  // src/utils/color.ts
9173
9615
  function hexToHSL(color) {
@@ -9248,7 +9690,7 @@ function hslToHex({ h, s: s2, l: l2 }) {
9248
9690
  }
9249
9691
  function adjustLightness(color, amount) {
9250
9692
  const { h, s: s2, l: l2 } = hexToHSL(color);
9251
- return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount, 100), 0) });
9693
+ return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount * 100, 100), 0) });
9252
9694
  }
9253
9695
  function lighten(color, amount) {
9254
9696
  return adjustLightness(color, amount);
@@ -9478,6 +9920,7 @@ var Container = dt.div`
9478
9920
  align-items: center;
9479
9921
  flex-shrink: 0;
9480
9922
  border-radius: 9999px;
9923
+
9481
9924
  ${({ $size }) => {
9482
9925
  const base = 24;
9483
9926
  let scale = 1;
@@ -9495,6 +9938,15 @@ var Container = dt.div`
9495
9938
  case "lg":
9496
9939
  scale *= 1.75;
9497
9940
  break;
9941
+ case "xl":
9942
+ scale *= 2;
9943
+ break;
9944
+ case "2xl":
9945
+ scale *= 2.5;
9946
+ break;
9947
+ case "3xl":
9948
+ scale *= 3;
9949
+ break;
9498
9950
  }
9499
9951
  return lt`
9500
9952
  font-size: ${base * scale / TEXT_BASE_SIZE}rem;
@@ -9503,12 +9955,19 @@ var Container = dt.div`
9503
9955
  height: ${(base + 8) * scale / TEXT_BASE_SIZE}rem;
9504
9956
  `;
9505
9957
  }}
9958
+
9506
9959
  ${({ $variant, $colors }) => $variant === "outline" ? lt`
9507
- color: ${$colors[0]};
9508
9960
  background-color: transparent;
9961
+
9962
+ ${Icon} {
9963
+ color: ${$colors[0]};
9964
+ }
9509
9965
  ` : lt`
9510
- color: ${$colors[0]};
9511
9966
  background-color: ${$colors[1]};
9967
+
9968
+ ${Icon} {
9969
+ color: ${$colors[0]};
9970
+ }
9512
9971
  `}
9513
9972
  `;
9514
9973
 
@@ -9530,14 +9989,36 @@ var IconRound = ({
9530
9989
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
9531
9990
  };
9532
9991
 
9533
- // src/components/ui/modal/Modal.tsx
9534
- var import_react6 = require("react");
9535
- var import_jsx_runtime6 = require("react/jsx-runtime");
9536
- var Modal = ({ children, onClose }) => {
9537
- const theme = nt();
9538
- const { setLayout } = useEmbed();
9539
- const ref = (0, import_react6.useRef)(null);
9540
- const handleClose = (0, import_react6.useCallback)(() => {
9992
+ // src/components/ui/loader/styles.ts
9993
+ var spin = mt`
9994
+ 0% {
9995
+ transform: rotate(0deg);
9996
+ }
9997
+ 100% {
9998
+ transform: rotate(360deg);
9999
+ }
10000
+ `;
10001
+ var Loader = dt.div`
10002
+ border: ${4 / TEXT_BASE_SIZE}rem solid hsla(0, 0%, 50%, 0.125);
10003
+ border-top: ${4 / TEXT_BASE_SIZE}rem solid ${({ theme }) => theme.secondary};
10004
+ border-radius: 50%;
10005
+ width: ${56 / TEXT_BASE_SIZE}rem;
10006
+ height: ${56 / TEXT_BASE_SIZE}rem;
10007
+ animation: ${spin} 1.5s linear infinite;
10008
+ display: inline-block;
10009
+ `;
10010
+
10011
+ // src/components/ui/modal/Modal.tsx
10012
+ var import_react6 = require("react");
10013
+ var import_jsx_runtime6 = require("react/jsx-runtime");
10014
+ var Modal = ({ children, size = "auto", onClose }) => {
10015
+ const theme = nt();
10016
+ const { setLayout } = useEmbed();
10017
+ const ref = (0, import_react6.useRef)(null);
10018
+ const isLightBackground = (0, import_react6.useMemo)(() => {
10019
+ return hexToHSL(theme.card.background).l > 50;
10020
+ }, [theme.card.background]);
10021
+ const handleClose = (0, import_react6.useCallback)(() => {
9541
10022
  setLayout("portal");
9542
10023
  onClose?.();
9543
10024
  }, [setLayout, onClose]);
@@ -9566,7 +10047,7 @@ var Modal = ({ children, onClose }) => {
9566
10047
  $transform: "translate(-50%, -50%)",
9567
10048
  $width: "100%",
9568
10049
  $height: "100%",
9569
- $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
10050
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 85%, 0.8)" : "hsla(0, 0%, 15%, 0.8)",
9570
10051
  $overflow: "hidden",
9571
10052
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9572
10053
  Flex,
@@ -9577,9 +10058,13 @@ var Modal = ({ children, onClose }) => {
9577
10058
  $transform: "translate(-50%, -50%)",
9578
10059
  $flexDirection: "column",
9579
10060
  $overflow: "hidden",
9580
- $width: "calc(100% - 5rem)",
9581
- $height: "calc(100% - 5rem)",
9582
- $backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 2.5) : lighten(theme.card.background, 2.5),
10061
+ ...size === "auto" ? { $width: "min-content", $height: "min-content" } : {
10062
+ $width: "100%",
10063
+ $height: "100%",
10064
+ $maxWidth: "1366px",
10065
+ $maxHeight: "768px"
10066
+ },
10067
+ $backgroundColor: theme.card.background,
9583
10068
  $borderRadius: "0.5rem",
9584
10069
  $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
9585
10070
  id: "select-plan-dialog",
@@ -9596,9 +10081,16 @@ var Modal = ({ children, onClose }) => {
9596
10081
  // src/components/ui/modal/ModalHeader.tsx
9597
10082
  var import_react7 = require("react");
9598
10083
  var import_jsx_runtime7 = require("react/jsx-runtime");
9599
- var ModalHeader = ({ children, onClose }) => {
10084
+ var ModalHeader = ({
10085
+ children,
10086
+ bordered = false,
10087
+ onClose
10088
+ }) => {
9600
10089
  const theme = nt();
9601
10090
  const { setLayout } = useEmbed();
10091
+ const isLightBackground = (0, import_react7.useMemo)(() => {
10092
+ return hexToHSL(theme.card.background).l > 50;
10093
+ }, [theme.card.background]);
9602
10094
  const handleClose = (0, import_react7.useCallback)(() => {
9603
10095
  setLayout("portal");
9604
10096
  onClose?.();
@@ -9606,15 +10098,17 @@ var ModalHeader = ({ children, onClose }) => {
9606
10098
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
9607
10099
  Flex,
9608
10100
  {
9609
- $justifyContent: "space-between",
10101
+ $justifyContent: children ? "space-between" : "end",
9610
10102
  $alignItems: "center",
10103
+ $flexShrink: "0",
9611
10104
  $gap: "1rem",
9612
- $height: "3.75rem",
9613
- $padding: "0 0.625rem 0 2.5rem",
9614
- $backgroundColor: theme.card.background,
9615
- $borderBottomWidth: "1px",
9616
- $borderBottomStyle: "solid",
9617
- $borderBottomColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 15) : lighten(theme.card.background, 15),
10105
+ $height: "5rem",
10106
+ $padding: "0 1.5rem 0 3rem",
10107
+ ...bordered && {
10108
+ $borderBottomWidth: "1px",
10109
+ $borderBottomStyle: "solid",
10110
+ $borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
10111
+ },
9618
10112
  children: [
9619
10113
  children,
9620
10114
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -9623,7 +10117,7 @@ var ModalHeader = ({ children, onClose }) => {
9623
10117
  name: "close",
9624
10118
  style: {
9625
10119
  fontSize: 36,
9626
- color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 27.5) : lighten(theme.card.background, 27.5)
10120
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
9627
10121
  }
9628
10122
  }
9629
10123
  ) })
@@ -9675,14 +10169,14 @@ var ProgressBar = ({
9675
10169
  $overflow: "hidden",
9676
10170
  $width: "100%",
9677
10171
  $height: `${8 / TEXT_BASE_SIZE}rem`,
9678
- $background: "#F2F4F7",
10172
+ $backgroundColor: "#F2F4F7",
9679
10173
  $borderRadius: "9999px",
9680
10174
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
9681
10175
  Box,
9682
10176
  {
9683
10177
  $width: `${Math.min(progress, 100)}%`,
9684
10178
  $height: "100%",
9685
- $background: barColorMap[color],
10179
+ $backgroundColor: barColorMap[color],
9686
10180
  $borderRadius: "9999px"
9687
10181
  }
9688
10182
  )
@@ -9701,12 +10195,12 @@ var ProgressBar = ({
9701
10195
  };
9702
10196
 
9703
10197
  // src/components/elements/plan-manager/CheckoutDialog.tsx
9704
- var import_react9 = require("react");
10198
+ var import_react10 = require("react");
10199
+ var import_pluralize = __toESM(require_pluralize());
9705
10200
 
9706
- // src/components/elements/plan-manager/PaymentForm.tsx
10201
+ // src/components/elements/payment-method/PaymentMethod.tsx
9707
10202
  var import_react8 = require("react");
9708
- var import_react_stripe_js2 = require("@stripe/react-stripe-js");
9709
- var import_react_stripe_js3 = require("@stripe/react-stripe-js");
10203
+ var import_react_dom = require("react-dom");
9710
10204
 
9711
10205
  // src/components/elements/plan-manager/styles.ts
9712
10206
  var StyledButton = dt(Button2)`
@@ -9742,7 +10236,7 @@ var StyledButton = dt(Button2)`
9742
10236
  if (disabled) {
9743
10237
  const { l: l2 } = hexToHSL(theme.card.background);
9744
10238
  color = hslToHex({ h: 0, s: 0, l: l2 });
9745
- color = l2 > 50 ? darken(color, 7.5) : lighten(color, 7.5);
10239
+ color = l2 > 50 ? darken(color, 0.075) : lighten(color, 0.15);
9746
10240
  }
9747
10241
  return $variant === "filled" ? lt`
9748
10242
  background-color: ${color};
@@ -9765,8 +10259,8 @@ var StyledButton = dt(Button2)`
9765
10259
  &:not(:disabled):hover {
9766
10260
  ${({ $color = "primary", theme, $variant = "filled" }) => {
9767
10261
  const specified = theme[$color];
9768
- const lightened = lighten(specified, 15);
9769
- const color = specified === lightened ? darken(specified, 15) : lightened;
10262
+ const lightened = lighten(specified, 0.15);
10263
+ const color = specified === lightened ? darken(specified, 0.15) : lightened;
9770
10264
  const { l: l2 } = hexToHSL(theme[$color]);
9771
10265
  const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
9772
10266
  return $variant === "filled" ? lt`
@@ -9788,1476 +10282,1688 @@ var StyledButton = dt(Button2)`
9788
10282
  switch ($size) {
9789
10283
  case "sm":
9790
10284
  return lt`
9791
- font-size: ${15 / 16}rem;
9792
- padding: ${12 / 16}rem 0;
9793
- border-radius: ${6 / 16}rem;
10285
+ font-size: ${15 / TEXT_BASE_SIZE}rem;
10286
+ padding: ${12 / TEXT_BASE_SIZE}rem 0;
10287
+ border-radius: ${6 / TEXT_BASE_SIZE}rem;
9794
10288
  `;
9795
10289
  case "md":
9796
10290
  return lt`
9797
- font-size: ${17 / 16}rem;
9798
- padding: ${16 / 16}rem 0;
9799
- border-radius: ${8 / 16}rem;
10291
+ font-size: ${17 / TEXT_BASE_SIZE}rem;
10292
+ padding: ${16 / TEXT_BASE_SIZE}rem 0;
10293
+ border-radius: ${8 / TEXT_BASE_SIZE}rem;
9800
10294
  `;
9801
10295
  case "lg":
9802
10296
  return lt`
9803
- font-size: ${19 / 16}rem;
9804
- padding: ${20 / 16}rem 0;
9805
- border-radius: ${10 / 16}rem;
10297
+ font-size: ${19 / TEXT_BASE_SIZE}rem;
10298
+ padding: ${20 / TEXT_BASE_SIZE}rem 0;
10299
+ border-radius: ${10 / TEXT_BASE_SIZE}rem;
9806
10300
  `;
9807
10301
  }
9808
10302
  }}
9809
10303
  `;
9810
10304
 
9811
- // src/components/elements/plan-manager/PaymentForm.tsx
10305
+ // src/components/elements/payment-method/PaymentMethod.tsx
9812
10306
  var import_jsx_runtime9 = require("react/jsx-runtime");
9813
- var PaymentForm = ({ plan, period, onConfirm }) => {
9814
- const stripe = (0, import_react_stripe_js3.useStripe)();
9815
- const elements = (0, import_react_stripe_js3.useElements)();
9816
- const { api, data } = useEmbed();
9817
- const [message, setMessage] = (0, import_react8.useState)(null);
9818
- const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
9819
- const [isConfirmed, setIsConfirmed] = (0, import_react8.useState)(false);
9820
- const handleSubmit = async (event) => {
9821
- event.preventDefault();
9822
- const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
9823
- if (!api || !stripe || !elements || !priceId) {
9824
- return;
9825
- }
9826
- setIsLoading(true);
9827
- setIsConfirmed(false);
9828
- try {
9829
- const { setupIntent, error } = await stripe.confirmSetup({
9830
- elements,
9831
- confirmParams: {
9832
- return_url: window.location.href
9833
- },
9834
- redirect: "if_required"
9835
- });
9836
- if (onConfirm && typeof setupIntent?.payment_method === "string") {
9837
- onConfirm(setupIntent.payment_method);
9838
- setIsConfirmed(true);
9839
- } else {
9840
- }
9841
- if (error?.type === "card_error" || error?.type === "validation_error") {
9842
- setMessage(error.message);
9843
- }
9844
- setIsLoading(false);
9845
- } catch (error) {
9846
- if (error instanceof Error) {
9847
- setMessage(error.message);
9848
- } else {
9849
- setMessage("An unexpected error occured.");
9850
- }
9851
- setIsLoading(false);
10307
+ var resolveDesignProps = (props) => {
10308
+ return {
10309
+ header: {
10310
+ isVisible: props.header?.isVisible ?? true,
10311
+ fontStyle: props.header?.fontStyle ?? "heading4"
10312
+ },
10313
+ functions: {
10314
+ allowEdit: props.functions?.allowEdit ?? true
9852
10315
  }
9853
10316
  };
9854
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
9855
- "form",
9856
- {
9857
- id: "payment-form",
9858
- onSubmit: handleSubmit,
9859
- style: {
9860
- display: "flex",
9861
- flexDirection: "column",
9862
- height: "100%",
9863
- overflowX: "hidden",
9864
- overflowY: "auto"
9865
- },
9866
- children: [
9867
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { $size: 18, children: "Add payment method" }) }),
9868
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9869
- Flex,
9870
- {
9871
- $flexDirection: "column",
9872
- $gap: "1.5rem",
9873
- $marginBottom: "1.5rem",
9874
- $width: "100%",
9875
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9876
- import_react_stripe_js2.LinkAuthenticationElement,
9877
- {
9878
- id: "link-authentication-element"
9879
- }
9880
- )
9881
- }
9882
- ),
9883
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexDirection: "column", $width: "100%", $flex: "1", $height: "100%", children: [
9884
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }),
9885
- message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "payment-message", children: message })
9886
- ] }),
9887
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9888
- StyledButton,
9889
- {
9890
- id: "submit",
9891
- disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
9892
- $size: "md",
9893
- $color: "primary",
9894
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: !isLoading ? "Loading" : "Save payment method" })
9895
- }
9896
- ) })
9897
- ]
9898
- }
9899
- );
9900
10317
  };
9901
-
9902
- // src/components/elements/plan-manager/CheckoutDialog.tsx
9903
- var import_jsx_runtime10 = require("react/jsx-runtime");
9904
- var CheckoutDialog = () => {
9905
- const [checkoutStage, setCheckoutStage] = (0, import_react9.useState)(
9906
- "plan"
9907
- );
9908
- const [planPeriod, setPlanPeriod] = (0, import_react9.useState)("month");
9909
- const [selectedPlan, setSelectedPlan] = (0, import_react9.useState)();
9910
- const [paymentMethodId, setPaymentMethodId] = (0, import_react9.useState)();
9911
- const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
9912
- const [isCheckoutComplete, setIsCheckoutComplete] = (0, import_react9.useState)(false);
10318
+ var PaymentMethod = (0, import_react8.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10319
+ const props = resolveDesignProps(rest);
9913
10320
  const theme = nt();
9914
- const { api, data, settings } = useEmbed();
9915
- const { currentPlan, availablePlans } = (0, import_react9.useMemo)(() => {
10321
+ const { data, layout } = useEmbed();
10322
+ const paymentMethod = (0, import_react8.useMemo)(() => {
10323
+ const { paymentMethodType, cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
10324
+ let monthsToExpiration;
10325
+ if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
10326
+ const today = /* @__PURE__ */ new Date();
10327
+ const currentYear = today.getFullYear();
10328
+ const currentMonth = today.getMonth();
10329
+ const timeToExpiration = Math.round(
10330
+ +new Date(cardExpYear, cardExpMonth - 1) - +new Date(currentYear, currentMonth)
10331
+ );
10332
+ monthsToExpiration = Math.round(
10333
+ timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
10334
+ );
10335
+ }
9916
10336
  return {
9917
- currentPlan: data.company?.plan,
9918
- availablePlans: data.activePlans
10337
+ paymentMethodType,
10338
+ cardLast4,
10339
+ monthsToExpiration
9919
10340
  };
9920
- }, [data.company, data.activePlans]);
9921
- const savingsPercentage = (0, import_react9.useMemo)(() => {
9922
- if (selectedPlan) {
9923
- const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
9924
- const yearly = selectedPlan?.yearlyPrice?.price || 0;
9925
- return Math.round((monthly - yearly) / monthly * 1e4) / 100;
9926
- }
9927
- return 0;
9928
- }, [selectedPlan]);
9929
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { children: [
9930
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
9931
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
9932
- checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
9933
- Box,
9934
- {
9935
- $width: "0.9375rem",
9936
- $height: "0.9375rem",
9937
- $borderWidth: "2px",
9938
- $borderStyle: "solid",
9939
- $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9940
- $borderRadius: "9999px"
9941
- }
9942
- ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
9943
- IconRound,
9944
- {
9945
- name: "check",
9946
- style: {
9947
- color: theme.card.background,
9948
- backgroundColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9949
- fontSize: 16,
9950
- width: "1rem",
9951
- height: "1rem"
10341
+ }, [data.subscription?.paymentMethod]);
10342
+ const isLightBackground = (0, import_react8.useMemo)(() => {
10343
+ return hexToHSL(theme.card.background).l > 50;
10344
+ }, [theme.card.background]);
10345
+ if (!paymentMethod.paymentMethodType) {
10346
+ return null;
10347
+ }
10348
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref, className, children: [
10349
+ props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
10350
+ Flex,
10351
+ {
10352
+ $justifyContent: "space-between",
10353
+ $alignItems: "center",
10354
+ $margin: "0 0 1rem",
10355
+ children: [
10356
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10357
+ Text,
10358
+ {
10359
+ $font: theme.typography[props.header.fontStyle].fontFamily,
10360
+ $size: theme.typography[props.header.fontStyle].fontSize,
10361
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
10362
+ $color: theme.typography[props.header.fontStyle].color,
10363
+ children: "Payment Method"
9952
10364
  }
9953
- }
9954
- ),
9955
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
9956
- Box,
9957
- {
9958
- tabIndex: 0,
9959
- ...checkoutStage === "plan" ? {
9960
- style: {
9961
- fontWeight: "700"
9962
- }
9963
- } : {
9964
- style: {
9965
- cursor: "pointer"
9966
- },
9967
- onClick: () => setCheckoutStage("plan")
9968
- },
9969
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "1. Select plan" })
9970
- }
9971
- ),
9972
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
9973
- Icon2,
9974
- {
9975
- name: "chevron-right",
9976
- style: {
9977
- fontSize: 16,
9978
- color: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5)
10365
+ ),
10366
+ typeof paymentMethod.monthsToExpiration === "number" && paymentMethod.monthsToExpiration < 4 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10367
+ Text,
10368
+ {
10369
+ $font: theme.typography.text.fontFamily,
10370
+ $size: 14,
10371
+ $color: "#DB6769",
10372
+ children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
9979
10373
  }
9980
- }
9981
- )
9982
- ] }),
9983
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
9984
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
9985
- Box,
9986
- {
9987
- $width: "0.9375rem",
9988
- $height: "0.9375rem",
9989
- $borderWidth: "2px",
9990
- $borderStyle: "solid",
9991
- $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 12.5) : lighten(theme.card.background, 12.5),
9992
- $borderRadius: "9999px"
9993
- }
9994
- ),
9995
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
9996
- Box,
9997
- {
9998
- tabIndex: 0,
9999
- ...checkoutStage === "checkout" && {
10000
- style: {
10001
- fontWeight: "700"
10002
- }
10003
- },
10004
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { children: "2. Checkout" })
10005
- }
10006
- )
10007
- ] })
10008
- ] }) }) }),
10009
- isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "center", $alignItems: "center", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10010
- Text,
10374
+ )
10375
+ ]
10376
+ }
10377
+ ),
10378
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10379
+ Flex,
10011
10380
  {
10012
- as: "h1",
10013
- $font: theme.typography.heading1.fontFamily,
10014
- $size: theme.typography.heading1.fontSize,
10015
- $weight: theme.typography.heading1.fontWeight,
10016
- $color: theme.typography.heading1.color,
10017
- children: "Subscription updated!"
10381
+ $justifyContent: "space-between",
10382
+ $alignItems: "center",
10383
+ $margin: "0 0 1rem",
10384
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
10385
+ $padding: "0.375rem 1rem",
10386
+ $borderRadius: "9999px",
10387
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: paymentMethod.cardLast4 ? `\u{1F4B3} Card ending in ${paymentMethod.cardLast4}` : "Other existing payment method" })
10018
10388
  }
10019
- ) }),
10020
- !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $position: "relative", $flexGrow: "1", children: [
10021
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10022
- Flex,
10023
- {
10024
- $position: "absolute",
10025
- $top: "0",
10026
- $left: "0",
10027
- $flexDirection: "column",
10028
- $gap: "1rem",
10029
- $padding: "2rem 2.5rem 2rem 2.5rem",
10030
- $backgroundColor: darken(settings.theme.card.background, 2.5),
10031
- $flex: "1",
10032
- $width: "72.5%",
10033
- $height: "100%",
10034
- $overflow: "auto",
10035
- children: [
10036
- checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10037
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
10038
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10039
- Text,
10040
- {
10041
- as: "h1",
10042
- id: "select-plan-dialog-label",
10043
- $size: 18,
10044
- $marginBottom: "0.5rem",
10045
- children: "Select plan"
10046
- }
10047
- ),
10048
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10049
- Text,
10050
- {
10051
- as: "p",
10052
- id: "select-plan-dialog-description",
10053
- $size: 14,
10054
- $weight: 400,
10055
- children: "Choose your base plan"
10056
- }
10057
- )
10058
- ] }),
10059
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
10060
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10061
- Flex,
10062
- {
10063
- $height: "100%",
10064
- $flexDirection: "column",
10065
- $backgroundColor: settings.theme.card.background,
10066
- $flex: "1",
10067
- $outlineWidth: "2px",
10068
- $outlineStyle: "solid",
10069
- $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
10070
- $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
10071
- ...settings.theme.card.hasShadow && {
10072
- $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
10073
- },
10074
- children: [
10075
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10076
- Flex,
10077
- {
10078
- $flexDirection: "column",
10079
- $position: "relative",
10080
- $gap: "1rem",
10081
- $width: "100%",
10082
- $height: "auto",
10083
- $padding: `${settings.theme.card.padding / 16}rem`,
10084
- $borderBottomWidth: "1px",
10085
- $borderStyle: "solid",
10086
- $borderColor: hexToHSL(theme.card.background).l > 50 ? darken(theme.card.background, 17.5) : lighten(theme.card.background, 17.5),
10087
- children: [
10088
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
10089
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, children: plan.description }),
10090
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { children: [
10091
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10092
- (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
10389
+ ),
10390
+ layout === "payment" && (0, import_react_dom.createPortal)(
10391
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal, { size: "md", children: [
10392
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
10393
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
10394
+ Flex,
10395
+ {
10396
+ $flexDirection: "column",
10397
+ $padding: "2.5rem",
10398
+ $height: "100%",
10399
+ $gap: "1.5rem",
10400
+ children: [
10401
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10402
+ Flex,
10403
+ {
10404
+ $flexDirection: "column",
10405
+ $gap: "1rem",
10406
+ $backgroundColor: "#FBFBFB",
10407
+ $borderRadius: "0 0 0.5rem 0.5rem",
10408
+ $flex: "1",
10409
+ $height: "100%",
10410
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
10411
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10412
+ Box,
10413
+ {
10414
+ $fontSize: "18px",
10415
+ $marginBottom: "1.5rem",
10416
+ $display: "inline-block",
10417
+ $width: "100%",
10418
+ children: "Default"
10419
+ }
10420
+ ),
10421
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
10422
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10423
+ Flex,
10424
+ {
10425
+ $alignItems: "center",
10426
+ $padding: ".5rem 1rem",
10427
+ $border: "1px solid #E2E5E9",
10428
+ $borderRadius: ".5rem",
10429
+ $backgroundColor: "#ffffff",
10430
+ $gap: "1rem",
10431
+ $width: "100%",
10432
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
10433
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
10434
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10435
+ "svg",
10436
+ {
10437
+ viewBox: "0 0 24 16",
10438
+ fill: "none",
10439
+ xmlns: "http://www.w3.org/2000/svg",
10440
+ width: "26px",
10441
+ height: "auto",
10442
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
10443
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10444
+ "rect",
10445
+ {
10446
+ stroke: "#DDD",
10447
+ fill: "#FFF",
10448
+ x: ".25",
10449
+ y: ".25",
10450
+ width: "23",
10451
+ height: "15.5",
10452
+ rx: "2"
10453
+ }
10454
+ ),
10455
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10456
+ "path",
10457
+ {
10458
+ d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
10459
+ fill: "#1434CB"
10460
+ }
10461
+ )
10462
+ ] })
10463
+ }
10093
10464
  ) }),
10094
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10095
- "/",
10096
- planPeriod
10097
- ] })
10465
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
10098
10466
  ] }),
10099
- (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10100
- Flex,
10101
- {
10102
- $position: "absolute",
10103
- $right: "1rem",
10104
- $top: "1rem",
10105
- $fontSize: "0.625rem",
10106
- $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
10107
- $backgroundColor: theme.primary,
10108
- $borderRadius: "9999px",
10109
- $padding: "0.125rem 0.85rem",
10110
- children: "Current plan"
10111
- }
10112
- )
10113
- ]
10467
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
10468
+ ] })
10114
10469
  }
10115
10470
  ),
10116
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10117
- Flex,
10471
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10472
+ StyledButton,
10118
10473
  {
10119
- $flexDirection: "column",
10120
- $position: "relative",
10121
- $gap: "0.5rem",
10122
- $flex: "1",
10123
- $width: "100%",
10124
- $height: "auto",
10125
- $padding: "1.5rem",
10126
- children: plan.features.map((feature) => {
10127
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10128
- Flex,
10129
- {
10130
- $flexShrink: "0",
10131
- $gap: "1rem",
10132
- children: [
10133
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10134
- IconRound,
10135
- {
10136
- name: feature.icon,
10137
- size: "tn",
10138
- colors: [
10139
- settings.theme.primary,
10140
- `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
10141
- ]
10142
- }
10143
- ),
10144
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, children: feature.name }) })
10145
- ]
10146
- },
10147
- feature.id
10148
- );
10149
- })
10474
+ $size: "sm",
10475
+ $color: "primary",
10476
+ $variant: "outline",
10477
+ style: {
10478
+ whiteSpace: "nowrap",
10479
+ paddingLeft: "1rem",
10480
+ paddingRight: "1rem"
10481
+ },
10482
+ children: "Edit"
10150
10483
  }
10151
- ),
10152
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10484
+ ) })
10485
+ ] })
10486
+ ] })
10487
+ }
10488
+ ),
10489
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10490
+ Flex,
10491
+ {
10492
+ $flexDirection: "column",
10493
+ $gap: "1rem",
10494
+ $backgroundColor: "#FBFBFB",
10495
+ $borderRadius: "0 0 0.5rem 0.5rem",
10496
+ $flex: "1",
10497
+ $height: "100%",
10498
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
10499
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10500
+ Box,
10501
+ {
10502
+ $fontSize: "18px",
10503
+ $marginBottom: "1.5rem",
10504
+ $display: "inline-block",
10505
+ $width: "100%",
10506
+ children: "Others"
10507
+ }
10508
+ ),
10509
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
10510
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10153
10511
  Flex,
10154
10512
  {
10155
- $flexDirection: "column",
10156
- $position: "relative",
10513
+ $alignItems: "center",
10514
+ $padding: ".5rem 1rem",
10515
+ $border: "1px solid #E2E5E9",
10516
+ $borderRadius: ".5rem",
10517
+ $backgroundColor: "#ffffff",
10157
10518
  $gap: "1rem",
10158
10519
  $width: "100%",
10159
- $height: "auto",
10160
- $padding: "1.5rem",
10161
- children: [
10162
- plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10163
- Flex,
10164
- {
10165
- $justifyContent: "center",
10166
- $alignItems: "center",
10167
- $gap: "0.25rem",
10168
- $fontSize: "0.9375rem",
10169
- $padding: "0.625rem 0",
10170
- children: [
10171
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10172
- Icon2,
10173
- {
10174
- name: "check-rounded",
10175
- style: {
10176
- fontSize: 20,
10177
- lineHeight: "1",
10178
- color: theme.primary
10520
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
10521
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
10522
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10523
+ "svg",
10524
+ {
10525
+ viewBox: "0 0 24 16",
10526
+ fill: "none",
10527
+ xmlns: "http://www.w3.org/2000/svg",
10528
+ width: "26px",
10529
+ height: "auto",
10530
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
10531
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10532
+ "rect",
10533
+ {
10534
+ stroke: "#DDD",
10535
+ fill: "#FFF",
10536
+ x: ".25",
10537
+ y: ".25",
10538
+ width: "23",
10539
+ height: "15.5",
10540
+ rx: "2"
10179
10541
  }
10180
- }
10181
- ),
10182
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10183
- Text,
10184
- {
10185
- style: {
10186
- color: hexToHSL(theme.card.background).l > 50 ? "#000000" : "#FFFFFF",
10187
- lineHeight: "1.4"
10188
- },
10189
- children: "Selected"
10190
- }
10191
- )
10192
- ]
10193
- }
10194
- ),
10195
- !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10196
- StyledButton,
10197
- {
10198
- disabled: plan.valid === false,
10199
- $size: "sm",
10200
- $color: "primary",
10201
- $variant: "outline",
10202
- onClick: () => {
10203
- setSelectedPlan(plan);
10204
- },
10205
- children: "Select"
10206
- }
10207
- )
10208
- ]
10542
+ ),
10543
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10544
+ "path",
10545
+ {
10546
+ d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
10547
+ fill: "#1434CB"
10548
+ }
10549
+ )
10550
+ ] })
10551
+ }
10552
+ ) }),
10553
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
10554
+ ] }),
10555
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
10556
+ ] })
10209
10557
  }
10210
- )
10211
- ]
10212
- },
10213
- plan.id
10214
- );
10215
- }) })
10216
- ] }),
10217
- selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10218
- PaymentForm,
10219
- {
10220
- plan: selectedPlan,
10221
- period: planPeriod,
10222
- onConfirm: (value) => {
10223
- setPaymentMethodId(value);
10224
- }
10225
- }
10226
- )
10227
- ]
10228
- }
10229
- ),
10230
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10231
- Flex,
10232
- {
10233
- $position: "absolute",
10234
- $top: "0",
10235
- $right: "0",
10236
- $flexDirection: "column",
10237
- $background: settings.theme.card.background,
10238
- $borderRadius: "0 0 0.5rem",
10239
- $width: "27.5%",
10240
- $height: "100%",
10241
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
10242
- children: [
10243
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10244
- Flex,
10245
- {
10246
- $flexDirection: "column",
10247
- $position: "relative",
10248
- $gap: "1rem",
10249
- $width: "100%",
10250
- $height: "auto",
10251
- $padding: "1.5rem",
10252
- $borderBottom: "1px solid #DEDEDE",
10253
- children: [
10254
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
10255
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10256
- Flex,
10257
- {
10258
- $border: "1px solid #D9D9D9",
10259
- $borderRadius: "2.5rem",
10260
- $cursor: "pointer",
10261
- children: [
10262
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10263
- Flex,
10264
- {
10265
- onClick: () => setPlanPeriod("month"),
10266
- $justifyContent: "center",
10267
- $alignItems: "center",
10268
- $padding: "0.25rem 0.5rem",
10269
- $flex: "1",
10270
- $backgroundColor: planPeriod === "month" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
10271
- $borderRadius: "2.5rem",
10272
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, $weight: planPeriod === "month" ? 600 : 400, children: "Billed monthly" })
10273
- }
10274
- ),
10275
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10276
- Flex,
10558
+ ),
10559
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
10560
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10561
+ StyledButton,
10277
10562
  {
10278
- onClick: () => setPlanPeriod("year"),
10279
- $justifyContent: "center",
10280
- $alignItems: "center",
10281
- $padding: "0.25rem 0.5rem",
10282
- $flex: "1",
10283
- $backgroundColor: planPeriod === "year" ? darken(settings.theme.card.background, 8) : lighten(settings.theme.card.background, 2),
10284
- $borderRadius: "2.5rem",
10285
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, $weight: planPeriod === "year" ? 600 : 400, children: "Billed yearly" })
10563
+ $size: "sm",
10564
+ $color: "primary",
10565
+ $variant: "outline",
10566
+ style: {
10567
+ whiteSpace: "nowrap",
10568
+ paddingLeft: "1rem",
10569
+ paddingRight: "1rem"
10570
+ },
10571
+ children: "Make Default"
10286
10572
  }
10287
- )
10288
- ]
10289
- }
10290
- ),
10291
- savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 11, $color: "#194BFB", children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing` }) })
10292
- ]
10293
- }
10294
- ),
10295
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10296
- Flex,
10297
- {
10298
- $flexDirection: "column",
10299
- $position: "relative",
10300
- $gap: "1rem",
10301
- $width: "100%",
10302
- $height: "auto",
10303
- $padding: "1.5rem",
10304
- $flex: "1",
10305
- $borderBottom: "1px solid #DEDEDE",
10306
- children: [
10307
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, $color: "#5D5D5D", children: "Plan" }) }),
10308
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10309
- Flex,
10310
- {
10311
- $flexDirection: "column",
10312
- $fontSize: "0.875rem",
10313
- $color: "#5D5D5D",
10314
- $gap: "0.5rem",
10315
- children: [
10316
- currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10317
- Flex,
10573
+ ),
10574
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10575
+ StyledButton,
10318
10576
  {
10319
- $alignItems: "center",
10320
- $justifyContent: "space-between",
10321
- $fontSize: "0.875rem",
10322
- $color: "#5D5D5D",
10323
- children: [
10324
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $fontSize: "0.875rem", $color: "#5D5D5D", children: currentPlan.name }),
10325
- typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
10326
- formatCurrency(currentPlan.planPrice),
10327
- "/",
10328
- currentPlan.planPeriod
10329
- ] })
10330
- ]
10577
+ $size: "sm",
10578
+ $color: "primary",
10579
+ $variant: "outline",
10580
+ style: {
10581
+ whiteSpace: "nowrap",
10582
+ paddingLeft: "1rem",
10583
+ paddingRight: "1rem"
10584
+ },
10585
+ children: "Edit"
10331
10586
  }
10332
- ),
10333
- selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10334
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10335
- Box,
10336
- {
10337
- $width: "100%",
10338
- $textAlign: "left",
10339
- $opacity: "50%",
10340
- $marginBottom: "-0.25rem",
10341
- $marginTop: "-0.25rem",
10342
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10343
- Icon2,
10344
- {
10345
- name: "arrow-down",
10346
- style: {
10347
- display: "inline-block"
10348
- }
10349
- }
10350
- )
10351
- }
10352
- ),
10353
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10354
- Flex,
10355
- {
10356
- $alignItems: "center",
10357
- $justifyContent: "space-between",
10358
- $fontSize: "0.875rem",
10359
- $color: "#5D5D5D",
10360
- children: [
10361
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10362
- Flex,
10363
- {
10364
- $fontSize: "0.875rem",
10365
- $color: "#000000",
10366
- $fontWeight: "600",
10367
- children: selectedPlan.name
10368
- }
10369
- ),
10370
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $fontSize: "0.75rem", $color: "#000000", children: [
10371
- formatCurrency(
10372
- (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10373
- ),
10374
- "/",
10375
- planPeriod
10376
- ] })
10377
- ]
10378
- }
10379
- )
10380
- ] })
10381
- ]
10382
- }
10383
- )
10384
- ]
10385
- }
10386
- ),
10387
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10388
- Flex,
10389
- {
10390
- $flexDirection: "column",
10391
- $position: "relative",
10392
- $gap: "0.75rem",
10393
- $width: "100%",
10394
- $height: "auto",
10395
- $padding: "1.5rem",
10396
- children: [
10397
- selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10398
- Flex,
10399
- {
10400
- $fontSize: "0.75rem",
10401
- $color: "#5D5D5D",
10402
- $justifyContent: "space-between",
10403
- children: [
10404
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: [
10405
- planPeriod === "month" ? "Monthly" : "Yearly",
10406
- " total:",
10407
- " "
10408
- ] }),
10409
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $fontSize: "0.75rem", $color: "#000000", children: [
10410
- formatCurrency(
10411
- (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10412
- ),
10413
- "/",
10414
- planPeriod
10415
- ] })
10416
- ]
10417
- }
10418
- ),
10419
- checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10420
- StyledButton,
10421
- {
10422
- disabled: !selectedPlan,
10423
- onClick: () => {
10424
- setCheckoutStage("checkout");
10425
- },
10426
- $size: "sm",
10427
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10428
- Flex,
10429
- {
10430
- $gap: "0.5rem",
10431
- $alignItems: "center",
10432
- $justifyContent: "center",
10433
- $padding: "0 1rem",
10434
- children: [
10435
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $align: "left", children: "Next: Checkout" }),
10436
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
10437
- ]
10438
- }
10439
- )
10440
- }
10441
- ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10442
- StyledButton,
10443
- {
10444
- disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
10445
- onClick: async () => {
10446
- const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10447
- if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10448
- return;
10449
- }
10450
- try {
10451
- setIsLoading(true);
10452
- setIsCheckoutComplete(false);
10453
- await api.checkout({
10454
- changeSubscriptionRequestBody: {
10455
- newPlanId: selectedPlan.id,
10456
- newPriceId: priceId,
10457
- paymentMethodId
10458
- }
10459
- });
10460
- setIsCheckoutComplete(true);
10461
- } catch (error) {
10462
- console.error(error);
10463
- } finally {
10464
- setIsCheckoutComplete(true);
10465
- setIsLoading(false);
10466
- }
10467
- },
10468
- $size: "md",
10469
- children: "Pay now"
10470
- }
10471
- ),
10472
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $fontSize: "0.75rem", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
10473
- ]
10474
- }
10475
- )
10476
- ]
10477
- }
10478
- )
10479
- ] })
10480
- ] });
10481
- };
10482
-
10483
- // src/components/elements/plan-manager/PlanManager.tsx
10484
- var import_jsx_runtime11 = require("react/jsx-runtime");
10485
- var resolveDesignProps = (props) => {
10486
- return {
10487
- header: {
10488
- isVisible: props.header?.isVisible ?? true,
10489
- title: {
10490
- fontStyle: props.header?.title?.fontStyle ?? "heading1"
10491
- },
10492
- description: {
10493
- isVisible: props.header?.description?.isVisible ?? true,
10494
- fontStyle: props.header?.description?.fontStyle ?? "text"
10495
- },
10496
- price: {
10497
- isVisible: props.header?.price?.isVisible ?? true,
10498
- fontStyle: props.header?.price?.fontStyle ?? "text"
10499
- }
10500
- },
10501
- addOns: {
10502
- isVisible: props.addOns?.isVisible ?? true,
10503
- fontStyle: props.addOns?.fontStyle ?? "heading4",
10504
- showLabel: props.addOns?.showLabel ?? true
10505
- },
10506
- callToAction: {
10507
- isVisible: props.callToAction?.isVisible ?? true,
10508
- buttonSize: props.callToAction?.buttonSize ?? "md",
10509
- buttonStyle: props.callToAction?.buttonStyle ?? "primary"
10510
- }
10511
- };
10512
- };
10513
- var PlanManager = (0, import_react10.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10514
- const props = resolveDesignProps(rest);
10515
- const { data, settings, layout, stripe, setLayout } = useEmbed();
10516
- const { currentPlan, canChangePlan } = (0, import_react10.useMemo)(() => {
10517
- return {
10518
- currentPlan: data.company?.plan,
10519
- canChangePlan: stripe !== null
10520
- };
10521
- }, [data.company, stripe]);
10522
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
10523
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10524
- Flex,
10525
- {
10526
- $flexDirection: "column",
10527
- $gap: "0.75rem",
10528
- ...canChangePlan && { $margin: "0 0 0.5rem" },
10529
- children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10530
- Flex,
10531
- {
10532
- $justifyContent: "space-between",
10533
- $alignItems: "center",
10534
- $width: "100%",
10535
- ...canChangePlan && { $margin: "0 0 1.5rem" },
10536
- children: [
10537
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
10538
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10539
- Text,
10540
- {
10541
- $font: settings.theme.typography[props.header.title.fontStyle].fontFamily,
10542
- $size: settings.theme.typography[props.header.title.fontStyle].fontSize,
10543
- $weight: settings.theme.typography[props.header.title.fontStyle].fontWeight,
10544
- $color: settings.theme.typography[props.header.title.fontStyle].color,
10545
- $lineHeight: 1,
10546
- children: currentPlan.name
10547
- }
10548
- ) }),
10549
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10550
- Text,
10551
- {
10552
- $font: settings.theme.typography[props.header.description.fontStyle].fontFamily,
10553
- $size: settings.theme.typography[props.header.description.fontStyle].fontSize,
10554
- $weight: settings.theme.typography[props.header.description.fontStyle].fontWeight,
10555
- $color: settings.theme.typography[props.header.description.fontStyle].color,
10556
- children: currentPlan.description
10557
- }
10558
- )
10559
- ] }),
10560
- props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10561
- Text,
10562
- {
10563
- $font: settings.theme.typography[props.header.price.fontStyle].fontFamily,
10564
- $size: settings.theme.typography[props.header.price.fontStyle].fontSize,
10565
- $weight: settings.theme.typography[props.header.price.fontStyle].fontWeight,
10566
- $color: settings.theme.typography[props.header.price.fontStyle].color,
10567
- children: [
10568
- formatCurrency(currentPlan.planPrice),
10569
- "/",
10570
- currentPlan.planPeriod
10571
- ]
10587
+ )
10588
+ ] })
10589
+ ] })
10590
+ ] })
10572
10591
  }
10573
10592
  )
10574
10593
  ]
10575
10594
  }
10576
10595
  )
10577
- }
10578
- ),
10579
- canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10580
- StyledButton,
10581
- {
10582
- onClick: () => {
10583
- setLayout("checkout");
10584
- },
10585
- $size: props.callToAction.buttonSize,
10586
- $color: props.callToAction.buttonStyle,
10587
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10588
- Text,
10589
- {
10590
- $font: settings.theme.typography.text.fontFamily,
10591
- $size: settings.theme.typography.text.fontSize,
10592
- $weight: settings.theme.typography.text.fontWeight,
10593
- children: "Change Plan"
10594
- }
10595
- )
10596
- }
10597
- ),
10598
- canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckoutDialog, {}), portal || document.body)
10596
+ ] }),
10597
+ portal || document.body
10598
+ )
10599
10599
  ] });
10600
10600
  });
10601
10601
 
10602
- // src/components/elements/included-features/IncludedFeatures.tsx
10603
- var import_react11 = require("react");
10604
- var import_jsx_runtime12 = require("react/jsx-runtime");
10605
- function resolveDesignProps2(props) {
10606
- return {
10607
- header: {
10608
- isVisible: props.header?.isVisible ?? true,
10609
- fontStyle: props.header?.fontStyle ?? "heading4",
10610
- text: props.header?.text ?? "Included features"
10611
- },
10612
- icons: {
10613
- isVisible: props.icons?.isVisible ?? true,
10614
- fontStyle: props.icons?.fontStyle ?? "heading3",
10615
- style: props.icons?.style ?? "light"
10616
- },
10617
- entitlement: {
10618
- isVisible: props.entitlement?.isVisible ?? true,
10619
- fontStyle: props.entitlement?.fontStyle ?? "heading5"
10620
- },
10621
- usage: {
10622
- isVisible: props.usage?.isVisible ?? true,
10623
- fontStyle: props.usage?.fontStyle ?? "heading6"
10602
+ // src/components/elements/plan-manager/PaymentForm.tsx
10603
+ var import_react9 = require("react");
10604
+ var import_react_stripe_js2 = require("@stripe/react-stripe-js");
10605
+ var import_react_stripe_js3 = require("@stripe/react-stripe-js");
10606
+ var import_jsx_runtime10 = require("react/jsx-runtime");
10607
+ var PaymentForm = ({ plan, period, onConfirm }) => {
10608
+ const stripe = (0, import_react_stripe_js3.useStripe)();
10609
+ const elements = (0, import_react_stripe_js3.useElements)();
10610
+ const { api, data } = useEmbed();
10611
+ const [message, setMessage] = (0, import_react9.useState)(null);
10612
+ const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
10613
+ const [isConfirmed, setIsConfirmed] = (0, import_react9.useState)(false);
10614
+ const handleSubmit = async (event) => {
10615
+ event.preventDefault();
10616
+ const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
10617
+ if (!api || !stripe || !elements || !priceId) {
10618
+ return;
10624
10619
  }
10625
- };
10626
- }
10627
- var IncludedFeatures = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
10628
- const props = resolveDesignProps2(rest);
10629
- const { data, settings } = useEmbed();
10630
- const features = (0, import_react11.useMemo)(() => {
10631
- return (data.featureUsage?.features || []).map(
10632
- ({
10633
- access,
10634
- allocation,
10635
- allocationType,
10636
- feature,
10637
- period,
10638
- usage = 0,
10639
- ...props2
10640
- }) => {
10641
- return {
10642
- access,
10643
- allocation,
10644
- allocationType,
10645
- feature,
10646
- period,
10647
- /**
10648
- * @TODO: resolve feature price
10649
- */
10650
- price: void 0,
10651
- usage,
10652
- ...props2
10653
- };
10620
+ setIsLoading(true);
10621
+ setIsConfirmed(false);
10622
+ setMessage(null);
10623
+ try {
10624
+ const { setupIntent, error } = await stripe.confirmSetup({
10625
+ elements,
10626
+ confirmParams: {
10627
+ return_url: window.location.href
10628
+ },
10629
+ redirect: "if_required"
10630
+ });
10631
+ if (onConfirm && typeof setupIntent?.payment_method === "string") {
10632
+ onConfirm(setupIntent.payment_method);
10633
+ setIsConfirmed(true);
10634
+ } else {
10654
10635
  }
10655
- );
10656
- }, [data.featureUsage]);
10657
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10658
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10659
- Text,
10660
- {
10661
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10662
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10663
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10664
- $color: settings.theme.typography[props.header.fontStyle].color,
10665
- children: props.header.text
10636
+ if (error?.type === "card_error" || error?.type === "validation_error") {
10637
+ setMessage(error.message);
10666
10638
  }
10667
- ) }),
10668
- features.reduce(
10669
- (acc, { allocation, allocationType, feature, usage }, index) => {
10670
- if (!allocationType) {
10671
- return acc;
10672
- }
10673
- return [
10674
- ...acc,
10675
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
10676
- Flex,
10677
- {
10678
- $flexWrap: "wrap",
10679
- $justifyContent: "space-between",
10680
- $alignItems: "center",
10681
- $gap: "1rem",
10682
- children: [
10683
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
10684
- props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10685
- IconRound,
10686
- {
10687
- name: feature.icon,
10688
- size: "sm",
10689
- colors: [
10690
- settings.theme.primary,
10691
- `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`
10692
- ]
10693
- }
10694
- ),
10695
- feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10696
- Text,
10697
- {
10698
- $font: settings.theme.typography[props.icons.fontStyle].fontFamily,
10699
- $size: settings.theme.typography[props.icons.fontStyle].fontSize,
10700
- $weight: settings.theme.typography[props.icons.fontStyle].fontWeight,
10701
- $color: settings.theme.typography[props.icons.fontStyle].color,
10702
- children: feature.name
10703
- }
10704
- ) })
10705
- ] }),
10706
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { $textAlign: "right", children: [
10707
- props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10708
- Text,
10709
- {
10710
- as: Box,
10711
- $font: settings.theme.typography[props.entitlement.fontStyle].fontFamily,
10712
- $size: settings.theme.typography[props.entitlement.fontStyle].fontSize,
10713
- $weight: settings.theme.typography[props.entitlement.fontStyle].fontWeight,
10714
- $color: settings.theme.typography[props.entitlement.fontStyle].color,
10715
- children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10716
- }
10717
- ),
10718
- props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10719
- Text,
10720
- {
10721
- as: Box,
10722
- $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
10723
- $size: settings.theme.typography[props.usage.fontStyle].fontSize,
10724
- $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
10725
- $color: settings.theme.typography[props.usage.fontStyle].color,
10726
- children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
10727
- }
10728
- )
10729
- ] })
10730
- ]
10731
- },
10732
- index
10733
- )
10734
- ];
10735
- },
10736
- []
10737
- )
10738
- ] });
10739
- });
10740
-
10741
- // src/components/elements/metered-features/MeteredFeatures.tsx
10742
- var import_react12 = require("react");
10743
- var import_jsx_runtime13 = require("react/jsx-runtime");
10744
- function resolveDesignProps3(props) {
10745
- return {
10746
- isVisible: props.isVisible ?? true,
10747
- header: {
10748
- fontStyle: props.header?.fontStyle ?? "heading2"
10749
- },
10750
- description: {
10751
- isVisible: props.description?.isVisible ?? true,
10752
- fontStyle: props.description?.fontStyle ?? "text"
10753
- },
10754
- icon: {
10755
- isVisible: props.icon?.isVisible ?? true
10756
- },
10757
- allocation: {
10758
- isVisible: props.allocation?.isVisible ?? true,
10759
- fontStyle: props.allocation?.fontStyle ?? "heading4"
10760
- },
10761
- usage: {
10762
- isVisible: props.usage?.isVisible ?? true,
10763
- fontStyle: props.usage?.fontStyle ?? "heading5"
10764
- },
10765
- callToAction: {
10766
- isVisible: props.callToAction?.isVisible ?? true,
10767
- buttonSize: props.callToAction?.buttonSize ?? "md",
10768
- buttonStyle: props.callToAction?.buttonStyle ?? "primary"
10639
+ } catch (error) {
10640
+ setMessage("A problem occurred while saving your payment method.");
10641
+ } finally {
10642
+ setIsLoading(false);
10769
10643
  }
10770
10644
  };
10771
- }
10772
- var MeteredFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
10773
- const props = resolveDesignProps3(rest);
10774
- const { data, settings } = useEmbed();
10775
- const features = (0, import_react12.useMemo)(() => {
10776
- return (data.featureUsage?.features || []).map(
10777
- ({
10778
- access,
10779
- allocation,
10780
- allocationType,
10781
- feature,
10782
- period,
10783
- usage,
10784
- ...props2
10785
- }) => {
10786
- return {
10787
- access,
10788
- allocation,
10789
- allocationType,
10790
- feature,
10791
- period,
10792
- /**
10793
- * @TODO: resolve feature price
10794
- */
10795
- price: void 0,
10796
- usage,
10797
- ...props2
10798
- };
10799
- }
10800
- );
10801
- }, [data.featureUsage]);
10802
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
10803
- (acc, { allocation, allocationType, feature, usage }, index) => {
10804
- if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
10805
- return acc;
10806
- }
10807
- return [
10808
- ...acc,
10809
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1.5rem", children: [
10810
- props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
10811
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
10812
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { children: [
10813
- feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
10814
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10815
- Text,
10816
- {
10817
- as: Box,
10818
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10819
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10820
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10821
- $color: settings.theme.typography[props.header.fontStyle].color,
10822
- children: feature.name
10823
- }
10824
- ),
10825
- props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10826
- Text,
10827
- {
10828
- as: Box,
10829
- $font: settings.theme.typography[props.description.fontStyle].fontFamily,
10830
- $size: settings.theme.typography[props.description.fontStyle].fontSize,
10831
- $weight: settings.theme.typography[props.description.fontStyle].fontWeight,
10832
- $color: settings.theme.typography[props.description.fontStyle].color,
10833
- children: feature.description
10834
- }
10835
- )
10836
- ] }),
10837
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
10838
- props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10839
- Text,
10840
- {
10841
- as: Box,
10842
- $font: settings.theme.typography[props.allocation.fontStyle].fontFamily,
10843
- $size: settings.theme.typography[props.allocation.fontStyle].fontSize,
10844
- $weight: settings.theme.typography[props.allocation.fontStyle].fontWeight,
10845
- $color: settings.theme.typography[props.allocation.fontStyle].color,
10846
- children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
10847
- }
10848
- ),
10849
- props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10850
- Text,
10851
- {
10852
- as: Box,
10853
- $font: settings.theme.typography[props.usage.fontStyle].fontFamily,
10854
- $size: settings.theme.typography[props.usage.fontStyle].fontSize,
10855
- $weight: settings.theme.typography[props.usage.fontStyle].fontWeight,
10856
- $color: settings.theme.typography[props.usage.fontStyle].color,
10857
- children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
10858
- }
10859
- )
10860
- ] })
10861
- ] }),
10862
- typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
10863
- ProgressBar,
10645
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10646
+ "form",
10647
+ {
10648
+ id: "payment-form",
10649
+ onSubmit: handleSubmit,
10650
+ style: {
10651
+ display: "flex",
10652
+ flexDirection: "column",
10653
+ overflowX: "hidden",
10654
+ overflowY: "auto"
10655
+ },
10656
+ children: [
10657
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $width: "100%", $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 18, children: "Add payment method" }) }),
10658
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10659
+ Flex,
10660
+ {
10661
+ $flexDirection: "column",
10662
+ $gap: "1.5rem",
10663
+ $width: "100%",
10664
+ $marginBottom: "1.5rem",
10665
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10666
+ import_react_stripe_js2.LinkAuthenticationElement,
10864
10667
  {
10865
- progress: usage / allocation * 100,
10866
- value: usage,
10867
- total: allocation,
10868
- color: "blue"
10668
+ id: "link-authentication-element"
10869
10669
  }
10870
- ) })
10871
- ] })
10872
- ] }, index)
10873
- ];
10874
- },
10875
- []
10876
- ) });
10877
- });
10878
-
10879
- // src/components/elements/upcoming-bill/UpcomingBill.tsx
10880
- var import_react13 = require("react");
10881
- var import_jsx_runtime14 = require("react/jsx-runtime");
10882
- function resolveDesignProps4(props) {
10883
- return {
10884
- header: {
10885
- isVisible: props.header?.isVisible ?? true,
10886
- fontStyle: props.header?.fontStyle ?? "heading4",
10887
- prefix: props.header?.prefix ?? "Next bill due"
10888
- },
10889
- price: {
10890
- isVisible: props.price?.isVisible ?? true,
10891
- fontStyle: props.price?.fontStyle ?? "heading1"
10892
- },
10893
- contractEndDate: {
10894
- isVisible: props.contractEndDate?.isVisible ?? true,
10895
- fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
10896
- prefix: props.contractEndDate?.prefix ?? "Contract ends"
10670
+ )
10671
+ }
10672
+ ),
10673
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }) }),
10674
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10675
+ StyledButton,
10676
+ {
10677
+ id: "submit",
10678
+ disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
10679
+ $size: "md",
10680
+ $color: "primary",
10681
+ children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
10682
+ }
10683
+ ),
10684
+ message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
10685
+ ]
10897
10686
  }
10898
- };
10899
- }
10900
- var UpcomingBill = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
10901
- const props = resolveDesignProps4(rest);
10902
- const { data, settings, stripe } = useEmbed();
10903
- const { upcomingInvoice } = (0, import_react13.useMemo)(() => {
10904
- return {
10905
- upcomingInvoice: {
10906
- ...data.upcomingInvoice?.amountDue && {
10907
- amountDue: data.upcomingInvoice.amountDue
10908
- },
10909
- ...data.subscription?.interval && {
10910
- interval: data.subscription.interval
10911
- },
10912
- ...data.upcomingInvoice?.dueDate && {
10913
- dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
10914
- }
10915
- }
10916
- };
10917
- }, [data.subscription, data.upcomingInvoice]);
10918
- if (!stripe || !data.upcomingInvoice) {
10687
+ );
10688
+ };
10689
+
10690
+ // src/components/elements/plan-manager/CheckoutDialog.tsx
10691
+ var import_jsx_runtime11 = require("react/jsx-runtime");
10692
+ var FeatureName = ({
10693
+ entitlement
10694
+ }) => {
10695
+ const theme = nt();
10696
+ if (!entitlement.feature?.name) {
10919
10697
  return null;
10920
10698
  }
10921
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
10922
- props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
10923
- Flex,
10699
+ if (entitlement.valueType === "numeric" || entitlement.valueType === "trait") {
10700
+ let period;
10701
+ if (entitlement.metricPeriod) {
10702
+ period = {
10703
+ current_day: "day",
10704
+ current_month: "mo",
10705
+ current_year: "yr"
10706
+ }[entitlement.metricPeriod];
10707
+ }
10708
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10709
+ Text,
10924
10710
  {
10925
- $justifyContent: "space-between",
10926
- $alignItems: "center",
10927
- $margin: "0 0 0.75rem",
10928
- children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
10929
- Text,
10930
- {
10931
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
10932
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
10933
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
10934
- $color: settings.theme.typography[props.header.fontStyle].color,
10935
- children: [
10936
- props.header.prefix,
10937
- " ",
10938
- upcomingInvoice.dueDate
10939
- ]
10940
- }
10941
- )
10711
+ $font: theme.typography.text.fontFamily,
10712
+ $size: theme.typography.text.fontSize,
10713
+ $weight: theme.typography.text.fontWeight,
10714
+ $color: theme.typography.text.color,
10715
+ children: [
10716
+ typeof entitlement.valueNumeric === "number" ? (0, import_pluralize.default)(
10717
+ entitlement.feature.name,
10718
+ entitlement.valueNumeric,
10719
+ true
10720
+ ) : `Unlimited ${(0, import_pluralize.default)(entitlement.feature.name)}`,
10721
+ period && `/${period}`
10722
+ ]
10942
10723
  }
10943
- ),
10944
- upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
10945
- props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
10946
- Text,
10947
- {
10948
- $font: settings.theme.typography[props.price.fontStyle].fontFamily,
10949
- $size: settings.theme.typography[props.price.fontStyle].fontSize,
10950
- $weight: settings.theme.typography[props.price.fontStyle].fontWeight,
10951
- $color: settings.theme.typography[props.price.fontStyle].color,
10952
- $lineHeight: 1,
10953
- children: formatCurrency(upcomingInvoice.amountDue)
10954
- }
10955
- ) }),
10956
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
10957
- Text,
10958
- {
10959
- $font: settings.theme.typography[props.contractEndDate.fontStyle].fontFamily,
10960
- $size: settings.theme.typography[props.contractEndDate.fontStyle].fontSize,
10961
- $weight: settings.theme.typography[props.contractEndDate.fontStyle].fontWeight,
10962
- $color: settings.theme.typography[props.contractEndDate.fontStyle].color,
10963
- children: "Estimated monthly bill."
10964
- }
10965
- ) })
10966
- ] })
10967
- ] });
10968
- });
10969
-
10970
- // src/components/elements/payment-method/PaymentMethod.tsx
10971
- var import_react14 = require("react");
10972
- var import_react_dom2 = require("react-dom");
10973
- var import_jsx_runtime15 = require("react/jsx-runtime");
10974
- var resolveDesignProps5 = (props) => {
10975
- return {
10976
- header: {
10977
- isVisible: props.header?.isVisible ?? true,
10978
- fontStyle: props.header?.fontStyle ?? "heading4"
10979
- },
10980
- functions: {
10981
- allowEdit: props.functions?.allowEdit ?? true
10724
+ ) });
10725
+ }
10726
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10727
+ Text,
10728
+ {
10729
+ $font: theme.typography.text.fontFamily,
10730
+ $size: theme.typography.text.fontSize,
10731
+ $weight: theme.typography.text.fontWeight,
10732
+ $color: theme.typography.text.color,
10733
+ children: entitlement.feature.name
10982
10734
  }
10983
- };
10735
+ ) });
10984
10736
  };
10985
- var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10986
- const props = resolveDesignProps5(rest);
10987
- const { data, settings, stripe, layout } = useEmbed();
10988
- const paymentMethod = (0, import_react14.useMemo)(() => {
10989
- const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
10990
- let monthsToExpiration;
10991
- if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
10992
- const timeToExpiration = Math.round(
10993
- +new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
10994
- );
10995
- monthsToExpiration = Math.round(
10996
- timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
10997
- );
10737
+ var CheckoutDialog = () => {
10738
+ const theme = nt();
10739
+ const { api, data, setLayout } = useEmbed();
10740
+ const [checkoutStage, setCheckoutStage] = (0, import_react10.useState)(
10741
+ "plan"
10742
+ );
10743
+ const [planPeriod, setPlanPeriod] = (0, import_react10.useState)(
10744
+ () => data.company?.plan?.planPeriod || "month"
10745
+ );
10746
+ const [selectedPlan, setSelectedPlan] = (0, import_react10.useState)();
10747
+ const [paymentMethodId, setPaymentMethodId] = (0, import_react10.useState)();
10748
+ const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
10749
+ const [error, setError] = (0, import_react10.useState)();
10750
+ const [showPaymentForm, setShowPaymentForm] = (0, import_react10.useState)(
10751
+ () => typeof data.subscription?.paymentMethod === "undefined"
10752
+ );
10753
+ const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = (0, import_react10.useMemo)(() => {
10754
+ const showMonthlyPriceOption = data.activePlans.some(
10755
+ (plan) => typeof plan.yearlyPrice !== "undefined"
10756
+ );
10757
+ const showYearlyPriceOption = data.activePlans.some(
10758
+ (plan) => typeof plan.yearlyPrice !== "undefined"
10759
+ );
10760
+ const planPeriodOptions2 = [];
10761
+ if (showMonthlyPriceOption) {
10762
+ planPeriodOptions2.push("month");
10763
+ }
10764
+ if (showYearlyPriceOption) {
10765
+ planPeriodOptions2.push("year");
10998
10766
  }
10999
10767
  return {
11000
- cardLast4,
11001
- monthsToExpiration
10768
+ paymentMethod: data.subscription?.paymentMethod,
10769
+ currentPlan: data.company?.plan,
10770
+ availablePlans: data.activePlans.filter(
10771
+ (plan) => plan.current || plan.yearlyPrice && planPeriod === "year" || plan.monthlyPrice && planPeriod === "month"
10772
+ ),
10773
+ planPeriodOptions: planPeriodOptions2
11002
10774
  };
11003
- }, [data.subscription?.paymentMethod]);
11004
- if (!stripe || !data.subscription?.paymentMethod) {
11005
- return null;
11006
- }
11007
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
11008
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
11009
- Flex,
11010
- {
11011
- $justifyContent: "space-between",
11012
- $alignItems: "center",
11013
- $margin: "0 0 1rem",
11014
- children: [
11015
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11016
- Text,
11017
- {
11018
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
11019
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
11020
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
11021
- $color: settings.theme.typography[props.header.fontStyle].color,
11022
- children: "Payment Method"
11023
- }
11024
- ),
11025
- typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11026
- Text,
11027
- {
11028
- $font: settings.theme.typography.text.fontFamily,
11029
- $size: 14,
11030
- $color: "#DB6769",
11031
- children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
10775
+ }, [
10776
+ data.subscription?.paymentMethod,
10777
+ data.company,
10778
+ data.activePlans,
10779
+ planPeriod
10780
+ ]);
10781
+ const savingsPercentage = (0, import_react10.useMemo)(() => {
10782
+ if (selectedPlan) {
10783
+ const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
10784
+ const yearly = selectedPlan?.yearlyPrice?.price || 0;
10785
+ return Math.round((monthly - yearly) / monthly * 1e4) / 100;
10786
+ }
10787
+ return 0;
10788
+ }, [selectedPlan]);
10789
+ const isLightBackground = (0, import_react10.useMemo)(() => {
10790
+ return hexToHSL(theme.card.background).l > 50;
10791
+ }, [theme.card.background]);
10792
+ const allowCheckout = api && selectedPlan && selectedPlan?.id !== currentPlan?.id && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
10793
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Modal, { size: "lg", children: [
10794
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "1rem", children: [
10795
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
10796
+ checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10797
+ Box,
10798
+ {
10799
+ $width: `${20 / TEXT_BASE_SIZE}rem`,
10800
+ $height: `${20 / TEXT_BASE_SIZE}rem`,
10801
+ $borderWidth: "2px",
10802
+ $borderStyle: "solid",
10803
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
10804
+ $borderRadius: "9999px"
10805
+ }
10806
+ ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10807
+ IconRound,
10808
+ {
10809
+ name: "check",
10810
+ colors: [
10811
+ theme.card.background,
10812
+ isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
10813
+ ],
10814
+ style: {
10815
+ fontSize: `${16 / TEXT_BASE_SIZE}rem`,
10816
+ width: `${20 / TEXT_BASE_SIZE}rem`,
10817
+ height: `${20 / TEXT_BASE_SIZE}rem`
11032
10818
  }
11033
- )
11034
- ]
11035
- }
11036
- ),
11037
- paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11038
- Flex,
11039
- {
11040
- $justifyContent: "space-between",
11041
- $alignItems: "center",
11042
- $margin: "0 0 1rem",
11043
- $background: `${hexToHSL(settings.theme.card.background).l > 50 ? darken(settings.theme.card.background, 10) : lighten(settings.theme.card.background, 20)}`,
11044
- $padding: "0.375rem 1rem",
11045
- $borderRadius: "9999px",
11046
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { $font: settings.theme.typography.text.fontFamily, $size: 14, children: [
11047
- "\u{1F4B3} Card ending in ",
11048
- paymentMethod.cardLast4
11049
- ] })
11050
- }
11051
- ),
11052
- layout === "payment" && (0, import_react_dom2.createPortal)(
11053
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Modal, { size: "md", children: [
11054
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
11055
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
11056
- Flex,
10819
+ }
10820
+ ),
10821
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10822
+ Box,
11057
10823
  {
11058
- $flexDirection: "column",
11059
- $padding: "2.5rem",
11060
- $height: "100%",
11061
- $gap: "1.5rem",
11062
- children: [
11063
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11064
- Flex,
11065
- {
11066
- $flexDirection: "column",
11067
- $gap: "1rem",
11068
- $backgroundColor: "#FBFBFB",
11069
- $borderRadius: "0 0 0.5rem 0.5rem",
11070
- $flex: "1",
11071
- $height: "100%",
11072
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11073
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11074
- Box,
11075
- {
11076
- $fontSize: "18px",
11077
- $marginBottom: "1.5rem",
11078
- $display: "inline-block",
11079
- $width: "100%",
11080
- children: "Default"
11081
- }
11082
- ),
11083
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11084
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
10824
+ tabIndex: 0,
10825
+ ...checkoutStage !== "plan" && {
10826
+ onClick: () => setCheckoutStage("plan"),
10827
+ $opacity: "0.6375",
10828
+ $cursor: "pointer"
10829
+ },
10830
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10831
+ Text,
10832
+ {
10833
+ $font: theme.typography.text.fontFamily,
10834
+ $size: 19,
10835
+ $weight: checkoutStage === "plan" ? 600 : 400,
10836
+ $color: theme.typography.text.color,
10837
+ children: "1. Select plan"
10838
+ }
10839
+ )
10840
+ }
10841
+ )
10842
+ ] }),
10843
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10844
+ Icon2,
10845
+ {
10846
+ name: "chevron-right",
10847
+ style: {
10848
+ fontSize: 16,
10849
+ color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
10850
+ }
10851
+ }
10852
+ ),
10853
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
10854
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10855
+ Box,
10856
+ {
10857
+ $width: `${20 / TEXT_BASE_SIZE}rem`,
10858
+ $height: `${20 / TEXT_BASE_SIZE}rem`,
10859
+ $borderWidth: "2px",
10860
+ $borderStyle: "solid",
10861
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
10862
+ $borderRadius: "9999px"
10863
+ }
10864
+ ),
10865
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10866
+ Box,
10867
+ {
10868
+ tabIndex: 0,
10869
+ ...checkoutStage !== "checkout" && {
10870
+ $opacity: "0.6375"
10871
+ },
10872
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10873
+ Text,
10874
+ {
10875
+ $font: theme.typography.text.fontFamily,
10876
+ $size: 19,
10877
+ $weight: checkoutStage === "plan" ? 600 : 400,
10878
+ $color: theme.typography.text.color,
10879
+ children: "2. Checkout"
10880
+ }
10881
+ )
10882
+ }
10883
+ )
10884
+ ] })
10885
+ ] }) }),
10886
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
10887
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10888
+ Flex,
10889
+ {
10890
+ $flexDirection: "column",
10891
+ $flexGrow: "1",
10892
+ $gap: "1rem",
10893
+ $padding: "2rem 2.5rem 2rem 2.5rem",
10894
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
10895
+ $flex: "1",
10896
+ $overflow: "auto",
10897
+ children: [
10898
+ checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
10899
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
10900
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10901
+ Text,
10902
+ {
10903
+ as: "h3",
10904
+ id: "select-plan-dialog-label",
10905
+ $font: theme.typography.heading3.fontFamily,
10906
+ $size: theme.typography.heading3.fontSize,
10907
+ $weight: theme.typography.heading3.fontWeight,
10908
+ $color: theme.typography.heading3.color,
10909
+ $marginBottom: "0.5rem",
10910
+ children: "Select plan"
10911
+ }
10912
+ ),
10913
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10914
+ Text,
10915
+ {
10916
+ as: "p",
10917
+ id: "select-plan-dialog-description",
10918
+ $font: theme.typography.text.fontFamily,
10919
+ $size: theme.typography.text.fontSize,
10920
+ $weight: theme.typography.text.fontWeight,
10921
+ $color: theme.typography.text.color,
10922
+ children: "Choose your base plan"
10923
+ }
10924
+ )
10925
+ ] }),
10926
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
10927
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10928
+ Flex,
10929
+ {
10930
+ $flexDirection: "column",
10931
+ $width: "100%",
10932
+ $minWidth: "280px",
10933
+ $maxWidth: `calc(${100 / 3}% - 1rem)`,
10934
+ $backgroundColor: theme.card.background,
10935
+ $outlineWidth: "2px",
10936
+ $outlineStyle: "solid",
10937
+ $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
10938
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
10939
+ ...theme.card.hasShadow && {
10940
+ $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
10941
+ },
10942
+ children: [
10943
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11085
10944
  Flex,
11086
10945
  {
11087
- $alignItems: "center",
11088
- $padding: ".5rem 1rem",
11089
- $border: "1px solid #E2E5E9",
11090
- $borderRadius: ".5rem",
11091
- $backgroundColor: "#ffffff",
10946
+ $flexDirection: "column",
10947
+ $position: "relative",
11092
10948
  $gap: "1rem",
11093
10949
  $width: "100%",
11094
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11095
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
11096
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11097
- "svg",
11098
- {
11099
- viewBox: "0 0 24 16",
11100
- fill: "none",
11101
- xmlns: "http://www.w3.org/2000/svg",
11102
- width: "26px",
11103
- height: "auto",
11104
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
11105
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11106
- "rect",
11107
- {
11108
- stroke: "#DDD",
11109
- fill: "#FFF",
11110
- x: ".25",
11111
- y: ".25",
11112
- width: "23",
11113
- height: "15.5",
11114
- rx: "2"
11115
- }
11116
- ),
11117
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11118
- "path",
11119
- {
11120
- d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
11121
- fill: "#1434CB"
11122
- }
11123
- )
11124
- ] })
11125
- }
10950
+ $height: "auto",
10951
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
10952
+ $borderBottomWidth: "1px",
10953
+ $borderStyle: "solid",
10954
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
10955
+ children: [
10956
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
10957
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { $size: 14, children: plan.description }),
10958
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Text, { children: [
10959
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10960
+ (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
11126
10961
  ) }),
11127
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
10962
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10963
+ "/",
10964
+ planPeriod
10965
+ ] })
11128
10966
  ] }),
11129
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11130
- ] })
10967
+ (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10968
+ Flex,
10969
+ {
10970
+ $position: "absolute",
10971
+ $right: "1rem",
10972
+ $top: "1rem",
10973
+ $fontSize: "0.625rem",
10974
+ $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
10975
+ $backgroundColor: theme.primary,
10976
+ $borderRadius: "9999px",
10977
+ $padding: "0.125rem 0.85rem",
10978
+ children: "Current plan"
10979
+ }
10980
+ )
10981
+ ]
11131
10982
  }
11132
10983
  ),
11133
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11134
- StyledButton,
10984
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10985
+ Flex,
11135
10986
  {
11136
- $size: "sm",
11137
- $color: "primary",
11138
- $variant: "outline",
11139
- style: {
11140
- whiteSpace: "nowrap",
11141
- paddingLeft: "1rem",
11142
- paddingRight: "1rem"
11143
- },
11144
- children: "Edit"
10987
+ $flexDirection: "column",
10988
+ $position: "relative",
10989
+ $gap: "0.5rem",
10990
+ $flex: "1",
10991
+ $width: "100%",
10992
+ $height: "auto",
10993
+ $padding: "1.5rem",
10994
+ children: plan.entitlements.map((entitlement) => {
10995
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10996
+ Flex,
10997
+ {
10998
+ $flexWrap: "wrap",
10999
+ $justifyContent: "space-between",
11000
+ $alignItems: "center",
11001
+ $gap: "1rem",
11002
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $gap: "1rem", children: [
11003
+ entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11004
+ IconRound,
11005
+ {
11006
+ name: entitlement.feature.icon,
11007
+ size: "sm",
11008
+ colors: [
11009
+ theme.primary,
11010
+ isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
11011
+ ]
11012
+ }
11013
+ ),
11014
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FeatureName, { entitlement })
11015
+ ] })
11016
+ },
11017
+ entitlement.id
11018
+ );
11019
+ })
11145
11020
  }
11146
- ) })
11147
- ] })
11148
- ] })
11149
- }
11150
- ),
11151
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11152
- Flex,
11153
- {
11154
- $flexDirection: "column",
11155
- $gap: "1rem",
11156
- $backgroundColor: "#FBFBFB",
11157
- $borderRadius: "0 0 0.5rem 0.5rem",
11158
- $flex: "1",
11159
- $height: "100%",
11160
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11161
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11162
- Box,
11163
- {
11164
- $fontSize: "18px",
11165
- $marginBottom: "1.5rem",
11166
- $display: "inline-block",
11167
- $width: "100%",
11168
- children: "Others"
11169
- }
11170
- ),
11171
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11172
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11021
+ ),
11022
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11173
11023
  Flex,
11174
11024
  {
11175
- $alignItems: "center",
11176
- $padding: ".5rem 1rem",
11177
- $border: "1px solid #E2E5E9",
11178
- $borderRadius: ".5rem",
11179
- $backgroundColor: "#ffffff",
11025
+ $flexDirection: "column",
11026
+ $position: "relative",
11180
11027
  $gap: "1rem",
11181
11028
  $width: "100%",
11182
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11183
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
11184
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11185
- "svg",
11186
- {
11187
- viewBox: "0 0 24 16",
11188
- fill: "none",
11189
- xmlns: "http://www.w3.org/2000/svg",
11190
- width: "26px",
11191
- height: "auto",
11192
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
11193
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11194
- "rect",
11195
- {
11196
- stroke: "#DDD",
11197
- fill: "#FFF",
11198
- x: ".25",
11199
- y: ".25",
11200
- width: "23",
11201
- height: "15.5",
11202
- rx: "2"
11203
- }
11204
- ),
11205
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11206
- "path",
11207
- {
11208
- d: "M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z",
11209
- fill: "#1434CB"
11029
+ $height: "auto",
11030
+ $padding: "1.5rem",
11031
+ children: [
11032
+ plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11033
+ Flex,
11034
+ {
11035
+ $justifyContent: "center",
11036
+ $alignItems: "center",
11037
+ $gap: "0.25rem",
11038
+ $fontSize: "0.9375rem",
11039
+ $padding: "0.625rem 0",
11040
+ children: [
11041
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11042
+ Icon2,
11043
+ {
11044
+ name: "check-rounded",
11045
+ style: {
11046
+ fontSize: 20,
11047
+ lineHeight: "1",
11048
+ color: theme.primary
11210
11049
  }
11211
- )
11212
- ] })
11213
- }
11214
- ) }),
11215
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11216
- ] }),
11217
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
11218
- ] })
11050
+ }
11051
+ ),
11052
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11053
+ Text,
11054
+ {
11055
+ $lineHeight: "1.4",
11056
+ $color: theme.typography.text.color,
11057
+ children: "Selected"
11058
+ }
11059
+ )
11060
+ ]
11061
+ }
11062
+ ),
11063
+ !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11064
+ StyledButton,
11065
+ {
11066
+ disabled: plan.valid === false,
11067
+ ...plan.valid === true && {
11068
+ onClick: () => setSelectedPlan(plan)
11069
+ },
11070
+ $size: "sm",
11071
+ $color: "primary",
11072
+ $variant: "outline",
11073
+ children: "Select"
11074
+ }
11075
+ )
11076
+ ]
11219
11077
  }
11220
- ),
11221
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11222
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11223
- StyledButton,
11078
+ )
11079
+ ]
11080
+ },
11081
+ plan.id
11082
+ );
11083
+ }) })
11084
+ ] }),
11085
+ selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: showPaymentForm ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
11086
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11087
+ PaymentForm,
11088
+ {
11089
+ plan: selectedPlan,
11090
+ period: planPeriod,
11091
+ onConfirm: (value) => {
11092
+ setPaymentMethodId(value);
11093
+ }
11094
+ }
11095
+ ),
11096
+ typeof data.subscription?.paymentMethod !== "undefined" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11097
+ Box,
11098
+ {
11099
+ tabIndex: 0,
11100
+ onClick: () => setShowPaymentForm(false),
11101
+ $cursor: "pointer",
11102
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11103
+ Text,
11104
+ {
11105
+ $font: theme.typography.link.fontFamily,
11106
+ $size: theme.typography.link.fontSize,
11107
+ $weight: theme.typography.link.fontWeight,
11108
+ $color: theme.typography.link.color,
11109
+ children: "Use existing payment method"
11110
+ }
11111
+ )
11112
+ }
11113
+ )
11114
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
11115
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PaymentMethod, {}),
11116
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11117
+ Box,
11118
+ {
11119
+ tabIndex: 0,
11120
+ onClick: () => setShowPaymentForm(true),
11121
+ $cursor: "pointer",
11122
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11123
+ Text,
11124
+ {
11125
+ $font: theme.typography.link.fontFamily,
11126
+ $size: theme.typography.link.fontSize,
11127
+ $weight: theme.typography.link.fontWeight,
11128
+ $color: theme.typography.link.color,
11129
+ children: "Change payment method"
11130
+ }
11131
+ )
11132
+ }
11133
+ )
11134
+ ] }) })
11135
+ ]
11136
+ }
11137
+ ),
11138
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11139
+ Flex,
11140
+ {
11141
+ $flexDirection: "column",
11142
+ $backgroundColor: theme.card.background,
11143
+ $borderRadius: "0 0 0.5rem",
11144
+ $width: "21.5rem",
11145
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
11146
+ children: [
11147
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11148
+ Flex,
11149
+ {
11150
+ $flexDirection: "column",
11151
+ $position: "relative",
11152
+ $gap: "1rem",
11153
+ $width: "100%",
11154
+ $height: "auto",
11155
+ $padding: "1.5rem",
11156
+ $borderBottomWidth: "1px",
11157
+ $borderStyle: "solid",
11158
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
11159
+ children: [
11160
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11161
+ Text,
11162
+ {
11163
+ as: "h3",
11164
+ $font: theme.typography.heading3.fontFamily,
11165
+ $size: theme.typography.heading3.fontSize,
11166
+ $weight: theme.typography.heading3.fontWeight,
11167
+ $color: theme.typography.heading3.color,
11168
+ children: "Subscription"
11169
+ }
11170
+ ) }),
11171
+ planPeriodOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11172
+ Flex,
11173
+ {
11174
+ $borderWidth: "1px",
11175
+ $borderStyle: "solid",
11176
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
11177
+ $borderRadius: "2.5rem",
11178
+ $cursor: "pointer",
11179
+ children: [
11180
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11181
+ Flex,
11224
11182
  {
11225
- $size: "sm",
11226
- $color: "primary",
11227
- $variant: "outline",
11228
- style: {
11229
- whiteSpace: "nowrap",
11230
- paddingLeft: "1rem",
11231
- paddingRight: "1rem"
11183
+ onClick: () => setPlanPeriod("month"),
11184
+ $justifyContent: "center",
11185
+ $alignItems: "center",
11186
+ $padding: "0.25rem 0.5rem",
11187
+ $flex: "1",
11188
+ ...planPeriod === "month" && {
11189
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
11232
11190
  },
11233
- children: "Make Default"
11191
+ $borderRadius: "2.5rem",
11192
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11193
+ Text,
11194
+ {
11195
+ $font: theme.typography.text.fontFamily,
11196
+ $size: 14,
11197
+ $weight: planPeriod === "month" ? 600 : 400,
11198
+ $color: theme.typography.text.color,
11199
+ children: "Billed monthly"
11200
+ }
11201
+ )
11234
11202
  }
11235
11203
  ),
11236
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11237
- StyledButton,
11204
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11205
+ Flex,
11238
11206
  {
11239
- $size: "sm",
11240
- $color: "primary",
11241
- $variant: "outline",
11242
- style: {
11243
- whiteSpace: "nowrap",
11244
- paddingLeft: "1rem",
11245
- paddingRight: "1rem"
11207
+ onClick: () => setPlanPeriod("year"),
11208
+ $justifyContent: "center",
11209
+ $alignItems: "center",
11210
+ $padding: "0.25rem 0.5rem",
11211
+ $flex: "1",
11212
+ ...planPeriod === "year" && {
11213
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
11246
11214
  },
11247
- children: "Edit"
11215
+ $borderRadius: "2.5rem",
11216
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11217
+ Text,
11218
+ {
11219
+ $font: theme.typography.text.fontFamily,
11220
+ $size: 14,
11221
+ $weight: planPeriod === "year" ? 600 : 400,
11222
+ $color: theme.typography.text.color,
11223
+ children: "Billed yearly"
11224
+ }
11225
+ )
11248
11226
  }
11249
11227
  )
11250
- ] })
11251
- ] })
11252
- ] })
11253
- }
11254
- )
11228
+ ]
11229
+ }
11230
+ ),
11231
+ savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11232
+ Text,
11233
+ {
11234
+ $font: theme.typography.text.fontFamily,
11235
+ $size: 11,
11236
+ $weight: theme.typography.text.fontWeight,
11237
+ $color: theme.primary,
11238
+ children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
11239
+ }
11240
+ ) })
11241
+ ]
11242
+ }
11243
+ ),
11244
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11245
+ Flex,
11246
+ {
11247
+ $flexDirection: "column",
11248
+ $position: "relative",
11249
+ $gap: "1rem",
11250
+ $width: "100%",
11251
+ $height: "auto",
11252
+ $padding: "1.5rem",
11253
+ $flex: "1",
11254
+ $borderBottomWidth: "1px",
11255
+ $borderStyle: "solid",
11256
+ $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
11257
+ children: [
11258
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11259
+ Text,
11260
+ {
11261
+ $font: theme.typography.text.fontFamily,
11262
+ $size: 14,
11263
+ $weight: theme.typography.text.fontWeight,
11264
+ $color: theme.typography.text.color,
11265
+ children: "Plan"
11266
+ }
11267
+ ) }),
11268
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
11269
+ currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
11270
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11271
+ Flex,
11272
+ {
11273
+ ...selectedPlan && {
11274
+ $opacity: "0.625",
11275
+ $textDecoration: "line-through"
11276
+ },
11277
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11278
+ Text,
11279
+ {
11280
+ $font: theme.typography.heading4.fontFamily,
11281
+ $size: theme.typography.heading4.fontSize,
11282
+ $weight: theme.typography.heading4.fontWeight,
11283
+ $color: theme.typography.heading4.color,
11284
+ children: currentPlan.name
11285
+ }
11286
+ )
11287
+ }
11288
+ ),
11289
+ typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11290
+ Text,
11291
+ {
11292
+ $font: theme.typography.text.fontFamily,
11293
+ $size: theme.typography.text.fontSize,
11294
+ $weight: theme.typography.text.fontWeight,
11295
+ $color: theme.typography.text.color,
11296
+ children: [
11297
+ formatCurrency(currentPlan.planPrice),
11298
+ "/",
11299
+ currentPlan.planPeriod
11300
+ ]
11301
+ }
11302
+ ) })
11303
+ ] }),
11304
+ selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
11305
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11306
+ Box,
11307
+ {
11308
+ $width: "100%",
11309
+ $textAlign: "left",
11310
+ $opacity: "50%",
11311
+ $marginBottom: "-0.25rem",
11312
+ $marginTop: "-0.25rem",
11313
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11314
+ Icon2,
11315
+ {
11316
+ name: "arrow-down",
11317
+ style: {
11318
+ display: "inline-block"
11319
+ }
11320
+ }
11321
+ )
11322
+ }
11323
+ ),
11324
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
11325
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11326
+ Text,
11327
+ {
11328
+ $font: theme.typography.heading4.fontFamily,
11329
+ $size: theme.typography.heading4.fontSize,
11330
+ $weight: theme.typography.heading4.fontWeight,
11331
+ $color: theme.typography.heading4.color,
11332
+ children: selectedPlan.name
11333
+ }
11334
+ ) }),
11335
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11336
+ Text,
11337
+ {
11338
+ $font: theme.typography.text.fontFamily,
11339
+ $size: theme.typography.text.fontSize,
11340
+ $weight: theme.typography.text.fontWeight,
11341
+ $color: theme.typography.text.color,
11342
+ children: [
11343
+ formatCurrency(
11344
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
11345
+ ),
11346
+ "/",
11347
+ planPeriod
11348
+ ]
11349
+ }
11350
+ ) })
11351
+ ] })
11352
+ ] })
11353
+ ] })
11354
+ ]
11355
+ }
11356
+ ),
11357
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11358
+ Flex,
11359
+ {
11360
+ $flexDirection: "column",
11361
+ $position: "relative",
11362
+ $gap: "1rem",
11363
+ $width: "100%",
11364
+ $height: "auto",
11365
+ $padding: "1.5rem",
11366
+ children: [
11367
+ selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Flex, { $justifyContent: "space-between", children: [
11368
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11369
+ Text,
11370
+ {
11371
+ $font: theme.typography.text.fontFamily,
11372
+ $size: theme.typography.text.fontSize,
11373
+ $weight: theme.typography.text.fontWeight,
11374
+ $color: theme.typography.text.color,
11375
+ children: [
11376
+ planPeriod === "month" ? "Monthly" : "Yearly",
11377
+ " total:",
11378
+ " "
11379
+ ]
11380
+ }
11381
+ ) }),
11382
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11383
+ Text,
11384
+ {
11385
+ $font: theme.typography.text.fontFamily,
11386
+ $size: theme.typography.text.fontSize,
11387
+ $weight: theme.typography.text.fontWeight,
11388
+ $color: theme.typography.text.color,
11389
+ children: [
11390
+ formatCurrency(
11391
+ (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
11392
+ ),
11393
+ "/",
11394
+ planPeriod
11395
+ ]
11396
+ }
11397
+ ) })
11398
+ ] }),
11399
+ checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11400
+ StyledButton,
11401
+ {
11402
+ disabled: !selectedPlan,
11403
+ ...selectedPlan && {
11404
+ onClick: () => setCheckoutStage("checkout")
11405
+ },
11406
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11407
+ Flex,
11408
+ {
11409
+ $gap: "0.5rem",
11410
+ $justifyContent: "center",
11411
+ $alignItems: "center",
11412
+ $padding: "0 1rem",
11413
+ children: [
11414
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Text, { $align: "left", $lineHeight: 1, children: "Next: Checkout" }),
11415
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { name: "arrow-right" })
11416
+ ]
11417
+ }
11418
+ )
11419
+ }
11420
+ ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11421
+ StyledButton,
11422
+ {
11423
+ ...allowCheckout ? {
11424
+ onClick: async () => {
11425
+ const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
11426
+ if (!priceId) {
11427
+ return;
11428
+ }
11429
+ try {
11430
+ setIsLoading(true);
11431
+ await api.checkout({
11432
+ changeSubscriptionRequestBody: {
11433
+ newPlanId: selectedPlan.id,
11434
+ newPriceId: priceId,
11435
+ ...paymentMethodId && { paymentMethodId }
11436
+ }
11437
+ });
11438
+ setLayout("success");
11439
+ } catch {
11440
+ setError(
11441
+ "Error processing payment. Please try a different payment method."
11442
+ );
11443
+ } finally {
11444
+ setIsLoading(false);
11445
+ }
11446
+ }
11447
+ } : { disabled: true },
11448
+ children: "Pay now"
11449
+ }
11450
+ ),
11451
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11452
+ Text,
11453
+ {
11454
+ $font: theme.typography.text.fontFamily,
11455
+ $size: theme.typography.text.fontSize,
11456
+ $weight: theme.typography.text.fontWeight,
11457
+ $color: theme.typography.text.color,
11458
+ children: "Discounts & credits applied at checkout"
11459
+ }
11460
+ ) }),
11461
+ error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11462
+ Text,
11463
+ {
11464
+ $font: theme.typography.text.fontFamily,
11465
+ $size: theme.typography.text.fontSize,
11466
+ $weight: 500,
11467
+ $color: "#DB6669",
11468
+ children: error
11469
+ }
11470
+ ) })
11471
+ ]
11472
+ }
11473
+ )
11474
+ ]
11475
+ }
11476
+ )
11477
+ ] })
11478
+ ] });
11479
+ };
11480
+
11481
+ // src/components/elements/plan-manager/PlanManager.tsx
11482
+ var import_jsx_runtime12 = require("react/jsx-runtime");
11483
+ var resolveDesignProps2 = (props) => {
11484
+ return {
11485
+ header: {
11486
+ isVisible: props.header?.isVisible ?? true,
11487
+ title: {
11488
+ fontStyle: props.header?.title?.fontStyle ?? "heading1"
11489
+ },
11490
+ description: {
11491
+ isVisible: props.header?.description?.isVisible ?? true,
11492
+ fontStyle: props.header?.description?.fontStyle ?? "text"
11493
+ },
11494
+ price: {
11495
+ isVisible: props.header?.price?.isVisible ?? true,
11496
+ fontStyle: props.header?.price?.fontStyle ?? "text"
11497
+ }
11498
+ },
11499
+ addOns: {
11500
+ isVisible: props.addOns?.isVisible ?? true,
11501
+ fontStyle: props.addOns?.fontStyle ?? "heading4",
11502
+ showLabel: props.addOns?.showLabel ?? true
11503
+ },
11504
+ callToAction: {
11505
+ isVisible: props.callToAction?.isVisible ?? true,
11506
+ buttonSize: props.callToAction?.buttonSize ?? "lg",
11507
+ buttonStyle: props.callToAction?.buttonStyle ?? "primary"
11508
+ }
11509
+ };
11510
+ };
11511
+ var PlanManager = (0, import_react11.forwardRef)(({ children, className, portal, ...rest }, ref) => {
11512
+ const props = resolveDesignProps2(rest);
11513
+ const theme = nt();
11514
+ const { data, layout, stripe, setLayout } = useEmbed();
11515
+ const { currentPlan, canChangePlan } = (0, import_react11.useMemo)(() => {
11516
+ return {
11517
+ currentPlan: data.company?.plan,
11518
+ canChangePlan: stripe !== null
11519
+ };
11520
+ }, [data.company, stripe]);
11521
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
11522
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11523
+ Flex,
11524
+ {
11525
+ $flexDirection: "column",
11526
+ $gap: "0.75rem",
11527
+ ...canChangePlan && { $margin: "0 0 0.5rem" },
11528
+ children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
11529
+ Flex,
11530
+ {
11531
+ $justifyContent: "space-between",
11532
+ $alignItems: "center",
11533
+ $width: "100%",
11534
+ ...canChangePlan && { $margin: "0 0 1.5rem" },
11535
+ children: [
11536
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
11537
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11538
+ Text,
11539
+ {
11540
+ $font: theme.typography[props.header.title.fontStyle].fontFamily,
11541
+ $size: theme.typography[props.header.title.fontStyle].fontSize,
11542
+ $weight: theme.typography[props.header.title.fontStyle].fontWeight,
11543
+ $color: theme.typography[props.header.title.fontStyle].color,
11544
+ $lineHeight: 1,
11545
+ children: currentPlan.name
11546
+ }
11547
+ ) }),
11548
+ props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11549
+ Text,
11550
+ {
11551
+ $font: theme.typography[props.header.description.fontStyle].fontFamily,
11552
+ $size: theme.typography[props.header.description.fontStyle].fontSize,
11553
+ $weight: theme.typography[props.header.description.fontStyle].fontWeight,
11554
+ $color: theme.typography[props.header.description.fontStyle].color,
11555
+ children: currentPlan.description
11556
+ }
11557
+ )
11558
+ ] }),
11559
+ props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
11560
+ Text,
11561
+ {
11562
+ $font: theme.typography[props.header.price.fontStyle].fontFamily,
11563
+ $size: theme.typography[props.header.price.fontStyle].fontSize,
11564
+ $weight: theme.typography[props.header.price.fontStyle].fontWeight,
11565
+ $color: theme.typography[props.header.price.fontStyle].color,
11566
+ children: [
11567
+ formatCurrency(currentPlan.planPrice),
11568
+ "/",
11569
+ currentPlan.planPeriod
11570
+ ]
11571
+ }
11572
+ )
11573
+ ]
11574
+ }
11575
+ )
11576
+ }
11577
+ ),
11578
+ canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11579
+ StyledButton,
11580
+ {
11581
+ onClick: () => {
11582
+ setLayout("checkout");
11583
+ },
11584
+ $size: props.callToAction.buttonSize,
11585
+ $color: props.callToAction.buttonStyle,
11586
+ children: "Change Plan"
11587
+ }
11588
+ ),
11589
+ canChangePlan && layout === "checkout" && (0, import_react_dom2.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckoutDialog, {}), portal || document.body)
11590
+ ] });
11591
+ });
11592
+
11593
+ // src/components/elements/included-features/IncludedFeatures.tsx
11594
+ var import_react12 = require("react");
11595
+ var import_pluralize2 = __toESM(require_pluralize());
11596
+ var import_jsx_runtime13 = require("react/jsx-runtime");
11597
+ function resolveDesignProps3(props) {
11598
+ return {
11599
+ header: {
11600
+ isVisible: props.header?.isVisible ?? true,
11601
+ fontStyle: props.header?.fontStyle ?? "heading4",
11602
+ text: props.header?.text ?? "Included features"
11603
+ },
11604
+ icons: {
11605
+ isVisible: props.icons?.isVisible ?? true,
11606
+ fontStyle: props.icons?.fontStyle ?? "heading5",
11607
+ style: props.icons?.style ?? "light"
11608
+ },
11609
+ entitlement: {
11610
+ isVisible: props.entitlement?.isVisible ?? true,
11611
+ fontStyle: props.entitlement?.fontStyle ?? "text"
11612
+ },
11613
+ usage: {
11614
+ isVisible: props.usage?.isVisible ?? true,
11615
+ fontStyle: props.usage?.fontStyle ?? "heading6"
11616
+ }
11617
+ };
11618
+ }
11619
+ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
11620
+ const props = resolveDesignProps3(rest);
11621
+ const theme = nt();
11622
+ const { data } = useEmbed();
11623
+ const features = (0, import_react12.useMemo)(() => {
11624
+ return (data.featureUsage?.features || []).map(
11625
+ ({
11626
+ access,
11627
+ allocation,
11628
+ allocationType,
11629
+ feature,
11630
+ period,
11631
+ usage = 0,
11632
+ ...props2
11633
+ }) => {
11634
+ return {
11635
+ access,
11636
+ allocation,
11637
+ allocationType,
11638
+ feature,
11639
+ period,
11640
+ /**
11641
+ * @TODO: resolve feature price
11642
+ */
11643
+ price: void 0,
11644
+ usage,
11645
+ ...props2
11646
+ };
11647
+ }
11648
+ );
11649
+ }, [data.featureUsage]);
11650
+ const isLightBackground = (0, import_react12.useMemo)(() => {
11651
+ return hexToHSL(theme.card.background).l > 50;
11652
+ }, [theme.card.background]);
11653
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
11654
+ props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11655
+ Text,
11656
+ {
11657
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11658
+ $size: theme.typography[props.header.fontStyle].fontSize,
11659
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11660
+ $color: theme.typography[props.header.fontStyle].color,
11661
+ children: props.header.text
11662
+ }
11663
+ ) }),
11664
+ features.reduce(
11665
+ (acc, { allocation, allocationType, feature, usage }, index) => {
11666
+ if (!allocationType) {
11667
+ return acc;
11668
+ }
11669
+ return [
11670
+ ...acc,
11671
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
11672
+ Flex,
11673
+ {
11674
+ $flexWrap: "wrap",
11675
+ $justifyContent: "space-between",
11676
+ $alignItems: "center",
11677
+ $gap: "1rem",
11678
+ children: [
11679
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1rem", children: [
11680
+ props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11681
+ IconRound,
11682
+ {
11683
+ name: feature.icon,
11684
+ size: "sm",
11685
+ colors: [
11686
+ theme.primary,
11687
+ isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
11688
+ ]
11689
+ }
11690
+ ),
11691
+ feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11692
+ Text,
11693
+ {
11694
+ $font: theme.typography[props.icons.fontStyle].fontFamily,
11695
+ $size: theme.typography[props.icons.fontStyle].fontSize,
11696
+ $weight: theme.typography[props.icons.fontStyle].fontWeight,
11697
+ $color: theme.typography[props.icons.fontStyle].color,
11698
+ children: feature.name
11699
+ }
11700
+ ) })
11701
+ ] }),
11702
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
11703
+ props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11704
+ Text,
11705
+ {
11706
+ as: Box,
11707
+ $font: theme.typography[props.entitlement.fontStyle].fontFamily,
11708
+ $size: theme.typography[props.entitlement.fontStyle].fontSize,
11709
+ $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
11710
+ $lineHeight: 1.5,
11711
+ $color: theme.typography[props.entitlement.fontStyle].color,
11712
+ children: typeof allocation === "number" ? (0, import_pluralize2.default)(feature.name, allocation, true) : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
11713
+ }
11714
+ ),
11715
+ props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11716
+ Text,
11717
+ {
11718
+ as: Box,
11719
+ $font: theme.typography[props.usage.fontStyle].fontFamily,
11720
+ $size: theme.typography[props.usage.fontStyle].fontSize,
11721
+ $weight: theme.typography[props.usage.fontStyle].fontWeight,
11722
+ $lineHeight: 1.5,
11723
+ $color: theme.typography[props.usage.fontStyle].color,
11724
+ children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
11725
+ }
11726
+ )
11727
+ ] })
11728
+ ]
11729
+ },
11730
+ index
11731
+ )
11732
+ ];
11733
+ },
11734
+ []
11735
+ )
11736
+ ] });
11737
+ });
11738
+
11739
+ // src/components/elements/metered-features/MeteredFeatures.tsx
11740
+ var import_react13 = require("react");
11741
+ var import_jsx_runtime14 = require("react/jsx-runtime");
11742
+ function resolveDesignProps4(props) {
11743
+ return {
11744
+ isVisible: props.isVisible ?? true,
11745
+ header: {
11746
+ fontStyle: props.header?.fontStyle ?? "heading2"
11747
+ },
11748
+ description: {
11749
+ isVisible: props.description?.isVisible ?? true,
11750
+ fontStyle: props.description?.fontStyle ?? "text"
11751
+ },
11752
+ icon: {
11753
+ isVisible: props.icon?.isVisible ?? true
11754
+ },
11755
+ allocation: {
11756
+ isVisible: props.allocation?.isVisible ?? true,
11757
+ fontStyle: props.allocation?.fontStyle ?? "heading4"
11758
+ },
11759
+ usage: {
11760
+ isVisible: props.usage?.isVisible ?? true,
11761
+ fontStyle: props.usage?.fontStyle ?? "heading5"
11762
+ },
11763
+ callToAction: {
11764
+ isVisible: props.callToAction?.isVisible ?? true,
11765
+ buttonSize: props.callToAction?.buttonSize ?? "md",
11766
+ buttonStyle: props.callToAction?.buttonStyle ?? "primary"
11767
+ }
11768
+ };
11769
+ }
11770
+ var MeteredFeatures = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
11771
+ const props = resolveDesignProps4(rest);
11772
+ const theme = nt();
11773
+ const { data } = useEmbed();
11774
+ const features = (0, import_react13.useMemo)(() => {
11775
+ return (data.featureUsage?.features || []).map(
11776
+ ({
11777
+ access,
11778
+ allocation,
11779
+ allocationType,
11780
+ feature,
11781
+ period,
11782
+ usage,
11783
+ ...props2
11784
+ }) => {
11785
+ return {
11786
+ access,
11787
+ allocation,
11788
+ allocationType,
11789
+ feature,
11790
+ period,
11791
+ /**
11792
+ * @TODO: resolve feature price
11793
+ */
11794
+ price: void 0,
11795
+ usage,
11796
+ ...props2
11797
+ };
11798
+ }
11799
+ );
11800
+ }, [data.featureUsage]);
11801
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
11802
+ (acc, { allocation, allocationType, feature, usage }, index) => {
11803
+ if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
11804
+ return acc;
11805
+ }
11806
+ return [
11807
+ ...acc,
11808
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $gap: "1.5rem", children: [
11809
+ props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $flexShrink: "0", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconRound, { name: feature.icon, size: "sm" }) }),
11810
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box, { $flexGrow: "1", children: [
11811
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { children: [
11812
+ feature?.name && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box, { $flexGrow: "1", children: [
11813
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11814
+ Text,
11815
+ {
11816
+ as: Box,
11817
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11818
+ $size: theme.typography[props.header.fontStyle].fontSize,
11819
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11820
+ $color: theme.typography[props.header.fontStyle].color,
11821
+ children: feature.name
11822
+ }
11823
+ ),
11824
+ props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11825
+ Text,
11826
+ {
11827
+ as: Box,
11828
+ $font: theme.typography[props.description.fontStyle].fontFamily,
11829
+ $size: theme.typography[props.description.fontStyle].fontSize,
11830
+ $weight: theme.typography[props.description.fontStyle].fontWeight,
11831
+ $color: theme.typography[props.description.fontStyle].color,
11832
+ children: feature.description
11833
+ }
11834
+ )
11835
+ ] }),
11836
+ allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Box, { $textAlign: "right", children: [
11837
+ props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11838
+ Text,
11839
+ {
11840
+ as: Box,
11841
+ $font: theme.typography[props.allocation.fontStyle].fontFamily,
11842
+ $size: theme.typography[props.allocation.fontStyle].fontSize,
11843
+ $weight: theme.typography[props.allocation.fontStyle].fontWeight,
11844
+ $color: theme.typography[props.allocation.fontStyle].color,
11845
+ children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
11846
+ }
11847
+ ),
11848
+ props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11849
+ Text,
11850
+ {
11851
+ as: Box,
11852
+ $font: theme.typography[props.usage.fontStyle].fontFamily,
11853
+ $size: theme.typography[props.usage.fontStyle].fontSize,
11854
+ $weight: theme.typography[props.usage.fontStyle].fontWeight,
11855
+ $color: theme.typography[props.usage.fontStyle].color,
11856
+ children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
11857
+ }
11858
+ )
11859
+ ] })
11860
+ ] }),
11861
+ typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11862
+ ProgressBar,
11863
+ {
11864
+ progress: usage / allocation * 100,
11865
+ value: usage,
11866
+ total: allocation,
11867
+ color: "blue"
11868
+ }
11869
+ ) })
11870
+ ] })
11871
+ ] }, index)
11872
+ ];
11873
+ },
11874
+ []
11875
+ ) });
11876
+ });
11877
+
11878
+ // src/components/elements/upcoming-bill/UpcomingBill.tsx
11879
+ var import_react14 = require("react");
11880
+ var import_jsx_runtime15 = require("react/jsx-runtime");
11881
+ function resolveDesignProps5(props) {
11882
+ return {
11883
+ header: {
11884
+ isVisible: props.header?.isVisible ?? true,
11885
+ fontStyle: props.header?.fontStyle ?? "heading4",
11886
+ prefix: props.header?.prefix ?? "Next bill due"
11887
+ },
11888
+ price: {
11889
+ isVisible: props.price?.isVisible ?? true,
11890
+ fontStyle: props.price?.fontStyle ?? "heading1"
11891
+ },
11892
+ contractEndDate: {
11893
+ isVisible: props.contractEndDate?.isVisible ?? true,
11894
+ fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
11895
+ prefix: props.contractEndDate?.prefix ?? "Contract ends"
11896
+ }
11897
+ };
11898
+ }
11899
+ var UpcomingBill = (0, import_react14.forwardRef)(({ className, ...rest }, ref) => {
11900
+ const props = resolveDesignProps5(rest);
11901
+ const theme = nt();
11902
+ const { data, stripe } = useEmbed();
11903
+ const { upcomingInvoice } = (0, import_react14.useMemo)(() => {
11904
+ return {
11905
+ upcomingInvoice: {
11906
+ ...data.upcomingInvoice?.amountDue && {
11907
+ amountDue: data.upcomingInvoice.amountDue
11908
+ },
11909
+ ...data.subscription?.interval && {
11910
+ interval: data.subscription.interval
11911
+ },
11912
+ ...data.upcomingInvoice?.dueDate && {
11913
+ dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
11914
+ }
11915
+ }
11916
+ };
11917
+ }, [data.subscription, data.upcomingInvoice]);
11918
+ if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
11919
+ return null;
11920
+ }
11921
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
11922
+ props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11923
+ Flex,
11924
+ {
11925
+ $justifyContent: "space-between",
11926
+ $alignItems: "center",
11927
+ $margin: "0 0 0.75rem",
11928
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
11929
+ Text,
11930
+ {
11931
+ $font: theme.typography[props.header.fontStyle].fontFamily,
11932
+ $size: theme.typography[props.header.fontStyle].fontSize,
11933
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
11934
+ $color: theme.typography[props.header.fontStyle].color,
11935
+ children: [
11936
+ props.header.prefix,
11937
+ " ",
11938
+ upcomingInvoice.dueDate
11255
11939
  ]
11256
11940
  }
11257
11941
  )
11258
- ] }),
11259
- portal || document.body
11260
- )
11942
+ }
11943
+ ),
11944
+ upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
11945
+ props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11946
+ Text,
11947
+ {
11948
+ $font: theme.typography[props.price.fontStyle].fontFamily,
11949
+ $size: theme.typography[props.price.fontStyle].fontSize,
11950
+ $weight: theme.typography[props.price.fontStyle].fontWeight,
11951
+ $color: theme.typography[props.price.fontStyle].color,
11952
+ $lineHeight: 1,
11953
+ children: formatCurrency(upcomingInvoice.amountDue)
11954
+ }
11955
+ ) }),
11956
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11957
+ Text,
11958
+ {
11959
+ $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
11960
+ $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
11961
+ $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
11962
+ $color: theme.typography[props.contractEndDate.fontStyle].color,
11963
+ children: "Estimated monthly bill."
11964
+ }
11965
+ ) })
11966
+ ] })
11261
11967
  ] });
11262
11968
  });
11263
11969
 
@@ -11290,7 +11996,7 @@ function resolveDesignProps6(props) {
11290
11996
  }
11291
11997
  var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11292
11998
  const props = resolveDesignProps6(rest);
11293
- const { settings } = useEmbed();
11999
+ const theme = nt();
11294
12000
  const { invoices } = (0, import_react15.useMemo)(() => {
11295
12001
  return {
11296
12002
  invoices: [
@@ -11309,10 +12015,10 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11309
12015
  props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11310
12016
  Text,
11311
12017
  {
11312
- $font: settings.theme.typography[props.header.fontStyle].fontFamily,
11313
- $size: settings.theme.typography[props.header.fontStyle].fontSize,
11314
- $weight: settings.theme.typography[props.header.fontStyle].fontWeight,
11315
- $color: settings.theme.typography[props.header.fontStyle].color,
12018
+ $font: theme.typography[props.header.fontStyle].fontFamily,
12019
+ $size: theme.typography[props.header.fontStyle].fontSize,
12020
+ $weight: theme.typography[props.header.fontStyle].fontWeight,
12021
+ $color: theme.typography[props.header.fontStyle].color,
11316
12022
  children: "Invoices"
11317
12023
  }
11318
12024
  ) }),
@@ -11324,20 +12030,20 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11324
12030
  props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11325
12031
  Text,
11326
12032
  {
11327
- $font: settings.theme.typography[props.date.fontStyle].fontFamily,
11328
- $size: settings.theme.typography[props.date.fontStyle].fontSize,
11329
- $weight: settings.theme.typography[props.date.fontStyle].fontWeight,
11330
- $color: settings.theme.typography[props.date.fontStyle].color,
12033
+ $font: theme.typography[props.date.fontStyle].fontFamily,
12034
+ $size: theme.typography[props.date.fontStyle].fontSize,
12035
+ $weight: theme.typography[props.date.fontStyle].fontWeight,
12036
+ $color: theme.typography[props.date.fontStyle].color,
11331
12037
  children: toPrettyDate(date)
11332
12038
  }
11333
12039
  ),
11334
12040
  props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
11335
12041
  Text,
11336
12042
  {
11337
- $font: settings.theme.typography[props.amount.fontStyle].fontFamily,
11338
- $size: settings.theme.typography[props.amount.fontStyle].fontSize,
11339
- $weight: settings.theme.typography[props.amount.fontStyle].fontWeight,
11340
- $color: settings.theme.typography[props.amount.fontStyle].color,
12043
+ $font: theme.typography[props.amount.fontStyle].fontFamily,
12044
+ $size: theme.typography[props.amount.fontStyle].fontSize,
12045
+ $weight: theme.typography[props.amount.fontStyle].fontWeight,
12046
+ $color: theme.typography[props.amount.fontStyle].color,
11341
12047
  children: [
11342
12048
  "$",
11343
12049
  amount
@@ -11351,10 +12057,10 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11351
12057
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
11352
12058
  Text,
11353
12059
  {
11354
- $font: settings.theme.typography[props.collapse.fontStyle].fontFamily,
11355
- $size: settings.theme.typography[props.collapse.fontStyle].fontSize,
11356
- $weight: settings.theme.typography[props.collapse.fontStyle].fontWeight,
11357
- $color: settings.theme.typography[props.collapse.fontStyle].color,
12060
+ $font: theme.typography[props.collapse.fontStyle].fontFamily,
12061
+ $size: theme.typography[props.collapse.fontStyle].fontSize,
12062
+ $weight: theme.typography[props.collapse.fontStyle].fontWeight,
12063
+ $color: theme.typography[props.collapse.fontStyle].color,
11358
12064
  children: "See all"
11359
12065
  }
11360
12066
  )
@@ -11363,10 +12069,10 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11363
12069
  });
11364
12070
 
11365
12071
  // src/components/embed/ComponentTree.tsx
11366
- var import_react21 = require("react");
12072
+ var import_react23 = require("react");
11367
12073
 
11368
12074
  // src/components/embed/renderer.ts
11369
- var import_react20 = require("react");
12075
+ var import_react22 = require("react");
11370
12076
 
11371
12077
  // src/components/layout/root/Root.tsx
11372
12078
  var import_react16 = require("react");
@@ -11378,7 +12084,7 @@ var Root = (0, import_react16.forwardRef)(
11378
12084
  );
11379
12085
 
11380
12086
  // src/components/layout/viewport/Viewport.tsx
11381
- var import_react17 = require("react");
12087
+ var import_react19 = require("react");
11382
12088
 
11383
12089
  // src/components/layout/viewport/styles.ts
11384
12090
  var StyledViewport = dt.div`
@@ -11388,64 +12094,149 @@ var StyledViewport = dt.div`
11388
12094
  margin-right: auto;
11389
12095
  `;
11390
12096
 
11391
- // src/components/layout/viewport/Viewport.tsx
12097
+ // src/components/layout/RenderLayout.tsx
12098
+ var import_react17 = require("react");
12099
+ var import_react18 = require("react");
11392
12100
  var import_jsx_runtime18 = require("react/jsx-runtime");
11393
- var Viewport = (0, import_react17.forwardRef)(
12101
+ var DisabledState = () => {
12102
+ const theme = nt();
12103
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
12104
+ Flex,
12105
+ {
12106
+ $flexDirection: "column",
12107
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
12108
+ $width: "100%",
12109
+ $height: "auto",
12110
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
12111
+ $backgroundColor: theme.card.background,
12112
+ $alignItems: "center",
12113
+ $justifyContent: "center",
12114
+ children: [
12115
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12116
+ Box,
12117
+ {
12118
+ $marginBottom: "8px",
12119
+ $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
12120
+ $fontFamily: theme.typography.heading1.fontFamily,
12121
+ $fontWeight: theme.typography.heading1.fontWeight,
12122
+ $color: theme.typography.heading1.color,
12123
+ children: "Coming soon"
12124
+ }
12125
+ ),
12126
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12127
+ Box,
12128
+ {
12129
+ $marginBottom: "8px",
12130
+ $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
12131
+ $fontFamily: theme.typography.text.fontFamily,
12132
+ $fontWeight: theme.typography.text.fontWeight,
12133
+ $color: theme.typography.text.color,
12134
+ children: "The plan manager will be back very soon."
12135
+ }
12136
+ )
12137
+ ]
12138
+ }
12139
+ ) });
12140
+ };
12141
+ var SuccessState = () => {
12142
+ const [isOpen, setIsOpen] = (0, import_react17.useState)(true);
12143
+ const theme = nt();
12144
+ const { hydrate, data, api, setLayout, isPending } = useEmbed();
12145
+ (0, import_react18.useEffect)(() => {
12146
+ if (api && data.component?.id) {
12147
+ hydrate();
12148
+ setTimeout(() => setIsOpen(false), 2e3);
12149
+ }
12150
+ }, [api, data.component?.id, hydrate]);
12151
+ (0, import_react18.useEffect)(() => {
12152
+ if (!isPending && !isOpen) {
12153
+ setLayout("portal");
12154
+ }
12155
+ }, [isPending, isOpen, setLayout]);
12156
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
12157
+ Flex,
12158
+ {
12159
+ $flexDirection: "column",
12160
+ $justifyContent: "center",
12161
+ $alignItems: "center",
12162
+ $gap: `${32 / TEXT_BASE_SIZE}rem`,
12163
+ $width: "min-content",
12164
+ $height: "min-content",
12165
+ $margin: "auto",
12166
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding * 1.5 / TEXT_BASE_SIZE}rem`,
12167
+ $whiteSpace: "nowrap",
12168
+ $backgroundColor: theme.card.background,
12169
+ $borderRadius: "0.5rem",
12170
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
12171
+ children: [
12172
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12173
+ IconRound,
12174
+ {
12175
+ name: "check",
12176
+ size: "3xl",
12177
+ colors: [theme.card.background, theme.primary]
12178
+ }
12179
+ ),
12180
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12181
+ Text,
12182
+ {
12183
+ as: "h1",
12184
+ $font: theme.typography.heading1.fontFamily,
12185
+ $size: theme.typography.heading1.fontSize,
12186
+ $weight: theme.typography.heading1.fontWeight,
12187
+ $color: theme.typography.heading1.color,
12188
+ children: "Subscription updated!"
12189
+ }
12190
+ ),
12191
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12192
+ Text,
12193
+ {
12194
+ as: "p",
12195
+ $font: theme.typography.text.fontFamily,
12196
+ $size: theme.typography.text.fontSize,
12197
+ $weight: theme.typography.text.fontWeight,
12198
+ $color: theme.typography.text.color,
12199
+ children: "Loading..."
12200
+ }
12201
+ )
12202
+ ]
12203
+ }
12204
+ );
12205
+ };
12206
+ var RenderLayout = ({ children }) => {
12207
+ const { layout } = useEmbed();
12208
+ switch (layout) {
12209
+ case "disabled":
12210
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DisabledState, {});
12211
+ case "success":
12212
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SuccessState, {});
12213
+ default:
12214
+ return children;
12215
+ }
12216
+ };
12217
+
12218
+ // src/components/layout/viewport/Viewport.tsx
12219
+ var import_jsx_runtime19 = require("react/jsx-runtime");
12220
+ var Viewport = (0, import_react19.forwardRef)(
11394
12221
  ({ children, ...props }, ref) => {
11395
- const { settings, layout } = useEmbed();
11396
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12222
+ const theme = nt();
12223
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
11397
12224
  StyledViewport,
11398
12225
  {
11399
12226
  ref,
11400
- $numberOfColumns: settings.theme.numberOfColumns,
12227
+ $numberOfColumns: theme.numberOfColumns,
11401
12228
  ...props,
11402
- children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
11403
- Flex,
11404
- {
11405
- $flexDirection: "column",
11406
- $padding: `${settings.theme.card.padding / 16}rem`,
11407
- $width: "100%",
11408
- $height: "auto",
11409
- $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
11410
- $backgroundColor: settings.theme.card.background,
11411
- $alignItems: "center",
11412
- $justifyContent: "center",
11413
- children: [
11414
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11415
- Box,
11416
- {
11417
- $marginBottom: "8px",
11418
- $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
11419
- $fontFamily: settings.theme.typography.heading1.fontFamily,
11420
- $fontWeight: settings.theme.typography.heading1.fontWeight,
11421
- $color: settings.theme.typography.heading1.color,
11422
- children: "Coming soon"
11423
- }
11424
- ),
11425
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11426
- Box,
11427
- {
11428
- $marginBottom: "8px",
11429
- $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
11430
- $fontFamily: settings.theme.typography.text.fontFamily,
11431
- $fontWeight: settings.theme.typography.text.fontWeight,
11432
- $color: settings.theme.typography.text.color,
11433
- children: "The plan manager will be back very soon."
11434
- }
11435
- )
11436
- ]
11437
- }
11438
- ) }) : children
12229
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderLayout, { children })
11439
12230
  }
11440
12231
  );
11441
12232
  }
11442
12233
  );
11443
12234
 
11444
12235
  // src/components/layout/column/Column.tsx
11445
- var import_react19 = require("react");
12236
+ var import_react21 = require("react");
11446
12237
 
11447
12238
  // src/components/layout/card/Card.tsx
11448
- var import_react18 = require("react");
12239
+ var import_react20 = require("react");
11449
12240
 
11450
12241
  // src/components/layout/card/styles.ts
11451
12242
  var StyledCard = dt.div(
@@ -11474,7 +12265,7 @@ var StyledCard = dt.div(
11474
12265
 
11475
12266
  ${() => {
11476
12267
  const { l: l2 } = hexToHSL(theme.card.background);
11477
- const borderColor = l2 > 50 ? darken(theme.card.background, 10) : lighten(theme.card.background, 20);
12268
+ const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
11478
12269
  const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
11479
12270
  const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
11480
12271
  if ($sectionLayout === "merged") {
@@ -11506,19 +12297,19 @@ var StyledCard = dt.div(
11506
12297
  );
11507
12298
 
11508
12299
  // src/components/layout/card/Card.tsx
11509
- var import_jsx_runtime19 = require("react/jsx-runtime");
11510
- var Card = (0, import_react18.forwardRef)(
12300
+ var import_jsx_runtime20 = require("react/jsx-runtime");
12301
+ var Card = (0, import_react20.forwardRef)(
11511
12302
  ({ children, className }, ref) => {
11512
- const { settings } = useEmbed();
11513
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
12303
+ const theme = nt();
12304
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
11514
12305
  StyledCard,
11515
12306
  {
11516
12307
  ref,
11517
12308
  className,
11518
- $sectionLayout: settings.theme?.sectionLayout,
11519
- $borderRadius: settings.theme?.card?.borderRadius,
11520
- $padding: settings.theme?.card?.padding,
11521
- $shadow: settings.theme?.card?.hasShadow,
12309
+ $sectionLayout: theme?.sectionLayout,
12310
+ $borderRadius: theme?.card?.borderRadius,
12311
+ $padding: theme?.card?.padding,
12312
+ $shadow: theme?.card?.hasShadow,
11522
12313
  children
11523
12314
  }
11524
12315
  );
@@ -11532,10 +12323,10 @@ var StyledColumn = dt.div`
11532
12323
  `;
11533
12324
 
11534
12325
  // src/components/layout/column/Column.tsx
11535
- var import_jsx_runtime20 = require("react/jsx-runtime");
11536
- var Column = (0, import_react19.forwardRef)(
12326
+ var import_jsx_runtime21 = require("react/jsx-runtime");
12327
+ var Column = (0, import_react21.forwardRef)(
11537
12328
  ({ children, ...props }, ref) => {
11538
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { children }) });
12329
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { children }) });
11539
12330
  }
11540
12331
  );
11541
12332
 
@@ -11568,7 +12359,7 @@ function createRenderer(options) {
11568
12359
  const { className, ...rest } = props;
11569
12360
  const resolvedProps = component === "div" ? rest : props;
11570
12361
  const resolvedChildren = children.map(renderNode);
11571
- return (0, import_react20.createElement)(
12362
+ return (0, import_react22.createElement)(
11572
12363
  component,
11573
12364
  {
11574
12365
  className,
@@ -11581,101 +12372,88 @@ function createRenderer(options) {
11581
12372
  };
11582
12373
  }
11583
12374
 
11584
- // src/components/ui/loader/styles.ts
11585
- var spin = mt`
11586
- 0% {
11587
- transform: rotate(0deg);
11588
- }
11589
- 100% {
11590
- transform: rotate(360deg);
11591
- }
11592
- `;
11593
- var Loader = dt.div(() => {
11594
- const { settings } = useEmbed();
11595
- return lt`
11596
- border: 4px solid rgba(0, 0, 0, 0.1);
11597
- border-top: 4px solid ${settings.theme.primary};
11598
- border-radius: 50%;
11599
- width: 40px;
11600
- height: 40px;
11601
- animation: ${spin} 1.5s linear infinite;
11602
- display: inline-block;
11603
- `;
11604
- });
11605
-
11606
12375
  // src/components/embed/ComponentTree.tsx
11607
- var import_jsx_runtime21 = require("react/jsx-runtime");
11608
- var ComponentTree = () => {
11609
- const { error, nodes, settings } = useEmbed();
11610
- const [children, setChildren] = (0, import_react21.useState)(
11611
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
11612
- Flex,
11613
- {
11614
- $width: "100%",
11615
- $height: "100%",
11616
- $alignItems: "center",
11617
- $justifyContent: "center",
11618
- $padding: `${settings.theme.card.padding / 16}rem`,
11619
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
11620
- }
11621
- )
12376
+ var import_jsx_runtime22 = require("react/jsx-runtime");
12377
+ var Loading = () => {
12378
+ const theme = nt();
12379
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
12380
+ Flex,
12381
+ {
12382
+ $width: "100%",
12383
+ $height: "100%",
12384
+ $alignItems: "center",
12385
+ $justifyContent: "center",
12386
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
12387
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, {})
12388
+ }
12389
+ );
12390
+ };
12391
+ var Error2 = ({ message }) => {
12392
+ const theme = nt();
12393
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
12394
+ Flex,
12395
+ {
12396
+ $flexDirection: "column",
12397
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
12398
+ $width: "100%",
12399
+ $height: "auto",
12400
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
12401
+ $backgroundColor: theme.card.background,
12402
+ $alignItems: "center",
12403
+ $justifyContent: "center",
12404
+ children: [
12405
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
12406
+ Box,
12407
+ {
12408
+ $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
12409
+ $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
12410
+ $fontFamily: theme.typography.heading1.fontFamily,
12411
+ $fontWeight: theme.typography.heading1.fontWeight,
12412
+ $color: theme.typography.heading1.color,
12413
+ children: "404 Error"
12414
+ }
12415
+ ),
12416
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
12417
+ Box,
12418
+ {
12419
+ $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
12420
+ $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
12421
+ $fontFamily: theme.typography.text.fontFamily,
12422
+ $fontWeight: theme.typography.text.fontWeight,
12423
+ $color: theme.typography.text.color,
12424
+ children: message
12425
+ }
12426
+ )
12427
+ ]
12428
+ }
11622
12429
  );
11623
- (0, import_react21.useEffect)(() => {
12430
+ };
12431
+ var ComponentTree = () => {
12432
+ const { error, nodes } = useEmbed();
12433
+ const [children, setChildren] = (0, import_react23.useState)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {}));
12434
+ (0, import_react23.useEffect)(() => {
11624
12435
  const renderer = createRenderer();
11625
12436
  setChildren(nodes.map(renderer));
11626
12437
  }, [nodes]);
11627
12438
  if (error) {
11628
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
11629
- Flex,
11630
- {
11631
- $flexDirection: "column",
11632
- $padding: `${settings.theme.card.padding / 16}rem`,
11633
- $width: "100%",
11634
- $height: "auto",
11635
- $borderRadius: `${settings.theme.card.borderRadius / 16}rem`,
11636
- $backgroundColor: settings.theme.card.background,
11637
- $alignItems: "center",
11638
- $justifyContent: "center",
11639
- children: [
11640
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
11641
- Box,
11642
- {
11643
- $marginBottom: "8px",
11644
- $fontSize: `${settings.theme.typography.heading1.fontSize / 16}rem`,
11645
- $fontFamily: settings.theme.typography.heading1.fontFamily,
11646
- $fontWeight: settings.theme.typography.heading1.fontWeight,
11647
- $color: settings.theme.typography.heading1.color,
11648
- children: "404 Error"
11649
- }
11650
- ),
11651
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
11652
- Box,
11653
- {
11654
- $marginBottom: "8px",
11655
- $fontSize: `${settings.theme.typography.text.fontSize / 16}rem`,
11656
- $fontFamily: settings.theme.typography.text.fontFamily,
11657
- $fontWeight: settings.theme.typography.text.fontWeight,
11658
- $color: settings.theme.typography.text.color,
11659
- children: error.message
11660
- }
11661
- )
11662
- ]
11663
- }
11664
- );
12439
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Error2, { message: error.message });
11665
12440
  }
11666
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
12441
+ if (import_react23.Children.count(children) === 0) {
12442
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {});
12443
+ }
12444
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
11667
12445
  };
11668
12446
 
11669
12447
  // src/components/embed/Embed.tsx
11670
- var import_jsx_runtime22 = require("react/jsx-runtime");
12448
+ var import_jsx_runtime23 = require("react/jsx-runtime");
11671
12449
  var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
11672
12450
  if (accessToken?.length === 0) {
11673
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Please provide an access token." });
12451
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: "Please provide an access token." });
11674
12452
  }
11675
12453
  if (!accessToken?.startsWith("token_")) {
11676
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
12454
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11677
12455
  }
11678
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentTree, {}) });
12456
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComponentTree, {}) });
11679
12457
  };
11680
12458
  /*! Bundled license information:
11681
12459