Use target endpoints for Service Catalog list and item

src/modules/service-catalog/ServiceCatalogItemPage.tsx

@@ -1,34 +1,13 @@
-import { XXXL } from "@zendeskgarden/react-typography";
-import type { ServiceCatalogItem } from "./data-types/ServiceCatalogItem";
 import styled from "styled-components";
 import { Button } from "@zendeskgarden/react-buttons";
-import { useState } from "react";
-import ChevronUp from "@zendeskgarden/svg-icons/src/16/chevron-up-fill.svg";
-import ChevronDown from "@zendeskgarden/svg-icons/src/16/chevron-down-fill.svg";
 import { getColorV8 } from "@zendeskgarden/react-theming";
 import { useTranslation } from "react-i18next";
 import { useItemFormFields } from "./components/useItemFormFields";
 import { ItemRequestForm } from "./components/service-catalog-item/ItemRequestForm";
 import type { Organization } from "../ticket-fields";
+import { CollapsibleDescription } from "./components/service-catalog-item/CollapsibleDescription";
+import { useServiceCatalogItem } from "./useServiceCatalogItem";
 
-const ItemTitle = styled(XXXL)`
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-`;
-
-const CollapsibleDescription = styled.div<{ expanded: boolean }>`
-  font-size: ${(props) => props.theme.fontSizes.md};
-  text-align: left;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: ${(props) => (props.expanded ? "none" : 3)};
-  overflow: hidden;
-  margin-top: ${(props) => props.theme.space.md};
-  padding-right: ${(props) => props.theme.space.xl};
-
-  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
-    padding-right: 0;
-  }
-`;
 const Container = styled.div`
   display: flex;
   flex-direction: row;
@@ -52,17 +31,6 @@ const LeftColumn = styled.div`
   }
 `;
 
-const DescriptionWrapper = styled.div`
-  border-bottom: ${(props) => props.theme.borders.sm}
-    ${(props) => getColorV8("grey", 300, props.theme)};
-  padding-bottom: ${(props) => props.theme.space.lg};
-  margin-right: ${(props) => props.theme.space.xl};
-
-  @media (max-width: ${(props) => props.theme.breakpoints.md}) {
-    margin-right: 0;
-  }
-`;
-
 const FromFieldsWrapper = styled.div`
   margin-right: ${(props) => props.theme.space.xl};
 
@@ -86,14 +54,6 @@ const RightColumn = styled.div`
   }
 `;
 
-const ToggleButton = styled(Button)`
-  margin-top: ${(props) => props.theme.space.sm};
-  font-size: ${(props) => props.theme.fontSizes.md};
-  &:hover {
-    text-decoration: none;
-  }
-`;
-
 const ButtonWrapper = styled.div`
   padding: ${(props) => props.theme.space.lg};
   border: ${(props) => props.theme.borders.sm}
@@ -117,7 +77,7 @@ const ButtonWrapper = styled.div`
 `;
 
 export interface ServiceCatalogItemPageProps {
-  serviceCatalogItem: ServiceCatalogItem;
+  serviceCatalogItemId: number;
   baseLocale: string;
   hasAtMentions: boolean;
   userRole: string;
@@ -128,15 +88,15 @@ export interface ServiceCatalogItemPageProps {
 }
 
 export function ServiceCatalogItemPage({
-  serviceCatalogItem,
+  serviceCatalogItemId,
   baseLocale,
   hasAtMentions,
   userRole,
   organizations,
   userId,
   brandId,
 }: ServiceCatalogItemPageProps) {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const serviceCatalogItem = useServiceCatalogItem(serviceCatalogItemId);
   const { requestFields, handleChange } = useItemFormFields(
     serviceCatalogItem,
     baseLocale
@@ -147,27 +107,13 @@ export function ServiceCatalogItemPage({
       ? organizations[0]?.id?.toString()
       : null;
 
-  const toggleDescription = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  return (
+  return serviceCatalogItem ? (
     <Container>
       <LeftColumn>
-        <DescriptionWrapper>
-          <ItemTitle tag="h1">{serviceCatalogItem.name}</ItemTitle>
-          <CollapsibleDescription expanded={isExpanded}>
-            {serviceCatalogItem.description}
-          </CollapsibleDescription>
-          <ToggleButton isLink onClick={toggleDescription}>
-            {isExpanded
-              ? t("service-catalog.item.read-less", "Read less")
-              : t("service-catalog.item.read-more", "Read more")}
-            <Button.EndIcon>
-              {isExpanded ? <ChevronUp /> : <ChevronDown />}
-            </Button.EndIcon>
-          </ToggleButton>
-        </DescriptionWrapper>
+        <CollapsibleDescription
+          title={serviceCatalogItem.name}
+          description={serviceCatalogItem.description}
+        />
         <FromFieldsWrapper>
           <ItemRequestForm
             requestFields={requestFields}
@@ -189,5 +135,5 @@ export function ServiceCatalogItemPage({
         </ButtonWrapper>
       </RightColumn>
     </Container>
-  );
+  ) : null;
 }

src/modules/service-catalog/ServiceCatalogList.tsx

@@ -21,6 +21,8 @@ const StyledGrid = styled(Grid)`
   padding: 0;
 `;
 
+const PAGE_SIZE = 16;
+
 type Meta = {
   before_cursor: string;
   after_cursor: string;
@@ -46,32 +48,13 @@ export function ServiceCatalogList({
       try {
         const response = await fetch(
           currentCursor
-            ? `/api/v2/custom_objects/service_catalog_item/records?page[size]=16&${currentCursor}`
-            : `/api/v2/custom_objects/service_catalog_item/records?page[size]=16`
+            ? `/api/v2/help_center/service_catalog/items?page[size]=${PAGE_SIZE}&${currentCursor}`
+            : `/api/v2/help_center/service_catalog/items?page[size]=${PAGE_SIZE}`
         );
         const data = await response.json();
         if (response.ok) {
-          const records = data.custom_object_records.map(
-            ({
-              id,
-              name,
-              custom_object_fields,
-              custom_object_key,
-            }: {
-              id: number;
-              name: string;
-              custom_object_fields: { description: string; form_id: string };
-              custom_object_key: string;
-            }) => ({
-              id,
-              name,
-              description: custom_object_fields.description,
-              form_id: custom_object_fields.form_id,
-              custom_object_key,
-            })
-          );
           setMeta(data.meta);
-          setServiceCatalogItems(records);
+          setServiceCatalogItems(data.service_catalog_items);
           setIsLoading(false);
         }
       } catch (error) {