autumn-js 0.0.67 → 0.0.72

package/dist/libraries/react/chunk-NEV76K4V.mjs

@@ -0,0 +1,552 @@
+"use client";
+
+import {
+  getAttachContent
+} from "./chunk-BCMBFJ7E.mjs";
+import {
+  getPricingTableContent
+} from "./chunk-QBBE72EF.mjs";
+import {
+  Button
+} from "./chunk-O4HHXBGR.mjs";
+import {
+  ArrowRight,
+  Check,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+  LoaderCircle
+} from "./chunk-2XYYCR4J.mjs";
+import {
+  Switch
+} from "./chunk-TFGQQAVB.mjs";
+import {
+  usePricingTable
+} from "./chunk-7PRD7RPD.mjs";
+import {
+  cn
+} from "./chunk-4CGZZYLG.mjs";
+import {
+  useCustomer
+} from "./chunk-ZWO4QYXI.mjs";
+
+// src/libraries/react/components/pricing-table/pricing-table-synced.tsx
+import React2 from "react";
+
+// src/libraries/react/components/attach-dialog/attach-dialog-synced.tsx
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AttachDialog(params) {
+  const { attach } = useCustomer();
+  const [loading, setLoading] = useState(false);
+  const [optionsInput, setOptionsInput] = useState(
+    params?.preview?.options || []
+  );
+  const getTotalPrice = () => {
+    let sum = due_today?.price || 0;
+    optionsInput.forEach((option) => {
+      if (option.price && option.quantity) {
+        sum += option.price * (option.quantity / option.billing_units);
+      }
+    });
+    return sum;
+  };
+  useEffect(() => {
+    setOptionsInput(params?.preview?.options || []);
+  }, [params?.preview?.options]);
+  if (!params || !params.preview) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const { open, setOpen, preview } = params;
+  const { items, due_today } = preview;
+  const { title, message } = getAttachContent(preview);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      className: cn("p-0 pt-4 gap-0 text-foreground overflow-hidden text-sm"),
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: cn("px-6 mb-1 "), children: title }),
+        /* @__PURE__ */ jsx("div", { className: cn("px-6 mt-1 mb-4 text-muted-foreground"), children: message }),
+        (items || optionsInput.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mb-6 px-6", children: [
+          items?.map((item) => /* @__PURE__ */ jsxs(PriceItem, { children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: item.description }),
+            /* @__PURE__ */ jsx("span", { children: item.price })
+          ] }, item.description)),
+          optionsInput?.map((option, index) => {
+            return /* @__PURE__ */ jsx(
+              OptionsInput,
+              {
+                option,
+                optionsInput,
+                setOptionsInput,
+                index
+              },
+              option.feature_name
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs(DialogFooter, { className: "flex flex-col sm:flex-row justify-between gap-x-4 py-2 pl-6 pr-3 bg-secondary border-t shadow-inner", children: [
+          due_today && /* @__PURE__ */ jsxs(TotalPrice, { children: [
+            /* @__PURE__ */ jsx("span", { children: "Due Today" }),
+            /* @__PURE__ */ jsx("span", { children: new Intl.NumberFormat("en-US", {
+              style: "currency",
+              currency: due_today.currency
+            }).format(getTotalPrice()) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: async () => {
+                setLoading(true);
+                await attach({
+                  productId: preview.product_id,
+                  options: optionsInput.map((option) => ({
+                    featureId: option.feature_id,
+                    quantity: option.quantity || 0
+                  }))
+                });
+                setOpen(false);
+                setLoading(false);
+              },
+              disabled: loading,
+              className: "min-w-16 flex items-center gap-2",
+              children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap flex gap-1", children: "Confirm" }) })
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+var PriceItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col pb-4 sm:pb-0 gap-1 sm:flex-row justify-between sm:h-7 sm:gap-2 sm:items-center",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var OptionsInput = ({
+  className,
+  option,
+  optionsInput,
+  setOptionsInput,
+  index,
+  ...props
+}) => {
+  const { feature_name, billing_units, quantity, price } = option;
+  return /* @__PURE__ */ jsxs(PriceItem, { children: [
+    /* @__PURE__ */ jsx("span", { children: feature_name }),
+    /* @__PURE__ */ jsx(
+      QuantityInput,
+      {
+        value: quantity ? quantity / billing_units : "",
+        onChange: (e) => {
+          const newOptions = [...optionsInput];
+          newOptions[index].quantity = parseInt(e.target.value) * billing_units;
+          setOptionsInput(newOptions);
+        },
+        children: /* @__PURE__ */ jsxs("span", { className: "", children: [
+          "\xD7 $",
+          price,
+          " per ",
+          billing_units === 1 ? " " : billing_units,
+          " ",
+          feature_name
+        ] })
+      },
+      feature_name
+    )
+  ] }, feature_name);
+};
+var QuantityInput = ({
+  children,
+  onChange,
+  value,
+  className,
+  ...props
+}) => {
+  const currentValue = Number(value) || 0;
+  const handleValueChange = (newValue) => {
+    const syntheticEvent = {
+      target: { value: String(newValue) }
+    };
+    onChange(syntheticEvent);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(className, "flex flex-row items-center gap-4"),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              onClick: () => currentValue > 0 && handleValueChange(currentValue - 1),
+              disabled: currentValue <= 0,
+              className: "h-6 w-6 pb-0.5",
+              children: "-"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "w-8 text-center text-foreground", children: currentValue }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              onClick: () => handleValueChange(currentValue + 1),
+              className: "h-6 w-6 pb-0.5",
+              children: "+"
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  );
+};
+var TotalPrice = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "w-full font-semibold flex justify-between items-center", children });
+};
+var PricingDialogButton = ({
+  children,
+  size,
+  onClick,
+  disabled,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      onClick,
+      disabled,
+      size,
+      className: cn(className, "shadow-sm shadow-stone-400"),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ArrowRight, { className: "!h-3" })
+      ]
+    }
+  );
+};
+
+// src/libraries/react/components/pricing-table/pricing-table-synced.tsx
+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
+}) {
+  const { attach } = useCustomer();
+  const [isAnnual, setIsAnnual] = useState2(false);
+  const { products, isLoading, error } = usePricingTable({ productDetails });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2("div", { className: "w-full h-full flex justify-center items-center min-h-[300px]", children: /* @__PURE__ */ jsx2(LoaderCircle, { className: "w-6 h-6 text-zinc-400 animate-spin" }) });
+  }
+  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", { 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.scenario === "scheduled",
+            onClick: async () => {
+              if (product.id) {
+                await attach({
+                  productId: product.id,
+                  dialog: AttachDialog
+                });
+              } 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,
+  setIsAnnualToggle,
+  multiInterval
+}) => {
+  if (!products) {
+    throw new Error("products is required in <PricingTable />");
+  }
+  if (products.length === 0) {
+    return /* @__PURE__ */ jsx2(Fragment2, {});
+  }
+  return /* @__PURE__ */ jsx2(
+    PricingTableContext.Provider,
+    {
+      value: { isAnnualToggle, setIsAnnualToggle, products, showFeatures },
+      children: /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center flex-col"), children: [
+        multiInterval && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              products.some((p) => p.display?.recommend_text) && "mb-8"
+            ),
+            children: /* @__PURE__ */ jsx2(
+              AnnualSwitch,
+              {
+                isAnnualToggle,
+                setIsAnnualToggle
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: cn(
+              "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[repeat(auto-fit,minmax(200px,1fr))] w-full gap-2",
+              className
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+var PricingCard = ({
+  productId,
+  className,
+  onButtonClick,
+  buttonProps
+}) => {
+  const { products, showFeatures } = usePricingTableContext("PricingCard");
+  const product = products.find((p) => p.id === productId);
+  if (!product) {
+    throw new Error(`Product with id ${productId} not found`);
+  }
+  const { name, display: productDisplay, items } = product;
+  const { buttonText } = getPricingTableContent(product);
+  const isRecommended = productDisplay?.recommend_text ? true : false;
+  const mainPriceDisplay = product.properties?.is_free ? {
+    primary_text: "Free"
+  } : product.items[0].display;
+  const featureItems = product.properties?.is_free ? product.items : product.items.slice(1);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cn(
+        "w-full h-full py-6 text-foreground border rounded-lg shadow-sm max-w-xl",
+        isRecommended && "lg:-translate-y-6 lg:shadow-lg dark:shadow-zinc-800/80 lg:h-[calc(100%+48px)] bg-secondary/40",
+        className
+      ),
+      children: [
+        productDisplay?.recommend_text && /* @__PURE__ */ jsx2(RecommendedBadge, { recommended: productDisplay?.recommend_text }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: cn(
+              "flex flex-col h-full flex-grow",
+              isRecommended && "lg:translate-y-6"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "h-full", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "pb-4", children: [
+                    /* @__PURE__ */ jsx2("h2", { className: "text-2xl font-semibold px-6 truncate", children: name }),
+                    productDisplay?.description && /* @__PURE__ */ jsx2("div", { className: "text-sm text-muted-foreground px-6 h-8", children: /* @__PURE__ */ jsxs2("p", { className: "line-clamp-2", children: [
+                      "Everything from ",
+                      productDisplay?.description,
+                      ", plus:"
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsx2("div", { className: "mb-2", children: /* @__PURE__ */ jsx2("h3", { className: "font-semibold h-16 flex px-6 items-center border-y mb-4 bg-secondary/40", children: /* @__PURE__ */ jsxs2("div", { className: "line-clamp-2", children: [
+                    mainPriceDisplay?.primary_text,
+                    " ",
+                    mainPriceDisplay?.secondary_text && /* @__PURE__ */ jsx2("span", { className: "font-normal text-muted-foreground mt-1", children: mainPriceDisplay?.secondary_text })
+                  ] }) }) })
+                ] }),
+                showFeatures && featureItems.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex-grow px-6 mb-6", children: /* @__PURE__ */ jsx2(
+                  PricingFeatureList,
+                  {
+                    items: featureItems,
+                    showIcon: true,
+                    everythingFrom: product.display?.everything_from
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx2("div", { className: cn(" px-6 ", isRecommended && "lg:-translate-y-12"), children: /* @__PURE__ */ jsx2(
+                PricingCardButton,
+                {
+                  recommended: productDisplay?.recommend_text ? true : false,
+                  onClick: onButtonClick,
+                  ...buttonProps,
+                  children: buttonText
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var PricingFeatureList = ({
+  items,
+  showIcon = true,
+  everythingFrom,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex-grow", className), children: [
+    everythingFrom && /* @__PURE__ */ jsxs2("p", { className: "text-sm mb-4", children: [
+      "Everything from ",
+      everythingFrom,
+      ", plus:"
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: items.map((item, index) => /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-2 text-sm", children: [
+      showIcon && /* @__PURE__ */ jsx2(Check, { className: "h-4 w-4 text-primary flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx2("span", { children: item.display?.primary_text }),
+        item.display?.secondary_text && /* @__PURE__ */ jsx2("span", { className: "text-sm text-muted-foreground", children: item.display?.secondary_text })
+      ] })
+    ] }, index)) })
+  ] });
+};
+var PricingCardButton = React2.forwardRef(({ recommended, children, buttonUrl, onClick, className, ...props }, ref) => {
+  const [loading, setLoading] = useState2(false);
+  return /* @__PURE__ */ jsx2(
+    Button,
+    {
+      className: cn(
+        "w-full py-3 px-4 group overflow-hidden relative transition-all duration-300 hover:brightness-90 border rounded-lg",
+        className
+      ),
+      variant: recommended ? "default" : "secondary",
+      ref,
+      disabled: loading,
+      onClick: async (e) => {
+        setLoading(true);
+        try {
+          if (onClick) {
+            await onClick(e);
+            return;
+          }
+          if (buttonUrl) {
+            window.open(buttonUrl, "_blank");
+            return;
+          }
+        } catch (error) {
+          throw error;
+        } finally {
+          setLoading(false);
+        }
+      },
+      ...props,
+      children: loading ? /* @__PURE__ */ jsx2(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between w-full transition-transform duration-300 group-hover:translate-y-[-130%]", children: [
+          /* @__PURE__ */ jsx2("span", { children }),
+          /* @__PURE__ */ jsx2("span", { className: "text-sm", children: "\u2192" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between w-full absolute px-4 translate-y-[130%] transition-transform duration-300 group-hover:translate-y-0 mt-2 group-hover:mt-0", children: [
+          /* @__PURE__ */ jsx2("span", { children }),
+          /* @__PURE__ */ jsx2("span", { className: "text-sm", children: "\u2192" })
+        ] })
+      ] })
+    }
+  );
+});
+PricingCardButton.displayName = "PricingCardButton";
+var AnnualSwitch = ({
+  isAnnualToggle,
+  setIsAnnualToggle
+}) => {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center space-x-2 mb-4", children: [
+    /* @__PURE__ */ jsx2("span", { className: "text-sm text-muted-foreground", children: "Monthly" }),
+    /* @__PURE__ */ jsx2(
+      Switch,
+      {
+        id: "annual-billing",
+        checked: isAnnualToggle,
+        onCheckedChange: setIsAnnualToggle
+      }
+    ),
+    /* @__PURE__ */ jsx2("span", { className: "text-sm text-muted-foreground", children: "Annual" })
+  ] });
+};
+var RecommendedBadge = ({ recommended }) => {
+  return /* @__PURE__ */ jsx2("div", { className: "bg-secondary absolute border text-muted-foreground text-sm font-medium lg:rounded-full px-3 lg:py-0.5 lg:top-4 lg:right-4 top-[-1px] right-[-1px] rounded-bl-lg", children: recommended });
+};
+
+export {
+  PricingTable,
+  usePricingTableContext,
+  PricingTableContainer,
+  PricingCard,
+  PricingFeatureList,
+  PricingCardButton,
+  AnnualSwitch,
+  RecommendedBadge,
+  AttachDialog,
+  PriceItem,
+  OptionsInput,
+  QuantityInput,
+  TotalPrice,
+  PricingDialogButton
+};

package/dist/libraries/react/chunk-O4HHXBGR.mjs

@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  clsx,
+  cn
+} from "./chunk-4CGZZYLG.mjs";
+
+// src/libraries/react/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+
+// ../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.mjs
+var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+var cx = clsx;
+var cva = (base, config) => (props) => {
+  var _config_compoundVariants;
+  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+
+// src/libraries/react/components/ui/button.tsx
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+export {
+  buttonVariants,
+  Button
+};