Skip to content

Commit

Permalink
Revert "Refactor: reuse ValidateCodeActionModal"
Browse files Browse the repository at this point in the history
  • Loading branch information
aimane-chnaif authored Oct 22, 2024
1 parent 65b739d commit a36a298
Show file tree
Hide file tree
Showing 25 changed files with 583 additions and 291 deletions.
5 changes: 5 additions & 0 deletions src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,10 @@ const ROUTES = {
route: 'settings/security/delegate/:login/role/:role/confirm',
getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/confirm` as const,
},
SETTINGS_DELEGATE_MAGIC_CODE: {
route: 'settings/security/delegate/:login/role/:role/magic-code',
getRoute: (login: string, role: string) => `settings/security/delegate/${encodeURIComponent(login)}/role/${role}/magic-code` as const,
},
SETTINGS_ABOUT: 'settings/about',
SETTINGS_APP_DOWNLOAD_LINKS: 'settings/about/app-download-links',
SETTINGS_WALLET: 'settings/wallet',
Expand Down Expand Up @@ -228,6 +232,7 @@ const ROUTES = {
route: 'settings/profile/contact-methods/:contactMethod/details',
getRoute: (contactMethod: string, backTo?: string) => getUrlWithBackToParam(`settings/profile/contact-methods/${encodeURIComponent(contactMethod)}/details`, backTo),
},
SETINGS_CONTACT_METHOD_VALIDATE_ACTION: 'settings/profile/contact-methods/validate-action',
SETTINGS_NEW_CONTACT_METHOD: {
route: 'settings/profile/contact-methods/new',
getRoute: (backTo?: string) => getUrlWithBackToParam('settings/profile/contact-methods/new', backTo),
Expand Down
2 changes: 2 additions & 0 deletions src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const SCREENS = {
DISPLAY_NAME: 'Settings_Display_Name',
CONTACT_METHODS: 'Settings_ContactMethods',
CONTACT_METHOD_DETAILS: 'Settings_ContactMethodDetails',
CONTACT_METHOD_VALIDATE_ACTION: 'Settings_ValidateContactMethodAction',
NEW_CONTACT_METHOD: 'Settings_NewContactMethod',
STATUS_CLEAR_AFTER: 'Settings_Status_Clear_After',
STATUS_CLEAR_AFTER_DATE: 'Settings_Status_Clear_After_Date',
Expand Down Expand Up @@ -133,6 +134,7 @@ const SCREENS = {
ADD_DELEGATE: 'Settings_Delegate_Add',
DELEGATE_ROLE: 'Settings_Delegate_Role',
DELEGATE_CONFIRM: 'Settings_Delegate_Confirm',
DELEGATE_MAGIC_CODE: 'Settings_Delegate_Magic_Code',
UPDATE_DELEGATE_ROLE: 'Settings_Delegate_Update_Role',
UPDATE_DELEGATE_ROLE_MAGIC_CODE: 'Settings_Delegate_Update_Magic_Code',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,6 @@ type ValidateCodeFormProps = {

/** Function to clear error of the form */
clearError: () => void;

sendValidateCode: () => void;
};

function BaseValidateCodeForm({
Expand All @@ -75,7 +73,6 @@ function BaseValidateCodeForm({
validateError,
handleSubmitForm,
clearError,
sendValidateCode,
buttonStyles,
}: ValidateCodeFormProps) {
const {translate} = useLocalize();
Expand Down Expand Up @@ -128,6 +125,10 @@ function BaseValidateCodeForm({
}, []),
);

useEffect(() => {
clearError();
}, [clearError]);

useEffect(() => {
if (!hasMagicCodeBeenSent) {
return;
Expand All @@ -139,7 +140,7 @@ function BaseValidateCodeForm({
* Request a validate code / magic code be sent to verify this contact method
*/
const resendValidateCode = () => {
sendValidateCode();
User.requestValidateCodeAction();
inputValidateCodeRef.current?.clear();
};

Expand Down Expand Up @@ -188,7 +189,7 @@ function BaseValidateCodeForm({
errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}
hasError={!isEmptyObject(validateError)}
onFulfill={validateAndSubmitForm}
autoFocus
autoFocus={false}
/>
<OfflineWithFeedback
pendingAction={validateCodeAction?.pendingFields?.validateCodeSent}
Expand Down
26 changes: 5 additions & 21 deletions src/components/ValidateCodeActionModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,14 @@ import Modal from '@components/Modal';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import useThemeStyles from '@hooks/useThemeStyles';
import * as User from '@libs/actions/User';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type {ValidateCodeActionModalProps} from './type';
import ValidateCodeForm from './ValidateCodeForm';
import type {ValidateCodeFormHandle} from './ValidateCodeForm/BaseValidateCodeForm';

function ValidateCodeActionModal({
isVisible,
title,
description,
onClose,
onModalHide,
validatePendingAction,
validateError,
handleSubmitForm,
clearError,
footer,
sendValidateCode,
hasMagicCodeBeenSent,
}: ValidateCodeActionModalProps) {
function ValidateCodeActionModal({isVisible, title, description, onClose, validatePendingAction, validateError, handleSubmitForm, clearError}: ValidateCodeActionModalProps) {
const themeStyles = useThemeStyles();
const firstRenderRef = useRef(true);
const validateCodeFormRef = useRef<ValidateCodeFormHandle>(null);
Expand All @@ -42,16 +30,15 @@ function ValidateCodeActionModal({
return;
}
firstRenderRef.current = false;

sendValidateCode();
}, [isVisible, sendValidateCode]);
User.requestValidateCodeAction();
}, [isVisible]);

return (
<Modal
type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
isVisible={isVisible}
onClose={hide}
onModalHide={onModalHide ?? hide}
onModalHide={hide}
hideModalContentWhileAnimating
useNativeDriver
shouldUseModalPaddingStyle={false}
Expand All @@ -74,13 +61,10 @@ function ValidateCodeActionModal({
validatePendingAction={validatePendingAction}
validateError={validateError}
handleSubmitForm={handleSubmitForm}
sendValidateCode={sendValidateCode}
clearError={clearError}
ref={validateCodeFormRef}
hasMagicCodeBeenSent={hasMagicCodeBeenSent}
/>
</View>
{footer?.()}
</ScreenWrapper>
</Modal>
);
Expand Down
13 changes: 0 additions & 13 deletions src/components/ValidateCodeActionModal/type.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type React from 'react';
import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon';

type ValidateCodeActionModalProps = {
Expand All @@ -14,9 +13,6 @@ type ValidateCodeActionModalProps = {
/** Function to call when the user closes the modal */
onClose: () => void;

/** Function to be called when the modal is closed */
onModalHide?: () => void;

/** The pending action for submitting form */
validatePendingAction?: PendingAction | null;

Expand All @@ -28,15 +24,6 @@ type ValidateCodeActionModalProps = {

/** Function to clear error of the form */
clearError: () => void;

/** A component to be rendered inside the modal */
footer?: () => React.JSX.Element;

/** Function is called when validate code modal is mounted and on magic code resend */
sendValidateCode: () => void;

/** If the magic code has been resent previously */
hasMagicCodeBeenSent?: boolean;
};

// eslint-disable-next-line import/prefer-default-export
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
[SCREENS.SETTINGS.PROFILE.ADDRESS_STATE]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/PersonalDetails/StateSelectionPage').default,
[SCREENS.SETTINGS.PROFILE.CONTACT_METHODS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ContactMethodsPage').default,
[SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ContactMethodDetailsPage').default,
[SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/ValidateContactActionPage').default,
[SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: () => require<ReactComponentModule>('../../../../pages/settings/Profile/Contacts/NewContactMethodPage').default,
[SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require<ReactComponentModule>('../../../../pages/settings/Preferences/PriorityModePage').default,
[SCREENS.WORKSPACE.ACCOUNTING.ROOT]: () => require<ReactComponentModule>('../../../../pages/workspace/accounting/PolicyAccountingPage').default,
Expand Down Expand Up @@ -531,6 +532,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE]: () =>
require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateRolePage').default,
[SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/ConfirmDelegatePage').default,
[SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: () => require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/DelegateMagicCodePage').default,
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: () =>
require<ReactComponentModule>('../../../../pages/settings/Security/AddDelegate/UpdateDelegateRole/UpdateDelegateMagicCodePage').default,
[SCREENS.WORKSPACE.RULES_CUSTOM_NAME]: () => require<ReactComponentModule>('../../../../pages/workspace/rules/RulesCustomNamePage').default,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
SCREENS.SETTINGS.PROFILE.DISPLAY_NAME,
SCREENS.SETTINGS.PROFILE.CONTACT_METHODS,
SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS,
SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION,
SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD,
SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER,
SCREENS.SETTINGS.PROFILE.STATUS_CLEAR_AFTER_DATE,
Expand Down Expand Up @@ -45,6 +46,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
SCREENS.SETTINGS.DELEGATE.DELEGATE_ROLE,
SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE,
SCREENS.SETTINGS.DELEGATE.DELEGATE_CONFIRM,
SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE,
SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE,
],
[SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
Expand Down
9 changes: 9 additions & 0 deletions src/libs/Navigation/linkingConfig/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
[SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_DETAILS]: {
path: ROUTES.SETTINGS_CONTACT_METHOD_DETAILS.route,
},
[SCREENS.SETTINGS.PROFILE.CONTACT_METHOD_VALIDATE_ACTION]: {
path: ROUTES.SETINGS_CONTACT_METHOD_VALIDATE_ACTION,
},
[SCREENS.SETTINGS.PROFILE.NEW_CONTACT_METHOD]: {
path: ROUTES.SETTINGS_NEW_CONTACT_METHOD.route,
exact: true,
Expand Down Expand Up @@ -306,6 +309,12 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
login: (login: string) => decodeURIComponent(login),
},
},
[SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: {
path: ROUTES.SETTINGS_DELEGATE_MAGIC_CODE.route,
parse: {
login: (login: string) => decodeURIComponent(login),
},
},
[SCREENS.SETTINGS.DELEGATE.UPDATE_DELEGATE_ROLE_MAGIC_CODE]: {
path: ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE_MAGIC_CODE.route,
parse: {
Expand Down
4 changes: 4 additions & 0 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,10 @@ type SettingsNavigatorParamList = {
login: string;
role: string;
};
[SCREENS.SETTINGS.DELEGATE.DELEGATE_MAGIC_CODE]: {
login: string;
role: string;
};
[SCREENS.SETTINGS.REPORT_CARD_LOST_OR_DAMAGED]: {
/** cardID of selected card */
cardID: string;
Expand Down
3 changes: 0 additions & 3 deletions src/libs/actions/Delegate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,6 @@ function addDelegate(email: string, role: DelegateRole, validateCode: string) {
delegatedAccess: {
delegates: optimisticDelegateData(),
},
isLoading: true,
},
},
];
Expand Down Expand Up @@ -264,7 +263,6 @@ function addDelegate(email: string, role: DelegateRole, validateCode: string) {
delegatedAccess: {
delegates: successDelegateData(),
},
isLoading: false,
},
},
];
Expand Down Expand Up @@ -307,7 +305,6 @@ function addDelegate(email: string, role: DelegateRole, validateCode: string) {
delegatedAccess: {
delegates: failureDelegateData(),
},
isLoading: false,
},
},
];
Expand Down
8 changes: 6 additions & 2 deletions src/libs/actions/User.ts
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,11 @@ function resetContactMethodValidateCodeSentState(contactMethod: string) {
* Clears unvalidated new contact method action
*/
function clearUnvalidatedNewContactMethodAction() {
Onyx.merge(ONYXKEYS.PENDING_CONTACT_ACTION, null);
Onyx.merge(ONYXKEYS.PENDING_CONTACT_ACTION, {
validateCodeSent: null,
pendingFields: null,
errorFields: null,
});
}

/**
Expand Down Expand Up @@ -410,6 +414,7 @@ function addNewContactMethod(contactMethod: string, validateCode = '') {
[contactMethod]: {
partnerUserID: contactMethod,
validatedDate: '',
validateCodeSent: true,
errorFields: {
addedLogin: null,
},
Expand Down Expand Up @@ -442,7 +447,6 @@ function addNewContactMethod(contactMethod: string, validateCode = '') {
key: ONYXKEYS.PENDING_CONTACT_ACTION,
value: {
validateCodeSent: null,
actionVerified: true,
errorFields: {
actionVerified: null,
},
Expand Down
Loading

0 comments on commit a36a298

Please sign in to comment.