JSON UI

packages/web/src/jsonui/JsonUiContentRenderer.svelte

@@ -1,22 +1,29 @@
 <script lang="ts">
+  import JsonUiCountdown from './JsonUiCountdown.svelte';
   import JsonUiHeading from './JsonUiHeading.svelte';
+  import JsonUiHighlight from './JsonUiHighlight.svelte';
   import JsonUiLinkButton from './JsonUiLinkButton.svelte';
+  import JsonUiMarkdown from './JsonUiMarkdown.svelte';
   import JsonUiTextBlock from './JsonUiTextBlock.svelte';
   import JsonUiTickList from './JsonUiTickList.svelte';
   import { JsonUiBlock } from './jsonuitypes';
 
   export let blocks: JsonUiBlock[] = [];
+  export let passProps = {};
 
   const componentMap = {
     text: JsonUiTextBlock,
     heading: JsonUiHeading,
     ticklist: JsonUiTickList,
     button: JsonUiLinkButton,
+    markdown: JsonUiMarkdown,
+    highlight: JsonUiHighlight,
+    countdown: JsonUiCountdown,
   } as const;
 </script>
 
 {#each blocks as block, i}
   {#if block.type in componentMap}
-    <svelte:component this={componentMap[block.type]} {...block} />
+    <svelte:component this={componentMap[block.type]} {...block} {...passProps} />
   {/if}
 {/each}

packages/web/src/jsonui/JsonUiCountdown.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let colorClass: string = 'premium-gradient';
+  export let validTo;
+
+  function formatRemaining(validTo, now) {
+    let diffMs = validTo.getTime() - now.getTime();
+    if (diffMs <= 0) return '0 minutes';
+
+    const totalMinutes = Math.floor(diffMs / 60000);
+    const days = Math.floor(totalMinutes / (24 * 60));
+    const hours = Math.floor((totalMinutes % (24 * 60)) / 60);
+    const minutes = totalMinutes % 60;
+
+    const parts = [];
+    const en = (n, unit) => ({
+      num: n,
+      unit: n == 1 ? unit : unit + 's',
+    });
+
+    if (days) parts.push(en(days, 'day'));
+    if (hours) parts.push(en(hours, 'hour'));
+    // Always include minutes to report down to minutes
+    parts.push(en(minutes, 'minute'));
+
+    return parts;
+  }
+
+  let currentDate = new Date();
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      currentDate = new Date();
+    }, 5000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  $: parts = formatRemaining(new Date(validTo), currentDate);
+</script>
+
+{#if validTo}
+  <div class="countdown {colorClass}">
+    <span class="big">Offer ends in:</span><br />
+    {#each parts as part}
+      <span class="part">
+        <span class="big">{part.num}</span>
+        {part.unit}
+      </span>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .countdown {
+    text-align: center;
+    margin: 10px;
+    border: 1px solid;
+    padding: 5px;
+  }
+
+  .big {
+    font-size: large;
+    font-weight: bold;
+  }
+
+  .part {
+    margin: 0 5px;
+  }
+</style>

packages/web/src/jsonui/JsonUiHighlight.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let text: string;
+  export let colorClass: string = 'premium-gradient';
+</script>
+
+<div class="highlight {colorClass}">
+  {text}
+</div>
+
+<style>
+  .highlight {
+    text-align: center;
+    margin: 10px;
+    font-size: large;
+    font-weight: bold;
+    border: 1px solid;
+    padding: 5px;
+  }
+</style>

packages/web/src/jsonui/JsonUiMarkdown.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Markdown from '../elements/Markdown.svelte';
+
+  export let text: string;
+</script>
+
+<div>
+  <Markdown source={text} />
+</div>
+
+<style>
+  div {
+    margin: 10px;
+  }
+</style>