@licklist/design 0.70.4 → 0.70.5-dev.1

package/dist/styles/sales/BookingFilter.scss

@@ -6,6 +6,7 @@
 
   .main-filter-section {
     display: flex;
+    gap: 1rem;
     justify-content: center;
 
     .search {
@@ -46,7 +47,6 @@
 
     .buttons {
       display: flex;
-      margin-left: 1rem;
 
       .btn {
         padding: 0;
@@ -122,8 +122,6 @@
       flex-direction: column;
 
       .buttons {
-        margin-top: 1rem;
-        margin-left: 0;
         justify-content: space-between;
       }
     }
@@ -174,6 +172,7 @@
 
   .additional-filter-container {
     flex-wrap: nowrap;
+    align-items: baseline;
 
     @include media-breakpoint-down(md) {
       flex-wrap: wrap;

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/styles/sales/BookingTabs.scss

@@ -1,12 +1,19 @@
-.booking-tabs-pane {
+.booking-tabs-panel {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   align-items: center;
-  height: 2.75rem;
+  gap: 1rem;
   background-color: $white;
 
   .booking-tabs {
+    display: flex;
+    gap: 0.5rem;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+      align-self: center;
+    }
+
     svg {
       g > rect:first-child {
         fill: $white;
@@ -20,40 +27,29 @@
         }
       }
     }
-
-    @include media-breakpoint-down(sm) {
-      width: 4rem;
-    }
   }
 
   .content {
     display: flex;
+    flex-grow: 1;
+    gap: 1rem;
     justify-content: space-between;
-    width: 85%;
-    flex-direction: row;
+    align-items: center;
 
     @include media-breakpoint-down(sm) {
-      display: flex;
       flex-direction: column;
       align-items: start;
-      height: 4rem;
-    }
-
-    .booking {
-      @include media-breakpoint-down(sm) {
-        height: 13rem;
-      }
+      gap: 0.5rem;
     }
   }
 
   .separator {
-    height: 2.75rem;
+    align-self: stretch;
     border-right: 2px solid #dcdcdc;
   }
 
   .children {
     flex: 1;
-    margin-left: 1rem;
 
     @include media-breakpoint-down(sm) {
       display: flex;
@@ -64,12 +60,13 @@
 
   .buttons {
     display: flex;
+    align-items: center;
 
     .btn {
       display: flex;
       align-items: center;
-      height: 100%;
-      height: 2.125rem;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
     }
 
     .btn-outline-primary {
@@ -96,13 +93,19 @@
       }
     }
 
-    @include media-breakpoint-down(sm) {
-      display: flex;
+    @include media-breakpoint-down(lg) {
       flex-direction: column;
+      align-items: stretch;
+      gap: 0.5rem;
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: row;
       align-items: start;
       gap: 0.5rem;
       margin-top: 0.5rem;
       white-space: nowrap;
+      flex-wrap: wrap;
     }
   }
 
@@ -113,10 +116,4 @@
     margin-top: 1rem;
     height: 100%;
   }
-
-  .booking {
-    @include media-breakpoint-down(sm) {
-      height: 13rem;
-    }
-  }
 }

package/dist/zone/form/components/GameDurationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CA+B1B,CAAA"}
+{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CAgC1B,CAAA"}

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

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

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}

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

@@ -77,6 +77,9 @@ 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.70.4",
+  "version": "0.70.5-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.30.3",
+    "@licklist/core": "0.31.1-dev.4",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.6",
+    "@licklist/plugins": "0.34.0-dev.4",
     "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.3",
+    "@licklist/core": "0.31.1-dev.4",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.6",
+    "@licklist/plugins": "0.34.0-dev.4",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -202,8 +202,10 @@
       "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,6 +76,7 @@ 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/assets/iframe/available.svg

@@ -1,5 +1,5 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<svg  viewBox="auto" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="14%" y="0" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
+<rect x="14%" y="33%" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
+<rect x="14%" y="66%" width="63%" height="29%" rx="15%" fill="#4CF973" stroke="white"/>
 </svg>

package/src/auth/Login/LoginComponent.tsx

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

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: 'availableSingleResource' }
+    : { label: 'availableMultipleResources', 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
   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/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -17,6 +17,7 @@ import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permi
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 
 import {
   CreateSortableListItem,
@@ -84,7 +85,7 @@ export const CustomFieldSet = ({
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
-
+  const notification = useNotification()
   const { fields, append, remove } = useFieldArray({
     control,
     name: CUSTOM_FIELDS,
@@ -97,6 +98,13 @@ export const CustomFieldSet = ({
 
     if (!response) return
 
+    notification.success({
+      title: t('App:success'),
+      message: t('Notification:createSuccessfully', {
+        argument: t('customField'),
+      }),
+    })
+
     setFieldSets((prevFieldSets) => {
       const nextFieldSets = [...prevFieldSets]
 
@@ -115,6 +123,13 @@ export const CustomFieldSet = ({
   const removeFieldSet = async () => {
     if (fieldSet.id !== null) {
       await onFieldSetDelete(fieldSet)
+
+      notification.success({
+        title: t('App:success'),
+        message: t('Notification:theRemovedSuccessfully', {
+          argument: t('customField'),
+        }),
+      })
     }
 
     setFieldSets(

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 ||
@@ -69,6 +72,7 @@ export const DateTimeButton = ({
       {price && !isDisabled && <div className='price'>{price}</div>}
       {showResources && resources && (
         <AvailabilityIndicator
+          availabilityFormat={availabilityFormat}
           resources={resources}
           isUnavailable={_isDisabled || isPast}
           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/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' />