Notes

const renderOptionValuesWithFacetsItem = (grp, isParent) => {
if (grp.optionGroupType === "software_logic" || grp.optionGroupType === "software_final") {
// Combine software_logic and software_final options
const combinedOptions = optionValuesWithFacets
.filter(group => group.optionGroupType === "software_logic" || group.optionGroupType === "software_final")
.flatMap(group => group.optionValueToVariants)
.filter(option => option.variantKeyToValue.dimensionSoftware !== "no_thanks"); // Exclude "No, thanks"

// Render carousel for combined software options
return (
<div className={`option-group`}>
<h4 className="header-label">Software Steps</h4>
<div className="carousel-container">
<div className="carousel-content">
{combinedOptions.map((option, index) => (
<div
key={option.optionValue}
className={`carousel-item ${index === currentIndex ? "active" : "hidden"}`}
>
<SelectorCategory
id={option.optionValue}
label={option.optionValueDisplayName}
inputProps={{
disabled: isDisabled,
checked: configureForm[grp.optionGroupType]?.includes(option.optionValue),
onClick: () => {
pnpPrototypeCustomize.fetchPNPOptions({
key: grp.optionGroupType,
value: option.optionValue,
});
},
}}
/>
</div>
))}
</div>
<div className="carousel-navigation">
<button className="carousel-arrow left-arrow" onClick={handlePrev}>
<ChevronLeft className="chevron-left icon" desiredFontSize={10} />
</button>
<button className="carousel-arrow right-arrow" onClick={handleNext}>
<ChevronRight className="chevron-right icon" desiredFontSize={10} />
</button>
</div>
</div>
</div>
);
} else {
// Default rendering for other groups
const optionValueToVariantsUnique = unique_optionValueToVariants(grp, configureForm);
if (!optionValueToVariantsUnique.length) {
return null;
}

return (
<div className={`option-group`}>
{renderHeaderLabel(grp)}
{renderOptionValues(grp.optionGroupType, optionValueToVariantsUnique, grp, isParent)}
</div>
);
}
};

// Helper functions for carousel navigation
const handlePrev = () => {
setCurrentIndex((prevIndex) => (prevIndex - 1 + options.length) % options.length);
};

const handleNext = () => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % options.length);
};

// Adjusting renderOptionValuesWithFacets to include the new logic
const renderOptionValuesWithFacets = (optionValuesWithFacets) => {
return optionValuesWithFacets.map((grp) => {
return renderOptionValuesWithFacetsItem(grp, true);
});
};