@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
|
@@ -10671,7 +10671,8 @@ function BillingPriceResponseDataFromJSONTyped(json, ignoreDiscriminator) {
|
|
|
10671
10671
|
externalPriceId: json["external_price_id"],
|
|
10672
10672
|
id: json["id"],
|
|
10673
10673
|
interval: json["interval"],
|
|
10674
|
-
price: json["price"]
|
|
10674
|
+
price: json["price"],
|
|
10675
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"]
|
|
10675
10676
|
};
|
|
10676
10677
|
}
|
|
10677
10678
|
|
|
@@ -10691,6 +10692,7 @@ function BillingPriceViewFromJSONTyped(json, ignoreDiscriminator) {
|
|
|
10691
10692
|
isActive: json["is_active"],
|
|
10692
10693
|
meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
|
|
10693
10694
|
price: json["price"],
|
|
10695
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10694
10696
|
priceExternalId: json["price_external_id"],
|
|
10695
10697
|
priceId: json["price_id"],
|
|
10696
10698
|
productExternalId: json["product_external_id"],
|
|
@@ -10717,6 +10719,7 @@ function BillingProductDetailResponseDataFromJSONTyped(json, ignoreDiscriminator
|
|
|
10717
10719
|
externalId: json["external_id"],
|
|
10718
10720
|
name: json["name"],
|
|
10719
10721
|
price: json["price"],
|
|
10722
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10720
10723
|
prices: json["prices"].map(
|
|
10721
10724
|
BillingPriceResponseDataFromJSON
|
|
10722
10725
|
),
|
|
@@ -10745,6 +10748,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
|
|
|
10745
10748
|
meterId: json["meter_id"] == null ? void 0 : json["meter_id"],
|
|
10746
10749
|
name: json["name"],
|
|
10747
10750
|
price: json["price"],
|
|
10751
|
+
priceDecimal: json["price_decimal"] == null ? void 0 : json["price_decimal"],
|
|
10748
10752
|
priceExternalId: json["price_external_id"],
|
|
10749
10753
|
priceId: json["price_id"],
|
|
10750
10754
|
quantity: json["quantity"],
|
|
@@ -13057,7 +13061,7 @@ var EmbedProvider = ({
|
|
|
13057
13061
|
useEffect2(() => {
|
|
13058
13062
|
if (accessToken) {
|
|
13059
13063
|
const { headers = {} } = apiConfig ?? {};
|
|
13060
|
-
headers["X-Schematic-Components-Version"] = "0.
|
|
13064
|
+
headers["X-Schematic-Components-Version"] = "0.7.0";
|
|
13061
13065
|
headers["X-Schematic-Session-ID"] = sessionIdRef.current;
|
|
13062
13066
|
const config = new Configuration({
|
|
13063
13067
|
...apiConfig,
|
|
@@ -13133,6 +13137,13 @@ var getFeatureName = (feature, count = 0) => {
|
|
|
13133
13137
|
}
|
|
13134
13138
|
return (0, import_pluralize.default)(name, count);
|
|
13135
13139
|
};
|
|
13140
|
+
function getBillingPrice(billingPrice) {
|
|
13141
|
+
if (!billingPrice) {
|
|
13142
|
+
return;
|
|
13143
|
+
}
|
|
13144
|
+
const price = typeof billingPrice.priceDecimal === "string" ? parseFloat(billingPrice.priceDecimal) : billingPrice.price;
|
|
13145
|
+
return { ...billingPrice, price };
|
|
13146
|
+
}
|
|
13136
13147
|
|
|
13137
13148
|
// src/utils/color.ts
|
|
13138
13149
|
function hexToHSL(color) {
|
|
@@ -13272,7 +13283,7 @@ function formatCurrency(amount, currency) {
|
|
|
13272
13283
|
return `$${formatted}${symbol}`;
|
|
13273
13284
|
};
|
|
13274
13285
|
if (dollars >= 1e6) {
|
|
13275
|
-
formatValue(dollars / 1e6, "M");
|
|
13286
|
+
return formatValue(dollars / 1e6, "M");
|
|
13276
13287
|
}
|
|
13277
13288
|
if (dollars >= 1e3) {
|
|
13278
13289
|
return formatValue(dollars / 1e3, "k");
|
|
@@ -14926,25 +14937,32 @@ var Sidebar = ({
|
|
|
14926
14937
|
({ entitlement }) => entitlement.priceBehavior === "pay_as_you_go"
|
|
14927
14938
|
);
|
|
14928
14939
|
const subscriptionPrice = useMemo4(() => {
|
|
14929
|
-
let total = 0;
|
|
14930
14940
|
let planPrice;
|
|
14931
14941
|
let currency;
|
|
14932
14942
|
if (selectedPlan) {
|
|
14933
|
-
|
|
14934
|
-
|
|
14935
|
-
|
|
14936
|
-
|
|
14937
|
-
|
|
14943
|
+
const planBillingPrice = getBillingPrice(
|
|
14944
|
+
planPeriod === "year" ? selectedPlan.yearlyPrice : selectedPlan.monthlyPrice
|
|
14945
|
+
);
|
|
14946
|
+
planPrice = planBillingPrice?.price;
|
|
14947
|
+
currency = planBillingPrice?.currency;
|
|
14938
14948
|
} else if (typeof currentPlan?.planPrice === "number") {
|
|
14939
14949
|
planPrice = currentPlan.planPrice;
|
|
14940
14950
|
}
|
|
14951
|
+
let total = 0;
|
|
14952
|
+
if (planPrice) {
|
|
14953
|
+
total += planPrice;
|
|
14954
|
+
}
|
|
14941
14955
|
const addOnCost = addOns.reduce(
|
|
14942
|
-
(sum, addOn) => sum + (
|
|
14956
|
+
(sum, addOn) => sum + (getBillingPrice(
|
|
14957
|
+
planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
14958
|
+
)?.price ?? 0),
|
|
14943
14959
|
0
|
|
14944
14960
|
);
|
|
14945
14961
|
total += addOnCost;
|
|
14946
14962
|
const payInAdvanceCost = payInAdvanceEntitlements.reduce(
|
|
14947
|
-
(sum, { entitlement, quantity }) => sum + quantity * ((
|
|
14963
|
+
(sum, { entitlement, quantity }) => sum + quantity * (getBillingPrice(
|
|
14964
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
14965
|
+
)?.price ?? 0),
|
|
14948
14966
|
0
|
|
14949
14967
|
);
|
|
14950
14968
|
total += payInAdvanceCost;
|
|
@@ -14968,7 +14986,7 @@ var Sidebar = ({
|
|
|
14968
14986
|
window.dispatchEvent(event);
|
|
14969
14987
|
};
|
|
14970
14988
|
const checkout = useCallback7(async () => {
|
|
14971
|
-
const priceId = (planPeriod === "
|
|
14989
|
+
const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
|
|
14972
14990
|
if (!api || !selectedPlan || !priceId) {
|
|
14973
14991
|
return;
|
|
14974
14992
|
}
|
|
@@ -14981,7 +14999,7 @@ var Sidebar = ({
|
|
|
14981
14999
|
newPriceId: priceId,
|
|
14982
15000
|
addOnIds: addOns.reduce((acc, addOn) => {
|
|
14983
15001
|
if (addOn.isSelected && !selectedPlan.companyCanTrial) {
|
|
14984
|
-
const addOnPriceId = (planPeriod === "
|
|
15002
|
+
const addOnPriceId = (planPeriod === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
|
|
14985
15003
|
if (addOnPriceId) {
|
|
14986
15004
|
acc.push({
|
|
14987
15005
|
addOnId: addOn.id,
|
|
@@ -14993,7 +15011,7 @@ var Sidebar = ({
|
|
|
14993
15011
|
}, []),
|
|
14994
15012
|
payInAdvance: payInAdvanceEntitlements.reduce(
|
|
14995
15013
|
(acc, { entitlement, quantity }) => {
|
|
14996
|
-
const priceId2 = (planPeriod === "
|
|
15014
|
+
const priceId2 = (planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
|
|
14997
15015
|
if (priceId2) {
|
|
14998
15016
|
acc.push({
|
|
14999
15017
|
priceId: priceId2,
|
|
@@ -15116,6 +15134,9 @@ var Sidebar = ({
|
|
|
15116
15134
|
if (isTrialable && selectedPlan.trialDays) {
|
|
15117
15135
|
trialEndsOn.setDate(trialEndsOn.getDate() + selectedPlan.trialDays);
|
|
15118
15136
|
}
|
|
15137
|
+
const selectedPlanBillingPrice = getBillingPrice(
|
|
15138
|
+
planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice
|
|
15139
|
+
);
|
|
15119
15140
|
return /* @__PURE__ */ jsxs8(
|
|
15120
15141
|
Flex,
|
|
15121
15142
|
{
|
|
@@ -15276,8 +15297,8 @@ var Sidebar = ({
|
|
|
15276
15297
|
$color: theme.typography.text.color,
|
|
15277
15298
|
children: [
|
|
15278
15299
|
formatCurrency(
|
|
15279
|
-
|
|
15280
|
-
|
|
15300
|
+
selectedPlanBillingPrice?.price ?? 0,
|
|
15301
|
+
selectedPlanBillingPrice?.currency
|
|
15281
15302
|
),
|
|
15282
15303
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15283
15304
|
"/",
|
|
@@ -15305,7 +15326,12 @@ var Sidebar = ({
|
|
|
15305
15326
|
removedUsageBasedEntitlements.reduce(
|
|
15306
15327
|
(acc, { allocation, quantity, usage }, index) => {
|
|
15307
15328
|
if (typeof allocation === "number" && usage.feature?.name) {
|
|
15308
|
-
const
|
|
15329
|
+
const {
|
|
15330
|
+
price: entitlementPrice,
|
|
15331
|
+
currency: entitlementCurrency
|
|
15332
|
+
} = getBillingPrice(
|
|
15333
|
+
planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
|
|
15334
|
+
) || {};
|
|
15309
15335
|
acc.push(
|
|
15310
15336
|
/* @__PURE__ */ jsxs8(
|
|
15311
15337
|
Flex,
|
|
@@ -15339,20 +15365,20 @@ var Sidebar = ({
|
|
|
15339
15365
|
$weight: theme.typography.text.fontWeight,
|
|
15340
15366
|
$color: theme.typography.text.color,
|
|
15341
15367
|
children: [
|
|
15342
|
-
usage.priceBehavior === "pay_in_advance" &&
|
|
15368
|
+
usage.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
15343
15369
|
formatCurrency(
|
|
15344
|
-
|
|
15345
|
-
|
|
15370
|
+
(entitlementPrice ?? 0) * quantity,
|
|
15371
|
+
entitlementCurrency
|
|
15346
15372
|
),
|
|
15347
15373
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15348
15374
|
"/",
|
|
15349
15375
|
shortenPeriod(planPeriod)
|
|
15350
15376
|
] })
|
|
15351
15377
|
] }),
|
|
15352
|
-
usage.priceBehavior === "pay_as_you_go" &&
|
|
15378
|
+
usage.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
15353
15379
|
formatCurrency(
|
|
15354
|
-
|
|
15355
|
-
|
|
15380
|
+
entitlementPrice ?? 0,
|
|
15381
|
+
entitlementCurrency
|
|
15356
15382
|
),
|
|
15357
15383
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15358
15384
|
"/",
|
|
@@ -15375,6 +15401,12 @@ var Sidebar = ({
|
|
|
15375
15401
|
changedUsageBasedEntitlements.reduce(
|
|
15376
15402
|
(acc, { entitlement, previous, next: next2 }, index) => {
|
|
15377
15403
|
if (entitlement?.feature?.name) {
|
|
15404
|
+
const {
|
|
15405
|
+
price: entitlementPrice,
|
|
15406
|
+
currency: entitlementCurrency
|
|
15407
|
+
} = getBillingPrice(
|
|
15408
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15409
|
+
) || {};
|
|
15378
15410
|
acc.push(
|
|
15379
15411
|
/* @__PURE__ */ jsxs8(Box, { children: [
|
|
15380
15412
|
/* @__PURE__ */ jsxs8(
|
|
@@ -15410,8 +15442,8 @@ var Sidebar = ({
|
|
|
15410
15442
|
$color: theme.typography.text.color,
|
|
15411
15443
|
children: [
|
|
15412
15444
|
formatCurrency(
|
|
15413
|
-
(
|
|
15414
|
-
|
|
15445
|
+
(entitlementPrice ?? 0) * previous.quantity,
|
|
15446
|
+
entitlementCurrency
|
|
15415
15447
|
),
|
|
15416
15448
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15417
15449
|
"/",
|
|
@@ -15453,8 +15485,8 @@ var Sidebar = ({
|
|
|
15453
15485
|
$color: theme.typography.text.color,
|
|
15454
15486
|
children: [
|
|
15455
15487
|
formatCurrency(
|
|
15456
|
-
(
|
|
15457
|
-
|
|
15488
|
+
(entitlementPrice ?? 0) * next2.quantity,
|
|
15489
|
+
entitlementCurrency
|
|
15458
15490
|
),
|
|
15459
15491
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15460
15492
|
"/",
|
|
@@ -15476,7 +15508,12 @@ var Sidebar = ({
|
|
|
15476
15508
|
addedUsageBasedEntitlements.reduce(
|
|
15477
15509
|
(acc, { entitlement, quantity }, index) => {
|
|
15478
15510
|
if (entitlement.feature?.name) {
|
|
15479
|
-
const
|
|
15511
|
+
const {
|
|
15512
|
+
price: entitlementPrice,
|
|
15513
|
+
currency: entitlementCurrency
|
|
15514
|
+
} = getBillingPrice(
|
|
15515
|
+
planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
15516
|
+
) || {};
|
|
15480
15517
|
acc.push(
|
|
15481
15518
|
/* @__PURE__ */ jsxs8(
|
|
15482
15519
|
Flex,
|
|
@@ -15507,20 +15544,20 @@ var Sidebar = ({
|
|
|
15507
15544
|
$weight: theme.typography.text.fontWeight,
|
|
15508
15545
|
$color: theme.typography.text.color,
|
|
15509
15546
|
children: [
|
|
15510
|
-
entitlement.priceBehavior === "pay_in_advance" &&
|
|
15547
|
+
entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
15511
15548
|
formatCurrency(
|
|
15512
|
-
|
|
15513
|
-
|
|
15549
|
+
(entitlementPrice ?? 0) * quantity,
|
|
15550
|
+
entitlementCurrency
|
|
15514
15551
|
),
|
|
15515
15552
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15516
15553
|
"/",
|
|
15517
15554
|
shortenPeriod(planPeriod)
|
|
15518
15555
|
] })
|
|
15519
15556
|
] }),
|
|
15520
|
-
entitlement.priceBehavior === "pay_as_you_go" &&
|
|
15557
|
+
entitlement.priceBehavior === "pay_as_you_go" && /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
15521
15558
|
formatCurrency(
|
|
15522
|
-
|
|
15523
|
-
|
|
15559
|
+
entitlementPrice ?? 0,
|
|
15560
|
+
entitlementCurrency
|
|
15524
15561
|
),
|
|
15525
15562
|
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15526
15563
|
"/",
|
|
@@ -15579,8 +15616,8 @@ var Sidebar = ({
|
|
|
15579
15616
|
children: [
|
|
15580
15617
|
"-",
|
|
15581
15618
|
formatCurrency(
|
|
15582
|
-
|
|
15583
|
-
|
|
15619
|
+
selectedPlanBillingPrice?.price ?? 0,
|
|
15620
|
+
selectedPlanBillingPrice?.currency
|
|
15584
15621
|
),
|
|
15585
15622
|
"/",
|
|
15586
15623
|
/* @__PURE__ */ jsx13("sub", { children: shortenPeriod(planPeriod) })
|
|
@@ -15602,89 +15639,93 @@ var Sidebar = ({
|
|
|
15602
15639
|
children: t2("Add-ons")
|
|
15603
15640
|
}
|
|
15604
15641
|
) }),
|
|
15605
|
-
removedAddOns.map((addOn, index) =>
|
|
15606
|
-
|
|
15607
|
-
|
|
15608
|
-
|
|
15609
|
-
|
|
15610
|
-
|
|
15611
|
-
|
|
15612
|
-
|
|
15613
|
-
|
|
15614
|
-
|
|
15615
|
-
|
|
15616
|
-
|
|
15617
|
-
|
|
15618
|
-
|
|
15619
|
-
|
|
15620
|
-
|
|
15621
|
-
|
|
15622
|
-
|
|
15623
|
-
|
|
15624
|
-
|
|
15625
|
-
|
|
15626
|
-
|
|
15627
|
-
|
|
15628
|
-
|
|
15629
|
-
|
|
15630
|
-
|
|
15631
|
-
|
|
15632
|
-
|
|
15633
|
-
|
|
15634
|
-
|
|
15635
|
-
|
|
15636
|
-
|
|
15637
|
-
|
|
15638
|
-
"
|
|
15639
|
-
|
|
15640
|
-
|
|
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
|
-
|
|
15642
|
+
removedAddOns.map((addOn, index) => {
|
|
15643
|
+
return /* @__PURE__ */ jsxs8(
|
|
15644
|
+
Flex,
|
|
15645
|
+
{
|
|
15646
|
+
$justifyContent: "space-between",
|
|
15647
|
+
$alignItems: "center",
|
|
15648
|
+
$gap: "1rem",
|
|
15649
|
+
$opacity: "0.625",
|
|
15650
|
+
$textDecoration: "line-through",
|
|
15651
|
+
$color: theme.typography.heading4.color,
|
|
15652
|
+
children: [
|
|
15653
|
+
/* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
|
|
15654
|
+
Text,
|
|
15655
|
+
{
|
|
15656
|
+
$font: theme.typography.heading4.fontFamily,
|
|
15657
|
+
$size: theme.typography.heading4.fontSize,
|
|
15658
|
+
$weight: theme.typography.heading4.fontWeight,
|
|
15659
|
+
$color: theme.typography.heading4.color,
|
|
15660
|
+
children: addOn.name
|
|
15661
|
+
}
|
|
15662
|
+
) }),
|
|
15663
|
+
typeof addOn.planPrice === "number" && addOn.planPeriod && /* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
|
|
15664
|
+
Text,
|
|
15665
|
+
{
|
|
15666
|
+
$font: theme.typography.text.fontFamily,
|
|
15667
|
+
$size: theme.typography.text.fontSize,
|
|
15668
|
+
$weight: theme.typography.text.fontWeight,
|
|
15669
|
+
$color: theme.typography.text.color,
|
|
15670
|
+
children: [
|
|
15671
|
+
formatCurrency(
|
|
15672
|
+
addOn.planPrice,
|
|
15673
|
+
selectedPlanBillingPrice?.currency
|
|
15674
|
+
),
|
|
15675
|
+
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15676
|
+
"/",
|
|
15677
|
+
shortenPeriod(addOn.planPeriod)
|
|
15678
|
+
] })
|
|
15679
|
+
]
|
|
15680
|
+
}
|
|
15681
|
+
) })
|
|
15682
|
+
]
|
|
15683
|
+
},
|
|
15684
|
+
index
|
|
15685
|
+
);
|
|
15686
|
+
}),
|
|
15687
|
+
selectedAddOns.map((addOn, index) => {
|
|
15688
|
+
const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
|
|
15689
|
+
planPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
15690
|
+
) || {};
|
|
15691
|
+
return /* @__PURE__ */ jsxs8(
|
|
15692
|
+
Flex,
|
|
15693
|
+
{
|
|
15694
|
+
$justifyContent: "space-between",
|
|
15695
|
+
$alignItems: "center",
|
|
15696
|
+
$gap: "1rem",
|
|
15697
|
+
children: [
|
|
15698
|
+
/* @__PURE__ */ jsx13(Box, { children: /* @__PURE__ */ jsx13(
|
|
15699
|
+
Text,
|
|
15700
|
+
{
|
|
15701
|
+
$font: theme.typography.heading4.fontFamily,
|
|
15702
|
+
$size: theme.typography.heading4.fontSize,
|
|
15703
|
+
$weight: theme.typography.heading4.fontWeight,
|
|
15704
|
+
$color: theme.typography.heading4.color,
|
|
15705
|
+
children: addOn.name
|
|
15706
|
+
}
|
|
15707
|
+
) }),
|
|
15708
|
+
/* @__PURE__ */ jsx13(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsxs8(
|
|
15709
|
+
Text,
|
|
15710
|
+
{
|
|
15711
|
+
$font: theme.typography.text.fontFamily,
|
|
15712
|
+
$size: theme.typography.text.fontSize,
|
|
15713
|
+
$weight: theme.typography.text.fontWeight,
|
|
15714
|
+
$color: theme.typography.text.color,
|
|
15715
|
+
children: [
|
|
15716
|
+
formatCurrency(addOnPrice ?? 0, addOnCurrency),
|
|
15717
|
+
/* @__PURE__ */ jsxs8("sub", { children: [
|
|
15718
|
+
"/",
|
|
15719
|
+
shortenPeriod(planPeriod)
|
|
15720
|
+
] })
|
|
15721
|
+
]
|
|
15722
|
+
}
|
|
15723
|
+
) })
|
|
15724
|
+
]
|
|
15725
|
+
},
|
|
15726
|
+
index
|
|
15727
|
+
);
|
|
15728
|
+
})
|
|
15688
15729
|
] }),
|
|
15689
15730
|
proration !== 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
15690
15731
|
/* @__PURE__ */ jsx13(Box, { $opacity: "0.625", children: /* @__PURE__ */ jsx13(
|
|
@@ -15723,7 +15764,7 @@ var Sidebar = ({
|
|
|
15723
15764
|
$color: theme.typography.text.color,
|
|
15724
15765
|
children: formatCurrency(
|
|
15725
15766
|
proration,
|
|
15726
|
-
|
|
15767
|
+
selectedPlanBillingPrice?.currency
|
|
15727
15768
|
)
|
|
15728
15769
|
}
|
|
15729
15770
|
) })
|
|
@@ -15830,7 +15871,7 @@ var Sidebar = ({
|
|
|
15830
15871
|
$color: theme.typography.text.color,
|
|
15831
15872
|
children: formatCurrency(
|
|
15832
15873
|
newCharges / 100 * percentOff,
|
|
15833
|
-
|
|
15874
|
+
selectedPlanBillingPrice?.currency
|
|
15834
15875
|
)
|
|
15835
15876
|
}
|
|
15836
15877
|
) })
|
|
@@ -15854,7 +15895,7 @@ var Sidebar = ({
|
|
|
15854
15895
|
children: t2("X off", {
|
|
15855
15896
|
amount: formatCurrency(
|
|
15856
15897
|
Math.abs(amountOff),
|
|
15857
|
-
|
|
15898
|
+
selectedPlanBillingPrice?.currency
|
|
15858
15899
|
)
|
|
15859
15900
|
})
|
|
15860
15901
|
}
|
|
@@ -15870,7 +15911,7 @@ var Sidebar = ({
|
|
|
15870
15911
|
"-",
|
|
15871
15912
|
formatCurrency(
|
|
15872
15913
|
Math.abs(amountOff),
|
|
15873
|
-
|
|
15914
|
+
selectedPlanBillingPrice?.currency
|
|
15874
15915
|
)
|
|
15875
15916
|
]
|
|
15876
15917
|
}
|
|
@@ -15893,7 +15934,7 @@ var Sidebar = ({
|
|
|
15893
15934
|
$weight: theme.typography.text.fontWeight,
|
|
15894
15935
|
$color: theme.typography.text.color,
|
|
15895
15936
|
children: [
|
|
15896
|
-
planPeriod === "
|
|
15937
|
+
planPeriod === "year" ? "Yearly" : "Monthly",
|
|
15897
15938
|
" total:"
|
|
15898
15939
|
]
|
|
15899
15940
|
}
|
|
@@ -15946,7 +15987,7 @@ var Sidebar = ({
|
|
|
15946
15987
|
$color: theme.typography.text.color,
|
|
15947
15988
|
children: formatCurrency(
|
|
15948
15989
|
Math.max(0, dueNow),
|
|
15949
|
-
|
|
15990
|
+
selectedPlanBillingPrice?.currency
|
|
15950
15991
|
)
|
|
15951
15992
|
}
|
|
15952
15993
|
) })
|
|
@@ -15976,7 +16017,7 @@ var Sidebar = ({
|
|
|
15976
16017
|
$color: theme.typography.text.color,
|
|
15977
16018
|
children: formatCurrency(
|
|
15978
16019
|
Math.abs(dueNow),
|
|
15979
|
-
|
|
16020
|
+
selectedPlanBillingPrice?.currency
|
|
15980
16021
|
)
|
|
15981
16022
|
}
|
|
15982
16023
|
) })
|
|
@@ -16043,6 +16084,9 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16043
16084
|
$gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
|
|
16044
16085
|
$gap: "1rem",
|
|
16045
16086
|
children: addOns.map((addOn, index) => {
|
|
16087
|
+
const { price, currency } = getBillingPrice(
|
|
16088
|
+
period === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
16089
|
+
) || {};
|
|
16046
16090
|
return /* @__PURE__ */ jsxs9(
|
|
16047
16091
|
Flex,
|
|
16048
16092
|
{
|
|
@@ -16086,10 +16130,7 @@ var AddOns = ({ addOns, toggle, isLoading, period }) => {
|
|
|
16086
16130
|
$size: theme.typography.heading2.fontSize,
|
|
16087
16131
|
$weight: theme.typography.heading2.fontWeight,
|
|
16088
16132
|
$color: theme.typography.heading2.color,
|
|
16089
|
-
children: formatCurrency(
|
|
16090
|
-
(period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.price ?? 0,
|
|
16091
|
-
(period === "month" ? addOn.monthlyPrice : addOn.yearlyPrice)?.currency
|
|
16092
|
-
)
|
|
16133
|
+
children: formatCurrency(price ?? 0, currency)
|
|
16093
16134
|
}
|
|
16094
16135
|
),
|
|
16095
16136
|
/* @__PURE__ */ jsxs9(
|
|
@@ -16588,7 +16629,9 @@ var Plan = ({
|
|
|
16588
16629
|
children: plans.map((plan, planIndex) => {
|
|
16589
16630
|
const count = entitlementCounts[plan.id];
|
|
16590
16631
|
const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
|
|
16591
|
-
const { price: planPrice, currency: planCurrency } = (
|
|
16632
|
+
const { price: planPrice, currency: planCurrency } = getBillingPrice(
|
|
16633
|
+
period === "year" ? plan.yearlyPrice : plan.monthlyPrice
|
|
16634
|
+
) || {};
|
|
16592
16635
|
const hasUsageBasedEntitlements = plan.entitlements.some(
|
|
16593
16636
|
(entitlement) => !!entitlement.priceBehavior
|
|
16594
16637
|
);
|
|
@@ -16718,7 +16761,9 @@ var Plan = ({
|
|
|
16718
16761
|
const {
|
|
16719
16762
|
price: entitlementPrice,
|
|
16720
16763
|
currency: entitlementCurrency
|
|
16721
|
-
} = (
|
|
16764
|
+
} = getBillingPrice(
|
|
16765
|
+
period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
16766
|
+
) || {};
|
|
16722
16767
|
if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
|
|
16723
16768
|
return acc;
|
|
16724
16769
|
}
|
|
@@ -16964,6 +17009,9 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
16964
17009
|
return /* @__PURE__ */ jsx18(Fragment8, { children: /* @__PURE__ */ jsx18(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
|
|
16965
17010
|
(acc, { entitlement, quantity, usage }, index) => {
|
|
16966
17011
|
if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
|
|
17012
|
+
const { price, currency } = getBillingPrice(
|
|
17013
|
+
period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
17014
|
+
) || {};
|
|
16967
17015
|
acc.push(
|
|
16968
17016
|
/* @__PURE__ */ jsxs13(
|
|
16969
17017
|
Flex,
|
|
@@ -17067,10 +17115,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17067
17115
|
$weight: theme.typography.text.fontWeight,
|
|
17068
17116
|
$color: theme.typography.text.color,
|
|
17069
17117
|
children: [
|
|
17070
|
-
formatCurrency(
|
|
17071
|
-
((period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0) * quantity,
|
|
17072
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
|
|
17073
|
-
),
|
|
17118
|
+
formatCurrency((price ?? 0) * quantity, currency),
|
|
17074
17119
|
/* @__PURE__ */ jsxs13("sub", { children: [
|
|
17075
17120
|
"/",
|
|
17076
17121
|
shortenPeriod(period)
|
|
@@ -17086,10 +17131,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
|
|
|
17086
17131
|
$weight: theme.typography.text.fontWeight,
|
|
17087
17132
|
$color: unitPriceColor,
|
|
17088
17133
|
children: [
|
|
17089
|
-
formatCurrency(
|
|
17090
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.price || 0,
|
|
17091
|
-
(period === "month" ? entitlement.meteredMonthlyPrice : entitlement.meteredYearlyPrice)?.currency
|
|
17092
|
-
),
|
|
17134
|
+
formatCurrency(price ?? 0, currency),
|
|
17093
17135
|
/* @__PURE__ */ jsxs13("sub", { children: [
|
|
17094
17136
|
"/",
|
|
17095
17137
|
getFeatureName(entitlement.feature, 1),
|
|
@@ -17240,7 +17282,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17240
17282
|
async (updates) => {
|
|
17241
17283
|
const period = updates.period || planPeriod;
|
|
17242
17284
|
const plan = updates.plan || selectedPlan;
|
|
17243
|
-
const planPriceId = period === "
|
|
17285
|
+
const planPriceId = period === "year" ? plan?.yearlyPrice?.id : plan?.monthlyPrice?.id;
|
|
17244
17286
|
if (!api || !plan || !planPriceId) {
|
|
17245
17287
|
return;
|
|
17246
17288
|
}
|
|
@@ -17255,7 +17297,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17255
17297
|
addOnIds: (updates.addOns || addOns).reduce(
|
|
17256
17298
|
(acc, addOn) => {
|
|
17257
17299
|
if (addOn.isSelected) {
|
|
17258
|
-
const addOnPriceId = (period === "
|
|
17300
|
+
const addOnPriceId = (period === "year" ? addOn?.yearlyPrice : addOn?.monthlyPrice)?.id;
|
|
17259
17301
|
if (addOnPriceId) {
|
|
17260
17302
|
acc.push({
|
|
17261
17303
|
addOnId: addOn.id,
|
|
@@ -17269,7 +17311,7 @@ var CheckoutDialog = ({ top = 0 }) => {
|
|
|
17269
17311
|
),
|
|
17270
17312
|
payInAdvance: (updates.payInAdvanceEntitlements || payInAdvanceEntitlements).reduce(
|
|
17271
17313
|
(acc, { entitlement, quantity }) => {
|
|
17272
|
-
const priceId = (period === "
|
|
17314
|
+
const priceId = (period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice)?.priceId;
|
|
17273
17315
|
if (priceId) {
|
|
17274
17316
|
acc.push({
|
|
17275
17317
|
priceId,
|
|
@@ -17724,8 +17766,10 @@ var PeriodToggle = ({
|
|
|
17724
17766
|
const [tooltipZIndex, setTooltipZIndex] = useState9(1);
|
|
17725
17767
|
const savingsPercentage = useMemo6(() => {
|
|
17726
17768
|
if (selectedPlan) {
|
|
17727
|
-
const
|
|
17728
|
-
const
|
|
17769
|
+
const monthlyBillingPrice = getBillingPrice(selectedPlan?.monthlyPrice);
|
|
17770
|
+
const yearlyBillingPrice = getBillingPrice(selectedPlan?.yearlyPrice);
|
|
17771
|
+
const monthly = (monthlyBillingPrice?.price ?? 0) * 12;
|
|
17772
|
+
const yearly = yearlyBillingPrice?.price ?? 0;
|
|
17729
17773
|
return Math.round((monthly - yearly) / monthly * 1e4) / 100;
|
|
17730
17774
|
}
|
|
17731
17775
|
return 0;
|
|
@@ -18254,25 +18298,11 @@ var Details = ({
|
|
|
18254
18298
|
const { t: t2 } = useTranslation();
|
|
18255
18299
|
const theme = nt();
|
|
18256
18300
|
const { data } = useEmbed();
|
|
18257
|
-
const currency = useMemo8(() => {
|
|
18258
|
-
|
|
18259
|
-
|
|
18260
|
-
}
|
|
18261
|
-
|
|
18262
|
-
return yearlyUsageBasedPrice?.currency;
|
|
18263
|
-
}
|
|
18264
|
-
}, [
|
|
18265
|
-
data.company?.plan?.planPeriod,
|
|
18266
|
-
monthlyUsageBasedPrice,
|
|
18267
|
-
yearlyUsageBasedPrice
|
|
18268
|
-
]);
|
|
18269
|
-
const price = useMemo8(() => {
|
|
18270
|
-
if (data.company?.plan?.planPeriod === "month") {
|
|
18271
|
-
return monthlyUsageBasedPrice?.price;
|
|
18272
|
-
}
|
|
18273
|
-
if (data.company?.plan?.planPeriod === "year") {
|
|
18274
|
-
return yearlyUsageBasedPrice?.price;
|
|
18275
|
-
}
|
|
18301
|
+
const { price, currency } = useMemo8(() => {
|
|
18302
|
+
const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
|
|
18303
|
+
data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
|
|
18304
|
+
) || {};
|
|
18305
|
+
return { price: entitlementPrice, currency: entitlementCurrency };
|
|
18276
18306
|
}, [
|
|
18277
18307
|
data.company?.plan?.planPeriod,
|
|
18278
18308
|
monthlyUsageBasedPrice,
|
|
@@ -18814,7 +18844,9 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
|
|
|
18814
18844
|
}, index) => {
|
|
18815
18845
|
const limit = softLimit ?? allocation ?? 0;
|
|
18816
18846
|
const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
|
|
18817
|
-
const { price, currency } = (
|
|
18847
|
+
const { price, currency } = getBillingPrice(
|
|
18848
|
+
planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
|
|
18849
|
+
) || {};
|
|
18818
18850
|
const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
|
|
18819
18851
|
ProgressBar,
|
|
18820
18852
|
{
|
|
@@ -19677,8 +19709,10 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
|
|
|
19677
19709
|
};
|
|
19678
19710
|
const usageBasedEntitlements = (featureUsage?.features || []).reduce(
|
|
19679
19711
|
(acc, usage) => {
|
|
19680
|
-
const { price, currency } = (
|
|
19681
|
-
|
|
19712
|
+
const { price, currency } = getBillingPrice(
|
|
19713
|
+
currentPlan?.planPeriod === "year" ? usage.yearlyUsageBasedPrice : usage.monthlyUsageBasedPrice
|
|
19714
|
+
) || {};
|
|
19715
|
+
if (usage.priceBehavior) {
|
|
19682
19716
|
acc.push({ ...usage, price, currency });
|
|
19683
19717
|
}
|
|
19684
19718
|
return acc;
|
|
@@ -19960,7 +19994,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
|
|
|
19960
19994
|
":",
|
|
19961
19995
|
" ",
|
|
19962
19996
|
formatCurrency(
|
|
19963
|
-
entitlement.price,
|
|
19997
|
+
entitlement.price ?? 0,
|
|
19964
19998
|
entitlement.currency
|
|
19965
19999
|
),
|
|
19966
20000
|
/* @__PURE__ */ jsxs27("sub", { children: [
|
|
@@ -19982,7 +20016,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
|
|
|
19982
20016
|
$color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
|
|
19983
20017
|
children: [
|
|
19984
20018
|
formatCurrency(
|
|
19985
|
-
entitlement.price,
|
|
20019
|
+
entitlement.price ?? 0,
|
|
19986
20020
|
entitlement.currency
|
|
19987
20021
|
),
|
|
19988
20022
|
/* @__PURE__ */ jsxs27("sub", { children: [
|
|
@@ -20003,7 +20037,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
|
|
|
20003
20037
|
$color: theme.typography.text.color,
|
|
20004
20038
|
children: [
|
|
20005
20039
|
formatCurrency(
|
|
20006
|
-
entitlement.price * amount,
|
|
20040
|
+
(entitlement.price ?? 0) * amount,
|
|
20007
20041
|
entitlement.currency
|
|
20008
20042
|
),
|
|
20009
20043
|
(entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
|
|
@@ -20183,7 +20217,9 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20183
20217
|
$gap: "1rem",
|
|
20184
20218
|
children: plans.map((plan, planIndex, self2) => {
|
|
20185
20219
|
const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
|
|
20186
|
-
const { price: planPrice, currency: planCurrency } = (
|
|
20220
|
+
const { price: planPrice, currency: planCurrency } = getBillingPrice(
|
|
20221
|
+
selectedPeriod === "year" ? plan.yearlyPrice : plan.monthlyPrice
|
|
20222
|
+
) || {};
|
|
20187
20223
|
const count = entitlementCounts[plan.id];
|
|
20188
20224
|
const isExpanded = count.limit > VISIBLE_ENTITLEMENT_COUNT;
|
|
20189
20225
|
const hasUsageBasedEntitlements = plan.entitlements.some(
|
|
@@ -20312,7 +20348,9 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20312
20348
|
const {
|
|
20313
20349
|
price: entitlementPrice,
|
|
20314
20350
|
currency: entitlementCurrency
|
|
20315
|
-
} = (
|
|
20351
|
+
} = getBillingPrice(
|
|
20352
|
+
selectedPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
|
|
20353
|
+
) || {};
|
|
20316
20354
|
if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
|
|
20317
20355
|
return acc;
|
|
20318
20356
|
}
|
|
@@ -20586,7 +20624,9 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
|
|
|
20586
20624
|
$gap: "1rem",
|
|
20587
20625
|
children: addOns.map((addOn, addOnIndex) => {
|
|
20588
20626
|
const isActiveAddOn = addOn.current && selectedPeriod === data.company?.addOns.find((a2) => a2.id === addOn.id)?.planPeriod;
|
|
20589
|
-
const { price: addOnPrice, currency: addOnCurrency } = (
|
|
20627
|
+
const { price: addOnPrice, currency: addOnCurrency } = getBillingPrice(
|
|
20628
|
+
selectedPeriod === "year" ? addOn.yearlyPrice : addOn.monthlyPrice
|
|
20629
|
+
) || {};
|
|
20590
20630
|
return /* @__PURE__ */ jsxs28(
|
|
20591
20631
|
Flex,
|
|
20592
20632
|
{
|