reactShop/src/components/profile/CheckoutForm.js

import React, { Component } from "react";
import { Box, Typography, TextField, Checkbox, FormControlLabel, Button } from "@mui/material";
import AddressForm from "./AddressForm.js";
import DeliveryMethodSelector from "./DeliveryMethodSelector.js";
import PaymentMethodSelector from "./PaymentMethodSelector.js";
import OrderSummary from "./OrderSummary.js";
import { withI18n } from "../../i18n/withTranslation.js";

class CheckoutForm extends Component {
  render() {
    const {
      paymentMethod,
      invoiceAddress,
      deliveryAddress,
      useSameAddress,
      saveAddressForFuture,
      addressFormErrors,
      termsAccepted,
      note,
      deliveryMethod,
      hasStecklinge,
      isPickupOnly,
      deliveryCost,
      cartItems,
      displayError,
      isCompletingOrder,
      preSubmitError,
      onInvoiceAddressChange,
      onDeliveryAddressChange,
      onUseSameAddressChange,
      onSaveAddressForFutureChange,
      onTermsAcceptedChange,
      onNoteChange,
      onDeliveryMethodChange,
      onPaymentMethodChange,
      onCompleteOrder,
    } = this.props;

    return (
      <>
        {paymentMethod !== "cash" && (
          <>
            <AddressForm
              title={this.props.t ? this.props.t('checkout.invoiceAddress') : 'Rechnungsadresse'}
              address={invoiceAddress}
              onChange={onInvoiceAddressChange}
              errors={addressFormErrors}
              namePrefix="invoice"
            />
            
            <FormControlLabel
              control={
                <Checkbox
                  checked={saveAddressForFuture}
                  onChange={onSaveAddressForFutureChange}
                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
                />
              }
              label={
                <Typography variant="body2">
                  {this.props.t ? this.props.t('checkout.saveForFuture') : 'Für zukünftige Bestellungen speichern'}
                </Typography>
              }
              sx={{ mb: 2 }}
            />
          </>
        )}

        {hasStecklinge && (
          <Typography
            variant="body1"
            sx={{ mb: 2, fontWeight: "bold", color: "#2e7d32" }}
          >
            {this.props.t ? this.props.t('checkout.pickupDate') : 'Für welchen Termin ist die Abholung der Stecklinge gewünscht?'}
          </Typography>
        )}

        <TextField
          label={this.props.t ? this.props.t('checkout.note') : 'Anmerkung'}
          name="note"
          value={note}
          onChange={onNoteChange}
          fullWidth
          multiline
          rows={3}
          margin="normal"
          variant="outlined"
          sx={{ mb: 2 }}
          InputLabelProps={{ shrink: true }}
        />

        <DeliveryMethodSelector
          deliveryMethod={deliveryMethod}
          onChange={onDeliveryMethodChange}
          isPickupOnly={isPickupOnly || hasStecklinge}
          cartItems={cartItems}
        />

        {(deliveryMethod === "DHL" || deliveryMethod === "DPD") && (
          <>
            <FormControlLabel
              control={
                <Checkbox
                  checked={useSameAddress}
                  onChange={onUseSameAddressChange}
                  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
                />
              }
              label={
                <Typography variant="body1">
                  {this.props.t ? this.props.t('checkout.sameAddress') : 'Lieferadresse ist identisch mit Rechnungsadresse'}
                </Typography>
              }
              sx={{ mb: 2 }}
            />

            {!useSameAddress && (
              <AddressForm
                title={this.props.t ? this.props.t('checkout.deliveryAddress') : 'Lieferadresse'}
                address={deliveryAddress}
                onChange={onDeliveryAddressChange}
                errors={addressFormErrors}
                namePrefix="delivery"
              />
            )}
          </>
        )}

        <PaymentMethodSelector
          paymentMethod={paymentMethod}
          onChange={onPaymentMethodChange}
          deliveryMethod={deliveryMethod}
          onDeliveryMethodChange={onDeliveryMethodChange}
          cartItems={cartItems}
          deliveryCost={deliveryCost}
        />

        <OrderSummary deliveryCost={deliveryCost} cartItems={cartItems} />

        <FormControlLabel
          control={
            <Checkbox
              checked={termsAccepted}
              onChange={onTermsAcceptedChange}
              sx={{ 
                '& .MuiSvgIcon-root': { fontSize: 28 },
                alignSelf: 'flex-start',
                mt: -0.5
              }}
            />
          }
          label={
            <Typography variant="body2">
              {this.props.t ? this.props.t('checkout.termsAccept') : 'Ich habe die AGBs, die Datenschutzerklärung und die Bestimmungen zum Widerrufsrecht gelesen'}
            </Typography>
          }
          sx={{ mb: 3, mt: 2 }}
        />

        {/* @note Reserve space for error message to prevent layout shift */}
        <Box sx={{ minHeight: '24px', mb: 2, textAlign: "center" }}>
          {displayError && (
            <Typography color="error" sx={{ lineHeight: '24px' }}>
              {displayError}
            </Typography>
          )}
        </Box>

        <Button
          variant="contained"
          fullWidth
          sx={{ bgcolor: "#2e7d32", "&:hover": { bgcolor: "#1b5e20" } }}
          onClick={onCompleteOrder}
          disabled={isCompletingOrder || !!preSubmitError}
        >
          {isCompletingOrder
            ? (this.props.t ? this.props.t('checkout.processingOrder') : 'Bestellung wird verarbeitet...')
            : (this.props.t ? this.props.t('checkout.completeOrder') : 'Bestellung abschließen')}
        </Button>
      </>
    );
  }
}

export default withI18n()(CheckoutForm);