feat: refactor user handling in news components and add premium attribute logic

app/apis/news/get-user.ts

@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 
-const playerSchema = z.object({
+const userSchema = z.object({
   data: z.object({
     id: z.string(),
     email: z.string(),
@@ -12,10 +12,12 @@ const playerSchema = z.object({
   }),
 })
 
+export type TUser = z.infer<typeof userSchema>
+
 export const getUser = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/user/profile`)
-    return playerSchema.parse(data)
+    return userSchema.parse(data)
   } catch (error) {
     // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
     return Promise.reject(error)

app/components/ui/carousel-hero.tsx

@@ -1,14 +1,18 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback, useEffect, useState } from 'react'
+import { useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({ loop: false })
 
@@ -93,6 +97,7 @@ export const CarouselHero = (properties: TNews) => {
                       isPremium,
                       slug,
                       onClick: () => setIsSuccessOpen('warning'),
+                      userData,
                     })}
                   >
                     View More

app/components/ui/carousel-section.tsx

@@ -1,14 +1,18 @@
 import useEmblaCarousel from 'embla-carousel-react'
 import { useCallback, useEffect, useState } from 'react'
+import { useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CarouselSection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
   const { title, description, items } = properties
   const [emblaReference, emblaApi] = useEmblaCarousel({
     loop: false,
@@ -115,6 +119,7 @@ export const CarouselSection = (properties: TNews) => {
                         isPremium,
                         slug,
                         onClick: () => setIsSuccessOpen('warning'),
+                        userData,
                       })}
                       className="mb-5"
                     >

app/components/ui/category-section.tsx

@@ -1,14 +1,18 @@
+import { useRouteLoaderData } from 'react-router'
 import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_layout'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
+  const userData = loaderData?.userData
 
   const { title, description, items } = properties
 
@@ -86,6 +90,7 @@ export const CategorySection = (properties: TNews) => {
                     isPremium,
                     slug,
                     onClick: () => setIsSuccessOpen('warning'),
+                    userData,
                   })}
                   className="mb-5"
                 >

app/utils/render.tsx

@@ -1,15 +1,18 @@
 import type { MouseEventHandler } from 'react'
 import { Link } from 'react-router'
 
+import type { TUser } from '~/apis/news/get-user'
+
 type TGetPremiumAttribute = {
   isPremium?: boolean
   slug: string
   onClick: MouseEventHandler<HTMLElement>
+  userData?: TUser['data']
 }
 
 export const getPremiumAttribute = (parameters: TGetPremiumAttribute) => {
-  const { isPremium, slug, onClick } = parameters
-  if (isPremium) {
+  const { isPremium, slug, onClick, userData } = parameters
+  if (isPremium && (!userData || userData?.subscribe_plan_code === 'basic')) {
     return {
       onClick,
       to: '',