@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/form-auth.mjs

@@ -0,0 +1,561 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect } from "react";
+import { useForm, Controller } from "../shared/lib/form";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import yup, { resolver } from "../shared/lib/yup";
+import { requestOtc } from "./lib/otc";
+import { utmToQuery } from "./lib/utm";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputText from "../input-text";
+import Divider from "../shared/divider";
+import Google from "../icons/google";
+import Button from "../shared/button";
+const FormAuthEmail = ({
+  action = "Sign in",
+  onSuccess,
+  values = {}
+}) => {
+  const schema = {
+    email: yup.string().label("Email").email().required()
+  };
+  const { control, formState, handleSubmit, setError } = useForm({
+    resolver: resolver(
+      yup.object(schema)
+    ),
+    values
+  });
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  const onSubmit = async (body) => {
+    try {
+      const payload = {
+        email: body.email
+      };
+      const otcId = await requestOtc({
+        action: "form_auth_signin",
+        body: payload,
+        endpoint: "/oauth/signin/request",
+        executeRecaptcha
+      });
+      onSuccess({
+        body: payload,
+        otcId
+      });
+    } catch (error) {
+      setError(
+        "email",
+        {
+          type: "custom",
+          message: error == null ? void 0 : error.message
+        }
+      );
+    }
+    ;
+  };
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "w-full space-y-4 form-auth-email",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "email",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.email) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsx(
+                            InputText,
+                            {
+                              ...{
+                                autoComplete: "email",
+                                onChange,
+                                type: "email",
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "Email"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: action
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormAuthSignup = ({
+  action = "Sign up",
+  onSuccess,
+  referrer,
+  utm = null,
+  values = {}
+}) => {
+  const schema = {
+    email: yup.string().label("Email").email().required(),
+    firstName: yup.string().label("First name").trim().required(),
+    lastName: yup.string().label("Last name").trim().required()
+  };
+  const { control, formState, handleSubmit, setError } = useForm({
+    resolver: resolver(
+      yup.object(schema)
+    ),
+    values
+  });
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  const onSubmit = async (body) => {
+    try {
+      const payload = {
+        email: body.email,
+        firstName: body.firstName,
+        lastName: body.lastName,
+        ...referrer && {
+          referrer
+        },
+        // Sent on the REQUEST, not the confirm. The code arrives by email and
+        // may be entered minutes later in another tab, so the api stores the
+        // tags on the otc document and reads them back at provisioning --
+        // exactly what it already does with the referrer.
+        ...utm && {
+          utm
+        }
+      };
+      const otcId = await requestOtc({
+        action: "form_auth_signup",
+        body: payload,
+        endpoint: "/oauth/signup/request",
+        executeRecaptcha
+      });
+      onSuccess({
+        body: payload,
+        otcId
+      });
+    } catch (error) {
+      setError(
+        "email",
+        {
+          type: "custom",
+          message: error == null ? void 0 : error.message
+        }
+      );
+    }
+    ;
+  };
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "w-full space-y-4 form-auth-signup",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "firstName",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.firstName) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsx(
+                            InputText,
+                            {
+                              ...{
+                                autoComplete: "given-name",
+                                onChange,
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "First name"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "lastName",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.lastName) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsx(
+                            InputText,
+                            {
+                              ...{
+                                autoComplete: "family-name",
+                                onChange,
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "Last name"
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                ...{
+                  control,
+                  name: "email",
+                  render: ({ field: { value, onChange } }) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx(
+                      InputGroup,
+                      {
+                        ...{
+                          error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.email) == null ? void 0 : _b.message,
+                          input: /* @__PURE__ */ jsx(
+                            InputText,
+                            {
+                              ...{
+                                autoComplete: "email",
+                                onChange,
+                                type: "email",
+                                value: value || ""
+                              }
+                            }
+                          ),
+                          label: "Email",
+                          // Sign-up seeds a first campaign from a company domain's
+                          // site (api seedFirstCampaign); a gmail address gets none.
+                          message: "Use your work email and we'll draft a first campaign from your company's website."
+                        }
+                      }
+                    );
+                  }
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: action
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormAuthResend = ({
+  action,
+  body,
+  endpoint,
+  onSuccess
+}) => {
+  var _a, _b;
+  const { clearErrors, formState, handleSubmit, setError } = useForm();
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  const mutation = useMutation({
+    retry: false,
+    mutationFn: () => requestOtc({
+      action,
+      body,
+      endpoint,
+      executeRecaptcha
+    }),
+    onMutate: () => {
+      clearErrors("submit");
+    },
+    onSuccess: (otcId) => onSuccess(otcId),
+    onError: (error) => {
+      setError("submit", {
+        type: "custom",
+        message: (error == null ? void 0 : error.message) || "We could not send a new code. Please refresh the page and try again."
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "w-full form-auth-resend",
+        onSubmit: handleSubmit(() => mutation.mutate())
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: mutation == null ? void 0 : mutation.isPending
+            },
+            children: /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.submit) == null ? void 0 : _b.message,
+                  input: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        loading: mutation == null ? void 0 : mutation.isPending,
+                        type: "submit",
+                        variant: "secondary"
+                      },
+                      children: "Resend code"
+                    }
+                  )
+                }
+              }
+            )
+          }
+        ),
+        (mutation == null ? void 0 : mutation.isSuccess) && // Say so out loud. A resend that succeeds silently is visually
+        // identical to the broken one that sent nothing, which is the whole
+        // complaint — the user is staring at an empty inbox either way and
+        // has no way to tell which is happening.
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            ...{
+              className: "text-sm text-center mt-2"
+            },
+            children: "A new code is on its way."
+          }
+        )
+      ]
+    }
+  );
+};
+const FormAuthGoogle = ({
+  action = "Sign in with Google",
+  ready = true,
+  redirectTo,
+  referrer,
+  utm = null
+}) => {
+  var _a, _b;
+  const { clearErrors, formState, handleSubmit, setError } = useForm();
+  const mutation = useMutation({
+    retry: false,
+    mutationFn: async () => {
+      const params = {};
+      if (redirectTo) {
+        params.redirectTo = redirectTo;
+      }
+      ;
+      if (referrer) {
+        params.ref = referrer;
+      }
+      ;
+      Object.assign(params, utmToQuery(utm));
+      const query = new URLSearchParams(params).toString();
+      const { result } = await request({
+        endpoint: "/oauth/google/start" + (query ? "?" + query : "")
+      });
+      if (!(result == null ? void 0 : result.url)) {
+        throw new Error("Google sign-in is unavailable right now");
+      }
+      ;
+      return {
+        url: result.url
+      };
+    },
+    onMutate: () => {
+      clearErrors("submit");
+    },
+    onSuccess: ({ url }) => {
+      window.location.href = url;
+    },
+    onError: (error) => {
+      setError("submit", {
+        type: "custom",
+        message: (error == null ? void 0 : error.message) || "Google sign-in is unavailable right now."
+      });
+    }
+  });
+  const isLoading = (mutation == null ? void 0 : mutation.isPending) || (mutation == null ? void 0 : mutation.isSuccess);
+  const busy = isLoading || !ready;
+  useEffect(() => {
+    const onPageShow = (event) => {
+      if (event.persisted) {
+        mutation.reset();
+      }
+      ;
+    };
+    window.addEventListener("pageshow", onPageShow);
+    return () => window.removeEventListener("pageshow", onPageShow);
+  }, [mutation]);
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "w-full form-auth-google",
+        onSubmit: handleSubmit(() => mutation.mutate())
+      },
+      children: /* @__PURE__ */ jsx(
+        Fieldset,
+        {
+          ...{
+            disabled: busy
+          },
+          children: /* @__PURE__ */ jsx(
+            InputGroup,
+            {
+              ...{
+                error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.submit) == null ? void 0 : _b.message,
+                input: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ...{
+                      icon: Google,
+                      loading: busy,
+                      reverse: true,
+                      type: "submit",
+                      variant: "secondary"
+                    },
+                    children: action
+                  }
+                )
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+};
+const FormProviders = ({
+  action,
+  redirectTo,
+  referrer,
+  utm = null
+}) => {
+  var _a;
+  const query = useQuery({
+    queryKey: ["auth-providers"],
+    queryFn: async () => {
+      const { result } = await request({
+        endpoint: "/oauth/providers"
+      });
+      return result || {};
+    }
+  });
+  if (query.isError) return null;
+  if (query.isSuccess && Object.keys(((_a = query.data) == null ? void 0 : _a.providers) || {}).length === 0) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FormAuthGoogle,
+      {
+        ...{
+          action,
+          ready: query.isSuccess,
+          redirectTo,
+          referrer,
+          utm
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Divider,
+      {
+        ...{
+          classNameLabel: "bg-gray-light"
+        },
+        children: "or"
+      }
+    )
+  ] });
+};
+export {
+  FormAuthEmail,
+  FormAuthResend,
+  FormAuthSignup,
+  FormProviders
+};

