Version 0.40.0 (#959)

Author: wp99cp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "conveniat27",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "description": "The official website of conveniat27",
   "license": "MIT",
   "author": "Cyrill Püntener v/o JPG (cyrill.puentener@cevi.ch)",

src/app/(frontend)/[locale]/[design]/(payload-pages)/offline/page.tsx

@@ -1,3 +1,4 @@
+import { OfflineLogo } from '@/components/ui/offline-logo';
 import { HeadlineH1 } from '@/components/ui/typography/headline-h1';
 import { ParagraphText } from '@/components/ui/typography/paragraph-text';
 import type { Locale, StaticTranslationString } from '@/types/types';
@@ -41,23 +42,6 @@ export async function generateMetadata({ params }: Properties): Promise<Metadata
   };
 }
 
-const OfflineLogo: React.FC = () => (
-  <svg
-    className="mx-auto h-24 w-24 text-gray-400"
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
-    />
-  </svg>
-);
-
 const OfflinePage: React.FC<Properties> = async ({ params }) => {
   const { locale } = await params;
 

src/app/(payload)/admin/importMap.js

@@ -0,0 +1,20 @@
+import type React from 'react';
+
+import { cn } from '@/utils/tailwindcss-override';
+
+export const OfflineLogo: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={cn('mx-auto h-24 w-24 text-gray-400', className)}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+    />
+  </svg>
+);

src/components/ui/offline-logo.tsx

@@ -1,11 +1,14 @@
 'use client';
 
+import { OfflineLogo } from '@/components/ui/offline-logo';
 import { cn } from '@/utils/tailwindcss-override';
 import { animate, motion, useMotionValue } from 'framer-motion';
 import { Loader2 } from 'lucide-react';
 import type React from 'react';
 import { useCallback, useState } from 'react';
 
