Fix using requester instead of requestee at Outgoing notifications

packages/mobile/src/paymentRequest/OutgoingPaymentRequestListItem.test.tsx

@@ -9,7 +9,7 @@ const commonProps = {
   amount: '24',
   comment: 'Hey thanks for the loan, Ill pay you back ASAP. LOVE YOU',
   updatePaymentRequestStatus: jest.fn(),
-  requester: {
+  requestee: {
     kind: RecipientKind.MobileNumber,
     e164PhoneNumber: '5126608970',
     displayId: '5126608970',

packages/mobile/src/paymentRequest/OutgoingPaymentRequestListItem.tsx

@@ -17,7 +17,7 @@ import { getCentAwareMoneyDisplay } from 'src/utils/formatting'
 import Logger from 'src/utils/Logger'
 
 interface OwnProps {
-  requester: Recipient
+  requestee: Recipient
   amount: string
   comment: string
   id: string
@@ -56,27 +56,23 @@ export class OutgoingPaymentRequestListItem extends React.Component<Props> {
     ]
   }
 
-  isDisplayingNumber = () => {
-    return this.props.requester.displayId !== this.props.requester.displayName
-  }
-
   render() {
-    const { requester, t } = this.props
+    const { requestee, t } = this.props
     return (
       <View style={styles.container}>
         <BaseNotification
           icon={
             <ContactCircle
               size={AVATAR_SIZE}
-              address={requester.address}
-              name={requester.displayName}
-              thumbnailPath={getRecipientThumbnail(requester)}
+              address={requestee.address}
+              name={requestee.displayName}
+              thumbnailPath={getRecipientThumbnail(requestee)}
             >
               <Image source={unknownUserIcon} style={styles.unknownUser} />
             </ContactCircle>
           }
           title={t('outgoingPaymentRequestNotificationTitle', {
-            name: requester.displayName,
+            name: requestee.displayName,
             amount:
               CURRENCIES[CURRENCY_ENUM.DOLLAR].symbol + getCentAwareMoneyDisplay(this.props.amount),
           })}

packages/mobile/src/paymentRequest/OutgoingPaymentRequestListScreen.tsx

@@ -8,14 +8,18 @@ import { PaymentRequest } from 'src/account/types'
 import { updatePaymentRequestNotified, updatePaymentRequestStatus } from 'src/firebase/actions'
 import i18n, { Namespaces } from 'src/i18n'
 import { fetchPhoneAddresses } from 'src/identity/actions'
-import { e164NumberToAddressSelector, E164NumberToAddressType } from 'src/identity/reducer'
+import {
+  AddressToE164NumberType,
+  e164NumberToAddressSelector,
+  E164NumberToAddressType,
+} from 'src/identity/reducer'
 import {
   NotificationList,
   titleWithBalanceNavigationOptions,
   useBalanceInNavigationParam,
 } from 'src/notifications/NotificationList'
 import OutgoingPaymentRequestListItem from 'src/paymentRequest/OutgoingPaymentRequestListItem'
-import { getRecipientFromPaymentRequest } from 'src/paymentRequest/utils'
+import { getSenderFromPaymentRequest } from 'src/paymentRequest/utils'
 import { NumberToRecipient } from 'src/recipients/recipient'
 import { recipientCacheSelector } from 'src/recipients/reducer'
 import { RootState } from 'src/redux/reducers'
@@ -25,6 +29,7 @@ interface StateProps {
   paymentRequests: PaymentRequest[]
   e164PhoneNumberAddressMapping: E164NumberToAddressType
   recipientCache: NumberToRecipient
+  addressToE164Number: AddressToE164NumberType
 }
 
 interface DispatchProps {
@@ -38,24 +43,30 @@ const mapStateToProps = (state: RootState): StateProps => ({
   paymentRequests: getOutgoingPaymentRequests(state),
   e164PhoneNumberAddressMapping: e164NumberToAddressSelector(state),
   recipientCache: recipientCacheSelector(state),
+  addressToE164Number: state.identity.addressToE164Number,
 })
 
 type Props = NavigationInjectedProps & WithNamespaces & StateProps & DispatchProps
 
 export const listItemRenderer = (params: {
   recipientCache: NumberToRecipient
+  addressToE164Number: AddressToE164NumberType
   updatePaymentRequestStatus: typeof updatePaymentRequestStatus
   updatePaymentRequestNotified: typeof updatePaymentRequestNotified
 }) => (request: PaymentRequest, key: number | undefined = undefined) => {
-  const requester = getRecipientFromPaymentRequest(request, params.recipientCache)
+  const requestee = getSenderFromPaymentRequest(
+    request,
+    params.addressToE164Number,
+    params.recipientCache
+  )
   return (
     <View key={key}>
       <OutgoingPaymentRequestListItem
         id={request.uid || ''}
         amount={request.amount}
         updatePaymentRequestStatus={params.updatePaymentRequestStatus}
         updatePaymentRequestNotified={params.updatePaymentRequestNotified}
-        requester={requester}
+        requestee={requestee}
         comment={request.comment}
       />
     </View>

packages/mobile/src/paymentRequest/OutgoingPaymentRequestSummaryNotification.tsx

@@ -76,6 +76,7 @@ export class OutgoingPaymentRequestSummaryNotification extends React.Component<P
     const { recipientCache, requests, t } = this.props
     return requests.length === 1 ? (
       listItemRenderer({
+        addressToE164Number: this.props.addressToE164Number,
         updatePaymentRequestStatus: this.props.updatePaymentRequestStatus,
         updatePaymentRequestNotified: this.props.updatePaymentRequestNotified,
         recipientCache,

packages/mobile/src/paymentRequest/__snapshots__/OutgoingPaymentRequestListScreen.test.tsx.snap

@@ -108,7 +108,7 @@ exports[`OutgoingPaymentRequestListScreen renders correctly with requests 1`] =
                             "justifyContent": "center",
                           },
                           Object {
-                            "backgroundColor": "#7AD6FE",
+                            "backgroundColor": "#FEB45E",
                             "borderRadius": 20,
                             "height": 40,
                             "width": 40,
@@ -322,7 +322,7 @@ exports[`OutgoingPaymentRequestListScreen renders correctly with requests 1`] =
                             "justifyContent": "center",
                           },
                           Object {
-                            "backgroundColor": "#7AD6FE",
+                            "backgroundColor": "#FEB45E",
                             "borderRadius": 20,
                             "height": 40,
                             "width": 40,
@@ -536,7 +536,7 @@ exports[`OutgoingPaymentRequestListScreen renders correctly with requests 1`] =
                             "justifyContent": "center",
                           },
                           Object {
-                            "backgroundColor": "#7AD6FE",
+                            "backgroundColor": "#FEB45E",
                             "borderRadius": 20,
                             "height": 40,
                             "width": 40,

packages/mobile/src/paymentRequest/utils.ts

@@ -1,4 +1,5 @@
 import { PaymentRequest } from 'src/account/types'
+import { AddressToE164NumberType } from 'src/identity/reducer'
 import { NumberToRecipient, Recipient, RecipientKind } from 'src/recipients/recipient'
 
 export function getRecipientFromPaymentRequest(
@@ -23,3 +24,34 @@ export function getRecipientFromPaymentRequest(
     }
   }
 }
+
+export function getSenderFromPaymentRequest(
+  paymentRequest: PaymentRequest,
+  addressToE164Number: AddressToE164NumberType,
+  recipientCache: NumberToRecipient
+): Recipient {
+  const e164PhoneNumber = addressToE164Number[paymentRequest.requesteeAddress]
+  if (!e164PhoneNumber) {
+    return {
+      kind: RecipientKind.Address,
+      address: paymentRequest.requesteeAddress,
+      displayName: paymentRequest.requesteeAddress,
+    }
+  }
+
+  const cachedRecipient = recipientCache[e164PhoneNumber]
+  if (cachedRecipient) {
+    return {
+      ...cachedRecipient,
+      kind: RecipientKind.Address,
+      address: paymentRequest.requesteeAddress,
+    }
+  } else {
+    return {
+      kind: RecipientKind.MobileNumber,
+      address: paymentRequest.requesterAddress,
+      e164PhoneNumber,
+      displayName: e164PhoneNumber,
+    }
+  }
+}