Graceful not found customer identifier handling

app/api.ts

@@ -3,6 +3,15 @@ export const fetchCustomerData = async (id: string) => {
         const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/loota/${id}`, {
             method: 'GET',
         });
+
+        if (response.status === 404) {
+            return {
+                identifier: 'Ei löydy',
+                location: 'Tuntematon',
+                boxes: [],
+            }
+        }
+
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -22,6 +31,7 @@ export const markBoxPickedUp = async (id: string) => {
             },
             body: JSON.stringify({ id: id, pickup_date: new Date().toISOString().split('.')[0] }),
         });
+
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }

app/components/Landing.module.css

@@ -25,3 +25,10 @@
     border-radius: 0.5rem;
     cursor: pointer;
 }
+
+.notFoundMessage {
+    color: red;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 1rem;
+}

app/components/Landing.tsx

@@ -21,12 +21,21 @@ export default function Landing() {
     }
 
     return (
-        customerData.identifier === 'Tuntematon' ? (
+        customerData.identifier === 'Tuntematon' || customerData.identifier === 'Ei löydy' ? (
-            <form action={submitIdentifier} className={styles.identifierForm}>
+            <>
-                <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
+                <form action={submitIdentifier} className={styles.identifierForm}>
-                <input name="identifier" type="password" className={styles.identifierInput} />
+                    <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
-                <button type="submit" className={styles.submitButton} >Kirjaudu</button>
+                    <input name="identifier" type="password" className={styles.identifierInput} />
-            </form>) : (
+                    <button type="submit" className={styles.submitButton} >Kirjaudu</button>
+                </form>
+
+                {customerData.identifier === 'Ei löydy' && (
+                    <div className={styles.notFoundMessage}>
+                        Tunnusta ei löydy. Ole hyvä ja tarkista tunnus.
+                    </div>
+                )}
+            </>
+        ) : (
             <Calendar />
         )
     );