From c6e006020c1decd8a57fffd63e371c068f7acf34 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 9 Jan 2026 11:01:16 -0500
Subject: [PATCH] CASH-2025: new oem glass question component

---
 .../oem-glass-question/oem-glass-question.vue | 134 ++++++++++++++++++
 1 file changed, 134 insertions(+)
 create mode 100644 src/layouts/quote/oem-glass-question/oem-glass-question.vue

diff --git a/src/layouts/quote/oem-glass-question/oem-glass-question.vue b/src/layouts/quote/oem-glass-question/oem-glass-question.vue
new file mode 100644
index 000000000..b1b4b4e48
--- /dev/null
+++ 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>