From 42cb554de4b08ec9989bade400a51db8ca96a4b3 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Mon, 18 May 2026 12:07:04 +0100
Subject: [PATCH] feat(forms): use FormBlock when form is set in CMS, fallback
 to hardcoded

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/(frontend)/dni-narodzhennia/page.tsx      | 12 ++++++++++--
 src/app/(frontend)/grupovi-vidviduvannia/page.tsx | 12 ++++++++++--
 src/components/forms/FormBlock.tsx                |  6 +++---
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/(frontend)/dni-narodzhennia/page.tsx b/src/app/(frontend)/dni-narodzhennia/page.tsx
index 1ab4e9b..b6b4a41 100644
--- a/src/app/(frontend)/dni-narodzhennia/page.tsx
+++ b/src/app/(frontend)/dni-narodzhennia/page.tsx
@@ -3,6 +3,7 @@ import { getPayload } from 'payload'
 import configPromise from '@payload-config'
 import { PageHero } from '@/components/ui/PageHero'
 import { BirthdayBookingForm } from '@/components/forms/BirthdayBookingForm'
+import { FormBlock, type FormData as FormBlockData } from '@/components/forms/FormBlock'
 import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
 
 export const revalidate = 60
@@ -10,7 +11,7 @@ export const revalidate = 60
 async function getBirthdayPageData() {
   try {
     const payload = await getPayload({ config: configPromise })
-    return await payload.findGlobal({ slug: 'birthday-page', depth: 0 })
+    return await payload.findGlobal({ slug: 'birthday-page', depth: 1 })
   } catch {
     return null
   }
@@ -126,7 +127,14 @@ export default async function BirthdayPage({
             {pageData?.formSubtitle ??
               "Залиште заявку і наш менеджер зв'яжеться з вами протягом 30 хвилин"}
           </p>
-          <BirthdayBookingForm defaultPackage={defaultPackage} />
+          {pageData?.form && typeof pageData.form === 'object' ? (
+            <FormBlock
+              form={pageData.form as unknown as FormBlockData}
+              submitLabel="Замовити святкування"
+            />
+          ) : (
+            <BirthdayBookingForm defaultPackage={defaultPackage} />
+          )}
         </div>
       </div>
       <RefreshRouteOnSave />
diff --git a/src/app/(frontend)/grupovi-vidviduvannia/page.tsx b/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
index c979602..9d076cc 100644
--- a/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
+++ b/src/app/(frontend)/grupovi-vidviduvannia/page.tsx
@@ -3,6 +3,7 @@ import { getPayload } from 'payload'
 import configPromise from '@payload-config'
 import { PageHero } from '@/components/ui/PageHero'
 import { GroupRequestForm } from '@/components/forms/GroupRequestForm'
+import { FormBlock, type FormData as FormBlockData } from '@/components/forms/FormBlock'
 import { RefreshRouteOnSave } from '@/components/cms/RefreshRouteOnSave'
 
 export const revalidate = 60
@@ -18,7 +19,7 @@ interface Group {
 async function getGroupVisitsData() {
   try {
     const payload = await getPayload({ config: configPromise })
-    return await payload.findGlobal({ slug: 'group-visits-page', depth: 0 })
+    return await payload.findGlobal({ slug: 'group-visits-page', depth: 1 })
   } catch {
     return null
   }
@@ -100,7 +101,14 @@ export default async function GroupVisitsPage() {
           >
             {formSubtitle}
           </p>
-          <GroupRequestForm />
+          {data?.form && typeof data.form === 'object' ? (
+            <FormBlock
+              form={data.form as unknown as FormBlockData}
+              submitLabel="Надіслати заявку"
+            />
+          ) : (
+            <GroupRequestForm />
+          )}
         </div>
       </div>
       <RefreshRouteOnSave />
diff --git a/src/components/forms/FormBlock.tsx b/src/components/forms/FormBlock.tsx
index 539b657..1661437 100644
--- a/src/components/forms/FormBlock.tsx
+++ b/src/components/forms/FormBlock.tsx
@@ -25,8 +25,8 @@ interface FormField {
   width?: number
 }
 
-interface FormData {
-  id: string
+export interface FormData {
+  id: string | number
   title?: string
   fields?: FormField[]
   confirmationType?: 'message' | 'redirect'
@@ -59,7 +59,7 @@ export function FormBlock({ form, submitLabel }: FormBlockProps) {
         const res = await fetch('/api/form-submissions', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ form: form.id, submissionData }),
+          body: JSON.stringify({ form: String(form.id), submissionData }),
         })
         if (!res.ok) {
           setError('Щось пішло не так. Спробуйте ще раз.')