feature: donations

README.md

@@ -17,6 +17,19 @@ You will need the an Postgres database including the postgis extension
 docker pull postgis/postgis
 ```
 
+#### Migration
+
+To create a new database migration use:
+
+```bash
+yarn payload migrate:create [name]
+```
+
+After the changes are pushed to the production server, the migration has to be
+executed on the production database with `yarn payload migrate`
+
+Todo: integrate this step in Continious Deployment
+
 ### Environment variables
 
 Please set the environment variables in the `.env` file

src/app/(home)/blog/[id]/page.tsx

@@ -51,9 +51,11 @@ export default async function BlogPage({ params }: { params: Promise<{id: string
             }
           </div>
         </Container>
-      </Section>
 
         <Blocks content={data.content} />
+      </Section>
+
+
       <AdminMenu
         collection={"worship"}
         id={id}

src/app/(home)/gruppe/[slug]/page.tsx

@@ -60,7 +60,7 @@ export default async function GroupPage({ params }: { params: Promise<{slug: str
       }
 
 
-        <Section>
+        <Section paddingBottom={"small"}>
           <Container>
             <Row>
               <Col>

src/app/(home)/mithelfen/page.tsx

@@ -1,11 +1,9 @@
-import styles from './styles.module.scss'
 import { PageHeader } from '@/compositions/PageHeader/PageHeader'
 import { Section } from '@/components/Section/Section'
 import { Container } from '@/components/Container/Container'
 import { Title } from '@/components/Title/Title'
 import { P } from '@/components/Text/Paragraph'
-import { Input } from '@/components/Input/Input'
+import { DonationForm } from '@/components/DonationForm/DonationForm'
-import { Button } from '@/components/Button/Button'
 
 export default function Page() {
   return (
@@ -15,7 +13,7 @@ export default function Page() {
         description={'Du möchtest dich engagieren und etwas bewegen? Super! In unserer Gemeinde gibt es viele Wege, wie du deine Talente einsetzen und  Gottes Liebe weitergeben kannst. Ob du Zeit und Energie einbringen,  finanziell unterstützen oder im Gebet verbunden sein möchtest – jeder Beitrag zählt und bereichert unsere Gemeinschaft.'}
       />
 
-      <Section padding={'small'} paddingBottom={"large"}>
+      <Section padding={'small'}>
         <Container>
           <Title
             title={'Aktiv mitgestalten'}
@@ -47,30 +45,9 @@ export default function Page() {
         </Container>
       </Section>
 
-      <Section backgroundColor={'off-white'}>
+      <DonationForm />
-        <Container>
-          <Title
-            title={'Ihre Hilfe kommt an'}
-            size={'sm'}
-          />
-          <P width={'1/2'}>
-            Mit Ihrer Spende leisten Sie einen wertvollen Beitrag für unsere Arbeit. Ihr Engagement ermöglicht es uns,
-            Menschen in Not zu helfen und ihnen eine bessere Zukunft zu ermöglichen. <br/><br/>
-          </P>
-          <form>
-            <div className={styles.form}>
-              <Input
-                name={'Amount'}
-                type={'number'}
-                placeholder={"10.00"}
-              />
-              <Button size={'md'} type={'submit'}>Spenden</Button>
-            </div>
-          </form>
-        </Container>
-      </Section>
 
-      <Section>
+      <Section padding={"small"} paddingBottom={"large"}>
         <Container>
           <Title
             title={'Im Gebet verbunden'}
@@ -89,7 +66,6 @@ export default function Page() {
           </P>
         </Container>
       </Section>
-      <Section></Section>
     </>
   )
 }

src/app/(home)/mithelfen/styles.module.scss

@@ -1,7 +0,0 @@
-@import "template.scss";
-
-.form {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 50px;
-}

src/collections/Blog.ts

@@ -4,6 +4,7 @@ import { ParagraphBlock } from '@/collections/blocks/Paragraph'
 import { DocumentBlock } from '@/collections/blocks/Document'
 import { ContactformBlock } from '@/collections/blocks/Contactform'
 import { GalleryBlock } from '@/collections/blocks/Gallery'
+import { DonationBlock } from '@/collections/blocks/Donation'
 
 
 export const Blog: CollectionConfig = {
@@ -55,6 +56,7 @@ export const Blog: CollectionConfig = {
       blocks: [
         ParagraphBlock,
         DocumentBlock,
+        DonationBlock,
         ContactformBlock,
         GalleryBlock
       ],

src/collections/Groups.ts

@@ -5,6 +5,7 @@ import { GalleryBlock } from '@/collections/blocks/Gallery'
 import { ContactformBlock } from '@/collections/blocks/Contactform'
 import { DocumentBlock } from '@/collections/blocks/Document'
 import { lexicalHTML } from '@payloadcms/richtext-lexical'
+import { DonationBlock } from '@/collections/blocks/Donation'
 
 export const Groups: CollectionConfig = {
   slug: 'group',
@@ -66,6 +67,7 @@ export const Groups: CollectionConfig = {
         ParagraphBlock,
         GalleryBlock,
         DocumentBlock,
+        DonationBlock,
         ContactformBlock
       ]
     }

src/collections/blocks/Donation.ts

@@ -0,0 +1,14 @@
+import { Block } from 'payload'
+
+export const DonationBlock: Block = {
+  slug: 'donation',
+  labels: {
+    singular: {
+      de: "Spendeformular"
+    },
+    plural: {
+      de: 'Spendeformular'
+    }
+  },
+  fields: []
+}

src/components/DonationForm/DonationForm.tsx

@@ -0,0 +1,48 @@
+import { Container } from '@/components/Container/Container'
+import { Title } from '@/components/Title/Title'
+import { Row } from '@/components/Flex/Row'
+import styles from "./styles.module.scss"
+
+export const DonationForm = () => {
+  return (
+    <>
+      <Container>
+        <Title
+          title={'Ihre Hilfe kommt an'}
+          fontStyle={"sans-serif"}
+          size={'md'}
+        />
+      </Container>
+
+      <div className={styles.container}>
+        <div className={styles.col1}>
+          <p>
+            Mit Ihrer Spende leisten Sie einen wertvollen Beitrag für unsere Arbeit. Ihr Engagement ermöglicht es uns,
+            Menschen in Not zu helfen und ihnen eine bessere Zukunft zu ermöglichen.
+          </p>
+
+          <p>
+            Spenden Sie jetzt und unterstützen Sie unsere Mission! Nutzen Sie dazu einfach das Spendenformular nebenan oder überweisen Sie direkt auf unser Konto:<br/>
+          </p>
+          <p>
+            <strong>Konto:</strong> Pfarrei Heilige Drei Könige<br/>
+            <strong>IBAN:</strong> DE1237 0601 9360 0044 9006
+          </p>
+
+          <p>
+            Jede Spende, egal ob groß oder klein, macht einen Unterschied. Von Herzen danken wir Ihnen für Ihre Unterstützung!
+          </p>
+        </div>
+        <div className={styles.col2}>
+          <iframe
+            className={styles.iframe}
+            scrolling="no"
+            src="https://spenden.tools/37111/Formular/SpendenFormularId/318?KostenstelleId=0"
+            width="100%"
+            height="800px">
+          </iframe>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/DonationForm/styles.module.scss

@@ -0,0 +1,40 @@
+@import "template.scss";
+
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  display: flex;
+  gap: 30px;
+}
+
+.col1 {
+  border-radius: 4px;
+  width: 300px;
+  padding: 25px;
+  background-color: $shade3;
+  font-size: 18px;
+}
+
+.col1 p:first-of-type {
+  margin-block-start: 0;
+}
+
+.col2 {
+  width: 600px;
+}
+
+.iframe {
+  border: 0;
+}
+
+@media screen and (max-width: 576px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .col1, .col2 {
+    width: inherit;
+  }
+}
+
+

src/compositions/Blocks/Blocks.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/Button/Button'
 import { ContactSection } from '@/compositions/ContactSection/ContactSection'
 import { Gallery } from '@/components/Gallery/Gallery'
 import { transformGallery } from '@/utils/dto/gallery'
+import { DonationForm } from '@/components/DonationForm/DonationForm'
 
 type BlocksProps = {
   content: Blog['content']
@@ -57,6 +58,12 @@ export function Blocks({ content }: BlocksProps) {
               </Section>
             )
           }
+
+          if (item.blockType === "donation") {
+            return <Section key={item.id} padding={"small"} paddingBottom={"large"}>
+              <DonationForm />
+            </Section>
+          }
         })}
       </div>
 

src/migrations/20250319_101337_donationbox.ts

@@ -0,0 +1,51 @@
+import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
+
+export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
+  await db.execute(sql`
+   CREATE TABLE IF NOT EXISTS "blog_blocks_donation" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" uuid NOT NULL,
+  	"_path" text NOT NULL,
+  	"id" varchar PRIMARY KEY NOT NULL,
+  	"block_name" varchar
+  );
+  
+  CREATE TABLE IF NOT EXISTS "group_blocks_donation" (
+  	"_order" integer NOT NULL,
+  	"_parent_id" uuid NOT NULL,
+  	"_path" text NOT NULL,
+  	"id" varchar PRIMARY KEY NOT NULL,
+  	"block_name" varchar
+  );
+  
+  ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2025-03-23T10:13:37.253Z';
+  ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2025-03-23T10:13:37.343Z';
+  DO $$ BEGIN
+   ALTER TABLE "blog_blocks_donation" ADD CONSTRAINT "blog_blocks_donation_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."blog"("id") ON DELETE cascade ON UPDATE no action;
+  EXCEPTION
+   WHEN duplicate_object THEN null;
+  END $$;
+  
+  DO $$ BEGIN
+   ALTER TABLE "group_blocks_donation" ADD CONSTRAINT "group_blocks_donation_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."group"("id") ON DELETE cascade ON UPDATE no action;
+  EXCEPTION
+   WHEN duplicate_object THEN null;
+  END $$;
+  
+  CREATE INDEX IF NOT EXISTS "blog_blocks_donation_order_idx" ON "blog_blocks_donation" USING btree ("_order");
+  CREATE INDEX IF NOT EXISTS "blog_blocks_donation_parent_id_idx" ON "blog_blocks_donation" USING btree ("_parent_id");
+  CREATE INDEX IF NOT EXISTS "blog_blocks_donation_path_idx" ON "blog_blocks_donation" USING btree ("_path");
+  CREATE INDEX IF NOT EXISTS "group_blocks_donation_order_idx" ON "group_blocks_donation" USING btree ("_order");
+  CREATE INDEX IF NOT EXISTS "group_blocks_donation_parent_id_idx" ON "group_blocks_donation" USING btree ("_parent_id");
+  CREATE INDEX IF NOT EXISTS "group_blocks_donation_path_idx" ON "group_blocks_donation" USING btree ("_path");`)
+}
+
+export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
+  await db.execute(sql`
+   ALTER TABLE "blog_blocks_donation" DISABLE ROW LEVEL SECURITY;
+  ALTER TABLE "group_blocks_donation" DISABLE ROW LEVEL SECURITY;
+  DROP TABLE "blog_blocks_donation" CASCADE;
+  DROP TABLE "group_blocks_donation" CASCADE;
+  ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2025-03-02T08:36:52.653Z';
+  ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2025-03-02T08:36:52.738Z';`)
+}

