Merge remote-tracking branch 'origin/release/2025.09.25' into schedule-refactor/post-parity

src/layouts/schedule/mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue

@@ -0,0 +1,141 @@
+<template>
+    <div
+        class="mobile-fee-waiver-alert-container py-3 px-4 my-2"
+        :class="[isExpanded ? 'expanded' : '']">
+        <div
+            class="mobile-fee-waiver-header d-flex align-items-center justify-content-between"
+            @click="toggleIsExpanded">
+            <span>
+                {{ headerText }}
+            </span>
+        </div>
+        <div class="mobile-fee-waiver-body">
+            <div class="mobile-fee-waiver-copy">
+                {{ subheaderText }}
+            </div>
+            <div class="mobile-fee-waiver-price-comp">
+                <span class="mobile-fee-waiver-strikethrough-price">
+                    {{ priceStrikethroughText }}
+                </span>
+                <span class="mobile-fee-waiver-free-price">{{ freePriceText }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "mobile-fee-waiver-alert",
+    props: {
+        cmsWidgetName: String,
+    },
+    data() {
+        return {
+            isExpanded: true,
+        };
+    },
+    computed: {
+        headerText() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        subheaderText() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        priceStrikethroughText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        freePriceText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText2");
+        },
+    },
+    methods: {
+        toggleIsExpanded() {
+            this.setIsExpanded(!this.isExpanded);
+        },
+        setIsExpanded(newVal) {
+            this.isExpanded = newVal;
+        },
+    },
+    components: {},
+};
+</script>
+
+<style lang="scss">
+.mobile-fee-waiver-alert-container {
+    background: $green-100;
+    border-radius: 0.25em;
+    border: 1px solid $green-400;
+
+    .mobile-fee-waiver-header {
+        font-weight: bold;
+
+        span {
+            flex-grow: 1;
+            color: $black;
+        }
+
+        &::before {
+            content: "";
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230C7E47' d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/svg%3E");
+            width: 1rem;
+            height: 1rem;
+            display: inline-block;
+            margin-right: 0.5rem;
+        }
+
+        &::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;
+        }
+    }
+
+    .mobile-fee-waiver-body {
+        transition: all 500ms ease-out;
+        visibility: hidden;
+        overflow: hidden;
+        max-height: 0;
+
+        .mobile-fee-waiver-price-comp {
+            margin-top: 0.5em;
+
+            .mobile-fee-waiver-strikethrough-price {
+                font-size: smaller;
+                text-decoration: line-through;
+            }
+
+            .mobile-fee-waiver-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 {
+        .mobile-fee-waiver-header {
+            &::after {
+                transform: rotate(180deg);
+            }
+        }
+
+        .mobile-fee-waiver-body {
+            visibility: visible;
+            max-height: none;
+
+            border-top: 1px solid $green-400;
+            padding-top: 0.5em;
+            margin-top: 0.5em;
+        }
+    }
+}
+</style>

src/layouts/schedule/schedule.vue

@@ -5,12 +5,7 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <alert
+                    <mobileFeeWaiverAlert cmsWidgetName="MobileFeeFreeDropdownWidget" />
-                        ref="alertMobileFeeFree"
-                        class="mb-5"
-                        cmsWidgetName="AlertMobileFeeFreeWidget"
-                        v-if="showMobileFreeAlert"
-                        alertClass="alert-success" />
                 </div>
             </div>
             <div class="row appointment-type">
@@ -195,6 +190,7 @@ import datePicker from "@/digital-components/date-picker/date-picker";
 import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 import textBlock from "@/digital-components/text-block/text-block";
+import mobileFeeWaiverAlert from "./mobile-fee-waiver-alert/mobile-fee-waiver-alert.vue";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -1825,6 +1821,7 @@ export default {
         contentGroupModal,
         durationTextBlock,
         shopLocation,
+        mobileFeeWaiverAlert,
     },
 };
 </script>