Files
kycnotme/web/src/components/VerificationWarningBanner.astro
2025-05-22 11:10:18 +00:00

90 lines
3.2 KiB
Plaintext

---
import { Icon } from 'astro-icon/components'
import { differenceInDays, isPast } from 'date-fns'
import { verificationStatusesByValue } from '../constants/verificationStatus'
import { cn } from '../lib/cn'
import TimeFormatted from './TimeFormatted.astro'
import type { Prisma } from '@prisma/client'
const RECENTLY_ADDED_DAYS = 7
type Props = {
service: Prisma.ServiceGetPayload<{
select: {
verificationStatus: true
verificationProofMd: true
verificationSummary: true
listedAt: true
createdAt: true
verificationSteps: {
select: {
status: true
}
}
}
}>
}
const { service } = Astro.props
const listedDate = service.listedAt ?? service.createdAt
const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), listedDate) < RECENTLY_ADDED_DAYS
---
{
service.verificationStatus === 'VERIFICATION_FAILED' ? (
<div class="mb-4 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
<p class="flex items-center gap-2">
<Icon
name={verificationStatusesByValue.VERIFICATION_FAILED.icon}
class={cn('size-5', verificationStatusesByValue.VERIFICATION_FAILED.classNames.icon)}
/>
<span class="font-bold">This service is a SCAM!</span>
{!!service.verificationProofMd && (
<a href="#verification" class="cursor-pointer text-red-100 underline">
Proof
</a>
)}
</p>
{!!service.verificationSummary && (
<div class="mt-2 wrap-anywhere whitespace-pre-wrap" set:text={service.verificationSummary} />
)}
</div>
) : service.verificationStatus === 'COMMUNITY_CONTRIBUTED' ? (
<div class="mb-3 flex items-center gap-2 rounded-md bg-yellow-600/30 p-2 text-sm text-yellow-200">
<Icon name="ri:alert-line" class="size-5 text-yellow-400" />
<span>Community-contributed. Information not reviewed.</span>
</div>
) : wasRecentlyAdded ? (
<div class="mb-3 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
This service was {service.listedAt === null ? 'added ' : 'listed '}{' '}
<TimeFormatted date={listedDate} daysUntilDate={RECENTLY_ADDED_DAYS} />
{service.verificationStatus !== 'VERIFICATION_SUCCESS' && ' and it is not verified'}. Proceed with
caution.
</div>
) : service.verificationStatus !== 'VERIFICATION_SUCCESS' ? (
<div class="mb-3 flex items-center gap-2 rounded-md bg-blue-600/30 p-2 text-sm text-blue-200">
<Icon name="ri:information-line" class="size-5 text-blue-400" />
<span>Basic checks passed, but not fully verified.</span>
</div>
) : null
}
{
service.verificationStatus !== 'VERIFICATION_FAILED' &&
service.verificationSteps.some((step) => step.status === 'FAILED') && (
<div class="mb-3 flex items-center gap-2 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
<Icon
name={verificationStatusesByValue.VERIFICATION_FAILED.icon}
class={cn('size-5', verificationStatusesByValue.VERIFICATION_FAILED.classNames.icon)}
/>
<span>
This service has failed one or more verification steps. Review the verification details carefully.
</span>
</div>
)
}