Notes

/* eslint-disable no-unused-vars */
import {action, makeObservable, observable, runInAction} from 'mobx';
import cloneDeep from 'lodash-es/cloneDeep';
import isEmpty from 'lodash-es/isEmpty';
import appState from '../../../stores/appState';
import api from '../../../api/api';
import {getFavoritesDb, addFavoriteDb, deleteFavoriteDb, editFavoriteDbv3} from '../../utils/localStorageHelpers';
import {decode} from '../../utils/helpers';
import PcvCustomizeStep from './pcv-customize-step';

class PcvCustomize {
steps = [];
page = 0;

query = {};
initialStore = {};
enableReorder = false;
reorderGroups = [];
zipCode = '';
currentKitInfo = null;
showDebugView = false;
favoriteName = '';
favoriteNameEdit = '';
displayAddToBag = false;
favoritesList = [];
selectedFavorite = null;
favoriteToLoad = null;
favoriteToDelete = null;
isLoadFavoriteConfirmModalOpen = false;
isDeleteFavoriteConfirmModalOpen = false;
isEditFavoriteConfirmModalOpen = false;
isSaveCurrentSelections = true;
showQueryPanel = false;
configureForm = {};

constructor() {
this.appState = appState;
makeObservable(this, {
page: observable,
enableReorder: observable,
reorderGroups: observable,
zipCode: observable,
showDebugView: observable,
favoriteName: observable,
favoriteNameEdit: observable,
displayAddToBag: observable,
favoritesList: observable,
selectedFavorite: observable,
favoriteToLoad: observable,
favoriteToDelete: observable,
isLoadFavoriteConfirmModalOpen: observable,
isSaveCurrentSelections: observable,
isDeleteFavoriteConfirmModalOpen: observable,
isEditFavoriteConfirmModalOpen: observable,
showQueryPanel: observable,
configureForm: observable,
initialize: action,
reset: action,
reset1: action,
resetCustomize: action,
addFavorite: action,
editFavorite: action,
deleteFavorite: action,
updateValue: action
});
}

async initialize(query) {
try {
runInAction(() => {
this.appState.isInitializing = true;
this.query = this.buildQuery(query);
this.steps = this.buildSteps(query);
this.favoritesList = getFavoritesDb();
});
} catch (error) {
console.error(error);
this.appState.handleNotification({
message: 'Unable to initialize.',
levelType: 'danger'
});
this.appState.isInitializing = false;
return;
}

runInAction(() => {
this.favoritesList = getFavoritesDb();
});

if (this.selectedFavorite) {
const {customizeConfigureForm, customizeKit} = this.selectedFavorite;
const validOptionGroupTypeKeys = this.optionValuesWithFacets.reduce((res, item) => {
res[item.optionGroupTypeKey] = true;
return res;
}, {});
Object.keys(customizeConfigureForm).forEach(key => {
if (!validOptionGroupTypeKeys[key]) delete customizeConfigureForm[key];
});
if (!isEmpty(customizeConfigureForm)) {
runInAction(() => {
this.configureForm = {...customizeConfigureForm};
});
if (customizeKit) {
this.displayAddToBag = true;
await this.fetchPriceQuoteForPNPOptions(customizeKit);
} else {
await this.fetchPNPOptions();
}
}
}
}

buildSteps(query) {
const steps = decode(query.steps).map(page => {
return page.map(coll => {
const query = {
aosContainerParts: Array.isArray(coll.part) ? coll.part : [coll.part],
variants: coll.variants || [[null, []]],
prepopulate: coll.prepopulate,
variantGroupings: Object.values(
(coll.variants || [[null, []]]).filter(item => !!item[0]).reduce((res, item) => {
const [ogt, variants, variantChildren] = item;
const obj = {
groupPrimaryVariant: false,
primaryVariantGroup: {
optionGroupTypeKey: ogt,
variants: variants.map(item => item.value).filter(value => !!value)
},
subVariantGroup: []
};
if (variantChildren) {
obj.groupPrimaryVariant = variantChildren.isGroupDefaultVariants;
obj.subVariantGroup = variantChildren.variants.filter(([key]) => key).map(([key, values]) => ({
optionGroupTypeKey: key,
variants: values.filter(value => !!value.value).map(value => value.value)
}));
variantChildren.variants.filter(([key]) => key).map(([key, values]) => ({
optionGroupType: key,
variantKeys: values.filter(value => !!value.value).map(value => value.value)
}));
}

if (res[ogt]) {
res[ogt].primaryVariantGroup.variants = Array.from(
new Set([...res[ogt].primaryVariantGroup.variants, ...obj.primaryVariantGroup.variants])
);
res[ogt].subVariantGroup.length === 0 && (res[ogt].subVariantGroup = obj.subVariantGroup);
// ignore for now : handle subVariant merging of variant keys
} else {
res[ogt] = obj;
}
return res;
}, {})
),
...this.query
};
return new PcvCustomizeStep(query);
});
});
return steps;
}

buildQuery(query) {
const result = {
marketingContext: {
revision: query.revision,
segment: query.segment,
geo: query.geo,
language: query.language,
channel: query.channel
},
context: {
segment: query.segment,
geo: query.geo,
language: query.language,
channel: query.channel
},
showUpgradeOptions: query.showUpgradeOptions === 'y' ? true : false,
useKitPrice: query.useKitPrice === 'y' ? true : false
// variantGroupings: Object.values(
// configureForm.variants.filter(item => !!item[0]).reduce((res, item) => {
// const [ogt, variants, variantChildren] = item;
// const obj = {
// groupPrimaryVariant: false,
// primaryVariantGroup: {
// optionGroupTypeKey: ogt,
// variants: variants.map(item => item.value).filter(value => !!value)
// },
// subVariantGroup: []
// };
// if (variantChildren) {
// obj.groupPrimaryVariant = variantChildren.isGroupDefaultVariants;
// obj.subVariantGroup = variantChildren.variants.filter(([key]) => key).map(([key, values]) => ({
// optionGroupTypeKey: key,
// variants: values.filter(value => !!value.value).map(value => value.value)
// }));
// variantChildren.variants.filter(([key]) => key).map(([key, values]) => ({
// optionGroupType: key,
// variantKeys: values.filter(value => !!value.value).map(value => value.value)
// }));
// }

// if (res[ogt]) {
// res[ogt].primaryVariantGroup.variants = Array.from(
// new Set([...res[ogt].primaryVariantGroup.variants, ...obj.primaryVariantGroup.variants])
// );
// res[ogt].subVariantGroup.length === 0 && (res[ogt].subVariantGroup = obj.subVariantGroup);
// // ignore for now : handle subVariant merging of variant keys
// } else {
// res[ogt] = obj;
// }
// return res;
// }, {})
// )
};
return result;
}

updateValue({key, value}) {
this[key] = value;
}

addFavorite() {
const favorite = {
name: this.favoriteName,
configureForm: this.query,
customizeConfigureForm: this.configureForm
};
addFavoriteDb(favorite);
this.favoritesList = getFavoritesDb();
this.favoriteName = '';
}

editFavorite() {
const favorite = {
...this.selectedFavorite,
name: this.favoriteNameEdit
};
if (this.isSaveCurrentSelections)
favorite['customizeConfigureForm'] = {
...this.selectedFavorite.customizeConfigureForm,
...this.configureForm
};

editFavoriteDbv3(favorite, this.isSaveCurrentSelections);
runInAction(() => {
this.favoritesList = getFavoritesDb();
this.isEditFavoriteConfirmModalOpen = false;
this.selectedFavorite = favorite;
this.isSaveCurrentSelections = true;
});
}

deleteFavorite = () => {
deleteFavoriteDb(this.favoriteToDelete);
runInAction(() => {
if (this.selectedFavorite?.name === this.favoriteToDelete.name) {
this.selectedFavorite = null;
}
this.favoriteToDelete = null;
this.favoritesList = getFavoritesDb();
this.isDeleteFavoriteConfirmModalOpen = false;
});
};

reset() {
runInAction(() => {
this.steps = [];
this.page = 0;
this.enableReorder = false;
this.showDebugView = false;
this.favoriteName = '';
this.favoriteNameEdit = '';
this.displayAddToBag = false;
this.favoritesList = [];
this.isLoadFavoriteConfirmModalOpen = false;
this.isDeleteFavoriteConfirmModalOpen = false;
this.isEditFavoriteConfirmModalOpen = false;
this.favoriteToLoad = null;
this.favoriteToDelete = null;
this.showQueryPanel = false;
this.configureForm = {};
});
}



resetCustomize() {
runInAction(() => {
this.configureForm = {};
this.currentPriceQuote = {};
this.displayAddToBag = false;
this.selectedFavorite = null;
this.favoriteToLoad = null;
this.favoriteToDelete = null;
});
}

async refreshVariantSortOrder() {
try {
await api.refreshVariantSortOrder();
this.appState.handleNotification({
message: 'Sucessfully refreshed variant sort order.',
levelType: 'success'
});
await new Promise(resolve => setTimeout(resolve, 1000));
window.location.reload();
} catch (error) {
console.log(error);
this.appState.handleNotification({
error,
message: 'Unable to refresh variant sort order. Please try again.',
levelType: 'danger'
});
}
}
}

