Skip to content
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

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

Merged
merged 3 commits into from
Feb 14, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
20ffb32
fix navigtion bugs in workspace card page
SzymczakJ Feb 13, 2025
e254c79
fix lint
SzymczakJ Feb 14, 2025
6809d42
Merge branch 'main' into @szymczak/navigation-fix-for-workspace-card-…
Julesssss Feb 14, 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
12 changes: 6 additions & 6 deletions src/ROUTES.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1434,27 +1434,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -880,14 +880,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 @@ -897,14 +900,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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading