{"version":3,"sources":["webpack://switch-website/./src/pages/channels.js"],"names":["ChannelsContentContainer","colors","ContentContainer","ContactSalesCTAContentContainer","data","location","useContext","ContrastContext","setContrast","t","useTranslation","navigate","useI18next","normalizedChannels","allStrapiChannel","edges","map","channel","node","customizedSchema","getCustomizedFilterSchema","allowedChannelsFilters","Object","keys","useFiltersFromQueryParameters","queryParamsFilters","setQueryParams","useState","selectedFilters","setSelectedFilters","currentPage","setCurrentPage","filteredChannels","useFilters","paginatedChannels","usePagination","channelsPaginationTopRef","useRef","title","ogTitle","description","image","filters","setFilters","f","entries","forEach","key","value","filtersSchema","ref","id","numberOfElements","length","elementsPerPage","channels","channelClick","channelId","state","scrollToId","scrollToRef","link","linkText","H2","Trans"],"mappings":"gTAgCMA,GAAwB,uDACNC,eADM,uEAQxBC,KARwB,gEAiBxBC,GAA+B,uDACbF,eADa,KAkHrC,UA1GqB,SAAC,GAAsB,IAArBG,EAAoB,EAApBA,KAAMC,EAAc,EAAdA,UACLC,gBAAWC,KAC/BC,EAAY,GACZ,IAAOC,GAAKC,sBAALD,EACAE,GAAYC,kBAAZD,SAGDE,EAAqBT,EAAKU,iBAAiBC,MAAMC,KAAI,SAAAC,GAAO,OAAIA,EAAQC,QAGxEC,GAAmBC,OAA0BP,GAG7CQ,EAAyBC,OAAOC,KAAKJ,GAG3C,GAA6CK,OAA8BnB,EAAUgB,GAA9EI,EAAP,KAA2BC,EAA3B,KAGA,GAA8CC,cAASF,GAAhDG,EAAP,KAAwBC,EAAxB,KACA,GAAsCF,cAAS,GAAxCG,EAAP,KAAoBC,EAApB,KAGMC,GAAmBC,OAAWpB,EAAoBe,EAAiBT,GACnEe,GAAoBC,OAAcH,EAAkBF,EAzDtC,IA6DhBJ,EADgB,IAAhBI,EACe,OAAD,UAAKF,GAEJ,OAAD,UAAKA,EAAL,CAAsBE,iBAGxC,IAaMM,GAA2BC,cAEjC,OACI,yBACI,QAAC,IAAD,CACIC,MAAO7B,EAAE,YACT8B,QAAS9B,EAAE,kEACX+B,YAAa/B,EAAE,iKAEfgC,MAAM,oCAGV,QAAC,IAAD,CAAcC,QAASd,EAAiBe,WAzB7B,SAAAD,GACf,IAAME,EAAI,GACVtB,OAAOuB,QAAQH,GAASI,SAAQ,YAAmB,IAAjBC,EAAgB,KAAXC,EAAW,KAC1CA,IACAJ,EAAEG,GAAOC,MAGjBnB,EAAmBe,GAGnBb,EAAe,IAeqDkB,cAAe9B,KAE/E,QAACnB,EAAD,CAA0BkD,IAAKd,EAA0Be,GAAG,SACxD,QAAC,KAAD,MACI,QAAC,IAAD,CACIC,iBAAkBpB,EAAiBqB,OACnCC,gBAjGA,GAkGAxB,YAAaA,EACbC,eAAgBA,KAGpB,QAAC,IAAD,CACIwB,SAAUrB,EACVsB,aAAc,SAAAC,GAAS,OAAI9C,EAAS,aACnB8C,EACb,CAACC,MAAO,CAAC9B,kBAAiB+B,WAAY,cAI9C,QAAC,IAAD,CACIP,iBAAkBpB,EAAiBqB,OACnCC,gBAhHA,GAiHAxB,YAAaA,EACbC,eAAgBA,EAChB6B,YAAaxB,OAKzB,QAACjC,EAAD,MACI,QAAC,KAAD,CAAc0D,KAAK,uBAAuBC,SAAUrD,EAAE,mBAClD,QAAC,EAAAsD,GAAD,MAAI,QAAC,EAAAC,MAAD,gDACJ,QAAC,KAAD,MAAQ,QAAC,EAAAA,MAAD","file":"component---src-pages-channels-js-bc7024ab169c1251a8bc.js","sourcesContent":["import React, {useContext, useRef, useState} from 'react';\nimport {graphql} from 'gatsby';\nimport PropTypes from 'prop-types';\n\nimport styled from '@emotion/styled';\nimport {Trans, useI18next, useTranslation} from 'gatsby-plugin-react-i18next';\n\nimport ChannelsHero from '../components/channels/ChannelsHero';\nimport ChannelsList from '../components/channels/ChannelsList';\nimport Pagination from '../components/common/Pagination';\nimport {EndOfPageCTA} from '../components/common/Clickables';\nimport SEO from '../components/common/SEO';\nimport {colors, ContentContainer} from '../styles/theme';\nimport getCustomizedFilterSchema from '../helpers/channels';\nimport {H2, H5Mono} from '../components/common/Typography';\nimport useFilters from '../helpers/hooks/useFilters';\nimport usePagination from '../helpers/hooks/usePagination';\nimport useFiltersFromQueryParameters from '../helpers/hooks/useFiltersFromQueryParameters';\nimport {ContrastContext} from '../helpers/context';\n\n\n/*\n * Constants\n */\nconst elementsPerPage = 10;\n\n\n/*\n * Private Elements\n */\n\n// Channels\nconst ChannelsContentContainer = styled.div`\n    background-color: ${colors.lightGrey};\n    padding: 0 20px 60px;\n\n    @media (min-width: 885px) {\n        padding: 0 60px 70px;\n    }\n\n    ${ContentContainer} {\n        @media (max-width: 885px) {\n            padding-left: 0;\n            padding-right: 0;\n        }\n    }\n`;\n\n// Sales CTA\nconst ContactSalesCTAContentContainer = styled.div`\n    background-color: ${colors.lightGrey};\n`;\n\n\n/*\n * Public Elements\n */\nconst ChannelsPage = ({data, location}) => {\n    const setContrast = useContext(ContrastContext);\n    setContrast(false);\n    const {t} = useTranslation();\n    const {navigate} = useI18next();\n\n    // Get the Channels data\n    const normalizedChannels = data.allStrapiChannel.edges.map(channel => channel.node);\n\n    // Get filterable data from Channels filters schema and Channels data\n    const customizedSchema = getCustomizedFilterSchema(normalizedChannels);\n\n    // Get the list of allowed filters for Channels\n    const allowedChannelsFilters = Object.keys(customizedSchema);\n\n    // Get query params\n    const [queryParamsFilters, setQueryParams] = useFiltersFromQueryParameters(location, allowedChannelsFilters);\n\n    // Set the selected filters and current page\n    const [selectedFilters, setSelectedFilters] = useState(queryParamsFilters);\n    const [currentPage, setCurrentPage] = useState(1);\n\n    // Filter and paginate Channels\n    const filteredChannels = useFilters(normalizedChannels, selectedFilters, customizedSchema);\n    const paginatedChannels = usePagination(filteredChannels, currentPage, elementsPerPage);\n\n    // Set the defined filters/page in the URL\n    if (currentPage === 1) {\n        setQueryParams({...selectedFilters});\n    } else {\n        setQueryParams({...selectedFilters, currentPage});\n    }\n\n    const setFilters = filters => {\n        const f = {};\n        Object.entries(filters).forEach(([key, value]) => {\n            if (value) {\n                f[key] = value;\n            }\n        });\n        setSelectedFilters(f);\n\n        // Changing filters MUST also change the pagination to the first page\n        setCurrentPage(1);\n    };\n\n    const channelsPaginationTopRef = useRef();\n\n    return (\n        <>\n            <SEO\n                title={t('Channels')}\n                ogTitle={t('Work with Multiple Payment Providers Around the Globe - Switch')}\n                description={t('Connect with multiple payment gateways, acquirers, payment services providers through '\n                    + 'a single integration. More than 70 payment methods available worldwide.')}\n                image=\"/website/metatags/channels.png\"\n            />\n\n            <ChannelsHero filters={selectedFilters} setFilters={setFilters} filtersSchema={customizedSchema} />\n\n            <ChannelsContentContainer ref={channelsPaginationTopRef} id=\"list\">\n                <ContentContainer>\n                    <Pagination\n                        numberOfElements={filteredChannels.length}\n                        elementsPerPage={elementsPerPage}\n                        currentPage={currentPage}\n                        setCurrentPage={setCurrentPage}\n                    />\n\n                    <ChannelsList\n                        channels={paginatedChannels}\n                        channelClick={channelId => navigate(\n                            `/channels/${channelId}`,\n                            {state: {selectedFilters, scrollToId: 'list'}},\n                        )}\n                    />\n\n                    <Pagination\n                        numberOfElements={filteredChannels.length}\n                        elementsPerPage={elementsPerPage}\n                        currentPage={currentPage}\n                        setCurrentPage={setCurrentPage}\n                        scrollToRef={channelsPaginationTopRef}\n                    />\n                </ContentContainer>\n            </ChannelsContentContainer>\n\n            <ContactSalesCTAContentContainer>\n                <EndOfPageCTA link=\"/about/contact-sales\" linkText={t('Contact Sales')}>\n                    <H2><Trans>Did you find what you&apos;re looking for?</Trans></H2>\n                    <H5Mono><Trans>Our team is here to help you integrate.</Trans></H5Mono>\n                </EndOfPageCTA>\n            </ContactSalesCTAContentContainer>\n        </>\n    );\n};\n\nChannelsPage.propTypes = {\n    data: PropTypes.object.isRequired,\n    location: PropTypes.object.isRequired,\n};\n\n\n/*\n * Exports\n */\nexport default ChannelsPage;\nexport const query = graphql`\n    query($language: String!) {\n        allStrapiChannel(filter: {language: {eq: $language}}) {\n            edges {\n                node {\n                    id: strapiId\n                    status\n                    region\n                    language\n                    payment_provider {\n                        name\n                        type\n                        logo {\n                            localFile {\n                                childImageSharp {\n                                    gatsbyImageData(\n                                        placeholder: TRACED_SVG\n                                        width: 100\n                                    )\n                                }\n                            }\n                        }\n                    }\n                    payment_method {\n                        name\n                        type\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                            region\n                        }\n                    }\n                }\n            }\n        }\n    }\n`;\n"],"sourceRoot":""}