@omniumretail/component-library 1.0.60 → 1.0.62

package/dist/main.css

@@ -280,6 +280,20 @@
 .Hfh5KLg4Y_g44Ajhx9aV .anticon-close:hover {
   color: var(--color-black);
 }
+.yhGDUJJiYhqjPCJgNdjI .Gj9zvBh4toFNL6uoWOIk {
+  display: flex;
+  gap: 12px;
+}
+.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  font-family: "SilkaBold";
+  text-decoration: underline;
+}
+.yhGDUJJiYhqjPCJgNdjI .BvTiplJPlDM4ob_yobaL div {
+  cursor: pointer;
+}
 /*!*******************************************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/components/DatePicker/styles.module.scss ***!
   \*******************************************************************************************************************************************************************/

package/dist/types/components/InputCountryCode/index.d.ts

@@ -4,5 +4,7 @@ export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
     selectProps?: SelectProps;
     inputProps?: InputProps;
     inputWithSelectBoxValue?: string;
+    value?: string;
+    onChange?: (value: any) => void;
 }
-export declare const InputCountryCode: ({ inputProps, selectProps, name, inputWithSelectBoxValue, ...itemProps }: FormInputCountryCodeProps) => JSX.Element;
+export declare const InputCountryCode: ({ inputProps, selectProps, name, inputWithSelectBoxValue, value, onChange, ...itemProps }: FormInputCountryCodeProps) => JSX.Element;

package/dist/types/components/ModalWithTable/index.d.ts

@@ -8,5 +8,6 @@ export interface ModalWithTableProps {
     isLoading?: boolean;
     confirmLoading?: boolean;
     initialRowSelectedInfo?: any;
+    advancedTagsList?: string[];
 }
 export declare const ModalWithTable: (props: ModalWithTableProps) => JSX.Element;

package/dist/types/components/Tag/index.d.ts

@@ -1,6 +1,8 @@
 import { TagProps } from 'antd';
 export interface customTagProps extends TagProps {
-    customTags?: any;
-    tagsInfo?: any;
+    customTags?: string[];
+    tagsInfo?: (tags: string[]) => void;
+    advancedTagsInfo?: (tags: string[]) => void;
+    advancedTags?: string[];
 }
 export declare const TagField: (props: customTagProps) => JSX.Element;

package/dist/types/components/Upload/index.d.ts

@@ -2,6 +2,7 @@ import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
 interface UploadPropsExtended extends UploadProps {
     onImageChange?: (file: UploadFile | null) => void;
     initialFileList?: UploadFile[];
+    initialImageUrl?: string;
 }
 export declare const Upload: (props: UploadPropsExtended) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/InputCountryCode/index.tsx

@@ -9,57 +9,67 @@ export interface FormInputCountryCodeProps extends Omit<FormItemProps, "name"> {
     selectProps?: SelectProps;
     inputProps?: InputProps;
     inputWithSelectBoxValue?: string;
+    value?: string;
+    onChange?: (value: any) => void;
 }
 
 interface CountryCodeProps {
-    value?: string;
-    onChange?: (value: string) => void;
+    value?: string | { Number: string; CountryISO2: string };
+    onChange?: (value: any) => void;
     selectProps?: SelectProps;
     inputProps?: InputProps;
 }
 
 const CountryCode = ({ value, onChange, selectProps, inputProps }: CountryCodeProps) => {
-    const[inputDefaultValue, setInputDefaultValue] = useState<any>(inputProps?.defaultValue);
+    const [inputDefaultValue, setInputDefaultValue] = useState<any>(inputProps?.defaultValue);
+    const [countryCode, setCountryCode] = useState(selectProps?.defaultValue);
 
-    useEffect(()=> {
+    useEffect(() => {
         setInputDefaultValue(inputProps?.defaultValue);
-    }, [])
+    }, []);
 
-    const validCountryCode = selectProps?.options?.find((countryCode) => {
-        return value?.startsWith(countryCode.value as string);
-    })?.value || "";
-
-    const phoneNumber = value?.replace(validCountryCode as string || "", "") || "";
-    const changeLocalValue = useCallback((value: string | number, element: string) => {
-        if(element !== 'countryCode') {
-            setInputDefaultValue(value);
-            onChange?.(`${validCountryCode}${value}` || "");
-            return;
+    useEffect(() => {
+        if (value && typeof value === 'object') {
+            setInputDefaultValue(value.Number);
+            setCountryCode(value.CountryISO2);
         }
+    }, [value]);
 
-        const valueReplaced = `${value}${phoneNumber}`;
+    const changeLocalValue = useCallback(
+        (value: string | number, element: string) => {
+            if (element !== 'countryCode') {
+                setInputDefaultValue(value);
+                onChange?.({ Number: value, CountryISO2: countryCode }); // Update this line
+                return;
+            }
 
-        onChange?.(valueReplaced || "");
-    }, [value, onChange]);
+            setCountryCode(value);
+            onChange?.({ Number: inputDefaultValue, CountryISO2: value }); // Update this line
+        },
+        [onChange, countryCode, inputDefaultValue],
+    );
 
     return (
         <Input.Group compact className={styles.inputGroup}>
             <Select
                 {...selectProps}
-                value={validCountryCode || selectProps?.defaultValue}
+                value={countryCode || selectProps?.defaultValue}
                 onChange={(value) => changeLocalValue(value, 'countryCode')}
-            >
-            </Select>
-            <InputField { ...inputProps } value={phoneNumber || inputDefaultValue} onChange={(event) => changeLocalValue(event.target.value, 'phoneNumber')}/>
+            ></Select>
+            <InputField
+                {...inputProps}
+                value={inputDefaultValue}
+                onChange={(event) => changeLocalValue(event.target.value, 'phoneNumber')}
+            />
         </Input.Group>
-    )
-}
-
-export const InputCountryCode = ({ inputProps, selectProps, name, inputWithSelectBoxValue, ...itemProps}: FormInputCountryCodeProps) => {
+    );
+};
 
+export const InputCountryCode = ({ inputProps, selectProps, name, inputWithSelectBoxValue, value, onChange, ...itemProps }: FormInputCountryCodeProps) => {
     return (
         <Form.Item name={name} {...itemProps}>
-            <CountryCode inputProps={inputProps} selectProps={selectProps} />
+            <CountryCode inputProps={inputProps} selectProps={selectProps} value={value} onChange={onChange} />
         </Form.Item>
     )
 }
+

package/src/components/InputCountryCode/inputCountryCode.stories.tsx

@@ -1,4 +1,4 @@
-import { Form , Button} from 'antd';
+import { Form, Button } from 'antd';
 import { Meta, Story } from "@storybook/react";
 import { InputCountryCode, FormInputCountryCodeProps } from '.';
 
@@ -7,9 +7,31 @@ export default {
     component: InputCountryCode,
 } as Meta;
 
-const Template: Story<FormInputCountryCodeProps> = (args) => <Form>
-        <InputCountryCode {...args}></InputCountryCode>
-    </Form>;
+const Template: Story<FormInputCountryCodeProps> = (args) => {
+    return (
+        <Form>
+            <InputCountryCode {...args}></InputCountryCode>
+
+            <Form.Item name={["testitem"]}>
+                <InputCountryCode
+                    selectProps={{
+                        options: [
+                            {
+                                label: 'PT',
+                                value: '+351',
+                            },
+                            {
+                                label: 'KZ',
+                                value: '94',
+                            },
+                        ],
+                        defaultValue: 'KZ',
+                    }} inputProps={{ defaultValue: '919767347' }} />
+            </Form.Item>
+
+        </Form>
+    )
+};
 
 export const Primary = Template.bind({});
 Primary.args = {

package/src/components/ModalWithTable/ModalWithTable.stories.tsx

@@ -84,7 +84,7 @@ const Template: Story<ModalWithTableProps> = (args) => {
     return (
         <>
             <button onClick={() => onClickMe()}> Button </button>
-            <ModalWithTable {...args} modalData={setModalData} isLoading={isFetching} tableData={data} isOpen={isModalOpen}></ModalWithTable>
+            <ModalWithTable {...args} modalData={setModalData} isLoading={isFetching} tableData={data} isOpen={isModalOpen} advancedTagsList={['Country', 'County']}></ModalWithTable>
         </>
     );
 }

package/src/components/ModalWithTable/index.tsx

@@ -16,6 +16,8 @@ export interface ModalWithTableProps {
     isLoading?: boolean;
     confirmLoading?: boolean;
     initialRowSelectedInfo?: any;
+    // Tags List for advanced search
+    advancedTagsList?: string[];
 }
 function objectsAreEqual(obj1: any, obj2: any) {
     const keys1 = Object.keys(obj1);
@@ -46,7 +48,8 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         tableData,
         modalData,
         isLoading,
-        initialRowSelectedInfo
+        initialRowSelectedInfo,
+        advancedTagsList
     } = props;
 
     const prevIsOpenRef = useRef<boolean>();
@@ -60,6 +63,7 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         pageInfo: {},
         rowSelectionInfo: [],
         tagsInfo: [],
+        advancedTagsInfo: [],
         selectedData: [],
     });
     const pageBase = { currentPage: 1 };
