Merge branch 'develop' into feature/CASH-1042_QA

azure-pipelines.yml

@@ -51,16 +51,7 @@ stages:
                         displayName: Run Prettier check
 
           - stage: TestPr
-            displayName: Run Unit Tests For PullRequest
+            displayName: Run Tests For PullRequest
-            jobs:
-                - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
-                  parameters:
-                      nodeContainer: node
-                      npmLocation: $(Build.SourcesDirectory)
-                      testResultsFile: junit.xml
-                      summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
-          - stage: TestPrPlaywright
-            displayName: Run Playwright Tests For PullRequest
             jobs:
                 - template: temp/playwright-test.yml
                   parameters:
@@ -76,6 +67,12 @@ stages:
                       secrets:
                           CCIS_API_AUTH: $(CCIS_API_AUTH)
                           JIRA_API_KEY: $(JIRA_API_KEY)
+                - template: templates/digital/vue-jest-run-unit-tests.yml@AzureDevOps
+                  parameters:
+                      nodeContainer: node
+                      npmLocation: $(Build.SourcesDirectory)
+                      testResultsFile: junit.xml
+                      summaryFileLocation: $(Build.SourcesDirectory)/coverage/cobertura-coverage.xml
     - ${{ else }}:
           # Dev Build/Deploy
           - stage: Dev

playwright-tests/README.md

@@ -260,7 +260,6 @@ ADMIN_SERVICE_API_URL= <br>
 SAUCE_USERNAME= <br>
 SAUCE_ACCESS_KEY= <br>
 
-
 ## CI/CD Integration
 The project uses Azure Pipelines for continuous integration with configurations defined in azure-pipelines.yml.
 

playwright-tests/tests/0000__M.test.ts

@@ -291,7 +291,6 @@ async function runWorkflow(page: Page, testCase: TestCase) {
     // let serviceLocationPage = testCase.pages.serviceLocationPage;
     // await serviceLocationPage.handleServiceLocationPage(testCase.testData);
 
-
     // Schedule appointment
     let schedulePage = testCase.pages.schedulePage;
     await schedulePage.handleSchedulePage(testCase.testData);

src/digital-components/modal/modal.vue

@@ -32,7 +32,7 @@
                 <div class="modal-footer">
                     <slot name="modal-footer-slot"></slot>
                     <modalButtonMain
-                        isPrimary
+                        :isPrimary="isFooterButtonPrimary"
                         class="w-100 modal-footer-button"
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
@@ -65,6 +65,7 @@ export default {
         suppressPageScroll: Boolean,
         staticBackdrop: Boolean,
         footerButtonDisabled: Boolean,
+        isFooterButtonPrimary: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },

src/digital-components/modal/ux-components/modal-button-main/modal-button-main.vue

@@ -115,14 +115,16 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
         color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
-        &:hover {
+        &:hover,
+        &:active {
             color: $white;
-            @include blue-gradient;
+            background: $blue;
+            border: none;
         }
         &:focus, // Mouse, touch, stylus focus
         &:focus-visible {
@@ -130,16 +132,18 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue;
-            color: $white;
+            color: $blue;
-            @include blue-gradient;
+            &:active {
+                color: $white;
+            }
         }
         &:disabled {
             background: transparent;
             color: $gray-550 !important;
             font-weight: 400;
             height: 48px;
-            border: 1px solid $red;
+            border: 1px solid $blue;
             cursor: pointer;
             pointer-events: all;
         }

src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue

@@ -16,6 +16,7 @@
             suppressPageScroll
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
+            :isFooterButtonPrimary="true"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner" v-html="modalBodyText"></p>
             <saveProgressQuestion

src/fmg-components/save-progress-popup-question/save-progress-popup-question.vue

@@ -6,6 +6,7 @@
             suppressPageScroll
             :onModalClosedCallback="onModalClosed"
             :footerButtonText="modalButtonText"
+            :isFooterButtonPrimary="true"
             @footer-button-event="saveProgress">
             <p class="modal-body-inner">{{ modalBodyText }}</p>
             <saveProgressQuestion

src/layouts/address-lookup/address-lookup.spec.js

@@ -757,7 +757,7 @@ function setupMocks({
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
     const closestShops = {
         data: {
-            providers: [
+            inShopProviders: [
                 { id: 1, name: "Shop 1" },
                 { id: 2, name: "Shop 2" },
             ],

src/layouts/address-lookup/address-lookup.vue

@@ -308,7 +308,7 @@ export default {
                     this.serviceZipCode,
                     this.carId
                 );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                 if (this.displayNoServiceAlert) {
                     return this.$refs.navbar.removeLoader();
                 }

src/layouts/estimate/estimate.vue

@@ -265,6 +265,9 @@ export default {
 .vinlookupquestion p {
     font-size: 1.25rem;
 }
+.header-sub-copy {
+    font-size: 0.875rem;
+}
 .funnel-sub-header {
     padding-bottom: 0;
     h5.dark-header {

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -722,7 +722,7 @@ function setupMocks({
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
     const closestShops = {
         data: {
-            providers: [
+            inShopProviders: [
                 { id: 1, name: "Shop 1" },
                 { id: 2, name: "Shop 2" },
             ],

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -274,7 +274,7 @@ export default {
                     this.serviceZipCode,
                     this.carId
                 );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                 if (this.displayNoServiceAlert) {
                     return this.$refs.navbar.removeLoader();
                 }

src/layouts/quote/quote.vue

@@ -904,7 +904,7 @@ export default {
 
     :deep(.nav-bar) {
         position: initial;
-        button.btn {
+        button {
             width: 100%;
             justify-content: center;
         }

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -178,7 +178,7 @@ export default {
                             "service-location"
                         );
 
-                        if (!closestShops || closestShops.providers?.length === 0) {
+                        if (!closestShops || closestShops.inShopProviders?.length === 0) {
                             this.displayNoServiceAlert = true;
                             this.focusOnZipInput();
                             this.resetModalButtonStyle();

src/layouts/service-zip/service-zip.vue

@@ -265,7 +265,7 @@ export default {
                     this.serviceZipCode,
                     this.carId
                 );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                 if (this.displayNoServiceAlert) {
                     return this.$refs.navbar.removeLoader();
                 }

src/layouts/vin-lookup/vin-lookup.vue

@@ -341,7 +341,7 @@ export default {
                         this.serviceZipCode,
                         this.carId
                     );
-                    this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                    this.displayNoServiceAlert = !closestShops?.data?.inShopProviders?.length;
                     if (this.displayNoServiceAlert) {
                         return this.$refs.navbar.removeLoader();
                     }

src/styles/ux-variables.scss

@@ -123,8 +123,8 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+$font-family-monospace:
-    monospace;
+    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;

src/ux-components/button-main/button-main.vue

@@ -63,9 +63,6 @@ export default {
 
 <style lang="scss">
 .btn {
-    &:first-child:active {
-        background-color: $red;
-    }
     &.btn-primary {
         position: relative;
         background: $red;
@@ -117,8 +114,8 @@ export default {
     &.btn-secondary {
         position: relative;
         background: transparent;
-        border: 1px solid $red;
+        border: 1px solid $blue;
-        color: $red;
+        color: $blue;
         font-weight: 500;
         transition: all 150ms linear;
         height: 3rem;
@@ -131,8 +128,11 @@ export default {
             outline: none;
             box-shadow:
                 0 0 0 3px $white,
-                0 0 0 5.5px $red;
+                0 0 0 5.5px $blue;
-            color: $white;
+            color: $blue;
+            &:hover {
+                color: $white;
+            }
         }
         &:disabled {
             background: transparent;