@material-ui/icons#Work TypeScript Examples

withFullConfig = (): StoryFnReactReturnType => {
    const classes = useStyles();
    const direction = getDirection();
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    // AppBar props
    const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
    const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
    const collapsedHeight = number('collapsedHeight', 64, {}, appBarGroupId);
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
    // ThreeLiner props
    const title = text('title', 'title', threeLinerGroupId);
    const subtitle = text('subtitle', 'subtitle', threeLinerGroupId);
    const info = text('info', 'info', threeLinerGroupId);

    return (
        <AppBar
            expandedHeight={expandedHeight}
            collapsedHeight={collapsedHeight}
            scrollThreshold={scrollThreshold}
            animationDuration={animationDuration}
            backgroundImage={showBackgroundImage ? bgImage : undefined}
            variant={variant}
            classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
        >
            <Toolbar classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}>
                <IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
                    <Menu />
                </IconButton>
                <Spacer />
                <ThreeLiner
                    classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                    className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
                    title={title}
                    subtitle={subtitle}
                    info={info}
                    animationDuration={animationDuration}
                />
                <div style={{ display: 'flex', flexDirection: 'row' }}>
                    <IconButton onClick={action('home icon clicked...')} color={'inherit'}>
                        <Home />
                    </IconButton>
                    <IconButton onClick={action('work icon clicked...')} color={'inherit'}>
                        <Work />
                    </IconButton>
                    <IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
                        <Settings />
                    </IconButton>
                </div>
            </Toolbar>
        </AppBar>
    );
}

withBluiAppBar = (): StoryFnReactReturnType => {
    const classes = useStyles();
    const direction = getDirection();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    const toolbarMenuGroupId = 'ToolbarMenu';
    // AppBar props
    const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
    const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
    const collapsedDesktopHeight = number('collapsedDesktopHeight', 64, {}, appBarGroupId);
    const collapsedMobileHeight = number('collapsedMobileHeight', 56, {}, appBarGroupId);
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
    // ThreeLiner props
    const title = text('title', 'title', threeLinerGroupId);
    const info = text('info', 'info', threeLinerGroupId);
    // ToolbarMenu props
    const toolbarLabel = text('label', 'Subtitle', toolbarMenuGroupId);
    return (
        <>
            <AppBar
                expandedHeight={expandedHeight}
                collapsedHeight={!isMobile ? collapsedDesktopHeight : collapsedMobileHeight}
                scrollThreshold={scrollThreshold}
                animationDuration={animationDuration}
                backgroundImage={showBackgroundImage ? bgImage : undefined}
                variant={variant}
                classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
            >
                <Toolbar
                    classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}
                >
                    <IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
                        <Menu />
                    </IconButton>
                    <Spacer />
                    <ThreeLiner
                        classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                        className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
                        title={title}
                        subtitle={
                            <ToolbarMenu
                                classes={{ root: classes.toolbarMenuRoot }}
                                label={toolbarLabel}
                                menuGroups={menuGroups}
                            ></ToolbarMenu>
                        }
                        info={info}
                        animationDuration={animationDuration}
                    />
                    <div style={{ display: 'flex', flexDirection: 'row' }}>
                        <IconButton onClick={action('home icon clicked...')} color={'inherit'}>
                            <Home />
                        </IconButton>
                        <IconButton onClick={action('work icon clicked...')} color={'inherit'}>
                            <Work />
                        </IconButton>
                        <IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
                            <Settings />
                        </IconButton>
                    </div>
                </Toolbar>
            </AppBar>
            <div>{getBodyFiller()}</div>
        </>
    );
}

