[Wallet] Redesigning notification lists

packages/mobile/.env

@@ -1,6 +1,6 @@
 ENVIRONMENT=local
 DEFAULT_TESTNET=alfajoresstaging
-# If ZERO_SYNC_ENABLED_INITIALLY, local geth will not run initially. 
+# If ZERO_SYNC_ENABLED_INITIALLY, local geth will not run initially.
 # If toggled on, it will use DEFAULT_SYNC_MODE. See src/geth/consts.ts for more info
 ZERO_SYNC_ENABLED_INITIALLY=false
 DEFAULT_SYNC_MODE=5
@@ -10,4 +10,4 @@ SHOW_TESTNET_BANNER=true
 SHOW_GET_INVITE_LINK=false
 DEV_SETTINGS_ACTIVE_INITIALLY=true
 # Enable for true hot reloading while dev-ing UI
-DEV_RESTORE_NAV_STATE_ON_RELOAD=false
+DEV_RESTORE_NAV_STATE_ON_RELOAD=false

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

@@ -63,6 +63,7 @@
   "decline": "Decline",
   "to": "To",
   "for": "For",
+  "reclaim": "Reclaim",
   "celoGold": "Celo Gold",
   "celoDollars": "{{CeloDollars}}",
   "oops": "Oops!",
@@ -102,5 +103,8 @@
   "localCurrencyTitle": "Select Currency",
   "or": "or",
   "accepted": "Accepted",
-  "processing": "Processing"
+  "processing": "Processing",
+  "moreWithCount": "+{{count }} more",
+  "unknown": "Unknown",
+  "emptyList": "Empty list"
 }

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

@@ -25,5 +25,8 @@
   "inviteAnyone": "Invite Anyone in your address book to send and receive value",
   "inviteComplete": "Invite Complete",
   "inviteReceived": "Invite Received",
-  "pedningInvitations": "Pending Invitations"
+  "escrowPaymentNotificationTitle": "Invited ({{amount}}) {{mobile}}",
+  "escrowPaymentNotificationLine": "<0>{{recipientPhone}} for</0> <1>{{amount}}</1>",
+  "escrowPaymentNotificationLine_missingRecipientPhone": "<0>Unknown for</0> <1>{{amount}}</1>",
+  "defaultComment": "Invitation sent"
 }

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

@@ -1,10 +1,12 @@
 {
   "requests": "Requests",
   "empty": "You have no Payment Requests",
-  "incomingPaymentRequests": "Requests Waiting for You",
-  "outgoingPaymentRequests": "Payments You’ve Requested",
   "celoDollarBalance": "{{CeloDollar}} Balance",
   "requestDeclined": "Request Declined",
   "requestPaid": "Request Paid",
-  "paymentRequestUpdateFailed": "Cannot update payment request"
+  "paymentRequestUpdateFailed": "Cannot update payment request",
+  "incomingPaymentRequestNotificationTitle": "{{name}} requested {{amount}}",
+  "outgoingPaymentRequestNotificationTitle": "Requested {{amount}} from {{name}}",
+  "defaultComment": "Payment Requested",
+  "paymentRequestNotificationLine": "<0>{{displayName}} for</0> <1>{{amount}}</1>"
 }

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

@@ -14,7 +14,6 @@
   "sendTo": "Send to",
   "amount": "Amount",
   "celoDollarsAvailable": "{{CeloDollars}} Available",
-  "for": "For",
   "groceriesRent": "Groceries, rent, etc. (Optional)",
   "fee": "Fee",
   "securityFee": "Security Fee",

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

