@navinc/base-react-components/src/sba-resources.js

Nav's Pattern Library

import { Fragment, useState } from 'react'
import styled from 'styled-components'
import { Header } from './header.js'
import { Copy } from './copy.js'
import { Link } from './link.js'
import { Icon } from './icon.js'
import { Aside } from './aside.js'

export const Toggle = ({ isToggleOpen = false, children }) => {
  const [isOpen, setIsOpen] = useState(isToggleOpen)

  const toggle = () => {
    setIsOpen(!isOpen)
  }

  return children({
    isOpen,
    toggle,
  })
}

const SectionWrapper = styled.div`
  padding: 18px;
`

const SubSection = styled.div`
  & ~ & {
    margin-top: 24px;
  }

  & ${Copy} {
    margin-top: 8px;
  }
`

const StyledToggleWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  cursor: pointer;
`
const StyledIconWrapper = styled.div`
  text-align: right;
  padding-top: 16px;
`
const StyledHeaderWrapper = styled.div`
  text-align: left;
`

export const COVID19Resources = ({
  shouldShowSBAApplicationAndCalculatorSection,
  shouldShowBothSBAApplicationAndCalculator = shouldShowSBAApplicationAndCalculatorSection,
  shouldHideNavCaresActSection = false,
  className,
  links = {},
}) => {
  const [toggled, setToggled] = useState(true)
  const { pppForm, sbaLoanCalc, documentionChecklist } = links

  if (shouldHideNavCaresActSection) {
    return <Fragment className={className}>{null}</Fragment>
  } else {
    return (
      <Fragment className={className}>
        {shouldShowBothSBAApplicationAndCalculator ? (
          <>
            <SectionWrapper>
              <StyledToggleWrapper onClick={() => setToggled(!toggled)}>
                <StyledHeaderWrapper>
                  <Header size="xs" id="free-ppp-tools">
                    Free PPP Tools
                  </Header>
                  <Copy light size="sm">
                    Updated Dec 20, 2022 | by Nav
                  </Copy>
                </StyledHeaderWrapper>
                <StyledIconWrapper>
                  <Icon name={`actions/carrot-${toggled ? 'up' : 'down'}`} />
                </StyledIconWrapper>
              </StyledToggleWrapper>
              {toggled && (
                <>
                  <SubSection>
                    <Copy>
                      <Link
                        data-testid="covid-resourse:sba-loan-form:application-link1"
                        href={pppForm}
                        rel="noopener noreferrer"
                        target="_blank"
                        bold
                      >
                        Need a PPP loan? Apply with a Nav lending partner in 15 minutes or less!
                      </Link>{' '}
                      - Don’t miss out on PPP funds - whether it’s your first or second draw. Fill out Nav’s form today
                      to get matched instantly to a PPP lender. Once you see your match, complete your PPP application
                      with the lender in 15 minutes or less!
                    </Copy>
                    <Copy>
                      <Link
                        data-testid="covid-resourse:sba-loan-form:application-link2"
                        href={pppForm}
                        rel="noopener noreferrer"
                        target="_blank"
                        bold
                      >
                        Get started
                      </Link>
                    </Copy>
                  </SubSection>
                  <SubSection>
                    <Aside>
                      Note: Information and/or an application submitted to one of Nav’s partners does not guarantee you
                      will receive/be approved for a PPP loan.
                    </Aside>
                  </SubSection>
                  <SubSection>
                    <Copy>
                      <Link
                        data-testid="covid-resource:sba-loan-checklist:link1"
                        href={documentionChecklist}
                        rel="noopener noreferrer"
                        target="_blank"
                        bold
                      >
                        PPP Documentation Checklist
                      </Link>{' '}
                      - Use this checklist to gather the documentation that you need to complete your PPP loan
                      application. Having these ready will speed up the application process.
                    </Copy>
                    <Copy>
                      <Link
                        data-testid="covid-resource:sba-loan-checklist:link2"
                        href={documentionChecklist}
                        rel="noopener noreferrer"
                        target="_blank"
                        bold
                      >
                        See checklist
                      </Link>
                    </Copy>
                  </SubSection>
                  <SubSection>
                    <Copy>
                      <Link
                        data-testid="covid-resourse:sba-loan-calculator:link1"
                        href={sbaLoanCalc}
                        rel="noopener noreferrer"
                        target="_blank"
                        bold
                      >
                        PPP Loan Calculator and FAQ
                      </Link>{' '}
                      - Find out how much your business may qualify for with the new Paycheck Protection Loans.
                    </Copy>
                    <Copy>
                      <Link
                        data-testid="covid-resourse:sba-loan-calculator:link2"
                        href={sbaLoanCalc}
                        rel="noopener noreferrer"
                        target="_blank"
                        bold
                      >
                        Go to calculator
                      </Link>
                    </Copy>
                  </SubSection>
                </>
              )}
            </SectionWrapper>
          </>
        ) : (
          <>
            <SectionWrapper>
              <StyledToggleWrapper onClick={() => setToggled(!toggled)}>
                <StyledHeaderWrapper>
                  <Header size="xs">CARES Act SBA Loan Calculator</Header>
                  <Copy light size="sm">
                    Updated Dec 20, 2022 | by Nav
                  </Copy>
                </StyledHeaderWrapper>
                <StyledIconWrapper>
                  <Icon name={`actions/carrot-${toggled ? 'up' : 'down'}`} />
                </StyledIconWrapper>
              </StyledToggleWrapper>
              {toggled && (
                <SubSection>
                  <Copy>
                    <Link
                      data-testid="covid-resourse:sba-loan-calculator:link1"
                      href={sbaLoanCalc}
                      target="_blank"
                      rel="noreferrer"
                      bold
                    >
                      CARES Act SBA Loan Calculator and FAQ
                    </Link>{' '}
                    - Find out how much your business may qualify for with the new Paycheck Protection Loans.
                  </Copy>
                  <Copy>
                    <Link
                      data-testid="covid-resourse:sba-loan-calculator:link2"
                      href={sbaLoanCalc}
                      target="_blank"
                      rel="noreferrer"
                      bold
                    >
                      Go to calculator
                    </Link>
                  </Copy>
                </SubSection>
              )}
            </SectionWrapper>
          </>
        )}
      </Fragment>
    )
  }
}