andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature: Add WhatsApp notifications for collection-ready orders

Browse Source 
- Implement WhatsApp Business API integration via Meta Cloud API
- Add phoneNumber field to Order model for storing customer phone numbers
- Update admin order detail page with phone number input for collection orders
- Send WhatsApp notification when admin marks order as ready for collection
- Add WhatsApp service module with phone number formatting and message sending
- Create database migrations for collection-related fields
- Add WhatsApp credentials to .env configuration

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
2026-07-19 09:29:09 +01:00
co-authored by Claude Haiku 4.5
parent a105fdf660
commit 36cc6dddff
26 changed files with 553 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AdminNav.tsx
+6
View File
@@ -30,6 +30,12 @@ export default function AdminNav() {
<Link href="/admin/designs" className="tag-label hover:text-ink">
Design Approvals
</Link>
<Link href="/admin/gallery/new" className="tag-label hover:text-ink">
Add to gallery
</Link>
<Link href="/admin/gallery" className="tag-label hover:text-ink">
Gallery
</Link>
</div>
);
}
src/components/AdminNotifications.tsx
+13 -3
View File
@@ -17,12 +17,22 @@ export default async function AdminNotifications() {
] = await Promise.all([
prisma.order.count({
where: {
status: 'PENDING',
createdAt: { gte: recentThreshold },
OR: [
{
status: 'PENDING',
archived: false,
createdAt: { gte: recentThreshold },
},
{
status: 'PAID',
archived: false,
trackingNumber: null,
},
],
},
}),
prisma.designApproval.count({
where: { status: 'IN_REVIEW' },
where: { status: { in: ['PENDING', 'IN_REVIEW'] } },
}),
prisma.customRequest.count({
where: { status: 'PENDING' },
src/components/AdminNotificationsBadge.tsx
+25 -16
View File
@@ -1,5 +1,6 @@
'use client';
import Link from 'next/link';
import { useState, useRef, useEffect } from 'react';
interface AdminNotificationsBadgeProps {
@@ -46,28 +47,36 @@ export default function AdminNotificationsBadge({
<div className="absolute right-0 top-full mt-2 w-64 bg-paper border border-line rounded shadow-lg p-4 z-50 text-sm space-y-2">
<p className="font-bold text-ink">Notifications</p>
{pendingOrders > 0 && (
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
<span className="text-muted">Waiting payment</span>
<span className="font-bold text-splash-orange">{pendingOrders}</span>
</div>
<Link href="/admin/orders">
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded hover:bg-surface-dark cursor-pointer transition-colors">
<span className="text-muted">Action needed</span>
<span className="font-bold text-splash-orange">{pendingOrders}</span>
</div>
</Link>
)}
{designApprovals > 0 && (
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
<span className="text-muted">Design approvals</span>
<span className="font-bold text-splash-blue">{designApprovals}</span>
</div>
<Link href="/admin/designs">
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded hover:bg-surface-dark cursor-pointer transition-colors">
<span className="text-muted">Design approvals</span>
<span className="font-bold text-splash-blue">{designApprovals}</span>
</div>
</Link>
)}
{photoRequests > 0 && (
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
<span className="text-muted">Photo requests</span>
<span className="font-bold text-clay">{photoRequests}</span>
</div>
<Link href="/admin/custom-requests">
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded hover:bg-surface-dark cursor-pointer transition-colors">
<span className="text-muted">Photo requests</span>
<span className="font-bold text-clay">{photoRequests}</span>
</div>
</Link>
)}
{unreadMessages > 0 && (
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded">
<span className="text-muted">Unread messages</span>
<span className="font-bold text-splash-pink">{unreadMessages}</span>
</div>
<Link href="/admin/inbox">
<div className="flex items-center justify-between py-2 px-3 bg-surface rounded hover:bg-surface-dark cursor-pointer transition-colors">
<span className="text-muted">Unread messages</span>
<span className="font-bold text-splash-pink">{unreadMessages}</span>
</div>
</Link>
)}
</div>
)}
src/components/AdminNotificationsWrapper.tsx
+53
View File
@@ -0,0 +1,53 @@
'use client';
import { useState, useEffect } from 'react';
import AdminNotificationsBadge from './AdminNotificationsBadge';
interface NotificationData {
total: number;
pendingOrders: number;
designApprovals: number;
photoRequests: number;
unreadMessages: number;
}
export default function AdminNotificationsWrapper() {
const [notifications, setNotifications] = useState<NotificationData>({
total: 0,
pendingOrders: 0,
designApprovals: 0,
photoRequests: 0,
unreadMessages: 0,
});
const fetchNotifications = async () => {
try {
const res = await fetch('/api/admin/notifications');
if (res.ok) {
const data = await res.json();
setNotifications(data);
}
} catch (err) {
console.error('Error fetching notifications:', err);
}
};
useEffect(() => {
// Fetch immediately
fetchNotifications();
// Refresh every 30 seconds
const interval = setInterval(fetchNotifications, 30000);
return () => clearInterval(interval);
}, []);
return (
<AdminNotificationsBadge
total={notifications.total}
pendingOrders={notifications.pendingOrders}
designApprovals={notifications.designApprovals}
photoRequests={notifications.photoRequests}
unreadMessages={notifications.unreadMessages}
/>
);
}
src/components/Header.tsx
+2 -2
View File
@@ -10,7 +10,7 @@ import { prisma } from '@/lib/prisma';
import { getCurrentCustomer } from '@/lib/auth';
import { isAdminAuthenticated } from '@/lib/adminAuth';
import AdminMenu from './AdminMenu';
import AdminNotifications from './AdminNotifications';
import AdminNotificationsWrapper from './AdminNotificationsWrapper';
export default async function Header() {
const [categories, collections, customer, isAdmin] = await Promise.all([
@@ -75,7 +75,7 @@ export default async function Header() {
<CurrencySelector />
{isAdmin && (
<div className="flex items-center gap-2">
<AdminNotifications />
<AdminNotificationsWrapper />
<AdminMenu />
</div>
)}
src/components/OlderOrders.tsx
+4 -4
View File
@@ -6,8 +6,8 @@ import Link from 'next/link';
interface OlderOrdersProps {
orders: any[];
formatPrice: (cents: number) => string;
statusLabel: (status: string) => string;
statusClasses: (status: string) => string;
statusLabel: (status: string, trackingNumber?: string | null, collectedByCustomer?: boolean) => string;
statusClasses: (status: string, trackingNumber?: string | null) => string;
}
export default function OlderOrders({ orders, formatPrice, statusLabel, statusClasses }: OlderOrdersProps) {
@@ -37,8 +37,8 @@ export default function OlderOrders({ orders, formatPrice, statusLabel, statusCl
{new Date(order.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })} ·{' '}
{order.items.length} item{order.items.length === 1 ? '' : 's'}
</p>
<span className={`tag-label mt-1 inline-block rounded-full px-3 py-1 ${statusClasses(order.status)}`}>
{statusLabel(order.status)}
<span className={`tag-label mt-1 inline-block rounded-full px-3 py-1 ${statusClasses(order.status, order.trackingNumber)}`}>
{statusLabel(order.status, order.trackingNumber, order.collectedByCustomer)}
</span>
</div>
<span className="font-mono text-sm">{formatPrice(order.total)}</span>
src/components/StandardProductView.tsx
+2 -2
View File
@@ -62,9 +62,9 @@ export default function StandardProductView({ product }: { product: ProductDTO }
unitPrice: product.effectivePrice,
designJson: { front: [], back: [] },
designPreviewUrl: product.colorPhotos[color] ?? product.imageUrl ?? '',
designPreviewUrlBack: product.imageUrlBack ?? null,
designPreviewUrlBack: product.colorPhotosBack[color] ?? product.imageUrlBack ?? null,
placementPreviewUrl: product.colorPhotos[color] ?? product.imageUrl ?? null,
placementPreviewUrlBack: product.imageUrlBack ?? null,
placementPreviewUrlBack: product.colorPhotosBack[color] ?? product.imageUrlBack ?? null,
});
setShowAddToCartModal(true);
};