GatewayLabs · boscocg · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/...oard/user/assets/components/help-menu.tsx → ...hboard/components/help-menu/help-menu.tsx b/...oard/user/assets/components/help-menu.tsx → ...hboard/components/help-menu/help-menu.tsx
diff --git a/src/app/(light)/dashboard/layout.tsx b/src/app/(light)/dashboard/layout.tsx
@@ -3,8 +3,14 @@ import { PropsWithChildren } from 'react';
 
 import { GtwSessionProvider } from '@/context/gtw-session-provider';
 import { getGtwServerSession } from '@/services/next-auth/get-gtw-server-session';
+import HelpMenu from './components/help-menu/help-menu';
 
 export default async function DashboardLayout({ children }: PropsWithChildren) {
   const session = (await getGtwServerSession()) as Session;
-  return <GtwSessionProvider session={session}>{children}</GtwSessionProvider>;
+  return (
+    <GtwSessionProvider session={session}>
+      {children}
+      <HelpMenu />
+    </GtwSessionProvider>
+  );
 }
diff --git a/src/app/(light)/dashboard/user/assets/components/help-content.tsx b/src/app/(light)/dashboard/user/assets/components/help-content.tsx
diff --git a/src/app/(light)/dashboard/user/assets/layout.tsx b/src/app/(light)/dashboard/user/assets/layout.tsx
@@ -5,16 +5,16 @@ import GTWTabs from '@/components/tabs/gtw-tabs-links';
 import TitleLayout from '@/components/title-layout/title-layout';
 import routes from '@/constants/routes';
 import { common } from '@/locale/en/common';
-import { pdas } from '@/locale/en/pda';
+import { pdas, helperContent } from '@/locale/en/pda';
 import {
   CONTAINER_PX,
   NEGATIVE_CONTAINER_PX,
 } from '@/theme/config/style-tokens';
 
 import { Box } from '@mui/system';
 
