90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
import FullPageLoadingState from '@/components/full-page-loading-state';
|
|
import { PublicPageCard } from '@/components/public-page-card';
|
|
import { Button, LinkButton } from '@/components/ui/button';
|
|
import { useTRPC } from '@/integrations/trpc/react';
|
|
import { emailCategories } from '@openpanel/constants';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { createFileRoute, useSearch } from '@tanstack/react-router';
|
|
import { useState } from 'react';
|
|
import { z } from 'zod';
|
|
|
|
const unsubscribeSearchSchema = z.object({
|
|
email: z.string().email(),
|
|
category: z.string(),
|
|
token: z.string(),
|
|
});
|
|
|
|
export const Route = createFileRoute('/unsubscribe')({
|
|
component: RouteComponent,
|
|
validateSearch: unsubscribeSearchSchema,
|
|
pendingComponent: FullPageLoadingState,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const search = useSearch({ from: '/unsubscribe' });
|
|
const { email, category, token } = search;
|
|
const trpc = useTRPC();
|
|
const [isUnsubscribing, setIsUnsubscribing] = useState(false);
|
|
const [isSuccess, setIsSuccess] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const unsubscribeMutation = useMutation(
|
|
trpc.email.unsubscribe.mutationOptions({
|
|
onSuccess: () => {
|
|
setIsSuccess(true);
|
|
setIsUnsubscribing(false);
|
|
},
|
|
onError: (err) => {
|
|
setError(err.message || 'Failed to unsubscribe');
|
|
setIsUnsubscribing(false);
|
|
},
|
|
}),
|
|
);
|
|
|
|
const handleUnsubscribe = () => {
|
|
setIsUnsubscribing(true);
|
|
setError(null);
|
|
unsubscribeMutation.mutate({ email, category, token });
|
|
};
|
|
|
|
const categoryName =
|
|
emailCategories[category as keyof typeof emailCategories] || category;
|
|
|
|
if (isSuccess) {
|
|
return (
|
|
<PublicPageCard
|
|
title="Unsubscribed"
|
|
description={`You've been unsubscribed from ${categoryName} emails. You won't receive any more ${categoryName.toLowerCase()} emails from
|
|
us.`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<PublicPageCard
|
|
title="Unsubscribe"
|
|
description={
|
|
<>
|
|
Unsubscribe from {categoryName} emails? You'll stop receiving{' '}
|
|
{categoryName.toLowerCase()} emails sent to
|
|
<span className="">{email}</span>
|
|
</>
|
|
}
|
|
>
|
|
<div className="col gap-3">
|
|
{error && (
|
|
<div className="bg-destructive/10 text-destructive px-4 py-3 rounded-md text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<Button onClick={handleUnsubscribe} disabled={isUnsubscribing}>
|
|
{isUnsubscribing ? 'Unsubscribing...' : 'Confirm Unsubscribe'}
|
|
</Button>
|
|
<LinkButton href="/" variant="ghost">
|
|
Cancel
|
|
</LinkButton>
|
|
</div>
|
|
</PublicPageCard>
|
|
);
|
|
}
|