@schematichq/schematic-react 0.2.0-rc.6 → 0.2.0-rc.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/schematic-react.cjs.js +2112 -1603
  2. package/dist/schematic-react.d.ts +21 -4
  3. package/dist/schematic-react.esm.js +2102 -1587
  4. package/package.json +3 -1
package/dist/schematic-react.cjs.js CHANGED
@@ -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,
@@ -5064,7 +5416,7 @@ var { Deflate, deflate, deflateRaw, gzip } = deflate_1$1;
5064
5416
  var { Inflate, inflate, inflateRaw, ungzip } = inflate_1$1;
5065
5417
  var inflate_1 = inflate;
5066
5418
 
5067
- // node_modules/tslib/tslib.es6.mjs
5419
+ // node_modules/styled-components/node_modules/tslib/tslib.es6.mjs
5068
5420
  var __assign = function() {
5069
5421
  __assign = Object.assign || function __assign2(t) {
5070
5422
  for (var s2, i2 = 1, n = arguments.length; i2 < n; i2++) {
@@ -6901,6 +7253,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
6901
7253
  interval: json["interval"] == null ? void 0 : json["interval"],
6902
7254
  name: json["name"],
6903
7255
  price: json["price"],
7256
+ priceExternalId: json["price_external_id"] == null ? void 0 : json["price_external_id"],
6904
7257
  quantity: json["quantity"],
6905
7258
  subscriptionId: json["subscription_id"],
6906
7259
  updatedAt: new Date(json["updated_at"])
@@ -7332,6 +7685,7 @@ function CompanyPlanDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7332
7685
  ),
7333
7686
  icon: json["icon"],
7334
7687
  id: json["id"],
7688
+ isDefault: json["is_default"],
7335
7689
  monthlyPrice: json["monthly_price"] == null ? void 0 : BillingPriceResponseDataFromJSON(json["monthly_price"]),
7336
7690
  name: json["name"],
7337
7691
  planType: json["plan_type"],
@@ -7360,7 +7714,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
7360
7714
  customerExternalId: json["customer_external_id"],
7361
7715
  dueDate: json["due_date"] == null ? void 0 : new Date(json["due_date"]),
7362
7716
  environmentId: json["environment_id"],
7363
- externalId: json["external_id"],
7717
+ externalId: json["external_id"] == null ? void 0 : json["external_id"],
7364
7718
  id: json["id"],
7365
7719
  paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
7366
7720
  subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
@@ -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,
@@ -8071,7 +8425,7 @@ var EmbedProvider = ({
8071
8425
  const nodes = [];
8072
8426
  const settings = { ...defaultSettings };
8073
8427
  if (!id || !state.api) {
8074
- throw new Error("Invalid component id or api instance.");
8428
+ return new Error("Invalid component id or api instance.");
8075
8429
  }
8076
8430
  const response = await state.api.hydrateComponent({ componentId: id });
8077
8431
  const { data } = response;
@@ -8193,23 +8547,23 @@ var EmbedProvider = ({
8193
8547
  theme: "stripe",
8194
8548
  variables: {
8195
8549
  // Base
8196
- spacingUnit: ".25rem",
8197
- colorPrimary: "#0570de",
8550
+ fontFamily: '"Public Sans", system-ui, sans-serif',
8551
+ spacingUnit: "0.25rem",
8552
+ borderRadius: "0.5rem",
8553
+ colorText: "#30313D",
8198
8554
  colorBackground: "#FFFFFF",
8199
- colorText: "#30313d",
8200
- colorDanger: "#df1b41",
8201
- fontFamily: "Public Sans, system-ui, sans-serif",
8202
- borderRadius: ".5rem",
8555
+ colorPrimary: "#0570DE",
8556
+ colorDanger: "#DF1B41",
8203
8557
  // Layout
8204
8558
  gridRowSpacing: "1.5rem",
8205
8559
  gridColumnSpacing: "1.5rem"
8206
8560
  },
8207
8561
  rules: {
8208
8562
  ".Label": {
8209
- color: "#020202",
8563
+ fontSize: "1rem",
8210
8564
  fontWeight: "400",
8211
- fontSize: "16px",
8212
- marginBottom: "12px"
8565
+ marginBottom: "0.75rem",
8566
+ color: state.settings.theme.typography.text.color
8213
8567
  }
8214
8568
  }
8215
8569
  },
@@ -9254,8 +9608,8 @@ var useSchematicIsPending = (opts) => {
9254
9608
  };
9255
9609
 
9256
9610
  // src/components/elements/plan-manager/PlanManager.tsx
9257
- var import_react10 = require("react");
9258
- var import_react_dom = require("react-dom");
9611
+ var import_react11 = require("react");
9612
+ var import_react_dom2 = require("react-dom");
9259
9613
 
9260
9614
  // src/utils/color.ts
9261
9615
  function hexToHSL(color) {
@@ -9635,6 +9989,25 @@ var IconRound = ({
9635
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 }) });
9636
9990
  };
9637
9991
 
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
+
9638
10011
  // src/components/ui/modal/Modal.tsx
9639
10012
  var import_react6 = require("react");
9640
10013
  var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -9674,7 +10047,7 @@ var Modal = ({ children, size = "auto", onClose }) => {
9674
10047
  $transform: "translate(-50%, -50%)",
9675
10048
  $width: "100%",
9676
10049
  $height: "100%",
9677
- $backgroundColor: isLightBackground ? "hsl(0, 0%, 85%)" : "hsl(0, 0%, 15%)",
10050
+ $backgroundColor: isLightBackground ? "hsla(0, 0%, 85%, 0.8)" : "hsla(0, 0%, 15%, 0.8)",
9678
10051
  $overflow: "hidden",
9679
10052
  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
9680
10053
  Flex,
@@ -9725,7 +10098,7 @@ var ModalHeader = ({
9725
10098
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
9726
10099
  Flex,
9727
10100
  {
9728
- $justifyContent: "space-between",
10101
+ $justifyContent: children ? "space-between" : "end",
9729
10102
  $alignItems: "center",
9730
10103
  $flexShrink: "0",
9731
10104
  $gap: "1rem",
@@ -9822,12 +10195,12 @@ var ProgressBar = ({
9822
10195
  };
9823
10196
 
9824
10197
  // src/components/elements/plan-manager/CheckoutDialog.tsx
9825
- var import_react9 = require("react");
10198
+ var import_react10 = require("react");
10199
+ var import_pluralize = __toESM(require_pluralize());
9826
10200
 
9827
- // src/components/elements/plan-manager/PaymentForm.tsx
10201
+ // src/components/elements/payment-method/PaymentMethod.tsx
9828
10202
  var import_react8 = require("react");
9829
- var import_react_stripe_js2 = require("@stripe/react-stripe-js");
9830
- var import_react_stripe_js3 = require("@stripe/react-stripe-js");
10203
+ var import_react_dom = require("react-dom");
9831
10204
 
9832
10205
  // src/components/elements/plan-manager/styles.ts
9833
10206
  var StyledButton = dt(Button2)`
@@ -9929,1596 +10302,1668 @@ var StyledButton = dt(Button2)`
9929
10302
  }}
9930
10303
  `;
9931
10304
 
9932
- // src/components/elements/plan-manager/PaymentForm.tsx
10305
+ // src/components/elements/payment-method/PaymentMethod.tsx
9933
10306
  var import_jsx_runtime9 = require("react/jsx-runtime");
9934
- var PaymentForm = ({ plan, period, onConfirm }) => {
9935
- const stripe = (0, import_react_stripe_js3.useStripe)();
9936
- const elements = (0, import_react_stripe_js3.useElements)();
9937
- const { api, data } = useEmbed();
9938
- const [message, setMessage] = (0, import_react8.useState)(null);
9939
- const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
9940
- const [isConfirmed, setIsConfirmed] = (0, import_react8.useState)(false);
9941
- const handleSubmit = async (event) => {
9942
- event.preventDefault();
9943
- const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
9944
- if (!api || !stripe || !elements || !priceId) {
9945
- return;
9946
- }
9947
- setIsLoading(true);
9948
- setIsConfirmed(false);
9949
- setMessage(null);
9950
- try {
9951
- const { setupIntent, error } = await stripe.confirmSetup({
9952
- elements,
9953
- confirmParams: {
9954
- return_url: window.location.href
9955
- },
9956
- redirect: "if_required"
9957
- });
9958
- if (onConfirm && typeof setupIntent?.payment_method === "string") {
9959
- onConfirm(setupIntent.payment_method);
9960
- setIsConfirmed(true);
9961
- } else {
9962
- }
9963
- if (error?.type === "card_error" || error?.type === "validation_error") {
9964
- setMessage(error.message);
9965
- }
9966
- } catch (error) {
9967
- setMessage("A problem occurred while saving your payment method.");
9968
- } finally {
9969
- 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
9970
10315
  }
9971
10316
  };
9972
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
9973
- "form",
9974
- {
9975
- id: "payment-form",
9976
- onSubmit: handleSubmit,
9977
- style: {
9978
- display: "flex",
9979
- flexDirection: "column",
9980
- height: "100%",
9981
- overflowX: "hidden",
9982
- overflowY: "auto"
9983
- },
9984
- children: [
9985
- /* @__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" }) }),
9986
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9987
- Flex,
9988
- {
9989
- $flexDirection: "column",
9990
- $gap: "1.5rem",
9991
- $width: "100%",
9992
- $marginBottom: "1.5rem",
9993
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
9994
- import_react_stripe_js2.LinkAuthenticationElement,
9995
- {
9996
- id: "link-authentication-element"
9997
- }
9998
- )
9999
- }
10000
- ),
10001
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_stripe_js2.PaymentElement, { id: "payment-element" }) }),
10002
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10003
- StyledButton,
10004
- {
10005
- id: "submit",
10006
- disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
10007
- $size: "md",
10008
- $color: "primary",
10009
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
10010
- }
10011
- ),
10012
- message && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $margin: "1rem 0", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "payment-message", $size: 15, $weight: 500, $color: "#DB6669", children: message }) })
10013
- ]
10014
- }
10015
- );
10016
10317
  };
10017
-
10018
- // src/components/elements/plan-manager/CheckoutDialog.tsx
10019
- var import_jsx_runtime10 = require("react/jsx-runtime");
10020
- var CheckoutDialog = () => {
10021
- const [checkoutStage, setCheckoutStage] = (0, import_react9.useState)(
10022
- "plan"
10023
- );
10024
- const [planPeriod, setPlanPeriod] = (0, import_react9.useState)("month");
10025
- const [selectedPlan, setSelectedPlan] = (0, import_react9.useState)();
10026
- const [paymentMethodId, setPaymentMethodId] = (0, import_react9.useState)();
10027
- const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
10028
- const [isCheckoutComplete, setIsCheckoutComplete] = (0, import_react9.useState)(false);
10029
- const [error, setError] = (0, import_react9.useState)();
10318
+ var PaymentMethod = (0, import_react8.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10319
+ const props = resolveDesignProps(rest);
10030
10320
  const theme = nt();
10031
- const { api, data, hydrate, setLayout } = useEmbed();
10032
- 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
+ }
10033
10336
  return {
10034
- currentPlan: data.company?.plan,
10035
- availablePlans: data.activePlans
10337
+ paymentMethodType,
10338
+ cardLast4,
10339
+ monthsToExpiration
10036
10340
  };
10037
- }, [data.company, data.activePlans]);
10038
- const savingsPercentage = (0, import_react9.useMemo)(() => {
10039
- if (selectedPlan) {
10040
- const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
10041
- const yearly = selectedPlan?.yearlyPrice?.price || 0;
10042
- return Math.round((monthly - yearly) / monthly * 1e4) / 100;
10043
- }
10044
- return 0;
10045
- }, [selectedPlan]);
10046
- const isLightBackground = (0, import_react9.useMemo)(() => {
10341
+ }, [data.subscription?.paymentMethod]);
10342
+ const isLightBackground = (0, import_react8.useMemo)(() => {
10047
10343
  return hexToHSL(theme.card.background).l > 50;
10048
10344
  }, [theme.card.background]);
10049
- (0, import_react9.useEffect)(() => {
10050
- if (isCheckoutComplete && api && data.component?.id) {
10051
- hydrate();
10052
- }
10053
- }, [isCheckoutComplete, api, data.component?.id, hydrate]);
10054
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Modal, { size: isCheckoutComplete ? "auto" : "lg", children: [
10055
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ModalHeader, { bordered: !isCheckoutComplete, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $gap: "1rem", children: !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10056
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
10057
- checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10058
- Box,
10059
- {
10060
- $width: `${20 / TEXT_BASE_SIZE}rem`,
10061
- $height: `${20 / TEXT_BASE_SIZE}rem`,
10062
- $borderWidth: "2px",
10063
- $borderStyle: "solid",
10064
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
10065
- $borderRadius: "9999px"
10066
- }
10067
- ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10068
- IconRound,
10069
- {
10070
- name: "check",
10071
- colors: [
10072
- theme.card.background,
10073
- isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
10074
- ],
10075
- style: {
10076
- fontSize: `${16 / TEXT_BASE_SIZE}rem`,
10077
- width: `${20 / TEXT_BASE_SIZE}rem`,
10078
- height: `${20 / TEXT_BASE_SIZE}rem`
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"
10079
10364
  }
10080
- }
10081
- ),
10082
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10083
- Box,
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"
10373
+ }
10374
+ )
10375
+ ]
10376
+ }
10377
+ ),
10378
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10379
+ Flex,
10380
+ {
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" })
10388
+ }
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,
10084
10395
  {
10085
- tabIndex: 0,
10086
- ...checkoutStage !== "plan" && {
10087
- onClick: () => setCheckoutStage("plan"),
10088
- $opacity: "0.6375",
10089
- $cursor: "pointer"
10090
- },
10091
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10092
- Text,
10093
- {
10094
- $font: theme.typography.text.fontFamily,
10095
- $size: 19,
10096
- $weight: checkoutStage === "plan" ? 600 : 400,
10097
- $color: theme.typography.text.color,
10098
- children: "1. Select plan"
10099
- }
10100
- )
10101
- }
10102
- )
10103
- ] }),
10104
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10105
- Icon2,
10106
- {
10107
- name: "chevron-right",
10108
- style: {
10109
- fontSize: 16,
10110
- color: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.35)"
10111
- }
10112
- }
10113
- ),
10114
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
10115
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10116
- Box,
10117
- {
10118
- $width: `${20 / TEXT_BASE_SIZE}rem`,
10119
- $height: `${20 / TEXT_BASE_SIZE}rem`,
10120
- $borderWidth: "2px",
10121
- $borderStyle: "solid",
10122
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)",
10123
- $borderRadius: "9999px"
10124
- }
10125
- ),
10126
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10127
- Box,
10128
- {
10129
- tabIndex: 0,
10130
- ...checkoutStage !== "checkout" && {
10131
- $opacity: "0.6375"
10132
- },
10133
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10134
- Text,
10135
- {
10136
- $font: theme.typography.text.fontFamily,
10137
- $size: 19,
10138
- $weight: checkoutStage === "plan" ? 600 : 400,
10139
- $color: theme.typography.text.color,
10140
- children: "2. Checkout"
10141
- }
10142
- )
10143
- }
10144
- )
10145
- ] })
10146
- ] }) }) }),
10147
- isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10148
- Flex,
10149
- {
10150
- $flexDirection: "column",
10151
- $justifyContent: "center",
10152
- $alignItems: "center",
10153
- $flexGrow: "1",
10154
- $gap: `${32 / TEXT_BASE_SIZE}rem`,
10155
- $padding: `${32 / TEXT_BASE_SIZE}rem ${40 / TEXT_BASE_SIZE}rem`,
10156
- $whiteSpace: "nowrap",
10157
- children: [
10158
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10159
- IconRound,
10160
- {
10161
- name: "check",
10162
- size: "3xl",
10163
- colors: [
10164
- theme.card.background,
10165
- isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.125)"
10166
- ]
10167
- }
10168
- ),
10169
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10170
- Text,
10171
- {
10172
- as: "h1",
10173
- $font: theme.typography.heading1.fontFamily,
10174
- $size: theme.typography.heading1.fontSize,
10175
- $weight: theme.typography.heading1.fontWeight,
10176
- $color: theme.typography.heading1.color,
10177
- children: "Subscription updated!"
10178
- }
10179
- ),
10180
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledButton, { onClick: () => setLayout("portal"), children: "Close" })
10181
- ]
10182
- }
10183
- ),
10184
- !isCheckoutComplete && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $position: "relative", $height: "calc(100% - 5rem)", children: [
10185
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10186
- Flex,
10187
- {
10188
- $flexDirection: "column",
10189
- $flexGrow: "1",
10190
- $gap: "1rem",
10191
- $padding: "2rem 2.5rem 2rem 2.5rem",
10192
- $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
10193
- $flex: "1",
10194
- $overflow: "auto",
10195
- children: [
10196
- checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10197
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $marginBottom: "1rem", children: [
10198
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10199
- Text,
10200
- {
10201
- as: "h3",
10202
- id: "select-plan-dialog-label",
10203
- $font: theme.typography.heading3.fontFamily,
10204
- $size: theme.typography.heading3.fontSize,
10205
- $weight: theme.typography.heading3.fontWeight,
10206
- $color: theme.typography.heading3.color,
10207
- $marginBottom: "0.5rem",
10208
- children: "Select plan"
10209
- }
10210
- ),
10211
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10212
- Text,
10213
- {
10214
- as: "p",
10215
- id: "select-plan-dialog-description",
10216
- $font: theme.typography.text.fontFamily,
10217
- $size: theme.typography.text.fontSize,
10218
- $weight: theme.typography.text.fontWeight,
10219
- $color: theme.typography.text.color,
10220
- children: "Choose your base plan"
10221
- }
10222
- )
10223
- ] }),
10224
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $flexWrap: "wrap", $gap: "1rem", $flexGrow: "1", children: availablePlans?.map((plan) => {
10225
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10226
- Flex,
10227
- {
10228
- $flexDirection: "column",
10229
- $width: "100%",
10230
- $minWidth: "280px",
10231
- $maxWidth: `calc(${100 / 3}% - 1rem)`,
10232
- $backgroundColor: theme.card.background,
10233
- $outlineWidth: "2px",
10234
- $outlineStyle: "solid",
10235
- $outlineColor: plan.id === selectedPlan?.id ? theme.primary : "transparent",
10236
- $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
10237
- ...theme.card.hasShadow && {
10238
- $boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 20px rgba(16, 24, 40, 0.06)"
10239
- },
10240
- children: [
10241
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
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)(
10242
10423
  Flex,
10243
10424
  {
10244
- $flexDirection: "column",
10245
- $position: "relative",
10425
+ $alignItems: "center",
10426
+ $padding: ".5rem 1rem",
10427
+ $border: "1px solid #E2E5E9",
10428
+ $borderRadius: ".5rem",
10429
+ $backgroundColor: "#ffffff",
10246
10430
  $gap: "1rem",
10247
10431
  $width: "100%",
10248
- $height: "auto",
10249
- $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
10250
- $borderBottomWidth: "1px",
10251
- $borderStyle: "solid",
10252
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.175)" : "hsla(0, 0%, 100%, 0.175)",
10253
- children: [
10254
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 20, $weight: 600, children: plan.name }),
10255
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 14, children: plan.description }),
10256
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Text, { children: [
10257
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $display: "inline-block", $fontSize: "1.5rem", children: formatCurrency(
10258
- (planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
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
+ }
10259
10464
  ) }),
10260
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10261
- "/",
10262
- planPeriod
10263
- ] })
10465
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
10264
10466
  ] }),
10265
- (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10266
- Flex,
10267
- {
10268
- $position: "absolute",
10269
- $right: "1rem",
10270
- $top: "1rem",
10271
- $fontSize: "0.625rem",
10272
- $color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
10273
- $backgroundColor: theme.primary,
10274
- $borderRadius: "9999px",
10275
- $padding: "0.125rem 0.85rem",
10276
- children: "Current plan"
10277
- }
10278
- )
10279
- ]
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
+ ] })
10280
10469
  }
10281
10470
  ),
10282
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10283
- Flex,
10471
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10472
+ StyledButton,
10284
10473
  {
10285
- $flexDirection: "column",
10286
- $position: "relative",
10287
- $gap: "0.5rem",
10288
- $flex: "1",
10289
- $width: "100%",
10290
- $height: "auto",
10291
- $padding: "1.5rem",
10292
- children: plan.features.map((feature) => {
10293
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10294
- Flex,
10295
- {
10296
- $flexShrink: "0",
10297
- $gap: "1rem",
10298
- children: [
10299
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10300
- IconRound,
10301
- {
10302
- name: feature.icon,
10303
- size: "tn",
10304
- colors: [
10305
- theme.primary,
10306
- isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.0625)"
10307
- ]
10308
- }
10309
- ),
10310
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $size: 12, children: feature.name }) })
10311
- ]
10312
- },
10313
- feature.id
10314
- );
10315
- })
10474
+ $size: "sm",
10475
+ $color: "primary",
10476
+ $variant: "outline",
10477
+ style: {
10478
+ whiteSpace: "nowrap",
10479
+ paddingLeft: "1rem",
10480
+ paddingRight: "1rem"
10481
+ },
10482
+ children: "Edit"
10316
10483
  }
10317
- ),
10318
- /* @__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)(
10319
10511
  Flex,
10320
10512
  {
10321
- $flexDirection: "column",
10322
- $position: "relative",
10513
+ $alignItems: "center",
10514
+ $padding: ".5rem 1rem",
10515
+ $border: "1px solid #E2E5E9",
10516
+ $borderRadius: ".5rem",
10517
+ $backgroundColor: "#ffffff",
10323
10518
  $gap: "1rem",
10324
10519
  $width: "100%",
10325
- $height: "auto",
10326
- $padding: "1.5rem",
10327
- children: [
10328
- plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10329
- Flex,
10330
- {
10331
- $justifyContent: "center",
10332
- $alignItems: "center",
10333
- $gap: "0.25rem",
10334
- $fontSize: "0.9375rem",
10335
- $padding: "0.625rem 0",
10336
- children: [
10337
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10338
- Icon2,
10339
- {
10340
- name: "check-rounded",
10341
- style: {
10342
- fontSize: 20,
10343
- lineHeight: "1",
10344
- 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"
10345
10541
  }
10346
- }
10347
- ),
10348
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10349
- Text,
10350
- {
10351
- $lineHeight: "1.4",
10352
- $color: theme.typography.text.color,
10353
- children: "Selected"
10354
- }
10355
- )
10356
- ]
10357
- }
10358
- ),
10359
- !(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10360
- StyledButton,
10361
- {
10362
- disabled: plan.valid === false,
10363
- ...plan.valid === true && {
10364
- onClick: () => setSelectedPlan(plan)
10365
- },
10366
- $size: "sm",
10367
- $color: "primary",
10368
- $variant: "outline",
10369
- children: "Select"
10370
- }
10371
- )
10372
- ]
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
+ ] })
10373
10557
  }
10374
- )
10375
- ]
10376
- },
10377
- plan.id
10378
- );
10379
- }) })
10380
- ] }),
10381
- selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10382
- PaymentForm,
10383
- {
10384
- plan: selectedPlan,
10385
- period: planPeriod,
10386
- onConfirm: (value) => {
10387
- setPaymentMethodId(value);
10388
- }
10389
- }
10390
- )
10391
- ]
10392
- }
10393
- ),
10394
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10395
- Flex,
10396
- {
10397
- $flexDirection: "column",
10398
- $backgroundColor: theme.card.background,
10399
- $borderRadius: "0 0 0.5rem",
10400
- $width: "21.5rem",
10401
- $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
10402
- children: [
10403
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10404
- Flex,
10405
- {
10406
- $flexDirection: "column",
10407
- $position: "relative",
10408
- $gap: "1rem",
10409
- $width: "100%",
10410
- $height: "auto",
10411
- $padding: "1.5rem",
10412
- $borderBottomWidth: "1px",
10413
- $borderStyle: "solid",
10414
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
10415
- children: [
10416
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10417
- Text,
10418
- {
10419
- as: "h3",
10420
- $font: theme.typography.heading3.fontFamily,
10421
- $size: theme.typography.heading3.fontSize,
10422
- $weight: theme.typography.heading3.fontWeight,
10423
- $color: theme.typography.heading3.color,
10424
- children: "Subscription"
10425
- }
10426
- ) }),
10427
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10428
- Flex,
10429
- {
10430
- $borderWidth: "1px",
10431
- $borderStyle: "solid",
10432
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
10433
- $borderRadius: "2.5rem",
10434
- $cursor: "pointer",
10435
- children: [
10436
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10437
- Flex,
10558
+ ),
10559
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
10560
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10561
+ StyledButton,
10438
10562
  {
10439
- onClick: () => setPlanPeriod("month"),
10440
- $justifyContent: "center",
10441
- $alignItems: "center",
10442
- $padding: "0.25rem 0.5rem",
10443
- $flex: "1",
10444
- ...planPeriod === "month" && {
10445
- $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
10563
+ $size: "sm",
10564
+ $color: "primary",
10565
+ $variant: "outline",
10566
+ style: {
10567
+ whiteSpace: "nowrap",
10568
+ paddingLeft: "1rem",
10569
+ paddingRight: "1rem"
10446
10570
  },
10447
- $borderRadius: "2.5rem",
10448
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10449
- Text,
10450
- {
10451
- $font: theme.typography.text.fontFamily,
10452
- $size: 14,
10453
- $weight: planPeriod === "month" ? 600 : 400,
10454
- $color: theme.typography.text.color,
10455
- children: "Billed monthly"
10456
- }
10457
- )
10571
+ children: "Make Default"
10458
10572
  }
10459
10573
  ),
10460
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10461
- Flex,
10574
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
10575
+ StyledButton,
10462
10576
  {
10463
- onClick: () => setPlanPeriod("year"),
10464
- $justifyContent: "center",
10465
- $alignItems: "center",
10466
- $padding: "0.25rem 0.5rem",
10467
- $flex: "1",
10468
- ...planPeriod === "year" && {
10469
- $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.075)" : "hsla(0, 0%, 100%, 0.15)"
10577
+ $size: "sm",
10578
+ $color: "primary",
10579
+ $variant: "outline",
10580
+ style: {
10581
+ whiteSpace: "nowrap",
10582
+ paddingLeft: "1rem",
10583
+ paddingRight: "1rem"
10470
10584
  },
10471
- $borderRadius: "2.5rem",
10472
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10473
- Text,
10474
- {
10475
- $font: theme.typography.text.fontFamily,
10476
- $size: 14,
10477
- $weight: planPeriod === "year" ? 600 : 400,
10478
- $color: theme.typography.text.color,
10479
- children: "Billed yearly"
10480
- }
10481
- )
10585
+ children: "Edit"
10482
10586
  }
10483
10587
  )
10484
- ]
10485
- }
10486
- ),
10487
- savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10488
- Text,
10489
- {
10490
- $font: theme.typography.text.fontFamily,
10491
- $size: 11,
10492
- $weight: theme.typography.text.fontWeight,
10493
- $color: theme.primary,
10494
- children: planPeriod === "month" ? `Save up to ${savingsPercentage}% with yearly billing` : `You are saving ${savingsPercentage}% with yearly billing`
10495
- }
10496
- ) })
10497
- ]
10498
- }
10499
- ),
10500
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10501
- Flex,
10502
- {
10503
- $flexDirection: "column",
10504
- $position: "relative",
10505
- $gap: "1rem",
10506
- $width: "100%",
10507
- $height: "auto",
10508
- $padding: "1.5rem",
10509
- $flex: "1",
10510
- $borderBottomWidth: "1px",
10511
- $borderStyle: "solid",
10512
- $borderColor: isLightBackground ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)",
10513
- children: [
10514
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10515
- Text,
10516
- {
10517
- $font: theme.typography.text.fontFamily,
10518
- $size: 14,
10519
- $weight: theme.typography.text.fontWeight,
10520
- $color: theme.typography.text.color,
10521
- children: "Plan"
10522
- }
10523
- ) }),
10524
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: [
10525
- currentPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
10526
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10527
- Flex,
10528
- {
10529
- ...selectedPlan && {
10530
- $opacity: "0.625",
10531
- $textDecoration: "line-through"
10532
- },
10533
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10534
- Text,
10535
- {
10536
- $font: theme.typography.heading4.fontFamily,
10537
- $size: theme.typography.heading4.fontSize,
10538
- $weight: theme.typography.heading4.fontWeight,
10539
- $color: theme.typography.heading4.color,
10540
- children: currentPlan.name
10541
- }
10542
- )
10543
- }
10544
- ),
10545
- typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10546
- Text,
10547
- {
10548
- $font: theme.typography.text.fontFamily,
10549
- $size: theme.typography.text.fontSize,
10550
- $weight: theme.typography.text.fontWeight,
10551
- $color: theme.typography.text.color,
10552
- children: [
10553
- formatCurrency(currentPlan.planPrice),
10554
- "/",
10555
- currentPlan.planPeriod
10556
- ]
10557
- }
10558
- ) })
10559
- ] }),
10560
- selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
10561
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10562
- Box,
10563
- {
10564
- $width: "100%",
10565
- $textAlign: "left",
10566
- $opacity: "50%",
10567
- $marginBottom: "-0.25rem",
10568
- $marginTop: "-0.25rem",
10569
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10570
- Icon2,
10571
- {
10572
- name: "arrow-down",
10573
- style: {
10574
- display: "inline-block"
10575
- }
10576
- }
10577
- )
10578
- }
10579
- ),
10580
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: [
10581
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10582
- Text,
10583
- {
10584
- $font: theme.typography.heading4.fontFamily,
10585
- $size: theme.typography.heading4.fontSize,
10586
- $weight: theme.typography.heading4.fontWeight,
10587
- $color: theme.typography.heading4.color,
10588
- children: selectedPlan.name
10589
- }
10590
- ) }),
10591
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10592
- Text,
10593
- {
10594
- $font: theme.typography.text.fontFamily,
10595
- $size: theme.typography.text.fontSize,
10596
- $weight: theme.typography.text.fontWeight,
10597
- $color: theme.typography.text.color,
10598
- children: [
10599
- formatCurrency(
10600
- (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10601
- ),
10602
- "/",
10603
- planPeriod
10604
- ]
10605
- }
10606
- ) })
10607
- ] })
10608
- ] })
10609
- ] })
10610
- ]
10611
- }
10612
- ),
10613
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10614
- Flex,
10615
- {
10616
- $flexDirection: "column",
10617
- $position: "relative",
10618
- $gap: "1rem",
10619
- $width: "100%",
10620
- $height: "auto",
10621
- $padding: "1.5rem",
10622
- children: [
10623
- selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Flex, { $justifyContent: "space-between", children: [
10624
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10625
- Text,
10626
- {
10627
- $font: theme.typography.text.fontFamily,
10628
- $size: theme.typography.text.fontSize,
10629
- $weight: theme.typography.text.fontWeight,
10630
- $color: theme.typography.text.color,
10631
- children: [
10632
- planPeriod === "month" ? "Monthly" : "Yearly",
10633
- " total:",
10634
- " "
10635
- ]
10636
- }
10637
- ) }),
10638
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10639
- Text,
10640
- {
10641
- $font: theme.typography.text.fontFamily,
10642
- $size: theme.typography.text.fontSize,
10643
- $weight: theme.typography.text.fontWeight,
10644
- $color: theme.typography.text.color,
10645
- children: [
10646
- formatCurrency(
10647
- (planPeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
10648
- ),
10649
- "/",
10650
- planPeriod
10651
- ]
10652
- }
10653
- ) })
10654
- ] }),
10655
- checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10656
- StyledButton,
10657
- {
10658
- disabled: !selectedPlan,
10659
- ...selectedPlan && {
10660
- onClick: () => setCheckoutStage("checkout")
10661
- },
10662
- $size: "sm",
10663
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
10664
- Flex,
10665
- {
10666
- $gap: "0.5rem",
10667
- $justifyContent: "center",
10668
- $alignItems: "center",
10669
- $padding: "0 1rem",
10670
- children: [
10671
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text, { $align: "left", children: "Next: Checkout" }),
10672
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { name: "arrow-right" })
10673
- ]
10674
- }
10675
- )
10676
- }
10677
- ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10678
- StyledButton,
10679
- {
10680
- disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId || isLoading,
10681
- onClick: async () => {
10682
- const priceId = (planPeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
10683
- if (!api || !selectedPlan || !priceId || !paymentMethodId) {
10684
- return;
10685
- }
10686
- try {
10687
- setIsLoading(true);
10688
- setIsCheckoutComplete(false);
10689
- await api.checkout({
10690
- changeSubscriptionRequestBody: {
10691
- newPlanId: selectedPlan.id,
10692
- newPriceId: priceId,
10693
- paymentMethodId
10694
- }
10695
- });
10696
- setIsCheckoutComplete(true);
10697
- } catch {
10698
- setError(
10699
- "Error processing payment. Please try a different payment method."
10700
- );
10701
- } finally {
10702
- setIsLoading(false);
10703
- }
10704
- },
10705
- $size: "md",
10706
- children: "Pay now"
10707
- }
10708
- ),
10709
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10710
- Text,
10711
- {
10712
- $font: theme.typography.text.fontFamily,
10713
- $size: theme.typography.text.fontSize,
10714
- $weight: theme.typography.text.fontWeight,
10715
- $color: theme.typography.text.color,
10716
- children: "Discounts & credits applied at checkout"
10717
- }
10718
- ) }),
10719
- error && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
10720
- Text,
10721
- {
10722
- $font: theme.typography.text.fontFamily,
10723
- $size: theme.typography.text.fontSize,
10724
- $weight: 500,
10725
- $color: "#DB6669",
10726
- children: error
10727
- }
10728
- ) })
10729
- ]
10588
+ ] })
10589
+ ] })
10590
+ ] })
10591
+ }
10592
+ )
10593
+ ]
10594
+ }
10595
+ )
10596
+ ] }),
10597
+ portal || document.body
10598
+ )
10599
+ ] });
10600
+ });
10601
+
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;
10619
+ }
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 {
10635
+ }
10636
+ if (error?.type === "card_error" || error?.type === "validation_error") {
10637
+ setMessage(error.message);
10638
+ }
10639
+ } catch (error) {
10640
+ setMessage("A problem occurred while saving your payment method.");
10641
+ } finally {
10642
+ setIsLoading(false);
10643
+ }
10644
+ };
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,
10667
+ {
10668
+ id: "link-authentication-element"
10730
10669
  }
10731
10670
  )
10732
- ]
10733
- }
10734
- )
10735
- ] })
10736
- ] });
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
+ ]
10686
+ }
10687
+ );
10737
10688
  };
10738
10689
 
10739
- // src/components/elements/plan-manager/PlanManager.tsx
10690
+ // src/components/elements/plan-manager/CheckoutDialog.tsx
10740
10691
  var import_jsx_runtime11 = require("react/jsx-runtime");
10741
- var resolveDesignProps = (props) => {
10742
- return {
10743
- header: {
10744
- isVisible: props.header?.isVisible ?? true,
10745
- title: {
10746
- fontStyle: props.header?.title?.fontStyle ?? "heading1"
10747
- },
10748
- description: {
10749
- isVisible: props.header?.description?.isVisible ?? true,
10750
- fontStyle: props.header?.description?.fontStyle ?? "text"
10751
- },
10752
- price: {
10753
- isVisible: props.header?.price?.isVisible ?? true,
10754
- fontStyle: props.header?.price?.fontStyle ?? "text"
10692
+ var FeatureName = ({
10693
+ entitlement
10694
+ }) => {
10695
+ const theme = nt();
10696
+ if (!entitlement.feature?.name) {
10697
+ return null;
10698
+ }
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,
10710
+ {
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
+ ]
10755
10723
  }
10756
- },
10757
- addOns: {
10758
- isVisible: props.addOns?.isVisible ?? true,
10759
- fontStyle: props.addOns?.fontStyle ?? "heading4",
10760
- showLabel: props.addOns?.showLabel ?? true
10761
- },
10762
- callToAction: {
10763
- isVisible: props.callToAction?.isVisible ?? true,
10764
- buttonSize: props.callToAction?.buttonSize ?? "lg",
10765
- buttonStyle: props.callToAction?.buttonStyle ?? "primary"
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
10766
10734
  }
10767
- };
10735
+ ) });
10768
10736
  };
10769
- var PlanManager = (0, import_react10.forwardRef)(({ children, className, portal, ...rest }, ref) => {
10770
- const props = resolveDesignProps(rest);
10737
+ var CheckoutDialog = () => {
10771
10738
  const theme = nt();
10772
- const { data, layout, stripe, setLayout } = useEmbed();
10773
- const { currentPlan, canChangePlan } = (0, import_react10.useMemo)(() => {
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");
10766
+ }
10774
10767
  return {
10768
+ paymentMethod: data.subscription?.paymentMethod,
10775
10769
  currentPlan: data.company?.plan,
10776
- canChangePlan: stripe !== null
10770
+ availablePlans: data.activePlans.filter(
10771
+ (plan) => plan.current || plan.yearlyPrice && planPeriod === "year" || plan.monthlyPrice && planPeriod === "month"
10772
+ ),
10773
+ planPeriodOptions: planPeriodOptions2
10777
10774
  };
10778
- }, [data.company, stripe]);
10779
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
10780
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10781
- Flex,
10782
- {
10783
- $flexDirection: "column",
10784
- $gap: "0.75rem",
10785
- ...canChangePlan && { $margin: "0 0 0.5rem" },
10786
- children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10787
- Flex,
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,
10788
10798
  {
10789
- $justifyContent: "space-between",
10790
- $alignItems: "center",
10791
- $width: "100%",
10792
- ...canChangePlan && { $margin: "0 0 1.5rem" },
10793
- children: [
10794
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
10795
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { $margin: "0 0 0.75rem", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
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`
10818
+ }
10819
+ }
10820
+ ),
10821
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10822
+ Box,
10823
+ {
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)(
10796
10901
  Text,
10797
10902
  {
10798
- $font: theme.typography[props.header.title.fontStyle].fontFamily,
10799
- $size: theme.typography[props.header.title.fontStyle].fontSize,
10800
- $weight: theme.typography[props.header.title.fontStyle].fontWeight,
10801
- $color: theme.typography[props.header.title.fontStyle].color,
10802
- $lineHeight: 1,
10803
- children: currentPlan.name
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"
10804
10911
  }
10805
- ) }),
10806
- props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10912
+ ),
10913
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10807
10914
  Text,
