@antscorp/antsomi-ui 1.3.3-beta.86 → 1.3.3-beta.87

package/es/components/atoms/InputDynamic/PopupShortLink.js

@@ -0,0 +1,85 @@
+// Libraries
+import React, { useEffect, useState } from 'react';
+import { Col, Row } from 'antd';
+// Molecules
+import { Modal } from '../../molecules';
+// Components
+import { Radio } from '../Radio';
+// Styled
+import { InputShortLink, InputWrapper } from './styled';
+// Utils
+import { validateURL } from './utils';
+const OPTIONS = [
+    {
+        value: 'individual',
+        label: 'Individual',
+    },
+    {
+        value: 'general',
+        label: 'General',
+    },
+];
+export const PopupShortLink = props => {
+    const { open, onClose, onOk, disabledOpts, initSelectedProperties, callback } = props;
+    const [state, setState] = useState({
+        link: '',
+        type: 'individual',
+        error: '',
+    });
+    useEffect(() => {
+        let type = 'individual';
+        if (initSelectedProperties && initSelectedProperties.keyTag) {
+            type = initSelectedProperties.keyTag === 'shortlink' ? 'individual' : 'general';
+        }
+        setState(prev => (Object.assign(Object.assign({}, prev), { link: initSelectedProperties.link, type: type })));
+    }, [initSelectedProperties, setState]);
+    const handleClose = () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { link: '', error: '' })));
+        if (onClose)
+            onClose();
+    };
+    const handleValidate = ({ urlString = state.link, afterValidate }) => {
+        const isValid = validateURL(urlString);
+        setState(prev => (Object.assign(Object.assign({}, prev), { error: isValid ? '' : 'Invalid URL' })));
+        if (typeof afterValidate === 'function')
+            afterValidate(isValid);
+    };
+    const handleOnChange = (value) => {
+        if (state.error)
+            handleValidate({ urlString: value });
+        setState(prev => (Object.assign(Object.assign({}, prev), { link: value })));
+    };
+    const handleOnOK = () => {
+        handleValidate({
+            afterValidate: (isValid) => {
+                if (isValid && onOk) {
+                    if (initSelectedProperties.urlDetected) {
+                        callback('REPLACE_DETECTED_URL', initSelectedProperties.urlDetected);
+                    }
+                    onOk(state.link, state.type);
+                    handleClose();
+                }
+            },
+        });
+    };
+    const onChangeType = (event) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { type: event.target.value })));
+    };
+    return (React.createElement(Modal, { open: open, onCancel: handleClose, title: React.createElement("div", { style: { color: 'rgba(0, 0, 0, 0.87)', fontWeight: 'normal', fontSize: '16px' } }, "Add Short Link"), okText: "OK", cancelText: "Cancel", closable: false, onOk: handleOnOK, okButtonProps: {
+            disabled: !validateURL(state.link),
+            type: !validateURL(state.link) ? 'default' : 'primary',
+        } },
+        React.createElement(Row, null,
+            React.createElement(Col, { span: 6 },
+                React.createElement("span", { style: { fontSize: 12, color: '#000' } }, "Short link type")),
+            React.createElement(Col, { span: 18 },
+                React.createElement(Radio.Group, { onChange: onChangeType, value: state.type }, OPTIONS.map(each => (React.createElement(Radio, { key: each.value, disabled: disabledOpts && disabledOpts[each.value], name: "shortlink-type", value: each.value }, each.label)))))),
+        React.createElement(Row, null,
+            React.createElement(Col, { span: 24 },
+                React.createElement(InputWrapper, null,
+                    React.createElement(InputShortLink, { required: true, isReverseMask: true, isHideErrMessage: true, labelColor: "#000000", id: "input-short-link-url", label: "Your URL", value: state.link, onAfterChange: handleOnChange })))),
+        !!state.error && (React.createElement(Row, null,
+            React.createElement(Col, { span: 6 }),
+            React.createElement(Col, { span: 18 },
+                React.createElement("div", null, state.error))))));
+};

package/es/components/atoms/InputDynamic/constants.d.ts

@@ -0,0 +1,71 @@
+export declare const DATE_AND_TIME_DEFAULT: {
+    type: string;
+    config: {
+        format: string;
+        date: {
+            check: boolean;
+            value: string;
+        };
+        time: {
+            check: boolean;
+            value: string;
+            timeFormat: string;
+        };
+    };
+};
+export declare const MAP_DATA_TYPE: {
+    number: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    string: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    text: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    datetime: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    boolean: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    array_number: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    array_string: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    array_datetime: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+    object: {
+        name: string;
+        label: string;
+        translateCode: string;
+        value: string;
+    };
+};

package/es/components/atoms/InputDynamic/constants.js

