Skip to content
This repository was archived by the owner on Feb 22, 2024. It is now read-only.

Commit 687e1f0

Browse files
sara-fssara-fs
authored
Merge pull request #3667 from binary-com/binary-com-lp-new
Mitra / Binary com lp new
2 parents 312eb14 + c221941 commit 687e1f0

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

+4022
-2004
lines changed

‎.github/workflows/main.yml‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎package-lock.json‎

Lines changed: 2098 additions & 1926 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,8 @@
118118
"mobx-react": "^5.4.4",
119119
"pako": "^1.0.11",
120120
"react-render-html": "^0.6.0",
121-
"react-slick": "^0.28.1",
121+
"react-slick": "^0.29.0",
122122
"react-transition-group": "^4.0.1",
123-
"slick-carousel": "^1.8.1"
123+
"slick-slider": "^1.8.2"
124124
}
125125
}

‎src/botPage/view/View.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import {
5050
saveBeforeUnload,
5151
} from './blockly/utils';
5252
import { moveToDeriv } from '../../common/utils/utility';
53-
import { setTimeOutBanner } from '../../indexPage/index';
53+
import { setTimeOutBanner, getComponent } from '../../indexPage';
5454

5555
let realityCheckTimeout;
5656
let chart;
@@ -841,6 +841,8 @@ function renderErrorPage() {
841841

842842
// eslint-disable-next-line consistent-return
843843
function renderReactComponents() {
844+
// eslint-disable-next-line no-unused-vars
845+
getComponent();
844846
$('.barspinner').show();
845847
const bannerToken = getStorage('setDueDateForBanner');
846848
const qs = parseQueryString();

‎src/common/lang.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ export const load = () => {
5757
.text()
5858
);
5959

60+
$('.actual_flag').text(`${lang}`);
61+
$('.language_background_flag').addClass(`${lang}_flag_mtd`);
62+
6063
if (lang === 'ach') {
6164
// eslint-disable-next-line no-underscore-dangle
6265
window._jipt = [['project', 'binary-bot']];

‎src/indexPage/index.js‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,23 @@ import { get as getStorage, set as setStorage, remove, getTokenList } from '../c
1212
import { createUrl, parseQueryString, serialize } from '../common/utils/tools';
1313
import '../common/binary-ui/dropdown';
1414
import BotLanding from './react-components/bot-landing';
15+
import BinaryLanding from './react-components/binary-landing';
1516

1617
const today = new Date().getTime();
1718
// eslint-disable-next-line one-var
1819
const oneMilliSec = 1000;
19-
const sevenDays = 7;
20-
const oneMinute = 60;
21-
const oneDay = 24;
20+
// will uncomment before production release
21+
// const sevenDays = 7;
22+
// const oneMinute = 60;
23+
// const oneDay = 24;
2224

2325
export const elements = ['#notification-banner', '#main', '#footer', '#header', '#topbar'];
2426
// eslint-disable-next-line one-var
2527
export const bannerToken = getStorage('setDueDateForBanner');
2628

2729
// eslint-disable-next-line arrow-body-style
2830
export const expirationDate = () => {
29-
return today + oneMilliSec * oneMinute * oneMinute * oneDay * sevenDays;
31+
return today + oneMilliSec * 600;
3032
};
3133

3234
export const calcSetTimeoutValueBanner = expirationDate() - new Date().getTime();
@@ -40,7 +42,16 @@ const checkifBotRunning = () => {
4042
}
4143
return false;
4244
};
43-
45+
let Component, dynamicVar;
46+
export const getComponent = () => {
47+
if (window.location.pathname === '/movetoderiv.html') {
48+
Component = <BinaryLanding />;
49+
dynamicVar = 'movetoderiv';
50+
} else {
51+
Component = <BotLanding />;
52+
dynamicVar = 'bot-landing';
53+
}
54+
};
4455
export const setTimeOutBanner = route => {
4556
let bannerDisplayed;
4657
const qs = parseQueryString();
@@ -65,17 +76,20 @@ export const setTimeOutBanner = route => {
6576
};
6677

6778
const renderBanner = () => {
68-
render(<BotLanding />, document.getElementById('bot-landing'));
69-
setStorage('setDueDateForBanner', expirationDate());
79+
getComponent();
80+
render(Component, document.getElementById(dynamicVar));
81+
// setStorage('setDueDateForBanner', expirationDate());
7082
elements.map(elem => document.querySelector(elem).classList.add('hidden'));
71-
document.getElementById('bot-landing').classList.remove('hidden');
83+
document.getElementById(dynamicVar).classList.remove('hidden');
7284
document.getElementById('bot-main').classList.remove('hidden');
7385
document.getElementById('topbar').classList.remove('hidden');
7486
$('.barspinner').hide();
7587
};
7688

7789
// eslint-disable-next-line consistent-return
7890
const renderElements = () => {
91+
// eslint-disable-next-line one-var, no-unused-vars
92+
getComponent();
7993
setTimeOutBanner('index');
8094
$('.barspinner').show();
8195

@@ -99,7 +113,7 @@ const renderElements = () => {
99113
createUrl({ subdomain: 'shop', path: 'collections/strategies', isNonBotPage: true })
100114
);
101115
elements.map(elem => document.querySelector(elem).classList.remove('hidden'));
102-
document.getElementById('bot-landing').classList.add('hidden');
116+
document.getElementById(dynamicVar).classList.add('hidden');
103117
}
104118
document.getElementById('bot-main').classList.remove('hidden');
105119
setTimeout(() => {

‎src/indexPage/react-components/binary-landing/Card.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { translate } from '../../../common/i18n';
3+
4+
const CardSection = () => {
5+
const cardContentArray = [
6+
{
7+
title : translate('Trade multipliers'),
8+
content: translate('Amplify your potential profit without risking more than your stake.'),
9+
img : 'image/multiplier.png',
10+
},
11+
{
12+
title : translate('Peer-to-peer payments'),
13+
content: translate('Exchange your local currency with fellow traders to get funds in and out of your account with Deriv P2P.'),
14+
img : 'image/p2p.png',
15+
},
16+
{
17+
title : translate('Learn with Deriv Academy'),
18+
content: translate('Enjoy complimentary articles and videos to help you learn the ropes of online trading.'),
19+
img : 'image/academy.png',
20+
},
21+
{
22+
title : translate('Crash/Boom indices'),
23+
content: translate('Predict and potentially gain from exciting spikes and dips. Only available with multipliers on DTrader.'),
24+
img : 'image/crashboom.png',
25+
},
26+
]
27+
28+
return (
29+
<div className='card-container card-wrapper'>
30+
<div className='section-container-holder card-wrapper-holder'>
31+
<div className="container-header card-wrapper-holder-header">
32+
<h1>{translate ('Exclusively on Deriv')}</h1>
33+
<h2>{translate('There’s a bright future ahead.')}</h2>
34+
<h2>{translate ('Find these bonus features and more on Deriv:')}</h2>
35+
</div>
36+
</div>
37+
<div className="card-container card-wrapper-holder-container">
38+
{cardContentArray.map((card, index) => {
39+
const { title, content,img } = card;
40+
return (
41+
<div className='card-wrapper-holder-container-content' key={index}>
42+
<div>
43+
<img src={img} />
44+
</div>
45+
<h1>{title}</h1>
46+
<h2>{content}</h2>
47+
</div>
48+
)
49+
})
50+
}
51+
</div>
52+
53+
</div>
54+
)
55+
}
56+
57+
export default CardSection;

‎src/indexPage/react-components/binary-landing/Carousel.jsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from 'react';
2+
import Slider from 'react-slick';
3+
import { translate } from '../../../common/i18n';
4+
5+
const carouselContentArray = [
6+
{
7+
url: 'https://smarttrader.deriv.com/',
8+
action_text: translate('Check it out'),
9+
img: 'image/landing-carousel/smart-trader.png',
10+
platform_title: translate('SmartTrader'),
11+
platform_description: translate('Our classic options trading platform'),
12+
},
13+
{
14+
url: 'https://bot.deriv.com/',
15+
action_text: translate('Check it out'),
16+
img: 'image/landing-carousel/binary-bot.png',
17+
platform_title: translate('Binary Bot'),
18+
platform_description: translate('Our classic automated trading platform'),
19+
},
20+
{
21+
url: 'https://deriv.com/dmt5/',
22+
action_text: translate('Learn more'),
23+
img: 'image/landing-carousel/mt5.png',
24+
platform_title: translate('Deriv MT5'),
25+
platform_description: translate('The world-famous CFD trading platform'),
26+
},
27+
{
28+
url: 'https://deriv.com/dtrader/',
29+
action_text: translate('Learn more'),
30+
img: 'image/landing-carousel/dtrader.png',
31+
platform_title: translate('DTrader'),
32+
platform_description: translate('Our flagship options and multipliers trading platform'),
33+
},
34+
{
35+
url: 'https://deriv.com/dbot/',
36+
action_text: translate('Learn more'),
37+
img: 'image/landing-carousel/dbot.png',
38+
platform_title: translate('DBot'),
39+
platform_description: translate('Our next generation automated trading platform'),
40+
},
41+
{
42+
url: 'https://deriv.com/landing/deriv-go/',
43+
action_text: translate('Learn more'),
44+
img: 'image/landing-carousel/deriv-go.png',
45+
platform_title: translate('Deriv GO'),
46+
platform_description: translate('Trade on-the-go with our mobile trading platform'),
47+
},
48+
{
49+
url: 'https://deriv.com/derivx/',
50+
action_text: translate('Learn more'),
51+
img: 'image/landing-carousel/derivX.png',
52+
platform_title: translate('Deriv X'),
53+
platform_description: translate('Our customisable CFD trading platform'),
54+
},
55+
]
56+
57+
58+
const Carousel = () => {
59+
60+
const settings = {
61+
dots: false,
62+
infinite: true,
63+
speed: 300,
64+
slidesToShow: 2,
65+
slidesToScroll: 1,
66+
arrows: false,
67+
variableWidth: true,
68+
// initialSlide: 1,
69+
autoplay: true,
70+
autoplaySpeed: 1500,
71+
responsive: [
72+
{
73+
breakpoint: 1024,
74+
settings: {
75+
slidesToShow: 1,
76+
slidesToScroll: 1,
77+
},
78+
},
79+
{
80+
breakpoint: 700,
81+
settings: {
82+
slidesToShow: 1,
83+
slidesToScroll: 1,
84+
},
85+
},
86+
],
87+
};
88+
89+
return (
90+
<div className="carousel_section">
91+
<div className="carousel_section__desktop">
92+
<Slider {...settings}>
93+
{carouselContentArray.map((slide, index) => {
94+
const { url, action_text, img, platform_title, platform_description } = slide;
95+
return (
96+
<div className="carousel_section__slide_card">
97+
<div className="carousel_slide_info_wrapper">
98+
<h1 className="platform_title" >{platform_title}</h1>
99+
<h2 className="platform_description" >{platform_description}</h2>
100+
</div>
101+
<img className="carousel_section__slide_img" src={img} />
102+
<a href={url}>
103+
<button className="carousel_section__arrow-btn">
104+
<div className="carousel_section__btn_inner">
105+
{action_text}
106+
<img src={`image/landing-carousel/arrow.svg`} />
107+
</div>
108+
</button>
109+
</a>
110+
</div>
111+
)
112+
}
113+
)}
114+
</Slider>
115+
</div>
116+
<div className="carousel_section__mobile">
117+
{carouselContentArray.map((slide, index) => {
118+
const { url, action_text, img, platform_title, platform_description } = slide;
119+
return (
120+
<div className="carousel_section__slide_card">
121+
<div className="carousel_slide_info_wrapper">
122+
<h1 className="platform_title" >{platform_title}</h1>
123+
<h2 className="platform_description" >{platform_description}</h2>
124+
</div>
125+
<img className="carousel_section__slide_img" src={img} />
126+
<a href={url}>
127+
<button className="carousel_section__arrow-btn">
128+
<div className="carousel_section__btn_inner">
129+
{action_text}
130+
<img src={`image/landing-carousel/arrow.svg`} />
131+
</div>
132+
</button>
133+
</a>
134+
</div>
135+
)
136+
}
137+
)}
138+
</div>
139+
</div>
140+
);
141+
}
142+
export default Carousel;

‎src/indexPage/react-components/binary-landing/CarouselTitle.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react'
2+
import { translate } from '../../../common/i18n';
3+
4+
const CarouselTitle = () => (
5+
<div className="carousel-title">
6+
<div className="carousel-title__content">
7+
<h1>{translate('7 trading platforms — old favourites and new ones, too')}</h1>
8+
</div>
9+
</div>
10+
);
11+
12+
export default CarouselTitle

0 commit comments

Comments
 (0)