@licklist/design 0.69.3-dev.6 → 0.69.3

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

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

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

@@ -1,85 +1,68 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
-import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
-import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
-import { AvailabilityIndicator } from '../../availability-indicator'
 
 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?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
+  layout?: Layout
   availableTimes?: string | null
-  image?: Image | null
-  resources?: ZoneResourcesAvailability
 }
 
 export const ActivityCard = ({
   title,
   duration,
   price,
-  description,
   availableTimes,
-  image,
+  // image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
-  resources,
 }: ActivityCardProps) => {
   if (layout === LAYOUT_GRID) {
     return (
       <button
         type='button'
-        className={clsx('activity-card', { active: isSelected })}
+        className={clsx('activity-card', isSelected && 'active')}
         onClick={onSelect}
       >
-        {image && (
-          <img src={image.url} alt={typeof title === 'string' ? title : ''} />
-        )}
-
-        <div>
+        <div className={clsx('d-flex', 'flex-column')}>
           <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>
-          )}
-          {resources && <AvailabilityIndicator resources={resources} />}
         </div>
       </button>
     )
   }
 
   return (
-    <button
-      type='button'
-      onClick={onSelect}
-      className={clsx('activity-card list-activity-card', {
-        active: isSelected,
-      })}
-    >
-      {image && (
-        <img src={image.url} alt={typeof title === 'string' ? title : ''} />
-      )}
+    <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>
+          )}
 
-      <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>
-        )}
-        {resources && <AvailabilityIndicator resources={resources} />}
+          {price && <div>{price}</div>}
+        </div>
       </div>
-
       <hr className='list-activity-card-hr' />
-    </button>
+    </div>
   )
 }

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

@@ -89,7 +89,6 @@ 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}
@@ -102,14 +101,6 @@ 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,7 +51,6 @@ 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,7 +61,6 @@ 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
-  payButtonDisabled?: boolean
+  applePayButtonDisabled?: boolean
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void,
@@ -57,7 +57,6 @@ export const RyftPaymentForm = ({
   initRyft,
   resetReferrer,
   onSubmit,
-  payButtonDisabled,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(['Design', 'Validation', 'Ryft'])
   const formRef = useRef<HTMLFormElement | null>(null)
@@ -90,6 +89,7 @@ export const RyftPaymentForm = ({
 
   const handleSubmit = async () => {
     setIsBtnDisabled(true)
+
     try {
       const paymentSession = await onSubmit()
 
@@ -142,21 +142,17 @@ export const RyftPaymentForm = ({
         t,
         isAppUsingInIframe,
         onApplePayButtonClick,
-        isDisableButton: !payButtonDisabled,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      formRef.current?.childNodes?.length,
-      showApplePayButton,
-      payButtonDisabled,
-    ],
+    [formRef.current?.childNodes?.length, showApplePayButton],
   )
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
+
     initRyft(
       () => {
         addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
@@ -219,7 +215,6 @@ 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}>
             {isBtnDisabled && <ButtonLoader />}

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

@@ -7,7 +7,6 @@ interface InjectComponentsInRyftForm
     'onApplePayButtonClick' | 'isAppUsingInIframe'
   > {
   t: TFunction<string[]>
-  isDisableButton?: boolean
   additionalPaymentMethodsEnabled?: boolean
 }
 
@@ -15,19 +14,16 @@ 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')
@@ -39,6 +35,7 @@ export const injectComponentsInRyftForm = ({
   cardContainer?.before(cardTitleContainer)
 
   const payGrid = document.getElementById('ryft-pay-grid')
+
   if (!payGrid || !additionalPaymentMethodsEnabled) {
     return
   }
@@ -61,29 +58,6 @@ 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 React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,9 +20,6 @@ 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
@@ -40,9 +37,7 @@ export function ConfirmModal({
   type = 'default',
   children,
   onClose,
-  confirmationHandler,
   title,
-  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -57,16 +52,10 @@ export function ConfirmModal({
     setIsOpen(() => true)
   }
 
-  const handleConfirmation = async (e) => {
+  const handleConfirmation = (e) => {
     e.stopPropagation()
-    if (!actionRef.current && !confirmationHandler) return
-    if (confirmationHandler) {
-      const res = await confirmationHandler()
-      if (res) {
-        setIsOpen(() => false)
-      }
-      return
-    }
+    if (!actionRef.current) return
+
     actionRef.current()
     setIsOpen(() => false)
   }
@@ -99,7 +88,6 @@ export function ConfirmModal({
           <Button
             variant='danger'
             className='btn-sm rounded'
-            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -117,14 +105,12 @@ 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}
                 >
@@ -135,7 +121,6 @@ export function ConfirmModal({
               <>
                 <Button
                   variant='danger'
-                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -143,7 +128,6 @@ 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,7 +434,6 @@ 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 || ''}

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

@@ -9,20 +9,15 @@ 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
-  duplicateProductSetName: string
-  onChangeDuplicateProductSetName: (value: string) => void
-  onCopy: () => Promise<boolean | undefined>
+  onCopy: () => void
   onRemove: () => void
-  isLoading?: boolean
   className?: string
   override?: number
-  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -31,10 +26,6 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
-  onChangeDuplicateProductSetName,
-  duplicateProductSetName,
-  duplicateProductSetError,
-  isLoading,
   className = '',
   hasPermission = true,
   override = 0,
@@ -44,23 +35,19 @@ 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={onCardClick}
+      onClick={() => RouteService.redirectTo(href)}
+      onKeyUp={() => RouteService.redirectTo(href)}
     >
       <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'>
@@ -92,33 +79,14 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item
-                        action
-                        as='div'
-                        role='button'
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action as='div'>
                         {Boolean(onCopy) && (
-                          <ConfirmModal
-                            // confirm function  memoize the callback function and it leads to bugs
-                            confirmationHandler={onCopy}
-                            disabledButtons={isLoading}
-                            content={
-                              <ProductSetNameControl
-                                value={duplicateProductSetName}
-                                onChange={onChangeDuplicateProductSetName}
-                                error={duplicateProductSetError}
-                              />
-                            }
-                          >
+                          <ConfirmModal>
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false)
-                                  onChangeDuplicateProductSetName(name)
-                                  // confirm function  memoize the callback function and it leads to bugs
-                                  confirm(() => {})
+                                  confirm(onCopy)
                                 }}
                                 name={t('duplicate')}
                                 className='product-set-card-menu-item-text'
@@ -127,14 +95,7 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item
-                        action
-                        className='text-danger'
-                        as='div'
-                        role='button'
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action className='text-danger' as='div'>
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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

@@ -198,8 +198,6 @@ export const DateAndRecurrenceInput = ({
     move(prevIndex, nextIndex)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
-
   useEffect(() => {
     if (fields.length) {
       clearErrors('menuRecurrences')
@@ -309,7 +307,7 @@ export const DateAndRecurrenceInput = ({
           />
 
           <div className='manual-form-error'>
-            {errorMessage}
+            {errors.menuRecurrences?.message}
           </div>
         </div>
       </OverlayTrigger>

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

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