feat: add disabled prop, arguments for cildren button wrapper, edit i…

…nterfaces

packages/payment-widget/src/hooks/use-fields-state.hook.ts

@@ -3,13 +3,14 @@ import { useCallback }       from 'react'
 import { useState }          from 'react'
 
 import { Field }             from '../interfaces'
+import { FieldsState }       from '../interfaces'
 import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
 import { FieldsNames }       from '../interfaces'
 import { ValidateField }     from '../interfaces'
 
-export const useFieldsState = (validateField: ValidateField, fields?: Field[]) => {
+export const useFieldsState = (validateField: ValidateField, fields?: Field[]): FieldsState => {
   const initialState = fields
     ? fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {})
     : ''

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

@@ -43,3 +43,9 @@ export interface FieldsValidator {
   validateField: ValidateField
   isValidate: boolean
 }
+
+export interface FieldsState {
+  fieldsState: FieldState | string
+  handleChange: HandleChangeField
+  handleBlur: HandleBlurField
+}

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

@@ -1,6 +1,7 @@
-import { ReactNode }   from 'react'
+import { ReactNode }       from 'react'
 
-import { WidgetProps } from './widget.interfaces'
+import { FieldsValidator } from './fields.interfaces'
+import { WidgetProps }     from './widget.interfaces'
 
 export interface FormProps extends WidgetProps {
   useCustomButton: boolean
@@ -9,5 +10,10 @@ export interface FormProps extends WidgetProps {
 }
 
 export interface FormProviderProps {
+  disabled: boolean
   children: ReactNode | ReactNode[]
 }
+
+export interface FormContext extends FieldsValidator {
+  disabled: boolean
+}

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

@@ -4,8 +4,6 @@ export * from './settings.interfaces'
 export * from './receipt.interfaces'
 export * from './styles.interfaces'
 export * from './theme.interfaces'
-export * from './button.interfaces'
-export * from './input.interfaces'
 export * from './theme.interfaces'
 export * from './form.interfaces'
 export * from './wrappers.interfaces'

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

@@ -1,6 +1,6 @@
-import React from 'react'
+import { ReactNode } from 'react'
 
 export interface ThemeProps {
   useCustomTheme: boolean
-  children: React.ReactNode
+  children: ReactNode
 }

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

@@ -1,4 +1,4 @@
-import React               from 'react'
+import { ReactNode }       from 'react'
 
 import { AdditionalField } from './fields.interfaces'
 import { ReceiptSettings } from './receipt.interfaces'
@@ -11,5 +11,6 @@ export interface WidgetProps {
   receipt?: ReceiptSettings
   styles?: Styles
   additionalFields?: AdditionalField[]
-  children: React.ReactNode
+  disabled?: boolean
+  children: ReactNode
 }

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

@@ -11,11 +11,16 @@ interface ChildrenInputProps {
   errorText: string
 }
 
+interface ChildrenButtonProps {
+  type: string
+  disabled: boolean
+}
+
 export interface InputWrapperProps {
   name: string
   children: (props: ChildrenInputProps) => ReactElement
 }
 
 export interface ButtonWrapperProps {
-  children: () => ReactElement
+  children: (props: ChildrenButtonProps) => ReactElement
 }

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

@@ -1,14 +1,14 @@
-import styled                from '@emotion/styled'
+import styled               from '@emotion/styled'
+import { ButtonProps }      from '@atls-ui-parts/button'
 
-import React                 from 'react'
-import { FC }                from 'react'
-import { useHover }          from 'react-laag'
+import React                from 'react'
+import { FC }               from 'react'
+import { useHover }         from 'react-laag'
 
-import { CustomButtonProps } from '../../interfaces'
-import { appearanceStyles }  from './button.styles'
-import { contentStyles }     from './button.styles'
-import { baseStyles }        from './button.styles'
-import { shapeStyles }       from './button.styles'
+import { appearanceStyles } from './button.styles'
+import { contentStyles }    from './button.styles'
+import { baseStyles }       from './button.styles'
+import { shapeStyles }      from './button.styles'
 
 const ButtonElement = styled('button')<any>(
   baseStyles,
@@ -17,7 +17,7 @@ const ButtonElement = styled('button')<any>(
   shapeStyles
 )
 
-export const Button: FC<CustomButtonProps> = ({ children, ...props }) => {
+export const Button: FC<ButtonProps> = ({ children, ...props }) => {
   const [hover, hoverProps] = useHover()
   return (
     <ButtonElement hover={hover} {...hoverProps} {...props}>

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

@@ -23,7 +23,7 @@ export const Form: FC<FormProps> = ({
   children,
 }) => {
   const isLoaded = useInit()
-  const { isValidate } = useForm()
+  const { isValidate, disabled } = useForm()
   const payHandler: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault()
     if (!isValidate) return
@@ -47,7 +47,7 @@ export const Form: FC<FormProps> = ({
       />
       {children}
       {!useCustomButton && (
-        <Button type='submit' disabled={!isLoaded} {...styles?.button}>
+        <Button type='submit' disabled={!isLoaded || disabled} {...styles?.button}>
           <FormattedMessage id='payment_widget.pay' defaultMessage='Оплатить' />
         </Button>
       )}

packages/payment-widget/src/ui/form/form.context.ts

@@ -1,7 +1,7 @@
-import { createContext }   from 'react'
+import { createContext } from 'react'
 
-import { FieldsValidator } from '../../interfaces'
+import { FormContext }   from '../../interfaces'
 
-export const Context = createContext<FieldsValidator | null>(null)
+export const Context = createContext<FormContext | null>(null)
 
 export const { Provider, Consumer } = Context

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

@@ -6,11 +6,11 @@ import { FormProviderProps } from '../../interfaces'
 import { Provider }          from './form.context'
 import { useValidate }       from '../../hooks'
 
-const FormProvider: FC<FormProviderProps> = ({ children }) => {
+const FormProvider: FC<FormProviderProps> = ({ disabled, children }) => {
   const { errors, validateField, isValidate } = useValidate()
   const value = useMemo(
-    () => ({ errors, validateField, isValidate }),
-    [errors, validateField, isValidate]
+    () => ({ errors, validateField, isValidate, disabled }),
+    [errors, validateField, isValidate, disabled]
   )
 
   return <Provider value={value}>{children}</Provider>

packages/payment-widget/src/ui/form/use-form.hook.ts

@@ -1,6 +1,12 @@
-import { useContext }      from 'react'
+import { useContext }  from 'react'
 
-import { FieldsValidator } from '../../interfaces'
-import { Context }         from './form.context'
+import { FormContext } from '../../interfaces'
+import { Context }     from './form.context'
 
-export const useForm = () => useContext(Context) as FieldsValidator
+export const useForm = (): FormContext => {
+  const context = useContext(Context)
+
+  if (!context) throw new Error('Missing form context provider')
+
+  return context
+}

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

@@ -24,6 +24,7 @@ export const Widget: FC<WidgetProps> = ({
   receipt,
   additionalFields,
   styles,
+  disabled,
   children,
 }) => {
   const locale = settings.language ?? LanguagesType.RUSSIAN
@@ -46,7 +47,7 @@ export const Widget: FC<WidgetProps> = ({
         messages={messages[locale]}
         defaultLocale={LanguagesType.RUSSIAN}
       >
-        <FormProvider>
+        <FormProvider disabled={!!disabled}>
           <Form
             amount={amount}
             settings={settings}

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

@@ -1,10 +1,12 @@
 import { FC }                 from 'react'
 
 import { ButtonWrapperProps } from '../../interfaces'
+import { useForm }            from '../form'
 
 export const ButtonWrapper: FC<ButtonWrapperProps> = ({ children }) => {
+  const { disabled } = useForm()
   if (typeof children === 'function') {
-    return children()
+    return children({ type: 'submit', disabled })
   }
 
   return null