@licklist/design 0.78.5-dev.8 → 0.78.5-dev.80

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -135,31 +135,38 @@ export const RyftPaymentForm = ({
     }
   }
 
-  useEffect(
-    () => {
-      if (
-        !formRef.current?.childNodes?.length ||
-        formRef.current?.childNodes?.length < 3 ||
-        !accountId.data?.account_id
-      ) {
-        return
-      }
-      injectComponentsInRyftForm({
-        t,
-        isAppUsingInIframe,
-        onApplePayButtonClick,
-        isDisableButton: !payButtonDisabled,
-        additionalPaymentMethodsEnabled:
-          providerPaymentSettings?.additionalPaymentMethodsEnabled,
-      })
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      formRef.current?.childNodes?.length,
-      showApplePayButton,
-      payButtonDisabled,
-    ],
-  )
+
+  useEffect(() => {
+    const formBox = document.getElementById('form-disable-box')
+    const cardContainer = document.getElementById('ryft-pay-iframe')
+
+    const googleButton = document.getElementById(
+      'gpay-button-online-api-id',
+    ) as HTMLButtonElement | null
+
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement | null
+
+    if (cardContainer) {
+      cardContainer.style.opacity = payButtonDisabled ? '0.6' : '1'
+      cardContainer.setAttribute('aria-disabled', payButtonDisabled.toString())
+    }
+
+    if (googleButton) {
+      googleButton.disabled = payButtonDisabled
+      googleButton.style.opacity = payButtonDisabled ? '0.6' : '1'
+    }
+
+    if (appleButton) {
+      appleButton.disabled = payButtonDisabled
+      appleButton.style.opacity = payButtonDisabled ? '0.6' : '1'
+    }
+
+    if (formBox) {
+      formBox.style.display = payButtonDisabled ? 'block' : 'none'
+    }
+  }, [payButtonDisabled])
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
@@ -183,6 +190,29 @@ export const RyftPaymentForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accountId.data?.account_id])
 
+
+    useEffect(
+    () => {
+      if (
+        !formRef.current?.childNodes?.length ||
+        formRef.current?.childNodes?.length < 3 ||
+        !accountId.data?.account_id
+      ) {
+        return
+      }
+      injectComponentsInRyftForm({
+        t,
+        isAppUsingInIframe,
+        onApplePayButtonClick,
+        isDisableButton: !payButtonDisabled,
+        additionalPaymentMethodsEnabled:
+          providerPaymentSettings?.additionalPaymentMethodsEnabled,
+      })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formRef.current?.childNodes?.length, showApplePayButton, payButtonDisabled],
+  )
+
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (
       <div className='mt-5 pt-5'>

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,22 +61,20 @@ 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')
+  const payIframe = document.getElementById("ryft-pay-iframe");
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? 'block' : 'none'
+      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
+    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -88,6 +86,7 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
+    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { FormProvider, useForm } from 'react-hook-form'
 import { FaBars } from 'react-icons/fa'
 import { ImageRadioInput, ImageRadioInputProps } from './ImageRadioInput'

package/src/index.ts

@@ -20,7 +20,27 @@ export * from './snippet'
 export * from './sortable-fields'
 export * from './sortable-list'
 export * from './sortable-tree'
-export * from './static'
+export * as Images from './static/images'
+export * from './static/TextField'
+export * from './static/loader'
+export * from './static/number-input'
+export * from './static/switch'
+export * from './static/text-expand'
+export { Tabs } from './static/tabs'
+export type { TabsProps } from './static/tabs'
+export { default as CountrySelect } from './static/CountrySelect'
+export { default as FormCard } from './static/FormCard'
+export { default as Image } from './static/Image'
+export { default as SocialButton } from './static/SocialButton'
+export { default as StyledButton } from './static/StyledButton'
+export { default as RestrictedAccess } from './static/RestrictedAccess'
+export { default as WarningMessage } from './static/WarningMessage'
+export * from './static/date-range-input'
+export { ManualDatePicker } from './static/manual-date-picker'
+export type { ManualDatePickerProps } from './static/manual-date-picker'
+export { CurrencyNumberInput } from './static/CurrencyNumberInput'
+export type { CurrencyNumberInputProps } from './static/CurrencyNumberInput'
+export * from './static/form-number-input'
 export * from './table'
 export * from './typeahead'
 export * from './tiptap-editor'
@@ -29,7 +49,8 @@ export * from './report'
 export * from './venue-map-sets'
 export * from './affiliate'
 export * from './typeahead-helper'
-export * from './zone'
+export { ZoneForm } from './zone/form'
+export type { ZoneFormProps } from './zone/form'
 export * from './resource'
 export * from './virtualized'
 export * from './customers'
@@ -43,3 +64,25 @@ export * from './availability-indicator'
 export * from './number-of-people-input'
 export * from './fullscreen-loader'
 export * from './pages'
+export { default as RadioButton } from './customRadioButton/RadioButton'
+export * from './PageNotFound'
+export * from './UnderMaintenance'
+export * from './v2/dashboard-analytics'
+export {
+  DashboardLayout,
+  type DashboardLayoutProps,
+  type DestinationType,
+  ProviderSidebar,
+  type ProviderSidebarProps,
+  type NavItem,
+  AdminSidebar,
+  type AdminSidebarProps,
+  TopNavigation,
+  type TopNavigationProps,
+  DashboardFooter,
+  type DashboardFooterProps,
+} from './v2/navigation/DashboardLayout'
+export * from './v2/pages/Settings'
+export * from './v2/pages/ZonesResources'
+export * from './v2/pages/SettingsSubPage'
+export * from './v2/components'

package/src/logo/Logo.stories.tsx

@@ -1,4 +1,3 @@
-import { color } from '@storybook/addon-knobs'
 import Logo from './Logo'
 import { ReactComponent as BookeditLogoSvg } from '../assets/logo/bookedit.svg'
 import { ReactComponent as LicklistLogoSvg } from '../assets/logo/licklist.svg'
@@ -36,19 +35,23 @@ Bookedit.story = {
   },
 }
 
