@licklist/design 0.78.5-dev.2 → 0.78.5-dev.21

package/src/CustomDatePicker/CustomDatePicker.tsx

@@ -0,0 +1,252 @@
+import { TextInput } from '@mantine/core'
+import { useEffect, useState } from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+import { DateTime } from 'luxon'
+import { useTranslation } from 'react-i18next'
+
+type CustomDatePickerProps = {
+  name: string
+  error?: string
+  label?: string
+  showAge?: boolean
+  required?: boolean
+}
+
+export function CustomDatePicker({
+  name, 
+  error, 
+  showAge = true,
+  required = true 
+}: CustomDatePickerProps) {
+  const { t } = useTranslation()
+  const { control, setValue, watch, getValues, trigger, formState } = useFormContext()
+  const [age, setAge] = useState<number | null>(null)
+  const [localError, setLocalError] = useState<string | null>(null)
+  
+  // Get current field values
+  const day = watch(`${name}_day`) || ''
+  const month = watch(`${name}_month`) || ''
+  const year = watch(`${name}_year`) || ''
+  
+  // Initialize values from existing date
+  useEffect(() => {
+    const existingDate = getValues(name)
+    
+    if (existingDate instanceof Date && !day && !month && !year) {
+      const dateTime = DateTime.fromJSDate(existingDate)
+      if (dateTime.isValid) {
+        setValue(`${name}_day`, dateTime.day.toString().padStart(2, '0'))
+        setValue(`${name}_month`, dateTime.month.toString().padStart(2, '0'))
+        setValue(`${name}_year`, dateTime.year.toString())
+      }
+    }
+  }, [name, setValue, getValues, day, month, year])
+  
+  // Check for empty fields after submit attempt
+  useEffect(() => {
+    if (formState.isSubmitted && required) {
+      const hasEmptyFields = !day || !month || !year
+      
+      if (hasEmptyFields) {
+        setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
+        // Set the main field to null to trigger form validation
+        setValue(name, null, { shouldValidate: true })
+      } else {
+        setLocalError(null)
+      }
+    }
+  }, [formState.isSubmitted, day, month, year, required, name, setValue, t])
+  
+  // Calculate age and validate date when all fields are filled
+  useEffect(() => {
+    if (day && month && year) {
+      try {
+        // Create a date object
+        const dateObj = DateTime.fromObject({ 
+          day: parseInt(day, 10), 
+          month: parseInt(month, 10), 
+          year: parseInt(year, 10) 
+        })
+        
+        // Only proceed if date is valid
+        if (dateObj.isValid) {
+          // Set the main field value
+          setValue(name, dateObj.toJSDate(), { shouldValidate: true })
+          setLocalError(null)
+          
+          // Calculate age
+          if (showAge) {
+            const now = DateTime.now()
+            const diff = now.diff(dateObj, 'years')
+            setAge(Math.floor(diff.years))
+          }
+        } else {
+          setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
+          setValue(name, null, { shouldValidate: true })
+          setAge(null)
+        }
+      } catch (err) {
+        // If any parsing fails, just reset the age display
+        setLocalError(t('Validation:fieldInvalid', { attribute: t('App:dateOfBirth') }))
+        setValue(name, null, { shouldValidate: true })
+        setAge(null)
+      }
+    } else if (formState.isSubmitted && required) {
+      // If form was submitted and fields are required but not all filled
+      setLocalError(t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') }))
+      setValue(name, null, { shouldValidate: true })
+      setAge(null)
+    } else {
+      // Reset if not all fields are filled but not submitted yet
+      setValue(name, null, { shouldValidate: false })
+      setAge(null)
+    }
+  }, [day, month, year, name, setValue, showAge, formState.isSubmitted, required, t])
+
+  // After user completes all fields, validate the form
+  useEffect(() => {
+    if (day && month && year) {
+      trigger(name)
+    }
+  }, [day, month, year, name, trigger])
+
+  // Display either the form error or our local error
+  const displayError = error || localError
+
+  return (
+    <div className="tw-w-full">
+      <div className="tw-flex tw-flex-col">
+        <div className="tw-mb-2 tw-flex tw-items-center tw-justify-between">
+          <label className="tw-font-semibold">
+            {t('App:dateOfBirth')}
+            {required && <span className="tw-ml-1 tw-text-red-500"></span>}
+          </label>
+          {age !== null && (
+            <span className="tw-text-sm tw-text-gray-600">
+              {t('App:Age')}: {age}
+            </span>
+          )}
+        </div>
+        
+        <div className="tw-flex tw-flex-row tw-gap-4">
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Day')}</label>
+            <Controller
+              control={control}
+              name={`${name}_day`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="DD"
+                  maxLength={2}
+                  error={!!displayError}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate and format on blur
+                    let value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      if (num < 1) value = '01'
+                      else if (num > 31) value = '31'
+                      else value = num.toString().padStart(2, '0')
+                    }
+                    field.onChange(value)
+                  }}
+                />
+              )}
+            />
+          </div>
+          
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Month')}</label>
+            <Controller
+              control={control}
+              name={`${name}_month`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="MM"
+                  maxLength={2}
+                  error={!!displayError}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate and format on blur
+                    let value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      if (num < 1) value = '01'
+                      else if (num > 12) value = '12'
+                      else value = num.toString().padStart(2, '0')
+                    }
+                    field.onChange(value)
+                  }}
+                />
+              )}
+            />
+          </div>
+          
+          <div className="tw-w-1/3">
+            <label className="tw-mb-1 tw-block tw-text-sm">{t('App:Year')}</label>
+            <Controller
+              control={control}
+              name={`${name}_year`}
+              defaultValue=""
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder="YYYY"
+                  maxLength={4}
+                  error={!!displayError}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    field.onChange(value)
+                  }}
+                  onBlur={(e) => {
+                    // Validate on blur
+                    const value = e.target.value.replace(/[^0-9]/g, '')
+                    if (value) {
+                      const num = parseInt(value, 10)
+                      const currentYear = new Date().getFullYear()
+                      if (num > currentYear) {
+                        field.onChange(currentYear.toString())
+                      } else if (num < 1900) {
+                        field.onChange('1900')
+                      }
+                    }
+                  }}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+      
+      {/* Hidden field to store the actual date value */}
+      <Controller
+        control={control}
+        name={name}
+        defaultValue={null}
+        rules={{
+          validate: value => {
+            if (required && !value) {
+              return t('Validation:fieldRequired', { attribute: t('App:dateOfBirth') })
+            }
+            return true
+          }
+        }}
+        render={() => <input type="hidden" />}
+      />
+    </div>
+  )
+}

