jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-132: temp updates to enable donation block

Browse source
This commit is contained in:
Adam Caouette 2025-02-19 08:20:26 -05:00
parent cb22453eb0
commit 29b240819f
3 changed files with 144 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
src/fmg-components/donation-block/donation-block.vue
View file

@ -1,65 +1,70 @@
<template> <template>
<div class="donation-block"> <div class="donation-block">
<div class="row"> <form
<div class="col"> ref="donationForm"
<p class="headline text-center" v-html="DonationHeadline"></p> id="donation-form"
</div> @submit.prevent="handleDonationAction">
</div> <div class="row">
<div class="row-align d-flex"> <div class="col">
<div> <p class="headline text-center" v-html="DonationHeadline"></p>
<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>
</div> </div>
</div> </div>
</div> <div class="row-align d-flex">
<div class="row"> <div>
<div class="col"> <img class="w-100 mt-1 me-4" :src="LogoImage" />
<button </div>
class="btn btn-secondary w-100 mb-2" <div>
v-html="DonationAddButtonWidget"></button> <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> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <div class="donation-slider my-4">
<div <input name="amount" id="one" type="radio" value=1 checked />
v-if="donationSuccess" <label for="one" class="label">$1</label>
class="d-flex justify-content-center align-items-center btn-success w-100 mb-2" <input name="amount" id="three" type="radio" value=3 />
v-html="DonationThanksAlertWidget"></div> <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> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <button
<alert class="btn btn-secondary w-100 mb-2"
v-if="donationError" v-html="DonationAddButtonWidget"></button>
cmsWidgetName="DonationErrorWidget" </div>
alertClass="alert-danger" />
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <div
<p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p> 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> <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> </div>
</template> </template>
@ -71,6 +76,8 @@ export default {
props: { props: {
cmsWidgetName: String, cmsWidgetName: String,
modelValue: String, modelValue: String,
showDonationSuccess: Boolean,
showDonationError: Boolean,
}, },
computed: { computed: {
DonationHeadline() { DonationHeadline() {
@ -106,11 +113,17 @@ export default {
}, },
}, },
}, },
data() { // data() {
return { // return {
donationSuccess: true, // donationSuccess: true,
donationError: 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: { components: {
textLink, textLink,

57
src/layouts/confirmation/confirmation.vue
View file

@ -68,7 +68,9 @@
<donationBlock <donationBlock
cmsWidgetName="DonationWidget" cmsWidgetName="DonationWidget"
v-model="donationAmount" v-model="donationAmount"
:donationValues="donationValues" /> :donationValues="donationValues"
:showDonationSuccess="showDonationSuccess"
:showDonationError="showDonationError" />
</div> </div>
<h3>donationAmount: {{ donationAmount }}</h3> <h3>donationAmount: {{ donationAmount }}</h3>
@ -239,7 +241,10 @@ export default {
vaps: [], vaps: [],
submittedOrder: null, submittedOrder: null,
shouldHideRecalibration: null, shouldHideRecalibration: null,
donationAmount: null, donationAmount: 0,
showDonationSuccess: null,
showDonationError: null,
}; };
}, },
computed: { computed: {
@ -513,21 +518,55 @@ export default {
forwardButtonAction() { forwardButtonAction() {
window.location.assign(location.protocol + "//" + location.host); window.location.assign(location.protocol + "//" + location.host);
}, },
async addDonation(amount) { async addDonation(amount, plateTemp) {
// try to call API to add donation to order // try to call API to add donation to order
// TODO - change the following to check the response from the call // TEMP DUMMY CALL TO SIMULATE SUCCESS OR ERROR FROM API CALL
const donationResponse = await baseMixin.methods.dispatchStoreAction( // TO BE REPLACED BY REAL CALL LATER
storeActions.ADD_DONATION_TO_SUBMITTED_ORDER, const donationResponse = await this.dispatchStoreActionWithLogging(
amount, storeActions.LOOKUP_VIN_BY_PLATE,
{ licensePlate: plateTemp, licenseState: "OH" },
"test",
false 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: { watch: {
donationAmount(newValue) { donationAmount(newValue) {
console.log("WATCHED donationAmount changed: ", 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: { components: {

34
src/store/index.js
View file

@ -3161,19 +3161,29 @@ export const actions = {
const submittedOrder = deepClone(baseMixin.methods.getSubmittedOrder()); const submittedOrder = deepClone(baseMixin.methods.getSubmittedOrder());
submittedOrder.lineItems.supportingItems.push({ if (donationAmount > 0) {
partNumber: "DONATION", console.log("running addDonationToSubmittedOrder()... adding donation to supportingItems in session storage ")
description: null, submittedOrder.lineItems.supportingItems.push({
partType: "DONATION", partNumber: "DONATION",
isInsurable: false, description: null,
isChildPart: false, partType: "DONATION",
laborAmount: 0, isInsurable: false,
sellingPrice: donationAmount, isChildPart: false,
kitPrice: 0, laborAmount: 0,
salesTax: null, sellingPrice: donationAmount,
id: "donation-" + 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 ")
const nonDonationItems = submittedOrder.lineItems.supportingItems.filter(item => {
return item.partType !== "DONATION";
});
submittedOrder.lineItems.supportingItems = nonDonationItems;
}
// set to local storage // set to local storage
window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder)); window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
}, },