Skip to content

Commit 00050af

Browse files
jondjonesjondjones
committed
HSBC-P
1 parent 65648e5 commit 00050af

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+831
-164
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,20 @@ First, run the development server:
1717
npm run dev
1818
```
1919

20+
Click this button to create a new Github repo, new Netlify project and deploy this example yourself
21+
22+
[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/jondjones-poc/Fullstack-demo)
23+
2024
## Useful Documentation 📄
2125

26+
**SDK**
27+
2228
- [JavaScript (Browser) SDK](https://docs.developers.optimizely.com/full-stack/docs/javascript-sdk)
2329

2430
- [JavaScript (Node) SDK](https://docs.developers.optimizely.com/full-stack/docs/javascript-node-sdk)
2531

2632
- [@optimizely/optimizely-sdk](https://www.npmjs.com/package/@optimizely/optimizely-sdk)
2733

34+
**Metrics**
35+
2836
- [Total Value and Revenue Metrics](https://support.optimizely.com/hc/en-us/articles/4410289433229-Total-value-and-other-numeric-metrics)

‎component/ABComponent.js‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,46 @@
11
import React from 'react'
2+
import styles from './ABComponent.module.css'
23

34
const sectionStyle = (backgroundColor) => (
45
{
56
width: '100%',
6-
backgroundColor : backgroundColor,
77
backgroundPosition: 'center',
88
backgroundSize: 'cover',
99
backgroundRepeat: 'no-repeat',
10-
height: '20vh'
10+
width: '100%',
11+
padding: '60px 0',
12+
textAlign: 'center',
13+
background: backgroundColor,
14+
color: 'white',
15+
padding: `60px 0`,
16+
textAlign: `center`,
1117
});
1218

1319

14-
const titleStyle = {
15-
color: 'black',
16-
margin: 'auto',
17-
fontSize: '3rem',
18-
textAlign: 'center',
19-
paddingTop: '35px'
20-
};
21-
2220
const ABComponent = ({...props}) => {
2321

22+
const { backgroundColor, bannerText } = props;
23+
2424
const addEvent = () => {
25-
optimizelyClient.track('button_click', props.userId);
25+
console.log("AB Component Event Example")
26+
props.optimizelyClient.track('button_click', props.userId);
2627
}
2728

2829
return (
29-
<div className="container" id="component-a" style={sectionStyle(props.backgroundColor)} onClick={addEvent} >
30-
<h1 style={titleStyle}>
30+
<div className="header" id="component-a" style={sectionStyle(backgroundColor)} >
31+
32+
<h1 className={styles.titleHeading}>
3133
{props.componentTitle}
3234
</h1>
35+
36+
<div className={styles.titleText}>
37+
{bannerText} today!
38+
</div>
39+
40+
<a className={styles.btnBgstroke} onClick={addEvent} >
41+
Buy now
42+
</a>
43+
3344
</div>
3445
)
3546
}

‎component/ABComponent.module.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
3+
.btnBgstroke {
4+
font-size: 20px;
5+
display: inline-block;
6+
border: 1px solid white;
7+
padding: 10px 20px;
8+
border-radius: 10px;
9+
cursor: pointer;
10+
font-weight: 300;
11+
margin-top: 30px;
12+
background-color: white;
13+
}
14+
15+
.btnBgstroke:hover {
16+
background-color: white;
17+
color: #33cccc;
18+
}
19+
20+
21+
.titleHeading {
22+
font-size: 2.8em;
23+
padding: 10px 0;
24+
font-weight: 800;
25+
color: black;
26+
}
27+
28+
.titleText {
29+
font-size: 2.5em;
30+
font-weight: 100;
31+
letter-spacing: 5px;
32+
color: black;
33+
padding: 2.5%;
34+
}

‎component/Content.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useEffect } from "react";
2+
import { fetchEntry } from '../utils/contentfulConnector1';
3+
4+
const Content = ({...props}) => {
5+
6+
const { content, variationToUse } = props;
7+
8+
const entityId = content?.fields?.meta[variationToUse];
9+
console.log('**', entityId, variationToUse);
10+
11+
useEffect(() => {
12+
console.log('entries');
13+
const fetchData = async () => {
14+
const entries = await fetchEntry(entityId);
15+
console.log('entries', entries);
16+
}
17+
fetchData().catch(console.error);
18+
19+
}, [entityId]);
20+
21+
return (
22+
<div className="header" >
23+
24+
CONTENT
25+
26+
</div>
27+
)
28+
}
29+
30+
export default Content

‎component/DiscountBanner.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import Link from "next/link";
3+
4+
const DiscountBanner = ({...props}) => {
5+
6+
const { componentMessage, discount } = props;
7+
8+
const bannerClicked = () => {
9+
optimizelyClient?.track('banner_click', userId, {variation: postId});
10+
console.log(`Banner ${postId} clicked`)
11+
}
12+
13+
if (!componentMessage)
14+
return null;
15+
16+
return (
17+
<section id="banner">
18+
<div className="container">
19+
<p>{componentMessage}</p>
20+
{discount ?
21+
<ul className="actions">
22+
<li>
23+
<a href="#" className="button icon solid fa-file">
24+
Order now and get a {discount}% discount
25+
</a>
26+
</li>
27+
</ul>
28+
: null}
29+
</div>
30+
</section>
31+
)
32+
}
33+
34+
export default DiscountBanner

‎component/FeatureFlagComponent.js‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import React from 'react'
22

3-
const sectionStyle = {
3+
const featureFlagStyle = {
44
width: '100%',
5-
backgroundImage: `url(images/feature.png)`,
6-
backgroundPosition: 'center',
7-
backgroundSize: 'cover',
5+
display: 'block',
86
backgroundRepeat: 'no-repeat',
9-
height: '50vh'
10-
};
7+
position: 'relative',
8+
width: '100%',
9+
height: '0',
10+
paddingBottom:'20%',
11+
backgroundSize: '100%'
12+
}
13+
14+
const imageStyle = {
15+
width: '100%'
16+
};
1117

1218
const FeatureFlagComponent = ({...props}) => {
1319

20+
const { userId, optimizelyClient, clientId } = props;
21+
1422
const addEvent = () => {
15-
props.optimizelyClient.track('button_click', props.userId);
23+
optimizelyClient?.track('button_click', userId);
1624
}
1725

1826
return (
19-
<div className="container" id="feature-flag">
20-
<div id="feature-flag" onClick={addEvent} style={ sectionStyle }>
21-
22-
</div>
27+
<div className="container" id="feature-flag" onClick={featureFlagStyle} style={imageStyle}>
28+
<img src={`images/${clientId}/feature.png`} style={imageStyle} alt="feature-flag" />
2329
</div>
2430
)
2531
}

‎component/Footer.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11

22
const sectionStyle = {
3-
width: '100%',
4-
backgroundImage: `url(images/footer.png)`,
5-
backgroundPosition: 'center',
6-
backgroundSize: 'fit',
3+
display: 'block',
74
backgroundRepeat: 'no-repeat',
8-
backgroundSize: 'cover',
9-
height: '692px'
10-
};
5+
position: 'relative',
6+
width: '100%',
7+
height: '100%'
8+
};
119

10+
const imageStyle = {
11+
width: '100%'
12+
};
1213

13-
const Footer = () => {
14-
return (
15-
<section id="footer" style={ sectionStyle }>
14+
const Footer = ({clientId}) => {
1615

16+
return (
17+
<section id="footer" style={sectionStyle}>
18+
<img src={`images/${clientId}/footer.png`} style={imageStyle} alt="Footer" />
1719
</section>
1820
)
1921
}

‎component/Header.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
1+
import Link from "next/link";
12

23
const sectionStyle = {
3-
width: '100%',
4-
backgroundImage: `url(images/header.png)`,
5-
backgroundPosition: 'center',
6-
backgroundSize: 'cover',
4+
display: 'block',
75
backgroundRepeat: 'no-repeat',
8-
height: '900px'
9-
};
6+
position: 'relative',
7+
width: '100%',
8+
height: '100%',
9+
backgroundSize: '100%'
10+
};
1011

12+
const imageStyle = {
13+
width: '100%'
14+
};
1115

12-
const Header = () => {
13-
return (
14-
<section id="header" style={ sectionStyle }>
16+
const Header = ({...props}) => {
1517

18+
const { clientId } = props;
19+
20+
return (
21+
<section id="header" style={sectionStyle}>
22+
<Link href="/">
23+
<a>
24+
<img src={`images/${clientId}/header.png`} style={imageStyle} alt="Header" />
25+
</a>
26+
</Link>
1627
</section>
1728
)
1829
}

‎component/Highlights.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import styles from './Highlights.module.css';
2+
3+
export default function Highlights({id, className, title, subtitle, highlights, background}) {
4+
5+
6+
7+
return (
8+
<section id={p.id} className={className} >
9+
<div className={styles.header}>
10+
<h2 className={styles.title}>{p.title}</h2>
11+
<p className={styles.subtitle}>{p.subtitle}</p>
12+
</div>
13+
14+
<ul className={styles.highlights}>
15+
{p.highlights.map((item, i) => {
16+
return (
17+
<li key={i} className={styles.highlight}>
18+
<div className={styles['highlight-illustration']}/>
19+
<div className={styles['highlight-content']}>
20+
<h3 className={styles['highlight-title']}>{item.title}</h3>
21+
<p className={styles['highlight-text']}>{item.text}</p>
22+
</div>
23+
</li>
24+
);
25+
})}
26+
</ul>
27+
</section>
28+
);
29+
}

0 commit comments

Comments
 (0)