diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index bc89b4e97..8acd17245 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -52,15 +52,15 @@ const Dropdown: React.FC = ({ )}
- {defaultLabel && ( - )} {options && options.map((option) => ( - diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx index 1133f1c76..82c479574 100644 --- a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx +++ b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx @@ -63,7 +63,7 @@ const PersonalDetailsForm: React.FC = ({ options={values} value={questionValues[key]} label={question} - defaultLabel={!props.required ? t('personal_details.select_answer') : undefined} + defaultLabel={t('personal_details.select_answer')} {...props} fullWidth /> diff --git a/src/containers/AccountModal/forms/PersonalDetails.tsx b/src/containers/AccountModal/forms/PersonalDetails.tsx index c23dcf015..e9d5660d7 100644 --- a/src/containers/AccountModal/forms/PersonalDetails.tsx +++ b/src/containers/AccountModal/forms/PersonalDetails.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import type { CaptureCustomAnswer, CleengCaptureQuestionField, PersonalDetailsFormData } from 'types/account'; import { useTranslation } from 'react-i18next'; import { useHistory } from 'react-router'; @@ -24,8 +24,8 @@ const PersonalDetails = () => { const [questionValues, setQuestionValues] = useState>({}); const [questionErrors, setQuestionErrors] = useState>({}); - const fields = data ? Object.fromEntries(data.settings.map((item) => [item.key, item])) : {}; - const questions = data ? (data.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[]) : []; + const fields = useMemo(() => Object.fromEntries(data?.settings.map((item) => [item.key, item]) || []), [data]); + const questions = useMemo(() => data?.settings.filter((item) => !!(item as CleengCaptureQuestionField).question) as CleengCaptureQuestionField[] || [], [data]); const nextStep = useCallback(() => { history.replace(addQueryParam(history, 'u', accessModel === 'SVOD' ? 'choose-offer' : 'welcome')); @@ -33,7 +33,11 @@ const PersonalDetails = () => { useEffect(() => { if (data && (!data.isCaptureEnabled || !data.shouldCaptureBeDisplayed)) nextStep(); - }, [data, nextStep]); + + if (data && questions) { + setQuestionValues(Object.fromEntries(questions.map(question => [question.key, '']))) + } + }, [data, nextStep, questions]); const initialValues: PersonalDetailsFormData = { firstName: '',