Merge pull request #2482 from Safelite/rlsmerge/2025.05.08-to-develop

Rlsmerge/2025.05.08 to develop

azure-pipelines.yml

@@ -18,9 +18,11 @@ pr:
 resources:
     containers:
         - container: node
-          image: packagerepository.sagaws.net:8082/safelite/node-build:18
+          image: ghcr.io/safelite/node-build:18
+          endpoint: GitHub Docker
         - container: awscli
-          image: packagerepository.sagaws.net:8082/safelite/awscli2-build:3.9
+          image: ghcr.io/safelite/awscli2-build:3.9
+          endpoint: GitHub Docker
         - container: prettier-node
           image: ghcr.io/safelite/prettier-node-build:23
           endpoint: GitHub Docker

jest.config.js

@@ -3,10 +3,10 @@ module.exports = {
   coverageReporters: ["html", "text", "jest-junit", "cobertura"],
   testResultsProcessor: "jest-junit",
   preset: "@vue/cli-plugin-unit-jest",
-  transform: { "^.+\\.vue$": "@vue/vue3-jest" },
+  transform: { "^.+\\.vue$": "@vue/vue3-jest",
-  transformIgnorePatterns: [
+    "^.+\\.mjs$": "babel-jest",
-    '/node_modules/(?!.*\\.mjs$)',
+  },
-  ],
+  transformIgnorePatterns: ["'/node_modules/(?!vee-validate)"],
   moduleFileExtensions: ["js", "vue"],
   modulePathIgnorePatterns: ["vin-lookup"],
   collectCoverageFrom: [

src/digital-components/date-picker/date-picker.vue

@@ -853,7 +853,7 @@ export default {
         }
     }
     .calendar-grid-container {
-        margin: 0 auto 2rem auto;
+        margin: 0 auto 1rem auto;
         max-width: 400px;
         position: relative;
         transition:
@@ -1075,12 +1075,16 @@ export default {
                         border-radius: 50%;
                         background-color: $black;
                         position: absolute;
-                        top: 28px;
+                        top: 1.875rem;
                     }
                     .first-day {
                         color: $blue;
                     }
                 }
+                input[type="radio"]:checked + label:after {
+                    background-color: $black;
+                    top: 2rem;
+                }
             }
         }
 
@@ -1206,6 +1210,7 @@ export default {
                 }
             }
             label {
+                color: $gray-500;
                 flex-direction: column;
                 height: 2.5rem;
                 width: 100%;
@@ -1228,10 +1233,11 @@ export default {
                 }
             }
             &.current-day {
-                label:after {
+                label {
-                    margin-top: -0.25rem;
+                    font-weight: 600;
-                    position: relative;
+                    font-family: "AvertaSemibold";
-                    top: 0.5rem;
+                    color: $black;
+                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
                 }
             }
         }
