goobs-frontend 0.7.63 → 0.7.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.63",
+  "version": "0.7.64",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/components/Button/hook/useHelperFooter.tsx

@@ -0,0 +1,251 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { get } from 'goobs-cache'
+
+/**
+ * Represents the structure of a helper footer message.
+ * @interface HelperFooterMessage
+ */
+export interface HelperFooterMessage {
+  /** The status of the message, either 'error' or 'success'. */
+  status: 'error' | 'success'
+  /** A message describing the status. */
+  statusMessage: string
+  /** A message to be displayed to the user. */
+  spreadMessage: string
+  /** A number indicating the priority of the message. Lower numbers indicate higher priority. */
+  spreadMessagePriority: number
+  /** The name of the form associated with this message. */
+  formname: string
+  /** Indicates whether this message is required to be addressed. */
+  required: boolean
+}
+
+/**
+ * A type definition for the interval ID returned by setInterval.
+ */
+type IntervalID = ReturnType<typeof setInterval>
+
+/**
+ * A custom hook for managing helper footer messages and form validation.
+ *
+ * @param {string} [initialFormname] - The initial name of the form to fetch helper footers for.
+ * @returns {Object} An object containing the current error message, form validity state, and functions to update and fetch form validation.
+ */
+const useHelperFooter = (initialFormname?: string) => {
+  /**
+   * State for storing the current error message.
+   */
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
+
+  /**
+   * State for storing the current form validity.
+   */
+  const [isFormValid, setIsFormValid] = useState<boolean>(true)
+
+  /**
+   * State for storing the current helper footers.
+   */
+  const [helperFooters, setHelperFooters] = useState<HelperFooterMessage[]>([])
+
+  /**
+   * Ref for storing the previous helper footers to compare against.
+   */
+  const prevHelperFooters = useRef<HelperFooterMessage[]>([])
+
+  /**
+   * Ref for storing the previous error message to compare against.
+   */
+  const prevErrorMessage = useRef<string | undefined>(undefined)
+
+  /**
+   * Ref for storing the previous form validity to compare against.
+   */
+  const prevIsFormValid = useRef<boolean>(true)
+
+  /**
+   * Ref for storing the interval ID for periodic helper footer fetching.
+   */
+  const intervalIdRef = useRef<IntervalID | null>(null)
+
+  /**
+   * Fetches helper footer messages from the cache.
+   *
+   * @param {string} [formname] - The name of the form to fetch helper footers for.
+   * @returns {Promise<HelperFooterMessage[]>} A promise that resolves to an array of HelperFooterMessage objects.
+   */
+  const fetchHelperFooters = useCallback(
+    async (formname?: string): Promise<HelperFooterMessage[]> => {
+      const currentFormname = formname || initialFormname
+      if (!currentFormname) {
+        return []
+      }
+
+      const helperFooterResult = await get(
+        'helperfooter',
+        currentFormname,
+        'client'
+      )
+
+      if (
+        helperFooterResult &&
+        typeof helperFooterResult === 'object' &&
+        'type' in helperFooterResult &&
+        helperFooterResult.type === 'json' &&
+        'value' in helperFooterResult &&
+        typeof helperFooterResult.value === 'object' &&
+        helperFooterResult.value !== null
+      ) {
+        const fetchedHelperFooters = Object.entries(
+          helperFooterResult.value as Record<string, unknown>
+        )
+          .map(([key, value]): HelperFooterMessage | null => {
+            if (
+              typeof value === 'object' &&
+              value !== null &&
+              'status' in value &&
+              'statusMessage' in value &&
+              'spreadMessage' in value &&
+              'spreadMessagePriority' in value &&
+              'required' in value
+            ) {
+              return {
+                status: value.status as 'error' | 'success',
+                statusMessage: String(value.statusMessage),
+                spreadMessage: String(value.spreadMessage),
+                spreadMessagePriority: Number(value.spreadMessagePriority),
+                required: Boolean(value.required),
+                formname: key,
+              }
+            }
+            return null
+          })
+          .filter((value): value is HelperFooterMessage => value !== null)
+
+        if (
+          JSON.stringify(fetchedHelperFooters) !==
+          JSON.stringify(prevHelperFooters.current)
+        ) {
+          setHelperFooters(fetchedHelperFooters)
+          prevHelperFooters.current = fetchedHelperFooters
+        }
+        return fetchedHelperFooters
+      }
+
+      if (helperFooters.length > 0) {
+        setHelperFooters([])
+        prevHelperFooters.current = []
+      }
+      return []
+    },
+    [initialFormname, helperFooters]
+  )
+
+  /**
+   * Updates the form validation state based on the fetched helper footers.
+   *
+   * @param {string} [formname] - The name of the form to update validation for.
+   * @returns {Promise<boolean>} A promise that resolves to a boolean indicating whether the form is valid.
+   */
+  const updateFormValidation = useCallback(
+    async (formname?: string): Promise<boolean> => {
+      const fetchedHelperFooters = await fetchHelperFooters(formname)
+
+      if (fetchedHelperFooters.length === 0) {
+        setErrorMessage(undefined)
+        setIsFormValid(true)
+        return true
+      }
+
+      const errorFooters = fetchedHelperFooters.filter(
+        footer => footer.status === 'error' && footer.required
+      )
+
+      if (errorFooters.length > 0) {
+        const highestPriorityError = errorFooters.reduce((prev, current) =>
+          prev.spreadMessagePriority < current.spreadMessagePriority
+            ? prev
+            : current
+        )
+        setErrorMessage(highestPriorityError.spreadMessage)
+        setIsFormValid(false)
+        return false
+      }
+
+      setErrorMessage(undefined)
+      setIsFormValid(true)
+      return true
+    },
+    [fetchHelperFooters]
+  )
+
+  /**
+   * Effect to run form validation when the initial form name changes.
+   */
+  useEffect(() => {
+    void updateFormValidation()
+  }, [initialFormname, updateFormValidation])
+
+  /**
+   * Effect to set up periodic helper footer fetching.
+   */
+  useEffect(() => {
+    if (initialFormname) {
+      const fetchAndUpdateHelperFooters = async () => {
+        await updateFormValidation(initialFormname)
+      }
+
+      void fetchAndUpdateHelperFooters()
+      intervalIdRef.current = setInterval(fetchAndUpdateHelperFooters, 1000)
+
+      return () => {
+        if (intervalIdRef.current) {
+          clearInterval(intervalIdRef.current)
+        }
+      }
+    }
+  }, [initialFormname, updateFormValidation])
+
+  /**
+   * Effect to update refs when error message or form validity changes.
+   */
+  useEffect(() => {
+    if (
+      errorMessage !== prevErrorMessage.current ||
+      isFormValid !== prevIsFormValid.current
+    ) {
+      prevErrorMessage.current = errorMessage
+      prevIsFormValid.current = isFormValid
+    }
+  }, [errorMessage, isFormValid])
+
+  /**
+   * Memoized helper footers to prevent unnecessary re-renders.
+   */
+  const memoizedHelperFooters = useMemo(() => helperFooters, [helperFooters])
+
+  /**
+   * Memoized return value of the hook to prevent unnecessary re-renders.
+   */
+  const returnValue = useMemo(
+    () => ({
+      errorMessage,
+      isFormValid,
+      updateFormValidation,
+      fetchHelperFooters,
+      helperFooters: memoizedHelperFooters,
+    }),
+    [
+      errorMessage,
+      isFormValid,
+      updateFormValidation,
+      fetchHelperFooters,
+      memoizedHelperFooters,
+    ]
+  )
+
+  return returnValue
+}
+
+export default useHelperFooter

package/src/components/Button/index.tsx

@@ -1,28 +1,32 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useMemo, useCallback } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import StarIcon from '@mui/icons-material/Star'
 import Typography from '../Typography'
 import { red } from '../../styles/palette'
-import { get } from 'goobs-cache'
+import useHelperFooter from './hook/useHelperFooter'
 
+/**
+ * Defines the possible alignment options for the button text.
+ */
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
-export interface HelperFooterMessage {
-  status: 'error' | 'success'
-  statusMessage: string
-  spreadMessage: string
-  spreadMessagePriority: number
-  formname: string
-  required: boolean
-}
-
+/**
+ * Interface for the CustomButton component props.
+ * Extends ButtonProps from Material-UI, omitting 'color' and 'variant'.
+ */
 export interface CustomButtonProps
   extends Omit<ButtonProps, 'color' | 'variant'> {
+  /** The text to display on the button */
   text?: string
+  /** The background color of the button */
   backgroundcolor?: string
+  /** The outline color of the button */
   outlinecolor?: string
+  /** The font color of the button text */
   fontcolor?: string
+  /** The alignment of the button text */
   fontlocation?: ButtonAlignment
+  /** The variant of the font to use for the button text */
   fontvariant?:
     | 'arapeyh1'
     | 'arapeyh2'
@@ -51,18 +55,32 @@ export interface CustomButtonProps
     | 'merriparagraph'
     | 'merrihelperheader'
     | 'merrihelperfooter'
+  /** The icon to display on the button */
   icon?: React.ReactNode | false
+  /** The color of the icon */
   iconcolor?: string
+  /** The size of the icon */
   iconsize?: string
+  /** The location of the icon relative to the text */
   iconlocation?: 'left' | 'top' | 'right'
+  /** The variant of the button */
   variant?: 'text' | 'outlined' | 'contained'
+  /** The function to call when the button is clicked */
   onClick?: () => void
-  helperfooter?: HelperFooterMessage
+  /** The width of the button */
   width?: string
+  /** The name of the form associated with this button */
   formname?: string
+  /** The name attribute of the button */
   name?: string
 }
 
+/**
+ * CustomButton component that extends Material-UI's Button with additional styling and functionality.
+ *
+ * @param props - The props for the CustomButton component
+ * @returns A React functional component
+ */
 const CustomButton: React.FC<CustomButtonProps> = props => {
   const {
     text,
@@ -83,111 +101,15 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
     width,
   } = props
 
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  )
-  const [, setIsFormValid] = useState<boolean>(true)
-  const [hasBeenClicked, setHasBeenClicked] = useState<boolean>(false)
-
-  const fetchHelperFooters = useCallback(async (): Promise<
-    HelperFooterMessage[]
-  > => {
-    if (!formname) {
-      console.log('CustomButton: No formname provided, returning empty array')
-      return []
-    }
-    console.log('CustomButton: Fetching helper footers for formname:', formname)
-
-    // Wait for 2 seconds before fetching to allow time for cache update
-    await new Promise(resolve => setTimeout(resolve, 3000))
-
-    const helperFooterResult = await get('helperfooter', formname, 'client')
-    console.log('CustomButton: Helper footer result:', helperFooterResult)
-
-    if (
-      helperFooterResult &&
-      typeof helperFooterResult === 'object' &&
-      'type' in helperFooterResult &&
-      helperFooterResult.type === 'json' &&
-      'value' in helperFooterResult &&
-      typeof helperFooterResult.value === 'object' &&
-      helperFooterResult.value !== null
-    ) {
-      const helperFooters = Object.entries(
-        helperFooterResult.value as Record<string, unknown>
-      )
-        .map(([key, value]): HelperFooterMessage | null => {
-          if (
-            typeof value === 'object' &&
-            value !== null &&
-            'status' in value &&
-            'statusMessage' in value &&
-            'spreadMessage' in value &&
-            'spreadMessagePriority' in value &&
-            'required' in value
-          ) {
-            return {
-              status: value.status as 'error' | 'success',
-              statusMessage: String(value.statusMessage),
-              spreadMessage: String(value.spreadMessage),
-              spreadMessagePriority: Number(value.spreadMessagePriority),
-              required: Boolean(value.required),
-              formname: key,
-            }
-          }
-          return null
-        })
-        .filter((value): value is HelperFooterMessage => value !== null)
-
-      console.log('CustomButton: Valid helper footers:', helperFooters)
-      return helperFooters
-    }
-
-    console.log('CustomButton: No valid helper footers found in cache')
-    return []
-  }, [formname])
+  const { errorMessage, isFormValid, updateFormValidation } =
+    useHelperFooter(formname)
 
-  const updateFormValidation = useCallback(async (): Promise<boolean> => {
-    console.log('CustomButton: Starting form validation')
-    const helperFooters = await fetchHelperFooters()
-    console.log('CustomButton: Fetched helper footers:', helperFooters)
-
-    if (helperFooters.length === 0) {
-      console.log('CustomButton: No helper footers found, form is valid')
-      setErrorMessage(undefined)
-      setIsFormValid(true)
-      return true
-    }
-
-    const errorFooters = helperFooters.filter(
-      footer => footer.status === 'error'
-    )
-    console.log('CustomButton: Error footers:', errorFooters)
-
-    if (errorFooters.length > 0) {
-      console.log('CustomButton: Found error footers, form is invalid')
-      const highestPriorityError = errorFooters.reduce((prev, current) =>
-        prev.spreadMessagePriority < current.spreadMessagePriority
-          ? prev
-          : current
-      )
-      setErrorMessage(highestPriorityError.spreadMessage)
-      setIsFormValid(false)
-      return false
-    }
-
-    console.log('CustomButton: No error footers found, form is valid')
-    setErrorMessage(undefined)
-    setIsFormValid(true)
-    return true
-  }, [fetchHelperFooters])
-
-  useEffect(() => {
-    console.log('CustomButton: Running effect to update form validation')
-    void updateFormValidation()
-  }, [updateFormValidation])
-
-  const renderIcon = (): React.ReactNode => {
+  /**
+   * Renders the icon for the button based on the provided props.
+   *
+   * @returns {React.ReactNode} The rendered icon or null
+   */
+  const renderIcon = useCallback((): React.ReactNode => {
     if (icon === false) {
       return null
     }
@@ -197,24 +119,80 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
       })
     }
     return <StarIcon style={{ fontSize: iconsize }} />
