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 @@
+
+
+
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 @@
+
+
+
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 @@
+
+
+
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index ee804057f893..98b54c92403e 100644
--- 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
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 (
({
- text: paymentTypeTextOptions[paymentType],
+ text: paymentTypeOptions[paymentType].text,
+ icon: paymentTypeOptions[paymentType].icon,
onSelected: () => {
this.setState({paymentType});
},