10808
10915
  {
10809
- $font: theme.typography[props.header.description.fontStyle].fontFamily,
10810
- $size: theme.typography[props.header.description.fontStyle].fontSize,
10811
- $weight: theme.typography[props.header.description.fontStyle].fontWeight,
10812
- $color: theme.typography[props.header.description.fontStyle].color,
10813
- children: currentPlan.description
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"
10814
10923
  }
10815
10924
  )
10816
10925
  ] }),
10817
- props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
10818
- Text,
10819
- {
10820
- $font: theme.typography[props.header.price.fontStyle].fontFamily,
10821
- $size: theme.typography[props.header.price.fontStyle].fontSize,
10822
- $weight: theme.typography[props.header.price.fontStyle].fontWeight,
10823
- $color: theme.typography[props.header.price.fontStyle].color,
10824
- children: [
10825
- formatCurrency(currentPlan.planPrice),
10826
- "/",
10827
- currentPlan.planPeriod
10828
- ]
10829
- }
10830
- )
10831
- ]
10832
- }
10833
- )
10834
- }
10835
- ),
10836
- canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10837
- StyledButton,
10838
- {
10839
- onClick: () => {
10840
- setLayout("checkout");
10841
- },
10842
- $size: props.callToAction.buttonSize,
10843
- $color: props.callToAction.buttonStyle,
10844
- children: "Change Plan"
10845
- }
10846
- ),
10847
- canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckoutDialog, {}), portal || document.body)
10848
- ] });
10849
- });
10850
-
10851
- // src/components/elements/included-features/IncludedFeatures.tsx
10852
- var import_react11 = require("react");
10853
- var import_jsx_runtime12 = require("react/jsx-runtime");
10854
- function resolveDesignProps2(props) {
10855
- return {
10856
- header: {
10857
- isVisible: props.header?.isVisible ?? true,
10858
- fontStyle: props.header?.fontStyle ?? "heading4",
10859
- text: props.header?.text ?? "Included features"
10860
- },
10861
- icons: {
10862
- isVisible: props.icons?.isVisible ?? true,
10863
- fontStyle: props.icons?.fontStyle ?? "heading5",
10864
- style: props.icons?.style ?? "light"
10865
- },
10866
- entitlement: {
10867
- isVisible: props.entitlement?.isVisible ?? true,
10868
- fontStyle: props.entitlement?.fontStyle ?? "text"
10869
- },
10870
- usage: {
10871
- isVisible: props.usage?.isVisible ?? true,
10872
- fontStyle: props.usage?.fontStyle ?? "heading6"
10873
- }
10874
- };
10875
- }
10876
- var IncludedFeatures = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
10877
- const props = resolveDesignProps2(rest);
10878
- const theme = nt();
10879
- const { data } = useEmbed();
10880
- const features = (0, import_react11.useMemo)(() => {
10881
- return (data.featureUsage?.features || []).map(
10882
- ({
10883
- access,
10884
- allocation,
10885
- allocationType,
10886
- feature,
10887
- period,
10888
- usage = 0,
10889
- ...props2
10890
- }) => {
10891
- return {
10892
- access,
10893
- allocation,
10894
- allocationType,
10895
- feature,
10896
- period,
10897
- /**
10898
- * @TODO: resolve feature price
10899
- */
10900
- price: void 0,
10901
- usage,
10902
- ...props2
10903
- };
10904
- }
10905
- );
10906
- }, [data.featureUsage]);
10907
- const isLightBackground = (0, import_react11.useMemo)(() => {
10908
- return hexToHSL(theme.card.background).l > 50;
10909
- }, [theme.card.background]);
10910
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: [
10911
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10912
- Text,
10913
- {
10914
- $font: theme.typography[props.header.fontStyle].fontFamily,
10915
- $size: theme.typography[props.header.fontStyle].fontSize,
10916
- $weight: theme.typography[props.header.fontStyle].fontWeight,
10917
- $color: theme.typography[props.header.fontStyle].color,
10918
- children: props.header.text
10919
- }
10920
- ) }),
10921
- features.reduce(
10922
- (acc, { allocation, allocationType, feature, usage }, index) => {
10923
- if (!allocationType) {
10924
- return acc;
10925
- }
10926
- return [
10927
- ...acc,
10928
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
10929
- Flex,
10930
- {
10931
- $flexWrap: "wrap",
10932
- $justifyContent: "space-between",
10933
- $alignItems: "center",
10934
- $gap: "1rem",
10935
- children: [
10936
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
10937
- props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
10938
- IconRound,
10939
- {
10940
- name: feature.icon,
10941
- size: "sm",
10942
- colors: [
10943
- theme.primary,
10944
- isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
10945
- ]
10946
- }
10947
- ),
10948
- feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
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)(
10944
+ Flex,
10945
+ {
10946
+ $flexDirection: "column",
10947
+ $position: "relative",
10948
+ $gap: "1rem",
10949
+ $width: "100%",
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
10961
+ ) }),
10962
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
10963
+ "/",
10964
+ planPeriod
10965
+ ] })
10966
+ ] }),
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
+ ]
10982
+ }
10983
+ ),
10984
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
10985
+ Flex,
10986
+ {
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
+ })
11020
+ }
11021
+ ),
11022
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
11023
+ Flex,
11024
+ {
11025
+ $flexDirection: "column",
11026
+ $position: "relative",
11027
+ $gap: "1rem",
11028
+ $width: "100%",
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
11049
+ }
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
+ ]
11077
+ }
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)(
10949
11103
  Text,
10950
11104
  {
10951
- $font: theme.typography[props.icons.fontStyle].fontFamily,
10952
- $size: theme.typography[props.icons.fontStyle].fontSize,
10953
- $weight: theme.typography[props.icons.fontStyle].fontWeight,
10954
- $color: theme.typography[props.icons.fontStyle].color,
10955
- children: feature.name
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"
10956
11110
  }
10957
- ) })
10958
- ] }),
10959
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Box, { $textAlign: "right", children: [
10960
- props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
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)(
10961
11123
  Text,
10962
11124
  {
10963
- as: Box,
10964
- $font: theme.typography[props.entitlement.fontStyle].fontFamily,
10965
- $size: theme.typography[props.entitlement.fontStyle].fontSize,
10966
- $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
10967
- $lineHeight: 1.5,
10968
- $color: theme.typography[props.entitlement.fontStyle].color,
10969
- children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
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"
10970
11130
  }
10971
- ),
10972
- props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
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)(
10973
11161
  Text,
10974
11162
  {
10975
- as: Box,
10976
- $font: theme.typography[props.usage.fontStyle].fontFamily,
10977
- $size: theme.typography[props.usage.fontStyle].fontSize,
10978
- $weight: theme.typography[props.usage.fontStyle].fontWeight,
10979
- $lineHeight: 1.5,
10980
- $color: theme.typography[props.usage.fontStyle].color,
10981
- children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
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"
10982
11169
  }
10983
- )
10984
- ] })
10985
- ]
10986
- },
10987
- index
10988
- )
10989
- ];
10990
- },
10991
- []
10992
- )
10993
- ] });
10994
- });
10995
-
10996
- // src/components/elements/metered-features/MeteredFeatures.tsx
10997
- var import_react12 = require("react");
10998
- var import_jsx_runtime13 = require("react/jsx-runtime");
10999
- function resolveDesignProps3(props) {
11000
- return {
11001
- isVisible: props.isVisible ?? true,
11002
- header: {
11003
- fontStyle: props.header?.fontStyle ?? "heading2"
11004
- },
11005
- description: {
11006
- isVisible: props.description?.isVisible ?? true,
11007
- fontStyle: props.description?.fontStyle ?? "text"
11008
- },
11009
- icon: {
11010
- isVisible: props.icon?.isVisible ?? true
11011
- },
11012
- allocation: {
11013
- isVisible: props.allocation?.isVisible ?? true,
11014
- fontStyle: props.allocation?.fontStyle ?? "heading4"
11015
- },
11016
- usage: {
11017
- isVisible: props.usage?.isVisible ?? true,
11018
- fontStyle: props.usage?.fontStyle ?? "heading5"
11019
- },
11020
- callToAction: {
11021
- isVisible: props.callToAction?.isVisible ?? true,
11022
- buttonSize: props.callToAction?.buttonSize ?? "md",
11023
- buttonStyle: props.callToAction?.buttonStyle ?? "primary"
11024
- }
11025
- };
11026
- }
11027
- var MeteredFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
11028
- const props = resolveDesignProps3(rest);
11029
- const theme = nt();
11030
- const { data } = useEmbed();
11031
- const features = (0, import_react12.useMemo)(() => {
11032
- return (data.featureUsage?.features || []).map(
11033
- ({
11034
- access,
11035
- allocation,
11036
- allocationType,
11037
- feature,
11038
- period,
11039
- usage,
11040
- ...props2
11041
- }) => {
11042
- return {
11043
- access,
11044
- allocation,
11045
- allocationType,
11046
- feature,
11047
- period,
11048
- /**
11049
- * @TODO: resolve feature price
11050
- */
11051
- price: void 0,
11052
- usage,
11053
- ...props2
11054
- };
11055
- }
11056
- );
11057
- }, [data.featureUsage]);
11058
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
11059
- (acc, { allocation, allocationType, feature, usage }, index) => {
11060
- if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
11061
- return acc;
11062
- }
11063
- return [
11064
- ...acc,
11065
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { $gap: "1.5rem", children: [
11066
- 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" }) }),
11067
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
11068
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Flex, { children: [
11069
- feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $flexGrow: "1", children: [
11070
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11071
- Text,
11072
- {
11073
- as: Box,
11074
- $font: theme.typography[props.header.fontStyle].fontFamily,
11075
- $size: theme.typography[props.header.fontStyle].fontSize,
11076
- $weight: theme.typography[props.header.fontStyle].fontWeight,
11077
- $color: theme.typography[props.header.fontStyle].color,
11078
- children: feature.name
11079
- }
11080
- ),
11081
- props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11082
- Text,
11083
- {
11084
- as: Box,
11085
- $font: theme.typography[props.description.fontStyle].fontFamily,
11086
- $size: theme.typography[props.description.fontStyle].fontSize,
11087
- $weight: theme.typography[props.description.fontStyle].fontWeight,
11088
- $color: theme.typography[props.description.fontStyle].color,
11089
- children: feature.description
11090
- }
11091
- )
11092
- ] }),
11093
- allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { $textAlign: "right", children: [
11094
- props.allocation.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11095
- Text,
11096
- {
11097
- as: Box,
11098
- $font: theme.typography[props.allocation.fontStyle].fontFamily,
11099
- $size: theme.typography[props.allocation.fontStyle].fontSize,
11100
- $weight: theme.typography[props.allocation.fontStyle].fontWeight,
11101
- $color: theme.typography[props.allocation.fontStyle].color,
11102
- children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
11103
- }
11104
- ),
11105
- props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11106
- Text,
11107
- {
11108
- as: Box,
11109
- $font: theme.typography[props.usage.fontStyle].fontFamily,
11110
- $size: theme.typography[props.usage.fontStyle].fontSize,
11111
- $weight: theme.typography[props.usage.fontStyle].fontWeight,
11112
- $color: theme.typography[props.usage.fontStyle].color,
11113
- children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
11114
- }
11115
- )
11116
- ] })
11117
- ] }),
11118
- typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
11119
- ProgressBar,
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,
11182
+ {
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)"
11190
+ },
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
+ )
11202
+ }
11203
+ ),
11204
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
11205
+ Flex,
11206
+ {
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)"
11214
+ },
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
+ )
11226
+ }
11227
+ )
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,
11120
11246
  {
11121
- progress: usage / allocation * 100,
11122
- value: usage,
11123
- total: allocation,
11124
- color: "blue"
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
+ ]
11125
11355
  }
