Skip to content

fix: Onboarding - You appears to be offline appears in left without margin. #60944

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
srikarparsi merged 11 commits into from
May 7, 2025
Merged

fix: Onboarding - You appears to be offline appears in left without margin. #60944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
33046d2
fix: Onboarding - You appears to be offline appears in left without m…
Krishna2323 Apr 26, 2025
d37230d
fix ESLint.
Krishna2323 Apr 26, 2025
887ffa8
Merge branch 'Expensify:main' into krishna2323/issue/60643
Krishna2323 Apr 28, 2025
cf2d3d5
Merge branch 'Expensify:main' into krishna2323/issue/60643
Krishna2323 May 1, 2025
f4741df
Merge branch 'main' into krishna2323/issue/60643
Krishna2323 May 3, 2025
bad0465
fix BaseOnboardingPrivateDomain.
Krishna2323 May 3, 2025
3a5694e
remove unused import.
Krishna2323 May 3, 2025
90758d4
use default value of shouldShowOfflineIndicator prop.
Krishna2323 May 5, 2025
cc889f5
add includeSafeAreaPaddingBottom={false} to slection lists in onboard…
Krishna2323 May 6, 2025
54b4f3a
Merge branch 'Expensify:main' into krishna2323/issue/60643
Krishna2323 May 6, 2025
170aaaf
add includeSafeAreaPaddingBottom to ScreenWrapper.
Krishna2323 May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,6 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
testID="BaseOnboardingAccounting"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
>
Expand All @@ -259,6 +258,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
footerContent={footerContent}
shouldShowTooltips={false}
listItemWrapperStyle={onboardingIsMediumOrLargerScreenWidth ? [styles.pl8, styles.pr8] : []}
includeSafeAreaPaddingBottom={false}
/>
</ScreenWrapper>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/OnboardingEmployees/BaseOnboardingEmployees.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
testID="BaseOnboardingEmployees"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
>
Expand All @@ -93,6 +92,7 @@ function BaseOnboardingEmployees({shouldUseNativeStyles, route}: BaseOnboardingE
ListItem={RadioListItem}
footerContent={footerContent}
listItemWrapperStyle={onboardingIsMediumOrLargerScreenWidth ? [styles.pl8, styles.pr8] : []}
includeSafeAreaPaddingBottom={false}
Copy link
Member

@parasharrajat parasharrajat May 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now we should enable the safeAreabottom padding on ScreenWrapper. Same for Accounting step. @Krishna2323

image

Copy link
Contributor Author

@Krishna2323 Krishna2323 May 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat, tested and updated.

/>
</ScreenWrapper>
);
Expand Down
3 changes: 0 additions & 3 deletions src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
import type {FormOnyxValues} from '@components/Form/types';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import OfflineIndicator from '@components/OfflineIndicator';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import TextInput from '@components/TextInput';
Expand Down Expand Up @@ -138,7 +137,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
return (
<ScreenWrapper
shouldEnableMaxHeight
shouldShowOfflineIndicator={false}
includeSafeAreaPaddingBottom
testID="BaseOnboardingPersonalDetails"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
Expand Down Expand Up @@ -193,7 +191,6 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
/>
</View>
</FormProvider>
{isSmallScreenWidth && <OfflineIndicator />}
</ScreenWrapper>
);
}
Expand Down
5 changes: 1 addition & 4 deletions src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import OfflineIndicator from '@components/OfflineIndicator';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import ValidateCodeForm from '@components/ValidateCodeActionModal/ValidateCodeForm';
Expand Down Expand Up @@ -31,7 +30,7 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
const [joinablePolicies] = useOnyx(ONYXKEYS.JOINABLE_POLICIES, {canBeMissing: true});
const joinablePoliciesLength = Object.keys(joinablePolicies ?? {}).length;

const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();

const email = session?.email ?? '';
const domain = email.split('@').at(1) ?? '';
Expand Down Expand Up @@ -63,7 +62,6 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
return (
<ScreenWrapper
shouldEnableMaxHeight
shouldShowOfflineIndicator={false}
includeSafeAreaPaddingBottom
testID="BaseOnboardingPrivateDomain"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
Expand Down Expand Up @@ -102,7 +100,6 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
isLoading={getAccessiblePoliciesAction?.loading}
onPress={() => Navigation.navigate(ROUTES.ONBOARDING_PURPOSE.getRoute(route.params?.backTo))}
/>
{shouldUseNarrowLayout && <OfflineIndicator />}
</View>
</View>
</ScreenWrapper>
Expand Down
62 changes: 27 additions & 35 deletions src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,13 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Illustrations from '@components/Icon/Illustrations';
import type {MenuItemProps} from '@components/MenuItem';
import MenuItemList from '@components/MenuItemList';
import OfflineIndicator from '@components/OfflineIndicator';
import SafeAreaConsumer from '@components/SafeAreaConsumer';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import usePermissions from '@hooks/usePermissions';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import Navigation from '@libs/Navigation/Navigation';
import OnboardingRefManager from '@libs/OnboardingRefManager';
import type {TOnboardingRef} from '@libs/OnboardingRefManager';
Expand Down Expand Up @@ -52,23 +50,17 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
const styles = useThemeStyles();
const {translate} = useLocalize();
const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
const {windowHeight} = useWindowDimensions();
const {canUsePrivateDomainOnboarding} = usePermissions();
const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true});

const isPrivateDomainAndHasAccesiblePolicies = canUsePrivateDomainOnboarding && !account?.isFromPublicDomain && !!account?.hasAccessibleDomainPolicies;

// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to show offline indicator on small screen only
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {isSmallScreenWidth} = useResponsiveLayout();

