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}); },