@@ -0,0 +1,71 @@
+export const DATE_AND_TIME_DEFAULT = {
+    type: 'DATE_AND_TIME',
+    config: {
+        format: 'DD/MM/YYYY',
+        date: {
+            check: true,
+            value: 'long',
+        },
+        time: {
+            check: true,
+            value: 'medium',
+            timeFormat: '24',
+        },
+    },
+};
+export const MAP_DATA_TYPE = {
+    number: {
+        name: 'number',
+        label: 'Number',
+        translateCode: '',
+        value: 'number',
+    },
+    string: {
+        name: 'string',
+        label: 'String',
+        translateCode: '',
+        value: 'string',
+    },
+    text: {
+        name: 'text',
+        label: 'Text',
+        translateCode: '',
+        value: 'text',
+    },
+    datetime: {
+        name: 'datetime',
+        label: 'Datetime',
+        translateCode: '',
+        value: 'datetime',
+    },
+    boolean: {
+        name: 'boolean',
+        label: 'Boolean',
+        translateCode: '',
+        value: 'boolean',
+    },
+    array_number: {
+        name: 'array_number',
+        label: 'Array of Numbers',
+        translateCode: '',
+        value: 'array_number',
+    },
+    array_string: {
+        name: 'array_string',
+        label: 'Array of Strings',
+        translateCode: '',
+        value: 'array_string',
+    },
+    array_datetime: {
+        name: 'array_datetime',
+        label: 'Array of Datetimes',
+        translateCode: '',
+        value: 'array_datetime',
+    },
+    object: {
+        name: 'object',
+        label: 'Object',
+        translateCode: '',
+        value: 'object',
+    },
+};

package/es/components/atoms/InputDynamic/index.d.ts

@@ -0,0 +1,2 @@
+export { InputDynamic } from './InputDynamic';
+export type { InputDynamicProps } from './types';

package/es/components/atoms/InputDynamic/index.js

@@ -0,0 +1 @@
+export { InputDynamic } from './InputDynamic';

package/es/components/atoms/InputDynamic/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const WrapperInputStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SpanIcon: import("styled-components").StyledComponent<"span", any, {
+    isDisabled?: boolean | undefined;
+}, never>;
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
+    top: number;
+    left: number;
+    isShow: boolean;
+}, never>;
+export declare const DynamicItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/InputDynamic/styled.js

