Binary com lp new

package.json

@@ -118,8 +118,8 @@
     "mobx-react": "^5.4.4",
     "pako": "^1.0.11",
     "react-render-html": "^0.6.0",
-    "react-slick": "^0.28.1",
+    "react-slick": "^0.29.0",
     "react-transition-group": "^4.0.1",
-    "slick-carousel": "^1.8.1"
+    "slick-slider": "^1.8.2"
   }
 }

src/botPage/view/View.js

@@ -50,7 +50,7 @@ import {
     saveBeforeUnload,
 } from './blockly/utils';
 import { moveToDeriv } from '../../common/utils/utility';
-import { setTimeOutBanner } from '../../indexPage/index';
+import { setTimeOutBanner, getComponent } from '../../indexPage';
 
 let realityCheckTimeout;
 let chart;
@@ -841,6 +841,8 @@ function renderErrorPage() {
 
 // eslint-disable-next-line consistent-return
 function renderReactComponents() {
+    // eslint-disable-next-line no-unused-vars
+    getComponent();
     $('.barspinner').show();
     const bannerToken = getStorage('setDueDateForBanner');
     const qs = parseQueryString();

src/common/lang.js

@@ -57,6 +57,9 @@ export const load = () => {
             .text()
     );
 
+    $('.actual_flag').text(`${lang}`);
+    $('.language_background_flag').addClass(`${lang}_flag_mtd`);
+
     if (lang === 'ach') {
         // eslint-disable-next-line no-underscore-dangle
         window._jipt = [['project', 'binary-bot']];

src/indexPage/index.js

@@ -12,21 +12,23 @@ import { get as getStorage, set as setStorage, remove, getTokenList } from '../c
 import { createUrl, parseQueryString, serialize } from '../common/utils/tools';
 import '../common/binary-ui/dropdown';
 import BotLanding from './react-components/bot-landing';
+import BinaryLanding from './react-components/binary-landing';
 
 const today = new Date().getTime();
 // eslint-disable-next-line one-var
 const oneMilliSec = 1000;
-const sevenDays = 7;
-const oneMinute = 60;
-const oneDay = 24;
+// will uncomment before production release
+// const sevenDays = 7;
+// const oneMinute = 60;
+// const oneDay = 24;
 
 export const elements = ['#notification-banner', '#main', '#footer', '#header', '#topbar'];
 // eslint-disable-next-line one-var
 export const bannerToken = getStorage('setDueDateForBanner');
 
 // eslint-disable-next-line arrow-body-style
 export const expirationDate = () => {
-    return today + oneMilliSec * oneMinute * oneMinute * oneDay * sevenDays;
+    return today + oneMilliSec * 600;
 };
 
 export const calcSetTimeoutValueBanner = expirationDate() - new Date().getTime();
@@ -40,7 +42,16 @@ const checkifBotRunning = () => {
     }
     return false;
 };
-
+let Component, dynamicVar;
+export const getComponent = () => {
+    if (window.location.pathname === '/movetoderiv.html') {
+        Component = <BinaryLanding />;
+        dynamicVar = 'movetoderiv';
+    } else {
+        Component = <BotLanding />;
+        dynamicVar = 'bot-landing';
+    }
+};
 export const setTimeOutBanner = route => {
     let bannerDisplayed;
     const qs = parseQueryString();
@@ -65,17 +76,20 @@ export const setTimeOutBanner = route => {
 };
 
 const renderBanner = () => {
-    render(<BotLanding />, document.getElementById('bot-landing'));
-    setStorage('setDueDateForBanner', expirationDate());
+    getComponent();
+    render(Component, document.getElementById(dynamicVar));
+    // setStorage('setDueDateForBanner', expirationDate());
     elements.map(elem => document.querySelector(elem).classList.add('hidden'));
-    document.getElementById('bot-landing').classList.remove('hidden');
+    document.getElementById(dynamicVar).classList.remove('hidden');
     document.getElementById('bot-main').classList.remove('hidden');
     document.getElementById('topbar').classList.remove('hidden');
     $('.barspinner').hide();
 };
 
 // eslint-disable-next-line consistent-return
 const renderElements = () => {
+    // eslint-disable-next-line one-var, no-unused-vars
+    getComponent();
     setTimeOutBanner('index');
     $('.barspinner').show();
 
@@ -99,7 +113,7 @@ const renderElements = () => {
                 createUrl({ subdomain: 'shop', path: 'collections/strategies', isNonBotPage: true })
             );
             elements.map(elem => document.querySelector(elem).classList.remove('hidden'));
-            document.getElementById('bot-landing').classList.add('hidden');
+            document.getElementById(dynamicVar).classList.add('hidden');
         }
         document.getElementById('bot-main').classList.remove('hidden');
         setTimeout(() => {

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { translate } from '../../../common/i18n';
+
+const CardSection = () => {
+    const cardContentArray = [
+        {
+            title  : translate('Trade multipliers'),
+            content: translate('Amplify your potential profit without risking more than your stake.'),
+            img    : 'image/multiplier.png',
+        },
+        {
+            title  : translate('Peer-to-peer payments'),
+            content: translate('Exchange your local currency with fellow traders to get funds in and out of your account with Deriv P2P.'),
+            img    : 'image/p2p.png',
+        },
+        {
+            title  : translate('Learn with Deriv Academy'),
+            content: translate('Enjoy complimentary articles and videos to help you learn the ropes of online trading.'),
+            img    : 'image/academy.png',
+        },
+        {
+            title  : translate('Crash/Boom indices'),
+            content: translate('Predict and potentially gain from exciting spikes and dips. Only available with multipliers on DTrader.'),
+            img    : 'image/crashboom.png',
+        },
+    ]
+
+    return (
+        <div className='card-container card-wrapper'>
+            <div className='section-container-holder card-wrapper-holder'>
+                <div className="container-header  card-wrapper-holder-header">
+                    <h1>{translate ('Exclusively on Deriv')}</h1>
+                    <h2>{translate('There’s a bright future ahead.')}</h2>
+                    <h2>{translate ('Find these bonus features and more on Deriv:')}</h2>
+                </div>
+            </div>
+            <div className="card-container card-wrapper-holder-container">
+                {cardContentArray.map((card, index) => {
+                    const { title, content,img } = card;
+                    return (
+                        <div className='card-wrapper-holder-container-content' key={index}>
+                            <div>
+                                <img src={img} />
+                            </div>
+                            <h1>{title}</h1>
+                            <h2>{content}</h2>
+                        </div>
+                    )
+                })
+                } 
+            </div>
+
+        </div>
+    )
+}
+
+export default CardSection;

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import Slider from 'react-slick';
+import { translate } from '../../../common/i18n';
+
+const carouselContentArray = [
+    {
+        url: 'https://smarttrader.deriv.com/',
+        action_text: translate('Check it out'),
+        img: 'image/landing-carousel/smart-trader.png',
+        platform_title: translate('SmartTrader'),
+        platform_description: translate('Our classic options trading platform'),
+    },
+    {
+        url: 'https://bot.deriv.com/',
+        action_text: translate('Check it out'),
+        img: 'image/landing-carousel/binary-bot.png',
+        platform_title: translate('Binary Bot'),
+        platform_description: translate('Our classic automated trading platform'),
+    },
+    {
+        url: 'https://deriv.com/dmt5/',
+        action_text: translate('Learn more'),
+        img: 'image/landing-carousel/mt5.png',
+        platform_title: translate('Deriv MT5'),
+        platform_description: translate('The world-famous CFD trading platform'),
+    },
+    {
+        url: 'https://deriv.com/dtrader/',
+        action_text: translate('Learn more'),
+        img: 'image/landing-carousel/dtrader.png',
+        platform_title: translate('DTrader'),
+        platform_description: translate('Our flagship options and multipliers trading platform'),
+    },
+    {
+        url: 'https://deriv.com/dbot/',
+        action_text: translate('Learn more'),
+        img: 'image/landing-carousel/dbot.png',
+        platform_title: translate('DBot'),
+        platform_description: translate('Our next generation automated trading platform'),
+    },
+    {
+        url: 'https://deriv.com/landing/deriv-go/',
+        action_text: translate('Learn more'),
+        img: 'image/landing-carousel/deriv-go.png',
+        platform_title: translate('Deriv GO'),
+        platform_description: translate('Trade on-the-go with our mobile trading platform'),
+    },
+    {
+        url: 'https://deriv.com/derivx/',
+        action_text: translate('Learn more'),
+        img: 'image/landing-carousel/derivX.png',
+        platform_title: translate('Deriv X'),
+        platform_description: translate('Our customisable CFD trading platform'),
+    },
+]
+
+
+const Carousel = () => {
+
+    const settings = {
+        dots: false,
+        infinite: true,
+        speed: 300,
+        slidesToShow: 2,
+        slidesToScroll: 1,
+        arrows: false,
+        variableWidth: true,
+        // initialSlide: 1,
+        autoplay: true,
+        autoplaySpeed: 1500,
+        responsive: [
+            {
+                breakpoint: 1024,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                },
+            },
+            {
+                breakpoint: 700,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                },
+            },
+        ],
+    };
+
+    return (
+        <div className="carousel_section">
+            <div className="carousel_section__desktop">
+                <Slider {...settings}>
+                    {carouselContentArray.map((slide, index) => {
+                        const { url, action_text, img, platform_title, platform_description } = slide;
+                        return (
+                            <div className="carousel_section__slide_card">
+                                <div className="carousel_slide_info_wrapper">
+                                    <h1 className="platform_title" >{platform_title}</h1>
+                                    <h2 className="platform_description" >{platform_description}</h2>
+                                </div>
+                                <img className="carousel_section__slide_img" src={img} />
+                                <a href={url}>
+                                    <button className="carousel_section__arrow-btn">
+                                        <div className="carousel_section__btn_inner">
+                                            {action_text}
+                                            <img src={`image/landing-carousel/arrow.svg`} />
+                                        </div>
+                                    </button>
+                                </a>
+                            </div>
+                        )
+                    }
+                    )}
+                </Slider>
+            </div>
+            <div className="carousel_section__mobile">
+                {carouselContentArray.map((slide, index) => {
+                    const { url, action_text, img, platform_title, platform_description } = slide;
+                    return (
+                        <div className="carousel_section__slide_card">
+                            <div className="carousel_slide_info_wrapper">
+                                <h1 className="platform_title" >{platform_title}</h1>
+                                <h2 className="platform_description" >{platform_description}</h2>
+                            </div>
+                            <img className="carousel_section__slide_img" src={img} />
+                            <a href={url}>
+                                <button className="carousel_section__arrow-btn">
+                                    <div className="carousel_section__btn_inner">
+                                        {action_text}
+                                        <img src={`image/landing-carousel/arrow.svg`} />
+                                    </div>
+                                </button>
+                            </a>
+                        </div>
+                    )
+                }
+                )}
+            </div>
+        </div>
+    );
+}
+export default Carousel;

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import { translate } from '../../../common/i18n';
+
+const CarouselTitle = () => (
+    <div className="carousel-title">
+        <div className="carousel-title__content">
+            <h1>{translate('7 trading platforms — old favourites and new ones, too')}</h1>
+        </div>
+    </div>
+);
+
+export default CarouselTitle