Address comments in the PR

celo-org · Dec 11, 2019 · c80d4b7 · c80d4b7
1 parent f57b96b
commit c80d4b7
Show file tree

Hide file tree

Showing 19 changed files with 813 additions and 826 deletions.
diff --git a/packages/mobile/locales/en-US/inviteFlow11.json b/packages/mobile/locales/en-US/inviteFlow11.json
@@ -26,5 +26,7 @@
   "inviteComplete": "Invite Complete",
   "inviteReceived": "Invite Received",
   "escrowPaymentNotificationTitle": "Invited ({{amount}}) {{mobile}}",
+  "escrowPaymentNotificationLine": "<0>{{recipientPhone}} for</0> <1>{{amount}}</1>",
+  "escrowPaymentNotificationLine_missingRecipientPhone": "<0>Unknown for</0> <1>{{amount}}</1>",
   "defaultComment": "Invitation sent"
 }
diff --git a/packages/mobile/locales/en-US/paymentRequestFlow.json b/packages/mobile/locales/en-US/paymentRequestFlow.json
@@ -7,5 +7,6 @@
   "paymentRequestUpdateFailed": "Cannot update payment request",
   "incomingPaymentRequestNotificationTitle": "{{name}} requested {{amount}}",
   "outgoingPaymentRequestNotificationTitle": "Requested {{amount}} from {{name}}",
-  "defaultComment": "Payment Requested"
+  "defaultComment": "Payment Requested",
+  "paymentRequestNotificationLine": "<0>{{displayName}} for</0> <1>{{amount}}</1>"
 }
diff --git a/packages/mobile/locales/es-419/inviteFlow11.json b/packages/mobile/locales/es-419/inviteFlow11.json
@@ -26,5 +26,7 @@
   "inviteComplete": "Invitación completa",
   "inviteReceived": "Invitación recibida",
   "escrowPaymentNotificationTitle": "~~Invited ({{amount}}) {{mobile}}",
+  "escrowPaymentNotificationLine": "~~<0>{{recipientPhone}} for</0> <1>{{amount}}</1>",
+  "escrowPaymentNotificationLine_missingRecipientPhone": "~~<0>Unknown for</0> <1>{{amount}}</1>",
   "defaultComment": "~~Invitation sent"
 }
diff --git a/packages/mobile/locales/es-419/paymentRequestFlow.json b/packages/mobile/locales/es-419/paymentRequestFlow.json
@@ -7,5 +7,6 @@
   "paymentRequestUpdateFailed": "No se pudo actualizar el pedido de pago",
   "incomingPaymentRequestNotificationTitle": "~~{{name}} requested {{amount}}",
   "outgoingPaymentRequestNotificationTitle": "~~Requested {{amount}} from {{name}}",
-  "defaultComment": "~~Payment Requested"
+  "defaultComment": "~~Payment Requested",
+  "paymentRequestNotificationLine": "~~<0>{{displayName}} for</0> <1>{{amount}}</1>"
 }
diff --git a/packages/mobile/locales/es-419/walletFlow5.json b/packages/mobile/locales/es-419/walletFlow5.json
@@ -54,7 +54,6 @@
   "balanceNeedUpdating": "Saldo necesita actualizarse",
   "refreshBalances": "Actualizar saldos",
   "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": {

diff --git a/packages/mobile/src/escrow/EscrowedPaymentLineItem.tsx b/packages/mobile/src/escrow/EscrowedPaymentLineItem.tsx
@@ -1,26 +1,34 @@
 import fontStyles from '@celo/react-components/styles/fonts'
 import * as React from 'react'
-import { withNamespaces, WithNamespaces } from 'react-i18next'
+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
 }
 
 function EscrowedPaymentLineItem(props: Props & WithNamespaces) {
-  const { t } = props
   const { amount, recipientPhone } = props.payment
   return (
     <Text numberOfLines={1} ellipsizeMode="middle" style={styles.oneLine}>
-      <Text style={[fontStyles.subSmall]}>
-        {recipientPhone ? recipientPhone : t('unknown')} {t('for')}
-      </Text>
-      <Text style={[fontStyles.subSmall, fontStyles.semiBold]}>
-        {' '}
-        ${getCentAwareMoneyDisplay(divideByWei(amount.toString()))}
-      </Text>
+      {/* 
+      // @ts-ignore tOptions prop is missing in type bindings, but exists in the implementation */}
+      <Trans
+        i18nKey="escrowPaymentNotificationLine"
+        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>
   )
 }
@@ -31,4 +39,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default withNamespaces('global')(EscrowedPaymentLineItem)
+export default withNamespaces('inviteFlow11')(EscrowedPaymentLineItem)
diff --git a/packages/mobile/src/escrow/EscrowedPaymentReminderSummaryNotification.tsx b/packages/mobile/src/escrow/EscrowedPaymentReminderSummaryNotification.tsx
@@ -25,8 +25,8 @@ export class EscrowedPaymentReminderSummaryNotification extends React.Component<
     navigate(Stacks.EscrowStack)
   }
 
