@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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,19 @@
+import React from 'react';
+import { HideOptionTypes, TContentSourceGroup, UpdateGroupAction } from './types';
+import { FallbackBO } from '@antscorp/antsomi-ui/es/models/FallbackBO';
+export type TProps = {
+    groups: TContentSourceGroup[];
+    isLoadingListBO: boolean;
+    listBO: any;
+    hideOptionTypes?: HideOptionTypes;
+    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, hideOptionTypes, 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, hideOptionTypes: hideOptionTypes, 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,16 @@
+import React from 'react';
+import { HideOptionTypes, TContentSourceGroup, UpdateGroupAction } from './types';
+import { FallbackBO } from '@antscorp/antsomi-ui/es/models/FallbackBO';
+type TProps = {
+    data: TContentSourceGroup;
+    listBO: any[];
+    hideOptionTypes?: HideOptionTypes;
+    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,142 @@
+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, hideOptionTypes, 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]);
+    const isShowLevelSetting = useMemo(() => itemTypeId === PRODUCT_ITEM_TYPE_ID &&
+        relationship &&
+        !!(relationship === null || relationship === void 0 ? void 0 : relationship.enabled) &&
+        !(hideOptionTypes === null || hideOptionTypes === void 0 ? void 0 : hideOptionTypes.level), [hideOptionTypes === null || hideOptionTypes === void 0 ? void 0 : hideOptionTypes.level, itemTypeId, relationship]);
+    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) }),
+        isShowLevelSetting && (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,
+            !(hideOptionTypes === null || hideOptionTypes === void 0 ? void 0 : hideOptionTypes.filter) && (React.createElement(FilterSetting, { boId: itemTypeId, filters: filters, onOKChangeFilter: (conditions) => handleChange({
+                    type: 'FILTER',
+                    payload: { conditions },
+                }) })),
+            React.createElement(AlgorithmsSetting, { journeySettings: journeySettings, contentSourceGroupId: data.groupId, isHideRanking: hideOptionTypes === null || hideOptionTypes === void 0 ? void 0 : hideOptionTypes.ranking, 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,17 @@
+import React from 'react';
+import type { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+import type { ContentSourceModeView, HideOptionTypes, JourneySettings, TContentSourceSettings } from './types';
+interface SettingsProps {
+    serviceAuth: TServiceAuth;
+    mode: ContentSourceModeView;
+    hideOptionTypes?: HideOptionTypes;
+    onChange: (contentSource: TContentSourceSettings) => void;
+    onBOChange?: (item: {
+        itemTypeId: number;
+    }) => void;
+    initValue?: TContentSourceSettings;
+    isShowErrorAlert: boolean;
+    journeySettings: JourneySettings;
+}
+declare const _default: React.MemoExoticComponent<(props: SettingsProps) => React.JSX.Element>;
+export default _default;