\n \n
\n \n \n );\n}\n\nButtonFactoryV3DesktopPreview.propTypes = {\n isButtonOverviewPreview: PropTypes.bool,\n showPPHeader: PropTypes.bool,\n};\n\nexport default ButtonFactoryV3DesktopPreview;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { css, StyleSheet } from 'aphrodite';\nimport classNames from 'classnames';\nimport { appendCdnHostName } from '../../../utility/geoUtils';\n\nconst illustrations = {\n critical: appendCdnHostName(\n '/paypal-ui/illustrations/focused/svg/empty-critical.svg'\n ),\n 'more-info': appendCdnHostName('/paypal-ui/illustrations/svg/more-info.svg'),\n 'credit-cards': appendCdnHostName(\n '/paypal-ui/illustrations/svg/credit-cards.svg'\n ),\n success: appendCdnHostName('/paypal-ui/illustrations/svg/success.svg'),\n warning: appendCdnHostName(\n '/paypal-ui/illustrations/focused/svg/empty-warning.svg'\n ),\n activity: appendCdnHostName('/paypal-ui/illustrations/svg/activity.svg'),\n};\n\nconst STYLES = StyleSheet.create({\n large: {\n width: 96,\n },\n small: {\n width: 72,\n },\n});\n\nexport default function Illustration({\n type,\n size = 'large',\n className,\n ariaHidden,\n ...rest\n}) {\n const classes = classNames(className, {\n [css(STYLES.large)]: size === 'large',\n [css(STYLES.small)]: size === 'small',\n });\n\n return (\n \n {donateButtonUrl && 
}\n
\n );\n }\n}\nexport default DonateButtonPreview;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CaptionText } from '@paypalcorp/pp-react';\nimport getLocaleMessages from '../../utils/localesMessages';\n\nconst { previewContainerText, browser } =\n getLocaleMessages('buttonsV3/preview');\n\nconst ImageButtonPreview = ({ buttonImageUrl, onError }) => {\n if (!buttonImageUrl) {\n return (\n \n {\n if (onError) {\n onError(error);\n }\n }}\n />\n
\n );\n};\n\nImageButtonPreview.propTypes = {\n buttonImageUrl: PropTypes.string,\n onError: PropTypes.func,\n};\n\nexport default ImageButtonPreview;\n","import React from 'react';\nimport DonateButtonPreview from './DonateButtonPreview';\nimport ImageButtonPreview from './ImageButtonPreview';\nimport PropTypes from 'prop-types';\n\nconst ButtonPreviewContainer = ({\n usePaypalButtonStyle,\n showAcceptedCardLogos,\n buttonSize,\n locale,\n country,\n buttonLocaleUrls,\n buttonImageUrl,\n onError,\n}) => {\n return (\n \n
\n );\n};\nButtonPreviewContainer.propTypes = {\n usePaypalButtonStyle: PropTypes.bool,\n buttonSize: PropTypes.string,\n showAcceptedCardLogos: PropTypes.bool,\n locale: PropTypes.string,\n country: PropTypes.string,\n buttonImageUrl: PropTypes.string,\n onError: PropTypes.func,\n buttonLocaleUrls: PropTypes.object,\n};\n\nexport default ButtonPreviewContainer;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SkeletonScreen = ({ isGuestPagePreview = false }) => {\n return (\n \n {usePaypalButtonStyle ? (\n
\n \n
\n \n \n \n
\n \n \n \n \n
\n \n \n
\n \n \n );\n};\n\nSkeletonScreen.propTypes = {\n isGuestPagePreview: PropTypes.bool,\n};\n\nexport default SkeletonScreen;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport SkeletonScreen from './SkeletonScreen';\nimport CommonPreviewComponent from './CommonPreviewComponent';\nimport getLocaleMessages from '../../utils/localesMessages';\nconst messages = getLocaleMessages('buttonsV3/buttonPreview');\n\nconst ButtonFactoryV3SdkPreview = ({\n isButtonOverviewPreview = false,\n isGuestPagePreview = false,\n}) => {\n return (\n \n
\n \n \n \n \n
\n \n
\n \n \n
\n \n \n \n \n \n \n
\n \n
\n \n );\n};\n\nButtonFactoryV3SdkPreview.propTypes = {\n isButtonOverviewPreview: PropTypes.bool,\n isGuestPagePreview: PropTypes.bool,\n};\nexport default ButtonFactoryV3SdkPreview;\n","import AppStore from '../../stores/AppStore';\nimport * as AppActions from '../../actions/AppActions';\nimport {\n formatAmount,\n formatInputAmount,\n normalizeNumber,\n} from '../../utility/formator';\nimport TemplateData from '../../utility/getTemplateData';\nimport { getParameterByName } from '../../utility/queryStringHelper';\n\nexport const isOptInCoverFee = () => {\n return AppStore.getCoverFeeOptInStatus() === 'checked';\n};\n\nexport const isAtLandingPage = () => {\n const isGuestReviewPage =\n window.location.pathname.includes('guest') ||\n ![undefined, null].includes(getParameterByName('signup'));\n return !isGuestReviewPage;\n};\n\nexport const computeFeeAmount = () => {\n const donationAmount = normalizeNumber(AppStore.getDonationAmount()),\n flatFee = parseFloat(TemplateData.flatFee),\n feeRate = parseFloat(TemplateData.feeRate) * 0.01;\n\n if (donationAmount > 0) {\n // X is the full amount the donor needs to pay for the charity to receive $100\n // X - .03X - $0.30 = $100\n // If X is the full amount the donor needs to pay for the charity to receive Y\n // X - feeRate*X - flatFee = Y\n // X = (Y + flatFee) / (1 - feeRate)\n const totalAmountAfterFee = (donationAmount + flatFee) / (1 - feeRate),\n feeAmount = totalAmountAfterFee - donationAmount;\n return feeAmount;\n }\n\n return 0;\n};\n\nexport const computeAmountAfterFee = (donationAmount, feeAmount) => {\n const currency = AppStore.getDonationCode(),\n formatedAmountValue = formatInputAmount({\n value: donationAmount,\n currency,\n }),\n totalAmount =\n normalizeNumber(formatedAmountValue) + normalizeNumber(feeAmount),\n formatedTotalAmountValue = formatInputAmount({\n value: totalAmount,\n currency,\n });\n\n return formatedTotalAmountValue;\n};\n\nexport const setFeeAmountInStore = () => {\n const feeAmount = computeFeeAmount(),\n currencyCode = AppStore.getDonationCode(),\n formatedFeeAmount = formatAmount({\n currency: currencyCode,\n value: feeAmount,\n }),\n formatedFeeAmountValue = formatInputAmount({\n value: feeAmount,\n currency: currencyCode,\n });\n\n AppActions.changeFeeAmount({ feeAmount: formatedFeeAmountValue });\n AppActions.changeFormatedFeeAmount({\n formatedFeeAmount,\n });\n};\n\nexport const updateDonationAmount = (amount) => {\n const currencyCode = AppStore.getDonationCode(),\n formatedAmount = formatAmount({\n currency: currencyCode,\n value: amount,\n });\n AppActions.changeAmount({ amount });\n AppActions.changeFormatedAmount({ formatedAmount });\n};\n\nexport const restoreDonationAmount = () => {\n const rawAmount = AppStore.getAmountBeforeFee() || TemplateData.rawAmount;\n updateDonationAmount(rawAmount.toString());\n};\n\nexport const optOutCoverFee = () => {\n AppActions.changeCoverFee({ coverFee: 'unchecked' });\n AppActions.changeFeeAmount({ feeAmount: 0 });\n AppActions.changeFormatedAmount({ formatedFeeAmount: '' });\n};\n\nexport const shouldSelectPresetAmount = (amount) => {\n if (!amount) {\n return false;\n }\n\n const presetAmounts = TemplateData.presetAmounts;\n return presetAmounts.map(Number).includes(normalizeNumber(amount));\n};\n","import { KEY_DOWN } from './constants';\n\nexport function checkKeyPressed(event, doFunction) {\n if (event.which === KEY_DOWN.SPACE || event.which === KEY_DOWN.ENTER) {\n return doFunction();\n }\n}\n","import { isSupportedVariable, parseTextAreaValue } from '../lib/extraVariables';\nimport _each from 'lodash/each';\nimport _get from 'lodash/get';\n\nexport function isValidSecureUrl(url) {\n let urlRegex =\n /^((https|HTTPS):\\/\\/)[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]%@!\\$&'\\(\\)\\*\\+,;=.]+$/; // eslint-disable-line\n return urlRegex.test(url);\n}\n\nexport function isValidUrl(url) {\n let urlRegex =\n /^(?:http(s)?:\\/\\/)?[\\w.-]+(?:\\.[\\w\\.-]+)+[\\w\\-\\._~:/?#[\\]%@!\\$&'\\(\\)\\*\\+,;=.]+$/; // eslint-disable-line\n return urlRegex.test(url);\n}\n\nexport function isValidEmail(email) {\n let emailRegex =\n /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return emailRegex.test(email);\n}\n\nexport function validateExtraVariables(extraVariables) {\n if (!extraVariables) {\n return null;\n }\n const variables = parseTextAreaValue(extraVariables);\n let unsupportedVariables = [];\n _each(variables, (variable) => {\n const key = _get(variable, 'name');\n if (key && !isSupportedVariable(key)) {\n unsupportedVariables.push(key);\n }\n });\n\n return unsupportedVariables.join(' ');\n}\n\nexport function byteLength(str) {\n // returns byte length of an utf8 string\n let byteCount = str.length;\n\n // Based on the ascii code we can tell if the\n // char is of 1 or 2 or 3 bytes.\n for (let i = str.length - 1; i >= 0; i--) {\n let code = str.charCodeAt(i);\n\n if (code > 0x7f && code <= 0x7ff) {\n byteCount++;\n } else if (code > 0x7ff && code <= 0xffff) {\n byteCount += 2;\n }\n if (code >= 0xdc00 && code <= 0xdfff) {\n i--;\n }\n }\n return byteCount;\n}\n","import _get from 'lodash/get';\nimport _find from 'lodash/find';\nimport _findKey from 'lodash/findKey';\nimport _each from 'lodash/each';\nimport _isEmpty from 'lodash/isEmpty';\nimport { getDonateButtonImageUrl } from '../utils/buttonImage';\nimport {\n getSupportedVariables,\n getUnsupportedVariables,\n formatVariablesForTextArea,\n parseTextAreaValue,\n} from './extraVariables';\nimport getStore from '../store/configureStore';\nimport _includes from 'lodash/includes';\nimport { isLoggedInUser } from '../utils/authUtils';\nimport { formatAmountFromServer, normalizeNumber } from '../utils/amountUtils';\nimport { isValidSecureUrl } from '../utils/clientValidatorUtils';\nimport {\n LOGO_TARGET_NOLOGO,\n LOGO_TARGET_BUTTON,\n LOGO_TARGET_PROFILE,\n} from '../reducers/reducerButtonFactory';\n\nexport const ACCOUNT_IDENTIFIER_TYPES = {\n MERCHANT_ACCOUNT_ID: 'merchantAccountId',\n EMAIL_ADDRESS: 'emailAddress',\n};\n\n// All supported server button props\nexport const SERVER_BUTTON = {\n ID: 'id',\n WEBSITE_CODE: 'website_code',\n EMAIL_CODE: 'email_code',\n CODE: 'code',\n TYPE: 'type',\n SUBTYPE: 'sub_type',\n BUTTON_IMAGE: 'button_image',\n BUTTON_IMAGE_URL: 'button_image_url',\n COUNTRY_CODE: 'country_code',\n LANGUAGE: 'language',\n BUTTON_VARIABLES: 'button_variables',\n CURRENCY_CODE: 'currency_code',\n LC: 'lc',\n BN: 'bn',\n ITEM_NAME: 'item_name',\n ITEM_NUMBER: 'item_number',\n NO_NOTE: 'no_note',\n NO_SHIPPING: 'no_shipping',\n CANCEL_RETURN: 'cancel_return',\n RETURN: 'return',\n BUSINESS: 'business',\n AMOUNT: 'amount',\n AMOUNT_TYPE: 'amount_type',\n AMOUNT_OPTIONS: 'amount_options',\n LOGO_URL: 'cpp_header_image',\n DONATE_CONTEXT: 'donate_context',\n RECURRING_OPTION: 'recurring_option',\n NO_RECURRING: 'no_recurring',\n COVER_FEES_OPTION: 'donor_covers_fees',\n PROGRAMNAMES: 'program_names',\n LOGO_TARGET: 'logo_target',\n};\n\n// All supported client button props\nexport const CLIENT_BUTTON = {\n ID: 'id',\n CODE: 'code',\n TYPE: 'type',\n BUTTON_IMAGE: 'buttonImage',\n BUTTON_IMAGE_URL: 'buttonImageUrl',\n COUNTRY_CODE: 'countryCode',\n LANGUAGE: 'language',\n CURRENCY_CODE: 'currencyCode',\n LC: 'lc',\n BN: 'bn',\n ITEM_NAME: 'purpose',\n ITEM_NUMBER: 'itemNumber',\n NO_NOTE: 'noNote',\n NO_SHIPPING: 'noShipping',\n CANCEL_RETURN: 'cancelReturn',\n RETURN: 'return',\n BUSINESS: 'business',\n AMOUNT: 'amountValue',\n AMOUNT_TYPE: 'amountType',\n MERCHANT_AMOUNT_1: 'merchantAmount1',\n MERCHANT_AMOUNT_2: 'merchantAmount2',\n MERCHANT_AMOUNT_3: 'merchantAmount3',\n PURPOSE: 'purpose',\n USE_PAYPAL_BUTTON_STYLE: 'usePaypalButtonStyle',\n SHOW_ACCEPTED_CARD_LOGOS: 'showAcceptedCardLogos',\n BTN_SIZE: 'buttonSize',\n RECEIVER_CURRENCY: 'receiverCurrency',\n ACCOUNT_IDENTIFIER_TYPE: 'accountIdentifierType',\n ORGANIZATION_NAME: 'organizationName',\n LOGO_URL: 'logoUrl',\n SETTINGS_LOGO_URL: 'settingsLogoUrl',\n SHOW_ACCOUNT_LOGO_OPTIONS: 'showAccountLogoOptions',\n BUTTON_VARIABLES: 'extraVariablesView',\n RECURRING_OPTION: 'recurringEnabled',\n COVER_FEES_OPTION: 'coverFeesEnabled',\n LISTPROGRAMS: 'listPrograms',\n PROGRAMNAMES: 'programNames',\n LOGO_TARGET: 'logoTarget',\n PROGRAMINPUT: 'programInput',\n};\n\n/**\n * Gets value of a button property in the button_variables array\n * @param {Object} button Button object(server format)\n * @param {String} property Property to get\n * @return {String} Value of the property\n */\nexport function getButtonVariable(button, property) {\n const buttonVar = _find(button.button_variables, (buttonVariable) => {\n return buttonVariable.name === property;\n });\n\n return _get(buttonVar, 'value');\n}\n\n/**\n * Adds button variable to the button_variables array\n * @param {Object} clientFormat Button object(client format)\n * @param {String} clientKey Client property\n * @param {Object} serverFormat Button object(server format)\n * @param {String} serverKey Server property\n */\nfunction addButtonVariable(clientFormat, clientKey, serverFormat, serverKey) {\n if (clientFormat[clientKey] !== undefined) {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: serverKey,\n value: clientFormat[clientKey],\n });\n }\n}\n\n/**\n * Returns true if accepted card logos should be displayed\n */\nexport const shouldShowAcceptedCardLogos = (button) => {\n return !!/CC_/.test(button.button_image_url); // eslint-disable-line\n};\n\nconst buttonSizeMap = {\n sm: 'small',\n md: 'medium',\n lg: 'large',\n};\n\n/**\n * Gets button size\n * @param {Object} button Button\n * @return {String} Size of the button ('small' or 'large')\n */\nexport const getButtonSize = (button) => {\n const size = /_(\\D{2})\\.gif/.exec(button.button_image_url); // eslint-disable-line\n if (size && size.length) {\n return buttonSizeMap[size[1].toLowerCase()];\n }\n\n // Default to 'small' ?\n return 'small';\n};\n\n/**\n * Gets button image and button image url\n */\nexport const getButtonImageAndUrl = (\n buttonSize,\n showAcceptedCardLogos,\n locale,\n country\n) => {\n const buttonImageUrl = getDonateButtonImageUrl(\n buttonSize,\n showAcceptedCardLogos,\n locale,\n country\n );\n let buttonImage = 'REG';\n if (showAcceptedCardLogos) {\n buttonImage = 'CC';\n }\n\n if (buttonSize === 'small') {\n buttonImage = 'SML';\n }\n\n return {\n button_image: buttonImage,\n button_image_url: buttonImageUrl,\n };\n};\n\n/**\n * Returns true if its a Paypal button\n */\nexport const shouldUsePayPalButtonStyle = (button) => {\n const buttonImageUrl = button.button_image_url || '';\n if (buttonImageUrl.length) {\n if (\n buttonImageUrl.includes('msmaster') ||\n buttonImageUrl.includes('paypalobjects') ||\n buttonImageUrl.includes('paypal.com')\n ) {\n return 'yes';\n }\n }\n\n return 'no';\n};\n\nexport const getAccountIdentifierType = (value) => {\n // Is this an email address or encrypted_account_number\n if (value && value.indexOf('@') !== -1) {\n return ACCOUNT_IDENTIFIER_TYPES.EMAIL_ADDRESS;\n }\n return ACCOUNT_IDENTIFIER_TYPES.MERCHANT_ACCOUNT_ID;\n};\n\nexport const getAccountIdentifierValue = (isServerToClient, serverFormat) => {\n const reduxStore = getStore();\n const reduxState = reduxStore.getState();\n const isLoggedIn = isLoggedInUser(_get(reduxState, 'application'));\n const accountIdentifier = _get(\n reduxStore.getState(),\n 'application.accountIdentifier'\n );\n\n if (!isLoggedIn) {\n return getButtonVariable(serverFormat, SERVER_BUTTON.BUSINESS);\n }\n\n if (isServerToClient) {\n return _get(accountIdentifier, 'email');\n }\n\n return _get(accountIdentifier, 'encrypted_account_number');\n};\n\nexport const getLogoUrlFieldValues = (serverFormatButton) => {\n // Payment Settings logo url\n const reduxState = getStore().getState();\n const merchantExperienceUrl = _get(\n reduxState,\n 'application.merchantExperienceUrls.logoUrl'\n );\n const businessImageUrl = _get(\n reduxState,\n 'application.businessImageUrls.url'\n );\n\n // Set logo values for clientSide\n const settingsLogoUrl = merchantExperienceUrl\n ? merchantExperienceUrl\n : businessImageUrl;\n let logoUrl = getButtonVariable(serverFormatButton, 'cpp_header_image');\n const showAccountLogoOptions = merchantExperienceUrl || businessImageUrl;\n\n let logoTarget = LOGO_TARGET_NOLOGO;\n\n // If user has specified logo\n if (logoUrl && isValidSecureUrl(logoUrl)) {\n // If url is same as \"settings\" url\n if (logoUrl === merchantExperienceUrl || logoUrl === businessImageUrl) {\n logoTarget = LOGO_TARGET_PROFILE;\n logoUrl = ''; // Don't display this value in the UI\n } else {\n logoTarget = LOGO_TARGET_BUTTON;\n }\n } else {\n // User has not specified a logo url\n // If logo is present in \"settings\", use it\n // eslint-disable-next-line no-lonely-if\n if (\n isValidSecureUrl(merchantExperienceUrl) ||\n isValidSecureUrl(businessImageUrl)\n ) {\n logoTarget = LOGO_TARGET_PROFILE;\n }\n }\n\n return {\n logoTarget,\n logoUrl,\n settingsLogoUrl,\n showAccountLogoOptions,\n };\n};\n\n/**\n * The logo value to be saved in the button\n * If user has entered a value, then save it in the button.\n * If not, no value should be saved\n * @param {String} logoUrl User entered logo url\n * @return {String} Logo Url to be saved in the button\n */\nexport const getServerValueForLogoUrl = (logoTarget, logoUrl) => {\n if (logoTarget === LOGO_TARGET_PROFILE) {\n const reduxStore = getStore();\n const merchantExperienceUrl = _get(\n reduxStore.getState(),\n 'application.merchantExperienceUrls.logoUrl'\n );\n\n if (merchantExperienceUrl) {\n // User has Logo in Payment Settings\n // Nothing to save in \"button\"\n return '';\n }\n\n const businessImageUrl = _get(\n reduxStore.getState(),\n 'application.businessImageUrls.url'\n );\n if (businessImageUrl) {\n // User has Logo in Account Settings\n // This has to be saved in the \"button\"\n return businessImageUrl;\n }\n } else {\n // User wants to save the entered logoUrl\n return logoUrl;\n }\n};\n\nexport const checkIfOldButton = (serverFormat) => {\n return _isEmpty(serverFormat[SERVER_BUTTON.DONATE_CONTEXT]);\n};\n\nexport const getRecurringOption = (serverFormat) => {\n const isOldButton = checkIfOldButton(serverFormat);\n const noRecurring = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.NO_RECURRING\n );\n\n if (isOldButton && _isEmpty(noRecurring)) {\n const amountValue = getButtonVariable(serverFormat, SERVER_BUTTON.AMOUNT);\n // for button with fixed amount, default to false.\n return amountValue > 0 ? 'false' : 'true';\n }\n\n if (noRecurring === '0') {\n return 'true';\n } else if (noRecurring === '1') {\n return 'false';\n }\n\n return serverFormat[SERVER_BUTTON.DONATE_CONTEXT][\n SERVER_BUTTON.RECURRING_OPTION\n ];\n};\n\n/**\n * Transform button from server format to client format\n */\nexport const transformServerFormatToClient = (serverFormat) => {\n const clientFormat = {};\n\n if (serverFormat.id) {\n clientFormat.id = serverFormat.id;\n }\n\n // Top level variables\n clientFormat[CLIENT_BUTTON.BUTTON_IMAGE] =\n serverFormat[SERVER_BUTTON.BUTTON_IMAGE];\n clientFormat[CLIENT_BUTTON.BUTTON_IMAGE_URL] =\n serverFormat[SERVER_BUTTON.BUTTON_IMAGE_URL];\n\n // variables from the button_variables array\n const noShipping = getButtonVariable(serverFormat, SERVER_BUTTON.NO_SHIPPING);\n clientFormat[CLIENT_BUTTON.NO_SHIPPING] = noShipping === '0' ? 'no' : 'yes';\n\n const noNote = getButtonVariable(serverFormat, SERVER_BUTTON.NO_NOTE);\n clientFormat[CLIENT_BUTTON.NO_NOTE] = noNote === '0' ? 'no' : 'yes';\n\n clientFormat[CLIENT_BUTTON.RECEIVER_CURRENCY] = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.CURRENCY_CODE\n );\n clientFormat[CLIENT_BUTTON.CANCEL_RETURN] = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.CANCEL_RETURN\n );\n clientFormat[CLIENT_BUTTON.RETURN] = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.RETURN\n );\n clientFormat[CLIENT_BUTTON.PURPOSE] = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.ITEM_NAME\n );\n clientFormat[CLIENT_BUTTON.ITEM_NUMBER] = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.ITEM_NUMBER\n );\n clientFormat[CLIENT_BUTTON.COVER_FEES_OPTION] = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.COVER_FEES_OPTION\n );\n clientFormat[CLIENT_BUTTON.ACCOUNT_IDENTIFIER_TYPE] =\n getAccountIdentifierType(\n getButtonVariable(serverFormat, SERVER_BUTTON.BUSINESS)\n );\n clientFormat[CLIENT_BUTTON.BUSINESS] = getAccountIdentifierValue(\n true,\n serverFormat\n );\n\n const countryCode = serverFormat[SERVER_BUTTON.COUNTRY_CODE];\n clientFormat[CLIENT_BUTTON.COUNTRY_CODE] = countryCode;\n clientFormat[CLIENT_BUTTON.LANGUAGE] = serverFormat[SERVER_BUTTON.LANGUAGE];\n\n // Derived variables\n clientFormat[CLIENT_BUTTON.USE_PAYPAL_BUTTON_STYLE] =\n shouldUsePayPalButtonStyle(serverFormat);\n clientFormat[CLIENT_BUTTON.SHOW_ACCEPTED_CARD_LOGOS] =\n shouldShowAcceptedCardLogos(serverFormat);\n clientFormat[CLIENT_BUTTON.BTN_SIZE] = getButtonSize(serverFormat);\n\n const logoFieldValues = getLogoUrlFieldValues(serverFormat);\n clientFormat[CLIENT_BUTTON.LOGO_URL] = logoFieldValues.logoUrl;\n clientFormat[CLIENT_BUTTON.LOGO_TARGET] =\n getButtonVariable(serverFormat, SERVER_BUTTON.LOGO_TARGET) ||\n logoFieldValues.logoTarget;\n clientFormat[CLIENT_BUTTON.SETTINGS_LOGO_URL] =\n logoFieldValues.settingsLogoUrl;\n clientFormat[CLIENT_BUTTON.SHOW_ACCOUNT_LOGO_OPTIONS] =\n logoFieldValues.showAccountLogoOptions;\n\n const supportedVariables = getSupportedVariables(\n serverFormat.button_variables\n );\n clientFormat.extraVariablesView =\n formatVariablesForTextArea(supportedVariables);\n\n const unsupportedVariables = getUnsupportedVariables(\n serverFormat.button_variables\n );\n clientFormat.unsupportedVariables = unsupportedVariables;\n\n const amount = getButtonVariable(serverFormat, SERVER_BUTTON.AMOUNT);\n const currency = clientFormat[CLIENT_BUTTON.RECEIVER_CURRENCY];\n\n if (amount !== undefined) {\n clientFormat[CLIENT_BUTTON.AMOUNT_TYPE] = 'fixed';\n clientFormat[CLIENT_BUTTON.AMOUNT] = formatAmountFromServer(\n amount,\n currency\n );\n } else {\n clientFormat[CLIENT_BUTTON.AMOUNT_TYPE] = 'variable';\n }\n\n const coverFees = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.COVER_FEES_OPTION\n );\n clientFormat[CLIENT_BUTTON.COVER_FEES_OPTION] =\n coverFees === 'true' ? 'yes' : 'no';\n\n const recurringOption = getRecurringOption(serverFormat);\n clientFormat[CLIENT_BUTTON.RECURRING_OPTION] =\n recurringOption === 'true' ? 'yes' : 'no';\n\n if (!checkIfOldButton(serverFormat)) {\n // For 'fixed' amounttype, do not read from 'donate_context'\n if (clientFormat[CLIENT_BUTTON.AMOUNT_TYPE] !== 'fixed') {\n let amountType =\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][SERVER_BUTTON.AMOUNT_TYPE];\n if (!amountType) {\n amountType = 'variable';\n }\n amountType = amountType.toLowerCase();\n clientFormat[CLIENT_BUTTON.AMOUNT_TYPE] = amountType;\n\n if (clientFormat[CLIENT_BUTTON.AMOUNT_TYPE] === 'merchant_recommended') {\n clientFormat[CLIENT_BUTTON.MERCHANT_AMOUNT_1] = formatAmountFromServer(\n _get(\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT],\n `${SERVER_BUTTON.AMOUNT_OPTIONS}[0]`\n ),\n currency\n );\n clientFormat[CLIENT_BUTTON.MERCHANT_AMOUNT_2] = formatAmountFromServer(\n _get(\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT],\n `${SERVER_BUTTON.AMOUNT_OPTIONS}[1]`\n ),\n currency\n );\n clientFormat[CLIENT_BUTTON.MERCHANT_AMOUNT_3] = formatAmountFromServer(\n _get(\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT],\n `${SERVER_BUTTON.AMOUNT_OPTIONS}[2]`\n ),\n currency\n );\n }\n }\n\n const programNames =\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][SERVER_BUTTON.PROGRAMNAMES];\n if (!_isEmpty(programNames)) {\n clientFormat[CLIENT_BUTTON.LISTPROGRAMS] = 'yes';\n clientFormat[CLIENT_BUTTON.PROGRAMNAMES] = programNames;\n\n for (let i = 0; i < programNames.length; i++) {\n clientFormat[`${CLIENT_BUTTON.PROGRAMINPUT}${i}`] = programNames[i];\n }\n } else {\n clientFormat[CLIENT_BUTTON.LISTPROGRAMS] = 'no';\n clientFormat[CLIENT_BUTTON.PROGRAMNAMES] = [];\n }\n }\n\n // case: 'NEW PROGRAMS'\n // If it is V1 button, convert V1Program to V2Program\n // If it is V2 button, nothing to convert\n if (checkIfOldButton(serverFormat)) {\n const v0Program = getButtonVariable(\n serverFormat,\n SERVER_BUTTON.ITEM_NUMBER\n );\n if (v0Program) {\n clientFormat[CLIENT_BUTTON.LISTPROGRAMS] = 'yes';\n clientFormat[CLIENT_BUTTON.PROGRAMNAMES] = [v0Program];\n }\n }\n\n return clientFormat;\n};\n\n/**\n * Transform button from client format to server format\n */\nexport const transformClientFormatToServer = (clientFormat) => {\n let serverFormat = {};\n\n if (clientFormat.id) {\n serverFormat[SERVER_BUTTON.ID] = clientFormat.id;\n }\n\n const reduxStore = getStore();\n const reduxState = reduxStore.getState();\n const isLoggedIn = isLoggedInUser(_get(reduxState, 'application'));\n const isHosted = _includes(\n ['BUSINESS', 'PREMIER'],\n _get(reduxState, 'application.userType')\n );\n const isMerchantIdEnabled = _includes(\n ['BUSINESS', 'PREMIER', 'PERSONAL'],\n _get(reduxState, 'application.userType')\n );\n const isProgramEnabled = _get(\n reduxStore.getState(),\n 'application.enableProgram'\n );\n const isMerchantPresetAmountEnabled = _get(\n reduxStore.getState(),\n 'application.enableMerchantPresetAmount'\n );\n const isRecurringEnabled = _get(\n reduxStore.getState(),\n 'application.enableRecurring'\n );\n\n serverFormat[SERVER_BUTTON.COUNTRY_CODE] = clientFormat.countryCode;\n serverFormat[SERVER_BUTTON.TYPE] = 'DONATE';\n serverFormat[SERVER_BUTTON.SUBTYPE] = 'PRODUCTS';\n serverFormat[SERVER_BUTTON.LANGUAGE] = clientFormat.language;\n\n // Create array of `button_variables`\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES] = [];\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.PURPOSE,\n serverFormat,\n SERVER_BUTTON.ITEM_NAME\n );\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.CANCEL_RETURN,\n serverFormat,\n SERVER_BUTTON.CANCEL_RETURN\n );\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.RETURN,\n serverFormat,\n SERVER_BUTTON.RETURN\n );\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.RECEIVER_CURRENCY,\n serverFormat,\n SERVER_BUTTON.CURRENCY_CODE\n );\n\n if (isLoggedIn) {\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.LOGO_TARGET,\n serverFormat,\n SERVER_BUTTON.LOGO_TARGET\n );\n }\n\n if (!isHosted && isRecurringEnabled) {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.NO_RECURRING,\n value: clientFormat[CLIENT_BUTTON.RECURRING_OPTION] === 'yes' ? 0 : 1,\n });\n }\n\n if (\n clientFormat.logoTarget &&\n clientFormat.logoTarget === LOGO_TARGET_BUTTON\n ) {\n // logo_url button_variable\n // This field should only be included if user has entered logo url\n const logoUrl = getServerValueForLogoUrl(\n clientFormat.logoTarget,\n clientFormat.logoUrl\n );\n if (logoUrl) {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.LOGO_URL,\n value: logoUrl,\n });\n }\n }\n\n // Business field\n if (isLoggedIn && isMerchantIdEnabled) {\n const accountIdentifierValue = getAccountIdentifierValue(false);\n if (accountIdentifierValue) {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.BUSINESS,\n value: accountIdentifierValue,\n });\n }\n } else {\n clientFormat[CLIENT_BUTTON.BUSINESS] = (\n clientFormat[CLIENT_BUTTON.BUSINESS] || ''\n ).toLowerCase();\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.BUSINESS,\n serverFormat,\n SERVER_BUTTON.BUSINESS\n );\n }\n\n // Amount field\n const amountType = clientFormat[CLIENT_BUTTON.AMOUNT_TYPE];\n if (amountType === 'fixed' && clientFormat[CLIENT_BUTTON.AMOUNT]) {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.AMOUNT,\n value: normalizeNumber(clientFormat[CLIENT_BUTTON.AMOUNT]),\n });\n }\n\n if (isHosted) {\n // Generate donate_context\n // Set `amount_type`\n if (\n isMerchantPresetAmountEnabled ||\n isRecurringEnabled ||\n isProgramEnabled\n ) {\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT] = {};\n }\n\n // Create array of `amount_options`\n if (isMerchantPresetAmountEnabled && amountType !== 'fixed') {\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][SERVER_BUTTON.AMOUNT_TYPE] =\n amountType.toUpperCase();\n\n if (amountType === 'merchant_recommended') {\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][\n SERVER_BUTTON.AMOUNT_OPTIONS\n ] = [];\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][\n SERVER_BUTTON.AMOUNT_OPTIONS\n ].push(normalizeNumber(clientFormat[CLIENT_BUTTON.MERCHANT_AMOUNT_1]));\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][\n SERVER_BUTTON.AMOUNT_OPTIONS\n ].push(normalizeNumber(clientFormat[CLIENT_BUTTON.MERCHANT_AMOUNT_2]));\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][\n SERVER_BUTTON.AMOUNT_OPTIONS\n ].push(normalizeNumber(clientFormat[CLIENT_BUTTON.MERCHANT_AMOUNT_3]));\n }\n }\n\n // Recurring option\n if (isRecurringEnabled) {\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][\n SERVER_BUTTON.RECURRING_OPTION\n ] =\n clientFormat[CLIENT_BUTTON.RECURRING_OPTION] === 'yes'\n ? 'true'\n : 'false';\n }\n\n // Program Names\n if (isProgramEnabled) {\n if (clientFormat[CLIENT_BUTTON.LISTPROGRAMS] === 'yes') {\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][SERVER_BUTTON.PROGRAMNAMES] =\n clientFormat[CLIENT_BUTTON.PROGRAMNAMES];\n } else {\n serverFormat[SERVER_BUTTON.DONATE_CONTEXT][SERVER_BUTTON.PROGRAMNAMES] =\n [];\n }\n }\n }\n\n // Handle ITEM_NUMBER\n // When editing a V1 button in V2, ITEM_NUMBER has to be set to \"\"\n if (isHosted) {\n if (isProgramEnabled) {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.ITEM_NUMBER,\n value: '',\n });\n } else {\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.ITEM_NUMBER,\n serverFormat,\n SERVER_BUTTON.ITEM_NUMBER\n );\n }\n } else {\n addButtonVariable(\n clientFormat,\n CLIENT_BUTTON.ITEM_NUMBER,\n serverFormat,\n SERVER_BUTTON.ITEM_NUMBER\n );\n }\n\n // no_shipping field\n const noShipping = clientFormat[CLIENT_BUTTON.NO_SHIPPING];\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.NO_SHIPPING,\n value: noShipping === 'no' ? 0 : 1,\n });\n\n if (isHosted) {\n const coverFees = clientFormat[CLIENT_BUTTON.COVER_FEES_OPTION];\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.COVER_FEES_OPTION,\n value: coverFees === 'yes' ? 'true' : 'false',\n });\n }\n\n // no_note field\n const noNote = clientFormat[CLIENT_BUTTON.NO_NOTE];\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push({\n name: SERVER_BUTTON.NO_NOTE,\n value: noNote === 'no' ? 0 : 1,\n });\n\n // Add button_image and button_image_url\n if (clientFormat.usePaypalButtonStyle === 'no') {\n serverFormat.button_image_url = clientFormat.buttonImageUrl;\n } else {\n const buttonImageProps = getButtonImageAndUrl(\n clientFormat.buttonSize,\n clientFormat.showAcceptedCardLogos,\n clientFormat.language,\n clientFormat.countryCode\n );\n serverFormat.button_image_url = buttonImageProps.button_image_url;\n serverFormat.button_image = buttonImageProps.button_image;\n }\n\n if (clientFormat.extraVariablesView) {\n const extraVariables = parseTextAreaValue(clientFormat.extraVariablesView);\n _each(extraVariables, (variable) => {\n serverFormat[SERVER_BUTTON.BUTTON_VARIABLES].push(variable);\n });\n }\n\n return serverFormat;\n};\n\nexport function mapServerFieldToClientField(server_field) {\n const field = _findKey(SERVER_BUTTON, (item) => item === server_field);\n return CLIENT_BUTTON[field];\n}\n","import { getServerProps } from './serverProps';\nimport { isLoggedInUser } from './authUtils';\nimport _includes from 'lodash/includes';\nimport _get from 'lodash/get';\nimport _keys from 'lodash/keys';\nimport _map from 'lodash/map';\nimport _isEmpty from 'lodash/isEmpty';\nimport getStore from '../store/configureStore';\nimport { getParameterByName } from '../../utility/queryStringHelper';\nimport { setTitleCase } from './commonUtils';\nimport { showSpinner } from './spinnerUtils';\n\nconst serverProps = getServerProps();\nconst { userType } = serverProps;\n\nexport const WIZARD_TOTAL_STEPS = isHostedFlow() ? 4 : 3;\n\nexport function getNextStep(currentStep, flowType) {\n const totalSteps = getWizardTotalSteps(flowType);\n if (currentStep < totalSteps) {\n return currentStep + 1;\n }\n return 1;\n}\n\nexport function getPreviousStep(currentStep) {\n if (currentStep > 1) {\n return currentStep - 1;\n }\n return 1;\n}\n\nexport function getNextPageUrl(currentPage, currentPath) {\n const nextPage = currentPage === WIZARD_TOTAL_STEPS ? 0 : currentPage + 1;\n\n return `${currentPath}?page=${nextPage}`;\n}\n\nexport function getPreviousPageUrl(currentPage, currentPath) {\n const previousPage = currentPage === 1 ? 1 : currentPage - 1;\n\n return `${currentPath}?page=${previousPage}`;\n}\n\nexport function getPageUrl(pageNumber, currentPath) {\n const page =\n pageNumber >= 1 && pageNumber <= WIZARD_TOTAL_STEPS ? pageNumber : 1;\n\n return `${currentPath}?page=${page}`;\n}\n\nexport function isHostedFlow() {\n return (\n isLoggedInUser(serverProps) && _includes(['BUSINESS', 'PREMIER'], userType)\n );\n}\n\nexport function isUnhostedFlow() {\n return isLoggedInUser(serverProps) && userType === 'PERSONAL';\n}\n\n/**\n * Fetch select options for language field based on the country selection\n */\nexport const getOptionsForLanguageField = (\n countryAndLanguageDetails,\n selectedCountry\n) => {\n const countriesByCode = countryAndLanguageDetails.countriesByCode;\n\n selectedCountry = selectedCountry || 'US';\n\n const allLanguages = countriesByCode[selectedCountry].languages;\n const languageCodes = _keys(allLanguages);\n\n return _map(languageCodes, (languageCode) => {\n return {\n value: languageCode,\n displayValue: setTitleCase(allLanguages[languageCode].name),\n };\n });\n};\n\nexport const getOptionsForCountriesField = (countryAndLanguageDetails) => {\n const countriesByCode = countryAndLanguageDetails.countriesByCode;\n const countryCodes = _keys(countriesByCode);\n\n return _map(countryCodes, (countryCode) => {\n return {\n value: countryCode,\n displayValue: _get(countriesByCode, `${countryCode}.name`),\n };\n });\n};\n\n// Button Factory V3 Specific Utils\nexport function isBF3Enabled() {\n const reduxStore = getStore();\n return _get(reduxStore.getState(), 'application.enableBf3');\n}\n\nexport function getFlowType() {\n // Get from store\n const reduxStore = getStore();\n const state = reduxStore.getState();\n let flowType =\n _get(state, 'buttonManagerV3.formattedButton.flowType', '') ||\n _get(state, 'buttonFactoryV3.formattedButton.flowType', '');\n\n if (_isEmpty(flowType)) {\n flowType = getParameterByName('type') || 'C';\n }\n\n return flowType;\n}\n\nexport const isDonateButton = (type) => {\n const flowType = type || getFlowType();\n\n return flowType.toUpperCase() === 'C' || flowType.toUpperCase() !== 'S';\n};\n\nexport const isDonateLink = (type) => {\n const flowType = type || getFlowType();\n\n return flowType === 'S';\n};\n\nexport function getWizardTotalSteps(type) {\n const flowType = type || getFlowType();\n\n if (isDonateLink(flowType) && isUnhostedFlow()) {\n return 2;\n } else if (isDonateLink(flowType) || isUnhostedFlow()) {\n return 3;\n }\n\n return 4;\n}\n\nexport function getStepUrl(currentLocation, currentStep, targetStep) {\n // For BF V3\n let { pathname, search } = currentLocation;\n const step =\n targetStep >= 1 && targetStep <= getWizardTotalSteps() ? targetStep : 1;\n\n if (search.includes('page')) {\n search = search.replace(`page=${currentStep}`, `page=${step}`);\n } else if (!_isEmpty(search)) {\n search = `${search}&page=${step}`;\n } else {\n search = `${search}?page=${step}`;\n }\n\n return `${pathname}${search}`;\n}\n\nexport function isTablet() {\n return window.innerWidth >= 577 && window.innerWidth <= 1024;\n}\n\nexport function getUserType() {\n return userType;\n}\n\nexport function getEncryptedAccountNum() {\n return serverProps?.accountIdentifier?.encrypted_account_number;\n}\n\nexport function getSavedButtonsCount() {\n return serverProps?.listButtons?.length;\n}\n\nexport const isGuestFormPreview = (currentStep) =>\n (isDonateButton() && currentStep === 4) ||\n (isDonateLink() && currentStep === 3);\n\nexport const handleLoginHelper = (history) => {\n const renderURL = '/donate/buttons/login?returnUri=/buttons/manage';\n history.push(renderURL);\n showSpinner();\n window.location.reload();\n};\n\nexport const handleSignupHelper = (history) => {\n const renderURL = `/bizsignup/entry?returnUrl=https://${window.location.hostname}/donate/buttons/manage`;\n history.push(renderURL);\n showSpinner();\n window.location.reload();\n};\n","export const BTN_FACTORY_FORM = 'buttonFactory';\nexport const BTN_FACTORY_V3_FORM = 'buttonFactoryV3';\nexport const AUTH_STATE_ANONYMOUS = 'ANONYMOUS';\nexport const AUTH_STATE_LOGGEDIN = 'LOGGEDIN';\nexport const BTN_FACTORY_MAX_PROGRAMS = 10;\nexport const BTN_FACTORY_MAX_LENGTH_PROGRAMS = 127;\nexport const MAX_MOBILE_WIDTH = 1024;\n","import _get from 'lodash/get';\nimport _isEmpty from 'lodash/isEmpty';\nimport {\n getButtonVariable,\n SERVER_BUTTON,\n transformClientFormatToServer as transformClientFormatToServerV3,\n} from '../lib/buttonModelV3';\nimport { destroy } from 'redux-form';\nimport { BTN_FACTORY_V3_FORM } from '../clientConstants';\nimport { fetcher } from '../../utility/domUtils';\n\nexport const BUTTON_FACTORY_BUSY = 'BUTTON_FACTORY_BUSY';\nexport const INITIALIZE_WIZARD = 'INITIALIZE_WIZARD';\nexport const WIZARD_CONTINUE = 'WIZARD_CONTINUE';\nexport const WIZARD_BACK = 'WIZARD_BACK';\nexport const WIZARD_SET_CURRENT_PAGE = 'WIZARD_SET_CURRENT_PAGE';\nexport const GET_BUTTON_DATA_SUCCESS = 'GET_BUTTON_DATA_SUCCESS';\nexport const GET_BUTTON_DATA_ERROR = 'GET_BUTTON_DATA_ERROR';\nexport const CREATE_BUTTON_SUCCESS = 'CREATE_BUTTON_SUCCESS';\nexport const CREATE_BUTTON_ERROR = 'CREATE_BUTTON_ERROR';\nexport const EDIT_BUTTON_SUCCESS = 'EDIT_BUTTON_SUCCESS';\nexport const EDIT_BUTTON_ERROR = 'EDIT_BUTTON_ERROR';\nexport const UPDATE_CODE_SNIPPET = 'UPDATE_CODE_SNIPPET';\nexport const SHOW_LOGIN_MODAL = 'SHOW_LOGIN_MODAL';\nexport const HIDE_LOGIN_MODAL = 'HIDE_LOGIN_MODAL';\nexport const SHOW_ACTIONABLE_ERROR_MODAL = 'SHOW_ACTIONABLE_ERROR_MODAL';\nexport const HIDE_ACTIONABLE_ERROR_MODAL = 'HIDE_ACTIONABLE_ERROR_MODAL';\nexport const SHOW_UNACTIONABLE_ERROR_MODAL = 'SHOW_UNACTIONABLE_ERROR_MODAL';\nexport const HIDE_UNACTIONABLE_ERROR_MODAL = 'HIDE_UNACTIONABLE_ERROR_MODAL';\nexport const SHOW_LEAVE_MODAL = 'SHOW_LEAVE_MODAL';\nexport const HIDE_LEAVE_MODAL = 'HIDE_LEAVE_MODAL';\nexport const SET_ERROR_LOADING_IMAGE = 'SET_ERROR_LOADING_IMAGE';\nexport const RESET_ERROR_LOADING_IMAGE = 'RESET_ERROR_LOADING_IMAGE';\nexport const OPEN_MOBILE_PREVIEW = 'OPEN_MOBILE_PREVIEW';\nexport const CLOSE_MOBILE_PREVIEW = 'CLOSE_MOBILE_PREVIEW';\nexport const UPDATE_IS_MOBILE = 'UPDATE_IS_MOBILE';\nexport const UPDATE_FLOW_SPEC = 'UPDATE_FLOW_SPEC';\nexport const UPDATE_BUSINESS_IMAGE_URLS = 'UPDATE_BUSINESS_IMAGE_URLS';\n\nconst transformClientFormatToServer = transformClientFormatToServerV3;\n\nexport function goToNextStep() {\n return {\n type: WIZARD_CONTINUE,\n };\n}\n\nexport function goToPreviousStep() {\n return {\n type: WIZARD_BACK,\n };\n}\n\nexport function setCurrentStep(stepNumber) {\n return {\n type: WIZARD_SET_CURRENT_PAGE,\n payload: stepNumber,\n };\n}\n\nexport function initializeWizard(button) {\n return {\n type: INITIALIZE_WIZARD,\n payload: button,\n };\n}\n\nexport function busy() {\n return {\n type: BUTTON_FACTORY_BUSY,\n };\n}\n\nexport function getButton(buttonId) {\n return (dispatch, getState) => {\n dispatch(busy());\n\n return fetcher(`/donate/api/buttons/${buttonId}`)\n .then((response) => response.json())\n .then((response) => {\n const button = _get(response, 'button');\n\n // When V3 is enabled, and a merchant is editing an V2\n // button, int_type should be default to 'C'\n const flowType = getButtonVariable(button, 'int_type');\n if (_isEmpty(flowType)) {\n button.button_variables.push({\n name: SERVER_BUTTON.FLOW_TYPE,\n value: 'C',\n });\n }\n\n dispatch({\n type: GET_BUTTON_DATA_SUCCESS,\n payload: button,\n });\n\n return button;\n })\n .catch((err) => {\n const error = _get(err, 'responseJSON.button');\n dispatch({\n type: GET_BUTTON_DATA_ERROR,\n payload: { error },\n });\n return err;\n });\n };\n}\n\nexport function saveButton(buttonData) {\n return (dispatch) => {\n if (buttonData.id) {\n return dispatch(updateButton(buttonData));\n }\n\n return dispatch(createButton(buttonData));\n };\n}\n\nexport function createButton(buttonData) {\n const buttonDataServerFormat = transformClientFormatToServer(buttonData);\n\n return (dispatch, getState) => {\n dispatch(busy());\n\n let resParams = {};\n return fetcher('/donate/api/buttons', {\n method: 'POST',\n body: JSON.stringify({\n button: buttonDataServerFormat,\n }),\n })\n .then((response) => {\n resParams = {\n ...resParams,\n status: response.status,\n statusText: response.statusText,\n ok: response.ok,\n };\n return response.json();\n })\n .then((responseJson) => {\n if (!resParams.ok) {\n const error = {\n responseJSON: responseJson,\n ...resParams,\n };\n dispatch({\n type: CREATE_BUTTON_ERROR,\n payload: {\n error,\n },\n });\n return error;\n }\n const button = _get(responseJson, 'button');\n button.merchantExperienceUrls = _get(\n responseJson,\n 'data.clientData.merchantExperienceUrls'\n );\n dispatch({\n type: CREATE_BUTTON_SUCCESS,\n payload: button,\n });\n return { ...responseJson, ok: resParams.ok };\n })\n .catch((error) => {\n dispatch({\n type: CREATE_BUTTON_ERROR,\n payload: {\n error,\n },\n });\n return error;\n });\n };\n}\n\nexport function updateButton(buttonData) {\n const buttonDataServerFormat = transformClientFormatToServer(buttonData);\n\n return (dispatch, getState) => {\n dispatch(busy());\n\n let resParams = {};\n return fetcher(`/donate/api/buttons/${buttonData.id}`, {\n method: 'PUT',\n body: JSON.stringify({\n button: buttonDataServerFormat,\n }),\n })\n .then((response) => {\n resParams = {\n ...resParams,\n status: response.status,\n statusText: response.statusText,\n ok: response.ok,\n };\n return response.json();\n })\n .then((responseJson) => {\n if (!resParams.ok) {\n const error = {\n responseJSON: responseJson,\n ...resParams,\n };\n dispatch({\n type: EDIT_BUTTON_ERROR,\n payload: {\n error,\n },\n });\n return error;\n }\n const button = _get(responseJson, 'button');\n dispatch({\n type: EDIT_BUTTON_SUCCESS,\n payload: button,\n });\n return { ...responseJson, ok: resParams.ok };\n })\n .catch((error) => {\n dispatch({\n type: EDIT_BUTTON_ERROR,\n payload: {\n error,\n },\n });\n return error;\n });\n };\n}\n\nexport function updateCodeSnippet(code) {\n return {\n type: UPDATE_CODE_SNIPPET,\n payload: code,\n };\n}\n\nexport function showLoginModal() {\n return {\n type: SHOW_LOGIN_MODAL,\n };\n}\n\nexport function hideLoginModal() {\n return {\n type: HIDE_LOGIN_MODAL,\n };\n}\n\nexport function showActionableErrorModal() {\n return {\n type: SHOW_ACTIONABLE_ERROR_MODAL,\n };\n}\n\nexport function hideActionableErroModal() {\n return {\n type: HIDE_ACTIONABLE_ERROR_MODAL,\n };\n}\n\nexport function showUnactionableErrorModal() {\n return {\n type: SHOW_UNACTIONABLE_ERROR_MODAL,\n };\n}\n\nexport function hideUnactionableErrorModal() {\n return {\n type: HIDE_UNACTIONABLE_ERROR_MODAL,\n };\n}\n\nexport function showLeaveModal() {\n return {\n type: SHOW_LEAVE_MODAL,\n };\n}\n\nexport function hideLeaveModal() {\n return {\n type: HIDE_LEAVE_MODAL,\n };\n}\n\nexport function destroyForm() {\n return (dispatch) => {\n const form = BTN_FACTORY_V3_FORM;\n dispatch(destroy(form));\n };\n}\n\nexport function setErrorLoadingLogoImage() {\n return {\n type: SET_ERROR_LOADING_IMAGE,\n };\n}\n\nexport function resetErrorLoadingLogoImage() {\n return {\n type: RESET_ERROR_LOADING_IMAGE,\n };\n}\n\nexport function openMobilePreview() {\n return {\n type: OPEN_MOBILE_PREVIEW,\n };\n}\n\nexport function closeMobilePreview() {\n return {\n type: CLOSE_MOBILE_PREVIEW,\n };\n}\n\nexport function updateIsMobile(isMobile) {\n return {\n type: UPDATE_IS_MOBILE,\n payload: isMobile,\n };\n}\n\nexport function updateFlowSpec(flowSpec) {\n return {\n type: UPDATE_FLOW_SPEC,\n payload: flowSpec,\n };\n}\n\nexport function uploadImage(imageUrl) {\n return () => {\n let resParams = {};\n return fetcher('/donate/api/imageUpload', {\n method: 'POST',\n body: JSON.stringify({\n src: imageUrl,\n }),\n })\n .then((response) => {\n resParams = {\n ...resParams,\n status: response.status,\n statusText: response.statusText,\n ok: response.ok,\n };\n return response.json();\n })\n .then((responseJson) => {\n if (!resParams.ok) {\n const error = {\n responseJson: responseJson.success,\n ...resParams,\n };\n return error;\n }\n const url = _get(responseJson, 'url');\n return { src: url.imageUrl, ok: resParams.ok, success: url.success };\n })\n .catch((error) => {\n return error;\n });\n };\n}\n\nexport function updateBusinessProfileLogo(imageUrl) {\n return () => {\n let resParams = {};\n return fetcher('/donate/api/updateBusinessProfile', {\n method: 'PUT',\n body: JSON.stringify({\n url: imageUrl,\n }),\n })\n .then((response) => {\n resParams = {\n resParams,\n status: response.status,\n statusText: response.statusText,\n ok: response.ok,\n };\n return response.json();\n })\n .then((responseJson) => {\n if (!resParams.ok) {\n const error = {\n success: responseJson.success,\n ...resParams,\n };\n return error;\n }\n return { ok: resParams.ok, success: responseJson.success };\n })\n .catch((error) => {\n return error;\n });\n };\n}\n\nexport function updateBusinessImageUrls(url) {\n return {\n type: UPDATE_BUSINESS_IMAGE_URLS,\n url,\n };\n}\n","import {\n BUTTON_FACTORY_BUSY,\n INITIALIZE_WIZARD,\n WIZARD_CONTINUE,\n WIZARD_BACK,\n WIZARD_SET_CURRENT_PAGE,\n CREATE_BUTTON_SUCCESS,\n CREATE_BUTTON_ERROR,\n EDIT_BUTTON_SUCCESS,\n EDIT_BUTTON_ERROR,\n GET_BUTTON_DATA_SUCCESS,\n GET_BUTTON_DATA_ERROR,\n UPDATE_CODE_SNIPPET,\n SHOW_LOGIN_MODAL,\n HIDE_LOGIN_MODAL,\n SHOW_ACTIONABLE_ERROR_MODAL,\n HIDE_ACTIONABLE_ERROR_MODAL,\n SHOW_UNACTIONABLE_ERROR_MODAL,\n HIDE_UNACTIONABLE_ERROR_MODAL,\n SHOW_LEAVE_MODAL,\n HIDE_LEAVE_MODAL,\n SET_ERROR_LOADING_IMAGE,\n RESET_ERROR_LOADING_IMAGE,\n} from '../actions/actionsButtonFactory';\nimport {\n getNextStep,\n getOptionsForLanguageField,\n getPreviousStep,\n WIZARD_TOTAL_STEPS,\n} from '../utils/buttonFactoryUtils';\nimport { transformServerFormatToClient } from '../lib/buttonModel';\nimport { getServerProps } from '../utils/serverProps';\nimport _get from 'lodash/get';\n\nconst settingsLogoUrl = getSettingsLogoUrl();\n\nconst getDefaultValueForLanguage = () => {\n const serverProps = getServerProps();\n const countryAndLanguageDetails = _get(\n serverProps,\n 'countryAndLanguageDetails'\n );\n const selectedCountry = _get(serverProps, 'selectedCountry');\n const languages = getOptionsForLanguageField(\n countryAndLanguageDetails,\n selectedCountry\n );\n // Get first language\n let language = _get(languages, '[0].value');\n return language || 'en';\n};\n\nexport const LOGO_TARGET_BUTTON = 'BUTTON';\nexport const LOGO_TARGET_PROFILE = 'PROFILE';\nexport const LOGO_TARGET_NOLOGO = 'NOLOGO';\n\nexport const defaultButton = {\n accountIdentifierType: 'merchantAccountId',\n allowPrograms: 'No',\n amountType: 'variable',\n amountValue: '',\n business: getServerProps().accountIdentifier.email,\n buttonSize: 'large',\n countryCode: getServerProps().country,\n coverFeesEnabled: 'yes',\n extraVariables: {},\n extraVariablesView: '',\n itemNumber: '',\n language: getDefaultValueForLanguage(),\n listPrograms: 'no',\n logoTarget: settingsLogoUrl ? LOGO_TARGET_PROFILE : LOGO_TARGET_NOLOGO,\n logoUrl: '',\n merchantAmount1: '',\n merchantAmount2: '',\n merchantAmount3: '',\n noNote: 'no',\n noShipping: 'yes',\n organizationName: getServerProps().organizationName,\n programNames: [],\n purpose: '',\n receiverCurrency: getServerProps().primaryCurrency[0],\n recurringEnabled: 'yes',\n settingsLogoUrl,\n showAcceptedCardLogos: false,\n uploadNewLogo: 'no',\n usePaypalButtonStyle: 'yes',\n version: '2.0', // just to differntiate the experience where button was created\n};\n\nexport const initialState = {\n formattedButton: defaultButton,\n};\n\nconst defaultState = {\n currentStep: 1,\n totalSteps: WIZARD_TOTAL_STEPS,\n busy: true, // We fetch button on load, hence set this to busy\n customVariable: '',\n waiting: false,\n showLoginModal: false,\n errorLoadingLogoImage: false,\n showUnactionableErrorModal: false,\n showActionableErrorModal: false,\n showLeaveModal: false,\n};\n\nfunction getFormattedButton(payload) {\n // organizationName is not stored in BF service\n // fetching from server to make sure it gets pre-filled when user is editing/duplicating a button\n return Object.assign({}, transformServerFormatToClient(payload), {\n organizationName: getServerProps().organizationName,\n language: payload.language,\n });\n}\nfunction getSettingsLogoUrl() {\n const merchantExperienceUrl = _get(\n getServerProps(),\n 'merchantExperienceUrls.logoUrl'\n );\n const businessImageUrl = _get(getServerProps(), 'businessImageUrls.url');\n\n return merchantExperienceUrl ? merchantExperienceUrl : businessImageUrl;\n}\n\nexport default function buttonFactory(state = defaultState, action) {\n switch (action.type) {\n case BUTTON_FACTORY_BUSY: {\n return {\n ...state,\n busy: true,\n };\n }\n\n case INITIALIZE_WIZARD: {\n const button = action.payload;\n let clientSideState = initialState;\n if (button) {\n clientSideState = {\n formattedButton: getFormattedButton(button),\n };\n }\n\n return {\n ...state,\n button: action.payload,\n ...clientSideState,\n busy: false,\n };\n }\n\n case WIZARD_CONTINUE: {\n const { currentStep } = state;\n\n return {\n ...state,\n currentStep: getNextStep(currentStep),\n };\n }\n\n case WIZARD_BACK: {\n const { currentStep } = state;\n\n return {\n ...state,\n currentStep: getPreviousStep(currentStep),\n };\n }\n\n case WIZARD_SET_CURRENT_PAGE: {\n return {\n ...state,\n currentStep: action.payload,\n };\n }\n\n case CREATE_BUTTON_SUCCESS: {\n return {\n ...state,\n button: action.payload,\n formattedButton: getFormattedButton(action.payload),\n busy: false,\n error: null,\n isButtonCreated: true,\n };\n }\n\n case CREATE_BUTTON_ERROR: {\n const { error } = action.payload;\n\n return {\n ...state,\n error,\n busy: false,\n };\n }\n\n case EDIT_BUTTON_SUCCESS: {\n return {\n ...state,\n button: action.payload,\n formattedButton: getFormattedButton(action.payload),\n busy: false,\n error: null,\n };\n }\n\n case EDIT_BUTTON_ERROR: {\n const { error } = action.payload;\n\n return {\n ...state,\n error,\n busy: false,\n };\n }\n\n case GET_BUTTON_DATA_SUCCESS: {\n const newState = {\n ...state,\n button: action.payload,\n formattedButton: getFormattedButton(action.payload),\n busy: false,\n };\n return newState;\n }\n\n case GET_BUTTON_DATA_ERROR: {\n const { error } = action.payload;\n\n return {\n ...state,\n error,\n busy: false,\n };\n }\n\n case UPDATE_CODE_SNIPPET: {\n return {\n ...state,\n customVariable: action.payload,\n };\n }\n\n case SHOW_LOGIN_MODAL: {\n return {\n ...state,\n showLoginModal: true,\n };\n }\n\n case HIDE_LOGIN_MODAL: {\n return {\n ...state,\n showLoginModal: false,\n };\n }\n\n case SHOW_ACTIONABLE_ERROR_MODAL: {\n return {\n ...state,\n showActionableErrorModal: true,\n };\n }\n\n case HIDE_ACTIONABLE_ERROR_MODAL: {\n return {\n ...state,\n showActionableErrorModal: false,\n };\n }\n\n case SHOW_UNACTIONABLE_ERROR_MODAL: {\n return {\n ...state,\n showUnactionableErrorModal: true,\n };\n }\n\n case HIDE_UNACTIONABLE_ERROR_MODAL: {\n return {\n ...state,\n showUnactionableErrorModal: false,\n };\n }\n\n case SHOW_LEAVE_MODAL: {\n return {\n ...state,\n showLeaveModal: true,\n };\n }\n\n case HIDE_LEAVE_MODAL: {\n return {\n ...state,\n showLeaveModal: false,\n };\n }\n\n case SET_ERROR_LOADING_IMAGE: {\n return {\n ...state,\n errorLoadingLogoImage: true,\n };\n }\n\n case RESET_ERROR_LOADING_IMAGE: {\n return {\n ...state,\n errorLoadingLogoImage: false,\n };\n }\n\n default:\n return state;\n }\n}\n","import { addClass, removeClass } from '../../utility/domUtils';\n\nexport function showSpinner() {\n addClass('#button-factory-spinner', ['show']);\n}\n\nexport function hideSpinner() {\n removeClass('#button-factory-spinner', ['show']);\n}\n","import { init } from 'pp-react-l10n';\nconst locals =\n JSON.parse(document.getElementById('localeMessages').innerHTML) || {};\nconst content = {\n locals,\n};\ninit({ content });\n\nlet allLocaleMessages;\n\nconst getLocaleMessages = (propertyName) => {\n if (!propertyName) {\n console.warn('Missing template name');\n }\n try {\n if (!allLocaleMessages) {\n allLocaleMessages = JSON.parse(\n document.getElementById('localeMessages').innerHTML || {}\n );\n }\n return allLocaleMessages[propertyName] || allLocaleMessages;\n } catch (e) {\n console.warn('Please attach locales to DOM');\n return {};\n }\n};\n\nexport default getLocaleMessages;\n","var map = {\n\t\"./\": \"EeZX\",\n\t\"./common\": \"U/bi\",\n\t\"./common.js\": \"U/bi\",\n\t\"./index\": \"EeZX\",\n\t\"./index.js\": \"EeZX\",\n\t\"./msgeo\": \"efw1\",\n\t\"./msgeo.js\": \"efw1\",\n\t\"./pp_cn\": \"ZiC+\",\n\t\"./pp_cn.js\": \"ZiC+\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"X4ip\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport getLocaleMessages from '../../utils/localesMessages';\nimport { Divider, Switch, Badge } from '@paypalcorp/pp-react'; // For some reason if we import it from pp-react-switch, we don't get the inline and secondary label feature\nimport { shouldShowBadge } from '../../utilsV3/badgeUtils';\n\nconst { toggle = {} } = getLocaleMessages('buttonsV3/switches');\n\nexport const renderSwitchComponent = (props) => {\n if (props.reversed) {\n return \n \n
\n \n
\n \n \n \n \n
\n \n {currencySymbol && !isSymbolDisplayedRightSide && (\n \n {currencySymbol}\n \n )}\n \n {currencyAmount}\n \n\n {currencySymbol && isSymbolDisplayedRightSide && (\n \n {currencySymbol}\n \n )}\n
\n \n \n \n {errorText}\n \n \n
\n );\n}\n\nNoteFieldError.propTypes = {\n errorText: PropTypes.string,\n};\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport templateData, { localsMessages } from '../utility/getTemplateData';\nimport * as AppActions from '../actions/AppActions';\nimport AppStore from '../stores/AppStore';\nimport { addClass, removeClass } from '../utility/domUtils';\nimport { isExternalFlow } from '../utility/externalIntegrationUtils';\nimport isEmpty from 'lodash/isEmpty';\nimport { EVENT_NAME } from '../utility/constants';\nimport { IconButton, TextArea, BodyText } from '@paypalcorp/pp-react';\nimport NoteFieldError from './NoteFieldError';\nimport { trackLinkClick } from '../fpti/fpti';\nimport { LINK_NAME } from '../fpti/fptiConstants';\n\nlet messages = localsMessages('common/note');\nconst MAX_CHAR_LIMIT = 250;\n\nfunction NoteComponent(props) {\n let { label = '', error: { lengthLimit = '' } = {} } = messages.note;\n\n let providedLabel = label;\n if (templateData.charityNoteEnabled && templateData.charityNoteLabel) {\n providedLabel = templateData.charityNoteLabel;\n }\n\n if (props.label) {\n providedLabel = props.label;\n }\n\n const [donationNote, setDonationNote] = useState(\n AppStore.getDonationNote() || templateData.donationNote || ''\n );\n const initialNoteLabel = isEmpty(donationNote) ? providedLabel : donationNote;\n\n const [showLabel, setShowLabel] = useState(true);\n const [showError, setShowError] = useState(false);\n const [noteLabel, setNoteLabel] = useState(initialNoteLabel);\n const textAreaEl = useRef(null);\n\n const isNoteTextPresent = donationNote.length > 0 ? true : false;\n\n useEffect(() => {\n if (!showLabel && !isEmpty(textAreaEl)) {\n textAreaEl.current.focus();\n }\n }, [showLabel]);\n useEffect(() => {\n if (isNoteTextPresent) {\n setShowLabel(false);\n }\n }, []);\n useEffect(() => {\n if (props.isNotePreview) {\n setNoteLabel(initialNoteLabel);\n }\n }, [initialNoteLabel]);\n\n const directionality = templateData.contextLocalityDir;\n\n const handleClick = () => {\n trackLinkClick(LINK_NAME.NOTE_PAD, {\n eventName: isExternalFlow()\n ? EVENT_NAME.DW_GIVING_DONATE_SETUP_COMMENT_PRESSED\n : '',\n });\n setShowLabel(false);\n };\n\n const handleBlur = (event) => {\n const note = event.target.value;\n\n // Remove all whitespaces\n if (!isEmpty(note) && !isEmpty(note.trim())) {\n AppActions.changeNote({ note });\n setNoteLabel(note);\n } else {\n AppActions.changeNote({ note: '' });\n setNoteLabel(providedLabel);\n setShowLabel(true);\n }\n };\n\n const showNoteFieldError = () => {\n setShowError(true);\n };\n\n const hideNoteFieldError = () => {\n setShowError(false);\n };\n\n const handleOnChange = (event) => {\n const value = event.target.value;\n setDonationNote(value);\n\n if (value && value.length >= MAX_CHAR_LIMIT) {\n addClass('.note_wrap', ['animated', 'shake']);\n setTimeout(() => {\n removeClass('.note_wrap', ['animated', 'shake']);\n }, 1000);\n showNoteFieldError();\n } else {\n hideNoteFieldError();\n }\n };\n\n return (\n \n \n {showLabel ? (\n \n ) : (\n
\n \n );\n}\n\nNoteComponent.propTypes = {\n label: PropTypes.string,\n isNotePreview: PropTypes.bool,\n};\n\nexport default NoteComponent;\n","import React from 'react';\nimport { HeadingText } from '@paypalcorp/pp-react';\nimport getLocaleMessages from '../../utils/localesMessages';\n\nconst {\n preview: { paymentInfo },\n} = getLocaleMessages('buttonsV3/preview');\n\nconst DonorPaymentInfoSkeleton = () => {\n return (\n \n
\n )}\n\n {showError && showLabel && \n \n {paymentInfo}\n \n \n \n \n
\n );\n};\n\nexport default DonorPaymentInfoSkeleton;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport _get from 'lodash/get';\nimport getLocaleMessages from '../../utils/localesMessages';\nimport { getVoucherDetail } from '../partner/utils/partnerUtils';\nimport {\n Accordion,\n AccordionRow,\n BodyText,\n CaptionText,\n Divider,\n Icon,\n Row,\n} from '@paypalcorp/pp-react';\n\nconst { phoneComponent: { voucher = {} } = {} } =\n getLocaleMessages('buttonsV3/partner');\n\nconst VoucherPreviewComponent = ({ offerProgram, receiverName }) => {\n const voucherMessageHeader = _get(voucher, 'message.header', '').split(\n '{messageMerchantName}'\n );\n const { voucherDetails, discountTagline } = getVoucherDetail({\n offerProgram,\n });\n\n const voucherHeading = (\n \n \n
\n );\n\n return (\n \n \n {_get(voucherMessageHeader, '0', '')}\n {receiverName}\n {_get(voucherMessageHeader, '1', '')}\n \n {`\"${voucherDetails}\"`} \n
\n \n {isEmpty(bannerImageUrl) ? (\n \n {{previewMessage}}\n \n ) : (\n
\n )}\n \n
\n )}\n\n {!displayGuestFormPreview &&\n coverFeesEnabled === 'yes' &&\n isHostedFlow() && (\n \n
\n )}\n\n {displayNote && \n
\n );\n }\n}\n\nexport default BasicSelectField;\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Checkbox } from '@paypalcorp/pp-react-checkbox';\n\nclass CheckboxField extends Component {\n static propTypes = {\n input: PropTypes.object,\n label: PropTypes.string,\n meta: PropTypes.object,\n id: PropTypes.string,\n disabled: PropTypes.bool,\n };\n\n render() {\n const { input, label, id } = this.props;\n\n const isDisabled = !!this.props.disabled;\n\n return (\n \n \n \n {displayEditIcon ? messages.editButton : messages.changeLogo}\n \n
\n ) : (\n {messages.imgType}
\n )}\n {dropzoneError && (\n\n \n {selectionLabel}\n \n
\n );\n};\n\nButtonStyles.propTypes = {\n setImageUpdated: PropTypes.func,\n optionsForCountry: PropTypes.array,\n optionsForLanguage: PropTypes.array,\n dispatch: PropTypes.func,\n formValues: PropTypes.object,\n dropzoneError: PropTypes.string,\n setDropzoneError: PropTypes.func,\n showBadge: PropTypes.bool,\n};\n\nexport default ButtonStyles;\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\n\nimport { HeadingText, BodyText } from '@paypalcorp/pp-react-text';\n\nimport getLocaleMessages from '../../../utils/localesMessages';\nimport { isDonateButton } from '../../../utils/buttonFactoryUtils';\n\nconst { button, link } = getLocaleMessages('buttonsV3/stepHeader');\n\nconst StepHeader = ({ currentStep }) => {\n const stepHeaders = isDonateButton()\n ? button?.[currentStep]\n : link?.[currentStep];\n\n return stepHeaders ? (\n \n
\n )}\n\n \n
\n )}\n \n \n {dropzoneError}\n \n )}\n
\n )}\n \n \n textAreaEl.current.focus()}\n >\n {`${byteCount}/${maxByteLimit}`}\n
\n \n {errorText && (\n \n \n {title}\n \n {subTitle} \n
\n );\n}\n\nexport default Purpose;\n","import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport DropZoneComponent from '../../../components/common/DropZone';\nimport { IMG_SCALE_SIZE } from '../../../utility/constants';\nimport { BodyText } from '@paypalcorp/pp-react-text';\nimport { Checkbox } from '@paypalcorp/pp-react-checkbox';\nimport { Button } from '@paypalcorp/pp-react-buttons';\nimport { change } from 'redux-form';\nimport { BTN_FACTORY_V3_FORM } from '../../clientConstants';\nimport { IconButton } from '@paypalcorp/pp-react-icon-button';\nimport { TrashIcon } from '@paypalcorp/pp-react-icons';\nimport { Alert } from '@paypalcorp/pp-react-alert';\nimport _isEmpty from 'lodash/isEmpty';\nimport {\n LOGO_TARGET_BUTTON,\n LOGO_TARGET_NOLOGO,\n LOGO_TARGET_PROFILE,\n} from '../../reducers/reducerButtonFactoryV3';\n\nimport getLocaleMessages from '../../../buttons/utils/localesMessages';\nimport { trackEventWithData } from '../../utilsV3/analytics';\nimport { FPTI_SPEC, SCREEN } from '../../utilsV3/fptiConstants';\nimport { getUserType } from '../../utils/buttonFactoryUtils';\nconst errors = getLocaleMessages('buttonsV3/fieldErrors');\n\nconst DropzoneLogo = ({\n dispatch,\n uploadImage,\n updateBusinessProfileLogo,\n updateBusinessImageUrls,\n getContent,\n closeModal,\n logoUrl,\n setLogoImg,\n logoTarget,\n isLogoBusinessProfile,\n setIsLogoBusinessProfile,\n}) => {\n const logo = getContent('modal.logo');\n const checkbox = getContent('modal.checkbox', null, { useHTML: true });\n const checkboxHelpText = getContent('modal.checkboxHelpText');\n const saveButton = getContent('modal.saveButton');\n const deleteButton = getContent('modal.deleteButton');\n const userType = getUserType();\n\n const [imageData, setImageData] = useState();\n const [showSpinner, setShowSpinner] = useState(false);\n const [checkboxValue, setCheckboxValue] = useState(true);\n const [imageUpdated, setImageUpdated] = useState(false);\n const [dropzoneError, setDropzoneError] = useState('');\n const [showSaveButton, setShowSaveButton] = useState(false);\n\n const handleImageDropzone = (image) => {\n setDropzoneError('');\n if (image.hasError) {\n setDropzoneError(image.error);\n trackEventWithData(FPTI_SPEC.FIELD_LEVEL_ERROR_IM, {\n error_code: 'IMAGE_DROPZONE_ERROR',\n error_desc: 'logo',\n error_detail: image.error,\n screen: SCREEN.EXPERIENCE_SETUP,\n });\n } else {\n trackEventWithData(FPTI_SPEC.UPLOAD_LOGO_MODAL_IMAGE_UPDATED);\n setImageUpdated(true);\n setImageData(image);\n setIsLogoBusinessProfile(false);\n }\n };\n\n useEffect(() => {\n if (logoUrl) {\n setImageData({\n src: logoUrl,\n name: logoUrl.split('/').pop(),\n });\n }\n }, []);\n\n const handleImageUpload = async () => {\n return new Promise((resolve, reject) => {\n uploadImage(imageData.src)\n .then((response) => {\n if (response.ok) {\n return resolve(response);\n }\n\n let error = {\n processingStage: 'IMAGE_UPLOAD_ERROR',\n response,\n };\n trackEventWithData(FPTI_SPEC.FIELD_LEVEL_ERROR_IM, {\n error_code: 'LOGO_IMAGE_UPLOAD_ERROR',\n error_desc: 'logo',\n error_detail: JSON.stringify(response),\n screen: SCREEN.EXPERIENCE_SETUP,\n });\n return reject(error);\n })\n .catch((error) => {\n trackEventWithData(FPTI_SPEC.FIELD_LEVEL_ERROR_IM, {\n error_code: 'LOGO_IMAGE_UPLOAD_ERROR',\n error_desc: 'logo',\n error_detail: JSON.stringify(error),\n screen: SCREEN.EXPERIENCE_SETUP,\n });\n return reject({ ...error, processingStage: 'IMAGE_UPLOAD_ERROR' });\n });\n });\n };\n\n const handleBusinessProfileUpdate = async (url) => {\n return new Promise((resolve, reject) => {\n updateBusinessProfileLogo(url)\n .then((response) => {\n if (response.ok) {\n return resolve(response);\n }\n\n let error = {\n processingStage: 'BUSINESS_PROFILE_IMAGE_UPDATE_ERROR',\n response,\n };\n return reject(error);\n })\n .catch((error) => {\n return reject({\n ...error,\n processingStage: 'BUSINESS_PROFILE_IMAGE_UPDATE_ERROR',\n });\n });\n });\n };\n\n const updateLogo = (url) => {\n dispatch(change(BTN_FACTORY_V3_FORM, 'logoUrl', url));\n dispatch(change(BTN_FACTORY_V3_FORM, 'logoTarget', LOGO_TARGET_BUTTON));\n setLogoImg(url);\n setShowSpinner(false);\n setIsLogoBusinessProfile(false);\n closeModal();\n };\n\n const updateSettingsLogo = (url) => {\n dispatch(change(BTN_FACTORY_V3_FORM, 'logoUrl', ''));\n dispatch(change(BTN_FACTORY_V3_FORM, 'businessProfileLogoUrl', url));\n updateBusinessImageUrls(url);\n dispatch(change(BTN_FACTORY_V3_FORM, 'logoTarget', LOGO_TARGET_PROFILE));\n setIsLogoBusinessProfile(true);\n setLogoImg(url);\n setShowSpinner(false);\n closeModal();\n };\n\n const removeImage = () => {\n setImageData();\n setIsLogoBusinessProfile(true);\n setShowSaveButton(true);\n };\n\n const saveLogo = async () => {\n trackEventWithData(FPTI_SPEC.UPLOAD_LOGO_MODAL_SAVE_CL);\n\n let src = imageData?.src ?? '';\n if (_isEmpty(src)) {\n dispatch(change(BTN_FACTORY_V3_FORM, 'logoUrl', ''));\n dispatch(change(BTN_FACTORY_V3_FORM, 'logoTarget', LOGO_TARGET_NOLOGO));\n closeModal();\n } else if (imageUpdated) {\n try {\n setShowSpinner(true);\n let response = await handleImageUpload();\n if (response.success) {\n // BUSINESS PROFILE LOGO UPDATE\n if (checkboxValue && userType === 'BUSINESS') {\n try {\n let businessProfileResponse = await handleBusinessProfileUpdate(\n response.src\n );\n if (businessProfileResponse.success) {\n updateSettingsLogo(response.src);\n } else {\n updateLogo(response.src);\n // TODO: Manage business profile error (Content is in progress)\n }\n } catch (e) {\n updateLogo(response.src);\n }\n } else {\n updateLogo(response.src);\n }\n } else {\n setShowSpinner(false);\n setDropzoneError(errors.dropzone.tryAgain);\n setLogoImg('');\n }\n } catch (e) {\n setShowSpinner(false);\n setDropzoneError(errors.dropzone.tryAgain);\n setLogoImg('');\n }\n } else {\n closeModal();\n }\n };\n\n return (\n \n {imageData && (\n <>\n {logo} \n {\n trackEventWithData(FPTI_SPEC.UPLOAD_LOGO_MODAL_CHECKBOX_CL, {\n checked: !checkboxValue,\n });\n setCheckboxValue(!checkboxValue);\n }}\n className=\"business-checkbox\"\n name=\"updateBusinessProfile\"\n helperText={checkboxHelpText}\n />\n )}\n {dropzoneError && (\n \n {dropzoneError}\n \n )}\n \n {saveButton}\n \n \n ) : (\n <>\n {dropzoneError && (\n \n {dropzoneError}\n \n )}\n {showSaveButton && (\n \n {saveButton}\n \n )}\n \n )}\n
\n );\n};\n\nDropzoneLogo.propTypes = {\n dispatch: PropTypes.func,\n uploadImage: PropTypes.func,\n updateBusinessProfileLogo: PropTypes.func,\n updateBusinessImageUrls: PropTypes.func,\n getContent: PropTypes.func,\n closeModal: PropTypes.func,\n logoUrl: PropTypes.string,\n setLogoImg: PropTypes.func,\n logoTarget: PropTypes.string,\n isLogoBusinessProfile: PropTypes.bool,\n setIsLogoBusinessProfile: PropTypes.func,\n};\n\nexport default DropzoneLogo;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Sheet } from '@paypalcorp/pp-react-sheet';\nimport { HeadingText } from '@paypalcorp/pp-react-text';\nimport DropzoneLogo from './DropzoneLogo';\nimport { trackEventWithData } from '../../utilsV3/analytics';\nimport { FPTI_SPEC } from '../../utilsV3/fptiConstants';\n\nconst ImageModal = ({\n getContent,\n isOpen,\n handleCloseModal,\n dispatch,\n uploadImage,\n updateBusinessProfileLogo,\n updateBusinessImageUrls,\n logoUrl,\n isLogoBusinessProfile,\n setLogoImg,\n logoTarget,\n setIsLogoBusinessProfile,\n}) => {\n const title = getContent('modal.title');\n\n useEffect(() => {\n if (isOpen) {\n trackEventWithData(FPTI_SPEC.UPLOAD_LOGO_MODAL_IM);\n }\n }, [isOpen]);\n\n const handleDismissClick = () => {\n trackEventWithData(FPTI_SPEC.UPLOAD_LOGO_MODAL_DISMISS_CL);\n handleCloseModal();\n };\n\n return (\n \n \n {imageData.name}\n \n \n {deleteButton}\n \n
\n \n )}\n \n 
\n {\n setIsOpen(true);\n trackEventWithData(FPTI_SPEC.EXPERIENCE_SETUP_PAGE_UPLOAD_LOGO_CL);\n }}\n iconComponent={EditIcon}\n tertiary\n >\n {editButton}\n \n
\n );\n };\n\n return (\n \n setIsOpen(false)}\n uploadImage={uploadImage}\n updateBusinessProfileLogo={updateBusinessProfileLogo}\n updateBusinessImageUrls={updateBusinessImageUrls}\n logoUrl={logoImg}\n setLogoImg={setLogoImg}\n logoTarget={logoTarget}\n isLogoBusinessProfile={isLogoBusinessProfile}\n setIsLogoBusinessProfile={setIsLogoBusinessProfile}\n dispatch={dispatch}\n />\n
\n );\n};\n\nLogoExperience.propTypes = {\n isChecked: PropTypes.bool,\n uploadImage: PropTypes.func,\n updateBusinessProfileLogo: PropTypes.func,\n updateBusinessImageUrls: PropTypes.func,\n logoUrl: PropTypes.string,\n logoTarget: PropTypes.string,\n businessProfileLogoUrl: PropTypes.string,\n dispatch: PropTypes.func,\n logoClientError: PropTypes.string,\n noLogoImage: PropTypes.string,\n};\n\nexport default LogoExperience;\n","import React, { useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport Cropper from 'react-easy-crop';\nimport { Button } from '@paypalcorp/pp-react-buttons';\nimport { BodyText } from '@paypalcorp/pp-react-text';\nimport { ChevronCircleUpIcon, EditIcon } from '@paypalcorp/pp-react-icons';\nimport { change } from 'redux-form';\nimport { BTN_FACTORY_V3_FORM } from '../../clientConstants';\nimport { useDropzone } from 'react-dropzone';\nimport {\n ALLOWED_IMAGE_TYPES,\n MAX_IMAGE_SIZE,\n} from '../../../utility/constants';\nimport { Alert } from '@paypalcorp/pp-react-alert';\nimport _get from 'lodash/get';\nimport { grey300 } from '@paypalcorp/pp-react-colors';\n\nimport getLocaleMessages from '../../../buttons/utils/localesMessages';\nimport { trackEventWithData } from '../../utilsV3/analytics';\nimport { FPTI_SPEC, SCREEN } from '../../utilsV3/fptiConstants';\nconst errors = getLocaleMessages('buttonsV3/fieldErrors');\n\nconst CropImage = ({\n imgUrl,\n getContent,\n uploadImage,\n closeModal,\n widthBanner,\n dispatch,\n isMobile,\n}) => {\n const [crop, setCrop] = useState({ x: 0, y: 0 });\n const [cropAreaPixels, setCropAreaPixels] = useState(null);\n const [showSpinner, setShowSpinner] = useState(false);\n const [fade, setFade] = useState(true);\n const [urlSrc, setUrlSrc] = useState(imgUrl);\n\n const saveButtonImage = getContent('modal.saveButtonImage');\n const editButton = getContent('modal.editButton');\n const dragImage = getContent('modal.dragImage');\n const [dropzoneError, setDropzoneError] = useState('');\n\n const resizeImage = (original, imgName) => {\n const img = new Image();\n img.src = original;\n img.crossOrigin = 'Anonymous';\n img.onload = (el) => {\n let imgObj = el.target;\n let elem = document.createElement('canvas');\n elem.width = widthBanner;\n elem.height = (widthBanner * imgObj.height) / imgObj.width;\n\n let ctx = elem.getContext('2d');\n ctx.drawImage(el.target, 0, 0, elem.width, elem.height);\n const srcEncoded = ctx.canvas.toDataURL(el.target, 'image/jpeg', 0);\n setUrlSrc(srcEncoded);\n };\n };\n\n const { getRootProps, getInputProps } = useDropzone({\n maxFiles: 1,\n accept: ALLOWED_IMAGE_TYPES,\n maxSize: MAX_IMAGE_SIZE,\n onDrop: useCallback((acceptedFiles) => {\n setDropzoneError('');\n acceptedFiles.map((file) => {\n const reader = new FileReader();\n reader.onload = () => {\n const binaryStr = reader.result;\n resizeImage(binaryStr, file.name);\n };\n reader.readAsDataURL(file);\n });\n }, []),\n onDropRejected: (rejections) => {\n try {\n const errorCode = _get(rejections[0], 'errors[0].code', 'default');\n switch (errorCode) {\n case 'file-too-large':\n setDropzoneError(errors.dropzone.maxSize);\n break;\n case 'file-invalid-type':\n setDropzoneError(errors.dropzone.notSupported);\n break;\n default:\n setDropzoneError(errors.dropzone.tryAgain);\n break;\n }\n } catch (e) {\n setDropzoneError(errors.dropzone.tryAgain);\n }\n },\n });\n\n const createImage = () =>\n new Promise((resolve, reject) => {\n const image = new Image();\n image.addEventListener('load', () => resolve(image));\n image.addEventListener('error', (error) => reject(error));\n image.setAttribute('crossOrigin', 'anonymous');\n image.src = urlSrc;\n });\n\n const getCroppedImage = async () => {\n const image = await createImage();\n const canvas = document.createElement('canvas');\n const ctx = canvas.getContext('2d');\n\n const maxSize = Math.max(image.width, image.height);\n const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));\n\n canvas.width = safeArea;\n canvas.height = safeArea;\n\n ctx.translate(safeArea / 2, safeArea / 2);\n ctx.translate(-safeArea / 2, -safeArea / 2);\n\n // draw rotated image and store data.\n ctx.drawImage(\n image,\n safeArea / 2 - image.width * 0.5,\n safeArea / 2 - image.height * 0.5\n );\n const data = ctx.getImageData(0, 0, safeArea, safeArea);\n\n // set canvas width to final desired crop size - this will clear existing context\n canvas.width = cropAreaPixels.width;\n canvas.height = cropAreaPixels.height;\n\n // paste generated rotate image with correct offsets for x,y crop values.\n ctx.putImageData(\n data,\n Math.round(0 - safeArea / 2 + image.width * 0.5 - cropAreaPixels.x),\n Math.round(0 - safeArea / 2 + image.height * 0.5 - cropAreaPixels.y)\n );\n\n // As Base64 string\n return canvas.toDataURL('image/jpeg');\n };\n\n const handleImageUpload = async (url) => {\n return new Promise((resolve, reject) => {\n uploadImage(url)\n .then((response) => {\n if (response.ok) {\n return resolve(response);\n }\n\n let error = {\n processingStage: 'IMAGE_UPLOAD_ERROR',\n response,\n };\n return reject(error);\n })\n .catch((error) => {\n return reject({ ...error, processingStage: 'IMAGE_UPLOAD_ERROR' });\n });\n });\n };\n\n const saveCroppedImage = useCallback(async () => {\n trackEventWithData(FPTI_SPEC.UPLOAD_BACKGOURND_IMG_MODAL_SAVE_CL);\n\n const img = await getCroppedImage();\n try {\n setShowSpinner(true);\n let response = await handleImageUpload(img);\n if (response.success) {\n setShowSpinner(false);\n dispatch(change(BTN_FACTORY_V3_FORM, 'bannerImageUrl', response.src));\n closeModal();\n } else {\n setShowSpinner(false);\n setDropzoneError(errors.dropzone.tryAgain);\n trackEventWithData(FPTI_SPEC.FIELD_LEVEL_ERROR_IM, {\n error_code: 'IMAGE_UPLOAD_ERROR',\n error_desc: 'banner_image',\n error_detail: 'try again',\n screen: SCREEN.EXPERIENCE_SETUP,\n });\n }\n } catch (e) {\n setShowSpinner(false);\n setDropzoneError(errors.dropzone.tryAgain);\n trackEventWithData(FPTI_SPEC.FIELD_LEVEL_ERROR_IM, {\n error_code: 'IMAGE_UPLOAD_ERROR',\n error_desc: 'banner_image',\n error_detail: 'try again',\n screen: SCREEN.EXPERIENCE_SETUP,\n });\n }\n });\n\n const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {\n setCropAreaPixels(croppedAreaPixels);\n }, []);\n\n const fadeOut = () => {\n setFade(false);\n };\n const fadeIn = () => {\n setFade(true);\n };\n\n return (\n <>\n \n \n \n {editButton}\n \n
\n {dropzoneError && (\n \n {!imageData ? (\n <>\n \n {dropzoneError}\n \n )}\n \n \n ) : (\n <>\n {imageHandle} \n
\n );\n};\n\nDropzoneImageHandle.propTypes = {\n dispatch: PropTypes.func,\n uploadImage: PropTypes.func,\n getContent: PropTypes.func,\n closeModal: PropTypes.func,\n bannerImageUrl: PropTypes.string,\n isMobile: PropTypes.bool,\n};\n\nexport default DropzoneImageHandle;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { Sheet } from '@paypalcorp/pp-react-sheet';\nimport { HeadingText, BodyText } from '@paypalcorp/pp-react-text';\nimport DropzoneImageHandle from './DropzoneImageHandle';\nimport { trackEventWithData } from '../../utilsV3/analytics';\nimport { FPTI_SPEC } from '../../utilsV3/fptiConstants';\n\nconst ImageModal = ({\n getContent,\n isOpen,\n handleCloseModal,\n dispatch,\n uploadImage,\n bannerImageUrl,\n isMobile,\n}) => {\n const title = getContent('modal.title');\n const body = getContent('modal.body');\n const bullets = getContent('modal.bullet');\n\n useEffect(() => {\n if (isOpen) {\n trackEventWithData(FPTI_SPEC.UPLOAD_BACKGOURND_IMG_MODAL_IM);\n }\n }, [isOpen]);\n\n const handleDismissClick = () => {\n trackEventWithData(FPTI_SPEC.UPLOAD_BACKGOURND_IMG_MODAL_DISMISS_CL);\n handleCloseModal();\n };\n\n return (\n \n {imageData.name && (\n \n {imageData.name}\n \n )}\n setImageData()}\n svgIconComponent={TrashIcon}\n className={'delete-img'}\n >\n {deleteButton}\n \n
\n\n - \n
- {bullets[0]} \n
- {bullets[1]} \n
- {bullets[2]} \n
\n 
\n \n {editButton}\n \n
\n );\n };\n\n return (\n \n setIsOpen(false)}\n uploadImage={uploadImage}\n bannerImageUrl={bannerImageUrl}\n dispatch={dispatch}\n isMobile={isMobile}\n />\n
\n );\n};\n\nBannerImage.propTypes = {\n isChecked: PropTypes.bool,\n uploadImage: PropTypes.func,\n bannerImageUrl: PropTypes.string,\n bannerClientError: PropTypes.string,\n dispatch: PropTypes.func,\n isMobile: PropTypes.bool,\n showBadge: PropTypes.bool,\n};\n\nexport default BannerImage;\n","import React from 'react';\nimport { Row } from '@paypalcorp/pp-react-grid';\nimport { Button } from '@paypalcorp/pp-react-buttons';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport getLocaleMessages from '../../utils/localesMessages';\n\nconst { cancelButton, back, continueButton, finishButton } =\n getLocaleMessages('buttonsV3/common');\n\nconst WizardNavButtons = ({\n steps: { currentStep, totalSteps },\n showSpinner = false,\n handleBack,\n handleSubmit,\n}) => {\n return (\n \n
\n ) : null}\n\n {isHostedFlow() && (\n \n
\n )}\n \n );\n}\n\nAmountType.propTypes = {\n receiverCurrency: PropTypes.string,\n amountType: PropTypes.string,\n handleAmountTypeChange: PropTypes.func,\n};\n\nexport default AmountType;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { formatAmount } from '../../utils/amountUtils';\nimport Currency from './Currency';\nimport AmountType from './AmountType';\n\nfunction AmountSetup({ application, formValues, change }) {\n const { receivableCurrency } = application;\n\n const getValue = (key) => {\n return formValues[key];\n };\n\n const receiverCurrency = getValue('receiverCurrency');\n const amountType = getValue('amountType');\n\n const handleAmountFormatChange = (event, currency) => {\n if (getValue('amountValue')) {\n const value = getValue('amountValue');\n const formattedAmount = formatAmount(value, currency);\n change('amountValue', formattedAmount);\n }\n\n if (\n getValue('merchantAmount1') ||\n getValue('merchantAmount2') ||\n getValue('merchantAmount3')\n ) {\n const merchantAmount1 = getValue('merchantAmount1');\n const formattedAmount1 = formatAmount(merchantAmount1, currency);\n change('merchantAmount1', formattedAmount1);\n\n const merchantAmount2 = getValue('merchantAmount2');\n const formattedAmount2 = formatAmount(merchantAmount2, currency);\n change('merchantAmount2', formattedAmount2);\n\n const merchantAmount3 = getValue('merchantAmount3');\n const formattedAmount3 = formatAmount(merchantAmount3, currency);\n change('merchantAmount3', formattedAmount3);\n }\n };\n\n const handleAmountTypeChange = () => {\n change('amountValue', '');\n change('merchantAmount1', '');\n change('merchantAmount2', '');\n change('merchantAmount3', '');\n };\n\n return (\n \n
\n \n
\n \n
\n \n {otherAmount} \n
\n \n
\n );\n}\n\nAmountSetup.propTypes = {\n application: PropTypes.object,\n formValues: PropTypes.object,\n change: PropTypes.func,\n};\n\nexport default AmountSetup;\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport { Field, getFormValues } from 'redux-form';\nimport { renderSwitchComponent } from './SwitchPanel';\nimport getLocaleMessages from '../../utils/localesMessages';\nimport { BTN_FACTORY_V3_FORM } from '../../clientConstants';\n\nconst { coverFeesRadio = {} } = getLocaleMessages('buttonsV3/switches');\n\nconst CoverFeesSwitch = ({ formValues, showBadge }) => {\n return (\n \n 
\n \n {mainLabel}\n
\n );\n };\n\n const jsxLabel = (\n {helperText}
\n \n\n \n {badgeContent}\n \n )}\n
\n );\n\n return (\n {label}
\n {badgeContent && (\n \n {textInfo} \n \n ) : null}\n
\n );\n}\n\nNote.propTypes = {\n isChecked: PropTypes.bool,\n dispatch: PropTypes.func,\n showBadge: PropTypes.bool,\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return { dispatch };\n};\n\nexport default connect(null, mapDispatchToProps)(Note);\n","import { BodyText } from '@paypalcorp/pp-react-text';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { Field } from 'redux-form';\n\nimport getLocaleMessages from '../../../utils/localesMessages';\nimport BasicInputField from '../../fields/BasicInputField';\nimport { renderSwitchComponent } from '../../switchPanels/SwitchPanel';\n\nconst { advanced: { url = {} } = {} } = getLocaleMessages(\n 'buttonsV3/advancedUrls'\n);\n\nconst renderBasicInputField = (props) => {\n return \n
\n );\n };\n\n const handleBlur = () => {\n const errorHtml = getErrorHtml(input?.value);\n setErrors(errorHtml);\n };\n\n return (\n \n \n {unsupportedVariables.length === 1\n ? single.message\n : multiple.message}\n \n
\n \n {unsupportedVariables.length === 1 ? (\n {single.listHeader} \n ) : (\n {multiple.listHeader} \n )}\n
\n - \n {_map(unsupportedVariables, (variable, index) => {\n return
- {variable} ;\n })}\n
\n
\n );\n};\n\nExtraVariablesTextArea.propTypes = {\n input: PropTypes.object,\n label: PropTypes.string,\n meta: PropTypes.object,\n id: PropTypes.string,\n validateOnBlur: PropTypes.bool,\n};\n\nexport default ExtraVariablesTextArea;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Field } from 'redux-form';\nimport { Link } from '@paypalcorp/pp-react-links';\n\nimport getLocaleMessages from '../../../utils/localesMessages';\nimport { renderSwitchComponent } from '../../switchPanels/SwitchPanel';\nimport ExtraVariablesTextArea from '../../fields/ExtraVariablesTextArea';\n\nconst { advanced: { variables = {} } = {} } = getLocaleMessages(\n 'buttonsV3/advancedVariables'\n);\n\nconst renderExtraVariablesAreaField = (props) => {\n return \n {\n input.onBlur(event);\n handleBlur(event);\n }}\n />\n {errors}\n
\n \n \n {variables.devDoc}\n \n\n
\n )}\n \n );\n};\n\nAdvancedVariables.propTypes = {\n extraVariablesView: PropTypes.string,\n noAdvancedVariables: PropTypes.string,\n};\n\nexport default AdvancedVariables;\n","// External Imports\nimport React, { useEffect } from 'react';\nimport { connect } from 'react-redux';\nimport { getFormValues, reduxForm } from 'redux-form';\nimport PropTypes from 'prop-types';\n\n// PPUI Imports\nimport { Container } from '@paypalcorp/pp-react-grid';\n\n// Internal Imports\nimport { BTN_FACTORY_V3_FORM } from '../../clientConstants';\nimport { validate } from '../../lib/clientValidatorV3';\nimport AmountSetup from './AmountSetup';\nimport StepHeader from './components/StepHeader';\nimport { isDonateButton, isHostedFlow } from '../../utils/buttonFactoryUtils';\nimport MailingAddressSwitch from './components/MailingAddressSwitch';\nimport Note from './components/Note';\nimport AdvancedUrls from './components/AdvancedUrls';\nimport AdvancedVariables from './components/AdvancedVariables';\nimport RecurringSwitch from '../switchPanels/RecurringSwitch';\nimport CoverFeesSwitch from '../switchPanels/CoverFeesSwitch';\nimport ProgramsV3 from '../programs/ProgramsV3';\nimport WizardNavButtons from '../navigationButtons/WizardNavButtons';\nimport { FPTI_SPEC } from '../../utilsV3/fptiConstants';\nimport { trackEventWithData } from '../../utilsV3/analytics';\n\nconst mapStateToProps = (state) => {\n const { application = {}, buttonFactoryV3: { formattedButton = {} } = {} } =\n state;\n\n return {\n application,\n formValues: getFormValues(BTN_FACTORY_V3_FORM)(state),\n initialValues: formattedButton,\n };\n};\n\nconst WizardStep3 = ({\n handleBack,\n handleSubmit,\n application,\n formValues,\n change,\n}) => {\n const trackPageLoadImpression = () => {\n if (isDonateButton()) {\n trackEventWithData(FPTI_SPEC.SET_AMOUNT_PAGE_IM, { step: 3 });\n } else {\n trackEventWithData(FPTI_SPEC.ADVANCED_SETTINGS_PAGE_IM, { step: 3 });\n }\n };\n\n useEffect(() => {\n trackPageLoadImpression();\n }, []);\n\n return (\n <>\n \n })
\n \n {heading}\n \n {body} \n
\n );\n};\n\nValuePropCard.propTypes = {\n heading: PropTypes.string,\n body: PropTypes.string,\n imgSrc: PropTypes.string,\n};\n\nexport default ValuePropCard;\n","import React from 'react';\nimport ValuePropCard from './ValuePropCard';\nimport getLocaleMessages from '../../../utils/localesMessages';\n\nconst { valueProp } = getLocaleMessages('buttonsV3/login');\n\nconst images = [\n '/paypal-ui/illustrations/focused/svg/donation-page-hourglass.svg',\n '/paypal-ui/illustrations/focused/svg/hand-image.svg',\n '/paypal-ui/illustrations/focused/svg/money-down.svg',\n];\n\nconst ValueProp = () => {\n const getValuePropContent = () => {\n return Object.keys(valueProp).map((key) => valueProp[key]);\n };\n return (\n \n
\n );\n};\n\nexport default ValueProp;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, HeadingText, BodyText } from '@paypalcorp/pp-react';\nimport getLocaleMessages from '../../../utils/localesMessages';\nimport { appendCdnHostName } from '../../../../utility/geoUtils';\n\nconst { header, loginButton, signUp } = getLocaleMessages('buttonsV3/login');\n\nconst Login = ({ handleLogin, handleSignUp }) => {\n return (\n \n {getValuePropContent().map((col, index) => (\n
\n \n
\n );\n};\n\nLogin.propTypes = {\n handleLogin: PropTypes.func,\n handleSignUp: PropTypes.func,\n};\n\nexport default Login;\n","import React from 'react';\nimport get from 'lodash/get';\nimport {\n HeadingText,\n BodyText,\n Accordion,\n AccordionRow,\n} from '@paypalcorp/pp-react';\nimport getLocaleMessages from '../../../utils/localesMessages';\n\nconst { faq = {} } = getLocaleMessages('buttonsV3/login');\n\nconst Faq = () => {\n const getFaqContent = () => {\n const groups = get(faq, 'questions', {});\n return Object.keys(groups).map((key) => groups[key]);\n };\n\n return (\n \n \n {header.title}\n \n {header.body} \n \n {loginButton}\n \n \n
\n \n
\n \n \n {faq.title}\n \n
\n );\n};\n\nexport default Faq;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport ValueProp from './components/ValueProp';\nimport Login from './components/Login';\nimport Faq from './components/Faq';\nimport { trackEventWithData } from '../../utilsV3/analytics';\nimport { FPTI_SPEC } from '../../utilsV3/fptiConstants';\n\nconst ButtonFactoryLogin = ({ handleLogin, handleSignUp }) => {\n useEffect(() => {\n trackEventWithData(FPTI_SPEC.LANDING_PAGE_IM);\n }, []);\n\n return (\n \n \n {getFaqContent().map((row, index) => (\n \n {row.question}\n \n }\n key={index}\n >\n \n \n \n ))}\n \n
\n \n
\n );\n};\n\nButtonFactoryLogin.propTypes = {\n handleLogin: PropTypes.func,\n handleSignUp: PropTypes.func,\n};\nexport default ButtonFactoryLogin;\n","import React from 'react';\nimport CommonPreviewComponent from './CommonPreviewComponent';\nimport getLocaleMessages from '../../utils/localesMessages';\nconst messages = getLocaleMessages('buttonsV3/buttonPreview');\n\nconst ButtonFactoryV3MobilePreview = () => {\n return (\n \n \n \n
\n \n {!isMobile ? (\n \n {previewContainerHeader}\n \n ) : null}\n
\n );\n};\n\nWizardStep1Preview.propTypes = {\n usePaypalButtonStyle: PropTypes.bool,\n buttonSize: PropTypes.string,\n showAcceptedCardLogos: PropTypes.bool,\n buttonImageUrl: PropTypes.string,\n onError: PropTypes.func,\n locale: PropTypes.string,\n country: PropTypes.string,\n isMobile: PropTypes.bool,\n};\n\nexport default WizardStep1Preview;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Col, Button, ShowAltIcon, Sheet } from '@paypalcorp/pp-react';\nimport CommonPreviewComponent from './CommonPreviewComponent';\nimport {\n isDonateButton,\n isTablet,\n isDonateLink,\n isHostedFlow,\n} from '../../utils/buttonFactoryUtils';\nimport ButtonFactoryV3DesktopPreview from './ButtonFactoryV3DesktopPreview';\nimport WizardStep1Preview from './WizardStep1Preview';\nfunction WizardMobilePreview({\n handleSubmit,\n openMobilePreview,\n isMobilePreviewOpen,\n closeMobilePreview,\n usePaypalButtonStyle,\n buttonSize,\n showAcceptedCardLogos,\n buttonImageUrl,\n onError,\n locale,\n country,\n steps: { currentStep, totalSteps },\n labels: { continueButton, finishButton, previewButton, previewTitle },\n showSpinner,\n buttonDropzoneSubmit,\n handleBannerAndLogoErrorCheck,\n}) {\n function renderPreview() {\n const isMobile = !isTablet();\n if (currentStep === 1 && isDonateButton()) {\n return (\n \n
\n \n
\n \n
\n\n \n \n \n
\n \n \n \n \n
\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n \n
\n \n \n
\n \n \n \n \n
\n \n {isHostedFlow() && (\n \n {backFundraisers}\n \n )}\n
\n \n \n \n \n \n \n
\n );\n};\n\nReactDOM.render(\n \n
\n \n \n
\n \n onChangeProgram(e.target.value)}\n onBlur={(e) => onChangeProgram(e.target.value)}\n component={renderTextField}\n />\n
\n );\n};\n\nProgramFieldV3.propTypes = {\n position: PropTypes.number,\n showUpArrow: PropTypes.bool,\n showDownArrow: PropTypes.bool,\n showDelete: PropTypes.bool,\n programNames: PropTypes.array,\n dispatch: PropTypes.func,\n};\n\nconst mapStateToProps = (state) => {\n const formValues = getFormValues(BTN_FACTORY_V3_FORM)(state) || {};\n\n return {\n programNames: formValues.programNames,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return { dispatch };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ProgramFieldV3);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getFormValues } from 'redux-form';\nimport {\n BTN_FACTORY_V3_FORM,\n BTN_FACTORY_MAX_PROGRAMS,\n} from '../../clientConstants';\nimport ProgramFieldV3 from './ProgramFieldV3';\nimport getLocaleMessages from '../../utils/localesMessages';\nimport { checkKeyPressed } from '../../../utility/accessibilityUtils';\nimport { Link, Icon } from '@paypalcorp/pp-react';\n\nconst { addButton } = getLocaleMessages('buttonsV3/programs');\n\nconst AddRemoveProgramsV3 = ({ programNames, addProgram }) => {\n const showUpArrow = (index) => {\n if (programNames.length === 1) {\n return false;\n }\n if (index === 0) {\n return false;\n }\n return true;\n };\n\n const showDownArrow = (index) => {\n if (programNames.length === 1) {\n return false;\n }\n if (index === programNames.length - 1) {\n return false;\n }\n return true;\n };\n\n const handleAddProgramClick = (e) => {\n checkKeyPressed(e, () => {\n addProgram();\n });\n };\n\n return (\n \n \n {upArrow}\n \n \n {downArrow}\n \n \n {removeButton}\n \n
\n \n {programNames.map((_, index) => {\n return (\n 1}\n />\n );\n })}\n {programNames.length < BTN_FACTORY_MAX_PROGRAMS && (\n
\n );\n};\n\nAddRemoveProgramsV3.propTypes = {\n addProgram: PropTypes.func,\n programNames: PropTypes.array,\n};\n\nconst mapStateToProps = (state) => {\n const formValues = getFormValues(BTN_FACTORY_V3_FORM)(state) || {};\n\n return {\n programNames: formValues.programNames,\n };\n};\n\nexport default connect(mapStateToProps)(AddRemoveProgramsV3);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport { getFormValues, change } from 'redux-form';\nimport AddRemoveProgramsV3 from './AddRemoveProgramsV3';\nimport {\n BTN_FACTORY_V3_FORM,\n BTN_FACTORY_MAX_PROGRAMS,\n} from '../../clientConstants';\nimport { Field } from 'redux-form';\nimport getLocaleMessages from '../../utils/localesMessages';\nimport { renderSwitchComponent } from '../switchPanels/SwitchPanel';\nimport { LightBulbIcon } from '@paypalcorp/pp-react-icons';\n\nconst {\n chooseSpecificPrograms,\n tooltip = {},\n programs = {},\n} = getLocaleMessages('buttonsV3/programs');\n\nconst ProgramsV3 = ({ listPrograms, programNames, dispatch }) => {\n const addProgram = () => {\n if (programNames.length < BTN_FACTORY_MAX_PROGRAMS) {\n const newProgramNames = [...programNames, ''];\n dispatch(change(BTN_FACTORY_V3_FORM, 'programNames', newProgramNames));\n }\n };\n\n const togglePrograms = () => {\n // This method is now run via the onChange prop, which runs before the value is actually\n // changed in redux-form, thus needing to show the program when the value is still 'no'\n if (listPrograms === 'no') {\n if (programNames && programNames.length === 0) {\n addProgram();\n }\n }\n };\n\n const renderSubTitle = () => {\n return listPrograms === 'no' ? (\n \n
\n ) : (\n tooltip.program\n );\n };\n\n return (\n \n
\n {programs.tip}\n \n
\n );\n};\n\nProgramsV3.propTypes = {\n listPrograms: PropTypes.string,\n programNames: PropTypes.array,\n dispatch: PropTypes.func,\n};\n\nconst mapStateToProps = (state) => {\n const formValues = getFormValues(BTN_FACTORY_V3_FORM)(state) || {};\n return {\n listPrograms: formValues.listPrograms,\n programNames: formValues.programNames,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return { dispatch };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ProgramsV3);\n","const keyMirror = require('keymirror');\n\nmodule.exports = {\n CHANGE_AMOUNT: 'CHANGE_AMOUNT',\n CHANGE_SYMBOL: 'CHANGE_SYMBOL',\n CHANGE_CODE: 'CHANGE_CODE',\n CHANGE_RECURRING: 'CHANGE_RECURRING',\n CHANGE_COVER_FEE: 'CHANGE_COVER_FEE',\n CHANGE_FEE_AMOUNT: 'CHANGE_FEE_AMOUNT',\n CHANGE_FORMATED_FEE_AMOUNT: 'CHANGE_FORMATED_FEE_AMOUNT',\n CHANGE_AMOUNT_BEFORE_FEE: 'CHANGE_AMOUNT_BEFORE_FEE',\n CHANGE_ANONYMOUS_STATUS: 'CHANGE_ANONYMOUS_STATUS',\n RP_MODAL_CLOSED: 'RP_MODAL_CLOSED',\n GIFT_AID_IT: 'GIFT_AID_IT',\n CHANGE_FORMATED_AMOUNT: 'CHANGE_FORMATED_AMOUNT',\n\n CHANGE_NOTE: 'CHANGE_NOTE',\n\n CHANGE_COUNTRY: 'CHANGE_COUNTRY',\n\n CHANGE_CARD_NUMBER: 'CHANGE_CARD_NUMBER',\n CHANGE_EXP_DATE: 'CHANGE_EXP_DATE',\n CHANGE_SECURITY_CODE: 'CHANGE_SECURITY_CODE',\n CHANGE_CARD_SPEC: 'CHANGE_CARD_SPEC',\n\n CHANGE_FIRST_NAME: 'CHANGE_FIRST_NAME',\n CHANGE_LAST_NAME: 'CHANGE_LAST_NAME',\n\n CHANGE_ADDRESS: 'CHANGE_ADDRESS',\n\n CHANGE_PHONE: 'CHANGE_PHONE',\n CHANGE_EMAIL: 'CHANGE_EMAIL',\n\n CHANGE_PASSWORD: 'CHANGE_PASSWORD',\n\n SHOW_LANGUAGE_SELECTOR: 'SHOW_LANGUAGE_SELECTOR',\n\n UPDATE_CONFIRMATION: 'UPDATE_CONFIRMATION',\n\n POST_BACK_DATA: 'POST_BACK_DATA',\n\n UPDATE_CURRENT_PAGE: 'UPDATE_CURRENT_PAGE',\n\n UPDATE_SERVER_ERRORS: 'UPDATE_SERVER_ERRORS',\n\n PAYMENT_ERROR: 'PAYMENT_ERROR',\n\n UPDATE_SIGN_UP_ERROR: 'UPDATE_SIGN_UP_ERROR',\n\n FUNDING_OPTIONS: 'FUNDING_OPTIONS',\n\n EMAIL: 'EMAIL',\n\n BILLING_ADDRESS: 'BILLING_ADDRESS',\n\n UPDATE_DONATION_AMOUNT_TYPE: 'UPDATE_DONATION_AMOUNT_TYPE',\n\n ENABLE_PRESET_AMOUNTS: 'ENABLE_PRESET_AMOUNTS',\n\n CHANGE_SHARE_ADDRESS: 'CHANGE_SHARE_ADDRESS',\n\n ADD_CARD_ERROR: 'ADD_CARD_ERROR',\n\n UPDATE_SELECTED_PROGRAM: 'UPDATE_SELECTED_PROGRAM',\n\n SAVE_FORM_DATA: 'SAVE_FORM_DATA',\n\n UPDATE_THREEDS_DATA: 'UPDATE_THREEDS_DATA',\n\n UPDATE_SELECTED_PRESET_BUTTON_ID: 'UPDATE_SELECTED_PRESET_BUTTON_ID',\n\n UPDATE_ORDER_STATUS: 'UPDATE_ORDER_STATUS',\n\n EMAIL_REX:\n /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+\\/0-9=?A-Z^_`a-z{|}~]+(\\.[-!#$%&'*+\\/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/,\n\n DEFAULT_CARD_SPEC: {\n type: 'card',\n fields: {\n ccNumber: {\n required: true,\n pattern: '4[0-9]{12}(?:[0-9]{3})?',\n maxlength: 19,\n },\n expirationDate: {\n required: true,\n pattern: '(0[1-9]|1[012])[/]((20)[0-9]{2}|[0-9]{2})',\n maxlength: 7,\n },\n csc: {\n required: true,\n pattern: '[0-9]*',\n maxlength: 3,\n minlength: 3,\n },\n },\n },\n DONATE_GIFTAID_IT_EXTRA_AMOUNT: 1.25,\n\n PPGF_DISCLAIMER_TOUCHPOINT: 'Donate_PPGF_Disclaimers_Touchpoint',\n GN_CONTENT_TOUCHPOINT: 'Donate_GN_Content_Touchpoint',\n NNA_CONTENT_TOUCHPOINT: 'Donate_NNA',\n\n PRODUCT: {\n BRANDED_CAMPAIGN: 'BRANDED_CAMPAIGN',\n GENEROSITY_NETWORK: 'GENEROSITY_NETWORK',\n GENEROSITY_NETWORK_CHARITIES: 'GENEROSITY_NETWORK_CHARITIES',\n PP_FUNDRAISING: 'PP_FUNDRAISING',\n },\n\n EVENT_NAME: {\n DW_GIVING_DONATE_SETUP_SCREEN_SHOWN: 'dw_giving_donate_setup_screen_shown',\n DW_GIVING_DONATE_SETUP_COMMENT_PRESSED:\n 'dw_giving_donate_setup_comment_pressed',\n DW_GIVING_DONATE_SETUP_NEXT_PRESSED: 'dw_giving_donate_setup_next_pressed',\n DW_GIVING_DONATE_SETUP_DONATE_WITH_CARD_PRESSED:\n 'dw_giving_donate_setup_card_pressed',\n DW_GIVING_DONATE_SETUP_TOOLTIP_PRESSED:\n 'dw_giving_donate_setup_tooltip_pressed',\n DW_GIVING_DONATE_SETUP_TERMS_PRESSED:\n 'dw_giving_donate_setup_terms_pressed',\n DW_GIVING_DONATE_SETUP_DISMISS_PRESSED:\n 'dw_giving_donate_setup_dismiss_pressed',\n DW_GIVING_DONATE_SETUP_SHARE_CONTACT_CHECK_PRESSED:\n 'dw_giving_donate_setup_share_contact_check_pressed',\n DW_GIVING_DONATE_SETUP_SHARE_CONTACT_UNCHECK_PRESSED:\n 'dw_giving_donate_setup_share_contact_uncheck_pressed',\n DW_GIVING_GUEST_FORM_SCREEN_SHOWN: 'dw_giving_guest_form_screen_shown',\n DW_GIVING_GUEST_FORM_DONATE_PRESSED: 'dw_giving_guest_form_donate_pressed',\n DW_GIVING_GUEST_FORM_DISMISS_PRESSED:\n 'dw_giving_guest_form_dismiss_pressed',\n DW_GIVING_MEMBER_REVIEW_DISMISS_PRESSED:\n 'dw_giving_member_review_dismiss_pressed',\n DW_GIVING_PAYMENT_SUCCESS_DISMISS_PRESSED:\n 'dw_giving_payment_success_dismiss_pressed',\n DW_GIVING_PAYMENT_SUCCESS_DONE_PRESSED:\n 'dw_giving_payment_success_done_pressed',\n DW_GIVING_PAYMENT_SUCCESS_SCREEN_SHOWN:\n 'dw_giving_payment_success_screen_shown',\n DW_GIVING_PAYMENT_PENDING_SCREEN_SHOWN:\n 'dw_giving_payment_pending_screen_shown',\n DW_GIVING_PAYMENT_SUCCESS_SHARE_PRESSED:\n 'dw_giving_payment_success_share_pressed',\n DW_GIVING_SHARE_SCREEN_SHOWN: 'dw_giving_share_screen_shown',\n DW_GIVING_SHARE_CHANNEL_PRESSED: 'dw_giving_share_channel_pressed',\n DW_GIVING_SHARE_DISMISS_PRESSED: 'dw_giving_share_dismiss_pressed',\n DW_GIVING_REDIRCT_SCREEN_SHOWN: 'dw_giving_redirct_screen_shown',\n DW_GIVING_REDIRCT_OPEN_PRESSED: 'dw_giving_redirct_open_pressed',\n DW_GIVING_REDIRCT_DISMISS_PRESSED: 'dw_giving_redirct_dismiss_pressed',\n DW_GIVING_FAILED_CUSTOMER_INTERACTION_OCCURRED:\n 'dw_giving_failed_customer_interaction_occurred',\n },\n\n SCREEN_NAME: {\n DW_GIVING_DONATE_SETUP_SCREEN: 'dw_giving_donate_setup_screen',\n DW_GIVING_DONATE_GUEST_FORM_SCREEN: 'dw_giving_donate_guest_form_screen',\n },\n\n FPTI_PRODUCT: 'dw_giving',\n KEY_DOWN: {\n TAB: 9,\n LEFT_ARROW: 37,\n UP_ARROW: 38,\n RIGHT_ARROW: 39,\n DOWN_ARROW: 40,\n SPACE: 32,\n ENTER: 13,\n },\n\n AU_CRS: {\n STATUS: {\n ABORTED: 'ABORTED',\n FAILURE: 'FAILURE',\n SUCCESS: 'SUCCESS',\n },\n ABORTED_STATUS_CODE: ['DOC_UPLOAD_PENDING', 'INFO_NOT_COLLECTED'],\n FAILURE_STATUS_CODE: [\n 'INVALID_REQUEST',\n 'NOT_APPLICABLE',\n 'SERVICE_UNAVAILABLE',\n 'THIRD_PARTY_VERIFICATION_FAIL',\n 'UNAUTHORIZED',\n ],\n SUCCESS_STATUS_CODE: ['COMPLETED', 'VERIFIED'],\n SINGLE_TAX_RESIDENCY: 'tax_inside_legal_country',\n MULTI_TAX_RESIDENCY: 'tax_outside_legal_country',\n },\n ALLOWED_IMAGE_TYPES: [\n 'image/gif',\n 'image/jpg',\n 'image/jpeg',\n 'image/png',\n 'image/bmp',\n ],\n MAX_IMAGE_SIZE: 12582912,\n KILOBYTE: 1024,\n MEGABYTE: 1048576,\n BTN_IMAGE_MAX_FILE_SIZE: 2000000, // 2MB;\n ALLOWED_FILE_EXTENSIONS: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tiff', 'tif'],\n IMG_SCALE_SIZE: {\n WIDTH_STEP_1: 300,\n WIDTH_BANNER: 616,\n WIDTH_LOGO: 400,\n },\n INSTRUMENT_TYPES: {\n HOLDING: 'HOLDING',\n PAYMENT_CARD: 'PAYMENT_CARD',\n PAYMENT_TOKEN: 'PAYMENT_TOKEN',\n BANK_ACCOUNT: 'BANK_ACCOUNT',\n CREDIT: 'CREDIT',\n UNKNOWN: 'UNKNOWN',\n },\n PAYMENT_CARDS: keyMirror({\n VISA: null,\n MASTERCARD: null,\n MASTER_CARD: null,\n MAESTRO: null,\n AMEX: null,\n DISCOVER: null,\n JCB: null,\n CHINA_UNION_PAY: null,\n }),\n CDN_HOST_NAME: 'https://www.paypalobjects.com',\n MERCHANT_PPCC_CONFIRMED_STATUS: 'CONFIRMED',\n};\n","import { EVENT_NAME, PRODUCT } from './constants';\nimport TemplateData, { localsMessages } from './getTemplateData';\nimport AppStore from '../stores/AppStore';\nimport { formatCurrencyWithSymbol, normalizeNumber } from './formator';\nimport { getPersonalizedMessages } from './personalizedMessages';\nimport { GN_CONTENT_TOUCHPOINT } from './constants';\nimport { isInContext } from './inContextDonation';\n\nconst gncMessages = localsMessages('clients/generosityNetworkCharities');\n\nexport const isGNC = () =>\n TemplateData.product === PRODUCT.GENEROSITY_NETWORK_CHARITIES;\nexport const isGN = () => TemplateData.product === PRODUCT.GENEROSITY_NETWORK;\nexport const isBrandedCampaign = () =>\n TemplateData.product === PRODUCT.BRANDED_CAMPAIGN;\nexport const isPPFundraising = () =>\n TemplateData.product === PRODUCT.PP_FUNDRAISING;\n\nexport const isCheckoutRail = () => isGNC() || isPPFundraising();\nexport const isSendMoneyRail = () => isGN() || isBrandedCampaign();\n\nexport const isExternalFlow = () =>\n isGNC() || isGN() || isBrandedCampaign() || isPPFundraising();\n\nexport const prepareOrderParams = () => ({\n amount: normalizeNumber(AppStore.getDonationAmount()),\n addressSharingConsent: false,\n currencyCode: AppStore.getDonationCode(),\n currencySymbol: AppStore.getDonationSymbol(),\n donationAmountType:\n AppStore.getDonationAmountType() === 'preset' ? 'preset' : 'userinput',\n donationNote: AppStore.getDonationNote() || '',\n recurring: AppStore.getDonationRecurring(),\n selectedProgram: AppStore.getSelectedProgram(),\n selectedPresetButtonId: AppStore.getSelectedPresetButtonId(),\n token: TemplateData.token,\n anonymousStatus: AppStore.getAnonymousStatus(),\n ppgfMessage: gncMessages?.ppgfMessage,\n directMessage: gncMessages?.directMessage,\n isInContext: isInContext(),\n});\n\nexport const getMaximumDonationAlertMessage = () => {\n const formatedMaximumAmount = formatCurrencyWithSymbol({\n value: TemplateData.maximumDonationAmount,\n currency: TemplateData.maximumDonationCurrency,\n });\n const alertMessage = gncMessages.maximumAmountAlert.replace(\n '{amount}',\n formatedMaximumAmount\n );\n\n return alertMessage;\n};\n\nexport const getPersonalizedNoteToPayeeLabel = () => {\n const psMessages = getPersonalizedMessages(GN_CONTENT_TOUCHPOINT, {\n isHtml: false,\n });\n return psMessages?.noteToPayeeLabel;\n};\n\nexport const getPersonalizedAnonymousContent = () => {\n const psMessages = getPersonalizedMessages(GN_CONTENT_TOUCHPOINT, {\n isHtml: false,\n });\n return {\n label: psMessages?.anonymousLabel,\n tooltip: psMessages?.anonymousTooltip,\n };\n};\n\nexport const getDismissEventName = () => {\n const url = window.location.href;\n\n if (url.includes('confirmation') || url.includes('pending')) {\n return EVENT_NAME.DW_GIVING_PAYMENT_SUCCESS_DISMISS_PRESSED;\n } else if (url.includes('guest')) {\n return EVENT_NAME.DW_GIVING_GUEST_FORM_DISMISS_PRESSED;\n } else if (url.includes('member')) {\n return EVENT_NAME.DW_GIVING_MEMBER_REVIEW_DISMISS_PRESSED;\n }\n return EVENT_NAME.DW_GIVING_DONATE_SETUP_DISMISS_PRESSED;\n};\n"],"sourceRoot":""}\n
\n )}\n