@navinc/base-react-components
Version:
Nav's Pattern Library
409 lines (396 loc) • 48.3 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import styled, { useTheme } from 'styled-components';
import propTypes from 'prop-types';
import { Formik, Field, FieldArray } from 'formik';
import { toPattern, toNumber } from 'vanilla-masker';
import { useDebouncedCallback } from 'use-debounce';
import { isEmpty, parseJSON, loadScript, isWholeNumber, defaultPasswordValidator as passwordValidator, toUsdMoney, } from '@navinc/utils';
import { StandardCard } from './standard-card.js';
import Input from './input.js';
import Checkbox from './checkbox.js';
import Select from './select.js';
import Radio from './radio.js';
import Button from './button.js';
import Header from './header.js';
import Copy from './copy.js';
import Text from './text.js';
import Icon from './icon.js';
import CDNAsset from './cdn-asset.js';
import USStatesAndTerritories from './data/us-states-and-territories.js';
import isRebrand from './is-rebrand.js';
import Link from './link.js';
export const getCachedValues = () => {
var _a;
return Object.fromEntries(Object.entries(parseJSON((_a = global.localStorage.getItem('nav_ppp_form_values')) !== null && _a !== void 0 ? _a : '{}')).filter(([key, val]) => !!val));
};
export const setCachedValues = (values) => {
try {
global.localStorage.setItem('nav_ppp_form_values', JSON.stringify(values));
}
catch (err) { }
};
const USStates = Object.entries(USStatesAndTerritories).map(([label, value]) => ({ label, value }));
export const StyledStandardCard = styled(StandardCard).withConfig({ displayName: "brc-sc-StyledStandardCard", componentId: "brc-sc-si9m7t" }) `
margin-bottom: 40px;
width: 100%;
`;
export const StyledForm = styled.form.withConfig({ displayName: "brc-sc-StyledForm", componentId: "brc-sc-lf9g0s" }) `
max-width: 696px;
width: 100%;
padding: 0 16px;
@media (${({ theme }) => theme.forLargerThanPhone}) {
padding: 0;
}
`;
export const StyledHeader = styled(Header).withConfig({ displayName: "brc-sc-StyledHeader", componentId: "brc-sc-1gw4dcg" }) `
margin-bottom: 24px;
`;
export const TwoColumn = styled.div.withConfig({ displayName: "brc-sc-TwoColumn", componentId: "brc-sc-77gb77" }) `
display: flex;
flex-wrap: wrap;
justify-content: space-between;
${Input} {
width: 100%;
}
${Select} {
width: 100%;
}
@media (${({ theme }) => theme.forLargerThanPhone}) {
${Input} {
width: 48%;
}
${Select} {
width: 48%;
}
}
`;
export const CardHeader = styled(Copy).withConfig({ displayName: "brc-sc-CardHeader", componentId: "brc-sc-10ou59v" }) `
margin-bottom: 16px;
display: flex;
flex-flow: row wrap;
align-content: baseline;
&::after {
content: '';
display: block;
margin-top: 8px;
height: 4px;
width: 100%;
border-radius: 4px;
background-color: #ecedef;
}
& > ${Icon} {
margin-left: 4px;
}
`;
const InlineHeader = styled(Copy).withConfig({ displayName: "brc-sc-InlineHeader", componentId: "brc-sc-texp7o" }) `
margin-bottom: 16px;
display: flex;
flex-flow: row wrap;
align-content: baseline;
& > ${Icon} {
margin-left: 4px;
}
`;
const FlexWrapper = styled.div.withConfig({ displayName: "brc-sc-FlexWrapper", componentId: "brc-sc-nzv1oe" }) `
display: flex;
`;
const AdditionalOwnersWrapper = styled.div.withConfig({ displayName: "brc-sc-AdditionalOwnersWrapper", componentId: "brc-sc-16zm4z3" }) `
position: relative;
display: flex;
flex-wrap: wrap;
padding-right: 32px;
border-bottom: 2px solid #ecedef;
margin-bottom: 16px;
&:last-child {
border-bottom: none;
margin-bottom: 0;
}
.action-buttons {
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
> ${Icon} {
cursor: pointer;
}
}
`;
const AdditionalOwnerField = styled.div.withConfig({ displayName: "brc-sc-AdditionalOwnerField", componentId: "brc-sc-1jq34y1" }) `
flex-basis: 100%;
> * {
width: 100%;
}
@media (${({ theme }) => theme.forLargerThanPhone}) {
flex-basis: 50%;
padding-right: 18px;
&:nth-child(even) {
padding-right: 0;
}
}
`;
const EmphasizedCopy = styled(Copy).withConfig({ displayName: "brc-sc-EmphasizedCopy", componentId: "brc-sc-nnj9q2" }) `
font-style: italic;
margin-bottom: 16px;
`;
const QuestionWrapper = styled.div.withConfig({ displayName: "brc-sc-QuestionWrapper", componentId: "brc-sc-zzoc14" }) `
margin-bottom: 40px;
`;
const QuestionCopy = styled(Copy).withConfig({ displayName: "brc-sc-QuestionCopy", componentId: "brc-sc-yx17x6" }) `
margin-bottom: 16px;
`;
const RadioGroup = styled.div.withConfig({ displayName: "brc-sc-RadioGroup", componentId: "brc-sc-9ecxa" }) `
display: flex;
> ${Radio} {
flex: 0;
margin-right: 20px;
}
`;
export const SubmitButton = styled(Button).withConfig({ displayName: "brc-sc-SubmitButton", componentId: "brc-sc-1hms1ez" }) `
display: flex;
width: 100%;
max-width: 343px;
margin: 0 auto 16px;
justify-content: center;
`;
const AdditionalOwner = styled(Copy).withConfig({ displayName: "brc-sc-AdditionalOwner", componentId: "brc-sc-147mads" }) `
color: ${({ theme }) => theme.navPrimary};
padding-left: 8px;
cursor: pointer;
`;
export const InfodrawerCopyWrapper = styled.div.withConfig({ displayName: "brc-sc-InfodrawerCopyWrapper", componentId: "brc-sc-1opefus" }) `
& > ${Copy} {
margin-bottom: 16px;
}
`;
export const CreateAccountWrapper = styled.div.withConfig({ displayName: "brc-sc-CreateAccountWrapper", componentId: "brc-sc-10g0hp9" }) `
${Header} {
margin-bottom: 16px;
}
${Input} {
margin-bottom: 8px;
}
@media (${({ theme }) => theme.forLargerThanPhone}) {
width: 70%;
margin-left: auto;
margin-right: auto;
}
`;
export const StyledCDNAsset = styled(CDNAsset).withConfig({ displayName: "brc-sc-StyledCDNAsset", componentId: "brc-sc-1ei196b" }) `
display: block;
margin-left: auto;
margin-right: auto;
`;
export const LegalCheckbox = styled(Checkbox).withConfig({ displayName: "brc-sc-LegalCheckbox", componentId: "brc-sc-nonqrq" }) `
width: 100%;
margin: 0 auto 16px;
@media (${({ theme }) => theme.forLargerThanPhone}) {
width: 424px;
}
`;
export const ErrorsMessage = styled(Copy).withConfig({ displayName: "brc-sc-ErrorsMessage", componentId: "brc-sc-fklp73" }) `
color: ${({ theme }) => (isRebrand(theme) ? theme.navStatusNegative : theme.sebastianRed200)};
text-align: center;
margin-bottom: 16px;
`;
const ModifiedCardInsight = styled.div.withConfig({ displayName: "brc-sc-ModifiedCardInsight", componentId: "brc-sc-1kz3ok6" }) `
display: flex;
padding: 20px;
margin-bottom: 16px;
background-color: ${({ theme }) => theme.bubbleBlue100};
`;
const IconWrapper = styled.div.withConfig({ displayName: "brc-sc-IconWrapper", componentId: "brc-sc-9s74xg" }) `
width: 36px;
padding-right: 16px;
`;
export const DisclaimerText = styled(Copy).withConfig({ displayName: "brc-sc-DisclaimerText", componentId: "brc-sc-167a1ke" }) `
font-style: italic;
margin-bottom: 16px;
text-align: center;
`;
export const StyledIcon = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-ivw4z6" }) `
cursor: pointer;
color: ${({ color, theme }) => theme[color]};
`;
export const CreateAccountHeader = styled(Header).withConfig({ displayName: "brc-sc-CreateAccountHeader", componentId: "brc-sc-dg4hum" }) `
text-align: center;
`;
const CalculatorSpacer = styled.div.withConfig({ displayName: "brc-sc-CalculatorSpacer", componentId: "brc-sc-111sit9" }) `
padding-bottom: 16px;
`;
const StyledText = styled(Text).withConfig({ displayName: "brc-sc-StyledText", componentId: "brc-sc-15sgh62" }) `
display: block;
`;
export const SBAPaycheckProtectionProgramForm = ({ hasCalculator = false, initialValues = {}, isSubmittingForm = false, onFormSubmit = () => { }, dispatchOpenInfoDrawer = () => { }, shouldShowPasswordField = false, }) => {
const theme = useTheme();
const EMPTY_OWNER = { name: '', address: '', title: '', percent: '' };
const FLOATING_NUMBER_REGEX = /^[\d]{0,3}\.?[\d]{0,2}$/; // https://regex101.com/r/rfpbP7/4
const debouncedSetCachedValues = useDebouncedCallback(setCachedValues, 750);
const calcEl = useRef(null);
const [avgMonthlyPayroll, setAvgMonthlyPayroll] = useState(null);
const [loanRequestAmount, setLoanRequestAmount] = useState(null);
const handleSubmit = (_a = {}) => {
var { emailAddress, password } = _a, rest = __rest(_a, ["emailAddress", "password"]);
const cleanedValues = Object.assign({ version: 2, // Increment the version each time the shape of data changes
emailAddress }, rest);
const loginInfo = shouldShowPasswordField && { emailAddress, password };
onFormSubmit(cleanedValues, loginInfo);
};
const { avgMonthlyPayroll: initialAvgMonthlyPayroll, loanRequestAmount: initialLoanRequestAmount } = initialValues;
/* The lack of initial values in these fields indicates the user has not landed here from a *completed* calculator page */
const shouldShowCalculator = hasCalculator && !parseInt(initialAvgMonthlyPayroll) && !parseInt(initialLoanRequestAmount);
useEffect(() => {
const handler = ({ detail } = {}) => {
const { payroll12Months, result } = detail;
setAvgMonthlyPayroll(Math.trunc(payroll12Months / 12));
setLoanRequestAmount(result);
};
if (hasCalculator) {
loadScript('https://creditera-assets.s3-us-west-2.amazonaws.com/javascripts/nav-sba-loan-calculator.js');
}
const calculatorEl = calcEl.current;
if (calcEl.current) {
calcEl.current.addEventListener('result', handler);
}
return () => { var _a; return (_a = calculatorEl === null || calculatorEl === void 0 ? void 0 : calculatorEl.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(calculatorEl, 'result', handler); };
}, [hasCalculator]);
return (_jsx(Formik, Object.assign({ enableReinitialize: true, initialValues: Object.assign(Object.assign(Object.assign(Object.assign({ primaryContact: '', emailAddress: '', primaryContactPhone: '', businessLegalName: '', businessPhone: '', address: '', city: '', state: '', zipCode: '', dba: '', businessType: '', avgMonthlyPayroll: '', loanRequestAmount: '', numberOfEmployees: '', purposePayroll: false, purposeRent: false, purposeUtilities: false, purposeOther: false, purposeOtherDesc: '', ownerName1: '', ownerTitle1: '', ownerPercent1: '', ownerAddress1: '', additionalOwners: [], question1: '', question2: '', question3: '', question4: '', question5: '', question6: '', question7: '', question8: '', password: '', termsOfService: false }, initialValues), getCachedValues()), (!!avgMonthlyPayroll && { avgMonthlyPayroll })), (!!loanRequestAmount && { loanRequestAmount })), onSubmit: handleSubmit, validate: (_a) => {
var { password } = _a, restOfValues = __rest(_a, ["password"]);
debouncedSetCachedValues(restOfValues); // Update the cache as things change
const { primaryContact, emailAddress, primaryContactPhone, businessLegalName, businessPhone, address, city, state, zipCode, businessType, avgMonthlyPayroll, numberOfEmployees, loanRequestAmount, purposePayroll, purposeRent, purposeUtilities, purposeOther, purposeOtherDesc, ownerName1, ownerTitle1, ownerPercent1, ownerAddress1, question1, question2, question3, question4, question5, question6, question7, question8, termsOfService, additionalOwners, } = restOfValues;
const PHONE_REGEX = /^\d{3}-\d{3}-\d{4}$/;
const REQUIRED_MESSAGE = 'Required';
const PERCENT_MESSAGE = 'Percent must be between 1 and 100';
const PHONE_MESSAGE = 'Phone number is invalid';
const additionalOwnersErrors = additionalOwners.map(({ name, address, title, percent }) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (!name && { name: [REQUIRED_MESSAGE] })), (!address && { address: [REQUIRED_MESSAGE] })), (!title && { title: [REQUIRED_MESSAGE] })), (!percent && { percent: [REQUIRED_MESSAGE] })), ((percent < 1 || percent > 100) && { percent: [PERCENT_MESSAGE] }))));
const additionalOwnersPercentSum = additionalOwners.reduce((sum, { percent }) => {
const parsed = parseFloat(percent);
if (!Number.isNaN(parsed))
return sum + parsed;
return sum;
}, 0);
const totalPercent = parseFloat(ownerPercent1 || 0) + additionalOwnersPercentSum;
return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (!primaryContact && {
primaryContact: [REQUIRED_MESSAGE],
})), (primaryContact.length > 121 && {
primaryContact: ['Primary Contact must be 121 characters or less'],
})), (!emailAddress.match(/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/) && {
emailAddress: ['Enter a valid email'],
})), (!primaryContactPhone.match(PHONE_REGEX) && { primaryContactPhone: [PHONE_MESSAGE] })), (!businessLegalName && { businessLegalName: [REQUIRED_MESSAGE] })), (businessLegalName.length > 255 && {
businessLegalName: ['Business Name must be 255 characters or less'],
})), (!businessPhone.match(PHONE_REGEX) && { businessPhone: [PHONE_MESSAGE] })), (!address && { address: [REQUIRED_MESSAGE] })), (!city && { city: [REQUIRED_MESSAGE] })), (!state && { state: [REQUIRED_MESSAGE] })), (!zipCode.match(/^\d{5}$/) && { zipCode: ['We need your 5-digit ZIP Code'] })), (!businessType && { businessType: [REQUIRED_MESSAGE] })), (!avgMonthlyPayroll && { avgMonthlyPayroll: [REQUIRED_MESSAGE] })), (!numberOfEmployees && { numberOfEmployees: [REQUIRED_MESSAGE] })), (loanRequestAmount.length < 5 && { loanRequestAmount: ['Minimum loan amount $100'] })), (!purposePayroll &&
!purposeRent &&
!purposeUtilities &&
!purposeOther && {
purposeOther: ['Must select one or more purpose for the loan'],
})), (purposeOther && !purposeOtherDesc && { purposeOtherDesc: [REQUIRED_MESSAGE] })), (!ownerName1 && { ownerName1: [REQUIRED_MESSAGE] })), (ownerName1.length > 121 && { ownerName1: ['Owner name must be 121 characters or less'] })), (!ownerTitle1 && { ownerTitle1: [REQUIRED_MESSAGE] })), (ownerTitle1.length > 128 && { ownerTitle1: ['Title must be 128 characters or less'] })), (!(ownerPercent1 > 0 && ownerPercent1 <= 100) && { ownerPercent1: [PERCENT_MESSAGE] })), (!ownerAddress1 && { ownerAddress1: [REQUIRED_MESSAGE] })), (!question1 && { question1: [REQUIRED_MESSAGE] })), (!question2 && { question2: [REQUIRED_MESSAGE] })), (!question3 && { question3: [REQUIRED_MESSAGE] })), (!question4 && { question4: [REQUIRED_MESSAGE] })), (!question5 && { question5: [REQUIRED_MESSAGE] })), (!question6 && { question6: [REQUIRED_MESSAGE] })), (!question7 && { question7: [REQUIRED_MESSAGE] })), (!question8 && { question8: [REQUIRED_MESSAGE] })), (!termsOfService && { termsOfService: [REQUIRED_MESSAGE] })), (additionalOwnersErrors.some((error) => !isEmpty(error)) && { additionalOwners: additionalOwnersErrors })), (shouldShowPasswordField &&
passwordValidator(password).length && { password: passwordValidator(password) })), (totalPercent !== 100 && {
totalPercent: [
`Total ownership must equal 100%, not ${isWholeNumber(totalPercent) ? totalPercent : totalPercent.toFixed(2)}%.`,
],
}));
} }, { children: ({ values, errors, touched, handleChange, handleBlur, handleFocus, handleSubmit, submitCount }) => (_jsxs(StyledForm, Object.assign({ "data-testid": "paycheck-protection-program:form", onSubmit: handleSubmit, noValidate: true }, { children: [_jsx(StyledHeader, Object.assign({ size: "xl" }, { children: "Get connected to PPP funding options" })), _jsxs(StyledStandardCard, { children: [_jsxs(CardHeader, Object.assign({ bold: true }, { children: ["Primary Contact Information", ' ', _jsx(StyledIcon, { "data-testid": "ppp-form:info-drawer:primary-contact", name: "actions/circle-faq", onClick: () => dispatchOpenInfoDrawer({
children: (_jsx(InfodrawerCopyWrapper, { children: _jsx(Copy, { children: "This person will be the primary contact for the application and will be emailed regarding this application." }) })),
title: 'Primary contact information',
}) })] })), _jsx(Input, { hasSpaceForErrors: true, name: "primaryContact", label: "Primary Contact Name", value: values.primaryContact, onBlur: handleBlur, onChange: handleChange, isInvalid: touched.primaryContact && !!errors.primaryContact, errors: touched.primaryContact && errors.primaryContact, "data-testid": "ppp-form:input:primary-contact", required: true }), _jsxs(TwoColumn, { children: [_jsx(Input, { hasSpaceForErrors: true, type: "email", name: "emailAddress", label: "Email Address", value: values.emailAddress, onBlur: handleBlur, onChange: handleChange, isInvalid: touched.emailAddress && !!errors.emailAddress, errors: touched.emailAddress && errors.emailAddress, "data-testid": "ppp-form:input:primary-email-address", required: true }), _jsx(Input, { hasSpaceForErrors: true, name: "primaryContactPhone", label: "Primary Contact Phone Number", value: values.primaryContactPhone && toPattern(values.primaryContactPhone, '999-999-9999'), onBlur: handleBlur, onChange: (event) => {
event.target.value = toPattern(event.target.value, '999-999-9999');
handleChange(event);
}, isInvalid: touched.primaryContactPhone && !!errors.primaryContactPhone, errors: touched.primaryContactPhone && errors.primaryContactPhone, "data-testid": "ppp-form:input:primary-contact-phone", required: true })] })] }), _jsxs(StyledStandardCard, { children: [_jsxs(CardHeader, Object.assign({ bold: true }, { children: ["Business Information", ' ', _jsx(StyledIcon, { "data-testid": "ppp-form:info-drawer:business-information", name: "actions/circle-faq", onClick: () => dispatchOpenInfoDrawer({
children: (_jsxs(InfodrawerCopyWrapper, Object.assign({ "data-testid": "ppp-form:info-drawer:dba" }, { children: [_jsx(Copy, { children: "Information about the business applying for funds through the Paycheck Protection Program." }), _jsxs(Copy, { children: [_jsx(Text, Object.assign({ "$bold": true }, { children: "Doing Business As (DBA):" })), " A company is said to be \"doing business as\" when the name under which they operate their business differs from its legal, registered name."] }), _jsxs(Copy, { children: [_jsx(Text, Object.assign({ "$bold": true }, { children: "Tradename:" })), " A trade name, trading name, or business name is a name used by companies that don't want to operate under their registered name."] })] }))),
title: 'Business information',
}) })] })), _jsx(Input, { hasSpaceForErrors: true, name: "businessLegalName", label: "Business Legal Name", type: "text", value: values.businessLegalName, onBlur: handleBlur, onChange: handleChange, isInvalid: touched.businessLegalName && !!errors.businessLegalName, errors: touched.businessLegalName && errors.businessLegalName, "data-testid": "ppp-form:input:business-legal-name", required: true }), _jsx(Input, { hasSpaceForErrors: true, name: "businessPhone", label: "Business Phone Number", type: "text", value: values.businessPhone && toPattern(values.businessPhone, '999-999-9999'), onBlur: handleBlur, onChange: (event) => {
event.target.value = toPattern(event.target.value, '999-999-9999');
handleChange(event);
}, isInvalid: touched.businessPhone && !!errors.businessPhone, errors: touched.businessPhone && errors.businessPhone, "data-testid": "ppp-form:input:business-phone", required: true }), _jsx(Input, { errors: touched.address && errors.address, hasSpaceForErrors: true, isInvalid: touched.address && errors.address, label: "Business Address", name: "address", onBlur: handleBlur, onChange: handleChange, value: values.address, "data-testid": "ppp-form:input:business-address", required: true }), _jsx(Input, { errors: touched.city && [errors.city], hasSpaceForErrors: true, isInvalid: touched.city && errors.city, label: "City", masktype: "city", name: "city", onBlur: handleBlur, onChange: handleChange, value: values.city, "data-testid": "ppp-form:input:business-city", required: true }), _jsxs(TwoColumn, { children: [_jsx(Select, { errors: touched.state && [errors.state], hasSpaceForErrors: true, isInvalid: touched.state && errors.state, label: "State", name: "state", type: "text", onBlur: handleBlur, onChange: handleChange, options: USStates, value: values.state, "data-testid": "ppp-form:input:business-state", required: true }), _jsx(Input, { errors: touched.zipCode && errors.zipCode, hasSpaceForErrors: true, isInvalid: touched.zipCode && errors.zipCode, label: "ZIP Code", name: "zipCode", onBlur: handleBlur, onChange: handleChange, value: toPattern(values.zipCode, '99999-9999'), "data-testid": "ppp-form:input:business-zip", required: true })] }), _jsx(Input, { errors: touched.dba && errors.dba, hasSpaceForErrors: true, isInvalid: touched.dba && errors.dba, label: "DBA or Tradename (If Applicable)", name: "dba", onBlur: handleBlur, onChange: handleChange, value: values.dba, "data-testid": "ppp-form:input:dba-tradename" }), _jsx(Select, { hasSpaceForErrors: true, isInvalid: touched.businessType && errors.businessType, label: "Small Business and Organization Type", name: "businessType", onBlur: handleBlur, onChange: handleChange, value: values.businessType, options: [
'Sole Proprietor',
'Partnership',
'C-Corp',
'S-Corp',
'LLC',
'Independent Contractor',
'Eligible Self Employed',
'501(c)(3) Non-Profit',
'501(c)(19) Veterans Organization',
'Tribal business (sec. 31(b)(2)(C) of Small Business Act)',
'Other',
], errors: touched.businessType && [errors.businessType], "data-testid": "ppp-form:select:dba-businessType", required: true })] }), _jsxs(StyledStandardCard, { children: [_jsxs(CardHeader, Object.assign({ bold: true }, { children: ["Payroll Information", ' ', _jsx(StyledIcon, { "data-testid": "ppp-form:info-drawer:payroll", name: "actions/circle-faq", onClick: () => dispatchOpenInfoDrawer({
children: (_jsxs(InfodrawerCopyWrapper, Object.assign({ "data-testid": "ppp-form:info-drawer:payroll-costs" }, { children: [_jsxs(Copy, { children: [_jsx(Text, Object.assign({ "$bold": true }, { children: "Payroll costs include: " })), "employee salary, wages and commissions; payment of cash tips; payment of vacation; parental, family, medical or sick leave; allowance for dismissal or separation; payment required for group health benefits (including insurance premiums); payment of retirement benefits; or payment of state or local tax assessed on employee compensation; and sole proprietor income or independent contractor compensation not in excess of $100,000. Do not include contractors for whom you provide a 1099; they can apply on their own."] }), _jsxs(Copy, { children: [_jsx(Text, Object.assign({ "$bold": true }, { children: "Payroll costs exclude: " })), "compensation of an individual person in excess of $100,000 (as prorated for the period);; compensation to an employee whose principal residence is outside of the U.S.; Federal employment taxes imposed or withheld between February 15, 2020 and June 30, 2020, including the employee\u2019s and employer\u2019s share of FICA (Federal Insurance Contributions Act) and Railroad Retirement Act taxes, and income taxes required to be withheld from employees; qualified sick or family leave wages for which a credit is allowed under Sections 7001 and 7003 of the Families First Coronavirus Response Act;"] })] }))),
title: 'Payroll information',
}) })] })), shouldShowCalculator && (_jsx(CalculatorSpacer, { children: _jsx("nav-sba-loan-calculator", Object.assign({ ref: calcEl, footer: "none", style: { display: 'block' } }, { children: _jsx("div", { slot: "cta" }) })) })), _jsx(Input, { hasSpaceForErrors: true, type: "text", name: "avgMonthlyPayroll", onChange: (e) => {
const maskedEvent = Object.assign({}, e);
maskedEvent.target.value = toUsdMoney(e.target.value);
handleChange(maskedEvent);
}, onBlur: handleBlur, value: toUsdMoney(values.avgMonthlyPayroll), label: "Average Monthly Payroll", errors: touched.avgMonthlyPayroll && errors.avgMonthlyPayroll, isInvalid: touched.avgMonthlyPayroll && errors.avgMonthlyPayroll, "data-testid": "ppp-form:input:avg-monthly-payroll", required: true }), _jsxs(ModifiedCardInsight, Object.assign({ "data-testid": "ppp-form:payroll-insight" }, { children: [_jsx(IconWrapper, { children: _jsx(Icon, { name: "actions/circle-info", onClick: () => dispatchOpenInfoDrawer({
children: (_jsx(InfodrawerCopyWrapper, Object.assign({ "data-testid": "ppp-form:info-drawer:eidl" }, { children: _jsx(Copy, { children: "Add the outstanding amount of an Economic Injury Disaster Loan (EIDL) made between January 31, 2020 and April 3, 2020, less the amount of any \"advance\" under an EIDL COVID-19 loan (because it does not have to be repaid)." }) }))),
title: 'EIDL Net of Advance',
}) }) }), _jsxs(Copy, { children: [_jsx(Text, Object.assign({ "$bold": true }, { children: "Loan Request Amount:" })), ' ', _jsx(StyledText, { children: "Average Monthly Payroll is multiplied 2.5x + If you received an Economic Injury Disaster Loan (EIDL) between January 31, 2020 and April 3, 2020 you must enter the total amount received minus the advance you received from the total." })] })] })), _jsx(Input, { hasSpaceForErrors: true, required: true, type: "text", name: "loanRequestAmount", label: "Loan Request Amount", onChange: (e) => {
const maskedEvent = Object.assign({}, e);
maskedEvent.target.value = toUsdMoney(e.target.value);
handleChange(maskedEvent);
}, onBlur: handleBlur, value: toUsdMoney(values.loanRequestAmount), errors: touched.loanRequestAmount && errors.loanRequestAmount, isInvalid: touched.loanRequestAmount && errors.loanRequestAmount, "data-testid": "ppp-form:input:loan-amount" }), _jsx(Input, { hasSpaceForErrors: true, type: "number", name: "numberOfEmployees", onChange: (e) => {
const maskedEvent = Object.assign({}, e);
if (maskedEvent.target.value >= 0) {
maskedEvent.target.value = toNumber(e.target.value);
handleChange(maskedEvent);
}
}, onBlur: handleBlur, value: toNumber(values.numberOfEmployees), label: "Number of Employees", errors: touched.numberOfEmployees && errors.numberOfEmployees, isInvalid: touched.numberOfEmployees && errors.numberOfEmployees, "data-testid": "ppp-form:input:number-of-jobs", required: true }), _jsxs(InlineHeader, Object.assign({ bold: true }, { children: ["Purpose of the loan", ' ', _jsx(StyledIcon, { "data-testid": "ppp-form:info-drawer:purpose", name: "actions/circle-faq", onClick: () => dispatchOpenInfoDrawer({
children: (_jsx(InfodrawerCopyWrapper, Object.assign({ "data-testid": "ppp-form:info-drawer:what-are-loans-for" }, { children: _jsx(Copy, { children: "You should use the proceeds from these loans on your: Payroll costs, including benefits; Interest on mortgage obligations incurred before February 15, 2020; Rent, under lease agreements in force before February 15, 2020; Utilities, for which service began before February 15, 2020 and refinancing an SBA Economic Injury Disaster Loan made between Jan. 1, 2020 and April 3, 2020. To be eligible for loan forgiveness, no more than 25% of loan proceeds may be used for non-payroll purposes, in addition to other requirements." }) }))),
title: 'Purpose of the loan',
}) })] })), _jsx(Checkbox, { hasSpaceForErrors: true, name: "purposePayroll", label: "Payroll", checked: values.purposePayroll, onChange: handleChange, onBlur: handleBlur, errors: touched.purposePayroll && errors.purposePayroll, isInvalid: touched.purposePayroll && errors.purposePayroll, "data-testid": "ppp-form:checkbox:purpose-payroll" }), _jsx(Checkbox, { hasSpaceForErrors: true, name: "purposeRent", label: "Lease / Mortgage Interest", checked: values.purposeRent, onChange: handleChange, onBlur: handleBlur, errors: touched.purposeRent && errors.purposeRent, isInvalid: touched.purposeRent && errors.purposeRent, "data-testid": "ppp-form:checkbox:purpose-rent" }), _jsx(Checkbox, { hasSpaceForErrors: true, name: "purposeUtilities", label: "Utilities", checked: values.purposeUtilities, onChange: handleChange, onBlur: handleBlur, errors: touched.purposeUtilities && errors.purposeUtilities, isInvalid: touched.purposeUtilities && errors.purposeUtilities, "data-testid": "ppp-form:checkbox:purpose-utilities" }), _jsx(Checkbox, { hasSpaceForErrors: true, name: "purposeOther", label: "Other (Explain below)", checked: values.purposeOther, onChange: handleChange, onBlur: handleBlur, errors: touched.purposeOther && errors.purposeOther, isInvalid: touched.purposeOther && errors.purposeOther, "data-testid": "ppp-form:checkbox:purpose-other" }), _jsx(Input, { hasSpaceForErrors: true, type: "text", name: "purposeOtherDesc", onChange: handleChange, onBlur: handleBlur, value: values.purposeOtherDesc, label: "Explanation", errors: touched.purposeOtherDesc && errors.purposeOtherDesc, isInvalid: touched.purposeOtherDesc && errors.purposeOtherDesc, "data-testid": "ppp-form:checkbox:purpose-other-desc", required: true })] }), _jsxs(StyledStandardCard, { children: [_jsx(CardHeader, Object.assign({ bold: true }, { children: "Applicant Ownership" })), _jsx(EmphasizedCopy, { children: "List all owners of 20% or more of the equity of the Applicant." }), _jsx(Input, { hasSpaceForErrors: true, type: "text", name: "ownerName1", onChange: handleChange, onBlur: handleBlur, value: values.ownerName1, label: "Owner Name", errors: touched.ownerName1 && errors.ownerName1, isInvalid: touched.ownerName1 && errors.ownerName1, "data-testid": "ppp-form:checkbox:purpose-owner-name-1", required: true }), _jsx(Input, { hasSpaceForErrors: true, type: "text", name: "ownerTitle1", onChange: handleChange, onBlur: handleBlur, value: values.ownerTitle1, label: "Title", errors: touched.ownerTitle1 && errors.ownerTitle1, isInvalid: touched.ownerTitle1 && errors.ownerTitle1, "data-testid": "ppp-form:checkbox:owner-title-1", required: true }), _jsx(Input, { hasSpaceForErrors: true, type: "text", name: "ownerPercent1", onChange: (e) => {
if (e.target.value.match(FLOATING_NUMBER_REGEX))
handleChange(e);
}, onBlur: (e) => {
const maskedEvent = Object.assign({}, e);
const parsed = parseFloat(maskedEvent.target.value);
if (parsed) {
maskedEvent.target.value = parsed;
handleChange(maskedEvent);
}
handleBlur(maskedEvent);
}, value: values.ownerPercent1, label: "Ownership Percentage", errors: touched.ownerPercent1 && errors.ownerPercent1, isInvalid: touched.ownerPercent1 && errors.ownerPercent1, "data-testid": "ppp-form:checkbox:owner-percent-1", required: true }), _jsx(Input, { hasSpaceForErrors: true, type: "text", name: "ownerAddress1", onChange: handleChange, onBlur: handleBlur, value: values.ownerAddress1, label: "Personal Address", errors: touched.ownerAddress1 && errors.ownerAddress1, isInvalid: touched.ownerAddress1 && errors.ownerAddress1, "data-testid": "ppp-form:checkbox:owner-address-1", required: true }), _jsx(EmphasizedCopy, { children: "If questions (1) or (2) below are answered \u201CYes,\u201D the loan will not be approved." }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "1. Is the Applicant or any owner of the Applicant presently suspended, debarred, proposed for debarment, declared ineligible, voluntarily excluded from participation in this transaction by any Federal department or agency, or presently involved in any bankruptcy?" }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question1 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question1", label: "Yes", isInvalid: submitCount > 0 && errors.question1, "data-testid": "ppp-form:question1-yes" }), _jsx(Radio, { checked: values.question1 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question1", label: "No", isInvalid: submitCount > 0 && errors.question1, "data-testid": "ppp-form:question1-no" })] })] }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "2. Has the Applicant, any owner of the Applicant, or any business owned or controlled by any of them, ever obtained a direct or guaranteed loan from SBA or any other Federal agency that is currently delinquent or has defaulted in the last 7 years and caused a loss to the government?" }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question2 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question2", label: "Yes", isInvalid: submitCount > 0 && errors.question2, "data-testid": "ppp-form:question2-yes" }), _jsx(Radio, { checked: values.question2 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question2", label: "No", isInvalid: submitCount > 0 && errors.question2, "data-testid": "ppp-form:question2-no" })] })] }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "3. Is the Applicant or any owner of the Applicant an owner of any other business, or have common management with, any other business? If yes, additional details will need to be added in an addendum upon application submission." }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question3 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question3", label: "Yes", isInvalid: submitCount > 0 && errors.question3, "data-testid": "ppp-form:question3-yes" }), _jsx(Radio, { checked: values.question3 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question3", label: "No", isInvalid: submitCount > 0 && errors.question3, "data-testid": "ppp-form:question3-no" })] })] }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "4. Has the Applicant received an SBA Economic Injury Disaster Loan between January 31, 2020 and April 3, 2020? If yes, additional details will need to be added in an addendum upon application submission." }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question4 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question4", label: "Yes", isInvalid: submitCount > 0 && errors.question4, "data-testid": "ppp-form:question4-yes" }), _jsx(Radio, { checked: values.question4 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question4", label: "No", isInvalid: submitCount > 0 && errors.question4, "data-testid": "ppp-form:question4-no" })] })] }), _jsx(FieldArray, { name: "additionalOwners", render: (arrayHelpers) => {
var _a;
return (_jsx("div", { children: ((_a = values === null || values === void 0 ? void 0 : values.additionalOwners) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (values.additionalOwners.map((owner, index) => {
const getFieldName = (name, i) => `additionalOwners.${i}.${name}`;
const getFieldErrors = (name, i) => { var _a, _b, _c, _d; return ((_b = (_a = touched.additionalOwners) === null || _a === void 0 ? void 0 : _a[i]) === null || _b === void 0 ? void 0 : _b[name]) && ((_d = (_c = errors.additionalOwners) === null || _c === void 0 ? void 0 : _c[i]) === null || _d === void 0 ? void 0 : _d[name]); };
return (_jsxs(AdditionalOwnersWrapper, { children: [_jsx(AdditionalOwnerField, { children: _jsx(Field, { name: getFieldName('name', index), as: Input, label: "Additional Owner Name", type: "text", "data-testid": `ppp-form:additional-owner-${index}`, errors: getFieldErrors('name', index), isInvalid: getFieldErrors('name', index), hasSpaceForErrors: true, required: true }) }), _jsx(AdditionalOwnerField, { children: _jsx(Field, { name: getFieldName('address', index), as: Input, label: "Personal Address", type: "text", "data-testid": `ppp-form:additional-owner-address-${index}`, errors: getFieldErrors('address', index), isInvalid: getFieldErrors('address', index), hasSpaceForErrors: true, required: true }) }), _jsx(AdditionalOwnerField, { children: _jsx(Field, { name: getFieldName('title', index), as: Input, label: "Title", type: "text", "data-testid": `ppp-form:additional-owner-title-${index}`, errors: getFieldErrors('title', index), isInvalid: getFieldErrors('title', index), hasSpaceForErrors: true, required: true }) }), _jsx(AdditionalOwnerField, { children: _jsx(Field, { name: getFieldName('percent', index), as: Input, label: "Ownership Percentage", type: "text", onChange: (e) => {
if (e.target.value.match(FLOATING_NUMBER_REGEX))
handleChange(e);
}, onBlur: (e) => {
const maskedEvent = Object.assign({}, e);
const parsed = parseFloat(maskedEvent.target.value);
if (parsed) {
maskedEvent.target.value = parsed;
handleChange(maskedEvent);
}
handleBlur(maskedEvent);
}, "data-testid": `ppp-form:additional-owner-percent-${index}`, errors: getFieldErrors('percent', index), isInvalid: getFieldErrors('percent', index), hasSpaceForErrors: true, required: true }) }), _jsxs("div", Object.assign({ className: "action-buttons" }, { children: [_jsx(StyledIcon, { name: "actions/circle-plus", color: "navPrimary", onClick: () => {
if (index < 3)
arrayHelpers.insert(index + 1, EMPTY_OWNER);
}, "data-testid": "pp-form:additional-owner-plus" }), _jsx(StyledIcon, { name: "actions/circle-minus", color: "warning", onClick: () => arrayHelpers.remove(index), "data-testid": "pp-form:additional-owner-minus" })] }))] }, index));
})) : (_jsxs(FlexWrapper, Object.assign({ onClick: () => arrayHelpers.push(EMPTY_OWNER), "data-testid": "pp-form:additional-owner-add" }, { children: [_jsx(StyledIcon, { name: "actions/circle-plus", color: "navPrimary" }), _jsx(AdditionalOwner, Object.assign({ type: "button" }, { children: "Add additional owner" }))] }))) }));
} })] }), _jsxs(StyledStandardCard, { children: [_jsx(CardHeader, Object.assign({ bold: true }, { children: "Questions" })), _jsx(EmphasizedCopy, { children: "If questions (5) or (6) below are answered \u201CYes,\u201D the loan will not be approved." }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "5. Is the Applicant (if an individual) or any individual owning 20% or more of the equity of the Applicant subject to an indictment, criminal information, arraignment, or other means by which formal criminal charges are brought in any jurisdiction, or presently incarcerated, or on probation or parole?" }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question5 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question5", label: "Yes", isInvalid: submitCount > 0 && errors.question5, "data-testid": "pp-form:question5-yes" }), _jsx(Radio, { checked: values.question5 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question5", label: "No", isInvalid: submitCount > 0 && errors.question5, "data-testid": "pp-form:question5-no" })] })] }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "6. Within the last 5 years, for any felony, has the Applicant (if an individual) or any owner of the Applicant 1) been convicted; 2) pleaded guilty; 3) pleaded nolo contendere; 4) been placed on pretrial diversion; or 5) been placed on any form of parole or probation (including probation before judgment)?" }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question6 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question6", label: "Yes", isInvalid: submitCount > 0 && errors.question6, "data-testid": "pp-form:question6-yes" }), _jsx(Radio, { checked: values.question6 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question6", label: "No", isInvalid: submitCount > 0 && errors.question6, "data-testid": "pp-form:question6-no" })] })] }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "7. Is the United States the principal place of residence for all employees of the Applicant included in the Applicant\u2019s payroll calculation above?" }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question7 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question7", label: "Yes", isInvalid: submitCount > 0 && errors.question7, "data-testid": "pp-form:question7-yes" }), _jsx(Radio, { checked: values.question7 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question7", label: "No", isInvalid: submitCount > 0 && errors.question7, "data-testid": "pp-form:question7-no" })] })] }), _jsxs(QuestionWrapper, { children: [_jsx(QuestionCopy, { children: "8. Is the Applicant a franchise that is listed in the SBA\u2019s Franchise Directory?" }), _jsxs(RadioGroup, { children: [_jsx(Radio, { checked: values.question8 === 'yes', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "yes", name: "question8", label: "Yes", isInvalid: submitCount > 0 && errors.question8, "data-testid": "pp-form:question8-yes" }), _jsx(Radio, { checked: values.question8 === 'no', onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: "no", name: "question8", label: "No", isInvalid: submitCount > 0 && errors.question8, "data-testid": "pp-form:question8-no" })] })] }), shouldShowPasswordField && (_jsxs(CreateAccountWrapper, { children: [_jsx(StyledCDNAsset, { directory: isRebrand(theme) ? 'illustrations' : 'design-assets/illustrations', height: "126px", filename: isRebrand(theme) ? 'desktop-money-green-light.svg' : 'CARES-app-thank+you.png' }), _jsx(CreateAccountHeader, { children: "Save all of your information to a free Nav account and access more financing options and business credit reports." }), _jsx(Input, { hasSpaceForErrors: true, type: "password", name: "password", onChange: handleChange, onBlur: handleBlur, value: values.password, label: "Password", errors: touched.password && errors.password, isInvalid: touched.password && errors.password, "data-testid": "ppp-form:input:password", required: true })] })), _jsx(LegalCheckbox, { hasSpaceForErrors: true, name: "termsOfService", label: _jsxs(Copy, { children: ["Information is gathered in accordance with Nav\u2019s Privacy Policy. By checking this box, I confirm that I have read and agree to Nav\u2019s", ' ', _jsx(Link, Object.assign({ href: "https://www.nav.com/terms/", target: "_blank", rel: "noopener noreferrer", "data-testid": "pp-form:terms-service-link" }, { children: "Terms of Service" })), ", including the", ' ', _jsx(Link, Object.assign({ href: "https://www.nav.com/privacy/", target: "_blank", rel: "noopener noreferrer", "data-testid": "pp-form:privacy-link" }, { children: "Privacy Policy" })), "."] }), checked: values.termsOfService, onChange: handleChange, onBlur: handleBlur, errors: touched.termsOfService > 0 && errors.termsOfService, isInvalid: touched.termsOfService > 0 && errors.termsOfService, "data-testid": "pp-form:terms-of-service" }), !isEmpty(errors.totalPercent) && _jsx(ErrorsMessage, { children: errors.totalPercent[0] }), !isEmpty(errors) && (_jsx(ErrorsMessage, { children: "Please complete all required fields before submitting your application." })), _jsx(SubmitButton, Object.assign({ size: "extraLarge", type: "submit", disabled: !isEmpty(errors), "data-testid": "pp-form:submit-cta", isLoading: isSubmittingForm }, { children: "Submit" })), _jsx(DisclaimerText, { children: "Please keep in mind this information is changing rapidly and is based on our current understanding of the programs. Please do not rely solely on information provided here for your financial decisions." })] })] }))) })));
};
SBAPaycheckProtectionProgramForm.propTypes = {
initialValues: propTypes.object,
isSubmittingForm: propTypes.bool,
onFormSubmit: propTypes.func.isRequired,
dispatchOpenInfoDrawer: propTypes.func.isRequired,
shouldShowLoginPrompt: propTypes.bool,
loginPromptUrl: propTypes.string,
onLoginPromptDismiss: propTypes.func,
shouldShowPasswordField: propTypes.bool,
};
export default SBAPaycheckProtectionProgramForm;
//# sourceMappingURL=sba-form.js.map