Submitting identifier and fetching customer data

app/components/Calendar.tsx

@@ -1,6 +1,9 @@
 import { JSX, useEffect, useState } from "react";
 import styles from "./Calendar.module.css";
 import { getMonthName, daysInMonth } from "../utils/dateUtils";
+import { customerState } from "../store";
+import { Box } from "../types";
+import { useAtom } from "jotai";
 
 const generateFirstWeekPadding = (month: number) => {
     const firstDay = new Date(new Date().getFullYear(), month, 1).getDay();
@@ -12,12 +15,27 @@ const generateFirstWeekPadding = (month: number) => {
     return padding;
 }
 
-const generateCalendarCells = (month: number) => {
+const generateCalendarCells = (month: number, boxes: Box[]) => {
     const monthDays = daysInMonth[month];
 
     const calendarCells = Array.from({ length: monthDays }, (_, index) => {
         const day = index + 1;
         const date = new Date(new Date().getFullYear(), month, day);
+        const isDeliveryDate = boxes.find(box => {
+            const boxDate = new Date(box.delivery_date);
+            return boxDate.getDate() === day && boxDate.getMonth() === month && boxDate.getFullYear() === date.getFullYear();
+        });
+
+        if (isDeliveryDate) {
+            return (
+                <div key={index} className={`${styles.calendarCell} ${styles.deliveryDateCell}`}>
+                    {date.toLocaleDateString("fi-FI", {
+                        day: "2-digit",
+                        month: "2-digit",
+                    })}
+                </div>
+            );
+        }
 
         return (
             <div key={index} className={`${styles.calendarCell}`}>
@@ -32,12 +50,13 @@ const generateCalendarCells = (month: number) => {
 }
 
 export default function Calendar() {
+    const [customerData, setCustomerData] = useAtom(customerState);
     const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
     const [calendarCells, setCalendarCells] = useState<JSX.Element[]>([]);
     const [firstWeekPadding, setFirstWeekPadding] = useState<JSX.Element[]>([]);
 
     useEffect(() => {
-        setCalendarCells(generateCalendarCells(selectedMonth));
+        setCalendarCells(generateCalendarCells(selectedMonth, customerData.boxes));
         setFirstWeekPadding(generateFirstWeekPadding(selectedMonth));
     }, [selectedMonth]);