CASH-2025: new oem glass question component

2026-01-09 11:01:16 -05:00 · 2026-01-09 11:01:16 -05:00 · c6e006020c
commit c6e006020c
parent 9af898604d
1 changed files with 134 additions and 0 deletions
--- a/src/layouts/quote/oem-glass-question/oem-glass-question.vue
+++ b/src/layouts/quote/oem-glass-question/oem-glass-question.vue
@ -0,0 +1,134 @@
+<template>
+    <div
+        class="oem-glass-question-container py-3 my-2"
+        :class="[isExpanded ? 'expanded' : '']">
+        <div
+            class="oem-glass-question-header d-flex align-items-center justify-content-between"
+            @click="toggleIsExpanded">
+            {{ headerText }}
+        </div>
+        <div class="oem-glass-question-body">
+            <div class="oem-glass-question-copy" v-html="bodyText"></div>
+            <div class="oem-glass-question-option">
+                <checkboxQuestion
+                    class="mt-3"
+                    cmsWidgetName="OemGlassInputQuestionWidget"
+                    v-model="installOemGlass"
+                    @click="waitListChecked" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
+
+export default {
+    name: "oem-part-question",
+    props: {
+        cmsWidgetName: String,
+    },
+    data() {
+        return {
+            isExpanded: true,
+        };
+    },
+    computed: {
+        headerText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        bodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        footerText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        installOemGlass: {
+            get() {
+                return this.modelValue;
+            },
+            set(newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+    },
+    methods: {
+        toggleIsExpanded() {
+            this.setIsExpanded(!this.isExpanded);
+        },
+        setIsExpanded(newVal) {
+            this.isExpanded = newVal;
+        },
+    },
+    components: {
+        checkboxQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.oem-glass-question-container {
+    .oem-glass-question-header {
+        font-weight: bold;
+
+        span {
+            flex-grow: 1;
+            color: $black;
+        }
+
+        &::after {
+            content: "";
+            transition: all 0.5s ease;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 9'%3E%3Cpath d='M7.99282 0.117702C7.75716 0.116049 7.53044 0.207797 7.3623 0.37286L0.255553 7.46878C0.0862976 7.63796 -0.00878906 7.86742 -0.00878906 8.10667C-0.00878906 8.34593 0.0862976 8.57539 0.255553 8.74457C0.424808 8.91374 0.654368 9.00879 0.893731 9.00879C1.13309 9.00879 1.36265 8.91374 1.53191 8.74457L7.99282 2.27378L14.4614 8.74457C14.6307 8.91205 14.8595 9.00547 15.0977 9.00428C15.3359 9.00308 15.5638 8.90737 15.7314 8.73819C15.8989 8.56901 15.9924 8.34022 15.9912 8.10216C15.99 7.8641 15.8942 7.63627 15.725 7.46878L8.6259 0.377963C8.45765 0.21088 8.22999 0.117289 7.99282 0.117702Z' fill='%230C7E47'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            width: 16px;
+            height: 16px;
+            display: inline-flex;
+            position: relative;
+        }
+    }
+
+    .oem-glass-question-body {
+        transition: all 500ms ease-out;
+        visibility: hidden;
+        overflow: hidden;
+        max-height: 0;
+
+        .oem-glass-question-option {
+            margin-top: 0.5em;
+
+            .oem-glass-question-strikethrough-price {
+                font-size: smaller;
+                text-decoration: line-through;
+            }
+
+            .oem-glass-question-free-price {
+                display: inline-block;
+                font-weight: bolder;
+                border-radius: 1em;
+                background-color: $green-300;
+                padding: 0 0.5em;
+                margin-inline-start: 0.5em;
+            }
+        }
+    }
+
+    &.expanded {
+        .oem-glass-question-header {
+            &::after {
+                transform: rotate(180deg);
+            }
+        }
+
+        .oem-glass-question-body {
+            visibility: visible;
+            max-height: none;
+
+            border-top: 1px solid $green-400;
+            padding-top: 0.5em;
+            margin-top: 0.5em;
+        }
+    }
+}
+</style>