@licklist/design 0.69.1 → 0.69.2

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

@@ -23,19 +23,19 @@ export const VenueMapsControl = ({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="mt-5 venue-maps-wrapper">
+    <div className='mt-5 venue-maps-wrapper'>
       {venueMaps.map(({ id, name, image, points }) => (
-        <div key={id} className="venue-map">
-          <div className="image">
+        <div key={id} className='venue-map'>
+          <div className='image'>
             {image ? (
               <img
                 src={MediaService.getImageSrc([image], 'thumbnail')}
                 alt={name}
               />
             ) : (
-              <div className="no-image" />
+              <div className='no-image' />
             )}
-            <div className="image-hover">
+            <div className='image-hover'>
               {points.length ? (
                 <>
                   {image ? (
@@ -57,26 +57,26 @@ export const VenueMapsControl = ({
                       }
                     >
                       {(confirm) => (
-                        <Button size="sm" onClick={confirm}>
+                        <Button size='sm' onClick={confirm}>
                           {t('choose')}
                         </Button>
                       )}
                     </FullscreenModal>
                   ) : (
-                    <p className="m-0 no-points">
+                    <p className='m-0 no-points'>
                       {t('toSelectPointsPleaseAddVenueMapImage')}
                     </p>
                   )}
                 </>
               ) : (
-                <p className="m-0 no-points">
+                <p className='m-0 no-points'>
                   {t('toSelectProductsPleaseAddPointsToSelectedMap')}
                 </p>
               )}
             </div>
           </div>
 
-          <div className="name">{name}</div>
+          <div className='name'>{name}</div>
         </div>
       ))}
     </div>

package/src/product-set/item/CreateProductSetItem.tsx

@@ -23,9 +23,9 @@ export function CreateProductSetItem({
         className,
       )}
       onClick={onClick}
-      type="button"
+      type='button'
     >
-      <FaPlus size={20} className="rounded product-set-item-icon" />
+      <FaPlus size={20} className='rounded product-set-item-icon' />
       <span>{title}</span>
     </button>
   )

package/src/product-set/popover/ProductSetPopover.stories.tsx

@@ -36,7 +36,7 @@ export function ControlledComponentWithHook() {
     <ProductSetPopover
       isVisible={isVisisble}
       onClick={() => setIsVisible((prevValue) => !prevValue)}
-      placement="bottom"
+      placement='bottom'
     >
       <span ref={ref}>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia nam
@@ -65,17 +65,17 @@ UncontrolledWithTabs.args = {
   placement: 'bottom',
   children: (
     <Tabs
-      defaultActiveKey="profile"
-      id="uncontrolled-tab-example"
-      className="mb-3"
+      defaultActiveKey='profile'
+      id='uncontrolled-tab-example'
+      className='mb-3'
     >
-      <Tab eventKey="home" title="Home">
+      <Tab eventKey='home' title='Home'>
         Content one
       </Tab>
-      <Tab eventKey="profile" title="Profile">
+      <Tab eventKey='profile' title='Profile'>
         Content two
       </Tab>
-      <Tab eventKey="contact" title="Contact">
+      <Tab eventKey='contact' title='Contact'>
         Content three
       </Tab>
     </Tabs>

package/src/product-set/popover/ProductSetPopover.tsx

@@ -37,8 +37,8 @@ export const ProductSetPopover = forwardRef<
     const popoverId = useId()
 
     const popover = (
-      <Popover id={popoverId} className="product-set-popover shadow-sm">
-        <Popover.Title as="h3">{title}</Popover.Title>
+      <Popover id={popoverId} className='product-set-popover shadow-sm'>
+        <Popover.Title as='h3'>{title}</Popover.Title>
         <Popover.Content>{children}</Popover.Content>
       </Popover>
     )
@@ -54,9 +54,9 @@ export const ProductSetPopover = forwardRef<
           trigger={trigger}
         >
           <Button
-            variant="outline-primary"
-            size="sm"
-            className="btn-icon-popover rounded-circle d-inline-flex align-items-center"
+            variant='outline-primary'
+            size='sm'
+            className='btn-icon-popover rounded-circle d-inline-flex align-items-center'
             onClick={() => {
               if (isVisible !== undefined && onClick) {
                 onClick()

package/src/product-set/product/Product.stories.tsx

@@ -51,7 +51,7 @@ export const Default: Story<ProductControlProps<{}>> = (args) => {
         <ProductSetLoadingContext.Consumer>
           {(_) => (
             <Form
-              className="d-flex flex-column"
+              className='d-flex flex-column'
               noValidate
               onSubmit={form.handleSubmit(onSubmit)}
             >
@@ -83,7 +83,7 @@ export const WithData: Story<ProductControlProps<{}>> = (args) => {
         <ProductSetLoadingContext.Consumer>
           {(_) => (
             <Form
-              className="d-flex flex-column"
+              className='d-flex flex-column'
               noValidate
               onSubmit={form.handleSubmit(onSubmit)}
             >
@@ -113,7 +113,7 @@ export const WithSortable: Story<ProductControlProps<{}>> = (args) => {
           <ProductSetLoadingContext.Consumer>
             {(_) => (
               <Form
-                className="d-flex flex-column"
+                className='d-flex flex-column'
                 noValidate
                 onSubmit={form.handleSubmit(onSubmit)}
               >
@@ -123,7 +123,7 @@ export const WithSortable: Story<ProductControlProps<{}>> = (args) => {
                 >
                   <SortableTree.Item
                     id={id}
-                    title="Product #1"
+                    title='Product #1'
                     body={<ProductControl {...args} />}
                   />
                 </SortableContext>

package/src/product-set/product/ProductControl.tsx

@@ -230,7 +230,7 @@ export function ProductControl<T extends FormValues>({
               disabled={isLoading || isOverrides}
               placeholder={t('name')}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.name` as Path<T>,
                 errors,
@@ -262,7 +262,7 @@ export function ProductControl<T extends FormValues>({
               name={`${fieldNamePrefix}.description` as Path<T>}
             />
           </Form.Group>
-          <div className="invalid-feedback field-values-error d-block">
+          <div className='invalid-feedback field-values-error d-block'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.description` as Path<T>,
               errors,
@@ -315,11 +315,11 @@ export function ProductControl<T extends FormValues>({
             )}
             <Form.Group
               controlId={unlimitedQuantityId}
-              className="custom-checkbox"
+              className='custom-checkbox'
             >
               <Form.Check
                 custom
-                type="checkbox"
+                type='checkbox'
                 {...register(`${fieldNamePrefix}.isUnlimited` as Path<T>)}
                 name={`${fieldNamePrefix}.isUnlimited` as Path<T>}
                 disabled={isLoading}
@@ -331,7 +331,7 @@ export function ProductControl<T extends FormValues>({
           <Form.Group controlId={quantitySelectorId}>
             <Form.Label>{t('quantitySelectorType')}</Form.Label>
             <Form.Control
-              as="select"
+              as='select'
               defaultValue={hasTicket ? quantitySelectorList[0].id : undefined}
               {...register(`${fieldNamePrefix}.quantitySelector` as Path<T>)}
               isInvalid={HookFormService.isInvalid<T>(
@@ -346,7 +346,7 @@ export function ProductControl<T extends FormValues>({
                 </option>
               ))}
             </Form.Control>
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
                 errors,
@@ -356,7 +356,7 @@ export function ProductControl<T extends FormValues>({
         </Col>
       </Row>
 
-      <Row className="my-4 mx-0 d-flex flex-column">
+      <Row className='my-4 mx-0 d-flex flex-column'>
         {isZoneCategory && (
           <ProductZonesControl
             isOverrides={isOverrides}
@@ -375,7 +375,7 @@ export function ProductControl<T extends FormValues>({
           <FileUpload
             onFilesChange={onFilesChange}
             allowedExtensions={['jpeg', 'jpg', 'png']}
-            subTitle=".jpeg    .jpg    .png"
+            subTitle='.jpeg    .jpg    .png'
             enablePreview
             onFileRemove={onImageRemove}
             defaultFiles={images}
@@ -387,10 +387,10 @@ export function ProductControl<T extends FormValues>({
         </Col>
       </Row>
 
-      <Col lg={12} md={12} xl className="p-0">
+      <Col lg={12} md={12} xl className='p-0'>
         <Form.Group
           controlId={isAvailableId}
-          className="advanced-switch-container"
+          className='advanced-switch-container'
         >
           <Form.Label>{t('isAvailable')}</Form.Label>
 
@@ -410,7 +410,7 @@ export function ProductControl<T extends FormValues>({
 
         <Form.Group
           controlId={isSoldOutId}
-          className="advanced-switch-container"
+          className='advanced-switch-container'
         >
           <Form.Label>{t('isSoldOut')}</Form.Label>
 
@@ -427,24 +427,24 @@ export function ProductControl<T extends FormValues>({
             name={`${fieldNamePrefix}.isSoldOut` as Path<T>}
           />
         </Form.Group>
-        <Form.Group controlId={advancedId} className="custom-checkbox">
+        <Form.Group controlId={advancedId} className='custom-checkbox'>
           <Form.Check
             custom
-            type="checkbox"
+            type='checkbox'
             name={advancedId}
             disabled={isLoading || isOverrides}
           >
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
-              type="checkbox"
+              type='checkbox'
             />
             <Form.Check.Label>{t('showAdvancedOptions')}</Form.Check.Label>
           </Form.Check>
         </Form.Group>
       </Col>
 
-      <Col lg={12} md={12} xl className="p-0">
+      <Col lg={12} md={12} xl className='p-0'>
         <Collapse in={expanded}>
           {/* Div should be here not in component, otherwise component will be always collapsed */}
           <div>
@@ -471,14 +471,14 @@ export function ProductControl<T extends FormValues>({
 
       <Row>
         <Col xs>
-          <div className="d-flex justify-content-end mt-4">
+          <div className='d-flex justify-content-end mt-4'>
             {Boolean(onCopy) && (
               <Button
                 onClick={onCopy}
-                variant="link"
-                className="d-flex align-items-center"
+                variant='link'
+                className='d-flex align-items-center'
               >
-                <FaClipboard size={16} className="mr-2" /> {t('copy')}
+                <FaClipboard size={16} className='mr-2' /> {t('copy')}
               </Button>
             )}
           </div>

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -45,7 +45,7 @@ export const AdvancedOptions = <T extends FormValues>({
     <>
       <Form.Group
         controlId={isRequiredId}
-        className="advanced-switch-container"
+        className='advanced-switch-container'
       >
         <Form.Label>{t('isRequired')}</Form.Label>
 
@@ -65,7 +65,7 @@ export const AdvancedOptions = <T extends FormValues>({
 
       <Form.Group
         controlId={hasSpecialNotesId}
-        className="advanced-switch-container"
+        className='advanced-switch-container'
       >
         <Form.Label>{t('hasSpecialNotes')}</Form.Label>
 
@@ -94,23 +94,23 @@ export const AdvancedOptions = <T extends FormValues>({
       <Form.Group controlId={productGroupId}>
         <Form.Label>{t('productGroup')}</Form.Label>
         <Form.Control
-          as="select"
+          as='select'
           {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
             errors,
           )}
           disabled={isLoading || isOverrides}
-          defaultValue=""
+          defaultValue=''
         >
-          <option value="">{t('Design:selectProductGroup')}</option>
+          <option value=''>{t('Design:selectProductGroup')}</option>
           {productGroupList.map((productGroup) => (
             <option value={productGroup.id} key={productGroup.id}>
               {productGroup.value}
             </option>
           ))}
         </Form.Control>
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
             errors,
@@ -118,7 +118,7 @@ export const AdvancedOptions = <T extends FormValues>({
         </Form.Control.Feedback>
       </Form.Group>
 
-      <Col lg={8} md={8} className="pl-0">
+      <Col lg={8} md={8} className='pl-0'>
         <Form.Group controlId={termsAndConditionsId}>
           <Form.Label>{t('productTermsConditions')}</Form.Label>
 
@@ -126,7 +126,7 @@ export const AdvancedOptions = <T extends FormValues>({
             render={({ field: { value, onChange, name, ref } }) => (
               <Form.Control
                 ref={ref}
-                as="textarea"
+                as='textarea'
                 rows={3}
                 value={value as string}
                 onChange={onChange}
@@ -142,7 +142,7 @@ export const AdvancedOptions = <T extends FormValues>({
             name={`${fieldNamePrefix}.termsAndConditions` as Path<T>}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.termsAndConditions` as Path<T>,
               errors,
@@ -151,7 +151,7 @@ export const AdvancedOptions = <T extends FormValues>({
         </Form.Group>
       </Col>
 
-      <Form.Group controlId={minSpendId} className="advanced-switch-container">
+      <Form.Group controlId={minSpendId} className='advanced-switch-container'>
         <ProductPriceControl
           title={t('minSpend')}
           isRequired={false}

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story<ProductBookingManagementControlProps<{}>> = (
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -49,7 +49,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
       <Form.Group controlId={zoneId}>
         <Form.Label>{t('zone')}</Form.Label>
         <Form.Control
-          as="select"
+          as='select'
           {...register(`${fieldNamePrefix}.zoneId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.zoneId` as Path<T>,
@@ -63,7 +63,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             </option>
           ))}
         </Form.Control>
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.zoneId` as Path<T>,
             errors,
@@ -85,7 +85,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
                 min={0}
                 step={1}
                 value={value as string}
@@ -111,7 +111,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             }}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.capacity` as Path<T>,
               errors,
@@ -128,9 +128,9 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
-                min="0"
-                step="1"
+                type='number'
+                min='0'
+                step='1'
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -147,7 +147,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                as="select"
+                as='select'
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -167,7 +167,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
             name={`${fieldNamePrefix}.duration` as Path<T>}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.duration` as Path<T>,
               errors,

package/src/product-set/product/deposit/ProductDeposit.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<ProductDepositControlProps<{}>> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -41,7 +41,7 @@ export function ProductDepositControl<T extends FormValues>(
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaPoundSign size={10} className="p-0" />
+              <FaPoundSign size={10} className='p-0' />
             </InputGroup.Text>
           </InputGroup.Prepend>
 
@@ -49,10 +49,10 @@ export function ProductDepositControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
                 min={0}
                 max={Number(totalPrice)}
-                step="0.01"
+                step='0.01'
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -85,7 +85,7 @@ export function ProductDepositControl<T extends FormValues>(
             }}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.deposit` as Path<T>,
               errors,

package/src/product-set/product/duration/ProductDurationControl.stories.tsx

@@ -15,7 +15,7 @@ export const Default: Story = () => {
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(console.log)}>
         <ProductDurationControl
-          fieldNamePrefix=""
+          fieldNamePrefix=''
           providerHasBookingManagement
         />
       </form>

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -75,21 +75,21 @@ export const ProductDurationControl = <T,>({
       render={({ field }) => (
         <>
           <Col lg={4} md={4} sm={6}>
-            <Form.Group controlId={hoursId} className="position-relative">
+            <Form.Group controlId={hoursId} className='position-relative'>
               <Form.Label>{t('durationHours')}</Form.Label>
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className="arrow-up-btn"
+                  className='arrow-up-btn'
                   onClick={() => onHoursChange(durationHours + 1)}
                 >
-                  <InputGroup.Text className="py-0 px-3">
+                  <InputGroup.Text className='py-0 px-3'>
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
 
                 <Form.Control
-                  type="number"
+                  type='number'
                   min={0}
                   step={1}
                   value={durationHours}
@@ -102,7 +102,7 @@ export const ProductDurationControl = <T,>({
                   onFocus={onFocus}
                 />
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {HookFormService.getErrors<T>(fieldName, errors)}
                 </Form.Control.Feedback>
               </InputGroup>
@@ -110,21 +110,21 @@ export const ProductDurationControl = <T,>({
           </Col>
 
           <Col lg={4} md={4} sm={6}>
-            <Form.Group controlId={minutesId} className="position-relative">
+            <Form.Group controlId={minutesId} className='position-relative'>
               <Form.Label>{t('durationMinutes')}</Form.Label>
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className="arrow-up-btn"
+                  className='arrow-up-btn'
                   onClick={() => onMinutesChange(durationMinutes + 1)}
                 >
-                  <InputGroup.Text className="py-0 px-3">
+                  <InputGroup.Text className='py-0 px-3'>
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
 
                 <Form.Control
-                  type="number"
+                  type='number'
                   min={0}
                   step={1}
                   disabled={disabled}
@@ -136,7 +136,7 @@ export const ProductDurationControl = <T,>({
                   onFocus={onFocus}
                 />
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {HookFormService.getErrors<T>(fieldName, errors)}
                 </Form.Control.Feedback>
               </InputGroup>

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -18,7 +18,7 @@ export const FixedDurationOptions = <T,>({
 
   return (
     <>
-      <Row className="mt-4">
+      <Row className='mt-4'>
         <Col lg={4} md={4} sm={6}>
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}

package/src/product-set/product/price/ProductPrice.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<ProductPriceControlProps<{}>> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -49,7 +49,7 @@ export function ProductPriceControl<T extends FormValues>({
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaPoundSign size={10} className="p-0" />
+              <FaPoundSign size={10} className='p-0' />
             </InputGroup.Text>
           </InputGroup.Prepend>
 
@@ -57,10 +57,10 @@ export function ProductPriceControl<T extends FormValues>({
             render={({ field: { value, onChange, name, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
                 min={0}
                 max={999999.99}
-                step="0.01"
+                step='0.01'
                 value={value as string}
                 name={name}
                 onChange={onChange}
@@ -114,7 +114,7 @@ export function ProductPriceControl<T extends FormValues>({
             }}
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}` as Path<T>,
               errors,

package/src/product-set/product/quantity/ProductQuantity.stories.tsx

@@ -31,7 +31,7 @@ export const Default: Story<ProductQuantityControlProps<{}>> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >
@@ -57,7 +57,7 @@ export const ConstantForm: Story<ProductQuantityConstantControlProps<{}>> = (
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >
@@ -79,7 +79,7 @@ export const RechargingForm: Story<
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >