Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | 18x 18x 18x 18x 18x 2x 2x 2x 2x 2x 1x 1x 1x 2x 18x 5x | import { useState, type FormEvent } from "react";
import { useNavigate } from "@tanstack/react-router";
import { useAuth } from "../lib/auth-context";
import { authApi, getErrorMessage } from "../lib/api";
import { notify } from "../lib/notify";
import { CURRENT_TERMS_VERSION } from "../lib/terms";
import { MARKETPLACE_URL } from "../lib/env";
import { Button } from "../components/ui/button";
import {
Card,
CardContent,
CardHeader,
CardTitle,
} from "../components/ui/card";
export function AcceptTermsPage() {
const { refreshSession } = useAuth();
const navigate = useNavigate();
const [agreed, setAgreed] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
Iif (!agreed || !CURRENT_TERMS_VERSION) return;
setIsLoading(true);
try {
await authApi.acceptTerms(CURRENT_TERMS_VERSION);
await refreshSession();
navigate({ to: "/" });
} catch (err) {
notify.error(getErrorMessage(err));
} finally {
setIsLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-background-muted px-4">
<Card className="w-full max-w-md">
<CardHeader className="text-center">
<div className="mx-auto mb-4 w-14 h-14 bg-primary-50 dark:bg-primary-900/20 rounded-xl flex items-center justify-center">
<svg
aria-hidden="true"
className="w-7 h-7 text-primary-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
/>
<polyline points="14 2 14 8 20 8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
</svg>
</div>
<CardTitle className="text-2xl">Before you continue</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-foreground-muted text-center mb-6">
We've added Terms of Use and a Privacy Policy to Interioring.
Please take a moment to review them before continuing.
</p>
<div className="flex gap-3 mb-6">
<a
href={`${MARKETPLACE_URL}/terms`}
target="_blank"
rel="noopener noreferrer"
className="flex-1 flex items-center gap-2 p-3 border border-border-default rounded-lg text-sm font-medium text-foreground-default hover:bg-background-subtle transition-colors"
>
<svg aria-hidden="true" className="w-4 h-4 text-primary-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<polyline points="15 3 21 3 21 9" />
<line x1="10" y1="14" x2="21" y2="3" />
</svg>
Terms of Use
</a>
<a
href={`${MARKETPLACE_URL}/privacy`}
target="_blank"
rel="noopener noreferrer"
className="flex-1 flex items-center gap-2 p-3 border border-border-default rounded-lg text-sm font-medium text-foreground-default hover:bg-background-subtle transition-colors"
>
<svg aria-hidden="true" className="w-4 h-4 text-primary-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
<polyline points="15 3 21 3 21 9" />
<line x1="10" y1="14" x2="21" y2="3" />
</svg>
Privacy Policy
</a>
</div>
<form onSubmit={handleSubmit}>
<div className="mb-6 p-3.5 bg-background-subtle rounded-lg border border-border-default">
<label className="flex items-start gap-2.5 cursor-pointer text-sm text-foreground-default leading-relaxed">
<input
type="checkbox"
checked={agreed}
onChange={(e) => setAgreed(e.target.checked)}
className="mt-0.5 w-4 h-4 accent-primary-600 flex-shrink-0"
/>
<span>
I agree to the{" "}
<a
href={`${MARKETPLACE_URL}/terms`}
target="_blank"
rel="noopener noreferrer"
className="text-primary-600 underline"
>
Terms of Use
</a>{" "}
and{" "}
<a
href={`${MARKETPLACE_URL}/privacy`}
target="_blank"
rel="noopener noreferrer"
className="text-primary-600 underline"
>
Privacy Policy
</a>
</span>
</label>
</div>
<Button
type="submit"
className="w-full"
disabled={!agreed}
isLoading={isLoading}
>
Accept and continue
</Button>
</form>
<p className="text-xs text-foreground-muted text-center mt-4">
You must accept to continue using Interioring
</p>
</CardContent>
</Card>
</div>
);
}
|