refer popup (#158)

yral-dapp · Apr 1, 2024 · 47eb42f · 47eb42f
1 parent b57b084
commit 47eb42f
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 35 deletions.
diff --git a/src/component/feed_popup.rs b/src/component/feed_popup.rs
@@ -0,0 +1,47 @@
+use leptos::{ev::MouseEvent, *};
+
+use crate::component::connect::ConnectLogin;
+
+#[component]
+pub fn FeedPopUp<F: Fn(MouseEvent) + 'static>(
+    on_click: F,
+    header_text: &'static str,
+    body_text: &'static str,
+    login_text: &'static str,
+) -> impl IntoView {
+    view! {
+        <div class="h-full w-full absolute bg-black opacity-90 z-50 flex flex-col justify-center" on:click=on_click>
+            <div class="flex flex-row justify-center">
+                <div class="flex flex-col justify-center w-9/12 sm:w-4/12 relative">
+                    <img
+                        class="h-28 w-28 absolute -left-4 -top-10"
+                        src="/img/coins/coin-topleft.svg"
+                    />
+                    <img
+                        class="h-18 w-18 absolute -right-2 -top-14"
+                        src="/img/coins/coin-topright.svg"
+                    />
+                    <img
+                        class="h-18 w-18 absolute -bottom-14 -left-8"
+                        src="/img/coins/coin-bottomleft.svg"
+                    />
+                    <img
+                        class="h-18 w-18 absolute -bottom-12 -right-2"
+                        src="/img/coins/coin-bottomright.svg"
+                    />
+                    <span class="text-white text-3xl text-center text-bold p-2 whitespace-pre-line">
+                        {header_text}
+                    </span>
+                    <span class="text-white text-center p-2 pb-4">
+                        {body_text}
+                    </span>
+                    <div class="flex justify-center">
+                        <div class="w-7/12 sm:w-4/12 z-[60]">
+                            <ConnectLogin login_text={login_text}/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+}
diff --git a/src/component/mod.rs b/src/component/mod.rs
@@ -6,6 +6,7 @@ pub mod base_route;
 pub mod bullet_loader;
 pub mod coming_soon;
 pub mod connect;
+pub mod feed_popup;
 pub mod ic_symbol;
 pub mod infinite_scroller;
 pub mod loading;

diff --git a/src/page/post_view/video_loader.rs b/src/page/post_view/video_loader.rs
@@ -1,7 +1,7 @@
 use crate::{
     canister::utils::{bg_url, mp4_url},
-    component::connect::ConnectLogin,
-    state::auth::account_connected_reader,
+    component::feed_popup::FeedPopUp,
+    state::{auth::account_connected_reader, local_storage::use_referrer_store},
 };
 use leptos::{html::Video, *};
 
@@ -20,6 +20,9 @@ pub fn BgView(idx: usize, children: Children) -> impl IntoView {
     let (is_connected, _) = account_connected_reader();
     let (show_login_popup, set_show_login_popup) = create_signal(true);
 
+    let (show_refer_login_popup, set_show_refer_login_popup) = create_signal(true);
+    let (referrer_store, _, _) = use_referrer_store();
+
     create_effect(move |_| {
         if current_idx.get() == 5 {
             set_show_login_popup.update(|n| *n = false);
@@ -35,39 +38,22 @@ pub fn BgView(idx: usize, children: Children) -> impl IntoView {
                 style:background-image=move || format!("url({})", bg_url(uid()))
             ></div>
             <Show when=move || { idx == 4 && !is_connected.get() && show_login_popup.get() }>
-            <div class="h-full w-full absolute bg-black opacity-90 z-50 flex flex-col justify-center" on:click=move |_| set_show_login_popup.set(false)>
-                    <div class="flex flex-row justify-center">
-                        <div class="flex flex-col justify-center w-9/12 sm:w-4/12 relative">
-                            <img
-                                class="h-28 w-28 absolute -left-4 -top-10"
-                                src="/img/coins/coin-topleft.svg"
-                            />
-                            <img
-                                class="h-18 w-18 absolute -right-2 -top-14"
-                                src="/img/coins/coin-topright.svg"
-                            />
-                            <img
-                                class="h-18 w-18 absolute -bottom-14 -left-8"
-                                src="/img/coins/coin-bottomleft.svg"
-                            />
-                            <img
-                                class="h-18 w-18 absolute -bottom-12 -right-2"
-                                src="/img/coins/coin-bottomright.svg"
-                            />
-                            <span class="text-white text-3xl text-center text-bold p-2">
-                                Your Rewards are <br/> Waiting!
-                            </span>
-                            <span class="text-white text-center p-2 pb-4">
-                                SignUp/Login to save your progress and claim your rewards.
-                            </span>
-                            <div class="flex justify-center">
-                                <div class="w-7/12 sm:w-4/12 z-[60]">
-                                    <ConnectLogin/>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <FeedPopUp
+                    on_click=move |_| set_show_login_popup.set(false)
+                    header_text = "Your Rewards are
+                                    Waiting!"
+                    body_text = "SignUp/Login to save your progress and claim your rewards."
+                    login_text = "Login"
+                />
+            </Show>
+            <Show when=move || { referrer_store.get().is_some() && idx == 0 && !is_connected.get() && show_refer_login_popup.get() }>
+                <FeedPopUp
+                    on_click=move |_| set_show_refer_login_popup.set(false)
+                    header_text = "Claim Your Referral
+                                    Rewards Now!"
+                    body_text = "SignUp from this link to get 500 COYNs as referral rewards."
+                    login_text = "Sign Up"
+                />
             </Show>
             {move || post().map(|post| view! { <VideoDetailsOverlay post/> })}
             {children()}