@licklist/design 0.78.19 → 0.78.21

package/src/collapsible-input-group/CollapsibleInputGroup.stories.tsx

@@ -1,5 +1,8 @@
-import { Meta, Story } from '@storybook/react-vite'
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react-vite'
 import { Accordion } from 'react-bootstrap'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import { FormProvider, useForm } from 'react-hook-form'
 import {
   CategoriesInput,
@@ -38,6 +41,7 @@ const defaultValues: CategoriesInputValues &
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
   workingHours: [
     { start: '08:00', end: '18:00', description: 'Description' },
     undefined,
@@ -45,12 +49,48 @@ const defaultValues: CategoriesInputValues &
   ],
 }
 
+// Mock timezone data for Storybook
+const mockTimezones = [
+  { id: 1, name: 'Europe/London' },
+  { id: 2, name: 'America/New_York' },
+  { id: 3, name: 'America/Los_Angeles' },
+  { id: 4, name: 'Europe/Paris' },
+  { id: 5, name: 'Asia/Tokyo' },
+]
+
+// Decorator to mock timezone query data
+const withMockedTimezones = (Story) => {
+  const QueryClientWrapper = () => {
+    const queryClient = useQueryClient()
+
+    // Pre-populate the query cache with mock data before render
+    // Try multiple possible query key formats
+    React.useLayoutEffect(() => {
+      const possibleKeys = [
+        ['/api/timezones', 'all'],
+        ['timezones', '/api/timezones', 'all'],
+        ['timeZone', '/api/timezones'],
+        ['/api/timezones'],
+      ]
+
+      possibleKeys.forEach((key) => {
+        queryClient.setQueryData(key, mockTimezones)
+      })
+    }, [queryClient])
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
+}
+
 export default {
   title: 'CollapsibleInputGroup',
   component: CollapsibleInputGroup,
+  decorators: [withMockedTimezones],
 } as Meta
 
-const Template: Story<CollapsibleInputGroupProps> = (args) => {
+const Template: StoryFn<CollapsibleInputGroupProps> = (args) => {
   const form = useForm({ defaultValues })
   return (
     <FormProvider {...form}>
@@ -77,13 +117,41 @@ Categories.args = {
   label: 'Categories',
 }
 
+// Location-specific decorator with better query mocking
+const withLocationMock = (Story) => {
+  const LocationWrapper = () => {
+    const queryClient = useQueryClient()
+    const path = '/api/timezones' as TimeZonePath
+
+    // Set query data synchronously before first render
+    // Try all possible query key formats
+    const queryKeys = [
+      [path, 'all'],
+      ['timezones', path, 'all'],
+      ['timeZone', path],
+      [path],
+      ['useTimeZoneApi', path, 'all'],
+    ]
+
+    queryKeys.forEach((key) => {
+      queryClient.setQueryData(key, mockTimezones)
+    })
+
+
+    return <Story />
+  }
+
+  return <LocationWrapper />
+}
+
 export const Location = Template.bind({})
 Location.args = {
   eventKey: 'location',
-  children: <LocationInput />,
-  description: <LocationInputDescription />,
+  children: <LocationInput path={'/api/timezones' as TimeZonePath} />,
+  description: <LocationInputDescription path={'/api/timezones' as TimeZonePath} />,
   label: 'Location',
 }
+Location.decorators = [withLocationMock]
 
 export const WorkingHours = Template.bind({})
 WorkingHours.args = {

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

@@ -1063,7 +1063,8 @@ const defaultProductSets = [
 
 export const Default: Story<EditEventFormProps> = (args) => {
   // @todo: rewrite story to use actions instead of addon-knobs
-  const hasPermission = boolean('hasPermission', true)
+  // TODO: Replace with Storybook controls
+  const hasPermission = true
   const [editProductSetId, setEditProductSetId] = useState<string>()
   return (
     <div className='edit-event-dialog'>

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.stories.tsx

@@ -14,7 +14,8 @@ export default {
 
 export const Default: Story<EditRecurrentEventModalProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false)
-  const isEditRecurrentEventModal = boolean('isEditRecurrentEventModal', false)
+  // TODO: Replace with Storybook controls
+  const isEditRecurrentEventModal = false
 
   return (
     <div>
@@ -31,7 +32,7 @@ export const Default: Story<EditRecurrentEventModalProps> = (args) => {
 
 Default.args = {
   isOpen: false,
-  onHide: () => {},
+  onHide: () => { },
   title: 'Some title',
   onSubmit: (data) => console.log(data),
 }

package/src/events/event-card/EventCard.stories.tsx

@@ -10,9 +10,10 @@ export default {
 } as Meta
 
 export const Default: Story<EventCardProps> = () => {
-  const showImage = boolean('showImage', true)
+  // TODO: Replace with Storybook controls
+  const showImage = true
   // @todo: rewrite story to use actions instead of addon-knobs
-  const hasPermission = boolean('hasPermission', true)
+  const hasPermission = true
 
   return (
     <div style={{ maxWidth: '34rem' }}>

package/src/events/event-statistic-modal/EventStatisticModal.stories.tsx

@@ -13,7 +13,8 @@ export default {
 
 export const Default: Story<EventStatisticModalProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false)
-  const isEmptyEventStatistic = boolean('isEmptyEventStatistic', false)
+  // TODO: Replace with Storybook controls
+  const isEmptyEventStatistic = false
 
   return (
     <div>

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

@@ -20,7 +20,8 @@ export const EventVenueMapComponent: Story<EventVenueMapProps> = (args) => {
       productUuid: 'product-1',
     },
   ])
-  const editMode = boolean('editMode', false)
+  // TODO: Replace with Storybook controls
+  const editMode = false
 
   return (
     <div style={{ width: window.innerWidth, height: window.innerHeight }}>
@@ -66,4 +67,10 @@ EventVenueMapComponent.args = {
       yCoordinate: 250,
     },
   ],
+  onPointsChange: (value) => {
+    console.log('onPointsChange called with:', value)
+  },
+  onPointClick: (pointId) => {
+    console.log('onPointClick called with:', pointId)
+  },
 }

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -51,7 +51,7 @@ export const ProductWithModifierSetModal = ({
           <div
             className={clsx(
               'manual-booking-container',
-              !product.images.length && 'tw-mt-8',
+              !product.images?.length && 'tw-mt-8',
             )}
           >
             <div className='manual-booking-header'>
@@ -60,10 +60,10 @@ export const ProductWithModifierSetModal = ({
                 description={product.description}
                 className={clsx(
                   'iframe-event__product-description',
-                  !product.images.length && 'mt-6',
+                  !product.images?.length && 'mt-6',
                 )}
                 classNameProductModal='d-block'
-                images={product.images}
+                images={product.images || []}
                 isRequired={product.isRequired}
                 canExpand
                 isModal

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ModifierSetControll.tsx

@@ -131,14 +131,14 @@ export const ModifiersSetControl = ({
 
   const radioButtonDefaultModifier = currentOrderModifiersSets
     .find((modifier) =>
-      modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId),
+      modifierSet.modifiers?.some((rl) => rl.id === modifier.modifierId),
     )
     ?.modifierId.toString()
 
   return (
     <>
       {modifierSet?.maxItems === 1 &&
-      modifiers.every((modifier) => modifier.maxItems === 1) ? (
+        modifiers.every((modifier) => modifier.maxItems === 1) ? (
         <>
           <Controller
             name={`${productId}.modifier`}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.tsx

@@ -74,7 +74,7 @@ export const ProductControl = ({
                     <ModifiersSetControl
                       modifierSet={modifierSet}
                       productId={product.id}
-                      modifiers={modifierSet.modifiers}
+                      modifiers={modifierSet.modifiers || []}
                       isEditMode={!!editOrderModifier?.modifiers}
                       orderProductModifierSets={editOrderModifier?.modifiers}
                       isLoading={isLoading}

package/src/iframe/custom-fields/components/CustomDateField.stories.tsx

@@ -33,8 +33,9 @@ export const Default: Story<any> = () => {
   })
   const { handleSubmit, register } = formProps
 
-  const isRequired = boolean('isRequired', false)
-  const isLoading = boolean('isLoading', false)
+  // TODO: Replace with Storybook controls
+  const isRequired = false
+  const isLoading = false
 
   const currentField = useMemo(
     () => ({

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -9,8 +9,9 @@ export default {
 } as Meta
 
 export function Default() {
-  const showImage = boolean('showImage', true)
-  const isListView = boolean('isListView', false)
+  // TODO: Replace with Storybook controls
+  const showImage = true
+  const isListView = false
 
   return (
     <div>
@@ -19,7 +20,7 @@ export function Default() {
         imageSrc={
           showImage
             ? // eslint-disable-next-line max-len
-              'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
+            'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
             : undefined
         }
         title='Glitterbomb Bucks / Baga Chipz'
@@ -54,8 +55,9 @@ export function Default() {
 }
 
 export function EventCardSkeleton() {
-  const showImage = boolean('showImage', true)
-  const isListView = boolean('isListView', false)
+  // TODO: Replace with Storybook controls
+  const showImage = true
+  const isListView = false
 
   return (
     <div>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -554,11 +554,12 @@ const MOCK_IFRAMES = [
 ]
 
 export function Default() {
-  const displayCost = boolean('displayCost', true)
-  const displayType = boolean('displayType', true)
-  const displayDescription = boolean('displayDescription', true)
-  const isListView = boolean('isListView', false)
-  const className = text('className', 'event-info')
+  // TODO: Replace with Storybook controls
+  const displayCost = true
+  const displayType = true
+  const displayDescription = true
+  const isListView = false
+  const className = 'event-info'
 
   return (
     <div
@@ -584,7 +585,7 @@ export function Default() {
               includeFromPrice: [],
             }}
             imageSrc={event.imgSrc}
-            goToDetails={() => {}}
+            goToDetails={() => { }}
             description={event.description}
             isListView={isListView}
             className={className}

package/src/iframe/event/event-description/EventDescription.stories.tsx

@@ -31,7 +31,8 @@ const LONG_DESCRIPTION = `On the other hand, we denounce with righteous indignat
                           `
 
 export function Default() {
-  const shortDescription = boolean('shortDescription', true)
+  // TODO: Replace with Storybook controls
+  const shortDescription = true
 
   const onNextStep = () => {
     console.log('onNextStep')
@@ -67,7 +68,7 @@ export function Default() {
         ]}
         providerName='Baga Chipz studio'
         onNextStep={onNextStep}
-        onPrevStep={() => {}}
+        onPrevStep={() => { }}
       />
     </div>
   )

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -239,7 +239,8 @@ const selectOptions = [
 ]
 
 export function Default() {
-  const usedInIframe = boolean('usedInIframe', true)
+  // TODO: Replace with Storybook controls
+  const usedInIframe = true
   return (
     <Page headerBlock={<PageHeader>Header</PageHeader>}>
       <PageBody
@@ -249,7 +250,7 @@ export function Default() {
             component={
               <CalendarSelect
                 value={selectOptions[0].value}
-                onChange={() => {}}
+                onChange={() => { }}
                 options={selectOptions}
               />
             }

package/src/iframe/external-modal/ExternalModal.stories.tsx

@@ -13,3 +13,6 @@ export function Default() {
     </div>
   )
 }
+Default.parameters = {
+  excludeRouter: true,
+}

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx

@@ -35,6 +35,7 @@ const productCategories = [
         maxAmount: 2,
         price: 1,
         images: IMAGES,
+        modifiersSet: [],
       },
       {
         id: 8,
@@ -46,6 +47,7 @@ const productCategories = [
         maxAmount: 5,
         price: 1,
         images: IMAGES,
+        modifiersSet: [],
       },
     ],
   },
@@ -64,6 +66,7 @@ const productCategories = [
         maxAmount: 10,
         price: 1,
         images: IMAGES,
+        modifiersSet: [],
       },
       {
         id: 149,
@@ -75,6 +78,7 @@ const productCategories = [
         maxAmount: 15,
         uuid: 'beb6393c-2fdd-40f7-bb92-8800685b203a',
         images: IMAGES,
+        modifiersSet: [],
       },
       {
         id: 148,
@@ -85,6 +89,7 @@ const productCategories = [
         minAmount: 1,
         maxAmount: 15,
         uuid: 'beb6393c-2fdd-40f7-bb92-8800685b203f',
+        modifiersSet: [],
       },
     ],
   },

package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.stories.tsx

@@ -8,7 +8,8 @@ export default {
 } as Meta
 
 export function Default() {
-  const isLoading = boolean('isLoading', false)
+  // TODO: Replace with Storybook controls
+  const isLoading = false
 
   return (
     <div className='payment-process'>

package/src/iframe/order-process/components/PaymentCard/PaymentCard.stories.tsx

@@ -8,7 +8,8 @@ export default {
 } as Meta
 
 export function Default(args) {
-  const totalWithDiscount = number('totalWithDiscount', 0)
+  // TODO: Replace with Storybook controls
+  const totalWithDiscount = 0
 
   return (
     <div className='payment-process'>

package/src/iframe/page/Page.stories.tsx

@@ -187,12 +187,13 @@ const MOCK_IFRAMES = [
 ]
 
 export function Default() {
-  const showCloseButton = boolean('showCloseButton', true)
-  const showBackButton = boolean('showBackButton', true)
-  const showHeader = boolean('showHeader', true)
-  const showRightBlock = boolean('showRightBlock', true)
-  const showBottomBlock = boolean('showBottomBlock', true)
-  const isAppUsingInIframe = boolean('isAppUsingInIframe', false)
+  // TODO: Replace with Storybook controls
+  const showCloseButton = true
+  const showBackButton = true
+  const showHeader = true
+  const showRightBlock = true
+  const showBottomBlock = true
+  const isAppUsingInIframe = false
 
   const rightCardEvent = MOCK_IFRAMES[0]
 
@@ -247,7 +248,7 @@ export function Default() {
                       shortDate={String(event.startAt)}
                       colour={event.colour}
                       imageSrc={event.imgSrc}
-                      goToDetails={() => {}}
+                      goToDetails={() => { }}
                       description={event.description}
                     />
                   </div>
@@ -276,7 +277,7 @@ export function Default() {
                   shortDate={String(rightCardEvent.startAt)}
                   colour={rightCardEvent.colour}
                   imageSrc={rightCardEvent.imgSrc}
-                  goToDetails={() => {}}
+                  goToDetails={() => { }}
                   description={rightCardEvent.description}
                 />
               </div>

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -9,7 +9,8 @@ export default {
 } as Meta
 
 export function Default(args) {
-  const isPaymentProcessed = boolean('isPaymentProcessed', true)
+  // TODO: Replace with Storybook controls
+  const isPaymentProcessed = true
 
   return (
     <div style={{ width: '800px' }} className='m-5'>

package/src/iframe/payment/payment-status-header/PaymentStatusHeader.stories.tsx

@@ -8,7 +8,8 @@ export default {
 } as Meta
 
 export function Default() {
-  const success = boolean('success', true)
+  // TODO: Replace with Storybook controls
+  const success = true
   return (
     <div
       className='snippet d-flex justify-content-center align-items-center h-100'

package/src/index.ts

@@ -44,3 +44,5 @@ export * from './number-of-people-input'
 export * from './fullscreen-loader'
 export * from './pages'
 export { default as RadioButton } from './customRadioButton/RadioButton'
+export * from './PageNotFound'
+export * from './UnderMaintenance'

package/src/logo/Logo.stories.tsx

@@ -1,4 +1,3 @@
-// TODO: Replace knobs with controls
 import Logo from './Logo'
 import { ReactComponent as BookeditLogoSvg } from '../assets/logo/bookedit.svg'
 import { ReactComponent as LicklistLogoSvg } from '../assets/logo/licklist.svg'
@@ -36,19 +35,23 @@ Bookedit.story = {
   },
 }
 
-export const ColouredLogos = () => (
-  <>
-    <p>
-      <Logo
-        logo={<LicklistLogoSvg color={color('color', 'red')} />}
-        logoSm={<LicklistLogoSmSvg color={color('color', 'red')} />}
-      />
-    </p>
-    <p>
-      <Logo logo={<BookeditLogoSvg color={color('color', 'red')} />} />
-    </p>
-  </>
-)
+export const ColouredLogos = () => {
+  const logoColor = 'red' // You can make this configurable with Storybook controls if needed
+
+  return (
+    <>
+      <p>
+        <Logo
+          logo={<LicklistLogoSvg color={logoColor} />}
+          logoSm={<LicklistLogoSmSvg color={logoColor} />}
+        />
+      </p>
+      <p>
+        <Logo logo={<BookeditLogoSvg color={logoColor} />} />
+      </p>
+    </>
+  )
+}
 
 ColouredLogos.story = {
   name: 'Coloured logos',

package/src/modals/confirmation/Confirmation.stories.tsx

@@ -9,7 +9,8 @@ export default {
 
 export const Default: Story<ConfirmModalProps> = (args) => {
   const onConfirm = () => alert('confirmed')
-  const showButtons = boolean('showButtons', true)
+  // TODO: Replace with Storybook controls
+  const showButtons = true
 
   return (
     <ConfirmModal {...args} hideButtons={showButtons}>

package/src/notification/components/NotificationPlaceholders.stories.tsx

@@ -17,6 +17,10 @@ export const Empty: Story<NotificationPlaceholdersProps> = (args) => (
   <NotificationPlaceholders {...args} />
 )
 
+Empty.args = {
+  placeholders: [],
+}
+
 Default.args = {
   placeholders: [
     { value: 'user.first_name', description: 'Customers first name' },

package/src/notification/components/NotificationPlaceholders.tsx

@@ -7,7 +7,7 @@ export interface NotificationPlaceholdersProps {
 }
 
 export const NotificationPlaceholders = ({
-  placeholders,
+  placeholders = [],
 }: NotificationPlaceholdersProps) => {
   const { t } = useTranslation('Design')
 

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -144,7 +144,7 @@ export function ProductCategoriesControl({
   const productCategories: ProductCategory[] = useWatch({
     control,
     name: productCategoriesFieldName,
-  })
+  }) || []
 
   const productCategoriesErrors = errors?.steps?.[stepIndex]?.productCategories
 
@@ -259,6 +259,12 @@ export function ProductCategoriesControl({
 
           const categoryType = CATEGORIES_TYPE[productCategory.type]
 
+          // Fallback for unknown category types
+          const categoryConfig = categoryType || {
+            label: productCategory.type || 'category',
+            icon: <FaBars color='#0e8ce2' size={10} />,
+          }
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -305,8 +311,8 @@ export function ProductCategoriesControl({
                   isNewAdded={showCategoryModal}
                   itemButton={
                     <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
-                      {categoryType.icon}
-                      <span className='ml-2'>{t(categoryType.label)}</span>
+                      {categoryConfig.icon}
+                      <span className='ml-2'>{t(categoryConfig.label)}</span>
                     </div>
                   }
                   body={
@@ -330,10 +336,10 @@ export function ProductCategoriesControl({
                   saveValidField={saveValidField}
                   // preItem={<Popover className="d-none d-sm-block" />}
                   sortableItems={
-                    productCategory.products
+                    productCategory.products && Array.isArray(productCategory.products)
                       ? productCategory.products
-                          .filter((product) => product.id)
-                          .map(({ id }) => String(id))
+                        .filter((product) => product?.id)
+                        .map(({ id }) => String(id))
                       : []
                   }
                 >