@licklist/design 0.68.5 → 0.68.6-dev.0

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

@@ -24,38 +24,38 @@ const TutorialGifCard = ({
   return (
     <>
       <Card className={`tutorial-card ${!isVisible && 'hidden'}`}>
-        <Card.Header className="tutorial-card-header">
+        <Card.Header className='tutorial-card-header'>
           <div>
             <FaCheck
-              color="white"
-              className="rounded product-set-item-icon"
+              color='white'
+              className='rounded product-set-item-icon'
               size={14}
             />
             <span>{t('bookedTopTip')}</span>
           </div>
           <button
-            className="border-0"
+            className='border-0'
             onClick={() => setIsVisible(false)}
-            type="button"
+            type='button'
           >
             <span>{t('gotIt')}</span>
-            <FaTimes size={18} className="rounded tutorial-close-icon p-1" />
+            <FaTimes size={18} className='rounded tutorial-close-icon p-1' />
           </button>
         </Card.Header>
-        <Card.Body className="tutorial-card-body">
+        <Card.Body className='tutorial-card-body'>
           <p>
             {t(isOverrides ? 'buildOverrideProductSet' : 'buildProductSet')}
           </p>
           <span>
             {t(isOverrides ? 'buildOverrideRules' : 'buildProductSetDesc')}
           </span>
-          {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
+          {tutorialAsset && <Image src={tutorialAsset} alt='Tutorial Gif' />}
         </Card.Body>
       </Card>
       <Button
-        type="button"
+        type='button'
         onClick={() => setIsVisible(true)}
-        className="mb-4"
+        className='mb-4'
         style={{ display: !isVisible ? 'block' : 'none' }}
       >
         <span>{t('hint')}</span>

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

@@ -26,7 +26,7 @@ export const Default: Story<ProductSetDepositPaidControlProps> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >
@@ -47,7 +47,7 @@ export const WithData: Story<ProductSetDepositPaidControlProps> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/deposit-paid/ProductSetDepositPaidControl.tsx

@@ -38,11 +38,11 @@ export function ProductSetDepositPaidControl(
   return (
     <Row>
       <Col xs={12}>
-        <div className="form-inline">
+        <div className='form-inline'>
           <Form.Group controlId={depositPaidId}>
             <Form.Label>{t('depositPaid')}</Form.Label>
 
-            <div className="form-inline-group">
+            <div className='form-inline-group'>
               <InputGroup hasValidation>
                 <InputGroup.Prepend>
                   <InputGroup.Text>{t('pay')}</InputGroup.Text>
@@ -58,7 +58,7 @@ export function ProductSetDepositPaidControl(
                     />
                   )}
                   control={control}
-                  name="depositPaidAmount"
+                  name='depositPaidAmount'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidAmount'),
@@ -83,7 +83,7 @@ export function ProductSetDepositPaidControl(
                 <Controller
                   render={({ field: { value, onChange } }) => (
                     <Form.Control
-                      as="select"
+                      as='select'
                       onChange={onChange}
                       isInvalid={Boolean(errors.depositPaidAmountType)}
                       disabled={isLoading}
@@ -100,7 +100,7 @@ export function ProductSetDepositPaidControl(
                     </Form.Control>
                   )}
                   control={control}
-                  name="depositPaidAmountType"
+                  name='depositPaidAmountType'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidAmountType'),
@@ -122,7 +122,7 @@ export function ProductSetDepositPaidControl(
                     />
                   )}
                   control={control}
-                  name="depositPaidPeriod"
+                  name='depositPaidPeriod'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidPeriod'),
@@ -147,7 +147,7 @@ export function ProductSetDepositPaidControl(
                 <Controller
                   render={({ field: { value, onChange } }) => (
                     <Form.Control
-                      as="select"
+                      as='select'
                       onChange={onChange}
                       isInvalid={Boolean(errors.depositPaidPeriodType)}
                       disabled={isLoading}
@@ -164,7 +164,7 @@ export function ProductSetDepositPaidControl(
                     </Form.Control>
                   )}
                   control={control}
-                  name="depositPaidPeriodType"
+                  name='depositPaidPeriodType'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidPeriodType'),
@@ -176,7 +176,7 @@ export function ProductSetDepositPaidControl(
                   <InputGroup.Text>{t('beforeEvent')}</InputGroup.Text>
                 </InputGroup.Append>
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors.depositPaidAmount?.message}
                   {errors.depositPaidPeriod?.message}
                 </Form.Control.Feedback>

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -11,11 +11,11 @@ export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
   return (
     <Button
       onClick={onDelete}
-      variant="outline-danger"
-      className="d-flex align-items-center"
+      variant='outline-danger'
+      className='d-flex align-items-center'
     >
       <FaTrashAlt size={16} />{' '}
-      <span className="d-none d-sm-inline ml-2">{t('delete')}</span>
+      <span className='d-none d-sm-inline ml-2'>{t('delete')}</span>
     </Button>
   )
 }

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

@@ -5,12 +5,12 @@ export function MobileFooter() {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="container product-set-mobile-footer">
+    <div className='container product-set-mobile-footer'>
       <div
         className={`d-block d-sm-none bg-white border-top fixed-bottom
          py-4 px-5 d-flex justify-content-between flex-row-reverse`}
       >
-        <Button type="submit">{t('save')}</Button>
+        <Button type='submit'>{t('save')}</Button>
       </div>
     </div>
   )

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

@@ -8,6 +8,7 @@ import {
   useFormContext,
   useWatch,
 } from 'react-hook-form'
+import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import {
@@ -25,7 +26,11 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import { SelectCategoryModal } from './SelectCategoryModal'
+import {
+  SelectCategoryModal,
+  CATEGORY_TYPES_NAMES,
+  CategoryConfig,
+} from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -33,6 +38,29 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
+const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
+  [CATEGORY_TYPES_NAMES.tickets]: {
+    label: 'tickets',
+    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.bookings]: {
+    label: 'bookings',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.menuItems]: {
+    label: 'menuItems',
+    icon: <FaBars color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.game]: {
+    label: 'game',
+    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.fixedDuration]: {
+    label: 'fixedDuration',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+}
+
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number
   isOverrides?: boolean
@@ -228,6 +256,8 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
+          const categoryType = CATEGORIES_TYPE[productCategory.type]
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -248,14 +278,14 @@ export function ProductCategoriesControl({
                   cancelChanges={() => cancelChanges(index)}
                   isInvalid={!!productCategoriesErrors}
                   badge={
-                    <Badge className="category-badge">
+                    <Badge className='category-badge'>
                       {t('productCategory')}
                     </Badge>
                   }
                   isIconInHeader={false}
                   subTitle={
-                    <div className="product-set-badges-container">
-                      <div className="product-set-subtitle-dot product-set-subtitle-category-dot" />
+                    <div className='product-set-badges-container'>
+                      <div className='product-set-subtitle-dot product-set-subtitle-category-dot' />
                       <span>
                         {productCategoryState[
                           productCategory?.id ?? productCategory.uniqueId
@@ -264,7 +294,7 @@ export function ProductCategoriesControl({
                       </span>
                     </div>
                   }
-                  treeLineIconColor="#1A93AA"
+                  treeLineIconColor='#1A93AA'
                   modalLabel={t('addNewCategory')}
                   secondaryBadge={getBadgeConfig(
                     productCategory.type,
@@ -272,6 +302,12 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
+                  itemButton={
+                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
+                      {categoryType.icon}
+                      <span className='ml-2'>{t(categoryType.label)}</span>
+                    </div>
+                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}
@@ -353,7 +389,7 @@ export function ProductCategoriesControl({
             )}
           />
           {showVenueMapSetError && (
-            <div className="manual-form-error">
+            <div className='manual-form-error'>
               {venueMapSetIdError &&
                 t('Validation:fieldRequired', {
                   attribute: t('Design:venueMapSet'),
@@ -373,7 +409,7 @@ export function ProductCategoriesControl({
         </>
       )}
 
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {productCategoriesErrors && productCategoriesErrors.message}
       </div>
     </>

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
 import { Button, Form, Col, Row } from 'react-bootstrap'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -22,16 +22,21 @@ import { Step } from '../types'
 import { ProductSetContextProvider, ProductSetLoadingContext } from './context'
 import { SelectItem } from '../../types/generic/SelectItem'
 import { checkAvailableTimesErrors, getFilteredTemplates } from '../utils'
+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
@@ -84,6 +89,7 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext()
+  const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -121,6 +127,9 @@ export function ProductSetForm({
     if (!serverErrors) {
       return
     }
+    if (Array.isArray(serverErrors) && serverErrors[0]) {
+      setErrorMessage(serverErrors[0])
+    }
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
 
@@ -156,6 +165,12 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
+      <ErrorModal
+        message={errorMessage}
+        isOpen={!!errorMessage}
+        onClose={() => setErrorMessage('')}
+      />
+
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
@@ -185,13 +200,13 @@ export function ProductSetForm({
                 <Row>
                   <Col md={6} sm={12} />
                   <Col
-                    className="product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100"
+                    className='product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100'
                     md={6}
                     sm={12}
                   >
                     {onSubmitNoRedirect && (
                       <Button
-                        className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
+                        className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
                         onClick={form.handleSubmit(
                           submitHandler(onSubmitNoRedirect),
                         )}
@@ -203,8 +218,8 @@ export function ProductSetForm({
                       </Button>
                     )}
                     <Button
-                      className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                      type="submit"
+                      className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
+                      type='submit'
                       disabled={
                         isLoading || contextIsLoading || !formValues.name
                       }

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

@@ -14,18 +14,18 @@ function ProductSetFormPopover({ className = '' }: ProductSetFormPopoverProps) {
 
   return (
     <ProductSetPopover
-      placement="bottom"
+      placement='bottom'
       ref={popoverRef}
       onClick={() => setIsVisible(true)}
       isVisible={isVisible}
       className={className}
     >
-      <Tabs defaultActiveKey="first">
-        <Tabs.Tab eventKey="first" title="Add item">
+      <Tabs defaultActiveKey='first'>
+        <Tabs.Tab eventKey='first' title='Add item'>
           <p>Add new sub product item</p>
           <p>Add new sub product modifier</p>
         </Tabs.Tab>
-        <Tabs.Tab eventKey="second" title="Reusable subsets">
+        <Tabs.Tab eventKey='second' title='Reusable subsets'>
           <p>Add new sub product item 1</p>
           <p>Add new sub product modifier 2</p>
         </Tabs.Tab>

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

@@ -0,0 +1,27 @@
+import { Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+export const ProductSetNameControl = ({
+  value,
+  onChange,
+  error,
+}: {
+  value: string
+  onChange: (value: string) => void
+  error?: string
+}) => {
+  const { t } = useTranslation(['Design'])
+  return (
+    <Form.Group>
+      <Form.Label>{t('Design:ProductSetName')}*</Form.Label>
+      <Form.Control
+        value={value}
+        maxLength={255}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t('Design:placeholderProductSetName')}
+        isInvalid={Boolean(error)}
+      />
+      <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
+    </Form.Group>
+  )
+}

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,
@@ -125,14 +122,14 @@ export const ProductZonesControl = <T extends FormValues>({
               id={String(productZones._id)}
               title={zones.find((zone) => zone.id === Number(value))?.name}
               badge={
-                <Badge className="product-zone-badge">{t('productZone')}</Badge>
+                <Badge className='product-zone-badge'>{t('productZone')}</Badge>
               }
               isIconInHeader={false}
               cancelChanges={() => cancelChanges(index)}
               edit={() => edit(index)}
               subTitle={
-                <div className="product-set-badges-container">
-                  <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                <div className='product-set-badges-container'>
+                  <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
                   <span>
                     {zoneCapacity[index] &&
                       `${t('Cap')}: ${zoneCapacity[index]}; `}
@@ -175,7 +172,7 @@ export const ProductZonesControl = <T extends FormValues>({
           }
         }}
       />
-      <div className="manual-form-error">{productZonesError}</div>
+      <div className='manual-form-error'>{productZonesError}</div>
     </>
   )
 }

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

@@ -219,15 +219,15 @@ export function ProductsControl({
                   title={value}
                   isOverride={isOverrides}
                   badge={
-                    <Badge className="product-badge">{t('product')}</Badge>
+                    <Badge className='product-badge'>{t('product')}</Badge>
                   }
                   isIconInHeader={false}
                   cancelChanges={() => cancelChanges(index)}
                   edit={() => edit(index)}
                   secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                   subTitle={
-                    <div className="product-set-badges-container">
-                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                    <div className='product-set-badges-container'>
+                      <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
                       <span>
                         {`£${prices[index]} ${t('each')} - ${t('qty')}:${
                           !isUnlimitedQuantities[index]
@@ -295,7 +295,7 @@ export function ProductsControl({
           }
         }}
       />
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {categoryProductErrors && categoryProductErrors.message}
       </div>
     </>

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

@@ -25,7 +25,7 @@ import {
 } from 'react-icons/fa'
 import { ProductSetLoadingContext } from './context'
 
-const CATEGORY_TYPES_NAMES = {
+export const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,31 +33,31 @@ const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const
 
-type CategoryConfig = { label: string; icon: ReactElement }
+export type CategoryConfig = { label: string; icon: ReactElement }
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {
     label: 'tickets',
-    icon: <FaTicketAlt color="#0e8ce2" size={32} />,
+    icon: <FaTicketAlt color='#0e8ce2' size={32} />,
   },
   [CATEGORY_TYPES_NAMES.bookings]: {
     label: 'bookings',
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: <FaCalendar color='#0e8ce2' size={32} />,
   },
   [CATEGORY_TYPES_NAMES.menuItems]: {
     label: 'menuItems',
-    icon: <FaBars color="#0e8ce2" size={32} />,
+    icon: <FaBars color='#0e8ce2' size={32} />,
   },
 }
 
 const BOOKING_SUBCATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.game]: {
     label: 'game',
-    icon: <FaBowlingBall color="#0e8ce2" size={32} />,
+    icon: <FaBowlingBall color='#0e8ce2' size={32} />,
   },
   [CATEGORY_TYPES_NAMES.fixedDuration]: {
     label: 'fixedDuration',
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: <FaCalendar color='#0e8ce2' size={32} />,
   },
 }
 
@@ -102,18 +102,18 @@ export function SelectCategoryModal({
 
   return (
     <Modal
-      size="lg"
+      size='lg'
       centered
       show={isVisible}
       onHide={onHide}
-      className="p-3 border-0"
+      className='p-3 border-0'
       animation={false}
-      contentClassName="rounded"
+      contentClassName='rounded'
     >
-      <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h5">{t('Design:selectCategory')}</ModalTitle>
+      <ModalHeader className='align-items-center border-0'>
+        <ModalTitle as='h5'>{t('Design:selectCategory')}</ModalTitle>
 
-        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
+        <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
           <FaTimes size={20} />
         </Button>
       </ModalHeader>
@@ -127,22 +127,22 @@ export function SelectCategoryModal({
           controls={false}
         >
           <Carousel.Item>
-            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
+            <div className='d-flex flex-row flex-wrap p-4 justify-content-between mb-6'>
               {mainCategories.map((categoryType) => {
                 const { label, icon } = MAIN_CATEGORIES[categoryType]
 
                 return (
                   <Col key={label}>
                     <Button
-                      variant="outline-light"
-                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
-                      role="button"
+                      variant='outline-light'
+                      className='d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded'
+                      role='button'
                       tabIndex={0}
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
                       {icon}
-                      <h6 className="text-dark mt-3">{t(label)}</h6>
+                      <h6 className='text-dark mt-3'>{t(label)}</h6>
                     </Button>
                   </Col>
                 )
@@ -150,22 +150,22 @@ export function SelectCategoryModal({
             </div>
           </Carousel.Item>
           <Carousel.Item>
-            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
+            <div className='d-flex flex-row flex-wrap p-4 justify-content-between mb-6'>
               {bookingSubcategories.map((categoryType) => {
                 const { label, icon } = BOOKING_SUBCATEGORIES[categoryType]
 
                 return (
                   <Col key={label}>
                     <Button
-                      variant="outline-light"
-                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
-                      role="button"
+                      variant='outline-light'
+                      className='d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded'
+                      role='button'
                       tabIndex={0}
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
                       {icon}
-                      <h6 className="text-dark mt-3">{t(label)}</h6>
+                      <h6 className='text-dark mt-3'>{t(label)}</h6>
                     </Button>
                   </Col>
                 )
@@ -176,7 +176,7 @@ export function SelectCategoryModal({
 
         {isBookingsSelected && (
           <Button
-            size="sm"
+            size='sm'
             className={`carousel-control-button ${
               activeCarouselIndex ? 'left' : 'right'
             }`}