@schematichq/schematic-components 0.7.11 → 0.7.12

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.
@@ -9656,6 +9656,10 @@ var I18n = class _I18n extends EventEmitter {
9656
9656
  break;
9657
9657
  }
9658
9658
  }
9659
+ if (!this.resolvedLanguage && this.languages.indexOf(l2) < 0 && this.store.hasLanguageSomeTranslations(l2)) {
9660
+ this.resolvedLanguage = l2;
9661
+ if (this.languages.indexOf(l2) < 0) this.languages.unshift(l2);
9662
+ }
9659
9663
  }
9660
9664
  changeLanguage(lng, callback) {
9661
9665
  var _this2 = this;
@@ -9689,7 +9693,8 @@ var I18n = class _I18n extends EventEmitter {
9689
9693
  };
9690
9694
  const setLng = (lngs) => {
9691
9695
  if (!lng && !lngs && this.services.languageDetector) lngs = [];
9692
- const l2 = this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
9696
+ const fl = isString(lngs) ? lngs : lngs && lngs[0];
9697
+ const l2 = this.store.hasLanguageSomeTranslations(fl) ? fl : this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
9693
9698
  if (l2) {
9694
9699
  if (!this.language) {
9695
9700
  setLngProps(l2);
@@ -15829,6 +15834,20 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
15829
15834
  };
15830
15835
  }
15831
15836
 
15837
+ // src/api/checkoutexternal/models/HydrateUpcomingInvoiceResponse.ts
15838
+ function HydrateUpcomingInvoiceResponseFromJSON(json) {
15839
+ return HydrateUpcomingInvoiceResponseFromJSONTyped(json, false);
15840
+ }
15841
+ function HydrateUpcomingInvoiceResponseFromJSONTyped(json, ignoreDiscriminator) {
15842
+ if (json == null) {
15843
+ return json;
15844
+ }
15845
+ return {
15846
+ data: InvoiceResponseDataFromJSON(json["data"]),
15847
+ params: json["params"]
15848
+ };
15849
+ }
15850
+
15832
15851
  // src/api/checkoutexternal/models/ListInvoicesParams.ts
15833
15852
  function ListInvoicesParamsFromJSON(json) {
15834
15853
  return ListInvoicesParamsFromJSONTyped(json, false);
@@ -16165,6 +16184,50 @@ var CheckoutexternalApi = class extends BaseAPI {
16165
16184
  );
16166
16185
  return await response.value();
16167
16186
  }
16187
+ /**
16188
+ * Hydrate upcoming invoice
16189
+ */
16190
+ async hydrateUpcomingInvoiceRaw(requestParameters, initOverrides) {
16191
+ if (requestParameters["componentId"] == null) {
16192
+ throw new RequiredError(
16193
+ "componentId",
16194
+ 'Required parameter "componentId" was null or undefined when calling hydrateUpcomingInvoice().'
16195
+ );
16196
+ }
16197
+ const queryParameters = {};
16198
+ const headerParameters = {};
16199
+ if (this.configuration && this.configuration.apiKey) {
16200
+ headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
16201
+ "X-Schematic-Api-Key"
16202
+ );
16203
+ }
16204
+ const response = await this.request(
16205
+ {
16206
+ path: `/components/{component_id}/hydrate/upcoming-invoice`.replace(
16207
+ `{${"component_id"}}`,
16208
+ encodeURIComponent(String(requestParameters["componentId"]))
16209
+ ),
16210
+ method: "GET",
16211
+ headers: headerParameters,
16212
+ query: queryParameters
16213
+ },
16214
+ initOverrides
16215
+ );
16216
+ return new JSONApiResponse(
16217
+ response,
16218
+ (jsonValue) => HydrateUpcomingInvoiceResponseFromJSON(jsonValue)
16219
+ );
16220
+ }
16221
+ /**
16222
+ * Hydrate upcoming invoice
16223
+ */
16224
+ async hydrateUpcomingInvoice(requestParameters, initOverrides) {
16225
+ const response = await this.hydrateUpcomingInvoiceRaw(
16226
+ requestParameters,
16227
+ initOverrides
16228
+ );
16229
+ return await response.value();
16230
+ }
16168
16231
  /**
16169
16232
  * List invoices
16170
16233
  */
@@ -17084,7 +17147,7 @@ var EmbedProvider = ({
17084
17147
  (0, import_react11.useEffect)(() => {
17085
17148
  if (accessToken) {
17086
17149
  const { headers = {} } = apiConfig ?? {};
17087
- headers["X-Schematic-Components-Version"] = "0.7.11";
17150
+ headers["X-Schematic-Components-Version"] = "0.7.12";
17088
17151
  headers["X-Schematic-Session-ID"] = sessionIdRef.current;
17089
17152
  const config = new Configuration({
17090
17153
  ...apiConfig,
@@ -19206,7 +19269,8 @@ var Sidebar = ({
19206
19269
  if (typeof entitlement.allocation === "number" && entitlement.feature?.name) {
19207
19270
  const {
19208
19271
  price: entitlementPrice,
19209
- currency: entitlementCurrency
19272
+ currency: entitlementCurrency,
19273
+ packageSize: entitlementPackageSize = 1
19210
19274
  } = getBillingPrice(
19211
19275
  planPeriod === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice
19212
19276
  ) || {};
@@ -19263,7 +19327,14 @@ var Sidebar = ({
19263
19327
  ),
19264
19328
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
19265
19329
  "/",
19266
- getFeatureName(entitlement.feature, 1)
19330
+ entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
19331
+ entitlementPackageSize,
19332
+ " "
19333
+ ] }),
19334
+ getFeatureName(
19335
+ entitlement.feature,
19336
+ entitlementPackageSize
19337
+ )
19267
19338
  ] })
19268
19339
  ] })
19269
19340
  ]
@@ -19391,7 +19462,8 @@ var Sidebar = ({
19391
19462
  if (entitlement.feature?.name) {
19392
19463
  const {
19393
19464
  price: entitlementPrice,
19394
- currency: entitlementCurrency
19465
+ currency: entitlementCurrency,
19466
+ packageSize: entitlementPackageSize = 1
19395
19467
  } = getBillingPrice(
19396
19468
  planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
19397
19469
  ) || {};
@@ -19445,7 +19517,14 @@ var Sidebar = ({
19445
19517
  ),
19446
19518
  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("sub", { children: [
19447
19519
  "/",
19448
- getFeatureName(entitlement.feature, 1)
19520
+ entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
19521
+ entitlementPackageSize,
19522
+ " "
19523
+ ] }),
19524
+ getFeatureName(
19525
+ entitlement.feature,
19526
+ entitlementPackageSize
19527
+ )
19449
19528
  ] })
19450
19529
  ] })
19451
19530
  ]
@@ -20427,9 +20506,10 @@ var Plan = ({
20427
20506
  const limit = entitlement.softLimit ?? entitlement.valueNumeric;
20428
20507
  const entitlementPriceObject = getBillingPrice(
20429
20508
  period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
20430
- ) || null;
20509
+ );
20431
20510
  let entitlementPrice = entitlementPriceObject?.price;
20432
20511
  const entitlementCurrency = entitlementPriceObject?.currency;
20512
+ const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
20433
20513
  if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
20434
20514
  const { priceTier } = entitlementPriceObject;
20435
20515
  if (priceTier.length > 1) {
@@ -20484,7 +20564,14 @@ var Plan = ({
20484
20564
  " ",
20485
20565
  t2("per"),
20486
20566
  " ",
20487
- getFeatureName(entitlement.feature, 1),
20567
+ entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
20568
+ entitlementPackageSize,
20569
+ " "
20570
+ ] }),
20571
+ getFeatureName(
20572
+ entitlement.feature,
20573
+ entitlementPackageSize
20574
+ ),
20488
20575
  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
20489
20576
  " ",
20490
20577
  t2("per"),
@@ -20538,7 +20625,14 @@ var Plan = ({
20538
20625
  entitlementCurrency
20539
20626
  ),
20540
20627
  "/",
20541
- getFeatureName(entitlement.feature, 1),
20628
+ entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
20629
+ entitlementPackageSize,
20630
+ " "
20631
+ ] }),
20632
+ getFeatureName(
20633
+ entitlement.feature,
20634
+ entitlementPackageSize
20635
+ ),
20542
20636
  entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
20543
20637
  "/",
20544
20638
  shortenPeriod(period)
@@ -20683,7 +20777,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
20683
20777
  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(
20684
20778
  (acc, entitlement, index) => {
20685
20779
  if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
20686
- const { price, currency } = getBillingPrice(
20780
+ const {
20781
+ price,
20782
+ currency,
20783
+ packageSize = 1
20784
+ } = getBillingPrice(
20687
20785
  period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
20688
20786
  ) || {};
20689
20787
  acc.push(
@@ -20811,7 +20909,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
20811
20909
  formatCurrency(price ?? 0, currency),
20812
20910
  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("sub", { children: [
20813
20911
  "/",
20814
- getFeatureName(entitlement.feature, 1),
20912
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
20913
+ packageSize,
20914
+ " "
20915
+ ] }),
20916
+ getFeatureName(entitlement.feature, packageSize),
20815
20917
  "/",
20816
20918
  shortenPeriod(period)
20817
20919
  ] })
@@ -22017,12 +22119,19 @@ var Details = ({
22017
22119
  const { t: t2 } = useTranslation();
22018
22120
  const theme = nt();
22019
22121
  const { data } = useEmbed();
22020
- const { price, priceDecimal, priceTier, currency } = (0, import_react32.useMemo)(() => {
22122
+ const {
22123
+ price,
22124
+ priceDecimal,
22125
+ priceTier,
22126
+ currency,
22127
+ packageSize = 1
22128
+ } = (0, import_react32.useMemo)(() => {
22021
22129
  const {
22022
22130
  price: entitlementPrice,
22023
22131
  priceDecimal: entitlementPriceDecimal,
22024
22132
  priceTier: entitlementPriceTier,
22025
- currency: entitlementCurrency
22133
+ currency: entitlementCurrency,
22134
+ packageSize: entitlementPackageSize
22026
22135
  } = getBillingPrice(
22027
22136
  data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
22028
22137
  ) || {};
@@ -22030,7 +22139,8 @@ var Details = ({
22030
22139
  price: entitlementPrice,
22031
22140
  priceDecimal: entitlementPriceDecimal,
22032
22141
  priceTier: entitlementPriceTier,
22033
- currency: entitlementCurrency
22142
+ currency: entitlementCurrency,
22143
+ packageSize: entitlementPackageSize
22034
22144
  };
22035
22145
  }, [
22036
22146
  data.company?.plan?.planPeriod,
@@ -22042,36 +22152,104 @@ var Details = ({
22042
22152
  return;
22043
22153
  }
22044
22154
  if (priceBehavior === "pay_in_advance" && typeof allocation === "number") {
22045
- return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
22155
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
22156
+ formatNumber(allocation),
22157
+ " ",
22158
+ getFeatureName(feature, allocation)
22159
+ ] });
22046
22160
  }
22047
22161
  if (priceBehavior === "pay_as_you_go" && typeof price === "number") {
22048
- return `${formatCurrency(price, currency)} ${t2("per")} ${getFeatureName(feature, 1)}`;
22162
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
22163
+ formatCurrency(price, currency),
22164
+ " ",
22165
+ t2("per"),
22166
+ " ",
22167
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
22168
+ packageSize,
22169
+ " "
22170
+ ] }),
22171
+ getFeatureName(feature, packageSize)
22172
+ ] });
22049
22173
  }
22050
22174
  if (priceBehavior === "overage" && typeof softLimit === "number") {
22051
- return `${formatNumber(softLimit)} ${getFeatureName(feature, softLimit)}`;
22175
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
22176
+ formatNumber(softLimit),
22177
+ " ",
22178
+ getFeatureName(feature, softLimit)
22179
+ ] });
22052
22180
  }
22053
22181
  if (!priceBehavior && typeof allocation === "number") {
22054
- return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
22182
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
22183
+ formatNumber(allocation),
22184
+ " ",
22185
+ getFeatureName(feature, allocation)
22186
+ ] });
22055
22187
  }
22056
22188
  if (!priceBehavior) {
22057
22189
  return t2("Unlimited", { item: getFeatureName(feature) });
22058
22190
  }
22059
- }, [t2, allocation, feature, price, priceBehavior, currency, softLimit]);
22191
+ }, [
22192
+ t2,
22193
+ allocation,
22194
+ feature,
22195
+ price,
22196
+ priceBehavior,
22197
+ currency,
22198
+ packageSize,
22199
+ softLimit
22200
+ ]);
22060
22201
  const usageText = (0, import_react32.useMemo)(() => {
22061
22202
  if (!feature) {
22062
22203
  return;
22063
22204
  }
22064
- let acc;
22205
+ const acc = [];
22206
+ let index = 0;
22065
22207
  if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
22066
- acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
22208
+ acc.push(
22209
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
22210
+ formatCurrency(price, currency),
22211
+ "/",
22212
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
22213
+ packageSize,
22214
+ " "
22215
+ ] }),
22216
+ getFeatureName(feature, packageSize),
22217
+ "/",
22218
+ shortenPeriod(data.company.plan.planPeriod)
22219
+ ] }, index)
22220
+ );
22221
+ index += 1;
22067
22222
  } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
22068
- acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
22223
+ acc.push(
22224
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
22225
+ usage,
22226
+ " ",
22227
+ getFeatureName(feature, usage),
22228
+ " ",
22229
+ t2("used")
22230
+ ] }, index)
22231
+ );
22232
+ index += 1;
22069
22233
  }
22070
22234
  if (acc) {
22071
22235
  if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
22072
- acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
22236
+ acc.push(
22237
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
22238
+ " ",
22239
+ "\u2022 ",
22240
+ formatCurrency(price * allocation, currency)
22241
+ ] }, index)
22242
+ );
22243
+ index += 1;
22073
22244
  } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
22074
- acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
22245
+ acc.push(
22246
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
22247
+ " ",
22248
+ "\u2022 ",
22249
+ formatCurrency(price * usage, currency)
22250
+ ] }, index)
22251
+ );
22252
+ index += 1;
22075
22253
  } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