11126
- ) })
11127
- ] })
11128
- ] }, index)
11129
- ];
11130
- },
11131
- []
11132
- ) });
11133
- });
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
+ };
11134
11480
 
11135
- // src/components/elements/upcoming-bill/UpcomingBill.tsx
11136
- var import_react13 = require("react");
11137
- var import_jsx_runtime14 = require("react/jsx-runtime");
11138
- function resolveDesignProps4(props) {
11481
+ // src/components/elements/plan-manager/PlanManager.tsx
11482
+ var import_jsx_runtime12 = require("react/jsx-runtime");
11483
+ var resolveDesignProps2 = (props) => {
11139
11484
  return {
11140
11485
  header: {
11141
11486
  isVisible: props.header?.isVisible ?? true,
11142
- fontStyle: props.header?.fontStyle ?? "heading4",
11143
- prefix: props.header?.prefix ?? "Next bill due"
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
+ }
11144
11498
  },
11145
- price: {
11146
- isVisible: props.price?.isVisible ?? true,
11147
- fontStyle: props.price?.fontStyle ?? "heading1"
11499
+ addOns: {
11500
+ isVisible: props.addOns?.isVisible ?? true,
11501
+ fontStyle: props.addOns?.fontStyle ?? "heading4",
11502
+ showLabel: props.addOns?.showLabel ?? true
11148
11503
  },
11149
- contractEndDate: {
11150
- isVisible: props.contractEndDate?.isVisible ?? true,
11151
- fontStyle: props.contractEndDate?.fontStyle ?? "heading6",
11152
- prefix: props.contractEndDate?.prefix ?? "Contract ends"
11153
- }
11154
- };
11155
- }
11156
- var UpcomingBill = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
11157
- const props = resolveDesignProps4(rest);
11158
- const theme = nt();
11159
- const { data, stripe } = useEmbed();
11160
- const { upcomingInvoice } = (0, import_react13.useMemo)(() => {
11161
- return {
11162
- upcomingInvoice: {
11163
- ...data.upcomingInvoice?.amountDue && {
11164
- amountDue: data.upcomingInvoice.amountDue
11165
- },
11166
- ...data.subscription?.interval && {
11167
- interval: data.subscription.interval
11168
- },
11169
- ...data.upcomingInvoice?.dueDate && {
11170
- dueDate: toPrettyDate(new Date(data.upcomingInvoice.dueDate))
11171
- }
11172
- }
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
11173
11519
  };
11174
- }, [data.subscription, data.upcomingInvoice]);
11175
- if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
11176
- return null;
11177
- }
11178
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
11179
- props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11520
+ }, [data.company, stripe]);
11521
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className, children: [
11522
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
11180
11523
  Flex,
11181
11524
  {
11182
- $justifyContent: "space-between",
11183
- $alignItems: "center",
11184
- $margin: "0 0 0.75rem",
11185
- children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
11186
- Text,
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,
11187
11530
  {
11188
- $font: theme.typography[props.header.fontStyle].fontFamily,
11189
- $size: theme.typography[props.header.fontStyle].fontSize,
11190
- $weight: theme.typography[props.header.fontStyle].fontWeight,
11191
- $color: theme.typography[props.header.fontStyle].color,
11531
+ $justifyContent: "space-between",
11532
+ $alignItems: "center",
11533
+ $width: "100%",
11534
+ ...canChangePlan && { $margin: "0 0 1.5rem" },
11192
11535
  children: [
11193
- props.header.prefix,
11194
- " ",
11195
- upcomingInvoice.dueDate
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
+ )
11196
11573
  ]
11197
11574
  }
11198
11575
  )
