@licklist/design 0.69.3-dev.7 → 0.69.4

package/dist/zone/form/components/SortControl.js

@@ -77,9 +77,6 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
-                onWheel: function(event) {
-                    return event.currentTarget.blur();
-                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.69.3-dev.7",
+  "version": "0.69.4",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.30.0-dev.0",
+    "@licklist/core": "0.30.3",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.2-dev.1",
+    "@licklist/plugins": "0.33.1",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.30.0-dev.0",
+    "@licklist/core": "0.30.3",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.0-dev.0",
+    "@licklist/plugins": "0.33.1",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -202,10 +202,8 @@
       "yarn tsc"
     ]
   },
-  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  },
-  "stableVersion": "0.69.1-dev.3"
+  }
 }

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,7 +76,6 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
-
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error?.response?.data?.message || error.message,
+      message: error.message,
     })
   }
 

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

@@ -64,7 +64,6 @@ export interface EditEventFormProps extends HasPermissionProp {
   isExternalPaymentLinkEnabled?: boolean
   timeZone: string
   eventProductSet?: ProductSet
-  overrideNameError?: string
 }
 
 const eventImageTypes = {
@@ -86,7 +85,6 @@ export const EditEventForm = ({
   isExternalPaymentLinkEnabled,
   timeZone,
   eventProductSet,
-  overrideNameError,
 }: EditEventFormProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
 
@@ -408,7 +406,6 @@ export const EditEventForm = ({
             showEditProductSet={showEditProductSet}
             timeZone={timeZone}
             eventProductSet={eventProductSet}
-            overrideNameError={overrideNameError}
           />
 
           {hasPermission && !showEditProductSet && (

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

@@ -5,12 +5,9 @@ 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[]
@@ -20,7 +17,6 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setEditProductSetId: (value: string) => void
   timeZone: string
   eventProductSet?: ProductSet
-  overrideNameError?: string
 }
 
 export const SelectEventProductSet = ({
@@ -31,7 +27,6 @@ export const SelectEventProductSet = ({
   setShowEditProductSet,
   timeZone,
   eventProductSet,
-  overrideNameError,
 }: SelectEventProductSetProps) => {
   const productSets = eventProductSet
     ? [..._productSets, eventProductSet]
@@ -53,22 +48,6 @@ 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))
@@ -122,7 +101,6 @@ 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)
   }
 
@@ -138,73 +116,93 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name='productSetId'
-            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>
-                    )}
+            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>
                   </div>
-                </div>
 
-                <div className='manual-form-error'>
-                  {errors?.productSetId?.message || overrideNameError}
-                </div>
-              </>
-            )}
+                  <Form.Control.Feedback type='invalid'>
+                    {errors?.productSetId?.message}
+                  </Form.Control.Feedback>
+                </>
+              )
+            }}
           />
         </Form.Group>
       </div>
@@ -215,7 +213,6 @@ export const SelectEventProductSet = ({
             productSetId === editedProductSet?.id && editedProductSet
           }
           timeZone={timeZone}
-          overrideNameError={overrideNameError}
         />
       )}
     </>

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

@@ -23,14 +23,12 @@ 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
@@ -66,15 +64,7 @@ export const EditEventProductSet = ({
     mode: 'onChange',
   })
 
-  const { reset, handleSubmit, watch, setError } = form
-
-  useEffect(() => {
-    if (!overrideNameError) {
-      return
-    }
-    setError('name', { message: overrideNameError })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [overrideNameError])
+  const { reset, handleSubmit, watch } = form
 
   const formValues = watch()
 

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

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

package/src/events/event-card/utils.ts

@@ -21,14 +21,10 @@ export const formatContentWithoutTags = (
     .replace(/\s\s+/g, ' ')
 
   const words = trimmedText.slice(0, maxLength).split(' ')
-  const contentWithMinLength = content.slice(0, MIN_EVENT_DESCRIPTION_SIZE)
   const index = String(content).indexOf(words[words.length - 2])
-  const slicedContent = content.slice(0, index)
-  const contentWithMinSize = contentWithMinLength.length > slicedContent.length ? contentWithMinLength : slicedContent
-  return contentWithMinSize.concat('...')
+  return content.slice(0, index).concat('...')
 }
 
-export const MIN_EVENT_DESCRIPTION_SIZE = 150
 export const EVENT_DESCRIPTION_SIZE = 350
 
 /**

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

@@ -1,8 +1,6 @@
 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'
@@ -17,7 +15,6 @@ export type ActivityCardProps = {
   layout?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
   availableTimes?: string | null
   image?: Image | null
-  resources?: ZoneResourcesAvailability
 }
 
 export const ActivityCard = ({
@@ -30,7 +27,6 @@ export const ActivityCard = ({
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
-  resources,
 }: ActivityCardProps) => {
   if (layout === LAYOUT_GRID) {
     return (
@@ -50,7 +46,6 @@ export const ActivityCard = ({
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
           )}
-          {resources && <AvailabilityIndicator resources={resources} />}
         </div>
       </button>
     )
@@ -76,7 +71,6 @@ export const ActivityCard = ({
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>
         )}
-        {resources && <AvailabilityIndicator resources={resources} />}
       </div>
 
       <hr className='list-activity-card-hr' />

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