@@ -0,0 +1,293 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+// Libraries
+import styled from 'styled-components';
+import { Input } from '../Input/Input';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const WrapperInputStyle = styled.div `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText};
+  position: relative;
+
+  .input-wrapper-outter {
+    position: relative;
+    max-width: 100%;
+    min-height: 22px;
+    max-height: 6rem;
+    overflow: auto;
+    padding: 5px;
+    border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1};
+  }
+
+  .customize-antsomi-profile {
+    position: absolute;
+    font-size: 20px;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: rgb(0, 94, 184);
+  }
+
+  .styles-input-wrapper {
+    border-bottom: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1} !important;
+    :hover {
+      cursor: text;
+      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+      border-bottom: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1};
+    }
+    :focus-within {
+      background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0};
+      border-bottom: 1px solid rgb(0, 94, 184);
+    }
+    :active {
+      background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
+      border-bottom: 1px solid rgb(0, 94, 184);
+    }
+  }
+
+  .input-error {
+    border-bottom-color: rgb(239, 51, 64);
+  }
+
+  .customize-antsomi-profile-outter {
+    position: absolute;
+    font-size: 20px;
+    right: 2.8rem;
+    top: 2.3rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7};
+  }
+
+  .input-personal {
+    padding: 0px 4px;
+    padding-right: 32px;
+    outline: none;
+    overflow-wrap: normal;
+    overflow: hidden;
+    text-overflow: unset;
+    white-space: normal;
+    // display: inline-block;
+
+    .detect-url {
+      background-color: #e8feca;
+      display: inline;
+      position: relative;
+      cursor: pointer;
+    }
+  }
+  /*
+  $base-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7};
+  $bg-base-color: #fff;
+  $border-base-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3_5};
+  $bg-btn-base-color: #f4f6f8; */
+
+  .antsomi-wrapper-personalization {
+    width: 100%;
+    height: 100%;
+    background: $bg-base-color;
+    border: 1px solid $border-base-color;
+    border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    .header {
+      padding: 13px 20px;
+      position: relative;
+
+      .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: $base-color;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 15px;
+        width: 95%;
+        border-bottom: 1px solid $border-base-color;
+      }
+    }
+
+    .body {
+      overflow: auto;
+      flex-grow: 1;
+      padding: 0 5px;
+
+      table {
+        width: 100%;
+        height: 100%;
+        table-layout: fixed;
+        border-collapse: collapse;
+        border-spacing: 0;
+        th,
+        td {
+          text-align: left;
+          padding: 0 15px;
+        }
+      }
+    }
+
+    .footer {
+      display: flex;
+      padding: 15px 25px;
+      justify-content: flex-end;
+    }
+  }
+
+  .btn {
+    min-width: 100px;
+    min-height: 40px;
+    border-radius: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius}px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  .group-btn {
+    width: 222px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .btn-default {
+    background-color: $bg-btn-base-color;
+    color: $base-color;
+    border: 1px solid #d7dfe8;
+
+    &:hover {
+      background-color: #e3e9ef;
+    }
+  }
+
+  .btn-blue {
+    background-color: $base-color;
+    color: $bg-base-color;
+    border: 1px solid #707070;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .input-outline {
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    height: 27px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .insert-word {
+    padding: 5px 8px;
+    color: white;
+    border: 1px solid;
+    border-radius: 20px;
+    height: 30px;
+    cursor: pointer;
+    line-height: 1px;
+    background: #bbefbe;
+
+    &.blue {
+      background: #3c39ba;
+    }
+
+    &.orange {
+      background: #fbac00;
+    }
+
+    &.violet-pc {
+      background: #6750a7;
+    }
+
+    &.disabled {
+      background: #ccc;
+    }
+    &.custom {
+      background: #bbefbe;
+      // border: 1px solid #BBEFBE;
+    }
+
+    em {
+      color: white;
+      font-style: normal;
+      font-size: 13px;
+      opacity: 0;
+      user-select: none;
+    }
+
+    &:hover {
+      em {
+        opacity: 1;
+      }
+    }
+  }
+`;
+export const SpanIcon = styled.span `
+  ${({ isDisabled }) => isDisabled && `cursor: not-allowed !important; opacity: 0.5;`}
+  font-size: 20px;
+`;
+export const InputWrapper = styled.div `
+  .input__wrapper {
+    display: flex;
+    align-items: center;
+
+    div.--default {
+      min-width: 120px;
+    }
+  }
+`;
+export const InputShortLink = styled(Input) ``;
+export const TooltipHover = styled.div `
+  position: fixed;
+  left: ${props => `${props.left}px`};
+  top: ${props => `${props.top}px`};
+
+  display: ${props => (props.isShow ? 'flex' : 'none')};
+  justify-content: center;
+  align-items: center;
+
+  background: rgba(0, 0, 0, 0.62);
+  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
+  font-size: 12px;
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  height: 24px;
+  width: auto;
+  z-index: 999;
+  padding: 5px 10px;
+  user-select: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-sizing: border-box;
+`;
+export const DynamicItem = styled.div `
+  padding: 4px 16px;
+  font-size: 13px;
+  color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw10};
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &:hover {
+    color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw0};
+    background-color: ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.colorPrimary};
+  }
+`;

package/es/components/atoms/InputDynamic/types.d.ts