22076
22254
  let overagePrice = price ?? priceDecimal;
22077
22255
  if (priceTier?.length === 2) {
@@ -22085,7 +22263,16 @@ var Details = ({
22085
22263
  const cost = usage - softLimit < 0 ? 0 : overagePrice * (usage - softLimit);
22086
22264
  const period = feature.featureType === "trait" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
22087
22265
  if (cost > 0) {
22088
- acc += ` \u2022 ${formatCurrency(cost)}${period}`;
22266
+ acc.push(
22267
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react32.Fragment, { children: [
22268
+ " ",
22269
+ "\u2022 ",
22270
+ formatCurrency(cost),
22271
+ "$",
22272
+ period
22273
+ ] }, index)
22274
+ );
22275
+ index += 1;
22089
22276
  }
22090
22277
  }
22091
22278
  return acc;
@@ -22108,6 +22295,7 @@ var Details = ({
22108
22295
  priceDecimal,
22109
22296
  priceTier,
22110
22297
  currency,
22298
+ packageSize,
22111
22299
  softLimit,
22112
22300
  usage
22113
22301
  ]);
@@ -22568,9 +22756,11 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
22568
22756
  }, index) => {
22569
22757
  const limit = softLimit ?? allocation ?? 0;
22570
22758
  const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
22571
- let { price, currency } = getBillingPrice(
22759
+ const billingPrice = getBillingPrice(
22572
22760
  planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
22573
- ) || {};
22761
+ );
22762
+ let { price, currency } = billingPrice || {};
22763
+ const packageSize = billingPrice?.packageSize ?? 1;
22574
22764
  if (priceBehavior === "overage") {
22575
22765
  const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice)?.productId;
22576
22766
  if (productId) {
@@ -22781,7 +22971,11 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
22781
22971
  formatCurrency(price, currency),
22782
22972
  feature && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22783
22973
  "/",
22784
- getFeatureName(feature, 1),
22974
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
22975
+ packageSize,
22976
+ " "
22977
+ ] }),
22978
+ getFeatureName(feature, packageSize),
22785
22979
  feature.featureType === "trait" && planPeriod && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
22786
22980
  "/",
22787
22981
  shortenPeriod(planPeriod)
@@ -23768,10 +23962,12 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
23768
23962
  const limit = entitlement.softLimit ?? entitlement.allocation ?? 0;
23769
23963
  let overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
23770
23964
  const amount = overageAmount || entitlement.allocation || 0;
23965
+ let packageSize = 1;
23771
23966
  if (entitlement.priceBehavior === "overage" && data.subscription) {
23772
23967
  const subscription = data.subscription;
23773
23968
  const entitlementPrice = entitlement.monthlyUsageBasedPrice ?? entitlement.yearlyUsageBasedPrice;
23774
23969
  if (entitlementPrice) {
23970
+ packageSize = entitlementPrice.packageSize;
23775
23971
  const entitlementProduct = subscription.products.find(
23776
23972
  (product) => product.id === entitlementPrice.productId
23777
23973
  );
@@ -23823,7 +24019,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
23823
24019
  ),
23824
24020
  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
23825
24021
  "/",
23826
- getFeatureName(entitlement.feature, 1),
24022
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
24023
+ packageSize,
24024
+ " "
24025
+ ] }),
24026
+ getFeatureName(
24027
+ entitlement.feature,
24028
+ packageSize
24029
+ ),
23827
24030
  entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
23828
24031
  "/",
23829
24032
  shortenPeriod(currentPlan.planPeriod)
@@ -23843,7 +24046,14 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
23843
24046
  ),
23844
24047
  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
23845
24048
  "/",
23846
- getFeatureName(entitlement.feature, 1),
24049
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
24050
+ packageSize,
24051
+ " "
24052
+ ] }),
24053
+ getFeatureName(
24054
+ entitlement.feature,
24055
+ packageSize
24056
+ ),
23847
24057
  "/",
23848
24058
  shortenPeriod(currentPlan.planPeriod)
23849
24059
  ] })
@@ -23857,7 +24067,16 @@ var PlanManager = (0, import_react39.forwardRef)(({ children, className, portal,
23857
24067
  ),
23858
24068
  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("sub", { children: [
23859
24069
  "/",
23860
- currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
24070
+ currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
24071
+ packageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
24072
+ packageSize,
24073
+ " "
24074
+ ] }),
24075
+ getFeatureName(
24076
+ entitlement.feature,
24077
+ packageSize
24078
+ )
24079
+ ] })
23861
24080
  ] })
23862
24081
  ] })
23863
24082
  ] })
@@ -24180,6 +24399,7 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
24180
24399
  if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
24181
24400
  return acc;
24182
24401
  }
24402
+ const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
24183
24403
  acc.push(
24184
24404
  /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Flex, { $gap: "1rem", children: [
24185
24405
  props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -24216,9 +24436,13 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
24216
24436
  " ",
24217
24437
  t2("per"),
24218
24438
  " ",
24439
+ entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
24440
+ entitlementPackageSize,
24441
+ " "
24442
+ ] }),
24219
24443
  getFeatureName(
24220
24444
  entitlement.feature,
24221
- 1
24445
+ entitlementPackageSize
24222
24446
  ),
24223
24447
  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
24224
24448
  " ",
@@ -24280,9 +24504,13 @@ var PricingTable = (0, import_react40.forwardRef)(({ children, className, ...res
24280
24504
  entitlementCurrency
24281
24505
  ),
24282
24506
  "/",
24507
+ entitlementPackageSize > 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
24508
+ entitlementPackageSize,
24509
+ " "
24510
+ ] }),
24283
24511
  getFeatureName(
24284
24512
  entitlement.feature,
24285
- 1
24513
+ entitlementPackageSize
24286
24514
  ),
24287
24515
  entitlement.feature.featureType === "trait" && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
24288
24516
  "/",
