autumn-js 0.1.61 → 0.1.62

package/dist/libraries/react/{chunk-BQ3TB6LH.mjs → chunk-AMBWOUTW.mjs}

@@ -1,179 +1,490 @@
 "use client";
 
-import {
-  getPaywallContent
-} from "./chunk-I5ZGIAIX.mjs";
 import {
   getCheckoutContent
 } from "./chunk-BLM4DAAR.mjs";
+import {
+  getPaywallContent
+} from "./chunk-I5ZGIAIX.mjs";
 import {
   getPricingTableContent
 } from "./chunk-URQMBRFZ.mjs";
-import {
-  Input
-} from "./chunk-GUM4HIGI.mjs";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "./chunk-CWQ4UVCS.mjs";
-import {
-  Switch
-} from "./chunk-C3LUB2Q3.mjs";
-import {
-  loadingStyles,
-  spinnerStyles
-} from "./chunk-WVKYZYFT.mjs";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   Header,
   Trigger2
-} from "./chunk-Y626BPVN.mjs";
+} from "./chunk-4KLTPVNG.mjs";
 import {
   Button
-} from "./chunk-WA7QZHL5.mjs";
+} from "./chunk-SWSFJTEQ.mjs";
 import {
   Dialog,
   DialogContent,
   DialogFooter,
   DialogTitle
-} from "./chunk-EMHT2HX4.mjs";
+} from "./chunk-47KEC6LH.mjs";
 import {
   ArrowRight,
   ChevronDown,
   LoaderCircle
-} from "./chunk-2ZZJUGBO.mjs";
+} from "./chunk-2OHJ6PS6.mjs";
 import {
-  cn
-} from "./chunk-4J6OC4ZQ.mjs";
+  Input
+} from "./chunk-GUM4HIGI.mjs";
 import {
-  useCustomer
-} from "./chunk-MK2IKDCA.mjs";
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-YCHPTRJA.mjs";
+import {
+  Switch
+} from "./chunk-2LZIBRD4.mjs";
+import {
+  loadingStyles,
+  spinnerStyles
+} from "./chunk-WVKYZYFT.mjs";
 import {
   usePaywall
-} from "./chunk-4YBMXETN.mjs";
+} from "./chunk-UUUCCU2M.mjs";
 import {
   usePricingTable
-} from "./chunk-3USIUUS3.mjs";
+} from "./chunk-55YYX6AR.mjs";
+import {
+  cn
+} from "./chunk-4J6OC4ZQ.mjs";
+import {
+  useCustomer
+} from "./chunk-UNPSUPQQ.mjs";
 
 // src/libraries/react/components/checkout-dialog/checkout-dialog-synced.tsx
-import { useEffect, useState as useState2 } from "react";
-
-// src/libraries/react/components/paywall-dialog/paywall-dialog-synced.tsx
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function PaywallDialog(params) {
-  const { data: preview } = usePaywall({
-    featureId: params?.featureId,
-    entityId: params?.entityId
-  });
-  if (!params || !preview) {
+var formatCurrency = ({
+  amount,
+  currency
+}) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  }).format(amount);
+};
+function CheckoutDialog(params) {
+  const { attach } = useCustomer();
+  const [checkoutResult, setCheckoutResult] = useState(params?.checkoutResult);
+  useEffect(() => {
+    if (params.checkoutResult) {
+      setCheckoutResult(params.checkoutResult);
+    }
+  }, [params.checkoutResult]);
+  const [loading, setLoading] = useState(false);
+  if (!checkoutResult) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
   const { open, setOpen } = params;
-  const { title, message } = getPaywallContent(preview);
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm", children: [
-    /* @__PURE__ */ jsx(DialogTitle, { className: cn("au-font-bold au-text-xl au-px-6"), children: title }),
-    /* @__PURE__ */ jsx("div", { className: "au-px-6 au-my-2", children: message }),
-    /* @__PURE__ */ jsx(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-mt-4 au-pl-6 au-pr-3 au-bg-secondary au-border-t", children: /* @__PURE__ */ jsx(
+  const { title, message } = getCheckoutContent(checkoutResult);
+  const isFree = checkoutResult?.product.properties?.is_free;
+  const isPaid = isFree === false;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-text-sm", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "au-px-6 au-mb-1", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground", children: message }),
+    isPaid && checkoutResult && /* @__PURE__ */ jsx(
+      PriceInformation,
+      {
+        checkoutResult,
+        setCheckoutResult
+      }
+    ),
+    /* @__PURE__ */ jsx(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner", children: /* @__PURE__ */ jsx(
       Button,
       {
         size: "sm",
-        className: "au-font-medium au-shadow au-transition au-min-w-20",
         onClick: async () => {
+          setLoading(true);
+          const options = checkoutResult.options.map((option) => {
+            return {
+              featureId: option.feature_id,
+              quantity: option.quantity
+            };
+          });
+          await attach({
+            productId: checkoutResult.product.id,
+            ...params.checkoutParams || {},
+            options
+          });
           setOpen(false);
+          setLoading(false);
         },
-        children: "Confirm"
+        disabled: loading,
+        className: "au-min-w-16 au-flex au-items-center au-gap-2",
+        children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "au-w-4 au-h-4 au-animate-spin" }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: "au-whitespace-nowrap au-flex au-gap-1", children: "Confirm" }) })
       }
     ) })
   ] }) });
 }
