From d69d39443fe546be4a95a3560a3c83a238d29bb2 Mon Sep 17 00:00:00 2001
From: Ilya Frolov <absolem.dev@gmail.com>
Date: Sat, 9 Dec 2023 11:29:23 +0400
Subject: [PATCH] fix(wrapper): add displayName property

---
 packages/payment-widget/src/index.ts          |  8 ++-----
 .../ui/wrapper/button-wrapper.component.tsx   | 19 ++++++++++-------
 .../ui/wrapper/input-wrapper.component.tsx    | 21 ++++++++++++-------
 .../src/utils/is-custom-element.util.ts       | 12 +++++------
 4 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/payment-widget/src/index.ts b/packages/payment-widget/src/index.ts
index 1303f4b..c50c89f 100644
--- a/packages/payment-widget/src/index.ts
+++ b/packages/payment-widget/src/index.ts
@@ -1,8 +1,4 @@
-export {
-  Widget,
-  ButtonWrapper,
-  InputWrapper,
-}        from './ui'
+export { Widget, ButtonWrapper, InputWrapper } from './ui'
 export {
   Settings,
   Styles,
@@ -10,5 +6,5 @@ export {
   Receipt,
   ReceiptItem,
   DirectionFields,
-}        from './interfaces'
+} from './interfaces'
 export * from './enums'
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 363c494..9c7285d 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,14 @@
-import { Condition }          from '@atls-ui-parts/condition'
+import { Condition }            from '@atls-ui-parts/condition'
 
-import React                  from 'react'
-import { FC }                 from 'react'
+import React                    from 'react'
+import { FC }                   from 'react'
 
-import { ButtonType }         from '../../enums'
-import { ButtonWrapperProps } from '../../interfaces'
-import { useForm }            from '../form'
+import { ButtonType }           from '../../enums'
+import { NameWrapperComponent } from '../../enums'
+import { ButtonWrapperProps }   from '../../interfaces'
+import { useForm }              from '../form'
 
-export const ButtonWrapper: FC<ButtonWrapperProps> = ({ children }) => {
+const ButtonWrapper: FC<ButtonWrapperProps> = ({ children }) => {
   const { disabled, isLoaded } = useForm()
 
   return (
@@ -19,3 +20,7 @@ export const ButtonWrapper: FC<ButtonWrapperProps> = ({ children }) => {
     </Condition>
   )
 }
+
+ButtonWrapper.displayName = NameWrapperComponent.ButtonWrapper
+
+export { ButtonWrapper }
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 e2c417b..7a19249 100644
--- a/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx
+++ b/packages/payment-widget/src/ui/wrapper/input-wrapper.component.tsx
@@ -1,14 +1,15 @@
-import { Condition }         from '@atls-ui-parts/condition'
+import { Condition }            from '@atls-ui-parts/condition'
 
-import React                 from 'react'
-import { FC }                from 'react'
-import { useIntl }           from 'react-intl'
+import React                    from 'react'
+import { FC }                   from 'react'
+import { useIntl }              from 'react-intl'
 
-import { InputWrapperProps } from '../../interfaces'
-import { translate }         from '../../utils/translate.util'
-import { useForm }           from '../form'
+import { NameWrapperComponent } from '../../enums'
+import { InputWrapperProps }    from '../../interfaces'
+import { translate }            from '../../utils/translate.util'
+import { useForm }              from '../form'
 
-export const InputWrapper: FC<InputWrapperProps> = ({ name, children }) => {
+const InputWrapper: FC<InputWrapperProps> = ({ name, children }) => {
   const { fieldsState, handleChange, handleBlur, errors } = useForm()
   const intl = useIntl()
   const translateError = translate(intl, errors[name], errors[name])
@@ -25,3 +26,7 @@ export const InputWrapper: FC<InputWrapperProps> = ({ name, children }) => {
     </Condition>
   )
 }
+
+InputWrapper.displayName = NameWrapperComponent.InputWrapper
+
+export { InputWrapper }
diff --git a/packages/payment-widget/src/utils/is-custom-element.util.ts b/packages/payment-widget/src/utils/is-custom-element.util.ts
index 5d59981..7412d40 100644
--- a/packages/payment-widget/src/utils/is-custom-element.util.ts
+++ b/packages/payment-widget/src/utils/is-custom-element.util.ts
@@ -1,11 +1,11 @@
-import { ReactNode }             from 'react'
-import { JSXElementConstructor } from 'react'
-import { isValidElement }        from 'react'
+import { FunctionComponent }    from 'react'
+import { ReactNode }            from 'react'
+import { isValidElement }       from 'react'
 
-import { NameWrapperComponent }  from '../enums'
+import { NameWrapperComponent } from '../enums'
 
 export const isCustomElement = (nameNode: NameWrapperComponent, node: ReactNode): boolean =>
-  isValidElement(node)
-    ? (node.type as JSXElementConstructor<any>).name === nameNode &&
+  isValidElement(node) && typeof node.type === 'function'
+    ? (node.type as FunctionComponent).displayName === nameNode &&
       typeof node.props.children === 'function'
     : false