@@ -1,9 +1,7 @@
 {
   "getStarted": "Get Started",
-  "incomingPaymentRequest": "Request Waiting for You",
-  "incomingPaymentRequestWithCount_plural": "{{count}} Requests Waiting on You",
-  "outgoingPaymentRequest": "Payment You’ve Requested",
-  "outgoingPaymentRequestWithCount_plural": "{{count}} Payments You’ve Requested",
+  "incomingPaymentRequests": "Requests from Others",
+  "outgoingPaymentRequests": "Payments You’ve Requested",
   "SMSError": "Error sending SMS",
   "notifications": "Notifications",
   "getBackupKey": "Get Backup Key",
@@ -54,11 +52,7 @@
   "maybeLater": "Maybe Later",
   "balanceNeedUpdating": "Balance needs updating",
   "refreshBalances": "Refresh Balances",
-  "reclaimPayment": "Reclaim Payment",
-  "sendMessage": "Send Message",
-  "escrowedPaymentReminderListItemTitle": "Remind {{mobile}} to Accept Payment",
-  "escrowedPaymentReminder": "Remind the recipient to Accept Payment",
-  "escrowedPaymentReminderWithCount_plural": "Remind {{count}} recipients to Accept Payment",
+  "escrowedPaymentReminder": "Pending Invitations",
   "escrowedPaymentReminderSms":
     "A friendly reminder that you haven't yet redeemed your Celo Dollars!",
   "testnetAlert": {

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

@@ -63,6 +63,7 @@
   "decline": "Disminución",
   "to": "Para",
   "for": "Por",
+  "reclaim": "Reclaim",
   "celoGold": "Celo Oro",
   "celoDollars": "{{CeloDollars}}",
   "oops": "¡Uy!",
@@ -103,5 +104,8 @@
   "localCurrencyTitle": "Seleccione el tipo de moneda",
   "or": "o",
   "accepted": "Aceptado",
-  "processing": "Procesando"
+  "processing": "Procesando",
+  "moreWithCount": "~~+{{count }} more",
+  "unknown": "~~Unknown",
+  "emptyList": "~~Empty list"
 }

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

@@ -25,5 +25,8 @@
   "inviteAnyone": "Invite a cualquiera en tu lista de contactos para enviar y recibir valor",
   "inviteComplete": "Invitación completa",
   "inviteReceived": "Invitación recibida",
-  "pedningInvitations": "Invitaciones pendientes"
+  "escrowPaymentNotificationTitle": "~~Invited ({{amount}}) {{mobile}}",
+  "escrowPaymentNotificationLine": "~~<0>{{recipientPhone}} for</0> <1>{{amount}}</1>",
+  "escrowPaymentNotificationLine_missingRecipientPhone": "~~<0>Unknown for</0> <1>{{amount}}</1>",
+  "defaultComment": "~~Invitation sent"
 }

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

@@ -1,10 +1,12 @@
 {
   "requests": "Solicitudes",
   "empty": "No tienes solicitudes de pago",
-  "incomingPaymentRequests": "Pedidos esperandote",
-  "outgoingPaymentRequests": "Pagos que tu has pedido",
   "celoDollarBalance": "Saldo de {{CeloDollar}}",
   "requestDeclined": "Solicitud rechazada",
   "requestPaid": "Solicitud Pagada",
-  "paymentRequestUpdateFailed": "No se pudo actualizar el pedido de pago"
+  "paymentRequestUpdateFailed": "No se pudo actualizar el pedido de pago",
+  "incomingPaymentRequestNotificationTitle": "~~{{name}} requested {{amount}}",
+  "outgoingPaymentRequestNotificationTitle": "~~Requested {{amount}} from {{name}}",
+  "defaultComment": "~~Payment Requested",
+  "paymentRequestNotificationLine": "~~<0>{{displayName}} for</0> <1>{{amount}}</1>"
 }

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

@@ -14,7 +14,6 @@
   "sendTo": "Enviar a",
   "amount": "Monto",
   "celoDollarsAvailable": "{{CeloDollars}} disponibles",
-  "for": "Por",
   "groceriesRent": "Supermercado, alquiler, etc. (Opcional)",
   "fee": "Comisión",
   "securityFee": "Comisión de seguridad",

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

