fix(store): Display error toast messaging on creator popup (#9078)

When the agent submission was filled out incorrectly, there was no error
pop up. It just did nothing.

### Changes 🏗️

Created an array to track which fields are missing
If this array is not empty, a toast is displayed to show which fields
are missing.

### Checklist 📋

#### For code changes:
- [ ] I have clearly listed my changes in the PR description
- [ ] I have made a test plan
- [ ] I have tested my changes according to the test plan:
  <!-- Put your test plan here: -->
  - [ ] ...

<details>
  <summary>Example test plan</summary>
  
  - [ ] Create from scratch and execute an agent with at least 3 blocks
- [ ] Import an agent from file upload, and confirm it executes
correctly
  - [ ] Upload agent to marketplace
- [ ] Import an agent from marketplace and confirm it executes correctly
  - [ ] Edit an agent from monitor, and confirm it executes correctly
</details>

#### For configuration changes:
- [ ] `.env.example` is updated or already compatible with my changes
- [ ] `docker-compose.yml` is updated or already compatible with my
changes
- [ ] I have included a list of my configuration changes in the PR
description (under **Changes**)

<details>
  <summary>Examples of configuration changes</summary>

  - Changing ports
  - Adding new services that need to communicate with each other
  - Secrets or environment variable changes
  - New or infrastructure changes such as databases
</details>

---------

Co-authored-by: Swifty <craigswift13@gmail.com>

autogpt_platform/frontend/src/components/agptui/composite/PublishAgentPopout.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/lib/autogpt-server-api";
 import { useRouter } from "next/navigation";
 import { useBackendAPI } from "@/lib/autogpt-server-api/context";
+import { useToast } from "@/components/ui/use-toast";
 interface PublishAgentPopoutProps {
   trigger?: React.ReactNode;
   openPopout?: boolean;
@@ -69,6 +70,8 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
   const router = useRouter();
   const api = useBackendAPI();
 
+  const { toast } = useToast();
+
   React.useEffect(() => {
     console.log("PublishAgentPopout Effect");
     setOpen(openPopout);
@@ -145,14 +148,20 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
     videoUrl: string,
     categories: string[],
   ) => {
-    if (
-      !name ||
-      !subHeading ||
-      !description ||
-      !imageUrls.length ||
-      !categories.length
-    ) {
-      console.error("Missing required fields");
+    const missingFields: string[] = [];
+
+    if (!name) missingFields.push("Name");
+    if (!subHeading) missingFields.push("Sub-heading");
+    if (!description) missingFields.push("Description");
+    if (!imageUrls.length) missingFields.push("Image");
+    if (!categories.length) missingFields.push("Categories");
+
+    if (missingFields.length > 0) {
+      toast({
+        title: "Missing Required Fields",
+        description: `Please fill in: ${missingFields.join(", ")}`,
+        duration: 3000,
+      });
       return;
     }