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

@@ -31,10 +31,13 @@
         "flowbite-datepicker": "^1.2.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",
         "tailwind-react-datepicker": "^1.1.8",
         "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/MoneyOperation/index.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import {FormattedMessage, useIntl} from 'react-intl';
+import { AddAPhotoOutlined } from '@mui/icons-material';
 
+
 export enum OperationType {
-    DEPOSIT = 'Depósito',
-    WITHDRAW = 'Retiro',
-    BET_WIN = 'Aposta Ganha',
-    BET_LOSS = 'Aposta Perdida',
+    DEPOSIT = 'Deposit',
+    WITHDRAW = 'Withdraw',
+    BET_WIN = 'Winning Bet',
+    BET_LOSS = 'Lost Bet',
 }
 
 export interface MoneyOperationProps {
     operationDate: string;
-    operationType: OperationType;
     operationAmount: number;
-
+    operationType: OperationType;
     balanceAfterOperation: number;
 }
 
@@ -25,6 +27,13 @@ export const MoneyOperation = ({
     operationAmount,
     balanceAfterOperation,
 }: MoneyOperationProps) => {
+
+    const intl = useIntl();
+    const featureDate = intl.formatMessage({id: 'OnGoingBetRecord.Date'});
+    const featureOperation = intl.formatMessage({id: 'MoneyOperation.Operation'});
+    const featureBalance = intl.formatMessage({id: 'MoneyOperation.Balance'});
+
+
     // FIXME: Hardcoded text in this component
     return (
         <div className="flex flex-row justify-between items-center px-4 gap-0 bg-WHITE rounded">
@@ -35,15 +44,15 @@ export const MoneyOperation = ({
                 </span>
             </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">
                     {operationDate}
                 </span>
             </div>
 
             {operationType === OperationType.DEPOSIT && (
                 <div className={`${OPERATION_STYLES} bg-RIGHT_GREEN`}>
-                    <span className="text-xs">Operação</span>
+                    <span className="text-xs">{featureOperation}</span>
                     <span className="text-base font-semibold">
                         + {operationAmount} €
                         {/* FIXME: Money currency is hardcoded and can vary */}
@@ -52,7 +61,7 @@ export const MoneyOperation = ({
             )}
             {operationType === OperationType.WITHDRAW && (
                 <div className={`${OPERATION_STYLES} bg-IMPERIAL_RED`}>
-                    <span className="text-xs">Operação</span>
+                    <span className="text-xs">{featureOperation}</span>
                     <span className="text-base font-semibold">
                         - {operationAmount} €
                         {/* FIXME: Money currency is hardcoded and can vary */}
@@ -61,7 +70,7 @@ export const MoneyOperation = ({
             )}
             {operationType === OperationType.BET_WIN && (
                 <div className={`${OPERATION_STYLES} bg-RIGHT_GREEN`}>
-                    <span className="text-xs">Operação</span>
+                    <span className="text-xs">{featureOperation}</span>
                     <span className="text-base font-semibold">
                         + {operationAmount} €
                         {/* FIXME: Money currency is hardcoded and can vary */}
@@ -70,7 +79,7 @@ export const MoneyOperation = ({
             )}
             {operationType === OperationType.BET_LOSS && (
                 <div className={`${OPERATION_STYLES} bg-IMPERIAL_RED`}>
-                    <span className="text-xs">Operação</span>
+                    <span className="text-xs">{featureOperation}</span>
                     <span className="text-base font-semibold">
                         - {operationAmount} €
                         {/* FIXME: Money currency is hardcoded and can vary */}
@@ -80,7 +89,7 @@ export const MoneyOperation = ({
 
             <div className="flex flex-col items-start p-0 gap-2">
                 <span className="text-LIGHT_GRAY text-sm">
-                    {'Saldo após movimento'}
+                    {featureBalance}
                 </span>
                 <span className="text-EERIE_BLACK text-base font-semibold">
                     {balanceAfterOperation} €
@@ -90,3 +99,4 @@ export const MoneyOperation = ({
         </div>
     );
 };
+