-  }
+  }, [icon, iconsize])
+
+  /**
+   * Handles the button click event. Prevents default behavior, validates the form,
+   * and calls the onClick prop if the form is valid.
+   *
+   * @param event - The mouse event from clicking the button
+   */
+  const handleButtonClick = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+      event.preventDefault()
+      const validationResult = await updateFormValidation(formname)
+      if (validationResult && onClick) {
+        onClick()
+      }
+    },
+    [updateFormValidation, onClick, formname]
+  )
 
-  const handleButtonClick = async (
-    event: React.MouseEvent<HTMLButtonElement>
-  ): Promise<void> => {
-    console.log('CustomButton: Button clicked')
-    event.preventDefault()
-    setHasBeenClicked(true)
+  /**
+   * Memoized style object for the button.
+   */
+  const buttonStyle = useMemo(
+    () => ({
+      minWidth: text ? 'auto' : 'fit-content',
+      paddingLeft: text ? '8px' : '0',
+      paddingRight: text ? '8px' : '0',
+      justifyContent: fontlocation || 'center',
+      backgroundColor: backgroundcolor,
+      border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
+      color: iconcolor,
+      width: width,
+    }),
+    [text, fontlocation, backgroundcolor, outlinecolor, iconcolor, width]
+  )
 
-    const isValid = await updateFormValidation()
-    console.log('CustomButton: Form validation result:', isValid)
-    if (isValid && onClick) {
-      console.log('CustomButton: Form is valid, calling onClick')
-      onClick()
-    } else {
-      console.log('CustomButton: Form is invalid or no onClick provided')
-    }
-  }
+  /**
+   * Memoized content for the button, including icon and text.
+   */
+  const buttonContent = useMemo(
+    () => (
+      <Box display="flex" alignItems="center">
+        {iconlocation === 'left' && renderIcon()}
+        {text && (
+          <Typography
+            fontvariant={fontvariant}
+            fontcolor={fontcolor}
+            text={text}
+          />
+        )}
+        {iconlocation === 'right' && renderIcon()}
+      </Box>
+    ),
+    [iconlocation, renderIcon, text, fontvariant, fontcolor]
+  )
+
+  /**
+   * Memoized error message component that displays when the form is invalid.
+   */
+  const errorMessageComponent = useMemo(
+    () =>
+      !isFormValid && errorMessage ? (
+        <Typography
+          fontvariant="merrihelperfooter"
+          fontcolor={red.main}
+          text={errorMessage}
+          marginTop={0.5}
+          marginBottom={0}
+          align="center"
+          width="100%"
+        />
+      ) : null,
+    [errorMessage, isFormValid]
+  )
 
   return (
     <Box
@@ -231,42 +209,13 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
         type={type}
         name={name}
         onClick={handleButtonClick}
-        style={{
-          minWidth: text ? 'auto' : 'fit-content',
-          paddingLeft: text ? '8px' : '0',
-          paddingRight: text ? '8px' : '0',
-          justifyContent: fontlocation || 'center',
-          backgroundColor: backgroundcolor,
-          border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
-          color: iconcolor,
-          width: width,
-        }}
+        style={buttonStyle}
       >
-        <Box display="flex" alignItems="center">
-          {iconlocation === 'left' && renderIcon()}
-          {text && (
-            <Typography
-              fontvariant={fontvariant}
-              fontcolor={fontcolor}
-              text={text}
-            />
-          )}
-          {iconlocation === 'right' && renderIcon()}
-        </Box>
+        {buttonContent}
       </Button>
-      {hasBeenClicked && errorMessage && (
-        <Typography
-          fontvariant="merrihelperfooter"
-          fontcolor={red.main}
-          text={errorMessage}
-          marginTop={0.5}
-          marginBottom={0}
-          align="center"
-          width="100%"
-        />
-      )}
+      {errorMessageComponent}
     </Box>
   )
 }
 
-export default CustomButton
+export default React.memo(CustomButton)

package/src/components/Content/Structure/button/useButton.tsx

