Merge pull request #10144 from Turbo87/support-buttons

Include email address in support buttons

Author: Turbo87

app/components/support/crate-report-form.hbs

@@ -83,7 +83,7 @@
       local-class="report-button"
       data-test-id="report-button"
     >
-      Report
+      Report to <strong>[email protected]</strong>
     </button>
   </div>
 </form>

app/components/support/crate-report-form.module.css

@@ -67,10 +67,10 @@
   composes: button;
   composes: button small from '../../styles/shared/buttons.module.css';
   border-radius: var(--space-3xs);
-}
+  font-weight: normal;
 
-.cancel-button {
-  composes: button;
-  composes: tan-button small from '../../styles/shared/buttons.module.css';
-  border-radius: var(--space-3xs);
+  strong {
+    margin-left: var(--space-3xs);
+    font-weight: 500;
+  }
 }

app/styles/support.module.css

@@ -12,4 +12,9 @@
   padding: var(--space-xs) var(--space-s);
   height: inherit;
   min-height: var(--space-2xl);
+
+  strong {
+    margin-left: var(--space-3xs);
+    font-weight: 500;
+  }
 }

app/templates/support.hbs

@@ -29,7 +29,7 @@
             data-test-id="link-email-support"
             local-class="link"
           >
-            For all other cases
+            For all other cases: <strong>[email protected]</strong>
           </a>
         </li>
       </ul>

e2e/acceptance/support.spec.ts

@@ -10,7 +10,7 @@ test.describe('Acceptance | support page', { tag: '@acceptance' }, () => {
     const inquireList = page.getByTestId('inquire-list');
     await expect(inquireList).toBeVisible();
     await expect(inquireList.locator(page.getByRole('listitem'))).toHaveText(
-      ['Report a crate that violates policies'].concat(['For all other cases']),
+      ['Report a crate that violates policies'].concat(['For all other cases: [email protected]']),
     );
 
     await percy.snapshot();
@@ -26,7 +26,7 @@ test.describe('Acceptance | support page', { tag: '@acceptance' }, () => {
     const inquireList = page.getByTestId('inquire-list');
     await expect(inquireList).toBeVisible();
     await expect(inquireList.locator(page.getByRole('listitem'))).toHaveText(
-      ['Report a crate that violates policies'].concat(['For all other cases']),
+      ['Report a crate that violates policies'].concat(['For all other cases: [email protected]']),
     );
   });
 
@@ -57,7 +57,7 @@ test.describe('Acceptance | support page', { tag: '@acceptance' }, () => {
       await expect(page.getByTestId('fieldset-crate')).toBeVisible();
       await expect(page.getByTestId('fieldset-reasons')).toBeVisible();
       await expect(page.getByTestId('fieldset-detail')).toBeVisible();
-      await expect(page.getByTestId('report-button')).toHaveText('Report');
+      await expect(page.getByTestId('report-button')).toHaveText('Report to [email protected]');
 
       await percy.snapshot();
       await a11y.audit();

tests/acceptance/support-test.js

@@ -24,7 +24,7 @@ module('Acceptance | support', function (hooks) {
     const listitem = findAll('[data-test-id="inquire-list"] li');
     assert.deepEqual(
       listitem.map(item => item.textContent.trim()),
-      ['Report a crate that violates policies'].concat(['For all other cases']),
+      ['Report a crate that violates policies'].concat(['For all other cases: [email protected]']),
     );
 
     await percySnapshot(assert);
@@ -41,7 +41,7 @@ module('Acceptance | support', function (hooks) {
     const listitem = findAll('[data-test-id="inquire-list"] li');
     assert.deepEqual(
       listitem.map(item => item.textContent.trim()),
-      ['Report a crate that violates policies'].concat(['For all other cases']),
+      ['Report a crate that violates policies'].concat(['For all other cases: [email protected]']),
     );
   });
 
@@ -71,7 +71,7 @@ module('Acceptance | support', function (hooks) {
       assert.dom('[data-test-id="fieldset-crate"]').exists();
       assert.dom('[data-test-id="fieldset-reasons"]').exists();
       assert.dom('[data-test-id="fieldset-detail"]').exists();
-      assert.dom('[data-test-id="report-button"]').hasText('Report');
+      assert.dom('[data-test-id="report-button"]').hasText('Report to [email protected]');
 
       await percySnapshot(assert);
       await a11yAudit(axeConfig);