@@ -68,6 +72,7 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
     const [pageInfo, setPageInfo] = useState<any>(pageBase);
     const [rowSelectionInfo, setRowSelectionInfo] = useState<any>(undefined);
     const [tagsInfo, setTagsInfo] = useState<any>([]);
+    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>([]);
     const [selectedData, setSelectedData] = useState<any>([]);
 
     useEffect(() => {
@@ -78,6 +83,7 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
                 pageInfo: pageInfo,
                 rowSelectionInfo: rowSelectionInfo,
                 tagsInfo: tagsInfo,
+                advancedTagsInfo: advancedTagsInfo,
                 selectedData: selectedData,
             });
         }
@@ -92,12 +98,12 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         setPageInfo(initialValues.pageInfo);
         setRowSelectionInfo(initialValues.rowSelectionInfo);
         setTagsInfo(initialValues.tagsInfo);
+        setAdvancedTagsInfo(initialValues.advancedTagsInfo)
         setSelectedData(initialValues.selectedData);
     };
 
     const saveChanges = () => {
         setOpen(false);
-        
         if (tableData?.rowSelection?.type === 'radio') {
             setSelectedData([selectedData[selectedData.length - 1]]);
         }
@@ -112,12 +118,13 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
             pageInfo: pageInfo,
             rowSelectionInfo: rowSelectionInfo,
             tagsInfo: tagsInfo,
+            advancedTagsInfo: advancedTagsInfo,
             open: open,
             selectedData: selectedData,
         };
 
         modalData(modalDataObj);
-    }, [tagsInfo, open, rowSelectionInfo, selectedData]);
+    }, [tagsInfo, advancedTagsInfo, open, rowSelectionInfo, selectedData]);
 
     useEffect(() => {
         const selectedRowKeys = rowSelectionInfo || tableData.rowSelection.selectedRowKeys;
@@ -172,6 +179,12 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
         }
     }, [tagsInfo]);
 
+    useEffect(() => {
+        if (advancedTagsInfo.length > 0) {
+            setConfirmLoading(true);
+        }
+    }, [advancedTagsInfo]);
+
     useEffect(() => {
         setConfirmLoading(isLoading!);
     }, [isLoading]);
@@ -203,7 +216,7 @@ export const ModalWithTable = (props: ModalWithTableProps) => {
                 className={modalClasses}
             >
                 <div className={styles.tagsWrapper}>
-                    <TagField tagsInfo={setTagsInfo} />
+                    <TagField tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo} advancedTags={advancedTagsList} />
                 </div>
 
                 <div className={styles.tableWrapper}>

package/src/components/Tag/Tag.stories.tsx

