[HOLD for payment 2024-05-08] [$250] Update icons in global create and money request flows

[shawnborton]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue reported by: @shawnborton
Slack conversation: Link [Internal]

Feature Request

We want to update some of the icons found in our global create menu as well as the money request flows:

Notes:

• For Track expense, we want to use the coins icon
• For Request money, we want to use the receipt icon
• For Send money, we want to use the money/cash icon
• For Scan in the money request flows, we want to use the scan receipt icon
• The updates made in the global create menu and segmented control should also be reflected in the Quick action row found in global create

Note that all of these icons already exist in the App repo, we just need to use them in the places mentioned above.

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Note four our internal team: given that this is just very small file name changes, we should drop the bounty down to $125.

cc @Expensify/design @kevinksullivan @mountiny @quinthar

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0162b090372a61cda0
• Upwork Job ID: 1779768720839634944
• Last Price Increase: 2024-04-15
• Automatic offers:
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @puneetlath

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0162b090372a61cda0

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update icons in global create and money request flows

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

Adding new icons for :

• For Track expense, we want to use the coins icon
• For Request money , we want to use the receipt icon
• For Send Money, we want to use the money/cash icon
• For Scan in the money request flows, we want to use the scan receipt icon
  The updates made in the global create menu and segmented control should also be reflected in the Quick action row found in global create as mentioned in the comment
  We can find these icons in the assets add it to their respective components or places that we need to add for example -
  For Track expense, we want to use the coins icon in the global create flow and money request flow.

What alternative solutions did you explore? (Optional)

N/A

[ZhenjaHorbach]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update icons in global create and money request flows

What is the root cause of that problem?

New features

What changes do you think we should make in order to solve the problem?

To fix this issue we need update icons in global create and money request flows following instructions

What alternative solutions did you explore? (Optional)

NA

updated proposal with changes to be added.

[allgandalf]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update icons in global create and money request flows

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

We need to update icons from the global floating menu below:

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 256 to 264 in b5fdc87

	<PopoverMenu
	onClose={hideCreateMenu}
	isVisible={isCreateMenuActive && (!isSmallScreenWidth || isFocused)}
	anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
	onItemSelected={hideCreateMenu}
	fromSidebarMediumScreen={!isSmallScreenWidth}
	menuItems={[
	{
	icon: Expensicons.ChatBubble,

The icons can be found in the expensicons component:

App/src/components/Icon/Expensicons.ts

Line 1 in b5fdc87

import AddReaction from '@assets/images/add-reaction.svg';

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We need to use new icons in global create and money request flows.

What is the root cause of that problem?

New update.

What changes do you think we should make in order to solve the problem?

Update the icons in menu items:

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 262 to 329 in b5fdc87

	menuItems={[
	{
	icon: Expensicons.ChatBubble,
	text: translate('sidebarScreen.fabNewChat'),
	onSelected: () => interceptAnonymousUser(Report.startNewChat),
	},
	...(canUseTrackExpense
	? [
	{
	icon: Expensicons.DocumentPlus,
	text: translate('iou.trackExpense'),
	onSelected: () =>
	interceptAnonymousUser(() =>
	IOU.startMoneyRequest(
	CONST.IOU.TYPE.TRACK_EXPENSE,
	// When starting to create a track expense from the global FAB, we need to retrieve selfDM reportID.
	// If it doesn't exist, we generate a random optimistic reportID and use it for all of the routes in the creation flow.
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	ReportUtils.findSelfDMReportID() || ReportUtils.generateReportID(),
	),
	),
	},
	]
	: []),
	{
	icon: Expensicons.MoneyCircle,
	text: translate('iou.requestMoney'),
	onSelected: () =>
	interceptAnonymousUser(() =>
	IOU.startMoneyRequest(
	CONST.IOU.TYPE.REQUEST,
	// When starting to create a money request from the global FAB, there is not an existing report yet. A random optimistic reportID is generated and used
	// for all of the routes in the creation flow.
	ReportUtils.generateReportID(),
	),
	),
	},
	{
	icon: Expensicons.Send,
	text: translate('iou.sendMoney'),
	onSelected: () =>
	interceptAnonymousUser(() =>
	IOU.startMoneyRequest(
	CONST.IOU.TYPE.SEND,
	// When starting to create a send money request from the global FAB, there is not an existing report yet. A random optimistic reportID is generated and used
	// for all of the routes in the creation flow.
	ReportUtils.generateReportID(),
	),
	),
	},
	{
	icon: Expensicons.Task,
	text: translate('newTaskPage.assignTask'),
	onSelected: () => interceptAnonymousUser(() => Task.clearOutTaskInfoAndNavigate()),
	},
	...(!isLoading && !Policy.hasActiveChatEnabledPolicies(allPolicies)
	? [
	{
	displayInDefaultIconColor: true,
	contentFit: 'contain' as ImageContentFit,
	icon: Expensicons.NewWorkspace,
	iconWidth: 46,
	iconHeight: 40,
	text: translate('workspace.new.newWorkspace'),
	description: translate('workspace.new.getTheExpensifyCardAndMore'),
	onSelected: () => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()),
	},
	]

Update the icons in quick actions as well:

App/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

Lines 72 to 91 in b5fdc87

	const getQuickActionIcon = (action: QuickActionName): React.FC<SvgProps> => {
	switch (action) {
	case CONST.QUICK_ACTIONS.REQUEST_MANUAL:
	return Expensicons.MoneyCircle;
	case CONST.QUICK_ACTIONS.REQUEST_SCAN:
	return Expensicons.Receipt;
	case CONST.QUICK_ACTIONS.REQUEST_DISTANCE:
	return Expensicons.Car;
	case CONST.QUICK_ACTIONS.SPLIT_MANUAL:
	case CONST.QUICK_ACTIONS.SPLIT_SCAN:
	case CONST.QUICK_ACTIONS.SPLIT_DISTANCE:
	return Expensicons.Transfer;
	case CONST.QUICK_ACTIONS.SEND_MONEY:
	return Expensicons.Send;
	case CONST.QUICK_ACTIONS.ASSIGN_TASK:
	return Expensicons.Task;
	default:
	return Expensicons.MoneyCircle;
	}
	};

Update the tab selector icon for scan:

App/src/components/TabSelector/TabSelector.tsx

Lines 28 to 29 in b5fdc87

	case CONST.TAB_REQUEST.SCAN:
	return {icon: Expensicons.Receipt, title: translate('tabSelector.scan')};

Update the icons below as well:

App/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx

Lines 124 to 146 in 2815cf2

	const moneyRequestOptions = useMemo(() => {
	const options: MoneyRequestOptions = {
	[CONST.IOU.TYPE.SPLIT]: {
	icon: Expensicons.Receipt,
	text: translate('iou.splitBill'),
	onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.SPLIT, report?.reportID ?? ''),
	},
	[CONST.IOU.TYPE.REQUEST]: {
	icon: Expensicons.MoneyCircle,
	text: translate('iou.requestMoney'),
	onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.REQUEST, report?.reportID ?? ''),
	},
	[CONST.IOU.TYPE.SEND]: {
	icon: Expensicons.Send,
	text: translate('iou.sendMoney'),
	onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.SEND, report?.reportID ?? ''),
	},
	[CONST.IOU.TYPE.TRACK_EXPENSE]: {
	icon: Expensicons.DocumentPlus,
	text: translate('iou.trackExpense'),
	onSelected: () => IOU.startMoneyRequest(CONST.IOU.TYPE.TRACK_EXPENSE, report?.reportID ?? ''),
	},
	};

All new icons are in Expensicons.ts.