package/src/auth/ChangePassword/ChangePasswordComponent.tsx

@@ -1,3 +1,4 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { useContext, useEffect, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
@@ -6,7 +7,6 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { ApiServiceError } from '@licklist/core/dist/Api/ApiService'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import { UserChangePasswordRequest } from '@licklist/plugins/dist/types/Request/UserChangePasswordRequest'
 import { ROUTES } from '@licklist/core/dist/Config'
 import { ChangePasswordFormComponent } from './ChangePasswordFormComponent'
@@ -16,7 +16,6 @@ import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 function ChangePasswordComponent() {
   const { t } = useTranslation(['Notification', 'User', 'App'])
   const request = useContext(RequestContext)
-  const notification = useNotification()
   const { search } = useLocation()
   const email = new URLSearchParams(search).get('email')
   const token = new URLSearchParams(search).get('token')
@@ -27,7 +26,7 @@ function ChangePasswordComponent() {
   const userApiService = useUserApi(request)
 
   const handleError = (error: ApiServiceError<{ message: string }>) => {
-    notification.danger({
+    showAlert({ type: 'error',
       title: t('App:error'),
       message: error.response?.data?.message,
     })
@@ -45,7 +44,7 @@ function ChangePasswordComponent() {
       return
     }
 
-    notification.success({
+    showAlert({ type: 'success',
       title: 'Success',
       message: t('Notification:passwordChangedSuccessfully'),
     })

package/src/auth/Layout/UserNavDropDownToggle.tsx

@@ -13,7 +13,7 @@ function UserNavDropDownToggle(props: UserNavDropDownToggleProps) {
   return (
     <>
       <span className='header-user-name mr-2 d-none d-lg-inline text-gray-600 small'>
-        <Trans t={t} i18nKey='userPromo'>
+        <Trans t={t} i18nKey='userPromo'  values={{ name: user?.first_name }}>
           Hi, {{ name: user?.first_name }}
         </Trans>
       </span>

package/src/auth/Login/LoginComponent.tsx

@@ -1,11 +1,11 @@
 import { useContext, useEffect, useState } from 'react'
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link, useNavigate } from 'react-router-dom'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import useInvite from '@licklist/plugins/dist/context/user/hooks/useInvite'
@@ -30,7 +30,6 @@ const LoginComponent = ({
 }: LoginComponentProps) => {
   const { t } = useTranslation(['Notification', 'User'])
   const request = useContext(RequestContext)
-  const notification = useNotification()
   const auth = useAuth()
   const user = useUser()
   const invite = useInvite()
@@ -42,9 +41,10 @@ const LoginComponent = ({
   const userApiService = useUserApi(request)
 
   const handleError = (error: any) => {
-    notification.danger({
+    showAlert({ type: 'error',
       title: 'Error',
       message: error?.response?.data?.message || error.message,
+      timeout: 10000,
     })
   }
 
@@ -82,9 +82,11 @@ const LoginComponent = ({
     user.login(profile.data as IUser)
     invite.clearInvitation()
 
-    notification.success({
+    showAlert({ type: 'success',
       title: 'Success',
       message: t('Notification:loggedSuccessfully'),
+      timeout: 10000,
+      mount: 'global',
     })
 
     navigate('/', { replace: true })
@@ -112,7 +114,7 @@ const LoginComponent = ({
             <Trans t={t} i18nKey='loginPromo'>
               {/* TODO fix issue react router types
                @ts-expect-error */}
-              Don&apos;t have account? <Link to='/register'>Sign up</Link>.
+              Don&apos;t have account? <Link to='/register'>Sign uuup</Link>.
             </Trans>
           </h6>
         )}

package/src/auth/Register/RegisterComponent.tsx

@@ -1,9 +1,9 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { useContext, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link, useNavigate } from 'react-router-dom'
 import { Row, Col } from 'react-bootstrap'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import useAuth from '@licklist/plugins/dist/context/user/hooks/useAuth'
 import useInvite from '@licklist/plugins/dist/context/user/hooks/useInvite'
@@ -26,7 +26,6 @@ function RegisterComponent({
 }: RegisterComponentProps) {
   const { t } = useTranslation('User')
   const request = useContext(RequestContext)
-  const notification = useNotification()
   const auth = useAuth()
   const user = useUser()
   const invite = useInvite()
@@ -48,7 +47,7 @@ function RegisterComponent({
   }
 
   const handleError = (error: Error) => {
-    notification.danger({
+    showAlert({ type: 'error',
       title: 'Error',
       message: error.message,
     })
@@ -85,7 +84,7 @@ function RegisterComponent({
 
     invite.clearInvitation()
 
-    notification.success({
+    showAlert({ type: 'success',
       title: 'Success',
       message: t('Notification:registeredSuccessfully'),
     })

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -1,3 +1,4 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { useContext, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
@@ -5,7 +6,6 @@ import { useTranslation } from 'react-i18next'
 import { ApiServiceError } from '@licklist/core/dist/Api/ApiService'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import { UserResetPasswordRequest } from '@licklist/plugins/dist/types/Request/UserResetPasswordRequest'
 import { ROUTES } from '@licklist/core/dist/Config'
 import { useNavigate } from 'react-router-dom'
@@ -16,7 +16,6 @@ import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 function ResetPasswordComponent() {
   const { t } = useTranslation(['Notification', 'User', 'App'])
   const request = useContext(RequestContext)
-  const notification = useNotification()
   const navigate = useNavigate()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -24,7 +23,7 @@ function ResetPasswordComponent() {
   const userApiService = useUserApi(request)
 
   const handleError = (error: ApiServiceError<{ message: string }>) => {
-    notification.danger({
+    showAlert({ type: 'error',
       title: t('App:error'),
       message: error.response?.data?.message,
     })
@@ -40,7 +39,7 @@ function ResetPasswordComponent() {
       return
     }
 
-    notification.success({
+    showAlert({ type: 'success',
       title: 'Success',
       message: t('Notification:passwordResetedSuccessfully'),
     })

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -1,3 +1,4 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { useContext, useEffect, useState } from 'react'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
@@ -39,7 +40,7 @@ function SocialCallbackComponent() {
   // Handle social callback
   useEffect(() => {
     const handleError = (error: Error) => {
-      notification.danger({
+      showAlert({ type: 'error',
         title: 'Error',
         message: error.message,
       })
@@ -72,7 +73,7 @@ function SocialCallbackComponent() {
       // Store user profile
       user.login(profile.message as IUser)
 
-      notification.success({
+      showAlert({ type: 'success',
         title: 'Success',
         message: t('Notification:loggedSuccessfully'),
       })

package/src/auth/Social/SocialFormComponent.tsx

@@ -1,6 +1,6 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 /* eslint-disable @typescript-eslint/ban-types */
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
 import useSocialApi from '@licklist/plugins/dist/hooks/Api/useSocialApi'
 import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
@@ -20,13 +20,12 @@ function SocialFormComponent(props: SocialFormComponentProps) {
   const { isLoading, setIsLoading } = props
 
   const request = useContext(RequestContext)
-  const notification = useNotification()
   const { t } = useTranslation(['App'])
 
   const socialService = useSocialApi(request)
 
   const handleError = (error: Error) => {
-    notification.danger({
+    showAlert({ type: 'error',
       title: 'Error',
       message: error.message,
     })

package/src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -1,3 +1,4 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { createElement, useState, useEffect, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button, Form } from 'react-bootstrap'
@@ -17,7 +18,6 @@ import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permi
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 
 import {
   CreateSortableListItem,
@@ -85,7 +85,6 @@ export const CustomFieldSet = ({
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
-  const notification = useNotification()
   const { fields, append, remove } = useFieldArray({
     control,
     name: CUSTOM_FIELDS,
@@ -98,7 +97,7 @@ export const CustomFieldSet = ({
 
     if (!response) return
 
-    notification.success({
+    showAlert({ type: 'success',
       title: t('App:success'),
       message: t('Notification:createSuccessfully', {
         argument: t('customField'),
@@ -124,7 +123,7 @@ export const CustomFieldSet = ({
     if (fieldSet.id !== null) {
       await onFieldSetDelete(fieldSet)
 
-      notification.success({
+      showAlert({ type: 'success',
         title: t('App:success'),
         message: t('Notification:theRemovedSuccessfully', {
           argument: t('customField'),

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -86,6 +86,7 @@ export const EditRecurrentEventModal = ({
       contentClassName='rounded'
     >
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
+        {/* @ts-ignore */}
         <Modal.Header className='border-0'>
           <Modal.Title as='h6'>{title}</Modal.Title>
           <Button

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -39,6 +39,7 @@ export const EventStatisticModal = ({
       contentClassName='rounded'
       className='event-statistic-modal'
     >
+      {/* @ts-ignore */}
       <Modal.Header>
         <Modal.Title as='h6'>{title ?? t('eventStatistic')}</Modal.Title>
         <Button

package/src/file-upload/FileUpload.tsx

@@ -1,8 +1,8 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 /* eslint-disable no-return-assign */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { Attachment } from '@licklist/core/dist/DataMapper/Notification/AttachmentDataMapper'
 import { AttachmentMetadata } from '@licklist/core/dist/DataMapper/Notification/AttachmentMetadataDataMapper'
@@ -153,7 +153,6 @@ export const useFileUpload = ({
   const [files, setFiles] = useState<File[] | null>(null)
   const [isDragged, setIsDragged] = useState(false)
 
-  const notification = useNotification()
   const { t } = useTranslation('Design')
 
   const uploadFile = (file: File) => {
@@ -183,7 +182,7 @@ export const useFileUpload = ({
       if (isExtensionValid) {
         uploadFile(file)
       } else {
-        notification.danger({
+        showAlert({ type: 'error',
           title: t('fileNotUploaded', { fileName: file.name }),
           message: t('invalidExtension', { extension: fileExtension }),
         })