♻️ mon-pix: improve error management and design on attestation page

Author: AndreiaPena

mon-pix/app/components/user-certifications-detail-header.hbs

@@ -49,7 +49,6 @@
           <p class="attestation__error-message">{{this.attestationDownloadErrorMessage}}</p>
         {{/if}}
       </div>
-      <hr />
       <div class="verification-code">
         <h2 class="verification-code__title">
           {{t "pages.certificate.verification-code.title"}}

mon-pix/app/components/user-certifications-detail-header.js

@@ -34,8 +34,8 @@ export default class UserCertificationsDetailHeader extends Component {
     const token = this.session.data.authenticated.access_token;
     try {
       await this.fileSaver.save({ url, token });
-    } catch (error) {
-      this.attestationDownloadErrorMessage = error.message;
+    } catch (_) {
+      this.attestationDownloadErrorMessage = this.intl.t('common.error');
     }
   }
 }

mon-pix/app/styles/components/_user-certifications-detail-header.scss

@@ -72,34 +72,31 @@
 }
 
 .attestation-and-verification-code {
-  padding: 16px 20px;
+  max-width: 100%;
+  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
   background-color: var(--pix-neutral-20);
   border-radius: 8px;
 
+  @include device-is('desktop') {
+    max-width: calc(var(--pix-spacing-12x) * 6);
+  }
+
   .attestation {
-    margin: auto;
-    font-size: 0.875rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: var(--pix-spacing-6x);
     text-align: center;
 
-    button {
-      max-width: 250px;
-      padding: 14px 20px;
-    }
-
     &__error-message {
-      max-width: 250px;
-      margin-top: 15px;
+      @extend %pix-body-s;
+
+      margin-top: var(--pix-spacing-4x);
       color: var(--pix-error-500);
     }
   }
 
-  hr {
-    margin: 24px 0;
-    border: 1px solid var(--pix-neutral-20);
-  }
-
   .verification-code {
-    max-width: 250px;
     margin: auto;
     color: var(--pix-neutral-900);
     letter-spacing: 0;
@@ -157,10 +154,5 @@
   @include device-is('desktop') {
     flex-grow: 0;
     margin-left: auto;
-
-    .verification-code,
-    .attestation {
-      margin: 0;
-    }
   }
 }

mon-pix/tests/integration/components/user-certifications-detail-header-test.js

@@ -330,7 +330,7 @@ module('Integration | Component | user certifications detail header', function (
   });
 
   module('when there is an error during the download of the attestation', function () {
-    test('should show the error message', async function (assert) {
+    test('should show the common error message', async function (assert) {
       // given
       const fileSaverSaveStub = sinon.stub();
 
@@ -366,7 +366,7 @@ module('Integration | Component | user certifications detail header', function (
       await click(screen.getByRole('button', { name: 'Télécharger mon attestation' }));
 
       // then
-      assert.ok(screen.getByText('an error message'));
+      assert.ok(screen.getByText('Une erreur est survenue. Veuillez recommencer ou contacter le support.'));
     });
   });
 });