@schematichq/schematic-components 0.4.8 → 0.4.10

package/dist/schematic-components.cjs.js

@@ -12824,7 +12824,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.8";
+      headers["X-Schematic-Components-Version"] = "0.4.10";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13767,12 +13767,27 @@ var spin = mt`
 var Loader = dt.div`
   display: inline-block;
   border-style: solid;
-  border-color: hsla(0, 0%, 50%, 0.125);
-  border-top-color: ${({ theme, $color }) => $color || theme.primary};
   border-radius: 50%;
   transition: all 0.1s;
   animation: 1.5s linear infinite ${spin};
 
+  ${({ $color, theme }) => {
+  const { l: l2 } = hexToHSL(theme.card.background);
+  let color = $color;
+  let colorFn;
+  if (l2 > 50) {
+    color = color ?? "#000000";
+    colorFn = lighten;
+  } else {
+    color = color ?? "#FFFFFF";
+    colorFn = darken;
+  }
+  return lt`
+      border-color: ${color};
+      border-top-color: ${colorFn(color, 42.5)};
+    `;
+}}
+
   ${({ $size = "md", $isLoading = true }) => {
   let px;
   switch ($size) {
@@ -15687,16 +15702,7 @@ var Sidebar = ({
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                EmbedButton,
-                {
-                  onClick: async () => {
-                    unsubscribe();
-                  },
-                  isLoading,
-                  children: t2("Cancel subscription")
-                }
-              ),
+              layout === "unsubscribe" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
               !isLoading && error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 Text,
                 {
@@ -16386,6 +16392,10 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 var import_react23 = require("react");
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
+var RELEASE_TRAIN = "v3";
+var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
+  return version === 3 ? "v3" : version;
+};
 var ORIGIN = "https://js.stripe.com";
 var STRIPE_JS_URL = "".concat(ORIGIN, "/v3");
 var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
@@ -16422,7 +16432,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "5.9.1",
+    version: "5.10.0",
     startTime
   });
 };
@@ -16492,6 +16502,13 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   if (maybeStripe === null) {
     return null;
   }
+  var pk = args[0];
+  var isTestKey = pk.match(/^pk_test/);
+  var version = runtimeVersionToUrlVersion(maybeStripe.version);
+  var expectedVersion = RELEASE_TRAIN;
+  if (isTestKey && version !== expectedVersion) {
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("5.10.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+  }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
   return stripe;
@@ -18214,13 +18231,11 @@ function resolveDesignProps2(props) {
     }
   };
 }
-function formatInvoices(invoices) {
-  return (invoices || []).filter(
-    ({ url, amountDue, amountPaid }) => url && (amountDue === 0 || amountPaid > 0)
-  ).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
-    ...dueDate && { date: toPrettyDate(dueDate) },
+function formatInvoices(invoices = []) {
+  return invoices.filter(({ amountDue, amountPaid }) => amountDue === 0 || amountPaid > 0).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
     amount: formatCurrency(amountDue, currency),
-    url
+    ...dueDate && { date: toPrettyDate(dueDate) },
+    ...url && { url }
   }));
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
@@ -18988,7 +19003,7 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
   const billingSubscription = data.company?.billingSubscription;
   const subscriptionCurrency = billingSubscription?.currency;
   const showTrialBox = billingSubscription && billingSubscription.status == "trialing";
-  const showUnsubscribeBox = billingSubscription && billingSubscription.status == "cancelled";
+  const showUnsubscribeBox = billingSubscription?.cancelAtPeriodEnd;
   const trialEndDate = billingSubscription?.trialEnd ? new Date(billingSubscription.trialEnd * 1e3) : /* @__PURE__ */ new Date();
   const todayDate = /* @__PURE__ */ new Date();
   const trialEndDays = Math.floor(
@@ -19058,9 +19073,12 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
               $weight: theme.typography.text.fontWeight,
               $color: theme.typography.text.color,
               children: billingSubscription.cancelAt ? t2("Access to plan will end on", {
-                date: toPrettyDate(new Date(billingSubscription.cancelAt), {
-                  month: "numeric"
-                })
+                date: toPrettyDate(
+                  new Date(billingSubscription.cancelAt * 1e3),
+                  {
+                    month: "numeric"
+                  }
+                )
               }) : ""
             }
           )
@@ -19448,7 +19466,7 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
               $display: "grid",
               $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
               $gap: "1rem",
