@licklist/design 0.69.1 → 0.69.2

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

@@ -30,7 +30,7 @@ export const NameControl = ({ isLoading }: NameControlProps) => {
         isInvalid={Boolean(errors.name)}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.name, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:name'),

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

@@ -22,7 +22,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
     <Form.Group controlId={sortId}>
       <Form.Label>{t('Design:ordering')}</Form.Label>
       <Form.Control
-        type="number"
+        type='number'
         {...register('sort', {
           required: false,
           min: 1,
@@ -31,7 +31,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.sort, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:sort'),

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

@@ -24,7 +24,7 @@ export const ZoneControl = ({ isLoading, zones = [] }: ZoneControlProps) => {
     <Form.Group controlId={zoneId}>
       <Form.Label>{t('Design:zone')}*</Form.Label>
       <Form.Control
-        as="select"
+        as='select'
         {...register('zoneId', {
           required: true,
         })}
@@ -32,14 +32,14 @@ export const ZoneControl = ({ isLoading, zones = [] }: ZoneControlProps) => {
         isInvalid={Boolean(errors.zoneId)}
         disabled={isLoading}
       >
-        <option value="">{t('Design:pleaseChooseOne')}</option>
+        <option value=''>{t('Design:pleaseChooseOne')}</option>
         {zones.map(({ id, name }: Zone) => (
           <option key={id} value={id}>
             {name}
           </option>
         ))}
       </Form.Control>
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.zoneId, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:zone'),

package/src/root.css

@@ -3,75 +3,75 @@
 @tailwind utilities;
 
 @layer base {
-    :root {
-        --background: 0 0% 95%;
-        --foreground: 0 0% 3.9%;
+  :root {
+    --background: 0 0% 95%;
+    --foreground: 0 0% 3.9%;
 
-        --card: 0 0% 100%;
-        --card-foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
 
-        --popover: 0 0% 100%;
-        --popover-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
 
-        --primary: 204 88% 47%;
-        --primary-foreground: 0 0% 98%;
+    --primary: 204 88% 47%;
+    --primary-foreground: 0 0% 98%;
 
-        --secondary: 0 0% 96.1%;
-        --secondary-foreground: 0 0% 9%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
-        --muted: 0 0% 96.1%;
-        --muted-foreground: 0 0% 45.1%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
 
-        --accent: 0 0% 96.1%;
-        --accent-foreground: 0 0% 9%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
 
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-        --border: 0 0% 89.8%;
-        --input: 0 0% 89.8%;
-        --ring: 0 0% 3.9%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
 
-        --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
 
-    .dark {
-        --background: 0 0% 3.9%;
-        --foreground: 0 0% 98%;
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
 
-        --card: 0 0% 3.9%;
-        --card-foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
 
-        --popover: 0 0% 3.9%;
-        --popover-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
 
-        --primary: 0 0% 98%;
-        --primary-foreground: 0 0% 9%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
 
-        --secondary: 0 0% 14.9%;
-        --secondary-foreground: 0 0% 98%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
 
-        --muted: 0 0% 14.9%;
-        --muted-foreground: 0 0% 63.9%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
 
-        --accent: 0 0% 14.9%;
-        --accent-foreground: 0 0% 98%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
 
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
 
-        --border: 0 0% 14.9%;
-        --input: 0 0% 14.9%;
-        --ring: 0 0% 83.1%;
-    }
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
-
-    body {
-        @apply bg-background text-foreground;
-    }
-}
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/sales/booking/results/BookingResults.tsx

@@ -18,11 +18,11 @@ export const BookingResults = ({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="booking-results">
+    <div className='booking-results'>
       {orders?.length === 0 ? (
         <p>{t('noBookingOrdersWereFound')}</p>
       ) : (
-        <div className="booking-results-wrapper">
+        <div className='booking-results-wrapper'>
           {orders?.map((order, index) => {
             const staffMember = staffMembers?.find(
               (staff) => staff.id === order?.orderMetadata?.createdBy,

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

@@ -55,17 +55,17 @@ export const ResultCard = ({
       className={clsx('result-card', className)}
       onClick={onClick}
       onKeyUp={onClick}
-      role="button"
+      role='button'
       tabIndex={0}
     >
-      <div className="card-content">
-        <div className="order-id">{id}</div>
-        <div className="order-people">
-          <FaUser size={10} className="p-0" />
+      <div className='card-content'>
+        <div className='order-id'>{id}</div>
+        <div className='order-people'>
+          <FaUser size={10} className='p-0' />
           {people}
         </div>
-        <div className="order-description">
-          <p className="name">
+        <div className='order-description'>
+          <p className='name'>
             {user.firstName} {user.lastName}
           </p>
           {user.email && <p>{user.email}</p>}
@@ -88,7 +88,7 @@ export const ResultCard = ({
           <p>
             {t('time')}: {fromIso(startDate).toFormat(TIME_FORMAT)}
           </p>
-          <p className="products" title={productList}>
+          <p className='products' title={productList}>
             {t('products')}: {productList}
           </p>
           {!!remainingToPay && (

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

@@ -111,7 +111,7 @@ export const CouponFormControl = ({
   return (
     <Row>
       <Col md={5}>
-        <h2 className="mb-5">{t('Design:coupon')}</h2>
+        <h2 className='mb-5'>{t('Design:coupon')}</h2>
         <Row>
           <Col md={6}>
             <Form.Group>
@@ -125,7 +125,7 @@ export const CouponFormControl = ({
                 })}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors?.name?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -148,7 +148,7 @@ export const CouponFormControl = ({
                 disabled={isLoading}
               />
 
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors?.code?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -161,7 +161,7 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:discountType')}</Form.Label>
               <Form.Control
                 {...register('discountType', { required: true })}
-                as="select"
+                as='select'
                 defaultValue={getValues('discountType') ?? 1}
                 disabled={isLoading}
               >
@@ -178,7 +178,7 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 isInvalid={errors.discount !== undefined}
                 {...register('discount', {
                   required: t('Validation:fieldRequired', {
@@ -187,7 +187,7 @@ export const CouponFormControl = ({
                 })}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors?.discount?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -200,7 +200,7 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:applyOn')}</Form.Label>
               <Form.Control
                 {...register('totalType', { required: true })}
-                as="select"
+                as='select'
                 defaultValue={getValues('totalType') ?? 1}
                 disabled={isLoading}
               >
@@ -215,13 +215,13 @@ export const CouponFormControl = ({
         </Row>
       </Col>
       <Col md={{ span: 5, offset: 1 }}>
-        <h2 className="mb-5">{t('Design:limitations')}</h2>
+        <h2 className='mb-5'>{t('Design:limitations')}</h2>
         <Row>
           <Col md={6}>
             <Form.Group>
               <Form.Label>{t('Design:startFrom')}</Form.Label>
               <Form.Control
-                type="date"
+                type='date'
                 {...register('startFrom')}
                 value={startFromValue}
                 isInvalid={errors.startFrom !== undefined}
@@ -234,7 +234,7 @@ export const CouponFormControl = ({
                 onClick={() => startFromInput?.current?.showPicker()}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors?.startFrom?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -243,7 +243,7 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:validTill')}</Form.Label>
               <Form.Control
-                type="date"
+                type='date'
                 {...register('validTill')}
                 value={validTillValue}
                 onChange={(e) => {
@@ -260,10 +260,10 @@ export const CouponFormControl = ({
         </Row>
         <Row>
           <Col>
-            <Form.Group className="mb-3">
+            <Form.Group className='mb-3'>
               <Form.Label>{t('Design:productGroups')}</Form.Label>
               <Typeahead
-                name="productGroupIds"
+                name='productGroupIds'
                 options={productGroupList}
                 isMultipleChoise
                 isCouponForm
@@ -315,11 +315,11 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:totalCoupons')}</Form.Label>
               <Form.Control
                 {...register('totalCoupons')}
-                type="number"
+                type='number'
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}
               />
-              <Form.Control.Feedback type="invalid">
+              <Form.Control.Feedback type='invalid'>
                 {errors?.totalCoupons?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -328,7 +328,7 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:usesPerUser')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('usesPerUser')}
                 disabled={isLoading}
               />
@@ -340,11 +340,11 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:useAgain')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('useAgain')}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:useAgainExplanation')}
               </Form.Text>
             </Form.Group>
@@ -353,11 +353,11 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:usesPerUserDay')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('usesPerUserDay')}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:usesPerUserDayExplanation')}
               </Form.Text>
             </Form.Group>
@@ -368,11 +368,11 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:minAmount')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('minAmount')}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:minAmountExplanation')}
               </Form.Text>
             </Form.Group>
@@ -381,11 +381,11 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:maxAmount')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('maxAmount')}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:maxAmountExplanation')}
               </Form.Text>
             </Form.Group>

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

@@ -64,7 +64,7 @@ export const CouponForm = ({
   return (
     <FormProvider {...form}>
       <Form
-        className="coupon-form"
+        className='coupon-form'
         onSubmit={form.handleSubmit(onSubmit)}
         noValidate
       >
@@ -74,8 +74,8 @@ export const CouponForm = ({
         />
         {hasPermission && (
           <Button
-            className="mt-5 d-no dne d-md-block"
-            type="submit"
+            className='mt-5 d-no dne d-md-block'
+            type='submit'
             disabled={isLoading}
           >
             {t('save')}

package/src/sales/filters/SaleFilters.tsx

@@ -44,10 +44,10 @@ export function SaleFilters({ values, onChange }: SaleFiltersProps) {
   ]
 
   return (
-    <div className="sales-filter d-flex">
-      <div className="d-flex sales-filter-items">
+    <div className='sales-filter d-flex'>
+      <div className='d-flex sales-filter-items'>
         {textFilters.map((row: TextFilter[]) => (
-          <div className="sales-rows" key={row[0].label}>
+          <div className='sales-rows' key={row[0].label}>
             {row.map(({ name, type, label }) => (
               <>
                 <TextField

package/src/sales/guest-profile/previous-bookings/PreviousBookings.tsx

@@ -33,10 +33,10 @@ export const PreviousBookings = ({
     : MAX_ORDERS_COUNT
 
   return (
-    <div className="previous-bookings">
-      <h6 className="mb-5">{t('previousBookings')}</h6>
+    <div className='previous-bookings'>
+      <h6 className='mb-5'>{t('previousBookings')}</h6>
       {orders.length > 0 ? (
-        <div className="events-wrapper">
+        <div className='events-wrapper'>
           {orders.slice(0, endSlicedOrdersNumber).map((order) => {
             const eventName = renderOrderTitleLinkByProvider
               ? renderOrderTitleLinkByProvider(order)
@@ -44,17 +44,17 @@ export const PreviousBookings = ({
 
             return (
               <div
-                className="event-info col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"
+                className='event-info col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'
                 key={order.id}
               >
-                <div className="info-wrapper">
-                  <p className="label">{eventName}</p>
+                <div className='info-wrapper'>
+                  <p className='label'>{eventName}</p>
                   {order.createdAt && (
-                    <p className="event-date">{formatDate(order.createdAt)}</p>
+                    <p className='event-date'>{formatDate(order.createdAt)}</p>
                   )}
                 </div>
                 {order.products.length > 0 && (
-                  <div className="products-wrapper">
+                  <div className='products-wrapper'>
                     {order.products.map(({ name, id }) => {
                       const orderProduct = order.orderProducts.find(
                         (product) => product.productId === id,
@@ -63,7 +63,7 @@ export const PreviousBookings = ({
                       const count = orderProduct ? orderProduct.quantity : 1
 
                       return (
-                        <div className="product-name" key={id}>
+                        <div className='product-name' key={id}>
                           <p>+</p>&nbsp;
                           <p>
                             {capitalizeFirstLetter(name)}
@@ -79,13 +79,13 @@ export const PreviousBookings = ({
           })}
         </div>
       ) : (
-        <p className="mt-3">{t('noPreviousBookings')}</p>
+        <p className='mt-3'>{t('noPreviousBookings')}</p>
       )}
       {orders.length > MAX_ORDERS_COUNT && !showOlderBookings && (
         <Button
           onClick={handleShowOrderBookings}
-          variant="link"
-          className="older-bookings-button"
+          variant='link'
+          className='older-bookings-button'
         >
           {t('showOlderBookings')}
         </Button>

package/src/sales/guest-profile/profile/Profile.tsx

@@ -23,11 +23,11 @@ export const Profile = ({ user }: ProfileProps) => {
   } = user
 
   return (
-    <div className="profile">
-      <div className="info-wrapper">
+    <div className='profile'>
+      <div className='info-wrapper'>
         <ImageHolder firstName={firstName} lastName={lastName} />
-        <div className="info">
-          <div className="main">
+        <div className='info'>
+          <div className='main'>
             <h5>
               {firstName}&nbsp;{lastName}
             </h5>
@@ -39,8 +39,8 @@ export const Profile = ({ user }: ProfileProps) => {
           </div>
 
           {gender && (
-            <div className="gender-info">
-              <div className="gender">
+            <div className='gender-info'>
+              <div className='gender'>
                 <Logo
                   logo={
                     gender === USER_GENDER_MALE ? (

package/src/sales/guest-profile/profile/components/ImageHolder/ImageHolder.tsx

@@ -12,5 +12,5 @@ export const ImageHolder = ({ firstName, lastName }: ImageHolderProps) => {
     return null
   }
 
-  return <div className="image-holder mr-3">{wordsArray()}</div>
+  return <div className='image-holder mr-3'>{wordsArray()}</div>
 }