From 2f62b3d934c77348f409d550965cf15b0ff5278d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Thu, 12 Dec 2024 23:47:17 +0100
Subject: [PATCH] add modal for app && remove LTD

---
 src/lib/components/AppInstalled.svelte | 127 ++++++++++++++++++++
 src/lib/store.ts                       |   1 +
 src/routes/+page.svelte                |  87 ++++++--------
 src/routes/pricing/+page.svelte        | 158 +------------------------
 4 files changed, 164 insertions(+), 209 deletions(-)
 create mode 100644 src/lib/components/AppInstalled.svelte

diff --git a/src/lib/components/AppInstalled.svelte b/src/lib/components/AppInstalled.svelte
new file mode 100644
index 00000000..a1b3ae56
--- /dev/null
+++ b/src/lib/components/AppInstalled.svelte
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { closedPWA } from "$lib/store";
+
+  function setClosedPWA() {
+    const now = new Date();
+
+    const expirationDate = new Date(now.getTime() + 30 * 24 * 60 * 60 * 1000); // 30 days in milliseconds
+    localStorage.setItem(
+      "closePWA",
+      JSON.stringify({ value: true, expires: expirationDate }),
+    );
+
+    $closedPWA = true;
+  }
+</script>
+
+<svelte:head>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+  />
+</svelte:head>
+
+<div
+  class="mb-5 mt-5 relative isolate sm:rounded text-center flex sm:hidden justify-center items-center gap-x-6 overflow-hidden bg-[#FFC233] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
+>
+  <div
+    class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+    aria-hidden="true"
+  >
+    <div
+      class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+      style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
+    ></div>
+  </div>
+  <div
+    class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
+    aria-hidden="true"
+  >
+    <div
+      class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+      style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
+    ></div>
+  </div>
+  <div
+    class="w-full flex flex-row justify-between items-center gap-x-4 gap-y-2"
+  >
+    <p class="text-lg text-black font-semibold text-start">
+      Get the app for a better experience.
+    </p>
+
+    <div class="flex flex-row items-center">
+      <label
+        for="installModal"
+        class="flex-none rounded-full px-5 py-1 text-lg font-semibold text-black shadow-sm bg-[#fff] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+      >
+        Install
+      </label>
+      <label
+        on:click={setClosedPWA}
+        class="inline-block cursor-pointer text-[1.3rem]"
+      >
+        <svg
+          class="ml-2 w-8 h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="black"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          /></svg
+        >
+      </label>
+    </div>
+  </div>
+</div>
+
+<!--Start Create Watchlist Modal-->
+<input type="checkbox" id="installModal" class="modal-toggle" />
+
+<dialog id="installModal" class="modal overflow-hidden p-3 sm:p-0">
+  <label for="installModal" class="cursor-pointer modal-backdrop"></label>
+
+  <div class="modal-box rounded w-full bg-primary border border-gray-600">
+    <div class="flex flex-row items-center pt-5">
+      <h4 class="text-white text-2xl font-bold text-center m-auto">
+        Steps to install
+      </h4>
+      <label
+        for="installModal"
+        class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
+      >
+        <svg
+          class="w-6 h-6 sm:w-8 sm:h-8"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          ><path
+            fill="white"
+            d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
+          /></svg
+        >
+      </label>
+    </div>
+
+    <div
+      class="text-white flex flex-col justify-center items-center text-xl h-full"
+    >
+      <ul class="list-decimal list-inside text-left mt-5">
+        <li class="mb-2">Tap on the Safari share button.</li>
+        <li class="mb-2">Tap on "Add to Home Screen."</li>
+        <li class="mb-4">Tap on "Add."</li>
+
+        <p class="text-lg mb-4">
+          Note that web apps on iOS can only be installed using Safari.
+        </p>
+      </ul>
+    </div>
+
+    <div class="border-t border-gray-600 mt-2">
+      <label
+        for="installModal"
+        class="mt-4 font-semibold text-white text-xl m-auto flex justify-center"
+      >
+        Close
+      </label>
+    </div>
+  </div>
+</dialog>
diff --git a/src/lib/store.ts b/src/lib/store.ts
index 015446a9..2cc5b6fb 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -50,6 +50,7 @@ export const shouldUpdatePriceChart = writable(<boolean>false);
 export const coolMode = writable(<boolean>false);
 export const timeFrame =writable(<string>"Max");
 
+export const closedPWA = writable(<boolean>false);
 
 export const executiveClicked = writable(<boolean>false);
 export const secFilingsClicked = writable(<boolean>false);
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b760b75d..05e9008d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
   import HoverStockChart from "$lib/components/HoverStockChart.svelte";
   import { screenWidth, numberOfUnreadNotification } from "$lib/store";
   import { compareTimes, formatTime, isPWAInstalled } from "$lib/utils";
+  import { closedPWA } from "$lib/store";
 
   export let data;
   let optionsMode = "premium";
