refactor: use new Countdown component

app/components/Activity/Countdown/Countdown.js

@@ -1,95 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { FormattedMessage } from 'react-intl'
-import messages from './messages'
-
-import styles from './Countdown.scss'
-
-class Countdown extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      days: null,
-      hours: null,
-      minutes: null,
-      seconds: null,
-      expired: false,
-      interval: null
-    }
-
-    this.timerInterval = this.timerInterval.bind(this)
-  }
-
-  componentDidMount() {
-    const interval = setInterval(this.timerInterval, 1000)
-    // store interval in the state so it can be accessed later
-    this.setState({ interval })
-  }
-
-  componentWillUnmount() {
-    const { interval } = this.state
-    // use interval from the state to clear the interval
-    clearInterval(interval)
-  }
-
-  timerInterval() {
-    const convertTwoDigits = n => (n > 9 ? n : `0${n}`.slice(-2))
-
-    const now = new Date().getTime()
-    const { countDownDate } = this.props
-    const countDownSeconds = countDownDate * 1000
-    const distance = countDownSeconds - now
-
-    if (distance <= 0) {
-      this.setState({ expired: true })
-      const { interval } = this.state
-      clearInterval(interval)
-      return
-    }
-
-    const days = convertTwoDigits(Math.floor(distance / (1000 * 60 * 60 * 24)))
-    const hours = convertTwoDigits(
-      Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
-    )
-    const minutes = convertTwoDigits(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)))
-    const seconds = convertTwoDigits(Math.floor((distance % (1000 * 60)) / 1000))
-
-    this.setState({
-      days,
-      hours,
-      minutes,
-      seconds
-    })
-  }
-
-  render() {
-    const { days, hours, minutes, seconds, expired } = this.state
-
-    if (expired) {
-      return <span className={`${styles.container} ${styles.expired}`}>Expired</span>
-    }
-    if (!days && !hours && !minutes && !seconds) {
-      return <span className={styles.container} />
-    }
-
-    return (
-      <span className={styles.container}>
-        <i className={styles.caption}>
-          <FormattedMessage {...messages.expires} />
-        </i>
-        <i>{days > 0 && `${days}:`}</i>
-        <i>{hours > 0 && `${hours}:`}</i>
-        <i>{minutes > 0 && `${minutes}:`}</i>
-        <i>{seconds >= 0 && `${seconds}`}</i>
-      </span>
-    )
-  }
-}
-
-Countdown.propTypes = {
-  countDownDate: PropTypes.number.isRequired
-}
-
-export default Countdown

app/components/Activity/Countdown/Countdown.scss

@@ -1,16 +0,0 @@
-@import 'styles/variables.scss';
-
-.container {
-  display: block;
-  text-align: center;
-  font-size: 12px;
-  min-height: 12px;
-
-  &.expired {
-    color: $red;
-  }
-}
-
-.caption {
-  margin-right: 4px;
-}

app/components/Activity/Countdown/index.js

@@ -1,3 +0,0 @@
-import Countdown from './Countdown'
-
-export default Countdown

app/components/Activity/Countdown/messages.js

@@ -1,6 +0,0 @@
-import { defineMessages } from 'react-intl'
-
-/* eslint-disable max-len */
-export default defineMessages({
-  expires: 'Expires in'
-})

app/components/Activity/InvoiceModal/InvoiceModal.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types'
 import QRCode from 'qrcode.react'
 import copy from 'copy-to-clipboard'
 import { showNotification } from 'lib/utils/notifications'
-import { Dropdown, Value } from 'components/UI'
+import { Countdown, Dropdown, Value } from 'components/UI'
 import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl'
-import Countdown from '../Countdown'
 import messages from './messages'
 import styles from './InvoiceModal.scss'
 
@@ -21,7 +20,7 @@ const InvoiceModal = ({
     showNotification('Noice', <FormattedMessage {...messages.copied} />)
   }
 
-  const countDownDate = parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10)
+  const countDownDate = (parseInt(invoice.creation_date, 10) + parseInt(invoice.expiry, 10)) * 1000
 
   return (
     <div className={styles.container}>
@@ -39,7 +38,7 @@ const InvoiceModal = ({
             level="L"
             className={styles.qrcode}
           />
-          <Countdown countDownDate={countDownDate} />
+          <Countdown date={countDownDate} countUpAfterExpire={false} />
         </section>
         <section className={styles.right}>
           <div className={styles.details}>