mirror of
https://github.com/SamyRai/turash.git
synced 2025-12-26 23:01:33 +00:00
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:
parent
18cdcb12fd
commit
ac92faef33
@ -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>
|
||||||
|
|||||||
@ -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'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,16 +72,21 @@ 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'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>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user