From 6a68b37c83e1f9862c44e4200031f49e80a1338e Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Thu, 6 Aug 2020 21:22:52 -0400
Subject: [PATCH] New message state: Partially sent

---
 _locales/en/messages.json              |   4 +
 js/models/messages.js                  |   8 +-
 stylesheets/_modules.scss              |   6 +-
 ts/components/ConversationListItem.md  |  14 ++++
 ts/components/ConversationListItem.tsx |   8 +-
 ts/components/conversation/Message.md  |  70 +++++++++++++++++
 ts/components/conversation/Message.tsx | 105 +++++++++++++++++--------
 ts/state/ducks/conversations.ts        |   8 +-
 8 files changed, 185 insertions(+), 38 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index b650be5d9142..38fb23901606 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1281,6 +1281,10 @@
     "message": "Send failed",
     "description": "Shown on outgoing message if it fails to send"
   },
+  "partiallySent": {
+    "message": "Partially sent, click for details",
+    "description": "Shown on outgoing message if it is partially sent"
+  },
   "showMore": {
     "message": "Details",
     "description": "Displays the details of a key change"
diff --git a/js/models/messages.js b/js/models/messages.js
index d2ba8d96c16a..c8b1b00f3055 100644
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -688,7 +688,13 @@
       return this.get('type') === 'incoming';
     },
     getMessagePropStatus() {
+      const sent = this.get('sent');
+      const sentTo = this.get('sent_to') || [];
+
       if (this.hasErrors()) {
+        if (sent || sentTo.length > 0) {
+          return 'partial-sent';
+        }
         return 'error';
       }
       if (!this.isOutgoing()) {
@@ -704,8 +710,6 @@
       if (delivered || deliveredTo.length > 0) {
         return 'delivered';
       }
-      const sent = this.get('sent');
-      const sentTo = this.get('sent_to') || [];
       if (sent || sentTo.length > 0) {
         return 'sent';
       }
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index d427b6487901..2c14ad1edfda 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1170,6 +1170,9 @@
     color: $color-white-alpha-80;
   }
 }
+.module-message__metadata__tapable {
+  @include button-reset;
+}
 .module-message__metadata__date--incoming {
   color: $color-white-alpha-80;
 
@@ -3853,7 +3856,8 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
   width: 18px;
 }
