CASH-132 WIP donation block.
This commit is contained in:
Bryan Mauger
parent
5316a2d3c1
commit
8f99cd9d99
3 changed files with 25 additions and 44 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="donation-block" :class="[confirmationPage ? 'confirmation' : '']">
|
||||
<div class="donation-block">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="headline text-center" v-html="DonationHeadline"></p>
|
||||
|
|
@ -12,20 +12,17 @@
|
|||
<div>
|
||||
<p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
|
||||
<p class="caption mb-0" v-html="DonationBodyText"></p>
|
||||
<p class="caption m-0" v-html="DonationBodySubText"></p>
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Learn more"
|
||||
href="//www.safelite.com/about-safelite/safelite-autoglass-foundation/safelite-and-foster-love"
|
||||
:href="DonationBodySubText"
|
||||
target="_blank" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="donation-slider my-4">
|
||||
<input name="amount" id="zero" type="radio" checked/>
|
||||
<label for="zero" class="label">None</label>
|
||||
<input name="amount" id="one" type="radio" />
|
||||
<input name="amount" id="one" type="radio" checked/>
|
||||
<label for="one" class="label">$1</label>
|
||||
<input name="amount" id="three" type="radio" />
|
||||
<label for="three" class="label" >$3</label>
|
||||
|
|
@ -37,7 +34,7 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button v-if="confirmationPage" class="btn btn-secondary w-100 mb-2">Add donation to order</button>
|
||||
<button class="btn btn-secondary w-100 mb-2">Add donation to order</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -75,11 +72,6 @@ export default {
|
|||
return this.getCmsContent("DonationWidget", "Image");
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
confirmationPage: false,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
},
|
||||
|
|
@ -89,13 +81,8 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.donation-block {
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0px 4px 24px -8px rgba(0,0,0,0.2);
|
||||
&.confirmation { // For use on confirmation page
|
||||
background-color: $gray-100;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
background-color: $gray-100;
|
||||
border-radius: 0;
|
||||
|
||||
p {
|
||||
&.headline {
|
||||
|
|
@ -135,7 +122,7 @@ export default {
|
|||
.label {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 25%;
|
||||
width: 33.3333%;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
|
|
@ -146,7 +133,7 @@ export default {
|
|||
z-index: 2;
|
||||
}
|
||||
.indicator-bar {
|
||||
width: 25%;
|
||||
width: 33.3333%;
|
||||
height: 3rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -162,25 +149,20 @@ export default {
|
|||
background: $blue;
|
||||
}
|
||||
input {
|
||||
&#zero:checked {
|
||||
~ .indicator-bar {
|
||||
transform: translateX(2rem);
|
||||
}
|
||||
}
|
||||
&#one:checked {
|
||||
~ .indicator-bar {
|
||||
transform: translateX(calc(100% + 2rem));
|
||||
}
|
||||
~ .indicator-bar {
|
||||
transform: translateX(2rem);
|
||||
}
|
||||
}
|
||||
&#three:checked {
|
||||
~ .indicator-bar {
|
||||
transform: translateX(calc(200% + 2rem));
|
||||
}
|
||||
~ .indicator-bar {
|
||||
transform: translateX(calc(100% + 2rem));
|
||||
}
|
||||
}
|
||||
&#five:checked {
|
||||
~ .indicator-bar {
|
||||
transform: translateX(calc(300% + 2rem));
|
||||
}
|
||||
~ .indicator-bar {
|
||||
transform: translateX(calc(200% + 2rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -203,9 +185,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
input#zero + label:after {
|
||||
display: none;
|
||||
}
|
||||
input[type="radio"] {
|
||||
&:not(:checked),
|
||||
&:checked {
|
||||
|
|
|
|||
|
|
@ -64,6 +64,11 @@
|
|||
:isItac="isItac"
|
||||
:isNoComp="isNoComp" />
|
||||
|
||||
<div class="mt-3">
|
||||
<donationBlock
|
||||
cmsWidgetName="DonationWidget" />
|
||||
</div>
|
||||
|
||||
<hr class="mb-5" />
|
||||
|
||||
<div class="emailtext" v-html="ConfirmationEmailText"></div>
|
||||
|
|
@ -108,6 +113,7 @@ import experimentMixin from "@/mixins/experiment-mixin.js";
|
|||
import { partTypeStrings } from "@/constants/part-type-strings";
|
||||
import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
|
||||
import { containsRecalParts } from "@/helpers/recal-helper.js";
|
||||
import donationBlock from "../../fmg-components/donation-block/donation-block.vue";
|
||||
|
||||
export default {
|
||||
name: "confirmation",
|
||||
|
|
@ -460,6 +466,7 @@ export default {
|
|||
addToCalendar,
|
||||
cart,
|
||||
textBlock,
|
||||
donationBlock
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -37,10 +37,7 @@
|
|||
:isItac="isItac"
|
||||
:isNoComp="isNoComp"
|
||||
:isExpandedOnLoad="false" />
|
||||
<div class="mt-3">
|
||||
<donationBlock
|
||||
cmsWidgetName="DonationWidget" />
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div>
|
||||
|
|
@ -159,7 +156,6 @@ import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
|||
import { coverageStatus } from "@/constants/insurance";
|
||||
import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
|
||||
import { containsRecalParts } from "@/helpers/recal-helper";
|
||||
import donationBlock from "@/fmg-components/donation-block/donation-block.vue";
|
||||
|
||||
defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
|
||||
|
|
@ -851,7 +847,6 @@ export default {
|
|||
textBlock,
|
||||
checkboxQuestion,
|
||||
contentGroupModal,
|
||||
donationBlock,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue