Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update “buy credits” UX in settings modal to do subscriptions instead

Browse Source
This commit is contained in:
Abi Raja 2024-01-04 16:04:40 -08:00
parent a165df2735
commit 71ceeb533f
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/settings/AccessCodeSection.tsx
View File

@ -6,6 +6,7 @@ import { Label } from "../ui/label";
import useThrottle from "../../hooks/useThrottle"; import useThrottle from "../../hooks/useThrottle";
import { Progress } from "../ui/progress"; import { Progress } from "../ui/progress";
import { PICO_BACKEND_FORM_SECRET } from "../../config"; import { PICO_BACKEND_FORM_SECRET } from "../../config";
import { useStore } from "../../store/store";
interface Props { interface Props {
settings: Settings; settings: Settings;
@ -31,6 +32,7 @@ function AccessCodeSection({ settings, setSettings }: Props) {
const [usedCredits, setUsedCredits] = useState(0); const [usedCredits, setUsedCredits] = useState(0);
const [totalCredits, setTotalCredits] = useState(0); const [totalCredits, setTotalCredits] = useState(0);
const throttledAccessCode = useThrottle(settings.accessCode || "", 500); const throttledAccessCode = useThrottle(settings.accessCode || "", 500);
const setPricingDialogOpen = useStore((state) => state.setPricingDialogOpen);
const fetchState = (() => { const fetchState = (() => {
if (!settings.accessCode) return FetchState.EMPTY; if (!settings.accessCode) return FetchState.EMPTY;
@ -100,11 +102,16 @@ function AccessCodeSection({ settings, setSettings }: Props) {
{fetchState === "EMPTY" && ( {fetchState === "EMPTY" && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<a href="https://buy.stripe.com/8wM6sre70gBW1nqaEE" target="_blank"> <div className="text-xs">
<Button size="sm" variant="secondary"> If you already have an access code, enter it above.
Buy credits </div>
</Button> <Button
</a> size="sm"
variant="secondary"
onClick={() => setPricingDialogOpen(true)}
>
Subscribe to a plan
</Button>
</div> </div>
)} )}
@ -129,9 +136,9 @@ function AccessCodeSection({ settings, setSettings }: Props) {
<span className="text-xs text-gray-700"> <span className="text-xs text-gray-700">
{usedCredits} out of {totalCredits} credits used {usedCredits} out of {totalCredits} credits used
</span> </span>
<a href="https://buy.stripe.com/8wM6sre70gBW1nqaEE" target="_blank"> <Button size="sm" onClick={() => setPricingDialogOpen(true)}>
<Button size="sm">Add credits</Button> Add credits
</a> </Button>
</div> </div>
</> </>
)} )}