From 4f2856493d284de25272e1bb01dc8edf5054befa Mon Sep 17 00:00:00 2001
From: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
Date: Wed, 23 Nov 2022 14:23:34 -0600
Subject: [PATCH] Render race and ethnicities grouped by ethnicities in data
 entry publish confirmation page

---
 .../Reports/PublishConfirmation.styles.tsx    |  10 +-
 .../Reports/PublishConfirmation.tsx           | 118 ++++++++++++++----
 2 files changed, 103 insertions(+), 25 deletions(-)

diff --git a/publisher/src/components/Reports/PublishConfirmation.styles.tsx b/publisher/src/components/Reports/PublishConfirmation.styles.tsx
index 5652eca08..bed8fc362 100644
--- a/publisher/src/components/Reports/PublishConfirmation.styles.tsx
+++ b/publisher/src/components/Reports/PublishConfirmation.styles.tsx
@@ -20,7 +20,7 @@ import {
   palette,
   typography,
 } from "@justice-counts/common/components/GlobalStyles";
-import styled from "styled-components/macro";
+import styled, { css } from "styled-components/macro";
 
 import { Button } from "../DataUpload";
 import {
@@ -190,10 +190,16 @@ export const MetricDetailWrapper = styled.div<{ isExpanded: boolean }>`
   display: ${({ isExpanded }) => (isExpanded ? "block" : "none")};
 `;
 
-export const MetricSubTitleContainer = styled.div`
+export const MetricSubTitleContainer = styled.div<{ secondary?: boolean }>`
   ${typography.sizeCSS.small}
   margin-bottom: 16px;
   margin-top: 16px;
+  ${({ secondary }) =>
+    secondary &&
+    css`
+      color: ${palette.highlight.grey7};
+      margin-bottom: 8px;
+    `}
 `;
 
 export const Breakdown = styled.div<{ missing?: boolean }>`
diff --git a/publisher/src/components/Reports/PublishConfirmation.tsx b/publisher/src/components/Reports/PublishConfirmation.tsx
index 54dffd7fd..51bb206b1 100644
--- a/publisher/src/components/Reports/PublishConfirmation.tsx
+++ b/publisher/src/components/Reports/PublishConfirmation.tsx
@@ -18,6 +18,7 @@
 import { showToast } from "@justice-counts/common/components/Toast";
 import {
   MetricContextWithErrors,
+  MetricDisaggregationDimensions,
   MetricDisaggregationDimensionsWithErrors,
   MetricDisaggregationsWithErrors,
   MetricWithErrors,
@@ -33,6 +34,7 @@ import logoImg from "../assets/jc-logo-vector.png";
 import errorIcon from "../assets/status-error-icon.png";
 import { DataUploadHeader } from "../DataUpload";
 import { Logo, LogoContainer } from "../Header";
+import { RACE_ETHNICITY_DISAGGREGATION_KEY } from "../MetricConfiguration";
 import { Heading, Subheading } from "../ReviewMetrics/ReviewMetrics.styles";
 import {
   BreakdownErrorImg,
@@ -62,38 +64,108 @@ import {
   VerticalLine,
 } from "./PublishConfirmation.styles";
 
+const RaceEthnicitiesGroupedByEthnicity: React.FC<{
+  dimensions: MetricDisaggregationDimensions[] &
+    MetricDisaggregationDimensionsWithErrors[];
+}> = ({ dimensions }) => {
+  const dimensionsGroupedByEthnicity =
+    dimensions.reduce(
+      (acc, dimension) => {
+        if (dimension.ethnicity === "Hispanic") {
+          acc.Hispanic.push(dimension);
+        }
+        if (dimension.ethnicity === "Not Hispanic") {
+          acc["Not Hispanic"].push(dimension);
+        }
+        if (dimension.ethnicity === "Unknown Ethnicity") {
+          acc["Unknown Ethnicity"].push(dimension);
+        }
+        return acc;
+      },
+      {
+        Hispanic: [],
+        "Not Hispanic": [],
+        "Unknown Ethnicity": [],
+      } as { [key: string]: MetricDisaggregationDimensionsWithErrors[] }
+    ) || {};
+  const dimensionsGroupedByEthnicityEntries = Object.entries(
+    dimensionsGroupedByEthnicity
+  );
+
+  return (
+    <>
+      {dimensionsGroupedByEthnicityEntries.map(
+        ([ethnicity, groupedDimensions]) => (
+          <>
+            <MetricSubTitleContainer secondary>
+              {ethnicity}
+            </MetricSubTitleContainer>
+            <DisaggregationBreakdownContainer>
+              {groupedDimensions.map((dimension) => (
+                <DisaggregationBreakdown
+                  key={dimension.key}
+                  error={!!dimension.error}
+                >
+                  <BreakdownLabelContainer>
+                    <BreakdownLabel>{dimension.race}</BreakdownLabel>
+                    {!!dimension.error && (
+                      <BreakdownErrorImg src={errorIcon} alt="" />
+                    )}
+                  </BreakdownLabelContainer>
+                  <BreakdownValue
+                    missing={!dimension.value}
+                    error={!!dimension.error}
+                  >
+                    {dimension.value?.toLocaleString("en-US") || "--"}
+                  </BreakdownValue>
+                </DisaggregationBreakdown>
+              ))}
+            </DisaggregationBreakdownContainer>
+          </>
+        )
+      )}
+    </>
+  );
+};
+
 const Disaggregation: React.FC<{
   disaggregation: MetricDisaggregationsWithErrors;
 }> = ({ disaggregation }) => {
   const { display_name: displayName, dimensions } = disaggregation;
+
   return (
     <>
       <MetricSubTitleContainer>{displayName}</MetricSubTitleContainer>
-      <DisaggregationBreakdownContainer>
-        {dimensions.map(
-          (dimension: MetricDisaggregationDimensionsWithErrors) => {
-            return (
-              <DisaggregationBreakdown
-                key={dimension.key}
-                error={!!dimension.error}
-              >
-                <BreakdownLabelContainer>
-                  <BreakdownLabel>{dimension.label}</BreakdownLabel>
-                  {!!dimension.error && (
-                    <BreakdownErrorImg src={errorIcon} alt="" />
-                  )}
-                </BreakdownLabelContainer>
-                <BreakdownValue
-                  missing={!dimension.value}
+
+      {disaggregation.key === RACE_ETHNICITY_DISAGGREGATION_KEY ? (
+        <RaceEthnicitiesGroupedByEthnicity dimensions={dimensions} />
+      ) : (
+        <DisaggregationBreakdownContainer>
+          {dimensions.map(
+            (dimension: MetricDisaggregationDimensionsWithErrors) => {
+              return (
+                <DisaggregationBreakdown
+                  key={dimension.key}
                   error={!!dimension.error}
                 >
-                  {dimension.value?.toLocaleString("en-US") || "--"}
-                </BreakdownValue>
-              </DisaggregationBreakdown>
-            );
-          }
-        )}
-      </DisaggregationBreakdownContainer>
+                  <BreakdownLabelContainer>
+                    <BreakdownLabel>{dimension.label}</BreakdownLabel>
+                    {!!dimension.error && (
+                      <BreakdownErrorImg src={errorIcon} alt="" />
+                    )}
+                  </BreakdownLabelContainer>
+                  <BreakdownValue
+                    missing={!dimension.value}
+                    error={!!dimension.error}
+                  >
+                    {dimension.value?.toLocaleString("en-US") || "--"}
+                  </BreakdownValue>
+                </DisaggregationBreakdown>
+              );
+            }
+          )}
+        </DisaggregationBreakdownContainer>
+      )}
     </>
   );
 };