@drawbridge/components 0.0.77 → 0.1.0

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

@@ -0,0 +1,366 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { constants } from "@drawbridge/drawbridge-utils";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import yup, { resolver } from "../shared/lib/yup";
+import { useForm, FormProvider, Controller } from "../shared/lib/form";
+import { useQueryClient } from "@tanstack/react-query";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputSwitch from "../shared/input-switch";
+import InputResource from "./input-resource";
+import Button from "../shared/button";
+import Accordion from "./accordion";
+import { InputFieldsDetails, InputFieldsMedia, InputFieldsPage, InputFieldsStyle, schemas } from "./input-fields";
+const props = {
+  className: "p-6 bg-white rounded border border-gray",
+  classNamePanel: "mt-6 pt-6 border-t border-gray"
+};
+const FormOrganizationCampaignPage = ({
+  canManageBrands,
+  onError,
+  onSuccess,
+  values
+}) => {
+  const methods = useForm({
+    resolver: resolver(
+      yup.object({
+        ...schemas.page(),
+        brand: yup.object().label("Brand").nullable()
+      })
+    ),
+    values
+  });
+  const { control, formState, handleSubmit } = methods;
+  const onSubmit = async ({
+    brand,
+    title
+  }) => {
+    try {
+      const args = {
+        // Send `brand` only when the selector was shown: an explicit value
+        // (id or null) changes the server's inheritance, and a hidden
+        // selector must leave the legacy behavior untouched.
+        body: {
+          ...canManageBrands && { brand: (brand == null ? void 0 : brand.id) ?? null },
+          title
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/campaign/" + (values == null ? void 0 : values.campaign) + "/page",
+        method: "POST"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__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(InputFieldsPage, {}),
+              canManageBrands && /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "brand",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.brand) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputResource,
+                              {
+                                ...{
+                                  endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/brands",
+                                  model: "brand",
+                                  onChange,
+                                  value
+                                }
+                              }
+                            ),
+                            label: "Brand"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__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 FormOrganizationCampaignPageEdit = ({
+  disabled,
+  onError,
+  onSuccess,
+  onUpdate,
+  organization,
+  values = {}
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const methods = useForm({
+    resolver: resolver(
+      yup.object({
+        ...schemas.style(),
+        ...schemas.page(),
+        description: yup.string().label("Description").nullable().max(300),
+        gallery: yup.array().label("Gallery").of(
+          yup.mixed().file().label("File").required().nullable()
+        ),
+        headline: yup.string().label("Headline").required().max(150),
+        images: yup.object({
+          logo: yup.mixed().file().nullable(),
+          preview: yup.mixed().file().nullable()
+        }),
+        slug: yup.string().label("Slug").required().min(5).max(15),
+        status: yup.string().label("Status").required().oneOf(app.enums.page.status.enum)
+      })
+    ),
+    values: {
+      ...values,
+      headline: (values == null ? void 0 : values.headline) === constants.page.headline ? "" : (values == null ? void 0 : values.headline) ?? ""
+    }
+  });
+  const { control, handleSubmit, formState, getValues, reset } = methods;
+  const onSubmit = async ({
+    description,
+    gallery,
+    headline,
+    images: {
+      logo,
+      preview
+    },
+    links,
+    status,
+    style,
+    title
+  }) => {
+    try {
+      const args = {
+        body: {
+          description,
+          headline,
+          gallery: gallery.map(({ id }) => id),
+          images: {
+            logo: logo == null ? void 0 : logo.id,
+            preview: preview == null ? void 0 : preview.id
+          },
+          links,
+          status,
+          style,
+          title
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/campaign/" + (values == null ? void 0 : values.campaign) + "/page/" + values.id,
+        method: "PUT"
+      };
+      const response = await request(args);
+      reset(getValues());
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  const errors = [
+    ((_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.title) || ((_b = formState == null ? void 0 : formState.errors) == null ? void 0 : _b.slug) || ((_c = formState == null ? void 0 : formState.errors) == null ? void 0 : _c.headline),
+    ((_d = formState == null ? void 0 : formState.errors) == null ? void 0 : _d.gallery) || ((_e = formState == null ? void 0 : formState.errors) == null ? void 0 : _e.images),
+    (_f = formState == null ? void 0 : formState.errors) == null ? void 0 : _f.integrations
+  ];
+  return /* @__PURE__ */ jsx(
+    FormProvider,
+    {
+      ...methods,
+      children: /* @__PURE__ */ jsxs(
+        Form,
+        {
+          ...{
+            className: "relative w-full space-y-6",
+            onSubmit: handleSubmit(onSubmit)
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Accordion,
+              {
+                ...{
+                  ...props,
+                  error: errors == null ? void 0 : errors[0],
+                  open: true,
+                  title: "Details"
+                },
+                children: /* @__PURE__ */ jsxs(
+                  Fieldset,
+                  {
+                    ...{
+                      disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Controller,
+                        {
+                          ...{
+                            control,
+                            defaultValue: "active",
+                            name: "status",
+                            render: ({ field: { value, onChange } }) => {
+                              var _a2, _b2;
+                              return /* @__PURE__ */ jsx(
+                                InputGroup,
+                                {
+                                  ...{
+                                    "data-guide": "form-input-status",
+                                    error: (_b2 = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.status) == null ? void 0 : _b2.message,
+                                    input: /* @__PURE__ */ jsx(
+                                      InputSwitch,
+                                      {
+                                        ...{
+                                          helper: Boolean(value === "published") ? "published" : "drafted",
+                                          onChange: (active) => onChange(active ? "published" : "drafted"),
+                                          value: Boolean(value === "published")
+                                        }
+                                      }
+                                    ),
+                                    label: "Status"
+                                  }
+                                }
+                              );
+                            }
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        InputFieldsPage,
+                        {
+                          ...{
+                            onUpdate: () => onUpdate(getValues())
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        InputFieldsDetails,
+                        {
+                          ...{
+                            onUpdate,
+                            organization
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Accordion,
+              {
+                ...{
+                  ...props,
+                  error: errors == null ? void 0 : errors[1],
+                  title: "Media"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Fieldset,
+                  {
+                    ...{
+                      disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      InputFieldsMedia,
+                      {
+                        ...{
+                          onUpdate,
+                          organization,
+                          values
+                        }
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Accordion,
+              {
+                ...{
+                  ...props,
+                  error: errors == null ? void 0 : errors[2],
+                  title: "Style"
+                },
+                children: /* @__PURE__ */ jsx(
+                  InputFieldsStyle,
+                  {
+                    ...{
+                      disabled: disabled || (formState == null ? void 0 : formState.isSubmitting),
+                      onUpdate
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Fieldset,
+              {
+                ...{
+                  className: "pt-6",
+                  disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+                },
+                children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ...{
+                      loading: formState == null ? void 0 : formState.isSubmitting,
+                      type: "submit"
+                    },
+                    children: (values == null ? void 0 : values.id) ? "Save" : "Create"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  FormOrganizationCampaignPage,
+  FormOrganizationCampaignPageEdit
+};