{"version":3,"sources":["webpack://switch-website/./src/components/channels/ChannelDetailsCarousel.js","webpack://switch-website/./src/images/channels/divider-arrow.png","webpack://switch-website/./src/components/channels/ChannelDetails.js","webpack://switch-website/./src/templates/channel.js","webpack://switch-website/./src/images/geometric-pattern-bg.png"],"names":["StyledButton","colors","ArrowCircleButton","className","invertedDirection","onClick","t","useTranslation","svgCss","css","arrowCss","label","classes","includes","type","defaultProps","sliderCss","StyledSlide","StyledSlideDescription","fonts","breakpoints","images","useState","sliderIndex","setSliderIndex","sliderSettings","infinite","centerMode","variableWidth","speed","swipeToSlide","focusOnSelect","prevArrow","nextArrow","beforeChange","current","next","map","image","i","key","colored_border","G","getImage","localFile","alt","image_alt","style","border","boxShadow","borderRadius","cursor","position","imgStyle","description","StyledChannelDetailsContainer","h6BaseStyle","UL","StyledSectionTitle","P","fontWeights","StyledHeadingImageContainer","Hero","FullWidthContainer","channel","channelPaymentMethodName","payment_method","name","as","Trans","logo","countries","length","H6","paymentMethodName","country","payment_provider","screenshots","ChannelDetailsContentContainer","GeometricPatternBackground","ContentContainer","contactSalesCtaCss","BackButtonContainer","data","location","useContext","ContrastContext","setContrast","navigate","useI18next","channelData","strapiChannel","selectedFilters","state","customizedSchema","getCustomizedFilterSchema","SEO","title","ogTitle","ChannelsHero","filters","setFilters","scrollToId","filtersSchema","id","to","colored","ChannelsList","channels","link","linkText","cssStyles","H2"],"mappings":"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","file":"component---src-templates-channel-js-92d25e31565ad7f6655c.js","sourcesContent":["/** @jsx jsx */\nimport React, {useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {css, jsx} from '@emotion/react';\n\nimport {GatsbyImage, getImage} from 'gatsby-plugin-image';\nimport {useTranslation} from 'gatsby-plugin-react-i18next';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick.css';\nimport 'slick-carousel/slick/slick-theme.css';\n\nimport ArrowSVG from '../../images/clickables/cta_arrow.svg';\nimport DividerArrow from '../../images/channels/divider-arrow.png';\nimport {breakpoints, colors, fonts} from '../../styles/theme';\n\n\n/*\n * Private Elements\n */\nconst StyledButton = styled.button`\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background-color: ${colors.white};\n    box-shadow: 0 2px 7px 0 ${colors.shadowGrey};\n    display: flex;\n    align-content: center;\n    border: 0;\n    padding: 0;\n\n    position: absolute;\n    bottom: -70px;\n\n    &.arrow-prev {\n        right: calc(50vw + 20px);\n    }\n    &.arrow-next {\n        left: calc(50vw + 20px);\n    }\n\n    &.arrow-disabled {\n        display: none;\n    }\n`;\n\nconst ArrowCircleButton = ({className, invertedDirection, onClick}) => {\n    const {t} = useTranslation();\n\n    const svgCss = css`\n        margin: auto;\n        path {\n            stroke: ${colors.darkPurple};\n        }\n    `;\n\n    const invertTransform = css`\n        transform: scale(-1, 1);\n    `;\n\n    const arrowCss = invertedDirection ? [svgCss, invertTransform] : svgCss;\n\n    const label = invertedDirection ? t('Previous') : t('Next');\n\n    // eslint-disable-next-line i18next/no-literal-string\n    let classes = invertedDirection ? 'arrow-prev' : 'arrow-next';\n\n    if (className.includes('slick-disabled')) {\n        classes = `${classes} arrow-disabled`;\n    }\n\n    return (\n        <StyledButton type=\"button\" aria-label={label} className={classes} onClick={onClick}>\n            <ArrowSVG css={arrowCss} />\n        </StyledButton>\n    );\n};\n\nArrowCircleButton.propTypes = {\n    onClick: PropTypes.func,\n    className: PropTypes.string,\n    invertedDirection: PropTypes.bool,\n};\n\nArrowCircleButton.defaultProps = {\n    onClick: () => {},\n    className: '',\n    invertedDirection: false,\n};\n\n\nconst sliderCss = css`\n    .slick-track {\n        display: flex;\n    }\n\n    .slick-slide div  {\n        outline: none !important;\n    }\n`;\n\n\nconst StyledSlide = styled.div`\n    min-width: 200px;\n    padding: 0 20px;\n\n    &.dashed {\n        margin-right: 25px;\n        border-right: 25px solid transparent;\n        border-image: url(${DividerArrow});\n        border-image-slice: 200;\n    }\n\n    @media (min-width: 600px) {\n        min-width: 250px;\n\n        &.dashed {\n            border-image-slice: 100;\n        }\n    }\n\n    @media (min-width: 1000px) {\n        min-width: 300px;\n\n        &.dashed {\n            border-image-slice: 40;\n        }\n    }\n`;\n\n\nconst StyledSlideDescription = styled.div`\n    position: relative;\n    top: 100px;\n    padding-bottom: 160px;\n\n    p {\n        font-family: ${fonts.sansSerif};\n        text-align: center;\n        position: absolute;\n        left: 10%;\n        width: 80%;\n\n        @media (min-width: ${breakpoints.md}) {\n            left: calc(-300px + 50%);\n            width: 600px;\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst ChannelImagesCarousel = ({images}) => {\n    // index of the current slide, to show the description accordingly\n    const [sliderIndex, setSliderIndex] = useState(0);\n\n    const sliderSettings = {\n        infinite: false,\n        centerMode: true,\n        variableWidth: true,\n        speed: 300,\n        swipeToSlide: true,\n        focusOnSelect: true,\n        prevArrow: <ArrowCircleButton invertedDirection />,\n        nextArrow: <ArrowCircleButton />,\n        beforeChange: (current, next) => setSliderIndex(next),\n    };\n\n    return (\n        <div>\n            <Slider {...sliderSettings} css={sliderCss}>\n                {images.map((image, i) => (\n                    <StyledSlide\n                        key={i} // eslint-disable-line react/no-array-index-key\n                        className={\n                            images[i + 1] && images[i + 1].colored_border !== image.colored_border && 'dashed'\n                        }\n                    >\n                        <GatsbyImage\n                            image={getImage(image.image.localFile)}\n                            alt={image.image_alt}\n                            style={{\n                                border: `${image.colored_border ? colors.darkPurple : colors.black} 3px solid`,\n                                boxShadow: `4px 2px 7px 0 ${colors.mediumGrey}`,\n                                borderRadius: '25px',\n                                cursor: 'pointer',\n                                position: 'relative',\n                            }}\n                            imgStyle={{\n                                borderRadius: '25px',\n                            }}\n                        />\n                    </StyledSlide>\n                ))}\n            </Slider>\n            <StyledSlideDescription>\n                <p>{images[sliderIndex].description}</p>\n            </StyledSlideDescription>\n        </div>\n    );\n};\n\nChannelImagesCarousel.propTypes = {\n    images: PropTypes.array.isRequired,\n};\n\nexport default ChannelImagesCarousel;\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAPgCAYAAABakd6nAAAER0lEQVR4AezBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGbnHKAmuIEAvLVt27btJjuze/dq86G2bdu2bdtWJvtfbdu63pS7udT7dor53vuN+27iZHL/TCy4/QzQB723OwH8uKIyJqPZDLjuT28W6AhZIfBQEUK6TFTIYrFsVchdJRshpKWCCF0rG6GsWCyI0I3CQrRwEKFbRIXSvJi/IgTuDtkI5TRPEKG7ZSPUKuYI+qH7RYVaLTeOAfq2VKkvSaQxmdu0J/OuBXo0zwemEdZRFEVRFEVRDBYLGKBnLNIbFosVxIV4plia5H+43HLdwWQjBPRmeaK/3HKdMYSF3GtlIZ74S6/vX6oKdcYXFnLPl4WyjCaWFnq6KtSZTFiIirIQgJ9KOkJPlYUQO9NKR+jxqhDNIN0xXlHqGL8W74fSdmc6C/SYRXo7zWijRFEURVEURZElXf/VYS3S5QbcxxbpnF137Q4ufcy5YXlOnSKtLCuEtE9ZqCe4nXCE3B4VIfA7CgvRrkGEdhUV4ohUhdwe0hHaLjiZ3kc6QltVhdz+wkK0eVnIIB0sKpSi3zgossNkhXKPQbPfSlSoN1QMajN3Eqd9cf4QgB8hURRFURRFURRFURRFUf7OdgtfKIHcLVH3W9pyc6+/fneIPyzT7XYHMUDXlDak6n9Dd+9yy3WH/ENCnAtUu0DkLc39on9IKMueG9mi+6gBIfxTmZwW6QKD7oYa3p7ovX0TE5LIxNo+EJER4lRUA3RcICEjtNpqrw/HO7P9EvR140LLLffc2AbpwUhE3jXgb29UiO+ZGaTnQhn+XtoupjbgLm1MCGBgQY5CROZBWOnZsZIejQlxgrcB+jwicyXXp4RpQKh0TEXfRmSODZO+6xcKzzqQjgxFWC5+IFy/UHhmf1koY9F9YcGvkjBNCXGKqUV3X6SI3gfwiyRMU0J5TlPyTYW+yIB7gVNRE6YpIUSal/NeI/OaR8ovkdCIUJpR2wB91l9n6NrywV0jQnzj1yL1TR34NDFMQKlfKJxTgz8kOkoj7Zz8TANCa6753NAW6cJIffkyzWjNhGlKKM9pNIN0V6TD+4BXDAnTlBBfhbDgBvqbNb0MbT9jwjQlZLNiTr7vE+nwHq/rVotFd/ofWnUY8GDBfRIZCm5cbrlnRkpqAlp+Pk4R+811WZr5dWLNmp9NZHVZy9DDpVH+30EFdl8GMnK5QFw3ApmvUnTriie39d54NfAa5H7pf0xOIvfMuufzXTt3LAAAAAAwyN96FrsKJAAAAADAce44d5w7zh3njnPHOQAAjnPH+cFx7jh3nDvOHwAAOM4d547zgePcce44BwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACOXLs/WG/BC9AAAAAElFTkSuQmCC\"","/** @jsx jsx */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {GatsbyImage, getImage} from 'gatsby-plugin-image';\n\nimport styled from '@emotion/styled';\nimport {jsx} from '@emotion/react';\nimport {Trans} from 'gatsby-plugin-react-i18next';\n\nimport {countries} from '../../helpers/constants/common';\nimport {H6, h6BaseStyle, Hero, P, UL} from '../common/Typography';\nimport {breakpoints, colors, fontWeights} from '../../styles/theme';\nimport ChannelImagesCarousel from './ChannelDetailsCarousel';\n\n\n/*\n * Private Elements\n */\nconst StyledChannelDetailsContainer = styled.div`\n    .payment-container,\n    .provider-container {\n        padding: 56px 20px;\n\n        .description {\n            ${h6BaseStyle};\n            font-weight: normal;\n            margin-bottom: 100px;\n        }\n    }\n\n    .payment-container {\n        background: ${colors.white} linear-gradient(to top, #F0F0FF 0%, #FFFFFF 500px);\n    }\n\n    ${UL} {\n        columns: 2;\n        list-style-type: none;\n        padding: 0;\n        font-size: 14px;\n    }\n  \n    @media (min-width: ${breakpoints.md}) {\n        .payment-container,\n        .provider-container {\n            padding: 80px 110px;\n\n            .description {\n                font-size: 20px;\n            }\n        }\n\n        ${UL} {\n            columns: 5;\n        }\n    }\n`;\n\n\nconst StyledSectionTitle = styled(P)`\n    text-transform: uppercase;\n    font-weight: ${fontWeights.semiBold};\n    color: ${colors.mediumGrey};\n`;\n\n\nconst StyledHeadingImageContainer = styled.div`\n    margin-top: 40px;\n\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n\n    ${Hero} {\n      flex-basis: 80%;\n    }\n\n    .image-container {\n        width: 50px;\n        height: 50px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        margin-top: 54px;\n\n        .image-container {\n            width: 100px;\n            height: 100px;\n        }\n    }\n`;\n\n\nconst FullWidthContainer = styled.div`\n    width: calc(100vw - 10px);\n    margin: 0 0 0 calc(-50vw + 50%);\n`;\n\n\n/*\n * Public Elements\n */\nconst ChannelDetails = ({channel}) => {\n    const channelPaymentMethodName = channel.payment_method.name;\n\n    return (\n        <StyledChannelDetailsContainer>\n\n            <div className=\"payment-container\">\n                <StyledSectionTitle as=\"h2\">\n                    <Trans>Payment Method</Trans>\n                </StyledSectionTitle>\n                <StyledHeadingImageContainer>\n                    <Hero as=\"h3\">{channel.payment_method.name}</Hero>\n                    <div className=\"image-container\">\n                        <GatsbyImage\n                            image={getImage(channel.payment_method.logo.localFile)}\n                            alt={`${channel.payment_method.name} logo`}\n                        />\n                    </div>\n                </StyledHeadingImageContainer>\n\n                <div className=\"row\">\n                    <p className=\"description col-md-10 col-xl-8\">{channel.payment_method.description}</p>\n                </div>\n\n                {channel.payment_method.countries.length > 0 && (\n                    <div>\n                        <H6 as=\"p\">\n                            <Trans>\n                                See where\n                                {' '}\n                                {{paymentMethodName: channelPaymentMethodName}}\n                                {' '}\n                                is available\n                            </Trans>\n                        </H6>\n                        <UL>\n                            {channel.payment_method.countries.map(country => (\n                                <li key={country.name}>{countries[country.name]}</li>\n                            ))}\n                        </UL>\n                    </div>\n                )}\n            </div>\n\n            <div className=\"provider-container\">\n                <StyledSectionTitle as=\"h2\"><Trans>Provider</Trans></StyledSectionTitle>\n                <StyledHeadingImageContainer>\n                    <Hero as=\"h3\">{channel.payment_provider.name}</Hero>\n                    <div className=\"image-container\">\n                        <GatsbyImage\n                            image={getImage(channel.payment_provider.logo.localFile)}\n                            alt={`${channel.payment_provider.name} logo`}\n                        />\n                    </div>\n                </StyledHeadingImageContainer>\n\n                <div className=\"row\">\n                    <p className=\"description col-md-10 col-xl-8\">{channel.payment_provider.description}</p>\n                </div>\n\n                {channel.screenshots.length > 0 && (\n                    <FullWidthContainer>\n                        <Hero as=\"h3\" className=\"text-center mb-5\"><Trans>How it Works</Trans></Hero>\n                        <ChannelImagesCarousel images={channel.screenshots} />\n                    </FullWidthContainer>\n                )}\n\n            </div>\n\n        </StyledChannelDetailsContainer>\n    );\n};\n\nChannelDetails.propTypes = {\n    channel: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default ChannelDetails;\n","/** @jsx jsx */\nimport React, {useContext} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {css, jsx} from '@emotion/react';\nimport {graphql} from 'gatsby';\nimport {Trans, useTranslation, useI18next} from 'gatsby-plugin-react-i18next';\n\nimport ChannelsHero from '../components/channels/ChannelsHero';\nimport ChannelsList from '../components/channels/ChannelsList';\nimport ChannelDetails from '../components/channels/ChannelDetails';\nimport {CTA, EndOfPageCTA} from '../components/common/Clickables';\nimport SEO from '../components/common/SEO';\nimport {breakpoints, colors, ContentContainer} from '../styles/theme';\n\nimport getCustomizedFilterSchema from '../helpers/channels';\nimport GeometricPatternBackground from '../images/geometric-pattern-bg.png';\nimport {H2} from '../components/common/Typography';\nimport {ContrastContext} from '../helpers/context';\n\n\n/*\n * Private Elements\n */\n\n// Channels\nconst ChannelDetailsContentContainer = styled.div`\n    padding: 40px 20px 250px;\n    background: linear-gradient(50deg, ${colors.transparent} 0%, ${colors.lightGrey} 796px),\n                ${colors.lightGrey} repeat-x left bottom/auto 796px url(${GeometricPatternBackground});\n\n    @media (min-width: 885px) {\n        padding: 20px 60px 200px;\n    }\n\n    ${ContentContainer} {\n        @media (max-width: 885px) {\n            padding-left: 0;\n            padding-right: 0;\n        }\n    }\n\n    .channel-entry {\n        &:hover {\n            cursor: initial;\n            box-shadow: none;\n        }\n    }\n`;\n\n\nconst contactSalesCtaCss = css`\n    position: relative;\n    top: -250px;\n    height: 0;\n\n    @media (min-width: ${breakpoints.md}) {\n        top: -145px;\n    }\n\n    .cta-bottom-background {\n        height: 100px;\n    }\n`;\n\n\n// Back button\nconst BackButtonContainer = styled.span`\n    @media (max-width: 885px) {\n        display: none;\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst ChannelPage = ({data, location}) => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n    const {navigate} = useI18next();\n\n    // Get the channel data\n    const channelData = [data.strapiChannel];\n\n    // Get/set the selected filters, if any\n    const selectedFilters = location.state?.selectedFilters || {};\n\n    // Process the channels data\n    const customizedSchema = getCustomizedFilterSchema(channelData);\n\n    const paymentMethodName = channelData[0].payment_method.name;\n\n    return (\n        <>\n            <SEO\n                title={t('{{paymentMethodName}}', {paymentMethodName})}\n                ogTitle={t('Accept {{paymentMethodName}} Payments', {paymentMethodName})}\n                description={t('Enable {{paymentMethodName}} automatically. Switch payment methods and providers on '\n                    + 'the spot through one single integration.', {paymentMethodName})}\n                image=\"/website/metatags/channels.png\"\n            />\n\n            <ChannelsHero\n                filters={selectedFilters}\n                setFilters={filters => {\n                    navigate(\n                        '/channels',\n                        {state: {selectedFilters: {...selectedFilters, ...filters}, scrollToId: 'filters'}},\n                    );\n                }}\n                filtersSchema={customizedSchema}\n            />\n\n            <ChannelDetailsContentContainer id=\"list\">\n                <ContentContainer>\n                    <BackButtonContainer>\n                        {/* eslint-disable-next-line i18next/no-literal-string */}\n                        <CTA to=\"/channels\" state={{selectedFilters, scrollToId: 'list'}} colored invertedDirection>\n                            <Trans>Back</Trans>\n                        </CTA>\n                    </BackButtonContainer>\n                    <ChannelsList channels={channelData} />\n                    <ChannelDetails channel={channelData[0]} />\n                </ContentContainer>\n            </ChannelDetailsContentContainer>\n\n            <EndOfPageCTA link=\"/about/contact-sales\" linkText={t('Contact Sales')} cssStyles={contactSalesCtaCss}>\n                <H2><Trans>Request this integration.</Trans></H2>\n            </EndOfPageCTA>\n        </>\n    );\n};\n\nChannelPage.propTypes = {\n    data: PropTypes.object.isRequired,\n    location: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default ChannelPage;\nexport const query = graphql`\n    query($channelId: String!) {\n        strapiChannel(strapiId: { eq: $channelId }) {\n            id: strapiId\n            merchant_industry\n            status\n            region\n            language\n            payment_provider {\n                name\n                type\n                description\n                logo {\n                    localFile {\n                        childImageSharp {\n                            gatsbyImageData(\n                                placeholder: TRACED_SVG\n                                width: 100\n                            )\n                        }\n                    }\n                }\n                countries {\n                    name: name_slug\n                }\n            }\n            payment_method {\n                name\n                type\n                description\n                logo {\n                    localFile {\n                        childImageSharp {\n                            gatsbyImageData(\n                                placeholder: TRACED_SVG\n                                width: 100\n                            )\n                        }\n                    }\n                }\n                countries {\n                    name: name_slug\n                }\n            }\n            screenshots {\n                description\n                image {\n                    localFile {\n                        childImageSharp {\n                            gatsbyImageData(\n                                placeholder: BLURRED\n                                width: 260\n                            )\n                        }\n                    }\n                }\n                colored_border\n                image_alt\n            }\n        }\n    }\n`;\n","export default __webpack_public_path__ + \"static/geometric-pattern-bg-6719d160374d5b4c8e751921b76516bd.png\";"],"sourceRoot":""}