From d85829f83e643c3e2ec3b82c22caf0ba6a0443df Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Fri, 16 Feb 2024 16:19:47 -0500
Subject: [PATCH] Add  Mask to phone number fields in app

Prevents  1 and 0 from starting a phone number.
---
 src/layouts/bailout-page/bailout-page.vue            | 12 +++++++++++-
 src/layouts/contact-details/contact-details.vue      | 11 +++++++++++
 .../contact-details-drawer.vue                       | 12 +++++++++++-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/layouts/bailout-page/bailout-page.vue b/src/layouts/bailout-page/bailout-page.vue
index 87797893..4a60c8e9 100644
--- a/src/layouts/bailout-page/bailout-page.vue
+++ b/src/layouts/bailout-page/bailout-page.vue
@@ -39,7 +39,7 @@
                     inputId="phoneNumberField"
                     cmsWidgetName="PhoneNumberQuestion"
                     isRequired
-                    mask="###-###-####"
+                    :mask="mask"
                     disableAutoFill
                     :validationRules="rules.phoneNumber" />
                 <textboxQuestion
@@ -175,6 +175,16 @@ export default {
         },
         canNavigateBack() {
             return canNavigateBackFromBailout();
+        },
+        mask() {
+            return {
+                mask: 'x##-###-####',
+                tokens: {
+                    x: {
+                        pattern: /[2-9]/
+                    }
+                }
+            };
         }
     },
     methods: {
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 0eb117bc..1dc05b8e 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -46,6 +46,7 @@
                         inputId="phoneNumber"
                         :cmsWidgetName="widget.phoneNumberQuestion"
                         isRequired
+                        :mask="mask"
                         :validationRules="rules.phoneNumber" />
                     <checkbox
                         ref="requestTextUpdatesCheckbox"
@@ -179,6 +180,16 @@ export default {
          */
         textUpdateDisclaimerText() {
             return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
+        },
+        mask() {
+            return {
+                mask: 'x##-###-####',
+                tokens: {
+                    x: {
+                        pattern: /[2-9]/
+                    }
+                }
+            };
         }
     },
     methods:
diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
index b66f4c8a..fd5ab900 100644
--- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
+++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
@@ -38,7 +38,7 @@
                 inputId="phoneNumber"
                 :cmsWidgetName="widget.phoneNumberQuestion"
                 isRequired
-                mask="###-###-####"
+                :mask="mask"
                 disableAutoFill
                 :validationRules="rules.phoneNumber" />
         </template>
@@ -101,6 +101,16 @@ export default {
         },
         footerButtonText() {
             return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+        },
+        mask() {
+            return {
+                mask: 'x##-###-####',
+                tokens: {
+                    x: {
+                        pattern: /[2-9]/
+                    }
+                }
+            };
         }
     },
     methods: {