CSR-98 Fix merge conflicts and some tests
This commit is contained in:
Katie
commit
8d0a3b02b3
15 changed files with 129 additions and 521 deletions
|
|
@ -1,5 +1,7 @@
|
|||
const applicationConfig = {
|
||||
CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY,
|
||||
HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
|
||||
};
|
||||
|
||||
|
||||
export { applicationConfig };
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@ const endpoints = {
|
|||
SaveOrder: {
|
||||
url: "/order/api/v1/order/save",
|
||||
method: "POST",
|
||||
},
|
||||
LoadOrder: {
|
||||
url: "/order/api/v1/order/load",
|
||||
method: "POST",
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,9 @@ const storeActions = {
|
|||
LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
|
||||
GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
|
||||
SAVE_ORDER: "saveOrder",
|
||||
LOAD_ORDER: "loadOrder",
|
||||
SET_REFERRAL_INFORMATION: "setReferralInformation",
|
||||
SET_LOAD_ORDER_DATA: "setLoadOrderData",
|
||||
|
||||
// DEPENDENCY MUTATIONS
|
||||
RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const storeMutations = {
|
|||
UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
|
||||
UPDATE_REFERRAL_DATE: "updateReferralDate",
|
||||
UPDATE_REFERRAL_CORRELATION_ID: "updateReferralCorrelationId",
|
||||
UPDATE_PARENT_ACCT_NUMBER: "updateParentAcctNumber",
|
||||
|
||||
// EVENT BUS MUTATIONS
|
||||
ADD_EVENT_TO_BUS: "addEventToBus",
|
||||
|
|
@ -33,6 +34,7 @@ const storeMutations = {
|
|||
|
||||
// OTHER MUTATIONS
|
||||
UPDATE_PAGE_DATA: "updatePageData",
|
||||
SET_LOAD_ORDER_INFO: "setLoadOrderInformation"
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ export default {
|
|||
apiGatewayUrl = "https://localhost:44346";
|
||||
}
|
||||
|
||||
|
||||
// const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
|
||||
const payloadAndAnalyticsData = Object.assign({}, payload, {
|
||||
AppName: "FixMyGlass",
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
import { storeActions } from "@/constants/store-actions.js";
|
||||
import { storeMutations } from "@/constants/store-mutations.js";
|
||||
import { cookieNames } from "@/constants/cookie-names";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
import store from "@/store";
|
||||
import router from "@/router";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
import baseMixin from "../mixins/base-mixin";
|
||||
|
||||
// Read info from heritage funnel and reset state or load referral
|
||||
export function handleInfoFromHeritageFunnel() {
|
||||
// Read info from heritage funnel and reset state or load referral?
|
||||
export async function loadReferralFromHeritageFunnelIfPresent() {
|
||||
const orderInfo = this.getHeritageCookieValue();
|
||||
|
||||
if (orderInfo?.ShouldResetState) {
|
||||
store.dispatch(storeActions.RESET_STATE);
|
||||
deleteHeritageCookie();
|
||||
// Do nothing if there is no cookie.
|
||||
if(orderInfo === null){
|
||||
return;
|
||||
}
|
||||
else if (orderInfo?.DidHeritageFunnelUpdateLast) {
|
||||
// Load referral here
|
||||
|
||||
// setHeritageCookieProperties({
|
||||
// ShouldResetState: false
|
||||
// })
|
||||
// Reset state if cookie says to.
|
||||
if (orderInfo?.ShouldResetState) {
|
||||
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
|
||||
deleteHeritageCookie();
|
||||
return;
|
||||
}
|
||||
|
||||
// Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
|
||||
await loadOrder();
|
||||
}
|
||||
|
||||
export async function navigateToHeritageFunnel() {
|
||||
|
|
@ -42,15 +44,29 @@ export async function navigateToHeritageFunnel() {
|
|||
|
||||
export async function saveOrder() {
|
||||
const savedOrderInfo = (await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER)).data;
|
||||
store.commit(storeMutations.UPDATE_REFERRAL_NUMBER, savedOrderInfo.referralNumber);
|
||||
store.commit(storeMutations.UPDATE_REFERRAL_DATE, savedOrderInfo.referralDate);
|
||||
store.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, savedOrderInfo.referralCorrelationId);
|
||||
|
||||
// Save the referral information back from the store.
|
||||
await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SET_REFERRAL_INFORMATION, {
|
||||
referralNumber: savedOrderInfo.referralNumber,
|
||||
correlationId: savedOrderInfo.referralCorrelationId,
|
||||
referralDate: savedOrderInfo.referralDate,
|
||||
})
|
||||
|
||||
// Set cookie properties.
|
||||
setHeritageCookieProperties({
|
||||
DidHeritageFunnelUpdateLast: false
|
||||
})
|
||||
}
|
||||
|
||||
export async function loadOrder() {
|
||||
const loadOrderInfo = (await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER)).data;
|
||||
|
||||
// Save the data from the loaded order to state.
|
||||
await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SET_LOAD_ORDER_DATA, { loadOrderInfo });
|
||||
}
|
||||
|
||||
// --------- PRIVATE FUNCTIONS ---------
|
||||
|
||||
/* Start cookie related functions */
|
||||
export function getHeritageCookieValue() {
|
||||
const cookieJson = document.cookie
|
||||
|
|
@ -75,7 +91,7 @@ function setHeritageCookieValue(cookieValue) {
|
|||
let cookieValueJson = cookieValue;
|
||||
if (typeof cookieValue == "object")
|
||||
cookieValueJson = JSON.stringify(cookieValue);
|
||||
|
||||
|
||||
document.cookie = `${cookieNames.ORDER_INFO}=${cookieValueJson}; path=/`;
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +99,7 @@ function setHeritageCookieProperties(properties) {
|
|||
if (typeof properties == "object") {
|
||||
let cookie = getHeritageCookieValue();
|
||||
|
||||
if (cookie != null) {
|
||||
if (cookie !== null) {
|
||||
Object.keys(properties).forEach(key => {
|
||||
cookie[key] = properties[key];
|
||||
});
|
||||
|
|
@ -92,4 +108,4 @@ function setHeritageCookieProperties(properties) {
|
|||
}
|
||||
}
|
||||
}
|
||||
/* End cookie related functions */
|
||||
/* End cookie related functions */
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ import { storeMutations } from "@/constants/store-mutations";
|
|||
import store from "@/store";
|
||||
import router from "@/router";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
describe("handleInfoFromHeritageFunnel", () => {
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
|
||||
describe("loadReferralFromHeritageFunnelIfPresent", () => {
|
||||
afterEach(() => {
|
||||
removeAllTestCookies();
|
||||
});
|
||||
|
|
@ -22,7 +24,7 @@ describe("handleInfoFromHeritageFunnel", () => {
|
|||
document.cookie = `${cookieNames.ORDER_INFO}=${JSON.stringify(testCookieValue)}; path=/; domain=${location.hostname}`;
|
||||
|
||||
// Act
|
||||
helper.handleInfoFromHeritageFunnel();
|
||||
helper.loadReferralFromHeritageFunnelIfPresent();
|
||||
|
||||
// Assert
|
||||
expect(document.cookie).toBe("");
|
||||
|
|
@ -32,25 +34,24 @@ describe("handleInfoFromHeritageFunnel", () => {
|
|||
// Arrange
|
||||
const getHeritageCookieValueMethod = jest.spyOn(helper, "getHeritageCookieValue")
|
||||
getHeritageCookieValueMethod.mockImplementation(() => { return { ShouldResetState: true, DidHeritageFunnelUpdateLast: false } });
|
||||
|
||||
|
||||
const mockData = {
|
||||
actionList: [{
|
||||
actionName: storeActions.RESET_STATE
|
||||
}],
|
||||
}
|
||||
|
||||
|
||||
setupMocksForJsFiles(mockData);
|
||||
store.dispatch = jest.spyOn(store, "dispatch");
|
||||
|
||||
// Act
|
||||
helper.handleInfoFromHeritageFunnel();
|
||||
helper.loadReferralFromHeritageFunnelIfPresent();
|
||||
|
||||
// Assert
|
||||
expect(getHeritageCookieValueMethod).toHaveBeenCalled();
|
||||
expect(store.dispatch).toHaveBeenCalledWith(storeActions.RESET_STATE);
|
||||
expect(baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.RESET_STATE);
|
||||
|
||||
getHeritageCookieValueMethod.mockRestore();
|
||||
store.dispatch.mockRestore();
|
||||
// store.dispatch.mockRestore();
|
||||
});
|
||||
|
||||
test("Heritage cookie is null => store is unchanged", () => {
|
||||
|
|
@ -69,7 +70,7 @@ describe("handleInfoFromHeritageFunnel", () => {
|
|||
setupMocksForJsFiles(mockData);
|
||||
|
||||
// Act
|
||||
helper.handleInfoFromHeritageFunnel();
|
||||
helper.loadReferralFromHeritageFunnelIfPresent();
|
||||
|
||||
// Assert
|
||||
expect(helper.getHeritageCookieValue).toHaveBeenCalled();
|
||||
|
|
@ -94,25 +95,29 @@ describe("saveOrder", () => {
|
|||
const mockOrderInfo = getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockReferralDate);
|
||||
|
||||
const mockData = {
|
||||
actionList: [{
|
||||
actionName: storeActions.SAVE_ORDER,
|
||||
data: mockOrderInfo,
|
||||
}],
|
||||
actionList: [
|
||||
{
|
||||
actionName: storeActions.SAVE_ORDER,
|
||||
data: mockOrderInfo,
|
||||
},
|
||||
{
|
||||
actionName: storeActions.SET_REFERRAL_INFORMATION
|
||||
}
|
||||
],
|
||||
router: router
|
||||
}
|
||||
|
||||
setupMocksForJsFiles(mockData);
|
||||
store.commit = jest.spyOn(store, "commit");
|
||||
|
||||
const mocks = setupMocksForJsFiles(mockData);
|
||||
|
||||
// Act
|
||||
await helper.saveOrder();
|
||||
|
||||
// Assert
|
||||
expect(store.commit).toHaveBeenCalledTimes(3);
|
||||
expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_REFERRAL_NUMBER, mockReferralNumber);
|
||||
expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, mockCorrelationId);
|
||||
expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_REFERRAL_DATE, mockReferralDate);
|
||||
store.commit.mockRestore();
|
||||
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
|
||||
referralNumber: mockReferralNumber,
|
||||
referralDate: mockReferralDate,
|
||||
correlationId: mockCorrelationId
|
||||
});
|
||||
});
|
||||
|
||||
test("saveOrder => should update DidHeritageFunnelUpdateLast cookie value to false", async () => {
|
||||
|
|
@ -200,7 +205,7 @@ describe("navigateToHeritageFunnel", () => {
|
|||
router: router
|
||||
}
|
||||
|
||||
setupMocksForJsFiles(mockData);
|
||||
const mocks = setupMocksForJsFiles(mockData);
|
||||
|
||||
// Act
|
||||
await helper.navigateToHeritageFunnel();
|
||||
|
|
|
|||
|
|
@ -83,4 +83,6 @@ export function setupMocksForJsFiles(mockData = {}) {
|
|||
|
||||
if (mockData.router)
|
||||
mockData.router.navigate = jest.fn();
|
||||
|
||||
return { baseMixin };
|
||||
}
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-3">
|
||||
<div class="col">
|
||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=true />
|
||||
</div>
|
||||
</div>
|
||||
<form>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<label for="autocomplete">Street address</label>
|
||||
<input ref="autocomplete"
|
||||
id="autocomplete"
|
||||
placeholder="Search"
|
||||
class="form-control search-location"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div v-show="showAddressFields" class="row my-4">
|
||||
<div class="col">
|
||||
<label for="city">City</label>
|
||||
<input ref="city"
|
||||
id="city"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div v-show="showAddressFields" class="row my-4">
|
||||
<div class="col-6">
|
||||
<label for="state">State</label>
|
||||
<input ref="state"
|
||||
id="state"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="zip">Zip</label>
|
||||
<input ref="zip"
|
||||
id="zip"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-show="displayVerificationWarning" class="row my-4">
|
||||
<div class="col">
|
||||
<span style="color: red;">An accurate match may not have have been located. Please verify your address before continuing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="displayNoMatchWarning" class="row my-4">
|
||||
<div class="col">
|
||||
<span style="color: red;">An accurate match could not be located. Please re-enter your street address before continuing</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<label for="firstName">First name</label>
|
||||
<input ref="firstName"
|
||||
id="firstName"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<label for="lastName">Last name</label>
|
||||
<input ref="lastName"
|
||||
id="lastName"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<label for="email">Email address</label>
|
||||
<input ref="email"
|
||||
id="email"
|
||||
class="form-control"
|
||||
type="text"
|
||||
autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
vehicleBanner,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAddressFields: false,
|
||||
displayVerificationWarning: false,
|
||||
displayNoMatchWarning: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.vehicleBanner.initializeComponent({
|
||||
GenericVehicleImage:
|
||||
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
|
||||
});
|
||||
|
||||
let addressField1 = document.getElementById("autocomplete");
|
||||
let self = this;
|
||||
|
||||
//let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
|
||||
let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
|
||||
|
||||
this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
|
||||
.then(() => {
|
||||
|
||||
// Script is loaded, initialize the autocomplete textbox
|
||||
self.autocomplete = new window.google.maps.places.Autocomplete(
|
||||
self.$refs.autocomplete,
|
||||
{
|
||||
componentRestrictions: { country: ["us"] },
|
||||
fields: ["address_components"],
|
||||
types: ["address"],
|
||||
}
|
||||
);
|
||||
|
||||
self.autocomplete.addListener('place_changed', fillInAddress);
|
||||
|
||||
addressField1.onblur = function() {
|
||||
var hover = document.querySelector(".pac-container .pac-item:hover");
|
||||
|
||||
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
|
||||
if (hover === null) {
|
||||
var item = document.querySelector(".pac-container .pac-item");
|
||||
if (item != null) {
|
||||
var firstResult = item.textContent;
|
||||
var geocoder = new window.google.maps.Geocoder();
|
||||
geocoder.geocode({
|
||||
address: firstResult
|
||||
}, function (results, status) {
|
||||
if (status === window.google.maps.GeocoderStatus.OK) {
|
||||
fillInAddress(results[0]);
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
let city = document.querySelector("#city");
|
||||
let state = document.querySelector("#state");
|
||||
let zip = document.querySelector("#zip");
|
||||
|
||||
city.value = "";
|
||||
state.value = "";
|
||||
zip.value = "";
|
||||
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function fillInAddress(place) {
|
||||
if (!place) {
|
||||
place = self.autocomplete.getPlace();
|
||||
}
|
||||
|
||||
if (place && place.address_components) {
|
||||
let address1 = "";
|
||||
let city = document.querySelector("#city");
|
||||
let state = document.querySelector("#state");
|
||||
let zip = document.querySelector("#zip");
|
||||
self.showAddressFields = true;
|
||||
|
||||
for (const component of place.address_components) {
|
||||
const componentType = component.types[0];
|
||||
|
||||
switch (componentType) {
|
||||
case "street_number": {
|
||||
address1 = `${component.long_name} ${address1}`;
|
||||
break;
|
||||
}
|
||||
|
||||
case "route": {
|
||||
address1 += component.short_name;
|
||||
break;
|
||||
}
|
||||
case "locality": {
|
||||
city.value = component.long_name;
|
||||
break;
|
||||
}
|
||||
case "administrative_area_level_1": {
|
||||
state.value = component.short_name;
|
||||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
zip.value = component.long_name;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
addressField1.value = address1;
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
}
|
||||
else {
|
||||
self.displayVerificationWarning = true;
|
||||
self.displayNoMatchWarning = false;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
// Failed to fetch script
|
||||
console.log("Unable to load Google Places API script");
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,138 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid">
|
||||
<h4 class="m-0 p-2 bg-light rounded">List Buttons</h4>
|
||||
|
||||
<buttonQuestion :answers="years" text-position="text-start" questionText="List Button as Radio" groupName="years" />
|
||||
|
||||
<buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-start" questionText="List Button as checkbox" groupName="check-box-answers" />
|
||||
|
||||
<buttonQuestion :answers="checkboxAnswers" isMultiSelect text-position="text-end" questionText="List Button as checkbox text end" groupName="check-box-answers-text-right" />
|
||||
|
||||
<buttonQuestion :answers="years" questionText="List Button as Radio text center (default)" groupName="years-text-center" />
|
||||
|
||||
<buttonQuestion :answers="years" selectingInitiatesLoad questionText="List Button as Radio with spinner" groupName="years-text-spinner" />
|
||||
<span>(Selecting button with spinner will cause page overlay, page refresh needed to select buttons from other groups)</span>
|
||||
|
||||
<h4 class="m-0 p-2 bg-light rounded mt-5">List ButtonHorizontals</h4>
|
||||
|
||||
<buttonQuestion buttonType="listButtonHorizontal" :answers="radioAnswers" questionText="List Button Horizontal as radio" groupName="lbh-radio" />
|
||||
|
||||
<buttonQuestion buttonType="listButtonHorizontal" isMultiSelect :answers="horizontalCheckboxAnswers" questionText="List Button Horizontal as checkbox" groupName="lbh-checkbox" />
|
||||
|
||||
<h4 class="m-0 p-2 bg-light rounded mt-5">List Cards</h4>
|
||||
|
||||
<buttonQuestion buttonType="listCard" :answers="listCardRadio" questionText="List Card as radio" groupName="lc-radio" />
|
||||
|
||||
<buttonQuestion isMultiSelect buttonType="listCard" :answers="listCardCheckBox" questionText="List Card as checkbox" groupName="lc-checkbox" />
|
||||
|
||||
<buttonQuestion buttonType="listCard" :answers="listCardGroup" questionText="List Cards as radios" groupName="lc-mult" />
|
||||
|
||||
<buttonQuestion buttonType="listCard" isMultiSelect :answers="listCardGroup" questionText="List Cards as checkboxes" groupName="lcc-mult" />
|
||||
|
||||
<buttonQuestion isWide buttonType="listCard" :answers="listCardGroup" questionText="List Cards as radios full width (text left image right)" groupName="lc-multWide" />
|
||||
|
||||
<buttonQuestion isWide isMultiSelect buttonType="listCard" :answers="listCardGroup" questionText="List Cards as checkboxes full width (text left image right)" groupName="lcc-multWide" />
|
||||
|
||||
<h4 class="m-0 p-2 bg-light rounded mt-5">Radio</h4>
|
||||
|
||||
<buttonQuestion buttonType="radio" :answers="radioAnswers" questionText="Used with radio" groupName="radio" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
buttonQuestion
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: [2023, 2022, 2021, 2020],
|
||||
checkboxAnswers: [
|
||||
"Checkbox Answer 1",
|
||||
"Checkbox Answer 2",
|
||||
"Checkbox Answer 3",
|
||||
],
|
||||
radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"],
|
||||
horizontalCheckboxAnswers: ["HCB Answer 1","HCB Answer 2","HCB Answer 3"],
|
||||
horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"],
|
||||
listCardCheckBox: [
|
||||
{
|
||||
Name: "List-Card-CB",
|
||||
Text: "List Card CB",
|
||||
SubText: "checkbox",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardRadio: [
|
||||
{
|
||||
Name: "List-Card-R",
|
||||
Text: "List Card R",
|
||||
SubText: "Radio",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardCheckBoxHorizontalSubText: [
|
||||
{
|
||||
Name: "List-Card-CBHst",
|
||||
Text: "List Card CBHst",
|
||||
SubText: "With Subtext",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardCheckBoxHorizontal: [
|
||||
{
|
||||
Name: "List-Card-CBH",
|
||||
Text: "List Card CBH",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listRadioHorizontalSubText: [
|
||||
{
|
||||
Name: "List-Card-RHst",
|
||||
Text: "List Card RHst",
|
||||
SubText: "With Subtext",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listRadioHorizontal: [
|
||||
{
|
||||
Name: "List-Card-RH",
|
||||
Text: "List Card RH",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
listCardGroup: [
|
||||
{
|
||||
Name: "Side-Window-1",
|
||||
Text: "Side Window",
|
||||
SubText: "With Subtext",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
{
|
||||
Name: "Side-Window-2",
|
||||
Text: "Side Window",
|
||||
SubText: "With Subtext that is more than one line",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
{
|
||||
Name: "Side-Window-3",
|
||||
Text: "Side Window",
|
||||
ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955",
|
||||
AnswerImageUrl: "https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid nested-radio">
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<listCard
|
||||
groupName="listcard1"
|
||||
isWide="true"
|
||||
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
|
||||
buttonLabel="Green Tint, Blue Shade"
|
||||
buttonID="radio1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-1">
|
||||
<div class="col">
|
||||
<buttonQuestion
|
||||
buttonType="radio"
|
||||
groupName="Demo Group"
|
||||
buttonID="button1"
|
||||
isRequired
|
||||
value="test button"
|
||||
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
|
||||
:answers="demoArray"
|
||||
questionText="ok now select your features"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<listCard
|
||||
groupName="listcard1"
|
||||
isWide="true"
|
||||
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
|
||||
buttonLabel="Green Tint"
|
||||
buttonID="radio2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
|
||||
export default {
|
||||
name: "nestedRadio",
|
||||
components: {
|
||||
buttonQuestion,
|
||||
listCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
demoArray: [
|
||||
"rain sensor, solar, 3rd visor band",
|
||||
"rain sensor, heated glass, solar, 3rd visor band",
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nested-radio {
|
||||
.ui-radio {
|
||||
flex-direction: column;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,17 +5,15 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
|
|||
import { routingTable } from "@/router/router-constants/routing-table.js";
|
||||
import { globalEvents, globalEventTypes } from "@/constants/events";
|
||||
import { routerParameterKeys } from '@/router/router-constants/router-parameter-keys'
|
||||
import { loadReferralFromHeritageFunnelIfPresent, saveOrder, getHeritageCookieValue } from "@/helpers/heritage-integration-helper";
|
||||
|
||||
import baseMixin from "@/mixins/base-mixin";
|
||||
import eventBus from "@/helpers/event-bus/event-bus";
|
||||
import store from "@/store";
|
||||
import { handleInfoFromHeritageFunnel, saveOrder, getHeritageCookieValue } from "@/helpers/heritage-integration-helper";
|
||||
|
||||
// Components
|
||||
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
||||
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
|
||||
import FormTest from "@/layouts/form-test/form-test.vue";
|
||||
import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
|
||||
import buttonQuestionExamples from "@/layouts/button-question-examples/button-question-examples.vue"
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -28,26 +26,6 @@ const routes = [
|
|||
name: "FormTest",
|
||||
component: FormTest,
|
||||
},
|
||||
{
|
||||
path: "/address-poc", // This is a temporary route for testing.
|
||||
name: "AddressPOC",
|
||||
component: AddressPOC,
|
||||
},
|
||||
{
|
||||
path: "/form-test", // This is a temporary route for testing.
|
||||
name: "FormTest",
|
||||
component: FormTest,
|
||||
},
|
||||
{
|
||||
path: "/nested-radio", // This is a temporary route for testing.
|
||||
name: "NestedRadio",
|
||||
component: NestedRadio,
|
||||
},
|
||||
{
|
||||
path: "/button-question-examples", // This is a temporary route for testing.
|
||||
name: "buttonQuestionExamples",
|
||||
component: buttonQuestionExamples,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "root",
|
||||
|
|
@ -55,7 +33,7 @@ const routes = [
|
|||
// On entering the concept funnel
|
||||
if (from.redirectedFrom === undefined) {
|
||||
// Read cookie information, decide what to do next
|
||||
handleInfoFromHeritageFunnel();
|
||||
loadReferralFromHeritageFunnelIfPresent();
|
||||
}
|
||||
|
||||
// If we have no query string, or we don't have the FmgPage query string.
|
||||
|
|
@ -139,9 +117,6 @@ async function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery
|
|||
return;
|
||||
}
|
||||
|
||||
console.log(scenario)
|
||||
console.log(currentRoute)
|
||||
|
||||
// Match our maps up and navigate if we have a destination.
|
||||
const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
|
||||
const destinationFmgPageValue = matchingScenarioMap.destinationFmgPageValue;
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
const externalUrls = {
|
||||
HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
|
||||
};
|
||||
|
||||
export { externalUrls };
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
import { externalUrls } from "@/router/router-constants/externalUrl-values";
|
||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
import { applicationConfig } from "../../constants/application-config";
|
||||
|
||||
const routingTable = [
|
||||
{
|
||||
|
|
@ -60,7 +60,7 @@ const routingTable = [
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
|
||||
destinationUrl: externalUrls.HERITAGE_FUNNEL,
|
||||
destinationUrl: applicationConfig.HERITAGE_FUNNEL,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ const getDefaultState = () => {
|
|||
referralNumber: null,
|
||||
referralDate: null,
|
||||
referralCorrelationId: null,
|
||||
parentAccountNumber: null,
|
||||
},
|
||||
applicationUser: {
|
||||
eventBus: [],
|
||||
|
|
@ -97,6 +98,10 @@ export const mutations = {
|
|||
updateReferralDate(state, referralDate) {
|
||||
state.order.referralDate = referralDate;
|
||||
},
|
||||
updateParentAcctNumber(state, parentAcctNumber) {
|
||||
state.order.parentAccountNumber = parentAcctNumber;
|
||||
},
|
||||
|
||||
|
||||
// EVENT BUS MUTATIONS
|
||||
addEventToBus(state, event) {
|
||||
|
|
@ -139,6 +144,29 @@ export const mutations = {
|
|||
},
|
||||
resetState(state) {
|
||||
Object.assign(state, getDefaultState());
|
||||
},
|
||||
|
||||
// Misc Mutations
|
||||
setLoadOrderInformation(state, orderInformation) {
|
||||
state.order.referralNumber = orderInformation.ReferralNumber;
|
||||
state.order.referralDate = orderInformation.ReferralDate;
|
||||
state.order.referralCorrelationId = orderInformation.CorrelationId;
|
||||
state.order.vehicle = {
|
||||
year: orderInformation.Year,
|
||||
make: orderInformation.Make,
|
||||
model: orderInformation.Model,
|
||||
style: orderInformation.Style,
|
||||
carId: orderInformation.CarId,
|
||||
category: orderInformation.Category,
|
||||
imageUrl: orderInformation.ImageUrl,
|
||||
imageVifNumber: orderInformation.ImageVifNumber,
|
||||
imageColor: orderInformation.ImageColor
|
||||
};
|
||||
state.order.damage.glassToReplace = orderInformation.GlassToReplace;
|
||||
state.order.damage.isRepair = orderInformation.IsRepair;
|
||||
state.order.damage.numberOfChips = orderInformation.NumberOfChips;
|
||||
state.order.lineItems.glassParts = orderInformation.Parts;
|
||||
state.order.parentAccountNumber = orderInformation.ParentAccountNumber;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -287,6 +315,16 @@ export const actions = {
|
|||
});
|
||||
},
|
||||
|
||||
// Misc Actions
|
||||
setReferralInformation(context, { referralNumber, referralDate, referralCorrelationId }) {
|
||||
context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
|
||||
context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate);
|
||||
context.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, referralCorrelationId);
|
||||
},
|
||||
setLoadOrderData(context, { loadOrderData }) {
|
||||
|
||||
},
|
||||
|
||||
// Parts API Actions
|
||||
getPartsOrQuestions(context, { carId, glassArray, zipCode, vin = '' }) {
|
||||
return globalMethods.callHttpClient({
|
||||
|
|
@ -324,6 +362,18 @@ export const actions = {
|
|||
},
|
||||
});
|
||||
},
|
||||
|
||||
loadOrder(context, {referralNumber, referralDate, correlationId}) {
|
||||
return globalMethods.callHttpClient({
|
||||
method: endpoints.LoadOrder.method,
|
||||
endpoint: endpoints.LoadOrder.url,
|
||||
payload: {
|
||||
referralNumber: referralNumber,
|
||||
referralDate: referralDate,
|
||||
correlationId: correlationId
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default createStore({
|
||||
|
|
|
|||
Loading…
Reference in a new issue