Skip to content
This repository has been archived by the owner on May 14, 2021. It is now read-only.

Victor/eco 1248/new branding ui #22

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Victor/eco 1248/new branding ui #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
dd96245
poll new ui
Doc999tor Apr 14, 2019
248d27d
added navigate back functionality
Doc999tor Apr 15, 2019
7c51021
back image changed
Doc999tor Apr 16, 2019
f8240c5
quiz ui draft
Doc999tor Apr 16, 2019
a9507f7
quiz+poll new design
Doc999tor Apr 30, 2019
c0726b4
basic script for changing offer_contents pages schema
May 2, 2019
53dff4c
images paths changed to S3
May 5, 2019
1e57fce
images paths fix
May 5, 2019
2f36c0d
title font-weight increased to 500, fixed updateJsonSchema script
May 5, 2019
7999cae
PR fixes
May 7, 2019
5fb0587
PR fix
May 8, 2019
2ca3777
PR fixes
Doc999tor May 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 51 additions & 20 deletions html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>

(function (PageType) {
Expand Down Expand Up @@ -66,80 +67,110 @@
// {
// type: PageType.FullPageMultiChoice,
// title: "Who do you primarily chat with on Kik?",
// description: "Finish the poll to earn <span style='color:#047cfc;'>6,000</span> Kin",
// rewardText: "Finish the poll to earn",
// rewardValue: 6000,
// question: {
// id: "G@#$",
// id: "question_id_1 - G@#$",
// answers: [
// "New friends I’ve met on Kik",
// "Friends I’ve met elsewhere online",
// "Friends I know from real life",
// "An equal mix of all three!",
// "An equal mix of all four!",
// ],
// },
// },
// {
// type: PageType.EarnThankYou,
// description: "4,500"
// },

//*** Quiz ***//
// {
// type: PageType.TimedFullPageMultiChoice,
// description: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
// amount: 15,
// rightAnswer: 3,
// type: PageType.FullPageMultiChoice,
// title: "Who do you primarily chat with on Kik?",
// rewardText: "Finish the poll to earn",
// rewardValue: 6000,
// question: {
// id: "erthwt",
// id: "question_id_2 - G@#$",
// answers: [
// "Radonite",
// "Argonite",
// "Carbonite",
// "Kryptonite",
// "New friends I’ve met on Kik",
// "Friends I’ve met elsewhere online",
// "Friends I know from real life",
// "An equal mix of all three!",
// "An equal mix of all four!",
// ],
// },
// },
// {
// type: PageType.EarnThankYou,
// description: "4,500"
// },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hope these are tests


//*** Quiz ***//
{
type: PageType.TimedFullPageMultiChoice,
title: "What was the name of the substance that Star Wars hero Han Solo was encased in?",
amount: 15,
rightAnswer: 3,
rewardText: "Finish the poll to earn",
rewardValue: 6000,
question: {
id: "erthwt",
answers: [
"Radonite",
"Argonite",
"Carbonite",
"Kryptonite",
"Kryptonite-2",
],
},
},
{
type: PageType.TimedFullPageMultiChoice,
description: "How much wood could a woodchuck chuck?",
title: "How much wood could a woodchuck chuck?",
amount: 15,
rightAnswer: 2,
rewardText: "Finish the poll to earn",
rewardValue: 6000,
question: {
id: "question-1",
answers: [
"Not a lot, they are very small",
"A woodchuck would chuck as much wood as a woodchuck could chuck",
"320 kg",
"361.9237001 cm3",
"361.9237001 cm3-2",
],
},
},
{
type: PageType.TimedFullPageMultiChoice,
description: "Yes?",
title: "Yes?",
amount: 20,
rightAnswer: 3,
rewardText: "Finish the poll to earn",
rewardValue: 6000,
question: {
id: "question-2",
answers: [
"Of course",
"no",
"320 kg",
"Camel",
"Camel-2",
],
},
},
{
type: PageType.TimedFullPageMultiChoice,
description: "Color?",
title: "Color?",
amount: 15,
rightAnswer: 4,
rewardText: "Finish the poll to earn",
rewardValue: 6000,
question: {
id: "question-3",
answers: [
"Yellow",
"Red",
"Crimson",
"Dorothy",
"Dorothy-2",
],
},
},
Expand Down
86 changes: 86 additions & 0 deletions images/cheering-hands.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions images/ic-back.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions images/kin-coin.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 52 additions & 8 deletions scripts/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,10 @@ export interface CommonProps {
totalPagesCount: number;
currentPage: number;
sharedData: SharedData;
rewardText?: string;
rewardValue?: number;
updateSharedDate(data: any): void;
navigateBack(): void;
}

const sharedPageData = {};
Expand Down Expand Up @@ -84,6 +87,7 @@ class App extends React.Component {
data: {},
};
this.onPageCompleteHandler = this.onPageCompleteHandler.bind(this);
this.navigateBack = this.navigateBack.bind(this);
}

public render() {
Expand All @@ -99,27 +103,50 @@ class App extends React.Component {
}

private onPageCompleteHandler(answerData: any) {
const navigationStep = 1;
const newPageIndex = this.navigate(navigationStep);

const allData: any = Object.assign({}, this.state.data, answerData); // todo pollyfill Object.assign
const newPageIndex = this.state.currentPage + 1;
const isComplete = this.state.currentPage === (this.state.pages.length - 1);
console.log("current: %s, new page: %s, isComplete: %s", this.state.currentPage, newPageIndex, isComplete);

const isComplete = this.state.currentPage === (this.state.pages.length - 1);
if (isComplete) {
if (Object.keys(allData)) {
console.log("submit " + JSON.stringify(allData));
bridge.submitResult(allData);
console.log("submit " + JSON.stringify(this.state.data));
bridge.submitResult(this.state.data);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't make sense that this is here. This method should only navigate not submit. Move it back into onPageCompleteHandler where it belongs.

bridge.close();
}
return;
}

this.setState({
currentPage: newPageIndex,
data: allData,
isComplete,
});
}

private navigateBack() {
const navigationStep = -1;
const newPageIndex = this.navigate(navigationStep);

const shouldExit = newPageIndex < 0;
if (shouldExit) {
console.log("exit " + JSON.stringify(this.state.data));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this in production?

bridge.close();
return;
}

this.setState(Object.assign({}, this.state, {
currentPage: newPageIndex,
}));
}

private navigate(pageStep: number): number {
const newPageIndex = this.state.currentPage + pageStep;
console.log("current: %s, new page: %s", this.state.currentPage, newPageIndex);

return newPageIndex;
}

private updateSharedData(data: any) {
Object.assign(sharedPageData, data);
}
Expand All @@ -132,22 +159,39 @@ class App extends React.Component {
pageIndex: index,
id: page.question && page.question.id,
title: page.title,
rewardText: page.rewardText,
rewardValue: page.rewardValue,
isDisplayed: this.state.currentPage === index,
totalPagesCount: this.state.pages.length,
currentPage: this.state.currentPage,
sharedData: sharedPageData,
updateSharedDate: this.updateSharedData,
navigateBack: this.navigateBack,
};

switch (page.type) {
case PageType.FullPageMultiChoice:
return <MultichoiceQuestion {...commonProps} choices={page.question.choices} description={page.description} onSelected={this.onPageCompleteHandler} rightAnswer={page.rightAnswer}/>;
return <MultichoiceQuestion
{...commonProps}
choices={page.question.choices}
rewardText={page.rewardText}
rewardValue={page.rewardValue}
onSelected={this.onPageCompleteHandler}
rightAnswer={page.rightAnswer}/>;
case PageType.ImageAndText:
return <ImageAndTextPage {...commonProps} image={page.image} footerHtml={page.footerHtml} bodyHtml={page.bodyHtml} buttonText={page.buttonText} onBtnClick={this.onPageCompleteHandler}/>;
case PageType.EarnThankYou:
return <EarnThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar} amount={page.description}/>;
case PageType.TimedFullPageMultiChoice:
return <TimedMultichoiceQuestion {...commonProps} choices={page.question.choices} title={page.description} onSelected={this.onPageCompleteHandler} amount={page.amount} rightAnswer={page.rightAnswer}/>;
return <TimedMultichoiceQuestion
{...commonProps}
choices={page.question.choices}
title={page.title}
rewardText={page.rewardText}
rewardValue={page.rewardValue}
onSelected={this.onPageCompleteHandler}
amount={page.amount}
rightAnswer={page.rightAnswer}/>;
case PageType.SuccessBasedThankYou:
return <SuccessBasedThankYou {...commonProps} isDisplayed={this.state.currentPage === index} closeHandler={this.onPageCompleteHandler} hideTopBarHandler={bridge.hideTopBar}/>;
}
Expand Down
10 changes: 2 additions & 8 deletions scripts/src/ui/page/earnThankYou.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,14 @@ export class EarnThankYou extends React.Component<EarnThankYouProps> {
}

public render() {
const diamonds = [ "l-1", "l-2", "l-3", "l-4", "c-1", "c-2", "r-3", "r-2", "r-1" ]
.map((name, index) => <img key={index} src={getImageUrl("diamond-" + name)} className={"diamond-" + name + " diamonds"}/>);
return (
<BasePage className="earnThankYou">

<div className="text">
<div>Yay! You've earned</div>
<div className="amount">{this.props.amount}</div>
<img src={getImageUrl("kin-type")} className="kin-type"/>
<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{this.props.amount}</span></span>
</div>
<div className={"footer"}>
<img src={getImageUrl("coins")} className="coins"/>
<img src={getImageUrl("sparks")} className="sparks"/>
{diamonds}
<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
</div>
</BasePage>
);
Expand Down
15 changes: 13 additions & 2 deletions scripts/src/ui/page/multichoice.question.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export interface FullPageMultiChoiceState {
wrongAnswer: number | null;
}

const getImageUrl = (imageName: string) => `https://s3.amazonaws.com/htmlpoll.kinecosystem.com/images/${imageName}.svg`;

export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMultiChoiceProps, S extends FullPageMultiChoiceState = FullPageMultiChoiceState> extends React.Component<P, S> {
protected additionalClasses = new Set(" ");
protected highlightRightWrong = false;
Expand Down Expand Up @@ -52,10 +54,19 @@ export class MultichoiceQuestion<P extends FullPageMultiChoiceProps = FullPageMu
}

protected getHeader() {
const currentPage = this.props.pageIndex + 1;
/* the list is 0 based */
const totalQuestionPages = this.props.totalPagesCount - 1;
/* the list contains a Thank you page --- a better solution is better */
return (
<React.Fragment>
<div className="title">{this.props.title}</div>
<div className="description" dangerouslySetInnerHTML={{ __html: this.props && this.props.description! }}/>
<div className="header-controls">
<button className="back-nav" onClick={this.props.navigateBack}><img src={ getImageUrl("ic-back") } /></button>
<span></span>
<div className="pageProgress">{currentPage}/{totalQuestionPages}</div>
</div>
<span className="title">{this.props.title}</span>
<div className="description">{ this.props.rewardText } <span className="description-price"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } />{ Number(this.props.rewardValue) }</span> </div>
</React.Fragment>
);
}
Expand Down
40 changes: 15 additions & 25 deletions scripts/src/ui/page/successBasedThankYou.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
return (
<React.Fragment>
<div className="text">
<h1 className={ "" }>Better Luck Next Time!</h1>
<h2>Thanks for trying, you've earned</h2>
<div className="amount">1</div>
<img src={ getImageUrl("kin-type") } className="kin-type"/>
<h2>for the effort</h2>
<h1>Better luck next time!</h1>
<h2>you've earned:</h2>
<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>1</span></span>
</div>
<div className={ "footer" }>
<img src={ getImageUrl("coins") } className="coins"/>
<img src={ getImageUrl("sparks") } className="sparks"/>
{ SuccessBasedThankYou.diamondElements }
<div className="footer">
<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
</div>
</React.Fragment>
);
Expand All @@ -65,15 +61,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
return (
<React.Fragment>
<div className="text">
<h1 className={ "" }>Well Done!</h1>
<h2>Yay! You've earned</h2>
<div className="amount">{ this.props.sharedData.earnedAmount }</div>
<img src={ getImageUrl("kin-type") } className="kin-type"/>
<h1>Well Done!</h1>
<h2>Yay! You've earned:</h2>
<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{ this.props.sharedData.earnedAmount }</span></span>
</div>
<div className={ "footer" }>
<img src={ getImageUrl("coins") } className="coins"/>
<img src={ getImageUrl("sparks") } className="sparks"/>
{ SuccessBasedThankYou.diamondElements }
<div className="footer">
<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
</div>
</React.Fragment>
);
Expand All @@ -83,15 +76,12 @@ export class SuccessBasedThankYou extends React.Component<EarnThankYouProps> {
return (
<React.Fragment>
<div className="text">
<h1 className={ "" }>Perfect Score!</h1>
<h2>Yay! You've earned</h2>
<div className="amount">{ this.props.sharedData.earnedAmount }</div>
<img src={ getImageUrl("kin-type") } className="kin-type"/>
<h1>High five!</h1>
<h2>Yay! You've earned:</h2>
<span className="amount"><span className="full-width-plus">＋</span><img src={ getImageUrl("kin-coin") } /><span>{ this.props.sharedData.earnedAmount }</span></span>
</div>
<div className={ "footer" }>
<img src={ getImageUrl("coins") } className="coins"/>
<img src={ getImageUrl("sparks") } className="sparks"/>
{ SuccessBasedThankYou.diamondElements }
<div className="footer">
<img src={ getImageUrl("cheering-hands") } className="cheering-hands"/>
</div>
</React.Fragment>
);
Expand Down
Loading