Skip to content

Commit 4c44827

Browse files
mjasikowskimjasikowski
authored
Merge pull request #52901 from Expensify/revert-50387-krishna2323/issue/49847
[CP Staging] Revert "Feat: Implement to use a 👍icon next to approved report preview"
2 parents 5955bd7 + 95dc8fc commit 4c44827

File tree

4 files changed

+20
-98
lines changed

4 files changed

+20
-98
lines changed

‎src/components/ProcessMoneyReportHoldMenu.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,6 @@ function ProcessMoneyReportHoldMenu({
6767

6868
const onSubmit = (full: boolean) => {
6969
if (isApprove) {
70-
if (startAnimation) {
71-
startAnimation();
72-
}
7370
IOU.approveMoneyRequest(moneyRequestReport, full);
7471
if (!full && isLinkedTransactionHeld(Navigation.getTopmostReportActionId() ?? '-1', moneyRequestReport?.reportID ?? '')) {
7572
Navigation.goBack(ROUTES.REPORT_WITH_ID.getRoute(moneyRequestReport?.reportID ?? ''));

‎src/components/ReportActionItem/ReportPreview.tsx

+7-49
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ function ReportPreview({
121121
);
122122

123123
const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false);
124-
const [isApprovedAnimationRunning, setIsApprovedAnimationRunning] = useState(false);
125124
const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false);
126125
const [requestType, setRequestType] = useState<ActionHandledType>();
127126
const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = ReportUtils.getNonHeldAndFullAmount(iouReport, policy);
@@ -141,18 +140,12 @@ function ReportPreview({
141140
}));
142141
const checkMarkScale = useSharedValue(iouSettled ? 1 : 0);
143142

144-
const isApproved = ReportUtils.isReportApproved(iouReport, action);
145-
const thumbsUpScale = useSharedValue(isApproved ? 1 : 0.25);
146-
const thumbsUpStyle = useAnimatedStyle(() => ({
147-
...styles.defaultCheckmarkWrapper,
148-
transform: [{scale: thumbsUpScale.value}],
149-
}));
150-
151143
const moneyRequestComment = action?.childLastMoneyRequestComment ?? '';
152144
const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport);
153145
const isInvoiceRoom = ReportUtils.isInvoiceRoom(chatReport);
154146
const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport);
155147

148+
const isApproved = ReportUtils.isReportApproved(iouReport, action);
156149
const canAllowSettlement = ReportUtils.hasUpdatedTotal(iouReport, policy);
157150
const numberOfRequests = allTransactions.length;
158151
const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(iouReportID);
@@ -203,19 +196,11 @@ function ReportPreview({
203196
const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails();
204197
const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
205198

206-
const stopAnimation = useCallback(() => {
207-
setIsPaidAnimationRunning(false);
208-
setIsApprovedAnimationRunning(false);
209-
}, []);
210-
199+
const stopAnimation = useCallback(() => setIsPaidAnimationRunning(false), []);
211200
const startAnimation = useCallback(() => {
212201
setIsPaidAnimationRunning(true);
213202
HapticFeedback.longPress();
214203
}, []);
215-
const startApprovedAnimation = useCallback(() => {
216-
setIsApprovedAnimationRunning(true);
217-
HapticFeedback.longPress();
218-
}, []);
219204
const confirmPayment = useCallback(
220205
(type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
221206
if (!type) {
@@ -247,8 +232,6 @@ function ReportPreview({
247232
} else if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) {
248233
setIsHoldMenuVisible(true);
249234
} else {
250-
setIsApprovedAnimationRunning(true);
251-
HapticFeedback.longPress();
252235
IOU.approveMoneyRequest(iouReport, true);
253236
}
254237
};
@@ -347,15 +330,14 @@ function ReportPreview({
347330

348331
const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport);
349332
const getCanIOUBePaid = useCallback(
350-
(onlyShowPayElsewhere = false, shouldCheckApprovedState = true) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere, shouldCheckApprovedState),
333+
(onlyShowPayElsewhere = false) => IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere),
351334
[iouReport, chatReport, policy, allTransactions],
352335
);
353336

354337
const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);
355-
const canIOUBePaidAndApproved = useMemo(() => getCanIOUBePaid(false, false), [getCanIOUBePaid]);
356338
const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]);
357339
const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;
358-
const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]) || isApprovedAnimationRunning;
340+
const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]);
359341

