Skip to content

Commit 1a5327e

Browse files
jzsfkzmjzsfkzm
committed
fix: follow-up on Rabbit's feedback
refs #1779
1 parent 863e4e0 commit 1a5327e

File tree

2 files changed

+86
-83
lines changed

2 files changed

+86
-83
lines changed

‎apps/deploy-web/src/components/user/payment/AutoReloadSettingsPopup.tsx‎

Lines changed: 64 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,6 @@ export const AutoReloadSettingsPopup: React.FC<AutoReloadSettingsPopupProps> = (
115115

116116
const isPending = updateWalletSettings.isPending || createWalletSettings.isPending;
117117

118-
if (isLoading) {
119-
return (
120-
<div className="flex items-center justify-center py-8">
121-
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
122-
</div>
123-
);
124-
}
125-
126118
return (
127119
<Popup
128120
open={open}
@@ -145,72 +137,78 @@ export const AutoReloadSettingsPopup: React.FC<AutoReloadSettingsPopupProps> = (
145137
}
146138
]}
147139
>
148-
<div className="space-y-4">
149-
<div className="">
150-
<div className="flex">
151-
<Label htmlFor="reloadEnabled" className="mr-4 self-center">
152-
Enable Auto Reload
153-
</Label>
154-
<Switch id="reloadEnabled" checked={autoReloadEnabled} onCheckedChange={handleToggleChange} disabled={isPending} />
155-
</div>
156-
<p className="mt-1 text-xs text-muted-foreground">You can enable or disable this at any time.</p>
140+
{isLoading ? (
141+
<div className="flex items-center justify-center py-8">
142+
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
157143
</div>
158-
159-
<div className="grid gap-4 sm:grid-cols-1">
160-
<div className="space-y-2">
161-
<Label htmlFor="threshold-input">
162-
When credit balance goes below
163-
<span className="ml-1 text-muted-foreground">(minimum ${MIN_THRESHOLD})</span>
164-
</Label>
144+
) : (
145+
<div className="space-y-4">
146+
<div className="">
165147
<div className="flex">
166-
<span className="self-center text-muted-foreground">$</span>
167-
<Input
168-
id="threshold"
169-
type="number"
170-
min={MIN_THRESHOLD}
171-
step="1"
172-
value={threshold}
173-
onChange={handleThresholdChange}
174-
disabled={isPending}
175-
className="flex-grow pl-2"
176-
placeholder={DEFAULT_THRESHOLD.toString()}
177-
/>
148+
<Label htmlFor="reloadEnabled" className="mr-4 self-center">
149+
Enable Auto Reload
150+
</Label>
151+
<Switch id="reloadEnabled" checked={autoReloadEnabled} onCheckedChange={handleToggleChange} disabled={isPending} />
178152
</div>
179-
{thresholdError && <p className="text-xs text-destructive">{thresholdError}</p>}
180-
<p className="text-xs text-muted-foreground">
181-
If your current balance is below or equal to the threshold you set, your reload will immediately kick in once you click save.
182-
</p>
153+
<p className="mt-1 text-xs text-muted-foreground">You can enable or disable this at any time.</p>
183154
</div>
184155

185-
<div className="space-y-2">
186-
<Label htmlFor="reloadAmount-input">
187-
Reload Credit Balance to
188-
<span className="ml-1 text-muted-foreground">(minimum ${MIN_RELOAD_AMOUNT})</span>
189-
</Label>
190-
<div className="flex">
191-
<span className="self-center text-muted-foreground">$</span>
192-
<Input
193-
id="reloadAmount"
194-
type="number"
195-
min={MIN_RELOAD_AMOUNT}
196-
step="1"
197-
value={reloadAmount}
198-
onChange={handleReloadAmountChange}
199-
disabled={isPending}
200-
className="flex-grow pl-2"
201-
placeholder={DEFAULT_RELOAD_AMOUNT.toString()}
202-
/>
156+
<div className="grid gap-4 sm:grid-cols-1">
157+
<div className="space-y-2">
158+
<Label htmlFor="threshold-input">
159+
When credit balance goes below
160+
<span className="ml-1 text-muted-foreground">(minimum ${MIN_THRESHOLD})</span>
161+
</Label>
162+
<div className="flex">
163+
<span className="self-center text-muted-foreground">$</span>
164+
<Input
165+
id="threshold"
166+
type="number"
167+
min={MIN_THRESHOLD}
168+
step="1"
169+
value={threshold}
170+
onChange={handleThresholdChange}
171+
disabled={isPending}
172+
className="flex-grow pl-2"
173+
placeholder={DEFAULT_THRESHOLD.toString()}
174+
/>
175+
</div>
176+
{thresholdError && <p className="text-xs text-destructive">{thresholdError}</p>}
177+
<p className="text-xs text-muted-foreground">
178+
If your current balance is below or equal to the threshold you set, your reload will immediately kick in once you click save.
179+
</p>
180+
</div>
181+
182+
<div className="space-y-2">
183+
<Label htmlFor="reloadAmount-input">
184+
Reload Credit Balance to
185+
<span className="ml-1 text-muted-foreground">(minimum ${MIN_RELOAD_AMOUNT})</span>
186+
</Label>
187+
<div className="flex">
188+
<span className="self-center text-muted-foreground">$</span>
189+
<Input
190+
id="reloadAmount"
191+
type="number"
192+
min={MIN_RELOAD_AMOUNT}
193+
step="1"
194+
value={reloadAmount}
195+
onChange={handleReloadAmountChange}
196+
disabled={isPending}
197+
className="flex-grow pl-2"
198+
placeholder={DEFAULT_RELOAD_AMOUNT.toString()}
199+
/>
200+
</div>
201+
{reloadAmountError && <p className="text-xs text-destructive">{reloadAmountError}</p>}
203202
</div>
204-
{reloadAmountError && <p className="text-xs text-destructive">{reloadAmountError}</p>}
203+
<Alert variant="default">
204+
<AlertTitle>How it works</AlertTitle>
205+
<AlertDescription>
206+
When your balance drops below ${threshold}, we'll automatically charge ${reloadAmount} to your selected card.
207+
</AlertDescription>
208+
</Alert>
205209
</div>
206-
<Alert variant="default">
207-
<AlertTitle>How it works</AlertTitle>
208-
<AlertDescription>
209-
When your balance drops below ${threshold}, we'll automatically charge ${reloadAmount} to your selected card.
210-
</AlertDescription>
211-
</Alert>
212210
</div>
213-
</div>
211+
)}
214212
</Popup>
215213
);
216214
};

