feat(user): add personal details form to modal

src/components/Layout/Layout.tsx

@@ -64,7 +64,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   };
 
   const signUpButtonClickHandler = () => {
-    history.push(addQueryParam(history, 'u', 'create_account'));
+    history.push(addQueryParam(history, 'u', 'create-account'));
   };
 
   const toggleUserMenu = (value: boolean) =>

src/components/PersonalDetailsForm/PersonalDetailsForm.module.scss

@@ -0,0 +1,36 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.title {
+  margin-bottom: 24px;
+  font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  font-size: 24px;
+}
+
+.error {
+  margin-bottom: 24px;
+  padding: 16px;
+  color: variables.$white;
+  font-family: theme.$body-font-family;
+  font-size: 18px;
+  background-color: theme.$form-error-bg-color;
+  border-radius: 4px;
+}
+
+.continue {
+  margin: variables.$base-spacing 0;
+}
+
+.form {
+  max-height: 500px;
+  overflow-y: auto;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  scrollbar-width: none; /* for Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
+  }
+  > div {
+    margin: 12px 0;
+  }
+}

src/components/PersonalDetailsForm/PersonalDetailsForm.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import PersonalDetailsForm from './PersonalDetailsForm';
+
+describe.skip('<PersonalDetailsForm>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<PersonalDetailsForm />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/PersonalDetailsForm/PersonalDetailsForm.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { PersonalDetailsFormData, PersonalDetailsCustomField } from 'types/account';
+
+import type { FormErrors } from '../../hooks/useForm';
+import TextField from '../TextField/TextField';
+import Button from '../Button/Button';
+import Dropdown from '../Dropdown/Dropdown';
+import Checkbox from '../Checkbox/Checkbox';
+import Radio from '../Radio/Radio';
+import DateField from '../DateField/DateField';
+
+import styles from './PersonalDetailsForm.module.scss';
+
+type Props = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  error?: string;
+  errors: FormErrors<PersonalDetailsFormData>;
+  values: PersonalDetailsFormData;
+  submitting: boolean;
+  fields: PersonalDetailsCustomField[];
+};
+
+const PersonalDetailsForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting, fields }: Props) => {
+  const { t } = useTranslation('account');
+
+  const renderCustomFields = () =>
+    fields.map((field, index) => {
+      if (field.type === 'dropdown') {
+        return (
+          <Dropdown
+            key={index}
+            value={values[field.name]}
+            onChange={onChange}
+            label={field.question}
+            options={field.values}
+            name={field.name}
+            fullWidth
+          />
+        );
+      }
+
+      if (field.type === 'radio') {
+        return <Radio name={field.name} header={field.question} key={index} values={field.values} onChange={onChange} />;
+      }
+
+      if (field.type === 'checkbox') {
+        return <Checkbox header={field.question} key={index} value={false} onChange={onChange} label={field.value} name={field.name} />;
+      }
+
+      if (field.type === 'date') {
+        return (
+          <DateField
+            key={index}
+            value={values[field.name]}
+            onChange={onChange}
+            label={t(`personal_details.${field.name}`)}
+            placeholder={'mm/dd/yyyy'}
+            error={!!errors[field.name]}
+            helperText={errors[field.name]}
+            name={field.name}
+          />
+        );
+      }
+
+      return (
+        <TextField
+          key={index}
+          value={values[field.name]}
+          onChange={onChange}
+          label={t(`personal_details.${field.name}`)}
+          placeholder={t(`personal_details.${field.name}`)}
+          error={!!errors[field.name] || !!errors.form}
+          helperText={errors[field.name]}
+          name={field.name}
+          type={field.type}
+        />
+      );
+    });
+
+  return (
+    <form className={styles.form} onSubmit={onSubmit} data-testid="personal_details-form">
+      <h2 className={styles.title}>{t('personal_details.personal_details')}</h2>
+      {errors.form ? <div className={styles.error}>{errors.form}</div> : null}
+      {renderCustomFields()}
+      <Button
+        className={styles.continue}
+        type="submit"
+        label={t('personal_details.continue')}
+        variant="contained"
+        color="primary"
+        size="large"
+        disabled={submitting}
+        fullWidth
+      />
+    </form>
+  );
+};
+
+export default PersonalDetailsForm;

src/components/TextField/TextField.tsx

@@ -11,7 +11,7 @@ type Props = {
   placeholder?: string;
   name?: string;
   value: string;
-  type?: 'text' | 'email' | 'password' | 'search';
+  type?: 'text' | 'email' | 'password' | 'search' | 'number' | 'date';
   onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onFocus?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;

src/containers/AccountModal/AccountModal.tsx

@@ -8,6 +8,8 @@ import { removeQueryParam } from '../../utils/history';
 
 import styles from './AccountModal.module.scss';
 import Login from './forms/Login';
+import Registration from './forms/Registration';
+import PersonalDetails from './forms/PersonalDetails';
 
 const AccountModal = () => {
   const history = useHistory();
@@ -21,11 +23,21 @@ const AccountModal = () => {
     history.push(removeQueryParam(history, 'u'));
   };
 
+  const renderForm = () => {
+    switch (view) {
+      case 'login':
+        return <Login />;
+      case 'create-account':
+        return <Registration />;
+      case 'personal-details':
+        return <PersonalDetails />;
+    }
+  };
+
   return (
     <Dialog open={!!view} onClose={closeHandler}>
       <div className={styles.banner}>{banner ? <img src={banner} alt="" /> : null}</div>
-      <Login />
-
+      {renderForm()}
     </Dialog>
   );
 };