IO-2562 CC Info in Job Block UI Correction

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -123,11 +123,16 @@ export function JobsDetailHeader({ job, bodyshop, disabled }) {
             </DataLabel>
             {job.cccontracts.length > 0 && (
               <DataLabel label={t("jobs.labels.contracts")}>
-                {job.cccontracts.map((c) => (
-                  <Link
-                    key={c.id}
-                    to={`/manage/courtesycars/contracts/${c.id}`}
-                  >{`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}</Link>
+                {job.cccontracts.map((c, index) => (
+                  <Space wrap>
+                    <Link
+                      key={c.id}
+                      to={`/manage/courtesycars/contracts/${c.id}`}
+                    >
+                      {`${c.agreementnumber} - ${c.courtesycar.fleetnumber} ${c.courtesycar.year} ${c.courtesycar.make} ${c.courtesycar.model}`}
+                      {index !== job.cccontracts.length - 1 ? "," : null}
+                    </Link>
+                  </Space>
                 ))}
               </DataLabel>
             )}

client/src/graphql/courtesy-car.queries.js

@@ -22,7 +22,6 @@ export const QUERY_AVAILABLE_CC = gql`
         ]
         status: { _eq: "courtesycars.status.in" }
       }
-      order_by: { fleetnumber: asc }
     ) {
       color
       dailycost
@@ -58,7 +57,7 @@ export const CHECK_CC_FLEET_NUMBER = gql`
 `;
 export const QUERY_ALL_CC = gql`
   query QUERY_ALL_CC {
-    courtesycars(order_by: { fleetnumber: asc }) {
+    courtesycars {
       color
       created_at
       dailycost