Languages

frontend/next.config.js

@@ -1,7 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    reactStrictMode: false,
-    swcMinify: true,
+    reactStrictMode: true,
+    i18n: {
+        // These are all the locales you want to support in
+        // your application
+        locales: ["en", "pt"],
+        // This is the default locale you want to be used when visiting
+        // a non-locale prefixed path e.g. `/hello`
+        defaultLocale: "en",
+    },
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;

frontend/package.json

@@ -30,10 +30,13 @@
         "classnames": "^2.3.2",
         "emailjs-com": "^3.2.0",
         "headlessui": "^0.0.0",
-        "install": "^0.13.0",
+        "i18next": "^22.0.6",
         "next": "12.3.1",
+        "next-i18next": "^13.0.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-i18next": "^12.0.0",
+        "react-intl": "^6.2.1",
         "uuid": "^9.0.0",
         "zustand": "^4.1.3"
     },

frontend/public/locales/en/common.json

@@ -0,0 +1,60 @@
+{
+  "page.home.head.title": "Exemplo ing",
+  "coisa" : "Login",
+  "loginCard.register": "Register",
+  "loginCard.ForgetPassword": "Forget my password",
+  "loginCard.EnterMail": "Enter a email to regain access to the account.",
+  "loginCard.SendMail": "Send email",
+  "loginCard.Message": "Enter the code that was sent to your email.",
+  "loginCard.Code": "Code",
+  "loginCard.CheckCode": "Check Code",
+  "loginCard.error.min4car": "The password is not valid!",
+  "loginCard.errorpassword": "The password is wrong!",
+  "loginCard.Required":"Required field!",
+  "loginCard.error.mail":"The email is not valid!",
+  "loginCard.error.name":"The username is not valid!",
+  "loginCard.error.nif":"The NIF is not valid!",
+  "loginCard.error.mobile":"The mobile number is not valid!",
+  "loginCard.error.cc":"The ID Card number is not valid!",
+  "loginCard.usernane":"Username",
+  "loginCard.password":"Password",
+  "loginCard.mail":"Email",
+  "loginCard.nif":"NIF",
+  "loginCard.phone":"Mobile Number",
+  "loginCard.cc":"ID Card Number",
+  "loginCard.login":"Create a new account? Register now!",
+  "loginCard.button.login":"Login",
+  "navbar.sports":"Sport",
+  "navbar.promotion":"Promotions",
+  "navbar.bets":"My Bets",
+  "competitions.top.competitions":"Top competitions",
+  "better/bets.final.result":"Final score: ",
+  "better/bets.Open":"Open",
+  "better/bets.Closed":"Ended",
+  "better/bets.Cancel":"Cancel",
+  "OnGoingBetRecord.Cancel":"Cancel",
+  "OnGoingBetRecord.Date":"Date",
+  "OnGoingBetRecord.Odds":"Odd",
+  "OnGoingBetRecord.Stake":"Total stake",
+  "OnGoingBetRecord.Possible.Winnings":"Potential winnings",
+  "BetRecord.winnings":"Winnings",
+  "BettingSlip.mybet":"MY BET",
+  "BettingSlip.singles":"Singles",
+  "BettingSlip.multiples":"Multiples",
+  "BettingSlipInfo.Bet.now":"Bet now",
+  "createBetter.AlreadyRegistered":"Already registered? Login here.",
+  "MultipleBetBettingSlipInfo.Stake":"Stake",
+  "Main.Draw":"Draw",
+  "MoneyOperation.Deposit":"Deposit",
+  "MoneyOperation.Withdraw":"Withdraw",
+  "MoneyOperation.WinningBet":"Winning Bet",
+  "MoneyOperation.LostBet":"Lost Bet",
+  "MoneyOperation.Operation":"Operation",
+  "MoneyOperation.Balance":"Balance after transaction",
+  "Navbar.finishTransfer":"Transfer successfully completed!",
+  "Navbar.finishDeposit":"Select the payment method",
+  "Navbar.finishWithdraw":"Select the cash withdrawal method",
+  "Navbar.finishMontante":"Amount",
+  "Navbar.finishMoney":"Check the amount"
+
+}

frontend/public/locales/pt/common.json

