create account full screen

login-workflow/docs/screens/create-account.md

@@ -2,6 +2,7 @@
 
 A screen that displays a text field to collect the user's email address. The CreateAccountScreen must be used within a `RegistrationContextProvider`.
 
+![Create Account](../../media/screens/create-account.png)
 
 ## Usage
 

login-workflow/example/ios/Podfile.lock

@@ -952,6 +952,10 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.8.2):
     - React-Core
+  - react-native-webview (13.8.1):
+    - glog
+    - RCT-Folly (= 2022.05.16.00)
+    - React-Core
   - React-nativeconfig (0.73.2)
   - React-NativeModulesApple (0.73.2):
     - glog
@@ -1199,6 +1203,7 @@ DEPENDENCIES:
   - react-native-pager-view (from `../node_modules/react-native-pager-view`)
   - react-native-restart (from `../node_modules/react-native-restart`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
+  - react-native-webview (from `../node_modules/react-native-webview`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1306,6 +1311,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-restart"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
+  react-native-webview:
+    :path: "../node_modules/react-native-webview"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1364,9 +1371,9 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: d3f49c53809116a5d38da093a8aa78bf551aed09
+  boost: d211fef46701a9df276bef51f7e86992e22929eb
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: b50f832cfe4030d3500ef82f095f609c8c0668f3
   FBLazyVector: fbc4957d9aa695250b55d879c1d86f79d7e69ab4
   FBReactNativeSpec: 86de768f89901ef6ed3207cd686362189d64ac88
   Flipper: c7a0093234c4bdd456e363f2f19b2e4b27652d44
@@ -1378,11 +1385,11 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   FlipperKit: 37525a5d056ef9b93d1578e04bc3ea1de940094f
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
-  hermes-engine: b361c9ef5ef3cda53f66e195599b47e1f84ffa35
+  glog: e519f94633ae20b610529d26c963d713c678b0b6
+  hermes-engine: ef490160118aea4fd2ee0a625a388642c204d901
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
+  RCT-Folly: e6540a6bc74fdcd89a210fcb7775d50ef41b301b
   RCTRequired: 9b1e7e262745fb671e33c51c1078d093bd30e322
   RCTTypeSafety: a759e3b086eccf3e2cbf2493d22f28e082f958e6
   React: 805f5dd55bbdb92c36b4914c64aaae4c97d358dc
@@ -1406,6 +1413,7 @@ SPEC CHECKSUMS:
   react-native-pager-view: d81ab2060b9caf57ca8c3a0d57467ff407cdb825
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
   react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
+  react-native-webview: 0f93dc8f4208ae5365884922c3cd14da5037ca4c
   React-nativeconfig: d753fbbc8cecc8ae413d615599ac378bbf6999bb
   React-NativeModulesApple: 964f4eeab1b4325e8b6a799cf4444c3fd4eb0a9c
   React-perflogger: 29efe63b7ef5fbaaa50ef6eaa92482f98a24b97e

login-workflow/src/__tests__/components/RegistrationWorkflow/RegistrationWorkflow-test.tsx

@@ -159,8 +159,8 @@ describe('RegistrationWorkflow', () => {
                 </RegistrationContextProvider>
             </PaperProvider>
         );
-        const verifyEmailInput = getByTestId('email');
-        fireEvent.changeText(verifyEmailInput, { target: { value: '[email protected]' } });
+        const verifyEmailInput = getByTestId('email-textinput');
+        fireEvent.changeText(verifyEmailInput, '[email protected]');
         const nextButton = getByText('Next');
         fireEvent.press(nextButton);
         void ((): void => expect(screen.getByText('Custom Success')).toBeInTheDocument());
@@ -242,7 +242,7 @@ describe('RegistrationWorkflow', () => {
         );
 
         fireEvent.press(screen.getAllByText('Next')[0]);
-        expect(screen.getByText('Create Account')).toBeOnTheScreen();
+        expect(screen.getByText('Create an Account')).toBeOnTheScreen();
         expect(screen.getAllByText('Next').length).toBe(5);
     });
 

login-workflow/src/__tests__/screens/CreateAccountScreen-test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { cleanup, render, fireEvent, screen } from '@testing-library/react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import renderer from 'react-test-renderer';
+import { CreateAccountScreen } from '../../screens/CreateAccountScreen';
+import { RegistrationWorkflow } from 'src/components';
+import { RegistrationContextProvider } from 'src/contexts';
+import { registrationContextProviderProps } from 'src/testUtils';
+jest.useFakeTimers();
+
+afterEach(cleanup);
+
+describe('Create Account Base', () => {
+    it('renders correctly', () => {
+        const rendered = renderer
+            .create(
+                <SafeAreaProvider>
+                    <RegistrationContextProvider {...registrationContextProviderProps}>
+                        <RegistrationWorkflow initialScreenIndex={0}>
+                            <CreateAccountScreen />
+                        </RegistrationWorkflow>
+                    </RegistrationContextProvider>
+                </SafeAreaProvider>
+            )
+            .toJSON();
+        expect(rendered).toBeTruthy();
+    });
+    it('on next press', () => {
+        const nextfn = jest.fn();
+        render(
+            <SafeAreaProvider>
+                <RegistrationContextProvider {...registrationContextProviderProps}>
+                    <RegistrationWorkflow initialScreenIndex={0}>
+                        <CreateAccountScreen
+                            WorkflowCardActionsProps={{
+                                onNext: () => nextfn(),
+                                showNext: true,
+                                nextLabel: 'NextButton',
+                            }}
+                        />
+                    </RegistrationWorkflow>
+                </RegistrationContextProvider>
+            </SafeAreaProvider>
+        );
+        const emailInput = screen.getByTestId('email-textinput');
+        fireEvent.changeText(emailInput, '[email protected]');
+        fireEvent.press(screen.getByText('NextButton'));
+        expect(nextfn).toHaveBeenCalled();
+    });
+
+    it('on previus press', () => {
+        const prevFn = jest.fn();
+        render(
+            <SafeAreaProvider>
+                <RegistrationContextProvider {...registrationContextProviderProps}>
+                    <RegistrationWorkflow initialScreenIndex={0}>
+                        <CreateAccountScreen
+                            WorkflowCardActionsProps={{
+                                onPrevious: prevFn(),
+                                showPrevious: true,
+                                previousLabel: 'Back',
+                            }}
+                        />
+                    </RegistrationWorkflow>
+                </RegistrationContextProvider>
+            </SafeAreaProvider>
+        );
+        const emailInput = screen.getByTestId('email-textinput');
+        fireEvent.changeText(emailInput, '[email protected]');
+        fireEvent.press(screen.getByText('Back'));
+        expect(prevFn).toHaveBeenCalled();
+    });
+});

login-workflow/src/components/RegistrationWorkflow/RegistrationWorkflow.tsx

@@ -3,13 +3,13 @@ import { IndividualScreenData, RegistrationWorkflowContextProvider, useRegistrat
 //TODO: Update demo screen with original workflow screens
 import {
     AccountDetailsScreen,
-    CreateAccountScreen,
     CreatePasswordScreen,
     EulaScreen,
     ExistingAccountSuccessScreen,
     RegistrationSuccessScreen,
     VerifyCodeScreen,
 } from '../../screens/DemoScreens';
+import { CreateAccountScreen } from '../../screens/CreateAccountScreen';
 import PagerView from 'react-native-pager-view';
 import { View, StyleSheet } from 'react-native';
 import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';

login-workflow/src/screens/CreateAccountScreen/CreateAccountScreen.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useState } from 'react';
+import { CreateAccountScreenProps } from './types';
+import { CreateAccountScreenBase } from './CreateAccountScreenBase';
+import { useRegistrationWorkflowContext, useRegistrationContext } from '../../contexts';
+import { useErrorManager } from '../../contexts/ErrorContext/useErrorManager';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Component that renders a screen for the user to enter their email address to start the
+ * account creation process.
+ *
+ * @param emailLabel label for the email field
+ * @param initialValue initial value for the email text field
+ * @param emailValidator function used to test the input for valid formatting
+ * @param emailTextFieldProps props to pass to the email text field
+ * @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component
+ * @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component
+ * @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
+ * @param WorkflowCardActionsProps props that will be passed to the WorkflowCardActions component
+ * @param errorDisplayConfig configuration for customizing how errors are displayed
+ *
+ * @category Component
+ */
+
+const EMAIL_REGEX = /^[A-Z0-9._%+'-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
+
+export const CreateAccountScreen: React.FC<CreateAccountScreenProps> = (props) => {
+    const { t } = useTranslation();
+    const { actions } = useRegistrationContext();
+    const regWorkflow = useRegistrationWorkflowContext();
+    const { nextScreen, previousScreen, screenData, totalScreens, currentScreen } = regWorkflow;
+    const [emailInputValue, setEmailInputValue] = useState(screenData.CreateAccount.emailAddress);
+    const [isLoading, setIsLoading] = useState(false);
+    const { triggerError, errorManagerConfig } = useErrorManager();
+    const errorDisplayConfig = {
+        ...errorManagerConfig,
+        ...props.errorDisplayConfig,
+        onClose: (): void => {
+            if (props.errorDisplayConfig && props.errorDisplayConfig.onClose) props.errorDisplayConfig.onClose();
+            if (errorManagerConfig.onClose) errorManagerConfig?.onClose();
+        },
+    };
+
+    const onNext = useCallback(async () => {
+        try {
+            setIsLoading(true);
+            await actions?.requestRegistrationCode?.(emailInputValue);
+            void nextScreen({
+                screenId: 'CreateAccount',
+                values: { emailAddress: emailInputValue },
+            });
+        } catch (_error) {
+            triggerError(_error as Error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [actions, emailInputValue, nextScreen, triggerError]);
+
+    const onPrevious = (): void => {
+        previousScreen({
+            screenId: 'CreateAccount',
+            values: { emailAddress: emailInputValue },
+        });
+    };
+
+    const {
+        WorkflowCardBaseProps,
+        WorkflowCardHeaderProps,
+        WorkflowCardInstructionProps,
+        WorkflowCardActionsProps,
+        emailLabel = t('bluiCommon:LABELS.EMAIL'),
+        initialValue = screenData.CreateAccount.emailAddress,
+        emailValidator = (email: string): boolean | string => {
+            if (!EMAIL_REGEX.test(email)) {
+                return t('bluiCommon:MESSAGES.EMAIL_ENTRY_ERROR');
+            }
+            return true;
+        },
+        emailTextFieldProps,
+    } = props;
+
+    const workflowCardBaseProps = {
+        loading: isLoading,
+        ...WorkflowCardBaseProps,
+    };
+
+    const workflowCardHeaderProps = {
+        title: t('bluiRegistration:REGISTRATION.STEPS.CREATE_ACCOUNT'),
+        ...WorkflowCardHeaderProps,
+    };
+
+    const workflowCardInstructionProps = {
+        instructions: t('bluiRegistration:SELF_REGISTRATION.INSTRUCTIONS'),
+        ...WorkflowCardInstructionProps,
+    };
+
+    const workflowCardActionsProps = {
+        showNext: true,
+        nextLabel: t('bluiCommon:ACTIONS.NEXT'),
+        showPrevious: true,
+        previousLabel: t('bluiCommon:ACTIONS.BACK'),
+        canGoPrevious: true,
+        currentStep: currentScreen,
+        totalSteps: totalScreens,
+        ...WorkflowCardActionsProps,
+        onNext: (): void => {
+            void onNext();
+            WorkflowCardActionsProps?.onNext?.();
+        },
+        onPrevious: (): void => {
+            void onPrevious();
+            WorkflowCardActionsProps?.onPrevious?.();
+        },
+    };
+
+    const onEmailInputValueChange = (e: any): void => {
+        setEmailInputValue(e.target.value);
+    };
+
+    return (
+        <CreateAccountScreenBase
+            WorkflowCardBaseProps={workflowCardBaseProps}
+            WorkflowCardHeaderProps={workflowCardHeaderProps}
+            WorkflowCardInstructionProps={workflowCardInstructionProps}
+            emailLabel={emailLabel}
+            initialValue={
+                screenData.CreateAccount.emailAddress.length > 0 ? screenData.CreateAccount.emailAddress : initialValue
+            }
+            emailTextFieldProps={{ ...emailTextFieldProps, onChange: onEmailInputValueChange }}
+            emailValidator={emailValidator}
+            WorkflowCardActionsProps={workflowCardActionsProps}
+            errorDisplayConfig={errorDisplayConfig}
+        />
+    );
+};

login-workflow/src/screens/CreateAccountScreen/index.ts

@@ -1,2 +1,3 @@
 export * from './types';
 export * from './CreateAccountScreenBase';
+export * from './CreateAccountScreen';

login-workflow/src/screens/DemoScreens/index.ts

@@ -1,5 +1,4 @@
 export * from './AccountDetailsScreen';
-export * from './CreateAccountScreen';
 export * from './CreatePasswordScreen';
 export * from './EulaScreen';
 export * from './VerifyCodeScreen';