-
-// src/libraries/react/components/pricing-table/pricing-table-synced.tsx
-import React from "react";
-import { createContext, useContext, useState } from "react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function PricingTable({
-  productDetails,
-  checkoutParams
+function PriceInformation({
+  checkoutResult,
+  setCheckoutResult
 }) {
-  const { customer, checkout } = useCustomer({ errorOnNotFound: false });
-  const [isAnnual, setIsAnnual] = useState(false);
-  const { products, isLoading, error } = usePricingTable({ productDetails });
-  if (isLoading) {
-    return /* @__PURE__ */ jsx2("div", { style: loadingStyles, children: /* @__PURE__ */ jsx2(LoaderCircle, { style: spinnerStyles }) });
-  }
-  if (error) {
-    return /* @__PURE__ */ jsx2("div", { children: " Something went wrong..." });
-  }
-  const intervals = Array.from(
-    new Set(
-      products?.map((p) => p.properties?.interval_group).filter((i) => !!i)
-    )
+  return /* @__PURE__ */ jsxs("div", { className: "au-px-6 au-mb-4 au-flex au-flex-col au-gap-4", children: [
+    /* @__PURE__ */ jsx(
+      ProductItems,
+      {
+        checkoutResult,
+        setCheckoutResult
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "au-flex au-flex-col au-gap-2", children: [
+      checkoutResult?.has_prorations && checkoutResult.lines.length > 0 && /* @__PURE__ */ jsx(CheckoutLines, { checkoutResult }),
+      /* @__PURE__ */ jsx(DueAmounts, { checkoutResult })
+    ] })
+  ] });
+}
+function DueAmounts({ checkoutResult }) {
+  const { next_cycle, product } = checkoutResult;
+  const nextCycleAtStr = next_cycle ? new Date(next_cycle.starts_at).toLocaleDateString() : void 0;
+  const hasUsagePrice = product.items.some(
+    (item) => item.usage_model === "pay_per_use"
   );
-  const multiInterval = intervals.length > 1;
-  const intervalFilter = (product) => {
-    if (!product.properties?.interval_group) {
-      return true;
-    }
-    if (multiInterval) {
-      if (isAnnual) {
-        return product.properties?.interval_group === "year";
-      } else {
-        return product.properties?.interval_group === "month";
+  const showNextCycle = next_cycle && next_cycle.total !== checkoutResult.total;
+  return /* @__PURE__ */ jsxs("div", { className: "au-flex au-flex-col au-gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "au-flex au-justify-between", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "au-font-medium au-text-md", children: "Total due today" }) }),
+      /* @__PURE__ */ jsx("p", { className: "au-font-medium au-text-md", children: formatCurrency({
+        amount: checkoutResult?.total,
+        currency: checkoutResult?.currency
+      }) })
+    ] }),
+    showNextCycle && /* @__PURE__ */ jsxs("div", { className: "au-flex au-justify-between au-text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "au-text-md", children: [
+        "Due next cycle (",
+        nextCycleAtStr,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsxs("p", { className: "au-text-md", children: [
+        formatCurrency({
+          amount: next_cycle.total,
+          currency: checkoutResult?.currency
+        }),
+        hasUsagePrice && /* @__PURE__ */ jsx("span", { children: " + usage prices" })
+      ] })
+    ] })
+  ] });
+}
+function ProductItems({
+  checkoutResult,
+  setCheckoutResult
+}) {
+  const isUpdateQuantity = checkoutResult?.product.scenario === "active" && checkoutResult.product.properties.updateable;
+  const isOneOff = checkoutResult?.product.properties.is_one_off;
+  return /* @__PURE__ */ jsxs("div", { className: "au-flex au-flex-col au-gap-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "au-text-sm au-font-medium", children: "Price" }),
+    checkoutResult?.product.items.filter((item) => item.type !== "feature").map((item, index) => {
+      if (item.usage_model == "prepaid") {
+        return /* @__PURE__ */ jsx(
+          PrepaidItem,
+          {
+            item,
+            checkoutResult,
+            setCheckoutResult
+          },
+          index
+        );
       }
-    }
-    return true;
-  };
-  return /* @__PURE__ */ jsx2("div", { className: cn("au-root"), children: products && /* @__PURE__ */ jsx2(
-    PricingTableContainer,
-    {
-      products,
-      isAnnualToggle: isAnnual,
-      setIsAnnualToggle: setIsAnnual,
-      multiInterval,
-      children: products.filter(intervalFilter).map((product, index) => /* @__PURE__ */ jsx2(
-        PricingCard,
+      if (isUpdateQuantity) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs("div", { className: "au-flex au-justify-between", children: [
+        /* @__PURE__ */ jsx("p", { className: "au-text-muted-foreground", children: item.feature ? item.feature.name : isOneOff ? "Price" : "Subscription" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          item.display?.primary_text,
+          " ",
+          item.display?.secondary_text
+        ] })
+      ] }, index);
+    })
+  ] });
+}
+function CheckoutLines({ checkoutResult }) {
+  return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: "total", className: "au-border-b-0", children: [
+    /* @__PURE__ */ jsx(CustomAccordionTrigger, { className: "au-justify-between au-w-full au-my-0 au-py-0 au-border-none", children: /* @__PURE__ */ jsxs("div", { className: "au-cursor-pointer au-flex au-items-center au-gap-1 au-w-full au-justify-end", children: [
+      /* @__PURE__ */ jsx("p", { className: "au-font-light au-text-muted-foreground", children: "View details" }),
+      /* @__PURE__ */ jsx(
+        ChevronDown,
         {
-          productId: product.id,
-          buttonProps: {
-            disabled: product.scenario === "active" && !product.properties.updateable || product.scenario === "scheduled",
-            onClick: async () => {
-              if (product.id && customer) {
-                await checkout({
-                  ...checkoutParams,
-                  productId: product.id,
-                  dialog: CheckoutDialog
-                });
-              } else if (product.display?.button_url) {
-                window.open(product.display?.button_url, "_blank");
-              }
-            }
-          }
-        },
-        index
-      ))
+          className: "au-text-muted-foreground au-mt-0.5 au-rotate-90 au-transition-transform au-duration-200 au-ease-in-out",
+          size: 14
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(AccordionContent, { className: "au-mt-2 au-mb-0 au-pb-2 au-flex au-flex-col au-gap-2", children: checkoutResult?.lines.filter((line) => line.amount !== 0).map((line, index) => {
+      return /* @__PURE__ */ jsxs("div", { className: "au-flex au-justify-between", children: [
+        /* @__PURE__ */ jsx("p", { className: "au-text-muted-foreground", children: line.description }),
+        /* @__PURE__ */ jsx("p", { className: "au-text-muted-foreground", children: new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: checkoutResult?.currency
+        }).format(line.amount) })
+      ] }, index);
+    }) })
+  ] }) });
+}
+function CustomAccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Header, { className: "au-flex", children: /* @__PURE__ */ jsx(
+    Trigger2,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:au-border-ring focus-visible:au-ring-ring/50 au-flex au-flex-1 au-items-start au-justify-between au-gap-4 au-rounded-md au-py-4 au-text-left au-text-sm au-font-medium au-transition-all au-outline-none focus-visible:au-ring-[3px] disabled:au-pointer-events-none disabled:au-opacity-50 [&[data-state=open]_svg]:au-rotate-0",
+        className
+      ),
+      ...props,
+      children
     }
   ) });
 }
