diff --git a/packages/components/src/components/stateful/Merchandize/Merchandize.tsx b/packages/components/src/components/stateful/Merchandize/Merchandize.tsx index e5e15bf4..a1cf53cc 100644 --- a/packages/components/src/components/stateful/Merchandize/Merchandize.tsx +++ b/packages/components/src/components/stateful/Merchandize/Merchandize.tsx @@ -5,20 +5,26 @@ import { ICategory, IOptions, IParsedCategoryConfiguration, + IRuleCombination, getFieldConfig, getFieldState, + isRuleValid, isVirtualCategoryEnabled, } from '@elastic-suite/gally-admin-shared' -import { useResource } from '../../../hooks' +import { useResource, useRuleOperators } from '../../../hooks' import { selectBundles, useAppSelector } from '../../../store' import DropDownWithoutError from '../../atoms/form/DropDownWithoutError' import Switch from '../../atoms/form/Switch' +import RulesManager from '../RulesManager/RulesManager' interface IProps { catConf: IParsedCategoryConfiguration - onChange?: (name: string, value: boolean | string) => void | Promise + onChange?: ( + name: string, + value: boolean | string | IRuleCombination + ) => void | Promise sortOptions: IOptions category: ICategory } @@ -39,6 +45,11 @@ function Merchandize({ ]) ) + // Rule engine operators + const ruleOperators = useRuleOperators() + + const isValid = !catConf?.isVirtual || isRuleValid(catConf?.virtualRule) + function handleChange(value: string | boolean, event: SyntheticEvent): void { onChange((event.target as HTMLInputElement).name, value) } @@ -98,6 +109,30 @@ function Merchandize({ )} + {isVirtualCategoryEnabled(bundles) && + ruleOperators && + catConf?.isVirtual ? ( + + { + onChange('virtualRule', value) + }} + rule={catConf?.virtualRule} + ruleOperators={ruleOperators} + error={!isValid} + /> + + ) : null} ) } diff --git a/packages/components/src/pages/admin/merchandize/categories.tsx b/packages/components/src/pages/admin/merchandize/categories.tsx index 4d5124b5..10e91d3d 100644 --- a/packages/components/src/pages/admin/merchandize/categories.tsx +++ b/packages/components/src/pages/admin/merchandize/categories.tsx @@ -11,7 +11,6 @@ import { LoadStatus, isError, isRuleValid, - isVirtualCategoryEnabled, parseCatConf, savePositions, serializeCatConf, @@ -28,7 +27,6 @@ import { useRuleOperators, } from '../../../hooks' import { findCategory } from '../../../services' -import { selectBundles, useAppSelector } from '../../../store' import Placeholder from '../../../components/atoms/Placeholder/Placeholder' import TitleBlock from '../../../components/molecules/layout/TitleBlock/TitleBlock' @@ -36,7 +34,6 @@ import TwoColsLayout from '../../../components/molecules/layout/twoColsLayout/Tw import CatalogSwitcher from '../../../components/stateful/CatalogSwitcher/CatalogSwitcher' import CategoryTree from '../../../components/stateful/CategoryTree/CategoryTree' import ProductsContainer from '../../../components/stateful/ProductsContainer/ProductsContainer' -import RulesManager from '../../../components/stateful/RulesManager/RulesManager' const pagesSlug = ['merchandize', 'categories'] @@ -45,7 +42,6 @@ function AdminMerchandizeCategories(): JSX.Element { const fetchApi = useApiFetch() const { t } = useTranslation('categories') const [isLoading, setIsLoading] = useState(false) - const bundles = useAppSelector(selectBundles) const { catalogId, localizedCatalogId, localizedCatalogIdWithDefault } = useContext(catalogContext) @@ -126,14 +122,13 @@ function AdminMerchandizeCategories(): JSX.Element { // Product positions const prevProductPositions = useRef('') - function handleUpdateCat(name: string, val: boolean | string): void { + function handleUpdateCat( + name: string, + val: boolean | string | IRuleCombination + ): void { setCatConf((catConf) => ({ ...catConf, [name]: val })) } - function handleUpdateRule(rule: IRuleCombination): void { - setCatConf((catConf) => ({ ...catConf, virtualRule: rule })) - } - function handleSelectCategory(category: ICategory): void { setSelectedCategoryItem(category) setCatConf(null) @@ -200,33 +195,16 @@ function AdminMerchandizeCategories(): JSX.Element { return ( <> - <> - - - - , - isVirtualCategoryEnabled(bundles) && ruleOperators && ( - - - - ), - ]} + + + + } > {Boolean(selectedCategoryItem?.id && localizedCatalogIdWithDefault) && (