@licklist/design 0.68.2 → 0.68.5-dev.0

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { range } from 'lodash'
-import { ReactComponent as SelectArrow } from '../../../assets/iframe/selectArrow.svg'
+import { DateTime } from 'luxon'
 import { CalendarSelect } from '../CalendarSelect'
 import { CalendarProps } from '../../Calendar'
 
@@ -26,15 +26,21 @@ export const CalendarButtons = ({
 }: CalendarButtonsProps) => {
   const { t } = useTranslation('Design')
 
-  const onSelectNextMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  const onSelectMonth = useCallback(
+    (value: string) => {
+      const selectedMonth = Number(value)
+      const nextDateTime = currentDate.set({ month: selectedMonth })
+
+      if (nextDateTime <= initialDate) {
+        setCurrentDate(initialDate)
+        return
+      }
 
-  const onSelectPreviousMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }))
+      setCurrentDate(nextDateTime)
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    [setCurrentDate, currentDate],
+  )
 
   const yearOptions = useMemo(
     () =>
@@ -45,10 +51,16 @@ export const CalendarButtons = ({
     [initialDate],
   )
 
-  const canMoveBack = useMemo(
-    () => currentDate > initialDate,
-    [currentDate, initialDate],
-  )
+  const monthOptions = useMemo(() => {
+    const initialMonth =
+      currentDate.year > initialDate.year ? 1 : initialDate.month
+    return range(initialMonth, 13).map((monthNumber) => ({
+      label: DateTime.fromObject({ month: monthNumber }).toLocaleString({
+        month: 'long',
+      }),
+      value: monthNumber,
+    }))
+  }, [initialDate, currentDate])
 
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value)
@@ -110,22 +122,11 @@ export const CalendarButtons = ({
       <hr />
       <div className="calendar-buttons">
         <div className="buttons-wrapper">
-          <Button
-            className="calendar-button left-button"
-            onClick={onSelectPreviousMonth}
-            disabled={!canMoveBack}
-            variant="link"
-          >
-            <SelectArrow />
-          </Button>
-          <div className="month-title">{currentDate.toFormat('MMMM')}</div>
-          <Button
-            className="calendar-button"
-            onClick={onSelectNextMonth}
-            variant="link"
-          >
-            <SelectArrow />
-          </Button>
+          <CalendarSelect
+            options={monthOptions}
+            onChange={onSelectMonth}
+            value={currentDate.month}
+          />
         </div>
         <CalendarSelect
           options={yearOptions}

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -89,6 +89,13 @@ export function IntervalInput({
     trigger('end')
   }
 
+  const onChangeRecurrent = (checked: boolean) => {
+    setRecurrent(checked)
+    if (!checked) {
+      setValue('rrule', null)
+    }
+  }
+
   return (
     <>
       <Form.Row className="interval-container">
@@ -144,7 +151,7 @@ export function IntervalInput({
             custom
             checked={recurrent}
             onChange={({ target: { checked } }) => {
-              setRecurrent(checked)
+              onChangeRecurrent(checked)
             }}
             disabled={disabled || Boolean(editedProductSet)}
           />

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

@@ -256,7 +256,6 @@ export const EditEventForm = ({
             <Controller
               render={({ field }) => (
                 <TipTapEditor
-                  withEmoji={false}
                   viewMode={false}
                   onUpdate={field.onChange}
                   content={field.value}

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[]
@@ -42,6 +44,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))
@@ -95,6 +112,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)
   }
 
@@ -110,93 +128,72 @@ 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)
+                        }}
+                        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>
-                </>
-              )
-            }}
+                <Form.Control.Feedback type="invalid">
+                  {errors?.productSetId?.message}
+                </Form.Control.Feedback>
+              </>
+            )}
           />
         </Form.Group>
       </div>

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

@@ -37,7 +37,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -71,56 +71,56 @@ export function IframeEventCard({
         className,
       )}
       onClick={
-        goToDetails || !snippetSetting.displayBookingButtonOnEventList
+        goToDetails || !snippetSetting?.displayBookingButtonOnEventList
           ? onClick
           : undefined
       }
     >
