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

app/pages/news-detail/index.tsx

@@ -1,16 +1,20 @@
 import htmlParse from 'html-react-parser'
 import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'
+import { twMerge } from 'tailwind-merge'
 
+import { Button } from '~/components/ui/button'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { NewsAuthor } from '~/components/ui/news-author'
 import { SocialShareButtons } from '~/components/ui/social-share'
 import { Tags } from '~/components/ui/tags'
+import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news.detail.$slug'
 import type { TNews } from '~/types/news'
 
 export const NewsDetailPage = () => {
+  const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_news.detail.$slug',
   )
@@ -22,6 +26,7 @@ export const NewsDetailPage = () => {
   const currentUrl = globalThis.location
   const { title, content, featured_image, author, live_at, tags } =
     loaderData?.newsDetailData || {}
+  const { shouldSubscribe } = loaderData || {}
 
   const { text } = useReadingTime(content || '')
 
@@ -51,10 +56,23 @@ export const NewsDetailPage = () => {
             />
           </div>
 
-          <div className="mt-8 flex items-center justify-center">
-            <article className="prose prose-headings:my-0.5 prose-p:my-0.5">
+          <div className="mt-8 flex flex-col items-center justify-center gap-y-4">
+            <article
+              className={twMerge(
+                'prose prose-headings:my-0.5 prose-p:my-0.5',
+                shouldSubscribe ? 'line-clamp-5' : '',
+              )}
+            >
               {content && htmlParse(content)}
             </article>
+            {shouldSubscribe && (
+              <Button
+                onClick={() => setIsSuccessOpen('warning')}
+                className="w-full"
+              >
+                Read More
+              </Button>
+            )}
           </div>
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
             <div className="flex flex-col max-sm:mb-3">