‎apps/deploy-web/src/pages/payment.tsx‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ type HalfBoxProps = {
4040
title: string;
4141
children: ReactNode;
4242
icon: ReactNode;
43-
buttonVariant?: any;
43+
buttonVariant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link";
4444
buttonDisabled?: boolean;
4545
onClick: () => void;
4646
};
@@ -275,22 +275,27 @@ const PayPage: React.FunctionComponent = () => {
275275

276276
const handleReloadChange = useCallback(
277277
async (autoReloadEnabled: boolean) => {
278-
const settings = {
279-
autoReloadEnabled,
280-
autoReloadThreshold: walletSettings?.autoReloadThreshold || DEFAULT_THRESHOLD,
281-
autoReloadAmount: walletSettings?.autoReloadAmount || DEFAULT_RELOAD_AMOUNT
282-
};
283-
284-
if (walletSettings) {
285-
await updateWalletSettings.mutateAsync(settings);
286-
} else {
287-
await createWalletSettings.mutateAsync(settings);
278+
try {
279+
const settings = {
280+
autoReloadEnabled,
281+
autoReloadThreshold: walletSettings?.autoReloadThreshold || DEFAULT_THRESHOLD,
282+
autoReloadAmount: walletSettings?.autoReloadAmount || DEFAULT_RELOAD_AMOUNT
283+
};
284+
285+
if (walletSettings) {
286+
await updateWalletSettings.mutateAsync(settings);
287+
} else {
288+
await createWalletSettings.mutateAsync(settings);
289+
}
290+
291+
enqueueSnackbar(<Snackbar title={`Auto Reload ${autoReloadEnabled ? "enabled" : "disabled"}`} iconVariant="success" />, {
292+
variant: "success",
293+
autoHideDuration: 3000
294+
});
295+
} catch (error: unknown) {
296+
console.error("Failed to update auto-reload settings:", error);
297+
enqueueSnackbar(<Snackbar title="Failed to update Auto Reload settings" iconVariant="error" />, { variant: "error" });
288298
}
289-
290-
enqueueSnackbar(<Snackbar title={`Auto Reload ${autoReloadEnabled ? "enabled" : "disabled"}`} iconVariant="success" />, {
291-
variant: "success",
292-
autoHideDuration: 3000
293-
});
294299
},
295300
[createWalletSettings, enqueueSnackbar, updateWalletSettings, walletSettings]
296301
);
@@ -342,7 +347,7 @@ const PayPage: React.FunctionComponent = () => {
342347
>
343348
<div>
344349
<div className="pt-4">
345-
<Switch checked={walletSettings?.autoReloadEnabled} onCheckedChange={handleReloadChange} disabled={paymentMethods.length === 0} />
350+
<Switch checked={walletSettings?.autoReloadEnabled ?? false} onCheckedChange={handleReloadChange} disabled={paymentMethods.length === 0} />
346351
</div>
347352
<div className="pt-2 text-sm">
348353
Reload ${walletSettings?.autoReloadAmount || DEFAULT_RELOAD_AMOUNT} when &lt; ${walletSettings?.autoReloadThreshold || DEFAULT_THRESHOLD}

0 commit comments

Comments
 (0)