translate qrcode page

WBG-Coach · Jan 16, 2024 · 8e6498d · 8e6498d
1 parent 9219485
commit 8e6498d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -286,6 +286,17 @@ const enTranslation = {
       },
     },
   },
+  qrcode: {
+    title: 'Getting started with the app',
+    step1: 'Step 1',
+    step1description: 'Open the app',
+    step2: 'Step 2',
+    step2description: 'Scan the QR Code',
+    step3: 'Step 3',
+    step3description: 'Select school, profile and start coaching',
+    print: 'Print this page',
+    close: 'Close',
+  },
 };
 
 export default enTranslation;
diff --git a/src/i18n/langs/np.ts b/src/i18n/langs/np.ts
@@ -281,6 +281,17 @@ const npTranslation = {
       },
     },
   },
+  qrcode: {
+    title: 'अनुप्रयोगसँग सुरु गर्नुहोस्',
+    step1: 'चरण १',
+    step1description: 'अनुप्रयोग खोल्नुहोस्',
+    step2: 'चरण २',
+    step2description: 'क्यूआर कोड स्क्यान गर्नुहोस्',
+    step3: 'चरण ३',
+    step3description: 'विद्यालय, प्रोफाइल चयन गर्नुहोस् र कोचिंग सुरु गर्नुहोस्',
+    print: 'यो पृष्ठ प्रिन्ट गर्नुहोस्',
+    close: 'बन्द गर्नुहोस्',
+  },
 };
 
 export default npTranslation;
diff --git a/src/pages/Schools/SchoolList/QRCodeModal/index.tsx b/src/pages/Schools/SchoolList/QRCodeModal/index.tsx
@@ -16,6 +16,7 @@ import QRCode from 'qrcode.react';
 import React from 'react';
 import { Props } from './types';
 import { QROpenApp, QRScan, QRSelectSchool } from '@/assets/images/qrcode';
+import { useTranslation } from 'react-i18next';
 
 const QRSteps = [
   {
@@ -33,6 +34,8 @@ const QRSteps = [
 ];
 
 const QRCodeModal: React.FC<Props> = ({ handleClose, school, schoolKey }) => {
+  const { t } = useTranslation();
+
   return (
     <Modal isOpen={!!school} onClose={handleClose} size={'full'}>
       <ModalOverlay />
@@ -42,18 +45,18 @@ const QRCodeModal: React.FC<Props> = ({ handleClose, school, schoolKey }) => {
             {school && schoolKey ? (
               <VStack>
                 <Text fontSize={'24px'} mb={'18px'} fontWeight={600}>
-                  Getting started with the app
+                  {t('qrcode.title')}
                 </Text>
 
                 <HStack spacing={'24px'} alignItems={'flex-start'} mb={'64px'}>
                   {QRSteps.map((step, index) => (
                     <VStack spacing={0} key={index} maxW={'180px'}>
                       <Image src={step.src} alt={step.description} />
                       <Text fontSize={'TMD'} mt={'8px'} fontWeight={700}>
-                        Step {index + 1}
+                        {t(`qrcode.step${index + 1}`)}
                       </Text>
                       <Text textAlign={'center'} fontSize={'TSM'} mt={'4px'} fontWeight={400}>
-                        {step.description}
+                        {t(`qrcode.step${index + 1}description`)}
                       </Text>
                     </VStack>
                   ))}
@@ -78,10 +81,10 @@ const QRCodeModal: React.FC<Props> = ({ handleClose, school, schoolKey }) => {
             <Center flex={1}>
               <HStack>
                 <Button variant={'outline'} colorScheme="blue" w="3xs" onClick={window.print}>
-                  Print this page
+                  {t('qrcode.print')}
                 </Button>
                 <Button colorScheme="blue" w="3xs" onClick={handleClose}>
-                  Close
+                  {t('qrcode.close')}
                 </Button>
               </HStack>
             </Center>