Remove payments button for client in project page

src/pages/Project/index.tsx

@@ -11,7 +11,6 @@ import {
   Empty,
   FullBuild,
   MVP,
-  Payment,
   Settings,
   Specification,
 } from '../../assets';
@@ -86,8 +85,10 @@ const Project = () => {
   const [fullBuildModal, setFullBuildModal] = useState<boolean>(false);
   const [transactionsData, setTransactionsData] = useState<TransactionData>();
 
-  const [getProjectsByClientId, { loading: clientProjectsLoading, error: clientProjectsError }] =
+  const [
-    useLazyQuery<
+    getProjectsByClientId,
+    { loading: clientProjectsLoading, error: clientProjectsError },
+  ] = useLazyQuery<
     GetAllProjectsByClientIdQuery,
     GetAllProjectsByClientIdQueryVariables
   >(GET_ALL_PROJECTS_BY_CLIENT_ID, {
@@ -100,24 +101,25 @@ const Project = () => {
     },
   });
 
-  const [getProjects, { loading: projectsLoading, error: projectsError }] = useLazyQuery<
+  const [getProjects, { loading: projectsLoading, error: projectsError }] =
-    GetAllProjectsQuery,
+    useLazyQuery<GetAllProjectsQuery, GetAllUsersQueryVariables>(
-    GetAllUsersQueryVariables
+      GET_ALL_PROJECTS,
-  >(GET_ALL_PROJECTS, {
+      {
         onCompleted({ getAllProjects }) {
-      if (getAllProjects.length > 0)
+          if (getAllProjects.length > 0) setProject(getAllProjects[0]);
-        setProject(getAllProjects[0]);
+        },
       }
-  });
+    );
 
-  const [getProject, { loading: projectLoading, error: projectError }] = useLazyQuery<
+  const [getProject, { loading: projectLoading, error: projectError }] =
-    GetProjectByIdQuery,
+    useLazyQuery<GetProjectByIdQuery, GetProjectByIdQueryVariables>(
-    GetProjectByIdQueryVariables
+      GET_PROJECT_BY_ID,
-  >(GET_PROJECT_BY_ID, {
+      {
         onCompleted({ getProjectById }) {
           setProject(getProjectById);
+        },
       }
-  });
+    );
 
   const [changeProjectState] = useMutation<
     ChangeProjectStateMutation,
@@ -277,15 +279,13 @@ const Project = () => {
     },
   });
 
-  if (role === 'admin') return (
+  if (role === 'admin') return <Navigate to='/clients' />;
-    <Navigate to='/clients' />
-  );
 
-  if (clientProjectsLoading || projectsLoading || projectLoading) return (
+  if (clientProjectsLoading || projectsLoading || projectLoading)
-    <Spinner fullScreen color={role || 'client'} />
+    return <Spinner fullScreen color={role || 'client'} />;
-  );
 
-  if (clientProjectsError || projectsError || projectError || !project) return (
+  if (clientProjectsError || projectsError || projectError || !project)
+    return (
       <Wrapper color={role}>
         <Box
           width='100%'
@@ -316,9 +316,7 @@ const Project = () => {
             label='File'
             file
             color={role || 'client'}
-            onChange={async (
+            onChange={async (event: React.ChangeEvent<HTMLInputElement>) => {
-              event: React.ChangeEvent<HTMLInputElement>
-            ) => {
               const formData = new FormData();
 
               if (event.target.files && event.target.files[0]) {
@@ -364,9 +362,7 @@ const Project = () => {
             label='File'
             file
             color={role || 'client'}
-            onChange={async (
+            onChange={async (event: React.ChangeEvent<HTMLInputElement>) => {
-              event: React.ChangeEvent<HTMLInputElement>
-            ) => {
               const formData = new FormData();
 
               if (event.target.files && event.target.files[0]) {
@@ -392,8 +388,7 @@ const Project = () => {
             }}
             error={
               addMvpForm.touched.fileName &&
-              (!!addMvpForm.errors.fileName ||
+              (!!addMvpForm.errors.fileName || !!addMvpForm.errors.fileSource)
-                !!addMvpForm.errors.fileSource)
             }
             errorMessage={addMvpForm.errors.fileName}
           />
@@ -458,18 +453,6 @@ const Project = () => {
                     }
                   />
                 </Box>
-                {role === 'client' && (
-                  <Box marginRight='20px'>
-                    <Button
-                      color={role || 'client'}
-                      variant='primary-action'
-                      text='Payments'
-                      iconLeft={<Payment />}
-                      disabled={transactionsData?.status}
-                      onClick={() => navigate(`/payments/${project.id}`)}
-                    />
-                  </Box>
-                )}
                 {role === 'client' && (
                   <Box>
                     <Button
@@ -484,8 +467,7 @@ const Project = () => {
               </>
             ) : (
               <>
-                {project.state === 'OnReview' &&
+                {project.state === 'OnReview' && role === 'productOwner' ? (
-                role === 'productOwner' ? (
                   <>
                     <Box marginRight='20px'>
                       <Button
@@ -540,11 +522,7 @@ const Project = () => {
             )}
           </Box>
           {project.template.features && (
-            <Box
+            <Box display='flex' flexDirection='column' marginBottom='30px'>
-              display='flex'
-              flexDirection='column'
-              marginBottom='30px'
-            >
               <Box marginBottom='10px'>
                 <Text variant='headline' gutterBottom>
                   Features
@@ -590,11 +568,7 @@ const Project = () => {
                   justifyContent='space-between'
                   marginBottom='10px'
                 >
-                  <Box
+                  <Box display='flex' flexDirection='row' alignItems='center'>
-                    display='flex'
-                    flexDirection='row'
-                    alignItems='center'
-                  >
                     <Box marginRight='10px'>
                       <Specification />
                     </Box>
@@ -627,11 +601,7 @@ const Project = () => {
                   justifyContent='space-between'
                   marginBottom='10px'
                 >
-                  <Box
+                  <Box display='flex' flexDirection='row' alignItems='center'>
-                    display='flex'
-                    flexDirection='row'
-                    alignItems='center'
-                  >
                     <Box marginRight='10px'>
                       <Design />
                     </Box>
@@ -703,11 +673,7 @@ const Project = () => {
                   justifyContent='space-between'
                   marginBottom='10px'
                 >
-                  <Box
+                  <Box display='flex' flexDirection='row' alignItems='center'>
-                    display='flex'
-                    flexDirection='row'
-                    alignItems='center'
-                  >
                     <Box marginRight='10px'>
                       <MVP />
                     </Box>
@@ -784,11 +750,7 @@ const Project = () => {
                   justifyContent='space-between'
                   marginBottom='10px'
                 >
-                  <Box
+                  <Box display='flex' flexDirection='row' alignItems='center'>
-                    display='flex'
-                    flexDirection='row'
-                    alignItems='center'
-                  >
                     <Box marginRight='10px'>
                       <FullBuild />
                     </Box>
@@ -861,8 +823,7 @@ const Project = () => {
               </Box>
             </Box>
           )}
-          {project.template.specification &&
+          {project.template.specification && project.template.features && (
-            project.template.features && (
             <Box display='none'>
               <SpecificationPrint
                 ref={printRef}