From b82d5419df4d05e9f8aefeb8ed10bb46ed9a9194 Mon Sep 17 00:00:00 2001
From: Sergey Kambalin <sergey.kambalin@cere.io>
Date: Fri, 23 Feb 2024 10:10:38 +0600
Subject: [PATCH] Add context banner support to login UI

---
 CHANGELOG.md                                  |  1 +
 packages/ui/src/components/Banner/Banner.tsx  |  9 +++++++--
 .../AppContextBanner/AppContextBanner.tsx     | 19 +++++++++++--------
 src/components/Login/LoginPage.tsx            |  9 +++++++++
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 812cca62..b50f5a06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### vNext
 
 - Upgrade Web3Auth libraries to support latest updates in Web3Auth infrastructure
+- Add context banner support to login UI
 
 ### v1.31.0
 
diff --git a/packages/ui/src/components/Banner/Banner.tsx b/packages/ui/src/components/Banner/Banner.tsx
index a876b783..644de559 100644
--- a/packages/ui/src/components/Banner/Banner.tsx
+++ b/packages/ui/src/components/Banner/Banner.tsx
@@ -5,7 +5,7 @@ import { BannerPlaceProps, bannerPlacementIdMap } from './BannerPlace';
 
 export type BannerProps = BoxProps & {
   height?: number;
-  placement?: BannerPlaceProps['placement'];
+  placement?: BannerPlaceProps['placement'] | 'content';
 };
 
 const BannerContent = styled(Box)(({ theme }) => ({
@@ -16,8 +16,13 @@ const BannerContent = styled(Box)(({ theme }) => ({
 }));
 
 export const Banner = ({ placement = 'top', height, ...props }: BannerProps) => {
-  const container = document.getElementById(bannerPlacementIdMap[placement]);
   const [detectedHeight, setDetectedHeight] = useState(0);
+
+  if (placement === 'content') {
+    return <Box {...props} />;
+  }
+
+  const container = document.getElementById(bannerPlacementIdMap[placement]);
   const resultHeight = height || detectedHeight;
 
   const updateHeight = (element: HTMLDivElement | null) => {
diff --git a/src/components/AppContextBanner/AppContextBanner.tsx b/src/components/AppContextBanner/AppContextBanner.tsx
index 0ebc03f3..2dcca783 100644
--- a/src/components/AppContextBanner/AppContextBanner.tsx
+++ b/src/components/AppContextBanner/AppContextBanner.tsx
@@ -1,6 +1,7 @@
 import {
   styled,
   Banner,
+  BannerProps,
   Avatar,
   ListItem,
   ListItemAvatar,
@@ -17,7 +18,10 @@ import { observer } from 'mobx-react-lite';
 import { useCallback } from 'react';
 import { useAppContextStore } from '~/hooks';
 
-export type AppContextBannerProps = {};
+export type AppContextBannerProps = BannerProps & {
+  variant?: 'app' | 'banner';
+  hideBackButton?: boolean;
+};
 
 type Row = {
   variant: 'primary' | 'secondary';
@@ -57,29 +61,28 @@ const getTypographyProps = ({ variant, color }: Row) => ({
   color: color || typographyPropsMap[variant].color,
 });
 
-const AppContextBanner = (props: AppContextBannerProps) => {
+const AppContextBanner = ({ variant, hideBackButton = false, ...props }: AppContextBannerProps) => {
   const { banner } = useAppContextStore();
 
   const handleBackClick = useCallback(() => {
     window.close();
   }, []);
 
-  if (!banner) {
+  if (!banner || (variant && variant !== banner.variant)) {
     return null;
   }
 
-  const variant = banner.variant || 'banner';
-  const hasBackButton = banner.hasBackButton ?? true;
+  const hasBackButton = !hideBackButton && (banner.hasBackButton ?? true);
   const [contentTitle, contentText] = banner.content;
   const [rightTitle, rightText] = banner.right || [];
-  const FallbackIcon = variant === 'app' ? WindowIcon : PhotoOutlinedIcon;
+  const FallbackIcon = banner.variant === 'app' ? WindowIcon : PhotoOutlinedIcon;
 
-  const appBadgeElement = variant === 'app' && !banner.thumbnailUrl && (
+  const appBadgeElement = banner.variant === 'app' && !banner.thumbnailUrl && (
     <LanguageIcon color="primary" fontSize="small" />
   );
 
   return (
-    <Banner paddingLeft={hasBackButton ? 1.5 : 2} paddingRight={2} paddingY={0.5}>
+    <Banner paddingLeft={hasBackButton ? 1.5 : 2} paddingRight={2} paddingY={0.5} {...props}>
       <ListItem disablePadding>
         {hasBackButton && (
           <IconButton sx={{ marginRight: 1 }} onClick={handleBackClick}>
diff --git a/src/components/Login/LoginPage.tsx b/src/components/Login/LoginPage.tsx
index fcae8858..279bfc92 100644
--- a/src/components/Login/LoginPage.tsx
+++ b/src/components/Login/LoginPage.tsx
@@ -24,6 +24,7 @@ import { getTokenWithFacebook, getTokenWithGoogle } from './auth.service';
 import { useEffect } from 'react';
 import { SUPPORTED_SOCIAL_LOGINS } from '~/constants';
 import { useAppContextStore } from '~/hooks';
+import { AppContextBanner } from '../AppContextBanner';
 
 interface LogInProps {
   variant?: 'signin' | 'signup';
@@ -40,6 +41,11 @@ export const CereWhiteLogo = styled(CereWhiteIcon)(({ theme }) => ({
   fontSize: theme.typography.pxToRem(48),
 }));
 
+const Banner = styled(AppContextBanner)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[100],
+  borderRadius: theme.shape.borderRadius * 2,
+}));
+
 export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -125,6 +131,9 @@ export const LoginPage = ({ variant = 'signin', onRequestLogin }: LogInProps) =>
           ? "Creating an account is easy! Fill in your email, confirm & claim your spot on the leaderboard! As a sign-up bonus you'll receive 10 credits to continue playing for free"
           : 'Send and receive any currency or simply top up with your card.'}
       </Typography>
+
+      <Banner hideBackButton variant="banner" placement="content" />
+
       <FormControl>
         <TextField
           {...register('email')}