acorns-index.tsx

acorns-index.tsx

import React from 'react'
import { QueryResult, graphql } from 'react-apollo'
import { RouteComponentProps, withRouter } from 'react-router-dom'

import { AcornsIcon } from '@acorns/icons'
import {
  ConfirmationModal,
  ModalAction,
  ModalActionTypes,
  Spinner,
} from '@acorns/web-components'
import { GenericAnalyticsClient, withAnalyticsClient } from '@acorns/web-utils'
import {
  branch,
  compose,
  renderComponent,
  withHandlers,
  withProps,
  withState,
} from 'recompose'
import styled from 'styled-components'

import FullscreenTakeover from 'components/FullscreenTakeover'
import {
  BankAccountStatus,
  CancelRecurringTransferResult,
  DeactivateTierSubscriptionResult,
  LaterTotalLiquidationInput,
  LaterWithdrawalReason,
  LinkedAccount,
  MutationCancelRecurringTransferArgs,
  MutationCreateSupportTicketArgs,
  MutationDeactivateTierSubscriptionArgs,
  MutationLaterTotalLiquidationArgs,
  MutationStopRecurringInvestmentArgs,
  RecurringInvestmentPayload,
  RecurringInvestmentSettings,
  RequestAccountClosureInput,
  SupportTicketResponse,
  TierSubscriptionDeactivationReason,
  TierSubscriptionForUser,
  User,
} from 'generated/types'
import useWindowDimensions from 'hooks/useWindowDimensions'
import { withEdgeCaseProductInfo } from 'pages/settings/my-subscription/tier-subscription-center/utils'
import { style } from 'theme'

import { CloseAccountWrapper } from '../closeAccountWrapper'
import LoadingScreen from '../closureLoading'
import {
  CircularIcon,
  StyledBody,
  StyledCard,
  StyledCloseAccountButton,
  StyledHeading,
} from '../components'
import cancelInvestmentAccountRecurringInvestmentMutation from '../mutations/cancelInvestmentAccountRecurringInvestment.gql'
import cancelSpendRecurringMutation from '../mutations/cancelSpendRecurring.gql'
import deactivateSubscriptionMutation from '../mutations/deactivateSubscription.gql'
import investClosureMutation from '../mutations/invest-automatic-closure.gql'
import supportTicketMutation from '../mutations/mutation.gql'
import laterLiquidationMutation from '../mutations/withdrawBalance.gql'
import tierQuery from '../queries/tierQuery.query.gql'
import userQuery from '../queries/userQuery.gql'
import { ConfirmationScreen } from './confirmation-screen'
import {
  CancelSubscriptionCancelButtonTapped,
  CancelSubscriptionConfirmButtonTapped,
  CancelSubscriptionConfirmationButtonTapped,
  CancelSubscriptionConfirmationScreenViewed,
  CancelSubscriptionDoneCTA,
  CancelSubscriptionDoneScreenViewed,
  CancelSubscriptionGetStartedButtonTapped,
  CancelSubscriptionScreenViewed,
} from './segment'
import { RequestScreen } from './with-balance-request-screen'

const Loader = styled.div`
  align-items: center;
  display: flex;
  height: 100vh;
`

type RecurringInvestment = {
  isOn: boolean
  id: string
}

type RecurringInvestments = {
  spend: RecurringInvestment
  later: RecurringInvestment
  invest: RecurringInvestment
}

type AccountDetails = {
  id: string
  active: boolean
  balance: number
  bankAccountStatus: BankAccountStatus
  recurringInvestmentSettings: RecurringInvestmentSettings
  hasRecurringTransferOn: boolean
  recurringTransferId: string
}

type AccountState = {
  investAccount: AccountDetails
  laterAccount: AccountDetails
  spendAccount: AccountDetails
}

export type ModalProps = {
  modalHeader: string
  modalBody: string
  modalActions: ModalAction[]
}

