Implement Site Builder with Puck and Booking Widget

frontend/src/hooks/useBooking.ts

@@ -0,0 +1,33 @@
+import { useQuery, useMutation } from '@tanstack/react-query';
+import api from '../api/client';
+
+export const usePublicServices = () => {
+  return useQuery({
+    queryKey: ['publicServices'],
+    queryFn: async () => {
+      const response = await api.get('/public/services/');
+      return response.data;
+    },
+    retry: false,
+  });
+};
+
+export const usePublicAvailability = (serviceId: string, date: string) => {
+  return useQuery({
+    queryKey: ['publicAvailability', serviceId, date],
+    queryFn: async () => {
+      const response = await api.get(`/public/availability/?service_id=${serviceId}&date=${date}`);
+      return response.data;
+    },
+    enabled: !!serviceId && !!date,
+  });
+};
+
+export const useCreateBooking = () => {
+  return useMutation({
+    mutationFn: async (data: any) => {
+      const response = await api.post('/public/bookings/', data);
+      return response.data;
+    },
+  });
+};

frontend/src/hooks/useSites.ts

@@ -0,0 +1,58 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import api from '../api/client';
+
+export const useSite = () => {
+  return useQuery({
+    queryKey: ['site'],
+    queryFn: async () => {
+      const response = await api.get('/sites/me/');
+      return response.data;
+    },
+  });
+};
+
+export const usePages = () => {
+  return useQuery({
+    queryKey: ['pages'],
+    queryFn: async () => {
+      const response = await api.get('/sites/me/pages/');
+      return response.data;
+    },
+  });
+};
+
+export const usePage = (pageId: string) => {
+  return useQuery({
+    queryKey: ['page', pageId],
+    queryFn: async () => {
+      const response = await api.get(`/sites/me/pages/${pageId}/`);
+      return response.data;
+    },
+    enabled: !!pageId,
+  });
+};
+
+export const useUpdatePage = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: any }) => {
+      const response = await api.patch(`/sites/me/pages/${id}/`, data);
+      return response.data;
+    },
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['page', variables.id] });
+      queryClient.invalidateQueries({ queryKey: ['pages'] });
+    },
+  });
+};
+
+export const usePublicPage = () => {
+  return useQuery({
+    queryKey: ['publicPage'],
+    queryFn: async () => {
+      const response = await api.get('/public/page/');
+      return response.data;
+    },
+    retry: false,
+  });
+};