CASH-132: temp updates to enable donation block
This commit is contained in:
Adam Caouette
parent
cb22453eb0
commit
29b240819f
3 changed files with 144 additions and 82 deletions
|
|
@ -1,65 +1,70 @@
|
|||
<template>
|
||||
<div class="donation-block">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="headline text-center" v-html="DonationHeadline"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-align d-flex">
|
||||
<div>
|
||||
<img class="w-100 mt-1 me-4" :src="LogoImage" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
|
||||
<p class="caption mb-0" v-html="DonationBodyText"></p>
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Learn more"
|
||||
:href="DonationBodySubText"
|
||||
target="_blank" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="donation-slider my-4">
|
||||
<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>
|
||||
<input name="amount" id="five" type="radio" />
|
||||
<label for="five" class="label">$5</label>
|
||||
<div class="indicator-bar"></div>
|
||||
<form
|
||||
ref="donationForm"
|
||||
id="donation-form"
|
||||
@submit.prevent="handleDonationAction">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="headline text-center" v-html="DonationHeadline"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button
|
||||
class="btn btn-secondary w-100 mb-2"
|
||||
v-html="DonationAddButtonWidget"></button>
|
||||
<div class="row-align d-flex">
|
||||
<div>
|
||||
<img class="w-100 mt-1 me-4" :src="LogoImage" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
|
||||
<p class="caption mb-0" v-html="DonationBodyText"></p>
|
||||
<textLink
|
||||
linkType="newWindowLink"
|
||||
text="Learn more"
|
||||
:href="DonationBodySubText"
|
||||
target="_blank" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="donationSuccess"
|
||||
class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
|
||||
v-html="DonationThanksAlertWidget"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="donation-slider my-4">
|
||||
<input name="amount" id="one" type="radio" value=1 checked />
|
||||
<label for="one" class="label">$1</label>
|
||||
<input name="amount" id="three" type="radio" value=3 />
|
||||
<label for="three" class="label">$3</label>
|
||||
<input name="amount" id="five" type="radio" value=5 />
|
||||
<label for="five" class="label">$5</label>
|
||||
<div class="indicator-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<alert
|
||||
v-if="donationError"
|
||||
cmsWidgetName="DonationErrorWidget"
|
||||
alertClass="alert-danger" />
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button
|
||||
class="btn btn-secondary w-100 mb-2"
|
||||
v-html="DonationAddButtonWidget"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="showDonationSuccess"
|
||||
class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
|
||||
v-html="DonationThanksAlertWidget"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<alert
|
||||
v-if="showDonationError"
|
||||
cmsWidgetName="DonationErrorWidget"
|
||||
alertClass="alert-danger" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -71,6 +76,8 @@ export default {
|
|||
props: {
|
||||
cmsWidgetName: String,
|
||||
modelValue: String,
|
||||
showDonationSuccess: Boolean,
|
||||
showDonationError: Boolean,
|
||||
},
|
||||
computed: {
|
||||
DonationHeadline() {
|
||||
|
|
@ -106,11 +113,17 @@ export default {
|
|||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
donationSuccess: true,
|
||||
donationError: true,
|
||||
};
|
||||
// data() {
|
||||
// return {
|
||||
// donationSuccess: true,
|
||||
// donationError: true,
|
||||
// };
|
||||
// },
|
||||
methods: {
|
||||
handleDonationAction(submitEvent) {
|
||||
console.log("running handleDonationAction(), submitEvent.target.elements.amount.value: ", submitEvent.target.elements.amount.value)
|
||||
this.selectedValue = submitEvent.target.elements.amount.value;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
textLink,
|
||||
|
|
|
|||
|
|
@ -68,7 +68,9 @@
|
|||
<donationBlock
|
||||
cmsWidgetName="DonationWidget"
|
||||
v-model="donationAmount"
|
||||
:donationValues="donationValues" />
|
||||
:donationValues="donationValues"
|
||||
:showDonationSuccess="showDonationSuccess"
|
||||
:showDonationError="showDonationError" />
|
||||
</div>
|
||||
|
||||
<h3>donationAmount: {{ donationAmount }}</h3>
|
||||
|
|
@ -239,7 +241,10 @@ export default {
|
|||
vaps: [],
|
||||
submittedOrder: null,
|
||||
shouldHideRecalibration: null,
|
||||
donationAmount: null,
|
||||
donationAmount: 0,
|
||||
showDonationSuccess: null,
|
||||
showDonationError: null,
|
||||
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -513,21 +518,55 @@ export default {
|
|||
forwardButtonAction() {
|
||||
window.location.assign(location.protocol + "//" + location.host);
|
||||
},
|
||||
async addDonation(amount) {
|
||||
async addDonation(amount, plateTemp) {
|
||||
// try to call API to add donation to order
|
||||
|
||||
// TODO - change the following to check the response from the call
|
||||
const donationResponse = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.ADD_DONATION_TO_SUBMITTED_ORDER,
|
||||
amount,
|
||||
// TEMP DUMMY CALL TO SIMULATE SUCCESS OR ERROR FROM API CALL
|
||||
// TO BE REPLACED BY REAL CALL LATER
|
||||
const donationResponse = await this.dispatchStoreActionWithLogging(
|
||||
storeActions.LOOKUP_VIN_BY_PLATE,
|
||||
{ licensePlate: plateTemp, licenseState: "OH" },
|
||||
"test",
|
||||
false
|
||||
);
|
||||
).catch((error) => {
|
||||
// this.$refs.navbar.removeLoader();
|
||||
console.error("Error!!! error: ", error)
|
||||
return error;
|
||||
});
|
||||
|
||||
console.log("ran addDonation()... (*fake call*) donationResponse: ", donationResponse)
|
||||
|
||||
if (donationResponse?.status == "200") {
|
||||
this.showDonationSuccess = true;
|
||||
this.showDonationError = false;
|
||||
const donationResponse = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.ADD_DONATION_TO_SUBMITTED_ORDER,
|
||||
amount,
|
||||
false
|
||||
);
|
||||
} else {
|
||||
this.showDonationError = true;
|
||||
this.showDonationSuccess = false;
|
||||
const donationResponse = await baseMixin.methods.dispatchStoreAction(
|
||||
storeActions.ADD_DONATION_TO_SUBMITTED_ORDER,
|
||||
0,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
donationAmount(newValue) {
|
||||
console.log("WATCHED donationAmount changed: ", newValue);
|
||||
this.addDonation(newValue);
|
||||
|
||||
// this.addDonation(newValue);
|
||||
// TODO - when backend code is final, then remove the below and restore the line above
|
||||
if (newValue == 5) {
|
||||
this.addDonation(newValue, "FAILING_PLATE"); // throws error
|
||||
} else {
|
||||
this.addDonation(newValue, "2fast"); // should give successful response
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -3158,22 +3158,32 @@ export const actions = {
|
|||
|
||||
addDonationToSubmittedOrder(context, donationAmount) {
|
||||
console.log("running addDonationToSubmittedOrder()... donationAmount: ", donationAmount);
|
||||
|
||||
|
||||
const submittedOrder = deepClone(baseMixin.methods.getSubmittedOrder());
|
||||
|
||||
if (donationAmount > 0) {
|
||||
console.log("running addDonationToSubmittedOrder()... adding donation to supportingItems in session storage ")
|
||||
submittedOrder.lineItems.supportingItems.push({
|
||||
partNumber: "DONATION",
|
||||
description: null,
|
||||
partType: "DONATION",
|
||||
isInsurable: false,
|
||||
isChildPart: false,
|
||||
laborAmount: 0,
|
||||
sellingPrice: donationAmount,
|
||||
kitPrice: 0,
|
||||
salesTax: null,
|
||||
id: "donation-" + donationAmount,
|
||||
});
|
||||
} else {
|
||||
// filter out all donations
|
||||
console.log("running addDonationToSubmittedOrder()... removing all donation items in supportingItems in session storage ")
|
||||
|
||||
submittedOrder.lineItems.supportingItems.push({
|
||||
partNumber: "DONATION",
|
||||
description: null,
|
||||
partType: "DONATION",
|
||||
isInsurable: false,
|
||||
isChildPart: false,
|
||||
laborAmount: 0,
|
||||
sellingPrice: donationAmount,
|
||||
kitPrice: 0,
|
||||
salesTax: null,
|
||||
id: "donation-" + donationAmount,
|
||||
});
|
||||
|
||||
const nonDonationItems = submittedOrder.lineItems.supportingItems.filter(item => {
|
||||
return item.partType !== "DONATION";
|
||||
});
|
||||
submittedOrder.lineItems.supportingItems = nonDonationItems;
|
||||
}
|
||||
// set to local storage
|
||||
window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue