@licklist/design 0.78.7 → 0.78.8

package/src/product-set/utils/index.ts

@@ -2,14 +2,13 @@ import { EmailTemplate } from '@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper'
 import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 import { convertToTypeaheadOptions } from 'src/sales/coupon/utils'
-import { TFunction } from 'react-i18next'
+import { TFunction } from 'i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
 import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
-
 interface CheckAvailableTimesErrors {
   values: ProductSetFormValues
   setError: UseFormSetError<ProductSetFormValues>
@@ -61,21 +60,23 @@ export const getFilteredTemplates = (
     }))
 }
 
-export  const updateModifiersSetAtProductSetForm = (data: ProductSetFormValues) => ({
+export const updateModifiersSetAtProductSetForm = (
+  data: ProductSetFormValues,
+) => ({
   ...data,
-  steps: data.steps.map(step => ({
-      ...step,
-      productCategories: step.productCategories.map(category => ({
-          ...category,
-          products: category.products.map(product => ({
-              ...product,
-              modifiersSet: product?.modifiersSet
-                  ? convertToTypeaheadOptions(product.modifiersSet as ModifierSet[])
-                  : [],
-          })),
+  steps: data.steps.map((step) => ({
+    ...step,
+    productCategories: step.productCategories.map((category) => ({
+      ...category,
+      products: category.products.map((product) => ({
+        ...product,
+        modifiersSet: product?.modifiersSet
+          ? convertToTypeaheadOptions(product.modifiersSet as ModifierSet[])
+          : [],
       })),
+    })),
   })),
-});
+})
 
 export const checkAvailableTimesErrors = ({
   values,

package/src/recurrence-input/RecurrenceInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DateTime } from 'luxon'
-import { useEffect, useReducer, useState } from 'react'
+import { useEffect, useReducer } from 'react'
 import RRule, { Frequency, Weekday } from 'rrule'
 import RecurrenceEndInput, { defaultOccurrences } from './RecurrenceEndInput'
 import RecurrenceIntervalAndFrequencyInput from './RecurrenceIntervalAndFrequencyInput'
@@ -37,7 +37,7 @@ export function RecurrenceInput({
 
   useEffect(
     // TODO: unhardcode timezone
-    () =>
+    () => {
       onChange(
         RRule.optionsToString({
           freq: state.freq,
@@ -47,7 +47,8 @@ export function RecurrenceInput({
           tzid: 'Europe/London',
           ...state,
         }).replace('RRULE:', ''),
-      ),
+      )
+    },
     [state],
   )
 

package/src/sales/payment-form/components/RyftPayment/RyftPayment.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next'
 import { Alert, Button } from 'react-bootstrap'
-import { useHistory } from 'react-router-dom'
 import { BlockLoader } from '../../../../static'
 
 export type RyftPaymentProps = {
@@ -15,7 +14,6 @@ export const RyftPayment = ({
   ryftInitFailure = false,
 }: RyftPaymentProps) => {
   const { t } = useTranslation(['Design', 'App'])
-  const history = useHistory()
 
   return (
     <>
@@ -46,7 +44,7 @@ export const RyftPayment = ({
               <Button
                 variant='primary'
                 onClick={() => {
-                  history.go(0)
+                  window.location.reload()
                 }}
               >
                 {t('refresh')}

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.tsx

@@ -25,6 +25,7 @@ export function PaymentsModal({
 
   return (
     <Modal show={isVisible} onHide={onHide} centered>
+      {/* @ts-ignore */}
       <Modal.Header closeButton>
         <Modal.Title>{t('Design:setEmail')}</Modal.Title>
       </Modal.Header>

package/src/setting/dashboard/snippets/card/SnippetCard.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { useTranslation } from 'react-i18next'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import clsx from 'clsx'
 import { OverlayTrigger, Popover, ListGroup } from 'react-bootstrap'
 import { useId } from '@react-aria/utils'
 import { FaEllipsisH, FaEye, FaTrashAlt } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 import { MenuButton } from '../../../../table'
 import { ConfirmModal } from '../../../../modals'
 
@@ -26,6 +26,7 @@ export function SnippetCard({
   const { t } = useTranslation('Design')
   const popoverId = useId()
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
+  const navigate = useNavigate()
 
   const isDeletingAllowed = hasPermission && !isDefault
 
@@ -34,8 +35,8 @@ export function SnippetCard({
       className='border-0 product-set-card-wrapper w-100 pb-0'
       role='button'
       tabIndex={0}
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={() => navigate(href)}
+      onKeyUp={() => navigate(href)}
     >
       <div className='product-set-card'>
         <div className='product-set-card-link'>{name}</div>

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -1,6 +1,5 @@
 import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MemoryRouter } from 'react-router-dom'
 import { Button } from 'react-bootstrap'
 import {
   SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
@@ -79,14 +78,12 @@ export function Preview({
                 <div className='mt-5 pt-5 external-header'>
                   <PageHeader showCloseButton showBackButton>
                     <Timer timer={600} />
-                    <MemoryRouter initialEntries={['/step1', '/step2']}>
-                      <NavigationSteps
-                        steps={[
-                          { pathname: '/step1', key: '/step1', name: 'Burger' },
-                          { pathname: '/step2', key: '/step2', name: 'Cheese' },
-                        ]}
-                      />
-                    </MemoryRouter>
+                    <NavigationSteps
+                      steps={[
+                        { pathname: '/step1', key: '/step1', name: 'Burger' },
+                        { pathname: '/step2', key: '/step2', name: 'Cheese' },
+                      ]}
+                    />
                   </PageHeader>
                 </div>
               </div>

package/src/static/RestrictedAccess.tsx

@@ -1,18 +1,15 @@
 import { Button } from 'react-bootstrap'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { useTranslation } from 'react-i18next'
 import { FaArrowLeft } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 
 function RestrictedAccess() {
   const { t } = useTranslation('Design')
+  const navigate = useNavigate()
 
   return (
     <>
-      <Button
-        className='mt-3 ml-3'
-        variant='link'
-        onClick={() => RouteService.goBack()}
-      >
+      <Button className='mt-3 ml-3' variant='link' onClick={() => navigate(-1)}>
         <FaArrowLeft size={25} />
       </Button>
       <div className='container d-flex justify-content-center pt-5'>

package/src/table/ReactTableHelperComponent.tsx

@@ -7,7 +7,7 @@ import {
   ReactElement,
 } from 'react'
 import { Col, Row, Table } from 'react-bootstrap'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { isEqual } from 'lodash'
 import clsx from 'clsx'
 import {
@@ -15,7 +15,6 @@ import {
   ColumnDefResolved,
   getCoreRowModel,
 } from '@tanstack/react-table'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import TableService from '@licklist/plugins/dist/services/Table/TableService'
 import { LoaderIndicator } from '../static/loader/LoaderIndicator'
 import { FilterHelperComponent } from './FilterHelperComponent'
@@ -74,6 +73,7 @@ function WrappedReactTableHelperComponent<T extends object>(
   } = props
 
   const { pathname } = useLocation()
+  const navigate = useNavigate()
 
   const {
     sortKey,
@@ -167,9 +167,7 @@ function WrappedReactTableHelperComponent<T extends object>(
         ...externalFilters,
       })
 
-      RouteService.redirectTo(
-        [pathname, nextUrlSearchParams.toString()].join('?'),
-      )
+      navigate([pathname, nextUrlSearchParams.toString()].join('?'))
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [pathname, options, externalFilters],

package/src/table/TableHelperComponent.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import { SetStateAction, useEffect, useState } from 'react'
 import { Col, Row, Table } from 'react-bootstrap'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { isEqual } from 'lodash'
 import useQuery from '@licklist/plugins/dist/hooks/Query/useQuery'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import TableService from '@licklist/plugins/dist/services/Table/TableService'
 import ILengthAwarePaginator from '@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator'
 import ITableHeader from '@licklist/plugins/dist/types/services/Table/ITableHeader'
@@ -68,6 +67,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
 
   const query = useQuery()
   const { pathname } = useLocation()
+  const navigate = useNavigate()
 
   const page = Number(getFilterOptionsValue(query, initialOptions, 'page'))
   const perPage = Number(
@@ -113,7 +113,7 @@ function TableHelperComponent(props: TableHelperComponentProps) {
         onRefreshFn(options)
       }
 
-      RouteService.redirectTo(
+      navigate(
         [
           pathname,
           [

package/src/venue-map-sets/card/VenueMapSetCard.tsx

@@ -4,8 +4,8 @@ import { useId } from '@react-aria/utils'
 import { useTranslation } from 'react-i18next'
 import clsx from 'clsx'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaEye, FaEllipsisH, FaTrashAlt } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 import { MenuButton } from '../../table/MenuButton'
 import { ConfirmModal } from '../../modals'
 
@@ -26,14 +26,15 @@ export function VenueMapSetCard({
   const { t } = useTranslation('Design')
   const popoverId = useId()
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
+  const navigate = useNavigate()
 
   return (
     <div
       role='button'
       tabIndex={0}
       className='border-0 venue-map-set-card-wrapper w-100 pb-0'
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={() => navigate(href)}
+      onKeyUp={() => navigate(href)}
     >
       <div className={clsx('venue-map-set-card', className)}>
         <div className='venue-map-set-card-link'>{name}</div>

package/src/zone/card/ZoneCard.tsx

@@ -4,8 +4,8 @@ import { useTranslation } from 'react-i18next'
 import clsx from 'clsx'
 import { useId } from '@react-aria/utils'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaEllipsisH, FaEye, FaTrashAlt } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 import { ConfirmModal } from '../../modals'
 import { MenuButton } from '../../table/MenuButton'
 
@@ -27,14 +27,15 @@ export function ZoneCard({
   const popoverId = useId()
   const ZoneCardClasses = `zone-card ${className}`
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
+  const navigate = useNavigate()
 
   return (
     <div
       role='button'
       tabIndex={0}
       className='border-0 zone-card-wrapper w-100 pb-0'
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={() => navigate(href)}
+      onKeyUp={() => navigate(href)}
     >
       <div className={ZoneCardClasses}>
         <div className='zone-card-link'>{name}</div>