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

Merge branch 'develop' into feature/Digital/csr-1411

Browse source
This commit is contained in:
hiteshkumar87 2023-10-04 16:50:52 +05:30 committed by GitHub
commit 067c2bd585
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
45 changed files with 1462 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
azure-pipelines.yml
View file

@ -97,6 +97,9 @@ 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_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
@ -154,6 +157,9 @@ 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_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
@ -211,6 +217,9 @@ 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_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
@ -268,6 +277,9 @@ 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_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
indexDeployVariables:
__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)

5
jest.config.js
View file

@ -14,6 +14,9 @@ module.exports = {
"!src/helpers/unit-test-helper.js",
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/reveal/**/*.vue",
"!src/layouts/payment-method/**/*.vue",
"!src/fmg-components/cart/**/*.vue",
"!src/fmg-components/add-vaps-modal-buttons/**/*.vue",
"!src/ux-components/text-link/**/*.vue",
"!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
"!src/common-components/funnel-header/menu-modal/**/*.vue",
@ -24,7 +27,7 @@ module.exports = {
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {
global: {
statements: 80,
statements: 79,
},
},
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit

4
src/constants/endpoints.js
View file

@ -126,6 +126,10 @@ const endpoints = {
url: "/order/api/v1/order/load-session",
method: "POST",
},
GetSignature: {
url: "/order/api/v1/order/sign",
method: "POST",
},
ValidateZip: {
url: "/location/api/v1/location/zip",
method: "GET",

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

@ -49,6 +49,7 @@ const storeActions = {
RUN_EXPERIMENTS_FOR_TRIGGER: "runExperimentsForTrigger",
CLEAR_VIN: "clearVin",
RESET_SAVE_SESSION_PROMISE: "resetSaveSessionPromise",
GET_SIGNATURE: "getSignature",
// DEPENDENCY MUTATIONS
RESET_DAMAGE_STATE_AND_DEPENDENCIES: "resetDamageAndDependencies",
@ -76,6 +77,7 @@ const storeActions = {
SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers",
SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
SAVE_PAYMENT_TYPE: "savePaymentType",
SAVE_PAY_NOW_TYPE: "savePayNowType",
SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:

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

@ -46,6 +46,7 @@ const storeMutations = {
UPDATE_IS_INSURANCE: "updateIsInsurance",
UPDATE_SAVED_SESSION_ID: "updateSavedSessionId",
UPDATE_CRM_CUSTOMER_ID: "updateCrmCustomerId",
UPDATE_PAY_NOW_TYPE: "updatePayNowType",
// EVENT BUS MUTATIONS
ADD_EVENT_TO_BUS: "addEventToBus",

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

@ -197,6 +197,12 @@ export default {
classes += "flex-column";
}
break;
case "addVapsButton":
classes = "row g-4 justify-content-center mb-2";
if (this.isWide) {
classes += " flex-column";
}
break;
case "radio":
classes = "ui-radio d-flex";
break;

218
src/fmg-components/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue Normal file
View file

@ -0,0 +1,218 @@
<template>
<baseInputButton
v-bind="$props"
:buttonWrapperClasses="[
'add-vaps-button w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
{ horizontal: isWide },
]"
v-model="selectedValue">
<div
class="d-flex w-100 align-items-center px-1 h-100 add-vaps-button-content button-content rounded-3"
:class="labelClasses">
<img :id="buttonImageId" :src="buttonImage" :alt="altText" />
<div class="copy-wrapper" :class="isWide ? 'ms-4 me-2' : ''">
<p class="small mb-0" :class="isWide ? 'mt-0' : 'mt-1'">
{{ buttonLabel }}
</p>
<p v-if="buttonLabelSubCopy" class="fs-7 m-0 sub-copy">
{{ buttonLabelSubCopy }}
</p>
</div>
<p class="fs-7 mb-0 link-styling" :class="isWide ? 'mt-0' : 'mt-2'">View details</p>
</div>
</baseInputButton>
</template>
<script>
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
export default {
name: "addVapsButton",
mixins: [inputButtonWrapperMixin],
components: {
baseInputButton,
},
computed: {
labelClasses() {
if (this.isWide) {
let classes = "flex-row py-2 ps-4 pe-4";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
return classes;
} else {
return "flex-column py-2";
}
},
},
};
</script>
<style lang="scss">
@mixin add-vaps-button-focus($box-shadow-color) {
&:focus-visible + .add-vaps-button-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:focus + .add-vaps-button-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
border-radius: 0.5rem;
}
&:checked:focus + .add-vaps-button-content {
box-shadow: 0 0 0 2.5px $box-shadow-color;
}
}
.add-vaps-button {
border: 1px solid $gray-500;
&.has-error {
input[type="checkbox"],
input[type="radio"] {
@include add-vaps-button-focus($red);
}
}
img {
height: auto;
width: 2.6rem;
max-width: 100%;
}
.copy-wrapper {
flex: 1 1 auto;
}
.link-styling {
font-weight: 500;
color: $blue;
text-decoration: underline;
text-underline-offset: 4px;
}
input[type="checkbox"],
input[type="radio"] {
position: absolute;
+ .add-vaps-button-content {
outline: none;
display: flex;
position: relative;
justify-content: space-between;
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $green;
}
}
}
@include add-vaps-button-focus($blue);
+ .add-vaps-button-content::before {
content: "";
position: absolute;
display: flex;
margin: 0 auto;
width: 1rem;
height: 1rem;
margin: 3rem 0 0 0;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
order: 2;
flex-shrink: 0;
color: $gray-600;
}
+ .add-vaps-button-content.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important;
}
+ .add-vaps-button-content.checkboxTop::after {
margin: -1.5rem 0.5rem 0 0 !important;
}
&:checked + .add-vaps-button-content::before {
background: $blue;
}
&:checked + .add-vaps-button-content::after {
content: "";
position: absolute;
margin: 3.2rem 0 0 0;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 11px;
transform: rotate(-45deg);
z-index: 1;
}
}
input[type="radio"] {
+ .add-vaps-button-content::before {
content: "";
display: none;
}
+ .add-vaps-button-content::after {
content: "";
display: none;
}
+ .add-vaps-button-content {
img {
margin-bottom: 0;
}
}
}
&.horizontal {
input[type="checkbox"],
input[type="radio"] {
+ .add-vaps-button-content::before {
content: "";
position: relative;
margin: 0 0.5rem 0 0;
order: 1;
}
&:checked + .add-vaps-button-content::after {
content: "";
margin: -0.15rem 0 0 0;
left: 1.175rem;
}
&:checked + .add-vaps-button-content {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ .add-vaps-button-content {
outline: none;
min-height: 48px;
color: $gray-600;
img {
margin-bottom: 0;
}
p {
color: $gray-600;
text-align: left;
&.sub-copy {
color: $gray-550;
}
}
}
}
}
}
</style>

102
src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue Normal file
View file

@ -0,0 +1,102 @@
<template>
<transition name="fade" mode="out-in">
<div class="add-vaps-buttons" aria-live="polite" v-if="isDisplayed">
<buttonQuestion
ref="buttonQuestion"
:answers="answersToDisplay"
groupName="addVaps"
v-model="selectedValues"
buttonTypeString="addVapsButton"
:buttonTypeObject="addVapsButton"
:isWide="answersToDisplay.length > 1 ? false : true" />
</div>
</transition>
</template>
<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
import addVapsButton from "./add-vaps-button/add-vaps-button";
export default {
name: "add-vaps-modal-buttons",
props: {
cart: Object,
rainDefenseItem: Object,
wiperItems: Object,
vapsTilesCmsName: String,
},
data() {
return {
addVapsButton: addVapsButton,
};
},
computed: {
selectedValues: {
get: function () {
return this.answersToDisplay;
},
set: function (newValue) {
// TODO - emit event to open modal
},
},
isDisplayed() {
return this.showAddRainDefense || this.showAddWipers;
},
showAddRainDefense() {
// if it's not found in the cart
return !this.cart.some((vap) => {
return vap.partType === "RAIN DEFENSE";
});
},
showAddWipers() {
// if it's not found in the cart
return !this.cart.some((vap) => {
return vap.partType.includes(" WIPER");
});
},
rainDefensePrice() {
const lineItem = this.rainDefenseItem;
const price = lineItem.laborAmount + lineItem.sellingPrice + lineItem.kitPrice;
return parseFloat(price).toFixed(2);
},
wipersPrice() {
let price = 0;
const lineItems = this.wiperItems;
lineItems?.forEach((item) => {
price += item.laborAmount + item.sellingPrice + item.kitPrice;
});
return parseFloat(price).toFixed(2);
},
answersCmsData() {
return this.getCmsContent(this.vapsTilesCmsName, "Answers");
},
answersToDisplay() {
const answers = [];
if (!this.answersCmsData) return answers;
const getAnswer = (name, answers) => {
const answerIndex = answers.findIndex((answer) => {
return answer.Name === name;
});
return answers[answerIndex];
};
if (this.showAddWipers) {
const answer = getAnswer("ADD WIPER BLADES", this.answersCmsData);
answer.SubText = "+$" + this.wipersPrice;
answers.push(answer);
}
if (this.showAddRainDefense) {
const answer = getAnswer("ADD RAIN DEFENSE", this.answersCmsData);
answer.SubText = "+$" + this.rainDefensePrice;
answers.push(answer);
}
return answers;
},
},
components: {
buttonQuestion,
},
};
</script>

351
src/fmg-components/cart/cart.vue Normal file
View file

@ -0,0 +1,351 @@
<template>
<div class="cart">
<div class="container-fluid px-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" :class="{ packageWithVAPS: packageWithVAPS }">
<textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
</div>
<div
v-for="(lineItem, i) in displayedPackageLineItems"
:key="i"
:class="[this.displayedPackageLineItems ? 'vaps' : '']">
<span>{{ lineItem.name }}</span>
<span><a href="#">Remove</a></span>
</div>
<hr style="background: red" />
<div
v-for="(lineItem, i) in displayedNonPackageLineItems"
:key="i"
:class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
<span>{{ lineItem.name }}</span>
<span><a href="#">Remove</a></span>
<span>{{ lineItem.price }}</span>
</div>
<div v-if="hasRecycleLineItem">
<span>{{ recycleLabel }}</span
><span>{{ recycleFee }}</span>
</div>
<!-- Sub total, sales tax, total columns -->
<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";
import baseMixin from "@/mixins/base-mixin.js";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { packageNames } from "@/constants/package-names";
import {
getHighestFullySatisfiedTier,
containsLineItemWithPartType,
getPackageContents,
findLineItemsWithPartType,
} from "@/helpers/service-package-helper";
import reviewBlock from "@/layouts/review/review-block/review-block";
import textBlock from "@/digital-components/text-block/text-block";
export default {
name: "modal",
props: {
headerCmsWidgetName: String,
servicePackageOptionsCmsName: String,
damage: Object,
orderLineItems: Object,
availableLineItems: Object,
allowableCartItems: Object,
},
data() {
return {
isActive: false,
//availableVaps: [], TO DO Do we need this?
packageWithVAPS: false,
// packageLevel: "",
};
},
methods: {
toggleClass: function (event) {
this.isActive = !this.isActive;
},
initializeComponent(apiResponses) {
//TO DO Do we need this?
// const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
// this.availableVaps = vapsFromApi;
},
getPackagePriceString(packageName) {
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
},
getPackagePrice(packageName) {
let priceFloat = this.isInsuranceSelected
? 0
: baseMixin.methods.getTierOnePackagePrice(
baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
);
priceFloat += this.getVapsPrice(packageName);
return priceFloat;
},
getVapsPrice(packageName) {
const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
let price = 0;
vapsItems.forEach((item) => {
price += baseMixin.methods.getTotalLineItemPrice(item);
});
return price;
},
//START HERE
getVapsLineItemsForSelectedPackage(packageName) {
const packageContentTypes = getPackageContents(
this.glassToReplace,
this.nullSafeAvailableLineItems,
this.isRepair,
packageName
);
let vapsLineItemsForSelectedPackage = [];
packageContentTypes.forEach((vapType) => {
vapsLineItemsForSelectedPackage.push(
...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
);
});
// console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
return vapsLineItemsForSelectedPackage;
},
},
computed: {
packageNameWidget() {
const servicePackageNames = this.getCmsContent(
this.servicePackageOptionsCmsName,
"Answers"
);
if (!servicePackageNames) {
return "";
}
const currentPackage = servicePackageNames.find(
(entry) => entry.Name === this.packageLevel
);
return currentPackage.SubWidgetName;
},
packageLevel() {
const tier = getHighestFullySatisfiedTier(
this.glassToReplace,
this.availableLineItems,
this.isRepair,
this.vaps
);
return tier;
},
packagePrice() {
let packagePriceString;
if (this.packageLevel.length > 0) {
packagePriceString = this.getPackagePriceString(this.packageLevel);
}
return packagePriceString;
// return (packagePriceString.length > 0) ? packagePriceString : "Test String";
},
displayedPackageLineItems() {
const displayedPackageLineItems = [];
const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
//TO DO Could we get the same list from this.orderLineItems?
packageLineItems?.forEach((item) => {
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
const packageLineItem = {
name: item.partType,
price: "$" + parseFloat(price).toFixed(2),
partType: item.partType,
isRemovable: item.isRemovable,
};
displayedPackageLineItems.push(packageLineItem);
});
// console.log("What displayedPackageLineItems is", packageLineItems);
return displayedPackageLineItems;
},
displayedNonPackageLineItems() {
const displayedNonPackageLineItems = [];
const possibleLineItems = [...this.vaps, ...this.supportingItems];
possibleLineItems?.forEach((item) => {
let price = item.sellingPrice + item.kitPrice + item.laborAmount;
const isAllowed = this.allowableLineItems?.findIndex((lineItem) => {
return lineItem.partType === item.partType;
});
const indexFound = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
return packageLineItem.partType === item.partType;
});
const isInPackage = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
return packageLineItem.partType === item.partType;
});
if (isInPackage === -1 && isAllowed > -1) {
const nonPackageLineItem = {
name: item.partType,
price: "$" + parseFloat(price).toFixed(2),
partType: item.partType,
isRemovable: item.isRemovable,
};
displayedNonPackageLineItems.push(nonPackageLineItem);
}
});
return displayedNonPackageLineItems;
},
glassToReplace() {
if (!this.damage) {
return;
}
return this.damage.glassToReplace;
},
isRepair() {
if (!this.damage) {
return;
}
return this.damage.isRepair;
},
vaps() {
const vaps = this.orderLineItems?.vaps;
return vaps?.length > 0 ? vaps : [];
},
supportingItems() {
const supportingItems = this.orderLineItems?.supportingItems;
return supportingItems?.length > 0 ? supportingItems : [];
},
recycleLabel() {
return "Recycling";
},
recycleFee() {
return "$35.00";
},
hasRecycleLineItem() {
//TO DO
// if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
// return true;
// } else {
// return false;
// }
return true;
},
nullSafeAvailableLineItems() {
return this.availableLineItems ?? [];
},
},
components: {
textBlock,
},
};
</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-child(odd) {
background-color: #f5f5f5;
}
&:nth-last-child(-n + 3) {
background-color: #e3f2ea;
}
&:last-child {
background-color: #0c7e47;
color: #ffffff;
}
}
.vaps {
background-color: #f5f5f5;
padding-left: 2.5rem;
align-items: center;
span {
display: flex;
width: 33.33333%;
&:nth-child(2) {
justify-content: flex-end;
}
&:last-child {
justify-content: flex-end;
}
}
}
.package-type,
.service-type {
//background-color: #f5f5f5;
align-items: center;
}
.sub-total,
.sales-tax,
.amount-due {
font-weight: 500;
}
.sub-total {
border-top: 1px solid #0c7e47;
}
.service-type {
// background-color: #f5f5f5;
.text-block {
background: transparent;
margin-top: 0;
padding: 0;
}
}
}
.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: 650px;
transition: all 350ms ease-in;
overflow: hidden;
}
}
}
</style>

