Notes

const renderOptionValues = (optionGroupType, optionValueToVariants, grp, isParent) => {
const isDisabled = isParent ? !optionValuesSteps.includes(optionGroupType) : false;
const optionValue = configureForm[optionGroupType];
const checkIsOptionParentOfChildVariant = optionValue => {
const variants = pnpPrototype.configureForm.variants.find(item => item[0] === optionGroupType);
const variantsList = variants[1].map(item => item.value);
const picked = pick(optionValue, variantsList);
const selectedPicked = pick(configureForm[optionGroupType], variantsList);
return isEqual(picked, selectedPicked);
};

let options;
options = optionValueToVariants.map(item => {
let priceDelta;
const foundPriceDelta = priceDeltas?.[optionGroupType]?.find(pd => {
return isEqual(pd.variant, item.variantKeyToValue);
});
if (foundPriceDelta) {
if (foundPriceDelta.lowestPrice) {
priceDelta = foundPriceDelta.lowestPrice;
} else if (
foundPriceDelta.priceDeltaDisplayValue &&
foundPriceDelta.priceDeltaDisplayValue.priceDeltaValue !== '0.00'
) {
priceDelta = foundPriceDelta.priceDeltaDisplayValue.priceDeltaValueDisplay;
}
}
const value =
renderDisplayConfig[optionGroupType] === 'select'
? JSON.stringify(item.variantKeyToValue)
: item.variantKeyToValue;

const key =
renderDisplayConfig[optionValue] === 'select'
? `${optionGroupType}:${value}`
: `${optionGroupType}:${Object.entries(value)
.map(([k, v]) => `${k}:${v}`)
.join('-')}`;

const getHtml = (itemParam, optionType) => {
const found = customLabelMap[optionType]?.find(item => isEqual(item.variant, itemParam.variantKeyToValue));
if (!found) return false;
const data = {id: key, price: priceDelta};
function encode(html) {
return html
.replace(/{{(.*?)}}/g, (match, key) => {
return data[key] || '';
})
.replace(/""/g, '"');
}
const template_html = encode(found.html);
return template_html;
};
const label =
optionGroupType === 'chassis' ? Object.values(item.variantKeyToValue).join(' | ') : item.optionValueDisplayName;
const html =
optionGroupType === 'retina_display' || optionGroupType === 'processor'
? getHtml(item, optionGroupType)
: false;

const isOptionChecked = isEqual(optionValue, value);
return {
html,
label,
value,
key,
disabled:
isFetching ||
(selectedOptionGroupTypeToReset === optionGroupType
? false
: item.displayIndicator === 'DISABLED' || isDisabled),
priceDelta,
item,
isChecked: isOptionChecked,
renderInlineChildren:
grp.childVariantsByOptionGroupType && (isOptionChecked || checkIsOptionParentOfChildVariant(value))
};
});
const renderSelectorRadio = () => {
return options.map((option, idx) => {
// const isChecked = isCheckedOption(option);
console.log(option.html, 'option.html');
return (
<>
<SelectorRadioV2
className={`${styles.processor}`}
id={option.key}
key={option.key}
label={option.label}
html={option.html}
priceDelta={option.priceDelta}
inputProps={{
disabled: option.isChecked || option.disabled,
checked: option.isChecked,
onClick: () => {
console.log('test');
console.log(option, 'option');
pnpPrototypeCustomize.fetchPNPOptions({key: optionGroupType, value: option.value});
}
}}
/>
{option.renderInlineChildren ? renderInlineOptionValues() : null}
</>
);
});
};
async fetchPNPOptions(config) {
const obj = config ? {...config} : undefined;

if (obj && obj.isVariantKey) {
if (this.selectedOptionGroupTypeToReset !== obj.key) {
let newVal;
if (this._optionValuesSelectionMap[obj.key]) {
const exactObj = {...this.configureForm[obj.key], ...obj.value};
let foundExactMatch = this.optionValuesWithFacets
.find(item => item.optionGroupType === obj.key)
.optionValueToVariants.find(item => {
return (
isEqual(item.variantKeyToValue, exactObj) &&
(!item.hasOwnProperty('displayIndicator') || item.displayIndicator === 'ENABLED')
);
})?.variantKeyToValue;
if (foundExactMatch) {
newVal = exactObj;
} else {
const newEntry = this.findBestOptionValueVariant([obj.key, obj.value]);
newVal = newEntry[1];
}
obj.value = newVal;
} else {
this._optionValuesSelectionMap[obj.key] = true;
const newEntry = this.findBestOptionValueVariant([obj.key, obj.value]);
newVal = newEntry[1];
}
obj.value = newVal;
}

const variantKeyLength = Object.keys(
findOptionGroup(this.optionValuesWithFacets, obj.key).variantValuesSummaryByVariantKey
).length;
const configureVariantKeyLength = Object.keys(obj.value).length;
if (variantKeyLength !== configureVariantKeyLength) {
if (this.optionValuesSteps.at(-1) === null) {
this.optionValuesSteps.pop();
}
}
} else {
if (obj) {
delete this._optionValuesSelectionMap[obj.key];
}
}

runInAction(() => {
if (obj) {
this.configureForm[obj.key] = obj.value;
}
this.appState.isFetching = true;
});

try {
const optionGroupFixedFacets = Object.entries({
...(obj
? obj.key === this.selectedOptionGroupTypeToReset
? {[obj.key]: obj.value}
: this.configureForm
: this.configureForm)
})
.map(entry => this.findBestOptionValueVariant(entry))
.map(([key, value]) => {
return {
optionGroupType: key,
fixedFacets: value
};
});
let selectedOptionGroupFixedFacets = [];
this.optionValuesWithFacets.forEach(item => {
if (this.configureForm[item.optionGroupType] && item.childVariantsByOptionGroupType) {
selectedOptionGroupFixedFacets.push({
optionGroupType: item.optionGroupType,
fixedFacets: this.configureForm[item.optionGroupType]
});
}
});
const req = {
method: 'getDistinctOptionValuesForFixedFacetsV3',
aosContainerParts: this.pnpPrototype.configureForm.aosContainerParts.split(',').map(item => item.trim()),
marketingContext: {
revision: this.pnpPrototype.configureForm.revision?.value,
segment: this.pnpPrototype.configureForm.segment,
geo: this.pnpPrototype.configureForm.geo,
language: this.pnpPrototype.configureForm.language,
channel: this.pnpPrototype.configureForm.channel
},
// ...(this.pnpPrototype.configureForm.variants.every(item => item[0] && item[1]) && {
// variantsByOptionGroupType: this.pnpPrototype.configureForm.variants.reduce((res, item) => {
// const [ogt, variants] = item;
// res[ogt] = variants.map(item => item.value);
// return res;
// }, {})
// }),
variantsToGroup: this.pnpPrototype.configureForm.variants.filter(item => !!item[0]).map(item => {
const [ogt, variants] = item;
const obj = {
groupDefaultVariants: false,
optionGroupTypeToVariantKeys: {
optionGroupType: ogt,
variantKeys: variants.map(item => item.value).filter(value => !!value)
},
childOptionGroupTypeToVariantKeys: []
};
if (this.pnpPrototype.configureForm.variantChildren[ogt]) {
obj.groupDefaultVariants = this.pnpPrototype.configureForm.variantChildren[ogt].isGroupDefaultVariants;
obj.childOptionGroupTypeToVariantKeys = this.pnpPrototype.configureForm.variantChildren[ogt].variants.map(
item => ({
optionGroupType: item[0],
variantKeys: item[1].map(value => value.value)
})
);
}
return obj;
}, []),
optionGroupFixedFacets,
selectedOptionGroupFixedFacets
};

let optionValuesWithFacets = (await api.fetchPnpPrototype(req)).data?.result;
if (!optionValuesWithFacets || optionValuesWithFacets.length === 0) {
throw new Error();
}
this.addDebugList(req, optionValuesWithFacets, 'productktoservice: getDistinctOptionValuesForFixedFacetsV3');

this._hiddenOptionValuesWithFacets = optionValuesWithFacets.filter(item => item?.displayable === 'false');
optionValuesWithFacets = optionValuesWithFacets.filter(item => item?.displayable !== 'false');

if (this.optionValuesSortOrder) {
optionValuesWithFacets = optionValuesWithFacets.toSorted(
(a, b) => this.optionValuesSortOrder[a.optionGroupType] - this.optionValuesSortOrder[b.optionGroupType]
);
}

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

if (obj) {
let ogFixedFacets = [];
if (obj.key === 'retina_display') {
ogFixedFacets.push({
optionGroupType: 'retina_display',
fixedFacets: obj.value
});
if (this.configureForm['chassis']) {
ogFixedFacets.push({
optionGroupType: 'chassis',
fixedFacets: this.configureForm['chassis']
});
}
} else if (obj.key === 'chassis' && this.configureForm['retina_display']) {
ogFixedFacets.push({
optionGroupType: 'chassis',
fixedFacets: obj.value
});
ogFixedFacets.push({
optionGroupType: 'retina_display',
fixedFacets: this.configureForm['retina_display']
});
}
if (ogFixedFacets.length) {
this.fetchImageVariant(ogFixedFacets);
}
}

const found_chassis = findOptionGroup(optionValuesWithFacets, 'chassis');
if (
found_chassis &&
found_chassis.variantValuesSummaryByVariantKey.dimensionColor &&
isEmpty(this.swatchImageMap)
) {
await this.fetchSwatchImages(found_chassis.variantValuesSummaryByVariantKey.dimensionColor);
}

const reselect_ifInvalidOptionValues = () => {
Object.keys(this.configureForm).forEach(key => {
const optionValueToVariants = flattenOptionValueToVariants(findOptionGroup(optionValuesWithFacets, key));
const found = optionValueToVariants.find(item => {
return isEqual(item.variantKeyToValue, this.configureForm[key]) && item.displayIndicator === 'ENABLED';
});

if (!found) {
let optionValueNew;
if ('dimensionAdapterCost' in optionValueToVariants[0].variantKeyToValue) {
optionValueNew = optionValueToVariants.find(item => {
return item.variantKeyToValue.dimensionAdapterCost === 'free' && item.displayIndicator === 'ENABLED';
});
}

if (!optionValueNew) {
optionValueNew = optionValueToVariants.find(item => {
return isMatch(item.variantKeyToValue, this.configureForm[key]) && item.displayIndicator === 'ENABLED';
});
}

if (!optionValueNew) {
optionValueNew = optionValueToVariants.find(item => {
return item.default === 'true';
});
}

if (!optionValueNew) {
optionValueNew = optionValueToVariants.find(item => {
return item.displayIndicator === 'ENABLED';
});
}

if (optionValueNew) {
this.configureForm[key] = optionValueNew.variantKeyToValue;
} else {
delete this.configureForm[key];
if (this.optionValuesSteps.at(-1) === null) {
this.optionValuesSteps.pop();
}
}
}
});
};
reselect_ifInvalidOptionValues();

if (obj) {
if (obj.key !== 'retina_display') this.fetchPNPOptionPriceDeltas(obj);
}

if (this.optionValuesSteps.at(-1) !== null) {
const ogt = obj ? obj.key : this.optionValuesSteps.at(-1);
const nextIdx = optionValuesWithFacets.findIndex(item => item.optionGroupType === ogt) + 1;

if (
optionValuesWithFacets[nextIdx] &&
!this.optionValuesSteps.includes(optionValuesWithFacets[nextIdx].optionGroupType)
) {
this.optionValuesSteps.push(optionValuesWithFacets[nextIdx].optionGroupType);
}

const isComplete = optionValuesWithFacets.every(item => {
const ogt = item.optionGroupType;
const current = obj && obj.key === ogt ? obj.value : this.configureForm[ogt];

if (this._optionValuesSelectionMap[ogt]) {
const variantKeyLength = Object.keys(
this.optionValuesWithFacets.find(item => item.optionGroupType === ogt).variantValuesSummaryByVariantKey
).length;
const configureVariantKeyLength = Object.keys(current).length;
if (variantKeyLength <= configureVariantKeyLength) {
return true;
} else {
return false;
}
} else {
return current;
}
});

if (isComplete) {
this.optionValuesSteps.push(null);
}
}

runInAction(() => {
if (obj && !obj.isVariantKey) this.configureForm[obj.key] = obj.value;
this.selectedOptionGroupTypeToReset = null;
this.appState.isFetching = false;
});

if (this.optionValuesSteps.at(-1) === null) {
this.fetchPriceQuoteForPNPOptions();
} else {
this.fetchPriceRangeForPNPOptions();
}
} catch (error) {
console.log(error);
this.appState.handleNotification({
error,
message: 'Unable to fetch options. Please try again.',
levelType: 'danger'
});
runInAction(() => {
this.appState.err = true;
this.appState.isFetching = false;
});
}
}