npm - @schematichq/schematic-components - Versions diffs - 0.3.10 → 0.3.12 - Mend

@schematichq/schematic-components 0.3.10 → 0.3.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.

Files changed (4) hide show

package/dist/schematic-components.cjs.js +131 -97
package/dist/schematic-components.d.ts +3 -1
package/dist/schematic-components.esm.js +131 -97
package/package.json +1 -1

package/dist/schematic-components.cjs.js CHANGED Viewed

@@ -8936,7 +8936,7 @@ var EmbedProvider = ({
   (0, import_react2.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.10";
+      headers["X-Schematic-Components-Version"] = "0.3.12";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -11059,7 +11059,9 @@ function resolveDesignProps(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading6"
-    }
+    },
+    // there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
+    visibleFeatures: props.visibleFeatures
   };
 }
 var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, ref) => {
@@ -11069,7 +11071,16 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
   const elements = (0, import_react14.useRef)([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const shouldShowFeatures = (data.featureUsage?.features ?? []).length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
+    const mappedFeatureUsage = data.featureUsage?.features.find(
+      (usage) => usage.feature?.id === id
+    );
+    if (mappedFeatureUsage) {
+      acc.push(mappedFeatureUsage);
+    }
+    return acc;
+  }, []) : data.featureUsage?.features || [];
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -11092,82 +11103,76 @@ var IncludedFeatures = (0, import_react14.forwardRef)(({ className, ...rest }, r
             children: props.header.text
           }
         ) }),
-        (data.featureUsage?.features || []).reduce(
-          (acc, { allocation, feature, usage }, index) => {
-            return [
-              ...acc,
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                Flex,
-                {
-                  ref: (el) => el && elements.current.push(el),
-                  $flexWrap: "wrap",
-                  $justifyContent: "space-between",
-                  $alignItems: "center",
-                  $gap: "1rem",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                        IconRound,
+        featureUsage.map(({ allocation, feature, usage }, index) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            Flex,
+            {
+              ref: (el) => el && elements.current.push(el),
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $gap: "1rem",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    IconRound,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        theme.primary,
+                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    Text,
+                    {
+                      $font: theme.typography[props.icons.fontStyle].fontFamily,
+                      $size: theme.typography[props.icons.fontStyle].fontSize,
+                      $weight: theme.typography[props.icons.fontStyle].fontWeight,
+                      $color: theme.typography[props.icons.fontStyle].color,
+                      children: feature.name
+                    }
+                  ) })
+                ] }),
+                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                  Box,
+                  {
+                    $flexBasis: "min-content",
+                    $flexGrow: "1",
+                    $textAlign: shouldWrapChildren ? "left" : "right",
+                    children: [
+                      props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        Text,
                         {
-                          name: feature.icon,
-                          size: "sm",
-                          colors: [
-                            theme.primary,
-                            isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
-                          ]
+                          $font: theme.typography[props.entitlement.fontStyle].fontFamily,
+                          $size: theme.typography[props.entitlement.fontStyle].fontSize,
+                          $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
+                          $lineHeight: 1.25,
+                          $color: theme.typography[props.entitlement.fontStyle].color,
+                          children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
                         }
-                      ),
-                      feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Flex, { $alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      ) }),
+                      props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         Text,
                         {
-                          $font: theme.typography[props.icons.fontStyle].fontFamily,
-                          $size: theme.typography[props.icons.fontStyle].fontSize,
-                          $weight: theme.typography[props.icons.fontStyle].fontWeight,
-                          $color: theme.typography[props.icons.fontStyle].color,
-                          children: feature.name
+                          $font: theme.typography[props.usage.fontStyle].fontFamily,
+                          $size: theme.typography[props.usage.fontStyle].fontSize,
+                          $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                          $lineHeight: 1.5,
+                          $color: theme.typography[props.usage.fontStyle].color,
+                          children: typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
                         }
                       ) })