-  itemRenderer = (item: EscrowedPayment, key: number) => {
-    return <EscrowedPaymentLineItem payment={item} key={key} />
+  itemRenderer = (item: EscrowedPayment) => {
+    return <EscrowedPaymentLineItem payment={item} key={item.paymentID} />
   }
 
   render() {

diff --git a/packages/mobile/src/escrow/__snapshots__/EscrowedPaymentLineItem.test.tsx.snap b/packages/mobile/src/escrow/__snapshots__/EscrowedPaymentLineItem.test.tsx.snap
@@ -12,19 +12,16 @@ exports[`renders correctly 1`] = `
 >
   <Text
     style={
-      Array [
-        Object {
-          "color": "#81868B",
-          "fontFamily": "Hind-Regular",
-          "fontSize": 14,
-          "lineHeight": 20,
-        },
-      ]
+      Object {
+        "color": "#81868B",
+        "fontFamily": "Hind-Regular",
+        "fontSize": 14,
+        "lineHeight": 20,
+      }
     }
   >
     +491522345678
-     
-    for
+     for 
   </Text>
   <Text
     style={
@@ -41,9 +38,7 @@ exports[`renders correctly 1`] = `
       ]
     }
   >
-     
-    $
-    7
+    11870000
   </Text>
 </Text>
 `;
diff --git a/.../mobile/src/escrow/__snapshots__/EscrowedPaymentReminderSummaryNotification.test.tsx.snap b/.../mobile/src/escrow/__snapshots__/EscrowedPaymentReminderSummaryNotification.test.tsx.snap
@@ -103,19 +103,16 @@ exports[`EscrowedPaymentReminderSummaryNotification renders correctly 1`] = `
             >
               <Text
                 style={
-                  Array [
-                    Object {
-                      "color": "#81868B",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 20,
-                    },
-                  ]
+                  Object {
+                    "color": "#81868B",
+                    "fontFamily": "Hind-Regular",
+                    "fontSize": 14,
+                    "lineHeight": 20,
+                  }
                 }
               >
                 +491522345678