@@ -1,9 +1,7 @@
 {
   "getStarted": "Primeros pasos",
-  "incomingPaymentRequest": "Pedido esperandote",
-  "incomingPaymentRequestWithCount_plural": "{{count}} Pedidos esperandote",
-  "outgoingPaymentRequest": "Pago que tu has pedido",
-  "outgoingPaymentRequestWithCount_plural": "{{count}} Pagos que tu has pedido",
+  "incomingPaymentRequests": "~~Requests from Others",
+  "outgoingPaymentRequests": "~~Payments You’ve Requested",
   "SMSError": "Error al enviar SMS",
   "notifications": "Notificaciones",
   "getBackupKey": "Obtener clave de respaldo",
@@ -55,11 +53,7 @@
   "maybeLater": "quizas mas tarde",
   "balanceNeedUpdating": "Saldo necesita actualizarse",
   "refreshBalances": "Actualizar saldos",
-  "reclaimPayment": "Reclamar el Pago",
-  "sendMessage": "Enviar Mensaje",
-  "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/escrow/EscrowedPaymentLineItem.tsx

@@ -1,24 +1,33 @@
 import fontStyles from '@celo/react-components/styles/fonts'
 import * as React from 'react'
+import { Trans, withNamespaces, WithNamespaces } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { EscrowedPayment } from 'src/escrow/actions'
+import { CURRENCIES, CURRENCY_ENUM } from 'src/geth/consts'
 import { divideByWei, getCentAwareMoneyDisplay } from 'src/utils/formatting'
 
 interface Props {
   payment: EscrowedPayment
 }
 
-export default function EscrowedPaymentLineItem(props: Props) {
-  const { amount, message, recipientPhone } = props.payment
+function EscrowedPaymentLineItem(props: Props & WithNamespaces) {
+  const { amount, recipientPhone } = props.payment
   return (
     <Text numberOfLines={1} ellipsizeMode="middle" style={styles.oneLine}>
-      <Text style={[fontStyles.subSmall]}>
-        {recipientPhone} - {message}
-      </Text>
-      <Text style={[fontStyles.subSmall, fontStyles.semiBold]}>
-        {' '}
-        ${getCentAwareMoneyDisplay(divideByWei(amount.toString()))}
-      </Text>
+      <Trans
+        i18nKey="escrowPaymentNotificationLine"
+        // @ts-ignore tOptions prop is missing in type bindings, but exists in the implementation
+        tOptions={{ context: !recipientPhone ? 'missingRecipientPhone' : null }}
+        values={{
+          amount:
+            CURRENCIES[CURRENCY_ENUM.DOLLAR].symbol +
+            getCentAwareMoneyDisplay(divideByWei(amount.toString())),
+          recipientPhone,
+        }}
+      >
+        <Text style={fontStyles.subSmall}>{{ recipientPhone }} for </Text>
+        <Text style={[fontStyles.subSmall, fontStyles.semiBold]}>{{ amount }}</Text>
+      </Trans>
     </Text>
   )
 }
@@ -28,3 +37,5 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
 })
+
+export default withNamespaces('inviteFlow11')(EscrowedPaymentLineItem)

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

@@ -3,6 +3,7 @@ import 'react-native'
 import { Provider } from 'react-redux'
 import * as renderer from 'react-test-renderer'
 import EscrowedPaymentListItem from 'src/escrow/EscrowedPaymentListItem'
+
 import { createMockStore } from 'test/utils'
 import { mockEscrowedPayment } from 'test/values'
 

packages/mobile/src/escrow/EscrowedPaymentListItem.tsx

@@ -1,18 +1,20 @@
 import BaseNotification from '@celo/react-components/components/BaseNotification'
+import fontStyles from '@celo/react-components/styles/fonts'
 import * as React from 'react'
 import { WithNamespaces, withNamespaces } from 'react-i18next'
-import { Image, Platform, StyleSheet, View } from 'react-native'
+import { Image, Platform, StyleSheet, Text, View } from 'react-native'
 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 { CURRENCIES, CURRENCY_ENUM } from 'src/geth/consts'
 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 { divideByWei, getCentAwareMoneyDisplay } from 'src/utils/formatting'
 import { navigateToURI } from 'src/utils/linking'
 import Logger from 'src/utils/Logger'
 
