From e1228332714cd3b339042b94fbc466e2e240ac9b Mon Sep 17 00:00:00 2001
From: Ilya Frolov <absolem.dev@gmail.com>
Date: Fri, 24 Nov 2023 11:05:27 +0400
Subject: [PATCH] feat: add disabled prop, arguments for cildren button
 wrapper, edit interfaces

---
 .../src/hooks/use-fields-state.hook.ts        |  3 +-
 .../src/interfaces/button.interfaces.ts       |  7 ---
 .../src/interfaces/fields.interfaces.ts       |  6 ++
 .../src/interfaces/form.interfaces.ts         | 10 +++-
 .../payment-widget/src/interfaces/index.ts    |  2 -
 .../src/interfaces/input.interfaces.ts        | 13 -----
 .../src/interfaces/theme.interfaces.ts        |  4 +-
 .../src/interfaces/widget.interfaces.ts       |  5 +-
 .../src/interfaces/wrappers.interfaces.ts     |  7 ++-
 .../src/ui/button/button.component.tsx        | 20 +++----
 packages/payment-widget/src/ui/form.test.tsx  | 58 -------------------
 .../src/ui/form/form.component.tsx            |  4 +-
 .../src/ui/form/form.context.ts               |  6 +-
 .../src/ui/form/form.provider.tsx             |  6 +-
 .../src/ui/form/use-form.hook.ts              | 14 +++--
 .../src/ui/widget.component.tsx               |  3 +-
 .../ui/wrapper/button-wrapper.component.tsx   |  4 +-
 17 files changed, 60 insertions(+), 112 deletions(-)
 delete mode 100644 packages/payment-widget/src/interfaces/button.interfaces.ts
 delete mode 100644 packages/payment-widget/src/interfaces/input.interfaces.ts
 delete mode 100644 packages/payment-widget/src/ui/form.test.tsx

diff --git a/packages/payment-widget/src/hooks/use-fields-state.hook.ts b/packages/payment-widget/src/hooks/use-fields-state.hook.ts
index e97180f..16ee872 100644
--- a/packages/payment-widget/src/hooks/use-fields-state.hook.ts
+++ b/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]: '' }), {})
     : ''
diff --git a/packages/payment-widget/src/interfaces/button.interfaces.ts b/packages/payment-widget/src/interfaces/button.interfaces.ts
deleted file mode 100644
index 7f05dc7..0000000
--- a/packages/payment-widget/src/interfaces/button.interfaces.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-export interface CustomButtonProps {
-  type: string
-  disabled: boolean
-  children?: React.ReactNode
-}
diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts
index c0ade9f..532ea6e 100644
--- a/packages/payment-widget/src/interfaces/fields.interfaces.ts
+++ b/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
+}
diff --git a/packages/payment-widget/src/interfaces/form.interfaces.ts b/packages/payment-widget/src/interfaces/form.interfaces.ts
index 3d9c278..6ee4546 100644
--- a/packages/payment-widget/src/interfaces/form.interfaces.ts
+++ b/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
+}
diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts
index a6fbe3e..01e66e7 100644
--- a/packages/payment-widget/src/interfaces/index.ts
+++ b/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'
diff --git a/packages/payment-widget/src/interfaces/input.interfaces.ts b/packages/payment-widget/src/interfaces/input.interfaces.ts
deleted file mode 100644
index 3f2d2fc..0000000
--- a/packages/payment-widget/src/interfaces/input.interfaces.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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
-}
diff --git a/packages/payment-widget/src/interfaces/theme.interfaces.ts b/packages/payment-widget/src/interfaces/theme.interfaces.ts
index 686f45c..6f8c03d 100644
--- a/packages/payment-widget/src/interfaces/theme.interfaces.ts
+++ b/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
 }
diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts
index 74e0306..a437234 100644
--- a/packages/payment-widget/src/interfaces/widget.interfaces.ts
+++ b/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
 }
