@licklist/design 0.69.2 → 0.69.3-dev.0

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

@@ -5,9 +5,12 @@ 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 { uniqBy } from 'lodash'
+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[]
@@ -16,16 +19,22 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void
   setEditProductSetId: (value: string) => void
   timeZone: string
+  eventProductSet?: ProductSet
 }
 
 export const SelectEventProductSet = ({
-  productSets,
+  productSets: _productSets,
   createProductSet,
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
   timeZone,
+  eventProductSet,
 }: SelectEventProductSetProps) => {
+  const productSets = eventProductSet
+    ? [..._productSets, eventProductSet]
+    : _productSets
+
   const { t } = useTranslation(['Design'])
   const form = useFormContext<EditEventFormValues>()
 
@@ -42,6 +51,22 @@ export const SelectEventProductSet = ({
   const productSetId = watch('productSetId')
   const editedProductSet = watch('editedProductSet')
 
+  const typeheadValues = uniqBy(
+    getTypeHeadItemsFromMenus(
+      editedProductSet
+        ? productSets.map((productSet) =>
+            productSet.id === editedProductSet.id
+              ? editedProductSet
+              : productSet,
+          )
+        : productSets,
+    ),
+    (item) => item.id,
+  )
+  const selectedProductSetTypeheadValue = productSetId
+    ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)
+    : undefined
+
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId))
@@ -95,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)
   }
 
@@ -110,93 +136,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

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

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/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -89,6 +89,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -101,6 +102,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

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/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/iframe/ryft/RyftPaymentForm.tsx

@@ -38,7 +38,7 @@ export interface RyftPaymentFormProps {
   isCreateLoading: boolean
   isAppUsingInIframe?: boolean
   onApplePayButtonClick?: () => void
-  applePayButtonDisabled?: boolean
+  payButtonDisabled?: boolean
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void,
@@ -57,6 +57,7 @@ export const RyftPaymentForm = ({
   initRyft,
   resetReferrer,
   onSubmit,
+  payButtonDisabled,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(['Design', 'Validation', 'Ryft'])
   const formRef = useRef<HTMLFormElement | null>(null)
@@ -89,7 +90,6 @@ export const RyftPaymentForm = ({
 
   const handleSubmit = async () => {
     setIsBtnDisabled(true)
-
     try {
       const paymentSession = await onSubmit()
 
@@ -142,17 +142,21 @@ export const RyftPaymentForm = ({
         t,
         isAppUsingInIframe,
         onApplePayButtonClick,
+        isDisableButton: !payButtonDisabled,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length, showApplePayButton],
+    [
+      formRef.current?.childNodes?.length,
+      showApplePayButton,
+      payButtonDisabled,
+    ],
   )
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
-
     initRyft(
       () => {
         addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
@@ -215,8 +219,12 @@ export const RyftPaymentForm = ({
         onSubmit={methods.handleSubmit(handleSubmit)}
         className='ryft-payment-form'
       >
+        <div className='form-disable-box' id="form-disable-box"/>
         <div className='submit-button-wrapper mt-4 p-1'>
-          <Button type='submit' disabled={isBtnDisabled || !isValid}>
+          <Button
+            type='submit'
+            disabled={isBtnDisabled || !isValid}
+          >
             {isBtnDisabled && <ButtonLoader />}
             {t('Design:buyNow')}
           </Button>

package/src/iframe/ryft/utils/ryft-form.ts

@@ -7,6 +7,7 @@ interface InjectComponentsInRyftForm
     'onApplePayButtonClick' | 'isAppUsingInIframe'
   > {
   t: TFunction<string[]>
+  isDisableButton?: boolean
   additionalPaymentMethodsEnabled?: boolean
 }
 
@@ -14,16 +15,19 @@ export const injectComponentsInRyftForm = ({
   t,
   additionalPaymentMethodsEnabled,
   isAppUsingInIframe,
+  isDisableButton,
   onApplePayButtonClick,
 }: InjectComponentsInRyftForm) => {
   const cardContainer = document.getElementById('ryft-pay-iframe')
-
   if (!cardContainer) {
     return
   }
   // Removing of the old title container
   document.getElementById('card-title-container')?.remove()
 
+  cardContainer.style.opacity = isDisableButton ? '0.6' : '1'
+  cardContainer.ariaDisabled = isDisableButton?.toString()
+
   const cardTitle = document.createElement('div')
   const cardText = document.createElement('div')
   const cardTitleContainer = document.createElement('div')
@@ -35,7 +39,6 @@ export const injectComponentsInRyftForm = ({
   cardContainer?.before(cardTitleContainer)
 
   const payGrid = document.getElementById('ryft-pay-grid')
-
   if (!payGrid || !additionalPaymentMethodsEnabled) {
     return
   }
@@ -58,6 +61,27 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
+  const payIframe = document.getElementById("ryft-pay-iframe");
+  if (payIframe) {
+    const formBox = document.getElementById('form-disable-box')
+    if (formBox) {
+      formBox.style.display = isDisableButton ? "block" : "none"
+    }
+
+    const googleButton = document.getElementById(
+      'gpay-button-online-api-id',
+    ) as HTMLButtonElement
+    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    if (googleButton) {
+      googleButton.disabled = isDisableButton
+      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+    }
+    if (appleButton) {
+      appleButton.disabled = isDisableButton
+      appleButton.style.opacity = isDisableButton ? '1' : '0.6'
+    }
+  }
+
   if (isAppUsingInIframe) {
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'

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/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/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}