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

Merge branch 'develop' into feature/CSR-1384-modals-for-add-vaps

Browse source
This commit is contained in:
Adam Caouette 2023-10-11 10:15:51 -04:00
commit 5903115a22
30 changed files with 335 additions and 195 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
azure-pipelines.yml
View file

@ -97,9 +97,7 @@ stages:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
__VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
__VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
__VUE_APP_MY_ACCOUNT__: $(__VUE_APP_MY_ACCOUNT__)
indexDeployVariables:
@ -158,9 +156,7 @@ stages:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
__VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
__VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
__VUE_APP_MY_ACCOUNT__: $(__VUE_APP_MY_ACCOUNT__)
indexDeployVariables:
@ -219,9 +215,7 @@ stages:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
__VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
__VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
@ -279,9 +273,7 @@ stages:
__VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
__VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
__VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
__VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
__VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
__VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
__VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)

2
jest.config.js
View file

@ -27,7 +27,7 @@ module.exports = {
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {
global: {
statements: 78,
statements: 77,
},
},
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit

10
src/constants/application-config.js
View file

@ -11,6 +11,16 @@ const applicationConfig = {
SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
CASH_PARENT_ACCOUNT_NUMBER: 167132,
MY_ACCOUNT: process.env.VUE_APP_MY_ACCOUNT,
PAYPAL_SUCCESS_URL:
location.protocol +
"//" +
location.host +
"/fmg/?fmgPage=payment-pia-return&src=concept-funnel",
PAYPAL_CANCEL_URL:
location.protocol +
"//" +
location.host +
"/fmg/?fmgPage=payment-method&src=concept-funnel",
};
export { applicationConfig };

1
src/constants/store-actions.js
View file

@ -87,6 +87,7 @@ const storeActions = {
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
SAVE_WORK_ORDER_FLAG: "saveWorkOrderFlag",
SAVE_PIA_ERROR_CODE: "savePiaErrorCode",
SAVE_PIA_WORK_ORDER: "savePiaWorkOrder",
};
export { storeActions };

1
src/constants/store-mutations.js
View file

@ -1,6 +1,7 @@
const storeMutations = {
UPDATE_WORK_ORDER_FLAG: "updateWorkOrderFlag",
UPDATE_PIA_ERROR_CODE: "updatePiaErrorCode",
UPDATE_PIA_WORK_ORDER: "updatePiaWorkOrder",
// VEHICLE MUTATIONS
UPDATE_YEAR: "updateYear",

19
src/digital-components/button-question/button-question.vue
View file

@ -223,6 +223,10 @@ export default {
classes = "package-wrapper";
}
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
classes += " two-list-card-width";
}
return classes;
},
buttonsInfo() {
@ -304,18 +308,9 @@ export default {
</script>
<style lang="scss">
.vehicle-damage {
.button-question {
@include media-breakpoint-up(md) {
.col-12 {
width: 66.66666667%;
}
.col {
width: 33.3333333%;
flex: 0 0 auto;
}
}
}
.two-list-card-width {
width: 33.33333333%;
flex: 0 0 auto;
}
.button-question-overflow {
height: calc(100vh - 274px);

2
src/digital-components/date-picker/date-picker.vue
View file

@ -58,7 +58,7 @@
loaderColor="blue"
loaderPosition="center" />
<div class="row form-test-error" id="date-of-month-error">
<ErrorMessage name="date-of-month" class="small mt-1"></ErrorMessage>
<ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
</div>
<button
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"

6
src/fmg-components/cart/cart.vue
View file

@ -7,7 +7,7 @@
@click="toggleClass()">
<div class="col d-flex justify-content-between">
<span class="label">Amount Due</span
><span class="label amount-due">$321.00</span>
><span class="label amount-due">${{ amountDue }}</span>
</div>
</div>
<div class="price-table">
@ -76,6 +76,7 @@ export default {
return {
isActive: false,
packageWithVAPS: false,
amountDue: this.getAmountDue(),
};
},
methods: {
@ -108,6 +109,9 @@ export default {
return price;
},
getAmountDue() {
return baseMixin.methods.getAmountDue(this.storeLineItems);
},
removeItem(item) {
this.$emit("cart-remove", item);
},

2
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -102,7 +102,7 @@ export default {
},
show() {
this.isActive = true;
this.scrollToPageTop();
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
},
hide() {
var self = this;

2
src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue
View file

@ -26,7 +26,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
<questionChain
ref="questionChain"

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

@ -1,56 +1,57 @@
<template>
<div class="page-container-grouped-styles position-relative">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div>{{ workOrderNumber }}</div>
<div>
<div class="container-fluid pb-2">
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<div class="header-container">
<img :src="ScheduleConfirmationImage" />
<span v-html="ScheduleConfirmationText"></span>
</div>
<div class="main">
<div>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles position-relative">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<div>
<div class="container-fluid pb-2">
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<div class="header-container">
<img :src="ScheduleConfirmationImage" />
<span v-html="ScheduleConfirmationText"></span>
</div>
<div class="scheduleText">
<p>{{ this.getScheduleDate() }}</p>
<p>{{ this.getScheduleTime() }}</p>
</div>
<div class="calendar-section">
<div class="add-to-calendar">
<button>
<span class="add-to-calendar-span">
<img
src="~@/assets/img/icons/add-to-calendar.svg"
class="add-to-calendar-img" />
<span class="add-to-calendar-text"
>Add to calendar</span
></span
>
</button>
<div class="main">
<div>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
</div>
<div class="scheduleText">
<p>{{ this.ScheduleDateFormatted }}</p>
<p>{{ this.ScheduleTimeFormatted }}</p>
</div>
<div class="calendar-section">
<div class="add-to-calendar">
<button>
<span class="add-to-calendar-span">
<img
src="~@/assets/img/icons/add-to-calendar.svg"
class="add-to-calendar-img" />
<span class="add-to-calendar-text"
>Add to calendar</span
></span
>
</button>
</div>
</div>
<div
class="appoinmenttext"
v-html="this.AppointmentWordingText"></div>
</div>
<div
class="appoinmenttext"
v-html="this.getAppointmentWordingText()"></div>
<div class="emailtext" v-html="this.ConfirmationEmailText"></div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
isBackButtonHidden="true"
@ForwardClicked="forwardButtonAction"
:buttonSize="true" />
</div>
<div class="emailtext" v-html="this.getConfirmationEmailText()"></div>
<navbar
cmsWidgetName="FunnelFooterWidget"
ref="navbar"
isBackButtonHidden="true"
@ForwardClicked="forwardButtonAction"
:buttonSize="true" />
</div>
</div>
</div>
</div>
</div>
</Form>
</template>
<script>
// Components
@ -62,6 +63,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
import { applicationConfig } from "@/constants/application-config.js";
import { Form } from "vee-validate";
import store from "@/store";
import {
@ -98,7 +100,10 @@ export default {
return this.getCmsContent("ScheduleConfirmationWidget", "Image");
},
ConfirmationEmailText() {
return this.getCmsContent("ConfirmationEmailWidget", "BodyText");
return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
.replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
.replaceAll("&lt;", "<")
.replaceAll("&gt;", ">");
},
ScheduleDate() {
return store.getters.order.schedule.date;
@ -148,17 +153,50 @@ export default {
ProviderZipCode() {
return store.getters.order.serviceLocation.provider.address.zipCode;
},
Year() {
return store.getters.order.vehicle.year;
AppointmentWordingText() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return this.MobileWordingText.replaceAll(
"{custom:ADDRESS}",
this.ServiceLocationFullAddress
);
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return this.DropOffWordingText.replaceAll(
"{custom:ADDRESS}",
this.ProviderFullAddress
);
} else {
return this.InShopWordingText.replaceAll(
"{custom:ADDRESS}",
this.ProviderFullAddress
);
}
},
Make() {
return store.getters.order.vehicle.make;
ServiceLocationFullAddress() {
return `${this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""} ${
this.ServiceLocationAddress
},<br/> ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${
this.ServiceLocationZipCode
}`;
},
Model() {
return store.getters.order.vehicle.model;
ProviderFullAddress() {
return `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
},
Email() {
return store.getters.order.customer.emailAddress;
ScheduleDateFormatted() {
const scheduleDate = new Date(this.ScheduleDate);
return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
scheduleDate
)} ${scheduleDate.getDate()}`;
},
ScheduleTimeFormatted() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return `Between ${get12HourTimeMobileFormat(
this.ScheduleStartTime
)} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return `Drop off before 9:30 AM`;
} else {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
},
},
data() {
@ -192,57 +230,17 @@ export default {
// Schedule
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(schedule.date && schedule.startTime); //removing schedule.endTime for testing
const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
return serviceLocationReqs && scheduleReqs;
},
forwardButtonAction() {
window.location.assign("//www.safelite.com/");
},
getScheduleDate() {
const scheduleDate = new Date(this.ScheduleDate);
return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
scheduleDate
)} ${scheduleDate.getDate()}`;
},
getScheduleTime() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
return `Between ${get12HourTimeMobileFormat(
this.ScheduleStartTime
)} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
return `Drop off before 9:30 AM`;
} else {
return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
}
},
getAppointmentWordingText() {
const ymm = `${this.Year} ${this.Make} ${this.Model}`;
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
const address = `${
this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""
} ${this.ServiceLocationAddress},<br/> ${this.ServiceLocationCity}, ${
this.ServiceLocationState
} ${this.ServiceLocationZipCode}`;
return this.MobileWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
} else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
return this.DropOffWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
} else {
const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
return this.InShopWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
}
},
getConfirmationEmailText() {
return this.ConfirmationEmailText.replace("#EMAIL", this.Email)
.replace("#MY_ACCOUNT_URL", applicationConfig.MY_ACCOUNT)
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">");
},
},
components: {
funnelHeader,
Form,
navbar,
vehicleBanner,
},

2
src/layouts/customer-details/customer-details.vue
View file

@ -7,7 +7,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
<textboxQuestion
class="mb-4"

2
src/layouts/estimate/estimate.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
<div v-if="!skipVin">

91
src/layouts/payment-method/payment-method.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
@ -110,6 +110,7 @@ import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { Form } from "vee-validate";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
export default {
name: "paymentMethod",
@ -202,7 +203,56 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
return true;
// Line Items
const packageReqs = !!store.getters.order.lineItems.supportingItems;
// Service Location
const serviceLocation = store.getters.order.serviceLocation;
const mobileReqs = !!(
serviceLocation.address &&
serviceLocation.city &&
serviceLocation.state &&
serviceLocation.zipCode
);
const providerLocation = serviceLocation.provider.address;
const dropOffInshopReqs = !!(
providerLocation.streetAddress &&
providerLocation.city &&
providerLocation.state &&
providerLocation.zipCode
);
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
// Insurance
const isInsuranceSet = store.getters.order.payment.isInsurance !== null;
// Schedule
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
(!isMobile || schedule.endTime) &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
// Customer
const customer = store.getters.order.customer;
const customerReqs = !!(
customer.firstName &&
customer.lastName &&
customer.phoneNumber &&
customer.emailAddress
);
return (
packageReqs && serviceLocationReqs && isInsuranceSet && scheduleReqs && customerReqs
);
},
openModalAction(modalName) {
this.$refs[modalName].openModal();
@ -243,32 +293,29 @@ export default {
);
},
async ccdPayment() {
//leaving site, clear any save session promises that we will not be able to resolve when we return
this.$refs.loadingModal.showModal();
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "cc", false);
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_PAY_NOW,
this.$route
);
this.piaSetup("cc");
},
async paypal() {
//leaving site, clear any save session promises that we will not be able to resolve when we return
this.$refs.loadingModal.showModal();
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "pp", false);
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_PAY_NOW,
this.$route
);
this.piaSetup("pp");
},
async afterpay() {
this.piaSetup("ap");
},
async piaSetup(payNowType) {
this.$refs.loadingModal.showModal();
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
//leaving site, clear any save session promises that we will not be able to resolve when we return
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "ap", false);
await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, payNowType, false);
// make sure pia error codes are reset, and get a pia work order in delete status
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
this.dispatchStoreAction(storeActions.SAVE_PIA_WORK_ORDER, true);
if (!store.getters.order.workOrderNumber) {
await submitWorkOrder({ pageNameToLog: "payment-method" });
}
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_PAY_NOW,
this.$route

27
src/layouts/payment-pia-return/payment-pia-return.vue
View file

@ -1,5 +1,7 @@
<template>
<div class="confirm" ref="confirm" @click="forwardButtonAction"></div>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<loadingModal notFullScreen ref="loadingModal" />
</Form>
</template>
<script>
@ -8,17 +10,20 @@ import { queryStrings } from "@/constants/query-strings";
import { getQuerystringParameter } from "@/helpers/querystring-helper";
import { storeActions } from "@/constants/store-actions";
import baseMixin from "@/mixins/base-mixin.js";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import { Form } from "vee-validate";
export default {
name: "payment-pia-return",
async mounted() {
this.$refs.loadingModal.showModal();
const piaError = getQuerystringParameter(queryStrings.ERROR);
const token = getQuerystringParameter(queryStrings.TOKEN);
const payerId = getQuerystringParameter(queryStrings.PAYERID);
if (piaError) {
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PAYPAL_ERROR_CODE,
storeActions.SAVE_PIA_ERROR_CODE,
piaError,
false
);
@ -26,7 +31,7 @@ export default {
} else {
if (token && payerId) {
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PAYPAL_ERROR_CODE,
storeActions.SAVE_PIA_ERROR_CODE,
null,
false
);
@ -35,11 +40,18 @@ export default {
true,
false
);
// Final work order submit after returning from PIA.
await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
await submitWorkOrder({ pageNameToLog: "payment-pia-return" });
this.$refs.confirm.click();
this.$refs.loadingModal.isModalVisible = false;
this.$router.navigateWithoutSaving(
this.navigationScenarios.PIA_SUCCESS,
this.$route
);
} else {
baseMixin.methods.dispatchStoreAction(
storeActions.SAVE_PAYPAL_ERROR_CODE,
storeActions.SAVE_PIA_ERROR_CODE,
piaError,
false
);
@ -55,7 +67,10 @@ export default {
this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
},
},
components: {},
components: {
loadingModal,
Form,
},
};
</script>

61
src/layouts/payment/payment.vue
View file

@ -98,7 +98,7 @@
<input type="hidden" name="sgtotalamount" :value="displayAmount" />
<input type="hidden" name="totalAmountDecimal" :value="totalAmount" />
<input type="hidden" name="lineItems" :value="lineItems" />
<input type="hidden" name="lineItems" :value="piaLineItems" />
<input type="hidden" name="sgdiscountstrikethruamount" value="" />
@ -152,7 +152,7 @@
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccTimeout" />
<input type="hidden" name="sgTransactionType" value="authorization" />
<input type="hidden" name="amount" :value="totalAmount" />
<input type="hidden" name="amount" :value="amountDue" />
<input type="hidden" name="ctu" :value="ctu" />
<input type="hidden" name="orderNumber" :value="workOrderNumber" />
@ -185,6 +185,8 @@ import store from "@/store";
import { externalUrls } from "@/router/router-constants/externalUrl-values";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { applicationConfig } from "@/constants/application-config";
import baseMixin from "@/mixins/base-mixin.js";
// Validation
import { Form } from "vee-validate";
@ -194,8 +196,8 @@ export default {
data() {
return {
checkoutUrl: externalUrls.SAFELITE_HOP,
payPalSuccessUrl: externalUrls.PAYPAL_SUCCESS_URL,
payPalCancelUrl: externalUrls.PAYPAL_CANCEL_URL,
payPalSuccessUrl: applicationConfig.PAYPAL_SUCCESS_URL,
payPalCancelUrl: applicationConfig.PAYPAL_CANCEL_URL,
paymentType: this.getPaymentType(),
authToken: "",
authSignature: "",
@ -212,12 +214,11 @@ export default {
phoneNumber: store.getters.order.customer.phoneNumber,
ctu: store.getters.order.serviceLocation.zipCodeCtu,
referralCorrelationId: store.getters.order.referralCorrelationId,
// TODO: replace these
workOrderNumber: Math.floor(Math.random() * 90000) + 10000,
invoiceNumber: Math.floor(Math.random() * 90000) + 10000,
totalAmount: "321.00", // TODO: get from cart?
displayAmount: "$321.00", // TODO: get from cart?
lineItems: "Labor|189.99|1||Repair supplies|7.99|1",
workOrderNumber: this.getWOrkOrderNumber(),
invoiceNumber: this.getInvoiceNumber(),
totalAmount: this.getAmountDue(),
displayAmount: this.getDisplayAmountDue(),
piaLineItems: this.getPiaLineItems(),
sgHeaderline1: this.getHeaderLine1(),
sgHeaderline2: this.getHeaderLine2(),
paypalPayment: this.isPaypal(),
@ -248,6 +249,25 @@ export default {
// TODO
return true;
},
getWOrkOrderNumber() {
if (store.getters.order.workOrderNumber) {
var items = store.getters.order.workOrderNumber.split("-");
return items[1];
}
// no work order, set pia error and return
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, "NO WORK ORDER", false);
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
getInvoiceNumber() {
if (store.getters.order.workOrderNumber) {
return store.getters.order.workOrderNumber.replace("-", "");
}
// no work order, set pia error and return
this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, "NO WORK ORDER", false);
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
getAddress1() {
return store.getters.order.serviceLocation.address
? store.getters.order.serviceLocation.address
@ -288,6 +308,27 @@ export default {
}
return "";
},
getPiaLineItems() {
const itemsClone = { ...store.getters.order.lineItems };
delete itemsClone.serverData;
var itemsForPia = "";
for (var propertyName in itemsClone) {
for (var item in itemsClone[propertyName]) {
var amount =
+itemsClone[propertyName][item].laborAmount +
+itemsClone[propertyName][item].sellingPrice;
itemsForPia += itemsClone[propertyName][item].partType + "|" + amount + "|1|";
}
}
return itemsForPia;
},
getAmountDue() {
return baseMixin.methods.getAmountDue(store.getters.order.lineItems);
},
getDisplayAmountDue() {
return baseMixin.methods.getDisplayAmountDue(store.getters.order.lineItems);
},
isPaypal() {
if (this.getPaymentType() == "pp") {
return true;

2
src/layouts/quote/quote.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />

7
src/layouts/review/review.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
@ -177,8 +177,7 @@ export default {
// damageReqs handles checking for damage, even though it is also required for this section.
const packageReqs = !!(
(damage.isRepair || lineItems.glassParts) &&
lineItems.supportingItems &&
lineItems.vaps
lineItems.supportingItems
);
// Service Location
@ -208,7 +207,7 @@ export default {
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
schedule.endTime &&
(!isMobile || schedule.endTime) &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);

2
src/layouts/schedule/schedule.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<template v-if="ChangeShopLink.length">
<textBlock

20
src/layouts/service-location/service-location.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
<serviceZipModalQuestion
@ -60,7 +60,7 @@
</div>
</div>
<div class="row justify-content-md-center appointment-type">
<div class="col-md-6 col-xxl-4">
<div class="col-md-6">
<appointmentTypeQuestion
v-model="selectedAppointmentType"
v-show="isAppointmentTypeDisplayed"
@ -74,7 +74,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<mobileLocationModalQuestions
customComponentId="mobileLocationQuestions"
v-if="selectedAppointmentType === 'Mobile'"
@ -532,6 +532,20 @@ export default {
</script>
<style lang="scss">
.appointment-type-question {
.button-question {
.col {
padding: 0 0.5rem;
@include media-breakpoint-up(md) {
padding: 0 0.75rem;
}
@include media-breakpoint-up(xl) {
width: 33.3333333%;
flex: 0 0 auto;
}
}
}
}
.question-text {
& > span {
text-align: center;

19
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -24,13 +24,16 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-8 col-xl-6 col-xxl-4">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations"
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
class="windshield-options"
ref="windshieldOptions"
@ -547,14 +550,10 @@ export default {
</script>
<style lang="scss">
.vehicle-damage {
.windshield-options {
@include media-breakpoint-up(md) {
.col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
.replace-options-question {
.two-list-card-width {
width: 100%;
flex: 0 auto;
}
}
</style>

2
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -31,7 +31,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />

2
src/layouts/vehicle/vehicle.vue
View file

@ -7,7 +7,7 @@
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
<vehicleQuestion
ref="vehicleYearQuestion"

2
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -8,7 +8,7 @@
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4 col-xxl-3">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />

19
src/mixins/base-mixin.js
View file

@ -115,6 +115,25 @@ export default {
getTotalLineItemPrice(lineItem) {
return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
},
getDisplayAmountDue(lineItems) {
return this.getAmountDue(lineItems).toLocaleString("en-US", {
style: "currency",
currency: "USD",
});
},
getAmountDue(lineItems) {
// TODO: verify tax is included in lineitems
// Price everything in lineitems except the server data string
var amountDue = 0;
const itemsClone = { ...lineItems };
delete itemsClone.serverData;
for (var propertyName in itemsClone) {
amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
itemsClone[propertyName]
);
}
return amountDue;
},
scrollToPageTop() {
const container = document.getElementsByClassName("page-container-grouped-styles")[0];
container.scrollTo({ top: 0, left: 0, behavior: "smooth" });

2
src/router/router-constants/externalUrl-values.js
View file

@ -1,8 +1,6 @@
const externalUrls = {
HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
SAFELITE_HOP: process.env.VUE_APP_SAFELITE_HOP,
PAYPAL_SUCCESS_URL: process.env.VUE_APP_PAYPAL_SUCCESS_URL,
PAYPAL_CANCEL_URL: process.env.VUE_APP_PAYPAL_CANCEL_URL,
};
export { externalUrls };

8
src/store/index.js
View file

@ -109,6 +109,7 @@ const getDefaultState = () => {
referralCorrelationId: null,
eon: null,
workOrderNumber: null,
createDeleteStatusWorkOrderForPia: false,
},
applicationUser: {
eventBus: [],
@ -223,6 +224,9 @@ export const mutations = {
updatePiaErrorCode(state, piaErrorCode) {
state.order.payment.piaErrorCode = piaErrorCode;
},
updatePiaWorkOrder(state, piaWorkOrder) {
state.order.createDeleteStatusWorkOrderForPia = piaWorkOrder;
},
updateWorkOrderNumber(state, workOrderNumber) {
state.order.workOrderNumber = workOrderNumber;
},
@ -1618,6 +1622,7 @@ export const actions = {
referralNumber: order.referralNumber?.toString(),
referralSequenceNumber: order.referralSequenceNumber,
eon: order.eon,
createDeleteStatusWorkOrderForPia: order.createDeleteStatusWorkOrderForPia,
},
},
logApiCall: true,
@ -1694,6 +1699,9 @@ export const actions = {
savePiaErrorCode(context, piaErrorCode) {
context.commit(storeMutations.UPDATE_PIA_ERROR_CODE, piaErrorCode);
},
savePiaWorkOrder(context, piaWorkOrder) {
context.commit(storeMutations.UPDATE_PIA_WORK_ORDER, piaWorkOrder);
},
// Business domain actions

9
src/styles/common-styles.scss
View file

@ -5,6 +5,7 @@ body {
background-color: #fff;
color: #4d5151;
.container-fluid {
padding: 0 1.5rem;
.prevent-squish {
overflow-x: unset;
}
@ -40,9 +41,11 @@ body {
overflow: hidden;
}
}
//Disable scroll of main container when modal is open
.modal-open {
.page-container-grouped-styles {
overflow: hidden;
.container-fluid {
&.page-container-grouped-styles {
overflow: hidden;
height: auto;
}
}
}

2
vue.config.js
View file

@ -6,8 +6,6 @@ process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutEmbedded.aspx";
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx";
process.env.VUE_APP_PAYPAL_SUCCESS_URL = "http://localhost:8080/fmg/?fmgPage=payment-pia-return&src=concept-funnel";
process.env.VUE_APP_PAYPAL_CANCEL_URL = "http://localhost:8080/fmg/?fmgPage=payment-method&src=concept-funnel";
// GA & GTM
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =

2
vue.release.config.js
View file

@ -5,8 +5,6 @@ process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
process.env.VUE_APP_MY_ACCOUNT = "__VUE_APP_MY_ACCOUNT__";
process.env.VUE_APP_SAFELITE_HOP = "__VUE_APP_SAFELITE_HOP__";
process.env.VUE_APP_PAYPAL_SUCCESS_URL = "__VUE_APP_PAYPAL_SUCCESS_URL__";
process.env.VUE_APP_PAYPAL_CANCEL_URL = "__VUE_APP_PAYPAL_CANCEL_URL__";
// GA & GTM
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";