Add tooltips and cancellation confirmation for orders: Enhanced localization by adding tooltips for viewing details and canceling orders across multiple languages. Implemented cancellation confirmation messages to improve user experience when canceling orders.

Implement order cancellation feature in OrdersTab: Added functionality to confirm and cancel orders, including a confirmation dialog. Enhanced payment method display in OrderDetailsDialog and updated VAT calculations. Improved localization for order-related messages across multiple languages.
Enhance order ID handling and navigation in ProfilePage and OrdersTab: Updated hash processing to validate order IDs, improved tab navigation, and added console logging for better debugging. Adjusted navigation to ensure correct hash updates when switching tabs and viewing orders.
2025-07-18 01:28:28 +02:00 · 2025-07-17 21:35:00 +02:00 · 2025-07-17 12:43:39 +02:00
25 changed files with 520 additions and 164 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -107,9 +107,13 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
  const navigate = useNavigate();

  useEffect(() => {
-    if (location.hash && location.hash.startsWith("#ORD-")) {
-      if (location.pathname !== "/profile") {
-        navigate(`/profile${location.hash}`, { replace: true });
+    if (location.hash && location.hash.length > 1) {
+      // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
+      const potentialOrderId = location.hash.substring(1);
+      if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
+        if (location.pathname !== "/profile") {
+          navigate(`/profile${location.hash}`, { replace: true });
+        }
      }
    }
  }, [location, navigate]);
--- a/src/components/profile/OrderDetailsDialog.js
+++ b/src/components/profile/OrderDetailsDialog.js
@@ -26,14 +26,25 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {

  const currencyFormatter = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" });

+  // Helper function to translate payment methods
+  const getPaymentMethodDisplay = (paymentMethod) => {
+    if (!paymentMethod) return t('orders.details.notSpecified');
+    
+    switch (paymentMethod.toLowerCase()) {
+      case 'wire':
+        return t('payment.methods.bankTransfer');
+      default:
+        return paymentMethod;
+    }
+  };
+
  const handleCancelOrder = () => {
    // Implement order cancellation logic here
    console.log(`Cancel order: ${order.orderId}`);
    onClose(); // Close the dialog after action
  };
  
-  const subtotal = order.items.reduce((acc, item) => acc + item.price * item.quantity_ordered, 0);
-  const total = subtotal + order.delivery_cost;
+  const total = order.items.reduce((acc, item) => acc + item.price * item.quantity_ordered, 0);

  // Calculate VAT breakdown similar to CartDropdown
  const vatCalculations = order.items.reduce((acc, item) => {
@@ -83,7 +94,7 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
            </Box>
            <Box>
              <Typography variant="body2" color="text.secondary">{t('orders.details.paymentMethod')}</Typography>
-              <Typography variant="body1">{order.paymentMethod || order.payment_method || t('orders.details.notSpecified')}</Typography>
+              <Typography variant="body1">{getPaymentMethodDisplay(order.paymentMethod || order.payment_method)}</Typography>
            </Box>
          </Box>
        </Box>
@@ -96,6 +107,7 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
                <TableCell>{t('orders.details.item')}</TableCell>
                <TableCell align="right">{t('orders.details.quantity')}</TableCell>
                <TableCell align="right">{t('orders.details.price')}</TableCell>
+                <TableCell align="right">{t('product.vatShort')}</TableCell>
                <TableCell align="right">{t('orders.details.total')}</TableCell>
              </TableRow>
            </TableHead>
@@ -105,12 +117,12 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
                  <TableCell>{item.name}</TableCell>
                  <TableCell align="right">{item.quantity_ordered}</TableCell>
                  <TableCell align="right">{currencyFormatter.format(item.price)}</TableCell>
+                  <TableCell align="right">{item.vat}%</TableCell>
                  <TableCell align="right">{currencyFormatter.format(item.price * item.quantity_ordered)}</TableCell>
                </TableRow>
              ))}
              <TableRow>
-                <TableCell colSpan={2} />
-                <TableCell align="right">
+                <TableCell colSpan={4} align="right">
                  <Typography fontWeight="bold">{t ? t('tax.totalNet') : 'Gesamtnettopreis'}</Typography>
                </TableCell>
                <TableCell align="right">
@@ -119,35 +131,18 @@ const OrderDetailsDialog = ({ open, onClose, order }) => {
              </TableRow>
              {vatCalculations.vat7 > 0 && (
                <TableRow>
-                  <TableCell colSpan={2} />
-                  <TableCell align="right">{t ? t('tax.vat7') : '7% Mehrwertsteuer'}</TableCell>
+                  <TableCell colSpan={4} align="right">{t ? t('tax.vat7') : '7% Mehrwertsteuer'}</TableCell>
                  <TableCell align="right">{currencyFormatter.format(vatCalculations.vat7)}</TableCell>
                </TableRow>
              )}
              {vatCalculations.vat19 > 0 && (
                <TableRow>
-                  <TableCell colSpan={2} />
-                  <TableCell align="right">{t ? t('tax.vat19') : '19% Mehrwertsteuer'}</TableCell>
+                  <TableCell colSpan={4} align="right">{t ? t('tax.vat19') : '19% Mehrwertsteuer'}</TableCell>
                  <TableCell align="right">{currencyFormatter.format(vatCalculations.vat19)}</TableCell>
                </TableRow>
              )}
              <TableRow>
-                <TableCell colSpan={2} />
-                <TableCell align="right">
-                  <Typography fontWeight="bold">{t ? t('tax.subtotal') : 'Zwischensumme'}</Typography>
-                </TableCell>
-                <TableCell align="right">
-                  <Typography fontWeight="bold">{currencyFormatter.format(subtotal)}</Typography>
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell colSpan={2} />
-                <TableCell align="right">{t ? t('cart.summary.shippingCosts') : 'Lieferkosten'}</TableCell>
-                <TableCell align="right">{currencyFormatter.format(order.delivery_cost)}</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell colSpan={2} />
-                <TableCell align="right">
+                <TableCell colSpan={4} align="right">
                  <Typography fontWeight="bold">{t ? t('cart.summary.total') : 'Gesamtsumme'}</Typography>
                </TableCell>
                <TableCell align="right">
--- a/src/components/profile/OrdersTab.js
+++ b/src/components/profile/OrdersTab.js
@@ -15,8 +15,14 @@ import {
  Tooltip,
  CircularProgress,
  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import CancelIcon from "@mui/icons-material/Cancel";
 import SocketContext from "../../contexts/SocketContext.js";
 import OrderDetailsDialog from "./OrderDetailsDialog.js";

@@ -71,6 +77,9 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
  const [error, setError] = useState(null);
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
+  const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);
+  const [orderToCancel, setOrderToCancel] = useState(null);
+  const [isCancelling, setIsCancelling] = useState(false);

  const {socket} = useContext(SocketContext);
  const navigate = useNavigate();
@@ -81,9 +90,11 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
      if (orderToView) {
        setSelectedOrder(orderToView);
        setIsDetailsDialogOpen(true);
+        // Update the hash to include the order ID
+        navigate(`/profile#${orderId}`, { replace: true });
      }
    },
-    [orders]
+    [orders, navigate]
  );

  const fetchOrders = useCallback(() => {
@@ -138,7 +149,48 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
  const handleCloseDetailsDialog = () => {
    setIsDetailsDialogOpen(false);
    setSelectedOrder(null);
-    navigate("/profile", { replace: true });
+    navigate("/profile#orders", { replace: true });
+  };
+
+  // Check if order can be cancelled
+  const isOrderCancelable = (order) => {
+    const cancelableStatuses = ['new', 'pending', 'processing'];
+    return cancelableStatuses.includes(order.status);
+  };
+
+  // Handle cancel button click
+  const handleCancelClick = (order) => {
+    setOrderToCancel(order);
+    setCancelConfirmOpen(true);
+  };
+
+  // Handle cancel confirmation
+  const handleConfirmCancel = () => {
+    if (!orderToCancel || !socket) return;
+    
+    setIsCancelling(true);
+    socket.emit('cancelOrder', { orderId: orderToCancel.orderId }, (response) => {
+      setIsCancelling(false);
+      setCancelConfirmOpen(false);
+      
+      if (response.success) {
+        console.log('Order cancelled:', response.orderId);
+        // Refresh orders list
+        fetchOrders();
+      } else {
+        setError(response.error || 'Failed to cancel order');
+      }
+      
+      setOrderToCancel(null);
+    });
+  };
+
+  // Handle cancel dialog close
+  const handleCancelDialogClose = () => {
+    if (!isCancelling) {
+      setCancelConfirmOpen(false);
+      setOrderToCancel(null);
+    }
  };

  if (loading) {
@@ -175,11 +227,10 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
            <TableBody>
              {orders.map((order) => {
                const displayStatus = getStatusDisplay(order.status);
-                const subtotal = order.items.reduce(
+                const total = order.items.reduce(
                  (acc, item) => acc + item.price * item.quantity_ordered,
                  0
                );
-                const total = subtotal + order.delivery_cost;
                return (
                  <TableRow key={order.orderId} hover>
                    <TableCell>{order.orderId}</TableCell>
@@ -217,15 +268,28 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
                      {currencyFormatter.format(total)}
                    </TableCell>
                    <TableCell align="center">
-                      <Tooltip title="Details anzeigen">
-                        <IconButton
-                          size="small"
-                          color="primary"
-                          onClick={() => handleViewDetails(order.orderId)}
-                        >
-                          <SearchIcon />
-                        </IconButton>
-                      </Tooltip>
+                      <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
+                        <Tooltip title={t ? t('orders.tooltips.viewDetails') : 'Details anzeigen'}>
+                          <IconButton
+                            size="small"
+                            color="primary"
+                            onClick={() => handleViewDetails(order.orderId)}
+                          >
+                            <SearchIcon />
+                          </IconButton>
+                        </Tooltip>
+                        {isOrderCancelable(order) && (
+                          <Tooltip title={t ? t('orders.tooltips.cancelOrder') : 'Bestellung stornieren'}>
+                            <IconButton
+                              size="small"
+                              color="error"
+                              onClick={() => handleCancelClick(order)}
+                            >
+                              <CancelIcon />
+                            </IconButton>
+                          </Tooltip>
+                        )}
+                      </Box>
                    </TableCell>
                  </TableRow>
                );
@@ -243,6 +307,47 @@ const OrdersTab = ({ orderIdFromHash, t }) => {
        onClose={handleCloseDetailsDialog}
        order={selectedOrder}
      />
+      
+      {/* Cancel Confirmation Dialog */}
+      <Dialog
+        open={cancelConfirmOpen}
+        onClose={handleCancelDialogClose}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>
+          {t ? t('orders.cancelConfirm.title') : 'Bestellung stornieren'}
+        </DialogTitle>
+        <DialogContent>
+          <Typography>
+            {t ? t('orders.cancelConfirm.message') : 'Sind Sie sicher, dass Sie diese Bestellung stornieren möchten?'}
+          </Typography>
+          {orderToCancel && (
+            <Typography variant="body2" sx={{ mt: 1, fontWeight: 'bold' }}>
+              {t ? t('orders.table.orderNumber') : 'Bestellnummer'}: {orderToCancel.orderId}
+            </Typography>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button 
+            onClick={handleCancelDialogClose}
+            disabled={isCancelling}
+          >
+            {t ? t('common.cancel') : 'Abbrechen'}
+          </Button>
+          <Button 
+            onClick={handleConfirmCancel}
+            color="error"
+            variant="contained"
+            disabled={isCancelling}
+          >
+            {isCancelling 
+              ? (t ? t('orders.cancelConfirm.cancelling') : 'Wird storniert...') 
+              : (t ? t('orders.cancelConfirm.confirm') : 'Stornieren')
+            }
+          </Button>
+        </DialogActions>
+      </Dialog>
    </Box>
  );
 };
--- a/src/i18n/locales/ar/orders.js
+++ b/src/i18n/locales/ar/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "الإجراءات",
    "viewDetails": "عرض التفاصيل"
  },
+  "tooltips": {
+    "viewDetails": "عرض التفاصيل",
+    "cancelOrder": "إلغاء الطلب"
+  },
  "noOrders": "لم تقم بوضع أي طلبات بعد.",
  "details": {
    "title": "تفاصيل الطلب: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "العنصر",
    "quantity": "الكمية",
    "price": "السعر",
+    "vat": "ضريبة القيمة المضافة",
    "total": "الإجمالي",
    "cancelOrder": "إلغاء الطلب"
  },
-  "processing": "يتم إكمال الطلب..."
+  "cancelConfirm": {
+    "title": "إلغاء الطلب",
+    "message": "هل أنت متأكد أنك تريد إلغاء هذا الطلب؟",
+    "confirm": "إلغاء الطلب",
+    "cancelling": "جارٍ الإلغاء..."
+  },
+  "processing": "يتم إكمال الطلب...",
 };
--- a/src/i18n/locales/bg/orders.js
+++ b/src/i18n/locales/bg/orders.js
@@ -17,23 +17,34 @@ export default {
    "items": "Артикули", 
    "total": "Общо", 
    "actions": "Действия", 
-    "viewDetails": "Виж подробности" 
+    "viewDetails": "Виж детайли" 
+  },
+  "tooltips": {
+    "viewDetails": "Виж детайли", 
+    "cancelOrder": "Отмени поръчката" 
  },
  "noOrders": "Все още не сте направили поръчки.", 
  "details": {
-    "title": "Подробности за поръчка: {{orderId}}", 
+    "title": "Детайли на поръчка: {{orderId}}", 
    "deliveryAddress": "Адрес за доставка", 
    "invoiceAddress": "Адрес за фактура", 
-    "orderDetails": "Подробности за поръчката", 
-    "deliveryMethod": "Начин на доставка:", 
-    "paymentMethod": "Начин на плащане:", 
+    "orderDetails": "Детайли на поръчката", 
+    "deliveryMethod": "Метод на доставка:", 
+    "paymentMethod": "Метод на плащане:", 
    "notSpecified": "Не е посочено", 
    "orderedItems": "Поръчани артикули", 
    "item": "Артикул", 
    "quantity": "Количество", 
    "price": "Цена", 
+    "vat": "ДДС", 
    "total": "Общо", 
    "cancelOrder": "Отмени поръчката" 
  },
+  "cancelConfirm": {
+    "title": "Отмяна на поръчка",
+    "message": "Сигурни ли сте, че искате да отмените тази поръчка?",
+    "confirm": "Отмени поръчката",
+    "cancelling": "Отмяна..."
+  },
  "processing": "Поръчката се обработва...", 
 };
--- a/src/i18n/locales/cs/orders.js
+++ b/src/i18n/locales/cs/orders.js
@@ -1,39 +1,50 @@
 export default {
  "status": {
-    "new": "Probíhá",
-    "pending": "Nové",
-    "processing": "Probíhá",
-    "cancelled": "Zrušeno",
-    "shipped": "Odesláno",
-    "delivered": "Doručeno",
-    "return": "Vrácení",
-    "partialReturn": "Částečné vrácení",
-    "partialDelivered": "Částečně doručeno"
+    "new": "Probíhá", 
+    "pending": "Nová", 
+    "processing": "Probíhá", 
+    "cancelled": "Zrušeno", 
+    "shipped": "Odesláno", 
+    "delivered": "Doručeno", 
+    "return": "Vrácení", 
+    "partialReturn": "Částečné vrácení", 
+    "partialDelivered": "Částečně doručeno" 
  },
  "table": {
-    "orderNumber": "Číslo objednávky",
-    "date": "Datum",
-    "status": "Stav",
-    "items": "Položky",
-    "total": "Celkem",
-    "actions": "Akce",
-    "viewDetails": "Zobrazit detaily"
+    "orderNumber": "Číslo objednávky", 
+    "date": "Datum", 
+    "status": "Stav", 
+    "items": "Položky", 
+    "total": "Celkem", 
+    "actions": "Akce", 
+    "viewDetails": "Zobrazit detaily" 
  },
-  "noOrders": "Ještě jste neprovedli žádné objednávky.",
+  "tooltips": {
+    "viewDetails": "Zobrazit detaily", 
+    "cancelOrder": "Zrušit objednávku" 
+  },
+  "noOrders": "Ještě jste neprovedli žádné objednávky.", 
  "details": {
-    "title": "Detaily objednávky: {{orderId}}",
-    "deliveryAddress": "Dodací adresa",
-    "invoiceAddress": "Fakturační adresa",
-    "orderDetails": "Detaily objednávky",
-    "deliveryMethod": "Způsob doručení:",
-    "paymentMethod": "Způsob platby:",
-    "notSpecified": "Nespecifikováno",
-    "orderedItems": "Objednané položky",
-    "item": "Položka",
-    "quantity": "Množství",
-    "price": "Cena",
-    "total": "Celkem",
-    "cancelOrder": "Zrušit objednávku"
+    "title": "Detaily objednávky: {{orderId}}", 
+    "deliveryAddress": "Dodací adresa", 
+    "invoiceAddress": "Fakturační adresa", 
+    "orderDetails": "Detaily objednávky", 
+    "deliveryMethod": "Způsob doručení:", 
+    "paymentMethod": "Způsob platby:", 
+    "notSpecified": "Nespecifikováno", 
+    "orderedItems": "Objednané položky", 
+    "item": "Položka", 
+    "quantity": "Množství", 
+    "price": "Cena", 
+    "vat": "DPH", 
+    "total": "Celkem", 
+    "cancelOrder": "Zrušit objednávku" 
  },
-  "processing": "Objednávka se dokončuje..."
+  "cancelConfirm": {
+    "title": "Zrušit objednávku",
+    "message": "Opravdu chcete tuto objednávku zrušit?",
+    "confirm": "Zrušit objednávku",
+    "cancelling": "Rušení..."
+  },
+  "processing": "Objednávka se dokončuje...", 
 };
--- a/src/i18n/locales/de/orders.js
+++ b/src/i18n/locales/de/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Aktionen",
    "viewDetails": "Details anzeigen"
  },
+  "tooltips": {
+    "viewDetails": "Details anzeigen",
+    "cancelOrder": "Bestellung stornieren"
+  },
  "noOrders": "Sie haben noch keine Bestellungen aufgegeben.",
  "details": {
    "title": "Bestelldetails: {{orderId}}",
@@ -35,5 +39,11 @@ export default {
    "total": "Gesamt",
    "cancelOrder": "Bestellung stornieren"
  },
+  "cancelConfirm": {
+    "title": "Bestellung stornieren",
+    "message": "Sind Sie sicher, dass Sie diese Bestellung stornieren möchten?",
+    "confirm": "Stornieren",
+    "cancelling": "Wird storniert..."
+  },
  "processing": "Bestellung wird abgeschlossen..."
 }; 
--- a/src/i18n/locales/el/orders.js
+++ b/src/i18n/locales/el/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Ενέργειες",
    "viewDetails": "Προβολή λεπτομερειών"
  },
+  "tooltips": {
+    "viewDetails": "Προβολή λεπτομερειών",
+    "cancelOrder": "Ακύρωση παραγγελίας"
+  },
  "noOrders": "Δεν έχετε κάνει ακόμα καμία παραγγελία.",
  "details": {
    "title": "Λεπτομέρειες παραγγελίας: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Είδος",
    "quantity": "Ποσότητα",
    "price": "Τιμή",
+    "vat": "ΦΠΑ",
    "total": "Σύνολο",
    "cancelOrder": "Ακύρωση παραγγελίας"
  },
-  "processing": "Η παραγγελία ολοκληρώνεται...",
+  "cancelConfirm": {
+    "title": "Ακύρωση παραγγελίας",
+    "message": "Είστε σίγουροι ότι θέλετε να ακυρώσετε αυτήν την παραγγελία;",
+    "confirm": "Ακύρωση παραγγελίας",
+    "cancelling": "Ακύρωση..."
+  },
+  "processing": "Η παραγγελία ολοκληρώνεται..."
 };
--- a/src/i18n/locales/en/orders.js
+++ b/src/i18n/locales/en/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Actions", // Aktionen
    "viewDetails": "View details" // Details anzeigen
  },
+  "tooltips": {
+    "viewDetails": "View details", // Details anzeigen
+    "cancelOrder": "Cancel order" // Bestellung stornieren
+  },
  "noOrders": "You have not placed any orders yet.", // Sie haben noch keine Bestellungen aufgegeben.
  "details": {
    "title": "Order details: {{orderId}}", // Bestelldetails: {{orderId}}
@@ -32,8 +36,15 @@ export default {
    "item": "Item", // Artikel
    "quantity": "Quantity", // Menge
    "price": "Price", // Preis
+    "vat": "VAT", // MwSt.
    "total": "Total", // Gesamt
    "cancelOrder": "Cancel order" // Bestellung stornieren
  },
+  "cancelConfirm": {
+    "title": "Cancel Order",
+    "message": "Are you sure you want to cancel this order?",
+    "confirm": "Cancel Order",
+    "cancelling": "Cancelling..."
+  },
  "processing": "Order is being completed...", // Bestellung wird abgeschlossen...
 };
--- a/src/i18n/locales/es/orders.js
+++ b/src/i18n/locales/es/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Acciones",
    "viewDetails": "Ver detalles"
  },
