Translate topup blade views and replace hardcoded strings

app/Http/Controllers/TopupController.php

@@ -27,6 +27,7 @@
 use App\Models\OrganisationPaymentGateway;
 use App\Models\Topup;
 use Illuminate\Database\Eloquent\ModelNotFoundException;
+use Illuminate\Http\Request;
 use Omnipay\Common\Exception\InvalidRequestException;
 use Omnipay\Omnipay;
 use Omnipay\Paynl\Gateway;
@@ -41,19 +42,44 @@ class TopupController extends Controller
 {
     private $minTopup;
     private $maxTopup;
+    private static $supportedLocales = ['en', 'nl', 'fr', 'de', 'es'];
 
     public function __construct()
     {
         $this->minTopup = config('payment.minTopup', 10);
         $this->maxTopup = config('payment.maxTopup', 250);
     }
 
+    /**
+     * Detect and set the locale from the request.
+     *
+     * @param Request $request
+     */
+    protected function detectLocale(Request $request)
+    {
+        $lang = $request->query('lang') ?? $request->query('language');
+
+        if ($lang) {
+            $lang = strtolower(explode('-', $lang)[0]);
+            if (in_array($lang, self::$supportedLocales)) {
+                app()->setLocale($lang);
+            }
+        } elseif ($request->hasHeader('Accept-Language')) {
+            $preferred = $request->getPreferredLanguage(self::$supportedLocales);
+            if ($preferred) {
+                app()->setLocale($preferred);
+            }
+        }
+    }
+
     /**
      * @param $cardUid
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
-    public function topupForm($cardUid)
+    public function topupForm(Request $request, $cardUid)
     {
+        $this->detectLocale($request);
+
         $card = $this->getCard($cardUid);
         $gateway = $this->createPayNLGateway($card->organisation);
         if (!$gateway) {
@@ -120,9 +146,9 @@ public function processTopup(\Illuminate\Http\Request $request, $cardUid)
      * @param $topupUid
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View|string|void
      */
-    public function notification($cardUid, $topupUid)
+    public function notification(Request $request, $cardUid, $topupUid)
     {
-        return $this->status($cardUid, $topupUid, true);
+        return $this->status($request, $cardUid, $topupUid, true);
     }
 
     /**
@@ -131,8 +157,10 @@ public function notification($cardUid, $topupUid)
      * @param bool $isApiRequest
      * @return \Illuminate\Contracts\Foundation\Application|\Illuminate\Contracts\View\Factory|\Illuminate\Foundation\Application|\Illuminate\View\View|string|void
      */
-    public function status($cardUid, $topupUid, $isApiRequest = false)
+    public function status(Request $request, $cardUid, $topupUid, $isApiRequest = false)
     {
+        $this->detectLocale($request);
+
         $card = $this->getCard($cardUid);
 
         /** @var Topup $topup */

resources/lang/de/topup.php

@@ -0,0 +1,18 @@
+<?php
+
+return [
+
+    'title' => 'Karte aufladen',
+    'scan_qr' => 'Bitte scannen Sie den QR-Code auf der Karte, um eine Aufladung zu starten.',
+    'current_balance' => 'Aktuelles Guthaben',
+    'choose_amount' => 'Wählen Sie den gewünschten Betrag (ab :min €).',
+    'amount_label' => 'Betrag',
+    'amount_placeholder' => 'Betrag',
+    'submit' => 'Aufladen',
+    'not_available' => 'Online-Aufladung ist noch nicht verfügbar.',
+    'payment_failed' => 'Die Zahlung ist fehlgeschlagen.',
+    'retry' => 'Erneut versuchen',
+    'payment_pending' => 'Vielen Dank für die Zahlung! Wir haben noch keine Zahlungsbestätigung erhalten, aber das kann einige Minuten dauern. Wenn die Aufladung nach 10 Minuten noch nicht erfolgreich war, wenden Sie sich bitte an einen Mitarbeiter und wir prüfen das.',
+    'payment_success' => 'Die Zahlung war erfolgreich, Ihre Karte wurde um :amount aufgeladen.',
+
+];

resources/lang/en/topup.php

@@ -0,0 +1,18 @@
+<?php
+
+return [
+
+    'title' => 'Card top-up',
+    'scan_qr' => 'Please scan the QR code on the card to initiate a top-up.',
+    'current_balance' => 'Current balance',
+    'choose_amount' => 'Choose the desired amount (starting from €:min).',
+    'amount_label' => 'Amount',
+    'amount_placeholder' => 'Amount',
+    'submit' => 'Top up',
+    'not_available' => 'Online top-up is not yet available.',
+    'payment_failed' => 'The payment has failed.',
+    'retry' => 'Try again',
+    'payment_pending' => 'Thank you for the payment! We have not yet received a payment confirmation, but this may take a few minutes. If the top-up has not succeeded after 10 minutes, please contact a staff member and we will look into it.',
+    'payment_success' => 'The payment was successful, your card has been topped up by :amount.',
+
+];

resources/lang/es/topup.php

@@ -0,0 +1,18 @@
+<?php
+
+return [
+
+    'title' => 'Recargar tarjeta',
+    'scan_qr' => 'Escanee el código QR de la tarjeta para iniciar una recarga.',
+    'current_balance' => 'Saldo actual',
+    'choose_amount' => 'Elija el monto deseado (a partir de :min €).',
+    'amount_label' => 'Monto',
+    'amount_placeholder' => 'Monto',
+    'submit' => 'Recargar',
+    'not_available' => 'La recarga en línea aún no está disponible.',
+    'payment_failed' => 'El pago ha fallado.',
+    'retry' => 'Intentar de nuevo',
+    'payment_pending' => '¡Gracias por el pago! Aún no hemos recibido una confirmación de pago, pero esto puede tardar unos minutos. Si la recarga no se ha completado después de 10 minutos, contacte a un miembro del personal y lo revisaremos.',
+    'payment_success' => 'El pago fue exitoso, su tarjeta ha sido recargada por :amount.',
+
+];

resources/lang/fr/topup.php

@@ -0,0 +1,18 @@
+<?php
+
+return [
+
+    'title' => 'Recharger la carte',
+    'scan_qr' => 'Veuillez scanner le code QR sur la carte pour initier un rechargement.',
+    'current_balance' => 'Solde actuel',
+    'choose_amount' => 'Choisissez le montant souhaité (à partir de :min €).',
+    'amount_label' => 'Montant',
+    'amount_placeholder' => 'Montant',
+    'submit' => 'Recharger',
+    'not_available' => 'Le rechargement en ligne n\'est pas encore disponible.',
+    'payment_failed' => 'Le paiement a échoué.',
+    'retry' => 'Réessayer',
+    'payment_pending' => 'Merci pour le paiement ! Nous n\'avons pas encore reçu de confirmation de paiement, mais cela peut prendre quelques minutes. Si le rechargement n\'a pas réussi après 10 minutes, veuillez contacter un membre du personnel et nous vérifierons.',
+    'payment_success' => 'Le paiement a réussi, votre carte a été rechargée de :amount.',
+
+];

resources/lang/nl/topup.php

@@ -0,0 +1,18 @@
+<?php
+
+return [
+
+    'title' => 'Kaart opladen',
+    'scan_qr' => 'Scan de QR-code op de kaart om een opwaardering te starten.',
+    'current_balance' => 'Huidige balans',
+    'choose_amount' => 'Kies het gewenste bedrag (vanaf €:min).',
+    'amount_label' => 'Bedrag',
+    'amount_placeholder' => 'Bedrag',
+    'submit' => 'Opladen',
+    'not_available' => 'Online herladen is nog niet beschikbaar.',
+    'payment_failed' => 'De betaling is mislukt.',
+    'retry' => 'Probeer het opnieuw',
+    'payment_pending' => 'Dank voor de betaling! We hebben nog geen bevestiging van betaling ontvangen, maar dat kan enkele minuten duren. Is het opladen na 10 minuten nog steeds niet gelukt, contacteer dan een medewerker en we kijken het na.',
+    'payment_success' => 'De betaling is gelukt, je kaart is voor :amount herladen.',
+
+];

resources/pos/js/components/QrScanner.vue

@@ -24,7 +24,7 @@
 		<p v-if="cameraError" class="error">{{ cameraError }}</p>
 		<qr-stream @detect="onDetect" @error="onError" v-if="!cameraError">
 			<div class="qr-overlay">
-				<p>Point your camera at the QR code</p>
+				<p>{{ $t('Point your camera at the QR code') }}</p>
 			</div>
 		</qr-stream>
 	</div>

resources/shared/js/i18n/de.js

@@ -415,4 +415,10 @@ export default {
 
     // Language toggle
     'Language': 'Sprache',
+
+    // Placeholder pages
+    'Hello world': 'Hallo Welt',
+    'This is the hello world.': 'Dies ist die Hallo-Welt.',
+    'Home': 'Startseite',
+    'This is the home.': 'Dies ist die Startseite.',
 };

resources/shared/js/i18n/en.js

@@ -415,4 +415,10 @@ export default {
 
     // Language toggle
     'Language': 'Language',
+
+    // Placeholder pages
+    'Hello world': 'Hello world',
+    'This is the hello world.': 'This is the hello world.',
+    'Home': 'Home',
+    'This is the home.': 'This is the home.',
 };

resources/shared/js/i18n/es.js

@@ -415,4 +415,10 @@ export default {
 
     // Language toggle
     'Language': 'Idioma',
+
+    // Placeholder pages
+    'Hello world': 'Hola mundo',
+    'This is the hello world.': 'Esta es la página hola mundo.',
+    'Home': 'Inicio',
+    'This is the home.': 'Esta es la página de inicio.',
 };

resources/shared/js/i18n/fr.js

@@ -415,4 +415,10 @@ export default {
 
     // Language toggle
     'Language': 'Langue',
+
+    // Placeholder pages
+    'Hello world': 'Bonjour le monde',
+    'This is the hello world.': 'Ceci est le bonjour le monde.',
+    'Home': 'Accueil',
+    'This is the home.': 'Ceci est la page d\'accueil.',
 };

resources/shared/js/i18n/nl.js

@@ -415,4 +415,10 @@ export default {
 
     // Language toggle
     'Language': 'Taal',
+
+    // Placeholder pages
+    'Hello world': 'Hallo wereld',
+    'This is the hello world.': 'Dit is de hallo wereld.',
+    'Home': 'Startpagina',
+    'This is the home.': 'Dit is de startpagina.',
 };

resources/shared/js/views/Hello.vue

@@ -23,8 +23,8 @@
 
     <b-container fluid>
 
-        <h1>Hello world</h1>
-        <p>This is the hello world.</p>
+        <h1>{{ $t('Hello world') }}</h1>
+        <p>{{ $t('This is the hello world.') }}</p>
 
     </b-container>
 

resources/shared/js/views/Home.vue

@@ -23,8 +23,8 @@
 
     <b-container fluid>
 
-        <h1>Home</h1>
-        <p>This is the home.</p>
+        <h1>{{ $t('Home') }}</h1>
+        <p>{{ $t('This is the home.') }}</p>
 
     </b-container>
 

resources/views/layouts/order.blade.php

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

resources/views/topup/index.blade.php

@@ -4,8 +4,8 @@
 @section('content')
 	<div class="container">
 
-		<h2>CatLab Drinks: topup</h2>
-		<p>Please scan the QR code on the card to initiate a topup.</p>
+		<h2>{{ __('topup.title') }}</h2>
+		<p>{{ __('topup.scan_qr') }}</p>
 
 	</div>
 @endsection

resources/views/topup/notAvailable.blade.php

@@ -3,10 +3,10 @@
 @section('content')
     <div class="container">
 
-        <!--<p class="alert alert-danger">Online herladen is nog niet beschikbaar.</p>-->
-        <h2>Kaart opladen</h2>
+        <!--<p class="alert alert-danger">{{ __('topup.not_available') }}</p>-->
+        <h2>{{ __('topup.title') }}</h2>
         <div class="alert alert-danger">
-            Online herladen is nog niet beschikbaar.
+            {{ __('topup.not_available') }}
         </div>
 
     </div>

resources/views/topup/status.blade.php

@@ -3,23 +3,21 @@
 @section('content')
     <div class="container">
 
-        <!--<p class="alert alert-danger">Online herladen is nog niet beschikbaar.</p>-->
-        <h2>Kaart opladen</h2>
+        <!--<p class="alert alert-danger">{{ __('topup.not_available') }}</p>-->
+        <h2>{{ __('topup.title') }}</h2>
 
         @if($topup->isCancelled())
             <div class="alert alert-danger">
-                De betaling is mislukt.<br />
-                <a href="{{ $retryUrl }}" class="btn btn-danger btn-sm">Probeer het opnieuw</a>
+                {{ __('topup.payment_failed') }}<br />
+                <a href="{{ $retryUrl }}" class="btn btn-danger btn-sm">{{ __('topup.retry') }}</a>
             </div>
         @elseif($topup->isPending())
             <div class="alert alert-success">
-                Dank voor de betaling! We hebben nog geen bevestiging van betaling ontvangen, maar dat kan enkele
-                minuten duren. Is het opladen na 10 minuten nog steeds niet gelukt, contacteer dan een medewerker
-                en we kijken het na.
+                {{ __('topup.payment_pending') }}
             </div>
         @elseif($topup->isSuccess())
             <div class="alert alert-success">
-                De betaling is gelukt, je kaart is voor {{ $topup->amount }} herladen.
+                {{ __('topup.payment_success', ['amount' => $topup->amount]) }}
             </div>
         @endif
 

resources/views/topup/topupForm.blade.php

@@ -4,14 +4,14 @@
     <div class="container">
 
 
-        <!--<p class="alert alert-danger">Online herladen is nog niet beschikbaar.</p>-->
+        <!--<p class="alert alert-danger">{{ __('topup.not_available') }}</p>-->
 
-        <h2>Huidige balans</h2>
+        <h2>{{ __('topup.current_balance') }}</h2>
         <p>
             € {{ $balance }}
         </p>
 
-        <h2>Kaart opladen</h2>
+        <h2>{{ __('topup.title') }}</h2>
 
         @if ($errors->any())
             <div class="alert alert-danger">
@@ -23,15 +23,15 @@
             </div>
         @endif
 
-        <p>Kies het gewenste bedrag (vanaf €10,00).</p>
+        <p>{{ __('topup.choose_amount', ['min' => $minTopup]) }}</p>
 
         <form class="{{ $action }}" method="post">
             @csrf
             <div class="form-group mb-2">
-                <label for="amount" class="sr-only">Bedrag</label>
-                <input type="number" class="form-control" id="amount" name="amount" placeholder="Bedrag" min="{{ $minTopup }}" max="{{ $maxTopup }}" step="0.01"  />
+                <label for="amount" class="sr-only">{{ __('topup.amount_label') }}</label>
+                <input type="number" class="form-control" id="amount" name="amount" placeholder="{{ __('topup.amount_placeholder') }}" min="{{ $minTopup }}" max="{{ $maxTopup }}" step="0.01"  />
             </div>
-            <button type="submit" class="btn btn-primary mb-2">Opladen</button>
+            <button type="submit" class="btn btn-primary mb-2">{{ __('topup.submit') }}</button>
         </form>
 
     </div>