-var PricingTableContext = createContext({
-  isAnnualToggle: false,
-  setIsAnnualToggle: () => {
-  },
-  products: [],
-  showFeatures: true
-});
-var usePricingTableContext = (componentName) => {
-  const context = useContext(PricingTableContext);
-  if (context === void 0) {
-    throw new Error(`${componentName} must be used within <PricingTable />`);
-  }
-  return context;
-};
-var PricingTableContainer = ({
-  children,
-  products,
+var PrepaidItem = ({
+  item,
+  checkoutResult,
+  setCheckoutResult
+}) => {
+  const { quantity = 0, billing_units: billingUnits = 1 } = item;
+  const [quantityInput, setQuantityInput] = useState(
+    (quantity / billingUnits).toString()
+  );
+  const { checkout } = useCustomer();
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const scenario = checkoutResult.product.scenario;
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      const newOptions = checkoutResult.options.filter((option) => option.feature_id !== item.feature_id).map((option) => {
+        return {
+          featureId: option.feature_id,
+          quantity: option.quantity
+        };
+      });
+      newOptions.push({
+        featureId: item.feature_id,
+        quantity: Number(quantityInput) * billingUnits
+      });
+      const { data, error } = await checkout({
+        productId: checkoutResult.product.id,
+        options: newOptions,
+        dialog: CheckoutDialog
+      });
+      if (error) {
+        console.error(error);
+        return;
+      }
+      setCheckoutResult(data);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+      setOpen(false);
+    }
+  };
+  const disableSelection = scenario === "renew";
+  return /* @__PURE__ */ jsxs("div", { className: "au-flex au-justify-between au-gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "au-flex au-gap-2 au-items-start", children: [
+      /* @__PURE__ */ jsx("p", { className: "au-text-muted-foreground au-whitespace-nowrap", children: item.feature?.name }),
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsxs(
+          PopoverTrigger,
+          {
+            className: cn(
+              "au-text-muted-foreground au-text-xs au-px-1 au-py-0.5 au-rounded-md au-flex au-items-center au-gap-1 au-bg-accent/80 au-shrink-0",
+              disableSelection !== true && "hover:au-bg-accent hover:au-text-foreground",
+              disableSelection && "au-pointer-events-none au-opacity-80 au-cursor-not-allowed"
+            ),
+            disabled: disableSelection,
+            children: [
+              "Qty: ",
+              quantity,
+              !disableSelection && /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          PopoverContent,
+          {
+            align: "start",
+            className: "au-w-80 au-text-sm au-p-4 au-pt-3 au-flex au-flex-col au-gap-4",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "au-flex au-flex-col au-gap-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "au-text-sm au-font-medium", children: item.feature?.name }),
+                /* @__PURE__ */ jsxs("p", { className: "au-text-muted-foreground", children: [
+                  item.display?.primary_text,
+                  " ",
+                  item.display?.secondary_text
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "au-flex au-justify-between au-items-end", children: [
+                /* @__PURE__ */ jsxs("div", { className: "au-flex au-gap-2 au-items-center", children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      className: "au-h-7 au-w-16 focus:!au-ring-2",
+                      value: quantityInput,
+                      onChange: (e) => setQuantityInput(e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("p", { className: "au-text-muted-foreground", children: [
+                    billingUnits > 1 && `x ${billingUnits} `,
+                    item.feature?.name
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: handleSave,
+                    className: "au-w-14 !au-h-7 au-text-sm au-items-center au-bg-white au-text-foreground au-shadow-sm au-border au-border-zinc-200 hover:au-bg-zinc-100",
+                    disabled: loading,
+                    children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "au-text-muted-foreground au-animate-spin !au-w-4 !au-h-4" }) : "Save"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "au-text-end", children: [
+      item.display?.primary_text,
+      " ",
+      item.display?.secondary_text
+    ] })
+  ] });
+};
+var PriceItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "au-flex au-flex-col au-pb-4 sm:au-pb-0 au-gap-1 sm:au-flex-row au-justify-between sm:au-h-7 sm:au-gap-2 sm:au-items-center",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var PricingDialogButton = ({
+  children,
+  size,
+  onClick,
+  disabled,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      onClick,
+      disabled,
+      size,
+      className: cn(className, "au-shadow-sm au-shadow-stone-400"),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ArrowRight, { className: "!au-h-3" })
+      ]
+    }
+  );
+};
+
+// src/libraries/react/components/pricing-table/pricing-table-synced.tsx
+import React from "react";
+import { createContext, useContext, useState as useState2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PricingTable({
+  productDetails,
+  checkoutParams
+}) {
+  const { customer, checkout } = useCustomer({ errorOnNotFound: false });
+  const [isAnnual, setIsAnnual] = useState2(false);
+  const { products, isLoading, error } = usePricingTable({ productDetails });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2("div", { style: loadingStyles, children: /* @__PURE__ */ jsx2(LoaderCircle, { style: spinnerStyles }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx2("div", { children: " Something went wrong..." });
+  }
+  const intervals = Array.from(
+    new Set(
+      products?.map((p) => p.properties?.interval_group).filter((i) => !!i)
+    )
+  );
+  const multiInterval = intervals.length > 1;
+  const intervalFilter = (product) => {
+    if (!product.properties?.interval_group) {
+      return true;
+    }
+    if (multiInterval) {
+      if (isAnnual) {
+        return product.properties?.interval_group === "year";
+      } else {
+        return product.properties?.interval_group === "month";
+      }
+    }
+    return true;
+  };
+  return /* @__PURE__ */ jsx2("div", { className: cn("au-root"), children: products && /* @__PURE__ */ jsx2(
+    PricingTableContainer,
+    {
+      products,
+      isAnnualToggle: isAnnual,
+      setIsAnnualToggle: setIsAnnual,
+      multiInterval,
+      children: products.filter(intervalFilter).map((product, index) => /* @__PURE__ */ jsx2(
+        PricingCard,
+        {
+          productId: product.id,
+          buttonProps: {
+            disabled: product.scenario === "active" && !product.properties.updateable || product.scenario === "scheduled",
+            onClick: async () => {
+              if (product.id && customer) {
+                await checkout({
+                  ...checkoutParams,
+                  productId: product.id,
+                  dialog: CheckoutDialog
+                });
+              } else if (product.display?.button_url) {
+                window.open(product.display?.button_url, "_blank");
+              }
+            }
+          }
+        },
+        index
+      ))
+    }
+  ) });
+}
+var PricingTableContext = createContext({
+  isAnnualToggle: false,
+  setIsAnnualToggle: () => {
+  },
+  products: [],
+  showFeatures: true
+});
+var usePricingTableContext = (componentName) => {
+  const context = useContext(PricingTableContext);
+  if (context === void 0) {
+    throw new Error(`${componentName} must be used within <PricingTable />`);
+  }
+  return context;
+};
+var PricingTableContainer = ({
+  children,
+  products,
   showFeatures = true,
   className,
   isAnnualToggle,
@@ -331,7 +642,7 @@ var PricingFeatureList = ({
   ] });
 };
 var PricingCardButton = React.forwardRef(({ recommended, children, className, onClick, ...props }, ref) => {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState2(false);
   const handleClick = async (e) => {
     setLoading(true);
     try {
@@ -389,352 +700,37 @@ var RecommendedBadge = ({ recommended }) => {
   return /* @__PURE__ */ jsx2("div", { className: "au-bg-secondary au-absolute au-border au-text-muted-foreground au-text-sm au-font-medium lg:au-rounded-full au-px-3 lg:au-py-0.5 lg:au-top-4 lg:au-right-4 au-top-[-1px] au-right-[-1px] au-rounded-bl-lg", children: recommended });
 };
 
-// src/libraries/react/components/checkout-dialog/checkout-dialog-synced.tsx
+// src/libraries/react/components/paywall-dialog/paywall-dialog-synced.tsx
 import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var formatCurrency = ({
-  amount,
-  currency
-}) => {
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency
-  }).format(amount);
-};
-function CheckoutDialog(params) {
-  const { attach } = useCustomer();
-  const [checkoutResult, setCheckoutResult] = useState2(params?.checkoutResult);
-  useEffect(() => {
-    if (params.checkoutResult) {
-      setCheckoutResult(params.checkoutResult);
-    }
-  }, [params.checkoutResult]);
-  const [loading, setLoading] = useState2(false);
-  if (!checkoutResult) {
+function PaywallDialog(params) {
+  const { data: preview } = usePaywall({
+    featureId: params?.featureId,
+    entityId: params?.entityId
+  });
+  if (!params || !preview) {
     return /* @__PURE__ */ jsx3(Fragment3, {});
   }
   const { open, setOpen } = params;
-  const { title, message } = getCheckoutContent(checkoutResult);
-  const isFree = checkoutResult?.product.properties?.is_free;
-  const isPaid = isFree === false;
-  return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { className: "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-text-sm", children: [
-    /* @__PURE__ */ jsx3(DialogTitle, { className: "au-px-6 au-mb-1", children: title }),
-    /* @__PURE__ */ jsx3("div", { className: "au-px-6 au-mt-1 au-mb-4 au-text-muted-foreground", children: message }),
-    isPaid && checkoutResult && /* @__PURE__ */ jsx3(
-      PriceInformation,
-      {
-        checkoutResult,
-        setCheckoutResult
-      }
-    ),
-    /* @__PURE__ */ jsx3(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-pl-6 au-pr-3 au-bg-secondary au-border-t au-shadow-inner", children: /* @__PURE__ */ jsx3(
+  const { title, message } = getPaywallContent(preview);
+  return /* @__PURE__ */ jsx3(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3(DialogContent, { className: "au-p-0 au-pt-4 au-gap-0 au-text-foreground au-overflow-hidden au-text-sm", children: [
+    /* @__PURE__ */ jsx3(DialogTitle, { className: cn("au-font-bold au-text-xl au-px-6"), children: title }),
+    /* @__PURE__ */ jsx3("div", { className: "au-px-6 au-my-2", children: message }),
+    /* @__PURE__ */ jsx3(DialogFooter, { className: "au-flex au-flex-col sm:au-flex-row au-justify-between au-gap-x-4 au-py-2 au-mt-4 au-pl-6 au-pr-3 au-bg-secondary au-border-t", children: /* @__PURE__ */ jsx3(
       Button,
       {
         size: "sm",
+        className: "au-font-medium au-shadow au-transition au-min-w-20",
         onClick: async () => {
-          setLoading(true);
-          const options = checkoutResult.options.map((option) => {
-            return {
-              featureId: option.feature_id,
-              quantity: option.quantity
-            };
-          });
-          await attach({
-            productId: checkoutResult.product.id,
-            ...params.checkoutParams || {},
-            options
-          });
           setOpen(false);
-          setLoading(false);
         },
-        disabled: loading,
-        className: "au-min-w-16 au-flex au-items-center au-gap-2",
-        children: loading ? /* @__PURE__ */ jsx3(LoaderCircle, { className: "au-w-4 au-h-4 au-animate-spin" }) : /* @__PURE__ */ jsx3(Fragment3, { children: /* @__PURE__ */ jsx3("span", { className: "au-whitespace-nowrap au-flex au-gap-1", children: "Confirm" }) })
+        children: "Confirm"
       }
     ) })
   ] }) });
 }
-function PriceInformation({
-  checkoutResult,
-  setCheckoutResult
-}) {
-  return /* @__PURE__ */ jsxs3("div", { className: "au-px-6 au-mb-4 au-flex au-flex-col au-gap-4", children: [
-    /* @__PURE__ */ jsx3(
-      ProductItems,
-      {
-        checkoutResult,
-        setCheckoutResult
-      }
-    ),
-    /* @__PURE__ */ jsxs3("div", { className: "au-flex au-flex-col au-gap-2", children: [
-      checkoutResult?.has_prorations && checkoutResult.lines.length > 0 && /* @__PURE__ */ jsx3(CheckoutLines, { checkoutResult }),
-      /* @__PURE__ */ jsx3(DueAmounts, { checkoutResult })
-    ] })
-  ] });
-}
-function DueAmounts({ checkoutResult }) {
-  const { next_cycle, product } = checkoutResult;
-  const nextCycleAtStr = next_cycle ? new Date(next_cycle.starts_at).toLocaleDateString() : void 0;
-  const hasUsagePrice = product.items.some(
-    (item) => item.usage_model === "pay_per_use"
-  );
-  const showNextCycle = next_cycle && next_cycle.total !== checkoutResult.total;
-  return /* @__PURE__ */ jsxs3("div", { className: "au-flex au-flex-col au-gap-1", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "au-flex au-justify-between", children: [
-      /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3("p", { className: "au-font-medium au-text-md", children: "Total due today" }) }),
-      /* @__PURE__ */ jsx3("p", { className: "au-font-medium au-text-md", children: formatCurrency({
-        amount: checkoutResult?.total,
-        currency: checkoutResult?.currency
-      }) })
-    ] }),
-    showNextCycle && /* @__PURE__ */ jsxs3("div", { className: "au-flex au-justify-between au-text-muted-foreground", children: [
-      /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsxs3("p", { className: "au-text-md", children: [
-        "Due next cycle (",
-        nextCycleAtStr,
-        ")"
-      ] }) }),
-      /* @__PURE__ */ jsxs3("p", { className: "au-text-md", children: [
-        formatCurrency({
-          amount: next_cycle.total,
-          currency: checkoutResult?.currency
-        }),
-        hasUsagePrice && /* @__PURE__ */ jsx3("span", { children: " + usage prices" })
-      ] })
-    ] })
-  ] });
-}
-function ProductItems({
-  checkoutResult,
-  setCheckoutResult
-}) {
-  const isUpdateQuantity = checkoutResult?.product.scenario === "active" && checkoutResult.product.properties.updateable;
-  const isOneOff = checkoutResult?.product.properties.is_one_off;
-  return /* @__PURE__ */ jsxs3("div", { className: "au-flex au-flex-col au-gap-2", children: [
-    /* @__PURE__ */ jsx3("p", { className: "au-text-sm au-font-medium", children: "Price" }),
-    checkoutResult?.product.items.filter((item) => item.type !== "feature").map((item, index) => {
-      if (item.usage_model == "prepaid") {
-        return /* @__PURE__ */ jsx3(
-          PrepaidItem,
-          {
-            item,
-            checkoutResult,
-            setCheckoutResult
-          },
-          index
-        );
-      }
-      if (isUpdateQuantity) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxs3("div", { className: "au-flex au-justify-between", children: [
-        /* @__PURE__ */ jsx3("p", { className: "au-text-muted-foreground", children: item.feature ? item.feature.name : isOneOff ? "Price" : "Subscription" }),
-        /* @__PURE__ */ jsxs3("p", { children: [
-          item.display?.primary_text,
-          " ",
-          item.display?.secondary_text
-        ] })
-      ] }, index);
-    })
-  ] });
-}
-function CheckoutLines({ checkoutResult }) {
-  return /* @__PURE__ */ jsx3(Accordion, { type: "single", collapsible: true, children: /* @__PURE__ */ jsxs3(AccordionItem, { value: "total", className: "au-border-b-0", children: [
-    /* @__PURE__ */ jsx3(CustomAccordionTrigger, { className: "au-justify-between au-w-full au-my-0 au-py-0 au-border-none", children: /* @__PURE__ */ jsxs3("div", { className: "au-cursor-pointer au-flex au-items-center au-gap-1 au-w-full au-justify-end", children: [
-      /* @__PURE__ */ jsx3("p", { className: "au-font-light au-text-muted-foreground", children: "View details" }),
-      /* @__PURE__ */ jsx3(
-        ChevronDown,
-        {
-          className: "au-text-muted-foreground au-mt-0.5 au-rotate-90 au-transition-transform au-duration-200 au-ease-in-out",
-          size: 14
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsx3(AccordionContent, { className: "au-mt-2 au-mb-0 au-pb-2 au-flex au-flex-col au-gap-2", children: checkoutResult?.lines.filter((line) => line.amount !== 0).map((line, index) => {
-      return /* @__PURE__ */ jsxs3("div", { className: "au-flex au-justify-between", children: [
-        /* @__PURE__ */ jsx3("p", { className: "au-text-muted-foreground", children: line.description }),
-        /* @__PURE__ */ jsx3("p", { className: "au-text-muted-foreground", children: new Intl.NumberFormat("en-US", {
-          style: "currency",
-          currency: checkoutResult?.currency
-        }).format(line.amount) })
-      ] }, index);
-    }) })
-  ] }) });
-}
-function CustomAccordionTrigger({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(Header, { className: "au-flex", children: /* @__PURE__ */ jsx3(
-    Trigger2,
-    {
-      "data-slot": "accordion-trigger",
-      className: cn(
-        "focus-visible:au-border-ring focus-visible:au-ring-ring/50 au-flex au-flex-1 au-items-start au-justify-between au-gap-4 au-rounded-md au-py-4 au-text-left au-text-sm au-font-medium au-transition-all au-outline-none focus-visible:au-ring-[3px] disabled:au-pointer-events-none disabled:au-opacity-50 [&[data-state=open]_svg]:au-rotate-0",
-        className
-      ),
-      ...props,
-      children
-    }
-  ) });
-}
-var PrepaidItem = ({
-  item,
-  checkoutResult,
-  setCheckoutResult
-}) => {
-  const { quantity = 0, billing_units: billingUnits = 1 } = item;
-  const [quantityInput, setQuantityInput] = useState2(
-    (quantity / billingUnits).toString()
-  );
-  const { checkout } = useCustomer();
-  const [loading, setLoading] = useState2(false);
-  const [open, setOpen] = useState2(false);
-  const scenario = checkoutResult.product.scenario;
-  const handleSave = async () => {
-    setLoading(true);
-    try {
-      const newOptions = checkoutResult.options.filter((option) => option.feature_id !== item.feature_id).map((option) => {
-        return {
-          featureId: option.feature_id,
-          quantity: option.quantity
-        };
-      });
-      newOptions.push({
-        featureId: item.feature_id,
-        quantity: Number(quantityInput) * billingUnits
-      });
-      const { data, error } = await checkout({
-        productId: checkoutResult.product.id,
-        options: newOptions,
-        dialog: CheckoutDialog
-      });
-      if (error) {
-        console.error(error);
-        return;
-      }
-      setCheckoutResult(data);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setLoading(false);
-      setOpen(false);
-    }
-  };
-  const disableSelection = scenario === "renew";
-  return /* @__PURE__ */ jsxs3("div", { className: "au-flex au-justify-between au-gap-2", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "au-flex au-gap-2 au-items-start", children: [
-      /* @__PURE__ */ jsx3("p", { className: "au-text-muted-foreground au-whitespace-nowrap", children: item.feature?.name }),
-      /* @__PURE__ */ jsxs3(Popover, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ jsxs3(
-          PopoverTrigger,
-          {
-            className: cn(
-              "au-text-muted-foreground au-text-xs au-px-1 au-py-0.5 au-rounded-md au-flex au-items-center au-gap-1 au-bg-accent/80 au-shrink-0",
-              disableSelection !== true && "hover:au-bg-accent hover:au-text-foreground",
-              disableSelection && "au-pointer-events-none au-opacity-80 au-cursor-not-allowed"
-            ),
-            disabled: disableSelection,
-            children: [
-              "Qty: ",
-              quantity,
-              !disableSelection && /* @__PURE__ */ jsx3(ChevronDown, { size: 12 })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs3(
-          PopoverContent,
-          {
-            align: "start",
-            className: "au-w-80 au-text-sm au-p-4 au-pt-3 au-flex au-flex-col au-gap-4",
-            children: [
-              /* @__PURE__ */ jsxs3("div", { className: "au-flex au-flex-col au-gap-1", children: [
-                /* @__PURE__ */ jsx3("p", { className: "au-text-sm au-font-medium", children: item.feature?.name }),
-                /* @__PURE__ */ jsxs3("p", { className: "au-text-muted-foreground", children: [
-                  item.display?.primary_text,
-                  " ",
-                  item.display?.secondary_text
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs3("div", { className: "au-flex au-justify-between au-items-end", children: [
-                /* @__PURE__ */ jsxs3("div", { className: "au-flex au-gap-2 au-items-center", children: [
-                  /* @__PURE__ */ jsx3(
-                    Input,
-                    {
-                      className: "au-h-7 au-w-16 focus:!au-ring-2",
-                      value: quantityInput,
-                      onChange: (e) => setQuantityInput(e.target.value)
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs3("p", { className: "au-text-muted-foreground", children: [
-                    billingUnits > 1 && `x ${billingUnits} `,
-                    item.feature?.name
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx3(
-                  Button,
-                  {
-                    onClick: handleSave,
-                    className: "au-w-14 !au-h-7 au-text-sm au-items-center au-bg-white au-text-foreground au-shadow-sm au-border au-border-zinc-200 hover:au-bg-zinc-100",
-                    disabled: loading,
-                    children: loading ? /* @__PURE__ */ jsx3(LoaderCircle, { className: "au-text-muted-foreground au-animate-spin !au-w-4 !au-h-4" }) : "Save"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs3("p", { className: "au-text-end", children: [
-      item.display?.primary_text,
-      " ",
-      item.display?.secondary_text
-    ] })
-  ] });
-};
-var PriceItem = ({
-  children,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: cn(
-        "au-flex au-flex-col au-pb-4 sm:au-pb-0 au-gap-1 sm:au-flex-row au-justify-between sm:au-h-7 sm:au-gap-2 sm:au-items-center",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-var PricingDialogButton = ({
-  children,
-  size,
-  onClick,
-  disabled,
-  className
-}) => {
-  return /* @__PURE__ */ jsxs3(
-    Button,
-    {
-      onClick,
-      disabled,
-      size,
-      className: cn(className, "au-shadow-sm au-shadow-stone-400"),
-      children: [
-        children,
-        /* @__PURE__ */ jsx3(ArrowRight, { className: "!au-h-3" })
-      ]
-    }
-  );
-};
 
 export {
-  CheckoutDialog,
-  PriceItem,
-  PricingDialogButton,
+  PaywallDialog,
   PricingTable,
   usePricingTableContext,
   PricingTableContainer,
@@ -743,5 +739,7 @@ export {
   PricingCardButton,
   AnnualSwitch,
   RecommendedBadge,
-  PaywallDialog
+  CheckoutDialog,
+  PriceItem,
+  PricingDialogButton
 };