feature/IO-3624-Shop-Config-UX-Refresh - DMS Sections

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

@@ -400,10 +400,13 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
           ]}
         </LayoutFormRow>
         {hasDMSKey && (
-          <>
+          <LayoutFormRow header={t("bodyshop.labels.dms_setup")} id="dms_setup">
+            <div>
               <LayoutFormRow id="dmsconfiguration" grow={true}>
                 {bodyshop.rr_dealerid && (
-                <DataLabel label={t("bodyshop.labels.dms.rr_dealerid")}>{form.getFieldValue("rr_dealerid")}</DataLabel>
+                  <DataLabel label={t("bodyshop.labels.dms.rr_dealerid")}>
+                    {form.getFieldValue("rr_dealerid")}
+                  </DataLabel>
                 )}
                 {bodyshop.cdk_dealerid && (
                   <DataLabel label={t("bodyshop.labels.dms.cdk_dealerid")}>
@@ -645,7 +648,8 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                   </LayoutFormRow>
                 </>
               )}
-          </>
+            </div>
+          </LayoutFormRow>
         )}
         {HasFeatureAccess({ featureName: "export", bodyshop }) && (
           <>
@@ -919,10 +923,33 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                     {(fields, { add, remove }) => {
                       return (
                         <div>
-                          {fields.map((field, index) => (
+                          {fields.map((field, index) => {
+                            const dmsDefault = form.getFieldValue([
+                              "md_responsibility_centers",
+                              "dms_defaults",
+                              field.name
+                            ]) || { name: undefined };
+
+                            return (
                               <Form.Item key={field.key}>
+                                <LayoutFormRow
+                                  title={getFormListItemTitle(
+                                    t("bodyshop.fields.dms.mappingname"),
+                                    index,
+                                    dmsDefault.name
+                                  )}
+                                  extra={
+                                    <Button
+                                      type="text"
+                                      icon={<DeleteFilled />}
+                                      onClick={() => {
+                                        remove(field.name);
+                                      }}
+                                    />
+                                  }
+                                >
                                   <div>
-                                <LayoutFormRow id="mappingname" noDivider={index > 0 ? false : true}>
+                                    <LayoutFormRow noDivider>
                                       <Form.Item
                                         label={t("bodyshop.fields.dms.mappingname")}
                                         key={`${index}name`}
@@ -937,13 +964,8 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                       >
                                         <Input />
                                       </Form.Item>
-                                  <DeleteFilled
-                                    onClick={() => {
-                                      remove(field.name);
-                                    }}
-                                  />
                                     </LayoutFormRow>
-                                <LayoutFormRow header={t("bodyshop.labels.dms.costsmapping")} id="costsmapping">
+                                    <LayoutFormRow header={t("bodyshop.labels.dms.costsmapping")}>
                                       <Form.Item
                                         label={t("bodyshop.fields.responsibilitycenters.ats")}
                                         rules={[
@@ -1554,7 +1576,7 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                         />
                                       </Form.Item>
                                     </LayoutFormRow>
-                                <LayoutFormRow header={t("bodyshop.labels.dms.profitsmapping")} id="profitsmapping">
+                                    <LayoutFormRow header={t("bodyshop.labels.dms.profitsmapping")}>
                                       <Form.Item
                                         label={t("bodyshop.fields.responsibilitycenters.ats")}
                                         rules={[
@@ -2166,8 +2188,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                                       </Form.Item>
                                     </LayoutFormRow>
                                   </div>
+                                </LayoutFormRow>
                               </Form.Item>
-                          ))}
+                            );
+                          })}
                           <Form.Item>
                             <Button
                               type="dashed"
@@ -3434,9 +3458,31 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                 {(fields, { add, remove }) => {
                   return (
                     <div>
-                      {fields.map((field, index) => (
+                      {fields.map((field, index) => {
+                        const salesTaxCode =
+                          form.getFieldValue(["md_responsibility_centers", "sales_tax_codes", field.name]) || {};
+
+                        return (
                           <Form.Item key={field.key}>
-                          <LayoutFormRow id="sales_tax_codes" noDivider={index > 0 ? false : true}>
+                            <LayoutFormRow
+                              id="sales_tax_codes"
+                              noDivider
+                              title={getFormListItemTitle(
+                                t("bodyshop.fields.responsibilitycenters.sales_tax_codes.description"),
+                                index,
+                                salesTaxCode.description,
+                                salesTaxCode.code
+                              )}
+                              extra={
+                                <Button
+                                  type="text"
+                                  icon={<DeleteFilled />}
+                                  onClick={() => {
+                                    remove(field.name);
+                                  }}
+                                />
+                              }
+                            >
                               <Form.Item
                                 label={t("bodyshop.fields.responsibilitycenters.sales_tax_codes.description")}
                                 key={`${index}description`}
@@ -3477,14 +3523,10 @@ export function ShopInfoResponsibilityCenterComponent({ bodyshop, form }) {
                               >
                                 <Switch />
                               </Form.Item>
-                            <DeleteFilled
-                              onClick={() => {
-                                remove(field.name);
-                              }}
-                            />
                             </LayoutFormRow>
                           </Form.Item>
-                      ))}
+                        );
+                      })}
                       <Form.Item>
                         <Button
                           type="dashed"

client/src/translations/en_us/common.json

@@ -723,6 +723,7 @@
         "customtemplates": "Custom Templates",
         "defaultcostsmapping": "Default Costs Mapping",
         "defaultprofitsmapping": "Default Profits Mapping",
+        "dms_setup": "DMS Setup",
         "deliverchecklist": "Delivery Checklist",
         "dms": {
           "cdk": {

client/src/translations/es/common.json

@@ -723,6 +723,7 @@
         "customtemplates": "",
         "defaultcostsmapping": "",
         "defaultprofitsmapping": "",
+        "dms_setup": "",
         "deliverchecklist": "",
         "dms": {
           "cdk": {

client/src/translations/fr/common.json

@@ -723,6 +723,7 @@
         "customtemplates": "",
         "defaultcostsmapping": "",
         "defaultprofitsmapping": "",
+        "dms_setup": "",
         "deliverchecklist": "",
         "dms": {
           "cdk": {