Add banner on Listings Page to introduce MFE

Author: tc_user

config/default.js

@@ -429,4 +429,5 @@ module.exports = {
   OPTIMIZELY: {
     SDK_KEY: '7V4CJhurXT3Y3bnzv1hv1',
   },
+  PLATFORM_SITE_URL: 'https://platform.topcoder.com',
 };

config/development.js

@@ -4,4 +4,5 @@ module.exports = {
   URL: {
     USER_SETTINGS: '', /* No dev server is available for saved searches */
   },
+  PLATFORM_SITE_URL: 'https://platform.topcoder-dev.com',
 };

src/assets/images/banner-close.svg

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { config } from 'topcoder-react-utils';
+
+import BannerCloseIcon from 'assets/images/banner-close.svg';
+import BannerInfoIcon from 'assets/images/banner-info.svg';
+import './style.scss';
+
+const Banner = () => {
+  const [isDisplayed, setIsDisplayed] = useState(true);
+
+  return isDisplayed && (
+    <div styleName="banner">
+      <div styleName="content">
+        <div styleName="banner-info">
+          <BannerInfoIcon />
+        </div>
+        <span>Click <a href={`${config.PLATFORM_SITE_URL}/earn/find/challenges`} target="_blank" rel="noopener noreferrer">here</a> if you&quot;d like to visit the new BETA Challenge Listings site.</span>
+      </div>
+
+      <div
+        styleName="banner-close"
+        onClick={() => setIsDisplayed(false)}
+        aria-hidden="true"
+        role="button"
+      >
+        <BannerCloseIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Banner;

src/assets/images/banner-info.svg

@@ -0,0 +1,58 @@
+@import "~styles/mixins";
+
+.banner {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  margin: 10px 15px 0 15px;
+  height: 50px;
+  background: linear-gradient(90deg, #2c95d7 0%, #06d6a0 100%);
+
+  border-radius: 10px;
+  color: #fff;
+  @include roboto-medium;
+  font-size: 16px;
+
+  @include xs-to-sm {
+    height: 81px;
+    line-height: 22px;
+    padding-left: 20px;
+  }
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+
+    .banner-info {
+      width: 24px;
+      height: 24px;
+      margin-left: 20px;
+      margin-right: 10px;
+
+      @include xs-to-sm {
+        display: none;
+      }
+    }
+
+    @include xs-to-sm {
+      width: 80%;
+    }
+  }
+
+  .banner-close {
+    width: 14px;
+    height: 14px;
+    margin-right: 30px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    @include xs-to-sm {
+      margin-bottom: 20px;
+    }
+  }
+}

src/shared/components/challenge-listing/Banner/index.jsx

@@ -18,6 +18,7 @@ import { useMediaQuery } from 'react-responsive';
 import NoChallengeCard from './NoChallengeCard';
 import Listing from './Listing';
 // import ChallengeCardPlaceholder from './placeholders/ChallengeCard';
+import Banner from './Banner';
 
 import './style.scss';
 
@@ -167,6 +168,8 @@ export default function ChallengeListing(props) {
           )
       }
 
+      <Banner />
+
       <div styleName="tc-content-wrapper">
         <div styleName={desktop ? 'sidebar-container-desktop' : 'sidebar-container-mobile'}>
           <Sidebar