Version 0.43.0 (#1019)

- feat: implement #1016
- feat: capture form errors
- fix: Invariant Violation #1012
- fix: suppress #927
- fix: #995 
- fix #906 
- fix: German preview links #1029 
- chore: update dependencies

Author: wp99cp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "conveniat27",
-  "version": "0.42.3",
+  "version": "0.43.0",
   "description": "The official website of conveniat27",
   "license": "MIT",
   "author": "Cyrill Püntener v/o JPG (cyrill.puentener@cevi.ch)",
@@ -44,7 +44,7 @@
     "@aws-sdk/s3-request-presigner": "^3.1000.0",
     "@headlessui/react": "^2.2.9",
     "@icons-pack/react-simple-icons": "^12.9.0",
-    "@lexical/selection": "0.35.0",
+    "@lexical/selection": "0.41.0",
     "@mapbox/mapbox-gl-draw": "^1.5.1",
     "@next/bundle-analyzer": "16.0.0",
     "@opentelemetry/api": "^1.9.0",
@@ -66,17 +66,17 @@
     "@opentelemetry/sdk-trace-base": "^2.5.1",
     "@opentelemetry/sdk-trace-node": "^2.5.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
-    "@payloadcms/db-mongodb": "^3.78.0",
-    "@payloadcms/email-nodemailer": "^3.78.0",
-    "@payloadcms/live-preview-react": "^3.78.0",
-    "@payloadcms/next": "^3.78.0",
-    "@payloadcms/plugin-form-builder": "^3.78.0",
-    "@payloadcms/plugin-redirects": "^3.78.0",
-    "@payloadcms/plugin-search": "^3.78.0",
-    "@payloadcms/richtext-lexical": "^3.78.0",
-    "@payloadcms/richtext-slate": "^3.78.0",
-    "@payloadcms/storage-s3": "^3.78.0",
-    "@payloadcms/ui": "^3.78.0",
+    "@payloadcms/db-mongodb": "^3.79.0",
+    "@payloadcms/email-nodemailer": "^3.79.0",
+    "@payloadcms/live-preview-react": "^3.79.0",
+    "@payloadcms/next": "^3.79.0",
+    "@payloadcms/plugin-form-builder": "^3.79.0",
+    "@payloadcms/plugin-redirects": "^3.79.0",
+    "@payloadcms/plugin-search": "^3.79.0",
+    "@payloadcms/richtext-lexical": "^3.79.0",
+    "@payloadcms/richtext-slate": "^3.79.0",
+    "@payloadcms/storage-s3": "^3.79.0",
+    "@payloadcms/ui": "^3.79.0",
     "@posthog/nextjs-config": "^1.8.18",
     "@prisma/adapter-pg": "7.4.2",
     "@prisma/client": "7.4.2",
@@ -125,7 +125,7 @@
     "next-devtools-mcp": "^0.3.10",
     "next-i18n-router": "^5.5.6",
     "node-pop3": "^0.11.0",
-    "payload": "^3.78.0",
+    "payload": "^3.79.0",
     "posthog-js": "^1.356.1",
     "posthog-node": "^4.18.0",
     "qs-esm": "^7.0.3",

pnpm-lock.yaml

@@ -8,6 +8,7 @@ import {
 } from '@/features/payload-cms/payload-cms/utils/link-field-logic';
 import type { Image } from '@/features/payload-cms/payload-types';
 import type { Locale } from '@/types/types';
+import { cn } from '@/utils/tailwindcss-override';
 import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';
 import { RichText } from '@payloadcms/richtext-lexical/react';
 import ImageNode from 'next/image';
@@ -22,6 +23,7 @@ export interface NewsCardType {
   image?: Image;
   paragraph?: SerializedEditorState;
   locale: Locale;
+  isSmall?: boolean;
 }
 
 export const NewsCardBlock: React.FC<NewsCardType> = ({
@@ -32,11 +34,22 @@ export const NewsCardBlock: React.FC<NewsCardType> = ({
   image,
   paragraph,
   locale,
+  isSmall = false,
 }) => {
   const newsCardContent = (
-    <div className="flex basis-1 flex-col rounded-md border-2 border-gray-200 bg-white p-6 transition duration-200 hover:shadow-md lg:max-w-96">
+    <div
+      className={cn(
+        'flex basis-1 flex-col rounded-md border-2 border-gray-200 bg-white transition duration-200 hover:shadow-md',
+        isSmall ? 'p-4 lg:max-w-64' : 'p-6 lg:max-w-96',
+      )}
+    >
       <div>
-        <span className="font-body text-[12px] font-bold text-gray-500">
+        <span
+          className={cn(
+            'font-body font-bold text-gray-500',
+            isSmall ? 'text-[10px]' : 'text-[12px]',
+          )}
+        >
           {new Date(date).toLocaleDateString(locale, {
             weekday: 'long',
             year: 'numeric',
@@ -45,7 +58,12 @@ export const NewsCardBlock: React.FC<NewsCardType> = ({
             timeZone: 'Europe/Zurich',
           })}
         </span>
-        <h4 className="font-heading text-conveniat-green mb-6 line-clamp-3 min-h-6 text-base font-extrabold text-ellipsis">
+        <h4
+          className={cn(
+            'font-heading text-conveniat-green mb-6 line-clamp-3 min-h-6 font-extrabold text-ellipsis',
+            isSmall ? 'text-sm' : 'text-base',
+          )}
+        >
           {headline}
         </h4>
       </div>

src/components/news-card.tsx

@@ -204,8 +204,7 @@ async function refreshAccessToken(token: JWT): Promise<JWT> {
       // Update the user in Payload CMS with the new groups
       // async loading of payload configuration (to avoid circular dependency)
       const config = await import('@payload-config');
-      // @ts-ignore
-      const payload = await getPayload({ config });
+      const payload = await getPayload({ config: config.default });
       const payloadCMSUser = await saveAndFetchUserFromPayload(payload, profile);
 
       return {
@@ -317,10 +316,8 @@ export const authOptions: NextAuthConfig = {
       if (account && _profile) {
         const profile = _profile as unknown as HitobitoProfile;
 
-        // async loading of payload configuration (to avoid circular dependency)
         const config = await import('@payload-config');
-        // @ts-ignore
-        const payload = await getPayload({ config });
+        const payload = await getPayload({ config: config.default });
         const payloadCMSUser = await saveAndFetchUserFromPayload(payload, profile);
 
         return {

src/features/next-auth/utils/next-auth-config.ts

@@ -50,7 +50,11 @@ export const TimelineEntry: React.FC<{
         <SubheadingH2 className="text-md m-0 mt-[-8]">{timeline.title}</SubheadingH2>
 
         <PageSectionsConverter
-          blocks={timeline.mainContent as unknown as ContentBlock[]}
+          blocks={
+            timeline.mainContent?.map((block) =>
+              block.blockType === 'newsCard' ? { ...block, isSmall: true } : block,
+            ) as unknown as ContentBlock[]
+          }
           locale={locale}
           sectionClassName="mt-2"
           sectionOverrides={{

src/features/payload-cms/components/content-blocks/timeline-entry.tsx

@@ -139,6 +139,7 @@ export const useFormSubmission = ({
         if (errorData.errors?.[0]?.data && Array.isArray(errorData.errors[0].data)) {
           const fieldErrors = errorData.errors[0].data;
           if (setError) {
+            const capturedErrors: string[] = [];
             for (const error of fieldErrors) {
               let message = error.message;
               switch (message) {
@@ -167,9 +168,16 @@ export const useFormSubmission = ({
                   break;
                 }
               }
+              capturedErrors.push(`${error.field}: ${error.message}`);
               setError(error.field, { type: 'server', message });
             }
 
+            posthog.capture('form_validation_failed', {
+              form_id: formId,
+              error_message: capturedErrors.join(', '),
+              source: 'server',
+            });
+
             // Navigate to the step containing the first errored field
             if (formSections && setCurrentStepIndex && fieldErrors.length > 0) {
               const firstError = fieldErrors[0];
@@ -208,23 +216,36 @@ export const useFormSubmission = ({
         sessionStorage.removeItem(getFormStorageKey(formId, 'step'));
       }
 
-      if (config.confirmationType === 'redirect' && config.redirect?.url) {
+      if (
+        config.confirmationType === 'redirect' &&
+        typeof config.redirect?.url === 'string' &&
+        config.redirect.url.length > 0
+      ) {
         router.push(config.redirect.url);
       }
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (error: any) {
+    } catch (error: unknown) {
       setStatus('error');
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      const message = (error.message as string) || 'Submission failed';
+      const message =
+        error instanceof Error && error.message.length > 0 ? error.message : 'Submission failed';
+
+      const isFieldValidationError = Object.values(correctHighlightedErrorsText).includes(message);
 
-      if (message.includes('initializing Payload')) {
+      if (isFieldValidationError) {
+        // Validation errors are already captured prior to throwing this error
+        setErrorMessage(message);
+      } else if (message.includes('initializing Payload')) {
         posthog.capture('form_submission_error', {
           error_type: 'payload_initialization',
           form_id: formId,
           original_message: message,
         });
         setErrorMessage(failedToSubmitText[locale]);
       } else {
+        posthog.capture('form_submission_error', {
+          error_type: 'submission_failed',
+          form_id: formId,
+          error_message: message,
+        });
         setErrorMessage(message);
       }
     }

src/features/payload-cms/components/form/hooks/use-form-submission.ts

@@ -4,8 +4,15 @@ import type { Locale } from '@/types/types'; // Import Locale
 import { i18nConfig } from '@/types/types';
 import { cn } from '@/utils/tailwindcss-override';
 import { useCurrentLocale } from 'next-i18n-router/client';
+import { usePostHog } from 'posthog-js/react';
 import React, { useEffect, useMemo } from 'react';
-import { FormProvider, useForm, useWatch, type FieldValues } from 'react-hook-form';
+import {
+  FormProvider,
+  useForm,
+  useWatch,
+  type FieldErrors,
+  type FieldValues,
+} from 'react-hook-form';
 
 // Custom Hooks & Components
 import { buildEmptyFormState } from '@/features/payload-cms/components/form/build-initial-form-state';
@@ -20,11 +27,21 @@ import type { ConditionedBlock, FormBlockType } from '@/features/payload-cms/com
 import { getFormStorageKey } from '@/features/payload-cms/components/form/utils/get-form-storage-key';
 export type { FormBlockType } from '@/features/payload-cms/components/form/types';
 
+const formatFieldErrors = (errors: FieldErrors): string => {
+  return Object.entries(errors)
+    .map(([field, error]) => {
+      const message = error?.message as string | undefined;
+      return typeof message === 'string' && message.length > 0 ? `${field}: ${message}` : field;
+    })
+    .join(', ');
+};
+
 export const FormBlock: React.FC<
   FormBlockType & { isPreviewMode?: boolean; withBorder?: boolean }
 > = ({ form: config, isPreviewMode, withBorder = true }) => {
   const currentLocale = useCurrentLocale(i18nConfig);
   const locale = (currentLocale ?? 'en') as Locale;
+  const posthog = usePostHog();
 
   // 1. Initialize Form
   const formMethods = useForm<FieldValues>({
@@ -142,12 +159,32 @@ export const FormBlock: React.FC<
   // Layout-based styles
   const isDualCardLayout = isSplit && shouldRenderMain;
 
+  const onInvalid = (errors: FieldErrors): void => {
+    posthog.capture('form_validation_failed', {
+      form_id: config.id,
+      error_message: formatFieldErrors(errors),
+      source: 'client_final_step',
+    });
+  };
+
+  const handleNext = async (): Promise<void> => {
+    const isValid = await next();
+    if (!isValid) {
+      posthog.capture('form_validation_failed', {
+        form_id: config.id,
+        error_message: formatFieldErrors(formMethods.formState.errors),
+        source: 'client_step_transition',
+        step: currentStepIndex,
+      });
+    }
+  };
+
   const handleSubmit = (event: React.FormEvent): void => {
     event.preventDefault();
     if (isLastStep) {
-      void formMethods.handleSubmit(submit)(event);
+      void formMethods.handleSubmit(submit, onInvalid)(event);
     } else {
-      void next();
+      void handleNext();
     }
   };
 
@@ -225,7 +262,7 @@ export const FormBlock: React.FC<
                         isLast={isLastStep}
                         isSubmitting={status === 'loading'}
                         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                        onNext={next}
+                        onNext={handleNext}
                         onPrev={prev}
                         submitLabel={config.submitButtonLabel ?? ''}
                         formId={config.id}
@@ -257,7 +294,7 @@ export const FormBlock: React.FC<
                           isLast={isLastStep}
                           isSubmitting={status === 'loading'}
                           // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                          onNext={next}
+                          onNext={handleNext}
                           onPrev={prev}
                           submitLabel={config.submitButtonLabel ?? ''}
                           formId={config.id}

src/features/payload-cms/components/form/index.tsx

@@ -1,5 +1,6 @@
 import { AdminPanelDashboardGroups } from '@/features/payload-cms/payload-cms/admin-panel-dashboard-groups';
 import { instagramEmbedBlock } from '@/features/payload-cms/payload-cms/shared-blocks/instagram-embed-block';
+import { newsCardBlock } from '@/features/payload-cms/payload-cms/shared-blocks/news-card-block';
 import { richTextArticleBlock } from '@/features/payload-cms/payload-cms/shared-blocks/rich-text-article-block';
 import { singlePictureBlock } from '@/features/payload-cms/payload-cms/shared-blocks/single-picture-block';
 import { internalAuthorsField } from '@/features/payload-cms/payload-cms/shared-fields/internal-authors-field';
@@ -139,7 +140,7 @@ export const TimelineCollection: CollectionConfig = asLocalizedCollection({
           fr: 'Le contenu principal de la page',
         },
       },
-      blocks: [richTextArticleBlock, singlePictureBlock, instagramEmbedBlock],
+      blocks: [richTextArticleBlock, singlePictureBlock, instagramEmbedBlock, newsCardBlock],
     },
     {
       name: 'categories',

src/features/payload-cms/payload-cms/collections/timeline/index.ts

@@ -14,6 +14,16 @@ export const checkHitobitoApprovalsTask: TaskConfig<'checkHitobitoApprovals'> =
         });
       }
     } catch (error: unknown) {
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        'status' in error &&
+        error.status === 404
+      ) {
+        // Job was likely already deleted by another instance
+        return;
+      }
+
       req.payload.logger.error({
         err: error instanceof Error ? error : new Error(String(error)),
         msg: `Failed to auto-delete completed checkHitobitoApprovals job: ${String(job.id)}`,

src/features/payload-cms/payload-cms/tasks/check-hitobito-approvals/index.ts

@@ -28,6 +28,16 @@ export const fetchSmtpBouncesTask: TaskConfig<'fetchSmtpBounces'> = {
         });
       }
     } catch (error: unknown) {
+      if (
+        typeof error === 'object' &&
+        error !== null &&
+        'status' in error &&
+        error.status === 404
+      ) {
+        // Job was likely already deleted by another instance
+        return;
+      }
+
       req.payload.logger.error({
         err: error instanceof Error ? error : new Error(String(error)),
         msg: `Failed to auto-delete completed fetchSmtpBounces job: ${String(job.id)}`,