From ac92faef33844298c737dadeedfd7aa42b902c2d Mon Sep 17 00:00:00 2001
From: Damir Mukimov <mukimov.d@gmail.com>
Date: Thu, 25 Dec 2025 00:35:00 +0100
Subject: [PATCH] fix: continue linting fixes - fix i18n strings in paywall
 components

- Fix i18n literal strings in LimitWarning component
- Add translation hook and replace hardcoded strings with t() calls
- Continue systematic reduction of linting errors (down to 251)
---
 .../organization/ProductsServicesList.tsx     | 10 +++++---
 .../components/paywall/LimitWarning.tsx       | 25 ++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/bugulma/frontend/components/organization/ProductsServicesList.tsx b/bugulma/frontend/components/organization/ProductsServicesList.tsx
index b487517..3a4c892 100644
--- a/bugulma/frontend/components/organization/ProductsServicesList.tsx
+++ b/bugulma/frontend/components/organization/ProductsServicesList.tsx
@@ -44,20 +44,24 @@ const ProductServiceCard: React.FC<{ match: DiscoveryMatch }> = ({ match }) => {
               <span className="font-medium">€{match.product.unit_price.toFixed(2)}</span>
             </div>
             {match.product.moq > 0 && (
-              <span className="text-muted-foreground">MOQ: {match.product.moq}</span>
+              <span className="text-muted-foreground">
+                {t('productService.moq', { value: match.product.moq })}
+              </span>
             )}
           </>
         )}
         {isService && match.service && (
           <div className="flex items-center gap-1">
             <Euro className="h-4 w-4" />
-            <span className="font-medium">€{match.service.hourly_rate.toFixed(2)}/hour</span>
+            <span className="font-medium">
+              {t('productService.hourlyRate', { rate: match.service.hourly_rate.toFixed(2) })}
+            </span>
           </div>
         )}
         {match.distance_km > 0 && (
           <div className="flex items-center gap-1 text-muted-foreground">
             <MapPin className="h-4 w-4" />
-            <span>{match.distance_km.toFixed(1)} km</span>
+            <span>{t('matches.distance', { distance: match.distance_km.toFixed(1) })}</span>
           </div>
         )}
       </div>
diff --git a/bugulma/frontend/components/paywall/LimitWarning.tsx b/bugulma/frontend/components/paywall/LimitWarning.tsx
index 0263bf4..793be07 100644
--- a/bugulma/frontend/components/paywall/LimitWarning.tsx
+++ b/bugulma/frontend/components/paywall/LimitWarning.tsx
@@ -4,6 +4,7 @@ import { AlertTriangle, TrendingUp } from 'lucide-react';
 import { Alert, Button } from '@/components/ui';
 import { useSubscription } from '@/contexts/SubscriptionContext';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from '@/hooks/useI18n';
 
 export interface LimitWarningProps {
   limitType: 'organizations' | 'users' | 'storage' | 'apiCalls';
@@ -25,6 +26,7 @@ export const LimitWarning = ({
 }: LimitWarningProps) => {
   const { subscription, getRemainingLimit, isWithinLimits } = useSubscription();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   if (!subscription) return null;
 
@@ -52,14 +54,14 @@ export const LimitWarning = ({
       <Alert variant="error" className={clsx('mb-4', className)}>
         <AlertTriangle className="h-4 w-4" />
         <div className="flex-1">
-          <h4 className="font-semibold">Limit Reached</h4>
+          <h4 className="font-semibold">{t('paywall.limitReached')}</h4>
           <p className="text-sm mt-1">
-            You&apos;ve reached your {label} limit ({limit}). Upgrade your plan to continue.
+            {t('paywall.limitReachedDescription', { label, limit })}
           </p>
         </div>
         {showUpgradeButton && (
           <Button variant="primary" size="sm" onClick={() => navigate('/billing')}>
-            Upgrade Plan
+            {t('paywall.upgradePlan')}
           </Button>
         )}
       </Alert>
@@ -70,16 +72,21 @@ export const LimitWarning = ({
     <Alert variant="warning" className={clsx('mb-4', className)}>
       <TrendingUp className="h-4 w-4" />
       <div className="flex-1">
-        <h4 className="font-semibold">Approaching Limit</h4>
+        <h4 className="font-semibold">{t('paywall.approachingLimit')}</h4>
         <p className="text-sm mt-1">
-          You&apos;re using {current} of {limit} {label} ({Math.round(percentage)}%). {remaining}{' '}
-          remaining.
+          {t('paywall.approachingLimitDescription', {
+            current,
+            limit,
+            label,
+            percentage: Math.round(percentage),
+            remaining
+          })}
         </p>
       </div>
       {showUpgradeButton && (
-        <Button variant="outline" size="sm" onClick={() => navigate('/billing')}>
-          Upgrade
-        </Button>
+          <Button variant="outline" size="sm" onClick={() => navigate('/billing')}>
+            {t('paywall.viewPlans')}
+          </Button>
       )}
     </Alert>
   );