@licklist/design 0.68.5 → 0.68.6-dev.0

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 { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]
@@ -24,4 +24,5 @@ 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,6 +20,9 @@ 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
@@ -37,7 +40,9 @@ export function ConfirmModal({
   type = 'default',
   children,
   onClose,
+  confirmationHandler,
   title,
+  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -52,10 +57,16 @@ export function ConfirmModal({
     setIsOpen(() => true)
   }
 
-  const handleConfirmation = (e) => {
+  const handleConfirmation = async (e) => {
     e.stopPropagation()
-    if (!actionRef.current) return
-
+    if (!actionRef.current && !confirmationHandler) return
+    if (confirmationHandler) {
+      const res = await confirmationHandler()
+      if (res) {
+        setIsOpen(() => false)
+      }
+      return
+    }
     actionRef.current()
     setIsOpen(() => false)
   }
@@ -77,40 +88,43 @@ 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"
+            variant='danger'
+            className='btn-sm rounded'
+            disabled={disabledButtons}
             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"
+                  variant='danger'
+                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -120,14 +134,16 @@ export function ConfirmModal({
             ) : (
               <>
                 <Button
-                  variant="danger"
+                  variant='danger'
+                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('decline')}
                 </Button>
                 <Button
-                  variant="success"
+                  variant='success'
+                  disabled={disabledButtons}
                   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>
     </>

package/src/modals/fullscreen/FulscreenModal.stories.tsx

@@ -40,8 +40,8 @@ export const DefaultWithBodyContent: Story<FullscreenModalProps> = (args) => {
       content={
         <>
           <EventVenueMap
-            url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
-            name="Underground zone"
+            url='https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s'
+            name='Underground zone'
           />
         </>
       }

package/src/notification/components/NotificationPlaceholders.tsx

@@ -17,17 +17,17 @@ export const NotificationPlaceholders = ({
     <>
       <Row>
         <Col xs={12}>
-          <span className="mt-5">{t('Design:placeholdersDesc')}</span>
+          <span className='mt-5'>{t('Design:placeholdersDesc')}</span>
         </Col>
       </Row>
-      <Card className="mb-3 mt-3">
+      <Card className='mb-3 mt-3'>
         <Card.Body>
           <Row>
             <Col xs={12}>
               {placeholders.map((placeholder) => (
-                <div className="placeholder-row mb-3" key={placeholder.value}>
-                  <span className="placeholder-value">{`${placeholder.value} - `}</span>
-                  <span className="placeholder-desc">
+                <div className='placeholder-row mb-3' key={placeholder.value}>
+                  <span className='placeholder-value'>{`${placeholder.value} - `}</span>
+                  <span className='placeholder-desc'>
                     {placeholder.description}
                   </span>
                 </div>

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -33,8 +33,8 @@ export function EmailTemplateCard({
   const texts = useTranslatedParameters({ isDefault, isActive })
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal
@@ -46,8 +46,8 @@ export function EmailTemplateCard({
           >
             {(confirm) => (
               <button
-                type="button"
-                className="snippet-template-card-button"
+                type='button'
+                className='snippet-template-card-button'
                 onClick={(e) => {
                   e.stopPropagation()
                   confirm(onRemove)
@@ -59,18 +59,18 @@ export function EmailTemplateCard({
           </ConfirmModal>
         )}
         <button
-          type="button"
-          className="snippet-template-card-button"
+          type='button'
+          className='snippet-template-card-button'
           onClick={onDuplicate}
         >
           <FaCopy />
         </button>
       </div>
       <div className={`mt-${isDefault ? '3' : '4'}`}>
-        {!!texts.length && <p className="mb-1">{texts}</p>}
-        <div className="d-flex flex-column">
-          <span className="snippet-template-card-subject">{subject}</span>
-          <p className="mb-0">
+        {!!texts.length && <p className='mb-1'>{texts}</p>}
+        <div className='d-flex flex-column'>
+          <span className='snippet-template-card-subject'>{subject}</span>
+          <p className='mb-0'>
             {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
           </p>
         </div>