\n
\n ) : \n);\n\nconst renderRightItem = ({ rightCustomItem, closeButtonAction }) => {\n if (rightCustomItem) return rightCustomItem;\n return (\n closeButtonAction ? (\n \n ) : \n );\n};\n\nconst shouldRenderHeader = ({\n backArrowAction, closeButtonAction, rightCustomItem, backCustomAction\n}) => backArrowAction || closeButtonAction || !!rightCustomItem || !!backCustomAction;\n\nconst renderTopHeader = ({\n customTopHeader, backArrowAction, backCustomAction, title, rightCustomItem, closeButtonAction\n}) => {\n if (customTopHeader) return customTopHeader;\n if (!shouldRenderHeader({\n backArrowAction, closeButtonAction, rightCustomItem, backCustomAction\n })) return null;\n return (\n \n { renderBackArrow({ backArrowAction, backCustomAction }) }\n { title }\n { renderRightItem({ rightCustomItem, closeButtonAction }) }\n
\n );\n};\n\nconst handleSetEmptyDiv = ({ emptyHeight, setEmptyDivHeight }) => {\n if (isMobile()) {\n let updatedHeight = emptyHeight;\n if (emptyHeight < 0 && emptyHeight < 150) updatedHeight = 150;\n setEmptyDivHeight(Math.abs(updatedHeight));\n return;\n }\n if (emptyHeight < 0) {\n setEmptyDivHeight(Math.abs(emptyHeight));\n return;\n }\n setEmptyDivHeight(0);\n};\n\nconst getBottomPopoverEmptyDivHeight = ({\n appGeneralPopupContentRef, appGeneralPopupOverlayContainerRef, setEmptyDivHeight\n}) => {\n const appGeneralPopupContent = appGeneralPopupContentRef.current;\n const appGeneralPopupOverlayContainer = appGeneralPopupOverlayContainerRef;\n if (!appGeneralPopupContent || !appGeneralPopupOverlayContainer) return;\n const appGeneralPopupOverlayContainerPosition = appGeneralPopupOverlayContainer.getBoundingClientRect();\n const appGeneralPopupContentPosition = appGeneralPopupContent.getBoundingClientRect();\n const emptyHeight = appGeneralPopupOverlayContainerPosition.height - appGeneralPopupContentPosition.height;\n handleSetEmptyDiv({ emptyHeight, setEmptyDivHeight });\n};\n\nconst getTopHeaderConteinerStyle = ({ withLogo }) => {\n if (withLogo) return { display: 'flex' };\n return {};\n};\n\nconst renderTopHeaderContainer = ({ logoImg, withLogo }) => {\n if (logoImg) {\n return { logoImg }
;\n }\n return (\n \n
\n \n );\n};\n\nfunction AppGeneralPopup({\n children, backArrowAction, closeButtonAction, rightCustomItem, backCustomAction, theme, visible,\n title, customTopHeader, closable, needOpenOnAppRoot, logoImg, withLogo\n}) {\n const appGeneralPopupRef = useRef();\n const appGeneralPopupContentRef = useRef();\n const [appGeneralPopupOverlayContainerRef, setAppGeneralPopupOverlayContainerRef] = useState(null);\n const [emptyDivHeight, setEmptyDivHeight] = useState(null);\n\n const handleResize = () => {\n getBottomPopoverEmptyDivHeight({\n appGeneralPopupContentRef, appGeneralPopupOverlayContainerRef, setEmptyDivHeight\n });\n };\n\n useEffect(() => {\n if (visible === null) return () => {};\n if (visible) {\n bodyScrollHandler({ visible, handleResize });\n return () => { bodyScrollHandler({ visible: !visible, handleResize }); };\n }\n return () => {};\n }, [visible]);\n\n useEffect(() => {\n const appGeneralPopupContent = appGeneralPopupContentRef.current;\n const cleanerFunction = resizeObserverHandler({ appGeneralPopupContent, handleResize });\n if (appGeneralPopupOverlayContainerRef) {\n appGeneralPopupOverlayContainerRef.scrollTop = appGeneralPopupOverlayContainerRef.scrollHeight;\n }\n return () => { cleanerFunction(); };\n }, [appGeneralPopupOverlayContainerRef, appGeneralPopupContentRef.current]);\n\n const appGeneralPopupOverlayContainerRefHandler = useCallback((appGeneralPopupOverlayContainerNode) => {\n setAppGeneralPopupOverlayContainerRef(appGeneralPopupOverlayContainerNode);\n }, []);\n\n const getOverlayContainerClick = (e) => { getOverlayContainerClickHandler({ closable, e }); };\n\n const getGeneralContainerClick = (e) => { getGeneralContainerClickHandler({ closable, e }); };\n\n const renderPopupContent = () => (\n renderPopupContentHandler({\n visible, emptyDivHeight, appGeneralPopupContentRef,\n logoImg, title, customTopHeader, backArrowAction, backCustomAction, rightCustomItem,\n closeButtonAction, children, getOverlayContainerClick, getGeneralContainerClick, withLogo,\n appGeneralPopupOverlayContainerRefHandler, appGeneralPopupOverlayContainerRef\n })\n );\n\n useEffect(() => {\n const appGeneralPopup = appGeneralPopupRef.current;\n openOnAppRootHandler({ appGeneralPopup, needOpenOnAppRoot, visible });\n }, [appGeneralPopupRef.current, visible]);\n\n const renderAppGeneralPopupOnBody = () => (\n \n \n
\n \n { renderTopHeaderContainer({ logoImg, withLogo }) }\n
\n \n { renderTopHeader({\n customTopHeader, backArrowAction, backCustomAction,\n title, rightCustomItem, closeButtonAction\n }) }\n { children }\n
\n { renderPopupContent() }
\n );\n };\n\n const renderAppGeneralPopup = () => {\n if (needOpenOnAppRoot) return renderAppGeneralPopupOnBody();\n return renderAppGeneralPopupRegular();\n };\n\n return renderAppGeneralPopup();\n}\n\nAppGeneralPopup.propTypes = {\n children: PropTypes.node,\n backArrowAction: PropTypes.func,\n closeButtonAction: PropTypes.func,\n rightCustomItem: PropTypes.node,\n backCustomAction: PropTypes.func,\n theme: PropTypes.string,\n visible: PropTypes.bool,\n title: PropTypes.node,\n customTopHeader: PropTypes.node,\n closable: PropTypes.func,\n needOpenOnAppRoot: PropTypes.bool,\n logoImg: PropTypes.node,\n withLogo: PropTypes.bool\n};\n\nAppGeneralPopup.defaultProps = {\n children: null,\n backArrowAction: null,\n closeButtonAction: null,\n rightCustomItem: null,\n backCustomAction: null,\n theme: appGeneralPopupTheme.DEFAULT,\n visible: true,\n title: null,\n customTopHeader: null,\n closable: null,\n needOpenOnAppRoot: false,\n logoImg: null,\n withLogo: false\n};\n\nexport default AppGeneralPopup;\n","import AppGeneralPopup from './app_general_popup';\n\nexport default AppGeneralPopup;\n","// extracted by mini-css-extract-plugin\nexport default {\"toastContainerHiden\":\"toastContainerHiden--HcFPL\",\"fadeOut\":\"fadeOut--hjjNt\",\"toastContainer\":\"toastContainer--ib1rk\",\"fadeIn\":\"fadeIn--qRNxD\",\"toastMessage\":\"toastMessage--gyvsq\",\"toast\":\"toast--_Bypx\",\"animation-bzdot9\":\"animation-bzdot9--i6LrG\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classes from './classes.module.scss';\n\nfunction Toast({ toastText, show, bottomPlacement }) {\n return (\n \n
\n \n );\n}\n\nToast.propTypes = {\n toastText: PropTypes.string.isRequired,\n show: PropTypes.bool,\n bottomPlacement: PropTypes.string\n};\n\nToast.defaultProps = {\n show: false,\n bottomPlacement: null\n};\n\nexport default Toast;\n","// extracted by mini-css-extract-plugin\nexport default {\"addButtonImg\":\"addButtonImg--IlTTo\",\"skeleton\":\"skeleton--XWV3d\",\"animation-bzdot9\":\"animation-bzdot9--L8wJD\",\"wallet\":\"wallet--je7VP\",\"addButton\":\"addButton--qlyLX\",\"purchase\":\"purchase--QSjxq\",\"popupAddButtonText\":\"popupAddButtonText--tsnXP\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport classnames from 'classnames';\nimport classes from './classes.module.scss';\nimport { paymentSourcesTheme } from '../../config/const';\nimport { isKA } from '../../config/utils';\nimport AddApplePayOption from '../../payment_options/apple_pay/add_apple_pay_option';\nimport { PurchaseSvgIcon } from '../../sprites';\nimport { applePayIsSupported, getAddIconNameForPOWVersion } from '../../purchase_details_common/purchase_details_common_utils';\n\nconst sideManuTitle = ({ existing, t }) => {\n if (existing && existing.length < 1) return t('purchase.add_a_new_payment_method');\n return t('purchase.add_another_payment_method');\n};\n\nconst addSourceImgId = ({ theme, kind }) => {\n if (theme === paymentSourcesTheme.wallet) {\n return 'add_payment';\n }\n if (kind === 'pp') {\n return getAddIconNameForPOWVersion('add_pp');\n }\n if (kind === 'iap') {\n return getAddIconNameForPOWVersion('add_iap');\n }\n if (kind === 'ap') {\n return 'add_ap';\n }\n return getAddIconNameForPOWVersion('add_cc');\n};\n\nconst getAddButtonText = ({\n theme, existing, kind, t\n}) => {\n if (theme === paymentSourcesTheme.wallet) return sideManuTitle({ existing, t });\n return t(`purchase.add_${ kind }`);\n};\n\nconst getAddButtonClasses = (loading) => {\n if (loading) return classnames(classes.addButton, classes.skeleton);\n return classes.addButton;\n};\n\nconst getAddButtonId = ({ kind }) => {\n if (kind === 'iap') return 'in_app_purchase';\n if (kind === 'cc') return 'add_new_cc';\n if (kind === 'ap') return 'add_new_ap';\n return 'continue_with_paypal';\n};\n\nconst getAddButtonStyle = ({ theme }) => {\n if (isKA() && theme === paymentSourcesTheme.wallet) {\n return {\n backgroundColor: 'var(--app-color)', color: 'var(--app-white)', boxShadow: 'unset', border: 'unset'\n };\n }\n return {};\n};\n\nfunction AddPaymentMethod({\n kind, addSource, theme, existing, loading\n}) {\n const { t } = useTranslation();\n\n const onAdd = () => {\n if (addSource) addSource(kind);\n };\n\n const renderAddAPPaymentMethod = () => {\n if (loading || !applePayIsSupported()) return null;\n return \n {toastText}\n
\n \n \n
\n );\n\n return kind === 'ap' ? renderAddAPPaymentMethod() : renderAddPaymentMethod();\n}\n\nAddPaymentMethod.propTypes = {\n kind: PropTypes.string.isRequired,\n addSource: PropTypes.func,\n existing: PropTypes.array,\n theme: PropTypes.oneOf([paymentSourcesTheme.purchase, paymentSourcesTheme.wallet])\n};\n\nAddPaymentMethod.defaultProps = {\n theme: paymentSourcesTheme.wallet,\n addSource: null,\n existing: []\n};\n\nexport default AddPaymentMethod;\n","import AddPaymentMethod from './add_payment_method';\n\nexport default AddPaymentMethod;\n","// extracted by mini-css-extract-plugin\nexport default {\"paymentMethodBtn\":\"paymentMethodBtn--vSXrh\",\"sourceErrorContainer\":\"sourceErrorContainer--ueD7r\",\"sourceNameContainer\":\"sourceNameContainer--_f9cD\",\"skeleton\":\"skeleton--L6hCD\",\"loadingContent\":\"loadingContent--MEmme\",\"animation-bzdot9\":\"animation-bzdot9--_BfH3\",\"sourceContainer_purchase\":\"sourceContainer_purchase--LUjh1\",\"mobileSource\":\"mobileSource--Gp7LE\",\"sourceImg\":\"sourceImg--oXpvp\",\"sourceImgChangingSource\":\"sourceImgChangingSource--WJ1Cv\",\"sourceShortInfo\":\"sourceShortInfo--LApnm\",\"defaultText\":\"defaultText--pYgfh\",\"errorText\":\"errorText--HqK4S\",\"errorImg\":\"errorImg--nCxIS\",\"paymentArrow\":\"paymentArrow--SkF5o\",\"sourceContainer_wallet\":\"sourceContainer_wallet--FpC7y\",\"notSupportedOption\":\"notSupportedOption--EFTX_\",\"notSupportedContainer\":\"notSupportedContainer--agNNx\"};","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport {\n purchaseErrorText, paymentSourcesTheme, appThemes\n} from '../../config/const';\nimport classes from './classes.module.scss';\nimport CreditCardImg from '../../add_credit_card_form/credit_card_img';\nimport ExpandedText from '../../helpers/expanded_text';\nimport {\n formatCardName, hideEmailAdress, isPaygAndNotEligibleToPayAsYouGo, getAppTheme\n} from '../../config/utils';\nimport { PurchaseSvgIcon } from '../../sprites';\nimport { applePayIsSupported, iapIsSupported, getAddIconNameForPOWVersion } from '../../purchase_details_common/purchase_details_common_utils';\n\nconst paymentKind = {\n payPal: 'pp',\n creditCard: 'cc',\n applePay: 'ap',\n iap: 'iap'\n};\n\nconst renderErrorText = ({ errorText }) => {\n if (!errorText) return null;\n return (\n \n { getAddButtonText({\n theme, existing, kind, t\n }) }\n
\n \n \n { errorText }\n
\n );\n};\n\nconst renderDefaultText = ({ isDefault, t }) => {\n if (!isDefault) return null;\n return (\n \n { t('purchase.default') }\n
\n );\n};\n\nconst renderAdditionalTextIfPaypalBillingAgreementEmail = ({\n paypalBillingAgreementEmail, theme\n}) => {\n if (paypalBillingAgreementEmail) {\n if (theme === paymentSourcesTheme.wallet) return null;\n return (\n \n
\n );\n};\n\nconst renderArrowImg = ({ changingSource }) => {\n if (changingSource) return null;\n\n return (\n \n \n {t('purchase.payment_option_not_supported')}\n \n \n
\n \n );\n\n const applePaySource = useMemo(() => (!applePayIsSupported() ? notSupportedPaymentSource() : (\n \n
\n { renderArrowImg({ theme, changingSource }) }\n \n {t('purchase.change_payment_option')}\n
\n \n
\n { renderArrowImg({ theme, changingSource }) }\n \n )), [isPayg, changingSource, isDefault, t, theme, eligibleToPayAsYouGo, isPaymentOption]);\n\n const paypalSorce = (\n \n Apple Pay\n { renderAdditionalText({\n errorText, changingSource, isDefault, t, paypalBillingAgreementEmail, theme, eligibleToPayAsYouGo, isPayg, errorTextIfNotEligibleToPayAsYouGo: t('purchase.apple_pay_is_not_available_for_this_service')\n }) }\n
\n \n
\n { renderArrowImg({ theme, changingSource }) }\n \n );\n\n const creditCardSource = (\n \n Paypal\n { renderAdditionalText({\n errorText, changingSource, isDefault, t, paypalBillingAgreementEmail, theme, eligibleToPayAsYouGo, isPayg, errorTextIfNotEligibleToPayAsYouGo: t('purchase.paypal_is_not_available_for_this_service')\n }) }\n
\n \n
\n { renderArrowImg({ theme, changingSource }) }\n \n );\n\n const iapSource = () => {\n if (!iapIsSupported()) return notSupportedPaymentSource();\n return (\n \n { formatCardName(type) }\n {' * * * '}\n { last4 }\n { renderAdditionalText({\n errorText, changingSource, isDefault, t, paypalBillingAgreementEmail, theme, eligibleToPayAsYouGo, isPayg, errorTextIfNotEligibleToPayAsYouGo: t('purchase.this_card_cannot_be_used_for_zen_mode')\n }) }\n
\n \n
\n { renderArrowImg(theme, changingSource) }\n \n );\n };\n\n const renderLoadingContent = () => ();\n\n const renderContent = () => {\n if (loading) return renderLoadingContent();\n switch (kind) {\n case paymentKind.creditCard: {\n return creditCardSource;\n }\n case paymentKind.payPal: {\n return paypalSorce;\n }\n case paymentKind.applePay: {\n return applePaySource;\n }\n case paymentKind.iap: {\n return iapSource();\n }\n default:\n return null;\n }\n };\n\n const onSourceClick = () => {\n onSourceClickHandler({\n disableEdit, reauthorizeRequired, expired, errorText, onEditSource, id, options, theme, onMakeDefault,\n managePaymentSource, kind, editCardIfSecurityReasons, isPayg, eligibleToPayAsYouGo, isPaymentOption\n });\n };\n\n const renderPaymentMethod = () => (\n \n { t('purchase.in_app_purchase') }\n
\n \n \n
\n );\n\n return renderPaymentMethod();\n}\n\nPaymentMethod.propTypes = {\n id: PropTypes.number,\n kind: PropTypes.string,\n context: PropTypes.object,\n isDefault: PropTypes.bool,\n expired: PropTypes.bool,\n options: PropTypes.array,\n editable: PropTypes.bool,\n onEditSource: PropTypes.func,\n onMakeDefault: PropTypes.func,\n removeSource: PropTypes.func,\n disableEdit: PropTypes.bool,\n managePaymentSource: PropTypes.func.isRequired,\n clickSource: PropTypes.string,\n theme: PropTypes.oneOf([paymentSourcesTheme.purchase, paymentSourcesTheme.wallet]),\n loading: PropTypes.bool,\n changingSource: PropTypes.oneOfType(\n [PropTypes.bool, PropTypes.string, PropTypes.number]\n ).isRequired,\n editCardIfSecurityReasons: PropTypes.func,\n isPayg: PropTypes.bool,\n isPaymentOption: PropTypes.bool\n};\n\nPaymentMethod.defaultProps = {\n id: null,\n kind: null,\n context: {},\n isDefault: null,\n expired: null,\n options: [],\n editable: true,\n disableEdit: false,\n onEditSource: null,\n onMakeDefault: null,\n removeSource: null,\n clickSource: '',\n theme: paymentSourcesTheme.wallet,\n loading: null,\n changingSource: false,\n editCardIfSecurityReasons: null,\n isPayg: null,\n isPaymentOption: null\n};\n\nexport default PaymentMethod;\n","// extracted by mini-css-extract-plugin\nexport default {\"container\":\"container--kpY2p\",\"applePayButton\":\"applePayButton--lNl3c\",\"sourceIcon\":\"sourceIcon--iYTjr\",\"ccDetailsContainer\":\"ccDetailsContainer--GKcuo\",\"ccLast4\":\"ccLast4--GKWz0\",\"ccDetails\":\"ccDetails--Wl6HK\",\"ppDetails\":\"ppDetails--c7mGy\",\"isDefault\":\"isDefault--dkxlm\",\"setDefaultButton\":\"setDefaultButton--ejrXw\",\"removeItem\":\"removeItem--UzZix\",\"removeContainer\":\"removeContainer--pJqUQ\",\"removeButtons\":\"removeButtons--L9PUb\",\"cancelRemove\":\"cancelRemove--SEm9G\",\"confirmRemove\":\"confirmRemove--oTzeS\",\"removeTitle\":\"removeTitle--O5Xri\",\"removeText\":\"removeText--tqH8W\",\"rootWallet\":\"rootWallet--WBTkk\",\"sourceDetailsHeader\":\"sourceDetailsHeader--XwXfS\",\"sourceName\":\"sourceName--RFr8S\",\"deleteIcon\":\"deleteIcon--RSWjH\",\"ellipsisPayPalName\":\"ellipsisPayPalName--zecD2\",\"animation-bzdot9\":\"animation-bzdot9--tBm3K\"};","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport classes from './classes.module.scss';\n\nfunction RemovePaymentSource({\n onCancelRemove, onConfirmRemove\n}) {\n const { t } = useTranslation();\n\n const renderRemoveButtonsSection = () => (\n \n \n { t('purchase.cancel') }\n \n \n { t('purchase.yes_delete_it')}\n \n
\n );\n\n const renderRemovingContainer = () => (\n \n
\n );\n\n return (\n renderRemovingContainer()\n );\n}\n\nRemovePaymentSource.propTypes = {\n onCancelRemove: PropTypes.func.isRequired,\n onConfirmRemove: PropTypes.func.isRequired\n};\n\nexport default RemovePaymentSource;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslation } from 'react-i18next';\nimport classes from './classes.module.scss';\nimport { PaymentSourceType } from '../payment_sources_prop_types';\nimport RemovePaymentSource from './remove_payment_method';\nimport ExpandedText from '../../helpers/expanded_text';\nimport AppGeneralPopup from '../../app_general_popup';\nimport CreditCardImg from '../../add_credit_card_form/credit_card_img';\nimport { appGeneralPopupTheme } from '../../config/const';\nimport {\n formatCardName, hideEmailAdress\n} from '../../config/utils';\nimport { PurchaseSvgIcon } from '../../sprites';\nimport { applePayIsSupported } from '../../purchase_details_common/purchase_details_common_utils';\n\nconst renderSourceIcon = ({ kind, type }) => {\n if (kind === 'cc') return \n { t('purchase.delete_payment_method')}\n
\n \n { t('purchase.are_you_sure_you_want_to_delete_this_payment_method') }\n
\n { renderRemoveButtonsSection() }\n \n
\n);\n\nconst renderDetails = ({\n kind, last4, exp, paypalBillingAgreementEmail, fullName\n}) => {\n if (kind === 'ap') return null;\n if (kind === 'cc') {\n return (\n \n { renderSourceIcon({ kind, type }) }\n { getSourceType({ kind, type }) }\n
\n { renderRemoveSourceItem({ isDefault, existing, onRemove }) }\n \n
\n );\n }\n return (\n \n {'* * * * '}\n { last4 }\n
\n \n {/* FULL NAME */}\n { fullName }\n { `EXP: ${ exp }` }\n
\n \n \n { hideEmailAdress(paypalBillingAgreementEmail) || 'PayPal'}\n \n
\n );\n};\n\nfunction PaymentMethodDetails({\n kind, context, isDefault, id, removeSource, onMakeDefault, existing, fullName\n}) {\n const { t } = useTranslation();\n const [removing, setRemoving] = useState(false);\n const {\n type, last4, exp, paypalBillingAgreementEmail\n } = context || {};\n\n const onRemove = () => {\n setRemoving(true);\n };\n\n const onCancelRemove = () => {\n setRemoving(false);\n };\n\n const onConfirmRemove = () => {\n removeSource(id);\n };\n\n const renderDefaultSection = () => {\n if (isDefault) {\n return (\n \n { t('purchase.default')}\n
\n );\n }\n return (\n \n { renderSourceDetailsHeader({\n kind, type, isDefault, existing, onRemove\n }) }\n { renderDetails({\n kind, last4, exp, paypalBillingAgreementEmail, fullName\n }) }\n { renderDefaultSection() }\n
\n );\n\n const removePaymentMethodPopup = () => {\n if (!removing) return null;\n return (\n \n { renderPaymentSourceContainer() }\n { removePaymentMethodPopup() }\n
\n );\n\n return renderScreenThemeContainer();\n}\n\nPaymentMethodDetails.propTypes = {\n ...PaymentSourceType,\n removeSource: PropTypes.func.isRequired,\n onMakeDefault: PropTypes.func.isRequired,\n clickSource: PropTypes.string\n};\n\nPaymentMethodDetails.defaultProps = {\n clickSource: null\n};\n\nexport default PaymentMethodDetails;\n","// extracted by mini-css-extract-plugin\nexport default {\"sourcesContainer\":\"sourcesContainer--Prktu\",\"callSourcesContainer\":\"callSourcesContainer--ykHhE\",\"placeholderContainer\":\"placeholderContainer--lnIGA\",\"placeholderImg\":\"placeholderImg--Dj_lR\",\"placeholderText\":\"placeholderText--HAyFE\",\"root_purchase\":\"root_purchase--uQR06\",\"paymentMethodsContentContainer\":\"paymentMethodsContentContainer--j54U8\",\"addCardBottomBtnContainer\":\"addCardBottomBtnContainer--eVuqn\",\"root_wallet\":\"root_wallet--Hms4J\",\"addCardBottomBtnContainerDesktop\":\"addCardBottomBtnContainerDesktop--q6qE1\",\"animation-bzdot9\":\"animation-bzdot9--EDtkA\"};","// extracted by mini-css-extract-plugin\nexport default {\"saveBtnContainer\":\"saveBtnContainer--uX2cX\",\"guaranteedSafeAndAddCreditCardBtnContainer\":\"guaranteedSafeAndAddCreditCardBtnContainer--XuFoW\",\"guaranteedSafeContainer\":\"guaranteedSafeContainer--RbbYJ\",\"guaranteedSafeLockContainer\":\"guaranteedSafeLockContainer--aBcrF\",\"guaranteedSafeLockImgContainer\":\"guaranteedSafeLockImgContainer--hXyDs\",\"guaranteedSafeLockImg\":\"guaranteedSafeLockImg--LE_rh\",\"guaranteedSafeText\":\"guaranteedSafeText--v92kF\",\"guaranteedSafeImgsContainer\":\"guaranteedSafeImgsContainer--u4Oro\",\"guaranteedSafeImgs\":\"guaranteedSafeImgs--aY6eB\",\"saveButton\":\"saveButton--Gl4XM\",\"disabledSaveButton\":\"disabledSaveButton--ErQbJ\",\"errorContainer\":\"errorContainer--S89Ll\",\"errorTitleContainer\":\"errorTitleContainer--DoDWI\",\"errorTextContainer\":\"errorTextContainer--xSCMh\",\"errorOkBtn\":\"errorOkBtn--w0oF3\",\"addCreditCardHolder\":\"addCreditCardHolder--XDoP2\",\"addCreditCardContainer\":\"addCreditCardContainer--cpbCb\",\"addCreditCardTitleContainer\":\"addCreditCardTitleContainer--NpaOB\",\"addCreditCardTitle\":\"addCreditCardTitle--rEmbj\",\"addCreditCardCloseBtnContainer\":\"addCreditCardCloseBtnContainer--LyEYg\",\"addCreditCardCloseBtn\":\"addCreditCardCloseBtn--OjRFH\",\"addCreditCardCloseImg\":\"addCreditCardCloseImg--qMNro\",\"zenModeLabelConainer\":\"zenModeLabelConainer--JWXdk\",\"zenModeLabelText\":\"zenModeLabelText--WaE5P\",\"animation-bzdot9\":\"animation-bzdot9--LcCMD\"};","import React, { useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport classes from './classes.module.scss';\nimport {\n tagIds, getBlueSnapFieldFocusStyle, renderError,\n getInputClasses, getLoading, canSave, renderLabel, getPlaceHolders, renderCreditCardImg,\n renderTooltipHandler, addCreditCardFormInputTypes, handleNameZipError\n} from './add_credit_card_form_utils';\nimport { tooltipTypes } from './tooltips/tooltips';\nimport useGetewayLoader from './use_geteway_loader/use_geteway_loader';\nimport { LOG_LEVELS } from '../config/app_logger';\n\nconst renderFraudFrame = (getewayFields) => {\n if (!getewayFields.fraudFrame) return null;\n return getewayFields.fraudFrame;\n};\n\nconst AddCreditCardForm = ({\n setSavingBlueSnapCard, config, loading, setAddCreditCardFormStatusHandler, log, getConfig, submitCardDataHandler, blueSnapSettings\n}) => {\n const { t } = useTranslation();\n const [name, setName] = useState('');\n const [zip, setZip] = useState('');\n const [visibleTooltip, setVisibleTooltip] = useState(null);\n const [addCreditCardFormErrors, setAddCreditCardFormErrors] = useState({});\n\n const geteway = useGetewayLoader({\n config, log, loading, blueSnapSettings, t, setSavingBlueSnapCard, getConfig, submitCardDataHandler\n });\n\n const { getewayFields = {}, getewayStatus = {} } = geteway;\n const { fieldFocus, getewayErrors } = getewayStatus;\n\n const clearedErrors = (errorType) => {\n setAddCreditCardFormErrors(pendingAddCreditCardFormErrors => {\n const clearedErrorKeys = Object.keys(pendingAddCreditCardFormErrors)\n .filter((err) => err !== errorType);\n const clearedError = {};\n clearedErrorKeys.forEach((key) => { clearedError[key] = pendingAddCreditCardFormErrors[key]; });\n return { ...clearedError };\n });\n };\n\n const setAddCreditCardFormErrorsHandler = (value) => {\n setAddCreditCardFormErrors(pendingAddCreditCardFormErrors => ({ ...pendingAddCreditCardFormErrors, ...value }));\n };\n\n useEffect(() => {\n if (getewayErrors) {\n if (Object.keys(getewayErrors).length === 0) {\n clearedErrors('getewayErrors');\n } else {\n setAddCreditCardFormErrorsHandler({ getewayErrors: { ...getewayErrors } });\n }\n }\n }, [getewayErrors]);\n\n const getGetewayError = (tagId) => (addCreditCardFormErrors.getewayErrors || {})[tagId];\n\n const setNameValue = (event) => {\n setName(event.target.value);\n if (addCreditCardFormErrors.cName) { clearedErrors(addCreditCardFormInputTypes.cName); }\n };\n\n const setZipValue = (event) => {\n setZip(event.target.value);\n if (addCreditCardFormErrors.cZip) { clearedErrors(addCreditCardFormInputTypes.cZip); }\n };\n\n useEffect(() => {\n if (getewayStatus.addCardHandle) {\n const addCardFunction = () => {\n getewayStatus.addCardHandle({\n handleNameZipError, name, zip, setAddCreditCardFormErrorsHandler, addCreditCardFormInputTypes, isloading: loading, getewayItem: getewayStatus.getewayItem\n });\n };\n setAddCreditCardFormStatusHandler({ addCard: addCardFunction, canSaveCard: canSave({ name, zip, getewayErrors }) && !getLoading({ loading, setupComplete: getewayStatus.setupComplete }) });\n }\n }, [name, zip, getewayErrors, getewayStatus.addCardHandle, loading, config, getewayStatus.getewayItem, getewayStatus.setupComplete]);\n\n useEffect(() => {\n setAddCreditCardFormStatusHandler(getewayStatus);\n }, [getewayStatus.setupComplete, getewayStatus.addCardClicked]);\n\n const hideTooltip = () => {\n log(LOG_LEVELS.DEBUG, 'CC', 'Tooltip hidden');\n setVisibleTooltip(null);\n };\n\n const showTooltip = (tooltipType) => {\n log(LOG_LEVELS.DEBUG, 'CC', 'Tooltip shown', { type: tooltipType });\n setVisibleTooltip(tooltipType);\n };\n\n const renderTooltip = (tooltipType) => (\n renderTooltipHandler({\n tooltipType, blueSnapSettings, visibleTooltip, hideTooltip, showTooltip\n })\n );\n\n const nameOfCardInput = (\n \n { renderLabel({\n inputLabels: blueSnapSettings.inputLabels, inputType: addCreditCardFormInputTypes.cName\n }) }\n
\n );\n\n const cardNumberInput = () => (\n \n { renderLabel({ inputLabels: blueSnapSettings.inputLabels, inputType: addCreditCardFormInputTypes.ccn }) }\n \n { renderCreditCardImg({ blueSnapSettings, cardNameType: getewayStatus.cardNameType }) }\n { getewayFields.cardNumberInput }\n
\n { renderError(getGetewayError(tagIds.ccn)) }\n \n );\n\n const dateSecurityInput = (\n \n
\n \n \n { renderLabel({ inputLabels: blueSnapSettings.inputLabels, inputType: addCreditCardFormInputTypes.exp }) }\n \n { getewayFields.dateExpiredInput }\n {renderTooltip(tooltipTypes.exp)}\n
\n { renderError(getGetewayError(tagIds.exp)) }\n \n { renderLabel({ inputLabels: blueSnapSettings.inputLabels, inputType: addCreditCardFormInputTypes.cvv }) }\n \n { getewayFields.securityInput }\n {renderTooltip(tooltipTypes.cvv)}\n
\n { renderError(getGetewayError(tagIds.cvv)) }\n \n \n );\n\n const zipPostalCodeInput = (\n \n { renderLabel({ inputLabels: blueSnapSettings.inputLabels, inputType: addCreditCardFormInputTypes.cZip }) }\n
\n );\n\n const renderBlueSnapForm = () => (\n \n { nameOfCardInput }\n { cardNumberInput() }\n { dateSecurityInput }\n { zipPostalCodeInput }\n { renderFraudFrame(getewayFields) }\n
\n );\n\n return renderBlueSnapForm();\n};\n\nexport default AddCreditCardForm;\n","import AddCreditCardForm from './add_credit_card_form';\n\nexport default AddCreditCardForm;\n","/* eslint-disable object-property-newline */\nimport React, { useEffect, useMemo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useNavigate, useLocation } from 'react-router-dom';\nimport queryString from 'query-string';\nimport { Trans, useTranslation } from 'react-i18next';\nimport classes from './classes.module.scss';\nimport AppGeneralPopup from '../../app_general_popup';\nimport { messageToAppKeys } from '../../message_to_app_handler';\nimport AddCreditCardForm from '../../add_credit_card_form';\nimport { getTextColorForTheme, fromMobileApp } from '../../config/utils';\nimport { LOG_LEVELS } from '../../config/app_logger';\nimport { PurchaseSvgIcon } from '../../sprites';\n\nconst getSaveBtnClassName = ({ canSaveCard, isBlsLoading }) => {\n if (!canSaveCard || (isBlsLoading)) return classes.disabledSaveButton;\n return classes.saveButton;\n};\n\nconst renderZenModeLabelConainer = ({ isPayg }) => {\n if (!isPayg) return null;\n return (\n \n
\n );\n};\n\nconst blueSnapSettings = (t) => ({\n needShowCreditCardImg: true,\n inputLabels: {\n cName: t('blueSnap.cardholder_name'),\n ccn: t('blueSnap.card_number_label'),\n exp: t('blueSnap.expiration_label'),\n cvv: t('blueSnap.security_label'),\n cZip: t('blueSnap.zip_postal_code_label')\n },\n variables: {\n '--blue-snap-text-color': 'var(--app-text-primary)',\n '--blue-snap-placeholder-text-color': 'var(--app-blue-snap-placeholder-text-color)',\n '--blue-snap-label-text-color': 'var(--app-text-primary)',\n '--blue-snap-background-color': 'var(--app-background-secondary-color)',\n '--blue-snap-input-error-color': 'var(--app-blue-snap-input-error-color)',\n '--blue-snap-input-border-color': 'var(--app-border-primary-color)',\n '--blue-snap-input-bottom-border': 'var(--app-blue-snap-input-bottom-border)',\n '--blue-snap-input-border-focus-color': 'var(--app-blue-snap-input-border-focus-color)',\n '--blue-snap-input-border-shadow-color': 'var(--app-box-shadow-gray)',\n '--blue-snap-input-holder-margin-top': '23px',\n '--blue-snap-input-border-radius': 'var(--app-blue-snap-input-border-radius)',\n '--blue-snap-input-height': '43px',\n '--blue-snap-tooltips-background-color': 'var(--app-background-secondary-color)',\n '--blue-snap-tooltips-border-color': 'var(--app-border-primary-color)',\n '--blue-snap-tooltips-border-shadow-color': 'var(--app-border-shadow-light-gray)'\n },\n blueSnapStyle: {\n input: {\n 'font-size': '16px',\n 'font-weight': 700,\n height: '100%',\n width: '100%',\n 'background-color': 'transparent',\n 'border-radius' : 0,\n padding: 0,\n color: getTextColorForTheme()\n },\n '::placeholder': {\n 'font-size': '16px',\n 'font-weight': 400\n }\n },\n checkoutStyle: {\n base: {\n fontSize: '16px',\n fontWeight: 700,\n height: '100%',\n width: '100%',\n backgroundColor: 'transparent',\n borderRadius : 0,\n padding: 0,\n color: getTextColorForTheme()\n },\n autofill: {\n color: getTextColorForTheme()\n },\n hover: {\n color: getTextColorForTheme()\n },\n focus: {\n color: getTextColorForTheme()\n },\n valid: {\n color: getTextColorForTheme()\n },\n invalid: {\n color: getTextColorForTheme()\n },\n placeholder: {\n base: {\n fontSize: '16px',\n fontWeight: 400\n }\n }\n },\n tooltips: {\n exp: { text: \n
\n \n \n { t('blueSnap.save_card') }\n \n
\n );\n\n const renderAddCreditCardBtnWithGuaranteedSafe = () => (\n \n
\n\n );\n\n const renderAddCreditCardForm = () => {\n const addCreditCardFormProps = {\n config, setSavingBlueSnapCard: setSaving, loading: isBlsLoading,\n setAddCreditCardFormStatusHandler, log, getConfig: () => getAddCardCinfig(id),\n submitCardDataHandler: onUpdate, blueSnapSettings: blueSnapSettings(t)\n };\n return (\n <>\n \n
\n { renderAddCreditCardBtn() }\n \n
\n \n
\n \n { t('blueSnap.guaranteed_safe') }\n
\n \n
\n \n
\n );\n\n return renderAddCreditCard();\n}\n\nAddCreditCard.propTypes = {\n getAddCardCinfig: PropTypes.func.isRequired,\n updateCard: PropTypes.func.isRequired,\n onPaymentMethodSelected: PropTypes.func,\n doneAddCard: PropTypes.func.isRequired,\n config: PropTypes.object,\n id: PropTypes.number,\n clickSource: PropTypes.string,\n trackCreditCardAdded: PropTypes.func.isRequired,\n trackAddCreditCardFailed: PropTypes.func.isRequired,\n trackStartAddingCreditCard: PropTypes.func.isRequired,\n error: PropTypes.string,\n clearAddingCardError: PropTypes.func.isRequired,\n receivedMessageFromApp: PropTypes.object,\n setMessageToAppData: PropTypes.func,\n loadPaymentOptions: PropTypes.func,\n log: PropTypes.func.isRequired,\n paymentSources: PropTypes.object,\n isPayg: PropTypes.bool\n};\n\nAddCreditCard.defaultProps = {\n config: null,\n onPaymentMethodSelected: null,\n clickSource: null,\n id: null,\n error: null,\n receivedMessageFromApp: {},\n setMessageToAppData: null,\n loadPaymentOptions: null,\n paymentSources: {},\n isPayg: null\n};\n\nexport default AddCreditCard;\n","import React from 'react';\nimport queryString from 'query-string';\nimport {\n fromMobileApp, isPOW, isWebView\n} from '../config/utils';\nimport classes from './classes.module.scss';\nimport { paymentSourcesTheme } from '../config/const';\nimport AddPaymentMethod from './add_payment_method';\nimport AppGeneralPopup from '../app_general_popup';\nimport { PurchaseSvgIcon } from '../sprites';\nimport { applePayIsSupported, iapIsSupported, getAddIconNameForPOWVersion } from '../purchase_details_common/purchase_details_common_utils';\n\nexport const getReturnTo = () => (queryString.parse(window.location.search) || {}).return_to;\nexport const getForceAddKind = () => (queryString.parse(window.location.search)\n || {}).force_add_kind;\nexport const getShouldAutoSelect = () => (queryString.parse(window.location.search)\n|| {}).auto_select_payment;\n\nconst addingPPFromMobile = ({ kind }) => fromMobileApp && kind === 'pp';\n\nconst generateSourcesListLoading = () => {\n const sourcesListLoading = [];\n for (let i = 0; i < 3; i += 1) {\n sourcesListLoading.push({\n kind: 'loading', expired: null, isDefault: null, id: i\n });\n }\n return sourcesListLoading;\n};\n\nconst notHavePaymentMethods = ({ existing }) => {\n if (existing && existing.length === 1 && existing[0].kind === 'ap' && !applePayIsSupported()) {\n return true;\n }\n return existing && existing.length < 1;\n};\n\nconst getPlaceholderText = (t) => {\n if (isPOW()) return t('purchase.your_default_payment_method_is_inapp_purchases');\n return t('purchase.you_currently_have_no_saved_payment_methods');\n};\n\nexport const getPaymentMethodsContentContainerStyle = ({ managingSource }) => {\n if (!managingSource) return {};\n return { background: 'var(--app-background-color)', height: 'unset' };\n};\n\nconst getSourcesListcontainerClassName = ({ theme }) => {\n if (theme === paymentSourcesTheme.purchase) return classes.callSourcesContainer;\n return classes.sourcesContainer;\n};\n\nconst shouldIgnoreAddPPorAPOption = ({ kind, theme, isPayg }) => {\n if (kind !== 'pp' && kind !== 'ap') return false;\n if (isPayg) return true;\n return theme === paymentSourcesTheme.wallet;\n};\n\nconst shouldIgnoreAddInAppption = ({ theme, setInAppPaymentOptions }) => {\n if (!isPOW() || !setInAppPaymentOptions) return true;\n if (!iapIsSupported()) return true;\n return theme === paymentSourcesTheme.wallet;\n};\n\nconst getAddCardHeaderBtnHolder = (existing, renderAddCardHeaderBtn) => (notHavePaymentMethods({ existing }) ? null : renderAddCardHeaderBtn);\n\nexport const titleDataHandler = ({\n managingSource, setTitleData, doneManagingPaymentSource, doneChangingPaymentSource, theme,\n renderAddCardHeaderBtn, t, history, location, existing\n}) => {\n if (managingSource) {\n setTitleData({ backArrowHandler: doneManagingPaymentSource, titleText: t('purchase.payment_method_info') });\n return;\n }\n if (theme === paymentSourcesTheme.purchase) {\n let backArrowHandler = doneChangingPaymentSource;\n if (getShouldAutoSelect()) {\n backArrowHandler = () => {\n // need for support old app rout\n const search = queryString.stringify({ state: 'user_close', ...(queryString.parse(location.search)) });\n history(`${ location.pathname }?${ search }`, {\n state: { ...location.state },\n replace: true\n });\n doneChangingPaymentSource();\n };\n }\n setTitleData({\n backArrowHandler,\n titleText: t('purchase.use_a_different_payment_method'),\n titleTextStyle: {\n fontSize: '16px', justifyContent: 'flex-start', position: 'unset', paddingLeft: '15px'\n }\n });\n return;\n }\n if (theme === paymentSourcesTheme.wallet) {\n setTitleData({ titleText: t('purchase.payment_methods'), addCardHeaderBtnHolder: getAddCardHeaderBtnHolder(existing, renderAddCardHeaderBtn) });\n }\n};\n\nconst renderNotHavePaymentMethods = ({ renderAddCardBottomBtn, t }) => (\n \n
\n { renderZenModeLabelConainer({ isPayg }) }\n \n {rendeCloseBtn()}\n
\n { t('blueSnap.add_credit_card_title')}
\n \n { renderAddCreditCardForm() }\n \n \n
\n \n
\n {t('purchase.add_cc_error_title')}
\n {error || t('purchase.error_subtitle')}
\n \n \n
\n);\n\nconst renderSourcesListLoading = ({ theme, renderSource }) => (\n { getPlaceholderText(t) }
\n {renderAddCardBottomBtn(true)}\n \n { generateSourcesListLoading().map((s) => renderSource(s))}\n
\n);\n\nconst renderSourcesListContent = ({\n existing, renderSource, renderAddCardBottomBtn, t\n}) => {\n if (notHavePaymentMethods({ existing })) return renderNotHavePaymentMethods({ renderAddCardBottomBtn, t });\n existing.forEach((item, i) => {\n if (item.isDefault) {\n existing.splice(i, 1);\n existing.unshift(item);\n }\n });\n return existing.map((s) => renderSource(s));\n};\n\nexport const renderSourcesList = ({\n loading, existing, theme, renderSource, renderAddCardBottomBtn, t\n}) => {\n if (loading || !existing) return renderSourcesListLoading({ theme, renderSource });\n return (\n \n { renderSourcesListContent({\n existing, renderSource, renderAddCardBottomBtn, t\n }) }\n
\n );\n};\n\nconst addSourceForKindLoading = ({ theme, kind, loading }) => {\n if (theme !== paymentSourcesTheme.purchase) return null;\n return (\n { renderAddSourceForKind('cc') }
;\n\n const renderAddCardHeaderBtn = () => renderAddSourceForKind('cc');\n\n useEffect(() => {\n titleDataHandler({\n managingSource, setTitleData, doneManagingPaymentSource, doneChangingPaymentSource, theme,\n renderAddCardHeaderBtn, t, shouldAutoSelect, history, location, existing\n });\n }, [managingSource, available, theme]);\n\n const renderAddCreditCard = () => {\n const { id, config, error } = addingCardData || {};\n const addCreditCard = (\n \n { renderPaymentMethodsListTitle() }\n \n { renderPaymentMethodsContent({\n managingSource, theme, renderManagingSource, loading, existing,\n renderSource, t, renderAddCardBottomBtn, renderAddSourceForKind, renderAddCreditCard\n }) }\n { renderToast(showToast) }\n
\n \n );\n };\n\n return renderPaymentMethodsList();\n}\n\nPaymentMethodsList.propTypes = {\n paymentSources: PropTypes.shape(PaymentSourcesListType),\n theme: PropTypes.oneOf([paymentSourcesTheme.purchase, paymentSourcesTheme.wallet]),\n addSource: PropTypes.func.isRequired,\n hidePopup: PropTypes.func,\n startEditingPaymentSource: PropTypes.func.isRequired,\n managePaymentSource: PropTypes.func.isRequired,\n clickSource: PropTypes.string,\n onMakeDefault: PropTypes.func.isRequired,\n removeSource: PropTypes.func,\n doneManagingPaymentSource: PropTypes.func.isRequired,\n loadAvailable: PropTypes.func,\n getAddCardCinfig: PropTypes.func.isRequired,\n updatePaymentSource: PropTypes.func.isRequired,\n doneAddCard: PropTypes.func.isRequired,\n log: PropTypes.func.isRequired,\n clearAddingCardError: PropTypes.func.isRequired,\n doneChangingPaymentSource: PropTypes.func,\n analyticsEvents: PropTypes.object,\n updateDefault: PropTypes.func,\n changingSource: PropTypes.oneOfType(\n [PropTypes.bool, PropTypes.string, PropTypes.number]\n ).isRequired,\n setInAppPaymentOptions: PropTypes.func,\n receivedMessageFromApp: PropTypes.object,\n setMessageToAppData: PropTypes.func,\n showPaymentSources: PropTypes.func,\n editCardIfSecurityReasons: PropTypes.func.isRequired,\n trackPageVisit: PropTypes.func\n};\n\nPaymentMethodsList.defaultProps = {\n theme: paymentSourcesTheme.wallet,\n paymentSources: {},\n clickSource: null,\n hidePopup: null,\n loadAvailable: null,\n doneChangingPaymentSource: null,\n analyticsEvents: {},\n removeSource: null,\n updateDefault: null,\n changingSource: false,\n setInAppPaymentOptions: null,\n receivedMessageFromApp: {},\n setMessageToAppData: null,\n showPaymentSources: null,\n trackPageVisit: null\n};\n\nexport default PaymentMethodsList;\n","// extracted by mini-css-extract-plugin\nexport default {\"addCardHeaderBtnContainer\":\"addCardHeaderBtnContainer--fsLMr\",\"addCardHeaderBtnContainerContent\":\"addCardHeaderBtnContainerContent--WJykb\",\"addCardHeaderBtnContainerContentSkeleton\":\"addCardHeaderBtnContainerContentSkeleton--P2wsG\",\"animation-bzdot9\":\"animation-bzdot9--XZ0C4\",\"skeleton\":\"skeleton--zrmR4\",\"wallet\":\"wallet--iBZ91\",\"titlePaymentMethods\":\"titlePaymentMethods--YGrn0\",\"backArrow\":\"backArrow--WAFkM\",\"closeBtn\":\"closeBtn--mf5IP\",\"titleRowItems\":\"titleRowItems--GV9lE\",\"purchase\":\"purchase--mNF9p\",\"backArrowContainer\":\"backArrowContainer--z0yRk\",\"closeBtncontainer\":\"closeBtncontainer--jfi7C\",\"closeImg\":\"closeImg--oBSMG\"};","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { isAndroid } from 'react-device-detect';\nimport classnames from 'classnames';\nimport classes from './classes.module.scss';\nimport { messageToAppKeys } from '../../message_to_app_handler';\nimport UsePreviousValue, { compareObjects, fromMobileApp, isOldMobileApp } from '../../config/utils';\nimport { paymentSourcesTheme } from '../../config/const';\nimport { PurchaseSvgIcon } from '../../sprites';\n\nconst isPurchaseAndNotAndroid = (theme) => theme === paymentSourcesTheme.purchase && !isAndroid;\n\nconst sentMessageToAppIfNeed = ({\n titleData, setMessageToAppData, theme\n}) => {\n if (Object.keys(titleData).length > 0) {\n if (isPurchaseAndNotAndroid(theme)) return;\n const { backArrowHandler, titleText } = titleData;\n const sentToAppMessage = {\n [messageToAppKeys.action]: messageToAppKeys.crossPlatformNavigation,\n [messageToAppKeys.params]: {\n [messageToAppKeys.title]: titleText,\n [messageToAppKeys.isBackAvailable]: !!backArrowHandler\n }\n };\n setMessageToAppData({ sentToAppMessage });\n }\n};\n\nconst getAddCardHeaderBtnContainerClassNeme = ({ loading }) => {\n if (loading) return classnames(classes.addCardHeaderBtnContainerContent, classes.addCardHeaderBtnContainerContentSkeleton);\n return classes.addCardHeaderBtnContainerContent;\n};\n\nconst renderAddCardHeaderBtn = ({ addCardHeaderBtnHolder, loading }) => {\n if (!addCardHeaderBtnHolder) return null;\n return (\n \n
\n );\n};\n\nconst renderTitleText = ({ titleText, titleTextStyle }) => {\n if (!titleText) return ;\n return (\n \n { addCardHeaderBtnHolder() }\n
\n \n { titleText }\n
\n );\n};\n\nconst getBackArrowClassNeme = ({ loading }) => {\n if (loading) return classnames(classes.backArrow, classes.skeleton);\n return classes.backArrow;\n};\n\nconst renderBackArrow = ({ backArrowHandler, theme, loading }) => {\n if (!backArrowHandler\n || (fromMobileApp && theme === paymentSourcesTheme.wallet && !isOldMobileApp)) {\n return ;\n }\n return (\n \n
\n );\n};\n\nconst getcloseBtnClassNeme = ({ loading }) => {\n if (loading) return classnames(classes.closeBtn, classes.skeleton);\n return classes.closeBtn;\n};\n\nconst renderCloseBtn = ({ closeBtnHandler, loading }) => {\n if (!closeBtnHandler) return null;\n return (\n \n \n
\n );\n};\n\nfunction PaymentMethodsListTitle({\n titleData, theme, receivedMessageFromApp, setMessageToAppData, loading\n}) {\n const [titleDataState, setTitleDataState] = useState(null);\n const {\n backArrowHandler, closeBtnHandler, titleText, titleTextStyle, addCardHeaderBtnHolder\n } = titleData;\n\n useEffect(() => {\n if (!compareObjects(titleData, titleDataState)) setTitleDataState(titleData);\n const prevTitleData = \n
\n );\n\n const renderPaymentMethodsListTitle = () => renderPaymentMethodsListTitleContext();\n\n return renderPaymentMethodsListTitle();\n}\n\nPaymentMethodsListTitle.propTypes = {\n titleData: PropTypes.object.isRequired,\n theme: PropTypes.string.isRequired,\n receivedMessageFromApp: PropTypes.object,\n setMessageToAppData: PropTypes.func,\n loading: PropTypes.bool\n};\n\nPaymentMethodsListTitle.defaultProps = {\n receivedMessageFromApp: {},\n setMessageToAppData: null,\n loading: null\n};\n\nexport default PaymentMethodsListTitle;\n","import PaymentMethodsListTitle from './payment_methods_list_title';\n\nexport default PaymentMethodsListTitle;\n","import PropTypes from 'prop-types';\n\nexport const PaymentSourceType = {\n kind: PropTypes.string.isRequired,\n humanKind: PropTypes.string.isRequired,\n expired: PropTypes.bool.isRequired,\n isDefault: PropTypes.bool.isRequired,\n id: PropTypes.number.isRequired,\n enabled: PropTypes.bool.isRequired,\n isDuplicate: PropTypes.bool.isRequired,\n reauthorizeRequired: PropTypes.bool.isRequired,\n canBeUsed: PropTypes.bool.isRequired,\n context: PropTypes.shape({\n type: PropTypes.string,\n last4: PropTypes.string,\n exp: PropTypes.string,\n paypalBillingAgreementEmail: PropTypes.string\n }),\n fullName: PropTypes.string\n};\n\nexport const PaymentSourcesType = PropTypes.arrayOf(PropTypes.shape(PaymentSourceType));\n\nexport const AvailablePaymentSourceType = {\n kind: PropTypes.string.isRequired,\n humanKind: PropTypes.string.isRequired,\n preferred: PropTypes.bool.isRequired\n};\n\nexport const AvailablePaymentSourcesType = PropTypes.arrayOf(\n PropTypes.shape(AvailablePaymentSourceType)\n);\n\nexport const PaymentSourcesListType = {\n available: PropTypes.arrayOf(\n PropTypes.shape(AvailablePaymentSourceType)\n ),\n current: PropTypes.shape(PaymentSourceType),\n editingId: PropTypes.number,\n error: PropTypes.string,\n existing: PropTypes.arrayOf(PropTypes.shape(PaymentSourceType)),\n loaded: PropTypes.bool,\n loading: PropTypes.bool,\n managingSource: PropTypes.shape(PaymentSourceType)\n};\n\nexport const PaymentOptionSlimType = {\n kind: PropTypes.oneOf(['cc', 'pp', 'iap', 'ap']).isRequired,\n context: PropTypes.oneOfType([\n PropTypes.shape({\n hasPaypalBillingAgreement: PropTypes.bool,\n paypalBillingAgreementEmail: PropTypes.bool\n }),\n PropTypes.shape({\n last4: PropTypes.string,\n type: PropTypes.string,\n exp: PropTypes.string\n })\n ])\n};\n\nexport const PaymentOptionTypes = {\n ...PaymentOptionSlimType,\n id: PropTypes.number,\n humanKind: PropTypes.string.isRequired,\n errorText: PropTypes.string,\n preferred: PropTypes.bool,\n extraParams: PropTypes.string,\n adding: PropTypes.bool\n};\n\nexport const DefaultPaymentOptionValues = {\n id: null,\n errorText: null,\n preferred: false,\n extraParams: null,\n adding: false,\n context: null\n};\n","import React, { useEffect, useState } from 'react';\nimport queryString from 'query-string';\nimport PropTypes from 'prop-types';\nimport { asyncLoadScript } from '../../config/utils';\nimport { addSource } from '../../../app/actions/payment_sources';\n\nconst AddApplePayOption = ({ topPadding }) => {\n const [loaded, setLoaded] = useState(false);\n\n const handleApplePayClick = () => {\n window.store.dispatch(addSource('ap'));\n };\n\n useEffect(() => {\n const applePayButton = document.querySelector('apple-pay-button');\n if (applePayButton) {\n applePayButton.addEventListener('click', handleApplePayClick);\n }\n return () => {\n if (applePayButton) {\n applePayButton.removeEventListener('click', handleApplePayClick);\n }\n };\n }, [loaded]);\n\n useEffect(() => {\n asyncLoadScript('https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js')\n .then(() => {\n setLoaded(true);\n });\n }, []);\n\n if (!loaded) {\n return null;\n }\n\n const buttonStyle = () => {\n const search = (queryString.parse(window.location.search) || {});\n return search?.theme === 'dark' ? 'white' : 'white-outline';\n };\n\n return (\n <>\n \n \n { renderBackArrow({ backArrowHandler, theme, loading }) }\n { renderTitleText({ titleText, titleTextStyle }) }\n { renderAddCardHeaderBtn({ addCardHeaderBtnHolder, loading }) }\n { renderCloseBtn({ closeBtnHandler }) }\n
\n \n { purchaseFeesText }\n
\n );\n};\n\nexport const renderToast = ({\n fees, showToast, isPayg, t\n}) => {\n const { purchaseFeesText } = fees;\n let bottomPlacement = purchaseFeesText ? '215px' : '185px';\n bottomPlacement = isPayg ? '60px' : bottomPlacement;\n return (\n \n { t('purchase.you_are_paying', { price: `${ price }` }) }\n
\n );\n};\n\nexport const getAddIconNameForPOWVersion = (name) => {\n if (isPOW() && isVersionHigher(supportedNewPOWalletVersion)) return `${ name }_6.0.0`;\n return name;\n};\n","// import { connect } from 'react-redux';\nimport TopBanner from './top_banner';\n// import withPGTranslation from '../../../config/withPGTranslation';\n\n// const mapStateToProps = ({\n// user: { user }, application\n// }) => (\n// {\n// userBonusInfos: user && user.bonusInfos,\n// anonymousUserBonusInfos: application && application.anonymousUser && application.anonymousUser.bonusInfos,\n// userXfmProgram: user && user.xfmProgram,\n// userId: user && user.id\n// }\n// );\n\n// // export default connect(\n// // mapStateToProps\n// // )(withPGTranslation(TopBanner));\n\n// export default connect(\n// mapStateToProps\n// )(TopBanner);\n\nexport default TopBanner;\n","import React from 'react';\nimport classes from './classes.module.scss';\nimport { PurchaseSvgIcon } from '../../sprites';\n\ninterface MarketingImageProps {\n offers: Array<{subtitle: string; title: string}>,\n}\n\nconst MarketingImage:React.FC