@schematichq/schematic-components 0.3.7 → 0.3.9

package/dist/schematic-components.cjs.js

@@ -1227,6 +1227,7 @@ __export(src_exports, {
   ProgressBar: () => ProgressBar,
   Root: () => Root,
   SchematicEmbed: () => SchematicEmbed,
+  StyledCard: () => StyledCard,
   Text: () => Text,
   Tooltip: () => Tooltip,
   UpcomingBill: () => UpcomingBill,
@@ -7368,22 +7369,6 @@ function CompanyPlanWithBillingSubViewFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/models/PreviewObject.ts
-function PreviewObjectFromJSON(json) {
-  return PreviewObjectFromJSONTyped(json, false);
-}
-function PreviewObjectFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    description: json["description"] == null ? void 0 : json["description"],
-    id: json["id"],
-    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
-    name: json["name"]
-  };
-}
-
 // src/api/models/EntityKeyDefinitionResponseData.ts
 function EntityKeyDefinitionResponseDataFromJSON(json) {
   return EntityKeyDefinitionResponseDataFromJSONTyped(json, false);
@@ -7461,6 +7446,22 @@ function EntityTraitDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/GenericPreviewObject.ts
+function GenericPreviewObjectFromJSON(json) {
+  return GenericPreviewObjectFromJSONTyped(json, false);
+}
+function GenericPreviewObjectFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    description: json["description"] == null ? void 0 : json["description"],
+    id: json["id"],
+    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
+    name: json["name"]
+  };
+}
+
 // src/api/models/CompanyDetailResponseData.ts
 function CompanyDetailResponseDataFromJSON(json) {
   return CompanyDetailResponseDataFromJSONTyped(json, false);
@@ -7487,13 +7488,29 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     logoUrl: json["logo_url"] == null ? void 0 : json["logo_url"],
     name: json["name"],
     plan: json["plan"] == null ? void 0 : CompanyPlanWithBillingSubViewFromJSON(json["plan"]),
-    plans: json["plans"].map(PreviewObjectFromJSON),
+    plans: json["plans"].map(GenericPreviewObjectFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
     updatedAt: new Date(json["updated_at"]),
     userCount: json["user_count"]
   };
 }
 