-      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
+      {showMoreInfo && <div className='iframe-event-card__info-icon'>i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? 'card-image'}
-          variant="top"
-          as="div"
+          variant='top'
+          as='div'
           style={{ backgroundImage: `url("${imageSrc}")` }}
         />
       )}
       <Card.Body
         className={clsx('d-flex', 'flex-column', !imageSrc && 'no-image')}
       >
-        <Card.Title className="iframe-event-card__title" id={titleId}>
+        <Card.Title className='iframe-event-card__title' id={titleId}>
           {title}
         </Card.Title>
 
-        <div className="flex-grow-1 iframe-event-card__description">
-          <Card.Text as="div">
-            <div className="d-flex align-items-center mb-3">
-              <div className="icon-wrapper">
+        <div className='flex-grow-1 iframe-event-card__description'>
+          <Card.Text as='div'>
+            <div className='d-flex align-items-center mb-3'>
+              <div className='icon-wrapper'>
                 <CalendarSvg />
               </div>
-              <p className="m-0 list-view-hided">{date}</p>
-              <p className="m-0 grid-view-hided">{shortDate}</p>
+              <p className='m-0 list-view-hided'>{date}</p>
+              <p className='m-0 grid-view-hided'>{shortDate}</p>
             </div>
           </Card.Text>
 
           {type && (
-            <Card.Text as="div" className="list-view-hided">
-              <div className="d-flex align-items-center mb-3">
-                <div className="icon-wrapper">
+            <Card.Text as='div' className='list-view-hided'>
+              <div className='d-flex align-items-center mb-3'>
+                <div className='icon-wrapper'>
                   <ClockSvg />
                 </div>
-                <p className="m-0">{type}</p>
+                <p className='m-0'>{type}</p>
               </div>
             </Card.Text>
           )}
 
           {typeof cost === 'number' && (
-            <Card.Text as="div">
-              <div className="d-flex align-items-center mb-3">
-                <div className="icon-wrapper">
+            <Card.Text as='div'>
+              <div className='d-flex align-items-center mb-3'>
+                <div className='icon-wrapper'>
                   <TicketSvg />
                 </div>
-                <p className="m-0">
+                <p className='m-0'>
                   {t('from')}{' '}
                   {formatNumber(cost, { style: 'currency', currency: 'GBP' })}
                 </p>
@@ -129,7 +129,7 @@ export function IframeEventCard({
           )}
 
           {description && (
-            <Card.Text as="div" className="list-view-hided">
+            <Card.Text as='div' className='list-view-hided'>
               <TipTapEditor
                 viewMode
                 disabled
@@ -138,15 +138,16 @@ export function IframeEventCard({
               />
             </Card.Text>
           )}
-          {!!snippetSetting.displayBookingButtonOnEventList && showMoreInfo && (
-            <Button
-              className="step-save-btn w-25 mt-4"
-              type="button"
-              onClick={onClick}
-            >
-              {t('book')}
-            </Button>
-          )}
+          {!!snippetSetting?.displayBookingButtonOnEventList &&
+            showMoreInfo && (
+              <Button
+                className='step-save-btn w-25 mt-4'
+                type='button'
+                onClick={onClick}
+              >
+                {t('book')}
+              </Button>
+            )}
         </div>
       </Card.Body>
     </Card>

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -51,6 +51,7 @@ export const ProductQuantityInput = ({
       hasDeposit: category.allowDeposits && product?.deposit < product.price,
       price: product.price,
       productCategoryId: category.id,
+      zoneId: category.zone?.id,
       quantity,
       capacity: product?.capacity,
     })

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -72,7 +72,6 @@ export const useResizePageBody = () => {
   }, [
     height,
     width,
-    rightBlockHeight,
     onExpandStarted,
     onExpanded,
     onCollapseStarted,

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

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

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[]
@@ -24,4 +24,5 @@ const DropDown = forwardRef((props: Props, ref: any) => {
 })
 
 DropDown.displayName = 'DropDown'
+
 export default DropDown

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