Add Promotional Message Component

Author: jondjones

code-examples.md

@@ -56,3 +56,15 @@ const activateUser = (componentName) => {
   optimizelyClient.track('banner_click', componentName);
 };
 ```
+
+## React SDK Examples
+
+- [Hook useDecision()](https://github.com/jondjones-poc/optimizely-fullstack-demo/blob/master/component/SubscribePage.js#L13)
+
+- [HOC via React SDK](https://github.com/jondjones-poc/optimizely-fullstack-demo/blob/master/pages/landingpage.js#L60)
+
+- [withOptimizely()](https://github.com/jondjones-poc/optimizely-fullstack-demo/blob/master/component/BannerForSubscribeMembers.js#L72)
+
+## Data File Examples
+
+- [Get Data via getServerSideProps()](https://github.com/jondjones-poc/optimizely-fullstack-demo/blob/master/pages/plp.js#L133)

component/BannerForPlpFilter.js

@@ -7,7 +7,7 @@ const BannerForPlpFilter = ({...props}) => {
         <div className={`row ${styles.plpFilter}`}>
             <ul className={`col-6 ${styles.tags}`} >
                 <li>
-                    <b className={`${styles.title}`}>Segment Example:</b>
+                    <b className={`${styles.title}`}>Banner Example:</b>
                 </li>
                 <li>
                     <Link href="/plp?utc_campaign=vip" className={`${styles.tag}`}>
@@ -24,16 +24,12 @@ const BannerForPlpFilter = ({...props}) => {
                         MARKETING BANNER
                     </Link>
                 </li>
-                <li>
-                    <Link href="/plp" className={`${styles.tag}`}>
-                        NORMAL
-                    </Link>
-                </li>
+
             </ul>
 
             <ul className={`col-6 ${styles.tags}`} >
                 <li >
-                    <b className={`${styles.title}`}>Algorithm Example:</b>
+                    <b className={`${styles.title}`}>Menu Example:</b>
                 </li>
                 <li>
                     <Link href="/plp?algorithm=1" className={`${styles.tag}`}>
@@ -52,7 +48,7 @@ const BannerForPlpFilter = ({...props}) => {
                 </li>
                 <li>
                     <Link href="/plp" className={`${styles.tag}`}>
-                        MENU 4
+                        NORMAL
                     </Link>
                 </li>
             </ul>

component/MultiArmBanditComponent.js

@@ -0,0 +1,24 @@
+const promotionBannerStyle = {
+    width: '100%',
+    display: 'block',
+    position: 'relative',
+    backgroundSize: '100%',
+    backgroundColor: 'black',
+    color: 'white',
+    textAlign: 'center',
+    padding: '1rem',
+    fontSize: '2rem'
+}
+
+const RemoteControlComponent = ({...props}) => {
+
+    const { promotionMessage } = props;
+
+    return (
+        <div className="container" style={promotionBannerStyle}>
+                {promotionMessage}
+        </div>
+    )
+}
+
+export default RemoteControlComponent;

component/RemoteControlComponent.js

@@ -5,12 +5,14 @@ import { getOptimizelyProjectsDataFile, getUserId } from "../utils/optimizelyCon
 
 import Banner from "../component/Banner";
 import FeatureFlagComponent from "../component/FeatureFlagComponent";
+import RemoteControlComponent  from "../component/RemoteControlComponent";
 
 export default function Home({...props}) {
 
   const { datafile, clientId } = props;
 
   let [ isFeatureEnabled, renderIsFeatureEnabled ] = useState(false);
+  let [ promotionalMessage, setPromotionalMessage ] = useState('');
   let [ backgroundColor, setBackgroundColor ] = useState('');
   let [ componentTitle, setComponentTitle ] = useState('');
   let [ bannerText, setBannerText ] = useState('');
@@ -44,6 +46,10 @@ export default function Home({...props}) {
       console.log('featureFlag', featureFlag);
       renderIsFeatureEnabled(featureFlag.enabled);
 
+      const remoteControl = optimizelyUserContext.decide('1_homepage_-_remote_control');
+      console.log('remote_control', remoteControl);
+      setPromotionalMessage(remoteControl.variables.promotionMessage);
+
       // AB Testing Code
       const abTestFlag = optimizelyUserContext.decide('ab_test');
       console.log('abTest', abTestFlag);
@@ -64,6 +70,12 @@ export default function Home({...props}) {
 
       <section id="main">
 
+      {promotionalMessage &&
+          <RemoteControlComponent
+                        promotionMessage={promotionalMessage} />
+        }
+
+
         {componentTitle &&
           <Banner key={`${componentTitle}${backgroundColor}`}
                         userId={userId}