@schematichq/schematic-components 0.6.4 → 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 +213 -173
- package/dist/schematic-components.d.ts +24 -0
- package/dist/schematic-components.esm.js +213 -173
- package/package.json +5 -5
|
@@ -10721,7 +10721,8 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
|
10721
10721
|
externalPriceId: json["external_price_id"],
|
|
10722
10722
|
id: json["id"],
|
|
10723
10723
|
interval: json["interval"],
|
|
10724
|
-
price: json["price"]
|
|
10724
|
+
price: json["price"],
|
|
10725
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"]
|
|
10725
10726
|
};
|
|
10726
10727
|
}
|
|
10727
10728
|
|
|
@@ -10741,6 +10742,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
|
|
|
10741
10742
|
isActive: json["is_active"],
|
|
10742
10743
|
meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
|
|
10743
10744
|
price: json["price"],
|
|
10745
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10744
10746
|
priceExternalId: json["price_external_id"],
|
|
10745
10747
|
priceId: json["price_id"],
|
|
10746
10748
|
productExternalId: json["product_external_id"],
|
|
@@ -10767,6 +10769,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
|
|
|
10767
10769
|
externalId: json["external_id"],
|
|
10768
10770
|
name: json["name"],
|
|
10769
10771
|
price: json["price"],
|
|
10772
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10770
10773
|
prices: json["prices"].map(
|
|
10771
10774
|
BillingPriceResponseDataFromJSON
|
|
10772
10775
|
),
|
|
@@ -10795,6 +10798,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
|
|
|
10795
10798
|
meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
|
|
10796
10799
|
name: json["name"],
|
|
10797
10800
|
price: json["price"],
|
|
10801
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10798
10802
|
priceExternalId: json["price_external_id"],
|
|
10799
10803
|
priceId: json["price_id"],
|
|
10800
10804
|
quantity: json["quantity"],
|
|
@@ -13107,7 +13111,7 @@ var EmbedProvider = ({
|
|
|
13107
13111
|
(0, import_react11.useEffect)(() => {
|
|
13108
13112
|
if (accessToken) {
|
|
13109
13113
|
const { headers = {} } = apiConfig ?? {};
|
|
13110
|
-
headers["X-Schematic-Components-Version"] = "0.
|
|
13114
|
+
headers["X-Schematic-Components-Version"] = "0.7.0";
|
|
13111
13115
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
13112
13116
|
const config = new Configuration({
|
|
13113
13117
|
...apiConfig,
|
|
@@ -13183,6 +13187,13 @@ var getFeatureName = (feature, count = 0) => {
|
|
|
13183
13187
|
}
|
|
13184
13188
|
return (0, import_pluralize.default)(name, count);
|
|
13185
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
|
+
}
|
|
13186
13197
|
|
|
13187
13198
|
// src/utils/color.ts
|
|
13188
13199
|
function hexToHSL(color) {
|
|
@@ -13322,7 +13333,7 @@ function formatCurrency(amount, currency) {
|
|
|
13322
13333
|
return `$${formatted}${symbol}`;
|
|
13323
13334
|
};
|
|
13324
13335
|
if (dollars >= 1e6) {
|
|
13325
|
-
formatValue(dollars / 1e6, "M");
|
|
13336
|
+
return formatValue(dollars / 1e6, "M");
|
|
13326
13337
|
}
|
|
13327
13338
|
if (dollars >= 1e3) {
|
|
13328
13339
|
return formatValue(dollars / 1e3, "k");
|
|
@@ -14966,25 +14977,32 @@ var Sidebar = ({
|
|
|
14966
14977
|
({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
|
|
14967
14978
|
);
|
|
14968
14979
|
const subscriptionPrice = (0, import_react23.useMemo)(() => {
|
|
14969
|
-
let total = 0;
|
|
14970
14980
|
let planPrice;
|
|
14971
14981
|
let currency;
|
|
14972
14982
|
if (selectedPlan) {
|
|
14973
|
-
|
|
14974
|
-
|
|
14975
|
-
|
|
14976
|
-
|
|
14977
|
-
|
|
14983
|
+
const planBillingPrice = getBillingPrice(
|
|
14984
|
+
planPeriod === "year" ? selectedPlan.yearlyPrice : selectedPlan.monthlyPrice
|
|
14985
|
+
);
|
|
14986
|
+
planPrice = planBillingPrice?.price;
|
|
14987
|
+
currency = planBillingPrice?.currency;
|
|
14978
14988
|
} else if (typeof currentPlan?.planPrice === "number") {
|
|
14979
14989
|
planPrice = currentPlan.planPrice;
|
|
14980
14990
|
}
|
|
14991
|
+
let total = 0;
|
|
14992
|
+
if (planPrice) {
|
|
14993
|
+
total += planPrice;
|
|
14994
|
+
}
|
|
14981
14995
|
const addOnCost = addOns.reduce(
|
|
14982
|
-
(sum, addOn) => sum + (
|
|
14996
|
+
(sum, addOn) => sum + (getBillingPrice(
|
|
14997
|
+
planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
14998
|
+
)?.price ?? 0),
|
|
14983
14999
|
0
|
|
14984
15000
|
);
|
|
14985
15001
|
total += addOnCost;
|
|
14986
15002
|
const payInAdvanceCost = payInAdvanceEntitlements.reduce(
|
|
14987
|
-
(sum, { entitlement, quantity }) => sum + quantity * ((
|
|
15003
|
+
(sum, { entitlement, quantity }) => sum + quantity * (getBillingPrice(
|
|
15004
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15005
|
+
)?.price ?? 0),
|
|
14988
15006
|
0
|
|
14989
15007
|
);
|
|
14990
15008
|
total += payInAdvanceCost;
|
|
@@ -15008,7 +15026,7 @@ var Sidebar = ({
|
|
|
15008
15026
|
window.dispatchEvent(event);
|
|
15009
15027
|
};
|
|
15010
15028
|
const checkout = (0, import_react23.useCallback)(async () => {
|
|
15011
|
-
const priceId = (planPeriod === "
|
|
15029
|
+
const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
|
|
15012
15030
|
if (!api || !selectedPlan || !priceId) {
|
|
15013
15031
|
return;
|
|
15014
15032
|
}
|
|
@@ -15021,7 +15039,7 @@ var Sidebar = ({
|
|
|
15021
15039
|
newPriceId: priceId,
|
|
15022
15040
|
addOnIds: addOns.reduce((acc, addOn) => {
|
|
15023
15041
|
if (addOn.isSelected && !selectedPlan.companyCanTrial) {
|
|
15024
|
-
const addOnPriceId = (planPeriod === "
|
|
15042
|
+
const addOnPriceId = (planPeriod === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
|
|
15025
15043
|
if (addOnPriceId) {
|
|
15026
15044
|
acc.push({
|
|
15027
15045
|
addOnId: addOn.id,
|
|
@@ -15033,7 +15051,7 @@ var Sidebar = ({
|
|
|
15033
15051
|
}, []),
|
|
15034
15052
|
payInAdvance: payInAdvanceEntitlements.reduce(
|
|
15035
15053
|
(acc, { entitlement, quantity }) => {
|
|
15036
|
-
const priceId2 = (planPeriod === "
|
|
15054
|
+
const priceId2 = (planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
|
|
15037
15055
|
if (priceId2) {
|
|
15038
15056
|
acc.push({
|
|
15039
15057
|
priceId: priceId2,
|
|
@@ -15156,6 +15174,9 @@ var Sidebar = ({
|
|
|
15156
15174
|
if (isTrialable && selectedPlan.trialDays) {
|
|
15157
15175
|
trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
|
|
15158
15176
|
}
|
|
15177
|
+
const selectedPlanBillingPrice = getBillingPrice(
|
|
15178
|
+
planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice
|
|
15179
|
+
);
|
|
15159
15180
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15160
15181
|
Flex,
|
|
15161
15182
|
{
|
|
@@ -15316,8 +15337,8 @@ var Sidebar = ({
|
|
|
15316
15337
|
$color: theme.typography.text.color,
|
|
15317
15338
|
children: [
|
|
15318
15339
|
formatCurrency(
|
|
15319
|
-
|
|
15320
|
-
|
|
15340
|
+
selectedPlanBillingPrice?.price ?? 0,
|
|
15341
|
+
selectedPlanBillingPrice?.currency
|
|
15321
15342
|
),
|
|
15322
15343
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15323
15344
|
"/",
|
|
@@ -15345,7 +15366,12 @@ var Sidebar = ({
|
|
|
15345
15366
|
removedUsageBasedEntitlements.reduce(
|
|
15346
15367
|
(acc, { allocation, quantity, usage }, index) => {
|
|
15347
15368
|
if (typeof allocation === "number" && usage.feature?.name) {
|
|
15348
|
-
const
|
|
15369
|
+
const {
|
|
15370
|
+
price: entitlementPrice,
|
|
15371
|
+
currency: entitlementCurrency
|
|
15372
|
+
} = getBillingPrice(
|
|
15373
|
+
planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
|
|
15374
|
+
) || {};
|
|
15349
15375
|
acc.push(
|
|
15350
15376
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15351
15377
|
Flex,
|
|
@@ -15379,20 +15405,20 @@ var Sidebar = ({
|
|
|
15379
15405
|
$weight: theme.typography.text.fontWeight,
|
|
15380
15406
|
$color: theme.typography.text.color,
|
|
15381
15407
|
children: [
|
|
15382
|
-
usage.priceBehavior === "pay_in_advance" &&
|
|
15408
|
+
usage.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15383
15409
|
formatCurrency(
|
|
15384
|
-
|
|
15385
|
-
|
|
15410
|
+
(entitlementPrice ?? 0) * quantity,
|
|
15411
|
+
entitlementCurrency
|
|
15386
15412
|
),
|
|
15387
15413
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15388
15414
|
"/",
|
|
15389
15415
|
shortenPeriod(planPeriod)
|
|
15390
15416
|
] })
|
|
15391
15417
|
] }),
|
|
15392
|
-
usage.priceBehavior === "pay_as_you_go" &&
|
|
15418
|
+
usage.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15393
15419
|
formatCurrency(
|
|
15394
|
-
|
|
15395
|
-
|
|
15420
|
+
entitlementPrice ?? 0,
|
|
15421
|
+
entitlementCurrency
|
|
15396
15422
|
),
|
|
15397
15423
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15398
15424
|
"/",
|
|
@@ -15415,6 +15441,12 @@ var Sidebar = ({
|
|
|
15415
15441
|
changedUsageBasedEntitlements.reduce(
|
|
15416
15442
|
(acc, { entitlement, previous, next: next2 }, index) => {
|
|
15417
15443
|
if (entitlement?.feature?.name) {
|
|
15444
|
+
const {
|
|
15445
|
+
price: entitlementPrice,
|
|
15446
|
+
currency: entitlementCurrency
|
|
15447
|
+
} = getBillingPrice(
|
|
15448
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15449
|
+
) || {};
|
|
15418
15450
|
acc.push(
|
|
15419
15451
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { children: [
|
|
15420
15452
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
@@ -15450,8 +15482,8 @@ var Sidebar = ({
|
|
|
15450
15482
|
$color: theme.typography.text.color,
|
|
15451
15483
|
children: [
|
|
15452
15484
|
formatCurrency(
|
|
15453
|
-
(
|
|
15454
|
-
|
|
15485
|
+
(entitlementPrice ?? 0) * previous.quantity,
|
|
15486
|
+
entitlementCurrency
|
|
15455
15487
|
),
|
|
15456
15488
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15457
15489
|
"/",
|
|
@@ -15493,8 +15525,8 @@ var Sidebar = ({
|
|
|
15493
15525
|
$color: theme.typography.text.color,
|
|
15494
15526
|
children: [
|
|
15495
15527
|
formatCurrency(
|
|
15496
|
-
(
|
|
15497
|
-
|
|
15528
|
+
(entitlementPrice ?? 0) * next2.quantity,
|
|
15529
|
+
entitlementCurrency
|
|
15498
15530
|
),
|
|
15499
15531
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15500
15532
|
"/",
|
|
@@ -15516,7 +15548,12 @@ var Sidebar = ({
|
|
|
15516
15548
|
addedUsageBasedEntitlements.reduce(
|
|
15517
15549
|
(acc, { entitlement, quantity }, index) => {
|
|
15518
15550
|
if (entitlement.feature?.name) {
|
|
15519
|
-
const
|
|
15551
|
+
const {
|
|
15552
|
+
price: entitlementPrice,
|
|
15553
|
+
currency: entitlementCurrency
|
|
15554
|
+
} = getBillingPrice(
|
|
15555
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15556
|
+
) || {};
|
|
15520
15557
|
acc.push(
|
|
15521
15558
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
15522
15559
|
Flex,
|
|
@@ -15547,20 +15584,20 @@ var Sidebar = ({
|
|
|
15547
15584
|
$weight: theme.typography.text.fontWeight,
|
|
15548
15585
|
$color: theme.typography.text.color,
|
|
15549
15586
|
children: [
|
|
15550
|
-
entitlement.priceBehavior === "pay_in_advance" &&
|
|
15587
|
+
entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15551
15588
|
formatCurrency(
|
|
15552
|
-
|
|
15553
|
-
|
|
15589
|
+
(entitlementPrice ?? 0) * quantity,
|
|
15590
|
+
entitlementCurrency
|
|
15554
15591
|
),
|
|
15555
15592
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15556
15593
|
"/",
|
|
15557
15594
|
shortenPeriod(planPeriod)
|
|
15558
15595
|
] })
|
|
15559
15596
|
] }),
|
|
15560
|
-
entitlement.priceBehavior === "pay_as_you_go" &&
|
|
15597
|
+
entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15561
15598
|
formatCurrency(
|
|
15562
|
-
|
|
15563
|
-
|
|
15599
|
+
entitlementPrice ?? 0,
|
|
15600
|
+
entitlementCurrency
|
|
15564
15601
|
),
|
|
15565
15602
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
|
|
15566
15603
|
"/",
|
|
@@ -15619,8 +15656,8 @@ var Sidebar = ({
|
|
|
15619
15656
|
children: [
|
|
15620
15657
|
"-",
|
|
15621
15658
|
formatCurrency(
|
|
15622
|
-
|
|
15623
|
-
|
|
15659
|
+
selectedPlanBillingPrice?.price ?? 0,
|
|
15660
|
+
selectedPlanBillingPrice?.currency
|
|
15624
15661
|
),
|
|
15625
15662
|
"/",
|
|
15626
15663
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("sub", { children: shortenPeriod(planPeriod) })
|
|
@@ -15642,89 +15679,93 @@ var Sidebar = ({
|
|
|
15642
15679
|
children: t2("Add-ons")
|
|
15643
15680
|
}
|
|
15644
15681
|
) }),
|
|
15645
|
-
removedAddOns.map((addOn, index) =>
|
|
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
|
-
|
|
15723
|
-
|
|
15724
|
-
|
|
15725
|
-
|
|
15726
|
-
|
|
15727
|
-
|
|
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
|
+
})
|
|
15728
15769
|
] }),
|
|
15729
15770
|
proration !== 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
15730
15771
|
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { $opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
@@ -15763,7 +15804,7 @@ var Sidebar = ({
|
|
|
15763
15804
|
$color: theme.typography.text.color,
|
|
15764
15805
|
children: formatCurrency(
|
|
15765
15806
|
proration,
|
|
15766
|
-
|
|
15807
|
+
selectedPlanBillingPrice?.currency
|
|
15767
15808
|
)
|
|
15768
15809
|
}
|
|
15769
15810
|
) })
|
|
@@ -15870,7 +15911,7 @@ var Sidebar = ({
|
|
|
15870
15911
|
$color: theme.typography.text.color,
|
|
15871
15912
|
children: formatCurrency(
|
|
15872
15913
|
newCharges / 100 * percentOff,
|
|
15873
|
-
|
|
15914
|
+
selectedPlanBillingPrice?.currency
|
|
15874
15915
|
)
|
|
15875
15916
|
}
|
|
15876
15917
|
) })
|
|
@@ -15894,7 +15935,7 @@ var Sidebar = ({
|
|
|
15894
15935
|
children: t2("X off", {
|
|
15895
15936
|
amount: formatCurrency(
|
|
15896
15937
|
Math.abs(amountOff),
|
|
15897
|
-
|
|
15938
|
+
selectedPlanBillingPrice?.currency
|
|
15898
15939
|
)
|
|
15899
15940
|
})
|
|
15900
15941
|
}
|
|
@@ -15910,7 +15951,7 @@ var Sidebar = ({
|
|
|
15910
15951
|
"-",
|
|
15911
15952
|
formatCurrency(
|
|
15912
15953
|
Math.abs(amountOff),
|
|
15913
|
-
|
|
15954
|
+
selectedPlanBillingPrice?.currency
|
|
15914
15955
|
)
|
|
15915
15956
|
]
|
|
15916
15957
|
}
|
|
@@ -15933,7 +15974,7 @@ var Sidebar = ({
|
|
|
15933
15974
|
$weight: theme.typography.text.fontWeight,
|
|
15934
15975
|
$color: theme.typography.text.color,
|
|
15935
15976
|
children: [
|
|
15936
|
-
planPeriod === "
|
|
15977
|
+
planPeriod === "year" ? "Yearly" : "Monthly",
|
|
15937
15978
|
" total:"
|
|
15938
15979
|
]
|
|
15939
15980
|
}
|
|
@@ -15986,7 +16027,7 @@ var Sidebar = ({
|
|
|
15986
16027
|
$color: theme.typography.text.color,
|
|
15987
16028
|
children: formatCurrency(
|
|
15988
16029
|
Math.max(0, dueNow),
|
|
15989
|
-
|
|
16030
|
+
selectedPlanBillingPrice?.currency
|
|
15990
16031
|
)
|
|
15991
16032
|
}
|
|
15992
16033
|
) })
|
|
@@ -16016,7 +16057,7 @@ var Sidebar = ({
|
|
|
16016
16057
|
$color: theme.typography.text.color,
|
|
16017
16058
|
children: formatCurrency(
|
|
16018
16059
|
Math.abs(dueNow),
|
|
16019
|
-
|
|
16060
|
+
selectedPlanBillingPrice?.currency
|
|
16020
16061
|
)
|
|
16021
16062
|
}
|
|
16022
16063
|
) })
|
|
@@ -16083,6 +16124,9 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16083
16124
|
$gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
16084
16125
|
$gap: "1rem",
|
|
16085
16126
|
children: addOns.map((addOn, index) => {
|
|
16127
|
+
const { price, currency } = getBillingPrice(
|
|
16128
|
+
period === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
16129
|
+
) || {};
|
|
16086
16130
|
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
16087
16131
|
Flex,
|
|
16088
16132
|
{
|
|
@@ -16126,10 +16170,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16126
16170
|
$size: theme.typography.heading2.fontSize,
|
|
16127
16171
|
$weight: theme.typography.heading2.fontWeight,
|
|
16128
16172
|
$color: theme.typography.heading2.color,
|
|
16129
|
-
children: formatCurrency(
|
|
16130
|
-
(period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
|
|
16131
|
-
(period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
|
|
16132
|
-
)
|
|
16173
|
+
children: formatCurrency(price ?? 0, currency)
|
|
16133
16174
|
}
|
|
16134
16175
|
),
|
|
16135
16176
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
@@ -16628,7 +16669,9 @@ var Plan = ({
|
|
|
16628
16669
|
children: plans.map((plan, planIndex) => {
|
|
16629
16670
|
const count = entitlementCounts[plan.id];
|
|
16630
16671
|
const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
|
|
16631
|
-
const { price: planPrice, currency: planCurrency } = (
|
|
16672
|
+
const { price: planPrice, currency: planCurrency } = getBillingPrice(
|
|
16673
|
+
period === "year" ? plan.yearlyPrice : plan.monthlyPrice
|
|
16674
|
+
) || {};
|
|
16632
16675
|
const hasUsageBasedEntitlements = plan.entitlements.some(
|
|
16633
16676
|
(entitlement) => !!entitlement.priceBehavior
|
|
16634
16677
|
);
|
|
@@ -16758,7 +16801,9 @@ var Plan = ({
|
|
|
16758
16801
|
const {
|
|
16759
16802
|
price: entitlementPrice,
|
|
16760
16803
|
currency: entitlementCurrency
|
|
16761
|
-
} = (
|
|
16804
|
+
} = getBillingPrice(
|
|
16805
|
+
period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
16806
|
+
) || {};
|
|
16762
16807
|
if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
|
|
16763
16808
|
return acc;
|
|
16764
16809
|
}
|
|
@@ -17004,6 +17049,9 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17004
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(
|
|
17005
17050
|
(acc, { entitlement, quantity, usage }, index) => {
|
|
17006
17051
|
if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
|
|
17052
|
+
const { price, currency } = getBillingPrice(
|
|
17053
|
+
period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
17054
|
+
) || {};
|
|
17007
17055
|
acc.push(
|
|
17008
17056
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
17009
17057
|
Flex,
|
|
@@ -17107,10 +17155,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17107
17155
|
$weight: theme.typography.text.fontWeight,
|
|
17108
17156
|
$color: theme.typography.text.color,
|
|
17109
17157
|
children: [
|
|
17110
|
-
formatCurrency(
|
|
17111
|
-
((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity,
|
|
17112
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
|
|
17113
|
-
),
|
|
17158
|
+
formatCurrency((price ?? 0) * quantity, currency),
|
|
17114
17159
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
|
|
17115
17160
|
"/",
|
|
17116
17161
|
shortenPeriod(period)
|
|
@@ -17126,10 +17171,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17126
17171
|
$weight: theme.typography.text.fontWeight,
|
|
17127
17172
|
$color: unitPriceColor,
|
|
17128
17173
|
children: [
|
|
17129
|
-
formatCurrency(
|
|
17130
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0,
|
|
17131
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
|
|
17132
|
-
),
|
|
17174
|
+
formatCurrency(price ?? 0, currency),
|
|
17133
17175
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
|
|
17134
17176
|
"/",
|
|
17135
17177
|
getFeatureName(entitlement.feature, 1),
|
|
@@ -17280,7 +17322,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17280
17322
|
async (updates) => {
|
|
17281
17323
|
const period = updates.period || planPeriod;
|
|
17282
17324
|
const plan = updates.plan || selectedPlan;
|
|
17283
|
-
const planPriceId = period === "
|
|
17325
|
+
const planPriceId = period === "year" ? plan?.yearlyPrice?.id : plan?.monthlyPrice?.id;
|
|
17284
17326
|
if (!api || !plan || !planPriceId) {
|
|
17285
17327
|
return;
|
|
17286
17328
|
}
|
|
@@ -17295,7 +17337,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17295
17337
|
addOnIds: (updates.addOns || addOns).reduce(
|
|
17296
17338
|
(acc, addOn) => {
|
|
17297
17339
|
if (addOn.isSelected) {
|
|
17298
|
-
const addOnPriceId = (period === "
|
|
17340
|
+
const addOnPriceId = (period === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
|
|
17299
17341
|
if (addOnPriceId) {
|
|
17300
17342
|
acc.push({
|
|
17301
17343
|
addOnId: addOn.id,
|
|
@@ -17309,7 +17351,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17309
17351
|
),
|
|
17310
17352
|
payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
|
|
17311
17353
|
(acc, { entitlement, quantity }) => {
|
|
17312
|
-
const priceId = (period === "
|
|
17354
|
+
const priceId = (period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
|
|
17313
17355
|
if (priceId) {
|
|
17314
17356
|
acc.push({
|
|
17315
17357
|
priceId,
|
|
@@ -17760,8 +17802,10 @@ var PeriodToggle = ({
|
|
|
17760
17802
|
const [tooltipZIndex, setTooltipZIndex] = (0, import_react28.useState)(1);
|
|
17761
17803
|
const savingsPercentage = (0, import_react28.useMemo)(() => {
|
|
17762
17804
|
if (selectedPlan) {
|
|
17763
|
-
const
|
|
17764
|
-
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;
|
|
17765
17809
|
return Math.round((monthly - yearly) / monthly * 1e4) / 100;
|
|
17766
17810
|
}
|
|
17767
17811
|
return 0;
|
|
@@ -18290,25 +18334,11 @@ var Details = ({
|
|
|
18290
18334
|
const { t: t2 } = useTranslation();
|
|
18291
18335
|
const theme = nt();
|
|
18292
18336
|
const { data } = useEmbed();
|
|
18293
|
-
const currency = (0, import_react31.useMemo)(() => {
|
|
18294
|
-
|
|
18295
|
-
|
|
18296
|
-
}
|
|
18297
|
-
|
|
18298
|
-
return yearlyUsageBasedPrice?.currency;
|
|
18299
|
-
}
|
|
18300
|
-
}, [
|
|
18301
|
-
data.company?.plan?.planPeriod,
|
|
18302
|
-
monthlyUsageBasedPrice,
|
|
18303
|
-
yearlyUsageBasedPrice
|
|
18304
|
-
]);
|
|
18305
|
-
const price = (0, import_react31.useMemo)(() => {
|
|
18306
|
-
if (data.company?.plan?.planPeriod === "month") {
|
|
18307
|
-
return monthlyUsageBasedPrice?.price;
|
|
18308
|
-
}
|
|
18309
|
-
if (data.company?.plan?.planPeriod === "year") {
|
|
18310
|
-
return yearlyUsageBasedPrice?.price;
|
|
18311
|
-
}
|
|
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 };
|
|
18312
18342
|
}, [
|
|
18313
18343
|
data.company?.plan?.planPeriod,
|
|
18314
18344
|
monthlyUsageBasedPrice,
|
|
@@ -18850,7 +18880,9 @@ var MeteredFeatures = (0, import_react34.forwardRef)(({ className, ...rest }, re
|
|
|
18850
18880
|
}, index) => {
|
|
18851
18881
|
const limit = softLimit ?? allocation ?? 0;
|
|
18852
18882
|
const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
|
|
18853
|
-
const { price, currency } = (
|
|
18883
|
+
const { price, currency } = getBillingPrice(
|
|
18884
|
+
planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
|
|
18885
|
+
) || {};
|
|
18854
18886
|
const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
18855
18887
|
ProgressBar,
|
|
18856
18888
|
{
|
|
@@ -19713,8 +19745,10 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19713
19745
|
};
|
|
19714
19746
|
const usageBasedEntitlements = (featureUsage?.features || []).reduce(
|
|
19715
19747
|
(acc, usage) => {
|
|
19716
|
-
const { price, currency } = (
|
|
19717
|
-
|
|
19748
|
+
const { price, currency } = getBillingPrice(
|
|
19749
|
+
currentPlan?.planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
|
|
19750
|
+
) || {};
|
|
19751
|
+
if (usage.priceBehavior) {
|
|
19718
19752
|
acc.push({ ...usage, price, currency });
|
|
19719
19753
|
}
|
|
19720
19754
|
return acc;
|
|
@@ -19996,7 +20030,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
19996
20030
|
":",
|
|
19997
20031
|
" ",
|
|
19998
20032
|
formatCurrency(
|
|
19999
|
-
entitlement.price,
|
|
20033
|
+
entitlement.price ?? 0,
|
|
20000
20034
|
entitlement.currency
|
|
20001
20035
|
),
|
|
20002
20036
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
|
|
@@ -20018,7 +20052,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
20018
20052
|
$color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
|
|
20019
20053
|
children: [
|
|
20020
20054
|
formatCurrency(
|
|
20021
|
-
entitlement.price,
|
|
20055
|
+
entitlement.price ?? 0,
|
|
20022
20056
|
entitlement.currency
|
|
20023
20057
|
),
|
|
20024
20058
|
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
|
|
@@ -20039,7 +20073,7 @@ var PlanManager = (0, import_react38.forwardRef)(({ children, className, portal,
|
|
|
20039
20073
|
$color: theme.typography.text.color,
|
|
20040
20074
|
children: [
|
|
20041
20075
|
formatCurrency(
|
|
20042
|
-
entitlement.price * amount,
|
|
20076
|
+
(entitlement.price ?? 0) * amount,
|
|
20043
20077
|
entitlement.currency
|
|
20044
20078
|
),
|
|
20045
20079
|
(entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("sub", { children: [
|
|
@@ -20219,7 +20253,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20219
20253
|
$gap: "1rem",
|
|
20220
20254
|
children: plans.map((plan, planIndex, self2) => {
|
|
20221
20255
|
const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
|
|
20222
|
-
const { price: planPrice, currency: planCurrency } = (
|
|
20256
|
+
const { price: planPrice, currency: planCurrency } = getBillingPrice(
|
|
20257
|
+
selectedPeriod === "year" ? plan.yearlyPrice : plan.monthlyPrice
|
|
20258
|
+
) || {};
|
|
20223
20259
|
const count = entitlementCounts[plan.id];
|
|
20224
20260
|
const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
|
|
20225
20261
|
const hasUsageBasedEntitlements = plan.entitlements.some(
|
|
@@ -20348,7 +20384,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20348
20384
|
const {
|
|
20349
20385
|
price: entitlementPrice,
|
|
20350
20386
|
currency: entitlementCurrency
|
|
20351
|
-
} = (
|
|
20387
|
+
} = getBillingPrice(
|
|
20388
|
+
selectedPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
20389
|
+
) || {};
|
|
20352
20390
|
if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
|
|
20353
20391
|
return acc;
|
|
20354
20392
|
}
|
|
@@ -20622,7 +20660,9 @@ var PricingTable = (0, import_react39.forwardRef)(({ children, className, ...res
|
|
|
20622
20660
|
$gap: "1rem",
|
|
20623
20661
|
children: addOns.map((addOn, addOnIndex) => {
|
|
20624
20662
|
const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
|
|
20625
|
-
const { price: addOnPrice, currency: addOnCurrency } = (
|
|
20663
|
+
const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
|
|
20664
|
+
selectedPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
20665
|
+
) || {};
|
|
20626
20666
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
20627
20667
|
Flex,
|
|
20628
20668
|
{
|