From 96cd845399497dd5bf4c2f0d6904fbf5a48569a2 Mon Sep 17 00:00:00 2001
From: Ilya Frolov <absolem.dev@gmail.com>
Date: Thu, 16 Nov 2023 17:18:36 +0400
Subject: [PATCH] fix(theme-provider): add conditional render

---
 .../src/hooks/use-fields-render.hook.tsx      | 24 +++++++++----------
 .../payment-widget/src/interfaces/index.ts    |  1 -
 .../src/interfaces/theme.interfaces.ts        |  3 ---
 .../src/interfaces/widget.interfaces.ts       |  3 +--
 .../src/ui/button/button.component.tsx        |  2 +-
 .../src/ui/theme/src/theme.provider.tsx       |  9 ++++---
 6 files changed, 20 insertions(+), 22 deletions(-)
 delete mode 100644 packages/payment-widget/src/interfaces/theme.interfaces.ts

diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx
index f6cd705..bb22a05 100644
--- a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx
+++ b/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[],
diff --git a/packages/payment-widget/src/interfaces/index.ts b/packages/payment-widget/src/interfaces/index.ts
index dc6caa0..b48e070 100644
--- a/packages/payment-widget/src/interfaces/index.ts
+++ b/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'
diff --git a/packages/payment-widget/src/interfaces/theme.interfaces.ts b/packages/payment-widget/src/interfaces/theme.interfaces.ts
deleted file mode 100644
index 9fcf555..0000000
--- a/packages/payment-widget/src/interfaces/theme.interfaces.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface Theme {
-  [key: string]: string | Theme
-}
diff --git a/packages/payment-widget/src/interfaces/widget.interfaces.ts b/packages/payment-widget/src/interfaces/widget.interfaces.ts
index b2a2fe8..cd6bd07 100644
--- a/packages/payment-widget/src/interfaces/widget.interfaces.ts
+++ b/packages/payment-widget/src/interfaces/widget.interfaces.ts
@@ -2,7 +2,6 @@ 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
@@ -10,6 +9,6 @@ export interface WidgetProps {
   receipt?: ReceiptSettings
   styles?: Styles
   additionalFields?: AdditionalField[]
-  customTheme?: Theme
+  customTheme?: boolean
   disabled?: boolean
 }
diff --git a/packages/payment-widget/src/ui/button/button.component.tsx b/packages/payment-widget/src/ui/button/button.component.tsx
index 0e9aec0..6d6d0e1 100644
--- a/packages/payment-widget/src/ui/button/button.component.tsx
+++ b/packages/payment-widget/src/ui/button/button.component.tsx
@@ -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>
   )
diff --git a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx b/packages/payment-widget/src/ui/theme/src/theme.provider.tsx
index ded0b36..8c0aaee 100644
--- a/packages/payment-widget/src/ui/theme/src/theme.provider.tsx
+++ b/packages/payment-widget/src/ui/theme/src/theme.provider.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>
+  )