39 src/components/Home/points.css
View file
@@ -0,0 +1,39 @@
.home-points{
width: 100%;
height: 79px;
border-radius: 4px;
background-color: #fd7171;
}

.home-points-row{
width: 100%;
}

.home-points-text{
text-align: center;
font-weight:500;
margin-top: 15px;
margin-bottom: 15px;
}

.home-points-total{
font-size: 18px;
line-height: 1.06;
color: #ffffff;
margin-left: 10px;
}

.home-points-check{
font-size: 16px;
line-height: 1.5;
color: #373a3c;
margin-left: 10px;
}

.home-points-img{
display:inline-block;
text-align: center;
margin-left: 15px;
height: 40px;
width: 40px;
}
63 src/components/LinkBlockDropdown/index.js
View file
@@ -0,0 +1,63 @@
import React, {Component} from 'react'
import { connect } from 'react-redux'
import { Collapse, NavItem, NavLink, Container, Card, CardTitle, CardText, Row, Col } from 'reactstrap'
import downAngle from '../../img/downAngle.svg'
import upAngle from '../../img/upAngle.svg'
import './linkBlockDropdown.css'

class LinkBlockDropdown extends Component {
constructor (props) {
super(props)

this.toggleNavbar = this.toggleNavbar.bind(this)
this.state = {
collapsed: !(this.props.linkDropdown === this.props.section.header)
}
}

toggleNavbar () {
const payload = this.props.linkDropdown === this.props.section.header
? null
: this.props.section.header
this.props.dispatch({type: 'SET_LINK_DROPDOWN', payload: payload})
}

render () {
const dropdownArrow = this.state.collapsed
? downAngle
: upAngle

const section = this.props.section

function renderSubheader (subheader) {
return (
<NavLink key={subheader.name} href={subheader.link}>{subheader.name}</NavLink>
)
}

return (
<Container>
<Card onClick={this.toggleNavbar} className='dropdown'>
<Row>
<Col xs='9'>
<CardTitle className='dropdown-title'>{section.header}</CardTitle>
<CardText className='dropdown-descText'>{section.descText}</CardText>
</Col>
<Col xs='3' className='dropdown-chevron-col'>
<span><img className='dropdown-chevron' src={dropdownArrow} alt='' /></span>
</Col>
</Row>
</Card>
<Collapse isOpen={this.props.linkDropdown === this.props.section.header} card>
<Card className='dropdown-list' card>
<NavItem>
{section.subheaders.map(renderSubheader)}
</NavItem>
</Card>
</Collapse>
</Container>
)
}
}

export default connect(state => state)(LinkBlockDropdown)
44 src/components/LinkBlockDropdown/linkBlockDropdown.css
View file
@@ -0,0 +1,44 @@
.dropdown{
width: auto;
height: 79px;
border-radius: 4px;
background-color: #ffffff;
border: solid 1px #e5e5e5 ;
margin-top: 9px;
}

.dropdown-title{
height: 23px;
font-family: HelveticaNeue;
font-size: 18px;
font-weight: 500;
line-height: 1.06;
text-align: left;
color: #35a5b5 ;
padding-left: 14px;
padding-top: 17px;
}

.dropdown-descText{
height: 24px;
font-family: HelveticaNeue;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #373a3c ;
padding-left: 14px;
padding-top: 6px;
}

.dropdown-chevron{
margin-top: 25px;
margin-right: 15px;
height: 30px;
width: 30px;
}

.dropdown-list{
list-style: none;
padding-top: 11px;
padding-bottom: 11px;
}
4 src/components/NavBar/index.js
View file
@@ -45,8 +45,8 @@ class NavBar extends Component {
<Link to='/home'><p id='home' className='menu-item' onClick={this.toggleNavbar}>Home</p></Link>
<Link to='/rewards'><p id='rewards' className='menu-item' onClick={this.toggleNavbar}>Rewards</p></Link>
<Link to='/calendar'><p id='calendar' className='menu-item' onClick={this.toggleNavbar}>Calendar</p></Link>
<Link to='/your-pregnancy'><p id='pregnancy' className='menu-item' onClick={this.toggleNavbar}>Pregnancy</p></Link>
<Link to='/'><p id='babyAndToddler' className='menu-item' onClick={this.toggleNavbar}>Baby & Toddler</p></Link>
<Link to='/your-pregnancy'><p id='pregnancy' className='menu-item' onClick={this.toggleNavbar}>Your Pregnancy</p></Link>
<Link to='/baby-and-toddler'><p id='babyAndToddler' className='menu-item' onClick={this.toggleNavbar}>Baby & Toddler</p></Link>
<Link to='/support-and-help'><p id='supportAndHelp' className='menu-item' onClick={this.toggleNavbar}>Support & Help</p></Link>
<Link to='/'><p id='contact' className='menu-item' onClick={this.toggleNavbar}>Contact</p></Link>
</Menu>
29 src/components/PointsAvailable/index.js
View file
@@ -0,0 +1,29 @@
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
Badge,
Container,
Row,
Col
} from 'reactstrap'

import './pointsAvailable.css'

class PointsAvailable extends Component {
render () {
return (
<Container>
<Row className='pointsHeader'>
<Col className='pointsHeaderText'>
<div className='pointsHeaderTextDiv'>Points available</div>
</Col>
<Col>
<Badge className='pointsPill' pill>{this.props.pointsTotal}</Badge>
</Col>
</Row>
</Container>
)
}
}

export default connect(state => state)(PointsAvailable)
34 src/components/PointsAvailable/pointsAvailable.css
View file
@@ -0,0 +1,34 @@
.pointsHeader {
margin-top: 10px;
background-color: #fd7171;
height: 53px;
border-radius: 6px;
text-align: left;
}

.pointsHeaderText {
font-size: 18px;
font-weight: 500;
line-height: 1.06;
color: #ffffff;
}

.pointsHeaderTextDiv {
position: relative;
top: 50%;
transform: translateY(-50%);
}

