@licklist/design 0.78.18 → 0.78.20

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))
                       : []
                   }
                 >

package/src/product-set/form/ProductSetForm.stories.tsx

@@ -20,7 +20,8 @@ export default {
 } as Meta
 
 export const Default: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return (
     <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
@@ -28,7 +29,8 @@ export const Default: Story<ProductSetFormProps> = (args) => {
 }
 
 export const Empty: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return (
     <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
@@ -36,13 +38,15 @@ export const Empty: Story<ProductSetFormProps> = (args) => {
 }
 
 export const Valid: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return <ProductSetForm {...args} providerHasMap={providerHasMap} />
 }
 
 export const ServerErrors: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return <ProductSetForm {...args} providerHasMap={providerHasMap} />
 }
@@ -119,6 +123,7 @@ Default.args = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: 'constant',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -187,10 +192,12 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: 'recharging',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
             hasBookingManagement: false,
+            products: [],
             sort: 1,
           },
         ],
@@ -258,6 +265,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: 'recharging',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -343,6 +351,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: null,
             quantityType: 'recharging',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

package/src/provider/location-input/LocationInput.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, Story } from '@storybook/react-vite'
 import { FormProvider, useForm } from 'react-hook-form'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import { LocationInputValues } from '.'
 import { LocationInput } from './LocationInput'
 import { LocationInputDescription } from './LocationInputDescription'
@@ -14,19 +16,62 @@ const defaultValues: LocationInputValues = {
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
+}
+
+// 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()
+    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)
+    })
+
+    // Also set query defaults to return mock data if query key doesn't match
+    queryClient.setQueryDefaults([path], {
+      queryFn: () => Promise.resolve(mockTimezones),
+      initialData: mockTimezones,
+    })
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
 }
 
 export default {
   title: 'Provider/LocationInput',
   component: LocationInput,
   subcomponents: { LocationInputDescription },
+  decorators: [withMockedTimezones],
 } as Meta
 
 export const Default: Story = (args) => {
   const form = useForm<LocationInputValues>({ defaultValues })
   return (
     <FormProvider {...form}>
-      <LocationInput {...args} />
+      <LocationInput path={'/api/timezones' as TimeZonePath} {...args} />
     </FormProvider>
   )
 }
@@ -35,7 +80,7 @@ export const Description: Story = (args) => {
   const form = useForm<LocationInputValues>({ defaultValues })
   return (
     <FormProvider {...form}>
-      <LocationInputDescription {...args} />
+      <LocationInputDescription path={'/api/timezones' as TimeZonePath} {...args} />
     </FormProvider>
   )
 }

package/src/provider/provider-details-input/ProviderDetailsInput.stories.tsx

@@ -12,7 +12,16 @@ export default {
 } as Meta
 
 export const Default: Story<ProviderDetailsInputProps> = (args) => {
-  const form = useForm<ProviderDetailsInputValues>()
+  const form = useForm<ProviderDetailsInputValues>({
+    defaultValues: {
+      name: '',
+      description: '',
+      email: '',
+      phone: '',
+      website: '',
+      images: [],
+    },
+  })
   return (
     <FormProvider {...form}>
       <ProviderDetailsInput {...args} />

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -46,7 +46,7 @@ export function ProviderDetailsInput({
   const websiteId = useId()
   const companyId = useId()
 
-  const description = watch('description')
+  const description = watch('description') || ''
 
   useEffect(() => {
     if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return

package/src/provider/provider-form/ProviderForm.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react-vite'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import {
   ProviderForm,
   ProviderFormProps,
@@ -31,9 +33,51 @@ const defaultValues: ProviderFormValues = {
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
   images: [],
 }
 
+// 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()
+    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)
+    })
+
+    // Also set query defaults to return mock data if query key doesn't match
+    queryClient.setQueryDefaults([path], {
+      queryFn: () => Promise.resolve(mockTimezones),
+      initialData: mockTimezones,
+    })
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
+}
+
 const linkTypes = ['Facebook', 'Twitter', 'Other'].map((name, id) => ({
   name,
   id: `${id}`,
@@ -42,6 +86,7 @@ const linkTypes = ['Facebook', 'Twitter', 'Other'].map((name, id) => ({
 export default {
   title: 'Provider/ProviderForm',
   component: ProviderForm,
+  decorators: [withMockedTimezones],
 } as Meta
 
 export const Default: Story<ProviderFormProps> = (args) => (
@@ -59,4 +104,5 @@ Default.args = {
     { id: 3, value: 'user3', label: 'User3' },
   ],
   hasPermission: true,
+  path: '/api/timezones' as TimeZonePath,
 }