Skip to content

Commit d42bc14

Browse files
blimpichblimpich
authored
Merge pull request Expensify#64625 from allgandalf/issue/63704
2 parents a91f433 + b26837b commit d42bc14

4 files changed

Lines changed: 160 additions & 113 deletions

File tree

‎src/components/OnboardingMergingAccountBlockedView.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import useLocalize from '@hooks/useLocalize';
3+
import useThemeStyles from '@hooks/useThemeStyles';
4+
import Navigation from '@libs/Navigation/Navigation';
5+
import variables from '@styles/variables';
6+
import {setOnboardingErrorMessage} from '@userActions/Welcome';
7+
import ROUTES from '@src/ROUTES';
8+
import BlockingView from './BlockingViews/BlockingView';
9+
import Button from './Button';
10+
import {ToddBehindCloud} from './Icon/Illustrations';
11+
12+
type OnboardingMergingAccountBlockedViewProps = {
13+
// Work email to display in the subtitle
14+
workEmail: string | undefined;
15+
16+
// Whether the user is a VSB
17+
isVsb: boolean | undefined;
18+
};
19+
20+
function OnboardingMergingAccountBlockedView({workEmail, isVsb}: OnboardingMergingAccountBlockedViewProps) {
21+
const styles = useThemeStyles();
22+
const {translate} = useLocalize();
23+
return (
24+
<>
25+
<BlockingView
26+
icon={ToddBehindCloud}
27+
iconWidth={variables.modalTopIconWidth}
28+
iconHeight={variables.modalTopIconHeight}
29+
title={translate('onboarding.mergeBlockScreen.title')}
30+
subtitle={translate('onboarding.mergeBlockScreen.subtitle', {workEmail})}
31+
subtitleStyle={[styles.colorMuted]}
32+
/>
33+
<Button
34+
success
35+
large
36+
style={[styles.mb5]}
37+
text={translate('common.buttonConfirm')}
38+
onPress={() => {
39+
setOnboardingErrorMessage('');
40+
if (isVsb) {
41+
Navigation.navigate(ROUTES.ONBOARDING_ACCOUNTING.getRoute());
42+
return;
43+
}
44+
Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute());
45+
}}
46+
/>
47+
</>
48+
);
49+
}
50+
51+
OnboardingMergingAccountBlockedView.displayName = 'OnboardingMergingAccountBlockedView';
52+
53+
export default OnboardingMergingAccountBlockedView;

‎src/libs/actions/Session/index.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1279,7 +1279,6 @@ function AddWorkEmail(workEmail: string) {
12791279
onyxMethod: Onyx.METHOD.MERGE,
12801280
key: ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM,
12811281
value: {
1282-
onboardingWorkEmail: workEmail,
12831282
isLoading: false,
12841283
},
12851284
},
@@ -1290,10 +1289,16 @@ function AddWorkEmail(workEmail: string) {
12901289
onyxMethod: Onyx.METHOD.MERGE,
12911290
key: ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM,
12921291
value: {
1293-
onboardingWorkEmail: null,
12941292
isLoading: false,
12951293
},
12961294
},
1295+
{
1296+
onyxMethod: Onyx.METHOD.MERGE,
1297+
key: ONYXKEYS.NVP_ONBOARDING,
1298+
value: {
1299+
isMergingAccountBlocked: true,
1300+
},
1301+
},
12971302
];
12981303