type InnerProps = {
  // withState
  shouldShowCloseAccountConfirmationModal: boolean
  setShouldShowCloseAccountConfirmationModal: (value: boolean) => void
  shouldShowLoadingScreen: boolean
  setShouldShowLoadingScreen: (value: boolean) => void
  shouldShowClosureRequestedScreen: boolean
  setShouldShowClosureRequestedScreen: (value: boolean) => void
  showContactSupportModal: boolean
  setShowContactSupportModal: (value: boolean) => void
  // graphql
  userInfo: QueryResult & {
    user: User
    linkedAccounts: LinkedAccount[]
  }
  currentTier: QueryResult & {
    tierSubscriptionForUser: TierSubscriptionForUser
  }
  laterTotalLiquidationlMutation: (value: {
    variables: Pick<MutationLaterTotalLiquidationArgs, 'investmentAccountId'> &
      LaterTotalLiquidationInput
  }) => Promise<void>
  createSupportTicketMutation: (value: {
    variables: MutationCreateSupportTicketArgs
  }) => Promise<SupportTicketResponse>
  stopSpendRecurringMutation: (value: {
    variables: MutationCancelRecurringTransferArgs
  }) => Promise<CancelRecurringTransferResult>
  stopInvestmentAccountRecurringMutation: (value: {
    variables: MutationStopRecurringInvestmentArgs
  }) => Promise<RecurringInvestmentPayload>
  closeInvestAccountMutation: (value: {
    variables: RequestAccountClosureInput
  }) => Promise<void>
  deactivateSubscriptionMutation: (value: {
    variables: MutationDeactivateTierSubscriptionArgs
  }) => Promise<DeactivateTierSubscriptionResult>
  // withProps
  isNoInvest: boolean
  isInvestOnly: boolean
  hasLaterBalance: boolean
  hasLaterAccount: boolean
  hasSpendAccount: boolean
  hasBalance: boolean
  investBalance: number
  isWebView: boolean
  shouldShowClosureConfirmationScreen: boolean
  balances: { product: string; amount: number }[]
  recurringInvestments: RecurringInvestments
  hasRecurringSettingsOn: boolean
  loading: boolean
  closureFormComment: string
  closureFormReason: string
  closureFormReasonKey: string
  closureItems: string[]
  laterBalance?: number
  liquidationData: {
    amount: number
    investmentAccountId: string
    federalTaxes: number
    stateTaxes: number
    taxYear: number
    reason: LaterWithdrawalReason
  }
  tier: string
  userData: any
  confirmationModalProps: ModalProps
  contactSupportModalProps: ModalProps
  // withHandlers
  exitWebViewSuccess: () => void
  handleGetStartedCTAPress: () => void
  handleCancel: () => void
  handleCancelSubscriptionCTAPress: () => void
  handleLogoutClick: () => void
  handleConfirmModalCancel: () => void
  handleWithdrawError: () => void
}

type OuterProps = {
  hasBalance: boolean
  spendBalance: number | undefined
  laterBalance: number | undefined
  investBalance: number | undefined
  shouldDisplaySpendBalance: boolean
  shouldDisplayLaterBalance: boolean
  shouldDisplayInvestBalance: boolean
  hasSpendAccount: boolean
  hasLaterAccount: boolean
  isWebView: boolean
  handleShowConfirmAccountClosureModal: () => void
  userAccountState: AccountState
  location: RouteComponentProps<{}>['location']
  history: RouteComponentProps<{}>['history']
  analytics: GenericAnalyticsClient
}

export type MergedProps = InnerProps & OuterProps

const getModalProps = (props: MergedProps): ModalProps => {
  const modalActions: ModalAction[] = [
    {
      handler: props.handleConfirmModalCancel,
      label: 'Never mind',
      type: ModalActionTypes.secondary,
    },
    {
      handler: props.handleCancelSubscriptionCTAPress,
      label: 'Continue',
      type: ModalActionTypes.danger,
    },
  ]
  const modalBody = props.hasBalance
    ? "This means we'll sell your shares, transfer all your money into your linked checking account, and cancel your subscription."
    : 'This will cancel your subscription'
  const modalHeader = 'Are you sure?'
  return {
    modalActions,
    modalBody,
    modalHeader,
  }
}

