Merge branch 'develop' into feature/SSR-1118

package-lock.json

@@ -12,7 +12,7 @@
         "axios-retry": "^3.5.0",
         "bootstrap": "^5.3",
         "iframe-resizer": "^4.3.9",
-        "maska": "^1.5.0",
+        "maska": "^2.1.1",
         "pinia": "^2.1.4",
         "pinia-plugin-persistedstate": "^2.2.0",
         "uuid": "^9.0.1",
@@ -13947,9 +13947,9 @@
       }
     },
     "node_modules/maska": {
-      "version": "1.5.0",
+      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/maska/-/maska-1.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-2.1.11.tgz",
-      "integrity": "sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q=="
+      "integrity": "sha512-IGqWjBnKxMYcVa06pb4mPfag9sJjnR2T15CdGfQ2llR3gajiSd4AxXCvNqHMEq9W3UBhjjTazgWumsP3sWrUSg=="
     },
     "node_modules/mdn-data": {
       "version": "2.0.14",

package.json

@@ -19,7 +19,7 @@
     "axios-retry": "^3.5.0",
     "bootstrap": "^5.3",
     "iframe-resizer": "^4.3.9",
-    "maska": "^1.5.0",
+    "maska": "^2.1.1",
     "pinia": "^2.1.4",
     "pinia-plugin-persistedstate": "^2.2.0",
     "uuid": "^9.0.1",

src/constants/maska-masks.js

@@ -0,0 +1,15 @@
+const MaskaFormattedMasks = {
+    PHONE_NUMBER: {
+        mask: 'x##-###-####',
+        tokens: {
+            token: 'x',
+            pattern: '[2-9]'
+        }
+    },
+    ZIPCODE: {
+        mask: '#####',
+        tokens: null
+    }
+};
+
+export default MaskaFormattedMasks;

src/digital-components/textbox-question/textbox-question.vue

@@ -19,7 +19,9 @@
                 :id="inputId"
                 :ref="inputId"
                 v-model.trim="value"
-                v-maska="mask"
+                v-maska
+                :data-maska="getMaskFromProp"
+                :data-maska-tokens="getTokensFromProp"
                 class="form-control"
                 :type="type"
                 :name="inputId"
@@ -97,7 +99,7 @@ export default {
         iconRight: Boolean, // Place icon on right side of text input, otherwise default is left if hasIcon prop is used
         hasError: Boolean,
         mask: {
-            type: String,
+            type: [String, Object],
             default: ''
         },
         validationRules: String,
@@ -183,6 +185,21 @@ export default {
 
                 return questionText;
             }
+        },
+        getMaskFromProp() {
+            if (this.mask) {
+                if (this.mask.mask) {
+                    return this.mask.mask;
+                }
+                return this.mask;
+            }
+            return null;
+        },
+        getTokensFromProp() {
+            if (this.mask?.tokens) {
+                return `{ '${this.mask.tokens.token}': { 'pattern': '${this.mask.tokens.pattern}' }}`;
+            }
+            return null;
         }
     },
     watch: {

src/layouts/bailout-page/bailout-page.vue

@@ -39,7 +39,7 @@
                     inputId="phoneNumberField"
                     cmsWidgetName="PhoneNumberQuestion"
                     isRequired
-                    :mask="mask"
+                    :mask="phoneMask"
                     disableAutoFill
                     :validationRules="rules.phoneNumber" />
                 <textboxQuestion
@@ -80,6 +80,7 @@ import routerParams from '@/router/router-constants/router-params';
 import canNavigateBackFromBailout from '@/helpers/bailout-helper';
 import BailoutCode from '@/constants/bailoutCode';
 import issPageValues from '@/router/router-constants/issPage-values';
+import MaskaFormattedMasks from '@/constants/maska-masks';
 
 export default {
     name: 'bailout-page',
@@ -176,15 +177,8 @@ export default {
         canNavigateBack() {
             return canNavigateBackFromBailout();
         },
-        mask() {
+        phoneMask() {
-            return {
+            return MaskaFormattedMasks.PHONE_NUMBER;
-                mask: 'x##-###-####',
-                tokens: {
-                    x: {
-                        pattern: /[2-9]/
-                    }
-                }
-            };
         }
     },
     methods: {

src/layouts/contact-details/contact-details.vue

@@ -46,7 +46,7 @@
                         inputId="phoneNumber"
                         :cmsWidgetName="widget.phoneNumberQuestion"
                         isRequired
-                        :mask="mask"
+                        :mask="phoneMask"
                         :validationRules="rules.phoneNumber" />
                     <checkbox
                         ref="requestTextUpdatesCheckbox"
@@ -112,6 +112,7 @@ import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store/index.js';
 import globalRules from '@/constants/global-rules.js';
+import MaskaFormattedMasks from '@/constants/maska-masks';
 
 export default {
     name: 'contact-details',
@@ -181,15 +182,8 @@ export default {
         textUpdateDisclaimerText() {
             return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
         },
-        mask() {
+        phoneMask() {
-            return {
+            return MaskaFormattedMasks.PHONE_NUMBER;
-                mask: 'x##-###-####',
-                tokens: {
-                    x: {
-                        pattern: /[2-9]/
-                    }
-                }
-            };
         }
     },
     methods:

src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue

@@ -38,7 +38,7 @@
                 inputId="phoneNumber"
                 :cmsWidgetName="widget.phoneNumberQuestion"
                 isRequired
-                :mask="mask"
+                :mask="phoneMask"
                 disableAutoFill
                 :validationRules="rules.phoneNumber" />
         </template>
@@ -53,6 +53,7 @@ import textboxQuestion from '@/digital-components/textbox-question/textbox-quest
 // Supporting Files
 import { useMainStore } from '@/store/index.js';
 import globalRules from '@/constants/global-rules.js';
+import MaskaFormattedMasks from '@/constants/maska-masks';
 import widgetFields from '@/constants/cms-widget-fields.js';
 
 export default {
@@ -102,15 +103,8 @@ export default {
         footerButtonText() {
             return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
         },
-        mask() {
+        phoneMask() {
-            return {
+            return MaskaFormattedMasks.PHONE_NUMBER;
-                mask: 'x##-###-####',
-                tokens: {
-                    x: {
-                        pattern: /[2-9]/
-                    }
-                }
-            };
         }
     },
     methods: {

src/layouts/welcome-page/welcome-page.vue

@@ -86,7 +86,7 @@
                                 cmsWidgetName="PhoneNumberQuestion"
                                 :validationRules="rules.phoneNumber"
                                 isRequired
-                                :mask="mask"
+                                :mask="phoneMask"
                                 disableAutoFill />
                         </div>
                     </div>
@@ -197,6 +197,7 @@ import { useMainStore } from '@/store';
 import states from '@/constants/states';
 import globalRules from '@/constants/global-rules';
 import routerParams from '@/router/router-constants/router-params';
+import MaskaFormattedMasks from '@/constants/maska-masks';
 
 // define validation rules
 defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED));
@@ -313,15 +314,8 @@ export default {
         maxCoverageLookupAttemptsReached() {
             return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
         },
-        mask() {
+        phoneMask() {
-            return {
+            return MaskaFormattedMasks.PHONE_NUMBER;
-                mask: 'x##-###-####',
-                tokens: {
-                    x: {
-                        pattern: /[2-9]/
-                    }
-                }
-            };
         }
     },
     methods: {

src/main.js

@@ -4,7 +4,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { useMainStore } from '@/store';
 import baseMixin from '@/mixins/base-mixin';
 import { createPinia } from 'pinia';
-import Maska from 'maska';
+import { vMaska } from 'maska';
 import LoadScript from 'vue-plugin-load-script';
 
 import analyticsMixin from '@/mixins/analytics-mixin';
@@ -29,8 +29,8 @@ useMainStore().populateInitialState();
 
 // Additional Vue items to setup
 vueApp.use(router);
-vueApp.use(Maska);
 vueApp.use(LoadScript);
+vueApp.directive('maska', vMaska);
 vueApp.mixin(baseMixin);
 vueApp.mixin(analyticsMixin);
 vueApp.mixin(experimentMixin);