export default function EstimatedTaxes(): ReactElement {
  const defaultValues = blankUserInput
  const activeYear: TaxYear = useSelector(
    (state: YearsTaxesState) => state.activeYear
  )

  const estimatedTaxes = useYearSelector(
    (state) => state.information.estimatedTaxes
  )

  const dispatch = useDispatch()

  const methods = useForm<EstimatedTaxesUserInput>({ defaultValues })

  const { navButtons, onAdvance } = usePager()

  const onSubmitAdd = (formData: EstimatedTaxesUserInput): void => {
    dispatch(addEstimatedPayment(toPayments(formData)))
  }

  const onSubmitEdit =
    (index: number) =>
    (formData: EstimatedTaxesUserInput): void => {
      dispatch(editEstimatedPayment({ index, value: toPayments(formData) }))
    }

  const w2sBlock = (
    <FormListContainer<EstimatedTaxesUserInput>
      defaultValues={defaultValues}
      items={estimatedTaxes.map((a) => toEstimatedTaxesUserInput(a))}
      onSubmitAdd={onSubmitAdd}
      onSubmitEdit={onSubmitEdit}
      removeItem={(i) => dispatch(removeEstimatedPayment(i))}
      icon={() => <Work />}
      primary={(estimatedTaxes: EstimatedTaxesUserInput) =>
        estimatedTaxes.label
      }
      secondary={(estimatedTaxes: EstimatedTaxesUserInput) => (
        <span>
          Payment: <Currency value={toPayments(estimatedTaxes).payment} />
        </span>
      )}
    >
      <Grid container spacing={2}>
        <LabeledInput
          name="label"
          label="label or date of this payment"
          patternConfig={Patterns.plain}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="payment"
          label="Estimated tax payment"
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
      </Grid>
    </FormListContainer>
  )

  const form: ReactElement = <>{w2sBlock}</>

  return (
    <form tabIndex={-1} onSubmit={onAdvance}>
      <h2>Estimated Taxes</h2>
      <p>
        Did you already make payments towards your {activeYear} taxes this year
        or last year?
      </p>
      <FormProvider {...methods}>{form}</FormProvider>
      {navButtons}
    </form>
  )
}

