@licklist/design 0.68.7-dev.1 → 0.69.0

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

@@ -61,7 +61,6 @@ 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

package/src/iframe/payment/status-body/StatusBody.tsx

@@ -11,9 +11,9 @@ export const StatusBody = ({ onTryAgain, onBack, title }: StatusBodyProps) => {
   const { t } = useTranslation('Design')
 
   return (
-    <div className='status-body-wrapper mt-4'>
-      {title && <p className='status-body-wrapper__text'>{title}</p>}
-      <div className='d-flex buttons-wrapper'>
+    <div className="status-body-wrapper mt-4">
+      {title && <p className="status-body-wrapper__text">{title}</p>}
+      <div className="d-flex buttons-wrapper">
         {onTryAgain && <Button onClick={onTryAgain}>{t('tryAgain')}</Button>}
         <Button onClick={onBack}>{t('backToSite')}</Button>
       </div>

package/src/iframe/powered-by/PoweredBy.tsx

@@ -11,11 +11,11 @@ type PoweredByProps = {
 export const PoweredBy = ({ url = URL }: PoweredByProps) => {
   const { t } = useTranslation('Design')
   return (
-    <div className='bkdt-powered-by'>
-      <div className='powered booked-it'>
+    <div className="bkdt-powered-by">
+      <div className="powered booked-it">
         &nbsp;{t('poweredBy')}&nbsp;
-        <a href={url} target='_blank' rel='noreferrer'>
-          <Logo logo={<LogoSvg color='white' />} />
+        <a href={url} target="_blank" rel="noreferrer">
+          <Logo logo={<LogoSvg color="white" />} />
         </a>
       </div>
     </div>

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -169,15 +169,15 @@ export const RyftPaymentForm = ({
 
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (
-      <div className='mt-5 pt-5'>
+      <div className="mt-5 pt-5">
         <BlockLoader />
       </div>
     )
 
   if (accountId.isError) {
     return (
-      <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('Ryft:errorMessage')}</h5>
           {t('Ryft:noPaymentProviderFound')}
         </Alert>
@@ -187,13 +187,13 @@ export const RyftPaymentForm = ({
 
   if (ryftInitFailure) {
     return (
-      <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('Ryft:errorMessage')}</h5>
           {t('Ryft: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)
               }}
@@ -210,19 +210,19 @@ export const RyftPaymentForm = ({
     <>
       <form
         ref={formRef}
-        id='ryft-pay-form'
+        id="ryft-pay-form"
         noValidate
         onSubmit={methods.handleSubmit(handleSubmit)}
-        className='ryft-payment-form'
+        className="ryft-payment-form"
       >
-        <div className='submit-button-wrapper mt-4 p-1'>
-          <Button type='submit' disabled={isBtnDisabled || !isValid}>
+        <div className="submit-button-wrapper mt-4 p-1">
+          <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t('Design:buyNow')}
           </Button>
         </div>
         {ryftError && (
-          <div id='ryft-payment-error'>{t(`${ryftErrorMap[ryftError]}`)}</div>
+          <div id="ryft-payment-error">{t(`${ryftErrorMap[ryftError]}`)}</div>
         )}
       </form>
     </>

package/src/image-radio-input/ImageRadioInput.tsx

@@ -28,15 +28,15 @@ export const ImageRadioInput = <FormModel,>({
   const { register } = useFormContext<FormModel>()
 
   return (
-    <Form.Check className='image-radio-input'>
+    <Form.Check className="image-radio-input">
       <Form.Check.Label
         className={clsx('image-radio-input-wrapper', disabled && 'disabled')}
       >
-        <div className='image-radio-input-image-wrapper'>{img}</div>
+        <div className="image-radio-input-image-wrapper">{img}</div>
 
-        <div className='image-radio-input-label'>
+        <div className="image-radio-input-label">
           <Form.Check.Input
-            type='radio'
+            type="radio"
             value={value}
             disabled={disabled}
             {...register(name, rules)}
@@ -45,7 +45,7 @@ export const ImageRadioInput = <FormModel,>({
           <span>{label}</span>
         </div>
       </Form.Check.Label>
-      <Form.Control.Feedback type='valid' className='d-block text-center'>
+      <Form.Control.Feedback type="valid" className="d-block text-center">
         {disabledMessage}
       </Form.Control.Feedback>
     </Form.Check>

package/src/layout/BackgroundVideoContainer.tsx

@@ -14,14 +14,14 @@ function BackgroundVideoContainer(props: Props) {
   return (
     <>
       <div
-        className='background-video-container'
+        className="background-video-container"
         style={{
           backgroundImage: poster ? `url(${poster})` : 'inherit',
           backgroundPosition: 'center',
           backgroundRepeat: 'no-repeat',
         }}
       >
-        <video autoPlay loop preload='auto' muted>
+        <video autoPlay loop preload="auto" muted>
           <source src={video} type={videoType || 'video/mp4'} />
         </video>
       </div>

package/src/layout/Container.tsx

@@ -7,7 +7,7 @@ interface Props {
 function Container(props: Props) {
   const { children } = props
 
-  return <div className='container'>{children}</div>
+  return <div className="container">{children}</div>
 }
 
 export default Container

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]
@@ -24,5 +24,4 @@ const DropDown = forwardRef((props: Props, ref: any) => {
 })
 
 DropDown.displayName = 'DropDown'
-
 export default DropDown

package/src/layout/DropDownToggle.tsx

@@ -13,7 +13,7 @@ const DropDownToggle = forwardRef((props: Props, ref: any) => {
   }
 
   return (
-    <a href='/' ref={ref} onClick={onClickHandler}>
+    <a href="/" ref={ref} onClick={onClickHandler}>
       {props.children}
     </a>
   )

package/src/layout/Layout.stories.tsx

@@ -23,7 +23,7 @@ _Container.story = {
 }
 
 export const BackgroundVideoContainerOnlyVideo = () => (
-  <BackgroundVideoContainer video='https://files.licklist.co.uk/v408/video/intro.mp4'>
+  <BackgroundVideoContainer video="https://files.licklist.co.uk/v408/video/intro.mp4">
     <div>I&apos;m in a container</div>
   </BackgroundVideoContainer>
 )
@@ -37,7 +37,7 @@ BackgroundVideoContainerOnlyVideo.story = {
 }
 
 export const BackgroundVideoContainerOnlyPoster = () => (
-  <BackgroundVideoContainer poster='https://licklist.co.uk/img/video.poster.jpg'>
+  <BackgroundVideoContainer poster="https://licklist.co.uk/img/video.poster.jpg">
     <div>I&apos;m in a container</div>
   </BackgroundVideoContainer>
 )
@@ -57,13 +57,13 @@ export const _DropDown = () => (
     }}
   >
     <Dropdown>
-      <Dropdown.Toggle as={DropDownToggle} id='dropdown-custom-components'>
+      <Dropdown.Toggle as={DropDownToggle} id="dropdown-custom-components">
         Dropdown Button
       </Dropdown.Toggle>
 
       <Dropdown.Menu as={DropDown}>
-        <Dropdown.Item eventKey='1'>test 1</Dropdown.Item>
-        <Dropdown.Item eventKey='2'>test 2</Dropdown.Item>
+        <Dropdown.Item eventKey="1">test 1</Dropdown.Item>
+        <Dropdown.Item eventKey="2">test 2</Dropdown.Item>
       </Dropdown.Menu>
     </Dropdown>
   </div>

package/src/logo/Logo.tsx

@@ -13,10 +13,10 @@ function Logo(props: Props) {
   return (
     <div className={['brand-logo-container', className].join(' ')}>
       <Row>
-        <Col className='brand-logo d-none d-sm-none d-md-block'>
+        <Col className="brand-logo d-none d-sm-none d-md-block">
           <span style={{ lineHeight: 1 }}>{logo}</span>
         </Col>
-        <Col className='brand-logo d-block d-md-none d-lg-none'>
+        <Col className="brand-logo d-block d-md-none d-lg-none">
           <span style={{ lineHeight: 1 }}>{logoSm || logo}</span>
         </Col>
       </Row>

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,9 +20,6 @@ export type ConfirmModalTypes =
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes
   children?: (confirm: (action: ConfirmAction) => void) => ReactNode
-  // confirm function  memoize the callback function. It's an alternative function
-  confirmationHandler?: () => Promise<boolean | undefined>
-  disabledButtons?: boolean
   title?: string
   content?: string | ReactNode
   onClose?: () => void
@@ -40,9 +37,7 @@ export function ConfirmModal({
   type = 'default',
   children,
   onClose,
-  confirmationHandler,
   title,
-  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -57,16 +52,10 @@ export function ConfirmModal({
     setIsOpen(() => true)
   }
 
-  const handleConfirmation = async (e) => {
+  const handleConfirmation = (e) => {
     e.stopPropagation()
-    if (!actionRef.current && !confirmationHandler) return
-    if (confirmationHandler) {
-      const res = await confirmationHandler()
-      if (res) {
-        setIsOpen(() => false)
-      }
-      return
-    }
+    if (!actionRef.current) return
+
     actionRef.current()
     setIsOpen(() => false)
   }
@@ -88,43 +77,40 @@ export function ConfirmModal({
         onHide={handleClose}
         animation={false}
         centered
-        contentClassName='rounded'
-        className='confirm-modal'
+        contentClassName="rounded"
+        className="confirm-modal"
       >
-        <ModalHeader className='align-items-center border-0'>
-          <ModalTitle as='h6'>
+        <ModalHeader className="align-items-center border-0">
+          <ModalTitle as="h6">
             {title ?? t('pleaseConfirmThisAction')}
           </ModalTitle>
 
           <Button
-            variant='danger'
-            className='btn-sm rounded'
-            disabled={disabledButtons}
+            variant="danger"
+            className="btn-sm rounded"
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
             <FaTimes size={16} />
           </Button>
         </ModalHeader>
-        <ModalBody className='confirmation-modal-body'>
+        <ModalBody className="confirmation-modal-body">
           {content ?? t('areUSureYouWantToPerformThisAction')}
         </ModalBody>
         {!hideButtons && (
-          <ModalFooter className='border-0'>
+          <ModalFooter className="border-0">
             {type === ConfirmModalType.remove ? (
               <>
                 <Button
-                  variant='outline'
-                  className='cancel-button'
+                  variant="outline"
+                  className="cancel-button"
                   onClick={handleClose}
-                  disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('cancel')}
                 </Button>
                 <Button
-                  variant='danger'
-                  disabled={disabledButtons}
+                  variant="danger"
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -134,16 +120,14 @@ export function ConfirmModal({
             ) : (
               <>
                 <Button
-                  variant='danger'
-                  disabled={disabledButtons}
+                  variant="danger"
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('decline')}
                 </Button>
                 <Button
-                  variant='success'
-                  disabled={disabledButtons}
+                  variant="success"
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >

package/src/modals/dialog/Dialog.tsx

@@ -37,29 +37,29 @@ export const Dialog = ({
         show={isActive}
         onHide={onDecline}
         animation={false}
-        size='sm'
+        size="sm"
         centered
-        className='text-center justify-content-center rounded'
+        className="text-center justify-content-center rounded"
       >
-        <Modal.Header className='justify-content-center border-0'>
-          {title && <Modal.Title as='h6'>{title}</Modal.Title>}
+        <Modal.Header className="justify-content-center border-0 ">
+          {title && <Modal.Title as="h6">{title}</Modal.Title>}
         </Modal.Header>
         {content && (
-          <Modal.Body className='justify-content-center'>{content}</Modal.Body>
+          <Modal.Body className="justify-content-center ">{content}</Modal.Body>
         )}
-        <Modal.Footer className='border-0 justify-content-center'>
+        <Modal.Footer className="border-0 justify-content-center">
           {customButtons || (
             <>
               <Button
-                variant='secondary'
-                className='modal-buttons'
+                variant="secondary"
+                className="modal-buttons"
                 onClick={declineHandler}
               >
                 {t('cancel')}
               </Button>
               <Button
-                variant='primary'
-                className='modal-buttons'
+                variant="primary"
+                className="modal-buttons"
                 onClick={approveHandler}
               >
                 {t('Design:confirm')}

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -51,28 +51,28 @@ export const FullscreenModal = ({
         show={isOpen}
         onHide={handleClose}
         animation={false}
-        className='fullscreen-modal'
-        contentClassName='fullscreen-modal-content'
+        className="fullscreen-modal"
+        contentClassName="fullscreen-modal-content"
       >
         {showHeader && (
-          <ModalHeader className='align-items-center border-0'>
-            {title && <ModalTitle as='h6'>{title}</ModalTitle>}
+          <ModalHeader className="align-items-center border-0">
+            {title && <ModalTitle as="h6">{title}</ModalTitle>}
 
             <Button
-              variant='danger'
-              className='btn-sm rounded'
+              variant="danger"
+              className="btn-sm rounded"
               onClick={handleClose}
             >
               <FaTimes size={16} />
             </Button>
           </ModalHeader>
         )}
-        <ModalBody className='fullscreen-modal-body'>
+        <ModalBody className="fullscreen-modal-body">
           {!showHeader && (
             <Button
               onClick={handleClose}
-              variant='link'
-              className='body-close-button'
+              variant="link"
+              className="body-close-button"
             >
               {t('close')}
             </Button>
@@ -80,7 +80,7 @@ export const FullscreenModal = ({
           {content}
         </ModalBody>
         {showFooter && (
-          <ModalFooter className='border-0'>{footerContent}</ModalFooter>
+          <ModalFooter className="border-0">{footerContent}</ModalFooter>
         )}
       </Modal>
     </>