JSON UI

packages/web/src/widgets/AdminPremiumPromoWidget.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import JsonUiContentRenderer from '../jsonui/JsonUiContentRenderer.svelte';
+  import { promoWidgetPreview } from '../stores';
   import { usePromoWidget } from '../utility/metadataLoaders';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
 
   const promoWidget = usePromoWidget({});
+
+  $: promoWidgetData = $promoWidgetPreview || $promoWidget;
 </script>
 
 <WidgetsInnerContainer>
-  {#if $promoWidget?.state == 'data'}
-    <JsonUiContentRenderer blocks={$promoWidget?.blocks} />
+  {#if promoWidgetData?.state == 'data'}
+    <JsonUiContentRenderer blocks={promoWidgetData?.blocks} passProps={{ validTo: promoWidgetData?.validTo }} />
   {/if}
 </WidgetsInnerContainer>
 

packages/web/src/widgets/WidgetIconPanel.svelte

@@ -11,6 +11,7 @@
     getCurrentConfig,
     cloudSigninTokenHolder,
     seenPremiumPromoWidget,
+    promoWidgetPreview,
   } from '../stores';
   import mainMenuDefinition from '../../../../app/src/mainMenuDefinition';
   import hasPermission from '../utility/hasPermission';
@@ -167,6 +168,8 @@
       openWebLink(url, true);
     }
   }
+
+  $: promoWidgetData = $promoWidgetPreview || $promoWidget;
 </script>
 
 <div class="main">
@@ -177,7 +180,7 @@
   {/if}
   {#each widgets
     .filter(x => x && hasPermission(`widgets/${x.name}`))
-    .filter(x => !x.isPremiumPromo || (!isProApp() && $promoWidget?.state == 'data'))
+    .filter(x => !x.isPremiumPromo || (!isProApp() && promoWidgetData?.state == 'data'))
     // .filter(x => !x.isPremiumOnly || isProApp())
     .filter(x => x.name != 'cloud-private' || $cloudSigninTokenHolder) as item}
     <div
@@ -186,7 +189,7 @@
       data-testid={`WidgetIconPanel_${item.name}`}
       on:click={() => handleChangeWidget(item.name)}
     >
-      {#if item.isPremiumPromo && $promoWidget?.isColoredIcon}
+      {#if item.isPremiumPromo && promoWidgetData?.isColoredIcon}
         <FontIcon
           icon={item.icon}
           title={item.title}
@@ -197,7 +200,7 @@
       {/if}
       {#if item.isPremiumPromo}
         <div class="premium-promo">Premium</div>
-        {#if $promoWidget?.identifier != $seenPremiumPromoWidget}
+        {#if promoWidgetData?.identifier != $seenPremiumPromoWidget}
           <div class="premium-promo-not-seen">•</div>
         {/if}
       {/if}