package/dist/dashboard/form-credit.js

@@ -0,0 +1,80 @@
+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_credit_exports = {};
+__export(form_credit_exports, {
+  default: () => form_credit_default
+});
+module.exports = __toCommonJS(form_credit_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_button = __toESM(require("../shared/button"));
+const credits = [
+  10,
+  25,
+  50,
+  75,
+  100,
+  1e3
+];
+const FormCredit = ({
+  onChange
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...{
+        className: "grid grid-cols-3 gap-3"
+      },
+      children: credits.map((value, key) => (
+        // The square is the wrapper's; the Button stretches to fill it as its grid item.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...{
+              className: "grid aspect-square"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  onClick: () => onChange(value),
+                  variant: "secondary"
+                },
+                children: (0, import_drawbridge_utils.formatCurrency)({
+                  value
+                })
+              }
+            )
+          },
+          "credit-" + value + "-" + key
+        )
+      ))
+    }
+  );
+};
+var form_credit_default = FormCredit;

package/dist/dashboard/form-credit.mjs

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { formatCurrency } from "@drawbridge/drawbridge-utils";
+import Button from "../shared/button";
+const credits = [
+  10,
+  25,
+  50,
+  75,
+  100,
+  1e3
+];
+const FormCredit = ({
+  onChange
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...{
+        className: "grid grid-cols-3 gap-3"
+      },
+      children: credits.map((value, key) => (
+        // The square is the wrapper's; the Button stretches to fill it as its grid item.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...{
+              className: "grid aspect-square"
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  onClick: () => onChange(value),
+                  variant: "secondary"
+                },
+                children: formatCurrency({
+                  value
+                })
+              }
+            )
+          },
+          "credit-" + value + "-" + key
+        )
+      ))
+    }
+  );
+};
+var form_credit_default = FormCredit;
+export {
+  form_credit_default as default
+};