adding paywall

src/lib/components/BullBearSay.svelte

@@ -72,6 +72,7 @@ $: {
           </div>
       </div>
 
+    {#if data?.user?.tier === 'Pro'}
      <!--Start Header-->
      <div role="tablist" class="-mt-2 w-11/12 sm:w-56">
 
@@ -92,7 +93,6 @@ $: {
       </div>
 
     </div>
-    {#if data?.user?.tier === 'Pro'}
 
     <!--End Header-->
     <span class="text-gray-200 text-xs sm:text-[0.85rem] italic mt-6 sm:ml-auto">
@@ -112,7 +112,7 @@ $: {
       </span>
     </div>
     {:else}
-    <div class="bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+    <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
       <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
       Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
     </div>

src/lib/components/Enterprise.svelte

@@ -3,9 +3,11 @@
     import { displayCompanyName, stockTicker, screenWidth, userRegion, getCache, setCache} from '$lib/store';
     import InfoModal from '$lib/components/InfoModal.svelte';
     import { Chart } from 'svelte-echarts'
-    import { abbreviateNumber } from "$lib/utils";
 
     import Lazy from 'svelte-lazy';
+
+    export let data;
+    
     let isLoaded = false;
     const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
@@ -190,6 +192,7 @@ $: {
                 />
             </div>
             
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
             {#if rawData?.length !== 0}
             <div class="p-3 sm:p-0 mt-2 pb-8 sm:pb-2 rounded-lg bg-[#202020] sm:bg-[#0F0F0F]">
@@ -255,6 +258,13 @@ $: {
             </div>  
             {/if}
 
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
+    
         </main>
     </section>
     

src/lib/components/RetailVolume.svelte

@@ -6,6 +6,8 @@
     import { abbreviateNumber } from "$lib/utils";
 
     import Lazy from 'svelte-lazy';
+    export let data;
+
     let isLoaded = false;
     const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
@@ -223,6 +225,7 @@ $: {
                 />
             </div>
 
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
     
             {#if rawData?.length !== 0}
@@ -308,6 +311,13 @@ $: {
             </div>
             {/if}
 
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
+    
         </main>
     </section>
     

src/lib/components/ShareStatistics.svelte

@@ -6,6 +6,9 @@
     import { abbreviateNumber } from "$lib/utils";
 
     import Lazy from 'svelte-lazy';
+
+    export let data;
+    
     let isLoaded = false;
     const usRegion = ['cle1','iad1','pdx1','sfo1'];
 
@@ -168,6 +171,7 @@ $: {
                 />
             </div>
 
+            {#if data?.user?.tier === 'Pro'}
             {#if isLoaded}
     
             {#if Object?.keys(rawData)?.length !== 0}
@@ -274,6 +278,13 @@ $: {
             </div>  
             {/if}
 
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
+            {/if}
+    
         </main>
     </section>
     

src/lib/components/WIIM.svelte

@@ -54,6 +54,7 @@ $: {
                 />
             </div>
             
+            {#if data?.user?.tier === 'Pro'}
             {#if wiim?.length !== 0}
             <div class="mt-7">
             {#each (showFullHistory ? wiim : wiim?.slice(0,2)) as item, index}
@@ -126,12 +127,13 @@ $: {
             </label>
             {/if}
             
-            {:else}
+            {/if}
-            <h2 class="mt-10 mb-5 flex justify-center items-center text-3xl font-bold text-slate-700 m-auto">
-                No data available
-                <svg class="w-10 sm:w-12 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#334155" d="M18.68 12.32a4.49 4.49 0 0 0-6.36.01a4.49 4.49 0 0 0 0 6.36a4.508 4.508 0 0 0 5.57.63L21 22.39L22.39 21l-3.09-3.11c1.13-1.77.87-4.09-.62-5.57m-1.41 4.95c-.98.98-2.56.97-3.54 0c-.97-.98-.97-2.56.01-3.54c.97-.97 2.55-.97 3.53 0c.97.98.97 2.56 0 3.54M10.9 20.1a6.527 6.527 0 0 1-1.48-2.32C6.27 17.25 4 15.76 4 14v3c0 2.21 3.58 4 8 4c-.4-.26-.77-.56-1.1-.9M4 9v3c0 1.68 2.07 3.12 5 3.7v-.2c0-.93.2-1.85.58-2.69C6.34 12.3 4 10.79 4 9m8-6C7.58 3 4 4.79 4 7c0 2 3 3.68 6.85 4h.05c1.2-1.26 2.86-2 4.6-2c.91 0 1.81.19 2.64.56A3.215 3.215 0 0 0 20 7c0-2.21-3.58-4-8-4Z"/></svg>
-            </h2>
 
+            {:else}
+            <div class="shadow-lg shadow-bg-[#000] bg-[#202020] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+                <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
+                Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+              </div>
             {/if}
     
         </main>

src/routes/etf/[tickerID]/+page.svelte

@@ -1337,7 +1337,7 @@ async function initializePrice() {
                                       <Lazy>
                                         <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
                                         {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
-                                          <svelte:component this={Comp} />
+                                          <svelte:component this={Comp} data={data}/>
                                         {/await}
                                       </div>
                                       </Lazy>

src/routes/stocks/[tickerID]/+page.svelte

@@ -1342,7 +1342,7 @@ function changeChartType() {
                                <Lazy>
                                 <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6 {!$retailVolumeComponent ? 'hidden' : ''}">
                                 {#await import('$lib/components/RetailVolume.svelte') then {default: Comp}}
-                                  <svelte:component this={Comp} />
+                                  <svelte:component this={Comp} data={data} />
                                 {/await}
                               </div>
                               </Lazy>
@@ -1351,7 +1351,7 @@ function changeChartType() {
                                 <Lazy>
                                   <div class="w-full mt-10 sm:mt-5 m-auto sm:pl-6 sm:pb-6 sm:pt-6">
                                   {#await import('$lib/components/ShareStatistics.svelte') then {default: Comp}}
-                                    <svelte:component this={Comp} />
+                                    <svelte:component this={Comp} data={data}/>
                                   {/await}
                                 </div>
                                 </Lazy>