@licklist/design 0.78.4 → 0.78.5-dev.1

package/src/auth/Layout/UserNavDropDown.tsx

@@ -1,24 +1,23 @@
 import Dropdown from 'react-bootstrap/Dropdown'
 import { useTranslation } from 'react-i18next'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
+import { useNavigate } from 'react-router-dom'
 
 function UserNavDropDown() {
   const { t } = useTranslation('App')
   const user = useUser()
+  const navigate = useNavigate()
 
   const onLogoutHandler = () => {
     user.logout()
 
-    RouteService.redirectTo('/')
+    navigate('/')
   }
 
   return (
-    <>
-      <Dropdown.Item eventKey='1' onClick={onLogoutHandler}>
-        {t('logout')}
-      </Dropdown.Item>
-    </>
+    <Dropdown.Item eventKey='1' onClick={onLogoutHandler}>
+      {t('logout')}
+    </Dropdown.Item>
   )
 }
 

package/src/auth/Login/LoginComponent.tsx

@@ -2,20 +2,18 @@ import { useContext, useEffect, useState } from 'react'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+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'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { UserLoginRequest } from '@licklist/plugins/dist/types/Request/UserLoginRequest'
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
 import { SocialFormComponent } from '../Social/SocialFormComponent'
 import { LoginFormComponent } from './LoginFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 import Logo from '../../logo/Logo'
@@ -37,6 +35,8 @@ const LoginComponent = ({
   const user = useUser()
   const invite = useInvite()
 
+  const navigate = useNavigate()
+
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
   const userApiService = useUserApi(request)
@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error.message,
+      message: error?.response?.data?.message || error.message,
     })
   }
 
@@ -87,7 +87,7 @@ const LoginComponent = ({
       message: t('Notification:loggedSuccessfully'),
     })
 
-    RouteService.redirectTo('/')
+    navigate('/', { replace: true })
   }
 
   useEffect(() => {
@@ -95,55 +95,51 @@ const LoginComponent = ({
       return
     }
 
-    RouteService.redirectTo('/')
+    navigate('/')
   }, [user.profile, auth.secrets])
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('User:loginTitle')}</h1>
-
-            <div className='login d-flex pb-4 justify-content-center'>
-              <Logo logo={<BookeditLogoSvg />} />
-            </div>
-
-            {!hideSignUpLink && (
-              <h6 className='text-center'>
-                <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>.
-                </Trans>
-              </h6>
-            )}
-
-            <FormCard>
-              {showSocialLinks && (
-                <>
-                  <SocialFormComponent
-                    isLoading={isLoading}
-                    setIsLoading={setIsLoading}
-                  />
-
-                  <hr className='mb-2' />
-                </>
-              )}
-
-              <LoginFormComponent
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('User:loginTitle')}</h1>
+
+        <div className='login d-flex pb-4 justify-content-center'>
+          <Logo logo={<BookeditLogoSvg />} />
+        </div>
+
+        {!hideSignUpLink && (
+          <h6 className='text-center'>
+            <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>.
+            </Trans>
+          </h6>
+        )}
+
+        <FormCard>
+          {showSocialLinks && (
+            <>
+              <SocialFormComponent
                 isLoading={isLoading}
                 setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-                invitation={invite.invitation}
               />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+              <hr className='mb-2' />
+            </>
+          )}
+
+          <LoginFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+            invitation={invite.invitation}
+          />
+
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/Logout/Logout.stories.tsx

@@ -1,31 +1,29 @@
 import { useEffect } from 'react'
-import { Route, Switch, MemoryRouter } from 'react-router-dom'
+import { Route, MemoryRouter, useNavigate, Routes } from 'react-router-dom'
 import { Meta, Story } from '@storybook/react'
 import UserProvider from '@licklist/plugins/dist/context/user/providers/UserProvider'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
-import { Logout } from './Logout'
 import { Button } from 'react-bootstrap'