-export const ColouredLogos = () => (
-  <>
-    <p>
-      <Logo
-        logo={<LicklistLogoSvg color={color('color', 'red')} />}
-        logoSm={<LicklistLogoSmSvg color={color('color', 'red')} />}
-      />
-    </p>
-    <p>
-      <Logo logo={<BookeditLogoSvg color={color('color', 'red')} />} />
-    </p>
-  </>
-)
+export const ColouredLogos = () => {
+  const logoColor = 'red' // You can make this configurable with Storybook controls if needed
+
+  return (
+    <>
+      <p>
+        <Logo
+          logo={<LicklistLogoSvg color={logoColor} />}
+          logoSm={<LicklistLogoSmSvg color={logoColor} />}
+        />
+      </p>
+      <p>
+        <Logo logo={<BookeditLogoSvg color={logoColor} />} />
+      </p>
+    </>
+  )
+}
 
 ColouredLogos.story = {
   name: 'Coloured logos',

package/src/modals/confirmation/ConfirmModal.tsx

@@ -91,7 +91,12 @@ export function ConfirmModal({
         contentClassName='rounded'
         className='confirm-modal'
       >
-        <ModalHeader className='align-items-center border-0'>
+        <ModalHeader 
+          className='align-items-center border-0'
+          placeholder={undefined}
+          onPointerEnterCapture={undefined}
+          onPointerLeaveCapture={undefined}
+        >
           <ModalTitle as='h6'>
             {title ?? t('pleaseConfirmThisAction')}
           </ModalTitle>

package/src/modals/confirmation/Confirmation.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+import { Meta, Story } from '@storybook/react-vite'
+// TODO: Replace knobs with controls
 import { ConfirmModal, ConfirmModalProps } from './ConfirmModal'
 
 export default {
@@ -9,7 +9,8 @@ export default {
 
 export const Default: Story<ConfirmModalProps> = (args) => {
   const onConfirm = () => alert('confirmed')
-  const showButtons = boolean('showButtons', true)
+  // TODO: Replace with Storybook controls
+  const showButtons = true
 
   return (
     <ConfirmModal {...args} hideButtons={showButtons}>

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -55,7 +55,12 @@ export const FullscreenModal = ({
         contentClassName='fullscreen-modal-content'
       >
         {showHeader && (
-          <ModalHeader className='align-items-center border-0'>
+          <ModalHeader 
+            className='align-items-center border-0'
+            placeholder={undefined}
+            onPointerEnterCapture={undefined}
+            onPointerLeaveCapture={undefined}
+          >
             {title && <ModalTitle as='h6'>{title}</ModalTitle>}
 
             <Button

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { EventVenueMap } from '../../events/event-venue-map'
 import { FullscreenModal, FullscreenModalProps } from './FullscreenModal'
 

package/src/notification/components/NotificationPlaceholders.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import {
   NotificationPlaceholders,
@@ -17,6 +17,10 @@ export const Empty: Story<NotificationPlaceholdersProps> = (args) => (
   <NotificationPlaceholders {...args} />
 )
 
+Empty.args = {
+  placeholders: [],
+}
+
 Default.args = {
   placeholders: [
     { value: 'user.first_name', description: 'Customers first name' },

package/src/notification/components/NotificationPlaceholders.tsx

@@ -7,7 +7,7 @@ export interface NotificationPlaceholdersProps {
 }
 
 export const NotificationPlaceholders = ({
-  placeholders,
+  placeholders = [],
 }: NotificationPlaceholdersProps) => {
   const { t } = useTranslation('Design')
 

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { EmailTemplateCard, EmailTemplateCardProps } from './EmailTemplateCard'
 

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -122,7 +122,7 @@ export const EmailTemplateControl = forwardRef(
       setIsIncludePDF(true)
     }, [options])
 
-    const handleDeleteEmailImage = (content) => {
+    const handleDeleteEmailImage = (content: any) => {
       const imgUrl = content.item.values.src.url
 
       if (imgUrl.includes('unlayer')) return
@@ -214,7 +214,6 @@ export const EmailTemplateControl = forwardRef(
               name='type'
               required
               isInvalid={Boolean(errors.type)}
-              placeholder={t('Design:type')}
               disabled={!!id}
             >
               <option value=''>{t('Design:choose')}</option>
@@ -286,15 +285,15 @@ export const EmailTemplateControl = forwardRef(
           </Form.Group>
         </Row>
 
-        { !waiverType && (<Row>
+       <Row>
           <Form.Group as={Col}>
-            <Form.Check
+           {!waiverType && (<Form.Check
               {...register('isActive')}
               name='isActive'
               label={t('Design:active')}
               id='formGroupIsActive'
               custom
-            />
+            />)}
             <Form.Check
               {...register('isDefault')}
               name='isDefault'
@@ -303,7 +302,7 @@ export const EmailTemplateControl = forwardRef(
               custom
             />
           </Form.Group>
-        </Row>)}
+        </Row>
         <Row className='mb-4'>
           <Form.Group as={Col}>
             <Form.Label>{t('Design:emailBody')}</Form.Label>
@@ -375,9 +374,9 @@ export const EmailTemplateControl = forwardRef(
                   )
                 }
                 // should show dropdown only if user want to include PDF file
-                if (option.type === OPTION_TYPE.files_selector) {
+                if (option.type === OPTION_TYPE.files_selector && !waiverType) {
                    const fileSelectors =  option?.defaultValue ? JSON.parse(option.defaultValue) : ''
-                  const fileNames = Object.values(fileSelectors)
+                  const fileNames = Object.values(fileSelectors) || []
                   const fileKeys = Object.keys(fileSelectors)
 
                   return (
@@ -415,7 +414,7 @@ export const EmailTemplateControl = forwardRef(
                                 value={String(fileType)}
                                 key={String(fileType)}
                               >
-                                {fileNames[index]}
+                                {String(fileNames[index])}
                               </option>
                             ))}
                           </Form.Control>
@@ -436,7 +435,6 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
-                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/notification/email-template/form/EmailTemplateForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { EmailTemplateForm, EmailTemplateProps } from './EmailTemplateForm'
 

package/src/notification/send-email-template/SendEmailTemplateForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import {
   SendEmailTemplateForm,

package/src/notification/sms-template/card/SmsTemplateCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { SmsTemplateCard, SmsTemplateCardProps } from './SmsTemplateCard'
 

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -33,8 +33,6 @@ export function SmsTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal

package/src/notification/sms-template/control/SmsTemplateControl.tsx

@@ -43,7 +43,6 @@ export const SmsTemplateControl = ({
             name='type'
             required
             isInvalid={Boolean(errors.type)}
-            placeholder={t('Design:type')}
             disabled={!!id}
           >
             <option value=''>{t('Design:choose')}</option>

package/src/notification/sms-template/form/SmsTemplateForm.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { SmsTemplateForm, SmsTemplateProps } from './SmsTemplateForm'
 

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Meta } from '@storybook/react'
+import { Meta } from '@storybook/react-vite'
 import { RenderNumberOfPeopleInputComponent } from './RenderNumberOfPeopleInputComponent'
 
 export default {

package/src/product-set/card/ProductSetCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { ProductSetCard, ProductSetCardProps } from './ProductSetCard'
 

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/control/ProductSetRecurrenceControl.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   ProductSetRecurrenceControl,

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/elements/Elements.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { DeleteFieldButton, DeleteFieldButtonProps } from './DeleteFieldButton'
 
 export default {