feat(additionalEnquiry)

index.ts

@@ -21,7 +21,6 @@ export * from './src/components/overlay/Overlay';
 export * from './src/components/serviceExplanation/ServiceExplanation';
 export * from './src/components/inputField/InputField';
 export * from './src/components/agencySelection/agencySelectionHelpers';
-export * from './src/components/profile/AskerRegistrationExternalAgencyOverlay';
 
 // Data
 export * from './src/globalState/provider/TenantProvider';

src/api/apiGetAgenciesByTenant.ts

@@ -0,0 +1,15 @@
+import { endpoints } from '../resources/scripts/endpoints';
+import { FETCH_ERRORS, FETCH_METHODS, fetchData } from './fetchData';
+
+export const apiGetAgenciesByTenant = async (
+	postcode: string,
+	topicId: number
+): Promise<any[]> => {
+	const url = `${endpoints.agenciesByTenant}?postcode=${postcode}&topicId=${topicId}`;
+
+	return fetchData({
+		url,
+		method: FETCH_METHODS.GET,
+		responseHandling: [FETCH_ERRORS.EMPTY]
+	});
+};

src/api/apiGetTenantAgenciesTopics.ts

@@ -0,0 +1,17 @@
+import { fetchData, FETCH_METHODS, FETCH_ERRORS } from './fetchData';
+import { endpoints } from '../resources/scripts/endpoints';
+
+export interface TenantAgenciesTopicsInterface {
+	id: number;
+	name: string;
+}
+
+export const apiGetTenantAgenciesTopics = async (): Promise<
+	TenantAgenciesTopicsInterface[]
+> => {
+	return fetchData({
+		url: `${endpoints.agencyTopics}`,
+		method: FETCH_METHODS.GET,
+		responseHandling: [FETCH_ERRORS.CATCH_ALL]
+	});
+};

src/api/apiRegistrationNewConsultingTypes.ts → src/api/apiPostAdditionalEnquiry.ts

