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/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,4 @@ export * from './payment-method.enum'
 export * from './payment-object.enum'
 export * from './tax.enum'
 export * from './taxation.enum'
+export * from './button.enum'

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'

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

@@ -0,0 +1,78 @@
+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 { CustomElementsProps }   from '../interfaces'
+import { Field }                 from '../interfaces'
+
+export const useCustomElements = ({
+  existAmount,
+  existReceipt,
+  existAdditionalFields,
+  nodes,
+}: CustomElementsProps): CustomElements => {
+  const nodeArray = Children.toArray(nodes)
+
+  const isCustomElement = (nameNode: string, node: ReactNode): boolean =>
+    isValidElement(node)
+      ? (node.type as JSXElementConstructor<any>).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) =>
+      isCustomElement('InputWrapper', node) && (isAdditionalField(node) || isRequiredField(node))
+  )
+  const nameFields = customFields.reduce<Field[]>((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
+
+  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,
+  }
+}

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 (
+    <ThemeProvider>
+      {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 (
-      <React.Fragment key={field.name}>
-        <MemoizedInput
-          type={field.type ?? 'text'}
-          name={field.name}
-          placeholder={translatePlaceholder}
-          required={field.required ?? false}
-          value={fieldsState[field.name]}
-          errorText={translateError}
-          onChangeNative={handleChange}
-          onBlur={handleBlur}
-        />
-        <Condition match={isNotLastField}>
-          <Layout flexBasis={inputGaps} flexShrink={0} />
-        </Condition>
-      </React.Fragment>
-    )
-  })
+        return (
+          <React.Fragment key={field.name}>
+            <MemoizedInput
+              type={field.type ?? 'text'}
+              name={field.name}
+              placeholder={translatePlaceholder}
+              required={field.required ?? false}
+              value={fieldsState[field.name]}
+              errorText={translateError}
+              onChangeNative={handleChange}
+              onBlur={handleBlur}
+            />
+            <Condition match={isNotLastField}>
+              <Layout flexBasis={inputGaps} flexShrink={0} />
+            </Condition>
+          </React.Fragment>
+        )
+      })}
+    </ThemeProvider>
+  )
 }

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

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

packages/payment-widget/src/index.ts

@@ -1,4 +1,4 @@
-export { Widget } from './ui'
+export { Widget, InputWrapper, ButtonWrapper } from './ui'
 export {
   Settings,
   Styles,

packages/payment-widget/src/interfaces/custom-elements.iterfaces.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react'
+
+import { Field }     from './fields.interfaces'
+
+export type NameField = Pick<Field, 'name'>
+
+export interface CustomElements {
+  customFields: ReactNode[]
+  customButton: ReactNode
+  isGenerateReceiptField: boolean
+  isGenerateRequiredField: boolean
+  nameFields: Field[]
+}
+
+export interface CustomElementsProps {
+  existAmount: boolean
+  existReceipt: boolean
+  existAdditionalFields: boolean
+  nodes: ReactNode
+}