diff --git a/src/actions/sponsor-forms-actions.js b/src/actions/sponsor-forms-actions.js index 83bb44467..afe165a26 100644 --- a/src/actions/sponsor-forms-actions.js +++ b/src/actions/sponsor-forms-actions.js @@ -537,10 +537,15 @@ export const saveSponsorManagedForm = const normalizeSponsorManagedForm = (entity) => { const normalizedEntity = { show_form_ids: entity.forms, - apply_to_all_add_ons: true, - allowed_add_ons: entity.add_ons.map((a) => a.id) + allowed_add_ons: entity.add_ons.map((a) => a.id), + apply_to_all_add_ons: false }; + if (entity.add_ons.includes("all")) { + normalizedEntity.apply_to_all_add_ons = true; + normalizedEntity.allowed_add_ons = []; + } + return normalizedEntity; }; diff --git a/src/components/mui/formik-inputs/mui-formik-select-group.js b/src/components/mui/formik-inputs/mui-formik-select-group.js index 7b9cbbbe1..9a1261d0a 100644 --- a/src/components/mui/formik-inputs/mui-formik-select-group.js +++ b/src/components/mui/formik-inputs/mui-formik-select-group.js @@ -53,7 +53,9 @@ const MuiFormikSelectGroup = ({ const [groupedOptions, setGroupedOptions] = useState([]); const [loading, setLoading] = useState(false); - const value = field.value || []; + const isAllSelected = + Array.isArray(field.value) && field.value.includes("all"); + const value = isAllSelected ? options : field.value || []; const error = meta.touched && meta.error; const fetchOptions = async () => { @@ -106,13 +108,14 @@ const MuiFormikSelectGroup = ({ const selectedValues = event.target.value; if (selectedValues.includes("selectAll")) { - const allValues = options.map(getOptionValue); - const currentValues = value.map(getOptionValue); + const currentValues = Array.isArray(value) + ? value.map(getOptionValue) + : []; - if (currentValues.length === allValues.length) { + if (isAllSelected || currentValues.length === options.length) { helpers.setValue([]); } else { - helpers.setValue(options); + helpers.setValue(["all"]); } return; } @@ -129,10 +132,11 @@ const MuiFormikSelectGroup = ({ helpers.setValue(selectedItems); }; - const selectedValues = value.map((item) => getOptionValue(item)); - - const isAllSelected = () => - selectedValues.length === options.length && options.length > 0; + const selectedValues = isAllSelected + ? options.map(getOptionValue) + : Array.isArray(value) + ? value.map((item) => getOptionValue(item)) + : []; const renderGroupedOptions = () => groupedOptions @@ -163,9 +167,16 @@ const MuiFormikSelectGroup = ({ value={optionValue} sx={{ pl: 2 }} onClick={() => { - const newValues = isChecked - ? selectedValues.filter((v) => v !== optionValue) - : [...selectedValues, optionValue]; + let newValues; + if (isAllSelected) { + newValues = options + .filter((opt) => getOptionValue(opt) !== optionValue) + .map(getOptionValue); + } else { + newValues = isChecked + ? selectedValues.filter((v) => v !== optionValue) + : [...selectedValues, optionValue]; + } handleChange({ target: { value: newValues } }); }} > @@ -254,10 +265,8 @@ const MuiFormikSelectGroup = ({ }} > 0 && !isAllSelected() - } + checked={isAllSelected} + indeterminate={selectedValues.length > 0 && !isAllSelected} sx={{ p: 1, "& svg": { diff --git a/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js b/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js index beb466030..63d790f31 100644 --- a/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js +++ b/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js @@ -56,7 +56,13 @@ const AddSponsorFormTemplatePopup = ({ add_ons: [] }, validationSchema: yup.object({ - add_ons: yup.array().min(1, "Select at least one add-on") + add_ons: yup + .array() + .test( + "add_ons-required", + "Select at least one add-on", + (value) => value?.includes("all") || value?.length > 0 + ) }), onSubmit: (values) => { const { add_ons } = values;