Feature/custom theme

packages/payment-widget/README.md

@@ -1,68 +1,61 @@
-# Применение
+# @atls/react-payment-widget
 
-## С темой виджета
+[//]: # 'VERSIONS'
 
-Для корректной работы Виджета достаточно атрибуту `settings` назначить объект с ключом `storeID`:
+## [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Fbutton&message=0.0.12&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/button/v/0.0.12) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Fcondition&message=0.0.4&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/condition/v/0.0.4) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Fhidden-input&message=0.0.6&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/hidden-input/v/0.0.6) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Finput&message=0.0.13&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/input/v/0.0.13) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Flayout&message=0.0.7&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=%40atls-ui-parts%2Ftext&message=0.0.11&labelColor=097CEB&color=0B6DCC">](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=react-intl&message=6.4.4&labelColor=ECEEF5&color=D7DCEB">](https://www.npmjs.com/package/react-intl/v/6.4.4) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=react-laag&message=2.0.5&labelColor=ECEEF5&color=D7DCEB">](https://www.npmjs.com/package/react-laag) [<img src="https://img.shields.io/static/v1?style=for-the-badge&label=styled-tools&message=1.7.2&labelColor=ECEEF5&color=D7DCEB">](https://www.npmjs.com/package/styled-tools)
 
-```tsx
-import { Widget } from "@atls/react-payment-widget";
-export const Form = () => <Widget settings={{ storeId: "STORE_ID" }} />;
-```
+**@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 = () => (
-  <Widget
-    amount={10000}
-    settings={{ storeId: "STORE_ID" }}
-    additionalFields={[{ name: AdditionalFieldsType.Email }]}
-  />
-);
+import { Widget } from '@atls/react-payment-widget'
+export const Form = () => <Widget settings={{ storeId: 'STORE_ID' }} />
 ```
 
-## С темой проекта
+Основные атрибуты для компонента `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 = () => (
-  <Widget
-    amount={amount}
-    settings={{ storeId: "1698844342541DEMO" }}
-    disabled={!privacyPolicy}
-  >
-    <InputWrapper name={AdditionalFieldsType.Email}>
-      {(props) => <Input {...props} placeholder={fieldToLabelMap.email} />}
-    </InputWrapper>
-    <ButtonWrapper>
-      {(props) => <Button {...props}>Оплатить</Button>}
-    </ButtonWrapper>
+  <Widget amount={5000} settings={{ storeId: '1698844342541DEMO' }}>
+    <InputWrapper name={AdditionalFieldsType.Email}>{(props) => <Input {...props} />}</InputWrapper>
+    <ButtonWrapper>{(props) => <Button {...props}>Оплатить</Button>}</ButtonWrapper>
   </Widget>
-);
+)
 ```
 
-> [!WARNING]
+> [!WARNING]  
 > Не используйте атрибут `additionalFields` совместно с `InputWrapper`, это приведет к исключению.
+>
 > Так же, при использовании `InputWrapper` Виджет не генерирует дополнительные поля.
 
 ## Экспортируемые компоненты
 
-**Widget** - главный компонент Виджета.
+[**Widget**]() - главный компонент Виджета.
 
-**InputWrapper** - компонент обёртка для полей ввода.
+[**InputWrapper**]() - компонент обёртка для полей ввода.
 
-**ButtonWrapper** - компонент обёртка для кнопки.
+[**ButtonWrapper**]() - компонент обёртка для кнопки.
 
-**AdditionalFieldsType** - интерфейс дополнительных полей.
+[**AdditionalFieldsType**]() - интерфейс дополнительных полей.
 
-**RequiredFieldsType** - интерфейс обязательных полей.
+[**RequiredFieldsType**]() - интерфейс обязательных полей.

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'

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,

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,

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<Field[]>((acc, field) => {