+import { Logout } from './Logout'
 
 export default {
   title: 'Auth/Logout',
 } as Meta
 
 export const LogoutComponent: Story = () => (
-  <>
-    <UserProvider>
-      <MemoryRouter initialIndex={0} initialEntries={['/', '/logout']}>
-        <Switch>
-          <Route path='/' exact component={LoggedPage} />
-          <Route path='/logout' component={LogoutWrapper} />
-        </Switch>
-      </MemoryRouter>
-    </UserProvider>
-  </>
+  <UserProvider>
+    <MemoryRouter initialIndex={0} initialEntries={['/', '/logout']}>
+      <Routes>
+        <Route path='/' element={LoggedPage} />
+        <Route path='/logout' element={LogoutWrapper} />
+      </Routes>
+    </MemoryRouter>
+  </UserProvider>
 )
 
 function LoggedPage() {
   const user = useUser()
+  const navigate = useNavigate()
 
   useEffect(() => {
     user.login({
@@ -43,7 +41,7 @@ function LoggedPage() {
   }, [])
 
   const redirectToLogout = () => {
-    RouteService.redirectTo('/logout')
+    navigate('/logout')
   }
 
   return (

package/src/auth/Logout/Logout.tsx

@@ -1,15 +1,16 @@
 import { useEffect } from 'react'
 import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
+import { useNavigate } from 'react-router-dom'
 import { BlockLoader } from '../../static'
 
 export const Logout = () => {
   const user = useUser()
+  const navigate = useNavigate()
 
   useEffect(() => {
     user.logout()
-    RouteService.redirectTo('/')
-  }, [user])
+    navigate('/')
+  }, [navigate, user])
 
   return <BlockLoader />
 }

package/src/auth/Register/RegisterComponent.tsx

@@ -1,9 +1,8 @@
 import { useContext, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import { Row, Col } from 'react-bootstrap'
 import RequestContext from '@licklist/plugins/dist/context/app/RequestContext'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 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'
@@ -13,10 +12,8 @@ import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
 import { UserRegisterRequest } from '@licklist/plugins/dist/types/Request/UserRegisterRequest'
 import { ErrorHandlerFn } from '@licklist/core/dist/Api/ApiService'
-
 import { RegisterFormComponent } from './RegisterFormComponent'
 import { SocialFormComponent } from '../Social/SocialFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
@@ -33,6 +30,7 @@ function RegisterComponent({
   const auth = useAuth()
   const user = useUser()
   const invite = useInvite()
+  const navigate = useNavigate()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [serverErrors, setServerErrors] = useState(null)
@@ -92,51 +90,47 @@ function RegisterComponent({
       message: t('Notification:registeredSuccessfully'),
     })
 
-    RouteService.redirectTo('/')
+    navigate('/')
   }
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('registerTitle')}</h1>
-
-            <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
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('registerTitle')}</h1>
+
+        <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>
-
-            <FormCard>
-              {showSocialLinks && (
-                <>
-                  <SocialFormComponent
-                    isLoading={isLoading}
-                    setIsLoading={setIsLoading}
-                  />
-
-                  <hr className='mb-2' />
-                </>
-              )}
-
-              <RegisterFormComponent
+            . Already signed up? Then just <Link to='/login'>Log in</Link>.
+          </Trans>
+        </h6>
+
+        <FormCard>
+          {showSocialLinks && (
+            <>
+              <SocialFormComponent
                 isLoading={isLoading}
                 setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-                invitation={invite.invitation}
-                serverErrors={serverErrors}
               />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+              <hr className='mb-2' />
+            </>
+          )}
+
+          <RegisterFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+            invitation={invite.invitation}
+            serverErrors={serverErrors}
+          />
+
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/ResetPassword/ResetPasswordComponent.tsx

@@ -6,11 +6,10 @@ 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 RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { UserResetPasswordRequest } from '@licklist/plugins/dist/types/Request/UserResetPasswordRequest'
 import { ROUTES } from '@licklist/core/dist/Config'
+import { useNavigate } from 'react-router-dom'
 import { ResetPasswordFormComponent } from './ResetPasswordFormComponent'
-import { Router } from '../Router'
 import FormCard from '../../static/FormCard'
 import { LoaderIndicator } from '../../static/loader/LoaderIndicator'
 
@@ -18,6 +17,7 @@ function ResetPasswordComponent() {
   const { t } = useTranslation(['Notification', 'User', 'App'])
   const request = useContext(RequestContext)
   const notification = useNotification()
+  const navigate = useNavigate()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -45,29 +45,25 @@ function ResetPasswordComponent() {
       message: t('Notification:passwordResetedSuccessfully'),
     })
 
-    RouteService.redirectTo(ROUTES.LOGIN_PAGE)
+    navigate(ROUTES.LOGIN_PAGE)
   }
 
   return (
-    <Router>
-      <Row className='justify-content-center'>
-        <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
-          <>
-            <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
+    <Row className='justify-content-center'>
+      <Col xs sm={12} md={7} lg={6} xl={5} className='align-self-center'>
+        <h1 className='text-center'>{t('User:resetPasswordTitle')}</h1>
 
-            <FormCard>
-              <ResetPasswordFormComponent
-                isLoading={isLoading}
-                setIsLoading={setIsLoading}
-                onSubmit={handleOnSubmit}
-              />
+        <FormCard>
+          <ResetPasswordFormComponent
+            isLoading={isLoading}
+            setIsLoading={setIsLoading}
+            onSubmit={handleOnSubmit}
+          />
 
-              <LoaderIndicator isLoaded={!isLoading} />
-            </FormCard>
-          </>
-        </Col>
-      </Row>
-    </Router>
+          <LoaderIndicator isLoaded={!isLoading} />
+        </FormCard>
+      </Col>
+    </Row>
   )
 }
 

package/src/auth/Social/SocialCallbackComponent.tsx

@@ -6,11 +6,10 @@ import useUser from '@licklist/plugins/dist/context/user/hooks/useUser'
 import useQuery from '@licklist/plugins/dist/hooks/Query/useQuery'
 import useSocialApi from '@licklist/plugins/dist/hooks/Api/useSocialApi'
 import useUserApi from '@licklist/plugins/dist/hooks/Api/useUserApi'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { IAuth } from '@licklist/plugins/dist/types/context/user/IAuth'
 import { IUser } from '@licklist/plugins/dist/types/context/user/IUser'
 import { useTranslation } from 'react-i18next'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import FormCard from '../../static/FormCard'
@@ -23,12 +22,13 @@ interface Params {
 function SocialCallbackComponent() {
   const { t } = useTranslation(['Notification'])
   const [isProcessed, setIsProcessed] = useState<boolean>(false)
-  const { provider } = useParams<Params>()
+  const { provider } = useParams<Readonly<Params>>()
   const query = useQuery()
   const request = useContext(RequestContext)
   const notification = useNotification()
   const auth = useAuth()
   const user = useUser()
+  const navigate = useNavigate()
 
   const socialApiService = useSocialApi(request)
   const userApiService = useUserApi(request)
@@ -78,7 +78,7 @@ function SocialCallbackComponent() {
       })
 
       // Redirect user in case of successful results
-      RouteService.redirectTo('/')
+      navigate('/')
     }
 
     const getSocialProvider = () => socialApiService.getSocialProvider(provider)

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.tsx

@@ -7,7 +7,7 @@ import {
   Image,
 } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { useId } from '@react-aria/utils'
-import { Accordion, Button, Form, Modal } from 'react-bootstrap'
+import { Accordion, Badge, Button, Form, Modal } from 'react-bootstrap'
 import { isEqual } from 'lodash'
 import { FormProvider, useForm, Controller } from 'react-hook-form'
 import { DateTime } from 'luxon'
@@ -50,6 +50,7 @@ export interface EditEventFormValues extends IntervalInputValues {
   saleDeadline: number | null
   integrationUrl: string | null
   recurrenceEndAt?: string
+  duplicatedFromId?: number | null
   editedProductSet?: ProductSetFormValues
 }
 
@@ -71,6 +72,7 @@ export interface EditEventFormProps extends HasPermissionProp {
   disabledRecurrent?: boolean
   isCopyCreate?: boolean
   isBooked?: boolean
+  duplicatedInfo?: string | null
 }
 
 const eventImageTypes = {
@@ -83,6 +85,7 @@ export const EditEventForm = ({
   categories,
   title,
   hasPermission = true,
+  duplicatedInfo,
   defaultEventValues,
   serverErrors,
   onSaveEvent,
@@ -218,9 +221,21 @@ export const EditEventForm = ({
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
-      <h5 className='edit-event-modal-title highlited-primary-title'>
-        {title}
-      </h5>
+      {duplicatedInfo ? (
+        <div className='d-flex justify-content-between'>
+          <h5 className='edit-event-modal-title highlited-primary-title'>
+            {title}
+          </h5>
+          <Badge className='duplicate-badge' variant='success'>
+            {duplicatedInfo}
+          </Badge>
+        </div>
+      ) : (
+        <h5 className='edit-event-modal-title highlited-primary-title'>
+          {title}
+        </h5>
+      )}
+
       <FormProvider {...form}>
         <Modal.Body
           as='form'

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/event-card/EventCard.stories.tsx

@@ -69,16 +69,13 @@ export const Default: Story<EventCardProps> = () => {
           console.log('onStatistic')
         }}
         titleId='titleId'
-        descriptionId='descriptionId'
       />
     </div>
   )
 }
 
-export const Skeleton: Story<EventCardProps> = () => {
-  return (
-    <div style={{ maxWidth: '34rem' }}>
-      <EventCardSkeleton />
-    </div>
-  )
-}
+export const Skeleton: Story<EventCardProps> = () => (
+  <div style={{ maxWidth: '34rem' }}>
+    <EventCardSkeleton />
+  </div>
+)