robodev 0.22.0 → 0.24.0

package/templates/marketplace/apps/fe/src/components/features/marketplace/OrdersPage.tsx

@@ -0,0 +1,224 @@
+import {
+  Button,
+  TextArea,
+  TextInput,
+  Typography,
+  useForm,
+  useFormValue,
+  useToast,
+} from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { OrderQueries } from "@/openapi/order/order.queries";
+import type { OrderModels } from "@/openapi/order/order.models";
+import { PurchaseQueries } from "@/openapi/purchase/purchase.queries";
+import { ReviewQueries } from "@/openapi/review/review.queries";
+import { SaleQueries } from "@/openapi/sale/sale.queries";
+import { formatCents } from "@/utils/listing-form";
+
+export function OrdersPage() {
+  const { t } = useTranslation();
+  const { data: purchases, isLoading: loadingPurchases } = PurchaseQueries.useGetAll();
+  const { data: sales, isLoading: loadingSales } = SaleQueries.useGetAll();
+
+  return (
+    <div className="flex flex-col gap-8">
+      <PageHeader title={t(($) => $.orders.title)} />
+      <section className="flex flex-col gap-3">
+        <Typography size="title-5" variant="prominent-1">
+          {t(($) => $.orders.purchases)}
+        </Typography>
+        {loadingPurchases ? (
+          <LoadingState />
+        ) : !purchases || purchases.length === 0 ? (
+          <Typography size="body-3" className="text-text-default-2">
+            {t(($) => $.orders.emptyPurchases)}
+          </Typography>
+        ) : (
+          purchases.map((order) => <OrderSummary key={order.id} order={order} />)
+        )}
+      </section>
+      <section className="flex flex-col gap-3">
+        <Typography size="title-5" variant="prominent-1">
+          {t(($) => $.orders.sales)}
+        </Typography>
+        {loadingSales ? (
+          <LoadingState />
+        ) : !sales || sales.length === 0 ? (
+          <Typography size="body-3" className="text-text-default-2">
+            {t(($) => $.orders.emptySales)}
+          </Typography>
+        ) : (
+          sales.map((order) => <OrderSummary key={order.id} order={order} />)
+        )}
+      </section>
+    </div>
+  );
+}
+
+function OrderSummary({ order }: { order: OrderModels.OrderDto }) {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <Typography size="title-5">{order.items.map((item) => item.title).join(", ")}</Typography>
+      <Typography size="label-3" className="text-text-default-2">
+        {t(($) => $.orders.status[order.status as "paid" | "shipped" | "completed"])} ·{" "}
+        {formatCents(order.totalCents)}
+      </Typography>
+      <Button
+        size="xs"
+        variant="outlined"
+        color="secondary"
+        link={{ to: "/orders/$id", params: { id: order.id } }}
+      >
+        {order.id.slice(0, 8)}
+      </Button>
+    </Card>
+  );
+}
+
+interface OrderDetailPageProps {
+  order: OrderModels.OrderDto;
+  role: "buyer" | "seller";
+}
+
+export function OrderDetailPage({ order, role }: OrderDetailPageProps) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { successToast, errorToast } = useToast();
+  const ship = OrderQueries.useShip();
+  const complete = OrderQueries.useComplete();
+  const createReview = ReviewQueries.useCreate();
+  const reviewForm = useForm({
+    zodSchema: z.object({
+      listingId: z.string().min(1),
+      rating: z.string().min(1),
+      body: z.string().optional(),
+    }),
+    defaultValues: {
+      listingId: order.items[0]?.listingId ?? "",
+      rating: "5",
+      body: "",
+    },
+  });
+  const reviewListingId = useFormValue(reviewForm, (values) => values.listingId);
+
+  const invalidate = async () => {
+    await queryClient.invalidateQueries({ queryKey: PurchaseQueries.keys.all });
+    await queryClient.invalidateQueries({ queryKey: SaleQueries.keys.all });
+    await queryClient.invalidateQueries({ queryKey: OrderQueries.keys.all });
+  };
+
+  const onShip = async () => {
+    try {
+      await ship.mutateAsync({ id: order.id });
+      await invalidate();
+      successToast({ text: t(($) => $.orders.shipSuccess) });
+    } catch {
+      errorToast({ text: t(($) => $.orders.shipError) });
+    }
+  };
+
+  const onComplete = async () => {
+    try {
+      await complete.mutateAsync({ id: order.id });
+      await invalidate();
+      successToast({ text: t(($) => $.orders.completeSuccess) });
+    } catch {
+      errorToast({ text: t(($) => $.orders.completeError) });
+    }
+  };
+
+  const onReview = async (data: { listingId: string; rating: string; body?: string }) => {
+    try {
+      await createReview.mutateAsync({
+        data: {
+          listingId: data.listingId,
+          orderId: order.id,
+          rating: Number(data.rating),
+          body: data.body,
+        },
+      });
+      await queryClient.invalidateQueries({ queryKey: ReviewQueries.keys.all });
+      successToast({ text: t(($) => $.orders.reviewSuccess) });
+    } catch {
+      errorToast({ text: t(($) => $.orders.reviewError) });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        enableBack
+        backProps={{ backLink: { to: "/orders" } }}
+        title={t(($) => $.orders.title)}
+      />
+      <Card>
+        <Typography size="label-3" className="text-text-default-2">
+          {t(($) => $.orders.status[order.status as "paid" | "shipped" | "completed"])}
+        </Typography>
+        {order.items.map((item) => (
+          <Typography key={item.id} size="body-3">
+            {item.qty} × {item.title} · {formatCents(item.unitPriceCents)}
+          </Typography>
+        ))}
+        <Typography size="body-3">
+          {t(($) => $.orders.total)}: {formatCents(order.totalCents)}
+        </Typography>
+        <Typography size="label-3" className="text-text-default-2">
+          {order.shippingName}, {order.shippingLine1}, {order.shippingCity}
+        </Typography>
+        {role === "seller" && order.status === "paid" ? (
+          <Button size="xs" onPress={() => void onShip()}>
+            {t(($) => $.orders.ship)}
+          </Button>
+        ) : null}
+        {role === "buyer" && order.status === "shipped" ? (
+          <Button size="xs" onPress={() => void onComplete()}>
+            {t(($) => $.orders.complete)}
+          </Button>
+        ) : null}
+      </Card>
+
+      {role === "buyer" && order.status === "completed" ? (
+        <form onSubmit={reviewForm.handleSubmit(onReview)} className="flex max-w-xl flex-col gap-3">
+          <Typography size="title-5">{t(($) => $.orders.review)}</Typography>
+          <div className="flex flex-wrap gap-1">
+            {order.items.map((item) => (
+              <Button
+                key={item.listingId}
+                type="button"
+                size="xs"
+                variant={reviewListingId === item.listingId ? "contained" : "outlined"}
+                color={reviewListingId === item.listingId ? "primary" : "secondary"}
+                onPress={() => reviewForm.setFieldValue("listingId", item.listingId)}
+              >
+                {item.title}
+              </Button>
+            ))}
+          </div>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form: reviewForm, name: "rating" }}
+            label={t(($) => $.orders.reviewRating)}
+          />
+          <TextArea
+            variant="filled"
+            size="extra-small"
+            field={{ form: reviewForm, name: "body" }}
+            label={t(($) => $.orders.reviewBody)}
+          />
+          <Button type="submit" size="xs">
+            {t(($) => $.orders.reviewSubmit)}
+          </Button>
+        </form>
+      ) : null}
+    </div>
+  );
+}

