Skip to content

Commit a73480b

Browse files
allgandalfallgandalf
committed
fix onboarding work email blocking screen
1 parent 2b5cf35 commit a73480b

1 file changed

Lines changed: 95 additions & 85 deletions

File tree

‎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';
@@ -146,99 +147,108 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
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
}
241251

242252
BaseOnboardingWorkEmail.displayName = 'BaseOnboardingWorkEmail';
243253

244-
export default BaseOnboardingWorkEmail;
254+
export default BaseOnboardingWorkEmail;

0 commit comments

Comments
 (0)