Merge pull request #2836 from Safelite/feature/CASH-1481
Mobile Fee Waiver Dropdown
This commit is contained in:
chloeherdsafelite
GitHub
commit
e58d26297d
2 changed files with 144 additions and 7 deletions
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
ref="alertMobileFeeFree"
|
||||
class="mb-5"
|
||||
cmsWidgetName="AlertMobileFeeFreeWidget"
|
||||
v-if="showMobileFreeAlert"
|
||||
alertClass="alert-success" />
|
||||
<mobileFeeWaiverAlert cmsWidgetName="MobileFeeFreeDropdownWidget" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row appointment-type">
|
||||
|
|
@ -174,6 +169,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";
|
||||
|
|
@ -1740,12 +1736,12 @@ export default {
|
|||
datePicker,
|
||||
locationAlerts,
|
||||
textBlock,
|
||||
|
||||
alert,
|
||||
serviceZipModalQuestion,
|
||||
appointmentTypeQuestion,
|
||||
contentGroupModal,
|
||||
shopLocation,
|
||||
mobileFeeWaiverAlert,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue