@licklist/design 0.68.2 → 0.68.5-dev.0

package/src/product-set/card/ProductSetCard.tsx

@@ -9,15 +9,20 @@ import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaEllipsisH, FaEye, FaTrashAlt } from 'react-icons/fa'
 import { ConfirmModal } from '../../modals'
 import { MenuButton } from '../../table/MenuButton'
+import { ProductSetNameControl } from '../form/ProductSetNameControl'
 
 export interface ProductSetCardProps extends HasPermissionProp {
   name: string
   rrule?: string
   href: string
-  onCopy: () => void
+  duplicateProductSetName: string
+  onChangeDuplicateProductSetName: (value: string) => void
+  onCopy: () => Promise<boolean | undefined>
   onRemove: () => void
+  isLoading?: boolean
   className?: string
   override?: number
+  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -26,6 +31,10 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
+  onChangeDuplicateProductSetName,
+  duplicateProductSetName,
+  duplicateProductSetError,
+  isLoading,
   className = '',
   hasPermission = true,
   override = 0,
@@ -35,19 +44,23 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
 
+  const onCardClick = () => {
+    RouteService.redirectTo(href)
+  }
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       role="button"
       tabIndex={0}
       className="border-0 product-set-card-wrapper w-100 pb-0"
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={onCardClick}
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
           <div className="d-flex flex-column">
             <div>
-              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+              {name}
+              {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
               <div className="h6 bold ml-1">
@@ -79,14 +92,33 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action as="div">
+                      <ListGroup.Item
+                        action
+                        as="div"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onCopy) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            // confirm function  memoize the callback function and it leads to bugs
+                            confirmationHandler={onCopy}
+                            disabledButtons={isLoading}
+                            content={
+                              <ProductSetNameControl
+                                value={duplicateProductSetName}
+                                onChange={onChangeDuplicateProductSetName}
+                                error={duplicateProductSetError}
+                              />
+                            }
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false)
-                                  confirm(onCopy)
+                                  onChangeDuplicateProductSetName(name)
+                                  // confirm function  memoize the callback function and it leads to bugs
+                                  confirm(() => {})
                                 }}
                                 name={t('duplicate')}
                                 className="product-set-card-menu-item-text"
@@ -95,7 +127,14 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item action className="text-danger" as="div">
+                      <ListGroup.Item
+                        action
+                        className="text-danger"
+                        as="div"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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

