fix(theme-provider): add conditional render

Author: absolemDev

packages/payment-widget/src/hooks/use-fields-render.hook.tsx

@@ -1,17 +1,17 @@
-import { Condition }          from '@atls-ui-parts/condition'
-import { Layout }             from '@atls-ui-parts/layout'
+import { Condition }         from '@atls-ui-parts/condition'
+import { Layout }            from '@atls-ui-parts/layout'
 
-import React                  from 'react'
-import { useIntl }            from 'react-intl'
+import React                 from 'react'
+import { useIntl }           from 'react-intl'
 
-import { Field }              from '../interfaces'
-import { InputStyles } from '../interfaces'
-import { HandleBlurField }    from '../interfaces'
-import { FieldState }         from '../interfaces'
-import { HandleChangeField }  from '../interfaces'
-import { FieldsErrors }       from '../interfaces'
-import { MemoizedInput }      from '../ui'
-import { translate }          from '../utils/translate.util'
+import { Field }             from '../interfaces'
+import { InputStyles }       from '../interfaces'
+import { HandleBlurField }   from '../interfaces'
+import { FieldState }        from '../interfaces'
+import { HandleChangeField } from '../interfaces'
+import { FieldsErrors }      from '../interfaces'
+import { MemoizedInput }     from '../ui'
+import { translate }         from '../utils/translate.util'
 
 export const useFieldsRenderer = (
   fields: Field[],

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

@@ -3,4 +3,3 @@ export * from './fields.interfaces'
 export * from './settings.interfaces'
 export * from './receipt.interfaces'
 export * from './styles.interfaces'
-export * from './theme.interfaces'

packages/payment-widget/src/interfaces/theme.interfaces.ts

@@ -2,14 +2,13 @@ import { AdditionalField } from './fields.interfaces'
 import { ReceiptSettings } from './receipt.interfaces'
 import { Settings }        from './settings.interfaces'
 import { Styles }          from './styles.interfaces'
-import { Theme }           from './theme.interfaces'
 
 export interface WidgetProps {
   settings: Settings
   amount?: number
   receipt?: ReceiptSettings
   styles?: Styles
   additionalFields?: AdditionalField[]
-  customTheme?: Theme
+  customTheme?: boolean
   disabled?: boolean
 }

packages/payment-widget/src/interfaces/widget.interfaces.ts

@@ -20,7 +20,7 @@ const ButtonElement = ({ styledArray, ...props }) => {
 export const Button: FC<ButtonStyles> = ({ children, styledArray, ...props }) => {
   const [hover, hoverProps] = useHover()
   return (
-    <ButtonElement hover={hover} {...hoverProps} styledArray={styledArray} {...props}>
+    <ButtonElement hover={hover} {...hoverProps} styledArray={styledArray || []} {...props}>
       {children}
     </ButtonElement>
   )

packages/payment-widget/src/ui/button/button.component.tsx

@@ -4,6 +4,9 @@ import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
 
 import React                                     from 'react'
 
-export const ThemeProvider = ({ customTheme, children }) => (
-  <EmotionThemeProvider theme={customTheme ?? theme}>{children}</EmotionThemeProvider>
-)
+export const ThemeProvider = ({ customTheme, children }) =>
+  customTheme ? (
+    <>{children}</> // eslint-disable-line
+  ) : (
+    <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
+  )