7
src/fmg-components/funnel-header/funnel-header.vue
View file

@ -7,7 +7,7 @@
</div>
<alert
v-if="displayGlobalAlert"
class="position-absolute rounded-0 w-100 border-0 shadow-sm"
class="rounded-0 w-100 border-0 shadow-sm"
cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy"
@ -63,14 +63,11 @@ export default {
<style lang="scss" scoped>
.funnel-header {
position: relative;
padding: 0.97rem 0;
}
.logo-image {
max-width: 78px;
}
.alert {
left: 0;
top: 72px;
}
</style>

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

@ -1,4 +1,16 @@
<template>
<div class="menu-modal-container">
<button
class="menu-button"
type="button"
:class="[isActive ? 'active' : '']"
@click="toggleModal"
aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<div class="menu-modal-container">
<button
class="menu-button"
@ -20,18 +32,6 @@
aria-labelledby="footerModalLabel"
aria-hidden="true"
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }">
<div class="menu-modal-container">
<button
class="menu-button"
type="button"
:class="[isActive ? 'active' : '']"
@click="toggleModal"
aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">

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

@ -2,8 +2,8 @@
<div :class="`questions-page`">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>

2
src/fmg-components/nav-bar/nav-bar.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="row"></div>
<div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
<div class="row d-flex flex-row-reverse align-items-center vw-100">
<div class="row d-flex flex-row-reverse justify-content-between align-items-center vw-100">
<div
:class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
id="stacked">