export default new PcvCustomize();
/* eslint-disable no-unused-vars */
import {action, makeObservable, observable, runInAction} from 'mobx';
import map from 'lodash-es/map';
import isEmpty from 'lodash-es/isEmpty';
import isEqual from 'lodash-es/isEqual';
import cloneDeep from 'lodash-es/cloneDeep';
import forEach from 'lodash-es/forEach';
import isMatch from 'lodash-es/isMatch';
import pick from 'lodash-es/pick';
import appState from '../../../stores/appState';
import api from '../../../api/api';
import fetchLowestPricesForOVWF from '../sharedApiHelper/fetchLowestPricesForOVWF';
import {
findOptionGroup,
flattenOptionValueToVariants,
parse_currentPriceQuote,
decode,
unique_optionValueToVariants,
dedupe_optionValueToVariantsReducer,
getVariantKeyToValue,
getVariantData,
get_selectedOptionGroupFixedFacets
} from '../../utils/helpers';
import getDisplayName from '../sharedApiHelper/getDisplayName';

import getPriceRange from '../../PNPPrototype/sharedApiHelper/getPriceRange';

class PcvCustomizeStep {
query = {};
initialStore = {};
reorderGroups = [];
zipCode = '';
currentKitInfo = null;
selectedImageUrl = '';
swatchImageMap = {};
customLabelMap = {};
upgradeOptionsDiffMap = {};
displayName = 'Customize';
showDebugView = false;

configureForm = {};
optionValuesWithFacets = [];
kits = [];
currentPriceQuote = {};
isFetchingAddToBag = false;
displayAddToBag = false;
decisionTree = null;
pnpSpwCode = [];
optionValuesSortOrder = null;
debugList = [];
selectedOptionGroupTypeToReset = null;
lowestPrices = {};

compare_selectedOption = null;
compare_isModalOpen = false;
compare_nextState = {};

isImageGalleryModalOpen = false;

isReviewDecisionTreeModalOpen = false;
isSaveCurrentSelections = true;
priceDeltas = {};
lowestPrice = {};
imagesForGallery = [];
_hiddenOptionValuesWithFacets = [];
isStepsCompleted = false;

priceKit = [];
renderOrder = [];

constructor(query) {
this.appState = appState;
this.query = query;
makeObservable(this, {
isStepsCompleted: observable,
renderOrder: observable,
reorderGroups: observable,
zipCode: observable,
compare_selectedOption: observable,
compare_nextState: observable,
compare_isModalOpen: observable,
selectedImageUrl: observable,
customLabelMap: observable,
swatchImageMap: observable,
upgradeOptionsDiffMap: observable,
displayName: observable,
showDebugView: observable,

debugList: observable,
kits: observable,
currentPriceQuote: observable,
displayAddToBag: observable,
isFetchingAddToBag: observable,
decisionTree: observable,
pnpSpwCode: observable,
configureForm: observable,
optionValuesWithFacets: observable,
optionValuesSortOrder: observable,

isImageGalleryModalOpen: observable,
isSaveCurrentSelections: observable,

isReviewDecisionTreeModalOpen: observable,
selectedOptionGroupTypeToReset: observable,
lowestPrices: observable,
priceDeltas: observable,
priceKit: observable,
initialize: action,
refreshUpgradeOptions: action,
reset: action,
fetchPNPOptions: action,
resetCustomize: action,
reorderPNPOptions: action,

updateValue: action,
addToBag: action,
compareChanges: action,
applyCompareChanges: action,
resetCompare: action,
updateDeliveryQuote: action,
saveReorderGroups: action
});
}

async loadCustomLabelMap(optionValuesWithFacets) {
const selectedVariants = [
// {
// optionGroupTypeKey: 'processor',
// fixedFacets: [
// {variantKey: 'dimensionChip', variantValue: 'm4pro'},
// {variantKey: 'dimensionCpu', variantValue: '14'},
// {variantKey: 'dimensionNeuralEngine', variantValue: '16'},
// {variantKey: 'dimensionGpu', variantValue: '20'}
// ]
// },
// {
// optionGroupTypeKey: 'processor',
// fixedFacets: [
// {variantKey: 'dimensionChip', variantValue: 'm4max'},
// {variantKey: 'dimensionCpu', variantValue: '16'},
// {variantKey: 'dimensionNeuralEngine', variantValue: '16'},
// {variantKey: 'dimensionGpu', variantValue: '40'}
// ]
// }
];
['retina_display', 'processor'].forEach(optionGroupTypeKey => {
const found = optionValuesWithFacets.find(item => item.optionGroupTypeKey === optionGroupTypeKey);
if (!found) return;
const variants = unique_optionValueToVariants(found, {}).map(item => ({
optionGroupTypeKey,
fixedFacets: item.variants
}));
selectedVariants.push(...variants);
});

try {
const body = {
method: 'getFragmentForVariant',
fixedVariants: {
selectedVariants
},
context: this.query.marketingContext
};
const res = (await api.fetchFragmentForVariant(body)).data;
this.addDebugList(body, res, 'kitaggregateservice: getFragmentForVariant');
if (res._error) throw new Error();
const {_expire, ...resKeys} = res;
const keyMap = Object.keys(resKeys).reduce((res, k) => {
res[
k
.split(',')
.sort()
.join(',')
] = k;
return res;
}, {});
selectedVariants.forEach(({optionGroupTypeKey, fixedFacets}) => {
const k = fixedFacets
.map(item => item.variantValue)
.sort()
.join(',');
let html = resKeys[keyMap[k]];
if (html) {
runInAction(() => {
if (!this.customLabelMap[optionGroupTypeKey]) {
this.customLabelMap[optionGroupTypeKey] = [{variant: fixedFacets, html}];
} else {
this.customLabelMap[optionGroupTypeKey].push({
variant: fixedFacets,
html
});
}
});
} else {
console.warn('Not able to find matching fragment for:', optionGroupTypeKey);
}
});
} catch (err) {
console.error('Error processing option group type', err);
}
}

buildRenderOrder(optionValuesWithFacets, compare_nextState) {
const renderOrder = [];
this.query.variants.forEach((variant, idx) => {
const [optionGroupTypeKey, variants, variantChildren] = variant;
if (!optionGroupTypeKey) return;

const facet = findOptionGroup(optionValuesWithFacets, optionGroupTypeKey);
if (facet && facet.displayIndicator === 'ENABLED') {
const item = {
parent: {
optionGroupTypeKey: optionGroupTypeKey,
variants: variants.map(v => v.value) || []
},
child:
variantChildren && variantChildren.variants[0][0]
? {
optionGroupTypeKey: variantChildren.variants[0][0],
variants: variantChildren.variants[0][1].map(v => v.value) || []
}
: undefined,
isGroup: variantChildren ? variantChildren.isGroupDefaultVariants : false
};
item.parent.id = `${item.parent.optionGroupTypeKey}:${item.parent.variants.join(',')}`;
if (item.child) {
if (item.isGroup && item.child.variants.length) item.parent.id += `,${item.child.variants.join(',')}`;
item.child.id = `${item.child.optionGroupTypeKey}:${item.child.variants.join(',')}`;
}
renderOrder.push(item);
}
});
const seen = new Set(renderOrder.map(item => item.parent.optionGroupTypeKey));
optionValuesWithFacets.forEach((facet, idx) => {
const optionGroupTypeKey = facet.optionGroupTypeKey;
if (facet.displayIndicator === 'ENABLED' && !seen.has(optionGroupTypeKey)) {
renderOrder.push({
parent: {id: optionGroupTypeKey, optionGroupTypeKey, variants: []},
child: undefined,
isGroup: false
});
}
});
if (this.optionValuesSortOrder) {
renderOrder.sort((a, b) => this.optionValuesSortOrder[a.parent.id] - this.optionValuesSortOrder[b.parent.id]);
}
let current_step;

renderOrder.forEach(order => {
const parentOptionGroupTypeKey = order.parent.optionGroupTypeKey;
let enabled = order.parent.variants.length
? order.parent.variants.every(variant => !!this.configureForm[parentOptionGroupTypeKey]?.[variant])
: this.configureForm[parentOptionGroupTypeKey];
if (order.child) {
const childOptionGroupTypeKey = order.child.optionGroupTypeKey;
let childEnabled = order.child.variants.length
? order.child.variants.every(variant => !!this.configureForm[childOptionGroupTypeKey]?.[variant])
: this.configureForm[childOptionGroupTypeKey];
enabled = enabled && childEnabled;
}
if (!current_step && !enabled) {
enabled = true;
current_step = true;
order.currentStep = current_step;
}
order.disabled = !enabled;
});

(compare_nextState || this).renderOrder = renderOrder;
}

async initialize() {
try {
runInAction(() => {
this.appState.isInitializing = true;
this.debugList = [{title: 'Initial Load: ', type: 'separator'}];
});
const req = {
method: 'getCollection',
collectionIds: this.query.aosContainerParts,
marketingContext: this.query.marketingContext,
variantGroupings: this.query.variantGroupings
};
let res = (await api.fetchPnpPrototype(req)).data;
this.addDebugList(req, res, 'productktoservice: getCollection');
let optionValuesWithFacets = res?.primaryCollectionDetail?.optionGroupTypes;
if (!optionValuesWithFacets) {
throw new Error();
}

this.optionValuesWithFacets = optionValuesWithFacets.filter(item => item?.displayIndicator !== 'HIDDEN');
this._hiddenOptionValuesWithFacets = optionValuesWithFacets.filter(item => item?.displayIndicator === 'HIDDEN');
const lowestPrices = await fetchLowestPricesForOVWF(
this.query.aosContainerParts,
this.query.marketingContext,
this.optionValuesWithFacets.filter(item => ['retina_display', 'processor'].includes(item.optionGroupTypeKey)),
this.addDebugList
);
this.buildRenderOrder(this.optionValuesWithFacets);
this.lowestPrices = lowestPrices;
} catch (error) {
console.error(error);
this.appState.handleNotification({
message: 'Unable to initialize.',
levelType: 'danger'
});
this.appState.isInitializing = false;
return;
}

// if (this.selectedFavorite) {
// const {customizeConfigureForm, customizeKit} = this.selectedFavorite;
// const validOptionGroupTypeKeys = this.optionValuesWithFacets.reduce((res, item) => {
// res[item.optionGroupTypeKey] = true;
// return res;
// }, {});
// Object.keys(customizeConfigureForm).forEach(key => {
// if (!validOptionGroupTypeKeys[key]) delete customizeConfigureForm[key];
// });
// if (!isEmpty(customizeConfigureForm)) {
// runInAction(() => {
// this.configureForm = {...customizeConfigureForm};
// });
// if (customizeKit) {
// this.displayAddToBag = true;
// await this.fetchPriceQuoteForPNPOptions(customizeKit);
// } else {
// await this.fetchPNPOptions();
// }
// }
// }

await this.loadDisplayName();
await this.loadCustomLabelMap(this.optionValuesWithFacets);

let selectedVariants = [];
if (this.configureForm['retina_display']) {
selectedVariants.push({
optionGroupTypeKey: 'retina_display',
fixedFacets: getVariantData(this.configureForm['retina_display'])
});
}
if (this.configureForm['chassis']) {
selectedVariants.push({
optionGroupTypeKey: 'chassis',
fixedFacets: getVariantData(this.configureForm['chassis'])
});
}
if (this.configureForm['keyboard']?.dimensionKeyBoardColor) {
selectedVariants.push({
optionGroupTypeKey: 'keyboard',
fixedFacets: getVariantData(this.configureForm['keyboard'])
});
}
const fixedVariants = {
selectedVariants,
selectedIncompatibleVariants: []
};
await this.fetchImageVariant(fixedVariants);
await this.fetchSwatchImages();

if (this.query.useKitPrice) {
await this.fetchKitPrice();
}
runInAction(() => {
this.debugList.push({title: 'After Load:', type: 'separator'});
this.appState.isInitializing = false;
this.initialStore = cloneDeep(this);
});
}

async loadDisplayName() {
try {
const displayName = await getDisplayName(
this.query.aosContainerParts,
this.query.context,
'Customize',
this.addDebugList
);
this.displayName = displayName;
} catch (error) {
this.appState.handleNotification({
error,
message: 'Unable to get display name. Please try again.',
levelType: 'danger'
});
}
}

updateValue({key, value}) {
this[key] = value;
}

addDebugList = (req, res, title) => {
this.debugList.push({req, res, title});
};

addUserActionDebugList = (title, type, className) => {
this.debugList.push({title, type, className});
};

reset() {
runInAction(() => {
this.renderOrder = [];
this.selectedImageUrl = '';
this.isStepsCompleted = false;
this.upgradeOptionsDiffMap = {};
this.compare_selectedOption = null;
this.compare_nextState = {};
this.compare_isModalOpen = false;
this.displayName = 'Customize';
this.showDebugView = false;
this.debugList = [];
this.configureForm = {};
this.kits = [];
this.currentPriceQuote = {};
this.currentKitInfo = null;
this.isFetchingAddToBag = false;
this.displayAddToBag = false;
this.decisionTree = null;
this.pnpSpwCode = [];
this.optionValuesWithFacets = [];
this.optionValuesSortOrder = null;
this.priceDeltas = {};
this.priceKit = [];
this.lowestPrices = {};
this.isImageGalleryModalOpen = false;
this.isReviewDecisionTreeModalOpen = false;
this.isSaveCurrentSelections = true;
this.selectedOptionGroupTypeToReset = null;
this._hiddenOptionValuesWithFacets = [];
this.imagesForGallery = [];
});
}

resetCustomize() {
runInAction(() => {
// this.selectedImageUrl = this.selectedFavorite ? '' : this.initialStore.selectedImageUrl;
this.selectedImageUrl = this.initialStore.selectedImageUrl;
this.renderOrder = cloneDeep(this.initialStore.renderOrder);
this.isStepsCompleted = false;
this.debugList = cloneDeep(this.initialStore.debugList);
this.priceDeltas = cloneDeep(this.initialStore.priceDeltas);
this.lowestPrices = cloneDeep(this.initialStore.lowestPrices);
this.priceKit = cloneDeep(this.initialStore.priceKit);
this.configureForm = {};
this.currentPriceQuote = {};
this.displayAddToBag = false;
this.isFetchingAddToBag = false;
this.kits = [];
this.optionValuesWithFacets = cloneDeep(this.initialStore.optionValuesWithFacets);
this._hiddenOptionValuesWithFacets = cloneDeep(this.initialStore._hiddenOptionValuesWithFacets);
this.optionValuesSortOrder = null;
this.upgradeOptionsDiffMap = {};
});
}

reorderPNPOptions(dragIndex, hoverIndex) {
const dragCard = {...this.reorderGroups[dragIndex]};
let newColumns = [...this.reorderGroups];
newColumns.splice(dragIndex, 1);
newColumns.splice(hoverIndex, 0, dragCard);

runInAction(() => {
this.reorderGroups = newColumns;
});
}

saveReorderGroups() {
let optionValuesSortOrder = this.reorderGroups.reduce((result, item, idx) => {
result[item.parent.id] = idx;
return result;
}, {});

runInAction(() => {
this.optionValuesSortOrder = optionValuesSortOrder;
});
this.buildRenderOrder(this.optionValuesWithFacets);
}

async upgradeOptionChanges(config) {
const obj = config ? {...config} : undefined;
try {
const nextState = await this.fetchFacets(obj, {is_upgrade_opts: true});
this.upgradeOptionsDiffMap[obj.id] = nextState;
} catch (error) {
this.upgradeOptionsDiffMap[obj.id] = {error: true};
}
}
export default PcvCustomizeStep;