chore(frontend): add Google logo on DPA page

tabiya-tech · Jan 27, 2025 · 9971314 · 9971314
1 parent c7de025
commit 9971314
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 4 deletions.
diff --git a/frontend-new/public/google-logo.svg b/frontend-new/public/google-logo.svg
diff --git a/frontend-new/src/consent/components/consentPage/Consent.tsx b/frontend-new/src/consent/components/consentPage/Consent.tsx
@@ -42,6 +42,8 @@ export const DATA_TEST_ID = {
   ACCEPT_CHECKBOX_TEXT: `consent-accept-consent-text-${uniqueId}`,
   ACCEPT_TERMS_AND_CONDITIONS_TEXT: `consent-accept-tc-text-${uniqueId}`,
   ACCEPT_TERMS_AND_CONDITIONS_CHECKBOX_CONTAINER: `consent-accept-tc-checkbox-container-${uniqueId}`,
+  SUPPORT_CONTAINER: `consent-support-container-${uniqueId}`,
+  GOOGLE_LOGO: `consent-google-logo-${uniqueId}`,
 };
 
 const Consent: React.FC = () => {
@@ -152,11 +154,17 @@ const Consent: React.FC = () => {
   return (
     <Container
       maxWidth="xs"
-      sx={{ height: "100%", padding: theme.fixedSpacing(theme.tabiyaSpacing.lg) }}
+      sx={{
+        height: "100vh",
+        padding: theme.fixedSpacing(theme.tabiyaSpacing.lg),
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.fixedSpacing(theme.tabiyaSpacing.xl),
+      }}
       data-testid={DATA_TEST_ID.CONSENT_CONTAINER}
     >
       <Backdrop isShown={isLoggingOut} message={"Logging you out..."} />
-      <Box display="flex" flexDirection="column" alignItems="center" justifyContent={"space-evenly"} height={"80%"}>
+      <Box display="flex" flexDirection="column" alignItems="center" justifyContent={"space-evenly"}>
         <AuthHeader title={"Before we begin..."} subtitle={""} />
         <Box
           display={"flex"}
@@ -261,6 +269,24 @@ const Consent: React.FC = () => {
           </PrimaryButton>
         </Box>
       </Box>
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        gap={theme.fixedSpacing(theme.tabiyaSpacing.xs)}
+        sx={{
+          marginTop: "auto",
+        }}
+        data-testid={DATA_TEST_ID.SUPPORT_CONTAINER}
+      >
+        <Typography typography="body1">With support from</Typography>
+        <img
+          src={`${process.env.PUBLIC_URL}/google-logo.svg`}
+          alt="Google Logo"
+          height={6 * theme.tabiyaSpacing.xl} // xl wasn't quite big enough, we're going for ~24px
+          data-testid={DATA_TEST_ID.GOOGLE_LOGO}
+        />
+      </Box>
       <ConfirmModalDialog
         isOpen={showRejectModal}
         title="Are you sure?"

diff --git a/frontend-new/src/consent/components/consentPage/__snapshots__/consent.test.tsx.snap b/frontend-new/src/consent/components/consentPage/__snapshots__/consent.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Testing Consent Page render tests it should show consent screen with both agreements 1`] = `
 <div
-  class="MuiContainer-root MuiContainer-maxWidthXs css-1ubnw5l-MuiContainer-root"
+  class="MuiContainer-root MuiContainer-maxWidthXs css-1vck60u-MuiContainer-root"
   data-testid="consent-container-1dee3ba4-1853-40c6-aaad-eeeb0e94788d"
 >
   <div
@@ -179,7 +179,7 @@ exports[`Testing Consent Page render tests it should show consent screen with bo
     </div>
   </div>
   <div
-    class="MuiBox-root css-1wo1se4"
+    class="MuiBox-root css-jwp3xc"
   >
     <div
       class="MuiBox-root css-jwp3xc"
@@ -376,5 +376,21 @@ exports[`Testing Consent Page render tests it should show consent screen with bo
       </button>
     </div>
   </div>
+  <div
+    class="MuiBox-root css-1amft4z"
+    data-testid="consent-support-container-1dee3ba4-1853-40c6-aaad-eeeb0e94788d"
+  >
+    <p
+      class="MuiTypography-root MuiTypography-body1 css-2fnhl2-MuiTypography-root"
+    >
+      With support from
+    </p>
+    <img
+      alt="Google Logo"
+      data-testid="consent-google-logo-1dee3ba4-1853-40c6-aaad-eeeb0e94788d"
+      height="24"
+      src="/google-logo.svg"
+    />
+  </div>
 </div>
 `;
diff --git a/frontend-new/src/consent/components/consentPage/consent.test.tsx b/frontend-new/src/consent/components/consentPage/consent.test.tsx
@@ -100,6 +100,12 @@ describe("Testing Consent Page", () => {
       expect(screen.getByTestId(DATA_TEST_ID.ACCEPT_CHECKBOX_CONTAINER)).toBeInTheDocument();
       expect(screen.getByTestId(DATA_TEST_ID.ACCEPT_TERMS_AND_CONDITIONS_TEXT)).toBeInTheDocument();
 
+      // AND the support container should be rendered
+      expect(screen.getByTestId(DATA_TEST_ID.SUPPORT_CONTAINER)).toBeInTheDocument();
+
+      // AND the Google logo should be rendered
+      expect(screen.getByTestId(DATA_TEST_ID.GOOGLE_LOGO)).toBeInTheDocument();
+
       // AND the component should match the snapshot
       expect(screen.getByTestId(DATA_TEST_ID.CONSENT_CONTAINER)).toMatchSnapshot();
     });