@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/molecules/ChatBox/styled.js

@@ -1,11 +1,11 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constantsim
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const ChatBoxWrapper = styled.div `
   box-sizing: border-box;
-  width: ${props => (props.withoutBox ? '100%' : '450px')};
+  min-width: 300px;
+  width: ${props => (props.withoutBox ? '100%' : '300px')};
   min-height: ${props => (props.withoutBox ? '100%' : '300px')};
   max-height: ${props => (props.withoutBox ? 'unset' : 'calc(100vh - 57px)')};
   position: ${props => (props.withoutBox ? 'static' : 'fixed')};
@@ -17,7 +17,7 @@ export const ChatBoxWrapper = styled.div `
   flex-direction: column;
 
   font-family: Roboto, san-serif;
-  border: 1px solid #e5e5e5;
+  /* border: 1px solid #e5e5e5; */
 `;
 export const ChatBoxHeader = styled.div `
   flex: 0 0 50px;
@@ -47,7 +47,7 @@ export const ChatBoxBody = styled.div `
   flex-direction: column;
   gap: 5px;
 
-  padding: 11px 0;
+  padding: 10px;
 
   ::-webkit-scrollbar {
     height: 1rem;
@@ -87,9 +87,9 @@ export const ChatBoxFooter = styled.div `
   background: #fff;
 `;
 export const MessageItemWrapper = styled.div `
-  margin: 0 11px;
-  padding: 10px;
-  border-radius: 3px;
+  /* margin: 0 11px; */
+  /* padding: 10px; */
+  border-radius: 10px;
   background: transparent;
 
   display: flex;
@@ -98,7 +98,27 @@ export const MessageItemWrapper = styled.div `
   // text-align: justify;
 
   &.greyBg {
-    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
+    background: ${THEME.token?.bw2};
+  }
+
+  &.bot {
+    padding: 10px;
+    .answer {
+      background: ${THEME.token?.accent};
+    }
+  }
+  &.sender {
+    padding: 0 10px;
+    justify-content: flex-end;
+    .answer {
+      background: ${THEME.token?.blue};
+    }
+  }
+
+  .answer {
+    padding: 10px;
+    border-radius: 10px;
+    word-break: break-word;
   }
 
   .icon {
@@ -122,7 +142,7 @@ export const MessageItemWrapper = styled.div `
   }
   .reactMarkDown * {
     font-size: 12px;
-    line-height: 1.5;
+    line-height: 14px;
   }
   .reactMarkDown > *:first-child {
     margin-top: 0 !important;
@@ -151,7 +171,9 @@ export const MessageItemWrapper = styled.div `
     white-space: nowrap; /* Keeps the content on a single line */
     margin: 0 auto; /* Gives that scrolling effect as the typing happens */
     letter-spacing: 0.15em; /* Adjust as needed */
-    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+    animation:
+      typing 3.5s steps(40, end),
+      blink-caret 0.75s step-end infinite;
   }
 
   @keyframes cursor-blink {
@@ -215,36 +237,58 @@ export const MessageItemWrapper = styled.div `
   }
 `;
 export const WarningWrapper = styled.div `
-  padding: 10px;
   display: flex;
-  align-item: flex-start;
+  align-items: center;
   gap: 10px;
-  border: 1px solid #fec9c9;
-  background: #fec9c9;
-  margin: 0 10px;
+
+  padding: 10px;
+  margin: 10px 20px;
+
+  border-radius: 10px;
+  background: #ffd8db;
 
   .icon {
     min-width: 18px;
   }
 `;
 export const InputWrapper = styled.div `
-  min-height: 44px;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 15px 0 10px;
-  margin: 10px;
 
