robodev 0.24.0 → 0.26.0

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

@@ -1,243 +1,27 @@
-import {
-  Button,
-  FileUpload,
-  TextArea,
-  TextInput,
-  Typography,
-  useForm,
-  useFormValue,
-  useToast,
-} from "@povio/ui/tanstack";
-import { useQueryClient } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { z } from "zod";
 
-import { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
 import { PageHeader } from "@/components/shared/page/PageHeader";
-import { CategoryQueries } from "@/openapi/category/category.queries";
-import { ListingQueries } from "@/openapi/listing/listing.queries";
 import type { ListingModels } from "@/openapi/listing/listing.models";
-import { bindLocalListingImages, centsToDollarsInput, dollarsToCents } from "@/utils/listing-form";
-import { createListing, updateListing } from "@/utils/listing-submit";
 
-const listingFormSchema = z.object({
-  title: z.string().min(1),
-  description: z.string().optional(),
-  categoryId: z.string().min(1),
-  price: z.string().min(1),
-  quantity: z.string().min(1),
-  shipping: z.string().min(1),
-  shippingDays: z.string().min(1),
-});
+import { ListingForm } from "./ListingForm";
 
 interface ListingFormPageProps {
-  listing?: ListingModels.ListingDto;
+  listing: ListingModels.ListingDto;
 }
 
 export function ListingFormPage({ listing }: ListingFormPageProps) {
   const { t } = useTranslation();
-  const navigate = useNavigate();
-  const queryClient = useQueryClient();
-  const { successToast, errorToast } = useToast();
-  const { data: categories } = CategoryQueries.useGetAll();
-  const [pickedFiles, setPickedFiles] = useState<File[]>([]);
-  const [removedIds, setRemovedIds] = useState<string[]>([]);
-  const [isPending, setIsPending] = useState(false);
-  const remainingImages = (listing?.images ?? []).filter((image) => !removedIds.includes(image.id));
-
-  const form = useForm({
-    zodSchema: listingFormSchema,
-    defaultValues: {
-      title: listing?.title ?? "",
-      description: listing?.description ?? "",
-      categoryId: listing?.categoryId ?? "",
-      price: listing ? centsToDollarsInput(listing.priceCents) : "",
-      quantity: listing ? String(listing.quantity) : "1",
-      shipping: listing ? centsToDollarsInput(listing.shippingCents) : "",
-      shippingDays: listing ? String(listing.shippingDays) : "3",
-    },
-  });
-  const categoryId = useFormValue(form, (values) => values.categoryId);
-
-  const onSubmit = async (data: z.infer<typeof listingFormSchema>) => {
-    try {
-      setIsPending(true);
-      const fields = {
-        title: data.title,
-        description: data.description,
-        categoryId: data.categoryId,
-        priceCents: dollarsToCents(data.price),
-        quantity: Number(data.quantity),
-        shippingCents: dollarsToCents(data.shipping),
-        shippingDays: Number(data.shippingDays),
-        files: pickedFiles,
-        removeImageIds: removedIds,
-      };
-      if (listing) {
-        await updateListing(listing.id, fields);
-        successToast({ text: t(($) => $.listingForm.updateSuccess) });
-      } else {
-        await createListing(fields);
-        successToast({ text: t(($) => $.listingForm.createSuccess) });
-      }
-      await queryClient.invalidateQueries({ queryKey: ListingQueries.keys.all });
-      await navigate({ to: "/my-listings" });
-    } catch {
-      errorToast({
-        text: listing ? t(($) => $.listingForm.updateError) : t(($) => $.listingForm.createError),
-      });
-    } finally {
-      setIsPending(false);
-    }
-  };
 
   return (
     <div className="flex flex-col gap-6">
       <PageHeader
         enableBack
         backProps={{ backLink: { to: "/my-listings" } }}
-        title={listing ? t(($) => $.listingForm.editTitle) : t(($) => $.listingForm.createTitle)}
+        title={t(($) => $.listingForm.editTitle)}
       />
-
-      <form onSubmit={form.handleSubmit(onSubmit)} className="flex max-w-xl flex-col gap-4">
-        <RowInputWrapper label={t(($) => $.listingForm.title)} isRequired>
-          <TextInput
-            variant="filled"
-            size="extra-small"
-            field={{ form, name: "title" }}
-            label={t(($) => $.listingForm.title)}
-            placeholder={t(($) => $.listingForm.titlePlaceholder)}
-            hideLabel
-            isRequired
-          />
-        </RowInputWrapper>
-
-        <RowInputWrapper label={t(($) => $.listingForm.description)}>
-          <TextArea
-            variant="filled"
-            size="extra-small"
-            field={{ form, name: "description" }}
-            label={t(($) => $.listingForm.description)}
-            placeholder={t(($) => $.listingForm.descriptionPlaceholder)}
-            hideLabel
-          />
-        </RowInputWrapper>
-
-        <RowInputWrapper label={t(($) => $.listingForm.category)} isRequired>
-          <div className="flex flex-wrap gap-1">
-            {(categories ?? []).map((category) => (
-              <Button
-                key={category.id}
-                type="button"
-                size="xs"
-                variant={categoryId === category.id ? "contained" : "outlined"}
-                color={categoryId === category.id ? "primary" : "secondary"}
-                onPress={() => form.setFieldValue("categoryId", category.id)}
-              >
-                {category.name}
-              </Button>
-            ))}
-          </div>
-        </RowInputWrapper>
-
-        <RowInputWrapper label={t(($) => $.listingForm.price)} isRequired>
-          <TextInput
-            variant="filled"
-            size="extra-small"
-            field={{ form, name: "price" }}
-            label={t(($) => $.listingForm.price)}
-            hideLabel
-            isRequired
-          />
-        </RowInputWrapper>
-
-        <RowInputWrapper label={t(($) => $.listingForm.quantity)} isRequired>
-          <TextInput
-            variant="filled"
-            size="extra-small"
-            field={{ form, name: "quantity" }}
-            label={t(($) => $.listingForm.quantity)}
-            hideLabel
-            isRequired
-          />
-        </RowInputWrapper>
-
-        <RowInputWrapper label={t(($) => $.listingForm.shipping)} isRequired>
-          <TextInput
-            variant="filled"
-            size="extra-small"
-            field={{ form, name: "shipping" }}
-            label={t(($) => $.listingForm.shipping)}
-            hideLabel
-            isRequired
-          />
-        </RowInputWrapper>
-
-        <RowInputWrapper label={t(($) => $.listingForm.shippingDays)} isRequired>
-          <TextInput
-            variant="filled"
-            size="extra-small"
-            field={{ form, name: "shippingDays" }}
-            label={t(($) => $.listingForm.shippingDays)}
-            hideLabel
-            isRequired
-          />
-        </RowInputWrapper>
-
-        {remainingImages.length > 0 ? (
-          <div className="flex flex-wrap gap-2">
-            {remainingImages.map((image) => (
-              <div key={image.id} className="flex flex-col gap-1">
-                <img src={image.url} alt="" className="h-20 w-20 object-cover" />
-                <Button
-                  type="button"
-                  size="xs"
-                  variant="outlined"
-                  color="secondary"
-                  onPress={() => setRemovedIds((current) => [...current, image.id])}
-                >
-                  {t(($) => $.listingForm.removeImage)}
-                </Button>
-              </div>
-            ))}
-          </div>
-        ) : null}
-
-        {pickedFiles.length > 0 ? (
-          <Typography size="label-3" className="text-text-default-2">
-            {pickedFiles.map((file) => file.name).join(", ")}
-          </Typography>
-        ) : null}
-
-        <FileUpload
-          label={t(($) => $.listingForm.images)}
-          emptyText={t(($) => $.listingForm.imageEmptyText)}
-          uploadText={t(($) => $.listingForm.imageUploadText)}
-          browseText={t(($) => $.listingForm.imageBrowseText)}
-          acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
-          allowsMultiple
-          {...bindLocalListingImages((file) =>
-            setPickedFiles((current) => [...current, file].slice(0, 8)),
-          )}
-        />
-
-        <div className="flex justify-end gap-2">
-          <Button
-            type="button"
-            variant="outlined"
-            color="secondary"
-            size="xs"
-            onPress={() => navigate({ to: "/my-listings" })}
-          >
-            {t(($) => $.listingForm.cancel)}
-          </Button>
-          <Button type="submit" size="xs" isLoading={isPending} isDisabled={isPending}>
-            {listing ? t(($) => $.listingForm.submitEdit) : t(($) => $.listingForm.submitCreate)}
-          </Button>
-        </div>
-      </form>
+      <div className="max-w-xl">
+        <ListingForm listing={listing} />
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,54 @@
+import { Button } from "@povio/ui";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import type { ListingModels } from "@/openapi/listing/listing.models";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
+
+interface ListingGalleryProps {
+  images: ListingModels.ListingDto["images"];
+}
+
+export function ListingGallery({ images }: ListingGalleryProps) {
+  const { t } = useTranslation();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const fallback = getFallbackImageUrl({ width: 800, height: 600 });
+  const active = images[activeIndex] ?? images[0];
+  const imageSrc = active?.url ?? fallback;
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="aspect-[4/3] w-full overflow-hidden rounded-m border border-elevation-outline-default-1 bg-elevation-fill-default-2">
+        <img
+          src={imageSrc}
+          alt=""
+          className="h-full w-full object-cover"
+        />
+      </div>
+      {images.length > 1 ? (
+        <div
+          className="flex flex-wrap gap-2"
+          aria-label={t(($) => $.listing.images)}
+        >
+          {images.map((image, index) => (
+            <Button
+              key={image.id}
+              type="button"
+              size="xs"
+              variant={index === activeIndex ? "contained" : "outlined"}
+              color={index === activeIndex ? "primary" : "secondary"}
+              onPress={() => setActiveIndex(index)}
+              className="h-16 min-h-16 w-16 min-w-16 overflow-hidden p-0"
+            >
+              <img
+                src={image.url}
+                alt=""
+                className="h-full w-full object-cover"
+              />
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,22 +1,40 @@
-import { Button, Typography, useToast } from "@povio/ui/tanstack";
+import { Drawer, Link, Tag, Typography } from "@povio/ui";
+import { Button, useToast } from "@povio/ui/tanstack";
 import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { Plus } from "lucide-react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { LoadingState } from "@/components/shared/layout/LoadingState";
 import { PageHeader } from "@/components/shared/page/PageHeader";
 import { ListingQueries } from "@/openapi/listing/listing.queries";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
 import { formatCents } from "@/utils/listing-form";
 
-import { ListingCard } from "./ListingCard";
+import { ListingForm } from "./ListingForm";
 
-export function MyListingsPage() {
+interface MyListingsPageProps {
+  openCreate?: boolean;
+}
+
+export function MyListingsPage({ openCreate = false }: MyListingsPageProps) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { successToast, errorToast } = useToast();
   const { data, isLoading } = ListingQueries.useGetAll({ mine: "true" });
   const deactivate = ListingQueries.useDeleteApiListingsById();
   const listings = data ?? [];
+  const [isCreateOpen, setIsCreateOpen] = useState(openCreate);
+
+  useEffect(() => {
+    if (!openCreate) {
+      return;
+    }
+    setIsCreateOpen(true);
+    void navigate({ to: "/my-listings", search: {}, replace: true });
+  }, [openCreate, navigate]);
 
   const onDeactivate = async (id: string) => {
     try {
@@ -33,50 +51,123 @@ export function MyListingsPage() {
       <PageHeader
         title={t(($) => $.sell.title)}
         actions={
-          <Button size="xs" icon={Plus} link={{ to: "/sell" }}>
-            {t(($) => $.sell.create)}
-          </Button>
+          <Drawer
+            label={t(($) => $.listingForm.createTitle)}
+            isOpen={isCreateOpen}
+            onOpenChange={setIsCreateOpen}
+            className="w-full max-w-xl overflow-y-auto"
+            trigger={
+              <Button
+                size="xs"
+                icon={Plus}
+              >
+                {t(($) => $.sell.create)}
+              </Button>
+            }
+          >
+            {(close) => (
+              <div className="flex flex-col gap-4 p-6">
+                <Typography
+                  size="title-5"
+                  variant="prominent-1"
+                >
+                  {t(($) => $.listingForm.createTitle)}
+                </Typography>
+                <ListingForm
+                  onSuccess={() => close()}
+                  onCancel={close}
+                />
+              </div>
+            )}
+          </Drawer>
         }
       />
 
       {isLoading ? (
         <LoadingState />
       ) : listings.length === 0 ? (
-        <Typography size="body-3" className="text-text-default-2">
-          {t(($) => $.sell.empty)}
-        </Typography>
+        <div className="flex flex-col items-start gap-3">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.sell.empty)}
+          </Typography>
+          <Button
+            size="xs"
+            icon={Plus}
+            onPress={() => setIsCreateOpen(true)}
+          >
+            {t(($) => $.sell.create)}
+          </Button>
+        </div>
       ) : (
         <div className="flex flex-col gap-4">
-          {listings.map((listing) => (
-            <div key={listing.id} className="flex flex-col gap-2">
-              <ListingCard listing={listing} />
-              <div className="flex flex-wrap items-center gap-2">
-                <Typography size="label-3" className="text-text-default-2">
+          {listings.map((listing) => {
+            const imageSrc = listing.images[0]?.url ?? getFallbackImageUrl({ width: 80, height: 80 });
+            const isActive = listing.status === "active";
+
+            return (
+              <div
+                key={listing.id}
+                className="flex flex-col gap-3 border-elevation-outline-default-1 border-b pb-4 sm:flex-row sm:items-center"
+              >
+                <Link
+                  to="/listings/$id"
+                  params={{ id: listing.id }}
+                  className="flex min-w-0 flex-1 items-center gap-3 no-underline!"
+                >
+                  <img
+                    src={imageSrc}
+                    alt=""
+                    className="h-16 w-16 shrink-0 rounded-m border border-elevation-outline-default-1 object-cover"
+                  />
+                  <Typography
+                    size="title-5"
+                    variant="prominent-1"
+                    className="min-w-0 text-text-default-1"
+                  >
+                    {listing.title}
+                  </Typography>
+                </Link>
+                <Typography
+                  size="body-3"
+                  className="text-text-default-1"
+                >
                   {formatCents(listing.priceCents)}
-                  {listing.quantity <= 0 ? ` · ${t(($) => $.sell.soldOut)}` : ""}
-                  {listing.status === "inactive" ? ` · ${t(($) => $.sell.inactive)}` : ""}
                 </Typography>
-                <Button
-                  size="xs"
-                  variant="outlined"
-                  color="secondary"
-                  link={{ to: "/sell/$id", params: { id: listing.id } }}
+                <Typography
+                  size="body-3"
+                  className="text-text-default-2"
                 >
-                  {t(($) => $.sell.edit)}
-                </Button>
-                {listing.status === "active" ? (
+                  {listing.quantity}
+                </Typography>
+                <Tag color={isActive ? "success" : "secondary"}>
+                  {isActive ? t(($) => $.sell.active) : t(($) => $.sell.inactive)}
+                </Tag>
+                <div className="flex flex-wrap items-center gap-2">
                   <Button
                     size="xs"
                     variant="outlined"
                     color="secondary"
-                    onPress={() => void onDeactivate(listing.id)}
+                    link={{ to: "/sell/$id", params: { id: listing.id } }}
                   >
-                    {t(($) => $.sell.deactivate)}
+                    {t(($) => $.sell.edit)}
                   </Button>
-                ) : null}
+                  {isActive ? (
+                    <Button
+                      size="xs"
+                      variant="outlined"
+                      color="secondary"
+                      onPress={() => void onDeactivate(listing.id)}
+                    >
+                      {t(($) => $.sell.deactivate)}
+                    </Button>
+                  ) : null}
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

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

@@ -0,0 +1,24 @@
+import { Tag } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+type OrderStatus = "paid" | "shipped" | "completed";
+
+const STATUS_COLOR: Record<OrderStatus, "warning" | "primary" | "success"> = {
+  paid: "warning",
+  shipped: "primary",
+  completed: "success",
+};
+
+interface OrderStatusTagProps {
+  status: string;
+}
+
+export function OrderStatusTag({ status }: OrderStatusTagProps) {
+  const { t } = useTranslation();
+  const known = status === "paid" || status === "shipped" || status === "completed" ? status : null;
+  if (!known) {
+    return null;
+  }
+
+  return <Tag color={STATUS_COLOR[known]}>{t(($) => $.orders.status[known])}</Tag>;
+}

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

@@ -0,0 +1,39 @@
+import { Button, Typography } from "@povio/ui/tanstack";
+import { useTranslation } from "react-i18next";
+
+import { Card } from "@/components/shared/ui/Card";
+import type { OrderModels } from "@/openapi/order/order.models";
+import { formatCents } from "@/utils/listing-form";
+
+import { OrderStatusTag } from "./OrderStatusTag";
+
+interface OrderSummaryCardProps {
+  order: OrderModels.OrderDto;
+}
+
+export function OrderSummaryCard({ order }: OrderSummaryCardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <Typography size="title-5">{order.items.map((item) => item.title).join(", ")}</Typography>
+      <div className="flex flex-wrap items-center gap-2">
+        <OrderStatusTag status={order.status} />
+        <Typography
+          size="label-3"
+          className="text-text-default-2"
+        >
+          {formatCents(order.totalCents)}
+        </Typography>
+      </div>
+      <Button
+        size="xs"
+        variant="outlined"
+        color="secondary"
+        link={{ to: "/orders/$id", params: { id: order.id } }}
+      >
+        {t(($) => $.orders.view)}
+      </Button>
+    </Card>
+  );
+}