11199
11576
  }
11200
11577
  ),
11201
- upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
11202
- props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11203
- Text,
11204
- {
11205
- $font: theme.typography[props.price.fontStyle].fontFamily,
11206
- $size: theme.typography[props.price.fontStyle].fontSize,
11207
- $weight: theme.typography[props.price.fontStyle].fontWeight,
11208
- $color: theme.typography[props.price.fontStyle].color,
11209
- $lineHeight: 1,
11210
- children: formatCurrency(upcomingInvoice.amountDue)
11211
- }
11212
- ) }),
11213
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
11214
- Text,
11215
- {
11216
- $font: theme.typography[props.contractEndDate.fontStyle].fontFamily,
11217
- $size: theme.typography[props.contractEndDate.fontStyle].fontSize,
11218
- $weight: theme.typography[props.contractEndDate.fontStyle].fontWeight,
11219
- $color: theme.typography[props.contractEndDate.fontStyle].color,
11220
- children: "Estimated monthly bill."
11221
- }
11222
- ) })
11223
- ] })
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)
11224
11590
  ] });
11225
11591
  });
11226
11592
 
11227
- // src/components/elements/payment-method/PaymentMethod.tsx
11228
- var import_react14 = require("react");
11229
- var import_react_dom2 = require("react-dom");
11230
- var import_jsx_runtime15 = require("react/jsx-runtime");
11231
- var resolveDesignProps5 = (props) => {
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) {
11232
11598
  return {
11233
11599
  header: {
11234
11600
  isVisible: props.header?.isVisible ?? true,
11235
- fontStyle: props.header?.fontStyle ?? "heading4"
11601
+ fontStyle: props.header?.fontStyle ?? "heading4",
11602
+ text: props.header?.text ?? "Included features"
11236
11603
  },
11237
- functions: {
11238
- allowEdit: props.functions?.allowEdit ?? true
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"
11239
11616
  }
11240
11617
  };
11241
- };
11242
- var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
11243
- const props = resolveDesignProps5(rest);
11618
+ }
11619
+ var IncludedFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
11620
+ const props = resolveDesignProps3(rest);
11244
11621
  const theme = nt();
