@drawbridge/components 0.0.78 → 0.1.0

package/dist/bridge/form-subdomain-shop-modal.mjs

@@ -0,0 +1,523 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import yup, { resolver } from "./lib/yup";
+import { cdnShopify } from "@drawbridge/drawbridge-utils/cdn";
+import { formatCurrency } from "@drawbridge/drawbridge-utils";
+import { FormSubdomainHeader } from "./form-subdomain-header";
+import Image from "next/image";
+import Product from "../product";
+import Empty from "../shared/empty";
+import Button from "../shared/button";
+import Overlay from "../shared/overlay";
+import Shop from "../icons/shop";
+import InputGroup from "../input-group";
+import InputNumber from "../input-number";
+import { backgroundStyle, headerStyle } from "../styles";
+import ChevronDown from "../icons/chevron-down";
+import ChevronUp from "../icons/chevron-up";
+import Warning from "../icons/warning";
+const FormSubdomainProduct = ({
+  back,
+  button,
+  checkout,
+  product,
+  onAddToCart,
+  onError,
+  style,
+  tracking
+}) => {
+  var _a, _b, _c, _d, _e;
+  const available = useMemo(
+    () => ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale),
+    [product]
+  );
+  const [action, setAction] = useState(null);
+  const { formState, getValues, setError, clearErrors, setValue, control } = useForm({
+    defaultValues: {
+      variant: ((_a = available[0]) == null ? void 0 : _a.id) || ""
+    },
+    resolver: resolver(
+      yup.object({
+        variant: yup.string().required("Please select a variant")
+      })
+    )
+  });
+  const variant = useWatch({ control, name: "variant" });
+  const onVariantChange = (value) => {
+    setValue("variant", value);
+    clearErrors("root");
+  };
+  const performAction = async (actionType) => {
+    var _a2, _b2;
+    if (action) return;
+    clearErrors("root");
+    const variantData = available.find((v) => v.id === getValues().variant);
+    if (!variantData) {
+      setError("variant", { message: "Please select a variant" });
+      return;
+    }
+    ;
+    setAction(actionType);
+    try {
+      if (actionType === "add") {
+        await onAddToCart({
+          product,
+          variant: variantData
+        });
+      } else {
+        const productSlug = (_a2 = product == null ? void 0 : product.title) == null ? void 0 : _a2.toLowerCase().replace(/\s+/g, "-");
+        const isDefaultVariant = !variantData.title || variantData.title === "Default Title";
+        if (isDefaultVariant) {
+          tracking.track({ name: "product-" + productSlug + "-buy-now" });
+        } else {
+          const variantSlug = (_b2 = variantData.title) == null ? void 0 : _b2.toLowerCase().replace(/\s+/g, "-");
+          tracking.track({ name: "product-" + productSlug + "-" + variantSlug + "-buy-now" });
+        }
+        ;
+        await checkout({
+          lines: [{
+            merchandiseId: variantData.id,
+            quantity: 1
+          }]
+        });
+      }
+      ;
+    } catch (error) {
+      if (actionType === "add") {
+        setError("root", { message: (error == null ? void 0 : error.message) || "Could not add to cart" });
+      } else {
+        onError(error);
+      }
+      ;
+    } finally {
+      setAction(null);
+    }
+    ;
+  };
+  return /* @__PURE__ */ jsx(
+    Product,
+    {
+      ...{
+        action,
+        errors: {
+          root: (_c = (_b = formState == null ? void 0 : formState.errors) == null ? void 0 : _b.root) == null ? void 0 : _c.message,
+          variant: (_e = (_d = formState == null ? void 0 : formState.errors) == null ? void 0 : _d.variant) == null ? void 0 : _e.message
+        },
+        header: /* @__PURE__ */ jsx(
+          FormSubdomainHeader,
+          {
+            ...{
+              back,
+              button,
+              style
+            }
+          }
+        ),
+        ImageComponent: Image,
+        onAdd: () => performAction("add"),
+        onBuy: () => performAction("buy"),
+        onVariantChange,
+        product,
+        style,
+        variant
+      }
+    }
+  );
+};
+const FormSubdomainCart = ({
+  button,
+  cart,
+  children,
+  onLineRemove,
+  onLineUpdate,
+  onSuccess,
+  style,
+  tracking
+}) => {
+  const [show, setShow] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [lineErrors, setLineErrors] = useState({});
+  const lines = useMemo(() => (cart == null ? void 0 : cart.lines) || [], [cart]);
+  useEffect(() => {
+    lines.filter((line) => line.quantity <= 0).forEach((line) => onLineRemove(line.id));
+  }, [lines, onLineRemove]);
+  const lineCount = lines.reduce((sum, line) => sum + (line.quantity || 0), 0);
+  const hasSoldOut = lines.some((line) => line.availableForSale === false);
+  const canCheckout = Boolean(cart == null ? void 0 : cart.checkoutUrl) && lines.length > 0 && !hasSoldOut;
+  const cartTotal = lines.length > 0 ? formatCurrency({
+    code: lines[0].currency,
+    display: "parts",
+    value: lines.reduce((sum, line) => sum + Number(line.price) * (line.quantity || 0), 0)
+  }) : null;
+  const wrap = async (lineId, fn) => {
+    if (updating) return;
+    setUpdating(true);
+    setLineErrors((prev) => {
+      const next = { ...prev };
+      delete next[lineId];
+      return next;
+    });
+    try {
+      await fn();
+    } catch (error) {
+      setLineErrors((prev) => ({
+        ...prev,
+        [lineId]: (error == null ? void 0 : error.message) || "Could not update line"
+      }));
+    } finally {
+      setUpdating(false);
+    }
+  };
+  const handleQuantity = (line, next) => wrap(line.id, () => {
+    var _a, _b;
+    if (next <= 0) {
+      const productSlug = (_a = line.productTitle) == null ? void 0 : _a.toLowerCase().replace(/\s+/g, "-");
+      const isDefaultVariant = !line.variantTitle || line.variantTitle === "Default Title";
+      if (isDefaultVariant) {
+        tracking == null ? void 0 : tracking.track({ name: "product-" + productSlug + "-remove-cart" });
+      } else {
+        const variantSlug = (_b = line.variantTitle) == null ? void 0 : _b.toLowerCase().replace(/\s+/g, "-");
+        tracking == null ? void 0 : tracking.track({ name: "product-" + productSlug + "-" + variantSlug + "-remove-cart" });
+      }
+      ;
+      return onLineRemove(line.id);
+    }
+    ;
+    return onLineUpdate(line.id, next);
+  });
+  const handleCheckout = () => {
+    if (!canCheckout) return;
+    onSuccess({
+      result: cart
+    });
+  };
+  const items = lines.length === 0 ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "pt-6"
+      },
+      children: /* @__PURE__ */ jsx(
+        Empty,
+        {
+          ...{
+            // Outlined even without a brand: the brand helpers fall back to black.
+            style: style || {}
+          },
+          children: "Your cart is empty"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "divide-y divide-current"
+      },
+      children: lines.map((line) => {
+        var _a, _b, _c, _d, _e;
+        return /* @__PURE__ */ jsx(
+          InputGroup,
+          {
+            ...{
+              className: "py-6",
+              error: lineErrors[line.id],
+              input: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: "flex items-center space-x-3"
+                  },
+                  children: [
+                    line.image && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ...{
+                          className: "relative w-14 h-14 rounded overflow-hidden shrink-0"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          Image,
+                          {
+                            ...{
+                              alt: line.productTitle || "",
+                              className: "object-cover",
+                              fill: true,
+                              sizes: "56px",
+                              src: cdnShopify(line.image, "100x100") || line.image,
+                              unoptimized: true
+                            }
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        ...{
+                          className: "flex-1 space-y-0.5 min-w-0"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              ...{
+                                className: "text-sm font-medium leading-tight truncate"
+                              },
+                              children: line.productTitle
+                            }
+                          ),
+                          line.variantTitle && line.variantTitle !== "Default Title" && /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              ...{
+                                className: "text-xs opacity-60"
+                              },
+                              children: line.variantTitle
+                            }
+                          ),
+                          line.price && /* @__PURE__ */ jsx(
+                            "p",
+                            {
+                              ...{
+                                className: "text-xs opacity-60"
+                              },
+                              children: formatCurrency({
+                                code: line.currency,
+                                display: "parts",
+                                value: line.price
+                              })
+                            }
+                          ),
+                          line.availableForSale === false && /* @__PURE__ */ jsxs(
+                            "p",
+                            {
+                              ...{
+                                className: "flex items-center justify-start space-x-2 py-1 px-1.5 rounded text-sm",
+                                ...Object.keys(style || {}).length > 0 && {
+                                  style: {
+                                    backgroundColor: (_c = (_b = (_a = style == null ? void 0 : style.text) == null ? void 0 : _a.color) == null ? void 0 : _b.rgb) == null ? void 0 : _c.replace(")", ",.1)"),
+                                    color: (_e = (_d = style == null ? void 0 : style.text) == null ? void 0 : _d.color) == null ? void 0 : _e.rgb
+                                  }
+                                }
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  Warning,
+                                  {
+                                    ...{
+                                      className: "w-4 h-4",
+                                      "aria-hidden": true
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("span", { children: "Sold out" })
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      InputNumber,
+                      {
+                        ...{
+                          "aria-label": "Quantity",
+                          disabled: updating,
+                          inline: true,
+                          layout: "split",
+                          min: 0,
+                          onChange: (value) => handleQuantity(line, value),
+                          small: true,
+                          style,
+                          value: line.quantity
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              style
+            }
+          },
+          line.id
+        );
+      })
+    }
+  );
+  const footer = lines.length > 0 && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "space-y-4"
+      },
+      children: [
+        cartTotal && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-between text-sm"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "SUBTOTAL" }),
+              /* @__PURE__ */ jsx("span", { children: cartTotal })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              disabled: !canCheckout,
+              loading: updating,
+              onClick: handleCheckout,
+              style
+            },
+            children: "Checkout"
+          }
+        )
+      ]
+    }
+  );
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...{
+            className: "transition ease-in-out" + (show ? " blur-[8px]" : " pb-10")
+          },
+          children: children(setShow)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Overlay,
+        {
+          ...{
+            className: "z-10 absolute inset-0",
+            onClick: () => setShow(false),
+            show,
+            style
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...{
+            className: "z-20 absolute bottom-0 left-0 w-full max-h-full flex flex-col transition-transform duration-300 ease-out " + (show ? "translate-y-0 rounded-t-xl" : "translate-y-[calc(100%-60px)]"),
+            style: backgroundStyle(style)
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  onClick: () => setShow(!show),
+                  variant: "link"
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    ...{
+                      className: "flex px-6 w-full items-center justify-between " + (show ? "pt-6" : "border-t border-current py-[17px]"),
+                      style: headerStyle(style)
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          ...{
+                            className: "flex items-center space-x-2"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Shop,
+                              {
+                                ...{
+                                  className: "w-5 h-5"
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("span", { children: [
+                              "Cart ",
+                              "(" + lineCount + ")",
+                              " "
+                            ] })
+                          ]
+                        }
+                      ),
+                      show ? /* @__PURE__ */ jsx(
+                        ChevronDown,
+                        {
+                          ...{
+                            className: "w-5 h-5"
+                          }
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        ChevronUp,
+                        {
+                          ...{
+                            className: "w-5 h-5"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "flex-1 overflow-y-auto px-6" + (lines.length === 0 ? " pb-6" : "")
+                },
+                children: items
+              }
+            ),
+            lines.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...{
+                  className: "shrink-0 px-6 pb-6"
+                },
+                children: footer
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  ;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      FormSubdomainHeader,
+      {
+        ...{
+          button,
+          style,
+          title: "Cart (" + lineCount + ")"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...{
+          className: "flex flex-col justify-between h-full"
+        },
+        children: [
+          items,
+          footer
+        ]
+      }
+    )
+  ] });
+};
+export {
+  FormSubdomainCart,
+  FormSubdomainProduct
+};

package/dist/bridge/form-subdomain-shop.js

@@ -0,0 +1,64 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_subdomain_shop_exports = {};
+__export(form_subdomain_shop_exports, {
+  default: () => form_subdomain_shop_default
+});
+module.exports = __toCommonJS(form_subdomain_shop_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_product_tile = __toESM(require("./product-tile"));
+const FormSubdomainShop = ({
+  columns = 2,
+  products = [],
+  onProductClick,
+  style
+}) => {
+  const stacked = products.length === 1 || columns === 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "grid " + (stacked ? "grid-cols-1" : "grid-cols-2") + " items-start gap-6"
+      },
+      children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_product_tile.default,
+        {
+          ...{
+            ...product,
+            onClick: () => onProductClick(product),
+            stacked,
+            style
+          }
+        },
+        product.id
+      ))
+    }
+  );
+};
+var form_subdomain_shop_default = FormSubdomainShop;

package/dist/bridge/form-subdomain-shop.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import CardProduct from "./product-tile";
+const FormSubdomainShop = ({
+  columns = 2,
+  products = [],
+  onProductClick,
+  style
+}) => {
+  const stacked = products.length === 1 || columns === 1;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "grid " + (stacked ? "grid-cols-1" : "grid-cols-2") + " items-start gap-6"
+      },
+      children: products.map((product) => /* @__PURE__ */ jsx(
+        CardProduct,
+        {
+          ...{
+            ...product,
+            onClick: () => onProductClick(product),
+            stacked,
+            style
+          }
+        },
+        product.id
+      ))
+    }
+  );
+};
+var form_subdomain_shop_default = FormSubdomainShop;
+export {
+  form_subdomain_shop_default as default
+};