+// src/api/models/PreviewObject.ts
+function PreviewObjectFromJSON(json) {
+  return PreviewObjectFromJSONTyped(json, false);
+}
+function PreviewObjectFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    description: json["description"] == null ? void 0 : json["description"],
+    id: json["id"],
+    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
+    name: json["name"]
+  };
+}
+
 // src/api/models/EventSummaryResponseData.ts
 function EventSummaryResponseDataFromJSON(json) {
   return EventSummaryResponseDataFromJSONTyped(json, false);
@@ -8865,7 +8882,7 @@ var EmbedProvider = ({
   (0, import_react2.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.7";
+      headers["X-Schematic-Components-Version"] = "0.3.9";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -9798,14 +9815,13 @@ var FeatureName = ({
 };
 var CheckoutDialog = () => {
   const theme = nt();
-  const { api, data, setLayout } = useEmbed();
+  const { api, data, mode, setLayout } = useEmbed();
   const [checkoutStage, setCheckoutStage] = (0, import_react8.useState)(
     "plan"
   );
   const [planPeriod, setPlanPeriod] = (0, import_react8.useState)(
-    () => data.company?.plan?.planPeriod || "month"
+    data.company?.plan?.planPeriod || "month"
   );
-  const [selectedPlan, setSelectedPlan] = (0, import_react8.useState)();
   const [charges, setCharges] = (0, import_react8.useState)();
   const [paymentMethodId, setPaymentMethodId] = (0, import_react8.useState)();
   const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
@@ -9816,26 +9832,29 @@ var CheckoutDialog = () => {
   const [stripe, setStripe] = (0, import_react8.useState)(null);
   const [setupIntent, setSetupIntent] = (0, import_react8.useState)();
   const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = (0, import_react8.useMemo)(() => {
-    const showMonthlyPriceOption = data.activePlans.some(
-      (plan) => typeof plan.yearlyPrice !== "undefined"
-    );
-    const showYearlyPriceOption = data.activePlans.some(
-      (plan) => typeof plan.yearlyPrice !== "undefined"
-    );
     const planPeriodOptions2 = [];
-    if (showMonthlyPriceOption) {
+    if (data.activePlans.some((plan) => plan.monthlyPrice)) {
       planPeriodOptions2.push("month");
     }
-    if (showYearlyPriceOption) {
+    if (data.activePlans.some((plan) => plan.yearlyPrice)) {
       planPeriodOptions2.push("year");
     }
     return {
       paymentMethod: data.subscription?.paymentMethod,
       currentPlan: data.company?.plan,
-      availablePlans: data.activePlans,
+      availablePlans: mode === "edit" ? data.activePlans : data.activePlans.filter((plan) => {
+        return planPeriod === "month" && plan.monthlyPrice || planPeriod === "year" && plan.yearlyPrice;
+      }),
       planPeriodOptions: planPeriodOptions2
     };
-  }, [data.subscription?.paymentMethod, data.company, data.activePlans]);
+  }, [
+    data.subscription?.paymentMethod,
+    data.company,
+    data.activePlans,
+    mode,
+    planPeriod
+  ]);
+  const [selectedPlan, setSelectedPlan] = (0, import_react8.useState)(() => availablePlans.find((plan) => plan.id === currentPlan?.id));
   const savingsPercentage = (0, import_react8.useMemo)(() => {
     if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
@@ -9855,8 +9874,11 @@ var CheckoutDialog = () => {
   const isLightBackground = useIsLightBackground();
   const selectPlan = (0, import_react8.useCallback)(
     async (plan, newPeriod) => {
-      setSelectedPlan(plan);
       setCharges(void 0);
+      if (plan.id === currentPlan?.id && newPeriod && newPeriod === currentPlan?.planPeriod) {
+        return;
+      }
+      setSelectedPlan(plan);
       const period = newPeriod || planPeriod;
       const priceId = (period === "month" ? plan?.monthlyPrice : plan?.yearlyPrice)?.id;
       if (!priceId || !api) {
@@ -9879,14 +9901,14 @@ var CheckoutDialog = () => {
         setIsLoading(false);
       }
     },
-    [api, planPeriod]
+    [api, currentPlan, planPeriod]
   );
   const changePlanPeriod = (0, import_react8.useCallback)(
     (period) => {
-      setPlanPeriod(period);
       if (selectedPlan) {
         selectPlan(selectedPlan, period);
       }
+      setPlanPeriod(period);
     },
     [selectedPlan, selectPlan]
   );
@@ -9924,7 +9946,7 @@ var CheckoutDialog = () => {
       document.body.style.overflow = "";
     };
   }, []);
-  const allowCheckout = api && selectedPlan && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
+  const allowCheckout = api && selectedPlan && (selectedPlan.id !== currentPlan?.id || planPeriod !== currentPlan.planPeriod) && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Modal, { size: "lg", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalHeader, { bordered: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "1rem", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
@@ -10067,6 +10089,7 @@ var CheckoutDialog = () => {
                 }
                 return 0;
               }).map((plan) => {
+                const isCurrentPlan = plan.id === selectedPlan?.id;
                 return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   Flex,
                   {
@@ -10107,7 +10130,7 @@ var CheckoutDialog = () => {
                                 planPeriod
                               ] })
                             ] }),
-                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            isCurrentPlan && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                               Flex,
                               {
                                 $position: "absolute",
@@ -10162,7 +10185,7 @@ var CheckoutDialog = () => {
                           })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10171,58 +10194,56 @@ var CheckoutDialog = () => {
                           $width: "100%",
                           $height: "auto",
                           $padding: "1.5rem",
-                          children: [
-                            plan.id === selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                              Flex,
-                              {
-                                $justifyContent: "center",
-                                $alignItems: "center",
-                                $gap: "0.25rem",
-                                $fontSize: "0.9375rem",
-                                $padding: "0.625rem 0",
-                                children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                    Icon2,
-                                    {
-                                      name: "check-rounded",
-                                      style: {
-                                        fontSize: 20,
-                                        lineHeight: "1",
-                                        color: theme.primary
-                                      }
-                                    }
-                                  ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                    Text,
-                                    {
-                                      $lineHeight: "1.4",
-                                      $color: theme.typography.text.color,
-                                      children: "Selected"
+                          children: !isCurrentPlan ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            EmbedButton,
+                            {
+                              disabled: isLoading || plan.valid === false,
+                              isLoading,
+                              ...plan.valid === true && {
+                                onClick: () => selectPlan(plan)
+                              },
+                              $size: "sm",
+                              $color: "primary",
+                              $variant: "outline",
+                              children: plan.valid === false ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                Tooltip,
+                                {
+                                  label: "Over usage limit",
+                                  description: " Current usage exceeds limit of this plan"
+                                }
+                              ) : "Select"
+                            }
+                          ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                            Flex,
+                            {
+                              $justifyContent: "center",
+                              $alignItems: "center",
+                              $gap: "0.25rem",
+                              $fontSize: "0.9375rem",
+                              $padding: "0.625rem 0",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  Icon2,
+                                  {
+                                    name: "check-rounded",
+                                    style: {
+                                      fontSize: 20,
+                                      lineHeight: "1",
+                                      color: theme.primary
                                     }
-                                  )
-                                ]
-                              }
-                            ),
-                            plan.id !== selectedPlan?.id && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { $position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                              EmbedButton,
-                              {
-                                disabled: isLoading || plan.valid === false,
-                                ...plan.valid === true && {
-                                  onClick: () => selectPlan(plan)
-                                },
-                                $size: "sm",
-                                $color: "primary",
-                                $variant: "outline",
-                                children: plan.valid === false ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                                  Tooltip,
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                  Text,
                                   {
-                                    label: "Over usage limit",
-                                    description: " Current usage exceeds limit of this plan"
+                                    $lineHeight: "1.4",
+                                    $color: theme.typography.text.color,
+                                    children: "Selected"
                                   }
-                                ) : "Select"
-                              }
-                            ) })
-                          ]
+                                )
+                              ]
+                            }
+                          )
                         }
                       )
                     ]
