feature/IO-3255-simplified-parts-management - Add Shop / Vendor Configuration

client/src/components/parts-shop-info/parts-email-presets.component.jsx

@@ -0,0 +1,60 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { Button, Form, Input, Select, Space } from "antd";
+import { useTranslation } from "react-i18next";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
+export default function PartsEmailPresetsComponent({ form }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <LayoutFormRow grow header={t("bodyshop.labels.md_to_emails")} id="md_to_emails">
+        <Form.List name={["md_to_emails"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                {fields.map((field, index) => (
+                  <Form.Item key={field.key}>
+                    <LayoutFormRow noDivider>
+                      <Form.Item label={t("general.labels.label")} key={`${index}label`} name={[field.name, "label"]}>
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("bodyshop.labels.md_to_emails_emails")}
+                        key={`${index}emails`}
+                        name={[field.name, "emails"]}
+                      >
+                        <Select mode="tags" tokenSeparators={[",", ";"]} />
+                      </Form.Item>
+
+                      <Space>
+                        <DeleteFilled
+                          onClick={() => {
+                            remove(field.name);
+                          }}
+                        />
+                        <FormListMoveArrows move={move} index={index} total={fields.length} />
+                      </Space>
+                    </LayoutFormRow>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("general.actions.add")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </LayoutFormRow>
+    </div>
+  );
+}