Skip to content

Commit

Permalink
Merge pull request #56090 from nkdengineer/fix/55717
Browse files Browse the repository at this point in the history 
feat: skip participant step in create flow
  • Loading branch information
@yuwenmemon
yuwenmemon authored Feb 10, 2025
2 parents 153e884 + 17be045 commit 3ad9461
Show file tree
Hide file tree
Showing 8 changed files with 115 additions and 42 deletions.
4 changes: 2 additions & 2 deletions src/ROUTES.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -506,7 +506,7 @@ const ROUTES = {
},
MONEY_REQUEST_STEP_CONFIRMATION: {
route: ':action/:iouType/confirmation/:transactionID/:reportID',
getRoute: (action: IOUAction, iouType: IOUType, transactionID: string, reportID: string, participantsAutoAssigned?: boolean) =>
getRoute: (action: IOUAction, iouType: IOUType, transactionID: string, reportID: string | undefined, participantsAutoAssigned?: boolean) =>
`${action as string}/${iouType as string}/confirmation/${transactionID}/${reportID}${participantsAutoAssigned ? '?participantsAutoAssigned=true' : ''}` as const,
},
MONEY_REQUEST_STEP_AMOUNT: {
Expand Down Expand Up @@ -692,7 +692,7 @@ const ROUTES = {
},
MONEY_REQUEST_STEP_PARTICIPANTS: {
route: ':action/:iouType/participants/:transactionID/:reportID',
getRoute: (iouType: IOUType, transactionID: string, reportID: string, backTo = '', action: IOUAction = 'create') =>
getRoute: (iouType: IOUType, transactionID: string | undefined, reportID: string, backTo = '', action: IOUAction = 'create') =>
getUrlWithBackToParam(`${action as string}/${iouType as string}/participants/${transactionID}/${reportID}`, backTo),
},
MONEY_REQUEST_STEP_SPLIT_PAYER: {
Expand Down
22 changes: 8 additions & 14 deletions src/components/MoneyRequestConfirmationList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -719,7 +719,8 @@ function MoneyRequestConfirmationList({
const formattedSelectedParticipants = selectedParticipants.map((participant) => ({
...participant,
isSelected: false,
isInteractive: !shouldDisableParticipant(participant),
isInteractive: transaction?.isFromGlobalCreate,
shouldShowRightIcon: transaction?.isFromGlobalCreate,
}));
options.push({
title: translate('common.to'),
Expand All @@ -729,7 +730,7 @@ function MoneyRequestConfirmationList({
}

return options;
}, [isTypeSplit, translate, payeePersonalDetails, getSplitSectionHeader, splitParticipants, selectedParticipants]);
}, [isTypeSplit, translate, payeePersonalDetails, getSplitSectionHeader, splitParticipants, selectedParticipants, transaction?.isFromGlobalCreate]);

useEffect(() => {
if (!isDistanceRequest || (isMovingTransactionFromTrackExpense && !isPolicyExpenseChat) || !transactionID) {
Expand Down Expand Up @@ -801,21 +802,14 @@ function MoneyRequestConfirmationList({
}, [transactionID, policyTagLists, policyTags]);

/**
* Navigate to report details or profile of selected user
* Navigate to the participant step
*/
const navigateToReportOrUserDetail = (option: MoneyRequestConfirmationListItem) => {
const activeRoute = Navigation.getActiveRoute();

if (option.isSelfDM) {
Navigation.navigate(ROUTES.PROFILE.getRoute(currentUserPersonalDetails.accountID, activeRoute), CONST.NAVIGATION.ACTION_TYPE.PUSH);
const navigateToParticipantPage = () => {
if (!transaction?.isFromGlobalCreate) {
return;
}

if (option.accountID) {
Navigation.navigate(ROUTES.PROFILE.getRoute(option.accountID, activeRoute), CONST.NAVIGATION.ACTION_TYPE.PUSH);
} else if (option.reportID) {
Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(option.reportID, activeRoute), CONST.NAVIGATION.ACTION_TYPE.PUSH);
}
Navigation.navigate(ROUTES.MONEY_REQUEST_STEP_PARTICIPANTS.getRoute(iouType, transactionID, reportID));
};

/**
Expand Down Expand Up @@ -1042,7 +1036,7 @@ function MoneyRequestConfirmationList({
<SelectionList<MoneyRequestConfirmationListItem>
sections={sections}
ListItem={UserListItem}
onSelectRow={navigateToReportOrUserDetail}
onSelectRow={navigateToParticipantPage}
shouldSingleExecuteRowSelect
canSelectMultiple={false}
shouldPreventDefaultFocusOnSelectRow
Expand Down
9 changes: 9 additions & 0 deletions src/components/SelectionList/UserListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import useLocalize from '@hooks/useLocalize';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import getButtonState from '@libs/getButtonState';
import CONST from '@src/CONST';
import type {Icon as IconType} from '@src/types/onyx/OnyxCommon';
import BaseListItem from './BaseListItem';
Expand Down Expand Up @@ -147,6 +148,14 @@ function UserListItem<TItem extends ListItem>({
)}
</View>
{!!item.rightElement && item.rightElement}
{!!item.shouldShowRightIcon && (
<View style={[styles.popoverMenuIcon, styles.pointerEventsAuto, isDisabled && styles.cursorDisabled]}>
<Icon
src={Expensicons.ArrowRight}
fill={StyleUtils.getIconFillColor(getButtonState(hovered, false, false, !!isDisabled, item.isInteractive !== false))}
/>
</View>
)}
</>
)}
</BaseListItem>
Expand Down
3 changes: 3 additions & 0 deletions src/components/SelectionList/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,9 @@ type ListItem = {

/** The style to override the default appearance */
itemStyle?: StyleProp<ViewStyle>;

/** Boolean whether to display the right icon */
shouldShowRightIcon?: boolean;
};

type TransactionListItemType = ListItem &
Expand Down
20 changes: 18 additions & 2 deletions src/pages/iou/request/step/IOURequestStepAmount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {createDraftTransaction, removeDraftTransaction} from '@libs/actions/Tran
import {convertToBackendAmount, isValidCurrencyCode} from '@libs/CurrencyUtils';
import Navigation from '@libs/Navigation/Navigation';
import {getParticipantsOption, getReportOption} from '@libs/OptionsListUtils';
import {getBankAccountRoute, getTransactionDetails, isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
import {isPaidGroupPolicy} from '@libs/PolicyUtils';
import {getBankAccountRoute, getPolicyExpenseChat, getTransactionDetails, isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
import playSound, {SOUNDS} from '@libs/Sound';
import {calculateTaxAmount, getAmount, getCurrency, getDefaultTaxCode, getRequestType, getTaxValue} from '@libs/TransactionUtils';
import MoneyRequestAmountForm from '@pages/iou/MoneyRequestAmountForm';
Expand Down Expand Up @@ -76,6 +77,8 @@ function IOURequestStepAmount({
const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`);
const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`);
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
const [activePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);

const isEditing = action === CONST.IOU.ACTION.EDIT;
const isSplitBill = iouType === CONST.IOU.TYPE.SPLIT;
Expand Down Expand Up @@ -249,7 +252,20 @@ function IOURequestStepAmount({

// If there was no reportID, then that means the user started this flow from the global + menu
// and an optimistic reportID was generated. In that case, the next step is to select the participants for this expense.
navigateToParticipantPage();
if (iouType === CONST.IOU.TYPE.CREATE && isPaidGroupPolicy(activePolicy) && activePolicy?.isPolicyExpenseChatEnabled) {
const activePolicyExpenseChat = getPolicyExpenseChat(currentUserPersonalDetails.accountID, activePolicy?.id);
setMoneyRequestParticipantsFromReport(transactionID, activePolicyExpenseChat);
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
CONST.IOU.ACTION.CREATE,
iouType === CONST.IOU.TYPE.CREATE ? CONST.IOU.TYPE.SUBMIT : iouType,
transactionID,
activePolicyExpenseChat?.reportID,
),
);
} else {
navigateToParticipantPage();
}
};

const saveAmountAndCurrency = ({amount, paymentMethod}: AmountParams) => {
Expand Down
43 changes: 30 additions & 13 deletions src/pages/iou/request/step/IOURequestStepDistance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@ import {getLatestErrorField} from '@libs/ErrorUtils';
import {shouldUseTransactionDraft} from '@libs/IOUUtils';
import Navigation from '@libs/Navigation/Navigation';
import {getParticipantsOption, getReportOption} from '@libs/OptionsListUtils';
import {getPersonalPolicy, getPolicy} from '@libs/PolicyUtils';
import {isArchivedReport, isPolicyExpenseChat as isPolicyExpenseChatUtil} from '@libs/ReportUtils';
import {getPersonalPolicy, getPolicy, isPaidGroupPolicy} from '@libs/PolicyUtils';
import {getPolicyExpenseChat, isArchivedReport, isPolicyExpenseChat as isPolicyExpenseChatUtil} from '@libs/ReportUtils';
import playSound, {SOUNDS} from '@libs/Sound';
import {getDistanceInMeters, getRateID, getRequestType, getValidWaypoints, isCustomUnitRateIDForP2P} from '@libs/TransactionUtils';
import CONST from '@src/CONST';
Expand Down Expand Up @@ -81,6 +81,8 @@ function IOURequestStepDistance({
const [transactionBackup] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_BACKUP}${transactionID}`);
const policy = usePolicy(report?.policyID);
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
const [activePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);
const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`);
const [optimisticWaypoints, setOptimisticWaypoints] = useState<WaypointCollection | null>(null);
const waypoints = useMemo(
Expand Down Expand Up @@ -374,24 +376,39 @@ function IOURequestStepDistance({

// If there was no reportID, then that means the user started this flow from the global menu
// and an optimistic reportID was generated. In that case, the next step is to select the participants for this expense.
navigateToParticipantPage();
if (iouType === CONST.IOU.TYPE.CREATE && isPaidGroupPolicy(activePolicy) && activePolicy?.isPolicyExpenseChatEnabled) {
const activePolicyExpenseChat = getPolicyExpenseChat(currentUserPersonalDetails.accountID, activePolicy?.id);
setMoneyRequestParticipantsFromReport(transactionID, activePolicyExpenseChat);
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
CONST.IOU.ACTION.CREATE,
iouType === CONST.IOU.TYPE.CREATE ? CONST.IOU.TYPE.SUBMIT : iouType,
transactionID,
activePolicyExpenseChat?.reportID,
),
);
} else {
navigateToParticipantPage();
}
}, [
transaction,
backTo,
report,
iouType,
reportNameValuePairs,
activePolicy,
transactionID,
backTo,
waypoints,
currentUserPersonalDetails,
personalDetails,
setDistanceRequestData,
shouldSkipConfirmation,
transaction,
translate,
navigateToParticipantPage,
navigateToConfirmationPage,
personalDetails,
translate,
iouType,
currentUserPersonalDetails.login,
currentUserPersonalDetails.accountID,
policy,
reportNameValuePairs,
waypoints,
customUnitRateID,
setDistanceRequestData,
navigateToParticipantPage,
]);

const getError = () => {
Expand Down
27 changes: 22 additions & 5 deletions src/pages/iou/request/step/IOURequestStepScan/index.native.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ import {shouldStartLocationPermissionFlow} from '@libs/IOUUtils';
import Log from '@libs/Log';
import Navigation from '@libs/Navigation/Navigation';
import {getParticipantsOption, getReportOption} from '@libs/OptionsListUtils';
import {isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
import {isPaidGroupPolicy} from '@libs/PolicyUtils';
import {getPolicyExpenseChat, isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
import playSound, {SOUNDS} from '@libs/Sound';
import {getDefaultTaxCode} from '@libs/TransactionUtils';
import StepScreenWrapper from '@pages/iou/request/step/StepScreenWrapper';
Expand Down Expand Up @@ -86,6 +87,8 @@ function IOURequestStepScan({
const policy = usePolicy(report?.policyID);
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`);
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
const [activePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);
const platform = getPlatform(true);
const [mutedPlatforms = {}] = useOnyx(ONYXKEYS.NVP_MUTED_PLATFORMS);
const isPlatformMuted = mutedPlatforms[platform];
Expand Down Expand Up @@ -298,7 +301,20 @@ function IOURequestStepScan({
// If the user started this flow using the Create expense option (combined submit/track flow), they should be redirected to the participants page.
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if ((transaction?.isFromGlobalCreate && iouType !== CONST.IOU.TYPE.TRACK && !report?.reportID) || iouType === CONST.IOU.TYPE.CREATE) {
navigateToParticipantPage();
if (isPaidGroupPolicy(activePolicy)) {
const activePolicyExpenseChat = getPolicyExpenseChat(currentUserPersonalDetails.accountID, activePolicy?.id);
setMoneyRequestParticipantsFromReport(transactionID, activePolicyExpenseChat);
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
CONST.IOU.ACTION.CREATE,
iouType === CONST.IOU.TYPE.CREATE ? CONST.IOU.TYPE.SUBMIT : iouType,
transactionID,
activePolicyExpenseChat?.reportID,
),
);
} else {
navigateToParticipantPage();
}
return;
}

Expand Down Expand Up @@ -413,19 +429,20 @@ function IOURequestStepScan({
[
backTo,
transaction?.isFromGlobalCreate,
transaction?.attendees,
transaction?.currency,
transaction?.created,
transaction?.attendees,
iouType,
report,
transactionID,
shouldSkipConfirmation,
navigateToConfirmationPage,
activePolicy,
currentUserPersonalDetails.accountID,
currentUserPersonalDetails.login,
navigateToParticipantPage,
personalDetails,
createTransaction,
currentUserPersonalDetails.login,
currentUserPersonalDetails.accountID,
reportID,
transactionTaxCode,
transactionTaxAmount,
Expand Down
29 changes: 23 additions & 6 deletions src/pages/iou/request/step/IOURequestStepScan/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ import {shouldStartLocationPermissionFlow} from '@libs/IOUUtils';
import Log from '@libs/Log';
import Navigation from '@libs/Navigation/Navigation';
import {getParticipantsOption, getReportOption} from '@libs/OptionsListUtils';
import {isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
import {isPaidGroupPolicy} from '@libs/PolicyUtils';
import {getPolicyExpenseChat, isArchivedReport, isPolicyExpenseChat} from '@libs/ReportUtils';
import playSound, {SOUNDS} from '@libs/Sound';
import {getDefaultTaxCode} from '@libs/TransactionUtils';
import ReceiptDropUI from '@pages/iou/ReceiptDropUI';
Expand Down Expand Up @@ -98,6 +99,8 @@ function IOURequestStepScan({
const policy = usePolicy(report?.policyID);
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const [skipConfirmation] = useOnyx(`${ONYXKEYS.COLLECTION.SKIP_CONFIRMATION}${transactionID}`);
const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
const [activePolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`);
const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);

const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>();
Expand Down Expand Up @@ -324,7 +327,20 @@ function IOURequestStepScan({
// If the user started this flow using the Create expense option (combined submit/track flow), they should be redirected to the participants page.
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if ((transaction?.isFromGlobalCreate && iouType !== CONST.IOU.TYPE.TRACK && !report?.reportID) || iouType === CONST.IOU.TYPE.CREATE) {
navigateToParticipantPage();
if (isPaidGroupPolicy(activePolicy)) {
const activePolicyExpenseChat = getPolicyExpenseChat(currentUserPersonalDetails.accountID, activePolicy?.id);
setMoneyRequestParticipantsFromReport(transactionID, activePolicyExpenseChat);
Navigation.navigate(
ROUTES.MONEY_REQUEST_STEP_CONFIRMATION.getRoute(
CONST.IOU.ACTION.CREATE,
iouType === CONST.IOU.TYPE.CREATE ? CONST.IOU.TYPE.SUBMIT : iouType,
transactionID,
activePolicyExpenseChat?.reportID,
),
);
} else {
navigateToParticipantPage();
}
return;
}

Expand Down Expand Up @@ -439,23 +455,24 @@ function IOURequestStepScan({
[
backTo,
transaction?.isFromGlobalCreate,
transaction?.attendees,
transaction?.currency,
transaction?.created,
transaction?.attendees,
iouType,
report,
transactionID,
shouldSkipConfirmation,
navigateToConfirmationPage,
activePolicy,
currentUserPersonalDetails.accountID,
currentUserPersonalDetails.login,
navigateToParticipantPage,
personalDetails,
currentUserPersonalDetails.login,
currentUserPersonalDetails.accountID,
createTransaction,
reportID,
transactionTaxCode,
transactionTaxAmount,
policy,
createTransaction,
],
);

Expand Down

0 comments on commit 3ad9461

Please sign in to comment.