@drawbridge/components 0.0.77 → 0.1.0

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

@@ -0,0 +1,400 @@
+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_admin_utm_exports = {};
+__export(form_admin_utm_exports, {
+  default: () => form_admin_utm_default
+});
+module.exports = __toCommonJS(form_admin_utm_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_fetch = require("@drawbridge/drawbridge-utils/fetch");
+var import_react_query = require("@tanstack/react-query");
+var import_form = require("../shared/lib/form");
+var import_yup = __toESM(require("../shared/lib/yup"));
+var import_input_phone = require("../input-phone");
+var import_form2 = __toESM(require("../shared/form"));
+var import_fieldset = __toESM(require("../shared/fieldset"));
+var import_input_url = __toESM(require("../shared/input-url"));
+var import_input_group = __toESM(require("../input-group"));
+var import_input_phone2 = __toESM(require("../input-phone"));
+var import_input_select = __toESM(require("../input-select"));
+var import_input_text = __toESM(require("../input-text"));
+var import_input_textarea = __toESM(require("../input-textarea"));
+var import_button = __toESM(require("../shared/button"));
+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 = (0, import_react_query.useQueryClient)();
+  const app = queryClient.getQueryData(["app"]);
+  const editing = Boolean(values == null ? void 0 : values.id);
+  const schema = {
+    phone: import_yup.default.object({
+      country: import_yup.default.string().label("Country").nullable(),
+      number: import_yup.default.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) => (0, import_input_phone.isValidPhone)(value == null ? void 0 : value.number, value == null ? void 0 : value.country)
+        );
+      }
+      return schema2;
+    }),
+    title: import_yup.default.string().label("Title").required().max(150),
+    type: import_yup.default.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: import_yup.default.string().label("URL").nullable().when("type", ([type2], schema2) => {
+      if (type2 === "url") {
+        return schema2.url().required();
+      }
+      return schema2;
+    })
+  };
+  if (editing) {
+    schema.description = import_yup.default.string().label("Description").nullable().max(500);
+    schema.parameters = import_yup.default.object({
+      campaign: import_yup.default.string().label("Campaign").nullable(),
+      content: import_yup.default.string().label("Content").nullable(),
+      medium: import_yup.default.string().label("Medium").nullable(),
+      source: import_yup.default.string().label("Source").nullable(),
+      term: import_yup.default.string().label("Term").nullable()
+    }).nullable();
+  }
+  const { control, formState, handleSubmit, watch } = (0, import_form.useForm)({
+    resolver: (0, import_yup.resolver)(
+      import_yup.default.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 (0, import_fetch.request)(args);
+      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: "title",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.title) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_text.default,
+                              {
+                                ...{
+                                  onChange,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "Title"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              editing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "description",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.description) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_textarea.default,
+                              {
+                                ...{
+                                  onChange,
+                                  rows: 3,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "Description"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "type",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2, _c2, _d2, _e2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.type) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_select.default,
+                              {
+                                ...{
+                                  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__ */ (0, import_jsx_runtime.jsx)(
+                import_input_group.default,
+                {
+                  ...{
+                    input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_input_text.default,
+                      {
+                        ...{
+                          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__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "url",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.url) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_url.default,
+                              {
+                                ...{
+                                  onChange,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "URL"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              type === "phone" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "phone",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.phone) == null ? void 0 : _b2.message,
+                            input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_phone2.default,
+                              {
+                                ...{
+                                  countries,
+                                  onChange,
+                                  value: value || {}
+                                }
+                              }
+                            ),
+                            label: "Phone"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              editing && type === "url" && parameterFields.map(({ label, message, name }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_form.Controller,
+                {
+                  ...{
+                    control,
+                    name: "parameters." + name,
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b2, _c2;
+                      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_input_group.default,
+                        {
+                          ...{
+                            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__ */ (0, import_jsx_runtime.jsx)(
+                              import_input_text.default,
+                              {
+                                ...{
+                                  onChange,
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label,
+                            message
+                          }
+                        }
+                      );
+                    }
+                  }
+                },
+                "form-admin-utm-" + name
+              ))
+            ]
+          }
+        ),
+        /* @__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"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var form_admin_utm_default = FormAdminUtm;