+  "tooltips": {
+    "viewDetails": "Ver detalles",
+    "cancelOrder": "Cancelar pedido"
+  },
  "noOrders": "Aún no has realizado ningún pedido.",
  "details": {
    "title": "Detalles del pedido: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Artículo",
    "quantity": "Cantidad",
    "price": "Precio",
+    "vat": "IVA",
    "total": "Total",
    "cancelOrder": "Cancelar pedido"
  },
-  "processing": "El pedido se está completando..."
+  "cancelConfirm": {
+    "title": "Cancelar pedido",
+    "message": "¿Estás seguro de que deseas cancelar este pedido?",
+    "confirm": "Cancelar pedido",
+    "cancelling": "Cancelando..."
+  },
+  "processing": "El pedido se está completando...",
 };
--- a/src/i18n/locales/fr/orders.js
+++ b/src/i18n/locales/fr/orders.js
@@ -19,7 +19,11 @@ export default {
    "actions": "Actions",
    "viewDetails": "Voir les détails"
  },
-  "noOrders": "Vous n'avez encore passé aucune commande.",
+  "tooltips": {
+    "viewDetails": "Voir les détails",
+    "cancelOrder": "Annuler la commande"
+  },
+  "noOrders": "Vous n'avez pas encore passé de commandes.",
  "details": {
    "title": "Détails de la commande : {{orderId}}",
    "deliveryAddress": "Adresse de livraison",
@@ -32,8 +36,15 @@ export default {
    "item": "Article",
    "quantity": "Quantité",
    "price": "Prix",
+    "vat": "TVA",
    "total": "Total",
    "cancelOrder": "Annuler la commande"
  },
-  "processing": "La commande est en cours de traitement...",
+  "cancelConfirm": {
+    "title": "Annuler la commande",
+    "message": "Êtes-vous sûr de vouloir annuler cette commande ?",
+    "confirm": "Annuler la commande",
+    "cancelling": "Annulation en cours..."
+  },
+  "processing": "La commande est en cours de traitement..."
 };
