{"version":3,"sources":["webpack://switch-website/./src/pages/product/analytics.js"],"names":["balloonColor","RealTimeReportingContainer","colors","ContentContainer","H1","H5","fontWeights","breakpoints","ManagePaymentsOperationsContainer","Hero","H6","CTALink","PaymentsOperationsDesktopBackground","StyledNoiseBackground","NoiseBackgroundImage","NoiseBackground","children","className","JsonBackground","JsonBackgroundImage","ApiEventsContainer","YouAskWeAnswerContainer","BalloonContent","propTypes","PropTypes","StyledTransactionCard","H6Mono","fonts","TransactionDataItem","TransactionCard","image","title","content","contentData","map","item","key","TransactionBalloonItem","GrowWithoutWorriesContainer","useContext","ContrastContext","setContrast","t","useTranslation","section","hero","description","S","src","placeholder","loading","alt","mobileImage","ogTitle","sectionStr","videoUrl","Trans","to","target","colored","controls","autoPlay","muted","loop","JSONVideo","type","height"],"mappings":"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","file":"860b02fe-e207ce354b25243f6c65.js","sourcesContent":["import React, {useContext} 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 {ContrastContext} from '../../helpers/context';\nimport SEO from '../../components/common/SEO';\nimport ProductHero from '../../components/common/ProductHero';\nimport ProductPageContainer from '../../components/common/ProductPageContainer';\nimport AnimatedBackground from '../../components/common/AnimatedBackground';\nimport {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport {CTALink, H1, H5, H6, H6Mono, Hero} from '../../components/common/Typography';\nimport {CTA} from '../../components/common/Clickables';\nimport TransactionDataItem from '../../components/product/TransactionDataItem';\nimport PaymentsOperationsDesktopBackground from '../../images/product/analytics/payments-operations.png';\nimport NoiseBackgroundImage from '../../images/product/analytics/noise.png';\nimport JsonBackgroundImage from '../../images/product/analytics/json-background.png';\nimport RealTimeReporting from '../../images/product/analytics/realtime-reporting.svg';\nimport JSONVideo from '../../images/json.mp4';\n\n\n/*\n * Constants\n */\n/* eslint-disable i18next/no-literal-string */\nconst balloonColor = '#F7F6F6';\nconst videoUrl = null;\n\n\n/*\n * Private Elements\n */\nconst RealTimeReportingContainer = styled.div`\n    position: relative;\n    color: ${colors.white};\n\n    .animated-background {\n        padding-top: 70px;\n        padding-bottom: 70px;\n\n        ${ContentContainer} {\n            ${H1} {\n                margin-bottom: 25px;\n            }\n\n            ${H5} {\n                font-weight: ${fontWeights.regular};\n                margin-bottom: 50px;\n            }\n\n            .graphic {\n                margin-top: 60px;\n\n                svg {\n                    width: 100%;\n                    height: auto;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        .animated-background {\n            padding-top: 150px;\n            padding-bottom: 150px;\n\n            ${ContentContainer} {\n                .graphic {\n                    margin-top: 20px;\n                }\n            }\n        }\n    }\n`;\n\nconst ManagePaymentsOperationsContainer = styled.div`\n    ${ContentContainer} {\n        text-align: center;\n        max-width: 675px;\n        margin: auto;\n\n        ${Hero} {\n            margin-bottom: 25px;\n        }\n\n        ${H6} {\n            font-weight: ${fontWeights.regular};\n            margin-bottom: 50px;\n        }\n\n        ${CTALink} {\n            width: max-content;\n            margin: auto;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        height: 100vh;\n        display: flex;\n        background: ${colors.white} url(${PaymentsOperationsDesktopBackground}) no-repeat scroll center center;\n        background-size: cover;\n\n        .mobile-background {\n            display: none;\n        }\n    }\n`;\n\nconst StyledNoiseBackground = styled.div`\n    position: relative;\n    color: ${colors.white};\n    width: 100%;\n    padding-top: 50px;\n    padding-bottom: 50px;\n    background: repeat url(${NoiseBackgroundImage}), linear-gradient(45deg, #000000 0%, ${colors.darkPurple} 250%);\n\n    @media (min-width: ${breakpoints.md}) {\n        padding-top: 7%;\n        padding-bottom: 7%;\n    }\n`;\n\nconst NoiseBackground = ({children}) => (\n    <StyledNoiseBackground className=\"noise-background\">\n        {children}\n    </StyledNoiseBackground>\n);\n\nNoiseBackground.propTypes = {\n    children: PropTypes.node.isRequired,\n};\n\nconst JsonBackground = styled.div`\n    position: relative;\n    color: ${colors.white};\n    width: 100%;\n    background: ${colors.transparent} url(${JsonBackgroundImage}) no-repeat scroll center center;\n    background-size: cover;\n`;\n\nconst ApiEventsContainer = styled.div`\n    position: relative;\n\n    .noise-background {\n        width: calc(100% - 25px);\n        z-index: 1;\n\n        ${H1} {\n            margin-bottom: 25px;\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.semiLight};\n        }\n    }\n\n    ${JsonBackground} {\n        width: calc(100% - 25px);\n        left: 25px;\n        padding: 70px 25px 40px 25px;\n        top: -50px;\n\n        & > {\n            svg {\n                width: 100%;\n                height: auto;\n            }\n        }\n\n        .content {\n            margin-top: 30px;\n        }\n\n        video {\n            width: 100%;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        .noise-background {\n            position: absolute;\n            left: 0;\n            bottom: -35px;\n            width: 50%;\n        }\n\n        ${JsonBackground} {\n            width: 65%;\n            margin-left: auto;\n            margin-right: 0;\n            padding: 40px 5% 40px 20%;\n            top: 0;\n            left: unset;\n\n            .content {\n                margin-right: 0;\n                margin-top: 15px;\n            }\n        }\n    }\n`;\n\nconst YouAskWeAnswerContainer = styled.div`\n    ${ContentContainer} {\n        padding: 25px;\n\n        ${Hero} {\n            text-align: center;\n            margin-bottom: 20px;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            padding: 100px 65px 50px 65px;\n\n            ${Hero} {\n                margin-bottom: 30px;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            padding: 180px 65px 120px 65px;\n\n            ${Hero} {\n                margin-bottom: 80px;\n            }\n        }\n    }\n`;\n\nconst BalloonContent = styled.div`\n    position: relative;\n    padding: 30px;\n    background: ${balloonColor};\n    border-radius: 10px;\n    box-shadow: -5px 9px 12px 0 rgba(81, 81, 81, 0.17);\n\n    &:after {\n        content: '';\n        position: absolute;\n        bottom: -15px;\n        right: 0;\n\n        border-width: 20px 0 0 20px; /* vary these values to change the angle of the vertex */\n        border-style: solid;\n        border-color: ${balloonColor} transparent;\n    }\n`;\n\nBalloonContent.propTypes = {\n    children: PropTypes.node.isRequired,\n};\n\nconst StyledTransactionCard = styled.div`\n    display: flex;\n    flex-direction: column;\n    text-align: left;\n    height: 100%;\n    padding: 30px 15px 30px;\n\n    ${H6Mono} {\n        margin-bottom: 20px;\n    }\n\n    ${BalloonContent} {\n        margin-bottom: 20px;\n    }\n  \n    .image {\n        height: 60px;\n        margin-left: 0;\n        margin-right: auto;\n        margin-bottom: 20px;\n    }\n\n    .content {\n        height: 100%;\n        font-family: ${fonts.sansSerif};\n        font-weight: ${fontWeights.semiLight};\n        padding-top: 5px;\n        padding-bottom: 10px;\n        margin-left: 0;\n        margin-right: auto;\n\n        ${TransactionDataItem} {\n            margin-left: 0;\n            background-color: ${balloonColor};\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 65px 15px 50px;\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        padding: 50px 20px 25px;\n    }\n`;\n\nconst TransactionCard = ({image, title, content, children}) => {\n    const contentData = content.map(item => <TransactionDataItem key={item}>{item}</TransactionDataItem>);\n\n    return (\n        <StyledTransactionCard>\n            <div className=\"image\">\n                {image}\n            </div>\n\n            <H6Mono>{title}</H6Mono>\n\n            <BalloonContent>{children}</BalloonContent>\n\n            <div className=\"content\">\n                {contentData}\n            </div>\n        </StyledTransactionCard>\n    );\n};\n\nTransactionCard.propTypes = {\n    image: PropTypes.object.isRequired,\n    title: PropTypes.string.isRequired,\n    content: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,\n    children: PropTypes.node.isRequired,\n};\n\nconst TransactionBalloonItem = styled(TransactionDataItem)`\n    display: inline;\n    color: ${colors.white};\n    text-transform: uppercase;\n    background: linear-gradient(180deg, #8286ED, ${colors.darkPurple});\n`;\n\nconst GrowWithoutWorriesContainer = styled.div`\n    padding-top: 20px;\n    padding-bottom: 100px;\n    overflow: hidden;\n\n    ${ContentContainer} {\n        .wrapper {\n            position: relative;\n\n            ${H1} {\n                margin-bottom: 25px;\n            }\n\n            ${H5} {\n                font-weight: ${fontWeights.regular};\n                margin-bottom: 60px;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            .wrapper {\n                ${H5} {\n                    margin-bottom: 0;\n                }\n\n                .content {\n                    display: flex;\n                    flex-direction: column;\n                    justify-content: center;\n                    position: absolute;\n                    margin-left: 65px;\n                    width: 45%;\n                    height: 100%;\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            .wrapper {\n                .content {\n                    padding-left: 7%;\n                }\n            }\n        }\n    }\n\n    @media (max-width: ${breakpoints.md}) {\n        .tetris {\n            position: relative;\n\n            .gatsby-image-wrapper {\n                position: absolute;\n                top: 0;\n                right: -25px;\n            }\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst AnalyticsPage = () => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n\n    const section = t('Analytics');\n    // eslint-disable-next-line i18next/no-literal-string\n    const sectionStr = 'Analytics';\n    const hero = t('Turn big data into valuable insights.');\n    const description = t('Our platform transforms big data into consumable information, generating valuable insights '\n        + 'that empower payment managers to make better decisions.');\n    const image = (\n        <StaticImage src=\"../../images/product/analytics/logo.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n    const mobileImage = (\n        <StaticImage\n            src=\"../../images/product/analytics/logo-mobile.png\"\n            placeholder=\"none\"\n            loading=\"eager\"\n            alt=\"\"\n        />\n    );\n\n    /* eslint-disable i18next/no-literal-string */\n    const feesTransactionCardContent = [':fixed_rate:', ':variable_rate:', ':processor:', ':interchange_fee:'];\n    const settlementsTransactionCardContent = [':batch_id:', ':processing_date:', ':payment_id:', ':dispute_id:'];\n    const declinesTransactionCardContent = [':failure_description:', ':charge_type:', ':brand:'];\n    const disputesTransactionCardContent = [':dispute_code:', ':charge_type:', ':issuing_country:'];\n    /* eslint-enable i18next/no-literal-string */\n\n    return (\n        <>\n            <SEO\n                title={section}\n                ogTitle={t('Payment Analytics in Real Time - Switch')}\n                description={t('Turn payment data into valuable insights and empower your payment managers to make '\n                    + 'better decisions. Follow your payments lifecycle and find areas for improvement.')}\n                image=\"/website/metatags/analytics.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                <RealTimeReportingContainer className=\"product-shadow\">\n                    <AnimatedBackground>\n                        <ContentContainer>\n                            <div className=\"row no-gutters\">\n                                <div className=\"col-12 col-md-4 offset-md-1\">\n                                    <H1><Trans>Real-time reporting at your fingertips.</Trans></H1>\n\n                                    <H5>\n                                        <Trans>\n                                            Access all data from your payments operation right on the Switch Dashboard.\n                                            Our system aggregates all transaction data and makes it searchable. This way\n                                            you can follow your payments lifecycle and find areas for improvement.\n                                        </Trans>\n                                    </H5>\n\n                                    <CTA to=\"https://switchpayments.com/docs/analytics\" target=\"_blank\">\n                                        <Trans>Learn more about this API</Trans>\n                                    </CTA>\n                                </div>\n                                <div className=\"col-12 col-md-5 offset-md-1 graphic\">\n                                    <RealTimeReporting />\n                                </div>\n                            </div>\n                        </ContentContainer>\n                    </AnimatedBackground>\n                </RealTimeReportingContainer>\n\n                <ManagePaymentsOperationsContainer>\n                    <div className=\"mobile-background\">\n                        <StaticImage\n                            src=\"../../images/product/analytics/payments-operations-mobile-top.png\"\n                            placeholder=\"tracedSVG\"\n                            alt=\"\"\n                        />\n                    </div>\n\n                    <ContentContainer>\n                        <Hero><Trans>Manage your payments operations efficiently.</Trans></Hero>\n\n                        <H6>\n                            <Trans>\n                                Building tools to measure payment operations is a costly and time-consuming investment.\n                                We have developed a web application that offers insightful analytics and actionable\n                                tasks on every transaction.\n                            </Trans>\n                        </H6>\n\n                        <CTA to=\"https://switchpayments.com/docs/dashboard\" target=\"_blank\" colored>\n                            <Trans>Learn more about our dashboard</Trans>\n                        </CTA>\n                    </ContentContainer>\n\n                    <div className=\"mobile-background\">\n                        <StaticImage\n                            src=\"../../images/product/analytics/payments-operations-mobile-bottom.png\"\n                            placeholder=\"tracedSVG\"\n                            alt=\"\"\n                        />\n                    </div>\n                </ManagePaymentsOperationsContainer>\n\n                <ApiEventsContainer>\n                    <NoiseBackground>\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-10 offset-1 col-md-8 offset-md-2\">\n                                <H1><Trans>Process and manage multiple API Events.</Trans></H1>\n\n                                <H5>\n                                    <Trans>\n                                        Switch reports all transaction lifecycle events through HTTP callbacks to\n                                        predefined URLs, also known as webhooks, enabling the development of automated\n                                        workflows in real-time.\n                                    </Trans>\n                                </H5>\n                            </div>\n                        </div>\n                    </NoiseBackground>\n\n                    <JsonBackground>\n                        <video controls={false} autoPlay muted loop>\n                            <source src={JSONVideo} type=\"video/mp4\" />\n                        </video>\n\n                        <div className=\"content\">\n                            <CTA to=\"https://switchpayments.com/docs/events\" target=\"_blank\">\n                                <Trans>Learn more about our API</Trans>\n                            </CTA>\n                        </div>\n                    </JsonBackground>\n                </ApiEventsContainer>\n\n                <YouAskWeAnswerContainer>\n                    <ContentContainer>\n                        <Hero><Trans>You ask, we reply.</Trans></Hero>\n\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-6 col-lg-3\">\n                                <TransactionCard\n                                    title={t('Fees')}\n                                    image={(\n                                        <StaticImage\n                                            src=\"../../images/product/analytics/fees.png\"\n                                            placeholder=\"tracedSVG\"\n                                            height={60}\n                                            alt=\"\"\n                                        />\n                                    )}\n                                    content={feesTransactionCardContent}\n                                >\n                                    <H5>\n                                        <Trans>\n                                            What were my processing fees per\n                                            {' '}\n                                            <TransactionBalloonItem>provider</TransactionBalloonItem>\n                                            ?\n                                        </Trans>\n                                    </H5>\n                                </TransactionCard>\n                            </div>\n                            <div className=\"col-12 col-md-6 col-lg-3\">\n                                <TransactionCard\n                                    title={t('Settlements')}\n                                    image={(\n                                        <StaticImage\n                                            src=\"../../images/product/analytics/settlements.png\"\n                                            placeholder=\"tracedSVG\"\n                                            height={60}\n                                            alt=\"\"\n                                        />\n                                    )}\n                                    content={settlementsTransactionCardContent}\n                                >\n                                    <H5>\n                                        <Trans>\n                                            What is my outstanding balance per\n                                            {' '}\n                                            <TransactionBalloonItem>currency</TransactionBalloonItem>\n                                            ?\n                                        </Trans>\n                                    </H5>\n                                </TransactionCard>\n                            </div>\n                            <div className=\"col-12 col-md-6 col-lg-3\">\n                                <TransactionCard\n                                    title={t('Declines')}\n                                    image={(\n                                        <StaticImage\n                                            src=\"../../images/product/analytics/declines.png\"\n                                            placeholder=\"tracedSVG\"\n                                            height={60}\n                                            alt=\"\"\n                                        />\n                                    )}\n                                    content={declinesTransactionCardContent}\n                                >\n                                    <H5>\n                                        <Trans>\n                                            What is my acceptance rate per\n                                            {' '}\n                                            <TransactionBalloonItem>date</TransactionBalloonItem>\n                                            ?\n                                        </Trans>\n                                    </H5>\n                                </TransactionCard>\n                            </div>\n                            <div className=\"col-12 col-md-6 col-lg-3\">\n                                <TransactionCard\n                                    title={t('Disputes')}\n                                    image={(\n                                        <StaticImage\n                                            src=\"../../images/product/analytics/disputes.png\"\n                                            placeholder=\"tracedSVG\"\n                                            height={60}\n                                            alt=\"\"\n                                        />\n                                    )}\n                                    content={disputesTransactionCardContent}\n                                >\n                                    <H5>\n                                        <Trans>\n                                            What is my chargeback rate per\n                                            {' '}\n                                            <TransactionBalloonItem>country</TransactionBalloonItem>\n                                            ?\n                                        </Trans>\n                                    </H5>\n                                </TransactionCard>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </YouAskWeAnswerContainer>\n\n                <GrowWithoutWorriesContainer>\n                    <ContentContainer>\n                        <div className=\"row no-gutters wrapper\">\n                            <div className=\"col-12 content\">\n                                <H1><Trans>Grow without worries.</Trans></H1>\n\n                                <H5>\n                                    <Trans>\n                                        Large volume businesses have so much data that it can be a challenging\n                                        engineering task to scale their infrastructures. We use state-of-the-art\n                                        technology to handle and process big data, all accessible on our Dashboard.\n                                    </Trans>\n                                </H5>\n                            </div>\n                            <div className=\"col-12 col-md-8 offset-md-4 tetris\">\n                                <StaticImage\n                                    src=\"../../images/product/analytics/tetris.png\"\n                                    placeholder=\"tracedSVG\"\n                                    alt=\"\"\n                                />\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </GrowWithoutWorriesContainer>\n            </ProductPageContainer>\n        </>\n    );\n};\n\n\n/*\n * Exports\n */\nexport default AnalyticsPage;\n"],"sourceRoot":""}