\r\n
\r\n {props.text}
\r\n \r\n \r\n {props.disabled && props.disabledReason ? props.disabledReason : props.subText}\r\n
\r\n \r\n);\r\n\r\nconst BackLink: React.FC<{ onClick: () => void; text: string; alt: string }> = props => (\r\n props.onClick()}>\r\n
\r\n);\r\n\r\n// jn 2019-08-05: saving this in case it becomes possible to retrieve and display the CC expiration date.\r\n// const ExpirationLine: React.FC<{ active: boolean, expiration: Date, due: Date }> = props =>\r\n// (!props.active ? \r\n \r\n
\r\n {props.text}
\r\n \r\n// {`Expires ${props.expiration.getMonth()}/${props.expiration.getFullYear() - 2000}${props.expiration < props.due ? ' - Please Update' : ''}`}\r\n//
);\r\n\r\ninterface IMakeAPaymentPageState {\r\n pageStep: 'locate' | 'verify' | 'edit' | 'thank' | 'once';\r\n isPayment: boolean;\r\n errorMessage: string;\r\n errorFound: boolean;\r\n userId: string;\r\n success: boolean;\r\n secondaryGreenLoading: boolean;\r\n modalVisible: boolean;\r\n edited: boolean;\r\n isEscrow: boolean;\r\n cardSublabel: string;\r\n checkSublabel: string;\r\n\r\n policyNumber: Value\r\n {props.labelText &&
\r\n);\r\n\r\nexport const PolicyData = props => (\r\n {props.labelText}
}\r\n \r\n {props.children}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {props.dataText}\r\n
\r\n);\r\n\r\nexport const SwitchButton = props => (\r\n \r\n \r\n this.setState({ modalVisible: false })}\r\n >\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n {\r\n switch (this.state.pageStep) {\r\n case 'once':\r\n await this.MakeOneTimePayment();\r\n break;\r\n case 'verify':\r\n await this.MakePayment();\r\n break;\r\n case 'edit':\r\n await this.ChangePayment();\r\n break;\r\n }\r\n }}\r\n label={'Agree & Confirm'}\r\n loading={this.state.secondaryGreenLoading}\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }\r\n\r\n getPaymentAmount() {\r\n return this.state.payType === 'card' ? this.state.amountDueCredit : this.state.amountDueNonCredit;\r\n }\r\n\r\n displayModal(e) {\r\n e.preventDefault();\r\n if (this.submitValidationHandler()) {\r\n return;\r\n }\r\n if (this.state.payType === 'echeck') {\r\n AdminApi.getBankName(this.state.routingNumber.content)\r\n .then(bankName => this.setState({ bankName }))\r\n .finally(() => this.setState({ modalVisible: true })); // Show modal even if getBankName fails.\r\n } else {\r\n this.setState({ modalVisible: true });\r\n }\r\n }\r\n\r\n async MakePayment() {\r\n this.setState({\r\n errorMessage: '',\r\n secondaryGreenLoading: true,\r\n });\r\n\r\n try {\r\n const response = await AdminApi.payFromExistingProfile(\r\n this.state.policyNumber.content,\r\n this.state.policyZip.content,\r\n this.state.amountDueOrig,\r\n this.state.payType === 'card' ? 'Credit Card' : 'ECheck',\r\n this.state.payType === 'card' ? this.state.creditCard.content : this.state.accountNumber.content\r\n );\r\n\r\n if (response.status && response.status !== 200) {\r\n this.setState({ success: false });\r\n const problemDetails = await response.json();\r\n throw [response, problemDetails];\r\n }\r\n\r\n this.setState({\r\n success: true,\r\n });\r\n } catch (ex) {\r\n Common.handleGeneralError(ex);\r\n } finally {\r\n this.setState({\r\n secondaryGreenLoading: false,\r\n modalVisible: false,\r\n pageStep: this.state.success ? 'thank' : 'verify',\r\n });\r\n }\r\n }\r\n\r\n async MakeOneTimePayment() {\r\n if (this.submitValidationHandler()) {\r\n return;\r\n }\r\n\r\n this.setState({\r\n errorMessage: '',\r\n secondaryGreenLoading: true,\r\n });\r\n\r\n try {\r\n const amount = this.state.payType === 'card' ? this.state.amountDueCredit : this.state.amountDueNonCredit;\r\n const paymentInfo = await this.getPaymentInfo(amount, true);\r\n\r\n const response = await AdminApi.payOnce(paymentInfo);\r\n if (response.status && response.status !== 200) {\r\n const problemDetails = await response.json();\r\n throw [response, problemDetails];\r\n }\r\n\r\n this.setState({\r\n secondaryGreenLoading: false,\r\n modalVisible: false,\r\n pageStep: 'thank',\r\n });\r\n } catch (ex) {\r\n Common.handleGeneralError(ex);\r\n this.setState({\r\n secondaryGreenLoading: false,\r\n modalVisible: false,\r\n pageStep: 'once',\r\n });\r\n }\r\n }\r\n\r\n async ChangePayment() {\r\n if (this.submitValidationHandler()) {\r\n return;\r\n }\r\n this.setState({\r\n errorMessage: '',\r\n secondaryGreenLoading: true,\r\n });\r\n\r\n try {\r\n const paymentInfo = await this.getPaymentInfo('0', false);\r\n\r\n const response = await AdminApi.updatePaymentMethod(paymentInfo);\r\n if (response.status && response.status !== 200) {\r\n const problemDetails = await response.json();\r\n throw [response, problemDetails];\r\n }\r\n\r\n // in case of a change in amount due, re-retrieves policy invoice:\r\n await this.onCancel();\r\n } catch (ex) {\r\n Common.handleGeneralError(ex);\r\n } finally {\r\n this.setState({\r\n secondaryGreenLoading: false,\r\n modalVisible: false,\r\n pageStep: 'verify',\r\n });\r\n }\r\n }\r\n\r\n private async getPaymentInfo(payment: string, once: boolean) {\r\n const authScreen = await this.grabAuthorizationScreen();\r\n let paymentInfo: Models.PaymentModel = {\r\n PolicyNumber: this.state.policyNumber.content,\r\n PolicyZip: this.state.policyZip.content,\r\n PaymentAmount: payment,\r\n Authorization: authScreen,\r\n AnnualNewBusiness: ['escrow', 'annual'].includes(this.state.paymentFrequency),\r\n IsCard: this.state.payType === 'card',\r\n };\r\n if (this.state.payType === 'card') {\r\n paymentInfo = {\r\n CreditCard: this.state.creditCard.content,\r\n Cvv: this.state.cvv.content,\r\n ExpMonth: this.state.creditCardExpiration.content?.format('MM'),\r\n ExpYear: this.state.creditCardExpiration.content?.format('YYYY'),\r\n ...paymentInfo,\r\n };\r\n this.setState({\r\n creditCard: this.state.creditCard.set(`XXXX${this.state.creditCard.content.slice(-4)}`),\r\n });\r\n } else {\r\n paymentInfo = {\r\n AccountName: this.state.accountOwner.content,\r\n AccountNumber: this.state.accountNumber.content,\r\n RoutingNumber: this.state.routingNumber.content,\r\n BankAccountType: this.state.accountType,\r\n ...paymentInfo,\r\n };\r\n this.setState({\r\n accountNumber: this.state.accountNumber.set(`XXXX${this.state.accountNumber.content.slice(-4)}`),\r\n });\r\n }\r\n return paymentInfo;\r\n }\r\n\r\n /** Uses html2canvas to create a png from the confirmation modal rendered html and returns the data url for that image. */\r\n async grabAuthorizationScreen() {\r\n const canvasOptions: {} = {\r\n scale: 1,\r\n windowWidth: 1024,\r\n width: 1024,\r\n height: 860,\r\n logging: false,\r\n };\r\n\r\n const toCanvas: any = html2canvas as any;\r\n\r\n // We grab the confirmation modal element (as opposed to the whole body) to avoid interference with site-wide elements such as the banner. This won't work correctly with a React ref, which is why we use the document.getElementById method.\r\n const screen: any = await toCanvas(document.querySelector('#confirmation-modal'), canvasOptions);\r\n const url: string = screen.toDataURL();\r\n\r\n return url;\r\n }\r\n\r\n private async onCancel() {\r\n if (this.state.edited) {\r\n await this.tryGetPolicy(this.state.policyNumber.content, this.state.policyZip.content);\r\n this.setState({ edited: false });\r\n }\r\n this.setState({ pageStep: 'verify' });\r\n }\r\n\r\n //Iterates through state keys and returns 'true' if any value validation errors are found.\r\n private submitValidationHandler(): boolean {\r\n const valSet =\r\n this.state.payType === 'card'\r\n ? ['cardFirstName', 'cardLastName', 'creditCard', 'creditCardExpiration', 'cvv']\r\n : ['accountOwner', 'accountNumber', 'routingNumber'];\r\n\r\n const errorFound = valSet\r\n .map(key => this.state[key])\r\n .filter(value => value && value.validate)\r\n .map(value => value.validate())\r\n .some(value => !!value);\r\n\r\n this.setState({\r\n errorFound,\r\n });\r\n return errorFound;\r\n }\r\n\r\n private async tryGetPolicy(policyNumber: string, zip: string) {\r\n this.setState({\r\n secondaryGreenLoading: true,\r\n });\r\n this.state.policyNumber.validate();\r\n this.state.policyZip.validate();\r\n\r\n const errorFound = !this.state.policyNumber.valid || !this.state.policyZip.valid;\r\n const visibleError = this.state.policyNumber.error || this.state.policyZip.error || '';\r\n\r\n this.setState({\r\n errorMessage: visibleError,\r\n secondaryGreenLoading: !errorFound,\r\n errorFound,\r\n });\r\n\r\n if (errorFound) {\r\n return;\r\n }\r\n\r\n let invoice: Models.PolicyPaymentInvoice;\r\n\r\n try {\r\n invoice = await HOApi.getPolicyPaymentInvoice(policyNumber, zip);\r\n } catch (err) {\r\n let message = err.responseJSON.Message || err.responseJSON.ErrorMessage;\r\n if (err.responseJSON.ErrorCode === 402) {\r\n message =\r\n 'Sorry, the policy you looked up has an issue with its billing information and cannot be updated online. Please contact customersupport@swyfft.com to make changes to your payment method.';\r\n }\r\n if (err.responseJSON.ErrorCode === 405) {\r\n message =\r\n 'Sorry, we cannot load this policy for you at this time. Please contact customersupport@swyfft.com for assistance.';\r\n }\r\n if (err.responseJSON.ErrorCode === 411) {\r\n message =\r\n \"Sorry, this policy # and zip don't match our records. Please update the information and try again or contact Swyfft customer support at customersupport@swyfft.com.\";\r\n }\r\n this.setState({\r\n errorMessage: message,\r\n secondaryGreenLoading: false,\r\n errorFound: true,\r\n policyZip: this.state.policyZip.set(''),\r\n });\r\n // Disable button until new valid info is entered.\r\n this.state.policyZip.validate();\r\n this.forceUpdate();\r\n return;\r\n }\r\n\r\n const paymentFrequency = invoice.paymentProfile.PremiumType.toLowerCase() as PaymentFrequency;\r\n\r\n this.setState({\r\n errorFound: false,\r\n errorMessage: '',\r\n secondaryGreenLoading: false,\r\n pageStep: 'verify',\r\n isEscrow: paymentFrequency.startsWith('escrow'),\r\n\r\n payType: invoice.paymentProfile.PaymentType === PaymentTypes.ECheck ? 'echeck' : 'card',\r\n\r\n cardFirstName: this.state.cardFirstName.set(invoice.paymentProfile.FirstName || ''),\r\n cardLastName: this.state.cardLastName.set(invoice.paymentProfile.LastName || ''),\r\n creditCard: this.state.creditCard.set(invoice.paymentProfile.CreditCardNumber || ''),\r\n creditCardExpiration: this.state.creditCardExpiration.set(null),\r\n cvv: this.state.cvv.set(''),\r\n\r\n accountType: invoice.paymentProfile.ECheckAccountType === 'checking' ? 'checking' : 'savings',\r\n accountOwner: this.state.accountOwner.set(invoice.paymentProfile.ECheckAccountOwner || ''),\r\n accountNumber: this.state.accountNumber.set(invoice.paymentProfile.ECheckAccountNumber || ''),\r\n routingNumber: this.state.routingNumber.set(invoice.paymentProfile.ECheckRoutingNumber || ''),\r\n bankName: '',\r\n dueDate: dayjs(invoice.dueDate),\r\n paymentFrequency: paymentFrequency,\r\n amountDueNonCredit: invoice.amountDueNonCredit,\r\n amountDueCredit: invoice.amountDueCredit,\r\n amountDueOrig:\r\n invoice.paymentProfile.PaymentType === PaymentTypes.CreditCard\r\n ? invoice.amountDueCredit\r\n : invoice.amountDueNonCredit,\r\n quoteId: invoice.quoteId,\r\n invoiceNumber: invoice.invoiceNumber ?? 0,\r\n quoteStatus: invoice.quoteStatus,\r\n });\r\n }\r\n}\r\n\r\nfunction init() {\r\n try {\r\n Main.init();\r\n Common.renderComponent(\r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n {this.state.pageStep !== 'verify' ? (\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n {\r\n e.preventDefault();\r\n this.tryGetPolicy(\r\n this.state.policyNumber.content,\r\n this.state.policyZip.content\r\n );\r\n }}\r\n >\r\n \r\n \r\n this.setState({\r\n policyNumber: this.state.policyNumber.set(\r\n e.target.value\r\n ),\r\n })\r\n }\r\n value={this.state.policyNumber}\r\n label='Policy Number'\r\n labelClassName='input-field-label-md'\r\n inputClassName='input-field-md'\r\n />\r\n \r\n \r\n this.setState({\r\n policyZip: this.state.policyZip.set(e.target.value),\r\n })\r\n }\r\n value={this.state.policyZip}\r\n label='Insured Zip Code'\r\n labelClassName='input-field-label-md'\r\n inputClassName='input-field-md'\r\n />\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n\r\n \r\n \r\n \r\n {\r\n window.location.href = `${Constants.pages.EditBillableInterests}?policyNumber=${this.state.policyNumber.content}`;\r\n }}\r\n text='Edit Billable Interests'\r\n subText='Update current mortgagee information on file'\r\n alt='Update current mortgagee information on file'\r\n />\r\n \r\n \r\n {\r\n this.setState({ pageStep: 'edit' });\r\n }}\r\n text='Update Saved Payment Method'\r\n subText='Correct an out-of-date or invalid payment method'\r\n alt='Correct an out-of-date or invalid payment method'\r\n disabled={this.state.quoteStatus === 'Bound - Pending Accounting'}\r\n disabledReason={`The payment method of this policy cannot be changed here. Call ${\r\n (window as any).customerSupportPhoneNumber\r\n } for billing support if you need help with your payment method.`}\r\n />\r\n \r\n {\r\n this.setState({ modalVisible: true, isPayment: true });\r\n }}\r\n text={`Pay $${this.state.amountDueOrig} with Saved Method`}\r\n subText='Use saved method to pay (if valid)'\r\n alt='Use saved method to pay (if valid)'\r\n />\r\n \r\n \r\n \r\n {\r\n this.setState({ pageStep: 'once', isPayment: true });\r\n }}\r\n text={`Pay $${this.state.amountDueOrig}${\r\n !this.state.isEscrow ? ' with Other Method' : ''\r\n }`}\r\n subText='Payment method will not be saved'\r\n alt='Make a one-time payment. Payment method will not be saved.'\r\n />\r\n \r\n {\r\n this.setState({ pageStep: 'locate' });\r\n }}\r\n text='Go Back'\r\n alt='Go back'\r\n />\r\n \r\n
\r\n \r\n\r\n \r\n \r\n
\r\n \r\n\r\n
\r\n Make a Payment
\r\n \r\n ) : (\r\nMake a Payment
\r\n \r\n )}\r\n\r\n {this.captionText[this.state.pageStep]}\r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n Thank You!
\r\n\r\n Your payment was submitted successfully. We will send you an email receipt\r\n shortly.\r\n
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Credit Card:\r\n \r\n {' '}\r\n ••••-••••-••••-\r\n {this.state.creditCard.content.slice(-4)}\r\n \r\n \r\n ) : (\r\n \r\n {this.state.accountType === 'checking'\r\n ? 'Checking Account'\r\n : 'Savings Account'}\r\n :\r\n \r\n {' '}\r\n {hideString(\r\n this.state.accountNumber.content,\r\n 4\r\n )}\r\n \r\n \r\n )\r\n }\r\n />\r\n \r\n
\r\n \r\n Policy #{' '}\r\n \r\n {this.state.policyNumber.content}\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n this.setState({\r\n payType: 'card',\r\n edited: true,\r\n })\r\n }\r\n />\r\n \r\n \r\n this.setState({\r\n payType: 'echeck',\r\n accountType: 'checking',\r\n edited: true,\r\n })\r\n }\r\n />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n Payment Method
\r\n \r\n {`Card payment includes ${formatCurrencyUS(\r\n +this.state.amountDueCredit - +this.state.amountDueNonCredit,\r\n 2\r\n )} convenience fee`}
\r\n \r\n \r\n By clicking the button below, I authorize Swyfft to update my saved payment\r\n method to:\r\n
\r\n ) : (\r\n\r\n You are making a payment of{' '}\r\n ${this.getPaymentAmount()} using the\r\n following payment method:\r\n
\r\n )}\r\n \r\n\r\n
\r\n