@licklist/design 0.69.1 → 0.69.3-dev.0

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

@@ -38,7 +38,7 @@ export interface RyftPaymentFormProps {
   isCreateLoading: boolean
   isAppUsingInIframe?: boolean
   onApplePayButtonClick?: () => void
-  applePayButtonDisabled?: boolean
+  payButtonDisabled?: boolean
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void,
@@ -57,6 +57,7 @@ export const RyftPaymentForm = ({
   initRyft,
   resetReferrer,
   onSubmit,
+  payButtonDisabled,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(['Design', 'Validation', 'Ryft'])
   const formRef = useRef<HTMLFormElement | null>(null)
@@ -89,7 +90,6 @@ export const RyftPaymentForm = ({
 
   const handleSubmit = async () => {
     setIsBtnDisabled(true)
-
     try {
       const paymentSession = await onSubmit()
 
@@ -142,17 +142,21 @@ export const RyftPaymentForm = ({
         t,
         isAppUsingInIframe,
         onApplePayButtonClick,
+        isDisableButton: !payButtonDisabled,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length, showApplePayButton],
+    [
+      formRef.current?.childNodes?.length,
+      showApplePayButton,
+      payButtonDisabled,
+    ],
   )
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
-
     initRyft(
       () => {
         addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
@@ -169,15 +173,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 +191,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 +214,23 @@ 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='form-disable-box' id="form-disable-box"/>
+        <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/iframe/ryft/utils/ryft-form.ts

@@ -7,6 +7,7 @@ interface InjectComponentsInRyftForm
     'onApplePayButtonClick' | 'isAppUsingInIframe'
   > {
   t: TFunction<string[]>
+  isDisableButton?: boolean
   additionalPaymentMethodsEnabled?: boolean
 }
 
@@ -14,16 +15,19 @@ export const injectComponentsInRyftForm = ({
   t,
   additionalPaymentMethodsEnabled,
   isAppUsingInIframe,
+  isDisableButton,
   onApplePayButtonClick,
 }: InjectComponentsInRyftForm) => {
   const cardContainer = document.getElementById('ryft-pay-iframe')
-
   if (!cardContainer) {
     return
   }
   // Removing of the old title container
   document.getElementById('card-title-container')?.remove()
 
+  cardContainer.style.opacity = isDisableButton ? '0.6' : '1'
+  cardContainer.ariaDisabled = isDisableButton?.toString()
+
   const cardTitle = document.createElement('div')
   const cardText = document.createElement('div')
   const cardTitleContainer = document.createElement('div')
@@ -35,7 +39,6 @@ export const injectComponentsInRyftForm = ({
   cardContainer?.before(cardTitleContainer)
 
   const payGrid = document.getElementById('ryft-pay-grid')
-
   if (!payGrid || !additionalPaymentMethodsEnabled) {
     return
   }
@@ -58,6 +61,27 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
+  const payIframe = document.getElementById("ryft-pay-iframe");
+  if (payIframe) {
+    const formBox = document.getElementById('form-disable-box')
+    if (formBox) {
+      formBox.style.display = isDisableButton ? "block" : "none"
+    }
+
+    const googleButton = document.getElementById(
+      'gpay-button-online-api-id',
+    ) as HTMLButtonElement
+    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    if (googleButton) {
+      googleButton.disabled = isDisableButton
+      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+    }
+    if (appleButton) {
+      appleButton.disabled = isDisableButton
+      appleButton.style.opacity = isDisableButton ? '1' : '0.6'
+    }
+  }
+
   if (isAppUsingInIframe) {
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'

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[]

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>