-                 
-                for
+                 for 
               </Text>
               <Text
                 style={
@@ -132,9 +129,7 @@ exports[`EscrowedPaymentReminderSummaryNotification renders correctly 1`] = `
                   ]
                 }
               >
-                 
-                $
-                7
+                11870000
               </Text>
             </Text>
             <Text
@@ -148,19 +143,16 @@ exports[`EscrowedPaymentReminderSummaryNotification renders correctly 1`] = `
             >
               <Text
                 style={
-                  Array [
-                    Object {
-                      "color": "#81868B",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 20,
-                    },
-                  ]
+                  Object {
+                    "color": "#81868B",
+                    "fontFamily": "Hind-Regular",
+                    "fontSize": 14,
+                    "lineHeight": 20,
+                  }
                 }
               >
                 +491522345678
-                 
-                for
+                 for 
               </Text>
               <Text
                 style={
@@ -177,9 +169,7 @@ exports[`EscrowedPaymentReminderSummaryNotification renders correctly 1`] = `
                   ]
                 }
               >
-                 
-                $
-                7
+                11870000
               </Text>
             </Text>
           </View>
@@ -524,19 +514,16 @@ exports[`EscrowedPaymentReminderSummaryNotification when more than 2 requests re
             >
               <Text
                 style={
-                  Array [
-                    Object {
-                      "color": "#81868B",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 20,
-                    },
-                  ]
+                  Object {
+                    "color": "#81868B",
+                    "fontFamily": "Hind-Regular",
+                    "fontSize": 14,
+                    "lineHeight": 20,
+                  }
                 }
               >
                 +491522345678
-                 
-                for
+                 for 
               </Text>
               <Text
                 style={
@@ -553,9 +540,7 @@ exports[`EscrowedPaymentReminderSummaryNotification when more than 2 requests re
                   ]
                 }
               >
-                 
-                $
-                7
+                11870000
               </Text>
             </Text>
             <Text
@@ -569,19 +554,16 @@ exports[`EscrowedPaymentReminderSummaryNotification when more than 2 requests re
             >
               <Text
                 style={
-                  Array [
-                    Object {
-                      "color": "#81868B",
-                      "fontFamily": "Hind-Regular",
-                      "fontSize": 14,
-                      "lineHeight": 20,
-                    },
-                  ]
+                  Object {
+                    "color": "#81868B",
+                    "fontFamily": "Hind-Regular",
+                    "fontSize": 14,
+                    "lineHeight": 20,
+                  }
                 }
               >
                 +491522345678
-                 
-                for
+                 for 
               </Text>
               <Text
                 style={
@@ -598,9 +580,7 @@ exports[`EscrowedPaymentReminderSummaryNotification when more than 2 requests re
                   ]
                 }
               >
-                 
-                $
-                7
+                11870000
               </Text>
             </Text>
           </View>

diff --git a/packages/mobile/src/home/__snapshots__/NotificationBox.test.tsx.snap b/packages/mobile/src/home/__snapshots__/NotificationBox.test.tsx.snap
@@ -135,8 +135,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
                         }
                       >
                         +14155550000
-                         
-                        for
+                         for 
                       </Text>
                       <Text
                         style={
@@ -153,7 +152,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
                           ]
                         }
                       >
-                         $12.34
+                        12.34
                       </Text>
                     </Text>
                     <Text
@@ -176,8 +175,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
                         }
                       >
                         +14155550000
-                         
-                        for
+                         for 
                       </Text>
                       <Text
                         style={
@@ -194,7 +192,7 @@ exports[`NotificationBox renders correctly for with all notifications 1`] = `
                           ]
                         }
                       >
-                         $12.34
+                        12.34
                       </Text>
                     </Text>
                   </View>

diff --git a/packages/mobile/src/paymentRequest/IncomingPaymentRequestSummaryNotification.tsx b/packages/mobile/src/paymentRequest/IncomingPaymentRequestSummaryNotification.tsx
@@ -60,10 +60,10 @@ export class IncomingPaymentRequestSummaryNotification extends React.Component<P
     navigate(Stacks.IncomingRequestStack)
   }
 
-  itemRenderer = (item: PaymentRequest, key: number) => {
+  itemRenderer = (item: PaymentRequest) => {
     return (
       <PaymentRequestNotificationInner
-        key={key}
+        key={item.uid}
         amount={item.amount}
         requesterE164Number={item.requesterE164Number}
         requesterRecipient={this.getRequesterRecipient(item.requesterE164Number)}

diff --git a/packages/mobile/src/paymentRequest/OutgoingPaymentRequestSummaryNotification.tsx b/packages/mobile/src/paymentRequest/OutgoingPaymentRequestSummaryNotification.tsx
@@ -61,10 +61,10 @@ export class OutgoingPaymentRequestSummaryNotification extends React.Component<P
     )
   }
 
-  itemRenderer = (item: PaymentRequest, key: number) => {
+  itemRenderer = (item: PaymentRequest) => {
     return (
       <PaymentRequestNotificationInner
-        key={key}
+        key={item.uid}
         amount={item.amount}
         requesterE164Number={item.requesterE164Number}
         requesterRecipient={this.getRequesterRecipient(item.requesterE164Number)}

diff --git a/packages/mobile/src/paymentRequest/PaymentRequestNotificationInner.tsx b/packages/mobile/src/paymentRequest/PaymentRequestNotificationInner.tsx
@@ -1,6 +1,6 @@
 import fontStyles from '@celo/react-components/styles/fonts'
 import * as React from 'react'
-import { WithNamespaces, withNamespaces } from 'react-i18next'
+import { Trans, withNamespaces, WithNamespaces } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import { CURRENCIES, CURRENCY_ENUM } from 'src/geth/consts'
 import { Recipient } from 'src/recipients/recipient'
@@ -13,15 +13,20 @@ interface Props {
 }
 
 function PaymentRequestNotificationInner(props: Props & WithNamespaces) {
-  const { t, requesterE164Number, amount, requesterRecipient } = props
+  const { requesterE164Number, amount, requesterRecipient } = props
+  const displayName = (requesterRecipient && requesterRecipient.displayName) || requesterE164Number
   return (
     <Text numberOfLines={1} ellipsizeMode="middle" style={styles.oneLine}>
-      <Text style={fontStyles.subSmall}>
-        {(requesterRecipient && requesterRecipient.displayName) || requesterE164Number} {t('for')}
-      </Text>
-      <Text style={[fontStyles.subSmall, fontStyles.semiBold]}>
-        {' ' + CURRENCIES[CURRENCY_ENUM.DOLLAR].symbol + getCentAwareMoneyDisplay(amount)}
-      </Text>
+      <Trans
+        i18nKey="paymentRequestNotificationLine"
+        values={{
+          amount: CURRENCIES[CURRENCY_ENUM.DOLLAR].symbol + getCentAwareMoneyDisplay(amount),
+          displayName,
+        }}
+      >
+        <Text style={fontStyles.subSmall}>{{ displayName }} for </Text>
+        <Text style={[fontStyles.subSmall, fontStyles.semiBold]}>{{ amount }}</Text>
+      </Trans>
     </Text>
   )
 }
@@ -32,4 +37,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default withNamespaces('global')(PaymentRequestNotificationInner)
+export default withNamespaces('paymentRequestFlow')(PaymentRequestNotificationInner)