12991304
API.write(

‎src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx‎

Lines changed: 95 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
1111
import Icon from '@components/Icon';
1212
import * as Illustrations from '@components/Icon/Illustrations';
1313
import OfflineWithFeedback from '@components/OfflineWithFeedback';
14+
import OnboardingMergingAccountBlockedView from '@components/OnboardingMergingAccountBlockedView';
1415
import ScreenWrapper from '@components/ScreenWrapper';
1516
import Text from '@components/Text';
1617
import TextInput from '@components/TextInput';
@@ -138,103 +139,112 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
138139
<ScreenWrapper
139140
shouldEnableMaxHeight={!isMobileSafari()}
140141
shouldAvoidScrollOnVirtualViewport={!isMobileSafari()}
141-
includeSafeAreaPaddingBottom={isOffline}
142+
includeSafeAreaPaddingBottom
142143
testID="BaseOnboardingWorkEmail"
143144
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
144145
>
145146
<HeaderWithBackButton
146147
progressBarPercentage={10}
147148
shouldShowBackButton={false}
148149
/>
149-
<FormProvider
150-
style={[styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
151-
formID={ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM}
152-
validate={validate}
153-
onSubmit={submitWorkEmail}
154-
submitButtonText={translate('onboarding.workEmail.addWorkEmail')}
155-
enabledWhenOffline
156-
submitFlexEnabled
157-
shouldValidateOnBlur={false}
158-
shouldValidateOnChange={shouldValidateOnChange}
159-
shouldTrimValues={false}
160-
footerContent={
161-
<OfflineWithFeedback
162-
shouldDisplayErrorAbove
163-
style={styles.mb3}
164-
errors={onboardingErrorMessage ? {addWorkEmailError: onboardingErrorMessage} : undefined}
165-
errorRowStyles={[styles.mt2, styles.textWrap]}
166-
onClose={() => setOnboardingErrorMessage('')}
167-
>
168-
<Button
169-
large
170-
text={translate('common.skip')}
171-
testID="onboardingPrivateEmailSkipButton"
172-
onPress={() => {
173-
setOnboardingErrorMessage('');
174-
175-
setOnboardingMergeAccountStepValue(true, true);
176-
}}
177-
/>
178-
</OfflineWithFeedback>
179-
}
180-
shouldRenderFooterAboveSubmit
181-
shouldHideFixErrorsAlert
182-
>
183-
<View>
184-
<View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
185-
<Text style={styles.textHeadlineH1}>{translate('onboarding.workEmail.title')}</Text>
186-
</View>
187-
<View style={styles.mb2}>
188-
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.workEmail.subtitle')}</Text>
189-
</View>
150+
{onboardingValues?.isMergingAccountBlocked ? (
151+
<View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
152+
<OnboardingMergingAccountBlockedView
153+
workEmail={workEmail}
154+
isVsb={isVsb}
155+
/>
156+
</View>
157+
) : (
158+
<FormProvider
159+
style={[styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}
160+
formID={ONYXKEYS.FORMS.ONBOARDING_WORK_EMAIL_FORM}
161+
validate={validate}
162+
onSubmit={submitWorkEmail}
163+
submitButtonText={translate('onboarding.workEmail.addWorkEmail')}
164+
enabledWhenOffline
165+
submitFlexEnabled
166+
shouldValidateOnBlur={false}
167+
shouldValidateOnChange={shouldValidateOnChange}
168+
shouldTrimValues={false}
169+
footerContent={
170+
<OfflineWithFeedback
171+
shouldDisplayErrorAbove
172+
style={styles.mb3}
173+
errors={onboardingErrorMessage ? {addWorkEmailError: onboardingErrorMessage} : undefined}
174+
errorRowStyles={[styles.mt2, styles.textWrap]}
175+
onClose={() => setOnboardingErrorMessage('')}
176+
>
177+
<Button
178+
large
179+
text={translate('common.skip')}
180+
testID="onboardingPrivateEmailSkipButton"
181+
onPress={() => {
182+
setOnboardingErrorMessage('');
183+
184+
setOnboardingMergeAccountStepValue(true, true);
185+
}}
186+
/>
187+
</OfflineWithFeedback>
188+
}
189+
shouldRenderFooterAboveSubmit
190+
shouldHideFixErrorsAlert
191+
>
190192
<View>
191-
{section.map((item) => {
192-
return (
193-
<View
194-
key={item.titleTranslationKey}
195-
style={[styles.mt2, styles.mb3]}
196-
>
197-
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
198-
<Icon
199-
src={item.icon}
200-
height={ICON_SIZE}
201-
width={ICON_SIZE}
202-
additionalStyles={[styles.mr3]}
203-
/>
204-
<View style={[styles.flexColumn, styles.flex1]}>
205-
{item.shouldRenderEmail ? (
206-
<AutoEmailLink
207-
style={[styles.textStrong, styles.lh20]}
208-
text={translate(item.titleTranslationKey)}
209-
/>
210-
) : (
211-
<Text style={[styles.textStrong, styles.lh20]}>{translate(item.titleTranslationKey)}</Text>
212-
)}
193+
<View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb3]}>
194+
<Text style={styles.textHeadlineH1}>{translate('onboarding.workEmail.title')}</Text>
195+
</View>
196+
<View style={styles.mb2}>
197+
<Text style={[styles.textNormal, styles.colorMuted]}>{translate('onboarding.workEmail.subtitle')}</Text>
198+
</View>
199+
<View>
200+
{section.map((item) => {
201+
return (
202+
<View
203+
key={item.titleTranslationKey}
204+
style={[styles.mt2, styles.mb3]}
205+
>
206+
<View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
207+
<Icon
208+
src={item.icon}
209+
height={ICON_SIZE}
210+
width={ICON_SIZE}
211+
additionalStyles={[styles.mr3]}
212+
/>
213+
<View style={[styles.flexColumn, styles.flex1]}>
214+
{item.shouldRenderEmail ? (
215+
<AutoEmailLink
216+
style={[styles.textStrong, styles.lh20]}
217+
text={translate(item.titleTranslationKey)}
218+
/>
219+
) : (
220+
<Text style={[styles.textStrong, styles.lh20]}>{translate(item.titleTranslationKey)}</Text>
221+
)}
222+
</View>
213223
</View>
214224
</View>
215-
</View>
216-
);
217-
})}
225+
);
226+
})}
227+
</View>
218228
</View>
219-
</View>
220229

221-
<View style={[styles.mb4, styles.pt3]}>
222-
<InputWrapper
223-
InputComponent={TextInput}
224-
// We do not want to auto-focus for mobile platforms
225-
ref={operatingSystem !== CONST.OS.ANDROID && operatingSystem !== CONST.OS.IOS ? inputCallbackRef : undefined}
226-
name="fname"
227-
inputID={INPUT_IDS.ONBOARDING_WORK_EMAIL}
228-
label={translate('common.workEmail')}
229-
aria-label={translate('common.workEmail')}
230-
role={CONST.ROLE.PRESENTATION}
231-
defaultValue={workEmail ?? ''}
232-
shouldSaveDraft
233-
maxLength={CONST.LOGIN_CHARACTER_LIMIT}
234-
spellCheck={false}
235-
/>
236-
</View>
237-
</FormProvider>
230+
<View style={[styles.mb4, styles.pt3]}>
231+
<InputWrapper
232+
InputComponent={TextInput}
233+
// We do not want to auto-focus for mobile platforms
234+
ref={operatingSystem !== CONST.OS.ANDROID && operatingSystem !== CONST.OS.IOS ? inputCallbackRef : undefined}
235+
name="fname"
236+
inputID={INPUT_IDS.ONBOARDING_WORK_EMAIL}
237+
label={translate('common.workEmail')}
238+
aria-label={translate('common.workEmail')}
239+
role={CONST.ROLE.PRESENTATION}
240+
defaultValue={workEmail ?? ''}
241+
shouldSaveDraft
242+
maxLength={CONST.LOGIN_CHARACTER_LIMIT}
243+
spellCheck={false}
244+
/>
245+
</View>
246+
</FormProvider>
247+
)}
238248
</ScreenWrapper>
239249
);
240250
}

