@licklist/design 0.68.5-dev.0 → 0.68.6-dev.0

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -30,7 +30,7 @@ export const ProductSetRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root flex-column"
+      className='sortable-tree-root flex-column'
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -38,20 +38,20 @@ export const ProductSetRecurrenceControl = ({
       {...attributes}
       {...listeners}
       ref={setNodeRef}
-      role="button"
+      role='button'
       tabIndex={0}
     >
       <div
         key={menuRecurrence.rrule}
-        className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
+        className='product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1'
       >
-        <span className="d-flex flex-row align-items-center">
+        <span className='d-flex flex-row align-items-center'>
           <FaCalendar
             size={16}
-            className="product-set-recurrence-icon-calendar"
+            className='product-set-recurrence-icon-calendar'
           />
 
-          <span className="product-set-recurrence-title d-flex flex-grow-1">
+          <span className='product-set-recurrence-title d-flex flex-grow-1'>
             {t('from')}{' '}
             {formatDate(menuRecurrence.startDate, {
               dateStyle: 'medium',
@@ -67,19 +67,19 @@ export const ProductSetRecurrenceControl = ({
           </span>
 
           <div
-            className="d-inline-flex"
-            role="button"
+            className='d-inline-flex'
+            role='button'
             tabIndex={0}
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
             <FaEllipsisH
               size={16}
-              className="product-set-recurrence-icon-more"
+              className='product-set-recurrence-icon-more'
             />
           </div>
         </span>
-        <span className="product-set-recurrence-description">
+        <span className='product-set-recurrence-description'>
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>

package/src/product-set/control/ProductSetRecurrenceOverridesControl.tsx

@@ -16,36 +16,36 @@ export const ProductSetRecurrenceOverridesControl = ({
   const { formatDate } = useIntl()
 
   return (
-    <div className="sortable-tree-root flex-column" role="button" tabIndex={0}>
+    <div className='sortable-tree-root flex-column' role='button' tabIndex={0}>
       <div
         key={menuRecurrence.rrule}
-        className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
+        className='product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1'
       >
-        <span className="d-flex flex-row align-items-center">
+        <span className='d-flex flex-row align-items-center'>
           <FaCalendar
             size={16}
-            className="product-set-recurrence-icon-calendar"
+            className='product-set-recurrence-icon-calendar'
           />
-          <span className="product-set-recurrence-title d-flex flex-grow-1">
+          <span className='product-set-recurrence-title d-flex flex-grow-1'>
             {formatDate(menuRecurrence.startDate, {
               dateStyle: 'medium',
             })}{' '}
           </span>
 
           <div
-            className="d-inline-flex"
-            role="button"
+            className='d-inline-flex'
+            role='button'
             tabIndex={0}
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
             <FaEllipsisH
               size={16}
-              className="product-set-recurrence-icon-more"
+              className='product-set-recurrence-icon-more'
             />
           </div>
         </span>
-        <span className="product-set-recurrence-description">
+        <span className='product-set-recurrence-description'>
           {formatDate(menuRecurrence.startDate, {
             dateStyle: 'medium',
           })}{' '}

package/src/product-set/control/TutorialGifCard.tsx

@@ -24,38 +24,38 @@ const TutorialGifCard = ({
   return (
     <>
       <Card className={`tutorial-card ${!isVisible && 'hidden'}`}>
-        <Card.Header className="tutorial-card-header">
+        <Card.Header className='tutorial-card-header'>
           <div>
             <FaCheck
-              color="white"
-              className="rounded product-set-item-icon"
+              color='white'
+              className='rounded product-set-item-icon'
               size={14}
             />
             <span>{t('bookedTopTip')}</span>
           </div>
           <button
-            className="border-0"
+            className='border-0'
             onClick={() => setIsVisible(false)}
-            type="button"
+            type='button'
           >
             <span>{t('gotIt')}</span>
-            <FaTimes size={18} className="rounded tutorial-close-icon p-1" />
+            <FaTimes size={18} className='rounded tutorial-close-icon p-1' />
           </button>
         </Card.Header>
-        <Card.Body className="tutorial-card-body">
+        <Card.Body className='tutorial-card-body'>
           <p>
             {t(isOverrides ? 'buildOverrideProductSet' : 'buildProductSet')}
           </p>
           <span>
             {t(isOverrides ? 'buildOverrideRules' : 'buildProductSetDesc')}
           </span>
-          {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
+          {tutorialAsset && <Image src={tutorialAsset} alt='Tutorial Gif' />}
         </Card.Body>
       </Card>
       <Button
-        type="button"
+        type='button'
         onClick={() => setIsVisible(true)}
-        className="mb-4"
+        className='mb-4'
         style={{ display: !isVisible ? 'block' : 'none' }}
       >
         <span>{t('hint')}</span>

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

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

package/src/product-set/deposit-paid/ProductSetDepositPaidControl.tsx

@@ -38,11 +38,11 @@ export function ProductSetDepositPaidControl(
   return (
     <Row>
       <Col xs={12}>
-        <div className="form-inline">
+        <div className='form-inline'>
           <Form.Group controlId={depositPaidId}>
             <Form.Label>{t('depositPaid')}</Form.Label>
 
-            <div className="form-inline-group">
+            <div className='form-inline-group'>
               <InputGroup hasValidation>
                 <InputGroup.Prepend>
                   <InputGroup.Text>{t('pay')}</InputGroup.Text>
@@ -58,7 +58,7 @@ export function ProductSetDepositPaidControl(
                     />
                   )}
                   control={control}
-                  name="depositPaidAmount"
+                  name='depositPaidAmount'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidAmount'),
@@ -83,7 +83,7 @@ export function ProductSetDepositPaidControl(
                 <Controller
                   render={({ field: { value, onChange } }) => (
                     <Form.Control
-                      as="select"
+                      as='select'
                       onChange={onChange}
                       isInvalid={Boolean(errors.depositPaidAmountType)}
                       disabled={isLoading}
@@ -100,7 +100,7 @@ export function ProductSetDepositPaidControl(
                     </Form.Control>
                   )}
                   control={control}
-                  name="depositPaidAmountType"
+                  name='depositPaidAmountType'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidAmountType'),
@@ -122,7 +122,7 @@ export function ProductSetDepositPaidControl(
                     />
                   )}
                   control={control}
-                  name="depositPaidPeriod"
+                  name='depositPaidPeriod'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidPeriod'),
@@ -147,7 +147,7 @@ export function ProductSetDepositPaidControl(
                 <Controller
                   render={({ field: { value, onChange } }) => (
                     <Form.Control
-                      as="select"
+                      as='select'
                       onChange={onChange}
                       isInvalid={Boolean(errors.depositPaidPeriodType)}
                       disabled={isLoading}
@@ -164,7 +164,7 @@ export function ProductSetDepositPaidControl(
                     </Form.Control>
                   )}
                   control={control}
-                  name="depositPaidPeriodType"
+                  name='depositPaidPeriodType'
                   rules={{
                     required: t('Validation:fieldRequired', {
                       attribute: t('depositPaidPeriodType'),
@@ -176,7 +176,7 @@ export function ProductSetDepositPaidControl(
                   <InputGroup.Text>{t('beforeEvent')}</InputGroup.Text>
                 </InputGroup.Append>
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors.depositPaidAmount?.message}
                   {errors.depositPaidPeriod?.message}
                 </Form.Control.Feedback>

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -11,11 +11,11 @@ export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
   return (
     <Button
       onClick={onDelete}
-      variant="outline-danger"
-      className="d-flex align-items-center"
+      variant='outline-danger'
+      className='d-flex align-items-center'
     >
       <FaTrashAlt size={16} />{' '}
-      <span className="d-none d-sm-inline ml-2">{t('delete')}</span>
+      <span className='d-none d-sm-inline ml-2'>{t('delete')}</span>
     </Button>
   )
 }

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

@@ -5,12 +5,12 @@ export function MobileFooter() {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="container product-set-mobile-footer">
+    <div className='container product-set-mobile-footer'>
       <div
         className={`d-block d-sm-none bg-white border-top fixed-bottom
          py-4 px-5 d-flex justify-content-between flex-row-reverse`}
       >
-        <Button type="submit">{t('save')}</Button>
+        <Button type='submit'>{t('save')}</Button>
       </div>
     </div>
   )

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

@@ -41,23 +41,23 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {
     label: 'tickets',
-    icon: <FaTicketAlt color="#0e8ce2" size={10} />,
+    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
   },
   [CATEGORY_TYPES_NAMES.bookings]: {
     label: 'bookings',
-    icon: <FaCalendar color="#0e8ce2" size={10} />,
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
   },
   [CATEGORY_TYPES_NAMES.menuItems]: {
     label: 'menuItems',
-    icon: <FaBars color="#0e8ce2" size={10} />,
+    icon: <FaBars color='#0e8ce2' size={10} />,
   },
   [CATEGORY_TYPES_NAMES.game]: {
     label: 'game',
-    icon: <FaBowlingBall color="#0e8ce2" size={10} />,
+    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
   },
   [CATEGORY_TYPES_NAMES.fixedDuration]: {
     label: 'fixedDuration',
-    icon: <FaCalendar color="#0e8ce2" size={10} />,
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
   },
 }
 
@@ -278,14 +278,14 @@ export function ProductCategoriesControl({
                   cancelChanges={() => cancelChanges(index)}
                   isInvalid={!!productCategoriesErrors}
                   badge={
-                    <Badge className="category-badge">
+                    <Badge className='category-badge'>
                       {t('productCategory')}
                     </Badge>
                   }
                   isIconInHeader={false}
                   subTitle={
-                    <div className="product-set-badges-container">
-                      <div className="product-set-subtitle-dot product-set-subtitle-category-dot" />
+                    <div className='product-set-badges-container'>
+                      <div className='product-set-subtitle-dot product-set-subtitle-category-dot' />
                       <span>
                         {productCategoryState[
                           productCategory?.id ?? productCategory.uniqueId
@@ -294,7 +294,7 @@ export function ProductCategoriesControl({
                       </span>
                     </div>
                   }
-                  treeLineIconColor="#1A93AA"
+                  treeLineIconColor='#1A93AA'
                   modalLabel={t('addNewCategory')}
                   secondaryBadge={getBadgeConfig(
                     productCategory.type,
@@ -303,9 +303,9 @@ export function ProductCategoriesControl({
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
                   itemButton={
-                    <div className="btn-outline-primary item-icon sm border border-primary rounded-sm">
+                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
                       {categoryType.icon}
-                      <span className="ml-2">{t(categoryType.label)}</span>
+                      <span className='ml-2'>{t(categoryType.label)}</span>
                     </div>
                   }
                   body={
@@ -389,7 +389,7 @@ export function ProductCategoriesControl({
             )}
           />
           {showVenueMapSetError && (
-            <div className="manual-form-error">
+            <div className='manual-form-error'>
               {venueMapSetIdError &&
                 t('Validation:fieldRequired', {
                   attribute: t('Design:venueMapSet'),
@@ -409,7 +409,7 @@ export function ProductCategoriesControl({
         </>
       )}
 
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {productCategoriesErrors && productCategoriesErrors.message}
       </div>
     </>

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

@@ -200,13 +200,13 @@ export function ProductSetForm({
                 <Row>
                   <Col md={6} sm={12} />
                   <Col
-                    className="product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100"
+                    className='product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100'
                     md={6}
                     sm={12}
                   >
                     {onSubmitNoRedirect && (
                       <Button
-                        className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
+                        className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
                         onClick={form.handleSubmit(
                           submitHandler(onSubmitNoRedirect),
                         )}
@@ -218,8 +218,8 @@ export function ProductSetForm({
                       </Button>
                     )}
                     <Button
-                      className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                      type="submit"
+                      className='product-set-save-btn mt-5 ml-5 d-no dne d-md-block'
+                      type='submit'
                       disabled={
                         isLoading || contextIsLoading || !formValues.name
                       }

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

@@ -14,18 +14,18 @@ function ProductSetFormPopover({ className = '' }: ProductSetFormPopoverProps) {
 
   return (
     <ProductSetPopover
-      placement="bottom"
+      placement='bottom'
       ref={popoverRef}
       onClick={() => setIsVisible(true)}
       isVisible={isVisible}
       className={className}
     >
-      <Tabs defaultActiveKey="first">
-        <Tabs.Tab eventKey="first" title="Add item">
+      <Tabs defaultActiveKey='first'>
+        <Tabs.Tab eventKey='first' title='Add item'>
           <p>Add new sub product item</p>
           <p>Add new sub product modifier</p>
         </Tabs.Tab>
-        <Tabs.Tab eventKey="second" title="Reusable subsets">
+        <Tabs.Tab eventKey='second' title='Reusable subsets'>
           <p>Add new sub product item 1</p>
           <p>Add new sub product modifier 2</p>
         </Tabs.Tab>

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

@@ -21,7 +21,7 @@ export const ProductSetNameControl = ({
         placeholder={t('Design:placeholderProductSetName')}
         isInvalid={Boolean(error)}
       />
-      <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
+      <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
     </Form.Group>
   )
 }

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

@@ -122,14 +122,14 @@ export const ProductZonesControl = <T extends FormValues>({
               id={String(productZones._id)}
               title={zones.find((zone) => zone.id === Number(value))?.name}
               badge={
-                <Badge className="product-zone-badge">{t('productZone')}</Badge>
+                <Badge className='product-zone-badge'>{t('productZone')}</Badge>
               }
               isIconInHeader={false}
               cancelChanges={() => cancelChanges(index)}
               edit={() => edit(index)}
               subTitle={
-                <div className="product-set-badges-container">
-                  <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                <div className='product-set-badges-container'>
+                  <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
                   <span>
                     {zoneCapacity[index] &&
                       `${t('Cap')}: ${zoneCapacity[index]}; `}
@@ -172,7 +172,7 @@ export const ProductZonesControl = <T extends FormValues>({
           }
         }}
       />
-      <div className="manual-form-error">{productZonesError}</div>
+      <div className='manual-form-error'>{productZonesError}</div>
     </>
   )
 }

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

@@ -219,15 +219,15 @@ export function ProductsControl({
                   title={value}
                   isOverride={isOverrides}
                   badge={
-                    <Badge className="product-badge">{t('product')}</Badge>
+                    <Badge className='product-badge'>{t('product')}</Badge>
                   }
                   isIconInHeader={false}
                   cancelChanges={() => cancelChanges(index)}
                   edit={() => edit(index)}
                   secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                   subTitle={
-                    <div className="product-set-badges-container">
-                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                    <div className='product-set-badges-container'>
+                      <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
                       <span>
                         {`£${prices[index]} ${t('each')} - ${t('qty')}:${
                           !isUnlimitedQuantities[index]
@@ -295,7 +295,7 @@ export function ProductsControl({
           }
         }}
       />
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {categoryProductErrors && categoryProductErrors.message}
       </div>
     </>

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

@@ -38,26 +38,26 @@ export type CategoryConfig = { label: string; icon: ReactElement }
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {
     label: 'tickets',
-    icon: <FaTicketAlt color="#0e8ce2" size={32} />,
+    icon: <FaTicketAlt color='#0e8ce2' size={32} />,
   },
   [CATEGORY_TYPES_NAMES.bookings]: {
     label: 'bookings',
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: <FaCalendar color='#0e8ce2' size={32} />,
   },
   [CATEGORY_TYPES_NAMES.menuItems]: {
     label: 'menuItems',
-    icon: <FaBars color="#0e8ce2" size={32} />,
+    icon: <FaBars color='#0e8ce2' size={32} />,
   },
 }
 
 const BOOKING_SUBCATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.game]: {
     label: 'game',
-    icon: <FaBowlingBall color="#0e8ce2" size={32} />,
+    icon: <FaBowlingBall color='#0e8ce2' size={32} />,
   },
   [CATEGORY_TYPES_NAMES.fixedDuration]: {
     label: 'fixedDuration',
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: <FaCalendar color='#0e8ce2' size={32} />,
   },
 }
 
@@ -102,18 +102,18 @@ export function SelectCategoryModal({
 
   return (
     <Modal
-      size="lg"
+      size='lg'
       centered
       show={isVisible}
       onHide={onHide}
-      className="p-3 border-0"
+      className='p-3 border-0'
       animation={false}
-      contentClassName="rounded"
+      contentClassName='rounded'
     >
-      <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h5">{t('Design:selectCategory')}</ModalTitle>
+      <ModalHeader className='align-items-center border-0'>
+        <ModalTitle as='h5'>{t('Design:selectCategory')}</ModalTitle>
 
-        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
+        <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
           <FaTimes size={20} />
         </Button>
       </ModalHeader>
@@ -127,22 +127,22 @@ export function SelectCategoryModal({
           controls={false}
         >
           <Carousel.Item>
-            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
+            <div className='d-flex flex-row flex-wrap p-4 justify-content-between mb-6'>
               {mainCategories.map((categoryType) => {
                 const { label, icon } = MAIN_CATEGORIES[categoryType]
 
                 return (
                   <Col key={label}>
                     <Button
-                      variant="outline-light"
-                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
-                      role="button"
+                      variant='outline-light'
+                      className='d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded'
+                      role='button'
                       tabIndex={0}
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
                       {icon}
-                      <h6 className="text-dark mt-3">{t(label)}</h6>
+                      <h6 className='text-dark mt-3'>{t(label)}</h6>
                     </Button>
                   </Col>
                 )
@@ -150,22 +150,22 @@ export function SelectCategoryModal({
             </div>
           </Carousel.Item>
           <Carousel.Item>
-            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
+            <div className='d-flex flex-row flex-wrap p-4 justify-content-between mb-6'>
               {bookingSubcategories.map((categoryType) => {
                 const { label, icon } = BOOKING_SUBCATEGORIES[categoryType]
 
                 return (
                   <Col key={label}>
                     <Button
-                      variant="outline-light"
-                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
-                      role="button"
+                      variant='outline-light'
+                      className='d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded'
+                      role='button'
                       tabIndex={0}
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
                       {icon}
-                      <h6 className="text-dark mt-3">{t(label)}</h6>
+                      <h6 className='text-dark mt-3'>{t(label)}</h6>
                     </Button>
                   </Col>
                 )
@@ -176,7 +176,7 @@ export function SelectCategoryModal({
 
         {isBookingsSelected && (
           <Button
-            size="sm"
+            size='sm'
             className={`carousel-control-button ${
               activeCarouselIndex ? 'left' : 'right'
             }`}

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

@@ -92,7 +92,7 @@ export function StepsControl({
               <SortableTree.Item
                 id={step._id}
                 title={value}
-                badge={<Badge className="step-badge">{t('step')}</Badge>}
+                badge={<Badge className='step-badge'>{t('step')}</Badge>}
                 isExpanded={isFirstStepAdded || !!errors.steps?.[index]}
                 isInvalid={!!errors.steps?.[index]}
                 isIconInHeader={false}
@@ -103,14 +103,14 @@ export function StepsControl({
                 cancelChanges={() => cancelChanges(index)}
                 isOverride={isOverrideStep}
                 subTitle={
-                  <div className="product-set-badges-container">
-                    <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
+                  <div className='product-set-badges-container'>
+                    <div className='product-set-subtitle-dot product-set-subtitle-step-dot' />
                     <span>
                       {stepData.productCategories?.length} {t('categories')}
                     </span>
                   </div>
                 }
-                treeLineIconColor="#D52902"
+                treeLineIconColor='#D52902'
                 body={
                   <StepControl
                     isLoading={isLoading}
@@ -167,7 +167,7 @@ export function StepsControl({
           }
         }}
       />
-      <div className="manual-form-error">
+      <div className='manual-form-error'>
         {errors.steps && errors.steps.message}
       </div>
     </>