Frontend/proof print page

webroot/.stylelintrc.json

@@ -18,6 +18,12 @@
                 "ignorePseudoClasses": ["deep"]
             }
         ],
+        "property-no-unknown": [
+            true,
+            {
+                "ignoreProperties": ["print-color-adjust"]
+            }
+        ],
         "order/properties-order": [],
         "plugin/rational-order": [true, {
             "border-in-box-model": true,

webroot/src/components/Icons/User/User.less

@@ -0,0 +1,6 @@
+//
+//  User.less
+//  CompactConnect
+//
+//  Created by InspiringApps on 5/6/2025.
+//

webroot/src/components/Icons/User/User.spec.ts

@@ -0,0 +1,19 @@
+//
+//  User.spec.ts
+//  CompactConnect
+//
+//  Created by InspiringApps on 5/6/2025.
+//
+
+import { expect } from 'chai';
+import { mountShallow } from '@tests/helpers/setup';
+import User from '@components/Icons/User/User.vue';
+
+describe('User component', async () => {
+    it('should mount the component', async () => {
+        const wrapper = await mountShallow(User);
+
+        expect(wrapper.exists()).to.equal(true);
+        expect(wrapper.findComponent(User).exists()).to.equal(true);
+    });
+});

webroot/src/components/Icons/User/User.ts

@@ -0,0 +1,18 @@
+//
+//  User.ts
+//  CompactConnect
+//
+//  Created by InspiringApps on 5/6/2025.
+//
+
+import { Component, Vue, toNative } from 'vue-facing-decorator';
+
+@Component({
+    name: 'User',
+})
+class User extends Vue {
+}
+
+export default toNative(User);
+
+// export default User;

webroot/src/components/Icons/User/User.vue

@@ -0,0 +1,32 @@
+<!--
+    User.vue
+    CompactConnect
+
+    Created by InspiringApps on 5/6/2025.
+-->
+
+<template>
+    <svg viewBox="0 0 17 19" class="icon icon-user">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.38889 4.29162C6.38889 3.238 7.24302 2.38387 8.29664
+            2.38387C9.35026 2.38387 10.2044 3.238 10.2044 4.29162C10.2044 5.34524 9.35026 6.19936 8.29664
+            6.19936C7.24302 6.19936 6.38889 5.34524 6.38889 4.29162ZM8.29664 0.664062C6.2932 0.664062 4.66908 2.28817
+            4.66908 4.29162C4.66908 6.29506 6.2932 7.91917 8.29664 7.91917C10.3001 7.91917 11.9242 6.29506 11.9242
+            4.29162C11.9242 2.28817 10.3001 0.664062 8.29664 0.664062ZM0.777344 15.2687C0.777344 15.1753 0.7796
+            15.0824 0.784062 14.9901V14.9136H0.788269C0.971535 11.9446 3.43754 9.5933 6.45271 9.5933H10.6644C13.7988
+            9.5933 16.3398 12.1342 16.3398 15.2687V15.6985H16.34L16.3398 15.7353V15.7732C16.3398 15.7991 16.3386
+            15.8248 16.3364 15.8501C16.3212 16.1707 16.2568 16.5099 16.1257 16.78C15.9795 17.081 15.7759 17.3108
+            15.5865 17.5002C15.2933 17.7934 14.9038 17.9803 14.5798 18.093C14.2476 18.2085 13.8753 18.2836 13.5488
+            18.2836H3.34466L3.28988 18.2836C3.01754 18.284 2.68713 18.2845 2.37837 18.1998C1.98833 18.0929 1.69641
+            17.8778 1.42466 17.5989C0.963601 17.1258 0.804558 16.4882 0.785959 15.8954C0.780281 15.8555 0.777344
+            15.8147 0.777344 15.7732V15.2687ZM2.50387 15.6162V15.0362C2.62421 12.9598 4.34616 11.3131 6.45271
+            11.3131H10.6644C12.849 11.3131 14.62 13.0841 14.62 15.2687V15.7183C14.6151 15.9432 14.5283 16.2164 14.345
+            16.3586C14.1133 16.5383 13.833 16.5638 13.5488 16.5638H3.34466C3.31498 16.5638 3.28552 16.5641 3.25632
+            16.5645C3.03449 16.5675 2.82796 16.5703 2.65642 16.3987C2.4976 16.2399 2.49947 16.0697 2.50281
+            15.7665C2.50332 15.7197 2.50387 15.6698 2.50387 15.6162Z"
+        />
+    </svg>
+
+</template>
+
+<script lang="ts" src="./User.ts"></script>
+<style scoped lang="less" src="./User.less"></style>

webroot/src/components/Page/PageContainer/PageContainer.less

@@ -13,6 +13,17 @@
     padding-top: @appHeaderHeight;
     background-color: @ambientGrey;
 
+    @media print {
+        @page {
+            size: 330mm 427mm;
+            margin: 14mm;
+        }
+
+        width: @desktopWidth;
+        min-height: auto;
+        background-color: @white;
+    }
+
     &.no-top-pad {
         @media @tabletWidth {
             padding-top: unset;
@@ -36,7 +47,9 @@
         flex-shrink: 0;
 
         @media @tabletWidth {
-            padding-left: @navPartialExpandWidth;
+            &.include-nav {
+                padding-left: @navPartialExpandWidth;
+            }
         }
     }
 }

webroot/src/components/Page/PageContainer/PageContainer.ts

@@ -56,11 +56,20 @@ class PageContainer extends Vue {
         const nonPadTopRouteNames: Array<string> = [
             'LicensingDetail',
             'LicenseeDetailPublic',
+            'LicenseeVerification',
         ];
 
         return !nonPadTopRouteNames.includes(this.currentRouteName);
     }
 
+    get includeMainNav(): boolean {
+        const nonMainNavRouteNames: Array<string> = [
+            'LicenseeVerification',
+        ];
+
+        return !nonMainNavRouteNames.includes(this.currentRouteName);
+    }
+
     get includePageFooter(): boolean {
         return false;
     }

webroot/src/components/Page/PageContainer/PageContainer.vue

@@ -12,8 +12,8 @@
         <header>
             <PageHeader v-if="includePageHeader"></PageHeader>
         </header>
-        <PageNav />
-        <div class="page-content" role="main">
+        <PageNav v-if="includeMainNav" />
+        <div class="page-content" :class="{ 'include-nav': includeMainNav }" role="main">
             <transition name="fade">
                 <PageLoadingMask v-show="isLoading"></PageLoadingMask>
             </transition>

webroot/src/components/Page/PageHeader/PageHeader.less

@@ -18,6 +18,10 @@
     color: @white;
     background-color: @primaryColor;
 
+    @media print {
+        display: none;
+    }
+
     @media @tabletWidth {
         background-color: transparent;
     }

webroot/src/locales/en.json

@@ -9,6 +9,7 @@
         "cancel": "Cancel",
         "close": "Close",
         "skip": "Skip",
+        "print": "Print",
         "confirm": "Confirm",
         "caution": "Caution",
         "fees": "Fees",
@@ -514,6 +515,8 @@
         "licenseNumber": "License number",
         "licenseExpirationDate": "License expiration date",
         "residenceLocation": "Residence location",
+        "generateVerification": "Generate verification doc",
+        "generateVerificationSubtext": "Printer-friendly view",
         "obtainPrivileges": "Obtain Privileges",
         "privileges": "Privileges",
         "privilege": "Privilege",
@@ -639,7 +642,12 @@
         "eventNodeLabel": "Event: {eventNameDisplay} on {eventDate}",
         "statusBlockLabel": "{status} status block",
         "compactEligible": "Compact Eligible",
-        "notCompactEligible": "Not Compact Eligible"
+        "notCompactEligible": "Not Compact Eligible",
+        "privilegeVerification": "Privilege Verification",
+        "practitionerInformation": "Practitioner Information",
+        "homeStateLicenses": "Home State Licenses",
+        "activeDate": "Active date",
+        "privilegeProofFooter": "This document is officially generated by Compact Connect and serves as proof of the practitioner's current licenses and privileges."
     },
     "military": {
         "militaryStatusTitle": "Military status",

webroot/src/locales/es.json

@@ -11,6 +11,7 @@
         "cancel": "Cancelar",
         "close": "Cerrar",
         "skip": "Saltear",
+        "print": "Imprimir",
         "fees": "Tarifas",
         "choose": "Elige",
         "chooseOne": "Elige uno",
@@ -545,6 +546,8 @@
         "licenseNumber": "Número de licencia",
         "licenseExpirationDate": "Fecha de vencimiento de la licencia",
         "licenseExpiredMessage": "Su licencia ha caducado.",
+        "generateVerification": "Generar documento de verificación",
+        "generateVerificationSubtext": "Vista para imprimir",
         "obtainPrivileges": "Obtener privilegios",
         "expired": "Caducada",
         "issued": "Emitida",
@@ -638,7 +641,12 @@
         "eventNodeLabel": "Evento: {eventNameDisplay} en {eventDate}",
         "statusBlockLabel": "{status} bloque de estado",
         "compactEligible": "Elegible Compacto",
-        "notCompactEligible": "No Compacto Elegible"
+        "notCompactEligible": "No Compacto Elegible",
+        "privilegeVerification": "Verificación de privilegios",
+        "practitionerInformation": "Información para profesionales",
+        "homeStateLicenses": "Licencias del estado de origen",
+        "activeDate": "Fecha activa",
+        "privilegeProofFooter": "Este documento es generado oficialmente por Compact Connect y sirve como prueba de las licencias y privilegios actuales del profesional."
     },
     "military": {
         "militaryStatusTitle": "Estado militar",

webroot/src/models/License/License.model.spec.ts

@@ -145,6 +145,19 @@ describe('License model', () => {
             },
         ]);
     });
