Release 0.8.0 (#44)

* Feature/partners and journeys collections (#43)

* feat (strapi): white paper collection

* feat (strapi): white paper linked section

* feat (strapi): two column section

* fix (strapi): make icon card section props required

* fix (strapi): add cta to icon card section

* feat (strapi): move white label section to relations

* feat (strapi): calendly collection

* feat (strapi): calendly relation section

* feat (strapi): text section component

* feat (strapi): page_partner_and_products collection

with dynamic zones

* feat (strapi): add slug and new intro comopnent

to page-parenter-and-product collection

* chore: gitignore

* chore (strapi): upgrade

npx @strapi/upgrade latest

* feat (strapi)!: find page by slug

instead of documentId, breaking default strapi behaviour

* feat (strapi): add default populate middleware

for partners and products page

* feat: strapi & frontend hero on partner products page

* feat (frontend): add intro to product partners page

new intro component implementation

* feat (frontend): support two column section

on partners and products page

* fix (strapi): detailed populate dynamic comopnents

also add card section

* feat: white paper section

* feat: quotes section

on partners and products page

* refactor: code style

* feat: heading with link container

on partners and products page

* chore (frontend): add navbar to partner products page

* fix (strapi): support locale

for navbar language switcher

* refactor (frontend): reusable partner and products page

* feat (frontend): de product and partners page

* fix (frontend): tests

* fix (nextjs): build

* fix (strapi): build

* fix (frontend): 404 when slug is not found

* fix (frontend): rely on asset url instead of crop

* chore: changelog

.gitignore

@@ -0,0 +1,2 @@
+.idea
+

CHANGELOG.md

@@ -15,6 +15,11 @@ straightforward as possible.
 - [PROJECTNAME-YYYY](http://tickets.projectname.com/browse/PROJECTNAME-YYYY)
   PATCH Ticket title goes here.
 
+## [0.8.0] - 2025-01-06
+
+- feat: partners and journeys collections (#43)
+- hotfix: build strapi / frontend
+
 ## [0.7.1] - 2025-01-03
 
 - fix: hotfix theme preview page

nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

nextjs/src/app/[locale]/(partners-products)/partner-und-produkte/[slug]/page.tsx

@@ -0,0 +1,19 @@
+import { SLUGS } from "@/app/[locale]/(partners-products)/slugs"
+import PartnersProducts from "@/app/[locale]/(partners-products)/partners-products"
+
+export default async function PartnerAndProductsPage({
+  params: { locale, slug },
+}: {
+  params: {
+    locale: string
+    slug: string
+  }
+}) {
+  const currentLocale = {
+    href: `/${locale}/${SLUGS[locale]}/${slug}`,
+    locale: locale,
+    isActive: true,
+  }
+
+  return <PartnersProducts activeLocale={currentLocale} slug={slug} />
+}

nextjs/src/app/[locale]/(partners-products)/partners-and-products/[slug]/page.tsx

@@ -0,0 +1,19 @@
+import { SLUGS } from "@/app/[locale]/(partners-products)/slugs"
+import PartnersProducts from "@/app/[locale]/(partners-products)/partners-products"
+
+export default async function PartnerAndProductsPage({
+  params: { locale, slug },
+}: {
+  params: {
+    locale: string
+    slug: string
+  }
+}) {
+  const currentLocale = {
+    href: `/${locale}/${SLUGS[locale]}/${slug}`,
+    locale: locale,
+    isActive: true,
+  }
+
+  return <PartnersProducts activeLocale={currentLocale} slug={slug} />
+}

nextjs/src/app/[locale]/(partners-products)/partners-en-producten/[slug]/page.tsx

@@ -0,0 +1,19 @@
+import { SLUGS } from "@/app/[locale]/(partners-products)/slugs"
+import PartnersProducts from "@/app/[locale]/(partners-products)/partners-products"
+
+export default async function PartnerAndProductsPage({
+  params: { locale, slug },
+}: {
+  params: {
+    locale: string
+    slug: string
+  }
+}) {
+  const currentLocale = {
+    href: `/${locale}/${SLUGS[locale]}/${slug}`,
+    locale: locale,
+    isActive: true,
+  }
+
+  return <PartnersProducts activeLocale={currentLocale} slug={slug} />
+}

nextjs/src/app/[locale]/(partners-products)/partners-products.tsx

@@ -0,0 +1,189 @@
+import { SLUGS } from "@/app/[locale]/(partners-products)/slugs"
+import strapi from "@/lib/strapi"
+import Hero from "@/components/hero"
+import Title from "@/components/title"
+import Text from "@/components/text"
+import Intro from "@/components/intro"
+import SectionGroup from "@/components/sections/section-group"
+import Container from "@/components/container"
+import CardGroup from "@/components/cards/card-group"
+import CardIcon from "@/components/cards/card-icon"
+import SectionWhitepaper from "@/components/sections/section-whitepaper"
+import SectionQuote from "@/components/sections/section-quote"
+import ButtonGroup from "@/components/button-group"
+import NavBar from "@/components/nav-bar/nav-bar"
+import { LinkedLocale } from "@/components/nav-bar/linked-locales-provider"
+import { notFound } from "next/navigation"
+
+export default async function PartnersProducts({
+  activeLocale,
+  slug,
+}: {
+  activeLocale: LinkedLocale
+  slug: string
+}) {
+  const url = `page-partner-and-products/${slug}?locale=${activeLocale.locale}`
+  const page = await strapi(url)
+  if (page && page.status === 404) {
+    return notFound()
+  }
+
+  const { data } = await page.json()
+
+  const locales = data.localizations.map(
+    (item: { locale: string; slug: string }) => {
+      return {
+        href: `/${item.locale}/${SLUGS[item.locale]}/${item.slug}`,
+        locale: item.locale,
+        isActive: false,
+      }
+    },
+  )
+
+  locales.push(activeLocale)
+
+  const { hero, intro, sections } = data
+
+  return (
+    <>
+      <NavBar items={locales} />
+      {hero && (
+        <Hero color={hero.color.color} imageUrl={hero.backround_image.url}>
+          <Title markdown={hero.title} />
+          <Text markdown={hero.body} />
+        </Hero>
+      )}
+      {intro && (
+        <Intro>
+          <Text markdown={intro.body} className="grid gap-8" />
+        </Intro>
+      )}
+      {sections && sections.length > 0 && (
+        <div>{sections.map(dynamicSection)}</div>
+      )}
+    </>
+  )
+}
+
+function dynamicSection(section: any, index: number) {
+  switch (section.__component) {
+    case "sections.two-column-section":
+      return (
+        <Container
+          key={`section_two_column_${index}`}
+          background={section.props.background}
+          padding={section.props.padding}
+        >
+          <SectionGroup columns={2}>
+            <Text markdown={section.left_column} />
+            <Text markdown={section.right_column} />
+          </SectionGroup>
+        </Container>
+      )
+    case "sections.icon-card-section-with-relation":
+      return (
+        <Container
+          key={`section_icon_card_${index}`}
+          background={section.section_props.background}
+          padding={section.section_props.padding}
+        >
+          <SectionGroup title={section.title}>
+            <CardGroup>
+              {section.cards.map((item: any, i: number) => {
+                return (
+                  <CardIcon
+                    imageUrl={item.icon_image.url}
+                    title={item.title}
+                    description={item.description}
+                    cta={[item.cta].map(mapCta)[0]}
+                    key={`kpi_sections_${i}`}
+                  />
+                )
+              })}
+            </CardGroup>
+          </SectionGroup>
+        </Container>
+      )
+    case "relations.white-paper-section":
+      return (
+        <Container
+          key={`section_white_paper_${index}`}
+          background={section.props.background}
+          padding={section.props.padding}
+        >
+          <SectionWhitepaper
+            title={section.white_paper.title}
+            cta={{
+              text: "Download whitepaper",
+              href: section.white_paper.download_file.url,
+              variant: "cta",
+              size: "large",
+            }}
+            image={{
+              src: section.white_paper.cover_image.url,
+              alt: section.white_paper.cover_image.alternativeText ?? "",
+            }}
+            text={section.white_paper.description}
+          />
+        </Container>
+      )
+    case "relations.quotes-relation":
+      return (
+        <Container
+          key={`section_quote_${index}`}
+          background={"neutral"}
+          padding={"both-padding"}
+        >
+          <SectionGroup hasDividers>
+            {section.quotes.length > 0 && section.quotes[0] && (
+              <SectionQuote
+                author={`${section.quotes[0].name} | ${section.quotes[0].tagline}`}
+                image={section.quotes[0].image}
+                quote={section.quotes[0].quote}
+              />
+            )}
+          </SectionGroup>
+        </Container>
+      )
+    case "sections.heading-with-link-container":
+      return (
+        <Container
+          key={`section_heading_with_link_${index}`}
+          background={section.background}
+          padding={section.padding}
+        >
+          <SectionGroup
+            title={section.section_group_with_external_link.title}
+            align={"center"}
+          >
+            <ButtonGroup
+              align={"center"}
+              ctas={[
+                {
+                  href: section.section_group_with_external_link
+                    .external_cta_link.href,
+                  size: section.section_group_with_external_link
+                    .external_cta_link.size,
+                  variant:
+                    section.section_group_with_external_link.external_cta_link
+                      .variant,
+                  text: section.section_group_with_external_link
+                    .external_cta_link.label,
+                },
+              ]}
+            />
+          </SectionGroup>
+        </Container>
+      )
+    default:
+      return <p key={`section_${index}`}>Unknown section</p>
+  }
+}
+
+const mapCta = (cta: any) => {
+  if (!cta) return undefined
+  return {
+    text: cta.label,
+    ...cta,
+  }
+}

nextjs/src/app/[locale]/(partners-products)/slugs.ts

@@ -0,0 +1,5 @@
+export const SLUGS: { [key: string]: string } = {
+  nl: "partners-en-producten",
+  en: "partners-and-products",
+  de: "partner-und-produkte",
+}

nextjs/src/app/homepage.tsx

@@ -110,7 +110,7 @@ export default async function Homepage({
                   reverse={i % 2 === 0}
                   image={
                     // TODO support alt and rename image to src in strap
-                    { src: item.image.formats.large.url, alt: "" }
+                    { src: item.image.url, alt: "" }
                   }
                   key={i}
                   ctas={[item.cta].map(mapCta)}

nextjs/src/components/form/messages.ts

@@ -7,15 +7,27 @@ const EN_MESSAGE = {
   privacyPolicy: "You must accept the privacy policy.",
 }
 
+const NL_MESSAGE = {
+  required: "Dit veld is verplicht.",
+  email: "Voer een geldig e-mailadres in.",
+  min: "Dit veld moet minimaal ${min} tekens lang zijn.",
+  max: "Dit veld mag maximaal ${max} tekens lang zijn.",
+  oneOf: "Dit veld moet een van de volgende waarden zijn: ${values}.",
+  privacyPolicy: "U moet het privacybeleid accepteren.",
+}
+
+const DE_MESSAGE = {
+  required: "Dieses Feld muss ausgefüllt werden.",
+  email: "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
+  min: "Dieses Feld muss mindestens ${min} Zeichen lang sein.",
+  max: "Dieses Feld darf höchstens ${max} Zeichen lang sein.",
+  oneOf: "Dieses Feld muss einen der folgenden Werte enthalten: ${values}.",
+  privacyPolicy: "Sie müssen die Datenschutzrichtlinie akzeptieren.",
+}
+
 export default {
-  "de-DE": {
-    required: "Dieses Feld muss ausgefüllt werden.",
-    email: "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
-    min: "Dieses Feld muss mindestens ${min} Zeichen lang sein.",
-    max: "Dieses Feld darf höchstens ${max} Zeichen lang sein.",
-    oneOf: "Dieses Feld muss einen der folgenden Werte enthalten: ${values}.",
-    privacyPolicy: "Sie müssen die Datenschutzrichtlinie akzeptieren.",
-  },
+  de: DE_MESSAGE,
+  "de-DE": DE_MESSAGE,
   "de-CH": {
     required: "Dieses Feld muss ausgefüllt werden.",
     email: "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
@@ -24,14 +36,9 @@ export default {
     oneOf: "Dieses Feld muss einen der folgenden Werte enthalten: ${values}.",
     privacyPolicy: "Sie müssen die Datenschutzrichtlinie akzeptieren.",
   },
-  "nl-NL": {
-    required: "Dit veld is verplicht.",
-    email: "Voer een geldig e-mailadres in.",
-    min: "Dit veld moet minimaal ${min} tekens lang zijn.",
-    max: "Dit veld mag maximaal ${max} tekens lang zijn.",
-    oneOf: "Dit veld moet een van de volgende waarden zijn: ${values}.",
-    privacyPolicy: "U moet het privacybeleid accepteren.",
-  },
-  "en-AU": EN_MESSAGE,
+  nl: NL_MESSAGE,
+  "nl-NL": NL_MESSAGE,
   en: EN_MESSAGE,
+  "en-AU": EN_MESSAGE,
+  "en-US": EN_MESSAGE,
 } as const

nextjs/src/components/form/standard-form.tsx

@@ -16,15 +16,6 @@ const StandardForm: React.FC<FormProps> = ({ locale }) => {
     switch (locale) {
       case "en":
       case "en-US":
-        return {
-          firstName: "First Name",
-          lastName: "Last Name",
-          email: "Email",
-          company: "Company",
-          job: "Job",
-          privacyPolicy: "I accept the privacy policy of Adfinis",
-          submit: "Submit",
-        }
       case "en-AU":
         return {
           firstName: "First Name",
@@ -100,6 +91,8 @@ const StandardForm: React.FC<FormProps> = ({ locale }) => {
     privacyPolicy: false,
   }
 
+  console.log({ locale })
+
   const validationSchema = Yup.object({
     firstName: Yup.string().required(),
     lastName: Yup.string().required(),

nextjs/src/components/sections/section-calendly.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import React, { useEffect, useState } from "react"
 import { InlineWidget, useCalendlyEventListener } from "react-calendly"