Merge pull request #3852 from parasharrajat/pay-icons

Added icons to the IOU payments mode
Expensify · Jul 1, 2021 · 78238db · 78238db
2 parents 999d374 + 76074fb
commit 78238db
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 10 deletions.
diff --git a/assets/images/cash.svg b/assets/images/cash.svg
diff --git a/assets/images/paypal.svg b/assets/images/paypal.svg
diff --git a/assets/images/venmo.svg b/assets/images/venmo.svg
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
@@ -6,6 +6,7 @@ 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';
@@ -15,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';
@@ -27,9 +29,11 @@ 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';
+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';
@@ -43,9 +47,8 @@ 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';
 
 export {
     Android,
@@ -56,6 +59,7 @@ export {
     Building,
     Bug,
     Camera,
+    Cash,
     ChatBubble,
     Checkmark,
     Clipboard,
@@ -78,9 +82,11 @@ export {
     MoneyCircle,
     Monitor,
     NewWindow,
+    NewWorkspace,
     Offline,
     Paperclip,
     Paycheck,
+    Paypal,
     Pencil,
     Phone,
     Pin,
@@ -94,6 +100,6 @@ export {
     Trashcan,
     Upload,
     Users,
+    Venmo,
     Wallet,
-    NewWorkspace,
 };
diff --git 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});
                                             },