From 0a87cdc34733254ab176ae1109d5092e0d9d8a56 Mon Sep 17 00:00:00 2001
From: Unchained <unchained@nodecrew.me>
Date: Sun, 29 Mar 2026 08:55:20 +0200
Subject: [PATCH] fix: translate payment method names based on locale

- Update PaymentMethodCard to use next-intl translations
- Remove hardcoded English names from config
- Add comingSoon translation key for unavailable methods
- Payment names now match checkout language (SR/EN/DE/FR)
---
 src/components/payment/PaymentMethodCard.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/payment/PaymentMethodCard.tsx b/src/components/payment/PaymentMethodCard.tsx
index 817f797..77cbbd5 100644
--- a/src/components/payment/PaymentMethodCard.tsx
+++ b/src/components/payment/PaymentMethodCard.tsx
@@ -3,6 +3,7 @@
 import { cn } from "@/lib/utils";
 import type { PaymentMethod } from "@/lib/saleor/payments/types";
 import { Banknote, CreditCard, Building2, LucideIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 // Icon mapping for payment methods
 const iconMap: Record<string, LucideIcon> = {
@@ -26,8 +27,13 @@ export function PaymentMethodCard({
   disabled = false,
   locale,
 }: PaymentMethodCardProps) {
+  const t = useTranslations("Payment");
   const Icon = method.icon ? iconMap[method.icon] : Banknote;
 
+  // Get translated name and description based on method ID
+  const translatedName = t(`${method.id}.name`);
+  const translatedDescription = t(`${method.id}.description`);
+
   return (
     <label
       className={cn(
@@ -54,7 +60,7 @@ export function PaymentMethodCard({
 
       <div className="flex-1">
         <div className="flex items-center justify-between">
-          <span className="font-medium text-gray-900">{method.name}</span>
+          <span className="font-medium text-gray-900">{translatedName}</span>
           {method.fee > 0 && (
             <span className="text-sm text-amber-600">
               +{new Intl.NumberFormat(locale === 'sr' ? 'sr-RS' : 'en-US', {
@@ -65,11 +71,11 @@ export function PaymentMethodCard({
           )}
         </div>
 
-        <p className="mt-1 text-sm text-gray-600">{method.description}</p>
+        <p className="mt-1 text-sm text-gray-600">{translatedDescription}</p>
 
         {!method.available && (
           <span className="mt-2 inline-block text-xs text-gray-500">
-            {locale === 'sr' ? 'Uskoro dostupno' : 'Coming soon'}
+            {t(`${method.id}.comingSoon`)}
           </span>
         )}