From d3cb4bd493e5dc0cda71eb60af87cb65cfe6ca04 Mon Sep 17 00:00:00 2001
From: FlorianSpeicher <flo200538@gmail.com>
Date: Sun, 15 Jun 2025 16:42:56 +0200
Subject: [PATCH] Loading Customer data on payment.

---
 00-backend/datasource/database.sqlite | Bin 2727936 -> 2727936 bytes
 01-frontend/src/pages/Payment.tsx     |  95 ++++++++++++--------------
 2 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/00-backend/datasource/database.sqlite b/00-backend/datasource/database.sqlite
index 2e0e78e6385c406172e3f0b1352bb31a6cb61595..ee07ab439ef3832a017bad5567283e80ad11debf 100644
GIT binary patch
delta 543
zcmZ9`J!lhg9LDkcU+!|r`SPntn$+ghtF4}B44h&Mf?$oHgD>Z(2tL8ayGlr<RYXv%
zr~XtBtrXG@4i4H$(NHj`gH;NGZ*giDLC`H!9Ms)Q+-`W5=d*mr=Vrusu!*d&?->PQ
z*YNOgOxAr#_vyoAhqG<cbd=dW&NW@cX5SrC)E(OmO-gnS^kz<#M@BCcD?`P~aH+g?
z%qyN59vv~ymt4~>?k$}=J9g452i)Ip+XFrrf*~^^427XGq701@W5gLcV;N&PV+CU+
zgBTr*Rg459$w)Ce8EHm_(ZyKJ=w@UY24f9lEn^+SWb`oBGkO_)j17#9&tWM}LZiGy
z-)Wv^=q8<}1C+0)pIKdW+0axerwYw!dhYdtTT@f<o!^>|#ng2AZ?|kj+d6UE`}xTn
z{OsRHPvc6a8fdaEWJCS0Uz^#b+Mrwg{qj%bj(@kM2e-(E($;+SP2YQW|I=6czK^#k
zbt2Gs?tyGX+M2m^D0U=!vCw#N^vAA8zY?W@6>m|VntyHW4yr2>Rp<#V(p$Pp)3j7i
o&soQ5D4eUMA~_MRjJD5EoZ33WO-kzwm)uxrSoMX*rp;ge0o;SRX8-^I

delta 496
zcmZ9`O-K}R9LDkayYsTUrhnUPR~t2_(y4Y2*5*+t^`IoUNC%0)N6=G;jzLAqt~^=<
z6?@nY-V~`&(gfE%hzd(y1Vu>;Z-R$RiSptLL^FGw!|(EZ4!`ff;<y-a?yV`J@2Xlv
zbQ)uwx(FtfU@~2nxS6g^=rhfU!JufGS-!7os-h^3>4u&gNf3f4B7B5OXoOA}gr5iy
zL86#ALzEDuge1y{vqXqEN0bxii7*i%Du_zr0$~zWL^V-ETqJ4<i?~EwCaw^5MExvm
zH4!S3c}4EXy!<F%%SW<HHfF<9c7=TLOJrUiuRJylO^IoN++O7ARJ7GdXYTGk8~!@z
z;Ng0`sTZ(Wv_G%wz7tQ)eIGuG-<o&u@3&r4E8v^Zk83AS+WlWr;fKl8#<q)}8%(u;
zOTWkd#j~vwx!v4pZ@{u#?7wIFG$rCZZToo;v)*@3etI=@Sh+C$!O=gN{DOVksoqlL
zmfSBL@mm3wbQq)A@S^=d_IW#va$ih%`*e5oc4_YD?NQy)n=!PxYG*fBuU=pK4|f!{
ADgXcg

diff --git a/01-frontend/src/pages/Payment.tsx b/01-frontend/src/pages/Payment.tsx
index 63673b4..65c15cf 100644
--- a/01-frontend/src/pages/Payment.tsx
+++ b/01-frontend/src/pages/Payment.tsx
@@ -15,17 +15,17 @@ import {
     TextField,
     Typography
 } from '@mui/material';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { TFunction } from 'i18next';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from "react-i18next";
 import { useNavigate } from 'react-router-dom';
-import Item from '../components/Item';
-import { BasketItem, useBasket } from '../helper/BasketProvider';
-import { OrderStatusEnum, ShippingDetails, SubmitOrder } from '../components/Order';
-import { useAccount } from '../helper/AccountProvider';
-import { useQuery, useMutation } from '@tanstack/react-query';
-import { submitCustomer, submitOrder } from '../helper/query/Queries';
 import { CustomerType } from '../components/Account';
