jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/SSR-1118

Browse source
This commit is contained in:
Katie Kroell 2024-03-18 09:11:34 -04:00
commit 2fec3d5891
9 changed files with 58 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
package-lock.json generated
View file

@ -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",
"resolved": "https://registry.npmjs.org/maska/-/maska-1.5.0.tgz",
"integrity": "sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q=="
"version": "2.1.11",
"resolved": "https://registry.npmjs.org/maska/-/maska-2.1.11.tgz",
"integrity": "sha512-IGqWjBnKxMYcVa06pb4mPfag9sJjnR2T15CdGfQ2llR3gajiSd4AxXCvNqHMEq9W3UBhjjTazgWumsP3sWrUSg=="
},
"node_modules/mdn-data": {
"version": "2.0.14",

4
package.json
View file

@ -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",
@ -61,4 +61,4 @@
"vitest": "^0.33.0",
"volar-service-vetur": "latest"
}
}
}

15
src/constants/maska-masks.js Normal file
View file

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

21
src/digital-components/textbox-question/textbox-question.vue
View file

@ -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: {

14
src/layouts/bailout-page/bailout-page.vue
View file

@ -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() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
},
methods: {

14
src/layouts/contact-details/contact-details.vue
View file

@ -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() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
},
methods:

14
src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
View file

@ -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() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
},
methods: {

14
src/layouts/welcome-page/welcome-page.vue
View file

@ -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() {
return {
mask: 'x##-###-####',
tokens: {
x: {
pattern: /[2-9]/
}
}
};
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
},
methods: {

4
src/main.js
View file

@ -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);