Feat/display license type

webroot/src/components/Icons/LicenseIcon/LicenseIcon.less

@@ -0,0 +1,6 @@
+//
+//  LicenseIcon.less
+//  CompactConnect
+//
+//  Created by InspiringApps on 2/16/2025.
+//

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

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

webroot/src/components/Icons/LicenseIcon/LicenseIcon.ts

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

webroot/src/components/Icons/LicenseIcon/LicenseIcon.vue

@@ -0,0 +1,28 @@
+<!--
+    LicenseIcon.vue
+    CompactConnect
+
+    Created by InspiringApps on 2/16/2025.
+-->
+
+<template>
+    <svg class="license" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M2.4436 15.6226C1.47711 15.6226 0.693604 14.8391
+        0.693604 13.8726L0.693604 2.16699C0.693604 1.20049 1.47711 0.416993 2.4436 0.416993L17.2284
+        0.416992C18.1949 0.416992 18.9784 1.20049 18.9784 2.16699V13.8726C18.9784 14.8391 18.1949
+        15.6226 17.2284 15.6226H2.4436ZM2.1936 13.8726C2.1936 14.0106 2.30553 14.1226 2.4436 14.1226H17.2284C17.3665
+        14.1226 17.4784 14.0106 17.4784 13.8726V2.16699C17.4784 2.02892 17.3665 1.91699 17.2284 1.91699L2.4436
+        1.91699C2.30553 1.91699 2.1936 2.02892 2.1936 2.16699L2.1936 13.8726ZM6.13233 4.79297C6.13233 4.37876 6.46811
+        4.04297 6.88233 4.04297L12.7897 4.04297C13.2039 4.04297 13.5397 4.37875 13.5397 4.79297C13.5397 5.20718 13.2039
+        5.54297 12.7897 5.54297L6.88233 5.54297C6.46811 5.54297 6.13233 5.20718 6.13233 4.79297ZM7.4834 10.8101C7.4834
+        10.3958 7.81919 10.0601 8.2334 10.0601H11.4388C11.853 10.0601 12.1888 10.3958 12.1888 10.8101C12.1888 11.2243
+        11.853 11.5601 11.4388 11.5601H8.2334C7.81919 11.5601 7.4834 11.2243 7.4834 10.8101ZM5.26563 6.98047C4.85141
+        6.98047 4.51563 7.31626 4.51563 7.73047C4.51563 8.14468 4.85141 8.48047 5.26563 8.48047L14.4065 8.48047C14.8207
+        8.48047 15.1565 8.14468 15.1565 7.73047C15.1565 7.31625 14.8207 6.98047 14.4065 6.98047L5.26563 6.98047ZM4.8523
+        13.1323C5.72508 13.1323 6.43262 12.4248 6.43262 11.552C6.43262 10.6792 5.72508 9.97168 4.8523 9.97168C3.97951
+        9.97168 3.27197 10.6792 3.27197 11.552C3.27197 12.4248 3.97951 13.1323 4.8523 13.1323Z" />
+    </svg>
+</template>
+
+<script lang="ts" src="./LicenseIcon.ts"></script>
+<style scoped lang="less" src="./LicenseIcon.less"></style>

webroot/src/components/LicenseCard/LicenseCard.less

