feat: 🎸 put email and error handling, final texts

CaritasDeutschland · Mar 15, 2021 · c418233 · c418233
1 parent 8c2d725
commit c418233
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 56 deletions.
diff --git a/src/api/apiPutEmail.ts b/src/api/apiPutEmail.ts
@@ -8,6 +8,6 @@ export const apiPutEmail = async (email: string): Promise<any> => {
 		bodyData: email.trim(),
 		url: url,
 		method: FETCH_METHODS.PUT,
-		responseHandling: [FETCH_ERRORS.CONFLICT]
+		responseHandling: [FETCH_ERRORS.CONFLICT_WITH_RESPONSE]
 	});
 };
diff --git a/src/components/headline/Headline.tsx b/src/components/headline/Headline.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import './headline.styles';
 
-export type headlineLevels = '1' | '2' | '3' | '4' | '5';
+export type HeadlineLevels = '1' | '2' | '3' | '4' | '5';
 interface HeadlineProps {
-	semanticLevel: headlineLevels;
-	styleLevel?: headlineLevels;
+	semanticLevel: HeadlineLevels;
+	styleLevel?: HeadlineLevels;
 	text: string;
 }
 

diff --git a/src/components/inputField/inputField.styles.scss b/src/components/inputField/inputField.styles.scss
@@ -141,7 +141,7 @@ $inputHeight: 50px;
 		}
 
 		&__label {
-			left: $grid-base-seven;
+			left: 58px;
 		}
 	}
 }
diff --git a/src/components/message/FurtherSteps.tsx b/src/components/message/FurtherSteps.tsx
@@ -9,38 +9,52 @@ import { ReactComponent as ConsultantIllustration } from '../../resources/img/il
 import { ReactComponent as AnswerIllustration } from '../../resources/img/illustrations/answer.svg';
 import { ReactComponent as ArrowIllustration } from '../../resources/img/illustrations/arrow.svg';
 import { ReactComponent as EnvelopeIcon } from '../../resources/img/icons/envelope.svg';
+import { ReactComponent as SuccessIllustration } from '../../resources/img/illustrations/check.svg';
 import {
 	InputField,
 	InputFieldItem,
 	InputFieldLabelState
 } from '../inputField/InputField';
 import { isStringValidEmail } from '../registration/registrationHelpers';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import {
 	Overlay,
 	OverlayItem,
 	OverlayWrapper,
 	OVERLAY_FUNCTIONS
 } from '../overlay/Overlay';