-              children: plans.map((plan, index) => {
+              children: plans.map((plan, index, self2) => {
                 const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
                 const count = entitlementCounts[plan.id];
                 let isExpanded = false;
@@ -19554,6 +19572,18 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
                             props.plans.showEntitlements && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
+                              props.plans.showInclusionText && index > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                                Text,
+                                {
+                                  $font: theme.typography.text.fontFamily,
+                                  $size: theme.typography.text.fontSize,
+                                  $weight: theme.typography.text.fontWeight,
+                                  $color: theme.typography.text.color,
+                                  children: t2("Everything in", {
+                                    plan: self2[index - 1].name
+                                  })
+                                }
+                              ) }),
                               plan.entitlements.reduce((acc, entitlement) => {
                                 let price;
                                 let currency;
@@ -20129,7 +20159,7 @@ var UnsubscribeButton = (0, import_react39.forwardRef)(({ children, className, .
   const props = resolveDesignProps8(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
-  const disabled = !data.subscription || data.subscription.status === "cancelled";
+  const disabled = !data.subscription || data.subscription.status === "cancelled" || data.subscription.cancelAtPeriodEnd;
   const buttonStyles = {
     primary: {
       color: "primary",

package/dist/schematic-components.d.ts

@@ -3145,11 +3145,11 @@ declare interface InvoiceResponseData {
 }
 
 export declare const Invoices: ForwardRefExoticComponent<ElementProps & RecursivePartial<DesignProps_2> & {
-data?: ListInvoicesResponse["data"];
+data?: InvoiceResponseData[];
 } & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement | null>>;
 
 export declare type InvoicesProps = DesignProps_2 & {
-    data?: ListInvoicesResponse["data"];
+    data?: InvoiceResponseData[];
 };
 
 declare type Json = any;

package/dist/schematic-components.esm.js

@@ -12776,7 +12776,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.8";
+      headers["X-Schematic-Components-Version"] = "0.4.10";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13719,12 +13719,27 @@ var spin = mt`
 var Loader = dt.div`
   display: inline-block;
   border-style: solid;
-  border-color: hsla(0, 0%, 50%, 0.125);
-  border-top-color: ${({ theme, $color }) => $color || theme.primary};
   border-radius: 50%;
   transition: all 0.1s;
   animation: 1.5s linear infinite ${spin};
 
+  ${({ $color, theme }) => {
+  const { l: l2 } = hexToHSL(theme.card.background);
+  let color = $color;
+  let colorFn;
+  if (l2 > 50) {
+    color = color ?? "#000000";
+    colorFn = lighten;
+  } else {
+    color = color ?? "#FFFFFF";
+    colorFn = darken;
+  }
+  return lt`
+      border-color: ${color};
+      border-top-color: ${colorFn(color, 42.5)};
+    `;
+}}
+
   ${({ $size = "md", $isLoading = true }) => {
   let px;
   switch ($size) {
@@ -15649,16 +15664,7 @@ var Sidebar = ({
                   trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
                 }
               ),
-              layout === "unsubscribe" && /* @__PURE__ */ jsx12(
-                EmbedButton,
-                {
-                  onClick: async () => {
-                    unsubscribe();
-                  },
-                  isLoading,
-                  children: t2("Cancel subscription")
-                }
-              ),
+              layout === "unsubscribe" && /* @__PURE__ */ jsx12(EmbedButton, { onClick: unsubscribe, isLoading, children: t2("Cancel subscription") }),
               !isLoading && error && /* @__PURE__ */ jsx12(Box, { children: /* @__PURE__ */ jsx12(
                 Text,
                 {
@@ -16348,6 +16354,10 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
 import { useEffect as useEffect4, useState as useState6 } from "react";
 
 // node_modules/@stripe/stripe-js/dist/index.mjs
+var RELEASE_TRAIN = "v3";
+var runtimeVersionToUrlVersion = function runtimeVersionToUrlVersion2(version) {
+  return version === 3 ? "v3" : version;
+};
 var ORIGIN = "https://js.stripe.com";
 var STRIPE_JS_URL = "".concat(ORIGIN, "/v3");
 var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
@@ -16384,7 +16394,7 @@ var registerWrapper = function registerWrapper2(stripe, startTime) {
   }
   stripe._registerWrapper({
     name: "stripe-js",
-    version: "5.9.1",
+    version: "5.10.0",
     startTime
   });
 };
@@ -16454,6 +16464,13 @@ var initStripe = function initStripe2(maybeStripe, args, startTime) {
   if (maybeStripe === null) {
     return null;
   }
+  var pk = args[0];
+  var isTestKey = pk.match(/^pk_test/);
+  var version = runtimeVersionToUrlVersion(maybeStripe.version);
+  var expectedVersion = RELEASE_TRAIN;
+  if (isTestKey && version !== expectedVersion) {
+    console.warn("Stripe.js@".concat(version, " was loaded on the page, but @stripe/stripe-js@").concat("5.10.0", " expected Stripe.js@").concat(expectedVersion, ". This may result in unexpected behavior. For more information, see https://docs.stripe.com/sdks/stripejs-versioning"));
+  }
   var stripe = maybeStripe.apply(void 0, args);
   registerWrapper(stripe, startTime);
   return stripe;
@@ -18180,13 +18197,11 @@ function resolveDesignProps2(props) {
     }
   };
 }
-function formatInvoices(invoices) {
-  return (invoices || []).filter(
-    ({ url, amountDue, amountPaid }) => url && (amountDue === 0 || amountPaid > 0)
-  ).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
-    ...dueDate && { date: toPrettyDate(dueDate) },
+function formatInvoices(invoices = []) {
+  return invoices.filter(({ amountDue, amountPaid }) => amountDue === 0 || amountPaid > 0).sort((a2, b2) => a2.dueDate && b2.dueDate ? +b2.dueDate - +a2.dueDate : 1).map(({ amountDue, dueDate, url, currency }) => ({
     amount: formatCurrency(amountDue, currency),
-    url
+    ...dueDate && { date: toPrettyDate(dueDate) },
+    ...url && { url }
   }));
 }
 var InvoiceDate = ({ date, fontStyle, url }) => {
@@ -18961,7 +18976,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
   const billingSubscription = data.company?.billingSubscription;
   const subscriptionCurrency = billingSubscription?.currency;
   const showTrialBox = billingSubscription && billingSubscription.status == "trialing";
-  const showUnsubscribeBox = billingSubscription && billingSubscription.status == "cancelled";
+  const showUnsubscribeBox = billingSubscription?.cancelAtPeriodEnd;
   const trialEndDate = billingSubscription?.trialEnd ? new Date(billingSubscription.trialEnd * 1e3) : /* @__PURE__ */ new Date();
   const todayDate = /* @__PURE__ */ new Date();
   const trialEndDays = Math.floor(
@@ -19031,9 +19046,12 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
               $weight: theme.typography.text.fontWeight,
               $color: theme.typography.text.color,
               children: billingSubscription.cancelAt ? t2("Access to plan will end on", {
-                date: toPrettyDate(new Date(billingSubscription.cancelAt), {
-                  month: "numeric"
-                })
+                date: toPrettyDate(
+                  new Date(billingSubscription.cancelAt * 1e3),
+                  {
+                    month: "numeric"
+                  }
+                )
               }) : ""
             }
           )
@@ -19421,7 +19439,7 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
               $display: "grid",
               $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
               $gap: "1rem",
-              children: plans.map((plan, index) => {
+              children: plans.map((plan, index, self2) => {
                 const isActivePlan = plan.current && data.company?.plan?.planPeriod === selectedPeriod;
                 const count = entitlementCounts[plan.id];
                 let isExpanded = false;
@@ -19527,6 +19545,18 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                           $padding: `${0.75 * cardPadding}rem ${cardPadding}rem 0`,
                           children: [
                             props.plans.showEntitlements && /* @__PURE__ */ jsxs26(Flex, { $flexDirection: "column", $gap: "1rem", $flexGrow: "1", children: [
+                              props.plans.showInclusionText && index > 0 && /* @__PURE__ */ jsx32(Box, { $marginBottom: "1.5rem", children: /* @__PURE__ */ jsx32(
+                                Text,
+                                {
+                                  $font: theme.typography.text.fontFamily,
+                                  $size: theme.typography.text.fontSize,
+                                  $weight: theme.typography.text.fontWeight,
+                                  $color: theme.typography.text.color,
+                                  children: t2("Everything in", {
+                                    plan: self2[index - 1].name
+                                  })
+                                }
+                              ) }),
                               plan.entitlements.reduce((acc, entitlement) => {
                                 let price;
                                 let currency;
@@ -20102,7 +20132,7 @@ var UnsubscribeButton = forwardRef14(({ children, className, ...rest }, ref) =>
   const props = resolveDesignProps8(rest);
   const { t: t2 } = useTranslation();
   const { data, setLayout } = useEmbed();
-  const disabled = !data.subscription || data.subscription.status === "cancelled";
+  const disabled = !data.subscription || data.subscription.status === "cancelled" || data.subscription.cancelAtPeriodEnd;
   const buttonStyles = {
     primary: {
       color: "primary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -30,7 +30,7 @@
     "tsc": "npx tsc"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^5.8.0",
+    "@stripe/stripe-js": "^5.9.2",
     "classnames": "^2.5.1",
     "i18next": "^24.2.2",
     "lodash": "^4.17.21",