Added Signup Page

Author: jondjones

component/FeatureFlagComponent.js

@@ -18,6 +18,10 @@ const FeatureFlagComponent = ({...props}) => {
         console.log('feature_flag_component_click')
     }
 
+    const featureUrl =  clientId
+                ? `/demo/${clientId}/feature.png`
+                :  `/images/feature.png`
+
     return (
         <section id="features">
 
@@ -26,7 +30,7 @@ const FeatureFlagComponent = ({...props}) => {
                      id="feature-flag"
                      onClick={() => addEvent(optimizelyClient, userId)} style={featureFlagStyle}>
 
-                    <Image src={`/demo/${clientId}/feature.png`}
+                    <Image src={featureUrl}
                         width="1200"
                         height="400"
                         alt="feature-flag" />

component/BannerForPlpFilter.js renamed to component/SegmentationAlgorithmFilter.js

@@ -1,32 +1,10 @@
 import Link from "next/link";
-import styles from '../styles/BannerForPlpFilter.module.css'
+import styles from '../styles/SegmentationFilter.module.css'
 
-const BannerForPlpFilter = ({...props}) => {
+const SegmentationAlgorithmFilter = ({...props}) => {
 
     return (
         <div className={`row ${styles.plpFilter}`}>
-            <ul className={`col-6 ${styles.tags}`} >
-                <li>
-                    <b className={`${styles.title}`}>Banner Example:</b>
-                </li>
-                <li>
-                    <Link href="/plp?utc_campaign=vip" className={`${styles.tag}`}>
-                        VIP
-                    </Link>
-                </li>
-                <li>
-                    <Link href="/plp?utc_campaign=new" className={`${styles.tag}`}>
-                        NEW
-                    </Link>
-                </li>
-                <li>
-                    <Link href="/plp?utc_campaign=marketing" className={`${styles.tag}`}>
-                        MARKETING BANNER
-                    </Link>
-                </li>
-
-            </ul>
-
             <ul className={`col-6 ${styles.tags}`} >
                 <li >
                     <b className={`${styles.title}`}>Menu Example:</b>
@@ -56,4 +34,4 @@ const BannerForPlpFilter = ({...props}) => {
     )
 }
 
-export default BannerForPlpFilter;
+export default SegmentationAlgorithmFilter;

component/BannerForPlpSegments.js renamed to component/SegmentationQueryStringBanner.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const BannerForPlpSegments = ({...props}) => {
+const SegmentationQueryStringBanner = ({...props}) => {
 
     const { componentMessage, discount } = props;
 
@@ -15,7 +15,7 @@ const BannerForPlpSegments = ({...props}) => {
         {discount ?
           <ul className="actions">
             <li>
-              <a href="/news" className="button icon solid fa-file">
+              <a href="/signup" className="button icon solid fa-file">
                 Order now and get a {discount}% discount (passed in via FX)
               </a>
             </li>
@@ -26,4 +26,5 @@ const BannerForPlpSegments = ({...props}) => {
     )
 }
 
-export default BannerForPlpSegments;
+export default SegmentationQueryStringBanner;
+

component/SegmentationUrlFilter.js

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import styles from '../styles/SegmentationFilter.module.css'
+
+const SegmentationMenuFilter = ({...props}) => {
+
+    return (
+        <div className={`row ${styles.plpFilter}`}>
+            <ul className={`col-12 ${styles.tags}`} >
+                <li>
+                    <b className={`${styles.title}`}>Segmentation Examples:</b>
+                </li>
+                <li>
+                    <Link href="/signup?utc_campaign=newsletter_campaign" className={`${styles.tag}`}>
+                        Campaign Promotion
+                    </Link>
+                </li>
+                <li>
+                    <Link href="/signup?utc_campaign=returning" className={`${styles.tag}`}>
+                        New vs. Returning Visitor
+                    </Link>
+                </li>
+                <li>
+                    <Link href="/signup?device_type=website" className={`${styles.tag}`}>
+                        Device Type
+                    </Link>
+                </li>
+
+            </ul>
+        </div>
+    )
+}
+
+export default SegmentationMenuFilter;

layout/TopHeader.js

@@ -9,16 +9,16 @@ export default function TopHeader() {
                 path: "/"
             },
             {
-                name: "Segmentation Examples",
+                name: "Campaign/Personalisation",
+                path: "/signup"
+            },
+            {
+                name: "Algorithm",
                 path: "/plp"
             },
-            {   name: "Content Examples",
+            {   name: "Recommendations & CMS Connector",
                 path: "/news"
             },
-            {
-                name: "Landing Page",
-                path: "/landingpage"
-            },
             {   name: "Code",
                 path: "https://github.com/jondjones-poc/optimizely-fullstack-demo"
             }

pages/plp.js

@@ -2,8 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from 'next/router'
 import { getOptimizelyProjectsDataFile, getUserId } from "../utils/optimizelyConnector";
 import { createInstance } from "@optimizely/optimizely-sdk";
-import BannerForPlpFilter from "../component/BannerForPlpFilter";
-import BannerForPlpSegments from "../component/BannerForPlpSegments";
+import SegmentationAlgorithmFilter from "../component/SegmentationAlgorithmFilter";
 
 const imageStyle = {
   width: '100%'
@@ -13,12 +12,13 @@ const featureStyle = {
   paddingBottom: '5rem'
 };
 
+
+
 export default function ProductListingPage({...props}) {
 
-  const { datafile, clientId } = props;
+  const { datafile, clientId, imageExists } = props;
+  const imageFolder = imageExists ? clientId : 'default';
 
-  const [ componentMessage, setComponentMessage ] = useState();
-  const [ discountAmount, setDiscountAmount ] = useState();
   const [ categoryFilterVersion, setCategoryFilterVersion ] = useState(0);
   const [ sizeFilterVersion, setSizeFilterVersion ] = useState(0);
 
@@ -27,9 +27,8 @@ export default function ProductListingPage({...props}) {
   });
 
   const router = useRouter()
-  const { segment = '', utc_campaign = '', algorithm = '' } = router.query
-  console.log('Segments', segment)
-  console.log('UTC campaign', utc_campaign)
+  const { algorithm = '' } = router.query
+  console.log('imageExists', imageExists)
 
   // Demo of setting IDS to variations, useful for integration testing
   const userId = algorithm || getUserId(router);
@@ -41,36 +40,23 @@ export default function ProductListingPage({...props}) {
 
       // Passing attributes for personalization
       {
-        algorithm: algorithm,
-        segment: segment,
-        user: segment,
-        utc_campaign: utc_campaign
+        algorithm: algorithm
       }
     );
   });
 
+
   useEffect(() => {
       optimizelyClient.onReady().then(() => {
 
-        const personalisationDecision  = optimizelyUserContext.decide('personalisation');
-        console.log('personalisationDecision', personalisationDecision);
-
-        const componentMessage = personalisationDecision.variables.component_message;
-        const discountAmount = personalisationDecision.variables.discount_amount;
-
         const filtertestDecision  = optimizelyUserContext.decide('plp_-_filter_tests');
         console.log('plp_-_filter_tests', filtertestDecision);
 
         const categoryFilterVersion = filtertestDecision.variables.category_filter_version;
         const sizeFilterVersion = filtertestDecision.variables.size_filter_version;
 
-        if (discountAmount && discountAmount >= 0) {
-          setDiscountAmount(discountAmount);
-        }
-
         setCategoryFilterVersion(categoryFilterVersion);
         setSizeFilterVersion(sizeFilterVersion);
-        setComponentMessage(componentMessage);
       });
   }, [optimizelyUserContext, optimizelyClient]);
 
@@ -81,9 +67,7 @@ export default function ProductListingPage({...props}) {
       <section id="feature" style={featureStyle}>
         <div className="container">
 
-            <BannerForPlpFilter />
-
-            <BannerForPlpSegments discount={discountAmount} componentMessage={componentMessage} />
+            <SegmentationAlgorithmFilter />
 
 						<div className="row">
               <div id="sidebar" className="col-3 col-12-medium">
@@ -100,23 +84,23 @@ export default function ProductListingPage({...props}) {
                   <div className="col-4 col-6-medium col-12-small">
                       <section>
                         <a href="#" className="image featured">
-                          <img src={`demo/${clientId}/item.png`} alt="Item 1" />
+                          <img src={`demo/${imageFolder}/item.png`} alt="Item 1" />
                         </a>
                         <p><img src={`images/landing1.png`} alt="Item 1" /></p>
                       </section>
                   </div>
                   <div className="col-4 col-6-medium col-12-small">
                       <section>
                         <a href="#" className="image featured">
-                          <img src={`demo/${clientId}/item.png`} alt="Item 2" />
+                          <img src={`demo/${imageFolder}/item.png`} alt="Item 2" />
                         </a>
                         <p><img src={`images/landing2.png`} alt="Item 2" /></p>
                       </section>
                   </div>
                   <div className="col-4 col-6-medium col-12-small">
                       <section>
                         <a href="#" className="image featured">
-                          <img src={`demo/${clientId}/item.png`} alt="Item 3" />
+                          <img src={`demo/${imageFolder}/item.png`} alt="Item 3" />
                         </a>
                         <p><img src={`images/landing3.png`} alt="Item 3" /></p>
                       </section>
@@ -130,13 +114,27 @@ export default function ProductListingPage({...props}) {
   )
 }
 
+
+
 export async function getServerSideProps(context) {
 
   const datafile = await getOptimizelyProjectsDataFile();
 
+  const isImageFound = async (imageName) => {
+    var result = await fetch(`https://optimizely-demo.netlify.app/demo/${imageName}/item.png`, {
+      method: "HEAD",
+    });
+
+    return result.status === 200
+  };
+
+  const userAgent = context.req.headers['client'] || null;
+  const imageExists = await isImageFound(userAgent);
+
   return {
     props: {
-      datafile
+      datafile,
+      imageExists
     }
   }
 }

pages/signup.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from 'next/router'
+import { getOptimizelyProjectsDataFile, getUserId } from "../utils/optimizelyConnector";
+import { createInstance } from "@optimizely/optimizely-sdk";
+import SegmentationQueryStringBanner from "../component/SegmentationQueryStringBanner";
+import SegmentationUrlFilter from "../component/SegmentationUrlFilter";
+import Image from 'next/image';
+
+const featureStyle = {
+  paddingBottom: '5rem'
+};
+
+const bannerStyle = {
+  textAlign: 'center'
+};
+
+export default function ProductListingPage({...props}) {
+
+  const { datafile, clientId } = props;
+
+  const [ componentMessage, setComponentMessage ] = useState();
+  const [ discountAmount, setDiscountAmount ] = useState();
+  const [ deviceType, setDeviceType ] = useState();
+
+  const optimizelyClient = createInstance({
+    datafile: datafile,
+  });
+
+  const router = useRouter()
+  const { device_type = '', utc_campaign = '', algorithm = '' } = router.query
+  console.log('Device_type', device_type)
+  console.log('UTC Campaign', utc_campaign)
+  console.log('Algorithm', algorithm)
+
+  // Demo of setting IDS to variations, useful for integration testing
+  const userId = algorithm || getUserId(router);
+  let optimizelyUserContext;
+
+  optimizelyClient.onReady().then(() => {
+    optimizelyUserContext = optimizelyClient.createUserContext(
+      userId,
+      // Passing attributes for personalization
+      {
+        devicetype: device_type,
+        utc_campaign: utc_campaign
+      }
+    );
+  });
+
+  useEffect(() => {
+      optimizelyClient.onReady().then(() => {
+
+        const personalisationDecision  = optimizelyUserContext.decide('personalisation');
+        console.log('personalisationDecision', personalisationDecision);
+
+        const componentMessage = personalisationDecision.variables.component_message;
+        const discountAmount = personalisationDecision.variables.discount_amount;
+
+        setDiscountAmount(discountAmount);
+        setComponentMessage(componentMessage);
+      });
+  }, [optimizelyUserContext, optimizelyClient]);
+
+  return (
+    <>
+
+      <section id="feature" style={featureStyle}>
+        <div className="container">
+
+            <SegmentationUrlFilter />
+
+						<div className="row">
+
+              <div id="content" className="col-12 col-12-medium imp-medium">
+
+                <SegmentationQueryStringBanner discount={discountAmount} componentMessage={componentMessage} />
+
+              </div>
+              <div id="content" className="col-12 col-12-medium imp-medium" style={bannerStyle}>
+
+                <Image src={`/images/hero.png`}
+                    width="1200"
+                    height="400"
+                    alt="feature-flag" />
+
+              </div>
+
+					</div>
+
+					</div>
+        </section>
+    </>
+  )
+}
+
+export async function getServerSideProps(context) {
+
+  const datafile = await getOptimizelyProjectsDataFile();
+
+  return {
+    props: {
+      datafile
+    }
+  }
+}