From 71c21b9f09c500bede18c5bf971aa955510f9385 Mon Sep 17 00:00:00 2001
From: Max Mclaughlin <max@thinkst.com>
Date: Fri, 1 Nov 2024 11:25:06 +0200
Subject: [PATCH] Add a blurb about why one should use the demo trigger for the
 CC token

---
 frontend_vue/src/components/base/BaseMessageBox.vue | 13 +++++++++++--
 .../tokens/credit_card_v2/TokenDisplay.vue          |  4 +++-
 .../tokens/credit_card_v2/TriggerDemo.vue           |  8 ++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend_vue/src/components/base/BaseMessageBox.vue b/frontend_vue/src/components/base/BaseMessageBox.vue
index d1381d498..48340c658 100644
--- a/frontend_vue/src/components/base/BaseMessageBox.vue
+++ b/frontend_vue/src/components/base/BaseMessageBox.vue
@@ -4,7 +4,7 @@
     :class="boxClasses"
   >
     <div
-      class="flex flex-row items-center self-start flex-grow gap-16 md:gap-16 md:self-center"
+      class="flex flex-col lg:flex-row items-center self-start flex-grow gap-16 md:gap-16 md:self-center"
     >
       <AlertShieldIcon
         v-if="variant !== 'info'"
@@ -18,8 +18,16 @@
         :class="iconClass"
         aria-hidden="true"
       />
+      <div v-if="messages">
+        <p
+          v-for="msg in messages"
+          class="text-pretty mb-4"
+        >
+          {{ msg }}
+        </p>
+      </div>
       <p
-        v-if="message"
+        v-else-if="message"
         class="text-pretty"
       >
         {{ message }}
@@ -60,6 +68,7 @@ enum VariantEnum {
 const props = defineProps<{
   variant: NotificationBoxVariantType;
   message?: string;
+  messages?: Array<string>;
   textLink?: string;
   href?: string;
 }>();
diff --git a/frontend_vue/src/components/tokens/credit_card_v2/TokenDisplay.vue b/frontend_vue/src/components/tokens/credit_card_v2/TokenDisplay.vue
index 2594e84f7..506423923 100644
--- a/frontend_vue/src/components/tokens/credit_card_v2/TokenDisplay.vue
+++ b/frontend_vue/src/components/tokens/credit_card_v2/TokenDisplay.vue
@@ -11,8 +11,10 @@
           Download Credit Card
         </base-button>
         <base-button
-          class="mt-24"
+          class="mt-24 relative"
           @click="showTestForm = !showTestForm">
+          <span class="text-grey-800 absolute top-[-20px] right-[-68px] text-sm font-medium rotate-[30deg]">Use me!</span>
+          <img class="absolute top-[-4px] right-[-36px]" src="@/assets/icons/label_arrow_1.svg" />
           Test Credit Card
         </base-button>
       </div>
diff --git a/frontend_vue/src/components/tokens/credit_card_v2/TriggerDemo.vue b/frontend_vue/src/components/tokens/credit_card_v2/TriggerDemo.vue
index 7184022f3..47528c3e5 100644
--- a/frontend_vue/src/components/tokens/credit_card_v2/TriggerDemo.vue
+++ b/frontend_vue/src/components/tokens/credit_card_v2/TriggerDemo.vue
@@ -1,4 +1,7 @@
 <template>
+  <base-message-box
+    class="mb-24 w-fit" variant="info"
+    :messages="triggerBlurb" />
   <div class="payments-portal-container">
     <div class="payments-portal flex items-center justify-center p-24 border border-grey-200 rounded-xl shadow-solid-shadow-grey relative">
       <button
@@ -96,6 +99,11 @@
   const loading = ref(false);
   const error = ref(false);
 
+  const triggerBlurb = [
+    'This allows you to test alerting, SIEM integrations, etc. without having to try and visit a shop.',
+    'While we are providing you with these tokens, we are not doing so to charge money against them (only criminals should do so). In some jurisdictions, this could be considered attempted fraud, so we\'d rather you use this testing system instead.',
+  ];
+
   function randomInRange(min: number, max: number) {
     return Math.random() * (max - min) + min;
   }