refactor: reuse contact box in case pages (#1035)

src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx

@@ -1,83 +1,33 @@
 import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
 
-import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
-import Text from "src/components/text/Text";
-import { fetchEmployeesByEmails } from "src/utils/employees";
-import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
-import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/admin";
-import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
-import { loadStudioQuery } from "studio/lib/store";
+import ContactBoxContent from "src/components/sections/contact-box/ContactBoxContent";
 
-import styles from "./contactInformation.module.css";
-import ContactSelector, { ContactByLocationMap } from "./ContactSelector";
+import { fetchLocationsWithContact, getEmployeePageSlug } from "./api";
 
 interface ContactInformationProps {
   language: string;
 }
 
-async function fetchContactByLocationMap(
-  companyLocations: CompanyLocation[],
-): Promise<ContactByLocationMap> {
-  const contactByLocation: ContactByLocationMap = {};
-  for (const location of companyLocations) {
-    if (
-      location.contactPerson === undefined ||
-      location.contactPerson.length === 0
-    ) {
-      continue;
-    }
-    const contactRes = await fetchEmployeesByEmails([location.contactPerson]);
-    if (!contactRes.ok || contactRes.value.length === 0) {
-      continue;
-    }
-    contactByLocation[location._id] = contactRes.value[0];
-  }
-  return contactByLocation;
-}
-
 export default async function ContactInformation({
   language,
 }: ContactInformationProps) {
-  const employeePageSlug = (
-    await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, {
-      language,
-    })
-  ).data?.slug;
-  const companyLocations = (
-    await loadStudioQuery<CompanyLocation[]>(COMPANY_LOCATIONS_QUERY, {})
-  ).data;
-  const contactByLocation = await fetchContactByLocationMap(companyLocations);
-  const locationIdsWithContact = Object.keys(contactByLocation);
-  const locationsWithContact = companyLocations.filter((location) =>
-    locationIdsWithContact.includes(location._id),
-  );
+  const employeePageSlug = await getEmployeePageSlug(language);
+  const contactPoints = fetchLocationsWithContact();
+
   const t = await getTranslations("contact_information");
   return (
-    <>
-      <section className={styles.contactBox}>
-        <div
-          className={`${styles.contactBox__inner} ${styles["contactBox__inner--light"]}`}
-        >
-          <div className={styles.textContent}>
-            <Text type="h3" as="h2">
-              {t("help")}
-            </Text>
-            <Text type="bodyBig">{t("contact_sale")} </Text>
-          </div>
-          <div className={styles.contactSelectorWrapper}>
-            <Suspense fallback={<EmployeeCardSkeleton background={"light"} />}>
-              <ContactSelector
-                language={language}
-                locations={locationsWithContact}
-                contactByLocation={contactByLocation}
-                employeePageSlug={employeePageSlug}
-                background={"light"}
-              />
-            </Suspense>
-          </div>
-        </div>
-      </section>
-    </>
+    <Suspense fallback={<div>Loading...</div>}>
+      <ContactBoxContent
+        data={{
+          basicTitle: t("help"),
+          optionalSubtitle: t("contact_sale"),
+          background: "light",
+        }}
+        language={language}
+        employeesPageSlug={employeePageSlug}
+        contactPoints={contactPoints}
+      />
+    </Suspense>
   );
 }

src/components/customerCases/customerCase/contactInformation/api.ts

@@ -0,0 +1,65 @@
+import { EmployeeAndMetadata } from "src/components/sections/contact-box/types";
+import { fetchEmployeesByEmails } from "src/utils/employees";
+import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
+import { COMPANY_LOCATIONS_QUERY } from "studio/lib/queries/admin";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+
+export async function getEmployeePageSlug(language: string) {
+  const employeePageSlug =
+    (
+      await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, {
+        language,
+      })
+    ).data?.slug ?? "";
+
+  return employeePageSlug;
+}
+
+export async function fetchLocationsWithContact(): Promise<
+  EmployeeAndMetadata[]
+> {
+  const companyLocations = (
+    await loadStudioQuery<CompanyLocation[]>(COMPANY_LOCATIONS_QUERY, {})
+  ).data;
+  const contactByLocation = await fetchContactByLocationMap(companyLocations);
+
+  return contactByLocation;
+}
+
+async function fetchContactByLocationMap(
+  companyLocations: CompanyLocation[],
+): Promise<EmployeeAndMetadata[]> {
+  const uniqueEmails = Array.from(
+    new Set(
+      companyLocations
+        .map((location) => location.contactPerson)
+        .filter((contactPerson) => contactPerson !== undefined),
+    ),
+  );
+
+  const contactRes = await fetchEmployeesByEmails(uniqueEmails);
+
+  if (!contactRes.ok) {
+    return [];
+  }
+
+  const contactByLocation: EmployeeAndMetadata[] = [];
+
+  for (const location of companyLocations) {
+    const employee = contactRes.value.find(
+      (employee) => employee.email === location.contactPerson,
+    );
+
+    if (!employee || !location?.companyLocationName) {
+      continue;
+    }
+
+    contactByLocation.push({
+      employee,
+      tag: location.companyLocationName,
+      tagSlug: location._id,
+    });
+  }
+  return contactByLocation;
+}

src/components/sections/contact-box/ContactBox.tsx

@@ -1,12 +1,7 @@
-import { Suspense } from "react";
-
-import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
-import Text from "src/components/text/Text";
 import { ContactBoxSection } from "studio/lib/interfaces/pages";
 
 import { fetchEmployeesWithTags, getEmployeesPageSlug } from "./api";
-import styles from "./contact-box.module.css";
-import ContactSelector from "./ContactSelector";
+import ContactBoxContent from "./ContactBoxContent";
 
 export interface ContactBoxProps {
   section: ContactBoxSection;
@@ -25,38 +20,12 @@ export default async function ContactBox({
 
   const contactPoints = fetchEmployeesWithTags(section.contactPoints);
 
-  const backgroundClass = styles[`contactBox__inner--${section.background}`];
-  const employeeCardBackground =
-    section.background === "transparent" ? "light" : section.background;
-
   return (
-    <section className={styles.contactBox}>
-      <div className={`${styles.contactBox__inner} ${backgroundClass}`}>
-        <div className={styles.textContent}>
-          <Text type="h3" as="h2">
-            {section.basicTitle}
-          </Text>
-
-          {section.optionalSubtitle && (
-            <Text type="bodyBig">{section.optionalSubtitle}</Text>
-          )}
-        </div>
-
-        <div className={styles.contactSelectorWrapper}>
-          <Suspense
-            fallback={
-              <EmployeeCardSkeleton background={employeeCardBackground} />
-            }
-          >
-            <ContactSelector
-              employeesPageSlug={employeesPageSlug}
-              contactPoints={contactPoints}
-              language={language}
-              background={employeeCardBackground}
-            />
-          </Suspense>
-        </div>
-      </div>
-    </section>
+    <ContactBoxContent
+      data={section}
+      language={language}
+      employeesPageSlug={employeesPageSlug}
+      contactPoints={contactPoints}
+    />
   );
 }