package/templates/marketplace/apps/fe/src/components/features/marketplace/WatchlistPage.tsx

@@ -0,0 +1,56 @@
+import { Button, Typography, useToast } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { WatchQueries } from "@/openapi/watch/watch.queries";
+
+import { ListingCard } from "./ListingCard";
+
+export function WatchlistPage() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { errorToast } = useToast();
+  const { data, isLoading } = WatchQueries.useGetAll();
+  const remove = WatchQueries.useDeleteApiWatchesByListingId();
+  const items = data ?? [];
+
+  const onRemove = async (listingId: string) => {
+    try {
+      await remove.mutateAsync({ listingId });
+      await queryClient.invalidateQueries({ queryKey: WatchQueries.keys.all });
+    } catch {
+      errorToast({ text: t(($) => $.watchlist.removeError) });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.watchlist.title)} />
+      {isLoading ? (
+        <LoadingState />
+      ) : items.length === 0 ? (
+        <Typography size="body-3" className="text-text-default-2">
+          {t(($) => $.watchlist.empty)}
+        </Typography>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+          {items.map((item) => (
+            <div key={item.id} className="flex flex-col gap-2">
+              <ListingCard listing={item.listing} />
+              <Button
+                size="xs"
+                variant="outlined"
+                color="secondary"
+                onPress={() => void onRemove(item.listingId)}
+              >
+                {t(($) => $.watchlist.remove)}
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/marketplace/apps/fe/src/components/features/profile/ProfilePage.tsx

@@ -0,0 +1,96 @@
+import { Button, TextInput, Typography, useForm, useToast } from "@povio/ui/tanstack";
+import { Check } from "lucide-react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { useAuth } from "@/hooks/useAuth";
+import { UserModels } from "@/openapi/user/user.models";
+import { UserQueries } from "@/openapi/user/user.queries";
+
+export function ProfilePage() {
+  const { t } = useTranslation();
+  const { isAuthenticated, user } = useAuth();
+  const { successToast, errorToast } = useToast();
+
+  const { data: fetchedUser, isLoading } = UserQueries.useGet({ enabled: isAuthenticated });
+  const fullUser = fetchedUser ?? user;
+  const updateProfile = UserQueries.useUpdate();
+
+  const form = useForm({
+    zodSchema: UserModels.UserMeUpdateRequestSchema,
+    defaultValues: {
+      name: "",
+      email: "",
+    },
+  });
+
+  useEffect(() => {
+    if (fullUser) {
+      form.reset({
+        name: fullUser.name ?? "",
+        email: fullUser.email ?? "",
+      });
+    }
+  }, [form, fullUser]);
+
+  const onSubmit = async (data: UserModels.UserMeUpdateRequest) => {
+    try {
+      await updateProfile.mutateAsync({ data });
+      successToast({ text: t(($) => $.profile.form.notifications.success) });
+    } catch {
+      errorToast({ text: t(($) => $.profile.form.notifications.error) });
+    }
+  };
+
+  if (isLoading && !fullUser) {
+    return <LoadingState />;
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.profile.form.title)} />
+
+      <Card>
+        <div className="flex flex-col gap-4">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.profile.form.description)}
+          </Typography>
+
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-6"
+          >
+            <TextInput
+              field={{ form, name: "email" }}
+              label={t(($) => $.profile.form.email)}
+              placeholder={t(($) => $.profile.form.emailPlaceholder)}
+            />
+            <TextInput
+              field={{ form, name: "name" }}
+              label={t(($) => $.profile.form.name)}
+              placeholder={t(($) => $.profile.form.namePlaceholder)}
+            />
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                size="s"
+                icon={Check}
+                isDisabled={updateProfile.isPending}
+                isLoading={updateProfile.isPending}
+              >
+                {updateProfile.isPending ? t(($) => $.profile.form.submitLoading) : t(($) => $.profile.form.submit)}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/templates/marketplace/apps/fe/src/components/googleAnalytics/GoogleAnalytics.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+
+import { AppConfig } from "@/config/app.config";
+
+const { measurementId } = AppConfig.googleAnalytics;
+
+const GoogleAnalytics = () => {
+  const isInitializedRef = useRef(false);
+
+  useEffect(() => {
+    if (isInitializedRef.current || !measurementId || (window as any).gtag) {
+      return;
+    }
+    isInitializedRef.current = true;
+
+    const script1 = document.createElement("script");
+    script1.async = true;
+    script1.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
+
+    const script2 = document.createElement("script");
+    script2.innerHTML = `
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '${measurementId}');
+    `;
+
+    document.head.appendChild(script1);
+    document.head.appendChild(script2);
+  }, []);
+
+  return null;
+};
+
+export default GoogleAnalytics;

package/templates/marketplace/apps/fe/src/components/layout/AppLayout.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+
+import { AppHeader } from "./app-header/AppHeader";
+
+interface AppLayoutProps {
+  children: ReactNode;
+}
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <div className="flex min-h-dvh w-full flex-col">
+      <AppHeader />
+
+      <main className="flex w-full flex-1 flex-col">
+        <div className="w-full flex-1 px-4 py-4">{children}</div>
+      </main>
+    </div>
+  );
+}

package/templates/marketplace/apps/fe/src/components/layout/app-header/AppHeader.tsx

@@ -0,0 +1,95 @@
+import { Button, IconButton, Link, Menu } from "@povio/ui";
+import { useNavigate } from "@tanstack/react-router";
+import clsx from "clsx";
+import { ChevronDown, MenuIcon, X } from "lucide-react";
+import { type Key, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { BrandLogo } from "@/components/shared/branding/BrandLogo";
+import { useAuth } from "@/hooks/useAuth";
+
+import { MobileNavigation } from "./MobileNavigation";
+import { NavLink } from "./NavLink";
+
+export function AppHeader() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { isAuthenticated, user, logout } = useAuth();
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const menuItems = [
+    { label: t(($) => $.layout.header.profile), id: "profile" },
+    { label: t(($) => $.layout.header.logout), id: "logout" },
+  ];
+
+  const accountLabel = user?.name || user?.email || t(($) => $.layout.header.profile);
+
+  const handleMenuAction = (key: Key) => {
+    if (key === "profile") {
+      navigate({ to: "/profile" });
+    } else if (key === "logout") {
+      logout();
+    }
+  };
+
+  return (
+    <header
+      className={clsx(
+        "relative z-11 flex shrink-0 items-center gap-4 border-elevation-outline-default-1 border-b bg-elevation-fill-default-1 px-4",
+        isMobileMenuOpen && "flex-wrap",
+      )}
+    >
+      <Link
+        to="/"
+        aria-label={t(($) => $.layout.header.logo)}
+        className="flex shrink-0 items-center no-underline!"
+      >
+        <BrandLogo className="text-interactive-contained-primary-idle" />
+      </Link>
+
+      <div className="hidden min-w-0 lg:block">
+        <nav className="flex flex-row items-center gap-1 overflow-visible border-elevation-outline-default-1 px-0">
+          <NavLink to="/">{t(($) => $.layout.header.nav.browse)}</NavLink>
+          <NavLink to="/my-listings">{t(($) => $.layout.header.nav.sell)}</NavLink>
+          <NavLink to="/watchlist">{t(($) => $.layout.header.nav.watchlist)}</NavLink>
+          <NavLink to="/orders">{t(($) => $.layout.header.nav.orders)}</NavLink>
+          <NavLink to="/cart">{t(($) => $.layout.header.nav.cart)}</NavLink>
+        </nav>
+      </div>
+
+      {isAuthenticated && (
+        <div className="ml-auto hidden shrink-0 items-center gap-2 lg:flex">
+          <Menu
+            trigger={
+              <div className="flex cursor-pointer items-center gap-1">
+                <Button
+                  type="button"
+                  color="secondary"
+                  variant="text"
+                  size="xs"
+                  className="items-center gap-1 overflow-hidden whitespace-nowrap text-text-default-1 [&>span]:font-labels-default!"
+                >
+                  {accountLabel}
+                </Button>
+                <ChevronDown className="size-5 shrink-0" />
+              </div>
+            }
+            items={menuItems}
+            onAction={handleMenuAction}
+          />
+        </div>
+      )}
+
+      <IconButton
+        className="ml-auto lg:hidden"
+        color="primary"
+        icon={isMobileMenuOpen ? X : MenuIcon}
+        label={t(($) => (isMobileMenuOpen ? $.layout.header.closeMenu : $.layout.header.openMenu))}
+        size="xs"
+        variant="ghost"
+        onPress={() => setIsMobileMenuOpen((isOpen) => !isOpen)}
+      />
+      {isMobileMenuOpen ? <MobileNavigation /> : null}
+    </header>
+  );
+}

package/templates/marketplace/apps/fe/src/components/layout/app-header/MobileNavigation.tsx

@@ -0,0 +1,55 @@
+import { Menu, TextButton } from "@povio/ui";
+import { useNavigate } from "@tanstack/react-router";
+import { User } from "lucide-react";
+import type { Key } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useAuth } from "@/hooks/useAuth";
+
+import { NavLink } from "./NavLink";
+
+export function MobileNavigation() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { isAuthenticated, user, logout } = useAuth();
+  const accountLabel = user?.name || user?.email || t(($) => $.layout.header.profile);
+
+  const handleMenuAction = (key: Key) => {
+    if (key === "profile") {
+      navigate({ to: "/profile" });
+    } else if (key === "logout") {
+      logout();
+    }
+  };
+
+  return (
+    <div className="-mx-4 flex w-[calc(100%+2rem)] basis-full flex-col gap-2 border-elevation-outline-default-1 border-t px-4 py-3 lg:hidden">
+      <nav className="flex flex-col gap-1">
+        <NavLink to="/">{t(($) => $.layout.header.nav.browse)}</NavLink>
+        <NavLink to="/my-listings">{t(($) => $.layout.header.nav.sell)}</NavLink>
+        <NavLink to="/watchlist">{t(($) => $.layout.header.nav.watchlist)}</NavLink>
+        <NavLink to="/orders">{t(($) => $.layout.header.nav.orders)}</NavLink>
+        <NavLink to="/cart">{t(($) => $.layout.header.nav.cart)}</NavLink>
+      </nav>
+
+      {isAuthenticated ? (
+        <Menu
+          items={[
+            { id: "profile", label: t(($) => $.layout.header.profile) },
+            { id: "logout", label: t(($) => $.layout.header.logout) },
+          ]}
+          trigger={
+            <TextButton
+              className="mr-auto"
+              color="secondary"
+              icon={User}
+            >
+              {accountLabel}
+            </TextButton>
+          }
+          onAction={handleMenuAction}
+        />
+      ) : null}
+    </div>
+  );
+}

package/templates/marketplace/apps/fe/src/components/layout/app-header/NavLink.tsx

@@ -0,0 +1,29 @@
+import { Link, type LinkProps, Typography } from "@povio/ui";
+import { useMatchRoute } from "@tanstack/react-router";
+import clsx from "clsx";
+
+export function NavLink({ to, children, ...props }: LinkProps) {
+  const matchRoute = useMatchRoute();
+  const isActive = Boolean(matchRoute({ to, fuzzy: true }));
+
+  return (
+    <Link
+      to={to}
+      className={clsx(
+        "no-underline! flex min-h-auto items-center rounded-xs px-button-side-xs py-button-height-xs font-medium transition-colors",
+        isActive
+          ? "bg-elevation-fill-default-4 font-semibold text-interactive-text-primary-idle"
+          : "text-text-default-2 hover:bg-elevation-fill-default-2 hover:text-text-default-1",
+      )}
+      {...props}
+    >
+      <Typography
+        className="relative whitespace-nowrap no-underline! after:invisible after:block after:h-0 after:overflow-hidden after:font-semibold after:content-[attr(data-text)]"
+        size="label-2"
+        data-text={children}
+      >
+        {children}
+      </Typography>
+    </Link>
+  );
+}

package/templates/marketplace/apps/fe/src/components/shared/branding/BrandLogo.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import type { HTMLAttributes } from "react";
+
+export function BrandLogo({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      className={clsx("inline-flex h-[34px] items-center font-semibold text-xl tracking-tight", className)}
+      {...props}
+    >
+      Tiny
+    </span>
+  );
+}

package/templates/marketplace/apps/fe/src/components/shared/error/ErrorFallback.tsx

@@ -0,0 +1,43 @@
+import { ErrorHandler } from "@povio/openapi-codegen-cli";
+import { Button, Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { ThinPageWrapper } from "@/components/shared/layout/ThinPageWrapper";
+
+export interface ErrorFallbackProps {
+  error: unknown;
+  resetError: () => void;
+}
+
+export const ErrorFallback = ({ error, resetError }: ErrorFallbackProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <ThinPageWrapper>
+      <main className="flex flex-col items-center justify-center gap-2 p-8">
+        <Typography
+          size="headline-1"
+          variant="prominent-1"
+          as="h2"
+        >
+          {t(($) => $.shared.errorFallback.heading)}
+        </Typography>
+        <Typography
+          size="title-2"
+          className="text-center text-text-error-1"
+        >
+          {t(($) => $.shared.errorFallback.subheading, {
+            error: ErrorHandler.getErrorMessage(error),
+          })}
+        </Typography>
+        <Button
+          size="s"
+          type="button"
+          onPress={resetError}
+        >
+          {t(($) => $.shared.errorFallback.retryBtn)}
+        </Button>
+      </main>
+    </ThinPageWrapper>
+  );
+};