\n );\n}\n","import Feature from '@/components/Feature';\nimport { InterstitialLoading } from '@/shared/components/Loading';\nimport gql from 'graphql-tag';\nimport {\n FundingOptionFragment,\n PaymentContingenciesFragment,\n} from '@paypalcorp/c3-graphql-fragments';\nimport { updateFeature, updateContingency } from '@paypalcorp/c3-util-store';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport { CHECKOUT_BUTTON_STATES } from '../CheckoutButton/constants';\nimport { fallback } from '@/lib/redirects';\nimport { isIframe } from '@paypalcorp/c3-util-browser';\nimport { experiences, threeDsExperienceVars } from '@paypalcorp/c3-util-threed-ds';\n\nconst query = gql`\n ${FundingOptionFragment}\n ${PaymentContingenciesFragment}\n query OpenBanking($experiences: [ThreeDSPaymentExperience], $token: String!) {\n checkoutSession(token: $token) {\n fundingOptions(returnAllPlans: true, groupSourcesOnType: INCENTIVE) {\n ...FundingOptionFragment\n }\n paymentContingencies {\n ...PaymentContingenciesFragment\n threeDomainSecure(experiences: $experiences) {\n ...ThreeDomainSecureFields\n }\n }\n userAction\n }\n }\n`;\n\nconst shouldAutoDisplayComponent = ({\n allQueryData: [\n {\n data: { checkoutSession = {} },\n },\n ],\n features,\n contingencies: { BANK_LOGIN_CREDENTIALS_INVALID } = {},\n}) => {\n const {\n paymentContingencies: { needConsentForBankAccountInfoRetrieval: { encryptedId } = {} } = {},\n fundingOptions = [],\n } = checkoutSession;\n const { status } = features.CHECKOUT_BUTTON.data;\n const contingencyMatchesAnFi =\n encryptedId && !!fundingOptions.find((item) => item.id === encryptedId);\n\n if (isIframe() && BANK_LOGIN_CREDENTIALS_INVALID) {\n fallback({ reason: 'moneynodewebRedirection' });\n } else {\n return (\n (contingencyMatchesAnFi && status === CHECKOUT_BUTTON_STATES.PENDING) ||\n BANK_LOGIN_CREDENTIALS_INVALID\n );\n }\n};\n\nconst shouldLoadFeatureComponent = ({\n allQueryData: [\n {\n data: { checkoutSession = {} },\n },\n ],\n features,\n contingencies: { BANK_LOGIN_CREDENTIALS_INVALID } = {},\n}) => {\n const {\n paymentContingencies: { needConsentForBankAccountInfoRetrieval: { encryptedId } = {} } = {},\n fundingOptions = [],\n } = checkoutSession;\n const { status } = features.CHECKOUT_BUTTON.data;\n const contingencyMatchesAnFi =\n encryptedId && !!fundingOptions.find((item) => item.id === encryptedId);\n\n return (\n (contingencyMatchesAnFi && status === CHECKOUT_BUTTON_STATES.PENDING) ||\n BANK_LOGIN_CREDENTIALS_INVALID\n );\n};\n\n// This feature will get loaded when 'SHARED_INSTRUMENT_CONSENT_REQUIRED' contingency is thrown from FI\n// This will display a shared card consent page to send consent of the logged in user to share his details to the card owner\nconst OpenBanking = Feature({\n id: 'OPEN_BANKING',\n queries: [\n {\n query: query,\n variables: threeDsExperienceVars({ token: getToken() }),\n context: { skipFallback: true },\n fetchPolicy: 'cache-only',\n },\n ],\n interstitial: true,\n interstitialOptions: {\n onBeforeCloseFn: () => {\n updateFeature('CHECKOUT_BUTTON', {\n data: {\n status: CHECKOUT_BUTTON_STATES.INITIAL,\n inContingencyFlow: false,\n },\n }).then(() => updateContingency('BANK_LOGIN_CREDENTIALS_INVALID', { clear: true }));\n },\n },\n subscribeTo: ['CHECKOUT_BUTTON', 'PAY_WITH'],\n contingencies: ['BANK_LOGIN_CREDENTIALS_INVALID'],\n LoadingComponent: InterstitialLoading,\n shouldLoadFeatureComponent,\n shouldAutoDisplayComponent,\n})(() => import('./OpenBankingInterstitial'));\n\nexport default OpenBanking;\n","import gql from 'graphql-tag';\nimport Feature from '@/components/Feature';\nimport { CHECKOUT_BUTTON_STATES } from '@/components/CheckoutButton/constants';\nimport { logger } from '@paypalcorp/c3-util-logger';\nimport { OTP_CONFIRMATION_PAYLOAD } from '@paypalcorp/c3-util-logger';\nimport { updateFeature } from '@paypalcorp/c3-util-store';\nimport { getToken, getCountry, getLocale } from '@paypalcorp/c3-shared-globals';\nimport getContent from '@/lib/content';\nimport { InterstitialLoading } from '@/shared/components/Loading';\nimport { OTP_CONFIRMATION_QUERY } from './queries.gql';\n\nconst shouldLoadFeatureComponent = (props) => {\n const { INITIATE_OTP_CONTINGENCY } = props.contingencies;\n const { fundingInstrumentId } = props?.feature?.data;\n\n return Boolean(INITIATE_OTP_CONTINGENCY || fundingInstrumentId);\n};\n\n/**\n * @description `OTPConfirmation` component allows the user to verify their card with a one time password sent to their phone.\n *\n * @summary\n *\n */\nconst OTPConfirmation = Feature({\n id: 'OTP_CONFIRMATION',\n interstitial: true,\n interstitialOptions: {\n onBeforeCloseFn: ({ feature }) => {\n if (!feature?.data?.isNewCard) {\n updateFeature('CHECKOUT_BUTTON', {\n data: { status: CHECKOUT_BUTTON_STATES.INITIAL },\n });\n }\n\n updateFeature('OTP_CONFIRMATION', {\n data: {\n isNewCard: false,\n card: {\n expirationDate: null,\n securityCode: null,\n },\n fundingInstrumentId: null,\n phone: {\n number: null,\n countryCode: null,\n },\n },\n });\n },\n headerTitleFunc: () => getContent('otpConfirmation.title'),\n type: 'tall',\n },\n LoadingComponent: InterstitialLoading,\n contingencies: ['INITIATE_OTP_CONTINGENCY'],\n queries: [\n {\n query: OTP_CONFIRMATION_QUERY,\n variables: {\n token: getToken(),\n },\n fetchPolicy: 'cache-only',\n },\n ],\n shouldLoadFeatureComponent,\n shouldAutoDisplayComponent: shouldLoadFeatureComponent,\n})(() => import('./OTPConfirmation'));\n\nexport default OTPConfirmation;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport { useFeature } from '@/components/Feature/hooks';\nimport { useEligibilityContext, usePayLaterContext } from '@/components/ContextProviders';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport TabsLoading from './Loading';\nimport PayWithLoading from '../PayWith/Loading';\nimport { PayWithQueryDocument as payWithQuery } from '@paypalcorp/c3-graphql-fragments';\nimport { threeDsExperienceVars } from '@paypalcorp/c3-util-threed-ds';\nimport PayWithSingle from '@/components/PayWithSingle';\n\nconst StackedPaymentOptions = lazyComponent(() => import('./StackedPaymentOptions'), {\n id: 'STACKED_PAYMENT_OPTIONS',\n loading: () => ,\n});\n\nconst TabbedPaymentOptions = lazyComponent(() => import('./TabbedPaymentOptions'), {\n id: 'TABBED_PAYMENT_OPTIONS',\n loading: () => ,\n});\n\nfunction PaymentOptionsContainer() {\n const { enabled, visible } = useFeature('PAYMENT_OPTIONS');\n const { loading, showTabs } = useEligibilityContext();\n const payLaterContext = usePayLaterContext();\n const { isReturningFromCredit, shouldShowPayWithSingle } = payLaterContext.payLaterState;\n\n // Prefetch the PayWith query\n useQuery(payWithQuery, {\n variables: threeDsExperienceVars({ token: getToken() }),\n context: { planningBatch: true },\n errorPolicy: 'ignore',\n });\n\n if (!enabled || !visible) {\n return null;\n }\n\n if (loading) {\n return (\n <>\n \n \n \n );\n }\n\n if (isReturningFromCredit) {\n return ;\n }\n\n if (shouldShowPayWithSingle) {\n return ;\n }\n\n if (showTabs) {\n return ;\n }\n\n return ;\n}\n\nexport default PaymentOptionsContainer;\n","import React from 'react';\nimport { uniqueStr } from '@checkout/react-components';\n\nconst TabsLoading = () => {\n const clipPathId = uniqueStr();\n const gradientId = uniqueStr();\n\n return (\n \n );\n};\n\nexport default TabsLoading;\n","// extracted by extract-css-chunks-webpack-plugin\nmodule.exports = {\"ppui-font-family-300\":\"'PayPalSansBig-Light'\",\"ppuiFontFamily300\":\"'PayPalSansBig-Light'\",\"loading\":\"Loading_loading_1DqRj\",\"title\":\"Loading_title_17TXV\",\"svg\":\"Loading_svg_2O58Z\"};","import React from 'react';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport Loading from '@/components/PayWith/Loading';\n\nconst PayWithSingle = lazyComponent(() => import('./PayWithSingle'), {\n id: 'PAY_WITH_SINGLE',\n loading: () => ,\n});\n\nexport default PayWithSingle;\n","import Loading from './Loading';\nimport gql from 'graphql-tag';\nimport Feature from '@/components/Feature';\n\nexport const query = gql`\n query PersonalizedBannerQuery {\n user {\n name {\n givenName\n familyName\n }\n profileImage(type: XS) {\n url {\n href\n }\n }\n }\n }\n`;\n\nconst PersonalizedBannerContainer = Feature({\n id: 'PERSONALIZED_BANNER',\n queries: [\n {\n query: query,\n context: {\n skipFallback: true,\n }\n },\n ],\n LoadingComponent: Loading,\n})(() => import('./PersonalizedBanner'));\n\nexport default PersonalizedBannerContainer;\n","import React from 'react';\nimport { uniqueStr } from '@checkout/react-components';\nimport styles from './styles.css';\n\nexport default function PersonalizedBannerLoader() {\n const clipPathId = uniqueStr();\n const gradientId = uniqueStr();\n\n return (\n
\n \n
\n );\n}\n","import Feature from '@/components/Feature';\n\n/**\n * For country Japan there's a specific policy agreement we need to render\n * See from hermesnodeweb: https://github.paypal.com/Checkout-R/hermesnodeweb/blob/develop/config/config.json#L2245\n */\nconst PolicyAgreement = Feature({\n id: 'POLICY_AGREEMENT',\n})(() => import('./PolicyAgreement'));\n\nexport default PolicyAgreement;\n","import React, { useState } from 'react';\nimport { usePrevious } from 'react-use';\nimport { useQuery } from '@apollo/react-hooks';\nimport { useFeature } from '@/components/Feature/hooks';\nimport { getToken, getCredit } from '@paypalcorp/c3-shared-globals';\nimport { params } from '@/lib/utils';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport { ECONSENT_QUERY } from '@/components/Econsent';\nimport { creditPpcOffersGqlParams } from '@/lib/credit';\nimport { CREDIT_SECOND_BUTTON_QUERY } from './query.gql.js';\n\nconst RedirectToCredit = lazyComponent(() => import('./RedirectToCredit'), {\n id: 'REDIRECT_TO_CREDIT',\n loading: () => null,\n});\n\nconst RedirectToCreditContainer = () => {\n const { visible: econsentVisible } = useFeature('ECONSENT');\n const previousEconsentVisible = usePrevious(econsentVisible);\n const { data: userData } = useQuery(ECONSENT_QUERY);\n const { data: checkoutSessionData } = useQuery(CREDIT_SECOND_BUTTON_QUERY, {\n variables: { token: getToken(), ...creditPpcOffersGqlParams() },\n context: { planningBatch: true },\n errorPolicy: 'ignore',\n });\n const newUser = getCredit().newUser;\n\n // assume that econsent could be shown until user data is ready\n const isEconsentInitiallyShown = userData?.user?.eConsent ?? true;\n const isEconsentTriggeredRefresh = econsentVisible === false && previousEconsentVisible === true;\n const shouldMountComponent = !params().key && getCredit().isCreditSecondButton;\n const isLoadedData = Boolean(checkoutSessionData && userData);\n const isRedirectWaitForEconsent = isEconsentInitiallyShown && !isEconsentTriggeredRefresh;\n const [waitingOnEconsent, setWaitingOnEconsent] = useState(true);\n\n // dont redirect to CAPE before eConsent is accepted\n if (waitingOnEconsent && (newUser || !isRedirectWaitForEconsent)) {\n setWaitingOnEconsent(false);\n }\n\n if ((!newUser && !isLoadedData) || !shouldMountComponent) {\n return null;\n }\n\n const props = {\n ...checkoutSessionData,\n waitingOnEconsent,\n };\n\n return ;\n};\n\nexport default RedirectToCreditContainer;\n","import gql from 'graphql-tag';\nimport { FundingOptionFragment } from '@paypalcorp/c3-graphql-fragments';\nimport { CreditOfferFragment } from '@/components/CreditOffer';\n\nexport const CREDIT_SECOND_BUTTON_QUERY = gql`\n ${FundingOptionFragment}\n ${CreditOfferFragment}\n query RedirectToCreditQuery($areCookiesDisabled: Boolean, $isIframe: Boolean, $token: String!) {\n checkoutSession(token: $token) {\n fundingOptions(returnAllPlans: true, groupSourcesOnType: INCENTIVE) {\n ...FundingOptionFragment\n }\n creditPPCOffers(areCookiesDisabled: $areCookiesDisabled, isIframe: $isIframe) {\n ...CreditOfferFragment\n }\n flags {\n hasPPCreditInstallments\n showPPCreditOffer\n isEligibleForCreditSecondButton\n }\n }\n }\n`;\n","import Feature from '@/components/Feature';\nimport { isDestination, params } from '@/lib/utils';\n\n/**\n * Handles redirect from PPC\n */\nconst ReturnFromCredit = Feature({\n id: 'RETURN_FROM_CREDIT',\n shouldLoadFeatureComponent: () => Boolean(params().key),\n})(() => import('./ReturnFromCredit'));\n\nexport default ReturnFromCredit;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { useContingency, useFeature } from '@/components/Feature/hooks';\nimport { getIsUserDeviceTokenImplicitLogin } from '@/authStates';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport gql from 'graphql-tag';\nimport { getToken, getCredit, getIsScaRegion } from '@paypalcorp/c3-shared-globals';\n\nexport const REVIEW_PAGE_ALERT_QUERY = gql`\n query ReviewPageAlertQuery($token: String!) {\n checkoutSession(token: $token) {\n flags {\n isEligibleForCreditSecondButton\n }\n }\n }\n`;\n\nconst ReviewPageAlert = lazyComponent(() => import('./ReviewPageAlert'), {\n id: 'REVIEW_PAGE_ALERT',\n loading: () => <>,\n});\n\nconst ReviewPageAlertContainer = () => {\n const { visible, data: featureData } = useFeature('REVIEW_PAGE_ALERT');\n\n const needCreditCardContingency = useContingency('NEED_CREDIT_CARD');\n const needCreditCardOrBankAccountContingency = useContingency('NEED_CREDIT_CARD_OR_BANK_ACCOUNT');\n const expiredCreditCardContingency = useContingency('EXPIRED_CREDIT_CARD');\n\n const { loading, data } = useQuery(REVIEW_PAGE_ALERT_QUERY, {\n variables: { token: getToken() },\n context: { skipFallback: true },\n fetchPolicy: process.env.NODE_ENV === 'test' ? 'no-cache' : 'cache-only',\n });\n\n if (loading || !visible) {\n return null;\n }\n\n const checkoutSession = data?.checkoutSession;\n const isScaRegion = getIsScaRegion();\n const isCreditSecondButton = getCredit().isCreditSecondButton;\n const isPPCEligible = checkoutSession?.flags?.isEligibleForCreditSecondButton ?? true;\n const newUser = getCredit().newUser;\n\n const shouldShowComponent =\n needCreditCardContingency ||\n needCreditCardOrBankAccountContingency ||\n expiredCreditCardContingency ||\n (getIsUserDeviceTokenImplicitLogin() && !isScaRegion) ||\n (isCreditSecondButton && !newUser && !isPPCEligible) ||\n featureData?.message;\n\n if (shouldShowComponent) {\n const props = {\n contingencies: {\n needCreditCardContingency,\n needCreditCardOrBankAccountContingency,\n expiredCreditCardContingency,\n },\n isCreditSecondButton,\n isPPCEligible,\n isScaRegion,\n };\n return ;\n } else {\n return null;\n }\n};\n\nexport default ReviewPageAlertContainer;\n","import React from 'react';\nimport { areCookiesDisabled } from '@/lib/cookie';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport {\n logger,\n TRUSTED_BENEFICIARY_PAYLOAD,\n SCA_CONTINGENCY_PAYLOAD,\n} from '@paypalcorp/c3-util-logger';\nimport { isWebView } from '@paypalcorp/c3-util-browser';\nimport { EXEMPTIONS, TRUSTED_BENEFICIARY_FLOW, REVIEW_BEFORE_LOGIN_FLOW } from './constants';\nimport { useSca } from './hooks';\n\n\nconst ReviewBeforeLogin = lazyComponent(() => import('./ReviewBeforeLogin'), {\n id: 'REVIEW_BEFORE_LOGIN',\n loading: () => null,\n});\n\nconst TrustedBeneficiaryOptIn = lazyComponent(() => import('./TrustedBeneficiaryOptIn'), {\n id: 'TRUSTED_BENEFICIARY_OPT_IN',\n loading: () => null,\n});\n\nfunction ScaContainer() {\n const {\n exemptReason,\n isLoading,\n reviewBeforeLoginEligible,\n reviewBeforeLoginProps,\n trustedBeneficiaryEligible,\n trustedBeneficiaryProps,\n } = useSca();\n\n if (isLoading) {\n return null;\n }\n\n if (exemptReason) {\n logger.fpti(\n EXEMPTIONS[exemptReason],\n SCA_CONTINGENCY_PAYLOAD({ action: EXEMPTIONS[exemptReason] })\n );\n return null;\n }\n\n if (trustedBeneficiaryEligible) {\n if (areCookiesDisabled()) {\n logger.fpti(\n TRUSTED_BENEFICIARY_FLOW.cookieDisabledTraffic,\n TRUSTED_BENEFICIARY_PAYLOAD({ action: TRUSTED_BENEFICIARY_FLOW.cookieDisabledTraffic })\n );\n return null;\n }\n\n if (isWebView(navigator?.userAgent)) {\n logger.fpti(\n TRUSTED_BENEFICIARY_FLOW.webview,\n TRUSTED_BENEFICIARY_PAYLOAD({ action: TRUSTED_BENEFICIARY_FLOW.webview })\n );\n return null;\n }\n return ;\n }\n if (reviewBeforeLoginEligible) {\n if (areCookiesDisabled()) {\n logger.fpti(\n REVIEW_BEFORE_LOGIN_FLOW.cookieDisabledTraffic,\n SCA_CONTINGENCY_PAYLOAD({ action: REVIEW_BEFORE_LOGIN_FLOW.cookieDisabledTraffic })\n );\n return null;\n }\n\n if (isWebView(navigator?.userAgent)) {\n logger.fpti(\n REVIEW_BEFORE_LOGIN_FLOW.webview,\n SCA_CONTINGENCY_PAYLOAD({ action: REVIEW_BEFORE_LOGIN_FLOW.webview })\n );\n return null;\n }\n return ;\n }\n return null;\n}\n\nexport default ScaContainer;\n","import Feature from '@/components/Feature';\nimport { FundingOptionFragment } from '@paypalcorp/c3-graphql-fragments';\nimport getContent from '@/lib/content';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport gql from 'graphql-tag';\nimport { logger } from '@paypalcorp/c3-util-logger';\nimport { memoize } from '@paypalcorp/c3-util-lang';\nimport get from 'dlv';\nimport { getPreferredFi, getSplitBalancePlan, updateFeature } from '@paypalcorp/c3-util-store';\nimport { LANDING_PAGE } from '@/lib/landingPage';\n\nexport const SELECT_FI_QUERY = gql`\n ${FundingOptionFragment}\n query GetFundingInstruments($token: String!) {\n checkoutSession(token: $token) {\n fundingOptions(returnAllPlans: true, groupSourcesOnType: INCENTIVE) {\n ...FundingOptionFragment\n }\n }\n }\n`;\n\nconst shouldLoadFeatureComponent = memoize((fundingOptions) => {\n const hasAttribution = fundingOptions.some((fi) => get(fi, 'fundingInstrument.attribution'));\n const hasSplitBalance = fundingOptions.some((fi) => getSplitBalancePlan(fi));\n\n return fundingOptions.length >= 1 && !hasAttribution && !hasSplitBalance;\n});\n\nconst shouldAutoDisplayComponent = memoize((fundingOptions) => {\n let preferredFi = getPreferredFi(fundingOptions);\n\n if (preferredFi || fundingOptions.length === 1) {\n logger.cal.info('SELECT_FI_LANDING_RYI');\n updateFeature('SELECT_FI', { data: { landingPage: LANDING_PAGE.REVIEW } });\n return false;\n }\n\n logger.cal.info('SELECT_FI_LANDING_CHOICE');\n\n updateFeature('SELECT_FI', { data: { landingPage: LANDING_PAGE.CHOICE } });\n\n return true;\n});\n\n/**\n * Component responsible for displaying the funding instruments in the Choice feature (SelectFi).\n */\nconst SelectFi = Feature({\n id: 'SELECT_FI',\n interstitial: true,\n interstitialOptions: {\n type: 'tall',\n showCloseBtn: true,\n headerTitleFunc: () => getContent('choice.title'),\n },\n queries: [\n {\n query: SELECT_FI_QUERY,\n variables: { token: getToken() },\n fetchPolicy: 'cache-only',\n },\n ],\n shouldAutoDisplayComponent: (props) => {\n const fundingOptions = get(props, 'allQueryData.0.data.checkoutSession.fundingOptions', []);\n return shouldAutoDisplayComponent(fundingOptions);\n },\n shouldLoadFeatureComponent: (props) => {\n const fundingOptions = get(props, 'allQueryData.0.data.checkoutSession.fundingOptions', []);\n return shouldLoadFeatureComponent(fundingOptions);\n },\n})(() => import('./SelectFi'));\n\nexport default SelectFi;\n","import React from 'react';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport { shipToQuery } from '@/components/ShipTo';\nimport { useQuery } from '@apollo/react-hooks';\n\nconst SelectShippingInterstitial = lazyComponent(() => import('./SelectShippingInterstitial'), {\n id: 'SELECT_SHIPPING_INTERSTITIAL',\n loading: () => <>,\n});\n\nfunction SelectShippingInterstitialContainer() {\n const { loading, data } = useQuery(shipToQuery, {\n context: { planningBatch: true },\n variables: { token: getToken() },\n });\n return ;\n}\n\nexport default SelectShippingInterstitialContainer;\n","import gql from 'graphql-tag';\nimport get from 'dlv';\n\nimport Feature from '@/components/Feature';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport getContent from '@/lib/content';\nimport { updateFeature } from '@paypalcorp/c3-util-store';\nimport { CHECKOUT_BUTTON_STATES } from '@/components/CheckoutButton/constants';\nimport { InterstitialLoading } from '@/shared/components/Loading';\nimport { SepaMandateAcceptanceNeededFragment } from '@paypalcorp/c3-graphql-fragments';\n\n// checkoutSession api call\nconst query = gql`\n ${SepaMandateAcceptanceNeededFragment}\n query SEPA_CONFIRMATION_QUERY($token: String!) {\n checkoutSession(token: $token) {\n paymentContingencies {\n sepaMandateAcceptanceNeeded {\n ...SepaMandateAcceptanceNeededFragment\n }\n }\n }\n }\n`;\n\nconst shouldLoadFeatureComponent = (props) => {\n const contingency = get(\n props,\n 'allQueryData.0.data.checkoutSession.paymentContingencies.sepaMandateAcceptanceNeeded'\n );\n const bankData = get(props, 'feature.data.bankData');\n\n return Boolean(bankData) || Boolean(contingency);\n};\n\n/**\n * @description `SepaConfirmation` component resolves the SepaMandateAcceptanceNeeded payment contingency through the interstitial page.\n *\n * @summary On clicking the continue button in the review page, if the selected FI needs to resolve the\n * contingency then sepa interstitial will get triggered. Once the user clicks 'agree & continue' the contingency\n * will be cleared.\n *\n * @todo Currently the payWith feature will query the SepaMandateAcceptanceNeededFragment. This feature will use the cache-only\n * fetch policy to get the data from the cache instead of making its own query to the server. In the future it would be good to\n * remove this query from payWith, so that payWith only has to query the 'id' to check for a SEPA contingency.\n *\n */\nconst SepaConfirmation = Feature({\n id: 'SEPA_CONFIRMATION',\n interstitial: true,\n interstitialOptions: {\n onBeforeCloseFn: () => {\n updateFeature('SEPA_CONFIRMATION', { data: { bankData: null } });\n updateFeature('CHECKOUT_BUTTON', {\n data: {\n status: CHECKOUT_BUTTON_STATES.INITIAL,\n inContingencyFlow: false,\n },\n });\n },\n headerTitleFunc: () => getContent('sepa.title'),\n },\n LoadingComponent: InterstitialLoading,\n shouldLoadFeatureComponent,\n queries: [{ query: query, variables: { token: getToken() }, fetchPolicy: 'cache-only' }],\n})(() => import('./SepaInterstitial'));\n\nexport default SepaConfirmation;\n","import Feature from '@/components/Feature';\nimport getContent from '@/lib/content';\nimport { InterstitialLoading } from '@/shared/components/Loading';\nimport { logger } from '@paypalcorp/c3-util-logger';\nimport { ADD_CARD_PAYLOAD } from '@paypalcorp/c3-util-logger';\nimport { isObject } from '@paypalcorp/c3-util-lang';\nimport { updateContingency } from '@paypalcorp/c3-util-store';\n\nconst shouldAutoDisplayComponent = ({ contingencies, features }) => {\n const hasContingency = contingencies && contingencies.SHARED_INSTRUMENT_CONSENT_REQUIRED;\n const hasFormData = features.ADD_CARD.data && isObject(features.ADD_CARD.data);\n\n return hasContingency && hasFormData;\n};\n\nconst shouldLoadFeatureComponent = ({ contingencies, features }) => {\n const shouldLoadFeature = shouldAutoDisplayComponent({ contingencies, features });\n\n if (shouldLoadFeature) {\n logger.fpti(\n 'prepareSaveSharedCardConsent',\n ADD_CARD_PAYLOAD({ action: 'prepareSaveSharedCardConsent' })\n );\n }\n\n // this `SharedCardConsent` test is so flaky...not exactly sure why, but it's annoying 🤦♂️\n // so we should always load this feature when running tests\n return process.env.NODE_ENV === 'test' || shouldLoadFeature;\n};\n\n// This feature will get loaded when 'SHARED_INSTRUMENT_CONSENT_REQUIRED' contingency is thrown from FI\n// This will display a shared card consent page to send consent of the logged in user to share his details to the card owner\nconst SharedCardConsent = Feature({\n id: 'SHARED_CARD_CONSENT_PAGE',\n interstitial: true,\n interstitialOptions: {\n onBeforeCloseFn: () => {\n updateContingency('SHARED_INSTRUMENT_CONSENT_REQUIRED', { clear: true });\n },\n headerTitleFunc: () => getContent('sharedCard.consentPageHeader'),\n },\n LoadingComponent: InterstitialLoading,\n subscribeTo: ['ADD_CARD', 'SPLIT_TENDER_GATE'],\n shouldLoadFeatureComponent,\n shouldAutoDisplayComponent,\n contingencies: ['NEED_CREDIT_CARD', 'SHARED_INSTRUMENT_CONSENT_REQUIRED'],\n})(() => import('./SharedCardConsent'));\n\nexport default SharedCardConsent;\n","import Feature from '@/components/Feature';\nimport getContent from '@/lib/content';\nimport { InterstitialLoading } from '@/shared/components/Loading';\nimport { logger } from '@paypalcorp/c3-util-logger';\nimport { ADD_CARD_PAYLOAD } from '@paypalcorp/c3-util-logger';\nimport { updateContingency } from '@paypalcorp/c3-util-store';\n\nconst shouldAutoDisplayComponent = ({ contingencies }) => {\n return contingencies && contingencies.ORIGINAL_USER_CHECK_PENDING;\n};\n\nconst shouldLoadFeatureComponent = ({ contingencies, feature }) => {\n const shouldLoadFeature = shouldAutoDisplayComponent({ contingencies });\n const from = feature.data && feature.data.from;\n\n // instrumentation to track only if user is coming from add card and has skipped consent page\n if (shouldLoadFeature && from !== 'shared_card_consent') {\n logger.fpti(\n 'prepareWaitAfterSharedCardConsent',\n ADD_CARD_PAYLOAD({ action: 'prepareWaitAfterSharedCardConsent' })\n );\n }\n\n return shouldLoadFeature;\n};\n\nconst getHeaderTitle = ({ contingencies }) => {\n if (contingencies.NEED_CREDIT_CARD) {\n return getContent('sharedCard.waitPageHeaderNoFI');\n }\n return getContent('sharedCard.waitPageHeader');\n};\n\n// This feature will get loaded when 'ORIGINAL_USER_CHECK_PENDING' contingency is thrown from FI\n// This will display a shared card wait page giving an option to the logged in user to wait until the card owner gives a OK to share card\n\nconst SharedCardWait = Feature({\n id: 'SHARED_CARD_CONSENT_WAIT_PAGE',\n interstitial: true,\n interstitialOptions: {\n onBeforeCloseFn: () => {\n updateContingency('ORIGINAL_USER_CHECK_PENDING', { clear: true });\n },\n headerTitleFunc: getHeaderTitle,\n },\n LoadingComponent: InterstitialLoading,\n shouldLoadFeatureComponent,\n shouldAutoDisplayComponent,\n contingencies: ['NEED_CREDIT_CARD', 'ORIGINAL_USER_CHECK_PENDING'],\n})(() => import('./SharedCardWait'));\n\nexport default SharedCardWait;\n","import Feature from '@/components/Feature';\nimport getContent from '@/lib/content';\n\nconst SplitTenderBackup = Feature({\n id: 'SPLIT_TENDER_BACKUP',\n interstitial: true,\n interstitialOptions: {\n type: 'tall',\n showCloseBtn: true,\n headerTitleFunc: () => getContent('splitTender.backup.title'),\n },\n subscribeTo: ['SPLIT_TENDER_GATE'],\n})(() => import('./SplitTenderBackup'));\n\nexport default SplitTenderBackup;\n","// extracted by extract-css-chunks-webpack-plugin\nmodule.exports = {\"ppui-spacing-xl-2\":\"1.5rem\",\"ppuiSpacingXl2\":\"1.5rem\",\"ppui-grid-media-query-sm\":\"36rem\",\"ppuiGridMediaQuerySm\":\"36rem\",\"alert\":\"SplitTenderErrors_alert_1C_77\"};","import React from 'react';\nimport Feature from '@/components/Feature';\nimport { SPLIT_TENDER_GATE_QUERY } from '../query.gql';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport {\n experience as logExperience,\n gateLoaded as logGateLoaded,\n gateOpen as logGateOpen,\n} from '@/components/SplitTender/logging';\nimport { useFeature } from '@/components/Feature/hooks';\nimport { useState } from 'react';\nimport { useEligibilityContext } from '@/components/ContextProviders';\n\nconst FEATURE_NAME = 'SPLIT_TENDER_GATE';\n\n/**\n * Component responsible for being the gate to all split tender functionalities.\n */\nconst SplitTenderGate = Feature({\n id: FEATURE_NAME,\n queries: [\n {\n query: SPLIT_TENDER_GATE_QUERY,\n variables: { token: getToken() },\n fetchPolicy: 'cache-only',\n },\n ],\n})(() => import('./SplitTenderGate'));\n\n// This is to take advantage of using the mount and logging only once effectively\nexport default function SplitTenderEntry() {\n const featureSplitTenderGate = useFeature('SPLIT_TENDER_GATE');\n const featureTabs = useFeature('TABBED_PAYMENT_OPTIONS');\n const { showSplitTender } = useEligibilityContext();\n\n const [experienceLogged, setExperienceLogged] = useState(false);\n const mountSplitTender = () => {\n const { resolvedTreatment: gateTreatment } = featureSplitTenderGate?.experiment || {};\n const isGateOpen = gateTreatment === 'TREATMENT_1';\n logGateLoaded();\n logGateOpen(isGateOpen);\n };\n\n React.useEffect(mountSplitTender, []);\n React.useEffect(() => {\n if (!experienceLogged && featureSplitTenderGate && featureTabs) {\n const { resolvedTreatment: tabTreatment } = featureTabs?.experiment || {};\n\n const experience = tabTreatment === 'TREATMENT_1' ? 'TAB' : 'TOGGLE';\n\n logExperience(experience);\n setExperienceLogged(true);\n }\n }, [featureSplitTenderGate, featureTabs, experienceLogged]);\n\n return showSplitTender && ;\n}\n","/*\n * This component is rendered for WPS flows (NOT for EC flows)\n * For WPS flows the payment is captured and the 'receipt' is shown\n * using WPSDonePage\n */\nimport React from 'react';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport { useFeature } from '../Feature/hooks';\nimport { useWPSDonePage } from './hooks';\n\nconst WPSDonePage = lazyComponent(() => import('./WPSDonePage'), {\n id: 'WPS_DONE_PAGE',\n});\n\nexport default function WPSDonePageContainer() {\n const { visible } = useFeature('WPS_DONE_PAGE');\n const { isPaymentCompleted } = useWPSDonePage();\n\n if (visible && isPaymentCompleted) {\n return ;\n }\n\n return null;\n}\n","import Feature from '@/components/Feature';\n\nconst LearnMoreInterstitial = Feature({\n id: 'PAY_LATER_LEARN_MORE',\n})(() => import('./LearnMoreInterstitial'));\n\nexport default LearnMoreInterstitial;\n","import React, { useState, useEffect } from 'react';\nimport { useFeature } from '../Feature/hooks';\nimport { useQuery } from '@apollo/react-hooks';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport { SOLD_OUT_PAGE_QUERY } from './query.gql';\n\nconst InventorySoldOut = lazyComponent(() => import('./InventorySoldOut'), {\n id: 'INVENTORY_SOLD_OUT',\n loading: () => <>,\n});\n\nexport default function SoldOutPage() {\n\n const { visible, data: url } = useFeature('INVENTORY_SOLD_OUT');\n const [showPage, setShowPage] = useState(false);\n const [merchantName, setMerchantName] = useState(null);\n const [buttonUrl, setButtonUrl] = useState(null);\n const [soldOutItem, setSoldOutItem] = useState(null);\n\n const { data: soldOutPageData, loading } = useQuery(SOLD_OUT_PAGE_QUERY, {\n variables: {\n token: getToken(),\n },\n fetchPolicy: 'cache-only',\n });\n\n useEffect(() => {\n\n setShowPage(soldOutPageData?.checkoutSession?.cart?.showSoldoutPage ?? false);\n setMerchantName(soldOutPageData?.checkoutSession?.merchant?.name || '');\n setButtonUrl(soldOutPageData?.checkoutSession?.cart?.soldoutUrl || url?.soldOutUrl || null);\n setSoldOutItem(soldOutPageData?.checkoutSession?.cart?.items[0]?.name || null);\n \n }, [soldOutPageData, url]);\n \n if (!loading && (showPage || (visible && soldOutPageData))) {\n return (\n \n );\n }\n return null;\n}\n","import gql from 'graphql-tag';\n\nexport const SOLD_OUT_PAGE_QUERY = gql`\n query SoldOutPage($token: String!) {\n checkoutSession(token: $token) {\n cart {\n soldoutUrl\n showSoldoutPage\n items {\n name\n quantity\n }\n }\n merchant {\n name\n }\n }\n }\n`;\n","import React from 'react';\nimport { lazyComponent } from '@/lib/lazyLoad';\nimport { useFeature } from '@/components/Feature/hooks';\n\nconst SelectShippingOptionInterstitial = lazyComponent(\n () => import('./ShippingAndTaxInterstitial'),\n {\n id: 'SELECT_SHIPPING_OPTION_INTERSTITIAL',\n Interstitial: true,\n }\n);\n\nexport default function SelectShippingOptionInterstitialContainer() {\n const { visible } = useFeature('SHIP_TAX_INTERSTITIAL');\n\n if (!visible) {\n return null;\n }\n\n return ;\n}\n","// extracted by extract-css-chunks-webpack-plugin\nmodule.exports = {\"ppui-spacing-lg\":\"0.75rem\",\"ppuiSpacingLg\":\"0.75rem\",\"container\":\"Hermione_container_7H6Em\",\"dividerClass\":\"Hermione_dividerClass_1JoNc\",\"cancelLink\":\"Hermione_cancelLink_2UjcA\"};","import React from 'react';\nimport getContent from '@/lib/content';\nimport { Button } from '@paypalcorp/pp-react-buttons';\nimport { updateFeature } from '@paypalcorp/c3-util-store';\nimport { arrayToObject } from '@/shared/utilities/arrayToObject';\nimport { useFeature } from '@/components/Feature/hooks';\nimport {\n selectInputProcess as logSelectInputProcess,\n splitContinueLoaded as logSplitContinueLoaded,\n} from '../logging';\n\nconst SplitTenderContinue = () => {\n const {\n data: { splitFundingOptions = [], selectedValues = [], incentiveValues = [] } = {},\n } = useFeature('SPLIT_TENDER_GATE');\n const { data: { preferredId } = {} } = useFeature('PAY_WITH');\n\n const allSplitValues = [...selectedValues, ...incentiveValues];\n\n const splitFundingOptionsObject = arrayToObject(splitFundingOptions, ({ id }) => id);\n\n const onSubmit = () => {\n // If user enter full amount only in one FI, then we're going to send to the PAY WITH screen\n if (selectedValues.length < 2) {\n updateFeature('SPLIT_TENDER_GATE', {\n data: { showSplitExperience: false, showSplitContinue: false },\n });\n return;\n }\n\n const selectedSplitFundingInstruments = allSplitValues.map(({ id, amount }) => ({\n value: amount,\n ...splitFundingOptionsObject[id],\n }));\n\n // Filter out any FI which is ineligible to be a backup\n const splitOptionsEligibleForBackup = allSplitValues.filter(\n ({ id }) => splitFundingOptionsObject[id]?.isEligibleForPrimaryInstrument\n );\n\n // Find if there is already a preferred FI selected by the user.\n // Because the preferred fi is not made available to us from the splitFundingOptions,\n // we get this info from the paywith component.\n let selectedBackupFundingInstrument = (\n splitOptionsEligibleForBackup.find(({ id }) => preferredId && id === preferredId) || {}\n ).id;\n\n const isBackupPreferred = !!selectedBackupFundingInstrument;\n // If there is no preferred FI on file, then pick the FI which has the largest amount to be the backup\n if (!selectedBackupFundingInstrument) {\n selectedBackupFundingInstrument = splitOptionsEligibleForBackup.sort(\n (fiA, fiB) => fiB?.amount - fiA?.amount\n )[0]?.id;\n }\n\n logSelectInputProcess(\n selectedSplitFundingInstruments,\n selectedBackupFundingInstrument,\n isBackupPreferred\n );\n\n updateFeature('SPLIT_TENDER_GATE', {\n data: {\n selectedSplitFundingInstruments,\n selectedBackupFundingInstrument,\n isSplitReady: true,\n },\n });\n };\n\n React.useEffect(() => {\n logSplitContinueLoaded();\n }, []);\n\n return (\n \n );\n};\n\nexport default SplitTenderContinue;\n","/**\n * Puts array items into an object and\n * uses a key function to determine the key\n * @param {Array} array\n * @param {Function} keyFn\n */\nexport const arrayToObject = (array, keyFn) =>\n array.reduce((object, item) => ({ ...object, [keyFn(item)]: item }), {});\n","import gql from 'graphql-tag';\nimport { PaymentContingenciesFragment } from '@paypalcorp/c3-graphql-fragments';\n\nexport const SCA_CONTINGENCY_QUERY = gql`\n ${PaymentContingenciesFragment}\n query SCA_CONTINGENCY_QUERY($token: String!, $experiences: [ThreeDSPaymentExperience]) {\n checkoutSession(token: $token) {\n cart {\n cancelUrl {\n href\n }\n }\n merchant {\n isTrustedBeneficiary\n logo {\n href\n }\n merchantId\n name\n }\n paymentContingencies {\n ...PaymentContingenciesFragment\n }\n secureCustomerAuthenticationContext {\n status\n exemptReason\n }\n }\n }\n`;\n","import { useQuery } from '@apollo/react-hooks';\nimport { useFeature } from '@/components/Feature/hooks';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport { threeDsExperienceVars } from '@paypalcorp/c3-util-threed-ds';\nimport { SCA_CONTEXT_STATUS } from './constants';\nimport { SCA_CONTINGENCY_QUERY } from './query.gql';\n\nexport const useSca = () => {\n const { experiment: tbExperiment } = useFeature('TRUSTED_BENEFICIARY_OPT_IN');\n const { data } = useQuery(SCA_CONTINGENCY_QUERY, {\n variables: threeDsExperienceVars({ token: getToken() }),\n fetchPolicy: 'cache-only',\n });\n\n if (!data) {\n return { isLoading: true };\n }\n\n const checkoutSession = data?.checkoutSession || {};\n const {\n cart = {},\n merchant = {},\n paymentContingencies = {},\n secureCustomerAuthenticationContext,\n } = checkoutSession;\n\n const cancelUrl = cart?.cancelUrl?.href;\n const isTrustedBeneficiary = merchant?.isTrustedBeneficiary;\n const logo = merchant?.logo?.href;\n const merchantId = merchant?.merchantId;\n const name = merchant?.name;\n const contextId = paymentContingencies?.strongCustomerAuthenticationRequired?.contextId;\n const { status: scaStatus, exemptReason } = secureCustomerAuthenticationContext || {};\n\n const { COMPLETE, IN_PROGRESS } = SCA_CONTEXT_STATUS;\n\n const trustedBeneficiaryEligible =\n isTrustedBeneficiary === false &&\n scaStatus === COMPLETE &&\n tbExperiment?.resolvedTreatment !== 'CONTROL';\n\n const reviewBeforeLoginEligible = Boolean(contextId) && scaStatus === IN_PROGRESS;\n\n return {\n exemptReason,\n isLoading: false,\n reviewBeforeLoginEligible,\n reviewBeforeLoginProps: {\n cancelUrl,\n contextId,\n name,\n },\n trustedBeneficiaryEligible,\n trustedBeneficiaryProps: {\n logo,\n merchantId,\n },\n };\n};\n","import gql from 'graphql-tag';\n\nexport const MERCHANT_DESCRIPTION_QUERY = gql`\n query MerchantDescriptionQuery($token: String!) {\n checkoutSession(token: $token) {\n cart {\n description\n }\n merchant {\n name\n }\n checkoutSessionType\n }\n }\n`;\n","import React from 'react';\nimport { useQuery } from '@apollo/react-hooks';\nimport { isBillingAgreement } from '@/lib/checkoutSession';\nimport { getToken } from '@paypalcorp/c3-shared-globals';\nimport getContent from '@/lib/content';\nimport Divider from '@/shared/components/Divider';\nimport { heading as headingStyles } from '@/App.css';\nimport styles from './styles.css';\nimport { MERCHANT_DESCRIPTION_QUERY } from './query.gql';\n\n/**\n * MerchantDescription displays description from merchant \n * ONLY if provided by merchant and is billing agreement with purchase flow\n */\n\nconst MerchantDescription = (props) => {\n const { data } = useQuery(MERCHANT_DESCRIPTION_QUERY, {\n variables: { token: getToken() },\n fetchPolicy: 'cache-only',\n });\n\n const isBillingAgreementWithPurchase = isBillingAgreement(\n data?.checkoutSession?.checkoutSessionType\n );\n const merchantName = data?.checkoutSession?.merchant?.name;\n const merchantDescription = data?.checkoutSession?.cart?.description;\n\n const merchantMsgHeader = getContent('billingAgreement.merchantMsgHeader', {\n merchantName: merchantName || getContent('base.theMerchant'),\n });\n\n if (!merchantDescription || !isBillingAgreementWithPurchase) {\n return null;\n }\n\n return (\n <>\n \n
\n {merchantMsgHeader}\n
\n
\n {merchantDescription}\n
\n \n \n \n );\n};\n\nexport default MerchantDescription;\n","import React from 'react';\nimport { Alert } from '@paypalcorp/pp-react';\nimport { updateFeature } from '@paypalcorp/c3-util-store';\nimport { useFeature } from '@/components/Feature/hooks';\nimport getContent from '@/lib/content';\nimport styles from './styles.css';\n\nconst SplitTenderErrors = () => {\n const featureSplitTenderGate = useFeature('SPLIT_TENDER_GATE');\n const { errorsOccurrenceCount = 0, showSplitTenderError = false } =\n featureSplitTenderGate?.data || {};\n\n const messageId =\n errorsOccurrenceCount > 2\n ? 'splitTender.toast.stillPayUsualWay'\n : 'splitTender.toast.pleaseRetryAgain';\n\n // The general `temporary` rule is that we're going to allow users to try submitting their order three times per session,\n // if for some reason all of the attempts resulted with an error, then we're going to disable the Split experience for now.\n // Note that this is a temporary solution since we do not know what all of the error types that PAPS returns are.\n if (errorsOccurrenceCount > 2) {\n updateFeature('SPLIT_TENDER_GATE', {\n visible: false,\n data: {\n splitFundingOptions: [],\n selectedSplitFundingInstruments: [],\n isSplitReady: false,\n userCanSplit: false,\n showSplitExperience: false,\n },\n });\n }\n\n return (\n showSplitTenderError && (\n
\n {getContent(messageId)}\n
\n )\n );\n};\n\nexport default SplitTenderErrors;\n","import React from 'react';\nimport cx from 'classnames';\n\nimport { CryptoQuoteProvider } from '@paypalcorp/c3-context-providers';\n\nimport { BillingAgreement } from '@/components/BillingAgreement';\nimport { Econsent } from '@/components/Econsent';\nimport { LANDING_PAGE } from '@/lib/landingPage';\nimport { RewardsInterstitial } from '@/components/Rewards';\nimport { SelectInstallmentsInterstitial } from '@/components/Installments';\nimport Spinner from '@/components/Spinner';\nimport { ThreeDSTwoConfirmation } from '@/components/ThreeDSTwoConfirmation';\nimport AddFI from '@/components/AddFI';\nimport AddNormalizedAddress from '@/components/AddNormalizedAddress';\nimport AddShipping from '@/components/ShipTo/AddShipping';\nimport CancelLink from '@/components/CancelLink';\nimport CartDropdown from '@/components/CartDropdown';\nimport CheckoutButtonContainer from '@/components/CheckoutButtonContainer';\nimport CipDisclaimer from '@/components/Disclaimer/CipDisclaimer';\nimport CreditApplyPortable from '@/components/CreditApplyPortable';\nimport CreditOffer from '@/components/CreditOffer';\nimport CreditOfferAsFi from '@/components/CreditOfferAsFi';\nimport CreditOfferAsFiDE from '@/components/CreditOfferAsFiDE';\nimport CreditSingleFIDisplay from '@/components/CreditSingleFIDisplay';\nimport CryptoTermsInterstitial from '@/components/Crypto/CryptoTermsInterstitial';\nimport CurrencyConversion from '@/components/CurrencyConversion';\nimport CvvConfirmation from '@/components/CvvConfirmation';\nimport Divider from '@/shared/components/Divider';\nimport DolphinBanner from '@/components/Dolphin/DolphinBanner';\nimport DolphinInterstitial from '@/components/Dolphin/DolphinInterstitial';\nimport DonationShareAddress from '@/components/DonationShareAddress';\nimport Footer from '@/components/Footer';\nimport GiveAtCheckout from '@/components/GiveAtCheckout';\nimport Header from '@/components/Header';\nimport MerchantDescription from '@/components/MerchantDescription';\nimport MerchantLogo from '@/components/MerchantLogo';\nimport Notifications from '@/components/Notifications';\nimport OpenBanking from '@/components/OpenBanking';\nimport OTPConfirmation from '@/components/OTPConfirmation';\nimport PaymentOptions from '@/components/PaymentOptions';\nimport PersonalizedBanner from '@/components/PersonalizedBanner';\nimport PolicyAgreement from '@/components/PolicyAgreement';\nimport RedirectToCredit from '@/components/RedirectToCredit';\nimport RestrictedAccount from '@/components/ErrorPages/RestrictedAccount';\nimport ReturnFromCredit from '@/components/ReturnFromCredit';\nimport ReviewPageAlert from '@/components/ReviewPageAlert';\nimport Sca from '@/components/Sca';\nimport SelectFi from '@/components/SelectFi';\nimport SelectShippingInterstitial from '@/components/ShipTo/SelectShippingInterstitial';\nimport SepaConfirmation from '@/components/SepaConfirmation';\nimport SharedCardConsent from '@/components/SharedCard/SharedCardConsent';\nimport SharedCardWait from '@/components/SharedCard/SharedCardWait';\nimport ShipTo from '@/components/ShipTo';\nimport SplitTenderBackup from '@/components/SplitTender/SplitTenderBackup';\nimport SplitTenderErrors from '@/components/SplitTender/SplitTenderErrors';\nimport SplitTenderGate from '@/components/SplitTender/SplitTenderGate';\nimport ThreeDSConfirmation from '@/components/ThreeDSConfirmation';\nimport WPSDonePage from '@/components/WPSDonePage';\nimport PayLaterLearnMore from '@/components/PayLater/LearnMoreInterstitial';\nimport InventorySoldOut from '@/components/InventorySoldOut';\nimport ShippingAndTaxInterstitial from '@/components/ShippingAndTax/ShippingAndTaxInterstitial';\n\n\nimport AppStyles from '../../App.css';\nimport styles from './styles.css';\n\n// context providers\nimport { composeProviders } from '@/lib/contextProvider';\nimport {\n EligibilityProvider,\n PayLaterProvider,\n PayProvider,\n usePayContext,\n} from '@/components/ContextProviders';\n\n// resolves from right to left\nexport const Providers = composeProviders(EligibilityProvider, PayLaterProvider, PayProvider);\n\nconst Hermione = () => {\n const { fundingOptions, selectedFundingOption } = usePayContext();\n\n return (\n \n