feat(chat): Add support for delivery failure and unsupported type mes…

…sages (#3047)

ui/components/chat/__tests__/__snapshots__/Chat_message_renders_a_chat_message_with_a_role_of_alert.json

@@ -0,0 +1,8 @@
+{
+  "snapshot": {
+    "html": "<div class=\"slds-chat-message\" role=\"alert\"></div>",
+    "style": [
+      "animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(62, 62, 60); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(62, 62, 60); border-left-style: none; border-left-width: 0px; border-right-color: rgb(62, 62, 60); border-right-style: none; border-right-width: 0px; border-top-color: rgb(62, 62, 60); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(62, 62, 60); content: ; cursor: auto; direction: ltr; display: flex; empty-cells: show; float: none; font-family: \"Salesforce Sans\", Arial, sans-serif; font-kerning: auto; font-size: 13px; font-stretch: 100%; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: 400; height: 0px; image-rendering: auto; isolation: auto; justify-items: normal; justify-self: auto; left: auto; letter-spacing: normal; line-height: 19.5px; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset-distance: 0px; offset-path: none; offset-rotate: auto 0deg; opacity: 1; orphans: 2; outline-color: rgb(62, 62, 60); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; pointer-events: auto; position: static; resize: none; right: auto; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(62, 62, 60); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: rgb(62, 62, 60); text-decoration-skip: objects; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 1280px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; column-count: auto; column-gap: normal; column-rule-color: rgb(62, 62, 60); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; align-content: normal; align-items: normal; align-self: auto; flex-basis: auto; flex-grow: 0; flex-shrink: 1; flex-direction: row; flex-wrap: nowrap; justify-content: normal; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; grid-row-end: auto; grid-row-start: auto; grid-column-gap: 0px; grid-row-gap: 0px; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; order: 0; perspective: none; perspective-origin: 640px 0px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(62, 62, 60); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(62, 62, 60); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(62, 62, 60); -webkit-text-stroke-width: 0px; transform: none; transform-origin: 640px 0px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill stroke markers; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(62, 62, 60); line-break: auto;"
+    ]
+  }
+}

ui/components/chat/__tests__/index.spec.js

@@ -196,6 +196,29 @@ describe('Chat message body', () => {
         <a href="#">filename_of_attachment.jpg</a>
       </ChatMessageBody>
     ));
+
+  it('renders an inbound chat message body with an unsupported message type', () =>
+    matchesMarkupAndStyle(
+      <ChatMessageBody
+        type="unsupported-type"
+        name="Ayesha Mazumdar"
+        timeStamp="4:59 PM"
+      >
+        Message type is not supported
+      </ChatMessageBody>
+    ));
+
+  it('renders an outbound chat message body with a delivery failure', () =>
+    matchesMarkupAndStyle(
+      <ChatMessageBody
+        type="delivery-failure"
+        deliveryFailureReason="Message was not delivered because Andy stopped receiving messages."
+        name="Ayesha Mazumdar"
+        timeStamp="4:59 PM"
+      >
+        It might be the cause of the problem
+      </ChatMessageBody>
+    ));
 });
 
 describe('Chat Icon', () => {

ui/components/chat/base/_index.scss

@@ -100,7 +100,7 @@
  * @summary Used to style icons with a chat log
  *
  * @selector .slds-chat-icon
- * @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container
+ * @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container
  */
 .slds-chat-icon {
   margin-right: $spacing-x-small;
@@ -110,7 +110,6 @@
   }
 }
 
-
 /**
  * Chat logs are mainly made up of chat messages between an agent and a customer
  *
@@ -192,7 +191,9 @@
 
 .slds-chat-message__text_inbound,
 .slds-chat-message__text_outbound,
-.slds-chat-message__text_outbound-agent {
+.slds-chat-message__text_outbound-agent,
+.slds-chat-message__text_unsupported-type,
+.slds-chat-message__text_delivery-failure {
   border-radius: $border-radius-large $border-radius-large 0;
   color: $color-text-inverse;
   min-height: 2rem;
@@ -243,6 +244,55 @@
   }
 }
 
+/**
+ * @summary Used for an inbound message that is not a supported message type
+ *
+ * @selector .slds-chat-message__text_unsupported-type
+ * @restrict .slds-chat-message__text
+ * @modifier
+ */
+.slds-chat-message__text_unsupported-type {
+  background-color: $chat-message-color-background-status;
+  border-radius: $border-radius-large $border-radius-large $border-radius-large 0;
+  border: $color-border-warning $border-width-thin solid;
+  color: $color-text-default;
+
+  .slds-chat-icon.slds-icon-utility-warning {
+
+    .slds-icon {
+      fill: $color-text-warning;
+    }
+  }
+}
+
+/**
+ * @summary Used for an inbound message that fails to deliver
+ *
+ * @selector .slds-chat-message__text_delivery-failure
+ * @restrict .slds-chat-message__text
+ * @modifier
+ */
+.slds-chat-message__text_delivery-failure {
+  background-color: $chat-message-color-background-status;
+  border: $color-border-destructive $border-width-thin solid;
+  color: $color-text-default;
+
+  .slds-chat-message__text_delivery-failure-reason {
+    display: flex;
+    padding: $spacing-x-small $spacing-x-small 0;
+    margin: $spacing-x-small #{-$spacing-x-small} 0;
+    color: $color-text-error;
+    border-top: $color-border-destructive $border-width-thin solid;
+  }
+
+  .slds-chat-icon.slds-icon-utility-error {
+
+    .slds-icon {
+      fill: $color-text-error;
+    }
+  }
+}
+
 /**
  * @summary Used when sneak peek is enabled for customer messages
  *
@@ -271,6 +321,26 @@
   margin: $spacing-xxx-small 0 0 $spacing-x-small;
 }
 
+/**
+ * @summary Used to style chat message resend action
+ *
+ * @selector .slds-chat-message__action
+ * @restrict .slds-chat-message .slds-button
+ */
+.slds-chat-message__action {
+  font-size: $font-size-text-x-small;
+  margin-left: $spacing-x-small;
+  line-height: $line-height-heading;
+
+  .slds-chat-icon.slds-icon-utility-redo {
+
+    .slds-icon {
+      @include square($square-icon-small-content);
+      fill: $color-text-link;
+    }
+  }
+}
+
 
 /**
  * During any chat, certain events can occur which need to be displayed to the user

ui/components/chat/base/example.jsx

@@ -28,7 +28,7 @@ export default (
             name="Taylor Watson-Rice"
             timeStamp="4:59 PM"
           >
-            Hi, my Alexa only speaks French
+            Hi, my CloudWidget only speaks French
           </ChatMessageBody>
         </ChatMessage>
       </ChatListItem>
@@ -51,10 +51,10 @@ export const states = [
                 name="Taylor Watson-Rice"
                 timeStamp="4:59 PM"
               >
-                Hi, my Alexa only speaks French and I'm having a lot of trouble.
-                I've followed this article but it doesn't work{' '}
+                Hi, my CloudWidget only speaks French and I'm having a lot of
+                trouble. I've followed this article but it doesn't work{' '}
                 <a href="javascript:void(0)">
-                  https://www.somehelpsite.com/alexa-speaks-french
+                  https://www.somehelpsite.com/CloudWidget-speaks-french
                 </a>
               </ChatMessageBody>
             </ChatMessage>
@@ -89,8 +89,8 @@ export const states = [
             <ChatMessage>
               <ChatAvatar initials="TW" name="Taylor Watson-Rice" />
               <ChatMessageBody isTyping hasSneakPeek type="inbound">
-                Hi, my Alexa only speaks French and I'm having a lot of trouble
-                trying to make i
+                Hi, my CloudWidget only speaks French and I'm having a lot of
+                trouble trying to make i
               </ChatMessageBody>
             </ChatMessage>
           </ChatListItem>
@@ -140,10 +140,10 @@ export const states = [
                 name="Amber Cann"
                 timeStamp="4:59 PM"
               >
-                Hi Taylor, thank you for contacting Amazon Support. Can you
+                Hi Taylor, thank you for contacting Widget Support. Can you
                 please tell me what language you are trying to program on your
-                Amazon Echo?{' '}
-                <a href="javascript:void(0)">http://www/amazon.com</a>
+                CloudWidget?{' '}
+                <a href="javascript:void(0)">http://www/cloud.widget</a>
               </ChatMessageBody>
             </ChatMessage>
           </ChatListItem>
@@ -172,6 +172,50 @@ export const states = [
       </Chat>
     )
   },
+  {
+    id: 'inbound-unsupported-type',
+    label: 'Inbound Unsupported Type',
+    element: (
+      <Chat>
+        <ChatList>
+          <ChatListItem type="inbound">
+            <ChatMessage>
+              <ChatAvatar initials="JD" name="Jason Dewar" />
+              <ChatMessageBody
+                type="unsupported-type"
+                name="Jason Dewar"
+                timeStamp="4:59 PM"
+              >
+                Message type is not supported
+              </ChatMessageBody>
+            </ChatMessage>
+          </ChatListItem>
+        </ChatList>
+      </Chat>
+    )
+  },
+  {
+    id: 'outbound-delivery-failure',
+    label: 'Outbound Delivery Failure',
+    element: (
+      <Chat>
+        <ChatList>
+          <ChatListItem type="outbound">
+            <ChatMessage>
+              <ChatMessageBody
+                type="delivery-failure"
+                deliveryFailureReason="Message was not delivered because Andy stopped receiving messages."
+                name="Jason Dewar"
+                timeStamp="4:59 PM"
+              >
+                It might be the cause of the problem
+              </ChatMessageBody>
+            </ChatMessage>
+          </ChatListItem>
+        </ChatList>
+      </Chat>
+    )
+  },
   {
     id: 'event',
     label: 'Event',
@@ -195,7 +239,7 @@ export const states = [
         <ChatList>
           <ChatListItem type="event">
             <ChatEvent
-              agentMessage="Andy needs help changing the language on his Amazon Echo"
+              agentMessage="Andy needs help changing the language on his CloudWidget"
               symbol="change_owner"
               timeStamp="5:19 PM"
             >
@@ -273,7 +317,7 @@ export const examples = [
             <ChatMessage>
               <ChatAvatar initials="TW" name="Taylor Watson-Rice" />
               <ChatMessageBody type="inbound">
-                Hi, my Alexa only speaks French
+                Hi, my CloudWidget only speaks French
               </ChatMessageBody>
             </ChatMessage>
           </ChatListItem>
@@ -301,9 +345,9 @@ export const examples = [
           <ChatListItem type="outbound">
             <ChatMessage>
               <ChatMessageBody type="outbound">
-                Hi Andy, thank you for contacting Amazon Support. Can you please
-                tell me what language you are trying to program on your Amazon
-                Echo?
+                Hi Andy, thank you for contacting Widget Support. Can you please
+                tell me what language you are trying to program on your
+                CloudWidget?
               </ChatMessageBody>
             </ChatMessage>
           </ChatListItem>
@@ -343,16 +387,16 @@ export const examples = [
                 name="Andy Martinez"
                 timeStamp="4:59 PM"
               >
-                Hi, my Alexa only speaks French
+                Hi, my CloudWidget only speaks French
               </ChatMessageBody>
             </ChatMessage>
           </ChatListItem>
           <ChatListItem type="outbound">
             <ChatMessage>
               <ChatMessageBody type="outbound-agent">
-                Hi Andy, thank you for contacting Amazon Support. Can you please
-                tell me what language you are trying to program on your Amazon
-                Echo?
+                Hi Andy, thank you for contacting Widget Support. Can you please
+                tell me what language you are trying to program on your
+                CloudWidget?
               </ChatMessageBody>
             </ChatMessage>
           </ChatListItem>
@@ -393,7 +437,7 @@ export const examples = [
           </ChatListItem>
           <ChatListItem type="event">
             <ChatEvent
-              agentMessage="Andy needs help changing the language on his Amazon Echo"
+              agentMessage="Andy needs help changing the language on his CloudWidget"
               symbol="change_owner"
               timeStamp="5:19 PM"
             >