🦋 Implement empty state in inbox (#3577)

🦋 implements empty state in inbox

app/views/provider/admin/messages/inbox/index.html.slim

@@ -1,24 +1,29 @@
 - content_for :page_header_title, 'Inbox'
 
-= render 'provider/admin/messages/bulk_operations', scope: :received_messages, messages: @messages
+- if @messages.blank?
+  div class="pf-c-empty-state"
+    div class="pf-c-empty-state__content"
+      i class="fas fa-inbox pf-c-empty-state__icon" aria-hidden="true"
+      h1 class="pf-c-title pf-m-lg"
+        = t('.empty_state.title')
+      div class="pf-c-empty-state__body"
+        = t('.empty_state.body')
 
-table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="Messages table" id="messages"
-  thead
-    tr role="row"
-      td role="columnheader" scope="col" class="select pf-c-table__check"
-        label
-          = bulk_select_all
-      th role="columnheader" scope="col" Subject
-      th role="columnheader" scope="col" From
-      th role="columnheader" scope="col" Date Sent
-      th role="columnheader" scope="col" class="pf-c-table__action pf-m-fit-content"
-        = link_to 'Compose Message', new_provider_admin_messages_outbox_path, class: "action new"
-  tbody role="rowgroup"
-    - if @messages.blank?
+- else
+  = render 'provider/admin/messages/bulk_operations', scope: :received_messages, messages: @messages
+
+  table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="Messages table" id="messages"
+    thead
       tr role="row"
-        td role="cell" colspan="5"
-          = t('provider.admin.messages.no_received_messages')
-    - else
+        td role="columnheader" scope="col" class="select pf-c-table__check"
+          label
+            = bulk_select_all
+        th role="columnheader" scope="col" Subject
+        th role="columnheader" scope="col" From
+        th role="columnheader" scope="col" Date Sent
+        th role="columnheader" scope="col" class="pf-c-table__action pf-m-fit-content"
+          = link_to 'Compose Message', new_provider_admin_messages_outbox_path, class: "action new"
+    tbody role="rowgroup"
       - @messages.each do |message|
         tr role="row" class=message.state id="message_#{message.id}"
           td class="pf-c-table__check select" role="cell" id=message.id
@@ -34,5 +39,5 @@ table class="pf-c-table pf-m-grid-lg" role="grid" aria-label="Messages table" id
                   div class="pf-c-overflow-menu__item"
                     = delete_button_for provider_admin_messages_inbox_path(message), class: 'action'
 
-= will_paginate(@messages)
-= link_to_export_widget_for('Messages') if can?(:export, :data)
+  = will_paginate(@messages)
+  = link_to_export_widget_for('Messages') if can?(:export, :data)

config/locales/en.yml

@@ -428,7 +428,11 @@ en:
             success: Messages moved into the trash
         no_metrics: "You have no metrics"
         no_methods: "You have no methods"
-        no_received_messages: "You have no messages."
+        inbox:
+          index:
+            empty_state:
+              title: "Nothing to see here"
+              body: "Your inbox is empty, there are no new messages."
         no_messages: "You have sent no messages."
       cms:
         builtin_legal_terms:

features/buyers/accounts/show.feature

@@ -0,0 +1,19 @@
+@javascript
+Feature: Buyer account overview
+
+  Background:
+    Given a provider is logged in
+    And an approved buyer "Bob Buyer" signed up to the provider
+
+  @wip
+  Scenario: Navigation
+
+  Scenario: Sending a message
+    Given account "Bob Buyer" has no messages
+    And they go to the buyer account page for "Bob Buyer"
+    When they follow "Send message"
+    And fill in "Subject" with "Party tonite!"
+    And fill in "Body" with "You are invited to my party."
+    And the "To" field should be fixed to "Bob Buyer"
+    And press "Send"
+    Then should see "Message was sent."

features/provider/admin/messages/index.feature

@@ -1,36 +1,48 @@
 @javascript
-Feature: Messages inbox
+Feature: Audience > Messages > Inbox
 
   Background:
     Given a provider is logged in
     And a buyer "Alice" of the provider
 
-  Scenario: Navigation
+  Scenario: Navigation from Audience
     When they press "Dashboard"
     And they follow "Audience"
     And they press "Messages"
     And they follow "Inbox"
     Then the current page is the provider inbox page
 
+  Scenario: Navigation from Dashboard
+    When they follow "0 Messages"
+    Then the current page is the provider inbox page
+
   Rule: Inbox is empty
     Scenario: Empty state
       When they go to the provider inbox page
-      And should see "You have no messages."
+      Then should see "Nothing to see here"
 
   Rule: Inbox is not empty
     Background:
-      Given 40 messages sent from buyer "Alice" to provider "foo.3scale.localhost" with subject "Wildness" and body "On the road."
+      Given 40 messages sent from buyer "Alice" to the provider with subject "Oh, no!" and body "Pepe is in da house"
 
     Scenario: List of messages
       When they go to the provider inbox page
-      Then should not see "You have no messages."
+      Then should not see "Nothing to see here"
+
+    Scenario: Reading an unread message
+      Given they go to the provider inbox page
+      And they should see unread message from "Alice" with subject "Oh, no!"
+      When follow "Oh, no!"
+      And should see "Send reply"
+      And follow "Inbox"
+      Then they should see read message from "Alice" with subject "Oh, no!"
 
     Scenario: Bulk operations
       Given they go to the provider inbox page
-      When item "Wildness" is selected
+      When item "Oh, no!" is selected
       Then the following bulk operations are available:
         | Delete |
-      But item "Wildness" is unselected
+      But item "Oh, no!" is unselected
       And the bulk operations are not visible
 
     Scenario: Select all messages in all pages
@@ -70,4 +82,4 @@ Feature: Messages inbox
       And press "Delete" within the modal
       Then wait a moment
       And should see "Messages moved into the trash"
-      And should see "You have no messages"
+      And should see "Nothing to see here"

features/step_definitions/custom_web_steps.rb

@@ -38,7 +38,7 @@ def matches_path?(url, path)
   assert page.has_css?('a', :text => label, &href_contain_params)
 end
 
-Then /^I should see (the |)link "([^"]*)"$/ do |_, label|
+Then /^(?:I )?should see (the |)link "([^"]*)"$/ do |_, label|
   assert page.has_css?('a', :text => label)
 end
 

