@licklist/design 0.76.0 → 0.78.1

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -36,7 +36,6 @@ import { ProductSetFormValues } from '../../../../product-set/form/ProductSetFor
 import { isUrlValid } from '../../utils/isUrlValid'
 import { toSimpleDateTime } from '../../utils/checkIfEventBooked'
 
-
 export interface EditEventFormValues extends IntervalInputValues {
   name: string
   startAt: string
@@ -200,9 +199,13 @@ export const EditEventForm = ({
     rrule && setValue('rrule', rrule?.concat(`;EXDATE=${defaultExDate}`))
   }, [defaultExDate, rrule])
 
-  const isChanged = !isEqual(watchedValues, sanitizeDefaultValues(defaultEventValues));
+  const isChanged = !isEqual(
+    watchedValues,
+    sanitizeDefaultValues(defaultEventValues),
+  )
   const isChangedTime =
-    watchedValues?.start !== toSimpleDateTime(defaultEventValues?.startAt || '') ||
+    watchedValues?.start !==
+      toSimpleDateTime(defaultEventValues?.startAt || '') ||
     watchedValues?.end !== toSimpleDateTime(defaultEventValues?.endAt || '')
   const isSinglEventWithBooked = !rrule && isBooked && isChangedTime
 
@@ -453,9 +456,13 @@ export const EditEventForm = ({
                   }
                   className='save-event'
                   type='button'
-                  onClick={() => confirm(handleSubmit(onSaveEvent, onErrorSubmit))}
+                  onClick={() =>
+                    confirm(handleSubmit(onSaveEvent, onErrorSubmit))
+                  }
                 >
-                  {formState.isSubmitting ? `${t('saveAndAdd')}...` : t('saveAndAdd')}
+                  {formState.isSubmitting
+                    ? `${t('saveAndAdd')}...`
+                    : t('saveAndAdd')}
                 </Button>
               )}
             </ConfirmModal>
@@ -519,5 +526,3 @@ const sanitizeDefaultValues = (
     recurrenceEndAt: values?.recurrenceEndAt ?? undefined,
   }
 }
-
-

package/src/fullscreen-loader/FullscreenLoader.tsx

@@ -0,0 +1,19 @@
+import { LoadingOverlay } from '@mantine/core'
+import { useState } from 'react'
+import { FullscreenLoaderContext } from './context'
+
+export const FullscreenLoaderProvider = ({ children }) => {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <FullscreenLoaderContext.Provider value={[visible, setVisible]}>
+      {children}
+
+      <LoadingOverlay
+        visible={visible}
+        className='!tw-z-[1050]'
+        loaderProps={{ size: 50 }}
+      />
+    </FullscreenLoaderContext.Provider>
+  )
+}

package/src/fullscreen-loader/context.ts

@@ -0,0 +1,5 @@
+import { createContext, Dispatch, SetStateAction } from 'react'
+
+export const FullscreenLoaderContext = createContext<
+  [boolean, Dispatch<SetStateAction<boolean>>]
+>([false, () => false])

package/src/fullscreen-loader/index.ts

@@ -0,0 +1,3 @@
+export * from './FullscreenLoader'
+export * from './useFullscreenLoader'
+export * from './context'

