@licklist/design 0.69.1 → 0.69.3-dev.0

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>

package/src/sales/notes/NotesTable.tsx

@@ -46,14 +46,14 @@ export const NotesTable = ({
   }
 
   return (
-    <div className="notes pb-4 pt-4">
-      <div className="d-flex mb-3 align-items-center justify-content-between">
+    <div className='notes pb-4 pt-4'>
+      <div className='d-flex mb-3 align-items-center justify-content-between'>
         <h2>{heading}</h2>
         {!isFormView && <AddNoteButton onClick={() => setIsFormView(true)} />}
       </div>
 
       {!isFormView && (
-        <Table bordered size="sm">
+        <Table bordered size='sm'>
           <thead>
             <tr>
               <th>{t('notes')}</th>
@@ -101,8 +101,8 @@ const AddNoteButton = ({ onClick }: { onClick: () => void }) => {
   const { t } = useTranslation('Design')
 
   return (
-    <Button onClick={onClick} className="show-form-button">
-      {t('addNew')} <FaPlusCircle size={16} className="ml-2" />
+    <Button onClick={onClick} className='show-form-button'>
+      {t('addNew')} <FaPlusCircle size={16} className='ml-2' />
     </Button>
   )
 }

package/src/sales/notes/NotesTableRow.tsx

@@ -34,19 +34,19 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
 
   return (
     <tr onClick={onClick}>
-      <td className="note-content">{note.note}</td>
-      <td className="note-author">
+      <td className='note-content'>{note.note}</td>
+      <td className='note-author'>
         {capitalize(note.user.firstName)} {capitalize(note.user.lastName)}
       </td>
-      <td className="text-nowrap">{date}</td>
+      <td className='text-nowrap'>{date}</td>
       <td>
-        <div className="controls">
-          <span className="btn btn-sm eye">
+        <div className='controls'>
+          <span className='btn btn-sm eye'>
             <FaEye size={20} />
           </span>
           <OverlayTrigger
-            trigger="click"
-            placement="bottom"
+            trigger='click'
+            placement='bottom'
             rootClose
             overlay={
               <Popover
@@ -58,10 +58,10 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
               >
                 <Popover.Content
                   as={ListGroup}
-                  className="product-set-card-menu"
-                  variant="flush"
+                  className='product-set-card-menu'
+                  variant='flush'
                 >
-                  <ListGroup.Item action className="text-danger" as="div">
+                  <ListGroup.Item action className='text-danger' as='div'>
                     <ConfirmModal>
                       {(confirm) => (
                         <MenuButton
@@ -71,7 +71,7 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
                           }}
                           name={t('remove')}
                           icon={<FaTrashAlt size={12} />}
-                          className="product-set-card-menu-item-text d-flex w-100 align-items-center"
+                          className='product-set-card-menu-item-text d-flex w-100 align-items-center'
                           rightIcon
                         />
                       )}
@@ -82,8 +82,8 @@ export const TableRow = ({ note, onClick, onDeleteNote }: TableRowProps) => {
             }
           >
             <button
-              type="button"
-              className="product-set-card-menu-button"
+              type='button'
+              className='product-set-card-menu-button'
               onClick={(e) => {
                 e.stopPropagation()
                 setIsOverlayVisible(true)

package/src/sales/notes/note-form/NoteForm.tsx

@@ -31,15 +31,15 @@ export const NoteForm = ({
 
   return (
     <form
-      className="mt-1 notes-form"
+      className='mt-1 notes-form'
       onSubmit={handleSubmit(({ note }) => onSubmit(note))}
     >
-      <Form.Group controlId="exampleForm.ControlTextarea1">
+      <Form.Group controlId='exampleForm.ControlTextarea1'>
         <Form.Label>
           {t(defaultValues.note ? 'editNote' : 'addANote')}
         </Form.Label>
         <Form.Control
-          as="textarea"
+          as='textarea'
           rows={5}
           isInvalid={!!errors.note}
           placeholder={t('writeYourNoteHere')}
@@ -50,24 +50,24 @@ export const NoteForm = ({
             },
           })}
         />
-        <Form.Control.Feedback type="invalid">
+        <Form.Control.Feedback type='invalid'>
           {errors.note?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
-      <footer className="d-flex">
-        <Button type="submit">{t('save')}</Button>
+      <footer className='d-flex'>
+        <Button type='submit'>{t('save')}</Button>
         <Button
-          type="submit"
-          variant="outline-secondary"
-          className="ml-auto"
+          type='submit'
+          variant='outline-secondary'
+          className='ml-auto'
           onClick={onClose}
         >
           {t('close')}
         </Button>
         <Button
-          variant="danger"
-          className="ml-2"
+          variant='danger'
+          className='ml-2'
           onClick={() => setValue('note', '')}
         >
           {t('delete')}

package/src/sales/payment-form/SalePaymentForm.tsx

@@ -124,8 +124,8 @@ export const SalePaymentForm = forwardRef<
             <Form.Group>
               <Form.Label>{t('paymentType')}</Form.Label>
               <Form.Control
-                className="payment-type"
-                as="select"
+                className='payment-type'
+                as='select'
                 {...register('orderPaymentType')}
                 isInvalid={!!errors?.orderPaymentType}
               >
@@ -159,7 +159,7 @@ export const SalePaymentForm = forwardRef<
                 )}
               </Form.Control>
               {orderPaymentTypeError && (
-                <div className="error-message">{orderPaymentTypeError}</div>
+                <div className='error-message'>{orderPaymentTypeError}</div>
               )}
             </Form.Group>
           </Col>
@@ -198,7 +198,7 @@ export const SalePaymentForm = forwardRef<
               <Form.Group>
                 <Form.Label>{t('Design:expirationDate')}</Form.Label>
                 <Form.Control
-                  type="datetime-local"
+                  type='datetime-local'
                   placeholder={t('Design:date')}
                   value={currentFormValues.paymentLinkExpireDate}
                   {...register('paymentLinkExpireDate', {
@@ -228,7 +228,7 @@ export const SalePaymentForm = forwardRef<
                     DateTime.now().minus({ minutes: 1 }),
                   )}
                 />
-                <Form.Control.Feedback type="invalid">
+                <Form.Control.Feedback type='invalid'>
                   {errors?.paymentLinkExpireDate?.message}
                 </Form.Control.Feedback>
               </Form.Group>

package/src/sales/payment-form/components/RyftPayment/RyftPayment.tsx

@@ -20,31 +20,31 @@ export const RyftPayment = ({
   return (
     <>
       {!isLoading && !isError && !ryftInitFailure && (
-        <div className="input-label margin-top-2-rem mb-3">
+        <div className='input-label margin-top-2-rem mb-3'>
           {t('Design:paymentDetails')}
         </div>
       )}
       {isLoading && (
-        <div className="mt-5 pt-5">
+        <div className='mt-5 pt-5'>
           <BlockLoader />
         </div>
       )}
       {isError && (
-        <div className="mt-5 ryft-init-failure">
-          <Alert key="danger" variant="danger">
+        <div className='mt-5 ryft-init-failure'>
+          <Alert key='danger' variant='danger'>
             <h5>{t('App:errorMessage')}</h5>
             {t('noPaymentProviderFound')}
           </Alert>
         </div>
       )}
       {ryftInitFailure && (
-        <div className="mt-5 ryft-init-failure">
-          <Alert key="danger" variant="danger">
+        <div className='mt-5 ryft-init-failure'>
+          <Alert key='danger' variant='danger'>
             <h5>{t('App:errorMessage')}</h5>
             {t('initFailureMessage')}
-            <div className="flex flex-column align-items-center mt-4">
+            <div className='flex flex-column align-items-center mt-4'>
               <Button
-                variant="primary"
+                variant='primary'
                 onClick={() => {
                   history.go(0)
                 }}
@@ -55,7 +55,7 @@ export const RyftPayment = ({
           </Alert>
         </div>
       )}
-      <form id="ryft-pay-form" noValidate className="ryft-payment-form" />
+      <form id='ryft-pay-form' noValidate className='ryft-payment-form' />
     </>
   )
 }

package/src/sales/sales-and-views/SalesAndViewsChart.tsx

@@ -61,18 +61,18 @@ function SalesAndViewsChart({
   }: TooltipProps<ValueType, NameType>) => {
     if (active && payload && payload.length) {
       return (
-        <div className="tooltip-container">
+        <div className='tooltip-container'>
           <p
-            className="tooltip-item"
+            className='tooltip-item'
             style={{
               display: activePeriod === 'pastDay' ? 'none' : 'inline',
             }}
           >
             {labelFormatter(label)}
           </p>
-          <p className="tooltip-item">sales: {payload[0]?.payload.sales}</p>
+          <p className='tooltip-item'>sales: {payload[0]?.payload.sales}</p>
           {payload[0]?.payload?.amount && (
-            <p className="tooltip-item">
+            <p className='tooltip-item'>
               {formatNumber(payload[0]?.payload?.amount, {
                 style: 'currency',
                 currency: 'GBP',
@@ -87,9 +87,9 @@ function SalesAndViewsChart({
   const legendRenderer = () => (
     <>
       <div
-        className="legend"
+        className='legend'
         onClick={() => setChartType('sales')}
-        role="button"
+        role='button'
         tabIndex={0}
       >
         <div
@@ -101,9 +101,9 @@ function SalesAndViewsChart({
         {t('sales')}
       </div>
       <div
-        className="legend"
+        className='legend'
         onClick={() => setChartType('views')}
-        role="button"
+        role='button'
         tabIndex={0}
       >
         <div
@@ -118,10 +118,10 @@ function SalesAndViewsChart({
   )
 
   return (
-    <div className="sales-and-views">
-      <div className="sales-and-views__header">{t('salesAndViews')}</div>
-      <div className="sales-and-views__charts">
-        <ResponsiveContainer width="100%" height="100%">
+    <div className='sales-and-views'>
+      <div className='sales-and-views__header'>{t('salesAndViews')}</div>
+      <div className='sales-and-views__charts'>
+        <ResponsiveContainer width='100%' height='100%'>
           <ComposedChart
             data={data}
             margin={{
@@ -154,20 +154,20 @@ function SalesAndViewsChart({
                 }}
                 axisLine={false}
                 tickLine={false}
-                dataKey="date"
+                dataKey='date'
                 tickFormatter={(tick) => moment(tick).format('DD/MM')}
               />
             )}
             <Legend
-              iconType="circle"
+              iconType='circle'
               wrapperStyle={{ top: -20, left: 39 }}
-              layout="vertical"
-              verticalAlign="top"
+              layout='vertical'
+              verticalAlign='top'
               content={legendRenderer}
             />
             <Bar
               radius={[5, 5, 5, 5]}
-              dataKey="sales"
+              dataKey='sales'
               barSize={32}
               style={{ zIndex: 1 }}
             >
@@ -183,7 +183,7 @@ function SalesAndViewsChart({
             {chartType === 'views' && (
               <Line
                 strokeWidth={3}
-                type="monotone"
+                type='monotone'
                 dataKey={chartType}
                 activeDot
                 dot={false}
@@ -192,7 +192,7 @@ function SalesAndViewsChart({
           </ComposedChart>
         </ResponsiveContainer>
       </div>
-      <ul className="sales-and-views__filter-menu">
+      <ul className='sales-and-views__filter-menu'>
         {filterValues.map(({ period, id }) => (
           <li
             key={id}