@licklist/design 0.78.5-dev.87 → 0.78.5-dev.9

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,6 +26,7 @@ function RegisterComponent({
 }: RegisterComponentProps) {
   const { t } = useTranslation('User')
   const request = useContext(RequestContext)
+  const notification = useNotification()
   const auth = useAuth()
   const user = useUser()
   const invite = useInvite()
@@ -47,7 +48,7 @@ function RegisterComponent({
   }
 
   const handleError = (error: Error) => {
-    showAlert({ type: 'error',
+    notification.danger({
       title: 'Error',
       message: error.message,
     })
@@ -84,7 +85,7 @@ function RegisterComponent({
 
     invite.clearInvitation()
 
-    showAlert({ type: 'success',
+    notification.success({
       title: 'Success',
       message: t('Notification:registeredSuccessfully'),
     })
@@ -100,6 +101,8 @@ function RegisterComponent({
         <h6 className='text-center'>
           <Trans t={t} i18nKey='registerPromo'>
             Fill out the form below to sign up for {{ name: t('bookedit') }}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             . Already signed up? Then just <Link to='/login'>Log in</Link>.
           </Trans>
         </h6>

package/src/auth/Register/RegisterFormComponent.tsx

@@ -400,10 +400,14 @@ function RegisterFormComponent({
           <Trans t={t} i18nKey='User:agreementsPromo'>
             By creating an account, I agree to {{ name: t('User:bookedit') }}
             &apos;s{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/terms' className={[isLoading && 'disabled'].join(' ')}>
               terms of service
             </Link>{' '}
             and{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/privacy' className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>

package/src/auth/ResetPassword/ResetPassword.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
+import { Router } from '../Router'
 import { ResetPasswordComponent } from './ResetPasswordComponent'
 import {
   ResetPasswordFormComponent,
@@ -14,4 +15,10 @@ export const ResetPassword: Story<{}> = (args) => (
 )
 export const ResetPasswordForm: Story<ResetPasswordFormComponentProps> = (
   args,
-) => <ResetPasswordFormComponent {...args} />
+) => (
+  <>
+    <Router>
+      <ResetPasswordFormComponent {...args} />
+    </Router>
+  </>
+)

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -1,4 +1,3 @@
-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'
@@ -6,6 +5,7 @@ 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,6 +16,7 @@ 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)
@@ -23,7 +24,7 @@ function ResetPasswordComponent() {
   const userApiService = useUserApi(request)
 
   const handleError = (error: ApiServiceError<{ message: string }>) => {
-    showAlert({ type: 'error',
+    notification.danger({
       title: t('App:error'),
       message: error.response?.data?.message,
     })
@@ -39,7 +40,7 @@ function ResetPasswordComponent() {
       return
     }
 
-    showAlert({ type: 'success',
+    notification.success({
       title: 'Success',
       message: t('Notification:passwordResetedSuccessfully'),
     })

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -97,6 +97,8 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:signinPromo'>
             Already a user?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/login' className={[isLoading && 'disabled'].join(' ')}>
               Sign in
             </Link>
@@ -106,6 +108,8 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:loginPromo'>
             Don&apos;t have an account?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link
               to='/register'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Social/Social.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
+import { Router } from '../Router'
 import { SocialCallbackComponent } from './SocialCallbackComponent'
 import {
   SocialFormComponent,
@@ -13,5 +14,9 @@ export const SocialForm: Story<SocialFormComponentProps> = (args) => (
   <SocialFormComponent {...args} />
 )
 export const SocialCallback: Story<{}> = (args) => (
-  <SocialCallbackComponent {...args} />
+  <>
+    <Router>
+      <SocialCallbackComponent {...args} />
+    </Router>
+  </>
 )

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -1,4 +1,3 @@
-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'
@@ -40,7 +39,7 @@ function SocialCallbackComponent() {
   // Handle social callback
   useEffect(() => {
     const handleError = (error: Error) => {
-      showAlert({ type: 'error',
+      notification.danger({
         title: 'Error',
         message: error.message,
       })
@@ -73,7 +72,7 @@ function SocialCallbackComponent() {
       // Store user profile
       user.login(profile.message as IUser)
 
-      showAlert({ type: 'success',
+      notification.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,12 +20,13 @@ 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) => {
-    showAlert({ type: 'error',
+    notification.danger({
       title: 'Error',
       message: error.message,
     })

package/src/calendar/Calendar.stories.tsx

@@ -1,5 +1,5 @@
 import { DateTime } from 'luxon'
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
 import { Calendar, CalendarProps } from './Calendar'
 import { getMonthCalendarDates } from './utils/index'
 

package/src/collapsible-input-group/CollapsibleInputGroup.stories.tsx

@@ -1,8 +1,5 @@
-import React from 'react'
-import { Meta, StoryFn } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
 import { Accordion } from 'react-bootstrap'
-import { useQueryClient } from 'react-query'
-import { TimeZonePath } from '@licklist/plugins'
 import { FormProvider, useForm } from 'react-hook-form'
 import {
   CategoriesInput,
@@ -41,7 +38,6 @@ const defaultValues: CategoriesInputValues &
     state: 'Essex',
     country: 'GB',
   },
-  timeZoneId: '',
   workingHours: [
     { start: '08:00', end: '18:00', description: 'Description' },
     undefined,
@@ -49,48 +45,12 @@ const defaultValues: CategoriesInputValues &
   ],
 }
 
-// Mock timezone data for Storybook
-const mockTimezones = [
-  { id: 1, name: 'Europe/London' },
-  { id: 2, name: 'America/New_York' },
-  { id: 3, name: 'America/Los_Angeles' },
-  { id: 4, name: 'Europe/Paris' },
-  { id: 5, name: 'Asia/Tokyo' },
-]
-
-// Decorator to mock timezone query data
-const withMockedTimezones = (Story) => {
-  const QueryClientWrapper = () => {
-    const queryClient = useQueryClient()
-
-    // Pre-populate the query cache with mock data before render
-    // Try multiple possible query key formats
-    React.useLayoutEffect(() => {
-      const possibleKeys = [
-        ['/api/timezones', 'all'],
-        ['timezones', '/api/timezones', 'all'],
-        ['timeZone', '/api/timezones'],
-        ['/api/timezones'],
-      ]
-
-      possibleKeys.forEach((key) => {
-        queryClient.setQueryData(key, mockTimezones)
-      })
-    }, [queryClient])
-
-    return <Story />
-  }
-
-  return <QueryClientWrapper />
-}
-
 export default {
   title: 'CollapsibleInputGroup',
   component: CollapsibleInputGroup,
-  decorators: [withMockedTimezones],
 } as Meta
 
-const Template: StoryFn<CollapsibleInputGroupProps> = (args) => {
+const Template: Story<CollapsibleInputGroupProps> = (args) => {
   const form = useForm({ defaultValues })
   return (
     <FormProvider {...form}>
@@ -117,41 +77,13 @@ Categories.args = {
   label: 'Categories',
 }
 
-// Location-specific decorator with better query mocking
-const withLocationMock = (Story) => {
-  const LocationWrapper = () => {
-    const queryClient = useQueryClient()
-    const path = '/api/timezones' as TimeZonePath
-
-    // Set query data synchronously before first render
-    // Try all possible query key formats
-    const queryKeys = [
-      [path, 'all'],
-      ['timezones', path, 'all'],
-      ['timeZone', path],
-      [path],
-      ['useTimeZoneApi', path, 'all'],
-    ]
-
-    queryKeys.forEach((key) => {
-      queryClient.setQueryData(key, mockTimezones)
-    })
-
-
-    return <Story />
-  }
-
-  return <LocationWrapper />
-}
-
 export const Location = Template.bind({})
 Location.args = {
   eventKey: 'location',
-  children: <LocationInput path={'/api/timezones' as TimeZonePath} />,
-  description: <LocationInputDescription path={'/api/timezones' as TimeZonePath} />,
+  children: <LocationInput />,
+  description: <LocationInputDescription />,
   label: 'Location',
 }
-Location.decorators = [withLocationMock]
 
 export const WorkingHours = Template.bind({})
 WorkingHours.args = {

package/src/custom-fields/CustomFields.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { uniqueId } from 'lodash'
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
 import { FieldSet } from '@licklist/core/dist/DataMapper/Order/FieldSetDataMapper'
 
 import {

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

@@ -1,4 +1,3 @@
-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'
@@ -18,6 +17,7 @@ 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,6 +85,7 @@ export const CustomFieldSet = ({
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
+  const notification = useNotification()
   const { fields, append, remove } = useFieldArray({
     control,
     name: CUSTOM_FIELDS,
@@ -97,12 +98,11 @@ export const CustomFieldSet = ({
 
     if (!response) return
 
-    showAlert({ type: 'success',
+    notification.success({
       title: t('App:success'),
       message: t('Notification:createSuccessfully', {
         argument: t('customField'),
       }),
-      mount: 'global'
     })
 
     setFieldSets((prevFieldSets) => {
@@ -124,12 +124,11 @@ export const CustomFieldSet = ({
     if (fieldSet.id !== null) {
       await onFieldSetDelete(fieldSet)
 
-      showAlert({ type: 'success',
+      notification.success({
         title: t('App:success'),
         message: t('Notification:theRemovedSuccessfully', {
           argument: t('customField'),
         }),
-        mount: 'global'
       })
     }
 

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
 import { CustomerFilter, CustomerFilterProps } from './CustomerFilter'
 
 export default {

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
 import { DateTime } from 'luxon'
 import { DateTimeButton, DateTimeButtonProps, Variant } from './DateTimeButton'
 

package/src/error/Error.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react-vite'
+import { Meta, Story } from '@storybook/react'
 import { ErrorFallback, ErrorFallbackProps } from './ErrorFallback'
 
 export default {

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -159,6 +159,10 @@ export function IntervalInput({
             {formattedDuration && `lasts ${formattedDuration}`}
           </Form.Text>
         </Form.Group>
+
+        <Form.Control.Feedback type='invalid'>
+            {errors.end?.message}
+         </Form.Control.Feedback>
       </Form.Row>
       {start && (
         <Form.Group controlId={recurrentId}>

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Meta, Story } from '@storybook/react-vite'
-// TODO: Replace knobs with controls
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
 
 import {
   OPERATIONAL_COST_CUSTOMER,
@@ -1063,8 +1063,7 @@ const defaultProductSets = [
 
 export const Default: Story<EditEventFormProps> = (args) => {
   // @todo: rewrite story to use actions instead of addon-knobs
-  // TODO: Replace with Storybook controls
-  const hasPermission = true
+  const hasPermission = boolean('hasPermission', true)
   const [editProductSetId, setEditProductSetId] = useState<string>()
   return (
     <div className='edit-event-dialog'>

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -41,7 +41,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { Meta, Story } from '@storybook/react-vite'
-// TODO: Replace knobs with controls
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
 
 import {
   EditRecurrentEventModal,
@@ -14,8 +14,7 @@ export default {
 
 export const Default: Story<EditRecurrentEventModalProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false)
-  // TODO: Replace with Storybook controls
-  const isEditRecurrentEventModal = false
+  const isEditRecurrentEventModal = boolean('isEditRecurrentEventModal', false)
 
   return (
     <div>
@@ -32,7 +31,7 @@ export const Default: Story<EditRecurrentEventModalProps> = (args) => {
 
 Default.args = {
   isOpen: false,
-  onHide: () => { },
+  onHide: () => {},
   title: 'Some title',
   onSubmit: (data) => console.log(data),
 }