[Wallet]: Group escrow reminder notification (#1580)

Author: i1skn

packages/mobile/locales/en-US/inviteFlow11.json

@@ -24,5 +24,6 @@
   "inviteFriendsToCelo": "Invite Friends to Celo",
   "inviteAnyone": "Invite Anyone in your address book to send and receive value",
   "inviteComplete": "Invite Complete",
-  "inviteReceived": "Invite Received"
+  "inviteReceived": "Invite Received",
+  "pedningInvitations": "Pending Invitations"
 }

packages/mobile/locales/en-US/walletFlow5.json

@@ -3,7 +3,6 @@
   "paymentRequest": "Payment Request",
   "paymentRequestWithCount_plural": "{{count}} Payment Requests",
   "SMSError": "Error sending SMS",
-  "SMSErrorDetails": "Error sending SMS to {{recipientNumber}}: {{errMsg}}",
   "notifications": "Notifications",
   "getBackupKey": "Get Backup Key",
   "setBackupKey": "Set up your Backup Key to enable account recovery and improve account security",
@@ -55,7 +54,9 @@
   "refreshBalances": "Refresh Balances",
   "reclaimPayment": "Reclaim Payment",
   "sendMessage": "Send Message",
-  "escrowedPaymentReminder": "Remind {{mobile}} to Accept Payment",
+  "escrowedPaymentReminderListItemTitle": "Remind {{mobile}} to Accept Payment",
+  "escrowedPaymentReminder": "Remind the recipient to Accept Payment",
+  "escrowedPaymentReminderWithCount_plural": "Remind {{count}} recipients to Accept Payment",
   "escrowedPaymentReminderSms":
     "A friendly reminder that you haven't yet redeemed your Celo Dollars!",
   "testnetAlert": {

packages/mobile/locales/es-419/inviteFlow11.json

@@ -24,5 +24,6 @@
   "inviteFriendsToCelo": "Invitar amigos a Celo",
   "inviteAnyone": "Invite a cualquiera en tu lista de contactos para enviar y recibir valor",
   "inviteComplete": "Invitación completa",
-  "inviteReceived": "Invitación recibida"
+  "inviteReceived": "Invitación recibida",
+  "pedningInvitations": "Invitaciones pendientes"
 }

packages/mobile/locales/es-419/walletFlow5.json

@@ -3,7 +3,6 @@
   "paymentRequest": "Solicitud de pago",
   "paymentRequestWithCount_plural": "{{count}} solicitudes de pago",
   "SMSError": "Error al enviar SMS",
-  "SMSErrorDetails": "Error al enviar SMS a {{recipientNumber}}: {{errMsg}}`",
   "notifications": "Notificaciones",
   "getBackupKey": "Obtener clave de respaldo",
   "setBackupKey":
@@ -56,7 +55,9 @@
   "refreshBalances": "Actualizar saldos",
   "reclaimPayment": "Reclamar el Pago",
   "sendMessage": "Enviar Mensaje",
