feat: add notice about Bancontact issue to the payment page

WelcometoMyGarden · Aug 5, 2023 · 1bcdd08 · 1bcdd08
1 parent a1ddc7f
commit 1bcdd08
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -928,6 +928,11 @@
       }
     },
     "payment-section": {
+      "bancontact-notice": {
+        "text": "⚠️ <strong>Bancontact</strong> may be experiencing some technical issues that are beyond our control. Please try a different payment method if your payment doesn't go through. Check {linkText} (opens in a new tab) to learn about the status of the issue. Thank you! - the WTMG team",
+        "link": "https://status.mollie.com/incidents/3xrd9fd1vpdf",
+        "link-text": "this page"
+      },
       "payment-method": "Payment method",
       "pay-button": "Pay now",
       "loading": "Loading...",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -933,7 +933,11 @@
         "systems-error": "Un problème est survenu dans notre système. Merci de contacter {supportEmail} et nous reviendrons vers vous le plus vite possible. Nous sommes désolés pour ce problème.",
         "payment-error": "Un problème est survenu lors de votre paiement, merci de réessayer."
       },
-      "success": "Nous avons bien reçu votre paiement. Bienvenue ! Vous pouvez à présent planifier votre slow travel."
+      "success": "Nous avons bien reçu votre paiement. Bienvenue ! Vous pouvez à présent planifier votre slow travel.",
+      "bancontact-notice": {
+        "link-text": "lien",
+        "text": "⚠️ Il semble que <strong>Bancontact</strong> rencontre actuellement des problèmes techniques hors de notre contrôle. Si votre paiement ne fonctionne pas, merci d'essayer une autre méthode de paiement. Plus d'informations sur l'état du problème sont disponibles ici: {linkText} (s'ouvre dans un nouvel onglet) Merci ! - L'équipe de WTMG"
+      }
     },
     "not-logged-in-warning": "Pour devenir Superfan, connectez-vous d'abord ou créez un compte",
     "title": "Paiement"

diff --git a/src/locales/nl.json b/src/locales/nl.json
@@ -550,7 +550,11 @@
         "systems-error": "Er ging iets fout in ons systeem. Gelieve {supportEmail} te contacteren en we zullen je zo snel mogelijk helpen! Excuseer voor het ongemak.",
         "payment-error": "Er ging iets fout met je betaling, probeer alsjeblieft opnieuw."
       },
-      "success": "We hebben je betaling goed ontvangen, welkom in de WTMG community! Hier is de chat die je wilde openen."
+      "success": "We hebben je betaling goed ontvangen, welkom in de WTMG community! Hier is de chat die je wilde openen.",
+      "bancontact-notice": {
+        "text": "⚠️ <strong>Bancontact</strong> kampt op dit moment met techische problemen waar wij niets aan kunnen doen. Als uw Bancontact-betaling niet doorgaat, gelieve dan een andere betaalmethode te proberen. Bekijk {linkText} (opent in een nieuwe tab) voor meer info over de status van het probleem. Bedankt! - het WTMG team",
+        "link-text": "deze pagina"
+      }
     },
     "not-logged-in-warning": "Om Superfan te worden, moet je eerst inloggen of een account aanmaken",
     "title": "Betaling"

diff --git a/src/routes/(marketing)/(membership)/become-member/payment/+layout.svelte b/src/routes/(marketing)/(membership)/become-member/payment/+layout.svelte
@@ -33,6 +33,7 @@
   import { emailAsLink, SUPPORT_EMAIL } from '$lib/constants';
   import LevelSummary from './LevelSummary.svelte';
   import { page } from '$app/stores';
+  import { anchorText } from '$lib/util/translation-helpers';
 
   // TODO: if you subscribe & unsubscribe in 1 session without refreshing, no new sub will be auto-generated
   // we could fix this by detecting changes to the user (if we go from subscribed -> unsubscribed)
@@ -272,6 +273,17 @@
 <PaddedSection>
   {#if $user && selectedLevel && !hasActiveSubscription($user)}
     <!-- Payment block - TODO: move into component -->
+    <p class="bancontact-issue">
+      {@html $_('payment-superfan.payment-section.bancontact-notice.text', {
+        values: {
+          linkText: anchorText({
+            href: $_('payment-superfan.payment-section.bancontact-notice.link'),
+            linkText: $_('payment-superfan.payment-section.bancontact-notice.link-text'),
+            class: 'link'
+          })
+        }
+      })}
+    </p>
     {#if error}
       <p class="error">{error.message}</p>
     {/if}
@@ -318,6 +330,11 @@
 </PaddedSection>
 
 <style>
+  .bancontact-issue {
+    padding: 1rem;
+    border-radius: 1rem;
+    background-color: #fff8ce;
+  }
   .method-title {
     /* Taken from Stripe's Payment element CSS */
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,