const theme = useTheme();
const [onboardingErrorMessage, onboardingErrorMessageResult] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE, {canBeMissing: true});
const [onboardingPolicyID] = useOnyx(ONYXKEYS.ONBOARDING_POLICY_ID, {canBeMissing: true});
const [onboardingAdminsChatReportID] = useOnyx(ONYXKEYS.ONBOARDING_ADMINS_CHAT_REPORT_ID, {canBeMissing: true});
const [personalDetailsForm] = useOnyx(ONYXKEYS.FORMS.ONBOARDING_PERSONAL_DETAILS_FORM, {canBeMissing: true});

const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;
const paddingHorizontal = onboardingIsMediumOrLargerScreenWidth ? styles.ph8 : styles.ph5;

const [customChoices = []] = useOnyx(ONYXKEYS.ONBOARDING_CUSTOM_CHOICES, {canBeMissing: true});
Expand Down Expand Up @@ -124,34 +116,34 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
return null;
}
return (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<View style={[{maxHeight}, styles.h100, styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8, safeAreaPaddingBottomStyle]}>
<View style={onboardingIsMediumOrLargerScreenWidth && styles.mh3}>
<HeaderWithBackButton
shouldShowBackButton={false}
iconFill={theme.iconColorfulBackground}
progressBarPercentage={isPrivateDomainAndHasAccesiblePolicies ? 60 : 20}
/>
</View>
<ScrollView style={[styles.flex1, styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, paddingHorizontal]}>
<View style={styles.flex1}>
<View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
<Text style={styles.textHeadlineH1}>{translate('onboarding.purpose.title')} </Text>
</View>
<MenuItemList
menuItems={menuItems}
shouldUseSingleExecution
/>
</View>
</ScrollView>
<View style={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]}>
<FormHelpMessage message={onboardingErrorMessage} />
<ScreenWrapper
includeSafeAreaPaddingBottom
testID="BaseOnboardingPurpose"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
shouldEnableMaxHeight={shouldEnableMaxHeight}
>
<View style={onboardingIsMediumOrLargerScreenWidth && styles.mh3}>
<HeaderWithBackButton
shouldShowBackButton={false}
iconFill={theme.iconColorfulBackground}
progressBarPercentage={isPrivateDomainAndHasAccesiblePolicies ? 60 : 20}
/>
</View>
<ScrollView style={[styles.flex1, styles.flexGrow1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, paddingHorizontal]}>
<View style={styles.flex1}>
<View style={[onboardingIsMediumOrLargerScreenWidth ? styles.flexRow : styles.flexColumn, styles.mb5]}>
<Text style={styles.textHeadlineH1}>{translate('onboarding.purpose.title')} </Text>
</View>
{isSmallScreenWidth && <OfflineIndicator />}
<MenuItemList
menuItems={menuItems}
shouldUseSingleExecution
/>
</View>
)}
</SafeAreaConsumer>
</ScrollView>
<View style={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]}>
<FormHelpMessage message={onboardingErrorMessage} />
</View>
</ScreenWrapper>
);
}

Expand Down
7 changes: 1 addition & 6 deletions src/pages/OnboardingWorkEmail/BaseOnboardingWorkEmail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import type {FormOnyxValues} from '@components/Form/types';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Icon from '@components/Icon';
import * as Illustrations from '@components/Icon/Illustrations';
import OfflineIndicator from '@components/OfflineIndicator';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
Expand Down Expand Up @@ -48,9 +47,7 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
const workEmail = formValue?.[INPUT_IDS.ONBOARDING_WORK_EMAIL];
const [onboardingErrorMessage] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE, {canBeMissing: true});
const isVsb = onboardingValues && 'signupQualifier' in onboardingValues && onboardingValues.signupQualifier === CONST.ONBOARDING_SIGNUP_QUALIFIERS.VSB;
// We need to use isSmallScreenWidth, see navigateAfterOnboarding function comment
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
const {onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
const {onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
const {inputCallbackRef} = useAutoFocusInput();
const [shouldValidateOnChange, setShouldValidateOnChange] = useState(false);
const {isOffline} = useNetwork();
Expand Down Expand Up @@ -126,7 +123,6 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
return (
<ScreenWrapper
shouldEnableMaxHeight
shouldShowOfflineIndicator={false}
includeSafeAreaPaddingBottom={isOffline}
testID="BaseOnboardingWorkEmail"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
Expand Down Expand Up @@ -232,7 +228,6 @@ function BaseOnboardingWorkEmail({shouldUseNativeStyles}: BaseOnboardingWorkEmai
/>
</View>
</FormProvider>
{isSmallScreenWidth && <OfflineIndicator />}
</ScreenWrapper>
);
}
Expand Down
3 changes: 1 addition & 2 deletions src/pages/OnboardingWorkspaces/BaseOnboardingWorkspaces.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {useOnyx} from 'react-native-onyx';
import Button from '@components/Button';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Expensicons from '@components/Icon/Expensicons';
import OfflineIndicator from '@components/OfflineIndicator';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import UserListItem from '@components/SelectionList/UserListItem';
Expand Down Expand Up @@ -132,6 +131,7 @@ function BaseOnboardingWorkspaces({route, shouldUseNativeStyles}: BaseOnboarding
shouldEnableMaxHeight
testID="BaseOnboardingWorkspaces"
style={[styles.defaultModalContainer, shouldUseNativeStyles && styles.pt8]}
shouldShowOfflineIndicator={isSmallScreenWidth}
>
<HeaderWithBackButton
shouldShowBackButton
Expand Down Expand Up @@ -164,7 +164,6 @@ function BaseOnboardingWorkspaces({route, shouldUseNativeStyles}: BaseOnboarding
/>
}
/>
{isSmallScreenWidth && <OfflineIndicator />}
</ScreenWrapper>
);
}
Expand Down
Loading