Upgrading to work with PayloadCMS 3.0

.github/workflows/test.yml

@@ -1,19 +1,26 @@
 name: Build
 
 on:
-  pull_request:
-    types: [ opened, reopened, synchronize ]
-  push:
-    branches: [ main ]
+    pull_request:
+        types: [opened, reopened, synchronize]
+    push:
+        branches: [main]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '18.x'
-          registry-url: 'https://registry.npmjs.org'
-      - run: yarn install
-      - run: yarn build
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with:
+                  version: 9
+            - name: Use Node.js 20.x
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20.x
+                  cache: "pnpm"
+            - name: Install dependencies
+              run: pnpm install
+            - name: Build
+              run: pnpm build

README.md

@@ -1,57 +1,124 @@
+> [!Warning]
+> This plugin is a WIP and doesn't fully function yet.
+
 # Payload plugin to add appointment scheduling to your Payload app.
 
 This plugin allows you to add appointment scheduling capabilities to your payload app. It provides:
-- Customers, Hosts, Services and Appointments collections
+
+- Services and Appointments collections.
 - An Appointment schedule calendar view.
 - Opening times global.
-- Authentication on Customers collection.
 
-![Appointments List day](./images/appointments-list-day.png)
+### Appointments Schedule View For Everyone
+
+![Appointments List day](./images/appointments-schedule-day.png)
 
-![Appointments List week](./images/appointments-list-week.png)
+### Appointments Schedule View For Logged In User
 
-![Collections](./images/collections.png)
+![Appointments List week](./images/appointments-schedule-me-day.png)
+
+### Dashboard View
+
+![Dashboard](./images/dashboard.png)
 
 ## Installation
 
 #### 1. install
 
-`npm i payload-appointments-plugin`
+```
+npm i payload-appointments-plugin
+pnpm install payload-appointments-plugin
+yarn add payload-appointments-plugin
+```
+
+#### 2. add fields to users collection
+
+```typescript
+const Users: CollectionConfig = {
+  // ...
+  fields: [
+    {
+      name: "firstName",
+      type: "text",
+      label: "First name",
+    },
+    {
+      name: "lastName",
+      type: "text",
+      label: "Last name",
+    },
+    {
+      name: "roles",
+      type: "select",
+      options: [
+        {
+          value: "admin",
+          label: "Admin",
+        },
+        {
+          value: "customer",
+          label: "Customer",
+        },
+      ],
+    },
+    {
+      name: "takingAppointments",
+      type: "checkbox",
+      admin: {
+        condition: (siblingData) => ["admin"].includes(siblingData.roles),
+        description: "Whether this user takes appointments or not.",
+      },
+      label: "Taking appointments?",
+      defaultValue: false,
+    },
+    {
+      name: "preferredNameAppointments",
+      type: "text",
+      label: "Preferred name",
+      required: true,
+      admin: {
+        condition: (siblingData) => Boolean(siblingData.takingAppointments),
+        description: "Name to show in appointment schedule calendar and to customers when booking.",
+      },
+    },
+  ],
+};
+
+export default Users;
+```
 
-#### 2. add to config
+#### 3. add to config
 
 ```typescript
 import appointments from "payload-appointments-plugin";
 
 export default buildConfig({
-	/* ... */
-	plugins: [appointments()],
-	/* ... */
+  /* ... */
+  plugins: [appointments()],
+  /* ... */
 });
 ```
 
-#### 3. add email config
+#### 4. add email config
 
 follow instructions on [PayloadCMS Email Docs](https://payloadcms.com/docs/email/overview)
 
-## todo?
+## Todo?
 
-- [ ] Customers collection
-  - [x] Auth on collection
-  - [x] Firstname, lastname, username, dob, email, password
-- [ ] Appointments collection
+- [x] Appointments collection
   - [x] Appointment type, Host, Customer, Services, Title, Start date/time, End date/time
   - [x] Appointment type is appointment or blockout (lunch, break, interview, meeting, day off? etc.)
-  - [x] Endpoint for getting available time slots 
+  - [x] Endpoint for getting available time slots
 - [ ] Add new properties/attributes to default auth collection
   - [x] Taking appointments checkbox
   - [x] Preffered name
   - [ ] Calendar subscription
-- [ ] Services collection for ...services
+- [x] Services collection for ...services
   - [x] Title
   - [x] Description
   - [x] Duration
-  - [ ] Cost
+  - [x] Cost/Price
+    - [ ] Variable cost (per hour... etc.)
 - [ ] Emails
   - [x] Email config (Will need to be added by the dev)
   - [ ] React email templates
@@ -60,22 +127,28 @@ follow instructions on [PayloadCMS Email Docs](https://payloadcms.com/docs/email
     - [x] Appointment updated email
       - [ ] Add iCal link/file to email
     - [ ] Customer signed up email
-    - [ ] Forgot password email
 - [ ] Custom payload views
-  - [x] Appointments schedule view /appointments-schedule
+  - [x] Appointments schedule view /appointments/schedule
+  - [x] Appointments schedule view for loggined in user /appointments/schedule/me
+  - [x] Charts /appointments/charts
+  - [x] Marketing Campaigns /appointments/marketing-campaigns
+  - [ ] ...more to come
 - [ ] Endpoints
   - [x] Get available timeslots for given date, services, host
 - [ ] Calendar schedule view
+  - [x] Ability to update appointment from calendar view
   - [ ] Ability to add appointments by clicking/tapping slot in calendar
     - [ ] Get start date and time from clicked slot
     - [ ] Get host from clicked slot
-- [ ] Opening times global
+- [x] Opening times global
   - [x] Monday...Sunday
   - [x] Set times for different days of week
   - [x] Define if closed on that day
+- [x] Add properties for showing/hiding navItems and beforeDashboard
+- [ ] Add overrides for collections
 
 A lot more I want to add. But may need some help.
 
-## testing?
+## Testing?
 
-I'm new to testing...
+I'm new to testing...

dev/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/(frontend)/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

dev/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

dev/next.config.js

@@ -0,0 +1,8 @@
+import { withPayload } from "@payloadcms/next/withPayload";
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+	reactStrictMode: false,
+};
+
+export default withPayload(nextConfig);