foundry-component-library 0.1.14 → 0.2.0

package/lib/components/cases/Items/index.tsx

@@ -83,7 +83,11 @@ function Cases({
 
             return (
               <div key={item.id} className={styles.case}>
-                <Link href={item.uri}>
+                <Link
+                  href={`/cases/${
+                    item.status !== "draft" ? item.slug : `preview/${item.id}`
+                  }`}
+                >
                   {thumbnailVideo && (
                     <Video
                       url={thumbnailVideo.mediaItemUrl}
@@ -109,6 +113,7 @@ function Cases({
                   <div className={styles.texts}>
                     <div>
                       <h3 className={styles.title}>{item.title}</h3>
+                      {item.status === "draft" && <div>DRAFT</div>}
                       <div className={styles.caption}>{item.case.caption}</div>
                     </div>
                     <div className={styles.arrowWrapper}>

package/lib/queries/client.ts

@@ -1,6 +1,20 @@
 import { GraphQLClient } from "graphql-request";
 
 const baseUrl = process.env.WORDPRESS_URL || "https://data.foundry.ch";
-const graphqlClient = new GraphQLClient(`${baseUrl}/graphql`);
+
+const headers: Record<string, string> = {
+  "Content-Type": "application/json",
+};
+
+if (process.env.WP_PREVIEW_USER && process.env.WP_PREVIEW_PASS) {
+  const auth = Buffer.from(`admin:${process.env.WP_PREVIEW_PASS}`).toString(
+    "base64"
+  );
+  headers["Authorization"] = `Basic ${auth}`;
+}
+
+const graphqlClient = new GraphQLClient(`${baseUrl}/graphql`, {
+  headers,
+});
 
 export default graphqlClient;

package/lib/queries/getCaseById.ts

@@ -0,0 +1,284 @@
+import { gql } from "graphql-request";
+import { Case } from "../../lib/types";
+import client from "./client";
+import { type ContactPage } from "./getContactPage";
+
+type HomePage = {
+  customFieldsBerlin: {
+    awardsHeading?: string;
+    awards?: Array<{
+      image: {
+        sourceUrl: string;
+      };
+      heading: string;
+      text: string;
+    }>;
+  };
+};
+
+export default async function getCaseBySlug({
+  id,
+  language,
+}: {
+  id: string;
+  language: string;
+}): Promise<{
+  case: Case;
+  contactPage: ContactPage;
+  homePage: HomePage;
+}> {
+  const homePage = language === "DE" ? "home-berlin-de" : "home-berlin";
+  const contactPage = language === "DE" ? "contact-de" : "contact";
+
+  const query = gql`
+    query GetCaseBySlug($id: ID!) {
+      case(id: $id, idType: ID) {
+        id
+        title
+        status
+        case {
+          caption
+          mainImage {
+            sourceUrl
+          }
+          details {
+            heading
+            text
+          }
+          awards {
+            heading
+            text
+            image {
+              sourceUrl
+            }
+          }
+          relatedCases {
+            __typename
+            ... on Case {
+              id
+              title
+              uri
+              case {
+                thumbnailImage{
+                  sourceUrl
+                }
+                mainImage {
+                  sourceUrl
+                }
+              }
+            }
+          }
+          content {
+            ... on Case_Case_Content_Quote {
+              fieldGroupName
+              name
+              position
+              text
+            }
+            ... on Case_Case_Content_Results {
+              fieldGroupName
+              context
+              approach
+              outcome
+            }
+            ... on Case_Case_Content_Numbers {
+              fieldGroupName
+              number1
+              text1
+              number2
+              text2
+              number3
+              text3
+            }
+            ... on Case_Case_Content_Video {
+              fieldGroupName
+              autoplay
+              poster {
+                sourceUrl
+              }
+              caption
+              video
+              ratio
+            }
+            ... on Case_Case_Content_FullWidthImage {
+              fieldGroupName
+              fullWidth
+              image {
+                sourceUrl
+              }
+            }
+            ... on Case_Case_Content_CenterColumn {
+              fieldGroupName
+              text
+            }
+            ... on Case_Case_Content_Twocolumns {
+              fieldGroupName
+              left {
+                ... on Case_Case_Content_Twocolumns_Left_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Twocolumns_Left_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Twocolumns_Left_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              right {
+                ... on Case_Case_Content_Twocolumns_Right_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Twocolumns_Right_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Twocolumns_Right_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+            }
+            ... on Case_Case_Content_Threecolumns {
+              fieldGroupName
+              left {
+                ... on Case_Case_Content_Threecolumns_Left_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              center {
+                ... on Case_Case_Content_Threecolumns_Center_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              right {
+                ... on Case_Case_Content_Threecolumns_Right_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+            }
+          }
+        }
+      }
+      contactPage: page(id: "${contactPage}", idType: URI) {
+        customFieldsContact {
+          berlinImage {
+            sourceUrl
+          }
+          berlinText
+          berlinEmail
+          berlinPhone
+          zurichImage {
+            sourceUrl
+          }
+          zurichText
+          zurichEmail
+          zurichPhone
+          newyorkImage {
+            sourceUrl
+          }
+          newyorkText
+          newyorkEmail
+          newyorkPhone
+          contactTeaserHeading
+          contactTeaserText
+        }
+      }
+      homePage: page(id: "${homePage}", idType: URI) {
+        customFieldsBerlin {
+          awardsHeading
+          awards {
+            image {
+              sourceUrl
+            }
+            heading
+            text
+          }
+        }
+      }
+    }
+  `;
+
+  const variables = { id };
+  const data: {
+    case: Case;
+    contactPage: ContactPage;
+    homePage: HomePage;
+  } = await client.request(query, variables);
+
+  return {
+    case: data.case,
+    contactPage: data.contactPage,
+    homePage: data.homePage,
+  };
+}

package/lib/queries/getCasesPage.ts

@@ -38,6 +38,7 @@ type Params = {
   page?: number;
   service?: string;
   industry?: string;
+  isPreview?: boolean;
 };
 
 export default async function getCasesPage({
@@ -50,6 +51,7 @@ export default async function getCasesPage({
   page = 1,
   service = "",
   industry = "",
+  isPreview = false,
 }: Params): Promise<{
   casesPage: CasesPage;
   cases: Case[];
@@ -88,6 +90,7 @@ export default async function getCasesPage({
 
   // Where Clause
   const whereConditions = [
+    isPreview ? "status: DRAFT" : "status: PUBLISH",
     hasSearchTerm ? "search: $search" : "",
     hasCategoryTerm ? "caseCategory: $categorySlug" : "",
     exclude ? "notIn: $exclude" : "",
@@ -130,6 +133,7 @@ export default async function getCasesPage({
           title
           slug
           uri
+          status
           case {
             featured
             service

package/lib/queries/getHubBySlug.ts

@@ -23,7 +23,7 @@ type HubFields = {
   homePage: HomePage;
 };
 
-export default async function getCaseBySlug({
+export default async function getHubBySlug({
   slug,
   language,
 }: {

package/lib/queries/index.ts

@@ -5,6 +5,7 @@ import getMetadataBySlug from "./getMetadataBySlug";
 import getPageBySlug from "./getPageBySlug";
 import getPostBySlug from "./getPostBySlug";
 import getCaseBySlug from "./getCaseBySlug";
+import getCaseById from "./getCaseById";
 import getContactPage from "./getContactPage";
 import getBrands from "./getBrands";
 import getPeoplePage from "./getPeoplePage";
@@ -25,6 +26,7 @@ export {
   getPageBySlug,
   getPostBySlug,
   getCaseBySlug,
+  getCaseById,
   getContactPage,
   getBrands,
   getPeoplePage,

package/lib/types/index.ts

@@ -226,8 +226,10 @@ export type Case = {
   title: string;
   slug?: string;
   uri: string;
+  link?: string;
   date?: string;
   content?: string;
+  status?: string;
   author?: {
     node: {
       name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-component-library",
-  "version": "0.1.14",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",