Skip to content

Commit

Permalink
Implement ChangeReportPolicy
Browse files Browse the repository at this point in the history
  • Loading branch information
rayane-d committed Feb 27, 2025
1 parent 4aace3e commit 61f4961
Show file tree
Hide file tree
Showing 27 changed files with 836 additions and 8 deletions.
155 changes: 155 additions & 0 deletions assets/images/product-illustrations/emptystate__receiptfairy.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/CONST.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6686,6 +6686,7 @@ const CONST = {
GLOBAL_CREATE_TOOLTIP: 'globalCreateTooltip',
SCAN_TEST_TOOLTIP: 'scanTestTooltip',
},
CHANGE_POLICY_TRAINING_MODAL: 'changePolicyModal',
SMART_BANNER_HEIGHT: 152,

NAVIGATION_TESTS: {
Expand Down
8 changes: 8 additions & 0 deletions src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,10 @@ const ROUTES = {
route: 'r/:reportID/details/export/:connectionName',
getRoute: (reportID: string, connectionName: ConnectionName, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/details/export/${connectionName as string}` as const, backTo),
},
REPORT_WITH_ID_CHANGE_WORKSPACE: {
route: 'r/:reportID/change-workspace',
getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/change-workspace` as const, backTo),
},
REPORT_SETTINGS: {
route: 'r/:reportID/settings',
getRoute: (reportID: string, backTo?: string) => getUrlWithBackToParam(`r/${reportID}/settings` as const, backTo),
Expand Down Expand Up @@ -1615,6 +1619,10 @@ const ROUTES = {
route: 'hold-expense-educational',
getRoute: (backTo?: string) => getUrlWithBackToParam('hold-expense-educational', backTo),
},
CHANGE_POLICY_EDUCATIONAL: {
route: 'change-workspace-educational',
getRoute: (backTo?: string) => getUrlWithBackToParam('change-workspace-educational', backTo),
},
TRAVEL_MY_TRIPS: 'travel',
TRAVEL_TCS: {
route: 'travel/terms/:domain/accept',
Expand Down
6 changes: 6 additions & 0 deletions src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ const SCREENS = {
DETAILS: 'Details',
PROFILE: 'Profile',
REPORT_DETAILS: 'Report_Details',
REPORT_CHANGE_WORKSPACE: 'ReportChangeWorkspace',
WORKSPACE_CONFIRMATION: 'Workspace_Confirmation',
REPORT_SETTINGS: 'Report_Settings',
REPORT_DESCRIPTION: 'Report_Description',
Expand Down Expand Up @@ -332,6 +333,10 @@ const SCREENS = {
EXPORT: 'Report_Details_Export',
},

REPORT_CHANGE_WORKSPACE: {
ROOT: 'ReportChangeWorkspace_Root',
},

WORKSPACE_CONFIRMATION: {ROOT: 'Workspace_Confirmation_Root'},

WORKSPACE: {
Expand Down Expand Up @@ -645,6 +650,7 @@ const SCREENS = {
DETAILS_ROOT: 'Details_Root',
PROFILE_ROOT: 'Profile_Root',
PROCESS_MONEY_REQUEST_HOLD_ROOT: 'ProcessMoneyRequestHold_Root',
CHANGE_POLICY_EDUCATIONAL_ROOT: 'ChangePolicyEducational_Root',
REPORT_DESCRIPTION_ROOT: 'Report_Description_Root',
REPORT_PARTICIPANTS: {
ROOT: 'ReportParticipants_Root',
Expand Down
53 changes: 53 additions & 0 deletions src/components/ChangePolicyEducationalMenu.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect} from 'react';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import variables from '@styles/variables';
import FeatureTrainingModal from './FeatureTrainingModal';
import HoldMenuSectionList from './HoldMenuSectionList';
import * as Illustrations from './Icon/Illustrations';


type ChangePolicyEducationalMenuProps = {
/** Method to trigger when pressing outside of the popover menu to close it */
onClose: () => void;

/** Method to trigger when pressing confirm button */
onConfirm: () => void;
};

function ChangePolicyEducationalMenu({onClose, onConfirm}: ChangePolicyEducationalMenuProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const navigation = useNavigation();

useEffect(() => {
const unsub = navigation.addListener('beforeRemove', () => {
onClose();
});
return unsub;
}, [navigation, onClose]);

return (
<FeatureTrainingModal
title={translate('iou.changePolicyEducational.title')}
description={translate('iou.changePolicyEducational.description')}
confirmText={translate('common.buttonConfirm')}
image={Illustrations.ReceiptFairy}
contentFitImage="cover"
width={variables.changePolicyEducationModalWidth}
illustrationAspectRatio={39 / 22}
contentInnerContainerStyles={styles.mb5}
modalInnerContainerStyle={styles.pt0}
illustrationOuterContainerStyle={styles.p0}
onClose={onClose}
onConfirm={onConfirm}
>
<HoldMenuSectionList />
</FeatureTrainingModal>
);
}

ChangePolicyEducationalMenu.displayName = 'ChangePolicyEducationalMenu';

export default ChangePolicyEducationalMenu;
63 changes: 63 additions & 0 deletions src/components/ChangeWorkspaceMenuSectionList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React from 'react';
import {View} from 'react-native';
import type {ImageSourcePropType} from 'react-native';
import type {SvgProps} from 'react-native-svg';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import variables from '@styles/variables';
import type {TranslationPaths} from '@src/languages/types';
import Icon from './Icon';
import * as Illustrations from './Icon/Illustrations';
import Text from './Text';

type ChangeWorkspaceMenuSection = {
/** The icon supplied with the section */
icon: React.FC<SvgProps> | ImageSourcePropType;

/** Translation key for the title */
titleTranslationKey: TranslationPaths;
};

function ChangeWorkspaceMenuSectionList() {
const {translate} = useLocalize();
const styles = useThemeStyles();

const holdMenuSections: ChangeWorkspaceMenuSection[] = [
{
icon: Illustrations.FolderOpen,
titleTranslationKey: 'iou.changePolicyEducational.reCategorize',
},
{
icon: Illustrations.Workflows,
titleTranslationKey: 'iou.changePolicyEducational.workflows',
},
];

return (
<>
{holdMenuSections.map((section, i) => (
<View
// eslint-disable-next-line react/no-array-index-key
key={i}
style={[styles.flexRow, styles.alignItemsCenter, styles.mt5]}
>
<Icon
width={variables.menuIconSize}
height={variables.menuIconSize}
src={section.icon}
additionalStyles={[styles.mr4]}
/>
<View style={[styles.flex1, styles.justifyContentCenter]}>
<Text style={[styles.mb1]}>{translate(section.titleTranslationKey)}</Text>
</View>
</View>
))}
</>
);
}

ChangeWorkspaceMenuSectionList.displayName = 'ChangeWorkspaceMenuSectionList';

export type {ChangeWorkspaceMenuSection};

export default ChangeWorkspaceMenuSectionList;
2 changes: 2 additions & 0 deletions src/components/Icon/Illustrations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import ConciergeExclamation from '@assets/images/product-illustrations/concierge
import CreditCardsBlue from '@assets/images/product-illustrations/credit-cards--blue.svg';
import EmptyStateExpenses from '@assets/images/product-illustrations/emptystate__expenses.svg';
import HoldExpense from '@assets/images/product-illustrations/emptystate__holdexpense.svg';
import ReceiptFairy from '@assets/images/product-illustrations/emptystate__receiptfairy.svg';
import EmptyStateTravel from '@assets/images/product-illustrations/emptystate__travel.svg';
import FolderWithPapers from '@assets/images/product-illustrations/folder-with-papers.svg';
import GpsTrackOrange from '@assets/images/product-illustrations/gps-track--orange.svg';
Expand Down Expand Up @@ -229,6 +230,7 @@ export {
QRCode,
RealtimeReport,
HoldExpense,
ReceiptFairy,
ReceiptEnvelope,
Approval,
WalletAlt,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ProcessMoneyRequestHoldMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function ProcessMoneyRequestHoldMenu({onClose, onConfirm}: ProcessMoneyRequestHo
confirmText={translate('common.buttonConfirm')}
image={Illustrations.HoldExpense}
contentFitImage="cover"
width={variables.holdEducationModalWidth}
width={variables.changePolicyEducationModalWidth}
illustrationAspectRatio={39 / 22}
contentInnerContainerStyles={styles.mb5}
modalInnerContainerStyle={styles.pt0}
Expand Down
7 changes: 7 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1094,6 +1094,13 @@ const translations = {
whatIsHoldExplain: 'Hold is like hitting “pause” on an expense to ask for more details before approval or payment.',
holdIsLeftBehind: 'Held expenses are left behind even if you approve an entire report.',
unholdWhenReady: "Unhold expenses when you're ready to approve or pay.",
changePolicyEducational: {
title: 'You moved this report!',
description: 'Double-check these items, which tend to change when moving reports to a new workspace.',
reCategorize: '<strong>Re-categorize any expenses</strong> to comply with workspace rules.',
workflows: 'This report may now be subject to a different approval <strong>workflow.</strong>',
},
changeWorkspace: 'Change workspace',
set: 'set',
changed: 'changed',
removed: 'removed',
Expand Down
7 changes: 7 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1091,6 +1091,13 @@ const translations = {
whatIsHoldExplain: 'Retener es como "pausar" un gasto para solicitar más detalles antes de aprobarlo o pagarlo.',
holdIsLeftBehind: 'Si apruebas un informe, los gastos retenidos se quedan fuera de esa aprobación.',
unholdWhenReady: 'Desbloquea los gastos cuando estés listo para aprobarlos o pagarlos.',
changePolicyEducational: {
title: 'You moved this report!',
description: 'Double-check these items, which tend to change when moving reports to a new workspace.',
reCategorize: '<strong>Re-categorize any expenses</strong> to comply with workspace rules.',
workflows: 'This report may now be subject to a different approval <strong>workflow.</strong>',
},
changeWorkspace: 'Change workspace',
set: 'estableció',
changed: 'cambió',
removed: 'eliminó',
Expand Down
7 changes: 7 additions & 0 deletions src/libs/API/parameters/ChangeReportPolicyParams.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
type ChangeReportPolicyParams = {
reportID: string;
policyID: string;
reportPreviewReportActionID: string;
changePolicyReportActionID: string;
};
export default ChangeReportPolicyParams;
1 change: 1 addition & 0 deletions src/libs/API/parameters/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -378,3 +378,4 @@ export type {default as GetCorpayOnboardingFieldsParams} from './GetCorpayOnboar
export type {SaveCorpayOnboardingCompanyDetailsParams} from './SaveCorpayOnboardingCompanyDetailsParams';
export type {default as AcceptSpotnanaTermsParams} from './AcceptSpotnanaTermsParams';
export type {default as SaveCorpayOnboardingBeneficialOwnerParams} from './SaveCorpayOnboardingBeneficialOwnerParams';
export type {default as ChangeReportPolicyParams} from './ChangeReportPolicyParams';
4 changes: 4 additions & 0 deletions src/libs/API/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,7 @@ const WRITE_COMMANDS = {
RESET_SMS_DELIVERY_FAILURE_STATUS: 'ResetSMSDeliveryFailureStatus',
SAVE_CORPAY_ONBOARDING_COMPANY_DETAILS: 'SaveCorpayOnboardingCompanyDetails',
SAVE_CORPAY_ONBOARDING_BENEFICIAL_OWNER: 'SaveCorpayOnboardingBeneficialOwner',
CHANGE_REPORT_POLICY: 'ChangeReportPolicy',
} as const;

type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
Expand Down Expand Up @@ -933,6 +934,9 @@ type WriteCommandParameters = {
[WRITE_COMMANDS.JOIN_ACCESSIBLE_POLICY]: Parameters.JoinAccessiblePolicyParams;
// Dismis Product Training
[WRITE_COMMANDS.DISMISS_PRODUCT_TRAINING]: Parameters.DismissProductTrainingParams;

// Change report policy
[WRITE_COMMANDS.CHANGE_REPORT_POLICY]: Parameters.ChangeReportPolicyParams;
};

const READ_COMMANDS = {
Expand Down
11 changes: 11 additions & 0 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import type {
ReimbursementAccountNavigatorParamList,
ReportDescriptionNavigatorParamList,
ReportDetailsNavigatorParamList,
ReportChangeWorkspaceNavigatorParamList,
ReportSettingsNavigatorParamList,
RoomMembersNavigatorParamList,
SearchAdvancedFiltersParamList,
Expand Down Expand Up @@ -134,6 +135,10 @@ const ReportDetailsModalStackNavigator = createModalStackNavigator<ReportDetails
[SCREENS.REPORT_DETAILS.EXPORT]: () => require<ReactComponentModule>('../../../../pages/home/report/ReportDetailsExportPage').default,
});

const ReportChangeWorkspaceModalStackNavigator = createModalStackNavigator<ReportChangeWorkspaceNavigatorParamList>({
[SCREENS.REPORT_CHANGE_WORKSPACE.ROOT]: () => require<ReactComponentModule>('../../../../pages/ReportChangeWorkspacePage').default,
});

const ReportSettingsModalStackNavigator = createModalStackNavigator<ReportSettingsNavigatorParamList>({
[SCREENS.REPORT_SETTINGS.ROOT]: () => require<ReactComponentModule>('../../../../pages/settings/Report/ReportSettingsPage').default,
[SCREENS.REPORT_SETTINGS.NAME]: () => require<ReactComponentModule>('../../../../pages/settings/Report/NamePage').default,
Expand Down Expand Up @@ -659,6 +664,10 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({
[SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: () => require<ReactComponentModule>('../../../../pages/ProcessMoneyRequestHoldPage').default,
});

const ChangePolicyEducationalStackNavigator = createModalStackNavigator({
[SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT]: () => require<ReactComponentModule>('../../../../pages/ChangePolicyEducationalModal').default,
});

const TransactionDuplicateStackNavigator = createModalStackNavigator<TransactionDuplicateNavigatorParamList>({
[SCREENS.TRANSACTION_DUPLICATE.REVIEW]: () => require<ReactComponentModule>('../../../../pages/TransactionDuplicate/Review').default,
[SCREENS.TRANSACTION_DUPLICATE.MERCHANT]: () => require<ReactComponentModule>('../../../../pages/TransactionDuplicate/ReviewMerchant').default,
Expand Down Expand Up @@ -734,12 +743,14 @@ export {
NewTeachersUniteNavigator,
PrivateNotesModalStackNavigator,
ProcessMoneyRequestHoldStackNavigator,
ChangePolicyEducationalStackNavigator,
ProfileModalStackNavigator,
ReferralModalStackNavigator,
TravelModalStackNavigator,
ReimbursementAccountModalStackNavigator,
ReportDescriptionModalStackNavigator,
ReportDetailsModalStackNavigator,
ReportChangeWorkspaceModalStackNavigator,
ReportParticipantsModalStackNavigator,
ReportSettingsModalStackNavigator,
RoomMembersModalStackNavigator,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {FeatureTrainingNavigatorParamList} from '@libs/Navigation/types';
import ProcessMoneyRequestHoldPage from '@pages/ProcessMoneyRequestHoldPage';
import TrackTrainingPage from '@pages/TrackTrainingPage';
import SCREENS from '@src/SCREENS';
import ChangePolicyEducationalModal from '@pages/ChangePolicyEducationalModal';

const Stack = createPlatformStackNavigator<FeatureTrainingNavigatorParamList>();

Expand All @@ -23,6 +24,10 @@ function FeatureTrainingModalNavigator() {
name={SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT}
component={ProcessMoneyRequestHoldPage}
/>
<Stack.Screen
name={SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT}
component={ChangePolicyEducationalModal}
/>
</Stack.Navigator>
</View>
</NoDropZone>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,10 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
name={SCREENS.RIGHT_MODAL.REPORT_DETAILS}
component={ModalStackNavigators.ReportDetailsModalStackNavigator}
/>
<Stack.Screen
name={SCREENS.RIGHT_MODAL.REPORT_CHANGE_WORKSPACE}
component={ModalStackNavigators.ReportDetailsModalStackNavigator}
/>
<Stack.Screen
name={SCREENS.RIGHT_MODAL.REPORT_SETTINGS}
component={ModalStackNavigators.ReportSettingsModalStackNavigator}
Expand Down
6 changes: 6 additions & 0 deletions src/libs/Navigation/linkingConfig/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
exact: true,
},
[SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD.route,
[SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT]: ROUTES.CHANGE_POLICY_EDUCATIONAL.route,
},
},
[NAVIGATORS.WELCOME_VIDEO_MODAL_NAVIGATOR]: {
Expand Down Expand Up @@ -1011,6 +1012,11 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
[SCREENS.REPORT_DETAILS.EXPORT]: ROUTES.REPORT_WITH_ID_DETAILS_EXPORT.route,
},
},
[SCREENS.RIGHT_MODAL.REPORT_CHANGE_WORKSPACE]: {
screens: {
[SCREENS.REPORT_CHANGE_WORKSPACE.ROOT]: ROUTES.REPORT_WITH_ID_CHANGE_WORKSPACE.route,
},
},
[SCREENS.RIGHT_MODAL.REPORT_SETTINGS]: {
screens: {
[SCREENS.REPORT_SETTINGS.ROOT]: {
Expand Down
10 changes: 10 additions & 0 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1029,6 +1029,13 @@ type ReportDetailsNavigatorParamList = {
};
};

type ReportChangeWorkspaceNavigatorParamList = {
[SCREENS.REPORT_CHANGE_WORKSPACE.ROOT]: {
reportID: string;
backTo?: Routes;
};
};

type ReportSettingsNavigatorParamList = {
[SCREENS.REPORT_SETTINGS.ROOT]: {
reportID: string;
Expand Down Expand Up @@ -1434,6 +1441,7 @@ type SignInNavigatorParamList = {
type FeatureTrainingNavigatorParamList = {
[SCREENS.FEATURE_TRAINING_ROOT]: undefined;
[SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: undefined;
[SCREENS.CHANGE_POLICY_EDUCATIONAL_ROOT]: undefined;
};

type ReferralDetailsNavigatorParamList = {
Expand Down Expand Up @@ -1501,6 +1509,7 @@ type RightModalNavigatorParamList = {
[SCREENS.RIGHT_MODAL.PROFILE]: NavigatorScreenParams<ProfileNavigatorParamList>;
[SCREENS.SETTINGS.SHARE_CODE]: undefined;
[SCREENS.RIGHT_MODAL.REPORT_DETAILS]: NavigatorScreenParams<ReportDetailsNavigatorParamList>;
[SCREENS.RIGHT_MODAL.REPORT_CHANGE_WORKSPACE]: NavigatorScreenParams<ReportChangeWorkspaceNavigatorParamList>;
[SCREENS.RIGHT_MODAL.REPORT_SETTINGS]: NavigatorScreenParams<ReportSettingsNavigatorParamList>;
[SCREENS.RIGHT_MODAL.SETTINGS_CATEGORIES]: NavigatorScreenParams<SettingsNavigatorParamList>;
[SCREENS.RIGHT_MODAL.SETTINGS_TAGS]: NavigatorScreenParams<SettingsNavigatorParamList>;
Expand Down Expand Up @@ -1928,6 +1937,7 @@ export type {
ReimbursementAccountNavigatorParamList,
ReportDescriptionNavigatorParamList,
ReportDetailsNavigatorParamList,
ReportChangeWorkspaceNavigatorParamList,
ReportSettingsNavigatorParamList,
ReportsSplitNavigatorParamList,
RestrictedActionParamList,
Expand Down
Loading

0 comments on commit 61f4961

Please sign in to comment.