+    it('should create a License with specific values (custom displayName delimiter)', () => {
+        const data = {
+            issueState: new State({ abbrev: 'co' }),
+            licenseType: LicenseType.AUDIOLOGIST,
+        };
+        const license = new License(data);
+
+        // Test field values
+        expect(license).to.be.an.instanceof(License);
+
+        // Test methods
+        expect(license.displayName(' ... ')).to.equal('Colorado ... AUD');
+    });
     it('should create a License with specific values through serializer', () => {
         const data = {
             compact: CompactType.ASLP,

webroot/src/models/License/License.model.ts

@@ -141,8 +141,8 @@ export class License implements InterfaceLicense {
         return upperCaseAbbrev;
     }
 
-    public displayName(): string {
-        return `${this.issueState?.name() || ''}${this.issueState?.name() && this.licenseTypeAbbreviation() ? ' - ' : ''}${this.licenseTypeAbbreviation()}`;
+    public displayName(delimiter = ' - '): string {
+        return `${this.issueState?.name() || ''}${this.issueState?.name() && this.licenseTypeAbbreviation() ? delimiter : ''}${this.licenseTypeAbbreviation()}`;
     }
 
     public historyWithFabricatedEvents(): Array<LicenseHistoryItem> {

webroot/src/pages/LicenseeDashboard/LicenseeDashboard.less

@@ -24,13 +24,16 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        width: 100%;
+        padding: 0 4rem;
 
-        @media @tabletWidth {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
+        @media @desktopWidth {
+            align-items: flex-start;
             justify-content: space-between;
-            width: 100%;
+        }
+
+        @media @largeDesktopWidth {
+            flex-direction: row;
         }
 
         .welcome-user {
@@ -41,39 +44,57 @@
 
         .button-block {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
+            align-items: flex-start;
+            width: 100%;
             margin-top: 2rem;
 
-            .view-military-btn {
-                margin-right: 1rem;
+            @media @desktopWidth {
+                flex-direction: row;
+            }
 
-                &:deep(input) {
-                    padding-right: 1rem;
-                    padding-left: 1rem;
-                }
+            @media @largeDesktopWidth {
+                width: auto;
+                margin-top: 0;
+                margin-left: auto;
+            }
 
-                @media @tabletWidth {
-                    margin-right: 2rem;
+            .btn-container {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                margin-bottom: 1.2rem;
 
-                    &:deep(input) {
-                        padding-right: 2.4rem;
-                        padding-left: 2.4rem;
+                @media @desktopWidth {
+                    width: 100%;
+
+                    &:not(:first-child) {
+                        margin-left: 1.8rem;
                     }
                 }
-            }
 
-            .obtain-priv-btn {
-                &:deep(input) {
-                    padding-right: 1rem;
-                    padding-left: 1rem;
+                @media @largeDesktopWidth {
+                    width: auto;
                 }
 
-                @media @tabletWidth {
+                .btn {
+                    width: 100%;
+                    margin-bottom: 0.4rem;
+
+                    @media @largeDesktopWidth {
+                        width: auto;
+                    }
+
                     &:deep(input) {
-                        padding-right: 2.4rem;
-                        padding-left: 2.4rem;
+                        width: 100%;
                     }
                 }
+
+                .btn-subtext {
+                    color: darken(@darkGrey, 10%);
+                    font-size: 1.2rem;
+                    text-align: right;
+                }
             }
         }
     }