Final changes for RO closer.

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Alert, Card } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -20,7 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 });
 export default connect(mapStateToProps, mapDispatchToProps)(JobCloseRoGuardProfit);
 
-export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form }) {
+export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form, warningCallback }) {
   const { t } = useTranslation();
 
   const total = useMemo(() => {
@@ -39,6 +39,12 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form }) {
     return Dinero({ amount: 0 }).subtract(total);
   }, [job, total]);
 
+  useEffect(() => {
+    if (balance.getAmount !== 0) {
+      warningCallback({ key: 'ar', warning: t('jobs.labels.outstanding_ar') });
+    }
+  }, [balance, t, warningCallback]);
+
   return (
     <Card title={t('jobs.labels.accountsreceivable')} style={{ height: '100%' }}>
       <DataLabel label={t('payments.labels.totalpayments')}>{total.toFormat()}</DataLabel>
@@ -49,7 +55,11 @@ export function JobCloseRoGuardProfit({ job, jobRO, bodyshop, form }) {
         {balance.toFormat()}
       </DataLabel>
       {balance.getAmount !== 0 && (
-        <Alert style={{margin: "8px 0px"}} type="warning" message={t('jobs.labels.outstanding_ar')} />
+        <Alert
+          style={{ margin: '8px 0px' }}
+          type="warning"
+          message={t('jobs.labels.outstanding_ar')}
+        />
       )}
     </Card>
   );