@@ -1242,6 +1248,7 @@ export default {
                     color: $black;
                     font-weight: 400;
                     font-family: "AvertaSemibold";
+                    font-size-adjust: 0.5; // needed for Averta fonts baseline alignment
 
                     &.price {
                         font-family: "AvertaRegular";
@@ -1274,7 +1281,6 @@ export default {
         max-width: 100%;
         flex-wrap: wrap;
         gap: 0 0.5rem;
-        justify-content: center;
 
         & > div {
             flex: 0 0 calc(50% - 0.25rem);

src/digital-components/salesforce-webchat/salesforce-helper-dev.js

@@ -0,0 +1,66 @@
+/*
+The code below is generated from salesforce but modified in the following ways:
+  * Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
+  * CSS is not copied in
+  * First <script> tag loading in the file from the CDN is not copied in
+  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+	  and the wrapper exported function `initializeSalesforceWebChatForDev`
+*/
+
+export function initializeSalesforceWebchatForDev() {
+    var initESW = function (gslbBaseURL) {
+        let embedded_svc = window.embedded_svc;
+        embedded_svc.settings.displayHelpButton = true; //Or false
+        embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
+
+        //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
+        //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
+
+        //embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
+        //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
+
+        // Settings for Chat
+        //embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
+        // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
+        // Returns a valid button ID.
+        //};
+        //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
+        //embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
+        //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
+
+        embedded_svc.settings.enabledFeatures = ["LiveAgent"];
+        embedded_svc.settings.entryFeature = "LiveAgent";
+
+        embedded_svc.init(
+            "https://safelite2--dev.sandbox.my.salesforce.com",
+            "https://safelite2--dev.sandbox.my.salesforce-sites.com/chat",
+            gslbBaseURL,
+            "00D6s0000008r6A",
+            "Sales_Central_Snap_in",
+            {
+                baseLiveAgentContentURL:
+                    "https://c.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/content",
+                deploymentId: "572Wr0000017xKX",
+                buttonId: "573Wr000000CpgH",
+                baseLiveAgentURL: "https://d.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/chat",
+                eswLiveAgentDevName:
+                    "EmbeddedServiceLiveAgent_Parent04IWr000003yKq9MAE_1961681659a",
+                isOfflineSupportEnabled: false,
+            }
+        );
+    };
+
+    if (!window.embedded_svc) {
+        var s = document.createElement("script");
+        s.setAttribute(
+            "src",
+            "https://safelite2--dev.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js"
+        );
+        s.onload = function () {
+            initESW(null);
+        };
+        document.body.appendChild(s);
+    } else {
+        initESW("https://service.force.com");
+    }
+}

src/digital-components/salesforce-webchat/salesforce-helper-prod.js

@@ -0,0 +1,63 @@
+/*
+The code below is generated from salesforce but modified in the following ways:
+  * Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
+  * CSS is not copied in
+  * First <script> tag loading in the file from the CDN is not copied in
+  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+	  and the wrapper exported function `initializeSalesforceWebChatForProd`
+*/
+
+export function initializeSalesforceWebchatForProd(embedded_svc) {
+    var initESW = function (gslbBaseURL) {
+        let embedded_svc = window.embedded_svc;
+        embedded_svc.settings.displayHelpButton = true; //Or false
+        embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
+
+        //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
+        //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
+
+        //embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
+        //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
+
+        // Settings for Chat
+        //embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
+        // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
+        // Returns a valid button ID.
+        //};
+        //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
+        //embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
+        //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
+
+        embedded_svc.settings.enabledFeatures = ["LiveAgent"];
+        embedded_svc.settings.entryFeature = "LiveAgent";
+
+        embedded_svc.init(
+            "https://safelite2.my.salesforce.com",
+            "https://safelite2.my.salesforce-sites.com/chat",
+            gslbBaseURL,
+            "00D3t000004nvsT",
+            "Sales_Central_Snap_in",
+            {
+                baseLiveAgentContentURL:
+                    "https://c.la13-core2.sfdc-lywfpd.salesforceliveagent.com/content",
+                deploymentId: "5723t0000008wWB",
+                buttonId: "5733t000000D90z",
+                baseLiveAgentURL: "https://d.la13-core2.sfdc-lywfpd.salesforceliveagent.com/chat",
+                eswLiveAgentDevName:
+                    "EmbeddedServiceLiveAgent_Parent04I3t000000Cq0SEAS_188de1871ea",
+                isOfflineSupportEnabled: false,
+            }
+        );
+    };
+
+    if (!window.embedded_svc) {
+        var s = document.createElement("script");
+        s.setAttribute("src", "https://safelite2.my.salesforce.com/embeddedservice/5.0/esw.min.js");
+        s.onload = function () {
+            initESW(null);
+        };
+        document.body.appendChild(s);
+    } else {
+        initESW("https://service.force.com");
+    }
+}

src/digital-components/salesforce-webchat/salesforce-helper-qa.js

@@ -0,0 +1,67 @@
+/*
+The code below is generated from salesforce but modified in the following ways:
+  * Only the javascript inside the second <script> tag in the provided salesforce code is copy pasted
+  * CSS is not copied in
+  * First <script> tag loading in the file from the CDN is not copied in
+  * The only custom code added here is `let embedded_svc = window.embedded_svc` in the first line of the `initESW` function
+	  and the wrapper exported function `initializeSalesforceWebChatForQa`
+*/
+
+export function initializeSalesforceWebchatForQa() {
+    var initESW = function (gslbBaseURL) {
+        let embedded_svc = window.embedded_svc;
+
+        embedded_svc.settings.displayHelpButton = true; //Or false
+        embedded_svc.settings.language = ""; //For example, enter 'en' or 'en-US'
+
+        //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
+        //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
+
+        //embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
+        //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
+
+        // Settings for Chat
+        //embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
+        // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
+        // Returns a valid button ID.
+        //};
+        //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
+        //embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
+        //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
+
+        embedded_svc.settings.enabledFeatures = ["LiveAgent"];
+        embedded_svc.settings.entryFeature = "LiveAgent";
+
+        embedded_svc.init(
+            "https://safelite2--safeliteua.sandbox.my.salesforce.com",
+            "https://safelite2--safeliteua.sandbox.my.salesforce-sites.com/chat",
+            gslbBaseURL,
+            "00DDJ000000HRqO",
+            "Sales_Central_Snap_in",
+            {
+                baseLiveAgentContentURL:
+                    "https://c.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/content",
+                deploymentId: "572DJ00000001j3",
+                buttonId: "573DJ00000001ur",
+                baseLiveAgentURL: "https://d.la12s-core1.sfdc-8tgtt5.salesforceliveagent.com/chat",
+                eswLiveAgentDevName:
+                    "EmbeddedServiceLiveAgent_Parent04IDJ0000008OZk2AM_1883057c9a6",
+                isOfflineSupportEnabled: false,
+            }
+        );
+    };
+
+    if (!window.embedded_svc) {
+        var s = document.createElement("script");
+        s.setAttribute(
+            "src",
+            "https://safelite2--safeliteua.sandbox.my.salesforce.com/embeddedservice/5.0/esw.min.js"
+        );
+        s.onload = function () {
+            initESW(null);
+        };
+        document.body.appendChild(s);
+    } else {
+        initESW("https://service.force.com");
+    }
+}

src/digital-components/salesforce-webchat/salesforce-helper.spec.js

@@ -0,0 +1,43 @@
+import * as salesforceWebchatHelperdev from "./salesforce-helper-dev";
+import * as salesforceWebchatHelperqa from "./salesforce-helper-qa";
+import * as salesforceWebchatHelperprod from "./salesforce-helper-prod";
+
+const mockEmbeddedSvc = {
+    settings: {},
+    init: jest.fn(),
+    testFlag: true,
+};
+
+describe("Salesforce Webchat Helper Tests", () => {
+    describe("Files and exposed methods exist", () => {
+        it("exposes initialization methods", () => {
+            expect(typeof salesforceWebchatHelperdev.initializeSalesforceWebchatForDev).toBe(
+                "function"
+            );
+            expect(typeof salesforceWebchatHelperqa.initializeSalesforceWebchatForQa).toBe(
+                "function"
+            );
+            expect(typeof salesforceWebchatHelperprod.initializeSalesforceWebchatForProd).toBe(
+                "function"
+            );
+        });
+    }),
+        describe("Custom code added correctly", () => {
+            it("defines a local variable 'embedded_svc' in the initESW method", () => {
+                mockEmbeddedSvc.testFlag = "dev";
+                window.embedded_svc = mockEmbeddedSvc;
+                salesforceWebchatHelperdev.initializeSalesforceWebchatForDev();
+                expect(embedded_svc.testFlag).toBe("dev");
+
+                mockEmbeddedSvc.testFlag = "qa";
+                window.embedded_svc = mockEmbeddedSvc;
+                salesforceWebchatHelperqa.initializeSalesforceWebchatForQa();
+                expect(embedded_svc.testFlag).toBe("qa");
+
+                mockEmbeddedSvc.testFlag = "prod";
+                window.embedded_svc = mockEmbeddedSvc;
+                salesforceWebchatHelperprod.initializeSalesforceWebchatForProd();
+                expect(embedded_svc.testFlag).toBe("prod");
+            });
+        });
+});

src/digital-components/salesforce-webchat/salesforce-webchat.spec.js

@@ -0,0 +1,43 @@
+import { shallowMount } from "@vue/test-utils";
+import salesforceWebchat from "./salesforce-webchat.vue";
+import * as devHelper from "./salesforce-helper-dev";
+import * as qaHelper from "./salesforce-helper-qa";
+import * as prodHelper from "./salesforce-helper-prod";
+import { applicationConfig } from "../../constants/application-config";
+
+describe("salesforceWebchat.vue", () => {
+    it("renders correctly", () => {
+        const wrapper = shallowMount(salesforceWebchat);
+        expect(wrapper.exists()).toBe(true);
+    });
+
+    it("has the correct default data", () => {
+        const wrapper = shallowMount(salesforceWebchat);
+        expect(wrapper.vm.$data).toEqual({});
+    });
+
+    it("has the correct default props", () => {
+        const wrapper = shallowMount(salesforceWebchat);
+        expect(wrapper.props().hideSalesforceWebchatLaunchButton).toBe(false);
+    });
+
+    it("calls the correct initialization function based on environment", () => {
+        applicationConfig.CURRENT_ENVIRONMENT = "Prod";
+        let wrapper = shallowMount(salesforceWebchat);
+        const mockProd = jest.spyOn(prodHelper, "initializeSalesforceWebchatForProd");
+        wrapper.vm.initializeSalesforceWebchat();
+        expect(mockProd).toHaveBeenCalled();
+
+        applicationConfig.CURRENT_ENVIRONMENT = "QA";
+        wrapper = shallowMount(salesforceWebchat);
+        const mockQa = jest.spyOn(qaHelper, "initializeSalesforceWebchatForQa");
+        wrapper.vm.initializeSalesforceWebchat();
+        expect(mockQa).toHaveBeenCalled();
+
+        applicationConfig.CURRENT_ENVIRONMENT = "Dev";
+        wrapper = shallowMount(salesforceWebchat);
+        const mockDev = jest.spyOn(devHelper, "initializeSalesforceWebchatForDev");
+        wrapper.vm.initializeSalesforceWebchat();
+        expect(mockDev).toHaveBeenCalled();
+    });
+});

src/digital-components/salesforce-webchat/salesforce-webchat.vue

@@ -0,0 +1,60 @@
+<template>
+    <span class="salesforce-webchat"></span>
+</template>
+
+<script>
+// Supporting files
+import { initializeSalesforceWebchatForDev } from "./salesforce-helper-dev";
+import { initializeSalesforceWebchatForQa } from "./salesforce-helper-qa";
+import { initializeSalesforceWebchatForProd } from "./salesforce-helper-prod";
+import { applicationConfig } from "@/constants/application-config";
+
+export default {
+    name: "salesforceWebchat",
+    data() {
+        return {};
+    },
+    props: {
+        hideSalesforceWebchatLaunchButton: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    mounted() {
+        // Load in script from salesforce CDN
+        const script = document.createElement("script");
+        script.src = "https://service.force.com/embeddedservice/5.0/esw.min.js";
+        script.onload = this.initializeSalesforceWebchat;
+        document.body.appendChild(script);
+    },
+    methods: {
+        initializeSalesforceWebchat() {
+            switch (applicationConfig.CURRENT_ENVIRONMENT) {
+                case "Prod":
+                    initializeSalesforceWebchatForProd();
+                    break;
+                case "QA":
+                case "SysTest":
+                    initializeSalesforceWebchatForQa();
+                    break;
+                case "Dev":
+                case "Localhost":
+                    initializeSalesforceWebchatForDev();
+                    break;
+            }
+        },
+    },
+    computed: {},
+    components: {},
+};
+</script>
+
+<style type="text/css">
+.embeddedServiceHelpButton .helpButton .uiButton {
+    background-color: #167cac;
+    font-family: "Arial", sans-serif;
+}
+.embeddedServiceHelpButton .helpButton .uiButton:focus {
+    outline: 1px solid #167cac;
+}
+</style>

src/fmg-components/funnel-header/funnel-header.vue

@@ -2,6 +2,7 @@
     <div
         class="funnel-header d-flex justify-content-center align-items-center flex-column"
         v-if="imageSrc">
+        <!-- HIDDEN FOR 05.08 <salesforceWebchat hideSalesforceWebchatLaunchButton />-->
         <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
         <!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
         <menuModal />
@@ -27,6 +28,7 @@ import alert from "@/ux-components/alert/alert";
 import eventBus from "@/helpers/event-bus/event-bus";
 import { globalEvents } from "@/constants/events";
 import menuModal from "@/fmg-components/funnel-header/menu-modal/menu-modal";
+import salesforceWebchat from "../../digital-components/salesforce-webchat/salesforce-webchat.vue";
 import progressBar from "@/fmg-components/funnel-header/progress-bar/progress-bar";
 
 // Constants
@@ -41,6 +43,10 @@ export default {
     },
     props: {
         cmsWidgetName: String,
+        hideSalesforceWebchatLaunchButton: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         imageSrc() {
@@ -64,6 +70,7 @@ export default {
     components: {
         alert,
         menuModal,
+        salesforceWebchat,
         progressBar,
     },
     mounted() {
@@ -98,7 +105,7 @@ export default {
 }
 .funnel-header {
     position: relative;
-    padding: 0.97rem 0;
+    padding-top: 0.97rem;
 }
 
 .logo-image {

src/fmg-components/funnel-header/progress-bar/progress-bar.vue

@@ -25,7 +25,7 @@ export default {
 </script>
 <style lang="scss">
 #progress-bar-container {
-    padding: 0.75rem 0;
+    padding-top: 0.75rem;
     width: 100%;
 
     progress {

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

@@ -182,6 +182,23 @@ describe("address-lookup.vue", () => {
             // Assert
             expect(wrapper.findComponent({ ref: "alertVinNotFound" }).isVisible()).toBe(true);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Ensure displayNoServiceAlert is false
+            await wrapper.setData({ displayNoServiceAlert: false });
+            await wrapper.vm.forwardButtonAction();
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("navigation", () => {
@@ -741,6 +758,17 @@ function setupMocks({
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+    const closestShops = {
+        data: {
+            providers: [
+                { id: 1, name: "Shop 1" },
+                { id: 2, name: "Shop 2" },
+            ],
+        },
+    };
 
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return new Promise((resolve) => resolve(closestShops));
+    });
     return { wrapper };
 }

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

@@ -81,13 +81,20 @@
                             </div>
                         </div>
                     </transition>
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
                         :isDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
                         @back-clicked="backButtonAction"
-                        :isForwardActionDisabled="!meta.valid" />
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert" />
                 </div>
             </div>
         </div>
@@ -177,6 +184,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -293,6 +301,17 @@ export default {
                 return this.$refs.navbar.removeLoader();
             }
             this.displayInvalidZipAlert = false;
+
+            if (this.serviceZipCode != null && this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
             const carsFound = resultMap.vinLookupResponse.vinVehicles;
 
             // Handle cases for different amounts of VINS found for the address.
@@ -444,6 +463,7 @@ export default {
             this.displayNonServiceableZipAlert = false;
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -495,12 +515,13 @@ export default {
             handler(newValue) {
                 // If they modify the service zip code, then hide the error message.
                 this.displayNonServiceableZipAlert = false;
+                this.displayNoServiceAlert = false;
             },
         },
         showServiceZipField: {
             handler(newValue) {
-                // If the Service Zip Code field is ever hidden, clear out it's value
+                // If the Service Zip Code field is ever hidden and not a heavy truck, clear out it's value
-                if (!newValue) {
+                if (!newValue && !this.isHeavyTruck) {
                     this.serviceZipCode = null;
                 }
             },

src/layouts/confirmation/confirmation.vue

@@ -5,7 +5,10 @@
                 <div class="container-fluid pb-2">
                     <div class="row justify-content-center">
                         <div class="col-md-6">
-                            <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                            <funnelHeader
+                                cmsWidgetName="FunnelHeaderWidget"
+                                ref="funnelHeader"
+                                hideSalesforceWebchatLaunchButton />
                         </div>
                     </div>
                     <div class="row justify-content-center">

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

@@ -620,6 +620,8 @@ function setupMocks({
     validateZipResponse = { zipCodeCtu: null, isServiceable: false, isValid: true, state: null },
     //Values to set in the state store
     carId = null,
+    isHeavyTruck = true,
+    displayNoServiceAlert = true,
     serviceLocationZipCode = null,
     registrationZipCode = null,
     licensePlate = null, //"TESTPLATE",
@@ -672,6 +674,8 @@ function setupMocks({
                         zipCode: registrationZipCode,
                     },
                     carId: carId,
+                    isBigTruck: isHeavyTruck,
+                    canSafeliteService: true,
                 },
                 order: {
                     customer: {
@@ -716,5 +720,17 @@ function setupMocks({
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => "");
     wrapper.vm.$refs.navbar.updateButtonText = jest.fn();
     wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+    const closestShops = {
+        data: {
+            providers: [
+                { id: 1, name: "Shop 1" },
+                { id: 2, name: "Shop 2" },
+            ],
+        },
+    };
+
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return new Promise((resolve) => resolve(closestShops));
+    });
     return { wrapper, apiPromise };
 }

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

@@ -76,6 +76,7 @@
                         :manualCopy="AlertMatchedDifferentVehicleBody"
                         alertClass="alert-warning"
                         v-bind:isDismissible="false" />
+
                     <alert
                         ref="AlertNoService"
                         v-if="displayNoServiceAlert"
@@ -87,9 +88,9 @@
                     <navbar
                         ref="navbar"
                         cmsWidgetName="FunnelFooterWidget"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction || displayNoServiceAlert" />
+                        @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
@@ -177,6 +178,7 @@ export default {
             displayInvalidZipAlert: false,
             showServiceZipField: this.getServiceZipFromStore(),
             isZipServiceable: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -279,6 +281,17 @@ export default {
                 this.displayInvalidZipAlert = true;
                 return this.$refs.navbar.removeLoader();
             }
+
+            if (this.isHeavyTruck) {
+                const closestShops = await this.findClosestApplicableShops(
+                    this.serviceZipCode,
+                    this.carId
+                );
+                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
+                if (this.displayNoServiceAlert) {
+                    return this.$refs.navbar.removeLoader();
+                }
+            }
             // Check if the CarId has changed.
             this.isCarIdDifferent =
                 vinLookup.data.vehicle.carId !== this.$store.getters.vehicle.carId;
@@ -393,6 +406,7 @@ export default {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayVinLookupByHomeAddressNotAllowedAlert = false;
             this.displayInvalidZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -437,6 +451,7 @@ export default {
         serviceZipCode() {
             // If they modify the service zip code, then hide the error message.
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
             this.$refs.navbar.updateButtonText(
                 this.getCmsContent("FunnelFooterWidget", "ForwardButtonText")
             );

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

@@ -3,18 +3,16 @@
         <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
         <div class="my-4 alert-heading text-center">
             <span v-html="afterpayHeaderCopy" />
-            &nbsp;
             <span class="afterpay-amount">{{ this.afterpayPrice }}</span>
             <br />
             <span class="alert-sub-heading" v-html="afterpayHeaderSubHeaderCopy" />
-            &nbsp;
+            <img :src="afterPayImageUrl" class="afterpay-image" />
-            <img :src="afterPayImageUrl" />
-            &nbsp;
             <a
                 id="afterpay-learnmore"
                 href="#"
                 data-afterpay-modal="en_US-safelite"
-                data-bind="click:afterpayLearnMore">
+                data-bind="click:afterpayLearnMore"
+                class="afterpay-learn-more">
                 <img :src="infoIcon" alt="Info Icon" class="info-icon" />
             </a>
             <div class="after-pay">
@@ -148,11 +146,12 @@ export default {
 .alert {
     border-radius: 5px;
     margin-top: 1rem;
+    margin-bottom: 1.5rem;
 
     &.alert-info {
         .alert-heading {
-            color: #000000;
+            color: $black;
-            font-weight: 600;
+            font-weight: $font-weight-600;
             margin-left: 0.5rem;
             margin-right: 0.5rem;
             @include media-breakpoint-up(md) {
@@ -162,13 +161,15 @@ export default {
         }
     }
     .afterpay-amount {
-        color: #0c7e47;
+        color: $green;
+        margin-left: 0.25rem;
     }
     .alert-sub-heading {
-        color: #4b4c4e;
+        color: $gray-1100;
-        font-weight: 400;
+        font-weight: $font-weight-normal;
     }
     .after-pay {
+        margin-top: 1rem;
         .after-pay-toggle {
             cursor: pointer;
 
@@ -180,7 +181,7 @@ export default {
                 background-position: right center;
                 margin-left: 0.5rem;
                 width: 1rem;
-                height: 9px;
+                height: 0.5625rem;
                 display: inline-flex;
             }
             &.expanded:after {
@@ -194,8 +195,8 @@ export default {
             }
         }
         .after-pay-toggle a {
-            font-weight: 600;
+            font-weight: $font-weight-600;
-            color: #0070d1;
+            color: $blue;
             text-decoration: none;
         }
         .after-pay-details {
@@ -211,6 +212,7 @@ export default {
         justify-content: space-around;
         gap: 0.5rem;
         margin-top: 1rem;
+        font-size: 0.875rem;
         @include media-breakpoint-up(md) {
             gap: 0rem;
         }
@@ -218,42 +220,52 @@ export default {
     .payment-card {
         display: flex;
         flex-direction: column;
-        border-radius: 6px;
+        border-radius: 0.375rem;
-        border: 0.25px #b3b4b5;
+        border: 0.25px $gray-1000;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        background: linear-gradient(to bottom, $white 50%, $green-600 50%);
+        box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15);
+        width: 4.375rem;
+        @include media-breakpoint-up(md) {
+            width: 5rem;
+        }
+        font-weight: $font-weight-700;
+        text-align: center;
     }
     .calendar-section {
-        background-color: #fff; /* White background for calendar area */
         padding: 0.5rem;
-        text-align: center;
+        gap: 0.125rem;
-        gap: 2px;
-        font-weight: 700;
         white-space: nowrap;
+        color: $black-100;
     }
     .payment-amount-section {
-        background-color: #e0f7e9; /* Light green background for payment area */
         padding: 0.5rem;
-        text-align: center;
+    }
-        font-weight: 700;
+    .afterpay-learn-more {
+        margin-left: 0.25rem;
+    }
+    .afterpay-image {
+        margin-left: 0.25rem;
     }
 
     .amount-due {
-        color: #00723e; /* Green text */
+        color: $green-1000; /* Green text */
     }
     .legend {
         display: flex;
         justify-content: center;
         margin-top: 1rem;
         gap: 1rem;
+        color: $gray-1100;
+        font-size: 0.875rem;
     }
     .legend-item {
         display: flex;
         align-items: center;
-        gap: 2px;
+        gap: 0.125rem;
         white-space: nowrap;
     }
     .legend-item span {
-        font-weight: 400;
+        font-weight: $font-weight-normal;
     }
 }
 </style>

src/layouts/schedule/time-slot-question/time-slot-question.vue

@@ -22,6 +22,10 @@
             v-model="selectedRouteCode"
             isRequired
             validationRules="time-slot-required" />
+        <div
+            class="supplemental-information"
+            v-if="supplementalInformationBlock"
+            v-html="supplementalInformationBlock" />
         <div
             v-if="hasWaitListExperiment && displayWaitListFeature"
             class="mt-5 bg-light rounded waitlist">
@@ -36,23 +40,16 @@
                 v-model="waitListRequested"
                 @click="waitListChecked" />
         </div>
-        <div
+        <div v-if="waitListRequested" class="rounded waitlist-success" ref="waitlistSuccessMessage">
-            v-if="waitListRequested"
-            class="mt-5 rounded waitlist-success"
-            ref="waitlistSuccessMessage">
             <img :src="waitListSuccessImage" class="success-image" />
             <span v-html="waitListSuccessText" class="success-text"></span>
         </div>
-        <div
-            class="mt-5 mb-2 supplemental-information"
-            v-if="supplementalInformationBlock"
-            v-html="supplementalInformationBlock" />
         <textBlock
             v-show="disclaimerTextBlockCopy"
             :customText="disclaimerTextBlockCopy"
             justifyText="left"
             typeStyle="caption"
-            class="mb-2" />
+            class="disclaimer" />
     </div>
 </template>
 
@@ -574,6 +571,7 @@ export default {
         line-height: 1.5rem;
         font-size: 0.875rem;
         text-align: left;
+        margin: 1rem 0 1.5rem;
         li strong {
             font-weight: bold;
         }
@@ -586,6 +584,7 @@ export default {
         border-radius: 8px;
         font-size: 1rem;
         padding: 16px;
+        text-align: left;
 
         .ui-checkbox {
             padding-left: 0px;
@@ -599,6 +598,7 @@ export default {
         }
     }
     .waitlist-success {
+        margin: 1rem 0 0;
         background-color: #ecf5e9;
         display: flex;
         align-items: flex-start;
@@ -606,9 +606,11 @@ export default {
         border-radius: 5px;
         font-size: 1.125rem;
         padding: 0.75rem 1rem;
-        margin-bottom: -0.5rem;
         .success-text {
             margin-left: 0.5rem;
+            p {
+                margin-bottom: 0;
+            }
         }
         .success-image {
             margin-top: 4.5px;
@@ -617,5 +619,9 @@ export default {
             color: #0c7e47;
         }
     }
+    .disclaimer {
+        text-align: left;
+        margin: 1.5rem 0 0;
+    }
 }
 </style>

src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js

@@ -100,7 +100,7 @@ describe("appointment-type-question.vue", () => {
         ]);
     });
 
-    it("Should display only the In-Shop and Drop-Off answers when only in-shop service is available", async () => {
+    it("Should display only the In-Shop answer when only in-shop service is available", async () => {
         // Arrange/Act
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
@@ -108,6 +108,34 @@ describe("appointment-type-question.vue", () => {
                 cmsWidgetName: cmsWidgetName,
                 isServiceableInshop: true,
                 isServiceableMobile: false,
+                isServiceableDropoff: false,
+            },
+            mountOptions: {
+                attachTo: document.body,
+            },
+        });
+
+        // Assert
+        expect(wrapper.vm.answersToDisplay).toEqual([
+            {
+                AnswerImageUrl: "",
+                Name: "Inshop",
+                SubText: "",
+                SubWidgetName: "",
+                Text: "In-shop",
+            },
+        ]);
+    });
+
+    it("Should display only the In-Shop and Drop-Off answers when mobile service is not  available", async () => {
+        // Arrange/Act
+        const { wrapper } = setupMocks({
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: cmsWidgetName,
+                isServiceableInshop: true,
+                isServiceableMobile: false,
+                isServiceableDropoff: true,
             },
             mountOptions: {
                 attachTo: document.body,

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -32,6 +32,7 @@ export default {
         cmsWidgetName: String,
         isServiceableMobile: Boolean,
         isServiceableInshop: Boolean,
+        isServiceableDropoff: Boolean,
         mobileFeeApplies: Boolean,
     },
     computed: {
@@ -45,7 +46,7 @@ export default {
             const shouldShowMobile = this.isServiceableMobile;
             const shouldShowInshop = this.isServiceableInshop;
             const shouldShowDropoff =
-                this.isServiceableInshop && !this.$store.getters.damage.isRepair;
+                this.isServiceableDropoff && !this.$store.getters.damage.isRepair;
 
             var answers = this.answersFromCms
                 ? this.answersFromCms.filter((answer) => {
@@ -77,6 +78,11 @@ export default {
         isMobileOnly() {
             return this.isServiceableMobile && !this.isServiceableInshop;
         },
+        isInshopOnly() {
+            return (
+                this.isServiceableInshop && !this.isServiceableMobile && !this.isServiceableDropoff
+            );
+        },
     },
     watch: {
         answersToDisplay: {
@@ -86,7 +92,7 @@ export default {
                     newValue.length == 1 &&
                     newValue.findIndex((answer) => answer.Name == "Mobile") != -1
                 ) {
-                    this.selectedValues = "Mobile";
+                    this.selectedValue = "Mobile";
                 }
             },
             immediate: true,
@@ -94,7 +100,14 @@ export default {
         isMobileOnly: {
             handler(newValue) {
                 if (newValue) {
-                    this.selectedValues = "Mobile";
+                    this.selectedValue = "Mobile";
+                }
+            },
+        },
+        isInshopOnly: {
+            handler(newValue) {
+                if (newValue) {
+                    this.selectedValue = "Inshop";
                 }
             },
         },

src/layouts/service-location/service-location.vue

@@ -76,6 +76,7 @@
                         v-show="isAppointmentTypeDisplayed"
                         :isServiceableMobile="isServiceableMobile"
                         :isServiceableInshop="isServiceableInshop"
+                        :isServiceableDropoff="isServiceableDropoff"
                         :isDisplayed="isAppointmentTypeDisplayed"
                         :mobileFeeApplies="mobileFeeApplies"
                         ref="appointmentTypeQuestion"
@@ -197,6 +198,8 @@ export default {
             isVehicleProtected: this.getIsVehicleProtectedFromStore(),
             isGlassServiceableInshop: null,
             isRecalibrationServiceableInshop: null,
+            isGlassServiceableDropoff: null,
+            isRecalibrationServiceableDropoff: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
             selectedAppointmentType: this.getSelectedAppointmentType(),
@@ -356,6 +359,13 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
+        isServiceableDropoff() {
+            if (this.isRecalibrationServiceableDropoff !== null) {
+                return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
+            } else {
+                return this.isGlassServiceableDropoff;
+            }
+        },
         isShopQuestionDisplayed() {
             return (
                 this.selectedAppointmentType === "Inshop" ||
@@ -561,6 +571,9 @@ export default {
             this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
             this.isRecalibrationServiceableInshop =
                 serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
+            this.isRecalibrationServiceableDropoff =
+                serviceabilityDetails.isRecalibrationServiceableDropoff;
             this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
             this.isRecalibrationServiceableMobile =
                 serviceabilityDetails.isRecalibrationServiceableMobile;

src/layouts/service-zip/service-zip.spec.js

@@ -415,6 +415,21 @@ describe("service-zip.vue", () => {
             expect(wrapper.vm.displayInvalidZipAlert).toBe(false);
             expect(wrapper.vm.displayNonServiceableZipAlert).toBe(false);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            // Arrange
+            // no changes to store
+            applyMockStoreDataToGetters();
+
+            const wrapper = setupMocks({});
+            wrapper.vm.serviceZipCode = "12345";
+
+            wrapper.vm.displayNoServiceAlert = false;
+            await wrapper.vm.forwardButtonAction();
+
+            // Check if the AlertNoService component is rendered
+            expect(wrapper.vm.displayNoServiceAlert).toBe(false);
+        });
     });
 });
 
@@ -511,5 +526,15 @@ function setupMocks({ customMountOptions, customZipQuery, customZipDataResponse
     ];
 
     const wrapper = shallowMount(serviceZip, mountOptions);
+    wrapper.vm.findClosestApplicableShops = jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+            data: {
+                providers: [
+                    { id: 1, name: "Shop 1" },
+                    { id: 2, name: "Shop 2" },
+                ],
+            },
+        });
+    });
     return wrapper;
 }

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

@@ -46,11 +46,18 @@
                             v-model="customAlertData"
                             v-if="displayNonServiceableZipAlert"
                             alertClass="alert-danger" />
+                        <alert
+                            ref="AlertNoService"
+                            v-if="displayNoServiceAlert"
+                            class="my-4"
+                            cmsWidgetName="AlertNoServiceWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
 
                         <navbar
                             cmsWidgetName="FunnelFooterWidget"
                             ref="navbar"
-                            :isForwardActionDisabled="!meta.valid"
+                            :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                             @back-clicked="backButtonAction"
                             @ForwardClicked="forwardButtonAction" />
                     </div>
@@ -114,6 +121,7 @@ export default {
             isHeavyTruck: this.getIsVehicleHeavyTruckServiceableFromStore(),
             displayInvalidZipAlert: false,
             displayNonServiceableZipAlert: false,
+            displayNoServiceAlert: false, // Initialize the property
         };
     },
 
@@ -278,17 +286,6 @@ export default {
                     return this.$refs.navbar.removeLoader();
                 }
             }
-            if (this.isHeavyTruck) {
-                const closestShops = await this.findClosestApplicableShops(
-                    this.serviceZipCode,
-                    this.carId
-                );
-                this.displayNoServiceAlert = !closestShops?.data?.providers?.length;
-                if (this.displayNoServiceAlert) {
-                    return this.$refs.navbar.removeLoader();
-                }
-            }
-
             const payment = this.$store.getters.payment;
             const policy = this.$store.getters.policy;
 
@@ -346,7 +343,6 @@ export default {
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
             this.displayNoServiceAlert = false;
-            this.displayNoServiceAlert = false;
         },
     },
     components: {

src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js

@@ -95,12 +95,11 @@ describe("glass-part-question.vue", () => {
         });
 
         //Act
-        await wrapper.vm.$nextTick();
         const listCard = await wrapper.findComponent({
             name: "buttonQuestion",
         });
 
-        await wrapper.setData({ selectedTint: "Green Tint" });
+        wrapper.setData({ selectedTint: "Green Tint" });
         // to trigger the computed setter
         wrapper.vm.selectedPartNumber = "DB12209GTYN";
 
@@ -253,8 +252,7 @@ describe("glass-part-question.vue", () => {
             });
 
             // Act
-            await wrapper.setData({ selectedTint: selectedTint });
+            wrapper.setData({ selectedTint: selectedTint });
-
             // Assert
             expect(expectedResults).toEqual(wrapper.vm.partsForSelectedTint);
         }

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

@@ -258,6 +258,23 @@ describe("vin-lookup.vue", () => {
             // Assert
             expect(wrapper.findAllComponents({ name: "alert" }).length).toBe(1);
         });
+
+        test("should hide the AlertNoService when displayNoServiceAlert is false", async () => {
+            const { wrapper } = setupMocks({
+                isZipServiceable: true,
+                displayNoServiceAlert: false,
+                lookupVinbyAddressResponse: {
+                    isStatePermissible: true,
+                    vinVehicles: [], // Return no vehicles
+                },
+            });
+            // Ensure displayNoServiceAlert is false
+            await wrapper.setData({ displayNoServiceAlert: false });
+            await wrapper.vm.forwardButtonAction();
+            // Check if the AlertNoService component is not rendered
+            const alertNoService = wrapper.findComponent({ ref: "AlertNoService" });
+            expect(alertNoService.exists()).toBe(false);
+        });
     });
 
     describe("getVinFromImage", () => {

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

@@ -111,10 +111,18 @@
                         "
                         alertClass="alert-success" />
 
+                    <alert
+                        ref="AlertNoService"
+                        v-if="displayNoServiceAlert"
+                        class="my-4"
+                        cmsWidgetName="AlertNoServiceWidget"
+                        alertClass="alert-danger"
+                        v-bind:isDismissible="false" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
+                        :isForwardActionDisabled="!meta.valid || displayNoServiceAlert"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
@@ -209,6 +217,7 @@ export default {
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
             displayVinScanFailedAlert: false,
+            displayNoServiceAlert: false,
         };
     },
     methods: {
@@ -247,6 +256,9 @@ export default {
                 );
             }
         },
+        getCarIdfromStore() {
+            return this.$store.getters.vehicle.carId;
+        },
         getIsVehicleHeavyTruckServiceableFromStore() {
             return store.getters.vehicle.isBigTruck && store.getters.vehicle.canSafeliteService;
         },
@@ -341,7 +353,7 @@ export default {
                     false
                 );
                 if (this.isHeavyTruck) {
-                    closestShops = await this.findClosestApplicableShops(
+                    const closestShops = await this.findClosestApplicableShops(
                         this.serviceZipCode,
                         this.carId
                     );
@@ -499,7 +511,6 @@ export default {
             this.displayVinNotFoundAlert = false;
             this.displayVinScanFailedAlert = false;
             this.displayNoServiceAlert = false;
-            this.displayNoServiceAlert = false;
         },
     },
     mounted() {
@@ -576,6 +587,7 @@ export default {
         },
         serviceZipCode() {
             this.displayNonServiceableZipAlert = false;
+            this.displayNoServiceAlert = false;
         },
     },
     components: {

src/styles/ux-variables.scss

@@ -3,6 +3,7 @@
 // White/black
 $white: #ffffff;
 $black: #000000;
+$black-100: #0a0a0a;
 
 // Blues
 $blue-100: #e4f1f7; // Used in theme
@@ -33,9 +34,11 @@ $green-300: #94d7b6;
 $green-400: #5abc8c; // Used in theme
 $green-500: #2ca168;
 $green: #0c7e47; // Default Green
+$green-600: #e7f2ed;
 $green-700: #006a36;
 $green-800: #004f28;
 $green-900: #00331a;
+$green-1000: #00723e;
 
 // Yellows
 $yellow-100: #fff5eb;
@@ -59,6 +62,8 @@ $gray-600: #4d5151; // Used in theme
 $gray-700: #303333; // Used in theme
 $gray-800: #222424; // Used in theme
 $gray-900: #181a1a; // Used in theme
+$gray-1000: #b3b4b5;
+$gray-1100: #4b4c4e;
 
 //orange
 $orange-600: #e86421;
@@ -134,6 +139,8 @@ $font-weight-lighter: lighter;
 $font-weight-light: 300;
 $font-weight-normal: 400;
 $font-weight-bold: 500;
+$font-weight-600: 600;
+$font-weight-700: 700;
 $font-weight-bolder: bolder;
 
 //Headings