fix: useMemo props for custom-elements hook, use Condition in wrapper…

…s, fix interfaces

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<any>).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<Field[]>((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
 

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
+}

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 (
     <IntlProvider locale={locale} messages={messages[locale]} defaultLocale={LanguagesType.RUSSIAN}>

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<ButtonWrapperProps> = ({ children }) => {
   const { disabled, isLoaded } = useForm()
 
-  if (typeof children === 'function') {
-    return children({
-      type: ButtonType.Submit,
-      disabled: disabled || !isLoaded,
-    })
-  }
-
-  return null
+  return (
+    <Condition match={typeof children === 'function'}>
+      {children({
+        type: ButtonType.Submit,
+        disabled: disabled || !isLoaded,
+      })}
+    </Condition>
+  )
 }

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<InputWrapperProps> = ({ 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 (
+    <Condition match={typeof children === 'function'}>
+      {children({
+        name,
+        value: fieldsState[name],
+        onChangeNative: handleChange,
+        onBlur: handleBlur,
+        errorText: translateError,
+      })}
+    </Condition>
+  )
 }