--- a/src/i18n/locales/hr/orders.js
+++ b/src/i18n/locales/hr/orders.js
@@ -19,7 +19,11 @@ export default {
    "actions": "Radnje",
    "viewDetails": "Pogledaj detalje"
  },
-  "noOrders": "Još niste izvršili nijednu narudžbu.",
+  "tooltips": {
+    "viewDetails": "Pogledaj detalje",
+    "cancelOrder": "Otkaži narudžbu"
+  },
+  "noOrders": "Još niste napravili nijednu narudžbu.",
  "details": {
    "title": "Detalji narudžbe: {{orderId}}",
    "deliveryAddress": "Adresa dostave",
@@ -32,8 +36,15 @@ export default {
    "item": "Artikl",
    "quantity": "Količina",
    "price": "Cijena",
+    "vat": "PDV",
    "total": "Ukupno",
    "cancelOrder": "Otkaži narudžbu"
  },
-  "processing": "Narudžba se dovršava..."
+  "cancelConfirm": {
+    "title": "Otkaži narudžbu",
+    "message": "Jeste li sigurni da želite otkazati ovu narudžbu?",
+    "confirm": "Otkaži narudžbu",
+    "cancelling": "Otkazivanje..."
+  },
+  "processing": "Narudžba se dovršava...",
 };
