@schematichq/schematic-components 0.3.11 → 0.3.12

package/dist/schematic-components.cjs.js

@@ -8936,7 +8936,7 @@ var EmbedProvider = ({
   (0, import_react2.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.11";
+      headers["X-Schematic-Components-Version"] = "0.3.12";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -11207,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
@@ -11218,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: [
@@ -11251,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,
@@ -11277,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"
+          ]
         }
       )
     ] })
@@ -11984,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 && {
@@ -11996,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",
@@ -12022,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,
         {
@@ -12063,7 +12080,8 @@ var components = {
   IncludedFeatures,
   MeteredFeatures,
   UpcomingBill,
-  PaymentMethod
+  PaymentMethod,
+  Invoices
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};

package/dist/schematic-components.d.ts

@@ -2400,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

@@ -8896,7 +8896,7 @@ var EmbedProvider = ({
   useEffect(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.3.11";
+      headers["X-Schematic-Components-Version"] = "0.3.12";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -11167,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
@@ -11178,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: [
@@ -11211,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,
@@ -11237,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"
+          ]
         }
       )
     ] })
@@ -11948,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 && {
@@ -11960,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",
@@ -11986,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,
         {
@@ -12027,7 +12044,8 @@ var components = {
   IncludedFeatures,
   MeteredFeatures,
   UpcomingBill,
-  PaymentMethod
+  PaymentMethod,
+  Invoices
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};

package/package.json

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