refactor: update SuccessModal and News context for improved state management and clarity

app/components/popup/success-modal.tsx

@@ -31,10 +31,9 @@ const DESCRIPTIONS: DescriptionMap = {
 }
 
 export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
-  if (!isOpen) return
+  const message = isOpen
-
+    ? DESCRIPTIONS[isOpen]
-  const message =
+    : 'Terjadi kesalahan. Silakan coba lagi.'
-    DESCRIPTIONS[isOpen] || 'Terjadi kesalahan. Silakan coba lagi.'
 
   return (
     <Dialog
@@ -48,7 +47,10 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
         transition
       />
       <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-4 max-sm:bg-white sm:items-center">
-        <DialogPanel className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg">
+        <DialogPanel
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+          transition
+        >
           <DialogTitle className="relative flex justify-center">
             <button
               onClick={onClose}
@@ -73,7 +75,8 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
           <div className="relative">
             <div className="relative flex flex-col items-center justify-center">
               <div className="mb-4 p-4 text-center">
-                {['resetPassword', 'register', 'payment'].includes(isOpen) && (
+                {isOpen &&
+                  ['resetPassword', 'register', 'payment'].includes(isOpen) && (
                     <div className="justify-center">
                       <img
                         src={'/images/back-to-home.svg'}

app/components/ui/carousel.tsx

@@ -4,11 +4,13 @@ import { twMerge } from 'tailwind-merge'
 
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+import { useNewsContext } from '~/contexts/news'
 import type { TNews } from '~/types/news'
 
 import { Button } from './button'
 
 export const Carousel = (properties: TNews) => {
+  const { setIsSuccessOpen } = useNewsContext()
   const [currentIndex, setCurrentIndex] = useState(0)
   const { pathname } = useLocation()
   const hasCategory = pathname.includes('/category/')
@@ -65,7 +67,7 @@ export const Carousel = (properties: TNews) => {
       >
         {items
           .slice(currentIndex * itemsPerPage, (currentIndex + 1) * itemsPerPage)
-          .map(({ featured, title, content, tags, slug }, index) => (
+          .map(({ featured, title, content, tags, slug, isPremium }, index) => (
             <div
               key={index}
               className={twMerge(
@@ -89,15 +91,25 @@ export const Carousel = (properties: TNews) => {
                   type === 'hero' ? 'gap-7' : 'gap-4',
                 )}
               >
-                <div className={`${type === 'hero' ? 'hidden' : ''} `}>
+                <div
-                  {tags?.map((item, index) => (
+                  className={twMerge(
+                    'uppercase',
+                    type === 'hero' ? 'hidden' : '',
+                  )}
+                >
+                  {tags?.map((item) => (
                     <span
-                      key={index}
+                      key={`${index}-${item}`}
-                      className="my-3 mr-2 inline-block rounded bg-gray-200 px-3 py-1"
+                      className="my-3 mr-2 inline-block rounded bg-[#F4F4F4] px-3 py-1 font-bold text-[#777777]"
                     >
                       {item}
                     </span>
                   ))}
+                  {isPremium && (
+                    <span className="my-3 mr-2 inline-block rounded bg-[#D1C675] px-3 py-1 font-bold text-[#9D761D]">
+                      Premium Content
+                    </span>
+                  )}
                 </div>
 
                 <div>
@@ -117,8 +129,14 @@ export const Carousel = (properties: TNews) => {
                 </div>
                 <Button
                   size="block"
-                  as={Link}
+                  {...(isPremium
-                  to={`detail/${slug}`}
+                    ? {
+                        onClick: () => {
+                          setIsSuccessOpen('warning')
+                        },
+                        to: '',
+                      }
+                    : { as: Link, to: `/news/detail/${slug}` })}
                   className={twMerge('', type === 'hero' ? '' : 'mb-5')}
                 >
                   View More

app/contexts/news.tsx

@@ -16,8 +16,8 @@ export type NewsContextProperties = {
   setIsRegisterOpen: Dispatch<SetStateAction<boolean>>
   isForgetOpen: boolean
   setForgetOpen: Dispatch<SetStateAction<boolean>>
-  isSuccessModalOpen?: ModalProperties['isOpen']
+  isSuccessOpen: ModalProperties['isOpen']
-  setIsSuccessModalOpen?: Dispatch<
+  setIsSuccessOpen: Dispatch<
     SetStateAction<ModalProperties['isOpen'] | undefined>
   >
   isInitSubscribeOpen: boolean
@@ -30,7 +30,7 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
   const [isLoginOpen, setIsLoginOpen] = useState(false)
   const [isRegisterOpen, setIsRegisterOpen] = useState(false)
   const [isForgetOpen, setForgetOpen] = useState(false)
-  const [isSuccessModalOpen, setIsSuccessModalOpen] =
+  const [isSuccessOpen, setIsSuccessOpen] =
     useState<ModalProperties['isOpen']>()
   const [isInitSubscribeOpen, setIsInitSubscribeOpen] = useState(false)
 
@@ -43,8 +43,8 @@ export const NewsProvider = ({ children }: PropsWithChildren) => {
         setIsRegisterOpen,
         isForgetOpen,
         setForgetOpen,
-        isSuccessModalOpen,
+        isSuccessOpen,
-        setIsSuccessModalOpen,
+        setIsSuccessOpen,
         isInitSubscribeOpen,
         setIsInitSubscribeOpen,
       }}

app/layouts/news/default.tsx

@@ -23,8 +23,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
     setIsRegisterOpen,
     isForgetOpen,
     setForgetOpen,
-    isSuccessModalOpen,
+    isSuccessOpen,
-    setIsSuccessModalOpen,
+    setIsSuccessOpen,
     isInitSubscribeOpen,
     setIsInitSubscribeOpen,
   } = useNewsContext()
@@ -82,11 +82,9 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
       </PopupModal>
 
       <SuccessModal
-        isOpen={isSuccessModalOpen}
+        isOpen={isSuccessOpen}
         onClose={() => {
-          if (setIsSuccessModalOpen) {
+          setIsSuccessOpen(undefined)
-            setIsSuccessModalOpen(undefined)
-          }
         }}
       />
     </main>