From 5ba7ccb92b89ca5c550cb8be04facf815a66e660 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <43541032+idamand@users.noreply.github.com>
Date: Thu, 12 Dec 2024 09:18:29 +0100
Subject: [PATCH] V3 add title to customer entry (#1004)

* Add title to customer case entry block

* Add styling to title

* Add translations to deliveries

* Remove console log from the past
---
 .../contactInformation/ContactSelector.tsx    |  1 -
 .../customerCasesEntry/CustomerCasesEntry.tsx | 11 +++++++++-
 .../customerCasesEntry/CustomerCasesList.tsx  |  8 +++----
 .../customerCasesEntry.module.css             | 13 +++++++++++
 src/utils/renderSection.tsx                   |  4 ++--
 studio/lib/queries/pages.ts                   |  3 +++
 .../objects/sections/customerCasesEntry.ts    | 22 ++++++++++++++++++-
 7 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
index 9ff75782a..507db68d1 100644
--- a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
+++ b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
@@ -39,7 +39,6 @@ export default function ContactSelector({
   }
 
   const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
-  console.log(selectedLocationId);
 
   return (
     <>
diff --git a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx
index c1fec4869..0a7e99a2d 100644
--- a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx
+++ b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx
@@ -1,21 +1,25 @@
 import { headers } from "next/headers";
 
+import Text from "src/components/text/Text";
 import { Locale } from "src/i18n/routing";
 import { getDraftModeInfo } from "src/utils/draftmode";
 import { domainFromHostname } from "src/utils/url";
+import { CustomerCasesEntrySection } from "studio/lib/interfaces/pages";
 import { CUSTOMER_CASES_PAGE_SITEMAP_QUERY } from "studio/lib/queries/specialPages";
 import { loadStudioQuery } from "studio/lib/store";
 import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases";
 import { CUSTOMER_CASE_ENTRY_QUERY } from "studioShared/lib/queries/customerCases";
 import { loadSharedQuery } from "studioShared/lib/store";
 
+import styles from "./customerCasesEntry.module.css";
 import CustomerCasesList from "./CustomerCasesList";
 
 interface CustomerCasesProps {
   language: Locale;
+  section: CustomerCasesEntrySection;
 }
 
-async function CustomerCasesEntry({ language }: CustomerCasesProps) {
+async function CustomerCasesEntry({ language, section }: CustomerCasesProps) {
   const { perspective } = getDraftModeInfo();
   const domain = domainFromHostname(headers().get("host"));
 
@@ -42,6 +46,11 @@ async function CustomerCasesEntry({ language }: CustomerCasesProps) {
   return (
     customerCaseResult && (
       <div>
+        <div className={styles.titleWrapper}>
+          <Text type="h3" className={styles.title}>
+            {section.basicTitle}
+          </Text>
+        </div>
         <CustomerCasesList
           customerCases={customerCaseResult.data}
           language={language}
diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx
index fa04f868f..c9eec8169 100644
--- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx
+++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx
@@ -28,9 +28,9 @@ const CustomerCaseList = ({
 
   const deliveryNames = [
     selectedCustomerCase?.projectInfo.deliveries.projectManagement &&
-      "Project Management",
-    selectedCustomerCase?.projectInfo.deliveries.design && "Design",
-    selectedCustomerCase?.projectInfo.deliveries.development && "Development",
+      "project_management",
+    selectedCustomerCase?.projectInfo.deliveries.design && "design",
+    selectedCustomerCase?.projectInfo.deliveries.development && "development",
   ].filter(Boolean);
 
   return (
@@ -90,7 +90,7 @@ function CardInfo({
         <div className={styles.deliveriesList}>
           {deliveryNames.map((deliveryName, index) => (
             <Text key={index} type="h5" className={styles.dotSeparator}>
-              {deliveryName}
+              {t(deliveryName)}
             </Text>
           ))}
         </div>
diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css
index b4c362d06..a5f395bae 100644
--- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css
+++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css
@@ -128,3 +128,16 @@
   content: "·";
   margin: 0.5rem;
 }
+
+.titleWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 1.5rem;
+}
+
+.title {
+  max-width: var(--max-content-width-medium);
+  width: 100%;
+}
diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx
index 3795d5c0d..e7918fc16 100644
--- a/src/utils/renderSection.tsx
+++ b/src/utils/renderSection.tsx
@@ -195,9 +195,9 @@ const renderCustomerCasesEntrySection = (
   language: Locale,
 ) => {
   return isDraftMode ? (
-    <CustomerCasesEntry language={language} />
+    <CustomerCasesEntry language={language} section={section} />
   ) : (
-    <CustomerCasesEntry language={language} />
+    <CustomerCasesEntry language={language} section={section} />
   );
 };
 
diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts
index 2823480e9..d0db592f2 100644
--- a/studio/lib/queries/pages.ts
+++ b/studio/lib/queries/pages.ts
@@ -97,6 +97,9 @@ const SECTIONS_FRAGMENT = groq`
     _type == "employeeHighlight" => {
       "basicTitle": ${translatedFieldFragment("basicTitle")},
       "description": ${translatedFieldFragment("description")},
+    },
+    _type == "customerCasesEntry" => {
+      "basicTitle":${translatedFieldFragment("basicTitle")},
     }
   }
 `;
diff --git a/studio/schemas/objects/sections/customerCasesEntry.ts b/studio/schemas/objects/sections/customerCasesEntry.ts
index 8334f2eb8..26e2b887b 100644
--- a/studio/schemas/objects/sections/customerCasesEntry.ts
+++ b/studio/schemas/objects/sections/customerCasesEntry.ts
@@ -1,16 +1,36 @@
+import { CaseIcon } from "@sanity/icons";
 import { defineField } from "sanity";
 
+import { isInternationalizedString } from "studio/lib/interfaces/global";
+import { firstTranslation } from "studio/utils/i18n";
+
 export const customerCasesEntry = defineField({
   name: "customerCasesEntry",
   title: "Customer Cases Entry",
   type: "object",
+  icon: CaseIcon,
   fields: [
     {
       name: "basicTitle",
       title: "Basic Title",
-      type: "string",
+      type: "internationalizedArrayString",
       description:
         "This will be the title of the customer cases entry section. Make it engaging to capture the attention of your audience.",
     },
   ],
+  preview: {
+    select: {
+      title: "basicTitle",
+    },
+    prepare({ title }) {
+      if (!isInternationalizedString(title)) {
+        throw new TypeError(
+          `Expected 'title' to be InternationalizedString, was ${typeof title}`,
+        );
+      }
+      return {
+        title: firstTranslation(title) ?? undefined,
+      };
+    },
+  },
 });