Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loading Customer data on payment.

Browse Source
This commit is contained in:
FlorianSpeicher
2025-06-15 16:42:56 +02:00
parent e73c828a2b
commit d3cb4bd493
2 changed files with 44 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
01-frontend/src/pages/Payment.tsx
View File

@@ -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>