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

Nav's Pattern Library

import React, { Fragment, useState } from 'react'
import styled from 'styled-components'
import Header from './header.js'
import Copy from './copy.js'
import Text from './text.js'
import Icon from './icon.js'
import BlockQuote from './aside.js'

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

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

  return children({
    isOpen: isOpen,
    toggle: toggle,
  })
}

const Hr = styled.hr`
  flex: 1;
  width: 100%;
  margin: 16px 0;
  border: 0;
  border-top: 1px solid ${({ theme }) => theme.neutral300};
`

const SectionWrapper = styled.div`
  padding: 18px;
`
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;
`

const Link = styled(Text).attrs(() => ({ as: 'a' }))`
  font-size: inherit;
  color: ${({ theme }) => theme.azure};
  text-decoration: none;

  &:hover {
    color: ${({ theme }) => theme.oceanBoat};
  }

  &:active {
    color: ${({ theme }) => theme.oceanBoat};
  }
`

export const COVID19Resources = ({
  shouldShowSBAApplicationAndCalculatorSection,
  shouldShowBothSBAApplicationAndCalculator = shouldShowSBAApplicationAndCalculatorSection,
  shouldHideNavCaresActSection = false,
  className,
  links = {},
}) => {
  const [toggled, setToggled] = useState(true)
  const { pppForm, sbaLoanCalc, documentionChecklist } = links
  return (
    <Fragment className={className}>
      {shouldHideNavCaresActSection ? null : shouldShowBothSBAApplicationAndCalculator ? (
        <>
          <SectionWrapper>
            <StyledToggleWrapper onClick={() => setToggled(!toggled)}>
              <StyledHeaderWrapper>
                <Header size="lg" id="free-ppp-tools">
                  Free PPP Tools
                </Header>
                <Copy light size="sm">
                  Updated January 11, 2021 | by Nav
                </Copy>
              </StyledHeaderWrapper>
              <StyledIconWrapper>
                <Icon name={`actions/carrot-${toggled ? 'up' : 'down'}`} />
              </StyledIconWrapper>
            </StyledToggleWrapper>
            {toggled && (
              <>
                <Copy>
                  <Link
                    data-testid="covid-resourse:sba-loan-form:application-link1"
                    href={pppForm}
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    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"
                  >
                    Get started
                  </Link>
                </Copy>
                <BlockQuote>
                  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.
                </BlockQuote>
                <br />
                <Copy>
                  <Link
                    data-testid="covid-resource:sba-loan-checklist:link1"
                    href={documentionChecklist}
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    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"
                  >
                    See checklist
                  </Link>
                </Copy>
                <Copy>
                  <Link
                    data-testid="covid-resourse:sba-loan-calculator:link1"
                    href={sbaLoanCalc}
                    rel="noopener noreferrer"
                    target="_blank"
                  >
                    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"
                  >
                    Go to calculator
                  </Link>
                </Copy>
              </>
            )}
          </SectionWrapper>
          <Hr />
        </>
      ) : (
        <>
          <SectionWrapper>
            <StyledToggleWrapper onClick={() => setToggled(!toggled)}>
              <StyledHeaderWrapper>
                <Header size="lg">CARES Act SBA Loan Calculator</Header>
                <Copy light size="sm">
                  Updated April 4, 2020 | by Nav
                </Copy>
              </StyledHeaderWrapper>
              <StyledIconWrapper>
                <Icon name={`actions/carrot-${toggled ? 'up' : 'down'}`} />
              </StyledIconWrapper>
            </StyledToggleWrapper>
            {toggled && (
              <>
                <Copy>
                  <Link
                    data-testid="covid-resourse:sba-loan-calculator:link1"
                    href={sbaLoanCalc}
                    target="_blank"
                    rel="noreferrer"
                  >
                    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"
                  >
                    Go to calculator
                  </Link>
                </Copy>
              </>
            )}
          </SectionWrapper>
          <Hr />
        </>
      )}
    </Fragment>
  )
}