- Payment Request
+ {t('requester.paymentRequest')}
{/* Language Selector */}
@@ -86,7 +81,7 @@ export const RequesterDetails: React.FC = ({
>
- {selectedLanguage}
+ {currentLangName}
= ({
{
- setSelectedLanguage(lang.name);
+ setLanguage(lang.code);
setShowLanguageMenu(false);
- // Here you would typically update the app language
- // For now, we'll just update the selected language
}}
className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition-colors ${
- selectedLanguage === lang.name
+ currentLanguage === lang.code
? "bg-primary-50 text-primary-600 font-medium"
: "text-gray-700"
}`}
@@ -132,7 +125,7 @@ export const RequesterDetails: React.FC = ({
className="flex items-center gap-2 px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg transition-colors border border-red-200"
>
- Report
+ {t('common.report')}
)}
@@ -159,7 +152,7 @@ export const RequesterDetails: React.FC
= ({
- Requesting
+ {t('requester.requesting')}
{formatCurrency(requester.requestAmount)}
@@ -184,10 +177,10 @@ export const RequesterDetails: React.FC = ({
- Choose recipient account
+ {t('requester.chooseRecipient')}
- Select which account to send the money to
+ {t('requester.chooseRecipientDesc')}
@@ -237,10 +230,10 @@ export const RequesterDetails: React.FC
= ({
- Recipient Account
+ {t('requester.recipientAccount')}
- Money will be sent to this account
+ {t('requester.recipientAccountDesc')}
@@ -292,7 +285,7 @@ export const RequesterDetails: React.FC
= ({
}}
className="w-full bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition-colors"
>
- Next Step
+ {t('common.next')}
)}
@@ -303,7 +296,7 @@ export const RequesterDetails: React.FC = ({
- Report User
+ {t('requester.reportUser')}
{
@@ -318,7 +311,7 @@ export const RequesterDetails: React.FC = ({
- Why are you reporting{" "}
+ {t('requester.reportReason')}{" "}
{requester.name} ?
@@ -332,7 +325,7 @@ export const RequesterDetails: React.FC = ({
className="w-4 h-4 text-primary-600"
/>
- Spam or suspicious activity
+ {t('requester.spam')}
@@ -345,7 +338,7 @@ export const RequesterDetails: React.FC = ({
className="w-4 h-4 text-primary-600"
/>
- I don't know this person
+ {t('requester.unknown')}
@@ -357,7 +350,7 @@ export const RequesterDetails: React.FC = ({
onChange={(e) => setFlagReason(e.target.value)}
className="w-4 h-4 text-primary-600"
/>
- Other
+ {t('requester.other')}
@@ -374,7 +367,7 @@ export const RequesterDetails: React.FC = ({
disabled={!flagReason}
className="flex-1 bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
>
- Report
+ {t('common.report')}
{
@@ -383,7 +376,7 @@ export const RequesterDetails: React.FC = ({
}}
className="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors"
>
- Cancel
+ {t('common.cancel')}
diff --git a/src/components/checkout/SuccessPage.tsx b/src/components/checkout/SuccessPage.tsx
index 477c43f..cc9446a 100644
--- a/src/components/checkout/SuccessPage.tsx
+++ b/src/components/checkout/SuccessPage.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from '../ui/Card';
import { Logo } from '../ui/Logo';
+import { useLanguage } from '../../contexts/LanguageContext';
import { FiCheckCircle, FiMail, FiSmartphone, FiDownload } from 'react-icons/fi';
interface SuccessPageProps {
@@ -17,6 +18,7 @@ export const SuccessPage: React.FC = ({
}) => {
const [emailSent, setEmailSent] = useState(false);
const navigate = useNavigate();
+ const { t } = useLanguage();
const formatCurrency = (amount: number) => {
return new Intl.NumberFormat('en-US', {
@@ -53,21 +55,21 @@ export const SuccessPage: React.FC = ({
- Payment Successful!
+ {t('success.title')}
- Your payment of {formatCurrency(amount)} has been processed successfully.
+ {t('success.message').replace('{amount}', formatCurrency(amount))}
- Transaction ID: {transactionId}
+ {t('success.transactionId')}: {transactionId}
{/* Download App Section */}
- Download the Amba App
+ {t('success.downloadApp')}
- Get the Amba app to manage your payments and transactions on the go.
+ {t('success.downloadDesc')}
{/* Download Buttons */}
@@ -78,8 +80,8 @@ export const SuccessPage: React.FC
= ({
>
-
Download on the
-
App Store
+
{t('success.downloadAppStore')}
+
{t('success.appStore')}
= ({
>
-
Get it on
-
Google Play
+
{t('success.downloadGooglePlay')}
+
{t('success.googlePlay')}
@@ -100,7 +102,7 @@ export const SuccessPage: React.FC = ({
-
Send download link via email
+
{t('success.sendEmail')}
{email}
@@ -109,12 +111,12 @@ export const SuccessPage: React.FC = ({
disabled={emailSent}
className="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
>
- {emailSent ? 'Sent!' : 'Send Link'}
+ {emailSent ? t('success.sent') : t('success.sendLink')}
- Download link has been sent to your email!
+ {t('success.emailSent')}