IO-1661 Add parts order comments presets.

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,4 +1,4 @@
-import { DeleteFilled, WarningFilled } from "@ant-design/icons";
+import { DeleteFilled, WarningFilled, DownOutlined } from "@ant-design/icons";
 import { useTreatments } from "@splitsoftware/splitio-react";
 import {
   Divider,
@@ -9,6 +9,8 @@ import {
   Space,
   Tag,
   Select,
+  Menu,
+  Dropdown,
 } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -39,6 +41,7 @@ export function PartsOrderModalComponent({
   isReturn,
   preferredMake,
   job,
+  form,
 }) {
   const [sendType, setSendType] = sendTypeState;
   const { OEConnection } = useTreatments(
@@ -52,6 +55,21 @@ export function PartsOrderModalComponent({
     bodyshop.imexshopid
   );
   const { t } = useTranslation();
+  const handleClick = ({ item, key, keyPath }) => {
+    form.setFieldsValue({ comments: item.props.value });
+  };
+
+  const menu = (
+    <div>
+      <Menu onClick={handleClick}>
+        {bodyshop.md_parts_order_comment.map((comment, idx) => (
+          <Menu.Item value={comment.comment} key={idx}>
+            {comment.label}
+          </Menu.Item>
+        ))}
+      </Menu>
+    </div>
+  );
 
   return (
     <div>
@@ -243,7 +261,23 @@ export function PartsOrderModalComponent({
           );
         }}
       </Form.List>
-      <Form.Item name="comments" label={t("parts_orders.fields.comments")}>
+      <Form.Item
+        name="comments"
+        label={
+          <Space>
+            {t("parts_orders.fields.comments")}
+            <Dropdown overlay={menu}>
+              <a
+                className="ant-dropdown-link"
+                href=" #"
+                onClick={(e) => e.preventDefault()}
+              >
+                <DownOutlined />
+              </a>
+            </Dropdown>
+          </Space>
+        }
+      >
         <Input.TextArea rows={3} />
       </Form.Item>
       <Radio.Group

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -346,6 +346,7 @@ export function PartsOrderModalContainer({
           <LoadingSpinner />
         ) : (
           <PartsOrderModalComponent
+            form={form}
             vendorList={(data && data.vendors) || []}
             sendTypeState={sendTypeState}
             isReturn={isReturn}

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

@@ -1311,6 +1311,72 @@ export default function ShopInfoGeneral({ form }) {
           }}
         </Form.List>
       </LayoutFormRow>
+      <LayoutFormRow grow header={t("bodyshop.fields.md_parts_order_comment")}>
+        <Form.List name={["md_parts_order_comment"]}>
+          {(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"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+                      <Form.Item
+                        label={t("parts_orders.fields.comments")}
+                        key={`${index}comment`}
+                        name={[field.name, "comment"]}
+                        rules={[
+                          {
+                            required: true,
+                            //message: t("general.validation.required"),
+                          },
+                        ]}
+                      >
+                        <Input />
+                      </Form.Item>
+
+                      <Space wrap>
+                        <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>
   );
 }