-  border: 1px solid #e5e5e5;
-  background: #fff;
+  min-height: 50px;
+  max-height: 250px;
+  padding: 0px 15px;
+  margin: 10px 20px;
+
+  /* border: 1px solid #e5e5e5; */
+  background: #eef5fc;
+  border-radius: 25px;
 
   .input {
     border: none;
     font-size: 12px;
+    line-height: 1.5 !important;
+
+    /* padding: 10px 0px; */
+    min-height: auto !important;
+    max-height: 230px !important;
+    background: #eef5fc;
+    margin: 10px 0;
+    padding: 0;
 
     &:focus {
       outline: none !important;
       box-shadow: none !important;
+      background: #eef5fc;
+    }
+
+    &::placeholder {
+      font-size: 12px;
+      font-style: normal !important;
+      line-height: 1.5 !important;
+      color: #a2a2a2;
+      font-weight: 400;
     }
   }
   .submit-btn {
@@ -255,12 +299,16 @@ export const InputWrapper = styled.div `
     // border: 1px solid;
     position: relative;
     left: -3px;
+    background: #eef5fc;
+    color: #666666;
 
     &:focus {
       outline: none !important;
     }
     &.disabled {
       opacity: 0.65;
+      background-color: #f0f0f0;
+      color: #bebebe;
     }
   }
   .icon {
@@ -268,6 +316,14 @@ export const InputWrapper = styled.div `
     position: relative;
     left: 3px;
   }
+
+  /* .textarea {
+    &::placeholder {
+      color: #a2a2a2;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  } */
 `;
 export const TypingCursor = styled.div `
   width: 3px;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { CodeStructureData } from './type';
+interface CodeStructureProps {
+    initialData: Partial<CodeStructureData>;
+    onChange: ({ data, isError }: {
+        data: Partial<CodeStructureData>;
+        isError: boolean;
+    }) => void;
+}
+/**
+ * Component to configure the code structure for a pool rule.
+ *
+ * The component contains a form with fields for:
+ * - Prefix
+ * - Infix (character type, number of digits, number of letters, capitalization, character order)
+ * - Suffix
+ * - Separator
+ * - Quantity (number of codes per time)
+ * - Refill interval (manual or automatic)
+ * - Refill threshold (number of codes remaining)
+ * - Refill unit (codes or percent)
+ *
+ * The form also displays a preview of the generated code sample.
+ *
+ * The component calls the `onChange` callback with the updated form values and an `isError` flag
+ * indicating whether the form is valid or not.
+ *
+ * @param {CodeStructureProps} props The component props.
+ * @returns {React.ReactElement} The rendered component.
+ */
+export declare const CodeStructure: React.FC<CodeStructureProps>;
+export {};

