Manual Registration UI Layout

src/components/core/BigButton/index.tsx

@@ -5,7 +5,13 @@ import { styles } from './styles';
 import { Props } from './types';
 import { typographyStyles } from 'styles';
 
-const BigButton: FC<Props> = ({ title, onPress, disabled }) => (
+const BigButton: FC<Props> = ({
+  title,
+  onPress,
+  disabled,
+  loading,
+  testID,
+}) => (
   <Button
     titleStyle={[typographyStyles.overlineBig, styles.titleStyle]}
     disabledTitleStyle={styles.disabledStyle}
@@ -13,6 +19,8 @@ const BigButton: FC<Props> = ({ title, onPress, disabled }) => (
     buttonStyle={styles.containerStyle}
     onPress={onPress}
     title={title}
+    loading={loading}
+    testID={testID}
   />
 );
 

src/components/core/BigButton/types.ts

 export interface Props {
   title: string;
   onPress: () => void;
+  loading?: boolean;
   disabled?: true;
   testID?: string;
 }

src/constants/navigation.ts

@@ -5,6 +5,7 @@ import {
   ComingSoonPage,
   DietelaQuizResult,
   InitialPage,
+  ManualRegistrationPage,
   ProgramDetail,
 } from 'scenes';
 import { FC } from 'react';
@@ -35,7 +36,6 @@ export const navigation: NavRoute[] = [
     component: ChoosePlan,
     header: 'Choose Plan',
   },
-  // COMING SOON
   {
     name: ROUTES.cart,
     component: ComingSoonPage,
@@ -51,4 +51,9 @@ export const navigation: NavRoute[] = [
     component: ComingSoonPage,
     header: 'Nutrisionis',
   },
+  {
+    name: ROUTES.registration,
+    component: ManualRegistrationPage,
+    header: 'Registrasi',
+  },
 ];

src/constants/routes.ts

@@ -9,3 +9,5 @@ export const cart = 'cart';
 export const choosePlan = `${cart}/choose-plan`;
 export const programDetail = 'dietela-program';
 export const nutritionistDetail = 'nutritionist';
+
+export const registration = 'registration';

src/mocks/auth.ts

+export const validRegistrationValues: { [_: string]: any } = {
+  name: 'Doan Didinding',
+  email: 'doan@dietela.com',
+  password1: 'g8ake1afig',
+  password2: 'g8ake1afig',
+};

src/scenes/common/ManualRegistrationPage/index.test.tsx

+import React from 'react';
+import { render, fireEvent } from 'utils/testing';
+import * as ROUTES from 'constants/routes';
+
+import ManualRegistrationPage from '.';
+import { textField } from './schema';
+import { validRegistrationValues } from 'mocks/auth';
+
+describe('ManualRegistrationPage', () => {
+  it('renders correctly', () => {
+    render(<ManualRegistrationPage />, ROUTES.registration);
+  });
+
+  it('success when all field is valid', async () => {
+    const { getByPlaceholderText, getByTestId } = render(
+      <ManualRegistrationPage />,
+      ROUTES.registration,
+    );
+
+    textField.map(({ name, placeholder }) => {
+      const formField = getByPlaceholderText(placeholder as string);
+      fireEvent.changeText(formField, validRegistrationValues[name]);
+    });
+
+    const submitButton = getByTestId('submitButton');
+    fireEvent.press(submitButton);
+  });
+});

src/scenes/common/ManualRegistrationPage/index.tsx

+import React, { FC } from 'react';
+import { useForm } from 'hooks';
+import { fieldValidation, initialValues, textField } from './schema';
+import { generateValidationSchema } from 'utils/form';
+import { TextField } from 'components/form';
+import { ScrollView } from 'react-native-gesture-handler';
+import { layoutStyles } from 'styles';
+import { BigButton } from 'components/core';
+
+const isPasswordField = (name: string) =>
+  name === 'password1' || name === 'password2';
+
+const ManualRegistrationPage: FC = () => {
+  const { getTextInputProps, handleSubmit, isSubmitting } = useForm({
+    initialValues,
+    validationSchema: generateValidationSchema(fieldValidation),
+    onSubmit: async (values) => {
+      console.log(values);
+    },
+  });
+
+  return (
+    <ScrollView contentContainerStyle={layoutStyles}>
+      {textField.map((fieldProps, i) => {
+        return (
+          <TextField
+            key={`field${i}`}
+            label={fieldProps.label}
+            required={fieldProps.required}
+            placeholder={fieldProps.placeholder}
+            {...getTextInputProps(fieldProps.name)}
+            secureTextEntry={isPasswordField(fieldProps.name)}
+          />
+        );
+      })}
+      <BigButton
+        title="daftarkan akun"
+        onPress={handleSubmit}
+        loading={isSubmitting}
+        testID="submitButton"
+      />
+    </ScrollView>
+  );
+};
+
+export default ManualRegistrationPage;

src/scenes/common/ManualRegistrationPage/schema.ts

+import { TextFieldSchema } from 'types/form';
+import { FieldType, FieldValidation } from 'utils/form';
+
+export const textField: TextFieldSchema[] = [
+  {
+    label: 'Nama',
+    placeholder: 'Masukkan nama Anda',
+    required: true,
+    name: 'name',
+  },
+  {
+    label: 'Email address',
+    placeholder: 'Masukkan email Anda',
+    required: true,
+    name: 'email',
+  },
+  {
+    label: 'Password',
+    placeholder: 'Masukkan password Anda',
+    required: true,
+    name: 'password1',
+  },
+  {
+    label: 'Konfirmasi password',
+    placeholder: 'Konfirmasi password Anda',
+    required: true,
+    name: 'password2',
+  },
+];
+
+export const initialValues = {
+  name: '',
+  email: '',
+  password1: '',
+  password2: '',
+};
+
+export const fieldValidation: FieldValidation[] = [
+  {
+    name: 'name',
+    required: true,
+    label: 'Nama',
+    type: FieldType.TEXT,
+  },
+  {
+    name: 'email',
+    required: true,
+    label: 'Email address',
+    type: FieldType.EMAIL,
+  },
+  {
+    name: 'password1',
+    required: true,
+    label: 'Password',
+    type: FieldType.PASSWORD,
+  },
+  {
+    name: 'password2',
+    required: true,
+    label: 'Konfirmasi password',
+    type: FieldType.CONFIRM_PASSWORD,
+    matches: 'password1',
+  },
+];

src/scenes/index.ts

+export { default as InitialPage } from './common/InitialPage';
+export { default as ComingSoonPage } from './common/ComingSoonPage';
+export { default as ManualRegistrationPage } from './common/ManualRegistrationPage';
+
 export { default as AllAccessQuestionnaire } from './questionnaire/AllAccessQuestionnaire';
+export { default as DietelaQuizResult } from './questionnaire/DietelaQuizResult';
+
 export { default as ChoosePlan } from './cart/ChoosePlan';
 export { default as ProgramDetail } from './cart/ProgramDetail';
-export { default as ComingSoonPage } from './common/ComingSoonPage';
-export { default as DietelaQuizResult } from './questionnaire/DietelaQuizResult';
-export { default as InitialPage } from './common/InitialPage';

src/utils/form.ts

@@ -5,6 +5,8 @@ export enum FieldType {
   EMAIL = 'email',
   RADIO_BUTTON = 'radiobutton',
   CHECKBOX = 'checkbox',
+  PASSWORD = 'password',
+  CONFIRM_PASSWORD = 'confirmpassword',
 }
 
 export interface FieldValidation {
@@ -12,6 +14,7 @@ export interface FieldValidation {
   required?: boolean;
   label?: string;
   type: FieldType;
+  matches?: string;
 }
 
 export const generateValidationSchema = (fields: FieldValidation[]) => {
@@ -42,6 +45,17 @@ export const generateValidationSchema = (fields: FieldValidation[]) => {
           'Pilih semua yang berlaku',
         );
         break;
+      case FieldType.PASSWORD:
+        validationSchema[field.name] = Yup.string()
+          .required('Password harus diisi')
+          .min(8, 'Minimal 8 karakter');
+        break;
+      case FieldType.CONFIRM_PASSWORD:
+        validationSchema[field.name] = Yup.string().oneOf(
+          [Yup.ref(field.matches!), null],
+          'Konfirmasi password tidak sama',
+        );
+        break;
       default:
         break;
     }