@licklist/design 0.69.1 → 0.69.3-dev.0

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,20 +87,29 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           &minus;
         </button>
         <FormControl
-          type="number"
+          type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           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}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

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

@@ -51,6 +51,7 @@ export const ProductQuantityInput = ({
       hasDeposit: category.allowDeposits && product?.deposit < product.price,
       price: product.price,
       productCategoryId: category.id,
+      zoneId: category.zone?.id,
       quantity,
       capacity: product?.capacity,
     })
@@ -58,7 +59,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 +100,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>

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

@@ -10,16 +10,16 @@ export const Timer = ({ timer }: TimerProps) => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className="payment-timer-counter">
-      <div className="timer-wrapper ">
-        <div className="timer">
-          <div className="d-flex align-items-center">
+    <div className='payment-timer-counter'>
+      <div className='timer-wrapper'>
+        <div className='timer'>
+          <div className='d-flex align-items-center'>
             <FaStopwatch />
           </div>
-          <div className="time">{fancyTimeFormat(timer)}</div>
+          <div className='time'>{fancyTimeFormat(timer)}</div>
         </div>
       </div>
-      <div className="timer-explanation">{t('toCompleteThisBooking')}</div>
+      <div className='timer-explanation'>{t('toCompleteThisBooking')}</div>
     </div>
   )
 }

package/src/iframe/page/Page.stories.tsx

