From 1105431909fc2018d300d34340293a397124af56 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 28 Sep 2022 12:07:27 -0700
Subject: [PATCH] IO-2054 Improved spacing for QB Multi Payer

---
 .../pages/jobs-close/jobs-close.component.jsx | 294 +++++++++---------
 1 file changed, 151 insertions(+), 143 deletions(-)

diff --git a/client/src/pages/jobs-close/jobs-close.component.jsx b/client/src/pages/jobs-close/jobs-close.component.jsx
index 4f014a240..f7e6d3795 100644
--- a/client/src/pages/jobs-close/jobs-close.component.jsx
+++ b/client/src/pages/jobs-close/jobs-close.component.jsx
@@ -3,6 +3,7 @@ import { useApolloClient, useMutation } from "@apollo/client";
 import {
   Alert,
   Button,
+  Col,
   Divider,
   Form,
   Input,
@@ -10,6 +11,7 @@ import {
   notification,
   PageHeader,
   Popconfirm,
+  Row,
   Select,
   Space,
   Statistic,
@@ -329,156 +331,162 @@ export function JobsCloseComponent({ job, bodyshop, jobRO }) {
         </LayoutFormRow>
         <Divider>{t("jobs.labels.multipayers")}</Divider>
         {Qb_Multi_Ar.treatment === "on" && (
-          <Space>
-            <Form.List
-              name={["qb_multiple_payers"]}
-              rules={[
-                ({ getFieldValue }) => ({
-                  validator(_, value) {
-                    let totalAllocated = Dinero();
+          <Row gutter={[16, 16]}>
+            <Col lg={8} md={24}>
+              <Form.List
+                name={["qb_multiple_payers"]}
+                rules={[
+                  ({ getFieldValue }) => ({
+                    validator(_, value) {
+                      let totalAllocated = Dinero();
 
-                    const payers = form.getFieldValue("qb_multiple_payers");
-                    payers &&
-                      payers.forEach((payer) => {
-                        totalAllocated = totalAllocated.add(
-                          Dinero({
-                            amount: Math.round((payer?.amount || 0) * 100),
-                          })
-                        );
-                      });
-                    const discrep = job.job_totals
-                      ? Dinero(job.job_totals.totals.total_repairs).subtract(
-                          totalAllocated
-                        )
-                      : Dinero();
-                    return discrep.getAmount() > 0
-                      ? Promise.resolve()
-                      : Promise.reject(
-                          new Error(
-                            t("jobs.labels.additionalpayeroverallocation")
+                      const payers = form.getFieldValue("qb_multiple_payers");
+                      payers &&
+                        payers.forEach((payer) => {
+                          totalAllocated = totalAllocated.add(
+                            Dinero({
+                              amount: Math.round((payer?.amount || 0) * 100),
+                            })
+                          );
+                        });
+                      const discrep = job.job_totals
+                        ? Dinero(job.job_totals.totals.total_repairs).subtract(
+                            totalAllocated
                           )
-                        );
-                  },
-                }),
-              ]}
-            >
-              {(fields, { add, remove }) => {
-                return (
-                  <div>
-                    {fields.map((field, index) => (
-                      <Form.Item key={field.key}>
-                        <Space>
-                          <Form.Item
-                            label={t("jobs.fields.qb_multiple_payers.name")}
-                            key={`${index}name`}
-                            name={[field.name, "name"]}
-                            rules={[
-                              {
-                                required: true,
-                              },
-                            ]}
-                          >
-                            <Select
-                              style={{ minWidth: "12rem" }}
-                              disabled={jobRO}
+                        : Dinero();
+                      return discrep.getAmount() > 0
+                        ? Promise.resolve()
+                        : Promise.reject(
+                            new Error(
+                              t("jobs.labels.additionalpayeroverallocation")
+                            )
+                          );
+                    },
+                  }),
+                ]}
+              >
+                {(fields, { add, remove }) => {
+                  return (
+                    <div>
+                      {fields.map((field, index) => (
+                        <Form.Item key={field.key}>
+                          <Space>
+                            <Form.Item
+                              label={t("jobs.fields.qb_multiple_payers.name")}
+                              key={`${index}name`}
+                              name={[field.name, "name"]}
+                              rules={[
+                                {
+                                  required: true,
+                                },
+                              ]}
                             >
-                              {bodyshop.md_ins_cos.map((s) => (
-                                <Select.Option key={s.name} value={s.name}>
-                                  {s.name}
-                                </Select.Option>
-                              ))}
-                            </Select>
-                          </Form.Item>
+                              <Select
+                                style={{ minWidth: "12rem" }}
+                                disabled={jobRO}
+                              >
+                                {bodyshop.md_ins_cos.map((s) => (
+                                  <Select.Option key={s.name} value={s.name}>
+                                    {s.name}
+                                  </Select.Option>
+                                ))}
+                              </Select>
+                            </Form.Item>
 
-                          <Form.Item
-                            label={t("jobs.fields.qb_multiple_payers.amount")}
-                            key={`${index}amount`}
-                            name={[field.name, "amount"]}
-                            rules={[
-                              {
-                                required: true,
-                              },
-                            ]}
-                          >
-                            <CurrencyInput min={0} disabled={jobRO} />
-                          </Form.Item>
+                            <Form.Item
+                              label={t("jobs.fields.qb_multiple_payers.amount")}
+                              key={`${index}amount`}
+                              name={[field.name, "amount"]}
+                              rules={[
+                                {
+                                  required: true,
+                                },
+                              ]}
+                            >
+                              <CurrencyInput min={0} disabled={jobRO} />
+                            </Form.Item>
 
-                          <DeleteFilled
-                            disabled={jobRO}
-                            onClick={() => {
-                              remove(field.name);
-                            }}
-                          />
-                        </Space>
+                            <DeleteFilled
+                              disabled={jobRO}
+                              onClick={() => {
+                                remove(field.name);
+                              }}
+                            />
+                          </Space>
+                        </Form.Item>
+                      ))}
+                      <Form.Item>
+                        <Button
+                          disabled={jobRO}
+                          onClick={() => {
+                            add();
+                          }}
+                          style={{ width: "100%" }}
+                        >
+                          {t("jobs.actions.dms.addpayer")}
+                        </Button>
                       </Form.Item>
-                    ))}
-                    <Form.Item>
-                      <Button
-                        disabled={jobRO}
-                        onClick={() => {
-                          add();
-                        }}
-                        style={{ width: "100%" }}
-                      >
-                        {t("jobs.actions.dms.addpayer")}
-                      </Button>
-                    </Form.Item>
-                  </div>
-                );
-              }}
-            </Form.List>
-            <Form.Item shouldUpdate>
-              {() => {
-                //Perform Calculation to determine discrepancy.
-                let totalAllocated = Dinero();
+                    </div>
+                  );
+                }}
+              </Form.List>
+            </Col>
+            <Col lg={16} md={24}>
+              <Form.Item shouldUpdate>
+                {() => {
+                  //Perform Calculation to determine discrepancy.
+                  let totalAllocated = Dinero();
 
-                const payers = form.getFieldValue("qb_multiple_payers");
-                payers &&
-                  payers.forEach((payer) => {
-                    totalAllocated = totalAllocated.add(
-                      Dinero({ amount: Math.round((payer?.amount || 0) * 100) })
-                    );
-                  });
-                const discrep = job.job_totals
-                  ? Dinero(job.job_totals.totals.total_repairs).subtract(
-                      totalAllocated
-                    )
-                  : Dinero();
-                return (
-                  <Space size="large" wrap align="center">
-                    <Statistic
-                      title={t("jobs.labels.total_cust_payable")}
-                      value={(job.job_totals
-                        ? Dinero(job.job_totals.totals.custPayable)
-                        : Dinero()
-                      ).toFormat()}
-                    />
-                    <Divider orientation="vertical" />
-                    <Statistic
-                      title={t("jobs.labels.total_repairs")}
-                      value={(job.job_totals
-                        ? Dinero(job.job_totals.totals.total_repairs)
-                        : Dinero()
-                      ).toFormat()}
-                    />
-                    <Typography.Title>-</Typography.Title>
-                    <Statistic
-                      title={t("jobs.labels.dms.totalallocated")}
-                      value={totalAllocated.toFormat()}
-                    />
-                    <Typography.Title>=</Typography.Title>
-                    <Statistic
-                      title={t("jobs.labels.pimraryamountpayable")}
-                      valueStyle={{
-                        color: discrep.getAmount() > 0 ? "green" : "red",
-                      }}
-                      value={discrep.toFormat()}
-                    />
-                  </Space>
-                );
-              }}
-            </Form.Item>
-          </Space>
+                  const payers = form.getFieldValue("qb_multiple_payers");
+                  payers &&
+                    payers.forEach((payer) => {
+                      totalAllocated = totalAllocated.add(
+                        Dinero({
+                          amount: Math.round((payer?.amount || 0) * 100),
+                        })
+                      );
+                    });
+                  const discrep = job.job_totals
+                    ? Dinero(job.job_totals.totals.total_repairs).subtract(
+                        totalAllocated
+                      )
+                    : Dinero();
+                  return (
+                    <Space size="large" wrap align="center">
+                      <Statistic
+                        title={t("jobs.labels.total_cust_payable")}
+                        value={(job.job_totals
+                          ? Dinero(job.job_totals.totals.custPayable)
+                          : Dinero()
+                        ).toFormat()}
+                      />
+                      <Divider type="vertical" />
+                      <Statistic
+                        title={t("jobs.labels.total_repairs")}
+                        value={(job.job_totals
+                          ? Dinero(job.job_totals.totals.total_repairs)
+                          : Dinero()
+                        ).toFormat()}
+                      />
+                      <Typography.Title>-</Typography.Title>
+                      <Statistic
+                        title={t("jobs.labels.dms.totalallocated")}
+                        value={totalAllocated.toFormat()}
+                      />
+                      <Typography.Title>=</Typography.Title>
+                      <Statistic
+                        title={t("jobs.labels.pimraryamountpayable")}
+                        valueStyle={{
+                          color: discrep.getAmount() > 0 ? "green" : "red",
+                        }}
+                        value={discrep.toFormat()}
+                      />
+                    </Space>
+                  );
+                }}
+              </Form.Item>
+            </Col>
+          </Row>
         )}
         <Divider />
         <JobsCloseLines job={job} />