{"version":3,"sources":["webpack://switch-website/./src/pages/product/risk.js"],"names":["mdBreakpoint","parseInt","breakpoints","lgBreakpoint","HowItWorksContainer","ContentContainer","fonts","colors","fontWeights","StyledTransactionStepCard","H6Mono","TransactionStepCard","gradientEndColor","imageSrc","title","withBorder","children","css","background","borderLeft","src","className","alt","defaultProps","FraudDetectionContainer","H1","H5","Emv3dsContainer","Emv3dsBackground","FraudVendorContainer","useContext","ContrastContext","setContrast","arrowThen","screenSize","ScreenSizeContext","t","useTranslation","section","hero","description","image","S","placeholder","loading","mobileImage","arrowIf","width","arrowOperator","ogTitle","sectionStr","videoUrl","Trans","RiskTransactionParameters","RiskMetadata","RiskRuleInput","RiskAction","to","colored"],"mappings":"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","file":"88176ec8-d7a9a4e820a194de96a1.js","sourcesContent":["/** @jsx jsx */\nimport React, {useContext} from 'react';\nimport PropTypes from 'prop-types';\nimport {StaticImage} from 'gatsby-plugin-image';\n\nimport {jsx} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport SEO from '../../components/common/SEO';\nimport ProductHero from '../../components/common/ProductHero';\nimport ProductPageContainer from '../../components/common/ProductPageContainer';\nimport {CTA} from '../../components/common/Clickables';\nimport {H1, H5, H6Mono} from '../../components/common/Typography';\nimport TransactionDataItem from '../../components/product/TransactionDataItem';\nimport Emv3dsBackground from '../../images/product/risk/emv3ds-background.png';\nimport RiskAction from '../../images/product/risk/risk-action.png';\nimport RiskMetadata from '../../images/product/risk/risk-metadata.png';\nimport RiskRuleInput from '../../images/product/risk/risk-rule-input.png';\nimport RiskTransactionParameters from '../../images/product/risk/risk-transaction-parameters.png';\nimport ArrowIf from '../../images/product/risk/arrow-if.svg';\nimport ArrowIfVertical from '../../images/product/risk/arrow-if-vertical.svg';\nimport ArrowOperator from '../../images/product/risk/arrow-operator.svg';\nimport ArrowOperatorVertical from '../../images/product/risk/arrow-operator-vertical.svg';\nimport ArrowThen from '../../images/product/risk/arrow-then.svg';\nimport ArrowThenInverted from '../../images/product/risk/arrow-then-inverted.svg';\nimport ArrowThenVertical from '../../images/product/risk/arrow-then-vertical.svg';\nimport ThreeDS from '../../images/product/risk/threeds.svg';\nimport TrapezoidBackground from '../../images/product/trapezoid.svg';\nimport Block from '../../images/product/risk/block.svg';\nimport Review from '../../images/product/risk/review.svg';\nimport {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport {ContrastContext, ScreenSizeContext} from '../../helpers/context';\n\n\n/*\n * Constants\n */\n/* eslint-disable-next-line i18next/no-literal-string */\nconst videoUrl = null;\nconst mdBreakpoint = parseInt(breakpoints.md.replace('px', ''), 10);\nconst lgBreakpoint = parseInt(breakpoints.lg.replace('px', ''), 10);\n\n\n/*\n * Private Elements\n */\nconst HowItWorksContainer = styled.div`\n    ${ContentContainer} {\n        padding: 80px 25px 40px;\n\n        .label {\n            font-size: 14px;\n            line-height: 20px;\n            font-family: ${fonts.sansSerif};\n            color: ${colors.darkPurple};\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            font-weight: ${fontWeights.regular};\n            margin-bottom: 30px;\n        }\n\n        .with-arrow {\n            position: relative;\n\n            svg {\n                position: absolute;\n                user-select: none;\n                z-index: 1;\n            }\n\n            &.arrow-if,\n            &.arrow-operator,\n            &.arrow-then {\n                svg {\n                    top: unset;\n                    right: unset;\n                    bottom: -44px;  // half of the actual SVG size\n                    left: 50%;\n                    transform: translateX(-50%);\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) and (max-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            padding: 80px 65px 100px;\n\n            .with-arrow {\n                &.arrow-if {\n                    svg {\n                        left: unset;\n                        top: unset;\n                        right: -34px;  // half of the actual SVG size\n                        bottom: 30%;\n                        transform: none;\n                    }\n                }\n\n                &.arrow-then {\n                    svg {\n                        right: unset;\n                        top: unset;\n                        left: -44px;  // half of the actual SVG size\n                        bottom: 30%;\n                        transform: none;\n                    }\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            .with-arrow {\n                &.arrow-if {\n                    svg {\n                        left: unset;\n                        top: unset;\n                        right: -34px;  // half of the actual SVG size\n                        bottom: 30%;\n                        transform: none;\n                    }\n                }\n\n                &.arrow-operator {\n                    svg {\n                        left: unset;\n                        top: unset;\n                        right: -44px;  // half of the actual SVG size\n                        bottom: 30%;\n                        transform: none;\n                    }\n                }\n\n                &.arrow-then {\n                    svg {\n                        left: unset;\n                        top: unset;\n                        right: -42px;  // half of the actual SVG size\n                        bottom: 30%;\n                        transform: none;\n                    }\n                }\n            }\n        }\n    }\n`;\n\nconst StyledTransactionStepCard = styled.div`\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    height: 100%;\n    padding: 65px 5px 50px;\n    background: linear-gradient(180deg, #FFFFFF 0%, #F2F2FF 100%);\n\n    ${H6Mono} {\n        margin-bottom: 35px;\n    }\n  \n    .logo {\n        height: 75px;\n        margin-right: auto;\n        margin-left: auto;\n        margin-bottom: 30px;\n    }\n\n    .content {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-evenly;\n        height: 100%;\n\n        font-family: ${fonts.sansSerif};\n        font-weight: ${fontWeights.semiLight};\n        padding-top: 5px;\n        padding-bottom: 10px;\n        margin: 0;\n\n        span {\n            margin-top: 5px;\n            margin-bottom: 10px;\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        padding: 50px 5px 25px;\n    }\n`;\n\nconst TransactionStepCard = ({gradientEndColor, imageSrc, title, withBorder = true, children}) => {\n    const css = {\n        background: `linear-gradient(180deg, #FFFFFF 0%, ${gradientEndColor} 100%)`,\n        borderLeft: withBorder ? `2px dashed ${colors.white}` : '0',\n    };\n    return (\n        <StyledTransactionStepCard css={css}>\n            <img src={imageSrc} className=\"logo\" alt=\"\" />\n\n            <H6Mono>{title}</H6Mono>\n\n            <div className=\"content\">\n                {children}\n            </div>\n        </StyledTransactionStepCard>\n    );\n};\n\nTransactionStepCard.propTypes = {\n    gradientEndColor: PropTypes.string.isRequired,\n    imageSrc: PropTypes.string.isRequired,\n    title: PropTypes.string.isRequired,\n    withBorder: PropTypes.bool,\n    children: PropTypes.node.isRequired,\n};\n\nTransactionStepCard.defaultProps = {\n    withBorder: true,\n};\n\nconst FraudDetectionContainer = styled.div`\n    ${ContentContainer} {\n        padding: 30px 25px 50px;\n\n        ${H1} {\n            margin-bottom: 20px;\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.regular};\n        }\n\n        .image {\n            padding-bottom: 25px;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            ${H1} {\n                margin-top: 10px;\n            }\n\n            .image {\n                padding-right: 25px;\n                padding-bottom: 0;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            padding: 80px 65px 100px;\n\n            .image {\n                padding-right: 50px;\n            }\n        }\n    }\n`;\n\nconst Emv3dsContainer = styled.div`\n    position: relative;\n\n    ${ContentContainer} {\n        padding: 30px 25px 50px;\n\n        ${H1} {\n            margin-bottom: 20px;\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.regular};\n            margin-bottom: 50px;\n        }\n\n        .image {\n            padding-bottom: 25px;\n        }\n    }\n\n    .background {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        bottom: 0;\n        background: ${colors.transparent} url(${Emv3dsBackground}) no-repeat scroll right bottom 50px;\n        background-size: 200vw auto;\n\n        .trapezoid-wrapper {\n            position: absolute;\n            width: 100%;\n            height: 85%;\n            bottom: 0;\n            left: 0;\n            z-index: -1;\n\n            svg {\n                width: 100%;\n                height: 100%;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            ${H1} {\n                margin-top: 15px;\n            }\n\n            .image {\n                padding-left: 25px;\n                padding-bottom: 0;\n            }\n        }\n\n        .background {\n            height: 130%;\n            background-size: cover;\n            background-position: right bottom;\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            padding: 80px 65px 100px;\n\n            .image {\n                padding-left: 50px;\n            }\n        }\n    }\n`;\n\nconst FraudVendorContainer = styled.div`\n    ${ContentContainer} {\n        padding: 30px 25px 80px;\n\n        ${H1} {\n            margin-bottom: 20px;\n        }\n\n        ${H5} {\n            font-weight: ${fontWeights.regular};\n        }\n\n        .image {\n            padding-bottom: 25px;\n\n            .gatsby-image-wrapper {\n                max-width: 620px;\n            }\n        }\n\n        .content {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${ContentContainer} {\n            ${H1} {\n                margin-top: 10px;\n            }\n\n            .image {\n                padding-right: 25px;\n                padding-bottom: 0;\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.lg}) {\n        ${ContentContainer} {\n            padding: 80px 65px 100px;\n\n            .image {\n                padding-right: 50px;\n            }\n        }\n    }\n`;\n\n\n/*\n * Public Elements\n */\nconst RiskPage = () => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const screenSize = useContext(ScreenSizeContext);\n    const {t} = useTranslation();\n\n    const section = t('Risk');\n    // eslint-disable-next-line i18next/no-literal-string\n    const sectionStr = 'Risk';\n    const hero = t('Define custom blocking rules to prevent fraud.');\n    const description = t(\n        'We scan every payment using the most relevant signals to help fight fraud. But you can also set precise rules '\n        + 'to flag, block, or dynamically apply 3D Secure to certain transactions.',\n    );\n    const image = (\n        <StaticImage src=\"../../images/product/risk/logo.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n    const mobileImage = (\n        <StaticImage src=\"../../images/product/risk/logo-mobile.png\" placeholder=\"none\" loading=\"eager\" alt=\"\" />\n    );\n\n    const arrowIf = screenSize.width < mdBreakpoint ? <ArrowIfVertical /> : <ArrowIf />;\n    const arrowOperator = screenSize.width < lgBreakpoint ? <ArrowOperatorVertical /> : <ArrowOperator />;\n\n    let arrowThen;\n    if (screenSize.width < mdBreakpoint) {\n        arrowThen = <ArrowThenVertical />;\n    } else if (screenSize.width >= lgBreakpoint) {\n        arrowThen = <ArrowThen />;\n    } else {\n        arrowThen = <ArrowThenInverted />;\n    }\n\n    return (\n        <>\n            <SEO\n                title={section}\n                ogTitle={t('Detect and Prevent Fraud with Custom Risk Rules - Switch')}\n                description={t('Apply dynamic 3DS, review, or block transactions. Receive real-time notifications '\n                    + 'based on custom transaction parameters and user profiling.')}\n                image=\"/website/metatags/risk.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                <HowItWorksContainer>\n                    <ContentContainer>\n                        <p className=\"label\"><Trans>How it works</Trans></p>\n\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-6 col-lg-3 order-1 with-arrow arrow-if\">\n                                <TransactionStepCard\n                                    gradientEndColor=\"#F2F2FF\"\n                                    title={t('Transaction Parameters')}\n                                    withBorder={false}\n                                    imageSrc={RiskTransactionParameters}\n                                >\n                                    {/* eslint-disable i18next/no-literal-string */}\n                                    <TransactionDataItem>:issuing_country:</TransactionDataItem>\n                                    <TransactionDataItem>:eci_code:</TransactionDataItem>\n                                    <TransactionDataItem>:ip_address:</TransactionDataItem>\n                                    <TransactionDataItem>:processing_currency:</TransactionDataItem>\n                                    <TransactionDataItem>:ip_country:</TransactionDataItem>\n                                    <TransactionDataItem>:bin_code:</TransactionDataItem>\n                                    <TransactionDataItem>:cardholder_name:</TransactionDataItem>\n                                    {/* eslint-enable i18next/no-literal-string */}\n                                </TransactionStepCard>\n                                {arrowIf}\n                            </div>\n                            <div className=\"col-12 col-md-6 col-lg-3 order-2 with-arrow arrow-operator\">\n                                <TransactionStepCard\n                                    gradientEndColor=\"#E1E2FF\"\n                                    title={t('Risk Metadata')}\n                                    withBorder={screenSize.width > mdBreakpoint}\n                                    imageSrc={RiskMetadata}\n                                >\n                                    {/* eslint-disable i18next/no-literal-string */}\n                                    <TransactionDataItem>:amount_std_deviation:</TransactionDataItem>\n                                    <TransactionDataItem>:card_expiration_year:</TransactionDataItem>\n                                    <TransactionDataItem>:ip_matches_country:</TransactionDataItem>\n                                    <TransactionDataItem>:card_usage_day:</TransactionDataItem>\n                                    <TransactionDataItem>:ip_usage_day:</TransactionDataItem>\n                                    <TransactionDataItem>:amount_top_1%:</TransactionDataItem>\n                                    <TransactionDataItem>:authentication_failed:</TransactionDataItem>\n                                    {/* eslint-enable i18next/no-literal-string */}\n                                </TransactionStepCard>\n                                {arrowOperator}\n                            </div>\n                            <div className=\"col-12 col-md-6 col-lg-3 order-3 order-md-4 order-lg-3 with-arrow\n                                            arrow-then\"\n                            >\n                                <TransactionStepCard\n                                    gradientEndColor=\"#D1D2FD\"\n                                    title={t('Rule Input')}\n                                    withBorder={screenSize.width > mdBreakpoint}\n                                    imageSrc={RiskRuleInput}\n                                >\n                                    {/* eslint-disable i18next/no-literal-string */}\n                                    <span>&apos;EUR&apos;</span>\n                                    <span>&apos;USA&apos;</span>\n                                    <span>&apos;John Doe&apos;</span>\n                                    <span>21.56</span>\n                                    <span>&apos;true&apos;</span>\n                                    <span>&apos;false&apos;</span>\n                                    <span>&apos;payvision&apos;</span>\n                                    {/* eslint-enable i18next/no-literal-string */}\n                                </TransactionStepCard>\n                                {arrowThen}\n                            </div>\n                            <div className=\"col-12 col-md-6 col-lg-3 order-4 order-md-3 order-lg-4\">\n                                <TransactionStepCard\n                                    gradientEndColor=\"#B8B9F0\"\n                                    title={t('Risk Action')}\n                                    withBorder={screenSize.width > lgBreakpoint}\n                                    imageSrc={RiskAction}\n                                >\n                                    <TransactionDataItem>\n                                        <ThreeDS />\n                                        <Trans>request 3DS</Trans>\n                                    </TransactionDataItem>\n                                    <TransactionDataItem>\n                                        <Review />\n                                        <Trans>review</Trans>\n                                    </TransactionDataItem>\n                                    <TransactionDataItem>\n                                        <Block />\n                                        <Trans>block</Trans>\n                                    </TransactionDataItem>\n                                </TransactionStepCard>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </HowItWorksContainer>\n\n                <FraudDetectionContainer>\n                    <ContentContainer>\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-7 image\">\n                                <StaticImage\n                                    src=\"../../images/product/risk/risk-fraud-alert.png\"\n                                    placeholder=\"blurred\"\n                                    alt=\"\"\n                                />\n                            </div>\n                            <div className=\"col-12 col-md-5\">\n                                <H1><Trans>Never stay in the dark again.</Trans></H1>\n                                <H5>\n                                    <Trans>\n                                        Processing millions of transactions makes it difficult to spot suspicious\n                                        behavior. We can help you with real-time notifications based on custom\n                                        transaction and user profiling.\n                                    </Trans>\n                                </H5>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </FraudDetectionContainer>\n\n                <Emv3dsContainer>\n                    <div className=\"background\">\n                        <div className=\"trapezoid-wrapper\">\n                            <TrapezoidBackground />\n                        </div>\n                    </div>\n                    <ContentContainer>\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-5 order-md-2 image\">\n                                <StaticImage\n                                    src=\"../../images/product/risk/risk-emv-3ds.png\"\n                                    placeholder=\"blurred\"\n                                    alt=\"\"\n                                />\n                            </div>\n                            <div className=\"col-12 offset-md-1 col-md-6 order-md-1\">\n                                <H1><Trans>Combat attempted fraud with dynamic EMV 3DS implementation.</Trans></H1>\n\n                                <H5>\n                                    <Trans>\n                                        We support dynamic EMV 3DS processing. This means you can adopt a customized\n                                        approach and only authenticate specific transactions through EMV 3DS based on a\n                                        variety of criteria such as amount, card brand, and BIN.\n                                    </Trans>\n                                </H5>\n\n                                <CTA to=\"/learn/6075e8e0ba3216001080fa40\" colored>\n                                    <Trans>Learn more about EMV 3DS</Trans>\n                                </CTA>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </Emv3dsContainer>\n\n                <FraudVendorContainer>\n                    <ContentContainer>\n                        <div className=\"row no-gutters\">\n                            <div className=\"col-12 col-md-7 image\">\n                                <StaticImage\n                                    src=\"../../images/product/risk/risk-fraud-vendor.png\"\n                                    placeholder=\"blurred\"\n                                    alt=\"\"\n                                />\n                            </div>\n                            <div className=\"col-12 col-md-5 content\">\n                                <H1><Trans>Choose your favorite fraud vendor.</Trans></H1>\n                                <H5>\n                                    <Trans>\n                                        We offer a modular approach to fraud management, supporting multiple security\n                                        vendors — including our own system — in a single workflow.\n                                    </Trans>\n                                </H5>\n                            </div>\n                        </div>\n                    </ContentContainer>\n                </FraudVendorContainer>\n            </ProductPageContainer>\n        </>\n    );\n};\n\n\n/*\n * Exports\n */\nexport default RiskPage;\n"],"sourceRoot":""}