(improvement) Invoices for not merchant users

public/locales/en/translations.json

@@ -308,6 +308,10 @@
     "title": "Movements"
   },
   "nodata": "No related data in this time range. You can try another time range.",
+  "no_merchant": {
+    "title": "This section is only available for ",
+    "link": "merchant accounts"
+  },
   "orders": {
     "title": "Orders"
   },
@@ -443,7 +447,7 @@
   "status": {
     "success": "{{topic}} Success at {{time}}",
     "warn": "{{topic}}",
-    "fail": "{{topic}} fail {{detail}}",
+    "fail": "{{topic}} fail: {{detail}}",
     "noid": "dev: the status action should contain the id param",
     "request": {
       "error": "{{topic}} request fail {{detail}}"

src/components/Invoices/Invoices.container.js

@@ -14,6 +14,7 @@ import {
 import { getFullTime, getTimeOffset } from 'state/base/selectors'
 import {
   getEntries,
+  getIsMerchant,
   getPageLoading,
   getDataReceived,
   getExistingCoins,
@@ -29,6 +30,7 @@ import Invoices from './Invoices'
 const mapStateToProps = state => ({
   getFullTime: getFullTime(state),
   timeOffset: getTimeOffset(state),
+  isMerchant: getIsMerchant(state),
   pageLoading: getPageLoading(state),
   dataReceived: getDataReceived(state),
   existingCoins: getExistingCoins(state),

src/components/Invoices/Invoices.js

@@ -13,6 +13,7 @@ import NoData from 'ui/NoData'
 import Loading from 'ui/Loading'
 import DataTable from 'ui/DataTable'
 import TimeRange from 'ui/TimeRange'
+import NoMerchant from 'ui/NoMerchant'
 import Pagination from 'ui/Pagination'
 import ColumnsFilter from 'ui/ColumnsFilter'
 import RefreshButton from 'ui/RefreshButton'
@@ -52,6 +53,7 @@ class Invoices extends PureComponent {
       id: PropTypes.string.isRequired,
       width: PropTypes.number.isRequired,
     })),
+    dataReceived: PropTypes.bool.isRequired,
     entries: PropTypes.arrayOf(PropTypes.shape({
       id: PropTypes.string.isRequired,
       amount: PropTypes.number.isRequired,
@@ -68,7 +70,7 @@ class Invoices extends PureComponent {
     })).isRequired,
     existingCoins: PropTypes.arrayOf(PropTypes.string),
     getFullTime: PropTypes.func.isRequired,
-    dataReceived: PropTypes.bool.isRequired,
+    isMerchant: PropTypes.bool.isRequired,
     pageLoading: PropTypes.bool.isRequired,
     refresh: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
@@ -102,6 +104,7 @@ class Invoices extends PureComponent {
       refresh,
       columns,
       timeOffset,
+      isMerchant,
       getFullTime,
       pageLoading,
       columnsWidth,
@@ -121,6 +124,8 @@ class Invoices extends PureComponent {
     let showContent
     if (!dataReceived && pageLoading) {
       showContent = <Loading />
+    } else if (!isMerchant) {
+      showContent = <NoMerchant />
     } else if (!entries.length) {
       showContent = <NoData />
     } else {

src/state/invoices/actions.js

@@ -86,13 +86,21 @@ export function clearTargetSymbols() {
   }
 }
 
+export function setMerchantStatus(status) {
+  return {
+    type: types.SET_MERCHANT,
+    payload: status,
+  }
+}
+
 export default {
   addTargetSymbol,
   clearTargetSymbols,
   fetchFail,
   fetchInvoices,
   refresh,
   removeTargetSymbol,
+  setMerchantStatus,
   setTargetSymbols,
   updateInvoices,
 }

src/state/invoices/constants.js

@@ -7,4 +7,5 @@ export default {
   REMOVE_SYMBOL: 'BITFINEX/INVOICES/SYMBOL/REMOVE',
   CLEAR_SYMBOLS: 'BITFINEX/INVOICES/SYMBOL/CLEAR',
   UPDATE_INVOICES: 'BITFINEX/INVOICES/UPDATE',
+  SET_MERCHANT: 'BITFINEX/INVOICES/MERCHANT/SET',
 }

src/state/invoices/reducer.js

@@ -11,6 +11,7 @@ import { updateInvoices } from './utils'
 
 const initialState = {
   ...baseSymbolState,
+  isMerchant: true,
 }
 
 export function invoicesReducer(state = initialState, action) {
@@ -60,6 +61,11 @@ export function invoicesReducer(state = initialState, action) {
         existingCoins: state.existingCoins,
         targetCategory: state.targetCategory,
       }
+    case types.SET_MERCHANT:
+      return {
+        ...state,
+        isMerchant: payload,
+      }
     case timeRangeTypes.SET_TIME_RANGE:
       return {
         ...initialState,

src/state/invoices/saga.js

@@ -58,11 +58,21 @@ function* fetchInvoices() {
     yield put(updatePagination(TYPE, result))
 
     if (error) {
-      yield put(actions.fetchFail({
-        id: 'status.fail',
-        topic: 'invoices.title',
-        detail: JSON.stringify(error),
-      }))
+      const { code, message } = error
+      if (code === 409) {
+        yield put(actions.setMerchantStatus(false))
+        yield put(actions.fetchFail({
+          id: 'status.fail',
+          topic: 'invoices.title',
+          detail: message,
+        }))
+      } else {
+        yield put(actions.fetchFail({
+          id: 'status.fail',
+          topic: 'invoices.title',
+          detail: JSON.stringify(error),
+        }))
+      }
     }
   } catch (fail) {
     yield put(actions.fetchFail({

src/state/invoices/selectors.js

@@ -5,12 +5,14 @@ export const getTargetSymbols = state => getInvoices(state).targetSymbols
 export const getDataReceived = state => getInvoices(state).dataReceived
 export const getEntries = state => getInvoices(state).entries
 export const getPageLoading = state => getInvoices(state).pageLoading
+export const getIsMerchant = state => getInvoices(state).isMerchant
 
 export default {
   getDataReceived,
   getEntries,
   getExistingCoins,
   getInvoices,
+  getIsMerchant,
   getPageLoading,
   getTargetSymbols,
 }

src/ui/NoMerchant/NoMerchant.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withTranslation } from 'react-i18next'
+
+import Icon from 'icons'
+
+const NoMerchant = ({ t }) => (
+  <div className='no_merchant'>
+    <div className='no_merchant-wrapper'>
+      <Icon.WARNING />
+      <>
+        {t('no_merchant.title')}
+        <a
+          target='_blank'
+          rel='noreferrer'
+          href='https://pay.bitfinex.com/'
+        >
+          {t('no_merchant.link')}
+        </a>
+        .
+      </>
+    </div>
+  </div>
+)
+
+NoMerchant.propTypes = {
+  t: PropTypes.func.isRequired,
+}
+
+export default withTranslation('translations')(NoMerchant)

src/ui/NoMerchant/_NoMerchant.scss

@@ -0,0 +1,31 @@
+.no_merchant {
+  position: relative;
+
+  &-wrapper {
+    width: fit-content;
+    height: fit-content;
+    margin: 180px auto 0 auto;
+    text-align: center;
+
+    svg {
+      display: block;
+      margin: 0 auto 38px auto;
+    }
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .no_merchant {
+    &-wrapper {
+      margin: 262px auto 0 auto;
+    }
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .no_merchant {
+    &-wrapper {
+      margin: 40px auto 0 auto;
+    }
+  }
+}

src/ui/NoMerchant/index.js

@@ -0,0 +1 @@
+export { default } from './NoMerchant'

src/ui/_index.scss

@@ -14,6 +14,7 @@
 @import "./NavMenu/_NavMenu.scss";
 @import "./NavSwitcher/_NavSwitcher.scss";
 @import "./NoData/_NoData.scss";
+@import "./NoMerchant/_NoMerchant.scss";
 @import "./Pagination/_Pagination.scss";
 @import "./PlatformLogo/_PlatformLogo.scss";
 @import "./QueryButton/_QueryButton.scss";