@licklist/design 0.69.1 → 0.69.3-dev.0

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,8 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:discount')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 isInvalid={errors.discount !== undefined}
                 {...register('discount', {
                   required: t('Validation:fieldRequired', {
@@ -187,7 +188,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 +201,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 +216,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 +235,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 +244,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 +261,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 +316,12 @@ export const CouponFormControl = ({
               <Form.Label>{t('Design:totalCoupons')}</Form.Label>
               <Form.Control
                 {...register('totalCoupons')}
-                type="number"
+                type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 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,8 +330,9 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:usesPerUser')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('usesPerUser')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
             </Form.Group>
@@ -340,11 +343,12 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:useAgain')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('useAgain')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:useAgainExplanation')}
               </Form.Text>
             </Form.Group>
@@ -353,11 +357,12 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:usesPerUserDay')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('usesPerUserDay')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:usesPerUserDayExplanation')}
               </Form.Text>
             </Form.Group>
@@ -368,11 +373,12 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:minAmount')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('minAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={isLoading}
               />
-              <Form.Text className="text-muted">
+              <Form.Text className='text-muted'>
                 {t('Design:minAmountExplanation')}
               </Form.Text>
             </Form.Group>
@@ -381,11 +387,12 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t('Design:maxAmount')}</Form.Label>
               <Form.Control
-                type="number"
+                type='number'
                 {...register('maxAmount')}
+                onWheel={(event) => event.currentTarget.blur()}
                 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>
 }

package/src/sales/guest-profile/user-metrics/UserMetrics.tsx

@@ -23,15 +23,15 @@ export const UserMetrics = ({ user, metrics }: UserMetricsProps) => {
   }
 
   return (
-    <div className="user-metrics">
-      <h6 className="mb-5">{t('userMetrics')}</h6>
-      <div className="metrics-wrapper">
-        <div className="metrics-row">
-          <div className="metrics-column">
-            <div className="top">
-              <div className="metrics-info">
-                <p className="label">{t('avgSpendPerBooking')}</p>
-                <div className="mt-2">
+    <div className='user-metrics'>
+      <h6 className='mb-5'>{t('userMetrics')}</h6>
+      <div className='metrics-wrapper'>
+        <div className='metrics-row'>
+          <div className='metrics-column'>
+            <div className='top'>
+              <div className='metrics-info'>
+                <p className='label'>{t('avgSpendPerBooking')}</p>
+                <div className='mt-2'>
                   {formatNumber(metrics.averageSpentPerNight, {
                     style: 'currency',
                     currency: 'GBP',
@@ -39,9 +39,9 @@ export const UserMetrics = ({ user, metrics }: UserMetricsProps) => {
                 </div>
               </div>
 
-              <div className="metrics-info">
-                <p className="label">{t('totalSpend')}</p>
-                <div className="mt-2">
+              <div className='metrics-info'>
+                <p className='label'>{t('totalSpend')}</p>
+                <div className='mt-2'>
                   {formatNumber(metrics.totalSpent, {
                     style: 'currency',
                     currency: 'GBP',
@@ -50,10 +50,10 @@ export const UserMetrics = ({ user, metrics }: UserMetricsProps) => {
               </div>
             </div>
 
-            <div className="bottom">
-              <div className="metrics-info">
-                <p className="label">{t('contactDetails')}</p>
-                <div className="mt-2">
+            <div className='bottom'>
+              <div className='metrics-info'>
+                <p className='label'>{t('contactDetails')}</p>
+                <div className='mt-2'>
                   <a href={`mailto:${user?.email}`}>{user?.email}</a>
                   {user?.userDetail?.phone && (
                     <>
@@ -68,35 +68,35 @@ export const UserMetrics = ({ user, metrics }: UserMetricsProps) => {
             </div>
           </div>
 
-          <div className="metrics-column">
-            <div className="top">
-              <div className="metrics-info">
-                <p className="label">{t('avgVisitsPerMonth')}</p>
-                <div className="mt-2">{metrics.averageVisitsPerMonth}</div>
+          <div className='metrics-column'>
+            <div className='top'>
+              <div className='metrics-info'>
+                <p className='label'>{t('avgVisitsPerMonth')}</p>
+                <div className='mt-2'>{metrics.averageVisitsPerMonth}</div>
               </div>
             </div>
 
             {metrics?.age && (
-              <div className="bottom">
-                <div className="metrics-info">
-                  <p className="label">{t('age')}</p>
-                  <div className="mt-2">{metrics?.age}</div>
+              <div className='bottom'>
+                <div className='metrics-info'>
+                  <p className='label'>{t('age')}</p>
+                  <div className='mt-2'>{metrics?.age}</div>
                 </div>
               </div>
             )}
           </div>
 
-          <div className="metrics-column">
-            <div className="top">
-              <div className="metrics-info">
-                <p className="label">{t('noOfVisits')}</p>
-                <div className="mt-2">{metrics.visitNumber}</div>
+          <div className='metrics-column'>
+            <div className='top'>
+              <div className='metrics-info'>
+                <p className='label'>{t('noOfVisits')}</p>
+                <div className='mt-2'>{metrics.visitNumber}</div>
               </div>
             </div>
-            <div className="bottom">
-              <div className="metrics-info">
-                <p className="label">{t('registered')}</p>
-                <div className="mt-2">{formatDate(metrics.registered)}</div>
+            <div className='bottom'>
+              <div className='metrics-info'>
+                <p className='label'>{t('registered')}</p>
+                <div className='mt-2'>{formatDate(metrics.registered)}</div>
               </div>
             </div>
           </div>

package/src/sales/guest-profile/visited-providers/VisitedProviders.tsx

@@ -15,26 +15,26 @@ export const VisitedProviders = ({ providers = [] }: VisitedProvidersProps) => {
     /^(http(s?):\/\/)/.test(website) ? website : `//${website}`
 
   return (
-    <div className="visited-providers">
-      <h6 className="mb-5">{t('visitedProviders')}</h6>
-      <div className="visited-providers-wrapper">
+    <div className='visited-providers'>
+      <h6 className='mb-5'>{t('visitedProviders')}</h6>
+      <div className='visited-providers-wrapper'>
         {providers.length > 0 ? (
           providers.map(({ id, name, images, website }) => {
             const imageSrc = MediaService.getImageSrc(images)
 
             return (
-              <div key={id} className="provider">
-                <div className="image-wrapper">
+              <div key={id} className='provider'>
+                <div className='image-wrapper'>
                   {imageSrc && <img src={imageSrc} alt={name} />}
                 </div>
-                <div className="content-wrapper">
+                <div className='content-wrapper'>
                   <p>{name}</p>
                   {website && (
                     <a
                       href={correctWebsiteUrl(website)}
-                      className="website"
-                      target="_blank"
-                      rel="noreferrer"
+                      className='website'
+                      target='_blank'
+                      rel='noreferrer'
                     >
                       <Logo logo={<VisitedProviderImg />} />
                     </a>
@@ -44,7 +44,7 @@ export const VisitedProviders = ({ providers = [] }: VisitedProvidersProps) => {
             )
           })
         ) : (
-          <p className="mt-3">{t('noVisitedProviders')}</p>
+          <p className='mt-3'>{t('noVisitedProviders')}</p>
         )}
       </div>
     </div>

package/src/sales/life-time-sales/LifeTimeSalesChart.tsx

@@ -67,11 +67,11 @@ function LifeTimeSalesChart({
   )
 
   return (
-    <div className="life-time-sales">
-      <Form.Group className="m-0 life-time-sales__header">
+    <div className='life-time-sales'>
+      <Form.Group className='m-0 life-time-sales__header'>
         <Form.Control
-          defaultValue=""
-          as="select"
+          defaultValue=''
+          as='select'
           value={period}
           onChange={onChange}
         >
@@ -83,13 +83,13 @@ function LifeTimeSalesChart({
         </Form.Control>
       </Form.Group>
       {!isLoading && (
-        <div className="life-time-sales__value">
+        <div className='life-time-sales__value'>
           {formatNumber(amount, { style: 'currency', currency: 'GBP' })}
         </div>
       )}
-      <ResponsiveContainer width="100%" height="100%">
+      <ResponsiveContainer width='100%' height='100%'>
         {isLoading ? (
-          <div className="loader">
+          <div className='loader'>
             <BlockLoader />
           </div>
         ) : (
@@ -102,7 +102,7 @@ function LifeTimeSalesChart({
             }}
             data={data}
           >
-            <Bar radius={[5, 5, 5, 5]} dataKey="value" barSize={16} />
+            <Bar radius={[5, 5, 5, 5]} dataKey='value' barSize={16} />
           </BarChart>
         )}
       </ResponsiveContainer>

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<any> = (args) => {
 
   return (
     <div
-      role="button"
+      role='button'
       tabIndex={0}
       onClick={onPriceClick}
       onKeyDown={onPriceClick}

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -84,7 +84,7 @@ export const NumberInputHorizontal = forwardRef<
     return (
       <div className={inputWrapperClasses}>
         <button
-          type="button"
+          type='button'
           onClick={handleArrowDownClick}
           className={[
             'licklist-number-input-horizontal__btn-minus',
@@ -100,7 +100,7 @@ export const NumberInputHorizontal = forwardRef<
             disabled && hasBigSize && 'w-100',
           ].join(' ')}
         >
-          {hasCurrency && <div className="currency">£</div>}
+          {hasCurrency && <div className='currency'>£</div>}
 
           <FormControl
             ref={ref}
@@ -119,7 +119,7 @@ export const NumberInputHorizontal = forwardRef<
           />
         </div>
         <button
-          type="button"
+          type='button'
           onClick={handleArrowUpClick}
           className={[
             'licklist-number-input-horizontal__btn-plus',

package/src/sales/manual-booking/search-user/SearchUser.tsx

@@ -72,7 +72,7 @@ export const SearchUser = ({
   const renderItem = useCallback(
     (item: User, search: string) => (
       <div key={item.id}>
-        <p className="mb-1">
+        <p className='mb-1'>
           <Highlighter search={search}>{item.firstName}</Highlighter>&nbsp;
           <Highlighter search={search}>{item.lastName}</Highlighter>
         </p>
@@ -89,7 +89,7 @@ export const SearchUser = ({
     <div
       onClick={() => onNoMatchesLabelClick(isSearchName)}
       onKeyPress={() => onNoMatchesLabelClick(isSearchName)}
-      role="button"
+      role='button'
       tabIndex={0}
     >
       {t('Sale:addNewCustomer')}
@@ -98,12 +98,12 @@ export const SearchUser = ({
 
   return (
     <>
-      <div className="input-label margin-bottom-2-rem">
+      <div className='input-label margin-bottom-2-rem'>
         {t('Design:search')}
       </div>
-      <div className="search-container">
-        <div className=" search-input-container">
-          <div className="input-label">{t('Sale:byName')}</div>
+      <div className='search-container'>
+        <div className='search-input-container'>
+          <div className='input-label'>{t('Sale:byName')}</div>
           <Controller
             control={control}
             name={`search_name` as const}
@@ -129,8 +129,8 @@ export const SearchUser = ({
             rules={{ pattern: lettersRule }}
           />
         </div>
-        <div className="search-input-container">
-          <div className="input-label">{t('Sale:byEmail')}</div>
+        <div className='search-input-container'>
+          <div className='input-label'>{t('Sale:byEmail')}</div>
 
           <Controller
             control={control}

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.tsx

@@ -46,32 +46,32 @@ export const SelectDateTypeControl = ({
   )
 
   return (
-    <div className="mt-4 d-flex justify-content-between">
+    <div className='mt-4 d-flex justify-content-between'>
       <Form.Group controlId={dateId}>
-        <Form.Label className="bold-text">{t('Sale:Date')}</Form.Label>
+        <Form.Label className='bold-text'>{t('Sale:Date')}</Form.Label>
         <Form.Control
-          type="date"
+          type='date'
           value={orderDate}
           onChange={changeFromDate}
           min={DateTime.now().toFormat(DATE_FORMAT)}
-          className="date-input-with-value date-input-manual-booking"
+          className='date-input-with-value date-input-manual-booking'
           onClick={() => orderDateInput?.current?.showPicker()}
           ref={orderDateInput}
         />
       </Form.Group>
       {showTypeSelect && (
-        <Form.Group controlId={orderableTypeId} className="ml-4">
-          <Form.Label className="bold-text">
+        <Form.Group controlId={orderableTypeId} className='ml-4'>
+          <Form.Label className='bold-text'>
             {t('Design:orderableType')}
           </Form.Label>
           <Form.Control
             value={orderableType}
             onChange={onChangeOrderableType}
-            as="select"
+            as='select'
           >
-            <option value="">{t('Design:pleaseChooseOne')}</option>
-            <option value="event">{t('Design:event')}</option>
-            <option value="menu">{t('Design:productSet')}</option>
+            <option value=''>{t('Design:pleaseChooseOne')}</option>
+            <option value='event'>{t('Design:event')}</option>
+            <option value='menu'>{t('Design:productSet')}</option>
           </Form.Control>
         </Form.Group>
       )}