333 Implements GraphQL call to get specific customers and renders the…

… result in WfoCustomerDescriptionsField

packages/orchestrator-ui-components/src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx

@@ -1,6 +1,13 @@
 import React, { FC } from 'react';
 
-import { CustomerDescriptions } from '@/types';
+import { useGetCustomerQuery } from '@/rtk';
+import { Customer, CustomerDescriptions } from '@/types';
+
+type CustomerDescriptionWithName = Pick<
+    CustomerDescriptions,
+    'description' | 'customerId'
+> &
+    Partial<Pick<Customer, 'fullname' | 'shortcode'>>;
 
 export type WfoCustomerDescriptionsFieldProps = {
     customerDescriptions: CustomerDescriptions[];
@@ -9,16 +16,39 @@ export type WfoCustomerDescriptionsFieldProps = {
 export const WfoCustomerDescriptionsField: FC<
     WfoCustomerDescriptionsFieldProps
 > = ({ customerDescriptions }) => {
-    // Todo service call to fetch short codes
+    const customerIds = customerDescriptions.map(
+        (customerDescription) => customerDescription.customerId,
+    );
+    const { data } = useGetCustomerQuery({ customerIds });
+
+    if (!data) {
+        return null;
+    }
+
+    const customerDescriptionsWithName: CustomerDescriptionWithName[] =
+        customerDescriptions.map(({ description, customerId }) => {
+            const customer = data.find(
+                (customer) => customer.customerId === customerId,
+            );
+
+            return {
+                customerId,
+                shortcode: customer?.shortcode,
+                fullname: customer?.fullname,
+                description,
+            };
+        });
 
     return (
-        <>
-            {customerDescriptions
-                .map(
-                    (q) =>
-                        `${q.subscriptionId}/${q.description}/${q.customerId}`,
-                )
-                .join(', ')}
-        </>
+        <div>
+            {customerDescriptionsWithName.map(
+                ({ shortcode, fullname, description }) => (
+                    <div
+                        key={shortcode}
+                        title={fullname}
+                    >{`${shortcode}: ${description}`}</div>
+                ),
+            )}
+        </div>
     );
 };

packages/orchestrator-ui-components/src/rtk/endpoints/customers.ts

@@ -3,25 +3,52 @@ import { Customer, CustomersResult } from '@/types';
 import { orchestratorApi } from '../api';
 
 const customersQuery = `query Customers {
-  customers(first: 1000000, after: 0) {
-      page {
-          fullname
-          customerId
-          shortcode
+    customers(first: 1000000, after: 0) {
+        page {
+            fullname
+            customerId
+            shortcode
+        }
+    }
+}`;
+
+// Todo: fix hardcoded "first 10"
+const customerQuery = `query Customer($customerId: String!) {
+    customers(
+        first: 10
+        filterBy: [{field: "customerId", value: $customerId}]
+    ) {
+        page {
+            customerId
+            fullname
+            shortcode
       }
-  }
+    }
 }`;
 
 const customersApi = orchestratorApi.injectEndpoints({
     endpoints: (build) => ({
         getCustomers: build.query<Customer[], void>({
             query: () => ({ document: customersQuery }),
-            transformResponse: (response: CustomersResult): Customer[] => {
-                const customers = response?.customers?.page || [];
-                return customers;
-            },
+            transformResponse: (response: CustomersResult): Customer[] =>
+                response?.customers?.page || [],
+        }),
+        getCustomer: build.query<
+            Customer[],
+            { customerIds: string | string[] }
+        >({
+            query: (inputParameters) => ({
+                document: customerQuery,
+                variables: {
+                    customerId: Array.isArray(inputParameters.customerIds)
+                        ? inputParameters.customerIds.join('|')
+                        : inputParameters.customerIds,
+                },
+            }),
+            transformResponse: (response: CustomersResult): Customer[] =>
+                response?.customers?.page || [],
         }),
     }),
 });
 
-export const { useGetCustomersQuery } = customersApi;
+export const { useGetCustomersQuery, useGetCustomerQuery } = customersApi;

packages/orchestrator-ui-components/src/rtk/endpoints/subscriptionDetail.ts

@@ -8,7 +8,7 @@ import {
 export const subscriptionDetailQuery = `
     query SubscriptionDetail($subscriptionId: String!) {
         subscriptions(
-            filterBy: { value: $subscriptionId, field: "subscriptionId" }
+            filterBy: { field: "subscriptionId", value: $subscriptionId }
         ) {
             page {
                 subscriptionId