package/es/components/molecules/CodeStructure/CodeStructure.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { memo, useEffect } from 'react';
+import { Form, Typography, Flex, Row, Col } from 'antd';
+import { useImmer } from 'use-immer';
+import { translate, translations } from '@antscorp/antsomi-locales';
+import { isEmpty } from 'lodash';
+// Components
+import { Input, Radio } from '../../atoms';
+import { InputNumber } from '../InputNumber';
+import { Select } from '../Select';
+// Utils
+import { calculateTotalCodes, generateCodeWithPrefixAndSuffix, generateRandomCodeWithConfig, } from './utils';
+// Types
+import { CapitalizationType, CharacterOrderType, CharacterType, RefillType, RefillUnitType, SeparatorType, } from './type';
+// Constants
+import { CAPITALIZATION_OPTIONS, CHARACTER_ORDER_OPTIONS, CHARACTER_TYPE_OPTIONS, REFILL_UNIT_OPTIONS, SEPARATOR_OPTIONS, } from './constants';
+import { BlockAbsolute, CodeStructureWrapper } from './styled';
+import { useDebouncedCallbackV2 } from '@antscorp/antsomi-ui/es/hooks';
+const { Title } = Typography;
+/**
+ * Component to configure the code structure for a pool rule.
+ *
+ * The component contains a form with fields for:
+ * - Prefix
+ * - Infix (character type, number of digits, number of letters, capitalization, character order)
+ * - Suffix
+ * - Separator
+ * - Quantity (number of codes per time)
+ * - Refill interval (manual or automatic)
+ * - Refill threshold (number of codes remaining)
+ * - Refill unit (codes or percent)
+ *
+ * The form also displays a preview of the generated code sample.
+ *
+ * The component calls the `onChange` callback with the updated form values and an `isError` flag
+ * indicating whether the form is valid or not.
+ *
+ * @param {CodeStructureProps} props The component props.
+ * @returns {React.ReactElement} The rendered component.
+ */
+export const CodeStructure = memo(({ initialData, onChange }) => {
+    const { characterType = CharacterType.DIGIT_AND_LETTERS, digitalNumbers = 2, alphabetLetters = 3, capitalization = CapitalizationType.UPPERCASE, characterOrder = CharacterOrderType.RANDOM, separator = SeparatorType.UNDERSCORE, quantity = 50, suffix = '', refillInterval = RefillType.MANUAL, prefix = '', refillThreshold = 10, refillUnit = RefillUnitType.CODES, } = initialData;
+    const [form] = Form.useForm();
+    const [state, setState] = useImmer({
+        codeSample: '',
+        maxCodes: 0,
+        refillInterval: 'auto',
+        codeWithPrefixAndSuffix: '',
+    });
+    const { codeSample, maxCodes } = state;
+    const setCodeSample = (value) => {
+        setState(draft => {
+            draft.codeSample = value;
+        });
+    };
+    const setMaxCodes = (value) => {
+        setState(draft => {
+            draft.maxCodes = value;
+        });
+    };
+    /**
+     * Update the code sample with prefix and suffix
+     * @param {string} value The new value of code sample with prefix and suffix
+     */
+    const setCodeWithPrefixAndSuffix = (value) => {
+        setState(draft => {
+            draft.codeWithPrefixAndSuffix = value;
+        });
+    };
+    const debouncedOnChange = useDebouncedCallbackV2(onChange, 400);
+    const updateFormValues = async (fieldKeyChange, isError) => {
+        // Get all values from the form
+        const allValues = form.getFieldsValue();
+        const numLetters = form.getFieldValue('alphabetLetters');
+        const numDigits = form.getFieldValue('digitalNumbers');
+        const type = form.getFieldValue('characterType');
+        form.setFieldsValue(allValues);
+        let totalPredicted = maxCodes;
+        const isRelevantChangeMaxCode = fieldKeyChange === 'alphabetLetters' ||
+            fieldKeyChange === 'digitalNumbers' ||
+            fieldKeyChange === 'characterType';
+        const isRelevantChangeCodeKey = fieldKeyChange !== 'quantity' &&
+            fieldKeyChange !== 'suffix' &&
+            fieldKeyChange !== 'prefix' &&
+            fieldKeyChange !== 'refillInterval' &&
+            fieldKeyChange !== 'refillThreshold' &&
+            fieldKeyChange !== 'refillUnit' &&
+            fieldKeyChange !== 'separator';
+        const isChangePrefix = fieldKeyChange === 'suffix' || fieldKeyChange === 'prefix' || fieldKeyChange === 'separator';
+        if (isRelevantChangeMaxCode) {
+            const total = calculateTotalCodes({
+                numberOfLetters: characterType === CharacterType.DIGIT_AND_LETTERS ||
+                    characterType === CharacterType.LETTERS
+                    ? numLetters
+                    : 0,
+                numberOfDigits: characterType === CharacterType.DIGITS ||
+                    characterType === CharacterType.DIGIT_AND_LETTERS
+                    ? numDigits
+                    : 0,
+                characterType: type,
+            });
+            totalPredicted = total;
+            setMaxCodes(total);
+        }
+        let codeSampleTmp = codeSample;
+        if (isRelevantChangeCodeKey) {
+            codeSampleTmp = generateRandomCodeWithConfig(form.getFieldsValue());
+            setCodeSample(codeSampleTmp);
+        }
+        if (isChangePrefix) {
+            setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSampleTmp, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
+        }
+        const dataOnChange = {
+            quantity: allValues.quantity,
+            refillInterval: allValues.refillInterval,
+            prefix: allValues.prefix,
+            suffix: allValues.suffix,
+            separator: allValues.separator,
+            ...(allValues.refillInterval === 'auto' && {
+                refillThreshold: allValues.refillThreshold,
+                refillUnit: allValues.refillUnit,
+            }),
+            characterType: allValues.characterType,
+            ...(allValues.characterType === CharacterType.DIGIT_AND_LETTERS && {
+                digitalNumbers: allValues.digitalNumbers,
+                alphabetLetters: allValues.alphabetLetters,
+                capitalization: allValues.capitalization,
+                characterOrder: allValues.characterOrder,
+            }),
+            ...(allValues.characterType === CharacterType.DIGITS && {
+                digitalNumbers: allValues.digitalNumbers,
+            }),
+            ...(allValues.characterType === CharacterType.LETTERS && {
+                alphabetLetters: allValues.alphabetLetters,
+                capitalization: allValues.capitalization,
+            }),
+            totalPredicted,
+        };
+        debouncedOnChange({
+            data: dataOnChange,
+            isError,
+        });
+    };
+    useEffect(() => {
+        setMaxCodes(calculateTotalCodes({
+            numberOfLetters: characterType === CharacterType.DIGIT_AND_LETTERS ||
+                characterType === CharacterType.LETTERS
+                ? alphabetLetters
+                : 0,
+            numberOfDigits: characterType === CharacterType.DIGITS ||
+                characterType === CharacterType.DIGIT_AND_LETTERS
+                ? digitalNumbers
+                : 0,
+            characterType,
+        }));
+    }, [alphabetLetters, digitalNumbers, characterType]);
+    useEffect(() => {
+        setCodeSample(generateRandomCodeWithConfig({
+            characterType,
+            digitalNumbers,
+            alphabetLetters,
+            capitalization,
+            characterOrder,
+        }));
+    }, [characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder]);
+    useEffect(() => {
+        setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSample, prefix, suffix, separator));
+    }, [codeSample, prefix, suffix, separator]);
+    useEffect(() => {
+        form.setFieldsValue({
+            prefix,
+            suffix,
+            separator,
+            quantity,
+            refillInterval,
+            refillThreshold,
+            refillUnit,
+            characterType,
+            digitalNumbers,
+            alphabetLetters,
+            capitalization,
+            characterOrder,
+        });
+    }, [initialData]);
+    return (_jsx(CodeStructureWrapper, { children: _jsxs(Form, { form: form, layout: "horizontal", labelCol: { span: 6 }, colon: false, wrapperCol: { span: 24 }, labelAlign: "left", initialValues: {
+                characterType,
+                digitalNumbers,
+                alphabetLetters,
+                capitalization,
+                characterOrder,
+                separator,
+                quantity,
+                suffix,
+                refillInterval,
+                prefix,
+                refillThreshold,
+                refillUnit,
+            }, onFieldsChange: (changedFields, _allFields) => {
+                const fieldKeyChange = changedFields[0].name[0];
+                const isValidate = form.getFieldsError().some(field => field.errors.length > 0);
+                updateFormValues(fieldKeyChange, isValidate);
+            }, children: [_jsx(Title, { style: { marginTop: 0 }, level: 5, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE, 'Coupon Code Structure') }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_PREFIX, 'Prefix'), name: "prefix", rules: [
+                        {
+                            pattern: /^[a-zA-Z0-9]+$/i,
+                            message: translate(translations._POOL_SHOPIFY_VALIDATE_PRE_SUFF, 'Invalid input. Use only letters and numbers.'),
+                        },
+                    ], children: _jsx(Input, { placeholder: "", style: {
+                            maxWidth: 465,
+                        } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_INFIX, 'Infix') }), _jsx(Col, { span: 16, offset: 0, children: _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE, 'Character Type') }) }), _jsx(Form.Item, { name: "characterType", children: _jsx(Radio.Group, { options: CHARACTER_TYPE_OPTIONS }) })] }) })] }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", style: {
+                                position: 'relative',
+                            }, children: [_jsx(Form.Item, { hidden: form.getFieldValue('characterType') === CharacterType.LETTERS, shouldUpdate: true, name: "digitalNumbers", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '65px' } }) }), (form.getFieldValue('characterType') === CharacterType.DIGITS ||
+                                    form.getFieldValue('characterType') === CharacterType.DIGIT_AND_LETTERS) && (_jsx(BlockAbsolute, { children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG_NO, 'digital numbers') }))] }) }) }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", style: {
+                                position: 'relative',
+                            }, children: [_jsx(Form.Item, { hidden: form.getFieldValue('characterType') === CharacterType.DIGITS, name: "alphabetLetters", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '65px' } }) }), (form.getFieldValue('characterType') === CharacterType.DIGIT_AND_LETTERS ||
+                                    form.getFieldValue('characterType') === CharacterType.LETTERS) && (_jsx(BlockAbsolute, { children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET_NO, 'alphabet letters') }))] }) }) }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: form.getFieldValue('characterType') !== CharacterType.DIGITS && (_jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') })) }), _jsx(Form.Item, { hidden: form.getFieldValue('characterType') === CharacterType.DIGITS, label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: form.getFieldValue('characterType') === CharacterType.DIGIT_AND_LETTERS && (_jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') })) }), _jsx(Form.Item, { hidden: form.getFieldValue('characterType') !== CharacterType.DIGIT_AND_LETTERS, label: _jsx("span", { children: "\u00A0" }), name: "characterOrder", children: _jsx(Radio.Group, { options: CHARACTER_ORDER_OPTIONS }) })] }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SUFFIX, 'Suffix'), name: "suffix", rules: [
+                        {
+                            pattern: /^[a-zA-Z0-9]+$/i,
+                            message: translate(translations._POOL_SHOPIFY_VALIDATE_PRE_SUFF, 'Invalid input. Use only letters and numbers.'),
+                        },
+                    ], children: _jsx(Input, { placeholder: "", style: {
+                            maxWidth: 465,
+                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, children: _jsxs(Flex, { justify: "start", align: "center", gap: 5, children: [translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_QUANTITY, 'Quantity'), ' ', _jsx("span", { style: { color: 'red' }, children: "*" })] }) }), _jsx(Col, { children: _jsxs(Flex, { gap: 10, align: "center", style: { position: 'relative' }, children: [_jsx(Form.Item, { required: true, name: "quantity", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 0, max: 10000, style: { width: '65px' } }) }), _jsx(BlockAbsolute, { children: translate(translations._POOL_SHOPIFY_CODE_PREVIEW_TEXT_5, 'code(s) per time') })] }) })] }), _jsx(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: _jsxs(Typography.Text, { children: [translate(translations._POOL_SHOPIFY_CODE_PREVIEW_TEXT_1, 'Maximum of'), ' ', _jsx("b", { children: maxCodes.toLocaleString() }), ' ', translate(translations._POOL_SHOPIFY_CODE_PREVIEW_TEXT_2, 'codes'), " (", translate(translations._POOL_SHOPIFY_CODE_PREVIEW_TEXT_3, 'sample'), ' ', state.codeWithPrefixAndSuffix, " )", ' ', translate(translations._POOL_SHOPIFY_CODE_PREVIEW_TEXT_4, 'to be generated')] }) }), _jsx(Title, { style: { marginTop: 0 }, level: 5, children: translate(translations._POOL_SHOPIFY_CODE_REFILL, 'Code Refill') }), _jsx(Form.Item, { label: translate(translations._POOL_SHOPIFY_CODE_REFILL_INTERVAL, 'Refill Interval'), name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, onChange: e => {
+                            if (e.target.value === 'manual' && isEmpty(form.getFieldValue('refillThreshold'))) {
+                                form.setFieldsValue({ refillThreshold: 10 });
+                                form.validateFields(['refillThreshold']);
+                            }
+                        }, children: [_jsx(Radio, { value: "manual", children: translate(translations._POOL_SHOPIFY_CODE_REFILL_MANUAL, 'Manual refill only') }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: translate(translations._POOL_SHOPIFY_CODE_REFILL_AUTO, 'Add codes when less than') }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
+                                                const refillUnit = getFieldValue('refillUnit');
+                                                return (_jsx(Form.Item, { name: "refillThreshold", noStyle: true, rules: [
+                                                        { required: true, message: '' },
+                                                        {
+                                                            validator: (_, value) => {
+                                                                if (refillUnit === RefillUnitType.PERCENT) {
+                                                                    if (value > 100) {
+                                                                        form.setFieldsValue({ refillThreshold: 100 });
+                                                                    }
+                                                                }
+                                                                return Promise.resolve();
+                                                            },
+                                                        },
+                                                    ], children: _jsx(InputNumber, { onBlur: e => {
+                                                            const { value } = e.target;
+                                                            if (isEmpty(value)) {
+                                                                form.setFieldsValue({ refillThreshold: 1 });
+                                                                form.validateFields(['refillThreshold']);
+                                                            }
+                                                        }, min: 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
+                                            } }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: () => (_jsx(Form.Item, { name: "refillUnit", noStyle: true, rules: [
+                                                    { required: true, message: '' },
+                                                    {
+                                                        validator: () => {
+                                                            form.validateFields(['refillThreshold']);
+                                                        },
+                                                    },
+                                                ], children: _jsx(Select, { defaultValue: RefillUnitType.CODES, options: REFILL_UNIT_OPTIONS, style: { width: '63px' }, onClick: e => e.preventDefault() }) })) }), translate(translations._POOL_SHOPIFY_CODE_REFILL_AUTO_TEXT, 'remaining')] }) })] }) })] }) }));
+});

