f-account-info@v0.20.0 - Added success & failed alerts to the Save bu…

…tton (#1753) * f-account-info - Added success & failed alerts attached to the Save button * f-account-info - Styling changes * Review tweak * Changed the load error title to meet figma design * Review tweak Co-authored-by: billy.oliver <billy.oliver@just-eat.com> Co-authored-by: Kevin Rodrigues <kevin.rodrigues@just-eat.com>
justeattakeaway · Mar 17, 2022 · 21397e4 · 21397e4
1 parent 2cb60f0
commit 21397e4
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 63 deletions.
diff --git a/packages/components/pages/f-account-info/CHANGELOG.md b/packages/components/pages/f-account-info/CHANGELOG.md
@@ -4,6 +4,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v0.20.0
+------------------------------
+*March 16, 2022*
+
+### Added
+- Alerts for failed and successful saving.
+
+
 v0.19.0
 ------------------------------
 *March 15, 2022*

diff --git a/packages/components/pages/f-account-info/package.json b/packages/components/pages/f-account-info/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-account-info",
   "description": "Fozzie Account Info - The account information page",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "main": "dist/f-account-info.umd.min.js",
   "maxBundleSize": "100kB",
   "files": [
@@ -63,6 +63,7 @@
     "@justeat/f-button": "3.2.0",
     "@justeat/f-card": "3.4.0",
     "@justeat/f-card-with-content": "1.0.0",
+    "@justeat/f-alert": "4.3.0",
     "@justeat/f-error-message": "1.1.0",
     "@justeat/f-form-field": "4.5.0",
     "@justeat/f-link": "2.3.0",

diff --git a/packages/components/pages/f-account-info/src/components/AccountInfo.vue b/packages/components/pages/f-account-info/src/components/AccountInfo.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <f-card
-            v-if="!shouldShowErrorPage"
+            v-if="!shouldShowLoadErrorCard"
             :card-heading="$t('accountDetails')"
             data-test-id="account-info"
             has-inner-spacing-large
@@ -170,6 +170,11 @@
                     </template>
                 </form-field>
 
+                <notifications
+                    :error-message-key="error.messageKey"
+                    :show-save-error-alert="shouldShowSaveErrorAlert"
+                    :show-successful-alert="shouldShowSuccessfulAlert" />
+
                 <f-button
                     :class="[$style['c-accountInfo-submitButton']]"
                     data-test-id="account-info-save-changes-button"
@@ -199,12 +204,8 @@
         <f-card-with-content
             v-else
             data-test-id="account-info-error-card"
-            :card-heading="$t('errorMessages.errorHeading')"
-            :card-description="$t(error.messageKey)"
-            has-inner-spacing-large
-            card-size-custom="medium"
-            has-outline
-            :class="[$style['c-accountInfo-errorCard']]">
+            :card-heading="$t('errorMessages.loading.heading')"
+            :card-description="$t(error.messageKey)">
             <template #icon>
                 <bag-sad-bg-icon />
             </template>
@@ -231,14 +232,16 @@ import {
 import EmailAddressField from './EmailAddressField.vue';
 import DeleteAccount from './DeleteAccount.vue';
 import AccountInfoValidationMixin from './AccountInfoValidationMixin.vue';
+import Notifications from './Notifications.vue';
 import tenantConfigs from '../tenants';
 import ConsumerApi from '../services/providers/Consumer.api';
 import fAccountInfoModule from '../store/accountInfo.module';
-
 import {
     EVENT_SPINNER_STOP_LOADING
 } from '../constants';
-import { AccountInfoError } from '../exceptions';
+import InfoPageError from '../exceptions/InfoPageError';
+
+const standardLogTags = ['account-pages', 'account-info'];
 
 export default {
     components: {
@@ -249,6 +252,7 @@ export default {
         FErrorMessage,
         EmailAddressField,
         DeleteAccount,
+        Notifications,
         BagSadBgIcon
     },
 
@@ -283,7 +287,9 @@ export default {
             isFormSubmitting: false,
             hasFormUpdate: false,
             hasAddressBeenUpdated: false,
-            shouldShowErrorPage: false,
+            shouldShowLoadErrorCard: false,
+            shouldShowSaveErrorAlert: false,
+            shouldShowSuccessfulAlert: false,
             error: {}
         };
     },
@@ -318,13 +324,32 @@ export default {
             'saveConsumerDetails'
         ]),
 
+        setFormUpdateState (isDirty, isAddressField) {
+            this.hasFormUpdate = isDirty;
+            this.shouldShowSaveErrorAlert = false;
+            this.shouldShowSuccessfulAlert = !isDirty;
+
+            if (isAddressField) {
+                this.hasAddressBeenUpdated = true;
+            }
+        },
+
         /**
         * Informs the template that we are in an Error State.
-        * @param {object} Error - The error that has recently occurred
+        * @param {object} error - The error that has recently occurred
+        */
+        handleLoadErrorState (error) {
+            this.shouldShowLoadErrorCard = true;
+            this.error = new InfoPageError(error?.message, error?.response?.status, 'errorMessages.loading.description');
+        },
+
+        /**
+        * Informs the template that we failed to save.
+        * @param {object} error - The error that has recently occurred
         */
-        handleErrorState (error) {
-            this.shouldShowErrorPage = true;
-            this.error = error;
+        handleSaveErrorState (error) {
+            this.shouldShowSaveErrorAlert = true;
+            this.error = new InfoPageError(error?.message, error?.response?.status, 'errorMessages.saving.description');
         },
 
         /**
@@ -339,19 +364,27 @@ export default {
         async initialise () {
             try {
                 await this.loadConsumerDetails({ api: this.consumerApi, authToken: this.authToken });
-                this.$log.info('Consumer details fetched successfully', ['account-pages', 'account-info']);
-                this.hasFormUpdate = false;
-                this.hasAddressBeenUpdated = false;
+                this.$log.info('Consumer details fetched successfully', standardLogTags);
             } catch (error) {
-                this.$log.error('Error fetching consumer details', error, ['account-pages', 'account-info']);
-                this.handleErrorState(new AccountInfoError(error.message, error?.response?.status));
+                this.$log.error('Error fetching consumer details', error, standardLogTags);
+                this.handleLoadErrorState(error);
             } finally {
                 this.$nextTick(() => {
                     this.$parent.$emit(EVENT_SPINNER_STOP_LOADING);
                 });
             }
         },
 
+        /**
+        * If there are any form changes
+        * then informs the Template that we are submitting the form
+        * then Saves the State (via the api)
+        * then lowers the hasFormUpdate flag as the form data is now currently clean again
+        * then informs the Template that we are now not submitting the form
+        *
+        * If an error occurs then this is logged and the Template is
+        * informed that it is in a state of error.
+        */
         async onFormSubmit () {
             if (this.isFormInvalid()) {
                 this.logValidationFailure();
@@ -366,13 +399,12 @@ export default {
 
             try {
                 await this.saveConsumerDetails({ api: this.consumerApi, authToken: this.authToken });
-                this.$log.info('Consumer details saved successfully', ['account-pages', 'account-info']);
-                this.hasFormUpdate = false;
+                this.$log.info('Consumer details saved successfully', standardLogTags);
                 this.analyticsTrackFormSubmission(this.hasAddressBeenUpdated);
-                this.hasAddressBeenUpdated = false;
+                this.setFormUpdateState(false, false);
             } catch (error) {
-                this.$log.error('Error saving consumer details', error, ['account-pages', 'account-info']);
-                this.handleErrorState(new AccountInfoError(error.message, error?.response?.status));
+                this.$log.error('Error saving consumer details', error, standardLogTags);
+                this.handleSaveErrorState(error);
             } finally {
                 this.setSubmittingState(false);
             }
@@ -394,11 +426,7 @@ export default {
         */
         onEditConsumer (field, value, isAddressField = false) {
             this.editConsumerDetails({ field, value });
-            this.hasFormUpdate = true;
-
-            if (isAddressField) {
-                this.hasAddressBeenUpdated = true;
-            }
+            this.setFormUpdateState(true, isAddressField);
         },
 
         /**
@@ -433,8 +461,4 @@ export default {
 .c-accountInfo-changePasswordButton {
     margin-top: spacing(d);
 }
-
-.c-accountInfo-errorCard {
-    margin-left: 0;
-}
 </style>
diff --git a/packages/components/pages/f-account-info/src/components/Notifications.vue b/packages/components/pages/f-account-info/src/components/Notifications.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <f-alert
+            v-if="showSaveErrorAlert"
+            data-test-id="account-info-error-alert"
+            :class="[
+                $style['c-accountInfo-alert'],
+                $style['c-accountInfo-inheritWidthAboveNarrow']
+            ]"
+            type="danger"
+            :heading="$t('errorMessages.saving.heading')">
+            {{ $t(errorMessageKey) }}
+        </f-alert>
+
+        <f-alert
+            v-if="showSuccessfulAlert"
+            data-test-id="account-info-success-alert"
+            :class="[
+                $style['c-accountInfo-alert'],
+                $style['c-accountInfo-inheritWidthAboveNarrow']
+            ]"
+            type="success"
+            :heading="$t('successMessages.saving.heading')"
+        />
+    </div>
+</template>
+
+<script>
+import FAlert from '@justeat/f-alert';
+import '@justeat/f-alert/dist/f-alert.css';
+
+export default {
+    name: 'AccountInfoNotifications',
+
+    components: {
+        FAlert
+    },
+
+    props: {
+        errorMessageKey: {
+            type: String,
+            default: ''
+        },
+        showSaveErrorAlert: {
+            type: Boolean
+        },
+        showSuccessfulAlert: {
+            type: Boolean
+        }
+    }
+};
+</script>
+
+<style lang="scss" module>
+.c-accountInfo-inheritWidthAboveNarrow {
+    width: 100%;
+
+    @include media('>narrow') {
+        width: inherit;
+    }
+}
+
+.c-accountInfo-alert {
+    margin-top: spacing(f);
+}
+</style>
diff --git a/packages/components/pages/f-account-info/src/components/_tests/AccountInfo.test.js b/packages/components/pages/f-account-info/src/components/_tests/AccountInfo.test.js
@@ -74,7 +74,7 @@ describe('AccountInfo', () => {
         // Arrange
         dataDefaults = () => ({
             hasFormUpdate: false,
-            shouldShowErrorPage: false
+            shouldShowLoadErrorCard: false
         });
         cookiesSpy = jest.fn();
         httpSpy = jest.fn();
@@ -103,7 +103,7 @@ describe('AccountInfo', () => {
 
     describe('when creating the component', () => {
         it('should register the Store Module', async () => {
-            // Arrange
+            // Arrange & Act
             wrapper = await mountAccountInfo({ storeOverride: new Vuex.Store() });
 
             // Assert
@@ -171,18 +171,20 @@ describe('AccountInfo', () => {
             );
         });
 
-        it('should set shouldShowErrorPage flag to true if an error occurs', async () => {
-            // Arrange & Act
+        it('should set shouldShowLoadErrorCard flag to true if an error occurs', async () => {
+            // Arrange
             const errorActions = {
                 ...storeActions,
                 loadConsumerDetails: jest.fn().mockImplementationOnce(() => {
                     throw new Error('some-error');
                 })
             };
+
+            // Act
             wrapper = await mountAccountInfo({ actions: errorActions });
 
             // Assert
-            expect(wrapper.vm.shouldShowErrorPage).toEqual(true);
+            expect(wrapper.vm.shouldShowLoadErrorCard).toEqual(true);
         });
 
         it('should not show the error card if no errors', async () => {
@@ -194,10 +196,10 @@ describe('AccountInfo', () => {
             expect(element.exists()).toEqual(false);
         });
 
-        it('should show the error card if shouldShowErrorPage is true', async () => {
+        it('should show the error card if shouldShowLoadErrorCard is true', async () => {
             // Arrange & Act
             wrapper = await mountAccountInfo();
-            await wrapper.setData({ shouldShowErrorPage: true });
+            await wrapper.setData({ shouldShowLoadErrorCard: true });
             const element = wrapper.find('[data-test-id="account-info-error-card"]');
 
             // Assert
@@ -322,10 +324,12 @@ describe('AccountInfo', () => {
             });
 
             it('should log an info log', async () => {
-                // Act
+                // Arrange
                 wrapper = await mountAccountInfo();
                 await wrapper.setData({ hasFormUpdate: true });
                 logMocks.info.mockClear(); // initialise has already logged info once
+
+                // Act
                 await wrapper.vm.onFormSubmit();
 
                 // Assert
@@ -336,8 +340,8 @@ describe('AccountInfo', () => {
                 );
             });
 
-            it('should set shouldShowErrorPage flag to true if an error occurs', async () => {
-                // Arrange & Act
+            it('should set shouldShowSaveErrorAlert flag to true if a save error occurs', async () => {
+                // Arrange
                 const errorActions = {
                     ...storeActions,
                     saveConsumerDetails: jest.fn().mockImplementationOnce(() => {
@@ -351,11 +355,11 @@ describe('AccountInfo', () => {
                 await wrapper.vm.onFormSubmit();
 
                 // Assert
-                expect(wrapper.vm.shouldShowErrorPage).toEqual(true);
+                expect(wrapper.vm.shouldShowSaveErrorAlert).toEqual(true);
             });
 
             it('should not call the save action if no changes', async () => {
-                // Arrange & Act
+                // Arrange
                 wrapper = await mountAccountInfo();
                 await wrapper.setData({ hasFormUpdate: false });
 
@@ -366,8 +370,8 @@ describe('AccountInfo', () => {
                 expect(storeActions.saveConsumerDetails).not.toHaveBeenCalledWith();
             });
 
-            it('should set shouldShowErrorPage flag to true if an error occurs', async () => {
-                // Arrange & Act
+            it('should set shouldShowSaveErrorAlert flag to true if a save error occurs', async () => {
+                // Arrange
                 const errorActions = {
                     ...storeActions,
                     saveConsumerDetails: jest.fn().mockImplementationOnce(() => {
@@ -381,7 +385,7 @@ describe('AccountInfo', () => {
                 await wrapper.vm.onFormSubmit();
 
                 // Assert
-                expect(wrapper.vm.shouldShowErrorPage).toEqual(true);
+                expect(wrapper.vm.shouldShowSaveErrorAlert).toEqual(true);
             });
 
             describe('publishing analytics', () => {