From be63fa6ce37d1779b0edfa1efa079c73a5eca395 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 15 Nov 2023 15:47:19 +0400 Subject: [PATCH 01/25] feat(theme): add property customTheme, Theme interface --- packages/payment-widget/src/interfaces/index.ts | 1 + .../payment-widget/src/interfaces/theme.interfaces.ts | 3 +++ .../src/interfaces/widget.interfaces.ts | 2 ++ .../src/ui/theme/src/theme.provider.tsx | 4 ++-- packages/payment-widget/src/ui/widget.component.tsx | 11 +++++++++-- 5 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 packages/payment-widget/src/interfaces/theme.interfaces.ts diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index b48e070..dc6caa0 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/packages/payment-widget/src/interfaces/index.ts @@ -3,3 +3,4 @@ export * from './fields.interfaces' export * from './settings.interfaces' export * from './receipt.interfaces' export * from './styles.interfaces' +export * from './theme.interfaces' diff --git a/packages/payment-widget/src/interfaces/theme.interfaces.ts b/packages/payment-widget/src/interfaces/theme.interfaces.ts new file mode 100644 index 0000000..9fcf555 --- /dev/null +++ b/packages/payment-widget/src/interfaces/theme.interfaces.ts @@ -0,0 +1,3 @@ +export interface Theme { + [key: string]: string | Theme +} diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts index 2f81291..337af57 100644 --- a/packages/payment-widget/src/interfaces/widget.interfaces.ts +++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts @@ -2,6 +2,7 @@ import { AdditionalField } from './fields.interfaces' import { ReceiptSettings } from './receipt.interfaces' import { Settings } from './settings.interfaces' import { Styles } from './styles.interfaces' +import { Theme } from './theme.interfaces' export interface WidgetProps { settings: Settings @@ -9,4 +10,5 @@ export interface WidgetProps { receipt?: ReceiptSettings styles?: Styles additionalFields?: AdditionalField[] + customTheme?: Theme } diff --git a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx index 320b417..ded0b36 100644 --- a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx +++ b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx @@ -4,6 +4,6 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react' import React from 'react' -export const ThemeProvider = ({ children }) => ( - {children} +export const ThemeProvider = ({ customTheme, children }) => ( + {children} ) diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 7e5a591..b0018ef 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -14,11 +14,18 @@ const messages = { [LanguagesType.ENGLISH]: messagesEn, } -export const Widget = ({ amount, settings, receipt, additionalFields, styles }: WidgetProps) => { +export const Widget = ({ + amount, + settings, + receipt, + additionalFields, + styles, + customTheme, +}: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN return ( - + Date: Wed, 15 Nov 2023 15:56:33 +0400 Subject: [PATCH 02/25] feat(form): add disabled property --- .../src/interfaces/widget.interfaces.ts | 1 + packages/payment-widget/src/ui/form.component.tsx | 11 +++++++++-- packages/payment-widget/src/ui/widget.component.tsx | 2 ++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts index 337af57..b2a2fe8 100644 --- a/packages/payment-widget/src/interfaces/widget.interfaces.ts +++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts @@ -11,4 +11,5 @@ export interface WidgetProps { styles?: Styles additionalFields?: AdditionalField[] customTheme?: Theme + disabled?: boolean } diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form.component.tsx index 5f6303d..fa89173 100644 --- a/packages/payment-widget/src/ui/form.component.tsx +++ b/packages/payment-widget/src/ui/form.component.tsx @@ -11,7 +11,14 @@ import { useValidate } from '../hooks' import { makePayment } from '../utils' import { makePaymentWithCheck } from '../utils' -export const Form = ({ settings, amount, receipt, styles, additionalFields }: WidgetProps) => { +export const Form = ({ + settings, + amount, + receipt, + styles, + additionalFields, + disabled, +}: WidgetProps) => { const isLoaded = useInit() const { errors, validateField, isValidate } = useValidate() const payHandler: FormEventHandler = (event) => { @@ -37,7 +44,7 @@ export const Form = ({ settings, amount, receipt, styles, additionalFields }: Wi direction={styles?.direction} inputGaps={styles?.inputGaps} /> - diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index b0018ef..290acfa 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -21,6 +21,7 @@ export const Widget = ({ additionalFields, styles, customTheme, + disabled, }: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN @@ -37,6 +38,7 @@ export const Widget = ({ receipt={receipt} styles={styles} additionalFields={additionalFields} + disabled={disabled} /> From 69211031cd999b25c413814dd83213b6cefeb97e Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Thu, 16 Nov 2023 15:38:52 +0400 Subject: [PATCH 03/25] feat(input, button): customization components, add interfaces --- .../src/hooks/use-fields-render.hook.tsx | 27 +++++++++-------- .../src/interfaces/fields.interfaces.ts | 2 ++ .../src/interfaces/styles.interfaces.ts | 19 +++++++++++- .../src/ui/button/button.component.tsx | 18 +++++------ .../src/ui/fields.component.tsx | 4 ++- .../payment-widget/src/ui/form.component.tsx | 1 + .../src/ui/input/input.component.tsx | 30 ++++++++++++------- 7 files changed, 67 insertions(+), 34 deletions(-) diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx index 2412f07..f6cd705 100644 --- a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx +++ b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx @@ -1,16 +1,17 @@ -import { Condition } from '@atls-ui-parts/condition' -import { Layout } from '@atls-ui-parts/layout' +import { Condition } from '@atls-ui-parts/condition' +import { Layout } from '@atls-ui-parts/layout' -import React from 'react' -import { useIntl } from 'react-intl' +import React from 'react' +import { useIntl } from 'react-intl' -import { Field } from '../interfaces' -import { HandleBlurField } from '../interfaces' -import { FieldState } from '../interfaces' -import { HandleChangeField } from '../interfaces' -import { FieldsErrors } from '../interfaces' -import { MemoizedInput } from '../ui' -import { translate } from '../utils/translate.util' +import { Field } from '../interfaces' +import { InputStyles } from '../interfaces' +import { HandleBlurField } from '../interfaces' +import { FieldState } from '../interfaces' +import { HandleChangeField } from '../interfaces' +import { FieldsErrors } from '../interfaces' +import { MemoizedInput } from '../ui' +import { translate } from '../utils/translate.util' export const useFieldsRenderer = ( fields: Field[], @@ -18,7 +19,8 @@ export const useFieldsRenderer = ( fieldsState: FieldState, handleChange: HandleChangeField, handleBlur: HandleBlurField, - inputGaps: number + inputGaps: number, + styles: InputStyles ) => { const intl = useIntl() @@ -38,6 +40,7 @@ export const useFieldsRenderer = ( errorText={translateError} onChangeNative={handleChange} onBlur={handleBlur} + styles={styles} /> diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts index 2183392..0e1edfa 100644 --- a/packages/payment-widget/src/interfaces/fields.interfaces.ts +++ b/packages/payment-widget/src/interfaces/fields.interfaces.ts @@ -4,6 +4,7 @@ import { HTMLInputTypeAttribute } from 'react' import { AdditionalFieldsType } from '../enums' import { RequiredFieldsType } from '../enums' import { DirectionFields } from './styles.interfaces' +import { InputStyles } from './styles.interfaces' export type FieldsNames = RequiredFieldsType | AdditionalFieldsType export type FieldState = Record @@ -38,4 +39,5 @@ export interface FieldsProps { inputGaps?: number isGenerateReceipt?: boolean additionalFields?: AdditionalField[] + styles?: InputStyles } diff --git a/packages/payment-widget/src/interfaces/styles.interfaces.ts b/packages/payment-widget/src/interfaces/styles.interfaces.ts index 47135b6..d8f528e 100644 --- a/packages/payment-widget/src/interfaces/styles.interfaces.ts +++ b/packages/payment-widget/src/interfaces/styles.interfaces.ts @@ -6,8 +6,25 @@ export enum DirectionFields { Column = 'column', } +export interface InputStyles { + styledArray?: any[] + size?: string + rounding?: { + default: number + active: number + } +} + +export interface ButtonStyles extends ButtonProps { + styledArray?: any[] + size?: string + variant?: string + fill?: boolean +} + export interface Styles { direction?: DirectionFields inputGaps?: number - button?: ButtonProps + button?: ButtonStyles + input?: InputStyles } diff --git a/packages/payment-widget/src/ui/button/button.component.tsx b/packages/payment-widget/src/ui/button/button.component.tsx index 1544211..0e9aec0 100644 --- a/packages/payment-widget/src/ui/button/button.component.tsx +++ b/packages/payment-widget/src/ui/button/button.component.tsx @@ -1,26 +1,26 @@ 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 { ButtonStyles } from '../../interfaces' import { appearanceStyles } from './button.styles' import { contentStyles } from './button.styles' import { baseStyles } from './button.styles' import { shapeStyles } from './button.styles' -const ButtonElement = styled('button')( - baseStyles, - contentStyles, - appearanceStyles, - shapeStyles -) +const ButtonElement = ({ styledArray, ...props }) => { + const StyledButton = styledArray.length + ? styled('button')(...styledArray) + : styled('button')(baseStyles, contentStyles, appearanceStyles, shapeStyles) + return +} -export const Button: FC = ({ children, ...props }) => { +export const Button: FC = ({ children, styledArray, ...props }) => { const [hover, hoverProps] = useHover() return ( - + {children} ) diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx index 2b57790..3182fda 100644 --- a/packages/payment-widget/src/ui/fields.component.tsx +++ b/packages/payment-widget/src/ui/fields.component.tsx @@ -23,6 +23,7 @@ export const Fields = ({ isGenerateReceipt = false, direction = DirectionFields.Column, inputGaps = 16, + styles = {}, }: FieldsProps) => { const processedFields = isGenerateReceipt ? addReceiptFieldsUtil(additionalFields) @@ -35,7 +36,8 @@ export const Fields = ({ fieldsState, handleChange, handleBlur, - inputGaps + inputGaps, + styles ) const Direction = direction === DirectionFields.Column ? Column : Row diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form.component.tsx index fa89173..1f9dd71 100644 --- a/packages/payment-widget/src/ui/form.component.tsx +++ b/packages/payment-widget/src/ui/form.component.tsx @@ -43,6 +43,7 @@ export const Form = ({ additionalFields={additionalFields} direction={styles?.direction} inputGaps={styles?.inputGaps} + styles={styles?.input} /> + {customElements?.button ? ( + customElements.button(buttonProps) + ) : ( + + )} ) } diff --git a/packages/payment-widget/src/ui/form.test.tsx b/packages/payment-widget/src/ui/form.test.tsx index 52087db..e17d54b 100644 --- a/packages/payment-widget/src/ui/form.test.tsx +++ b/packages/payment-widget/src/ui/form.test.tsx @@ -1,58 +1,58 @@ -/** - * @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 - - {}}> - {element} - - - ) -} - -describe('Form fragment', () => { - const settings: Settings = { - storeId: '123' - } - - it.only('button reacts to filled in amount', () => { - customRender(
) - - 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) - }) -}) +// /** +// * @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 +// +// {}}> +// {element} +// +// +// ) +// } + +// describe('Form fragment', () => { +// const settings: Settings = { +// storeId: '123' +// } + +// it.only('button reacts to filled in amount', () => { +// customRender() + +// 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/input/input.component.tsx b/packages/payment-widget/src/ui/input/input.component.tsx index 39816d4..688701f 100644 --- a/packages/payment-widget/src/ui/input/input.component.tsx +++ b/packages/payment-widget/src/ui/input/input.component.tsx @@ -14,19 +14,19 @@ import { forwardRef } from 'react' import { useHover } from 'react-laag' import { layout } from 'styled-system' -import { InputStyles } from '../../interfaces' import { theme } from '../theme/src/index' import { appearanceStyles } from './input.styles' import { baseStyles } from './input.styles' import { shapeStyles } from './input.styles' import { transitionStyles } from './input.styles' -export const InputElement = ({ styledArray, ...props }) => { - const StyledInput = styledArray.length - ? styled.div(baseStyles, ...styledArray, layout) - : styled.div(baseStyles, shapeStyles, appearanceStyles, transitionStyles, layout) - return -} +export const InputElement = styled.div( + baseStyles, + shapeStyles, + appearanceStyles, + transitionStyles, + layout +) const Container = styled.div(({ type }: any) => ({ display: type === 'hidden' ? 'none' : 'flex', @@ -36,7 +36,6 @@ const Container = styled.div(({ type }: any) => ({ interface InputProps extends BaseInputProps { errorText?: string - styles?: InputStyles } export const InputWithoutRef: ForwardRefRenderFunction = ( @@ -49,14 +48,13 @@ export const InputWithoutRef: ForwardRefRenderFunction { const changeValue = useChangeValue(disabled, onChange, onChangeNative) - const [hover, hoverProps] = useHover() - const [focus, setFocus] = useState(false) + const [, hoverProps] = useHover() + const [, setFocus] = useState(false) if (!ref) { ref = useRef(null) // eslint-disable-line @@ -78,13 +76,7 @@ export const InputWithoutRef: ForwardRefRenderFunction - + diff --git a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx index 8c0aaee..f7cea4e 100644 --- a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx +++ b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx @@ -3,9 +3,12 @@ import * as theme from './theme' import { ThemeProvider as EmotionThemeProvider } from '@emotion/react' import React from 'react' +import { FC } from 'react' -export const ThemeProvider = ({ customTheme, children }) => - customTheme ? ( +import { ThemeProps } from '../../../interfaces/theme.interfaces' + +export const ThemeProvider: FC = ({ useCustomTheme, children }) => + useCustomTheme ? ( <>{children} // eslint-disable-line ) : ( {children} diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 290acfa..9beb61c 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -20,13 +20,14 @@ export const Widget = ({ receipt, additionalFields, styles, - customTheme, disabled, + customElements, }: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN + const useCustomTheme = !!customElements?.input return ( - + From 9f9f1d8e3a54f499297503dc280d3140e956b0ad Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Mon, 20 Nov 2023 15:38:46 +0400 Subject: [PATCH 08/25] fix: install dependencies --- .yarn/cache/fsevents-patch-19706e7e35-9.zip | Bin 24108 -> 0 bytes yarn.lock | 50 ++++++++++---------- 2 files changed, 25 insertions(+), 25 deletions(-) delete mode 100644 .yarn/cache/fsevents-patch-19706e7e35-9.zip diff --git a/.yarn/cache/fsevents-patch-19706e7e35-9.zip b/.yarn/cache/fsevents-patch-19706e7e35-9.zip deleted file mode 100644 index 1d6d66e6696103b0da5c0be1c8159f467e010bb8..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 24108 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 diff --git a/yarn.lock b/yarn.lock index bd099e3..1cf2996 100644 --- a/yarn.lock +++ b/yarn.lock @@ -272,9 +272,9 @@ __metadata: "@emotion/jest": "npm:11.9.4" "@emotion/react": "npm:11.9.3" "@emotion/styled": "npm:11.9.3" - "@testing-library/react": "npm:^14.1.0" + "@testing-library/react": "npm:14.1.0" "@types/react": "npm:18.2.20" - "@types/react-dom": "npm:^18" + "@types/react-dom": "npm:18" "@types/styled-system": "npm:5.1.16" csstype: "npm:3.1.2" react: "npm:18.2.0" @@ -1884,6 +1884,20 @@ __metadata: languageName: node linkType: hard +"@testing-library/react@npm:14.1.0": + version: 14.1.0 + resolution: "@testing-library/react@npm:14.1.0" + dependencies: + "@babel/runtime": "npm:^7.12.5" + "@testing-library/dom": "npm:^9.0.0" + "@types/react-dom": "npm:^18.0.0" + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + checksum: 3369b0818317456725a9ae4c012b50b88e94406d2c7688faddba918add0bcb46957f6bd0d760a1fbfc06986adf7d048e14c767901c7adb6f20d6e175197a77ac + languageName: node + linkType: hard + "@testing-library/react@npm:^12.1.2, @testing-library/react@npm:^12.1.3": version: 12.1.5 resolution: "@testing-library/react@npm:12.1.5" @@ -1898,20 +1912,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/react@npm:^14.1.0": - version: 14.1.0 - resolution: "@testing-library/react@npm:14.1.0" - dependencies: - "@babel/runtime": "npm:^7.12.5" - "@testing-library/dom": "npm:^9.0.0" - "@types/react-dom": "npm:^18.0.0" - peerDependencies: - react: ^18.0.0 - react-dom: ^18.0.0 - checksum: 3369b0818317456725a9ae4c012b50b88e94406d2c7688faddba918add0bcb46957f6bd0d760a1fbfc06986adf7d048e14c767901c7adb6f20d6e175197a77ac - languageName: node - linkType: hard - "@tootallnate/once@npm:1": version: 1.1.2 resolution: "@tootallnate/once@npm:1.1.2" @@ -2104,6 +2104,15 @@ __metadata: languageName: node linkType: hard +"@types/react-dom@npm:18, @types/react-dom@npm:^18.0.0": + version: 18.2.15 + resolution: "@types/react-dom@npm:18.2.15" + dependencies: + "@types/react": "npm:*" + checksum: e3aa4cbd0edbae1d9d7ced55da2306a2eae966aa6fcf9a2d220ff304676bf40d541ef3dd4c84d64f29002d71699816a2043685a6799d8c9342d210d4019bebeb + languageName: node + linkType: hard + "@types/react-dom@npm:18.2.7, @types/react-dom@npm:>=16.9.0, @types/react-dom@npm:^18.2.7": version: 18.2.7 resolution: "@types/react-dom@npm:18.2.7" @@ -2122,15 +2131,6 @@ __metadata: languageName: node linkType: hard -"@types/react-dom@npm:^18, @types/react-dom@npm:^18.0.0": - version: 18.2.15 - resolution: "@types/react-dom@npm:18.2.15" - dependencies: - "@types/react": "npm:*" - checksum: e3aa4cbd0edbae1d9d7ced55da2306a2eae966aa6fcf9a2d220ff304676bf40d541ef3dd4c84d64f29002d71699816a2043685a6799d8c9342d210d4019bebeb - languageName: node - linkType: hard - "@types/react-test-renderer@npm:>=16.9.0": version: 18.0.0 resolution: "@types/react-test-renderer@npm:18.0.0" From c3e7e80377cc19958f1a03f50cc965515bc990b4 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Mon, 20 Nov 2023 17:37:04 +0400 Subject: [PATCH 09/25] fix: imports, interfaces --- .../src/hooks/use-fields-render.hook.tsx | 7 +++--- .../src/interfaces/button.interfaces.ts | 7 ++++++ .../interfaces/custom-elements.interfaces.ts | 22 ++----------------- .../payment-widget/src/interfaces/index.ts | 4 ++++ .../src/interfaces/input.interfaces.ts | 13 +++++++++++ .../src/ui/button/button.component.tsx | 2 +- .../payment-widget/src/ui/form.component.tsx | 3 ++- .../src/ui/theme/src/theme.provider.tsx | 2 +- 8 files changed, 34 insertions(+), 26 deletions(-) create mode 100644 packages/payment-widget/src/interfaces/button.interfaces.ts create mode 100644 packages/payment-widget/src/interfaces/input.interfaces.ts diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx index c1d9438..3ad38f6 100644 --- a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx +++ b/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,7 +21,7 @@ export const useFieldsRenderer = ( handleChange: HandleChangeField, handleBlur: HandleBlurField, inputGaps: number, - customInput: CustomInput | undefined + customInput?: CustomInput ) => { const intl = useIntl() @@ -28,7 +29,7 @@ export const useFieldsRenderer = ( 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, diff --git a/packages/payment-widget/src/interfaces/button.interfaces.ts b/packages/payment-widget/src/interfaces/button.interfaces.ts new file mode 100644 index 0000000..7f05dc7 --- /dev/null +++ b/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 +} diff --git a/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts b/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts index d3277ac..b8b5eba 100644 --- a/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts +++ b/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 export type CustomButton = FC diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index b48e070..bd9798a 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/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' diff --git a/packages/payment-widget/src/interfaces/input.interfaces.ts b/packages/payment-widget/src/interfaces/input.interfaces.ts new file mode 100644 index 0000000..3f2d2fc --- /dev/null +++ b/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 +} diff --git a/packages/payment-widget/src/ui/button/button.component.tsx b/packages/payment-widget/src/ui/button/button.component.tsx index c93598c..77ce9fb 100644 --- a/packages/payment-widget/src/ui/button/button.component.tsx +++ b/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' diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form.component.tsx index f5509e2..9b62745 100644 --- a/packages/payment-widget/src/ui/form.component.tsx +++ b/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, } diff --git a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx index f7cea4e..5196fd7 100644 --- a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx +++ b/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 = ({ useCustomTheme, children }) => useCustomTheme ? ( From c9b1626dd3ac6f570d6baa5e361f621dcf315e20 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 22 Nov 2023 23:53:58 +0400 Subject: [PATCH 10/25] feat: add wrappers for custom elemrnts --- .../src/hooks/use-fields-state.hook.ts | 13 ++- packages/payment-widget/src/index.ts | 2 +- .../src/interfaces/form.interfaces.ts | 9 +++ .../payment-widget/src/interfaces/index.ts | 20 ++--- .../src/interfaces/widget.interfaces.ts | 24 +++--- .../src/interfaces/wrappers.interfaces.ts | 18 +++++ .../src/ui/fields.component.tsx | 5 +- .../payment-widget/src/ui/form.component.tsx | 81 +++++++++++-------- packages/payment-widget/src/ui/index.ts | 1 + .../src/ui/widget.component.tsx | 64 ++++++++++----- .../ui/wrapper/button-wrapper.component.tsx | 11 +++ .../payment-widget/src/ui/wrapper/index.ts | 2 + .../ui/wrapper/input-wrapper.component.tsx | 21 +++++ 13 files changed, 186 insertions(+), 85 deletions(-) create mode 100644 packages/payment-widget/src/interfaces/form.interfaces.ts create mode 100644 packages/payment-widget/src/interfaces/wrappers.interfaces.ts create mode 100644 packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx create mode 100644 packages/payment-widget/src/ui/wrapper/index.ts create mode 100644 packages/payment-widget/src/ui/wrapper/input-wrapper.component.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 a4a8781..e97180f 100644 --- a/packages/payment-widget/src/hooks/use-fields-state.hook.ts +++ b/packages/payment-widget/src/hooks/use-fields-state.hook.ts @@ -9,15 +9,20 @@ import { HandleChangeField } from '../interfaces' import { FieldsNames } from '../interfaces' import { ValidateField } from '../interfaces' -export const useFieldsState = (fields: Field[], validateField: ValidateField) => { - const initialState = fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}) - const [fieldsState, setFieldsState] = useState(initialState as FieldState) +export const useFieldsState = (validateField: ValidateField, fields?: Field[]) => { + const initialState = fields + ? fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}) + : '' + const [fieldsState, setFieldsState] = useState( + initialState as FieldState | string + ) const handleChange: HandleChangeField = useCallback( (e: FormEvent) => { const name = e.currentTarget.name as FieldsNames const { value } = e.currentTarget - setFieldsState((prevFields) => ({ ...prevFields, [name]: value })) + setFieldsState((prevFields) => + typeof prevFields === 'object' ? { ...prevFields, [name]: value } : value) }, [setFieldsState] ) diff --git a/packages/payment-widget/src/index.ts b/packages/payment-widget/src/index.ts index 2334a21..38bb613 100644 --- a/packages/payment-widget/src/index.ts +++ b/packages/payment-widget/src/index.ts @@ -1,4 +1,4 @@ -export { Widget } from './ui' +export { Widget, InputWrapper, ButtonWrapper } from './ui' export { Settings, Styles, diff --git a/packages/payment-widget/src/interfaces/form.interfaces.ts b/packages/payment-widget/src/interfaces/form.interfaces.ts new file mode 100644 index 0000000..bd5e026 --- /dev/null +++ b/packages/payment-widget/src/interfaces/form.interfaces.ts @@ -0,0 +1,9 @@ +import React from 'react' + +import { WidgetProps } from './widget.interfaces' + +export interface FormProps extends WidgetProps { + useCustomButton: boolean + isGenerateReceipt: boolean + children: React.ReactNode +} diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index bd9798a..fe68f55 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/packages/payment-widget/src/interfaces/index.ts @@ -1,9 +1,11 @@ -export * from './widget.interfaces' -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' +export * from "./widget.interfaces"; +export * from "./fields.interfaces"; +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/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts index 43f655a..d5c4d1e 100644 --- a/packages/payment-widget/src/interfaces/widget.interfaces.ts +++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts @@ -1,15 +1,15 @@ -import { CustomElements } from './custom-elements.interfaces' -import { AdditionalField } from './fields.interfaces' -import { ReceiptSettings } from './receipt.interfaces' -import { Settings } from './settings.interfaces' -import { Styles } from './styles.interfaces' +import React from "react"; + +import { AdditionalField } from "./fields.interfaces"; +import { ReceiptSettings } from "./receipt.interfaces"; +import { Settings } from "./settings.interfaces"; +import { Styles } from "./styles.interfaces"; export interface WidgetProps { - settings: Settings - amount?: number - receipt?: ReceiptSettings - styles?: Styles - additionalFields?: AdditionalField[] - disabled?: boolean - customElements?: CustomElements + settings: Settings; + amount?: number; + receipt?: ReceiptSettings; + styles?: Styles; + additionalFields?: AdditionalField[]; + children: React.ReactNode; } diff --git a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts new file mode 100644 index 0000000..5efb22b --- /dev/null +++ b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts @@ -0,0 +1,18 @@ +import { FormEvent } from 'react' +import { ReactElement } from 'react' + +type OnCallback = (event: FormEvent | string | any) => void + +export interface InputWrapperProps { + name: string + children: ( + value: string, + onChange: OnCallback, + onBlur: OnCallback, + errorText: string + ) => ReactElement +} + +export interface ButtonWrapperProps { + children: () => ReactElement +} diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx index ecd3b8b..3045776 100644 --- a/packages/payment-widget/src/ui/fields.component.tsx +++ b/packages/payment-widget/src/ui/fields.component.tsx @@ -8,6 +8,7 @@ import { Row } from '@atls-ui-parts/layout' import React from 'react' import { RequiredFieldsType } from '../enums' +import { FieldState } from '../interfaces' import { FieldsProps } from '../interfaces' import { DirectionFields } from '../interfaces' import { requiredFields } from '../data' @@ -29,11 +30,11 @@ export const Fields = ({ ? addReceiptFieldsUtil(additionalFields) : additionalFields const fields = !amount ? [...requiredFields, ...processedFields] : [...processedFields] - const { fieldsState, handleChange, handleBlur } = useFieldsState(fields, validateField) + const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField, fields) const renderedFields = useFieldsRenderer( fields, errors, - fieldsState, + fieldsState as FieldState, handleChange, handleBlur, inputGaps, diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form.component.tsx index 9b62745..4fd9160 100644 --- a/packages/payment-widget/src/ui/form.component.tsx +++ b/packages/payment-widget/src/ui/form.component.tsx @@ -1,63 +1,74 @@ -import React from 'react' -import { FormEventHandler } from 'react' -import { FormattedMessage } from 'react-intl' +import React from "react"; +import { FC } from "react"; +import { FormEventHandler } from "react"; +import { FormattedMessage } from "react-intl"; +import { useMemo } from "react"; +import { createContext } from "react"; -import { CustomButtonProps } from '../interfaces' -import { WidgetProps } from '../interfaces' -import { Button } from './button/button.component' -import { Fields } from './fields.component' -import { Settings } from './settings.component' -import { useInit } from '../hooks' -import { useValidate } from '../hooks' -import { makePayment } from '../utils' -import { makePaymentWithCheck } from '../utils' +import { FormProps } from "../interfaces"; +import { Button } from "./button/button.component"; +import { Fields } from "./fields.component"; +import { Settings } from "./settings.component"; +import { useInit } from "../hooks"; +import { useValidate } from "../hooks"; +import { makePayment } from "../utils"; +import { makePaymentWithCheck } from "../utils"; -export const Form = ({ +export const FormContext = createContext(null); + +export const Form: FC = ({ settings, amount, receipt, styles, additionalFields, - disabled, - customElements, -}: WidgetProps) => { - const isLoaded = useInit() - const { errors, validateField, isValidate } = useValidate() + useCustomButton, + isGenerateReceipt, + children, +}) => { + const isLoaded = useInit(); + const { errors, validateField, isValidate } = useValidate(); const payHandler: FormEventHandler = (event) => { - event.preventDefault() - if (!isValidate) return + event.preventDefault(); + if (!isValidate) return; if (receipt) { - makePaymentWithCheck(event, receipt) + makePaymentWithCheck(event, receipt); } else { - makePayment(event) + makePayment(event); } - } + }; const buttonProps: CustomButtonProps = { - type: 'submit', + type: "submit", disabled: !isLoaded || !!disabled, - } + }; return ( - - + + - {customElements?.button ? ( - customElements.button(buttonProps) - ) : ( - )} - ) -} + ); +}; diff --git a/packages/payment-widget/src/ui/index.ts b/packages/payment-widget/src/ui/index.ts index 86e6890..10615d5 100644 --- a/packages/payment-widget/src/ui/index.ts +++ b/packages/payment-widget/src/ui/index.ts @@ -1,3 +1,4 @@ export * from './widget.component' +export * from './wrapper' export { Input } from './input/input.component' export { MemoizedInput } from './input/input.component' diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 9beb61c..16824db 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,33 +1,50 @@ -import * as messagesRu from '../locales/ru.json' -import * as messagesEn from '../locales/en.json' +import * as messagesRu from "../locales/ru.json"; +import * as messagesEn from "../locales/en.json"; -import React from 'react' -import { IntlProvider } from 'react-intl' +import React from "react"; +import { Children } from "react"; +import { FC } from "react"; +import { IntlProvider } from "react-intl"; +import { isValidElement } from "react"; -import { LanguagesType } from '../enums' -import { WidgetProps } from '../interfaces' -import { Form } from './form.component' -import { ThemeProvider } from './theme/src' +import { LanguagesType } from "../enums"; +import { WidgetProps } from "../interfaces"; +import { Form } from "./form.component"; +import { ThemeProvider } from "./theme/src"; const messages = { [LanguagesType.RUSSIAN]: messagesRu, [LanguagesType.ENGLISH]: messagesEn, -} +}; -export const Widget = ({ +export const Widget: FC = ({ amount, settings, receipt, additionalFields, styles, - disabled, - customElements, -}: WidgetProps) => { - const locale = settings.language ?? LanguagesType.RUSSIAN - const useCustomTheme = !!customElements?.input + children, +}) => { + const locale = settings.language ?? LanguagesType.RUSSIAN; + const childrenArray = Children.toArray(children); + const customFields = childrenArray.filter((child) => + isValidElement(child) // @ts-ignore + ? child.type.name === "InputWrapper" && + typeof child.props.children === "function" + : false + ); + const customButton = childrenArray.find((child) => + isValidElement(child) // @ts-ignore + ? child.type.name === "ButtonWrapper" && + typeof child.props.children === "function" + : false + ); + // @ts-ignore + const isGenerateReceipt = + !!receipt && !customFields.find((field) => field.props.name === "email"); return ( - + + additionalFields={customFields.length ? [] : additionalFields} + useCustomButton={!!customButton} + isGenerateReceipt={isGenerateReceipt} + > + {customFields} + {customButton} + - ) -} + ); +}; diff --git a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx new file mode 100644 index 0000000..b441f0d --- /dev/null +++ b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react' + +import { ButtonWrapperProps } from '../../interfaces' + +export const ButtonWrapper: FC = ({ children }) => { + if (typeof children === 'function') { + return children() + } + + return null +} diff --git a/packages/payment-widget/src/ui/wrapper/index.ts b/packages/payment-widget/src/ui/wrapper/index.ts new file mode 100644 index 0000000..8a58f1c --- /dev/null +++ b/packages/payment-widget/src/ui/wrapper/index.ts @@ -0,0 +1,2 @@ +export * from './input-wrapper.component' +export * from './button-wrapper.component' diff --git a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx new file mode 100644 index 0000000..5580814 --- /dev/null +++ b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx @@ -0,0 +1,21 @@ +import { FC } from 'react' +import { useContext } from 'react' +import { useIntl } from 'react-intl' + +import { InputWrapperProps } from '../../interfaces' +import { FormContext } from '../form.component' +import { useFieldsState } from '../../hooks' +import { translate } from '../../utils/translate.util' + +export const InputWrapper: FC = ({ name, children }) => { + const { errors, validateField } = useContext(FormContext) + const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField) + const intl = useIntl() + const translateError = translate(intl, errors[name], errors[name]) + + if (typeof children === 'function') { + return children(fieldsState as string, handleChange, handleBlur, translateError) + } + + return null +} From bf5c3acb3838ccd59af6e9d0360d880635f766fa Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Thu, 23 Nov 2023 00:19:58 +0400 Subject: [PATCH 11/25] fix: interfaces --- .../src/hooks/use-fields-render.hook.tsx | 26 ++++---- .../interfaces/custom-elements.interfaces.ts | 12 ---- .../src/interfaces/fields.interfaces.ts | 2 - .../payment-widget/src/interfaces/index.ts | 22 +++---- .../src/interfaces/widget.interfaces.ts | 22 +++---- .../src/ui/fields.component.tsx | 4 +- .../payment-widget/src/ui/form.component.tsx | 64 ++++++++----------- .../src/ui/widget.component.tsx | 47 ++++++-------- 8 files changed, 83 insertions(+), 116 deletions(-) delete mode 100644 packages/payment-widget/src/interfaces/custom-elements.interfaces.ts diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx index 3ad38f6..2412f07 100644 --- a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx +++ b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx @@ -4,13 +4,11 @@ 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' import { MemoizedInput } from '../ui' import { translate } from '../utils/translate.util' @@ -20,8 +18,7 @@ export const useFieldsRenderer = ( fieldsState: FieldState, handleChange: HandleChangeField, handleBlur: HandleBlurField, - inputGaps: number, - customInput?: CustomInput + inputGaps: number ) => { const intl = useIntl() @@ -29,20 +26,19 @@ export const useFieldsRenderer = ( 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: CustomInputProps = { - type: field.type ?? 'text', - name: field.name, - placeholder: translatePlaceholder, - required: field.required ?? false, - value: fieldsState[field.name], - errorText: translateError, - onChangeNative: handleChange, - onBlur: handleBlur, - } return ( - {customInput ? customInput(inputProps) : } + diff --git a/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts b/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts deleted file mode 100644 index b8b5eba..0000000 --- a/packages/payment-widget/src/interfaces/custom-elements.interfaces.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { FC } from 'react' - -import { CustomButtonProps } from './button.interfaces' -import { CustomInputProps } from './input.interfaces' - -export type CustomInput = FC -export type CustomButton = FC - -export interface CustomElements { - input?: CustomInput - button?: CustomButton -} diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts index daa01e5..2183392 100644 --- a/packages/payment-widget/src/interfaces/fields.interfaces.ts +++ b/packages/payment-widget/src/interfaces/fields.interfaces.ts @@ -3,7 +3,6 @@ import { HTMLInputTypeAttribute } from 'react' import { AdditionalFieldsType } from '../enums' import { RequiredFieldsType } from '../enums' -import { CustomInput } from './custom-elements.interfaces' import { DirectionFields } from './styles.interfaces' export type FieldsNames = RequiredFieldsType | AdditionalFieldsType @@ -39,5 +38,4 @@ export interface FieldsProps { inputGaps?: number isGenerateReceipt?: boolean additionalFields?: AdditionalField[] - customInput?: CustomInput } diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index fe68f55..a6fbe3e 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/packages/payment-widget/src/interfaces/index.ts @@ -1,11 +1,11 @@ -export * from "./widget.interfaces"; -export * from "./fields.interfaces"; -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"; +export * from './widget.interfaces' +export * from './fields.interfaces' +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/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts index d5c4d1e..74e0306 100644 --- a/packages/payment-widget/src/interfaces/widget.interfaces.ts +++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts @@ -1,15 +1,15 @@ -import React from "react"; +import React from 'react' -import { AdditionalField } from "./fields.interfaces"; -import { ReceiptSettings } from "./receipt.interfaces"; -import { Settings } from "./settings.interfaces"; -import { Styles } from "./styles.interfaces"; +import { AdditionalField } from './fields.interfaces' +import { ReceiptSettings } from './receipt.interfaces' +import { Settings } from './settings.interfaces' +import { Styles } from './styles.interfaces' export interface WidgetProps { - settings: Settings; - amount?: number; - receipt?: ReceiptSettings; - styles?: Styles; - additionalFields?: AdditionalField[]; - children: React.ReactNode; + settings: Settings + amount?: number + receipt?: ReceiptSettings + styles?: Styles + additionalFields?: AdditionalField[] + children: React.ReactNode } diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx index 3045776..b3f12f4 100644 --- a/packages/payment-widget/src/ui/fields.component.tsx +++ b/packages/payment-widget/src/ui/fields.component.tsx @@ -24,7 +24,6 @@ export const Fields = ({ isGenerateReceipt = false, direction = DirectionFields.Column, inputGaps = 16, - customInput, }: FieldsProps) => { const processedFields = isGenerateReceipt ? addReceiptFieldsUtil(additionalFields) @@ -37,8 +36,7 @@ export const Fields = ({ fieldsState as FieldState, handleChange, handleBlur, - inputGaps, - customInput + inputGaps ) const Direction = direction === DirectionFields.Column ? Column : Row diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form.component.tsx index 4fd9160..77207df 100644 --- a/packages/payment-widget/src/ui/form.component.tsx +++ b/packages/payment-widget/src/ui/form.component.tsx @@ -1,20 +1,20 @@ -import React from "react"; -import { FC } from "react"; -import { FormEventHandler } from "react"; -import { FormattedMessage } from "react-intl"; -import { useMemo } from "react"; -import { createContext } from "react"; +import React from 'react' +import { FC } from 'react' +import { FormEventHandler } from 'react' +import { FormattedMessage } from 'react-intl' +import { useMemo } from 'react' +import { createContext } from 'react' -import { FormProps } from "../interfaces"; -import { Button } from "./button/button.component"; -import { Fields } from "./fields.component"; -import { Settings } from "./settings.component"; -import { useInit } from "../hooks"; -import { useValidate } from "../hooks"; -import { makePayment } from "../utils"; -import { makePaymentWithCheck } from "../utils"; +import { FormProps } from '../interfaces' +import { Button } from './button/button.component' +import { Fields } from './fields.component' +import { Settings } from './settings.component' +import { useInit } from '../hooks' +import { useValidate } from '../hooks' +import { makePayment } from '../utils' +import { makePaymentWithCheck } from '../utils' -export const FormContext = createContext(null); +export const FormContext = createContext(null) export const Form: FC = ({ settings, @@ -26,25 +26,21 @@ export const Form: FC = ({ isGenerateReceipt, children, }) => { - const isLoaded = useInit(); - const { errors, validateField, isValidate } = useValidate(); + const isLoaded = useInit() + const { errors, validateField, isValidate } = useValidate() const payHandler: FormEventHandler = (event) => { - event.preventDefault(); - if (!isValidate) return; + event.preventDefault() + if (!isValidate) return if (receipt) { - makePaymentWithCheck(event, receipt); + makePaymentWithCheck(event, receipt) } else { - makePayment(event); + makePayment(event) } - }; - const buttonProps: CustomButtonProps = { - type: "submit", - disabled: !isLoaded || !!disabled, - }; + } return ( -
+ = ({ additionalFields={additionalFields} direction={styles?.direction} inputGaps={styles?.inputGaps} - customInput={customElements?.input} /> ({ errors, validateField }), - [errors, validateField] - )} + value={useMemo(() => ({ errors, validateField }), [errors, validateField])} > {children} {!useCustomButton && ( - )} - ); -}; + ) +} diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 16824db..020f82f 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,21 +1,21 @@ -import * as messagesRu from "../locales/ru.json"; -import * as messagesEn from "../locales/en.json"; +import * as messagesRu from '../locales/ru.json' +import * as messagesEn from '../locales/en.json' -import React from "react"; -import { Children } from "react"; -import { FC } from "react"; -import { IntlProvider } from "react-intl"; -import { isValidElement } from "react"; +import React from 'react' +import { Children } from 'react' +import { FC } from 'react' +import { IntlProvider } from 'react-intl' +import { isValidElement } from 'react' -import { LanguagesType } from "../enums"; -import { WidgetProps } from "../interfaces"; -import { Form } from "./form.component"; -import { ThemeProvider } from "./theme/src"; +import { LanguagesType } from '../enums' +import { WidgetProps } from '../interfaces' +import { Form } from './form.component' +import { ThemeProvider } from './theme/src' const messages = { [LanguagesType.RUSSIAN]: messagesRu, [LanguagesType.ENGLISH]: messagesEn, -}; +} export const Widget: FC = ({ amount, @@ -25,23 +25,18 @@ export const Widget: FC = ({ styles, children, }) => { - const locale = settings.language ?? LanguagesType.RUSSIAN; - const childrenArray = Children.toArray(children); + const locale = settings.language ?? LanguagesType.RUSSIAN + const childrenArray = Children.toArray(children) const customFields = childrenArray.filter((child) => isValidElement(child) // @ts-ignore - ? child.type.name === "InputWrapper" && - typeof child.props.children === "function" - : false - ); + ? child.type.name === 'InputWrapper' && typeof child.props.children === 'function' + : false) const customButton = childrenArray.find((child) => isValidElement(child) // @ts-ignore - ? child.type.name === "ButtonWrapper" && - typeof child.props.children === "function" - : false - ); + ? child.type.name === 'ButtonWrapper' && typeof child.props.children === 'function' + : false) // @ts-ignore - const isGenerateReceipt = - !!receipt && !customFields.find((field) => field.props.name === "email"); + const isGenerateReceipt = !!receipt && !customFields.find((field) => field.props.name === 'email') return ( @@ -64,5 +59,5 @@ export const Widget: FC = ({ - ); -}; + ) +} From 2b0cd55df5d054789533dc7e3cbe86bbf0213d9c Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Thu, 23 Nov 2023 20:04:00 +0400 Subject: [PATCH 12/25] feat: add form provider, form context, hook useForm --- .../src/interfaces/fields.interfaces.ts | 8 +++-- .../src/interfaces/form.interfaces.ts | 8 +++-- .../src/ui/fields.component.tsx | 4 +-- .../src/ui/{ => form}/form.component.tsx | 30 +++++++------------ .../src/ui/form/form.context.ts | 7 +++++ .../src/ui/form/form.provider.tsx | 19 ++++++++++++ packages/payment-widget/src/ui/form/index.ts | 2 ++ .../src/ui/form/use-form.hook.ts | 6 ++++ .../src/ui/widget.component.tsx | 29 ++++++++++-------- .../ui/wrapper/input-wrapper.component.tsx | 5 ++-- 10 files changed, 76 insertions(+), 42 deletions(-) rename packages/payment-widget/src/ui/{ => form}/form.component.tsx (58%) create mode 100644 packages/payment-widget/src/ui/form/form.context.ts create mode 100644 packages/payment-widget/src/ui/form/form.provider.tsx create mode 100644 packages/payment-widget/src/ui/form/index.ts create mode 100644 packages/payment-widget/src/ui/form/use-form.hook.ts diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts index 2183392..c0ade9f 100644 --- a/packages/payment-widget/src/interfaces/fields.interfaces.ts +++ b/packages/payment-widget/src/interfaces/fields.interfaces.ts @@ -31,11 +31,15 @@ export type FieldsErrors = { } export interface FieldsProps { - errors: FieldsErrors - validateField: ValidateField amount?: number direction?: DirectionFields inputGaps?: number isGenerateReceipt?: boolean additionalFields?: AdditionalField[] } + +export interface FieldsValidator { + errors: FieldsErrors + validateField: ValidateField + isValidate: boolean +} diff --git a/packages/payment-widget/src/interfaces/form.interfaces.ts b/packages/payment-widget/src/interfaces/form.interfaces.ts index bd5e026..3d9c278 100644 --- a/packages/payment-widget/src/interfaces/form.interfaces.ts +++ b/packages/payment-widget/src/interfaces/form.interfaces.ts @@ -1,9 +1,13 @@ -import React from 'react' +import { ReactNode } from 'react' import { WidgetProps } from './widget.interfaces' export interface FormProps extends WidgetProps { useCustomButton: boolean isGenerateReceipt: boolean - children: React.ReactNode + children: ReactNode | ReactNode[] +} + +export interface FormProviderProps { + children: ReactNode | ReactNode[] } diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx index b3f12f4..f222762 100644 --- a/packages/payment-widget/src/ui/fields.component.tsx +++ b/packages/payment-widget/src/ui/fields.component.tsx @@ -15,16 +15,16 @@ import { requiredFields } from '../data' import { useFieldsState } from '../hooks' import { useFieldsRenderer } from '../hooks' import { addReceiptFieldsUtil } from '../utils' +import { useForm } from './form' export const Fields = ({ - errors, - validateField, amount, additionalFields = [], isGenerateReceipt = false, direction = DirectionFields.Column, inputGaps = 16, }: FieldsProps) => { + const { errors, validateField } = useForm() const processedFields = isGenerateReceipt ? addReceiptFieldsUtil(additionalFields) : additionalFields diff --git a/packages/payment-widget/src/ui/form.component.tsx b/packages/payment-widget/src/ui/form/form.component.tsx similarity index 58% rename from packages/payment-widget/src/ui/form.component.tsx rename to packages/payment-widget/src/ui/form/form.component.tsx index 77207df..9cc66da 100644 --- a/packages/payment-widget/src/ui/form.component.tsx +++ b/packages/payment-widget/src/ui/form/form.component.tsx @@ -2,19 +2,15 @@ import React from 'react' import { FC } from 'react' import { FormEventHandler } from 'react' import { FormattedMessage } from 'react-intl' -import { useMemo } from 'react' -import { createContext } from 'react' -import { FormProps } from '../interfaces' -import { Button } from './button/button.component' -import { Fields } from './fields.component' -import { Settings } from './settings.component' -import { useInit } from '../hooks' -import { useValidate } from '../hooks' -import { makePayment } from '../utils' -import { makePaymentWithCheck } from '../utils' - -export const FormContext = createContext(null) +import { FormProps } from '../../interfaces' +import { Button } from '../button/button.component' +import { Fields } from '../fields.component' +import { Settings } from '../settings.component' +import { useInit } from '../../hooks' +import { makePayment } from '../../utils' +import { makePaymentWithCheck } from '../../utils' +import { useForm } from './use-form.hook' export const Form: FC = ({ settings, @@ -27,7 +23,7 @@ export const Form: FC = ({ children, }) => { const isLoaded = useInit() - const { errors, validateField, isValidate } = useValidate() + const { isValidate } = useForm() const payHandler: FormEventHandler = (event) => { event.preventDefault() if (!isValidate) return @@ -43,19 +39,13 @@ export const Form: FC = ({
- ({ errors, validateField }), [errors, validateField])} - > - {children} - + {children} {!useCustomButton && ( )} 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(null) +export const Context = createContext(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 = ({ children }) => { +const FormProvider: FC = ({ 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 {children} 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 = ({ receipt, additionalFields, styles, + disabled, children, }) => { const locale = settings.language ?? LanguagesType.RUSSIAN @@ -46,7 +47,7 @@ export const Widget: FC = ({ messages={messages[locale]} defaultLocale={LanguagesType.RUSSIAN} > - + = ({ children }) => { + const { disabled } = useForm() if (typeof children === 'function') { - return children() + return children({ type: 'submit', disabled }) } return null From 9ac4775dd61288884c9bb100be1790b6e8db768d Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Fri, 24 Nov 2023 12:25:25 +0400 Subject: [PATCH 16/25] fix(form-provider): export const --- packages/payment-widget/src/ui/form/form.provider.tsx | 4 +--- packages/payment-widget/src/ui/widget.component.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/payment-widget/src/ui/form/form.provider.tsx b/packages/payment-widget/src/ui/form/form.provider.tsx index 36a2a3b..7ec66c0 100644 --- a/packages/payment-widget/src/ui/form/form.provider.tsx +++ b/packages/payment-widget/src/ui/form/form.provider.tsx @@ -6,7 +6,7 @@ import { FormProviderProps } from '../../interfaces' import { Provider } from './form.context' import { useValidate } from '../../hooks' -const FormProvider: FC = ({ disabled, children }) => { +export const FormProvider: FC = ({ disabled, children }) => { const { errors, validateField, isValidate } = useValidate() const value = useMemo( () => ({ errors, validateField, isValidate, disabled }), @@ -15,5 +15,3 @@ const FormProvider: FC = ({ disabled, children }) => { return {children} } - -export default FormProvider diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 7380ecd..40bf6b6 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -7,10 +7,10 @@ import { FC } from 'react' import { IntlProvider } from 'react-intl' import { isValidElement } from 'react' -import FormProvider from './form/form.provider' import { LanguagesType } from '../enums' import { WidgetProps } from '../interfaces' import { Form } from './form' +import { FormProvider } from './form/form.provider' import { ThemeProvider } from './theme/src' const messages = { From 84addff789d4d2d55e45ebc02d3522705521016e Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Fri, 24 Nov 2023 19:48:10 +0400 Subject: [PATCH 17/25] feat(enums): add ButtonType enum --- packages/payment-widget/src/enums/button.enum.ts | 4 ++++ packages/payment-widget/src/enums/index.ts | 1 + packages/payment-widget/src/interfaces/wrappers.interfaces.ts | 3 ++- .../src/ui/wrapper/button-wrapper.component.tsx | 3 ++- 4 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 packages/payment-widget/src/enums/button.enum.ts diff --git a/packages/payment-widget/src/enums/button.enum.ts b/packages/payment-widget/src/enums/button.enum.ts new file mode 100644 index 0000000..af6dc7c --- /dev/null +++ b/packages/payment-widget/src/enums/button.enum.ts @@ -0,0 +1,4 @@ +/* eslint-disable no-shadow */ +export enum ButtonType { + Submit = 'submit', +} diff --git a/packages/payment-widget/src/enums/index.ts b/packages/payment-widget/src/enums/index.ts index fa89379..6bd8db6 100644 --- a/packages/payment-widget/src/enums/index.ts +++ b/packages/payment-widget/src/enums/index.ts @@ -4,3 +4,4 @@ export * from './payment-method.enum' export * from './payment-object.enum' export * from './tax.enum' export * from './taxation.enum' +export * from './button.enum' diff --git a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts index 6ea83c5..199d34e 100644 --- a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts +++ b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts @@ -1,5 +1,6 @@ import { ReactElement } from 'react' +import { ButtonType } from '../enums' import { HandleBlurField } from './fields.interfaces' import { HandleChangeField } from './fields.interfaces' @@ -12,7 +13,7 @@ interface ChildrenInputProps { } interface ChildrenButtonProps { - type: string + type: ButtonType disabled: boolean } 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 6f3a80d..361b7f1 100644 --- a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx @@ -1,12 +1,13 @@ import { FC } from 'react' +import { ButtonType } from '../../enums' import { ButtonWrapperProps } from '../../interfaces' import { useForm } from '../form' export const ButtonWrapper: FC = ({ children }) => { const { disabled } = useForm() if (typeof children === 'function') { - return children({ type: 'submit', disabled }) + return children({ type: ButtonType.Submit, disabled }) } return null From f8d6d3c7882675cc1b410d3823ff68437103d219 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Mon, 27 Nov 2023 20:07:25 +0400 Subject: [PATCH 18/25] feat: add use-custom-element hook, extend form context, edit interfaces --- packages/payment-widget/src/hooks/index.ts | 1 + .../src/hooks/use-custom-elements.hook.ts | 77 +++++++++++++++++ .../src/hooks/use-fields-render.hook.tsx | 52 +++++++----- .../src/hooks/use-fields-state.hook.ts | 13 +-- .../interfaces/custom-elements.iterfaces.ts | 13 +++ .../src/interfaces/fields.interfaces.ts | 7 +- .../src/interfaces/form.interfaces.ts | 16 +++- .../payment-widget/src/interfaces/index.ts | 2 +- .../src/interfaces/theme.interfaces.ts | 1 - .../src/interfaces/widget.interfaces.ts | 2 +- .../src/interfaces/wrappers.interfaces.ts | 12 +-- .../src/ui/fields.component.tsx | 45 +++++----- .../src/ui/form/form.component.tsx | 17 ++-- .../src/ui/form/form.provider.tsx | 67 +++++++++++++-- .../src/ui/theme/src/theme.provider.tsx | 9 +- .../src/ui/widget.component.tsx | 84 +++++++++---------- .../ui/wrapper/button-wrapper.component.tsx | 12 +-- .../ui/wrapper/input-wrapper.component.tsx | 6 +- .../src/utils/add-receipt-fields.util.ts | 4 +- 19 files changed, 282 insertions(+), 158 deletions(-) create mode 100644 packages/payment-widget/src/hooks/use-custom-elements.hook.ts create mode 100644 packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts diff --git a/packages/payment-widget/src/hooks/index.ts b/packages/payment-widget/src/hooks/index.ts index 8ef3085..dae3d4f 100644 --- a/packages/payment-widget/src/hooks/index.ts +++ b/packages/payment-widget/src/hooks/index.ts @@ -2,3 +2,4 @@ export * from './use-init.hook' export { useValidate } from './use-validate.hook' export { useFieldsState } from './use-fields-state.hook' export { useFieldsRenderer } from './use-fields-render.hook' +export { useCustomElements } from './use-custom-elements.hook' diff --git a/packages/payment-widget/src/hooks/use-custom-elements.hook.ts b/packages/payment-widget/src/hooks/use-custom-elements.hook.ts new file mode 100644 index 0000000..fcf07ed --- /dev/null +++ b/packages/payment-widget/src/hooks/use-custom-elements.hook.ts @@ -0,0 +1,77 @@ +import { Children } from 'react' +import { ReactNode } from 'react' +import { JSXElementConstructor } from 'react' +import { isValidElement } from 'react' + +import { AdditionalFieldsType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { CustomElements } from '../interfaces' +import { Field } from '../interfaces' + +export const useCustomElements = ( + existAmount: boolean, + existReceipt: boolean, + existAdditionalFields: boolean, + nodes: ReactNode +): CustomElements => { + const nodeArray = Children.toArray(nodes) + + const isCastomElement = (nameNode: string, node: ReactNode): boolean => + isValidElement(node) + ? (node.type as JSXElementConstructor).name === nameNode && + typeof node.props.children === 'function' + : false + const isAdditionalField = (node: ReactNode): boolean => + isValidElement(node) ? Object.values(AdditionalFieldsType).includes(node.props.name) : false + const isRequiredField = (node: ReactNode): boolean => + isValidElement(node) ? node.props.name === RequiredFieldsType.Amount && !existAmount : false + + const customFields = nodeArray.filter( + (node) => + isCastomElement('InputWrapper', node) && (isAdditionalField(node) || isRequiredField(node)) + ) + const nameFields = customFields.reduce((acc, field) => { + if (isValidElement(field)) + acc.push({ + name: AdditionalFieldsType[field.props.name] || RequiredFieldsType[field.props.name], + }) + return acc + }, []) + + const customButton = nodeArray.find((node) => isCastomElement('ButtonWrapper', node)) + + const isGenerateReceiptField = existReceipt && !customFields.length + + const isGenerateRequiredField = !existAmount && existAdditionalFields + + const existCustomAmountField = customFields.some( + (field) => isValidElement(field) && field.props.name === RequiredFieldsType.Amount + ) + const existCustomReceiptField = customFields.some( + (field) => + isValidElement(field) && + (field.props.name === AdditionalFieldsType.Email || + field.props.name === AdditionalFieldsType.Phone) + ) + + if (existAdditionalFields && customFields.length) + throw new Error('Don`t use additionalFields property with InputWrapper component') + + if (customFields.length && !existAmount && !existCustomAmountField) + throw new Error( + 'If you use InputWrapper component and don`t set amount property, you mast use InputWrapper componnet with property name equal RequiredFieldsType.Amount' + ) + + if (customFields.length && existReceipt && !existCustomReceiptField) + throw new Error( + 'If you set receipt property whith InputWrapper component, you mast use InputWrapper componnet with property name equal AdditionalFieldsType.Phone or AdditionalFieldsType.Email' + ) + + return { + customFields, + customButton, + isGenerateReceiptField, + isGenerateRequiredField, + nameFields, + } +} diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx index 2412f07..4516c92 100644 --- a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx +++ b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx @@ -5,15 +5,17 @@ import React from 'react' import { useIntl } from 'react-intl' import { Field } from '../interfaces' +import { NameField } from '../interfaces' import { HandleBlurField } from '../interfaces' import { FieldState } from '../interfaces' import { HandleChangeField } from '../interfaces' import { FieldsErrors } from '../interfaces' import { MemoizedInput } from '../ui' +import { ThemeProvider } from '../ui/theme/src' import { translate } from '../utils/translate.util' export const useFieldsRenderer = ( - fields: Field[], + fields: Field[] | NameField[], errors: FieldsErrors, fieldsState: FieldState, handleChange: HandleChangeField, @@ -22,27 +24,31 @@ export const useFieldsRenderer = ( ) => { 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 + 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 - return ( - - - - - - - ) - }) + return ( + + + + + + + ) + })} + + ) } 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 16ee872..2e84b36 100644 --- a/packages/payment-widget/src/hooks/use-fields-state.hook.ts +++ b/packages/payment-widget/src/hooks/use-fields-state.hook.ts @@ -10,20 +10,15 @@ import { HandleChangeField } from '../interfaces' import { FieldsNames } from '../interfaces' import { ValidateField } from '../interfaces' -export const useFieldsState = (validateField: ValidateField, fields?: Field[]): FieldsState => { - const initialState = fields - ? fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}) - : '' - const [fieldsState, setFieldsState] = useState( - initialState as FieldState | string - ) +export const useFieldsState = (validateField: ValidateField, fields: Field[]): FieldsState => { + const initialState = fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {}) + const [fieldsState, setFieldsState] = useState(initialState as FieldState) const handleChange: HandleChangeField = useCallback( (e: FormEvent) => { const name = e.currentTarget.name as FieldsNames const { value } = e.currentTarget - setFieldsState((prevFields) => - typeof prevFields === 'object' ? { ...prevFields, [name]: value } : value) + setFieldsState((prevFields) => ({ ...prevFields, [name]: value })) }, [setFieldsState] ) diff --git a/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts b/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts new file mode 100644 index 0000000..2430dd6 --- /dev/null +++ b/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts @@ -0,0 +1,13 @@ +import { ReactNode } from 'react' + +import { Field } from './fields.interfaces' + +export type NameField = Pick + +export interface CustomElements { + customFields: ReactNode[] + customButton: ReactNode + isGenerateReceiptField: boolean + isGenerateRequiredField: boolean + nameFields: Field[] +} diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts index 532ea6e..e00a08d 100644 --- a/packages/payment-widget/src/interfaces/fields.interfaces.ts +++ b/packages/payment-widget/src/interfaces/fields.interfaces.ts @@ -13,7 +13,7 @@ export type HandleBlurField = (e: FormEvent) => void export interface Field { name: FieldsNames - placeholder: string + placeholder?: string required?: boolean type?: HTMLInputTypeAttribute } @@ -34,8 +34,7 @@ export interface FieldsProps { amount?: number direction?: DirectionFields inputGaps?: number - isGenerateReceipt?: boolean - additionalFields?: AdditionalField[] + useCustomFields: boolean } export interface FieldsValidator { @@ -45,7 +44,7 @@ export interface FieldsValidator { } export interface FieldsState { - fieldsState: FieldState | string + fieldsState: FieldState 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 6ee4546..811794f 100644 --- a/packages/payment-widget/src/interfaces/form.interfaces.ts +++ b/packages/payment-widget/src/interfaces/form.interfaces.ts @@ -1,19 +1,27 @@ import { ReactNode } from 'react' +import { NameField } from './custom-elements.iterfaces' +import { Field } from './fields.interfaces' +import { FieldsState } from './fields.interfaces' import { FieldsValidator } from './fields.interfaces' import { WidgetProps } from './widget.interfaces' export interface FormProps extends WidgetProps { + useCustomFields: boolean useCustomButton: boolean - isGenerateReceipt: boolean - children: ReactNode | ReactNode[] } export interface FormProviderProps { + additionalFields?: Field[] + nameFields: Field[] + isGenerateReceipt: boolean + isGenerateRequiredField: boolean disabled: boolean - children: ReactNode | ReactNode[] + children: ReactNode } -export interface FormContext extends FieldsValidator { +export interface FormContext extends FieldsValidator, FieldsState { + fields: Field[] | NameField[] disabled: boolean + isLoaded: boolean } diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index 01e66e7..36138b5 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/packages/payment-widget/src/interfaces/index.ts @@ -4,6 +4,6 @@ export * from './settings.interfaces' export * from './receipt.interfaces' export * from './styles.interfaces' export * from './theme.interfaces' -export * from './theme.interfaces' export * from './form.interfaces' export * from './wrappers.interfaces' +export * from './custom-elements.iterfaces' diff --git a/packages/payment-widget/src/interfaces/theme.interfaces.ts b/packages/payment-widget/src/interfaces/theme.interfaces.ts index 6f8c03d..057e8b2 100644 --- a/packages/payment-widget/src/interfaces/theme.interfaces.ts +++ b/packages/payment-widget/src/interfaces/theme.interfaces.ts @@ -1,6 +1,5 @@ import { ReactNode } from 'react' export interface ThemeProps { - useCustomTheme: boolean children: ReactNode } diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts index a437234..a077abe 100644 --- a/packages/payment-widget/src/interfaces/widget.interfaces.ts +++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts @@ -12,5 +12,5 @@ export interface WidgetProps { styles?: Styles additionalFields?: AdditionalField[] disabled?: boolean - children: ReactNode + children?: ReactNode } diff --git a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts index 199d34e..4f73550 100644 --- a/packages/payment-widget/src/interfaces/wrappers.interfaces.ts +++ b/packages/payment-widget/src/interfaces/wrappers.interfaces.ts @@ -1,8 +1,10 @@ -import { ReactElement } from 'react' +import { ReactElement } from 'react' -import { ButtonType } from '../enums' -import { HandleBlurField } from './fields.interfaces' -import { HandleChangeField } from './fields.interfaces' +import { AdditionalFieldsType } from '../enums' +import { ButtonType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { HandleBlurField } from './fields.interfaces' +import { HandleChangeField } from './fields.interfaces' interface ChildrenInputProps { name: string @@ -18,7 +20,7 @@ interface ChildrenButtonProps { } export interface InputWrapperProps { - name: string + name: AdditionalFieldsType | RequiredFieldsType children: (props: ChildrenInputProps) => ReactElement } diff --git a/packages/payment-widget/src/ui/fields.component.tsx b/packages/payment-widget/src/ui/fields.component.tsx index f222762..db2d20f 100644 --- a/packages/payment-widget/src/ui/fields.component.tsx +++ b/packages/payment-widget/src/ui/fields.component.tsx @@ -1,39 +1,32 @@ -import { Condition } from '@atls-ui-parts/condition' -import { HiddenInput } from '@atls-ui-parts/hidden-input' -import { Box } from '@atls-ui-parts/layout' -import { Column } from '@atls-ui-parts/layout' -import { Layout } from '@atls-ui-parts/layout' -import { Row } from '@atls-ui-parts/layout' +import { Condition } from '@atls-ui-parts/condition' +import { HiddenInput } from '@atls-ui-parts/hidden-input' +import { Box } from '@atls-ui-parts/layout' +import { Column } from '@atls-ui-parts/layout' +import { Layout } from '@atls-ui-parts/layout' +import { Row } from '@atls-ui-parts/layout' -import React from 'react' +import React from 'react' -import { RequiredFieldsType } from '../enums' -import { FieldState } from '../interfaces' -import { FieldsProps } from '../interfaces' -import { DirectionFields } from '../interfaces' -import { requiredFields } from '../data' -import { useFieldsState } from '../hooks' -import { useFieldsRenderer } from '../hooks' -import { addReceiptFieldsUtil } from '../utils' -import { useForm } from './form' +import { RequiredFieldsType } from '../enums' +import { FieldsProps } from '../interfaces' +import { DirectionFields } from '../interfaces' +import { useFieldsRenderer } from '../hooks' +import { useForm } from './form' export const Fields = ({ amount, - additionalFields = [], - isGenerateReceipt = false, direction = DirectionFields.Column, inputGaps = 16, + useCustomFields, }: FieldsProps) => { - const { errors, validateField } = useForm() - const processedFields = isGenerateReceipt - ? addReceiptFieldsUtil(additionalFields) - : additionalFields - const fields = !amount ? [...requiredFields, ...processedFields] : [...processedFields] - const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField, fields) + const { fields, fieldsState, handleChange, handleBlur, errors } = useForm() + + const fieldsForRender = useCustomFields ? [] : fields + const renderedFields = useFieldsRenderer( - fields, + fieldsForRender, errors, - fieldsState as FieldState, + fieldsState, handleChange, handleBlur, inputGaps diff --git a/packages/payment-widget/src/ui/form/form.component.tsx b/packages/payment-widget/src/ui/form/form.component.tsx index f562a07..e8d25e8 100644 --- a/packages/payment-widget/src/ui/form/form.component.tsx +++ b/packages/payment-widget/src/ui/form/form.component.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { FC } from 'react' import { FormEventHandler } from 'react' import { FormattedMessage } from 'react-intl' @@ -7,23 +6,20 @@ import { FormProps } from '../../interfaces' import { Button } from '../button/button.component' import { Fields } from '../fields.component' import { Settings } from '../settings.component' -import { useInit } from '../../hooks' import { makePayment } from '../../utils' import { makePaymentWithCheck } from '../../utils' import { useForm } from './use-form.hook' -export const Form: FC = ({ +export const Form = ({ settings, amount, receipt, styles, - additionalFields, useCustomButton, - isGenerateReceipt, + useCustomFields, children, -}) => { - const isLoaded = useInit() - const { isValidate, disabled } = useForm() +}: FormProps) => { + const { isValidate, disabled, isLoaded } = useForm() const payHandler: FormEventHandler = (event) => { event.preventDefault() if (!isValidate) return @@ -37,13 +33,12 @@ export const Form: FC = ({ return ( - + {children} {!useCustomButton && ( diff --git a/packages/payment-widget/src/ui/form/form.provider.tsx b/packages/payment-widget/src/ui/form/form.provider.tsx index 7ec66c0..baa9aef 100644 --- a/packages/payment-widget/src/ui/form/form.provider.tsx +++ b/packages/payment-widget/src/ui/form/form.provider.tsx @@ -1,16 +1,65 @@ -import React from 'react' -import { FC } from 'react' -import { useMemo } from 'react' +import React from 'react' +import { FC } from 'react' +import { useMemo } from 'react' -import { FormProviderProps } from '../../interfaces' -import { Provider } from './form.context' -import { useValidate } from '../../hooks' +import { AdditionalField } from '../../interfaces' +import { FormProviderProps } from '../../interfaces' +import { Provider } from './form.context' +import { requiredFields } from '../../data' +import { useFieldsState } from '../../hooks' +import { useInit } from '../../hooks' +import { useValidate } from '../../hooks' +import { addReceiptFieldsUtil } from '../../utils' -export const FormProvider: FC = ({ disabled, children }) => { +export const FormProvider: FC = ({ + additionalFields, + nameFields, + isGenerateReceipt, + isGenerateRequiredField, + disabled, + children, +}) => { const { errors, validateField, isValidate } = useValidate() + + const processedFields = + additionalFields && isGenerateReceipt + ? addReceiptFieldsUtil(additionalFields as AdditionalField[]) + : nameFields + const fields = useMemo( + () => + additionalFields && isGenerateRequiredField + ? [...requiredFields, ...processedFields] + : [...processedFields], + [additionalFields, isGenerateRequiredField, processedFields] + ) + + const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField, fields) + + const isLoaded = useInit() + const value = useMemo( - () => ({ errors, validateField, isValidate, disabled }), - [errors, validateField, isValidate, disabled] + () => ({ + fields, + fieldsState, + handleChange, + handleBlur, + errors, + validateField, + isValidate, + disabled, + isLoaded, + }), + [ + fields, + fieldsState, + handleChange, + handleBlur, + errors, + validateField, + isValidate, + disabled, + isLoaded, + ] ) return {children} diff --git a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx index 5196fd7..8d7e06b 100644 --- a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx +++ b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx @@ -7,9 +7,6 @@ import { FC } from 'react' import { ThemeProps } from '../../../interfaces' -export const ThemeProvider: FC = ({ useCustomTheme, children }) => - useCustomTheme ? ( - <>{children} // eslint-disable-line - ) : ( - {children} - ) +export const ThemeProvider: FC = ({ children }) => ( + {children} +) diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index 40bf6b6..f77333a 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,24 +1,21 @@ -import * as messagesRu from '../locales/ru.json' -import * as messagesEn from '../locales/en.json' +import * as messagesRu from '../locales/ru.json' +import * as messagesEn from '../locales/en.json' -import React from 'react' -import { Children } from 'react' -import { FC } from 'react' -import { IntlProvider } from 'react-intl' -import { isValidElement } from 'react' +import React from 'react' +import { IntlProvider } from 'react-intl' -import { LanguagesType } from '../enums' -import { WidgetProps } from '../interfaces' -import { Form } from './form' -import { FormProvider } from './form/form.provider' -import { ThemeProvider } from './theme/src' +import { LanguagesType } from '../enums' +import { WidgetProps } from '../interfaces' +import { Form } from './form' +import { FormProvider } from './form/form.provider' +import { useCustomElements } from '../hooks' const messages = { [LanguagesType.RUSSIAN]: messagesRu, [LanguagesType.ENGLISH]: messagesEn, } -export const Widget: FC = ({ +export const Widget = ({ amount, settings, receipt, @@ -26,42 +23,37 @@ export const Widget: FC = ({ styles, disabled, children, -}) => { +}: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN - const childrenArray = Children.toArray(children) - const customFields = childrenArray.filter((child) => - isValidElement(child) // @ts-ignore - ? child.type.name === 'InputWrapper' && typeof child.props.children === 'function' - : false) - const customButton = childrenArray.find((child) => - isValidElement(child) // @ts-ignore - ? child.type.name === 'ButtonWrapper' && typeof child.props.children === 'function' - : false) - // @ts-ignore - const isGenerateReceipt = !!receipt && !customFields.find((field) => field.props.name === 'email') + const { + customFields, + customButton, + isGenerateReceiptField, + isGenerateRequiredField, + nameFields, + } = useCustomElements(!!amount, !!receipt, !!additionalFields?.length, children) return ( - - + - - - {customFields} - {customButton} - - - - +
+ {customFields} + {customButton} +
+ + ) } 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 361b7f1..b803c6a 100644 --- a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx @@ -1,13 +1,15 @@ -import { FC } from 'react' - import { ButtonType } from '../../enums' import { ButtonWrapperProps } from '../../interfaces' import { useForm } from '../form' -export const ButtonWrapper: FC = ({ children }) => { - const { disabled } = useForm() +export const ButtonWrapper = ({ children }: ButtonWrapperProps) => { + const { disabled, isLoaded } = useForm() + if (typeof children === 'function') { - return children({ type: ButtonType.Submit, disabled }) + return children({ + type: ButtonType.Submit, + disabled: disabled || !isLoaded, + }) } return null diff --git a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx index 83e0532..4c42fd5 100644 --- a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx @@ -2,20 +2,18 @@ import { FC } from 'react' import { useIntl } from 'react-intl' import { InputWrapperProps } from '../../interfaces' -import { useFieldsState } from '../../hooks' import { translate } from '../../utils/translate.util' import { useForm } from '../form' export const InputWrapper: FC = ({ name, children }) => { - const { errors, validateField } = useForm() - const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField) + const { fieldsState, handleChange, handleBlur, errors } = useForm() const intl = useIntl() const translateError = translate(intl, errors[name], errors[name]) if (typeof children === 'function') { return children({ name, - value: fieldsState as string, + value: fieldsState[name], onChangeNative: handleChange, onBlur: handleBlur, errorText: translateError, diff --git a/packages/payment-widget/src/utils/add-receipt-fields.util.ts b/packages/payment-widget/src/utils/add-receipt-fields.util.ts index 8862826..dec2d61 100644 --- a/packages/payment-widget/src/utils/add-receipt-fields.util.ts +++ b/packages/payment-widget/src/utils/add-receipt-fields.util.ts @@ -8,7 +8,5 @@ export const addReceiptFieldsUtil = (additionalFields: AdditionalField[]) => { field.name === AdditionalFieldsType.Email || field.name === AdditionalFieldsType.Phone ) - if (missingReceiptFields) return [...receiptFields, ...additionalFields] - - return additionalFields + return missingReceiptFields ? [...receiptFields, ...additionalFields] : additionalFields } From bf5b80389bbe2f56c3224f716d59f91230263d0d Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Tue, 28 Nov 2023 10:38:31 +0400 Subject: [PATCH 19/25] fix: useMemo props for custom-elements hook, use Condition in wrappers, fix interfaces --- .../src/hooks/use-custom-elements.hook.ts | 19 +++++++------- .../interfaces/custom-elements.iterfaces.ts | 7 ++++++ .../src/ui/widget.component.tsx | 12 ++++++++- .../ui/wrapper/button-wrapper.component.tsx | 23 ++++++++++------- .../ui/wrapper/input-wrapper.component.tsx | 25 +++++++++++-------- 5 files changed, 56 insertions(+), 30 deletions(-) diff --git a/packages/payment-widget/src/hooks/use-custom-elements.hook.ts b/packages/payment-widget/src/hooks/use-custom-elements.hook.ts index fcf07ed..792f225 100644 --- a/packages/payment-widget/src/hooks/use-custom-elements.hook.ts +++ b/packages/payment-widget/src/hooks/use-custom-elements.hook.ts @@ -6,17 +6,18 @@ import { isValidElement } from 'react' import { AdditionalFieldsType } from '../enums' import { RequiredFieldsType } from '../enums' import { CustomElements } from '../interfaces' +import { CustomElementsProps } from '../interfaces' import { Field } from '../interfaces' -export const useCustomElements = ( - existAmount: boolean, - existReceipt: boolean, - existAdditionalFields: boolean, - nodes: ReactNode -): CustomElements => { +export const useCustomElements = ({ + existAmount, + existReceipt, + existAdditionalFields, + nodes, +}: CustomElementsProps): CustomElements => { const nodeArray = Children.toArray(nodes) - const isCastomElement = (nameNode: string, node: ReactNode): boolean => + const isCustomElement = (nameNode: string, node: ReactNode): boolean => isValidElement(node) ? (node.type as JSXElementConstructor).name === nameNode && typeof node.props.children === 'function' @@ -28,7 +29,7 @@ export const useCustomElements = ( const customFields = nodeArray.filter( (node) => - isCastomElement('InputWrapper', node) && (isAdditionalField(node) || isRequiredField(node)) + isCustomElement('InputWrapper', node) && (isAdditionalField(node) || isRequiredField(node)) ) const nameFields = customFields.reduce((acc, field) => { if (isValidElement(field)) @@ -38,7 +39,7 @@ export const useCustomElements = ( return acc }, []) - const customButton = nodeArray.find((node) => isCastomElement('ButtonWrapper', node)) + const customButton = nodeArray.find((node) => isCustomElement('ButtonWrapper', node)) const isGenerateReceiptField = existReceipt && !customFields.length diff --git a/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts b/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts index 2430dd6..e298902 100644 --- a/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts +++ b/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts @@ -11,3 +11,10 @@ export interface CustomElements { isGenerateRequiredField: boolean nameFields: Field[] } + +export interface CustomElementsProps { + existAmount: boolean + existReceipt: boolean + existAdditionalFields: boolean + nodes: ReactNode +} diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index f77333a..f0f11fa 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -2,6 +2,7 @@ import * as messagesRu from '../locales/ru.json' import * as messagesEn from '../locales/en.json' import React from 'react' +import { useMemo } from 'react' import { IntlProvider } from 'react-intl' import { LanguagesType } from '../enums' @@ -25,13 +26,22 @@ export const Widget = ({ children, }: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN + const customElementsProps = useMemo( + () => ({ + existAmount: !!amount, + existReceipt: !!receipt, + existAdditionalFields: !!additionalFields?.length, + nodes: children, + }), + [amount, receipt, additionalFields, children] + ) const { customFields, customButton, isGenerateReceiptField, isGenerateRequiredField, nameFields, - } = useCustomElements(!!amount, !!receipt, !!additionalFields?.length, children) + } = useCustomElements(customElementsProps) return ( 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 b803c6a..363c494 100644 --- a/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/button-wrapper.component.tsx @@ -1,16 +1,21 @@ +import { Condition } from '@atls-ui-parts/condition' + +import React from 'react' +import { FC } from 'react' + import { ButtonType } from '../../enums' import { ButtonWrapperProps } from '../../interfaces' import { useForm } from '../form' -export const ButtonWrapper = ({ children }: ButtonWrapperProps) => { +export const ButtonWrapper: FC = ({ children }) => { const { disabled, isLoaded } = useForm() - if (typeof children === 'function') { - return children({ - type: ButtonType.Submit, - disabled: disabled || !isLoaded, - }) - } - - return null + return ( + + {children({ + type: ButtonType.Submit, + disabled: disabled || !isLoaded, + })} + + ) } diff --git a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx index 4c42fd5..e2c417b 100644 --- a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx +++ b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx @@ -1,3 +1,6 @@ +import { Condition } from '@atls-ui-parts/condition' + +import React from 'react' import { FC } from 'react' import { useIntl } from 'react-intl' @@ -10,15 +13,15 @@ export const InputWrapper: FC = ({ name, children }) => { const intl = useIntl() const translateError = translate(intl, errors[name], errors[name]) - if (typeof children === 'function') { - return children({ - name, - value: fieldsState[name], - onChangeNative: handleChange, - onBlur: handleBlur, - errorText: translateError, - }) - } - - return null + return ( + + {children({ + name, + value: fieldsState[name], + onChangeNative: handleChange, + onBlur: handleBlur, + errorText: translateError, + })} + + ) } From 78bbb3d62934f57afca048c2a7a1849113559651 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Tue, 28 Nov 2023 16:06:50 +0400 Subject: [PATCH 20/25] fix: add fields hook, button hook, utils --- packages/payment-widget/src/enums/index.ts | 1 + .../payment-widget/src/enums/wrapper.enum.ts | 5 +++ packages/payment-widget/src/hooks/index.ts | 3 +- .../src/hooks/use-castom-button.hook.ts | 7 +++ ...ents.hook.ts => use-custom-fields.hook.ts} | 44 ++++++------------- ...terfaces.ts => custom-fields.iterfaces.ts} | 8 ++-- .../src/interfaces/form.interfaces.ts | 2 +- .../payment-widget/src/interfaces/index.ts | 2 +- .../src/ui/widget.component.tsx | 41 ++++++++--------- .../src/utils/get-name-fields.util.ts | 16 +++++++ packages/payment-widget/src/utils/index.ts | 2 + .../src/utils/is-custom-element.util.ts | 11 +++++ 12 files changed, 83 insertions(+), 59 deletions(-) create mode 100644 packages/payment-widget/src/enums/wrapper.enum.ts create mode 100644 packages/payment-widget/src/hooks/use-castom-button.hook.ts rename packages/payment-widget/src/hooks/{use-custom-elements.hook.ts => use-custom-fields.hook.ts} (57%) rename packages/payment-widget/src/interfaces/{custom-elements.iterfaces.ts => custom-fields.iterfaces.ts} (68%) create mode 100644 packages/payment-widget/src/utils/get-name-fields.util.ts create mode 100644 packages/payment-widget/src/utils/is-custom-element.util.ts diff --git a/packages/payment-widget/src/enums/index.ts b/packages/payment-widget/src/enums/index.ts index 6bd8db6..8715c59 100644 --- a/packages/payment-widget/src/enums/index.ts +++ b/packages/payment-widget/src/enums/index.ts @@ -5,3 +5,4 @@ export * from './payment-object.enum' export * from './tax.enum' export * from './taxation.enum' export * from './button.enum' +export * from './wrapper.enum' diff --git a/packages/payment-widget/src/enums/wrapper.enum.ts b/packages/payment-widget/src/enums/wrapper.enum.ts new file mode 100644 index 0000000..0d5191a --- /dev/null +++ b/packages/payment-widget/src/enums/wrapper.enum.ts @@ -0,0 +1,5 @@ +/* eslint-disable no-shadow */ +export enum NameWrapperComponent { + InputWrapper = 'InputWrapper', + ButtonWrapper = 'ButtonWrapper', +} diff --git a/packages/payment-widget/src/hooks/index.ts b/packages/payment-widget/src/hooks/index.ts index dae3d4f..ff18a10 100644 --- a/packages/payment-widget/src/hooks/index.ts +++ b/packages/payment-widget/src/hooks/index.ts @@ -2,4 +2,5 @@ export * from './use-init.hook' export { useValidate } from './use-validate.hook' export { useFieldsState } from './use-fields-state.hook' export { useFieldsRenderer } from './use-fields-render.hook' -export { useCustomElements } from './use-custom-elements.hook' +export { useCustomFields } from './use-custom-fields.hook' +export { useCustomButton } from './use-castom-button.hook' diff --git a/packages/payment-widget/src/hooks/use-castom-button.hook.ts b/packages/payment-widget/src/hooks/use-castom-button.hook.ts new file mode 100644 index 0000000..87ed3b4 --- /dev/null +++ b/packages/payment-widget/src/hooks/use-castom-button.hook.ts @@ -0,0 +1,7 @@ +import { ReactNode } from 'react' + +import { NameWrapperComponent } from '../enums' +import { isCustomElement } from '../utils' + +export const useCustomButton = (nodeArray: ReactNode[]): ReactNode => + nodeArray.find((node) => isCustomElement(NameWrapperComponent.ButtonWrapper, node)) diff --git a/packages/payment-widget/src/hooks/use-custom-elements.hook.ts b/packages/payment-widget/src/hooks/use-custom-fields.hook.ts similarity index 57% rename from packages/payment-widget/src/hooks/use-custom-elements.hook.ts rename to packages/payment-widget/src/hooks/use-custom-fields.hook.ts index 792f225..902b874 100644 --- a/packages/payment-widget/src/hooks/use-custom-elements.hook.ts +++ b/packages/payment-widget/src/hooks/use-custom-fields.hook.ts @@ -1,27 +1,19 @@ -import { Children } from 'react' -import { ReactNode } from 'react' -import { JSXElementConstructor } from 'react' -import { isValidElement } from 'react' +import { ReactNode } from 'react' +import { isValidElement } from 'react' -import { AdditionalFieldsType } from '../enums' -import { RequiredFieldsType } from '../enums' -import { CustomElements } from '../interfaces' -import { CustomElementsProps } from '../interfaces' -import { Field } from '../interfaces' +import { AdditionalFieldsType } from '../enums' +import { NameWrapperComponent } from '../enums' +import { RequiredFieldsType } from '../enums' +import { CustomFields } from '../interfaces' +import { CustomFieldsProps } from '../interfaces' +import { isCustomElement } from '../utils' -export const useCustomElements = ({ +export const useCustomFields = ({ existAmount, existReceipt, existAdditionalFields, - nodes, -}: CustomElementsProps): CustomElements => { - const nodeArray = Children.toArray(nodes) - - const isCustomElement = (nameNode: string, node: ReactNode): boolean => - isValidElement(node) - ? (node.type as JSXElementConstructor).name === nameNode && - typeof node.props.children === 'function' - : false + nodeArray, +}: CustomFieldsProps): CustomFields => { const isAdditionalField = (node: ReactNode): boolean => isValidElement(node) ? Object.values(AdditionalFieldsType).includes(node.props.name) : false const isRequiredField = (node: ReactNode): boolean => @@ -29,17 +21,9 @@ export const useCustomElements = ({ const customFields = nodeArray.filter( (node) => - isCustomElement('InputWrapper', node) && (isAdditionalField(node) || isRequiredField(node)) + isCustomElement(NameWrapperComponent.InputWrapper, node) && + (isAdditionalField(node) || isRequiredField(node)) ) - const nameFields = customFields.reduce((acc, field) => { - if (isValidElement(field)) - acc.push({ - name: AdditionalFieldsType[field.props.name] || RequiredFieldsType[field.props.name], - }) - return acc - }, []) - - const customButton = nodeArray.find((node) => isCustomElement('ButtonWrapper', node)) const isGenerateReceiptField = existReceipt && !customFields.length @@ -70,9 +54,7 @@ export const useCustomElements = ({ return { customFields, - customButton, isGenerateReceiptField, isGenerateRequiredField, - nameFields, } } diff --git a/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts b/packages/payment-widget/src/interfaces/custom-fields.iterfaces.ts similarity index 68% rename from packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts rename to packages/payment-widget/src/interfaces/custom-fields.iterfaces.ts index e298902..831bfe8 100644 --- a/packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts +++ b/packages/payment-widget/src/interfaces/custom-fields.iterfaces.ts @@ -4,17 +4,15 @@ import { Field } from './fields.interfaces' export type NameField = Pick -export interface CustomElements { +export interface CustomFields { customFields: ReactNode[] - customButton: ReactNode isGenerateReceiptField: boolean isGenerateRequiredField: boolean - nameFields: Field[] } -export interface CustomElementsProps { +export interface CustomFieldsProps { existAmount: boolean existReceipt: boolean existAdditionalFields: boolean - nodes: ReactNode + nodeArray: ReactNode[] } diff --git a/packages/payment-widget/src/interfaces/form.interfaces.ts b/packages/payment-widget/src/interfaces/form.interfaces.ts index 811794f..c3023ac 100644 --- a/packages/payment-widget/src/interfaces/form.interfaces.ts +++ b/packages/payment-widget/src/interfaces/form.interfaces.ts @@ -1,6 +1,6 @@ import { ReactNode } from 'react' -import { NameField } from './custom-elements.iterfaces' +import { NameField } from './custom-fields.iterfaces' import { Field } from './fields.interfaces' import { FieldsState } from './fields.interfaces' import { FieldsValidator } from './fields.interfaces' diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts index 36138b5..fd499ca 100644 --- a/packages/payment-widget/src/interfaces/index.ts +++ b/packages/payment-widget/src/interfaces/index.ts @@ -6,4 +6,4 @@ export * from './styles.interfaces' export * from './theme.interfaces' export * from './form.interfaces' export * from './wrappers.interfaces' -export * from './custom-elements.iterfaces' +export * from './custom-fields.iterfaces' diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index f0f11fa..b43034d 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,15 +1,18 @@ -import * as messagesRu from '../locales/ru.json' -import * as messagesEn from '../locales/en.json' +import * as messagesRu from '../locales/ru.json' +import * as messagesEn from '../locales/en.json' -import React from 'react' -import { useMemo } from 'react' -import { IntlProvider } from 'react-intl' +import React from 'react' +import { Children } from 'react' +import { IntlProvider } from 'react-intl' +import { useMemo } from 'react' -import { LanguagesType } from '../enums' -import { WidgetProps } from '../interfaces' -import { Form } from './form' -import { FormProvider } from './form/form.provider' -import { useCustomElements } from '../hooks' +import { LanguagesType } from '../enums' +import { WidgetProps } from '../interfaces' +import { Form } from './form' +import { FormProvider } from './form/form.provider' +import { useCustomButton } from '../hooks' +import { useCustomFields } from '../hooks' +import { getNameFields } from '../utils' const messages = { [LanguagesType.RUSSIAN]: messagesRu, @@ -26,22 +29,20 @@ export const Widget = ({ children, }: WidgetProps) => { const locale = settings.language ?? LanguagesType.RUSSIAN - const customElementsProps = useMemo( + const childrenArray = Children.toArray(children) + const customFieldsProps = useMemo( () => ({ existAmount: !!amount, existReceipt: !!receipt, existAdditionalFields: !!additionalFields?.length, - nodes: children, + nodeArray: childrenArray, }), - [amount, receipt, additionalFields, children] + [amount, receipt, additionalFields, childrenArray] ) - const { - customFields, - customButton, - isGenerateReceiptField, - isGenerateRequiredField, - nameFields, - } = useCustomElements(customElementsProps) + const { customFields, isGenerateReceiptField, isGenerateRequiredField } = + useCustomFields(customFieldsProps) + const customButton = useCustomButton(childrenArray) + const nameFields = getNameFields(customFields) return ( diff --git a/packages/payment-widget/src/utils/get-name-fields.util.ts b/packages/payment-widget/src/utils/get-name-fields.util.ts new file mode 100644 index 0000000..d715034 --- /dev/null +++ b/packages/payment-widget/src/utils/get-name-fields.util.ts @@ -0,0 +1,16 @@ +import { ReactNode } from 'react' + +import { isValidElement } from 'react' + +import { AdditionalFieldsType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { Field } from '../interfaces' + +export const getNameFields = (customFields: ReactNode[]) => + customFields.reduce((acc, field) => { + if (isValidElement(field)) + acc.push({ + name: AdditionalFieldsType[field.props.name] || RequiredFieldsType[field.props.name], + }) + return acc + }, []) diff --git a/packages/payment-widget/src/utils/index.ts b/packages/payment-widget/src/utils/index.ts index 140d34b..6c0fb00 100644 --- a/packages/payment-widget/src/utils/index.ts +++ b/packages/payment-widget/src/utils/index.ts @@ -1,3 +1,5 @@ export * from './pay.util' export * from './add-receipt-fields.util' export * from './convert-to-penny.util' +export * from './is-custom-element.util' +export * from './get-name-fields.util' diff --git a/packages/payment-widget/src/utils/is-custom-element.util.ts b/packages/payment-widget/src/utils/is-custom-element.util.ts new file mode 100644 index 0000000..5d59981 --- /dev/null +++ b/packages/payment-widget/src/utils/is-custom-element.util.ts @@ -0,0 +1,11 @@ +import { ReactNode } from 'react' +import { JSXElementConstructor } from 'react' +import { isValidElement } from 'react' + +import { NameWrapperComponent } from '../enums' + +export const isCustomElement = (nameNode: NameWrapperComponent, node: ReactNode): boolean => + isValidElement(node) + ? (node.type as JSXElementConstructor).name === nameNode && + typeof node.props.children === 'function' + : false From 4272da8350f3691dd1572ffc95e46938b80cca0e Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Tue, 28 Nov 2023 18:33:05 +0400 Subject: [PATCH 21/25] docs: add README.md --- packages/payment-widget/README.md | 68 +++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 packages/payment-widget/README.md diff --git a/packages/payment-widget/README.md b/packages/payment-widget/README.md new file mode 100644 index 0000000..d27b9a4 --- /dev/null +++ b/packages/payment-widget/README.md @@ -0,0 +1,68 @@ +# Применение + +## С темой виджета + +Для корректной работы Виджета достаточно атрибуту `settings` назначить объект с ключом `storeID`: + +```tsx +import { Widget } from "@atls/react-payment-widget"; +export const Form = () => ; +``` + +Для добавления дополнительных полей используйте атрибут `additionalFields` который принимает в себя массив объектов с обязательным ключом `name`. + +Атрибут `amount` принимает сумму платежа. Без заданного значения Виджет генерирует обязательное поле для ввода суммы. + +```tsx +import { Widget, AdditionalFieldsType } from "@atls/react-payment-widget"; +export const Form = () => ( + +); +``` + +## С темой проекта + +Если Вы хотите использовать кастомные поля и кнопку, то используйте предоставляемые Виджетом обёртки `InputWrapper` и `ButtonWrapper`. `InputWrapper` принимает обязательный атрибут `name`. + +```tsx +import { + Widget, + AdditionalFieldsType, + InputWrapper, + ButtonWrapper, +} from "@atls/react-payment-widget"; +export const Form = () => ( + + + {(props) => } + + + {(props) => } + + +); +``` + +> [!WARNING] +> Не используйте атрибут `additionalFields` совместно с `InputWrapper`, это приведет к исключению. +> Так же, при использовании `InputWrapper` Виджет не генерирует дополнительные поля. + +## Экспортируемые компоненты + +**Widget** - главный компонент Виджета. + +**InputWrapper** - компонент обёртка для полей ввода. + +**ButtonWrapper** - компонент обёртка для кнопки. + +**AdditionalFieldsType** - интерфейс дополнительных полей. + +**RequiredFieldsType** - интерфейс обязательных полей. From cfc8b6bd1957b8b1af75a6b65e71482ff6538cbe Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 29 Nov 2023 12:10:18 +0400 Subject: [PATCH 22/25] docs: edit README.md --- packages/payment-widget/README.md | 79 +++++++++---------- packages/payment-widget/src/hooks/index.ts | 2 +- ...tton.hook.ts => use-custom-button.hook.ts} | 0 .../src/hooks/use-custom-fields.hook.ts | 14 ++-- .../src/ui/widget.component.tsx | 24 +++--- .../src/utils/get-name-fields.util.ts | 11 ++- 6 files changed, 61 insertions(+), 69 deletions(-) rename packages/payment-widget/src/hooks/{use-castom-button.hook.ts => use-custom-button.hook.ts} (100%) diff --git a/packages/payment-widget/README.md b/packages/payment-widget/README.md index d27b9a4..ee7783b 100644 --- a/packages/payment-widget/README.md +++ b/packages/payment-widget/README.md @@ -1,68 +1,61 @@ -# Применение +# @atls/react-payment-widget -## С темой виджета +[//]: # 'VERSIONS' -Для корректной работы Виджета достаточно атрибуту `settings` назначить объект с ключом `storeID`: +## [](https://www.npmjs.com/package/@atls-ui-parts/button/v/0.0.12) [](https://www.npmjs.com/package/@atls-ui-parts/condition/v/0.0.4) [](https://www.npmjs.com/package/@atls-ui-parts/hidden-input/v/0.0.6) [](https://www.npmjs.com/package/@atls-ui-parts/input/v/0.0.13) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/react-intl/v/6.4.4) [](https://www.npmjs.com/package/react-laag) [](https://www.npmjs.com/package/styled-tools) -```tsx -import { Widget } from "@atls/react-payment-widget"; -export const Form = () => ; -``` +**@atls/react-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`. -Для добавления дополнительных полей используйте атрибут `additionalFields` который принимает в себя массив объектов с обязательным ключом `name`. +## Использование со стандартной темой -Атрибут `amount` принимает сумму платежа. Без заданного значения Виджет генерирует обязательное поле для ввода суммы. +Для корректной работы **@atls/react-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`: ```tsx -import { Widget, AdditionalFieldsType } from "@atls/react-payment-widget"; -export const Form = () => ( - -); +import { Widget } from '@atls/react-payment-widget' +export const Form = () => ``` -## С темой проекта +Основные атрибуты для компонента `Widget`: + +- **`settings`** - обязательный атрибут, принимает объект с настройками для терминала. +- **`amount`** - опциональный атрибут, принимает сумму платежа.Без заданного значения `Widget` генерирует обязательное поле для ввода суммы. +- **`additionalFields`** - опциональный атрибут для добавления дополнительных полей, принимает массив объектов с обязательным ключом `name`. +- **`receipt`** - опциональный атрибут, принимает объект с настройками для генерации чека. +- **`styles`** - опциональный атрибут, принимает объект с настройками для генерации чека. +- **`disabled`** - опциональный атрибут для управлением активным состоянием кнопки, принимает булево значение. + +## Использование с кастомной темой + +**@atls/react-payment-widget** предусматривает возможность использования стилизованных полей ввода и кнопки из Вашего проекта. Для этого предоставляются компоненты обёртки `InputWrapper` и `ButtonWrapper`. -Если Вы хотите использовать кастомные поля и кнопку, то используйте предоставляемые Виджетом обёртки `InputWrapper` и `ButtonWrapper`. `InputWrapper` принимает обязательный атрибут `name`. +`InputWrapper` принимает обязательный атрибут `name`. ```tsx -import { - Widget, - AdditionalFieldsType, - InputWrapper, - ButtonWrapper, -} from "@atls/react-payment-widget"; +import { AdditionalFieldsType } from '@atls/react-payment-widget' +import { ButtonWrapper } from '@atls/react-payment-widget' +import { InputWrapper } from '@atls/react-payment-widget' +import { Widget } from '@atls/react-payment-widget' export const Form = () => ( - - - {(props) => } - - - {(props) => } - + + {(props) => } + {(props) => } -); +) ``` -> [!WARNING] +> [!WARNING] > Не используйте атрибут `additionalFields` совместно с `InputWrapper`, это приведет к исключению. +> > Так же, при использовании `InputWrapper` Виджет не генерирует дополнительные поля. ## Экспортируемые компоненты -**Widget** - главный компонент Виджета. +[**Widget**]() - главный компонент Виджета. -**InputWrapper** - компонент обёртка для полей ввода. +[**InputWrapper**]() - компонент обёртка для полей ввода. -**ButtonWrapper** - компонент обёртка для кнопки. +[**ButtonWrapper**]() - компонент обёртка для кнопки. -**AdditionalFieldsType** - интерфейс дополнительных полей. +[**AdditionalFieldsType**]() - интерфейс дополнительных полей. -**RequiredFieldsType** - интерфейс обязательных полей. +[**RequiredFieldsType**]() - интерфейс обязательных полей. diff --git a/packages/payment-widget/src/hooks/index.ts b/packages/payment-widget/src/hooks/index.ts index ff18a10..cd0e192 100644 --- a/packages/payment-widget/src/hooks/index.ts +++ b/packages/payment-widget/src/hooks/index.ts @@ -3,4 +3,4 @@ export { useValidate } from './use-validate.hook' export { useFieldsState } from './use-fields-state.hook' export { useFieldsRenderer } from './use-fields-render.hook' export { useCustomFields } from './use-custom-fields.hook' -export { useCustomButton } from './use-castom-button.hook' +export { useCustomButton } from './use-custom-button.hook' diff --git a/packages/payment-widget/src/hooks/use-castom-button.hook.ts b/packages/payment-widget/src/hooks/use-custom-button.hook.ts similarity index 100% rename from packages/payment-widget/src/hooks/use-castom-button.hook.ts rename to packages/payment-widget/src/hooks/use-custom-button.hook.ts diff --git a/packages/payment-widget/src/hooks/use-custom-fields.hook.ts b/packages/payment-widget/src/hooks/use-custom-fields.hook.ts index 902b874..326502e 100644 --- a/packages/payment-widget/src/hooks/use-custom-fields.hook.ts +++ b/packages/payment-widget/src/hooks/use-custom-fields.hook.ts @@ -1,12 +1,12 @@ -import { ReactNode } from 'react' -import { isValidElement } from 'react' +import { ReactNode } from 'react' +import { isValidElement } from 'react' -import { AdditionalFieldsType } from '../enums' +import { AdditionalFieldsType } from '../enums' import { NameWrapperComponent } from '../enums' -import { RequiredFieldsType } from '../enums' -import { CustomFields } from '../interfaces' -import { CustomFieldsProps } from '../interfaces' -import { isCustomElement } from '../utils' +import { RequiredFieldsType } from '../enums' +import { CustomFields } from '../interfaces' +import { CustomFieldsProps } from '../interfaces' +import { isCustomElement } from '../utils' export const useCustomFields = ({ existAmount, diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index b43034d..0e18633 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,18 +1,18 @@ -import * as messagesRu from '../locales/ru.json' -import * as messagesEn from '../locales/en.json' +import * as messagesRu from '../locales/ru.json' +import * as messagesEn from '../locales/en.json' -import React from 'react' -import { Children } from 'react' -import { IntlProvider } from 'react-intl' -import { useMemo } from 'react' +import React from 'react' +import { Children } from 'react' +import { IntlProvider } from 'react-intl' +import { useMemo } from 'react' -import { LanguagesType } from '../enums' -import { WidgetProps } from '../interfaces' -import { Form } from './form' -import { FormProvider } from './form/form.provider' -import { useCustomButton } from '../hooks' +import { LanguagesType } from '../enums' +import { WidgetProps } from '../interfaces' +import { Form } from './form' +import { FormProvider } from './form/form.provider' +import { useCustomButton } from '../hooks' import { useCustomFields } from '../hooks' -import { getNameFields } from '../utils' +import { getNameFields } from '../utils' const messages = { [LanguagesType.RUSSIAN]: messagesRu, diff --git a/packages/payment-widget/src/utils/get-name-fields.util.ts b/packages/payment-widget/src/utils/get-name-fields.util.ts index d715034..cda9547 100644 --- a/packages/payment-widget/src/utils/get-name-fields.util.ts +++ b/packages/payment-widget/src/utils/get-name-fields.util.ts @@ -1,10 +1,9 @@ -import { ReactNode } from 'react' +import { ReactNode } from 'react' +import { isValidElement } from 'react' -import { isValidElement } from 'react' - -import { AdditionalFieldsType } from '../enums' -import { RequiredFieldsType } from '../enums' -import { Field } from '../interfaces' +import { AdditionalFieldsType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { Field } from '../interfaces' export const getNameFields = (customFields: ReactNode[]) => customFields.reduce((acc, field) => { From 759c5c0819f5dcb0738fa1857055368c32e91d03 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 29 Nov 2023 13:30:22 +0400 Subject: [PATCH 23/25] fix: get-name-fields util --- packages/payment-widget/README.md | 6 +++--- .../payment-widget/src/utils/get-name-fields.util.ts | 10 ++++------ 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/payment-widget/README.md b/packages/payment-widget/README.md index ee7783b..f59387e 100644 --- a/packages/payment-widget/README.md +++ b/packages/payment-widget/README.md @@ -32,9 +32,9 @@ export const Form = () => ```tsx import { AdditionalFieldsType } from '@atls/react-payment-widget' -import { ButtonWrapper } from '@atls/react-payment-widget' -import { InputWrapper } from '@atls/react-payment-widget' -import { Widget } from '@atls/react-payment-widget' +import { ButtonWrapper } from '@atls/react-payment-widget' +import { InputWrapper } from '@atls/react-payment-widget' +import { Widget } from '@atls/react-payment-widget' export const Form = () => ( {(props) => } diff --git a/packages/payment-widget/src/utils/get-name-fields.util.ts b/packages/payment-widget/src/utils/get-name-fields.util.ts index cda9547..63e5b15 100644 --- a/packages/payment-widget/src/utils/get-name-fields.util.ts +++ b/packages/payment-widget/src/utils/get-name-fields.util.ts @@ -1,15 +1,13 @@ -import { ReactNode } from 'react' -import { isValidElement } from 'react' +import { ReactNode } from 'react' +import { isValidElement } from 'react' -import { AdditionalFieldsType } from '../enums' -import { RequiredFieldsType } from '../enums' -import { Field } from '../interfaces' +import { Field } from '../interfaces' export const getNameFields = (customFields: ReactNode[]) => customFields.reduce((acc, field) => { if (isValidElement(field)) acc.push({ - name: AdditionalFieldsType[field.props.name] || RequiredFieldsType[field.props.name], + name: field.props.name, }) return acc }, []) From 6b3cc3d9cf26db0196dafa7c0fdae4615c64cf81 Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 29 Nov 2023 18:17:56 +0400 Subject: [PATCH 24/25] docs: edit package name --- packages/payment-widget/README.md | 34 ++++++++++++++++------------ packages/payment-widget/package.json | 2 +- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/payment-widget/README.md b/packages/payment-widget/README.md index f59387e..f2f273a 100644 --- a/packages/payment-widget/README.md +++ b/packages/payment-widget/README.md @@ -1,18 +1,18 @@ -# @atls/react-payment-widget +# @atls/tinkoff-payment-widget -[//]: # 'VERSIONS' +[//]: # "VERSIONS" ## [](https://www.npmjs.com/package/@atls-ui-parts/button/v/0.0.12) [](https://www.npmjs.com/package/@atls-ui-parts/condition/v/0.0.4) [](https://www.npmjs.com/package/@atls-ui-parts/hidden-input/v/0.0.6) [](https://www.npmjs.com/package/@atls-ui-parts/input/v/0.0.13) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/react-intl/v/6.4.4) [](https://www.npmjs.com/package/react-laag) [](https://www.npmjs.com/package/styled-tools) -**@atls/react-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`. +**@atls/tinkoff-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`. ## Использование со стандартной темой -Для корректной работы **@atls/react-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`: +Для корректной работы **@atls/tinkoff-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`: ```tsx -import { Widget } from '@atls/react-payment-widget' -export const Form = () => +import { Widget } from "@atls/tinkoff-payment-widget"; +export const Form = () => ; ``` Основные атрибуты для компонента `Widget`: @@ -26,21 +26,25 @@ export const Form = () => ## Использование с кастомной темой -**@atls/react-payment-widget** предусматривает возможность использования стилизованных полей ввода и кнопки из Вашего проекта. Для этого предоставляются компоненты обёртки `InputWrapper` и `ButtonWrapper`. +**@atls/tinkoff-payment-widget** предусматривает возможность использования стилизованных полей ввода и кнопки из Вашего проекта. Для этого предоставляются компоненты обёртки `InputWrapper` и `ButtonWrapper`. `InputWrapper` принимает обязательный атрибут `name`. ```tsx -import { AdditionalFieldsType } from '@atls/react-payment-widget' -import { ButtonWrapper } from '@atls/react-payment-widget' -import { InputWrapper } from '@atls/react-payment-widget' -import { Widget } from '@atls/react-payment-widget' +import { AdditionalFieldsType } from "@atls/tinkoff-payment-widget"; +import { ButtonWrapper } from "@atls/tinkoff-payment-widget"; +import { InputWrapper } from "@atls/tinkoff-payment-widget"; +import { Widget } from "@atls/tinkoff-payment-widget"; export const Form = () => ( - - {(props) => } - {(props) => } + + + {(props) => } + + + {(props) => } + -) +); ``` > [!WARNING] diff --git a/packages/payment-widget/package.json b/packages/payment-widget/package.json index f95215a..6bbb5ae 100644 --- a/packages/payment-widget/package.json +++ b/packages/payment-widget/package.json @@ -1,5 +1,5 @@ { - "name": "@atls/react-payment-widget", + "name": "@atls/tinkoff-payment-widget", "version": "0.0.1", "license": "BSD-3-Clause", "main": "src/index.ts", From 2da55e829174edf65c6b7437c2d4b8a4984dc5df Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 29 Nov 2023 18:24:59 +0400 Subject: [PATCH 25/25] fix: yarn check --- .pnp.cjs | 184 +++++++++++++++--------------- packages/payment-widget/README.md | 26 ++--- yarn.lock | 62 +++++----- 3 files changed, 134 insertions(+), 138 deletions(-) diff --git a/.pnp.cjs b/.pnp.cjs index 040fa29..f923e77 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -34,7 +34,7 @@ const RAW_RUNTIME_STATE = "reference": "workspace:packages/kratos-browser-flows"\ },\ {\ - "name": "@atls/react-payment-widget",\ + "name": "@atls/tinkoff-payment-widget",\ "reference": "workspace:packages/payment-widget"\ },\ {\ @@ -54,9 +54,9 @@ const RAW_RUNTIME_STATE = ["@atls/react-identity-links", ["workspace:packages/identity-links"]],\ ["@atls/react-identity-user-provider", ["workspace:packages/identity-user-provider"]],\ ["@atls/react-kratos-browser-flows", ["workspace:packages/kratos-browser-flows"]],\ - ["@atls/react-payment-widget", ["workspace:packages/payment-widget"]],\ ["@atls/react-upload", ["workspace:packages/upload"]],\ ["@atls/react-user", ["virtual:3ceedfe52a4367336e64693125ab45dbd4d5297af4b0beb13fa80c755b2a8540885a9beb615a2d0b3306600ad96d118e7015dd0916af8a4f315b5ede18134945#workspace:packages/user", "workspace:packages/user"]],\ + ["@atls/tinkoff-payment-widget", ["workspace:packages/payment-widget"]],\ ["reactjs", ["workspace:."]]\ ],\ "fallbackPool": [\ @@ -161,12 +161,12 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.12", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-button-virtual-7dd46424ff/0/cache/@atls-ui-parts-button-npm-0.0.12-a8b9e60279-14f88ffbad.zip/node_modules/@atls-ui-parts/button/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.12", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-button-virtual-98b35d75fa/0/cache/@atls-ui-parts-button-npm-0.0.12-a8b9e60279-14f88ffbad.zip/node_modules/@atls-ui-parts/button/",\ "packageDependencies": [\ - ["@atls-ui-parts/button", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.12"],\ - ["@atls-ui-parts/styles", "virtual:7dd46424ffcd115ef22adf93a563482cdf87938e6fdfd9ded415275e82cc314546f37c1cebe22ec4c157a55d728f38e9e083c337a724ce7d3affdcce430f4266#npm:0.0.4"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@atls-ui-parts/button", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.12"],\ + ["@atls-ui-parts/styles", "virtual:98b35d75fa62948b330b4c10997ee5db80fc8e3a1d4df5dc95e45cc4f9993347b3efa7a6ecee55daf8b72135291a6b0fbbcf5557df053826adf5058f293b6f64#npm:0.0.4"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@types/emotion__styled", null],\ ["@types/react", "npm:18.2.20"],\ ["@types/styled-system", "npm:5.1.16"],\ @@ -196,16 +196,16 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.4", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-condition-virtual-9402c47e26/0/cache/@atls-ui-parts-condition-npm-0.0.4-96f73c4b32-6d1a23d9da.zip/node_modules/@atls-ui-parts/condition/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.4", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-condition-virtual-4d67cd8dc5/0/cache/@atls-ui-parts-condition-npm-0.0.4-96f73c4b32-6d1a23d9da.zip/node_modules/@atls-ui-parts/condition/",\ "packageDependencies": [\ - ["@atls-ui-parts/condition", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.4"],\ - ["@emotion/react", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@atls-ui-parts/condition", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.4"],\ + ["@emotion/react", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@types/emotion__react", null],\ ["@types/emotion__styled", null],\ ["@types/react", "npm:18.2.20"],\ - ["framer-motion", "virtual:9402c47e26506f12508aaf7e48e81a30d173d12557d5533adf3608a486048c152160ec561f444ad7a689ca95ef9951e3fb3a45ad9fdb92c73afa57fd8c6a3d65#npm:10.12.16"],\ + ["framer-motion", "virtual:4d67cd8dc5067346d728d11b9fa6c3ea5b5f7c19b8417fd0d43dad733ad3d3ab25564901dc868458a3172bd0d0def599f0dc79be26a71302a3706cbd81668b66#npm:10.12.16"],\ ["react", "npm:18.2.0"]\ ],\ "packagePeers": [\ @@ -227,10 +227,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:28e203c16ceb5cce72ba4050c587b622f5b1c7f4a18a9dc9451e913afa5c1e93a28f8fe84b192e4599b1384d0839ea427c456798c8e8387295510ae97b4171e4#npm:0.0.4", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-events-state-virtual-3357841bf9/0/cache/@atls-ui-parts-events-state-npm-0.0.4-85188071cf-6bb519eb06.zip/node_modules/@atls-ui-parts/events-state/",\ + ["virtual:803a97aa0a95fb8de5865cf5724db4e31b939b5b93cdf0438e18664b782548ef295c72f2bd910b722c4f75e68e512b852a60fd6b367e28c8721889ff980877da#npm:0.0.4", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-events-state-virtual-362691527e/0/cache/@atls-ui-parts-events-state-npm-0.0.4-85188071cf-6bb519eb06.zip/node_modules/@atls-ui-parts/events-state/",\ "packageDependencies": [\ - ["@atls-ui-parts/events-state", "virtual:28e203c16ceb5cce72ba4050c587b622f5b1c7f4a18a9dc9451e913afa5c1e93a28f8fe84b192e4599b1384d0839ea427c456798c8e8387295510ae97b4171e4#npm:0.0.4"],\ + ["@atls-ui-parts/events-state", "virtual:803a97aa0a95fb8de5865cf5724db4e31b939b5b93cdf0438e18664b782548ef295c72f2bd910b722c4f75e68e512b852a60fd6b367e28c8721889ff980877da#npm:0.0.4"],\ ["@types/react", "npm:18.2.20"],\ ["react", "npm:18.2.0"]\ ],\ @@ -249,11 +249,11 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.6", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-hidden-input-virtual-1d19685382/0/cache/@atls-ui-parts-hidden-input-npm-0.0.6-ad49ae516e-5f6ed9bb3c.zip/node_modules/@atls-ui-parts/hidden-input/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.6", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-hidden-input-virtual-a20f96d81c/0/cache/@atls-ui-parts-hidden-input-npm-0.0.6-ad49ae516e-5f6ed9bb3c.zip/node_modules/@atls-ui-parts/hidden-input/",\ "packageDependencies": [\ - ["@atls-ui-parts/hidden-input", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.6"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@atls-ui-parts/hidden-input", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.6"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@types/emotion__styled", null],\ ["@types/react", "npm:18.2.20"],\ ["react", "npm:18.2.0"]\ @@ -275,13 +275,13 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.13", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-input-virtual-28e203c16c/0/cache/@atls-ui-parts-input-npm-0.0.13-dae40ee3f0-43d627a4e7.zip/node_modules/@atls-ui-parts/input/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.13", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-input-virtual-803a97aa0a/0/cache/@atls-ui-parts-input-npm-0.0.13-dae40ee3f0-43d627a4e7.zip/node_modules/@atls-ui-parts/input/",\ "packageDependencies": [\ - ["@atls-ui-parts/input", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.13"],\ - ["@atls-ui-parts/events-state", "virtual:28e203c16ceb5cce72ba4050c587b622f5b1c7f4a18a9dc9451e913afa5c1e93a28f8fe84b192e4599b1384d0839ea427c456798c8e8387295510ae97b4171e4#npm:0.0.4"],\ - ["@atls-ui-parts/styles", "virtual:7dd46424ffcd115ef22adf93a563482cdf87938e6fdfd9ded415275e82cc314546f37c1cebe22ec4c157a55d728f38e9e083c337a724ce7d3affdcce430f4266#npm:0.0.4"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@atls-ui-parts/input", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.13"],\ + ["@atls-ui-parts/events-state", "virtual:803a97aa0a95fb8de5865cf5724db4e31b939b5b93cdf0438e18664b782548ef295c72f2bd910b722c4f75e68e512b852a60fd6b367e28c8721889ff980877da#npm:0.0.4"],\ + ["@atls-ui-parts/styles", "virtual:98b35d75fa62948b330b4c10997ee5db80fc8e3a1d4df5dc95e45cc4f9993347b3efa7a6ecee55daf8b72135291a6b0fbbcf5557df053826adf5058f293b6f64#npm:0.0.4"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@types/emotion__styled", null],\ ["@types/react", "npm:18.2.20"],\ ["@types/styled-system", "npm:5.1.16"],\ @@ -311,12 +311,12 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.7", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-layout-virtual-3026485964/0/cache/@atls-ui-parts-layout-npm-0.0.7-ea4d3f1780-9b09886c54.zip/node_modules/@atls-ui-parts/layout/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.7", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-layout-virtual-1fd8fcf436/0/cache/@atls-ui-parts-layout-npm-0.0.7-ea4d3f1780-9b09886c54.zip/node_modules/@atls-ui-parts/layout/",\ "packageDependencies": [\ - ["@atls-ui-parts/layout", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.7"],\ + ["@atls-ui-parts/layout", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.7"],\ ["@emotion/is-prop-valid", "npm:1.2.1"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@types/emotion__styled", null],\ ["@types/react", "npm:18.2.20"],\ ["@types/styled-system", "npm:5.1.16"],\ @@ -342,10 +342,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:7dd46424ffcd115ef22adf93a563482cdf87938e6fdfd9ded415275e82cc314546f37c1cebe22ec4c157a55d728f38e9e083c337a724ce7d3affdcce430f4266#npm:0.0.4", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-styles-virtual-92996b1555/0/cache/@atls-ui-parts-styles-npm-0.0.4-faa7b97a87-db71a0768b.zip/node_modules/@atls-ui-parts/styles/",\ + ["virtual:98b35d75fa62948b330b4c10997ee5db80fc8e3a1d4df5dc95e45cc4f9993347b3efa7a6ecee55daf8b72135291a6b0fbbcf5557df053826adf5058f293b6f64#npm:0.0.4", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-styles-virtual-b9a9e8420a/0/cache/@atls-ui-parts-styles-npm-0.0.4-faa7b97a87-db71a0768b.zip/node_modules/@atls-ui-parts/styles/",\ "packageDependencies": [\ - ["@atls-ui-parts/styles", "virtual:7dd46424ffcd115ef22adf93a563482cdf87938e6fdfd9ded415275e82cc314546f37c1cebe22ec4c157a55d728f38e9e083c337a724ce7d3affdcce430f4266#npm:0.0.4"],\ + ["@atls-ui-parts/styles", "virtual:98b35d75fa62948b330b4c10997ee5db80fc8e3a1d4df5dc95e45cc4f9993347b3efa7a6ecee55daf8b72135291a6b0fbbcf5557df053826adf5058f293b6f64#npm:0.0.4"],\ ["@types/styled-system", "npm:5.1.16"],\ ["styled-system", "npm:5.1.5"]\ ],\ @@ -364,11 +364,11 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.11", {\ - "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-text-virtual-d27a5a1923/0/cache/@atls-ui-parts-text-npm-0.0.11-70c6e86690-5ff00c3eda.zip/node_modules/@atls-ui-parts/text/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.11", {\ + "packageLocation": "./.yarn/__virtual__/@atls-ui-parts-text-virtual-be182730bc/0/cache/@atls-ui-parts-text-npm-0.0.11-70c6e86690-5ff00c3eda.zip/node_modules/@atls-ui-parts/text/",\ "packageDependencies": [\ - ["@atls-ui-parts/text", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.11"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@atls-ui-parts/text", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.11"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@types/emotion__styled", null],\ ["@types/react", "npm:18.2.20"],\ ["react", "npm:18.2.0"],\ @@ -507,35 +507,6 @@ const RAW_RUNTIME_STATE = "linkType": "SOFT"\ }]\ ]],\ - ["@atls/react-payment-widget", [\ - ["workspace:packages/payment-widget", {\ - "packageLocation": "./packages/payment-widget/",\ - "packageDependencies": [\ - ["@atls/react-payment-widget", "workspace:packages/payment-widget"],\ - ["@atls-ui-parts/button", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.12"],\ - ["@atls-ui-parts/condition", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.4"],\ - ["@atls-ui-parts/hidden-input", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.6"],\ - ["@atls-ui-parts/input", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.13"],\ - ["@atls-ui-parts/layout", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.7"],\ - ["@atls-ui-parts/text", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:0.0.11"],\ - ["@emotion/jest", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.4"],\ - ["@emotion/react", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ - ["@testing-library/react", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:14.1.0"],\ - ["@types/react", "npm:18.2.20"],\ - ["@types/react-dom", "npm:18.2.15"],\ - ["@types/styled-system", "npm:5.1.16"],\ - ["csstype", "npm:3.1.2"],\ - ["react", "npm:18.2.0"],\ - ["react-dom", "virtual:0f253325d64667267f8a5c1074e4aa2f59120ad20372d39bddcfd3951915b9b89e0bfaf1fa90999b4185ff651ab603643a0d5aca289d2a340e670217b32db551#npm:18.2.0"],\ - ["react-intl", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:6.4.4"],\ - ["react-laag", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:2.0.5"],\ - ["styled-system", "npm:5.1.5"],\ - ["styled-tools", "npm:1.7.2"]\ - ],\ - "linkType": "SOFT"\ - }]\ - ]],\ ["@atls/react-upload", [\ ["workspace:packages/upload", {\ "packageLocation": "./packages/upload/",\ @@ -601,6 +572,35 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@atls/tinkoff-payment-widget", [\ + ["workspace:packages/payment-widget", {\ + "packageLocation": "./packages/payment-widget/",\ + "packageDependencies": [\ + ["@atls/tinkoff-payment-widget", "workspace:packages/payment-widget"],\ + ["@atls-ui-parts/button", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.12"],\ + ["@atls-ui-parts/condition", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.4"],\ + ["@atls-ui-parts/hidden-input", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.6"],\ + ["@atls-ui-parts/input", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.13"],\ + ["@atls-ui-parts/layout", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.7"],\ + ["@atls-ui-parts/text", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:0.0.11"],\ + ["@emotion/jest", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.4"],\ + ["@emotion/react", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ + ["@testing-library/react", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:14.1.0"],\ + ["@types/react", "npm:18.2.20"],\ + ["@types/react-dom", "npm:18.2.15"],\ + ["@types/styled-system", "npm:5.1.16"],\ + ["csstype", "npm:3.1.2"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:0f253325d64667267f8a5c1074e4aa2f59120ad20372d39bddcfd3951915b9b89e0bfaf1fa90999b4185ff651ab603643a0d5aca289d2a340e670217b32db551#npm:18.2.0"],\ + ["react-intl", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:6.4.4"],\ + ["react-laag", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:2.0.5"],\ + ["styled-system", "npm:5.1.5"],\ + ["styled-tools", "npm:1.7.2"]\ + ],\ + "linkType": "SOFT"\ + }]\ + ]],\ ["@babel/code-frame", [\ ["npm:7.22.10", {\ "packageLocation": "./.yarn/cache/@babel-code-frame-npm-7.22.10-bc14e2ec1b-d97177c73f.zip/node_modules/@babel/code-frame/",\ @@ -1468,10 +1468,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.4", {\ - "packageLocation": "./.yarn/__virtual__/@emotion-jest-virtual-8bfa43102a/0/cache/@emotion-jest-npm-11.9.4-c14f8151a2-b25afc2d4e.zip/node_modules/@emotion/jest/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.4", {\ + "packageLocation": "./.yarn/__virtual__/@emotion-jest-virtual-12ebda1efb/0/cache/@emotion-jest-npm-11.9.4-c14f8151a2-b25afc2d4e.zip/node_modules/@emotion/jest/",\ "packageDependencies": [\ - ["@emotion/jest", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.4"],\ + ["@emotion/jest", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.4"],\ ["@babel/runtime", "npm:7.22.10"],\ ["@emotion/css-prettifier", "npm:1.1.3"],\ ["@types/enzyme-to-json", null],\ @@ -1533,10 +1533,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3", {\ - "packageLocation": "./.yarn/__virtual__/@emotion-react-virtual-6481fc9a6a/0/cache/@emotion-react-npm-11.9.3-dcd9c32ac6-6bd367b606.zip/node_modules/@emotion/react/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3", {\ + "packageLocation": "./.yarn/__virtual__/@emotion-react-virtual-46d1a27b98/0/cache/@emotion-react-npm-11.9.3-dcd9c32ac6-6bd367b606.zip/node_modules/@emotion/react/",\ "packageDependencies": [\ - ["@emotion/react", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@emotion/react", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@babel/core", null],\ ["@babel/runtime", "npm:7.22.10"],\ ["@emotion/babel-plugin", "npm:11.11.0"],\ @@ -1613,15 +1613,15 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3", {\ - "packageLocation": "./.yarn/__virtual__/@emotion-styled-virtual-e386601ee0/0/cache/@emotion-styled-npm-11.9.3-01b80e031e-29e5b42e36.zip/node_modules/@emotion/styled/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3", {\ + "packageLocation": "./.yarn/__virtual__/@emotion-styled-virtual-e517270dfa/0/cache/@emotion-styled-npm-11.9.3-01b80e031e-29e5b42e36.zip/node_modules/@emotion/styled/",\ "packageDependencies": [\ - ["@emotion/styled", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@emotion/styled", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@babel/core", null],\ ["@babel/runtime", "npm:7.22.10"],\ ["@emotion/babel-plugin", "npm:11.11.0"],\ ["@emotion/is-prop-valid", "npm:1.2.1"],\ - ["@emotion/react", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:11.9.3"],\ + ["@emotion/react", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:11.9.3"],\ ["@emotion/serialize", "npm:1.1.2"],\ ["@emotion/utils", "npm:1.2.1"],\ ["@types/babel__core", null],\ @@ -1744,10 +1744,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:d00caa4d13afb7a78df949e97a1fe9cc4f34ef4c55c78addcc8008c148635ec0bdd5963fcc18d707a4558b4f677d10ea4e9e8bf8bc40dd4876405fb70a6fce89#npm:2.9.0", {\ - "packageLocation": "./.yarn/__virtual__/@formatjs-intl-virtual-566c494bf4/0/cache/@formatjs-intl-npm-2.9.0-bf61aa2747-be63240038.zip/node_modules/@formatjs/intl/",\ + ["virtual:2962c1c73acd8a1b6526c1fc99041f0251f79535c9cee14fdb50e5884d2f92336e527151e83c646ec29dcac8dfea0103e013ce5f56986d7c9b70d6cd39649a7d#npm:2.9.0", {\ + "packageLocation": "./.yarn/__virtual__/@formatjs-intl-virtual-a364ba6352/0/cache/@formatjs-intl-npm-2.9.0-bf61aa2747-be63240038.zip/node_modules/@formatjs/intl/",\ "packageDependencies": [\ - ["@formatjs/intl", "virtual:d00caa4d13afb7a78df949e97a1fe9cc4f34ef4c55c78addcc8008c148635ec0bdd5963fcc18d707a4558b4f677d10ea4e9e8bf8bc40dd4876405fb70a6fce89#npm:2.9.0"],\ + ["@formatjs/intl", "virtual:2962c1c73acd8a1b6526c1fc99041f0251f79535c9cee14fdb50e5884d2f92336e527151e83c646ec29dcac8dfea0103e013ce5f56986d7c9b70d6cd39649a7d#npm:2.9.0"],\ ["@formatjs/ecma402-abstract", "npm:1.17.0"],\ ["@formatjs/fast-memoize", "npm:2.2.0"],\ ["@formatjs/icu-messageformat-parser", "npm:2.6.0"],\ @@ -2708,10 +2708,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "HARD"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:14.1.0", {\ - "packageLocation": "./.yarn/__virtual__/@testing-library-react-virtual-dd385eca6a/0/cache/@testing-library-react-npm-14.1.0-6f896be630-3369b08183.zip/node_modules/@testing-library/react/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:14.1.0", {\ + "packageLocation": "./.yarn/__virtual__/@testing-library-react-virtual-5973e51e42/0/cache/@testing-library-react-npm-14.1.0-6f896be630-3369b08183.zip/node_modules/@testing-library/react/",\ "packageDependencies": [\ - ["@testing-library/react", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:14.1.0"],\ + ["@testing-library/react", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:14.1.0"],\ ["@babel/runtime", "npm:7.22.10"],\ ["@testing-library/dom", "npm:9.3.3"],\ ["@types/react", "npm:18.2.20"],\ @@ -4868,10 +4868,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:9402c47e26506f12508aaf7e48e81a30d173d12557d5533adf3608a486048c152160ec561f444ad7a689ca95ef9951e3fb3a45ad9fdb92c73afa57fd8c6a3d65#npm:10.12.16", {\ - "packageLocation": "./.yarn/__virtual__/framer-motion-virtual-b732540d42/0/cache/framer-motion-npm-10.12.16-15fa41631a-938b0267a1.zip/node_modules/framer-motion/",\ + ["virtual:4d67cd8dc5067346d728d11b9fa6c3ea5b5f7c19b8417fd0d43dad733ad3d3ab25564901dc868458a3172bd0d0def599f0dc79be26a71302a3706cbd81668b66#npm:10.12.16", {\ + "packageLocation": "./.yarn/__virtual__/framer-motion-virtual-c6c78b075e/0/cache/framer-motion-npm-10.12.16-15fa41631a-938b0267a1.zip/node_modules/framer-motion/",\ "packageDependencies": [\ - ["framer-motion", "virtual:9402c47e26506f12508aaf7e48e81a30d173d12557d5533adf3608a486048c152160ec561f444ad7a689ca95ef9951e3fb3a45ad9fdb92c73afa57fd8c6a3d65#npm:10.12.16"],\ + ["framer-motion", "virtual:4d67cd8dc5067346d728d11b9fa6c3ea5b5f7c19b8417fd0d43dad733ad3d3ab25564901dc868458a3172bd0d0def599f0dc79be26a71302a3706cbd81668b66#npm:10.12.16"],\ ["@emotion/is-prop-valid", "npm:0.8.8"],\ ["@types/react", "npm:18.2.20"],\ ["@types/react-dom", null],\ @@ -7880,13 +7880,13 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:6.4.4", {\ - "packageLocation": "./.yarn/__virtual__/react-intl-virtual-d00caa4d13/0/cache/react-intl-npm-6.4.4-5d775191b5-1ac3b4981a.zip/node_modules/react-intl/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:6.4.4", {\ + "packageLocation": "./.yarn/__virtual__/react-intl-virtual-2962c1c73a/0/cache/react-intl-npm-6.4.4-5d775191b5-1ac3b4981a.zip/node_modules/react-intl/",\ "packageDependencies": [\ - ["react-intl", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:6.4.4"],\ + ["react-intl", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:6.4.4"],\ ["@formatjs/ecma402-abstract", "npm:1.17.0"],\ ["@formatjs/icu-messageformat-parser", "npm:2.6.0"],\ - ["@formatjs/intl", "virtual:d00caa4d13afb7a78df949e97a1fe9cc4f34ef4c55c78addcc8008c148635ec0bdd5963fcc18d707a4558b4f677d10ea4e9e8bf8bc40dd4876405fb70a6fce89#npm:2.9.0"],\ + ["@formatjs/intl", "virtual:2962c1c73acd8a1b6526c1fc99041f0251f79535c9cee14fdb50e5884d2f92336e527151e83c646ec29dcac8dfea0103e013ce5f56986d7c9b70d6cd39649a7d#npm:2.9.0"],\ ["@formatjs/intl-displaynames", "npm:6.5.0"],\ ["@formatjs/intl-listformat", "npm:7.4.0"],\ ["@types/hoist-non-react-statics", "npm:3.3.1"],\ @@ -7938,10 +7938,10 @@ const RAW_RUNTIME_STATE = ],\ "linkType": "SOFT"\ }],\ - ["virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:2.0.5", {\ - "packageLocation": "./.yarn/__virtual__/react-laag-virtual-f85788abc9/0/cache/react-laag-npm-2.0.5-ee934b6029-32de5cb560.zip/node_modules/react-laag/",\ + ["virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:2.0.5", {\ + "packageLocation": "./.yarn/__virtual__/react-laag-virtual-8b48689d61/0/cache/react-laag-npm-2.0.5-ee934b6029-32de5cb560.zip/node_modules/react-laag/",\ "packageDependencies": [\ - ["react-laag", "virtual:19d7eaf137e33421ff5238900f2fdd4e99a0ba752774535459c4d3a7f8ca81429b82550d05152f34261f2882346c7d8459777f85638dc6cedf919ce9bc362a3a#npm:2.0.5"],\ + ["react-laag", "virtual:5df5417e007cf624295c3dfc9c18b541c8f15fbbead2fcd958b8514a53e86ee6c640495d53e378a3d48c5ae0b86482593ca5c241f44dea6b3f5eb1e38d547d43#npm:2.0.5"],\ ["@types/react", "npm:18.2.20"],\ ["@types/react-dom", "npm:18.2.15"],\ ["react", "npm:18.2.0"],\ diff --git a/packages/payment-widget/README.md b/packages/payment-widget/README.md index f2f273a..f65460b 100644 --- a/packages/payment-widget/README.md +++ b/packages/payment-widget/README.md @@ -1,6 +1,6 @@ # @atls/tinkoff-payment-widget -[//]: # "VERSIONS" +[//]: # 'VERSIONS' ## [](https://www.npmjs.com/package/@atls-ui-parts/button/v/0.0.12) [](https://www.npmjs.com/package/@atls-ui-parts/condition/v/0.0.4) [](https://www.npmjs.com/package/@atls-ui-parts/hidden-input/v/0.0.6) [](https://www.npmjs.com/package/@atls-ui-parts/input/v/0.0.13) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/react-intl/v/6.4.4) [](https://www.npmjs.com/package/react-laag) [](https://www.npmjs.com/package/styled-tools) @@ -11,8 +11,8 @@ Для корректной работы **@atls/tinkoff-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`: ```tsx -import { Widget } from "@atls/tinkoff-payment-widget"; -export const Form = () => ; +import { Widget } from '@atls/tinkoff-payment-widget' +export const Form = () => ``` Основные атрибуты для компонента `Widget`: @@ -31,20 +31,16 @@ export const Form = () => ; `InputWrapper` принимает обязательный атрибут `name`. ```tsx -import { AdditionalFieldsType } from "@atls/tinkoff-payment-widget"; -import { ButtonWrapper } from "@atls/tinkoff-payment-widget"; -import { InputWrapper } from "@atls/tinkoff-payment-widget"; -import { Widget } from "@atls/tinkoff-payment-widget"; +import { AdditionalFieldsType } from '@atls/tinkoff-payment-widget' +import { ButtonWrapper } from '@atls/tinkoff-payment-widget' +import { InputWrapper } from '@atls/tinkoff-payment-widget' +import { Widget } from '@atls/tinkoff-payment-widget' export const Form = () => ( - - - {(props) => } - - - {(props) => } - + + {(props) => } + {(props) => } -); +) ``` > [!WARNING] diff --git a/yarn.lock b/yarn.lock index 1cf2996..5c68256 100644 --- a/yarn.lock +++ b/yarn.lock @@ -259,37 +259,6 @@ __metadata: languageName: unknown linkType: soft -"@atls/react-payment-widget@workspace:packages/payment-widget": - version: 0.0.0-use.local - resolution: "@atls/react-payment-widget@workspace:packages/payment-widget" - dependencies: - "@atls-ui-parts/button": "npm:0.0.12" - "@atls-ui-parts/condition": "npm:0.0.4" - "@atls-ui-parts/hidden-input": "npm:0.0.6" - "@atls-ui-parts/input": "npm:0.0.13" - "@atls-ui-parts/layout": "npm:0.0.7" - "@atls-ui-parts/text": "npm:0.0.11" - "@emotion/jest": "npm:11.9.4" - "@emotion/react": "npm:11.9.3" - "@emotion/styled": "npm:11.9.3" - "@testing-library/react": "npm:14.1.0" - "@types/react": "npm:18.2.20" - "@types/react-dom": "npm:18" - "@types/styled-system": "npm:5.1.16" - csstype: "npm:3.1.2" - react: "npm:18.2.0" - react-dom: "npm:18.2.0" - react-intl: "npm:6.4.4" - react-laag: "npm:2.0.5" - styled-system: "npm:5.1.5" - styled-tools: "npm:1.7.2" - peerDependencies: - "@emotion/react": 11.9.3 - "@emotion/styled": 11.9.3 - react: 18.2.0 - languageName: unknown - linkType: soft - "@atls/react-upload@workspace:packages/upload": version: 0.0.0-use.local resolution: "@atls/react-upload@workspace:packages/upload" @@ -341,6 +310,37 @@ __metadata: languageName: node linkType: hard +"@atls/tinkoff-payment-widget@workspace:packages/payment-widget": + version: 0.0.0-use.local + resolution: "@atls/tinkoff-payment-widget@workspace:packages/payment-widget" + dependencies: + "@atls-ui-parts/button": "npm:0.0.12" + "@atls-ui-parts/condition": "npm:0.0.4" + "@atls-ui-parts/hidden-input": "npm:0.0.6" + "@atls-ui-parts/input": "npm:0.0.13" + "@atls-ui-parts/layout": "npm:0.0.7" + "@atls-ui-parts/text": "npm:0.0.11" + "@emotion/jest": "npm:11.9.4" + "@emotion/react": "npm:11.9.3" + "@emotion/styled": "npm:11.9.3" + "@testing-library/react": "npm:14.1.0" + "@types/react": "npm:18.2.20" + "@types/react-dom": "npm:18" + "@types/styled-system": "npm:5.1.16" + csstype: "npm:3.1.2" + react: "npm:18.2.0" + react-dom: "npm:18.2.0" + react-intl: "npm:6.4.4" + react-laag: "npm:2.0.5" + styled-system: "npm:5.1.5" + styled-tools: "npm:1.7.2" + peerDependencies: + "@emotion/react": 11.9.3 + "@emotion/styled": 11.9.3 + react: 18.2.0 + languageName: unknown + linkType: soft + "@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.22.10, @babel/code-frame@npm:^7.22.5": version: 7.22.10 resolution: "@babel/code-frame@npm:7.22.10"