Dashboard: Create Payment link dialog fixes/ui tweaks (#7908)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates the `CreatePaymentLinkButton` component to enhance its dialog interface and improve the overall user experience. It replaces the `LinkIcon` with a `PlusIcon`, refines form elements, and cleans up unused code.

### Detailed summary
- Replaced `LinkIcon` with `PlusIcon`.
- Updated dialog structure and content.
- Changed `RequiredFormLabel` to `FormLabel` for consistency.
- Improved styling by adding `bg-card` class to input fields.
- Removed commented-out code related to image upload functionality.
- Enhanced form layout and submission handling.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Streamlined the payment link creation flow with a clearer dialog and improved form handling for a smoother experience.

- **Style**
  - Updated to a plus icon, added a header with title and description, standardized labels, themed inputs, and introduced a bottom action bar.

- **Bug Fixes**
  - Chain and token changes now properly reset related fields.
  - Improved validation for recipient address and token selection.
  - Added progress indicator during creation.
  - Success toast and automatic refresh ensure newly created payment links appear immediately.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/links/components/CreatePaymentLinkButton.client.tsx

@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { LinkIcon } from "lucide-react";
+import { PlusIcon } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -19,18 +19,16 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
 import {
   Form,
-  FormDescription,
   FormField,
   FormItem,
+  FormLabel,
   FormMessage,
-  RequiredFormLabel,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
@@ -50,7 +48,26 @@ export function CreatePaymentLinkButton(
   props: PropsWithChildren<{ clientId: string; teamId: string }>,
 ) {
   const [open, setOpen] = useState(false);
-  // const [image, setImage] = useState<File>();
+
+  return (
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild>{props.children}</DialogTrigger>
+      <DialogContent className="p-0 !max-w-lg">
+        <CreatePaymentLinkDialogContent
+          clientId={props.clientId}
+          setOpen={setOpen}
+          teamId={props.teamId}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CreatePaymentLinkDialogContent(props: {
+  clientId: string;
+  teamId: string;
+  setOpen: (open: boolean) => void;
+}) {
   const client = getClientThirdwebClient();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -117,108 +134,83 @@ export function CreatePaymentLinkButton(
       toast.error(parseErrorToMessage(err), { duration: 5000 });
     },
   });
-  // const uploadMutation = useMutation({
-  //   mutationFn: async (file: File) => {
-  //     const uploadClient = createThirdwebClient({
-  //       clientId: "f958464759859da7a1c6f9d905c90a43", //7ae789153cf9ecde8f35649f2d8a4333", // Special client ID for uploads only on thirdweb.com
-  //     });
-  //     const uri = await upload({
-  //       client: uploadClient,
-  //       files: [file],
-  //     });
-  //
-  //     // eslint-disable-next-line no-restricted-syntax
-  //     const resolvedUrl = resolveScheme({
-  //       client: uploadClient,
-  //       uri,
-  //     });
-  //
-  //     form.setValue("imageUrl", resolvedUrl);
-  //     return;
-  //   },
-  //   onSuccess: () => {
-  //     toast.success("Image uploaded successfully.");
-  //   },
-  //   onError: (e) => {
-  //     console.error(e);
-  //     // setImage(undefined);
-  //     toast.error(parseErrorToMessage(e), { duration: 5000 });
-  //   },
-  // });
 
   return (
-    <Dialog onOpenChange={setOpen} open={open}>
-      <DialogTrigger asChild>{props.children}</DialogTrigger>
-      <DialogContent className="!max-w-xl">
-        <Form {...form}>
-          <form
-            className="flex flex-col gap-6"
-            onSubmit={form.handleSubmit((values) =>
-              createMutation.mutateAsync(values, {
-                onSuccess: (result) => {
-                  reportPaymentLinkCreated({
-                    linkId: result.id,
-                    clientId: props.clientId,
-                  });
+    <div>
+      <DialogHeader className="p-4 lg:p-6">
+        <DialogTitle>Create a Payment</DialogTitle>
+        <DialogDescription>
+          Get paid in any token on any chain.
+        </DialogDescription>
+      </DialogHeader>
 
-                  setOpen(false);
-                  form.reset();
-                  form.clearErrors();
-                },
-              }),
-            )}
-          >
-            <DialogHeader>
-              <DialogTitle>Create a Payment</DialogTitle>
-              <DialogDescription>
-                Get paid in any token on any chain.
-              </DialogDescription>
-            </DialogHeader>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit((values) =>
+            createMutation.mutateAsync(values, {
+              onSuccess: (result) => {
+                reportPaymentLinkCreated({
+                  linkId: result.id,
+                  clientId: props.clientId,
+                });
 
-            <div className="flex flex-col gap-6 w-full">
-              <FormField
-                name="title"
-                render={({ field }) => (
-                  <FormItem className="">
-                    <RequiredFormLabel>Title</RequiredFormLabel>
-                    <Input {...field} placeholder="Payment for..." />
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+                props.setOpen(false);
+                form.reset();
+                form.clearErrors();
+              },
+            }),
+          )}
+        >
+          <div className="px-4 lg:px-6 space-y-4 pb-8">
+            <FormField
+              name="title"
+              render={({ field }) => (
+                <FormItem className="">
+                  <FormLabel>Title</FormLabel>
+                  <Input
+                    {...field}
+                    placeholder="Payment for..."
+                    className="bg-card"
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
-              <FormField
-                name="recipient"
-                render={({ field }) => (
-                  <FormItem>
-                    <RequiredFormLabel>Recipient Address</RequiredFormLabel>
-                    <Input
-                      className="w-full"
-                      {...field}
-                      onChange={field.onChange}
-                      value={field.value}
-                      placeholder="Address or ENS"
-                      required
-                    />
-                    <FormDescription>Address or ENS</FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
+            <FormField
+              name="recipient"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Recipient Address</FormLabel>
+                  <Input
+                    className="w-full bg-card"
+                    {...field}
+                    onChange={field.onChange}
+                    value={field.value}
+                    placeholder="Address or ENS"
+                    required
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
 
             <FormField
               name="chainId"
               render={({ field }) => (
                 <FormItem>
-                  <RequiredFormLabel>Chain</RequiredFormLabel>
+                  <FormLabel>Chain</FormLabel>
                   <SingleNetworkSelector
                     chainIds={chainsQuery.data?.map((x) => x.chainId)}
                     chainId={field.value}
-                    className="w-full"
+                    className="w-full bg-card"
+                    disableChainId
                     client={client}
                     disableTestnets
-                    onChange={field.onChange}
+                    onChange={(v) => {
+                      field.onChange(v);
+                      form.resetField("tokenAddress");
+                    }}
                   />
                   <FormMessage />
                 </FormItem>
@@ -229,11 +221,11 @@ export function CreatePaymentLinkButton(
               name="tokenAddress"
               render={({ field }) => (
                 <FormItem>
-                  <RequiredFormLabel>Token</RequiredFormLabel>
+                  <FormLabel>Token</FormLabel>
                   <TokenSelector
                     addNativeTokenIfMissing={false}
                     chainId={form.getValues().chainId}
-                    className="w-full"
+                    className="w-full bg-card"
                     client={client}
                     disabled={!form.getValues().chainId}
                     onChange={(token) => {
@@ -258,9 +250,9 @@ export function CreatePaymentLinkButton(
               name="amount"
               render={({ field }) => (
                 <FormItem>
-                  <RequiredFormLabel>Amount</RequiredFormLabel>
+                  <FormLabel>Amount</FormLabel>
                   <Input
-                    className="w-full"
+                    className="w-full bg-card"
                     {...field}
                     placeholder="0.0"
                     required
@@ -271,27 +263,25 @@ export function CreatePaymentLinkButton(
                 </FormItem>
               )}
             />
+          </div>
 
-            <DialogFooter>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  className="flex-1 flex gap-2 items-center"
-                  type="submit"
-                  disabled={createMutation.isPending}
-                >
-                  {createMutation.isPending ? (
-                    <Spinner className="size-4" />
-                  ) : (
-                    <LinkIcon className="size-4" />
-                  )}
-                  {createMutation.isPending ? "Creating..." : "Create"}
-                </Button>
-              </div>
-            </DialogFooter>
-          </form>
-        </Form>
-      </DialogContent>
-    </Dialog>
+          <div className="gap-2 border-t p-4 lg:p-6 bg-card flex justify-end rounded-b-lg">
+            <Button
+              size="sm"
+              className="gap-2 items-center"
+              type="submit"
+              disabled={createMutation.isPending}
+            >
+              {createMutation.isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <PlusIcon className="size-4" />
+              )}
+              {createMutation.isPending ? "Creating..." : "Create"}
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
   );
 }