@licklist/design 0.68.7-dev.0 → 0.68.7

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>
       )}

package/src/sales/manual-booking/select-event/SelectEvent.tsx

@@ -23,24 +23,24 @@ export const SelectEvent = ({
   return (
     <div>
       {isLoading ? (
-        <div className='loader-container'>
+        <div className="loader-container">
           <BlockLoader />
         </div>
       ) : (
         <>
           {(!events || !events.length) && !isLoading ? (
-            <div className='no-results-content'>
-              <span className='no-results-found'>
+            <div className="no-results-content">
+              <span className="no-results-found">
                 {t('App:noResultsFoundForSelectedDate')}
               </span>
             </div>
           ) : (
             <>
               {!isLoading && (
-                <Form.Label className='bold-text'>{t('App:events')}</Form.Label>
+                <Form.Label className="bold-text">{t('App:events')}</Form.Label>
               )}
 
-              <div className='event-list-manual-booking'>
+              <div className="event-list-manual-booking">
                 {events?.map((event) => (
                   <EventCardManualBooking
                     key={`${event.id}-${event.createdAt}`}
@@ -78,26 +78,26 @@ export const EventCardManualBooking = ({
 
   return (
     <div
-      role='button'
+      role="button"
       tabIndex={0}
-      className='event-card-manual-booking'
+      className="event-card-manual-booking"
       aria-disabled={isSoldOut}
       onClick={!isSoldOut ? onClick : undefined}
       onKeyUp={!isSoldOut ? onClick : undefined}
     >
-      <div className='card-image-container'>
+      <div className="card-image-container">
         <Card.Img
-          variant='top'
+          variant="top"
           src={coverImageUrl}
           className={[
             'card-img-manual-booking',
             isSoldOut ? 'disable-img' : '',
           ].join(' ')}
         />
-        {isSoldOut && <div className='sold-out'>{t('soldOut')}</div>}
+        {isSoldOut && <div className="sold-out">{t('soldOut')}</div>}
       </div>
-      <div className='event-card-title'>{title}</div>
-      <div className='event-card-days'>
+      <div className="event-card-title">{title}</div>
+      <div className="event-card-days">
         {rrule
           ? formatToDays(
               rrulestr(
@@ -106,7 +106,7 @@ export const EventCardManualBooking = ({
             )
           : formatToDays([fromIso(startAt)?.day])}
       </div>
-      <div className='event-card-hours'>{formatToHours(startAt, endAt)}</div>
+      <div className="event-card-hours">{formatToHours(startAt, endAt)}</div>
     </div>
   )
 }

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -22,7 +22,7 @@ export const SelectMenu = ({
   if (isLoading) {
     return (
       <div>
-        <div className='loader-container'>
+        <div className="loader-container">
           <BlockLoader />
         </div>
       </div>
@@ -32,20 +32,20 @@ export const SelectMenu = ({
   return (
     <div>
       {(!menus || !menus.length) && !isLoading ? (
-        <div className='no-results-content'>
-          <span className='no-results-found'>
+        <div className="no-results-content">
+          <span className="no-results-found">
             {noMenusMessage ?? t('App:noResultsFoundForSelectedDate')}
           </span>
         </div>
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className='bold-text'>
+            <Form.Label className="bold-text">
               {t('Design:productSets')}
             </Form.Label>
           )}
 
-          <div className='menu-list-manual-booking'>
+          <div className="menu-list-manual-booking">
             {menus?.map((menu) => (
               <MenuButton
                 key={menu.id}

package/src/sales/manual-booking/select-menu/components/MenuButton.tsx

@@ -16,10 +16,10 @@ export const MenuButton = ({ menu, onSelectMenu }: MenuButtonProps) => {
 
   return (
     <div
-      role='button'
+      role="button"
       onClick={onClick}
       onKeyPress={onClick}
-      className='menu-button-manual-booking'
+      className="menu-button-manual-booking"
       tabIndex={0}
     >
       {menu.name}

package/src/sales/manual-booking/summary/ManualBookingSummary.tsx

@@ -52,12 +52,12 @@ export const ManualBookingSummary = ({
           : 'manual-booking-summary'
       }
     >
-      <div className='receipt-title'>{t('Sale:receipt')}</div>
-      <div className='event-name border-summary-item'>{eventName}</div>
-      <div className='border-summary-item'>{date}</div>
-      <div className='border-summary-item'>{time}</div>
+      <div className="receipt-title">{t('Sale:receipt')}</div>
+      <div className="event-name border-summary-item">{eventName}</div>
+      <div className="border-summary-item">{date}</div>
+      <div className="border-summary-item">{time}</div>
       {orders.length > 0 ? (
-        <div className='summary-item-container'>
+        <div className="summary-item-container">
           {orders.map((order: ManualBookingOrder) => {
             const relyOnPeopleMultiplier = getRelyOnPeopleMultiplier({
               relyOnPeopleType,
@@ -67,7 +67,7 @@ export const ManualBookingSummary = ({
             return (
               <div
                 key={order.id}
-                className='d-flex justify-content-between border-summary-item'
+                className="d-flex justify-content-between border-summary-item"
               >
                 <div>{order.name}</div>
                 {showRelyOnPeople && !!relyOnPeopleMultiplier && (
@@ -87,9 +87,9 @@ export const ManualBookingSummary = ({
             )
           })}
           <div>
-            <div className='total-container'>
+            <div className="total-container">
               <div>{t('Sale:total')}</div>
-              <div className='total-amount'>
+              <div className="total-amount">
                 {formatNumber(ordersSum, {
                   style: 'currency',
                   currency: Config.Currency.GBP,
@@ -105,7 +105,7 @@ export const ManualBookingSummary = ({
                 ) : (
                   <>
                     <div>{t('Sale:includingOperationalCost')}</div>
-                    <div className='total-amount'>
+                    <div className="total-amount">
                       {formatNumber(orderSumIncludingFee, {
                         style: 'currency',
                         currency: Config.Currency.GBP,
@@ -118,8 +118,8 @@ export const ManualBookingSummary = ({
           </div>
         </div>
       ) : (
-        <div className='cart-items'>
-          <p className='empty-cart'>{t('Design:emptyBasket')}</p>
+        <div className="cart-items">
+          <p className="empty-cart">{t('Design:emptyBasket')}</p>
         </div>
       )}
     </div>