Merge branch 'develop' into social-share-images

Author: luizrrodrigues

.circleci/config.yml

@@ -276,6 +276,7 @@ workflows:
             branches:
               only:
                 - develop
+                - nursoltan-s-issue-5490
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -296,14 +297,14 @@ workflows:
           filters:
             branches:
               only:
-                - social-share-images
+                - free
       # This is stage env for production QA releases
       - "build-prod-staging":
           context : org-global         
           filters:
             branches:
               only:
-                - free
+                - develop
       - "approve-smoke-test-on-staging":
           type: approval
           requires:

__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap

@@ -8,6 +8,7 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = `
   <Connect(Container)
     setFilterState={[MockFunction]}
   />
+  <Banner />
   <div
     className="src-shared-components-challenge-listing-___style__tc-content-wrapper___1MqlF"
   >
@@ -64,6 +65,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = `
   <Connect(Container)
     setFilterState={[MockFunction]}
   />
+  <Banner />
   <div
     className="src-shared-components-challenge-listing-___style__tc-content-wrapper___1MqlF"
   >

build.sh

@@ -33,6 +33,7 @@ docker build -t $TAG \
   --build-arg OPEN_EXCHANGE_RATES_KEY=$OPEN_EXCHANGE_RATES_KEY \
   --build-arg SEGMENT_IO_API_KEY=$SEGMENT_IO_API_KEY \
   --build-arg CHAMELEON_VERIFICATION_SECRET=$CHAMELEON_VERIFICATION_SECRET \
+  --build-arg PLATFORM_SITE_URL=$PLATFORM_SITE_URL \
   --build-arg SERVER_API_KEY=$SERVER_API_KEY \
   --build-arg TC_M2M_CLIENT_ID=$TC_M2M_CLIENT_ID \
   --build-arg TC_M2M_CLIENT_SECRET=$TC_M2M_CLIENT_SECRET \

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,42 @@
+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 && (
+    <a
+      href={`${config.PLATFORM_SITE_URL}/earn/find/challenges`}
+      target="_blank"
+      rel="noopener noreferrer"
+      styleName="banner"
+    >
+      <div styleName="content">
+        <div styleName="banner-info">
+          <BannerInfoIcon />
+        </div>
+        <span>
+          Click here if you&apos;d like to visit the new Beta Challenge Listings site
+        </span>
+      </div>
+
+      <div
+        styleName="banner-close"
+        onClick={(e) => {
+          e.preventDefault();
+          setIsDisplayed(false);
+        }}
+        aria-hidden="true"
+        role="button"
+      >
+        <BannerCloseIcon />
+      </div>
+    </a>
+  );
+};
+
+export default Banner;

src/assets/images/banner-info.svg

@@ -0,0 +1,59 @@
+@import "~styles/mixins";
+
+.banner {
+  @include roboto-medium;
+
+  @include xs-to-sm {
+    height: 81px;
+    line-height: 22px;
+    padding-left: 20px;
+  }
+
+  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;
+  font-size: 16px;
+
+  .content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    color: #fff;
+
+    .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