-import HelpContent from './components/help-content';
-import HelpMenu from './components/help-menu';
+import HelpContentCard from '@/components/help-content-card/help-content-card';
+
 import SandboxAlert from './components/sandbox-alert';
 
 export default function DataAssetsLayout({ children }: PropsWithChildren) {
@@ -26,7 +26,12 @@ export default function DataAssetsLayout({ children }: PropsWithChildren) {
         subtitle={pdas.data_assets_subtitle}
         titleId="title-assets"
       />
-      <HelpContent />
+      <HelpContentCard
+        title={helperContent.title}
+        desc={helperContent.desc}
+        btnText={helperContent.btnText}
+        btnLink={helperContent.btnLink}
+      />
       <Box
         sx={{
           borderBottom: 1,
@@ -47,7 +52,7 @@ export default function DataAssetsLayout({ children }: PropsWithChildren) {
         </GTWTabs>
       </Box>
       <Box sx={{ pt: 5 }}>{children}</Box>
-      <HelpMenu />
+
     </Box>
   );
 }
diff --git a/src/app/(light)/dashboard/user/home/page.tsx b/src/app/(light)/dashboard/user/home/page.tsx
@@ -21,18 +21,22 @@ export default async function Home() {
   const session = (await getGtwServerSession()) as Session;
   return (
     <>
-      <Typography variant="h4" marginBottom={4} gutterBottom>
+      <Typography variant="h3" marginBottom={4} gutterBottom>
         {home.greeting} {session?.user.displayName}
       </Typography>
       <Box
+        component={Link}
         display="flex"
         flexDirection="column"
         justifyContent="space-between"
         width="100%"
         height="40%"
         padding={2}
-        bgcolor="primary.light"
+        bgcolor="primary.main"
         borderRadius={1}
+        href={home.main_banner.link}
+        target="_blank"
+        sx={{ textDecoration: 'none' }}
       >
         <BannerIcon
           sx={{
@@ -50,27 +54,35 @@ export default async function Home() {
           </Typography>
           <div>
             <Button
-              LinkComponent={Link}
               variant="text"
               size="large"
-              href={home.main_banner.link}
-              target="_blank"
               sx={{ color: 'common.white', paddingX: 0, borderRadius: 0 }}
             >
               {home.main_banner.btn_text}
             </Button>
           </div>
         </Stack>
       </Box>
-      <div
-        style={{
+      <Box
+        sx={{
           display: 'flex',
           justifyContent: 'space-between',
-          flexDirection: 'row',
-          marginTop: 25,
+          flexDirection: { xs: 'column', md: 'row' },
         }}
       >
-        <Paper variant="outlined" sx={{ padding: 1.5, width: '100%', mr: 3 }}>
+        <Paper
+          component={Link}
+          href={home.sub_banner[0].link}
+          target="_blank"
+          variant="outlined"
+          sx={{
+            padding: 1.5,
+            width: '100%',
+            mr: 3,
+            marginTop: 2,
+            textDecoration: 'none',
+          }}
+        >
           <PDABannerIcon sx={{ width: 115.82, height: 72 }} />
           <Typography mt={2} variant="h5" width={222} gutterBottom>
             {home.sub_banner[0].title}
@@ -79,17 +91,24 @@ export default async function Home() {
             {home.sub_banner[0].subtitle}
           </Typography>
           <Button
-            LinkComponent={Link}
-            href={home.sub_banner[0].link}
-            target="_blank"
             variant="text"
             size="large"
             sx={{ paddingX: 0, borderRadius: 0, marginTop: 1 }}
           >
             {home.sub_banner[0].btn_text}
           </Button>
         </Paper>
-        <Paper variant="outlined" sx={{ padding: 1.5, width: '100%' }}>
+        <Paper
+          component={Link}
+          href={home.sub_banner[1].link}
+          variant="outlined"
+          sx={{
+            padding: 1.5,
+            width: '100%',
+            marginTop: 2,
+            textDecoration: 'none',
+          }}
+        >
           <PlaygroundIcon sx={{ width: 84, height: 72 }} />
           <Typography mt={2} variant="h5" width={222} gutterBottom>
             {home.sub_banner[1].title}
@@ -98,16 +117,14 @@ export default async function Home() {
             {home.sub_banner[1].subtitle}
           </Typography>
           <Button
-            LinkComponent={Link}
-            href={home.sub_banner[1].link}
             variant="text"
             size="large"
             sx={{ paddingX: 0, borderRadius: 0, marginTop: 1 }}
           >
             {home.sub_banner[1].btn_text}
           </Button>
         </Paper>
-      </div>
+      </Box>
     </>
   );
 }
diff --git a/src/app/(light)/dashboard/user/proofs/layout.tsx b/src/app/(light)/dashboard/user/proofs/layout.tsx
@@ -5,13 +5,14 @@ import GTWTabs from '@/components/tabs/gtw-tabs-links';
 import TitleLayout from '@/components/title-layout/title-layout';
 import routes from '@/constants/routes';
 import { common } from '@/locale/en/common';
-import { proofs } from '@/locale/en/proof';
+import { proofs, helperContent } from '@/locale/en/proof';
 import {
   CONTAINER_PX,
   NEGATIVE_CONTAINER_PX,
 } from '@/theme/config/style-tokens';
 
 import { Box } from '@mui/system';
+import HelpContentCard from '@/components/help-content-card/help-content-card';
 
 export default function DataProofsLayout({ children }: PropsWithChildren) {
   return (
@@ -21,6 +22,14 @@ export default function DataProofsLayout({ children }: PropsWithChildren) {
         subtitle={proofs.data_proofs_subtitle}
         titleId="title-proofs"
       />
+
+      <HelpContentCard
+        title={helperContent.title}
+        desc={helperContent.desc}
+        btnText={helperContent.btnText}
+        btnLink={helperContent.btnLink}
+      />
+
       <Box
         sx={{
           borderBottom: 1,

diff --git a/src/app/(light)/dashboard/user/requests/layout.tsx b/src/app/(light)/dashboard/user/requests/layout.tsx
@@ -1,8 +1,9 @@
 import { PropsWithChildren } from 'react';
 
-import { requests } from '@/locale/en/request';
+import { requests, helperContent } from '@/locale/en/request';
 
 import { Box, Typography } from '@mui/material';
+import HelpContentCard from '@/components/help-content-card/help-content-card';
 
 export default function DataRequestsLayout({ children }: PropsWithChildren) {
   return (
@@ -23,6 +24,12 @@ export default function DataRequestsLayout({ children }: PropsWithChildren) {
           {requests.subtitle}
         </Typography>
       </Box>
+      <HelpContentCard
+        title={helperContent.title}
+        desc={helperContent.desc}
+        btnText={helperContent.btnText}
+        btnLink={helperContent.btnLink}
+      />
       {children}
     </Box>
   );

diff --git a/src/components/help-content-card/help-content-card.tsx b/src/components/help-content-card/help-content-card.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { Box, Button, Stack, Typography, IconButton } from '@mui/material';
+
+type Props = {
+  title: string;
+  desc: string;
+  btnLink: string;
+  btnText: string;
+};
+
+export default function HelpContentCard({
+  title,
+  desc,
+  btnLink,
+  btnText,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const hasSeenDialog: { [key: string]: boolean } | null = JSON.parse(
+    localStorage.getItem('help-content-banner') || '{}'
+  );
+
+  useEffect(() => {
+    if (hasSeenDialog && !hasSeenDialog.hasOwnProperty(title)) {
+      setOpen(true);
+    }
+  }, []);
+
+  const handleClick = () => {
+    const updatedDialog = { ...hasSeenDialog, [title]: true };
+
+    localStorage.setItem('help-content-banner', JSON.stringify(updatedDialog));
+    setOpen(false);
+  };
+
+  return (
+    open && (
+      <Box sx={{ width: '100%', mb: 3 }}>
+        <Stack
+          spacing={2}
+          direction="row"
+          padding={3}
+          sx={{ backgroundColor: '#69DCED26' }}
+          borderRadius={1}
+        >
+          <Image
+            src="/question.svg"
+            width={112}
+            height={112}
+            alt="question mark image"
+          />
+          <Stack width="100%">
+            <Typography variant="subtitle1" color="#407077" gutterBottom>
+              {title}
+            </Typography>
+            <Typography variant="body1" gutterBottom color="#407077">
+              {desc}
+            </Typography>
+            <div style={{ marginTop: 20 }}>
+              <Button
+                LinkComponent={Link}
+                size="small"
+                variant="outlined"
+                href={btnLink}
+                sx={{ color: '#407077', borderColor: '#407077' }}
+                target="_blank"
+              >
+                {btnText}
+              </Button>
+            </div>
+          </Stack>
+          <div>
+            <IconButton onClick={handleClick}>
+              <CloseIcon />
+            </IconButton>
+          </div>
+        </Stack>
+      </Box>
+    )
+  );
+}
diff --git a/src/components/icons/pda-banner.tsx b/src/components/icons/pda-banner.tsx
@@ -16,7 +16,7 @@ export default function PDABannerIcon(props: SvgIconProps) {
       />
       <rect x="17.4766" width="72" height="72" rx="10.6793" fill="#F8CEFF" />
       <rect x="23.0664" width="72" height="72" rx="10.6793" fill="#771AC9" />
-      <g clip-path="url(#clip0_3121_61406)">
+      <g clipPath="url(#clip0_3121_61406)">
         <path
           d="M32.6776 31.4552C32.5768 31.4618 32.4758 31.4472 32.3813 31.4123C32.2867 31.3776 32.2009 31.3234 32.1295 31.2535C32.0581 31.1835 32.0028 31.0995 31.9672 31.007C31.9317 30.9144 31.9168 30.8155 31.9234 30.7168V18.1638C31.9353 16.1307 32.7654 14.1842 34.2337 12.7465C35.702 11.3088 37.69 10.496 39.7665 10.4844H42.2551C44.3316 10.496 46.3196 11.3088 47.7879 12.7465C49.2562 14.1842 50.0863 16.1307 50.0982 18.1638V21.4129C50.0982 21.6087 50.0187 21.7965 49.8773 21.935C49.7359 22.0735 49.5441 22.1513 49.344 22.1513C49.144 22.1513 48.9522 22.0735 48.8108 21.935C48.6694 21.7965 48.5899 21.6087 48.5899 21.4129V18.1638C48.58 16.5218 47.9094 14.9498 46.7236 13.7886C45.5377 12.6275 43.9322 11.9709 42.2551 11.9612H39.7665C38.0894 11.9709 36.4839 12.6275 35.298 13.7886C34.1122 14.9498 33.4416 16.5218 33.4317 18.1638V30.7168C33.4317 30.9127 33.3522 31.1005 33.2108 31.239C33.0694 31.3774 32.8776 31.4552 32.6776 31.4552Z"
           fill="#E6D5FA"
@@ -44,9 +44,9 @@ export default function PDABannerIcon(props: SvgIconProps) {
           y2="32.6609"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#F8CEFF" />
-          <stop offset="1" stop-color="#FAD9FF" stop-opacity="0" />
-          <stop offset="1" stop-color="#F8CEFF" />
+          <stop stopColor="#F8CEFF" />
+          <stop offset="1" stopColor="#FAD9FF" stopOpacity="0" />
+          <stop offset="1" stopColor="#F8CEFF" />
         </linearGradient>
         <clipPath id="clip0_3121_61406">
           <rect