-.module-conversation-list-item__message__status-icon--error {
+.module-conversation-list-item__message__status-icon--error,
+.module-conversation-list-item__message__status-icon--partial-sent {
   @include light-theme {
     @include color-svg(
       '../images/icons/v2/error-outline-12.svg',
diff --git a/ts/components/ConversationListItem.md b/ts/components/ConversationListItem.md
index 2c43d076b145..6d5e9a393cd9 100644
--- a/ts/components/ConversationListItem.md
+++ b/ts/components/ConversationListItem.md
@@ -153,6 +153,20 @@
       onClick={result => console.log('onClick', result)}
       i18n={util.i18n}
     />
+    <ConversationListItem
+      id="conversationId5"
+      phoneNumber="(202) 555-0011"
+      type={'direct'}
+      name="Mr. Fire🔥"
+      color="green"
+      lastUpdated={Date.now() - 5 * 60 * 1000}
+      lastMessage={{
+        text: 'Partially Sent',
+        status: 'partial-sent',
+      }}
+      onClick={result => console.log('onClick', result)}
+      i18n={util.i18n}
+    />
   </div>
 </util.LeftPaneContext>
 ```
diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx
index 642054335984..aa303a383bf0 100644
--- a/ts/components/ConversationListItem.tsx
+++ b/ts/components/ConversationListItem.tsx
@@ -32,7 +32,13 @@ export type PropsData = {
 
   typingContact?: Object;
   lastMessage?: {
-    status: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
+    status:
+      | 'sending'
+      | 'sent'
+      | 'delivered'
+      | 'read'
+      | 'error'
+      | 'partial-sent';
     text: string;
     deletedForEveryone?: boolean;
   };
diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md
index 1ee01f9d172d..f65abaaff95f 100644
--- a/ts/components/conversation/Message.md
+++ b/ts/components/conversation/Message.md
@@ -200,6 +200,16 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       onRetrySend={() => console.log('onRetrySend')}
     />
   </div>
+  <div className="module-message-container">
+    <Message
+      direction="outgoing"
+      status="partial-sent"
+      authorColor="green"
+      timestamp={Date.now()}
+      text="This has been partially sent!"
+      i18n={util.i18n}
+    />
+  </div>
   <div className="module-message-container">
     <Message
       direction="outgoing"
@@ -219,6 +229,25 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       onRetrySend={() => console.log('onRetrySend')}
     />
   </div>
+  <div className="module-message-container">
+    <Message
+      direction="outgoing"
+      status="partial-sent"
+      authorColor="red"
+      timestamp={Date.now() - 56}
+      text="Error -- partially sent!"
+      attachments={[
+        {
+          url: util.gifObjectUrl,
+          contentType: 'image/gif',
+          width: 320,
+          height: 240,
+        },
+      ]}
+      i18n={util.i18n}
+      onRetrySend={() => console.log('onRetrySend')}
+    />
+  </div>
   <div className="module-message-container">
     <Message
       direction="outgoing"
@@ -270,6 +299,17 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       onRetrySend={() => console.log('onRetrySend')}
     />
   </div>
+  <div className="module-message-container">
+    <Message
+      direction="outgoing"
+      status="partial-sent"
+      authorColor="blue"
+      timestamp={Date.now() - 57}
+      text="🔥"
+      i18n={util.i18n}
+      onRetrySend={() => console.log('onRetrySend')}
+    />
+  </div>
   <div className="module-message-container">
     <Message
       direction="outgoing"
@@ -289,6 +329,25 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       onRetrySend={() => console.log('onRetrySend')}
     />
   </div>
+  <div className="module-message-container">
+    <Message
+      direction="outgoing"
+      status="partial-sent"
+      authorColor="green"
+      timestamp={Date.now() - 57}
+      attachments={[
+        {
+          url: util.gifObjectUrl,
+          contentType: 'image/gif',
+          width: 320,
+          height: 240,
+        },
+      ]}
+      text="🔥"
+      i18n={util.i18n}
+      onRetrySend={() => console.log('onRetrySend')}
+    />
+  </div>
   <div className="module-message-container">
     <Message
       direction="outgoing"
@@ -300,6 +359,17 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
       onRetrySend={() => console.log('onRetrySend')}
     />
   </div>
+  <div className="module-message-container">
+    <Message
+      direction="outgoing"
+      status="partial-sent"
+      authorColor="blue"
+      timestamp={Date.now() - 57}
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur finibus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu metus leo. Nullam consequat leo ut accumsan aliquam. In est elit, faucibus vel arcu vitae, dapibus egestas nunc. Curabitur nec orci semper, auctor justo ornare, sagittis massa. Aliquam ultrices sem ac ex vestibulum dapibus. Etiam erat purus, interdum sit amet magna vitae, elementum lacinia leo. Duis vel mauris dui. Morbi sed accumsan erat, at facilisis metus. Nullam molestie lectus eleifend congue ultrices. Nunc porta at justo semper egestas. Proin non iaculis nibh. Cras sit amet urna dignissim, venenatis arcu a, pulvinar ipsum."
+      i18n={util.i18n}
+      onRetrySend={() => console.log('onRetrySend')}
+    />
+  </div>
   <div className="module-message-container">
     <Message
       direction="incoming"
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 106833931528..308789306067 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -71,7 +71,7 @@ export type PropsData = {
   interactionMode: 'mouse' | 'keyboard';
   direction: 'incoming' | 'outgoing';
   timestamp: number;
-  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error';
+  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error' | 'partial-sent';
   contact?: ContactType;
   authorTitle: string;
   authorName?: string;
@@ -381,6 +381,71 @@ export class Message extends React.PureComponent<Props, State> {
     }
   }
 
+  public renderTimestamp() {
+    const {
+      direction,
+      i18n,
+      id,
+      isSticker,
+      isTapToViewExpired,
+      showMessageDetail,
+      status,
+      text,
+      timestamp,
+    } = this.props;
+
+    const isShowingImage = this.isShowingImage();
+    const withImageNoCaption = Boolean(!isSticker && !text && isShowingImage);
+
+    const isError = status === 'error' && direction === 'outgoing';
+    const isPartiallySent =
+      status === 'partial-sent' && direction === 'outgoing';
+
+    if (isError || isPartiallySent) {
+      return (
+        <span
+          className={classNames({
+            'module-message__metadata__date': true,
+            'module-message__metadata__date--with-sticker': isSticker,
+            [`module-message__metadata__date--${direction}`]: !isSticker,
+            'module-message__metadata__date--with-image-no-caption': withImageNoCaption,
+          })}
+        >
+          {isError ? (
+            i18n('sendFailed')
+          ) : (
+            <button
+              className="module-message__metadata__tapable"
+              onClick={(event: React.MouseEvent) => {
+                event.stopPropagation();
+                event.preventDefault();
+
+                showMessageDetail(id);
+              }}
+            >
+              {i18n('partiallySent')}
+            </button>
+          )}
+        </span>
+      );
+    }
+
+    const metadataDirection = isSticker ? undefined : direction;
+
+    return (
+      <Timestamp
+        i18n={i18n}
+        timestamp={timestamp}
+        extended={true}
+        direction={metadataDirection}
+        withImageNoCaption={withImageNoCaption}
+        withSticker={isSticker}
+        withTapToViewExpired={isTapToViewExpired}
+        module="module-message__metadata__date"
+      />
+    );
+  }
+
   // tslint:disable-next-line cyclomatic-complexity
   public renderMetadata() {
     const {
@@ -388,14 +453,12 @@ export class Message extends React.PureComponent<Props, State> {
       direction,
       expirationLength,
       expirationTimestamp,
-      i18n,
       isSticker,
       isTapToViewExpired,
       reactions,
       status,
       text,
       textPending,
-      timestamp,
     } = this.props;
 
     if (collapseMetadata) {
@@ -405,7 +468,6 @@ export class Message extends React.PureComponent<Props, State> {
     const isShowingImage = this.isShowingImage();
     const withImageNoCaption = Boolean(!isSticker && !text && isShowingImage);
     const withReactions = reactions && reactions.length > 0;
-    const showError = status === 'error' && direction === 'outgoing';
     const metadataDirection = isSticker ? undefined : direction;
 
     return (
@@ -419,33 +481,7 @@ export class Message extends React.PureComponent<Props, State> {
             : null
         )}
       >
-        {showError ? (
-          <span
-            className={classNames(
-              'module-message__metadata__date',
-              isSticker ? 'module-message__metadata__date--with-sticker' : null,
-              !isSticker
-                ? `module-message__metadata__date--${direction}`
-                : null,
-              withImageNoCaption
-                ? 'module-message__metadata__date--with-image-no-caption'
-                : null
-            )}
-          >
-            {i18n('sendFailed')}
-          </span>
-        ) : (
-          <Timestamp
-            i18n={i18n}
-            timestamp={timestamp}
-            extended={true}
-            direction={metadataDirection}
-            withImageNoCaption={withImageNoCaption}
-            withSticker={isSticker}
-            withTapToViewExpired={isTapToViewExpired}
-            module="module-message__metadata__date"
-          />
-        )}
+        {this.renderTimestamp()}
         {expirationLength && expirationTimestamp ? (
           <ExpireTimer
             direction={metadataDirection}
@@ -461,7 +497,10 @@ export class Message extends React.PureComponent<Props, State> {
             <Spinner svgSize="small" size="14px" direction={direction} />
           </div>
         ) : null}
-        {!textPending && direction === 'outgoing' && status !== 'error' ? (
+        {!textPending &&
+        direction === 'outgoing' &&
+        status !== 'error' &&
+        status !== 'partial-sent' ? (
           <div
             className={classNames(
               'module-message__metadata__status-icon',
@@ -1001,7 +1040,7 @@ export class Message extends React.PureComponent<Props, State> {
   public renderError(isCorrectSide: boolean) {
     const { status, direction } = this.props;
 
-    if (!isCorrectSide || status !== 'error') {
+    if (!isCorrectSide || (status !== 'error' && status !== 'partial-sent')) {
       return null;
     }
 
diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts
index 97b2f96e93ec..c24fe6b606d0 100644
--- a/ts/state/ducks/conversations.ts
+++ b/ts/state/ducks/conversations.ts
@@ -38,7 +38,13 @@ export type ConversationType = {
   timestamp?: number;
   inboxPosition?: number;
   lastMessage?: {
-    status: 'error' | 'sending' | 'sent' | 'delivered' | 'read';
+    status:
+      | 'error'
+      | 'partial-sent'
+      | 'sending'
+      | 'sent'
+      | 'delivered'
+      | 'read';
     text: string;
   };
   phoneNumber?: string;