@licklist/design 0.69.1 → 0.69.2

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -33,20 +33,20 @@ export const BookingSummary = ({
 
   if (isLoading) {
     return (
-      <div className="payment-booking-summary">
+      <div className='payment-booking-summary'>
         <LoaderIndicator isLoaded={false} />
       </div>
     )
   }
 
   return (
-    <div className="payment-booking-summary">
+    <div className='payment-booking-summary'>
       <BookingSummaryAccordion
         isPaymentPage={isPaymentPage}
         hasPeopleInput={hasPeopleInput}
         headerComponent={headerComponent}
       >
-        <div className="event-info">
+        <div className='event-info'>
           <EventInfo
             eventName={eventName}
             isPaymentPage={isPaymentPage}
@@ -58,8 +58,8 @@ export const BookingSummary = ({
 
         {values(formValues)?.length > 0 ? (
           <div>
-            <div className="cart-items">
-              <div className="products-by-menu-step">
+            <div className='cart-items'>
+              <div className='products-by-menu-step'>
                 {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
                     isPaymentLink={isPaymentLink}
@@ -74,9 +74,9 @@ export const BookingSummary = ({
               {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
-                  <div className="d-flex justify-content-between mt-3 people">
-                    <p className="m-0 payment-metadata">{t('people')}:</p>
-                    <p className="price">{peopleAmount}</p>
+                  <div className='d-flex justify-content-between mt-3 people'>
+                    <p className='m-0 payment-metadata'>{t('people')}:</p>
+                    <p className='price'>{peopleAmount}</p>
                   </div>
                 </>
               )}
@@ -84,11 +84,11 @@ export const BookingSummary = ({
               {!!transactionFee && (
                 <>
                   <hr />
-                  <div className="d-flex justify-content-between mt-3">
-                    <p className="m-0 payment-metadata">
+                  <div className='d-flex justify-content-between mt-3'>
+                    <p className='m-0 payment-metadata'>
                       {t('transactionFee')}:
                     </p>
-                    <p className="price">
+                    <p className='price'>
                       {formatNumber(transactionFee, {
                         style: 'currency',
                         currency: Config.Currency.GBP,
@@ -101,8 +101,8 @@ export const BookingSummary = ({
             {footer}
           </div>
         ) : (
-          <div className="cart-items">
-            <p className="empty-cart">{t('emptyBasket')}</p>
+          <div className='cart-items'>
+            <p className='empty-cart'>{t('emptyBasket')}</p>
           </div>
         )}
       </BookingSummaryAccordion>
@@ -125,25 +125,25 @@ const EventInfo = ({
   if (isPaymentPage) {
     return (
       <>
-        <div className="d-flex align-items-center mb-5">
-          <TicketIcon height={16} width={20} fill="black" />
-          <div className="m-0 pl-2 title event-name metadata">{eventName}</div>
+        <div className='d-flex align-items-center mb-5'>
+          <TicketIcon height={16} width={20} fill='black' />
+          <div className='m-0 pl-2 title event-name metadata'>{eventName}</div>
         </div>
 
-        <div className="d-flex align-items-center mb-5">
-          <CalendarIcon height={16} width={20} fill="black" />
-          <div className="m-0 pl-2 metadata">{date}</div>
+        <div className='d-flex align-items-center mb-5'>
+          <CalendarIcon height={16} width={20} fill='black' />
+          <div className='m-0 pl-2 metadata'>{date}</div>
         </div>
-        {time && <div className="mb-5 metadata">{time}</div>}
+        {time && <div className='mb-5 metadata'>{time}</div>}
       </>
     )
   }
 
   return (
     <>
-      <p className="m-0 title event-name">{eventName}</p>
-      <p className="m-0">{date}</p>
-      {time && <p className="m-0">{time}</p>}
+      <p className='m-0 title event-name'>{eventName}</p>
+      <p className='m-0'>{date}</p>
+      {time && <p className='m-0'>{time}</p>}
     </>
   )
 }

package/src/iframe/order-process/components/BookingSummary/components/BookingSummaryAccordion/BookingSummaryAccordion.tsx

@@ -92,7 +92,7 @@ export const BookingSummaryAccordion = ({
         }`}
         style={rightBlockContentStyles}
       >
-        <div className="summary-wrapper">{children}</div>
+        <div className='summary-wrapper'>{children}</div>
       </Accordion.Collapse>
     </Accordion>
   )

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -30,18 +30,18 @@ export const ProductSummary = ({
   })
 
   return (
-    <div className="product">
-      <p className="m-0 name">{name ?? orderProduct?.name}</p>
-      <div className="d-flex justify-content-between">
-        <p className="m-0">
+    <div className='product'>
+      <p className='m-0 name'>{name ?? orderProduct?.name}</p>
+      <div className='d-flex justify-content-between'>
+        <p className='m-0'>
           {t('shortQuantity')}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        <p className="price">{fullPrice}</p>
+        <p className='price'>{fullPrice}</p>
       </div>
 
       {productQuantityError && (
-        <p className="iframe-event__message-error">{productQuantityError}</p>
+        <p className='iframe-event__message-error'>{productQuantityError}</p>
       )}
     </div>
   )

package/src/iframe/order-process/components/BookingSummary/components/ProductsByMenuStep/ProductsByMenuStep.tsx

@@ -42,7 +42,7 @@ export const ProductsByMenuStep = ({
   if (!doesStepHaveItems(orderItems, step)) return null
 
   return (
-    <div className="categories">
+    <div className='categories'>
       {productCategories.map((category) => {
         const categoryOrderItems = getOrderItemsForCategory(
           orderItems,
@@ -52,8 +52,8 @@ export const ProductsByMenuStep = ({
         if (categoryOrderItems.length === 0) return null
 
         return (
-          <div key={category.id} className="products">
-            <p className="m-0 title">{category.name}</p>
+          <div key={category.id} className='products'>
+            <p className='m-0 title'>{category.name}</p>
 
             {categoryOrderItems.map((orderItem) => {
               const productQuantityError = getProductError(

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx

@@ -29,7 +29,7 @@ export const SummaryTotal = ({
   }
 
   return (
-    <div className="d-flex flex-column justify-content-between">
+    <div className='d-flex flex-column justify-content-between'>
       <SummaryTotalBlock label={t('total')} amount={cartSum} />
 
       {!!totalWithDiscount && !isFreePayment && (

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock.tsx

@@ -13,9 +13,9 @@ export const SummaryTotalBlock = ({
   const { formatNumber } = useIntl()
 
   return (
-    <div className="total">
+    <div className='total'>
       {label && <div>{label}</div>}
-      <div className="m-0 price">
+      <div className='m-0 price'>
         {formatNumber(amount, {
           style: 'currency',
           currency: Config.Currency.GBP,

package/src/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.tsx

@@ -52,7 +52,7 @@ export const ToggleHeader = ({
     <div
       onClick={(event) => showExpandButton && decoratedOnClick(event)}
       onKeyPress={(event) => showExpandButton && decoratedOnClick(event)}
-      role="button"
+      role='button'
       tabIndex={0}
       className={clsx(
         'd-flex flex-column',
@@ -60,7 +60,7 @@ export const ToggleHeader = ({
       )}
     >
       <h6 className={clsx('title', showExpandButton && 'pointer')}>
-        <div className="d-flex w-100 align-content-center justify-content-between">
+        <div className='d-flex w-100 align-content-center justify-content-between'>
           <HeaderContent
             showExpandButton={showExpandButton}
             title={title}
@@ -70,7 +70,7 @@ export const ToggleHeader = ({
           />
         </div>
       </h6>
-      {isExpanded && <hr className="mt-3" />}
+      {isExpanded && <hr className='mt-3' />}
     </div>
   )
 }
@@ -87,10 +87,10 @@ const HeaderContent = ({
   if (isPaymentPage) {
     return (
       <>
-        <div className="d-flex">
-          <p className="m-0 mr-2 toggle-title">{title || t('yourBooking')}</p>
+        <div className='d-flex'>
+          <p className='m-0 mr-2 toggle-title'>{title || t('yourBooking')}</p>
           {showExpandButton && (
-            <div className="expand-button">
+            <div className='expand-button'>
               {currentEventKey === ACCORDION_KEY ? (
                 <FaChevronUp size={8} />
               ) : (
@@ -105,12 +105,12 @@ const HeaderContent = ({
   }
   return (
     <>
-      <div className="d-flex">
-        <p className="m-0">{title || t('yourBooking')}</p>
+      <div className='d-flex'>
+        <p className='m-0'>{title || t('yourBooking')}</p>
       </div>
 
       {showExpandButton && (
-        <div className="expand-button">
+        <div className='expand-button'>
           {currentEventKey === ACCORDION_KEY ? (
             <FaChevronUp size={16} />
           ) : (

package/src/iframe/order-process/components/BookingSummaryFooter/BookingSummaryFooter.tsx

@@ -41,16 +41,16 @@ export const BookingSummaryFooter = ({
   const disabled = _disabled || isLoading
 
   return (
-    <div className="d-flex flex-column">
+    <div className='d-flex flex-column'>
       {children}
       {showButton && (
         <Button
-          className="m-0 d-flex align-items-center justify-content-center mt-3"
+          className='m-0 d-flex align-items-center justify-content-center mt-3'
           disabled={disabled}
           {...buttonProps}
         >
           {isLoading ? (
-            <Spinner animation="border" size="sm" role="status" />
+            <Spinner animation='border' size='sm' role='status' />
           ) : (
             (buttonLabel ?? t('continue'))
           )}

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx

@@ -411,7 +411,7 @@ export function Default() {
   const [peopleAmount] = useState(0)
 
   return (
-    <div className="snippet">
+    <div className='snippet'>
       <OrderProcessContextProvider>
         <Page>
           <PageBody
@@ -423,8 +423,8 @@ export function Default() {
                 onSubmit={(values) => console.log('onSubmit', values)}
                 setFormValues={setFormValues}
                 menuStepWithVenueMap={MENU_STEPS[0] as any}
-                title="Select a product"
-                activeVenueMapId="7"
+                title='Select a product'
+                activeVenueMapId='7'
                 soldOutProducts={[{ product_id: 148, message: 'message' }]}
               />
             }
@@ -440,12 +440,12 @@ export function Default() {
                 }
               >
                 <BookingSummary
-                  date="29 Sept 2022 at 09:00"
+                  date='29 Sept 2022 at 09:00'
                   menuSteps={menuSteps as any}
                   peopleAmount={peopleAmount}
                   formValues={formValues}
                   totalWithDiscount={5}
-                  eventName="Glam!"
+                  eventName='Glam!'
                 />
               </PageBody.RightBlock>
             }

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.tsx

@@ -326,7 +326,7 @@ export const CalendarStepsForm = forwardRef<
               />
             )
           }
-          childrenClassName="bordered"
+          childrenClassName='bordered'
         >
           <ErrorModal
             isOpen={Boolean(formStepError)}
@@ -337,10 +337,10 @@ export const CalendarStepsForm = forwardRef<
           <Form
             onSubmit={form.handleSubmit(submitCurrentForm, onErrorSubmit)}
             id={id}
-            className="category-steps-form"
+            className='category-steps-form'
           >
             <FormProvider {...form}>
-              <div className="position-relative">
+              <div className='position-relative'>
                 {selectedVenueMap && (
                   <>
                     <IframeEventVenueMap

package/src/iframe/order-process/components/CalendarStepsForm/components/Category.tsx

@@ -21,7 +21,7 @@ export const Category = ({
   <>
     {productCategories.length !== 0 &&
       productCategories.map((category) => (
-        <div key={category.id} className="iframe-event__category">
+        <div key={category.id} className='iframe-event__category'>
           {category.products.map((product) => (
             <CategoryProductModal
               key={product.id}

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -51,10 +51,10 @@ export const CategoryProductModal = ({
         canExpandDescription={false}
         soldOutProducts={soldOutProducts}
       />
-      <div className="close-modal-button">
+      <div className='close-modal-button'>
         <Button
-          variant="danger"
-          className="btn-sm rounded"
+          variant='danger'
+          className='btn-sm rounded'
           onClick={onCloseModal}
         >
           <FaTimes />

package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -119,7 +119,7 @@ export const CategoryProduct = ({
         field: { onChange, value: productInfo = {}, ref },
         fieldState: { invalid, error },
       }) => (
-        <div id={String(product.id)} className="iframe-event__category-product">
+        <div id={String(product.id)} className='iframe-event__category-product'>
           <div className={clsx('iframe-event__product', invalid && 'error')}>
             <TicketDescription
               title={product.name}
@@ -130,8 +130,8 @@ export const CategoryProduct = ({
               canExpand={canExpandDescription}
             />
           </div>
-          <div className="iframe-event__product-price-wrapper">
-            <span className="product-price">
+          <div className='iframe-event__product-price-wrapper'>
+            <span className='product-price'>
               {formatNumber(
                 category.allowDeposits ? product?.deposit : product.price,
                 {
@@ -154,7 +154,7 @@ export const CategoryProduct = ({
             />
           </div>
           {hasDeposits && !category?.remainderExpireAfter && (
-            <div className="mt-4">
+            <div className='mt-4'>
               {t('Design:payNowAndUponArrival', {
                 deposit: formatNumber(product?.deposit, {
                   style: 'currency',
@@ -169,7 +169,7 @@ export const CategoryProduct = ({
           )}
 
           {hasDeposits && category?.remainderExpireAfter > 0 && (
-            <div className="mt-4">
+            <div className='mt-4'>
               {t('Design:payNowAndReminderDays', {
                 deposit: formatNumber(product?.deposit, {
                   style: 'currency',
@@ -184,8 +184,8 @@ export const CategoryProduct = ({
             </div>
           )}
           {invalid && (
-            <div className="d-flex mt-3 w-100">
-              <p className="iframe-event__message-error">
+            <div className='d-flex mt-3 w-100'>
+              <p className='iframe-event__message-error'>
                 {HookFormService.hasError(error, 'required') &&
                   t('Design:pleaseSelectAtLeastFrom', {
                     min: 1,

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.stories.tsx

@@ -11,7 +11,7 @@ export function Default() {
   const [value, setValue] = useState(0)
 
   return (
-    <div className="payment-process">
+    <div className='payment-process'>
       <NumberInput
         value={value}
         onChange={setValue}

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -77,7 +77,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     return (
       <div className={inputWrapperClasses}>
         <button
-          type="button"
+          type='button'
           onClick={handleArrowDownClick}
           className={`payment-number-input__btn-down ${
             minusButtonGreyedOut && 'disabled-number-input-button'
@@ -87,19 +87,19 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           &minus;
         </button>
         <FormControl
-          type="number"
+          type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
           min={0}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}
-          height="5rem"
+          height='5rem'
           disabled={disabled}
           ref={ref}
         />
         <button
-          type="button"
+          type='button'
           onClick={handleArrowUpClick}
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -58,7 +58,7 @@ export const ProductQuantityInput = ({
 
   if (product.isSoldOut) {
     return (
-      <div className="iframe-event__sold-out-wrapper">
+      <div className='iframe-event__sold-out-wrapper'>
         {t('Design:soldOut')}
       </div>
     )
@@ -99,7 +99,7 @@ export const ProductQuantityInput = ({
       }}
       min={product?.minAmount ? Number(product.minAmount) : 0}
       max={product?.maxAmount ? Number(product.maxAmount) : undefined}
-      placeholder="0"
+      placeholder='0'
       disabled={product.isSoldOut}
       value={productInfo?.quantity}
       className={clsx(invalid && 'error')}

package/src/iframe/order-process/components/ErrorModal/ErrorModal.tsx

@@ -33,28 +33,28 @@ export const ErrorModal = ({
       onHide={handleClose}
       animation={false}
       centered
-      contentClassName="rounded"
+      contentClassName='rounded'
     >
-      <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h6">{t('formHasErrors')}</ModalTitle>
+      <ModalHeader className='align-items-center border-0'>
+        <ModalTitle as='h6'>{t('formHasErrors')}</ModalTitle>
 
         <Button
-          variant="danger"
-          className="btn-sm rounded"
+          variant='danger'
+          className='btn-sm rounded'
           onClick={handleClose}
         >
           <FaTimes />
         </Button>
       </ModalHeader>
-      <ModalBody className="confirmation-modal-body">
-        <div className="d-flex m-5 justify-content-center manual-form-error">
+      <ModalBody className='confirmation-modal-body'>
+        <div className='d-flex m-5 justify-content-center manual-form-error'>
           {message ||
             (messageKey ? (
               t(messageKey)
             ) : (
               <Trans
                 t={t}
-                i18nKey="pleaseSelectAtLeastFrom"
+                i18nKey='pleaseSelectAtLeastFrom'
                 values={{ min: 1, type: 'item', from: 'those categories' }}
               />
             ))}

package/src/iframe/order-process/components/NavigationFooter/NavigationFooter.tsx

@@ -27,17 +27,17 @@ export const NavigationFooter = ({
   }
 
   return (
-    <div className="iframe-event__footer">
+    <div className='iframe-event__footer'>
       <Button
-        className="event-fixed-footer__prev-btn m-0"
+        className='event-fixed-footer__prev-btn m-0'
         onClick={onPrevButtonClick}
       >
         <FaArrowLeft />
       </Button>
 
-      <Button className="m-0" disabled={isButtonDisabled} {...buttonProps}>
+      <Button className='m-0' disabled={isButtonDisabled} {...buttonProps}>
         {nextButtonLabel ?? t('continue')}
-        <FaArrowRight className="ml-2" />
+        <FaArrowRight className='ml-2' />
       </Button>
     </div>
   )

package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.stories.tsx

@@ -11,7 +11,7 @@ export function Default() {
   const isLoading = boolean('isLoading', false)
 
   return (
-    <div className="payment-process">
+    <div className='payment-process'>
       <NavigationSteps
         steps={[
           {

package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.tsx

@@ -90,9 +90,9 @@ export const NavigationSteps = ({
   if (isLoading) return <SnippetLoader />
 
   return (
-    <div ref={containerWrapperRef} className="steps-wrapper">
+    <div ref={containerWrapperRef} className='steps-wrapper'>
       <div
-        className="payment-navigation-steps"
+        className='payment-navigation-steps'
         ref={containerRef}
         style={containerStyle}
       >
@@ -128,10 +128,10 @@ export const NavigationSteps = ({
           )
         })}
       </div>
-      <div className="d-flex step-numbers">
-        <p className="m-0 active-step">{activeStepIndex + 1}</p>
-        <p className="m-0">&nbsp;{t('of')}&nbsp;</p>
-        <p className="m-0">{steps.length}</p>
+      <div className='d-flex step-numbers'>
+        <p className='m-0 active-step'>{activeStepIndex + 1}</p>
+        <p className='m-0'>&nbsp;{t('of')}&nbsp;</p>
+        <p className='m-0'>{steps.length}</p>
       </div>
     </div>
   )

package/src/iframe/order-process/components/PaymentCard/PaymentCard.stories.tsx

@@ -11,8 +11,8 @@ export function Default(args) {
   const totalWithDiscount = number('totalWithDiscount', 0)
 
   return (
-    <div className="payment-process">
-      <div className="col-lg-4">
+    <div className='payment-process'>
+      <div className='col-lg-4'>
         <PaymentCard totalWithDiscount={totalWithDiscount || 0} {...args} />
       </div>
     </div>

package/src/iframe/order-process/components/PaymentCard/PaymentCard.tsx

@@ -67,14 +67,14 @@ export const PaymentCard: FC<PaymentCardProps> = ({
   )
 
   return (
-    <div className="payment-card">
-      <div className="title">
+    <div className='payment-card'>
+      <div className='title'>
         <FaCreditCard />
-        <p className="m-0">{t('Design:payment')}</p>
+        <p className='m-0'>{t('Design:payment')}</p>
       </div>
-      <div className="payment-summary mb-5">
+      <div className='payment-summary mb-5'>
         <p>{t('Design:fullAmount')}</p>
-        <p className="total-summary">{totalSummary}</p>
+        <p className='total-summary'>{totalSummary}</p>
         {paymentDetail &&
           paymentDetail.totalAmount !== paymentDetail.netAmount && (
             <>
@@ -89,16 +89,16 @@ export const PaymentCard: FC<PaymentCardProps> = ({
             </>
           )}
         {totalWithDiscount > 0 && (
-          <p className="mt-3">
+          <p className='mt-3'>
             {t('Design:youHaveSaved', { amount: discountAmount })}
           </p>
         )}
       </div>
-      <div className="secure-block">
+      <div className='secure-block'>
         {t('Design:securePayment')}
-        <div className="pay-today">
+        <div className='pay-today'>
           {t('Design:payToday')}
-          <p className="m-0 ml-4 total-summary">{totalSummary}</p>
+          <p className='m-0 ml-4 total-summary'>{totalSummary}</p>
         </div>
       </div>
       {discountBlock}

package/src/iframe/order-process/components/Timer/Timer.stories.tsx

@@ -8,8 +8,8 @@ export default {
 
 export function Default() {
   return (
-    <div className="payment-process">
-      <div className="col-lg-4">
+    <div className='payment-process'>
+      <div className='col-lg-4'>
         <Timer timer={120000} />
       </div>
     </div>