@licklist/design 0.71.6-dev.6 → 0.71.6-dev.8

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

@@ -29,7 +29,6 @@ import {
 import { NumberInput } from '../../../iframe/order-process/components/CategoryProduct/components/NumberInput'
 import { SnippetTemplateContext } from '../context/snippetTemplate'
 
-
 const DEFAULT_IMAGE =
   'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80'
 
@@ -58,7 +57,7 @@ export function Preview({
 
   const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay)
   const [selectedDate, setSelectedDate] = useState<DateTime | null>(null)
-  const calendarDates = getMonthCalendarDates(currentDate)
+  const calendarDates = getMonthCalendarDates({ initialDate: currentDate })
 
   return (
     <div className='w-100 h-100 snippet-template-preview'>
@@ -309,7 +308,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee',
                                   description: '',
                                   price: 15,
@@ -318,8 +316,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -338,7 +334,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee 2',
                                   description: '',
                                   price: 15,
@@ -347,8 +342,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,

package/src/static/date-range-input/utils/index.ts

@@ -58,7 +58,7 @@ export const stringDatesToInputValue = ({
   )} - ${DateTime.fromJSDate(nextEndDate).toFormat(INPUT_DATE_FORMAT)}`
 }
 
-export const getDateParams = (date: Date) => {
+export const getDateParams = (date: Date): [number, number, number] => {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const monthDate = date.getDate()

package/src/static/loader/FullScreenLoader.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+import { LoaderIndicator, LoaderIndicatorProps } from './LoaderIndicator'
+
+interface FullScreenLoaderProps {
+  containerClassName?: string
+  indicatorProps?: LoaderIndicatorProps
+}
+
+export const FullScreenLoader = ({
+  containerClassName,
+  indicatorProps,
+}: FullScreenLoaderProps) => (
+  <div className={clsx('fullscreen-loader', containerClassName)}>
+    <LoaderIndicator {...indicatorProps} />
+  </div>
+)

package/src/static/loader/LoaderIndicator.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable react/jsx-pascal-case */
-import { ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 import * as ReactLoader from 'react-loader'
 import ILoaderOptions from '../../types/static/ILoaderOptions'
 
 export interface LoaderIndicatorProps {
-  children?: ReactNode | ReactNode[]
   isLoaded?: boolean
   options?: ILoaderOptions
   className?: string
 }
 
-export function LoaderIndicator(props: LoaderIndicatorProps) {
+export function LoaderIndicator(
+  props: PropsWithChildren<LoaderIndicatorProps>,
+) {
   const { children, isLoaded, options, className = '' } = props
 
   const defaultOptions: ILoaderOptions = {
@@ -37,6 +38,8 @@ export function LoaderIndicator(props: LoaderIndicatorProps) {
   } as ILoaderOptions
 
   return (
+    // TODO Remove this library, it's deprecated and even removed from npm packages
+    // @ts-expect-error
     <ReactLoader.default
       loaded={isLoaded!}
       options={mergedOptions}

package/src/static/loader/index.ts

@@ -5,3 +5,4 @@ export { ButtonLoader } from './ButtonLoader'
 export { SnippetLoader } from './SnippetLoader'
 export { PaymentLoader } from './PaymentLoader'
 export type { PaymentLoaderProps } from './PaymentLoader'
+export { FullScreenLoader } from './FullScreenLoader'

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -6,7 +6,6 @@
   font-weight: 300;
   width: 100%;
 
-
   .indicator-label {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -25,8 +24,6 @@
   }
 }
 
-
-
 .activity-card {
   .availability-indicator {
     margin-top: 0.5rem;

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

@@ -179,7 +179,7 @@
     .form-disable-box {
       top: 20rem;
     }
-}
+  }
 }
 
 @include media-breakpoint-up(md) {

package/src/styles/static/Loader.scss

@@ -27,6 +27,15 @@
   }
 }
 
+.fullscreen-loader {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 5000;
+  top: 0;
+  left: 0;
+}
+
 .payment-loader {
   position: absolute;
   top: 50%;