From 37aeb2141d86bfc2c4129d2880211350e7986170 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 1 Jul 2021 09:42:42 +0530
Subject: [PATCH 1/3] added icons to the IOU payments mode

---
 assets/images/cash.svg             | 27 +++++++++++++++++++++++++++
 assets/images/paypal.svg           | 13 +++++++++++++
 assets/images/venmo.svg            | 11 +++++++++++
 src/components/Icon/Expensicons.js |  6 ++++++
 src/pages/iou/IOUDetailsModal.js   | 30 +++++++++++++++++++++++-------
 5 files changed, 80 insertions(+), 7 deletions(-)
 create mode 100644 assets/images/cash.svg
 create mode 100644 assets/images/paypal.svg
 create mode 100644 assets/images/venmo.svg

diff --git a/assets/images/cash.svg b/assets/images/cash.svg
new file mode 100644
index 000000000000..4691242574c4
--- /dev/null
+++ b/assets/images/cash.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" width="20" height="20"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st0">
+		<path d="M19.4,2.5H0.6C0.2,2.5,0,2.8,0,3.1v10.2c0,0.1,0,0.4,0,0.5c0.1-0.8,0.6-1.5,1.2-2V4.4c0-0.4,0.2-0.6,0.6-0.6h16.2
+			c0.4,0,0.6,0.2,0.6,0.6v10c0,0.4-0.2,0.6-0.6,0.6H11c0.2,0.4,0.5,0.8,0.6,1.2h7.9c0.4,0,0.6-0.2,0.6-0.6V3.1
+			C20,2.8,19.8,2.5,19.4,2.5z"/>
+		<path d="M8.5,15c-0.9,0-1.5,0.5-1.8,1.2c-0.1,0.2-0.1,0.4-0.1,0.6c0,1,0.9,1.9,1.9,1.9s1.9-0.9,1.9-1.9c0-0.2,0-0.4-0.1-0.6
+			C10,15.5,9.4,15,8.5,15z"/>
+		<path d="M3.1,12.5c-0.2,0-0.4,0-0.6,0.1S2,12.9,1.9,13c-0.4,0.4-0.6,0.9-0.6,1.4c0,1,0.9,1.9,1.9,1.9c0.9,0,1.5-0.5,1.8-1.2
+			C5,14.8,5,14.6,5,14.4s0-0.4-0.1-0.6C4.6,13,4,12.5,3.1,12.5z"/>
+		<path d="M17.5,13.8V5h-15v6.4c0.2-0.1,0.4-0.1,0.6-0.1c1.5,0,2.8,1.1,3,2.5h2.4H17.5z M10,7.5c1,0,1.9,0.9,1.9,1.9
+			S11,11.2,10,11.2s-1.9-0.9-1.9-1.9S9,7.5,10,7.5z"/>
+	</g>
+</g>
+</svg>
diff --git a/assets/images/paypal.svg b/assets/images/paypal.svg
new file mode 100644
index 000000000000..01599d5021d5
--- /dev/null
+++ b/assets/images/paypal.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect class="st0" width="20" height="20"/>
+<path d="M11.1,3H5.9C5.4,3,5.2,3.3,5.1,3.5L3,15.9c0,0.2,0.1,0.4,0.4,0.4h3.2L7.4,12c0-0.1,0-0.1,0-0.2c0,0,0,0,0,0
+	c0.1-0.3,0.4-0.5,0.7-0.5h1.5c0.3,0,0.6,0,0.9,0c2.2-0.2,4.5-1.2,5-4.4c0,0,0,0,0,0c0,0,0,0,0-0.1C16.1,3.9,13.8,3,11.1,3z"/>
+<path d="M8.3,12.3l-0.9,5h-1l0,0.2c0,0.2,0.1,0.4,0.4,0.4h2.5c0.5,0,0.7-0.1,0.8-0.5l0.5-3c0.1-0.4,0.3-0.6,0.7-0.6h0.4
+	c0.8,0,4.5,0,5.1-3.8c0.2-1.1,0-2-0.4-2.5c-0.4,1.9-1.4,3.1-2.7,3.9c-1.3,0.8-2.9,1-4.2,1H8.3z"/>
+</svg>
diff --git a/assets/images/venmo.svg b/assets/images/venmo.svg
new file mode 100644
index 000000000000..9c5a87901056
--- /dev/null
+++ b/assets/images/venmo.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect class="st0" width="20" height="20"/>
+<path d="M16.3,3C16.8,3.8,17,4.7,17,5.8c0,3.5-2.9,8-5.3,11.2H6.2L4,3.8l4.8-0.5l1.2,9.4c1.1-1.8,2.4-4.6,2.4-6.5
+	c0-1-0.2-1.8-0.5-2.3L16.3,3z"/>
+</svg>
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index ee804057f893..b33a07486ee7 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -10,6 +10,7 @@ import ChatBubble from '../../../assets/images/chatbubble.svg';
 import Checkmark from '../../../assets/images/checkmark.svg';
 import Clipboard from '../../../assets/images/clipboard.svg';
 import Close from '../../../assets/images/close.svg';
