{"version":3,"file":"component---src-pages-recurring-payments-index-tsx-7da847f7826038b79241.js","mappings":"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","sources":["webpack://payment-flow/./src/components/RecurringPaymentDetails.tsx","webpack://payment-flow/./src/pages/recurring-payments/index.tsx"],"sourcesContent":["/* eslint-disable no-nested-ternary */\nimport React from 'react';\nimport styled from 'styled-components';\nimport { formatAmount } from '@/utils/format';\nimport {\n  BankAccount,\n  payablePaymentStatuses,\n  payableRecurringStatues,\n  PaymentStatus,\n  RecurringPaymentFrequency,\n  RecurringPaymentStatus,\n} from '@fena/types';\nimport moment from 'moment';\nimport { P } from './Typography';\nimport LoadingBlock from './LoadingBlock';\n\nconst CardWrapper = styled.section``;\n\nconst PaymentItem = styled.div`\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--space-2);\n`;\n\nconst Span = styled.span`\n  text-align: right;\n`;\n\nconst PItem = (props) => {\n  const { contentName, children } = props;\n  return (\n    <PaymentItem>\n      <P className=\"accent-text-gray\">{contentName}</P>\n      <Span className=\"accent-text-black\">{children}</Span>\n    </PaymentItem>\n  );\n};\nconst Short = ({\n  rpData,\n  frq,\n}: {\n  rpData: RecurringPaymentInfo;\n  frq: string;\n}) => (\n  <>\n    <PItem contentName=\"Amount:\">\n      £{` `}\n      {formatAmount(rpData.recurringAmount)}\n    </PItem>\n    <PItem contentName=\"First payment date:\">\n      {moment(rpData.recurringDate).format(`DD/MM/YYYY`)}\n    </PItem>\n    <PItem contentName=\"Frequency:\">{frq}</PItem>\n    <PItem contentName=\"Number of payments:\">\n      {rpData.numberOfPayments > 0 ? rpData.numberOfPayments : `Indefinite`}\n    </PItem>\n  </>\n);\n\nconst Medium = ({\n  rpData,\n  frq,\n}: {\n  rpData: RecurringPaymentInfo;\n  frq: string;\n}) => (\n  <>\n    {rpData?.company && (\n      <PItem contentName=\"Paid to:\">{rpData.company.name}</PItem>\n    )}\n\n    <PItem contentName=\"Recurring payment amount:\">\n      £{` `}\n      {formatAmount(rpData.recurringAmount)}\n    </PItem>\n    <PItem contentName=\"First recurring payment date:\">\n      {moment(rpData.recurringDate).format(`DD/MM/YYYY`)}\n    </PItem>\n    <PItem contentName=\"Frequency:\">{frq}</PItem>\n    <PItem contentName=\"Number of payments:\">\n      {rpData.numberOfPayments > 0 ? rpData.numberOfPayments : `Indefinite`}\n    </PItem>\n    <PItem contentName=\"Reference:\">\n      {rpData?.externalReference || rpData?.reference}\n    </PItem>\n  </>\n);\nconst Full = ({\n  rpData,\n  frq,\n}: {\n  rpData: RecurringPaymentInfo;\n  frq: string;\n}) => {\n  if (\n    rpData?.initialPayment &&\n    payablePaymentStatuses.includes(rpData?.initialPayment.status)\n  ) {\n    const smallScreen =\n      typeof window !== `undefined` && window.innerWidth < 900;\n    return (\n      <>\n        {rpData?.company && (\n          <PItem contentName=\"Pay to:\">{rpData.company.name}</PItem>\n        )}\n        <PItem contentName=\"Reference:\">\n          {rpData.externalReference || rpData.reference}\n        </PItem>\n        <br />\n        <PItem\n          contentName={smallScreen ? `First payment:` : `First payment amount:`}\n        >\n          £{` `}\n          {formatAmount(rpData.initialPayment.amount)}\n        </PItem>\n        <PItem\n          contentName={\n            smallScreen ? `Recurring amount:` : `Recurring payment amount:`\n          }\n        >\n          £{` `}\n          {formatAmount(rpData.recurringAmount)}\n        </PItem>\n        <PItem\n          contentName={\n            smallScreen\n              ? `First recurring date:`\n              : `First recurring payment date:`\n          }\n        >\n          {moment(rpData.recurringDate).format(`DD/MM/YYYY`)}\n        </PItem>\n        <PItem contentName=\"Frequency:\">{frq}</PItem>\n        <PItem\n          contentName={\n            rpData?.initialPayment\n              ? `Number of recurring payments:`\n              : `Number of payments:`\n          }\n        >\n          {rpData.numberOfPayments > 0 ? rpData.numberOfPayments : `Indefinite`}\n        </PItem>\n      </>\n    );\n  }\n  if (\n    (rpData?.initialPayment &&\n      rpData?.initialPayment?.status === PaymentStatus.PAID) ||\n    (!rpData?.initialPayment && payableRecurringStatues.includes(rpData.status))\n  ) {\n    return (\n      <>\n        {rpData?.company && (\n          <PItem contentName=\"Pay to:\">{rpData.company.name}</PItem>\n        )}\n        <PItem contentName=\"Reference:\">{rpData.reference}</PItem>\n        <br />\n        <PItem contentName=\"Recurring payment amount:\">\n          £{` `}\n          {formatAmount(rpData.recurringAmount)}\n        </PItem>\n        <PItem contentName=\"First recurring payment date:\">\n          {moment(rpData.recurringDate).format(`DD/MM/YYYY`)}\n        </PItem>\n        <PItem contentName=\"Frequency:\">{frq}</PItem>\n        <PItem\n          contentName={\n            rpData?.initialPayment\n              ? `Number of recurring payments:`\n              : `Number of payments:`\n          }\n        >\n          {rpData.numberOfPayments > 0 ? rpData.numberOfPayments : `Indefinite`}\n        </PItem>\n      </>\n    );\n  }\n  return <LoadingBlock />;\n};\nexport interface RecurringPaymentInfo {\n  id?: string;\n  redirectTo?: string;\n  beneficiaryBankAccount: BankAccount;\n  company: { name: string };\n  completedAt?: Date;\n  status: RecurringPaymentStatus;\n  reference: string;\n  initialPayment?: {\n    id: string;\n    amount: string;\n    dueDate: Date; // ?\n    completedAt?: Date;\n    status: PaymentStatus;\n    externalReference?: string;\n    reference?: string;\n  };\n  recurringDate: Date;\n  recurringAmount: string;\n  frequency: RecurringPaymentFrequency;\n  numberOfPayments: number;\n  lastPaymentDate: Date;\n  rejectedAt?: Date;\n  externalReference?: string;\n}\ninterface RecPaymentDetailsCardProps {\n  rpData: RecurringPaymentInfo;\n  variant: 'short' | 'full' | 'medium';\n}\nconst RecurringPaymentDetails: React.FunctionComponent<\n  RecPaymentDetailsCardProps\n> = ({ variant = `full`, rpData }) => {\n  let frequency: string;\n  switch (rpData.frequency) {\n    case RecurringPaymentFrequency.ONE_WEEK: {\n      frequency = `Weekly`;\n      break;\n    }\n    case RecurringPaymentFrequency.ONE_MONTH: {\n      frequency = `Monthly`;\n      break;\n    }\n    case RecurringPaymentFrequency.THREE_MONTHS: {\n      frequency = `3 months`;\n      break;\n    }\n    case RecurringPaymentFrequency.ONE_YEAR: {\n      frequency = `12 months`;\n      break;\n    }\n    default:\n      break;\n  }\n\n  return (\n    <CardWrapper>\n      {/* eslint-disable-next-line no-nested-ternary */}\n      {variant === `full` ? (\n        <Full rpData={rpData} frq={frequency} />\n      ) : variant === `medium` ? (\n        <Medium rpData={rpData} frq={frequency} />\n      ) : (\n        <Short rpData={rpData} frq={frequency} />\n      )}\n    </CardWrapper>\n  );\n};\nexport default RecurringPaymentDetails;\n","import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n  QrCodeCard,\n  BankSelect,\n  SmallP,\n  Strong,\n  Layout,\n  Card,\n  LoadingBlock,\n  P,\n  SecondaryButton,\n  Button,\n} from '@/components';\nimport QRCode from 'qrcode';\nimport { formatAmount } from '@/utils/format';\nimport {\n  payablePaymentStatuses,\n  payableRecurringStatues,\n  PaymentStatus,\n  RecurringPaymentFrequency,\n  RecurringPaymentStatus,\n} from '@fena/types';\nimport { sandboxProviders } from '@/utils/sandbox-data';\nimport RecurringPaymentDetails from '@/components/RecurringPaymentDetails';\nimport { Item } from '@/components/CountryDropdown';\nimport Header from '../../containers/Header';\nimport Api from '../../utils/api';\n\nconst CollapsedCardTitle = styled(Strong)`\n  text-transform: uppercase;\n`;\n\nconst AgeementText = styled(SmallP)`\n  text-align: center;\n  margin-top: var(--space-2);\n  line-height: 24px;\n`;\n\nconst Link = styled.a`\n  text-decoration: none;\n  color: #38b6ff;\n`;\n\nconst Buttons = styled.div`\n  padding: var(--space-2);\n  display: flex;\n  justify-content: center;\n  @media (max-width: 900px) {\n    bottom: 0;\n    right: 0;\n    left: 0;\n  }\n`;\n\nconst CancelButton = styled.div`\n  /* margin-right: var(--space-2); */\n`;\n\nconst ButtonWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 15px 0;\n`;\n\nconst StyledButton = styled(Button)`\n  background: transparent;\n  margin-right: 10px;\n  :hover {\n    background: transparent;\n  }\n`;\nexport interface Provider {\n  name: string;\n  logo: string;\n  externalId: string;\n}\n\nconst RecurringPaymentPage: React.FunctionComponent<any> = ({ location }) => {\n  const isSandbox = location?.hostname?.split(`.`)[0] === `sandbox`;\n  // const isSandbox = true;\n  const [payData, setPayData] = useState<any>();\n  const [providerGeneratedLink, setProviderGeneratedLink] = useState(``);\n  const [providerDataLoading, setProviderDataLoading] = useState(false);\n  const [providerListLoading, setProviderListLoading] = useState(false);\n  const [generatedQRData, setGeneratedQRData] = useState<string | undefined>();\n  const [providersList, setProvidersList] = useState<Array<Provider>>([]);\n  const [activeBank, setActiveBank] = useState<Provider>();\n  const [country, setCountry] = useState<Item>({\n    label: `United Kingdom`,\n    value: `GB`,\n  });\n  const [showContinueButton, setShowContinueButton] = useState(true);\n  const params = new URLSearchParams(location.search);\n\n  const recurringPaymentId = params.get(`rp`);\n\n  const getProvidersData = async () => {\n    setProviderListLoading(true);\n    if (isSandbox) {\n      setProvidersList(\n        sandboxProviders.filter(\n          (p) => !p.externalId.includes(`ob-sandbox-coutts`),\n        ),\n      );\n      setProviderListLoading(false);\n      return;\n    }\n    try {\n      // excluding banks that do not support the initiation of standing orders at all or with specific parameters\n      const banksExcludedByDefault: string[] = [\n        `ob-mettle`,\n        `starling`,\n        `ob-virgin-money`,\n        `ob-aibgb-retail`,\n        `ob-aibgb-corporate`,\n        `ob-aibni-retail`,\n        `ob-aibni-corporate`,\n        'ob-boi-uk-b365',\n        'ob-boi-uk-bol'\n      ];\n      const banksExcludedByCondition: string[] = [];\n      if (payData?.numberOfPayments !== 0)\n        banksExcludedByCondition.push(`ob-santander`);\n      if (\n        payData?.numberOfPayments !== 0 ||\n        payData.frequency === RecurringPaymentFrequency.THREE_MONTHS ||\n        payData.frequency === RecurringPaymentFrequency.ONE_YEAR\n      )\n        banksExcludedByCondition.push(`ob-revolut`);\n\n      if (\n        payData.frequency === RecurringPaymentFrequency.THREE_MONTHS ||\n        payData.frequency === RecurringPaymentFrequency.ONE_YEAR\n      )\n        banksExcludedByCondition.push(`ob-tide`);\n\n      const res = await Api.getProviderList(`merchant`, [\n        ...banksExcludedByDefault,\n        ...banksExcludedByCondition,\n      ]);\n\n      setProvidersList(\n        (res.data || [])\n          .filter((p) => !p.nonPayable)\n          .map((p) => ({\n            name: p.name,\n            logo: p.logo,\n            externalId: p.externalId,\n          })),\n      );\n      // const memorizedData = JSON.stringify(providersList);\n      // const responseData = JSON.stringify(res.data);\n      // if (!providersList || memorizedData !== responseData)\n      //   setProvidersList(res.data);\n      setProviderListLoading(false);\n    } catch (e) {\n      console.error(e);\n      setProviderListLoading(false);\n    }\n  };\n\n  const getRecurringPaymentData = async (rpId: string, pId?: string) => {\n    const res = await Api.getRecurringPaymentInfo(rpId);\n\n    const isInitialPaymentStatusChanged =\n      (payData?.initialPayment &&\n        payData?.initialPayment?.status &&\n        res.data?.initialPayment?.status !== payData?.initialPayment?.status) ||\n      (payData?.initialPayment?.status === PaymentStatus.REJECTED &&\n        payData?.initialPayment.rejectedAt &&\n        res.data?.initialPayment.rejectedAt !==\n          payData?.initialPayment.rejectedAt);\n\n    const isRPstatusChanged =\n      // !isInitialPaymentRequired && // if initial payment exist or it is already payed\n      (payData?.status && res.data?.status !== payData?.status) ||\n      (payData?.status === RecurringPaymentStatus.REJECTED &&\n        payData?.rejectedAt &&\n        res.data?.rejectedAt !== payData?.rejectedAt);\n    let url = ``;\n\n    if (window && (isInitialPaymentStatusChanged || isRPstatusChanged)) {\n      if (isInitialPaymentStatusChanged) {\n        url = `${\n          window.location.origin\n        }/payment-success/?customerPaymentId=recurring-initial_${\n          res.data.initialPayment.id\n        }&id=${res?.initialPayment?.providerPaymentId || pId}`;\n        switch (res.data.initialPayment.status) {\n          case PaymentStatus.PENDING:\n            url += `&status=pending`;\n            break;\n          case PaymentStatus.PAID:\n            url += `&status=executed`;\n            break;\n          case PaymentStatus.REJECTED:\n            url += `&status=rejected`;\n            break;\n          default:\n            break;\n        }\n      }\n\n      if (isRPstatusChanged) {\n        if (!res?.fenaPaymentPageRedirectEnabled) {\n          url = `${\n            window.location.origin\n          }/pre-redirect/?customerPaymentId=recurring_${rpId}&id=${\n            res?.initialPayment?.providerId || pId\n          }`;\n        } else {\n          url = `${\n            window.location.origin\n          }/payment-success/?customerPaymentId=recurring_${rpId}&id=${\n            res?.initialPayment?.providerId || pId\n          }`;\n        }\n        // url = `${\n        //   window.location.origin\n        // }/payment-success/?customerPaymentId=recurring_${rpId}&id=${\n        //   res?.initialPayment?.providerId || pId\n        // }`;\n        switch (res.data.status) {\n          case RecurringPaymentStatus.PENDING:\n            url += `&status=initiation_pending`;\n            break;\n          case RecurringPaymentStatus.INITIATION_COMPLETED:\n            url += `&status=initiation_completed`;\n            break;\n          case RecurringPaymentStatus.REJECTED:\n            url += `&status=initiation_failed`;\n            break;\n          default:\n            break;\n        }\n      }\n      window.location.replace(url);\n    }\n    const memorizedData = JSON.stringify(payData);\n    const responseData = JSON.stringify(res.data);\n    if (!payData || memorizedData !== responseData) setPayData(res.data);\n\n    return res.data;\n  };\n\n  useEffect(() => {\n    getRecurringPaymentData(recurringPaymentId);\n  }, []);\n  useEffect(() => {\n    if (\n      window &&\n      payData?.initialPayment &&\n      payData?.initialPayment?.status === PaymentStatus.PAID &&\n      payableRecurringStatues.includes(payData?.status)\n    ) {\n      window.location.replace(\n        `${window.location.origin}/payment-success/?customerPaymentId=recurring-initial_${payData.initialPayment.id}&status=executed`,\n      );\n    }\n  }, [payData]);\n  useMemo(() => {\n    getProvidersData();\n  }, [payData]);\n\n  const onBankChange = (bank: Provider | undefined) => {\n    if (!bank) {\n      setGeneratedQRData(undefined);\n      setProviderGeneratedLink(``);\n      setActiveBank(undefined);\n    } else {\n      setActiveBank(bank);\n    }\n  };\n\n  const pollPayment = (pId: string) => () => {\n    getRecurringPaymentData(recurringPaymentId, pId);\n  };\n  //   const scrollDown = () => {\n  //     const windowCoords = document.documentElement.clientHeight - 75;\n  //     (function scroll() {\n  //       if (window.pageYOffset < windowCoords) {\n  //         window.scrollBy(0, 3);\n  //         setTimeout(scroll, 3);\n  //       }\n  //       if (window.pageYOffset > windowCoords) {\n  //         window.scrollTo(0, windowCoords);\n  //       }\n  //     })();\n  //   };\n  const onContinue = async () => {\n    setProviderDataLoading(true);\n\n    const providerApiResult = await Api.initiatePayment(\n      recurringPaymentId,\n      `recurring`,\n      activeBank.externalId,\n    );\n\n    if (typeof window !== `undefined` && window.innerWidth < 900) {\n      window.location.replace(providerApiResult.data.result.auth_flow.uri);\n      return;\n    }\n    let id;\n\n    // recurring payment  initial payment\n    if (\n      payData?.initialPayment &&\n      payablePaymentStatuses.includes(payData.initialPayment.status)\n    ) {\n      id = providerApiResult.data?.result.single_immediate_payment.id;\n    }\n    // recurring payment without no initial payment\n    else if (\n      !payData.initialPayment ||\n      payData?.initialPayment?.status === PaymentStatus.PAID\n    ) {\n      id = providerApiResult.data?.result.consentId;\n    }\n    // single immediate payment\n    else {\n      id = providerApiResult.data?.result.single_immediate_payment.id;\n    }\n\n    setInterval(pollPayment(id), 1000);\n    const qr = await QRCode.toDataURL(\n      providerApiResult.data.result.auth_flow.uri,\n      { errorCorrectionLevel: `low` },\n    );\n    setGeneratedQRData(qr);\n    setProviderGeneratedLink(providerApiResult.data.result.auth_flow.uri);\n    setProviderDataLoading(false);\n  };\n\n  const onConfirmPayment = () => {\n    // window.location.replace(providerGeneratedLink);\n    window.open(providerGeneratedLink, `_blank`);\n  };\n\n  const onRetryProviderListLoad = () => {\n    getProvidersData();\n  };\n\n  const onCancel = () => {\n    // eslint-disable-next-line no-restricted-globals\n    history.go(-1);\n  };\n\n  const changeButtonHandler = () => {\n    setActiveBank(undefined);\n    setShowContinueButton(true);\n  };\n\n  if (payData?.status && !payableRecurringStatues.includes(payData.status)) {\n    return (\n      <Layout>\n        <Card\n          defaultExpanded\n          title=\"The payment was cancelled or the link is expired\"\n        >\n          <P className=\"accent-text-gray\">\n            Your payment has been cancelled by the merchant or the link has\n            expired. Please contact {payData.company.name} to get a new one!\n          </P>\n        </Card>\n      </Layout>\n    );\n  }\n\n  return (\n    <Layout\n      customisationSettings={{\n        headerLogo: payData?.company?.companySettings?.pFlowHeaderLogoUrl,\n        headerBgColor: payData?.company?.companySettings?.pFlowHeaderColor,\n      }}\n      isSandbox={isSandbox}\n    >\n      {payData ? (\n        <>\n          <Header title=\"Bank Select\" />\n          <Card\n            defaultExpanded\n            title=\"Summary\"\n            collapsedTitle={\n              <>\n                <CollapsedCardTitle>Summary: </CollapsedCardTitle>\n                Pay\n                {` `}\n                <span className=\"accent-text-black-bold\">\n                  £ {` `}\n                  {formatAmount(payData.recurringAmount)}\n                </span>\n                {` `}\n                to\n                {` `}\n                {payData?.company?.name}\n              </>\n            }\n            isAccordion\n          >\n            <RecurringPaymentDetails variant=\"full\" rpData={payData} />\n          </Card>\n\n          <Card defaultExpanded title=\"Select your bank\" isAccordion>\n            <BankSelect\n              providerList={providersList}\n              activeBank={activeBank}\n              setActiveBank={onBankChange}\n              loading={providerDataLoading || providerListLoading}\n              isSandbox={isSandbox}\n              onRetryLoadProviders={onRetryProviderListLoad}\n              onCountryChange={setCountry}\n              country={country}\n              changeButtonHandler={changeButtonHandler}\n              labelText=\"Please select the bank you want to use to complete the transaction. We will then send you to your bank to approve this payment.\"\n            />\n          </Card>\n\n          {providerGeneratedLink && generatedQRData && (\n            <Card\n              defaultExpanded\n              title=\"Scan the QR code with your phone or continue on desktop\"\n              isAccordion\n            >\n              <QrCodeCard\n                chaseBank={activeBank?.externalId === `ob-chase`}\n                qrData={generatedQRData}\n                onContinue={onConfirmPayment}\n              />\n            </Card>\n          )}\n          {payData.redirectTo && (\n            <Buttons>\n              <CancelButton>\n                <SecondaryButton onClick={onCancel}>Cancel</SecondaryButton>\n              </CancelButton>\n            </Buttons>\n          )}\n          {activeBank && (\n            <>\n              <AgeementText>\n                By selecting &quot;Accept&quot; you give your permission to Fena\n                Labs Ltd. to initiate a payment. You also agree to fena’s\n                {` `}\n                <Link\n                  target=\"_blank\"\n                  href=\"https://www.fena.co/terms-and-conditions/\"\n                >\n                  Terms and Conditions\n                </Link>\n                {` `}\n                and\n                {` `}\n                <Link\n                  target=\"_blank\"\n                  href=\"https://www.fena.co/privacy-policy/\"\n                >\n                  Privacy Policy\n                </Link>\n              </AgeementText>\n              {showContinueButton && (\n                <ButtonWrapper>\n                  <StyledButton white onClick={() => onBankChange(undefined)}>\n                    Decline\n                  </StyledButton>\n                  <Button\n                    onClick={() => {\n                      onContinue();\n                    }}\n                    disabled={!activeBank}\n                    loading={providerDataLoading || providerListLoading}\n                    bgColor={payData.company.companySettings?.pFlowBtnColor}\n                    textColor={\n                      payData.company.companySettings?.pFlowBtnTextColor\n                    }\n                  >\n                    Accept\n                  </Button>\n                </ButtonWrapper>\n              )}\n            </>\n          )}\n        </>\n      ) : (\n        <LoadingBlock minHeight={500} />\n      )}\n    </Layout>\n  );\n};\n\nexport default RecurringPaymentPage;\n"],"names":["CardWrapper","styled","PaymentItem","Span","PItem","props","contentName","children","P","className","Short","rpData","frq","formatAmount","recurringAmount","moment","recurringDate","format","numberOfPayments","Medium","company","name","externalReference","reference","Full","initialPayment","payablePaymentStatuses","status","smallScreen","window","innerWidth","amount","PaymentStatus","payableRecurringStatues","frequency","variant","RecurringPaymentFrequency","CollapsedCardTitle","Strong","AgeementText","SmallP","Link","Buttons","CancelButton","ButtonWrapper","StyledButton","Button","location","isSandbox","hostname","split","useState","payData","setPayData","providerGeneratedLink","setProviderGeneratedLink","providerDataLoading","setProviderDataLoading","providerListLoading","setProviderListLoading","generatedQRData","setGeneratedQRData","providersList","setProvidersList","activeBank","setActiveBank","label","value","country","setCountry","showContinueButton","setShowContinueButton","recurringPaymentId","URLSearchParams","search","get","getProvidersData","sandboxProviders","p","externalId","includes","banksExcludedByDefault","banksExcludedByCondition","push","Api","res","data","filter","nonPayable","map","logo","console","error","getRecurringPaymentData","rpId","pId","isInitialPaymentStatusChanged","rejectedAt","isRPstatusChanged","RecurringPaymentStatus","url","origin","id","providerPaymentId","fenaPaymentPageRedirectEnabled","providerId","replace","memorizedData","JSON","stringify","responseData","useEffect","useMemo","onBankChange","bank","undefined","pollPayment","onContinue","providerApiResult","result","auth_flow","uri","single_immediate_payment","consentId","setInterval","QRCode","errorCorrectionLevel","qr","defaultExpanded","title","customisationSettings","headerLogo","companySettings","pFlowHeaderLogoUrl","headerBgColor","pFlowHeaderColor","collapsedTitle","isAccordion","providerList","loading","onRetryLoadProviders","onCountryChange","changeButtonHandler","labelText","chaseBank","qrData","open","redirectTo","onClick","history","go","target","href","white","disabled","bgColor","pFlowBtnColor","textColor","pFlowBtnTextColor","minHeight"],"sourceRoot":""}