@@ -41,10 +42,38 @@
   }
   let Feedback;
   let pwaInstalled = false;
+  let AppInstalled = null;
+
+  function getClosedPWA() {
+    const item = localStorage.getItem("closePWA");
+    if (!item) return null;
+
+    const { value, expires } = JSON.parse(item);
+    if (new Date() > new Date(expires)) {
+      localStorage.removeItem("closePWA"); // Remove expired item
+      return null;
+    }
+    return value;
+  }
+
   onMount(async () => {
     pwaInstalled = isPWAInstalled();
+
+    if (!pwaInstalled) {
+      try {
+        $closedPWA = getClosedPWA();
+
+        if (!$closedPWA) {
+          // Dynamically import the AppInstalled component
+          AppInstalled = (await import("$lib/components/AppInstalled.svelte"))
+            .default;
+        }
+      } catch (e) {
+        console.error("Error loading AppInstalled component:", e);
+      }
+    }
+
     Feedback = (await import("$lib/components/Feedback.svelte")).default;
-    console.log(pwaInstalled);
   });
 
   $: charNumber = $screenWidth < 640 ? 20 : 15;
@@ -90,59 +119,9 @@
 <div
   class="w-full xl:max-w-screen-2xl overflow-hidden m-auto min-h-screen bg-[#09090B] mb-40"
 >
