umwd-components 0.1.716 → 0.1.718

package/src/components/logistics/vendor/AddVendorForm.tsx

@@ -1,267 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import { SubmitButton } from "../../SubmitButton";
-import { useFormState } from "react-dom";
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-import { createVendorAction } from "../../../data/actions/logistics/vendor/createVendorAction";
-import Grid from "@mui/material/Grid";
-import { BusinessCredentialsFields } from "../../../components/e-commerce/customer/BusinessCredentials";
-import { AddressFields } from "../../../components/common/Address";
-import { ProductName } from "../../../types/e-commerce/product/types";
-import ProductSelector from "../../../components/e-commerce/products/ProductSelector";
-import { ContactsFields } from "../../../components/common/Contacts";
-import AddIcon from "@mui/icons-material/Add";
-import { SxProps } from "@mui/system";
-import {
-  ContactsFieldsProps,
-  ContactType,
-} from "../../../types/common/Contact";
-import { ExplanatoryFoldOut } from "../../../components/ExplanatoryFoldOut";
-import { Paper } from "@mui/material";
-import { Card } from "@mui/material";
-
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null,
-};
-
-interface AddVendorFormProps {
-  productNamesArr: ProductName[];
-  revalidateCallback?: () => void;
-  handleClose?: () => void;
-  sx?: SxProps;
-}
-
-export function AddVendorForm({
-  productNamesArr,
-  revalidateCallback,
-  handleClose,
-  sx,
-}: AddVendorFormProps) {
-  const [formState, formAction] = useFormState(
-    createVendorAction,
-    INITIAL_STATE
-  );
-  const { handleAddMessage } = useSnackbar();
-  const [newContacts, setNewContacts] = useState<ContactsFieldsProps[]>([]);
-
-  const handleDeleteContact = (index: number) => {
-    const newContactsArr = newContacts.filter((_, i) => i !== index);
-    setNewContacts(newContactsArr);
-  };
-
-  useEffect(() => {
-    if (formState?.message) {
-      handleAddMessage({
-        message: formState.message,
-        severity: formState.severity || "error",
-      });
-
-      if (formState.severity === "success") {
-        revalidateCallback && revalidateCallback();
-        handleClose && handleClose();
-      }
-    }
-  }, [formState?.message]);
-
-  useEffect(() => {
-    if (formState?.strapiErrors) {
-      handleAddMessage({
-        message: formState.strapiErrors.message || "Error creating vendor",
-        severity: "error",
-      });
-    }
-  }, [formState?.strapiErrors]);
-
-  return (
-    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      <form action={formAction}>
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <Stack spacing={2}>
-              <Typography variant="h3" component="h1">
-                Add Vendor
-              </Typography>
-              <Typography variant="body1">
-                Create a new vendor for your business
-              </Typography>
-            </Stack>
-          </Grid>
-          <Grid item xs={12}>
-            <ExplanatoryFoldOut
-              title="Vendor"
-              description="Vendors are businesses that you purchase products from."
-            />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <BusinessCredentialsFields
-              componentName="business_credentials"
-              componentReference="common.business-credentials"
-            />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <Stack spacing={1} sx={{ pt: 1 }}>
-              <TextField
-                id="website_url"
-                name="website_url"
-                label="Website Url"
-                // error={}
-                // helperText={}
-              />
-              <TextField
-                id="phone_number"
-                name="phone_number"
-                label="Phone Number"
-                // error={}
-                // helperText={}
-              />
-              <TextField
-                id="email"
-                name="email"
-                label="Email"
-                // error={}
-                // helperText={}
-              />
-            </Stack>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <Typography variant="h6">Address</Typography>
-            <AddressFields
-              componentName="address"
-              componentReference="common.address"
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <Typography variant="h6">Products</Typography>
-          </Grid>
-          <Grid item xs={12}>
-            <ProductSelector productNames={productNamesArr} currentValue={[]} />
-          </Grid>
-          <Grid item xs={12}>
-            <Typography variant="h6">Contacts</Typography>
-          </Grid>
-
-          {newContacts.map((contact, index) => {
-            return (
-              <Grid
-                item
-                xs={12}
-                sm={6}
-                md={4}
-                lg={3}
-                key={index}
-                sx={{
-                  justifyContent: "center",
-                  display: "flex",
-                  alignItems: "center",
-                }}
-              >
-                <Paper
-                  sx={{
-                    p: 2,
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "100%",
-                  }}
-                >
-                  <ContactsFields
-                    key={index}
-                    data={contact.data}
-                    componentName={contact.componentName}
-                    componentReference="logistics-elements.contact"
-                    deleteCallback={() => {
-                      handleDeleteContact(index);
-                    }}
-                  />
-                </Paper>
-              </Grid>
-            );
-          })}
-
-          <Grid
-            item
-            xs={12}
-            sm={6}
-            md={4}
-            lg={3}
-            sx={{
-              justifyContent: "center",
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            <Paper
-              sx={{
-                p: 2,
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-              }}
-            >
-              <Button
-                variant={"contained"}
-                startIcon={<AddIcon />}
-                onClick={() => {
-                  setNewContacts([
-                    ...newContacts,
-                    {
-                      componentName: `contacts[${newContacts.length}]`,
-                      componentReference: "logistics-elements.contact",
-                      data: {
-                        first_name: "",
-                        last_name: "",
-                        email: "",
-                        phone_number: "",
-                        type: ContactType.Other,
-                      },
-                    },
-                  ]);
-                }}
-                size="large"
-              >
-                Add contact
-              </Button>
-            </Paper>
-          </Grid>
-
-          <Grid item xs={12}>
-            <Stack
-              direction="row"
-              spacing={2}
-              justifyContent="space-between"
-              alignItems="center"
-            >
-              {handleClose && (
-                <Button onClick={handleClose} variant="outlined">
-                  Cancel
-                </Button>
-              )}
-              <SubmitButton
-                text="Create Vendor"
-                loadingText="Creating..."
-                variant="contained"
-              />
-            </Stack>
-          </Grid>
-        </Grid>
-      </form>
-    </Box>
-  );
-}
-
-{
-  /* TODO, add and create contactFields, <ContactFields componentName="contacts" componentsReference="logistics-elements.contact"/> */
-}

package/src/components/logistics/vendor/EditVendorForm.tsx

@@ -1,414 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import { SubmitButton } from "../../SubmitButton";
-import { useFormState } from "react-dom";
-import { useSnackbar } from "../../../context/common/SnackbarContext";
-import { updateVendorAction } from "../../../data/actions/logistics/vendor/updateVendorAction";
-import Grid from "@mui/material/Grid";
-import { Vendor } from "../../../types/logistics/Vendor";
-import { BusinessCredentialsFields } from "../../../components/e-commerce/customer/BusinessCredentials";
-import { AddressFields } from "../../../components/common/Address";
-import { ProductName } from "../../../types/e-commerce/product/types";
-import ProductSelector from "../../../components/e-commerce/products/ProductSelector";
-import Contacts, { ContactsFields } from "../../../components/common/Contacts";
-import IconButton from "@mui/material/IconButton";
-import AddIcon from "@mui/icons-material/Add";
-import {
-  ContactsFieldsProps,
-  ContactType,
-} from "../../../types/common/Contact";
-import { SxProps } from "@mui/material/styles";
-import { ExplanatoryFoldOut } from "../../../components/ExplanatoryFoldOut";
-import NoteTakingComponent from "../note/NoteTakingComponent";
-import NotesDisplay from "../note/NotesDisplay";
-
-const INITIAL_STATE = {
-  zodErrors: null,
-  strapiErrors: null,
-  data: null,
-  message: null,
-  severity: null as "success" | "error" | "info" | "warning" | null,
-};
-
-interface EditVendorFormProps {
-  data: Vendor;
-  productNamesArr: ProductName[];
-  revalidateCallback?: () => void;
-  handleClose?: () => void;
-  sx?: SxProps;
-}
-
-export function EditVendorForm({
-  data,
-  productNamesArr,
-  revalidateCallback,
-  handleClose,
-  sx,
-}: EditVendorFormProps) {
-  const {
-    id,
-    website_url,
-    phone_number,
-    email,
-    business_credentials,
-    address,
-    products,
-    contacts,
-    notes,
-  } = data;
-  console.log("data", data);
-
-  const [formState, formAction] = useFormState(
-    updateVendorAction,
-    INITIAL_STATE
-  );
-  const { handleAddMessage } = useSnackbar();
-
-  useEffect(() => {
-    if (formState?.message) {
-      handleAddMessage({
-        message: formState.message,
-        severity: formState.severity || "error",
-      });
-
-      if (formState.severity === "success") {
-        revalidateCallback && revalidateCallback();
-        handleClose && handleClose();
-      }
-    }
-  }, [formState?.message]);
-
-  useEffect(() => {
-    if (formState?.strapiErrors) {
-      handleAddMessage({
-        message: formState.strapiErrors.message || "Error updating vendor",
-        severity: "error",
-      });
-    }
-  }, [formState?.strapiErrors]);
-
-  const initialProducts = products?.data || [];
-
-  const [open, setOpen] = useState<Number[]>([]);
-
-  const onClickHandler = (event: React.MouseEvent<unknown>, id: number) => {
-    if (open.includes(id)) {
-      setOpen(open.filter((openId) => openId !== id));
-    } else {
-      setOpen([...open, id]);
-    }
-  };
-
-  const [oldContacts, setOldContacts] = useState<ContactsFieldsProps[]>(
-    contacts.reduce((acc: ContactsFieldsProps[], contact, index) => {
-      acc.push({
-        componentName: `contacts[${index}]`,
-        componentReference: "logistics-elements.contact",
-        data: contact,
-      });
-      return acc;
-    }, [])
-  );
-
-  // INFO must utilize the uuid to ensure that the new contacts are unique
-  // this is important to use both the deleteCallback and still not have problems with the key
-  const [newContacts, setNewContacts] = useState<ContactsFieldsProps[]>([]);
-
-  return (
-    <Box sx={[...(Array.isArray(sx) ? sx : [sx])]}>
-      <form action={formAction}>
-        {id && <input id="id" type="hidden" name="id" value={id} />}
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <Stack direction="row" justifyContent={"space-between"}>
-              <Typography variant="h5">Edit Vendor</Typography>
-              <NoteTakingComponent
-                content=""
-                related={[
-                  { id: data.id, __type: "api::logistics.vendor-profile" },
-                ]}
-                revalidateCallback={revalidateCallback}
-              />
-            </Stack>
-          </Grid>
-          <Grid item xs={12}>
-            <ExplanatoryFoldOut
-              title="Vendor"
-              description="Vendors are businesses that you purchase products from."
-            />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <BusinessCredentialsFields
-              data={business_credentials}
-              componentName="business_credentials"
-              componentReference="common.business-credentials"
-            />
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <Stack spacing={2}>
-              <TextField
-                id="website_url"
-                name="website_url"
-                label="Website Url"
-                defaultValue={website_url}
-                // error={}
-                // helperText={}
-              />
-              <TextField
-                id="phone_number"
-                name="phone_number"
-                label="Phone Number"
-                defaultValue={phone_number}
-                // error={}
-                // helperText={}
-              />
-              <TextField
-                id="email"
-                name="email"
-                label="Email"
-                defaultValue={email}
-                // error={}
-                // helperText={}
-              />
-            </Stack>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <Typography variant="h6">Address</Typography>
-            <AddressFields
-              data={address}
-              componentName="address"
-              componentReference="common.address"
-            />
-          </Grid>
-          <Grid item xs={12} sx={{ mt: 1 }}>
-            <Typography variant="h6">Products</Typography>
-            <ProductSelector
-              productNames={productNamesArr}
-              currentValue={initialProducts.map((prod) => prod.id)}
-            />
-          </Grid>
-          <Grid item xs={12} sx={{ mt: 1 }}>
-            <Typography variant="h6">Contacts</Typography>
-          </Grid>
-          {oldContacts?.map((contact, index) => {
-            if (contact.data?.id) {
-              if (open.includes(contact.data?.id)) {
-                return (
-                  <Grid
-                    item
-                    xs={12}
-                    sm={6}
-                    md={4}
-                    lg={3}
-                    sx={{
-                      justifyContent: "center",
-                      display: "flex",
-                      alignItems: "center",
-                    }}
-                    key={contact.data.id}
-                  >
-                    <Paper
-                      sx={{
-                        p: 2,
-                        width: "100%",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        height: "100%",
-                      }}
-                    >
-                      <ContactsFields
-                        data={contact.data}
-                        componentName={`contacts[${index}]`}
-                        componentReference="logistics-elements.contact"
-                        deleteCallback={() => {
-                          setOldContacts(
-                            oldContacts.filter((_, i) => i !== index)
-                          );
-                          /* setOpen(
-                          open.filter((openId) => openId !== contact.data?.id)
-                        ); */
-                        }}
-                      />
-                    </Paper>
-                  </Grid>
-                );
-              } else {
-                return (
-                  <Grid
-                    item
-                    xs={12}
-                    sm={6}
-                    md={4}
-                    lg={3}
-                    sx={{
-                      justifyContent: "center",
-                      display: "flex",
-                      alignItems: "center",
-                    }}
-                    key={contact.data.id}
-                  >
-                    <Paper
-                      sx={{
-                        p: 2,
-                        width: "100%",
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        height: "100%",
-                      }}
-                    >
-                      <input
-                        type="hidden"
-                        name={`contacts[${index}].id`}
-                        value={contact.data.id}
-                      />
-                      <input
-                        type="hidden"
-                        name={`contacts[${index}].__component`}
-                        value="logistics-elements.contact"
-                      />
-                      <Contacts
-                        data={{ ...contact.data, onClick: onClickHandler }}
-                      />
-                    </Paper>
-                  </Grid>
-                );
-              }
-            }
-            return null;
-          })}
-          {newContacts.map((contact, index) => {
-            return (
-              <Grid
-                item
-                xs={12}
-                sm={6}
-                md={4}
-                lg={3}
-                sx={{
-                  justifyContent: "center",
-                  display: "flex",
-                  alignItems: "center",
-                }}
-                key={contact.data?.id || index}
-              >
-                <Paper
-                  sx={{
-                    p: 2,
-                    width: "100%",
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    height: "100%",
-                  }}
-                >
-                  <ContactsFields
-                    data={contact.data}
-                    componentName={contact.componentName}
-                    componentReference="logistics-elements.contact"
-                    deleteCallback={() => {
-                      setNewContacts(
-                        newContacts
-                          .filter((_, i) => i !== index)
-                          .map((_, i) => {
-                            return {
-                              ..._,
-                              componentName: `contacts[${
-                                i + oldContacts.length
-                              }]`,
-                            };
-                          })
-                      );
-                    }}
-                  />
-                </Paper>
-              </Grid>
-            );
-          })}
-          <Grid
-            item
-            xs={12}
-            sm={6}
-            md={4}
-            lg={3}
-            sx={{
-              justifyContent: "center",
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            <Paper
-              sx={{
-                p: 2,
-                width: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                height: "100%",
-              }}
-            >
-              <Button
-                variant={"contained"}
-                startIcon={<AddIcon />}
-                onClick={() => {
-                  setNewContacts([
-                    ...newContacts,
-                    {
-                      componentName: `contacts[${
-                        oldContacts.length + newContacts.length
-                      }]`,
-                      componentReference: "logistics-elements.contact",
-                      data: {
-                        uuid: Math.random(),
-                        first_name: "",
-                        last_name: "",
-                        email: "",
-                        phone_number: "",
-                        type: ContactType.Other,
-                      },
-                    },
-                  ]);
-                }}
-                size="large"
-              >
-                Add contact
-              </Button>
-            </Paper>
-          </Grid>
-          <Grid item xs={12}>
-            <Typography variant="h6">Notes</Typography>
-            {notes?.data !== undefined ? (
-              <NotesDisplay notes={notes.data} />
-            ) : (
-              <Typography>No notes to display</Typography>
-            )}
-          </Grid>{" "}
-          <Grid item xs={12}>
-            <Stack
-              direction="row"
-              spacing={2}
-              justifyContent="space-between"
-              alignItems="center"
-              sx={{ mt: 2 }}
-            >
-              {handleClose && (
-                <Button onClick={handleClose} variant="outlined">
-                  Cancel
-                </Button>
-              )}
-              <SubmitButton text="Update Vendor" loadingText="Updating..." />
-            </Stack>
-          </Grid>
-        </Grid>
-      </form>
-    </Box>
-  );
-}