@licklist/design 0.70.5 → 0.70.6-dev.0

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -1,9 +1,15 @@
 import { FunctionComponent, SVGProps } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import {
+  AVAILABILITY_FORMAT_NUMBER,
+  AvailabilityFormat,
+} from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
+import { useWindowDimensions } from '@licklist/plugins'
 import { ReactComponent as AvailableIcon } from '../assets/iframe/available.svg'
 import { ReactComponent as LimitedIcon } from '../assets/iframe/limited.svg'
 import { ReactComponent as SoldOutIcon } from '../assets/iframe/soldOut.svg'
+import { TAB_WIDTH } from '../iframe/page/components/PageBody/constants'
 
 const LOTS_OF_SPACE_LIMIT = 0.2
 const LIMITED_LIMIT = 0.8
@@ -13,38 +19,94 @@ type Config = {
   Icon: FunctionComponent<SVGProps<SVGSVGElement>>
 }
 
-const getIconsAndLabels = ({
+type GetIconsAndLabelsWithArgumentResult = Config & {
+  argument?: number
+}
+
+interface GetIconsAndLabels extends ZoneResourcesAvailability {
+  availabilityFormat?: AvailabilityFormat | null
+}
+interface GetAppropreateLabelFormat extends GetIconsAndLabels {
+  label?: string
+}
+
+const getLabelsWithArgument = ({
   bookedResources,
   totalResources,
-}: ZoneResourcesAvailability): Config => {
-  if (bookedResources === totalResources) {
-    return { label: 'soldOut', Icon: SoldOutIcon }
+  availabilityFormat,
+  label,
+}: GetAppropreateLabelFormat): {
+  label: string
+  argument?: number
+} => {
+  const availableResources = totalResources - bookedResources
+
+  if (availabilityFormat !== AVAILABILITY_FORMAT_NUMBER) {
+    return { label }
   }
 
+  return availableResources === 1
+    ? { label: 'availableSingleSpace' }
+    : { label: 'availableMultipleSpaces', argument: availableResources }
+}
+
+const getIconsAndLabelsWithArgument = ({
+  bookedResources,
+  totalResources,
+  availabilityFormat,
+}: GetIconsAndLabels): GetIconsAndLabelsWithArgumentResult => {
   // lots of space if less than 80% booked
   if (bookedResources / totalResources <= LOTS_OF_SPACE_LIMIT) {
-    return { label: 'lotsOfSpace', Icon: AvailableIcon }
+    return {
+      ...getLabelsWithArgument({
+        bookedResources,
+        totalResources,
+        availabilityFormat,
+        label: 'lotsOfSpace',
+      }),
+      Icon: AvailableIcon,
+    }
   }
 
   if (bookedResources / totalResources >= LIMITED_LIMIT) {
-    return { label: 'limited', Icon: LimitedIcon }
+    return {
+      ...getLabelsWithArgument({
+        bookedResources,
+        totalResources,
+        availabilityFormat,
+        label: 'limited',
+      }),
+      Icon: LimitedIcon,
+    }
   }
 
-  return { label: 'available', Icon: AvailableIcon }
+  return {
+    ...getLabelsWithArgument({
+      bookedResources,
+      totalResources,
+      availabilityFormat,
+      label: 'available',
+    }),
+    Icon: AvailableIcon,
+  }
 }
 
 type AvailabilityIndicatorProps = {
-  resources: ZoneResourcesAvailability
+  resources?: ZoneResourcesAvailability
   isUnavailable?: boolean
   isSoldOut?: boolean
+  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const AvailabilityIndicator = ({
   resources,
   isUnavailable,
-  isSoldOut,
+  isSoldOut: _isSoldOut,
+  availabilityFormat,
 }: AvailabilityIndicatorProps) => {
   const { t } = useTranslation('Design')
+  const isSoldOut =
+    _isSoldOut || resources?.bookedResources === resources?.totalResources
 
   if (isUnavailable) {
     return <Indicator Icon={SoldOutIcon} label={t('notAvailable')} />
@@ -54,14 +116,27 @@ export const AvailabilityIndicator = ({
     return <Indicator Icon={SoldOutIcon} label={t('soldOut')} />
   }
 
-  const { Icon, label } = getIconsAndLabels(resources)
+  const { Icon, label, argument } = getIconsAndLabelsWithArgument({
+    ...resources,
+    availabilityFormat,
+  })
 
-  return <Indicator Icon={Icon} label={t(label)} />
+  return (
+    <Indicator
+      Icon={Icon}
+      label={t(label, argument ? { argument } : undefined)}
+    />
+  )
 }
 
-const Indicator = ({ Icon, label }: Config) => (
-  <div className='availability-indicator'>
-    <Icon />
-    <div>{label}</div>
-  </div>
-)
+const Indicator = ({ Icon, label }: Config) => {
+  const { width } = useWindowDimensions()
+  const iconSizes =
+    width > TAB_WIDTH ? { height: 15, width: 11 } : { height: 11, width: 7 }
+  return (
+    <div className='availability-indicator'>
+      <Icon height={iconSizes.height} width={iconSizes.width} viewBox='auto' />
+      <div className='indicator-label'>{label}</div>
+    </div>
+  )
+}

package/src/calendar/Calendar.tsx

@@ -1,5 +1,6 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react'
 import { DateTime } from 'luxon'
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { DateTimeButtonProps } from 'src/date-time-button'
 import { CalendarButtons } from './components/CalendarButtons'
 import { CalendarDates } from './components/CalendarDates'
@@ -21,6 +22,7 @@ export type CalendarProps = {
   fromPrice?: string | ReactElement | null
   isLoading?: boolean
   initialDate?: DateTime
+  availabilityFormat?: AvailabilityFormat | null
   getDateTimeButtonProps: (
     date: DateTime,
   ) => Pick<DateTimeButtonProps, 'resources' | 'showResources' | 'isDisabled'>

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -11,6 +11,7 @@ export type CalendarDatesProps = Pick<
   | 'setSelectedDate'
   | 'fromPrice'
   | 'getDateTimeButtonProps'
+  | 'availabilityFormat'
 >
 
 export const CalendarDates = ({
@@ -18,6 +19,7 @@ export const CalendarDates = ({
   selectedDate,
   setSelectedDate,
   fromPrice,
+  availabilityFormat,
   getDateTimeButtonProps,
 }: CalendarDatesProps) => {
   const fillCalendarDates = useMemo(() => {
@@ -56,6 +58,7 @@ export const CalendarDates = ({
               onSelect={() => setSelectedDate(date)}
               price={fromPrice}
               variant={Variant.month}
+              availabilityFormat={availabilityFormat}
               {...props}
             />
           )

package/src/calendar/utils/index.ts

@@ -1,40 +1,31 @@
+import { TimeZone } from '@licklist/core/dist/DataMapper/Common/TimeZoneDataMapper'
 import { DateTime, Interval } from 'luxon'
 
-export const getMonthCalendarDates = (
-  initialDate: DateTime,
-  timeZone?: string,
-): DateTime[] => {
+type Builder = (args: {
+  initialDate?: DateTime
+  timeZone: TimeZone['name']
+}) => DateTime[]
+
+export const getMonthCalendarDates: Builder = ({
+  initialDate: _initialDate,
+  timeZone,
+}): DateTime[] => {
+  const initialDate = _initialDate || DateTime.now().setZone(timeZone)
+
   const startOfMonth = initialDate.startOf('month')
   const endOfMonth = initialDate.endOf('month')
 
-  const dateTimes = Interval.fromDateTimes(startOfMonth, endOfMonth)
+  return Interval.fromDateTimes(startOfMonth, endOfMonth)
     .splitBy({ day: 1 })
     .map((d) => d.start)
-
-  if (timeZone) {
-    return dateTimes.map((date) =>
-      date.setZone(timeZone, { keepLocalTime: true }),
-    )
-  }
-
-  return dateTimes
 }
 
-export const getWeekCalendarDates = (
-  initialDate: DateTime,
-  timeZone?: string,
-): DateTime[] => {
+export const getWeekCalendarDates: Builder = ({ timeZone }): DateTime[] => {
+  const initialDate = DateTime.now().setZone(timeZone)
+
   const lastDay = initialDate.plus({ days: 7 })
 
-  const dateTimes = Interval.fromDateTimes(initialDate, lastDay)
+  return Interval.fromDateTimes(initialDate, lastDay)
     .splitBy({ day: 1 })
     .map((d) => d.start)
-
-  if (timeZone) {
-    return dateTimes.map((date) =>
-      date.setZone(timeZone, { keepLocalTime: true }),
-    )
-  }
-
-  return dateTimes
 }

package/src/date-time-button/DateContent.tsx

@@ -6,9 +6,9 @@ import {
 } from '@licklist/core/dist/Config'
 import { getDayWithOrdinal } from '@licklist/plugins/dist/utils/formatDate'
 import clsx from 'clsx'
-import { isToday, isTomorrow } from 'date-fns'
 import { DateTime } from 'luxon'
 import { useTranslation } from 'react-i18next'
+import { isToday, isTomorrow } from '@licklist/plugins/dist'
 import { DateTimeButtonProps, Variant } from './DateTimeButton'
 
 type DateContentProps = Pick<
@@ -55,9 +55,9 @@ export const DateContent = ({
 }
 
 const getDate = (date: DateTime): string => {
-  if (isToday(date.toJSDate())) return 'today'
+  if (isToday(date)) return 'today'
 
-  if (isTomorrow(date.toJSDate())) return 'tomorrow'
+  if (isTomorrow(date)) return 'tomorrow'
 
   return date.toFormat(DAY_OF_WEEK)
 }

package/src/date-time-button/DateTimeButton.tsx

@@ -2,6 +2,7 @@ import { ReactElement } from 'react'
 import clsx from 'clsx'
 import { DateTime } from 'luxon'
 import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { AvailabilityIndicator } from '../availability-indicator'
 import { DateContent } from './DateContent'
 
@@ -21,6 +22,7 @@ export type DateTimeButtonProps = {
   resources?: ZoneResourcesAvailability | null
   showResources?: boolean
   variant: Variant
+  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const DateTimeButton = ({
@@ -33,6 +35,7 @@ export const DateTimeButton = ({
   resources,
   showResources,
   variant = Variant.week,
+  availabilityFormat,
 }: DateTimeButtonProps) => {
   const isSoldOut =
     _isSoldOut ||
@@ -43,7 +46,7 @@ export const DateTimeButton = ({
   const isPast = variant === Variant.time ? isPastTime(date) : isPastDate(date)
 
   const isDisabled = _isDisabled || isSoldOut || isPast
-
+  const isUnavailable = _isDisabled || isPast
   return (
     <button
       type='button'
@@ -67,10 +70,11 @@ export const DateTimeButton = ({
         variant={variant}
       />
       {price && !isDisabled && <div className='price'>{price}</div>}
-      {showResources && resources && (
+      {showResources && (resources || isUnavailable) && (
         <AvailabilityIndicator
+          availabilityFormat={availabilityFormat}
           resources={resources}
-          isUnavailable={_isDisabled || isPast}
+          isUnavailable={isUnavailable}
           isSoldOut={isSoldOut}
         />
       )}

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

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

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -49,6 +49,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
+    // TODO fix often updating of canvasSizes, which leads to flashing poingts
     const canvasSizes = useCanvasSize({ width, height })
 
     return (

package/src/events/event-venue-map/hooks/useCanvasSize.ts

@@ -10,13 +10,17 @@ export const useCanvasSize = ({
   width: componentWidth,
   height: componentHeight,
 }: CanvasSizeProps) => {
+  // TODO Fix often updating of width and height
   const { width, height } = useWindowDimensions()
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const memoizedDimensions = useMemo(() => ({ width, height }), [width])
+
   const memoedComponentParameters = useMemo(() => {
     if (!componentWidth && !componentHeight) return null
 
     return { width: componentWidth, height: componentHeight }
   }, [componentWidth, componentHeight])
 
-  return memoedComponentParameters || { width, height }
+  return memoedComponentParameters || memoizedDimensions
 }

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

@@ -2,6 +2,7 @@ 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 { AvailabilityFormat } from '@licklist/core/dist/DataMapper/Provider/SnippetDataMapper'
 import { AvailabilityIndicator } from '../../availability-indicator'
 
 export const LAYOUT_GRID = 'grid'
@@ -18,6 +19,7 @@ export type ActivityCardProps = {
   availableTimes?: string | null
   image?: Image | null
   resources?: ZoneResourcesAvailability
+  availabilityFormat?: AvailabilityFormat | null
 }
 
 export const ActivityCard = ({
@@ -30,6 +32,7 @@ export const ActivityCard = ({
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
+  availabilityFormat,
   resources,
 }: ActivityCardProps) => {
   if (layout === LAYOUT_GRID) {
@@ -50,7 +53,12 @@ export const ActivityCard = ({
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
           )}
-          {resources && <AvailabilityIndicator resources={resources} />}
+          {resources && (
+            <AvailabilityIndicator
+              resources={resources}
+              availabilityFormat={availabilityFormat}
+            />
+          )}
         </div>
       </button>
     )
@@ -76,7 +84,12 @@ export const ActivityCard = ({
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>
         )}
-        {resources && <AvailabilityIndicator resources={resources} />}
+        {resources && (
+          <AvailabilityIndicator
+            resources={resources}
+            availabilityFormat={availabilityFormat}
+          />
+        )}
       </div>
 
       <hr className='list-activity-card-hr' />

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -30,7 +30,6 @@ export function TicketDescription({
   canExpand = true,
 }: TicketDescriptionProps) {
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
-  const showDescription = !!description
 
   const wrapperClasses = clsx('ticket-description', className)
 
@@ -42,24 +41,6 @@ export function TicketDescription({
     '--description-wrapper-height': 'inherit',
   } as CSSProperties
 
-  const renderDescription = () => (
-    <div className='description-content'>
-      <div className='d-flex flex-column'>
-        <div className='product-title'>
-          {title} {isRequired && <span>*</span>}
-        </div>
-        {showDescription && (
-          <TipTapEditor
-            viewMode
-            disabled
-            content={description}
-            editorStyle={{ backgroundColor: 'transparent' }}
-          />
-        )}
-      </div>
-    </div>
-  )
-
   return (
     <div className={wrapperClasses}>
       <div
@@ -78,14 +59,46 @@ export function TicketDescription({
               isExpanded={isDescriptionExpanded}
               setIsExpanded={setIsDescriptionExpanded}
             >
-              {renderDescription()}
+              <Description
+                title={title}
+                isRequired={isRequired}
+                description={description}
+              />
             </TextExpand>
           ) : (
-            renderDescription()
+            <Description
+              title={title}
+              isRequired={isRequired}
+              description={description}
+            />
           )}
         </div>
       </div>
-      {price && <div className={clsx(showDescription && 'mt-5')}>{price}</div>}
+      {price && <div className={clsx({ 'mt-5': description })}>{price}</div>}
     </div>
   )
 }
+
+const Description = ({
+  title,
+  isRequired,
+  description,
+}: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description'>) => (
+  <div className='description-content'>
+    <div className='d-flex flex-column'>
+      <div className='product-title'>
+        {title} {isRequired && <span>*</span>}
+      </div>
+
+      {!!description && (
+        <TipTapEditor
+          viewMode
+          disabled
+          content={description}
+          editorStyle={{ backgroundColor: 'transparent' }}
+          hideEmptyEditor
+        />
+      )}
+    </div>
+  </div>
+)

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

@@ -33,6 +33,11 @@ export const ryftErrorMap: Record<string, string> = {
 
 export type RyftPaymentFormValues = Record<string, never>
 
+interface GoogleAndApplePayResponse {
+  paymentSession: AttemptPaymentResponse
+  eventName: string
+}
+
 export interface RyftPaymentFormProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   accountId: any
@@ -89,10 +94,10 @@ export const RyftPaymentForm = ({
     setReferrerBeforePayment()
   }
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (_paymentSession?: AttemptPaymentResponse) => {
     setIsBtnDisabled(true)
     try {
-      const paymentSession = await onSubmit()
+      const paymentSession = _paymentSession || (await onSubmit())
 
       if (!paymentSession) {
         setRyftError('unknown_error')
@@ -164,6 +169,12 @@ export const RyftPaymentForm = ({
         addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
           setIsValid(e.isValid)
         })
+        addEventHandler(
+          'walletPaymentSessionResult',
+          (e: MessageEvent<GoogleAndApplePayResponse>['data']) => {
+            handleSubmit(e.paymentSession)
+          },
+        )
 
         setRyftInitFailure(false)
       },
@@ -218,7 +229,7 @@ export const RyftPaymentForm = ({
         ref={formRef}
         id='ryft-pay-form'
         noValidate
-        onSubmit={methods.handleSubmit(handleSubmit)}
+        onSubmit={methods.handleSubmit(() => handleSubmit())}
         className='ryft-payment-form'
       >
         <div className='form-disable-box' id='form-disable-box' />

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

@@ -61,20 +61,22 @@ 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");
+  const payIframe = document.getElementById('ryft-pay-iframe')
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? "block" : "none"
+      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
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -86,7 +88,6 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
-    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

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