Translate inviteMember

public/locales/en/core.json

@@ -15,6 +15,7 @@
     "edit": "edit",
     "export": "export",
     "import": "import",
+    "invite": "invite",
     "join": "join",
     "logout": "logout",
     "notify": "notify"

public/locales/en/group.json

@@ -3,6 +3,7 @@
     "create_group": "create group",
     "find_group": "find group",
     "join_group": "join group",
+    "invite_member": "invite member",
     "refetch_page": "refetch page",
     "return_to_thread": "return to threads"
   },
@@ -21,8 +22,10 @@
     "open": "open (public)",
     "type": "group type"
   },
+  "invitation_expiry": "invitation Expiry Time",
   "question": {
     "create_group": "would you like to perform an CREATE_GROUP transaction?",
+    "group_invite": "would you like to perform a GROUP_INVITE transaction?",
     "join_group": "would you like to perform an JOIN_GROUP transaction?",
     "provide_thread": "please provide a thread title"
   },
@@ -45,6 +48,7 @@
       "group_creation": "successfully created group. It may take a couple of minutes for the changes to propagate",
       "group_creation_name": "created group {{group_name}}: awaiting confirmation",
       "group_creation_label": "created group {{name}}: success!",
+      "group_invite": "successfully invited {{value}}. It may take a couple of minutes for the changes to propagate",
       "join_creation": "successfully requested to join group. It may take a couple of minutes for the changes to propagate",
       "group_join_name": "joined group {{group_name}}: awaiting confirmation",
       "group_join_label": "joined group {{name}}: success!",

src/components/Group/InviteMember.tsx

@@ -4,16 +4,21 @@ import { useState } from 'react';
 import { Spacer } from '../../common/Spacer';
 import { Label } from './AddGroup';
 import { getFee } from '../../background';
+import { useTranslation } from 'react-i18next';
 
 export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
   const [value, setValue] = useState('');
   const [expiryTime, setExpiryTime] = useState<string>('259200');
   const [isLoadingInvite, setIsLoadingInvite] = useState(false);
+  const { t } = useTranslation(['core', 'group']);
+
   const inviteMember = async () => {
     try {
       const fee = await getFee('GROUP_INVITE');
       await show({
-        message: 'Would you like to perform a GROUP_INVITE transaction?',
+        message: t('group:question.group_invite', {
+          postProcess: 'capitalize',
+        }),
         publishFee: fee.fee + ' QORT',
       });
       setIsLoadingInvite(true);
@@ -27,10 +32,12 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
           })
           .then((response) => {
             if (!response?.error) {
-              // TODO translate
               setInfoSnack({
                 type: 'success',
-                message: `Successfully invited ${value}. It may take a couple of minutes for the changes to propagate`,
+                message: t('group:message.success.group_invite', {
+                  value: value,
+                  postProcess: 'capitalize',
+                }),
               });
               setOpenSnack(true);
               res(response);
@@ -72,7 +79,7 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
         flexDirection: 'column',
       }}
     >
-      Invite member
+      {t('group:action.invite_member', { postProcess: 'capitalize' })}
       <Spacer height="20px" />
       <Input
         value={value}
@@ -80,24 +87,26 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
         onChange={(e) => setValue(e.target.value)}
       />
       <Spacer height="20px" />
-      <Label>Invitation Expiry Time</Label>
+      <Label>
+        {t('group:invitation_expiry', { postProcess: 'capitalize' })}
+      </Label>
       <Select
         labelId="demo-simple-select-label"
         id="demo-simple-select"
         value={expiryTime}
-        label="Invitation Expiry Time"
+        label={t('group:invitation_expiry', { postProcess: 'capitalize' })}
         onChange={handleChange}
       >
-        <MenuItem value={10800}>3 hours</MenuItem>
+        <MenuItem value={10800}>{t('core.time.hour', { count: 3 })}</MenuItem>
-        <MenuItem value={21600}>6 hours</MenuItem>
+        <MenuItem value={21600}>{t('core.time.hour', { count: 6 })}</MenuItem>
-        <MenuItem value={43200}>12 hours</MenuItem>
+        <MenuItem value={43200}>{t('core.time.hour', { count: 12 })}</MenuItem>
-        <MenuItem value={86400}>1 day</MenuItem>
+        <MenuItem value={86400}>{t('core.time.day', { count: 1 })}</MenuItem>
-        <MenuItem value={259200}>3 days</MenuItem>
+        <MenuItem value={259200}>{t('core.time.day', { count: 3 })}</MenuItem>
-        <MenuItem value={432000}>5 days</MenuItem>
+        <MenuItem value={432000}>{t('core.time.day', { count: 5 })}</MenuItem>
-        <MenuItem value={604800}>7 days</MenuItem>
+        <MenuItem value={604800}>{t('core.time.day', { count: 7 })}</MenuItem>
-        <MenuItem value={864000}>10 days</MenuItem>
+        <MenuItem value={864000}>{t('core.time.day', { count: 10 })}</MenuItem>
-        <MenuItem value={1296000}>15 days</MenuItem>
+        <MenuItem value={1296000}>{t('core.time.day', { count: 15 })}</MenuItem>
-        <MenuItem value={2592000}>30 days</MenuItem>
+        <MenuItem value={2592000}>{t('core.time.day', { count: 30 })}</MenuItem>
       </Select>
       <Spacer height="20px" />
       <LoadingButton
@@ -106,7 +115,7 @@ export const InviteMember = ({ groupId, setInfoSnack, setOpenSnack, show }) => {
         loading={isLoadingInvite}
         onClick={inviteMember}
       >
-        Invite
+        {t('core:action.invite', { postProcess: 'capitalize' })}
       </LoadingButton>
     </Box>
   );