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

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

@@ -39,7 +39,6 @@ export default function ContactSelector({
   }
 
   const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
-  console.log(selectedLocationId);
 
   return (
     <>

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}

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>

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%;
+}

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} />
   );
 };
 

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")},
     }
   }
 `;

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,
+      };
+    },
+  },
 });