feature/IO-3357-Reynolds-and-Reynolds-DMS-API-Integration / RRScratch2 / Polish

client/src/components/dms-allocations-summary/dms-allocations-summary.component.jsx

@@ -24,10 +24,11 @@ export default connect(mapStateToProps, mapDispatchToProps)(DmsAllocationsSummar
  * @param bodyshop
  * @param jobId
  * @param title
+ * @param minHeight
  * @returns {JSX.Element}
  * @constructor
  */
-export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title }) {
+export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title, minHeight }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
 
@@ -97,6 +98,8 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title })
 
   return (
     <Card
+      style={minHeight ? { minHeight } : undefined}
+      className="dms-summary-card"
       title={title}
       extra={
         <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>
@@ -124,12 +127,14 @@ export function DmsAllocationsSummary({ mode, socket, bodyshop, jobId, title })
             { totalSale: Dinero(), totalCost: Dinero() }
           ) || { totalSale: Dinero(), totalCost: Dinero() };
 
+          const hasNonZeroSaleTotal = totals.totalSale.getAmount() !== 0;
+
           return (
             <Table.Summary.Row>
               <Table.Summary.Cell>
                 <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
               </Table.Summary.Cell>
-              <Table.Summary.Cell>{totals.totalSale.toFormat()}</Table.Summary.Cell>
+              <Table.Summary.Cell>{hasNonZeroSaleTotal ? totals.totalSale.toFormat() : null}</Table.Summary.Cell>
               <Table.Summary.Cell />
               <Table.Summary.Cell />
               <Table.Summary.Cell />

client/src/components/dms-allocations-summary/rr-dms-allocations-summary.component.jsx

@@ -50,7 +50,7 @@ function normalizeJobAllocations(ack) {
  * is now done on the backend via buildRogogFromAllocations/buildRolaborFromRogog.
  * This component just renders the preview from `ack.rogg` / `ack.rolabor`.
  */
-export function RrAllocationsSummary({ socket, bodyshop, jobId, title }) {
+export function RrAllocationsSummary({ socket, bodyshop, jobId, title, minHeight }) {
   const { t } = useTranslation();
   const [roggPreview, setRoggPreview] = useState(null);
   const [rolaborPreview, setRolaborPreview] = useState(null);
@@ -234,21 +234,26 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title }) {
               }
               return "";
             }}
-            summary={() => (
-              <Table.Summary.Row>
-                <Table.Summary.Cell index={0}>
-                  <Typography.Title level={5}>{t("general.labels.totals")}</Typography.Title>
-                </Table.Summary.Cell>
-                <Table.Summary.Cell index={1} />
-                <Table.Summary.Cell index={2} />
-                <Table.Summary.Cell index={3} />
-                <Table.Summary.Cell index={4} />
-                <Table.Summary.Cell index={5} />
-                <Table.Summary.Cell index={6} />
-                <Table.Summary.Cell index={7}>{roggTotals.totalCustPrice}</Table.Summary.Cell>
-                <Table.Summary.Cell index={8}>{roggTotals.totalDlrCost}</Table.Summary.Cell>
-              </Table.Summary.Row>
-            )}
+            summary={() => {
+              const hasCustTotal = Number(roggTotals.totalCustPrice) !== 0;
+              const hasCostTotal = Number(roggTotals.totalDlrCost) !== 0;
+
+              return (
+                <Table.Summary.Row>
+                  <Table.Summary.Cell index={0}>
+                    <Typography.Title level={5}>{t("general.labels.totals")}</Typography.Title>
+                  </Table.Summary.Cell>
+                  <Table.Summary.Cell index={1} />
+                  <Table.Summary.Cell index={2} />
+                  <Table.Summary.Cell index={3} />
+                  <Table.Summary.Cell index={4} />
+                  <Table.Summary.Cell index={5} />
+                  <Table.Summary.Cell index={6} />
+                  <Table.Summary.Cell index={7}>{hasCustTotal ? roggTotals.totalCustPrice : null}</Table.Summary.Cell>
+                  <Table.Summary.Cell index={8}>{hasCostTotal ? roggTotals.totalDlrCost : null}</Table.Summary.Cell>
+                </Table.Summary.Row>
+              );
+            }}
           />
         </>
       )
