bennot/church-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feature: donations

Browse source
This commit is contained in:
Benno Tielen 2025-03-19 11:46:43 +01:00
parent ace698b399
commit b4527cba8a
15 changed files with 6025 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
README.md
View file

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

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

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

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

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

32
src/app/(home)/mithelfen/page.tsx
View file

@ -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 { Button } from '@/components/Button/Button'
import { DonationForm } from '@/components/DonationForm/DonationForm'
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'}>
<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>
<DonationForm />
<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>
</>
)
}

7
src/app/(home)/mithelfen/styles.module.scss
View file

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

2
src/collections/Blog.ts
View file

@ -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
],

2
src/collections/Groups.ts
View file

@ -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
]
}

14
src/collections/blocks/Donation.ts Normal file
View file

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

48
src/components/DonationForm/DonationForm.tsx Normal file
View file

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

40
src/components/DonationForm/styles.module.scss Normal file
View file

@ -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;
}
}

7
src/compositions/Blocks/Blocks.tsx
View file

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

5811
src/migrations/20250319_101337_donationbox.json Normal file
View file

File diff suppressed because it is too large Load diff

51
src/migrations/20250319_101337_donationbox.ts Normal file
View file

@ -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';`)
}

8
src/migrations/index.ts
View file

@ -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'
},
];

22
src/payload-types.ts
View file

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