Skip to content

Commit

Permalink
tweak test payments modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@eliang-stripe
eliang-stripe committed Jun 17, 2024
1 parent 7069e15 commit 563ce2e
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 81 deletions.
6 changes: 3 additions & 3 deletions app/components/Screen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ export default function Screen({

{/* Furever site container */}
<div
className={`h-screen origin-left overflow-scroll transition duration-500 ease-in-out
className={`origin-left overflow-hidden transition duration-500 ease-in-out md:h-screen
${open ? 'shadow-xl md:translate-x-[325px] md:scale-[0.6] md:rounded-xl md:border md:border-[1.5px] lg:scale-[0.66] xl:scale-[0.73]' : 'h-full min-h-screen w-full flex-col sm:flex-row'}
${theme == 'light' ? 'bg-paw-pattern bg-[size:426px]' : 'bg-screen-background'}`}
>
<Nav />
<div className="mt-[74px] flex flex-1 justify-center p-3 pb-20 sm:ml-52 sm:mt-0 sm:p-8 lg:ml-64">
<div className="flex grow flex-col gap-y-4 md:gap-y-5">
<div className="mt-[74px] flex h-full grow justify-center overflow-scroll overscroll-contain p-3 pb-20 sm:ml-52 sm:mt-0 sm:mt-0 sm:p-8 lg:ml-64">
<div className="flex grow flex-col gap-y-4 after:pb-8 md:gap-y-5">
<OnboardingDialog />
{children}
</div>
Expand Down
153 changes: 75 additions & 78 deletions app/components/testdata/CreatePaymentsButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
count: '',
count: '1',
amount: '',
status: 'card_successful',
currency: 'usd',
Expand Down Expand Up @@ -156,82 +156,79 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<div className="flex flex-col space-y-2">
<FormField
control={form.control}
name="count"
render={({field}) => (
<FormItem>
<FormLabel>Number of payments</FormLabel>
<FormControl>
<Input {...field} type="number" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="pb-3">
<FormField
control={form.control}
name="amount"
render={({field}) => (
<FormItem>
<FormLabel>Amount</FormLabel>
<FormControl>
<Input {...field} placeholder="Leave blank for a random amount" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="pb-3">
<FormField
control={form.control}
name="status"
render={({field}) => (
<FormItem>
<FormLabel>Status</FormLabel>
<FormControl>
<Select
{...field}
onValueChange={(value) => field.onChange(value)}
>
<SelectTrigger className="mt-1">
<SelectValue>
{statusLabels[field.value as PMType]}
</SelectValue>
</SelectTrigger>
<SelectContent>
{Object.keys(statusLabels).map((key: string) => (
<SelectItem key={key} value={key}>
{statusLabels[key as PMType]}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<div className="pb-3">
<FormField
control={form.control}
name="currency"
render={({field}) => (
<FormItem>
<FormLabel>Currency</FormLabel>
<FormControl>
<CurrencySelect field={field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
<FormField
control={form.control}
name="count"
render={({field}) => (
<FormItem>
<FormLabel>Number of payments</FormLabel>
<FormControl>
<Input {...field} type="number" />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="amount"
render={({field}) => (
<FormItem>
<FormLabel>Amount</FormLabel>
<FormControl>
<Input
{...field}
placeholder="Leave blank for a random amount"
type="number"
step="0.01"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="status"
render={({field}) => (
<FormItem>
<FormLabel>Payment status</FormLabel>
<FormControl>
<Select
{...field}
onValueChange={(value) => field.onChange(value)}
>
<SelectTrigger className="mt-1">
<SelectValue>
{statusLabels[field.value as PMType]}
</SelectValue>
</SelectTrigger>
<SelectContent>
{Object.keys(statusLabels).map((key: string) => (
<SelectItem key={key} value={key}>
{statusLabels[key as PMType]}
</SelectItem>
))}
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="currency"
render={({field}) => (
<FormItem>
<FormLabel>Currency</FormLabel>
<FormControl>
<CurrencySelect field={field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flew-row flex justify-end space-x-2">
<DialogClose asChild>
<Button type="button" variant="secondary">
Expand Down Expand Up @@ -265,7 +262,7 @@ export default function CreatePaymentsButton({classes}: {classes?: string}) {
Create test payments
</Button>
</DialogTrigger>
<DialogContent className="text-primary sm:max-w-[425px]">
<DialogContent className="p-4 text-primary sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Create test payments</DialogTitle>
<DialogDescription>
Expand Down

0 comments on commit 563ce2e

Please sign in to comment.