--- a/src/i18n/locales/hu/orders.js
+++ b/src/i18n/locales/hu/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Műveletek",
    "viewDetails": "Részletek megtekintése"
  },
+  "tooltips": {
+    "viewDetails": "Részletek megtekintése",
+    "cancelOrder": "Rendelés törlése"
+  },
  "noOrders": "Még nem adott le rendelést.",
  "details": {
    "title": "Rendelés részletei: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Termék",
    "quantity": "Mennyiség",
    "price": "Ár",
+    "vat": "ÁFA",
    "total": "Összesen",
    "cancelOrder": "Rendelés törlése"
  },
+  "cancelConfirm": {
+    "title": "Rendelés törlése",
+    "message": "Biztosan törölni szeretné ezt a rendelést?",
+    "confirm": "Rendelés törlése",
+    "cancelling": "Törlés folyamatban..."
+  },
  "processing": "A rendelés feldolgozása folyamatban..."
 };
--- a/src/i18n/locales/it/orders.js
+++ b/src/i18n/locales/it/orders.js
@@ -8,7 +8,7 @@ export default {
    "delivered": "Consegnato",
    "return": "Reso",
    "partialReturn": "Reso parziale",
-    "partialDelivered": "Consegnato parzialmente"
+    "partialDelivered": "Parzialmente consegnato"
  },
  "table": {
    "orderNumber": "Numero ordine",
@@ -19,6 +19,10 @@ export default {
    "actions": "Azioni",
    "viewDetails": "Visualizza dettagli"
  },
+  "tooltips": {
+    "viewDetails": "Visualizza dettagli",
+    "cancelOrder": "Annulla ordine"
+  },
  "noOrders": "Non hai ancora effettuato ordini.",
  "details": {
    "title": "Dettagli ordine: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Articolo",
    "quantity": "Quantità",
    "price": "Prezzo",
+    "vat": "IVA",
    "total": "Totale",
    "cancelOrder": "Annulla ordine"
  },
-  "processing": "L'ordine è in fase di completamento..."
+  "cancelConfirm": {
+    "title": "Annulla ordine",
+    "message": "Sei sicuro di voler annullare questo ordine?",
+    "confirm": "Annulla ordine",
+    "cancelling": "Annullamento in corso..."
+  },
+  "processing": "Ordine in elaborazione..."
 };
