fix(wrapper): add displayName property

atls · Dec 9, 2023 · d69d394 · d69d394
1 parent b772b8a
commit d69d394
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 27 deletions.
diff --git a/packages/payment-widget/src/index.ts b/packages/payment-widget/src/index.ts
@@ -1,14 +1,10 @@
-export {
-  Widget,
-  ButtonWrapper,
-  InputWrapper,
-}        from './ui'
+export { Widget, ButtonWrapper, InputWrapper } from './ui'
 export {
   Settings,
   Styles,
   AdditionalField,
   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
@@ -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
@@ -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
@@ -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