From 56dfc2386cb8b4087a12dac431222f4c11d1c11e Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Fri, 27 Aug 2021 16:48:44 +0300
Subject: [PATCH 1/2] nikolai.berestevich/feat/add subscribe-banner on single
 article page

---
 .../_agreement-label.js                       | 64 -------------------
 .../side-subscription-banner/index.js         | 44 ++++++++++---
 src/pages/blog/index.js                       |  2 +-
 src/pages/blog/template/index.js              |  3 +
 4 files changed, 40 insertions(+), 73 deletions(-)
 delete mode 100644 src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js

diff --git a/src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js b/src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js
deleted file mode 100644
index 7d09cc1d50a..00000000000
--- a/src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { Checkbox, LocalizedLinkText } from 'components/elements'
-import { Localize } from 'components/localization'
-import device from 'themes/device.js'
-
-const CheckboxSpan = styled.span`
-    font-size: var(--text-size-xs);
-    color: ${(props) => (props.color ? props.color : 'black')};
-
-    a {
-        font-weight: 700;
-    }
-    @media ${device.tabletL} {
-        font-size: 1.75rem;
-    }
-`
-const AgreementLabel = ({ handleChangeCheckbox, isChecked, color }) => {
-    const handleChange = (event) => {
-        handleChangeCheckbox(event)
-    }
-
-    return (
-        <label>
-            <Checkbox
-                style={{
-                    border: '0',
-                    clip: 'rect(0px, 0px, 0px, 0px)',
-                    position: 'absolute',
-                }}
-                bg="rgba(255, 255, 255, 0)"
-                className="signup_agree_tnc"
-                secondary
-                onChange={handleChange}
-                checked={isChecked}
-            />
-            <CheckboxSpan color={color}>
-                <Localize
-                    fontSize="var(--text-size-xs)"
-                    translate_text="I agree to the <0>terms and conditions</0>"
-                    components={[
-                        <LocalizedLinkText
-                            key={0}
-                            type="terms_and_conditions"
-                            external="true"
-                            rel="noopener noreferrer"
-                            size="14px"
-                            color="grey-5"
-                        />,
-                    ]}
-                />
-            </CheckboxSpan>
-        </label>
-    )
-}
-
-AgreementLabel.propTypes = {
-    color: PropTypes.string,
-    handleChangeCheckbox: PropTypes.func,
-    isChecked: PropTypes.bool,
-}
-
-export default AgreementLabel
diff --git a/src/pages/academy/blog/components/side-subscription-banner/index.js b/src/pages/academy/blog/components/side-subscription-banner/index.js
index bb327c5f13a..636b5491bad 100644
--- a/src/pages/academy/blog/components/side-subscription-banner/index.js
+++ b/src/pages/academy/blog/components/side-subscription-banner/index.js
@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { TextWrapper } from '../../../../blog/components/_common'
-import AgreementLabel from './_agreement-label'
+import AgreementLabel from 'components/custom/_agreement-label'
 import validation from 'common/validation'
 import { localize, Localize } from 'components/localization'
 import { Button } from 'components/form'
-import { Header, Text } from 'components/elements'
+import { Header, Text, LocalizedLinkText } from 'components/elements'
 import { Flex } from 'components/containers'
 import device from 'themes/device.js'
 import { DerivStore } from 'store'
@@ -17,7 +17,7 @@ const SubscribeBannerWrapper = styled(Flex)`
     padding: 32px 16px;
     background: var(--color-grey-42);
     border-radius: 8px;
-    margin-top: 40px;
+    margin: 40px 0;
     @media ${device.tabletL} {
         max-width: 328px;
         padding: 32px 18.5px;
@@ -87,6 +87,15 @@ const EmailButton = styled(Button)`
         width: auto;
     }
 `
+const AdditionalFlex = styled.div`
+    margin-top: 10px;
+    font-size: var(--text-size-xs);
+    line-height: 20px;
+    color: ${(props) => (props.color ? props.color : 'black')};
+    @media ${device.tabletL} {
+        font-size: 1.75rem;
+    }
+`
 const ErrorMessages = styled(Text)`
     font-size: 11px;
     min-height: 16px;