@@ -247,7 +247,8 @@ export const DateInput = ({
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes
+                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
               }
             />
           ))}

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}`}
@@ -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}

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>

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,

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,7 +33,7 @@ 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]: {

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

@@ -1 +1,2 @@
 export * from './ProductSetForm'
+export * from './ProductSetNameControl'

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

@@ -34,7 +34,6 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,

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

@@ -3,6 +3,7 @@ import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemp
 import { TFunction } from 'react-i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
+import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
@@ -12,6 +13,11 @@ interface CheckAvailableTimesErrors {
   t: TFunction
 }
 
+export interface MenuTypeheadItem {
+  id: number
+  label: string
+  value: number
+}
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -83,3 +89,8 @@ export const checkAvailableTimesErrors = ({
   })
   return hasError
 }
+
+export const getTypeHeadItemsFromMenus = (
+  menus?: (ProductSet | ProductSetFormValues)[],
+): MenuTypeheadItem[] =>
+  menus?.map((menu) => ({ id: menu.id, value: menu.id, label: menu.name }))

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/snippet/snippet-template/preview/Preview.tsx

@@ -307,6 +307,7 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
+                                  zoneId: null,
                                   name: 'Cofee',
                                   description: '',
                                   price: 15,
@@ -315,6 +316,8 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
+                                  capacity: 0,
+                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -333,6 +336,7 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
+                                  zoneId: null,
                                   name: 'Cofee 2',
                                   description: '',
                                   price: 15,
@@ -341,6 +345,8 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
+                                  capacity: 0,
+                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,

package/src/sortable-tree/SortableTreeItem.tsx

@@ -33,6 +33,7 @@ export interface SortableTreeItemProps {
   body: ReactNode
   children?: ReactNode
   preItem?: ReactNode
+  itemButton?: ReactNode
   postItem?: ReactNode
   sortableItems?: string[]
   isExpanded?: boolean
@@ -82,6 +83,7 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
+  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded)
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded)
@@ -287,9 +289,13 @@ export function SortableTreeItem({
                     className={clsx(
                       'sortable-tree-item-title',
                       modalLabel && 'sortable-tree-product-set-element-title',
+                      'd-flex justify-content-between',
                     )}
                   >
                     {title}
+                    <div className="sortable-tree-item-subtitle">
+                      {itemButton}
+                    </div>
                   </span>
                   {!expanded && (
                     <span className="sortable-tree-item-subtitle">

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

@@ -48,7 +48,6 @@
         height: 2.25rem;
         width: 14.125rem;
         justify-content: space-between;
-        border: 1px solid $snippet-dropdown-border-color;
         border-radius: $iframe-border-radius;
         transition: $color-transition;
 

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/iframe-page/PageBody.scss

@@ -258,7 +258,7 @@
       position: inherit;
       margin: 0 1rem 1rem;
       height: unset;
-      min-height: 7rem;
+      min-height: 8rem;
       max-height: calc(calc(100svh - 8.25rem) * 0.75);
     }
   }

package/src/styles/product-set/ProductSetForm.scss

@@ -15,10 +15,12 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
+
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
+
     label {
       height: 2rem;
     }
@@ -34,6 +36,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
+
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -59,10 +62,21 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
+
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
+
+  .item-icon {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.2rem;
+    margin-right: 1rem;
+  }
+
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -75,10 +89,12 @@
 
 .product-set-mobile-modal {
   margin: 0;
+
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
+
     .modal-body {
       padding: 1rem 0;
     }
@@ -100,18 +116,22 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
+
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
+
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
+
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
+
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -156,6 +176,7 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
+
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -163,6 +184,7 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
+
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;

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/tiptap-editor/TipTapMenu/extensions/constants.ts

@@ -0,0 +1 @@
+export const EMOJI_URL = "https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/svg/";

package/src/tiptap-editor/TipTapMenu/extensions/utils.ts

@@ -1,10 +1,13 @@
 import { parse } from 'twemoji-parser'
+import { EMOJI_URL } from './constants'
 
 function parseTwemoji(emoji: string) {
   const [twemoji] = parse(emoji)
 
+  const emojiPathUrl = EMOJI_URL.concat(twemoji.url.split("/").slice(-1));
+  
   return {
-    src: twemoji.url,
+    src: emojiPathUrl,
     alt: twemoji.text,
     class: 'emoji',
     draggable: 'false',

package/src/typeahead/Typeahead.tsx

@@ -12,10 +12,13 @@ export interface TypeaheadProps {
   placeholder: string
   isRequired?: boolean
   name: string
+  value?: TypeaheadOptions
   isMultipleChoise?: boolean
   noOptionsMessage: string
   isInvalid?: boolean
   isCouponForm?: boolean
+  containerStyles?: CSSObjectWithLabel
+  onChangeValue?: (value: TypeaheadOptions) => void
 }
 
 function Typeahead({
@@ -24,6 +27,9 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = '',
+  value,
+  onChangeValue,
+  containerStyles,
   isCouponForm = false,
   noOptionsMessage = '',
   isInvalid,
@@ -53,15 +59,23 @@ function Typeahead({
         render={({ field }) => (
           <Select
             placeholder={placeholder}
-            value={field.value}
+            value={value ?? field.value}
             isMulti={isMultipleChoise}
             styles={{
+              container: (base) => ({
+                ...base,
+                ...containerStyles,
+              }),
               control: (base) => ({
                 ...base,
                 ...getStyle(),
               }),
             }}
             onChange={(value) => {
+              if (onChangeValue) {
+                onChangeValue(value)
+                return
+              }
               field.onChange(value)
             }}
             options={options}