const getErrorModalProps = (props: MergedProps): ModalProps => {
  const modalHeader = 'Contact support'
  const modalBody =
    'An error occurred. Please contact support to continue closing your account(s).'
  const modalActions = [
    {
      label: 'OK',
      type: ModalActionTypes.secondary,
      handler: () => props.handleWithdrawError,
    },
  ]
  return {
    modalActions,
    modalBody,
    modalHeader,
  }
}

const Card = styled(StyledCard)<{ innerHeight?: number }>`
  @media screen and (max-width: ${style(
      (theme) => theme.breakpoints.sm - 1,
    )}px) {
    height: ${(props) => `calc(${props.innerHeight}px - 78px)`};
  }
`

const WVCard = styled(StyledCard)<{ innerHeight?: number }>`
  height: ${(props) => `calc(${props.innerHeight}px - 80px)`};
  &&& {
    border-radius: 0;
  }
`
const SlateNumberedList = styled.ol`
  color: ${style((theme) => theme.colors.white)};
  counter-reset: customCounter;
  font-size: 14px;
  list-style: none;
  padding-left: 40px;
  margin: 24px;

  & li {
    counter-increment: customCounter;
    line-height: 25px;
    margin-bottom: 0.75rem;
    position: relative;
    color: ${style((theme) => theme.colors.slate)};
    text-align: left;
    &::before {
      background-color: ${style((theme) => theme.colors.slate)};
      border-radius: 50%;
      color: ${style((theme) => theme.colors.white)};
      content: counter(customCounter);
      font-size: 10px;
      font-weight: bold;
      left: calc(-1 * 25px - 10px);
      line-height: 20px;
      position: absolute;
      text-align: center;
      top: 12%;
      width: 20px;
    }
  }
  @media screen and (max-width: 320px) {
    margin: 5px;
  }
`
const ListWrapper = styled.div`
  border: 1px solid rgb(245, 245, 245);
  border-radius: 10px;
  margin: 0 auto;
  margin-bottom: 30px;
  max-width: 100%;
  width: 335px;
  @media screen and (max-width: ${style(
      (theme) => theme.breakpoints.sm - 1,
    )}px) {
    margin: 0;
  }
  @media screen and (max-width: 320px) {
    width: auto;
    margin-bottom: 0px;
  }
`

const ButtonContainer = styled.div`
  @media screen and (max-width: ${style(
      (theme) => theme.breakpoints.sm - 1,
    )}px) {
    margin-top: auto;
    border-top: none;
    position: relative;
    width: 100%;
    padding-top: 20px;
  }
`

const setClosureItems = (hasRecurringOn: boolean, hasBalances: boolean) => {
  const closureItems = []
  if (hasRecurringOn) {
    closureItems.push('Turning off transfers')
  }

  if (hasBalances) {
    closureItems.push('Withdrawing balances')
  }

  closureItems.push('Requesting closure')
  return closureItems
}

