DigitalConsumer.FixMyGlass/src/layouts/quote/service-package-question/service-package-question.vue

<template>
    <buttonQuestion
        ref="buttonQuestion"
        :answers="servicePackageAnswers"
        :groupName="groupName"
        buttonTypeString="servicePackageRadio"
        :buttonTypeObject="servicePackageRadio"
        v-model="selectedPackageName"
        :validationRules="validationRules"
        :isRequired="isRequired"
        :logDisplayedValuesEvent="true" />
</template>

<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
import baseMixin from "@/mixins/base-mixin.js";
import { processIfStatements } from "@/helpers/cms-content-helper";
import { damageLocationsSelected as glassLocations } from "@/constants/damage-locations-selected";
import servicePackageRadio from "./service-package-radio/service-package-radio";
import { partTypeStrings } from "@/constants/part-type-strings";

const packageNames = {
    TIER_ONE: "TierOne",
    TIER_TWO: "TierTwo",
    TIER_THREE: "TierThree",
};

export default {
    name: "servicePackageQuestion",
    props: {
        groupName: String,
        cashCmsWidgetName: String,
        insuranceCmsWidgetName: String,
        validationRules: String,
        isRequired: Boolean,
        isInsuranceSelected: Boolean,
        availableLineItems: null,
    },
    data() {
        return {
            servicePackageRadio: servicePackageRadio,
            selectedPackageName: null,
        };
    },
    watch: {
        availableLineItems() {
            if (this.$store.getters.payment.isInsurance != null) {
                this.selectDefaultPackage();
            }
        },
        selectedPackageName(newValue) {
            const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
            this.$emit("vapsItemsSelected", VapsProductsInSelectedPackage);
        },
    },
    computed: {
        nullSafeAvailableLineItems() {
            return this.availableLineItems ?? [];
        },
        servicePackageAnswers() {
            const cmsWidgetName = this.isInsuranceSelected
                ? this.insuranceCmsWidgetName
                : this.cashCmsWidgetName;
            let cmsAnswersContent = this.getCmsContent(cmsWidgetName, "Answers");
            if (!cmsAnswersContent) {
                return null;
            }
            if (!this.shouldDisplayTierTwoPackage) {
                cmsAnswersContent = cmsAnswersContent.filter(
                    (answer) => answer.Name != packageNames.TIER_TWO
                );
            }
            const modifiedAnswers = cmsAnswersContent.map((answer) => ({
                value: answer.Name,
                buttonLabel: this.getHeaderTextFromCms(answer.SubWidgetName),
                buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.SubWidgetName),
                buttonBodyCopy: this.getBodyTextFromCms(answer.SubWidgetName),
                buttonAuxillaryCopy: this.getPackagePriceString(answer.Name),
                buttonFooterCopy: this.getFooterTextFromCms(answer.SubWidgetName),
            }));
            return modifiedAnswers;
        },
        isRecalibrationOnOrder() {
            return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
        },
        frontWipersApplicableForTierTwo() {
            const frontWipersAreAvailable = this.lineItemsContainsPartType(
                partTypeStrings.FRONT_WIPER
            );
            const isRepair = this.$store.getters.order.damage.isRepair;
            const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(
                glassLocations.WINDSHIELD
            );
            if (frontWipersAreAvailable) {
                if (isRepair) {
                    return true;
                } else {
                    if (glassToReplaceContainsWindshield) {
                        return true;
                    } else {
                        return false;
                    }
                }
            } else {
                return false;
            }
        },
        rearWiperApplicableForTierTwo() {
            const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
            return (
                this.glassToReplaceContainsGlassLocation(glassLocations.REAR) &&
                rearWiperIsAvailable
            );
        },
        frontWipersApplicableForTierThree() {
            const frontWipersAreAvailable = this.lineItemsContainsPartType(
                partTypeStrings.FRONT_WIPER
            );
            return frontWipersAreAvailable;
        },
        rearWiperApplicableForTierThree() {
            const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
            const frontWipersAreAvailable = this.lineItemsContainsPartType(
                partTypeStrings.FRONT_WIPER
            );
            return (
                rearWiperIsAvailable &&
                (this.glassToReplaceContainsGlassLocation(glassLocations.REAR) ||
                    !frontWipersAreAvailable)
            );
        },
        rainDefenseApplicableForTierThree() {
            if (
                this.rearWiperApplicableForTierTwo &&
                !this.frontWipersApplicableForTierTwo &&
                this.frontWipersApplicableForTierThree
            ) {
                return false;
            } else {
                return true;
            }
        },
        shouldDisplayTierTwoPackage() {
            return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo;
        },
    },
    methods: {
        processIfStatements,
        getHeaderTextFromCms(cmsWidgetName) {
            return this.getCmsContent(cmsWidgetName, "HeaderText");
        },
        getSubheaderTextFromCms(cmsWidgetName) {
            return this.getCmsContent(cmsWidgetName, "SubheaderText");
        },
        getBodyTextFromCms(cmsWidgetName) {
            const bodyText = this.getCmsContent(cmsWidgetName, "BodyText");
            return this.processIfStatements(bodyText, "custom", this.getCustomValueFromString);
        },
        getFooterTextFromCms(cmsWidgetName) {
            const footerText = this.getCmsContent(cmsWidgetName, "FooterText");
            return this.processIfStatements(footerText, "custom", this.getCustomValueFromString);
        },
        getPackagePriceString(packageName) {
            const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
            return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
        },
        getPackagePrice(packageName) {
            let priceFloat = this.isInsuranceSelected
                ? 0
                : baseMixin.methods.getTierOnePackagePrice(
                      baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
                  );
            if (packageName === packageNames.TIER_TWO) {
                priceFloat += this.getTierTwoPackageVapsPrice();
            } else if (packageName === packageNames.TIER_THREE) {
                priceFloat += this.getTierThreePackageVapsPrice();
            }
            return priceFloat;
        },
        getTierTwoPackageVapsPrice() {
            let vapsPrice = 0;
            const priceFrontWipers = this.frontWipersApplicableForTierTwo;
            const priceRearWipers = this.rearWiperApplicableForTierTwo;
            this.nullSafeAvailableLineItems.forEach((item) => {
                if (
                    (priceFrontWipers &&
                        item.partType.toUpperCase() === partTypeStrings.FRONT_WIPER) ||
                    (priceRearWipers && item.partType.toUpperCase() === partTypeStrings.REAR_WIPER)
                ) {
                    vapsPrice += baseMixin.methods.getTotalLineItemPrice(item);
                }
            });
            return vapsPrice;
        },
        getTierThreePackageVapsPrice() {
            let vapsPrice = 0;
            const priceFrontWipers = this.frontWipersApplicableForTierThree;
            const priceRearWipers = this.rearWiperApplicableForTierThree;
            const priceRainDefense = this.rainDefenseApplicableForTierThree;
            this.nullSafeAvailableLineItems.forEach((item) => {
                if (
                    (priceFrontWipers &&
                        item.partType.toUpperCase() === partTypeStrings.FRONT_WIPER) ||
                    (priceRearWipers &&
                        item.partType.toUpperCase() === partTypeStrings.REAR_WIPER) ||
                    (priceRainDefense &&
                        item.partType.toUpperCase() === partTypeStrings.RAIN_DEFENSE)
                ) {
                    vapsPrice += baseMixin.methods.getTotalLineItemPrice(item);
                }
            });
            return vapsPrice;
        },
        selectDefaultPackage() {
            const vapsFromStore = this.$store.getters.lineItems.vaps;
            let lowestTierForPackage = packageNames.TIER_ONE;
            if (vapsFromStore?.length > 0) {
                vapsFromStore.every((vapsItem) => {
                    let lowestTierForThisItem = this.getLowestTierForThisItem(vapsItem);
                    if (lowestTierForThisItem === packageNames.TIER_THREE) {
                        lowestTierForPackage = packageNames.TIER_THREE;
                        return false;
                    } else if (lowestTierForThisItem === packageNames.TIER_TWO) {
                        lowestTierForPackage = packageNames.TIER_TWO;
                        return true;
                    } else {
                        return true;
                    }
                });
            }
            this.selectedPackageName = lowestTierForPackage;
        },
        getLowestTierForThisItem(vapsItem) {
            let lowestTierForThisItem = null;
            switch (vapsItem.partType) {
                case partTypeStrings.FRONT_WIPER:
                    if (this.frontWipersApplicableForTierThree) {
                        lowestTierForThisItem = packageNames.TIER_THREE;
                    }
                    if (this.frontWipersApplicableForTierTwo) {
                        lowestTierForThisItem = packageNames.TIER_TWO;
                    }
                    break;
                case partTypeStrings.REAR_WIPER:
                    if (this.rearWiperApplicableForTierThree) {
                        lowestTierForThisItem = packageNames.TIER_THREE;
                    }
                    if (this.rearWiperApplicableForTierTwo) {
                        lowestTierForThisItem = packageNames.TIER_TWO;
                    }
                    break;
                case partTypeStrings.RAIN_DEFENSE:
                    if (this.rainDefenseApplicableForTierThree) {
                        lowestTierForThisItem = packageNames.TIER_THREE;
                    }
                    break;
            }
            return lowestTierForThisItem;
        },
        getVapsLineItemsForSelectedPackage(packageName) {
            const vapsLineItemsForSelectedPackage = [];
            if (packageName === packageNames.TIER_TWO) {
                if (this.frontWipersApplicableForTierTwo) {
                    vapsLineItemsForSelectedPackage.push(
                        ...this.getLineItemsContainingPartType(partTypeStrings.FRONT_WIPER)
                    );
                }
                if (this.rearWiperApplicableForTierTwo) {
                    vapsLineItemsForSelectedPackage.push(
                        ...this.getLineItemsContainingPartType(partTypeStrings.REAR_WIPER)
                    );
                }
            } else if (packageName === packageNames.TIER_THREE) {
                if (this.frontWipersApplicableForTierThree) {
                    vapsLineItemsForSelectedPackage.push(
                        ...this.getLineItemsContainingPartType(partTypeStrings.FRONT_WIPER)
                    );
                }
                if (this.rearWiperApplicableForTierThree) {
                    vapsLineItemsForSelectedPackage.push(
                        ...this.getLineItemsContainingPartType(partTypeStrings.REAR_WIPER)
                    );
                }
                if (this.rainDefenseApplicableForTierThree) {
                    vapsLineItemsForSelectedPackage.push(
                        ...this.getLineItemsContainingPartType(partTypeStrings.RAIN_DEFENSE)
                    );
                }
            }
            return vapsLineItemsForSelectedPackage;
        },
        getCustomValueFromString(str) {
            switch (str) {
                case "isRecalibrationOnOrder":
                    return this.isRecalibrationOnOrder;
                case "frontWipersApplicableForTierTwo":
                    return this.frontWipersApplicableForTierTwo;
                case "rearWiperApplicableForTierTwo":
                    return this.rearWiperApplicableForTierTwo;
                case "frontWipersApplicableForTierThree":
                    return this.frontWipersApplicableForTierThree;
                case "rearWiperApplicableForTierThree":
                    return this.rearWiperApplicableForTierThree;
                case "rainDefenseApplicableForTierThree":
                    return this.rainDefenseApplicableForTierThree;
                default:
                    return null;
            }
        },
        getLineItemsContainingPartType(partType) {
            const partTypeMatches = this.nullSafeAvailableLineItems.filter(
                (lineItem) => lineItem.partType.toUpperCase() === partType
            );
            return partTypeMatches;
        },
        lineItemsContainsPartType(partType) {
            const partTypeMatches = this.getLineItemsContainingPartType(partType);
            return !!partTypeMatches.length;
        },
        glassToReplaceContainsGlassLocation(glassLocation) {
            const glassLocationMatches =
                this.$store.getters.order.damage.glassToReplace?.filter(
                    (glassToReplace) => glassToReplace.glassLocation === glassLocation
                ) ?? [];
            return !!glassLocationMatches.length;
        },
    },
    components: {
        buttonQuestion,
    },
};
</script>