360342
const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport);
361343

@@ -442,7 +424,7 @@ function ReportPreview({
442424
const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport);
443425

444426
useEffect(() => {
445-
if (!isPaidAnimationRunning || isApprovedAnimationRunning) {
427+
if (!isPaidAnimationRunning) {
446428
return;
447429
}
448430

@@ -468,14 +450,6 @@ function ReportPreview({
468450
}
469451
}, [isPaidAnimationRunning, iouSettled, checkMarkScale]);
470452

471-
useEffect(() => {
472-
if (!isApproved) {
473-
return;
474-
}
475-
476-
thumbsUpScale.value = withSpring(1, {duration: 200});
477-
}, [isApproved, thumbsUpScale]);
478-
479453
return (
480454
<OfflineWithFeedback
481455
pendingAction={iouReport?.pendingFields?.preview}
@@ -510,7 +484,7 @@ function ReportPreview({
510484
<View style={styles.expenseAndReportPreviewTextContainer}>
511485
<View style={styles.flexRow}>
512486
<Animated.View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, previewMessageStyle]}>
513-
<Text style={[styles.textLabelSupporting, styles.lh20]}>{previewMessage}</Text>
487+
<Text style={[styles.textLabelSupporting, styles.lh16]}>{previewMessage}</Text>
514488
</Animated.View>
515489
{shouldShowRBR && (
516490
<Icon
@@ -538,14 +512,6 @@ function ReportPreview({
538512
/>
539513
</Animated.View>
540514
)}
541-
{isApproved && (
542-
<Animated.View style={thumbsUpStyle}>
543-
<Icon
544-
src={Expensicons.ThumbsUp}
545-
fill={theme.icon}
546-
/>
547-
</Animated.View>
548-
)}
549515
</View>
550516
</View>
551517
{shouldShowSubtitle && !!supportText && (
@@ -572,8 +538,6 @@ function ReportPreview({
572538
<AnimatedSettlementButton
573539
onlyShowPayElsewhere={onlyShowPayElsewhere}
574540
isPaidAnimationRunning={isPaidAnimationRunning}
575-
isApprovedAnimationRunning={isApprovedAnimationRunning}
576-
canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning}
577541
onAnimationFinish={stopAnimation}
578542
formattedAmount={getSettlementAmount() ?? ''}
579543
currency={iouReport?.currency}
@@ -642,13 +606,7 @@ function ReportPreview({
642606
chatReport={chatReport}
643607
moneyRequestReport={iouReport}
644608
transactionCount={numberOfRequests}
645-
startAnimation={() => {
646-
if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) {
647-
startApprovedAnimation();
648-
} else {
649-
startAnimation();
650-
}
651-
}}
609+
startAnimation={startAnimation}
652610
/>
653611
)}
654612
</OfflineWithFeedback>

‎src/components/SettlementButton/AnimatedSettlementButton.tsx

+12-44
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,9 @@ import type SettlementButtonProps from './types';
1111
type AnimatedSettlementButtonProps = SettlementButtonProps & {
1212
isPaidAnimationRunning: boolean;
1313
onAnimationFinish: () => void;
14-
isApprovedAnimationRunning: boolean;
15-
canIOUBePaid: boolean;
1614
};
1715

18-
function AnimatedSettlementButton({
19-
isPaidAnimationRunning,
20-
onAnimationFinish,
21-
isApprovedAnimationRunning,
22-
isDisabled,
23-
canIOUBePaid,
24-
...settlementButtonProps
25-
}: AnimatedSettlementButtonProps) {
16+
function AnimatedSettlementButton({isPaidAnimationRunning, onAnimationFinish, isDisabled, ...settlementButtonProps}: AnimatedSettlementButtonProps) {
2617
const styles = useThemeStyles();
2718
const {translate} = useLocalize();
2819
const buttonScale = useSharedValue(1);
@@ -47,13 +38,12 @@ function AnimatedSettlementButton({
4738
overflow: 'hidden',
4839
marginTop: buttonMarginTop.value,
4940
}));
50-
const buttonDisabledStyle =
51-
isPaidAnimationRunning || isApprovedAnimationRunning
52-
? {
53-
opacity: 1,
54-
...styles.cursorDefault,
55-
}
56-
: undefined;
41+
const buttonDisabledStyle = isPaidAnimationRunning
42+
? {
43+
opacity: 1,
44+
...styles.cursorDefault,
45+
}
46+
: undefined;
5747

5848
const resetAnimation = useCallback(() => {
5949
// eslint-disable-next-line react-compiler/react-compiler
@@ -66,7 +56,7 @@ function AnimatedSettlementButton({
6656
}, [buttonScale, buttonOpacity, paymentCompleteTextScale, paymentCompleteTextOpacity, height, buttonMarginTop, styles.expenseAndReportPreviewTextButtonContainer.gap]);
6757

6858
useEffect(() => {
69-
if (!isApprovedAnimationRunning && !isPaidAnimationRunning) {
59+
if (!isPaidAnimationRunning) {
7060
resetAnimation();
7161
return;
7262
}
@@ -77,30 +67,13 @@ function AnimatedSettlementButton({
7767

7868
// Wait for the above animation + 1s delay before hiding the component
7969
const totalDelay = CONST.ANIMATION_PAID_DURATION + CONST.ANIMATION_PAID_BUTTON_HIDE_DELAY;
80-
const willShowPaymentButton = canIOUBePaid && isApprovedAnimationRunning;
8170
height.value = withDelay(
8271
totalDelay,
83-
withTiming(willShowPaymentButton ? variables.componentSizeNormal : 0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()),
84-
);
85-
buttonMarginTop.value = withDelay(
86-
totalDelay,
87-
withTiming(willShowPaymentButton ? styles.expenseAndReportPreviewTextButtonContainer.gap : 0, {duration: CONST.ANIMATION_PAID_DURATION}),
72+
withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}, () => runOnJS(onAnimationFinish)()),
8873
);
74+
buttonMarginTop.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}));
8975
paymentCompleteTextOpacity.value = withDelay(totalDelay, withTiming(0, {duration: CONST.ANIMATION_PAID_DURATION}));
90-
}, [
91-
isPaidAnimationRunning,
92-
isApprovedAnimationRunning,
93-
onAnimationFinish,
94-
buttonOpacity,
95-
buttonScale,
96-
height,
97-
paymentCompleteTextOpacity,
98-
paymentCompleteTextScale,
99-
buttonMarginTop,
100-
resetAnimation,
101-
canIOUBePaid,
102-
styles.expenseAndReportPreviewTextButtonContainer.gap,
103-
]);
76+
}, [isPaidAnimationRunning, onAnimationFinish, buttonOpacity, buttonScale, height, paymentCompleteTextOpacity, paymentCompleteTextScale, buttonMarginTop, resetAnimation]);
10477

10578
return (
10679
<Animated.View style={containerStyles}>
@@ -109,16 +82,11 @@ function AnimatedSettlementButton({
10982
<Text style={[styles.buttonMediumText]}>{translate('iou.paymentComplete')}</Text>
11083
</Animated.View>
11184
)}
112-
{isApprovedAnimationRunning && (
113-
<Animated.View style={paymentCompleteTextStyles}>
114-
<Text style={[styles.buttonMediumText]}>{translate('iou.approved')}</Text>
115-
</Animated.View>
116-
)}
11785
<Animated.View style={buttonStyles}>
11886
<SettlementButton
11987
// eslint-disable-next-line react/jsx-props-no-spreading
12088
{...settlementButtonProps}
121-
isDisabled={isPaidAnimationRunning || isApprovedAnimationRunning || isDisabled}
89+
isDisabled={isPaidAnimationRunning || isDisabled}
12290
disabledStyle={buttonDisabledStyle}
12391
/>
12492
</Animated.View>

‎src/libs/actions/IOU.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -6786,7 +6786,6 @@ function canIOUBePaid(
67866786
policy: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Policy>,
67876787
transactions?: OnyxTypes.Transaction[],
67886788
onlyShowPayElsewhere = false,
6789-
shouldCheckApprovedState = true,
67906789
) {
67916790
const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport);
67926791
const reportNameValuePairs = ReportUtils.getReportNameValuePairs(chatReport?.reportID);
@@ -6840,7 +6839,7 @@ function canIOUBePaid(
68406839
reimbursableSpend !== 0 &&
68416840
!isChatReportArchived &&
68426841
!isAutoReimbursable &&
6843-
(!shouldBeApproved || !shouldCheckApprovedState) &&
6842+
!shouldBeApproved &&
68446843
!isPayAtEndExpenseReport
68456844
);
68466845
}

0 commit comments

Comments
 (0)