IO-1858 Email Groupings

client/src/components/email-overlay/email-overlay.component.jsx

@@ -42,7 +42,12 @@ export function EmailOverlayComponent({
   const { t } = useTranslation();
   const handleClick = ({ item, key, keyPath }) => {
     const email = item.props.value;
-    form.setFieldsValue({ to: _.uniq([...form.getFieldValue("to"), email]) });
+    form.setFieldsValue({
+      to: _.uniq([
+        ...form.getFieldValue("to"),
+        ...(typeof email === "string" ? [email] : email),
+      ]),
+    });
   };
 
   const menu = (
@@ -55,6 +60,11 @@ export function EmailOverlayComponent({
               {`${e.first_name} ${e.last_name}`}
             </Menu.Item>
           ))}
+        {bodyshop.md_to_emails.map((e, idx) => (
+          <Menu.Item value={e.emails} key={idx + "group"}>
+            {e.label}
+          </Menu.Item>
+        ))}
       </Menu>
     </div>
   );

client/src/components/shop-info/shop-info.general.component.jsx

@@ -1393,6 +1393,60 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
+      <LayoutFormRow grow header={t("bodyshop.labels.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>
   );
 }