{"version":3,"sources":["webpack://switch-website/./src/images/product/terminal/omnichannel-background.png","webpack://switch-website/./src/pages/product/terminal.js"],"names":["EmbraceOmnichannelContainer","colors","OmnichannelBackground","ContentContainer","Hero","StyledFeaturesContainer","breakpoints","StyledTerminalFeatureCard","Link","P","fontWeights","TerminalFeatureCard","image","title","content","to","useState","linkIsHovered","setLinkIsHovered","className","onMouseEnter","onMouseLeave","P2","classNames","colored","StyledComingSoonCard","ComingSoonCard","Trans","FeaturesContainer","t","useTranslation","processingCardContent","dynamicRoutingCardContent","riskCardContent","vaultCardContent","dynamicFormsCardContent","reconciliationCardContent","analyticsCardContent","omnichannelCardContent","S","src","placeholder","alt","AnimatedBackground","H4","height","useContext","ContrastContext","setContrast","section","hero","description","loading","mobileImage","SEO","ogTitle","ProductHero","sectionStr","videoUrl","ProductPageContainer"],"mappings":"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","file":"component---src-pages-product-terminal-js-3b25aeb4adc8ad766ff1.js","sourcesContent":["export default __webpack_public_path__ + \"static/omnichannel-background-678c65742bd8feca6a93882d2459db87.png\";","import React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {StaticImage} from 'gatsby-plugin-image';\n\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\nimport styled from '@emotion/styled';\n\nimport SEO from '../../components/common/SEO';\nimport ProductHero from '../../components/common/ProductHero';\nimport ProductPageContainer from '../../components/common/ProductPageContainer';\nimport {H4, Hero, Link, P, P2} from '../../components/common/Typography';\nimport {breakpoints, colors, ContentContainer, fontWeights} from '../../styles/theme';\nimport {CTAArrow} from '../../components/common/Clickables';\nimport {ContrastContext} from '../../helpers/context';\nimport OmnichannelBackground from '../../images/product/terminal/omnichannel-background.png';\nimport AnimatedBackground from '../../components/common/AnimatedBackground';\n\n\n\n/*\n * Constants\n */\n/* eslint-disable-next-line i18next/no-literal-string */\nconst videoUrl = 'https://player.vimeo.com/video/548850274';\n\n\n/*\n * Private Elements\n */\nconst EmbraceOmnichannelContainer = styled.div`\n    padding-top: 150px;\n    padding-bottom: 350px;\n    background: ${colors.transparent} url(${OmnichannelBackground}) no-repeat scroll right top;\n    background-size: cover;\n\n    ${ContentContainer} {\n        text-align: center;\n        max-width: 850px;\n        margin: auto;\n\n        ${Hero} {\n            margin-bottom: 25px;\n        }\n    }\n`;\n\nconst StyledFeaturesContainer = styled.div`\n    color: ${colors.white};\n    position: relative;\n    margin-top: -300px;\n\n    .image {\n        position: relative;\n        width: 100%;\n        padding-left: 25px;\n        padding-right: 25px;\n        z-index: 5;\n    }\n\n    .content-wrapper {\n        clip-path: polygon(0 150px, 100% 0, 100% 100%, 0% 100%);\n        // Why 50vw (aka 50% the view width)? \n        // Because the image before the slant is 100% view width, its height is auto based on that.\n        // We want to cross the slant in the middle of the height of the image: 50% of 100vw = 50vw\n        margin-top: -50vw;\n        padding-top: calc(50vw + 2rem);\n\n        ${ContentContainer} {\n            padding-bottom: 100px;\n\n            .title {\n                margin-bottom: 35px;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        .image {\n            width: 60%;\n            margin-left: auto;\n            margin-right: auto;\n            padding-left: 0;\n            padding-right: 0;\n        }\n\n        .content-wrapper {\n            width: 100%;\n            padding-left: 65px;\n            padding-right: 65px;\n            clip-path: polygon(0 200px, 100% 0, 100% 100%, 0% 100%);\n            margin-top: -30vw;\n            padding-top: calc(30vw + 2rem);\n\n            ${ContentContainer} {\n                margin-top: 20px;\n\n                .title {\n                    text-align: center;\n                    max-width: 700px;\n                    margin-left: auto;\n                    margin-right: auto;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        .content-wrapper {\n            clip-path: polygon(0 300px, 100% 0, 100% 100%, 0% 100%);\n        }\n    }\n`;\n\nconst StyledTerminalFeatureCard = styled(Link)`\n    color: ${colors.white};\n    background-color: ${colors.black};\n    box-shadow: 0 2px 10px 0 ${colors.black};\n    text-align: left;\n    margin: 15px 0;\n    padding: 20px;\n    min-height: 250px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n\n    &:hover,\n    &:focus {\n        color: ${colors.white};\n        text-decoration: none;\n    }\n\n    .logo {\n        left: 0;\n        height: 50px;\n        width: 50px;\n        margin: 0 0 15px 0;\n    }\n\n    .link {\n        text-align: right;\n    }\n\n    ${P} {\n        text-transform: uppercase;\n        font-weight: ${fontWeights.bold};\n        letter-spacing: 3px;\n        margin-bottom: 10px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        min-height: 300px;\n        margin: 20px;\n        height: calc(100% - 40px);  // 40px is the total padding (top + bottom)\n    }\n`;\n\nconst TerminalFeatureCard = ({image, title, content, to}) => {\n    const [linkIsHovered, setLinkIsHovered] = useState(false);\n\n    // eslint-disable-next-line i18next/no-literal-string\n    const className = linkIsHovered ? 'hover' : '';\n\n    return (\n        <StyledTerminalFeatureCard\n            to={to}\n            onMouseEnter={() => setLinkIsHovered(true)}\n            onMouseLeave={() => setLinkIsHovered(false)}\n        >\n            <div className=\"content\">\n                <div className=\"logo\">{image}</div>\n                <P>{title}</P>\n                <P2>{content}</P2>\n            </div>\n            <div className=\"link\">\n                <CTAArrow classNames={className} colored />\n            </div>\n        </StyledTerminalFeatureCard>\n    );\n};\n\nTerminalFeatureCard.propTypes = {\n    image: PropTypes.node.isRequired,\n    title: PropTypes.string.isRequired,\n    content: PropTypes.string.isRequired,\n    to: PropTypes.string.isRequired,\n};\n\nconst StyledComingSoonCard = styled.div`\n    color: ${colors.white};\n    background-color: ${colors.transparent};\n    box-shadow: inset 6px 2px 40px 0 rgba(0, 0, 0, 0.5);\n    text-align: center;\n    margin: 15px 0;\n    padding: 20px;\n    min-height: 250px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    border: 3px dashed ${colors.black};\n\n    ${P} {\n        text-transform: uppercase;\n        font-weight: ${fontWeights.semiBold};\n        letter-spacing: 3px;\n        margin-bottom: 10px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        min-height: 300px;\n        margin: 20px;\n        height: calc(100% - 40px);  // 40px is the total padding (top + bottom)\n    }\n`;\n\nconst ComingSoonCard = () => (\n    <StyledComingSoonCard>\n        <P><Trans>Coming soon</Trans></P>\n    </StyledComingSoonCard>\n);\n\nconst FeaturesContainer = () => {\n    const {t} = useTranslation();\n\n    // Cards content\n    const processingCardContent = t('Access 50+ local payment methods and local payment processors — online and '\n        + 'in-store — to provide customers a more convenient shopping experience while keeping a personalized checkout '\n        + 'process.');\n    const dynamicRoutingCardContent = t('Deploy additional payment methods without any changes in the code. By not '\n        + 'having to rely on the development department anymore, the go-to-market accelerates.');\n    const riskCardContent = t('Set precise rules to flag, block, or dynamically apply 3D Secure to certain '\n        + 'transactions. Even on in-store payments.');\n    const vaultCardContent = t('With the Switch ability to create vaults, you can securely store and tokenize payment '\n        + 'details and customers’ data. All while being compliant with the latest data regulations across the globe, '\n        + 'including GDPR.');\n    const dynamicFormsCardContent = t('Deploy additional payment methods without any changes in the code. By not having'\n        + ' to rely on the development department anymore,  the go-to-market accelerates.');\n    const reconciliationCardContent = t('Identify fee mismatches and reconciliation errors across multiple payment '\n        + 'providers, bank accounts, and platforms, including your in-store payments.');\n    const analyticsCardContent = t('Access all data from your payments operation right on the Switch Dashboard. Our '\n        + 'system collects all transaction data and makes it searchable. This way you can follow your payments '\n        + 'lifecycle and find areas for improvement.');\n    const omnichannelCardContent = t('Manage your entire terminal fleet. Register any new terminal, monitor its '\n        + 'activity, and manage all configurations remotely on the dashboard.');\n\n    return (\n        <StyledFeaturesContainer>\n            <div className=\"image\">\n                <StaticImage\n                    src=\"../../images/product/terminal/omnichannel.png\"\n                    placeholder=\"blurred\"\n                    alt=\"\"\n                />\n            </div>\n\n            <AnimatedBackground className=\"content-wrapper\">\n                <ContentContainer>\n                    <div className=\"title\">\n                        <H4>\n                            <Trans>All our features are available for both online and in-store payments.</Trans>\n                        </H4>\n                    </div>\n\n                    <div className=\"row no-gutters content\">\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/processing/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Processing')}\n                                content={processingCardContent}\n                                to=\"/product/processing\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/dynamic-routing/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Dynamic Routing')}\n                                content={dynamicRoutingCardContent}\n                                to=\"/product/dynamic-routing\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/risk/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Risk')}\n                                content={riskCardContent}\n                                to=\"/product/risk\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/vault/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Vault')}\n                                content={vaultCardContent}\n                                to=\"/product/vault\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/dynamic-forms.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Dynamic Forms')}\n                                content={dynamicFormsCardContent}\n                                to=\"https://switchpayments.com/docs/dynamic-forms\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/reconciliation/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Reconciliation')}\n                                content={reconciliationCardContent}\n                                to=\"/product/reconciliation\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/analytics/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Analytics')}\n                                content={analyticsCardContent}\n                                to=\"/product/analytics\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <TerminalFeatureCard\n                                image={(\n                                    <StaticImage\n                                        src=\"../../images/product/terminal/logo-mobile.png\"\n                                        placeholder=\"blurred\"\n                                        height={50}\n                                        alt=\"\"\n                                    />\n                                )}\n                                title={t('Omnichannel')}\n                                content={omnichannelCardContent}\n                                to=\"https://switchpayments.com/docs/terminal\"\n                            />\n                        </div>\n                        <div className=\"col-12 col-md-6 col-lg-4\">\n                            <ComingSoonCard />\n                        </div>\n                    </div>\n                </ContentContainer>\n            </AnimatedBackground>\n        </StyledFeaturesContainer>\n    );\n};\n\n\n/*\n * Public Elements\n */\nconst TerminalPage = () => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n\n    const section = t('Terminal');\n    // eslint-disable-next-line i18next/no-literal-string\n    const sectionStr = 'Terminal';\n    const hero = t('Unify your payments stack across every channel.');\n    const description = t(\n        'Manage your entire terminal fleet and e-commerce operations through a single infrastructure.',\n    );\n    const image = (\n        <StaticImage src=\"../../images/product/terminal/logo.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n    const mobileImage = (\n        <StaticImage src=\"../../images/product/terminal/logo-mobile.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n\n    return (\n        <>\n            <SEO\n                title={section}\n                ogTitle={t('Cloud-based POS Terminal Application - Switch')}\n                description={t('Leverage your payment stack for a truly omnichannel experience. Choose which terminal '\n                    + 'vendors, acquirers, and acquirer processors you want to work with.')}\n                image=\"/website/metatags/terminal.png\"\n            />\n\n            <ProductHero\n                section={section}\n                sectionStr={sectionStr}\n                hero={hero}\n                description={description}\n                image={image}\n                mobileImage={mobileImage}\n                videoUrl={videoUrl}\n            />\n\n            <ProductPageContainer>\n                <EmbraceOmnichannelContainer>\n                    <ContentContainer>\n                        <Hero><Trans>Embrace a truly omnichannel experience.</Trans></Hero>\n                    </ContentContainer>\n                </EmbraceOmnichannelContainer>\n\n                <FeaturesContainer />\n            </ProductPageContainer>\n        </>\n    );\n};\n\n\n/*\n * Exports\n */\nexport default TerminalPage;\n"],"sourceRoot":""}