Add WhatsApp integration and subscription expiry.
- Updated subscription card to reflect WhatsApp integration. - Removed "Exportação de dados" benefit. - Added placeholder for subscription expiry date display. - Identified requirements for subscription expiry logic.
This commit is contained in:
parent
17f2de2a73
commit
363e5ac6a4
@ -13,9 +13,16 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { ptBR } from "date-fns/locale";
|
||||||
|
|
||||||
const Configuracoes = () => {
|
const Configuracoes = () => {
|
||||||
const [tab, setTab] = useState("visao-geral");
|
const [tab, setTab] = useState("visao-geral");
|
||||||
|
const [subscription] = useState({
|
||||||
|
active: true,
|
||||||
|
planName: "Plano Mensal Finance Home",
|
||||||
|
expires_at: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 15),
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
@ -45,10 +52,7 @@ const Configuracoes = () => {
|
|||||||
<MeuCadastroForm />
|
<MeuCadastroForm />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="assinatura">
|
<TabsContent value="assinatura">
|
||||||
<div className="w-full max-w-md mx-auto">
|
<div className="w-full max-w-md mx-auto space-y-6">
|
||||||
<h2 className="text-3xl font-bold text-center mb-6">
|
|
||||||
Assinatura Mensal
|
|
||||||
</h2>
|
|
||||||
<Card className="shadow-lg animate-fade-in">
|
<Card className="shadow-lg animate-fade-in">
|
||||||
<CardHeader className="items-center text-center p-6">
|
<CardHeader className="items-center text-center p-6">
|
||||||
<CardTitle className="text-2xl">
|
<CardTitle className="text-2xl">
|
||||||
@ -78,7 +82,7 @@ const Configuracoes = () => {
|
|||||||
<li className="flex items-center gap-3">
|
<li className="flex items-center gap-3">
|
||||||
<Check className="h-5 w-5 text-primary" />
|
<Check className="h-5 w-5 text-primary" />
|
||||||
<span className="text-muted-foreground">
|
<span className="text-muted-foreground">
|
||||||
Exportação de dados
|
Integração com WhatsApp
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -90,6 +94,36 @@ const Configuracoes = () => {
|
|||||||
<Button className="w-full sm:w-auto">Assinar Agora</Button>
|
<Button className="w-full sm:w-auto">Assinar Agora</Button>
|
||||||
</CardFooter>
|
</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
{subscription.active && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Sua Assinatura Atual</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Obrigado por ser um assinante!
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
<p className="font-medium">
|
||||||
|
Plano:{" "}
|
||||||
|
<span className="font-normal text-muted-foreground">
|
||||||
|
{subscription.planName}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="font-medium">
|
||||||
|
Vence em:{" "}
|
||||||
|
<span className="font-normal text-muted-foreground">
|
||||||
|
{format(subscription.expires_at, "dd 'de' MMMM 'de' yyyy", {
|
||||||
|
locale: ptBR,
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
<CardFooter>
|
||||||
|
<Button variant="outline">Gerenciar Assinatura</Button>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user