IO-244 IOU Parts

client/src/components/bill-form/bill-form.component.jsx

@@ -1,6 +1,8 @@
-import { UploadOutlined } from "@ant-design/icons";
+import Icon, { UploadOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
+import { MdOpenInNew } from "react-icons/md";
 import {
+  Alert,
   Divider,
   Form,
   Input,
@@ -13,6 +15,7 @@ import {
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { CHECK_BILL_INVOICE_NUMBER } from "../../graphql/bills.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -132,6 +135,30 @@ export function BillFormComponent({
           />
         </Form.Item>
       </LayoutFormRow>
+      {job &&
+        job.ious &&
+        job.ious.length > 0 &&
+        job.ious.map((iou) => (
+          <Alert
+            key={iou.id}
+            type="warning"
+            message={
+              <Space>
+                {t("bills.labels.iouexists")}
+                <Link
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  to={`/manage/jobs/${iou.id}?tab=repairdata`}
+                >
+                  <Space>
+                    {iou.ro_number}
+                    <Icon component={MdOpenInNew} />
+                  </Space>
+                </Link>
+              </Space>
+            }
+          />
+        ))}
       <LayoutFormRow>
         <Form.Item
           label={t("bills.fields.invoice_number")}
@@ -337,6 +364,7 @@ export function BillFormComponent({
         responsibilityCenters={responsibilityCenters}
         disabled={disabled}
       />
+
       <Form.Item
         name="upload"
         label="Upload"