Merge pull request #1537 from Safelite/feature/CSR-1393.1

focus on input

src/layouts/payment-method/payment-method.vue

@@ -33,7 +33,6 @@
                         class="pb-2"
                         v-model="lineItems"
                         :availableVaps="availableVaps"
-                        linkWidgetName="PromoLinkWidget"
                         modalWidgetName="PromoModalWidget" />
 
                     <hr class="mb-5" />

src/layouts/payment-method/promo-modal-question/promo-modal-question.spec.js

@@ -14,13 +14,8 @@ jest.mock("@/digital-components/modal/modal", () => ({
     },
 }));
 
-const linkWidgetName = "linkWidgetName";
 const modalWidgetName = "modalWidgetName";
 
-const mockLinkCmsContent = {
-    BodyText: "Sample link body text here.",
-};
-
 const mockModalCmsContent = {
     FooterText: "Sample modal footer text here.",
 };
@@ -28,10 +23,6 @@ const mockModalCmsContent = {
 const mockMixin = {
     methods: {
         getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-            if (widgetName === linkWidgetName) {
-                return mockLinkCmsContent[cmsFieldName];
-            }
-
             if (widgetName === modalWidgetName) {
                 return mockModalCmsContent[cmsFieldName];
             }
@@ -48,7 +39,6 @@ describe("promo-modal-question.vue", () => {
         const wrapper = mount(promoModalQuestion, {
             mixins: [mockMixin],
             props: {
-                linkWidgetName: linkWidgetName,
                 modalWidgetName: modalWidgetName,
             },
             attachTo: document.body,
@@ -74,7 +64,6 @@ describe("promo-modal-question.vue", () => {
             mixins: [mockMixin],
             props: {
                 modelValue: lineItems,
-                linkWidgetName: linkWidgetName,
                 modalWidgetName: modalWidgetName,
             },
             attachTo: document.body,

src/layouts/payment-method/promo-modal-question/promo-modal-question.vue

@@ -10,12 +10,14 @@
             :ref="modalName"
             :headerText="modalHeaderText"
             :onModalClosedCallback="onModalClosed"
+            :onModalOpenedCallback="focusOnPromoInput"
             :footerButtonText="modalFooterText"
             @footer-button-event="addPromoCode">
             <promoQuestion
                 ref="promoQuestion"
                 customInputId="promoCode"
                 v-model="promoCode"
+                v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
                 cmsWidgetName="PromoQuestionWidget" />
             <alert
                 ref="alertInvalidPromo"
@@ -74,13 +76,12 @@ export default {
     },
     props: {
         modelValue: Object,
-        linkWidgetName: String,
         modalWidgetName: String,
         availableVaps: Object,
     },
     computed: {
         promoLinkText() {
-            return this.getCmsContent(this.linkWidgetName, "BodyText");
+            return this.getCmsContent(this.modalWidgetName, "HeaderText");
         },
         modalHeaderText() {
             return this.getCmsContent("PromoQuestionWidget", "QuestionText");
@@ -127,6 +128,9 @@ export default {
         getPromoCode() {
             return this.lineItems.promos?.[0].promoCode;
         },
+        onInputIdAssigned(inputId) {
+            this.promoTextInputId = inputId;
+        },
         openModal() {
             this.modal.openModal();
         },