Feat/military affiliation (#426)

### Requirements List
- A working LicenseeUser account

### Description List
- Added in Military Status page
- Added in Update Military Status page
- Added in store + network modules needed to facilitate pages'
functionality
- Updated Licensee model and serializer to capture military affiliations
api implementation
- Added military affiliations model and serializer
- Edited `FinalizePrivilegePurchase` page and
`SelectedStatePurchaseInformation` component to refer to both the state
and user's military status to make a military discount determination
- Fixed bug in `InputRadioGroup` component causing multi-line labels to
break layout
- Added / updated tests as needed

### Testing List
- `yarn test:unit:all` should run without errors or warnings
- `yarn serve` should run without errors or warnings
- `yarn build` should run without errors or warnings
- Code review
- On both mock and real api and in all screen sizes:
1) click on the view military status button to view your status page
2) Click edit info to go the doc upload page
3) Fill out the form, confirm it does not allow submission with no
select choice and no / invalid document selection
4) Submit
5) View your updated military status (real api only)
6) Go through the privilege purchase flow and notice military
affiliation discount is being applied
7) Return to the military status screen; try ending your military status
8) Status should now be inactive
9) Go back through privilege purchase flow, confirm military affiliation
is no longer being applied

Closes #281 

Notes: 

- The real API system only saves one document upload submission per day.
It will replace a prior submission in the day with your most recent one
- The document upload is eventually consistent so your status may not
immediately update. I've found it to take ~1 second but theoretically it
could be longer.

---------

Co-authored-by: Dana Stiefel <[email protected]>

Author: ChiefStief

webroot/src/components/Forms/InputFile/InputFile.ts

@@ -5,7 +5,11 @@
 //  Created by InspiringApps on 7/8/2020.
 //
 
-import { Component, mixins, toNative } from 'vue-facing-decorator';
+import {
+    Component,
+    mixins,
+    toNative
+} from 'vue-facing-decorator';
 import { reactive } from 'vue';
 import MixinInput from '@components/Forms/_mixins/input.mixin';
 import UploadFileIcon from '@components/Icons/UploadFile/UploadFile.vue';

webroot/src/components/Forms/InputRadioGroup/InputRadioGroup.less

@@ -39,11 +39,14 @@
         label {
             display: flex;
             align-items: center;
+            margin-left: 3rem;
             font-weight: @fontWeightLight;
             cursor: pointer;
 
             &::before {
-                display: inline-block;
+                position: absolute;
+                top: 0;
+                left: -3rem;
                 width: 2.0rem;
                 height: 2.0rem;
                 margin: 0 0.3rem 0 0;
@@ -60,7 +63,7 @@
         input[type='radio']:checked + label::after {
             position: absolute;
             top: 0.4rem;
-            left: 0.4rem;
+            left: -2.6rem;
             display: block;
             width: 1.4rem;
             height: 1.4rem;

webroot/src/components/MilitaryDocumentRow/MilitaryDocumentRow.less

@@ -0,0 +1,37 @@
+//
+//  MilitaryDocumentRow.less
+//  InspiringApps modules
+//
+//  Created by InspiringApps on 4/30/2021.
+//
+
+.example-row {
+    display: flex;
+    flex-direction: column;
+    padding: 0.8rem 0;
+    border-bottom: 0.1rem solid @midGrey;
+
+    @media @tabletWidth {
+        flex-direction: row;
+    }
+
+    .cell {
+        flex-basis: 0;
+        flex-grow: 1;
+        flex-shrink: 1;
+        color: @veryDarkGrey;
+
+        &.is-header {
+            display: none;
+            font-weight: @fontWeightBold;
+
+            @media @tabletWidth {
+                display: flex;
+            }
+        }
+
+        .cell-title {
+            font-weight: @fontWeightBold;
+        }
+    }
+}

webroot/src/components/MilitaryDocumentRow/MilitaryDocumentRow.spec.ts

@@ -0,0 +1,23 @@
+//
+//  MilitaryDocumentRow.spec.ts
+//  InspiringApps modules
+//
+//  Created by InspiringApps on 4/30/2021.
+//
+
+import { expect } from 'chai';
+import { mountShallow } from '@tests/helpers/setup';
+import MilitaryDocumentRow from '@components/MilitaryDocumentRow/MilitaryDocumentRow.vue';
+
+describe('MilitaryDocumentRow component', async () => {
+    it('should mount the component', async () => {
+        const wrapper = await mountShallow(MilitaryDocumentRow, {
+            props: {
+                item: {},
+            }
+        });
+
+        expect(wrapper.exists()).to.equal(true);
+        expect(wrapper.findComponent(MilitaryDocumentRow).exists()).to.equal(true);
+    });
+});

webroot/src/components/MilitaryDocumentRow/MilitaryDocumentRow.ts

@@ -0,0 +1,14 @@
+//
+//  MilitaryDocumentRow.ts
+//  InspiringApps modules
+//
+//  Created by InspiringApps on 4/30/2021.
+//
+
+import { Component, Prop, Vue } from 'vue-facing-decorator';
+
+@Component
+export default class MilitaryDocumentRow extends Vue {
+    @Prop({ required: true }) item!: any;
+    @Prop({ default: false }) isHeaderRow?: boolean;
+}

webroot/src/components/MilitaryDocumentRow/MilitaryDocumentRow.vue

@@ -0,0 +1,22 @@
+<!--
+    MilitaryDocumentRow.vue
+    InspiringApps modules
+
+    Created by InspiringApps on 4/30/2021.
+-->
+
+<template>
+    <li class="example-row">
+        <div class="cell" :class="{ 'is-header': isHeaderRow }">
+            <span v-if="$matches.phone.only" class="cell-title">{{ $t('military.fileName') }}:</span>
+            {{ item.name }}
+        </div>
+        <div class="cell" :class="{ 'is-header': isHeaderRow }">
+            <span v-if="$matches.phone.only" class="cell-title">{{ $t('military.dateUploaded') }}:</span>
+            {{ item.date }}
+        </div>
+    </li>
+</template>
+
+<script lang="ts" src="./MilitaryDocumentRow.ts"></script>
+<style scoped lang="less" src="./MilitaryDocumentRow.less"></style>

webroot/src/components/SelectedStatePurchaseInformation/SelectedStatePurchaseInformation.less

@@ -64,7 +64,7 @@
                     height: 4rem;
                     margin: -1rem -1.2rem 0 0;
                     padding: 0;
-                    color: white;
+                    color: @white;
 
                     @media @tabletWidth {
                         margin: 0 -1.2rem 0 0;

webroot/src/components/SelectedStatePurchaseInformation/SelectedStatePurchaseInformation.ts

@@ -110,7 +110,7 @@ class SelectedStatePurchaseInformation extends mixins(MixinForm) {
     }
 
     get militaryDiscountText(): string {
-        return this.$t('licensing.militaryDiscountText');
+        return this.$t('military.militaryDiscountText');
     }
 
     get jurisprudenceModalTitle(): string {
@@ -149,8 +149,12 @@ class SelectedStatePurchaseInformation extends mixins(MixinForm) {
         return this.selectedStatePurchaseData?.isMilitaryDiscountActive || false;
     }
 
+    get shouldApplyMilitaryDiscount(): boolean {
+        return Boolean(this.isMilitaryDiscountActive && this.licensee?.isMilitary());
+    }
+
     get subTotal(): string {
-        const militaryDiscount = this.isMilitaryDiscountActive
+        const militaryDiscount = this.shouldApplyMilitaryDiscount
             && this.selectedStatePurchaseData?.militaryDiscountAmount
             ? this.selectedStatePurchaseData?.militaryDiscountAmount : 0;
 

webroot/src/components/SelectedStatePurchaseInformation/SelectedStatePurchaseInformation.vue

@@ -30,7 +30,7 @@
                 <div class="info-row-label">{{commissionFeeText}}</div>
                 <div class="expire-date-value">${{currentCompactCommissionFeeDisplay}}</div>
             </div>
-            <div v-if="selectedStatePurchaseData.isMilitaryDiscountActive" class="info-row sub-row">
+            <div v-if="shouldApplyMilitaryDiscount" class="info-row sub-row">
                 <div class="info-row-label">{{militaryDiscountText}}</div>
                 <div class="expire-date-value">-${{militaryDiscountAmountDisplay}}</div>
             </div>

webroot/src/locales/en.json

@@ -477,6 +477,7 @@
     "licensing": {
         "license": "License",
         "licensingListTitle": "Licensing Data",
+        "attestation": "Attestation",
         "searchTitle": "Begin a search",
         "searchSubtext": "Enter at least one field to search for licensing data.",
         "licenseExpiredMessage": "Your license has expired.",
@@ -498,7 +499,6 @@
         "state": "State",
         "issued": "Issued",
         "expirationDate": "Expiration date",
-        "militaryDiscountText": "Military Discount",
         "expireDate": "Expire Date",
         "expires": "Expires",
         "selectPrivileges": "Select privileges",
@@ -553,6 +553,42 @@
             }
         ]
     },
+    "military": {
+        "militaryStatusTitle": "Military status",
+        "updateMilitaryStatusTitle": "Update military status",
+        "viewMilitaryStatus": "View military status",
+        "militaryDiscountText": "Military Discount",
+        "affiliationType": "Affiliation Type",
+        "previouslyUploadedDocuments": "Previously Uploaded Documents",
+        "endMilitaryAffiliation": "End military affiliation",
+        "editInfo": "Edit info",
+        "noUploadedDocuments": "No uploaded documents",
+        "endAffiliationModalTitle": "Are you sure you want to end your military affiliation?",
+        "endAffiliationModalContent" : "This action cannot be undone, but if needed, you can go through the confirmation process again.",
+        "noGoBack": "No, go back",
+        "yesEnd": "Yes, end my affiliation",
+        "affiliationAttestationOptions": [
+            {
+                "name": "I hereby attest and affirm that I am an active-duty military member, defined as a person with a full-time duty status in the active uniformed service of the United States, including members of the National Guard and Reserve on active duty orders.",
+                "value": "militaryMember"
+            },
+            {
+                "name": "I hereby attest and affirm that I am the legal spouse of an active-duty military member, defined as a person with a full-time duty status in the active uniformed service of the United States, including members of the National Guard and Reserve on active duty orders.",
+                "value": "militaryMemberSpouse"
+            }
+        ],
+        "affiliationTypes": {
+            "militaryMember": "Active-duty military member",
+            "militaryMemberSpouse": "Active-duty military spouse",
+            "none": "N/A"
+        },
+        "documentProofLabel": "Upload proof of military affiliation*",
+        "successLongProcess": "Submit successful, your status may take a minute to process",
+        "submitFail": "Error uploading document",
+        "fileInstructions": "Only 1 file (PDF, docx, png, jpeg only)",
+        "fileName": "File name",
+        "dateUploaded": "Date uploaded"
+    },
     "account": {
         "accountTitle": "Account",
         "usersListTitle": "Users",

webroot/src/locales/es.json

@@ -477,6 +477,7 @@
     "licensing": {
         "licensingListTitle": "Datos de licencia",
         "searchTitle": "Iniciar una búsqueda",
+        "attestation": "Atestación",
         "searchSubtext": "Introduzca al menos un campo para buscar datos de licencia.",
         "searchLabel": "Buscar",
         "searchPlaceholderName": "Introducir nombre",
@@ -491,7 +492,6 @@
         "issueDate": "Fecha de asunto",
         "expireDate": "Fecha de caducidad",
         "expirationDate": "Fecha de caducidad",
-        "militaryDiscountText": "Descuento Militar",
         "lastUpdate": "Última carga",
         "license": "Licencia",
         "licenseExpiredMessage": "Su licencia ha caducado.",
@@ -553,6 +553,42 @@
             }
         ]
     },
+    "military": {
+        "militaryStatusTitle": "Estado militar",
+        "updateMilitaryStatusTitle": "Actualizar el estado militar",
+        "militaryDiscountText": "Descuento Militar",
+        "viewMilitaryStatus": "Ver estado militar",
+        "affiliationType": "Tipo de afiliación",
+        "previouslyUploadedDocuments": "Previously Uploaded Documents",
+        "endMilitaryAffiliation": "Parar afiliación militar",
+        "editInfo": "Editar información",
+        "noUploadedDocuments": "No documentos cargados",
+        "endAffiliationModalTitle": "¿Está seguro de que desea poner fin a su afiliación militar?",
+        "endAffiliationModalContent" : "Esta acción no se puede deshacer, pero si es necesario, puedes volver a realizar el proceso de confirmación.",
+        "noGoBack": "No, regresa",
+        "yesEnd": "Sí, terminar mi afiliación",
+        "affiliationAttestationOptions": [
+            {
+                "name": "Por la presente doy fe y afirmo que soy un miembro militar en servicio activo, definido como una persona con un estado de servicio de tiempo completo en el servicio uniformado activo de los Estados Unidos, incluidos los miembros de la Guardia Nacional y la Reserva en servicio activo.",
+                "value": "militaryMember"
+            },
+            {
+                "name": "Por la presente doy fe y afirmo que soy el cónyuge legal de un miembro militar en servicio activo, definido como una persona con estatus de servicio de tiempo completo en el servicio uniformado activo de los Estados Unidos, incluidos los miembros de la Guardia Nacional y la Reserva en activo. órdenes de servicio.",
+                "value": "militaryMemberSpouse"
+            }
+        ],
+        "affiliationTypes": {
+            "militaryMember": "Miembro militar en servicio activo",
+            "militaryMemberSpouse": "Esposo militar en servicio activo",
+            "none": "N/A"
+        },
+        "documentProofLabel": "Cargar prueba de afiliación militar",
+        "successLongProcess": "Enviado correctamente, su estado puede tardar un minuto en procesarse",
+        "submitFail": "Error al cargar el documento",
+        "fileInstructions": "Sólo 1 archivo (sólo PDF, docx, png, jpeg)",
+        "fileName": "Nombre del archivo",
+        "dateUploaded": "Fecha de carga"
+    },
     "account": {
         "accountTitle": "Cuenta",
         "usersListTitle": "Usuarios",