template.success.tsx

import { Button, HeartbeatLoader, Icon, Text } from 'blockchain-info-components'
import { convertBaseToStandard } from 'data/components/exchange/services'
import { ErrorCartridge } from 'components/Cartridge'
import { fiatToString } from 'core/exchange/currency'
import {
  FiatType,
  SBOrderType,
  SupportedWalletCurrenciesType
} from 'core/types'
import { FlyoutWrapper, Row, Title, Value } from 'components/Flyout'
import { Form } from 'components/Form'
import { FormattedMessage } from 'react-intl'
import { getOutputAmount } from 'data/components/simpleBuy/model'
import { InjectedFormProps, reduxForm } from 'redux-form'
import { Props as OwnProps, SuccessStateType } from '.'

import React from 'react'
import styled from 'styled-components'

const CustomForm = styled(Form)`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`
const TopText = styled(Text)`
  display: flex;
  align-items: center;
`
const Bottom = styled(FlyoutWrapper)`
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  height: 100%;
  text-align: center;
  border-top: 1px solid ${props => props.theme.grey000};
`
const Amount = styled.div`
  margin-top: 40px;
  > div {
    display: inline;
  }
`

const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
  const outputAmt = getOutputAmount(props.order, props.quote)

  const displayFiat = (amt: string) => {
    return fiatToString({
      unit: props.order.inputCurrency as FiatType,
      value: convertBaseToStandard('FIAT', amt)
    })
  }

  const getPaymentMethod = (order: SBOrderType) => {
    // props.order.paymentType FUNDS
    // props.order.paymentType === 'PAYMENT_CARD'
    switch (order.paymentType) {
      case 'PAYMENT_CARD':
        return (
          <FormattedMessage
            id='modals.simplebuy.confirm.payment_card'
            defaultMessage='Credit Card'
          />
        )
      case 'FUNDS':
        return (
          <FormattedMessage
            id='modals.simplebuy.confirm.funds_wallet'
            defaultMessage='{coin} Wallet'
            values={{
              coin: props.supportedCoins[order.outputCurrency].coinTicker
            }}
          />
        )
      default:
        return (
          <FormattedMessage
            id='modals.simplebuy.confirm.bunk_transfer'
            defaultMessage='Bank Transfer'
          />
        )
    }
  }

  return (
    <CustomForm onSubmit={props.handleSubmit}>
      <FlyoutWrapper>
        <TopText color='grey800' size='20px' weight={600}>
          <Icon
            cursor
            name='arrow-left'
            size='20px'
            color='grey600'
            style={{ marginRight: '24px' }}
            role='button'
            onClick={() =>
              props.simpleBuyActions.setStep({
                order: props.order,
                step: 'CANCEL_ORDER'
              })
            }
          />
          <FormattedMessage
            id='modals.simplebuy.checkoutconfirm'
            defaultMessage='Checkout'
          />
        </TopText>
        <Amount data-e2e='sbTotalCryptoBuyAmount'>
          <Text size='32px' weight={600} color='grey800'>
            {outputAmt}
          </Text>
          <Text size='32px' weight={600} color='grey800'>
            {props.supportedCoins[props.order.outputCurrency].coinTicker}
          </Text>
        </Amount>
      </FlyoutWrapper>
      <Row>
        <Title>
          <FormattedMessage
            id='modals.simplebuy.confirm.coin_price'
            defaultMessage='{coin} Price'
            values={{
              coin: props.supportedCoins[props.order.outputCurrency].coinTicker
            }}
          />
        </Title>
        <Value data-e2e='sbExchangeRate'>{displayFiat(props.quote.rate)}</Value>
      </Row>
      <Row>
        <Title>
          <FormattedMessage
            id='modals.simplebuy.confirm.fee'
            defaultMessage='Fee'
          />
        </Title>
        <Value>
          {props.order.fee
            ? displayFiat(props.order.fee)
            : `${displayFiat(props.quote.fee)} ${props.order.inputCurrency}`}
        </Value>
      </Row>
      <Row>
        <Title>
          <FormattedMessage
            id='modals.simplebuy.confirm.total'
            defaultMessage='Total'
          />
        </Title>
        <Value data-e2e='sbFiatBuyAmount'>
          {displayFiat(props.order.inputQuantity)} {props.order.inputCurrency}
        </Value>
      </Row>
      <Row>
        <Title>
          <FormattedMessage
            id='modals.simplebuy.confirm.payment'
            defaultMessage='Payment Method'
          />
        </Title>
        <Value>
          {props.order.paymentMethodId || getPaymentMethod(props.order)}
        </Value>
      </Row>
      <Bottom>
        <Text size='12px' weight={500} color='grey600'>
          <FormattedMessage
            id='modals.simplebuy.confirm.activity'
            defaultMessage='Your final amount may change due to market activity.'
          />
        </Text>
        <Button
          fullwidth
          nature='primary'
          data-e2e='confirmSBOrder'
          size='16px'
          height='48px'
          type='submit'
          style={{ marginTop: '28px' }}
          disabled={props.submitting}
        >
          {props.submitting ? (
            <HeartbeatLoader height='16px' width='16px' color='white' />
          ) : (
            <FormattedMessage
              id='modals.simplebuy.confirm.buy'
              defaultMessage='Buy {amount} {coin}'
              values={{
                amount: outputAmt,
                coin:
                  props.supportedCoins[props.order.outputCurrency].coinTicker
              }}
            />
          )}
        </Button>
        <Button
          data-e2e='sbCancelCheckout'
          disabled={props.submitting}
          size='16px'
          height='48px'
          nature='light-red'
          onClick={() =>
            props.simpleBuyActions.setStep({
              step: 'CANCEL_ORDER',
              order: props.order
            })
          }
          style={{ marginTop: '16px' }}
        >
          <FormattedMessage id='buttons.cancel' defaultMessage='Cancel' />
        </Button>
        {props.error && (
          <ErrorCartridge
            style={{ marginTop: '16px' }}
            data-e2e='checkoutError'
          >
            <Icon
              name='alert-filled'
              color='red600'
              style={{ marginRight: '4px' }}
            />
            Error: {props.error}
          </ErrorCartridge>
        )}
      </Bottom>
    </CustomForm>
  )
}

type Props = OwnProps &
  SuccessStateType & { supportedCoins: SupportedWalletCurrenciesType }

export default reduxForm<{}, Props>({ form: 'sbCheckoutConfirm' })(Success)