\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 Dialog,\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/productIntegrationUtils';\nimport { EVENT_NAME } from '../../utility/constants';\nimport { copyToClipboard } from '../../setup/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';\nimport { isCampaigns } from '../../utility/productIntegrationUtils';\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 0 60px',\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 = isMobile\n ? `fb-messenger://share/?link=${encodedUrl}&app_id=${appId}"e=${socialCampaign.facebookMessage}`\n : `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: shareUrl,\n });\n } else {\n window.open(\n shareUrl,\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 \n {socialCampaign.copyLinkHeader}\n \n \n {isCampaigns()\n ? socialCampaign.copyLinkSubheaderBefore\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 {\n isExternalFlow,\n isCampaigns,\n} from '../utility/productIntegrationUtils';\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 campaignId,\n isLanding = false,\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 : EVENT_NAME.DONATE_SUCCESS_SHARE_MESSAGE,\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 campaignId,\n title,\n email\n );\n\n const getSocialShareHeader = () => {\n if (personalizedMessages.social_title) {\n return personalizedMessages.social_title;\n } else if (isCampaigns()) {\n return social.shareGeneric;\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 (campaignId) {\n return `${TemplateData.paypalHostName}/donate/?campaign_id=${campaignId}&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 'campaign-landing': isCampaigns() && isLanding && !TemplateData.ismobile,\n });\n\n const getShareStyles = () => {\n if (isInContext() && isExternalFlow()) {\n return { marginBottom: '28px' };\n } else if (isCampaigns() && isLanding) {\n return { marginBottom: '48px', flexWrap: 'wrap', rowGap: '14px' };\n }\n return { marginBottom: '74px' };\n };\n\n return (\n <>\n {getSocialShareHeader()}\n {TemplateData.ismobile && isExternalFlow() ? (\n \n ) : (\n \n )}\n \n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport templateData, {\n localsMessages,\n isOldButtonFactory,\n} from '../utility/getTemplateData';\nimport { getPPCCStatus } from '../utility/helper';\nimport { BodyText, HeadingText, CaptionText } from '@paypalcorp/pp-react';\nimport PPCC from './ppcc';\nimport { Title } from '@paypalcorp/donate-react';\n\nconst MERCHANT_PPCC_CONFIRMED_STATUS = 'CONFIRMED';\nconst messages = localsMessages('common/subHeader');\n\nclass SubHeader extends React.Component {\n constructor() {\n super();\n const {\n label: { donateto = '', support = '', purpose: purposeLabel = '' } = {},\n } = messages || {};\n this.state = {\n donateto,\n support,\n purposeLabel,\n isVoucherFlow: templateData.isVoucherFlow,\n };\n }\n\n formatOrgName() {\n let { label, orgName } = this.props;\n label = label && label.toString().replace(/\\s/g, '').toUpperCase();\n let OName = orgName && orgName.toString().replace(/\\s/g, '').toUpperCase();\n return label.includes(OName) ? '' : orgName;\n }\n\n shouldShowDonationId() {\n if (this.props.page === 'member' || this.props.page === 'crossborder') {\n return true;\n }\n return isOldButtonFactory();\n }\n\n getFormattedOrgName(purposeLabel, orgName) {\n if (!this.state.isVoucherFlow) {\n return `${orgName}`;\n }\n return orgName;\n }\n\n render() {\n let { donateto = '', support = '', purposeLabel = '' } = this.state;\n let donationName = this.props.label;\n let orgName = this.formatOrgName();\n let donationId = this.props.donationId;\n let { formattedDonationName, formattedOrgName, formattedDonationId } = {};\n let isLanding = this.props.isLanding;\n let isCampaigns = this.props.isCampaigns;\n\n if (donationName === orgName) {\n formattedDonationName = donationName;\n formattedOrgName = '';\n } else {\n formattedDonationName = donationName;\n }\n\n if (orgName && !donationId) {\n if (donationName !== orgName) {\n formattedOrgName = this.getFormattedOrgName(purposeLabel, orgName);\n }\n }\n\n if (!orgName && donationId) {\n formattedDonationId = `${donationId}`;\n }\n\n if (orgName && donationId) {\n if (donationName !== orgName) {\n formattedDonationId = donationId;\n formattedOrgName = this.getFormattedOrgName(purposeLabel, orgName);\n } else {\n formattedOrgName = '';\n formattedDonationId = `${donationId}`;\n }\n }\n\n let shouldShowOrgName = isCampaigns()\n ? !isLanding\n : formattedOrgName && isLanding;\n\n return (\n \n
\n
\n {isLanding ? (\n \n {!isCampaigns() && this.state.isVoucherFlow\n ? support\n : donateto}\n \n ) : (\n \n {!isCampaigns() && this.state.isVoucherFlow\n ? support\n : donateto}\n \n )}\n
\n
\n\n
\n
\n
\n {!isCampaigns() && 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 isCampaigns: PropTypes.func,\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: 60,\n display: 'block',\n marginLeft: 'auto',\n marginRight: 'auto',\n marginBottom: 25,\n marginTop: 24,\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 {displayBannerImage()}\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":""}