diff --git a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts
index ac9c28b..6ea83c5 100644
--- a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts
+++ b/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
 }
diff --git a/packages/payment-widget/src/ui/button/button.component.tsx b/packages/payment-widget/src/ui/button/button.component.tsx
index 77ce9fb..1544211 100644
--- a/packages/payment-widget/src/ui/button/button.component.tsx
+++ b/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}>
diff --git a/packages/payment-widget/src/ui/form.test.tsx b/packages/payment-widget/src/ui/form.test.tsx
deleted file mode 100644
index e17d54b..0000000
--- a/packages/payment-widget/src/ui/form.test.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// /**
-//  * @jest-environment jsdom
-//  */
-
-// import { matchers }      from '@emotion/jest'
-// import { RenderResult }  from '@testing-library/react'
-// import { fireEvent }     from '@testing-library/react'
-// import { render }        from '@testing-library/react'
-// import { screen }        from '@testing-library/react'
-
-// import React            from 'react'
-// import { IntlProvider } from 'react-intl'
-// import { theme }        from './theme/src'
-// import { ThemeProvider }        from './theme/src'
-// import { Settings }     from '../interfaces'
-// import { Form }         from './form.component'
-
-// expect.extend(matchers)
-
-// type CustomRender = (element: React.ReactNode | React.ReactNode[]) => RenderResult
-
-// global.ResizeObserver = jest.fn().mockImplementation(() => ({
-//   observe: jest.fn(),
-//   unobserve: jest.fn(),
-//   disconnect: jest.fn(),
-// }))
-
-// const customRender: CustomRender = (element) => {
-//   return render(
-//     // @ts-ignore
-//     <ThemeProvider>
-//       <IntlProvider locale='ru' onError={() => {}}>
-//         {element}
-//       </IntlProvider>
-//     </ThemeProvider>
-//   )
-// }
-
-// describe('Form fragment', () => {
-//   const settings: Settings = {
-//     storeId: '123'
-//   }
-
-//   it.only('button reacts to filled in amount', () => {
-//     customRender(<Form settings={settings} />)
-
-//     const button = screen.getByRole('button', { name: 'Оплатить' })
-
-//     expect(button).toBeTruthy()
-//     expect(button).toHaveStyleRule('background-color', theme.colors.button.disabled.backgroundColor)
-
-//     const input = screen.getByPlaceholderText('payment_widget.order_price')
-
-//     fireEvent.change(input, { target: { value: '100' }})
-
-//     expect(screen.getByRole('button', { name: 'Оплатить' })).toHaveStyleRule('background-color', theme.colors.button.default.backgroundColor)
-//   })
-// })
diff --git a/packages/payment-widget/src/ui/form/form.component.tsx b/packages/payment-widget/src/ui/form/form.component.tsx
index 9cc66da..f562a07 100644
--- a/packages/payment-widget/src/ui/form/form.component.tsx
+++ b/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>
       )}
diff --git a/packages/payment-widget/src/ui/form/form.context.ts b/packages/payment-widget/src/ui/form/form.context.ts
index 80299ba..1a496b5 100644
--- a/packages/payment-widget/src/ui/form/form.context.ts
+++ b/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
diff --git a/packages/payment-widget/src/ui/form/form.provider.tsx b/packages/payment-widget/src/ui/form/form.provider.tsx
index 816ae43..36a2a3b 100644
--- a/packages/payment-widget/src/ui/form/form.provider.tsx
+++ b/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>
diff --git a/packages/payment-widget/src/ui/form/use-form.hook.ts b/packages/payment-widget/src/ui/form/use-form.hook.ts
index 5ed6384..0538c80 100644
--- a/packages/payment-widget/src/ui/form/use-form.hook.ts
+++ b/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
+}
diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx
index 08a9c99..7380ecd 100644
--- a/packages/payment-widget/src/ui/widget.component.tsx
+++ b/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}
diff --git a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx
index b441f0d..6f3a80d 100644
--- a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx
+++ b/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