+import Cash from '../../../assets/images/cash.svg';
 import DownArrow from '../../../assets/images/down.svg';
 import Download from '../../../assets/images/download.svg';
 import Emoji from '../../../assets/images/emoji.svg';
@@ -36,6 +37,7 @@ import Pin from '../../../assets/images/pin.svg';
 import PinCircle from '../../../assets/images/pin-circle.svg';
 import Plus from '../../../assets/images/plus.svg';
 import Profile from '../../../assets/images/profile.svg';
+import Paypal from '../../../assets/images/paypal.svg';
 import Receipt from '../../../assets/images/receipt.svg';
 import Send from '../../../assets/images/send.svg';
 import SignOut from '../../../assets/images/sign-out.svg';
@@ -43,6 +45,7 @@ import Sync from '../../../assets/images/sync.svg';
 import Trashcan from '../../../assets/images/trashcan.svg';
 import Users from '../../../assets/images/users.svg';
 import Upload from '../../../assets/images/upload.svg';
+import Venmo from '../../../assets/images/venmo.svg';
 import Wallet from '../../../assets/images/wallet.svg';
 import NewWorkspace from '../../../assets/images/new-workspace.svg';
 import ExpensifyCard from '../../../assets/images/expensifycard.svg';
@@ -60,6 +63,7 @@ export {
     Checkmark,
     Clipboard,
     Close,
+    Cash,
     DownArrow,
     Download,
     Emoji,
@@ -87,6 +91,7 @@ export {
     PinCircle,
     Plus,
     Profile,
+    Paypal,
     Receipt,
     Send,
     SignOut,
@@ -94,6 +99,7 @@ export {
     Trashcan,
     Upload,
     Users,
+    Venmo,
     Wallet,
     NewWorkspace,
 };
diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js
index fadf44e267ec..e5fab18aa913 100644
--- a/src/pages/iou/IOUDetailsModal.js
+++ b/src/pages/iou/IOUDetailsModal.js
@@ -22,6 +22,9 @@ import CreateMenu from '../../components/CreateMenu';
 import isAppInstalled from '../../libs/isAppInstalled';
 import Button from '../../components/Button';
 import Permissions from '../../libs/Permissions';
+import {
+    Cash, Paypal, Venmo, Wallet,
+} from '../../components/Icon/Expensicons';
 
 const propTypes = {
     /** URL Route params */
@@ -198,13 +201,25 @@ class IOUDetailsModal extends Component {
     render() {
         const sessionEmail = lodashGet(this.props.session, 'email', null);
         const reportIsLoading = _.isUndefined(this.props.iouReport);
-        const paymentTypeTextOptions = {
-            [CONST.IOU.PAYMENT_TYPE.EXPENSIFY]: this.props.translate('iou.settleExpensify'),
-            [CONST.IOU.PAYMENT_TYPE.VENMO]: this.props.translate('iou.settleVenmo'),
-            [CONST.IOU.PAYMENT_TYPE.PAYPAL_ME]: this.props.translate('iou.settlePaypalMe'),
-            [CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: this.props.translate('iou.settleElsewhere'),
+        const paymentTypeOptions = {
+            [CONST.IOU.PAYMENT_TYPE.EXPENSIFY]: {
+                text: this.props.translate('iou.settleExpensify'),
+                icon: Wallet,
+            },
+            [CONST.IOU.PAYMENT_TYPE.VENMO]: {
+                text: this.props.translate('iou.settleVenmo'),
+                icon: Venmo,
+            },
+            [CONST.IOU.PAYMENT_TYPE.PAYPAL_ME]: {
+                text: this.props.translate('iou.settlePaypalMe'),
+                icon: Paypal,
+            },
+            [CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: {
+                text: this.props.translate('iou.settleElsewhere'),
+                icon: Cash,
+            },
         };
-        const selectedPaymentType = paymentTypeTextOptions[this.state.paymentType];
+        const selectedPaymentType = paymentTypeOptions[this.state.paymentType].text;
         return (
             <ScreenWrapper>
                 <HeaderWithCloseButton
@@ -258,7 +273,8 @@ class IOUDetailsModal extends Component {
                                         animationOut="fadeOutDown"
                                         headerText={this.props.translate('iou.choosePaymentMethod')}
                                         menuItems={_.map(this.state.paymentOptions, paymentType => ({
-                                            text: paymentTypeTextOptions[paymentType],
+                                            text: paymentTypeOptions[paymentType].text,
+                                            icon: paymentTypeOptions[paymentType].icon,
                                             onSelected: () => {
                                                 this.setState({paymentType});
                                             },

From 291ef58560200cf1ad9788ed871ed52711b567f4 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 1 Jul 2021 22:39:23 +0530
Subject: [PATCH 2/3] reorder the order

---
 src/components/Icon/Expensicons.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index b33a07486ee7..e490531a5c5e 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -16,6 +16,7 @@ import Download from '../../../assets/images/download.svg';
 import Emoji from '../../../assets/images/emoji.svg';
 import Exclamation from '../../../assets/images/exclamation.svg';
 import Eye from '../../../assets/images/eye.svg';
+import ExpensifyCard from '../../../assets/images/expensifycard.svg';
 import Gallery from '../../../assets/images/gallery.svg';
 import Gear from '../../../assets/images/gear.svg';
 import Info from '../../../assets/images/info.svg';
@@ -28,6 +29,7 @@ import MoneyBag from '../../../assets/images/money-bag.svg';
 import MoneyCircle from '../../../assets/images/money-circle.svg';
 import Monitor from '../../../assets/images/monitor.svg';
 import NewWindow from '../../../assets/images/new-window.svg';
+import NewWorkspace from '../../../assets/images/new-workspace.svg';
 import Offline from '../../../assets/images/offline.svg';
 import Paperclip from '../../../assets/images/paperclip.svg';
 import Paycheck from '../../../assets/images/paycheck.svg';
@@ -47,8 +49,6 @@ import Users from '../../../assets/images/users.svg';
 import Upload from '../../../assets/images/upload.svg';
 import Venmo from '../../../assets/images/venmo.svg';
 import Wallet from '../../../assets/images/wallet.svg';
-import NewWorkspace from '../../../assets/images/new-workspace.svg';
-import ExpensifyCard from '../../../assets/images/expensifycard.svg';
 
 export {
     Android,
@@ -82,6 +82,7 @@ export {
     MoneyCircle,
     Monitor,
     NewWindow,
+    NewWorkspace,
     Offline,
     Paperclip,
     Paycheck,
@@ -101,5 +102,4 @@ export {
     Users,
     Venmo,
     Wallet,
-    NewWorkspace,
 };

From 76074fb72d4953140a3bddfd25637e7c3fe520a5 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Thu, 1 Jul 2021 22:49:15 +0530
Subject: [PATCH 3/3] Ner order after reorder.

---
 src/components/Icon/Expensicons.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index e490531a5c5e..98b54c92403e 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -6,11 +6,11 @@ import Bank from '../../../assets/images/bank.svg';
 import Bug from '../../../assets/images/bug.svg';
 import Building from '../../../assets/images/building.svg';
 import Camera from '../../../assets/images/camera.svg';
+import Cash from '../../../assets/images/cash.svg';
 import ChatBubble from '../../../assets/images/chatbubble.svg';
 import Checkmark from '../../../assets/images/checkmark.svg';
 import Clipboard from '../../../assets/images/clipboard.svg';
 import Close from '../../../assets/images/close.svg';
-import Cash from '../../../assets/images/cash.svg';
 import DownArrow from '../../../assets/images/down.svg';
 import Download from '../../../assets/images/download.svg';
 import Emoji from '../../../assets/images/emoji.svg';
@@ -33,13 +33,13 @@ import NewWorkspace from '../../../assets/images/new-workspace.svg';
 import Offline from '../../../assets/images/offline.svg';
 import Paperclip from '../../../assets/images/paperclip.svg';
 import Paycheck from '../../../assets/images/paycheck.svg';
+import Paypal from '../../../assets/images/paypal.svg';
 import Pencil from '../../../assets/images/pencil.svg';
 import Phone from '../../../assets/images/phone.svg';
 import Pin from '../../../assets/images/pin.svg';
 import PinCircle from '../../../assets/images/pin-circle.svg';
 import Plus from '../../../assets/images/plus.svg';
 import Profile from '../../../assets/images/profile.svg';
-import Paypal from '../../../assets/images/paypal.svg';
 import Receipt from '../../../assets/images/receipt.svg';
 import Send from '../../../assets/images/send.svg';
 import SignOut from '../../../assets/images/sign-out.svg';
@@ -59,11 +59,11 @@ export {
     Building,
     Bug,
     Camera,
+    Cash,
     ChatBubble,
     Checkmark,
     Clipboard,
     Close,
-    Cash,
     DownArrow,
     Download,
     Emoji,
@@ -86,13 +86,13 @@ export {
     Offline,
     Paperclip,
     Paycheck,
+    Paypal,
     Pencil,
     Phone,
     Pin,
     PinCircle,
     Plus,
     Profile,
-    Paypal,
     Receipt,
     Send,
     SignOut,