-                    ] }),
-                    (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      Box,
-                      {
-                        $flexBasis: "min-content",
-                        $flexGrow: "1",
-                        $textAlign: shouldWrapChildren ? "left" : "right",
-                        children: [
-                          props.entitlement.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                            Text,
-                            {
-                              $font: theme.typography[props.entitlement.fontStyle].fontFamily,
-                              $size: theme.typography[props.entitlement.fontStyle].fontSize,
-                              $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
-                              $lineHeight: 1.25,
-                              $color: theme.typography[props.entitlement.fontStyle].color,
-                              children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
-                            }
-                          ) }),
-                          props.usage.isVisible && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                            Text,
-                            {
-                              $font: theme.typography[props.usage.fontStyle].fontFamily,
-                              $size: theme.typography[props.usage.fontStyle].fontSize,
-                              $weight: theme.typography[props.usage.fontStyle].fontWeight,
-                              $lineHeight: 1.5,
-                              $color: theme.typography[props.usage.fontStyle].color,
-                              children: typeof usage === "number" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
-                            }
-                          ) })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                index
-              )
-            ];
-          },
-          []
-        )
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
       ]
     }
   );
@@ -11202,7 +11207,9 @@ function resolveDesignProps2(props) {
   };
 }
 function formatInvoices(invoices) {
-  return (invoices || []).map(({ amountDue, dueDate, url }) => ({
+  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 }) => ({
     ...dueDate && { date: toPrettyDate(dueDate) },
     amount: formatCurrency(amountDue),
     url
@@ -11213,26 +11220,34 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   const dateText = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Text,
     {
+      ...url && { onClick: () => {
+      } },
       $font: theme.typography[fontStyle].fontFamily,
       $size: theme.typography[fontStyle].fontSize,
       $weight: theme.typography[fontStyle].fontWeight,
-      $color: theme.typography[fontStyle].color,
+      $color: url ? theme.typography.link.color : theme.typography.text.color,
       children: date
     }
   );
   if (url) {
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: url, target: "_blank", children: dateText });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { href: url, target: "_blank", children: dateText });
   }
   return dateText;
 };
-var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
+var Invoices = (0, import_react15.forwardRef)(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = (0, import_react15.useState)(() => formatInvoices(rest.data));
+  const [invoices, setInvoices] = (0, import_react15.useState)(() => formatInvoices(data));
+  const [listSize, setListSize] = (0, import_react15.useState)(props.limit.number);
+  const toggleListSize = () => {
+    setListSize(
+      (prev2) => prev2 !== props.limit.number ? props.limit.number : 12
+    );
+  };
   (0, import_react15.useEffect)(() => {
-    api?.listInvoices().then(({ data }) => {
-      setInvoices(formatInvoices(data));
+    api?.listInvoices().then(({ data: data2 }) => {
+      setInvoices(formatInvoices(data2));
     });
   }, [api]);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Element, { ref, className, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $flexDirection: "column", $gap: "1rem", children: [
@@ -11246,10 +11261,7 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
         children: "Invoices"
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
-      0,
-      props.limit.isVisible && props.limit.number || invoices.length
-    ).map(({ date, amount, url }, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $justifyContent: "space-between", children: [
         props.date.isVisible && date && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           InvoiceDate,
@@ -11272,15 +11284,25 @@ var Invoices = (0, import_react15.forwardRef)(({ className, ...rest }, ref) => {
       ] }, index);
     }) }),
     props.collapse.isVisible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Icon2,
+        {
+          name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
+          style: { color: "#D0D0D0" }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         Text,
         {
+          onClick: toggleListSize,
           $font: theme.typography[props.collapse.fontStyle].fontFamily,
           $size: theme.typography[props.collapse.fontStyle].fontSize,
           $weight: theme.typography[props.collapse.fontStyle].fontWeight,
           $color: theme.typography[props.collapse.fontStyle].color,
-          children: "See all"
+          children: [
+            "See ",
+            listSize === props.limit.number ? "more" : "less"
+          ]
         }
       )
     ] })
