Merge pull request #63 from shafin-deriv/shafin/DAPI-578/chore-remove…

…-in-context-translation

[DAPI] Shafin/chore: add missing translations

i18n/en/code.json

@@ -840,5 +840,29 @@
   },
   "Update App": {
     "message": "Update App"
+  },
+  "Your token name must be atleast 2 characters long.": {
+    "message": "Your token name must be atleast 2 characters long."
+  },
+  "Only up to 32 characters are allowed.": {
+    "message": "Only up to 32 characters are allowed."
+  },
+  "Nevermind": {
+    "message": "Nevermind"
+  },
+  "OK": {
+    "message": "OK"
+  },
+  "Token created successfully!": {
+    "message": "Token created successfully!"
+  },
+  "Please save this token key. For security reasons, it can't be viewed or copied again. If you lose this key, you'll need to generate a new token.": {
+    "message": "Please save this token key. For security reasons, it can't be viewed or copied again. If you lose this key, you'll need to generate a new token."
+  },
+  "Key": {
+    "message": "Key"
+  },
+  "You've created the maximum number of tokens.": {
+    "message": "You've created the maximum number of tokens."
   }
 }

src/features/dashboard/components/ApiTokenForm/CreateTokenField/CustomErrors/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import Translate from '@docusaurus/Translate';
 
 type TCustomErrors = {
   token_name_exists: boolean;
@@ -10,14 +11,18 @@ const CustomErrors = ({ token_name_exists, tokens_limit_reached, input_value }:
   if (token_name_exists) {
     return (
       <div className='error-message'>
-        <p>That name is taken. Choose another.</p>
+        <p>
+          <Translate>That name is taken. Choose another.</Translate>
+        </p>
       </div>
     );
   }
   if (tokens_limit_reached && input_value !== '') {
     return (
       <div className='error-message'>
-        <p>You&apos;ve created the maximum number of tokens.</p>
+        <p>
+          <Translate>You&apos;ve created the maximum number of tokens.</Translate>
+        </p>
       </div>
     );
   }

src/features/dashboard/components/ApiTokenForm/api-token.form.tsx

@@ -21,8 +21,18 @@ const schema = yup
     admin: yup.boolean(),
     name: yup
       .string()
-      .min(2, 'Your token name must be atleast 2 characters long.')
-      .max(32, 'Only up to 32 characters are allowed.')
+      .min(
+        2,
+        translate({
+          message: 'Your token name must be atleast 2 characters long.',
+        }),
+      )
+      .max(
+        32,
+        translate({
+          message: 'Only up to 32 characters are allowed.',
+        }),
+      )
       .matches(/^(?=.*[a-zA-Z0-9])[a-zA-Z0-9_ ]*$/, {
         message: translate({
           message:

src/features/dashboard/components/ApiTokenTable/CopyButton/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import CopyTokenDialog from '../CopyTokenDialog';
 import styles from '../token-cell.module.scss';
-import { StandaloneCopyRegularIcon } from '@deriv/quill-icons';
 
 type TCopyButton = {
   value: string;

src/features/dashboard/components/ApiTokenTable/CopyTokenDialog/index.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback } from 'react';
 import { Modal } from '@deriv/ui';
 import { TModalActionButton } from '@deriv/ui/dist/types/src/components/core/modal/types';
 import styles from './CopyTokenDialog.module.scss';
-import Translate from '@docusaurus/Translate';
+import Translate, { translate } from '@docusaurus/Translate';
 
 type TCopyTokenDialog = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -23,15 +23,15 @@ const CopyTokenDialog = ({ setToggleModal, copyToken }: TCopyTokenDialog) => {
     () => [
       {
         id: 0,
-        text: 'Nevermind',
+        text: translate({ message: 'Nevermind' }),
         color: 'secondary',
         onClick: () => {
           setToggleModal(false);
         },
       },
       {
         id: 1,
-        text: 'OK',
+        text: translate({ message: 'OK' }),
         color: 'primary',
         onClick: () => {
           setToggleModal(false);

src/features/dashboard/components/Dialogs/TokenCreationDialogSuccess/index.tsx

@@ -3,6 +3,7 @@ import { Button, Modal } from '@deriv/ui';
 import styles from './token-creation-dialog-sucess.module.scss';
 import useApiToken from '@site/src/hooks/useApiToken';
 import CopyButton from '../../ApiTokenTable/CopyButton';
+import Translate from '@docusaurus/Translate';
 
 type ITokenCreationDialogSuccessProps = {
   setToggleModal: React.Dispatch<React.SetStateAction<boolean>>;
@@ -43,23 +44,29 @@ export const TokenCreationDialogSuccess = ({
         <div className='modal-overlay'>
           <Modal.Overlay />
           <Modal.PageContent className={styles.wrapper}>
-            <div className={styles.title}>Token created successfully!</div>
+            <div className={styles.title}>
+              <Translate>Token created successfully!</Translate>
+            </div>
             <div className={styles.modal}>
               <p>
-                Please save this token key. For security reasons, it can&apos;t be viewed or copied
-                again. If you lose this key, you&apos;ll need to generate a new token.
+                <Translate>
+                  Please save this token key. For security reasons, it can&apos;t be viewed or
+                  copied again. If you lose this key, you&apos;ll need to generate a new token.
+                </Translate>
               </p>
             </div>
             <div className={styles.textField}>
               <div>
-                <div className={styles.key}>Key</div>
+                <div className={styles.key}>
+                  <Translate>Key</Translate>
+                </div>
                 {latestToken}
               </div>
               <CopyButton value={latestToken} has_admin={false} />
             </div>
             <div className={styles.button_wrapper}>
               <Button color='primary' onClick={handleToggle} className={styles.btn}>
-                OK
+                <Translate>OK</Translate>
               </Button>
             </div>
           </Modal.PageContent>