WIP RO Closer.

client/src/components/job-close-ro-guard/job-close-ro-guard.ar.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Alert, Card } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+import { selectJobReadOnly } from '../../redux/application/application.selectors';
+import { selectBodyshop } from '../../redux/user/user.selectors';
+import { useMemo } from 'react';
+import Dinero from 'dinero.js';
+import DataLabel from '../data-label/data-label.component';
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+  jobRO: selectJobReadOnly,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardProfit);
+
+export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form }) {
+  const { t } = useTranslation();
+
+  const total = useMemo(() => {
+    return (
+      job.payments &&
+      job.payments.reduce((acc, val) => {
+        acc = acc.add(Dinero({ amount: Math.round(val.amount * 100) }));
+        return acc;
+      }, Dinero())
+    );
+  }, [job.payments]);
+
+  const balance = useMemo(() => {
+    if (job && job.job_totals && job.job_totals.totals.total_repairs)
+      return Dinero(job.job_totals.totals.total_repairs).subtract(total);
+    return Dinero({ amount: 0 }).subtract(total);
+  }, [job, total]);
+
+  return (
+    <Card title={t('jobs.labels.accountsreceivable')} style={{ height: '100%' }}>
+      <DataLabel label={t('payments.labels.totalpayments')}>{total.toFormat()}</DataLabel>
+      <DataLabel
+        valueStyle={{ color: balance.getAmount() !== 0 ? 'red' : 'green' }}
+        label={t('payments.labels.balance')}
+      >
+        {balance.toFormat()}
+      </DataLabel>
+      {balance.getAmount !== 0 && (
+        <Alert style={{margin: "8px 0px"}} type="warning" message={t('jobs.labels.outstanding_ar')} />
+      )}
+    </Card>
+  );
+}