From af80749ec6b6631e38223d3a24d0e8bc617c139c Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 06:04:13 +0530 Subject: [PATCH 01/10] Remove Continue button from onboarding purpose --- .../OnboardingPurpose/BaseOnboardingPurpose.tsx | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index e9d0887bdac7..bce2f368db98 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -3,7 +3,6 @@ import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, use import {View} from 'react-native'; import {ScrollView} from 'react-native-gesture-handler'; import {useOnyx} from 'react-native-onyx'; -import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -146,22 +145,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro /> - { - if (!selectedPurpose) { - Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorSelection')); - return; - } - Welcome.setOnboardingErrorMessage(''); - saveAndNavigate(); - }} - message={onboardingErrorMessage} - isAlertVisible={!!onboardingErrorMessage} - containerStyles={[styles.w100, styles.mb5, styles.mh0, paddingHorizontal]} - /> )} From a2f9052b6f616ff29ccecb77a3117a126c68f94e Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 06:09:10 +0530 Subject: [PATCH 02/10] Render error message with FormHelpMessage --- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index bce2f368db98..fa62c870bb29 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, use import {View} from 'react-native'; import {ScrollView} from 'react-native-gesture-handler'; import {useOnyx} from 'react-native-onyx'; +import FormHelpMessage from '@components/FormHelpMessage'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; @@ -145,6 +146,9 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro /> + + + )} From 9f45d5e3f51234c533abe8d6ee300cdcf7c68aea Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 06:22:16 +0530 Subject: [PATCH 03/10] Update onPress behavior --- .../BaseOnboardingPurpose.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index fa62c870bb29..7b0dcf01508e 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -73,18 +73,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro [styles.pointerEventsAuto, styles.popoverMenuIcon, theme.success], ); - const saveAndNavigate = useCallback(() => { - if (selectedPurpose === undefined) { - return; - } - - if (selectedPurpose === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) { - Navigation.navigate(ROUTES.ONBOARDING_WORK.getRoute(route.params?.backTo)); - return; - } - Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS.getRoute(route.params?.backTo)); - }, [selectedPurpose, route]); - const menuItems: MenuItemProps[] = Object.values(CONST.ONBOARDING_CHOICES).map((choice) => { const translationKey = `onboarding.purpose.${choice}` as const; const isSelected = selectedPurpose === choice; @@ -104,6 +92,12 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro onPress: () => { Welcome.setOnboardingPurposeSelected(choice); Welcome.setOnboardingErrorMessage(''); + + if (choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM) { + Navigation.navigate(ROUTES.ONBOARDING_WORK.getRoute(route.params?.backTo)); + return; + } + Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS.getRoute(route.params?.backTo)); }, focused: isSelected, }; From 300a4f1e6b861134bab0812904df21ebf1b49754 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 06:24:24 +0530 Subject: [PATCH 04/10] Remove selected check icon --- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 7b0dcf01508e..592fe80ef667 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -86,8 +86,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro iconStyles: [styles.mh3], wrapperStyle: [styles.purposeMenuItem, isSelected && styles.purposeMenuItemSelected], hoverAndPressStyle: [styles.purposeMenuItemSelected], - rightComponent: selectedCheckboxIcon, - shouldShowRightComponent: isSelected, numberOfLinesTitle: 0, onPress: () => { Welcome.setOnboardingPurposeSelected(choice); From 82af86842f14c1ad8db0fef4da648f8302beb43a Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 06:25:51 +0530 Subject: [PATCH 05/10] Remove unused error message --- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 592fe80ef667..758302e60ebb 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -103,11 +103,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const isFocused = useIsFocused(); const handleOuterClick = useCallback(() => { - if (!selectedPurpose) { - Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorSelection')); - } else { - Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorContinue')); - } + Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorSelection')); }, [selectedPurpose, translate]); const onboardingLocalRef = useRef(null); From feda9cb925a2e411736b61732f2408ce78a1a9df Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 16:15:28 +0530 Subject: [PATCH 06/10] Fix selected highlight --- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 758302e60ebb..536b34e6eaf4 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -84,7 +84,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro iconWidth: variables.menuIconSize, iconHeight: variables.menuIconSize, iconStyles: [styles.mh3], - wrapperStyle: [styles.purposeMenuItem, isSelected && styles.purposeMenuItemSelected], + wrapperStyle: [styles.purposeMenuItem], hoverAndPressStyle: [styles.purposeMenuItemSelected], numberOfLinesTitle: 0, onPress: () => { @@ -97,7 +97,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro } Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS.getRoute(route.params?.backTo)); }, - focused: isSelected, }; }); const isFocused = useIsFocused(); From 4235cca428c464a432fc4a449fd1623df031b3fe Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Sat, 3 Aug 2024 17:29:32 +0530 Subject: [PATCH 07/10] Add offline indicator and clean up code --- .../BaseOnboardingPurpose.tsx | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 536b34e6eaf4..ebc9f2b9e5a8 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -5,8 +5,6 @@ import {ScrollView} from 'react-native-gesture-handler'; import {useOnyx} from 'react-native-onyx'; import FormHelpMessage from '@components/FormHelpMessage'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import Icon from '@components/Icon'; -import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import type {MenuItemProps} from '@components/MenuItem'; import MenuItemList from '@components/MenuItemList'; @@ -51,8 +49,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const [onboardingPurposeSelected, onboardingPurposeSelectedResult] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED); const [onboardingErrorMessage, onboardingErrorMessageResult] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE); - const PurposeFooterInstance = ; - useEffect(() => { setSelectedPurpose(onboardingPurposeSelected ?? undefined); }, [onboardingPurposeSelected]); @@ -61,21 +57,8 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const paddingHorizontal = isMediumOrLargerScreenWidth ? styles.ph8 : styles.ph5; - const selectedCheckboxIcon = useMemo( - () => ( - - - - ), - [styles.pointerEventsAuto, styles.popoverMenuIcon, theme.success], - ); - const menuItems: MenuItemProps[] = Object.values(CONST.ONBOARDING_CHOICES).map((choice) => { const translationKey = `onboarding.purpose.${choice}` as const; - const isSelected = selectedPurpose === choice; return { key: translationKey, title: translate(translationKey), @@ -136,6 +119,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro + {isSmallScreenWidth && } )} From fbb2054eab266e4ff23113f1b308646e4d2162f9 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 7 Aug 2024 17:47:40 +0530 Subject: [PATCH 08/10] Remove unused import --- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index ebc9f2b9e5a8..1f0bbfe65598 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -1,5 +1,5 @@ import {useIsFocused} from '@react-navigation/native'; -import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; import {View} from 'react-native'; import {ScrollView} from 'react-native-gesture-handler'; import {useOnyx} from 'react-native-onyx'; From 3ed71bdf42f4067e93f1c736c90609e639bc55a7 Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Wed, 7 Aug 2024 22:15:33 +0530 Subject: [PATCH 09/10] fix lint --- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 1f0bbfe65598..e806f3dd60be 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -86,7 +86,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const handleOuterClick = useCallback(() => { Welcome.setOnboardingErrorMessage(translate('onboarding.purpose.errorSelection')); - }, [selectedPurpose, translate]); + }, [translate]); const onboardingLocalRef = useRef(null); useImperativeHandle(isFocused ? OnboardingRefManager.ref : onboardingLocalRef, () => ({handleOuterClick}), [handleOuterClick]); From 54c3e134911648b3c28cac66727507267d3081ec Mon Sep 17 00:00:00 2001 From: Someshwar Tripathi Date: Fri, 9 Aug 2024 02:09:01 +0530 Subject: [PATCH 10/10] Fix lint --- .../OnboardingPurpose/BaseOnboardingPurpose.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index e806f3dd60be..a9c89705d913 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -1,5 +1,5 @@ import {useIsFocused} from '@react-navigation/native'; -import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'; +import React, {useCallback, useImperativeHandle, useRef} from 'react'; import {View} from 'react-native'; import {ScrollView} from 'react-native-gesture-handler'; import {useOnyx} from 'react-native-onyx'; @@ -22,7 +22,6 @@ import OnboardingRefManager from '@libs/OnboardingRefManager'; import type {TOnboardingRef} from '@libs/OnboardingRefManager'; import variables from '@styles/variables'; import * as Welcome from '@userActions/Welcome'; -import type {OnboardingPurposeType} from '@src/CONST'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -41,20 +40,13 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const styles = useThemeStyles(); const {translate} = useLocalize(); const {isMediumOrLargerScreenWidth} = useOnboardingLayout(); - const [selectedPurpose, setSelectedPurpose] = useState(undefined); const {windowHeight} = useWindowDimensions(); const {isSmallScreenWidth} = useResponsiveLayout(); const theme = useTheme(); - const [onboardingPurposeSelected, onboardingPurposeSelectedResult] = useOnyx(ONYXKEYS.ONBOARDING_PURPOSE_SELECTED); const [onboardingErrorMessage, onboardingErrorMessageResult] = useOnyx(ONYXKEYS.ONBOARDING_ERROR_MESSAGE); - useEffect(() => { - setSelectedPurpose(onboardingPurposeSelected ?? undefined); - }, [onboardingPurposeSelected]); - const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined; - const paddingHorizontal = isMediumOrLargerScreenWidth ? styles.ph8 : styles.ph5; const menuItems: MenuItemProps[] = Object.values(CONST.ONBOARDING_CHOICES).map((choice) => { @@ -91,7 +83,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro const onboardingLocalRef = useRef(null); useImperativeHandle(isFocused ? OnboardingRefManager.ref : onboardingLocalRef, () => ({handleOuterClick}), [handleOuterClick]); - if (isLoadingOnyxValue(onboardingPurposeSelectedResult, onboardingErrorMessageResult)) { + if (isLoadingOnyxValue(onboardingErrorMessageResult)) { return null; } return (