{"version":3,"sources":["webpack://switch-website/./src/pages/about/contact.js"],"names":["HeroContainer","colors","mobileBackground","breakpoints","background","HeroContentContainer","ContentContainer","HeroText","AddressContainer","PMono","fontWeights","h6BaseStyle","TalkWithUsContainer","TalkWithUsCircleContainer","CircleBackground","H1","H6","CTALinkDark","StyledContactUsForm","fonts","PrimaryButton","ContactUsForm","schema","useState","formData","setFormData","formErrors","setFormErrors","isSubmitting","setIsSubmitting","isSubmitted","setIsSubmitted","formElements","map","input","id","name","errorMessages","fields","errorClass","length","className","key","htmlFor","label","element","value","onChange","event","message","getValue","target","disabled","attributes","messages","submitContactUsForm","preventDefault","frontendErrors","validateFormData","formPostToHubspot","contactUsHubspotFormId","Trans","H3","type","onClick","useContext","ContrastContext","setContrast","t","useTranslation","contactUsFormSchema","getContactUsFormSchema","title","ogTitle","description","image","to","colored","P","href"],"mappings":"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","file":"1a256801-1253c96950f667234ffa.js","sourcesContent":["import React, {useContext, useState} from 'react';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport {contactUsHubspotFormId, getContactUsFormSchema} from '../../helpers/constants/forms';\nimport {ContrastContext} from '../../helpers/context';\nimport {formPostToHubspot, validateFormData} from '../../helpers/utils/forms';\nimport SEO from '../../components/common/SEO';\nimport {Hero, H1, H3, H6, P, PMono, LinkDark, CTALinkDark, h6BaseStyle} from '../../components/common/Typography';\nimport {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport CircleBackground from '../../components/about/CircleBackground';\nimport {CTA, PrimaryButton} from '../../components/common/Clickables';\nimport background from '../../images/about/contact/background.png';\nimport mobileBackground from '../../images/about/contact/background-mobile.png';\nimport ArrowDown from '../../images/clickables/arrow_down.svg';\nimport DiagonalArrow from '../../images/clickables/diagonal_arrow.svg';\nimport {FormError} from '../../components/common/Forms';\n\n\n/*\n * Constants\n */\n/* eslint-disable i18next/no-literal-string */\nconst lisbonOfficeMapsUrl = 'https://goo.gl/maps/EWApcBdNKBmJwmHw8';\nconst portoOfficeMapsUrl = 'https://www.google.com/maps/place/Switch/@41.1637569,-8.6698259,17z/data=!3m1!4b1!4m5!3m4!1'\n    + 's0xd246f9a1c4774b5:0xebbaf8c0fd85ff3!8m2!3d41.1637569!4d-8.6676372';\n/* eslint-enable i18next/no-literal-string */\nconst defaultHeroContainerPaddingBottom = 150;\n\n\n/*\n * Private Elements\n */\n// Hero\nconst HeroContainer = styled.div`\n    background: ${colors.white} url(${mobileBackground}) no-repeat fixed center center;\n    background-size: cover;\n    padding-bottom: ${defaultHeroContainerPaddingBottom}px;\n    min-height: 100vh;\n\n    @media (min-width: ${breakpoints.sm}) {\n        background: ${colors.white} url(${background}) no-repeat fixed center center;\n        background-size: cover;\n    }\n`;\n\nconst HeroContentContainer = styled(ContentContainer)`\n    padding-left: 25px;\n    padding-right: 25px;\n\n    @media (min-width: ${breakpoints.md}) {\n        padding-left: 175px;\n        padding-right: 175px;\n    }\n`;\n\nconst HeroText = styled.div`\n    padding: 100px 0 20px 0;\n\n    @media (min-width: ${breakpoints.md}) {\n        padding: 150px 0 60px 0;\n    }\n`;\n\n// Address\nconst AddressContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    margin-bottom: 15px;\n\n    div {\n        margin-bottom: 15px;\n\n        ${PMono} {\n            font-weight: ${fontWeights.bold};\n            margin-bottom: 20px;\n        }\n\n        address {\n            span {\n                ${h6BaseStyle};\n                display: block;\n                font-weight: ${fontWeights.regular};\n                margin-bottom: 0;\n\n                &:first-of-type {\n                    margin-bottom: 10px;\n                }\n            }\n        }\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        margin-bottom: 30px;\n\n        div {\n            margin-bottom: 30px;\n        }\n    }\n`;\n\n// Talk with us\nconst TalkWithUsContainer = styled.div`\n    background-color: ${colors.black};\n`;\n\nconst TalkWithUsCircleContainer = styled.div`\n    ${CircleBackground} {\n        top: -135px;\n        padding-bottom: 30px;\n        margin-bottom: -135px;\n\n        @media not all and (min-width: ${breakpoints.md}) {\n            background: none;\n            height: auto;\n            max-height: none;\n        }\n    }\n\n    .content-container {\n        position: relative;\n        top: 30px;\n        padding-top: 20px;\n        padding-bottom: 100px;\n        color: ${colors.white};\n\n        ${H1} {\n            position: relative;\n            font-weight: ${fontWeights.semiBold};\n        }\n\n        ${H6} {\n            font-weight: ${fontWeights.regular};\n        }\n\n        ${CTALinkDark} {\n            &.more-information-link {\n                display: block;\n                margin-bottom: 16px;\n\n                svg {\n                    vertical-align: baseline;\n                }\n            }\n        }\n\n        ${PMono} {\n            &.more-information-element {\n                margin-bottom: 22px;\n            }\n        }\n\n        svg {\n            position: relative;\n        }\n\n        .row {\n            text-align: left;\n        }\n\n        .mobile-background {\n            width: 99%;\n            border-top-left-radius: 350px;\n            border-top-right-radius: 350px;\n            background: linear-gradient(to top right, ${colors.darkPurple}, ${colors.black});\n\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            margin-left: auto;\n            margin-right: auto;\n        }\n\n        .circle-content {\n            margin-top: 60px;\n\n            .row {\n                margin-bottom: 20px;\n            }\n\n            .form-group {\n                margin-bottom: 10px;\n            }\n\n            .contact-info-container {\n                padding-left: 40px;\n                padding-right: 40px;\n            }\n\n            .contact-form-container {\n                margin-top: 100px;\n                margin-bottom: 30px;\n                padding-left: 50px;\n                padding-right: 50px;\n            }\n        }\n\n        .bold {\n            font-weight: ${fontWeights.bold};\n        }\n\n        @media (min-width: 481px) {\n            .circle-content {\n                .contact-info-container {\n                    padding-left: 80px;\n                    padding-right: 80px;\n                }\n            }\n        }\n\n        @media (min-width: ${breakpoints.sm}) {\n            .circle-content {\n                .contact-info-container {\n                    padding-left: 100px;\n                    padding-right: 100px;\n                }\n            }\n        }\n\n        @media (min-width: ${breakpoints.md}) {\n            .mobile-background {\n                display: none;\n            }\n\n            .circle-content {\n                margin-top: 0;\n\n                .row {\n                    margin-bottom: 10px;\n                }\n\n                .contact-info-container {\n                    padding-left: 10px;\n                    padding-right: 10px;\n                }\n\n                .contact-form-container {\n                    margin: initial;\n                    padding-left: 10px;\n                    padding-right: 10px;\n                }\n            }\n        }\n\n        @media (min-width: 850px) {\n            .circle-content {\n                .row {\n                    margin-bottom: 20px;\n                }\n\n                .contact-info-container {\n                    padding-left: 15px;\n                    padding-right: 15px;\n                }\n\n                .contact-form-container {\n                    margin: initial;\n                    padding-left: 15px;\n                    padding-right: 15px;\n                }\n\n                .form-group {\n                    margin-bottom: 20px;\n                }\n            }\n        }\n\n        @media (min-width: 900px) {\n            .circle-content {\n                margin-top: 4%;\n\n                .row {\n                    margin-bottom: 20px;\n                }\n\n                .contact-info-container {\n                    padding-left: 40px;\n                    padding-right: 15px;\n                }\n\n                .contact-form-container {\n                    margin: initial;\n                    padding-left: 15px;\n                    padding-right: 40px;\n                }\n\n                .form-group {\n                    margin-bottom: 32px;\n                }\n            }\n        }\n\n        @media (min-width: ${breakpoints.lg}) {\n            .circle-content {\n                margin-top: 10%;\n\n                .row {\n                    margin-bottom: 30px;\n                }\n\n                .contact-info-container {\n                    padding-left: 120px;\n                    padding-right: 15px;\n                }\n\n                .contact-form-container {\n                    padding-left: 15px;\n                    padding-right: 120px;\n                }\n            }\n        }\n    }\n`;\n\n// Contact form\nconst StyledContactUsForm = styled.form`\n    .form-group {\n        margin-bottom: 32px;\n\n        label {\n            font-family: ${fonts.monospace};\n            font-size: 16px;\n            line-height: 24px;\n            margin-bottom: 0;\n        }\n\n        input {\n            padding: 0;\n            border: none;\n            border-bottom: 2px solid ${colors.white};\n            border-radius: 0;\n            background-color: inherit;\n            color: inherit;\n            line-height: 35px;\n            font-family: ${fonts.sansSerif};\n            font-size: 14px;\n            width: 100%;\n\n            &:focus {\n                color: inherit;\n                outline: none;\n                border: none;\n                border-bottom: 2px solid ${colors.white};\n                transition: none;\n                box-shadow: none;\n                background-color: inherit;\n            }\n\n            &::placeholder {\n                font-family: ${fonts.sansSerif};\n                color: ${colors.mediumGrey};\n                font-size: 0.75rem;\n                line-height: 40px;\n            }\n        }\n    }\n\n    ${PrimaryButton} {\n        margin-top: 25px;\n    }\n\n    @media (min-width: ${breakpoints.md}) {\n        ${PrimaryButton} {\n            margin-top: 10px;\n        }\n    }\n`;\n\nconst ContactUsForm = ({schema}) => {\n    const [formData, setFormData] = useState({});\n    const [formErrors, setFormErrors] = useState({});\n    const [isSubmitting, setIsSubmitting] = useState(false);\n    const [isSubmitted, setIsSubmitted] = useState(false);\n\n\n    const formElements = schema.map(input => {\n        const id = `contactUsForm-${input.name}`;\n\n        const onChange = event => {\n            // Clean error message when the form values changes\n            if (formErrors?.message) {\n                formErrors.message = null;\n            }\n\n            setFormErrors({...formErrors, fields: {...formErrors?.fields, [input.name]: null}});\n            setFormData({...formData, [input.name]: input.getValue ? input.getValue(event) : event.target.value});\n        };\n\n        const errorMessages = formErrors.fields?.[input.name];\n        // eslint-disable-next-line i18next/no-literal-string\n        const errorClass = errorMessages && errorMessages.length ? 'error' : '';\n\n        return (\n            <div className=\"form-group\" key={input.name}>\n                <label htmlFor={id}>\n                    {input.label}\n                </label>\n\n                <input.element\n                    className={`form-control ${errorClass}`}\n                    id={id}\n                    name={input.name}\n                    value={formData[input.name] || ''}\n                    onChange={onChange}\n                    disabled={isSubmitting}\n                    {...input.attributes}\n                />\n\n                <FormError messages={errorMessages} />\n            </div>\n        );\n    });\n\n\n    const submitContactUsForm = async event => {\n        event.preventDefault();\n        setIsSubmitting(true);\n        setFormErrors({});\n\n        try {\n            const frontendErrors = validateFormData(formData, schema);\n            if (frontendErrors) {\n                setFormErrors(frontendErrors);\n                return false;\n            }\n\n            const formPostResult = await formPostToHubspot(contactUsHubspotFormId, formData);\n            if (!formPostResult) {\n                setFormErrors({\n                    message: [<Trans>Couldn&apos;t submit response. Please, try again later.</Trans>],\n                });\n                return false;\n            }\n            setIsSubmitted(true);\n        } finally {\n            setIsSubmitting(false);\n        }\n        return true;\n    };\n\n    // If the form is submitted, simply show the thank you message...\n    if (isSubmitted) {\n        return (\n            <div>\n                <H3><Trans>Thanks for reaching out.</Trans></H3>\n                <H6><Trans>Our team will get back to you shortly.</Trans></H6>\n            </div>\n        );\n    }\n\n    // ...otherwise show the form itself!\n    return (\n        <StyledContactUsForm>\n            {formElements}\n            <FormError messages={formErrors.message} />\n            <div className=\"submit-group\">\n                <PrimaryButton\n                    type=\"submit\"\n                    className=\"float-right\"\n                    disabled={isSubmitting}\n                    onClick={submitContactUsForm}\n                >\n                    <Trans>Send Message</Trans>\n                </PrimaryButton>\n            </div>\n        </StyledContactUsForm>\n    );\n};\n\nContactUsForm.propTypes = {\n    schema: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,\n};\n\n/*\n * Public Elements\n */\nconst AboutContactPage = () => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(true);\n    const {t} = useTranslation();\n\n    const contactUsFormSchema = getContactUsFormSchema(t);\n\n    return (\n        <>\n            <SEO\n                title={t('Contact Us')}\n                ogTitle={t('Contact Us - Switch')}\n                description={t('Switch works with merchants, acquirers, ISVs, and PSPs to provide added flexibility in '\n                    + 'payments via a single PCI compliant platform.')}\n                image=\"/website/metatags/about-contact.png\"\n            />\n            <HeroContainer>\n                <HeroContentContainer>\n                    <HeroText>\n                        <Hero><Trans>Get in touch.</Trans></Hero>\n                    </HeroText>\n\n                    <div className=\"row\">\n                        <AddressContainer className=\"col-sm col-md-6 col-lg-5\">\n                            <div>\n                                <PMono><Trans>Lisboa Office</Trans></PMono>\n\n                                <address>\n                                    <span><Trans>Switch Inc.</Trans></span>\n                                    <span><Trans>Rua Policarpo Anjos 73</Trans></span>\n                                    <span><Trans>1495-744 Cruz Quebrada-Dafundo - Lisboa</Trans></span>\n                                    <span><Trans>Portugal</Trans></span>\n                                </address>\n                            </div>\n\n                            <div>\n                                <CTA to={lisbonOfficeMapsUrl} target=\"_blank\" colored><Trans>Go to maps</Trans></CTA>\n                            </div>\n                        </AddressContainer>\n\n                        <AddressContainer className=\"col-sm col-md-6 col-lg-5\">\n                            <div>\n                                <PMono><Trans>Porto Office</Trans></PMono>\n\n                                <address>\n                                    <span><Trans>Switch Inc.</Trans></span>\n                                    <span><Trans>Avenida da Boavista 3769</Trans></span>\n                                    <span><Trans>L27 & 28, 4100-139 Porto</Trans></span>\n                                    <span><Trans>Portugal</Trans></span>\n                                </address>\n                            </div>\n\n                            <div>\n                                <CTA to={portoOfficeMapsUrl} target=\"_blank\" colored><Trans>Go to maps</Trans></CTA>\n                            </div>\n                        </AddressContainer>\n                    </div>\n                </HeroContentContainer>\n            </HeroContainer>\n\n            <TalkWithUsContainer>\n                <TalkWithUsCircleContainer>\n                    <CircleBackground>\n                        <div className=\"content-container\">\n                            <div className=\"mobile-background\" />\n\n                            <H1><Trans>Talk to us.</Trans></H1>\n                            <ArrowDown />\n\n                            <div className=\"row circle-content no-gutters\">\n                                <div\n                                    className=\"col-12 offset-md-2 col-md-4 offset-lg-1 col-lg-5 contact-info-container\"\n                                >\n                                    <div className=\"row\">\n                                        <div className=\"col-12\">\n                                            <PMono className=\"bold\"><Trans>Phone</Trans></PMono>\n                                            <H6><Trans>+351 223 170 871 (Mon - Fri / 9:30 - 19:30 GMT)</Trans></H6>\n                                        </div>\n                                    </div>\n\n                                    <div className=\"row\">\n                                        <div className=\"col-12\">\n                                            <PMono className=\"bold more-information-element\">\n                                                <Trans>More information</Trans>\n                                            </PMono>\n                                            <CTALinkDark\n                                                className=\"more-information-link\"\n                                                to=\"mailto:support@switchpayments.com\"\n                                            >\n                                                <Trans>Support</Trans>\n                                                {' '}\n                                                <DiagonalArrow />\n                                            </CTALinkDark>\n                                            <CTALinkDark className=\"more-information-link\" to=\"/about/newsroom\">\n                                                <Trans>Newsroom</Trans>\n                                                {' '}\n                                                <DiagonalArrow />\n                                            </CTALinkDark>\n                                        </div>\n                                    </div>\n\n                                    <div className=\"row\">\n                                        <div className=\"col-12\">\n                                            <P><Trans>Find out how Switch can help your business.</Trans></P>\n                                            <CTALinkDark className=\"more-information-link\" to=\"/about/contact-sales\">\n                                                <Trans>Contact Sales</Trans>\n                                                {' '}\n                                                <DiagonalArrow />\n                                            </CTALinkDark>\n                                        </div>\n                                    </div>\n\n                                    <div className=\"row\">\n                                        <div className=\"col-12\">\n                                            <P>\n                                                <Trans>For any other topics please contact</Trans>\n                                                {' '}\n                                                <LinkDark href=\"mailto:hello@switchpayments.com\" className=\"bold\">\n                                                    <Trans>hello@switchpayments.com</Trans>\n                                                </LinkDark>\n                                            </P>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div className=\"col-12 col-md-4 col-lg-5 contact-form-container\">\n                                    <ContactUsForm schema={contactUsFormSchema} />\n                                </div>\n                            </div>\n                        </div>\n                    </CircleBackground>\n                </TalkWithUsCircleContainer>\n            </TalkWithUsContainer>\n        </>\n    );\n};\n\n\n/*\n * Exports\n */\nexport default AboutContactPage;\n"],"sourceRoot":""}