@licklist/design 0.72.71 → 0.72.72-dev.1

package/src/header/index.ts

@@ -1,7 +1,7 @@
 import BookeditHeader from './BookeditHeader'
-import LicklistHeader from './LicklistHeader'
 import Header from './Header'
 
 export * from './elements'
 
-export { LicklistHeader, BookeditHeader, Header }
+export { BookeditHeader, Header }
+export type { NavigationItem } from './Header'

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

@@ -48,12 +48,12 @@ export const ProductWithModifierSetModal = ({
           </button>
         </div>
         <div className='right-block' id='select-event-container'>
-          <div className={clsx('manual-booking-container', !product?.images?.length && 'tw-mt-8')}>
+          <div className={clsx('manual-booking-container', !product.images.length && 'tw-mt-8')}>
             <div className='manual-booking-header'>
               <TicketDescription
                 title={product.name}
                 description={product.description}
-                className={clsx('iframe-event__product-description', !product?.images?.length && 'mt-6')}
+                className={clsx('iframe-event__product-description', !product.images.length && 'mt-6')}
                 classNameProductModal='d-block'
                 images={product.images}
                 isRequired={product.isRequired}

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

@@ -35,9 +35,6 @@ export const ModifiersSetControl = ({
   const { t } = useTranslation('App')
 
   const orderModifiersSets = watch(`${productId}.orderProductModifiers`)
-  const filteredOrderModifiersSets = orderModifiersSets
-    ?.flat(Infinity)
-    ?.filter((item) => item && typeof item === 'object')
 
   const { formatNumber } = useIntl()
   const formatToCurrency = (value: number) =>
@@ -61,9 +58,8 @@ export const ModifiersSetControl = ({
     const selectedModifier = modifiers?.find(
       (item) => item.id === Number(e.target.defaultValue || e.target.id),
     )
-
     const checkSelectedModifier =
-      filteredOrderModifiersSets?.find(
+      orderModifiersSets?.find(
         (modifier) => modifier?.modifierId === selectedModifier?.id,
       )?.quantity === 1
 
@@ -129,11 +125,9 @@ export const ModifiersSetControl = ({
     )
   }, [isEditMode])
 
-  const radioButtonDefaultModifier = currentOrderModifiersSets
-    .find((modifier) =>
-      modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId),
-    )
-    ?.modifierId.toString()
+  const radioButtonDefaultModifier = currentOrderModifiersSets.find((modifier) => 
+    modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId)
+)?.modifierId.toString();
 
   return (
     <>
@@ -173,9 +167,7 @@ export const ModifiersSetControl = ({
                             inline
                             id={modifier.id.toString()}
                             defaultChecked={!!selectedOrderModifierId}
-                            defaultValue={
-                              selectedOrderModifierId || modifier.id.toString()
-                            }
+                            defaultValue={selectedOrderModifierId || modifier.id.toString()}
                             checked={field.value === modifier.id.toString()}
                             onChange={onChange}
                             type='radio'

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { calculateTotalModifiersPrice } from '../../utils'
 import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
 
 

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -89,6 +89,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -101,6 +102,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,6 +61,7 @@ const processedPaymentSummary = ({
   const total = order.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,20 +61,22 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById("ryft-pay-iframe");
+  const payIframe = document.getElementById('ryft-pay-iframe')
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? "block" : "none"
+      formBox.style.display = isDisableButton ? 'block' : 'none'
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -86,7 +88,6 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
-    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

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

@@ -225,7 +225,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <SaleDeadline disabled={false} onlyBefore />
+        <SaleDeadline disabled={false} isProductSet />
 
         <div className='divider' />
 

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

@@ -13,7 +13,7 @@ import { isEqual } from 'lodash'
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { transformErrorToMessage } from '@licklist/plugins'
+import { transformErrorToMessage } from '@licklist/plugins/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -33,12 +33,16 @@ import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 export interface WithIsLoading {
   isLoading: boolean
 }
+export interface WithIdOptional {
+  id?: number
+}
+
 export interface WithId {
   id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean

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

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React, { useContext, useState } from 'react'
-
+import { useContext, useState } from 'react'
 import {
   ArrayPath,
   Controller,

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

@@ -70,9 +70,6 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
-                // @TODO fix prod type error
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 append(subProductCopy)
               }}
             />

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

@@ -46,9 +46,6 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
-                            // @TODO fix prod type error
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}

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

@@ -34,7 +34,6 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'

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

@@ -86,6 +86,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -129,6 +130,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

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

@@ -50,6 +50,7 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

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

@@ -91,6 +91,7 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -127,6 +128,7 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

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

@@ -59,6 +59,7 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,6 +111,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -165,6 +166,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,6 +85,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -143,6 +144,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,6 +69,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -221,6 +221,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -293,6 +294,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -353,6 +355,7 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -543,6 +546,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

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,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,6 +109,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -91,6 +91,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/resource/form/components/CapacityControl.tsx

@@ -27,6 +27,7 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
           required: true,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}

package/src/resource/form/components/SortControl.tsx

@@ -27,6 +27,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}

package/src/sales/booking/results/components/ResultCard.tsx

@@ -20,8 +20,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void
 }
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -179,6 +179,7 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.discount !== undefined}
                 {...register('discount', {
                   required: t('Validation:fieldRequired', {
@@ -316,6 +317,7 @@ export const CouponFormControl = ({
               <Form.Control
                 {...register('totalCoupons')}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}
               />
@@ -330,6 +332,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUser')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
             </Form.Group>
@@ -342,6 +345,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('useAgain')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -355,6 +359,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('usesPerUserDay')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -370,6 +375,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('minAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>
@@ -383,6 +389,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type='number'
                 {...register('maxAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
               <Form.Text className='text-muted'>

package/src/sales/coupon/form/CouponFrom.tsx

@@ -12,7 +12,6 @@ import { useForm, FormProvider } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
-
 import { CouponFormControl } from '../control'
 
 export interface CouponFormValues {
@@ -38,6 +37,7 @@ export interface CouponFormProps {
   productGroups?: ProductGroup[]
   defaultValues?: CouponFormValues
   onSubmit: (values: CouponFormValues) => void
+  onCancel: () => void
   isLoading?: boolean
   hasPermission: boolean
   serverErrors?: ServerError
@@ -45,6 +45,7 @@ export interface CouponFormProps {
 
 export const CouponForm = ({
   onSubmit,
+  onCancel,
   defaultValues,
   isLoading = false,
   productGroups,
@@ -73,13 +74,24 @@ export const CouponForm = ({
           isLoading={isLoading}
         />
         {hasPermission && (
-          <Button
-            className='mt-5 d-no dne d-md-block'
-            type='submit'
-            disabled={isLoading}
-          >
-            {t('save')}
-          </Button>
+          <div className='tw-flex tw-gap-4'>
+            <Button
+              className='d-md-block mt-5'
+              type='submit'
+              disabled={isLoading}
+            >
+              {t('save')}
+            </Button>
+            <Button
+              className='mt-5 d-md-block'
+              variant='outline-primary'
+              type='reset'
+              onClick={onCancel}
+              disabled={isLoading}
+            >
+              {t('cancel')}
+            </Button>
+          </div>
         )}
       </Form>
     </FormProvider>

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -178,6 +178,7 @@ export const DashboardSettingForm = ({
               <Form.Label>{t('metaPixelId')}</Form.Label>
               <Form.Control
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register('metaPixelId', {
                   minLength: {
                     value: 15,

package/src/setting/index.ts

@@ -1,3 +1 @@
-export * from './system'
-export * from './admin'
 export * from './dashboard'

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,9 +1,4 @@
-import {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
 import { DndContext, useDraggable } from '@dnd-kit/core'
 import {
   SortableContext,

package/src/static/CurrencyNumberInput.tsx

@@ -45,6 +45,7 @@ export const CurrencyNumberInput = forwardRef<
           disabled={disabled}
           value={value}
           onChange={onChange}
+          onWheel={(event) => event.currentTarget.blur()}
           ref={ref}
           {...props}
         />

package/src/static/form-number-input/FormNumberInput.tsx

@@ -75,6 +75,7 @@ export const FormNumberInput = ({
               type='number'
               step={step}
               disabled={disabled}
+              onWheel={(event) => event.currentTarget.blur()}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
               onChange={(event) => {

package/src/static/number-input/NumberInput.tsx

@@ -49,6 +49,7 @@ export function NumberInput({
     <div className={inputWrapperClasses}>
       <FormControl
         type='number'
+        onWheel={(event) => event.currentTarget.blur()}
         onChange={(e) => onChange(Number(e.target.value))}
         value={value}
         min={min}

package/src/styles/iframe-events/Calendar.scss

@@ -74,7 +74,7 @@
     .calendar-dates-wrapper {
       .calendar-dates {
         display: grid;
-        grid-template-columns: repeat(7, 1fr);
+        grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
         overflow-x: auto;
       }

package/src/styles/iframe-external-modal/IframeExternalModal.scss

@@ -15,7 +15,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1000000;
+  z-index: 2147483646;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
 }
@@ -24,7 +24,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000001;
+  z-index: 2147483647;
   display: none;
   width: 100%;
   height: 100%;

package/src/styles/product-set/ProductSetForm.scss

@@ -1,5 +1,4 @@
 .product-set-form {
-
   input,
   textarea,
   select,
@@ -211,8 +210,8 @@
 
 .sortable-tree-item-toggle {
   .product-zone-badge {
-    background-color: #EFE9F5;
-    color: #84269B;
+    background-color: #efe9f5;
+    color: #84269b;
     font-size: 0.875rem;
     font-weight: 600;
   }