json UI improvements

packages/web/src/jsonui/JsonUiContentRenderer.svelte

@@ -3,6 +3,7 @@
   import JsonUiHeading from './JsonUiHeading.svelte';
   import JsonUiHighlight from './JsonUiHighlight.svelte';
   import JsonUiLinkButton from './JsonUiLinkButton.svelte';
+  import JsonUiLinkButtonBlock from './JsonUiLinkButtonBlock.svelte';
   import JsonUiMarkdown from './JsonUiMarkdown.svelte';
   import JsonUiTextBlock from './JsonUiTextBlock.svelte';
   import JsonUiTickList from './JsonUiTickList.svelte';
@@ -19,6 +20,7 @@
     markdown: JsonUiMarkdown,
     highlight: JsonUiHighlight,
     countdown: JsonUiCountdown,
+    buttonblock: JsonUiLinkButtonBlock,
   } as const;
 </script>
 

packages/web/src/jsonui/JsonUiCountdown.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { openWebLink } from '../utility/simpleTools';
 
   export let colorClass: string = 'premium-gradient';
   export let validTo;
+  export let link;
 
   function formatRemaining(validTo, now) {
     let diffMs = validTo.getTime() - now.getTime();
@@ -43,7 +45,15 @@
 </script>
 
 {#if validTo}
-  <div class="countdown {colorClass}">
+  <div
+    class="countdown {colorClass}"
+    class:isLink={!!link}
+    on:click={() => {
+      if (link) {
+        openWebLink(link);
+      }
+    }}
+  >
     <span class="big">Offer ends in:</span><br />
     {#each parts as part}
       <span class="part">
@@ -62,6 +72,10 @@
     padding: 5px;
   }
 
+  .countdown.isLink {
+    cursor: pointer;
+  }
+
   .big {
     font-size: large;
     font-weight: bold;

packages/web/src/jsonui/JsonUiHighlight.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
   export let text: string;
   export let colorClass: string = 'premium-gradient';
+  export let link: string;
 </script>
 
+{#if link}
+  <a class="highlight {colorClass}" href={link}>
+    {text}
+  </a>
+{:else}
   <div class="highlight {colorClass}">
     {text}
   </div>
+{/if}
 
 <style>
   .highlight {
+    display: block;
     text-align: center;
     margin: 10px;
     font-size: large;
     font-weight: bold;
     border: 1px solid;
     padding: 5px;
+    text-decoration: none;
   }
 </style>

packages/web/src/jsonui/JsonUiLinkButton.svelte

@@ -5,9 +5,6 @@
   export let text: string;
   export let link: string;
   export let colorClass: string = '';
-
-  // very light url guard
-  const safe = /^(https?:)?\/\//i.test(link) || link.startsWith('/');
 </script>
 
 <div class="center">

packages/web/src/jsonui/JsonUiLinkButtonBlock.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+  import { openWebLink } from '../utility/simpleTools';
+
+  export let text: string;
+  export let link: string;
+  export let colorClass: string = '';
+  export let items: any[] = [];
+</script>
+
+<div class="center">
+  {#each items as item}
+    <FormStyledButton on:click={() => openWebLink(item.link)} value={item.text} skipWidth {colorClass} />
+  {/each}
+</div>
+
+<style>
+  .center {
+    text-align: center;
+  }
+</style>