@@ -10,8 +10,11 @@ export default {
 
 const Template: Story<TagProps> = (args) => {
     const [tagsInfo, setTagsInfo] = useState<any>({});
+    const [advancedTagsInfo, setAdvancedTagsInfo] = useState<any>({});
+
+    console.log('page: basic', tagsInfo,'advanced', advancedTagsInfo);
     
-    return <TagField {...args} tagsInfo={setTagsInfo}></TagField>;
+    return <TagField {...args} tagsInfo={setTagsInfo} advancedTagsInfo={setAdvancedTagsInfo}></TagField>;
 }
 
 export const Primary = Template.bind({});

package/src/components/Tag/index.tsx

@@ -8,17 +8,21 @@ import classNames from 'classnames';
 import { t } from 'i18next';
 
 export interface customTagProps extends TagProps {
-    customTags?: any,
-    tagsInfo?: any;
+    customTags?: string[],
+    tagsInfo?: (tags: string[]) => void,
+    advancedTagsInfo?: (tags: string[]) => void,
+    advancedTags?: string[],
 }
 
 export const TagField = (props: customTagProps) => {
-    const { customTags = [] } = props;
+    const { customTags = [], advancedTags } = props;
 
-    const [tags, setTags] = useState<string[]>(customTags);
+    const [tags, setTags] = useState<string[]>(customTags.filter(tag => !tag.includes('=')));
     const [inputVisible, setInputVisible] = useState<boolean>(false);
     const [inputValue, setInputValue] = useState('');
     const inputRef = useRef<InputRef>(null);
+    const [advancedTagList, setAdvancedTagList] = useState<string[]>([]);
+    const [allTags, setAllTags] = useState<string[]>([]);
 
     useEffect(() => {
         if (inputVisible) {
@@ -27,8 +31,16 @@ export const TagField = (props: customTagProps) => {
     }, [inputVisible]);
 
     const handleClose = (removedTag: string) => {
+        const newAllTags = allTags.filter((tag) => tag !== removedTag);
+        setAllTags(newAllTags);
+
         const newTags = tags.filter((tag) => tag !== removedTag);
         setTags(newTags);
+
+        if (advancedTags && advancedTagList.includes(removedTag)) {
+            const newAdvancedTags = advancedTagList.filter((tag) => tag !== removedTag);
+            setAdvancedTagList(newAdvancedTags);
+        }
     };
 
     const showInput = () => {
@@ -40,16 +52,57 @@ export const TagField = (props: customTagProps) => {
     };
 
     const handleInputConfirm = () => {
-        if (inputValue && tags.indexOf(inputValue) === -1) {
-            setTags([...tags, inputValue]);
+        let isAdvancedTag = false;
+        if (inputValue && allTags.indexOf(inputValue) === -1) {
+            setAllTags([...allTags, inputValue]); // Add to allTags
+            if (advancedTags && advancedTags.includes(inputValue.split('=')[0]) && !advancedTags.includes(inputValue)) {
+                setAdvancedTagList([...advancedTagList, inputValue]);
+                isAdvancedTag = true;
+            }
+
+            // Only add the inputValue to the tags array if it's not an advanced tag
+            if (!isAdvancedTag) {
+                setTags([...tags, inputValue]);
+            }
         }
+
         setInputVisible(false);
         setInputValue('');
+
+        const basicTags = tags.filter((tag) => !advancedTagList.includes(tag));
+        props.tagsInfo?.(basicTags);
+        props.advancedTagsInfo?.(advancedTagList);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        const cursorPosition: any = e.currentTarget.selectionStart;
+        const advancedFilterMatch = advancedTags && advancedTags.find((filter: any) => inputValue.startsWith(`${filter}=`));
+        if (advancedFilterMatch) {
+            const filterLength = advancedFilterMatch.length;
+            if (cursorPosition <= filterLength && ![8, 46].includes(e.keyCode)) {
+                e.preventDefault();
+            }
+        }
+
+        // Prevent the input of '=' manually
+        if (e.key === "=") {
+            e.preventDefault();
+        }
     };
 
+    const doSomething = (e: any) => {
+        const tag = e.target.innerText;
+        if (!advancedTagList.map(tag => tag.split('=')[0]).includes(tag)) {
+            setInputValue(`${tag}=`);
+            setInputVisible(true);
+        }
+    };
+
+
     useEffect(() => {
-        props?.tagsInfo(tags);
-    }, [tags]);
+        props.tagsInfo?.(tags);
+        props.advancedTagsInfo?.(advancedTagList);
+    }, [tags, advancedTagList]);
 
     const forMap = (tag: string) => {
         const tagElem = (
@@ -69,8 +122,18 @@ export const TagField = (props: customTagProps) => {
             </span>
         );
     };
-    
-    const tagChild = tags.map(forMap);
+
+    const advancedTagsMap = (tag: string) => {
+        const disabled = advancedTagList.map(tag => tag.split('=')[0]).includes(tag);
+        return (
+            <div onClick={!disabled ? doSomething : undefined} key={tag} style={{ color: disabled ? 'gray' : undefined }}>
+                {tag}
+            </div>
+        )
+    }
+
+    const tagChild = allTags.map(forMap);
+    const advancedTagsChild = advancedTags && advancedTags.map(advancedTagsMap);
 
     return (
         <div className={styles.tagfield}>
@@ -81,15 +144,27 @@ export const TagField = (props: customTagProps) => {
                     size="small"
                     value={inputValue}
                     onChange={handleInputChange}
+                    onKeyDown={handleKeyDown}
                     onPressEnter={handleInputConfirm}
                     className={styles['tagfield__input']}
                 />
             )}
             {!inputVisible && (
                 <Tag onClick={showInput} className={classNames(styles['tagfield__creator'], 'site-tag-plus')}>
-                    <SearchOutlined /> { t('components.tag.search') }
+                    <SearchOutlined /> {t('components.tag.search')}
                 </Tag>
             )}
+            {
+                advancedTags &&
+                <div style={{ marginTop: 16, marginBottom: 16 }} className={styles.advancedTagsWrapper}>
+                    <div className={styles.label}>
+                    {t('components.tag.advancedFields')}:
+                    </div>
+                    <div className={styles.advancedTags}>
+                        {advancedTagsChild}
+                    </div>
+                </div>
+            }
             <div style={{ marginTop: 16 }}>
                 <TweenOneGroup
                     enter={{

package/src/components/Tag/styles.module.scss

@@ -40,4 +40,21 @@
             }
         }
     }
+
+    .advancedTagsWrapper {
+        display: flex;
+        gap: 12px;
+    }
+
+    .advancedTags {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+        font-family: "SilkaBold";
+        text-decoration: underline;
+
+        div {
+            cursor: pointer;
+        }
+    }
 }

package/src/components/Upload/Upload.stories.tsx

@@ -16,7 +16,7 @@ const Template: Story<any> = (args) => {
     };
 
     const handleImageChange = (file: UploadFile | null) => {
-        form.setFieldsValue({ image: file });
+        form.setFieldsValue({ image: file?.originFileObj });
     };
     
     const initialValue = {

package/src/components/Upload/index.tsx

@@ -1,46 +1,46 @@
 import { Upload as UploadAntd } from 'antd';
 import ImgCrop from 'antd-img-crop';
 import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
-import React, { useState } from 'react';
-import imageCompression from 'browser-image-compression';
+import { useEffect, useState } from 'react';
 
 interface UploadPropsExtended extends UploadProps {
     onImageChange?: (file: UploadFile | null) => void;
     initialFileList?: UploadFile[];
+    initialImageUrl?: string;
+}
+
+function generateRandomString() {
+    return Math.random().toString(36).substring(2, 14);
 }
 
 export const Upload = (props: UploadPropsExtended) => {
     const {
         onImageChange,
-        initialFileList
+        initialFileList,
+        initialImageUrl
     } = props;
     const [fileList, setFileList] = useState<UploadFile[]>(initialFileList || []);
 
-    const compressImage = async (file: RcFile) => {
-        const options = {
-            maxSizeMB: 1,
-            maxWidthOrHeight: 1920,
-            useWebWorker: true,
-        };
-
-        try {
-            const compressedFile = await imageCompression(file, options);
-            return compressedFile;
-        } catch (error) {
-            console.error('Image compression failed:', error);
-            return file;
+    // when component mounts or initialImageUrl changes, update fileList
+    useEffect(() => {
+        if (initialImageUrl) {
+            const newFile: UploadFile = {
+                uid: generateRandomString(), // use any unique string
+                name: initialImageUrl, // use the URL as the name
+                status: 'done',
+                url: initialImageUrl, // this is used for preview
+            };
+            setFileList((prevFileList) => [...prevFileList, newFile]);
         }
-    };
+    }, [initialImageUrl]);
 
     const beforeUpload: UploadProps['beforeUpload'] = async (file: RcFile) => {
-        const compressedFile = await compressImage(file);
-        
         const newFile: UploadFile = {
             uid: file.uid,
             name: file.name,
             type: file.type,
-            size: compressedFile.size,
-            originFileObj: compressedFile as any,
+            size: file.size,
+            originFileObj: file,
             status: 'done',
         };
     
@@ -78,7 +78,6 @@ export const Upload = (props: UploadPropsExtended) => {
     return (
         <ImgCrop rotationSlider>
             <UploadAntd
-                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                 listType="picture-card"
                 fileList={fileList}
                 beforeUpload={beforeUpload}

package/src/locales/en.json

@@ -70,7 +70,8 @@
             "asc": "Crescente"
         },
         "tag": {
-            "search": "Procurar"
+            "search": "Procurar",
+            "advancedFields": "Advanced Fields"
         },
         "table": {
             "selectAll": "Select All",

package/src/locales/es.json

@@ -70,7 +70,8 @@
             "asc": "Crescente"
         },
         "tag": {
-            "search": "Procurar"
+            "search": "Procurar",
+            "advancedFields": "Advanced Fields"
         },
         "table": {
             "selectAll": "Select All ES",

package/src/locales/pt.json

@@ -70,7 +70,8 @@
             "asc": "Crescente"
         },
         "tag": {
-            "search": "Procurar"
+            "search": "Procurar",
+            "advancedFields": "Advanced Fields"
         },
         "table": {
             "selectAll": "Select All PT",