From f7e3f63315dbdae8a8bd05b8b0cda659d7c56f98 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 19 Apr 2024 17:56:53 +0700 Subject: [PATCH 1/6] fix update icons in global create and money request flows --- .../getIconForAction/index.ts | 18 ++++++++++++++++++ .../AttachmentPickerWithMenuItems.tsx | 7 ++++--- .../FloatingActionButtonAndPopover.tsx | 11 ++++++++--- 3 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 src/libs/focusComposerWithDelay/getIconForAction/index.ts diff --git a/src/libs/focusComposerWithDelay/getIconForAction/index.ts b/src/libs/focusComposerWithDelay/getIconForAction/index.ts new file mode 100644 index 000000000000..a1b7ee001d5f --- /dev/null +++ b/src/libs/focusComposerWithDelay/getIconForAction/index.ts @@ -0,0 +1,18 @@ +import {ValueOf} from 'type-fest'; +import * as Expensicons from '@components/Icon/Expensicons'; +import CONST from '@src/CONST'; + +const getIconForAction = (actionType: ValueOf) => { + switch (actionType) { + case CONST.IOU.TYPE.TRACK_EXPENSE: + return Expensicons.MoneyCircle; + case CONST.IOU.TYPE.REQUEST: + return Expensicons.Receipt; + case CONST.IOU.TYPE.SEND: + return Expensicons.Cash; + default: + return Expensicons.MoneyCircle; + } +}; + +export default getIconForAction; diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 1294d2ca8aea..515ce8921c43 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -18,6 +18,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; +import getIconForAction from '@libs/focusComposerWithDelay/getIconForAction'; import * as ReportUtils from '@libs/ReportUtils'; import * as IOU from '@userActions/IOU'; import * as Report from '@userActions/Report'; @@ -129,17 +130,17 @@ function AttachmentPickerWithMenuItems({ onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, report?.reportID ?? ''), }, [CONST.IOU.TYPE.REQUEST]: { - icon: Expensicons.MoneyCircle, + icon: getIconForAction(CONST.IOU.TYPE.REQUEST), text: translate('iou.submitExpense'), onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.REQUEST, report?.reportID ?? ''), }, [CONST.IOU.TYPE.SEND]: { - icon: Expensicons.Send, + icon: getIconForAction(CONST.IOU.TYPE.SEND), text: translate('iou.paySomeone', {name: ReportUtils.getPayeeName(report)}), onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.SEND, report?.reportID ?? ''), }, [CONST.IOU.TYPE.TRACK_EXPENSE]: { - icon: Expensicons.DocumentPlus, + icon: getIconForAction(CONST.IOU.TYPE.TRACK_EXPENSE), text: translate('iou.trackExpense'), onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.TRACK_EXPENSE, report?.reportID ?? ''), }, diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 60fed8e7af2e..41acad611562 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -14,6 +14,7 @@ import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import getIconForAction from '@libs/focusComposerWithDelay/getIconForAction'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import * as ReportUtils from '@libs/ReportUtils'; @@ -96,6 +97,10 @@ const getQuickActionIcon = (action: QuickActionName): React.FC => { return Expensicons.Send; case CONST.QUICK_ACTIONS.ASSIGN_TASK: return Expensicons.Task; + case CONST.QUICK_ACTIONS.TRACK_DISTANCE: + case CONST.QUICK_ACTIONS.TRACK_MANUAL: + case CONST.QUICK_ACTIONS.TRACK_SCAN: + return getIconForAction(CONST.IOU.TYPE.TRACK_EXPENSE); default: return Expensicons.MoneyCircle; } @@ -288,7 +293,7 @@ function FloatingActionButtonAndPopover( ...(canUseTrackExpense ? [ { - icon: Expensicons.DocumentPlus, + icon: getIconForAction(CONST.IOU.TYPE.TRACK_EXPENSE), text: translate('iou.trackExpense'), onSelected: () => interceptAnonymousUser(() => @@ -304,7 +309,7 @@ function FloatingActionButtonAndPopover( ] : []), { - icon: Expensicons.MoneyCircle, + icon: getIconForAction(CONST.IOU.TYPE.REQUEST), text: translate('iou.submitExpense'), onSelected: () => interceptAnonymousUser(() => @@ -317,7 +322,7 @@ function FloatingActionButtonAndPopover( ), }, { - icon: Expensicons.Send, + icon: getIconForAction(CONST.IOU.TYPE.SEND), text: translate('iou.paySomeone', {}), onSelected: () => interceptAnonymousUser(() => From 0ad104cb29486b6a60ac515b4cbb228cb3197f1f Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 20 Apr 2024 09:35:35 +0700 Subject: [PATCH 2/6] fix update svg files --- assets/images/{tax.svg => coins.svg} | 0 assets/images/receipt-scan.svg | 14 ++++++++++++++ src/components/Icon/Expensicons.ts | 6 ++++-- src/components/TabSelector/TabSelector.tsx | 2 +- .../getIconForAction/index.ts | 4 ++-- .../FloatingActionButtonAndPopover.tsx | 2 +- src/pages/workspace/WorkspaceInitialPage.tsx | 2 +- 7 files changed, 23 insertions(+), 7 deletions(-) rename assets/images/{tax.svg => coins.svg} (100%) create mode 100644 assets/images/receipt-scan.svg diff --git a/assets/images/tax.svg b/assets/images/coins.svg similarity index 100% rename from assets/images/tax.svg rename to assets/images/coins.svg diff --git a/assets/images/receipt-scan.svg b/assets/images/receipt-scan.svg new file mode 100644 index 000000000000..ecdf3cf2e115 --- /dev/null +++ b/assets/images/receipt-scan.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts index 877e4972a3ec..4807031f5b83 100644 --- a/src/components/Icon/Expensicons.ts +++ b/src/components/Icon/Expensicons.ts @@ -37,6 +37,7 @@ import ChatBubbles from '@assets/images/chatbubbles.svg'; import Checkmark from '@assets/images/checkmark.svg'; import Close from '@assets/images/close.svg'; import ClosedSign from '@assets/images/closed-sign.svg'; +import Coins from '@assets/images/coins.svg'; import Collapse from '@assets/images/collapse.svg'; import Concierge from '@assets/images/concierge.svg'; import Connect from '@assets/images/connect.svg'; @@ -122,6 +123,7 @@ import Printer from '@assets/images/printer.svg'; import Profile from '@assets/images/profile.svg'; import QrCode from '@assets/images/qrcode.svg'; import QuestionMark from '@assets/images/question-mark-circle.svg'; +import ReceiptScan from '@assets/images/receipt-scan.svg'; import ReceiptSearch from '@assets/images/receipt-search.svg'; import Receipt from '@assets/images/receipt.svg'; import RemoveMembers from '@assets/images/remove-members.svg'; @@ -142,7 +144,6 @@ import Stopwatch from '@assets/images/stopwatch.svg'; import Sync from '@assets/images/sync.svg'; import Tag from '@assets/images/tag.svg'; import Task from '@assets/images/task.svg'; -import Tax from '@assets/images/tax.svg'; import Thread from '@assets/images/thread.svg'; import ThreeDots from '@assets/images/three-dots.svg'; import ThumbsUp from '@assets/images/thumbs-up.svg'; @@ -232,7 +233,7 @@ export { Fullscreen, Folder, Tag, - Tax, + Coins, Thread, Gallery, Gear, @@ -286,6 +287,7 @@ export { QrCode, QuestionMark, Receipt, + ReceiptScan, RemoveMembers, ReceiptSearch, Rotate, diff --git a/src/components/TabSelector/TabSelector.tsx b/src/components/TabSelector/TabSelector.tsx index fc19e6a8062e..9fe1665f6b19 100644 --- a/src/components/TabSelector/TabSelector.tsx +++ b/src/components/TabSelector/TabSelector.tsx @@ -26,7 +26,7 @@ function getIconAndTitle(route: string, translate: LocaleContextProps['translate case CONST.TAB_REQUEST.MANUAL: return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')}; case CONST.TAB_REQUEST.SCAN: - return {icon: Expensicons.Receipt, title: translate('tabSelector.scan')}; + return {icon: Expensicons.ReceiptScan, title: translate('tabSelector.scan')}; case CONST.TAB.NEW_CHAT: return {icon: Expensicons.User, title: translate('tabSelector.chat')}; case CONST.TAB.NEW_ROOM: diff --git a/src/libs/focusComposerWithDelay/getIconForAction/index.ts b/src/libs/focusComposerWithDelay/getIconForAction/index.ts index a1b7ee001d5f..963c92640f39 100644 --- a/src/libs/focusComposerWithDelay/getIconForAction/index.ts +++ b/src/libs/focusComposerWithDelay/getIconForAction/index.ts @@ -1,11 +1,11 @@ -import {ValueOf} from 'type-fest'; +import type {ValueOf} from 'type-fest'; import * as Expensicons from '@components/Icon/Expensicons'; import CONST from '@src/CONST'; const getIconForAction = (actionType: ValueOf) => { switch (actionType) { case CONST.IOU.TYPE.TRACK_EXPENSE: - return Expensicons.MoneyCircle; + return Expensicons.Coins; case CONST.IOU.TYPE.REQUEST: return Expensicons.Receipt; case CONST.IOU.TYPE.SEND: diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 41acad611562..019ed232ff7b 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -86,7 +86,7 @@ const getQuickActionIcon = (action: QuickActionName): React.FC => { case CONST.QUICK_ACTIONS.REQUEST_MANUAL: return Expensicons.MoneyCircle; case CONST.QUICK_ACTIONS.REQUEST_SCAN: - return Expensicons.Receipt; + return Expensicons.ReceiptScan; case CONST.QUICK_ACTIONS.REQUEST_DISTANCE: return Expensicons.Car; case CONST.QUICK_ACTIONS.SPLIT_MANUAL: diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index cbdacf66c548..231bbdb92d24 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -208,7 +208,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reimbursementAcc if (policy?.tax?.trackingEnabled) { protectedCollectPolicyMenuItems.push({ translationKey: 'workspace.common.taxes', - icon: Expensicons.Tax, + icon: Expensicons.Coins, action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TAXES.getRoute(policyID)))), routeName: SCREENS.WORKSPACE.TAXES, brickRoadIndicator: PolicyUtils.hasTaxRateError(policy) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, From e8413bb28abda5c98b05164ac78db08c8dabcddd Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 20 Apr 2024 10:05:52 +0700 Subject: [PATCH 3/6] fix refactor --- .../{focusComposerWithDelay => }/getIconForAction/index.ts | 0 .../ReportActionCompose/AttachmentPickerWithMenuItems.tsx | 2 +- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/libs/{focusComposerWithDelay => }/getIconForAction/index.ts (100%) diff --git a/src/libs/focusComposerWithDelay/getIconForAction/index.ts b/src/libs/getIconForAction/index.ts similarity index 100% rename from src/libs/focusComposerWithDelay/getIconForAction/index.ts rename to src/libs/getIconForAction/index.ts diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 515ce8921c43..e2d87d55605a 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -18,7 +18,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; -import getIconForAction from '@libs/focusComposerWithDelay/getIconForAction'; +import getIconForAction from '@libs/getIconForAction'; import * as ReportUtils from '@libs/ReportUtils'; import * as IOU from '@userActions/IOU'; import * as Report from '@userActions/Report'; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 019ed232ff7b..3710733f31b3 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -14,7 +14,7 @@ import usePermissions from '@hooks/usePermissions'; import usePrevious from '@hooks/usePrevious'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import getIconForAction from '@libs/focusComposerWithDelay/getIconForAction'; +import getIconForAction from '@libs/getIconForAction'; import interceptAnonymousUser from '@libs/interceptAnonymousUser'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import * as ReportUtils from '@libs/ReportUtils'; @@ -94,7 +94,7 @@ const getQuickActionIcon = (action: QuickActionName): React.FC => { case CONST.QUICK_ACTIONS.SPLIT_DISTANCE: return Expensicons.Transfer; case CONST.QUICK_ACTIONS.SEND_MONEY: - return Expensicons.Send; + return getIconForAction(CONST.IOU.TYPE.SEND); case CONST.QUICK_ACTIONS.ASSIGN_TASK: return Expensicons.Task; case CONST.QUICK_ACTIONS.TRACK_DISTANCE: From c7cd9a9a33bacb1f5672001d992c4049bee68389 Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 20 Apr 2024 10:11:30 +0700 Subject: [PATCH 4/6] fix send money icon --- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index b955f6d3c7ff..fb556ccaad81 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -324,7 +324,7 @@ function FloatingActionButtonAndPopover( ), }, { - icon: getIconForAction(CONST.IOU.TYPE.SEND), + icon: Expensicons.Transfer, text: translate('iou.splitExpense'), onSelected: () => interceptAnonymousUser(() => @@ -337,7 +337,7 @@ function FloatingActionButtonAndPopover( ), }, { - icon: Expensicons.Send, + icon: getIconForAction(CONST.IOU.TYPE.SEND), text: translate('iou.paySomeone', {}), onSelected: () => interceptAnonymousUser(() => From 0dfd073fd96b7ab211ae064e1671e8822b7f5ef3 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 24 Apr 2024 19:18:38 +0700 Subject: [PATCH 5/6] fix update split expense icon in chat --- .../ReportActionCompose/AttachmentPickerWithMenuItems.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index e2d87d55605a..08313ab652d4 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -125,7 +125,7 @@ function AttachmentPickerWithMenuItems({ const moneyRequestOptions = useMemo(() => { const options: MoneyRequestOptions = { [CONST.IOU.TYPE.SPLIT]: { - icon: Expensicons.Receipt, + icon: Expensicons.Transfer, text: translate('iou.splitExpense'), onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, report?.reportID ?? ''), }, From c15fd3a3ba815443583ecdf14b070b746cfea695 Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 24 Apr 2024 19:31:28 +0700 Subject: [PATCH 6/6] fix type --- src/libs/getIconForAction/index.ts | 2 +- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/libs/getIconForAction/index.ts b/src/libs/getIconForAction/index.ts index 963c92640f39..820cf2687f02 100644 --- a/src/libs/getIconForAction/index.ts +++ b/src/libs/getIconForAction/index.ts @@ -4,7 +4,7 @@ import CONST from '@src/CONST'; const getIconForAction = (actionType: ValueOf) => { switch (actionType) { - case CONST.IOU.TYPE.TRACK_EXPENSE: + case CONST.IOU.TYPE.TRACK: return Expensicons.Coins; case CONST.IOU.TYPE.REQUEST: return Expensicons.Receipt; diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx index 3425942658c6..be0c61f822a5 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx @@ -100,7 +100,7 @@ const getQuickActionIcon = (action: QuickActionName): React.FC => { case CONST.QUICK_ACTIONS.TRACK_DISTANCE: case CONST.QUICK_ACTIONS.TRACK_MANUAL: case CONST.QUICK_ACTIONS.TRACK_SCAN: - return getIconForAction(CONST.IOU.TYPE.TRACK_EXPENSE); + return getIconForAction(CONST.IOU.TYPE.TRACK); default: return Expensicons.MoneyCircle; } @@ -295,7 +295,7 @@ function FloatingActionButtonAndPopover( ...(canUseTrackExpense && selfDMReportID ? [ { - icon: getIconForAction(CONST.IOU.TYPE.TRACK_EXPENSE), + icon: getIconForAction(CONST.IOU.TYPE.TRACK), text: translate('iou.trackExpense'), onSelected: () => interceptAnonymousUser(() =>