features/step_definitions/messages_steps.rb

@@ -62,10 +62,6 @@
   assert messages.empty?
 end
 
-Then "{account} should have {int} message(s)" do |account, count|
-  assert_equal count.to_i, account.messages.count
-end
-
 Then "the message from {provider} to {buyer} with subject {string} should be hidden" do |sender, receiver, subject|
   message = receiver.hidden_messages.to_a.find do |message|
     message.sender  == sender &&
@@ -83,7 +79,7 @@
   assert has_table_row_with_cells?(to, subject)
 end
 
-Then /^I should see (read|unread) message from "([^"]*)" with subject "([^"]*)"$/ do |state, from, subject|
+Then /^(?:I|they) should see (read|unread) message from "([^"]*)" with subject "([^"]*)"$/ do |state, from, subject|
   assert page.has_xpath?("//tr[@class='#{state}']/descendant::*[text()[contains(.,#{subject.inspect})]]/ancestor::tr/descendant::*[text()[contains(.,#{from.inspect})]]")
 end
 

features/support/paths.rb

@@ -379,9 +379,8 @@ def path_to(page_name, *args) # rubocop:disable Metrics/AbcSize, Metrics/Cycloma
     when 'the new buyer account page'
       new_admin_buyers_account_path
 
-    when /^the buyer account page for "([^"]*)"$/
-      admin_buyers_account_path(Account.find_by_org_name!($1))
-    when /^the buyer account "([^"]*)" page$/
+    when /^the buyer account page for "([^"]*)"$/,
+         /^the buyer account "([^"]*)" page$/
       admin_buyers_account_path(Account.find_by_org_name!($1))
 
     when /^the buyer account edit page for "([^"]*)"$/