@@ -8,22 +8,21 @@ import {
 
 interface registrationResponse {
 	sessionId: number;
+	rcGroupId: string;
 }
 
-export const apiRegistrationNewConsultingTypes = async (
+export const apiPostAdditionalEnquiry = async (
 	consultingType: number,
 	agencyId: number,
 	postcode: string,
-	consultantId?: string,
-	topicIds?: number[]
+	mainTopicId: number
 ): Promise<registrationResponse> => {
-	const url = endpoints.registerAskerNewConsultingType;
+	const url = endpoints.additionalEnquiry;
 	const data = JSON.stringify({
 		postcode,
 		agencyId,
 		consultingType,
-		consultantId,
-		...(topicIds ? { topicIds: topicIds } : {})
+		mainTopicId
 	});
 
 	return fetchData({

src/api/fetchData.ts

@@ -40,7 +40,9 @@ export const FETCH_ERRORS = {
 
 export const X_REASON = {
 	EMAIL_NOT_AVAILABLE: 'EMAIL_NOT_AVAILABLE',
-	USERNAME_NOT_AVAILABLE: 'USERNAME_NOT_AVAILABLE'
+	USERNAME_NOT_AVAILABLE: 'USERNAME_NOT_AVAILABLE',
+	USER_ALREADY_REGISTERED_WITH_AGENCY_AND_TOPIC:
+		'USER_ALREADY_REGISTERED_WITH_AGENCY_AND_TOPIC'
 };
 
 export const FETCH_SUCCESS = {

src/api/index.ts

@@ -2,6 +2,7 @@ export * from './apiAgencySelection';
 export * from './apiDeleteAskerAccount';
 export * from './apiDraftMessages';
 export * from './apiEnquiryAcceptance';
+export * from './apiGetAgenciesByTenant';
 export * from './apiGetAgencyConsultantList';
 export * from './apiGetAgencyId';
 export * from './apiGetAskerSessionList';
@@ -14,10 +15,12 @@ export * from './apiGetApiAppointmentServiceEventTypes';
 export * from './apiGetAppointmentsServiceBookingEventsByUserId';
 export * from './apiGetGroupChatInfo';
 export * from './apiGetSessionData';
+export * from './apiGetTenantAgenciesTopics';
 export * from './apiGetUserData';
 export * from './apiGroupChatSettings';
 export * from './apiLogoutKeycloak';
 export * from './apiLogoutRocketchat';
+export * from './apiPostAdditionalEnquiry';
 export * from './apiPostRegistration';
 export * from './apiPutArchive';
 export * from './apiPutDearchive';
@@ -26,7 +29,6 @@ export * from './apiPutGroupChat';
 export * from './apiPatchConsultantData';
 export * from './apiPutConsultantData';
 export * from './apiPutEmail';
-export * from './apiRegistrationNewConsultingTypes';
 export * from './apiRejectVideoCall';
 export * from './apiSendEnquiry';
 export * from './apiSendMessage';

src/components/profile/AdditionalEnquiry/AdditionalAgencySelection.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { AgencyDataInterface } from '../../../globalState/interfaces';
+import { apiGetAgenciesByTenant, FETCH_ERRORS } from '../../../api';
+import { InputField, InputFieldItem } from '../../inputField/InputField';
+import '../../agencySelection/agencySelection.styles';
+import '../profile.styles';
+import { Text } from '../../text/Text';
+import { Headline } from '../../headline/Headline';
+import { useTranslation } from 'react-i18next';
+import { AgencyRadioSelect } from '../../agencyRadioSelect/AgencyRadioSelect';
+import { VALID_POSTCODE_LENGTH } from '../../agencySelection/agencySelectionHelpers';
+
+export interface AdditionalAgencySelectionProps {
+	onAgencyChange: Function;
+	onPostcodeChange: Function;
+	selectedTopicId: number;
+}
+
+export const AdditionalAgencySelection = (
+	props: AdditionalAgencySelectionProps
+) => {
+	const { t: translate } = useTranslation(['common', 'agencies']);
+	const [proposedAgencies, setProposedAgencies] = useState<
+		AgencyDataInterface[] | null
+	>(null);
+	const [selectedPostcode, setSelectedPostcode] = useState('');
+	const [selectedAgency, setSelectedAgency] =
+		useState<AgencyDataInterface | null>(null);
+	const validPostcode = () =>
+		selectedPostcode?.length === VALID_POSTCODE_LENGTH;
+
+	const isSelectedAgencyValidated = () =>
+		validPostcode() && typeof selectedAgency?.id === 'number';
+
+	useEffect(() => {
+		if (isSelectedAgencyValidated()) {
+			const agency = {
+				...selectedAgency,
+				postcode: selectedPostcode
+			};
+			props.onAgencyChange(agency);
+			props.onPostcodeChange(selectedPostcode);
+		} else {
+			props.onAgencyChange(null);
+			props.onPostcodeChange(null);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedAgency, selectedPostcode]);
+
+	useEffect(() => {
+		if (validPostcode()) {
+			apiGetAgenciesByTenant(selectedPostcode, props.selectedTopicId)
+				.then((agencies) => {
+					setProposedAgencies(agencies);
+					setSelectedAgency(agencies[0]);
+				})
+				.catch((err: any) => {
+					if (err.message === FETCH_ERRORS.EMPTY) {
+						setProposedAgencies(null);
+						setSelectedAgency(null);
+					}
+				});
+		} else if (proposedAgencies) {
+			setProposedAgencies(null);
+			setSelectedAgency(null);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedPostcode, props.selectedTopicId]);
+
+	const postcodeInputItem: InputFieldItem = {
+		name: 'postcode',
+		class: 'asker__registration__postcodeInput',
+		id: 'postcode',
+		type: 'number',
+		label: translate('registration.agencySelection.postcode.label'),
+		content: selectedPostcode,
+		maxLength: VALID_POSTCODE_LENGTH,
+		pattern: '^[0-9]+$'
+	};
+
+	const handlePostcodeInput = (e) => {
+		setSelectedPostcode(e.target.value);
+	};
+
+	const introItemsTranslations = [
+		'registration.agencySelection.intro.point1',
+		'registration.agencySelection.intro.point2',
+		'registration.agencySelection.intro.point3'
+	];
+
+	return (
+		<div className="agencySelection">
+			<>
+				<Headline
+					semanticLevel="5"
+					text={translate('registration.agencySelection.headline')}
+				/>
+				<div className="agencySelection__intro">
+					<Text
+						text={translate(
+							'registration.agencySelection.intro.overline'
+						)}
+						type="standard"
+					/>
+					<div className="agencySelection__intro__content">
+						<Text
+							text={translate(
+								'registration.agencySelection.intro.subline'
+							)}
+							type="standard"
+						/>
+						<ul>
+							{introItemsTranslations.map(
+								(introItemTranslation, i) => (
+									<li key={i}>
+										<Text
+											text={translate(
+												introItemTranslation
+											)}
+											type="standard"
+										/>
+									</li>
+								)
+							)}
+						</ul>
+					</div>
+				</div>
+
+				<InputField
+					item={postcodeInputItem}
+					inputHandle={(e) => handlePostcodeInput(e)}
+				/>
+				{validPostcode() && (
+					<div className="agencySelection__proposedAgencies">
+						<h3>
+							{translate(
+								'registration.agencySelection.title.start'
+							)}{' '}
+							{selectedPostcode}
+							{translate(
+								'registration.agencySelection.title.end'
+							)}
+						</h3>
+						{proposedAgencies ? (
+							proposedAgencies.map(
+								(proposedAgency: AgencyDataInterface) => (
+									<AgencyRadioSelect
+										key={`agency-${proposedAgency.id}`}
+										agency={proposedAgency}
+										checkedValue={proposedAgencies[0].id.toString()}
+										showTooltipAbove={true}
+										onChange={() =>
+											setSelectedAgency(proposedAgency)
+										}
+									/>
+								)
+							)
+						) : (
+							<Text
+								text={translate(
+									'registration.agencySelection.noAgencies'
+								)}
+								type="infoLargeAlternative"
+							/>
+						)}
+					</div>
+				)}
+			</>
+		</div>
+	);
+};