@licklist/design 0.69.3 → 0.69.5

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

@@ -5,9 +5,11 @@ import { useId } from '@react-aria/utils'
 import { Controller, useFormContext } from 'react-hook-form'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
+import { getTypeHeadItemsFromMenus } from '../../../../product-set/utils'
 import { ConfirmModal } from '../../../../modals/confirmation/ConfirmModal'
 import { EditEventFormValues } from '../EditEventForm/EditEventForm'
 import { EditEventProductSet } from './component/EditEventProductSet'
+import { Typeahead } from '../../../../typeahead'
 
 interface SelectEventProductSetProps extends HasPermissionProp {
   productSets?: ProductSet[]
@@ -17,6 +19,7 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setEditProductSetId: (value: string) => void
   timeZone: string
   eventProductSet?: ProductSet
+  overrideNameError?: string
 }
 
 export const SelectEventProductSet = ({
@@ -27,6 +30,7 @@ export const SelectEventProductSet = ({
   setShowEditProductSet,
   timeZone,
   eventProductSet,
+  overrideNameError,
 }: SelectEventProductSetProps) => {
   const productSets = eventProductSet
     ? [..._productSets, eventProductSet]
@@ -48,6 +52,21 @@ export const SelectEventProductSet = ({
   const productSetId = watch('productSetId')
   const editedProductSet = watch('editedProductSet')
 
+  const typeheadValues = getTypeHeadItemsFromMenus(
+    editedProductSet
+      ? productSets.map((productSet) => {
+          if (productSet.id === editedProductSet.id) {
+            return editedProductSet
+          }
+
+          return productSet
+        })
+      : productSets,
+  )
+  const selectedProductSetTypeheadValue = productSetId
+    ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)
+    : undefined
+
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId))
@@ -101,6 +120,7 @@ export const SelectEventProductSet = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSubmit = (value: EditEventFormValues['editedProductSet']) => {
     setShowEditProductSet(false)
+    setValue('productSetId', value.id)
     setValue('editedProductSet', value)
   }
 
@@ -116,93 +136,73 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name='productSetId'
-            render={({ field }) => {
-              const fieldValue = String(field.value)
-              return (
-                <>
-                  <div className='d-flex align-items-center flex-row w-100'>
-                    <ConfirmModal>
-                      {(confirm) => (
-                        <Form.Control
-                          as='select'
-                          onChange={(e) =>
-                            onChangeProductSet(Number(e.target.value), confirm)
-                          }
-                          isInvalid={Boolean(errors.productSetId)}
-                          value={fieldValue}
-                        >
-                          <option value='' hidden>
-                            {t('Design:chooseProductSet')}
-                          </option>
-                          {productSets?.map((productSet) => {
-                            const isCurrentEditedProductSet =
-                              editedProductSet &&
-                              editedProductSet?.id === productSet?.id
-                            return (
-                              <option key={productSet.id} value={productSet.id}>
-                                {isCurrentEditedProductSet ||
-                                productSet.isOverride
-                                  ? `[${t('edited')}] ${
-                                      isCurrentEditedProductSet
-                                        ? editedProductSet?.name
-                                        : productSet.name
-                                    }`
-                                  : productSet.name}
-                              </option>
-                            )
-                          })}
-                        </Form.Control>
-                      )}
-                    </ConfirmModal>
-
-                    <div className='buttons-container'>
-                      {!showEditProductSet && !editedProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button mr-4'
-                          onClick={handleCreateProductSet}
-                        >
-                          {t('addNewProductSet')}
-                        </Button>
-                      )}
-                      {showOverrideProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button'
-                          onClick={onEditProductSet}
-                        >
-                          {isOverrideProductSet
-                            ? t('editOverrides')
-                            : t('editProductSet')}
-                        </Button>
-                      )}
-                      {showEditProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button'
-                          onClick={revertEditProductSet}
-                        >
-                          {t('cancelAndRevert')}
-                        </Button>
-                      )}
-                      {!showEditProductSet && editedProductSet && (
-                        <Button
-                          variant=''
-                          className='btn product-set-button ml-4 text-danger'
-                          onClick={revertEditProductSet}
-                        >
-                          {t('undoChanges')}
-                        </Button>
-                      )}
-                    </div>
+            render={() => (
+              <>
+                <div className='d-flex align-items-center flex-row w-100'>
+                  <ConfirmModal>
+                    {(confirm) => (
+                      <Typeahead
+                        name='productSetId'
+                        value={selectedProductSetTypeheadValue}
+                        containerStyles={{ width: '100%' }}
+                        onChangeValue={(typeheadValue) => {
+                          onChangeProductSet(Number(typeheadValue.id), confirm)
+                        }}
+                        isInvalid={!!overrideNameError}
+                        options={typeheadValues}
+                        placeholder={t('Design:choose')}
+                        noOptionsMessage={t('Design:noAvailableProductSets')}
+                      />
+                    )}
+                  </ConfirmModal>
+
+                  <div className='buttons-container'>
+                    {!showEditProductSet && !editedProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button mr-4'
+                        onClick={handleCreateProductSet}
+                      >
+                        {t('addNewProductSet')}
+                      </Button>
+                    )}
+                    {showOverrideProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button'
+                        onClick={onEditProductSet}
+                      >
+                        {isOverrideProductSet
+                          ? t('editOverrides')
+                          : t('editProductSet')}
+                      </Button>
+                    )}
+                    {showEditProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button'
+                        onClick={revertEditProductSet}
+                      >
+                        {t('cancelAndRevert')}
+                      </Button>
+                    )}
+                    {!showEditProductSet && editedProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button ml-4 text-danger'
+                        onClick={revertEditProductSet}
+                      >
+                        {t('undoChanges')}
+                      </Button>
+                    )}
                   </div>