const enhance = compose<MergedProps, {}>(
  withRouter,
  withAnalyticsClient,
  withEdgeCaseProductInfo,
  withState(
    'shouldShowCloseAccountConfirmationModal',
    'setShouldShowCloseAccountConfirmationModal',
    false,
  ),
  withState('shouldShowLoadingScreen', 'setShouldShowLoadingScreen', false),
  withState(
    'shouldShowClosureRequestedScreen',
    'setShouldShowClosureRequestedScreen',
    false,
  ),
  withState('showContactSupportModal', 'setShowContactSupportModal', false),
  graphql(userQuery, { name: 'userInfo' }),
  graphql(laterLiquidationMutation, {
    name: 'laterTotalLiquidationlMutation',
  }),
  graphql(supportTicketMutation, {
    name: 'createSupportTicketMutation',
  }),
  graphql(cancelSpendRecurringMutation, {
    name: 'stopSpendRecurringMutation',
  }),
  graphql(cancelInvestmentAccountRecurringInvestmentMutation, {
    name: 'stopInvestmentAccountRecurringMutation',
  }),
  graphql(investClosureMutation, { name: 'closeInvestAccountMutation' }),
  graphql(deactivateSubscriptionMutation, {
    name: 'deactivateSubscriptionMutation',
  }),
  graphql(tierQuery, {
    name: 'currentTier',
  }),
  withProps<Partial<InnerProps>, MergedProps>(
    ({
      location,
      analytics,
      shouldShowLoadingScreen,
      shouldShowClosureRequestedScreen,
      currentTier,
      userAccountState,
    }) => {
      if (
        !shouldShowLoadingScreen &&
        !shouldShowClosureRequestedScreen &&
        !location?.state?.shouldShowClosureConfirmationScreen
      ) {
        analytics.track('Screen Viewed', CancelSubscriptionScreenViewed)
      }
      if (
        location?.state?.shouldShowClosureConfirmationScreen &&
        !shouldShowClosureRequestedScreen
      ) {
        analytics.track(
          'Screen Viewed',
          CancelSubscriptionConfirmationScreenViewed,
        )
      }

      if (userAccountState) {
        const shouldShowClosureConfirmationScreen =
          location?.state?.shouldShowClosureConfirmationScreen
        const isWebView = window.location.pathname.startsWith('/wv/')
        // @ts-ignore - the deprecation note aside, `.tier` doesn't exist on one of the potential tierSubscriptionForUser types
        const tier = currentTier?.tierSubscriptionForUser?.tier?.key
        const investBalance = userAccountState.investAccount?.balance
        const hasLaterAccount = !!userAccountState?.laterAccount
        const hasLaterBalance = userAccountState.laterAccount?.balance > 0
        const hasSpendAccount = userAccountState.spendAccount?.active
        const spendBalance = userAccountState.spendAccount?.balance

        const isNoInvest = userAccountState.investAccount === undefined
        const isInvestOnly = !hasLaterAccount && !hasSpendAccount

        // data comes from the later withdraw flow handoff
        const liquidationData = location?.state?.liquidationData
        const laterBalance = liquidationData?.amount

        const hasBalance =
          investBalance > 0 || spendBalance > 0 || laterBalance > 0

        const getAccountBalances = (
          spend: number,
          later: number,
          invest: number,
        ) => {
          const balanceArr = []
          if (spend) {
            balanceArr.push({ product: 'Spend', amount: spend })
          }
          if (later) {
            balanceArr.push({ product: 'Later', amount: later })
          }
          if (invest) {
            balanceArr.push({ product: 'Invest', amount: invest })
          }
          return balanceArr
        }
        const balances = hasBalance
          ? getAccountBalances(spendBalance, laterBalance, investBalance)
          : undefined

        const recurringInvestments: RecurringInvestments = {
          spend: {
            isOn: userAccountState.spendAccount?.hasRecurringTransferOn,
            id: userAccountState.spendAccount?.recurringTransferId,
          },
          later: {
            isOn:
              (userAccountState.laterAccount?.recurringInvestmentSettings
                ?.amount || 0) > 0,
            id: userAccountState.laterAccount?.id,
          },
          invest: {
            isOn:
              (userAccountState.investAccount?.recurringInvestmentSettings
                ?.amount || 0) > 0,
            id: userAccountState.investAccount?.id,
          },
        }
        const hasRecurringSettingsOn =
          recurringInvestments.spend.isOn ||
          recurringInvestments.later.isOn ||
          recurringInvestments.invest.isOn

        const closureFormComment =
          location?.state?.closureFormComment ||
          sessionStorage.getItem('closureFormComment')
        const closureFormReasonKey =
          location?.state?.closureFormKey ||
          sessionStorage.getItem('closureFormReasonKey')
        const closureFormReason =
          location?.state?.closureFormReason ||
          sessionStorage.getItem('closureFormReason')
        const closureItems = setClosureItems(hasRecurringSettingsOn, hasBalance)

        return {
          isNoInvest,
          isInvestOnly,
          hasLaterBalance,
          hasLaterAccount,
          hasSpendAccount,
          hasBalance,
          investBalance,
          isWebView,
          shouldShowClosureConfirmationScreen,
          balances,
          recurringInvestments,
          hasRecurringSettingsOn,
          loading: false,
          closureFormComment,
          closureFormReason,
          closureFormReasonKey,
          closureItems,
          laterBalance,
          liquidationData,
          tier,
        }
      }
      return {
        loading: true,
      }
    },
  ),
  withProps<object, MergedProps>(({ userInfo }) => {
    if (!userInfo.user) {
      userInfo.refetch()
    }
    const userData = userInfo?.user || {}

    return {
      userData,
    }
  }),
  withHandlers({
    exitWebViewSuccess: () => () =>
      window.location.assign('acorns://event?flow_complete=true&error=false'),
  }),
  withHandlers<MergedProps, Partial<MergedProps>>({
    handleGetStartedCTAPress: ({
      analytics,
      hasLaterBalance,
      hasLaterAccount,
      hasSpendAccount,
      isWebView,
      history,
      location,
    }) => () => {
      analytics.track('Button Tapped', CancelSubscriptionGetStartedButtonTapped)
      const stateProps = {
        referrer: location.pathname,
        hasLaterAccount,
        hasSpendAccount,
        hasLaterBalance,
        isCancelSubscriptionFlow: true,
      }

      hasSpendAccount
        ? isWebView
          ? history.push('/wv/close-account/spend', stateProps)
          : history.push('/close-account/spend', stateProps)
        : isWebView
        ? history.push('/wv/close-account/invest', stateProps)
        : history.push('/close-account/invest', stateProps)
    },
    handleCancel: ({ history, isWebView }) => () => {
      isWebView
        ? history.push('/wv/my-subscription')
        : history.push('/settings/my-subscription')
    },
    handleConfirmModalCancel: ({
      analytics,
      setShouldShowCloseAccountConfirmationModal,
    }) => () => {
      analytics.track('Button Tapped', CancelSubscriptionCancelButtonTapped)
      setShouldShowCloseAccountConfirmationModal(false)
    },
    handleShowConfirmAccountClosureModal: ({
      analytics,
      setShouldShowCloseAccountConfirmationModal,
    }) => () => {
      analytics.track(
        'Button Tapped',
        CancelSubscriptionConfirmationButtonTapped,
      )
      setShouldShowCloseAccountConfirmationModal(true)
    },
    handleCancelSubscriptionCTAPress: ({
      analytics,
      isNoInvest,
      isInvestOnly,
      hasSpendAccount,
      hasLaterAccount,
      recurringInvestments,
      hasRecurringSettingsOn,
      setShouldShowLoadingScreen,
      setShouldShowClosureRequestedScreen,
      laterTotalLiquidationlMutation,
      liquidationData,
      stopSpendRecurringMutation,
      stopInvestmentAccountRecurringMutation,
      createSupportTicketMutation,
      userData,
      closureFormReason,
      closureFormComment,
      closureFormReasonKey,
      closeInvestAccountMutation,
      laterBalance,
      setShowContactSupportModal,
      tier,
      userAccountState,
      deactivateSubscriptionMutation,
    }) => () => {
      setShouldShowLoadingScreen(true)
      if (hasRecurringSettingsOn) {
        if (recurringInvestments.later.isOn) {
          stopInvestmentAccountRecurringMutation({
            variables: { investmentAccountId: recurringInvestments.later.id },
          })
        }

        if (recurringInvestments.spend.isOn) {
          stopSpendRecurringMutation({
            variables: {
              id: recurringInvestments.spend.id,
            },
          })
        }

        if (recurringInvestments.invest.isOn) {
          stopInvestmentAccountRecurringMutation({
            variables: {
              investmentAccountId: recurringInvestments.invest.id,
            },
          })
        }
      }

      if (isNoInvest) {
        deactivateSubscriptionMutation({
          variables: {
            input: {
              userId: userData.uuid,
              subscriptionDeactivationReason:
                TierSubscriptionDeactivationReason.Other,
            },
          },
        })
          .then(() => {
            setShouldShowLoadingScreen(false)
            setShouldShowClosureRequestedScreen(true)
          })
          .catch((error: Error) => {
            if (error) {
              throw error
            }
          })
      } else if (isInvestOnly) {
        const values = {
          comments: closureFormComment,
          reason: closureFormReasonKey,
        }
        closeInvestAccountMutation({
          variables: values,
        })
          .then(() => {
            setShouldShowLoadingScreen(false)
            setShouldShowClosureRequestedScreen(true)
          })
          .catch((error: Error) => {
            if (error) {
              throw error
            }
          })
      } else {
        analytics.track('Button Tapped', CancelSubscriptionConfirmButtonTapped)
        const tagsForTicket = [
          'automatic_close_my_account',
          'automatic_close_my_acorns_invest_account',
          'account_management',
        ]
        if (hasLaterAccount) {
          tagsForTicket.push('automatic_close_my_acorns_later_account')
        }
        if (hasSpendAccount) {
          tagsForTicket.push('automatic_close_my_acorns_spend_account')
        }

        const spendAccountMessage =
          userAccountState?.spendAccount?.active &&
          userAccountState?.spendAccount?.bankAccountStatus !==
            BankAccountStatus.Open
            ? '--please cancel pending Spend card order.'
            : ''

        const input = {
          category: 'Close My Account',
          dob: userData?.dob,
          email: userData?.email,
          firstName: userData?.firstName,
          lastName: userData?.lastName,
          message: `Requesting closure of my ${
            hasLaterAccount ? 'Later' : ''
          } ${
            hasSpendAccount ? 'Spend' : ''
          } and Invest accounts${spendAccountMessage}. Reason: ${closureFormReason}. ${
            closureFormComment && 'Comments: ' + closureFormComment
          } `,
          phone: userData?.phoneNumber,
          subcategory: 'Close My Acorns Account',
          tags: tagsForTicket,
        }

        if (laterBalance && liquidationData) {
          laterTotalLiquidationlMutation({
            variables: {
              investmentAccountId: liquidationData.investmentAccountId,
              federalTaxes: liquidationData.federalTaxes,
              stateTaxes: liquidationData.stateTaxes,
              taxYear: liquidationData.taxYear,
              reason: liquidationData.reason,
            },
          })
            .then(() => {
              createSupportTicketMutation({
                variables: { input },
              }).then(() => {
                sessionStorage.removeItem('laterCloseAccountWithdrawFlow')
                setShouldShowLoadingScreen(false)
                setShouldShowClosureRequestedScreen(true)

                analytics.track(
                  'Screen Viewed',
                  CancelSubscriptionDoneScreenViewed(tier),
                )
              })
            })
            .catch(() => {
              setShowContactSupportModal(true)
            })
        } else {
          createSupportTicketMutation({
            variables: { input },
          }).then(() => {
            setShouldShowLoadingScreen(false)
            setShouldShowClosureRequestedScreen(true)

            analytics.track('Screen Viewed', {
              CancelSubscriptionDoneScreenViewed,
            })
          })
        }
      }
    },
    handleWithdrawError: ({ history, isWebView }) => () => {
      const url = isWebView
        ? '/wv/my-subscription'
        : '/settings/my-subscription'
      history.push(url)
    },
    handleLogoutClick: ({
      exitWebViewSuccess,
      isWebView,
      history,
      analytics,
    }) => () => {
      analytics.track('Button Tapped', CancelSubscriptionDoneCTA, () => {
        if (isWebView) {
          exitWebViewSuccess()
        } else {
          history.push('/logout')
        }
      })
    },
  }),
  withProps<Partial<MergedProps>, MergedProps>((props) => ({
    confirmationModalProps: getModalProps(props),
    contactSupportModalProps: getErrorModalProps(props),
  })),
  branch<MergedProps>(
    ({ loading }) => loading,
    renderComponent(() => (
      <Loader>
        <Spinner />
      </Loader>
    )),
  ),
)
const CombinedClosure: React.FC<MergedProps> = ({
  balances,
  handleGetStartedCTAPress,
  hasBalance,
  isWebView,
  handleCancel,
  setShouldShowCloseAccountConfirmationModal,
  shouldShowCloseAccountConfirmationModal,
  shouldShowClosureConfirmationScreen,
  shouldShowLoadingScreen,
  handleShowConfirmAccountClosureModal,
  userData,
  loading,
  confirmationModalProps,
  shouldShowClosureRequestedScreen,
  handleLogoutClick,
  closureItems,
  showContactSupportModal,
  contactSupportModalProps,
}) => {
  const CardComponent = isWebView ? WVCard : Card
  const { height } = useWindowDimensions()
  return (
    <>
      {showContactSupportModal && (
        <ConfirmationModal
          message={contactSupportModalProps.modalBody}
          title={contactSupportModalProps.modalHeader}
          actions={contactSupportModalProps.modalActions}
          isOpen={showContactSupportModal}
          onRequestClose={() => {}}
        />
      )}
      {shouldShowClosureRequestedScreen && !shouldShowLoadingScreen && (
        <ConfirmationScreen
          handleLogoutClick={handleLogoutClick}
          isWebView={isWebView}
          hasBalance={hasBalance}
        />
      )}
      {!shouldShowClosureRequestedScreen && (
        <>
          {isWebView && (
            <FullscreenTakeover innerHeight={height}>
              <CloseAccountWrapper
                isWebView={isWebView}
                action={
                  !shouldShowLoadingScreen
                    ? { onClick: handleCancel, shouldShowCloseIcon: false }
                    : undefined
                }
                link={
                  !shouldShowLoadingScreen
                    ? { onClick: handleCancel, text: 'Cancel' }
                    : undefined
                }
                actionStripTitle={'Cancel your subscription'}
                handleCancel={handleCancel}
                showCancellable={
                  !shouldShowClosureRequestedScreen && !shouldShowLoadingScreen
                }
                shouldNotShowBack={shouldShowLoadingScreen}
              >
                {!shouldShowClosureConfirmationScreen &&
                  !shouldShowClosureRequestedScreen && (
                    <CardComponent isWebView={isWebView} innerHeight={height}>
                      <CircularIcon>
                        <AcornsIcon
                          icon={AcornsIcon.Icon.AcornsLogo}
                          width="36px"
                        />
                      </CircularIcon>
                      <StyledHeading>Cancel your subscription</StyledHeading>
                      <StyledBody>
                        After confirming some information, we’ll take the
                        following actions to end your subscription.
                      </StyledBody>
                      <ListWrapper>
                        <SlateNumberedList>
                          <li>Withdraw all funds in your accounts</li>
                          <li>Close your accounts</li>
                          <li>Cancel your subscription</li>
                        </SlateNumberedList>
                      </ListWrapper>
                      <ButtonContainer>
                        <StyledCloseAccountButton
                          onPress={handleGetStartedCTAPress}
                        >
                          Get started
                        </StyledCloseAccountButton>
                      </ButtonContainer>
                    </CardComponent>
                  )}

                {shouldShowClosureConfirmationScreen &&
                  !shouldShowClosureRequestedScreen &&
                  !shouldShowLoadingScreen && (
                    <RequestScreen
                      hasBalance={hasBalance}
                      userData={userData}
                      setShouldShowCloseAccountConfirmationModal={
                        setShouldShowCloseAccountConfirmationModal
                      }
                      shouldShowCloseAccountConfirmationModal={
                        shouldShowCloseAccountConfirmationModal
                      }
                      handleShowConfirmAccountClosureModal={
                        handleShowConfirmAccountClosureModal
                      }
                      balances={balances}
                      loading={loading}
                      modalActions={confirmationModalProps.modalActions}
                      modalBody={confirmationModalProps.modalBody}
                      modalHeader={confirmationModalProps.modalHeader}
                      isWebView={isWebView}
                    />
                  )}

                {shouldShowLoadingScreen && (
                  <LoadingScreen
                    closureItems={closureItems}
                    closureHeading="We wish you the best"
                    isVisible={shouldShowLoadingScreen}
                    isWebView={isWebView}
                  />
                )}
              </CloseAccountWrapper>
            </FullscreenTakeover>
          )}

          {!isWebView && (
            <CloseAccountWrapper
              handleCancel={handleCancel}
              closeIcon={false}
              actionStripTitle={
                !shouldShowClosureConfirmationScreen &&
                !shouldShowClosureRequestedScreen
                  ? 'Cancel your subscription'
                  : undefined
              }
              showCancellable={
                shouldShowClosureRequestedScreen || shouldShowLoadingScreen
                  ? false
                  : true
              }
              showBack={
                shouldShowClosureRequestedScreen || shouldShowLoadingScreen
                  ? false
                  : true
              }
            >
              {!shouldShowClosureConfirmationScreen &&
                !shouldShowClosureRequestedScreen && (
                  <StyledCard isWebView={isWebView}>
                    <CircularIcon>
                      <AcornsIcon
                        icon={AcornsIcon.Icon.AcornsLogo}
                        width="36px"
                      />
                    </CircularIcon>
                    <StyledHeading>Cancel your subscription</StyledHeading>
                    <StyledBody>
                      After confirming some information, we’ll take the
                      following actions to end your subscription.
                    </StyledBody>
                    <ListWrapper>
                      <SlateNumberedList>
                        <li>Withdraw all funds in your accounts</li>
                        <li>Close your accounts</li>
                        <li>Cancel your subscription</li>
                      </SlateNumberedList>
                    </ListWrapper>
                    <ButtonContainer>
                      <StyledCloseAccountButton
                        onPress={handleGetStartedCTAPress}
                      >
                        Get started
                      </StyledCloseAccountButton>
                    </ButtonContainer>
                  </StyledCard>
                )}

              {shouldShowClosureConfirmationScreen &&
                !shouldShowClosureRequestedScreen &&
                !shouldShowLoadingScreen && (
                  <RequestScreen
                    hasBalance={hasBalance}
                    userData={userData}
                    setShouldShowCloseAccountConfirmationModal={
                      setShouldShowCloseAccountConfirmationModal
                    }
                    shouldShowCloseAccountConfirmationModal={
                      shouldShowCloseAccountConfirmationModal
                    }
                    handleShowConfirmAccountClosureModal={
                      handleShowConfirmAccountClosureModal
                    }
                    balances={balances}
                    loading={loading}
                    modalActions={confirmationModalProps.modalActions}
                    modalBody={confirmationModalProps.modalBody}
                    modalHeader={confirmationModalProps.modalHeader}
                    isWebView={isWebView}
                  />
                )}

              {shouldShowLoadingScreen && (
                <LoadingScreen
                  closureItems={closureItems}
                  closureHeading="We wish you the best"
                  isVisible={shouldShowLoadingScreen}
                  isWebView={isWebView}
                />
              )}
            </CloseAccountWrapper>
          )}
        </>
      )}
    </>
  )
}

export default enhance(CombinedClosure)