Merge pull request #968 from CruGlobal/MPDX-7948-rebuilding-the-ui

MPDX-7948 Rebuilding the UI - Appeals initial page
CruGlobal · Jul 1, 2024 · acfac32 · acfac32
2 parents bdb139d + 3c2975b
commit acfac32
Show file tree

Hide file tree

Showing 10 changed files with 355 additions and 311 deletions.
diff --git a/pages/accountLists/[accountListId]/tools/appeals.page.tsx b/pages/accountLists/[accountListId]/tools/appeals.page.tsx
@@ -1,30 +1,18 @@
-import Head from 'next/head';
 import React from 'react';
 import { Box, Divider, Grid, Theme, Typography } from '@mui/material';
-import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { loadSession } from 'pages/api/utils/pagePropsHelpers';
 import Loading from 'src/components/Loading';
 import AddAppealForm from 'src/components/Tool/Appeal/AddAppealForm';
 import Appeals from 'src/components/Tool/Appeal/Appeals';
-import { useAccountListId } from 'src/hooks/useAccountListId';
-import useGetAppSettings from 'src/hooks/useGetAppSettings';
+import { ToolsWrapper } from './ToolsWrapper';
+import { useToolsHelper } from './useToolsHelper';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   container: {
-    padding: theme.spacing(3),
-    width: '70%',
+    padding: `${theme.spacing(3)} ${theme.spacing(3)} 0`,
     display: 'flex',
-    [theme.breakpoints.down('lg')]: {
-      width: '90%',
-    },
-    [theme.breakpoints.down('md')]: {
-      width: '70%',
-    },
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-    },
   },
   outer: {
     display: 'flex',
@@ -40,71 +28,51 @@ const useStyles = makeStyles()((theme: Theme) => ({
 const AppealsPage: React.FC = () => {
   const { t } = useTranslation();
   const { classes } = useStyles();
-  const accountListId = useAccountListId();
-  const { appName } = useGetAppSettings();
 
-  const variants = {
-    animate: {
-      transition: {
-        staggerChildren: 0.15,
-      },
-    },
-    exit: {
-      transition: {
-        staggerChildren: 0.1,
-      },
-    },
-  };
+  const { accountListId } = useToolsHelper();
+  const pageUrl = 'tools/fixCommitmentInfo';
 
   return (
-    <>
-      <Head>
-        <title>
-          {appName} | {t('Appeals')}
-        </title>
-      </Head>
+    <ToolsWrapper
+      pageTitle={t('Appeals')}
+      pageUrl={pageUrl}
+      selectedMenuId="fixCommitmentInfo"
+    >
       {accountListId ? (
-        <motion.div
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          variants={variants}
-        >
-          <Box className={classes.outer}>
-            <Grid container spacing={3} className={classes.container}>
-              <Grid item xs={12}>
-                <Box m={1}>
-                  <Typography variant="h4">{t('Appeals')}</Typography>
-                </Box>
-                <Divider />
-                <Box m={1}>
-                  <Typography variant="body2">
-                    {t(
-                      'You can track recurring support goals or special need ' +
-                        'support goals through our appeals wizard. Track the ' +
-                        'recurring support you raise for an increase ask for example, ' +
-                        'or special gifts you raise for a summer mission trip or your ' +
-                        'new staff special gift goal.',
-                    )}
-                  </Typography>
-                </Box>
-              </Grid>
+        <Box className={classes.outer}>
+          <Grid container spacing={3} className={classes.container}>
+            <Grid item xs={12}>
+              <Box m={1}>
+                <Typography variant="h4">{t('Appeals')}</Typography>
+              </Box>
+              <Divider />
+              <Box m={1}>
+                <Typography variant="body2">
+                  {t(
+                    'You can track recurring support goals or special need ' +
+                      'support goals through our appeals wizard. Track the ' +
+                      'recurring support you raise for an increase ask for example, ' +
+                      'or special gifts you raise for a summer mission trip or your ' +
+                      'new staff special gift goal.',
+                  )}
+                </Typography>
+              </Box>
+            </Grid>
 
-              <Grid item xs={12} sm={12} lg={6}>
-                <Appeals accountListId={accountListId} />
-              </Grid>
-              <Grid item xs={12} sm={12} lg={6}>
-                <Box width="100%" display="flex" justifyContent="center">
-                  <AddAppealForm />
-                </Box>
-              </Grid>
+            <Grid item xs={12} sm={12} md={6}>
+              <Appeals accountListId={accountListId} />
+            </Grid>
+            <Grid item xs={12} sm={12} md={6}>
+              <Box width="100%" display="flex" justifyContent="center">
+                <AddAppealForm accountListId={accountListId} />
+              </Box>
             </Grid>
-          </Box>
-        </motion.div>
+          </Grid>
+        </Box>
       ) : (
         <Loading loading />
       )}
-    </>
+    </ToolsWrapper>
   );
 };