+                </div>
 
-                  <Form.Control.Feedback type='invalid'>
-                    {errors?.productSetId?.message}
-                  </Form.Control.Feedback>
-                </>
-              )
-            }}
+                <div className='manual-form-error'>
+                  {errors?.productSetId?.message || overrideNameError}
+                </div>
+              </>
+            )}
           />
         </Form.Group>
       </div>
@@ -213,6 +213,7 @@ export const SelectEventProductSet = ({
             productSetId === editedProductSet?.id && editedProductSet
           }
           timeZone={timeZone}
+          overrideNameError={overrideNameError}
         />
       )}
     </>

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -23,12 +23,14 @@ interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues['editedProductSet']) => void
   defaultValues?: EditEventFormValues['editedProductSet']
   timeZone: string
+  overrideNameError?: string
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
   timeZone,
+  overrideNameError,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string
@@ -64,7 +66,15 @@ export const EditEventProductSet = ({
     mode: 'onChange',
   })
 
-  const { reset, handleSubmit, watch } = form
+  const { reset, handleSubmit, watch, setError } = form
+
+  useEffect(() => {
+    if (!overrideNameError) {
+      return
+    }
+    setError('name', { message: overrideNameError })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [overrideNameError])
 
   const formValues = watch()
 

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -12,6 +12,8 @@ export const getDefaultValues = (
 ): ProductSetFormValues => ({
   id: productSet?.id ?? 0,
   name: productSet?.name ?? '',
+  description: productSet?.description ?? '',
+  image: productSet?.image,
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? '',
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,27 +1,29 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
+import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 
 export const LAYOUT_GRID = 'grid'
 export const LAYOUT_LIST = 'list'
 
-type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST
-
 export type ActivityCardProps = {
   title: ReactNode
   duration: ReactNode
   price: ReactNode
+  description?: ReactNode
   onSelect: () => void
   isSelected: boolean
-  layout?: Layout
+  layout?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
   availableTimes?: string | null
+  image?: Image | null
 }
 
 export const ActivityCard = ({
   title,
   duration,
   price,
+  description,
   availableTimes,
-  // image,
+  image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
@@ -30,39 +32,48 @@ export const ActivityCard = ({
     return (
       <button
         type='button'
-        className={clsx('activity-card', isSelected && 'active')}
+        className={clsx('activity-card', { active: isSelected })}
         onClick={onSelect}
       >
-        <div className={clsx('d-flex', 'flex-column')}>
+        {image && (
+          <img src={image.url} alt={typeof title === 'string' ? title : ''} />
+        )}
+
+        <div>
           <div className='activity-card-title'>{title}</div>
           {duration && <div>{duration}</div>}
-
           {price && <div>{price}</div>}
+          {description && (
+            <div className='mt-2 activity-card-description'>{description}</div>
+          )}
         </div>
       </button>
     )
   }
 
   return (
-    <div role='button' onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
-      <div
-        className={clsx('list-activity-card', {
-          active: isSelected,
-        })}
-      >
-        <div className='description'>
-          <div className='title mb-2'>{title}</div>
-          {availableTimes && <div>{availableTimes}</div>}
-          {duration && (
-            <div>
-              <p>{duration}</p>
-            </div>
-          )}
+    <button
+      type='button'
+      onClick={onSelect}
+      className={clsx('activity-card list-activity-card', {
+        active: isSelected,
+      })}
+    >
+      {image && (
+        <img src={image.url} alt={typeof title === 'string' ? title : ''} />
+      )}
 
-          {price && <div>{price}</div>}
-        </div>
+      <div className='activity-card-info'>
+        <div className='activity-card-title mb-2'>{title}</div>
+        {availableTimes && <div>{availableTimes}</div>}
+        {duration && <div>{duration}</div>}
+        {price && <div>{price}</div>}
+        {description && (
+          <div className='mt-2 activity-card-description'>{description}</div>
+        )}
       </div>
+
       <hr className='list-activity-card-hr' />
-    </div>
+    </button>
   )
 }

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,6 +20,9 @@ export type ConfirmModalTypes =
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes
   children?: (confirm: (action: ConfirmAction) => void) => ReactNode
+  // confirm function  memoize the callback function. It's an alternative function
+  confirmationHandler?: () => Promise<boolean | undefined>
+  disabledButtons?: boolean
   title?: string
   content?: string | ReactNode
   onClose?: () => void
@@ -37,7 +40,9 @@ export function ConfirmModal({
   type = 'default',
   children,
   onClose,
+  confirmationHandler,
   title,
+  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -52,10 +57,16 @@ export function ConfirmModal({
     setIsOpen(() => true)
   }
 
-  const handleConfirmation = (e) => {
+  const handleConfirmation = async (e) => {
     e.stopPropagation()
-    if (!actionRef.current) return
-
+    if (!actionRef.current && !confirmationHandler) return
+    if (confirmationHandler) {
+      const res = await confirmationHandler()
+      if (res) {
+        setIsOpen(() => false)
+      }
+      return
+    }
     actionRef.current()
     setIsOpen(() => false)
   }
@@ -88,6 +99,7 @@ export function ConfirmModal({
           <Button
             variant='danger'
             className='btn-sm rounded'
+            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -105,12 +117,14 @@ export function ConfirmModal({
                   variant='outline'
                   className='cancel-button'
                   onClick={handleClose}
+                  disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('cancel')}
                 </Button>
                 <Button
                   variant='danger'
+                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -121,6 +135,7 @@ export function ConfirmModal({
               <>
                 <Button
                   variant='danger'
+                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -128,6 +143,7 @@ export function ConfirmModal({
                 </Button>
                 <Button
                   variant='success'
+                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >

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) => (