@@ -346,11 +355,30 @@ const ArticleEmailBanner = () => {
                             {localize('Subscribe')}
                         </EmailButton>
                         {submit_status === true && (
-                            <AgreementLabel
-                                isChecked={is_checked}
-                                color="#C2C2C2"
-                                handleChangeCheckbox={handleChange}
-                            />
+                            <>
+                                <AgreementLabel
+                                    isChecked={is_checked}
+                                    handleChangeCheckbox={handleChange}
+                                    color="#C2C2C2"
+                                    link_text="Send me marketing materials too!"
+                                />
+                                <AdditionalFlex color="#C2C2C2">
+                                    <Localize
+                                        fontSize="var(--text-size-xs)"
+                                        translate_text="We respect your privacy and protect your information. Read our <0>Privacy policy</0> to find out more."
+                                        components={[
+                                            <LocalizedLinkText
+                                                key={0}
+                                                type="tnc/security-and-privacy.pdf"
+                                                external="true"
+                                                rel="noopener noreferrer"
+                                                size="14px"
+                                                color="red"
+                                            />,
+                                        ]}
+                                    />
+                                </AdditionalFlex>
+                            </>
                         )}
                     </InputWrapper>
                 </Flex>
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
index a724a53ed40..349ec222ac9 100644
--- a/src/pages/blog/index.js
+++ b/src/pages/blog/index.js
@@ -57,7 +57,7 @@ export const query = graphql`
                     id
                 }
             }
-            videos(limit: 6, sort: "-published_date") {
+            videos(limit: 6, filter: { status: { _eq: "published" } }, sort: "-published_date") {
                 video_title
                 published_date
                 video_description
diff --git a/src/pages/blog/template/index.js b/src/pages/blog/template/index.js
index abb833feb16..e1b095d4c32 100644
--- a/src/pages/blog/template/index.js
+++ b/src/pages/blog/template/index.js
@@ -6,6 +6,7 @@ import { localize, WithIntl } from 'components/localization'
 import Layout from 'components/layout/layout'
 import { SEO, Show, Box, Flex, Container, SectionContainer } from 'components/containers'
 import { Header, Text } from 'components/elements'
+import ArticleEmailBanner from 'pages/academy/blog/components/side-subscription-banner'
 import device from 'themes/device'
 
 const Background = styled.div`
@@ -436,6 +437,7 @@ const PreviewPage = () => {
                                 })}
                             </Flex>
                             <SideCta />
+                            <ArticleEmailBanner />
                         </SideBarContainer>
                     </Show.Desktop>
                     <Flex fd="column" margin="0 auto" ai="center">
@@ -449,6 +451,7 @@ const PreviewPage = () => {
                         <BottomCta />
                         <Show.Mobile>
                             <SideCta />
+                            <ArticleEmailBanner />
                         </Show.Mobile>
                     </Flex>
                 </BodyContainer>

From e481084e1d36f96036ac651e2fef7b87e5c3118e Mon Sep 17 00:00:00 2001
From: Nikolai Berestevich <nikolai.berestevich@regentmarkets.com>
Date: Wed, 1 Sep 2021 09:35:59 +0300
Subject: [PATCH 2/2] nikolai.berestevich/fix/AgreementLabel - localisation

---
 src/components/custom/_agreement-label.js                     | 4 ++--
 .../academy/blog/components/side-subscription-banner/index.js | 2 +-
 src/pages/blog/components/_subscribe.js                       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/custom/_agreement-label.js b/src/components/custom/_agreement-label.js
index abe5d393b48..4eb6ac3ecc3 100644
--- a/src/components/custom/_agreement-label.js
+++ b/src/components/custom/_agreement-label.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Checkbox, LocalizedLinkText } from 'components/elements'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import device from 'themes/device.js'
 
 const CheckboxSpan = styled.span`
@@ -17,7 +17,7 @@ const AgreementLabel = ({
     isChecked,
     color,
     link_path = 'terms_and_conditions',
-    link_text = 'I agree to the <0>terms and conditions</0>',
+    link_text = localize('I agree to the <0>terms and conditions</0>'),
 }) => {
     const handleChange = (event) => {
         handleChangeCheckbox(event)
diff --git a/src/pages/academy/blog/components/side-subscription-banner/index.js b/src/pages/academy/blog/components/side-subscription-banner/index.js
index 636b5491bad..ff8307c2beb 100644
--- a/src/pages/academy/blog/components/side-subscription-banner/index.js
+++ b/src/pages/academy/blog/components/side-subscription-banner/index.js
@@ -360,7 +360,7 @@ const ArticleEmailBanner = () => {
                                     isChecked={is_checked}
                                     handleChangeCheckbox={handleChange}
                                     color="#C2C2C2"
-                                    link_text="Send me marketing materials too!"
+                                    link_text={localize('Send me marketing materials too!')}
                                 />
                                 <AdditionalFlex color="#C2C2C2">
                                     <Localize
diff --git a/src/pages/blog/components/_subscribe.js b/src/pages/blog/components/_subscribe.js
index 06ad27b6dd6..683ff7b8c44 100644
--- a/src/pages/blog/components/_subscribe.js
+++ b/src/pages/blog/components/_subscribe.js
@@ -405,7 +405,7 @@ const Subscribe = () => {
                                 isChecked={is_checked}
                                 handleChangeCheckbox={handleChange}
                                 color="#C2C2C2"
-                                link_text="Send me marketing materials too!"
+                                link_text={localize('Send me marketing materials too!')}
                             />
                             <AdditionalFlex color="#C2C2C2">
                                 <Localize