diff --git a/checkout.html b/checkout.html index 34ecbb64..8e24d3e9 100644 --- a/checkout.html +++ b/checkout.html @@ -15,7 +15,7 @@ /> Checkout - +
- - + + diff --git a/src/App.tsx b/src/App.tsx index d8a58b7a..c673a5f4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ import { ChakraBaseProvider, extendBaseTheme, theme as chakraTheme } from '@chakra-ui/react'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { ErrorAlert } from 'checkout/components'; import { CompletePaymentContext } from 'checkout/contexts'; @@ -11,12 +11,7 @@ import { useInitialize } from './useInitialize'; const { Button, Spinner, Divider, Heading, Alert, Menu, Drawer } = chakraTheme.components; -const theme = extendBaseTheme({ - fonts: { - body: 'Roboto, sans-serif', - heading: 'Roboto, sans-serif', - mono: 'monospace', - }, +const common = { components: { Button, Spinner, @@ -26,12 +21,62 @@ const theme = extendBaseTheme({ Menu, Drawer, }, -}); +}; + +const defaultTheme = { + fonts: { + body: 'Roboto, sans-serif', + heading: 'Roboto, sans-serif', + mono: 'monospace', + }, + colors: { + brand: { + 50: '#E6FFFA', + 100: '#B2F5EA', + 200: '#81E6D9', + 300: '#4FD1C5', + 400: '#38B2AC', + 500: '#319795', + 600: '#2C7A7B', + 700: '#285E61', + 800: '#234E52', + 900: '#1D4044', + }, + }, + semanticTokens: { + colors: { + mainContainerBg: { + default: 'gray.100', + }, + viewContainerBg: { + default: 'white', + }, + viewContainerLoaderBg: { + default: 'whiteAlpha.800', + }, + bodyText: { + default: 'gray.800', + }, + }, + }, + styles: { + global: { + body: { + bg: '#163735', + }, + }, + }, + qrCode: { + back: '#FFFFFF', + fill: '#1A202C', + }, +}; const ON_COMPLETE_TIMEOUT_MS = 1000 * 5; export function App() { const { state, init } = useInitialize(); + const [theme, setTheme] = useState(extendBaseTheme({ ...common, ...defaultTheme })); useEffect(() => { init(); @@ -44,25 +89,42 @@ export function App() { } }, [state.status]); + useEffect(() => { + if (state.status === 'SUCCESS') { + const themes = state.data[1].appConfig?.themes; + if (isNil(themes) || themes.length === 0) return; + + const initConfigThemeName = state.data[1].initConfig?.theme; + if (isNil(initConfigThemeName)) return; + + const customTheme = themes.find((t) => t.themeName === initConfigThemeName); + if (isNil(customTheme)) return; + + setTheme(extendBaseTheme({ ...common, ...customTheme })); + } + }, [state.status]); + return ( - + <> {state.status === 'SUCCESS' && ( - - setTimeout(() => { - const [transport, params] = state.data; - transport.emit(CommunicatorEvents.finished); - transport.destroy(); - const redirectUrl = params.initConfig?.redirectUrl; - if (!isNil(redirectUrl)) { - window.open(redirectUrl, '_self'); - } - }, ON_COMPLETE_TIMEOUT_MS), - }} - > - - + + + setTimeout(() => { + const [transport, params] = state.data; + transport.emit(CommunicatorEvents.finished); + transport.destroy(); + const redirectUrl = params.initConfig?.redirectUrl; + if (!isNil(redirectUrl)) { + window.open(redirectUrl, '_self'); + } + }, ON_COMPLETE_TIMEOUT_MS), + }} + > + + + )} {state.status === 'FAILURE' && ( )} - + ); } diff --git a/src/common/components/ErrorAlert.tsx b/src/common/components/ErrorAlert.tsx index 64aaed62..fbaca508 100644 --- a/src/common/components/ErrorAlert.tsx +++ b/src/common/components/ErrorAlert.tsx @@ -24,7 +24,7 @@ export function ErrorAlert({ title, description, isReloading }: ErrorAlertProps) {description} {isReloading && ( -
+ + )} - {l['form.qr.code']} + + {l['form.qr.code']} + {initContext.redirectUrl && ( <> -
+