@@ -0,0 +1,61 @@
+{
+
+  "page.home.head.title": "Exemplo pt",
+  "coisa" : "Aceder",
+  "loginCard.register": "Registar",
+  "loginCard.ForgetPassword": "Esqueci-me da palavra-passe",
+  "loginCard.EnterMail": "Introduza um email para recuperar o acesso à conta.",
+  "loginCard.SendMail": "Enviar email",
+  "loginCard.Message": "Introduza o código que foi enviado para o seu email.",
+  "loginCard.Code": "Código",
+  "loginCard.CheckCode": "Verificar Código",
+  "loginCard.error.min4car": "A palavra-passe não é válida!",
+  "loginCard.errorpassword": "A palavra-passe está incorreta!",
+  "loginCard.Required":"Campo obrigatório!",
+  "loginCard.error.mail":"O email não é válido!",
+  "loginCard.error.name":"O username não é válido!",
+  "loginCard.error.nif":"O NIF não é válido!",
+  "loginCard.error.mobile":"O número de telefone não é válido!",
+  "loginCard.error.cc":"O CC não é válido!",
+  "loginCard.usernane":"Nome de utilizador",
+  "loginCard.password":"Palavra-passe",
+  "loginCard.mail":"Email",
+  "loginCard.nif":"NIF",
+  "loginCard.phone":"Número de telemóvel",
+  "loginCard.cc":"Número de Cartão de Cidadão",
+  "loginCard.login":"Não tem conta? Registe-se agora!",
+  "loginCard.button.login":"Aceder",
+  "navbar.sports":"Desporto",
+  "navbar.promotion":"Promoções",
+  "navbar.bets":"Apostas",
+  "competitions.top.competitions":"Top competições",
+  "better/bets.final.result":"Resultado Final: ",
+  "better/bets.Open":"Abertas",
+  "better/bets.Closed":"Encerradas",
+  "OnGoingBetRecord.Cancel":"Cancelar",
+  "OnGoingBetRecord.Date":"Data",
+  "OnGoingBetRecord.Odds":"Cota",
+  "OnGoingBetRecord.Stake":"Valor Apostado",
+  "OnGoingBetRecord.Possible.Winnings":"Potenciais Ganhos",
+  "BetRecord.winnings":"Ganhos",
+  "BettingSlip.mybet":"BOLETIM",
+  "BettingSlip.singles":"Simples",
+  "BettingSlip.multiples":"Múltiplas",
+  "BettingSlipInfo.Bet.now":"Apostar",
+  "createBetter.AlreadyRegistered":"Já estás registado? Inicie Sessão aqui.",
+  "MultipleBetBettingSlipInfo.Stake":"Montante",
+  "Main.Draw":"Empate",
+  "MoneyOperation.Deposit":"Depósito",
+  "MoneyOperation.Withdraw":"Levantamento",
+  "MoneyOperation.WinningBet":"Aposta Ganha",
+  "MoneyOperation.LostBet":"Aposta Perdida",
+  "MoneyOperation.Operation":"Operação",
+  "MoneyOperation.Balance":"Saldo após movimento",
+  "Navbar.finishTransfer":"Transferência efetuada com sucesso!",
+  "Navbar.finishDeposit":"Selecione o método de pagamento",
+  "Navbar.finishWithdraw":"Selecione o método de levantamento",
+  "Navbar.finishMontante":"Montante",
+  "Navbar.finishMoney":"Confirmar o montante"
+
+
+}

frontend/src/components/BetRecord/index.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import {SportsSoccer} from '@mui/icons-material';
 