-  <!--
-  <div
-    class="mb-5 mt-5 relative isolate sm:rounded text-center flex sm:hidden justify-center items-center gap-x-6 overflow-hidden bg-[#FFC233] px-6 py-3.5 sm:py-2.5 sm:px-3.5 sm:before:flex-1"
-  >
-    <div
-      class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
-      aria-hidden="true"
-    >
-      <div
-        class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
-        style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
-      ></div>
-    </div>
-    <div
-      class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
-      aria-hidden="true"
-    >
-      <div
-        class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
-        style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"
-      ></div>
-    </div>
-    <div
-      class="w-full flex flex-row justify-between items-center gap-x-4 gap-y-2"
-    >
-      <p class="text-lg text-black font-semibold text-start">
-        Get the app for a better experience.
-      </p>
-
-      <div class="flex flex-row items-center">
-        <div
-          class="flex-none rounded-full px-3.5 py-1 text-lg font-semibold text-black shadow-sm bg-[#fff] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
-        >
-          Install
-        </div>
-        <label
-          for="feedbackInfo"
-          class="inline-block cursor-pointer text-[1.3rem] sm:text-[1.8rem]"
-        >
-          <svg
-            class="ml-2 w-8 h-8"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            ><path
-              fill="black"
-              d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
-            /></svg
-          >
-        </label>
-      </div>
-    </div>
-  </div>
-  -->
+  {#if AppInstalled && !$closedPWA}
+    <svelte:component this={AppInstalled} />
+  {/if}
 
   <!--
   {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial === true}
diff --git a/src/routes/pricing/+page.svelte b/src/routes/pricing/+page.svelte
index ad2436e7..b82b1266 100644
--- a/src/routes/pricing/+page.svelte
+++ b/src/routes/pricing/+page.svelte
@@ -42,10 +42,7 @@
     if (data?.user) {
       let subId = "";
       let value = 0;
-      if (subscriptionType === "lifeTime") {
-        subId = import.meta.env.VITE_LEMON_SQUEEZY_LIFE_TIME_ACCESS_ID;
-        value = 599;
-      } else if (mode) {
+      if (mode) {
         subId = import.meta.env.VITE_LEMON_SQUEEZY_ANNUAL_ID;
         value = 59.88;
       } else {
@@ -114,7 +111,7 @@
 </svelte:head>
 
 <section
-  class="bg-[#09090B] min-h-screen mb-40 w-full max-w-3xl sm:max-w-screen-xl pt-10 m-auto"
+  class="bg-[#09090B] min-h-screen mb-40 w-full max-w-3xl sm:max-w-screen-lg pt-10 m-auto"
 >
   <!--
   {#if data?.user?.tier !== "Pro" || data?.user?.freeTrial === true}
@@ -162,7 +159,7 @@
   <div class="px-3">
     <div class="mx-auto text-center mb-8">
       <h1
-        class="text-4xl sm:text-5xl font-bold bg-gradient-to-r from-[#E8BB28] to-purple-500 bg-clip-text text-transparent pb-4"
+        class="text-4xl sm:text-5xl font-bold text-white text-transparent pb-4"
       >
         Flexible plans and features
       </h1>
@@ -739,155 +736,6 @@
         </div>
       </div>
       <!--End Pricing Card-->
-
-      <!--Start Pricing Card-->
-
-      <div
-        class="sm:h-[660px] sm:order-2 box sm:-mt-10 flex flex-col p-6 lg:p-8 mx-auto ring-[1px] ring-gray-400 rounded-md w-full text-center text-white"
-      >
-        <div
-          class="absolute top-0 left-1/2 transform -translate-x-1/2 rounded-b-2xl flex flex-row border-l border-r border-b border-gray-400 items-center p-2"
-        >
-          <span class="text-white text-md font-semibold px-3">
-            Limited Offer
-          </span>
-        </div>
-
-        <div class="flex flex-row justify-start items-center mt-10">
-          <img
-            src={cloudFrontUrl + "/assets/life_time_access_logo.png"}
-            class="mr-4 w-28 transform ease-in-out duration-300"
-            loading="lazy"
-            alt="Lifetime tier"
-          />
-          <h2 class="text-4xl text-center font-bold text-white">Lifetime</h2>
-        </div>
-
-        <div class="flex flex-col mb-6 items-center">
-          <div class="flex flex-row items-center">
-            <span class="mr-2 text-4xl font-bold">$399</span>
-          </div>
-        </div>
-
-        <ol class="mb-8 space-y-4 text-left mt-6">
-          <li class="flex items-center space-x-3">
-            <svg
-              class="flex-shrink-0 w-5 h-5"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 48 48"
-              ><mask id="ipSSuccess0"
-                ><g
-                  fill="none"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="4"
-                  ><path
-                    fill="#fff"
-                    stroke="#fff"
-                    d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"
-                  /><path stroke="#09090B" d="m17 24l5 5l10-10" /></g
-                ></mask
-              ><path
-                fill="#00FC50"
-                d="M0 0h48v48H0z"
-                mask="url(#ipSSuccess0)"
-              /></svg
-            >
-            <span class="text-white text-[1rem] font-semibold"
-              >Everything in Pro Tier.</span
-            >
-          </li>
-          <li class="flex items-center space-x-3">
-            <svg
-              class="flex-shrink-0 w-5 h-5"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 48 48"
-              ><mask id="ipSSuccess0"
-                ><g
-                  fill="none"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="4"
-                  ><path
-                    fill="#fff"
-                    stroke="#fff"
-                    d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"
-                  /><path stroke="#09090B" d="m17 24l5 5l10-10" /></g
-                ></mask
-              ><path
-                fill="#00FC50"
-                d="M0 0h48v48H0z"
-                mask="url(#ipSSuccess0)"
-              /></svg
-            >
-            <span class="text-white text-[1rem] font-semibold"
-              >Pay Once and use forever.</span
-            >
-          </li>
-          <li class="flex items-center space-x-3">
-            <svg
-              class="flex-shrink-0 w-5 h-5"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 48 48"
-              ><mask id="ipSSuccess0"
-                ><g
-                  fill="none"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="4"
-                  ><path
-                    fill="#fff"
-                    stroke="#fff"
-                    d="m24 4l5.253 3.832l6.503-.012l1.997 6.188l5.268 3.812L41 24l2.021 6.18l-5.268 3.812l-1.997 6.188l-6.503-.012L24 44l-5.253-3.832l-6.503.012l-1.997-6.188l-5.268-3.812L7 24l-2.021-6.18l5.268-3.812l1.997-6.188l6.503.012L24 4Z"
-                  /><path stroke="#09090B" d="m17 24l5 5l10-10" /></g
-                ></mask
-              ><path
-                fill="#00FC50"
-                d="M0 0h48v48H0z"
-                mask="url(#ipSSuccess0)"
-              /></svg
-            >
-
-            <span class="text-white text-[1rem] font-semibold"
-              >If you ❤️ Stocknear and want to support us, this is the best way.</span
-            >
-          </li>
-        </ol>
-
-        <div class="divider"></div>
-        <div class="m-auto w-full text-white font-medium text-sm mb-6">
-          + Unlimited feature updates
-        </div>
-
-        <label
-          for={!data?.user ? "userLogin" : ""}
-          on:click={() => purchasePlan("lifeTime")}
-          class="cursor-pointer py-3 rounded-md text-black bg-[#fff] font-semibold sm:hover:bg-gray-300 transition duration-100 ease-in-out group"
-        >
-          Get Lifetime Access
-          <span
-            class="tracking-normal group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out"
-          >
-            <svg
-              class="w-4 h-4 inline-block"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              ><g transform="rotate(90 12 12)"
-                ><g fill="none"
-                  ><path
-                    d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"
-                  /><path
-                    fill="black"
-                    d="M13.06 3.283a1.5 1.5 0 0 0-2.12 0L5.281 8.939a1.5 1.5 0 0 0 2.122 2.122L10.5 7.965V19.5a1.5 1.5 0 0 0 3 0V7.965l3.096 3.096a1.5 1.5 0 1 0 2.122-2.122L13.06 3.283Z"
-                  /></g
-                ></g
-              ></svg
-            >
-          </span>
-        </label>
-      </div>
-
-      <!--End Pricing Card-->
     </div>
 
     <!--Feature Table-->