@@ -11312,7 +11334,9 @@ function resolveDesignProps3(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    }
+    },
+    // there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
+    visibleFeatures: props.visibleFeatures
   };
 }
 var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, ref) => {
@@ -11322,13 +11346,22 @@ var MeteredFeatures = (0, import_react16.forwardRef)(({ className, ...rest }, re
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const features = (data.featureUsage?.features || []).filter(({ feature }) => {
-    return feature?.featureType === "event" || feature?.featureType === "trait";
-  });
-  if (features.length === 0) {
+  const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
+    const mappedFeatureUsage = data.featureUsage?.features.find(
+      (usage) => usage.feature?.id === id
+    );
+    if (mappedFeatureUsage?.feature?.featureType === "event" || mappedFeatureUsage?.feature?.featureType === "trait") {
+      acc.push(mappedFeatureUsage);
+    }
+    return acc;
+  }, []) : (data.featureUsage?.features || []).filter(
+    (usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
+  );
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Flex, { ref, className, $flexDirection: "column", children: featureUsage.map(({ allocation, feature, usage }, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Element, { as: Flex, $gap: "1.5rem", children: [
       props.icon.isVisible && feature?.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         IconRound,
@@ -11968,7 +12001,7 @@ var UpcomingBill = (0, import_react20.forwardRef)(({ className, ...rest }, ref)
   const { upcomingInvoice } = (0, import_react20.useMemo)(() => {
     return {
       upcomingInvoice: {
-        ...data.upcomingInvoice?.amountDue && {
+        ...typeof data.upcomingInvoice?.amountDue === "number" && {
           amountDue: data.upcomingInvoice.amountDue
         },
         ...data.subscription?.interval && {
@@ -11980,11 +12013,11 @@ var UpcomingBill = (0, import_react20.forwardRef)(({ className, ...rest }, ref)
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (!upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
+  if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Element, { ref, className, children: [
-    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    props.header.isVisible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       Flex,
       {
         $justifyContent: "space-between",
@@ -12006,7 +12039,7 @@ var UpcomingBill = (0, import_react20.forwardRef)(({ className, ...rest }, ref)
         )
       }
     ),
-    upcomingInvoice.amountDue && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
       props.price.isVisible && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         Text,
         {
@@ -12047,7 +12080,8 @@ var components = {
   IncludedFeatures,
   MeteredFeatures,
   UpcomingBill,
-  PaymentMethod
+  PaymentMethod,
+  Invoices
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};

package/dist/schematic-components.d.ts CHANGED Viewed

@@ -1290,6 +1290,7 @@ declare interface DesignProps {
         isVisible: boolean;
         fontStyle: FontStyle;
     };
+    visibleFeatures?: string[];
 }
 declare interface DesignProps_2 {
@@ -1335,6 +1336,7 @@ declare interface DesignProps_3 {
         isVisible: boolean;
         fontStyle: FontStyle;
     };
+    visibleFeatures?: string[];
 }
 declare interface DesignProps_4 {
@@ -2398,7 +2400,7 @@ declare interface InvoiceResponseData {
     url?: string | null;
 }
-export declare const Invoices: ForwardRefExoticComponent<ElementProps & DesignProps_2 & {
+export declare const Invoices: ForwardRefExoticComponent<ElementProps & RecursivePartial<DesignProps_2> & {
 data?: ListInvoicesResponse["data"];
 } & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement | null>>;

package/dist/schematic-components.esm.js CHANGED Viewed

@@ -8896,7 +8896,7 @@ var EmbedProvider = ({
   useEffect(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.10";
+      headers["X-Schematic-Components-Version"] = "0.3.12";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -11019,7 +11019,9 @@ function resolveDesignProps(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading6"
-    }
+    },
+    // there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
+    visibleFeatures: props.visibleFeatures
   };
 }
 var IncludedFeatures = forwardRef5(({ className, ...rest }, ref) => {
@@ -11029,7 +11031,16 @@ var IncludedFeatures = forwardRef5(({ className, ...rest }, ref) => {
   const elements = useRef3([]);
   const shouldWrapChildren = useWrapChildren(elements.current);
   const isLightBackground = useIsLightBackground();
-  const shouldShowFeatures = (data.featureUsage?.features ?? []).length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
+    const mappedFeatureUsage = data.featureUsage?.features.find(
+      (usage) => usage.feature?.id === id
+    );
+    if (mappedFeatureUsage) {
+      acc.push(mappedFeatureUsage);
+    }
+    return acc;
+  }, []) : data.featureUsage?.features || [];
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -11052,82 +11063,76 @@ var IncludedFeatures = forwardRef5(({ className, ...rest }, ref) => {
             children: props.header.text
           }
         ) }),
-        (data.featureUsage?.features || []).reduce(
-          (acc, { allocation, feature, usage }, index) => {
-            return [
-              ...acc,
-              /* @__PURE__ */ jsxs8(
-                Flex,
-                {
-                  ref: (el) => el && elements.current.push(el),
-                  $flexWrap: "wrap",
-                  $justifyContent: "space-between",
-                  $alignItems: "center",
-                  $gap: "1rem",
-                  children: [
-                    /* @__PURE__ */ jsxs8(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
-                      props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx15(
-                        IconRound,
+        featureUsage.map(({ allocation, feature, usage }, index) => {
+          return /* @__PURE__ */ jsxs8(
+            Flex,
+            {
+              ref: (el) => el && elements.current.push(el),
+              $flexWrap: "wrap",
+              $justifyContent: "space-between",
+              $alignItems: "center",
+              $gap: "1rem",
+              children: [
+                /* @__PURE__ */ jsxs8(Flex, { $flexGrow: "1", $flexBasis: "min-content", $gap: "1rem", children: [
+                  props.icons.isVisible && feature?.icon && /* @__PURE__ */ jsx15(
+                    IconRound,
+                    {
+                      name: feature.icon,
+                      size: "sm",
+                      colors: [
+                        theme.primary,
+                        isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
+                      ]
+                    }
+                  ),
+                  feature?.name && /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(
+                    Text,
+                    {
+                      $font: theme.typography[props.icons.fontStyle].fontFamily,
+                      $size: theme.typography[props.icons.fontStyle].fontSize,
+                      $weight: theme.typography[props.icons.fontStyle].fontWeight,
+                      $color: theme.typography[props.icons.fontStyle].color,
+                      children: feature.name
+                    }
+                  ) })
+                ] }),
+                (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs8(
+                  Box,
+                  {
+                    $flexBasis: "min-content",
+                    $flexGrow: "1",
+                    $textAlign: shouldWrapChildren ? "left" : "right",
+                    children: [
+                      props.entitlement.isVisible && /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(
+                        Text,
                         {
-                          name: feature.icon,
-                          size: "sm",
-                          colors: [
-                            theme.primary,
-                            isLightBackground ? "hsla(0, 0%, 0%, 0.0625)" : "hsla(0, 0%, 100%, 0.25)"
-                          ]
+                          $font: theme.typography[props.entitlement.fontStyle].fontFamily,
+                          $size: theme.typography[props.entitlement.fontStyle].fontSize,
+                          $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
+                          $lineHeight: 1.25,
+                          $color: theme.typography[props.entitlement.fontStyle].color,
+                          children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
                         }
-                      ),
-                      feature?.name && /* @__PURE__ */ jsx15(Flex, { $alignItems: "center", children: /* @__PURE__ */ jsx15(
+                      ) }),
+                      props.usage.isVisible && /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx15(
                         Text,
                         {
-                          $font: theme.typography[props.icons.fontStyle].fontFamily,
-                          $size: theme.typography[props.icons.fontStyle].fontSize,
-                          $weight: theme.typography[props.icons.fontStyle].fontWeight,
-                          $color: theme.typography[props.icons.fontStyle].color,
-                          children: feature.name
+                          $font: theme.typography[props.usage.fontStyle].fontFamily,
+                          $size: theme.typography[props.usage.fontStyle].fontSize,
+                          $weight: theme.typography[props.usage.fontStyle].fontWeight,
+                          $lineHeight: 1.5,
+                          $color: theme.typography[props.usage.fontStyle].color,
+                          children: typeof usage === "number" && /* @__PURE__ */ jsx15(Fragment2, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
                         }
                       ) })
-                    ] }),
-                    (feature?.featureType === "event" || feature?.featureType === "trait") && feature?.name && /* @__PURE__ */ jsxs8(
-                      Box,
-                      {
-                        $flexBasis: "min-content",
-                        $flexGrow: "1",
-                        $textAlign: shouldWrapChildren ? "left" : "right",
-                        children: [
-                          props.entitlement.isVisible && /* @__PURE__ */ jsx15(Box, { children: /* @__PURE__ */ jsx15(
-                            Text,
-                            {
-                              $font: theme.typography[props.entitlement.fontStyle].fontFamily,
-                              $size: theme.typography[props.entitlement.fontStyle].fontSize,
-                              $weight: theme.typography[props.entitlement.fontStyle].fontWeight,
-                              $lineHeight: 1.25,
-                              $color: theme.typography[props.entitlement.fontStyle].color,
-                              children: typeof allocation === "number" ? `${formatNumber(allocation)} ${(0, import_pluralize2.default)(feature.name, allocation)}` : `Unlimited ${(0, import_pluralize2.default)(feature.name)}`
-                            }
-                          ) }),
-                          props.usage.isVisible && /* @__PURE__ */ jsx15(Box, { $whiteSpace: "nowrap", children: /* @__PURE__ */ jsx15(
-                            Text,
-                            {
-                              $font: theme.typography[props.usage.fontStyle].fontFamily,
-                              $size: theme.typography[props.usage.fontStyle].fontSize,
-                              $weight: theme.typography[props.usage.fontStyle].fontWeight,
-                              $lineHeight: 1.5,
-                              $color: theme.typography[props.usage.fontStyle].color,
-                              children: typeof usage === "number" && /* @__PURE__ */ jsx15(Fragment2, { children: typeof allocation === "number" ? `${formatNumber(usage)} of ${formatNumber(allocation)} used` : `${formatNumber(usage)} used` })
-                            }
-                          ) })
-                        ]
-                      }
-                    )
-                  ]
-                },
-                index
-              )
-            ];
-          },
-          []
-        )
+                    ]
+                  }
+                )
+              ]
+            },
+            index
+          );
+        })
       ]
     }
   );
@@ -11162,7 +11167,9 @@ function resolveDesignProps2(props) {
   };
 }
 function formatInvoices(invoices) {
-  return (invoices || []).map(({ amountDue, dueDate, url }) => ({
+  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 }) => ({
     ...dueDate && { date: toPrettyDate(dueDate) },
     amount: formatCurrency(amountDue),
     url
@@ -11173,26 +11180,34 @@ var InvoiceDate = ({ date, fontStyle, url }) => {
   const dateText = /* @__PURE__ */ jsx16(
     Text,
     {
+      ...url && { onClick: () => {
+      } },
       $font: theme.typography[fontStyle].fontFamily,
       $size: theme.typography[fontStyle].fontSize,
       $weight: theme.typography[fontStyle].fontWeight,
-      $color: theme.typography[fontStyle].color,
+      $color: url ? theme.typography.link.color : theme.typography.text.color,
       children: date
     }
   );
   if (url) {
-    /* @__PURE__ */ jsx16("a", { href: url, target: "_blank", children: dateText });
+    return /* @__PURE__ */ jsx16("a", { href: url, target: "_blank", children: dateText });
   }
   return dateText;
 };
-var Invoices = forwardRef6(({ className, ...rest }, ref) => {
+var Invoices = forwardRef6(({ className, data, ...rest }, ref) => {
   const props = resolveDesignProps2(rest);
   const theme = nt();
   const { api } = useEmbed();
-  const [invoices, setInvoices] = useState5(() => formatInvoices(rest.data));
+  const [invoices, setInvoices] = useState5(() => formatInvoices(data));
+  const [listSize, setListSize] = useState5(props.limit.number);
+  const toggleListSize = () => {
+    setListSize(
+      (prev2) => prev2 !== props.limit.number ? props.limit.number : 12
+    );
+  };
   useEffect5(() => {
-    api?.listInvoices().then(({ data }) => {
-      setInvoices(formatInvoices(data));
+    api?.listInvoices().then(({ data: data2 }) => {
+      setInvoices(formatInvoices(data2));
     });
   }, [api]);
   return /* @__PURE__ */ jsx16(Element, { ref, className, children: /* @__PURE__ */ jsxs9(Flex, { $flexDirection: "column", $gap: "1rem", children: [
@@ -11206,10 +11221,7 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
         children: "Invoices"
       }
     ) }),
-    /* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(
-      0,
-      props.limit.isVisible && props.limit.number || invoices.length
-    ).map(({ date, amount, url }, index) => {
+    /* @__PURE__ */ jsx16(Flex, { $flexDirection: "column", $gap: "0.5rem", children: invoices.slice(0, listSize).map(({ date, amount, url }, index) => {
       return /* @__PURE__ */ jsxs9(Flex, { $justifyContent: "space-between", children: [
         props.date.isVisible && date && /* @__PURE__ */ jsx16(
           InvoiceDate,
@@ -11232,15 +11244,25 @@ var Invoices = forwardRef6(({ className, ...rest }, ref) => {
       ] }, index);
     }) }),
     props.collapse.isVisible && /* @__PURE__ */ jsxs9(Flex, { $alignItems: "center", $gap: "0.5rem", children: [
-      /* @__PURE__ */ jsx16(Icon2, { name: "chevron-down", style: { color: "#D0D0D0" } }),
       /* @__PURE__ */ jsx16(
+        Icon2,
+        {
+          name: `chevron-${listSize === props.limit.number ? "down" : "up"}`,
+          style: { color: "#D0D0D0" }
+        }
+      ),
+      /* @__PURE__ */ jsxs9(
         Text,
         {
+          onClick: toggleListSize,
           $font: theme.typography[props.collapse.fontStyle].fontFamily,
           $size: theme.typography[props.collapse.fontStyle].fontSize,
           $weight: theme.typography[props.collapse.fontStyle].fontWeight,
           $color: theme.typography[props.collapse.fontStyle].color,
-          children: "See all"
+          children: [
+            "See ",
+            listSize === props.limit.number ? "more" : "less"
+          ]
         }
       )
     ] })
@@ -11272,7 +11294,9 @@ function resolveDesignProps3(props) {
     usage: {
       isVisible: props.usage?.isVisible ?? true,
       fontStyle: props.usage?.fontStyle ?? "heading5"
-    }
+    },
+    // there is a typescript bug with `RecursivePartial` so we must cast to `string[] | undefined`
+    visibleFeatures: props.visibleFeatures
   };
 }
 var MeteredFeatures = forwardRef7(({ className, ...rest }, ref) => {
@@ -11282,13 +11306,22 @@ var MeteredFeatures = forwardRef7(({ className, ...rest }, ref) => {
   const theme = nt();
   const { data } = useEmbed();
   const isLightBackground = useIsLightBackground();
-  const features = (data.featureUsage?.features || []).filter(({ feature }) => {
-    return feature?.featureType === "event" || feature?.featureType === "trait";
-  });
-  if (features.length === 0) {
+  const featureUsage = props.visibleFeatures ? props.visibleFeatures.reduce((acc, id) => {
+    const mappedFeatureUsage = data.featureUsage?.features.find(
+      (usage) => usage.feature?.id === id
+    );
+    if (mappedFeatureUsage?.feature?.featureType === "event" || mappedFeatureUsage?.feature?.featureType === "trait") {
+      acc.push(mappedFeatureUsage);
+    }
+    return acc;
+  }, []) : (data.featureUsage?.features || []).filter(
+    (usage) => usage.feature?.featureType === "event" || usage.feature?.featureType === "trait"
+  );
+  const shouldShowFeatures = featureUsage.length > 0 || data.company?.plan || (data.company?.addOns ?? []).length > 0 || false;
+  if (!shouldShowFeatures) {
     return null;
   }
-  return /* @__PURE__ */ jsx17(Flex, { ref, className, $flexDirection: "column", children: features.map(({ allocation, feature, usage }, index) => {
+  return /* @__PURE__ */ jsx17(Flex, { ref, className, $flexDirection: "column", children: featureUsage.map(({ allocation, feature, usage }, index) => {
     return /* @__PURE__ */ jsxs10(Element, { as: Flex, $gap: "1.5rem", children: [
       props.icon.isVisible && feature?.icon && /* @__PURE__ */ jsx17(
         IconRound,
@@ -11932,7 +11965,7 @@ var UpcomingBill = forwardRef10(({ className, ...rest }, ref) => {
   const { upcomingInvoice } = useMemo4(() => {
     return {
       upcomingInvoice: {
-        ...data.upcomingInvoice?.amountDue && {
+        ...typeof data.upcomingInvoice?.amountDue === "number" && {
           amountDue: data.upcomingInvoice.amountDue
         },
         ...data.subscription?.interval && {
@@ -11944,11 +11977,11 @@ var UpcomingBill = forwardRef10(({ className, ...rest }, ref) => {
       }
     };
   }, [data.subscription, data.upcomingInvoice]);
-  if (!upcomingInvoice.amountDue || !upcomingInvoice.dueDate) {
+  if (typeof upcomingInvoice.amountDue !== "number" || !upcomingInvoice.dueDate) {
     return null;
   }
   return /* @__PURE__ */ jsxs14(Element, { ref, className, children: [
-    props.header.isVisible && upcomingInvoice.dueDate && /* @__PURE__ */ jsx21(
+    props.header.isVisible && /* @__PURE__ */ jsx21(
       Flex,
       {
         $justifyContent: "space-between",
@@ -11970,7 +12003,7 @@ var UpcomingBill = forwardRef10(({ className, ...rest }, ref) => {
         )
       }
     ),
-    upcomingInvoice.amountDue && /* @__PURE__ */ jsxs14(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
+    /* @__PURE__ */ jsxs14(Flex, { $justifyContent: "space-between", $alignItems: "start", $gap: "1rem", children: [
       props.price.isVisible && /* @__PURE__ */ jsx21(Flex, { $alignItems: "end", $flexGrow: "1", children: /* @__PURE__ */ jsx21(
         Text,
         {
@@ -12011,7 +12044,8 @@ var components = {
   IncludedFeatures,
   MeteredFeatures,
   UpcomingBill,
-  PaymentMethod
+  PaymentMethod,
+  Invoices
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};

package/package.json CHANGED Viewed

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