at the end of the day, it was inevitable

2022-12-09 08:36:26 -06:00
commit 1218570914
1768 changed files with 887087 additions and 0 deletions
@@ -0,0 +1,132 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/prop-types */
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { reduxActions } from '../../../../redux/utils/connect';
+import {
+  convertUTCtoLocal,
+  getQueryParams,
+  setDocumentData
+} from '../../../../common/helper';
+import { getTransactions } from '../../../../api/plans/userPlans';
+import Table from '../../../common/Table/Table';
+import { Button, Col } from 'reactstrap';
+import ShowTransactionDetails from './ShowTransactionDetails';
+import moment from 'moment';
+import { capitalize } from 'lodash';
+import { translate } from 'react-i18next';
+
+function UserTransactions(props) {
+  const [dataSource, setDataSource] = useState({ data: [] });
+  const [loading, setLoading] = useState(true);
+  const [selectedData, setSelectedData] = useState(false);
+  const { actions, t } = props;
+
+  useEffect(() => {
+    setDocumentData('title', 'User Transactions');
+
+    return () => setDocumentData('title'); // default
+  }, []);
+
+  const columns = [
+    {
+      id: 'activeDate',
+      Header: t('plans.transactions.activationDate'),
+      accessor: (d) => d.lines.data[0] && d.lines.data[0].period.start,
+      Cell: (props) => convertUTCtoLocal(moment.unix(props.value), 'MM/DD/YYYY')
+    },
+    {
+      id: 'expireDate',
+      Header: t('plans.transactions.expirationDate'),
+      accessor: (d) => d.lines.data[0] && d.lines.data[0].period.end,
+      Cell: (props) => convertUTCtoLocal(moment.unix(props.value), 'MM/DD/YYYY')
+    },
+    {
+      id: 'paid_at',
+      Header: t('plans.transactions.transactionDate'),
+      accessor: (d) => d.status_transitions.paid_at,
+      Cell: (props) =>
+        convertUTCtoLocal(moment.unix(props.value), 'MM/DD/YYYY HH:mm:ss')
+    },
+    {
+      Header: t('plans.transactions.amount'),
+      accessor: 'amount_paid',
+      Cell: (props) => (props.value ? `$${props.value / 100}` : '-')
+    },
+    {
+      Header: t('plans.transactions.status'),
+      accessor: 'status',
+      Cell: (props) => capitalize(props.value)
+    },
+    {
+      Header: t('plans.transactions.actions'),
+      accessor: 'id',
+      Cell: (props) => (
+        <Button
+          outline
+          className="border-0 btn-transition"
+          color="primary"
+          size="sm"
+          onClick={() => setSelectedData(props.original)}
+        >
+          {t('plans.transactions.more')}
+        </Button>
+      )
+    }
+  ];
+
+  function closeModal() {
+    setSelectedData(false);
+  }
+
+  const getTransactionList = useCallback((page, pageSize) => {
+    setLoading(true);
+    const params = getQueryParams({ page, pageSize });
+    getTransactions(params).then((res) => {
+      if (res.error || !res.data || !res.data.success || !res.data.data) {
+        setDataSource({ data: [] }); // comment this line when API is ready
+        setLoading(false);
+        return actions.addAlert({
+          type: 'error',
+          transKey: 'somethingWrong'
+        });
+      }
+
+      // setDataSource(sampleData); // comment this line when API is ready
+      setDataSource({
+        data:
+          res.data.data.data && res.data.data.data.length > 0
+            ? res.data.data.data
+            : []
+      });
+      setLoading(false);
+    });
+  }, []);
+
+  const { data = [], totalCount = 0, limit = 100, page = 1 } = dataSource;
+  return (
+    <Col xs="12" lg="8" xl="9">
+      <Table
+        cardTitle={t('plans.transactions.heading')}
+        columns={columns}
+        data={data}
+        totalCount={totalCount}
+        showTotalCount
+        limit={limit}
+        page={page}
+        isLoading={loading}
+        onFetchData={getTransactionList}
+      />
+      <ShowTransactionDetails data={selectedData} closeModal={closeModal} />
+    </Col>
+  );
+}
+
+UserTransactions.propTypes = {
+  t: PropTypes.func.isRequired,
+  actions: PropTypes.object
+};
+
+export default reduxActions()(
+  translate(['tabsContent'], { wait: true })(UserTransactions)
+);