Add cart to payment-method.
This commit is contained in:
Bryan Mauger
parent
0fbb6d67ca
commit
f2f791baef
4 changed files with 178 additions and 19 deletions
131
src/fmg-components/cart/cart.vue
Normal file
131
src/fmg-components/cart/cart.vue
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="cart">
|
||||
<h5 class="pb-5 mb-4">Submit payment information</h5>
|
||||
<div class="container-fluid pe-0">
|
||||
<div
|
||||
class="row vin-toggle flex align-items-center"
|
||||
:class="[isActive ? 'active' : '']"
|
||||
@click="toggleClass()">
|
||||
<div class="col d-flex justify-content-between">
|
||||
<span class="label">Amount Due</span
|
||||
><span class="label amount-due">$321.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="price-table">
|
||||
<div class="service-type"><span>Premium service</span><span>$300</span></div>
|
||||
<div class="small vaps">
|
||||
<span>Wiper blades</span><span><a href="#">Remove</a></span>
|
||||
</div>
|
||||
<div class="small vaps">
|
||||
<span>Rain defense</span><span><a href="#">Remove</a></span>
|
||||
</div>
|
||||
<div><span>Recycling</span><span>$10</span></div>
|
||||
<div class="service-type"><span>Mobile service</span><span>$10</span></div>
|
||||
<div class="align-items-center">
|
||||
<span>Rain Defense</span><a href="#">Remove</a><span>$10</span>
|
||||
</div>
|
||||
<div class="sub-total"><span>Subtotal</span><span>$320</span></div>
|
||||
<div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
|
||||
<div class="amount-due"><span>Amount due</span><span>$321</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cart from "@/fmg-components/cart/cart";
|
||||
|
||||
export default {
|
||||
name: "modal",
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function (event) {
|
||||
this.isActive = !this.isActive;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
lineItems() {
|
||||
return this.$store.getters.lineItems;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cart {
|
||||
h5 {
|
||||
border-bottom: 1px solid $gray-500;
|
||||
color: $black;
|
||||
}
|
||||
.border-bottom {
|
||||
color: $gray;
|
||||
}
|
||||
.label {
|
||||
font-weight: 500;
|
||||
}
|
||||
.amount-due {
|
||||
color: $green;
|
||||
}
|
||||
.price-table {
|
||||
max-height: 0;
|
||||
transition: all 350ms ease-in;
|
||||
overflow: hidden;
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 1.5rem;
|
||||
&:nth-last-child(-n + 3) {
|
||||
background-color: #e3f2ea;
|
||||
}
|
||||
&:last-child {
|
||||
background-color: #0c7e47;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.vaps {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
.package-type,
|
||||
.service-type,
|
||||
.vaps {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.sub-total,
|
||||
.sales-tax,
|
||||
.amount-due {
|
||||
font-weight: 500;
|
||||
}
|
||||
.sub-total {
|
||||
border-top: 1px solid #0c7e47;
|
||||
}
|
||||
}
|
||||
.vin-toggle {
|
||||
&:after {
|
||||
content: "";
|
||||
transition: all 0.5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
width: 16px;
|
||||
height: 9px;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
right: 0.75rem;
|
||||
margin: 1rem 0 1rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.active + .price-table {
|
||||
max-height: 400px;
|
||||
transition: all 350ms ease-in;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -63,11 +63,12 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.funnel-header {
|
||||
padding: 0.97rem 0;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
max-width: 78px;
|
||||
width: 100%;
|
||||
max-width: 114px;
|
||||
}
|
||||
.alert {
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
||||
padding: 1.5rem 1rem 1.5rem 1.5rem;
|
||||
right: 0;
|
||||
button {
|
||||
border: none;
|
||||
|
|
@ -186,9 +186,9 @@ export default {
|
|||
}
|
||||
.menu-modal-container {
|
||||
position: absolute;
|
||||
padding: 1.47rem 1rem 1.47rem 1.47rem;
|
||||
padding: 1.5rem 1rem 1.5rem 1.5rem;
|
||||
right: 0;
|
||||
top: -4.5rem;
|
||||
top: -4.25rem;
|
||||
button {
|
||||
border: none;
|
||||
&.menu-button {
|
||||
|
|
|
|||
|
|
@ -5,22 +5,16 @@
|
|||
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
:displayGenericVehicleImage="false" />
|
||||
|
||||
<textBlock
|
||||
:customText="subHeaderTitle"
|
||||
<funnelSubHeader
|
||||
typeStyle="h5"
|
||||
justifyText="justify-content-center"
|
||||
margin="mt-1"
|
||||
class="dark-header" />
|
||||
|
||||
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
class="mb-5 mt-4 dark-header"
|
||||
leftAlignHeader
|
||||
cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
|
||||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
|
||||
<div class="px-4">
|
||||
<div>
|
||||
<cart/>
|
||||
<vehicleReview
|
||||
cmsWidgetName="VehicleReviewWidget"
|
||||
:vehicle="vehicleInfo"
|
||||
|
|
@ -68,9 +62,15 @@
|
|||
// Components
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
|
||||
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
|
||||
import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
|
||||
import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
|
||||
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
|
||||
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
|
||||
import cart from "@/fmg-components/cart/cart";
|
||||
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -237,13 +237,40 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
subHeaderTitle() {
|
||||
return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
|
||||
},
|
||||
subHeaderBody() {
|
||||
return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
|
||||
},
|
||||
forwardButtonText() {
|
||||
return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
|
||||
},
|
||||
vehicleInfo() {
|
||||
return this.$store.getters.vehicle;
|
||||
},
|
||||
damageInfo() {
|
||||
return this.$store.getters.damage;
|
||||
},
|
||||
lineItems() {
|
||||
return this.$store.getters.lineItems;
|
||||
},
|
||||
serviceLocationInfo() {
|
||||
return this.$store.getters.order.serviceLocation;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
funnelFooter,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
Form,
|
||||
loadingModal,
|
||||
servicePackageReview,
|
||||
serviceLocationReview,
|
||||
vehicleReview,
|
||||
damageReview,
|
||||
cart,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue