@visns-studio/visns-components 5.8.11 → 5.8.13

package/package.json

@@ -4,14 +4,14 @@
         "@fontsource/barlow": "^5.2.5",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@nivo/bar": "^0.96.0",
-        "@nivo/core": "^0.96.0",
-        "@nivo/line": "^0.96.0",
-        "@nivo/pie": "^0.96.0",
+        "@nivo/bar": "^0.98.0",
+        "@nivo/core": "^0.98.0",
+        "@nivo/line": "^0.98.0",
+        "@nivo/pie": "^0.98.0",
         "@tinymce/tinymce-react": "^6.1.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
-        "@vitejs/plugin-react": "^4.4.1",
+        "@vitejs/plugin-react": "^4.5.0",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
@@ -20,12 +20,12 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.6.5",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.11.3",
+        "framer-motion": "^12.12.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^12.11.3",
+        "motion": "^12.12.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -41,7 +41,7 @@
         "react-promise-tracker": "^2.1.1",
         "react-quill": "^2.0.0",
         "react-reveal": "^1.2.2",
-        "react-router-dom": "^6.30.0",
+        "react-router-dom": "^6.30.1",
         "react-select": "^5.10.1",
         "react-signature-pad-wrapper": "^4.1.0",
         "react-slugify": "^4.0.1",
@@ -54,13 +54,13 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.21.0",
+        "sweetalert2": "^11.21.2",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
         "validator": "^13.15.0",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.1"
+        "yet-another-react-lightbox": "^3.23.2"
     },
     "devDependencies": {
         "@babel/core": "^7.27.1",
@@ -74,7 +74,7 @@
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.88.0",
+        "sass": "^1.89.0",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.11",
+    "version": "5.8.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Autocomplete.jsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useCallback, useMemo, memo } from 'react';
+import { useState, useEffect, useCallback, useMemo, memo, useRef } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
+import { ToggleOffFill, ToggleOnFill, Search } from 'akar-icons';
 import styles from './styles/Autocomplete.module.scss';
 import fetchUtil from '../../utils/fetchUtil';
 
@@ -20,12 +20,16 @@ const VisnsAutocomplete = memo((props) => {
         onSelect,
         setFormData,
         style,
+        placeholder = 'Type an address',
     } = props;
 
     const [search, setSearch] = useState('');
     const [results, setResults] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [overwrite, setOverwrite] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const resultsRef = useRef(null);
 
     // Memoize URL building logic to avoid recalculations
     const buildSearchUrl = useCallback(
@@ -67,11 +71,25 @@ const VisnsAutocomplete = memo((props) => {
             fetchUtil
                 .get(url)
                 .then((response) => {
-                    setResults(response.data.features || []);
+                    // Ensure we're accessing the features array from the response
+                    // Check if response.data is a string (sometimes happens with certain APIs)
+                    let parsedData = response.data;
+                    if (typeof response.data === 'string') {
+                        try {
+                            parsedData = JSON.parse(response.data);
+                        } catch (e) {
+                            console.error('Error parsing response data:', e);
+                        }
+                    }
+
+                    const features = parsedData?.features || [];
+
+                    setResults(features);
                     setIsLoading(false);
                 })
                 .catch((error) => {
-                    console.log(error);
+                    console.error('Error fetching address suggestions:', error);
+                    setResults([]);
                     setIsLoading(false);
                 });
         },
@@ -105,15 +123,48 @@ const VisnsAutocomplete = memo((props) => {
 
     const handleItemClicked = useCallback(
         (place) => {
-            const address = place.address || '';
-            const text = place.text || '';
-            const search = address && text ? `${address} ${text}` : text;
+            // Use place_name as the primary display value as it contains the full formatted address
+            const displayValue = place.place_name || '';
+
+            // If place_name is not available, construct from components
+            const fallbackValue = (() => {
+                const address = place.address || '';
+                const text = place.text || '';
+                const context = place.context
+                    ? place.context
+                          .filter((ctx) => ctx.text)
+                          .map((ctx) => ctx.text)
+                          .join(', ')
+                    : '';
+
+                if (address && text) {
+                    return context
+                        ? `${address} ${text}, ${context}`
+                        : `${address} ${text}`;
+                } else if (text) {
+                    return context ? `${text}, ${context}` : text;
+                }
+                return '';
+            })();
+
+            const finalValue = displayValue || fallbackValue;
 
-            setSearch(search);
+            setSearch(finalValue);
             setResults([]);
-            onSelect(place, field);
+            setIsFocused(false);
+
+            // Update form data with the selected value
+            setFormData((prevState) => ({
+                ...prevState,
+                [field]: finalValue,
+            }));
+
+            // Call the onSelect callback with the place object and field
+            if (onSelect) {
+                onSelect(place, field);
+            }
         },
-        [field, onSelect]
+        [field, onSelect, setFormData]
     );
 
     const handleOverwrite = useCallback(() => {
@@ -148,54 +199,165 @@ const VisnsAutocomplete = memo((props) => {
         [style]
     );
 
+    // Handle focus and blur events
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+        if (!overwrite && search && search.length > 1) {
+            setIsLoading(true);
+            performSearch(1, search);
+        }
+    }, [overwrite, search, performSearch]);
+
+    const handleBlur = useCallback(() => {
+        // Delay hiding results to allow for click events on results
+        setTimeout(() => {
+            setIsFocused(false);
+        }, 200);
+    }, []);
+
+    // Handle click outside to close results
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (
+                resultsRef.current &&
+                !resultsRef.current.contains(event.target) &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target)
+            ) {
+                setIsFocused(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     return (
         <div className={styles.AutocompletePlace}>
-            <input
-                className={styles['AutocompletePlace-input']}
-                style={inputStyle}
-                type="text"
-                value={search || ''}
-                onChange={handleSearchChange}
-                placeholder="Type an address"
-                autoComplete="off"
-            />
-
-            {overwrite ? (
-                <ToggleOnFill
-                    data-tooltip-id="system-tooltip"
-                    data-tooltip-content="Enable Autocomplete"
-                    strokeWidth={2}
-                    size={24}
-                    onClick={handleOverwrite}
-                    className={styles.toggleActive}
+            <div className={styles['AutocompletePlace-inputWrapper']}>
+                <Search
+                    size={16}
+                    className={styles['AutocompletePlace-searchIcon']}
                 />
-            ) : (
-                <ToggleOffFill
-                    data-tooltip-id="system-tooltip"
-                    data-tooltip-content="Disable Autocomplete"
-                    strokeWidth={2}
-                    size={24}
-                    onClick={handleOverwrite}
+                <input
+                    ref={inputRef}
+                    className={styles['AutocompletePlace-input']}
+                    style={inputStyle}
+                    type="text"
+                    value={search || ''}
+                    onChange={handleSearchChange}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    placeholder={placeholder}
+                    autoComplete="off"
                 />
-            )}
 
-            {results.length > 0 && (
-                <ul className="AutocompletePlace-results">
-                    {results.map((place) => (
+                {overwrite ? (
+                    <ToggleOnFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Enable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                        className={styles.toggleActive}
+                    />
+                ) : (
+                    <ToggleOffFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Disable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                    />
+                )}
+            </div>
+
+            {isFocused && (search.length > 1 || isLoading) && (
+                <ul
+                    ref={resultsRef}
+                    className={styles['AutocompletePlace-results']}
+                >
+                    {isLoading ? (
                         <li
-                            key={place.id}
-                            className={styles['AutocompletePlace-items']}
-                            onClick={() => handleItemClicked(place)}
+                            className={`${styles['AutocompletePlace-items']} ${styles['AutocompletePlace-loading']}`}
                         >
-                            {place.place_name}
-                        </li>
-                    ))}
-
-                    {isLoading && (
-                        <li className={styles['AutocompletePlace-items']}>
                             Loading...
                         </li>
-                    )}
+                    ) : Array.isArray(results) && results.length > 0 ? (
+                        results.map((place) => (
+                            <li
+                                key={place.id}
+                                className={styles['AutocompletePlace-items']}
+                                onClick={() => handleItemClicked(place)}
+                            >
+                                <div
+                                    className={
+                                        styles['AutocompletePlace-itemMain']
+                                    }
+                                >
+                                    {place.address && (
+                                        <span
+                                            className={
+                                                styles[
+                                                    'AutocompletePlace-itemAddress'
+                                                ]
+                                            }
+                                        >
+                                            {place.address}
+                                        </span>
+                                    )}
+                                    <span
+                                        className={
+                                            styles['AutocompletePlace-itemText']
+                                        }
+                                    >
+                                        {place.text}
+                                    </span>
+                                </div>
+                                <div
+                                    className={
+                                        styles[
+                                            'AutocompletePlace-itemSecondary'
+                                        ]
+                                    }
+                                >
+                                    {place.context &&
+                                        place.context
+                                            .filter((ctx) => ctx.text)
+                                            .map((ctx, index) => (
+                                                <span key={ctx.id || index}>
+                                                    {ctx.text}
+                                                </span>
+                                            ))
+                                            .reduce(
+                                                (prev, curr, i) => [
+                                                    prev,
+                                                    <span
+                                                        key={`sep-${i}`}
+                                                        className={
+                                                            styles[
+                                                                'AutocompletePlace-itemSeparator'
+                                                            ]
+                                                        }
+                                                    >
+                                                        ,{' '}
+                                                    </span>,
+                                                    curr,
+                                                ],
+                                                []
+                                            )}
+                                </div>
+                            </li>
+                        ))
+                    ) : search.length > 1 ? (
+                        <li
+                            className={`${styles['AutocompletePlace-items']} ${styles['AutocompletePlace-noResults']}`}
+                        >
+                            No results found
+                        </li>
+                    ) : null}
                 </ul>
             )}
         </div>

package/src/components/crm/Field.jsx

@@ -1033,8 +1033,35 @@ function Field({
                 return (
                     <div className={styles.formbreak}>
                         <span>
+                            <ChevronRight
+                                strokeWidth={2}
+                                size={16}
+                                style={{
+                                    display: 'inline-block',
+                                    marginRight: '8px',
+                                    verticalAlign: 'middle',
+                                    position: 'relative',
+                                    top: '-1px',
+                                    color: 'var(--secondary-color, #fff)',
+                                    opacity: 0.9,
+                                    filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.1))',
+                                }}
+                            />
                             {settings.label}{' '}
-                            {settings.required === true ? '*' : ''}
+                            {settings.required === true ? (
+                                <span
+                                    style={{
+                                        color: 'var(--error-color, #ff6b6b)',
+                                        textShadow: '0 1px 1px rgba(0,0,0,0.2)',
+                                        marginLeft: '2px',
+                                        fontWeight: 'bold',
+                                    }}
+                                >
+                                    *
+                                </span>
+                            ) : (
+                                ''
+                            )}
                         </span>
                     </div>
                 );

package/src/components/crm/Form.jsx

@@ -459,16 +459,29 @@ function Form({
                 ? [context[3]?.text, context[4]?.text]
                 : [context[2]?.text, context[3]?.text];
 
+        // Determine the prefix based on the id parameter
+        let prefix = '';
+        if (id !== 'address1') {
+            // Extract prefix from id (e.g., 'delivery_address1' -> 'delivery_')
+            const match = id.match(/^(.+?)address1$/);
+            if (match && match[1]) {
+                prefix = match[1];
+            }
+        }
+
+        // Create the formDataUpdate object with the appropriate field names
         const formDataUpdate = {
-            address1,
-            address2,
-            suburb,
-            postcode,
-            state,
-            country,
+            [`${prefix}address1`]: address1,
+            [`${prefix}address2`]: address2,
+            [`${prefix}suburb`]: suburb,
+            [`${prefix}postcode`]: postcode,
+            [`${prefix}state`]: state,
+            [`${prefix}country`]: country,
         };
 
-        if (formData.same_address === true || id !== 'address1') {
+        // If same_address is true and we're updating the primary address,
+        // also update the postal address fields
+        if (formData.same_address === true && id === 'address1') {
             Object.assign(formDataUpdate, {
                 postal_address1: address1,
                 postal_address2: address2,

package/src/components/crm/SectionHeader.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ChevronRight } from 'akar-icons';
+import styles from './styles/Field.module.scss';
+
+/**
+ * SectionHeader component for form sections
+ * @param {Object} props - Component props
+ * @param {string} props.label - The section header text
+ * @param {React.ReactNode} [props.icon] - Optional custom icon (defaults to ChevronRight)
+ * @returns {React.ReactElement} The section header component
+ */
+const SectionHeader = ({ label, icon }) => {
+  return (
+    <div className={styles.sectionHeader}>
+      {icon || (
+        <ChevronRight
+          strokeWidth={2}
+          size={20}
+          style={{
+            filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.2))',
+          }}
+        />
+      )}
+      <span>{label}</span>
+    </div>
+  );
+};
+
+export default SectionHeader;

package/src/components/crm/examples/FormStylingGuide.md

@@ -0,0 +1,71 @@
+# Form Styling Guide
+
+This guide explains how to use the improved styling for form sections and line breaks.
+
+## Section Headers
+
+The `SectionHeader` component provides a visually appealing header for form sections. It uses the project's color scheme with fallbacks to ensure good contrast.
+
+### Usage
+
+```jsx
+import SectionHeader from '../SectionHeader';
+
+// In your form component
+<SectionHeader label="Site Details" />
+```
+
+### Props
+
+- `label` (string, required): The text to display in the header
+- `icon` (React element, optional): Custom icon to replace the default ChevronRight icon
+
+## Line Breaks
+
+The `line-break` field type has been enhanced to provide better visual separation between form sections.
+
+### Usage
+
+```jsx
+<Field
+  settings={{
+    id: 'delivery_address_section',
+    type: 'line-break',
+    label: 'Delivery Address #1',
+    size: 'full'
+  }}
+  inputValue=""
+  inputClass={inputClass}
+/>
+```
+
+## Color Scheme Compatibility
+
+Both components are designed to work with the project's color scheme variables:
+
+- `--primary-color`: Used for background
+- `--secondary-color`: Used for text and accents
+- `--error-color`: Used for required field indicators (*)
+
+Fallback colors are provided to ensure good contrast even if the project variables don't provide enough contrast.
+
+## Example
+
+See `FormWithSectionHeaders.jsx` for a complete example of how to implement a form with the new styling.
+
+## Tips for Best Results
+
+1. Use `SectionHeader` for main form sections (e.g., "Site Details", "Contact Details")
+2. Use `line-break` for subsections within a main section
+3. Ensure your project's color scheme provides good contrast between primary and secondary colors
+4. If you experience contrast issues, you can override the styles locally:
+
+```jsx
+<SectionHeader 
+  label="Custom Section" 
+  style={{ 
+    background: '#3a86ff', 
+    color: '#ffffff' 
+  }} 
+/>
+```