@drawbridge/components 0.0.77 → 0.1.0

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

@@ -0,0 +1,283 @@
+"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_embed_exports = {};
+__export(form_subdomain_embed_exports, {
+  default: () => form_subdomain_embed_default
+});
+module.exports = __toCommonJS(form_subdomain_embed_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_subdomain_content = __toESM(require("./subdomain-content"));
+var import_provider_font = __toESM(require("../provider-font"));
+var import_button = __toESM(require("../shared/button"));
+var import_form_subdomain = __toESM(require("./form-subdomain"));
+var import_countdown = __toESM(require("./countdown"));
+var import_arrow_left = __toESM(require("../icons/arrow-left"));
+var import_warning = __toESM(require("../icons/warning"));
+var import_link = __toESM(require("next/link"));
+var import_powered_by = __toESM(require("../icons/powered-by"));
+var import_provider_analytics = require("./provider-analytics");
+const FormSubdomainEmbed = ({
+  params,
+  preview,
+  result
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const data = result || {};
+  const style = data == null ? void 0 : data.style;
+  const valid = Boolean(data == null ? void 0 : data.valid);
+  const disabled = !preview && !valid;
+  const cta = preview || valid ? ((_a = data == null ? void 0 : data.defaults) == null ? void 0 : _a.active) || ((_d = (_c = (_b = import_drawbridge_utils.constants) == null ? void 0 : _b.campaign) == null ? void 0 : _c.defaults) == null ? void 0 : _d.active) : ((_e = data == null ? void 0 : data.defaults) == null ? void 0 : _e.inactive) || ((_h = (_g = (_f = import_drawbridge_utils.constants) == null ? void 0 : _f.campaign) == null ? void 0 : _g.defaults) == null ? void 0 : _h.inactive);
+  const tracking = (0, import_provider_analytics.useTracking)({
+    embed: true,
+    params,
+    preview,
+    result
+  });
+  (0, import_react.useEffect)(
+    () => {
+      tracking.page();
+    },
+    [tracking]
+  );
+  const [view, setView] = (0, import_react.useState)({ name: "body", message: null });
+  const containerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(
+    () => {
+      if (typeof window === "undefined" || window.parent === window) return;
+      const node = containerRef.current;
+      if (!node) return;
+      window.scrollTo(0, 0);
+      const post = () => {
+        window.parent.postMessage(
+          {
+            type: "drawbridge:embed:height",
+            height: Math.ceil(node.getBoundingClientRect().height)
+          },
+          "*"
+        );
+      };
+      post();
+      const observer = new ResizeObserver(post);
+      observer.observe(node);
+      return () => observer.disconnect();
+    },
+    [view.name]
+  );
+  const onSuccess = (0, import_react.useCallback)(
+    (response) => {
+      var _a2;
+      return setView({
+        name: "success",
+        message: (response == null ? void 0 : response.message) || ((_a2 = data == null ? void 0 : data.defaults) == null ? void 0 : _a2.confirmation) || "Thank you! Your submission was received."
+      });
+    },
+    [(_i = data == null ? void 0 : data.defaults) == null ? void 0 : _i.confirmation]
+  );
+  const onError = (0, import_react.useCallback)(
+    ({ message }) => setView({
+      name: "error",
+      message
+    }),
+    []
+  );
+  const back = (name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_button.default,
+    {
+      ...{
+        icon: import_arrow_left.default,
+        inline: true,
+        onClick: () => setView({ name, message: null }),
+        reverse: true,
+        variant: "link"
+      },
+      children: "Back"
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_provider_font.default,
+    {
+      ...style,
+      children: (fonts) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ref: containerRef,
+            ...{
+              className: "p-6 flex flex-col justify-center  min-h-dvh",
+              style: {
+                ...fonts.body,
+                color: (_b2 = (_a2 = style == null ? void 0 : style.text) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb
+              }
+            },
+            children: [
+              view.name === "body" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_subdomain_content.default,
+                {
+                  ...{
+                    action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_button.default,
+                      {
+                        ...{
+                          disabled,
+                          onClick: () => setView({ name: "form", message: null }),
+                          style
+                        },
+                        children: cta
+                      }
+                    ),
+                    countdown: (data == null ? void 0 : data.countdown) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_countdown.default,
+                      {
+                        ...{
+                          className: "h-4 mt-4",
+                          date: data.countdown
+                        }
+                      },
+                      data.countdown
+                    ) : null,
+                    data,
+                    embed: true,
+                    fonts,
+                    gallery: [],
+                    headerClassName: "space-y-6",
+                    style
+                  }
+                }
+              ) }),
+              view.name === "form" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  ...{
+                    className: "px-6 space-y-6 lg:max-w-lg mx-auto w-full"
+                  },
+                  children: [
+                    back("body"),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_form_subdomain.default,
+                      {
+                        ...{
+                          agreements: data == null ? void 0 : data.agreements,
+                          disabled,
+                          fields: data == null ? void 0 : data.fields,
+                          integrations: data == null ? void 0 : data.integrations,
+                          onError,
+                          onSuccess,
+                          params,
+                          preview,
+                          style,
+                          tracking
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              view.name === "success" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form_subdomain.FormSubdomainMessage,
+                {
+                  ...{
+                    message: view.message,
+                    style,
+                    title: "Submitted"
+                  }
+                }
+              ),
+              view.name === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  ...{
+                    className: "px-6 space-y-6"
+                  },
+                  children: [
+                    back("form"),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_form_subdomain.FormSubdomainMessage,
+                      {
+                        ...{
+                          message: view.message,
+                          style,
+                          svg: import_warning.default,
+                          title: "Error"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  ...{
+                    className: "w-full pt-5 lg:pt-10 lg:pb-5",
+                    style: {
+                      background: (_e2 = (_d2 = (_c2 = style == null ? void 0 : style.background) == null ? void 0 : _c2.color) == null ? void 0 : _d2.rgb) == null ? void 0 : _e2.replace(")", ",.9)"),
+                      color: (_g2 = (_f2 = style == null ? void 0 : style.text) == null ? void 0 : _f2.color) == null ? void 0 : _g2.rgb
+                    }
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      ...{
+                        className: "w-full pt-6"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_button.default,
+                        {
+                          ...{
+                            "aria-label": "Link to Drawbridge website.",
+                            element: import_link.default,
+                            href: process.env.NEXT_PUBLIC_WEBSITE_URI,
+                            target: "_blank",
+                            variant: "link"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            import_powered_by.default,
+                            {
+                              ...{
+                                className: "w-full max-w-[180px] lg:max-w-[200px]"
+                              }
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var form_subdomain_embed_default = FormSubdomainEmbed;

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

@@ -0,0 +1,254 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { constants } from "@drawbridge/drawbridge-utils";
+import TemplateSubdomainContent from "./subdomain-content";
+import ProviderFont from "../provider-font";
+import Button from "../shared/button";
+import FormSubdomain, { FormSubdomainMessage } from "./form-subdomain";
+import Countdown from "./countdown";
+import ArrowLeft from "../icons/arrow-left";
+import Warning from "../icons/warning";
+import Link from "next/link";
+import PoweredBy from "../icons/powered-by";
+import { useTracking } from "./provider-analytics";
+const FormSubdomainEmbed = ({
+  params,
+  preview,
+  result
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const data = result || {};
+  const style = data == null ? void 0 : data.style;
+  const valid = Boolean(data == null ? void 0 : data.valid);
+  const disabled = !preview && !valid;
+  const cta = preview || valid ? ((_a = data == null ? void 0 : data.defaults) == null ? void 0 : _a.active) || ((_d = (_c = (_b = constants) == null ? void 0 : _b.campaign) == null ? void 0 : _c.defaults) == null ? void 0 : _d.active) : ((_e = data == null ? void 0 : data.defaults) == null ? void 0 : _e.inactive) || ((_h = (_g = (_f = constants) == null ? void 0 : _f.campaign) == null ? void 0 : _g.defaults) == null ? void 0 : _h.inactive);
+  const tracking = useTracking({
+    embed: true,
+    params,
+    preview,
+    result
+  });
+  useEffect(
+    () => {
+      tracking.page();
+    },
+    [tracking]
+  );
+  const [view, setView] = useState({ name: "body", message: null });
+  const containerRef = useRef(null);
+  useEffect(
+    () => {
+      if (typeof window === "undefined" || window.parent === window) return;
+      const node = containerRef.current;
+      if (!node) return;
+      window.scrollTo(0, 0);
+      const post = () => {
+        window.parent.postMessage(
+          {
+            type: "drawbridge:embed:height",
+            height: Math.ceil(node.getBoundingClientRect().height)
+          },
+          "*"
+        );
+      };
+      post();
+      const observer = new ResizeObserver(post);
+      observer.observe(node);
+      return () => observer.disconnect();
+    },
+    [view.name]
+  );
+  const onSuccess = useCallback(
+    (response) => {
+      var _a2;
+      return setView({
+        name: "success",
+        message: (response == null ? void 0 : response.message) || ((_a2 = data == null ? void 0 : data.defaults) == null ? void 0 : _a2.confirmation) || "Thank you! Your submission was received."
+      });
+    },
+    [(_i = data == null ? void 0 : data.defaults) == null ? void 0 : _i.confirmation]
+  );
+  const onError = useCallback(
+    ({ message }) => setView({
+      name: "error",
+      message
+    }),
+    []
+  );
+  const back = (name) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...{
+        icon: ArrowLeft,
+        inline: true,
+        onClick: () => setView({ name, message: null }),
+        reverse: true,
+        variant: "link"
+      },
+      children: "Back"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    ProviderFont,
+    {
+      ...style,
+      children: (fonts) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            ...{
+              className: "p-6 flex flex-col justify-center  min-h-dvh",
+              style: {
+                ...fonts.body,
+                color: (_b2 = (_a2 = style == null ? void 0 : style.text) == null ? void 0 : _a2.color) == null ? void 0 : _b2.rgb
+              }
+            },
+            children: [
+              view.name === "body" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+                TemplateSubdomainContent,
+                {
+                  ...{
+                    action: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        ...{
+                          disabled,
+                          onClick: () => setView({ name: "form", message: null }),
+                          style
+                        },
+                        children: cta
+                      }
+                    ),
+                    countdown: (data == null ? void 0 : data.countdown) ? /* @__PURE__ */ jsx(
+                      Countdown,
+                      {
+                        ...{
+                          className: "h-4 mt-4",
+                          date: data.countdown
+                        }
+                      },
+                      data.countdown
+                    ) : null,
+                    data,
+                    embed: true,
+                    fonts,
+                    gallery: [],
+                    headerClassName: "space-y-6",
+                    style
+                  }
+                }
+              ) }),
+              view.name === "form" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: "px-6 space-y-6 lg:max-w-lg mx-auto w-full"
+                  },
+                  children: [
+                    back("body"),
+                    /* @__PURE__ */ jsx(
+                      FormSubdomain,
+                      {
+                        ...{
+                          agreements: data == null ? void 0 : data.agreements,
+                          disabled,
+                          fields: data == null ? void 0 : data.fields,
+                          integrations: data == null ? void 0 : data.integrations,
+                          onError,
+                          onSuccess,
+                          params,
+                          preview,
+                          style,
+                          tracking
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              view.name === "success" && /* @__PURE__ */ jsx(
+                FormSubdomainMessage,
+                {
+                  ...{
+                    message: view.message,
+                    style,
+                    title: "Submitted"
+                  }
+                }
+              ),
+              view.name === "error" && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ...{
+                    className: "px-6 space-y-6"
+                  },
+                  children: [
+                    back("form"),
+                    /* @__PURE__ */ jsx(
+                      FormSubdomainMessage,
+                      {
+                        ...{
+                          message: view.message,
+                          style,
+                          svg: Warning,
+                          title: "Error"
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...{
+                    className: "w-full pt-5 lg:pt-10 lg:pb-5",
+                    style: {
+                      background: (_e2 = (_d2 = (_c2 = style == null ? void 0 : style.background) == null ? void 0 : _c2.color) == null ? void 0 : _d2.rgb) == null ? void 0 : _e2.replace(")", ",.9)"),
+                      color: (_g2 = (_f2 = style == null ? void 0 : style.text) == null ? void 0 : _f2.color) == null ? void 0 : _g2.rgb
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...{
+                        className: "w-full pt-6"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          ...{
+                            "aria-label": "Link to Drawbridge website.",
+                            element: Link,
+                            href: process.env.NEXT_PUBLIC_WEBSITE_URI,
+                            target: "_blank",
+                            variant: "link"
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            PoweredBy,
+                            {
+                              ...{
+                                className: "w-full max-w-[180px] lg:max-w-[200px]"
+                              }
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        );
+      }
+    }
+  );
+};
+var form_subdomain_embed_default = FormSubdomainEmbed;
+export {
+  form_subdomain_embed_default as default
+};

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

@@ -0,0 +1,118 @@
+"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_header_exports = {};
+__export(form_subdomain_header_exports, {
+  FormSubdomainHeader: () => FormSubdomainHeader,
+  default: () => form_subdomain_header_default
+});
+module.exports = __toCommonJS(form_subdomain_header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_arrow_left = __toESM(require("../icons/arrow-left"));
+var import_button = __toESM(require("../shared/button"));
+var import_styles = require("../styles");
+const FormSubdomainHeader = ({
+  back,
+  button,
+  label,
+  style,
+  title
+}) => {
+  const heading = title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "h4",
+    {
+      ...{
+        className: "truncate w-full max-w-xs",
+        // Same resolver the page heading behind this modal uses, so
+        // the two can't disagree — deriving it here instead is how an
+        // italic brand font ended up upright in Safari modals.
+        style: (0, import_styles.headerStyle)(style)
+      },
+      children: title
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "w-full flex items-center justify-between space-x-6",
+        "aria-live": "polite",
+        // The brand's text colour; the back link inherits it.
+        ...style && { style: (0, import_styles.textStyle)(style) }
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "flex items-center space-x-3",
+              style: { minWidth: "16.6667%" }
+            },
+            children: back ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  icon: import_arrow_left.default,
+                  inline: true,
+                  onClick: back.onClick,
+                  reverse: true,
+                  variant: "link"
+                },
+                children: heading
+              }
+            ) : heading
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "w-full text-center"
+            },
+            children: label
+          }
+        ),
+        button && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "flex items-center justify-end",
+              style: { minWidth: "16.6667%" }
+            },
+            children: button
+          }
+        )
+      ]
+    }
+  );
+};
+var form_subdomain_header_default = FormSubdomainHeader;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormSubdomainHeader
+});