+import Item from '../components/Item';
+import { OrderStatusEnum, SubmitOrder } from '../components/Order';
+import { useAccount } from '../helper/AccountProvider';
+import { BasketItem, useBasket } from '../helper/BasketProvider';
+import { fetchCustomer, submitCustomer, submitOrder } from '../helper/query/Queries';
 
 function getDiscountedPrice(item: Item): number {
     return (item.price100 / 100 * (100-item.discount100)/100);
@@ -70,26 +70,17 @@ export default function Payment() {
     const { basket, clearBasket } = useBasket();
     const navigator = useNavigate();
     const [activeStep, setActiveStep] = useState(0);
-    const [shippingDetails, setShippingDetails] = useState<ShippingDetails>({
-        firstName: '',
-        lastName: '',
-        telefon: '',
+    const [shippingDetails, setShippingDetails] = useState<CustomerType>({
+        id: 0, // This will be set by the backend or user data
+        name: '',
+        surname: '',
         address: '',
-        postalCode: '',
-        city: '',
+        zip: '',
         country: 'Deutschland',
     });
     const [orderNumber, setOrderNumber] = useState<string | null>(null);
     const steps = [t('reviewCart'), t('shippingDetails'), t('payment'), t('orderSummary')];
     const { user } = useAccount();
-    const customerData: CustomerType = {
-        id: 0,
-        name: shippingDetails.firstName,
-        surname: shippingDetails.lastName,
-        address: shippingDetails.address,
-        country: shippingDetails.country,
-        zip: shippingDetails.postalCode,
-    };
 
     const submitOrderData: SubmitOrder = {
         id: 0, // This will be set by the backend
@@ -104,8 +95,8 @@ export default function Payment() {
     };
 
     const { refetch: refetchCustomer } = useQuery({
-        queryKey: ["submitCustomer", customerData],
-        queryFn: () => submitCustomer(customerData),
+        queryKey: ["submitCustomer", shippingDetails],
+        queryFn: () => submitCustomer(shippingDetails),
         retry: 0,
         retryDelay: 1000,
         enabled: false,
@@ -117,6 +108,28 @@ export default function Payment() {
         </Alert>
     };
 
+    const { refetch: customerData } = useQuery<CustomerType>({
+            queryKey: ['fetchCustomer', user?.customerId],
+            queryFn: () => fetchCustomer(user?.customerId || 0), // Funktion zum Abrufen der Kundendaten
+            enabled: false
+        });
+
+        useEffect(() => {
+            const fetchShippingDetails = async () => {
+                if (user) {
+                    try {
+                        const userShippingDetails = (await customerData()).data;
+                        setShippingDetails(userShippingDetails || shippingDetails);
+                    } catch (error) {
+                        console.error("Fehler beim Laden der Kundendaten:", error);
+                    }
+                }
+            };
+        
+            fetchShippingDetails();
+        }, [user, customerData, shippingDetails]);
+        
+
     // Verwende useMutation statt useQuery für submitOrder
     const { mutateAsync: submitOrderMutation } = useMutation({
         mutationFn: (orderData: SubmitOrder) => submitOrder(orderData),
@@ -174,11 +187,10 @@ export default function Payment() {
     // Hilfsfunktion prüfen, ob alle Pflichtfelder ausgefüllt sind
     const isShippingDetailsValid = () => {
         return (
-            shippingDetails.firstName.trim() !== '' &&
-            shippingDetails.lastName.trim() !== '' &&
+            shippingDetails.name.trim() !== '' &&
+            shippingDetails.surname.trim() !== '' &&
             shippingDetails.address.trim() !== '' &&
-            shippingDetails.postalCode.trim() !== '' &&
-            shippingDetails.city.trim() !== '' &&
+            shippingDetails.zip.trim() !== '' &&
             shippingDetails.country.trim() !== ''
         );
     };
@@ -211,7 +223,7 @@ export default function Payment() {
                                 fullWidth
                                 label={t('firstName')}
                                 name="firstName"
-                                value={shippingDetails.firstName}
+                                value={shippingDetails.name}
                                 onChange={handleInputChange}
                                 required
                             />
@@ -220,20 +232,11 @@ export default function Payment() {
                                 fullWidth
                                 label={t('lastName')}
                                 name="lastName"
-                                value={shippingDetails.lastName}
+                                value={shippingDetails.surname}
                                 onChange={handleInputChange}
                                 required
                             />
 
-                            <TextField
-                                fullWidth
-                                label={t('phone')}
-                                name="telefon"
-                                value={shippingDetails.telefon}
-                                onChange={handleInputChange}
-                                type='number'
-                            />
-
                             <TextField
                                 fullWidth
                                 label={t('address')}
@@ -247,21 +250,12 @@ export default function Payment() {
                                 fullWidth
                                 label={t('postalCode')}
                                 name="postalCode"
-                                value={shippingDetails.postalCode}
+                                value={shippingDetails.zip}
                                 onChange={handleInputChange}
                                 required
                                 type='number'
                             />
 
-                            <TextField
-                                fullWidth
-                                label={t('city')}
-                                name="city"
-                                value={shippingDetails.city}
-                                onChange={handleInputChange}
-                                required
-                            />
-
                             <TextField
                                 fullWidth
                                 label={t('country')}
@@ -299,10 +293,9 @@ export default function Payment() {
                         <Divider sx={{ my: 2 }} />
                         <Typography variant="h6">{t('shippingDetails')}:</Typography>
                         <Typography variant="body2">
-                            {shippingDetails.firstName} {shippingDetails.lastName}<br />
+                            {shippingDetails.name} {shippingDetails.surname}<br />
                             {shippingDetails.address}<br />
-                            {shippingDetails.postalCode} {shippingDetails.city}<br />
-                            {shippingDetails.country}
+                            {shippingDetails.zip} {shippingDetails.country}<br />
                         </Typography>
                         <Divider sx={{ my: 2 }} />
                         <Typography variant="h6">{t('orderedItems')}:</Typography>