Feat: affiliate page, missing username in view channel drawer

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mage-website",
-	"version": "0.0.11",
+	"version": "0.0.12",
 	"license": "GPL-3.0",
 	"private": true,
 	"type": "module",

src/hooks.server.ts

@@ -65,7 +65,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 		} else {
 			if (
 				pathname === '/maintenance' ||
-				(pathname === '/premium' && env.PUBLIC_FEATURE_PREMIUM_PAGE === 'false')
+				(pathname === '/affiliate' && env.PUBLIC_FEATURE_AFFILIATE === 'false')
 			) {
 				throw redirect(302, '/browse')
 			} else {

src/lib/assets/icons/affiliate/IconAffiliateCheck.svelte

@@ -0,0 +1,9 @@
+<svg
+	class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400"
+	fill="currentColor"
+	viewBox="0 0 20 20"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		fill-rule="evenodd"
+		d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+		clip-rule="evenodd" /></svg>

src/lib/assets/icons/affiliate/IconAffiliateVerification.svelte

@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6 text-green-500 dark:text-green-400">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>

src/lib/components/Affiliate/ItemPlan.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { page } from '$app/stores'
+	import IconAffiliateCheck from '$lib/assets/icons/affiliate/IconAffiliateCheck.svelte'
+	import IconAffiliateVerification from '$lib/assets/icons/affiliate/IconAffiliateVerification.svelte'
+
+	export let plan: any = {}
+</script>
+
+<div
+	class="card max-w-sm flex flex-col p-6 mx-auto text-center border border-gray-100 shadow dark:border-gray-600 xl:p-8">
+	<h3 class="text-2xl {plan.name === 'Affiliate' ? 'text-accent font-bold' : 'font-semibold'}">
+		{plan.name}
+	</h3>
+	<!-- <p class=" text-gray-500 sm:text-lg">
+		{plan.description}
+	</p> -->
+	<div class="flex justify-center items-baseline my-8">
+		<span class="mr-2 text-5xl font-extrabold">${plan.price}</span>
+		<span class="text-gray-500">/month</span>
+	</div>
+	<ul class="mb-8 space-y-4 text-left">
+		{#each plan.features as feature}
+			<li class="flex items-center space-x-3">
+				<IconAffiliateCheck />
+				<span>{feature}</span>
+			</li>
+		{/each}
+
+		{#if plan.features2.length}
+			<div class="divider text-accent font-bold">Requires Affiliate verification</div>
+			{#each plan.features2 as feature}
+				<li class="flex items-center space-x-3">
+					<IconAffiliateVerification />
+					<span>{feature}</span>
+				</li>
+			{/each}
+		{/if}
+	</ul>
+	{#if $page.data.user?.userId}
+		<form>
+			<div class="flex flex-col space-y-3">
+				{#if plan.name === 'Affiliate'}
+					<button
+						class="btn btn-accent px-5 py-2.5 text-black"
+						disabled={$page.data.user?.user?.affiliateTier > 0}
+						>{$page.data.user?.user?.affiliateTier > 0 ? 'Selected' : 'Select'}</button>
+					{#if $page.data.user?.user?.affiliateTier === 1}
+						<a
+							href="https://forms.gle/mBtByR6jdoJeQd367"
+							class="link link-accent link-hover font-bold">
+							Apply for verification
+						</a>
+					{/if}
+				{:else}
+					<button
+						class="btn btn-neutral px-5 py-2.5"
+						disabled={$page.data.user?.user?.affiliateTier === 0}
+						>{$page.data.user?.user?.affiliateTier === 0 ? 'Selected' : 'Select'}</button>
+				{/if}
+			</div>
+		</form>
+	{/if}
+</div>

src/lib/components/Browse/Sections/ItemCarousel.svelte

@@ -48,7 +48,7 @@
 			<p class="text-2xl truncate text-white font-semibold">{channel.title || ''}</p>
 			<div class="flex flex-row items-center gap-2">
 				<div class="avatar">
-					<div class="w-14 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+					<div class="w-14 mask {channel?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 						<img src={channel.avatar} alt="" />
 					</div>
 				</div>

src/lib/components/Browse/Sections/ItemChannel.svelte

@@ -46,7 +46,7 @@
 	<p class="text-lg font-semibold truncate">{channel.title}</p>
 	<div class="flex flex-row gap-2 max-w-[25rem]">
 		<div class="avatar">
-			<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+			<div class="w-12 mask {channel?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 				<img src={channel.avatar} alt="" />
 			</div>
 		</div>

src/lib/components/Browse/Sections/ItemTable.svelte

@@ -11,7 +11,7 @@
 	<td>
 		<div class="flex items-center space-x-2 my-3 pl-3">
 			<div class="avatar">
-				<div class="w-12 mask {channel?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+				<div class="w-12 mask {channel?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 					<img src={channel.avatar} alt="" />
 				</div>
 			</div>

src/lib/components/Browse/Sections/ItemUser.svelte

@@ -7,7 +7,7 @@
 <a class="p-4 bg-base-100 hover:bg-base-300 shrink-0 rounded-md" href="/profile/{user.username}">
 	<div class="text-center space-y-3 w-[200px]">
 		<div class="avatar">
-			<div class="w-36 mask {user?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+			<div class="w-36 mask {user?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 				<img src={user.avatar} alt="" />
 			</div>
 		</div>

src/lib/components/Browse/Sections/SectionTable.svelte

@@ -12,12 +12,12 @@
 	let limit = 100
 	let moreChannels: any[] = []
 	const loadMore = async () => {
-		let endpoint = profileId ? `channels/user?userId=${profileId}?` : 'channels?'
-		const infiniteChannels = await get(`${endpoint}skip=${skip}&limit=${limit}`)
-		if (infiniteChannels?.length) {
-			moreChannels = [...moreChannels, ...infiniteChannels]
-			skip += limit
-		}
+		// let endpoint = profileId ? `channels/user?userId=${profileId}?` : 'channels?'
+		// const infiniteChannels = await get(`${endpoint}skip=${skip}&limit=${limit}`)
+		// if (infiniteChannels?.length) {
+		// 	moreChannels = [...moreChannels, ...infiniteChannels]
+		// 	skip += limit
+		// }
 	}
 </script>
 

src/lib/components/Channel/Chat/ChatInput.svelte

@@ -20,8 +20,10 @@
 		$channel_connection === `open-${channel._id}` && $page.data.user?.userId
 	$: isHost = channel.user === $page.data.user?.userId
 
-	$: viewersWithOutHost = viewers.filter((viewer) => viewer.userId !== channel.user)
-$: console.log("viewers : ", viewers)
+	$: viewersWithOutHost = viewers.filter(
+		(viewer) => viewer.userId !== channel.user && viewer.userId === 'anon'
+	)
+	$: console.log('viewers : ', viewers)
 	function insert(str: string, index: number, value: string) {
 		return str.substr(0, index) + value + str.substr(index)
 	}
@@ -68,11 +70,10 @@ $: console.log("viewers : ", viewers)
 	}
 
 	const slectUserfromKey = (key: string) => {
-		if(selectedUser >= viewersWithOutHost.length - 1){
+		if (selectedUser >= viewersWithOutHost.length - 1) {
 			selectedUser = 0
-			return 
-		}
-		else if(selectedUser === 0){
+			return
+		} else if (selectedUser === 0) {
 			selectedUser = viewersWithOutHost.length - 1
 			return
 		}
@@ -213,7 +214,6 @@ $: console.log("viewers : ", viewers)
 		!chatMessage.includes('@') &&
 		(channel.user === $page.data.user?.userId || channel.mods?.includes($page.data.user?.userId)) &&
 		!showUsers
-
 </script>
 
 <form class="rounded-lg bg-base-200 p-2 w-full relative">

src/lib/components/Channel/Chat/DropdownViewChannel.svelte

@@ -68,7 +68,6 @@
 	}
 
 	$: useEffect(() => {
-		if (!$page.data.user?.userId) return
 		getHostAndRelationship()
 	}, [channel?._id])
 </script>
@@ -121,7 +120,7 @@
 			<a href="/profile/{host?.username}">
 				<div class="flex flex-wrap gap-2">
 					<div class="avatar online">
-						<div class="w-12 mask {host?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+						<div class="w-12 mask {host?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 							<img src={host?.avatar} alt="" />
 						</div>
 					</div>

src/lib/components/Channel/Stream/DropdownViewers.svelte

@@ -29,8 +29,8 @@
 		var parsedMsg = JSON.parse(value)
 		if (parsedMsg.eventName === `channel-paginated-users-${channel?._id}`) {
 			let users = parsedMsg.users.map((user: any) => {
-				user.userId = user.userId || 'guest'
-				user.username = user.username || 'guest'
+				user.userId = user.userId || 'anonymous'
+				user.username = user.username || 'anonymous'
 				const role = setRole({
 					userId: user.userId,
 					channel,

src/lib/components/Channel/Stream/VideoItem.svelte

@@ -345,7 +345,7 @@
 		<img
 			src={video.avatar}
 			alt=""
-			class="absolute inset-0 w-24 md:w-24 mask {video?.isPaidPlan
+			class="absolute inset-0 w-24 md:w-24 mask {video?.affiliateTier > 1
 				? 'mask-hexagon'
 				: 'mask-squircle'} object-cover m-auto" />
 		<div class="absolute inset-0">

src/lib/components/Global/DrawerMain.svelte

@@ -4,7 +4,6 @@
 	import IconDrawerHome from '$lib/assets/icons/drawer/IconDrawerHome.svelte'
 	import IconDrawerVideos from '$lib/assets/icons/drawer/IconDrawerVideos.svelte'
 	import IconDrawerCreatorSpace from '$lib/assets/icons/drawer/IconDrawerCreatorSpace.svelte'
-	import IconDrawerPremium from '$lib/assets/icons/drawer/IconDrawerPremium.svelte'
 	import IconDrawerCareers from '$lib/assets/icons/drawer/IconDrawerCareers.svelte'
 	import IconDrawerHelpAndLegal from '$lib/assets/icons/drawer/IconDrawerHelpAndLegal.svelte'
 	import IconDrawerSettings from '$lib/assets/icons/drawer/IconDrawerSettings.svelte'
@@ -17,7 +16,6 @@
 	import { page } from '$app/stores'
 	import { user_role } from '$lib/stores/authStore'
 	import {
-		is_feature_premium_page_enabled,
 		is_feature_video_responses_enabled,
 		is_feature_affiliate_enabled
 	} from '$lib/stores/remoteConfigStore'
@@ -89,7 +87,8 @@
 							<div class="flex gap-3 {isChannelPage ? 'max-w-md' : 'max-w-full'}">
 								<div class="avatar {$isOnline ? 'online' : 'offline'}">
 									<div
-										class="w-24 {isChannelPage ? 'md:w-12' : ''} mask {currentUser?.isPaidPlan
+										class="w-24 {isChannelPage ? 'md:w-12' : ''} mask {currentUser?.affiliateTier >
+										1
 											? 'mask-hexagon'
 											: 'mask-squircle'}">
 										<img src={currentUser.avatar} alt="" />
@@ -164,11 +163,11 @@
 					Creator Space</a>
 			</li>
 		{/if}
-		{#if currentUser && $is_feature_premium_page_enabled}
+		{#if currentUser && $is_feature_affiliate_enabled}
 			<li>
-				<a href="/premium" class="custom-menu-item text-accent hover:text-accent font-medium">
-					<IconDrawerPremium />
-					<span class={isChannelPage ? 'md:hidden' : ''}>Premium</span>
+				<a href="/affiliate" class="custom-menu-item text-accent hover:text-accent font-medium">
+					<IconDrawerVerification />
+					<span class={isChannelPage ? 'md:hidden' : ''}>Affiliate</span>
 					{#if !isChannelPage}
 						<span class="badge badge-accent text-black">New</span>
 					{/if}
@@ -181,17 +180,6 @@
 				<span class={isChannelPage ? 'md:hidden' : ''}>Careers</span>
 			</a>
 		</li>
-		{#if currentUser && $is_feature_affiliate_enabled}
-			<li>
-				<a href="https://forms.gle/mBtByR6jdoJeQd367" class="custom-menu-item" target="_blank">
-					<IconDrawerVerification />
-					<span class={isChannelPage ? 'md:hidden' : ''}>Affiliate</span>
-					{#if !isChannelPage}
-						<span class="badge badge-neutral">New</span>
-					{/if}
-				</a>
-			</li>
-		{/if}
 		<li>
 			<details>
 				<summary class="custom-menu-item"

src/lib/components/Profile/TabSection.svelte

@@ -2,10 +2,7 @@
 	import ListSubscribe from '$lib/components/Profile/ListSubscribe.svelte'
 	import SectionTable from '$lib/components/Browse/Sections/SectionTable.svelte'
 	import Stats from '$lib/components/Profile/Elements/Stats.svelte'
-	import {
-		is_feature_stats_enabled,
-		is_feature_follows_enabled
-	} from '$lib/stores/remoteConfigStore'
+	import { is_feature_stats_enabled } from '$lib/stores/remoteConfigStore'
 	import { onMount } from 'svelte'
 	import { env } from '$env/dynamic/public'
 
@@ -19,10 +16,8 @@
 	let activeTab = 0
 
 	onMount(() => {
-		$is_feature_follows_enabled = env.PUBLIC_FEATURE_FOLLOWS === 'true'
 		$is_feature_stats_enabled = env.PUBLIC_FEATURE_STATS === 'true'
-		tabs = ['Channels']
-		if ($is_feature_follows_enabled) tabs.push('Followers')
+		tabs = ['Channels', 'Followers']
 		if ($is_feature_stats_enabled) tabs.push('Stats')
 	})
 </script>
@@ -41,11 +36,9 @@
 			<div class="flex-auto h-full text-left" class:hidden={activeTab != tabs.indexOf('Channels')}>
 				<SectionTable {channels} {profileId} />
 			</div>
-			{#if $is_feature_follows_enabled}
-				<div class="flex-auto h-full" class:hidden={activeTab != tabs.indexOf('Followers')}>
-					<ListSubscribe {profileId} />
-				</div>
-			{/if}
+			<div class="flex-auto h-full" class:hidden={activeTab != tabs.indexOf('Followers')}>
+				<ListSubscribe {profileId} />
+			</div>
 			{#if $is_feature_stats_enabled}
 				<div class="grid h-full" class:hidden={activeTab != tabs.indexOf('Stats')}>
 					<Stats {totalPageViews} {highestAndCurrentStreak} {totalAndAvgHours} />

src/lib/components/Profile/TopSection.svelte

@@ -11,7 +11,6 @@
 
 	const useOueryEffect = createEffect()
 
-
 	$: auth = {
 		userId: $page.data.user?.userId,
 		token: $page.data.user?.token
@@ -57,7 +56,7 @@
 				<div class="w-32 h-32">
 					<div class="avatar -top-16 {profile.isOnline ? 'online' : 'offline'}">
 						<div
-							class="mask {profile?.isPaidPlan
+							class="mask {profile?.affiliateTier > 1
 								? 'mask-hexagon'
 								: 'mask-squircle'} h-auto align-middle max-w-150-px">
 							<img src={profile.avatar} alt="" class="!w-32 !h-32" />

src/lib/components/Search/ItemSearchChannel.svelte

@@ -55,7 +55,7 @@
 
 					<div class="flex items-center">
 						<div class="avatar">
-							<div class="w-12 mask {item?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+							<div class="w-12 mask {item?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 								<img src={item.avatar} alt="" />
 							</div>
 						</div>

src/lib/components/Search/ItemSearchUser.svelte

@@ -11,7 +11,7 @@
 			<div class="flex-col md:flex-row gap-4 w-full contents">
 				<div class="max-w-md">
 					<div class="avatar">
-						<div class="w-32 mask {item?.isPaidPlan ? 'mask-hexagon' : 'mask-squircle'}">
+						<div class="w-32 mask {item?.affiliateTier > 1 ? 'mask-hexagon' : 'mask-squircle'}">
 							<img loading="lazy" src={item.avatar} alt="" />
 						</div>
 					</div>

src/lib/stores/remoteConfigStore.ts

@@ -1,7 +1,5 @@
 import { writable, type Writable } from 'svelte/store'
 
 export const is_feature_video_responses_enabled: Writable<boolean> = writable(false)
-export const is_feature_premium_page_enabled: Writable<boolean> = writable(false)
-export const is_feature_follows_enabled: Writable<boolean> = writable(false)
 export const is_feature_stats_enabled: Writable<boolean> = writable(false)
 export const is_feature_affiliate_enabled: Writable<boolean> = writable(false)