‎src/pages/OnboardingWorkEmailValidation/BaseOnboardingWorkEmailValidation.tsx‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import {useIsFocused} from '@react-navigation/native';
22
import React, {useCallback, useEffect} from 'react';
33
import {View} from 'react-native';
4-
import BlockingView from '@components/BlockingViews/BlockingView';
5-
import Button from '@components/Button';
64
import HeaderWithBackButton from '@components/HeaderWithBackButton';
7-
import * as Illustrations from '@components/Icon/Illustrations';
5+
import OnboardingMergingAccountBlockedView from '@components/OnboardingMergingAccountBlockedView';
86
import ScreenWrapper from '@components/ScreenWrapper';
97
import Text from '@components/Text';
108
import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm';
@@ -16,7 +14,6 @@ import AccountUtils from '@libs/AccountUtils';
1614
import {openOldDotLink} from '@libs/actions/Link';
1715
import {setOnboardingErrorMessage, setOnboardingMergeAccountStepValue, updateOnboardingValuesAndNavigation} from '@libs/actions/Welcome';
1816
import Navigation from '@libs/Navigation/Navigation';
19-
import variables from '@styles/variables';
2017
import {MergeIntoAccountAndLogin} from '@userActions/Session';
2118
import {resendValidateCode} from '@userActions/User';
2219
import CONST from '@src/CONST';
@@ -87,7 +84,7 @@ function BaseOnboardingWorkEmailValidation({shouldUseNativeStyles}: BaseOnboardi
8784

8885
return (
8986
<ScreenWrapper
90-
includeSafeAreaPaddingBottom={false}
87+
includeSafeAreaPaddingBottom
9188
testID="BaseOnboardingWorkEmailValidation"
9289
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
9390
>
@@ -100,27 +97,9 @@ function BaseOnboardingWorkEmailValidation({shouldUseNativeStyles}: BaseOnboardi
10097
/>
10198
{onboardingValues?.isMergingAccountBlocked ? (
10299
<View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5]}>
103-
<BlockingView
104-
icon={Illustrations.ToddBehindCloud}
105-
iconWidth={variables.modalTopIconWidth}
106-
iconHeight={variables.modalTopIconHeight}
107-
title={translate('onboarding.mergeBlockScreen.title')}
108-
subtitle={translate('onboarding.mergeBlockScreen.subtitle', {workEmail})}
109-
subtitleStyle={[styles.colorMuted]}
110-
/>
111-
<Button
112-
success={onboardingValues?.isMergingAccountBlocked}
113-
large
114-
style={[styles.mb5]}
115-
text={translate('common.buttonConfirm')}
116-
onPress={() => {
117-
setOnboardingErrorMessage('');
118-
if (isVsb) {
119-
Navigation.navigate(ROUTES.ONBOARDING_ACCOUNTING.getRoute());
120-
return;
121-
}
122-
Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute());
123-
}}
100+
<OnboardingMergingAccountBlockedView
101+
workEmail={workEmail}
102+
isVsb={isVsb}
124103
/>
125104
</View>
126105
) : (

0 commit comments

Comments
 (0)