@@ -33,7 +33,6 @@ const useButton = (grid: {
       iconlocation,
       variant,
       onClick,
-      helperfooter,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -72,7 +71,6 @@ const useButton = (grid: {
           iconlocation={iconlocation}
           variant={variant}
           onClick={onClick}
-          helperfooter={helperfooter}
           {...restProps}
         />
       ),

package/src/components/StyledComponent/helperfooter/useHelperFooter.tsx

@@ -2,27 +2,53 @@
 
 import { useCallback, useState, useMemo, useRef, useEffect } from 'react'
 import { debounce } from 'lodash'
-import { get, set, StringValue, JSONValue } from 'goobs-cache'
+import { get, set, remove, StringValue, JSONValue } from 'goobs-cache'
 
+/**
+ * Validates if the given email string is in a valid email format.
+ * @param {string} email - The email string to validate.
+ * @returns {boolean} True if the email is valid, false otherwise.
+ */
 const isValidEmailFormat = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
   return emailRegex.test(email)
 }
 
+/**
+ * Represents the structure of a helper footer message.
+ */
 export interface HelperFooterMessage {
+  /** The status of the message: 'error', 'success', or 'emptyAndRequired'. */
   status: 'error' | 'success' | 'emptyAndRequired'
+  /** A detailed message describing the status. */
   statusMessage: string
+  /** A concise message for display purposes. */
   spreadMessage: string
+  /** A number indicating the priority of the message. Lower numbers indicate higher priority. */
   spreadMessagePriority: number
+  /** Indicates whether this field is required. */
   required: boolean
 }
 
+/**
+ * A custom hook for managing helper footer messages and form validation.
+ * @returns {Object} An object containing functions and state for managing helper footers.
+ */
 export const useHelperFooter = () => {
   const [helperFooterValue, setHelperFooterValue] = useState<
     Record<string, HelperFooterMessage>
   >({})
   const helperFooterRef = useRef<Record<string, HelperFooterMessage>>({})
 
+  /**
+   * Handles the creation of error messages for generic fields.
+   * @param {FormData} formData - The form data containing the field value.
+   * @param {string} name - The name of the field.
+   * @param {string} label - The label of the field.
+   * @param {boolean} required - Whether the field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage | undefined>} A promise that resolves to a HelperFooterMessage or undefined.
+   */
   const handleGenericErrorCreation = useCallback(
     async (
       formData: FormData,
@@ -53,18 +79,22 @@ export const useHelperFooter = () => {
           },
         }
         await set('helperfooter', formname, jsonValue, 'client')
-        console.log(
-          `Stored helper footer for ${name}:`,
-          message,
-          `storeName: ${formname}`
-        )
         return message
+      } else {
+        await remove('helperfooter', formname, 'client')
       }
       return undefined
     },
     []
   )
 
+  /**
+   * Handles the creation of error messages for email fields.
+   * @param {FormData} formData - The form data containing the email value.
+   * @param {boolean} required - Whether the email field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage | undefined>} A promise that resolves to a HelperFooterMessage or undefined.
+   */
   const handleEmailErrorCreation = useCallback(
     async (
       formData: FormData,
@@ -101,24 +131,23 @@ export const useHelperFooter = () => {
       }
 
       if (message) {
-        const jsonValue: JSONValue = {
-          type: 'json',
-          value: {
-            email: {
-              status: message.status,
-              statusMessage: message.statusMessage,
-              spreadMessage: message.spreadMessage,
-              spreadMessagePriority: message.spreadMessagePriority,
-              required: message.required,
+        if (message.status === 'success') {
+          await remove('helperfooter', formname, 'client')
+        } else {
+          const jsonValue: JSONValue = {
+            type: 'json',
+            value: {
+              email: {
+                status: message.status,
+                statusMessage: message.statusMessage,
+                spreadMessage: message.spreadMessage,
+                spreadMessagePriority: message.spreadMessagePriority,
+                required: message.required,
+              },
             },
-          },
+          }
+          await set('helperfooter', formname, jsonValue, 'client')
         }
-        await set('helperfooter', formname, jsonValue, 'client')
-        console.log(
-          `Stored helper footer for email:`,
-          message,
-          `storeName: ${formname}`
-        )
       }
 
       return message
@@ -126,6 +155,13 @@ export const useHelperFooter = () => {
     []
   )
 
+  /**
+   * Handles the creation of error messages for password fields.
+   * @param {FormData} formData - The form data containing the password value.
+   * @param {boolean} required - Whether the password field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage | undefined>} A promise that resolves to a HelperFooterMessage or undefined.
+   */
   const handlePasswordErrorCreation = useCallback(
     async (
       formData: FormData,
@@ -133,24 +169,15 @@ export const useHelperFooter = () => {
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
       const password = formData.get('verifyPassword') as string
-      console.log('handlePasswordErrorCreation - Password:', password)
 
       const debouncedPasswordStorage = debounce(async () => {
-        try {
-          if (password) {
-            console.log('Storing password in goobs-cache...')
-            await set(
-              'validate',
-              formname,
-              { type: 'string', value: password } as StringValue,
-              'client'
-            )
-            console.log('Password stored successfully')
-          } else {
-            console.log('No password to store')
-          }
-        } catch (error) {
-          console.error('Error interacting with goobs-cache:', error)
+        if (password) {
+          await set(
+            'validate',
+            formname,
+            { type: 'string', value: password } as StringValue,
+            'client'
+          )
         }
       }, 2000)
 
@@ -193,24 +220,23 @@ export const useHelperFooter = () => {
       }
 
       if (message) {
-        const jsonValue: JSONValue = {
-          type: 'json',
-          value: {
-            verifyPassword: {
-              status: message.status,
-              statusMessage: message.statusMessage,
-              spreadMessage: message.spreadMessage,
-              spreadMessagePriority: message.spreadMessagePriority,
-              required: message.required,
+        if (message.status === 'success') {
+          await remove('helperfooter', formname, 'client')
+        } else {
+          const jsonValue: JSONValue = {
+            type: 'json',
+            value: {
+              verifyPassword: {
+                status: message.status,
+                statusMessage: message.statusMessage,
+                spreadMessage: message.spreadMessage,
+                spreadMessagePriority: message.spreadMessagePriority,
+                required: message.required,
+              },
             },
-          },
+          }
+          await set('helperfooter', formname, jsonValue, 'client')
         }
-        await set('helperfooter', formname, jsonValue, 'client')
-        console.log(
-          `Stored helper footer for verifyPassword:`,
-          message,
-          `storeName: ${formname}`
-        )
       }
 
       return message
@@ -218,6 +244,13 @@ export const useHelperFooter = () => {
     []
   )
 
+  /**
+   * Handles the creation of error messages for password confirmation fields.
+   * @param {FormData} formData - The form data containing the confirmation password value.
+   * @param {boolean} required - Whether the confirmation password field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage | undefined>} A promise that resolves to a HelperFooterMessage or undefined.
+   */
   const handleConfirmPasswordErrorCreation = useCallback(
     async (
       formData: FormData,
@@ -225,10 +258,6 @@ export const useHelperFooter = () => {
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
       const confirmPassword = formData.get('confirmPassword') as string
-      console.log(
-        'handleConfirmPasswordErrorCreation - Confirm Password:',
-        confirmPassword
-      )
 
       let message: HelperFooterMessage | undefined
 
@@ -243,11 +272,9 @@ export const useHelperFooter = () => {
       } else if (confirmPassword) {
         let verifyPasswordResult
         try {
-          console.log('Retrieving password from goobs-cache...')
           verifyPasswordResult = await get('validate', formname, 'client')
-          console.log('Retrieved password result:', verifyPasswordResult)
         } catch (error) {
-          console.error('Error retrieving password from goobs-cache:', error)
+          // Error handling
         }
 
         let verifyPassword: string | undefined
@@ -260,9 +287,6 @@ export const useHelperFooter = () => {
           typeof verifyPasswordResult.value === 'string'
         ) {
           verifyPassword = verifyPasswordResult.value
-          console.log('Verify password retrieved:', verifyPassword)
-        } else {
-          console.log('Invalid or missing verify password result')
         }
 
         if (!verifyPassword) {
@@ -293,24 +317,23 @@ export const useHelperFooter = () => {
       }
 
       if (message) {
-        const jsonValue: JSONValue = {
-          type: 'json',
-          value: {
-            confirmPassword: {
-              status: message.status,
-              statusMessage: message.statusMessage,
-              spreadMessage: message.spreadMessage,
-              spreadMessagePriority: message.spreadMessagePriority,
-              required: message.required,
+        if (message.status === 'success') {
+          await remove('helperfooter', formname, 'client')
+        } else {
+          const jsonValue: JSONValue = {
+            type: 'json',
+            value: {
+              confirmPassword: {
+                status: message.status,
+                statusMessage: message.statusMessage,
+                spreadMessage: message.spreadMessage,
+                spreadMessagePriority: message.spreadMessagePriority,
+                required: message.required,
+              },
             },
-          },
+          }
+          await set('helperfooter', formname, jsonValue, 'client')
         }
-        await set('helperfooter', formname, jsonValue, 'client')
-        console.log(
-          `Stored helper footer for confirmPassword:`,
-          message,
-          `storeName: ${formname}`
-        )
       }
 
       return message
@@ -318,6 +341,13 @@ export const useHelperFooter = () => {
     []
   )
 
+  /**
+   * Handles the creation of error messages for phone number fields.
+   * @param {FormData} formData - The form data containing the phone number value.
+   * @param {boolean} required - Whether the phone number field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage | undefined>} A promise that resolves to a HelperFooterMessage or undefined.
+   */
   const handlePhoneNumberErrorCreation = useCallback(
     async (
       formData: FormData,
@@ -363,24 +393,23 @@ export const useHelperFooter = () => {
       }
 
       if (message) {
-        const jsonValue: JSONValue = {
-          type: 'json',
-          value: {
-            phoneNumber: {
-              status: message.status,
-              statusMessage: message.statusMessage,
-              spreadMessage: message.spreadMessage,
-              spreadMessagePriority: message.spreadMessagePriority,
-              required: message.required,
+        if (message.status === 'success') {
+          await remove('helperfooter', formname, 'client')
+        } else {
+          const jsonValue: JSONValue = {
+            type: 'json',
+            value: {
+              phoneNumber: {
+                status: message.status,
+                statusMessage: message.statusMessage,
+                spreadMessage: message.spreadMessage,
+                spreadMessagePriority: message.spreadMessagePriority,
+                required: message.required,
+              },
             },
-          },
+          }
+          await set('helperfooter', formname, jsonValue, 'client')
         }
-        await set('helperfooter', formname, jsonValue, 'client')
-        console.log(
-          `Stored helper footer for phoneNumber:`,
-          message,
-          `storeName: ${formname}`
-        )
       }
 
       return message
@@ -388,6 +417,11 @@ export const useHelperFooter = () => {
     []
   )
 
+  /**
+   * Updates the helper footer state with new validation results.
+   * @param {string} name - The name of the field.
+   * @param {HelperFooterMessage | undefined} validationResult - The validation result for the field.
+   */
   const updateHelperFooter = useCallback(
     (name: string, validationResult: HelperFooterMessage | undefined): void => {
       if (validationResult) {
@@ -410,9 +444,12 @@ export const useHelperFooter = () => {
     []
   )
 
+  /**
+   * Initializes required fields for a given form.
+   * @param {string} formname - The name of the form.
+   */
   const initializeRequiredFields = useCallback(
     async (formname: string) => {
-      console.log(`Initializing required fields for ${formname}`)
       const fields = await get('helperfooter', formname, 'client')
       if (
         fields &&
@@ -425,7 +462,6 @@ export const useHelperFooter = () => {
           ([field, message]) => {
             if (message && typeof message === 'object' && 'status' in message) {
               updateHelperFooter(field, message as HelperFooterMessage)
-              console.log(`Initialized required field ${field}:`, message)
             }
           }
         )
@@ -434,6 +470,14 @@ export const useHelperFooter = () => {
     [updateHelperFooter]
   )
 
+  /**
+   * Validates a specific field in the form.
+   * @param {string} name - The name of the field.
+   * @param {FormData} formData - The form data containing the field value.
+   * @param {string} label - The label of the field.
+   * @param {boolean} required - Whether the field is required.
+   * @param {string} formname - The name of the form.
+   */
   const validateField = useCallback(
     async (
       name: string,
@@ -442,7 +486,6 @@ export const useHelperFooter = () => {
       required: boolean,
       formname: string
     ) => {
-      console.log(`Validating field: ${name}`)
       let validationResult: HelperFooterMessage | undefined
 
       switch (name) {
@@ -485,7 +528,6 @@ export const useHelperFooter = () => {
       }
 
       updateHelperFooter(name, validationResult)
-      console.log(`Validation result for ${name}:`, validationResult)
     },
     [
       handleEmailErrorCreation,
@@ -497,9 +539,15 @@ export const useHelperFooter = () => {
     ]
   )
 
+  /**
+   * Validates a required field in the form.
+   * @param {boolean} required - Whether the field is required.
+   * @param {string} formname - The name of the form.
+   * @param {string} name - The name of the field.
+   * @param {string} label - The label of the field.
+   */
   const validateRequiredField = useCallback(
     (required: boolean, formname: string, name: string, label: string) => {
-      console.log(`Validating required field: ${name}`)
       if (required && formname && name && label) {
         const emptyFormData = new FormData()
         emptyFormData.append(name, '')
@@ -509,6 +557,13 @@ export const useHelperFooter = () => {
     [validateField]
   )
 
+  /**
+   * A custom hook to determine whether to show an error message.
+   * @param {boolean} formSubmitted - Whether the form has been submitted.
+   * @param {boolean} hasInput - Whether the field has input.
+   * @param {boolean} isFocused - Whether the field is currently focused.
+   * @returns {boolean} Whether to show the error message.
+   */
   const useShowErrorEffect = (
     formSubmitted: boolean,
     hasInput: boolean,
@@ -519,15 +574,18 @@ export const useHelperFooter = () => {
     useEffect(() => {
       const shouldShowError = formSubmitted || (hasInput && !isFocused)
       setShowError(shouldShowError)
-      console.log('Show error state updated:', shouldShowError)
     }, [formSubmitted, hasInput, isFocused])
 
     return showError
   }
 
+  /**
+   * Fetches helper footer messages for a given form.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage[]>} A promise that resolves to an array of HelperFooterMessages.
+   */
   const fetchHelperFooters = useCallback(
     async (formname: string): Promise<HelperFooterMessage[]> => {
-      console.log(`Fetching helper footers for ${formname}`)
       const helperFooters = await get('helperfooter', formname, 'client')
       if (
         helperFooters &&

package/src/components/StyledComponent/hooks/usePhoneNumber.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 
 /**
- * Formats a string of digits into a US phone number format with a "+1" country code.
+ * Formats a string of digits into a US phone number format.
+ * The "+1" country code is always added at the beginning.
  *
  * @param {string} value - The input string to be formatted.
- * @returns {string} A formatted phone number string in the format "+1 xxx-xxx-xxxx".
+ * @returns {string} A formatted phone number string.
  *
  * @example
  * formatPhoneNumber("1234567890") // returns "+1 123-456-7890"
@@ -14,6 +15,7 @@ export const formatPhoneNumber = (value: string): string => {
   const digits = value.replace(/\D/g, '')
   const limitedDigits = digits.slice(0, 10)
   let formattedNumber = '+1 '
+
   if (limitedDigits.length > 0) {
     formattedNumber += limitedDigits.slice(0, 3)
     if (limitedDigits.length > 3) {
@@ -23,13 +25,14 @@ export const formatPhoneNumber = (value: string): string => {
       }
     }
   }
-  return formattedNumber
+  return formattedNumber.trim()
 }
 
 /**
  * A custom React hook for managing and formatting a phone number input.
  *
  * @param {string} [initialValue=''] - The initial value of the phone number.
+ * @param {string} [componentvariant=''] - The variant of the component.
  * @returns {Object} An object containing the current phone number state and functions to update it.
  * @property {string} phoneNumber - The current formatted phone number.
  * @property {function} handlePhoneNumberChange - A function to handle changes to the phone number input.
@@ -38,11 +41,10 @@ export const formatPhoneNumber = (value: string): string => {
  * @example
  * const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber } = usePhoneNumber();
  */
-export const usePhoneNumber = (initialValue: string = '') => {
-  /**
-   * The current state of the formatted phone number.
-   * @type {[string, function]}
-   */
+export const usePhoneNumber = (
+  initialValue: string = '',
+  componentvariant: string = ''
+) => {
   const [phoneNumber, setPhoneNumber] = useState(
     formatPhoneNumber(initialValue)
   )
@@ -55,9 +57,14 @@ export const usePhoneNumber = (initialValue: string = '') => {
   const handlePhoneNumberChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const input = e.target.value
-      // Remove the "+1 " prefix if it exists
-      const strippedInput = input.startsWith('+1 ') ? input.slice(3) : input
-      const formattedValue = formatPhoneNumber(strippedInput)
+      let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
+
+      // Ensure we don't exceed 10 digits
+      strippedInput = strippedInput.slice(0, 10)
+
+      // Only format if there's actual input beyond "+1 "
+      const formattedValue =
+        strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
       setPhoneNumber(formattedValue)
     },
     []
@@ -72,6 +79,15 @@ export const usePhoneNumber = (initialValue: string = '') => {
     setPhoneNumber(formatPhoneNumber(newValue))
   }, [])
 
+  /**
+   * Update phone number when componentvariant is 'phonenumber' and value changes
+   */
+  useEffect(() => {
+    if (componentvariant === 'phonenumber' && initialValue) {
+      updatePhoneNumber(initialValue)
+    }
+  }, [componentvariant, initialValue, updatePhoneNumber])
+
   return {
     phoneNumber,
     handlePhoneNumberChange,

package/src/components/StyledComponent/index.tsx

@@ -164,8 +164,10 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     inputBoxRef,
     onOptionSelect
   )
-  const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber } =
-    usePhoneNumber(value || '')
+  const { phoneNumber, handlePhoneNumberChange } = usePhoneNumber(
+    value || '',
+    componentvariant
+  )
   const {
     value: splitButtonValue,
     handleIncrement,
@@ -204,15 +206,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     return () => clearTimeout(timer)
   }, [formSubmitted, hasInput])
 
-  /**
-   * Update phone number when componentvariant is 'phonenumber' and value changes
-   */
-  useEffect(() => {
-    if (componentvariant === 'phonenumber' && value) {
-      updatePhoneNumber(value)
-    }
-  }, [componentvariant, value, updatePhoneNumber])
-
   const currentHelperFooter = name ? helperFooterValue[name] : undefined
 
   /**