@schematichq/schematic-react 0.2.0-rc.4 → 0.2.0-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/schematic-react.cjs.js +1492 -1088
- package/dist/schematic-react.d.ts +32 -36
- package/dist/schematic-react.esm.js +1476 -1078
- package/package.json +2 -2
@@ -864,9 +864,8 @@ __export(src_exports, {
|
|
864
864
|
IncludedFeatures: () => IncludedFeatures,
|
865
865
|
Invoices: () => Invoices,
|
866
866
|
MeteredFeatures: () => MeteredFeatures,
|
867
|
-
|
868
|
-
|
869
|
-
OverlayWrapper: () => OverlayWrapper,
|
867
|
+
Modal: () => Modal,
|
868
|
+
ModalHeader: () => ModalHeader,
|
870
869
|
PaymentMethod: () => PaymentMethod,
|
871
870
|
PlanManager: () => PlanManager,
|
872
871
|
ProgressBar: () => ProgressBar,
|
@@ -883,7 +882,8 @@ __export(src_exports, {
|
|
883
882
|
useSchematic: () => useSchematic,
|
884
883
|
useSchematicContext: () => useSchematicContext,
|
885
884
|
useSchematicEvents: () => useSchematicEvents,
|
886
|
-
useSchematicFlag: () => useSchematicFlag
|
885
|
+
useSchematicFlag: () => useSchematicFlag,
|
886
|
+
useSchematicIsPending: () => useSchematicIsPending
|
887
887
|
});
|
888
888
|
module.exports = __toCommonJS(src_exports);
|
889
889
|
|
@@ -6236,6 +6236,11 @@ var Qe = function() {
|
|
6236
6236
|
}();
|
6237
6237
|
var et = import_react.default.createContext(void 0);
|
6238
6238
|
var tt = et.Consumer;
|
6239
|
+
function nt() {
|
6240
|
+
var e = (0, import_react.useContext)(et);
|
6241
|
+
if (!e) throw he(18);
|
6242
|
+
return e;
|
6243
|
+
}
|
6239
6244
|
function ot(e) {
|
6240
6245
|
var n = import_react.default.useContext(et), r2 = (0, import_react.useMemo)(function() {
|
6241
6246
|
return function(e2, n2) {
|
@@ -6383,6 +6388,12 @@ function ft(n) {
|
|
6383
6388
|
}
|
6384
6389
|
return import_react.default.memo(l2);
|
6385
6390
|
}
|
6391
|
+
function mt(t) {
|
6392
|
+
for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
|
6393
|
+
"undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
|
6394
|
+
var r2 = ae(lt.apply(void 0, __spreadArray([t], n, false))), s2 = $(r2);
|
6395
|
+
return new We(s2, r2);
|
6396
|
+
}
|
6386
6397
|
var vt = function() {
|
6387
6398
|
function e() {
|
6388
6399
|
var e2 = this;
|
@@ -6451,7 +6462,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
|
|
6451
6462
|
}
|
6452
6463
|
stripe._registerWrapper({
|
6453
6464
|
name: "stripe-js",
|
6454
|
-
version: "4.
|
6465
|
+
version: "4.4.0",
|
6455
6466
|
startTime
|
6456
6467
|
});
|
6457
6468
|
};
|
@@ -7351,6 +7362,7 @@ function InvoiceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
7351
7362
|
environmentId: json["environment_id"],
|
7352
7363
|
externalId: json["external_id"],
|
7353
7364
|
id: json["id"],
|
7365
|
+
paymentMethodExternalId: json["payment_method_external_id"] == null ? void 0 : json["payment_method_external_id"],
|
7354
7366
|
subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
|
7355
7367
|
subtotal: json["subtotal"],
|
7356
7368
|
updatedAt: new Date(json["updated_at"])
|
@@ -7376,7 +7388,6 @@ function PaymentMethodResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
7376
7388
|
environmentId: json["environment_id"],
|
7377
7389
|
externalId: json["external_id"],
|
7378
7390
|
id: json["id"],
|
7379
|
-
invoiceExternalId: json["invoice_external_id"] == null ? void 0 : json["invoice_external_id"],
|
7380
7391
|
paymentMethodType: json["payment_method_type"],
|
7381
7392
|
subscriptionExternalId: json["subscription_external_id"] == null ? void 0 : json["subscription_external_id"],
|
7382
7393
|
updatedAt: new Date(json["updated_at"])
|
@@ -8001,33 +8012,6 @@ function parseEditorState(data) {
|
|
8001
8012
|
});
|
8002
8013
|
return arr;
|
8003
8014
|
}
|
8004
|
-
async function fetchComponent(id, api) {
|
8005
|
-
const settings = { ...defaultSettings };
|
8006
|
-
const nodes = [];
|
8007
|
-
const response = await api.hydrateComponent({ componentId: id });
|
8008
|
-
const { data } = response;
|
8009
|
-
if (data.component?.ast) {
|
8010
|
-
const compressed = data.component.ast;
|
8011
|
-
const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
|
8012
|
-
to: "string"
|
8013
|
-
});
|
8014
|
-
const ast = getEditorState(json);
|
8015
|
-
if (ast) {
|
8016
|
-
(0, import_lodash.default)(settings, ast.ROOT.props.settings);
|
8017
|
-
nodes.push(...parseEditorState(ast));
|
8018
|
-
}
|
8019
|
-
}
|
8020
|
-
let stripe = null;
|
8021
|
-
if (data.stripeEmbed?.publishableKey) {
|
8022
|
-
stripe = loadStripe(data.stripeEmbed.publishableKey);
|
8023
|
-
}
|
8024
|
-
return {
|
8025
|
-
data,
|
8026
|
-
nodes,
|
8027
|
-
settings,
|
8028
|
-
stripe
|
8029
|
-
};
|
8030
|
-
}
|
8031
8015
|
var EmbedContext = (0, import_react2.createContext)({
|
8032
8016
|
api: null,
|
8033
8017
|
data: {
|
@@ -8038,6 +8022,9 @@ var EmbedContext = (0, import_react2.createContext)({
|
|
8038
8022
|
stripe: null,
|
8039
8023
|
layout: "portal",
|
8040
8024
|
error: void 0,
|
8025
|
+
isPending: false,
|
8026
|
+
hydrate: () => {
|
8027
|
+
},
|
8041
8028
|
setData: () => {
|
8042
8029
|
},
|
8043
8030
|
updateSettings: () => {
|
@@ -8064,7 +8051,10 @@ var EmbedProvider = ({
|
|
8064
8051
|
settings: { ...defaultSettings },
|
8065
8052
|
stripe: null,
|
8066
8053
|
layout: "portal",
|
8054
|
+
isPending: false,
|
8067
8055
|
error: void 0,
|
8056
|
+
hydrate: () => {
|
8057
|
+
},
|
8068
8058
|
setData: () => {
|
8069
8059
|
},
|
8070
8060
|
updateSettings: () => {
|
@@ -8075,51 +8065,55 @@ var EmbedProvider = ({
|
|
8075
8065
|
}
|
8076
8066
|
};
|
8077
8067
|
});
|
8078
|
-
(0, import_react2.
|
8079
|
-
|
8080
|
-
|
8081
|
-
|
8082
|
-
|
8083
|
-
|
8084
|
-
|
8085
|
-
|
8086
|
-
|
8087
|
-
|
8088
|
-
|
8089
|
-
|
8090
|
-
|
8091
|
-
|
8092
|
-
|
8093
|
-
|
8094
|
-
|
8095
|
-
|
8096
|
-
|
8097
|
-
|
8098
|
-
if (!id || !state.api) {
|
8099
|
-
return;
|
8100
|
-
}
|
8101
|
-
fetchComponent(id, state.api).then(async (resolvedData) => {
|
8102
|
-
setState((prev2) => ({ ...prev2, ...resolvedData }));
|
8103
|
-
}).catch((error) => setState((prev2) => ({ ...prev2, error })));
|
8104
|
-
}, [id, state.api]);
|
8105
|
-
(0, import_react2.useEffect)(() => {
|
8106
|
-
const fontSet = /* @__PURE__ */ new Set([]);
|
8107
|
-
Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
|
8108
|
-
fontSet.add(fontFamily);
|
8109
|
-
});
|
8110
|
-
if (fontSet.size > 0) {
|
8111
|
-
const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
|
8112
|
-
if (styleRef.current) {
|
8113
|
-
styleRef.current.href = src;
|
8068
|
+
const hydrate = (0, import_react2.useCallback)(async () => {
|
8069
|
+
setState((prev2) => ({ ...prev2, isPending: true, error: void 0 }));
|
8070
|
+
try {
|
8071
|
+
const nodes = [];
|
8072
|
+
const settings = { ...defaultSettings };
|
8073
|
+
if (!id || !state.api) {
|
8074
|
+
throw new Error("Invalid component id or api instance.");
|
8075
|
+
}
|
8076
|
+
const response = await state.api.hydrateComponent({ componentId: id });
|
8077
|
+
const { data } = response;
|
8078
|
+
if (data.component?.ast) {
|
8079
|
+
const compressed = data.component.ast;
|
8080
|
+
const json = inflate_1(Uint8Array.from(Object.values(compressed)), {
|
8081
|
+
to: "string"
|
8082
|
+
});
|
8083
|
+
const ast = getEditorState(json);
|
8084
|
+
if (ast) {
|
8085
|
+
(0, import_lodash.default)(settings, ast.ROOT.props.settings);
|
8086
|
+
nodes.push(...parseEditorState(ast));
|
8087
|
+
}
|
8114
8088
|
}
|
8089
|
+
let stripe = null;
|
8090
|
+
if (data.stripeEmbed?.publishableKey) {
|
8091
|
+
stripe = loadStripe(data.stripeEmbed.publishableKey);
|
8092
|
+
}
|
8093
|
+
setState((prev2) => ({
|
8094
|
+
...prev2,
|
8095
|
+
data,
|
8096
|
+
nodes,
|
8097
|
+
settings,
|
8098
|
+
stripe,
|
8099
|
+
isPending: false
|
8100
|
+
}));
|
8101
|
+
} catch (error) {
|
8102
|
+
setState((prev2) => ({
|
8103
|
+
...prev2,
|
8104
|
+
isPending: false,
|
8105
|
+
error: error instanceof Error ? error : new Error("An unknown error occurred.")
|
8106
|
+
}));
|
8115
8107
|
}
|
8116
|
-
}, [state.
|
8108
|
+
}, [id, state.api]);
|
8117
8109
|
const setData = (0, import_react2.useCallback)(
|
8118
8110
|
(data) => {
|
8119
8111
|
setState((prev2) => {
|
8120
|
-
const
|
8121
|
-
|
8122
|
-
|
8112
|
+
const updatedData = (0, import_lodash.default)({}, prev2.data, { ...data });
|
8113
|
+
return {
|
8114
|
+
...prev2,
|
8115
|
+
data: updatedData
|
8116
|
+
};
|
8123
8117
|
});
|
8124
8118
|
},
|
8125
8119
|
[setState]
|
@@ -8127,9 +8121,11 @@ var EmbedProvider = ({
|
|
8127
8121
|
const updateSettings = (0, import_react2.useCallback)(
|
8128
8122
|
(settings) => {
|
8129
8123
|
setState((prev2) => {
|
8130
|
-
const
|
8131
|
-
|
8132
|
-
|
8124
|
+
const updatedSettings = (0, import_lodash.default)({}, prev2.settings, { ...settings });
|
8125
|
+
return {
|
8126
|
+
...prev2,
|
8127
|
+
settings: updatedSettings
|
8128
|
+
};
|
8133
8129
|
});
|
8134
8130
|
},
|
8135
8131
|
[setState]
|
@@ -8152,6 +8148,40 @@ var EmbedProvider = ({
|
|
8152
8148
|
},
|
8153
8149
|
[setState]
|
8154
8150
|
);
|
8151
|
+
(0, import_react2.useEffect)(() => {
|
8152
|
+
const element = document.getElementById("schematic-fonts");
|
8153
|
+
if (element) {
|
8154
|
+
return void (styleRef.current = element);
|
8155
|
+
}
|
8156
|
+
const style = document.createElement("link");
|
8157
|
+
style.id = "schematic-fonts";
|
8158
|
+
style.rel = "stylesheet";
|
8159
|
+
document.head.appendChild(style);
|
8160
|
+
styleRef.current = style;
|
8161
|
+
}, []);
|
8162
|
+
(0, import_react2.useEffect)(() => {
|
8163
|
+
if (!accessToken) {
|
8164
|
+
return;
|
8165
|
+
}
|
8166
|
+
const config = new Configuration({ ...apiConfig, apiKey: accessToken });
|
8167
|
+
const api = new CheckoutApi(config);
|
8168
|
+
setState((prev2) => ({ ...prev2, api }));
|
8169
|
+
}, [accessToken, apiConfig]);
|
8170
|
+
(0, import_react2.useEffect)(() => {
|
8171
|
+
hydrate();
|
8172
|
+
}, [hydrate]);
|
8173
|
+
(0, import_react2.useEffect)(() => {
|
8174
|
+
const fontSet = /* @__PURE__ */ new Set([]);
|
8175
|
+
Object.values(state.settings.theme.typography).forEach(({ fontFamily }) => {
|
8176
|
+
fontSet.add(fontFamily);
|
8177
|
+
});
|
8178
|
+
if (fontSet.size > 0) {
|
8179
|
+
const src = `https://fonts.googleapis.com/css2?${[...fontSet].map((fontFamily) => `family=${fontFamily}&display=swap`).join("&")}`;
|
8180
|
+
if (styleRef.current) {
|
8181
|
+
styleRef.current.href = src;
|
8182
|
+
}
|
8183
|
+
}
|
8184
|
+
}, [state.settings.theme.typography]);
|
8155
8185
|
const renderChildren = () => {
|
8156
8186
|
if (state.stripe) {
|
8157
8187
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
@@ -8204,6 +8234,8 @@ var EmbedProvider = ({
|
|
8204
8234
|
stripe: state.stripe,
|
8205
8235
|
layout: state.layout,
|
8206
8236
|
error: state.error,
|
8237
|
+
isPending: state.isPending,
|
8238
|
+
hydrate,
|
8207
8239
|
setData,
|
8208
8240
|
updateSettings,
|
8209
8241
|
setStripe,
|
@@ -8784,19 +8816,36 @@ function v4(options, buf, offset) {
|
|
8784
8816
|
}
|
8785
8817
|
var v4_default = v4;
|
8786
8818
|
var import_polyfill = __toESM2(require_browser_polyfill());
|
8819
|
+
function contextString(context) {
|
8820
|
+
const sortedContext = Object.keys(context).reduce((acc, key) => {
|
8821
|
+
const sortedKeys = Object.keys(
|
8822
|
+
context[key] || {}
|
8823
|
+
).sort();
|
8824
|
+
const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
|
8825
|
+
obj[sortedKey] = context[key][sortedKey];
|
8826
|
+
return obj;
|
8827
|
+
}, {});
|
8828
|
+
acc[key] = sortedObj;
|
8829
|
+
return acc;
|
8830
|
+
}, {});
|
8831
|
+
return JSON.stringify(sortedContext);
|
8832
|
+
}
|
8787
8833
|
var anonymousIdKey = "schematicId";
|
8788
8834
|
var Schematic = class {
|
8789
8835
|
apiKey;
|
8790
8836
|
apiUrl = "https://api.schematichq.com";
|
8791
|
-
webSocketUrl = "wss://api.schematichq.com";
|
8792
|
-
eventUrl = "https://c.schematichq.com";
|
8793
8837
|
conn = null;
|
8794
8838
|
context = {};
|
8795
8839
|
eventQueue;
|
8840
|
+
eventUrl = "https://c.schematichq.com";
|
8841
|
+
flagListener;
|
8842
|
+
flagValueListeners = {};
|
8843
|
+
isPending = true;
|
8844
|
+
isPendingListeners = /* @__PURE__ */ new Set();
|
8796
8845
|
storage;
|
8797
8846
|
useWebSocket = false;
|
8798
8847
|
values = {};
|
8799
|
-
|
8848
|
+
webSocketUrl = "wss://api.schematichq.com";
|
8800
8849
|
constructor(apiKey, options) {
|
8801
8850
|
this.apiKey = apiKey;
|
8802
8851
|
this.eventQueue = [];
|
@@ -8816,12 +8865,14 @@ var Schematic = class {
|
|
8816
8865
|
if (options?.webSocketUrl !== void 0) {
|
8817
8866
|
this.webSocketUrl = options.webSocketUrl;
|
8818
8867
|
}
|
8819
|
-
if (window?.addEventListener) {
|
8868
|
+
if (typeof window !== "undefined" && window?.addEventListener) {
|
8820
8869
|
window.addEventListener("beforeunload", () => {
|
8821
8870
|
this.flushEventQueue();
|
8822
8871
|
});
|
8823
8872
|
}
|
8824
8873
|
}
|
8874
|
+
// Get value for a single flag
|
8875
|
+
// If in websocket mode, return the local value, otherwise make an API call
|
8825
8876
|
async checkFlag(options) {
|
8826
8877
|
const { fallback = false, key } = options;
|
8827
8878
|
const context = options.context || this.context;
|
@@ -8849,7 +8900,7 @@ var Schematic = class {
|
|
8849
8900
|
return fallback;
|
8850
8901
|
});
|
8851
8902
|
}
|
8852
|
-
// Make
|
8903
|
+
// Make an API call to fetch all flag values for a given context (use if not in websocket mode)
|
8853
8904
|
checkFlags = async (context) => {
|
8854
8905
|
context = context || this.context;
|
8855
8906
|
const requestUrl = `${this.apiUrl}/flags/check`;
|
@@ -8879,18 +8930,6 @@ var Schematic = class {
|
|
8879
8930
|
return false;
|
8880
8931
|
});
|
8881
8932
|
};
|
8882
|
-
cleanup = async () => {
|
8883
|
-
if (this.conn) {
|
8884
|
-
try {
|
8885
|
-
const socket = await this.conn;
|
8886
|
-
socket.close();
|
8887
|
-
} catch (error) {
|
8888
|
-
console.error("Error during cleanup:", error);
|
8889
|
-
} finally {
|
8890
|
-
this.conn = null;
|
8891
|
-
}
|
8892
|
-
}
|
8893
|
-
};
|
8894
8933
|
// Send an identify event
|
8895
8934
|
identify = (body) => {
|
8896
8935
|
this.setContext({
|
@@ -8908,12 +8947,16 @@ var Schematic = class {
|
|
8908
8947
|
this.context = context;
|
8909
8948
|
return Promise.resolve();
|
8910
8949
|
}
|
8911
|
-
|
8912
|
-
this.
|
8950
|
+
try {
|
8951
|
+
this.setIsPending(true);
|
8952
|
+
if (!this.conn) {
|
8953
|
+
this.conn = this.wsConnect();
|
8954
|
+
}
|
8955
|
+
const socket = await this.conn;
|
8956
|
+
await this.wsSendMessage(socket, context);
|
8957
|
+
} catch (error) {
|
8958
|
+
console.error("Error setting Schematic context:", error);
|
8913
8959
|
}
|
8914
|
-
return this.conn.then((socket) => {
|
8915
|
-
return this.wsSendMessage(socket, context);
|
8916
|
-
});
|
8917
8960
|
};
|
8918
8961
|
// Send track event
|
8919
8962
|
track = (body) => {
|
@@ -8925,6 +8968,9 @@ var Schematic = class {
|
|
8925
8968
|
user: user ?? this.context.user
|
8926
8969
|
});
|
8927
8970
|
};
|
8971
|
+
/**
|
8972
|
+
* Event processing
|
8973
|
+
*/
|
8928
8974
|
flushEventQueue = () => {
|
8929
8975
|
while (this.eventQueue.length > 0) {
|
8930
8976
|
const event = this.eventQueue.shift();
|
@@ -8980,6 +9026,22 @@ var Schematic = class {
|
|
8980
9026
|
this.eventQueue.push(event);
|
8981
9027
|
return Promise.resolve();
|
8982
9028
|
};
|
9029
|
+
/**
|
9030
|
+
* Websocket management
|
9031
|
+
*/
|
9032
|
+
cleanup = async () => {
|
9033
|
+
if (this.conn) {
|
9034
|
+
try {
|
9035
|
+
const socket = await this.conn;
|
9036
|
+
socket.close();
|
9037
|
+
} catch (error) {
|
9038
|
+
console.error("Error during cleanup:", error);
|
9039
|
+
} finally {
|
9040
|
+
this.conn = null;
|
9041
|
+
}
|
9042
|
+
}
|
9043
|
+
};
|
9044
|
+
// Open a websocket connection
|
8983
9045
|
wsConnect = () => {
|
8984
9046
|
return new Promise((resolve, reject) => {
|
8985
9047
|
const wsUrl = `${this.webSocketUrl}/flags/bootstrap`;
|
@@ -8995,6 +9057,8 @@ var Schematic = class {
|
|
8995
9057
|
};
|
8996
9058
|
});
|
8997
9059
|
};
|
9060
|
+
// Send a message on the websocket indicating interest in a particular evaluation context
|
9061
|
+
// and wait for the initial set of flag values to be returned
|
8998
9062
|
wsSendMessage = (socket, context) => {
|
8999
9063
|
return new Promise((resolve, reject) => {
|
9000
9064
|
if (contextString(context) == contextString(this.context)) {
|
@@ -9012,16 +9076,17 @@ var Schematic = class {
|
|
9012
9076
|
(message.flags ?? []).forEach(
|
9013
9077
|
(flag) => {
|
9014
9078
|
this.values[contextString(context)][flag.flag] = flag.value;
|
9079
|
+
this.notifyFlagValueListeners(flag.flag);
|
9015
9080
|
}
|
9016
9081
|
);
|
9017
9082
|
if (this.flagListener) {
|
9018
|
-
this.flagListener(this.
|
9083
|
+
this.flagListener(this.getFlagValues());
|
9019
9084
|
}
|
9085
|
+
this.setIsPending(false);
|
9020
9086
|
if (!resolved) {
|
9021
9087
|
resolved = true;
|
9022
9088
|
resolve();
|
9023
9089
|
}
|
9024
|
-
socket.removeEventListener("message", messageHandler);
|
9025
9090
|
};
|
9026
9091
|
socket.addEventListener("message", messageHandler);
|
9027
9092
|
socket.send(
|
@@ -9040,72 +9105,93 @@ var Schematic = class {
|
|
9040
9105
|
}
|
9041
9106
|
});
|
9042
9107
|
};
|
9108
|
+
/**
|
9109
|
+
* State management
|
9110
|
+
*/
|
9111
|
+
// isPending state
|
9112
|
+
getIsPending = () => {
|
9113
|
+
return this.isPending;
|
9114
|
+
};
|
9115
|
+
addIsPendingListener = (listener) => {
|
9116
|
+
this.isPendingListeners.add(listener);
|
9117
|
+
return () => {
|
9118
|
+
this.isPendingListeners.delete(listener);
|
9119
|
+
};
|
9120
|
+
};
|
9121
|
+
setIsPending = (isPending) => {
|
9122
|
+
this.isPending = isPending;
|
9123
|
+
this.isPendingListeners.forEach((listener) => listener());
|
9124
|
+
};
|
9125
|
+
// flagValues state
|
9126
|
+
getFlagValue = (flagKey) => {
|
9127
|
+
const values = this.getFlagValues();
|
9128
|
+
return values[flagKey];
|
9129
|
+
};
|
9130
|
+
getFlagValues = () => {
|
9131
|
+
const contextStr = contextString(this.context);
|
9132
|
+
return this.values[contextStr] ?? {};
|
9133
|
+
};
|
9134
|
+
addFlagValueListener = (flagKey, listener) => {
|
9135
|
+
if (!(flagKey in this.flagValueListeners)) {
|
9136
|
+
this.flagValueListeners[flagKey] = /* @__PURE__ */ new Set();
|
9137
|
+
}
|
9138
|
+
this.flagValueListeners[flagKey].add(listener);
|
9139
|
+
return () => {
|
9140
|
+
this.flagValueListeners[flagKey].delete(listener);
|
9141
|
+
};
|
9142
|
+
};
|
9143
|
+
notifyFlagValueListeners = (flagKey) => {
|
9144
|
+
const listeners = this.flagValueListeners?.[flagKey] ?? [];
|
9145
|
+
listeners.forEach((listener) => listener());
|
9146
|
+
};
|
9043
9147
|
};
|
9044
|
-
function contextString(context) {
|
9045
|
-
const sortedContext = Object.keys(context).reduce((acc, key) => {
|
9046
|
-
const sortedKeys = Object.keys(
|
9047
|
-
context[key] || {}
|
9048
|
-
).sort();
|
9049
|
-
const sortedObj = sortedKeys.reduce((obj, sortedKey) => {
|
9050
|
-
obj[sortedKey] = context[key][sortedKey];
|
9051
|
-
return obj;
|
9052
|
-
}, {});
|
9053
|
-
acc[key] = sortedObj;
|
9054
|
-
return acc;
|
9055
|
-
}, {});
|
9056
|
-
return JSON.stringify(sortedContext);
|
9057
|
-
}
|
9058
9148
|
|
9059
9149
|
// src/context/schematic.tsx
|
9060
|
-
var import_react3 = require("react");
|
9150
|
+
var import_react3 = __toESM(require("react"));
|
9061
9151
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
9062
|
-
var SchematicContext = (0, import_react3.createContext)(
|
9063
|
-
|
9064
|
-
|
9152
|
+
var SchematicContext = (0, import_react3.createContext)(
|
9153
|
+
null
|
9154
|
+
);
|
9065
9155
|
var SchematicProvider = ({
|
9066
9156
|
children,
|
9067
9157
|
client: providedClient,
|
9068
9158
|
publishableKey,
|
9069
9159
|
...clientOpts
|
9070
9160
|
}) => {
|
9071
|
-
const
|
9072
|
-
|
9073
|
-
const memoizedClientOpts = (0, import_react3.useMemo)(
|
9074
|
-
() => clientOpts,
|
9075
|
-
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
9076
|
-
[JSON.stringify(clientOpts)]
|
9077
|
-
);
|
9078
|
-
const { useWebSocket = true } = clientOpts;
|
9079
|
-
(0, import_react3.useEffect)(() => {
|
9080
|
-
let cleanupFunction;
|
9161
|
+
const client = (0, import_react3.useMemo)(() => {
|
9162
|
+
const { useWebSocket = true } = clientOpts;
|
9081
9163
|
if (providedClient) {
|
9082
|
-
|
9083
|
-
|
9084
|
-
|
9085
|
-
|
9086
|
-
|
9087
|
-
|
9088
|
-
|
9089
|
-
|
9090
|
-
|
9091
|
-
|
9092
|
-
|
9093
|
-
});
|
9094
|
-
setClient(newClient);
|
9095
|
-
cleanupFunction = () => {
|
9096
|
-
newClient.cleanup().catch((error) => {
|
9164
|
+
return providedClient;
|
9165
|
+
}
|
9166
|
+
return new Schematic(publishableKey, {
|
9167
|
+
useWebSocket,
|
9168
|
+
...clientOpts
|
9169
|
+
});
|
9170
|
+
}, [providedClient, publishableKey, clientOpts]);
|
9171
|
+
(0, import_react3.useEffect)(() => {
|
9172
|
+
return () => {
|
9173
|
+
if (!providedClient) {
|
9174
|
+
client.cleanup().catch((error) => {
|
9097
9175
|
console.error("Error during cleanup:", error);
|
9098
9176
|
});
|
9099
|
-
}
|
9100
|
-
}
|
9101
|
-
|
9102
|
-
|
9103
|
-
|
9104
|
-
|
9105
|
-
|
9106
|
-
|
9177
|
+
}
|
9178
|
+
};
|
9179
|
+
}, [client, providedClient]);
|
9180
|
+
const contextValue = (0, import_react3.useMemo)(
|
9181
|
+
() => ({
|
9182
|
+
client
|
9183
|
+
}),
|
9184
|
+
[client]
|
9185
|
+
);
|
9107
9186
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SchematicContext.Provider, { value: contextValue, children });
|
9108
9187
|
};
|
9188
|
+
var useSchematic = () => {
|
9189
|
+
const context = import_react3.default.useContext(SchematicContext);
|
9190
|
+
if (context === null) {
|
9191
|
+
throw new Error("useSchematic must be used within a SchematicProvider");
|
9192
|
+
}
|
9193
|
+
return context;
|
9194
|
+
};
|
9109
9195
|
|
9110
9196
|
// src/hooks/embed.ts
|
9111
9197
|
var import_react4 = require("react");
|
@@ -9113,45 +9199,62 @@ var useEmbed = () => (0, import_react4.useContext)(EmbedContext);
|
|
9113
9199
|
|
9114
9200
|
// src/hooks/schematic.ts
|
9115
9201
|
var import_react5 = require("react");
|
9116
|
-
var useSchematic = () => (0, import_react5.useContext)(SchematicContext);
|
9117
9202
|
var useSchematicClient = (opts) => {
|
9118
9203
|
const schematic = useSchematic();
|
9119
9204
|
const { client } = opts ?? {};
|
9120
|
-
|
9121
|
-
|
9122
|
-
|
9123
|
-
|
9205
|
+
return (0, import_react5.useMemo)(() => {
|
9206
|
+
if (client) {
|
9207
|
+
return client;
|
9208
|
+
}
|
9209
|
+
return schematic.client;
|
9210
|
+
}, [client, schematic.client]);
|
9124
9211
|
};
|
9125
9212
|
var useSchematicContext = (opts) => {
|
9126
9213
|
const client = useSchematicClient(opts);
|
9127
|
-
|
9128
|
-
|
9214
|
+
return (0, import_react5.useMemo)(
|
9215
|
+
() => ({
|
9216
|
+
setContext: client.setContext.bind(client)
|
9217
|
+
}),
|
9218
|
+
[client]
|
9219
|
+
);
|
9129
9220
|
};
|
9130
9221
|
var useSchematicEvents = (opts) => {
|
9131
9222
|
const client = useSchematicClient(opts);
|
9132
|
-
const
|
9133
|
-
|
9223
|
+
const track = (0, import_react5.useCallback)(
|
9224
|
+
(...args) => client.track(...args),
|
9225
|
+
[client]
|
9226
|
+
);
|
9227
|
+
const identify = (0, import_react5.useCallback)(
|
9228
|
+
(...args) => client.identify(...args),
|
9229
|
+
[client]
|
9230
|
+
);
|
9231
|
+
return (0, import_react5.useMemo)(() => ({ track, identify }), [track, identify]);
|
9134
9232
|
};
|
9135
9233
|
var useSchematicFlag = (key, opts) => {
|
9136
|
-
const
|
9137
|
-
const
|
9138
|
-
const
|
9139
|
-
|
9140
|
-
|
9141
|
-
|
9142
|
-
|
9143
|
-
|
9144
|
-
|
9145
|
-
|
9146
|
-
|
9147
|
-
|
9148
|
-
|
9149
|
-
|
9150
|
-
|
9234
|
+
const client = useSchematicClient(opts);
|
9235
|
+
const fallback = opts?.fallback ?? false;
|
9236
|
+
const subscribe = (0, import_react5.useCallback)(
|
9237
|
+
(callback) => client.addFlagValueListener(key, callback),
|
9238
|
+
[client, key]
|
9239
|
+
);
|
9240
|
+
const getSnapshot = (0, import_react5.useCallback)(() => {
|
9241
|
+
const value = client.getFlagValue(key);
|
9242
|
+
return typeof value === "undefined" ? fallback : value;
|
9243
|
+
}, [client, key, fallback]);
|
9244
|
+
return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
|
9245
|
+
};
|
9246
|
+
var useSchematicIsPending = (opts) => {
|
9247
|
+
const client = useSchematicClient(opts);
|
9248
|
+
const subscribe = (0, import_react5.useCallback)(
|
9249
|
+
(callback) => client.addIsPendingListener(callback),
|
9250
|
+
[client]
|
9251
|
+
);
|
9252
|
+
const getSnapshot = (0, import_react5.useCallback)(() => client.getIsPending(), [client]);
|
9253
|
+
return (0, import_react5.useSyncExternalStore)(subscribe, getSnapshot);
|
9151
9254
|
};
|
9152
9255
|
|
9153
9256
|
// src/components/elements/plan-manager/PlanManager.tsx
|
9154
|
-
var
|
9257
|
+
var import_react10 = require("react");
|
9155
9258
|
var import_react_dom = require("react-dom");
|
9156
9259
|
|
9157
9260
|
// src/utils/color.ts
|
@@ -9233,7 +9336,7 @@ function hslToHex({ h, s: s2, l: l2 }) {
|
|
9233
9336
|
}
|
9234
9337
|
function adjustLightness(color, amount) {
|
9235
9338
|
const { h, s: s2, l: l2 } = hexToHSL(color);
|
9236
|
-
return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount, 100), 0) });
|
9339
|
+
return hslToHex({ h, s: s2, l: Math.max(Math.min(l2 + amount * 100, 100), 0) });
|
9237
9340
|
}
|
9238
9341
|
function lighten(color, amount) {
|
9239
9342
|
return adjustLightness(color, amount);
|
@@ -9463,6 +9566,7 @@ var Container = dt.div`
|
|
9463
9566
|
align-items: center;
|
9464
9567
|
flex-shrink: 0;
|
9465
9568
|
border-radius: 9999px;
|
9569
|
+
|
9466
9570
|
${({ $size }) => {
|
9467
9571
|
const base = 24;
|
9468
9572
|
let scale = 1;
|
@@ -9480,6 +9584,15 @@ var Container = dt.div`
|
|
9480
9584
|
case "lg":
|
9481
9585
|
scale *= 1.75;
|
9482
9586
|
break;
|
9587
|
+
case "xl":
|
9588
|
+
scale *= 2;
|
9589
|
+
break;
|
9590
|
+
case "2xl":
|
9591
|
+
scale *= 2.5;
|
9592
|
+
break;
|
9593
|
+
case "3xl":
|
9594
|
+
scale *= 3;
|
9595
|
+
break;
|
9483
9596
|
}
|
9484
9597
|
return lt`
|
9485
9598
|
font-size: ${base * scale / TEXT_BASE_SIZE}rem;
|
@@ -9488,12 +9601,19 @@ var Container = dt.div`
|
|
9488
9601
|
height: ${(base + 8) * scale / TEXT_BASE_SIZE}rem;
|
9489
9602
|
`;
|
9490
9603
|
}}
|
9604
|
+
|
9491
9605
|
${({ $variant, $colors }) => $variant === "outline" ? lt`
|
9492
|
-
color: ${$colors[0]};
|
9493
9606
|
background-color: transparent;
|
9607
|
+
|
9608
|
+
${Icon} {
|
9609
|
+
color: ${$colors[0]};
|
9610
|
+
}
|
9494
9611
|
` : lt`
|
9495
|
-
color: ${$colors[0]};
|
9496
9612
|
background-color: ${$colors[1]};
|
9613
|
+
|
9614
|
+
${Icon} {
|
9615
|
+
color: ${$colors[0]};
|
9616
|
+
}
|
9497
9617
|
`}
|
9498
9618
|
`;
|
9499
9619
|
|
@@ -9515,57 +9635,175 @@ var IconRound = ({
|
|
9515
9635
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Container, { $size: size, $variant: variant, $colors: colors, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon2, { name }) });
|
9516
9636
|
};
|
9517
9637
|
|
9518
|
-
// src/components/ui/
|
9519
|
-
var
|
9520
|
-
position: relative;
|
9521
|
-
`;
|
9522
|
-
|
9523
|
-
// src/components/ui/progress-bar/ProgressBar.tsx
|
9638
|
+
// src/components/ui/modal/Modal.tsx
|
9639
|
+
var import_react6 = require("react");
|
9524
9640
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
9525
|
-
var
|
9526
|
-
|
9527
|
-
|
9528
|
-
|
9529
|
-
|
9530
|
-
|
9531
|
-
|
9532
|
-
|
9533
|
-
|
9534
|
-
|
9535
|
-
|
9536
|
-
|
9537
|
-
|
9538
|
-
|
9539
|
-
|
9540
|
-
|
9541
|
-
Container2,
|
9641
|
+
var Modal = ({ children, size = "auto", onClose }) => {
|
9642
|
+
const theme = nt();
|
9643
|
+
const { setLayout } = useEmbed();
|
9644
|
+
const ref = (0, import_react6.useRef)(null);
|
9645
|
+
const isLightBackground = (0, import_react6.useMemo)(() => {
|
9646
|
+
return hexToHSL(theme.card.background).l > 50;
|
9647
|
+
}, [theme.card.background]);
|
9648
|
+
const handleClose = (0, import_react6.useCallback)(() => {
|
9649
|
+
setLayout("portal");
|
9650
|
+
onClose?.();
|
9651
|
+
}, [setLayout, onClose]);
|
9652
|
+
(0, import_react6.useEffect)(() => {
|
9653
|
+
ref.current?.focus();
|
9654
|
+
}, []);
|
9655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
9656
|
+
Box,
|
9542
9657
|
{
|
9543
|
-
|
9544
|
-
|
9545
|
-
|
9546
|
-
|
9547
|
-
|
9548
|
-
|
9549
|
-
|
9550
|
-
|
9551
|
-
|
9552
|
-
|
9658
|
+
ref,
|
9659
|
+
tabIndex: 0,
|
9660
|
+
onClick: (event) => {
|
9661
|
+
if (event.target === event.currentTarget) {
|
9662
|
+
handleClose();
|
9663
|
+
}
|
9664
|
+
},
|
9665
|
+
onKeyDown: (event) => {
|
9666
|
+
if (event.key === "Escape") {
|
9667
|
+
handleClose();
|
9668
|
+
}
|
9669
|
+
},
|
9670
|
+
$position: "absolute",
|
9671
|
+
$top: "50%",
|
9672
|
+
$left: "50%",
|
9673
|
+
$zIndex: "999999",
|
9674
|
+
$transform: "translate(-50%, -50%)",
|
9675
|
+
$width: "100%",
|
9676
|
+
$height: "100%",
|
9677
|
+
$backgroundColor: isLightBackground ? "hsl(0, 0%, 85%)" : "hsl(0, 0%, 15%)",
|
9678
|
+
$overflow: "hidden",
|
9679
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
9680
|
+
Flex,
|
9681
|
+
{
|
9682
|
+
$position: "relative",
|
9683
|
+
$top: "50%",
|
9684
|
+
$left: "50%",
|
9685
|
+
$transform: "translate(-50%, -50%)",
|
9686
|
+
$flexDirection: "column",
|
9687
|
+
$overflow: "hidden",
|
9688
|
+
...size === "auto" ? { $width: "min-content", $height: "min-content" } : {
|
9689
|
+
$width: "100%",
|
9690
|
+
$height: "100%",
|
9691
|
+
$maxWidth: "1366px",
|
9692
|
+
$maxHeight: "768px"
|
9693
|
+
},
|
9694
|
+
$backgroundColor: theme.card.background,
|
9695
|
+
$borderRadius: "0.5rem",
|
9696
|
+
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
9697
|
+
id: "select-plan-dialog",
|
9698
|
+
role: "dialog",
|
9699
|
+
"aria-labelledby": "select-plan-dialog-label",
|
9700
|
+
"aria-modal": "true",
|
9701
|
+
children
|
9702
|
+
}
|
9703
|
+
)
|
9704
|
+
}
|
9705
|
+
);
|
9706
|
+
};
|
9707
|
+
|
9708
|
+
// src/components/ui/modal/ModalHeader.tsx
|
9709
|
+
var import_react7 = require("react");
|
9710
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
9711
|
+
var ModalHeader = ({
|
9712
|
+
children,
|
9713
|
+
bordered = false,
|
9714
|
+
onClose
|
9715
|
+
}) => {
|
9716
|
+
const theme = nt();
|
9717
|
+
const { setLayout } = useEmbed();
|
9718
|
+
const isLightBackground = (0, import_react7.useMemo)(() => {
|
9719
|
+
return hexToHSL(theme.card.background).l > 50;
|
9720
|
+
}, [theme.card.background]);
|
9721
|
+
const handleClose = (0, import_react7.useCallback)(() => {
|
9722
|
+
setLayout("portal");
|
9723
|
+
onClose?.();
|
9724
|
+
}, [setLayout, onClose]);
|
9725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
9726
|
+
Flex,
|
9727
|
+
{
|
9728
|
+
$justifyContent: "space-between",
|
9729
|
+
$alignItems: "center",
|
9730
|
+
$flexShrink: "0",
|
9731
|
+
$gap: "1rem",
|
9732
|
+
$height: "5rem",
|
9733
|
+
$padding: "0 1.5rem 0 3rem",
|
9734
|
+
...bordered && {
|
9735
|
+
$borderBottomWidth: "1px",
|
9736
|
+
$borderBottomStyle: "solid",
|
9737
|
+
$borderBottomColor: isLightBackground ? "hsla(0, 0%, 0%, 0.15)" : "hsla(0, 0%, 100%, 0.15)"
|
9738
|
+
},
|
9739
|
+
children: [
|
9740
|
+
children,
|
9741
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
9742
|
+
Icon2,
|
9743
|
+
{
|
9744
|
+
name: "close",
|
9745
|
+
style: {
|
9746
|
+
fontSize: 36,
|
9747
|
+
color: isLightBackground ? "hsla(0, 0%, 0%, 0.275)" : "hsla(0, 0%, 100%, 0.275)"
|
9748
|
+
}
|
9749
|
+
}
|
9750
|
+
) })
|
9751
|
+
]
|
9752
|
+
}
|
9753
|
+
);
|
9754
|
+
};
|
9755
|
+
|
9756
|
+
// src/components/ui/progress-bar/styles.ts
|
9757
|
+
var Container2 = dt(Flex)`
|
9758
|
+
position: relative;
|
9759
|
+
`;
|
9760
|
+
|
9761
|
+
// src/components/ui/progress-bar/ProgressBar.tsx
|
9762
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
9763
|
+
var ProgressBar = ({
|
9764
|
+
progress,
|
9765
|
+
value,
|
9766
|
+
total = 0,
|
9767
|
+
color = "gray",
|
9768
|
+
barWidth = "100%",
|
9769
|
+
...props
|
9770
|
+
}) => {
|
9771
|
+
const barColorMap = {
|
9772
|
+
gray: "#9CA3AF",
|
9773
|
+
blue: "#2563EB",
|
9774
|
+
yellow: "#FFAA06",
|
9775
|
+
orange: "#DB6769",
|
9776
|
+
red: "#EF4444"
|
9777
|
+
};
|
9778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9779
|
+
Container2,
|
9780
|
+
{
|
9781
|
+
$alignItems: "center",
|
9782
|
+
$gap: `${16 / TEXT_BASE_SIZE}rem`,
|
9783
|
+
...props,
|
9784
|
+
children: [
|
9785
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9786
|
+
Flex,
|
9787
|
+
{
|
9788
|
+
$position: "relative",
|
9789
|
+
$alignItems: "center",
|
9790
|
+
$width: `${barWidth}`,
|
9553
9791
|
$maxWidth: "100%",
|
9554
|
-
children: /* @__PURE__ */ (0,
|
9792
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9555
9793
|
Flex,
|
9556
9794
|
{
|
9557
9795
|
$position: "relative",
|
9558
9796
|
$overflow: "hidden",
|
9559
9797
|
$width: "100%",
|
9560
9798
|
$height: `${8 / TEXT_BASE_SIZE}rem`,
|
9561
|
-
$
|
9799
|
+
$backgroundColor: "#F2F4F7",
|
9562
9800
|
$borderRadius: "9999px",
|
9563
|
-
children: /* @__PURE__ */ (0,
|
9801
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9564
9802
|
Box,
|
9565
9803
|
{
|
9566
9804
|
$width: `${Math.min(progress, 100)}%`,
|
9567
9805
|
$height: "100%",
|
9568
|
-
$
|
9806
|
+
$backgroundColor: barColorMap[color],
|
9569
9807
|
$borderRadius: "9999px"
|
9570
9808
|
}
|
9571
9809
|
)
|
@@ -9573,7 +9811,7 @@ var ProgressBar = ({
|
|
9573
9811
|
)
|
9574
9812
|
}
|
9575
9813
|
),
|
9576
|
-
total !== 0 && /* @__PURE__ */ (0,
|
9814
|
+
total !== 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Text, { $size: 14, $weight: 500, children: [
|
9577
9815
|
value,
|
9578
9816
|
"/",
|
9579
9817
|
total
|
@@ -9584,10 +9822,10 @@ var ProgressBar = ({
|
|
9584
9822
|
};
|
9585
9823
|
|
9586
9824
|
// src/components/elements/plan-manager/CheckoutDialog.tsx
|
9587
|
-
var
|
9825
|
+
var import_react9 = require("react");
|
9588
9826
|
|
9589
9827
|
// src/components/elements/plan-manager/PaymentForm.tsx
|
9590
|
-
var
|
9828
|
+
var import_react8 = require("react");
|
9591
9829
|
var import_react_stripe_js2 = require("@stripe/react-stripe-js");
|
9592
9830
|
var import_react_stripe_js3 = require("@stripe/react-stripe-js");
|
9593
9831
|
|
@@ -9599,7 +9837,18 @@ var StyledButton = dt(Button2)`
|
|
9599
9837
|
width: 100%;
|
9600
9838
|
${({ disabled, $color = "primary", theme }) => {
|
9601
9839
|
const { l: l2 } = hexToHSL(theme[$color]);
|
9602
|
-
|
9840
|
+
let textColor;
|
9841
|
+
let colorFn;
|
9842
|
+
if (l2 > 50) {
|
9843
|
+
textColor = "#000000";
|
9844
|
+
colorFn = lighten;
|
9845
|
+
} else {
|
9846
|
+
textColor = "#FFFFFF";
|
9847
|
+
colorFn = darken;
|
9848
|
+
}
|
9849
|
+
if (disabled) {
|
9850
|
+
textColor = colorFn(textColor, 42.5);
|
9851
|
+
}
|
9603
9852
|
return lt`
|
9604
9853
|
color: ${textColor};
|
9605
9854
|
|
@@ -9610,35 +9859,47 @@ var StyledButton = dt(Button2)`
|
|
9610
9859
|
}};
|
9611
9860
|
|
9612
9861
|
${({ disabled, $color = "primary", theme, $variant = "filled" }) => {
|
9613
|
-
|
9862
|
+
let color = theme[$color];
|
9863
|
+
if (disabled) {
|
9864
|
+
const { l: l2 } = hexToHSL(theme.card.background);
|
9865
|
+
color = hslToHex({ h: 0, s: 0, l: l2 });
|
9866
|
+
color = l2 > 50 ? darken(color, 0.075) : lighten(color, 0.15);
|
9867
|
+
}
|
9614
9868
|
return $variant === "filled" ? lt`
|
9615
9869
|
background-color: ${color};
|
9616
9870
|
border-color: ${color};
|
9617
9871
|
` : lt`
|
9618
9872
|
background-color: transparent;
|
9619
|
-
border-color:
|
9620
|
-
color:
|
9873
|
+
border-color: ${color};
|
9874
|
+
color: ${color};
|
9875
|
+
|
9621
9876
|
${Text} {
|
9622
|
-
color:
|
9877
|
+
color: ${color};
|
9623
9878
|
}
|
9624
9879
|
`;
|
9625
9880
|
}}
|
9626
9881
|
|
9627
|
-
&:hover {
|
9628
|
-
|
9629
|
-
|
9882
|
+
&:disabled:hover {
|
9883
|
+
cursor: not-allowed;
|
9884
|
+
}
|
9885
|
+
|
9886
|
+
&:not(:disabled):hover {
|
9887
|
+
${({ $color = "primary", theme, $variant = "filled" }) => {
|
9630
9888
|
const specified = theme[$color];
|
9631
|
-
const lightened = lighten(specified, 15);
|
9632
|
-
const color =
|
9889
|
+
const lightened = lighten(specified, 0.15);
|
9890
|
+
const color = specified === lightened ? darken(specified, 0.15) : lightened;
|
9891
|
+
const { l: l2 } = hexToHSL(theme[$color]);
|
9892
|
+
const textColor = l2 > 50 ? "#000000" : "#FFFFFF";
|
9633
9893
|
return $variant === "filled" ? lt`
|
9634
9894
|
background-color: ${color};
|
9635
9895
|
border-color: ${color};
|
9636
9896
|
` : lt`
|
9637
9897
|
background-color: ${color};
|
9638
9898
|
border-color: ${color};
|
9639
|
-
color:
|
9899
|
+
color: ${textColor};
|
9900
|
+
|
9640
9901
|
${Text} {
|
9641
|
-
color:
|
9902
|
+
color: ${textColor};
|
9642
9903
|
}
|
9643
9904
|
`;
|
9644
9905
|
}}
|
@@ -9648,35 +9909,35 @@ var StyledButton = dt(Button2)`
|
|
9648
9909
|
switch ($size) {
|
9649
9910
|
case "sm":
|
9650
9911
|
return lt`
|
9651
|
-
font-size: ${15 /
|
9652
|
-
padding: ${12 /
|
9653
|
-
border-radius: ${6 /
|
9912
|
+
font-size: ${15 / TEXT_BASE_SIZE}rem;
|
9913
|
+
padding: ${12 / TEXT_BASE_SIZE}rem 0;
|
9914
|
+
border-radius: ${6 / TEXT_BASE_SIZE}rem;
|
9654
9915
|
`;
|
9655
9916
|
case "md":
|
9656
9917
|
return lt`
|
9657
|
-
font-size: ${17 /
|
9658
|
-
padding: ${16 /
|
9659
|
-
border-radius: ${8 /
|
9918
|
+
font-size: ${17 / TEXT_BASE_SIZE}rem;
|
9919
|
+
padding: ${16 / TEXT_BASE_SIZE}rem 0;
|
9920
|
+
border-radius: ${8 / TEXT_BASE_SIZE}rem;
|
9660
9921
|
`;
|
9661
9922
|
case "lg":
|
9662
9923
|
return lt`
|
9663
|
-
font-size: ${19 /
|
9664
|
-
padding: ${20 /
|
9665
|
-
border-radius: ${10 /
|
9924
|
+
font-size: ${19 / TEXT_BASE_SIZE}rem;
|
9925
|
+
padding: ${20 / TEXT_BASE_SIZE}rem 0;
|
9926
|
+
border-radius: ${10 / TEXT_BASE_SIZE}rem;
|
9666
9927
|
`;
|
9667
9928
|
}
|
9668
9929
|
}}
|
9669
9930
|
`;
|
9670
9931
|
|
9671
9932
|
// src/components/elements/plan-manager/PaymentForm.tsx
|
9672
|
-
var
|
9933
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
9673
9934
|
var PaymentForm = ({ plan, period, onConfirm }) => {
|
9674
9935
|
const stripe = (0, import_react_stripe_js3.useStripe)();
|
9675
9936
|
const elements = (0, import_react_stripe_js3.useElements)();
|
9676
9937
|
const { api, data } = useEmbed();
|
9677
|
-
const [message, setMessage] = (0,
|
9678
|
-
const [isLoading, setIsLoading] = (0,
|
9679
|
-
const [isConfirmed, setIsConfirmed] = (0,
|
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);
|
9680
9941
|
const handleSubmit = async (event) => {
|
9681
9942
|
event.preventDefault();
|
9682
9943
|
const priceId = period === "month" ? plan.monthlyPrice?.id : plan.yearlyPrice?.id;
|
@@ -9685,6 +9946,7 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9685
9946
|
}
|
9686
9947
|
setIsLoading(true);
|
9687
9948
|
setIsConfirmed(false);
|
9949
|
+
setMessage(null);
|
9688
9950
|
try {
|
9689
9951
|
const { setupIntent, error } = await stripe.confirmSetup({
|
9690
9952
|
elements,
|
@@ -9700,20 +9962,14 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9700
9962
|
}
|
9701
9963
|
if (error?.type === "card_error" || error?.type === "validation_error") {
|
9702
9964
|
setMessage(error.message);
|
9703
|
-
} else {
|
9704
|
-
setMessage("An unexpected error occured.");
|
9705
9965
|
}
|
9706
|
-
setIsLoading(false);
|
9707
9966
|
} catch (error) {
|
9708
|
-
|
9709
|
-
|
9710
|
-
} else {
|
9711
|
-
setMessage("An unexpected error occured.");
|
9712
|
-
}
|
9967
|
+
setMessage("A problem occurred while saving your payment method.");
|
9968
|
+
} finally {
|
9713
9969
|
setIsLoading(false);
|
9714
9970
|
}
|
9715
9971
|
};
|
9716
|
-
return /* @__PURE__ */ (0,
|
9972
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
9717
9973
|
"form",
|
9718
9974
|
{
|
9719
9975
|
id: "payment-form",
|
@@ -9726,27 +9982,15 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9726
9982
|
overflowY: "auto"
|
9727
9983
|
},
|
9728
9984
|
children: [
|
9729
|
-
/* @__PURE__ */ (0,
|
9730
|
-
|
9731
|
-
{
|
9732
|
-
$fontSize: "18px",
|
9733
|
-
$marginBottom: "1.5rem",
|
9734
|
-
$display: "inline-block",
|
9735
|
-
$width: "100%",
|
9736
|
-
children: [
|
9737
|
-
"Add payment method",
|
9738
|
-
" "
|
9739
|
-
]
|
9740
|
-
}
|
9741
|
-
),
|
9742
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
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)(
|
9743
9987
|
Flex,
|
9744
9988
|
{
|
9745
9989
|
$flexDirection: "column",
|
9746
9990
|
$gap: "1.5rem",
|
9747
|
-
$marginBottom: "1.5rem",
|
9748
9991
|
$width: "100%",
|
9749
|
-
|
9992
|
+
$marginBottom: "1.5rem",
|
9993
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
9750
9994
|
import_react_stripe_js2.LinkAuthenticationElement,
|
9751
9995
|
{
|
9752
9996
|
id: "link-authentication-element"
|
@@ -9754,512 +9998,247 @@ var PaymentForm = ({ plan, period, onConfirm }) => {
|
|
9754
9998
|
)
|
9755
9999
|
}
|
9756
10000
|
),
|
9757
|
-
/* @__PURE__ */ (0,
|
9758
|
-
|
9759
|
-
message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: "payment-message", children: message })
|
9760
|
-
] }),
|
9761
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
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)(
|
9762
10003
|
StyledButton,
|
9763
10004
|
{
|
9764
10005
|
id: "submit",
|
9765
10006
|
disabled: isLoading || !stripe || !elements || !data.stripeEmbed?.publishableKey || !data.stripeEmbed?.setupIntentClientSecret || isConfirmed,
|
9766
10007
|
$size: "md",
|
9767
10008
|
$color: "primary",
|
9768
|
-
children: /* @__PURE__ */ (0,
|
10009
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { id: "button-text", children: isLoading ? "Loading" : "Save payment method" })
|
9769
10010
|
}
|
9770
|
-
)
|
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 }) })
|
9771
10013
|
]
|
9772
10014
|
}
|
9773
10015
|
);
|
9774
10016
|
};
|
9775
10017
|
|
9776
10018
|
// src/components/elements/plan-manager/CheckoutDialog.tsx
|
9777
|
-
var
|
9778
|
-
var OverlayHeader = ({
|
9779
|
-
children,
|
9780
|
-
onClose
|
9781
|
-
}) => {
|
9782
|
-
const { setLayout } = useEmbed();
|
9783
|
-
const handleClose = (0, import_react7.useCallback)(() => {
|
9784
|
-
setLayout("portal");
|
9785
|
-
onClose?.();
|
9786
|
-
}, [setLayout, onClose]);
|
9787
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9788
|
-
Flex,
|
9789
|
-
{
|
9790
|
-
$paddingLeft: "2.5rem",
|
9791
|
-
$paddingRight: "2.5rem",
|
9792
|
-
$padding: ".75rem 2.5rem",
|
9793
|
-
$flexDirection: "row",
|
9794
|
-
$justifyContent: "space-between",
|
9795
|
-
$alignItems: "center",
|
9796
|
-
$borderBottom: "1px solid #DEDEDE",
|
9797
|
-
$gap: "1rem",
|
9798
|
-
$backgroundColor: "#FFFFFF",
|
9799
|
-
$borderRadius: ".5rem .5rem 0 0",
|
9800
|
-
children: [
|
9801
|
-
children,
|
9802
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $cursor: "pointer", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "close", style: { fontSize: 36, color: "#B8B8B8" } }) }) })
|
9803
|
-
]
|
9804
|
-
}
|
9805
|
-
);
|
9806
|
-
};
|
9807
|
-
var OverlayWrapper = ({
|
9808
|
-
children,
|
9809
|
-
size = "lg",
|
9810
|
-
onClose
|
9811
|
-
}) => {
|
9812
|
-
const { setLayout } = useEmbed();
|
9813
|
-
const ref = (0, import_react7.useRef)(null);
|
9814
|
-
const sizeWidthMap = {
|
9815
|
-
md: "700px",
|
9816
|
-
lg: "75%"
|
9817
|
-
};
|
9818
|
-
const sizeHeighthMap = {
|
9819
|
-
md: "auto",
|
9820
|
-
lg: "75%"
|
9821
|
-
};
|
9822
|
-
const sizeMaxWidthMap = {
|
9823
|
-
md: "auto",
|
9824
|
-
lg: "1140px"
|
9825
|
-
};
|
9826
|
-
const handleClose = (0, import_react7.useCallback)(() => {
|
9827
|
-
setLayout("portal");
|
9828
|
-
onClose?.();
|
9829
|
-
}, [setLayout, onClose]);
|
9830
|
-
(0, import_react7.useEffect)(() => {
|
9831
|
-
ref.current?.focus();
|
9832
|
-
}, []);
|
9833
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9834
|
-
Box,
|
9835
|
-
{
|
9836
|
-
ref,
|
9837
|
-
tabIndex: 0,
|
9838
|
-
onClick: (event) => {
|
9839
|
-
if (event.target === event.currentTarget) {
|
9840
|
-
handleClose();
|
9841
|
-
}
|
9842
|
-
},
|
9843
|
-
onKeyDown: (event) => {
|
9844
|
-
if (event.key === "Escape") {
|
9845
|
-
handleClose();
|
9846
|
-
}
|
9847
|
-
},
|
9848
|
-
$position: "absolute",
|
9849
|
-
$top: "50%",
|
9850
|
-
$left: "50%",
|
9851
|
-
$zIndex: "999999",
|
9852
|
-
$transform: "translate(-50%, -50%)",
|
9853
|
-
$width: "100%",
|
9854
|
-
$height: "100%",
|
9855
|
-
$backgroundColor: "#D9D9D9",
|
9856
|
-
$overflow: "hidden",
|
9857
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9858
|
-
Flex,
|
9859
|
-
{
|
9860
|
-
$position: "relative",
|
9861
|
-
$top: "50%",
|
9862
|
-
$left: "50%",
|
9863
|
-
$transform: "translate(-50%, -50%)",
|
9864
|
-
$flexDirection: "column",
|
9865
|
-
$maxWidth: sizeMaxWidthMap[size],
|
9866
|
-
$width: sizeWidthMap[size],
|
9867
|
-
$height: sizeHeighthMap[size],
|
9868
|
-
$backgroundColor: "#FBFBFB",
|
9869
|
-
$borderBottom: "1px solid #DEDEDE",
|
9870
|
-
$borderRadius: "8px",
|
9871
|
-
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
9872
|
-
id: "select-plan-dialog",
|
9873
|
-
role: "dialog",
|
9874
|
-
"aria-labelledby": "select-plan-dialog-label",
|
9875
|
-
"aria-modal": "true",
|
9876
|
-
children
|
9877
|
-
}
|
9878
|
-
)
|
9879
|
-
}
|
9880
|
-
);
|
9881
|
-
};
|
9882
|
-
var OverlaySideBar = ({
|
9883
|
-
pricePeriod,
|
9884
|
-
setPricePeriod,
|
9885
|
-
checkoutStage,
|
9886
|
-
setCheckoutStage,
|
9887
|
-
currentPlan,
|
9888
|
-
selectedPlan,
|
9889
|
-
paymentMethodId
|
9890
|
-
}) => {
|
9891
|
-
const { api } = useEmbed();
|
9892
|
-
const savingsPercentage = (0, import_react7.useMemo)(() => {
|
9893
|
-
if (selectedPlan && pricePeriod === "month") {
|
9894
|
-
const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
|
9895
|
-
const yearly = selectedPlan?.yearlyPrice?.price || 0;
|
9896
|
-
return Math.round((monthly - yearly) / monthly * 1e4) / 100;
|
9897
|
-
}
|
9898
|
-
return 0;
|
9899
|
-
}, [selectedPlan, pricePeriod]);
|
9900
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9901
|
-
Flex,
|
9902
|
-
{
|
9903
|
-
$flexDirection: "column",
|
9904
|
-
$background: "white",
|
9905
|
-
$borderRadius: "0 0 0.5rem",
|
9906
|
-
$maxWidth: "275px",
|
9907
|
-
$height: "100%",
|
9908
|
-
$boxShadow: "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A;",
|
9909
|
-
children: [
|
9910
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9911
|
-
Flex,
|
9912
|
-
{
|
9913
|
-
$flexDirection: "column",
|
9914
|
-
$position: "relative",
|
9915
|
-
$gap: "1rem",
|
9916
|
-
$width: "100%",
|
9917
|
-
$height: "auto",
|
9918
|
-
$padding: "1.5rem",
|
9919
|
-
$borderBottom: "1px solid #DEDEDE",
|
9920
|
-
children: [
|
9921
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $flexDirection: "row", $justifyContent: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { $size: 20, $weight: 600, children: "Subscription" }) }),
|
9922
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9923
|
-
Flex,
|
9924
|
-
{
|
9925
|
-
$flexDirection: "row",
|
9926
|
-
$border: "1px solid #D9D9D9",
|
9927
|
-
$borderRadius: "40px",
|
9928
|
-
$fontSize: "12px",
|
9929
|
-
$textAlign: "center",
|
9930
|
-
$cursor: "pointer",
|
9931
|
-
children: [
|
9932
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9933
|
-
Box,
|
9934
|
-
{
|
9935
|
-
onClick: () => setPricePeriod("month"),
|
9936
|
-
$padding: ".25rem .5rem",
|
9937
|
-
$flex: "1",
|
9938
|
-
$fontWeight: pricePeriod === "month" ? "600" : "400",
|
9939
|
-
$backgroundColor: pricePeriod === "month" ? "#DDDDDD" : "white",
|
9940
|
-
$borderRadius: "40px",
|
9941
|
-
children: "Billed monthly"
|
9942
|
-
}
|
9943
|
-
),
|
9944
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
9945
|
-
Box,
|
9946
|
-
{
|
9947
|
-
onClick: () => setPricePeriod("year"),
|
9948
|
-
$padding: ".25rem .5rem",
|
9949
|
-
$flex: "1",
|
9950
|
-
$fontWeight: pricePeriod === "year" ? "600" : "400",
|
9951
|
-
$backgroundColor: pricePeriod === "year" ? "#DDDDDD" : "white",
|
9952
|
-
$borderRadius: "40px",
|
9953
|
-
children: "Billed yearly"
|
9954
|
-
}
|
9955
|
-
)
|
9956
|
-
]
|
9957
|
-
}
|
9958
|
-
),
|
9959
|
-
savingsPercentage > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "11px", $color: "#194BFB", children: [
|
9960
|
-
"Save up to ",
|
9961
|
-
savingsPercentage,
|
9962
|
-
"% with yearly billing"
|
9963
|
-
] })
|
9964
|
-
]
|
9965
|
-
}
|
9966
|
-
),
|
9967
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9968
|
-
Flex,
|
9969
|
-
{
|
9970
|
-
$flexDirection: "column",
|
9971
|
-
$position: "relative",
|
9972
|
-
$gap: "1rem",
|
9973
|
-
$width: "100%",
|
9974
|
-
$height: "auto",
|
9975
|
-
$padding: "1.5rem",
|
9976
|
-
$flex: "1",
|
9977
|
-
$borderBottom: "1px solid #DEDEDE",
|
9978
|
-
children: [
|
9979
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "14px", $color: "#5D5D5D", children: "Plan" }),
|
9980
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9981
|
-
Flex,
|
9982
|
-
{
|
9983
|
-
$flexDirection: "column",
|
9984
|
-
$fontSize: "14px",
|
9985
|
-
$color: "#5D5D5D",
|
9986
|
-
$gap: ".5rem",
|
9987
|
-
children: [
|
9988
|
-
currentPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
9989
|
-
Flex,
|
9990
|
-
{
|
9991
|
-
$flexDirection: "row",
|
9992
|
-
$alignItems: "center",
|
9993
|
-
$justifyContent: "space-between",
|
9994
|
-
$fontSize: "14px",
|
9995
|
-
$color: "#5D5D5D",
|
9996
|
-
children: [
|
9997
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#5D5D5D", children: currentPlan.name }),
|
9998
|
-
typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
|
9999
|
-
formatCurrency(currentPlan.planPrice),
|
10000
|
-
"/",
|
10001
|
-
currentPlan.planPeriod
|
10002
|
-
] })
|
10003
|
-
]
|
10004
|
-
}
|
10005
|
-
),
|
10006
|
-
selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
10007
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
10008
|
-
Box,
|
10009
|
-
{
|
10010
|
-
$width: "100%",
|
10011
|
-
$textAlign: "left",
|
10012
|
-
$opacity: "50%",
|
10013
|
-
$marginBottom: "-.25rem",
|
10014
|
-
$marginTop: "-.25rem",
|
10015
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
10016
|
-
Icon2,
|
10017
|
-
{
|
10018
|
-
name: "arrow-down",
|
10019
|
-
style: {
|
10020
|
-
display: "inline-block"
|
10021
|
-
}
|
10022
|
-
}
|
10023
|
-
)
|
10024
|
-
}
|
10025
|
-
),
|
10026
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
10027
|
-
Flex,
|
10028
|
-
{
|
10029
|
-
$flexDirection: "row",
|
10030
|
-
$alignItems: "center",
|
10031
|
-
$justifyContent: "space-between",
|
10032
|
-
$fontSize: "14px",
|
10033
|
-
$color: "#5D5D5D",
|
10034
|
-
children: [
|
10035
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Flex, { $fontSize: "14px", $color: "#000000", $fontWeight: "600", children: selectedPlan.name }),
|
10036
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $fontSize: "12px", $color: "#000000", children: [
|
10037
|
-
formatCurrency(
|
10038
|
-
(pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
|
10039
|
-
),
|
10040
|
-
"/",
|
10041
|
-
pricePeriod
|
10042
|
-
] })
|
10043
|
-
]
|
10044
|
-
}
|
10045
|
-
)
|
10046
|
-
] })
|
10047
|
-
]
|
10048
|
-
}
|
10049
|
-
)
|
10050
|
-
]
|
10051
|
-
}
|
10052
|
-
),
|
10053
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
10054
|
-
Flex,
|
10055
|
-
{
|
10056
|
-
$flexDirection: "column",
|
10057
|
-
$position: "relative",
|
10058
|
-
$gap: ".75rem",
|
10059
|
-
$width: "100%",
|
10060
|
-
$height: "auto",
|
10061
|
-
$padding: "1.5rem",
|
10062
|
-
children: [
|
10063
|
-
selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
10064
|
-
Flex,
|
10065
|
-
{
|
10066
|
-
$fontSize: "12px",
|
10067
|
-
$color: "#5D5D5D",
|
10068
|
-
$justifyContent: "space-between",
|
10069
|
-
children: [
|
10070
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: [
|
10071
|
-
"Monthly total:",
|
10072
|
-
" "
|
10073
|
-
] }),
|
10074
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { $fontSize: "12px", $color: "#000000", children: [
|
10075
|
-
formatCurrency(
|
10076
|
-
(pricePeriod === "month" ? selectedPlan.monthlyPrice : selectedPlan.yearlyPrice)?.price ?? 0
|
10077
|
-
),
|
10078
|
-
"/",
|
10079
|
-
pricePeriod
|
10080
|
-
] })
|
10081
|
-
]
|
10082
|
-
}
|
10083
|
-
),
|
10084
|
-
checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
10085
|
-
StyledButton,
|
10086
|
-
{
|
10087
|
-
$size: "sm",
|
10088
|
-
onClick: () => {
|
10089
|
-
setCheckoutStage("checkout");
|
10090
|
-
},
|
10091
|
-
...!selectedPlan && { disabled: true },
|
10092
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", $justifyContent: "center", children: [
|
10093
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "Next: Checkout" }),
|
10094
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon2, { name: "arrow-right" })
|
10095
|
-
] })
|
10096
|
-
}
|
10097
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
10098
|
-
StyledButton,
|
10099
|
-
{
|
10100
|
-
disabled: !api || !selectedPlan || selectedPlan?.id === currentPlan?.id || !paymentMethodId,
|
10101
|
-
onClick: async () => {
|
10102
|
-
const priceId = (pricePeriod === "month" ? selectedPlan?.monthlyPrice : selectedPlan?.yearlyPrice)?.id;
|
10103
|
-
if (!api || !selectedPlan || !priceId || !paymentMethodId) {
|
10104
|
-
return;
|
10105
|
-
}
|
10106
|
-
await api.checkout({
|
10107
|
-
changeSubscriptionRequestBody: {
|
10108
|
-
newPlanId: selectedPlan.id,
|
10109
|
-
newPriceId: priceId,
|
10110
|
-
paymentMethodId
|
10111
|
-
}
|
10112
|
-
});
|
10113
|
-
},
|
10114
|
-
$size: "md",
|
10115
|
-
children: "Pay now"
|
10116
|
-
}
|
10117
|
-
),
|
10118
|
-
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Discounts & credits applied at checkout" })
|
10119
|
-
]
|
10120
|
-
}
|
10121
|
-
)
|
10122
|
-
]
|
10123
|
-
}
|
10124
|
-
);
|
10125
|
-
};
|
10019
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
10126
10020
|
var CheckoutDialog = () => {
|
10127
|
-
const [checkoutStage, setCheckoutStage] = (0,
|
10021
|
+
const [checkoutStage, setCheckoutStage] = (0, import_react9.useState)(
|
10128
10022
|
"plan"
|
10129
10023
|
);
|
10130
|
-
const [planPeriod, setPlanPeriod] = (0,
|
10131
|
-
const [selectedPlan, setSelectedPlan] = (0,
|
10132
|
-
const [paymentMethodId, setPaymentMethodId] = (0,
|
10133
|
-
const
|
10134
|
-
const
|
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)();
|
10030
|
+
const theme = nt();
|
10031
|
+
const { api, data, hydrate, setLayout } = useEmbed();
|
10032
|
+
const { currentPlan, availablePlans } = (0, import_react9.useMemo)(() => {
|
10135
10033
|
return {
|
10136
10034
|
currentPlan: data.company?.plan,
|
10137
10035
|
availablePlans: data.activePlans
|
10138
10036
|
};
|
10139
10037
|
}, [data.company, data.activePlans]);
|
10140
|
-
|
10141
|
-
|
10142
|
-
|
10143
|
-
|
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)(() => {
|
10047
|
+
return hexToHSL(theme.card.background).l > 50;
|
10048
|
+
}, [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)(
|
10144
10058
|
Box,
|
10145
10059
|
{
|
10146
|
-
$width:
|
10147
|
-
$height:
|
10148
|
-
$
|
10149
|
-
$
|
10150
|
-
$
|
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"
|
10151
10066
|
}
|
10152
|
-
) : /* @__PURE__ */ (0,
|
10067
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10153
10068
|
IconRound,
|
10154
10069
|
{
|
10155
10070
|
name: "check",
|
10071
|
+
colors: [
|
10072
|
+
theme.card.background,
|
10073
|
+
isLightBackground ? "hsla(0, 0%, 0%, 0.125)" : "hsla(0, 0%, 100%, 0.25)"
|
10074
|
+
],
|
10156
10075
|
style: {
|
10157
|
-
|
10158
|
-
|
10159
|
-
|
10160
|
-
width: "1rem",
|
10161
|
-
height: "1rem"
|
10076
|
+
fontSize: `${16 / TEXT_BASE_SIZE}rem`,
|
10077
|
+
width: `${20 / TEXT_BASE_SIZE}rem`,
|
10078
|
+
height: `${20 / TEXT_BASE_SIZE}rem`
|
10162
10079
|
}
|
10163
10080
|
}
|
10164
10081
|
),
|
10165
|
-
/* @__PURE__ */ (0,
|
10166
|
-
|
10082
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10083
|
+
Box,
|
10167
10084
|
{
|
10168
10085
|
tabIndex: 0,
|
10169
|
-
...checkoutStage
|
10170
|
-
|
10171
|
-
|
10172
|
-
|
10173
|
-
} : {
|
10174
|
-
style: {
|
10175
|
-
cursor: "pointer"
|
10176
|
-
},
|
10177
|
-
onClick: () => setCheckoutStage("plan")
|
10086
|
+
...checkoutStage !== "plan" && {
|
10087
|
+
onClick: () => setCheckoutStage("plan"),
|
10088
|
+
$opacity: "0.6375",
|
10089
|
+
$cursor: "pointer"
|
10178
10090
|
},
|
10179
|
-
children:
|
10180
|
-
|
10181
|
-
|
10182
|
-
|
10183
|
-
|
10184
|
-
|
10185
|
-
|
10186
|
-
|
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
|
+
)
|
10187
10101
|
}
|
10188
10102
|
)
|
10189
10103
|
] }),
|
10190
|
-
/* @__PURE__ */ (0,
|
10191
|
-
|
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)(
|
10192
10116
|
Box,
|
10193
10117
|
{
|
10194
|
-
$width:
|
10195
|
-
$height:
|
10196
|
-
$
|
10197
|
-
$
|
10198
|
-
$
|
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"
|
10199
10124
|
}
|
10200
10125
|
),
|
10201
|
-
/* @__PURE__ */ (0,
|
10202
|
-
|
10126
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10127
|
+
Box,
|
10203
10128
|
{
|
10204
10129
|
tabIndex: 0,
|
10205
|
-
...checkoutStage
|
10206
|
-
|
10207
|
-
fontWeight: "700"
|
10208
|
-
}
|
10130
|
+
...checkoutStage !== "checkout" && {
|
10131
|
+
$opacity: "0.6375"
|
10209
10132
|
},
|
10210
|
-
children:
|
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
|
+
)
|
10211
10143
|
}
|
10212
10144
|
)
|
10213
10145
|
] })
|
10214
|
-
] }) }),
|
10215
|
-
/* @__PURE__ */ (0,
|
10216
|
-
|
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)(
|
10217
10186
|
Flex,
|
10218
10187
|
{
|
10219
10188
|
$flexDirection: "column",
|
10189
|
+
$flexGrow: "1",
|
10220
10190
|
$gap: "1rem",
|
10221
10191
|
$padding: "2rem 2.5rem 2rem 2.5rem",
|
10222
|
-
$backgroundColor: "
|
10223
|
-
$borderRadius: "0 0.5rem 0",
|
10192
|
+
$backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.025)" : "hsla(0, 0%, 100%, 0.025)",
|
10224
10193
|
$flex: "1",
|
10225
|
-
$
|
10194
|
+
$overflow: "auto",
|
10226
10195
|
children: [
|
10227
|
-
checkoutStage === "plan" && /* @__PURE__ */ (0,
|
10228
|
-
/* @__PURE__ */ (0,
|
10229
|
-
/* @__PURE__ */ (0,
|
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)(
|
10230
10199
|
Text,
|
10231
10200
|
{
|
10232
|
-
as: "
|
10201
|
+
as: "h3",
|
10233
10202
|
id: "select-plan-dialog-label",
|
10234
|
-
$
|
10235
|
-
$
|
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",
|
10236
10208
|
children: "Select plan"
|
10237
10209
|
}
|
10238
10210
|
),
|
10239
|
-
/* @__PURE__ */ (0,
|
10211
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10240
10212
|
Text,
|
10241
10213
|
{
|
10242
10214
|
as: "p",
|
10243
10215
|
id: "select-plan-dialog-description",
|
10244
|
-
$
|
10245
|
-
$
|
10216
|
+
$font: theme.typography.text.fontFamily,
|
10217
|
+
$size: theme.typography.text.fontSize,
|
10218
|
+
$weight: theme.typography.text.fontWeight,
|
10219
|
+
$color: theme.typography.text.color,
|
10246
10220
|
children: "Choose your base plan"
|
10247
10221
|
}
|
10248
10222
|
)
|
10249
10223
|
] }),
|
10250
|
-
/* @__PURE__ */ (0,
|
10251
|
-
return /* @__PURE__ */ (0,
|
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)(
|
10252
10226
|
Flex,
|
10253
10227
|
{
|
10254
|
-
$height: "100%",
|
10255
10228
|
$flexDirection: "column",
|
10256
|
-
$
|
10257
|
-
$
|
10258
|
-
$
|
10259
|
-
$
|
10260
|
-
$
|
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
|
+
},
|
10261
10240
|
children: [
|
10262
|
-
/* @__PURE__ */ (0,
|
10241
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
10263
10242
|
Flex,
|
10264
10243
|
{
|
10265
10244
|
$flexDirection: "column",
|
@@ -10267,38 +10246,40 @@ var CheckoutDialog = () => {
|
|
10267
10246
|
$gap: "1rem",
|
10268
10247
|
$width: "100%",
|
10269
10248
|
$height: "auto",
|
10270
|
-
$padding:
|
10271
|
-
$
|
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)",
|
10272
10253
|
children: [
|
10273
|
-
/* @__PURE__ */ (0,
|
10274
|
-
/* @__PURE__ */ (0,
|
10275
|
-
/* @__PURE__ */ (0,
|
10276
|
-
/* @__PURE__ */ (0,
|
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(
|
10277
10258
|
(planPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0
|
10278
10259
|
) }),
|
10279
|
-
/* @__PURE__ */ (0,
|
10260
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { $display: "inline-block", $fontSize: "0.75rem", children: [
|
10280
10261
|
"/",
|
10281
10262
|
planPeriod
|
10282
10263
|
] })
|
10283
10264
|
] }),
|
10284
|
-
(plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0,
|
10265
|
+
(plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10285
10266
|
Flex,
|
10286
10267
|
{
|
10287
10268
|
$position: "absolute",
|
10288
10269
|
$right: "1rem",
|
10289
10270
|
$top: "1rem",
|
10290
|
-
$fontSize: ".625rem",
|
10291
|
-
$color: "
|
10292
|
-
$backgroundColor:
|
10293
|
-
$borderRadius: "
|
10294
|
-
$padding: ".125rem .85rem",
|
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",
|
10295
10276
|
children: "Current plan"
|
10296
10277
|
}
|
10297
10278
|
)
|
10298
10279
|
]
|
10299
10280
|
}
|
10300
10281
|
),
|
10301
|
-
/* @__PURE__ */ (0,
|
10282
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10302
10283
|
Flex,
|
10303
10284
|
{
|
10304
10285
|
$flexDirection: "column",
|
@@ -10309,21 +10290,32 @@ var CheckoutDialog = () => {
|
|
10309
10290
|
$height: "auto",
|
10310
10291
|
$padding: "1.5rem",
|
10311
10292
|
children: plan.features.map((feature) => {
|
10312
|
-
return /* @__PURE__ */ (0,
|
10313
|
-
|
10314
|
-
|
10315
|
-
|
10316
|
-
|
10317
|
-
|
10318
|
-
|
10319
|
-
|
10320
|
-
|
10321
|
-
|
10322
|
-
|
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
|
+
);
|
10323
10315
|
})
|
10324
10316
|
}
|
10325
10317
|
),
|
10326
|
-
/* @__PURE__ */ (0,
|
10318
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
10327
10319
|
Flex,
|
10328
10320
|
{
|
10329
10321
|
$flexDirection: "column",
|
@@ -10333,7 +10325,7 @@ var CheckoutDialog = () => {
|
|
10333
10325
|
$height: "auto",
|
10334
10326
|
$padding: "1.5rem",
|
10335
10327
|
children: [
|
10336
|
-
plan.id === selectedPlan?.id && /* @__PURE__ */ (0,
|
10328
|
+
plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
10337
10329
|
Flex,
|
10338
10330
|
{
|
10339
10331
|
$justifyContent: "center",
|
@@ -10342,39 +10334,38 @@ var CheckoutDialog = () => {
|
|
10342
10334
|
$fontSize: "0.9375rem",
|
10343
10335
|
$padding: "0.625rem 0",
|
10344
10336
|
children: [
|
10345
|
-
/* @__PURE__ */ (0,
|
10337
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10346
10338
|
Icon2,
|
10347
10339
|
{
|
10348
10340
|
name: "check-rounded",
|
10349
10341
|
style: {
|
10350
10342
|
fontSize: 20,
|
10351
10343
|
lineHeight: "1",
|
10352
|
-
color:
|
10344
|
+
color: theme.primary
|
10353
10345
|
}
|
10354
10346
|
}
|
10355
10347
|
),
|
10356
|
-
/* @__PURE__ */ (0,
|
10357
|
-
|
10348
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10349
|
+
Text,
|
10358
10350
|
{
|
10359
|
-
|
10360
|
-
|
10361
|
-
lineHeight: "1.4"
|
10362
|
-
},
|
10351
|
+
$lineHeight: "1.4",
|
10352
|
+
$color: theme.typography.text.color,
|
10363
10353
|
children: "Selected"
|
10364
10354
|
}
|
10365
10355
|
)
|
10366
10356
|
]
|
10367
10357
|
}
|
10368
10358
|
),
|
10369
|
-
!(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0,
|
10359
|
+
!(plan.current || plan.id === currentPlan?.id) && plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10370
10360
|
StyledButton,
|
10371
10361
|
{
|
10362
|
+
disabled: plan.valid === false,
|
10363
|
+
...plan.valid === true && {
|
10364
|
+
onClick: () => setSelectedPlan(plan)
|
10365
|
+
},
|
10372
10366
|
$size: "sm",
|
10373
10367
|
$color: "primary",
|
10374
10368
|
$variant: "outline",
|
10375
|
-
onClick: () => {
|
10376
|
-
setSelectedPlan(plan);
|
10377
|
-
},
|
10378
10369
|
children: "Select"
|
10379
10370
|
}
|
10380
10371
|
)
|
@@ -10387,7 +10378,7 @@ var CheckoutDialog = () => {
|
|
10387
10378
|
);
|
10388
10379
|
}) })
|
10389
10380
|
] }),
|
10390
|
-
selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0,
|
10381
|
+
selectedPlan && checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10391
10382
|
PaymentForm,
|
10392
10383
|
{
|
10393
10384
|
plan: selectedPlan,
|
@@ -10400,16 +10391,345 @@ var CheckoutDialog = () => {
|
|
10400
10391
|
]
|
10401
10392
|
}
|
10402
10393
|
),
|
10403
|
-
/* @__PURE__ */ (0,
|
10404
|
-
|
10394
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
10395
|
+
Flex,
|
10405
10396
|
{
|
10406
|
-
|
10407
|
-
|
10408
|
-
|
10409
|
-
|
10410
|
-
|
10411
|
-
|
10412
|
-
|
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,
|
10438
|
+
{
|
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)"
|
10446
|
+
},
|
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
|
+
)
|
10458
|
+
}
|
10459
|
+
),
|
10460
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
10461
|
+
Flex,
|
10462
|
+
{
|
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)"
|
10470
|
+
},
|
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
|
+
)
|
10482
|
+
}
|
10483
|
+
)
|
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
|
+
]
|
10730
|
+
}
|
10731
|
+
)
|
10732
|
+
]
|
10413
10733
|
}
|
10414
10734
|
)
|
10415
10735
|
] })
|
@@ -10417,7 +10737,7 @@ var CheckoutDialog = () => {
|
|
10417
10737
|
};
|
10418
10738
|
|
10419
10739
|
// src/components/elements/plan-manager/PlanManager.tsx
|
10420
|
-
var
|
10740
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
10421
10741
|
var resolveDesignProps = (props) => {
|
10422
10742
|
return {
|
10423
10743
|
header: {
|
@@ -10441,28 +10761,29 @@ var resolveDesignProps = (props) => {
|
|
10441
10761
|
},
|
10442
10762
|
callToAction: {
|
10443
10763
|
isVisible: props.callToAction?.isVisible ?? true,
|
10444
|
-
buttonSize: props.callToAction?.buttonSize ?? "
|
10764
|
+
buttonSize: props.callToAction?.buttonSize ?? "lg",
|
10445
10765
|
buttonStyle: props.callToAction?.buttonStyle ?? "primary"
|
10446
10766
|
}
|
10447
10767
|
};
|
10448
10768
|
};
|
10449
|
-
var PlanManager = (0,
|
10769
|
+
var PlanManager = (0, import_react10.forwardRef)(({ children, className, portal, ...rest }, ref) => {
|
10450
10770
|
const props = resolveDesignProps(rest);
|
10451
|
-
const
|
10452
|
-
const {
|
10771
|
+
const theme = nt();
|
10772
|
+
const { data, layout, stripe, setLayout } = useEmbed();
|
10773
|
+
const { currentPlan, canChangePlan } = (0, import_react10.useMemo)(() => {
|
10453
10774
|
return {
|
10454
10775
|
currentPlan: data.company?.plan,
|
10455
10776
|
canChangePlan: stripe !== null
|
10456
10777
|
};
|
10457
10778
|
}, [data.company, stripe]);
|
10458
|
-
return /* @__PURE__ */ (0,
|
10459
|
-
/* @__PURE__ */ (0,
|
10779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className, children: [
|
10780
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
10460
10781
|
Flex,
|
10461
10782
|
{
|
10462
10783
|
$flexDirection: "column",
|
10463
10784
|
$gap: "0.75rem",
|
10464
10785
|
...canChangePlan && { $margin: "0 0 0.5rem" },
|
10465
|
-
children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0,
|
10786
|
+
children: props.header.isVisible && currentPlan && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
10466
10787
|
Flex,
|
10467
10788
|
{
|
10468
10789
|
$justifyContent: "space-between",
|
@@ -10470,36 +10791,36 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
|
|
10470
10791
|
$width: "100%",
|
10471
10792
|
...canChangePlan && { $margin: "0 0 1.5rem" },
|
10472
10793
|
children: [
|
10473
|
-
/* @__PURE__ */ (0,
|
10474
|
-
/* @__PURE__ */ (0,
|
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)(
|
10475
10796
|
Text,
|
10476
10797
|
{
|
10477
|
-
$font:
|
10478
|
-
$size:
|
10479
|
-
$weight:
|
10480
|
-
$color:
|
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,
|
10481
10802
|
$lineHeight: 1,
|
10482
10803
|
children: currentPlan.name
|
10483
10804
|
}
|
10484
10805
|
) }),
|
10485
|
-
props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0,
|
10806
|
+
props.header.description.isVisible && currentPlan.description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
10486
10807
|
Text,
|
10487
10808
|
{
|
10488
|
-
$font:
|
10489
|
-
$size:
|
10490
|
-
$weight:
|
10491
|
-
$color:
|
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,
|
10492
10813
|
children: currentPlan.description
|
10493
10814
|
}
|
10494
10815
|
)
|
10495
10816
|
] }),
|
10496
|
-
props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0,
|
10817
|
+
props.header.price.isVisible && typeof currentPlan.planPrice === "number" && currentPlan.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
10497
10818
|
Text,
|
10498
10819
|
{
|
10499
|
-
$font:
|
10500
|
-
$size:
|
10501
|
-
$weight:
|
10502
|
-
$color:
|
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,
|
10503
10824
|
children: [
|
10504
10825
|
formatCurrency(currentPlan.planPrice),
|
10505
10826
|
"/",
|
@@ -10512,7 +10833,7 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
|
|
10512
10833
|
)
|
10513
10834
|
}
|
10514
10835
|
),
|
10515
|
-
canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0,
|
10836
|
+
canChangePlan && props.callToAction.isVisible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
10516
10837
|
StyledButton,
|
10517
10838
|
{
|
10518
10839
|
onClick: () => {
|
@@ -10520,24 +10841,16 @@ var PlanManager = (0, import_react8.forwardRef)(({ children, className, portal,
|
|
10520
10841
|
},
|
10521
10842
|
$size: props.callToAction.buttonSize,
|
10522
10843
|
$color: props.callToAction.buttonStyle,
|
10523
|
-
children:
|
10524
|
-
Text,
|
10525
|
-
{
|
10526
|
-
$font: settings.theme.typography.text.fontFamily,
|
10527
|
-
$size: settings.theme.typography.text.fontSize,
|
10528
|
-
$weight: settings.theme.typography.text.fontWeight,
|
10529
|
-
children: "Change Plan"
|
10530
|
-
}
|
10531
|
-
)
|
10844
|
+
children: "Change Plan"
|
10532
10845
|
}
|
10533
10846
|
),
|
10534
|
-
canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0,
|
10847
|
+
canChangePlan && layout === "checkout" && (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckoutDialog, {}), portal || document.body)
|
10535
10848
|
] });
|
10536
10849
|
});
|
10537
10850
|
|
10538
10851
|
// src/components/elements/included-features/IncludedFeatures.tsx
|
10539
|
-
var
|
10540
|
-
var
|
10852
|
+
var import_react11 = require("react");
|
10853
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
10541
10854
|
function resolveDesignProps2(props) {
|
10542
10855
|
return {
|
10543
10856
|
header: {
|
@@ -10547,12 +10860,12 @@ function resolveDesignProps2(props) {
|
|
10547
10860
|
},
|
10548
10861
|
icons: {
|
10549
10862
|
isVisible: props.icons?.isVisible ?? true,
|
10550
|
-
fontStyle: props.icons?.fontStyle ?? "
|
10863
|
+
fontStyle: props.icons?.fontStyle ?? "heading5",
|
10551
10864
|
style: props.icons?.style ?? "light"
|
10552
10865
|
},
|
10553
10866
|
entitlement: {
|
10554
10867
|
isVisible: props.entitlement?.isVisible ?? true,
|
10555
|
-
fontStyle: props.entitlement?.fontStyle ?? "
|
10868
|
+
fontStyle: props.entitlement?.fontStyle ?? "text"
|
10556
10869
|
},
|
10557
10870
|
usage: {
|
10558
10871
|
isVisible: props.usage?.isVisible ?? true,
|
@@ -10560,10 +10873,11 @@ function resolveDesignProps2(props) {
|
|
10560
10873
|
}
|
10561
10874
|
};
|
10562
10875
|
}
|
10563
|
-
var IncludedFeatures = (0,
|
10876
|
+
var IncludedFeatures = (0, import_react11.forwardRef)(({ className, ...rest }, ref) => {
|
10564
10877
|
const props = resolveDesignProps2(rest);
|
10565
|
-
const
|
10566
|
-
const
|
10878
|
+
const theme = nt();
|
10879
|
+
const { data } = useEmbed();
|
10880
|
+
const features = (0, import_react11.useMemo)(() => {
|
10567
10881
|
return (data.featureUsage?.features || []).map(
|
10568
10882
|
({
|
10569
10883
|
access,
|
@@ -10590,14 +10904,17 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
|
|
10590
10904
|
}
|
10591
10905
|
);
|
10592
10906
|
}, [data.featureUsage]);
|
10593
|
-
|
10594
|
-
|
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)(
|
10595
10912
|
Text,
|
10596
10913
|
{
|
10597
|
-
$font:
|
10598
|
-
$size:
|
10599
|
-
$weight:
|
10600
|
-
$color:
|
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,
|
10601
10918
|
children: props.header.text
|
10602
10919
|
}
|
10603
10920
|
) }),
|
@@ -10608,7 +10925,7 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
|
|
10608
10925
|
}
|
10609
10926
|
return [
|
10610
10927
|
...acc,
|
10611
|
-
/* @__PURE__ */ (0,
|
10928
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
10612
10929
|
Flex,
|
10613
10930
|
{
|
10614
10931
|
$flexWrap: "wrap",
|
@@ -10616,49 +10933,51 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
|
|
10616
10933
|
$alignItems: "center",
|
10617
10934
|
$gap: "1rem",
|
10618
10935
|
children: [
|
10619
|
-
/* @__PURE__ */ (0,
|
10620
|
-
props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0,
|
10936
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Flex, { $gap: "1rem", children: [
|
10937
|
+
props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
10621
10938
|
IconRound,
|
10622
10939
|
{
|
10623
10940
|
name: feature.icon,
|
10624
10941
|
size: "sm",
|
10625
10942
|
colors: [
|
10626
|
-
|
10627
|
-
|
10943
|
+
theme.primary,
|
10944
|
+
isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
|
10628
10945
|
]
|
10629
10946
|
}
|
10630
10947
|
),
|
10631
|
-
feature?.name && /* @__PURE__ */ (0,
|
10948
|
+
feature?.name && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
10632
10949
|
Text,
|
10633
10950
|
{
|
10634
|
-
$font:
|
10635
|
-
$size:
|
10636
|
-
$weight:
|
10637
|
-
$color:
|
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,
|
10638
10955
|
children: feature.name
|
10639
10956
|
}
|
10640
10957
|
) })
|
10641
10958
|
] }),
|
10642
|
-
allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0,
|
10643
|
-
props.entitlement.isVisible && /* @__PURE__ */ (0,
|
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)(
|
10644
10961
|
Text,
|
10645
10962
|
{
|
10646
10963
|
as: Box,
|
10647
|
-
$font:
|
10648
|
-
$size:
|
10649
|
-
$weight:
|
10650
|
-
$
|
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,
|
10651
10969
|
children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
|
10652
10970
|
}
|
10653
10971
|
),
|
10654
|
-
props.usage.isVisible && /* @__PURE__ */ (0,
|
10972
|
+
props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
10655
10973
|
Text,
|
10656
10974
|
{
|
10657
10975
|
as: Box,
|
10658
|
-
$font:
|
10659
|
-
$size:
|
10660
|
-
$weight:
|
10661
|
-
$
|
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,
|
10662
10981
|
children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
|
10663
10982
|
}
|
10664
10983
|
)
|
@@ -10675,8 +10994,8 @@ var IncludedFeatures = (0, import_react9.forwardRef)(({ className, ...rest }, re
|
|
10675
10994
|
});
|
10676
10995
|
|
10677
10996
|
// src/components/elements/metered-features/MeteredFeatures.tsx
|
10678
|
-
var
|
10679
|
-
var
|
10997
|
+
var import_react12 = require("react");
|
10998
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
10680
10999
|
function resolveDesignProps3(props) {
|
10681
11000
|
return {
|
10682
11001
|
isVisible: props.isVisible ?? true,
|
@@ -10705,10 +11024,11 @@ function resolveDesignProps3(props) {
|
|
10705
11024
|
}
|
10706
11025
|
};
|
10707
11026
|
}
|
10708
|
-
var MeteredFeatures = (0,
|
11027
|
+
var MeteredFeatures = (0, import_react12.forwardRef)(({ className, ...rest }, ref) => {
|
10709
11028
|
const props = resolveDesignProps3(rest);
|
10710
|
-
const
|
10711
|
-
const
|
11029
|
+
const theme = nt();
|
11030
|
+
const { data } = useEmbed();
|
11031
|
+
const features = (0, import_react12.useMemo)(() => {
|
10712
11032
|
return (data.featureUsage?.features || []).map(
|
10713
11033
|
({
|
10714
11034
|
access,
|
@@ -10735,67 +11055,67 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
|
|
10735
11055
|
}
|
10736
11056
|
);
|
10737
11057
|
}, [data.featureUsage]);
|
10738
|
-
return /* @__PURE__ */ (0,
|
11058
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { ref, className, $flexDirection: "column", $gap: "1.5rem", children: features.reduce(
|
10739
11059
|
(acc, { allocation, allocationType, feature, usage }, index) => {
|
10740
11060
|
if (!props.isVisible || allocationType !== "numeric" || typeof allocation !== "number") {
|
10741
11061
|
return acc;
|
10742
11062
|
}
|
10743
11063
|
return [
|
10744
11064
|
...acc,
|
10745
|
-
/* @__PURE__ */ (0,
|
10746
|
-
props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0,
|
10747
|
-
/* @__PURE__ */ (0,
|
10748
|
-
/* @__PURE__ */ (0,
|
10749
|
-
feature?.name && /* @__PURE__ */ (0,
|
10750
|
-
/* @__PURE__ */ (0,
|
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)(
|
10751
11071
|
Text,
|
10752
11072
|
{
|
10753
11073
|
as: Box,
|
10754
|
-
$font:
|
10755
|
-
$size:
|
10756
|
-
$weight:
|
10757
|
-
$color:
|
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,
|
10758
11078
|
children: feature.name
|
10759
11079
|
}
|
10760
11080
|
),
|
10761
|
-
props.description.isVisible && /* @__PURE__ */ (0,
|
11081
|
+
props.description.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
10762
11082
|
Text,
|
10763
11083
|
{
|
10764
11084
|
as: Box,
|
10765
|
-
$font:
|
10766
|
-
$size:
|
10767
|
-
$weight:
|
10768
|
-
$color:
|
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,
|
10769
11089
|
children: feature.description
|
10770
11090
|
}
|
10771
11091
|
)
|
10772
11092
|
] }),
|
10773
|
-
allocationType === "numeric" && feature?.name && /* @__PURE__ */ (0,
|
10774
|
-
props.allocation.isVisible && /* @__PURE__ */ (0,
|
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)(
|
10775
11095
|
Text,
|
10776
11096
|
{
|
10777
11097
|
as: Box,
|
10778
|
-
$font:
|
10779
|
-
$size:
|
10780
|
-
$weight:
|
10781
|
-
$color:
|
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,
|
10782
11102
|
children: typeof allocation === "number" ? `${allocation} ${feature.name}` : `Unlimited ${feature.name}`
|
10783
11103
|
}
|
10784
11104
|
),
|
10785
|
-
props.usage.isVisible && /* @__PURE__ */ (0,
|
11105
|
+
props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
10786
11106
|
Text,
|
10787
11107
|
{
|
10788
11108
|
as: Box,
|
10789
|
-
$font:
|
10790
|
-
$size:
|
10791
|
-
$weight:
|
10792
|
-
$color:
|
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,
|
10793
11113
|
children: typeof allocation === "number" ? `${usage} of ${allocation} used` : `${usage} used`
|
10794
11114
|
}
|
10795
11115
|
)
|
10796
11116
|
] })
|
10797
11117
|
] }),
|
10798
|
-
typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0,
|
11118
|
+
typeof usage === "number" && typeof allocation === "number" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
10799
11119
|
ProgressBar,
|
10800
11120
|
{
|
10801
11121
|
progress: usage / allocation * 100,
|
@@ -10813,8 +11133,8 @@ var MeteredFeatures = (0, import_react10.forwardRef)(({ className, ...rest }, re
|
|
10813
11133
|
});
|
10814
11134
|
|
10815
11135
|
// src/components/elements/upcoming-bill/UpcomingBill.tsx
|
10816
|
-
var
|
10817
|
-
var
|
11136
|
+
var import_react13 = require("react");
|
11137
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
10818
11138
|
function resolveDesignProps4(props) {
|
10819
11139
|
return {
|
10820
11140
|
header: {
|
@@ -10833,10 +11153,11 @@ function resolveDesignProps4(props) {
|
|
10833
11153
|
}
|
10834
11154
|
};
|
10835
11155
|
}
|
10836
|
-
var UpcomingBill = (0,
|
11156
|
+
var UpcomingBill = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
|
10837
11157
|
const props = resolveDesignProps4(rest);
|
10838
|
-
const
|
10839
|
-
const {
|
11158
|
+
const theme = nt();
|
11159
|
+
const { data, stripe } = useEmbed();
|
11160
|
+
const { upcomingInvoice } = (0, import_react13.useMemo)(() => {
|
10840
11161
|
return {
|
10841
11162
|
upcomingInvoice: {
|
10842
11163
|
...data.upcomingInvoice?.amountDue && {
|
@@ -10851,23 +11172,23 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
|
|
10851
11172
|
}
|
10852
11173
|
};
|
10853
11174
|
}, [data.subscription, data.upcomingInvoice]);
|
10854
|
-
if (!stripe || !
|
11175
|
+
if (!stripe || !upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
|
10855
11176
|
return null;
|
10856
11177
|
}
|
10857
|
-
return /* @__PURE__ */ (0,
|
10858
|
-
props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0,
|
11178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref, className, children: [
|
11179
|
+
props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
10859
11180
|
Flex,
|
10860
11181
|
{
|
10861
11182
|
$justifyContent: "space-between",
|
10862
11183
|
$alignItems: "center",
|
10863
11184
|
$margin: "0 0 0.75rem",
|
10864
|
-
children: /* @__PURE__ */ (0,
|
11185
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
10865
11186
|
Text,
|
10866
11187
|
{
|
10867
|
-
$font:
|
10868
|
-
$size:
|
10869
|
-
$weight:
|
10870
|
-
$color:
|
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,
|
10871
11192
|
children: [
|
10872
11193
|
props.header.prefix,
|
10873
11194
|
" ",
|
@@ -10877,25 +11198,25 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
|
|
10877
11198
|
)
|
10878
11199
|
}
|
10879
11200
|
),
|
10880
|
-
upcomingInvoice.amountDue && /* @__PURE__ */ (0,
|
10881
|
-
props.price.isVisible && /* @__PURE__ */ (0,
|
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)(
|
10882
11203
|
Text,
|
10883
11204
|
{
|
10884
|
-
$font:
|
10885
|
-
$size:
|
10886
|
-
$weight:
|
10887
|
-
$color:
|
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,
|
10888
11209
|
$lineHeight: 1,
|
10889
11210
|
children: formatCurrency(upcomingInvoice.amountDue)
|
10890
11211
|
}
|
10891
11212
|
) }),
|
10892
|
-
/* @__PURE__ */ (0,
|
11213
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { $maxWidth: "10rem", $lineHeight: "1", $textAlign: "right", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
10893
11214
|
Text,
|
10894
11215
|
{
|
10895
|
-
$font:
|
10896
|
-
$size:
|
10897
|
-
$weight:
|
10898
|
-
$color:
|
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,
|
10899
11220
|
children: "Estimated monthly bill."
|
10900
11221
|
}
|
10901
11222
|
) })
|
@@ -10904,9 +11225,9 @@ var UpcomingBill = (0, import_react11.forwardRef)(({ className, ...rest }, ref)
|
|
10904
11225
|
});
|
10905
11226
|
|
10906
11227
|
// src/components/elements/payment-method/PaymentMethod.tsx
|
10907
|
-
var
|
11228
|
+
var import_react14 = require("react");
|
10908
11229
|
var import_react_dom2 = require("react-dom");
|
10909
|
-
var
|
11230
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
10910
11231
|
var resolveDesignProps5 = (props) => {
|
10911
11232
|
return {
|
10912
11233
|
header: {
|
@@ -10918,10 +11239,11 @@ var resolveDesignProps5 = (props) => {
|
|
10918
11239
|
}
|
10919
11240
|
};
|
10920
11241
|
};
|
10921
|
-
var PaymentMethod = (0,
|
11242
|
+
var PaymentMethod = (0, import_react14.forwardRef)(({ children, className, portal, ...rest }, ref) => {
|
10922
11243
|
const props = resolveDesignProps5(rest);
|
10923
|
-
const
|
10924
|
-
const
|
11244
|
+
const theme = nt();
|
11245
|
+
const { data, stripe, layout } = useEmbed();
|
11246
|
+
const paymentMethod = (0, import_react14.useMemo)(() => {
|
10925
11247
|
const { cardLast4, cardExpMonth, cardExpYear } = data.subscription?.paymentMethod || {};
|
10926
11248
|
let monthsToExpiration;
|
10927
11249
|
if (typeof cardExpYear === "number" && typeof cardExpMonth === "number") {
|
@@ -10937,31 +11259,34 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
10937
11259
|
monthsToExpiration
|
10938
11260
|
};
|
10939
11261
|
}, [data.subscription?.paymentMethod]);
|
10940
|
-
|
11262
|
+
const isLightBackground = (0, import_react14.useMemo)(() => {
|
11263
|
+
return hexToHSL(theme.card.background).l > 50;
|
11264
|
+
}, [theme.card.background]);
|
11265
|
+
if (!stripe || !paymentMethod.cardLast4) {
|
10941
11266
|
return null;
|
10942
11267
|
}
|
10943
|
-
return /* @__PURE__ */ (0,
|
10944
|
-
props.header.isVisible && /* @__PURE__ */ (0,
|
11268
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref, className, children: [
|
11269
|
+
props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
10945
11270
|
Flex,
|
10946
11271
|
{
|
10947
11272
|
$justifyContent: "space-between",
|
10948
11273
|
$alignItems: "center",
|
10949
11274
|
$margin: "0 0 1rem",
|
10950
11275
|
children: [
|
10951
|
-
/* @__PURE__ */ (0,
|
11276
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
10952
11277
|
Text,
|
10953
11278
|
{
|
10954
|
-
$font:
|
10955
|
-
$size:
|
10956
|
-
$weight:
|
10957
|
-
$color:
|
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,
|
10958
11283
|
children: "Payment Method"
|
10959
11284
|
}
|
10960
11285
|
),
|
10961
|
-
typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0,
|
11286
|
+
typeof paymentMethod.monthsToExpiration === "number" && Math.abs(paymentMethod.monthsToExpiration) < 4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
10962
11287
|
Text,
|
10963
11288
|
{
|
10964
|
-
$font:
|
11289
|
+
$font: theme.typography.text.fontFamily,
|
10965
11290
|
$size: 14,
|
10966
11291
|
$color: "#DB6769",
|
10967
11292
|
children: paymentMethod.monthsToExpiration > 0 ? `Expires in ${paymentMethod.monthsToExpiration} mo` : "Expired"
|
@@ -10970,25 +11295,25 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
10970
11295
|
]
|
10971
11296
|
}
|
10972
11297
|
),
|
10973
|
-
paymentMethod.cardLast4 && /* @__PURE__ */ (0,
|
11298
|
+
paymentMethod.cardLast4 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
10974
11299
|
Flex,
|
10975
11300
|
{
|
10976
11301
|
$justifyContent: "space-between",
|
10977
11302
|
$alignItems: "center",
|
10978
11303
|
$margin: "0 0 1rem",
|
10979
|
-
$
|
11304
|
+
$backgroundColor: isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.125)",
|
10980
11305
|
$padding: "0.375rem 1rem",
|
10981
11306
|
$borderRadius: "9999px",
|
10982
|
-
children: /* @__PURE__ */ (0,
|
11307
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Text, { $font: theme.typography.text.fontFamily, $size: 14, children: [
|
10983
11308
|
"\u{1F4B3} Card ending in ",
|
10984
11309
|
paymentMethod.cardLast4
|
10985
11310
|
] })
|
10986
11311
|
}
|
10987
11312
|
),
|
10988
11313
|
layout === "payment" && (0, import_react_dom2.createPortal)(
|
10989
|
-
/* @__PURE__ */ (0,
|
10990
|
-
/* @__PURE__ */ (0,
|
10991
|
-
/* @__PURE__ */ (0,
|
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)(
|
10992
11317
|
Flex,
|
10993
11318
|
{
|
10994
11319
|
$flexDirection: "column",
|
@@ -10996,7 +11321,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
10996
11321
|
$height: "100%",
|
10997
11322
|
$gap: "1.5rem",
|
10998
11323
|
children: [
|
10999
|
-
/* @__PURE__ */ (0,
|
11324
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11000
11325
|
Flex,
|
11001
11326
|
{
|
11002
11327
|
$flexDirection: "column",
|
@@ -11005,8 +11330,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11005
11330
|
$borderRadius: "0 0 0.5rem 0.5rem",
|
11006
11331
|
$flex: "1",
|
11007
11332
|
$height: "100%",
|
11008
|
-
children: /* @__PURE__ */ (0,
|
11009
|
-
/* @__PURE__ */ (0,
|
11333
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
|
11334
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11010
11335
|
Box,
|
11011
11336
|
{
|
11012
11337
|
$fontSize: "18px",
|
@@ -11016,8 +11341,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11016
11341
|
children: "Default"
|
11017
11342
|
}
|
11018
11343
|
),
|
11019
|
-
/* @__PURE__ */ (0,
|
11020
|
-
/* @__PURE__ */ (0,
|
11344
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
|
11345
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11021
11346
|
Flex,
|
11022
11347
|
{
|
11023
11348
|
$alignItems: "center",
|
@@ -11025,65 +11350,48 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11025
11350
|
$border: "1px solid #E2E5E9",
|
11026
11351
|
$borderRadius: ".5rem",
|
11027
11352
|
$backgroundColor: "#ffffff",
|
11028
|
-
$flexDirection: "row",
|
11029
11353
|
$gap: "1rem",
|
11030
11354
|
$width: "100%",
|
11031
|
-
children: /* @__PURE__ */ (0,
|
11032
|
-
Flex,
|
11033
|
-
|
11034
|
-
|
11035
|
-
|
11036
|
-
|
11037
|
-
|
11038
|
-
|
11039
|
-
|
11040
|
-
|
11041
|
-
|
11042
|
-
|
11043
|
-
|
11044
|
-
|
11045
|
-
|
11046
|
-
"
|
11047
|
-
|
11048
|
-
|
11049
|
-
|
11050
|
-
|
11051
|
-
|
11052
|
-
|
11053
|
-
|
11054
|
-
|
11055
|
-
|
11056
|
-
|
11057
|
-
|
11058
|
-
|
11059
|
-
|
11060
|
-
|
11061
|
-
|
11062
|
-
|
11063
|
-
|
11064
|
-
|
11065
|
-
|
11066
|
-
|
11067
|
-
|
11068
|
-
{
|
11069
|
-
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",
|
11070
|
-
fill: "#1434CB"
|
11071
|
-
}
|
11072
|
-
)
|
11073
|
-
] })
|
11074
|
-
}
|
11075
|
-
) }),
|
11076
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 4242" })
|
11077
|
-
]
|
11078
|
-
}
|
11079
|
-
),
|
11080
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
11081
|
-
]
|
11082
|
-
}
|
11083
|
-
)
|
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
|
+
] })
|
11084
11392
|
}
|
11085
11393
|
),
|
11086
|
-
/* @__PURE__ */ (0,
|
11394
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11087
11395
|
StyledButton,
|
11088
11396
|
{
|
11089
11397
|
$size: "sm",
|
@@ -11101,7 +11409,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11101
11409
|
] })
|
11102
11410
|
}
|
11103
11411
|
),
|
11104
|
-
/* @__PURE__ */ (0,
|
11412
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11105
11413
|
Flex,
|
11106
11414
|
{
|
11107
11415
|
$flexDirection: "column",
|
@@ -11110,8 +11418,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11110
11418
|
$borderRadius: "0 0 0.5rem 0.5rem",
|
11111
11419
|
$flex: "1",
|
11112
11420
|
$height: "100%",
|
11113
|
-
children: /* @__PURE__ */ (0,
|
11114
|
-
/* @__PURE__ */ (0,
|
11421
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexDirection: "column", $height: "100%", children: [
|
11422
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11115
11423
|
Box,
|
11116
11424
|
{
|
11117
11425
|
$fontSize: "18px",
|
@@ -11121,8 +11429,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11121
11429
|
children: "Others"
|
11122
11430
|
}
|
11123
11431
|
),
|
11124
|
-
/* @__PURE__ */ (0,
|
11125
|
-
/* @__PURE__ */ (0,
|
11432
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
|
11433
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11126
11434
|
Flex,
|
11127
11435
|
{
|
11128
11436
|
$alignItems: "center",
|
@@ -11130,66 +11438,49 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11130
11438
|
$border: "1px solid #E2E5E9",
|
11131
11439
|
$borderRadius: ".5rem",
|
11132
11440
|
$backgroundColor: "#ffffff",
|
11133
|
-
$flexDirection: "row",
|
11134
11441
|
$gap: "1rem",
|
11135
11442
|
$width: "100%",
|
11136
|
-
children: /* @__PURE__ */ (0,
|
11137
|
-
Flex,
|
11138
|
-
|
11139
|
-
|
11140
|
-
|
11141
|
-
|
11142
|
-
|
11143
|
-
|
11144
|
-
|
11145
|
-
|
11146
|
-
|
11147
|
-
|
11148
|
-
|
11149
|
-
|
11150
|
-
|
11151
|
-
"
|
11152
|
-
|
11153
|
-
|
11154
|
-
|
11155
|
-
|
11156
|
-
|
11157
|
-
|
11158
|
-
|
11159
|
-
|
11160
|
-
|
11161
|
-
|
11162
|
-
|
11163
|
-
|
11164
|
-
|
11165
|
-
|
11166
|
-
|
11167
|
-
|
11168
|
-
|
11169
|
-
|
11170
|
-
|
11171
|
-
|
11172
|
-
|
11173
|
-
{
|
11174
|
-
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",
|
11175
|
-
fill: "#1434CB"
|
11176
|
-
}
|
11177
|
-
)
|
11178
|
-
] })
|
11179
|
-
}
|
11180
|
-
) }),
|
11181
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: "Visa **** 2929" })
|
11182
|
-
]
|
11183
|
-
}
|
11184
|
-
),
|
11185
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $fontSize: "12px", $color: "#5D5D5D", children: "Expires: 3/30" }) })
|
11186
|
-
]
|
11187
|
-
}
|
11188
|
-
)
|
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
|
+
] })
|
11189
11480
|
}
|
11190
11481
|
),
|
11191
|
-
/* @__PURE__ */ (0,
|
11192
|
-
/* @__PURE__ */ (0,
|
11482
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $gap: "1rem", children: [
|
11483
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11193
11484
|
StyledButton,
|
11194
11485
|
{
|
11195
11486
|
$size: "sm",
|
@@ -11203,7 +11494,7 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11203
11494
|
children: "Make Default"
|
11204
11495
|
}
|
11205
11496
|
),
|
11206
|
-
/* @__PURE__ */ (0,
|
11497
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
11207
11498
|
StyledButton,
|
11208
11499
|
{
|
11209
11500
|
$size: "sm",
|
@@ -11232,8 +11523,8 @@ var PaymentMethod = (0, import_react12.forwardRef)(({ children, className, porta
|
|
11232
11523
|
});
|
11233
11524
|
|
11234
11525
|
// src/components/elements/invoices/Invoices.tsx
|
11235
|
-
var
|
11236
|
-
var
|
11526
|
+
var import_react15 = require("react");
|
11527
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
11237
11528
|
function resolveDesignProps6(props) {
|
11238
11529
|
return {
|
11239
11530
|
header: {
|
@@ -11258,10 +11549,10 @@ function resolveDesignProps6(props) {
|
|
11258
11549
|
}
|
11259
11550
|
};
|
11260
11551
|
}
|
11261
|
-
var Invoices = (0,
|
11552
|
+
var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
|
11262
11553
|
const props = resolveDesignProps6(rest);
|
11263
|
-
const
|
11264
|
-
const { invoices } = (0,
|
11554
|
+
const theme = nt();
|
11555
|
+
const { invoices } = (0, import_react15.useMemo)(() => {
|
11265
11556
|
return {
|
11266
11557
|
invoices: [
|
11267
11558
|
{
|
@@ -11275,39 +11566,39 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
|
|
11275
11566
|
]
|
11276
11567
|
};
|
11277
11568
|
}, []);
|
11278
|
-
return /* @__PURE__ */ (0,
|
11279
|
-
props.header.isVisible && /* @__PURE__ */ (0,
|
11569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
|
11570
|
+
props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $justifyContent: "space-between", $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
11280
11571
|
Text,
|
11281
11572
|
{
|
11282
|
-
$font:
|
11283
|
-
$size:
|
11284
|
-
$weight:
|
11285
|
-
$color:
|
11573
|
+
$font: theme.typography[props.header.fontStyle].fontFamily,
|
11574
|
+
$size: theme.typography[props.header.fontStyle].fontSize,
|
11575
|
+
$weight: theme.typography[props.header.fontStyle].fontWeight,
|
11576
|
+
$color: theme.typography[props.header.fontStyle].color,
|
11286
11577
|
children: "Invoices"
|
11287
11578
|
}
|
11288
11579
|
) }),
|
11289
|
-
/* @__PURE__ */ (0,
|
11580
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
|
11290
11581
|
0,
|
11291
11582
|
props.limit.isVisible && props.limit.number || invoices.length
|
11292
11583
|
).map(({ date, amount }, index) => {
|
11293
|
-
return /* @__PURE__ */ (0,
|
11294
|
-
props.date.isVisible && /* @__PURE__ */ (0,
|
11584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $justifyContent: "space-between", children: [
|
11585
|
+
props.date.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
11295
11586
|
Text,
|
11296
11587
|
{
|
11297
|
-
$font:
|
11298
|
-
$size:
|
11299
|
-
$weight:
|
11300
|
-
$color:
|
11588
|
+
$font: theme.typography[props.date.fontStyle].fontFamily,
|
11589
|
+
$size: theme.typography[props.date.fontStyle].fontSize,
|
11590
|
+
$weight: theme.typography[props.date.fontStyle].fontWeight,
|
11591
|
+
$color: theme.typography[props.date.fontStyle].color,
|
11301
11592
|
children: toPrettyDate(date)
|
11302
11593
|
}
|
11303
11594
|
),
|
11304
|
-
props.amount.isVisible && /* @__PURE__ */ (0,
|
11595
|
+
props.amount.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
11305
11596
|
Text,
|
11306
11597
|
{
|
11307
|
-
$font:
|
11308
|
-
$size:
|
11309
|
-
$weight:
|
11310
|
-
$color:
|
11598
|
+
$font: theme.typography[props.amount.fontStyle].fontFamily,
|
11599
|
+
$size: theme.typography[props.amount.fontStyle].fontSize,
|
11600
|
+
$weight: theme.typography[props.amount.fontStyle].fontWeight,
|
11601
|
+
$color: theme.typography[props.amount.fontStyle].color,
|
11311
11602
|
children: [
|
11312
11603
|
"$",
|
11313
11604
|
amount
|
@@ -11316,15 +11607,15 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
|
|
11316
11607
|
)
|
11317
11608
|
] }, index);
|
11318
11609
|
}) }),
|
11319
|
-
props.collapse.isVisible && /* @__PURE__ */ (0,
|
11320
|
-
/* @__PURE__ */ (0,
|
11321
|
-
/* @__PURE__ */ (0,
|
11610
|
+
props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
|
11611
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
|
11612
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
11322
11613
|
Text,
|
11323
11614
|
{
|
11324
|
-
$font:
|
11325
|
-
$size:
|
11326
|
-
$weight:
|
11327
|
-
$color:
|
11615
|
+
$font: theme.typography[props.collapse.fontStyle].fontFamily,
|
11616
|
+
$size: theme.typography[props.collapse.fontStyle].fontSize,
|
11617
|
+
$weight: theme.typography[props.collapse.fontStyle].fontWeight,
|
11618
|
+
$color: theme.typography[props.collapse.fontStyle].color,
|
11328
11619
|
children: "See all"
|
11329
11620
|
}
|
11330
11621
|
)
|
@@ -11333,22 +11624,22 @@ var Invoices = (0, import_react13.forwardRef)(({ className, ...rest }, ref) => {
|
|
11333
11624
|
});
|
11334
11625
|
|
11335
11626
|
// src/components/embed/ComponentTree.tsx
|
11336
|
-
var
|
11627
|
+
var import_react21 = require("react");
|
11337
11628
|
|
11338
11629
|
// src/components/embed/renderer.ts
|
11339
|
-
var
|
11630
|
+
var import_react20 = require("react");
|
11340
11631
|
|
11341
11632
|
// src/components/layout/root/Root.tsx
|
11342
|
-
var
|
11343
|
-
var
|
11344
|
-
var Root = (0,
|
11633
|
+
var import_react16 = require("react");
|
11634
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
11635
|
+
var Root = (0, import_react16.forwardRef)(
|
11345
11636
|
(props, ref) => {
|
11346
|
-
return /* @__PURE__ */ (0,
|
11637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref, ...props });
|
11347
11638
|
}
|
11348
11639
|
);
|
11349
11640
|
|
11350
11641
|
// src/components/layout/viewport/Viewport.tsx
|
11351
|
-
var
|
11642
|
+
var import_react17 = require("react");
|
11352
11643
|
|
11353
11644
|
// src/components/layout/viewport/styles.ts
|
11354
11645
|
var StyledViewport = dt.div`
|
@@ -11359,27 +11650,64 @@ var StyledViewport = dt.div`
|
|
11359
11650
|
`;
|
11360
11651
|
|
11361
11652
|
// src/components/layout/viewport/Viewport.tsx
|
11362
|
-
var
|
11363
|
-
var Viewport = (0,
|
11653
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
11654
|
+
var Viewport = (0, import_react17.forwardRef)(
|
11364
11655
|
({ children, ...props }, ref) => {
|
11365
|
-
const
|
11366
|
-
|
11656
|
+
const theme = nt();
|
11657
|
+
const { layout } = useEmbed();
|
11658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
11367
11659
|
StyledViewport,
|
11368
11660
|
{
|
11369
11661
|
ref,
|
11370
|
-
$numberOfColumns:
|
11662
|
+
$numberOfColumns: theme.numberOfColumns,
|
11371
11663
|
...props,
|
11372
|
-
children: layout === "disabled" ? /* @__PURE__ */ (0,
|
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
|
11373
11701
|
}
|
11374
11702
|
);
|
11375
11703
|
}
|
11376
11704
|
);
|
11377
11705
|
|
11378
11706
|
// src/components/layout/column/Column.tsx
|
11379
|
-
var
|
11707
|
+
var import_react19 = require("react");
|
11380
11708
|
|
11381
11709
|
// src/components/layout/card/Card.tsx
|
11382
|
-
var
|
11710
|
+
var import_react18 = require("react");
|
11383
11711
|
|
11384
11712
|
// src/components/layout/card/styles.ts
|
11385
11713
|
var StyledCard = dt.div(
|
@@ -11408,7 +11736,7 @@ var StyledCard = dt.div(
|
|
11408
11736
|
|
11409
11737
|
${() => {
|
11410
11738
|
const { l: l2 } = hexToHSL(theme.card.background);
|
11411
|
-
const borderColor = l2 > 50 ?
|
11739
|
+
const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
|
11412
11740
|
const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
|
11413
11741
|
const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
|
11414
11742
|
if ($sectionLayout === "merged") {
|
@@ -11440,19 +11768,19 @@ var StyledCard = dt.div(
|
|
11440
11768
|
);
|
11441
11769
|
|
11442
11770
|
// src/components/layout/card/Card.tsx
|
11443
|
-
var
|
11444
|
-
var Card = (0,
|
11771
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
11772
|
+
var Card = (0, import_react18.forwardRef)(
|
11445
11773
|
({ children, className }, ref) => {
|
11446
|
-
const
|
11447
|
-
return /* @__PURE__ */ (0,
|
11774
|
+
const theme = nt();
|
11775
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
11448
11776
|
StyledCard,
|
11449
11777
|
{
|
11450
11778
|
ref,
|
11451
11779
|
className,
|
11452
|
-
$sectionLayout:
|
11453
|
-
$borderRadius:
|
11454
|
-
$padding:
|
11455
|
-
$shadow:
|
11780
|
+
$sectionLayout: theme?.sectionLayout,
|
11781
|
+
$borderRadius: theme?.card?.borderRadius,
|
11782
|
+
$padding: theme?.card?.padding,
|
11783
|
+
$shadow: theme?.card?.hasShadow,
|
11456
11784
|
children
|
11457
11785
|
}
|
11458
11786
|
);
|
@@ -11466,10 +11794,10 @@ var StyledColumn = dt.div`
|
|
11466
11794
|
`;
|
11467
11795
|
|
11468
11796
|
// src/components/layout/column/Column.tsx
|
11469
|
-
var
|
11470
|
-
var Column = (0,
|
11797
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
11798
|
+
var Column = (0, import_react19.forwardRef)(
|
11471
11799
|
({ children, ...props }, ref) => {
|
11472
|
-
return /* @__PURE__ */ (0,
|
11800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StyledColumn, { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Card, { children }) });
|
11473
11801
|
}
|
11474
11802
|
);
|
11475
11803
|
|
@@ -11502,7 +11830,7 @@ function createRenderer(options) {
|
|
11502
11830
|
const { className, ...rest } = props;
|
11503
11831
|
const resolvedProps = component === "div" ? rest : props;
|
11504
11832
|
const resolvedChildren = children.map(renderNode);
|
11505
|
-
return (0,
|
11833
|
+
return (0, import_react20.createElement)(
|
11506
11834
|
component,
|
11507
11835
|
{
|
11508
11836
|
className,
|
@@ -11515,31 +11843,107 @@ function createRenderer(options) {
|
|
11515
11843
|
};
|
11516
11844
|
}
|
11517
11845
|
|
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
|
+
|
11518
11865
|
// src/components/embed/ComponentTree.tsx
|
11519
|
-
var
|
11866
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
11867
|
+
var Loading = () => {
|
11868
|
+
const theme = nt();
|
11869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
11870
|
+
Flex,
|
11871
|
+
{
|
11872
|
+
$width: "100%",
|
11873
|
+
$height: "100%",
|
11874
|
+
$alignItems: "center",
|
11875
|
+
$justifyContent: "center",
|
11876
|
+
$padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
|
11877
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, {})
|
11878
|
+
}
|
11879
|
+
);
|
11880
|
+
};
|
11881
|
+
var Error2 = ({ message }) => {
|
11882
|
+
const theme = nt();
|
11883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
11884
|
+
Flex,
|
11885
|
+
{
|
11886
|
+
$flexDirection: "column",
|
11887
|
+
$padding: `${theme.card.padding / TEXT_BASE_SIZE}rem`,
|
11888
|
+
$width: "100%",
|
11889
|
+
$height: "auto",
|
11890
|
+
$borderRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
|
11891
|
+
$backgroundColor: theme.card.background,
|
11892
|
+
$alignItems: "center",
|
11893
|
+
$justifyContent: "center",
|
11894
|
+
children: [
|
11895
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
11896
|
+
Box,
|
11897
|
+
{
|
11898
|
+
$marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
|
11899
|
+
$fontSize: `${theme.typography.heading1.fontSize / TEXT_BASE_SIZE}rem`,
|
11900
|
+
$fontFamily: theme.typography.heading1.fontFamily,
|
11901
|
+
$fontWeight: theme.typography.heading1.fontWeight,
|
11902
|
+
$color: theme.typography.heading1.color,
|
11903
|
+
children: "404 Error"
|
11904
|
+
}
|
11905
|
+
),
|
11906
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
11907
|
+
Box,
|
11908
|
+
{
|
11909
|
+
$marginBottom: `${8 / TEXT_BASE_SIZE}rem`,
|
11910
|
+
$fontSize: `${theme.typography.text.fontSize / TEXT_BASE_SIZE}rem`,
|
11911
|
+
$fontFamily: theme.typography.text.fontFamily,
|
11912
|
+
$fontWeight: theme.typography.text.fontWeight,
|
11913
|
+
$color: theme.typography.text.color,
|
11914
|
+
children: message
|
11915
|
+
}
|
11916
|
+
)
|
11917
|
+
]
|
11918
|
+
}
|
11919
|
+
);
|
11920
|
+
};
|
11520
11921
|
var ComponentTree = () => {
|
11521
|
-
const [children, setChildren] = (0, import_react19.useState)("Loading");
|
11522
11922
|
const { error, nodes } = useEmbed();
|
11523
|
-
(0,
|
11923
|
+
const [children, setChildren] = (0, import_react21.useState)(/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loading, {}));
|
11924
|
+
(0, import_react21.useEffect)(() => {
|
11524
11925
|
const renderer = createRenderer();
|
11525
11926
|
setChildren(nodes.map(renderer));
|
11526
11927
|
}, [nodes]);
|
11527
11928
|
if (error) {
|
11528
|
-
return /* @__PURE__ */ (0,
|
11929
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Error2, { message: error.message });
|
11529
11930
|
}
|
11530
|
-
|
11931
|
+
if (import_react21.Children.count(children) === 0) {
|
11932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loading, {});
|
11933
|
+
}
|
11934
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children });
|
11531
11935
|
};
|
11532
11936
|
|
11533
11937
|
// src/components/embed/Embed.tsx
|
11534
|
-
var
|
11938
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
11535
11939
|
var SchematicEmbed = ({ id, accessToken, apiConfig }) => {
|
11536
11940
|
if (accessToken?.length === 0) {
|
11537
|
-
return /* @__PURE__ */ (0,
|
11941
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Please provide an access token." });
|
11538
11942
|
}
|
11539
11943
|
if (!accessToken?.startsWith("token_")) {
|
11540
|
-
return /* @__PURE__ */ (0,
|
11944
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: 'Invalid access token; your temporary access token will start with "token_".' });
|
11541
11945
|
}
|
11542
|
-
return /* @__PURE__ */ (0,
|
11946
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EmbedProvider, { id, accessToken, apiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentTree, {}) });
|
11543
11947
|
};
|
11544
11948
|
/*! Bundled license information:
|
11545
11949
|
|