@drawbridge/components 0.0.77 → 0.1.0

package/dist/dashboard/form-organization-campaign-page-preview.mjs

@@ -0,0 +1,216 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { useForm, Controller } from "../shared/lib/form";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputRadio from "./input-radio";
+import InputDate from "./input-date";
+import InputText from "../input-text";
+import Button from "../shared/button";
+const FormOrganizationCampaignPagePreview = ({
+  campaign,
+  onError = () => {
+  },
+  onSuccess = () => {
+  },
+  organization,
+  page,
+  values
+}) => {
+  var _a, _b, _c, _d;
+  const text = (_b = (_a = values == null ? void 0 : values.tokens) == null ? void 0 : _a.preview) == null ? void 0 : _b.text;
+  const expiresAt = (_d = (_c = values == null ? void 0 : values.tokens) == null ? void 0 : _c.preview) == null ? void 0 : _d.expiresAt;
+  const { control, formState, handleSubmit, setValue, watch } = useForm({
+    values: {
+      expiresAt: expiresAt || null,
+      mode: expiresAt ? "custom" : "never"
+    }
+  });
+  const mode = watch("mode");
+  const watchedExpiresAt = watch("expiresAt");
+  const submit = async ({ cycle, data }) => {
+    try {
+      const response = await request({
+        body: {
+          cycle,
+          expiresAt: data.expiresAt
+        },
+        endpoint: "/organization/" + organization + "/campaign/" + campaign + "/page/" + page + "/token",
+        method: "POST"
+      });
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  const onClickSave = handleSubmit((data) => submit({ cycle: false, data }));
+  const onClickRegenerate = handleSubmit((data) => submit({ cycle: true, data }));
+  const submitting = formState.isSubmitting;
+  const disabled = submitting || mode === "custom" && !watchedExpiresAt;
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: submitting
+            },
+            children: /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  input: /* @__PURE__ */ jsx(
+                    InputText,
+                    {
+                      ...{
+                        onChange: () => {
+                        },
+                        placeholder: "Not yet generated \u2014 regenerate to mint one",
+                        readOnly: true,
+                        value: text || ""
+                      }
+                    }
+                  ),
+                  label: "Preview token"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: submitting
+            },
+            children: /* @__PURE__ */ jsx(
+              InputGroup,
+              {
+                ...{
+                  input: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      ...{
+                        className: "space-y-3"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Controller,
+                          {
+                            ...{
+                              control,
+                              name: "mode",
+                              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx(
+                                  InputRadio,
+                                  {
+                                    ...{
+                                      checked: value === "never",
+                                      label: "Never",
+                                      name: "preview-expires",
+                                      onChange: () => {
+                                        onChange("never");
+                                        setValue("expiresAt", null);
+                                      }
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  InputRadio,
+                                  {
+                                    ...{
+                                      checked: value === "custom",
+                                      label: "Custom date",
+                                      name: "preview-expires",
+                                      onChange: () => onChange("custom")
+                                    }
+                                  }
+                                )
+                              ] })
+                            }
+                          }
+                        ),
+                        mode === "custom" && /* @__PURE__ */ jsx(
+                          Controller,
+                          {
+                            ...{
+                              control,
+                              name: "expiresAt",
+                              render: ({ field: { value, onChange } }) => /* @__PURE__ */ jsx(
+                                InputDate,
+                                {
+                                  ...{
+                                    min: /* @__PURE__ */ new Date(),
+                                    onChange,
+                                    time: true,
+                                    value
+                                  }
+                                }
+                              )
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  label: "Expires"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...{
+                  // Equal columns, not a flex row: a Button never shrinks, so two full-width ones would overflow.
+                  className: "grid grid-flow-col auto-cols-fr w-full gap-2"
+                },
+                children: [
+                  text && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        loading: submitting,
+                        onClick: onClickSave
+                      },
+                      children: "Save"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      ...{
+                        loading: submitting,
+                        onClick: onClickRegenerate,
+                        variant: text ? "secondary" : "primary"
+                      },
+                      children: text ? "Regenerate" : "Generate preview token"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_campaign_page_preview_default = FormOrganizationCampaignPagePreview;
+export {
+  form_organization_campaign_page_preview_default as default
+};

package/dist/dashboard/form-organization-campaign-page-qr.js

@@ -0,0 +1,417 @@
+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_organization_campaign_page_qr_exports = {};
+__export(form_organization_campaign_page_qr_exports, {
+  FormOrganizationCampaignPageQRCustomize: () => FormOrganizationCampaignPageQRCustomize,
+  default: () => form_organization_campaign_page_qr_default
+});
+module.exports = __toCommonJS(form_organization_campaign_page_qr_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_drawbridge_utils = require("@drawbridge/drawbridge-utils");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_form = require("../shared/lib/form");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_helpers = require("../shared/lib/helpers");
+var import_form2 = __toESM(require("../shared/form"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_group = __toESM(require("../input-group"));
+var import_cog = __toESM(require("../icons/cog"));
+var import_download = __toESM(require("../icons/download"));
+var import_lock = __toESM(require("../icons/lock"));
+var import_plus = __toESM(require("../icons/plus"));
+var import_card_task = __toESM(require("./card-task"));
+var import_link = __toESM(require("./link"));
+var import_input_color = __toESM(require("./input-color"));
+var import_button = __toESM(require("../shared/button"));
+const iconClassName = "w-5 h-5 shrink-0";
+const FormOrganizationCampaignPageQRCustomize = ({
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { control, formState, handleSubmit } = (0, import_form.useForm)({
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.object({
+        colors: import_yup.default.object({
+          dark: import_yup.default.object().label("QR code color").required(),
+          light: import_yup.default.object().label("Background color").required()
+        })
+      })
+    ),
+    values: values == null ? void 0 : values.qr
+  });
+  const onSubmit = async ({
+    colors
+  }) => {
+    try {
+      const response = await (0, import_fetch.request)({
+        body: {
+          colors
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/campaign/" + (values == null ? void 0 : values.campaign) + "/page/" + (values == null ? void 0 : values.id) + "/qr/customize",
+        method: "PUT"
+      });
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_form2.default,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "colors.dark",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b, _c;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_c = (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.colors) == null ? void 0 : _b.dark) == null ? void 0 : _c.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_color.default,
+                              {
+                                ...{
+                                  onChange,
+                                  value
+                                }
+                              }
+                            ),
+                            label: "QR code color"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "colors.light",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b, _c;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_c = (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.colors) == null ? void 0 : _b.light) == null ? void 0 : _c.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_color.default,
+                              {
+                                ...{
+                                  onChange,
+                                  value
+                                }
+                              }
+                            ),
+                            label: "Background color"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_fieldset.default,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_button.default,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit"
+                },
+                children: "Submit"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+const FormOrganizationCampaignFormQRButton = ({
+  description,
+  disabled,
+  href,
+  onError,
+  onSuccess,
+  size,
+  title,
+  values
+}) => {
+  const endpoint = "/organization/" + (values == null ? void 0 : values.organization) + "/campaign/" + (values == null ? void 0 : values.campaign) + "/page/" + (values == null ? void 0 : values.id) + "/qr";
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const onGenerate = async () => {
+    setLoading(true);
+    try {
+      const response = await (0, import_fetch.request)({
+        body: {
+          size
+        },
+        endpoint,
+        method: "PUT"
+      });
+      onSuccess == null ? void 0 : onSuccess(response);
+    } catch (error) {
+      onError == null ? void 0 : onError(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const props = href ? {
+    "aria-label": "Download " + title,
+    element: import_link.default,
+    href: (0, import_helpers.bust)(href, values == null ? void 0 : values.updatedAt),
+    target: "_blank"
+  } : {
+    "aria-label": "Make " + title,
+    onClick: onGenerate
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "flex items-center justify-between w-full"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              ...{
+                className: "w-full truncate text-left"
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "p",
+            {
+              ...{
+                className: "disabled"
+              },
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.default,
+          {
+            ...{
+              disabled,
+              icon: disabled ? import_lock.default : href ? import_download.default : import_plus.default,
+              inline: true,
+              loading,
+              size: "small",
+              variant: "secondary",
+              ...props
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const FormOrganizationCampaignFormQR = ({
+  disabled,
+  onError,
+  onClickCustomize,
+  onSuccess,
+  organization,
+  values
+}) => {
+  var _a;
+  const [sizes, setSizes] = (0, import_react.useState)(((_a = values == null ? void 0 : values.qr) == null ? void 0 : _a.sizes) || {});
+  const qrcode = (0, import_drawbridge_utils.getPlanFeature)(organization == null ? void 0 : organization.plan, "page:qrcode");
+  const [updatedAt, setUpdatedAt] = (0, import_react.useState)(values == null ? void 0 : values.updatedAt);
+  const made = (size) => ({ message, result }) => {
+    setSizes((current) => {
+      var _a2, _b;
+      return {
+        ...current,
+        [size]: (_b = (_a2 = result == null ? void 0 : result.qr) == null ? void 0 : _a2.sizes) == null ? void 0 : _b[size]
+      };
+    });
+    setUpdatedAt(result == null ? void 0 : result.updatedAt);
+    onSuccess({
+      message
+    });
+  };
+  const locked = (size) => !qrcode.granted || disabled && !(sizes == null ? void 0 : sizes[size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...{
+        className: "w-full"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-4"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                FormOrganizationCampaignFormQRButton,
+                {
+                  ...{
+                    description: "500x500",
+                    disabled: locked("500x500"),
+                    href: sizes == null ? void 0 : sizes["500x500"],
+                    onError,
+                    onSuccess: made("500x500"),
+                    size: "500x500",
+                    title: "Standard resolution",
+                    values: {
+                      ...values,
+                      updatedAt
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                FormOrganizationCampaignFormQRButton,
+                {
+                  ...{
+                    description: "1200x1200",
+                    disabled: locked("1200x1200"),
+                    href: sizes == null ? void 0 : sizes["1200x1200"],
+                    onError,
+                    onSuccess: made("1200x1200"),
+                    size: "1200x1200",
+                    title: "High resolution",
+                    values: {
+                      ...values,
+                      updatedAt
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                FormOrganizationCampaignFormQRButton,
+                {
+                  ...{
+                    description: "Editable vector object",
+                    disabled: locked("svg"),
+                    href: sizes == null ? void 0 : sizes.svg,
+                    onError,
+                    onSuccess: made("svg"),
+                    size: "svg",
+                    title: "SVG",
+                    values: {
+                      ...values,
+                      updatedAt
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        onClickCustomize instanceof Function && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            ...{
+              className: "space-y-2 mt-6 border-t border-gray"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_button.default,
+                {
+                  ...{
+                    disabled: disabled || !qrcode.granted,
+                    onClick: onClickCustomize,
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center justify-between w-full pt-4 text-sm"
+                      },
+                      children: [
+                        "Customize QR codes",
+                        qrcode.granted ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_cog.default, { className: iconClassName }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lock.default, { className: iconClassName })
+                      ]
+                    }
+                  )
+                }
+              ),
+              !qrcode.granted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_card_task.default,
+                {
+                  ...{
+                    button: {
+                      href: "/organizations/" + organization.id + "/billing",
+                      text: "Upgrade"
+                    },
+                    message: qrcode.message
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_campaign_page_qr_default = FormOrganizationCampaignFormQR;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormOrganizationCampaignPageQRCustomize
+});