Maintenance: Change title of WhatsApp tickets and display sent, delivered and read information for WhatsApp related articles.

Co-authored-by: Tobias Schäfer <ts@zammad.com>
Co-authored-by: Dusan Vuckovic <dv@zammad.com>

app/assets/javascripts/app/controllers/ticket_zoom/article_view.coffee

@@ -207,6 +207,23 @@ class ArticleViewItem extends App.ControllerObserver
         links:       links
       )
       return
+
+    if article.preferences?.whatsapp
+      icon = null
+      msg  = null
+      if article.preferences?.whatsapp?.timestamp_read
+        icon = 'double-checkmark'
+        msg  = __('read by the customer')
+      else if article.preferences?.whatsapp?.timestamp_delivered
+        icon = 'double-checkmark-outline'
+        msg  = __('delivered to the customer')
+      else if article.preferences?.whatsapp?.timestamp_sent
+        icon = 'checkmark-outline'
+        msg  = __('sent to the customer')
+
+      article['delivery_status_icon']    = icon
+      article['delivery_status_message'] = msg
+
     @html App.view('ticket_zoom/article_view')(
       ticket:      @ticket
       article:     article

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

@@ -40,6 +40,15 @@
         <div class="article-meta-key u-textTruncate"><%- @T('Subject') %></div>
         <div class="article-meta-value flex contain-text"><%= @article.subject %></div>
       </div>
+    <% end %>
+    <% if @article.delivery_status_icon: %>
+      <div class="horizontal article-meta-row">
+        <div class="article-meta-key u-textTruncate"><%- @T('Message Status') %></div>
+        <div class="article-meta-value flex contain-text">
+          <%- @Icon(@article.delivery_status_icon, 'article-meta-icon') %>
+          <%- @T(@article.delivery_status_message) %>
+        </div>
+      </div>
     <% end %>
       <% if encryptionSuccess || signSuccess || encryptionWarning || signWarning: %>
         <div class="horizontal article-meta-row">

app/assets/stylesheets/svg-dimensions.css

@@ -9,6 +9,7 @@
 .icon-checkbox-checked { width: 11px; height: 11px; }
 .icon-checkbox-indeterminate { width: 11px; height: 11px; }
 .icon-checkbox { width: 11px; height: 11px; }
+.icon-checkmark-outline { width: 16px; height: 14px; }
 .icon-checkmark { width: 16px; height: 14px; }
 .icon-clipboard { width: 16px; height: 16px; }
 .icon-clock { width: 16px; height: 16px; }
@@ -22,6 +23,8 @@
 .icon-document { width: 16px; height: 16px; }
 .icon-double-arrow-left { width: 12.2px; height: 13px; }
 .icon-double-arrow-right { width: 12.2px; height: 13px; }
+.icon-double-checkmark-outline { width: 23px; height: 14px; }
+.icon-double-checkmark { width: 23px; height: 14px; }
 .icon-download { width: 14px; height: 13px; }
 .icon-draft-modifier { width: 9px; height: 9px; }
 .icon-draggable { width: 16px; height: 16px; }

app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md

@@ -6,6 +6,7 @@
 - `assets/check-circle-outline.svg`
 - `assets/check-square.svg`
 - `assets/check2.svg`
+- `assets/check2-all.svg`
 - `assets/chevron-down.svg`
 - `assets/chevron-left.svg`
 - `assets/chevron-right.svg`

app/frontend/apps/desktop/initializer/assets/check2-all-circle.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 7.72386 13.7239 7.5 14 7.5C14.2761 7.5 14.5 7.72386 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C9.1831 1.5 10.2938 1.81654 11.2504 2.36989C11.4894 2.50816 11.5711 2.81403 11.4328 3.05306C11.2945 3.29209 10.9887 3.37377 10.7496 3.2355C9.94117 2.76782 9.00262 2.5 8 2.5Z" />
+<path d="M8.29333 9.51775C8.24646 9.56462 8.24646 9.64059 8.29333 9.68746L9.02169 10.4158C9.12038 10.5145 9.25423 10.57 9.3938 10.57C9.53337 10.57 9.66723 10.5145 9.76592 10.4158L15.4534 4.72832C15.6589 4.52281 15.6589 4.1896 15.4534 3.98409C15.2479 3.77858 14.9147 3.77858 14.7092 3.98409L9.3938 9.29948L9.03756 8.94323C8.99069 8.89637 8.91471 8.89637 8.86785 8.94323L8.29333 9.51775Z" />
+<path d="M7.65053 7.72591C7.69739 7.67905 7.69739 7.60307 7.65053 7.5562L6.92217 6.82784C6.71666 6.62233 6.38345 6.62233 6.17794 6.82784C5.97243 7.03335 5.97243 7.36656 6.17794 7.57207L6.9063 8.30043C6.95317 8.3473 7.02914 8.3473 7.07601 8.30043L7.65053 7.72591Z" />
+<path d="M12.6097 4.72832C12.8152 4.52281 12.8152 4.1896 12.6097 3.98409C12.4042 3.77858 12.071 3.77858 11.8654 3.98409L6.55005 9.29948L4.07842 6.82784C3.87291 6.62233 3.5397 6.62233 3.33419 6.82784C3.12868 7.03335 3.12868 7.36656 3.33419 7.57207L6.17794 10.4158C6.27663 10.5145 6.41048 10.57 6.55005 10.57C6.68962 10.57 6.82348 10.5145 6.92217 10.4158L12.6097 4.72832Z" />
+</svg>

app/frontend/apps/desktop/initializer/assets/check2-all.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.3536 4.35355C12.5488 4.15829 12.5488 3.84171 12.3536 3.64645C12.1583 3.45118 11.8417 3.45118 11.6464 3.64645L5 10.2929L1.85355 7.14645C1.65829 6.95118 1.34171 6.95118 1.14645 7.14645C0.951184 7.34171 0.951184 7.65829 1.14645 7.85355L4.64645 11.3536C4.74021 11.4473 4.86739 11.5 5 11.5C5.13261 11.5 5.25979 11.4473 5.35355 11.3536L12.3536 4.35355Z" />
+<path d="M8.14645 11.3536L7.25 10.4571L7.95711 9.75L8.5 10.2929L15.1464 3.64645C15.3417 3.45118 15.6583 3.45118 15.8536 3.64645C16.0488 3.84171 16.0488 4.15829 15.8536 4.35355L8.85355 11.3536C8.75979 11.4473 8.63261 11.5 8.5 11.5C8.36739 11.5 8.24021 11.4473 8.14645 11.3536Z" />
+<path d="M5.35355 7.14645L6.25 8.04289L5.54289 8.75L4.64645 7.85355C4.45118 7.65829 4.45118 7.34171 4.64645 7.14645C4.84171 6.95118 5.15829 6.95118 5.35355 7.14645Z" />
+</svg>

app/frontend/apps/mobile/initializer/assets/check-double-circle.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.659 16.0731L19.4361 5.37948L18.1056 4.41183L10.9236 14.287L6.21902 9.09597L5 10.2008L10.3842 16.1416C10.5505 16.3251 10.7906 16.4239 11.0379 16.4106C11.2852 16.3973 11.5133 16.2733 11.659 16.0731Z" />
+<path d="M14.4971 16.1416L13.4591 14.9964L14.4476 13.6372L15.0366 14.287L22.2185 4.41183L23.549 5.37948L15.7719 16.0731C15.6262 16.2733 15.3981 16.3973 15.1508 16.4106C14.9035 16.4239 14.6634 16.3251 14.4971 16.1416Z" />
+<path d="M10.3319 9.09597L12.1905 11.1466L11.202 12.5058L9.11292 10.2008L10.3319 9.09597Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.5C7.30843 3.5 3.5 7.30843 3.5 12C3.5 16.6916 7.30843 20.5 12 20.5C16.5303 20.5 20.2371 16.9489 20.4866 12.4806L21.8947 10.5445C21.9641 11.0197 22 11.5057 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2C13.7582 2 15.4108 2.45449 16.8468 3.2523L15.9566 4.47631C14.7746 3.85295 13.4282 3.5 12 3.5Z" />
+</svg>

app/frontend/apps/mobile/initializer/assets/check-double.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.89782 18.2426L18.1219 5.5595L16.5438 4.41183L8.02571 16.1243L2.44582 9.96743L1 11.2778L7.38589 18.3239C7.58313 18.5416 7.86792 18.6588 8.16121 18.643C8.45449 18.6272 8.72507 18.4801 8.89782 18.2426Z" />
+<path d="M12.264 18.3239L11.0329 16.9656L12.2053 15.3535L12.9038 16.1243L21.422 4.41183L23 5.5595L13.7759 18.2426C13.6032 18.4801 13.3326 18.6272 13.0393 18.643C12.746 18.6588 12.4612 18.5416 12.264 18.3239Z" />
+<path d="M7.32393 9.96743L9.52821 12.3996L8.35582 14.0117L5.87811 11.2778L7.32393 9.96743Z" />
+</svg>

app/frontend/apps/mobile/pages/ticket/__tests__/ticket-article-context.spec.ts

@@ -34,7 +34,7 @@ describe('actions inside article context', () => {
     await view.events.click(view.getByText('Show meta data'))
 
     expect(view.getByText('Meta Data')).toBeInTheDocument()
-    expect(view.getByRole('region', { name: 'Sent' })).toHaveTextContent(
+    expect(view.getByRole('region', { name: 'Created' })).toHaveTextContent(
       /2022-01-29 00:00/,
     )
 

app/frontend/apps/mobile/pages/ticket/components/TicketDetailView/ArticleMetadataDialog.vue

@@ -24,6 +24,24 @@ const channelIcon = computed(() => {
   return undefined
 })
 
+const articleDeliveryStatus = computed(() => {
+  const { article } = props
+
+  if (article.preferences?.whatsapp?.timestamp_read) {
+    return { message: __('read by the customer'), icon: 'check-double-circle' }
+  }
+
+  if (article.preferences?.whatsapp?.timestamp_delivered) {
+    return { message: __('delivered to the customer'), icon: 'check-double' }
+  }
+
+  if (article.preferences?.whatsapp?.timestamp_sent) {
+    return { message: __('sent to the customer'), icon: 'check' }
+  }
+
+  return undefined
+})
+
 const links = computed(() => {
   const { article } = props
   // Example for usage: https://github.com/zammad/zammad/blob/develop/app/jobs/communicate_twitter_job.rb#L65
@@ -109,7 +127,18 @@ const hasSecurityAttribute = computed(
           </CommonLink>
         </div>
       </CommonSectionMenuItem>
-      <CommonSectionMenuItem :label="__('Sent')">
+      <CommonSectionMenuItem
+        v-if="articleDeliveryStatus"
+        :label="__('Message Status')"
+      >
+        <CommonIcon
+          :name="articleDeliveryStatus.icon"
+          size="tiny"
+          class="inline"
+        />
+        {{ $t(articleDeliveryStatus.message) }}
+      </CommonSectionMenuItem>
+      <CommonSectionMenuItem :label="__('Created')">
         <CommonDateTime :date-time="article.createdAt" type="absolute" />
       </CommonSectionMenuItem>
       <CommonSectionMenuItem