--- a/src/i18n/locales/pl/orders.js
+++ b/src/i18n/locales/pl/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Akcje",
    "viewDetails": "Pokaż szczegóły"
  },
+  "tooltips": {
+    "viewDetails": "Pokaż szczegóły",
+    "cancelOrder": "Anuluj zamówienie"
+  },
  "noOrders": "Nie złożyłeś jeszcze żadnych zamówień.",
  "details": {
    "title": "Szczegóły zamówienia: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Produkt",
    "quantity": "Ilość",
    "price": "Cena",
+    "vat": "VAT",
    "total": "Razem",
    "cancelOrder": "Anuluj zamówienie"
  },
+  "cancelConfirm": {
+    "title": "Anuluj zamówienie",
+    "message": "Czy na pewno chcesz anulować to zamówienie?",
+    "confirm": "Anuluj zamówienie",
+    "cancelling": "Anulowanie..."
+  },
  "processing": "Zamówienie jest realizowane...",
 };
--- a/src/i18n/locales/ro/orders.js
+++ b/src/i18n/locales/ro/orders.js
@@ -1,39 +1,50 @@
 export default {
  "status": {
-    "new": "În curs", 
-    "pending": "Nou", 
-    "processing": "În curs", 
-    "cancelled": "Anulat", 
-    "shipped": "Expediat", 
-    "delivered": "Livrat", 
-    "return": "Returnare", 
-    "partialReturn": "Returnare parțială", 
-    "partialDelivered": "Livrat parțial" 
+    "new": "În curs",
+    "pending": "Nou",
+    "processing": "În curs",
+    "cancelled": "Anulat",
+    "shipped": "Expediat",
+    "delivered": "Livrat",
+    "return": "Returnare",
+    "partialReturn": "Returnare parțială",
+    "partialDelivered": "Livrat parțial"
  },
  "table": {
-    "orderNumber": "Număr comandă", 
-    "date": "Data", 
-    "status": "Status", 
-    "items": "Articole", 
-    "total": "Total", 
-    "actions": "Acțiuni", 
-    "viewDetails": "Vezi detalii" 
+    "orderNumber": "Număr comandă",
+    "date": "Data",
+    "status": "Status",
+    "items": "Articole",
+    "total": "Total",
+    "actions": "Acțiuni",
+    "viewDetails": "Vezi detalii"
  },
-  "noOrders": "Nu ați plasat încă nicio comandă.", 
+  "tooltips": {
+    "viewDetails": "Vezi detalii",
+    "cancelOrder": "Anulează comanda"
+  },
+  "noOrders": "Nu ați plasat încă nicio comandă.",
  "details": {
-    "title": "Detalii comandă: {{orderId}}", 
-    "deliveryAddress": "Adresa de livrare", 
-    "invoiceAddress": "Adresa de facturare", 
-    "orderDetails": "Detalii comandă", 
-    "deliveryMethod": "Metoda de livrare:", 
-    "paymentMethod": "Metoda de plată:", 
-    "notSpecified": "Nespecificat", 
-    "orderedItems": "Articole comandate", 
-    "item": "Articol", 
-    "quantity": "Cantitate", 
-    "price": "Preț", 
-    "total": "Total", 
-    "cancelOrder": "Anulează comanda" 
+    "title": "Detalii comandă: {{orderId}}",
+    "deliveryAddress": "Adresa de livrare",
+    "invoiceAddress": "Adresa de facturare",
+    "orderDetails": "Detalii comandă",
+    "deliveryMethod": "Metoda de livrare:",
+    "paymentMethod": "Metoda de plată:",
+    "notSpecified": "Nespecificat",
+    "orderedItems": "Articole comandate",
+    "item": "Articol",
+    "quantity": "Cantitate",
+    "price": "Preț",
+    "vat": "TVA",
+    "total": "Total",
+    "cancelOrder": "Anulează comanda"
  },
-  "processing": "Comanda este în curs de finalizare...", 
+  "cancelConfirm": {
+    "title": "Anulează comanda",
+    "message": "Sigur doriți să anulați această comandă?",
+    "confirm": "Anulează comanda",
+    "cancelling": "Se anulează..."
+  },
+  "processing": "Comanda este în curs de finalizare..."
 };