11245
- const { data, stripe, layout } = useEmbed();
11246
- const paymentMethod = (0, import_react14.useMemo)(() => {
11247
- const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
11248
- let monthsToExpiration;
11249
- if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
11250
- const timeToExpiration = Math.round(
11251
- +new Date(cardExpYear, cardExpMonth - 1) - +/* @__PURE__ */ new Date()
11252
- );
11253
- monthsToExpiration = Math.round(
11254
- timeToExpiration / (1e3 * 60 * 60 * 24 * 30)
11255
- );
11256
- }
11257
- return {
11258
- cardLast4,
11259
- monthsToExpiration
11260
- };
11261
- }, [data.subscription?.paymentMethod]);
11262
- const isLightBackground = (0, import_react14.useMemo)(() => {
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)(() => {
11263
11651
  return hexToHSL(theme.card.background).l > 50;
11264
11652
  }, [theme.card.background]);
11265
- if (!stripe || !paymentMethod.cardLast4) {
11266
- return null;
11267
- }
11268
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
11269
- props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
11270
- Flex,
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,
11271
11656
  {
11272
- $justifyContent: "space-between",
11273
- $alignItems: "center",
11274
- $margin: "0 0 1rem",
11275
- children: [
11276
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11277
- Text,
11278
- {
11279
- $font: theme.typography[props.header.fontStyle].fontFamily,
11280
- $size: theme.typography[props.header.fontStyle].fontSize,
11281
- $weight: theme.typography[props.header.fontStyle].fontWeight,
11282
- $color: theme.typography[props.header.fontStyle].color,
11283
- children: "Payment Method"
11284
- }
11285
- ),
11286
- typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11287
- Text,
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,
11288
11673
  {
11289
- $font: theme.typography.text.fontFamily,
11290
- $size: 14,
11291
- $color: "#DB6769",
11292
- children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
11293
- }
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
11294
11731
  )
11295
- ]
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
+ };
11296
11798
  }