export default function W2JobInfo(): ReactElement {
  const dispatch = useDispatch()
  const defaultValues = blankW2UserInput
  const methods = useForm<IncomeW2UserInput>({
    defaultValues
  })

  const { navButtons, onAdvance } = usePager()

  const information: Information = useSelector(
    (state: TaxesState) => state.information
  )

  const spouse: Spouse | undefined = information.taxPayer.spouse

  const primary: PrimaryPerson | undefined = information.taxPayer.primaryPerson

  const filingStatus: FilingStatus | undefined =
    information.taxPayer.filingStatus

  // People for employee selector
  const people: Person[] = [primary, spouse].flatMap((p) =>
    p !== undefined ? [p as Person] : []
  )

  const w2s: IncomeW2[] = information.w2s
  const spouseW2s = w2s.filter((w2) => w2.personRole === PersonRole.SPOUSE)

  const onSubmitAdd = (formData: IncomeW2UserInput): void => {
    dispatch(addW2(toIncomeW2(formData)))
  }

  const onSubmitEdit =
    (index: number) =>
    (formData: IncomeW2UserInput): void => {
      dispatch(editW2({ index, value: toIncomeW2(formData) }))
    }

  const w2sBlock = (
    <FormListContainer<IncomeW2UserInput>
      defaultValues={defaultValues}
      items={w2s.map((a) => toIncomeW2UserInput(a))}
      onSubmitAdd={onSubmitAdd}
      onSubmitEdit={onSubmitEdit}
      removeItem={(i) => dispatch(removeW2(i))}
      icon={() => <Work />}
      primary={(w2: IncomeW2UserInput) =>
        w2.employer?.employerName ?? w2.occupation
      }
      secondary={(w2: IncomeW2UserInput) => (
        <span>
          Income: <Currency value={toIncomeW2(w2).income} />
        </span>
      )}
      grouping={(w2) => (w2.personRole === PersonRole.PRIMARY ? 0 : 1)}
      groupHeaders={[primary?.firstName, spouse?.firstName].map((x) =>
        x !== undefined ? <h2>{x}&apos; W2s</h2> : undefined
      )}
    >
      <p>Input data from W-2</p>
      <Grid container spacing={2}>
        <LabeledInput
          autofocus={true}
          label="Employer name"
          required={true}
          name="employer.employerName"
          sizes={{ xs: 12 }}
        />
        <LabeledInput
          label={boxLabel('b', "Employer's Identification Number")}
          patternConfig={Patterns.ein}
          name="employer.EIN"
          sizes={{ xs: 12 }}
        />
        <LabeledInput
          label="Occupation"
          patternConfig={Patterns.name}
          name="occupation"
          sizes={{ xs: 12 }}
        />
        <LabeledInput
          name="income"
          label={boxLabel('1', ' Wages, tips, other compensation')}
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="fedWithholding"
          label={boxLabel('2', 'Federal income tax withheld')}
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="ssWages"
          label={boxLabel('3', 'Social security wages')}
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="ssWithholding"
          label={boxLabel('4', 'Social security tax withheld')}
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="medicareIncome"
          label={boxLabel('5', 'Medicare Income')}
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="medicareWithholding"
          label={boxLabel('6', 'Medicare tax withheld')}
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <USStateDropDown name="state" label={boxLabel('15', 'State')} />
        <Grid item xs={12} lg={12}>
          <Box12Data />
        </Grid>
        <LabeledInput
          name="stateWages"
          label={boxLabel('16', 'State wages, tips, etc')}
          patternConfig={Patterns.currency}
          required={true}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="stateWithholding"
          label={boxLabel('17', 'State income tax')}
          patternConfig={Patterns.currency}
          required={true}
          sizes={{ xs: 12, lg: 6 }}
        />
        <GenericLabeledDropdown
          dropDownData={people}
          label="Employee"
          required={true}
          valueMapping={(p: Person, i: number) =>
            [PersonRole.PRIMARY, PersonRole.SPOUSE][i]
          }
          name="personRole"
          keyMapping={(p: Person, i: number) => i}
          textMapping={(p) =>
            `${p.firstName} ${p.lastName} (${formatSSID(p.ssid)})`
          }
        />
      </Grid>
    </FormListContainer>
  )

  const spouseW2Message: ReactNode = (() => {
    if (
      spouse !== undefined &&
      spouseW2s.length > 0 &&
      filingStatus === FilingStatus.MFS
    ) {
      return (
        <div>
          <Box marginBottom={3}>
            <Alert className="inner" severity="warning">
              Filing status is set to Married Filing Separately.{' '}
              <strong>{spouse.firstName}</strong>
              &apos;s W2s will not be added to the return.
            </Alert>
          </Box>
        </div>
      )
    }
  })()

  const form: ReactElement = (
    <>
      {w2sBlock}
      {spouseW2Message}
    </>
  )

  return (
    <FormProvider {...methods}>
      <form tabIndex={-1} onSubmit={onAdvance}>
        <Helmet>
          <title>Job Information | Income | UsTaxes.org</title>
        </Helmet>
        <h2>Job Information</h2>
        {form}
        {navButtons}
      </form>
    </FormProvider>
  )
}