src/migrations/index.ts

@@ -4,6 +4,7 @@ import * as migration_20250128_100809_pope_prayer_intentions from './20250128_10
 import * as migration_20250128_145145_liturgical_calendar from './20250128_145145_liturgical_calendar';
 import * as migration_20250202_104742 from './20250202_104742';
 import * as migration_20250224_083653_cleanup from './20250224_083653_cleanup';
+import * as migration_20250319_101337_donationbox from './20250319_101337_donationbox';
 
 export const migrations = [
   {
@@ -34,6 +35,11 @@ export const migrations = [
   {
     up: migration_20250224_083653_cleanup.up,
     down: migration_20250224_083653_cleanup.down,
-    name: '20250224_083653_cleanup'
+    name: '20250224_083653_cleanup',
+  },
+  {
+    up: migration_20250319_101337_donationbox.up,
+    down: migration_20250319_101337_donationbox.down,
+    name: '20250319_101337_donationbox'
   },
 ];

src/payload-types.ts

@@ -291,6 +291,11 @@ export interface Blog {
         blockName?: string | null;
         blockType: 'document';
       }
+    | {
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'donation';
+      }
     | {
         title: string;
         description: string;
@@ -444,6 +449,11 @@ export interface Group {
             blockName?: string | null;
             blockType: 'document';
           }
+        | {
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'donation';
+          }
         | {
             title: string;
             description: string;
@@ -716,6 +726,12 @@ export interface BlogSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        donation?:
+          | T
+          | {
+              id?: T;
+              blockName?: T;
+            };
         contactform?:
           | T
           | {
@@ -843,6 +859,12 @@ export interface GroupSelect<T extends boolean = true> {
               id?: T;
               blockName?: T;
             };
+        donation?:
+          | T
+          | {
+              id?: T;
+              blockName?: T;
+            };
         contactform?:
           | T
           | {