spb/rent-ka

1// -----------------------------------------------------------------------------2// Rent-Ka — Rental listings aggregator (Canada, outside Québec)3// Author: Simon-Pierre Boucher — contact@spboucher.ai4// pages/Bienvenue.tsx: onboarding after account creation — role choice5//   "I'm looking for a rental" (tenant: saved rentals…) or "I manage rentals"6//   (manager: customizable page for their portfolio).7// -----------------------------------------------------------------------------8import { useState } from "react";9import { useNavigate } from "react-router-dom";10import { setRole } from "../api";11import { useAccount } from "../account";12import { IcoBuilding, IcoHeart, IcoHouse, IcoSliders } from "../components/Icons";1314export default function BienvenuePage() {15  const { me, loaded, refresh } = useAccount();16  const [busy, setBusy] = useState<"locataire" | "gestionnaire" | null>(null);17  const nav = useNavigate();1819  const choose = async (role: "locataire" | "gestionnaire") => {20    setBusy(role);21    await setRole(role);22    refresh();23    nav(role === "gestionnaire" ? "/manage" : "/", { replace: true });24  };2526  if (loaded && !me) {27    return (28      <div className="container profil">29        <span className="kicker">Welcome</span>30        <h1>First, create your <span className="hl">account</span>.</h1>31        <a className="btn btn-primary" href="/api/auth/ka/login">32          Sign in with KA ID33        </a>34      </div>35    );36  }3738  return (39    <div className="container bienvenue">40      <span className="kicker">Welcome{me?.name ? `, ${me.name.split(" ")[0]}` : ""}</span>41      <h1>Which profile<br /><span className="hl">fits you</span>?</h1>42      <p className="lede">43        One last step: tell us how you'll use Rent-Ka.44        You can change your mind later in your profile.45      </p>4647      <div className="role-grid">48        <button49          className="role-card"50          disabled={busy !== null}51          onClick={() => choose("locataire")}52        >53          <span className="role-ico"><IcoHouse size={30} /></span>54          <span className="role-title">I'm looking for a rental</span>55          <span className="role-desc">56            Prospective tenant — shop across rentals all over Canada.57          </span>58          <ul className="role-perks">59            <li><IcoHeart size={13} /> Save listings you love</li>60            <li><IcoSliders size={13} /> Filters and advanced search</li>61            <li>More tools coming (alerts…)</li>62          </ul>63          <span className="role-cta">{busy === "locataire" ? "One moment…" : "That's me →"}</span>64        </button>6566        <button67          className="role-card"68          disabled={busy !== null}69          onClick={() => choose("gestionnaire")}70        >71          <span className="role-ico"><IcoBuilding size={30} /></span>72          <span className="role-title">I manage rentals</span>73          <span className="role-desc">74            Manager or owner whose rentals are displayed on Rent-Ka.75          </span>76          <ul className="role-perks">77            <li>Claim your management page</li>78            <li>Customize it: tagline, contact, logo</li>79            <li>Your inventory, linked automatically</li>80          </ul>81          <span className="role-cta">{busy === "gestionnaire" ? "One moment…" : "That's me →"}</span>82        </button>83      </div>84    </div>85  );86}87