Améliorer l’expérience client

1
import { Link } from "react-router"
2
import { ShoppingCart, User } from "lucide-react"
3
import { useOptionalUser } from "~/root"
4
import { Button } from "~/components/ui/button"
5

6
export function Navbar() {
7
  const user = useOptionalUser()
8

9
  return (
10
    <nav className="border-b bg-white">
11
      <div className="container flex h-16 items-center justify-between">
12
        {/* logo */}
13
        <Link to="/">NEXUS</Link>
14

15
        {/* menu client */}
16
        <div className="flex items-center gap-4">
17
          <Link to="/cart" className="relative">
18
            <ShoppingCart className="size-5" />
19
            {/* badge quantité ajouté via context du panier */}
20
          </Link>
21

22
          {user ? (
23
            <DropdownMenu>
24
              <DropdownMenuTrigger asChild>
25
                <Button variant="ghost" size="icon">
26
                  <User className="size-5" />
27
                </Button>
28
              </DropdownMenuTrigger>
29

30
              <DropdownMenuContent align="end">
31
                {user.role === "administrator" && (
32
                  <DropdownMenuItem asChild>
33
                    <Link to="/admin">Dashboard admin</Link>
34
                  </DropdownMenuItem>
35
                )}
36
                <DropdownMenuItem asChild>
37
                  <Link to="/profile">Mon profil</Link>
38
                </DropdownMenuItem>
39
                <DropdownMenuItem asChild>
40
                  <Link to="/orders">Mes commandes</Link>
41
                </DropdownMenuItem>
42
                <DropdownMenuSeparator />
43
                <DropdownMenuItem asChild>
44
                  <form action="/logout" method="post">
45
                    <button>Se déconnecter</button>
46
                  </form>
47
                </DropdownMenuItem>
48
              </DropdownMenuContent>
49
            </DropdownMenu>
50
          ) : (
51
            <Link to="/login" className="text-sm">
52
              Connexion
53
            </Link>
54
          )}
55
        </div>
56
      </div>
57
    </nav>
58
  )
59
}

1
export async function loader({ request }) {
2
  const user = await requireUser(request)   // redirige si non connecté
3
  const orders = await getUserOrders(user.id)
4
  return { orders, user }
5
}

1
<Card>
2
  <CardHeader className="flex justify-between">
3
    <div>
4
      <CardTitle>Commande #{order.id.slice(-8)}</CardTitle>
5
      <p className="text-sm text-muted-foreground">
6
        {new Date(order.createdAt).toLocaleDateString("fr-FR")}
7
      </p>
8
    </div>
9
    <div className="flex gap-2">
10
      <OrderStatusBadge status={order.orderStatus} />
11
      <PaymentStatusBadge status={order.paymentStatus} />
12
    </div>
13
  </CardHeader>
14

15
  <CardContent>
16
    {order.items.slice(0, 3).map((it) => (
17
      <OrderItemComponent key={it.id} item={it} />
18
    ))}
19
    {order.items.length > 3 && (
20
      <p className="text-xs text-gray-500 text-center">
21
        …et {order.items.length - 3} autre(s)
22
      </p>
23
    )}
24

25
    <Link
26
      to={href("/orders/:orderId", { orderId: order.id })}
27
      className="block pt-3 text-sm text-blue-600"
28
    >
29
      Voir les détails →
30
    </Link>
31
  </CardContent>
32
</Card>

1
import type { OrderStatus, PaymentStatus } from "generated/prisma/enums"
2

3
const orderMap = {
4
  DRAFT:       { label: "Brouillon",  variant: "secondary" },
5
  PENDING:     { label: "En attente", variant: "secondary" },
6
  PAID:        { label: "Confirmée",  variant: "default"   },
7
  FULFILLED:   { label: "Livrée",     variant: "default"   },
8
  CANCELED:    { label: "Annulée",    variant: "destructive" },
9
  REFUNDED:    { label: "Remboursée", variant: "secondary" },
10
} as const
11

12
export function OrderStatusBadge({ status }: { status: OrderStatus }) {
13
  const s = orderMap[status]
14
  return <Badge variant={s.variant}>{s.label}</Badge>
15
}

1
const UpdatePasswordSchema = z
2
  .object({
3
    currentPassword: z.string().min(1),
4
    newPassword: z
5
      .string()
6
      .min(8)
7
      .regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/),
8
    confirmPassword: z.string(),
9
  })
10
  .superRefine((d, ctx) => {
11
    if (d.newPassword !== d.confirmPassword) {
12
      ctx.addIssue({ path: ["confirmPassword"], code: "custom",
13
        message: "Les mots de passe ne correspondent pas" })
14
    }
15
  })

1
export async function updateUserPassword(
2
  request: Request,
3
  currentPassword: string,
4
  newPassword: string,
5
) {
6
  const session = await auth.api.getSession({ headers: request.headers })
7
  if (!session?.user) throw new Error("User not authenticated")
8

9
  await auth.api.changePassword({
10
    body: { currentPassword, newPassword, revokeOtherSessions: false },
11
    headers: request.headers,
12
  })
13
  return { success: true }
14
}

1
const sessions = await prisma.session.findMany({ where: { userId: user.id } })
2

3
/* … */
4
<details className="text-xs">
5
  <summary>User Agent</summary>
6
  <p className="font-mono break-all">{session.userAgent}</p>
7
</details>
8

9
<Button
10
  variant="ghost"
11
  size="sm"
12
  onClick={() => {
13
    if (confirm("Supprimer cette session ?")) {
14
      const fd = new FormData()
15
      fd.set("intent", "delete-session")
16
      fd.set("sessionId", session.id)
17
      fetcher.submit(fd, { method: "POST" })
18
    }
19
  }}
20
/>