Skip to content

Commit

Permalink
Merge pull request #56887 from Expensify/jules-branchFrom56830AndFixC…
Browse files Browse the repository at this point in the history 
…onflicts

[CP Staging] [navigation] fix navigation bugs in bugs workspace card page

(cherry picked from commit 2c89824)

(CP triggered by Julesssss)
  • Loading branch information
@Julesssss @OSBotify
Julesssss authored and OSBotify committed Feb 14, 2025
1 parent 79395e9 commit 6dc792f
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 51 deletions.
12 changes: 6 additions & 6 deletions src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1450,27 +1450,27 @@ const ROUTES = {
},
WORKSPACE_EXPENSIFY_CARD_NAME: {
route: 'settings/workspaces/:policyID/expensify-card/:cardID/edit/name',
getRoute: (policyID: string, cardID: string) => `settings/workspaces/${policyID}/expensify-card/${cardID}/edit/name` as const,
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/${cardID}/edit/name`, backTo),
},
EXPENSIFY_CARD_NAME: {
route: 'settings/:policyID/expensify-card/:cardID/edit/name',
getRoute: (policyID: string, cardID: string) => `settings/${policyID}/expensify-card/${cardID}/edit/name` as const,
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/${policyID}/expensify-card/${cardID}/edit/name`, backTo),
},
WORKSPACE_EXPENSIFY_CARD_LIMIT: {
route: 'settings/workspaces/:policyID/expensify-card/:cardID/edit/limit',
getRoute: (policyID: string, cardID: string) => `settings/workspaces/${policyID}/expensify-card/${cardID}/edit/limit` as const,
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/${cardID}/edit/limit`, backTo),
},
EXPENSIFY_CARD_LIMIT: {
route: 'settings/:policyID/expensify-card/:cardID/edit/limit',
getRoute: (policyID: string, cardID: string) => `settings/${policyID}/expensify-card/${cardID}/edit/limit` as const,
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/${policyID}/expensify-card/${cardID}/edit/limit`, backTo),
},
WORKSPACE_EXPENSIFY_CARD_LIMIT_TYPE: {
route: 'settings/workspaces/:policyID/expensify-card/:cardID/edit/limit-type',
getRoute: (policyID: string, cardID: string) => `settings/workspaces/${policyID}/expensify-card/${cardID}/edit/limit-type` as const,
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/${cardID}/edit/limit-type`, backTo),
},
EXPENSIFY_CARD_LIMIT_TYPE: {
route: 'settings/:policyID/expensify-card/:cardID/edit/limit-type',
getRoute: (policyID: string, cardID: string) => `settings/${policyID}/expensify-card/${cardID}/edit/limit-type` as const,
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/${policyID}/expensify-card/${cardID}/edit/limit-type`, backTo),
},
WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW: {
route: 'settings/workspaces/:policyID/expensify-card/issue-new',
Expand Down
6 changes: 6 additions & 0 deletions src/libs/Navigation/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -903,14 +903,17 @@ type SettingsNavigatorParamList = {
[SCREENS.WORKSPACE.EXPENSIFY_CARD_NAME]: {
policyID: string;
cardID: string;
backTo?: Routes;
};
[SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT]: {
policyID: string;
cardID: string;
backTo?: Routes;
};
[SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT_TYPE]: {
policyID: string;
cardID: string;
backTo?: Routes;
};
[SCREENS.EXPENSIFY_CARD.EXPENSIFY_CARD_DETAILS]: {
policyID: string;
Expand All @@ -920,14 +923,17 @@ type SettingsNavigatorParamList = {
[SCREENS.EXPENSIFY_CARD.EXPENSIFY_CARD_NAME]: {
policyID: string;
cardID: string;
backTo?: Routes;
};
[SCREENS.EXPENSIFY_CARD.EXPENSIFY_CARD_LIMIT]: {
policyID: string;
cardID: string;
backTo?: Routes;
};
[SCREENS.EXPENSIFY_CARD.EXPENSIFY_CARD_LIMIT_TYPE]: {
policyID: string;
cardID: string;
backTo?: Routes;
};
[SCREENS.WORKSPACE.RULES_CUSTOM_NAME]: {
policyID: string;
Expand Down
31 changes: 17 additions & 14 deletions src/pages/workspace/expensifyCard/WorkspaceEditCardLimitPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ import ScreenWrapper from '@components/ScreenWrapper';
import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import {updateExpensifyCardLimit} from '@libs/actions/Card';
import {convertToDisplayString, convertToFrontendAmountAsString} from '@libs/CurrencyUtils';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import {getWorkspaceAccountID} from '@libs/PolicyUtils';
import {getFieldRequiredErrors} from '@libs/ValidationUtils';
import Navigation from '@navigation/Navigation';
import type {SettingsNavigatorParamList} from '@navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import * as Card from '@userActions/Card';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
Expand All @@ -32,12 +32,12 @@ type WorkspaceEditCardLimitPageProps = PlatformStackScreenProps<
>;

function WorkspaceEditCardLimitPage({route}: WorkspaceEditCardLimitPageProps) {
const {policyID, cardID} = route.params;
const {policyID, cardID, backTo} = route.params;
const {translate} = useLocalize();
const {inputCallbackRef} = useAutoFocusInput();
const styles = useThemeStyles();
const [isConfirmModalVisible, setIsConfirmModalVisible] = useState(false);
const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
const workspaceAccountID = getWorkspaceAccountID(policyID);

const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
const card = cardsList?.[cardID];
Expand All @@ -64,17 +64,20 @@ function WorkspaceEditCardLimitPage({route}: WorkspaceEditCardLimitPageProps) {

const isWorkspaceRhp = route.name === SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT;

const goBack = useCallback(
() => Navigation.goBack(isWorkspaceRhp ? ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID) : ROUTES.EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID)),
[isWorkspaceRhp, policyID, cardID],
);
const goBack = useCallback(() => {
if (backTo) {
Navigation.goBack(backTo);
return;
}
Navigation.goBack(isWorkspaceRhp ? ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID) : ROUTES.EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID));
}, [backTo, isWorkspaceRhp, policyID, cardID]);

const updateCardLimit = (newLimit: number) => {
const newAvailableSpend = getNewAvailableSpend(newLimit);

setIsConfirmModalVisible(false);

Card.updateExpensifyCardLimit(workspaceAccountID, Number(cardID), newLimit, newAvailableSpend, card?.nameValuePairs?.unapprovedExpenseLimit, card?.availableSpend);
updateExpensifyCardLimit(workspaceAccountID, Number(cardID), newLimit, newAvailableSpend, card?.nameValuePairs?.unapprovedExpenseLimit, card?.availableSpend);

goBack();
};
Expand All @@ -93,7 +96,7 @@ function WorkspaceEditCardLimitPage({route}: WorkspaceEditCardLimitPageProps) {

const validate = useCallback(
(values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_LIMIT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_LIMIT_FORM> => {
const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.LIMIT]);
const errors = getFieldRequiredErrors(values, [INPUT_IDS.LIMIT]);

// We only want integers to be sent as the limit
if (!Number(values.limit)) {
Expand Down Expand Up @@ -140,7 +143,7 @@ function WorkspaceEditCardLimitPage({route}: WorkspaceEditCardLimitPageProps) {
<>
<InputWrapper
InputComponent={AmountForm}
defaultValue={CurrencyUtils.convertToFrontendAmountAsString(card?.nameValuePairs?.unapprovedExpenseLimit, CONST.CURRENCY.USD, false)}
defaultValue={convertToFrontendAmountAsString(card?.nameValuePairs?.unapprovedExpenseLimit, CONST.CURRENCY.USD, false)}
isCurrencyPressable={false}
inputID={INPUT_IDS.LIMIT}
ref={inputCallbackRef}
Expand All @@ -150,7 +153,7 @@ function WorkspaceEditCardLimitPage({route}: WorkspaceEditCardLimitPageProps) {
isVisible={isConfirmModalVisible}
onConfirm={() => updateCardLimit(Number(inputValues[INPUT_IDS.LIMIT]) * 100)}
onCancel={() => setIsConfirmModalVisible(false)}
prompt={translate(getPromptTextKey, {limit: CurrencyUtils.convertToDisplayString(Number(inputValues[INPUT_IDS.LIMIT]) * 100, CONST.CURRENCY.USD)})}
prompt={translate(getPromptTextKey, {limit: convertToDisplayString(Number(inputValues[INPUT_IDS.LIMIT]) * 100, CONST.CURRENCY.USD)})}
confirmText={translate('workspace.expensifyCard.changeLimit')}
cancelText={translate('common.cancel')}
danger
Expand Down
31 changes: 17 additions & 14 deletions src/pages/workspace/expensifyCard/WorkspaceEditCardLimitTypePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ import RadioListItem from '@components/SelectionList/RadioListItem';
import useLocalize from '@hooks/useLocalize';
import usePolicy from '@hooks/usePolicy';
import useThemeStyles from '@hooks/useThemeStyles';
import * as CurrencyUtils from '@libs/CurrencyUtils';
import {updateExpensifyCardLimitType} from '@libs/actions/Card';
import {openPolicyEditCardLimitTypePage} from '@libs/actions/Policy/Policy';
import {convertToDisplayString} from '@libs/CurrencyUtils';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import * as PolicyUtils from '@libs/PolicyUtils';
import {getApprovalWorkflow, getWorkspaceAccountID} from '@libs/PolicyUtils';
import Navigation from '@navigation/Navigation';
import type {SettingsNavigatorParamList} from '@navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import * as Card from '@userActions/Card';
import * as Policy from '@userActions/Policy/Policy';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
Expand All @@ -30,8 +30,8 @@ type WorkspaceEditCardLimitTypePageProps = PlatformStackScreenProps<
>;

function WorkspaceEditCardLimitTypePage({route}: WorkspaceEditCardLimitTypePageProps) {
const {policyID, cardID} = route.params;
const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
const {policyID, cardID, backTo} = route.params;
const workspaceAccountID = getWorkspaceAccountID(policyID);

const {translate} = useLocalize();
const styles = useThemeStyles();
Expand All @@ -40,7 +40,7 @@ function WorkspaceEditCardLimitTypePage({route}: WorkspaceEditCardLimitTypePageP
const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);

const card = cardsList?.[cardID];
const areApprovalsConfigured = PolicyUtils.getApprovalWorkflow(policy) !== CONST.POLICY.APPROVAL_MODE.OPTIONAL;
const areApprovalsConfigured = getApprovalWorkflow(policy) !== CONST.POLICY.APPROVAL_MODE.OPTIONAL;
const defaultLimitType = areApprovalsConfigured ? CONST.EXPENSIFY_CARD.LIMIT_TYPES.SMART : CONST.EXPENSIFY_CARD.LIMIT_TYPES.MONTHLY;
const initialLimitType = card?.nameValuePairs?.limitType ?? defaultLimitType;
const promptTranslationKey =
Expand All @@ -53,21 +53,24 @@ function WorkspaceEditCardLimitTypePage({route}: WorkspaceEditCardLimitTypePageP

const isWorkspaceRhp = route.name === SCREENS.WORKSPACE.EXPENSIFY_CARD_LIMIT_TYPE;

const goBack = useCallback(
() => Navigation.goBack(isWorkspaceRhp ? ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID) : ROUTES.EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID)),
[isWorkspaceRhp, policyID, cardID],
);
const goBack = useCallback(() => {
if (backTo) {
Navigation.goBack(backTo);
return;
}
Navigation.goBack(isWorkspaceRhp ? ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID) : ROUTES.EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID));
}, [backTo, isWorkspaceRhp, policyID, cardID]);

const fetchCardLimitTypeData = useCallback(() => {
Policy.openPolicyEditCardLimitTypePage(policyID, Number(cardID));
openPolicyEditCardLimitTypePage(policyID, Number(cardID));
}, [policyID, cardID]);

useFocusEffect(fetchCardLimitTypeData);

const updateCardLimitType = () => {
setIsConfirmModalVisible(false);

Card.updateExpensifyCardLimitType(workspaceAccountID, Number(cardID), typeSelected, card?.nameValuePairs?.limitType);
updateExpensifyCardLimitType(workspaceAccountID, Number(cardID), typeSelected, card?.nameValuePairs?.limitType);

goBack();
};
Expand Down Expand Up @@ -176,7 +179,7 @@ function WorkspaceEditCardLimitTypePage({route}: WorkspaceEditCardLimitTypePageP
isVisible={isConfirmModalVisible}
onConfirm={updateCardLimitType}
onCancel={() => setIsConfirmModalVisible(false)}
prompt={translate(promptTranslationKey, {limit: CurrencyUtils.convertToDisplayString(card?.nameValuePairs?.unapprovedExpenseLimit, CONST.CURRENCY.USD)})}
prompt={translate(promptTranslationKey, {limit: convertToDisplayString(card?.nameValuePairs?.unapprovedExpenseLimit, CONST.CURRENCY.USD)})}
confirmText={translate('workspace.expensifyCard.changeLimitType')}
cancelText={translate('common.cancel')}
danger
Expand Down
29 changes: 16 additions & 13 deletions src/pages/workspace/expensifyCard/WorkspaceEditCardNamePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ import TextInput from '@components/TextInput';
import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import * as ErrorUtils from '@libs/ErrorUtils';
import {updateExpensifyCardTitle} from '@libs/actions/Card';
import {addErrorMessage} from '@libs/ErrorUtils';
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
import * as PolicyUtils from '@libs/PolicyUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import {getWorkspaceAccountID} from '@libs/PolicyUtils';
import {getFieldRequiredErrors} from '@libs/ValidationUtils';
import Navigation from '@navigation/Navigation';
import type {SettingsNavigatorParamList} from '@navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import * as Card from '@userActions/Card';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
Expand All @@ -26,8 +26,8 @@ import INPUT_IDS from '@src/types/form/EditExpensifyCardNameForm';
type WorkspaceEditCardNamePageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_NAME | typeof SCREENS.EXPENSIFY_CARD.EXPENSIFY_CARD_NAME>;

function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) {
const {policyID, cardID} = route.params;
const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
const {policyID, cardID, backTo} = route.params;
const workspaceAccountID = getWorkspaceAccountID(policyID);

const {translate} = useLocalize();
const {inputCallbackRef} = useAutoFocusInput();
Expand All @@ -38,21 +38,24 @@ function WorkspaceEditCardNamePage({route}: WorkspaceEditCardNamePageProps) {

const isWorkspaceRhp = route.name === SCREENS.WORKSPACE.EXPENSIFY_CARD_NAME;

const goBack = useCallback(
() => Navigation.goBack(isWorkspaceRhp ? ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID) : ROUTES.EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID)),
[isWorkspaceRhp, policyID, cardID],
);
const goBack = useCallback(() => {
if (backTo) {
Navigation.goBack(backTo);
return;
}
Navigation.goBack(isWorkspaceRhp ? ROUTES.WORKSPACE_EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID) : ROUTES.EXPENSIFY_CARD_DETAILS.getRoute(policyID, cardID));
}, [backTo, isWorkspaceRhp, policyID, cardID]);

const submit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM>) => {
Card.updateExpensifyCardTitle(workspaceAccountID, Number(cardID), values[INPUT_IDS.NAME], card?.nameValuePairs?.cardTitle);
updateExpensifyCardTitle(workspaceAccountID, Number(cardID), values[INPUT_IDS.NAME], card?.nameValuePairs?.cardTitle);
goBack();
};

const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.EDIT_EXPENSIFY_CARD_NAME_FORM> => {
const errors = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.NAME]);
const errors = getFieldRequiredErrors(values, [INPUT_IDS.NAME]);
const length = values.name.length;
if (length > CONST.STANDARD_LENGTH_LIMIT) {
ErrorUtils.addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT}));
addErrorMessage(errors, INPUT_IDS.NAME, translate('common.error.characterLimitExceedCounter', {length, limit: CONST.STANDARD_LENGTH_LIMIT}));
}
return errors;
};
Expand Down
Loading

0 comments on commit 6dc792f

Please sign in to comment.