Submitting identifier and fetching customer data

app/components/Calendar.module.css

@@ -35,6 +35,10 @@
     border-radius: 0.5rem;
 }
 
+.deliveryDateCell {
+    background-color: #62ed8e;
+}
+
 .firstWeekPaddingCell {
     height: 3rem;
     width: 3rem;

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]);
 

app/components/Landing.module.css

@@ -0,0 +1,27 @@
+.identifierForm {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.identifierInput {
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+    width: 100%;
+    max-width: 300px;
+}
+
+.identifierLabel {
+    font-weight: bold;
+}
+
+.submitButton {
+    background-color: #4caf50;
+    color: white;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+}

app/components/Landing.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./Landing.module.css";
+import { customerState } from "../store";
+import Calendar from "./Calendar";
+import { fetchCustomerData } from "../api";
+import { useAtom } from "jotai";
+
+export default function Landing() {
+    const [customerData, setCustomerData] = useAtom(customerState);
+
+    const submitIdentifier = (formData: FormData) => {
+        const identifier = formData.get("identifier") as string;
+        if (identifier) {
+            fetchCustomerData(identifier)
+                .then((data) => {
+                    setCustomerData(data);
+                }).catch((error) => {
+                    console.error("Error fetching customer data:", error);
+                });
+        }
+    }
+
+    return (
+        customerData.identifier === 'Tuntematon' ? (
+            <form action={submitIdentifier} className={styles.identifierForm}>
+                <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
+                <input name="identifier" className={styles.identifierInput} />
+                <button type="submit" className={styles.submitButton} >Login</button>
+            </form>) : (
+            <Calendar />
+        )
+    );
+}