Notes

const getCategoryInfo = (category, software) => {
if (category === 'software_final' && software === 'final_cut_pro') {
return {
label: 'Final Cut Pro',
infoText: `A huge leap forward for <br /> professional video editing.`
};
} else if (category === 'software_logic' && software === 'logic_pro') {
return {
label: 'Logic Pro',
infoText: `Turn your Mac into a <br /> professional music studio.`
};
}
else if(software === 'no_thanks'){
if(category === 'software_final'){
return {
label: 'Final Cut Pro',
infoText: `A huge leap forward for <br /> professional video editing.`
};
}
else if (category === 'software_logic'){
return {
label: 'Logic Pro',
infoText: `Turn your Mac into a <br /> professional music studio.`
};

}
}
return { label: null, infoText: null };
};


export const SelectorCategory = ({ id, label, className = '', inputProps, onClick, priceDelta }) => {
const [category, , software] = id.split(':');
const { label: computedLabel, infoText } = getCategoryInfo(category, software);
const baseLabelsObj = {
software_final: { final_cut_pro: 'Final Cut Pro', no_thanks: 'No, thanks' },
software_logic: { logic_pro: 'Logic Pro', no_thanks: 'No, thanks' }
};
const displayLabel = computedLabel || baseLabelsObj[category]?.[software] || label;
return (
<div className={`${className} form-selector-category ${styles.radio}`}>
<input
type="radio"
{...inputProps}
className={`${inputProps.className ? inputProps.className : ''} form-radio-input`}
id={id}
/>
<label className="form-label" htmlFor={id}>
<div className='label-container'>
<div className="label-text global-body-large-bold">{displayLabel} {infoText && (
<div
className="global-body-medium label-text"
dangerouslySetInnerHTML={{ __html: infoText }}
/>
)} </div>

{priceDelta && <div className="label-text">{priceDelta}</div>}
</div>
{software !== 'no_thanks' && (
<button
className=" button button-block add-button"
onClick={onClick}

>
Add <span className="icon icon-plus" />
</button>
)}
{software === 'no_thanks' && (
<button
className=" button button-block remove-button"
onClick={onClick}

>
Remove <span className="icon icon-close" />
</button>)}
</label>
</div>
);
};

const renderSelectorCategory = () => {
return options.filter(option=> option.value.dimensionSoftware === 'final_cut_pro' ||
option.value.dimensionSoftware === 'logic_pro' ||(option.value.dimensionSoftware === 'no_thanks' && showNoThanks) ).map(option => {

console.log(option,'option')
return (
<SelectorCategory
id={option.key}
key={option.key}
label={option.label}
priceDelta={option.priceDelta}
inputProps={{
disabled: option.isChecked || option.disabled,
checked: option.isChecked
}}
onClick={()=>{
console.log('test1')
if(!showNoThanks){
console.log('test2')
setShowNoThanks(true);
pnpPrototypeCustomize.fetchPNPOptions({key: optionGroupType, value: option.value})
}
}}
/>
);
});
};