fix(frontend): Change `/store*` url to `/marketplace*` (#9119)

We have branded it as "Marketplace", so the URL shouldn't be "store".

### Changes 🏗️

- Change frontend URLs from `/store*` to `/marketplace*`
- No API route changes to minimize bugs (follow up:
https://github.com/Significant-Gravitas/AutoGPT/issues/9118)
dev
Krzysztof Czerwinski 2025-01-18 17:49:41 +01:00 committed by GitHub
parent 56612f16cf
commit 800625c952
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 225 additions and 234 deletions

View File

@ -310,9 +310,9 @@ class UserCredit(UserCreditBase):
],
mode="payment",
success_url=settings.config.platform_base_url
+ "/store/credits?topup=success",
+ "/marketplace/credits?topup=success",
cancel_url=settings.config.platform_base_url
+ "/store/credits?topup=cancel",
+ "/marketplace/credits?topup=cancel",
)
# Create pending transaction

View File

@ -196,7 +196,7 @@ async def manage_payment_method(
) -> dict[str, str]:
session = stripe.billing_portal.Session.create(
customer=await get_stripe_customer_id(user_id),
return_url=settings.config.platform_base_url + "/store/credits",
return_url=settings.config.platform_base_url + "/marketplace/credits",
)
if not session:
raise HTTPException(

View File

@ -49,7 +49,7 @@ export default async function RootLayout({
links={[
{
name: "Marketplace",
href: "/store",
href: "/marketplace",
},
{
name: "Library",
@ -66,7 +66,7 @@ export default async function RootLayout({
{
icon: IconType.Edit,
text: "Edit profile",
href: "/store/profile",
href: "/marketplace/profile",
},
],
},
@ -75,7 +75,7 @@ export default async function RootLayout({
{
icon: IconType.LayoutDashboard,
text: "Creator Dashboard",
href: "/store/dashboard",
href: "/marketplace/dashboard",
},
{
icon: IconType.UploadCloud,
@ -88,7 +88,7 @@ export default async function RootLayout({
{
icon: IconType.Settings,
text: "Settings",
href: "/store/settings",
href: "/marketplace/settings",
},
],
},

View File

@ -5,13 +5,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
const sidebarLinkGroups = [
{
links: [
{ text: "Creator Dashboard", href: "/store/dashboard" },
{ text: "Agent dashboard", href: "/store/agent-dashboard" },
{ text: "Credits", href: "/store/credits" },
{ text: "Integrations", href: "/store/integrations" },
{ text: "API Keys", href: "/store/api_keys" },
{ text: "Profile", href: "/store/profile" },
{ text: "Settings", href: "/store/settings" },
{ text: "Creator Dashboard", href: "/marketplace/dashboard" },
{ text: "Agent dashboard", href: "/marketplace/agent-dashboard" },
{ text: "Credits", href: "/marketplace/credits" },
{ text: "Integrations", href: "/marketplace/integrations" },
{ text: "API Keys", href: "/marketplace/api_keys" },
{ text: "Profile", href: "/marketplace/profile" },
{ text: "Settings", href: "/marketplace/settings" },
],
},
];

View File

@ -45,10 +45,10 @@ export default async function Page({
});
const breadcrumbs = [
{ name: "Store", link: "/store" },
{ name: "Store", link: "/marketplace" },
{
name: agent.creator,
link: `/store/creator/${encodeURIComponent(agent.creator)}`,
link: `/marketplace/creator/${encodeURIComponent(agent.creator)}`,
},
{ name: agent.agent_name, link: "#" },
];

View File

@ -47,7 +47,7 @@ export default async function Page({
<main className="mt-5 px-4">
<BreadCrumbs
items={[
{ name: "Store", link: "/store" },
{ name: "Store", link: "/marketplace" },
{ name: creator.name, link: "#" },
]}
/>

View File

@ -1,7 +1,179 @@
"use client";
import * as React from "react";
import { HeroSection } from "@/components/agptui/composite/HeroSection";
import {
FeaturedSection,
FeaturedAgent,
} from "@/components/agptui/composite/FeaturedSection";
import {
AgentsSection,
Agent,
} from "@/components/agptui/composite/AgentsSection";
import { BecomeACreator } from "@/components/agptui/BecomeACreator";
import {
FeaturedCreators,
FeaturedCreator,
} from "@/components/agptui/composite/FeaturedCreators";
import { Separator } from "@/components/ui/separator";
import { Metadata } from "next";
import {
StoreAgentsResponse,
CreatorsResponse,
} from "@/lib/autogpt-server-api/types";
import BackendAPI from "@/lib/autogpt-server-api";
import { redirect } from "next/navigation";
async function getStoreData() {
try {
const api = new BackendAPI();
export default function Page() {
redirect("/store");
// Add error handling and default values
let featuredAgents: StoreAgentsResponse = {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
};
let topAgents: StoreAgentsResponse = {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
};
let featuredCreators: CreatorsResponse = {
creators: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
};
try {
[featuredAgents, topAgents, featuredCreators] = await Promise.all([
api.getStoreAgents({ featured: true }),
api.getStoreAgents({ sorted_by: "runs" }),
api.getStoreCreators({ featured: true, sorted_by: "num_agents" }),
]);
} catch (error) {
console.error("Error fetching store data:", error);
}
return {
featuredAgents,
topAgents,
featuredCreators,
};
} catch (error) {
console.error("Error in getStoreData:", error);
return {
featuredAgents: {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
},
topAgents: {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
},
featuredCreators: {
creators: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
},
};
}
}
// FIX: Correct metadata
export const metadata: Metadata = {
title: "Marketplace - NextGen AutoGPT",
description: "Find and use AI Agents created by our community",
applicationName: "NextGen AutoGPT Store",
authors: [{ name: "AutoGPT Team" }],
keywords: [
"AI agents",
"automation",
"artificial intelligence",
"AutoGPT",
"marketplace",
],
robots: {
index: true,
follow: true,
},
openGraph: {
title: "Marketplace - NextGen AutoGPT",
description: "Find and use AI Agents created by our community",
type: "website",
siteName: "NextGen AutoGPT Store",
images: [
{
url: "/images/store-og.png",
width: 1200,
height: 630,
alt: "NextGen AutoGPT Store",
},
],
},
twitter: {
card: "summary_large_image",
title: "Marketplace - NextGen AutoGPT",
description: "Find and use AI Agents created by our community",
images: ["/images/store-twitter.png"],
},
icons: {
icon: "/favicon.ico",
shortcut: "/favicon-16x16.png",
apple: "/apple-touch-icon.png",
},
};
export default async function Page({}: {}) {
// Get data server-side
const { featuredAgents, topAgents, featuredCreators } = await getStoreData();
return (
<div className="mx-auto w-screen max-w-[1360px]">
<main className="px-4">
<HeroSection />
<FeaturedSection
featuredAgents={featuredAgents.agents as FeaturedAgent[]}
/>
<Separator />
<AgentsSection
sectionTitle="Top Agents"
agents={topAgents.agents as Agent[]}
/>
<Separator />
<FeaturedCreators
featuredCreators={featuredCreators.creators as FeaturedCreator[]}
/>
<Separator />
<BecomeACreator
title="Become a Creator"
description="Join our ever-growing community of hackers and tinkerers"
buttonText="Become a Creator"
/>
</main>
</div>
);
}

View File

@ -3,5 +3,5 @@
import { redirect } from "next/navigation";
export default function Page() {
redirect("/store");
redirect("/marketplace");
}

View File

@ -38,7 +38,7 @@ export async function signup(values: z.infer<typeof signupFormSchema>) {
}
console.log("Signed up");
revalidatePath("/", "layout");
redirect("/store/profile");
redirect("/marketplace/profile");
},
);
}

View File

@ -1,181 +0,0 @@
import * as React from "react";
import { HeroSection } from "@/components/agptui/composite/HeroSection";
import {
FeaturedSection,
FeaturedAgent,
} from "@/components/agptui/composite/FeaturedSection";
import {
AgentsSection,
Agent,
} from "@/components/agptui/composite/AgentsSection";
import { BecomeACreator } from "@/components/agptui/BecomeACreator";
import {
FeaturedCreators,
FeaturedCreator,
} from "@/components/agptui/composite/FeaturedCreators";
import { Separator } from "@/components/ui/separator";
import { Metadata } from "next";
import {
StoreAgentsResponse,
CreatorsResponse,
} from "@/lib/autogpt-server-api/types";
import BackendAPI from "@/lib/autogpt-server-api";
export const dynamic = "force-dynamic";
async function getStoreData() {
try {
const api = new BackendAPI();
// Add error handling and default values
let featuredAgents: StoreAgentsResponse = {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
};
let topAgents: StoreAgentsResponse = {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
};
let featuredCreators: CreatorsResponse = {
creators: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
};
try {
[featuredAgents, topAgents, featuredCreators] = await Promise.all([
api.getStoreAgents({ featured: true }),
api.getStoreAgents({ sorted_by: "runs" }),
api.getStoreCreators({ featured: true, sorted_by: "num_agents" }),
]);
} catch (error) {
console.error("Error fetching store data:", error);
}
return {
featuredAgents,
topAgents,
featuredCreators,
};
} catch (error) {
console.error("Error in getStoreData:", error);
return {
featuredAgents: {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
},
topAgents: {
agents: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
},
featuredCreators: {
creators: [],
pagination: {
total_items: 0,
total_pages: 0,
current_page: 0,
page_size: 0,
},
},
};
}
}
// FIX: Correct metadata
export const metadata: Metadata = {
title: "Marketplace - NextGen AutoGPT",
description: "Find and use AI Agents created by our community",
applicationName: "NextGen AutoGPT Store",
authors: [{ name: "AutoGPT Team" }],
keywords: [
"AI agents",
"automation",
"artificial intelligence",
"AutoGPT",
"marketplace",
],
robots: {
index: true,
follow: true,
},
openGraph: {
title: "Marketplace - NextGen AutoGPT",
description: "Find and use AI Agents created by our community",
type: "website",
siteName: "NextGen AutoGPT Store",
images: [
{
url: "/images/store-og.png",
width: 1200,
height: 630,
alt: "NextGen AutoGPT Store",
},
],
},
twitter: {
card: "summary_large_image",
title: "Marketplace - NextGen AutoGPT",
description: "Find and use AI Agents created by our community",
images: ["/images/store-twitter.png"],
},
icons: {
icon: "/favicon.ico",
shortcut: "/favicon-16x16.png",
apple: "/apple-touch-icon.png",
},
};
export default async function Page({}: {}) {
// Get data server-side
const { featuredAgents, topAgents, featuredCreators } = await getStoreData();
return (
<div className="mx-auto w-screen max-w-[1360px]">
<main className="px-4">
<HeroSection />
<FeaturedSection
featuredAgents={featuredAgents.agents as FeaturedAgent[]}
/>
<Separator />
<AgentsSection
sectionTitle="Top Agents"
agents={topAgents.agents as Agent[]}
/>
<Separator />
<FeaturedCreators
featuredCreators={featuredCreators.creators as FeaturedCreator[]}
/>
<Separator />
<BecomeACreator
title="Become a Creator"
description="Join our ever-growing community of hackers and tinkerers"
buttonText="Become a Creator"
/>
</main>
</div>
);
}

View File

@ -105,7 +105,7 @@ export const AgentInfo: React.FC<AgentInfoProps> = ({
by
</div>
<Link
href={`/store/creator/${encodeURIComponent(creator)}`}
href={`/marketplace/creator/${encodeURIComponent(creator)}`}
className="font-geist text-base font-medium text-neutral-800 hover:underline dark:text-neutral-200 sm:text-lg lg:text-xl"
>
{creator}

View File

@ -28,7 +28,7 @@ export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
: ""
} flex items-center justify-start gap-3`}
>
{href === "/store" && (
{href === "/marketplace" && (
<IconShoppingCart
className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
/>

View File

@ -36,7 +36,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
if (searchQuery.trim()) {
// Encode the search term and navigate to the desired path
const encodedTerm = encodeURIComponent(searchQuery);
router.push(`/store/search?searchTerm=${encodedTerm}`);
router.push(`/marketplace/search?searchTerm=${encodedTerm}`);
}
};

View File

@ -46,7 +46,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
<div className="h-full w-full rounded-2xl bg-zinc-200 dark:bg-zinc-800">
<div className="inline-flex h-[264px] flex-col items-start justify-start gap-6 p-3">
<Link
href="/store/dashboard"
href="/marketplace/dashboard"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconDashboardLayout className="h-6 w-6" />
@ -56,7 +56,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</Link>
{stripeAvailable && (
<Link
href="/store/credits"
href="/marketplace/credits"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconCoin className="h-6 w-6" />
@ -66,7 +66,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</Link>
)}
<Link
href="/store/integrations"
href="/marketplace/integrations"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconIntegrations className="h-6 w-6" />
@ -75,7 +75,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</div>
</Link>
<Link
href="/store/api_keys"
href="/marketplace/api_keys"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<KeyIcon className="h-6 w-6" />
@ -84,7 +84,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</div>
</Link>
<Link
href="/store/profile"
href="/marketplace/profile"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconProfile className="h-6 w-6" />
@ -93,7 +93,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</div>
</Link>
<Link
href="/store/settings"
href="/marketplace/settings"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconSliders className="h-6 w-6" />
@ -110,7 +110,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
<div className="h-full w-full rounded-2xl bg-zinc-200 dark:bg-zinc-800">
<div className="inline-flex h-[264px] flex-col items-start justify-start gap-6 p-3">
<Link
href="/store/dashboard"
href="/marketplace/dashboard"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconDashboardLayout className="h-6 w-6" />
@ -120,7 +120,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</Link>
{stripeAvailable && (
<Link
href="/store/credits"
href="/marketplace/credits"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconCoin className="h-6 w-6" />
@ -130,7 +130,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</Link>
)}
<Link
href="/store/integrations"
href="/marketplace/integrations"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconIntegrations className="h-6 w-6" />
@ -139,7 +139,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</div>
</Link>
<Link
href="/store/api_keys"
href="/marketplace/api_keys"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<KeyIcon className="h-6 w-6" strokeWidth={1} />
@ -148,7 +148,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</div>
</Link>
<Link
href="/store/profile"
href="/marketplace/profile"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconProfile className="h-6 w-6" />
@ -157,7 +157,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ linkGroups }) => {
</div>
</Link>
<Link
href="/store/settings"
href="/marketplace/settings"
className="inline-flex w-full items-center gap-2.5 rounded-xl px-3 py-3 text-neutral-800 hover:bg-neutral-800 hover:text-white dark:text-neutral-200 dark:hover:bg-neutral-700 dark:hover:text-white"
>
<IconSliders className="h-6 w-6" />

View File

@ -39,7 +39,7 @@ export const AgentsSection: React.FC<AgentsSectionProps> = ({
const handleCardClick = (creator: string, slug: string) => {
router.push(
`/store/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`,
`/marketplace/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`,
);
};

View File

@ -24,7 +24,7 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
const router = useRouter();
const handleCardClick = (creator: string) => {
router.push(`/store/creator/${encodeURIComponent(creator)}`);
router.push(`/marketplace/creator/${encodeURIComponent(creator)}`);
};
// Only show first 4 creators

View File

@ -43,7 +43,7 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
const handleCardClick = (creator: string, slug: string) => {
router.push(
`/store/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`,
`/marketplace/agent/${encodeURIComponent(creator)}/${encodeURIComponent(slug)}`,
);
};

View File

@ -10,7 +10,7 @@ export const HeroSection: React.FC = () => {
function onFilterChange(selectedFilters: string[]) {
const encodedTerm = encodeURIComponent(selectedFilters.join(", "));
router.push(`/store/search?searchTerm=${encodedTerm}`);
router.push(`/marketplace/search?searchTerm=${encodedTerm}`);
}
return (

View File

@ -260,7 +260,7 @@ export const PublishAgentPopout: React.FC<PublishAgentPopoutProps> = ({
onClose={handleClose}
onDone={handleClose}
onViewProgress={() => {
router.push("/store/dashboard");
router.push("/marketplace/dashboard");
handleClose();
}}
/>

View File

@ -24,7 +24,7 @@ export function NavBarButtons({ className }: { className?: string }) {
icon: <BsBoxes />,
},
{
href: "/store",
href: "/marketplace",
text: "Marketplace",
icon: <IconMarketplace />,
},

View File

@ -5,9 +5,9 @@ import { NextResponse, type NextRequest } from "next/server";
const PROTECTED_PAGES = [
"/monitor",
"/build",
"/store/profile",
"/store/settings",
"/store/dashboard",
"/marketplace/profile",
"/marketplace/settings",
"/marketplace/dashboard",
];
const ADMIN_PAGES = ["/admin"];
@ -87,7 +87,7 @@ export async function updateSession(request: NextRequest) {
ADMIN_PAGES.some((page) => request.nextUrl.pathname.startsWith(`${page}`))
) {
// no user, potentially respond by redirecting the user to the login page
url.pathname = `/store`;
url.pathname = `/marketplace`;
return NextResponse.redirect(url);
}

View File

@ -5,7 +5,7 @@ test.describe("Authentication", () => {
test("user can login successfully", async ({ page, loginPage, testUser }) => {
await page.goto("/login");
await loginPage.login(testUser.email, testUser.password);
await test.expect(page).toHaveURL("/store");
await test.expect(page).toHaveURL("/marketplace");
await test
.expect(page.getByTestId("profile-popout-menu-trigger"))
.toBeVisible();
@ -19,7 +19,7 @@ test.describe("Authentication", () => {
await page.goto("/login");
await loginPage.login(testUser.email, testUser.password);
await test.expect(page).toHaveURL("/store");
await test.expect(page).toHaveURL("/marketplace");
// Click on the profile menu trigger to open popout
await page.getByTestId("profile-popout-menu-trigger").click();
@ -43,7 +43,7 @@ test.describe("Authentication", () => {
}) => {
await page.goto("/login");
await loginPage.login(testUser.email, testUser.password);
await test.expect(page).toHaveURL("/store");
await test.expect(page).toHaveURL("/marketplace");
// Click on the profile menu trigger to open popout
await page.getByTestId("profile-popout-menu-trigger").click();
@ -52,7 +52,7 @@ test.describe("Authentication", () => {
await test.expect(page).toHaveURL("/login");
await loginPage.login(testUser.email, testUser.password);
await test.expect(page).toHaveURL("/store");
await test.expect(page).toHaveURL("/marketplace");
await test
.expect(page.getByTestId("profile-popout-menu-trigger"))
.toBeVisible();

View File

@ -10,7 +10,7 @@ test.describe("Profile", () => {
// Start each test with login using worker auth
await page.goto("/login");
await loginPage.login(testUser.email, testUser.password);
await test.expect(page).toHaveURL("/store");
await test.expect(page).toHaveURL("/marketplace");
});
test("user can view their profile information", async ({