@@ -0,0 +1,116 @@
+import { DisableShortLinkTypeProps } from './PopupShortLink';
+import { AllowDynamicType } from './InputDynamic';
+import { APIConfig, TDataType } from '../../molecules/AddDynamicContent';
+export type KeyTagType = 'shortlink' | 'shortlink_static';
+export type SelectedPropertiesProps = {
+    keyTag: KeyTagType;
+    link: string;
+    urlDetected: string;
+};
+export type AllowDynamicOptions = (typeof AllowDynamicType)[keyof typeof AllowDynamicType];
+export type InputDynamicProps = {
+    value: string;
+    isViewMode?: boolean;
+    isRealTime?: boolean;
+    ms?: number;
+    errors?: string[];
+    disabled?: boolean;
+    disabledOpts?: DisableShortLinkTypeProps;
+    allowDynamicOptions?: Array<AllowDynamicOptions>;
+    showIndex?: boolean;
+    showDisplayFormat?: boolean;
+    isShowCustomFunction?: boolean;
+    apiConfig?: APIConfig;
+    canMultipleLine?: boolean;
+    onError?: Function;
+    onChange: (valueOut: string) => any;
+    addMessageToQueue?: Function;
+};
+export type TOperatorValue = 'greater_than' | 'greater_than_equal' | 'less_than' | 'less_than_equal' | 'not_equals' | 'equals' | 'between' | 'exists' | 'not_exists' | 'contains' | 'doesnt_contain' | 'start_with' | 'not_start_with' | 'end_with' | 'not_end_with' | 'before_date' | 'after_date' | 'equal_time_ago' | 'not_equal_time_ago' | 'before_time_ago' | 'after_time_ago' | 'between_time_ago' | 'matches' | 'not_matches' | 'includes' | 'doesnt_include' | null;
+export type VisitorMetadata = {
+    item_type_id: string | number;
+    item_type_name: string;
+    item_property_name: string;
+};
+export type CustomerMetadata = VisitorMetadata;
+export type EventMetadata = {
+    insight_property_id: any | any[] | null;
+    insight_property_ids?: string[] | null;
+    event_action_id: string | null;
+    event_category_id: string | null;
+    event_tracking_name: string | null;
+    item_type_id: string | null;
+    item_type_name: string | null;
+    item_property_name: string | null;
+    item_property_label: string | null;
+    event_property_syntax: string | null;
+};
+export type TFilter = {
+    value: any;
+    operator: TOperatorValue;
+    data_type: TDataType;
+    column: string | null;
+    condition_type: 'comp_attr' | null;
+    value_type: 'event' | 'normal' | 'visitor' | 'customer';
+    time_unit?: 'DAY' | 'HOUR';
+    event_metadata?: EventMetadata;
+    visitor_metadata?: VisitorMetadata;
+    customer_metadata?: CustomerMetadata;
+    extend?: any;
+};
+export type TFilters = {
+    OR: {
+        AND: TFilter[];
+    }[];
+};
+export type TRanking = {
+    type: 'algorithms' | 'custom';
+    algorithms: {
+        sort: 'mix' | 'order';
+        value: {
+            value: string;
+            quantity: number;
+            by?: string;
+            last?: number;
+            to?: string;
+            sort_type?: 'desc' | 'asc';
+            [key: string]: any;
+        }[];
+        filters: string[];
+    };
+    custom: string;
+};
+export type TContentSourceGroup = {
+    groupId: string;
+    groupName: string;
+    filters: TFilters;
+    ranking: TRanking;
+    itemTypeId: number | null;
+    itemTypeName: string | null;
+    itemTypeDisplay: string | null;
+    fallback: string;
+    level?: string;
+    data?: Record<string, any>[];
+};
+export type TContentSourceSettings = {
+    groups: TContentSourceGroup[];
+    expanded: string[];
+    isLoadingDataBO: boolean;
+};
+export type DynamicContentProps = {
+    visible: boolean;
+    contentSources: TContentSourceSettings;
+    activeTagId: string;
+    defaultData: {
+        [tagId: string]: Record<string, any>;
+    };
+    journeySettings: {
+        unsubscribeSegmentType?: string | null;
+        triggerType?: string | null;
+        triggerEvent?: {
+            eventActionId: number | string;
+            eventCategoryId: number | string;
+            insightPropertyIds: any[];
+        };
+    };
+};

package/es/components/atoms/InputDynamic/types.js

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

package/es/components/atoms/InputDynamic/utils.d.ts

@@ -0,0 +1,30 @@
+import type { AllowDynamicOptions } from './types';
+import type { DynamicContentType } from '../../molecules/AddDynamicContent';
+export declare function validateURL(string: string): boolean;
+export declare const getInsertPatternWithAppendSpaceEnd: (id: any, code: any, label: any, bgColor: any) => string;
+export declare const genShortLinkValue: (url: string, type?: string) => {
+    id: string;
+    value: string;
+    label: string;
+};
+export declare const getInsertPattern: (id: any, code: any, label: any, bgColor: any) => string;
+export declare const convertHtmlText: (htmlText: string, format: string | undefined, state: any, objectWidgetInput?: {}, type?: string, init?: string) => string;
+export declare const handleUpdateInputPersonalization: (listIconRemove: any, listBtnElement: any) => void;
+export declare function removeHtmlTag(text: any): string;
+export declare function convertBreakTag(text: any): any;
+export declare function convertDivToBreakTag(text: any): any;
+export declare const pasteHtmlAtCaret: (html: any, selectPastedContent: any, callback?: any) => void;
+export declare const getInsertLinkPatternWithAppendSpaceEnd: (id: string | number, value: string, label: string) => string;
+export declare const validateHTMLTags: {
+    escapeCustomTags(t: any): any;
+    isCustomTag(t: any): boolean;
+    isValidTag(t: any): boolean;
+};
+export declare const spacingNonTracking: (data: any) => boolean;
+export declare const initialValue: (initValue: string) => string | undefined;
+export declare const mapLabelPersonalization: (type: AllowDynamicOptions) => string;
+export declare const createElement: (element: any, attribute: any, inner: any) => any;
+export declare const DATA_ATTR_WITH_TYPE: string[];
+export declare const mapDataFormatAttribute: (dataIn: any) => any;
+export declare const regexAttrFormat: RegExp;
+export declare const getBgColorByContentSourceType: (type: DynamicContentType) => string;