Add proper localizations to CharacterConflictModal

components/CharacterConflictModal/index.tsx

@@ -1,14 +1,10 @@
 import React, { useEffect, useState } from 'react'
-import { setCookie } from 'cookies-next'
+import { useRouter } from 'next/router'
-import Router, { useRouter } from 'next/router'
+import { Trans, useTranslation } from 'react-i18next'
-import { useTranslation } from 'react-i18next'
-import { AxiosResponse } from 'axios'
 
 import * as Dialog from '@radix-ui/react-dialog'
 
-import api from '~utils/api'
 import { appState } from '~utils/appState'
-import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
 
@@ -24,7 +20,11 @@ interface Props {
 }
 
 const CharacterConflictModal = (props: Props) => {
+  // Localization
+  const router = useRouter()
   const { t } = useTranslation('common')
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
   // States
   const [open, setOpen] = useState(false)
@@ -75,18 +75,17 @@ const CharacterConflictModal = (props: Props) => {
           onOpenAutoFocus={(event) => event.preventDefault()}
         >
           <p>
-            Only one version of a character can be included in each party. Do
+            <Trans i18nKey="modals.conflict.character"></Trans>
-            you want to change your party members?
           </p>
           <div className="CharacterDiagram Diagram">
             <ul>
               {props.conflictingCharacters?.map((character, i) => (
                 <li className="character" key={`conflict-${i}`}>
                   <img
-                    alt={character.object.name.en}
+                    alt={character.object.name[locale]}
                     src={imageUrl(character.object, character.uncap_level)}
                   />
-                  <span>{character.object.name.en}</span>
+                  <span>{character.object.name[locale]}</span>
                 </li>
               ))}
             </ul>
@@ -102,8 +101,11 @@ const CharacterConflictModal = (props: Props) => {
             </div>
           </div>
           <footer>
-            <Button onClick={close} text="Nevermind" />
+            <Button onClick={close} text={t('buttons.cancel')} />
-            <Button onClick={props.resolveConflict} text="Confirm" />
+            <Button
+              onClick={props.resolveConflict}
+              text={t('modals.conflict.buttons.confirm')}
+            />
           </footer>
         </Dialog.Content>
         <Dialog.Overlay className="Overlay" />