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

@@ -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 />

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 />

src/components/forms/FormBlock.tsx

@@ -25,8 +25,8 @@ interface FormField {
   width?: number
 }
 
-interface FormData {
+export interface FormData {
-  id: string
+  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('Щось пішло не так. Спробуйте ще раз.')