11297
- ),
11298
- paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11299
- Flex,
11300
- {
11301
- $justifyContent: "space-between",
11302
- $alignItems: "center",
11303
- $margin: "0 0 1rem",
11304
- $backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
11305
- $padding: "0.375rem 1rem",
11306
- $borderRadius: "9999px",
11307
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: [
11308
- "\u{1F4B3} Card ending in ",
11309
- paymentMethod.cardLast4
11310
- ] })
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;
11311
11805
  }
11312
- ),
11313
- layout === "payment" && (0, import_react_dom2.createPortal)(
11314
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Modal, { size: "md", children: [
11315
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ModalHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $fontWeight: "600", children: "Edit payment method" }) }),
11316
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
11317
- Flex,
11318
- {
11319
- $flexDirection: "column",
11320
- $padding: "2.5rem",
11321
- $height: "100%",
11322
- $gap: "1.5rem",
11323
- children: [
11324
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11325
- Flex,
11326
- {
11327
- $flexDirection: "column",
11328
- $gap: "1rem",
11329
- $backgroundColor: "#FBFBFB",
11330
- $borderRadius: "0 0 0.5rem 0.5rem",
11331
- $flex: "1",
11332
- $height: "100%",
11333
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11334
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11335
- Box,
11336
- {
11337
- $fontSize: "18px",
11338
- $marginBottom: "1.5rem",
11339
- $display: "inline-block",
11340
- $width: "100%",
11341
- children: "Default"
11342
- }
11343
- ),
11344
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11345
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11346
- Flex,
11347
- {
11348
- $alignItems: "center",
11349
- $padding: ".5rem 1rem",
11350
- $border: "1px solid #E2E5E9",
11351
- $borderRadius: ".5rem",
11352
- $backgroundColor: "#ffffff",
11353
- $gap: "1rem",
11354
- $width: "100%",
11355
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11356
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
11357
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11358
- "svg",
11359
- {
11360
- viewBox: "0 0 24 16",
11361
- fill: "none",
11362
- xmlns: "http://www.w3.org/2000/svg",
11363
- width: "26px",
11364
- height: "auto",
11365
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
11366
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11367
- "rect",
11368
- {
11369
- stroke: "#DDD",
11370
- fill: "#FFF",
11371
- x: ".25",
11372
- y: ".25",
11373
- width: "23",
11374
- height: "15.5",
11375
- rx: "2"
11376
- }
11377
- ),
11378
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11379
- "path",
11380
- {
11381
- 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",
11382
- fill: "#1434CB"
11383
- }
11384
- )
11385
- ] })
11386
- }
11387
- ) }),
11388
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
11389
- ] }),
11390
- /* @__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" }) })
11391
- ] })
11392
- }
11393
- ),
11394
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11395
- StyledButton,
11396
- {
11397
- $size: "sm",
11398
- $color: "primary",
11399
- $variant: "outline",
11400
- style: {
11401
- whiteSpace: "nowrap",
11402
- paddingLeft: "1rem",
11403
- paddingRight: "1rem"
11404
- },
11405
- children: "Edit"
11406
- }
11407
- ) })
11408
- ] })
11409
- ] })
11410
- }
11411
- ),
11412
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11413
- Flex,
11414
- {
11415
- $flexDirection: "column",
11416
- $gap: "1rem",
11417
- $backgroundColor: "#FBFBFB",
11418
- $borderRadius: "0 0 0.5rem 0.5rem",
11419
- $flex: "1",
11420
- $height: "100%",
11421
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
11422
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11423
- Box,
11424
- {
11425
- $fontSize: "18px",
11426
- $marginBottom: "1.5rem",
11427
- $display: "inline-block",
11428
- $width: "100%",
11429
- children: "Others"
11430
- }
11431
- ),
11432
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11433
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11434
- Flex,
11435
- {
11436
- $alignItems: "center",
11437
- $padding: ".5rem 1rem",
11438
- $border: "1px solid #E2E5E9",
11439
- $borderRadius: ".5rem",
11440
- $backgroundColor: "#ffffff",
11441
- $gap: "1rem",
11442
- $width: "100%",
11443
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $justifyContent: "space-between", $flex: "1", children: [
11444
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $alignItems: "center", $gap: "1rem", children: [
11445
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $display: "inline-block", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11446
- "svg",
11447
- {
11448
- viewBox: "0 0 24 16",
11449
- fill: "none",
11450
- xmlns: "http://www.w3.org/2000/svg",
11451
- width: "26px",
11452
- height: "auto",
11453
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { children: [
11454
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11455
- "rect",
11456
- {
11457
- stroke: "#DDD",
11458
- fill: "#FFF",
11459
- x: ".25",
11460
- y: ".25",
11461
- width: "23",
11462
- height: "15.5",
11463
- rx: "2"
11464
- }
11465
- ),
11466
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11467
- "path",
11468
- {
11469
- 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",
11470
- fill: "#1434CB"
11471
- }
11472
- )
11473
- ] })
11474
- }
11475
- ) }),
11476
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
11477
- ] }),
11478
- /* @__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" }) })
11479
- ] })
11480
- }
11481
- ),
11482
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
11483
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11484
- StyledButton,
11485
- {
11486
- $size: "sm",
11487
- $color: "primary",
11488
- $variant: "outline",
11489
- style: {
11490
- whiteSpace: "nowrap",
11491
- paddingLeft: "1rem",
11492
- paddingRight: "1rem"
11493
- },
11494
- children: "Make Default"
11495
- }
11496
- ),
11497
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
11498
- StyledButton,
11499
- {
11500
- $size: "sm",
11501
- $color: "primary",
11502
- $variant: "outline",
11503
- style: {
11504
- whiteSpace: "nowrap",
11505
- paddingLeft: "1rem",
11506
- paddingRight: "1rem"
11507
- },
11508
- children: "Edit"
11509
- }
11510
- )
11511
- ] })
11512
- ] })
11513
- ] })
11514
- }
11515
- )
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
11516
11939
  ]
11517
11940
  }
11518
11941
  )
11519
- ] }),
11520
- portal || document.body
11521
- )
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
+ ] })
11522
11967
  ] });
11523
11968
  });
11524
11969
 
@@ -11624,22 +12069,22 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
11624
12069
  });
11625
12070
 
11626
12071
  // src/components/embed/ComponentTree.tsx
11627
- var import_react21 = require("react");
12072
+ var import_react23 = require("react");
11628
12073
 
11629
12074
  // src/components/embed/renderer.ts
11630
- var import_react20 = require("react");
12075
+ var import_react22 = require("react");
11631
12076
 
11632
12077
  // src/components/layout/root/Root.tsx
11633
12078
  var import_react16 = require("react");
11634
12079
  var import_jsx_runtime17 = require("react/jsx-runtime");
11635
12080
  var Root = (0, import_react16.forwardRef)(
11636
- (props, ref) => {
12081
+ ({ data, settings, ...props }, ref) => {
11637
12082
  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, ...props });
11638
12083
  }
11639
12084
  );
11640
12085
 
11641
12086
  // src/components/layout/viewport/Viewport.tsx
11642
- var import_react17 = require("react");
12087
+ var import_react19 = require("react");
11643
12088
 
11644
12089
  // src/components/layout/viewport/styles.ts
11645
12090
  var StyledViewport = dt.div`
@@ -11647,67 +12092,152 @@ var StyledViewport = dt.div`
11647
12092
  flex-wrap: wrap;
11648
12093
  margin-left: auto;
11649
12094
  margin-right: auto;
12095
+ gap: 1rem;
11650
12096
  `;
11651
12097
 
11652
- // src/components/layout/viewport/Viewport.tsx
12098
+ // src/components/layout/RenderLayout.tsx
12099
+ var import_react17 = require("react");
12100
+ var import_react18 = require("react");
11653
12101
  var import_jsx_runtime18 = require("react/jsx-runtime");
11654
- var Viewport = (0, import_react17.forwardRef)(
12102
+ var DisabledState = () => {
12103
+ const theme = nt();
12104
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
12105
+ Flex,
12106
+ {
12107
+ $flexDirection: "column",
12108
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
12109
+ $width: "100%",
12110
+ $height: "auto",
12111
+ $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
12112
+ $backgroundColor: theme.card.background,
12113
+ $alignItems: "center",
12114
+ $justifyContent: "center",
12115
+ children: [
12116
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12117
+ Box,
12118
+ {
12119
+ $marginBottom: "8px",
12120
+ $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
12121
+ $fontFamily: theme.typography.heading1.fontFamily,
12122
+ $fontWeight: theme.typography.heading1.fontWeight,
12123
+ $color: theme.typography.heading1.color,
12124
+ children: "Coming soon"
12125
+ }
12126
+ ),
12127
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12128
+ Box,
12129
+ {
12130
+ $marginBottom: "8px",
12131
+ $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
12132
+ $fontFamily: theme.typography.text.fontFamily,
12133
+ $fontWeight: theme.typography.text.fontWeight,
12134
+ $color: theme.typography.text.color,
12135
+ children: "The plan manager will be back very soon."
12136
+ }
12137
+ )
12138
+ ]
12139
+ }
12140
+ ) });
12141
+ };
12142
+ var SuccessState = () => {
12143
+ const [isOpen, setIsOpen] = (0, import_react17.useState)(true);
12144
+ const theme = nt();
12145
+ const { hydrate, data, api, setLayout, isPending } = useEmbed();
12146
+ (0, import_react18.useEffect)(() => {
12147
+ if (api && data.component?.id) {
12148
+ hydrate();
12149
+ setTimeout(() => setIsOpen(false), 2e3);
12150
+ }
12151
+ }, [api, data.component?.id, hydrate]);
12152
+ (0, import_react18.useEffect)(() => {
12153
+ if (!isPending && !isOpen) {
12154
+ setLayout("portal");
12155
+ }
12156
+ }, [isPending, isOpen, setLayout]);
12157
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
12158
+ Flex,
12159
+ {
12160
+ $flexDirection: "column",
12161
+ $justifyContent: "center",
12162
+ $alignItems: "center",
12163
+ $gap: `${32 / TEXT_BASE_SIZE}rem`,
12164
+ $width: "min-content",
12165
+ $height: "min-content",
12166
+ $margin: "auto",
12167
+ $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding * 1.5 / TEXT_BASE_SIZE}rem`,
12168
+ $whiteSpace: "nowrap",
12169
+ $backgroundColor: theme.card.background,
12170
+ $borderRadius: "0.5rem",
12171
+ $boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
12172
+ children: [
12173
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12174
+ IconRound,
12175
+ {
12176
+ name: "check",
12177
+ size: "3xl",
12178
+ colors: [theme.card.background, theme.primary]
12179
+ }
12180
+ ),
12181
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12182
+ Text,
12183
+ {
12184
+ as: "h1",
12185
+ $font: theme.typography.heading1.fontFamily,
12186
+ $size: theme.typography.heading1.fontSize,
12187
+ $weight: theme.typography.heading1.fontWeight,
12188
+ $color: theme.typography.heading1.color,
12189
+ children: "Subscription updated!"
12190
+ }
12191
+ ),
12192
+ /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12193
+ Text,
12194
+ {
12195
+ as: "p",
12196
+ $font: theme.typography.text.fontFamily,
12197
+ $size: theme.typography.text.fontSize,
12198
+ $weight: theme.typography.text.fontWeight,
12199
+ $color: theme.typography.text.color,
12200
+ children: "Loading..."
12201
+ }
12202
+ )
12203
+ ]
12204
+ }
12205
+ );
12206
+ };
12207
+ var RenderLayout = ({ children }) => {
12208
+ const { layout } = useEmbed();
12209
+ switch (layout) {
12210
+ case "disabled":
12211
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DisabledState, {});
12212
+ case "success":
12213
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SuccessState, {});
12214
+ default:
12215
+ return children;
12216
+ }
12217
+ };
12218
+
12219
+ // src/components/layout/viewport/Viewport.tsx
12220
+ var import_jsx_runtime19 = require("react/jsx-runtime");
12221
+ var Viewport = (0, import_react19.forwardRef)(
11655
12222
  ({ children, ...props }, ref) => {
11656
12223
  const theme = nt();
11657
- const { layout } = useEmbed();
11658
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
12224
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
11659
12225
  StyledViewport,
11660
12226
  {
11661
12227
  ref,
11662
12228
  $numberOfColumns: theme.numberOfColumns,
11663
12229
  ...props,
11664
- children: layout === "disabled" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Box, { $width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
11665
- Flex,
11666
- {
11667
- $flexDirection: "column",
11668
- $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
11669
- $width: "100%",
11670
- $height: "auto",
11671
- $borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
11672
- $backgroundColor: theme.card.background,
11673
- $alignItems: "center",
11674
- $justifyContent: "center",
11675
- children: [
11676
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11677
- Box,
11678
- {
11679
- $marginBottom: "8px",
11680
- $fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
11681
- $fontFamily: theme.typography.heading1.fontFamily,
11682
- $fontWeight: theme.typography.heading1.fontWeight,
11683
- $color: theme.typography.heading1.color,
11684
- children: "Coming soon"
11685
- }
11686
- ),
11687
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
11688
- Box,
11689
- {
11690
- $marginBottom: "8px",
11691
- $fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
11692
- $fontFamily: theme.typography.text.fontFamily,
11693
- $fontWeight: theme.typography.text.fontWeight,
11694
- $color: theme.typography.text.color,
11695
- children: "The plan manager will be back very soon."
11696
- }
11697
- )
11698
- ]
11699
- }
11700
- ) }) : children
12230
+ children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderLayout, { children })
11701
12231
  }
11702
12232
  );
11703
12233
  }
11704
12234
  );
11705
12235
 
11706
12236
  // src/components/layout/column/Column.tsx
11707
- var import_react19 = require("react");
12237
+ var import_react21 = require("react");
11708
12238
 
11709
12239
  // src/components/layout/card/Card.tsx
11710
- var import_react18 = require("react");
12240
+ var import_react20 = require("react");
11711
12241
 
11712
12242
  // src/components/layout/card/styles.ts
11713
12243
  var StyledCard = dt.div(
@@ -11768,11 +12298,11 @@ var StyledCard = dt.div(
11768
12298
  );
11769
12299
 
11770
12300
  // src/components/layout/card/Card.tsx
11771
- var import_jsx_runtime19 = require("react/jsx-runtime");
11772
- var Card = (0, import_react18.forwardRef)(
12301
+ var import_jsx_runtime20 = require("react/jsx-runtime");
12302
+ var Card = (0, import_react20.forwardRef)(
11773
12303
  ({ children, className }, ref) => {
11774
12304
  const theme = nt();
11775
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
12305
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
11776
12306
  StyledCard,
11777
12307
  {
11778
12308
  ref,
@@ -11790,14 +12320,13 @@ var Card = (0, import_react18.forwardRef)(
11790
12320
  // src/components/layout/column/styles.ts
11791
12321
  var StyledColumn = dt.div`
11792
12322
  flex-grow: 1;
11793
- padding: 0.75rem;
11794
12323
  `;
11795
12324
 
11796
12325
  // src/components/layout/column/Column.tsx
11797
- var import_jsx_runtime20 = require("react/jsx-runtime");
11798
- var Column = (0, import_react19.forwardRef)(
11799
- ({ children, ...props }, ref) => {
11800
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { children }) });
12326
+ var import_jsx_runtime21 = require("react/jsx-runtime");
12327
+ var Column = (0, import_react21.forwardRef)(
12328
+ ({ children, basis, ...props }, ref) => {
12329
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Card, { children }) });
11801
12330
  }
11802
12331
  );
11803
12332
 
@@ -11815,7 +12344,7 @@ var components = {
11815
12344
  function createRenderer(options) {
11816
12345
  const { useFallback = false } = options || {};
11817
12346
  return function renderNode(node2, index) {
11818
- const { type, props = {}, custom = {}, children } = node2;
12347
+ const { type, props = {}, children } = node2;
11819
12348
  const name = typeof type !== "string" ? type.resolvedName : type;
11820
12349
  const component = useFallback ? components[name] || "div" : components[name];
11821
12350
  if (!components[name]) {
@@ -11830,43 +12359,23 @@ function createRenderer(options) {
11830
12359
  const { className, ...rest } = props;
11831
12360
  const resolvedProps = component === "div" ? rest : props;
11832
12361
  const resolvedChildren = children.map(renderNode);
11833
- return (0, import_react20.createElement)(
12362
+ return (0, import_react22.createElement)(
11834
12363
  component,
11835
12364
  {
12365
+ key: index,
11836
12366
  className,
11837
- ...component !== "div" && { ...resolvedProps },
11838
- ...component !== "div" && Object.keys(custom).length > 0 && { custom },
11839
- key: index
12367
+ ...component !== "div" && { ...resolvedProps }
11840
12368
  },
11841
12369
  resolvedChildren
11842
12370
  );
11843
12371
  };
11844
12372
  }
11845
12373
 
11846
- // src/components/ui/loader/styles.ts
11847
- var spin = mt`
11848
- 0% {
11849
- transform: rotate(0deg);
11850
- }
11851
- 100% {
11852
- transform: rotate(360deg);
11853
- }
11854
- `;
11855
- var Loader = dt.div`
11856
- border: ${({ theme }) => `${4 / TEXT_BASE_SIZE}rem solid hsla(0, 0%, ${hexToHSL(theme.card.background).l > 50 ? 0 : 100}%, 0.1)`};
11857
- border-top: ${4 / TEXT_BASE_SIZE}rem solid ${({ theme }) => theme.primary};
11858
- border-radius: 50%;
11859
- width: ${40 / TEXT_BASE_SIZE}rem;
11860
- height: ${40 / TEXT_BASE_SIZE}rem;
11861
- animation: ${spin} 1.5s linear infinite;
11862
- display: inline-block;
11863
- `;
11864
-
11865
12374
  // src/components/embed/ComponentTree.tsx
11866
- var import_jsx_runtime21 = require("react/jsx-runtime");
12375
+ var import_jsx_runtime22 = require("react/jsx-runtime");
11867
12376
  var Loading = () => {
11868
12377
  const theme = nt();
11869
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
12378
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
11870
12379
  Flex,
11871
12380
  {
11872
12381
  $width: "100%",
@@ -11874,13 +12383,13 @@ var Loading = () => {
11874
12383
  $alignItems: "center",
11875
12384
  $justifyContent: "center",
11876
12385
  $padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
11877
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
12386
+ children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader, {})
11878
12387
  }
11879
12388
  );
11880
12389
  };
11881
12390
  var Error2 = ({ message }) => {
11882
12391
  const theme = nt();
11883
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
12392
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
11884
12393
  Flex,
11885
12394
  {
11886
12395
  $flexDirection: "column",
@@ -11892,7 +12401,7 @@ var Error2 = ({ message }) => {
11892
12401
  $alignItems: "center",
11893
12402
  $justifyContent: "center",
11894
12403
  children: [
11895
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
12404
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
11896
12405
  Box,
11897
12406
  {
11898
12407
  $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -11903,7 +12412,7 @@ var Error2 = ({ message }) => {
11903
12412
  children: "404 Error"
11904
12413
  }
11905
12414
  ),
11906
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
12415
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
11907
12416
  Box,
11908
12417
  {
11909
12418
  $marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
@@ -11920,30 +12429,30 @@ var Error2 = ({ message }) => {
11920
12429
  };
11921
12430
  var ComponentTree = () => {
11922
12431
  const { error, nodes } = useEmbed();
11923
- const [children, setChildren] = (0, import_react21.useState)(/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loading, {}));
11924
- (0, import_react21.useEffect)(() => {
12432
+ const [children, setChildren] = (0, import_react23.useState)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {}));
12433
+ (0, import_react23.useEffect)(() => {
11925
12434
  const renderer = createRenderer();
11926
12435
  setChildren(nodes.map(renderer));
11927
12436
  }, [nodes]);
11928
12437
  if (error) {
11929
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Error2, { message: error.message });
12438
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Error2, { message: error.message });
11930
12439
  }
11931
- if (import_react21.Children.count(children) === 0) {
11932
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loading, {});
12440
+ if (import_react23.Children.count(children) === 0) {
12441
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loading, {});
11933
12442
  }
11934
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
12443
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children });
11935
12444
  };
11936
12445
 
11937
12446
  // src/components/embed/Embed.tsx
11938
- var import_jsx_runtime22 = require("react/jsx-runtime");
12447
+ var import_jsx_runtime23 = require("react/jsx-runtime");
11939
12448
  var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
11940
12449
  if (accessToken?.length === 0) {
11941
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Please provide an access token." });
12450
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: "Please provide an access token." });
11942
12451
  }
11943
12452
  if (!accessToken?.startsWith("token_")) {
11944
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
12453
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
11945
12454
  }
11946
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentTree, {}) });
12455
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ComponentTree, {}) });
11947
12456
  };
11948
12457
  /*! Bundled license information:
11949
12458