@licklist/design 0.73.0 → 0.74.0-dev.0

package/src/product-set/product/scanRange/ProductScanRangeControl.tsx

@@ -0,0 +1,163 @@
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { useId } from '@react-aria/utils'
+import { Form } from 'react-bootstrap'
+import Col from 'react-bootstrap/Col'
+import InputGroup from 'react-bootstrap/InputGroup'
+import Row from 'react-bootstrap/Row'
+import { Controller, Path, useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+
+import { ReactComponent as IncrementIcon } from '../../../assets/dashboard/increment.svg'
+
+export interface ProductScanRangeControlValues extends FormValues {
+  scanRangeStart: number
+  scanRangeEnd: number
+}
+
+export interface ProductScanRangeControlProps<T> extends FieldNamePrefixPath<T> {
+  isLoading: boolean
+  onFocus?: (e: React.SyntheticEvent) => void
+  isOverrides?: boolean
+}
+
+export function ProductScanRangeControl<T extends FormValues>(
+  props: ProductScanRangeControlProps<T>,
+) {
+  const { isLoading = false, fieldNamePrefix, onFocus, isOverrides } = props
+  const {
+    control,
+    formState: { errors },
+    setValue,
+    watch
+  } = useFormContext<T>()
+  const { t } = useTranslation('Design')
+
+  const scanRangeStartId = useId()
+  const scanRangeEndId = useId()
+
+  const scanRangeStartValue = watch(`${fieldNamePrefix}.scanRangeStart` as Path<T>)
+  const scanRangeEndValue = watch(`${fieldNamePrefix}.scanRangeEnd` as Path<T>)
+
+  return (
+    <>
+     <Form.Label>{t('scanningRange')}</Form.Label>
+    <Row>
+      <Col xs={12} sm={6}>
+        <Form.Group controlId={scanRangeStartId}>
+          <Form.Label>{t('beforeEventStart')}</Form.Label>
+
+          <InputGroup hasValidation>
+            <InputGroup.Prepend
+              className='arrow-up-btn'
+              onClick={() => {
+                setValue(
+                  `${fieldNamePrefix}.scanRangeStart` as Path<T>,
+                  (Number(scanRangeStartValue) + 1) as any,
+                )
+              }}
+            >
+              <InputGroup.Text className='py-0 px-3'>
+                <IncrementIcon />
+              </InputGroup.Text>
+            </InputGroup.Prepend>
+
+            <Controller
+              render={({ field: { value, onChange, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  type='number'
+                  min={0}
+                  step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
+                  value={value as string}
+                  onChange={onChange}
+                  onFocus={onFocus}
+                  disabled={isLoading || isOverrides}
+                />
+              )}
+              control={control}
+              name={`${fieldNamePrefix}.scanRangeStart` as Path<T>}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('scanRangeStart'),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+
+            <Form.Control.Feedback type='invalid'>
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.scanRangeStart` as Path<T>,
+                errors,
+              )}
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Col>
+
+      <Col xs={12} sm={6}>
+        <Form.Group controlId={scanRangeEndId}>
+          <Form.Label>{t('AfterEventStart')}</Form.Label>
+
+          <InputGroup hasValidation>
+            <InputGroup.Prepend
+              className='arrow-up-btn'
+              onClick={() => {
+                setValue(
+                  `${fieldNamePrefix}.scanRangeEnd` as Path<T>,
+                  (Number(scanRangeEndValue) + 1) as any,
+                )
+              }}
+            >
+              <InputGroup.Text className='py-0 px-3'>
+                <IncrementIcon />
+              </InputGroup.Text>
+            </InputGroup.Prepend>
+
+            <Controller
+              render={({ field: { value, onChange, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  type='number'
+                  min={0}
+                  step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
+                  value={value && (value as string)}
+                  onFocus={onFocus}
+                  onChange={onChange}
+                  disabled={isLoading || isOverrides}
+                />
+              )}
+              control={control}
+              name={`${fieldNamePrefix}.scanRangeEnd` as Path<T>}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('scanRangeEnd'),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+
+            <Form.Control.Feedback type='invalid'>
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.scanRangeEnd` as Path<T>,
+                errors,
+              )}
+            </Form.Control.Feedback>
+          </InputGroup>
+        </Form.Group>
+      </Col>
+    </Row>
+    </>
+  )
+}

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

@@ -0,0 +1 @@
+export * from './ProductScanRangeControl'

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/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import { Col, Form, Row } from 'react-bootstrap'
 import {
   ArrayPath,

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/booking/results/components/ResultCard.tsx

@@ -20,8 +20,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void
 }
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,

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/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/index.ts

@@ -1,3 +1 @@
-export * from './system'
-export * from './admin'
 export * from './dashboard'

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,9 +1,4 @@
-import {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { DndContext, useDraggable } from '@dnd-kit/core'
 import {
   SortableContext,

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/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/form/CustomCheckbox.scss

@@ -28,3 +28,34 @@
     z-index: 2;
   }
 }
+
+.checkbox-second-column {
+  margin-top: 1rem;
+  display: flex;
+  z-index: 2;
+  align-items: center;
+
+  .custom-checkbox .custom-control-label::before {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.5rem;
+    border: 2px solid #0e8ce2;
+    margin-top: -0.3rem;
+  }
+  .custom-checkbox .custom-control-label::after {
+    width: 1.5rem;
+    height: 1.5rem;
+    top: 0;
+  }
+
+  .custom-control-label {
+    padding-left: 0.5rem;
+    font-weight: 400;
+    font-size: 1rem;
+    min-height: 3rem;
+  }
+
+  .checkbox-input {
+    z-index: 2;
+  }
+}

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/product-set/ProductSetForm.scss

@@ -1,5 +1,4 @@
 .product-set-form {
-
   input,
   textarea,
   select,
@@ -211,8 +210,8 @@
 
 .sortable-tree-item-toggle {
   .product-zone-badge {
-    background-color: #EFE9F5;
-    color: #84269B;
+    background-color: #efe9f5;
+    color: #84269b;
     font-size: 0.875rem;
     font-weight: 600;
   }

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/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}