\n {url}\n \n \n {isCopied ? (\n \n \n \n ) : (\n \n {messages.copy}\n \n )}\n
\n \n \n )\n );\n}\n\nCopyLink.propTypes = {\n url: PropTypes.string,\n analytics: PropTypes.func,\n messages: PropTypes.object,\n};\n\nCopyLink.defaultProps = {\n analytics: null,\n};\n\nexport default CopyLink;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Modal,\n BodyText,\n CaptionText,\n ActionMenu,\n Button,\n ShareFacebookIcon,\n ShareEmailIcon,\n ShareMessengerIcon,\n ShareWhatsappIcon,\n ShareTwitterIcon,\n ShareLinkIcon,\n CheckCircleAltIcon,\n} from '@paypalcorp/pp-react';\nimport { StyleSheet, css } from '../../utility/paypalAphrodite';\nimport SocialShareEmail from './socialShareEmail';\nimport SocialShareMobile from './socialShareMobile';\nimport SocialShareFacebook from './socialShareFacebook';\nimport SocialShareMessenger from './socialShareMessenger';\nimport SocialShareWhatsapp from './socialShareWhatsapp';\nimport SocialShareTwitter from './socialShareTwitter';\nimport SocialShareCopyLink from './socialShareCopyLink';\nimport Illustration from '../illustrations/Illustration';\nimport CopyLink from '../CopyLink';\nimport { isInContext, isMobileOrTablet } from '../../utility/inContextDonation';\nimport { isExternalFlow } from '../../utility/externalIntegrationUtils';\nimport { EVENT_NAME } from '../../utility/constants';\nimport { copyToClipboard } from '../../buttons/lib/copyToClipBoard';\nimport templateData from '../../utility/getTemplateData';\nimport { trackLinkClick, trackPageIM } from '../../fpti/fpti';\nimport { FPTI_TAGS, LINK_NAME } from '../../fpti/fptiConstants';\nimport { v2black } from '@paypalcorp/pp-react-colors';\n\nconst styles = StyleSheet.create({\n socialContainer: {\n display: 'flex',\n ':nth-child(1n) > *': {\n marginRight: 10,\n },\n },\n socialContainerMobile: {\n marginLeft: 10,\n },\n shareMenu: {\n flexDirection: 'column',\n },\n copyLinkModal: {\n paddingBottom: 30,\n },\n copyLinkContainer: {\n margin: 0,\n },\n copyLinkHeader: {\n color: v2black,\n marginTop: 20,\n marginBottom: 0,\n fontSize: '1.6rem',\n },\n copyLinkSubheader: {\n color: v2black,\n marginTop: 28,\n marginRight: 'auto',\n fontSize: '1.15rem',\n },\n});\n\nexport default function SocialShare({\n shareUrl,\n socialCampaign,\n isMobile,\n ...props\n}) {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [isShareMenuOpen, setIsShareMenuOpen] = useState(false);\n const [isCopied, setIsCopied] = useState(false);\n\n const encodedUrl = encodeURIComponent(shareUrl);\n const appId = '321983581337375';\n const emailUrl = `mailto:?subject=${socialCampaign.emailSubject}&body=${socialCampaign.emailBody}`;\n const facebookUrl = `https://www.facebook.com/dialog/share?app_id=${appId}&display=popup"e=${socialCampaign.facebookMessage}&href=${encodedUrl}`;\n const fbMessengerUrl = `https://www.facebook.com/dialog/send?app_id=${appId}&display=popup&link=${encodedUrl}&redirect_uri=${templateData.paypalHostName}`;\n const whatsappUrl = `https://${\n isMobile ? 'api' : 'web'\n }.whatsapp.com/send?&text=${socialCampaign.whatsappMessage}%20${encodedUrl}`;\n const twitterUrl = `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${socialCampaign.twitterMessage}`;\n const socialShareAltText = socialCampaign.title;\n const isActionMenu = props.renderMode === 'sheet' ? true : false;\n const socialItems = isActionMenu ? generateMenuOptions() : [];\n\n function handleSocialLinkClick(url, type) {\n window.open(\n url,\n 'popup',\n 'toolbar=0,status=0,width=640,height=340,scrollable=true'\n );\n handleAnalytics(`social_share_${type}`);\n }\n\n function handleOpenCopyModal() {\n setIsModalOpen(true);\n }\n\n function handleMobileClick() {\n if (navigator.share) {\n navigator.share({\n title: socialCampaign.mobileTitle,\n text: socialCampaign.mobileText,\n url: encodedUrl,\n });\n } else {\n window.open(\n encodedUrl,\n 'popup',\n 'toolbar=0,status=0,width=640,height=340,scrollable=true'\n );\n }\n handleAnalytics('mobile_share');\n }\n\n function handleMenuSelection(index) {\n if (socialItems[index].type === 'copy_link') {\n copyToClipboard('copy-link-text');\n setIsCopied(true);\n handleAnalytics('copy_link');\n\n setTimeout(() => {\n setIsCopied(false);\n }, 3000);\n } else {\n if (socialItems[index].type === 'email') {\n handleAnalytics('email-share');\n window.open(socialItems[index].url);\n } else if (socialItems[index].type === 'mobile_share') {\n handleMobileClick();\n } else {\n handleSocialLinkClick(\n socialItems[index].url,\n socialItems[index].title.toLowerCase()\n );\n }\n setIsCopied(false);\n setIsShareMenuOpen(false);\n }\n }\n\n function handleAnalytics(type) {\n if (props.analytics) {\n props.analytics(type);\n }\n }\n\n function generateMenuOptions() {\n let options = [];\n\n if (socialCampaign.email) {\n options.push({\n title: socialCampaign.sheet.email,\n url: emailUrl,\n type: 'email',\n itemLeft: (\n \n ),\n });\n }\n if (socialCampaign.facebook) {\n options.push({\n title: socialCampaign.sheet.facebook,\n url: facebookUrl,\n type: 'facebook',\n itemLeft: (\n \n ),\n });\n }\n if (socialCampaign.twitter) {\n options.push({\n title: socialCampaign.sheet.twitter,\n url: twitterUrl,\n type: 'twitter',\n itemLeft: (\n \n ),\n });\n }\n if (socialCampaign.facebookMessenger) {\n options.push({\n title: socialCampaign.sheet.messenger,\n url: fbMessengerUrl,\n type: 'messenger',\n itemLeft: (\n \n ),\n });\n }\n if (socialCampaign.whatsapp) {\n options.push({\n title: socialCampaign.sheet.whatsapp,\n url: whatsappUrl,\n type: 'whatsapp',\n itemLeft: (\n \n ),\n });\n }\n if (socialCampaign.copyLink) {\n options.push({\n title: (\n <>\n {socialCampaign.sheet.copyLink}\n {isCopied ? (\n <>\n \n \n {socialCampaign.copyLinkCopied}\n \n \n ) : null}\n \n ),\n type: 'copy_link',\n itemLeft: (\n <>\n \n {shareUrl}\n \n \n \n ),\n });\n }\n\n return options;\n }\n\n function handleMobileSocialShareButtonClick() {\n setIsShareMenuOpen(true);\n\n trackLinkClick(LINK_NAME.SOCIAL_SHARE, {\n eventName: EVENT_NAME.DW_GIVING_PAYMENT_SUCCESS_SHARE_PRESSED,\n });\n\n trackPageIM({\n pageSpec: {\n pgrp: window.fpti.pgrp,\n page: `${window.fpti.pgrp}:mobile::`,\n },\n additionalData: {\n [FPTI_TAGS.EVENT_NAME]: EVENT_NAME.DW_GIVING_SHARE_SCREEN_SHOWN,\n },\n });\n }\n\n function handleSocialShareSheetClose() {\n setIsShareMenuOpen(false);\n setIsCopied(false);\n trackLinkClick(LINK_NAME.SOCIAL_SHARE_DISMISS, {\n eventName: EVENT_NAME.DW_GIVING_SHARE_DISMISS_PRESSED,\n });\n }\n\n function mobileSocialShare() {\n return (\n <>\n \n handleMenuSelection(index)}\n options={socialItems}\n >\n \n );\n }\n\n function regularSocialShare() {\n return (\n <>\n {socialCampaign.email && (\n \n )}\n {navigator.share && socialCampaign.mobile && (\n \n )}\n {socialCampaign.facebook && (\n \n )}\n {socialCampaign.facebookMessenger && (\n \n )}\n {socialCampaign.whatsapp && (\n \n )}\n {socialCampaign.twitter && (\n \n )}\n {socialCampaign.copyLink && (\n \n )}\n \n );\n }\n\n return (\n <>\n \n {isActionMenu ? mobileSocialShare() : regularSocialShare()}\n \n {isInContext() && isExternalFlow() ? (\n \n ) : null}\n {socialCampaign.copyLink && (\n setIsModalOpen(false)}\n >\n \n \n \n \n {socialCampaign.copyLinkHeader}\n \n \n {socialCampaign.copyLinkSubheader}\n \n \n \n )}\n \n );\n}\n\nSocialShare.propTypes = {\n shareUrl: PropTypes.string,\n socialCampaign: PropTypes.object,\n};\n\nSocialShare.defaultProps = {\n align: 'center',\n handleAnalytics: null,\n};\n","import React from 'react';\nimport { blue600, BodyText, grey600 } from '@paypalcorp/pp-react';\nimport getSocialCampaign from '../utility/getSocialCampaign';\nimport TemplateData, { localsMessages } from '../utility/getTemplateData';\nimport SocialShare from '../components/socialShare/socialShare';\nimport _isEmpty from 'lodash/isEmpty';\nimport { isInContext } from '../utility/inContextDonation';\nimport { isExternalFlow } from '../utility/externalIntegrationUtils';\nimport { EVENT_NAME } from '../utility/constants';\nimport classNames from 'classnames';\nimport { trackLinkClick } from '../fpti/fpti';\n\nconst { label: copyLinkMessages } = localsMessages('common/copyLink');\nconst { title = {}, sheet = {} } = localsMessages('common/socialShareMessage');\n\nexport default function ConfirmationSocialShare(props) {\n const {\n email,\n hostedButtonId,\n orgName,\n messages: { social },\n personalizedMessages,\n } = props;\n const { copy, copied } = copyLinkMessages;\n const handleSocialAnalytics = (type) => {\n trackLinkClick(type, {\n eventName: isExternalFlow()\n ? EVENT_NAME.DW_GIVING_SHARE_CHANNEL_PRESSED\n : '',\n });\n };\n\n let socialMessages;\n\n if (personalizedMessages) {\n socialMessages = {\n ...social,\n ...personalizedMessages,\n copyLinkCopy: copy,\n copyLinkCopied: copied,\n sheet,\n };\n } else if (hostedButtonId) {\n socialMessages = {\n ...social,\n copyLinkCopy: copy,\n copyLinkCopied: copied,\n sheet,\n };\n } else {\n socialMessages = {\n ...social,\n ...social.unhosted,\n copyLinkCopy: copy,\n copyLinkCopied: copied,\n sheet,\n };\n }\n\n const socialCampaign = getSocialCampaign(\n socialMessages,\n orgName,\n hostedButtonId,\n title,\n email\n );\n\n const getSocialShareHeader = () => {\n if (personalizedMessages.social_title) {\n return personalizedMessages.social_title;\n } else if (_isEmpty(personalizedMessages)) {\n return social.shareWithMatch;\n }\n };\n\n const generateSocialShareUrl = () => {\n if (isExternalFlow()) {\n return TemplateData.shareUrl;\n } else if (hostedButtonId) {\n return `${TemplateData.paypalHostName}/donate/?hosted_button_id=${hostedButtonId}&source=url`;\n } else if (email) {\n return `${TemplateData.paypalHostName}/donate/?business=${email}&source=url`;\n }\n };\n\n const socialShareUrl = generateSocialShareUrl();\n\n const colors = {\n facebook: '#007AFF',\n twitter: '#64D2FF',\n };\n\n const headerClasses = classNames('text-center', 'social_share_header', {\n inContext: isInContext(),\n externalFlow: isExternalFlow(),\n });\n\n return (\n <>\n {getSocialShareHeader()}\n {TemplateData.ismobile && isExternalFlow() ? (\n \n ) : (\n \n )}\n \n );\n}\n","import React from 'react';\nimport { CaptionText, Col, Row } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\n\nfunction ConfirmationTransactionId(props) {\n return (\n \n \n \n {props.transactionId}\n \n \n
\n );\n}\n\nConfirmationTransactionId.propTypes = {\n transactionId: PropTypes.string,\n};\n\nexport default ConfirmationTransactionId;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link, Icon } from '@paypalcorp/pp-react';\nimport TemplateData, { localsMessages } from '../utility/getTemplateData';\nimport { StyleSheet, css } from 'aphrodite';\nimport _get from 'lodash/get';\nimport { trackLinkClick } from '../fpti/fpti';\nimport { LINK_NAME } from '../fpti/fptiConstants';\n\nlet messages = localsMessages('common/offerdetail');\n\nconst styles = StyleSheet.create({\n saveButton: {\n display: 'flex',\n justifyContent: 'flex-end',\n margin: 'auto',\n maxWidth: 415,\n '@media (max-width: 576px)': {\n justifyContent: 'center',\n },\n },\n});\n\nclass OfferSaveButton extends React.Component {\n printPage = () => {\n window.print();\n trackLinkClick(LINK_NAME.VOUCHER_PRINT);\n };\n\n sharePage = ({ title, text }) => {\n navigator.share({\n title,\n text,\n });\n trackLinkClick(LINK_NAME.VOUCHER_SHARE);\n };\n\n handleClick = (event) => {\n event.preventDefault();\n if (TemplateData.isdesktop || !navigator.share) {\n this.printPage();\n } else {\n const { offerProgram, txnStatement } = this.props;\n this.sharePage({\n title: _get(offerProgram, 'subTitle'),\n text: `${txnStatement} ${_get(offerProgram, 'description')}`,\n });\n }\n };\n\n render() {\n return (\n \n
\n \n {messages.offer.button.text}\n \n
\n
\n
\n
\n \n {messages.label.offer}\n \n
\n
\n
\n
\n
\n \n {this.props.returnText}\n \n
\n );\n }\n}\n\nexport default ConfirmationReturnText;\n\nConfirmationReturnText.propTypes = {\n returnText: PropTypes.string,\n};\n","import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from '@paypalcorp/pp-react-links';\nimport { isExternalFlow } from '../utility/externalIntegrationUtils';\n\nexport class ConfirmationReturnTo extends Component {\n render() {\n if (isExternalFlow()) {\n return null;\n }\n\n return (\n \n \n {this.props.returnto}\n \n
\n );\n }\n}\n\nexport default ConfirmationReturnTo;\n\nConfirmationReturnTo.propTypes = {\n returnto: PropTypes.string,\n handleRedirect: PropTypes.func,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport templateData, { localsMessages } from '../../utility/getTemplateData';\nimport { showSpinnerOverlay } from '../../utility/helper';\nimport { fetcher } from '../../utility/domUtils';\nimport _get from 'lodash/get';\nimport { isInContext } from '../../utility/inContextDonation';\nimport { isExternalFlow } from '../../utility/externalIntegrationUtils';\nimport isEmpty from 'lodash/isEmpty';\nimport { KEY_DOWN } from '../../utility/constants';\n\nconst messages = localsMessages('confirmation/postTransaction') || {};\n\nclass PostTransaction extends React.Component {\n constructor(props) {\n super(props);\n const { postdata = {}, syncReturnUrl = '' } = this.props || {};\n\n let postBackArray = [];\n\n Object.keys(postdata).forEach(function (key) {\n postBackArray.push({\n name: key,\n value: postdata[key],\n });\n });\n\n this.state = {\n orgName: this.props.orgName,\n redirectMethod: this.props.method,\n redirectUrl: this.props.action,\n syncReturnUrl,\n postBackArray,\n isRedirecting: false,\n allowRedirect: true,\n };\n this.stopRedirect = this.stopRedirect.bind(this);\n this.handleKeyDown = this.handleKeyDown.bind(this);\n }\n\n componentDidMount() {\n const { hideSuccessPage } = templateData;\n const { syncReturnUrl, redirectUrl } = this.state;\n document.addEventListener('mousedown', this.stopRedirect, true);\n document.addEventListener('keydown', this.handleKeyDown, true);\n\n // Disable redirection to merchant when DNW is in popup mode\n if (!isInContext() && (!isEmpty(syncReturnUrl) || !isEmpty(redirectUrl))) {\n this.setState({\n isRedirecting: true,\n });\n\n setTimeout(\n () => {\n const { allowRedirect } = this.state;\n if (allowRedirect) {\n this.handleRedirect();\n }\n },\n hideSuccessPage ? 1000 : 15000\n );\n }\n\n // No need to handle refresh case\n // As user will be automatically redirected back\n // In case if some is required, listening to UPDATE_CONFIRMATION\n // AppDispatcher.register(function(payload) {\n //\t if (payload.action && (payload.action.actionType === 'UPDATE_CONFIRMATION')) {}\n // });\n }\n\n stopRedirect() {\n const { allowRedirect } = this.state;\n if (allowRedirect) {\n this.setState({\n allowRedirect: false,\n isRedirecting: false,\n });\n }\n document.removeEventListener('mousedown', this.stopRedirect, true);\n document.removeEventListener('keydown', this.handleKeyDown, true);\n }\n\n handleKeyDown(event) {\n const keyPressed = event.which;\n if (\n KEY_DOWN.TAB === keyPressed ||\n KEY_DOWN.UP_ARROW === keyPressed ||\n KEY_DOWN.LEFT_ARROW === keyPressed ||\n KEY_DOWN.DOWN_ARROW === keyPressed ||\n KEY_DOWN.RIGHT_ARROW === keyPressed\n ) {\n this.stopRedirect();\n }\n }\n\n /*\n * handleRedirect\n */\n handleRedirect = () => {\n const { hideSuccessPage } = templateData;\n\n if (hideSuccessPage) {\n this.redirect();\n return;\n }\n\n if (this.shouldShowSpinner()) {\n showSpinnerOverlay();\n }\n fetcher('/donate/sessionlogout').finally(() => {\n this.redirect();\n });\n };\n\n shouldShowSpinner = () => {\n let { syncReturnUrl = '', redirectUrl = '' } = this.state || {};\n if (\n isExternalFlow() &&\n templateData.ismobile &&\n templateData.hideLandingPage &&\n !syncReturnUrl.includes('http') &&\n !redirectUrl.includes('http')\n ) {\n return false;\n } else {\n return true;\n }\n };\n\n redirect = () => {\n let {\n syncReturnUrl = '',\n redirectUrl = '',\n redirectMethod = '',\n } = this.state || {};\n\n if (redirectMethod === 'POST' && syncReturnUrl) {\n this.postBackForm.submit();\n } else if (redirectMethod === 'GET' && syncReturnUrl) {\n if (\n syncReturnUrl.indexOf('http') !== 0 &&\n syncReturnUrl.indexOf('//') !== 0 &&\n !isExternalFlow()\n ) {\n syncReturnUrl = '//' + syncReturnUrl;\n }\n window.location.href = syncReturnUrl;\n } else {\n if (\n redirectUrl.indexOf('http') !== 0 &&\n redirectUrl.indexOf('//') !== 0 &&\n !isExternalFlow()\n ) {\n redirectUrl = '//' + redirectUrl;\n }\n window.location.href = redirectUrl;\n }\n };\n\n render() {\n if (this.state.orgName && this.state.isRedirecting) {\n let redirectText = _get(messages, 'label.redirectText');\n\n redirectText = redirectText.replace('{orgName}', this.state.orgName);\n document.getElementById('spinnerText').innerHTML = redirectText;\n }\n\n return (\n \n {\n this.postBackForm = form;\n }}\n >\n {' '}\n {this.state.postBackArray.map(function (obj) {\n return (\n \n );\n })}\n \n
\n );\n }\n}\n\nPostTransaction.propTypes = {\n method: PropTypes.string,\n action: PropTypes.string,\n orgName: PropTypes.string,\n syncReturnUrl: PropTypes.string.isRequired,\n};\n\nPostTransaction.defaultProps = {\n method: 'GET',\n};\n\nexport default PostTransaction;\n","import React from 'react';\nimport ConfirmationReturnText from './ConfirmationReturnText';\nimport ConfirmationReturnTo from './ConfirmationReturnTo';\nimport PostTransaction from '../pages/confirmation/postTransaction';\n\nexport default function ConfirmationRedirect({\n autoRedirectMethod,\n autoRedirectUrl,\n handleRedirect,\n orgName,\n postBackData,\n returnText,\n returnTo,\n syncReturnUrl,\n}) {\n return (\n <>\n \n \n \n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from '@paypalcorp/pp-react-links';\nimport { isInContext, closeWindow } from '../utility/inContextDonation';\nimport { EVENT_NAME } from '../utility/constants';\nimport { trackLinkClick } from '../fpti/fpti';\nimport { LINK_NAME } from '../fpti/fptiConstants';\n\nconst DoneLink = ({ doneContent, syncReturnUrl, redirectUrl }) => {\n const handleClose = () => {\n const eventName = EVENT_NAME.DW_GIVING_PAYMENT_SUCCESS_DONE_PRESSED;\n trackLinkClick(LINK_NAME.DONE, {\n eventName,\n });\n\n if (isInContext()) {\n closeWindow();\n }\n\n if (syncReturnUrl) {\n window.location.href = syncReturnUrl;\n } else {\n window.location.href = redirectUrl;\n }\n };\n\n return (\n \n \n {doneContent}\n \n
\n );\n};\n\nDoneLink.propTypes = {\n doneContent: PropTypes.string,\n syncReturnUrl: PropTypes.string,\n redirectUrl: PropTypes.string,\n};\n\nexport default DoneLink;\n","import React, { useEffect } from 'react';\nimport TemplateData from '../utility/getTemplateData';\nimport { BodyText } from '@paypalcorp/pp-react';\nimport ConfirmationSocialShare from './ConfirmationSocialShare';\nimport ConfirmationTransactionId from './ConfirmationTransactionId';\nimport OfferConfirmation from '../components/offerConfirmation';\nimport PropTypes from 'prop-types';\nimport SignUpAlert from '../components/guest/SignUpAlert';\nimport VoucherFlowDisclaimer from '../components/voucherFlowDisclaimer';\nimport ConfirmationRedirect from './ConfirmationRedirect';\nimport { endCustomCPLTrackingForConfirmationPage } from '../utility/cpl';\nimport {\n isInContext,\n isMobileOrInContext,\n onComplete,\n isMWebNoReturnURL,\n isMobileOrTablet,\n} from '../utility/inContextDonation';\nimport {\n isGN,\n isGNC,\n isPPFundraising,\n} from '../utility/externalIntegrationUtils';\nimport CloseButton from '../components/CloseButton';\nimport classNames from 'classnames';\nimport DoneLink from './DoneLink';\nimport BannerHeader, { Banner } from '../components/GN/bannerHeader.js';\n\nfunction ConfirmationView(props) {\n const {\n autoRedirect,\n autoRedirectUrl,\n autoRedirectMethod,\n footer,\n handleRedirect,\n hostedButtonId,\n illustration,\n isSignUp,\n isVoucherFlow,\n message,\n messages,\n offerProgram,\n orgName,\n postBackData,\n returnTo,\n returnText,\n signUpProps,\n syncReturnUrl,\n txnId,\n personalizedMessages,\n isExternalFlow,\n } = props;\n\n useEffect(() => {\n endCustomCPLTrackingForConfirmationPage();\n }, []);\n\n useEffect(() => {\n onComplete(postBackData);\n }, []);\n\n function showSocialShare() {\n if (TemplateData.socialSharePreference) {\n return (\n \n );\n }\n return null;\n }\n\n function confirmationClass() {\n return classNames(\n {\n gn_donate_wrapper: TemplateData.bannerUrl,\n context_gn_wrapper: isGN() || isGNC(),\n donate_wrapper: !TemplateData.bannerUrl,\n confirmation: !TemplateData.bannerUrl,\n },\n { mobile_view: isMobileOrInContext() },\n {\n mobile_view_without_return_message: isMWebNoReturnURL(),\n },\n { ppf: isPPFundraising() }\n );\n }\n\n return (\n \n {isSignUp &&
}\n
\n {isExternalFlow &&
}\n {TemplateData.bannerUrl ? (\n
\n \n \n ) : (\n
{illustration}
\n )}\n
\n {message}\n\n {isExternalFlow && personalizedMessages.success_subheader ? (\n \n {personalizedMessages.success_subheader}\n \n ) : null}\n\n {isVoucherFlow && (\n \n )}\n\n {isVoucherFlow && }\n\n {showSocialShare()}\n\n {!isExternalFlow && (\n \n )}\n\n {isExternalFlow && (\n \n )}\n
\n
\n {!isInContext() && autoRedirect && autoRedirectUrl && (\n
\n )}\n {footer}\n
\n
\n
\n {isGN() || isGNC() ? (\n
\n \n \n ) : (\n
\n \n
\n )}\n
\n
\n \n {giftaidFlag && (\n \n )}\n
\n );\n};\n\nConfirmationMessage.propTypes = {\n yourDonation: PropTypes.object,\n giftaidFlag: PropTypes.bool,\n extraDonateAmount: PropTypes.string,\n giftAid: PropTypes.string,\n};\n\nexport default ConfirmationMessage;\n","import React, { useEffect } from 'react';\nimport { localsMessages } from '../utility/getTemplateData';\nimport { Row, Col } from '@paypalcorp/pp-react';\nimport ConfirmationCheckmark from './ConfirmationCheckmark';\nimport ConfirmationMessage from './ConfirmationMessage';\nimport ConfirmationView from './ConfirmationView';\nimport withConfirmationData from './withConfirmationData';\nimport withConfirmationMessages from './withConfirmationMessages';\nimport withTheme from '../components/withTheme';\nimport PropTypes from 'prop-types';\nimport * as AppActions from '../actions/AppActions';\nimport { addClass } from '../utility/domUtils';\nimport { isInContext } from '../utility/inContextDonation';\n\nconst messages = localsMessages('confirmation/confirmation');\n\nfunction SuccessView(props) {\n const {\n confirmationNumber,\n extraDonateAmount,\n giftAidConfText,\n giftaidFlag,\n rp_status,\n yourDonation,\n yourRPdonation,\n } = props;\n\n useEffect(() => {\n AppActions.showLanguageSelector(false);\n }, []);\n\n useEffect(() => {\n if (isInContext) {\n addClass('#mainWrapper', ['in-context-success-page']);\n }\n }, []);\n\n const SuccessMessage = () => (\n \n \n \n \n
\n );\n\n return (\n \n }\n message={}\n />\n );\n}\n\nSuccessView.propTypes = {\n confirmationNumber: PropTypes.string,\n extraDonateAmount: PropTypes.string,\n giftAidConfText: PropTypes.string,\n giftaidFlag: PropTypes.string,\n rp_status: PropTypes.bool,\n returnTo: PropTypes.string,\n returnText: PropTypes.string,\n yourRPdonation: PropTypes.object,\n yourDonation: PropTypes.object,\n};\n\nexport default withConfirmationData(\n withConfirmationMessages(withTheme(SuccessView), messages, 'success')\n);\n","export function showActionableErrorModal(errMsg) {\n window.showActionableErrorModal();\n document.getElementById('actionable-error-msg-1').innerHTML = errMsg;\n}\n\nexport function hideActionableErroModal() {\n window.hideActionableErroModal();\n}\n\nexport function showUnactionableErrorModal() {\n window.showUnactionableErrorModal();\n}\n\nexport function hideUnactionableErrorModal() {\n window.hideUnactionableErrorModal();\n}\n\nexport function showLeaveModal() {\n window.showLeaveModal();\n}\n\nexport function hideLeaveModal() {\n window.hideLeaveModal();\n}\n","import { createBrowserHistory } from 'history';\nimport * as modalUtils from '../buttons/utils/modalUtils';\n\nfunction waitForElement(selector, callback) {\n if (document.querySelector(selector) !== null) {\n callback(); // eslint-disable-line\n } else {\n setTimeout(function () {\n waitForElement(selector, callback);\n }, 100);\n }\n}\n\nconst history = createBrowserHistory({\n getUserConfirmation(message, callback) {\n // Show some custom dialog to the user and call\n // callback(true) to continue the transiton, or\n // callback(false) to abort it.\n modalUtils.showLeaveModal();\n\n waitForElement('#stay-and-finish', () => {\n document\n .querySelector('#stay-and-finish')\n .addEventListener('click', function () {\n console.log('stay-and-finish clicked');\n modalUtils.hideLeaveModal();\n callback(false); // eslint-disable-line\n });\n\n document\n .querySelector('#leave-now')\n .addEventListener('click', function () {\n modalUtils.hideLeaveModal();\n callback(true); // eslint-disable-line\n });\n });\n },\n});\nconst location = history.location;\n\nhistory.block((targetLocation, action) => {\n // The location and action arguments indicate the location\n // we're transitioning to and how we're getting there.\n if (\n window.location.pathname === '/donate/buttons/unhosted' &&\n targetLocation.pathname !== '/donate/buttons/unhosted/edit' &&\n targetLocation.pathname !== '/donate/buttons/login'\n ) {\n return \"If you leave now, your work won't be saved and you'll need to start over to create your button.\";\n }\n});\n\nexport { history, location };\n\nexport default history;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { StyleSheet, css } from 'aphrodite';\nimport {\n Accordion,\n AccordionRow,\n Icon,\n Divider,\n CaptionText,\n} from '@paypalcorp/pp-react';\nimport { localsMessages, getCurrencySymbol } from '../utility/getTemplateData';\nimport {\n getCurrencyParts,\n formatCurrencyAsString,\n formatPercentage,\n} from '../utility/formator';\nimport { sanitize } from '../utility/domUtils';\n\nimport { trackLinkClick } from '../fpti/fpti';\nimport { LINK_NAME } from '../fpti/fptiConstants';\n\nlet messages = localsMessages('common/offerdetail');\n\nconst styles = StyleSheet.create({\n offerWrapper: {\n paddingBottom: '20px',\n maxWidth: 415,\n margin: 'auto',\n },\n success: {\n paddingBottom: '8px',\n },\n accordionWrapper: {\n marginRight: 0,\n marginLeft: 0,\n backgroundColor: '#f5fbfe',\n backgroundClip: 'content-box',\n },\n offerDivider: {\n borderColor: '#BFDBEE',\n margin: 0,\n },\n offerHeader: {\n display: 'flex',\n justifyContent: 'flex-start',\n wordBreak: 'keep-all',\n },\n messageFrom: {\n paddingTop: '10px',\n paddingBottom: '10px',\n },\n description: {\n paddingBottom: '10px',\n },\n});\n\nfunction formatOfferTextAmount(value, currencyCode, type = 'MONETARY') {\n const isAmtPercent = type === 'PERCENTAGE';\n const formattedValue = (value / 100).toFixed(2);\n const amountOpts = { currency: currencyCode, value: formattedValue };\n\n return isAmtPercent\n ? formatPercentage(formattedValue)\n : formatCurrencyAsString(amountOpts);\n}\n\nclass OfferDetail extends React.Component {\n constructor(props) {\n super(props);\n let rightSymbol;\n try {\n const [firstParts = {}] = getCurrencyParts();\n rightSymbol = firstParts.$ !== 'symbol';\n } catch (e) {\n rightSymbol = false;\n }\n this.state = {\n rightSymbol,\n };\n }\n\n componentDidMount() {\n const row = document.getElementById('offerAccordion-row1');\n if (row) {\n row.click();\n }\n }\n\n createMarkup(content) {\n return {\n __html: content,\n };\n }\n\n handleClick() {\n trackLinkClick(LINK_NAME.VOUCHER);\n }\n\n getAmountDisplayValue = ({ value, currencyCode }) => {\n let amountDisplayValue;\n if (this.state.rightSymbol) {\n amountDisplayValue = `${value}${getCurrencySymbol(currencyCode)}`;\n } else {\n amountDisplayValue = `${getCurrencySymbol(currencyCode)}${value}`;\n }\n return amountDisplayValue;\n };\n\n render() {\n const {\n offerProgram: {\n clientOfferType,\n businessName,\n subTitle,\n description,\n type,\n value,\n currencyCode,\n },\n success,\n } = this.props;\n\n const isCustomOffer = clientOfferType && clientOfferType === 'CUSTOM';\n const offerTextAmount = formatOfferTextAmount(value, currencyCode, type);\n const titleMessage = isCustomOffer\n ? sanitize(subTitle)\n : messages.offer.title.replace('{amountText}', offerTextAmount);\n const aMessageFrom = messages.offer.messagefrombusiness.replace(\n '{businessName}',\n sanitize(businessName)\n );\n // const additonalMessage = messages.offer.receive.replace('{amountText}', offerTextAmountOff);\n\n if (titleMessage && description) {\n let heading = (\n \n );\n return (\n \n this.handleClick()}\n >\n \n \n \n \n
\n {`\"${description}\"`}\n \n
\n
\n
\n {getFooterContent(\n 'footer.copyright',\n { currentYear: new Date().getFullYear() },\n { useHTML: true }\n )}\n
\n \n);\n\nexport const Privacy = () => (\n \n \n {getFooterContent('link.privacy', null, { useHTML: true })}\n
\n \n);\n\nexport const Legal = () => (\n \n \n {getFooterContent('link.legal', null, { useHTML: true })}\n
\n \n);\n\nexport const Policy = () => (\n \n \n {getFooterContent('link.policies', null, { useHTML: true })}\n
\n \n);\n\nexport const CombinedFinancialServicesText = () => (\n \n \n \n {getFooterContent('link.auCombinedFinancialServicesText', null, {\n useHTML: true,\n })}\n
\n \n
\n);\n\nFeedback.propTypes = {\n handleQualtrics: PropTypes.func,\n};\n","import React, { useState, useEffect } from 'react';\nimport { Container, Row, Col } from '@paypalcorp/pp-react';\nimport LanguageSelector from '../languageSelectorMenu';\nimport {\n Help,\n Security,\n Feedback,\n ReportInappropriateContent,\n Imprint,\n CopyRight,\n Privacy,\n Policy,\n Legal,\n CombinedFinancialServicesText,\n} from './footerLinks';\nimport templateData from '../../utility/getTemplateData';\nimport AppDispatcher from '../../dispatcher/AppDispatcher';\nimport AppStore from '../../stores/AppStore';\nimport {\n isNotFullScreen,\n isInContext,\n isMobileOrTablet,\n} from '../../utility/inContextDonation';\nimport { isExternalFlow } from '../../utility/externalIntegrationUtils';\nimport { trackLinkClick } from '../../fpti/fpti';\nimport { LINK_NAME } from '../../fpti/fptiConstants';\nimport classNames from 'classnames';\n\nexport default function Footer() {\n const [isLanguageSelectorEnabled, setIsLanguageSelectorEnabled] =\n useState(false);\n\n if (isExternalFlow() && isInContext() && isNotFullScreen()) {\n return null;\n }\n\n useEffect(() => {\n setIsLanguageSelectorEnabled(AppStore.getLanguageSelectorState());\n\n const dispatcherMessages = AppDispatcher.register((payload) => {\n if (payload.action?.actionType === 'SHOW_LANGUAGE_SELECTOR') {\n const { item } = payload.action;\n setIsLanguageSelectorEnabled(item);\n }\n });\n\n return () => {\n AppDispatcher.unregister(dispatcherMessages);\n };\n }, []);\n\n const handleQualtrics = () => {\n window.PAYPAL?.analytics?.reloadQualtrics(\n 'donatenodeweb-consumer-qualtrics'\n );\n };\n\n const trackReportLink = () => {\n trackLinkClick(LINK_NAME.REPORT_LINK);\n };\n\n const footerClass = () => {\n return classNames({\n footer_in_context: isInContext() && isNotFullScreen,\n mobile_footer: isMobileOrTablet(),\n });\n };\n\n const footerContainerClass = () => {\n return classNames({\n footer_container: true,\n mobile_footer_container: isMobileOrTablet(),\n });\n };\n\n return (\n \n );\n}\n","import { Dispatcher } from 'flux';\nimport assign from 'object-assign';\n\nlet AppDispatcher = assign(new Dispatcher(), {\n handleViewAction(action) {\n this.dispatch({\n source: 'VIEW_ACTION',\n action: action,\n });\n },\n});\n\nexport default AppDispatcher;\n","import React from 'react';\nimport { BodyText } from '@paypalcorp/pp-react';\nimport PropTypes from 'prop-types';\n\nexport default function ConfirmationTitle(props) {\n return {props.message};\n}\n\nConfirmationTitle.propTypes = {\n message: PropTypes.string,\n};\n","import React from 'react';\nimport { hideSpinnerOverlay, setFocus } from '../utility/helper';\nimport _isFunction from 'lodash/isFunction';\nimport AppStore from '../stores/AppStore';\nimport { fetcher } from '../utility/domUtils';\nimport templateData from '../utility/getTemplateData';\n\nexport default function withPostTransactionRequest(\n WrappedComponent,\n postTransactionUrl\n) {\n return class WithPostTransactionRequest extends React.Component {\n componentDidMount() {\n this.isComponentMounted = true;\n this.requestPostTransaction();\n }\n\n requestPostTransaction = async () => {\n const { token } = templateData;\n this.serverRequest = fetcher(postTransactionUrl, {\n method: 'POST',\n body: JSON.stringify({\n token: token,\n }),\n })\n .then((response) => response.json())\n .then((response) => {\n hideSpinnerOverlay();\n setFocus();\n if (response.data.confirmationData) {\n if (this.isComponentMounted) {\n // Dont call setState on an unmounted component\n this.setState({\n amount:\n response.data.confirmationData.amount ||\n AppStore.getDonationAmount(),\n guestSignUp:\n response.data.confirmationData.guestSignUp || false,\n displayMyAccount:\n response.data.confirmationData.showAccountOverview || false,\n confirmationNumber:\n response.data.confirmationData.confirmationNumber || '',\n receiptId: response.data.confirmationData.receiptId || '',\n recurringConfirmationId:\n response.data.confirmationData.recurringConfirmationId || '',\n });\n }\n }\n });\n };\n\n abortRequestPostTransaction = () => {\n this.isComponentMounted = false;\n if (this.serverRequest && _isFunction(this.serverRequest.abort)) {\n this.serverRequest.abort();\n }\n };\n\n componentWillUnmount = () => {\n this.abortRequestPostTransaction();\n };\n\n render() {\n return ;\n }\n };\n}\n","import templateData from '../utility/getTemplateData';\nimport { getParameterByName } from './queryStringHelper';\n\nconst REMEMBERED_AUTH_STATE = 'REMEMBERED';\nconst LOGGEDIN_AUTH_STATE = 'LOGGEDIN';\nconst FROMUL_QUERY_PARAM = 'fromUL';\n\nexport function getForcedLoginUrlWithoutOt() {\n return templateData.forcedLoginUrlWithoutOt;\n}\n\nexport function getHardLogoutUrl(force = false) {\n return templateData.hardLogoutUrl;\n}\n\nexport function isOneTouchUser() {\n return templateData.authState === REMEMBERED_AUTH_STATE;\n}\n\nexport function isLoggedInUser() {\n return templateData.authState === LOGGEDIN_AUTH_STATE;\n}\n\nexport function isAuthenticatedUser() {\n return isOneTouchUser() || isLoggedInUser();\n}\n\nexport function shouldShowUserBanner() {\n if (isOneTouchUser()) {\n return true;\n }\n\n const fromUL = getParameterByName(FROMUL_QUERY_PARAM) || '';\n\n if (!fromUL && isLoggedInUser()) {\n return true;\n }\n\n if (fromUL === 'true' && isLoggedInUser()) {\n return false;\n }\n\n // Default to not showing the banner\n return false;\n}\n","import getContent from 'pp-react-l10n';\nimport React from 'react';\nimport { trackLinkClick } from '../fpti/fpti';\nimport { LINK_NAME } from '../fpti/fptiConstants';\nimport { isExternalFlow } from '../utility/externalIntegrationUtils';\nimport TemplateData from '../utility/getTemplateData';\nimport { isInContext, isMobileOrTablet } from '../utility/inContextDonation';\nimport classNames from 'classnames';\n\nclass CancelAndReturn extends React.Component {\n constructor() {\n super();\n this.state = {\n displayMe: TemplateData.charityCancelUrl ? true : false,\n };\n this.isLanding = TemplateData.viewName === 'landing';\n }\n\n handleCancel = () => {\n trackLinkClick(LINK_NAME.CANCEL);\n let cancelurl = TemplateData.charityCancelUrl;\n if (cancelurl.indexOf('http') != 0 && cancelurl.indexOf('//') != 0) {\n cancelurl = '//' + cancelurl;\n }\n window.location.href = cancelurl;\n };\n\n cancelButtonWrapperClass() {\n return classNames({\n 'ppvx_col-sm-12': true,\n 'text-center': true,\n pp_cancel_btn_wrapper: true,\n is_mobile: isMobileOrTablet(),\n is_landing: this.isLanding && !this.props.isGuest,\n });\n }\n\n render() {\n const getCancelAndReturnContent = getContent('locals')(\n 'common/cancelAndReturn'\n );\n\n if (isExternalFlow() || isInContext()) {\n return null;\n }\n\n return (\n \n {this.state.displayMe && (\n
\n \n {getCancelAndReturnContent('label.return', {\n orgName: TemplateData.donationName,\n })}\n \n \n
\n
\n {isLanding ? (\n \n {this.state.isVoucherFlow ? support : donateto}\n \n ) : (\n \n {this.state.isVoucherFlow ? support : donateto}\n \n )}\n
\n
\n\n
\n
\n
\n {isLanding ? (\n \n {formattedDonationName}\n {getPPCCStatus() === MERCHANT_PPCC_CONFIRMED_STATUS && (\n \n )}\n \n ) : (\n \n {formattedDonationName}\n {getPPCCStatus() === MERCHANT_PPCC_CONFIRMED_STATUS && (\n \n )}\n \n )}\n \n
\n
\n \n {formattedDonationId}\n \n
\n )}\n \n );\n }\n}\n\nSubHeader.propTypes = {\n label: PropTypes.string.isRequired,\n orgName: PropTypes.string.isRequired,\n donationId: PropTypes.string,\n page: PropTypes.string,\n isLanding: PropTypes.bool,\n};\n\nexport default SubHeader;\n","import React from 'react';\nimport templateData from '../utility/getTemplateData';\nimport { StyleSheet, css } from 'aphrodite';\n\nconst styles = StyleSheet.create({\n centedImage: {\n maxWidth: 300,\n maxHeight: 120,\n display: 'block',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginBottom: 25,\n },\n});\n\nclass CharityLogo extends React.Component {\n constructor() {\n super();\n const logoUrl = templateData.logoUrl || '';\n this.state = {\n bannerUrl: logoUrl.includes('https') ? logoUrl : false,\n altText: templateData.donationName || '',\n };\n }\n\n render() {\n return (\n \n
\n
\n {this.state.bannerUrl ? (\n
\n ) : null}\n
\n
\n
\n {bannerUrl && (\n \n \n \n )}\n {hasLogo && }\n \n
\n );\n};\n\nHeaderDNW.propTypes = {\n isLanding: PropTypes.bool,\n};\n\nexport default HeaderDNW;\n","import React from 'react';\nimport { CaptionText, HeadingText } from '@paypalcorp/pp-react-text';\nimport { V2CausesIcon } from '@paypalcorp/pp-react-icons';\nimport PropTypes from 'prop-types';\nimport getContent from 'pp-react-l10n';\n\nconst GNCSubheader = ({ organizationName, purpose }) => {\n return (\n \n
\n
\n {purpose}\n \n
\n \n \n {getContent('locals')('common/subHeader')(\n 'label.supportingOrganization',\n { organization: organizationName }\n )}\n \n
\n
\n
\n
\n \n {getContent('locals')('common/subHeader')(\n 'label.donateToOrganization',\n { organization: organizationName },\n { useHTML: true }\n )}\n \n \n {purpose}\n \n
\n
\n
\n \n \n \n {isGNC() && (\n
\n )}\n {isGN() && (\n
\n )}\n
\n {isExternalFlow() ? (\n \n ) : (\n \n )}\n
\n );\n};\n\nDonateHeader.propTypes = {\n isLanding: PropTypes.bool,\n};\n\nexport default DonateHeader;\n"],"sourceRoot":""}