-  "escrowedPaymentReminder": "Recuérdele a {{mobile #}} que acepte el pago",
+  "escrowedPaymentReminderListItemTitle": "Recuérdele a {{mobile #}} que acepte el pago",
+  "escrowedPaymentReminder": "Reacuerda al receptor aceptar el pago",
+  "escrowedPaymentReminderWithCount_plural": "Recordar {{count}} receptores to aceptar el pago",
   "escrowedPaymentReminderSms":
     "¡Un recordatorio amistoso de que aún no ha canjeado sus dólares de celo!",
   "testnetAlert": {

packages/mobile/src/analytics/constants.ts

@@ -150,6 +150,7 @@ export enum CustomEventNames {
   request_payment_review = 'request_payment_review',
 
   // Escrowed payments
+  escrowed_payment_review = 'escrowed_payment_review',
   escrowed_payment_reclaimed_by_sender = 'escrowed_payment_reclaimed_by_sender',
   escrowed_payment_reclaimEdit_by_sender = 'escrowed_payment_reclaimEdit_by_sender',
   escrowed_payment_withdrawn_by_receiver = 'escrowed_payment_withdrawn_by_receiver',

packages/mobile/src/app/ErrorMessages.ts

@@ -45,4 +45,5 @@ export enum ErrorMessages {
   CORRUPTED_CHAIN_DELETED = 'corruptedChainDeleted',
   CALCULATE_FEE_FAILED = 'calculateFeeFailed',
   FAILED_TO_SWITCH_SYNC_MODES = 'failedToSwitchSyncModes',
+  SMS_ERROR = 'walletFlow5:SMSError',
 }

packages/mobile/src/escrow/EscrowedPaymentLineItem.test.tsx

@@ -1,18 +1,13 @@
 import * as React from 'react'
 import 'react-native'
 import * as renderer from 'react-test-renderer'
-import PaymentRequestNotificationInner from 'src/paymentRequest/PaymentRequestNotificationInner'
-import { mockRecipientWithPhoneNumber } from 'test/values'
+import { escrowPaymentDouble } from 'src/escrow/__mocks__'
+import EscrowedPaymentLineItem from 'src/escrow/EscrowedPaymentLineItem'
+
+const mockedPayment = escrowPaymentDouble({})
 
 it('renders correctly', () => {
-  const tree = renderer.create(
-    <PaymentRequestNotificationInner
-      requesterE164Number={mockRecipientWithPhoneNumber.e164PhoneNumber}
-      comment="You owe me for coffee!"
-      amount="5"
-      requesterRecipient={mockRecipientWithPhoneNumber}
-    />
-  )
+  const tree = renderer.create(<EscrowedPaymentLineItem payment={mockedPayment} />)
 
   expect(tree).toMatchSnapshot()
 })

packages/mobile/src/escrow/EscrowedPaymentLineItem.tsx

@@ -2,7 +2,7 @@ import fontStyles from '@celo/react-components/styles/fonts'
 import * as React from 'react'
 import { StyleSheet, Text } from 'react-native'
 import { EscrowedPayment } from 'src/escrow/actions'
-import { divideByWei, getMoneyDisplayValue } from 'src/utils/formatting'
+import { divideByWei, getCentAwareMoneyDisplay } from 'src/utils/formatting'
 
 interface Props {
   payment: EscrowedPayment
@@ -17,7 +17,7 @@ export default function EscrowedPaymentLineItem(props: Props) {
       </Text>
       <Text style={[fontStyles.subSmall, fontStyles.semiBold]}>
         {' '}
-        ${getMoneyDisplayValue(divideByWei(amount.toString()))}
+        ${getCentAwareMoneyDisplay(divideByWei(amount.toString()))}
       </Text>
     </Text>
   )

packages/mobile/src/notifications/EscrowedPaymentReminderNotification.test.tsx renamed to packages/mobile/src/escrow/EscrowedPaymentListItem.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
 import * as renderer from 'react-test-renderer'
-import EscrowedPaymentReminderNotification from 'src/notifications/EscrowedPaymentReminderNotification'
+import EscrowedPaymentListItem from 'src/escrow/EscrowedPaymentListItem'
 import { createMockStore } from 'test/utils'
 import { mockEscrowedPayment } from 'test/values'
 
@@ -12,7 +12,7 @@ describe('EscrowedPaymentReminderNotification', () => {
   it('renders correctly', () => {
     const tree = renderer.create(
       <Provider store={store}>
-        <EscrowedPaymentReminderNotification payment={mockEscrowedPayment} />
+        <EscrowedPaymentListItem payment={mockEscrowedPayment} />
       </Provider>
     )
     expect(tree).toMatchSnapshot()

packages/mobile/src/notifications/EscrowedPaymentReminderNotification.tsx renamed to packages/mobile/src/escrow/EscrowedPaymentListItem.tsx

@@ -6,12 +6,13 @@ import SendIntentAndroid from 'react-native-send-intent'
 import CeloAnalytics from 'src/analytics/CeloAnalytics'
 import { CustomEventNames } from 'src/analytics/constants'
 import { componentWithAnalytics } from 'src/analytics/wrapper'
+import { ErrorMessages } from 'src/app/ErrorMessages'
 import { EscrowedPayment } from 'src/escrow/actions'
-import EscrowedPaymentLineItem from 'src/escrow/EscrowedPaymentLineItem'
 import { Namespaces } from 'src/i18n'
 import { inviteFriendsIcon } from 'src/images/Images'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
+import NotificationAmount from 'src/paymentRequest/NotificationAmount'
 import { navigateToURI } from 'src/utils/linking'
 import Logger from 'src/utils/Logger'
 
@@ -21,41 +22,43 @@ interface OwnProps {
 
 type Props = OwnProps & WithNamespaces
 
-export class EscrowedPaymentReminderNotification extends React.PureComponent<Props> {
-  getCTA = () => {
+const TAG = 'EscrowedPaymentListItem'
+
+export class EscrowedPaymentListItem extends React.PureComponent<Props> {
+  onSendMessage = () => {
     const { payment, t } = this.props
     const recipientPhoneNumber = payment.recipientPhone
+    CeloAnalytics.track(CustomEventNames.clicked_escrowed_payment_send_message)
+    // TODO: open up whatsapp/text message slider with pre populated message
+    try {
+      if (Platform.OS === 'android') {
+        SendIntentAndroid.sendSms(recipientPhoneNumber, t('escrowedPaymentReminderSms'))
+      } else {
+        // TODO look into using MFMessageComposeViewController to prefill the body for iOS
+        navigateToURI(`sms:${recipientPhoneNumber}`)
+      }
+    } catch (error) {
+      // TODO: use the showError saga instead of the Logger.showError, which is a hacky temp thing we used for a while that doesn't actually work on iOS
+      Logger.showError(ErrorMessages.SMS_ERROR)
+      Logger.error(TAG, `Error sending SMS to ${recipientPhoneNumber}`, error)
+    }
+  }
+  onReclaimPayment = () => {
+    const { payment } = this.props
+    const reclaimPaymentInput = payment
+    CeloAnalytics.track(CustomEventNames.clicked_escrowed_payment_notification)
+    navigate(Screens.ReclaimPaymentConfirmationScreen, { reclaimPaymentInput })
+  }
+  getCTA = () => {
+    const { t } = this.props
     return [
       {
         text: t('sendMessage'),
-        onPress: () => {
-          CeloAnalytics.track(CustomEventNames.clicked_escrowed_payment_send_message)
-          // TODO: open up whatsapp/text message slider with pre populated message
-          try {
-            if (Platform.OS === 'android') {
-              SendIntentAndroid.sendSms(recipientPhoneNumber, t('escrowedPaymentReminderSms'))
-            } else {
-              // TODO look into using MFMessageComposeViewController to prefill the body for iOS
-              navigateToURI(`sms:${recipientPhoneNumber}`)
-            }
-          } catch {
-            Logger.showError(t('SMSError'))
-            Logger.error(
-              'EscrowedPaymentReminderNotification/',
-              t('SMSErrorDetails', {
-                recipientNumber: recipientPhoneNumber,
-              })
-            )
-          }
-        },
+        onPress: this.onSendMessage,
       },
       {
-        text: this.props.t('reclaimPayment'),
-        onPress: () => {
-          const reclaimPaymentInput = payment
-          CeloAnalytics.track(CustomEventNames.clicked_escrowed_payment_notification)
-          navigate(Screens.ReclaimPaymentConfirmationScreen, { reclaimPaymentInput })
-        },
+        text: t('reclaimPayment'),
+        onPress: this.onReclaimPayment,
       },
     ]
   }
@@ -65,7 +68,7 @@ export class EscrowedPaymentReminderNotification extends React.PureComponent<Pro
     const displayName = payment.recipientContact
       ? payment.recipientContact.displayName
       : payment.recipientPhone
-    return t('escrowedPaymentReminder', { mobile: displayName })
+    return t('escrowedPaymentReminderListItemTitle', { mobile: displayName })
   }
 
   render() {
@@ -76,13 +79,10 @@ export class EscrowedPaymentReminderNotification extends React.PureComponent<Pro
         title={this.getTitle()}
         icon={<Image source={inviteFriendsIcon} style={styles.image} resizeMode="contain" />}
         ctas={this.getCTA()}
-        roundedBorders={true}
+        roundedBorders={false}
+        callout={<NotificationAmount amount={payment.amount} />}
       >
-        <View style={styles.body}>
-          <View style={styles.payment}>
-            <EscrowedPaymentLineItem payment={payment} />
-          </View>
-        </View>
+        <View style={styles.body} />
       </BaseNotification>
     )
   }
@@ -103,5 +103,5 @@ const styles = StyleSheet.create({
 })
 
 export default componentWithAnalytics(
-  withNamespaces(Namespaces.walletFlow5)(EscrowedPaymentReminderNotification)
+  withNamespaces(Namespaces.walletFlow5)(EscrowedPaymentListItem)
 )