@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/organism/AlgorithmsSetting/styled.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { ContentSourceModeView } from '../ContentSources/types';
+export declare const AlgorithmsSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;
+export declare const AlgorithmWrapper: import("styled-components").StyledComponent<"div", any, {
+    mode: ContentSourceModeView;
+}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules/SelectV2").SelectProps): import("react").JSX.Element;
+    defaultProps: {
+        suffixIcon: import("react").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react").JSX.Element;
+    };
+}, any, {}, never>;

package/es/components/organism/AlgorithmsSetting/styled.js

@@ -0,0 +1,46 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Molecules
+import { SelectV2 as Select, Tabs } from '../../molecules';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const AlgorithmsSettingWrapper = styled.div ``;
+export const StyledTabs = styled(Tabs) `
+  margin-top: 8px !important;
+  width: 100%;
+
+  & .antsomi-tabs-nav {
+    margin-bottom: 16px !important;
+  }
+
+  .antsomi-tabs-nav-list {
+    height: 36px;
+
+    .antsomi-tabs-tab {
+      padding: 0px 1.25rem;
+    }
+  }
+  .antsomi-tabs-tab-btn {
+    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  }
+`;
+export const AlgorithmWrapper = styled.div `
+  display: grid;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px 8px;
+
+  margin-top: 0;
+  grid-template-columns: ${props => (props.mode === 'CDP' ? '192px 1fr 30px' : '1fr 1fr 30px')};
+  .antsomi-select-selector {
+    border-top: 0 !important;
+    border-left: 0 !important;
+    border-right: 0 !important;
+  }
+`;
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selector {
+    height: auto;
+  }
+`;

package/es/components/organism/AlgorithmsSetting/types.d.ts

@@ -0,0 +1,4 @@
+export interface SelectOptionProps {
+    value: string;
+    label: string;
+}

package/es/components/organism/AlgorithmsSetting/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/AlgorithmsSetting/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const isOperatorInRange: (operator: string) => boolean;
+export declare const isExistKey: (arr: any, val: any, keyArr?: string) => boolean;

package/es/components/organism/AlgorithmsSetting/utils.js

@@ -0,0 +1,9 @@
+import { OPERATOR_OPTIONS } from './constants';
+export const isOperatorInRange = (operator) => [
+    OPERATOR_OPTIONS.GREATER_THAN_RANGE.value,
+    OPERATOR_OPTIONS.LESS_THAN_RANGE.value,
+    OPERATOR_OPTIONS.GREATER_THAN_EQUAL_RANGE.value,
+    OPERATOR_OPTIONS.LESS_THAN_EQUAL_RANGE.value,
+    OPERATOR_OPTIONS.ABSOLUTE_DISTANCE_RANGE.value,
+].includes(operator);
+export const isExistKey = (arr, val, keyArr = 'value') => arr.findIndex((item) => item[keyArr] === val) > -1;

package/es/components/organism/ContentSources/Content.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TContentSourceGroup, UpdateGroupAction } from './types';
+import { FallbackBO } from '@antscorp/antsomi-ui/es/models/FallbackBO';
+export type TProps = {
+    groups: TContentSourceGroup[];
+    isLoadingListBO: boolean;
+    listBO: any;
+    onChange?: (contentSources: TContentSourceGroup[]) => void;
+    expanded?: string[];
+    onDeleteGroup?: (groupId: string) => void;
+    onChangeGroup?: (groupId: string, action: UpdateGroupAction) => void;
+    onChangeExpand?: (expanded: string[]) => void;
+    isShowErrorAlert: boolean;
+    journeySettings: Record<string, any>;
+    listFallbackBO: FallbackBO[];
+};
+declare const Content: (props?: TProps) => React.JSX.Element;
+export default Content;

package/es/components/organism/ContentSources/Content.js

@@ -0,0 +1,81 @@
+// Libraries
+import React from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Divider, Icon, Input } from '../../atoms';
+// Molecules
+import { Collapse } from '../../molecules';
+// Components
+import Group from './Group';
+// Styled
+import { StyledCollapsePanel, WrapperPanelHeader } from './styled';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Selectors
+import { useSelectModeView } from './provider';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const defaultProps = {
+    groups: [],
+    isShowErrorAlert: false,
+    journeySettings: {},
+    isLoadingListBO: true,
+    listFallbackBO: [],
+    listBO: [],
+};
+const Content = (props = defaultProps) => {
+    // prettier-ignore
+    const { groups, isLoadingListBO, listBO, onChangeGroup, onChangeExpand, expanded, isShowErrorAlert, listFallbackBO, journeySettings, onDeleteGroup } = props;
+    const { t } = i18nInstance;
+    const mode = useSelectModeView();
+    const isCDP = mode === 'CDP';
+    const groupNames = groups.map(g => g.groupName);
+    const handleOnChangeExpand = (value) => {
+        if (!onChangeExpand)
+            return;
+        if (typeof value === 'string') {
+            onChangeExpand([value]);
+        }
+        else {
+            onChangeExpand(value);
+        }
+    };
+    const handleOnDeleteGroup = (e, groupId) => {
+        e.stopPropagation();
+        if (onDeleteGroup)
+            onDeleteGroup(groupId);
+    };
+    const handleChangeGroupName = (groupId, name) => {
+        if (onChangeGroup) {
+            onChangeGroup(groupId, {
+                type: 'NAME',
+                payload: { name },
+            });
+        }
+    };
+    const renderCollapsePanelHeader = (group) => {
+        var _a;
+        const hasSimilarGroupName = groupNames.filter(name => group.groupName === name).length > 1;
+        const errorSimilarGroupName = {};
+        if (hasSimilarGroupName) {
+            errorSimilarGroupName.status = 'error';
+            errorSimilarGroupName.errorMsg = t(translations.contentSources.errorMessage.groupSameName);
+        }
+        return (React.createElement(WrapperPanelHeader, null,
+            React.createElement("div", { style: { flex: 1 } },
+                React.createElement(Input, Object.assign({ className: "input-custom-size", value: group.groupName, onClick: e => e.stopPropagation(), onAfterChange: value => handleChangeGroupName(group.groupId, value), required: true, status: hasSimilarGroupName ? 'error' : '' }, errorSimilarGroupName))),
+            React.createElement(Icon, { style: {
+                    color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
+                }, onClick: (e) => handleOnDeleteGroup(e, group.groupId), type: "icon-ants-outline-delete", size: 20 })));
+    };
+    return (React.createElement(Collapse, { ghost: true, bordered: true, activeKey: expanded, expandIconPosition: "end", onChange: handleOnChangeExpand, destroyInactivePanel: true, rootClassName: "no-border-top" }, groups.map((group, index) => {
+        const groupNode = (React.createElement(Group, { data: group, groupNames: groupNames, isLoadingSelectBO: isLoadingListBO, listBO: listBO, onChange: onChangeGroup, isShowErrorAlert: isShowErrorAlert, journeySettings: journeySettings, listFallbackBO: listFallbackBO }));
+        if (isCDP) {
+            return React.createElement(React.Fragment, { key: group.groupId }, groupNode);
+        }
+        return (React.createElement(React.Fragment, { key: group.groupId },
+            React.createElement(StyledCollapsePanel, { header: renderCollapsePanelHeader(group), key: group.groupId }, groupNode),
+            index < groups.length && (React.createElement(Divider, { style: { margin: '8px 0px' }, type: "horizontal", dashed: true }))));
+    })));
+};
+export default Content;

package/es/components/organism/ContentSources/Group.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TContentSourceGroup, UpdateGroupAction } from './types';
+import { FallbackBO } from '@antscorp/antsomi-ui/es/models/FallbackBO';
+type TProps = {
+    data: TContentSourceGroup;
+    listBO: any[];
+    isLoadingSelectBO: boolean;
+    onChange?: (groupId: string, action: UpdateGroupAction) => void;
+    isShowErrorAlert: boolean;
+    journeySettings: Record<string, any>;
+    listFallbackBO: FallbackBO[];
+    groupNames: string[];
+};
+declare const Group: (props: TProps) => React.JSX.Element;
+export default Group;

package/es/components/organism/ContentSources/Group.js

@@ -0,0 +1,138 @@
+import React, { useMemo } from 'react';
+import { cloneDeep, get, isEmpty } from 'lodash';
+// Molecules
+import { Space, Text } from '../../atoms';
+import { SelectV2 as Select } from '../../molecules';
+// Styled
+import { WrapperFallback } from './styled';
+// Utils
+import { TRANSLATE_TEXT, buildOptionArchive, convertValue, isCheckBOArchiveDelete } from './utils';
+// Constants
+import { ITEM_TYPE_NAME, PRODUCT_ITEM_TYPE_ID, } from '@antscorp/antsomi-ui/es/constants/contentSource';
+import { LEVEL_OPTIONS } from './components/LevelSetting/constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { LABEL_WIDTH } from './constants';
+// Components
+import { FilterSetting } from '../FilterSetting';
+import { AlgorithmsSetting } from '../AlgorithmsSetting';
+import LevelSetting from './components/LevelSetting';
+// Queries
+import { useGetBODetail } from '@antscorp/antsomi-ui/es/queries/BusinessObject';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+// Selects
+import { useSelectModeView, useSelectServiceAuth } from './provider';
+const cdpStyle = {
+    display: 'flex',
+    gap: 4,
+    marginBottom: '0px',
+    width: LABEL_WIDTH,
+    flexShrink: 0,
+};
+const Group = (props) => {
+    var _a, _b;
+    const { data, isLoadingSelectBO, listBO, listFallbackBO, isShowErrorAlert, journeySettings, onChange, } = props;
+    const { itemTypeId, filters, level, itemTypeName } = data;
+    const mode = useSelectModeView();
+    const isCDP = mode === 'CDP';
+    const options = useMemo(() => {
+        var _a;
+        const filterdOptions = (_a = buildOptionArchive(listBO, convertValue(listBO, itemTypeId))) === null || _a === void 0 ? void 0 : _a.map((bo) => ({
+            value: bo.value,
+            label: bo.label,
+        }));
+        return filterdOptions;
+    }, [listBO, itemTypeId]);
+    const serviceAuth = useSelectServiceAuth();
+    const handleChange = (value) => {
+        if (onChange) {
+            onChange(data.groupId, value);
+        }
+    };
+    // Queries
+    const { data: businessObjectDetail } = useGetBODetail(serviceAuth, itemTypeId);
+    const relationship = get(businessObjectDetail, 'data_upd_methods.RELATIONSHIP', {});
+    const listFallbackByBO = useMemo(() => {
+        var _a;
+        let listFallback = cloneDeep(listFallbackBO);
+        listFallback = listFallbackBO.filter(option => {
+            if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                return ['hidden', 'none', 'product_viewed_most_often'].includes(option.fallbackValue || '');
+            }
+            return true;
+        });
+        if (!listFallback.some(fallback => fallback.fallbackValue === data.fallback)) {
+            if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                handleChange({
+                    type: 'FALLBACK',
+                    payload: { fallback: 'product_viewed_most_often' },
+                });
+            }
+            else {
+                handleChange({
+                    type: 'FALLBACK',
+                    payload: { fallback: (_a = listFallback[0]) === null || _a === void 0 ? void 0 : _a.fallbackValue },
+                });
+            }
+        }
+        return listFallback;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [listFallbackBO, itemTypeName]);
+    useDeepCompareEffect(() => {
+        var _a;
+        if (!isEmpty(relationship)) {
+            if (relationship === null || relationship === void 0 ? void 0 : relationship.enabled) {
+                if (relationship.recommendation_level &&
+                    !((_a = LEVEL_OPTIONS[relationship.recommendation_level]) === null || _a === void 0 ? void 0 : _a.find((item) => item.value === level))) {
+                    handleChange({
+                        type: 'LEVEL',
+                        payload: {
+                            level: get(LEVEL_OPTIONS, `[${relationship.recommendation_level}][0].value`, 'parent'),
+                        },
+                    });
+                }
+            }
+            else {
+                handleChange({
+                    type: 'LEVEL',
+                    payload: { level: undefined },
+                });
+            }
+        }
+    }, [level, relationship]);
+    return (React.createElement(Space, { size: 20, direction: "vertical" },
+        React.createElement(Select, { showSearch: true, loading: isLoadingSelectBO, required: isCDP, isReverseMask: isCDP, labelStyle: isCDP ? cdpStyle : {}, style: isCDP ? { width: '100%' } : {}, containerStyle: isCDP ? { flexDirection: 'row', alignItems: 'baseline' } : {}, label: React.createElement(Text, { type: "secondary", color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText }, isCDP ? TRANSLATE_TEXT.csTitle : TRANSLATE_TEXT.selectCsTitle), options: options, placeholder: TRANSLATE_TEXT.selectAnItem, value: convertValue(listBO, itemTypeId), onChange: value => handleChange({
+                type: 'BO_TYPE',
+                payload: { itemTypeId: value },
+            }), errorArchive: isCheckBOArchiveDelete(listBO, itemTypeId) }),
+        itemTypeId === PRODUCT_ITEM_TYPE_ID && relationship && !!(relationship === null || relationship === void 0 ? void 0 : relationship.enabled) && (React.createElement(LevelSetting, { value: level || 'parent', levelOption: relationship.recommendation_level, onChange: e => {
+                handleChange({
+                    type: 'LEVEL',
+                    payload: { level: e.target.value },
+                });
+            } })),
+        itemTypeId && (React.createElement(React.Fragment, null,
+            React.createElement(FilterSetting, { boId: itemTypeId, filters: filters, onOKChangeFilter: (conditions) => handleChange({
+                    type: 'FILTER',
+                    payload: { conditions },
+                }) }),
+            React.createElement(AlgorithmsSetting, { journeySettings: journeySettings, contentSourceGroupId: data.groupId, isShowErrorAlert: isShowErrorAlert, itemTypeId: itemTypeId, data: data.ranking, onChange: (value) => handleChange({
+                    type: 'ALGORITHMS',
+                    payload: { ranking: value },
+                }), itemTypeName: itemTypeName }),
+            (itemTypeId === PRODUCT_ITEM_TYPE_ID || itemTypeName === ITEM_TYPE_NAME.ARTICLE) && (React.createElement(WrapperFallback, { mode: mode },
+                React.createElement(Text, { type: "secondary", color: isCDP ? (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText : undefined, style: {
+                        fontWeight: isCDP ? 'normal' : 'bold',
+                        marginBottom: '-12px',
+                        width: isCDP ? LABEL_WIDTH : 'auto',
+                        flexShrink: isCDP ? 0 : 1,
+                    } }, TRANSLATE_TEXT.fallback),
+                React.createElement(Select, { options: listFallbackByBO === null || listFallbackByBO === void 0 ? void 0 : listFallbackByBO.map(({ fallbackDisplay, fallbackValue }) => ({
+                        label: fallbackDisplay,
+                        value: fallbackValue,
+                    })), containerStyle: isCDP ? { width: '100%' } : {}, value: data.fallback, onChange: value => handleChange({
+                        type: 'FALLBACK',
+                        payload: { fallback: value },
+                    }) })))))));
+};
+export default Group;

package/es/components/organism/ContentSources/Settings.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+import type { ContentSourceModeView, JourneySettings, TContentSourceSettings } from './types';
+interface SettingsProps {
+    serviceAuth: TServiceAuth;
+    mode: ContentSourceModeView;
+    onChange: (contentSource: TContentSourceSettings) => void;
+    initValue?: TContentSourceSettings;
+    isShowErrorAlert: boolean;
+    journeySettings: JourneySettings;
+}
+declare const _default: React.MemoExoticComponent<(props: SettingsProps) => React.JSX.Element>;
+export default _default;

package/es/components/organism/ContentSources/Settings.js

@@ -0,0 +1,259 @@
+// Libraries
+import React, { memo, useEffect, useLayoutEffect, useState } from 'react';
+import { get, isArray, isEmpty, set } from 'lodash';
+// Locale
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Atoms
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import Content from './Content';
+// Styled
+import { ContentContainer } from './styled';
+// Constants
+import { ARTICLE_RANKING_DEFAULT, GET_TOP_RANKING_DEFAULT, MAX_NUM_OF_CONTENT_SOURCE, } from './constants';
+import { FILTERS_DEFAULT, ITEM_TYPE_NAME, PRODUCT_ITEM_TYPE_ID, PRODUCT_RANKING_DEFAULT, } from '@antscorp/antsomi-ui/es/constants/contentSource';
+// Queries
+import { useGetListBO } from '@antscorp/antsomi-ui/es/queries/BusinessObject';
+import { useGetListFallbackBO } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+// Provider
+import { useContentSourceDispatch, useSelectContentSources, useSelectModeView } from './provider';
+import { deleteContentSourceGroup, setContentSourceGroup, updateContentSourceSettings, updateModeView, } from './reducer';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/organism/ContentSources/Settings.tsx';
+const Settings = (props) => {
+    const { serviceAuth, mode, isShowErrorAlert, initValue, journeySettings, onChange } = props;
+    const { url = '', userId, token, accountId } = serviceAuth;
+    const { t } = i18nInstance;
+    const contentSources = useSelectContentSources();
+    const { groups, expanded } = contentSources;
+    const modeView = useSelectModeView();
+    const isCDP = modeView === 'CDP';
+    const [isInitDataCDPDone, setIsInitDataCDPDone] = useState(false);
+    const contentSourcesDebounce = useDebounce(contentSources, 400);
+    const { data: listBO, isLoading: isLoadingListBO, refetch: refetchListBO, } = useGetListBO({
+        url,
+    }, {
+        token,
+        userId,
+        accountId,
+    }, {
+        onSuccess(data) {
+            if (!isInitDataCDPDone &&
+                isCDP &&
+                isArray(data) &&
+                contentSources.groups.length === 1 &&
+                contentSources.groups[0] &&
+                !contentSources.groups[0].itemTypeId) {
+                const BOProduct = data.find(bo => +bo.id === PRODUCT_ITEM_TYPE_ID) || {};
+                const groupId = get(contentSources, 'groups[0].groupId', '');
+                const itemTypeId = BOProduct === null || BOProduct === void 0 ? void 0 : BOProduct.id;
+                const itemTypeDisplay = BOProduct === null || BOProduct === void 0 ? void 0 : BOProduct.label;
+                const itemTypeName = BOProduct === null || BOProduct === void 0 ? void 0 : BOProduct.name;
+                let valueRanking = GET_TOP_RANKING_DEFAULT;
+                if (itemTypeId === PRODUCT_ITEM_TYPE_ID) {
+                    valueRanking = PRODUCT_RANKING_DEFAULT;
+                    if (isCDP) {
+                        set(valueRanking, 'algorithms.sort', 'order');
+                    }
+                }
+                else if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                    valueRanking = ARTICLE_RANKING_DEFAULT;
+                }
+                const newRanking = valueRanking;
+                if (groupId && itemTypeId) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    contentSourceDispatch({
+                        type: 'SET_CONTENT_SOURCE_GROUP',
+                        payload: {
+                            groupId,
+                            values: {
+                                itemTypeId,
+                                itemTypeDisplay,
+                                itemTypeName,
+                                ranking: newRanking,
+                                filters: FILTERS_DEFAULT,
+                            },
+                        },
+                    });
+                    setIsInitDataCDPDone(true);
+                }
+            }
+        },
+    });
+    const { data: listFallbackBO } = useGetListFallbackBO({
+        serviceAuth,
+    });
+    const contentSourceDispatch = useContentSourceDispatch();
+    const handleChangeItemTypeId = ({ groupId, id, callback, }) => {
+        try {
+            const selected = listBO === null || listBO === void 0 ? void 0 : listBO.find((bo) => bo.value === id);
+            const itemTypeDisplay = selected === null || selected === void 0 ? void 0 : selected.label;
+            const itemTypeName = selected === null || selected === void 0 ? void 0 : selected.name;
+            let valueRanking = GET_TOP_RANKING_DEFAULT;
+            if (id === PRODUCT_ITEM_TYPE_ID) {
+                valueRanking = PRODUCT_RANKING_DEFAULT;
+                if (isCDP) {
+                    set(valueRanking, 'algorithms.sort', 'order');
+                }
+            }
+            else if (itemTypeName === ITEM_TYPE_NAME.ARTICLE) {
+                valueRanking = ARTICLE_RANKING_DEFAULT;
+            }
+            const newRanking = valueRanking;
+            if (groupId) {
+                contentSourceDispatch({
+                    type: 'SET_CONTENT_SOURCE_GROUP',
+                    payload: {
+                        groupId,
+                        values: {
+                            itemTypeId: id,
+                            itemTypeDisplay,
+                            itemTypeName,
+                            ranking: newRanking,
+                            filters: FILTERS_DEFAULT,
+                        },
+                    },
+                });
+                if (callback)
+                    callback();
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleChangeItemTypeId',
+                args: {},
+            });
+        }
+    };
+    const handleChangeContentSourceGroup = (groupId, action) => {
+        try {
+            switch (action.type) {
+                case 'BO_TYPE': {
+                    const { itemTypeId } = action.payload;
+                    if (itemTypeId)
+                        handleChangeItemTypeId({ groupId, id: itemTypeId });
+                    break;
+                }
+                case 'ALGORITHMS': {
+                    const { ranking } = action.payload;
+                    contentSourceDispatch(setContentSourceGroup({ groupId, values: { ranking } }));
+                    break;
+                }
+                case 'FILTER': {
+                    const { conditions } = action.payload;
+                    contentSourceDispatch(setContentSourceGroup({ groupId, values: { filters: conditions } }));
+                    break;
+                }
+                case 'FALLBACK': {
+                    const { fallback } = action.payload;
+                    if (fallback) {
+                        contentSourceDispatch(setContentSourceGroup({ groupId, values: { fallback } }));
+                    }
+                    break;
+                }
+                case 'NAME': {
+                    const { name } = action.payload;
+                    contentSourceDispatch(setContentSourceGroup({ groupId, values: { groupName: name } }));
+                    break;
+                }
+                case 'LEVEL': {
+                    const { level } = action.payload;
+                    contentSourceDispatch(setContentSourceGroup({ groupId, values: { level } }));
+                    break;
+                }
+                default: {
+                    throw new Error('Invalid action type');
+                }
+            }
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'handleChangeContentSourceGroup',
+                args: {
+                    groupId,
+                    action,
+                },
+            });
+        }
+    };
+    const handleDeleteContentSourceGroup = (groupId) => {
+        const group = contentSources.groups.find(g => g.groupId === groupId);
+        if (group)
+            // Re-use function in case change content source type
+            // for case remove content source
+            handleChangeItemTypeId({
+                groupId,
+                id: group.itemTypeId,
+                isDelete: true,
+                callback: () => contentSourceDispatch(deleteContentSourceGroup(groupId)),
+            });
+    };
+    useEffect(() => {
+        contentSourceDispatch({
+            type: 'SERVICE_AUTH',
+            payload: {
+                serviceAuth,
+            },
+        });
+    }, [serviceAuth, contentSourceDispatch]);
+    useLayoutEffect(() => {
+        if (mode) {
+            contentSourceDispatch(updateModeView(mode));
+        }
+    }, [mode, contentSourceDispatch]);
+    // INIT group in case using CDP mode
+    useLayoutEffect(() => {
+        if (isCDP && groups.length === 0) {
+            contentSourceDispatch({
+                type: 'ADD_CONTENT_SOURCE',
+                payload: {},
+            });
+        }
+    }, [isCDP, contentSourceDispatch, groups.length]);
+    // init data
+    useDeepCompareEffect(() => {
+        if (!isEmpty(initValue)) {
+            contentSourceDispatch(updateContentSourceSettings(initValue));
+            if (isCDP) {
+                setIsInitDataCDPDone(true);
+            }
+        }
+        else {
+            if (isCDP) {
+                refetchListBO();
+                setIsInitDataCDPDone(false);
+            }
+        }
+    }, [initValue, contentSourceDispatch, isCDP]);
+    // callback data out
+    useDeepCompareEffect(() => {
+        if (typeof onChange === 'function') {
+            onChange(contentSourcesDebounce);
+        }
+    }, [contentSourcesDebounce]);
+    return (React.createElement(ContentContainer, { className: "contentsource-container" },
+        React.createElement(Content, { isLoadingListBO: isLoadingListBO, listBO: listBO, groups: groups, expanded: expanded, onChangeExpand: expanded => {
+                contentSourceDispatch({
+                    type: 'EXPANDED',
+                    payload: {
+                        expanded,
+                    },
+                });
+            }, onChangeGroup: (groupId, action) => {
+                handleChangeContentSourceGroup(groupId, action);
+            }, onDeleteGroup: groupId => handleDeleteContentSourceGroup(groupId), journeySettings: journeySettings, isShowErrorAlert: isShowErrorAlert, listFallbackBO: listFallbackBO || [] }),
+        groups.length < MAX_NUM_OF_CONTENT_SOURCE && !isCDP && (React.createElement(Button, { type: "text", onClick: () => contentSourceDispatch({
+                type: 'ADD_CONTENT_SOURCE',
+                payload: {},
+            }) },
+            "+ ",
+            t(translations.addGroup.title).toString()))));
+};
+export default memo(Settings);

package/es/components/organism/ContentSources/components/LevelSetting/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const LEVEL_OPTIONS: {
+    parent: {
+        value: string;
+        label: string;
+    }[];
+    child: {
+        value: string;
+        label: string;
+    }[];
+    parent_child: {
+        value: string;
+        label: string;
+    }[];
+};

package/es/components/organism/ContentSources/components/LevelSetting/constants.js

@@ -0,0 +1,24 @@
+export const LEVEL_OPTIONS = {
+    parent: [
+        {
+            value: 'parent',
+            label: 'Parent',
+        },
+    ],
+    child: [
+        {
+            value: 'child',
+            label: 'Child',
+        },
+    ],
+    parent_child: [
+        {
+            value: 'parent',
+            label: 'Parent',
+        },
+        {
+            value: 'child',
+            label: 'Child',
+        },
+    ],
+};

package/es/components/organism/ContentSources/components/LevelSetting/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RadioGroupContextProps } from 'antd/lib/radio';
+export interface ILevelSettingProps extends RadioGroupContextProps {
+    levelOption: string;
+}
+declare const _default: React.MemoExoticComponent<(props: ILevelSettingProps) => React.JSX.Element>;
+export default _default;