Fix/routes terminality

webapp/src/components/LoginModal/Login.js

@@ -39,15 +39,15 @@ import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
-const LoginModal = ({ isNavBar, isSideBar }) => {
+const LoginModal = ({ isNavBar, isSideBar, isOutside }) => {
   const { t } = useTranslation('translations')
   const history = useHistory()
   const [user, setUser] = useState({})
   const [openSnackbar, setOpenSnackbar] = useState(false)
   const classes = useStyles()
   const [activeStep, setActiveStep] = useState(0)
   const theme = useTheme()
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(isOutside ? true : false)
   const [currentUser, { login }] = useUser()
 
 
@@ -104,8 +104,10 @@ const LoginModal = ({ isNavBar, isSideBar }) => {
   }
 
   const handleOpen = () => {
-    setOpen(!open)
-    setActiveStep(0)
+    if(!isOutside){
+      setOpen(!open)
+      setActiveStep(0)
+    }
   }
 
   const handleOpenCredentialsRecovery = () => {
@@ -131,6 +133,7 @@ const LoginModal = ({ isNavBar, isSideBar }) => {
         password: user.secret
       }
     })
+    if(isOutside) window.location.reload(); 
   }
 
   const handleLoginWithAuth = async (status, email, secret) => {
@@ -257,16 +260,18 @@ const LoginModal = ({ isNavBar, isSideBar }) => {
       >
         {activeStep === 0 && (
           <DialogContent className={classes.dimensions} >
-            <Box className={classes.closeIcon}>
-              <IconButton
-                aria-label="close"
-                color="inherit"
-                size="small"
-                onClick={handleOpen}
-              >
-                <CloseIcon fontSize="inherit" />
-              </IconButton>
-            </Box>
+            {!isOutside &&
+              <Box className={classes.closeIcon}>
+                <IconButton
+                  aria-label="close"
+                  color="inherit"
+                  size="small"
+                  onClick={handleOpen}
+                >
+                  <CloseIcon fontSize="inherit" />
+                </IconButton>
+              </Box>
+            }
             <Box>
               <Typography className={classes.title}>
                 {t('login.letsStarted')}
@@ -389,11 +394,13 @@ const LoginModal = ({ isNavBar, isSideBar }) => {
 LoginModal.propTypes = {
   isNavBar: PropTypes.bool,
   isSideBar: PropTypes.bool,
+  isOutside: PropTypes.bool
 }
 
 LoginModal.defaultProps = {
   isNavBar: false,
-  isSideBar: false
+  isSideBar: false,
+  isOutside: false
 }
 
 export default memo(LoginModal)

webapp/src/components/NotificationStructure/NotificationStructure.js

@@ -44,14 +44,14 @@ const NotificationStructure = ({ id, title, description, state, dateAndTime }) =
   return (
     <>
       <Button className={classes.wrapper} onMouseOver={changeNotificationState}>
-        <Grid container xs={3}>
+        <Grid container>
           <Grid item xs={12}>
             {state === true && (
               <NewNotificationIcon className={classes.iconOption} />
             )}
           </Grid>
         </Grid>
-        <Grid container xs={11}>
+        <Grid container>
           <Grid item xs={12}>
             <Typography className={classes.title}>
               {title}
@@ -63,7 +63,7 @@ const NotificationStructure = ({ id, title, description, state, dateAndTime }) =
             </Typography>
           </Grid>
         </Grid>
-        <Grid container xs={6}>
+        <Grid container>
           <Grid item xs={12}>
             <Typography className={classes.labelOption}>
               {dateAndTime.substring(11, 19)}

webapp/src/routes/EditProfile/EditProfile.js

@@ -20,6 +20,7 @@ import {
   SET_USERNAME
 } from '../../gql'
 import { useUser } from '../../context/user.context'
+import LoginModal from '../../components/LoginModal'
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
@@ -95,7 +96,7 @@ const EditProfilePage = () => {
   }
   useEffect(() => {
     if (!currentUser) {
-      return
+      return 
     }
 
     loadProfile()
@@ -152,6 +153,7 @@ const EditProfilePage = () => {
 
   return (
     <>
+      {!profile && (<LoginModal isOutside />)}
       {isDesktop && (
         <Box className={classes.wrapper}>
           {loading && <CircularProgress />}

webapp/src/routes/HistoryDashboard/HistoryDashboard.js

@@ -12,6 +12,7 @@ import Typography from '@material-ui/core/Typography'
 import { GET_REPORT_QUERY } from '../../gql'
 
 import { useUser } from '../../context/user.context'
+import LoginModal from '../../components/LoginModal'
 import styles from './styles'
 import { Box } from '@material-ui/core'
 
@@ -24,19 +25,17 @@ const HistoryDashboard = (user) => {
   const [bodySent, setBodySent] = useState()
   const [currentUser] = useUser()
   const [optionSR, setOption] = useState('sent')
-
   const options = [
     { value: 'sent', label: t('historyDashboard.tableTitleSent') },
     { value: 'received', label: t('historyDashboard.tableTitleReceived') }
   ]
 
   const [
     getReportQuery,
-    { data: { get_report: getReportResult } = {} }
+    { error: errorReport, data: { get_report: getReportResult } = {} }
   ] = useLazyQuery(GET_REPORT_QUERY, { fetchPolicy: 'network-only' })
 
   useEffect(() => {
-
     if (!getReportResult) {
       getReportQuery()
     } else {
@@ -62,11 +61,12 @@ const HistoryDashboard = (user) => {
   }
 
   const handleChange = (event) => {
-    setOption(event.target.value);
-  };
+    setOption(event.target.value)
+  }
 
   return (
     <>
+      {errorReport && (<LoginModal isOutside />)}
       <Box className={classes.root} >
         <Typography className={classes.title} >{t('historyDashboard.title')}</Typography>
         <Box className={classes.boxSelect}>

webapp/src/routes/OffersApproval/OffersApproval.js

@@ -10,13 +10,16 @@ import MenuItem from '@material-ui/core/MenuItem'
 import FormControl from '@material-ui/core/FormControl'
 import Select from '@material-ui/core/Select'
 import SnackbarContent from '@material-ui/core/SnackbarContent'
+import { useHistory } from 'react-router-dom'
 
-import ShowOffersAproval from '../../components/ShowElements/ShowOffersAproval'
 import {
   GET_ALL_OFFERS_QUERY,
   GET_INFO
 } from '../../gql'
+
 import { useUser } from '../../context/user.context'
+import LoginModal from '../../components/LoginModal'
+import ShowOffersAproval from '../../components/ShowElements/ShowOffersAproval'
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
@@ -27,7 +30,10 @@ const OffersApproval = () => {
   const [loadingOffers, setLoadingOffers] = useState(true)
   const [offers, setOffers] = useState([])
   const [currentUser] = useUser()
-  const [account] = useState(currentUser.account)
+  const history = useHistory()
+  const [account] = useState(
+     currentUser ? currentUser.account : false
+    )
   const [discountOffers, setDiscountOffers] = useState([])
   const [freeOffers, setFreetOffers] = useState([])
   const [badgeOffers, setBadgeOffers] = useState([])
@@ -36,7 +42,6 @@ const OffersApproval = () => {
   const [categories, setCategories] = useState([])
   const [category, setCategory] = useState('')
 
-
   const CategoryX = [
     { value: 'all', label: t('categories.all') },
     { value: 'discount', label: t('categories.discount') },
@@ -47,9 +52,11 @@ const OffersApproval = () => {
   ]
 
   const getOffers = async () => {
-    setLoadingOffers(true)
-    await getAllOffers()
-    await getInfo()
+    if(account && currentUser.role === 'lifebank'){
+      setLoadingOffers(true)
+      await getAllOffers()
+      await getInfo()
+    }
   }
 
   const handleChange = (event) => {
@@ -92,10 +99,17 @@ const OffersApproval = () => {
   }, [allOffers])
 
   useEffect(() => {
-    getInfo()
-    getOffers()
+    if(account){
+      getOffers()
+    }
   }, [])
 
+  useEffect(() => {
+    if(currentUser && !(currentUser.role === 'lifebank')){
+      history.replace('/')
+    }
+  },[allOffers,info])
+
   useEffect(() => {
     const discountOff = []
     const freeProductOff = []
@@ -135,6 +149,7 @@ const OffersApproval = () => {
 
   return (
     <>
+      {!currentUser && (<LoginModal isOutside />)}
       <Grid
         container
         direction="row"

webapp/src/routes/OffersManagement/OffersManagement.js

@@ -19,6 +19,7 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 import * as m from 'moment-timezone'
 import moment from 'moment'
 import { useTranslation } from 'react-i18next'
+import { useHistory } from 'react-router-dom'
 
 import {
   GET_SPONSOR_OFFERS_QUERY,
@@ -29,13 +30,15 @@ import {
 
 import OfferDetails from './OfferDetails'
 import GenericOfferFormComponent from './GenericOfferFormComponent'
+import LoginModal from '../../components/LoginModal'
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
 
 const OffersManagement = () => {
   const { t } = useTranslation('translations')
   const classes = useStyles()
+  const history = useHistory()
   const [offers, setOffers] = useState(undefined)
   const [profileIDLoaded, setProfileIDLoaded] = useState(false)
   const [offersLoaded, setOffersLoaded] = useState(false)
@@ -112,7 +115,7 @@ const OffersManagement = () => {
   }
   const [
     loadProfileID,
-    { data: { profile: { profile } = {} } = {} }
+    {error: profileError ,data: { profile: { profile } = {} } = {} }
   ] = useLazyQuery(PROFILE_ID_QUERY, { fetchPolicy: 'network-only' })
 
   const [
@@ -248,6 +251,12 @@ const OffersManagement = () => {
     loadProfileID()
   }, [loadProfileID])
 
+  useEffect(() => {
+    if(profile && !(profile.role === 'sponsor')){
+      history.replace('/')
+    }
+  },[profile])
+
   useEffect(() => {
     if (profile) setProfileIDLoaded(true)
   }, [profile])
@@ -399,6 +408,7 @@ const OffersManagement = () => {
           </Button>
         </DialogActions>
       </Dialog>
+      {profileError && (<LoginModal isOutside />)}
       <Snackbar
         open={openSnackbar.show}
         autoHideDuration={2000}

webapp/src/routes/Profile/ProfilePage.js

@@ -14,6 +14,7 @@ import {
   REVOKE_CONSENT_MUTATION
 } from '../../gql'
 import { useUser } from '../../context/user.context'
+import LoginModal from '../../components/LoginModal'
 import styles from './styles'
 
 const useStyles = makeStyles(styles)
@@ -65,7 +66,6 @@ const ProfilePage = () => {
   useEffect(() => {
     if (!currentUser) {
       client && client.resetStore()
-      history.replace('/')
 
       return
     }
@@ -149,6 +149,7 @@ const ProfilePage = () => {
 
   return (
     <Box className={classes.contentBody}>
+      {!profile && (<LoginModal isOutside />)} 
       <Snackbar open={openAlert} autoHideDuration={6000} onClose={handleOpenAlert}>
         <Alert onClose={handleOpenAlert} severity={severity}>
           {messegaAlert}

webapp/src/routes/Profile/ProfilePageGuest.js

@@ -15,7 +15,7 @@ const ProfilePageGuest = () => {
   return (
     <>
       <Box className={classes.rowBox}>
-        <Typography variant="subtitle1">{t('common.name')}</Typography>
+        <Typography variant="subtitle1">{t('profile.profile')}</Typography>
         <Typography variant="body1">{t('profile.guest')}</Typography>
       </Box>
       <Divider className={classes.divider} />