package/es/components/molecules/CodeStructure/constants.d.ts

@@ -0,0 +1,21 @@
+import { CapitalizationType, CharacterOrderType, CharacterType, RefillUnitType, SeparatorType } from './type';
+export declare const SEPARATOR_OPTIONS: {
+    value: SeparatorType;
+    label: string;
+}[];
+export declare const CHARACTER_TYPE_OPTIONS: {
+    value: CharacterType;
+    label: string;
+}[];
+export declare const CAPITALIZATION_OPTIONS: {
+    value: CapitalizationType;
+    label: string;
+}[];
+export declare const CHARACTER_ORDER_OPTIONS: {
+    value: CharacterOrderType;
+    label: string;
+}[];
+export declare const REFILL_UNIT_OPTIONS: {
+    value: RefillUnitType;
+    label: string;
+}[];

package/es/components/molecules/CodeStructure/constants.js

@@ -0,0 +1,60 @@
+import { CapitalizationType, CharacterOrderType, CharacterType, RefillUnitType, SeparatorType, } from './type';
+import { translate, translations } from '@antscorp/antsomi-locales';
+export const SEPARATOR_OPTIONS = [
+    { value: SeparatorType.HYPHEN, label: 'Hyphen (-)' },
+    { value: SeparatorType.UNDERSCORE, label: 'Underscore (_)' },
+    { value: SeparatorType.NONE, label: 'None' },
+    { value: SeparatorType.DOT, label: 'Dot (.)' },
+];
+export const CHARACTER_TYPE_OPTIONS = [
+    {
+        value: CharacterType.DIGITS,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG, 'Digits only'),
+    },
+    {
+        value: CharacterType.LETTERS,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET, 'Letters only'),
+    },
+    {
+        value: CharacterType.DIGIT_AND_LETTERS,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_BOTH, 'Digit & letters'),
+    },
+];
+export const CAPITALIZATION_OPTIONS = [
+    {
+        value: CapitalizationType.UPPERCASE,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_UP, 'Uppercase'),
+    },
+    {
+        value: CapitalizationType.LOWERCASE,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_LOW, 'lowercase'),
+    },
+    {
+        value: CapitalizationType.RANDOM,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_RANDOM, 'Random'),
+    },
+];
+export const CHARACTER_ORDER_OPTIONS = [
+    {
+        value: CharacterOrderType.RANDOM,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_RANDOM, 'Random'),
+    },
+    {
+        value: CharacterOrderType.LETTER_FIRST,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_LET, 'Letter first'),
+    },
+    {
+        value: CharacterOrderType.NUMBER_FIRST,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_NO, 'Number first'),
+    },
+];
+export const REFILL_UNIT_OPTIONS = [
+    {
+        value: RefillUnitType.CODES,
+        label: 'codes',
+    },
+    {
+        value: RefillUnitType.PERCENT,
+        label: '%',
+    },
+];

