goobs-frontend 0.9.12 → 0.9.13

package/src/components/ConfirmationCodeInput/index.tsx

@@ -3,11 +3,13 @@ import React, {
   ChangeEvent,
   KeyboardEvent,
   useState,
+  useEffect,
   useCallback,
   FC,
 } from 'react'
 import { Input, Box } from '@mui/material'
 import { red, green } from '../../styles/palette'
+import CustomButton, { CustomButtonProps } from '../Button'
 
 export interface ConfirmationCodeInputsProps {
   identifier?: string
@@ -18,16 +20,41 @@ export interface ConfirmationCodeInputsProps {
   'aria-invalid'?: boolean
   onChange?: (value: string) => void
   value?: string
+
+  /** Whether a verification code has been sent (to toggle between "Send Code" and "Resend Code") */
+  codeSent?: boolean
+
+  /** Callback function for when the Verify button is clicked */
+  onVerify?: () => void | Promise<void>
+
+  /** Callback function for when the Send/Resend button is clicked */
+  onSendResend?: () => void | Promise<void>
+
+  /** Custom props for the Verify button */
+  verifyButtonProps?: Partial<CustomButtonProps>
+
+  /** Custom props for the Send/Resend button */
+  sendResendButtonProps?: Partial<CustomButtonProps>
+
+  /** Whether to show action buttons (verify and send/resend) */
+  showActionButtons?: boolean
+
+  /** Whether to show the Send/Resend button. If false, only the Verify button will be shown. */
+  showSendResendButton?: boolean
 }
 
 interface UseCodeConfirmationProps {
   codeLength: number
   onChange?: (value: string) => void
+  inputRefs: React.MutableRefObject<(HTMLInputElement | null)[]>
+  setInternalValue: React.Dispatch<React.SetStateAction<string>>
 }
 
 const useCodeConfirmation = ({
   codeLength,
   onChange,
+  inputRefs,
+  setInternalValue,
 }: UseCodeConfirmationProps) => {
   const [code, setCode] = useState<Record<string, string>>(
     Object.fromEntries(
@@ -39,6 +66,27 @@ const useCodeConfirmation = ({
     (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
       // Only keep digits
       const value = event.target.value.replace(/\D/g, '')
+
+      // Handle the case when the input is cleared
+      if (value === '') {
+        // When clearing, we just update the code
+        setCode(prevCode => {
+          const newCode = {
+            ...prevCode,
+            [`code${index + 1}`]: value,
+          }
+          // Combine all code pieces
+          const combinedValue = Object.values(newCode).join('')
+
+          // Update both internal state and external handler
+          setInternalValue(combinedValue)
+          onChange?.(combinedValue)
+          return newCode
+        })
+        return
+      }
+
+      // Handle direct value setting via typing
       if (value.length <= 1) {
         // Only process if it's a single digit or empty
         setCode(prevCode => {
@@ -48,12 +96,15 @@ const useCodeConfirmation = ({
           }
           // Combine all code pieces
           const combinedValue = Object.values(newCode).join('')
+
+          // Update both internal state and external handler
+          setInternalValue(combinedValue)
           onChange?.(combinedValue)
           return newCode
         })
       }
     },
-    [onChange]
+    [onChange, setInternalValue]
   )
 
   const handleKeyDown = useCallback(
@@ -76,42 +127,41 @@ const useCodeConfirmation = ({
 
       // If user pressed backspace on an empty input, move cursor to previous
       if (event.key === 'Backspace' && !code[`code${index + 1}`] && index > 0) {
+        event.preventDefault()
         setCode(prevCode => {
           const newCode = {
             ...prevCode,
             [`code${index}`]: '',
           }
           const combinedValue = Object.values(newCode).join('')
+
+          // Update both internal state and external handler
+          setInternalValue(combinedValue)
           onChange?.(combinedValue)
           return newCode
         })
 
         // Move focus to previous input
-        const prevInput = document.querySelector<HTMLInputElement>(
-          `input[name=code${index}]`
-        )
-        if (prevInput) {
-          prevInput.focus()
-        }
+        setTimeout(() => {
+          if (inputRefs && inputRefs.current && inputRefs.current[index - 1]) {
+            inputRefs.current[index - 1]?.focus()
+          }
+        }, 0)
       } else if (event.key === 'ArrowLeft' && index > 0) {
         // Move focus left
-        const prevInput = document.querySelector<HTMLInputElement>(
-          `input[name=code${index}]`
-        )
-        if (prevInput) {
-          prevInput.focus()
+        event.preventDefault()
+        if (inputRefs && inputRefs.current && inputRefs.current[index - 1]) {
+          inputRefs.current[index - 1]?.focus()
         }
       } else if (event.key === 'ArrowRight' && index < codeLength - 1) {
         // Move focus right
-        const nextInput = document.querySelector<HTMLInputElement>(
-          `input[name=code${index + 2}]`
-        )
-        if (nextInput) {
-          nextInput.focus()
+        event.preventDefault()
+        if (inputRefs && inputRefs.current && inputRefs.current[index + 1]) {
+          inputRefs.current[index + 1]?.focus()
         }
       }
     },
-    [code, codeLength, onChange]
+    [code, codeLength, onChange, inputRefs, setInternalValue]
   )
 
   return {
@@ -124,33 +174,132 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   codeLength = 6,
   isValid,
   onChange,
-  value,
+  value = '',
   'aria-label': ariaLabel,
   'aria-required': ariaRequired,
   'aria-invalid': ariaInvalid,
+  codeSent = false,
+  onVerify,
+  onSendResend,
+  verifyButtonProps = {},
+  sendResendButtonProps = {},
+  showActionButtons = false,
+  showSendResendButton = true,
   ...props
 }) => {
+  // Initialize internal state with the value prop
+  const [internalValue, setInternalValue] = useState(value)
+
+  // Create refs for each input
+  const inputRefs = React.useRef<(HTMLInputElement | null)[]>([])
+
+  // Initialize refs array
+  React.useEffect(() => {
+    inputRefs.current = inputRefs.current.slice(0, codeLength)
+    // Fill with nulls if needed
+    while (inputRefs.current.length < codeLength) {
+      inputRefs.current.push(null)
+    }
+  }, [codeLength])
+
+  // Update internal state when value prop changes
+  useEffect(() => {
+    // Only update if the value actually changed to avoid infinite loops
+    if (internalValue !== value) {
+      setInternalValue(value)
+    }
+  }, [value, internalValue])
+
+  // Custom onChange handler that updates both internal state and calls the external onChange
+  const handleChangeWithState = (newValue: string) => {
+    // Set internal state only if it's changed
+    if (internalValue !== newValue) {
+      setInternalValue(newValue)
+    }
+
+    // Call external onChange if provided
+    if (onChange && newValue !== value) {
+      onChange(newValue)
+    }
+  }
+
   const { handleCodeChange, handleKeyDown } = useCodeConfirmation({
     codeLength,
-    onChange,
+    onChange: handleChangeWithState,
+    inputRefs,
+    setInternalValue, // Pass setInternalValue to ensure direct updates
   })
 
+  // Special document-level handler for left arrow
+  useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'ArrowLeft') {
+        const activeIndex = inputRefs.current.findIndex(
+          ref => ref === document.activeElement
+        )
+        if (activeIndex > 0) {
+          e.preventDefault()
+          inputRefs.current[activeIndex - 1]?.focus()
+        }
+      }
+    }
+
+    document.addEventListener(
+      'keydown',
+      handleGlobalKeyDown as unknown as EventListener
+    )
+    return () => {
+      document.removeEventListener(
+        'keydown',
+        handleGlobalKeyDown as unknown as EventListener
+      )
+    }
+  }, [])
+
+  // Calculate container width based on number of inputs
+  // Each input is 40px + 4px gap (MUI spacing 1) between them
+  const inputAreaWidth = codeLength * 40 + (codeLength - 1) * 8 + 44 // Add 44px for the indicator dot and margin
+
+  // Calculate button container width - ensure minimum width for buttons
+  // Each button should be at least 120px for good UX
+  const minButtonWidth = 120
+  // If only showing the verify button, we need less space
+  const buttonContainerWidth = showSendResendButton
+    ? Math.max(inputAreaWidth, minButtonWidth * 2 + 16) // 16px for gap between buttons
+    : Math.max(inputAreaWidth, minButtonWidth)
+
   // For manual changes (typing digits), also handle auto-focus next field
   const handleChange = (
     event: ChangeEvent<HTMLInputElement>,
     index: number
   ) => {
     const inputValue = event.target.value.replace(/\D/g, '') // Only keep digits
-    if (inputValue.length <= 1) {
-      handleCodeChange(event, index)
-      if (inputValue) {
-        const nextInput = document.querySelector<HTMLInputElement>(
-          `input[name=code${index + 2}]`
-        )
-        if (nextInput) {
-          nextInput.focus()
+
+    // Handle case when user types multiple digits at once
+    if (inputValue.length > 1) {
+      // Take only the last character typed
+      const lastChar = inputValue.charAt(inputValue.length - 1)
+      event.target.value = lastChar
+    }
+
+    // Apply the change to state
+    handleCodeChange(event, index)
+
+    // Only move focus if there's a non-empty value and not the last input
+    if (inputValue && inputValue.length > 0 && index < codeLength - 1) {
+      // Focus next input
+      setTimeout(() => {
+        if (inputRefs.current && inputRefs.current[index + 1]) {
+          inputRefs.current[index + 1]?.focus()
         }
-      }
+      }, 0)
+    } else if (inputValue === '' && index > 0) {
+      // If input is cleared and not the first input, try to focus the previous input
+      setTimeout(() => {
+        if (inputRefs.current && inputRefs.current[index - 1]) {
+          inputRefs.current[index - 1]?.focus()
+        }
+      }, 0)
     }
   }
 
@@ -158,66 +307,154 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
     event: KeyboardEvent<HTMLInputElement>,
     index: number
   ) => {
+    // Direct focus handling for left arrow
+    if (event.key === 'ArrowLeft' && index > 0) {
+      event.preventDefault()
+      if (inputRefs.current && inputRefs.current[index - 1]) {
+        inputRefs.current[index - 1]?.focus()
+      }
+      return
+    }
+
+    // For other keys, use the normal handler
     handleKeyDown(event, index)
   }
 
-  // Safely create an array of string digits
-  const digits: string[] = value
-    ? value.split('')
+  // Safely create an array of string digits from internal state
+  const digits: string[] = internalValue
+    ? internalValue.split('')
     : Array.from({ length: codeLength }, () => '')
 
+  // Check if all code fields are filled
+  const allFieldsFilled =
+    digits.filter(digit => digit !== '' && digit !== undefined).length >=
+    codeLength
+
   return (
     <Box
       display="flex"
-      flexDirection="row"
-      alignItems="center"
+      flexDirection="column"
+      alignItems="flex-start"
       role="group"
       aria-label={ariaLabel || 'Confirmation Code'}
+      width={`${inputAreaWidth}px`}
+      position="relative"
     >
-      <Box display="flex" gap={1}>
-        {Array.from({ length: codeLength }, (_, index) => (
-          <Input
-            key={index}
-            name={`code${index + 1}`}
-            value={digits[index] || ''}
-            inputProps={{
-              maxLength: 1,
-              pattern: '[0-9]*',
-              inputMode: 'numeric',
-              'aria-label': `Code Digit ${index + 1}`,
-              'aria-required': ariaRequired,
-              'aria-invalid': ariaInvalid,
-            }}
-            sx={{
-              border: '1px solid',
-              borderColor: 'black',
-              borderRadius: 1,
-              width: 50,
-              height: 50,
-              input: {
-                textAlign: 'center',
-                color: 'black',
-              },
-            }}
-            onChange={(event: ChangeEvent<HTMLInputElement>) =>
-              handleChange(event, index)
-            }
-            onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
-              handleKeyDownWrapper(event, index)
+      <Box
+        display="flex"
+        justifyContent="space-between"
+        width="100%"
+        position="relative"
+        marginBottom={2}
+      >
+        <Box display="flex" gap={1}>
+          {Array.from({ length: codeLength }, (_, index) => (
+            <Input
+              key={`code-input-${index}-${digits[index] || ''}`}
+              name={`code${index + 1}`}
+              value={digits[index] || ''}
+              inputRef={(el: HTMLInputElement | null) => {
+                inputRefs.current[index] = el
+              }}
+              inputProps={{
+                maxLength: 1,
+                pattern: '[0-9]*',
+                inputMode: 'numeric',
+                'aria-label': `Code Digit ${index + 1}`,
+                'aria-required': ariaRequired,
+                'aria-invalid': ariaInvalid,
+                'data-testid': `code-input-${index + 1}`,
+                'data-index': index,
+              }}
+              sx={{
+                border: '1px solid',
+                borderColor: 'black',
+                borderRadius: 1,
+                width: 40,
+                height: 50,
+                input: {
+                  textAlign: 'center',
+                  color: 'black',
+                },
+              }}
+              onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                handleChange(event, index)
+              }
+              onKeyDown={(event: KeyboardEvent<HTMLInputElement>) =>
+                handleKeyDownWrapper(event, index)
+              }
+              onFocus={() => {
+                inputRefs.current[index]?.focus()
+              }}
+              {...props}
+            />
+          ))}
+        </Box>
+
+        <Box
+          width={20}
+          height={20}
+          borderRadius="50%"
+          bgcolor={isValid ? green.main : red.main}
+          position="static"
+          role="status"
+          aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
+          alignSelf="center"
+          marginRight={2}
+        />
+      </Box>
+
+      {showActionButtons && (
+        <Box
+          display="flex"
+          justifyContent={showSendResendButton ? 'space-between' : 'center'}
+          width={`${buttonContainerWidth}px`}
+          marginTop={1}
+          sx={{
+            // Center the button container if it's wider than input area
+            marginLeft:
+              buttonContainerWidth > inputAreaWidth
+                ? `${-(buttonContainerWidth - inputAreaWidth) / 2}px`
+                : 0,
+          }}
+        >
+          {showSendResendButton && (
+            <CustomButton
+              text={codeSent ? 'Resend Code' : 'Send Code'}
+              fontcolor="white"
+              backgroundcolor="black"
+              width={
+                showSendResendButton
+                  ? `${buttonContainerWidth / 2 - 8}px`
+                  : '100%'
+              }
+              height="40px"
+              {...sendResendButtonProps}
+              onClick={() => {
+                if (onSendResend) void onSendResend()
+              }}
+              // Send/Resend button is always enabled, preserve any custom disableButton setting
+              disableButton={sendResendButtonProps?.disableButton || 'false'}
+            />
+          )}
+          <CustomButton
+            text="Verify Phone"
+            fontcolor="white"
+            backgroundcolor="black"
+            width={
+              showSendResendButton
+                ? `${buttonContainerWidth / 2 - 8}px`
+                : '100%'
             }
-            {...props}
+            height="40px"
+            {...verifyButtonProps}
+            onClick={() => {
+              if (onVerify) void onVerify()
+            }}
+            disableButton={allFieldsFilled ? 'false' : 'true'}
           />
-        ))}
-      </Box>
-      <Box
-        width={20}
-        height={20}
-        borderRadius="50%"
-        bgcolor={isValid ? green.main : red.main}
-        ml={2}
-        role="status"
-        aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
-      />
+        </Box>
+      )}
     </Box>
   )
 }

package/src/components/DataGrid/JotaiProvider.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import React from 'react'
+import { Provider } from 'jotai'
+import { dataGridStore } from './utils/useInitializeGrid'
+
+interface DataGridProviderProps {
+  children: React.ReactNode
+}
+
+export function DataGridProvider({ children }: DataGridProviderProps) {
+  return <Provider store={dataGridStore}>{children}</Provider>
+}

package/src/components/DataGrid/utils/useComputeTableResize.tsx

@@ -10,6 +10,7 @@ import {
 import type { ColumnDef } from '../types'
 import { useAtomValue } from 'jotai'
 import { columnVisibilityAtom } from '../Jotai/atom'
+import { dataGridStore } from './useInitializeGrid'
 
 /**
  * A simple check to see if two arrays of ColumnDef differ
@@ -55,7 +56,9 @@ export function useComputeTableResize({
   const [selectedOverflowField, setSelectedOverflowField] = useState('')
 
   // We rely on Jotai for column visibility
-  const columnVisibility = useAtomValue(columnVisibilityAtom)
+  const columnVisibility = useAtomValue(columnVisibilityAtom, {
+    store: dataGridStore,
+  })
 
   /**
    * measureTextWidth: Use a canvas to measure text length for column headers,

package/src/components/DataGrid/utils/useInitializeGrid.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useRef, useEffect } from 'react'
-import { useSetAtom, useAtomValue } from 'jotai'
+import { useSetAtom, useAtomValue, createStore } from 'jotai'
 import {
   columnsAtom,
   columnVisibilityAtom,
@@ -8,6 +8,9 @@ import {
 } from '../Jotai/atom'
 import type { ColumnDef, RowData } from '../types'
 
+// Create a single shared store instance
+export const dataGridStore = createStore()
+
 interface UseInitializeGridProps {
   columns: ColumnDef[]
   providedRows: RowData[]
@@ -25,9 +28,14 @@ export function useInitializeGrid({
   setRows,
 }: UseInitializeGridProps) {
   // We retrieve or modify atoms here, so that DataGrid doesn't need its own useEffect.
-  const setColumns = useSetAtom(columnsAtom)
-  const columnVisibility = useAtomValue(columnVisibilityAtom)
-  const updateVisibility = useSetAtom(columnVisibilityActions)
+  // Use the custom store instead of the default one
+  const setColumns = useSetAtom(columnsAtom, { store: dataGridStore })
+  const columnVisibility = useAtomValue(columnVisibilityAtom, {
+    store: dataGridStore,
+  })
+  const updateVisibility = useSetAtom(columnVisibilityActions, {
+    store: dataGridStore,
+  })
 
   // We'll track whether we've run the "first-time" logic for columns and visibility
   const initialized = useRef(false)

package/src/components/DataGrid/utils/useManageColumn.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { useAtom, useSetAtom } from 'jotai'
 import { columnVisibilityAtom, columnVisibilityActions } from '../Jotai/atom'
 import type { ColumnDef } from '../types'
+import { dataGridStore } from './useInitializeGrid'
 
 type ColumnVisibilityModel = { [key: string]: boolean }
 
@@ -20,8 +21,12 @@ export const useManageColumn = ({
 }: UseManageColumnProps) => {
   const [tempVisibleColumns, setTempVisibleColumns] =
     useState<ColumnVisibilityModel>({})
-  const [columnVisibility] = useAtom(columnVisibilityAtom)
-  const updateVisibility = useSetAtom(columnVisibilityActions)
+  const [columnVisibility] = useAtom(columnVisibilityAtom, {
+    store: dataGridStore,
+  })
+  const updateVisibility = useSetAtom(columnVisibilityActions, {
+    store: dataGridStore,
+  })
   const [searchInput, setSearchInput] = useState(initialSearchInput)
   const [isAllChecked, setIsAllChecked] = useState(true)
   const initialized = useRef(false)

package/src/components/Field/Dropdown/Searchable/index.tsx

@@ -565,8 +565,8 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
   const getFilteredOptions = React.useCallback(() => {
     const currentInputVal = inputValue.trim()
 
-    // HISTORY TAB
-    if (activeTab === 1) {
+    // HISTORY TAB - only apply when variant is complex
+    if (activeTab === 1 && variant === 'complex') {
       if (combinedHistory.length === 0) {
         // Show a placeholder message if no history
         return [
@@ -654,7 +654,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     }
 
     return filteredOpts
-  }, [inputValue, combinedHistory, options, activeTab])
+  }, [inputValue, combinedHistory, options, activeTab, variant])
 
   // Create the footer component for the dropdown with tabs
   const ListboxFooter = React.forwardRef<HTMLDivElement>((_, ref) => (
@@ -733,7 +733,7 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
         style={{ pointerEvents: 'auto' }}
       >
         <ul {...other}>{children}</ul>
-        <ListboxFooter />
+        {variant === 'complex' && <ListboxFooter />}
       </div>
     )
   })
@@ -747,6 +747,13 @@ const SearchableDropdown: React.FC<SearchableDropdownProps> = ({
     [getFilteredOptions]
   )
 
+  // Ensure activeTab is always 0 for simple variant
+  useEffect(() => {
+    if (variant === 'simple' && activeTab !== 0) {
+      setActiveTab(0)
+    }
+  }, [variant, activeTab])
+
   return (
     <StyledFormControl
       error={error}

package/src/components/ProjectBoard/index.tsx

@@ -4,6 +4,7 @@ import React, { useMemo, useEffect, useState, useCallback } from 'react'
 import { Box, Stack } from '@mui/material'
 import { useAtom } from 'jotai'
 import { columnsAtom } from './jotai/atom'
+import { JotaiProvider } from './jotai/provider'
 
 import Toolbar from '../Toolbar'
 // Removed old generic AddTask import
@@ -57,7 +58,7 @@ function mergeColumnsAndTasks(
   })
 }
 
-function ProjectBoard({
+function ProjectBoardContent({
   variant,
   boardType,
   columns,
@@ -158,7 +159,7 @@ function ProjectBoard({
       setColumnState(newCols)
       setAddTaskOpen(false)
 
-      // 5.b) Also call the parent’s onAdd, passing the same newTask data
+      // 5.b) Also call the parent's onAdd, passing the same newTask data
       onAdd(newTask)
     },
     [columnState, boardType, setColumnState, onAdd]
@@ -460,4 +461,13 @@ function ProjectBoard({
   )
 }
 
+// Wrap the component with our custom JotaiProvider to avoid the "multiple instances" error
+function ProjectBoard(props: ProjectBoardProps) {
+  return (
+    <JotaiProvider>
+      <ProjectBoardContent {...props} />
+    </JotaiProvider>
+  )
+}
+
 export default React.memo(ProjectBoard)