@licklist/design 0.78.4 → 0.78.5-dev.1

package/src/product-set/form/ProductSetForm.tsx

@@ -10,7 +10,7 @@ import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetD
 import { isEqual } from 'lodash'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { transformErrorToMessage } from '@licklist/plugins'
+import { transformErrorToMessage } from '@licklist/plugins/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -30,12 +30,16 @@ import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 export interface WithIsLoading {
   isLoading: boolean
 }
+export interface WithIdOptional {
+  id?: number
+}
+
 export interface WithId {
   id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,6 +86,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -129,6 +130,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,6 +50,7 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,6 +91,7 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -127,6 +128,7 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,6 +59,7 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,6 +111,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -165,6 +166,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,6 +85,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -143,6 +144,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,6 +69,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -221,6 +221,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -293,6 +294,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -353,6 +355,7 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -543,6 +546,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,6 +109,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -91,6 +91,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/resource/form/components/CapacityControl.tsx

@@ -27,6 +27,7 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
           required: true,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}

package/src/resource/form/components/SortControl.tsx

@@ -27,6 +27,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -179,6 +179,7 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.discount !== undefined}
                 {...register('discount', {
                   required: t('Validation:fieldRequired', {
@@ -316,6 +317,7 @@ export const CouponFormControl = ({
               <Form.Control
                 {...register('totalCoupons')}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}
               />
@@ -330,6 +332,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUser')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
             </Form.Group>
@@ -342,6 +345,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('useAgain')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -355,6 +359,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUserDay')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -370,6 +375,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('minAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -383,6 +389,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('maxAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>

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

@@ -178,6 +178,7 @@ export const DashboardSettingForm = ({
               <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register('metaPixelId', {
                   minLength: {
                     value: 15,

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/static/CurrencyNumberInput.tsx

@@ -45,6 +45,7 @@ export const CurrencyNumberInput = forwardRef<
           disabled={disabled}
           value={value}
           onChange={onChange}
+          onWheel={(event) => event.currentTarget.blur()}
           ref={ref}
           {...props}
         />

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/static/form-number-input/FormNumberInput.tsx

@@ -75,6 +75,7 @@ export const FormNumberInput = ({
               type='number'
               step={step}
               disabled={disabled}
+              onWheel={(event) => event.currentTarget.blur()}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
               onChange={(event) => {

package/src/static/number-input/NumberInput.tsx

@@ -49,6 +49,7 @@ export function NumberInput({
     <div className={inputWrapperClasses}>
       <FormControl
         type='number'
+        onWheel={(event) => event.currentTarget.blur()}
         onChange={(e) => onChange(Number(e.target.value))}
         value={value}
         min={min}

package/src/styles/events/EditEventModal.scss

@@ -46,6 +46,13 @@
   }
 }
 
+.duplicate-badge {
+  height: max-content;
+  width: 35%;
+  white-space: break-spaces;
+  margin-top: 3rem;
+}
+
 .highlited-primary-title {
   font-weight: 600;
   background-color: $light-blue;

package/src/styles/iframe-events/Calendar.scss

@@ -74,7 +74,7 @@
     .calendar-dates-wrapper {
       .calendar-dates {
         display: grid;
-        grid-template-columns: repeat(7, 1fr);
+        grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
         overflow-x: auto;
       }

package/src/styles/iframe-external-modal/IframeExternalModal.scss

@@ -15,7 +15,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1000000;
+  z-index: 2147483646;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
 }
@@ -24,7 +24,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000001;
+  z-index: 2147483647;
   display: none;
   width: 100%;
   height: 100%;

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -102,7 +102,6 @@
 }
 
 .ryft-payment-form {
-
   .form-disable-box {
     display: none;
     position: absolute;
@@ -184,7 +183,6 @@
 }
 
 @include media-breakpoint-up(md) {
-
   .ryft-payment-form,
   .form-disable-box {
     height: 50%;
@@ -213,4 +211,4 @@
   .divider {
     display: none !important;
   }
-}
+}

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

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>

package/src/zone/form/components/GameDurationControl.tsx

@@ -29,6 +29,7 @@ export const GameDurationControl = ({
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:duration')}
         isInvalid={Boolean(errors.defaultDuration)}
         disabled={isLoading}

package/src/zone/form/components/SortControl.tsx

@@ -27,6 +27,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}