Notes

configureList = [
[
"chassis",
[
{
"label": "dimensionProdTier",
"value": "dimensionProdTier"
}
]
],
[
"processor",
[
{
"label": "dimensionCpu",
"value": "dimensionCpu"
},
{
"label": "dimensionGpu",
"value": "dimensionGpu"
},
{
"label": "dimensionChip",
"value": "dimensionChip"
}
]
],
[
"chassis",
[
{
"label": "dimensionColor",
"value": "dimensionColor"
}
]
]
]

const renderOptionValuesVariantKeys = (
configureForm,
optionGroupType,
variantValuesSummaryByVariantKey,
optionValueToVariants
) => {
const renderSelectorRadio = (variant, options) => {
return options.map(option => {
const isChecked = configureForm?.[optionGroupType]?.[variant] === option.value;
return (
<SelectorRadio
id={option.key}
key={option.key}
label={option.label}
inputProps={{
disabled: isChecked || option.disabled,
checked: isChecked,
onClick: () => {
pnpPrototypeCustomize.fetchPNPOptions({
key: optionGroupType,
value: {
[variant]: option.value
},
isVariantKey: true
});
}
}}
/>
);
});
};

const renderSelectorCategory = (variant, options) => {
return options.map(option => {
const isChecked = configureForm?.[optionGroupType]?.[variant] === option.value;
return (
<SelectorCategory
id={option.key}
key={option.key}
label={option.label}
inputProps={{
disabled: isChecked || option.disabled,
checked: isChecked,
onClick: () => {
pnpPrototypeCustomize.fetchPNPOptions({
key: optionGroupType,
value: {
[variant]: option.value
},
isVariantKey: true
});
}
}}
/>
);
});
};

const renderSelect = (variant, options) => {
const value = configureForm?.[optionGroupType]?.[variant];
return (
<Select
placeholder={optionGroupType}
value={value}
options={options}
onChange={e => {
pnpPrototypeCustomize.fetchPNPOptions({
key: optionGroupType,
value: {
[variant]: e.target.value
},
isVariantKey: true
});
}}
/>
);
};

const renderDisplayByVariantConfig = {
keyboard: {
dimensionCTOLanguage: 'select',
dimensionKeyBoardLayout: 'selector-radio'
}
};
const renderByType = (variant, options) => {
const displayType = renderDisplayByVariantConfig[optionGroupType]?.[variant];
if (!displayType) {
return <div className="form-group option-selector-category">{renderSelectorCategory(variant, options)}</div>;
} else if (displayType === 'select') {
return <div className="form-group option-select">{renderSelect(variant, options)}</div>;
} else if (displayType === 'selector-radio') {
return <div className="form-group option-selector-radio">{renderSelectorRadio(variant, options)}</div>;
}
};
console.log( Object.entries(variantValuesSummaryByVariantKey),'variantValuesSummaryByVariantKey')
return Object.entries(variantValuesSummaryByVariantKey).map(([k, v]) => {
const isEnabled = (variant, optionValue) => {
return optionValueToVariants.some(item => {
const option = {
[variant]: optionValue
};

const match =
isMatch(item.variantKeyToValue, option) &&
(!item.hasOwnProperty('displayIndicator') || item.displayIndicator === 'ENABLED');

return match;
});
};
let isDisabled = !optionValuesSteps.includes(optionGroupType);
const options = v.map(item => {
const key = `${optionGroupType}:${k}:${item}`;
const disabled =
isFetching ||
(selectedOptionGroupTypeToReset === optionGroupType ? false : isDisabled || !isEnabled(k, item));
return {label: item, value: item, key, disabled};
});

return (
<div className="option-values-components" key={k}>
<h4 className="global-body-medium">
<strong>{k}</strong>
</h4>
{renderByType(k, options)}
</div>
);
});
};
consoled the Object.entries(variantValuesSummaryByVariantKey) we got the below arrays. mapping like below.

[
[
"dimensionColor",
[
"spaceblack",
"silver"
]
],
[
"dimensionProdTier",
[
"entry",
"good",
"better",
"best",
"ultimate",
"supreme"
]
]
]

[
[
"dimensionChip",
[
"m4",
"m4pro",
"m4max"
]
],
[
"dimensionCpu",
[
"12",
"14",
"16",
"10"
]
],
[
"dimensionGpu",
[
"10",
"40",
"16",
"20",
"32"
]
]
]
Now we want to return the above arrays like compare the configureList sorting order then mapping that way the above ones means it should return that order