@@ -25,14 +27,14 @@ type Props = OwnProps & WithNamespaces
 const TAG = 'EscrowedPaymentListItem'
 
 export class EscrowedPaymentListItem extends React.PureComponent<Props> {
-  onSendMessage = () => {
+  onRemind = () => {
     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'))
+        SendIntentAndroid.sendSms(recipientPhoneNumber, t('walletFlow5:escrowedPaymentReminderSms'))
       } else {
         // TODO look into using MFMessageComposeViewController to prefill the body for iOS
         navigateToURI(`sms:${recipientPhoneNumber}`)
@@ -51,44 +53,50 @@ export class EscrowedPaymentListItem extends React.PureComponent<Props> {
   }
   getCTA = () => {
     const { t } = this.props
-    return [
-      {
-        text: t('sendMessage'),
-        onPress: this.onSendMessage,
-      },
-      {
-        text: t('reclaimPayment'),
-        onPress: this.onReclaimPayment,
-      },
-    ]
+    const ctas = []
+    if (this.getDisplayName()) {
+      ctas.push({
+        text: t('global:remind'),
+        onPress: this.onRemind,
+      })
+    }
+    ctas.push({
+      text: t('global:reclaim'),
+      onPress: this.onReclaimPayment,
+    })
+    return ctas
   }
 
-  getTitle() {
-    const { t, payment } = this.props
-    const displayName = payment.recipientContact
-      ? payment.recipientContact.displayName
-      : payment.recipientPhone
-    return t('escrowedPaymentReminderListItemTitle', { mobile: displayName })
+  getDisplayName() {
+    const { payment } = this.props
+    return payment.recipientContact ? payment.recipientContact.displayName : payment.recipientPhone
   }
 
   render() {
-    const { payment } = this.props
-
+    const { t, payment } = this.props
     return (
-      <BaseNotification
-        title={this.getTitle()}
-        icon={<Image source={inviteFriendsIcon} style={styles.image} resizeMode="contain" />}
-        ctas={this.getCTA()}
-        roundedBorders={false}
-        callout={<NotificationAmount amount={payment.amount} />}
-      >
-        <View style={styles.body} />
-      </BaseNotification>
+      <View style={styles.container}>
+        <BaseNotification
+          title={t('escrowPaymentNotificationTitle', {
+            mobile: this.getDisplayName() || t('global:unknown'),
+            amount:
+              CURRENCIES[CURRENCY_ENUM.DOLLAR].symbol +
+              getCentAwareMoneyDisplay(divideByWei(payment.amount)),
+          })}
+          icon={<Image source={inviteFriendsIcon} style={styles.image} resizeMode="contain" />}
+          ctas={this.getCTA()}
+        >
+          <Text style={fontStyles.bodySmall}>{payment.message || t('defaultComment')}</Text>
+        </BaseNotification>
+      </View>
     )
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
   body: {
     marginTop: 5,
     flexDirection: 'row',
@@ -103,5 +111,5 @@ const styles = StyleSheet.create({
 })
 
 export default componentWithAnalytics(
-  withNamespaces(Namespaces.walletFlow5)(EscrowedPaymentListItem)
+  withNamespaces(Namespaces.inviteFlow11)(EscrowedPaymentListItem)
 )

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

@@ -1,14 +1,23 @@
+import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
 import * as renderer from 'react-test-renderer'
 import { escrowPaymentDouble } from 'src/escrow/__mocks__'
 import { EscrowedPayment } from 'src/escrow/actions'
 import EscrowedPaymentListScreen from 'src/escrow/EscrowedPaymentListScreen'
-import { createMockStore } from 'test/utils'
+import { createMockNavigationProp, createMockStore } from 'test/utils'
+import { mockAccount, mockRecipient } from 'test/values'
 
 const payments = [escrowPaymentDouble({}), escrowPaymentDouble({}), escrowPaymentDouble({})]
 
+const navigation = createMockNavigationProp({
+  recipient: mockRecipient,
+  recipientAddress: mockAccount,
+  amount: new BigNumber(10),
+  reason: 'My Reason',
+})
+
 function testStore(sentEscrowedPayments: EscrowedPayment[]) {
   return createMockStore({
     stableToken: { balance: '120' },
@@ -22,7 +31,7 @@ describe('EscrowedPaymentListScreen', () => {
 
     const tree = renderer.create(
       <Provider store={store}>
-        <EscrowedPaymentListScreen />
+        <EscrowedPaymentListScreen navigation={navigation} />
       </Provider>
     )
     expect(tree).toMatchSnapshot()
@@ -33,7 +42,7 @@ describe('EscrowedPaymentListScreen', () => {
 
     const tree = renderer.create(
       <Provider store={store}>
-        <EscrowedPaymentListScreen />
+        <EscrowedPaymentListScreen navigation={navigation} />
       </Provider>
     )
     expect(tree).toMatchSnapshot()