@@ -6,47 +6,55 @@
 //
 .license-card-container {
     width: 30rem;
-    height: 20rem;
-    padding: 2.5rem 2rem 2rem 2rem;
+    padding: 2rem 2rem 1.6rem 2rem;
     border-radius: 2rem;
     color: #2d2d2d;
     background-color: @lightBlue;
 
     .license-title-row {
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
 
-        .license-heading-text {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            padding-left: 1rem;
+        .license-title {
+            font-weight: @fontWeightBold;
+        }
+    }
 
-            .license-title {
-                font-size: @fontSizeLarge;
-            }
+    .license-icon-container {
+        width: 3rem;
 
-            .license-number {
-                font-size: @fontSizeSmall;
-            }
+        .license-logo {
+            width: 100%;
         }
 
-        .license-logo-container {
-            width: 3rem;
+        :deep(path) {
+            fill: @black;
+        }
+    }
 
-            .license-logo {
-                width: 100%;
-            }
+    .license-heading-text {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-top: 0.4rem;
+
+        .state-title {
+            font-weight: @fontWeightBold;
+            font-size: @fontSizeLarge;
+        }
+
+        .occupation-abbrev {
+            font-size: @fontSizeSmall;
         }
     }
 
     .license-info-grid {
         display: grid;
-        grid-template-columns: 1fr 2fr;
+        grid-template-columns: 1fr 1fr;
         margin-top: 1rem;
-        column-gap: 6rem;
-        row-gap: 3rem;
+        column-gap: 4rem;
+        row-gap: 1.6rem;
 
         .info-item-container {
             .info-item-title {
@@ -56,8 +64,10 @@
             }
 
             .info-item {
+                max-width: 11.2rem;
                 font-size: 1.4rem;
                 line-height: 2.1rem;
+                word-wrap: break-word;
             }
         }
     }
@@ -77,6 +87,14 @@
     font-style: italic;
 }
 
+.bold {
+    font-weight: @fontWeightBold;
+}
+
 .error {
     color: @midRed;
 }
+
+.left-marg {
+    margin-left: 1rem;
+}

webroot/src/components/LicenseCard/LicenseCard.ts

@@ -10,15 +10,20 @@ import {
     toNative,
     Prop
 } from 'vue-facing-decorator';
+import LicenseIcon from '@components/Icons/LicenseIcon/LicenseIcon.vue';
 import { License, LicenseStatus } from '@/models/License/License.model';
 import { State } from '@/models/State/State.model';
 import moment from 'moment';
 
 @Component({
     name: 'LicenseCard',
+    components: {
+        LicenseIcon
+    }
 })
 class LicenseCard extends Vue {
     @Prop({ required: true }) license?: License;
+    @Prop({ default: false }) shouldIncludeLogo?: boolean;
 
     //
     // Computed
@@ -37,10 +42,6 @@ class LicenseCard extends Vue {
         return Boolean(this.license && this.license.statusState === LicenseStatus.ACTIVE);
     }
 
-    get stateTitle(): string {
-        return this.$t('licensing.state');
-    }
-
     get state(): State | null {
         return this.license?.issueState || null;
     }
@@ -73,8 +74,8 @@ class LicenseCard extends Vue {
         return this.$t('licensing.noDiscipline');
     }
 
-    get licenseTitle(): string {
-        return this.$t('licensing.license');
+    get licenseTitleDisplay(): string {
+        return this.$t('licensing.license').toUpperCase();
     }
 
     get licenseNumber(): string {
@@ -97,6 +98,10 @@ class LicenseCard extends Vue {
 
         return isPastDate;
     }
+
+    get occupationDisplay(): string {
+        return this.license?.occupationAbbreviation() || '';
+    }
 }
 
 export default toNative(LicenseCard);

webroot/src/components/LicenseCard/LicenseCard.vue

@@ -8,27 +8,22 @@
 <template>
     <div class="license-card-container">
         <div class="license-title-row">
-            <div class="license-logo-container">
-                <img
-                    class="license-logo"
-                    src="@assets/images/black-ellipse.svg"
-                    alt="License Card Logo"
-                />
-            </div>
-            <div class="license-heading-text">
-                <div class="license-title">
-                    {{licenseTitle}}
-                </div>
-                <div class="license-number">
-                    {{licenseNumber}}
-                </div>
+            <div v-if="shouldIncludeLogo" class="license-icon-container">
+                <LicenseIcon />
+            </div>
+            <div class="license-title" :class="{'left-marg': shouldIncludeLogo}">
+                {{licenseTitleDisplay}}
             </div>
         </div>
-        <div class="license-info-grid">
-            <div class="info-item-container">
-                <div class="info-item-title">{{stateTitle}}</div>
-                <div class="info-item">{{stateContent}}</div>
+        <div class="license-heading-text">
+            <div class="state-title">
+                {{stateContent}}
+            </div>
+            <div class="occupation-abbrev">
+                {{occupationDisplay}}
             </div>
+        </div>
+        <div class="license-info-grid">
             <div class="info-item-container">
                 <div class="info-item-title">{{issuedTitle}}</div>
                 <div class="info-item">{{issuedContent}}</div>
@@ -37,12 +32,16 @@
                 <div class="info-item-title">{{expiresTitle}}</div>
                 <div class="info-item" :class="{ 'error': isPastExiprationDate }">{{expiresContent}}</div>
             </div>
+            <div class="info-item-container">
+                <div class="info-item-title">{{$t('licensing.licenseNumSymbol')}}</div>
+                <div class="info-item">{{licenseNumber}}</div>
+            </div>
             <div class="info-item-container">
                 <div class="info-item-title">{{disciplineTitle}}</div>
                 <div class="info-item">{{disciplineContent}}</div>
             </div>
         </div>
-        <div class="license-status" :class="{ 'italics': !isActive }">
+        <div class="license-status" :class="{'italics': !isActive, 'bold': isActive }">
             {{statusDisplay}}
         </div>
     </div>

webroot/src/components/PrivilegeCard/PrivilegeCard.less

@@ -12,22 +12,22 @@
     .privilege-title-row {
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
-        padding: 2rem 2rem 1rem 2rem;
+        padding: 1rem 2rem 1rem 2rem;
         border-top-left-radius: 2rem;
         border-top-right-radius: 2rem;
         color: @white;
         background-color: @primaryColor;
 
         .privilege-title {
+            margin-bottom: 0.2rem;
+            font-weight: @fontWeightBold;
             font-size: @fontSizeLarge;
         }
 
         .privilege-status {
-            &.expired {
-                font-style: italic;
-            }
+            font-size: @fontSizeMedium;
         }
     }
 
@@ -36,7 +36,7 @@
         grid-template-columns: 1fr 1fr;
         padding: 1rem 2rem;
         column-gap: 4rem;
-        row-gap: 3rem;
+        row-gap: 2rem;
 
         .info-item-container {
             &.discipline-item {
@@ -50,13 +50,19 @@
             }
 
             .info-item {
+                max-width: 11.2rem;
                 font-size: 1.4rem;
                 line-height: 2.1rem;
+                word-wrap: break-word;
             }
         }
     }
 }
 
+.bold {
+    font-weight: @fontWeightBold;
+}
+
 .italics {
     font-style: italic;
 }

webroot/src/components/PrivilegeCard/PrivilegeCard.ts

@@ -11,6 +11,7 @@ import {
     Prop
 } from 'vue-facing-decorator';
 import { License, LicenseStatus } from '@/models/License/License.model';
+import { Licensee } from '@/models/Licensee/Licensee.model';
 import { State } from '@/models/State/State.model';
 import moment from 'moment';
 
@@ -19,6 +20,7 @@ import moment from 'moment';
 })
 class PrivilegeCard extends Vue {
     @Prop({ required: true }) privilege?: License;
+    @Prop({ required: true }) licensee?: Licensee;
 
     //
     // Computed
@@ -89,6 +91,16 @@ class PrivilegeCard extends Vue {
 
         return isPastDate;
     }
+
+    get occupationAbbrev(): string {
+        const bestHomeStateLicense = this.licensee?.bestHomeStateLicense() || new License();
+
+        return bestHomeStateLicense?.occupationAbbreviation();
+    }
+
+    get privilegeId(): string {
+        return this.privilege?.privilegeId || '';
+    }
 }
 
 export default toNative(PrivilegeCard);