feat: Implement to use a 👍icon next to approved report preview. #53373
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -124,18 +124,24 @@ function ReportPreview({ | |
| ); | ||
|
|
||
| const [isPaidAnimationRunning, setIsPaidAnimationRunning] = useState(false); | ||
| const [isApprovedAnimationRunning, setIsApprovedAnimationRunning] = useState(false); | ||
| const [isHoldMenuVisible, setIsHoldMenuVisible] = useState(false); | ||
| const [requestType, setRequestType] = useState<ActionHandledType>(); | ||
| const [paymentType, setPaymentType] = useState<PaymentMethodType>(); | ||
|
|
||
| const getCanIOUBePaid = useCallback( | ||
| (onlyShowPayElsewhere = false, shouldCheckApprovedState = true) => | ||
| IOU.canIOUBePaid(iouReport, chatReport, policy, allTransactions, onlyShowPayElsewhere, undefined, undefined, shouldCheckApprovedState), | ||
| [iouReport, chatReport, policy, allTransactions], | ||
| ); | ||
|
|
||
| const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]); | ||
| const canIOUBePaidAndApproved = useMemo(() => getCanIOUBePaid(false, false), [getCanIOUBePaid]); | ||
| const onlyShowPayElsewhere = useMemo(() => !canIOUBePaid && getCanIOUBePaid(true), [canIOUBePaid, getCanIOUBePaid]); | ||
| const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere; | ||
| const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(iouReport, policy), [iouReport, policy]) || isApprovedAnimationRunning; | ||
|
|
||
| const shouldDisableApproveButton = shouldShowApproveButton && !ReportUtils.isAllowedToApproveExpenseReport(iouReport); | ||
|
|
||
| const {nonHeldAmount, fullAmount, hasValidNonHeldAmount} = ReportUtils.getNonHeldAndFullAmount(iouReport, shouldShowPayButton); | ||
| const hasOnlyHeldExpenses = ReportUtils.hasOnlyHeldExpenses(iouReport?.reportID ?? ''); | ||
|
|
@@ -151,12 +157,18 @@ function ReportPreview({ | |
| })); | ||
| const checkMarkScale = useSharedValue(iouSettled ? 1 : 0); | ||
|
|
||
| const isApproved = ReportUtils.isReportApproved(iouReport, action); | ||
| const thumbsUpScale = useSharedValue(isApproved ? 1 : 0); | ||
| const thumbsUpStyle = useAnimatedStyle(() => ({ | ||
| ...styles.defaultCheckmarkWrapper, | ||
| transform: [{scale: thumbsUpScale.get()}], | ||
|
Contributor
Author
There was a problem hiding this comment. @DylanDylann, previously we were using |
||
| })); | ||
|
|
||
| const moneyRequestComment = action?.childLastMoneyRequestComment ?? ''; | ||
| const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(chatReport); | ||
| const isInvoiceRoom = ReportUtils.isInvoiceRoom(chatReport); | ||
| const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport); | ||
|
|
||
| const canAllowSettlement = ReportUtils.hasUpdatedTotal(iouReport, policy); | ||
| const numberOfRequests = allTransactions.length; | ||
| const transactionsWithReceipts = ReportUtils.getTransactionsWithReceipts(iouReportID); | ||
|
|
@@ -207,11 +219,19 @@ function ReportPreview({ | |
| const {isDelegateAccessRestricted} = useDelegateUserDetails(); | ||
| const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); | ||
|
|
||
| const stopAnimation = useCallback(() => { | ||
| setIsPaidAnimationRunning(false); | ||
| setIsApprovedAnimationRunning(false); | ||
| }, []); | ||
| const startAnimation = useCallback(() => { | ||
| setIsPaidAnimationRunning(true); | ||
| HapticFeedback.longPress(); | ||
| }, []); | ||
| const startApprovedAnimation = useCallback(() => { | ||
| setIsApprovedAnimationRunning(true); | ||
| HapticFeedback.longPress(); | ||
| }, []); | ||
|
|
||
| const confirmPayment = useCallback( | ||
| (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => { | ||
| if (!type) { | ||
|
|
@@ -243,6 +263,8 @@ function ReportPreview({ | |
| } else if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) { | ||
| setIsHoldMenuVisible(true); | ||
| } else { | ||
| setIsApprovedAnimationRunning(true); | ||
| HapticFeedback.longPress(); | ||
| IOU.approveMoneyRequest(iouReport, true); | ||
| } | ||
| }; | ||
|
|
@@ -340,9 +362,6 @@ function ReportPreview({ | |
| ]); | ||
|
|
||
| const bankAccountRoute = ReportUtils.getBankAccountRoute(chatReport); | ||
|
|
||
| const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !showRTERViolationMessage && !shouldShowBrokenConnectionViolation; | ||
|
|
||
|
|
@@ -427,7 +446,7 @@ function ReportPreview({ | |
| const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport); | ||
|
|
||
| useEffect(() => { | ||
| if (!isPaidAnimationRunning || isApprovedAnimationRunning) { | ||
| return; | ||
| } | ||
|
|
||
|
|
@@ -448,6 +467,14 @@ function ReportPreview({ | |
| checkMarkScale.set(isPaidAnimationRunning ? withDelay(CONST.ANIMATION_PAID_CHECKMARK_DELAY, withSpring(1, {duration: CONST.ANIMATION_PAID_DURATION})) : 1); | ||
| }, [isPaidAnimationRunning, iouSettled, checkMarkScale]); | ||
|
|
||
| useEffect(() => { | ||
| if (!isApproved) { | ||
| return; | ||
| } | ||
|
|
||
| thumbsUpScale.set(isApprovedAnimationRunning ? withDelay(CONST.ANIMATION_THUMBSUP_DELAY, withSpring(1, {duration: CONST.ANIMATION_THUMBSUP_DURATION})) : 1); | ||
|
Contributor
Author
There was a problem hiding this comment. Updated this to add some delay because the animation can seem frozen if the button and icon animations run together at the same time. Same approach is also used for checkmark icon animation.
Contributor
There was a problem hiding this comment. @Krishna2323 It caused the regression on the previous PR or did you add it for safer?
Contributor
Author
There was a problem hiding this comment.
No, its just for fixing animation lag. |
||
| }, [isApproved, isApprovedAnimationRunning, thumbsUpScale]); | ||
|
|
||
| const openReportFromPreview = useCallback(() => { | ||
| Performance.markStart(CONST.TIMING.OPEN_REPORT_FROM_PREVIEW); | ||
| Timing.start(CONST.TIMING.OPEN_REPORT_FROM_PREVIEW); | ||
|
|
@@ -483,7 +510,7 @@ function ReportPreview({ | |
| <View style={styles.expenseAndReportPreviewTextContainer}> | ||
| <View style={styles.flexRow}> | ||
| <Animated.View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, previewMessageStyle]}> | ||
| <Text style={[styles.textLabelSupporting, styles.lh20]}>{previewMessage}</Text> | ||
| </Animated.View> | ||
| {shouldShowRBR && ( | ||
| <Icon | ||
|
|
@@ -510,6 +537,14 @@ function ReportPreview({ | |
| /> | ||
| </Animated.View> | ||
| )} | ||
| {isApproved && ( | ||
| <Animated.View style={thumbsUpStyle}> | ||
| <Icon | ||
| src={Expensicons.ThumbsUp} | ||
| fill={theme.icon} | ||
| /> | ||
| </Animated.View> | ||
| )} | ||
| </View> | ||
| </View> | ||
| {shouldShowSubtitle && !!supportText && ( | ||
|
|
@@ -537,6 +572,8 @@ function ReportPreview({ | |
| shouldUseSuccessStyle={!hasHeldExpenses} | ||
| onlyShowPayElsewhere={onlyShowPayElsewhere} | ||
| isPaidAnimationRunning={isPaidAnimationRunning} | ||
| isApprovedAnimationRunning={isApprovedAnimationRunning} | ||
| canIOUBePaid={canIOUBePaidAndApproved || isPaidAnimationRunning} | ||
| onAnimationFinish={stopAnimation} | ||
| formattedAmount={getSettlementAmount() ?? ''} | ||
| currency={iouReport?.currency} | ||
|
|
@@ -604,7 +641,13 @@ function ReportPreview({ | |
| chatReport={chatReport} | ||
| moneyRequestReport={iouReport} | ||
| transactionCount={numberOfRequests} | ||
| startAnimation={() => { | ||
| if (requestType === CONST.IOU.REPORT_ACTION_TYPE.APPROVE) { | ||
| startApprovedAnimation(); | ||
| } else { | ||
| startAnimation(); | ||
| } | ||
| }} | ||
| /> | ||
| )} | ||
| </OfflineWithFeedback> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Krishna2323 Is this changed?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.