From e433e78273f5d136c327520ba2aeecc405290896 Mon Sep 17 00:00:00 2001
From: katrinan029 <katrinan@usc.edu>
Date: Tue, 6 Aug 2024 15:34:35 +0000
Subject: [PATCH] feat: add customer card

---
 .../CustomerDataTable/CustomerDetails.jsx     |  2 +-
 .../CustomerDetailView/CustomerCard.jsx       | 45 ++++++++++++++
 .../CustomerViewContainer.jsx                 | 58 +++++++++++++++++++
 src/Configuration/Customers/data/utils.js     | 13 +++++
 src/data/services/EnterpriseApiService.js     |  9 +++
 src/index.jsx                                 |  6 ++
 6 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx
 create mode 100644 src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx

diff --git a/src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx b/src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx
index ae6807291..6ef708ee2 100644
--- a/src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx
+++ b/src/Configuration/Customers/CustomerDataTable/CustomerDetails.jsx
@@ -23,7 +23,7 @@ export const CustomerDetailLink = ({ row }) => {
     <div>
       <div>
         <Hyperlink
-          destination={`${HOME}/${row.original.slug}/view`}
+          destination={`${HOME}/${row.original.uuid}/view`}
           key={row.original.uuid}
           variant="muted"
           target="_blank"
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx
new file mode 100644
index 000000000..0f20a7ca7
--- /dev/null
+++ b/src/Configuration/Customers/CustomerDetailView/CustomerCard.jsx
@@ -0,0 +1,45 @@
+import { ActionRow, Button, Card, Hyperlink } from '@openedx/paragon';
+import { Launch } from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
+import { formatDate } from '../data/utils';
+
+const CustomerCard = ({ enterpriseCustomer }) => {
+  const { ADMIN_PORTAL_BASE_URL } = getConfig();
+
+  return (
+    <Card variant="dark mb-0">
+      <Card.Section
+        actions={
+          <ActionRow>
+            <Button>View Details</Button>
+            <Button variant="inverse-primary" iconAfter={Launch}>Open in Django</Button>
+          </ActionRow>
+        }
+      >
+        <p className="small font-weight-bold mb-0 mt-4">
+          CUSTOMER RECORD
+        </p>
+        <p className="lead font-weight-bold mb-0">
+          {enterpriseCustomer.name}
+        </p>
+        <Hyperlink
+          destination={`${ADMIN_PORTAL_BASE_URL}/${enterpriseCustomer.slug}/admin/learners`}
+          variant="muted"
+          target="_blank"
+          showLaunchIcon
+          className="small mb-1"
+        >
+          /{enterpriseCustomer.slug}/
+        </Hyperlink>
+        <p className="small mb-1">
+          {enterpriseCustomer.uuid}
+        </p>
+        <p className="small mb-1">
+          Created {enterpriseCustomer.created} • Last modified {formatDate(enterpriseCustomer.modified)}
+        </p>
+      </Card.Section>
+    </Card>
+  )
+};
+
+export default CustomerCard;
\ No newline at end of file
diff --git a/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx b/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx
new file mode 100644
index 000000000..28860a94b
--- /dev/null
+++ b/src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx
@@ -0,0 +1,58 @@
+import { Breadcrumb, Stack, Container } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import CustomerCard from "./CustomerCard";
+import { useState, useEffect, useCallback } from 'react';
+import { useParams  } from 'react-router-dom';
+import { getEnterpriseCustomer } from '../data/utils';
+import { logError } from '@edx/frontend-platform/logging';
+
+const CustomerViewContainer = () => {
+  const { id } = useParams();
+  const [enterpriseCustomer, setEnterpriseCustomer] = useState([])
+  const [isLoading, setIsLoading] = useState(true);
+  const intl = useIntl();
+
+  const fetchData = useCallback(
+    async () => {
+      try {
+        const enterpriseCustomer = await getEnterpriseCustomer(id);
+        setEnterpriseCustomer(enterpriseCustomer);
+      } catch (error) {
+        logError(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [],
+  );
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <Container className="mt-5">
+        <Breadcrumb arialLabel="customer detail"
+          links={[
+            {
+              label: intl.formatMessage({
+                id: 'lcm.budget.detail.page.breadcrumb.budgets',
+                defaultMessage: 'Budgets',
+                description: 'Breadcrumb label for the budgets page',
+              })
+            },
+            { label: `${enterpriseCustomer.name}`, href: 'here' }
+          ]}
+        />
+      </Container>
+      <Container className="mt-4">
+        <Stack gap={2}>
+          <CustomerCard enterpriseCustomer={enterpriseCustomer} />
+        </Stack>
+      </Container>
+    </div>
+  );
+}
+
+export default CustomerViewContainer;
\ No newline at end of file
diff --git a/src/Configuration/Customers/data/utils.js b/src/Configuration/Customers/data/utils.js
index 9252e9864..0b0245b26 100644
--- a/src/Configuration/Customers/data/utils.js
+++ b/src/Configuration/Customers/data/utils.js
@@ -2,6 +2,8 @@ import { camelCaseObject } from '@edx/frontend-platform/utils';
 import EcommerceApiService from '../../../data/services/EcommerceApiService';
 import LicenseManagerApiService from '../../../data/services/LicenseManagerApiService';
 import EnterpriseAccessApiService from '../../../data/services/EnterpriseAccessApiService';
+import LmsApiService from '../../../data/services/EnterpriseApiService';
+import dayjs from '../../Provisioning/data/dayjs';
 
 export const getEnterpriseOffers = async (enterpriseId) => {
   const response = await EcommerceApiService.fetchEnterpriseOffers(enterpriseId);
@@ -26,3 +28,14 @@ export const getSubsidyAccessPolicies = async (enterpriseId) => {
   const subsidyAccessPolicies = camelCaseObject(response.data);
   return subsidyAccessPolicies;
 };
+
+export const getEnterpriseCustomer = async (enterpriseId) => {
+  const response = await LmsApiService.fetchEnterpriseCustomer(enterpriseId)
+  const enterpriseCustomer = camelCaseObject(response.data);
+  console.log(enterpriseCustomer)
+  return enterpriseCustomer;
+};
+
+export const formatDate = (date) => {
+  return dayjs(date).utc().format('MMMM DD, YYYY');
+};
\ No newline at end of file
diff --git a/src/data/services/EnterpriseApiService.js b/src/data/services/EnterpriseApiService.js
index d185c386d..4abbf14ca 100644
--- a/src/data/services/EnterpriseApiService.js
+++ b/src/data/services/EnterpriseApiService.js
@@ -12,6 +12,8 @@ class LmsApiService {
 
   static enterpriseCustomerCatalogsWriteUrl = `${LmsApiService.enterpriseAPIBaseUrl}enterprise_customer_catalog/`;
 
+  static enterpriseCustomerUrl = `${LmsApiService.enterpriseAPIBaseUrl}enterprise-customer/`
+
   static enterpriseCustomersBasicListUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise-customer/basic_list/`;
 
   static enterpriseCustomersSupportToolUrl = `${LmsApiService.baseUrl}/enterprise/api/v1/enterprise-customer/support_tool/`;
@@ -42,6 +44,13 @@ class LmsApiService {
     title,
   });
 
+  static fetchEnterpriseCustomer = (enterpriseId) => {
+    console.log(enterpriseId)
+    return LmsApiService.apiClient().get(
+      `${LmsApiService.enterpriseCustomerUrl}${enterpriseId}/`,
+    );
+  }
+
   static fetchEnterpriseCustomerSupportTool = (options) => {
     const queryParams = new URLSearchParams({
       ...options,
diff --git a/src/index.jsx b/src/index.jsx
index 1bed2bec7..007efb559 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -29,6 +29,7 @@ import ProvisioningFormContainer from './Configuration/Provisioning/Provisioning
 import SubsidyDetailViewContainer from './Configuration/Provisioning/SubsidyDetailView/SubsidyDetailViewContainer';
 import ErrorPageContainer from './Configuration/Provisioning/ErrorPage';
 import SubsidyEditViewContainer from './Configuration/Provisioning/SubsidyEditView/SubsidyEditViewContainer';
+import CustomerViewContainer from './Configuration/Customers/CustomerDetailView/CustomerViewContainer';
 
 const { CONFIGURATION, SUPPORT_TOOLS_TABS } = ROUTES;
 
@@ -76,6 +77,11 @@ subscribe(APP_READY, () => {
       path={CONFIGURATION.SUB_DIRECTORY.CUSTOMERS.HOME}
       element={<CustomersPage />}
     />,
+    <Route
+      key={uuidv4()}
+      path={CONFIGURATION.SUB_DIRECTORY.CUSTOMERS.SUB_DIRECTORY.VIEW}
+      element={<CustomerViewContainer />}
+    />,
   ];
   ReactDOM.render(
     <AppProvider>