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)
This commit is contained in:
Damir Mukimov 2025-12-25 00:35:00 +01:00
parent 18cdcb12fd
commit ac92faef33
No known key found for this signature in database
GPG Key ID: 42996CC7C73BC750
2 changed files with 23 additions and 12 deletions

View File

@ -44,20 +44,24 @@ const ProductServiceCard: React.FC<{ match: DiscoveryMatch }> = ({ match }) => {
<span className="font-medium">{match.product.unit_price.toFixed(2)}</span> <span className="font-medium">{match.product.unit_price.toFixed(2)}</span>
</div> </div>
{match.product.moq > 0 && ( {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 && ( {isService && match.service && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Euro className="h-4 w-4" /> <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> </div>
)} )}
{match.distance_km > 0 && ( {match.distance_km > 0 && (
<div className="flex items-center gap-1 text-muted-foreground"> <div className="flex items-center gap-1 text-muted-foreground">
<MapPin className="h-4 w-4" /> <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>
)} )}
</div> </div>

View File

@ -4,6 +4,7 @@ import { AlertTriangle, TrendingUp } from 'lucide-react';
import { Alert, Button } from '@/components/ui'; import { Alert, Button } from '@/components/ui';
import { useSubscription } from '@/contexts/SubscriptionContext'; import { useSubscription } from '@/contexts/SubscriptionContext';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { useTranslation } from '@/hooks/useI18n';
export interface LimitWarningProps { export interface LimitWarningProps {
limitType: 'organizations' | 'users' | 'storage' | 'apiCalls'; limitType: 'organizations' | 'users' | 'storage' | 'apiCalls';
@ -25,6 +26,7 @@ export const LimitWarning = ({
}: LimitWarningProps) => { }: LimitWarningProps) => {
const { subscription, getRemainingLimit, isWithinLimits } = useSubscription(); const { subscription, getRemainingLimit, isWithinLimits } = useSubscription();
const navigate = useNavigate(); const navigate = useNavigate();
const { t } = useTranslation();
if (!subscription) return null; if (!subscription) return null;
@ -52,14 +54,14 @@ export const LimitWarning = ({
<Alert variant="error" className={clsx('mb-4', className)}> <Alert variant="error" className={clsx('mb-4', className)}>
<AlertTriangle className="h-4 w-4" /> <AlertTriangle className="h-4 w-4" />
<div className="flex-1"> <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"> <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> </p>
</div> </div>
{showUpgradeButton && ( {showUpgradeButton && (
<Button variant="primary" size="sm" onClick={() => navigate('/billing')}> <Button variant="primary" size="sm" onClick={() => navigate('/billing')}>
Upgrade Plan {t('paywall.upgradePlan')}
</Button> </Button>
)} )}
</Alert> </Alert>
@ -70,15 +72,20 @@ export const LimitWarning = ({
<Alert variant="warning" className={clsx('mb-4', className)}> <Alert variant="warning" className={clsx('mb-4', className)}>
<TrendingUp className="h-4 w-4" /> <TrendingUp className="h-4 w-4" />
<div className="flex-1"> <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"> <p className="text-sm mt-1">
You&apos;re using {current} of {limit} {label} ({Math.round(percentage)}%). {remaining}{' '} {t('paywall.approachingLimitDescription', {
remaining. current,
limit,
label,
percentage: Math.round(percentage),
remaining
})}
</p> </p>
</div> </div>
{showUpgradeButton && ( {showUpgradeButton && (
<Button variant="outline" size="sm" onClick={() => navigate('/billing')}> <Button variant="outline" size="sm" onClick={() => navigate('/billing')}>
Upgrade {t('paywall.viewPlans')}
</Button> </Button>
)} )}
</Alert> </Alert>