From aa370d75ed4c3a2b6e5512abaa04a92836538eec Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Mon, 22 Jul 2024 17:02:22 +0800
Subject: [PATCH] add Important Notice

---
 src/components/cards/AuthFooter.js       |  3 +-
 src/pages/extra-pages/ImportantNotice.js | 60 ++++++++++++++++++++++++
 src/routes/LoginRoutes.js                |  5 ++
 3 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/extra-pages/ImportantNotice.js

diff --git a/src/components/cards/AuthFooter.js b/src/components/cards/AuthFooter.js
index 4a1cf3f..daaa61f 100644
--- a/src/components/cards/AuthFooter.js
+++ b/src/components/cards/AuthFooter.js
@@ -26,7 +26,7 @@ const AuthFooter = () => {
             variant="subtitle2"
             color="secondary"
             component={Link}
-            // href="https://material-ui.com/store/contributors/codedthemes/"
+            href="/importantNotice"
             target="_blank"
             underline="hover"
           >
@@ -37,7 +37,6 @@ const AuthFooter = () => {
             color="secondary"
             component={Link}
             href="/privacyPolicy"
-            //href="/testMailPage"
             target="_blank"
             underline="hover"
           >
diff --git a/src/pages/extra-pages/ImportantNotice.js b/src/pages/extra-pages/ImportantNotice.js
new file mode 100644
index 0000000..37909aa
--- /dev/null
+++ b/src/pages/extra-pages/ImportantNotice.js
@@ -0,0 +1,60 @@
+import { Grid, Typography, Stack, } from '@mui/material';
+import { useState, useEffect, lazy } from "react";
+
+import Loadable from 'components/Loadable';
+import { useIntl, FormattedMessage } from "react-intl";
+
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+const BackgroundHead = {
+    backgroundImage: `url(${titleBackgroundImg})`,
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundColor: '#0C489E',
+    backgroundPosition: 'right'
+}
+
+const LoadingComponent = Loadable(lazy(() => import('pages/extra-pages/LoadingComponent')));
+
+const ImportantNotice = () => {
+    const intl = useIntl();
+    const [onReady, setOnReady] = useState(false);
+
+    useEffect(() => {
+        setOnReady(true);
+
+    }, []);
+
+
+
+
+    return (
+        !onReady ?
+            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
+                <Grid item>
+                    <LoadingComponent />
+                </Grid>
+            </Grid>
+            :
+            (
+                <Grid container justifyContent="center" alignItems="center" >
+                    <Grid item xs={12}>
+                        <div style={BackgroundHead}>
+                            <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center">
+                                <Typography ml={15} color='#FFF' variant="h4" sx={{ display: { xs: 'none', sm: 'none', md: 'block', pt: 2 } }}>
+                                    <FormattedMessage id="importantNotice" />
+                                </Typography>
+                            </Stack>
+                        </div>
+                    </Grid>
+                    <Grid item xs={10} md={5}>
+                        <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "termsAndCon" }) }} />
+                    </Grid>
+                </Grid>
+            )
+    );
+
+}
+
+export default ImportantNotice;
\ No newline at end of file
diff --git a/src/routes/LoginRoutes.js b/src/routes/LoginRoutes.js
index 965cac9..57002d0 100644
--- a/src/routes/LoginRoutes.js
+++ b/src/routes/LoginRoutes.js
@@ -13,6 +13,7 @@ const BusRegisterForm = Loadable(lazy(() => import('pages/authentication/BusRegi
 const IAmSmartRegister = Loadable(lazy(() => import('pages/authentication/IAmSmartRegister')));
 const ErrorPage = Loadable(lazy(() => import('pages/extra-pages/ErrorPage')));
 const PrivacyPolicyPage = Loadable(lazy(() => import('pages/extra-pages/PrivacyPolicy')));
+const ImportantNoticePage = Loadable(lazy(() => import('pages/extra-pages/ImportantNotice')));
 const AboutUsPage = Loadable(lazy(() => import('pages/AboutUs')));
 
 const ForgotPassword = Loadable(lazy(() => import('pages/authentication/ForgotPassword')));
@@ -71,6 +72,10 @@ const LoginRoutes = {
       path: 'privacyPolicy',
       element: <PrivacyPolicyPage/>
     },
+    {
+      path: 'importantNotice',
+      element: <ImportantNoticePage/>
+    },
     {
       path: 'aboutUs',
       element: <AboutUsPage/>