add a payment popup for pending transactions (keybase#18295)

* wip * touch up text on pending payment popup * add pending icon to payment popup * add a storyshot for pending payment popup * reorder
SaltineChips · Jul 12, 2019 · 1b1d5c0 · 1b1d5c0
1 parent 490ea0d
commit 1b1d5c0
Show file tree

Hide file tree

Showing 5 changed files with 396 additions and 13 deletions.
diff --git a/shared/chat/conversation/messages/message-popup/payment/container.tsx b/shared/chat/conversation/messages/message-popup/payment/container.tsx
@@ -77,7 +77,9 @@ const sendMapDispatchToProps = (dispatch: Container.TypedDispatch) => ({
 })
 
 const getTopLineUser = (paymentInfo, sender, you: string) => {
-  if (paymentInfo.fromUsername === you) {
+  if (paymentInfo.status === 'pending') {
+    return 'pending'
+  } else if (paymentInfo.fromUsername === you) {
     return 'you sent'
   } else if (paymentInfo.toUsername === you) {
     return 'you received'
@@ -130,6 +132,7 @@ const sendMergeProps = (
     onSeeDetails:
       (paymentInfo.status === 'completed' ||
         paymentInfo.status === 'error' ||
+        paymentInfo.status === 'pending' ||
         paymentInfo.status === 'claimable' ||
         paymentInfo.status === 'canceled') &&
       (youAreSender || youAreReceiver)
@@ -138,7 +141,7 @@ const sendMergeProps = (
     position: ownProps.position,
     sender: ownProps.message.author,
     senderDeviceName: ownProps.message.deviceName,
-    status: '',
+    status: paymentInfo.status,
     style: ownProps.style,
     timestamp: formatTimeForMessages(ownProps.message.timestamp),
     topLine: `${getTopLineUser(paymentInfo, ownProps.message.author, you)}${

diff --git a/shared/chat/conversation/messages/message-popup/payment/index.stories.tsx b/shared/chat/conversation/messages/message-popup/payment/index.stories.tsx
@@ -128,6 +128,12 @@ const youSendXLMProps = {
   txVerb: 'sent',
 } as Props
 
+const pendingPaymentProps = {
+  ...youSendXLMProps,
+  status: 'pending',
+  topLine: 'pending',
+}
+
 const loadingProps = {
   ...commonProps,
   amountNominal: '',
@@ -160,6 +166,7 @@ const load = () => {
     .add('You receive BTC', () => <PaymentPopupMoved {...youReceiveBTCProps} />)
     .add('You send BTC', () => <PaymentPopupMoved {...youSendBTCProps} />)
     .add('You send XLM', () => <PaymentPopupMoved {...youSendXLMProps} />)
+    .add('Pending', () => <PaymentPopupMoved {...pendingPaymentProps} />)
     .add('Completed request', () => <PaymentPopupMoved {...completedProps} />)
     .add('Canceled request', () => <PaymentPopupMoved {...canceledProps} />)
     .add('Loading', () => <PaymentPopupMoved {...loadingProps} />)

diff --git a/shared/chat/conversation/messages/message-popup/payment/index.tsx b/shared/chat/conversation/messages/message-popup/payment/index.tsx
@@ -34,6 +34,7 @@ const receiveIcon = Styles.isMobile
   : 'icon-fancy-stellar-receiving-desktop-98-86'
 
 const headerIconHeight = Styles.isMobile ? 129 : 86
+const pendingIconSize = 40
 
 type HeaderProps = {
   amountNominal: string
@@ -64,6 +65,21 @@ export type Props = {
   visible: boolean
 } & HeaderProps
 
+const headerIcon = (props: HeaderProps) =>
+  props.status === 'pending' ? (
+    <Kb.Icon
+      type="iconfont-time"
+      color={Styles.globalColors.black_50}
+      fontSize={pendingIconSize}
+      style={Kb.iconCastPlatformStyles(styles.pendingHeaderIcon)}
+    />
+  ) : (
+    <Kb.Icon
+      type={props.icon === 'sending' ? sendIcon : receiveIcon}
+      style={Kb.iconCastPlatformStyles(styles.headerIcon)}
+    />
+  )
+
 const Header = (props: HeaderProps) =>
   props.loading ? (
     <Kb.Box2 direction="vertical" fullWidth={true} style={styles.popupContainer}>
@@ -73,24 +89,21 @@ const Header = (props: HeaderProps) =>
     </Kb.Box2>
   ) : (
     <Kb.Box2 fullWidth={true} gap="small" gapEnd={true} direction="vertical" style={styles.popupContainer}>
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.headerTop}>
-        <Kb.Icon
-          type={props.icon === 'sending' ? sendIcon : receiveIcon}
-          style={Kb.iconCastPlatformStyles(styles.headerIcon)}
-        />
-        <Kb.Text type="BodyTiny" style={styles.colorWhite}>
+      <Kb.Box2 direction="vertical" fullWidth={true} style={headerTop(props)}>
+        {headerIcon(props)}
+        <Kb.Text type="BodyTiny" style={headerTextStyle(props)}>
           {toUpper(props.topLine)}
         </Kb.Text>
-        <Kb.Text type="HeaderExtrabold" style={styles.colorWhite}>
+        <Kb.Text type="HeaderExtrabold" style={headerTextStyle(props)}>
           {props.amountNominal}
         </Kb.Text>
         {!!props.bottomLine && (
-          <Kb.Text type="BodyTiny" style={styles.colorWhite}>
+          <Kb.Text type="BodyTiny" style={headerTextStyle(props)}>
             {toUpper(props.bottomLine)}
           </Kb.Text>
         )}
         {!!props.approxWorth && (
-          <Kb.Text type="BodyTiny" style={styles.colorWhite}>
+          <Kb.Text type="BodyTiny" style={headerTextStyle(props)}>
             (APPROXIMATELY {props.approxWorth})
           </Kb.Text>
         )}
@@ -198,7 +211,6 @@ const PaymentPopup = (props: Props) => {
 }
 
 const styles = Styles.styleSheetCreate({
-  colorWhite: {color: Styles.globalColors.white},
   errorDetails: {
     maxWidth: 200,
     paddingLeft: Styles.globalMargins.tiny,
@@ -215,6 +227,8 @@ const styles = Styles.styleSheetCreate({
       marginTop: Styles.globalMargins.small,
     },
   }),
+  headerTextNotPending: {color: Styles.globalColors.white},
+  headerTextPending: {color: Styles.globalColors.black_50},
   headerTop: Styles.platformStyles({
     common: {
       alignItems: 'center',
@@ -244,9 +258,41 @@ const styles = Styles.styleSheetCreate({
     paddingLeft: Styles.globalMargins.small,
     paddingRight: Styles.globalMargins.small,
   },
+  pendingHeaderIcon: Styles.platformStyles({
+    common: {height: pendingIconSize},
+    isAndroid: {
+      marginTop: Styles.globalMargins.tiny,
+    },
+    isElectron: {
+      display: 'inline-block',
+      marginBottom: Styles.globalMargins.small,
+    },
+    isMobile: {
+      marginBottom: Styles.globalMargins.small,
+      marginTop: Styles.globalMargins.small,
+    },
+  }),
+  pendingHeaderTop: Styles.platformStyles({
+    common: {
+      alignItems: 'center',
+      backgroundColor: Styles.globalColors.black_05,
+      paddingBottom: Styles.globalMargins.small,
+    },
+    isElectron: {
+      paddingTop: Styles.globalMargins.small,
+    },
+  }),
   popupContainer: Styles.platformStyles({
     isElectron: {maxWidth: 240, minWidth: 200},
   }),
 })
 
+const headerTop = (props: HeaderProps) => {
+  return props.status === 'pending' ? styles.pendingHeaderTop : styles.headerTop
+}
+
+const headerTextStyle = (props: HeaderProps) => {
+  return props.status === 'pending' ? styles.headerTextPending : styles.headerTextNotPending
+}
+
 export default PaymentPopup
diff --git a/shared/chat/payments/status/container.tsx b/shared/chat/payments/status/container.tsx
@@ -38,7 +38,7 @@ export default namedConnect(
       : (paymentInfo === null || paymentInfo === undefined ? undefined : paymentInfo.status) || 'pending'
     return {
       allowFontScaling: ownProps.allowFontScaling,
-      allowPopup: status === 'completed' || message.author === state.config.username,
+      allowPopup: status === 'completed' || status === 'pending' || message.author === state.config.username,
       errorDetail:
         error || (paymentInfo === null || paymentInfo === undefined ? undefined : paymentInfo.statusDetail), // Auto generated from flowToTs. Please clean me!
       isSendError: !!error,