--- a/src/i18n/locales/ru/orders.js
+++ b/src/i18n/locales/ru/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Действия",
    "viewDetails": "Просмотреть детали"
  },
+  "tooltips": {
+    "viewDetails": "Просмотреть детали",
+    "cancelOrder": "Отменить заказ"
+  },
  "noOrders": "Вы ещё не сделали ни одного заказа.",
  "details": {
    "title": "Детали заказа: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Товар",
    "quantity": "Количество",
    "price": "Цена",
+    "vat": "НДС",
    "total": "Итого",
    "cancelOrder": "Отменить заказ"
  },
-  "processing": "Заказ оформляется...",
+  "cancelConfirm": {
+    "title": "Отмена заказа",
+    "message": "Вы уверены, что хотите отменить этот заказ?",
+    "confirm": "Отменить заказ",
+    "cancelling": "Отмена..."
+  },
+  "processing": "Заказ обрабатывается...",
 };
--- a/src/i18n/locales/sk/orders.js
+++ b/src/i18n/locales/sk/orders.js
@@ -1,39 +1,50 @@
 export default {
  "status": {
-    "new": "Prebieha", 
-    "pending": "Nové", 
-    "processing": "Prebieha", 
-    "cancelled": "Zrušené", 
-    "shipped": "Odoslané", 
-    "delivered": "Doručené", 
-    "return": "Vrátenie", 
-    "partialReturn": "Čiastočné vrátenie", 
-    "partialDelivered": "Čiastočne doručené" 
+    "new": "Prebieha",
+    "pending": "Nové",
+    "processing": "Prebieha",
+    "cancelled": "Zrušené",
+    "shipped": "Odoslané",
+    "delivered": "Doručené",
+    "return": "Vrátenie",
+    "partialReturn": "Čiastočné vrátenie",
+    "partialDelivered": "Čiastočne doručené"
  },
  "table": {
-    "orderNumber": "Číslo objednávky", 
-    "date": "Dátum", 
-    "status": "Stav", 
-    "items": "Položky", 
-    "total": "Spolu", 
-    "actions": "Akcie", 
-    "viewDetails": "Zobraziť detaily" 
+    "orderNumber": "Číslo objednávky",
+    "date": "Dátum",
+    "status": "Stav",
+    "items": "Položky",
+    "total": "Spolu",
+    "actions": "Akcie",
+    "viewDetails": "Zobraziť detaily"
  },
-  "noOrders": "Ešte ste neuskutočnili žiadne objednávky.", 
+  "tooltips": {
+    "viewDetails": "Zobraziť detaily",
+    "cancelOrder": "Zrušiť objednávku"
+  },
+  "noOrders": "Ešte ste neuskutočnili žiadne objednávky.",
  "details": {
-    "title": "Detaily objednávky: {{orderId}}", 
-    "deliveryAddress": "Dodacia adresa", 
-    "invoiceAddress": "Fakturačná adresa", 
-    "orderDetails": "Detaily objednávky", 
-    "deliveryMethod": "Spôsob doručenia:", 
-    "paymentMethod": "Spôsob platby:", 
-    "notSpecified": "Nie je uvedené", 
-    "orderedItems": "Objednané položky", 
-    "item": "Položka", 
-    "quantity": "Množstvo", 
-    "price": "Cena", 
-    "total": "Spolu", 
-    "cancelOrder": "Zrušiť objednávku" 
+    "title": "Detaily objednávky: {{orderId}}",
+    "deliveryAddress": "Dodacia adresa",
+    "invoiceAddress": "Fakturačná adresa",
+    "orderDetails": "Detaily objednávky",
+    "deliveryMethod": "Spôsob doručenia:",
+    "paymentMethod": "Spôsob platby:",
+    "notSpecified": "Nie je uvedené",
+    "orderedItems": "Objednané položky",
+    "item": "Položka",
+    "quantity": "Množstvo",
+    "price": "Cena",
+    "vat": "DPH",
+    "total": "Spolu",
+    "cancelOrder": "Zrušiť objednávku"
  },
-  "processing": "Objednávka sa spracováva...", 
+  "cancelConfirm": {
+    "title": "Zrušiť objednávku",
+    "message": "Naozaj chcete zrušiť túto objednávku?",
+    "confirm": "Zrušiť objednávku",
+    "cancelling": "Zrušovanie..."
+  },
+  "processing": "Objednávka sa dokončuje..."
 };