package/es/components/molecules/CodeStructure/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeStructure } from './CodeStructure';
+export type { CodeStructureData, CharacterType, CharacterOrderType, CapitalizationType, SeparatorType, RefillType, RefillUnitType, } from './type';

package/es/components/molecules/CodeStructure/index.js

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

package/es/components/molecules/CodeStructure/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const CodeStructureWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BlockAbsolute: import("styled-components").StyledComponent<"div", any, {
+    left?: number | undefined;
+}, never>;

package/es/components/molecules/CodeStructure/styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+export const CodeStructureWrapper = styled.div ``;
+export const BlockAbsolute = styled.div `
+  position: absolute;
+  left: ${p => p.left || 75}px;
+  white-space: nowrap;
+  margin-bottom: 15px;
+`;

package/es/components/molecules/CodeStructure/type.d.ts

@@ -0,0 +1,43 @@
+export declare enum CharacterType {
+    DIGITS = "numbers",
+    LETTERS = "letters",
+    DIGIT_AND_LETTERS = "both"
+}
+export declare enum CharacterOrderType {
+    RANDOM = "random",
+    LETTER_FIRST = "letters_first",
+    NUMBER_FIRST = "numbers_first"
+}
+export declare enum CapitalizationType {
+    UPPERCASE = "upper",
+    LOWERCASE = "lower",
+    RANDOM = "random"
+}
+export declare enum SeparatorType {
+    HYPHEN = "hyphen",
+    UNDERSCORE = "under_score",
+    DOT = "dot",
+    NONE = "none"
+}
+export declare enum RefillType {
+    AUTO = "auto",
+    MANUAL = "manual"
+}
+export declare enum RefillUnitType {
+    CODES = "codes",
+    PERCENT = "percent"
+}
+export interface CodeStructureData {
+    characterType: CharacterType;
+    digitalNumbers: number;
+    alphabetLetters: number;
+    capitalization: CapitalizationType;
+    characterOrder: CharacterOrderType;
+    separator: SeparatorType;
+    quantity: number;
+    suffix?: string;
+    refillInterval: RefillType;
+    prefix?: string;
+    refillThreshold?: number;
+    refillUnit?: RefillUnitType;
+}

