Feature/custom theme

.run/test-unit.run.xml

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="test-unit" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="yarn test unit" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="/bin/zsh" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

packages/payment-widget/README.md

@@ -0,0 +1,61 @@
+# @atls/react-payment-widget
+
+[//]: # 'VERSIONS'
+
+## [<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)
+
+**@atls/react-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`.
+
+## Использование со стандартной темой
+
+Для корректной работы **@atls/react-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`:
+
+```tsx
+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` принимает обязательный атрибут `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'
+export const Form = () => (
+  <Widget amount={5000} settings={{ storeId: '1698844342541DEMO' }}>
+    <InputWrapper name={AdditionalFieldsType.Email}>{(props) => <Input {...props} />}</InputWrapper>
+    <ButtonWrapper>{(props) => <Button {...props}>Оплатить</Button>}</ButtonWrapper>
+  </Widget>
+)
+```
+
+> [!WARNING]  
+> Не используйте атрибут `additionalFields` совместно с `InputWrapper`, это приведет к исключению.
+>
+> Так же, при использовании `InputWrapper` Виджет не генерирует дополнительные поля.
+
+## Экспортируемые компоненты
+
+[**Widget**]() - главный компонент Виджета.
+
+[**InputWrapper**]() - компонент обёртка для полей ввода.
+
+[**ButtonWrapper**]() - компонент обёртка для кнопки.
+
+[**AdditionalFieldsType**]() - интерфейс дополнительных полей.
+
+[**RequiredFieldsType**]() - интерфейс обязательных полей.

packages/payment-widget/package.json

@@ -23,12 +23,16 @@
     "styled-tools": "1.7.2"
   },
   "devDependencies": {
+    "@emotion/jest": "11.9.4",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
+    "@testing-library/react": "14.1.0",
     "@types/react": "18.2.20",
+    "@types/react-dom": "18",
     "@types/styled-system": "5.1.16",
     "csstype": "3.1.2",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-system": "5.1.5"
   },
   "peerDependencies": {

packages/payment-widget/src/enums/button.enum.ts

@@ -0,0 +1,4 @@
+/* eslint-disable no-shadow */
+export enum ButtonType {
+  Submit = 'submit',
+}

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

@@ -4,3 +4,5 @@ export * from './payment-method.enum'
 export * from './payment-object.enum'
 export * from './tax.enum'
 export * from './taxation.enum'
+export * from './button.enum'
+export * from './wrapper.enum'

packages/payment-widget/src/enums/wrapper.enum.ts

@@ -0,0 +1,5 @@
+/* eslint-disable no-shadow */
+export enum NameWrapperComponent {
+  InputWrapper = 'InputWrapper',
+  ButtonWrapper = 'ButtonWrapper',
+}

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

@@ -2,3 +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 { useCustomFields } from './use-custom-fields.hook'
+export { useCustomButton } from './use-custom-button.hook'

packages/payment-widget/src/hooks/use-custom-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))

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

@@ -0,0 +1,60 @@
+import { ReactNode }            from 'react'
+import { isValidElement }       from 'react'
+
+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 useCustomFields = ({
+  existAmount,
+  existReceipt,
+  existAdditionalFields,
+  nodeArray,
+}: CustomFieldsProps): CustomFields => {
+  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) =>
+      isCustomElement(NameWrapperComponent.InputWrapper, node) &&
+      (isAdditionalField(node) || isRequiredField(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,
+    isGenerateReceiptField,
+    isGenerateRequiredField,
+  }
+}