@licklist/design 0.69.1 → 0.69.3-dev.0

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,11 @@ export function ProductDepositControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
-                step="0.01"
+                step='0.01'
                 value={value as string}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
@@ -85,7 +86,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,22 +75,23 @@ 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}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -102,7 +103,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,23 +111,24 @@ 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}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}
@@ -136,7 +138,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,11 @@ export function ProductPriceControl<T extends FormValues>({
             render={({ field: { value, onChange, name, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
-                step="0.01"
+                step='0.01'
                 value={value as string}
                 name={name}
                 onChange={onChange}
@@ -114,7 +115,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)}
       >

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

@@ -99,7 +99,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend>
-              <InputGroup.Text className="py-0 px-3">
+              <InputGroup.Text className='py-0 px-3'>
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -108,9 +108,10 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               render={({ field: { value, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type="number"
+                  type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -126,7 +127,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               }}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.totalQuantity` as Path<T>,
                 errors,
@@ -142,7 +143,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend
-              className="arrow-up-btn"
+              className='arrow-up-btn'
               onClick={() => {
                 const currentNextQuantity = getValues(
                   `${fieldNamePrefix}.nextQuantity` as Path<T>,
@@ -153,7 +154,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                 )
               }}
             >
-              <InputGroup.Text className="py-0 px-3">
+              <InputGroup.Text className='py-0 px-3'>
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -162,9 +163,10 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               render={({ field: { value, onChange, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type="number"
+                  type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -187,8 +189,8 @@ export function ProductQuantityConstantControl<T extends FormValues>(
 
             <InputGroup.Append>
               <Button
-                className="px-2 py-0"
-                variant="outline-info"
+                className='px-2 py-0'
+                variant='outline-info'
                 onClick={handleClick}
                 disabled={isLoading || disabled}
               >
@@ -196,7 +198,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
               </Button>
             </InputGroup.Append>
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.nextQuantity` as Path<T>,
                 errors,
@@ -204,7 +206,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
             </Form.Control.Feedback>
           </InputGroup>
 
-          <Form.Text className="text-muted">
+          <Form.Text className='text-muted'>
             {t('youCanUsePositiveAndNegativeNumbersHere')}
           </Form.Text>
         </Form.Group>

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

@@ -65,7 +65,7 @@ export function ProductQuantityControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend
-              className="arrow-up-btn"
+              className='arrow-up-btn'
               onClick={() => {
                 setValue(
                   `${fieldNamePrefix}.minQuantity` as Path<T>,
@@ -73,7 +73,7 @@ export function ProductQuantityControl<T extends FormValues>(
                 )
               }}
             >
-              <InputGroup.Text className="py-0 px-3">
+              <InputGroup.Text className='py-0 px-3'>
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -82,9 +82,10 @@ export function ProductQuantityControl<T extends FormValues>(
               render={({ field: { value, onChange, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type="number"
+                  type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -107,7 +108,7 @@ export function ProductQuantityControl<T extends FormValues>(
               }}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.minQuantity` as Path<T>,
                 errors,
@@ -123,7 +124,7 @@ export function ProductQuantityControl<T extends FormValues>(
 
           <InputGroup hasValidation>
             <InputGroup.Prepend
-              className="arrow-up-btn"
+              className='arrow-up-btn'
               onClick={() => {
                 setValue(
                   `${fieldNamePrefix}.maxQuantity` as Path<T>,
@@ -131,7 +132,7 @@ export function ProductQuantityControl<T extends FormValues>(
                 )
               }}
             >
-              <InputGroup.Text className="py-0 px-3">
+              <InputGroup.Text className='py-0 px-3'>
                 <IncrementIcon />
               </InputGroup.Text>
             </InputGroup.Prepend>
@@ -140,9 +141,10 @@ export function ProductQuantityControl<T extends FormValues>(
               render={({ field: { value, onChange, ref } }) => (
                 <Form.Control
                   ref={ref}
-                  type="number"
+                  type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}
@@ -165,7 +167,7 @@ export function ProductQuantityControl<T extends FormValues>(
               }}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.maxQuantity` as Path<T>,
                 errors,

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

@@ -57,7 +57,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
-            <InputGroup.Text className="py-0 px-3">
+            <InputGroup.Text className='py-0 px-3'>
               <IncrementIcon />
             </InputGroup.Text>
           </InputGroup.Prepend>
@@ -66,9 +66,10 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
             render={({ field: { value, onChange, ref } }) => (
               <Form.Control
                 ref={ref}
-                type="number"
+                type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true
@@ -112,7 +113,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
             }
           />
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.totalQuantity` as Path<T>,
               errors,

package/src/product-set/product-category/ProductCategory.stories.tsx

@@ -59,7 +59,7 @@ export const Default: Story<ProductCategoryControlProps> = (args) => {
     <ProductSetLoadingContext.Provider value={contextValue}>
       <FormProvider {...form}>
         <Form
-          className="d-flex flex-column"
+          className='d-flex flex-column'
           noValidate
           onSubmit={form.handleSubmit(onSubmit)}
         >
@@ -88,7 +88,7 @@ export const WithData: Story<ProductCategoryControlProps> = (args) => {
     <ProductSetLoadingContext.Provider value={contextValue}>
       <FormProvider {...form}>
         <Form
-          className="d-flex flex-column"
+          className='d-flex flex-column'
           noValidate
           onSubmit={form.handleSubmit(onSubmit)}
         >
@@ -120,7 +120,7 @@ export const WithSortable: Story<ProductCategoryControlProps> = (args) => {
       <ProductSetLoadingContext.Provider value={contextValue}>
         <FormProvider {...form}>
           <Form
-            className="d-flex flex-column"
+            className='d-flex flex-column'
             noValidate
             onSubmit={form.handleSubmit(onSubmit)}
           >
@@ -130,7 +130,7 @@ export const WithSortable: Story<ProductCategoryControlProps> = (args) => {
             >
               <SortableTree.Item
                 id={id}
-                title="Product category #1"
+                title='Product category #1'
                 body={<ProductCategoryControl {...args} />}
               />
             </SortableContext>

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

@@ -124,7 +124,7 @@ export function ProductCategoryControl({
 
   return (
     <>
-      <Col md={12} xl className="p-0">
+      <Col md={12} xl className='p-0'>
         <Form.Group controlId={nameId}>
           <Form.Label>{t('nameOfTheCategory')}</Form.Label>
           <Form.Control
@@ -152,7 +152,7 @@ export function ProductCategoryControl({
             placeholder={t('name')}
             disabled={isLoading || isOverride}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.getErrors<ProductSetFormValues>(
               `${fieldNamePrefix}.name` as const,
               errors,
@@ -165,7 +165,7 @@ export function ProductCategoryControl({
             control={control}
             name={`${fieldNamePrefix}.quantityType` as const}
             render={({ field }) => (
-              <Form.Group className="d-flex flex-column flex-grow-1 align-items-start">
+              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
                 <Form.Label>{t('quantityType')}</Form.Label>
                 <Switch
                   name={field.name}
@@ -190,7 +190,7 @@ export function ProductCategoryControl({
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className="arrow-up-btn"
+                  className='arrow-up-btn'
                   onClick={() => {
                     const currentMinSubItems = Number(
                       getValues(`${fieldNamePrefix}.minSubItems`) || 0,
@@ -202,7 +202,7 @@ export function ProductCategoryControl({
                     )
                   }}
                 >
-                  <InputGroup.Text className="py-0 px-3">
+                  <InputGroup.Text className='py-0 px-3'>
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
@@ -211,11 +211,12 @@ export function ProductCategoryControl({
                   render={({ field: { value, onChange, name, ref } }) => (
                     <Form.Control
                       ref={ref}
-                      type="number"
+                      type='number'
                       min={0}
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -246,7 +247,7 @@ export function ProductCategoryControl({
                   }}
                 />
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {HookFormService.getErrors<ProductSetFormValues>(
                     `${fieldNamePrefix}.minSubItems` as const,
                     errors,
@@ -262,7 +263,7 @@ export function ProductCategoryControl({
 
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className="arrow-up-btn"
+                  className='arrow-up-btn'
                   onClick={() => {
                     const currentMaxSubItems = Number(
                       getValues(`${fieldNamePrefix}.maxSubItems`) || 0,
@@ -274,7 +275,7 @@ export function ProductCategoryControl({
                     )
                   }}
                 >
-                  <InputGroup.Text className="py-0 px-3">
+                  <InputGroup.Text className='py-0 px-3'>
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
@@ -283,11 +284,12 @@ export function ProductCategoryControl({
                   render={({ field: { value, onChange, name, ref } }) => (
                     <Form.Control
                       ref={ref}
-                      type="number"
+                      type='number'
                       step={1}
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -308,7 +310,7 @@ export function ProductCategoryControl({
                   }}
                 />
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {HookFormService.getErrors<ProductSetFormValues>(
                     `${fieldNamePrefix}.maxSubItems` as const,
                     errors,
@@ -324,7 +326,7 @@ export function ProductCategoryControl({
               <Form.Label>{t('Design:overallQuantity')}</Form.Label>
               <InputGroup hasValidation>
                 <InputGroup.Prepend
-                  className="arrow-up-btn"
+                  className='arrow-up-btn'
                   onClick={() => {
                     const currentOverallCapacity = Number(
                       getValues(`${fieldNamePrefix}.overallQuantity`) || 0,
@@ -336,7 +338,7 @@ export function ProductCategoryControl({
                     )
                   }}
                 >
-                  <InputGroup.Text className="py-0 px-3">
+                  <InputGroup.Text className='py-0 px-3'>
                     <IncrementIcon />
                   </InputGroup.Text>
                 </InputGroup.Prepend>
@@ -347,7 +349,8 @@ export function ProductCategoryControl({
                     <Form.Control
                       min={0}
                       step={1}
-                      type="number"
+                      type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -366,7 +369,7 @@ export function ProductCategoryControl({
                     },
                   }}
                 />
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {HookFormService.getErrors<ProductSetFormValues>(
                     `${fieldNamePrefix}.overallQuantity`,
                     errors,
@@ -378,20 +381,20 @@ export function ProductCategoryControl({
         </Row>
       </Col>
 
-      <Col md={12} xl className="p-0">
-        <Form.Group controlId={advancedId} className="custom-checkbox">
+      <Col md={12} xl className='p-0'>
+        <Form.Group controlId={advancedId} className='custom-checkbox'>
           <Form.Check
             custom
-            type="checkbox"
+            type='checkbox'
             name={advancedId}
             disabled={isLoading}
-            id="check-api"
+            id='check-api'
           >
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
               disabled={isOverride}
-              type="checkbox"
+              type='checkbox'
             />
             <Form.Check.Label>{t('showAdvancedOptions')}</Form.Check.Label>
           </Form.Check>
@@ -401,7 +404,7 @@ export function ProductCategoryControl({
             {categoryHasTickets && (
               <Form.Group
                 controlId={hasTicketId}
-                className="advanced-switch-container"
+                className='advanced-switch-container'
               >
                 <Form.Label>{t('hasTicket')}</Form.Label>
                 <div>
@@ -448,7 +451,7 @@ export function ProductCategoryControl({
             {category.hasTicket && (
               <Form.Group
                 controlId={collectUserInfoId}
-                className="advanced-switch-container"
+                className='advanced-switch-container'
               >
                 <Form.Label>{t('collectUserInfo')}</Form.Label>
 
@@ -472,7 +475,7 @@ export function ProductCategoryControl({
             {!category.hasTicket && (
               <Form.Group
                 controlId={isTimeRelatedId}
-                className="advanced-switch-container"
+                className='advanced-switch-container'
               >
                 <>
                   <Form.Label>{t('isTimeRelated')}</Form.Label>
@@ -496,7 +499,7 @@ export function ProductCategoryControl({
             {/* // @TODO This feature is hidden until we fix all critical bugs. */}
             <Form.Group
               controlId={allowDepositsId}
-              className="advanced-switch-container"
+              className='advanced-switch-container'
             >
               <Form.Label>{t('allowDeposits')}</Form.Label>
               <div>
@@ -518,18 +521,19 @@ export function ProductCategoryControl({
             {allowDeposits && (
               <Form.Group
                 controlId={remainderExpireAfterId}
-                className="deposit-days"
+                className='deposit-days'
               >
                 <Form.Label>{t('depositDays')}</Form.Label>
                 <Controller
                   render={({ field: { value, onChange, name, ref } }) => (
                     <Form.Control
                       ref={ref}
-                      type="number"
+                      type='number'
                       min={0}
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,
@@ -542,7 +546,7 @@ export function ProductCategoryControl({
                   name={`${fieldNamePrefix}.remainderExpireAfter` as const}
                 />
 
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {HookFormService.getErrors<ProductSetFormValues>(
                     `${fieldNamePrefix}.remainderExpireAfter` as const,
                     errors,