+import { useOnlineStatus } from '@/hooks/use-online-status';
+
 interface PullToRefreshProperties {
   onRefresh: () => Promise<void>;
   children: React.ReactNode;
@@ -19,6 +22,7 @@ export const PullToRefresh: React.FC<PullToRefreshProperties> = ({
   className,
   pullThreshold = 80,
 }) => {
+  const isOnline = useOnlineStatus();
   const [isRefreshing, setIsRefreshing] = useState(false);
   const y = useMotionValue(0);
 
@@ -31,22 +35,35 @@ export const PullToRefresh: React.FC<PullToRefreshProperties> = ({
       // Keep it at a fixed position while refreshing
       animate(y, 60, { type: 'spring', stiffness: 300, damping: 30 });
 
-      void onRefresh().finally(() => {
-        setIsRefreshing(false);
-        animate(y, 0, { type: 'spring', stiffness: 300, damping: 30 });
-      });
+      if (isOnline) {
+        void onRefresh().finally(() => {
+          setIsRefreshing(false);
+          animate(y, 0, { type: 'spring', stiffness: 300, damping: 30 });
+        });
+      } else {
+        // we are offline, show the offline logo and
+        // hide the icon after a second
+        setTimeout(() => {
+          setIsRefreshing(false);
+          animate(y, 0, { type: 'spring', stiffness: 300, damping: 30 });
+        }, 1000);
+      }
     } else {
       animate(y, 0, { type: 'spring', stiffness: 500, damping: 30 });
     }
-  }, [y, pullThreshold, isRefreshing, onRefresh]);
+  }, [y, pullThreshold, isRefreshing, onRefresh, isOnline]);
 
   return (
     <div className={cn('relative', className)}>
       {/* Spinner shown only while refreshing */}
       {isRefreshing && (
         <div className="absolute top-4 left-0 z-20 flex w-full justify-center">
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md">
-            <Loader2 className="text-conveniat-green h-6 w-6 animate-spin" />
+            {isOnline ? (
+              <Loader2 className="text-conveniat-green h-6 w-6 animate-spin" />
+            ) : (
+              <OfflineLogo className="h-6 w-6 text-gray-400" />
+            )}
           </div>
         </div>
       )}

src/components/ui/pull-to-refresh.tsx

@@ -3,7 +3,7 @@ import { z } from 'zod';
 
 export const environmentVariables = createEnv({
   /*
-   * Serverside Environment variables, not available on the client.
+   * Server-side environment variables, not available on the client.
    * Will throw if you access these variables on the client.
    */
   server: {
@@ -20,7 +20,6 @@ export const environmentVariables = createEnv({
     HITOBITO_BASE_URL: z.string().url(),
     HITOBITO_FORWARD_URL: z.string().url(),
     API_TOKEN: z.string().default(''),
-    BROWSER_COOKIE: z.string().default(''),
     HELPER_GROUP: z.string().optional(),
     EVENT_ID: z.string().optional(),
     GROUPS_WITH_API_ACCESS: z.string().transform((value) =>

src/config/environment-variables.ts

@@ -221,6 +221,8 @@ async function refreshAccessToken(token: JWT): Promise<JWT> {
         email: profile.email,
         name: profile.first_name + ' ' + profile.last_name,
         nickname: profile.nickname,
+        firstName: profile.first_name,
+        lastName: profile.last_name,
       };
     } else {
       console.error('Failed to refetch user profile after token refresh');
@@ -303,6 +305,8 @@ export const authOptions: NextAuthConfig = {
         cevi_db_uuid: token.cevi_db_uuid,
         group_ids: token.group_ids,
         nickname: token.nickname,
+        firstName: token.firstName,
+        lastName: token.lastName,
       };
       return session;
     },
@@ -333,6 +337,8 @@ export const authOptions: NextAuthConfig = {
           email: profile.email,
           name: profile.first_name + ' ' + profile.last_name,
           nickname: profile.nickname,
+          firstName: profile.first_name,
+          lastName: profile.last_name,
         };
       }
 

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

@@ -47,18 +47,9 @@ export const getJobs = async (
         const currentSubmissionsCount = await payload.count({
           collection: 'form-submissions',
           where: {
-            or: [
-              {
-                'helper-job': {
-                  equals: job.id,
-                },
-              },
-              {
-                'helper-jobs': {
-                  contains: job.id,
-                },
-              },
-            ],
+            'helper-jobs': {
+              contains: job.id,
+            },
           },
         });
         availableQuota = Math.max(0, job.maxQuota - currentSubmissionsCount.totalDocs);

src/features/payload-cms/components/form/actions/get-jobs.ts

@@ -6,21 +6,25 @@ import {
   loggedInAsText,
   loginWithCeviDatabaseText,
 } from '@/features/payload-cms/components/form/static-form-texts';
+import { getFormStorageKey } from '@/features/payload-cms/components/form/utils/get-form-storage-key';
 import type { StaticTranslationString } from '@/types/types';
 import { i18nConfig, type Locale } from '@/types/types';
 import { cn } from '@/utils/tailwindcss-override';
 import { signIn, signOut, useSession } from 'next-auth/react';
 import { useCurrentLocale } from 'next-i18n-router/client';
 import React, { useEffect } from 'react';
+import type { FieldError, FieldErrorsImpl, FieldValues, Merge } from 'react-hook-form';
 import { useFormContext } from 'react-hook-form';
 
 interface CeviDatabaseLoginProperties {
   name: string;
   label?: string;
   saveField?: 'name' | 'uuid' | 'email' | 'nickname';
+  fieldMapping?: { jwtField: string; formField: string }[];
   formId?: string;
   required?: boolean;
   currentStepIndex?: number;
+  error?: FieldError | Merge<FieldError, FieldErrorsImpl<FieldValues>>;
 }
 
 const loginRequiredMessage: StaticTranslationString = {
@@ -34,25 +38,22 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
   label,
   required,
   saveField,
+  fieldMapping,
   formId,
   currentStepIndex,
+  error,
 }) => {
-  const {
-    register,
-    setValue,
-    getValues,
-    formState: { errors },
-  } = useFormContext();
+  const { register, setValue, getValues } = useFormContext();
   const { data: session } = useSession();
   const currentLocale = useCurrentLocale(i18nConfig);
   const locale = (currentLocale ?? 'en') as Locale;
 
   const handleLogin = (): void => {
     const values = getValues();
     if (typeof formId === 'string' && formId !== '') {
-      sessionStorage.setItem(`form-state-${formId}`, JSON.stringify(values));
+      sessionStorage.setItem(getFormStorageKey(formId, 'state'), JSON.stringify(values));
       if (currentStepIndex !== undefined) {
-        sessionStorage.setItem(`form_step_${formId}`, String(currentStepIndex));
+        sessionStorage.setItem(getFormStorageKey(formId, 'step'), String(currentStepIndex));
       }
     }
     // Inform browser to replace the current history entry so the back button skips the login trigger
@@ -71,9 +72,9 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
   const handleChangeUser = (): void => {
     const values = getValues();
     if (typeof formId === 'string' && formId !== '') {
-      sessionStorage.setItem(`form-state-${formId}`, JSON.stringify(values));
+      sessionStorage.setItem(getFormStorageKey(formId, 'state'), JSON.stringify(values));
       if (currentStepIndex !== undefined) {
-        sessionStorage.setItem(`form_step_${formId}`, String(currentStepIndex));
+        sessionStorage.setItem(getFormStorageKey(formId, 'step'), String(currentStepIndex));
       }
     }
     const callbackUrl = typeof globalThis === 'undefined' ? undefined : globalThis.location.href;
@@ -86,6 +87,8 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
     });
   };
 
+  const fieldMappingString = fieldMapping ? JSON.stringify(fieldMapping) : undefined;
+
   useEffect(() => {
     if (session?.user) {
       let valueToSave: string | number | undefined | null;
@@ -108,10 +111,78 @@ export const CeviDatabaseLogin: React.FC<CeviDatabaseLoginProperties> = ({
         }
       }
       setValue(name, valueToSave ?? '', { shouldValidate: true });
+
+      const parsedFieldMapping = fieldMappingString
+        ? (JSON.parse(fieldMappingString) as { jwtField: string; formField: string }[])
+        : undefined;
+
+      if (parsedFieldMapping && parsedFieldMapping.length > 0) {
+        let didPrefill = false;
+        for (const { jwtField, formField } of parsedFieldMapping) {
+          let jwtValue: string | number | null | undefined;
+          switch (jwtField) {
+            case 'name': {
+              jwtValue = session.user.name;
+              break;
+            }
+            case 'firstName': {
+              jwtValue = session.user.firstName;
+              break;
+            }
+            case 'lastName': {
+              jwtValue = session.user.lastName;
+              break;
+            }
+            case 'email': {
+              jwtValue = session.user.email;
+              break;
+            }
+            case 'nickname': {
+              jwtValue = session.user.nickname;
+              break;
+            }
+            case 'uuid': {
+              jwtValue = session.user.uuid;
+              break;
+            }
+            case 'cevi_db_uuid': {
+              jwtValue = session.user.cevi_db_uuid;
+              break;
+            }
+            default: {
+              break;
+            }
+          }
+          const jwtValueString =
+            jwtValue !== undefined && jwtValue !== null ? String(jwtValue).trim() : '';
+
+          if (jwtValueString.length > 0) {
+            const currentValue = getValues(formField) as unknown;
+            let currentValueString = '';
+            if (typeof currentValue === 'string' || typeof currentValue === 'number') {
+              currentValueString = String(currentValue).trim();
+            } else if (currentValue !== undefined && currentValue !== null) {
+              currentValueString = 'has_value';
+            }
+
+            if (currentValueString.length === 0) {
+              setValue(formField, String(jwtValue), { shouldValidate: true });
+              didPrefill = true;
+            }
+          }
+        }
+
+        if (didPrefill && typeof formId === 'string' && currentStepIndex !== undefined) {
+          sessionStorage.setItem(
+            getFormStorageKey(formId, 'prefill'),
+            String(currentStepIndex + 1),
+          );
+        }
+      }
     }
-  }, [session, saveField, setValue, name]);
+  }, [session, saveField, setValue, name, fieldMappingString, getValues, formId, currentStepIndex]);
 
-  const errorMessage = errors[name]?.message as string | undefined;
+  const errorMessage = error ? (error as FieldError).message : undefined;
 
   const nickname = session?.user.nickname;
   const hasNickname = typeof nickname === 'string' && nickname.length > 0;