.pointsPill {
background-color: #ffffff;
color: #fd7171;
float: right;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.9px;
border-radius: 1rem;
/* Vertically centre pill */
position: relative;
top: 50%;
transform: translateY(-50%);
}
29 src/components/RewardCards/Reward.js
View file
@@ -7,7 +7,6 @@ import {
CardSubtitle,
CardText,
Button,
Badge,
Container,
Row,
Col
@@ -18,6 +17,7 @@ import './reward.css'
import data from './data'
import NavBar from '../NavBar'
import Footer from '../Footer'
import PointsAvailable from '../PointsAvailable'
import angle from '../../img/angle/angle-left.svg'

class Reward extends Component {
@@ -45,7 +45,7 @@ class Reward extends Component {
disabled
className='rewardClaimButton'
>
Claim for {points} points
Claim for {points} points
</Button>
)
: (
@@ -62,27 +62,18 @@ class Reward extends Component {
return (
<div>
<NavBar />
<Link to={`/rewards`}>
<Row className='backHeader'>
<Col xs='2' className='backHeaderCol'>
<img className='angleLeft' src={angle} alt='Angle link' />
</Col>
<Col xs='10' className='backHeaderCol'>
Back to Shop
</Col>
</Row>
</Link>
<Container>
<Container>
<Row className='pointsHeader'>
<Col className='pointsHeaderText'>
Points available
<Link to={`/rewards`}>
<Row className='backHeader'>
<Col xs='2' className='backHeaderCol'>
<img className='angleLeft' src={angle} alt='Angle link' />
</Col>
<Col>
<Badge className='pointsPill' pill>{this.props.pointsTotal}</Badge>
<Col xs='10' className='backHeaderCol'>
Back to Shop
</Col>
</Row>
</Container>
</Link>
<PointsAvailable />
<CardBody className='rewardCard'>
<Row>
<Col xs='3' className='rewardUnclaimedLogo'>
10 src/components/RewardCards/RewardPreview.js
View file
@@ -15,15 +15,17 @@ import './rewardPreview.css'

class RewardPreview extends Component {
render () {
// Nasty way to directly link to 'claimed' voucher for the My Rewards tab
const linkSuffix = this.props.isClaimed ? '/00001' : ''
const { id, title, disclaimer, points, icon } = this.props.reward
const cardStyle = this.props.pointsTotal >= points ? 'rewardCard' : 'unavailableRewardCard'
const availableReward = this.props.pointsTotal > points
const isAvailable = this.props.isAvailable
const cardStyle = isAvailable ? 'rewardCard' : 'unavailableRewardCard'

return (
availableReward
isAvailable
? (
<div>
<Link to={`/rewards/${id}`}>
<Link to={`/rewards/${id}${linkSuffix}`}>
<CardBody className={cardStyle}>
<Row>
<Col xs='3' className='rewardLogo'>
19 src/components/RewardCards/Rewards.js
View file
@@ -3,11 +3,10 @@ import { connect } from 'react-redux'
import {
Input,
Row,
Col,
Badge,
Container
Col
} from 'reactstrap'
import RewardPreview from './RewardPreview'
import PointsAvailable from '../PointsAvailable'

import rewards from './data.js'
import vodafoneLogo from '../../img/grayscale/vodafone/bitmap@3x.png'
@@ -57,16 +56,7 @@ class Rewards extends Component {

return (
<div>
<Container>
<Row className='pointsHeader'>
<Col className='pointsHeaderText'>
Points available
</Col>
<Col>
<Badge className='pointsPill' pill>{this.props.pointsTotal}</Badge>
</Col>
</Row>
</Container>
<PointsAvailable />
<Input className='searchInput'
onChange={this.handleChange}
type='text' name='searchString'
@@ -100,8 +90,9 @@ class Rewards extends Component {
Showing {rewardsToDisplay.length} of {rewards.length} rewards
</div>
{rewardsToDisplay.map((reward, key) => {
const isAvailable = this.props.pointsTotal >= reward.points
return (
<RewardPreview reward={reward} key={key} />
<RewardPreview reward={reward} isAvailable={isAvailable} key={key} />
)
})}
<Row>
1 src/components/RewardCards/reward.css
View file
@@ -41,6 +41,7 @@
text-align: center;
color: #ef005c;
border: solid 1px #ef005c;
margin-top: 2vh;
}

.angleLeft {
30 src/components/RewardCards/rewards.css
View file
@@ -15,36 +15,6 @@
color: #999999;
}

.pointsHeader {
margin-top: 10px;
background-color: #fd7171;
height: 53px;
border-radius: 6px;
text-align: left;
}

.pointsHeaderText {
margin-top: 1.6vh;
font-size: 18px;
font-weight: 500;
line-height: 1.06;
color: #ffffff;
}

.pointsPill {
background-color: #ffffff;
color: #fd7171;
float: right;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.9px;
border-radius: 1rem;
/* Vertically centre pill */
position: relative;
top: 50%;
transform: translateY(-50%);
}

.rewardCount {
margin-top: 3vh;
text-align: left;
22 src/components/RewardClaimed/index.css
View file
@@ -0,0 +1,22 @@
.reward-scan-code {
text-align: center;
}

.reward-cancel-btn {
color: #ef005c;
border: solid 1px #ef005c;
}

.reward-action-btn {
border: solid 1px #fd7171;
background-color: #fd7171;
}

.reward-claim-desc-text {
margin-top: 1vh;
margin-bottom: 1.5vh;
}

.reward-cancel-btn-div {
margin-top: 1vh;
}
97 src/components/RewardClaimed/index.js
View file
@@ -1,38 +1,101 @@
import React from 'react'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Breadcrumb, BreadcrumbItem, Button } from 'reactstrap'
import {
Button,
Row,
Col,
Container,
CardSubtitle,
CardTitle,
CardText,
CardImg,
CardBody
} from 'reactstrap'
import { Link } from 'react-router-dom'

import rewards from '../RewardCards/data'
import NavBar from '../NavBar'
import RewardPreview from '../RewardCards/RewardPreview'
import rewardImg from '../../img/rewardImgPlaceholder.png'
import PointsAvailable from '../PointsAvailable'
import Footer from '../Footer'
import couponImg from '../../img/couponImgPlaceholder.png'
import angle from '../../img/angle/angle-left.svg'
import './index.css'

class RewardClaimed extends Component {
handleCancel (id, points) {
this.props.dispatch({type: 'CANCEL_REWARD',
payload: {
id: Number(id),
serial: '00001',
// serial to be set to unique once data structure added
points: points
}})
}

class RewardClaimed extends React.Component {
render () {
const brace = '<'
const url = this.props.match.url
const identifiers = url.split('/rewards/')[1].split('/')
const id = Number(identifiers[0])
const reward = rewards.find(reward => {
return reward.id === id
})
const { icon, points, title, disclaimer, brand } = reward

return (
<div>
<NavBar />
<Breadcrumb>
<BreadcrumbItem>
<Link to={'/rewards'}>{brace} Back to Rewards</Link>
</BreadcrumbItem>
</Breadcrumb>
<RewardPreview rewardImg={rewardImg} reward={reward} key={id} />
<img className='coupon-img' src={couponImg} alt='' /><br />
<Button className='reward-claimed-button' color='primary'>Print</Button><br />
<Button className='reward-claimed-button' color='primary'>Email</Button><br />
<Button className='reward-claimed-button' color='secondary'>Cancel and Remove</Button><br />
<Button className='terms-link' color='link'>Terms &amp; Conditions</Button>
<Container>
<Link to={`/rewards`}>
<Row className='backHeader'>
<Col xs='2' className='backHeaderCol'>
<img className='angleLeft' src={angle} alt='Angle link' />
</Col>
<Col xs='10' className='backHeaderCol'>
Back to My Rewards
</Col>
</Row>
</Link>
<PointsAvailable />
<CardBody className='rewardCard'>
<Row>
<Col xs='3' className='rewardUnclaimedLogo'>
<CardImg className='rewardLogoImg' alt='logo' src={icon} />
<p>{points}pts</p>
</Col>
<Col xs='9'>
<CardTitle className='rewardTitle'>{title}</CardTitle>
<CardSubtitle className='rewardSubtitle'>{disclaimer}</CardSubtitle>
</Col>
</Row>
<Row>
<Col className='rewardUnclaimedDesc'>
<CardText className='reward-claim-desc-text'>
Just show this barcode on your phone to the retail staff at your nearest {brand} to claim.
</CardText>
<div className='reward-scan-code'>
<img className='coupon-img' src={couponImg} alt='' />
</div>
<Button block className='reward-action-btn' color='primary'>Print</Button>
<Button block className='reward-action-btn' color='primary'>Email</Button>
<div className='reward-cancel-btn-div'>
<Link to={`/rewards`}>
<Button
block
outline
onClick={() => this.handleCancel(id, points)}
className='reward-cancel-btn'
color='secondary'
>
Cancel and Remove
</Button>
</Link>
</div>
</Col>
</Row>
</CardBody>
<Link to={`/terms`} className='link'>Terms & conditions</Link>
</Container>
<Footer />
</div>
)
}
2 src/components/Rewards/EarnMorePoints.js
View file
@@ -14,7 +14,7 @@ class EarnMorePoints extends Component {
function renderSubheader (subheader) {
return (
<NavItem key={subheader.name}>
<NavLink key={subheader.name} href={subheader.url} className={subheader.name}>{subheader.descText}</NavLink>
<NavLink key={subheader.name} href={subheader.url} className='EMP-list-item'>{subheader.descText}</NavLink>
</NavItem>
)
}
10 src/components/Rewards/HowToGetRewards.js
View file
@@ -11,11 +11,11 @@ class HowToGetRewards extends Component {
<Container>
<h3 className='htgr-title'>How do I get rewards?</h3>
<div className='htgr-list'>
<NavLink className='htgr-midwife' href=''>Never gonna give you up</NavLink>
<NavLink className='htgr-doctor' href=''>Never gonna let you down</NavLink>
<NavLink className='htgr-scans' href=''>Never gonna turn around</NavLink>
<NavLink className='htgr-wellchild' href=''>And hurt you</NavLink>
<NavLink className='htgr-challenges' href=''>Unlock Challenges in app</NavLink>
<NavLink className='htgr-item' href=''>Midwife visits</NavLink>
<NavLink className='htgr-item' href=''>Doctor check ups</NavLink>
<NavLink className='htgr-item' href=''>Scans</NavLink>
<NavLink className='htgr-item' href=''>Visits with Well Child provider</NavLink>
<NavLink className='htgr-item' href=''>Unlock Challenges in app</NavLink>
</div>
</Container>
)
2 src/components/Rewards/earnMorePoints.css
View file
@@ -13,7 +13,7 @@
display: block;
}

.nav-link{
.EMP-list-item{
font-size: 16px;
text-align: left;
color: #fd7171;
10 src/components/Rewards/howToGetRewards.css
View file
@@ -11,3 +11,13 @@
text-align: left;
display: block;
}

.htgr-item{
font-size: 16px;
text-align: left;
color: #fd7171;
text-decoration: underline;
line-height: 1.19;
margin-top: -5px;
margin-bottom: -5px;
}
4 src/components/Rewards/index.js
View file
@@ -14,8 +14,8 @@ class Rewards extends Component {
<div>
<NavBar />
<PointsOverview />
<LinkBlockButton linkContent={{title: 'My Rewards', descText: 'View claimed rewards', link: ''}} />
<LinkBlockButton linkContent={{title: 'Rewards Shop', descText: 'View all your points deals', link: ''}} />
<LinkBlockButton linkContent={{title: 'My Rewards', descText: 'View claimed rewards', link: '../../rewards'}} />
<LinkBlockButton linkContent={{title: 'Rewards Shop', descText: 'View all your points deals', link: '../../rewards'}} />
<LinkBlockButton linkContent={{title: 'How Do Rewards Work?', descText: 'A quick guide to rewards', link: ''}} /><hr className='lines' />
<HowToGetRewards /><hr className='lines' />
<EarnMorePoints section={data.earnPointsLinks.pregnancy} />
2 src/components/Rewards/rewardsData.js
View file
@@ -3,7 +3,7 @@ const data = {
earnPointsLinks: {
pregnancy: {
challenges: [
{name: 'Food', descText: 'Nutrition and Pregnancy', url: 'http://google.com', isCompleted: false},
{name: 'Food', descText: 'Nutrition and Pregnancy', url: '', isCompleted: false},
{name: 'Exercise', descText: 'Exercising while Pregnant', url: '', isCompleted: false},
{name: 'Symptoms', descText: 'Common symptoms of Pregnancy', url: '', isCompleted: false},
{name: 'SmokingAlc', descText: 'Smoking, drugs, alcohol and Pregnancy', url: '', isCompleted: false},
60 src/components/RewardsView/MyRewards.js
View file
@@ -1,28 +1,72 @@
import React, {Component} from 'react'
import { connect } from 'react-redux'
import {
Container,
Button
} from 'reactstrap'

import RewardPreview from '../RewardCards/RewardPreview'
import rewards from '../RewardCards/data'
import './myRewards.css'

class MyRewards extends Component {
render () {
const { userRewardIds } = this.props

function getRewardById (id) {
return rewards.find(reward => {
return reward.id === id
})
}

const userRewards = userRewardIds.map(getRewardById)
const userRewards = userRewardIds.length === 0
? null
: userRewardIds.map(getRewardById)

const myRewardsDisplay = userRewardIds.length === 0
? (
<div>
<Container className='my-rewards-empty'>
You don’t currently have any rewards, check out your shop to see what’s available.
</Container>
<Button block outline className='my-shop-btn' onClick={() => { this.toggle('shop') }}>
View my shop
</Button>
</div>
)
: (
<div className='my-rewards-div'>
<div className='my-rewards-static-heading'>
Ready to use&nbsp;
</div>
<div className='my-rewards-dynamic-heading'>
- Showing {userRewards.length} of {userRewards.length} rewards
</div>
<div>
{userRewards.map((reward, key) => {
// Reward is always available as the user has already spent points on it
return (
<RewardPreview reward={reward} isAvailable isClaimed key={key} />
)
})}
</div>
</div>
)

return (
<div className='container'>
<p>Showing {userRewards.length} of {userRewards.length} rewards</p>
{userRewards.map((reward, key) => {
return (
<RewardPreview reward={reward} key={key} />
)
})}
<div>
{myRewardsDisplay}
{/* The following reward is a placeholder as there's no logic for used rewards */}
<div className='my-used-rewards-div'>
<div className='my-rewards-static-heading'>
Used&nbsp;
</div>
<div className='my-rewards-dynamic-heading'>
- Showing 1 of 1 rewards
</div>
{/* Reward is unavailable as it has already been used */}
<RewardPreview reward={rewards[0]} isAvailable={false} key={0} />
</div>
</div>
)
}
19 src/components/RewardsView/index.css
View file
@@ -1,25 +1,30 @@
.nav-tabs {
border-bottom: 0;
color: #9b9b9b;
margin-top: 1vh;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #35a5b5 !important;
background-color: #fff;
border-color: #fff;
background-color: transparent;
border-color: transparent;
border-bottom: 0;
}

/* To make them shorter:
Reduce height and increase the top & bottom margin from 0 so that
height + top margin + bottom margin == 50px */
.verticalDivider {
.nav-link {
text-align: center;
font-size: 18px;
margin-top: 0.1vh;
margin-bottom: 0.5vh;
}

.vertical-divider {
height: 2.2rem;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #979797;
}

.tabHR {
.tab-hr {
border-top: solid 1px #cccccc;
}
36 src/components/RewardsView/index.js
View file
@@ -6,14 +6,14 @@ import {
Nav,
NavItem,
NavLink,
Button,
Container
} from 'reactstrap'
import classnames from 'classnames'

import NavBar from '../NavBar'
import MyRewards from './MyRewards'
import Rewards from '../RewardCards'
import PointsAvailable from '../PointsAvailable'
import Footer from '../Footer'

import './index.css'
@@ -24,7 +24,7 @@ class RewardsView extends React.Component {

this.toggle = this.toggle.bind(this)
this.state = {
activeTab: 'catalogue'
activeTab: 'shop'
}
}

@@ -37,37 +37,20 @@ class RewardsView extends React.Component {
}

render () {
const { userRewardIds } = this.props

const myRewardsDisplay = userRewardIds.length === 0
? (
<div>
<p>
You don't currently have any rewards, check out <u>your catalogue</u> to see what's available.
</p>
<Button onClick={() => { this.toggle('catalogue') }}>
View My Catalogue
</Button>
</div>
)
: (
<MyRewards />
)

return (
<div>
<NavBar />
<Container>
<NavBar />
<Nav tabs justified>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === 'catalogue' })}
onClick={() => { this.toggle('catalogue') }}
className={classnames({ active: this.state.activeTab === 'shop' })}
onClick={() => { this.toggle('shop') }}
>
Shop
</NavLink>
</NavItem>
<div className='verticalDivider' />
<div className='vertical-divider' />
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === 'myRewards' })}
@@ -77,13 +60,14 @@ class RewardsView extends React.Component {
</NavLink>
</NavItem>
</Nav>
<div className='tabHR' />
<div className='tab-hr' />
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId='catalogue'>
<TabPane tabId='shop'>
<Rewards />
</TabPane>
<TabPane tabId='myRewards'>
{myRewardsDisplay}
<PointsAvailable />
<MyRewards />
</TabPane>
</TabContent>
</Container>
39 src/components/RewardsView/myRewards.css
View file
@@ -0,0 +1,39 @@
.my-rewards-static-heading {
display: inline-block;
color: #35a5b5;
font-size: 14px;
padding-left: 2vw;
}

.my-rewards-dynamic-heading {
display: inline-block;
font-size: 14px;
}

.my-rewards-div {
text-align: left;
margin-top: 2vh;
}

.my-used-rewards-div {
text-align: left;
margin-top: 2vh;
margin-bottom: 4vh;
}

.my-shop-btn {
border: solid 1px #ef005c;
font-size: 16px;
line-height: 1.31;
color: #ef005c;
margin-bottom: 3vh;
}

.my-rewards-empty {
margin-top: 2vh;
margin-bottom: 3vh;
font-size: 16px;
line-height: 1.5;
text-align: center;
color: #373a3c;
}
124 src/components/SectionPage/ArticlePage.js
View file
@@ -0,0 +1,124 @@
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {
Container,
Row,
Col,
Card,
CardText
} from 'reactstrap'
import { Link } from 'react-router-dom'

import './articlePage.css'
import NavBar from '../NavBar'
import Footer from '../Footer'
import Embedly from '../Embedly'
import yourPregnancyArticles from './yourPregnancyArticles'
import supportAndHelpArticles from './supportAndHelpArticles'
import babyAndToddlerArticles from './babyAndToddlerArticles'
import backImg from '../../img/angle/angle-left.svg'
import redAngleLeft from '../../img/angle/red-angle-left.png'
import redAngleRight from '../../img/angle/red-angle-right.png'

class ArticlePage extends Component {
componentDidUpdate () {
ReactDOM.findDOMNode(this.refs.topOfPage).scrollIntoView()
}
render () {
const section = window.location.pathname
const splitUrl = section.split('/')
const link = splitUrl[1]
const id = splitUrl[2]
const idPlusOne = Number(id) + 1
const idMinusOne = Number(id) - 1
let data = []
if (link === 'your-pregnancy') {
data = yourPregnancyArticles
} else if (link === 'baby-and-toddler') {
data = babyAndToddlerArticles
} else if (link === 'support-and-help') {
data = supportAndHelpArticles
}
const relevantData = data[id]
const { title, content, youtubeUrl, largeTitle, img, relatedSection, readMore } = relevantData
return (
<div>
<div ref='topOfPage' />
<NavBar />
<Link to={`/${link}`}>
<Row>
<Col xs='2'>
{
youtubeUrl
? <div className='youtubeEmbed'><Embedly href={youtubeUrl} /></div>
: <img className='backImg' src={backImg} alt='' />
}
</Col>
<Col className='back' xs='10'>
Back to {relatedSection}
</Col>
</Row>
</Link>
<img className='mainImg' src={img} alt='' />
<Container>
{
largeTitle
? <div>
<Row className='scrollAge'>
<Col xs='2'>
{
Number(id) === 0
? null
: <Link to={`/${link}/${idMinusOne}`}><img className='redAngle' src={redAngleLeft} alt='' /></Link>
}
</Col>
<Col xs='8'>
<h4 className='ageScroll'>{largeTitle}</h4>
</Col>
<Col xs='2'>
{
id < (data.length - 1)
? <Link to={`/${link}/${idPlusOne}`}><img className='redAngle' src={redAngleRight} alt='' /></Link>
: null
}
</Col>
</Row>
</div>
: null
}
<h4 className='articleTitle'>{title}</h4>
{content}
{
id < (data.length - 1)
? <Link to={`/${link}/${idPlusOne}`}><Card className='nextButton'><CardText className='nextText'>Next article > </CardText></Card></Link>
: null
}
<hr className='hr' />
{
readMore
? <div>
<h4 className='readMore'>Read more</h4>
<ul className='addMargin'>
{
readMore.map((item, key) => {
return (
<Link to={item.link}>
<li className='li'>
{item.title}
</li>
</Link>
)
})
}
</ul>
</div>
: null
}
</Container>
<Footer />
</div>
)
}
}

export default ArticlePage
12 src/components/SectionPage/BabyAndToddler.js
View file
@@ -41,12 +41,16 @@ class YourPregnancy extends Component {
</Card></Link>
{
babyAndToddlerArticles.map((article, key) => {
const { title, description } = article
const { title, description, largeTitle } = article
return (
<Link key={key} to={`/your-pregnancy/${article.id}`}><Card key={key} className='linkCard'>
<Link key={key} to={`/baby-and-toddler/${article.id}`}><Card key={key} className='linkCard'>
<Row>
<Col xs='10'>
<CardTitle className='linkTitle'>{title}</CardTitle>
{
largeTitle
? <CardTitle className='linkTitle'>{largeTitle}</CardTitle>
: <CardTitle className='linkTitle'>{title}</CardTitle>
}
<CardText className='linkText'>{description}</CardText>
</Col>
<Col xs='2'>
@@ -59,7 +63,7 @@ class YourPregnancy extends Component {
}
<hr className='hr' />
<h4 className='readMore'>Read more</h4>
<ul>
<ul className='addMargin'>
<li className='li'>
Getting ready for baby
</li>
2 src/components/SectionPage/YourPregnancy.js
View file
@@ -59,7 +59,7 @@ class YourPregnancy extends Component {
}
<hr className='hr' />
<h4 className='readMore'>Read more</h4>
<ul>
<ul className='addMargin'>
<li className='li'>
Getting ready for baby
</li>
184 src/components/SectionPage/articlePage.css
View file
@@ -0,0 +1,184 @@
.back {
margin-left: auto;
margin-right: auto;
margin-top: 11px;
height: 16px;
font-family: HelveticaNeue;
font-size: 14px;
text-align: left;
color: #4a4a4a;
margin-bottom: 15px;
}

.backImg {
margin-left: 23px;
margin-top: 10px;
}

.mainImg {
width: 100%;
}

.articleTitle {
padding-top: 15px;
padding-left: 15px;
height: 23px;
font-family: HelveticaNeue;
font-size: 18px;
font-weight: 500;
line-height: 1.06;
text-align: left;
color: #35a5b5;
}

.nextButton {
height: 40px;
border-radius: 4px;
background-color: #ffffff;
border: solid 1px #ef005c;
margin-top: 50px;
margin-left: 15px;
margin-right: 15px;
}

.nextText {
font-family: HelveticaNeue;
font-size: 16px;
color: #ef005c;
padding-top: 5px;
}

.hr {
margin-top: 25px;
margin-bottom: 25px;
margin-left: 15px;
margin-right: 15px;
}

.readMore {
height: 23px;
font-family: HelveticaNeue;
font-size: 18px;
font-weight: 500;
line-height: 1.06;
text-align: left;
color: #35a5b5;
margin-left: 15px;
margin-right: 15px;
}

.li {
list-style: none;
font-family: HelveticaNeue;
font-size: 16px;
line-height: 2;
text-align: left;
color: #fd7171;
text-decoration: underline;
margin-left: -40px;
}

.contentStyle {
text-align: left;
font-family: HelveticaNeue;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #373a3c;
margin-top: 20px;
margin-left: 15px;
margin-right: 15px;
}

.highlightPink {
text-decoration: none;
color: #fd7171;
}

.contentStyle.last {
margin-bottom: 40px;
}

.boldGreyTitle {
font-family: HelveticaNeue;
font-size: 19px;
font-weight: 500;
line-height: 1.12;
text-align: left;
color: #4a4a4a;
font-weight: 500;
margin-left: 15px;
}

.midwifeLocations {
list-style: none;
font-family: HelveticaNeue;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #373a3c;
margin-left: -25px;
}

.midwifeContact {
list-style: none;
font-family: HelveticaNeue;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #373a3c;
margin-left: -25px;
}

.midwifeContactType {
color: #35a5b5;
}

.pinkUnderline {
color: #fd7171;
text-decoration: underline;
}

.youtubeEmbed {
width: 100%;
}

.dangerSignsList {
list-style-type: circle;
font-family: HelveticaNeue;
font-size: 16px;
line-height: 1.5;
text-align: left;
font-family: HelveticaNeue;
font-size: 16px;
color: #373a3c;
margin-top: 20px;
margin-left: -6px;
margin-right: 20px;
}

.addMargin {
margin-left: 15px;
margin-right: 15px;
}

.redAngle {
height: 60px;
}

.scrollAge {
margin-top: 20px;
margin-left: 2px;
margin-right: 2px;
}

.ageScroll {
height: 20px;
font-family: HelveticaNeue;
font-size: 30px;
font-weight: 100;
line-height: 0.45;
text-align: center;
color: #999999;
margin-top: 20px;
}
168 src/components/SectionPage/babyAndToddlerArticles.js
View file
@@ -1,49 +1,183 @@
import React from 'react'

import stageOneImg from '../../img/ArticlePages/0-3months.png'
import stageTwoImg from '../../img/ArticlePages/3-6months.png'
import stageThreeImg from '../../img/ArticlePages/6-12months.jpg'
import stageFourImg from '../../img/ArticlePages/1-3years.jpg'
import stageFiveImg from '../../img/ArticlePages/3-5years.jpg'

const babyAndToddlerArticles = [
{
id: 0,
relatedSection: 'baby & toddler',
title: '0 - 3 Months',
largeTitle: '0 - 3 Months',
title: 'Breast Feeding',
description: 'Help with your new baby',
content: '',
content: (
<div>
<div className='contentStyle'>
Exclusively breastfeeding for around the first 6 months of your baby’s
life and then continuing once your baby starts solids until 12 months
and beyond gives your baby the best start in life.
</div>
<div className='contentStyle'>
Breast milk is free, fresh and requires no preparation. It is easy for
your baby to digest, changes with your baby’s needs, and contains the
nutrients your baby needs for around the first 6 months of life.
</div>
<div className='contentStyle'>
<span className='highlightPink'>It is the greatest gift you can give your baby.</span>
</div>
<div className='contentStyle last'>
Find out about breastfeeding while you are still pregnant. Your
midwife or other maternity carer can help you make an informed choice.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: stageOneImg,
readMore: [
{
title: '1-3 Years',
link: '/baby-and-toddler/3'
},
{
title: '6 - 12 Months',
link: '/baby-and-toddler/2'
}
]
},
{
id: 1,
relatedSection: 'baby & toddler',
title: '3 - 6 Months',
largeTitle: '3 - 6 Months',
title: 'Food & Nutrition',
description: 'As they grow',
content: '',
content: (
<div>
<div className='contentStyle'>
Exclusively breastfeeding for around the first 6 months of your baby’s
life and then continuing once your baby starts solids until 12 months
and beyond gives your baby the best start in life.
</div>
<div className='contentStyle'>
Breast milk is free, fresh and requires no preparation. It is easy for
your baby to digest, changes with your baby’s needs, and contains the
nutrients your baby needs for around the first 6 months of life.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: stageTwoImg,
readMore: [
{
title: '1-3 Years',
link: '/baby-and-toddler/3'
},
{
title: '6 - 12 Months',
link: '/baby-and-toddler/2'
}
]
},
{
id: 2,
relatedSection: 'baby & toddler',
title: '6 - 12 Months',
largeTitle: '6 - 12 Months',
title: 'Learning to walk',
description: 'Coming up to 1 year',
content: '',
content: (
<div>
<div className='contentStyle'>
Exclusively breastfeeding for around the first 6 months of your baby’s
life and then continuing once your baby starts solids until 12 months
and beyond gives your baby the best start in life.
</div>
<div className='contentStyle'>
Breast milk is free, fresh and requires no preparation. It is easy for
your baby to digest, changes with your baby’s needs, and contains the
nutrients your baby needs for around the first 6 months of life.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: stageThreeImg,
readMore: [
{
title: '1-3 Years',
link: '/baby-and-toddler/3'
},
{
title: '0 - 3 Months',
link: '/baby-and-toddler/0'
}
]
},
{
id: 2,
id: 3,
relatedSection: 'baby & toddler',
title: '1 - 3 Years',
largeTitle: '1 - 3 Years',
title: 'Terrible twos',
description: 'What to look for',
content: '',
content: (
<div>
<div className='contentStyle'>
Exclusively breastfeeding for around the first 6 months of your baby’s
life and then continuing once your baby starts solids until 12 months
and beyond gives your baby the best start in life.
</div>
<div className='contentStyle'>
Breast milk is free, fresh and requires no preparation. It is easy for
your baby to digest, changes with your baby’s needs, and contains the
nutrients your baby needs for around the first 6 months of life.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: stageFourImg,
readMore: [
{
title: '3 - 5 Months',
link: '/baby-and-toddler/4'
},
{
title: '6 - 12 Months',
link: '/baby-and-toddler/2'
}
]
},
{
id: 2,
id: 4,
relatedSection: 'baby & toddler',
title: '3 - 5 Years',
largeTitle: '3 - 5 Years',
title: 'Supporting development',
description: 'Advise on what you can do',
content: '',
content: (
<div>
<div className='contentStyle'>
Exclusively breastfeeding for around the first 6 months of your baby’s
life and then continuing once your baby starts solids until 12 months
and beyond gives your baby the best start in life.
</div>
<div className='contentStyle'>
Breast milk is free, fresh and requires no preparation. It is easy for
your baby to digest, changes with your baby’s needs, and contains the
nutrients your baby needs for around the first 6 months of life.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: stageFiveImg,
readMore: [
{
title: '1-3 Years',
link: '/baby-and-toddler/3'
},
{
title: '6 - 12 Months',
link: '/baby-and-toddler/2'
}
]
}
]

306 src/components/SectionPage/supportAndHelpArticles.js
View file
@@ -1,58 +1,336 @@
import React from 'react'

import feelingSadImg from '../../img/ArticlePages/feelingSad.png'
import feelingAloneImg from '../../img/ArticlePages/feelingAlone.jpg'
import feelingUnwellImg from '../../img/ArticlePages/feelingUnwell.jpg'
import feelingUnsafeImg from '../../img/ArticlePages/feelingUnsafe.jpg'
import feelingStressedImg from '../../img/ArticlePages/feelingStressed.jpg'
import notSleepingImg from '../../img/ArticlePages/notSleeping.jpg'

const supportAndHelpArticles = [
{
id: 0,
relatedSection: 'support & help',
title: 'Feeling Stressed?',
description: 'We can help you',
content: '',
content: (
<div>
<div className='contentStyle'>
Sometimes after a mama has had a pepi, she can feel down and out. It
may feel like her world has fallen apart and that she is in a big
black hole.
</div>
<div className='contentStyle'>
Post natal blues is very common. A new mama can feel down and tearful,
crying for no apparent reason. This sometimes happens in the first
week after the pepi is born. She can feel worried as there are a lot
of changes occurring at this time. This feeling passes after a few
days. However a mama can become more seriously depressed in the first
months after a pepi is born. This can occur any time within the first
year after a pepi is born. It maybe difficult for the mama to sleep,
relax, or make decisions. She may notice changes in her appetite.
She may also have thoughts of hurting her baby or that life is not
worth living. These symptoms are able to be treated. It is really
important to talk to your nurse or doctor and seek help early.
</div>
<div className='contentStyle'>
In some rare cases, a mama may experience extreme changes in mood and
thoughts. She may become very out of touch with reality, this is known
as postnatal psychosis. She may also experience intrusive thoughts, be
frightened, hear or see things that other people cant. This usually
begins in the first two weeks after a child is born. As this can
affect the way she feels about and care for herself and her pepi, it
is important not to ignore the signs and talk to your midwife, nurse
or doctor immediately.
</div>
<div className='contentStyle last'>
They will be able to support you with the right help. It is also
important to accept offers of support from your whanau.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: feelingStressedImg,
readMore: [
{
title: 'Not Sleeping?',
link: '/support-and-help/2'
},
{
title: 'Feeling Alone?',
link: '/support-and-help/2'
}
]
},
{
id: 1,
relatedSection: 'support & help',
title: 'Not sleeping well?',
description: 'Get a good nights sleep',
content: '',
content: (
<div>
<div className='contentStyle'>
Sometimes after a mama has had a pepi, she can feel down and out. It
may feel like her world has fallen apart and that she is in a big
black hole.
</div>
<div className='contentStyle'>
Post natal blues is very common. A new mama can feel down and tearful,
crying for no apparent reason. This sometimes happens in the first
week after the pepi is born. She can feel worried as there are a lot
of changes occurring at this time. This feeling passes after a few
days. However a mama can become more seriously depressed in the first
months after a pepi is born. This can occur any time within the first
year after a pepi is born. It maybe difficult for the mama to sleep,
relax, or make decisions. She may notice changes in her appetite.
She may also have thoughts of hurting her baby or that life is not
worth living. These symptoms are able to be treated. It is really
important to talk to your nurse or doctor and seek help early.
</div>
<div className='contentStyle'>
In some rare cases, a mama may experience extreme changes in mood and
thoughts. She may become very out of touch with reality, this is known
as postnatal psychosis. She may also experience intrusive thoughts, be
frightened, hear or see things that other people cant. This usually
begins in the first two weeks after a child is born. As this can
affect the way she feels about and care for herself and her pepi, it
is important not to ignore the signs and talk to your midwife, nurse
or doctor immediately.
</div>
<div className='contentStyle last'>
They will be able to support you with the right help. It is also
important to accept offers of support from your whanau.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: notSleepingImg,
readMore: [
{
title: 'Not Sleeping?',
link: '/support-and-help/2'
},
{
title: 'Feeling Alone?',
link: '/support-and-help/2'
}
]
},
{
id: 2,
relatedSection: 'support & help',
title: 'Feeling Unhappy?',
relatedSection: 'Your Pregnancy',
title: 'Feeling Sad?',
description: 'See what you can do',
content: '',
content: (
<div>
<div className='contentStyle'>
Sometimes after a mama has had a pepi, she can feel down and out. It
may feel like her world has fallen apart and that she is in a big
black hole.
</div>
<div className='contentStyle'>
Post natal blues is very common. A new mama can feel down and tearful,
crying for no apparent reason. This sometimes happens in the first
week after the pepi is born. She can feel worried as there are a lot
of changes occurring at this time. This feeling passes after a few
days. However a mama can become more seriously depressed in the first
months after a pepi is born. This can occur any time within the first
year after a pepi is born. It maybe difficult for the mama to sleep,
relax, or make decisions. She may notice changes in her appetite.
She may also have thoughts of hurting her baby or that life is not
worth living. These symptoms are able to be treated. It is really
important to talk to your nurse or doctor and seek help early.
</div>
<div className='contentStyle'>
In some rare cases, a mama may experience extreme changes in mood and
thoughts. She may become very out of touch with reality, this is known
as postnatal psychosis. She may also experience intrusive thoughts, be
frightened, hear or see things that other people cant. This usually
begins in the first two weeks after a child is born. As this can
affect the way she feels about and care for herself and her pepi, it
is important not to ignore the signs and talk to your midwife, nurse
or doctor immediately.
</div>
<div className='contentStyle last'>
They will be able to support you with the right help. It is also
important to accept offers of support from your whanau.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: feelingSadImg,
readMore: [
{
title: 'Not Sleeping?',
link: '/support-and-help/2'
},
{
title: 'Feeling Alone?',
link: '/support-and-help/2'
}
]
},
{
id: 2,
relatedSection: 'support & help',
title: 'Feeling Unsafe?',
description: 'Are you in danger',
content: '',
content: (
<div>
<div className='contentStyle'>
Sometimes after a mama has had a pepi, she can feel down and out. It
may feel like her world has fallen apart and that she is in a big
black hole.
</div>
<div className='contentStyle'>
Post natal blues is very common. A new mama can feel down and tearful,
crying for no apparent reason. This sometimes happens in the first
week after the pepi is born. She can feel worried as there are a lot
of changes occurring at this time. This feeling passes after a few
days. However a mama can become more seriously depressed in the first
months after a pepi is born. This can occur any time within the first
year after a pepi is born. It maybe difficult for the mama to sleep,
relax, or make decisions. She may notice changes in her appetite.
She may also have thoughts of hurting her baby or that life is not
worth living. These symptoms are able to be treated. It is really
important to talk to your nurse or doctor and seek help early.
</div>
<div className='contentStyle'>
In some rare cases, a mama may experience extreme changes in mood and
thoughts. She may become very out of touch with reality, this is known
as postnatal psychosis. She may also experience intrusive thoughts, be
frightened, hear or see things that other people cant. This usually
begins in the first two weeks after a child is born. As this can
affect the way she feels about and care for herself and her pepi, it
is important not to ignore the signs and talk to your midwife, nurse
or doctor immediately.
</div>
<div className='contentStyle last'>
They will be able to support you with the right help. It is also
important to accept offers of support from your whanau.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: feelingUnsafeImg,
readMore: [
{
title: 'Not Sleeping?',
link: '/support-and-help/2'
},
{
title: 'Feeling Alone?',
link: '/support-and-help/2'
}
]
},
{
id: 2,
relatedSection: 'support & help',
title: 'Feeling Unwell?',
description: 'Advise on what you can do',
content: '',
content: (
<div>
<div className='contentStyle'>
Sometimes after a mama has had a pepi, she can feel down and out. It
may feel like her world has fallen apart and that she is in a big
black hole.
</div>
<div className='contentStyle'>
Post natal blues is very common. A new mama can feel down and tearful,
crying for no apparent reason. This sometimes happens in the first
week after the pepi is born. She can feel worried as there are a lot
of changes occurring at this time. This feeling passes after a few
days. However a mama can become more seriously depressed in the first
months after a pepi is born. This can occur any time within the first
year after a pepi is born. It maybe difficult for the mama to sleep,
relax, or make decisions. She may notice changes in her appetite.
She may also have thoughts of hurting her baby or that life is not
worth living. These symptoms are able to be treated. It is really
important to talk to your nurse or doctor and seek help early.
</div>
<div className='contentStyle'>
In some rare cases, a mama may experience extreme changes in mood and
thoughts. She may become very out of touch with reality, this is known
as postnatal psychosis. She may also experience intrusive thoughts, be
frightened, hear or see things that other people cant. This usually
begins in the first two weeks after a child is born. As this can
affect the way she feels about and care for herself and her pepi, it
is important not to ignore the signs and talk to your midwife, nurse
or doctor immediately.
</div>
<div className='contentStyle last'>
They will be able to support you with the right help. It is also
important to accept offers of support from your whanau.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: feelingUnwellImg,
readMore: [
{
title: 'Not Sleeping?',
link: '/support-and-help/2'
},
{
title: 'Feeling Alone?',
link: '/support-and-help/2'
}
]
},
{
id: 2,
relatedSection: 'support & help',
title: 'Feeling Alone?',
description: 'Advise on what you can do',
content: '',
content: (
<div>
<div className='contentStyle'>
Sometimes after a mama has had a pepi, she can feel down and out. It
may feel like her world has fallen apart and that she is in a big
black hole.
</div>
<div className='contentStyle'>
Post natal blues is very common. A new mama can feel down and tearful,
crying for no apparent reason. This sometimes happens in the first
week after the pepi is born. She can feel worried as there are a lot
of changes occurring at this time. This feeling passes after a few
days. However a mama can become more seriously depressed in the first
months after a pepi is born. This can occur any time within the first
year after a pepi is born. It maybe difficult for the mama to sleep,
relax, or make decisions. She may notice changes in her appetite.
She may also have thoughts of hurting her baby or that life is not
worth living. These symptoms are able to be treated. It is really
important to talk to your nurse or doctor and seek help early.
</div>
<div className='contentStyle'>
In some rare cases, a mama may experience extreme changes in mood and
thoughts. She may become very out of touch with reality, this is known
as postnatal psychosis. She may also experience intrusive thoughts, be
frightened, hear or see things that other people cant. This usually
begins in the first two weeks after a child is born. As this can
affect the way she feels about and care for herself and her pepi, it
is important not to ignore the signs and talk to your midwife, nurse
or doctor immediately.
</div>
<div className='contentStyle last'>
They will be able to support you with the right help. It is also
important to accept offers of support from your whanau.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: feelingAloneImg,
readMore: [
{
title: 'Not Sleeping?',
link: '/support-and-help/2'
},
{
title: 'Feeling Alone?',
link: '/support-and-help/2'
}
]
}
]

262 src/components/SectionPage/yourPregnancyArticles.js
View file
@@ -1,49 +1,263 @@
import React from 'react'
import { Link } from 'react-router-dom'

import gettingAMidwifeImg from '../../img/ArticlePages/gettingAMidwife.png'
import foodAndNutritionImg from '../../img/ArticlePages/foodAndNutrition.png'
import whatNotToEatImg from '../../img/ArticlePages/whatNotToEat.png'
import dangerSignsImg from '../../img/ArticlePages/dangerSigns.png'

const yourPregnancyArticles = [
{
id: 0,
relatedSection: 'your pregnancy',
title: 'Finding a Midwife',
relatedSection: 'Your Pregnancy',
title: 'Getting a Midwife',
description: 'Get help sorting out a midwife',
content: '',
content: (
<div>
<div className='contentStyle'>
As soon as you know you are pregnant, you need to contact a
midwife and sent up an appointment.
</div>
<div className='contentStyle last'>
There are two midwives available on the east coast. You can contact
either <span className='highlightPink'>Corrina Parata</span> at Ngati Porou Hauora or <span className='highlightPink'>Liz Tamepo</span> at Te
Korahi Whanautanga Midwifery Services.
</div>
<h4 className='boldGreyTitle'>Liz Tamepo</h4>
<ul className='midwifeLocations'>
<li>Tuesday: Te Araroa</li>
<li>Wednesday: Ruatoria</li>
<li>Thursday: Puhi Kaiti</li>
</ul>
<ul className='midwifeContact'>
<li><span className='midwifeContactType'>Phone: </span>06 864 7788</li>
<li><span className='midwifeContactType'>Mobile: </span><span>027 237 8467</span></li>
<li><span className='midwifeContactType'>Email: </span><span className='pinkUnderline'>lizzie.andre@xtra.co.nz</span></li>
</ul>
<h4 className='boldGreyTitle'>Corrina Parata</h4>
<ul className='midwifeLocations'>
<li>Ngati Porou Hauora</li>
</ul>
<ul className='midwifeContact'>
<li><span className='midwifeContactType'>Phone: </span>06 864 7788</li>
<li><span className='midwifeContactType'>Mobile: </span><span>027 237 8467</span></li>
<li><span className='midwifeContactType'>Email: </span><span className='pinkUnderline'>lizzie.andre@xtra.co.nz</span></li>
</ul>
</div>
),
youtubeUrl: '',
img: ''
img: gettingAMidwifeImg,
readMore: [
{
title: 'Food & Nutrition',
link: '/your-pregnancy'
},
{
title: 'Smoking, Drugs & Alcohol',
link: '/your-pregnancy/3'
}
]
},
{
id: 1,
relatedSection: 'your pregnancy',
relatedSection: 'Your Pregnancy',
title: 'Food & Nutrition',
description: 'Help with your diet',
content: '',
content: (
<div>
<div className='contentStyle'>
Maintaining a healthy diet is important when you are pregnant as it
will help your baby to grow and develop. It is important to eat a wide
selection of kai to get the right balance of nutrients that both you
and your baby need.
</div>
<div className='contentStyle'>
Your appetite may change when you are hapu. You may feel hungrier than
usual or may feel like you don’t want to eat. If you are hungrier than
normal, eat healthy kai at breakfast, this can help you to avoid
grazing on kai that are high in fats and sugar as the day progresses.
</div>
<div className='contentStyle'>
Eating kai such as fruits and vegetables provides vitamins, minerals
and fibre can help with digestion and can prevent constipation.
Drinking 6-8 glasses of water each day will be helpful in preventing
constipation also. Ideally, eat five plus portions of fruit and
vegetables each day. Foods with carbohydrates, such as breads,
potatoes, cereals, rice, pasta and oats should make up a third of your
daily kai intake.
</div>
<div className='contentStyle'>
It is important to eat protein kai each day, these can be found in
foods such as beans, fish, eggs, meat, poultry and nuts. It is
important to make sure eggs, poultry, meats and pork are cooked well
through.
</div>
<div className='contentStyle last'>
Kai high in calcium are essential when you are hapu to help your baby
grow. These include kai like milk, cheese, and yoghurt. Reduced fat
and lower sugar options are good. For mama that prefer dairy
alternatives, there are soya options available.
</div>
<h4 className='boldGreyTitle'>What not to eat?</h4>
<div className='contentStyle'>
Some food should be avoided. Select the link to find out what not to eat.
</div>
<Link to='/your-pregnancy/2'><p className='contentStyle pinkUnderline'>What not to eat ></p></Link>
</div>
),
youtubeUrl: '',
img: ''
img: foodAndNutritionImg,
readMore: [
{
title: 'Getting a Midwife',
link: '/your-pregnancy/0'
},
{
title: 'Danger Signs',
link: '/your-pregnancy/4'
}
]
},
{
id: 2,
relatedSection: 'your pregnancy',
title: 'Exercise & Fitness',
description: 'View claimed rewards',
content: '',
relatedSection: 'Your Pregnancy',
title: 'What Not to Eat',
description: 'Help with your diet',
content: (
<div>
<div className='contentStyle'>
There are some kai that should be avoided during pregnancy, both mama
and pepi can be more susceptible to bacteria, viruses and parasites
that can cause illness and harm to pepi. Some of these foods include
cheeses made from unpastuerised milk such as brie, blue vein, and feta
which could contain E.coli and listeria.
</div>
<div className='contentStyle'>
There are certain fish, for example shark, swordfish, big eye tuna,
orange roughy, and marlin that all have higher levels of mercury, and
shellfish such as oysters and clams can contain vibrio bacteria. Raw
and undercooked fish should also be avoided as it may contain harmful
bacteria. Some salads made in store such as ham salad, chicken salad
and seafood salad may contain listeria and should not be eaten.
</div>
<div className='contentStyle'>
Kai that are higher in fat and sugar should be limited. Kai higher in
sugar and drinks (fizzy drinks, energy drinks and fruit juices) can
contribute to gaining weight and also lead to tooth decay. Fat is high
in calories and can make you put on additional weight. Some of these
foods include all spreadable fats (butter), oils, salad dressings,
cream, chocolate, potato chips, biscuits, cakes, puddings, savories,
and ice cream.
</div>
<div className='contentStyle last'>
Although you feel that you maybe eating for two, try to have these
less often and in small amounts. There are some healthy snacks that
may help curb the appetite. Foods such as small sandwiches or pitta
bread, salad vegetables, hummus, vege sticks and hummus, small bowl
unsweetened cereal, fresh fruit, or small baked potato.
</div>
</div>
),
youtubeUrl: '',
img: ''
img: whatNotToEatImg,
readMore: [
{
title: 'Food & Nutrition',
link: '/your-pregnancy/1'
},
{
title: 'Exercise & Fitness',
link: '/your-pregnancy'
}
]
},
{
id: 2,
relatedSection: 'your pregnancy',
title: 'Common Symptoms',
description: 'What to look for',
content: '',
youtubeUrl: '',
img: ''
id: 3,
relatedSection: 'Your Pregnancy',
title: 'Smoking, Drugs & Alcohol',
description: 'Advise on what you can do',
content: (
<div>
<div className='contentStyle'>
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit.
</div>
<div className='contentStyle'>
<span className='highlightPink'>Faucibus porta lacus fringilla vel
Aenean sit amet erat</span> nunc
Eget porttitor loremeger molestie lo
ssaet Nulla volutpat aliquam velit.
</div>
<div className='contentStyle'>
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc.
</div>
</div>
),
youtubeUrl: 'https://youtu.be/od13ZcQizWQ',
img: '',
readMore: [
{
title: 'Food & Nutrition',
link: '/your-pregnancy/1'
},
{
title: 'What Not to Eat',
link: '/your-pregnancy/2'
}
]
},
{
id: 2,
relatedSection: 'your pregnancy',
title: 'Smoking, Drugs & Alcohol',
id: 4,
relatedSection: 'Your Pregnancy',
title: 'Danger Signs',
description: 'Advise on what you can do',
content: '',
content: (
<div>
<div className='contentStyle'>
Contact your midwife (or specialist doctor) straight away if you have any of the danger signs listed below.
</div>
<ul className='dangerSignsList'>
<li>
You have bleeding from your vagina, or you have vaginal discharge that is unusual for you.
</li>
<li>
Your ‘waters’ leak or break before labour starts or, once they have broken, the fluid is dirty-looking, greenish or brown.
</li>
<li>
If, once you are regularly feeling your baby move, your baby moves less than usual or you cannot feel your baby move at all.
</li>
<li>
If, after the first few weeks of your pregnancy, you have pains or cramps in your abdomen (tummy).
</li>
<li>
Your hands, feet or face suddenly swell.
</li>
<li>
You have pain or burning when you wee/mimi – especially if you also have a fever and a sore back.
</li>
<li>
You have a very bad headache and this lasts for more than a few hours.
</li>
</ul>
<Link to='/contact'><p className='contentStyle pinkUnderline'>Contact Midwife</p></Link>
</div>
),
youtubeUrl: '',
img: ''
img: dangerSignsImg,
readMore: [
{
title: 'Food & Nutrition',
link: '/your-pregnancy'
},
{
title: 'Getting a Midwife',
link: '/your-pregnancy/0'
}
]
}
]

BIN +509 KB src/img/ArticlePages/0-3months.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +18.6 KB src/img/ArticlePages/1-3years.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +439 KB src/img/ArticlePages/3-5years.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +762 KB src/img/ArticlePages/3-6months.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +555 KB src/img/ArticlePages/6-12months.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +706 KB src/img/ArticlePages/dangerSigns.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +52.5 KB src/img/ArticlePages/feelingAlone.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +45.4 KB src/img/ArticlePages/feelingStressed.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +496 KB src/img/ArticlePages/feelingUnsafe.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +36.5 KB src/img/ArticlePages/feelingUnwell.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +719 KB src/img/ArticlePages/foodAndNutrition.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +562 KB src/img/ArticlePages/gettingAMidwife.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +30.1 KB src/img/ArticlePages/notSleeping.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +388 KB src/img/ArticlePages/whatNotToEat.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.65 KB src/img/angle/red-angle-left.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.61 KB src/img/angle/red-angle-right.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 src/img/downAngle.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 src/img/heart.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 src/img/upAngle.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 src/reducers/index.js
View file
@@ -5,7 +5,7 @@ import userName from './userName'
import isPregnant from './isPregnant'
import hasChildren from './hasChildren'
import hasMidwife from './hasMidwife'
import homeDropdown from './homeDropdown'
import linkDropdown from './linkDropdown'
import knowDueDate from './knowDueDate'
import dueDate from './dueDate'
import children from './children'
@@ -22,7 +22,7 @@ const reducers = combineReducers({
hasChildren,
hasMidwife,
passwordShowing,
homeDropdown,
linkDropdown,
knowDueDate,
dueDate,
children,
4 src/reducers/homeDropdown.js → src/reducers/linkDropdown.js
View file
@@ -1,8 +1,8 @@
import initialState from '../state'

export default function homeDropdown (state = initialState.homeDropdown, action) {
export default function linkDropdown (state = initialState.linkDropdown, action) {
switch (action.type) {
case 'SET_HOME_DROPDOWN':
case 'SET_LINK_DROPDOWN':
return action.payload
default:
return state
4 src/reducers/pointsTotal.js
View file
@@ -6,6 +6,10 @@ export default function pointsTotal (state = initialState.pointsTotal, action) {
state -= action.payload.points
return state

case 'CANCEL_REWARD':
state += action.payload.points
return state

default:
return state
}
3 src/reducers/userRewardIds.js
View file
@@ -6,6 +6,9 @@ export default function userRewardIds (state = initialState.userRewardIds, actio
state.unshift(action.payload.id)
return state

case 'CANCEL_REWARD':
return state.filter((val, i) => val !== action.payload.id)

default:
return state
}
2 src/state/index.js
View file
@@ -4,7 +4,7 @@ const initialState = {
hasChildren: 'true',
hasMidwife: 'true',
passwordShowing: 'password',
homeDropdown: null,
linkDropdown: null,
knowDueDate: null,
knowLmp: null,
dueDate: '22/12/2017',