+import {useRouter} from 'next/router';
+import {FormattedMessage, useIntl} from 'react-intl';
+
 export interface BetRecordProps {
     eventName: string;
     eventDate: string;
@@ -21,6 +24,12 @@ export const BetRecord = ({
     betAmount,
     betWinnings,
 }: BetRecordProps) => {
+    const intl = useIntl();
+    const featureDate = intl.formatMessage({id: 'OnGoingBetRecord.Date'});
+    const featureOdds = intl.formatMessage({id: 'OnGoingBetRecord.Odds'});
+    const featureStake = intl.formatMessage({id: 'OnGoingBetRecord.Stake'});
+    const featureWin = intl.formatMessage({id: 'BetRecord.winnings'});
+
     // FIXME: Hardcoded text in this component
     return (
         <div className="flex flex-row justify-between items-center px-4 gap-8 bg-WHITE rounded">
@@ -34,20 +43,20 @@ export const BetRecord = ({
                 </div>
             </div>
             <div className="flex flex-col items-start p-0 gap-2">
-                <span className="text-LIGHT_GRAY text-sm">{'Data'}</span>
+                <span className="text-LIGHT_GRAY text-sm">{featureDate}</span>
                 <span className="text-EERIE_BLACK text-base">{eventDate}</span>
             </div>
 
             <div className="flex flex-col items-start p-0 gap-2">
-                <span className="text-LIGHT_GRAY text-sm">{'Cota'}</span>
+                <span className="text-LIGHT_GRAY text-sm">{featureOdds}</span>
                 <span className="text-SPECIAL text-base font-semibold">
                     {betOdd}
                 </span>
             </div>
 
             <div className="flex flex-col items-start p-0 gap-2">
                 <span className="text-LIGHT_GRAY text-sm">
-                    {'Valor apostado'}
+                    {featureStake}
                 </span>
                 <span className="text-EERIE_BLACK text-base font-semibold">
                     {betAmount} €{' '}
@@ -57,7 +66,7 @@ export const BetRecord = ({
 
             {betWinnings > 0 && (
                 <div className="h-full flex flex-col items-start w-20 p-4 gap-2 bg-RIGHT_GREEN text-WHITE">
-                    <span className="text-xs">{'Ganhos'}</span>
+                    <span className="text-xs">{featureWin}</span>
                     <span className="text-base font-semibold">
                         {betWinnings} €
                         {/* FIXME: Money currency is hardcoded and can vary */}
@@ -66,7 +75,7 @@ export const BetRecord = ({
             )}
             {betWinnings === 0 && (
                 <div className="flex flex-col items-start w-20 p-4 gap-2 bg-IMPERIAL_RED text-WHITE">
-                    <span className="text-xs">{'Ganhos'}</span>
+                    <span className="text-xs">{featureWin}</span>
                     <span className="text-base">
                         {betWinnings} €
                         {/* FIXME: Money currency is hardcoded and can vary */}

frontend/src/components/BettingSlip/index.tsx

@@ -6,16 +6,23 @@ import {Tabs} from '@components/Tabs';
 import {SimpleBetCard} from '@components/SimpleBetCard';
 import {SimpleBetBettingSlipInfo} from '@components/SimpleBetBettingSlipInfo';
 
-const TABS = [
-    {
-        name: 'Simples',
-    },
-    {
-        name: 'Múltipla',
-    },
-];
+import {useRouter} from 'next/router';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 export const BettingSlip = () => {
+    const intl = useIntl();
+    const featureMybet = intl.formatMessage({id: 'BettingSlip.mybet'});
+    const featureSingle = intl.formatMessage({id: 'BettingSlip.singles'});
+    const featureMultiple = intl.formatMessage({id: 'BettingSlip.multiples'});
+
+    const TABS = [
+        {
+            name: featureSingle,
+        },
+        {
+            name: featureMultiple,
+        },
+    ];
     const {
         currency,
         bettingAmount,
@@ -35,7 +42,7 @@ export const BettingSlip = () => {
     return (
         <div className="w-full flex flex-col items-start p-0 gap-1 bg-WHITE rounded">
             <div className="w-full flex flex-col items-start p-4 gap-2 bg-WHITE shadow rounded-t">
-                {'BOLETIM' /* FIXME Text hardcoded for now!! */}
+                {featureMybet}
                 <Tabs
                     tabs={TABS}
                     selectedTabIndex={betType}

frontend/src/components/Competitions/index.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import {CompetitionCard, CompetitionProps} from '@components/CompetitionCard';
 
+import {useRouter} from 'next/router';
+import {FormattedMessage, useIntl} from 'react-intl';
+
 export interface CompetitionsProps {
     competitions: CompetitionProps[];
 }
 
 export const Competitions = ({competitions}: CompetitionsProps) => {
+    const intl = useIntl();
+    const featureTopComp = intl.formatMessage({id: 'competitions.top.competitions'});
     return (
         <div className="flex flex-col items-start w-full p-0 rounded">
             <div className="p-2.5 bg-WHITE w-full rounded">
-                {'TOP COMPETITIONS' /* FIXME: Hardcoded for now!! */}
+                {featureTopComp /* FIXME: Hardcoded for now!! */}
             </div>
             <div className="w-full flex flex-col items-center p-0 gap-0.5">
                 {competitions.map((props) => (

frontend/src/components/LoginCard/LoginBody.tsx

@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {HandleChangeProps, InputForm} from '@components/createBetter/inputForm';
 import {REGEX_MAIL} from '../../utils/regex';
 import {PrimaryButton} from '@components/Button';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 // Receives a function that opens the Modal of "ForgetPassword"
 export interface LoginBodyProps {
@@ -28,6 +29,18 @@ const initialErrors = {
 export const LoginBody = ({setOpen}: LoginBodyProps) => {
     const [values, setValues] = useState<ValuesProps>(initialValues);
     const [errors, setErrors] = useState<ErrorsProps>(initialErrors);
+    const intl = useIntl();
+
+    const featureRequired = intl.formatMessage({id: 'loginCard.Required'});
+    const errorMail = intl.formatMessage({id: 'loginCard.error.mail'});
+    const errorPassword = intl.formatMessage({id: 'loginCard.errorpassword'});
+    const featureMail = intl.formatMessage({id: 'loginCard.mail'});
+    const featurePassword = intl.formatMessage({id: 'loginCard.password'});
+    const featureLogin = intl.formatMessage({id: 'coisa'});
+    const featureButtonLogin = intl.formatMessage({id: 'loginCard.button.login'});
+    const featureCreate = intl.formatMessage({id: 'loginCard.login'});
+    const featureForgetPass = intl.formatMessage({id: 'loginCard.ForgetPassword'});
+
 
     //form submission handler
     const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
@@ -49,15 +62,15 @@ export const LoginBody = ({setOpen}: LoginBodyProps) => {
         };
 
         if (!values.mail) {
-            errors.mail = 'Obrigatório';
+            errors.mail = featureRequired;
         } else if (!REGEX_MAIL.test(values.mail)) {
-            errors.mail = 'Mail incorreto';
+            errors.mail = errorMail;
         }
 
         if (!values.password) {
-            errors.password = 'Obrigatório';
+            errors.password = featureRequired;
         } else if (values.password.length < 4) {
-            errors.password = 'Password tem de ter mais de 4 carateres';
+            errors.password = errorPassword;
         }
 
         setErrors(errors);
@@ -67,7 +80,7 @@ export const LoginBody = ({setOpen}: LoginBodyProps) => {
         <div className="h-screen w-screen justify-center flex items-center bg-CULTURED">
             <div className="bg-white w-auto flex flex-col items-center px-10 pt-10 h-auto gap-3 relative pb-10">
                 <div className="w-24 h-10 not-italic font-normal text-3xl leading-10 text-black flex-none order-none flex-grow-0">
-                    Entrar
+                    {featureLogin}
                 </div>
                 <div className="flex flex-col items-start flex-none order-1">
                     <div className="flex-none order-none">
@@ -79,7 +92,7 @@ export const LoginBody = ({setOpen}: LoginBodyProps) => {
                             {/*  FIXME Em todos */}
                             <InputForm
                                 type="mail"
-                                name="Mail"
+                                name={featureMail}
                                 id="mail"
                                 handleChange={handleChange}
                                 value={values.mail}
@@ -88,7 +101,7 @@ export const LoginBody = ({setOpen}: LoginBodyProps) => {
 
                             <InputForm
                                 type="password"
-                                name="Palavra-passe"
+                                name={featurePassword}
                                 id="password"
                                 handleChange={handleChange}
                                 value={values.password}
@@ -98,7 +111,7 @@ export const LoginBody = ({setOpen}: LoginBodyProps) => {
                             <div className="flex flex-col center px-20 py-3">
                                 {/*  FIXME Em todos */}
                                 <PrimaryButton type="submit">
-                                    Aceder
+                                    {featureButtonLogin}
                                 </PrimaryButton>
                             </div>
                             <div className="flex-none order-2  text-center	">
@@ -107,13 +120,13 @@ export const LoginBody = ({setOpen}: LoginBodyProps) => {
                                     className="flex-none order-2 h text-lg"
                                 >
                                     {/*  FIXME Em todos */}
-                                    Não tem conta? Registe-se agora!
+                                    {featureCreate}
                                 </a>
                                 <div
                                     onClick={() => setOpen(true)}
                                     className="cursor-pointer"
                                 >
-                                    Esqueci-me da palavra-passe
+                                    {featureForgetPass}
                                 </div>
                             </div>
                         </form>