feat: complete PhoneNumbersContent translations for all languages #69

shopcall.ai-main/src/components/PhoneNumbersContent.tsx

@@ -335,14 +335,14 @@ export function PhoneNumbersContent() {
                     </div>
                     <Button className="bg-slate-600 text-slate-400 cursor-not-allowed" disabled>
                       <Link className="w-4 h-4 mr-2" />
-                      Connect
+                      {t('phoneNumbers.byoc.connect')}
                     </Button>
                   </div>
                 </CardHeader>
                 <CardContent>
                   <div className="space-y-3">
                     <div className="space-y-2">
-                      <h5 className="text-sm font-medium text-white">Features</h5>
+                      <h5 className="text-sm font-medium text-white">{t('phoneNumbers.byoc.features')}</h5>
                       <ul className="space-y-1">
                         {carrier.features.map((feature, idx) => (
                           <li key={idx} className="flex items-center gap-2">
@@ -353,7 +353,7 @@ export function PhoneNumbersContent() {
                       </ul>
                     </div>
                     <div className="space-y-2">
-                      <h5 className="text-sm font-medium text-white">Required Fields</h5>
+                      <h5 className="text-sm font-medium text-white">{t('phoneNumbers.byoc.requiredFields')}</h5>
                       <div className="text-xs text-slate-400">
                         {carrier.setupFields.join(", ")}
                       </div>
@@ -367,8 +367,8 @@ export function PhoneNumbersContent() {
 
         <div className="space-y-4 opacity-60">
           <div className="flex items-center justify-between">
-            <h3 className="text-xl font-semibold text-white">Available Countries</h3>
-            <Badge variant="outline" className="text-slate-400 border-slate-600">Coming Soon</Badge>
+            <h3 className="text-xl font-semibold text-white">{t('phoneNumbers.availableCountries.title')}</h3>
+            <Badge variant="outline" className="text-slate-400 border-slate-600">{t('phoneNumbers.byoc.comingSoon')}</Badge>
           </div>
           <div className="grid gap-6 md:grid-cols-2">
             {availableCountries.map((country, index) => (
@@ -379,11 +379,11 @@ export function PhoneNumbersContent() {
                       <span className="text-2xl">{country.flag}</span>
                       <div>
                         <CardTitle className="text-white">{country.name}</CardTitle>
-                        <p className="text-slate-400 text-sm">Setup: {country.pricing.setup} • Monthly: {country.pricing.monthly}</p>
+                        <p className="text-slate-400 text-sm">{t('phoneNumbers.availableCountries.setup')}: {country.pricing.setup} • {t('phoneNumbers.availableCountries.monthly')}: {country.pricing.monthly}</p>
                       </div>
                     </div>
                     <Button className="bg-slate-600 text-slate-400 cursor-not-allowed" disabled>
-                      Get Number
+                      {t('phoneNumbers.availableCountries.getNumber')}
                     </Button>
                   </div>
                 </CardHeader>
@@ -396,13 +396,13 @@ export function PhoneNumbersContent() {
                         <CheckCircle className="w-4 h-4 text-green-500" />
                       )}
                       <span className="text-sm text-slate-300">
-                        {country.kycRequired ? "KYC verification required" : "No verification needed"}
+                        {country.kycRequired ? t('phoneNumbers.availableCountries.kycRequired') : t('phoneNumbers.availableCountries.noVerification')}
                       </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Clock className="w-4 h-4 text-blue-500" />
                       <span className="text-sm text-slate-300">
-                        Activation: {country.availability}
+                        {t('phoneNumbers.availableCountries.activation')}: {country.availability}
                       </span>
                     </div>
                   </div>
@@ -416,7 +416,7 @@ export function PhoneNumbersContent() {
           <CardHeader>
             <div className="flex items-center gap-3">
               <PhoneCall className="w-6 h-6 text-cyan-500" />
-              <CardTitle className="text-white">Phone Number Setup Guide</CardTitle>
+              <CardTitle className="text-white">{t('phoneNumbers.setupGuide.title')}</CardTitle>
             </div>
           </CardHeader>
           <CardContent className="space-y-4">
@@ -424,29 +424,29 @@ export function PhoneNumbersContent() {
               <div className="flex gap-4">
                 <div className="flex-shrink-0 w-8 h-8 bg-cyan-500 text-white rounded-full flex items-center justify-center font-semibold">1</div>
                 <div>
-                  <h4 className="text-white font-medium">Choose your setup method</h4>
-                  <p className="text-slate-400">Use our managed numbers or bring your own carrier (Twilio, Telnyx, etc.)</p>
+                  <h4 className="text-white font-medium">{t('phoneNumbers.setupGuide.step1.title')}</h4>
+                  <p className="text-slate-400">{t('phoneNumbers.setupGuide.step1.description')}</p>
                 </div>
               </div>
               <div className="flex gap-4">
                 <div className="flex-shrink-0 w-8 h-8 bg-cyan-500 text-white rounded-full flex items-center justify-center font-semibold">2</div>
                 <div>
-                  <h4 className="text-white font-medium">Complete verification (if required)</h4>
-                  <p className="text-slate-400">Some countries require KYC verification. Upload required documents for approval.</p>
+                  <h4 className="text-white font-medium">{t('phoneNumbers.setupGuide.step2.title')}</h4>
+                  <p className="text-slate-400">{t('phoneNumbers.setupGuide.step2.description')}</p>
                 </div>
               </div>
               <div className="flex gap-4">
                 <div className="flex-shrink-0 w-8 h-8 bg-cyan-500 text-white rounded-full flex items-center justify-center font-semibold">3</div>
                 <div>
-                  <h4 className="text-white font-medium">Assign to webshop</h4>
-                  <p className="text-slate-400">Connect the phone number to your webshop. Each webshop needs its own dedicated number.</p>
+                  <h4 className="text-white font-medium">{t('phoneNumbers.setupGuide.step3.title')}</h4>
+                  <p className="text-slate-400">{t('phoneNumbers.setupGuide.step3.description')}</p>
                 </div>
               </div>
               <div className="flex gap-4">
                 <div className="flex-shrink-0 w-8 h-8 bg-cyan-500 text-white rounded-full flex items-center justify-center font-semibold">4</div>
                 <div>
-                  <h4 className="text-white font-medium">Start receiving calls</h4>
-                  <p className="text-slate-400">Your AI assistant will automatically handle customer calls on the assigned number.</p>
+                  <h4 className="text-white font-medium">{t('phoneNumbers.setupGuide.step4.title')}</h4>
+                  <p className="text-slate-400">{t('phoneNumbers.setupGuide.step4.description')}</p>
                 </div>
               </div>
             </div>
@@ -454,12 +454,12 @@ export function PhoneNumbersContent() {
               <div className="flex items-start gap-3">
                 <Shield className="w-5 h-5 text-blue-500 mt-0.5" />
                 <div>
-                  <h5 className="text-blue-500 font-medium">Carrier Integration Benefits</h5>
+                  <h5 className="text-blue-500 font-medium">{t('phoneNumbers.setupGuide.carrierBenefits.title')}</h5>
                   <ul className="text-slate-300 text-sm mt-2 space-y-1">
-                    <li>• Use your existing phone numbers and carrier relationship</li>
-                    <li>• Keep your current pricing and billing setup</li>
-                    <li>• Leverage carrier-specific features and coverage</li>
-                    <li>• Maintain compliance with your carrier's terms</li>
+                    <li>• {t('phoneNumbers.setupGuide.carrierBenefits.benefit1')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.carrierBenefits.benefit2')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.carrierBenefits.benefit3')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.carrierBenefits.benefit4')}</li>
                   </ul>
                 </div>
               </div>
@@ -468,13 +468,13 @@ export function PhoneNumbersContent() {
               <div className="flex items-start gap-3">
                 <AlertTriangle className="w-5 h-5 text-yellow-500 mt-0.5" />
                 <div>
-                  <h5 className="text-yellow-500 font-medium">Important Notes</h5>
+                  <h5 className="text-yellow-500 font-medium">{t('phoneNumbers.setupGuide.importantNotes.title')}</h5>
                   <ul className="text-slate-300 text-sm mt-2 space-y-1">
-                    <li>• Each webshop requires a separate phone number</li>
-                    <li>• Free numbers are auto-assigned during onboarding</li>
-                    <li>• Premium numbers offer better call quality and additional features</li>
-                    <li>• KYC verification may take 1-3 business days</li>
-                    <li>• Carrier integrations require valid API credentials</li>
+                    <li>• {t('phoneNumbers.setupGuide.importantNotes.note1')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.importantNotes.note2')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.importantNotes.note3')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.importantNotes.note4')}</li>
+                    <li>• {t('phoneNumbers.setupGuide.importantNotes.note5')}</li>
                   </ul>
                 </div>
               </div>