@omniumretail/component-library 1.0.61 → 1.0.63

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/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/Notification/Notification.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from "@storybook/react";
+import { ErrorNotificationProps } from '.';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<ErrorNotificationProps>;

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

@@ -0,0 +1,9 @@
+export interface ErrorNotificationProps {
+    message: string;
+    description: string;
+}
+type NotificationType = 'success' | 'info' | 'warning' | 'error';
+export declare const Notification: ({ message, description }: ErrorNotificationProps) => {
+    openNotificationWithIcon: (type: NotificationType) => void;
+};
+export {};

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/index.d.ts

@@ -22,3 +22,4 @@ export * from './CategoryResponse';
 export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
+export * from './Notification';

package/package.json

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

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/Notification/Notification.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, Story } from "@storybook/react";
+import { Notification, ErrorNotificationProps } from '.';
+
+export default {
+    title: 'Notification',
+    component: Notification,
+} as unknown as Meta;
+
+const Template: Story<ErrorNotificationProps> = (args) => {
+
+    const { openNotificationWithIcon } = Notification({
+        message: args.message,
+        description: args.description,
+    });
+
+    return (
+        <>
+            {openNotificationWithIcon('error')}
+        </>
+    )
+};
+export const Primary = Template.bind({});
+Primary.args = {
+    message: "Sucesso",
+    description: "Parabéns, conseguiste!"
+};
+
+
+

package/src/components/Notification/index.tsx

@@ -0,0 +1,21 @@
+import { notification } from 'antd';
+
+export interface ErrorNotificationProps {
+  message: string;
+  description: string;
+}
+
+type NotificationType = 'success' | 'info' | 'warning' | 'error';
+
+export const Notification = ({ message, description }: ErrorNotificationProps) => {
+  const openNotificationWithIcon = (type: NotificationType) => {
+    notification[type]({
+      message: message,
+      description: description,
+    });
+  };
+
+  return {
+    openNotificationWithIcon,
+  };
+};

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/index.tsx

@@ -22,3 +22,4 @@ export * from './CategoryResponse';
 export * from './Upload';
 export * from './UserInfo';
 export * from './CategoryReadOnly';
+export * from './Notification';

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",