@schematichq/schematic-components 0.6.3 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/schematic-components.cjs.js +300 -210
- package/dist/schematic-components.d.ts +24 -0
- package/dist/schematic-components.esm.js +300 -210
- package/package.json +5 -5
|
@@ -3946,6 +3946,7 @@ var VISIBLE_ENTITLEMENT_COUNT = 4;
|
|
|
3946
3946
|
var MAX_VISIBLE_INVOICE_COUNT = 12;
|
|
3947
3947
|
var DEBOUNCE_TIMEOUT = 250;
|
|
3948
3948
|
var DEFAULT_CURRENCY = "USD";
|
|
3949
|
+
var MAXIMUM_SIGNIFICANT_DIGITS = 6;
|
|
3949
3950
|
|
|
3950
3951
|
// src/hooks/useAvailablePlans.ts
|
|
3951
3952
|
var import_react10 = require("react");
|
|
@@ -10720,7 +10721,8 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
|
10720
10721
|
externalPriceId: json["external_price_id"],
|
|
10721
10722
|
id: json["id"],
|
|
10722
10723
|
interval: json["interval"],
|
|
10723
|
-
price: json["price"]
|
|
10724
|
+
price: json["price"],
|
|
10725
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"]
|
|
10724
10726
|
};
|
|
10725
10727
|
}
|
|
10726
10728
|
|
|
@@ -10740,6 +10742,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
|
|
|
10740
10742
|
isActive: json["is_active"],
|
|
10741
10743
|
meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
|
|
10742
10744
|
price: json["price"],
|
|
10745
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10743
10746
|
priceExternalId: json["price_external_id"],
|
|
10744
10747
|
priceId: json["price_id"],
|
|
10745
10748
|
productExternalId: json["product_external_id"],
|
|
@@ -10766,6 +10769,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
|
|
|
10766
10769
|
externalId: json["external_id"],
|
|
10767
10770
|
name: json["name"],
|
|
10768
10771
|
price: json["price"],
|
|
10772
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10769
10773
|
prices: json["prices"].map(
|
|
10770
10774
|
BillingPriceResponseDataFromJSON
|
|
10771
10775
|
),
|
|
@@ -10794,6 +10798,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
|
|
|
10794
10798
|
meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
|
|
10795
10799
|
name: json["name"],
|
|
10796
10800
|
price: json["price"],
|
|
10801
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10797
10802
|
priceExternalId: json["price_external_id"],
|
|
10798
10803
|
priceId: json["price_id"],
|
|
10799
10804
|
quantity: json["quantity"],
|
|
@@ -12249,8 +12254,7 @@ var en_default = {
|
|
|
12249
12254
|
"Current plan": "Current plan",
|
|
12250
12255
|
"Current usage exceeds the limit of this plan.": "Current usage exceeds the limit of this plan.",
|
|
12251
12256
|
"Currently using": "Currently using {{quantity}} {{unit}}",
|
|
12252
|
-
"Custom
|
|
12253
|
-
"Custom Plan CTA": "Talk to support",
|
|
12257
|
+
"Custom price": "Custom price",
|
|
12254
12258
|
Discount: "Discount",
|
|
12255
12259
|
"Due today": "Due today",
|
|
12256
12260
|
"Edit payment method": "Edit payment method",
|
|
@@ -12306,6 +12310,7 @@ var en_default = {
|
|
|
12306
12310
|
"Subscribe and close": "Subscribe and close",
|
|
12307
12311
|
Subscription: "Subscription",
|
|
12308
12312
|
"Subscription canceled": "Subscription canceled",
|
|
12313
|
+
"Talk to support": "Talk to support",
|
|
12309
12314
|
Trial: "Trial",
|
|
12310
12315
|
"Trial ends in": "Trial ends in {{days}} days",
|
|
12311
12316
|
"Trial plan": "Try free for {{days}} days",
|
|
@@ -13106,7 +13111,7 @@ var EmbedProvider = ({
|
|
|
13106
13111
|
(0, import_react11.useEffect)(() => {
|
|
13107
13112
|
if (accessToken) {
|
|
13108
13113
|
const { headers = {} } = apiConfig ?? {};
|
|
13109
|
-
headers["X-Schematic-Components-Version"] = "0.
|
|
13114
|
+
headers["X-Schematic-Components-Version"] = "0.7.0";
|
|
13110
13115
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
13111
13116
|
const config = new Configuration({
|
|
13112
13117
|
...apiConfig,
|
|
@@ -13182,6 +13187,13 @@ var getFeatureName = (feature, count = 0) => {
|
|
|
13182
13187
|
}
|
|
13183
13188
|
return (0, import_pluralize.default)(name, count);
|
|
13184
13189
|
};
|
|
13190
|
+
function getBillingPrice(billingPrice) {
|
|
13191
|
+
if (!billingPrice) {
|
|
13192
|
+
return;
|
|
13193
|
+
}
|
|
13194
|
+
const price = typeof billingPrice.priceDecimal === "string" ? parseFloat(billingPrice.priceDecimal) : billingPrice.price;
|
|
13195
|
+
return { ...billingPrice, price };
|
|
13196
|
+
}
|
|
13185
13197
|
|
|
13186
13198
|
// src/utils/color.ts
|
|
13187
13199
|
function hexToHSL(color) {
|
|
@@ -13322,16 +13334,20 @@ function formatCurrency(amount, currency) {
|
|
|
13322
13334
|
};
|
|
13323
13335
|
if (dollars >= 1e6) {
|
|
13324
13336
|
return formatValue(dollars / 1e6, "M");
|
|
13325
|
-
}
|
|
13337
|
+
}
|
|
13338
|
+
if (dollars >= 1e3) {
|
|
13326
13339
|
return formatValue(dollars / 1e3, "k");
|
|
13327
|
-
} else {
|
|
13328
|
-
return new Intl.NumberFormat("en-US", {
|
|
13329
|
-
style: "currency",
|
|
13330
|
-
currency: resolvedCurrency,
|
|
13331
|
-
minimumSignificantDigits: 1,
|
|
13332
|
-
maximumSignificantDigits: 4
|
|
13333
|
-
}).format(dollars);
|
|
13334
13340
|
}
|
|
13341
|
+
const hasManySignificantDigits = /[1-9]/.test(
|
|
13342
|
+
(amount % 1).toFixed(MAXIMUM_SIGNIFICANT_DIGITS)
|
|
13343
|
+
);
|
|
13344
|
+
return new Intl.NumberFormat("en-US", {
|
|
13345
|
+
style: "currency",
|
|
13346
|
+
currency: resolvedCurrency,
|
|
13347
|
+
...hasManySignificantDigits && {
|
|
13348
|
+
minimumSignificantDigits: 1
|
|
13349
|
+
}
|
|
13350
|
+
}).format(dollars);
|
|
13335
13351
|
} catch (error) {
|
|
13336
13352
|
console.error("Error formatting currency", error);
|
|
13337
13353
|
return new Intl.NumberFormat("en-US", {
|
|
@@ -14961,25 +14977,32 @@ var Sidebar = ({
|
|
|
14961
14977
|
({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
|
|
14962
14978
|
);
|
|
14963
14979
|
const subscriptionPrice = (0, import_react23.useMemo)(() => {
|
|
14964
|
-
let total = 0;
|
|
14965
14980
|
let planPrice;
|
|
14966
14981
|
let currency;
|
|
14967
14982
|
if (selectedPlan) {
|
|
14968
|
-
|
|
14969
|
-
|
|
14970
|
-
|
|
14971
|
-
|
|
14972
|
-
|
|
14983
|
+
const planBillingPrice = getBillingPrice(
|
|
14984
|
+
planPeriod === "year" ? selectedPlan.yearlyPrice : selectedPlan.monthlyPrice
|
|
14985
|
+
);
|
|
14986
|
+
planPrice = planBillingPrice?.price;
|
|
14987
|
+
currency = planBillingPrice?.currency;
|
|
14973
14988
|
} else if (typeof currentPlan?.planPrice === "number") {
|
|
14974
14989
|
planPrice = currentPlan.planPrice;
|
|
14975
14990
|
}
|
|
14991
|
+
let total = 0;
|
|
14992
|
+
if (planPrice) {
|
|
14993
|
+
total += planPrice;
|
|
14994
|
+
}
|
|
14976
14995
|
const addOnCost = addOns.reduce(
|
|
14977
|
-
(sum, addOn) => sum + (
|
|
14996
|
+
(sum, addOn) => sum + (getBillingPrice(
|
|
14997
|
+
planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
14998
|
+
)?.price ?? 0),
|
|
14978
14999
|
0
|
|
14979
15000
|
);
|
|
14980
15001
|
total += addOnCost;
|
|
14981
15002
|
const payInAdvanceCost = payInAdvanceEntitlements.reduce(
|
|
14982
|
-
(sum, { entitlement, quantity }) => sum + quantity * ((
|
|
15003
|
+
(sum, { entitlement, quantity }) => sum + quantity * (getBillingPrice(
|
|
15004
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15005
|
+
)?.price ?? 0),
|
|
14983
15006
|
0
|
|
14984
15007
|
);
|
|
14985
15008
|
total += payInAdvanceCost;
|
|
@@ -15003,7 +15026,7 @@ var Sidebar = ({
|
|
|
15003
15026
|
window.dispatchEvent(event);
|
|
15004
15027
|
};
|
|
15005
15028
|
const checkout = (0, import_react23.useCallback)(async () => {
|
|
15006
|
-
const priceId = (planPeriod === "
|
|
15029
|
+
const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
|
|
15007
15030
|
if (!api || !selectedPlan || !priceId) {
|
|
15008
15031
|
return;
|
|
15009
15032
|
}
|
|
@@ -15016,7 +15039,7 @@ var Sidebar = ({
|
|
|
15016
15039
|
newPriceId: priceId,
|
|
15017
15040
|
addOnIds: addOns.reduce((acc, addOn) => {
|
|
15018
15041
|
if (addOn.isSelected && !selectedPlan.companyCanTrial) {
|
|
15019
|
-
const addOnPriceId = (planPeriod === "
|
|
15042
|
+
const addOnPriceId = (planPeriod === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
|
|
15020
15043
|
if (addOnPriceId) {
|
|
15021
15044
|
acc.push({
|
|
15022
15045
|
addOnId: addOn.id,
|
|
@@ -15028,7 +15051,7 @@ var Sidebar = ({
|
|
|
15028
15051
|
}, []),
|
|
15029
15052
|
payInAdvance: payInAdvanceEntitlements.reduce(
|
|
15030
15053
|
(acc, { entitlement, quantity }) => {
|
|
15031
|
-
const priceId2 = (planPeriod === "
|
|
15054
|
+
const priceId2 = (planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
|
|
15032
15055
|
if (priceId2) {
|
|
15033
15056
|
acc.push({
|
|
15034
15057
|
priceId: priceId2,
|
|
@@ -15151,6 +15174,9 @@ var Sidebar = ({
|
|
|
15151
15174
|
if (isTrialable && selectedPlan.trialDays) {
|
|
15152
15175
|
trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
|
|
15153
15176
|
}
|
|
15177
|
+
const selectedPlanBillingPrice = getBillingPrice(
|
|
15178
|
+
planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice
|
|
15179
|
+
);
|
|
15154
15180
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15155
15181
|
Flex,
|
|
15156
15182
|
{
|
|
@@ -15311,8 +15337,8 @@ var Sidebar = ({
|
|
|
15311
15337
|
$color: theme.typography.text.color,
|
|
15312
15338
|
children: [
|
|
15313
15339
|
formatCurrency(
|
|
15314
|
-
|
|
15315
|
-
|
|
15340
|
+
selectedPlanBillingPrice?.price ?? 0,
|
|
15341
|
+
selectedPlanBillingPrice?.currency
|
|
15316
15342
|
),
|
|
15317
15343
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15318
15344
|
"/",
|
|
@@ -15340,7 +15366,12 @@ var Sidebar = ({
|
|
|
15340
15366
|
removedUsageBasedEntitlements.reduce(
|
|
15341
15367
|
(acc, { allocation, quantity, usage }, index) => {
|
|
15342
15368
|
if (typeof allocation === "number" && usage.feature?.name) {
|
|
15343
|
-
const
|
|
15369
|
+
const {
|
|
15370
|
+
price: entitlementPrice,
|
|
15371
|
+
currency: entitlementCurrency
|
|
15372
|
+
} = getBillingPrice(
|
|
15373
|
+
planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
|
|
15374
|
+
) || {};
|
|
15344
15375
|
acc.push(
|
|
15345
15376
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15346
15377
|
Flex,
|
|
@@ -15374,20 +15405,20 @@ var Sidebar = ({
|
|
|
15374
15405
|
$weight: theme.typography.text.fontWeight,
|
|
15375
15406
|
$color: theme.typography.text.color,
|
|
15376
15407
|
children: [
|
|
15377
|
-
usage.priceBehavior === "pay_in_advance" &&
|
|
15408
|
+
usage.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15378
15409
|
formatCurrency(
|
|
15379
|
-
|
|
15380
|
-
|
|
15410
|
+
(entitlementPrice ?? 0) * quantity,
|
|
15411
|
+
entitlementCurrency
|
|
15381
15412
|
),
|
|
15382
15413
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15383
15414
|
"/",
|
|
15384
15415
|
shortenPeriod(planPeriod)
|
|
15385
15416
|
] })
|
|
15386
15417
|
] }),
|
|
15387
|
-
usage.priceBehavior === "pay_as_you_go" &&
|
|
15418
|
+
usage.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15388
15419
|
formatCurrency(
|
|
15389
|
-
|
|
15390
|
-
|
|
15420
|
+
entitlementPrice ?? 0,
|
|
15421
|
+
entitlementCurrency
|
|
15391
15422
|
),
|
|
15392
15423
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15393
15424
|
"/",
|
|
@@ -15410,6 +15441,12 @@ var Sidebar = ({
|
|
|
15410
15441
|
changedUsageBasedEntitlements.reduce(
|
|
15411
15442
|
(acc, { entitlement, previous, next: next2 }, index) => {
|
|
15412
15443
|
if (entitlement?.feature?.name) {
|
|
15444
|
+
const {
|
|
15445
|
+
price: entitlementPrice,
|
|
15446
|
+
currency: entitlementCurrency
|
|
15447
|
+
} = getBillingPrice(
|
|
15448
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15449
|
+
) || {};
|
|
15413
15450
|
acc.push(
|
|
15414
15451
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { children: [
|
|
15415
15452
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
@@ -15445,8 +15482,8 @@ var Sidebar = ({
|
|
|
15445
15482
|
$color: theme.typography.text.color,
|
|
15446
15483
|
children: [
|
|
15447
15484
|
formatCurrency(
|
|
15448
|
-
(
|
|
15449
|
-
|
|
15485
|
+
(entitlementPrice ?? 0) * previous.quantity,
|
|
15486
|
+
entitlementCurrency
|
|
15450
15487
|
),
|
|
15451
15488
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15452
15489
|
"/",
|
|
@@ -15488,8 +15525,8 @@ var Sidebar = ({
|
|
|
15488
15525
|
$color: theme.typography.text.color,
|
|
15489
15526
|
children: [
|
|
15490
15527
|
formatCurrency(
|
|
15491
|
-
(
|
|
15492
|
-
|
|
15528
|
+
(entitlementPrice ?? 0) * next2.quantity,
|
|
15529
|
+
entitlementCurrency
|
|
15493
15530
|
),
|
|
15494
15531
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15495
15532
|
"/",
|
|
@@ -15511,7 +15548,12 @@ var Sidebar = ({
|
|
|
15511
15548
|
addedUsageBasedEntitlements.reduce(
|
|
15512
15549
|
(acc, { entitlement, quantity }, index) => {
|
|
15513
15550
|
if (entitlement.feature?.name) {
|
|
15514
|
-
const
|
|
15551
|
+
const {
|
|
15552
|
+
price: entitlementPrice,
|
|
15553
|
+
currency: entitlementCurrency
|
|
15554
|
+
} = getBillingPrice(
|
|
15555
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15556
|
+
) || {};
|
|
15515
15557
|
acc.push(
|
|
15516
15558
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15517
15559
|
Flex,
|
|
@@ -15542,20 +15584,20 @@ var Sidebar = ({
|
|
|
15542
15584
|
$weight: theme.typography.text.fontWeight,
|
|
15543
15585
|
$color: theme.typography.text.color,
|
|
15544
15586
|
children: [
|
|
15545
|
-
entitlement.priceBehavior === "pay_in_advance" &&
|
|
15587
|
+
entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15546
15588
|
formatCurrency(
|
|
15547
|
-
|
|
15548
|
-
|
|
15589
|
+
(entitlementPrice ?? 0) * quantity,
|
|
15590
|
+
entitlementCurrency
|
|
15549
15591
|
),
|
|
15550
15592
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15551
15593
|
"/",
|
|
15552
15594
|
shortenPeriod(planPeriod)
|
|
15553
15595
|
] })
|
|
15554
15596
|
] }),
|
|
15555
|
-
entitlement.priceBehavior === "pay_as_you_go" &&
|
|
15597
|
+
entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15556
15598
|
formatCurrency(
|
|
15557
|
-
|
|
15558
|
-
|
|
15599
|
+
entitlementPrice ?? 0,
|
|
15600
|
+
entitlementCurrency
|
|
15559
15601
|
),
|
|
15560
15602
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15561
15603
|
"/",
|
|
@@ -15614,8 +15656,8 @@ var Sidebar = ({
|
|
|
15614
15656
|
children: [
|
|
15615
15657
|
"-",
|
|
15616
15658
|
formatCurrency(
|
|
15617
|
-
|
|
15618
|
-
|
|
15659
|
+
selectedPlanBillingPrice?.price ?? 0,
|
|
15660
|
+
selectedPlanBillingPrice?.currency
|
|
15619
15661
|
),
|
|
15620
15662
|
"/",
|
|
15621
15663
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("sub", { children: shortenPeriod(planPeriod) })
|
|
@@ -15637,89 +15679,93 @@ var Sidebar = ({
|
|
|
15637
15679
|
children: t2("Add-ons")
|
|
15638
15680
|
}
|
|
15639
15681
|
) }),
|
|
15640
|
-
removedAddOns.map((addOn, index) =>
|
|
15641
|
-
|
|
15642
|
-
|
|
15643
|
-
|
|
15644
|
-
|
|
15645
|
-
|
|
15646
|
-
|
|
15647
|
-
|
|
15648
|
-
|
|
15649
|
-
|
|
15650
|
-
|
|
15651
|
-
|
|
15652
|
-
|
|
15653
|
-
|
|
15654
|
-
|
|
15655
|
-
|
|
15656
|
-
|
|
15657
|
-
|
|
15658
|
-
|
|
15659
|
-
|
|
15660
|
-
|
|
15661
|
-
|
|
15662
|
-
|
|
15663
|
-
|
|
15664
|
-
|
|
15665
|
-
|
|
15666
|
-
|
|
15667
|
-
|
|
15668
|
-
|
|
15669
|
-
|
|
15670
|
-
|
|
15671
|
-
|
|
15672
|
-
|
|
15673
|
-
"
|
|
15674
|
-
|
|
15675
|
-
|
|
15676
|
-
|
|
15677
|
-
|
|
15678
|
-
|
|
15679
|
-
|
|
15680
|
-
|
|
15681
|
-
|
|
15682
|
-
|
|
15683
|
-
|
|
15684
|
-
|
|
15685
|
-
|
|
15686
|
-
|
|
15687
|
-
|
|
15688
|
-
|
|
15689
|
-
|
|
15690
|
-
|
|
15691
|
-
|
|
15692
|
-
|
|
15693
|
-
|
|
15694
|
-
|
|
15695
|
-
|
|
15696
|
-
|
|
15697
|
-
|
|
15698
|
-
|
|
15699
|
-
|
|
15700
|
-
|
|
15701
|
-
|
|
15702
|
-
|
|
15703
|
-
|
|
15704
|
-
|
|
15705
|
-
|
|
15706
|
-
|
|
15707
|
-
|
|
15708
|
-
|
|
15709
|
-
|
|
15710
|
-
|
|
15711
|
-
|
|
15712
|
-
|
|
15713
|
-
|
|
15714
|
-
|
|
15715
|
-
|
|
15716
|
-
|
|
15717
|
-
|
|
15718
|
-
|
|
15719
|
-
|
|
15720
|
-
|
|
15721
|
-
|
|
15722
|
-
|
|
15682
|
+
removedAddOns.map((addOn, index) => {
|
|
15683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15684
|
+
Flex,
|
|
15685
|
+
{
|
|
15686
|
+
$justifyContent: "space-between",
|
|
15687
|
+
$alignItems: "center",
|
|
15688
|
+
$gap: "1rem",
|
|
15689
|
+
$opacity: "0.625",
|
|
15690
|
+
$textDecoration: "line-through",
|
|
15691
|
+
$color: theme.typography.heading4.color,
|
|
15692
|
+
children: [
|
|
15693
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
15694
|
+
Text,
|
|
15695
|
+
{
|
|
15696
|
+
$font: theme.typography.heading4.fontFamily,
|
|
15697
|
+
$size: theme.typography.heading4.fontSize,
|
|
15698
|
+
$weight: theme.typography.heading4.fontWeight,
|
|
15699
|
+
$color: theme.typography.heading4.color,
|
|
15700
|
+
children: addOn.name
|
|
15701
|
+
}
|
|
15702
|
+
) }),
|
|
15703
|
+
typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15704
|
+
Text,
|
|
15705
|
+
{
|
|
15706
|
+
$font: theme.typography.text.fontFamily,
|
|
15707
|
+
$size: theme.typography.text.fontSize,
|
|
15708
|
+
$weight: theme.typography.text.fontWeight,
|
|
15709
|
+
$color: theme.typography.text.color,
|
|
15710
|
+
children: [
|
|
15711
|
+
formatCurrency(
|
|
15712
|
+
addOn.planPrice,
|
|
15713
|
+
selectedPlanBillingPrice?.currency
|
|
15714
|
+
),
|
|
15715
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15716
|
+
"/",
|
|
15717
|
+
shortenPeriod(addOn.planPeriod)
|
|
15718
|
+
] })
|
|
15719
|
+
]
|
|
15720
|
+
}
|
|
15721
|
+
) })
|
|
15722
|
+
]
|
|
15723
|
+
},
|
|
15724
|
+
index
|
|
15725
|
+
);
|
|
15726
|
+
}),
|
|
15727
|
+
selectedAddOns.map((addOn, index) => {
|
|
15728
|
+
const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
|
|
15729
|
+
planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
15730
|
+
) || {};
|
|
15731
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15732
|
+
Flex,
|
|
15733
|
+
{
|
|
15734
|
+
$justifyContent: "space-between",
|
|
15735
|
+
$alignItems: "center",
|
|
15736
|
+
$gap: "1rem",
|
|
15737
|
+
children: [
|
|
15738
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
15739
|
+
Text,
|
|
15740
|
+
{
|
|
15741
|
+
$font: theme.typography.heading4.fontFamily,
|
|
15742
|
+
$size: theme.typography.heading4.fontSize,
|
|
15743
|
+
$weight: theme.typography.heading4.fontWeight,
|
|
15744
|
+
$color: theme.typography.heading4.color,
|
|
15745
|
+
children: addOn.name
|
|
15746
|
+
}
|
|
15747
|
+
) }),
|
|
15748
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15749
|
+
Text,
|
|
15750
|
+
{
|
|
15751
|
+
$font: theme.typography.text.fontFamily,
|
|
15752
|
+
$size: theme.typography.text.fontSize,
|
|
15753
|
+
$weight: theme.typography.text.fontWeight,
|
|
15754
|
+
$color: theme.typography.text.color,
|
|
15755
|
+
children: [
|
|
15756
|
+
formatCurrency(addOnPrice ?? 0, addOnCurrency),
|
|
15757
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15758
|
+
"/",
|
|
15759
|
+
shortenPeriod(planPeriod)
|
|
15760
|
+
] })
|
|
15761
|
+
]
|
|
15762
|
+
}
|
|
15763
|
+
) })
|
|
15764
|
+
]
|
|
15765
|
+
},
|
|
15766
|
+
index
|
|
15767
|
+
);
|
|
15768
|
+
})
|
|
15723
15769
|
] }),
|
|
15724
15770
|
proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15725
15771
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
@@ -15758,7 +15804,7 @@ var Sidebar = ({
|
|
|
15758
15804
|
$color: theme.typography.text.color,
|
|
15759
15805
|
children: formatCurrency(
|
|
15760
15806
|
proration,
|
|
15761
|
-
|
|
15807
|
+
selectedPlanBillingPrice?.currency
|
|
15762
15808
|
)
|
|
15763
15809
|
}
|
|
15764
15810
|
) })
|
|
@@ -15865,7 +15911,7 @@ var Sidebar = ({
|
|
|
15865
15911
|
$color: theme.typography.text.color,
|
|
15866
15912
|
children: formatCurrency(
|
|
15867
15913
|
newCharges / 100 * percentOff,
|
|
15868
|
-
|
|
15914
|
+
selectedPlanBillingPrice?.currency
|
|
15869
15915
|
)
|
|
15870
15916
|
}
|
|
15871
15917
|
) })
|
|
@@ -15889,7 +15935,7 @@ var Sidebar = ({
|
|
|
15889
15935
|
children: t2("X off", {
|
|
15890
15936
|
amount: formatCurrency(
|
|
15891
15937
|
Math.abs(amountOff),
|
|
15892
|
-
|
|
15938
|
+
selectedPlanBillingPrice?.currency
|
|
15893
15939
|
)
|
|
15894
15940
|
})
|
|
15895
15941
|
}
|
|
@@ -15905,7 +15951,7 @@ var Sidebar = ({
|
|
|
15905
15951
|
"-",
|
|
15906
15952
|
formatCurrency(
|
|
15907
15953
|
Math.abs(amountOff),
|
|
15908
|
-
|
|
15954
|
+
selectedPlanBillingPrice?.currency
|
|
15909
15955
|
)
|
|
15910
15956
|
]
|
|
15911
15957
|
}
|
|
@@ -15928,7 +15974,7 @@ var Sidebar = ({
|
|
|
15928
15974
|
$weight: theme.typography.text.fontWeight,
|
|
15929
15975
|
$color: theme.typography.text.color,
|
|
15930
15976
|
children: [
|
|
15931
|
-
planPeriod === "
|
|
15977
|
+
planPeriod === "year" ? "Yearly" : "Monthly",
|
|
15932
15978
|
" total:"
|
|
15933
15979
|
]
|
|
15934
15980
|
}
|
|
@@ -15981,7 +16027,7 @@ var Sidebar = ({
|
|
|
15981
16027
|
$color: theme.typography.text.color,
|
|
15982
16028
|
children: formatCurrency(
|
|
15983
16029
|
Math.max(0, dueNow),
|
|
15984
|
-
|
|
16030
|
+
selectedPlanBillingPrice?.currency
|
|
15985
16031
|
)
|
|
15986
16032
|
}
|
|
15987
16033
|
) })
|
|
@@ -16011,7 +16057,7 @@ var Sidebar = ({
|
|
|
16011
16057
|
$color: theme.typography.text.color,
|
|
16012
16058
|
children: formatCurrency(
|
|
16013
16059
|
Math.abs(dueNow),
|
|
16014
|
-
|
|
16060
|
+
selectedPlanBillingPrice?.currency
|
|
16015
16061
|
)
|
|
16016
16062
|
}
|
|
16017
16063
|
) })
|
|
@@ -16078,6 +16124,9 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16078
16124
|
$gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
16079
16125
|
$gap: "1rem",
|
|
16080
16126
|
children: addOns.map((addOn, index) => {
|
|
16127
|
+
const { price, currency } = getBillingPrice(
|
|
16128
|
+
period === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
16129
|
+
) || {};
|
|
16081
16130
|
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
16082
16131
|
Flex,
|
|
16083
16132
|
{
|
|
@@ -16121,10 +16170,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16121
16170
|
$size: theme.typography.heading2.fontSize,
|
|
16122
16171
|
$weight: theme.typography.heading2.fontWeight,
|
|
16123
16172
|
$color: theme.typography.heading2.color,
|
|
16124
|
-
children: formatCurrency(
|
|
16125
|
-
(period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
|
|
16126
|
-
(period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
|
|
16127
|
-
)
|
|
16173
|
+
children: formatCurrency(price ?? 0, currency)
|
|
16128
16174
|
}
|
|
16129
16175
|
),
|
|
16130
16176
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
@@ -16147,12 +16193,19 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16147
16193
|
$position: "absolute",
|
|
16148
16194
|
$right: "1rem",
|
|
16149
16195
|
$top: "1rem",
|
|
16150
|
-
$fontSize: "0.75rem",
|
|
16151
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16152
16196
|
$backgroundColor: theme.primary,
|
|
16153
16197
|
$borderRadius: "9999px",
|
|
16154
16198
|
$padding: "0.125rem 0.85rem",
|
|
16155
|
-
children:
|
|
16199
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
16200
|
+
Text,
|
|
16201
|
+
{
|
|
16202
|
+
$font: theme.typography.text.fontFamily,
|
|
16203
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
16204
|
+
$weight: theme.typography.text.fontWeight,
|
|
16205
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16206
|
+
children: t2("Active")
|
|
16207
|
+
}
|
|
16208
|
+
)
|
|
16156
16209
|
}
|
|
16157
16210
|
)
|
|
16158
16211
|
] }),
|
|
@@ -16616,11 +16669,14 @@ var Plan = ({
|
|
|
16616
16669
|
children: plans.map((plan, planIndex) => {
|
|
16617
16670
|
const count = entitlementCounts[plan.id];
|
|
16618
16671
|
const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
|
|
16619
|
-
const { price: planPrice, currency: planCurrency } = (
|
|
16672
|
+
const { price: planPrice, currency: planCurrency } = getBillingPrice(
|
|
16673
|
+
period === "year" ? plan.yearlyPrice : plan.monthlyPrice
|
|
16674
|
+
) || {};
|
|
16620
16675
|
const hasUsageBasedEntitlements = plan.entitlements.some(
|
|
16621
16676
|
(entitlement) => !!entitlement.priceBehavior
|
|
16622
16677
|
);
|
|
16623
16678
|
const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
|
|
16679
|
+
const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography.heading2;
|
|
16624
16680
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
16625
16681
|
Flex,
|
|
16626
16682
|
{
|
|
@@ -16674,11 +16730,11 @@ var Plan = ({
|
|
|
16674
16730
|
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
16675
16731
|
Text,
|
|
16676
16732
|
{
|
|
16677
|
-
$font:
|
|
16678
|
-
$size:
|
|
16679
|
-
$weight:
|
|
16680
|
-
$color:
|
|
16681
|
-
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom
|
|
16733
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
16734
|
+
$size: headerPriceFontStyle.fontSize,
|
|
16735
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
16736
|
+
$color: headerPriceFontStyle.color,
|
|
16737
|
+
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
|
|
16682
16738
|
}
|
|
16683
16739
|
),
|
|
16684
16740
|
!plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
@@ -16701,12 +16757,19 @@ var Plan = ({
|
|
|
16701
16757
|
$position: "absolute",
|
|
16702
16758
|
$right: "1rem",
|
|
16703
16759
|
$top: "1rem",
|
|
16704
|
-
$fontSize: "0.75rem",
|
|
16705
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16706
16760
|
$backgroundColor: theme.primary,
|
|
16707
16761
|
$borderRadius: "9999px",
|
|
16708
16762
|
$padding: "0.125rem 0.85rem",
|
|
16709
|
-
children:
|
|
16763
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
16764
|
+
Text,
|
|
16765
|
+
{
|
|
16766
|
+
$font: theme.typography.text.fontFamily,
|
|
16767
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
16768
|
+
$weight: theme.typography.text.fontWeight,
|
|
16769
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
16770
|
+
children: t2("Active")
|
|
16771
|
+
}
|
|
16772
|
+
)
|
|
16710
16773
|
}
|
|
16711
16774
|
)
|
|
16712
16775
|
]
|
|
@@ -16738,7 +16801,9 @@ var Plan = ({
|
|
|
16738
16801
|
const {
|
|
16739
16802
|
price: entitlementPrice,
|
|
16740
16803
|
currency: entitlementCurrency
|
|
16741
|
-
} = (
|
|
16804
|
+
} = getBillingPrice(
|
|
16805
|
+
period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
16806
|
+
) || {};
|
|
16742
16807
|
if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
|
|
16743
16808
|
return acc;
|
|
16744
16809
|
}
|
|
@@ -16948,7 +17013,7 @@ var Plan = ({
|
|
|
16948
17013
|
{
|
|
16949
17014
|
href: plan.customPlanConfig?.ctaWebSite ?? "#",
|
|
16950
17015
|
target: "_blank",
|
|
16951
|
-
children: plan.customPlanConfig?.ctaText ?? t2("
|
|
17016
|
+
children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
|
|
16952
17017
|
}
|
|
16953
17018
|
) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
16954
17019
|
Tooltip,
|
|
@@ -16984,6 +17049,9 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
16984
17049
|
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
|
|
16985
17050
|
(acc, { entitlement, quantity, usage }, index) => {
|
|
16986
17051
|
if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
|
|
17052
|
+
const { price, currency } = getBillingPrice(
|
|
17053
|
+
period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
17054
|
+
) || {};
|
|
16987
17055
|
acc.push(
|
|
16988
17056
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
16989
17057
|
Flex,
|
|
@@ -17087,10 +17155,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17087
17155
|
$weight: theme.typography.text.fontWeight,
|
|
17088
17156
|
$color: theme.typography.text.color,
|
|
17089
17157
|
children: [
|
|
17090
|
-
formatCurrency(
|
|
17091
|
-
((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity,
|
|
17092
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
|
|
17093
|
-
),
|
|
17158
|
+
formatCurrency((price ?? 0) * quantity, currency),
|
|
17094
17159
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
|
|
17095
17160
|
"/",
|
|
17096
17161
|
shortenPeriod(period)
|
|
@@ -17106,10 +17171,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17106
17171
|
$weight: theme.typography.text.fontWeight,
|
|
17107
17172
|
$color: unitPriceColor,
|
|
17108
17173
|
children: [
|
|
17109
|
-
formatCurrency(
|
|
17110
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0,
|
|
17111
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
|
|
17112
|
-
),
|
|
17174
|
+
formatCurrency(price ?? 0, currency),
|
|
17113
17175
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
|
|
17114
17176
|
"/",
|
|
17115
17177
|
getFeatureName(entitlement.feature, 1),
|
|
@@ -17260,7 +17322,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17260
17322
|
async (updates) => {
|
|
17261
17323
|
const period = updates.period || planPeriod;
|
|
17262
17324
|
const plan = updates.plan || selectedPlan;
|
|
17263
|
-
const planPriceId = period === "
|
|
17325
|
+
const planPriceId = period === "year" ? plan?.yearlyPrice?.id : plan?.monthlyPrice?.id;
|
|
17264
17326
|
if (!api || !plan || !planPriceId) {
|
|
17265
17327
|
return;
|
|
17266
17328
|
}
|
|
@@ -17275,7 +17337,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17275
17337
|
addOnIds: (updates.addOns || addOns).reduce(
|
|
17276
17338
|
(acc, addOn) => {
|
|
17277
17339
|
if (addOn.isSelected) {
|
|
17278
|
-
const addOnPriceId = (period === "
|
|
17340
|
+
const addOnPriceId = (period === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
|
|
17279
17341
|
if (addOnPriceId) {
|
|
17280
17342
|
acc.push({
|
|
17281
17343
|
addOnId: addOn.id,
|
|
@@ -17289,7 +17351,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17289
17351
|
),
|
|
17290
17352
|
payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
|
|
17291
17353
|
(acc, { entitlement, quantity }) => {
|
|
17292
|
-
const priceId = (period === "
|
|
17354
|
+
const priceId = (period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
|
|
17293
17355
|
if (priceId) {
|
|
17294
17356
|
acc.push({
|
|
17295
17357
|
priceId,
|
|
@@ -17740,8 +17802,10 @@ var PeriodToggle = ({
|
|
|
17740
17802
|
const [tooltipZIndex, setTooltipZIndex] = (0, import_react28.useState)(1);
|
|
17741
17803
|
const savingsPercentage = (0, import_react28.useMemo)(() => {
|
|
17742
17804
|
if (selectedPlan) {
|
|
17743
|
-
const
|
|
17744
|
-
const
|
|
17805
|
+
const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
|
|
17806
|
+
const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
|
|
17807
|
+
const monthly = (monthlyBillingPrice?.price ?? 0) * 12;
|
|
17808
|
+
const yearly = yearlyBillingPrice?.price ?? 0;
|
|
17745
17809
|
return Math.round((monthly - yearly) / monthly * 1e4) / 100;
|
|
17746
17810
|
}
|
|
17747
17811
|
return 0;
|
|
@@ -18270,25 +18334,11 @@ var Details = ({
|
|
|
18270
18334
|
const { t: t2 } = useTranslation();
|
|
18271
18335
|
const theme = nt();
|
|
18272
18336
|
const { data } = useEmbed();
|
|
18273
|
-
const currency = (0, import_react31.useMemo)(() => {
|
|
18274
|
-
|
|
18275
|
-
|
|
18276
|
-
}
|
|
18277
|
-
|
|
18278
|
-
return yearlyUsageBasedPrice?.currency;
|
|
18279
|
-
}
|
|
18280
|
-
}, [
|
|
18281
|
-
data.company?.plan?.planPeriod,
|
|
18282
|
-
monthlyUsageBasedPrice,
|
|
18283
|
-
yearlyUsageBasedPrice
|
|
18284
|
-
]);
|
|
18285
|
-
const price = (0, import_react31.useMemo)(() => {
|
|
18286
|
-
if (data.company?.plan?.planPeriod === "month") {
|
|
18287
|
-
return monthlyUsageBasedPrice?.price;
|
|
18288
|
-
}
|
|
18289
|
-
if (data.company?.plan?.planPeriod === "year") {
|
|
18290
|
-
return yearlyUsageBasedPrice?.price;
|
|
18291
|
-
}
|
|
18337
|
+
const { price, currency } = (0, import_react31.useMemo)(() => {
|
|
18338
|
+
const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
|
|
18339
|
+
data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
|
|
18340
|
+
) || {};
|
|
18341
|
+
return { price: entitlementPrice, currency: entitlementCurrency };
|
|
18292
18342
|
}, [
|
|
18293
18343
|
data.company?.plan?.planPeriod,
|
|
18294
18344
|
monthlyUsageBasedPrice,
|
|
@@ -18724,6 +18774,7 @@ var import_react34 = require("react");
|
|
|
18724
18774
|
// src/components/elements/metered-features/styles.ts
|
|
18725
18775
|
var Container4 = dt(Flex)`
|
|
18726
18776
|
flex-direction: column;
|
|
18777
|
+
gap: 1rem;
|
|
18727
18778
|
|
|
18728
18779
|
&:last-child {
|
|
18729
18780
|
overflow: hidden;
|
|
@@ -18748,6 +18799,15 @@ var Container4 = dt(Flex)`
|
|
|
18748
18799
|
`;
|
|
18749
18800
|
}}
|
|
18750
18801
|
}
|
|
18802
|
+
|
|
18803
|
+
${({ theme }) => {
|
|
18804
|
+
return theme.sectionLayout === "separate" && lt`
|
|
18805
|
+
${Element}:not(:is(${FussyChild})) {
|
|
18806
|
+
border-bottom-left-radius: 0;
|
|
18807
|
+
border-bottom-right-radius: 0;
|
|
18808
|
+
}
|
|
18809
|
+
`;
|
|
18810
|
+
}}
|
|
18751
18811
|
`;
|
|
18752
18812
|
|
|
18753
18813
|
// src/components/elements/metered-features/MeteredFeatures.tsx
|
|
@@ -18820,7 +18880,9 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
|
|
|
18820
18880
|
}, index) => {
|
|
18821
18881
|
const limit = softLimit ?? allocation ?? 0;
|
|
18822
18882
|
const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
|
|
18823
|
-
const { price, currency } = (
|
|
18883
|
+
const { price, currency } = getBillingPrice(
|
|
18884
|
+
planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
|
|
18885
|
+
) || {};
|
|
18824
18886
|
const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
18825
18887
|
ProgressBar,
|
|
18826
18888
|
{
|
|
@@ -18842,6 +18904,10 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
|
|
|
18842
18904
|
$alignItems: "center",
|
|
18843
18905
|
$padding: `${0.4375 * theme.card.padding / TEXT_BASE_SIZE}rem ${theme.card.padding / TEXT_BASE_SIZE}rem`,
|
|
18844
18906
|
$backgroundColor: isLightBackground ? darken(theme.card.background, 0.05) : lighten(theme.card.background, 0.1),
|
|
18907
|
+
...theme.sectionLayout === "separate" && {
|
|
18908
|
+
$borderBottomLeftRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`,
|
|
18909
|
+
$borderBottomRightRadius: `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`
|
|
18910
|
+
},
|
|
18845
18911
|
children: [
|
|
18846
18912
|
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
18847
18913
|
Text,
|
|
@@ -19679,8 +19745,10 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19679
19745
|
};
|
|
19680
19746
|
const usageBasedEntitlements = (featureUsage?.features || []).reduce(
|
|
19681
19747
|
(acc, usage) => {
|
|
19682
|
-
const { price, currency } = (
|
|
19683
|
-
|
|
19748
|
+
const { price, currency } = getBillingPrice(
|
|
19749
|
+
currentPlan?.planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
|
|
19750
|
+
) || {};
|
|
19751
|
+
if (usage.priceBehavior) {
|
|
19684
19752
|
acc.push({ ...usage, price, currency });
|
|
19685
19753
|
}
|
|
19686
19754
|
return acc;
|
|
@@ -19700,6 +19768,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19700
19768
|
const isTrialSubscription = billingSubscription?.status === "trialing";
|
|
19701
19769
|
const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
|
|
19702
19770
|
const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
|
|
19771
|
+
const headerPriceFontStyle = isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.header.price.fontStyle];
|
|
19703
19772
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
19704
19773
|
isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
19705
19774
|
Box,
|
|
@@ -19821,10 +19890,10 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19821
19890
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
19822
19891
|
Text,
|
|
19823
19892
|
{
|
|
19824
|
-
$font:
|
|
19825
|
-
$size:
|
|
19826
|
-
$weight:
|
|
19827
|
-
$color:
|
|
19893
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
19894
|
+
$size: headerPriceFontStyle.fontSize,
|
|
19895
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
19896
|
+
$color: headerPriceFontStyle.color,
|
|
19828
19897
|
children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
|
|
19829
19898
|
currentPlan.planPrice,
|
|
19830
19899
|
subscriptionCurrency
|
|
@@ -19961,7 +20030,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19961
20030
|
":",
|
|
19962
20031
|
" ",
|
|
19963
20032
|
formatCurrency(
|
|
19964
|
-
entitlement.price,
|
|
20033
|
+
entitlement.price ?? 0,
|
|
19965
20034
|
entitlement.currency
|
|
19966
20035
|
),
|
|
19967
20036
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
|
|
@@ -19983,7 +20052,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19983
20052
|
$color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
|
|
19984
20053
|
children: [
|
|
19985
20054
|
formatCurrency(
|
|
19986
|
-
entitlement.price,
|
|
20055
|
+
entitlement.price ?? 0,
|
|
19987
20056
|
entitlement.currency
|
|
19988
20057
|
),
|
|
19989
20058
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
|
|
@@ -20004,7 +20073,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
20004
20073
|
$color: theme.typography.text.color,
|
|
20005
20074
|
children: [
|
|
20006
20075
|
formatCurrency(
|
|
20007
|
-
entitlement.price * amount,
|
|
20076
|
+
(entitlement.price ?? 0) * amount,
|
|
20008
20077
|
entitlement.currency
|
|
20009
20078
|
),
|
|
20010
20079
|
(entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
|
|
@@ -20184,13 +20253,16 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20184
20253
|
$gap: "1rem",
|
|
20185
20254
|
children: plans.map((plan, planIndex, self2) => {
|
|
20186
20255
|
const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
|
|
20187
|
-
const { price: planPrice, currency: planCurrency } = (
|
|
20256
|
+
const { price: planPrice, currency: planCurrency } = getBillingPrice(
|
|
20257
|
+
selectedPeriod === "year" ? plan.yearlyPrice : plan.monthlyPrice
|
|
20258
|
+
) || {};
|
|
20188
20259
|
const count = entitlementCounts[plan.id];
|
|
20189
20260
|
const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
|
|
20190
20261
|
const hasUsageBasedEntitlements = plan.entitlements.some(
|
|
20191
20262
|
(entitlement) => !!entitlement.priceBehavior
|
|
20192
20263
|
);
|
|
20193
20264
|
const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
|
|
20265
|
+
const headerPriceFontStyle = plan.custom || isUsageBasedPlan ? theme.typography.heading3 : theme.typography[props.plans.name.fontStyle];
|
|
20194
20266
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20195
20267
|
Flex,
|
|
20196
20268
|
{
|
|
@@ -20239,11 +20311,11 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20239
20311
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20240
20312
|
Text,
|
|
20241
20313
|
{
|
|
20242
|
-
$font:
|
|
20243
|
-
$size:
|
|
20244
|
-
$weight:
|
|
20245
|
-
$color:
|
|
20246
|
-
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom
|
|
20314
|
+
$font: headerPriceFontStyle.fontFamily,
|
|
20315
|
+
$size: headerPriceFontStyle.fontSize,
|
|
20316
|
+
$weight: headerPriceFontStyle.fontWeight,
|
|
20317
|
+
$color: headerPriceFontStyle.color,
|
|
20318
|
+
children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
|
|
20247
20319
|
}
|
|
20248
20320
|
),
|
|
20249
20321
|
!plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
@@ -20266,12 +20338,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20266
20338
|
$position: "absolute",
|
|
20267
20339
|
$right: "1rem",
|
|
20268
20340
|
$top: "1rem",
|
|
20269
|
-
$fontSize: "0.75rem",
|
|
20270
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20271
20341
|
$backgroundColor: theme.primary,
|
|
20272
20342
|
$borderRadius: "9999px",
|
|
20273
20343
|
$padding: "0.125rem 0.85rem",
|
|
20274
|
-
children:
|
|
20344
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20345
|
+
Text,
|
|
20346
|
+
{
|
|
20347
|
+
$font: theme.typography.text.fontFamily,
|
|
20348
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
20349
|
+
$weight: theme.typography.text.fontWeight,
|
|
20350
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20351
|
+
children: trialEndDays ? t2("Trial ends in", { days: trialEndDays }) : t2("Active")
|
|
20352
|
+
}
|
|
20353
|
+
)
|
|
20275
20354
|
}
|
|
20276
20355
|
)
|
|
20277
20356
|
]
|
|
@@ -20305,7 +20384,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20305
20384
|
const {
|
|
20306
20385
|
price: entitlementPrice,
|
|
20307
20386
|
currency: entitlementCurrency
|
|
20308
|
-
} = (
|
|
20387
|
+
} = getBillingPrice(
|
|
20388
|
+
selectedPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
20389
|
+
) || {};
|
|
20309
20390
|
if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
|
|
20310
20391
|
return acc;
|
|
20311
20392
|
}
|
|
@@ -20528,7 +20609,7 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20528
20609
|
{
|
|
20529
20610
|
href: plan.customPlanConfig?.ctaWebSite ?? "#",
|
|
20530
20611
|
target: "_blank",
|
|
20531
|
-
children: plan.customPlanConfig?.ctaText ?? t2("
|
|
20612
|
+
children: plan.customPlanConfig?.ctaText ?? t2("Talk to support")
|
|
20532
20613
|
}
|
|
20533
20614
|
) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20534
20615
|
Tooltip,
|
|
@@ -20579,7 +20660,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20579
20660
|
$gap: "1rem",
|
|
20580
20661
|
children: addOns.map((addOn, addOnIndex) => {
|
|
20581
20662
|
const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
|
|
20582
|
-
const { price: addOnPrice, currency: addOnCurrency } = (
|
|
20663
|
+
const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
|
|
20664
|
+
selectedPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
20665
|
+
) || {};
|
|
20583
20666
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20584
20667
|
Flex,
|
|
20585
20668
|
{
|
|
@@ -20646,12 +20729,19 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20646
20729
|
$position: "absolute",
|
|
20647
20730
|
$right: "1rem",
|
|
20648
20731
|
$top: "1rem",
|
|
20649
|
-
$fontSize: "0.75rem",
|
|
20650
|
-
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20651
20732
|
$backgroundColor: theme.primary,
|
|
20652
20733
|
$borderRadius: "9999px",
|
|
20653
20734
|
$padding: "0.125rem 0.85rem",
|
|
20654
|
-
children:
|
|
20735
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
20736
|
+
Text,
|
|
20737
|
+
{
|
|
20738
|
+
$font: theme.typography.text.fontFamily,
|
|
20739
|
+
$size: 0.75 * theme.typography.text.fontSize,
|
|
20740
|
+
$weight: theme.typography.text.fontWeight,
|
|
20741
|
+
$color: hexToHSL(theme.primary).l > 50 ? "#000000" : "#FFFFFF",
|
|
20742
|
+
children: t2("Active")
|
|
20743
|
+
}
|
|
20744
|
+
)
|
|
20655
20745
|
}
|
|
20656
20746
|
)
|
|
20657
20747
|
] }),
|