Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

nikolai.berestevich/feat/add subscribe-banner on single article page #2054

Merged
2 commits merged into from
Sep 2, 2021
Merged

nikolai.berestevich/feat/add subscribe-banner on single article page #2054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56dfc23
nikolai.berestevich/feat/add subscribe-banner on single article page
Aug 27, 2021
e481084
nikolai.berestevich/fix/AgreementLabel - localisation
Sep 1, 2021
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
4 changes: 2 additions & 2 deletions src/components/custom/_agreement-label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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)
Expand Down
64 changes: 0 additions & 64 deletions src/pages/academy/blog/components/side-subscription-banner/_agreement-label.js
View file
Open in desktop

This file was deleted.

44 changes: 36 additions & 8 deletions src/pages/academy/blog/components/side-subscription-banner/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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={localize('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>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/components/_subscribe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/pages/blog/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions src/pages/blog/template/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -436,6 +437,7 @@ const PreviewPage = () => {
})}
</Flex>
<SideCta />
<ArticleEmailBanner />
</SideBarContainer>
</Show.Desktop>
<Flex fd="column" margin="0 auto" ai="center">
Expand All @@ -449,6 +451,7 @@ const PreviewPage = () => {
<BottomCta />
<Show.Mobile>
<SideCta />
<ArticleEmailBanner />
</Show.Mobile>
</Flex>
</BodyContainer>
Expand Down