@drawbridge/components 0.0.78 → 0.1.1

package/dist/dashboard/form-admin-utm.mjs

@@ -0,0 +1,371 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { useQueryClient } from "@tanstack/react-query";
+import { useForm, Controller } from "../shared/lib/form.mjs";
+import yup, { resolver } from "../shared/lib/yup.mjs";
+import { isValidPhone } from "../input-phone.mjs";
+import Form from "../shared/form.mjs";
+import Fieldset from "../shared/fieldset.mjs";
+import InputUrl from "../shared/input-url.mjs";
+import InputGroup from "../input-group.mjs";
+import InputPhone from "../input-phone.mjs";
+import InputSelect from "../input-select.mjs";
+import InputText from "../input-text.mjs";
+import InputTextarea from "../input-textarea.mjs";
+import Button from "../shared/button.mjs";
+const countries = ["CA", "US"];
+const parameterFields = [
+  { label: "Source", message: "The referrer (e.g. google, newsletter)", name: "source" },
+  { label: "Medium", message: "Marketing medium (e.g. cpc, banner, email)", name: "medium" },
+  { label: "Campaign", message: "Product, promo code, or slogan (e.g. spring_sale)", name: "campaign" },
+  { label: "Term", message: "Identify the paid keywords", name: "term" },
+  { label: "Content", message: "Use to differentiate ads", name: "content" }
+];
+const FormAdminUtm = ({
+  onError,
+  onSuccess,
+  values = {}
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const editing = Boolean(values == null ? void 0 : values.id);
+  const schema = {
+    phone: yup.object({
+      country: yup.string().label("Country").nullable(),
+      number: yup.string().label("Number").nullable()
+    }).label("Phone").nullable().when("type", ([type2], schema2) => {
+      if (type2 === "phone") {
+        return schema2.required().test(
+          "dialable",
+          ({ label }) => label + " is not valid",
+          (value) => isValidPhone(value == null ? void 0 : value.number, value == null ? void 0 : value.country)
+        );
+      }
+      return schema2;
+    }),
+    title: yup.string().label("Title").required().max(150),
+    type: yup.string().label("Type").required().oneOf(((_c = (_b = (_a = app == null ? void 0 : app.enums) == null ? void 0 : _a.utm) == null ? void 0 : _b.type) == null ? void 0 : _c.enum) || ["phone", "url"]),
+    url: yup.string().label("URL").nullable().when("type", ([type2], schema2) => {
+      if (type2 === "url") {
+        return schema2.url().required();
+      }
+      return schema2;
+    })
+  };
+  if (editing) {
+    schema.description = yup.string().label("Description").nullable().max(500);
+    schema.parameters = yup.object({
+      campaign: yup.string().label("Campaign").nullable(),
+      content: yup.string().label("Content").nullable(),
+      medium: yup.string().label("Medium").nullable(),
+      source: yup.string().label("Source").nullable(),
+      term: yup.string().label("Term").nullable()
+    }).nullable();
+  }
+  const { control, formState, handleSubmit, watch } = useForm({
+    resolver: resolver(
+      yup.object(schema)
+    ),
+    values: {
+      description: (values == null ? void 0 : values.description) || "",
+      parameters: {
+        campaign: ((_d = values == null ? void 0 : values.parameters) == null ? void 0 : _d.campaign) || "",
+        content: ((_e = values == null ? void 0 : values.parameters) == null ? void 0 : _e.content) || "",
+        medium: ((_f = values == null ? void 0 : values.parameters) == null ? void 0 : _f.medium) || "",
+        source: ((_g = values == null ? void 0 : values.parameters) == null ? void 0 : _g.source) || "",
+        term: ((_h = values == null ? void 0 : values.parameters) == null ? void 0 : _h.term) || ""
+      },
+      phone: (values == null ? void 0 : values.phone) || null,
+      title: (values == null ? void 0 : values.title) || "",
+      type: (values == null ? void 0 : values.type) || "url",
+      url: (values == null ? void 0 : values.url) || ""
+    }
+  });
+  const type = watch("type");
+  const onSubmit = async ({
+    description,
+    parameters,
+    phone,
+    title,
+    type: type2,
+    url
+  }) => {
+    try {
+      const args = editing ? {
+        body: {
+          description: description || null,
+          parameters,
+          phone: type2 === "phone" ? phone : null,
+          title,
+          type: type2,
+          url: type2 === "url" ? url : null
+        },
+        endpoint: "/admin/utm/" + values.id,
+        method: "PUT"
+      } : {
+        body: {
+          phone: type2 === "phone" ? phone : null,
+          title,
+          type: type2,
+          url: type2 === "url" ? url : null
+        },
+        endpoint: "/admin/utm",
+        method: "POST"
+      };
+      const response = await request(args);
+      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: "title",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.title) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputText,
+                              {
+                                ...{
+                                  onChange,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "Title"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              editing && /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "description",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.description) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputTextarea,
+                              {
+                                ...{
+                                  onChange,
+                                  rows: 3,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "Description"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "type",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2, _c2, _d2, _e2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.type) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputSelect,
+                              {
+                                ...{
+                                  onChange,
+                                  // enums ship { key, value }; the select reads { label, value }.
+                                  options: (((_e2 = (_d2 = (_c2 = app == null ? void 0 : app.enums) == null ? void 0 : _c2.utm) == null ? void 0 : _d2.type) == null ? void 0 : _e2.options) || []).map(({ key, value: value2 }) => ({ label: key, value: value2 })),
+                                  value: value || "url"
+                                }
+                              }
+                            ),
+                            label: "Type"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              editing && /* @__PURE__ */ jsx(
+                InputGroup,
+                {
+                  ...{
+                    input: /* @__PURE__ */ jsx(
+                      InputText,
+                      {
+                        ...{
+                          disabled: true,
+                          onChange: () => {
+                          },
+                          value: ((_i = values == null ? void 0 : values.parameters) == null ? void 0 : _i.id) || ""
+                        }
+                      }
+                    ),
+                    label: "UTM ID",
+                    message: "The ads campaign id."
+                  }
+                }
+              ),
+              type === "url" && /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "url",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.url) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputUrl,
+                              {
+                                ...{
+                                  onChange,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "URL"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              type === "phone" && /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "phone",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.phone) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputPhone,
+                              {
+                                ...{
+                                  countries,
+                                  onChange,
+                                  value: value || {}
+                                }
+                              }
+                            ),
+                            label: "Phone"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              editing && type === "url" && parameterFields.map(({ label, message, name }) => /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "parameters." + name,
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2, _c2;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_c2 = (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.parameters) == null ? void 0 : _b2[name]) == null ? void 0 : _c2.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputText,
+                              {
+                                ...{
+                                  onChange,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label,
+                            message
+                          }
+                        }
+                      );
+                    }
+                  }
+                },
+                "form-admin-utm-" + name
+              ))
+            ]
+          }
+        ),
+        /* @__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"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_admin_utm_default = FormAdminUtm;
+export {
+  form_admin_utm_default as default
+};