Feature/#462 warning message application with issues recommended

src/components/Page/Banner.vue

@@ -1,7 +1,7 @@
 <template>
   <div 
     v-if="message"
-    class="moj-banner moj-banner--success"
+    :class="status ? 'moj-banner moj-banner--'+status : 'moj-banner'"
   >
     <div class="moj-banner__message">
       <svg 
@@ -14,9 +14,9 @@
         height="25"
         width="25"
       >
-        <path d="M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z" />
+        <path :d="status === 'success' ? 'M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z' : 'M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v.8C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z'" />
       </svg>
-      <span class="moj-banner__assistive">success</span>{{ message }}
+      <span class="moj-banner__assistive">{{ status }}</span> {{ message }}
     </div>
   </div>
 </template>
@@ -29,6 +29,11 @@ export default {
       default: null,
       // @TODO add validator?
     },
+    status: {
+      type: String,
+      default: null,
+      // @TODO add validator?
+    },
   },
 };
 </script>

src/views/Exercises/Stages/SelectedEdit.vue

@@ -1,5 +1,24 @@
 <template>
   <form @submit.prevent="validateAndSave">
+    <div
+      v-if="showWarning"
+    >
+      <Banner
+        :message="warningMessage"
+      />
+      <button
+        class="govuk-button govuk-!-margin-right-1"
+        @click="confirm"
+      >
+        Proceed with change
+      </button>      
+      <button 
+        class="govuk-button govuk-button--secondary"
+        @click="cancel"
+      >
+        Cancel and amend
+      </button>
+    </div>
     <ErrorSummary
       :errors="errors"
     />
@@ -24,13 +43,15 @@
 </template>
 
 <script>
+import Banner from '@/components/Page/Banner';
 import Form from '@/components/Form/Form';
 import ErrorSummary from '@/components/Form/ErrorSummary';
 import RadioGroup from '@/components/Form/RadioGroup';
 import RadioItem from '@/components/Form/RadioItem';
 
 export default {
   components: {
+    Banner,
     ErrorSummary,
     RadioGroup,
     RadioItem,
@@ -39,9 +60,14 @@ export default {
   data() {
     return {
       newSelectedStatus: null,
+      confirmedSave: false,
+      showWarning: false,
     };
   },
   computed: {
+    applicationRecords() {
+      return this.$store.state.stageSelected.records;
+    },
     applicationId() {
       return this.$route.params.applicationId;
     },
@@ -52,6 +78,9 @@ export default {
       const selectedItems = this.$store.state.stageSelected.selectedItems;
       return selectedItems;
     },
+    warningMessage() {
+      return 'This application has issues';
+    },
   },
   created() {
     // on refresh if there's no IDs to change => redirect to the list
@@ -60,9 +89,23 @@ export default {
     }
   },
   methods: {
+    hasIssues(applicationId) {
+      const individualApplication = this.applicationRecords.filter(item => item.application.id === applicationId)[0];
+      return (individualApplication.flags.eligibilityIssues || individualApplication.flags.characterIssues);
+    },
+    confirm(){
+      this.confirmedSave = true;
+    },
+    cancel(){
+      this.showWarning = false;
+    },
     async save() {
-      await this.$store.dispatch('stageSelected/updateStatus', { status: this.newSelectedStatus });
-      this.$router.push({ name: 'exercise-stages-selected-list' });
+      if (!this.confirmedSave && this.hasIssues(this.applicationId)){
+        this.showWarning = true;
+      } else {
+        await this.$store.dispatch('stageSelected/updateStatus', { status: this.newSelectedStatus });
+        this.$router.push({ name: 'exercise-stages-selected-list' });
+      }
     },
   },
 };

src/views/Sandbox.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <Banner
+      :message="'gabe'"
+      :status="'success'"
+    />
     <TabsList
       :tabs="tabs"
       :active-tab.sync="activeTab"
@@ -26,6 +30,7 @@
   </div>
 </template>
 <script>
+import Banner from '@/components/Page/Banner'; 
 import TabsList from '@/components/Page/TabsList'; 
 import Table from '@/components/Page/Table/Table'; 
 import TableCell from '@/components/Page/Table/TableCell'; 
@@ -35,6 +40,7 @@ export default {
     TabsList,
     Table,
     TableCell,
+    Banner,
   },
   data() {
     return {

tests/unit/components/Page/Banner.spec.js

@@ -26,11 +26,22 @@ describe('components/Page/Banner', () => {
         expect(prop.default).toBe(null);
       });
     });
+    describe('status', () => {
+      beforeEach(() => {
+        prop = Banner.props.status;
+      });
+      it('is a string', () => {
+        expect(prop.type()).toBeString();
+      });
+      it('defaults as', () => {
+        expect(prop.default).toBe(null);
+      });
+    });
   });
 
   describe('component instance', () => {
-    // describe('success', () => {
-    let wrapper = createTestSubject({ message: 'mockMessage' });
+    describe('when status = success', () => {
+    let wrapper = createTestSubject({ message: 'mockMessage', status: 'success' });
 
     it('renders the component', () => {
       expect(wrapper.exists()).toBe(true);
@@ -87,7 +98,67 @@ describe('components/Page/Banner', () => {
         });
       });
 
-    // });
     });
+    });
+    describe('when status is empty', () => {
+      let wrapper = createTestSubject({ message: 'mockMessage', status: '' });
+
+      it('renders the component', () => {
+        expect(wrapper.exists()).toBe(true);
+      });
+
+      describe('template', () => {
+        describe('divs', () => {
+          describe('container div', () => {
+            it('class', () => {
+              expect(wrapper.findAll('div').at(0).attributes('class')).toBe('moj-banner');
+            });
+          });
+          describe('message div', () => {
+            expect(wrapper.findAll('div').at(1).attributes('class')).toBe('moj-banner__message');
+          });
+        });
+        describe('svg attributes', () => {
+          it('class', () => {
+            expect(wrapper.find('svg').attributes('class')).toBe('moj-banner_icon');
+          });
+          it('fill',() => {
+            expect(wrapper.find('svg').attributes('fill')).toBe('CurrentColour');
+          });
+          it('role', () => {
+            expect(wrapper.find('svg').attributes('role')).toBe('presentation');
+          });
+          it('focusable ',() => {
+            expect(wrapper.find('svg').attributes('focusable')).toBe('false');
+          });
+          it('xmlns', () => {
+            expect(wrapper.find('svg').attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+          });
+          it('fill',() => {
+            expect(wrapper.find('svg').attributes('viewBox')).toBe('0 0 25 25');
+          });
+          it('class', () => {
+            expect(wrapper.find('svg').attributes('height')).toBe('25');
+          });
+          it('fill',() => {
+            expect(wrapper.find('svg').attributes('width')).toBe('25');
+          });
+        });
+        describe('path', () => {
+          it('d attribute', () => {
+            expect(wrapper.find('svg > path').attributes('d')).toBe('M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v.8C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z');
+          });
+        });
+        describe('span', () => {
+          it('class', () => {
+            expect(wrapper.find('div > span').attributes('class')).toBe('moj-banner__assistive');
+          });
+          it('contents', () => {
+            expect(wrapper.find('div > span').text()).toBe('');
+          });
+        });
+
+      });
+      });
   });
 });