@@ -1109,6 +1109,14 @@ declare class CheckoutexternalApi extends runtime.BaseAPI {
1109
1109
  * Hydrate component
1110
1110
  */
1111
1111
  hydrateComponent(requestParameters: HydrateComponentRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<HydrateComponentResponse>;
1112
+ /**
1113
+ * Hydrate upcoming invoice
1114
+ */
1115
+ hydrateUpcomingInvoiceRaw(requestParameters: HydrateUpcomingInvoiceRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<runtime.ApiResponse<HydrateUpcomingInvoiceResponse>>;
1116
+ /**
1117
+ * Hydrate upcoming invoice
1118
+ */
1119
+ hydrateUpcomingInvoice(requestParameters: HydrateUpcomingInvoiceRequest, initOverrides?: RequestInit | runtime.InitOverrideFunction): Promise<HydrateUpcomingInvoiceResponse>;
1112
1120
  /**
1113
1121
  * List invoices
1114
1122
  */
@@ -3312,6 +3320,30 @@ declare interface HydrateComponentResponse {
3312
3320
  params: object;
3313
3321
  }
3314
3322
 
3323
+ declare interface HydrateUpcomingInvoiceRequest {
3324
+ componentId: string;
3325
+ }
3326
+
3327
+ /**
3328
+ *
3329
+ * @export
3330
+ * @interface HydrateUpcomingInvoiceResponse
3331
+ */
3332
+ declare interface HydrateUpcomingInvoiceResponse {
3333
+ /**
3334
+ *
3335
+ * @type {InvoiceResponseData}
3336
+ * @memberof HydrateUpcomingInvoiceResponse
3337
+ */
3338
+ data: InvoiceResponseData;
3339
+ /**
3340
+ * Input parameters
3341
+ * @type {object}
3342
+ * @memberof HydrateUpcomingInvoiceResponse
3343
+ */
3344
+ params: object;
3345
+ }
3346
+
3315
3347
  export declare const Icon: ({ name, className, ...props }: IconProps) => JSX.Element;
3316
3348
 
3317
3349
  export declare type IconNameTypes = keyof typeof _default;
@@ -3356,7 +3388,7 @@ $variant?: "filled" | "outline" | "ghost" | "text";
3356
3388
  * Do not edit the class manually.
3357
3389
  */
3358
3390
  /**
3359
- *
3391
+ * The returned resource
3360
3392
  * @export
3361
3393
  * @interface InvoiceResponseData
3362
3394
  */
@@ -9603,6 +9603,10 @@ var I18n = class _I18n extends EventEmitter {
9603
9603
  break;
9604
9604
  }
9605
9605
  }
9606
+ if (!this.resolvedLanguage && this.languages.indexOf(l2) < 0 && this.store.hasLanguageSomeTranslations(l2)) {
9607
+ this.resolvedLanguage = l2;
9608
+ if (this.languages.indexOf(l2) < 0) this.languages.unshift(l2);
9609
+ }
9606
9610
  }
9607
9611
  changeLanguage(lng, callback) {
9608
9612
  var _this2 = this;
@@ -9636,7 +9640,8 @@ var I18n = class _I18n extends EventEmitter {
9636
9640
  };
9637
9641
  const setLng = (lngs) => {
9638
9642
  if (!lng && !lngs && this.services.languageDetector) lngs = [];
9639
- const l2 = this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
9643
+ const fl = isString(lngs) ? lngs : lngs && lngs[0];
9644
+ const l2 = this.store.hasLanguageSomeTranslations(fl) ? fl : this.services.languageUtils.getBestMatchFromCodes(isString(lngs) ? [lngs] : lngs);
9640
9645
  if (l2) {
9641
9646
  if (!this.language) {
9642
9647
  setLngProps(l2);
@@ -15776,6 +15781,20 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
15776
15781
  };
15777
15782
  }
15778
15783
 
15784
+ // src/api/checkoutexternal/models/HydrateUpcomingInvoiceResponse.ts
15785
+ function HydrateUpcomingInvoiceResponseFromJSON(json) {
15786
+ return HydrateUpcomingInvoiceResponseFromJSONTyped(json, false);
15787
+ }
15788
+ function HydrateUpcomingInvoiceResponseFromJSONTyped(json, ignoreDiscriminator) {
15789
+ if (json == null) {
15790
+ return json;
15791
+ }
15792
+ return {
15793
+ data: InvoiceResponseDataFromJSON(json["data"]),
15794
+ params: json["params"]
15795
+ };
15796
+ }
15797
+
15779
15798
  // src/api/checkoutexternal/models/ListInvoicesParams.ts
15780
15799
  function ListInvoicesParamsFromJSON(json) {
15781
15800
  return ListInvoicesParamsFromJSONTyped(json, false);
@@ -16112,6 +16131,50 @@ var CheckoutexternalApi = class extends BaseAPI {
16112
16131
  );
16113
16132
  return await response.value();
16114
16133
  }
16134
+ /**
16135
+ * Hydrate upcoming invoice
16136
+ */
16137
+ async hydrateUpcomingInvoiceRaw(requestParameters, initOverrides) {
16138
+ if (requestParameters["componentId"] == null) {
16139
+ throw new RequiredError(
16140
+ "componentId",
16141
+ 'Required parameter "componentId" was null or undefined when calling hydrateUpcomingInvoice().'
16142
+ );
16143
+ }
16144
+ const queryParameters = {};
16145
+ const headerParameters = {};
16146
+ if (this.configuration && this.configuration.apiKey) {
16147
+ headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
16148
+ "X-Schematic-Api-Key"
16149
+ );
16150
+ }
16151
+ const response = await this.request(
16152
+ {
16153
+ path: `/components/{component_id}/hydrate/upcoming-invoice`.replace(
16154
+ `{${"component_id"}}`,
16155
+ encodeURIComponent(String(requestParameters["componentId"]))
16156
+ ),
16157
+ method: "GET",
16158
+ headers: headerParameters,
16159
+ query: queryParameters
16160
+ },
16161
+ initOverrides
16162
+ );
16163
+ return new JSONApiResponse(
16164
+ response,
16165
+ (jsonValue) => HydrateUpcomingInvoiceResponseFromJSON(jsonValue)
16166
+ );
16167
+ }
16168
+ /**
16169
+ * Hydrate upcoming invoice
16170
+ */
16171
+ async hydrateUpcomingInvoice(requestParameters, initOverrides) {
16172
+ const response = await this.hydrateUpcomingInvoiceRaw(
16173
+ requestParameters,
16174
+ initOverrides
16175
+ );
16176
+ return await response.value();
16177
+ }
16115
16178
  /**
16116
16179
  * List invoices
16117
16180
  */
@@ -17031,7 +17094,7 @@ var EmbedProvider = ({
17031
17094
  useEffect2(() => {
17032
17095
  if (accessToken) {
17033
17096
  const { headers = {} } = apiConfig ?? {};
17034
- headers["X-Schematic-Components-Version"] = "0.7.11";
17097
+ headers["X-Schematic-Components-Version"] = "0.7.12";
17035
17098
  headers["X-Schematic-Session-ID"] = sessionIdRef.current;
17036
17099
  const config = new Configuration({
17037
17100
  ...apiConfig,
@@ -19163,7 +19226,8 @@ var Sidebar = ({
19163
19226
  if (typeof entitlement.allocation === "number" && entitlement.feature?.name) {
19164
19227
  const {
19165
19228
  price: entitlementPrice,
19166
- currency: entitlementCurrency
19229
+ currency: entitlementCurrency,
19230
+ packageSize: entitlementPackageSize = 1
19167
19231
  } = getBillingPrice(
19168
19232
  planPeriod === "year" ? entitlement.yearlyUsageBasedPrice : entitlement.monthlyUsageBasedPrice
19169
19233
  ) || {};
@@ -19220,7 +19284,14 @@ var Sidebar = ({
19220
19284
  ),
19221
19285
  /* @__PURE__ */ jsxs8("sub", { children: [
19222
19286
  "/",
19223
- getFeatureName(entitlement.feature, 1)
19287
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
19288
+ entitlementPackageSize,
19289
+ " "
19290
+ ] }),
19291
+ getFeatureName(
19292
+ entitlement.feature,
19293
+ entitlementPackageSize
19294
+ )
19224
19295
  ] })
19225
19296
  ] })
19226
19297
  ]
@@ -19348,7 +19419,8 @@ var Sidebar = ({
19348
19419
  if (entitlement.feature?.name) {
19349
19420
  const {
19350
19421
  price: entitlementPrice,
19351
- currency: entitlementCurrency
19422
+ currency: entitlementCurrency,
19423
+ packageSize: entitlementPackageSize = 1
19352
19424
  } = getBillingPrice(
19353
19425
  planPeriod === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
19354
19426
  ) || {};
@@ -19402,7 +19474,14 @@ var Sidebar = ({
19402
19474
  ),
19403
19475
  /* @__PURE__ */ jsxs8("sub", { children: [
19404
19476
  "/",
19405
- getFeatureName(entitlement.feature, 1)
19477
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs8(Fragment4, { children: [
19478
+ entitlementPackageSize,
19479
+ " "
19480
+ ] }),
19481
+ getFeatureName(
19482
+ entitlement.feature,
19483
+ entitlementPackageSize
19484
+ )
19406
19485
  ] })
19407
19486
  ] })
19408
19487
  ]
@@ -20384,9 +20463,10 @@ var Plan = ({
20384
20463
  const limit = entitlement.softLimit ?? entitlement.valueNumeric;
20385
20464
  const entitlementPriceObject = getBillingPrice(
20386
20465
  period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
20387
- ) || null;
20466
+ );
20388
20467
  let entitlementPrice = entitlementPriceObject?.price;
20389
20468
  const entitlementCurrency = entitlementPriceObject?.currency;
20469
+ const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
20390
20470
  if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
20391
20471
  const { priceTier } = entitlementPriceObject;
20392
20472
  if (priceTier.length > 1) {
@@ -20441,7 +20521,14 @@ var Plan = ({
20441
20521
  " ",
20442
20522
  t2("per"),
20443
20523
  " ",
20444
- getFeatureName(entitlement.feature, 1),
20524
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
20525
+ entitlementPackageSize,
20526
+ " "
20527
+ ] }),
20528
+ getFeatureName(
20529
+ entitlement.feature,
20530
+ entitlementPackageSize
20531
+ ),
20445
20532
  entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs12(Fragment8, { children: [
20446
20533
  " ",
20447
20534
  t2("per"),
@@ -20495,7 +20582,14 @@ var Plan = ({
20495
20582
  entitlementCurrency
20496
20583
  ),
20497
20584
  "/",
20498
- getFeatureName(entitlement.feature, 1),
20585
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs12(Fragment8, { children: [
20586
+ entitlementPackageSize,
20587
+ " "
20588
+ ] }),
20589
+ getFeatureName(
20590
+ entitlement.feature,
20591
+ entitlementPackageSize
20592
+ ),
20499
20593
  entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs12(Fragment8, { children: [
20500
20594
  "/",
20501
20595
  shortenPeriod(period)
@@ -20640,7 +20734,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
20640
20734
  return /* @__PURE__ */ jsx18(Fragment9, { children: /* @__PURE__ */ jsx18(Flex, { $flexDirection: "column", $gap: "1rem", children: entitlements.reduce(
20641
20735
  (acc, entitlement, index) => {
20642
20736
  if (entitlement.priceBehavior === "pay_in_advance" && entitlement.feature) {
20643
- const { price, currency } = getBillingPrice(
20737
+ const {
20738
+ price,
20739
+ currency,
20740
+ packageSize = 1
20741
+ } = getBillingPrice(
20644
20742
  period === "year" ? entitlement.meteredYearlyPrice : entitlement.meteredMonthlyPrice
20645
20743
  ) || {};
20646
20744
  acc.push(
@@ -20768,7 +20866,11 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
20768
20866
  formatCurrency(price ?? 0, currency),
20769
20867
  /* @__PURE__ */ jsxs13("sub", { children: [
20770
20868
  "/",
20771
- getFeatureName(entitlement.feature, 1),
20869
+ packageSize > 1 && /* @__PURE__ */ jsxs13(Fragment9, { children: [
20870
+ packageSize,
20871
+ " "
20872
+ ] }),
20873
+ getFeatureName(entitlement.feature, packageSize),
20772
20874
  "/",
20773
20875
  shortenPeriod(period)
20774
20876
  ] })
@@ -21959,8 +22061,8 @@ ButtonElement.displayName = "Button";
21959
22061
  import { forwardRef as forwardRef7, useMemo as useMemo9, useRef as useRef7, useState as useState13 } from "react";
21960
22062
 
21961
22063
  // src/components/elements/included-features/Details.tsx
21962
- import { useMemo as useMemo8 } from "react";
21963
- import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
22064
+ import { Fragment as Fragment11, useMemo as useMemo8 } from "react";
22065
+ import { Fragment as Fragment12, jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
21964
22066
  var Details = ({
21965
22067
  shouldWrapChildren,
21966
22068
  featureUsage,
@@ -21978,12 +22080,19 @@ var Details = ({
21978
22080
  const { t: t2 } = useTranslation();
21979
22081
  const theme = nt();
21980
22082
  const { data } = useEmbed();
21981
- const { price, priceDecimal, priceTier, currency } = useMemo8(() => {
22083
+ const {
22084
+ price,
22085
+ priceDecimal,
22086
+ priceTier,
22087
+ currency,
22088
+ packageSize = 1
22089
+ } = useMemo8(() => {
21982
22090
  const {
21983
22091
  price: entitlementPrice,
21984
22092
  priceDecimal: entitlementPriceDecimal,
21985
22093
  priceTier: entitlementPriceTier,
21986
- currency: entitlementCurrency
22094
+ currency: entitlementCurrency,
22095
+ packageSize: entitlementPackageSize
21987
22096
  } = getBillingPrice(
21988
22097
  data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
21989
22098
  ) || {};
@@ -21991,7 +22100,8 @@ var Details = ({
21991
22100
  price: entitlementPrice,
21992
22101
  priceDecimal: entitlementPriceDecimal,
21993
22102
  priceTier: entitlementPriceTier,
21994
- currency: entitlementCurrency
22103
+ currency: entitlementCurrency,
22104
+ packageSize: entitlementPackageSize
21995
22105
  };
21996
22106
  }, [
21997
22107
  data.company?.plan?.planPeriod,
@@ -22003,36 +22113,104 @@ var Details = ({
22003
22113
  return;
22004
22114
  }
22005
22115
  if (priceBehavior === "pay_in_advance" && typeof allocation === "number") {
22006
- return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
22116
+ return /* @__PURE__ */ jsxs21(Fragment12, { children: [
22117
+ formatNumber(allocation),
22118
+ " ",
22119
+ getFeatureName(feature, allocation)
22120
+ ] });
22007
22121
  }
22008
22122
  if (priceBehavior === "pay_as_you_go" && typeof price === "number") {
22009
- return `${formatCurrency(price, currency)} ${t2("per")} ${getFeatureName(feature, 1)}`;
22123
+ return /* @__PURE__ */ jsxs21(Fragment12, { children: [
22124
+ formatCurrency(price, currency),
22125
+ " ",
22126
+ t2("per"),
22127
+ " ",
22128
+ packageSize > 1 && /* @__PURE__ */ jsxs21(Fragment12, { children: [
22129
+ packageSize,
22130
+ " "
22131
+ ] }),
22132
+ getFeatureName(feature, packageSize)
22133
+ ] });
22010
22134
  }
22011
22135
  if (priceBehavior === "overage" && typeof softLimit === "number") {
22012
- return `${formatNumber(softLimit)} ${getFeatureName(feature, softLimit)}`;
22136
+ return /* @__PURE__ */ jsxs21(Fragment12, { children: [
22137
+ formatNumber(softLimit),
22138
+ " ",
22139
+ getFeatureName(feature, softLimit)
22140
+ ] });
22013
22141
  }
22014
22142
  if (!priceBehavior && typeof allocation === "number") {
22015
- return `${formatNumber(allocation)} ${getFeatureName(feature, allocation)}`;
22143
+ return /* @__PURE__ */ jsxs21(Fragment12, { children: [
22144
+ formatNumber(allocation),
22145
+ " ",
22146
+ getFeatureName(feature, allocation)
22147
+ ] });
22016
22148
  }
22017
22149
  if (!priceBehavior) {
22018
22150
  return t2("Unlimited", { item: getFeatureName(feature) });
22019
22151
  }
22020
- }, [t2, allocation, feature, price, priceBehavior, currency, softLimit]);
22152
+ }, [
22153
+ t2,
22154
+ allocation,
22155
+ feature,
22156
+ price,
22157
+ priceBehavior,
22158
+ currency,
22159
+ packageSize,
22160
+ softLimit
22161
+ ]);
22021
22162
  const usageText = useMemo8(() => {
22022
22163
  if (!feature) {
22023
22164
  return;
22024
22165
  }
22025
- let acc;
22166
+ const acc = [];
22167
+ let index = 0;
22026
22168
  if (priceBehavior === "pay_in_advance" && typeof data.company?.plan?.planPeriod === "string" && typeof price === "number") {
22027
- acc = `${formatCurrency(price, currency)}/${getFeatureName(feature, 1)}/${shortenPeriod(data.company.plan.planPeriod)}`;
22169
+ acc.push(
22170
+ /* @__PURE__ */ jsxs21(Fragment11, { children: [
22171
+ formatCurrency(price, currency),
22172
+ "/",
22173
+ packageSize > 1 && /* @__PURE__ */ jsxs21(Fragment12, { children: [
22174
+ packageSize,
22175
+ " "
22176
+ ] }),
22177
+ getFeatureName(feature, packageSize),
22178
+ "/",
22179
+ shortenPeriod(data.company.plan.planPeriod)
22180
+ ] }, index)
22181
+ );
22182
+ index += 1;
22028
22183
  } else if ((priceBehavior === "pay_as_you_go" || priceBehavior === "overage") && typeof usage === "number") {
22029
- acc = `${usage} ${getFeatureName(feature, usage)} ${t2("used")}`;
22184
+ acc.push(
22185
+ /* @__PURE__ */ jsxs21(Fragment11, { children: [
22186
+ usage,
22187
+ " ",
22188
+ getFeatureName(feature, usage),
22189
+ " ",
22190
+ t2("used")
22191
+ ] }, index)
22192
+ );
22193
+ index += 1;
22030
22194
  }
22031
22195
  if (acc) {
22032
22196
  if (priceBehavior === "pay_in_advance" && typeof price === "number" && typeof allocation === "number") {
22033
- acc += ` \u2022 ${formatCurrency(price * allocation, currency)}`;
22197
+ acc.push(
22198
+ /* @__PURE__ */ jsxs21(Fragment11, { children: [
22199
+ " ",
22200
+ "\u2022 ",
22201
+ formatCurrency(price * allocation, currency)
22202
+ ] }, index)
22203
+ );
22204
+ index += 1;
22034
22205
  } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
22035
- acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
22206
+ acc.push(
22207
+ /* @__PURE__ */ jsxs21(Fragment11, { children: [
22208
+ " ",
22209
+ "\u2022 ",
22210
+ formatCurrency(price * usage, currency)
22211
+ ] }, index)
22212
+ );
22213
+ index += 1;
22036
22214
  } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
22037
22215
  let overagePrice = price ?? priceDecimal;
22038
22216
  if (priceTier?.length === 2) {
@@ -22046,7 +22224,16 @@ var Details = ({
22046
22224
  const cost = usage - softLimit < 0 ? 0 : overagePrice * (usage - softLimit);
22047
22225
  const period = feature.featureType === "trait" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
22048
22226
  if (cost > 0) {
22049
- acc += ` \u2022 ${formatCurrency(cost)}${period}`;
22227
+ acc.push(
22228
+ /* @__PURE__ */ jsxs21(Fragment11, { children: [
22229
+ " ",
22230
+ "\u2022 ",
22231
+ formatCurrency(cost),
22232
+ "$",
22233
+ period
22234
+ ] }, index)
22235
+ );
22236
+ index += 1;
22050
22237
  }
22051
22238
  }
22052
22239
  return acc;
@@ -22069,6 +22256,7 @@ var Details = ({
22069
22256
  priceDecimal,
22070
22257
  priceTier,
22071
22258
  currency,
22259
+ packageSize,
22072
22260
  softLimit,
22073
22261
  usage
22074
22262
  ]);
@@ -22460,7 +22648,7 @@ var Container3 = dt.div`
22460
22648
  `;
22461
22649
 
22462
22650
  // src/components/elements/metered-features/MeteredFeatures.tsx
22463
- import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
22651
+ import { Fragment as Fragment13, jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
22464
22652
  function resolveDesignProps4(props) {
22465
22653
  return {
22466
22654
  isVisible: props.isVisible ?? true,
@@ -22529,9 +22717,11 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
22529
22717
  }, index) => {
22530
22718
  const limit = softLimit ?? allocation ?? 0;
22531
22719
  const isOverage = priceBehavior === "overage" && typeof softLimit === "number" && typeof usage === "number" && usage > softLimit;
22532
- let { price, currency } = getBillingPrice(
22720
+ const billingPrice = getBillingPrice(
22533
22721
  planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
22534
- ) || {};
22722
+ );
22723
+ let { price, currency } = billingPrice || {};
22724
+ const packageSize = billingPrice?.packageSize ?? 1;
22535
22725
  if (priceBehavior === "overage") {
22536
22726
  const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice)?.productId;
22537
22727
  if (productId) {
@@ -22597,7 +22787,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
22597
22787
  $weight: theme.typography[props.header.fontStyle].fontWeight,
22598
22788
  $color: theme.typography[props.header.fontStyle].color,
22599
22789
  $leading: 1.35,
22600
- children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
22790
+ children: priceBehavior === "pay_as_you_go" ? typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
22601
22791
  formatNumber(usage),
22602
22792
  " ",
22603
22793
  getFeatureName(feature, usage)
@@ -22635,15 +22825,15 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
22635
22825
  style: {
22636
22826
  whiteSpace: "nowrap"
22637
22827
  },
22638
- children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
22828
+ children: priceBehavior === "pay_in_advance" ? typeof allocation === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
22639
22829
  formatNumber(allocation),
22640
22830
  " ",
22641
22831
  getFeatureName(feature, allocation)
22642
- ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
22832
+ ] }) : priceBehavior === "pay_as_you_go" ? typeof price === "number" && typeof usage === "number" && formatCurrency(usage * price, currency) : typeof usage === "number" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
22643
22833
  formatNumber(usage),
22644
22834
  " ",
22645
22835
  getFeatureName(feature, usage),
22646
- priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment11, { children: [
22836
+ priceBehavior === "overage" && /* @__PURE__ */ jsxs24(Fragment13, { children: [
22647
22837
  " ",
22648
22838
  t2("used")
22649
22839
  ] })
@@ -22736,14 +22926,18 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
22736
22926
  $weight: theme.typography.text.fontWeight,
22737
22927
  $color: theme.typography.text.color,
22738
22928
  $leading: 1.35,
22739
- children: /* @__PURE__ */ jsxs24(Fragment11, { children: [
22929
+ children: /* @__PURE__ */ jsxs24(Fragment13, { children: [
22740
22930
  t2("Additional"),
22741
22931
  ": ",
22742
22932
  formatCurrency(price, currency),
22743
22933
  feature && /* @__PURE__ */ jsxs24(Box, { as: "sub", $whiteSpace: "nowrap", children: [
22744
22934
  "/",
22745
- getFeatureName(feature, 1),
22746
- feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment11, { children: [
22935
+ packageSize > 1 && /* @__PURE__ */ jsxs24(Fragment13, { children: [
22936
+ packageSize,
22937
+ " "
22938
+ ] }),
22939
+ getFeatureName(feature, packageSize),
22940
+ feature.featureType === "trait" && planPeriod && /* @__PURE__ */ jsxs24(Fragment13, { children: [
22747
22941
  "/",
22748
22942
  shortenPeriod(planPeriod)
22749
22943
  ] })
@@ -23545,7 +23739,7 @@ var PaymentMethodDetails = ({
23545
23739
 
23546
23740
  // src/components/elements/plan-manager/PlanManager.tsx
23547
23741
  import { forwardRef as forwardRef11, useMemo as useMemo14 } from "react";
23548
- import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
23742
+ import { Fragment as Fragment14, jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
23549
23743
  var resolveDesignProps7 = (props) => {
23550
23744
  return {
23551
23745
  header: {
@@ -23613,7 +23807,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23613
23807
  const willSubscriptionCancel = billingSubscription?.cancelAtPeriodEnd;
23614
23808
  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
23615
23809
  const headerPriceFontStyle = isUsageBasedPlan ? "heading3" : props.header.price.fontStyle;
23616
- return /* @__PURE__ */ jsxs27(Fragment12, { children: [
23810
+ return /* @__PURE__ */ jsxs27(Fragment14, { children: [
23617
23811
  isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs27(
23618
23812
  Notice,
23619
23813
  {
@@ -23729,10 +23923,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23729
23923
  const limit = entitlement.softLimit ?? entitlement.allocation ?? 0;
23730
23924
  let overageAmount = entitlement.priceBehavior === "overage" && (entitlement?.usage ?? 0) - (entitlement?.softLimit ?? 0);
23731
23925
  const amount = overageAmount || entitlement.allocation || 0;
23926
+ let packageSize = 1;
23732
23927
  if (entitlement.priceBehavior === "overage" && data.subscription) {
23733
23928
  const subscription = data.subscription;
23734
23929
  const entitlementPrice = entitlement.monthlyUsageBasedPrice ?? entitlement.yearlyUsageBasedPrice;
23735
23930
  if (entitlementPrice) {
23931
+ packageSize = entitlementPrice.packageSize;
23736
23932
  const entitlementProduct = subscription.products.find(
23737
23933
  (product) => product.id === entitlementPrice.productId
23738
23934
  );
@@ -23756,12 +23952,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23756
23952
  $gap: "1rem",
23757
23953
  children: [
23758
23954
  /* @__PURE__ */ jsxs27(Text, { display: props.addOns.fontStyle, children: [
23759
- entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment12, { children: [
23955
+ entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "overage" && limit > 0 ? /* @__PURE__ */ jsxs27(Fragment14, { children: [
23760
23956
  limit,
23761
23957
  " ",
23762
23958
  getFeatureName(entitlement.feature, limit)
23763
23959
  ] }) : entitlement.feature.name,
23764
- entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment12, { children: [
23960
+ entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && currentPlan?.planPeriod && /* @__PURE__ */ jsxs27(Fragment14, { children: [
23765
23961
  "/",
23766
23962
  shortenPeriod(currentPlan.planPeriod)
23767
23963
  ] })
@@ -23774,7 +23970,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23774
23970
  $color: hexToHSL(theme.typography.text.color).l > 50 ? darken(theme.typography.text.color, 0.46) : lighten(theme.typography.text.color, 0.46),
23775
23971
  children: typeof overageAmount === "number" && overageAmount > 0 ? t2("X additional", {
23776
23972
  amount: overageAmount
23777
- }) : /* @__PURE__ */ jsxs27(Fragment12, { children: [
23973
+ }) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
23778
23974
  t2("Additional"),
23779
23975
  ":",
23780
23976
  " ",
@@ -23784,8 +23980,15 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23784
23980
  ),
23785
23981
  /* @__PURE__ */ jsxs27("sub", { children: [
23786
23982
  "/",
23787
- getFeatureName(entitlement.feature, 1),
23788
- entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment12, { children: [
23983
+ packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
23984
+ packageSize,
23985
+ " "
23986
+ ] }),
23987
+ getFeatureName(
23988
+ entitlement.feature,
23989
+ packageSize
23990
+ ),
23991
+ entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs27(Fragment14, { children: [
23789
23992
  "/",
23790
23993
  shortenPeriod(currentPlan.planPeriod)
23791
23994
  ] })
@@ -23804,7 +24007,14 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23804
24007
  ),
23805
24008
  /* @__PURE__ */ jsxs27("sub", { children: [
23806
24009
  "/",
23807
- getFeatureName(entitlement.feature, 1),
24010
+ packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
24011
+ packageSize,
24012
+ " "
24013
+ ] }),
24014
+ getFeatureName(
24015
+ entitlement.feature,
24016
+ packageSize
24017
+ ),
23808
24018
  "/",
23809
24019
  shortenPeriod(currentPlan.planPeriod)
23810
24020
  ] })
@@ -23818,7 +24028,16 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
23818
24028
  ),
23819
24029
  (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior !== "overage") && /* @__PURE__ */ jsxs27("sub", { children: [
23820
24030
  "/",
23821
- currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : getFeatureName(entitlement.feature, 1)
24031
+ currentPlan?.planPeriod && entitlement.priceBehavior === "pay_in_advance" ? shortenPeriod(currentPlan.planPeriod) : /* @__PURE__ */ jsxs27(Fragment14, { children: [
24032
+ packageSize > 1 && /* @__PURE__ */ jsxs27(Fragment14, { children: [
24033
+ packageSize,
24034
+ " "
24035
+ ] }),
24036
+ getFeatureName(
24037
+ entitlement.feature,
24038
+ packageSize
24039
+ )
24040
+ ] })
23822
24041
  ] })
23823
24042
  ] })
23824
24043
  ] })
@@ -23859,7 +24078,7 @@ PlanManager.displayName = "PlanManager";
23859
24078
 
23860
24079
  // src/components/elements/pricing-table/PricingTable.tsx
23861
24080
  import { forwardRef as forwardRef12, useState as useState16 } from "react";
23862
- import { Fragment as Fragment13, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
24081
+ import { Fragment as Fragment15, jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
23863
24082
  var resolveDesignProps8 = (props) => {
23864
24083
  return {
23865
24084
  showPeriodToggle: props.showPeriodToggle ?? true,
@@ -24141,6 +24360,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24141
24360
  if (entitlement.priceBehavior && typeof entitlementPrice !== "number") {
24142
24361
  return acc;
24143
24362
  }
24363
+ const entitlementPackageSize = entitlementPriceObject?.packageSize ?? 1;
24144
24364
  acc.push(
24145
24365
  /* @__PURE__ */ jsxs28(Flex, { $gap: "1rem", children: [
24146
24366
  props.plans.showFeatureIcons && entitlement.feature?.icon && /* @__PURE__ */ jsx36(
@@ -24169,7 +24389,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24169
24389
  $weight: theme.typography.text.fontWeight,
24170
24390
  $color: theme.typography.text.color,
24171
24391
  $leading: 1.35,
24172
- children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
24392
+ children: typeof entitlementPrice === "number" && (entitlement.priceBehavior === "pay_in_advance" || entitlement.priceBehavior === "pay_as_you_go") ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
24173
24393
  formatCurrency(
24174
24394
  entitlementPrice,
24175
24395
  entitlementCurrency
@@ -24177,22 +24397,26 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24177
24397
  " ",
24178
24398
  t2("per"),
24179
24399
  " ",
24400
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24401
+ entitlementPackageSize,
24402
+ " "
24403
+ ] }),
24180
24404
  getFeatureName(
24181
24405
  entitlement.feature,
24182
- 1
24406
+ entitlementPackageSize
24183
24407
  ),
24184
- entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24408
+ entitlement.priceBehavior === "pay_in_advance" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24185
24409
  " ",
24186
24410
  t2("per"),
24187
24411
  " ",
24188
24412
  selectedPeriod
24189
24413
  ] })
24190
- ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
24414
+ ] }) : entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
24191
24415
  entitlement.valueType === "unlimited" && !entitlement.priceBehavior ? t2("Unlimited", {
24192
24416
  item: getFeatureName(
24193
24417
  entitlement.feature
24194
24418
  )
24195
- }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24419
+ }) : typeof limit === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24196
24420
  formatNumber(limit),
24197
24421
  " ",
24198
24422
  getFeatureName(
@@ -24200,7 +24424,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24200
24424
  limit
24201
24425
  )
24202
24426
  ] }),
24203
- entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
24427
+ entitlement.metricPeriod && entitlement.priceBehavior !== "overage" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
24204
24428
  " ",
24205
24429
  t2("per"),
24206
24430
  " ",
@@ -24210,7 +24434,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24210
24434
  current_month: "month",
24211
24435
  current_year: "year"
24212
24436
  }[entitlement.metricPeriod]
24213
- ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24437
+ ] }) : entitlement.priceBehavior === "overage" && entitlement.feature.featureType === "event" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24214
24438
  "/",
24215
24439
  shortenPeriod(
24216
24440
  selectedPeriod
@@ -24241,11 +24465,15 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24241
24465
  entitlementCurrency
24242
24466
  ),
24243
24467
  "/",
24468
+ entitlementPackageSize > 1 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24469
+ entitlementPackageSize,
24470
+ " "
24471
+ ] }),
24244
24472
  getFeatureName(
24245
24473
  entitlement.feature,
24246
- 1
24474
+ entitlementPackageSize
24247
24475
  ),
24248
- entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24476
+ entitlement.feature.featureType === "trait" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24249
24477
  "/",
24250
24478
  shortenPeriod(selectedPeriod)
24251
24479
  ] }),
@@ -24384,7 +24612,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24384
24612
  }
24385
24613
  )
24386
24614
  ] }),
24387
- /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24615
+ /* @__PURE__ */ jsx36(Box, { children: props.addOns.isVisible && addOns.length > 0 && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24388
24616
  props.header.isVisible && /* @__PURE__ */ jsx36(
24389
24617
  Flex,
24390
24618
  {
@@ -24539,12 +24767,12 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24539
24767
  $size: theme.typography.text.fontSize,
24540
24768
  $weight: theme.typography.text.fontWeight,
24541
24769
  $color: theme.typography.text.color,
24542
- children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment13, { children: [
24770
+ children: entitlement.valueType === "numeric" || entitlement.valueType === "unlimited" || entitlement.valueType === "trait" ? /* @__PURE__ */ jsxs28(Fragment15, { children: [
24543
24771
  entitlement.valueType === "unlimited" ? t2("Unlimited", {
24544
24772
  item: getFeatureName(
24545
24773
  entitlement.feature
24546
24774
  )
24547
- }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24775
+ }) : typeof entitlement.valueNumeric === "number" && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24548
24776
  formatNumber(
24549
24777
  entitlement.valueNumeric
24550
24778
  ),
@@ -24554,7 +24782,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
24554
24782
  entitlement.valueNumeric
24555
24783
  )
24556
24784
  ] }),
24557
- entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment13, { children: [
24785
+ entitlement.metricPeriod && /* @__PURE__ */ jsxs28(Fragment15, { children: [
24558
24786
  " ",
24559
24787
  t2("per"),
24560
24788
  " ",
@@ -24910,7 +25138,7 @@ function createRenderer(options2) {
24910
25138
  }
24911
25139
 
24912
25140
  // src/components/embed/ComponentTree.tsx
24913
- import { Fragment as Fragment14, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
25141
+ import { Fragment as Fragment16, jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
24914
25142
  var Loading = () => {
24915
25143
  const theme = nt();
24916
25144
  return /* @__PURE__ */ jsx40(
@@ -24978,7 +25206,7 @@ var ComponentTree = () => {
24978
25206
  if (isPending) {
24979
25207
  return /* @__PURE__ */ jsx40(Loading, {});
24980
25208
  }
24981
- return /* @__PURE__ */ jsx40(Fragment14, { children });
25209
+ return /* @__PURE__ */ jsx40(Fragment16, { children });
24982
25210
  };
24983
25211
 
24984
25212
  // src/components/embed/Embed.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schematichq/schematic-components",
3
- "version": "0.7.11",
3
+ "version": "0.7.12",
4
4
  "main": "dist/schematic-components.cjs.js",
5
5
  "module": "dist/schematic-components.esm.js",
6
6
  "types": "dist/schematic-components.d.ts",
@@ -46,8 +46,8 @@
46
46
  "@eslint/js": "^9.24.0",
47
47
  "@eslint/json": "^0.11.0",
48
48
  "@eslint/markdown": "^6.3.0",
49
- "@microsoft/api-extractor": "^7.52.3",
50
- "@openapitools/openapi-generator-cli": "^2.19.0",
49
+ "@microsoft/api-extractor": "^7.52.4",
50
+ "@openapitools/openapi-generator-cli": "^2.19.1",
51
51
  "@stripe/react-stripe-js": "^3.6.0",
52
52
  "@types/jest": "^29.5.14",
53
53
  "@types/lodash": "^4.17.16",