package/es/components/molecules/CodeStructure/type.js

@@ -0,0 +1,35 @@
+export var CharacterType;
+(function (CharacterType) {
+    CharacterType["DIGITS"] = "numbers";
+    CharacterType["LETTERS"] = "letters";
+    CharacterType["DIGIT_AND_LETTERS"] = "both";
+})(CharacterType || (CharacterType = {}));
+export var CharacterOrderType;
+(function (CharacterOrderType) {
+    CharacterOrderType["RANDOM"] = "random";
+    CharacterOrderType["LETTER_FIRST"] = "letters_first";
+    CharacterOrderType["NUMBER_FIRST"] = "numbers_first";
+})(CharacterOrderType || (CharacterOrderType = {}));
+export var CapitalizationType;
+(function (CapitalizationType) {
+    CapitalizationType["UPPERCASE"] = "upper";
+    CapitalizationType["LOWERCASE"] = "lower";
+    CapitalizationType["RANDOM"] = "random";
+})(CapitalizationType || (CapitalizationType = {}));
+export var SeparatorType;
+(function (SeparatorType) {
+    SeparatorType["HYPHEN"] = "hyphen";
+    SeparatorType["UNDERSCORE"] = "under_score";
+    SeparatorType["DOT"] = "dot";
+    SeparatorType["NONE"] = "none";
+})(SeparatorType || (SeparatorType = {}));
+export var RefillType;
+(function (RefillType) {
+    RefillType["AUTO"] = "auto";
+    RefillType["MANUAL"] = "manual";
+})(RefillType || (RefillType = {}));
+export var RefillUnitType;
+(function (RefillUnitType) {
+    RefillUnitType["CODES"] = "codes";
+    RefillUnitType["PERCENT"] = "percent";
+})(RefillUnitType || (RefillUnitType = {}));