Add a blurb about why one should use the demo trigger for the CC token

thinkst · Nov 1, 2024 · 71c21b9 · 71c21b9
1 parent 0a71cc5
commit 71c21b9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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;
   }