@antscorp/antsomi-ui 1.3.3-beta.69 → 1.3.3-beta.70

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

@@ -1,3 +1,5 @@
+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) => {
@@ -20,3 +22,9 @@ export declare const validateHTMLTags: {
 };
 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;

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

@@ -12,14 +12,19 @@ import { get } from 'lodash';
 import { decode } from 'html-entities';
 // Utils
 import { getObjectPropSafely, random } from '@antscorp/antsomi-ui/es/utils';
+import { getStringFormatDateDF } from '../../molecules/AddDynamicContent/utils';
+// Constants
+import { AllowDynamicType } from './InputDynamic';
+import { DATE_AND_TIME_DEFAULT, MAP_DATA_TYPE } from './constants';
+import { DYNAMIC_CONTENT_TYPE_KEY } from '../../molecules/AddDynamicContent/constants';
 export function validateURL(string) {
     // eslint-disable-next-line no-useless-escape
     const regexp = /^((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/;
     return regexp.test(string);
 }
-export const getInsertPatternWithAppendSpaceEnd = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="max-width: 250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding: 5px 8px; color: white; font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; margin-top: 2px; cursor: pointer; background: ${bgColor}; height: auto" value=${code
+export const getInsertPatternWithAppendSpaceEnd = (id, code, label, bgColor) => `<button id="${id}" contenteditable="false" class="insert-word" style="position: relative; max-width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 2px 3px 8px; color: rgb(0, 0, 0); font-size: inherit; outline: none; border: 1px solid transparent; border-radius: 1.2rem; cursor: pointer; background: ${bgColor}; height: auto;" value=${code
     .replace(/\s/gm, '&nbsp;')
-    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="color: white;font-style: normal; marign-left: 4px; position: relative; z-index: 1;font-size: 1rem;font-weight: bold">x</em></button>&nbsp;`;
+    .replace(/"/gm, '&quot;')}><span style="line-height: 20px;margin-right: 8px;pointer-events:none;">${label}</span><em class="editor-icon-remove" style="position: absolute; top: 50%; left: 100%; transform: translate(-50%, -50%); color: rgb(48, 95, 184); background-color: rgb(255, 255, 255); font-style: normal; margin-top: 1px; z-index: 1; font-size: 13px; font-weight: bold; margin-left: -12px; line-height: 18px; padding: 0px 3px; border-radius: 50%;">✕</em></button>&nbsp;`;
 export const genShortLinkValue = (url, type) => {
     const id = random(5);
     let keyTag = 'shortlink';
@@ -749,3 +754,119 @@ export const initialValue = (initValue) => {
         console.log(err);
     }
 };
+export const mapLabelPersonalization = (type) => ({
+    [AllowDynamicType.SHORTLINK]: 'Add short link',
+    [AllowDynamicType.ADDPERSONALIZATION]: 'Add Personalization',
+}[type]);
+export const createElement = (element, attribute, inner) => {
+    try {
+        if (typeof element === 'undefined') {
+            return false;
+        }
+        if (typeof inner === 'undefined') {
+            inner = '';
+        }
+        const el = document.createElement(element);
+        if (typeof attribute === 'object') {
+            for (const key in attribute) {
+                el.setAttribute(key, attribute[key]);
+            }
+        }
+        if (!Array.isArray(inner)) {
+            inner = [inner];
+        }
+        for (let k = 0; k < inner.length; k++) {
+            if (inner[k].tagName) {
+                el.appendChild(inner[k]);
+            }
+            else {
+                el.appendChild(document.createTextNode(inner[k]));
+            }
+        }
+        return el;
+    }
+    catch (error) {
+        console.log('error', error);
+    }
+};
+export const DATA_ATTR_WITH_TYPE = [MAP_DATA_TYPE.number.value, MAP_DATA_TYPE.datetime.value];
+export const mapDataFormatAttribute = (dataIn) => {
+    const dataOut = {
+        attribute: {
+            settingsFe: dataIn,
+        },
+    };
+    if (dataIn.dataType === 'datetime') {
+        const format = dataIn.format && Object.keys(dataIn.format.config).length > 0
+            ? dataIn.format
+            : DATE_AND_TIME_DEFAULT;
+        const hasDateFormat = format.config.date && format.config.date.check;
+        const hasTimeFormat = format.config.time && format.config.time.check;
+        const dateParseFormat = format.config.format;
+        const dateParseOption = format.config.date && format.config.date.value;
+        const timeParseOption = format.config.time && format.config.time.value;
+        const timeParseFormat = format.config.time && format.config.time.timeFormat;
+        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, datetimeFormatSettings: {
+                hasDateFormat,
+                hasTimeFormat,
+                dateParseFormat,
+                dateParseOption,
+                timeParseOption,
+                timeParseFormat,
+                dateFormatString: getStringFormatDateDF({
+                    hasDateFormat,
+                    hasTimeFormat,
+                    dateParseFormat,
+                    dateParseOption,
+                    timeParseOption,
+                    timeParseFormat,
+                }),
+                type: dataIn.format.type.toLowerCase(),
+            } });
+    }
+    else if (dataIn.dataType === 'number') {
+        dataOut.attribute = Object.assign(Object.assign({}, dataOut.attribute), { dataType: dataIn.dataType, numberFormatSettings: {
+                currencyCode: dataIn.format.config.currency,
+                decimalPlaces: dataIn.format.config.decimalPlace || 0,
+                grouping: dataIn.format.config.group === 'space' ? ' ' : dataIn.format.config.group || ',',
+                decimal: dataIn.format.config.decimal || '.',
+                isCompact: dataIn.format.config.isCompactNumber || false,
+                prefixType: dataIn.format.config.prefixType,
+                type: dataIn.format.type.toLowerCase(),
+            } });
+    }
+    return dataOut;
+};
+export const regexAttrFormat = /#|{|}|".+?"|\||"/g;
+export const getBgColorByContentSourceType = (type) => {
+    let bgColor = '#E8FECA';
+    switch (type) {
+        case DYNAMIC_CONTENT_TYPE_KEY.BO_SETTINGS: {
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.VISITOR_ATTRIBUTE: {
+            bgColor = '#CAFEDD';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOMER_ATTRIBUTE: {
+            bgColor = '#CAE5FE';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.EVENT_ATTRIBUTE: {
+            bgColor = '#FECACA';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.PROMOTION_CODE: {
+            bgColor = '#D8CAFE';
+            break;
+        }
+        case DYNAMIC_CONTENT_TYPE_KEY.CUSTOM_FUNCTION: {
+            bgColor = '#BBEFBE';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return bgColor;
+};

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

@@ -1 +1 @@
-export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinFCType, any, {}, never>;
+export declare const StyledSpin: import("styled-components").StyledComponent<import("antd/es/spin").SpinType, any, {}, never>;

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -204,6 +204,7 @@ export const GlobalStyle = () => {
 
       .antsomi-select-dropdown {
         padding: 0 !important;
+        z-index: 3002 !important;
       }
 
       .antsomi-select-selection-overflow {
@@ -730,5 +731,14 @@ export const GlobalStyle = () => {
           }
         }
       }
+
+      /* Popover */
+      .antsomi-popover {
+        &.no-padding-content {
+          .antsomi-popover-inner {
+            padding: 0 !important;
+          }
+        }
+      }
     ` }));
 };

package/es/components/molecules/AddDynamicContent/AddDynamicContent.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { APIConfig, TDataType } from './types';
+export interface LabeledValue {
+    label: string;
+    value: string;
+    dataType?: TDataType;
+    disabled?: boolean;
+    status?: any;
+}
+export interface LabeledTreeValue extends LabeledValue {
+    [key: string]: any;
+    children: LabeledTreeValue[];
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    type: number | null;
+    status?: any;
+}
+interface AddDynamicContentProps {
+    defaultDynamicIndex?: number;
+    journeySettings: Record<string, any>;
+    contentSources: Record<string, any>;
+    additionalAttrProperties?: string[];
+    defaultData?: Record<string, any>;
+    visible: boolean;
+    showDisplayFormat?: boolean;
+    showIndex?: boolean;
+    onCancel?: () => void;
+    onOk?: (value: Record<string, any>) => void;
+    modalTitle?: string;
+    isShowCustomFunction?: boolean;
+    APIConfig: APIConfig;
+}
+export declare const AddDynamicContent: React.FC<AddDynamicContentProps>;
+export {};