+import { apiPutEmail, FETCH_ERRORS } from '../../api';
+import { UserDataContext } from '../../globalState';
 
 const addEmailButton: ButtonItem = {
 	label: translate('furtherSteps.emailNotification.button'),
 	type: BUTTON_TYPES.LINK
 };
 
 export const FurtherSteps = () => {
-	const [overlayActive, setOverlayActive] = useState(false);
-	const [isRequestInProgress, setIsRequestInProgress] = useState(false);
-	const [email, setEmail] = useState('');
-	const [emailInputItem, setEmailInputItem] = useState<InputFieldItem>({
+	const [overlayActive, setOverlayActive] = useState<boolean>(false);
+	const [isSuccessOverlay, setIsSuccessOverlay] = useState<boolean>(false);
+	const { userData, setUserData } = useContext(UserDataContext);
+	const [isRequestInProgress, setIsRequestInProgress] = useState<boolean>(
+		false
+	);
+	const [email, setEmail] = useState<string>('');
+	const [emailLabel, setEmailLabel] = useState<string>(
+		translate('furtherSteps.email.overlay.input.label')
+	);
+	const [emailLabelState, setEmailLabelState] = useState<
+		InputFieldLabelState
+	>();
+
+	const emailInputItem: InputFieldItem = {
 		content: email,
 		icon: <EnvelopeIcon />,
 		id: 'email',
-		label: translate('furtherSteps.email.overlay.input.label'),
+		label: emailLabel,
 		name: 'email',
 		type: 'text',
-		labelState: null
-	});
+		labelState: emailLabelState
+	};
 
 	const validateEmail = (
 		email
@@ -64,21 +78,16 @@ export const FurtherSteps = () => {
 	};
 
 	const handleEmailChange = (event) => {
-		console.log('HANDLE EMAIL CHANGE');
-		setEmail(event.target.value);
-		let inputEmail = emailInputItem;
 		const validity = validateEmail(event.target.value);
-		inputEmail.labelState = validity.valid;
-		inputEmail.label = validity.label;
-		inputEmail.content = event.target.value;
-		setEmailInputItem(inputEmail);
+		setEmailLabelState(validity.valid);
+		setEmailLabel(validity.label);
+		setEmail(event.target.value);
 	};
 
-	const overlayItem: OverlayItem = {
+	const emailOverlayItem: OverlayItem = {
 		buttonSet: [
 			{
 				label: translate('furtherSteps.email.overlay.button1.label'),
-				function: 'SET EMAIl',
 				type: BUTTON_TYPES.PRIMARY
 			},
 			{
@@ -87,7 +96,6 @@ export const FurtherSteps = () => {
 				type: BUTTON_TYPES.LINK
 			}
 		],
-		copy: translate('furtherSteps.email.overlay.copy'),
 		headline: translate('furtherSteps.email.overlay.headline'),
 		isIconSmall: true,
 		nestedComponent: (
@@ -96,21 +104,53 @@ export const FurtherSteps = () => {
 		svg: EnvelopeIllustration
 	};
 
+	const successOverlayItem: OverlayItem = {
+		buttonSet: [
+			{
+				label: translate('furtherSteps.email.overlay.button2.label'),
+				function: OVERLAY_FUNCTIONS.CLOSE,
+				type: BUTTON_TYPES.PRIMARY
+			}
+		],
+		headline: translate('furtherSteps.email.success.overlay.headline'),
+		svg: SuccessIllustration
+	};
+
 	const handleAddEmail = () => {
 		setOverlayActive(true);
 	};
 
 	const handleOverlayAction = (buttonFunction: string) => {
 		if (buttonFunction === OVERLAY_FUNCTIONS.CLOSE) {
 			setOverlayActive(false);
+			setIsSuccessOverlay(false);
 			setIsRequestInProgress(false);
-		} else {
+		} else if (!isRequestInProgress) {
 			setIsRequestInProgress(true);
-			//TODO: update email call
-			console.log('Email', emailInputItem.content, email);
+			apiPutEmail(email)
+				.then((response) => {
+					setIsRequestInProgress(false);
+					setIsSuccessOverlay(true);
+					let updatedUserData = userData;
+					updatedUserData.email = email;
+					setUserData(updatedUserData);
+				})
+				.catch((error: Response) => {
+					const reason = error.headers.get(FETCH_ERRORS.X_REASON);
+					if (reason === 'EMAIL_NOT_AVAILABLE') {
+						setEmailLabel(
+							translate(
+								'furtherSteps.email.overlay.input.unavailable'
+							)
+						);
+						setEmailLabelState('invalid');
+						setIsRequestInProgress(false);
+					}
+				});
 		}
 	};
 
+	const showAddEmail = !userData.email;
 	return (
 		<div className="furtherSteps">
 			<Headline
@@ -155,25 +195,39 @@ export const FurtherSteps = () => {
 					/>
 				</li>
 			</ul>
-			{/* TODO: condition to show email text and button & overlay */}
-			<Headline
-				semanticLevel="5"
-				text={translate('furtherSteps.emailNotification.headline')}
-			/>
-			<Text
-				type="standard"
-				text={translate('furtherSteps.emailNotification.infoText')}
-				className="furtherSteps__emailInfo"
-			/>
-			<Button item={addEmailButton} buttonHandle={handleAddEmail} />
-			{overlayActive ? (
-				<OverlayWrapper>
-					<Overlay
-						item={overlayItem}
-						handleOverlay={handleOverlayAction}
+			{showAddEmail && (
+				<>
+					<Headline
+						semanticLevel="5"
+						text={translate(
+							'furtherSteps.emailNotification.headline'
+						)}
+					/>
+					<Text
+						type="standard"
+						text={translate(
+							'furtherSteps.emailNotification.infoText'
+						)}
+						className="furtherSteps__emailInfo"
+					/>
+					<Button
+						item={addEmailButton}
+						buttonHandle={handleAddEmail}
 					/>
-				</OverlayWrapper>
-			) : null}
+					{overlayActive && (
+						<OverlayWrapper>
+							<Overlay
+								item={
+									isSuccessOverlay
+										? successOverlayItem
+										: emailOverlayItem
+								}
+								handleOverlay={handleOverlayAction}
+							/>
+						</OverlayWrapper>
+					)}
+				</>
+			)}
 		</div>
 	);
 };
diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import * as ReactDOM from 'react-dom';
 import { ButtonItem, Button } from '../button/Button';
 import { Text } from '../text/Text';
-import { Headline, HeadlineStyleLevel } from '../headline/Headline';
+import { Headline, HeadlineLevels } from '../headline/Headline';
 import './overlay.styles';
 
 export const OVERLAY_FUNCTIONS = {
@@ -23,7 +23,7 @@ export interface OverlayItem {
 	buttonSet?: ButtonItem[];
 	copy?: string;
 	headline?: string;
-	headlineStyleLevel?: HeadlineStyleLevel;
+	headlineStyleLevel?: HeadlineLevels;
 	isIconSmall?: boolean;
 	nestedComponent?: React.ReactNode;
 	svg?: React.FunctionComponent<

diff --git a/src/resources/scripts/i18n/de/furtherSteps.ts b/src/resources/scripts/i18n/de/furtherSteps.ts
@@ -3,19 +3,20 @@ const furtherSteps = {
 	'step1.info': 'Wir haben Ihre Nachricht erhalten.',
 	'step2.info': 'Jetzt finden wir eine_n passende_n Berater_in für Sie.',
 	'step3.info': 'Ihr_e Berater_in antwortet innerhalb von 2 Werktagen.',
-	'emailNotification.headline': 'E-Mail-Benachrichtigung erhalten',
+	'emailNotification.headline':
+		'E-Mail Benachrichtigung erhalten & Passwort zurücksetzen',
 	'emailNotification.infoText':
-		'Das System benachrichtigt Sie, sobald Sie eine Antwort bekommen haben. Geben Sie dazu Ihre E-Mail-Adresse an.',
+		'Wenn Sie Ihre E-Mail-Adresse angeben (freiwillig)<br><ul><li>erhalten Sie eine Info E-Mail, wenn Ihre Berater_in Ihnen geschrieben hat</li><li>können Sie Ihr Passwort zurücksetzen, falls Sie es vergessen haben.</li></ul>Ihre E-Mail-Adresse kann von den Berater_innen nicht eingesehen werden.',
 	'emailNotification.button': 'E-Mail Adresse angeben',
 	'email.overlay.headline': 'E-Mail-Adresse angeben',
-	//TODO: add new text
-	'email.overlay.copy':
-		'Ihre E-Mail Adresse wird verwendet, um Sie automatisch zu informieren, wenn eine Antwort für Sie vorliegt. Ihre Beraterin bzw. Ihr Berater kann Ihre E-Mail Adresse nicht sehen. </br> Ausserdem können Sie durch die Angabe Ihrer E-Mail-Adresse Ihr Passwort zurücksetzen.',
 	'email.overlay.input.label': 'E-Mail',
 	'email.overlay.input.valid': 'Ihre E-Mail-Adresse ist gültig.',
 	'email.overlay.input.invalid': 'Ihre E-Mail-Adresse ist nicht gültig.',
+	'email.overlay.input.unavailable':
+		'Diese E-Mail Adresse ist bereits registriert.',
 	'email.overlay.button1.label': 'Speichern',
-	'email.overlay.button2.label': 'Schliessen'
+	'email.overlay.button2.label': 'Schliessen',
+	'email.success.overlay.headline': 'E-Mail-Adresse erfolgreich gespeichert'
 };
 
 export default furtherSteps;
diff --git a/src/resources/scripts/i18n/de/furtherStepsInformal.ts b/src/resources/scripts/i18n/de/furtherStepsInformal.ts
@@ -4,10 +4,7 @@ const furtherStepsInformal = {
 	'step2.info': 'Jetzt finden wir eine_n passende_n Berater_in für Dich.',
 	'step3.info': 'Dein_e Berater_in antwortet innerhalb von 2 Werktagen.',
 	'emailNotification.infoText':
-		'Das System benachrichtigt Dich, sobald Du eine Antwort bekommen hast. Gebe dazu Deine E-Mail-Adresse an.',
-	//TODO informal version
-	'email.overlay.copy':
-		'Ihre E-Mail Adresse wird verwendet, um Sie automatisch zu informieren, wenn eine Antwort für Sie vorliegt. Ihre Beraterin bzw. Ihr Berater kann Ihre E-Mail Adresse nicht sehen. </br> Ausserdem können Sie durch die Angabe Ihrer E-Mail-Adresse Ihr Passwort zurücksetzen.',
+		'Wenn Du Deine E-Mail-Adresse angibst (freiwillig)<br><ul><li>erhälst Du eine Info E-Mail, wenn Dein_e Berater_in Dir geschrieben hat</li><li>kannst Du Dein Passwort zurücksetzen, falls Du es vergessen hast.</li></ul>Deine E-Mail-Adresse kann von den Berater_innen nicht eingesehen werden.',
 	'email.overlay.input.valid': 'Deine E-Mail-Adresse ist gültig.',
 	'email.overlay.input.invalid': 'Deine E-Mail-Adresse ist nicht gültig.'
 };