{"version":3,"sources":["webpack://switch-website/./src/images/product/dynamic-routing/payments-fail-background.png","webpack://switch-website/./src/pages/product/dynamic-routing.js","webpack://switch-website/./node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteralLoose.js"],"names":["coordinatesRestrictLimits","randomSkew","variance","Math","random","AcceptanceRatesContainer","colors","ContentContainer","Hero","H5","fontWeights","breakpoints","PaymentsFailContainer","PaymentsFailBackground","ReduceProcessingRatesContainer","H1","H6","StyledFloatingButton","BaseButtonStyles","fonts","FloatingButton","strings","raw","text","x","y","order","duration","floor","delay","startScale","endScale","startBlur","endBlur","buttonCss","top","left","animation","keyframes","slice","animationDelay","css","className","useContext","ContrastContext","setContrast","t","useTranslation","section","hero","description","image","S","src","placeholder","loading","alt","mobileImage","floatingButtonTexts","positions","minimumNumberOfElements","positionsArray","elementsPerRowOrCol","ceil","sqrt","positioningSkew","row","column","coordinates","round","push","generatePositionsArray","selectedTexts","textsList","n","randomTexts","sort","i","length","getRandomTexts","floatingButtons","map","index","key","SEO","title","ogTitle","ProductHero","sectionStr","videoUrl","ProductPageContainer","AnimatedBackground","Trans","to","target","colored"],"mappings":"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","file":"component---src-pages-product-dynamic-routing-js-301bce0021c510eb3aab.js","sourcesContent":["export default __webpack_public_path__ + \"static/payments-fail-background-29ce5ddefefff94c722674cfc9fd6e22.png\";","/** @jsx jsx */\nimport React, {useContext} from 'react';\nimport PropTypes from 'prop-types';\nimport {StaticImage} from 'gatsby-plugin-image';\n\nimport {jsx, keyframes} from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {Trans, useTranslation} from 'gatsby-plugin-react-i18next';\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 {breakpoints, colors, ContentContainer, fonts, fontWeights} from '../../styles/theme';\nimport {H1, H5, H6, Hero} from '../../components/common/Typography';\nimport {BaseButtonStyles, CTA, LinkAsPrimaryButton} from '../../components/common/Clickables';\nimport AnimatedBackground from '../../components/common/AnimatedBackground';\nimport PaymentsFailBackground from '../../images/product/dynamic-routing/payments-fail-background.png';\n\n\n/*\n * Constants\n */\n/* eslint-disable-next-line i18next/no-literal-string */\nconst videoUrl = null;\n\n// Limits of the restricted area to avoid to place items on the animation (probable position of the text to avoid)\n// Percentages. Zeros on the top left corner.\nconst coordinatesRestrictLimits = {\n minX: 0,\n maxX: 100,\n minY: 30,\n maxY: 60,\n};\n\n\n/*\n * Helper methods\n */\n/**\n * Generate a random positioning skew according to a possible variance.\n *\n * @example\n * // returns anything between -10 and 10\n * randomSkew(10)\n * @example\n * // returns anything between -5 and 5\n * randomSkew(5)\n *\n * @param {number} variance - The allowed variance\n * @returns {number}\n */\nfunction randomSkew(variance) {\n return Math.random() * (2 * variance) - variance;\n}\n\n/**\n * Generate the positions array for placing the floating buttons.\n *\n * @param {number} minimumNumberOfElements - The minimum number of buttons to place on the screen\n * @returns {[{...}]}\n */\nconst generatePositionsArray = minimumNumberOfElements => {\n const positionsArray = [];\n\n // Calculate the amount of rows and columns necessary to display all the elements in a grid. It contains AT LEAST\n // `` elements, but might contain more to make a squared grid (ex:\n // minimumNumberOfElements=4 will generate a 2x2 grid with 4 elements, but minimumNumberOfElements=5 will generate\n // a 3x3 grid with 9 elements).\n const elementsPerRowOrCol = Math.ceil(Math.sqrt(minimumNumberOfElements));\n\n // Skew all the elements' positions to achieve an even spread on the screen (the calculated position places them\n // at the top left corner of their \"space\", so we apply this skew to center them). This was achieved by\n // experimenting, there is no specific formula.\n const positioningSkew = 15 / elementsPerRowOrCol;\n\n // Loop through rows\n for (let row = 0; row <= elementsPerRowOrCol - 1; row++) {\n // Loop through columns\n for (let column = 0; column <= elementsPerRowOrCol - 1; column++) {\n // Generate a point with random coordinates\n const coordinates = {\n x: Math.round((column * 100) / elementsPerRowOrCol) + positioningSkew + randomSkew(4),\n y: Math.round((row * 100) / elementsPerRowOrCol) + positioningSkew + randomSkew(4),\n };\n\n // Try to avoid the restricted area\n if (coordinates.x >= coordinatesRestrictLimits.minX && coordinates.x <= coordinatesRestrictLimits.maxX\n && coordinates.y >= coordinatesRestrictLimits.minY && coordinates.y <= coordinatesRestrictLimits.maxY) {\n coordinates.y = Math.random() - 0.5 > 0.25 // Slight tendency to place above the restricted area\n ? coordinatesRestrictLimits.maxY + 2 + randomSkew(2) // Place below the restricted area\n : coordinatesRestrictLimits.minY - 2 - randomSkew(2); // Place above the restricted area\n }\n\n positionsArray.push(coordinates);\n }\n }\n\n // Return\n return positionsArray;\n};\n\n/**\n * Get amount of random texts from the list.\n *\n * If n is less than or equal to the list length, no duplicates are returned.\n *\n * @param textsList - The original ordered list of texts to get from.\n * @param n - The number of texts to get from the list.\n * @returns {[string]}\n */\nconst getRandomTexts = (textsList, n) => {\n const selectedTexts = [];\n // Randomize the order of the texts\n const randomTexts = textsList.sort(() => Math.random() - 0.5);\n\n // Iterate through the randomized list. If the number of texts we want is more than\n // the length of the list, we cycle again\n for (let i = 0; i < n; i++) {\n selectedTexts.push(randomTexts[i % randomTexts.length]);\n }\n\n return selectedTexts;\n};\n\n\n/*\n * Private Elements\n */\nconst AcceptanceRatesContainer = 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 ${Hero} {\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 }\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: 0;\n }\n }\n }\n }\n`;\n\nconst PaymentsFailContainer = styled.div`\n position: relative;\n height: 100vh;\n display: flex;\n align-items: center;\n text-align: center;\n\n .background {\n position: absolute;\n height: 100%;\n width: 100%;\n z-index: -1;\n overflow: hidden;\n background: ${colors.white} url(${PaymentsFailBackground}) no-repeat scroll bottom right;\n background-size: cover;\n }\n\n ${ContentContainer} {\n max-width: 500px;\n\n ${Hero} {\n margin-bottom: 25px;\n\n @media (max-width: ${breakpoints.sm}) {\n font-size: 20px;\n line-height: 30px;\n margin-bottom: 15px;\n }\n }\n }\n\n @media (min-width: ${breakpoints.lg}) {\n ${ContentContainer} {\n max-width: 800px;\n }\n }\n`;\n\nconst ReduceProcessingRatesContainer = styled.div`\n padding-top: 40px;\n padding-bottom: 40px;\n\n ${ContentContainer} {\n margin-top: 35px;\n margin-bottom: 70px;\n\n ${H1} {\n margin-bottom: 25px;\n }\n\n ${H6} {\n font-weight: ${fontWeights.regular};\n margin-bottom: 50px;\n }\n }\n\n @media (min-width: ${breakpoints.md}) {\n position: relative;\n padding-top: 0;\n padding-bottom: 70px;\n\n ${ContentContainer} {\n position: relative;\n margin-top: 80px;\n }\n\n .pipes-1 {\n position: absolute;\n top: -80px;\n left: 0;\n width: 100%;\n\n &>div {\n max-width: 1100px;\n }\n }\n }\n`;\n\n// Floating Button\nconst StyledFloatingButton = styled.button`\n ${BaseButtonStyles};\n position: absolute;\n font-family: ${fonts.monospace};\n font-weight: ${fontWeights.regular};\n background-color: #EEEEEE;\n padding: 10px 17px;\n height: auto;\n box-shadow: -5px 9px 12px 0 rgba(81, 81, 81, 0.17);\n cursor: default !important;\n will-change: transform, filter;\n\n @media (max-width: ${breakpoints.sm}) {\n min-height: 25px;\n font-size: 12px;\n line-height: 12px;\n padding: 8px 10px;\n }\n`;\n\n/**\n * Display a floating button\n * This element receives a position to be placed (it is positioned as absolute) and it will be animated to \"float\" to\n * top and bottom, while blurring the further away it is from the top. The starting position, direction and animation\n * duration are randomized so that several make a randomized animation.\n *\n * @param {string} text - the text to display in the button\n * @param {string} x - X position (in css \"top\" units)\n * @param {string} y - Y position (in css \"left\" units)\n */\nconst FloatingButton = ({text, x, y}) => {\n const maxDepth = 1 / 5;\n const minDepth = 1;\n\n // Get a random animation order so that we have elements starting out shrinking and others growing\n const order = Math.random() < 0.5 ? [maxDepth, minDepth] : [minDepth, maxDepth];\n\n // Randomly generate the animation duration to have elements at different speeds (can go from 30 to 40s)\n const duration = Math.floor(Math.random() * 10) + 10;\n\n // Randomly generate the start delay of the animations (can go from -10 to 1). A negative delay acts like the\n // animation had already started by that amount of time when it's initially rendered.\n const delay = Math.floor(Math.random() * 11) - 9;\n\n // Calculate the start and end positions based on the random order assignment before\n const startScale = order[0];\n const endScale = order[1];\n\n // Blur is inversely proportional to how far the object is, so we use the \"end\" scale to calculate the initial blur,\n // and vice versa. Blur can take values from 0 (closest to the screen) to 8 (farthest from the screen).\n const startBlur = (endScale * 5 - 1) * 2;\n const endBlur = (startScale * 5 - 1) * 2;\n\n const animation = keyframes`\n 0% {\n transform: scale(${startScale});\n filter: blur(${startBlur}px);\n }\n 50% {\n transform: scale(${endScale});\n filter: blur(${endBlur}px);\n }\n 100% {\n transform: scale(${startScale});\n filter: blur(${startBlur}px);\n }\n `;\n\n const buttonCss = {\n top: y,\n left: x,\n animation: `${animation} ${duration}s ease-in-out infinite`,\n animationDelay: `${delay}s`,\n };\n\n return (\n {text}\n );\n};\n\nFloatingButton.propTypes = {\n text: PropTypes.string.isRequired,\n x: PropTypes.string.isRequired,\n y: PropTypes.string.isRequired,\n};\n\n\n/*\n * Public Elements\n */\nconst DynamicRoutingPage = () => {\n const setContrast = useContext(ContrastContext);\n setContrast(false);\n const {t} = useTranslation();\n\n const section = t('Dynamic Routing');\n // eslint-disable-next-line i18next/no-literal-string\n const sectionStr = 'Dynamic Routing';\n const hero = t('Optimize your payments performance.');\n const description = t('Use custom rules to route transactions between payment providers in real-time, maximizing '\n + 'acceptance rates, and reducing processing and FX rates.');\n const image = (\n \n );\n const mobileImage = (\n \n );\n\n const floatingButtonTexts = [\n t('Timed out'),\n t('Insecure transaction'),\n t('Card declined'),\n t('Canceled by user'),\n t('Invalid payment data'),\n t('Invalid card number'),\n t('Expired credit card'),\n t('Validation error'),\n t('Payment verification failed'),\n t('Payment not processed'),\n t('Payment failed'),\n t('Payment method declined'),\n t('Failed authentication by issuer'),\n t('Charge failed'),\n ];\n\n const MIN_NUM_FLOATING_BUTTONS = 8;\n const positions = generatePositionsArray(MIN_NUM_FLOATING_BUTTONS);\n const selectedTexts = getRandomTexts(floatingButtonTexts, positions.length);\n const floatingButtons = positions.map((coordinates, index) => {\n const text = selectedTexts[index];\n return (\n \n );\n });\n\n return (\n <>\n \n\n \n\n \n \n \n \n
\n
\n Increase your acceptance rates.\n\n
\n \n E-commerce transactions can get declined for all sorts of reasons and lost\n revenue that can add up at scale. To fix that, we retry authorizations in\n real-time across multiple payment providers, maximizing the acceptance\n rates.\n \n
\n\n \n Read more about Acceptance Rates\n \n
\n
\n \n
\n
\n \n \n \n\n \n
\n
{floatingButtons}
\n
\n\n \n Why do payments fail and how can you fix it?\n \n Learn more\n \n \n \n\n \n
\n
\n \n
\n
\n \n
\n
\n

Reduce your processing rates.

\n
\n
\n
\n \n A rise in cross-border transactions is pushing merchants' processing costs\n up. Switch allows for the creation of rules that take into account processing\n variables to choose the optimum transaction route.\n \n
\n
\n
\n \n Learn more about routing rules\n \n
\n
\n \n
\n
\n \n
\n
\n \n \n \n );\n};\n\n\n/*\n * Exports\n */\nexport default DynamicRoutingPage;\n","export default function _taggedTemplateLiteralLoose(strings, raw) {\n if (!raw) {\n raw = strings.slice(0);\n }\n\n strings.raw = raw;\n return strings;\n}"],"sourceRoot":""}