@@ -10446,7 +10467,7 @@ var CheckoutDialog = () => {
                           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                             Flex,
                             {
-                              ...selectedPlan && {
+                              ...allowCheckout && {
                                 $opacity: "0.625",
                                 $textDecoration: "line-through"
                               },
@@ -10479,7 +10500,7 @@ var CheckoutDialog = () => {
                         ]
                       }
                     ),
-                    selectedPlan && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $marginBottom: "1rem", children: [
+                    allowCheckout && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                         Box,
                         {
@@ -10671,6 +10692,7 @@ var CheckoutDialog = () => {
                   checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                     EmbedButton,
                     {
+                      isLoading,
                       ...allowCheckout ? {
                         onClick: async () => {
                           if (!data.component?.id) {
@@ -10900,69 +10922,47 @@ var import_react12 = require("react");
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
-var StyledCard = dt.div(
-  ({
-    theme,
-    $sectionLayout = "merged",
-    $borderRadius = 8,
-    $padding = 48,
-    $shadow = true
-  }) => {
-    const { l: l2 } = hexToHSL(theme.card.background);
-    const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
-    const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
-    const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-    const Selector = $sectionLayout === "merged" ? "&" : Element;
-    return lt`
-      font-size: ${TEXT_BASE_SIZE}px;
-      box-sizing: border-box;
-
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-
-      ${Selector} {
-        color: ${theme.typography.text.color};
-        background: ${theme.card.background};
-        border-radius: ${borderRadius};
-        ${$shadow && `box-shadow: ${boxShadow};`}
-      }
-
-      ${Element} {
-        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
-          ${$padding / TEXT_BASE_SIZE}rem;
-
-        &:not(:last-child) {
-          ${$sectionLayout === "merged" ? lt`
-                border-bottom: 1px solid ${borderColor};
-              ` : lt`
-                margin-bottom: 1rem;
-              `}
-        }
-      }
-    `;
-  }
-);
+var StyledCard = dt.div(({ theme }) => {
+  const { l: l2 } = hexToHSL(theme.card.background);
+  const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
+  const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
+  const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+  const Selector = theme.sectionLayout === "merged" ? "&" : Element;
+  return lt`
+    font-size: ${TEXT_BASE_SIZE}px;
+    box-sizing: border-box;
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    ${Selector} {
+      color: ${theme.typography.text.color};
+      background: ${theme.card.background};
+      border-radius: ${borderRadius};
+      ${theme.card.hasShadow && `box-shadow: ${boxShadow};`}
+    }
+
+    ${Element} {
+      padding: ${theme.card.padding * 0.75 / TEXT_BASE_SIZE}rem
+        ${theme.card.padding / TEXT_BASE_SIZE}rem;
+
+      ${theme.sectionLayout === "merged" ? lt`
+            border-bottom: 1px solid ${borderColor};
+          ` : lt`
+            margin-bottom: 1rem;
+          `}
+    }
+  `;
+});
 
 // src/components/layout/card/Card.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Card = (0, import_react12.forwardRef)(
   ({ children, className }, ref) => {
-    const theme = nt();
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: theme?.sectionLayout,
-        $borderRadius: theme?.card?.borderRadius,
-        $padding: theme?.card?.padding,
-        $shadow: theme?.card?.hasShadow,
-        children
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StyledCard, { ref, className, children });
   }
 );
 Card.displayName = "Card";
@@ -11257,8 +11257,7 @@ function resolveDesignProps3(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    },
-    visibleFeatures: props.visibleFeatures ?? []
+    }
   };
 }
 var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
@@ -11269,7 +11268,7 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const features = (data.featureUsage?.features || []).filter(({ feature }) => {
-    return (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.id && props.visibleFeatures?.includes(feature.id);
+    return feature?.featureType === "event" || feature?.featureType === "trait";
   });
   if (features.length === 0) {
     return null;

package/dist/schematic-components.d.ts

@@ -581,10 +581,10 @@ declare interface CompanyDetailResponseData {
     plan?: CompanyPlanWithBillingSubView;
     /**
      *
-     * @type {Array<PreviewObject>}
+     * @type {Array<GenericPreviewObject>}
      * @memberof CompanyDetailResponseData
      */
-    plans: Array<PreviewObject>;
+    plans: Array<GenericPreviewObject>;
     /**
      * A map of trait names to trait values
      * @type {object}
@@ -1164,7 +1164,6 @@ declare interface DesignProps_3 {
         isVisible: boolean;
         fontStyle: FontStyle;
     };
-    visibleFeatures: string[];
 }
 
 declare interface DesignProps_4 {
@@ -1201,7 +1200,7 @@ declare interface DesignProps_5 {
     callToAction: {
         isVisible: boolean;
         buttonSize: "sm" | "md" | "lg";
-        buttonStyle: "primary" | "secondary" | "tertiary";
+        buttonStyle: "primary" | "secondary";
     };
 }
 
@@ -1235,7 +1234,7 @@ declare interface ElementProps {
 
 export declare const EmbedButton: IStyledComponentBase<"web", Substitute<ButtonProps, {
 $size?: "sm" | "md" | "lg";
-$color?: "primary" | "secondary" | "tertiary";
+$color?: "primary" | "secondary";
 $variant?: "outline" | "filled";
 }>> & string & Omit<({ color, size, variant, disabled, isLoading, children, ...props }: ButtonProps) => JSX_2.Element, keyof Component<any, {}, any>>;
 
@@ -1971,6 +1970,49 @@ ref?: ((instance: HTMLDivElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIR
 
 export declare type FontStyle = keyof EmbedThemeSettings["typography"];
 
+/**
+ * Schematic API
+ * Schematic API
+ *
+ * The version of the OpenAPI document: 0.1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ *
+ * @export
+ * @interface GenericPreviewObject
+ */
+declare interface GenericPreviewObject {
+    /**
+     *
+     * @type {string}
+     * @memberof GenericPreviewObject
+     */
+    description?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof GenericPreviewObject
+     */
+    id: string;
+    /**
+     *
+     * @type {string}
+     * @memberof GenericPreviewObject
+     */
+    imageUrl?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof GenericPreviewObject
+     */
+    name: string;
+}
+
 declare interface GetSetupIntentRequest {
     componentId: string;
 }
@@ -3189,6 +3231,8 @@ declare interface StripeEmbedInfo {
     setupIntentClientSecret?: string | null;
 }
 
+export declare const StyledCard: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+
 declare const Text_2: IStyledComponentBase<"web", Substitute<FastOmit<Substitute<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
 ref?: ((instance: HTMLSpanElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLSpanElement> | null | undefined;
 }>, never>, TextProps>> & string;

package/dist/schematic-components.esm.js

@@ -7329,22 +7329,6 @@ function CompanyPlanWithBillingSubViewFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
-// src/api/models/PreviewObject.ts
-function PreviewObjectFromJSON(json) {
-  return PreviewObjectFromJSONTyped(json, false);
-}
-function PreviewObjectFromJSONTyped(json, ignoreDiscriminator) {
-  if (json == null) {
-    return json;
-  }
-  return {
-    description: json["description"] == null ? void 0 : json["description"],
-    id: json["id"],
-    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
-    name: json["name"]
-  };
-}
-
 // src/api/models/EntityKeyDefinitionResponseData.ts
 function EntityKeyDefinitionResponseDataFromJSON(json) {
   return EntityKeyDefinitionResponseDataFromJSONTyped(json, false);
@@ -7422,6 +7406,22 @@ function EntityTraitDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/GenericPreviewObject.ts
+function GenericPreviewObjectFromJSON(json) {
+  return GenericPreviewObjectFromJSONTyped(json, false);
+}
+function GenericPreviewObjectFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    description: json["description"] == null ? void 0 : json["description"],
+    id: json["id"],
+    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
+    name: json["name"]
+  };
+}
+
 // src/api/models/CompanyDetailResponseData.ts
 function CompanyDetailResponseDataFromJSON(json) {
   return CompanyDetailResponseDataFromJSONTyped(json, false);
@@ -7448,13 +7448,29 @@ function CompanyDetailResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     logoUrl: json["logo_url"] == null ? void 0 : json["logo_url"],
     name: json["name"],
     plan: json["plan"] == null ? void 0 : CompanyPlanWithBillingSubViewFromJSON(json["plan"]),
-    plans: json["plans"].map(PreviewObjectFromJSON),
+    plans: json["plans"].map(GenericPreviewObjectFromJSON),
     traits: json["traits"] == null ? void 0 : json["traits"],
     updatedAt: new Date(json["updated_at"]),
     userCount: json["user_count"]
   };
 }
 
+// src/api/models/PreviewObject.ts
+function PreviewObjectFromJSON(json) {
+  return PreviewObjectFromJSONTyped(json, false);
+}
+function PreviewObjectFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    description: json["description"] == null ? void 0 : json["description"],
+    id: json["id"],
+    imageUrl: json["image_url"] == null ? void 0 : json["image_url"],
+    name: json["name"]
+  };
+}
+
 // src/api/models/EventSummaryResponseData.ts
 function EventSummaryResponseDataFromJSON(json) {
   return EventSummaryResponseDataFromJSONTyped(json, false);
@@ -8826,7 +8842,7 @@ var EmbedProvider = ({
   useEffect(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.7";
+      headers["X-Schematic-Components-Version"] = "0.3.9";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -9759,14 +9775,13 @@ var FeatureName = ({
 };
 var CheckoutDialog = () => {
   const theme = nt();
-  const { api, data, setLayout } = useEmbed();
+  const { api, data, mode, setLayout } = useEmbed();
   const [checkoutStage, setCheckoutStage] = useState3(
     "plan"
   );
   const [planPeriod, setPlanPeriod] = useState3(
-    () => data.company?.plan?.planPeriod || "month"
+    data.company?.plan?.planPeriod || "month"
   );
-  const [selectedPlan, setSelectedPlan] = useState3();
   const [charges, setCharges] = useState3();
   const [paymentMethodId, setPaymentMethodId] = useState3();
   const [isLoading, setIsLoading] = useState3(false);
@@ -9777,26 +9792,29 @@ var CheckoutDialog = () => {
   const [stripe, setStripe] = useState3(null);
   const [setupIntent, setSetupIntent] = useState3();
   const { paymentMethod, currentPlan, availablePlans, planPeriodOptions } = useMemo2(() => {
-    const showMonthlyPriceOption = data.activePlans.some(
-      (plan) => typeof plan.yearlyPrice !== "undefined"
-    );
-    const showYearlyPriceOption = data.activePlans.some(
-      (plan) => typeof plan.yearlyPrice !== "undefined"
-    );
     const planPeriodOptions2 = [];
-    if (showMonthlyPriceOption) {
+    if (data.activePlans.some((plan) => plan.monthlyPrice)) {
       planPeriodOptions2.push("month");
     }
-    if (showYearlyPriceOption) {
+    if (data.activePlans.some((plan) => plan.yearlyPrice)) {
       planPeriodOptions2.push("year");
     }
     return {
       paymentMethod: data.subscription?.paymentMethod,
       currentPlan: data.company?.plan,
-      availablePlans: data.activePlans,
+      availablePlans: mode === "edit" ? data.activePlans : data.activePlans.filter((plan) => {
+        return planPeriod === "month" && plan.monthlyPrice || planPeriod === "year" && plan.yearlyPrice;
+      }),
       planPeriodOptions: planPeriodOptions2
     };
-  }, [data.subscription?.paymentMethod, data.company, data.activePlans]);
+  }, [
+    data.subscription?.paymentMethod,
+    data.company,
+    data.activePlans,
+    mode,
+    planPeriod
+  ]);
+  const [selectedPlan, setSelectedPlan] = useState3(() => availablePlans.find((plan) => plan.id === currentPlan?.id));
   const savingsPercentage = useMemo2(() => {
     if (selectedPlan) {
       const monthly = (selectedPlan?.monthlyPrice?.price || 0) * 12;
@@ -9816,8 +9834,11 @@ var CheckoutDialog = () => {
   const isLightBackground = useIsLightBackground();
   const selectPlan = useCallback4(
     async (plan, newPeriod) => {
-      setSelectedPlan(plan);
       setCharges(void 0);
+      if (plan.id === currentPlan?.id && newPeriod && newPeriod === currentPlan?.planPeriod) {
+        return;
+      }
+      setSelectedPlan(plan);
       const period = newPeriod || planPeriod;
       const priceId = (period === "month" ? plan?.monthlyPrice : plan?.yearlyPrice)?.id;
       if (!priceId || !api) {
@@ -9840,14 +9861,14 @@ var CheckoutDialog = () => {
         setIsLoading(false);
       }
     },
-    [api, planPeriod]
+    [api, currentPlan, planPeriod]
   );
   const changePlanPeriod = useCallback4(
     (period) => {
-      setPlanPeriod(period);
       if (selectedPlan) {
         selectPlan(selectedPlan, period);
       }
+      setPlanPeriod(period);
     },
     [selectedPlan, selectPlan]
   );
@@ -9885,7 +9906,7 @@ var CheckoutDialog = () => {
       document.body.style.overflow = "";
     };
   }, []);
-  const allowCheckout = api && selectedPlan && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
+  const allowCheckout = api && selectedPlan && (selectedPlan.id !== currentPlan?.id || planPeriod !== currentPlan.planPeriod) && (paymentMethod && !showPaymentForm || paymentMethodId) && !isLoading;
   return /* @__PURE__ */ jsxs6(Modal, { size: "lg", children: [
     /* @__PURE__ */ jsx9(ModalHeader, { bordered: true, children: /* @__PURE__ */ jsxs6(Flex, { $gap: "1rem", children: [
       /* @__PURE__ */ jsxs6(Flex, { $gap: "0.5rem", $alignItems: "center", children: [
@@ -10028,6 +10049,7 @@ var CheckoutDialog = () => {
                 }
                 return 0;
               }).map((plan) => {
+                const isCurrentPlan = plan.id === selectedPlan?.id;
                 return /* @__PURE__ */ jsxs6(
                   Flex,
                   {
@@ -10068,7 +10090,7 @@ var CheckoutDialog = () => {
                                 planPeriod
                               ] })
                             ] }),
-                            (plan.current || plan.id === currentPlan?.id) && /* @__PURE__ */ jsx9(
+                            isCurrentPlan && /* @__PURE__ */ jsx9(
                               Flex,
                               {
                                 $position: "absolute",
@@ -10123,7 +10145,7 @@ var CheckoutDialog = () => {
                           })
                         }
                       ),
-                      /* @__PURE__ */ jsxs6(
+                      /* @__PURE__ */ jsx9(
                         Flex,
                         {
                           $flexDirection: "column",
@@ -10132,58 +10154,56 @@ var CheckoutDialog = () => {
                           $width: "100%",
                           $height: "auto",
                           $padding: "1.5rem",
-                          children: [
-                            plan.id === selectedPlan?.id && /* @__PURE__ */ jsxs6(
-                              Flex,
-                              {
-                                $justifyContent: "center",
-                                $alignItems: "center",
-                                $gap: "0.25rem",
-                                $fontSize: "0.9375rem",
-                                $padding: "0.625rem 0",
-                                children: [
-                                  /* @__PURE__ */ jsx9(
-                                    Icon2,
-                                    {
-                                      name: "check-rounded",
-                                      style: {
-                                        fontSize: 20,
-                                        lineHeight: "1",
-                                        color: theme.primary
-                                      }
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx9(
-                                    Text,
-                                    {
-                                      $lineHeight: "1.4",
-                                      $color: theme.typography.text.color,
-                                      children: "Selected"
+                          children: !isCurrentPlan ? /* @__PURE__ */ jsx9(Box, { $position: "relative", children: /* @__PURE__ */ jsx9(
+                            EmbedButton,
+                            {
+                              disabled: isLoading || plan.valid === false,
+                              isLoading,
+                              ...plan.valid === true && {
+                                onClick: () => selectPlan(plan)
+                              },
+                              $size: "sm",
+                              $color: "primary",
+                              $variant: "outline",
+                              children: plan.valid === false ? /* @__PURE__ */ jsx9(
+                                Tooltip,
+                                {
+                                  label: "Over usage limit",
+                                  description: " Current usage exceeds limit of this plan"
+                                }
+                              ) : "Select"
+                            }
+                          ) }) : /* @__PURE__ */ jsxs6(
+                            Flex,
+                            {
+                              $justifyContent: "center",
+                              $alignItems: "center",
+                              $gap: "0.25rem",
+                              $fontSize: "0.9375rem",
+                              $padding: "0.625rem 0",
+                              children: [
+                                /* @__PURE__ */ jsx9(
+                                  Icon2,
+                                  {
+                                    name: "check-rounded",
+                                    style: {
+                                      fontSize: 20,
+                                      lineHeight: "1",
+                                      color: theme.primary
                                     }
-                                  )
-                                ]
-                              }
-                            ),
-                            plan.id !== selectedPlan?.id && /* @__PURE__ */ jsx9(Box, { $position: "relative", children: /* @__PURE__ */ jsx9(
-                              EmbedButton,
-                              {
-                                disabled: isLoading || plan.valid === false,
-                                ...plan.valid === true && {
-                                  onClick: () => selectPlan(plan)
-                                },
-                                $size: "sm",
-                                $color: "primary",
-                                $variant: "outline",
-                                children: plan.valid === false ? /* @__PURE__ */ jsx9(
-                                  Tooltip,
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx9(
+                                  Text,
                                   {
-                                    label: "Over usage limit",
-                                    description: " Current usage exceeds limit of this plan"
+                                    $lineHeight: "1.4",
+                                    $color: theme.typography.text.color,
+                                    children: "Selected"
                                   }
-                                ) : "Select"
-                              }
-                            ) })
-                          ]
+                                )
+                              ]
+                            }
+                          )
                         }
                       )
                     ]
@@ -10407,7 +10427,7 @@ var CheckoutDialog = () => {
                           /* @__PURE__ */ jsx9(
                             Flex,
                             {
-                              ...selectedPlan && {
+                              ...allowCheckout && {
                                 $opacity: "0.625",
                                 $textDecoration: "line-through"
                               },
@@ -10440,7 +10460,7 @@ var CheckoutDialog = () => {
                         ]
                       }
                     ),
-                    selectedPlan && /* @__PURE__ */ jsxs6(Box, { $marginBottom: "1rem", children: [
+                    allowCheckout && /* @__PURE__ */ jsxs6(Box, { $marginBottom: "1rem", children: [
                       /* @__PURE__ */ jsx9(
                         Box,
                         {
@@ -10632,6 +10652,7 @@ var CheckoutDialog = () => {
                   checkoutStage === "plan" ? /* @__PURE__ */ jsx9(
                     EmbedButton,
                     {
+                      isLoading,
                       ...allowCheckout ? {
                         onClick: async () => {
                           if (!data.component?.id) {
@@ -10861,69 +10882,47 @@ import { forwardRef as forwardRef3 } from "react";
 
 // src/components/layout/card/styles.ts
 var Element = dt(Box)``;
-var StyledCard = dt.div(
-  ({
-    theme,
-    $sectionLayout = "merged",
-    $borderRadius = 8,
-    $padding = 48,
-    $shadow = true
-  }) => {
-    const { l: l2 } = hexToHSL(theme.card.background);
-    const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
-    const borderRadius = `${$borderRadius / TEXT_BASE_SIZE}rem`;
-    const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
-    const Selector = $sectionLayout === "merged" ? "&" : Element;
-    return lt`
-      font-size: ${TEXT_BASE_SIZE}px;
-      box-sizing: border-box;
-
-      *,
-      *::before,
-      *::after {
-        box-sizing: inherit;
-      }
-
-      ${Selector} {
-        color: ${theme.typography.text.color};
-        background: ${theme.card.background};
-        border-radius: ${borderRadius};
-        ${$shadow && `box-shadow: ${boxShadow};`}
-      }
-
-      ${Element} {
-        padding: ${$padding * 0.75 / TEXT_BASE_SIZE}rem
-          ${$padding / TEXT_BASE_SIZE}rem;
-
-        &:not(:last-child) {
-          ${$sectionLayout === "merged" ? lt`
-                border-bottom: 1px solid ${borderColor};
-              ` : lt`
-                margin-bottom: 1rem;
-              `}
-        }
-      }
-    `;
-  }
-);
+var StyledCard = dt.div(({ theme }) => {
+  const { l: l2 } = hexToHSL(theme.card.background);
+  const borderColor = l2 > 50 ? "hsla(0, 0%, 0%, 0.1)" : "hsla(0, 0%, 100%, 0.2)";
+  const borderRadius = `${theme.card.borderRadius / TEXT_BASE_SIZE}rem`;
+  const boxShadow = "0px 1px 20px 0px #1018280F, 0px 1px 3px 0px #1018281A";
+  const Selector = theme.sectionLayout === "merged" ? "&" : Element;
+  return lt`
+    font-size: ${TEXT_BASE_SIZE}px;
+    box-sizing: border-box;
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+
+    ${Selector} {
+      color: ${theme.typography.text.color};
+      background: ${theme.card.background};
+      border-radius: ${borderRadius};
+      ${theme.card.hasShadow && `box-shadow: ${boxShadow};`}
+    }
+
+    ${Element} {
+      padding: ${theme.card.padding * 0.75 / TEXT_BASE_SIZE}rem
+        ${theme.card.padding / TEXT_BASE_SIZE}rem;
+
+      ${theme.sectionLayout === "merged" ? lt`
+            border-bottom: 1px solid ${borderColor};
+          ` : lt`
+            margin-bottom: 1rem;
+          `}
+    }
+  `;
+});
 
 // src/components/layout/card/Card.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
 var Card = forwardRef3(
   ({ children, className }, ref) => {
-    const theme = nt();
-    return /* @__PURE__ */ jsx13(
-      StyledCard,
-      {
-        ref,
-        className,
-        $sectionLayout: theme?.sectionLayout,
-        $borderRadius: theme?.card?.borderRadius,
-        $padding: theme?.card?.padding,
-        $shadow: theme?.card?.hasShadow,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx13(StyledCard, { ref, className, children });
   }
 );
 Card.displayName = "Card";
@@ -11218,8 +11217,7 @@ function resolveDesignProps3(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    },
-    visibleFeatures: props.visibleFeatures ?? []
+    }
   };
 }
 var MeteredFeatures = forwardRef7(({ className, ...rest }, ref) => {
@@ -11230,7 +11228,7 @@ var MeteredFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const features = (data.featureUsage?.features || []).filter(({ feature }) => {
-    return (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.id && props.visibleFeatures?.includes(feature.id);
+    return feature?.featureType === "event" || feature?.featureType === "trait";
   });
   if (features.length === 0) {
     return null;
@@ -12098,6 +12096,7 @@ export {
   ProgressBar,
   Root,
   SchematicEmbed,
+  StyledCard,
   Text,
   Tooltip,
   UpcomingBill,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",