@antscorp/antsomi-ui 1.3.6-beta.3 → 1.3.6-beta.30

package/es/components/atoms/Input/Input.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
+import { InputProps as AntdInputProps, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -16,20 +15,15 @@ export interface InputProps extends AntdInputProps {
     disableUndo?: boolean;
     withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, {}> & {
-    DefaultInput: typeof AntdInput;
-    CustomSearch: typeof SearchInput;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
+    readonly DefaultInput: React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
+        Group: React.FC<import("antd/es/input").GroupProps>;
+        Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
+        TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+    };
+    readonly CustomSearch: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+    readonly TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 };
-declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-export {};

package/es/components/atoms/Input/Input.js

@@ -17,7 +17,7 @@ import { PreviewVisibilityEyeIcon, VisibilityOffEyeIcon } from '../../icons';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
+    const { debounce = 400, isHideErrMessage = false, withWrapper = true, errorArchive, required, labelColor, isReverseMask, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -79,16 +79,12 @@ const OriginInput = React.forwardRef((props, ref) => {
         return content;
     return _jsx("div", { className: "input__wrapper", children: content });
 });
-OriginInput.defaultProps = {
-    debounce: 400,
-    isHideErrMessage: false,
-    withWrapper: true,
-};
-export const Input = OriginInput;
 const SearchInput = React.forwardRef((props, ref) => (_jsx(OriginInput, { bordered: false, autoFocus: true, suffix: _jsx(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken?.bw8 }), ...props, ref: ref, className: `${props.className} antsomi-search-input` })));
 const PasswordInput = React.forwardRef((props, ref) => (_jsx(AntdInput.Password, { iconRender: visible => visible ? (_jsx(StyledIconWrapper, { type: "text", children: _jsx(PreviewVisibilityEyeIcon, {}) })) : (_jsx(StyledIconWrapper, { type: "text", children: _jsx(VisibilityOffEyeIcon, {}) })), ...props, ref: ref })));
-Input.CustomSearch = SearchInput;
-Input.TextArea = StyledInput.TextArea;
-Input.DefaultInput = AntdInput;
-Input.Password = PasswordInput;
+export const Input = Object.assign(OriginInput, {
+    DefaultInput: AntdInput,
+    CustomSearch: SearchInput,
+    TextArea: StyledInput.TextArea,
+    Password: PasswordInput,
+});
 export const { TextArea } = StyledInput;

package/es/components/atoms/Switch/Switch.js

@@ -3,6 +3,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { StyledSwitch } from './styled';
 const Switch = props => {
     const { color = THEME.token?.colorPrimary || '#005eb8', style, ...rest } = props;
-    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': color }, ...rest });
+    const validatedColor = CSS.supports('color', color) ? color : THEME.token?.colorPrimary;
+    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': validatedColor }, ...rest });
 };
 export { Switch };

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -346,6 +346,7 @@ export declare const LazyIcon: {
     TabGroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TableIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TableVer2Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    TaskAltIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TextIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ThirdPartyPluginV130Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ThirdPartyPluginV230Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -360,6 +361,7 @@ export declare const LazyIcon: {
     UnblockIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UndoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Unknown30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    UnsubscribeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UploadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UploadMenuIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UserActivityIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -352,6 +352,7 @@ export const LazyIcon = {
     TabGroupIcon: lazy(() => import('../TabGroupIcon').then(m => ({ default: m.TabGroupIcon }))),
     TableIcon: lazy(() => import('../TableIcon').then(m => ({ default: m.TableIcon }))),
     TableVer2Icon: lazy(() => import('../TableVer2Icon').then(m => ({ default: m.TableVer2Icon }))),
+    TaskAltIcon: lazy(() => import('../TaskAltIcon').then(m => ({ default: m.TaskAltIcon }))),
     TextIcon: lazy(() => import('../TextIcon').then(m => ({ default: m.TextIcon }))),
     ThirdPartyPluginV130Icon: lazy(() => import('../ThirdPartyPluginV130Icon').then(m => ({ default: m.ThirdPartyPluginV130Icon }))),
     ThirdPartyPluginV230Icon: lazy(() => import('../ThirdPartyPluginV230Icon').then(m => ({ default: m.ThirdPartyPluginV230Icon }))),
@@ -366,6 +367,7 @@ export const LazyIcon = {
     UnblockIcon: lazy(() => import('../UnblockIcon').then(m => ({ default: m.UnblockIcon }))),
     UndoIcon: lazy(() => import('../UndoIcon').then(m => ({ default: m.UndoIcon }))),
     Unknown30Icon: lazy(() => import('../Unknown30Icon').then(m => ({ default: m.Unknown30Icon }))),
+    UnsubscribeIcon: lazy(() => import('../UnsubscribeIcon').then(m => ({ default: m.UnsubscribeIcon }))),
     UploadIcon: lazy(() => import('../UploadIcon').then(m => ({ default: m.UploadIcon }))),
     UploadMenuIcon: lazy(() => import('../UploadMenuIcon').then(m => ({ default: m.UploadMenuIcon }))),
     UserActivityIcon: lazy(() => import('../UserActivityIcon').then(m => ({ default: m.UserActivityIcon }))),

package/es/components/icons/TaskAltIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const TaskAltIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/TaskAltIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const TaskAltIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "currentColor", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q65 0 123 19t107 53l-58 59q-38-24-81-37.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35l65-65q11 32 17 66t6 70q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-56-216L254-466l56-56 114 114 400-401 56 56-456 457Z" }) }));
+});

package/es/components/icons/UnsubscribeIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const UnsubscribeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/UnsubscribeIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const UnsubscribeIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "currentColor", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-440 160-640v400h320q0 21 3 40.5t9 39.5H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v228q-18-9-38.5-15t-41.5-9v-124L480-440Zm0-80 320-200H160l320 200ZM760-40q-83 0-141.5-58.5T560-240q0-83 58.5-141.5T760-440q83 0 141.5 58.5T960-240q0 83-58.5 141.5T760-40ZM640-220h240v-40H640v40Zm-480-20v-480 480Z" }) }));
+});

package/es/components/icons/index.d.ts

@@ -342,6 +342,7 @@ export { SystemRunningIcon } from './SystemRunningIcon';
 export { TabGroupIcon } from './TabGroupIcon';
 export { TableIcon } from './TableIcon';
 export { TableVer2Icon } from './TableVer2Icon';
+export { TaskAltIcon } from './TaskAltIcon';
 export { TextIcon } from './TextIcon';
 export { ThirdPartyPluginV130Icon } from './ThirdPartyPluginV130Icon';
 export { ThirdPartyPluginV230Icon } from './ThirdPartyPluginV230Icon';
@@ -356,6 +357,7 @@ export { TipsIdeaLight30Icon } from './TipsIdeaLight30Icon';
 export { UnblockIcon } from './UnblockIcon';
 export { UndoIcon } from './UndoIcon';
 export { Unknown30Icon } from './Unknown30Icon';
+export { UnsubscribeIcon } from './UnsubscribeIcon';
 export { UploadIcon } from './UploadIcon';
 export { UploadMenuIcon } from './UploadMenuIcon';
 export { UserActivityIcon } from './UserActivityIcon';

package/es/components/icons/index.js

@@ -342,6 +342,7 @@ export { SystemRunningIcon } from './SystemRunningIcon';
 export { TabGroupIcon } from './TabGroupIcon';
 export { TableIcon } from './TableIcon';
 export { TableVer2Icon } from './TableVer2Icon';
+export { TaskAltIcon } from './TaskAltIcon';
 export { TextIcon } from './TextIcon';
 export { ThirdPartyPluginV130Icon } from './ThirdPartyPluginV130Icon';
 export { ThirdPartyPluginV230Icon } from './ThirdPartyPluginV230Icon';
@@ -356,6 +357,7 @@ export { TipsIdeaLight30Icon } from './TipsIdeaLight30Icon';
 export { UnblockIcon } from './UnblockIcon';
 export { UndoIcon } from './UndoIcon';
 export { Unknown30Icon } from './Unknown30Icon';
+export { UnsubscribeIcon } from './UnsubscribeIcon';
 export { UploadIcon } from './UploadIcon';
 export { UploadMenuIcon } from './UploadMenuIcon';
 export { UserActivityIcon } from './UserActivityIcon';

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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

@@ -1,11 +1,32 @@
 import React from 'react';
 import { CodeStructureData } from './type';
 interface CodeStructureProps {
-    initialData: CodeStructureData;
+    initialData: Partial<CodeStructureData>;
     onChange: ({ data, isError }: {
-        data: CodeStructureData;
+        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

@@ -1,20 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';
 import { Form, InputNumber, Radio, Select, Typography, Flex, Input, Row, Col } from 'antd';
 import { useImmer } from 'use-immer';
 import { translate, translations } from '@antscorp/antsomi-locales';
+import { isEmpty } from 'lodash';
 // 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 { CodeStructureWrapper } from './styled';
+import { BlockAbsolute, CodeStructureWrapper } from './styled';
 import { useDebouncedCallbackV2 } from '@antscorp/antsomi-ui/es/hooks';
 const { Title } = Typography;
-export const CodeStructure = ({ initialData, onChange }) => {
-    const { characterType = CharacterType.DIGIT_AND_LETTERS, digitalNumbers = 2, alphabetLetters = 3, capitalization = CapitalizationType.UPPERCASE, characterOrder = CharacterOrderType.RANDOM, separator = SeparatorType.UNDERSCORE, quantity = 1, suffix = '', refillInterval = RefillType.MANUAL, prefix = '', refillThreshold = 10, refillUnit = RefillUnitType.CODES, } = initialData;
+/**
+ * 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: '',
@@ -42,7 +64,7 @@ export const CodeStructure = ({ initialData, onChange }) => {
             draft.codeWithPrefixAndSuffix = value;
         });
     };
-    const debouncedOnChange = useDebouncedCallbackV2(onChange, 350);
+    const debouncedOnChange = useDebouncedCallbackV2(onChange, 400);
     const updateFormValues = async (fieldKeyChange, isError) => {
         // Get all values from the form
         const allValues = form.getFieldsValue();
@@ -63,18 +85,52 @@ export const CodeStructure = ({ initialData, onChange }) => {
             fieldKeyChange !== 'separator';
         const isChangePrefix = fieldKeyChange === 'suffix' || fieldKeyChange === 'prefix' || fieldKeyChange === 'separator';
         if (isRelevantChangeMaxCode) {
-            const total = calculateTotalCodes(numLetters, numDigits, type);
+            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) {
-            setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
+            codeSampleTmp = generateRandomCodeWithConfig(form.getFieldsValue());
+            setCodeSample(codeSampleTmp);
         }
         if (isChangePrefix) {
-            setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
+            setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSampleTmp, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
         }
         const dataOnChange = {
-            ...allValues,
+            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({
@@ -83,14 +139,46 @@ export const CodeStructure = ({ initialData, onChange }) => {
         });
     };
     useEffect(() => {
-        setMaxCodes(calculateTotalCodes(alphabetLetters, digitalNumbers, characterType));
+        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(initialData));
+        setCodeSample(generateRandomCodeWithConfig({
+            characterType,
+            digitalNumbers,
+            alphabetLetters,
+            capitalization,
+            characterOrder,
+        }));
     }, [characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder]);
     useEffect(() => {
-        form.setFieldsValue(initialData);
-    }, [initialData, form]);
+        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,
@@ -108,30 +196,52 @@ export const CodeStructure = ({ initialData, onChange }) => {
                 const fieldKeyChange = changedFields[0].name[0];
                 const isValidate = form.getFieldsError().some(field => field.errors.length > 0);
                 updateFormValues(fieldKeyChange, isValidate);
-            }, children: [_jsx(Title, { level: 5, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE, 'Code Structure') }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_PREFIX, 'Prefix'), name: "prefix", children: _jsx(Input, { placeholder: "", style: {
+            }, 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", children: [_jsx(Form.Item, { name: "digitalNumbers", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, 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", children: [_jsx(Form.Item, { name: "alphabetLetters", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET_NO, 'alphabet letters') })] }) }) }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 6, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') }) }), _jsx(Form.Item, { 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", children: _jsx(Input, { placeholder: "", style: {
+                        } }) }), _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", children: [_jsx(Form.Item, { required: true, name: "quantity", rules: [{ required: true }], children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx("div", { style: { marginBottom: '15px' }, children: "code(s) per time" })] }) })] }), _jsxs(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')), ") to be generated"] }), _jsx(Title, { level: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(Radio, { value: "manual", children: "Manual refill only" }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: "Add codes when less than" }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
+                        } }) }), _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 < 1 || value > 100) {
-                                                                        return Promise.reject(new Error(''));
-                                                                    }
-                                                                }
-                                                                else if (refillUnit === RefillUnitType.CODES) {
-                                                                    if (value < 0) {
-                                                                        return Promise.reject(new Error(''));
+                                                                    if (value > 100) {
+                                                                        form.setFieldsValue({ refillThreshold: 100 });
                                                                     }
                                                                 }
                                                                 return Promise.resolve();
                                                             },
                                                         },
-                                                    ], children: _jsx(InputNumber, { min: refillUnit === RefillUnitType.CODES ? 0 : 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
+                                                    ], 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: '' },
                                                     {
@@ -139,5 +249,5 @@ export const CodeStructure = ({ initialData, onChange }) => {
                                                             form.validateFields(['refillThreshold']);
                                                         },
                                                     },
-                                                ], children: _jsx(Select, { options: REFILL_UNIT_OPTIONS, style: { width: '63px' }, onClick: e => e.preventDefault() }) })) }), "remaining"] }) })] }) })] }) }));
-};
+                                                ], 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.js

@@ -30,8 +30,8 @@ export const CAPITALIZATION_OPTIONS = [
         label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_LOW, 'lowercase'),
     },
     {
-        value: CapitalizationType.TITLE_CASE,
-        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_TITL, 'Title case'),
+        value: CapitalizationType.RANDOM,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_RANDOM, 'Random'),
     },
 ];
 export const CHARACTER_ORDER_OPTIONS = [

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

@@ -1 +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

@@ -1,2 +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

@@ -11,7 +11,7 @@ export declare enum CharacterOrderType {
 export declare enum CapitalizationType {
     UPPERCASE = "upper",
     LOWERCASE = "lower",
-    TITLE_CASE = "title"
+    RANDOM = "random"
 }
 export declare enum SeparatorType {
     HYPHEN = "hyphen",
@@ -24,7 +24,7 @@ export declare enum RefillType {
     MANUAL = "manual"
 }
 export declare enum RefillUnitType {
-    CODES = "code",
+    CODES = "codes",
     PERCENT = "percent"
 }
 export interface CodeStructureData {

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

@@ -14,7 +14,7 @@ export var CapitalizationType;
 (function (CapitalizationType) {
     CapitalizationType["UPPERCASE"] = "upper";
     CapitalizationType["LOWERCASE"] = "lower";
-    CapitalizationType["TITLE_CASE"] = "title";
+    CapitalizationType["RANDOM"] = "random";
 })(CapitalizationType || (CapitalizationType = {}));
 export var SeparatorType;
 (function (SeparatorType) {
@@ -30,6 +30,6 @@ export var RefillType;
 })(RefillType || (RefillType = {}));
 export var RefillUnitType;
 (function (RefillUnitType) {
-    RefillUnitType["CODES"] = "code";
+    RefillUnitType["CODES"] = "codes";
     RefillUnitType["PERCENT"] = "percent";
 })(RefillUnitType || (RefillUnitType = {}));

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

@@ -1,4 +1,14 @@
 import { CharacterType, CodeStructureData, SeparatorType } from './type';
-export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: CodeStructureData) => string;
+export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: {
+    characterType: CodeStructureData['characterType'];
+    digitalNumbers: CodeStructureData['digitalNumbers'];
+    alphabetLetters: CodeStructureData['alphabetLetters'];
+    capitalization: CodeStructureData['capitalization'];
+    characterOrder: CodeStructureData['characterOrder'];
+}) => string;
 export declare const generateCodeWithPrefixAndSuffix: (code: string, prefix: string, suffix: string, separator: SeparatorType) => string;
-export declare const calculateTotalCodes: (numberOfLetters: number, numberOfDigits: number, characterType: CharacterType) => number;
+export declare const calculateTotalCodes: ({ numberOfLetters, numberOfDigits, characterType, }: {
+    numberOfLetters: number;
+    numberOfDigits: number;
+    characterType: CharacterType;
+}) => number;

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

@@ -18,8 +18,10 @@ export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, al
     else if (capitalization === CapitalizationType.LOWERCASE) {
         letterPart = letterPart.toLowerCase();
     }
-    else if (capitalization === CapitalizationType.TITLE_CASE && letterPart.length > 0) {
-        letterPart = letterPart.charAt(0).toUpperCase() + letterPart.slice(1).toLowerCase();
+    else if (capitalization === CapitalizationType.RANDOM) {
+        letterPart = Array.from(letterPart)
+            .map(char => (Math.random() < 0.5 ? char.toUpperCase() : char.toLowerCase()))
+            .join('');
     }
     // Order characters
     let finalCode = '';
@@ -46,7 +48,7 @@ export const generateCodeWithPrefixAndSuffix = (code, prefix, suffix, separator)
         finalCode = `${finalCode}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${suffix}`;
     return finalCode;
 };
-export const calculateTotalCodes = (numberOfLetters, numberOfDigits, characterType) => {
+export const calculateTotalCodes = ({ numberOfLetters, numberOfDigits, characterType, }) => {
     let totalCodes = 0;
     switch (characterType) {
         case CharacterType.LETTERS: