removed email field from Request form, added email change alert

AplinkosMinisterija · Aug 5, 2024 · f4dc9f8 · f4dc9f8
1 parent aad55ad
commit f4dc9f8
Show file tree

Hide file tree

Showing 4 changed files with 488 additions and 414 deletions.
diff --git a/src/components/other/EmailChangeAlert.tsx b/src/components/other/EmailChangeAlert.tsx
@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+import { buttonsTitles, descriptions } from '../../utils/texts';
+import { slugs } from '../../utils/routes';
+import Icon from './Icons';
+import { useNavigate } from 'react-router-dom';
+
+const EmailChangeAlert = () => {
+  const navigate = useNavigate();
+
+  return (
+    <InformationContainer>
+      <IconContainer>
+        <StyledIcon name={'info'} />
+      </IconContainer>
+      <TextContainer>
+        <Description>{descriptions.infoSent}</Description>
+        <>&nbsp;</>
+        <BoldDescription>{descriptions.email}</BoldDescription>
+        <Description>,</Description>
+        <>&nbsp;</>
+        <Description>{`${descriptions.emailProfile}.`}</Description>
+        <>&nbsp;</>
+        <Description>{descriptions.changeEmail}</Description>
+        <>&nbsp;</>
+        <ButtonContainer
+          onClick={() => {
+            navigate(slugs.profile);
+          }}
+        >
+          {buttonsTitles.here}
+        </ButtonContainer>
+        <Description>.</Description>
+      </TextContainer>
+    </InformationContainer>
+  );
+};
+
+const InformationContainer = styled.div`
+  display: flex;
+  padding: 16px;
+  background-color: #ecf6ff;
+  border: 1px solid #0b62ab;
+  border-radius: 6px;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 4px;
+`;
+
+const StyledIcon = styled(Icon)`
+  font-size: 1.6rem;
+  color: #ffffff;
+  display: inline-block;
+`;
+
+const IconContainer = styled.div`
+  background-color: #0b62ab;
+  height: 24px;
+  width: 24px;
+  border-radius: 12px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  white-space: nowrap;
+  min-width: 24px;
+`;
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: 16px;
+  flex-wrap: wrap;
+`;
+
+const Description = styled.div`
+  color: #0b62ab;
+  font-size: 1.4rem;
+  line-height: 24px;
+  flex-wrap: wrap;
+`;
+
+const BoldDescription = styled.div`
+  color: #0b62ab;
+  font-size: 1.4rem;
+  line-height: 24px;
+  font-weight: bold;
+`;
+
+const ButtonContainer = styled.a`
+  color: #0b62ab;
+  text-decoration: none;
+  font-size: 1.4rem;
+  line-height: 24px;
+  cursor: pointer;
+  &:hover {
+    opacity: 50%;
+  }
+`;
+
+export default EmailChangeAlert;
diff --git a/src/pages/Request.tsx b/src/pages/Request.tsx
@@ -13,12 +13,10 @@ import { GeneratedFileComponent } from '../components/other/GeneratedFileCompone
 import LoaderComponent from '../components/other/LoaderComponent';
 import TermsAndConditions from '../components/other/TermsAndConditions';
 import FormPageWrapper from '../components/wrappers/FormikFormPageWrapper';
-import { useAppSelector } from '../state/hooks';
 import { device } from '../styles';
 import { ColumnOne, ColumnTwo, Container } from '../styles/GenericStyledComponents';
 import { PurposeTypes, StatusTypes } from '../utils/constants';
 import { getLocationList, handleErrorFromServerToast, isNew } from '../utils/functions';
-import { useGetCurrentProfile } from '../utils/hooks';
 import { purposeTypesOptions } from '../utils/options';
 import { slugs } from '../utils/routes';
 import {
@@ -29,11 +27,12 @@ import {
   requestHistoryStatusLabels,
 } from '../utils/texts';
 import { validateRequest } from '../utils/validation';
-import { TextField } from '@aplinkosministerija/design-system';
+import EmailChangeAlert from '../components/other/EmailChangeAlert';
+import { useAppSelector } from '../state/hooks';
+import { useGetCurrentProfile } from '../utils/hooks';
 
 export interface RequestProps {
   id?: string;
-  notifyEmail: string;
   objects: { cadastralId: string; category: string }[];
   status?: StatusTypes;
   purposeValue: string;
@@ -123,6 +122,7 @@ const RequestPage = () => {
     const { agreeWithConditions, extended, objects, ...rest } = values;
     const params: RequestPayload = {
       ...rest,
+      notifyEmail: currentProfile?.email || userEmail || '',
       objects: objects.map((item) => {
         return {
           type: 'CADASTRAL_ID',
@@ -140,7 +140,6 @@ const RequestPage = () => {
   };
 
   const initialValues: RequestProps = {
-    notifyEmail: request?.notifyEmail || currentProfile?.email || userEmail || '',
     objects: request?.objects || [],
     //geom: !isEmpty(request?.geom) ? request?.geom : undefined,
     agreeWithConditions: disabled || false,
@@ -155,17 +154,9 @@ const RequestPage = () => {
     return (
       <Container>
         <ColumnOne>
+          {!disabled && <EmailChangeAlert />}
           <InnerContainer>
             <SimpleContainer title={formLabels.infoAboutUser}>
-              <TextField
-                disabled={disabled}
-                label={inputLabels.email}
-                value={values.notifyEmail}
-                name={'notifyEmail'}
-                type="email"
-                error={errors?.notifyEmail}
-                onChange={(email) => handleChange('notifyEmail', email)}
-              />
               <Row columns={2}>
                 <SelectField
                   disabled={disabled}