legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into feature/slicing

Browse Source
This commit is contained in:
fredy.siswanto
2025-03-02 20:15:47 +07:00
parent c4297a8167 0a6f1a2d6f
commit 9da31472f9
7 changed files with 108 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/popup/success-modal.tsx
+56 -41
View File
@@ -6,10 +6,13 @@ import {
DialogTitle,
} from '@headlessui/react'
import type { ReactNode } from 'react'
import { useRouteLoaderData } from 'react-router'
import { LeftArrow } from '~/components/icons/left-arrow'
import { Button } from '~/components/ui/button'
import { APP } from '~/configs/meta'
import { useNewsContext } from '~/contexts/news'
import type { loader } from '~/routes/_layout'
export type ModalProperties = {
onClose: () => void
@@ -31,6 +34,10 @@ const DESCRIPTIONS: DescriptionMap = {
}
export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
const { setIsLoginOpen, setIsInitSubscribeOpen } = useNewsContext()
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const userData = loaderData?.userData
const message = isOpen
? DESCRIPTIONS[isOpen]
: 'Terjadi kesalahan. Silakan coba lagi.'
@@ -74,48 +81,56 @@ 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">
{isOpen &&
['resetPassword', 'register', 'payment'].includes(isOpen) && (
<div className="justify-center">
<img
src={'/images/back-to-home.svg'}
alt={APP.title}
className="h-[300px]"
/>
<Button
className="mt-5 w-full rounded-md"
variant={'newsPrimary'}
onClick={onClose}
>
Back to Home
</Button>
</div>
{['resetPassword', 'register', 'payment'].includes(
isOpen || '',
) && (
<>
<img
src={'/images/back-to-home.svg'}
alt={APP.title}
className="h-[300px]"
/>
<Button
className="mt-5 w-full rounded-md"
variant="newsPrimary"
onClick={onClose}
>
Back to Home
</Button>
</>
)}
{isOpen === 'warning' && (
<>
<img
src={'/images/warning.svg'}
alt={APP.title}
className="h-[300px]"
/>
{userData ? (
<Button
className="mt-5 w-full rounded-md"
variant="newsSecondary"
onClick={() => {
onClose()
setIsInitSubscribeOpen(true)
}}
>
Select Subscription
</Button>
) : (
<Button
className="mt-5 w-full rounded-md"
variant="newsPrimary"
onClick={() => {
onClose()
setIsLoginOpen(true)
}}
>
Login
</Button>
)}
{isOpen === 'warning' && (
<div className="justify-center">
<img
src={'/images/warning.svg'}
alt={APP.title}
className="h-[300px]"
/>
<div>
<Button
className="mt-5 w-full rounded-md"
variant={'newsPrimary'}
>
Login
</Button>
<Button
className="mt-5 w-full rounded-md"
variant={'newsSecondary'}
>
Select Subscription
</Button>
</div>
</div>
)}
</div>
</>
)}
</div>
</div>
</DialogPanel>
app/components/ui/carousel-hero.tsx
+6 -9
View File
@@ -1,11 +1,11 @@
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback, useEffect, useState } from 'react'
import { Link } from 'react-router'
import { Button } from '~/components/ui/button'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'
export const CarouselHero = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@@ -89,14 +89,11 @@ export const CarouselHero = (properties: TNews) => {
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
{...getPremiumAttribute({
isPremium,
slug,
onClick: () => setIsSuccessOpen('warning'),
})}
>
View More
</Button>
app/components/ui/carousel-section.tsx
+6 -9
View File
@@ -1,11 +1,11 @@
import useEmblaCarousel from 'embla-carousel-react'
import { useCallback, useEffect, useState } from 'react'
import { Link } from 'react-router'
import { Button } from '~/components/ui/button'
import { CarouselButton } from '~/components/ui/button-slide'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'
export const CarouselSection = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@@ -111,14 +111,11 @@ export const CarouselSection = (properties: TNews) => {
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
{...getPremiumAttribute({
isPremium,
slug,
onClick: () => setIsSuccessOpen('warning'),
})}
className="mb-5"
>
View More
app/components/ui/category-section.tsx
+6 -9
View File
@@ -1,4 +1,3 @@
import { Link } from 'react-router'
import { twMerge } from 'tailwind-merge'
import { CarouselNextIcon } from '~/components/icons/carousel-next'
@@ -6,6 +5,7 @@ import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
import { Button } from '~/components/ui/button'
import { useNewsContext } from '~/contexts/news'
import type { TNews } from '~/types/news'
import { getPremiumAttribute } from '~/utils/render'
export const CategorySection = (properties: TNews) => {
const { setIsSuccessOpen } = useNewsContext()
@@ -82,14 +82,11 @@ export const CategorySection = (properties: TNews) => {
</div>
<Button
size="block"
{...(isPremium
? {
onClick: () => {
setIsSuccessOpen('warning')
},
to: '',
}
: { as: Link, to: `/detail/${slug}` })}
{...getPremiumAttribute({
isPremium,
slug,
onClick: () => setIsSuccessOpen('warning'),
})}
className="mb-5"
>
View More