feat(customerCase): featured customer cases

varianter · Oct 29, 2024 · 6a5abec · 6a5abec
1 parent 0956853
commit 6a5abec
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 1 deletion.
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -7,6 +7,7 @@ import {
 } from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
+import FeaturedCases from "./featuredCases/FeaturedCases";
 
 export interface CustomerCaseProps {
   customerCase: CustomerCaseDocument;
@@ -129,6 +130,7 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
             </div>
           ))}
         </div>
+        <FeaturedCases featuredCases={customerCase.featuredCases} />
       </div>
     </div>
   );

diff --git a/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx b/src/components/customerCases/customerCase/featuredCases/FeaturedCases.tsx
@@ -0,0 +1,30 @@
+import { SanitySharedImage } from "src/components/image/SanityImage";
+import Text from "src/components/text/Text";
+import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases";
+
+import styles from "./featuredCases.module.css";
+
+export interface FeaturedCasesProps {
+  featuredCases: CustomerCaseBase[];
+}
+
+export default function FeaturedCases({ featuredCases }: FeaturedCasesProps) {
+  return (
+    <div className={styles.wrapper}>
+      <Text type={"h3"}>Lignende prosjekter</Text>
+      <div className={styles.content}>
+        {featuredCases.map((featuredCase) => (
+          <div key={featuredCase._id} className={styles.caseWrapper}>
+            <div className={styles.caseImageWrapper}>
+              <SanitySharedImage image={featuredCase.image} />
+            </div>
+            <div>
+              <Text type={"bodyBig"}>{featuredCase.basicTitle}</Text>
+              <Text type={"bodySmall"}>{featuredCase.description}</Text>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css b/src/components/customerCases/customerCase/featuredCases/featuredCases.module.css
@@ -0,0 +1,34 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  margin: 4rem 0;
+}
+
+.content {
+  display: flex;
+  gap: 5rem;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
+
+.caseWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.caseImageWrapper {
+  width: 100%;
+  height: 200px;
+}
+
+.caseImageWrapper img {
+  border-radius: 0.75rem;
+  width: 100% !important;
+}
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
@@ -32,4 +32,5 @@ export type CustomerCaseSections = (RichTextBlock | ImageBlock | QuoteBlock)[];
 export interface CustomerCase extends CustomerCaseBase {
   projectInfo: CustomerCaseProjectInfo;
   sections: CustomerCaseSections;
+  featuredCases: CustomerCaseBase[];
 }
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
@@ -62,6 +62,9 @@ export const CUSTOMER_CASE_QUERY = groq`
         "quote": ${translatedFieldFragment("quote")},
         "author": ${translatedFieldFragment("author")},
       },
+    },
+    "featuredCases": featuredCases[] -> {
+      ${CUSTOMER_CASE_BASE_FRAGMENT}
     }
   }
 `;

diff --git a/studioShared/schemas/documents/customerCase.ts b/studioShared/schemas/documents/customerCase.ts
@@ -1,9 +1,11 @@
-import { defineField, defineType } from "sanity";
+import { groq } from "next-sanity";
+import { Reference, defineField, defineType } from "sanity";
 
 import { isInternationalizedString } from "studio/lib/interfaces/global";
 import { internationalizedImage } from "studio/schemas/fields/media";
 import { titleID } from "studio/schemas/fields/text";
 import { titleSlug } from "studio/schemas/schemaTypes/slug";
+import { buildDraftId, buildPublishedId } from "studio/utils/documentUtils";
 import { firstTranslation } from "studio/utils/i18n";
 import { customerCaseProjectInfo } from "studioShared/schemas/fields/customerCaseProjectInfo";
 import imageBlock from "studioShared/schemas/objects/imageBlock";
@@ -73,6 +75,51 @@ const customerCase = defineType({
       type: "array",
       of: [richTextBlock, imageBlock, listBlock, quoteBlock],
     }),
+    defineField({
+      name: "featuredCases",
+      title: "Featured Cases",
+      description:
+        "List of Customer Cases that should be displayed at the bottom of this Customer Case",
+      type: "array",
+      of: [
+        {
+          type: "reference",
+          to: [{ type: customerCaseID }],
+          validation: (rule) =>
+            rule.custom((value: Reference, context) => {
+              if (
+                context.document !== undefined &&
+                buildPublishedId(value._ref) ===
+                  buildPublishedId(context.document._id)
+              ) {
+                return "Can not feature itself";
+              }
+              return true;
+            }),
+          options: {
+            disableNew: true,
+            filter: ({ document, parent }) => ({
+              // hide current and already featured customer cases
+              filter: groq`!(_id in forbidden)`,
+              params: {
+                forbidden: [
+                  buildPublishedId(document._id),
+                  buildDraftId(document._id),
+                  ...(Array.isArray(parent)
+                    ? parent.flatMap((r) =>
+                        typeof r._ref === "string"
+                          ? [buildPublishedId(r._ref), buildDraftId(r._ref)]
+                          : undefined,
+                      )
+                    : []),
+                ],
+              },
+            }),
+          },
+        },
+      ],
+      validation: (rule) => rule.max(3).unique(),
+    }),
   ],
   preview: {
     select: {