fix: imports, interfaces

packages/payment-widget/src/hooks/use-fields-render.hook.tsx

@@ -4,12 +4,13 @@ import { Layout }            from '@atls-ui-parts/layout'
 import React                 from 'react'
 import { useIntl }           from 'react-intl'
 
+import { CustomInputProps }  from '../interfaces'
 import { Field }             from '../interfaces'
 import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
 import { FieldsErrors }      from '../interfaces'
-import { CustomInput }       from '../interfaces/custom-elements.interfaces'
+import { CustomInput }       from '../interfaces'
 import { MemoizedInput }     from '../ui'
 import { translate }         from '../utils/translate.util'
 
@@ -20,15 +21,15 @@ export const useFieldsRenderer = (
   handleChange: HandleChangeField,
   handleBlur: HandleBlurField,
   inputGaps: number,
-  customInput: CustomInput | undefined
+  customInput?: CustomInput
 ) => {
   const intl = useIntl()
 
   return fields.map((field, index, currentFields) => {
     const translatePlaceholder = translate(intl, field.placeholder, field.placeholder)
     const translateError = translate(intl, errors[field.name], errors[field.name])
     const isNotLastField = index !== currentFields.length - 1
-    const inputProps = {
+    const inputProps: CustomInputProps = {
       type: field.type ?? 'text',
       name: field.name,
       placeholder: translatePlaceholder,

packages/payment-widget/src/interfaces/button.interfaces.ts

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface CustomButtonProps {
+  type: string
+  disabled: boolean
+  children?: React.ReactNode
+}

packages/payment-widget/src/interfaces/custom-elements.interfaces.ts

@@ -1,25 +1,7 @@
-import React                 from 'react'
 import { FC }                from 'react'
 
-import { HandleBlurField }   from './fields.interfaces'
-import { HandleChangeField } from './fields.interfaces'
-
-interface CustomInputProps {
-  type: string
-  name: string
-  placeholder: string
-  required: boolean
-  value: string
-  errorText: string
-  onChangeNative: HandleChangeField
-  onBlur: HandleBlurField
-}
-
-export interface CustomButtonProps {
-  type: string
-  disabled: boolean
-  children?: React.ReactNode
-}
+import { CustomButtonProps } from './button.interfaces'
+import { CustomInputProps }  from './input.interfaces'
 
 export type CustomInput = FC<CustomInputProps>
 export type CustomButton = FC<CustomButtonProps>

packages/payment-widget/src/interfaces/index.ts

@@ -3,3 +3,7 @@ export * from './fields.interfaces'
 export * from './settings.interfaces'
 export * from './receipt.interfaces'
 export * from './styles.interfaces'
+export * from './custom-elements.interfaces'
+export * from './theme.interfaces'
+export * from './button.interfaces'
+export * from './input.interfaces'

packages/payment-widget/src/interfaces/input.interfaces.ts

@@ -0,0 +1,13 @@
+import { HandleBlurField }   from './fields.interfaces'
+import { HandleChangeField } from './fields.interfaces'
+
+export interface CustomInputProps {
+  type: string
+  name: string
+  placeholder: string
+  required: boolean
+  value: string
+  errorText: string
+  onChangeNative: HandleChangeField
+  onBlur: HandleBlurField
+}

packages/payment-widget/src/ui/button/button.component.tsx

@@ -4,7 +4,7 @@ import React                 from 'react'
 import { FC }                from 'react'
 import { useHover }          from 'react-laag'
 
-import { CustomButtonProps } from '../../interfaces/custom-elements.interfaces'
+import { CustomButtonProps } from '../../interfaces'
 import { appearanceStyles }  from './button.styles'
 import { contentStyles }     from './button.styles'
 import { baseStyles }        from './button.styles'

packages/payment-widget/src/ui/form.component.tsx

@@ -2,6 +2,7 @@ import React                    from 'react'
 import { FormEventHandler }     from 'react'
 import { FormattedMessage }     from 'react-intl'
 
+import { CustomButtonProps }    from '../interfaces'
 import { WidgetProps }          from '../interfaces'
 import { Button }               from './button/button.component'
 import { Fields }               from './fields.component'
@@ -32,7 +33,7 @@ export const Form = ({
       makePayment(event)
     }
   }
-  const buttonProps = {
+  const buttonProps: CustomButtonProps = {
     type: 'submit',
     disabled: !isLoaded || !!disabled,
   }

packages/payment-widget/src/ui/theme/src/theme.provider.tsx

@@ -5,7 +5,7 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
 import React                                     from 'react'
 import { FC }                                    from 'react'
 
-import { ThemeProps }                            from '../../../interfaces/theme.interfaces'
+import { ThemeProps }                            from '../../../interfaces'
 
 export const ThemeProvider: FC<ThemeProps> = ({ useCustomTheme, children }) =>
   useCustomTheme ? (