IO-3624 Refine Rome responsibility center tax layout

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

@@ -1,4 +1,4 @@
-import { Collapse, Divider, Form, Input, InputNumber, Space, Switch } from "antd";
+import { Col, Collapse, Form, Input, InputNumber, Row, Switch } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -6,6 +6,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import { bodyshopHasDmsKey } from "../../utils/dmsUtils.js";
+import "./shop-info.responsibilitycenters.taxes.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -16,47 +17,96 @@ const mapDispatchToProps = () => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoResponsibilityCenters);
 
+const taxRootColProps = {
+  xs: 24,
+  sm: 12,
+  md: 8,
+  lg: { flex: "0 0 280px" },
+  xl: { flex: "0 0 240px" },
+  xxl: { flex: "0 0 300px" }
+};
+
+const taxTierFieldColProps = {
+  xs: 24,
+  sm: 12,
+  lg: 6
+};
+
 export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
   const { t } = useTranslation();
-  //Iteratively build the form items.
-  const formItems = [];
-  for (let tyCounter = 1; tyCounter <= 5; tyCounter++) {
-    const section = [];
+  const profileTaxCards = [];
+  for (let typeNum = 1; typeNum <= 5; typeNum++) {
+    const rootTaxItems = getRootTaxFormItems({ typeNum, bodyshop, t });
 
-    section.push(
-      TaxFormItems({
-        typeNum: tyCounter,
-        rootElements: true,
-        bodyshop
-      })
+    profileTaxCards.push(
+      <LayoutFormRow key={`profile-tax-type-${typeNum}`} header={t("bodyshop.labels.responsibilitycenters.tax_type_card", { typeNum })}>
+        <div style={{ display: "grid", rowGap: 12 }}>
+          <Row gutter={[16, 16]} wrap>
+            {rootTaxItems.map((item, index) => (
+              <Col key={item.key ?? `tax-root-${typeNum}-${index}`} {...taxRootColProps}>
+                {item}
+              </Col>
+            ))}
+          </Row>
+          <Row gutter={[12, 12]} wrap className="responsibility-centers-tax-tier-grid">
+            {Array.from({ length: 5 }, (_, index) => {
+              const typeNumIterator = index + 1;
+              const tierTaxItems = getTierTaxFormItems({
+                typeNum,
+                typeNumIterator,
+                t
+              });
+
+              return (
+                <Col
+                  key={`tax-tier-row-${typeNum}-${typeNumIterator}`}
+                  xs={24}
+                  className="responsibility-centers-tax-tier-grid__col"
+                >
+                  <LayoutFormRow
+                    header={t("bodyshop.labels.responsibilitycenters.tax_tier_card", { typeNumIterator })}
+                    style={{ marginBottom: 0 }}
+                    styles={{
+                      header: {
+                        paddingInline: 12
+                      },
+                      body: {
+                        padding: 12
+                      }
+                    }}
+                  >
+                    <Row gutter={[12, 8]} wrap>
+                      {tierTaxItems.map((item, tierIndex) => (
+                        <Col key={item.key ?? `tax-tier-${typeNum}-${typeNumIterator}-${tierIndex}`} {...taxTierFieldColProps}>
+                          {item}
+                        </Col>
+                      ))}
+                    </Row>
+                  </LayoutFormRow>
+                </Col>
+              );
+            })}
+          </Row>
+        </div>
+      </LayoutFormRow>
     );
-    for (let iterator = 1; iterator <= 5; iterator++) {
-      section.push(
-        TaxFormItems({
-          typeNum: tyCounter,
-          typeNumIterator: iterator,
-          rootElements: false
-        })
-      );
-    }
-    formItems.push(<Space wrap>{section}</Space>);
-    formItems.push(<Divider />);
   }
+
   return (
     <>
-      <Divider titlePlacement="left" orientation="horizontal" style={{ marginTop: ".8rem" }}>
-        {t("jobs.labels.cieca_pft")}
-      </Divider>
-      {formItems}
+      <LayoutFormRow header={t("jobs.labels.cieca_pft")}>
+        <div>{profileTaxCards}</div>
+      </LayoutFormRow>
 
-      <Collapse
-        items={[
-          {
-            key: "cieca_pfl",
-            label: t("jobs.labels.cieca_pfl"),
-            forceRender: true,
-            children: (
-              <>
+      <LayoutFormRow header={t("bodyshop.labels.responsibilitycenters.default_tax_setup")}>
+        <Collapse
+          items={[
+            {
+              key: "cieca_pfl",
+              label: t("jobs.labels.cieca_pfl"),
+              forceRender: true,
+              children: (
+                <>
                 <LayoutFormRow header={t("joblines.fields.lbr_types.LAB")}>
                   <Form.Item
                     label={t("jobs.fields.cieca_pfl.lbr_adjp")}
@@ -893,15 +943,15 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <Switch />
                   </Form.Item>
                 </LayoutFormRow>
-              </>
-            )
-          },
-          {
-            key: "cieca_pfo",
-            label: t("jobs.labels.cieca_pfo"),
-            forceRender: true,
-            children: (
-              <>
+                </>
+              )
+            },
+            {
+              key: "cieca_pfo",
+              label: t("jobs.labels.cieca_pfo"),
+              forceRender: true,
+              children: (
+                <>
                 <LayoutFormRow noDivider>
                   <Form.Item
                     label={t("jobs.fields.cieca_pfo.tow_t_in1")}
@@ -2145,76 +2195,74 @@ export function ShopInfoResponsibilityCenters({ bodyshop, form }) {
                     <InputNumber min={0} max={100} precision={4} />
                   </Form.Item>
                 </LayoutFormRow>
-              </>
-            )
-          }
-        ]}
-      />
+                </>
+              )
+            }
+          ]}
+        />
+      </LayoutFormRow>
     </>
   );
 }
 
-function TaxFormItems({ typeNum, typeNumIterator, rootElements, bodyshop }) {
-  const { t } = useTranslation();
-
-  if (rootElements)
-    return (
-      <>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_tax_type", {
-            typeNum,
-            typeNumIterator
-          })}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `tax_type${typeNum}`]}
-        >
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenters.state_tax")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "name"]}
-        >
-          <Input />
-        </Form.Item>
-
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountdesc"]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item
-          label={t("bodyshop.fields.responsibilitycenter_accountitem")}
-          rules={[
-            {
-              required: true
-              //message: t("general.validation.required"),
-            }
-          ]}
-          name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountitem"]}
-        >
-          <Input />
-        </Form.Item>
-        {bodyshopHasDmsKey(bodyshop) && (
+function getRootTaxFormItems({ typeNum, bodyshop, t }) {
+  return [
+    <Form.Item
+      key={`tax_type_${typeNum}_type`}
+      label={t("bodyshop.fields.responsibilitycenter_tax_type", { typeNum })}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `tax_type${typeNum}`]}
+    >
+      <Input />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_name`}
+      label={t("bodyshop.fields.responsibilitycenters.state_tax")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "name"]}
+    >
+      <Input />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_accountdesc`}
+      label={t("bodyshop.fields.responsibilitycenter_accountdesc")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountdesc"]}
+    >
+      <Input />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_accountitem`}
+      label={t("bodyshop.fields.responsibilitycenter_accountitem")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, "accountitem"]}
+    >
+      <Input />
+    </Form.Item>,
+    ...(bodyshopHasDmsKey(bodyshop)
+      ? [
           <Form.Item
+            key={`tax_type_${typeNum}_dms_acctnumber`}
             label={t("bodyshop.fields.dms.dms_acctnumber")}
             rules={[
               {
@@ -2226,71 +2274,64 @@ function TaxFormItems({ typeNum, typeNumIterator, rootElements, bodyshop }) {
           >
             <Input />
           </Form.Item>
-        )}
-      </>
-    );
-  return (
-    <>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_tier", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_tier${typeNumIterator}`]}
-      >
-        <InputNumber precision={0} min={0} />
-      </Form.Item>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_thres", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_thres${typeNumIterator}`]}
-      >
-        <InputNumber min={0} precision={2} />
-      </Form.Item>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_rate", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_rate${typeNumIterator}`]}
-      >
-        <InputNumber min={0} precision={2} />
-      </Form.Item>
-      <Form.Item
-        label={t("bodyshop.fields.responsibilitycenter_tax_sur", {
-          typeNum,
-          typeNumIterator
-        })}
-        rules={[
-          {
-            required: true
-            //message: t("general.validation.required"),
-          }
-        ]}
-        name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_sur${typeNumIterator}`]}
-      >
-        <InputNumber min={0} precision={2} />
-      </Form.Item>
-    </>
-  );
+        ]
+      : [])
+  ];
+}
+
+function getTierTaxFormItems({ typeNum, typeNumIterator, t }) {
+  return [
+    <Form.Item
+      key={`tax_type_${typeNum}_tier_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_tier_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_tier${typeNumIterator}`]}
+    >
+      <InputNumber precision={0} min={0} />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_threshold_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_threshold_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_thres${typeNumIterator}`]}
+    >
+      <InputNumber min={0} precision={2} />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_rate_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_rate_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_rate${typeNumIterator}`]}
+    >
+      <InputNumber min={0} precision={2} />
+    </Form.Item>,
+    <Form.Item
+      key={`tax_type_${typeNum}_surcharge_${typeNumIterator}`}
+      label={t("bodyshop.labels.responsibilitycenters.tax_surcharge_short")}
+      rules={[
+        {
+          required: true
+          //message: t("general.validation.required"),
+        }
+      ]}
+      name={["md_responsibility_centers", "taxes", `tax_ty${typeNum}`, `ty${typeNum}_sur${typeNumIterator}`]}
+    >
+      <InputNumber min={0} precision={2} />
+    </Form.Item>
+  ];
 }