@licklist/design 0.68.6-dev.1 → 0.68.6

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>

package/src/sales/modals/payment-modal/PaymentModal.tsx

@@ -48,16 +48,16 @@ export const PaymentModal = ({
 
   return (
     <Modal
-      size='lg'
+      size="lg"
       centered
       show={isVisible}
       onHide={onHide}
-      className='p-3 border-0'
+      className="p-3 border-0"
       animation={false}
-      contentClassName='rounded'
+      contentClassName="rounded"
     >
-      <ModalHeader className='align-items-center border-0'>
-        <ModalTitle as='h5'>
+      <ModalHeader className="align-items-center border-0">
+        <ModalTitle as="h5">
           {t('Design:newPayment')}
           {!!remainingToPay && (
             <>
@@ -72,7 +72,7 @@ export const PaymentModal = ({
           )}
         </ModalTitle>
 
-        <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
+        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
           <FaTimes size={20} />
         </Button>
       </ModalHeader>
@@ -85,13 +85,13 @@ export const PaymentModal = ({
           showAmountField
         />
       </Modal.Body>
-      <Modal.Footer className='border-0'>
-        <Button variant='secondary' onClick={onHide} disabled={isLoading}>
+      <Modal.Footer className="border-0">
+        <Button variant="secondary" onClick={onHide} disabled={isLoading}>
           {t('cancel')}
         </Button>
         <Button
-          variant='primary'
-          type='button'
+          variant="primary"
+          type="button"
           disabled={isLoading || isSubmitDisabled}
           onClick={onModalSubmit}
         >

package/src/sales/modals/refund-modal/RefundModal.stories.tsx

@@ -27,7 +27,7 @@ export const Default: Story<RefundModalProps> = () => {
         isVisible={isVisible}
         onSubmit={onSubmit}
         onHide={() => setIsVisible(false)}
-        paymentType='cash'
+        paymentType="cash"
         isFullRefund={isFullRefund}
         isLoading={isLoading}
         defaultValue={defaultValue}

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -54,21 +54,21 @@ export const RefundModal = ({
 
   return (
     <Modal
-      size='lg'
+      size="lg"
       centered
       show={isVisible}
       onHide={onHide}
-      className='p-3 border-0'
+      className="p-3 border-0"
       animation={false}
-      contentClassName='rounded'
+      contentClassName="rounded"
     >
       <Form onSubmit={handleSubmit(onModalSubmit)}>
-        <ModalHeader className='align-items-center border-0'>
-          <ModalTitle as='h5'>
+        <ModalHeader className="align-items-center border-0">
+          <ModalTitle as="h5">
             {t(isFullRefund ? 'Design:fullRefund' : 'Design:partialRefund')}
           </ModalTitle>
 
-          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
+          <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
             <FaTimes size={20} />
           </Button>
         </ModalHeader>
@@ -79,7 +79,7 @@ export const RefundModal = ({
               <FormGroup>
                 <Form.Label>{t('Design:paymentType')}</Form.Label>
                 <Form.Control
-                  type='text'
+                  type="text"
                   placeholder={t('Design:paymentType')}
                   value={String(
                     t(
@@ -114,18 +114,18 @@ export const RefundModal = ({
                   isInvalid={!!errors.amount}
                   min={0}
                 />
-                <Form.Control.Feedback type='invalid'>
+                <Form.Control.Feedback type="invalid">
                   {errors.amount?.message}
                 </Form.Control.Feedback>
               </FormGroup>
             </Col>
           </Row>
         </Modal.Body>
-        <Modal.Footer className='border-0'>
-          <Button variant='secondary' onClick={onHide} disabled={isLoading}>
+        <Modal.Footer className="border-0">
+          <Button variant="secondary" onClick={onHide} disabled={isLoading}>
             {t('cancel')}
           </Button>
-          <Button variant='primary' type='submit' disabled={isLoading}>
+          <Button variant="primary" type="submit" disabled={isLoading}>
             {t('confirm')}
           </Button>
         </Modal.Footer>