Notes

const renderOptionValuesWithFacets = (optionValuesWithFacets) => {
// Filter out software_logic and software_final for combined rendering
const softwareGroups = optionValuesWithFacets.filter(
grp => grp.optionGroupType === "software_logic" || grp.optionGroupType === "software_final"
);

const otherGroups = optionValuesWithFacets.filter(
grp => grp.optionGroupType !== "software_logic" && grp.optionGroupType !== "software_final"
);

// Render other groups
const renderedOtherGroups = otherGroups.map(grp => {
return renderOptionValuesWithFacetsItem(grp, true);
});

// Combine software_logic and software_final into one section
const combinedSoftwareGroup = softwareGroups.length > 0
? renderCombinedSoftwareSteps(softwareGroups)
: null;

return (
<>
{renderedOtherGroups}
{combinedSoftwareGroup}
</>
);
};

// Function to handle combined rendering of software_logic and software_final
const renderCombinedSoftwareSteps = (softwareGroups) => {
// Combine options from both groups and filter out "No, thanks"
const combinedOptions = softwareGroups
.flatMap(group => group.optionValueToVariants)
.filter(option => option.variantKeyToValue.dimensionSoftware !== "no_thanks");

const [currentIndex, setCurrentIndex] = React.useState(0);

const handlePrev = () => {
setCurrentIndex((prevIndex) => (prevIndex - 1 + combinedOptions.length) % combinedOptions.length);
};

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

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: false,
checked: false,
onClick: () => {
pnpPrototypeCustomize.fetchPNPOptions({
key: option.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>
);
};

// Default rendering for other groups
const renderOptionValuesWithFacetsItem = (grp, isParent) => {
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>
);
};