@drawbridge/components 0.0.78 → 0.1.0

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

@@ -0,0 +1,384 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getPlanFeature } from "@drawbridge/drawbridge-utils";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { useForm, Controller } from "../shared/lib/form";
+import yup, { resolver } from "../shared/lib/yup";
+import { bust } from "../shared/lib/helpers";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import Cog from "../icons/cog";
+import Download from "../icons/download";
+import Lock from "../icons/lock";
+import Plus from "../icons/plus";
+import CardTask from "./card-task";
+import Link from "./link";
+import InputColor from "./input-color";
+import Button from "../shared/button";
+const iconClassName = "w-5 h-5 shrink-0";
+const FormOrganizationCampaignPageQRCustomize = ({
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { control, formState, handleSubmit } = useForm({
+    resolver: resolver(
+      yup.object({
+        colors: yup.object({
+          dark: yup.object().label("QR code color").required(),
+          light: yup.object().label("Background color").required()
+        })
+      })
+    ),
+    values: values == null ? void 0 : values.qr
+  });
+  const onSubmit = async ({
+    colors
+  }) => {
+    try {
+      const response = await 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__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "colors.dark",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b, _c;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            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__ */ jsx(
+                              InputColor,
+                              {
+                                ...{
+                                  onChange,
+                                  value
+                                }
+                              }
+                            ),
+                            label: "QR code color"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "colors.light",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b, _c;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            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__ */ jsx(
+                              InputColor,
+                              {
+                                ...{
+                                  onChange,
+                                  value
+                                }
+                              }
+                            ),
+                            label: "Background color"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: formState == null ? void 0 : formState.isSubmitting
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  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] = useState(false);
+  const onGenerate = async () => {
+    setLoading(true);
+    try {
+      const response = await 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: Link,
+    href: bust(href, values == null ? void 0 : values.updatedAt),
+    target: "_blank"
+  } : {
+    "aria-label": "Make " + title,
+    onClick: onGenerate
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "flex items-center justify-between w-full"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...{
+                className: "w-full truncate text-left"
+              },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...{
+                className: "disabled"
+              },
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            ...{
+              disabled,
+              icon: disabled ? Lock : href ? Download : Plus,
+              inline: true,
+              loading,
+              size: "small",
+              variant: "secondary",
+              ...props
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const FormOrganizationCampaignFormQR = ({
+  disabled,
+  onError,
+  onClickCustomize,
+  onSuccess,
+  organization,
+  values
+}) => {
+  var _a;
+  const [sizes, setSizes] = useState(((_a = values == null ? void 0 : values.qr) == null ? void 0 : _a.sizes) || {});
+  const qrcode = getPlanFeature(organization == null ? void 0 : organization.plan, "page:qrcode");
+  const [updatedAt, setUpdatedAt] = 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__ */ jsxs(
+    "div",
+    {
+      ...{
+        className: "w-full"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "space-y-4"
+            },
+            children: [
+              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(
+          "div",
+          {
+            ...{
+              className: "space-y-2 mt-6 border-t border-gray"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    disabled: disabled || !qrcode.granted,
+                    onClick: onClickCustomize,
+                    variant: "link"
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      ...{
+                        className: "flex items-center justify-between w-full pt-4 text-sm"
+                      },
+                      children: [
+                        "Customize QR codes",
+                        qrcode.granted ? /* @__PURE__ */ jsx(Cog, { className: iconClassName }) : /* @__PURE__ */ jsx(Lock, { className: iconClassName })
+                      ]
+                    }
+                  )
+                }
+              ),
+              !qrcode.granted && /* @__PURE__ */ jsx(
+                CardTask,
+                {
+                  ...{
+                    button: {
+                      href: "/organizations/" + organization.id + "/billing",
+                      text: "Upgrade"
+                    },
+                    message: qrcode.message
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var form_organization_campaign_page_qr_default = FormOrganizationCampaignFormQR;
+export {
+  FormOrganizationCampaignPageQRCustomize,
+  form_organization_campaign_page_qr_default as default
+};