jondjones-poc
diff --git a/‎component/Header.js‎
Lines changed: 1 addition & 1 deletion b/‎component/Header.js‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎pages/index.js‎
Lines changed: 5 additions & 5 deletions b/‎pages/index.js‎
Lines changed: 5 additions & 5 deletions
diff --git a/‎pages/landing.js‎
Lines changed: 100 additions & 0 deletions b/‎pages/landing.js‎
Lines changed: 100 additions & 0 deletions
diff --git a/‎public/demo/banner-1.gif‎
3.21 MB b/‎public/demo/banner-1.gif‎
3.21 MB
diff --git a/‎public/demo/banner-2.gif‎
2.5 MB b/‎public/demo/banner-2.gif‎
2.5 MB
diff --git a/‎public/demo/banner.gif‎
7.57 MB b/‎public/demo/banner.gif‎
7.57 MB
diff --git a/‎public/images/1.png‎
-1.24 MB b/‎public/images/1.png‎
-1.24 MB
diff --git a/‎public/images/2.png‎
-480 KB b/‎public/images/2.png‎
-480 KB
diff --git a/‎public/images/3.png‎
294 KB b/‎public/images/3.png‎
294 KB
diff --git a/‎public/images/alt-body.png‎
-1.32 MB b/‎public/images/alt-body.png‎
-1.32 MB
@@ -5,7 +5,7 @@ const sectionStyle = {
     backgroundPosition: 'center',
     backgroundSize: 'cover',
     backgroundRepeat: 'no-repeat',
-    height: '195px'
+    height: '900px'
   };
 
 
 
@@ -17,7 +17,7 @@ const dataFileUrl = `https://cdn.optimizely.com/datafiles/${sdkKey}.json`;
 export default function Home({...props}) {
 
   const [ isFeatureEnabled, renderIsFeatureEnabled ] = useState(true);
-  const [ backgroundColor, setBackgroundColor ] = useState('');
+  const [ backgroundColour, setBackgroundColor ] = useState('');
   const [ componentTitle, setComponentTitle ] = useState('');
   const [ postData, setPostData ] = useState({});
 
@@ -29,7 +29,7 @@ export default function Home({...props}) {
   });
 
   // Got user Id either via query-string, or, create a random one
-  const { id, location } = router.query
+  const { id } = router.query
   const userId = id || uuidv4();
 
   let optimizelyUserContext;
@@ -38,7 +38,7 @@ export default function Home({...props}) {
     optimizelyUserContext = optimizelyClient.createUserContext(
       userId,
       {
-        location: location || "london",
+        location: "london",
         deviceType: "ios"
       }
     );
@@ -55,7 +55,7 @@ export default function Home({...props}) {
 
       // AB Testing Code
       const abTestData = optimizelyUserContext.decide('ab_test');
-      setBackgroundColor(abTestData.variables.backgroundcolour);
+      setBackgroundColor(abTestData.variables.backgroundColour);
       setComponentTitle(abTestData.variables.component_title);
 
       /// Multi-arm bandit code
@@ -117,7 +117,7 @@ export default function Home({...props}) {
             </h2>
           </header>
 
-          <ABComponent userId={userId} optimizelyClient backgroundColor={backgroundColor} componentTitle={componentTitle} />
+          <ABComponent userId={userId} optimizelyClient backgroundColor={backgroundColour} componentTitle={componentTitle} />
 
         </div>
         <div className="container">
 
@@ -0,0 +1,100 @@
+import Head from 'next/head'
+import React, { useEffect, useState } from "react";
+import { v4 as uuidv4 } from 'uuid';
+
+import { useRouter } from 'next/router'
+
+import {
+    createInstance
+} from "@optimizely/optimizely-sdk";
+
+const sdkKey = process.env.NEXT_PUBLIC_SDK_KEY;
+const dataFileUrl = `https://cdn.optimizely.com/datafiles/${sdkKey}.json`;
+
+export default function Landing({...props}) {
+
+  const [ displayBanner, renderPersonalisationBanner ] = useState(false);
+
+  const router = useRouter()
+
+  const optimizelyClient = createInstance({
+    datafile: props?.datafile,
+  });
+
+  const { user = '' } = router.query
+  const userId = uuidv4();
+
+  let optimizelyUserContext;
+
+  console.log('user segment', user);
+
+  optimizelyClient.onReady().then(() => {
+    optimizelyUserContext = optimizelyClient.createUserContext(
+      userId,
+      {
+        user: user
+      }
+    );
+  });
+
+    useEffect(() => {
+        optimizelyClient.onReady().then(() => {
+
+        const decision  = optimizelyUserContext.decide('personalisation');
+        console.log('matched on key', decision.ruleKey, decision);
+
+        renderPersonalisationBanner(decision.enabled);
+        });
+    }, [optimizelyUserContext, optimizelyClient]);
+
+  return (
+    <>
+      <Head>
+
+        <title>
+          Optimizely Fullstack Javascript
+        </title>
+
+        <meta name="description" content="Generated by JonDJones" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <section id="features">
+        <div className="container" id="feature-container">
+          <header>
+            <h2>
+              <strong>
+                  {"Display Personlisation: " + displayBanner}
+              </strong>
+            </h2>
+          </header>
+        </div>
+      </section>
+
+      {displayBanner ?
+        <section id="main">
+          <div className="container">
+            <header>
+              <h2>
+                <strong>
+                  Hello VIP User!
+                </strong>
+              </h2>
+            </header>
+          </div>
+        </section> : null
+      }
+    </>
+  )
+}
+
+export async function getServerSideProps(context) {
+  const response = await fetch(dataFileUrl);
+  const datafile = await response.json();
+
+  return {
+    props: {
+      datafile
+    }
+  }
+}