@@ -276,6 +281,8 @@ export function RrAllocationsSummary({ socket, bodyshop, jobId, title }) {
 
   return (
     <Card
+      style={minHeight ? { minHeight } : undefined}
+      className="dms-summary-card"
       title={title}
       extra={
         <Button onClick={fetchAllocations} aria-label={t("general.actions.refresh")}>

client/src/components/dms-post-form/cdklike-dms-post-form.jsx

@@ -38,10 +38,11 @@ import { DMS_MAP } from "../../utils/dmsUtils";
  * @param job
  * @param logsRef
  * @param mode
+ * @param minHeight
  * @returns {JSX.Element}
  * @constructor
  */
-export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode }) {
+export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode, minHeight }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const [, /*unused*/ setTick] = useState(0); // handy if you need a forceUpdate later
@@ -122,7 +123,11 @@ export default function CdkLikePostForm({ bodyshop, socket, job, logsRef, mode }
     : { totalSale: Dinero(), totalCost: Dinero() };
 
   return (
-    <Card title={t("jobs.labels.dms.postingform")}>
+    <Card
+      className="dms-summary-card"
+      style={minHeight ? { minHeight } : undefined}
+      title={t("jobs.labels.dms.postingform")}
+    >
       <Form
         form={form}
         layout="vertical"

client/src/components/dms-post-form/rr-dms-post-form.jsx

@@ -26,10 +26,11 @@ import dayjs from "../../utils/day";
  * @param socket
  * @param job
  * @param logsRef
+ * @param minHeight
  * @returns {JSX.Element}
  * @constructor
  */
-export default function RRPostForm({ bodyshop, socket, job, logsRef }) {
+export default function RRPostForm({ bodyshop, socket, job, logsRef, minHeight }) {
   const [form] = Form.useForm();
   const { t } = useTranslation();
 
@@ -125,7 +126,11 @@ export default function RRPostForm({ bodyshop, socket, job, logsRef }) {
     : { totalSale: Dinero(), totalCost: Dinero() };
 
   return (
-    <Card title={t("jobs.labels.dms.postingform")}>
+    <Card
+      style={minHeight ? { minHeight } : undefined}
+      className="dms-summary-card"
+      title={t("jobs.labels.dms.postingform")}
+    >
       <Form
         form={form}
         layout="vertical"

client/src/pages/dms/dms.container.jsx

@@ -38,6 +38,8 @@ const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
 });
 
+const SUMMARY_MIN_HEIGHT = 545;
+
 export default connect(mapStateToProps, mapDispatchToProps)(DmsContainer);
 
 const DMS_SOCKET_EVENTS = {
@@ -390,6 +392,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
         <Col md={24} lg={10}>
           {!isRrMode ? (
             <DmsAllocationsSummary
+              minHeight={SUMMARY_MIN_HEIGHT}
               key={resetKey}
               title={
                 <span>
@@ -407,6 +410,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
             />
           ) : (
             <RrAllocationsSummary
+              minHeight={SUMMARY_MIN_HEIGHT}
               key={resetKey}
               title={
                 <span>
@@ -425,7 +429,14 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
         </Col>
 
         <Col md={24} lg={14}>
-          <DmsPostForm key={resetKey} socket={activeSocket} job={data?.jobs_by_pk} logsRef={logsRef} mode={mode} />
+          <DmsPostForm
+            minHeight={SUMMARY_MIN_HEIGHT}
+            key={resetKey}
+            socket={activeSocket}
+            job={data?.jobs_by_pk}
+            logsRef={logsRef}
+            mode={mode}
+          />
         </Col>
 
         <DmsCustomerSelector