feat: enhance news detail page with subscription prompt and content restriction for basic users

app/routes/_news.detail.$slug.tsx

@@ -1,4 +1,5 @@
-import { isRouteErrorResponse, redirect } from 'react-router'
+import { isRouteErrorResponse } from 'react-router'
+import { stripHtml } from 'string-strip-html'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
@@ -12,17 +13,21 @@ import type { Route } from './+types/_news.detail.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const { userToken: accessToken } = await handleCookie(request)
-  if (!accessToken) {
-    return redirect('/')
+  let userData
+  if (accessToken) {
+    const { data } = await getUser({ accessToken })
+    userData = data
   }
-  const { data: userData } = await getUser({ accessToken })
   const { slug } = params
-  const { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
-  if (
-    userData.subscribe.subscribe_plan.code === 'basic' &&
-    newsDetailData.is_premium
-  ) {
-    return redirect('/')
+  let { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
+  const shouldSubscribe =
+    (!accessToken || userData?.subscribe?.subscribe_plan?.code === 'basic') &&
+    newsDetailData?.is_premium
+  newsDetailData = {
+    ...newsDetailData,
+    content: shouldSubscribe
+      ? stripHtml(newsDetailData.content).result.slice(0, 600)
+      : newsDetailData.content,
   }
   const { data: categoriesData } = await getCategories()
   const beritaCode = 'berita'
@@ -36,21 +41,20 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
     newsDetailData,
     beritaCategory,
     beritaNews,
+    shouldSubscribe,
   }
 }
 
 export const meta = ({ data }: Route.MetaArgs) => {
-  if (data) {
-    const { newsDetailData } = data
-    const metaTitle = APP.title
-    const title = `${newsDetailData?.title} - ${metaTitle}`
+  const { newsDetailData } = data || {}
+  const metaTitle = APP.title
+  const title = `${newsDetailData?.title} - ${metaTitle}`
 
-    return [
-      {
-        title,
-      },
-    ]
-  }
+  return [
+    {
+      title,
+    },
+  ]
 }
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {