@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react'
+import { useContext, useEffect, useMemo } from 'react'
 import { Col, Form, Row } from 'react-bootstrap'
 import {
   ArrayPath,
@@ -119,7 +119,7 @@ export const ProductZoneControl = <T extends FormValues>({
                 name={`${fieldNamePrefix}.zoneId`}
                 render={({ field }) => (
                   <Form.Control
-                    as="select"
+                    as='select'
                     disabled={isOverrides}
                     isInvalid={HookFormService.isInvalid(
                       `${fieldNamePrefix}.zoneId`,
@@ -144,7 +144,7 @@ export const ProductZoneControl = <T extends FormValues>({
                   },
                 }}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {HookFormService.getErrors(
                   `${fieldNamePrefix}.zoneId` as Path<T>,
                   errors,
@@ -155,7 +155,7 @@ export const ProductZoneControl = <T extends FormValues>({
         </Row>
       </>
       {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
-        <Row className="align-items-start duration-capacity-container">
+        <Row className='align-items-start duration-capacity-container'>
           <ProductDurationControl
             fieldNamePrefix={fieldNamePrefix}
             disabled={disabledDuration || isOverrides}
@@ -178,7 +178,7 @@ export const ProductZoneControl = <T extends FormValues>({
             />
           </Col>
           {disabledDuration && (
-            <div className="duration-hint duration-capacity-container">
+            <div className='duration-hint duration-capacity-container'>
               {t('Design:forDurationEditing')}
             </div>
           )}
@@ -187,7 +187,7 @@ export const ProductZoneControl = <T extends FormValues>({
 
       {categoryType === CATEGORY_TYPE_GAME && (
         <>
-          <Row className="align-items-start duration-capacity-container">
+          <Row className='align-items-start duration-capacity-container'>
             <Col lg={4} md={4}>
               <FormNumberInput
                 fieldName={`${fieldNamePrefix}.capacity`}
@@ -231,7 +231,7 @@ export const ProductZoneControl = <T extends FormValues>({
             </Col>
           </Row>
           {disabledDuration && (
-            <div className="duration-hint pl-0">
+            <div className='duration-hint pl-0'>
               {t('Design:forDurationEditing')}
             </div>
           )}

package/src/product-set/step/Step.stories.tsx

@@ -63,7 +63,7 @@ export const WithSortable: Story<StepControlProps> = (args) => {
                 key={id}
                 id={id}
                 title={`Step #${id}`}
-                badge={<Badge variant="secondary">step</Badge>}
+                badge={<Badge variant='secondary'>step</Badge>}
                 body={<StepControl {...args} />}
               />
             ))}

package/src/product-set/step/StepControl.tsx

@@ -93,20 +93,20 @@ export function StepControl({
                 },
               }}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<ProductSetFormValues>(
                 fieldName,
                 errors,
               )}
             </Form.Control.Feedback>
             {providerHasMap && (
-              <div className="mt-5 pt-5">
+              <div className='mt-5 pt-5'>
                 <hr />
                 <Form.Group
                   controlId={hasMapId}
-                  className="d-flex mb-3 align-items-center"
+                  className='d-flex mb-3 align-items-center'
                 >
-                  <Form.Label className="mr-5 m-0">{t('hasAMap')}</Form.Label>
+                  <Form.Label className='mr-5 m-0'>{t('hasAMap')}</Form.Label>
 
                   <div>
                     <Controller
@@ -124,7 +124,7 @@ export function StepControl({
                   </div>
                 </Form.Group>
                 {hasMap && (
-                  <p className="mt-5 info">
+                  <p className='mt-5 info'>
                     {t('toUseAMapPleaseAddProductsFirst')}
                   </p>
                 )}

package/src/product-set/tabs/ProductSetTabs.stories.tsx

@@ -18,13 +18,13 @@ const mockChildren = (
 export function Default(args) {
   return (
     <ProductSetTabs {...args}>
-      <ProductSetTabs.Tab eventKey="first" title="Tab #1">
+      <ProductSetTabs.Tab eventKey='first' title='Tab #1'>
         {mockChildren}
       </ProductSetTabs.Tab>
-      <ProductSetTabs.Tab eventKey="second" title="Tab #2">
+      <ProductSetTabs.Tab eventKey='second' title='Tab #2'>
         {mockChildren}
       </ProductSetTabs.Tab>
-      <ProductSetTabs.Tab eventKey="third" title="Tab #3">
+      <ProductSetTabs.Tab eventKey='third' title='Tab #3'>
         {mockChildren}
       </ProductSetTabs.Tab>
     </ProductSetTabs>

package/src/product-set/tabs/ProductSetTabs.tsx

@@ -17,7 +17,7 @@ export function ProductSetTabs({
     <Tabs
       defaultActiveKey={defaultActiveKey}
       id={tabsId}
-      className="product-set-tabs"
+      className='product-set-tabs'
     >
       {children}
     </Tabs>

package/src/product-set/utils/index.ts

@@ -3,6 +3,7 @@ import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemp
 import { TFunction } from 'react-i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
+import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
@@ -12,6 +13,11 @@ interface CheckAvailableTimesErrors {
   t: TFunction
 }
 
+export interface MenuTypeheadItem {
+  id: number
+  label: string
+  value: number
+}
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -83,3 +89,8 @@ export const checkAvailableTimesErrors = ({
   })
   return hasError
 }
+
+export const getTypeHeadItemsFromMenus = (
+  menus?: (ProductSet | ProductSetFormValues)[],
+): MenuTypeheadItem[] =>
+  menus?.map((menu) => ({ id: menu.id, value: menu.id, label: menu.name }))

package/src/provider/categories-input/CategoriesInput.tsx

@@ -16,7 +16,7 @@ function CategoryView(category: Category) {
     <Form.Check
       {...register('categories')}
       id={id}
-      name="categories"
+      name='categories'
       value={category.id}
       label={category.name}
       custom
@@ -26,20 +26,20 @@ function CategoryView(category: Category) {
 
 export function CategoriesInput({ categories: groups }: CategoriesInputProps) {
   return (
-    <div className="my-n4">
+    <div className='my-n4'>
       {groups.map((group) => (
-        <Row key={group.id} className="my-4">
-          <Col xs="12" className="h6">
+        <Row key={group.id} className='my-4'>
+          <Col xs='12' className='h6'>
             {group.name}
           </Col>
           {group.categories.map((category) => (
             <Col
               key={category.id}
-              xs="12"
-              sm="6"
-              md="4"
-              lg="3"
-              className="py-1"
+              xs='12'
+              sm='6'
+              md='4'
+              lg='3'
+              className='py-1'
             >
               <CategoryView {...category} />
             </Col>

package/src/provider/categories-input/CategoriesInputDescription.tsx

@@ -23,16 +23,16 @@ export function CategoriesInputDescription({
           )
           if (selectedCategories?.length) return <></>
           return (
-            <Row key={group?.id} noGutters className="mx-n1 align-items-center">
-              <Col xs="auto" className="m-1">
+            <Row key={group?.id} noGutters className='mx-n1 align-items-center'>
+              <Col xs='auto' className='m-1'>
                 {group?.name}:
               </Col>
               {selectedCategories?.map((category) => (
                 <Badge
                   pill
-                  variant="secondary"
+                  variant='secondary'
                   key={category?.id}
-                  className="m-1"
+                  className='m-1'
                 >
                   {category?.name}
                 </Badge>

package/src/provider/company/user-form/UserForm.tsx

@@ -69,7 +69,7 @@ export const UserForm = ({
 
   return (
     /* @ts-expect-error 2345 */
-    <Form className="company-user-form" onSubmit={handleSubmit(onSubmit)}>
+    <Form className='company-user-form' onSubmit={handleSubmit(onSubmit)}>
       <Row>
         <Col xl={6} lg={6} sm={12}>
           <Form.Group>
@@ -83,7 +83,7 @@ export const UserForm = ({
               disabled={isLoading || Boolean(defaultValues.email)}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.hasError(errors.email, 'required') &&
                 t('Validation:fieldRequired', {
                   attribute: t('User:email'),
@@ -108,7 +108,7 @@ export const UserForm = ({
                 className={clsx('roles-form-group', !!error && 'is-invalid')}
               >
                 <Form.Label>{t('User:role')}*</Form.Label>
-                <div className="roles-wrapper">
+                <div className='roles-wrapper'>
                   {rolesOptions.map(
                     ({ value, label, description, component }) => (
                       <button
@@ -117,22 +117,22 @@ export const UserForm = ({
                         className={clsx('role', {
                           active: fieldValue === value,
                         })}
-                        type="button"
+                        type='button'
                       >
                         <Logo logo={component} />
-                        <p className="label">{label}</p>
-                        <p className="description">{description}</p>
+                        <p className='label'>{label}</p>
+                        <p className='description'>{description}</p>
                       </button>
                     ),
                   )}
                 </div>
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {error?.message}
                 </Form.Control.Feedback>
               </Form.Group>
             )}
             control={control}
-            name="role"
+            name='role'
             rules={{
               required: t('Validation:fieldRequired', {
                 fieldName: t('User:role'),
@@ -142,7 +142,7 @@ export const UserForm = ({
         </Col>
       </Row>
       {hasPermission && (
-        <Button type="submit" size="lg" disabled={isLoading}>
+        <Button type='submit' size='lg' disabled={isLoading}>
           {defaultValues.email ? t('User:submit') : t('Design:addUser')}
         </Button>
       )}

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

@@ -21,33 +21,33 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
 
   return (
     <>
-      <input {...register('location.latitude')} type="hidden" />
-      <input {...register('location.longitude')} type="hidden" />
+      <input {...register('location.latitude')} type='hidden' />
+      <input {...register('location.longitude')} type='hidden' />
       <FormGroupControll
         error={errors?.location?.street}
-        name="location.street"
+        name='location.street'
         label={t('locationStreet')}
       />
       <FormGroupControll
         error={errors?.location?.city}
-        name="location.city"
+        name='location.city'
         label={t('locationCity')}
       />
       <FormGroupControll
         error={errors?.location?.state}
-        name="location.state"
+        name='location.state'
         label={t('locationState')}
       />
       <FormGroupControll
         error={errors?.location?.postcode}
-        name="location.postcode"
+        name='location.postcode'
         label={t('locationPostcode')}
       />
 
       <Form.Group controlId={countryId}>
         <Form.Label>{t('locationCountry')}</Form.Label>
         <CountryCodeSelect
-          fieldName="location.country"
+          fieldName='location.country'
           errorLabel={t('locationCountry')}
           error={errors?.location?.country?.message}
         />
@@ -56,7 +56,7 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
       {isLoading ? (
         <BlockLoader />
       ) : (
-        <Form.Group controlId="timeZoneId">
+        <Form.Group controlId='timeZoneId'>
           <Form.Label>{t('locationTimeZone')}</Form.Label>
           <Form.Control
             {...register('timeZoneId', {
@@ -64,11 +64,11 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
                 attribute: t('locationTimeZone'),
               }) as string,
             })}
-            as="select"
+            as='select'
             custom
             isInvalid={Boolean(errors?.timeZoneId?.message)}
           >
-            <option key="" value="" disabled>
+            <option key='' value='' disabled>
               {t('chooseTimeZone')}
             </option>
             {data.map((zone) => (
@@ -77,7 +77,7 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
               </option>
             ))}
           </Form.Control>
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors?.timeZoneId?.message}
           </Form.Control.Feedback>
         </Form.Group>

package/src/provider/location-input/LocationInputDescription.tsx

@@ -31,7 +31,7 @@ export function LocationInputDescription({ path }: { path: TimeZonePath }) {
     <div>
       <>
         {fields}
-        {timeZoneName && <div key="timeZone">{timeZoneName}</div>}
+        {timeZoneName && <div key='timeZone'>{timeZoneName}</div>}
       </>
     </div>
   )

package/src/provider/location-input/components/FormGroupControll.tsx

@@ -7,7 +7,7 @@ export const FormGroupControll = ({ name, label, error }) => {
     <Form.Group>
       <Form.Label>{label}</Form.Label>
       <Form.Control {...register(name)} isInvalid={!!error} />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {error?.message}
       </Form.Control.Feedback>
     </Form.Group>

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

@@ -64,11 +64,11 @@ export function ProviderDetailsInput({
               attribute: t('Design:name'),
             }) as string,
           })}
-          name="name"
+          name='name'
           required
           isInvalid={Boolean(errors.name)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -87,12 +87,12 @@ export function ProviderDetailsInput({
               return true
             },
           })}
-          as="textarea"
-          name="description"
+          as='textarea'
+          name='description'
           rows={6}
           isInvalid={Boolean(errors.description)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.description?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -111,12 +111,12 @@ export function ProviderDetailsInput({
               }),
             },
           })}
-          name="email"
-          type="email"
-          inputMode="email"
+          name='email'
+          type='email'
+          inputMode='email'
           isInvalid={Boolean(errors.email)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.email?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -129,12 +129,12 @@ export function ProviderDetailsInput({
               attribute: t('Design:phone'),
             }) as string,
           })}
-          name="phone"
-          type="tel"
-          inputMode="tel"
+          name='phone'
+          type='tel'
+          inputMode='tel'
           isInvalid={Boolean(errors.phone)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.phone?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -150,12 +150,12 @@ export function ProviderDetailsInput({
               }),
             },
           })}
-          name="website"
-          type="url"
-          inputMode="url"
+          name='website'
+          type='url'
+          inputMode='url'
           isInvalid={Boolean(errors.website)}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.website?.message}
         </Form.Control.Feedback>
       </Form.Group>
@@ -164,7 +164,7 @@ export function ProviderDetailsInput({
         <Form.Group controlId={companyId}>
           <Form.Label>{t('Design:company')}</Form.Label>
           <Typeahead
-            name="company"
+            name='company'
             options={companiesOptions}
             placeholder={t('App:select')}
             noOptionsMessage={t('App:noMatchesFound')}

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

@@ -94,7 +94,7 @@ export function ProviderForm({
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -102,9 +102,9 @@ export function ProviderForm({
           linkTypes={linkTypes}
           companiesOptions={companiesOptions}
         />
-        <Accordion className="my-4">
+        <Accordion className='my-4'>
           <CollapsibleInputGroup
-            eventKey="location"
+            eventKey='location'
             label={t('location')}
             description={<LocationInputDescription path={path} />}
             error={errors?.location?.country?.message}
@@ -113,7 +113,7 @@ export function ProviderForm({
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup
-              eventKey="categories"
+              eventKey='categories'
               label={t('categories')}
               description={
                 <CategoriesInputDescription categories={categories} />
@@ -151,17 +151,17 @@ export function ProviderForm({
         })}
         {hasPermission && (
           <Button
-            type="submit"
+            type='submit'
             disabled={isSubmitting || isImagesLoading || isCoverImagesLoading}
-            className="d-flex align-items-center align-self-end"
+            className='d-flex align-items-center align-self-end'
           >
             {isSubmitting && (
               <Spinner
-                animation="border"
-                size="sm"
-                role="status"
-                aria-hidden="true"
-                className="mr-2"
+                animation='border'
+                size='sm'
+                role='status'
+                aria-hidden='true'
+                className='mr-2'
               />
             )}
             {t(intent)}

package/src/provider/provider-links-input/ProviderLinksInput.tsx

@@ -34,13 +34,13 @@ export function ProviderLinksInput({ linkTypes }: ProviderLinksInputProps) {
             <input
               {...register(`links.${index}.id` as const)}
               defaultValue={field.id}
-              type="hidden"
+              type='hidden'
             />
             <Form.Control
               {...register(`links.${index}.url` as const)}
               defaultValue={field.url}
-              type="url"
-              inputMode="url"
+              type='url'
+              inputMode='url'
             />
           </Form.Group>
         )
@@ -48,7 +48,7 @@ export function ProviderLinksInput({ linkTypes }: ProviderLinksInputProps) {
       {linkTypes.length > 0 && (
         <div>
           <DropdownButton
-            variant="outline-primary"
+            variant='outline-primary'
             title={t('addSocialMediaPage')}
           >
             {linkTypes.map((linkType) => (

package/src/provider/venue-form/VenueForm.tsx

@@ -125,7 +125,7 @@ export function VenueForm({
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -133,9 +133,9 @@ export function VenueForm({
           linkTypes={linkTypes}
           companiesOptions={companiesOptions}
         />
-        <Accordion className="my-4">
+        <Accordion className='my-4'>
           <CollapsibleInputGroup
-            eventKey="location"
+            eventKey='location'
             label={t('location')}
             description={<LocationInputDescription path={path} />}
             error={
@@ -149,7 +149,7 @@ export function VenueForm({
             <LocationInput path={path} />
           </CollapsibleInputGroup>
           <CollapsibleInputGroup
-            eventKey="workingHours"
+            eventKey='workingHours'
             label={t('workingHours')}
             description={<WorkingHoursInputDescription />}
             error={
@@ -164,7 +164,7 @@ export function VenueForm({
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup
-              eventKey="categories"
+              eventKey='categories'
               label={t('categories')}
               error={
                 errors?.categories?.message ||
@@ -209,22 +209,22 @@ export function VenueForm({
         })}
         {hasPermission && (
           <Button
-            type="submit"
+            type='submit'
             disabled={
               isLoading ||
               isSubmitting ||
               isImagesLoading ||
               isCoverImagesLoading
             }
-            className="d-flex align-items-center align-self-end"
+            className='d-flex align-items-center align-self-end'
           >
             {(isSubmitting || isLoading) && (
               <Spinner
-                animation="border"
-                size="sm"
-                role="status"
-                aria-hidden="true"
-                className="mr-2"
+                animation='border'
+                size='sm'
+                role='status'
+                aria-hidden='true'
+                className='mr-2'
               />
             )}
             {t(intent)}