@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

package/src/components/crm/Form.jsx

@@ -151,8 +151,6 @@ function Form({
         }
     };
 
-    const handleChangeCanvas = (id, value) => {};
-
     const handleChangeCheckbox = (e) => {
         const { checked, name, value } = e.target;
 
@@ -217,15 +215,12 @@ function Form({
         const handleSelectOption = () => {
             updateFormData({ [id]: inputValue });
 
-            // Update any matching form data properties
-            Object.keys(inputValue)
-                .filter(
-                    (key) =>
-                        formData.hasOwnProperty(key) &&
-                        key !== 'id' &&
-                        key !== 'label'
-                )
-                .forEach((key) => updateFormData({ [key]: inputValue[key] }));
+            // Update any matching form data properties except for the second item
+            Object.keys(inputValue).forEach((key, index) => {
+                if (index !== 1 && formData.hasOwnProperty(key)) {
+                    updateFormData({ [key]: inputValue[key] });
+                }
+            });
 
             formSettings.fields.forEach((field) => {
                 if (field.id === id && field.trigger) {
@@ -272,28 +267,12 @@ function Form({
             let contentValue = inputValue[field.trigger.key];
 
             if (field.trigger.url && field.trigger.payload) {
-                let setContentPayload;
-
-                if (field.trigger?.payload?.key?.id) {
-                    setContentPayload = {
-                        [field.trigger.payload.key.id]:
-                            inputValue[field.trigger.payload.value.id],
-                        [field.trigger.payload.key.content]:
-                            inputValue[field.trigger.payload.value.content],
-                    };
-                } else {
-                    setContentPayload = {
-                        formData: formData,
-                        [field.trigger.payload.key.content]:
-                            inputValue[field.trigger.payload.value.content],
-                    };
-                }
-
-                const res = await CustomFetch(
-                    field.trigger.url,
-                    'POST',
-                    setContentPayload
-                );
+                const res = await CustomFetch(field.trigger.url, 'POST', {
+                    [field.trigger.payload.key.id]:
+                        inputValue[field.trigger.payload.value.id],
+                    [field.trigger.payload.key.content]:
+                        inputValue[field.trigger.payload.value.content],
+                });
 
                 if (res.data.content) {
                     contentValue = res.data.content;
@@ -308,6 +287,7 @@ function Form({
         // Switch cases to handle different actions
         switch (action.action) {
             case 'select-option':
+            case 'create-option': // New case to handle create-option
                 handleSelectOption();
                 break;
             case 'clear':
@@ -605,17 +585,17 @@ function Form({
 
                 if (['create', 'update'].includes(formType)) {
                     fields.forEach((item) => {
+                        // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
+                        // Check if the item is required
                         if (item.required) {
-                            if (
-                                formData[item.id] === null ||
-                                formData[item.id] === ''
-                            ) {
+                            // Check if formData[item.id] is null, undefined, or an empty string
+                            if (!formData[item.id]) {
+                                // Check for required_check dependency
                                 if (
-                                    item.hasOwnProperty('required_check') &&
                                     item.required_check &&
                                     !formData[item.required_check]
                                 ) {
@@ -626,19 +606,18 @@ function Form({
                                     _inputClass[item.id] = styles.inputError;
                                 }
                             } else {
-                                _inputClass[item.id] = '';
+                                _inputClass[item.id] = ''; // Clear error class if valid
                             }
                         } else if (
-                            item.hasOwnProperty('required_rely') &&
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null ||
-                                formData[item.id] === '')
+                            !formData[item.id]
                         ) {
+                            // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
                             _inputClass[item.id] = styles.inputError;
                         } else {
-                            _inputClass[item.id] = '';
+                            _inputClass[item.id] = ''; // Clear error class if not required
                         }
                     });
 
@@ -713,55 +692,87 @@ function Form({
                         });
                     }
 
-                    const files = Array.isArray(formData[fileKey])
-                        ? formData[fileKey]
-                        : [formData[fileKey]];
+                    if (fileUpload && formData[fileKey]) {
+                        if (Array.isArray(formData[fileKey])) {
+                            const uploadPromises = formData[fileKey].map(
+                                async (file) => {
+                                    const toastId = toast.info(
+                                        `Uploading ${file.name}`,
+                                        {
+                                            progress: 0,
+                                            autoClose: false,
+                                        }
+                                    );
+
+                                    const fileRes = await Vapor.store(file, {
+                                        progress: (progress) => {
+                                            setUploadProgress(progress * 100);
+                                            toast.update(toastId, {
+                                                progress,
+                                            });
+                                        },
+                                    });
+
+                                    toast.update(toastId, {
+                                        render: `${file.name} uploaded successfully!`,
+                                        type: 'success',
+                                        autoClose: 3000,
+                                    });
+
+                                    return {
+                                        uuid: fileRes.uuid,
+                                        key: fileRes.key,
+                                        bucket: fileRes.bucket,
+                                        filename: file.name,
+                                        filesize: file.size,
+                                        extension: fileRes.extension,
+                                        file_relationship: fileKey,
+                                        fileable_field:
+                                            fileFieldSetting.fileable_field,
+                                    };
+                                }
+                            );
 
-                    if (fileUpload && files.length > 0) {
-                        const uploadPromises = files.map(async (file) => {
+                            formData['uploadedFiles'] = await Promise.all(
+                                uploadPromises
+                            );
+                        } else {
                             const toastId = toast.info(
-                                `Uploading ${file.name}`,
+                                `Uploading ${formData[fileKey].name}`,
                                 {
                                     progress: 0,
                                     autoClose: false,
                                 }
                             );
 
-                            const fileRes = await Vapor.store(file, {
-                                progress: (progress) => {
-                                    setUploadProgress(progress * 100);
-                                    toast.update(toastId, { progress });
-                                },
-                            });
+                            const fileRes = await Vapor.store(
+                                formData[fileKey],
+                                {
+                                    progress: (progress) => {
+                                        setUploadProgress(progress * 100);
+                                        toast.update(toastId, {
+                                            progress,
+                                        });
+                                    },
+                                }
+                            );
 
                             toast.update(toastId, {
-                                render: `${file.name} uploaded successfully!`,
+                                render: `${formData[fileKey].name} uploaded successfully!`,
                                 type: 'success',
                                 autoClose: 3000,
                             });
 
-                            return {
-                                uuid: fileRes.uuid,
-                                key: fileRes.key,
-                                bucket: fileRes.bucket,
-                                filename: file.name,
-                                filesize: file.size,
-                                extension: fileRes.extension,
-                                file_relationship: fileKey,
-                                fileable_field:
-                                    fileFieldSetting.fileable_field ||
-                                    fileFieldSetting.id,
-                            };
-                        });
-
-                        // Wait for all uploads to complete
-                        const uploadedFiles = await Promise.all(uploadPromises);
-
-                        // If there are multiple files, store them as an array, otherwise as a single object
-                        formData['uploadedFiles'] =
-                            uploadedFiles.length > 1
-                                ? uploadedFiles
-                                : uploadedFiles[0];
+                            formData['uuid'] = fileRes.uuid;
+                            formData['key'] = fileRes.key;
+                            formData['bucket'] = fileRes.bucket;
+                            formData['filename'] = formData[fileKey].name;
+                            formData['filesize'] = formData[fileKey].size;
+                            formData['extension'] = fileRes.extension;
+                            formData['file_relationship'] = fileKey;
+                            formData['fileable_field'] =
+                                fileFieldSetting.fileable_field;
+                        }
                     }
 
                     // Transform keys with dots into nested objects
@@ -879,23 +890,25 @@ function Form({
                     method,
                     payload = {};
 
-                const getDataId = () => {
-                    for (const item of ajaxSetting.where) {
-                        if (
-                            item.hasOwnProperty('urlParam') &&
-                            item.urlParam === 'dataId'
-                        ) {
-                            return item.value;
+                if (ajaxSetting?.where) {
+                    const getDataId = () => {
+                        for (const item of ajaxSetting.where) {
+                            if (
+                                item.hasOwnProperty('urlParam') &&
+                                item.urlParam === 'dataId'
+                            ) {
+                                return item.value;
+                            }
                         }
-                    }
-                    return 0;
-                };
+                        return 0;
+                    };
+                }
 
                 if (
                     formSettings.hasOwnProperty('json') &&
                     formSettings.json === true
                 ) {
-                    let dataId = getDataId();
+                    let dataId = paramValue || getDataId();
 
                     urlSuffix = '/json/get';
                     method = 'POST';
@@ -1364,7 +1377,7 @@ function Form({
         );
     } else {
         return (
-            <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
+            <div className={styles.modalwrap}>
                 <div className={styles.modal}>
                     <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
@@ -1372,7 +1385,7 @@ function Form({
                             className={styles.modal__close}
                             onClick={closeModal}
                         >
-                            <CircleX strokeWidth={1} size={24} />
+                            <CircleX strokeWidth={2} size={24} />
                         </button>
                     </div>
                     <div className={styles.modal__content}>
@@ -1426,7 +1439,6 @@ function Form({
                                             }
                                             mapbox={mapbox}
                                             onChange={handleChange}
-                                            onChangeCanvas={handleChangeCanvas}
                                             onChangeCheckbox={
                                                 handleChangeCheckbox
                                             }

package/src/components/crm/MultiSelect.jsx

@@ -1,16 +1,28 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import CustomFetch from './Fetch';
-import SelectList from './SelectList';
-import Select, { createFilter } from 'react-select';
+import Select, { createFilter, components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import styles from './styles/AsyncSelect.module.scss';
 
+const CustomOption = (props) => (
+    <components.Option {...props}>
+        <div>
+            {props.data.label}
+            {props.data.description && props.data.description !== '' && (
+                <div style={{ fontSize: '0.85em', color: '#888' }}>
+                    {props.data.description}
+                </div>
+            )}
+        </div>
+    </components.Option>
+);
+
 function MultiSelect({
     className,
-    inputValue = [], // Default to an empty array
+    inputValue = [],
     multi,
     onChange,
-    options = [], // Default to an empty array
+    options = [],
     placeholder,
     settings,
     style,
@@ -19,49 +31,49 @@ function MultiSelect({
 }) {
     const [selectOptions, setSelectOptions] = useState([]);
     const [selectValue, setSelectValue] = useState([]);
-    const prevInputValueRef = useRef();
 
-    useEffect(() => {
-        const _options = Array.isArray(options)
-            ? options.map((a) => ({
-                  value: a.id,
-                  label: a.label || a.name || a.description || 'Unknown',
-                  ...a,
-              }))
-            : [];
-        setSelectOptions(_options);
+    // Memoize transformed options
+    const memoizedOptions = useMemo(() => {
+        return options
+            .filter((a) => a?.label || a?.name || a?.description) // Filter out options with no label, name, or description
+            .map((a) => ({
+                value: a?.id,
+                label: a?.label || a?.name || a?.description || 'Unknown',
+                description: a?.description || '',
+                ...a,
+            }));
     }, [options]);
 
+    // Memoize transformed input values
+    const memoizedInputValue = useMemo(() => {
+        const normalizeInputValue = (value) =>
+            Array.isArray(value) ? value : value ? [value] : [];
+
+        return normalizeInputValue(inputValue)
+            .filter((a) => a?.label || a?.name || a?.description) // Filter out values with no label, name, or description
+            .map((a) => ({
+                value: a?.id,
+                label: a?.label || a?.name || a?.description || 'Unknown',
+                description: a?.description || '',
+                ...a,
+            }));
+    }, [inputValue]);
+
+    // Set options when memoizedOptions changes
+    useEffect(() => {
+        if (JSON.stringify(selectOptions) !== JSON.stringify(memoizedOptions)) {
+            setSelectOptions(memoizedOptions);
+        }
+    }, [memoizedOptions, selectOptions]);
+
+    // Set value when memoizedInputValue changes
     useEffect(() => {
-        // Only update if `inputValue` content has changed
         if (
-            JSON.stringify(prevInputValueRef.current) !==
-            JSON.stringify(inputValue)
+            JSON.stringify(selectValue) !== JSON.stringify(memoizedInputValue)
         ) {
-            const _values = Array.isArray(inputValue)
-                ? inputValue.map((a) => ({
-                      value: a.id,
-                      label: a.label || a.name || a.description || 'Unknown',
-                      ...a,
-                  }))
-                : inputValue && typeof inputValue === 'object'
-                ? [
-                      {
-                          value: inputValue.id,
-                          label:
-                              inputValue.label ||
-                              inputValue.name ||
-                              inputValue.description ||
-                              'Unknown',
-                          ...inputValue,
-                      },
-                  ]
-                : [];
-
-            setSelectValue(_values);
-            prevInputValueRef.current = inputValue;
+            setSelectValue(memoizedInputValue);
         }
-    }, [inputValue]);
+    }, [memoizedInputValue, selectValue]);
 
     const handleCreate = async (inputValue) => {
         if (creatableConfig.url && creatableConfig.method) {
@@ -75,11 +87,20 @@ function MultiSelect({
                 const newOption = {
                     value: res.data.id,
                     label: res.data.label || inputValue,
+                    description: res.data.description || 'Newly created item',
                     ...res.data,
                 };
 
                 setSelectOptions((prevOptions) => [...prevOptions, newOption]);
-                setSelectValue((prevValues) => [...prevValues, newOption]);
+                setSelectValue((prevValues) =>
+                    multi ? [...prevValues, newOption] : [newOption]
+                );
+
+                onChange(
+                    multi ? [...selectValue, newOption] : newOption,
+                    { action: 'create-option' },
+                    settings.id
+                );
             }
         }
     };
@@ -93,7 +114,7 @@ function MultiSelect({
             isSearchable
             isMulti={multi}
             filterOption={createFilter({ ignoreAccents: false })}
-            components={{ SelectList }}
+            components={{ Option: CustomOption }}
             options={selectOptions}
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
@@ -115,8 +136,8 @@ function MultiSelect({
                 }),
             }}
             value={selectValue}
-            onCreateOption={handleCreate}
-            placeholder={placeholder ? placeholder : 'Select...'}
+            onCreateOption={isCreatable ? handleCreate : undefined}
+            placeholder={placeholder || 'Select...'}
         />
     );
 }

package/src/components/crm/Navigation.jsx

@@ -1,46 +1,13 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import {
-    ArrowCycle,
-    BookClose,
-    BookOpen,
-    Briefcase,
     Bug,
     Calendar,
-    ChatDots,
-    Clipboard,
-    CloudUpload,
-    DoubleSword,
     Draft,
-    Envelope,
-    File,
-    Folder,
-    FolderAdd,
-    Gear,
-    Grid,
-    Home,
-    HomeAlt1,
-    Inbox,
-    Info,
-    LightBulb,
-    Microphone,
-    Money,
-    Newspaper,
-    Paper,
-    PeopleGroup,
-    PeopleMultiple,
     Person,
-    Question,
-    QuestionFill,
     Search,
-    SettingsVertical,
-    ShippingBoxV1,
     SignOut,
     Shield,
-    StatisticUp,
-    TextAlignLeft,
-    Ticket,
-    Utensils,
 } from 'akar-icons';
 import CustomFetch from './Fetch';
 import Notification from './Notification';
@@ -236,8 +203,6 @@ function Navigation({
     };
 
     const renderSetting = (n) => {
-        const isActive = location.pathname === n.url; // Check if current path matches setting URL
-
         const iconComponents = {
             bug: Bug,
             calendar: Calendar,
@@ -247,18 +212,15 @@ function Navigation({
             signOut: SignOut,
         };
 
-        const IconComponent = iconComponents[n.icon];
-        const settingClasses = isActive ? `${styles.active}` : ''; // Add active class if URLs match
-
         if (n.id === 'notifications') {
             return (
-                <li className={settingClasses}>
+                <li>
                     <Notification setSystemAuth={setSystemAuth} />
                 </li>
             );
         } else if (n.id === 'switchAccount') {
             return (
-                <li className={settingClasses}>
+                <li>
                     <SwitchAccount
                         setSystemAuth={setSystemAuth}
                         setting={n}
@@ -267,8 +229,9 @@ function Navigation({
                 </li>
             );
         } else if (n.id === 'logout') {
+            const IconComponent = iconComponents[n.icon];
             return (
-                <li className={settingClasses}>
+                <li>
                     <button
                         title={n.label}
                         data-tooltip-id="system-tooltip"
@@ -280,8 +243,10 @@ function Navigation({
                 </li>
             );
         } else {
+            const IconComponent = iconComponents[n.icon];
+
             return (
-                <li className={settingClasses}>
+                <li>
                     <Link
                         to={n.url}
                         data-tooltip-id="system-tooltip"
@@ -297,48 +262,6 @@ function Navigation({
     };
 
     const renderNav = (n) => {
-        const iconComponents = {
-            arrowCycle: ArrowCycle,
-            bookClose: BookClose,
-            bookOpen: BookOpen,
-            briefcase: Briefcase,
-            calendar: Calendar,
-            chatDots: ChatDots,
-            clipboard: Clipboard,
-            cloudUpload: CloudUpload,
-            doubleSword: DoubleSword,
-            draft: Draft,
-            envelope: Envelope,
-            file: File,
-            folder: Folder,
-            folderAdd: FolderAdd,
-            gear: Gear,
-            grid: Grid,
-            home: Home,
-            homeAlt1: HomeAlt1,
-            inbox: Inbox,
-            info: Info,
-            lightBulb: LightBulb,
-            microphone: Microphone,
-            money: Money,
-            newspaper: Newspaper,
-            paper: Paper,
-            peopleGroup: PeopleGroup,
-            peopleMultiple: PeopleMultiple,
-            question: Question,
-            questionFill: QuestionFill,
-            search: Search,
-            settingsVertical: SettingsVertical,
-            signOut: SignOut,
-            shippingBoxV1: ShippingBoxV1,
-            statisticUp: StatisticUp,
-            textAlignLeft: TextAlignLeft,
-            ticket: Ticket,
-            utensils: Utensils,
-        };
-
-        const IconComponent = iconComponents[n.icon];
-
         let navItemClasses;
 
         if (n.class.includes('active')) {
@@ -379,15 +302,9 @@ function Navigation({
         return (
             <li className={navItemClasses}>
                 {n.url ? (
-                    <Link to={n.url}>
-                        <IconComponent strokeWidth={2} size={18} />
-                        {n.label}
-                    </Link>
+                    <Link to={n.url}>{n.label}</Link>
                 ) : (
-                    <span title={n.label}>
-                        <IconComponent strokeWidth={2} size={18} />
-                        {n.label}
-                    </span>
+                    <span title={n.label}>{n.label}</span>
                 )}
                 {renderChildren()}
             </li>

package/src/components/crm/QuickAction.jsx

@@ -398,6 +398,7 @@ const QuickAction = ({ childRef, navConfig }) => {
                 <button
                     onClick={() => {
                         if (location.pathname === '/leads/create') {
+                            console.info('aa');
                             childRef.current.contactOpen();
                         } else {
                             contactModalOpen('create', 0);

package/src/components/crm/auth/Login.jsx

@@ -28,7 +28,15 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
         let content =
             providers && providers.length > 0 ? (
                 <div className="formItem fwItem lastItem forgotten">
-                    <span>OR</span>
+                    <span
+                        style={{
+                            display: 'block',
+                            textAlign: 'center',
+                            width: '100%',
+                        }}
+                    >
+                        OR
+                    </span>
                 </div>
             ) : null;
 

package/src/components/crm/auth/Profile.jsx

@@ -101,10 +101,12 @@ const Profile = ({ userProfile, setUserProfile }) => {
                 payload
             );
 
+            const updatedUserData = res.data.user ? res.data.user : res.data;
+
             setUserProfile((prevState) => ({
                 ...prevState,
-                name: res.data.user.name,
-                signature: res.data.user.signature,
+                name: updatedUserData.name,
+                signature: updatedUserData.signature,
             }));
             toast.success('Your profile has been successfully updated.');
         } catch (err) {