export default function IRA(): ReactElement {
  const defaultValues = blankUserInput
  const ira = useYearSelector(
    (state: TaxesState) => state.information.individualRetirementArrangements
  )

  const people: Person[] = useYearSelector((state: TaxesState) => [
    state.information.taxPayer.primaryPerson,
    state.information.taxPayer.spouse
  ])
    .filter((p) => p !== undefined)
    .map((p) => p as Person)

  const dispatch = useYearDispatch()

  const methods = useForm<IraUserInput>({ defaultValues })
  const { handleSubmit } = methods

  const { navButtons, onAdvance } = usePager()

  const onSubmitAdd = (formData: IraUserInput): void => {
    dispatch(addIRA(toIra(formData)))
  }

  const onSubmitEdit =
    (index: number) =>
    (formData: IraUserInput): void => {
      dispatch(editIRA({ index, value: toIra(formData) }))
    }

  const hsaBlock = (
    <FormListContainer<IraUserInput>
      defaultValues={defaultValues}
      items={ira.map((a) => toIraUserInput(a))}
      onSubmitAdd={onSubmitAdd}
      onSubmitEdit={onSubmitEdit}
      removeItem={(i) => dispatch(removeIRA(i))}
      icon={() => <Work />}
      primary={(ira: IraUserInput) => ira.payer}
      secondary={(ira: IraUserInput) => (
        <span>
          {IraPlanTypeTexts[ira.planType]}
          <br />
          gross distribution: <Currency value={toIra(ira).grossDistribution} />
          <br />
          contribution: <Currency value={toIra(ira).contributions} />
          <br />
        </span>
      )}
    >
      <Grid container spacing={2}>
        <LabeledInput<IraUserInput>
          name="payer"
          label="Payer for this account"
          patternConfig={Patterns.plain}
          sizes={{ xs: 12, lg: 12 }}
        />
        <GenericLabeledDropdown<IraPlanType, IraUserInput>
          label="IRA Type"
          dropDownData={Object.values(IraPlanType)}
          valueMapping={(x) => x}
          keyMapping={(_, i) => i}
          textMapping={(status) => IraPlanTypeTexts[status]}
          name="planType"
        />
        <GenericLabeledDropdown<Person, IraUserInput>
          dropDownData={people}
          label="Recipient"
          valueMapping={(p: Person, i: number) =>
            [PersonRole.PRIMARY, PersonRole.SPOUSE][i]
          }
          name="personRole"
          keyMapping={(p: Person, i: number) => i}
          textMapping={(p: Person) =>
            `${p.firstName} ${p.lastName} (${formatSSID(p.ssid)})`
          }
        />
      </Grid>
      <h3>Contributions (Form 5498)</h3>
      <p>
        If you made no contributions you may not have received form 5498 for
        this account and may leave these fields blank.
      </p>
      <Grid container spacing={2}>
        <LabeledInput
          name="contributions"
          label="Contributions"
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="rolloverContributions"
          label={boxLabel('2', 'Rollover contributions')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="rothIraConversion"
          label={boxLabel('3', 'Amount converted to Roth IRA')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="recharacterizedContributions"
          label={boxLabel('4', 'Recharacterized contributions')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="requiredMinimumDistributions"
          label={boxLabel('12b', 'Required minimum distributions')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="lateContributions"
          label={boxLabel('13a', 'Late contributions')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="repayments"
          label={boxLabel('14a', 'Repayments to this account')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
      </Grid>
      <h3>Distributions (Form 1099-R)</h3>
      <p>
        If you have no distributions from this account then you may not have
        received form 1099-R and may leave these fields blank.
      </p>

      <Grid container spacing={2}>
        <LabeledInput
          name="grossDistribution"
          label={boxLabel('1', 'Total distributions')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="taxableAmount"
          label={boxLabel(
            '2a',
            'This part of the distribution is generally taxable'
          )}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput
          name="federalIncomeTaxWithheld"
          label={boxLabel('4a', 'Federal income tax withheld')}
          patternConfig={Patterns.currency}
          required={false}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledCheckbox
          name="taxableAmountNotDetermined"
          label="Check if the payer was unable to determine the taxable amount"
        />
        <LabeledCheckbox
          name="totalDistribution"
          label="This distribution closed out your account"
        />
      </Grid>
    </FormListContainer>
  )

  const form: ReactElement = <>{hsaBlock}</>

  return (
    <FormProvider {...methods}>
      <form
        tabIndex={-1}
        onSubmit={intentionallyFloat(handleSubmit(onAdvance))}
      >
        <Helmet>
          <title>
            Individual Retirement Arrangements (IRA) | Savings Accounts |
            UsTaxes.org
          </title>
        </Helmet>
        <h2>Individual Retirement Arrangements (IRA)</h2>
        {form}
        {navButtons}
      </form>
    </FormProvider>
  )
}

export default function HealthSavingsAccounts(): ReactElement {
  const defaultValues = blankUserInput
  const hsa = useYearSelector(
    (state: TaxesState) => state.information.healthSavingsAccounts
  )

  const people: Person[] = useYearSelector((state: TaxesState) => [
    state.information.taxPayer.primaryPerson,
    state.information.taxPayer.spouse
  ])
    .filter((p) => p !== undefined)
    .map((p) => p as Person)

  const dispatch = useYearDispatch()

  const methods = useForm<HSAUserInput>({ defaultValues })
  const { handleSubmit } = methods

  const activeYear: TaxYear = useSelector(
    (state: YearsTaxesState) => state.activeYear
  )

  const { navButtons, onAdvance } = usePager()

  const onSubmitAdd = (formData: HSAUserInput): void => {
    dispatch(addHSA(toHSA(formData)))
  }

  const onSubmitEdit =
    (index: number) =>
    (formData: HSAUserInput): void => {
      dispatch(editHSA({ index, value: toHSA(formData) }))
    }

  const hsaBlock = (
    <FormListContainer<HSAUserInput>
      defaultValues={defaultValues}
      items={hsa.map((a) => toHSAUserInput(a))}
      onSubmitAdd={onSubmitAdd}
      onSubmitEdit={onSubmitEdit}
      removeItem={(i) => dispatch(removeHSA(i))}
      icon={() => <Work />}
      primary={(hsa: HSAUserInput) => hsa.label}
      secondary={(hsa: HSAUserInput) => (
        <span>
          contributions: <Currency value={toHSA(hsa).contributions} />
          <br />
          total distributions:{' '}
          <Currency value={toHSA(hsa).totalDistributions} />
          <br />
          qualified distributions:{' '}
          <Currency value={toHSA(hsa).qualifiedDistributions} />
          <br />
          coverage type: {hsa.coverageType}
          <br />
          coverage span: {format(hsa.startDate, 'MMMM do, yyyy')} to{' '}
          {format(hsa.endDate, 'MMMM do, yyyy')}
        </span>
      )}
    >
      <Grid container spacing={2}>
        <LabeledInput<HSAUserInput>
          name="label"
          label="label for this account"
          patternConfig={Patterns.plain}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput<HSAUserInput>
          name="contributions"
          label="Your total contributions to this account."
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput<HSAUserInput>
          name="totalDistributions"
          label="Total distributions from this account."
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledInput<HSAUserInput>
          name="qualifiedDistributions"
          label="Qualified medical distributions from this account."
          patternConfig={Patterns.currency}
          sizes={{ xs: 12, lg: 6 }}
        />
        <LabeledDropdown<HSAUserInput>
          dropDownData={['self-only', 'family']}
          label="Coverage Type"
          name="coverageType"
        />
        <GenericLabeledDropdown<Person, HSAUserInput>
          dropDownData={people}
          label="Recipient"
          valueMapping={(p: Person, i: number) =>
            [PersonRole.PRIMARY, PersonRole.SPOUSE][i]
          }
          name="personRole"
          keyMapping={(p: Person, i: number) => i}
          textMapping={(p: Person) =>
            `${p.firstName} ${p.lastName} (${formatSSID(p.ssid)})`
          }
        />
        <DatePicker
          name="startDate"
          label="Starting Date"
          sizes={{ xs: 12, lg: 6 }}
          minDate={new Date(TaxYears[activeYear], 0, 1)}
          maxDate={new Date(TaxYears[activeYear], 11, 31)}
        />
        <DatePicker
          name="endDate"
          label="Ending Date"
          sizes={{ xs: 12, lg: 6 }}
          minDate={new Date(TaxYears[activeYear], 0, 1)}
          maxDate={new Date(TaxYears[activeYear], 11, 31)}
        />
      </Grid>
    </FormListContainer>
  )

  const form: ReactElement = <>{hsaBlock}</>

  return (
    <FormProvider {...methods}>
      <form
        tabIndex={-1}
        onSubmit={intentionallyFloat(handleSubmit(onAdvance))}
      >
        <Helmet>
          <title>
            Health Savings Accounts (HSA) | Savings Accounts | UsTaxes.org
          </title>
        </Helmet>
        <h2>Health Savings Accounts (HSA)</h2>
        {form}
        {navButtons}
      </form>
    </FormProvider>
  )
}