Update vehicle page
This commit is contained in:
parent
e7c0703eb4
commit
786f785e79
3 changed files with 106 additions and 47 deletions
|
|
@ -127,9 +127,10 @@ export default {
|
||||||
const experimentForLogging = store.getters.applicationUser.experiments.find(
|
const experimentForLogging = store.getters.applicationUser.experiments.find(
|
||||||
(e) => e.universeName === experimentUniverses.CONCEPT_FUNNEL
|
(e) => e.universeName === experimentUniverses.CONCEPT_FUNNEL
|
||||||
);
|
);
|
||||||
const yearQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
|
const yearQuestionInitialDataPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.GET_VEHICLE_YEARS,
|
storeActions.GET_VEHICLE_YEARS,
|
||||||
{}
|
{},
|
||||||
|
"vehicle"
|
||||||
);
|
);
|
||||||
var makeQuestionInitialDataPromise = null;
|
var makeQuestionInitialDataPromise = null;
|
||||||
var modelQuestionInitialDataPromise = null;
|
var modelQuestionInitialDataPromise = null;
|
||||||
|
|
@ -140,35 +141,38 @@ export default {
|
||||||
store.getters.order.vehicle.model &&
|
store.getters.order.vehicle.model &&
|
||||||
store.getters.order.vehicle.style
|
store.getters.order.vehicle.style
|
||||||
) {
|
) {
|
||||||
makeQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
|
makeQuestionInitialDataPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.GET_VEHICLE_MAKES,
|
storeActions.GET_VEHICLE_MAKES,
|
||||||
{
|
{
|
||||||
year: store.getters.order.vehicle.year,
|
year: store.getters.order.vehicle.year,
|
||||||
}
|
},
|
||||||
|
"vehicle"
|
||||||
);
|
);
|
||||||
|
|
||||||
modelQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
|
modelQuestionInitialDataPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.GET_VEHICLE_MODELS,
|
storeActions.GET_VEHICLE_MODELS,
|
||||||
{
|
{
|
||||||
year: store.getters.order.vehicle.year,
|
year: store.getters.order.vehicle.year,
|
||||||
make: store.getters.order.vehicle.make,
|
make: store.getters.order.vehicle.make,
|
||||||
}
|
},
|
||||||
|
"vehicle"
|
||||||
);
|
);
|
||||||
|
|
||||||
styleQuestionInitialDataPromise = baseMixin.methods.dispatchStoreAction(
|
styleQuestionInitialDataPromise = baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.GET_VEHICLE_STYLES,
|
storeActions.GET_VEHICLE_STYLES,
|
||||||
{
|
{
|
||||||
year: store.getters.order.vehicle.year,
|
year: store.getters.order.vehicle.year,
|
||||||
make: store.getters.order.vehicle.make,
|
make: store.getters.order.vehicle.make,
|
||||||
model: store.getters.order.vehicle.model,
|
model: store.getters.order.vehicle.model,
|
||||||
}
|
},
|
||||||
|
"vehicle"
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the concept funnel experiment is found, as it should be when coming from safelite.com, then log the experiment exposure.
|
// If the concept funnel experiment is found, as it should be when coming from safelite.com, then log the experiment exposure.
|
||||||
if (experimentForLogging !== undefined) {
|
if (experimentForLogging !== undefined) {
|
||||||
// Log experiment exposure
|
// Log experiment exposure
|
||||||
baseMixin.methods.dispatchStoreAction(
|
baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.LOG_EXPERIMENT_EXPOSURE,
|
storeActions.LOG_EXPERIMENT_EXPOSURE,
|
||||||
{
|
{
|
||||||
userId: getDeviceIdValue(),
|
userId: getDeviceIdValue(),
|
||||||
|
|
@ -176,6 +180,7 @@ export default {
|
||||||
pageName: to.query.fmgPage,
|
pageName: to.query.fmgPage,
|
||||||
experiment: experimentForLogging,
|
experiment: experimentForLogging,
|
||||||
},
|
},
|
||||||
|
"vehicle",
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -304,12 +309,16 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getVehicle(year, make, model, style) {
|
getVehicle(year, make, model, style) {
|
||||||
return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
|
return this.dispatchStoreActionWithLogging(
|
||||||
year: year,
|
this.storeActions.GET_VEHICLE,
|
||||||
make: make,
|
{
|
||||||
model: model,
|
year: year,
|
||||||
style: style,
|
make: make,
|
||||||
});
|
model: model,
|
||||||
|
style: style,
|
||||||
|
},
|
||||||
|
"vehicle"
|
||||||
|
);
|
||||||
},
|
},
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -354,24 +363,36 @@ export default {
|
||||||
return store.getters.vehicle.style;
|
return store.getters.vehicle.style;
|
||||||
},
|
},
|
||||||
async getMakeOptions(year) {
|
async getMakeOptions(year) {
|
||||||
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MAKES, {
|
return await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
year: year,
|
storeActions.GET_VEHICLE_MAKES,
|
||||||
});
|
{
|
||||||
|
year: year,
|
||||||
|
},
|
||||||
|
"vehicle"
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
async getModelOptions(year, make) {
|
async getModelOptions(year, make) {
|
||||||
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_MODELS, {
|
return await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
year: year,
|
storeActions.GET_VEHICLE_MODELS,
|
||||||
make: make,
|
{
|
||||||
});
|
year: year,
|
||||||
|
make: make,
|
||||||
|
},
|
||||||
|
"vehicle"
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
async getStyleOptions(year, make, model) {
|
async getStyleOptions(year, make, model) {
|
||||||
return await baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_STYLES, {
|
return await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
year: year,
|
storeActions.GET_VEHICLE_STYLES,
|
||||||
make: make,
|
{
|
||||||
model: model,
|
year: year,
|
||||||
});
|
make: make,
|
||||||
|
model: model,
|
||||||
|
},
|
||||||
|
"vehicle"
|
||||||
|
);
|
||||||
},
|
},
|
||||||
getImagefromStore() {
|
getImagefromStore() {
|
||||||
return store.getters.vehicle.imageUrl;
|
return store.getters.vehicle.imageUrl;
|
||||||
|
|
|
||||||
|
|
@ -641,19 +641,23 @@ function provisionalTriggersToString(provisionalTriggers) {
|
||||||
// Export Actions
|
// Export Actions
|
||||||
export const actions = {
|
export const actions = {
|
||||||
// Vehicle API Actions
|
// Vehicle API Actions
|
||||||
getVehicleYears(context) {
|
getVehicleYears(context, { pageNameToLog }) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.GetVehicleYears.method,
|
method: endpoints.GetVehicleYears.method,
|
||||||
endpoint: endpoints.GetVehicleYears.url,
|
endpoint: endpoints.GetVehicleYears.url,
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
lookupVehicleByYmms(context, { year, make, model, style }) {
|
lookupVehicleByYmms(context, { payload: { year, make, model, style }, pageNameToLog }) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.LookupVehicleByYmms.method,
|
method: endpoints.LookupVehicleByYmms.method,
|
||||||
endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
|
endpoint: `${endpoints.LookupVehicleByYmms.url}/${year}/${make}/${model}/${style}`,
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -728,36 +732,44 @@ export const actions = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getVehicleMakes(context, { year }) {
|
getVehicleMakes(context, { payload: { year }, pageNameToLog }) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.GetVehicleMakes.method,
|
method: endpoints.GetVehicleMakes.method,
|
||||||
endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
|
endpoint: `${endpoints.GetVehicleMakes.url}/${year}`,
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getVehicleModels(context, { year, make }) {
|
getVehicleModels(context, { payload: { year, make }, pageNameToLog }) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.GetVehicleModels.method,
|
method: endpoints.GetVehicleModels.method,
|
||||||
endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
|
endpoint: `${endpoints.GetVehicleModels.url}/${year}/${make}`,
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getVehicleStyles(context, { year, make, model }) {
|
getVehicleStyles(context, { payload: { year, make, model }, pageNameToLog }) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.GetVehicleStyles.method,
|
method: endpoints.GetVehicleStyles.method,
|
||||||
endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
|
endpoint: `${endpoints.GetVehicleStyles.url}/${year}/${make}/${model}`,
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getVehicle(context, { year, make, model, style }) {
|
getVehicle(context, { payload: { year, make, model, style }, pageNameToLog }) {
|
||||||
return globalMethods
|
return globalMethods
|
||||||
.callHttpClient({
|
.callHttpClient({
|
||||||
methods: endpoints.GetVehicle.method,
|
methods: endpoints.GetVehicle.method,
|
||||||
endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
|
endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`,
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response;
|
return response;
|
||||||
|
|
@ -844,11 +856,16 @@ export const actions = {
|
||||||
pageName
|
pageName
|
||||||
),
|
),
|
||||||
payload: {},
|
payload: {},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageName,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// Analytics Actions
|
// Analytics Actions
|
||||||
logExperimentExposure(context, { userId, sessionKey, pageName, experiment }) {
|
logExperimentExposure(
|
||||||
|
context,
|
||||||
|
{ payload: { userId, sessionKey, pageName, experiment }, pageNameToLog }
|
||||||
|
) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.LogExperimentExposureIfAssigned.method,
|
method: endpoints.LogExperimentExposureIfAssigned.method,
|
||||||
endpoint: endpoints.LogExperimentExposureIfAssigned.url,
|
endpoint: endpoints.LogExperimentExposureIfAssigned.url,
|
||||||
|
|
@ -869,6 +886,8 @@ export const actions = {
|
||||||
pageName: pageName,
|
pageName: pageName,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
logApiCall: true,
|
||||||
|
pageNameToLog: pageNameToLog,
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -370,7 +370,7 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.getVehicleYears(context);
|
const response = await actions.getVehicleYears(context, { pageNameToLog: "test" });
|
||||||
|
|
||||||
expect(response.data).toEqual([2023, 2022, 2021]);
|
expect(response.data).toEqual([2023, 2022, 2021]);
|
||||||
});
|
});
|
||||||
|
|
@ -385,13 +385,15 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.lookupVehicleByYmms(
|
const response = await actions.lookupVehicleByYmms(context, {
|
||||||
context,
|
payload: {
|
||||||
"2019",
|
year: "2019",
|
||||||
"Acura",
|
make: "Acura",
|
||||||
"ILX",
|
model: "ILX",
|
||||||
"4 DOOR SEDAN"
|
style: "4 DOOR SEDAN",
|
||||||
);
|
},
|
||||||
|
pageNameToLog: "test",
|
||||||
|
});
|
||||||
|
|
||||||
expect(response.data).toEqual({ carId: "C00000001" });
|
expect(response.data).toEqual({ carId: "C00000001" });
|
||||||
});
|
});
|
||||||
|
|
@ -406,7 +408,12 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.lookupVehicleByVin(context, "12345678901234567");
|
const response = await actions.lookupVehicleByVin(context, {
|
||||||
|
payload: {
|
||||||
|
vin: "12345678901234567",
|
||||||
|
},
|
||||||
|
pageNameToLog: "test",
|
||||||
|
});
|
||||||
|
|
||||||
expect(response.data).toEqual({ carId: "C0000001" });
|
expect(response.data).toEqual({ carId: "C0000001" });
|
||||||
});
|
});
|
||||||
|
|
@ -471,7 +478,10 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.getVehicleMakes(context, "2019");
|
const response = await actions.getVehicleMakes(context, {
|
||||||
|
payload: { year: "2019" },
|
||||||
|
pageNameToLog: "test",
|
||||||
|
});
|
||||||
|
|
||||||
expect(response.data).toEqual(["Acura", "Honda"]);
|
expect(response.data).toEqual(["Acura", "Honda"]);
|
||||||
});
|
});
|
||||||
|
|
@ -486,7 +496,10 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.getVehicleModels(context, "2019", "Acura");
|
const response = await actions.getVehicleModels(context, {
|
||||||
|
payload: { year: "2019", make: "Acura" },
|
||||||
|
pageNameToLog: "test",
|
||||||
|
});
|
||||||
|
|
||||||
expect(response.data).toEqual(["ILX", "RDX"]);
|
expect(response.data).toEqual(["ILX", "RDX"]);
|
||||||
});
|
});
|
||||||
|
|
@ -501,7 +514,10 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.getVehicleStyles(context, "2019", "Acura", "ILX");
|
const response = await actions.getVehicleStyles(context, {
|
||||||
|
payload: { year: "2019", make: "Acura", model: "ILX" },
|
||||||
|
pageNameToLog: "test",
|
||||||
|
});
|
||||||
|
|
||||||
expect(response.data).toEqual({ style: "4 DOOR SEDAN" });
|
expect(response.data).toEqual({ style: "4 DOOR SEDAN" });
|
||||||
});
|
});
|
||||||
|
|
@ -516,7 +532,10 @@ describe("Actions", () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
// Assert
|
// Assert
|
||||||
const response = await actions.getVehicle(context, "C00000000");
|
const response = await actions.getVehicle(context, {
|
||||||
|
payload: { year: "2019", make: "Acura", model: "IDX", style: "4-door sedan" },
|
||||||
|
pageNameToLog: "test",
|
||||||
|
});
|
||||||
|
|
||||||
expect(response.data).toEqual({ carId: "C00000000", category: "CAR" });
|
expect(response.data).toEqual({ carId: "C00000000", category: "CAR" });
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue