@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -98,12 +98,12 @@ export const ReportRunnerModal = ({
     <Modal
       show={show}
       onHide={onClose}
-      className="report-runner-modal"
+      className='report-runner-modal'
       centered
     >
       <header>
         <h5>{t('generateReport')}</h5>
-        <Button variant="" data-testid="cancel-button" onClick={onClose}>
+        <Button variant='' data-testid='cancel-button' onClick={onClose}>
           {t('cancel')}
         </Button>
       </header>
@@ -112,9 +112,9 @@ export const ReportRunnerModal = ({
 
       {!isLoading && (
         <div>
-          <div className="report-type-label">{capitalize(report?.type)}</div>
+          <div className='report-type-label'>{capitalize(report?.type)}</div>
           <div>{report?.name}</div>
-          <div className="data-fields">
+          <div className='data-fields'>
             {report?.reportFieldValues.map((fieldValue) => {
               const field = reportFields?.find(
                 (field) => field.id === fieldValue.reportFieldId,
@@ -125,10 +125,10 @@ export const ReportRunnerModal = ({
           </div>
 
           <Button
-            className="edit-button"
-            type="button"
-            variant=""
-            data-testid="edit-button"
+            className='edit-button'
+            type='button'
+            variant=''
+            data-testid='edit-button'
             onClick={onEdit}
           >
             {t('Design:edit')}
@@ -140,13 +140,13 @@ export const ReportRunnerModal = ({
                 errors.periodBy?.message && 'border-danger border rounded'
               }`}
             >
-              <div className="period-by">
+              <div className='period-by'>
                 {PERIOD_BY_TYPES.map((type) => (
                   <div key={type}>
                     <Form.Check
                       inline
                       label={t(labelByPeriodType[type])}
-                      type="radio"
+                      type='radio'
                       id={type}
                       required
                       value={type}
@@ -160,18 +160,18 @@ export const ReportRunnerModal = ({
                 ))}
               </div>
               {errors.periodBy?.message && (
-                <div className="iframe-event__message-error justify-content-start mb-1">
+                <div className='iframe-event__message-error justify-content-start mb-1'>
                   {errors.periodBy?.message}
                 </div>
               )}
             </div>
 
-            <div className="controls mt-4">
-              <Form.Group controlId="from-input">
+            <div className='controls mt-4'>
+              <Form.Group controlId='from-input'>
                 <Form.Label>{t('Design:from')}</Form.Label>
                 <Form.Control
-                  type="datetime-local"
-                  data-testid="date-from-input"
+                  type='datetime-local'
+                  data-testid='date-from-input'
                   isInvalid={!!errors.dateFrom}
                   {...register('dateFrom', {
                     required: {
@@ -182,16 +182,16 @@ export const ReportRunnerModal = ({
                     },
                   })}
                 />
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors.dateFrom?.message}
                 </Form.Control.Feedback>
               </Form.Group>
 
-              <Form.Group controlId="to-input">
+              <Form.Group controlId='to-input'>
                 <Form.Label>{t('Design:to')}</Form.Label>
                 <Form.Control
-                  type="datetime-local"
-                  data-testid="date-to-input"
+                  type='datetime-local'
+                  data-testid='date-to-input'
                   isInvalid={!!errors.dateTo}
                   {...register('dateTo', {
                     required: `${t('Validation:fieldRequired', {
@@ -204,18 +204,18 @@ export const ReportRunnerModal = ({
                     },
                   })}
                 />
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors.dateTo?.message}
                 </Form.Control.Feedback>
               </Form.Group>
             </div>
 
-            <div className="controls">
-              <Button data-testid="download-button" onClick={onDownload}>
+            <div className='controls'>
+              <Button data-testid='download-button' onClick={onDownload}>
                 {t('generateDownload')}
               </Button>
 
-              <Button data-testid="view-button" onClick={onViewOnline}>
+              <Button data-testid='view-button' onClick={onViewOnline}>
                 {t('generateView')}
               </Button>
             </div>

package/src/report/ReportTypeSelect/ReportTypeSelect.tsx

@@ -16,13 +16,13 @@ export const ReportTypeSelect = () => {
 
   return (
     <Row>
-      <Col lg={6} className="mt-4">
-        <Form.Group controlId="typeSelect">
+      <Col lg={6} className='mt-4'>
+        <Form.Group controlId='typeSelect'>
           <Form.Label>{t('reportType')}</Form.Label>
 
           <Form.Control
-            as="select"
-            data-testid="report-type-select"
+            as='select'
+            data-testid='report-type-select'
             isInvalid={!!errors.type}
             {...register('type', {
               required: {
@@ -44,21 +44,21 @@ export const ReportTypeSelect = () => {
             ))}
           </Form.Control>
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.type?.message}
           </Form.Control.Feedback>
 
           <OverlayTrigger
-            trigger="hover"
+            trigger='hover'
             overlay={
-              <Popover id="report-type-popover">
-                <Popover.Content className="reports-popover">
+              <Popover id='report-type-popover'>
+                <Popover.Content className='reports-popover'>
                   {t('reportTypeSelectInfo')}
                 </Popover.Content>
               </Popover>
             }
           >
-            <InfoIcon className="info-icon" />
+            <InfoIcon className='info-icon' />
           </OverlayTrigger>
         </Form.Group>
       </Col>

package/src/report/card/ReportCard.tsx

@@ -17,13 +17,13 @@ export function ReportCard({
 
   return (
     <div
-      role="button"
+      role='button'
       tabIndex={0}
       className={reportCardClasses}
       onClick={hasPermission && onPress}
     >
-      <div className="report-card-link text-center">
-        <div className="d-flex justift-content-center flex-column">
+      <div className='report-card-link text-center'>
+        <div className='d-flex justift-content-center flex-column'>
           <h6>{name}</h6>
         </div>
       </div>

package/src/report/form/ReportForm.tsx

@@ -34,7 +34,7 @@ export function ReportForm({
     <Form onSubmit={handleSubmit(onSubmit)} noValidate>
       <Row>
         <Form.Group
-          controlId="date_from"
+          controlId='date_from'
           as={Col}
           xs
           sm={12}
@@ -45,7 +45,7 @@ export function ReportForm({
           <Form.Label>{t('Design:from')}</Form.Label>
           <Form.Control
             required
-            type="date"
+            type='date'
             {...register('date_from', {
               required: t('Validation:fieldRequired', {
                 attribute: t('from'),
@@ -57,12 +57,12 @@ export function ReportForm({
             isInvalid={Boolean(errors.date_from)}
             placeholder={t('Design:from')}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.date_from?.message}
           </Form.Control.Feedback>
         </Form.Group>
         <Form.Group
-          controlId="date_to"
+          controlId='date_to'
           as={Col}
           xs
           sm={12}
@@ -73,7 +73,7 @@ export function ReportForm({
           <Form.Label>{t('Design:to')}</Form.Label>
           <Form.Control
             required
-            type="date"
+            type='date'
             {...register('date_to', {
               required: t('Validation:fieldRequired', {
                 attribute: t('to'),
@@ -85,17 +85,17 @@ export function ReportForm({
             isInvalid={Boolean(errors.date_to)}
             placeholder={t('Design:to')}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.date_to?.message}
           </Form.Control.Feedback>
         </Form.Group>
       </Row>
       {hasPermission && (
-        <Modal.Footer className="border-0 p-0">
-          <Button onClick={onHide} variant="danger">
+        <Modal.Footer className='border-0 p-0'>
+          <Button onClick={onHide} variant='danger'>
             {t('Design:cancel')}
           </Button>
-          <Button type="submit">{t('Design:download')}</Button>
+          <Button type='submit'>{t('Design:download')}</Button>
         </Modal.Footer>
       )}
     </Form>

package/src/resource/form/ResourceForm.tsx

@@ -52,7 +52,7 @@ export const ResourceForm = ({
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onSubmit)}>
         <Row>
-          <Col md={6} sm={12} className="pr-5">
+          <Col md={6} sm={12} className='pr-5'>
             <NameControl isLoading={isLoading} />
             <hr />
             <ZoneControl isLoading={isLoading} zones={zones} />
@@ -70,13 +70,13 @@ export const ResourceForm = ({
         <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}
           >
             <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 || !formValues.name}
             >
               {t('saveAndClose')}

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

@@ -22,16 +22,17 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
     <Form.Group controlId={capacityId}>
       <Form.Label>{t('Design:capacity')}*</Form.Label>
       <Form.Control
-        type="number"
+        type='number'
         {...register('capacity', {
           required: true,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}
       />
-      <Form.Control.Feedback type="invalid">
+      <Form.Control.Feedback type='invalid'>
         {HookFormService.hasError(errors.capacity, 'required') &&
           t('Validation:fieldRequired', {
             attribute: t('Design:capacity'),

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,16 +22,17 @@ 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,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         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

@@ -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,
@@ -55,17 +53,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 +86,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 && (