feat: use endpoints for service catalog

zendesk · Nov 15, 2024 · 3c88d26 · 3c88d26
1 parent 30dcab4
commit 3c88d26
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 160 deletions.
diff --git a/assets/service-catalog-bundle.js b/assets/service-catalog-bundle.js
diff --git a/src/modules/service-catalog/ServiceCatalogItemPage.tsx b/src/modules/service-catalog/ServiceCatalogItemPage.tsx
@@ -1,34 +1,14 @@
-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 { useEffect, useState } from "react";
 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";
 
-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 +32,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,21 +55,17 @@ 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}
     ${(props) => getColorV8("grey", 300, props.theme)};
   display: flex;
   flex-direction: column;
   align-items: center;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
 
   @media (max-width: ${(props) => props.theme.breakpoints.md}) {
     position: sticky;
@@ -117,7 +82,7 @@ const ButtonWrapper = styled.div`
 `;
 
 export interface ServiceCatalogItemPageProps {
-  serviceCatalogItem: ServiceCatalogItem;
+  serviceCatalogItemId: number;
   baseLocale: string;
   hasAtMentions: boolean;
   userRole: string;
@@ -128,15 +93,16 @@ export interface ServiceCatalogItemPageProps {
 }
 
 export function ServiceCatalogItemPage({
-  serviceCatalogItem,
+  serviceCatalogItemId,
   baseLocale,
   hasAtMentions,
   userRole,
   organizations,
   userId,
   brandId,
 }: ServiceCatalogItemPageProps) {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [serviceCatalogItem, setServiceCatalogItem] =
+    useState<ServiceCatalogItem>({} as ServiceCatalogItem);
   const { requestFields, handleChange } = useItemFormFields(
     serviceCatalogItem,
     baseLocale
@@ -147,27 +113,30 @@ export function ServiceCatalogItemPage({
       ? organizations[0]?.id?.toString()
       : null;
 
-  const toggleDescription = () => {
-    setIsExpanded(!isExpanded);
-  };
+  useEffect(() => {
+    async function fetchServiceCatalogItem() {
+      try {
+        const response = await fetch(
+          `/api/v2/help_center/service_catalog/items/${serviceCatalogItemId}`
+        );
+        const data = await response.json();
+        if (response.ok) {
+          setServiceCatalogItem(data.service_catalog_item);
+        }
+      } catch (error) {
+        console.error("Error fetching service catalog item:", error);
+      }
+    }
+    fetchServiceCatalogItem();
+  }, [serviceCatalogItemId]);
 
   return (
     <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}