7
src/helpers/heritage-integration/order-helper.js
View file

@ -72,6 +72,13 @@ export async function saveSession({ pageNameToLog, shouldAwaitSaveSessionQueue =
}
}
export async function submitWorkOrder({ pageNameToLog }) {
await saveSession({
pageNameToLog: pageNameToLog,
shouldAwaitSaveSessionQueue: true,
});
}
// PRIVATE FUNCTIONS //
/*

114
src/helpers/heritage-integration/order-helper.spec.js
View file

@ -1,5 +1,9 @@
import * as cookieHelper from "@/helpers/heritage-integration/cookie-helper";
import { loadSessionIfPresent, saveSession } from "@/helpers/heritage-integration/order-helper";
import {
loadSessionIfPresent,
saveSession,
submitWorkOrder,
} from "@/helpers/heritage-integration/order-helper";
import { cookieNames } from "@/constants/cookie-names";
import {
setupMocksForJsFiles,
@ -239,3 +243,111 @@ describe("saveSession", () => {
expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);
});
});
describe("submitWorkOrder", () => {
afterEach(() => {
removeAllTestCookies();
});
test("submitWorkOrder => should set state order values", async () => {
// Arrange
const mockReferralNumber = "2";
const mockCorrelationId = "55";
const mockReferralDate = "2022";
const mockParentAccountNumber = "167132";
const mockSavedSessionId = "xxx-xxx-xxx";
const mockCrmCustomerId = "xxx-xxx-xxx";
const mockOrderInfo = getMockOrderInfo(
mockReferralNumber,
mockCorrelationId,
mockReferralDate,
mockParentAccountNumber,
mockSavedSessionId,
mockCrmCustomerId
);
const mockData = {
actionList: [
{
actionName: storeActions.SAVE_SESSION,
data: mockOrderInfo,
},
{
actionName: storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE,
},
],
};
const mocks = setupMocksForJsFiles(mockData);
// Act
await submitWorkOrder({ pageNameToLog: "test" });
// Assert
expect(mocks.baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledWith(
storeActions.SAVE_SESSION,
null,
"test"
);
expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(
storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE,
{
referralNumber: mockReferralNumber,
referralDate: mockReferralDate,
referralCorrelationId: mockCorrelationId,
parentAccountNumber: mockParentAccountNumber,
savedSessionId: mockSavedSessionId,
crmCustomerId: mockCrmCustomerId,
},
false
);
});
test("submitWorkOrder => should update DidHeritageFunnelUpdateLast cookie value to false", async () => {
// Arrange
const mockReferralNumber = 1566818;
const mockReferralDate = "2022-03-15T10:56:24.597";
const mockReferralCorrelationId = "404d2b04-f86e-45c3-b373-127b6217b060";
const mockParentAccountNumber = "167132";
const mockSavedSessionId = "xxx-xxx-xxx";
const mockCrmCustomerId = "xxx-xxx-xxx";
const mockOrderInfo = getMockOrderInfo(
mockReferralNumber,
mockReferralCorrelationId,
mockReferralDate,
mockParentAccountNumber,
mockSavedSessionId,
mockCrmCustomerId
);
const mockData = {
actionList: [
{
actionName: storeActions.SAVE_SESSION,
data: mockOrderInfo,
},
],
router: router,
};
setupMocksForJsFiles(mockData);
const testCookieValue = {
ReferralNumber: mockReferralNumber,
ReferralDate: mockReferralDate,
ReferralCorrelationId: mockReferralCorrelationId,
ShouldResetState: false,
DidHeritageFunnelUpdateLast: true,
};
setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
// Act
await submitWorkOrder({ pageNameToLog: "test" });
// Assert
expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);
});
});

1
src/helpers/service-package-helper.js
View file

@ -11,7 +11,6 @@ export function findLineItemsWithPartType(typeToFind, itemsToSearch) {
const partTypeMatches = itemsToSearch?.filter(
(lineItem) => lineItem.partType.toUpperCase() === typeToFind.toUpperCase()
);
return partTypeMatches;
}

4
src/layouts/address-lookup/address-lookup.vue
View file

@ -6,8 +6,8 @@
v-slot="{ meta }"
autocomplete="off">
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
</div>
</div>

4
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -1,8 +1,8 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>

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

@ -82,7 +82,6 @@ import { routerParams } from "@/router/router-constants/router-params";
import { required, regex } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { useField, validate } from "vee-validate";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import store from "@/store";
// DEFINE VALIDATION RULES
@ -178,7 +177,6 @@ export default {
false
);
this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
},
},

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

@ -2,8 +2,8 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>

6
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -1,8 +1,8 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
@ -15,6 +15,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion
class="mb-4 mt-5"
cmsWidgetName="LicensePlateNumberQuestionWidget"
v-model="licensePlate"
isRequired
@ -22,6 +23,7 @@
validationRules="license-plate-required" />
<textboxQuestion
class="mb-4"
cmsWidgetName="RegistrationZipQuestionWidget"
v-model="registrationZipCode"
customInputId="zip"

66
src/layouts/payment-method/payment-method.spec.js
View file

@ -1 +1,65 @@
test.todo("some test to be written in the future");
// Components
import customerDetails from "@/layouts/payment-method/payment-method.vue";
// Supporting Files
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
submitWorkOrder: jest.fn(),
}));
describe("payment-method.vue", () => {
describe("navigation", () => {
test("if the back button is clicked, navigate back", async () => {
// Arrange
const { wrapper } = setupMocks();
// Act
await wrapper.vm.backButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
});
test("if the continue button is clicked, navigate forward", async () => {
// Arrange
const { wrapper } = setupMocks();
// Act
await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled();
});
});
});
function setupMocks() {
store.getters = {
damage: {},
lineItems: [],
};
const wrapper = shallowMount(
customerDetails,
getMountOptions({
router: {
navigate: jest.fn(),
navigateWithSaving: jest.fn(),
navigateWithoutSaving: jest.fn(),
},
store: {
getters: store.getters,
},
})
);
return { wrapper };
}

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

@ -1,17 +1,69 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
<hr class="mt-0" />
<div class="fade-on-route-transition sub-container make-tall">
<navbar
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
<cart
:damage="damageInfo"
:orderLineItems="orderLineItems"
:availableLineItems="cartItems"
servicePackageOptionsCmsName="ServicePackageTitle" />
<add-vaps-modal-buttons
:cart="cartItems"
:wiperItems="availableWipers"
:rainDefenseItem="availableRainDefense"
vapsTilesCmsName="VapsProductTiles" />
<div>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="We accept Visa" />
</button>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="Mastercard" />
</button>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="American Express" />
</button>
<button v-on:click="ccdPayment">
<img
src="data:image/png;base64,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"
alt="and Discover" />
</button>
</div>
<div>
<button v-on:click="paypal">
<img
src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_100x26.png"
alt="PayPal" />
</button>
</div>
<navbar
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
@ -22,45 +74,130 @@
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import addVapsModalButtons from "@/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons";
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import baseMixin from "@/mixins/base-mixin.js";
import { settleAllPromises } from "@/helpers/layout-helper";
// Validation
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { Form } from "vee-validate";
export default {
name: "payment-method",
name: "paymentMethod",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// TODO: Data fetching Promise declarations
const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_WIPERS,
null,
"payment-method"
);
const rainDefensePromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_RAIN_DEFENSE,
null,
"payment-method"
);
const supportingItemsPromise = baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.GET_SUPPORTING_ITEMS,
null,
"payment-method"
);
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "wipers",
promise: wipersPromise,
},
{
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "supportingItems",
promise: supportingItemsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = store.getters.order.lineItems.glassParts
? JSON.parse(JSON.stringify(store.getters.order.lineItems.glassParts))
: [];
const availableLineItems = [
resultMap.rainDefense,
...resultMap.supportingItems,
...resultMap.wipers,
...clonedGlassParts,
];
const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
{
availableLineItems: availableLineItems,
},
"payment-method",
false
);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.pricedGlassParts = clonedGlassParts;
vm.supportingItems = resultMap.supportingItems;
vm.availableLineItems = pricingResults;
vm.availableWipers = resultMap.wipers;
vm.availableRainDefense = resultMap.rainDefense;
});
},
data() {
return {};
return {
cartItems: [],
availableWipers: null,
availableRainDefense: null,
availableLineItems: null,
supportingItems: null,
pricedGlassParts: null,
};
},
methods: {
arePagePrerequisitesValid() {
// TODO
return true;
},
backButtonAction() {},
forwardButtonAction() {
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
vapsItemsSelectedAction(vapsItemsSelected) {
this.cartItems = vapsItemsSelected;
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
await submitWorkOrder({ pageNameToLog: "payment-method" });
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
async ccdPayment() {
await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "cc", false);
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_PAY_NOW, this.$route);
},
async paypal() {
await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "pp", false);
this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_PAY_NOW, this.$route);
},
},
computed: {
damageInfo() {
return this.$store.getters.damage;
},
orderLineItems() {
return this.$store.getters.lineItems;
},
},
components: {
@ -68,8 +205,9 @@ export default {
navbar,
funnelSubHeader,
Form,
loadingModal,
cart,
addVapsModalButtons,
},
};
</script>
<style lang="scss"></style>

268
src/layouts/payment/payment.vue Normal file
View file

@ -0,0 +1,268 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
<loadingModal ref="loadingModal" />
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
<funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" leftAlignHeader />
<hr class="mt-0" />
<iframe
class="hop-iframe payment-iframe"
name="card-frame"
seamless
scrolling="no"></iframe>
<div class="fade-on-route-transition sub-container make-tall">
<navbar
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
:isBackButtonHidden="shouldHideBackButton"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</Form>
<form
ref="myForm"
id="card-data"
:target="paymentType == 'pp' ? '_top' : 'card-frame'"
method="POST"
:action="checkoutUrl">
<input type="hidden" name="paymentType" :value="paymentType" />
<input type="hidden" name="sgSessionId" :value="authToken" />
<input type="hidden" name="sgAuthToken" :value="authToken" />
<input type="hidden" name="sgSignaturePublic" :value="authSignature" />
<input type="hidden" name="sgSignatureStartDate" :value="authSignatureStart" />
<input type="hidden" name="referralSeqNum" :value="referralSequenceNumber" />
<input type="hidden" name="sge_commerce_indicator_isinternet" value="true" />
<input type="hidden" name="sghopsource" value="Safelite.com" />
<input type="hidden" name="sgHtmlStyle" value="ResourceSafeliteHtml" />
<input type="hidden" name="sgErrorMessagesEmbedded" value="true" />
<input type="hidden" name="sgNoKeystrokeProcessing" value="false" />
<input type="hidden" name="maskCharacter" value="*" />
<input
type="hidden"
name="styleSheetCode"
value="https://fixmyglasstest.safelite.com/FixMyGlass/css/experiments/site-2020Styling.css" />
<input
type="hidden"
name="styleSheetCode2"
value="https://fixmyglasstest.safelite.com/FixMyGlass/css/experiments/SLHop-2020Styling.css" />
<input
type="hidden"
name="sgReceiptResponseURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Success.aspx" />
<input
type="hidden"
name="sgDeclineResponseURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Cancel.aspx" />
<input
type="hidden"
name="sgErrorResponseURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Error.aspx" />
<input type="hidden" name="sgheaderline1" value="Submit payment information" />
<input type="hidden" name="sgHeader1subtitle" value="" />
<input
type="hidden"
name="sgheaderline2"
value="Save time when you pay for your service today! Please select a payment option." />
<input type="hidden" name="sgheaderline3" value="" />
<input type="hidden" name="sgheaderline4" value="" />
<input type="hidden" name="sgheaderline5" value="*Required information" />
<input type="hidden" name="billTo_firstName" value="MATT" />
<input type="hidden" name="billTo_firstNameShow" value="true" />
<input type="hidden" name="sghopmiddleInitialShow" value="false" />
<input type="hidden" name="billTo_lastName" value="CAIMI" />
<input type="hidden" name="billTo_lastNameShow" value="true" />
<input type="hidden" name="billTo_street1" value="" />
<input type="hidden" name="billTo_street2" value="" />
<input type="hidden" name="billTo_city" value="" />
<input type="hidden" name="billTo_state" value="" />
<input type="hidden" name="billTo_postalCode" value="" />
<input type="hidden" name="billTo_postalCodeShow" value="true" />
<input type="hidden" name="billTo_postalCodeEnable" value="true" />
<input type="hidden" name="sgLabelPostalCode" value="Billing ZIP" />
<input type="hidden" name="sgtotalamount" value="$212.83" />
<input type="hidden" name="totalAmountDecimal" value="212.83" />
<input type="hidden" name="lineItems" value="Labor|189.99|1||Repair supplies|7.99|1" />
<input type="hidden" name="sgdiscountstrikethruamount" value="" />
<input type="hidden" name="callerDisplayText" value="" />
<input
type="hidden"
name="sgtermsofusedisplaytext"
value="By selecting submit, I agree to Safelite's" />
<input type="hidden" name="sgtermsofuseurl" value="http://www.safelite.com/terms-of-use/" />
<input type="hidden" name="sgtermsofuselinkdisplaytext" value="terms of use" />
<input type="hidden" name="sgtermsofcancelrefunddisplaytext" value="and" />
<input
type="hidden"
name="sgtermsofcancelrefundlinkdisplaytext"
value="cancellation and refund policy" />
<input
type="hidden"
name="sgtermsofcancelrefundurl"
value="http://www.safelite.com/cancellation-refund-policy" />
<input
type="hidden"
name="sgErrorMessageCardVerification"
value="Credit card could not be processed" />
<input
type="hidden"
name="sgErrorMessageTimeOut"
value="For your security, this transaction has been timed out." />
<input type="hidden" name="sgLabelCardNumber" value="" />
<input type="hidden" name="sgLabelAddressLine1" value="Billing address" />
<input type="hidden" name="sgLabelAddressLine2" value="Apt. number" />
<input type="hidden" name="sgLabelCity" value="City" />
<input type="hidden" name="sgLabelState" value="State" />
<input type="hidden" name="sgCtu" value="01820" />
<input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
<input type="hidden" name="sgEmailAddress" value="builddigitaltest@safelite.com" />
<input type="hidden" name="paypalInvoiceNumber" :value="invoiceNumber" />
<input type="hidden" name="payPalSuccessUrl" :value="payPalSuccessUrl" />
<input type="hidden" name="paypalCancelUrl" :value="payPalCancelUrl" />
<input
type="hidden"
name="sgCCDeclineURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccDecline" />
<input
type="hidden"
name="sgCCTimeoutURL"
value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccTimeout" />
<input type="hidden" name="sgTransactionType" value="authorization" />
<input type="hidden" name="amount" value="212.83" />
<input type="hidden" name="ctu" value="01820" />
<input type="hidden" name="orderNumber" :value="workOrderNumber" />
<input type="hidden" name="billTo_email" value="builddigitaltest@safelite.com" />
<input type="hidden" name="useDecisionManager" value="True" />
<input type="hidden" name="correlationId" value="84cae814-d1b6-433e-aa34-7a39ec49ee97" />
<input type="hidden" name="sgErrorMessageCard_CVN" value="Please enter a valid CVV" />
<input
type="hidden"
name="ship_to_address_line1"
value="SAFELITE AUTOGLASS - COLUMBUS, OH NCR-CTU" />
<input type="hidden" name="ship_to_address_line2" value="760 DEARBORN PARK LN" />
<input type="hidden" name="ship_to_address_city" value="WORTHINGTON" />
<input type="hidden" name="ship_to_address_state" value="OH" />
<input type="hidden" name="ship_to_address_country" value="US" />
<input type="hidden" name="ship_to_address_postal_code" value="43085" />
<input type="hidden" name="ship_to_phone" value="8888888888" />
</form>
</template>
<script>
// Components
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import { storeActions } from "@/constants/store-actions";
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";
// Validation
import { Form } from "vee-validate";
export default {
name: "payment",
data() {
return {
checkoutUrl: externalUrls.SAFELITE_HOP,
payPalSuccessUrl: externalUrls.PAYPAL_SUCCESS_URL,
payPalCancelUrl: externalUrls.PAYPAL_CANCEL_URL,
paymentType: store.getters.order.payment.payNowType,
authToken: "",
authSignature: "",
authSignatureStart: "",
referralSequenceNumber: store.getters.order.referralSequenceNumber,
// TODO: replace these random numbers
workOrderNumber: Math.floor(Math.random() * 90000) + 10000,
invoiceNumber: "1820" + Math.floor(Math.random() * 90000) + 10000,
};
},
async mounted() {
this.fetchSignatureInfo();
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// TODO: Data fetching Promise declarations
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
arePagePrerequisitesValid() {
// TODO
return true;
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {},
async fetchSignatureInfo() {
const signatureInfo = await this.dispatchStoreAction(storeActions.GET_SIGNATURE);
this.authToken = signatureInfo.data.token;
this.authSignature = signatureInfo.data.signature;
this.authSignatureStart = signatureInfo.data.startDate;
this.$nextTick(() => {
this.$refs.myForm.submit();
});
},
},
components: {
funnelHeader,
navbar,
funnelSubHeader,
Form,
},
};
</script>
<style lang="scss">
.payment-iframe {
height: 100%;
}
.hop-iframe {
position: relative;
min-height: 1300px;
width: 100%;
border: 0 none;
}
</style>

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

@ -2,8 +2,8 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
@ -146,7 +146,6 @@ export default {
resultMap.supportingItems,
false
);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);

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

@ -125,6 +125,9 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
// Validation
import { Form } from "vee-validate";
export default {
name: "review",
async beforeRouteEnter(to, from, next) {
@ -231,7 +234,12 @@ export default {
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {},
forwardButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
editVehicle() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_VEHICLE_EDIT,
@ -310,6 +318,7 @@ export default {
serviceLocationReview,
scheduleReview,
customerReview,
Form,
},
};
</script>

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

@ -2,8 +2,8 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>

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

@ -2,8 +2,8 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>

9
src/layouts/service-location/shop-question/shop-question.spec.js
View file

@ -311,8 +311,7 @@ describe("shop-question.vue", () => {
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
// Assert
expect(showMoreShopsLink.exists()).toBe(true);
expect(showMoreShopsLink.isVisible()).toBe(false);
expect(showMoreShopsLink.exists()).toBe(false);
});
it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
@ -375,6 +374,12 @@ describe("shop-question.vue", () => {
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.setData({
displaySeeMoreLocationsLink: true,
});
await wrapper.vm.$nextTick();
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
await wrapper.vm.$nextTick();

2
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -22,7 +22,7 @@
validationRules="option-required"
:additionalButtonData="additionalButtonData" />
<textLink
v-show="displaySeeMoreLocationsLink"
v-if="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId"

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

@ -1,8 +1,8 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid page-container-grouped-styles vehicle-damage">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
@ -32,6 +32,7 @@
groupName="DamageLocationQuestion" />
<windshieldOptions
class="windshield-options"
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
@ -547,10 +548,12 @@ export default {
<style lang="scss">
.vehicle-damage {
@include media-breakpoint-up(md) {
.col {
flex: 0 0 auto;
width: 33.33333333%;
.windshield-options {
@include media-breakpoint-up(md) {
.col {
flex: 0 0 auto;
width: 33.33333333%;
}
}
}
}

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

@ -3,8 +3,8 @@
<div class="vehicle-parts small-question-text">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>

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

@ -1,8 +1,8 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
@ -48,7 +48,6 @@
validationRules="style-required"
placeHolderText="Select style"
inputId="styleQuestionField" />
<div class="col-md-3">&nbsp;</div>
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"

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

@ -2,8 +2,8 @@
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<loadingModal ref="loadingModal" />
<div class="container-fluid page-container-grouped-styles">
<div class="row">
<div class="col">
<div class="row justify-content-center">
<div class="col-md-6">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
</div>
</div>
@ -16,6 +16,7 @@
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<textboxQuestion
class="mb-4 mt-5"
cmsWidgetName="VinNumberQuestionWidget"
v-model="vin"
customInputId="vin"
@ -37,9 +38,10 @@
v-if="displayVinScanFailedAlert"
alertClass="alert-danger" />
<vinInformation />
<vinInformation class="mb-4" />
<textboxQuestion
class="mb-4"
cmsWidgetName="ServiceZipQuestionWidget"
v-model="serviceZipCode"
customInputId="serviceZipCode"

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

@ -91,7 +91,6 @@ export default {
lineItem.partType != partTypeStrings.RAIN_DEFENSE
);
});
console.log("step one", lineItemsToPrice);
let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
return totalPrice;
},
@ -113,14 +112,7 @@ export default {
lineItem.childParts
);
}
console.log(
"step two, lineItem name: ",
lineItem.partNumber,
" / totalPrice: ",
totalPrice
);
});
console.log("step three", totalPrice);
return totalPrice;
},
getTotalLineItemPrice(lineItem) {

7
src/router/index.js
View file

@ -29,14 +29,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
import { experimentTriggers } from "../constants/experiments";
import { applicationConfig } from "../constants/application-config";
import review from "@/layouts/review/review";
import paymentMethod from "@/layouts/payment-method/payment-method";
const routes = [
{
path: "/payment-method", // This is a temporary route for testing.
name: "payment-method",
component: paymentMethod,
},
{
path: "/",
name: "root",

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

@ -1,5 +1,8 @@
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 };

1
src/router/router-constants/fmgPage-values.js
View file

@ -17,6 +17,7 @@ const fmgPageValues = {
CUSTOMER_DETAILS: "customer-details",
REVIEW: "review",
PAYMENT_METHOD: "payment-method",
PAYMENT: "payment",
CONFIRMATION: "confirmation",
};

3
src/router/router-constants/navigation-scenarios.js
View file

@ -51,6 +51,9 @@ const navigationScenarios = {
CLICKED_SERVICE_LOCATION_EDIT: "CLICKED_SERVICE_LOCATION_EDIT",
CLICKED_SCHEDULE_EDIT: "CLICKED_SCHEDULE_EDIT",
CLICKED_CUSTOMER_EDIT: "CLICKED_CUSTOMER_EDIT",
// Payment
CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
};
export { navigationScenarios };

25
src/router/router-constants/routing-table.js
View file

@ -465,11 +465,36 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_CUSTOMER_EDIT,
destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
},
],
},
{
fmgPageValue: fmgPageValues.PAYMENT_METHOD,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.REVIEW,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.CONFIRMATION,
},
{
scenario: navigationScenarios.CLICKED_PAY_NOW,
destinationFmgPageValue: fmgPageValues.PAYMENT,
},
],
},
{
fmgPageValue: fmgPageValues.PAYMENT,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.CONFIRMATION,

43
src/store/index.js
View file

@ -92,6 +92,7 @@ const getDefaultState = () => {
coverageStatus: null,
},
parentAccountNumber: 0,
payNowType: "cc",
},
schedule: {
date: null,
@ -214,6 +215,9 @@ export const mutations = {
updateIsInsurance(state, isInsurance) {
state.order.payment.isInsurance = isInsurance;
},
updatePayNowType(state, payNowType) {
state.order.payment.payNowType = payNowType;
},
updateInsuranceVerifiedStatus(state, isVerified) {
state.order.payment.insuranceCoverage.isVerified = isVerified;
},
@ -504,6 +508,7 @@ export const mutations = {
// Export Getters
export const getters = {
submitAfterSave: (state) => state.submitAfterSave,
vehicle: (state) => state.order.vehicle,
eventBusItem: (state) => (eventCategory, eventSubCategory) => {
const matchedEvent = state.applicationUser.eventBus.find(
@ -1489,6 +1494,14 @@ export const actions = {
});
},
// Signing Service for Payment
getSignature() {
return globalMethods.callHttpClient({
method: endpoints.GetSignature.method,
endpoint: endpoints.GetSignature.url,
});
},
// Session API Actions
saveSession(context, { pageNameToLog }) {
const vehicle = context.getters.vehicle;
@ -1675,35 +1688,25 @@ export const actions = {
context,
{ year, make, model, style, carId, category, imageUrl, imageVifNumber, imageVifColor }
) {
context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
if (
context.state.order.vehicle.year != year ||
context.state.order.vehicle.make != make ||
context.state.order.vehicle.model != model ||
context.state.order.vehicle.style != style
)
) {
context.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
context.commit(storeMutations.UPDATE_VEHICLE_VIN, null);
if (context.state.order.vehicle.year != year) {
context.commit(storeMutations.UPDATE_YEAR, year);
}
if (context.state.order.vehicle.make != make) {
context.commit(storeMutations.UPDATE_MAKE, make);
}
if (context.state.order.vehicle.model != model) {
context.commit(storeMutations.UPDATE_MODEL, model);
}
if (context.state.order.vehicle.style != style) {
context.commit(storeMutations.UPDATE_STYLE, style);
context.commit(storeMutations.UPDATE_CAR_ID, carId);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, imageVifNumber);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, imageVifColor);
}
context.commit(storeMutations.UPDATE_CAR_ID, carId);
context.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, category);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, imageUrl);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, imageVifNumber);
context.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, imageVifColor);
},
saveVehicleDamage(
@ -1966,6 +1969,10 @@ export const actions = {
context.commit(storeMutations.UPDATE_IS_INSURANCE, isInsurance);
},
savePayNowType(context, payNowType) {
context.commit(storeMutations.UPDATE_PAY_NOW_TYPE, payNowType);
},
saveParentAccountNumber(context, parentAccountNumber) {
context.commit(storeMutations.UPDATE_PARENT_ACCT_NUMBER, parentAccountNumber);
},

11
src/store/store.spec.js
View file

@ -2767,6 +2767,17 @@ describe("Actions", () => {
});
describe("Getters", () => {
it("submitAfterSave, should return true", () => {
// Arrange
const storeState = state;
// Act
mutations.updateWorkOrderFlag(storeState, true);
// Assert
expect(getters.submitAfterSave(storeState)).toEqual(true);
});
it("Vehicle getter, should return vehicle data", () => {
// Arrange
const storeState = state;

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

@ -7,6 +7,7 @@ body {
.container-fluid {
max-width: 1400px;
padding: 0 1.5rem;
position: relative;
.prevent-squish {
overflow-x: unset;
}

5
vue.config.js
View file

@ -7,6 +7,11 @@ process.env.VUE_APP_GOOGLE_PLACES_API_KEY =
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
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-method&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 = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');";

4
vue.release.config.js
View file

@ -4,6 +4,10 @@ process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
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__";
process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC = "__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__"