DigitalConsumer.FixMyGlass/src/mixins/base-mixin.js

import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { routerParams } from "@/router/router-constants/router-params";
import { queryStrings } from "@/constants/query-strings";
import { dynamicStrings } from "@/constants/dynamic-strings";
import { partTypeStrings } from "../constants/part-type-strings";

export default {
    data() {
        return {
            cmsContentByWidget: {},
        };
    },
    methods: {
        setCmsContent(cmsContent) {
            this.$root.cmsContentByWidget = cmsContent;
        },
        getCmsContent(widgetName, fieldName) {
            return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName]
                ? this.$root.cmsContentByWidget[widgetName][fieldName]
                : "";
        },
        dispatchStoreAction(type, payload, encodePayload = true) {
            // Encode the payload if required
            if (encodePayload) {
                encodeUriData(payload);
            }

            return store.dispatch(type, payload);
        },
        dispatchStoreActionWithLogging(type, payload, pageNameToLog, encodePayload = true) {
            // Encode the payload if required
            if (encodePayload) {
                encodeUriData(payload);
            }

            const wrappedParams = {
                payload: payload,
                pageNameToLog: pageNameToLog,
            };

            return store.dispatch(type, wrappedParams);
        },
        savePageDataToStore(page, data) {
            store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
        },
        onSubmit() {}, // DO NOT REMOVE; needed to prevent default form submit behavior. Cannot use .prevent modifier for vee-validate Form
        onInvalidSubmit({ values, errors, results }) {
            // identify the first error field and put focus on it
            // get error names array
            const errorNames = errors ? Object.keys(errors) : [];
            const firstErrorEl = errorNames[0];
            if (firstErrorEl) {
                const qsString = "[data-focus-target='" + firstErrorEl + "']";
                const el = document.querySelector(qsString);
                el && el.focus();
            }
        },
        getFooterInfoBoxHeight() {
            const footerInfoBox = document.querySelector(".footer#infoBox");
            return footerInfoBox ? footerInfoBox.offsetHeight : 0;
        },
        async getZipCodeData(zipCode, pageNameToLog = null) {
            const pageName = pageNameToLog ?? this.$options?.name;
            if (pageName == null) {
                console.log("Missed a spot.");
            }

            const serviceZipValidationResponse = await this.dispatchStoreActionWithLogging(
                storeActions.VALIDATE_ZIP,
                { zip: zipCode },
                pageName
            );

            return {
                containsMilitaryBase: serviceZipValidationResponse.data.containsMilitaryBase,
                isValid: serviceZipValidationResponse.data.isValid,
                isServiceable: serviceZipValidationResponse.data.isServiceable,
                state: serviceZipValidationResponse.data.state,
                zipCodeCtu: serviceZipValidationResponse.data.zipCodeCtu,
            };
        },
        getTierOnePackagePrice(lineItems) {
            let lineItemsToPrice = lineItems.filter((lineItem) => {
                return (
                    lineItem.partType != partTypeStrings.FRONT_WIPER &&
                    lineItem.partType != partTypeStrings.REAR_WIPER &&
                    lineItem.partType != partTypeStrings.RAIN_DEFENSE
                );
            });
            let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
            return totalPrice;
        },
        filterOutFees(lineItems) {
            const filteredLineItems = lineItems.filter((item) => {
                return (
                    !item.partType.includes("FEE") ||
                    (item.partType === "REPAIR FEE" && item.partNumber != "SUPPLIES-REPAIR")
                );
            });
            return filteredLineItems;
        },
        getTotalPriceOfAllLineItemsAndChildParts(lineItems) {
            let totalPrice = 0;
            lineItems.forEach((lineItem) => {
                totalPrice += this.getTotalLineItemPrice(lineItem);
                if (lineItem.childParts) {
                    totalPrice += this.getTotalPriceOfAllLineItemsAndChildParts(
                        lineItem.childParts
                    );
                }
            });
            return totalPrice;
        },
        getTotalLineItemPrice(lineItem) {
            return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
        },
        scrollToPageTop() {
            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
            container.scrollTo({ top: 0, left: 0, behavior: "smooth" });
        },
        scrollToPageBottom() {
            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
        },
    },
    computed: {
        storeActions() {
            return storeActions;
        },
        storeMutations() {
            return storeMutations;
        },
        navigationScenarios() {
            return navigationScenarios;
        },
        vehicleCategories() {
            return vehicleCategories;
        },
        routerParams() {
            return routerParams;
        },
        queryStrings() {
            return queryStrings;
        },
        dynamicStrings() {
            return dynamicStrings;
        },
        cssClassNameForCmsWidget() {
            return "widget-name-" + this.cmsWidgetName;
        },
    },
};

function encodeUriData(payload) {
    if (payload && Object.keys(payload).length > 0) {
        // Loop through the payload and encode the values
        Object.keys(payload).forEach((key) => {
            payload[key] = encodeURIComponent(payload[key]);
        });
    }
}