@schematichq/schematic-components 0.4.8 → 0.4.9

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.9";
       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;
@@ -18988,7 +19005,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 +19075,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"
+                  }
+                )
               }) : ""
             }
           )
@@ -20129,7 +20149,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.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.9";
       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;
@@ -18961,7 +18978,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 +19048,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"
+                  }
+                )
               }) : ""
             }
           )
@@ -20102,7 +20122,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.9",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",