robodev 0.24.0 → 0.25.0

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

@@ -0,0 +1,278 @@
+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 { 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),
+});
+
+export interface ListingFormProps {
+  listing?: ListingModels.ListingDto;
+  onSuccess?: () => void | Promise<void>;
+  onCancel?: () => void;
+}
+
+export function ListingForm({ listing, onSuccess, onCancel }: ListingFormProps) {
+  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 goToMyListings = () => {
+    void navigate({ to: "/my-listings" });
+  };
+
+  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 });
+      if (onSuccess) {
+        await onSuccess();
+        return;
+      }
+      goToMyListings();
+    } catch {
+      errorToast({
+        text: listing ? t(($) => $.listingForm.updateError) : t(($) => $.listingForm.createError),
+      });
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <form
+      onSubmit={form.handleSubmit(onSubmit)}
+      className="flex w-full 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={() => (onCancel ? onCancel() : goToMyListings())}
+        >
+          {t(($) => $.listingForm.cancel)}
+        </Button>
+        <Button
+          type="submit"
+          size="xs"
+          isLoading={isPending}
+          isDisabled={isPending}
+        >
+          {listing ? t(($) => $.listingForm.submitEdit) : t(($) => $.listingForm.submitCreate)}
+        </Button>
+      </div>
+    </form>
+  );
+}

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,6 +1,9 @@
-import { Button, Typography, useToast } from "@povio/ui/tanstack";
+import { Drawer, 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";
@@ -9,14 +12,29 @@ import { ListingQueries } from "@/openapi/listing/listing.queries";
 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,25 +51,60 @@ 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">
+        <Typography
+          size="body-3"
+          className="text-text-default-2"
+        >
           {t(($) => $.sell.empty)}
         </Typography>
       ) : (
         <div className="flex flex-col gap-4">
           {listings.map((listing) => (
-            <div key={listing.id} className="flex flex-col gap-2">
+            <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">
+                <Typography
+                  size="label-3"
+                  className="text-text-default-2"
+                >
                   {formatCents(listing.priceCents)}
                   {listing.quantity <= 0 ? ` · ${t(($) => $.sell.soldOut)}` : ""}
                   {listing.status === "inactive" ? ` · ${t(($) => $.sell.inactive)}` : ""}