@@ -213,12 +213,12 @@ export function Default() {
       <PageBody
         leftBlock={
           <PageBody.LeftBlock
-            title="Test Iframe Page"
+            title='Test Iframe Page'
             component={
               <>
                 <CalendarSelect
                   options={[{ label: 'Floor 1', value: '1' }]}
-                  value="1"
+                  value='1'
                   onChange={(chagedId: string) => console.log({ chagedId })}
                 />
               </>
@@ -226,7 +226,7 @@ export function Default() {
           >
             <div>
               <div
-                className="events"
+                className='events'
                 style={{
                   display: 'grid',
                   gridTemplateColumns: 'repeat(auto-fill, 18.5rem)',
@@ -262,7 +262,7 @@ export function Default() {
               bottomBlock={
                 showBottomBlock && (
                   <div>
-                    <Button size="sm">Book Now</Button>
+                    <Button size='sm'>Book Now</Button>
                   </div>
                 )
               }

package/src/iframe/page/Page.tsx

@@ -32,7 +32,7 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(
       {...props}
       ref={ref}
     >
-      {headerBlock && <div className="header-block">{headerBlock}</div>}
+      {headerBlock && <div className='header-block'>{headerBlock}</div>}
       {children}
       <PoweredBy url={poweredByUrl} />
     </div>

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -26,11 +26,11 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx('left-block', className)} {...props}>
-      <div className="navigation">
+      <div className='navigation'>
         {pageTitle && (
           <>
             {typeof pageTitle === 'string' ? (
-              <div className="title" id="navigation-title">
+              <div className='title' id='navigation-title'>
                 {pageTitle}
               </div>
             ) : (

package/src/iframe/page/components/PageBody/components/RightBlock/RightBlock.tsx

@@ -92,7 +92,7 @@ export const RightBlock = ({
       id={PAGE_RIGHT_BLOCK_ID}
     >
       <div
-        className="children-wrapper"
+        className='children-wrapper'
         ref={childBlockRef}
         id={PAGE_RIGHT_BLOCK_CHILDREN_ID}
       >
@@ -102,7 +102,7 @@ export const RightBlock = ({
         <>
           <hr />
           <div
-            className="bottom-wrapper"
+            className='bottom-wrapper'
             ref={bottomBlockRef}
             id={PAGE_RIGHT_BLOCK_BOTTOM_ID}
           >

package/src/iframe/page/components/PageHeader/PageHeader.tsx

@@ -34,21 +34,21 @@ export const PageHeader = ({
   }, [onBackButtonClick])
 
   return (
-    <div className="page-header" {...props}>
-      <div className="header-container">
+    <div className='page-header' {...props}>
+      <div className='header-container'>
         {showBackButton && <BackButton onClick={onReturnBack} />}
         {children && (
-          <div className="children-wrapper" style={style}>
+          <div className='children-wrapper' style={style}>
             {children}
           </div>
         )}
         {showCloseButton && (
-          <div className="button-wrapper close-button">
+          <div className='button-wrapper close-button'>
             <div
-              className="close-button"
+              className='close-button'
               onClick={onButtonClick}
               onKeyPress={onButtonClick}
-              role="button"
+              role='button'
               tabIndex={0}
             >
               &#x2715;

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -12,11 +12,11 @@ export function Default(args) {
   const isPaymentProcessed = boolean('isPaymentProcessed', true)
 
   return (
-    <div style={{ width: '800px' }} className="m-5">
+    <div style={{ width: '800px' }} className='m-5'>
       <OrderItemsTable
         {...args}
         isPaymentProcessed={isPaymentProcessed}
-        externalDiscount="877.21"
+        externalDiscount='877.21'
       />
     </div>
   )

package/src/iframe/payment/order-items-table/OrderItemsTable.tsx

@@ -20,7 +20,7 @@ export const OrderItemsTable = ({
   }
 
   return (
-    <div className="snippet__table">
+    <div className='snippet__table'>
       <StaticTable
         columns={[
           { key: 'name', label: '' },
@@ -28,7 +28,7 @@ export const OrderItemsTable = ({
           { key: 'price', label: '' },
         ]}
         data={data}
-        className="order-items-table"
+        className='order-items-table'
       />
     </div>
   )

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -36,7 +36,7 @@ export const useTableData = ({
     })
 
   const wrapLabelContent = (string: string) => (
-    <div className="label">{string}</div>
+    <div className='label'>{string}</div>
   )
 
   const renderCategoryItem = (products: Product[]) => ({
@@ -64,8 +64,8 @@ export const useTableData = ({
       key: product.id,
       name: product.name,
       quantity: (
-        <div className="quantity">
-          <div className="multiplier">x</div>
+        <div className='quantity'>
+          <div className='multiplier'>x</div>
           {quantity}
         </div>
       ),

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,6 +61,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/payment/payment-form/PaymentForm.stories.tsx

@@ -10,7 +10,7 @@ export default {
 const orderColumns = [
   { key: 'what', label: 'What' },
   { key: 'amount', label: 'Amount' },
-  { key: 'price', label: <p className="iframe-item-price">Item price</p> },
+  { key: 'price', label: <p className='iframe-item-price'>Item price</p> },
 ]
 
 export function Default() {
@@ -21,7 +21,7 @@ export function Default() {
       what: 'Tables&Booths Blue corner B31 (10p)',
       amount: 1,
       price: (
-        <p className="iframe-item-price">
+        <p className='iframe-item-price'>
           {formatNumber(300, { style: 'currency', currency: 'GBP' })}
         </p>
       ),
@@ -31,7 +31,7 @@ export function Default() {
       what: 'Tables&Booths Blue corner B31 (10p)',
       amount: 1,
       price: (
-        <p className="iframe-item-price">
+        <p className='iframe-item-price'>
           {formatNumber(300, { style: 'currency', currency: 'GBP' })}
         </p>
       ),
@@ -41,7 +41,7 @@ export function Default() {
       what: 'Tables&Booths Blue corner B31 (10p)',
       amount: 1,
       price: (
-        <p className="iframe-item-price">
+        <p className='iframe-item-price'>
           {formatNumber(300, { style: 'currency', currency: 'GBP' })}
         </p>
       ),
@@ -49,7 +49,7 @@ export function Default() {
     },
   ]
   return (
-    <div style={{ width: '800px' }} className="m-5">
+    <div style={{ width: '800px' }} className='m-5'>
       <PaymentForm orderColumns={orderColumns} orderData={data} />
     </div>
   )

package/src/iframe/payment/payment-form/PaymentForm.tsx

@@ -14,44 +14,44 @@ export function PaymentForm({ orderColumns, orderData }: PaymentFormProps) {
 
   return (
     <>
-      <h2 className="mb-3">{t('reviewAndPay')}</h2>
+      <h2 className='mb-3'>{t('reviewAndPay')}</h2>
       <StaticTable
         columns={orderColumns}
         data={orderData}
-        className="payment-form-table"
+        className='payment-form-table'
       />
-      <div className="order-summary">
+      <div className='order-summary'>
         {t('amountTotal')}
         <span>{formatNumber(800, { style: 'currency', currency: 'GBP' })}</span>
       </div>
-      <div className="order-payment">
+      <div className='order-payment'>
         <div>
           <p>{t('halfPaymentRequired')}</p>
-          <button type="button">{t('iHavePromocode')}</button>
+          <button type='button'>{t('iHavePromocode')}</button>
         </div>
 
         <span>{formatNumber(440, { style: 'currency', currency: 'GBP' })}</span>
       </div>
 
-      <Form className="mt-5">
+      <Form className='mt-5'>
         <Form.Group>
           <Form.Label>{t('yourName')}</Form.Label>
-          <Form.Control type="text" isValid value="Tanel Kaarel Sepp" />
+          <Form.Control type='text' isValid value='Tanel Kaarel Sepp' />
         </Form.Group>
         <Form.Group>
           <Form.Label>{t('yourEmail')}</Form.Label>
           <Form.Control
-            type="email"
+            type='email'
             isInvalid
-            value="tanelatweekendvisuals.com"
+            value='tanelatweekendvisuals.com'
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {t('checkEmail')}
           </Form.Control.Feedback>
         </Form.Group>
-        <Form.Group className="d-flex justify-content-between mt-5">
+        <Form.Group className='d-flex justify-content-between mt-5'>
           <Form.Check
-            className="subscribe-checkbox"
+            className='subscribe-checkbox'
             label="I'd prefer not to receive promotions and exclusive information from Licklist partner venues"
           />
           <Button>{t('book')}</Button>

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -88,10 +88,10 @@ export const PaymentPage = ({
         <PageBody
           leftBlock={
             <PageBody.LeftBlock>
-              <div className="d-flex h-100 w-100 justify-content-center align-items-center flex-column">
+              <div className='d-flex h-100 w-100 justify-content-center align-items-center flex-column'>
                 <h6>{t('linkNotActiveOrExpired')}</h6>
                 <Col xs={12} md={3}>
-                  <Button className="mt-5 w-20" onClick={onCloseWindow}>
+                  <Button className='mt-5 w-20' onClick={onCloseWindow}>
                     {t('backToSite')}
                   </Button>
                 </Col>
@@ -116,7 +116,7 @@ export const PaymentPage = ({
     orderTotalAmountByFormValues > data?.amount
 
   return (
-    <Page className="payment_link">
+    <Page className='payment_link'>
       {/* TODO wait for Brad's design for close and go back buttons */}
       {/* <PageHeader
         className="no-page-header"
@@ -129,7 +129,7 @@ export const PaymentPage = ({
         id={PAGE_BODY_WITH_SCROLL}
         leftBlock={
           <PageBody.LeftBlock>
-            <div className="d-flex align-items-center mb-5">
+            <div className='d-flex align-items-center mb-5'>
               <PaymentTimer />
             </div>
             <RyftPaymentForm {...ryftPaymentFormProps} />
@@ -151,7 +151,7 @@ export const PaymentPage = ({
                 />
               }
               footer={
-                <div className="d-flex flex-column justify-content-between">
+                <div className='d-flex flex-column justify-content-between'>
                   {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock

package/src/iframe/payment/payment-status-header/PaymentStatusHeader.stories.tsx

@@ -11,13 +11,13 @@ export function Default() {
   const success = boolean('success', true)
   return (
     <div
-      className="snippet d-flex justify-content-center align-items-center h-100"
+      className='snippet d-flex justify-content-center align-items-center h-100'
       style={{ width: '30rem' }}
     >
       <PaymentStatusHeader
         showCloseButton
         onCloseButtonClick={() => {}}
-        title="test"
+        title='test'
         success={success}
       />
     </div>

package/src/iframe/payment/payment-status-header/PaymentStatusHeader.tsx

@@ -27,11 +27,11 @@ export const PaymentStatusHeader = ({
       onCloseButtonClick={onCloseButtonClick}
       {...props}
     >
-      <div className="payment-status-header">
+      <div className='payment-status-header'>
         <div className={clsx('icon', { success })}>
           <Logo logo={success ? <SuccessPayment /> : <FailedPayment />} />
         </div>
-        <p className="m-0 ml-3">{statusTitle}</p>
+        <p className='m-0 ml-3'>{statusTitle}</p>
       </div>
     </PageHeader>
   )

package/src/iframe/payment/payment-status-page/PaymentStatusComponent.stories.tsx

@@ -8,13 +8,13 @@ export default {
 
 export function Default() {
   return (
-    <div className="snippet d-flex justify-content-center align-items-center h-100">
+    <div className='snippet d-flex justify-content-center align-items-center h-100'>
       <PaymentStatusPage
         isLoading={false}
         onCloseWindow={() => {}}
         onTryAgain={() => {}}
         status={ORDER_STATUS_SUCCESS}
-        email="someemail@gmail.com"
+        email='someemail@gmail.com'
       />
     </div>
   )

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -74,7 +74,7 @@ export const PaymentStatusPage = ({
 
   return (
     <Page
-      className="payment-status-page"
+      className='payment-status-page'
       isAppUsingInIframe={isAppUsingInIframe}
       headerBlock={
         <PaymentStatusHeader
@@ -105,7 +105,7 @@ export const PaymentStatusPage = ({
           <PageBody.RightBlock
             bottomBlock={
               <BookingSummaryFooter showButton={false}>
-                <div className="d-flex flex-column justify-content-between">
+                <div className='d-flex flex-column justify-content-between'>
                   {paymentMetadata ? (
                     <>
                       <SummaryTotalBlock