Loading failed! Please reload.
;\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import styled from 'styled-components';\n// @ts-ignore\nimport { palette } from 'styled-theme';\n\nconst LoaderComponent = styled.div`\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 10000000000;\n top: 0;\n right: 0;\n\n @media only screen and (min-width: 768px) and (max-width: 1220px) {\n width: calc(100% - 80px);\n }\n\n @media only screen and (max-width: 767px) {\n width: 100%;\n }\n\n .isoContentLoader {\n width: 50px;\n height: 50px;\n animation: svgSpinner 1.4s linear infinite;\n }\n\n .isoContentLoaderCircle {\n animation: svgSpinnerCircle 1.4s ease-in-out infinite;\n stroke-dasharray: 80px, 200px;\n stroke-dashoffset: 0px;\n stroke: ${palette('primary', 0)};\n stroke-linecap: round;\n }\n\n @keyframes svgSpinner {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes svgSpinnerCircle {\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0px;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -120px;\n }\n }\n`;\n\nexport default LoaderComponent;\n","import React from \"react\";\nimport LoaderComponent from \"./loader.style\";\n\nexport default () => (\n{meta.error}
\n ) : null}\n \n );\n};\n\nexport default HfdTextInput;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { Container, Button, Spinner } from \"react-bootstrap\";\nimport { useAuthDataContext } from \"../../../../authProvider\";\nimport { Formik, Form } from \"formik\";\nimport * as Yup from \"yup\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faEnvelope,\n faUnlockAlt,\n faCheck,\n faTimes,\n} from \"@fortawesome/free-solid-svg-icons\";\n\nimport HfdTextInput from \"@hfd/components/Input/HfdTextInput\";\n\ninterface FormValues {\n email: string;\n password: string;\n appId: string | undefined;\n}\n\nconst SignInFormMobile = () => {\n const [isFormSubmitting, setFormSubmitting] = useState(false);\n\n const emailErrors = \"\";\n const passwordErrors = \"\";\n\n const { onLogin } = useAuthDataContext();\n // Here's how we'll keep track of our component's mounted state\n const componentIsMounted = useRef(true);\n useEffect(() => {\n return () => {\n componentIsMounted.current = false;\n };\n }, []); // Using an empty dependency array ensures this only runs on unmount\n\n async function doSubmit(values: FormValues) {\n await setFormSubmitting(true);\n onLogin({\n email: values.email,\n password: values.password,\n appId: values.appId,\n });\n if (componentIsMounted.current) {\n setFormSubmitting(false);\n }\n }\n\n async function clearValidationErrors() {\n if (emailErrors || passwordErrors) {\n console.log(\"hook into apollo\");\n }\n }\n\n return (\n \n Forgot your password?\n Sign Up\n
\n \n
\n \n
{children}
;\n};\n\nexport default Sidebar;\n","import React, { useState } from \"react\";\nimport { Button, Spinner } from \"react-bootstrap\";\nimport { Formik, Form } from \"formik\";\nimport * as Yup from \"yup\";\n// @ts-ignore\nimport HfdTextInput from \"@hfd/components/Input/HfdTextInput\";\nimport { useEffect } from \"react\";\nimport { useRef } from \"react\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { useAuthDataContext } from \"../../../../authProvider\";\n\n// Remove App Id once we have auth\ninterface FormValues {\n email: string;\n password: string;\n appId: string | undefined;\n}\n\nconst SignInForm = () => {\n const [isFormSubmitting, setFormSubmitting] = useState(false);\n\n const emailErrors = \"\";\n const passwordErrors = \"\";\n\n const { onLogin } = useAuthDataContext();\n // Here's how we'll keep track of our component's mounted state\n const componentIsMounted = useRef(true);\n useEffect(() => {\n return () => {\n componentIsMounted.current = false;\n };\n }, []); // Using an empty dependency array ensures this only runs on unmount\n\n async function doSubmit(values: FormValues) {\n await setFormSubmitting(true);\n onLogin({\n email: values.email,\n password: values.password,\n appId: values.appId,\n });\n if (componentIsMounted.current) {\n setFormSubmitting(false);\n }\n }\n\n async function clearValidationErrors() {\n if (emailErrors || passwordErrors) {\n console.log(\"hook into apollo\");\n }\n }\n return (\n \n {\n await doSubmit(values);\n }}\n >\n \n \n
\n );\n};\n\nexport default SignInForm;\n","import gql from \"graphql-tag\";\n\nexport const LOCAL_APP_STATE = gql`\n query localAppState {\n localAppState @client {\n id\n navigationToggled\n isMobile\n userData\n cardType\n }\n }\n`;\n\nexport const RESET_MODEL = gql`\n mutation resetModel($applicationId: String!, $zipOnFile: String!) {\n resetModel(applicationId: $applicationId, zipOnFile: $zipOnFile) @client\n }\n`;\n\nexport const UPDATE_NAVIGATION_TOGGLED = gql`\n mutation updateNavigationToggled($navigationToggled: Boolean!) {\n updateNavigationToggled(navigationToggled: $navigationToggled) @client\n }\n`;\n\nexport const UPDATE_ISMOBILEPROPERTY = gql`\n mutation updateIsMobileProperty($isMobile: Boolean!) {\n updateIsMobileProperty(isMobile: $isMobile) @client\n }\n`;\n\nexport const UPDATE_USERAPPLICATIONID = gql`\n mutation updateUserApplicationId($applicationId: String!) {\n updateUserApplicationId(applicationId: $applicationId) @client\n }\n`;\n\nexport const UPDATE_USERZIPCODE = gql`\n mutation updateUserZipCode($zipCode: String!) {\n updateUserZipCode(zipCode: $zipCode) @client\n }\n`;\n\nexport const UPDATE_USERPAYMENTAMOUNT = gql`\n mutation updateUserPaymentAmount($paymentAmount: String!) {\n updateUserPaymentAmount(paymentAmount: $paymentAmount) @client\n }\n`;\n\nexport const UPDATE_NAMEONCARD = gql`\n mutation updateUserNameOnCard($nameOnCard: String!) {\n updateUserNameOnCard(nameOnCard: $nameOnCard) @client\n }\n`;\n\nexport const UPDATE_CARDTYPE = gql`\n mutation updateUserPaymentType($cardType: String!) {\n updateUserPaymentType(cardType: $cardType) @client\n }\n`;\n\nexport const UPDATE_CARDNUMBER = gql`\n mutation updateUserPaymentCardNumber($cardNumber: String!) {\n updateUserPaymentCardNumber(cardNumber: $cardNumber) @client\n }\n`;\n\nexport const UPDATE_CARDMONTH = gql`\n mutation updateUserPaymentCardMonth($expirationMonth: String!) {\n updateUserPaymentCardMonth(expirationMonth: $expirationMonth) @client\n }\n`;\n\nexport const UPDATE_CARDYEAR = gql`\n mutation updateUserPaymentCardYear($expirationYear: String!) {\n updateUserPaymentCardYear(expirationYear: $expirationYear) @client\n }\n`;\n\nexport const UPDATE_CARDCODE = gql`\n mutation updateUserPaymentCardCode($securityCode: String!) {\n updateUserPaymentCardCode(securityCode: $securityCode) @client\n }\n`;\n\nexport const UPDATE_CARDADDRESSONE = gql`\n mutation updateUserPaymentCardAddressOne($addressOne: String!) {\n updateUserPaymentCardAddressOne(addressOne: $addressOne) @client\n }\n`;\n\nexport const UPDATE_CARDADDRESSTWO = gql`\n mutation updateUserPaymentCardAddressTwo($addressTwo: String!) {\n updateUserPaymentCardAddressTwo(addressTwo: $addressTwo) @client\n }\n`;\n\nexport const UPDATE_CARDCITY = gql`\n mutation updateUserPaymentCardCity($cardCity: String!) {\n updateUserPaymentCardCity(cardCity: $cardCity) @client\n }\n`;\n\nexport const UPDATE_CARDSTATE = gql`\n mutation updateUserPaymentCardState($cardState: String!) {\n updateUserPaymentCardState(cardState: $cardState) @client\n }\n`;\n\nexport const UPDATE_CARDCOUNTRY = gql`\n mutation updateUserPaymentCardCountry($cardCountry: String!) {\n updateUserPaymentCardCountry(cardCountry: $cardCountry) @client\n }\n`;\n\nexport const UPDATE_CARDZIP = gql`\n mutation updateUserPaymentCardZip($cardZip: String!) {\n updateUserPaymentCardZip(cardZip: $cardZip) @client\n }\n`;\n\nexport const UPDATE_SAVEPAYMENT = gql`\n mutation updateSavePayment($savePayment: String!) {\n updateSavePayment(savePayment: $savePayment) @client\n }\n`;\n","import axios from \"axios\";\n\ninterface BasicAccountDetails {\n applicationId: Number;\n firstName: String;\n lastName: String;\n payoffAmount: Number;\n totalAmountDue: Number;\n paymentStatus: String;\n amountFinanced: Number;\n paidToDate: Number;\n principalBalance: Number;\n paymentsRemaining: Number;\n estimatedPayoffDate: Date;\n authorized: Boolean;\n message: String;\n promotionPlanDate: Date | null;\n promotionPayOffAmount: Number;\n promotionFees: Number;\n}\n\nclass AnonymoustOTPService {\n validateAppAndZipCode = async (\n applicationId: number,\n zipCode: number\n ): Promise\n
\n \n 
\n
\n \n \n
\n\n
\n
\n
\n \n
\n \n
\n\n \n
\n
\n \n
\n
\n \n \n \n
\n
\n
\n \n
\n \n
\n
Loading
;\n return isMobile ? \n
\n\n {/* {!props.card.isPrimary && props.card.priority === 2 && (\n Secondary\n )}{\" \"}\n */}\n \n \n {displayCardLogo(cardType)}\n
\n {props.card.isPrimary && (\n \n \n
\n )}\n \n
\n\n {props.children}\n \n );\n};\n\nexport default WalletCard;\n","import React from \"react\";\n\ntype ach = {\n bankName: string;\n accountNumber: string;\n accountName: string;\n};\n\ntype WalletBankAccountProps = {\n ach: ach;\n};\n\nconst WalletBankAccount = (props: WalletBankAccountProps) => {\n const { ach } = props;\n return (\n {props.card.cardName}
\n \n **** **** **** {props.card.cardNumber.substr(12, 4)}\n
\n {props.card.expiration}
\n \n {/* {ach.isPrimary && (\n
*/}\n \n Primary\n
\n )} */}\n {/* {!props.card.isPrimary && props.card.priority === 2 && (\n Secondary\n )}{\" \"}\n {ach.bankName}
\n {ach.accountNumber}
\n {ach.accountName}
\n \n );\n};\n\nexport default WalletBankAccount;\n","import React from \"react\";\n\ntype Props = {\n size: string;\n};\n\nconst HFDBarLogo = ({ size = \"full\" }: Props) => (\n Loading
;\n }\n\n const toggleNav = () => {\n let currentlyToggled = data.localAppState.navigationToggled;\n let nexttoggle = !currentlyToggled;\n toggleNavigation({\n variables: { navigationToggled: nexttoggle },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n };\n\n const goBack = () => {\n if (props.customGoBack) {\n props.customGoBack();\n } else {\n history.goBack();\n }\n };\n const goHome = () => {\n history.push(\"/user/dashboard\");\n };\n\n return (\n <>\n \n
\n \n );\n};\n\nexport default MobileNavBar;\n","import React from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport MobileNav from \"../../../components/mobile/MobileNavBar\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\n\nimport \"./scss/walletMobile.css\";\n\nconst WalletMobile = ({ DisplayCards }: any) => {\n return (\n \n
\n \n
\n\n \n {data.localAppState.navigationToggled ? (\n <>\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n ) : (\n \n
\n Home
\n \n
\n Make A Payment
\n \n
\n Account Details
\n \n
\n Manage Wallet
\n \n
\n Manage Profile
\n \n
\n Contact Us
\n \n
\n Settings
\n \n
\n \n \n
\n
\n
\n
\n {title ? (\n
\n \n
\n ) : null}\n {title}
\n\n
\n {children ? children : null}
\n \n
{user.applicationId}
\n \n\n
\n \n );\n};\n\nexport default HfdRadio;\n","// @ts-ignore\nimport React from \"react\";\n\ninterface IProps {\n label: string;\n action: any;\n}\n\nconst HfdEditIcon = ({ label, action }: IProps) => {\n return (\n <>\n \n \n
\n \n );\n};\n\nexport default HfdIconButton;\n\n","import React from \"react\";\nimport { Row, Col, Form } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport Card from \"@hfd/components/utility/card\";\nimport HfdButton from \"@hfd/components/Button/HfdButton\";\nimport HfdRadio from \"@hfd/components/Radio/HfdRadio\";\nimport HfdEditIcon from \"@hfd/components/EditIcon/HfdEditIcon\";\nimport HfdIconButton from \"@hfd/components/IconButton/HfdIconButton\";\nimport { LOCAL_APP_STATE } from \"../../../../localState/queries\";\nimport { useQuery } from \"@apollo/react-hooks\";\n\nconst SettingsPaymentPlan = ({\n user,\n textEditable,\n changeSetDefault,\n changeEditMode,\n handleSaveValue,\n}: any) => {\n const { data } = useQuery(LOCAL_APP_STATE);\n\n const renderEditView = () => {\n return (\n \n {textEditable.value}{\" \"}\n {data.localAppState.isMobile ? null : (\n
Plan #{user.applicationId}
\n \n\n
\n
\n
\n
\n
\n
\n \n \n
\n \n \n No payment is required at this time.\n
\n\n {/* \n \n
\n \n
\n \n
\n );\n};\n\nconst DashboardPaymentWidget: any = ({ financials }: any) => {\n if (financials.paymentStatus !== \"ACT\") {\n return (\n \n
\n \n \n Amount Due:
\n Pay past due amount\n
\n before{\" \"}\n {nextPaymentDate && (\n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n \n\n \n \n\n \n \n\n \n \n
\n \n \n
\n {link[0].iconLabel}
\n \n
\n {link[1].iconLabel}
\n \n
\n {link[2].iconLabel}
\n \n
\n {link[3].iconLabel}
\n Fake Nick Name
\n #750516
\n \n \n \n \n
\n
\n \n
\n \n \n Your next\n
\n payment of\n
\n $79.79 will be due on\n
\n \n payment of\n
\n $79.79 will be due on\n
\n
{/*
\n \n \n \n \n
\n \n
\n \n \n
\n \n \n No payment is required at this time.\n
\n\n
\n \n \n
\n \n \n Your account is Past Due!\n
\n\n Amount Due:
\n Pay past due amount before{\" \"}\n {nextPaymentDate &&
\n \n
\n \n \n
\n );\n};\n\nexport default DashboardOverviewInformation;\n","import React from \"react\";\nimport Card from \"@hfd/components/utility/card\";\nimport { Row, Col } from \"react-bootstrap\";\nimport { NavLink } from \"react-router-dom\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faArrowRight } from \"@fortawesome/free-solid-svg-icons\";\n\nconst DashboardQuickActions = () => {\n return (\n \n {financials.paymentPlanName}\n
\n\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n Monthly Payment
\n \n\n
Paid To Date
\n \n\n
Amount Financed
\n \n\n
Payment Date
\n \n\n
Payments Remaining
\n \n{getNumberOfPaymentsRemaining()}
\n \nAdd Payment Method
\nReduce Term
\nChange Payment Date
\nEdit Contact Info
\n\n
\n \n );\n};\n\nexport default HfdCheckbox;\n","import React, { useEffect } from \"react\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { Button, Card, Col, Row } from \"react-bootstrap\";\nimport { useState } from \"react\";\nimport CurrencyInput from \"@hfd/ui/CurrencyInput/CurrencyInput\";\nimport HfdCheckbox from \"@hfd/components/Checkbox/HfdCheckbox\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faArrowRight,\n faCheck,\n faTimes,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\n\nexport const paymentOptions = {\n PAST_DUE_AMOUNT: \"PAST_DUE_AMOUNT\",\n PAYOFF_AMOUNT: \"PAYOFF_AMOUNT\",\n CUSTOM_AMOUNT: \"CUSTOM_AMOUNT\",\n MONTHLY_PAYMENT_AMOUNT: \"MONTHLY_PAYMENT_AMOUNT\",\n};\n\nconst PaymentAmountWidget = (props: any) => {\n const financials = props.financials;\n const [customAmount, setCustomAmount] = useState(0);\n const [nextButtonDisabled, setNextButtonDisabled] = useState(false);\n\n const [paymentOptionSelected, setPaymentOption] = useState(\n paymentOptions.PAST_DUE_AMOUNT\n );\n\n useEffect(() => {\n const initialPaymentOption = () => {\n // TODO: Configure Initial Load of this\n // Component based on prior selected values\n // This will ensure that navigating the steps\n // doesn't lose data\n\n if (financials.paymentStatus === \"ACT\") {\n setPaymentOption(paymentOptions.MONTHLY_PAYMENT_AMOUNT);\n console.log(\"setting to act\");\n } else {\n setPaymentOption(paymentOptions.PAST_DUE_AMOUNT);\n }\n };\n\n initialPaymentOption();\n }, [financials.paymentStatus]);\n\n const paymentOptionChanged = (option: any) => {\n setPaymentOption(option);\n if (option === paymentOptions.CUSTOM_AMOUNT) {\n if (customAmount === undefined) {\n setNextButtonDisabled(true);\n } else if (customAmount < financials.minPaymentAllowed) {\n setNextButtonDisabled(true);\n } else if (customAmount > financials.payoffAmount) {\n setNextButtonDisabled(true);\n } else {\n setNextButtonDisabled(false);\n }\n } else {\n setNextButtonDisabled(false);\n }\n };\n\n const selectCustomAmount = (e: any) => {\n let value = e.target.value;\n if (value.length === 0) {\n setCustomAmount(0);\n setNextButtonDisabled(true);\n return;\n }\n if (value.length > 0) {\n value = value.replace(\"$\", \"\");\n value = value.replace(\",\", \"\");\n } else {\n setCustomAmount(0);\n }\n\n if (isNaN(value)) {\n setCustomAmount(0);\n return;\n }\n let parsedValue = parseFloat(value);\n // validate\n setCustomAmount(parsedValue);\n if (parsedValue < financials.minPaymentAllowed) {\n setNextButtonDisabled(true);\n } else if (parsedValue > financials.payoffAmount) {\n setNextButtonDisabled(true);\n } else {\n setNextButtonDisabled(false);\n }\n };\n\n const nextClicked = () => {\n // Get the Value Selected\n // Tell parent the amount selected\n // and that validation passed\n // so it can move on to the next step\n let valueSelected = 0;\n if (paymentOptionSelected === paymentOptions.PAST_DUE_AMOUNT) {\n valueSelected = financials.currentAmountPastDue;\n } else if (paymentOptionSelected === paymentOptions.PAYOFF_AMOUNT) {\n valueSelected = financials.payoffAmount;\n } else if (\n paymentOptionSelected === paymentOptions.MONTHLY_PAYMENT_AMOUNT\n ) {\n // Hardcoding until we get Apollo in here\n valueSelected = 80.0;\n } else {\n valueSelected = customAmount;\n }\n props.onNextClick(valueSelected);\n };\n\n const invalidCustomAmountSelectedIcon = () => {\n if (paymentOptionSelected === paymentOptions.CUSTOM_AMOUNT) {\n if (\n customAmount === undefined ||\n customAmount < financials.minPaymentAllowed ||\n customAmount > financials.payoffAmount\n ) {\n return \n
\n
\n
\n
\n \n \n paymentOptionChanged(paymentOptions.PAST_DUE_AMOUNT)\n }\n checked={\n paymentOptionSelected === paymentOptions.PAST_DUE_AMOUNT\n }\n />\n \n \n
\n \n
\n
\n );\n } else {\n return (\n \n
\n
\n
\n \n \n \n \n paymentOptionChanged(paymentOptions.MONTHLY_PAYMENT_AMOUNT)\n }\n checked={\n paymentOptionSelected ===\n paymentOptions.MONTHLY_PAYMENT_AMOUNT\n }\n />\n \n \n
\n \n
\n
\n );\n }\n };\n return (\n \n
\n
\n
\n \n \n \n \n \n
\n \n
\n {renderPastDueAmount()}\n \n \n
\n \n
\n\n \n \n
\n \n
\n \n nextClicked()}\n >\n Continue
\n );\n};\n\nexport default PaymentAmountWidget;\n","import React from \"react\";\nimport { IconProps } from \"./IconInterface\";\nimport img from \"../../../assets/images/hfdicons/Monthly Payment.svg\";\nimport selectedImage from \"../../../assets/images/hfdicons/Monthly Payment - Selected.svg\";\n\nconst HFDCalendarDollarSign = (props: IconProps) => {\n if (props.selected) {\n return (\n \n \n
\n \n \n \n paymentOptionChanged(paymentOptions.PAYOFF_AMOUNT)\n }\n />\n \n
\n \n \n
\n
\n
\n \n \n \n paymentOptionChanged(paymentOptions.CUSTOM_AMOUNT)\n }\n />\n \n
\n \n \n
\n
\n
\n \n \n 
\n
\n );\n }\n return (\n \n 
\n
\n );\n};\n\nexport default HFDCalendarDollarSign;\n","import React from \"react\";\nimport { IconProps } from \"./IconInterface\";\nimport img from \"../../../assets/images/hfdicons/Past Due.svg\";\n\nconst HFDPastDueWarning = (props: IconProps) => {\n return (\n \n \n
\n );\n};\n\nexport default HFDPastDueWarning;\n","import React from \"react\";\nimport { IconProps } from \"./IconInterface\";\nimport img from \"../../../assets/images/hfdicons/Payoff Amount.svg\";\nimport selectedImage from \"../../../assets/images/hfdicons/Payoff Amount - Selected.svg\";\n\nconst HFDCircleDollarSign = (props: IconProps) => {\n if (props.selected) {\n return (\n \n \n
\n );\n }\n return (\n \n \n
\n );\n};\n\nexport default HFDCircleDollarSign;\n","import React from \"react\";\nimport { IconProps } from \"./IconInterface\";\nimport img from \"../../../assets/images/hfdicons/Custom Amount.svg\";\nimport selectedImg from \"../../../assets/images/hfdicons/Custom Amount - Selected.svg\";\n\nconst HFDHoveringDollarBill = (props: IconProps) => {\n if (props.selected) {\n return (\n \n 
\n
\n );\n }\n return (\n \n \n
\n );\n};\n\nexport default HFDHoveringDollarBill;\n","import React from \"react\";\nimport { IconProps } from \"./IconInterface\";\nimport img from \"../../../assets/images/hfdicons/Action Button - Next.svg\";\nimport selectedImage from \"../../../assets/images/hfdicons/Action Button - Next.svg\";\n\nconst HFDActionButton = (props: IconProps) => {\n if (props.selected) {\n return (\n \n \n
\n );\n }\n return (\n \n \n
\n );\n};\n\nexport default HFDActionButton;\n","import React, { useEffect } from \"react\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { Col, Row } from \"react-bootstrap\";\nimport { useState } from \"react\";\nimport CurrencyInput from \"@hfd/ui/CurrencyInput/CurrencyInput\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\nimport HFDCalendarDollarSign from \"@hfd/ui/UI/HFDIcons/HFDCalendarDollarSign\";\nimport HFDPastDueWarning from \"@hfd/ui/UI/HFDIcons/HFDPastDueWarning\";\nimport HFDCircleDollarSign from \"@hfd/ui/UI/HFDIcons/HFDCircleDollarSign\";\nimport HFDHoveringDollarBill from \"@hfd/ui/UI/HFDIcons/HFDHoveringDollarBill\";\nimport HFDActionButton from \"@hfd/ui/UI/HFDIcons/HFDActionButton\";\n\nexport const paymentOptions = {\n PAST_DUE_AMOUNT: \"PAST_DUE_AMOUNT\",\n PAYOFF_AMOUNT: \"PAYOFF_AMOUNT\",\n CUSTOM_AMOUNT: \"CUSTOM_AMOUNT\",\n MONTHLY_PAYMENT_AMOUNT: \"MONTHLY_PAYMENT_AMOUNT\",\n};\n\nconst PaymentAmountWidgetMobile = (props: any) => {\n const financials = props.financials;\n const [customAmount, setCustomAmount] = useState(0);\n\n const [paymentOptionSelected, setPaymentOption] = useState(\n paymentOptions.PAST_DUE_AMOUNT\n );\n\n useEffect(() => {\n const initialPaymentOption = () => {\n // TODO: Configure Initial Load of this\n // Component based on prior selected values\n // This will ensure that navigating the steps\n // doesn't lose data\n if (!financials) {\n return;\n }\n if (financials.paymentStatus === \"ACT\") {\n setPaymentOption(paymentOptions.MONTHLY_PAYMENT_AMOUNT);\n } else {\n setPaymentOption(paymentOptions.PAST_DUE_AMOUNT);\n }\n };\n\n initialPaymentOption();\n }, [financials]);\n\n if (!financials) {\n console.log(\"no financials\");\n return ;\n }\n\n const paymentOptionChanged = (option: any) => {\n setPaymentOption(option);\n if (option === paymentOptions.CUSTOM_AMOUNT) {\n if (customAmount === undefined) {\n } else if (customAmount < financials.minPaymentAllowed) {\n } else if (customAmount > financials.payoffAmount) {\n } else {\n }\n } else {\n }\n };\n\n const selectCustomAmount = (e: any) => {\n let value = e.target.value;\n if (value.length === 0) {\n setCustomAmount(0);\n return;\n }\n if (value.length > 0) {\n value = value.replace(\"$\", \"\");\n value = value.replace(\",\", \"\");\n } else {\n setCustomAmount(0);\n }\n\n if (isNaN(value)) {\n setCustomAmount(0);\n return;\n }\n let parsedValue = parseFloat(value);\n // validate\n setCustomAmount(parsedValue);\n if (parsedValue < financials.minPaymentAllowed) {\n } else if (parsedValue > financials.payoffAmount) {\n console.log(financials.payoffAmount);\n setCustomAmount(financials.payoffAmount);\n } else {\n }\n };\n\n const nextClicked = () => {\n // Get the Value Selected\n // Tell parent the amount selected\n // and that validation passed\n // so it can move on to the next step\n let valueSelected = 0;\n if (paymentOptionSelected === paymentOptions.PAST_DUE_AMOUNT) {\n valueSelected = financials.currentAmountPastDue;\n } else if (paymentOptionSelected === paymentOptions.PAYOFF_AMOUNT) {\n valueSelected = financials.payoffAmount;\n } else if (\n paymentOptionSelected === paymentOptions.MONTHLY_PAYMENT_AMOUNT\n ) {\n // Hardcoding until we get Apollo in here\n valueSelected = financials.monthlyPaymentAmount;\n } else {\n valueSelected = customAmount;\n }\n props.onNextClick(valueSelected);\n props.showHeaderDetails();\n };\n\n const chooseCustomAmount = () => {\n props.hideHeaderDetails();\n };\n // const cancelChooseCustomAmount = () => {\n // props.showHeaderDetails();\n // };\n\n const invalidCustomAmountSelected = () => {\n if (paymentOptionSelected === paymentOptions.CUSTOM_AMOUNT) {\n if (customAmount < financials.minPaymentAllowed) {\n return (\n \n
\n
\n
\n \n \n paymentOptionChanged(paymentOptions.PAST_DUE_AMOUNT)\n }\n >\n
\n \n \n \n );\n } else {\n return (\n \n
\n \n
\n \n
\n \n \n {\" \"}\n
\n
\n Total Amount Due
\n\n {\" \"}\n
\n \n Includes past due amount plus additional fees balance. This\n ensures no additional fees will be applied to your account.\n
\n \n
\n nextClicked()}>\n
\n \n \n \n paymentOptionChanged(paymentOptions.MONTHLY_PAYMENT_AMOUNT)\n }\n >\n
\n \n \n \n );\n }\n };\n\n if (props.choosingCustomAmount) {\n return (\n \n
\n \n
\n \n
\n \n \n {\" \"}\n
\n
\n Monthly Payment
\n\n {\" \"}\n
\n \n The monthly payment amount will be applied to your principal\n balance.\n
\n \n
\n nextClicked()}>\n
\n \n \n
\n \n \n paymentOptionChanged(paymentOptions.CUSTOM_AMOUNT)\n }\n >\n
\n \n
\n \n
\n \n
\n \n
\n Enter Custom Amount
\n\n
\n \n 0 ? \"next-button\" : \"hideme\"}\n onClick={() => nextClicked()}\n >\n
\n \n {paymentOptionSelected === paymentOptions.CUSTOM_AMOUNT && (\n <>\n \n {invalidCustomAmountSelected()}\n \n \n )}\n
\n \n \n \n \n );\n }\n\n return (\n \n
\n \n \n \n \n \n );\n};\n\nexport default PaymentAmountWidgetMobile;\n","import React from \"react\";\nimport discoverLogo from \"../../assets/images/Wallet/discovercolor.svg\";\n\nconst DiscoverLogo = () => {\n return \n {renderPastDueAmount()}\n
\n \n \n \n paymentOptionChanged(paymentOptions.PAYOFF_AMOUNT)\n }\n >\n
\n \n \n \n
\n \n
\n \n
\n \n \n {\" \"}\n
\n
\n Payoff Amount
\n\n {\" \"}\n
\n \n The total amount necessary to pay off your account,\n including principal and accured interest to date.\n
\n \n
\n nextClicked()}>\n
\n \n \n \n paymentOptionChanged(paymentOptions.CUSTOM_AMOUNT)\n }\n >\n
\n \n
\n \n
\n \n
\n \n
\n Custom Amount
\n\n Specify the exact amount you want to pay. If your account is\n late and the amount does not bring the amount current, you\n may still be subject to a late fee.\n
\n \n chooseCustomAmount()}\n >\n
\n {cardType}
;\n }\n };\n\n const toggleExpandedCards = () => {\n setCardsExpanded(!cardsExpanded);\n };\n\n const nextClicked = () => {\n props.onNextClick(cards[selectedCardIndex]);\n };\n\n const ActiveCards = () => {\n return cards.map((card: any, index: number) => {\n let cardType = getCardType(card.cardNumber);\n if (!cardsExpanded && index > 2) {\n return ;\n }\n return (\n {getCardLogo(cardType)}
\n \n {card.cardName}\n \n **** **** ****{\" \"}\n {card.cardNumber.substring(card.cardNumber.length - 4)}\n \n Exp 02/25\n
\n {card.priority === 1 && (\n Primary
\n )}\n \n \n \n \n \n \n
\n \n
\n {ActiveCards()}\n {cards.length > 2 && (\n \n \n
\n )}\n\n \n\n
\n );\n};\n\nexport default PaymentMethodWidget;\n","import React from \"react\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { Button, Card, Col, Row } from \"react-bootstrap\";\nimport Moment from \"react-moment\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheckCircle } from \"@fortawesome/free-solid-svg-icons\";\nimport { getCardType } from \"@hfd/lib/helpers/cardUtilities\";\nimport VisaLogo from \"@hfd/components/Wallet/VisaLogo\";\nimport AmexLogo from \"@hfd/components/Wallet/AmexLogo\";\nimport DiscoverLogo from \"@hfd/components/Wallet/DiscoverLogo\";\nimport MasterCardLogo from \"@hfd/components/Wallet/MasterCardLogo\";\n\nconst PaymentConfirmationWidget = (props: any) => {\n const SpecificPaymentMessage = () => {\n if (props.paymentStatus === \"ACT\") {\n return (\n \n
\n \n \n
\n \n \n
\n \n
\n \n \n props.onBackClick()}\n >\n
\n \n
\n );\n }\n if (props.amountPastDue < props.paymentAmountSelected) {\n return (\n \n
\n );\n } else {\n return (\n \n
\n );\n }\n };\n\n const getCardLogo = () => {\n let cardType = getCardType(props.selectedCard.cardNumber);\n switch (cardType) {\n case \"VISA\":\n return {cardType}
;\n }\n };\n\n return (\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default PaymentConfirmationWidget;\n","import React from \"react\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\n// @ts-ignore\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faPlus } from \"@fortawesome/free-solid-svg-icons\";\nimport HFDBarLogo from \"@hfd/components/utility/HFDBarLoader\";\nimport HFDActionButton from \"@hfd/ui/UI/HFDIcons/HFDActionButton\";\nimport WalletCard from \"@hfd/components/Wallet/WalletCard\";\n\nconst PaymentMethodWidgetMobile = (props: any) => {\n console.log(\"Payment Method Widget Mobile\");\n const walletLoading = false;\n const cards = [\n {\n cardNumber: \"4111111111111111\",\n cardName: \"My Primary Card\",\n isPrimary: true,\n priority: 1,\n cardId: 1,\n expiration: \"04/25\",\n },\n {\n cardNumber: \"5111111111111111\",\n cardName: \"My Secondary Card\",\n isPrimary: false,\n priority: 2,\n cardId: 2,\n expiration: \"01/22\",\n },\n {\n cardNumber: \"347111111111111\",\n cardName: \"My Amex Card\",\n isPrimary: false,\n priority: 3,\n cardId: 3,\n expiration: \"10/24\",\n },\n {\n cardNumber: \"6011000000000004\",\n cardName: \"My Discover Card\",\n isPrimary: false,\n priority: 3,\n cardId: 4,\n expiration: \"10/24\",\n },\n ];\n\n const nextClicked = () => {\n props.onNextClick(cards[0]);\n };\n\n const AllCards = () => {\n console.log(cards);\n return cards.map((card: any, index: number) => {\n return (\n // \n \n
\n \n \n
\n \n \n \n
\n \n \n ${props.paymentAmountSelected}\n \n \n
\n \n
\n \n \n \n
\n \n \n {getCardLogo()}{\" \"}\n
\n \n
\n \n \n \n
\n \n \n {new Date()} \n \n \n
\n \n props.processPayment(true)}\n >\n Process Payment Success\n \n props.processPayment(false)}\n >\n Process Payment Fail\n \n props.onBackClick()}\n >\n
\n \n //
\n // {getCardLogo(cardType)}
\n // {card.priority === 1 && (\n // Primary
\n // )}\n // \n // {card.cardName}\n // \n // **** **** ****{\" \"}\n // {card.cardNumber.substring(card.cardNumber.length - 4)}\n // \n // {card.expiration}\n //
\n // \n // \n //
\n // nextClicked()}>\n //
\n // \n
\n nextClicked()}>\n
\n \n
\n );\n};\n\nexport default PaymentMethodWidgetMobile;\n","import React from \"react\";\nimport { Row, Col, Button } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheckCircle } from \"@fortawesome/free-regular-svg-icons\";\n\nimport VisaLogo from \"@hfd/components/Wallet/VisaLogo\";\nimport MasterCardLogo from \"@hfd/components/Wallet/MasterCardLogo\";\nimport AmexLogo from \"@hfd/components/Wallet/AmexLogo\";\n\nconst CheckName = (props: any) => {\n return (\n <>\n \n
\n\n {/* - {AllCards()}
\n
\n \n
\n \n \n props.onBackClick()}\n >\n
*/}\n \n
\n \n \n
\n \n
\n $80.00
\n\n \n
\n \n
\n\n \n {displayCardLogo(\"VISA\")}
\n Ending in 7777
\n Sept 7th, 2020
\n\n \n
\n \n
\n \n \n
\n
\n \n
\n \n
\n
\n \n
\n \n );\n } else {\n return (\n <>\n - \n
- \n \n
\n \n Mikasa Ackerman\n \n - \n \n
\n \n 3085598\n \n - \n \n
\n \n Dec 19th, 2021\n \n - \n \n
\n \n $80\n \n - \n \n
\n \n Amex ending in 7777\n \n
\n
\n \n \n
\n \n
\n
\n \n );\n }\n };\n\n return (\n <>\n \n
\n \n
\n \n
\n \n
\n
\n
- \n {props.steps.map((step: StepProps, index: number) => {\n return (\n
{step.stepName}
\n \n );\n })}\n \n
\n );\n } else if (financials.paymentStatus === \"PCOL\") {\n return (\n \n
\n );\n } else {\n return (\n \n
\n );\n }\n };\n\n return (\n \n
\n \n
\n \n );\n};\n\nexport default PaymentStatusWidget;\n","import React from \"react\";\nimport { Col, Container, Row } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport StepBarNavigator from \"@hfd/ui/StepBarNavigator/StepBarNavigator\";\nimport PaymentStatusWidget from \"./Components/PaymentStatusWidget\";\n\nconst PaymentDesktop = ({\n financials,\n getPaymentSteps,\n getCurrentStep,\n}: any) => {\n return (\n - \n {financials.paymentStatus !== \"ACT\" && (\n <>\n
- \n Past Due Amount\n \n $\n
- \n Additional Fees\n \n {\" \"}\n
- \n Total Amount Due\n \n {\" \"}\n
- \n Total Amount Due\n \n $\n
- \n Next Payment Due\n Jan 15th\n \n
- \n Monthly Payment\n \n
\n \n \n \n - \n Amount Financed\n \n $\n
- \n Paid To Date\n \n $\n
- \n Total Payoff Amount\n \n $\n
- \n Principal Balance\n \n $\n
- \n Payments Remaining\n 9\n \n
- \n Estimated Payoff Date\n 07/15/2021\n \n
\n
\n \n
\n
\n
\n \n )}\n \n
\n Step 1: Select Amount to Pay\n
\n );\n case 1:\n return (\n \n Step 2: Select Payment\n Method\n
\n );\n case 2:\n return (\n \n Step 3: Confirm & Submit\n Payment\n
\n );\n default:\n return Hello
;\n }\n };\n\n let history = useHistory();\n const goHome = () => {\n history.push(\"/user/dashboard\");\n };\n\n const backButtonClicked = () => {\n console.log(\"Back Clicked\");\n if (currentStep === 0 && choosingCustomAmount) {\n setChoosingCustomAmount(false);\n } else if (currentStep === 0) {\n goHome();\n } else if (currentStep === 1) {\n setCurrentStep(0);\n } else if (currentStep === 2) {\n setCurrentStep(1);\n } else if (currentStep === 3) {\n setCurrentStep(2);\n }\n };\n\n if (loading) {\n return Loading
;\n }\n\n if (paymentResults) {\n return (\n \n
\n \n );\n};\n\nexport default PaymentScheduleEntry;\n","import React from \"react\";\nimport { Link } from \"react-router-dom\";\nimport Button from \"@hfd/components/Button/HfdButton\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faExclamationTriangle } from \"@fortawesome/free-solid-svg-icons\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\n\nconst PaymentStatusAlert = ({ financials }: any) => {\n if (financials.paymentStatus === \"ACT\") {\n return (\n \n {props.index === 0 && (\n
\n \n
\n )}\n {props.index !== 0 && (\n \n
\n \n
\n )}\n \n
\n \n \n
\n \n {props.index === 0 ? (\n
\n Scheduled
\n ) : (\nAutomatic Payment
\n )}\n\n
\n
\n );\n } else if (financials.paymentStatus === \"PCOL\") {\n return (\n \n
\n \n \n \n Your account is current!
\n\n
\n );\n } else {\n return (\n \n
\n \n \n \n \n Your account is{\" \"}\n
\n
\n );\n }\n};\n\nexport default PaymentStatusAlert;\n","import React from \"react\";\nimport { Card } from \"react-bootstrap\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faDownload } from \"@fortawesome/free-solid-svg-icons\";\n\nconst PaymentDocument = () => {\n return (\n \n
\n \n \n \n \n Your account is{\" \"}\n
\n
\n Documents
\n\n
\n Credit Report
\n \n
\n \n
\n Installment Agreement
\n \n
\n \n {data.localAppState.isMobile ? (\n
\n Payment Plan Summary
\n ) : (\n <>\n{financials.paymentPlanName}
\nPlan ID: {user.applicationId}
\n \n )}\n\n
\n Payment Plan Summary
\n\n\n
\n Total Amount Financed
\n \n
\n \n
\n Monthly Payment Amount
\n \n
\n \n
\n Count of Payments
\n \n {financials.amortizationActivity.length}\n
\n \n
\n Principal Amount
\n $1600.00
\n \n
\n Finance Charge
\n \n {\" \"}\n
\n \n
\n Day of Month For Payment
\n \n
\n {financials.paymentPlanName}
\n{user.applicationId}
\n \n\n
Payment Schedule
\n \nPayment Activity
\n \n{financials.paymentPlanName}
\n{user.applicationId}
\n \nView Documents
\n \n{financials.paymentPlanName}
\n{user.applicationId}
\n \n\n
\n \n Credit Report
\n \n
\n \n
\n \n Installment Agreement
\n \n
\n Edit Plan
\n \n{financials.paymentPlanName}
\n{user.applicationId}
\n \n\n
\n \n Reduce Term
\n \n
\n \n Change Payment Date
\n \n
\n \n Request Cancellation
\n \n
\n \n Change Plan Name
\n \n
\n \n Contact Us
\n \n \n {props.as ? props.children : null}\n \n \n
\n );\n };\n\n const renderDefaultView = () => {\n return (\n \n \n
\n );\n };\n\n return props.textEditable.isInEditMode\n ? renderEditView()\n : renderDefaultView();\n};\n\nexport default HFDInputEditable;\n","import React from \"react\";\nimport \"./Ellipsis.css\";\n\nconst Ellipsis = () => {\n return (\n <>\n .\n .\n .\n \n );\n};\n\nexport default Ellipsis;\n","import React, { MouseEventHandler, useState } from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport Card from \"@hfd/components/utility/card\";\nimport HFDInputEditable from \"@hfd/components/InputEditable/HFDInputEditable\";\nimport EllipsisLoading from \"@hfd/components/EllipsisLoading/Ellipsis\";\n\ninterface IProps {\n handleDrawer: MouseEventHandler;\n isDrawerOpen: Boolean;\n userInfo: any;\n}\n\nconst ProfileBasicInfo = ({ handleDrawer, isDrawerOpen, userInfo }: IProps) => {\n // const [phoneNumber, setPhoneNumber] = useState({\n // value: \"(661) 343-1254\",\n // isInEditMode: false,\n // });\n\n const [language, setLanguage] = useState({\n value: \"English\",\n isInEditMode: false,\n });\n\n // const changePhoneEditMode = () => {\n // setPhoneNumber((prevState) => ({\n // ...prevState,\n // isInEditMode: !prevState.isInEditMode,\n // }));\n // };\n\n const changeLangEditMode = () => {\n setLanguage((prevState) => ({\n ...prevState,\n isInEditMode: !prevState.isInEditMode,\n }));\n };\n\n return (\n \n {props.type === \"password\" ? \"*******\" : props.textEditable.value}\n
\n\n
{userInfo.firstName}
\n \n\n
{userInfo.lastName}
\n \n\n
{userInfo.email}
\n \n\n
\n
\n
\n Updating
onToggleChange(evt)}>\n {}}\n />\n \n
\n );\n};\n\nexport default ToggleSwitch;\n","import React, { useState } from \"react\";\nimport { Row, Col } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport Card from \"@hfd/components/utility/card\";\nimport ToggleSwitch from \"@hfd/components/ToggleSwitch/ToggleSwitch\";\n\nconst ProfileNotificationPreferences = () => {\n const [toggleSwitch, setToggle] = useState(false);\n\n const onToggleChange = () => {\n setToggle((prevState) => !prevState);\n };\n\n return (\n \n
\n
\n );\n};\n\nexport default ProfilePasswordError;\n","import React, { useState } from \"react\";\nimport { Form } from \"react-bootstrap\";\nimport { Formik } from \"formik\";\nimport Navigation from \"@hfd/components/Navigation/Navigation\";\n\nimport ProfilePasswordError from \"./ProfilePassworError\";\nimport { history } from \"../../../../router\";\n\nconst ProfileNewPasswordPage = () => {\n const [isEmailValid, setEmail] = useState(false);\n const [isPasswordValid, setPassword] = useState(false);\n const [errors, setErrors] = useState(\"\");\n\n const doSubmit = async ({ values }: any) => {\n setErrors(\"\");\n if (!isEmailValid || !isPasswordValid) {\n return setErrors(\"Oops! Invalid Email or Password.\");\n }\n\n if (errors.length === 0) {\n return history.push(\"/user/dashboard\");\n }\n };\n\n return (\n <>\n {errorMessage}
\n\n
\n \n );\n};\n\nexport default ProfileNewPasswordPage;\n","import React, { useState } from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport Title from \"@hfd/components/utility/pageTitle\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\n\nimport ProfileBasicInfo from \"./Components/ProfileBasicInfo\";\nimport ProfileNotificationPreferences from \"./Components/ProfileNotifiicationPreferences\";\nimport ProfileNewPasswordForm from \"./Components/ProfileNewPasswordForm\";\n\nimport \"./scss/Profile.css\";\nimport MobileNavBar from \"../../../components/mobile/MobileNavBar\";\nimport Card from \"@hfd/components/utility/card\";\n\nconst ProfileMobile = ({ user, backButtonClicked }: any) => {\n const [isPasswordDrawerOpen, setPasswordDrawer] = useState(false);\n const [hasNewPassword, setHasNewPassword] = useState(false);\n const handleDrawer = () => {\n setPasswordDrawer((prevState) => !prevState);\n };\n console.log(setHasNewPassword);\n if (hasNewPassword) {\n return \n
\n \n
\n \n
\n\n Password Updated
\n\n
\n \n
\n \n
\n You have a new password!
\n\n
\n\n In order to continue, please enter your new credentials
\n\n {\n !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i.test(\n values.email\n )\n ? setEmail(false)\n : setEmail(true);\n values.password === \"test123\"\n ? setPassword(true)\n : setPassword(false);\n }}\n onSubmit={async (values, { resetForm }) => {\n setErrors(\"\");\n await doSubmit(values);\n }}\n >\n {({ values, handleSubmit, handleChange }) => (\n \n )}\n \n
\n Your new password must have:
\n\n
\n \n
\n ) : (\n \n
\n \n );\n};\n\nexport default SlideOutSidebar;\n","import React, { useState } from \"react\";\nimport { Container, Row, Col } from \"react-bootstrap\";\nimport Title from \"@hfd/components/utility/pageTitle\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\n\nimport ProfileBasicInfo from \"./Components/ProfileBasicInfo\";\nimport ProfileNotificationPreferences from \"./Components/ProfileNotifiicationPreferences\";\nimport ProfileUpdatePassword from \"./Components/ProfileUpdatePassword\";\nimport ProfileNewPasswordForm from \"./Components/ProfileNewPasswordForm\";\nimport SlideOutSidebar from \"@hfd/components/SlideOutSidebar/SlideOutSidebar\";\n\nimport \"./scss/Profile.css\";\n\n\nconst ProfileDesktop = ({ user }:any) => {\n const [isPasswordDrawerOpen, setPasswordDrawer] = useState(false);\n const [hasNewPassword, setHasNewPassword] = useState(false);\n\n const handleDrawer = () => {\n setPasswordDrawer((prevState) => !prevState);\n };\n\n if (hasNewPassword) {\n return \n
\n {children}\n \n
\n Update Password
\n\n \n
\n Test
;\n};\n\nexport default TestDemo;\n","import React, { Suspense, useState, useEffect } from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport { Redirect } from 'react-router';\nimport Loader from '@hfd/components/utility/loader';\nimport Wallet from '../Pages/Wallet/Wallet';\nimport Settings from '../Pages/Settings/Settings';\nimport Dashboard from './Dashboard';\nimport Payment from '../Pages/Payment/Payment';\nimport PaymentPlan from '../Pages/PaymentPlan/PaymentPlan';\nimport PaymentPlanActivity from '../Pages/PaymentPlan/Components/PaymentPlanAcitivityMobile';\nimport PaymentPlanDocument from '../Pages/PaymentPlan/Components/PaymentDocumentMobile';\nimport PaymentPlanEdit from '../Pages/PaymentPlan/Components/PaymentEditPlanMobile';\nimport Profile from '../Pages/Profile/Profile';\nimport TestDemo from '../TestDemoPage/TestDemo';\nimport { useAuthDataContext } from '../../authProvider';\n\nexport default function AppRouter() {\n const user = useAuthDataContext();\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n async function checkMyAuthStatus() {\n setLoading(false);\n }\n\n checkMyAuthStatus();\n }, []);\n\n if (loading) {\n return Loading
;\n }\n\n if (!user) {\n return (\n Loading
;\n }\n\n if (data.localAppState.isMobile) {\n return (\n <>\n \n
\n
\n );\n};\n\nexport default OTPMobileNavBar;\n","import React from \"react\";\nimport { Col, Container, Row } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport StepBarNavigator from \"@hfd/ui/StepBarNavigator/StepBarNavigator\";\nimport OTPMobileNavBar from \"../../../components/mobile/OTPMobileNavBar\";\n\nimport \"./scss/OneTimePaymentMobile.css\";\n\nconst OneTimePaymentMobile = ({\n getPaymentSteps,\n getMobileStepText,\n currentStep,\n getCurrentStep,\n cancelClicked\n}: any) => {\n return (\n <>\n \n \n
\n \n \n
\n\n \n \n
\n \n )}\n \n
\n
\n );\n};\n\nexport default OTPSingleNavBar;\n","import React from \"react\";\nimport {Card, Row, Col, Container} from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\n\nconst OneTimePaymentInfo = (props: any) => {\n return (\n \n ![\"HFD](\"https://global-content-cf.s3.us-west-2.amazonaws.com/Logos/Web_Logos/PNG/HFD-Logo-Full-white.png\")
\n
\n \n \n
\n
\n
\n
\n
\n
\n
{props.footer.content}
)\n }else{\n return ({props.footer.content}
);\n }\n }\n };\n\n return (\n \n \n
\n
\n {isActive && \n {props.status === \"current\" ? (\n
{props.children}
}\n {renderFooter()}\n \n Special promotional offer
no interest if {formattedAmount[0]}\n .{formattedAmount[1]}\n {user.promotionFees > 0 && (\n <>\n {\" + \"}\n {formattedFees[0]}\n .{formattedFees[1]}\n {\" fee(s) \"}\n \n )}\n paid in full by{\" \"}\n{user.promotionPlanDate} \n
\n \n * Please allow 48 hours for your payment to be\n
\n processed and your account to be updated.\n \n
\n );\n } else {\n return <>;\n }\n}\n\nfunction formatAmount(amount: number) {\n return new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n })\n .format(amount)\n .split(\".\");\n}\n\nexport default OneTimePaymentPromoBanner;\n","export function currencyFormatter(value, options = {}) {\n if (value === null || value === undefined || isNaN(value)) return null;\n return new Intl.NumberFormat('en-US', {\n style: 'decimal',\n currency: 'USD',\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n ...options,\n }).format(value);\n}\n","import { useQuery } from \"@apollo/react-hooks\";\nimport HfdDropdownCard from \"@hfd/components/DropdownCard/HfdDropdownCard\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport OrdinalSuffix from \"@hfd/components/utility/OrdinalSuffix\";\nimport React, { useEffect, useState } from \"react\";\nimport { useAuthDataContext } from \"../../../../authProvider\";\nimport { LOCAL_APP_STATE } from \"../../../../localState/queries\";\nimport OneTimePaymentPromoBanner from \"./OneTimePaymentPromoBanner\";\nimport { currencyFormatter } from \"../../../../helpers/utility\";\n\nconst OneTimePaymentAccountDetails = (props: any) => {\n const { user } = useAuthDataContext();\n const { data } = useQuery(LOCAL_APP_STATE);\n const [paymentStatus, setPaymentStatus] = useState('current');\n const [isActive] = useState(!!(props.isDashboard));\n\n useEffect(() => {\n switch (user.paymentStatus) {\n case 'PCOL': setPaymentStatus('pastDueRed'); break;\n case 'DEL': setPaymentStatus('pastDueRed'); break;\n case 'LATE': setPaymentStatus('pastDueOrange'); break;\n }\n }, [user.paymentStatus]);\n\n if (!user) {\n props.cancel();\n return <>;\n }\n\n const renderPaymentStatus = () => {\n switch (paymentStatus) {\n case 'current': return (no interest if {formattedAmount[0]}\n .{formattedAmount[1]}\n {user.promotionFees > 0 && (\n <>\n {\" + \"}\n {formattedFees[0]}\n .{formattedFees[1]}\n {\" fee(s) \"}\n \n )}\n paid in full by{\" \"}\n
\n \n * Please allow 48 hours for your payment to be\n
\n processed and your account to be updated.\n \n
\n
\n );\n }\n else if (parseFloat(data.localAppState.userData.paymentAmount) > parseFloat(user.amountFinanced)) {\n return (\n \n
\n );\n }\n else if (!isNaN(user.oneTimePaymentLimit) && \n parseFloat(data.localAppState.userData.paymentAmount) > parseFloat(user.oneTimePaymentLimit)) {\n return (\n \n
\n );\n }\n else {\n return ( <> );\n }\n };\n\n return (\n \n
\n
\n
\n \n );\n};\n\nexport default OneTimePaymentAccountDetails;\n","import React from \"react\";\nimport { Col, Container, Row } from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport StepBarNavigator from \"@hfd/ui/StepBarNavigator/StepBarNavigator\";\n\nimport \"./scss/OneTimePaymentDesktop.css\";\nimport OTPSingleNavBar from \"../../../components/desktop/OTPSingleNavBar\";\nimport Card from \"react-bootstrap/Card\";\nimport OneTimePaymentInfo from \"./components/OneTimePaymentInfo\";\nimport OneTimePaymentAccountDetails from \"./components/OneTimePaymentAccountDetails\";\n\nconst OneTimePaymentDesktop = ({\n getPaymentSteps,\n getMobileStepText,\n currentStep,\n getCurrentStep,\n cancelClicked,\n}: any) => {\n return (\n - \n
- \n \n {renderPaymentStatus()}\n \n \n
\n
- \n
- \n
{\" \"}\n \n \n {(user.dayOfPayment) > 0 && - \n
{\" \"}\n \n }\n {(user.monthlyPayment > 0) && - \n
{\" \"}\n \n }\n
\n
- \n
- \n
{\" \"}\n \n \n - \n
{\" \"}\n \n \n - \n
{user.paymentsRemaining}\n \n
\n
\n \n \n )}\n {getMobileStepText()}
\n \n )}\n\n
\n
\n
\n )}\n {currentStep !== 0 ? null : (\n \n
\n
\n
\n );\n};\n\nexport default ErrorDisplay;\n","import axios from 'axios';\nimport { Config } from '../ClientConfig';\n\ninterface BinValidation {\n\tvalid: boolean;\n\tmessage: string;\n}\n\nconst serviceUrl = `${Config.Integrations.StandardizedAPI}payment`;\n\nclass ClientApiService {\n\n\tvalidateCardBin = async (appId: string, cardNumber: string): Promise{errorMessage}
\n\n
\n
\n ) : (\n \n
\n
\n
\n );\n};\n\nexport default OneTimePaymentMethodMobile;\n","import React, { useState } from \"react\";\nimport HFDBarLoader from \"@hfd/components/utility/HFDBarLoader\";\nimport OneTimePaymentCreditCardForm from \"./OneTimePaymentCreditCardForm\";\n\nconst OneTimePaymentMethodDesktop = (props: any) => {\n const [isSubmitting, setSubmitting] = useState(false);\n\n return isSubmitting ? (\n \n
\n
\n\n \n
\n
\n ) : (\n \n
\n
\n
\n );\n};\n\nexport default OneTimePaymentMethodDesktop;\n","import React, {useEffect, useState} from \"react\";\nimport {useQuery, useMutation} from \"@apollo/react-hooks\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport {Row, Col, Form, Button} from \"react-bootstrap\";\nimport ErrorDisplay from \"@hfd/components/ErrorDisplay/ErrorDisplay\";\nimport {Formik} from \"formik\";\nimport {\n LOCAL_APP_STATE,\n UPDATE_CARDADDRESSONE,\n UPDATE_CARDADDRESSTWO,\n UPDATE_CARDCITY,\n UPDATE_CARDSTATE,\n UPDATE_CARDCOUNTRY,\n UPDATE_CARDZIP,\n} from \"../../../../localState/queries\";\n\nconst OneTimePaymentAddressForm = (props: any) => {\n const {data} = useQuery(LOCAL_APP_STATE);\n const [updateCardAddressOne] = useMutation(UPDATE_CARDADDRESSONE);\n const [updateCardAddressTwo] = useMutation(UPDATE_CARDADDRESSTWO);\n const [updateCardCity] = useMutation(UPDATE_CARDCITY);\n const [updateCardState] = useMutation(UPDATE_CARDSTATE);\n const [updateCardCountry] = useMutation(UPDATE_CARDCOUNTRY);\n const [updateCardZip] = useMutation(UPDATE_CARDZIP);\n const {setSubmitting, continueClicked} = props;\n\n const [isAddressOneValid, setAddressOneValid] = useState(false);\n const [isAddressTwoValid, setAddressTwoValid] = useState(false);\n const [isCardCityValid, setCardCityValid] = useState(false);\n const [isCardStateValid, setCardStateValid] = useState(false);\n const [isCardCountryValid, setCardCountryValid] = useState(false);\n const [isCardZipValid, setCardZipValid] = useState(false);\n const [errors, setErrors] = useState(\"\");\n const zipregex = /\\d{5}/g;\n\n const sleep = (ms: Number) => new Promise((r) => setTimeout(r, ms));\n\n useEffect(() => {\n const {street, city, statoid, countryCode, zip} = data.localAppState.userData.address;\n if (street) {\n validateAddressOne(street);\n }\n\n if (city) {\n validateCity(city);\n }\n\n if (statoid) {\n validateState(statoid);\n }\n\n if (countryCode) {\n validateCountry(countryCode);\n }\n\n if (zip) {\n validateZip(zip);\n }\n // eslint-disable-next-line\n }, [data]);\n\n const doSubmit = async ({values}: any) => {\n setErrors(\"\");\n if (\n !isAddressOneValid ||\n !isCardCityValid ||\n !isCardStateValid ||\n !isCardCountryValid ||\n !isCardZipValid\n ) {\n return setErrors(\"Oops! Missing/Invalid Required fields.\");\n }\n\n setSubmitting(true);\n\n await sleep(500);\n setSubmitting(false);\n continueClicked();\n };\n\n const validateAddressOne = (sc: string) => {\n setAddressOneValid(sc.length > 0);\n };\n\n const validateAddressTwo = (sc: string) => {\n setAddressTwoValid(sc.length > 0);\n };\n\n const validateCity = (sc: string) => {\n setCardCityValid(sc.length > 0);\n };\n\n const validateState = (sc: string) => {\n setCardStateValid(sc.length > 0);\n };\n\n const validateCountry = (sc: string) => {\n setCardCountryValid(sc.length > 0);\n };\n\n const validateZip = (zipcode: string) => {\n if (zipcode.length > 5) zipcode = zipcode.substring(0, 5);\n const isValid = zipregex.test(zipcode);\n\n setCardZipValid(isValid);\n };\n\n const handleAddressOne = (\n ev: React.ChangeEvent\n
\n
\n\n
\n ) : (\n <>\n \n
\n
\n \n \n
\n \n
\n - \n
- \n \n
\n \n ${data.localAppState.userData.paymentAmount}\n \n
\n
\n\n
\n ) : (\n <>\n \n
\n
\n
\n - \n
- \n
\n \n
\n
\n
\n \n \n \n
\n \n \n
\n \n
\n\n
\n ) : (\n <>\n \n
\n
\n\n \n \n
\n \n \n
\n\n \n \n \n \n \n
\n \n
\n\n \n \n \n \n \n \n
\n \n \n \n \n \n
\n\n \n \n );\n};\n\nexport default OneTimePaymentConfirmMobile;\n","import React from \"react\";\nimport {useQuery} from \"@apollo/react-hooks\";\nimport {Row, Col, Button} from \"react-bootstrap\";\nimport Moment from \"react-moment\";\nimport FormattedCcNumber from \"@hfd/components/utility/FormattedCcNumber\";\nimport CcLogo from \"@hfd/components/utility/CcLogo\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport {LOCAL_APP_STATE} from \"../../../../localState/queries\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\nimport HFDBarLoader from \"@hfd/components/utility/HFDBarLoader\";\n\nconst OneTimePaymentConfirmMobile = (props: any) => {\n const {data} = useQuery(LOCAL_APP_STATE);\n\n const CheckName = (props: any) => {\n return (\n <>\n {new Date()} ;\n };\n\n return (props.isSubmitting) ? (\n
\n\n \n \n \n \n {props.children} \n \n \n \n \n );\n};\n","import React from \"react\";\nimport Root from \"./root\";\nimport Routes from \"./router\";\nimport \"devextreme/dist/css/dx.common.css\";\nimport \"devextreme/dist/css/dx.light.css\";\n\ndeclare global {\n namespace JSX {\n interface IntrinsicElements {\n \"ion-icon\": any;\n }\n }\n}\n\nconst App = () => (\n \n <>\n \n);\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === \"localhost\" ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === \"[::1]\" ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config: any) {\n if (process.env.NODE_ENV === \"production\" && \"serviceWorker\" in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener(\"load\", () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n \"This web app is being served cache-first by a service \" +\n \"worker. To learn more, visit https://bit.ly/CRA-PWA\"\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: any, config: any) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === \"installed\") {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n \"New content is available and will be used when all \" +\n \"tabs for this page are closed. See https://bit.ly/CRA-PWA.\"\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log(\"Content is cached for offline use.\");\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error(\"Error during service worker registration:\", error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: any, config: any) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get(\"content-type\");\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf(\"javascript\") === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n \"No internet connection found. App is running in offline mode.\"\n );\n });\n}\n\nexport function unregister() {\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister();\n });\n }\n}\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./app\";\nimport * as serviceWorker from \"./serviceWorker\";\n\nReactDOM.render(
{renderDate()}
\n\n \n \n
\n \n
\n \n \n \n
\n \n \n
\n \n
\n\n
\n ) : (\n <>\n \n
\n
\n \n
\n\n \n
\n \n \n \n \n \n ,\n setFieldValue: any\n ) => {\n let appId = ev.target.value;\n const isValid = appIdRegex.test(appId);\n setAppIdValid(isValid);\n\n setFieldValue(\"applicationId\", appId, true);\n\n setApplicationId({\n variables: { applicationId: appId },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n };\n\n const handleZipcode = (\n ev: React.ChangeEvent,\n setFieldValue: any\n ) => {\n let zipcode = ev.target.value;\n if (zipcode.length > 5) zipcode = zipcode.substring(0, 5);\n const isValid = zipregex.test(zipcode);\n setZipcodeValid(isValid);\n\n setFieldValue(\"zipcode\", zipcode, true);\n\n setUserZip({\n variables: { zipCode: zipcode },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n };\n\n const doSubmit = (values: any) => {\n props.setErrors(\"\");\n if (!isAppIdValid || !isZipcodeValid) {\n return props.setErrors(\"Oops! Missing/Invalid Required fields.\");\n }\n\n props.submitClicked(values);\n };\n\n const handleCancel = () => {\n resetModel({\n variables: {},\n refetchQueries: [{query: LOCAL_APP_STATE}]\n });\n\n window.location.href = Config.Integrations.CustomerPortalUrl;\n };\n\n const openAppId = () => {\n const { handleOpenAppId } = props;\n handleOpenAppId();\n };\n\n return (\n {}}\n onSubmit={async (values, { resetForm }) => {\n props.setErrors(\"\");\n await doSubmit(values);\n }}\n >\n {({ values, handleSubmit, handleChange, setFieldValue }) => (\n \n )}\n \n );\n};\n\nexport default OneTimePaymentLoginForm;\n","import React from \"react\";\nimport HFDBarLoader from \"@hfd/components/utility/HFDBarLoader\";\nimport OneTimePaymentInfo from \"./OneTimePaymentInfo\";\nimport OneTimePaymentLoginForm from \"./OneTimePaymentLoginForm\";\n\nconst OneTimePaymentAccountDetailsMobile = (props: any) => {\n return props.isSubmitting || props.isBypassing ? (\n
\n
\n\n \n \n ),\n completed: currentStep > 0,\n isActive: true,\n onActivateStep: activateStep,\n enabled: currentStep > 0,\n isCurrentStep: currentStep === 0,\n },\n {\n step: 1,\n stepName: ,\n completed: currentStep > 1,\n isActive: true,\n onActivateStep: activateStep,\n enabled: currentStep > 1,\n isCurrentStep: currentStep === 1,\n },\n {\n step: 2,\n stepName: ,\n completed: currentStep > 2,\n isActive: true,\n onActivateStep: activateStep,\n enabled: currentStep > 2,\n isCurrentStep: currentStep === 2,\n },\n {\n step: 3,\n stepName: ,\n completed: false,\n isActive: true,\n onActivateStep: activateStep,\n enabled: currentStep > 3,\n isCurrentStep: currentStep === 3,\n },\n ];\n };\n\n const getMobileStepText = () => {\n switch (currentStep) {\n case 0:\n return (\n ) => {\n setGetAppIdPhone(event.target.value);\n };\n\n const handleGetAppIdEmail = (event: ChangeEvent) => {\n setGetAppIdEmail(event.target.value);\n };\n\n const renderGetAppId = () => {\n return (\n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n );\n };\n\n const renderGetAppIdConfirm = () => {\n return (\n \n \n \n \n \n \n\n \n \n Close\n \n \n \n );\n };\n\n return isMobile ? (\n <>\n \n <>\n \n \n \n \n \n \n);\n\nexport default Routes;\n","import { gql } from \"@apollo/client\";\n\nexport const GET_USER_QUERY = gql`\n query GetUserData($appId: String!) {\n user(appId: $appId) {\n applicationId\n country\n email\n financeInfo {\n currentInterestRate\n dayOfPayment\n feeBalance\n minPaymentAllowed\n nextPayment\n nextPaymentDate\n paymentPlanName\n paymentStatus\n payoffAmount\n principalBalance\n providerID\n providerName\n totalAmountOwed\n totalPaymentsToDate\n currentAmountPastDue\n amortizationActivity {\n amortizationID\n balance\n createdOn\n interest\n ledgerActivity\n payment\n principal\n eventDate\n }\n ledgerActivity {\n accountingCode\n distroDate\n feeCode\n interestAmount\n ledgerDetailid\n principal\n totalAmount\n }\n }\n firstName\n languagePreference\n lastName\n mailingCity\n mailingCountry\n mailingState\n mailingStreet\n mailingZip\n primaryPhone\n }\n }\n`;\n","import React, {createContext, useState, useEffect, useContext} from \"react\";\nimport axios from 'axios';\nimport {getLoggedIn} from \"./managers/AuthManager\";\nimport {history} from \"./router\";\nimport {GET_USER_QUERY} from \"./queries/userQuery\";\nimport {useApolloClient} from \"react-apollo\";\nimport { useMutation } from \"@apollo/react-hooks\";\nimport { Config } from './ClientConfig';\nimport {\n UPDATE_USERAPPLICATIONID,\n UPDATE_USERZIPCODE,\n LOCAL_APP_STATE,\n RESET_MODEL\n} from \"./localState/queries\";\n\ntype User = any;\n\nexport const AuthDataContext = createContext({});\n\nconst initialAuthData = {};\n\nconst serviceUrl = `${Config.Integrations.StandardizedAPI}AnonymousOtp`;\nconst forgotAppIdUrl = `${Config.Integrations.StandardizedAPI}ForgotAppId`;\n\nconst AuthDataProvider = (props: any) => {\n const [authData, setAuthData] = useState(initialAuthData);\n const [user, setLoggedInUser] = useState(null);\n const [loading, setLoading] = useState(false);\n const [setApplicationId] = useMutation(UPDATE_USERAPPLICATIONID);\n const [setUserZip] = useMutation(UPDATE_USERZIPCODE);\n const [resetModel] = useMutation(RESET_MODEL);\n \n let client = useApolloClient();\n /* The first time the component is rendered, it tries to\n * fetch the auth data from a source, like a cookie or\n * the localStorage.\n */\n useEffect(() => {\n const currentAuthData = getLoggedIn();\n\n async function getLoggedInUser() {\n let userQuery = await axios.get(serviceUrl, {\n params: {applicationid: currentAuthData.appId, zipCode: currentAuthData.zipCode}\n });\n\n setLoggedInUser(userQuery.data);\n setAuthData(currentAuthData);\n\n setApplicationId({\n variables: { applicationId: currentAuthData.appId },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n\n setUserZip({\n variables: { zipCode: currentAuthData.zipCode },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n }\n\n if (currentAuthData) {\n setLoading(true);\n getLoggedInUser();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props.authData, client]);\n\n const onLogout = () => {\n resetModel({\n variables: {},\n refetchQueries: [{query: LOCAL_APP_STATE}]\n });\n\n setAuthData(initialAuthData);\n setLoggedInUser(null);\n };\n\n const onForgotAppId = async (data: any, callback: any) => {\n await axios.post(`${forgotAppIdUrl}?contact=${data.contact}&type=${data.type}`, {});\n\n callback();\n };\n\n const onSendPayment = async (data: any, callback: any) => {\n try {\n const response = await axios.post(serviceUrl, data);\n callback(response.data);\n }\n catch (err:any) {\n callback({ approved: false });\n }\n };\n\n const onOtpLogin = async (newAuthData: any, callback: any) => {\n sessionStorage.setItem(\"user\", JSON.stringify(newAuthData));\n\n try {\n let userQuery = await axios.get(serviceUrl, {\n params: {applicationid: newAuthData.appId, zipCode: newAuthData.zipCode}\n });\n setLoggedInUser(userQuery.data);\n setAuthData(newAuthData);\n callback(true);\n }\n catch (err) {\n callback(false);\n }\n };\n\n const onLogin = async (newAuthData: any) => {\n // UPDATE AFTER APOLLO\n sessionStorage.setItem(\"user\", JSON.stringify(newAuthData));\n let userQuery = await client.query({\n query: GET_USER_QUERY,\n variables: {\n appId: newAuthData.appId,\n },\n });\n setLoggedInUser(userQuery.data);\n setAuthData(newAuthData);\n history.push(\"/user/dashboard\");\n };\n\n return (\n \n {props.children}\n
\n {data.localAppState.isMobile ? \n \n
\n\n \n \n \n \n \n \n
\n );\n }\n };\n\n const backToLogin = () => {\n resetModel({\n variables: {},\n refetchQueries: [{ query: LOCAL_APP_STATE }]\n });\n\n window.location.href = Config.Integrations.CustomerPortalUrl;\n };\n\n const makeAnotherPayment = () => {\n resetModel({\n variables: { applicationId: data.localAppState.userData.applicationId, zipOnFile: data.localAppState.userData.zipOnFile },\n refetchQueries: [{ query: LOCAL_APP_STATE }]\n }).then(async () => {\n await sleep(500);\n props.backtoStepTwo();\n });\n };\n\n return (\n \n \n
\n\n \n \n \n \n \n \n
\n\n \n \n \n \n \n \n
\n \n );\n};\n\nexport default OneTimePaymentConfirmMobile;\n","import React, {useState} from \"react\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport {Card, Button} from \"react-bootstrap\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faTimesCircle,\n} from \"@fortawesome/free-regular-svg-icons\";\nimport HFDLogoWithText from \"@hfd/components/Logos/HFDLogoWithText\";\nimport OneTimePaymentInfo from \"./OneTimePaymentInfo\";\nimport OneTimePaymentAccountDetails from \"./OneTimePaymentAccountDetails\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\nimport FormattedCcNumber from \"@hfd/components/utility/FormattedCcNumber\";\nimport CcLogo from \"@hfd/components/utility/CcLogo\";\nimport Moment from \"react-moment\";\nimport {LOCAL_APP_STATE, RESET_MODEL} from \"../../../../localState/queries\";\nimport {useAuthDataContext} from \"../../../../authProvider\";\nimport { Config } from '../../../../ClientConfig';\n\nconst sleep = (ms: Number) => new Promise((r) => setTimeout(r, ms));\n\nconst OneTimePaymentResultsMobile = (props: any) => {\n const {data} = useQuery(LOCAL_APP_STATE);\n const [success] = useState(true);\n const {user} = useAuthDataContext();\n const [resetModel] = useMutation(RESET_MODEL);\n\n const getCardBody = () => {\n if (props.paymentResponse.approved) {\n return (\n <>\n \n \n );\n};\n\nexport default OneTimePaymentResultsMobile;\n","import React from \"react\";\nimport {Button} from \"react-bootstrap\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport {FontAwesomeIcon} from \"@fortawesome/react-fontawesome\";\nimport {\n faCheckCircle,\n faTimesCircle,\n} from \"@fortawesome/free-regular-svg-icons\";\nimport HFDLogoWithText from \"@hfd/components/Logos/HFDLogoWithText\";\nimport {LOCAL_APP_STATE, RESET_MODEL} from \"../../../../localState/queries\";\nimport Moment from \"react-moment\";\nimport FormattedCurrency from \"@hfd/components/utility/FormattedCurrency\";\nimport FormattedCcNumber from \"@hfd/components/utility/FormattedCcNumber\";\nimport {useAuthDataContext} from \"../../../../authProvider\";\nimport CcLogo from \"@hfd/components/utility/CcLogo\";\nimport { Config } from '../../../../ClientConfig';\n\nconst sleep = (ms: Number) => new Promise((r) => setTimeout(r, ms));\n\nconst OneTimePaymentResultsMobile = (props: any) => {\n const {data} = useQuery(LOCAL_APP_STATE);\n const {user} = useAuthDataContext();\n const [resetModel] = useMutation(RESET_MODEL);\n\n const getCard = () => {\n if (props.paymentResponse.approved) {\n return (\n \n
\n );\n } else {\n return (\n {renderDate()}
\n\n \n \n
\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n
\n \n
\n \n
\n \n );\n } else {\n return (\n <>\n - \n
- \n \n
\n \n \n {user.firstName} {user.lastName}\n \n \n - \n \n
\n \n \n {data.localAppState.userData.applicationId}\n \n \n - \n \n
\n \n \n{new Date()} \n \n \n - \n \n
\n \n \n \n - \n \n
\n \n\n\n\n
\n \n \n
\n \n \n
\n \n
\n
\n \n );\n }\n };\n\n const backToLogin = () => {\n resetModel({\n variables: {},\n refetchQueries: [{ query: LOCAL_APP_STATE }]\n });\n\n window.location.href = Config.Integrations.CustomerPortalUrl;\n };\n\n const makeAnotherPayment = () => {\n resetModel({\n variables: { applicationId: data.localAppState.userData.applicationId, zipOnFile: data.localAppState.userData.zipOnFile },\n refetchQueries: [{ query: LOCAL_APP_STATE }]\n }).then(async () => {\n await sleep(500);\n props.backtoStepTwo();\n });\n };\n\n return (\n <>\n \n \n
\n \n \n
\n \n
\n \n
\n
\n
\n \n {getCardBody()}\n \n
\n \n \n
\n\n \n \n
\n\n \n \n \n
\n \n \n
\n
\n \n \n
\n \n
\n \n
\n \n
\n - \n
- \n \n
\n \n \n {user.firstName} {user.lastName}\n \n \n - \n \n
\n \n \n {data.localAppState.userData.applicationId}\n \n \n - \n \n
\n \n \n{new Date()} \n \n \n - \n \n
\n \n \n \n - \n \n
\n \n\n\n\n
\n \n \n
\n \n \n
\n \n
\n
\n \n \n
\n \n \n
\n \n
\n \n
\n
\n
\n {getCard()}\n\n
\n );\n};\n\nexport default OneTimePaymentResultsMobile;\n","import React, { useEffect, useState } from \"react\";\nimport { useQuery, useMutation } from \"@apollo/react-hooks\";\nimport IntlMessages from \"@hfd/components/utility/IntlMessages\";\nimport { Button, Form } from \"react-bootstrap\";\nimport ErrorDisplay from \"@hfd/components/ErrorDisplay/ErrorDisplay\";\nimport { Formik } from \"formik\";\nimport {\n UPDATE_USERZIPCODE,\n UPDATE_USERAPPLICATIONID,\n LOCAL_APP_STATE,\n RESET_MODEL\n} from \"../../../../localState/queries\";\nimport { Config } from '../../../../ClientConfig';\nimport { useLocation } from 'react-router';\n\nconst OneTimePaymentLoginForm = (props: any) => {\n const { data } = useQuery(LOCAL_APP_STATE);\n const [setApplicationId] = useMutation(UPDATE_USERAPPLICATIONID);\n const [setUserZip] = useMutation(UPDATE_USERZIPCODE);\n const [resetModel] = useMutation(RESET_MODEL);\n const location = useLocation();\n\n const appIdRegex = /^[a-z0-9_-]{6,8}$/;\n const zipregex = /\\d{5}/g;\n\n const [isAppIdValid, setAppIdValid] = useState(false);\n const [isZipcodeValid, setZipcodeValid] = useState(false);\n\n useEffect(() => {\n const params = new URLSearchParams(location.search);\n const appId = params.get(\"appid\") || params.get(\"appId\") || params.get(\"applicationId\");\n const zip = params.get(\"zip\") || params.get(\"zipCode\");\n \n if (zip && appId && !props.errors) {\n setApplicationId({\n variables: { applicationId: appId },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n\n setUserZip({\n variables: { zipCode: zip },\n refetchQueries: [{ query: LOCAL_APP_STATE }],\n });\n\n props.setBypassing(true);\n \n props.submitClicked({ zipcode: zip, applicationId: appId });\n \n props.setBypassing(false);\n }\n // eslint-disable-next-line\n }, [location]);\n\n useEffect(() => {\n const appId = data.localAppState.userData.applicationId;\n const zipCode = data.localAppState.userData.zipOnFile;\n\n if (appId) {\n setAppIdValid(appIdRegex.test(appId));\n }\n\n if (zipCode) {\n setZipcodeValid(zipregex.test(zipCode));\n }\n\n // eslint-disable-next-line\n }, [data]);\n\n const handleApplicationId = (\n ev: React.ChangeEvent\n \n \n
\n \n
\n
\n ) : (\n <>\n \n
\n
\n
\n\n
\n ) : (\n <>\n \n
\n
\n Step 1\n \n
\n );\n case 1:\n return (\n \n Step 2\n \n
\n );\n case 2:\n return (\n \n Step 3\n \n
\n );\n case 3:\n return (\n \n Step 4\n \n
\n );\n default:\n return Hello
;\n }\n };\n\n const handleCancelAppId = () => {\n setShowAppIdModal(false);\n };\n\n const handleCloseAppId = () => {\n if (showEmail && getAppIdEmail) {\n onForgotAppId(\n {\n contact: getAppIdEmail,\n type: 1,\n },\n () => {\n setShowAppIdModal(false);\n setShowAppIdConfirmModal(true);\n }\n );\n }\n\n if (showPhone && getAppIdPhone) {\n onForgotAppId(\n {\n contact: getAppIdPhone,\n type: 2,\n },\n () => {\n setShowAppIdModal(false);\n setShowAppIdConfirmModal(true);\n }\n );\n }\n\n if ((showEmail && !getAppIdEmail) || (showPhone && !getAppIdPhone)) {\n setShowAppIdError(true);\n }\n };\n\n const handleCloseAppIdConfirm = () => {\n setShowAppIdConfirmModal(false);\n };\n\n const handleOpenAppId = () => {\n setShowAppIdModal(true);\n setGetAppIdPhone(\"\");\n setGetAppIdEmail(\"\");\n setShowEmail(false);\n setShowPhone(false);\n setShowAppIdError(false);\n };\n\n const handleShowEmail = () => {\n setShowEmail(true);\n setShowPhone(false);\n };\n\n const handleShowText = () => {\n setShowEmail(false);\n setShowPhone(true);\n };\n\n const handleGetAppIdPhone = (event: ChangeEvent\n \n
\n \n \n \n Text\n \n \n \n
\n Email\n \n
\n\n {showAppIdError && (\n \n Email\n \n
\n \n
\n )}\n\n {showPhone && (\n \n
\n )}\n\n {showEmail && (\n \n \n
\n \n
\n \n
\n )}\n \n \n
\n \n
\n \n \n
\n Loading
;\n }\n\n if (user) {\n return (\n Calculating Browser Size
;\n }\n\n return (\n <>\n