package/src/fullscreen-loader/useFullscreenLoader.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { FullscreenLoaderContext } from './context'
+
+export const useFullscreenLoader = () => useContext(FullscreenLoaderContext)

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,6 +61,7 @@ const processedPaymentSummary = ({
   const total = order.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -31,6 +31,7 @@ interface PaymentStatusComponentProps {
   showCloseButton?: boolean
   email?: string
   totalAmount?: number
+  getBookingPDF?: () => Promise<void>
   paymentMetadata?: PaymentMetadata
 }
 
@@ -47,6 +48,7 @@ export const PaymentStatusPage = ({
   onTryAgain,
   isLoading,
   status,
+  getBookingPDF,
   isAppUsingInIframe,
   bookingSummaryProps,
   EventCardComponent,
@@ -106,6 +108,7 @@ export const PaymentStatusPage = ({
               {EventCardComponent}
               <PaymentStatusBody
                 status={status}
+                getBookingPDF={getBookingPDF}
                 onBack={onBack || onCloseWindow}
                 onTryAgain={onTryAgain}
                 email={email}

package/src/iframe/payment/payment-status-page/component/PaymentStatusBody.tsx

@@ -9,6 +9,7 @@ import { StatusBody } from '../../status-body/StatusBody'
 interface PaymentStatusBodyProps {
   status: OrderStatus
   onBack: () => void
+  getBookingPDF?: () => Promise<void>
   onTryAgain?: () => void
   email?: string
 }
@@ -17,6 +18,7 @@ export const PaymentStatusBody = ({
   status,
   onBack,
   onTryAgain,
+  getBookingPDF,
   email,
 }: PaymentStatusBodyProps) => {
   const { t } = useTranslation('Design')
@@ -25,6 +27,7 @@ export const PaymentStatusBody = ({
     return (
       <StatusBody
         onBack={onBack}
+        getBookingPDF={getBookingPDF}
         title={t('orderConfirmationAndReceiptSendToYourEmail', { email })}
       />
     )

package/src/iframe/payment/status-body/StatusBody.tsx

@@ -1,18 +1,25 @@
 import { Button } from 'react-bootstrap'
+import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
 interface StatusBodyProps {
   onTryAgain?: () => void
   onBack: () => void
+  getBookingPDF?: () => void
   title?: string
 }
 
-export const StatusBody = ({ onTryAgain, onBack, title }: StatusBodyProps) => {
+export const StatusBody = ({ onTryAgain, onBack, title, getBookingPDF }: StatusBodyProps) => {
   const { t } = useTranslation('Design')
 
   return (
     <div className='status-body-wrapper mt-4'>
       {title && <p className='status-body-wrapper__text'>{title}</p>}
+      {getBookingPDF && <div className='mt-2'>
+        <p className='status-body-wrapper__text'>{t('youCanDownload')}</p>
+        <Link onClick={getBookingPDF} >{t('ticketDownloadLink')}</Link>
+      </div>
+      }
       <div className='d-flex buttons-wrapper'>
         {onTryAgain && <Button onClick={onTryAgain}>{t('tryAgain')}</Button>}
         <Button onClick={onBack}>{t('backToSite')}</Button>

package/src/index.ts

@@ -41,3 +41,4 @@ export * from './date-time-button'
 export * from './calendar'
 export * from './availability-indicator'
 export * from './number-of-people-input'
+export * from './fullscreen-loader'

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/product-set/control/ProductSetControl.tsx

@@ -309,14 +309,17 @@ export function ProductSetControl({
             </Form.Control.Feedback>
           </Form.Group>
 
-          <Form.Group controlId='hasGeneralTicket' className='checkbox-second-column mt-4'>
-          <Form.Check
-            data-testid='save-as-template-checkbox'
-            label={t('Design:hasGeneralTicket')}
-            {...register('hasGeneralTicket')}
-            custom
-          />
-        </Form.Group>
+          <Form.Group
+            controlId='hasGeneralTicket'
+            className='checkbox-second-column mt-4'
+          >
+            <Form.Check
+              data-testid='save-as-template-checkbox'
+              label={t('Design:hasGeneralTicket')}
+              {...register('hasGeneralTicket')}
+              custom
+            />
+          </Form.Group>
 
           <Form.Group controlId={termsAndConditionsId}>
             <Form.Label>{t('Design:termsAndConditions')}</Form.Label>

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

@@ -7,10 +7,7 @@ import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetD
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
-
 import { isEqual } from 'lodash'
-// eslint-disable-next-line max-len
-import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
 import { transformErrorToMessage } from '@licklist/plugins'
@@ -55,7 +52,7 @@ export interface ProductSetFormProps
   serverErrors?: ServerError
   providerHasMap?: boolean
   venueMapSets?: VenueMapSet[]
-  providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
+  providerHasBookingManagement?: boolean
   zones?: Zone[] | null
   isCreateAction?: boolean
   isOverrides?: boolean

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

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React, { useContext, useState } from 'react'
-
+import { useContext, useState } from 'react'
 import {
   ArrayPath,
   Controller,

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

@@ -9,18 +9,14 @@ import {
 } from 'react-hook-form'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import { useTranslation } from 'react-i18next'
-import { DEFAULT_PRODUCT_TYPE } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import { generateUuid } from '@licklist/core/dist/Services'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-
 import { CategoryType } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
 import { ProductControl, ProductControlProps, ProductSetFormValues } from '..'
 import { SortableTree } from '../../sortable-tree'
 import { CreateProductSetItem } from '../item/CreateProductSetItem'
 import { Product } from '../types'
 import { WithIsLoading } from './ProductSetForm'
-// @TODO not for first release
-// import Popover from "./ProductSetFormPopover";
 import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 import { SubProductsControl } from './SubProductsControl'
 import { ProductSetModalClasses } from '../../sortable-tree/SortableTreeItem'
@@ -60,7 +56,6 @@ const getDefaultProductValue = (sort: number): Product => ({
   hasSpecialNotes: false,
   weight: 0,
   originalProductId: null,
-  type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
   subProducts: [],
   images: [],
@@ -289,7 +284,6 @@ export function ProductsControl({
                     trigger(`${productControlFieldName}.${index}`)
                   }
                   saveValidField={saveValidField}
-                  // preItem={<Popover className="d-none d-sm-block" />}
                 >
                   <SubProductsControl
                     isLoading={isLoading}
@@ -315,9 +309,7 @@ export function ProductsControl({
           }
         }}
       />
-      <div className='manual-form-error'>
-        {categoryProductErrors && categoryProductErrors.message}
-      </div>
+      <div className='manual-form-error'>{categoryProductErrors?.message}</div>
     </>
   )
 }

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

@@ -167,9 +167,7 @@ export function StepsControl({
           }
         }}
       />
-      <div className='manual-form-error'>
-        {errors.steps && errors.steps.message}
-      </div>
+      <div className='manual-form-error'>{errors.steps?.message}</div>
     </>
   )
 }

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

@@ -70,9 +70,6 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
-                // @TODO fix prod type error
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 append(subProductCopy)
               }}
             />

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

@@ -46,9 +46,6 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
-                            // @TODO fix prod type error
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}

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

@@ -8,12 +8,9 @@ import {
 } from 'react'
 import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
 import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
-// eslint-disable-next-line max-len
-import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { SelectItem } from '../../types/generic/SelectItem'
 
-
 interface LoadingContext {
   isLoading: boolean
   setLoading: (loading: boolean) => void
@@ -21,7 +18,7 @@ interface LoadingContext {
   modifiersSetList?: ModifierSet[] | null
   providerHasMap?: boolean | null
   venueMapSets?: VenueMapSet[]
-  providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
+  providerHasBookingManagement?: boolean
   zones?: Zone[] | null
   expandedProductCategories: Record<string, boolean>
   setExpandedProductCategories: Dispatch<
@@ -46,7 +43,7 @@ type ProductSetContextProviderProps = PropsWithChildren<
 export function ProductSetContextProvider({
   children,
   productGroupList = [],
-  modifiersSetList =[],
+  modifiersSetList = [],
   providerHasMap = false,
   venueMapSets = [],
   providerHasBookingManagement,

package/src/product-set/product/ProductControl.tsx

@@ -1,9 +1,6 @@
 import {
   CategoryType,
   QuantityType,
-  QUANTITY_TYPE_CONSTANT,
-  QUANTITY_TYPE_LIST_DTO,
-  QUANTITY_TYPE_RECHARGING,
 } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
 import { ProductType } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
@@ -28,13 +25,11 @@ import {
   Controller,
   Path,
   useFormContext,
-  useWatch,
   UnpackNestedValue,
   PathValue,
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -417,6 +412,7 @@ export function ProductControl<T extends FormValues>({
             name={`${fieldNamePrefix}.isSoldOut` as Path<T>}
           />
         </Form.Group>
+
         <Form.Group controlId={advancedId} className='custom-checkbox'>
           <Form.Check
             custom

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'

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