--- a/src/i18n/locales/sl/orders.js
+++ b/src/i18n/locales/sl/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "Dejanja",
    "viewDetails": "Poglej podrobnosti"
  },
+  "tooltips": {
+    "viewDetails": "Poglej podrobnosti",
+    "cancelOrder": "Prekliči naročilo"
+  },
  "noOrders": "Še niste oddali nobenega naročila.",
  "details": {
    "title": "Podrobnosti naročila: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Izdelek",
    "quantity": "Količina",
    "price": "Cena",
+    "vat": "DDV",
    "total": "Skupaj",
    "cancelOrder": "Prekliči naročilo"
  },
-  "processing": "Naročilo se zaključuje..."
+  "cancelConfirm": {
+    "title": "Prekliči naročilo",
+    "message": "Ste prepričani, da želite preklicati to naročilo?",
+    "confirm": "Prekliči naročilo",
+    "cancelling": "Preklicujem..."
+  },
+  "processing": "Naročilo se zaključuje...",
 };
--- a/src/i18n/locales/sr/orders.js
+++ b/src/i18n/locales/sr/orders.js
@@ -6,8 +6,8 @@ export default {
    "cancelled": "Otkazano",
    "shipped": "Poslato",
    "delivered": "Isporučeno",
-    "return": "Povrat",
-    "partialReturn": "Delimični povrat",
+    "return": "Povraćaj",
+    "partialReturn": "Delimični povraćaj",
    "partialDelivered": "Delimično isporučeno"
  },
  "table": {
@@ -19,7 +19,11 @@ export default {
    "actions": "Akcije",
    "viewDetails": "Pogledaj detalje"
  },
-  "noOrders": "Još niste napravili nijednu porudžbinu.",
+  "tooltips": {
+    "viewDetails": "Pogledaj detalje",
+    "cancelOrder": "Otkaži porudžbinu"
+  },
+  "noOrders": "Još uvek niste napravili nijednu porudžbinu.",
  "details": {
    "title": "Detalji porudžbine: {{orderId}}",
    "deliveryAddress": "Adresa za isporuku",
@@ -32,8 +36,15 @@ export default {
    "item": "Artikal",
    "quantity": "Količina",
    "price": "Cena",
+    "vat": "PDV",
    "total": "Ukupno",
    "cancelOrder": "Otkaži porudžbinu"
  },
+  "cancelConfirm": {
+    "title": "Otkaži porudžbinu",
+    "message": "Da li ste sigurni da želite da otkažete ovu porudžbinu?",
+    "confirm": "Otkaži porudžbinu",
+    "cancelling": "Otkazivanje..."
+  },
  "processing": "Porudžbina se obrađuje...",
 };
--- a/src/i18n/locales/sv/orders.js
+++ b/src/i18n/locales/sv/orders.js
@@ -19,7 +19,11 @@ export default {
    "actions": "Åtgärder",
    "viewDetails": "Visa detaljer"
  },
-  "noOrders": "Du har inte gjort några beställningar än.",
+  "tooltips": {
+    "viewDetails": "Visa detaljer",
+    "cancelOrder": "Avbryt order"
+  },
+  "noOrders": "Du har inte lagt några beställningar än.",
  "details": {
    "title": "Orderdetaljer: {{orderId}}",
    "deliveryAddress": "Leveransadress",
@@ -32,8 +36,15 @@ export default {
    "item": "Artikel",
    "quantity": "Antal",
    "price": "Pris",
+    "vat": "Moms",
    "total": "Totalt",
    "cancelOrder": "Avbryt order"
  },
+  "cancelConfirm": {
+    "title": "Avbryt order",
+    "message": "Är du säker på att du vill avbryta denna order?",
+    "confirm": "Avbryt order",
+    "cancelling": "Avbryter..."
+  },
  "processing": "Ordern behandlas..."
 };
--- a/src/i18n/locales/tr/orders.js
+++ b/src/i18n/locales/tr/orders.js
@@ -19,6 +19,10 @@ export default {
    "actions": "İşlemler",
    "viewDetails": "Detayları görüntüle"
  },
+  "tooltips": {
+    "viewDetails": "Detayları görüntüle",
+    "cancelOrder": "Siparişi iptal et"
+  },
  "noOrders": "Henüz sipariş vermediniz.",
  "details": {
    "title": "Sipariş detayları: {{orderId}}",
@@ -32,8 +36,15 @@ export default {
    "item": "Ürün",
    "quantity": "Adet",
    "price": "Fiyat",
+    "vat": "KDV",
    "total": "Toplam",
    "cancelOrder": "Siparişi iptal et"
  },
+  "cancelConfirm": {
+    "title": "Siparişi İptal Et",
+    "message": "Bu siparişi iptal etmek istediğinizden emin misiniz?",
+    "confirm": "Siparişi İptal Et",
+    "cancelling": "İptal ediliyor..."
+  },
  "processing": "Sipariş tamamlanıyor...",
 };
--- a/src/i18n/locales/uk/orders.js
+++ b/src/i18n/locales/uk/orders.js
@@ -19,7 +19,11 @@ export default {
    "actions": "Дії",
    "viewDetails": "Переглянути деталі"
  },
-  "noOrders": "Ви ще не зробили жодного замовлення.",
+  "tooltips": {
+    "viewDetails": "Переглянути деталі",
+    "cancelOrder": "Скасувати замовлення"
+  },
+  "noOrders": "Ви ще не робили замовлень.",
  "details": {
    "title": "Деталі замовлення: {{orderId}}",
    "deliveryAddress": "Адреса доставки",
@@ -32,8 +36,15 @@ export default {
    "item": "Товар",
    "quantity": "Кількість",
    "price": "Ціна",
+    "vat": "ПДВ",
    "total": "Всього",
    "cancelOrder": "Скасувати замовлення"
  },
+  "cancelConfirm": {
+    "title": "Скасувати замовлення",
+    "message": "Ви впевнені, що хочете скасувати це замовлення?",
+    "confirm": "Скасувати замовлення",
+    "cancelling": "Скасування..."
+  },
  "processing": "Замовлення обробляється...",
 };
--- a/src/i18n/locales/zh/orders.js
+++ b/src/i18n/locales/zh/orders.js
@@ -19,21 +19,32 @@ export default {
    "actions": "操作",
    "viewDetails": "查看详情"
  },
+  "tooltips": {
+    "viewDetails": "查看详情",
+    "cancelOrder": "取消订单"
+  },
  "noOrders": "您尚未下过任何订单。",
  "details": {
-    "title": "订单详情：{{orderId}}",
+    "title": "订单详情: {{orderId}}",
    "deliveryAddress": "收货地址",
    "invoiceAddress": "发票地址",
    "orderDetails": "订单详情",
-    "deliveryMethod": "配送方式：",
-    "paymentMethod": "支付方式：",
+    "deliveryMethod": "配送方式:",
+    "paymentMethod": "支付方式:",
    "notSpecified": "未指定",
    "orderedItems": "订购商品",
    "item": "商品",
    "quantity": "数量",
    "price": "价格",
+    "vat": "增值税",
    "total": "总计",
    "cancelOrder": "取消订单"
  },
-  "processing": "订单正在处理中..."
+  "cancelConfirm": {
+    "title": "取消订单",
+    "message": "您确定要取消此订单吗？",
+    "confirm": "取消订单",
+    "cancelling": "正在取消..."
+  },
+  "processing": "订单正在处理..."
 };
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -109,15 +109,24 @@ const ProfilePage = (props) => {
        setOrderIdFromHash(null);
        break;
      default:
-        if (hash && hash.startsWith('#ORD-')) {
-          const orderId = hash.substring(1);
-          setOrderIdFromHash(orderId);
-          setTabValue(1); // Switch to Orders tab
+        if (hash && hash.length > 1) {
+          // Check if it's a potential order ID (starts with # and has alphanumeric characters with dashes)
+          const potentialOrderId = hash.substring(1);
+          if (/^[A-Z0-9]+-[A-Z0-9]+$/i.test(potentialOrderId)) {
+            setOrderIdFromHash(potentialOrderId);
+            setTabValue(1); // Switch to Orders tab
+          } else {
+            setOrderIdFromHash(null);
+          }
        } else {
          setOrderIdFromHash(null);
+          // If no hash is present, set default to cart tab
+          if (!hash) {
+            navigate('/profile#cart', { replace: true });
+          }
        }
    }
-  }, [location.hash]);
+  }, [location.hash, navigate]);

  useEffect(() => {
    const checkUserLoggedIn = () => {
@@ -169,10 +178,23 @@ const ProfilePage = (props) => {

  const handleTabChange = (event, newValue) => {
    setTabValue(newValue);
+    
+    // Update the hash based on the selected tab
+    const hashMap = {
+      0: '#cart',
+      1: '#orders', 
+      2: '#settings'
+    };
+    
+    const newHash = hashMap[newValue];
+    if (newHash) {
+      navigate(`/profile${newHash}`, { replace: true });
+    }
  };

  const handleGoToOrders = () => {
    setTabValue(1);
+    navigate('/profile#orders', { replace: true });
  };

  const handleClearPaymentCompletion = () => {
Author	SHA1	Message	Date
sebseb7	0015872894	Add tooltips and cancellation confirmation for orders: Enhanced localization by adding tooltips for viewing details and canceling orders across multiple languages. Implemented cancellation confirmation messages to improve user experience when canceling orders.	2025-07-18 01:28:28 +02:00
sebseb7	cb8ce69903	Implement order cancellation feature in OrdersTab: Added functionality to confirm and cancel orders, including a confirmation dialog. Enhanced payment method display in OrderDetailsDialog and updated VAT calculations. Improved localization for order-related messages across multiple languages.	2025-07-17 21:35:00 +02:00
sebseb7	64048e6d0b	Enhance order ID handling and navigation in ProfilePage and OrdersTab: Updated hash processing to validate order IDs, improved tab navigation, and added console logging for better debugging. Adjusted navigation to ensure correct hash updates when switching tabs and viewing orders.	2025-07-17 12:43:39 +02:00