robodev 0.23.0 → 0.25.0

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

@@ -0,0 +1,194 @@
+import { Button, IconButton, TextInput, Typography, useToast } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+import { Heart } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { Card } from "@/components/shared/ui/Card";
+import { useAuth } from "@/hooks/useAuth";
+import { CartQueries } from "@/openapi/cart/cart.queries";
+import { ListingQueries } from "@/openapi/listing/listing.queries";
+import type { ListingModels } from "@/openapi/listing/listing.models";
+import { ReviewQueries } from "@/openapi/review/review.queries";
+import { WatchQueries } from "@/openapi/watch/watch.queries";
+import { formatCents } from "@/utils/listing-form";
+
+import { ListingGallery } from "./ListingGallery";
+
+interface ListingDetailsPageProps {
+  listing: ListingModels.ListingDto;
+}
+
+export function ListingDetailsPage({ listing }: ListingDetailsPageProps) {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+  const queryClient = useQueryClient();
+  const { successToast, errorToast } = useToast();
+  const [qty, setQty] = useState("1");
+  const addToCart = CartQueries.useCreate();
+  const watch = WatchQueries.useCreate();
+  const unwatch = WatchQueries.useDeleteApiWatchesByListingId();
+  const { data: reviews } = ReviewQueries.useGetAll({ listingId: listing.id });
+  const isOwn = user?.id === listing.sellerId;
+  const canBuy = !isOwn && listing.status === "active" && listing.quantity > 0;
+
+  const onAddToCart = async () => {
+    try {
+      await addToCart.mutateAsync({ data: { listingId: listing.id, quantity: Number(qty) || 1 } });
+      await queryClient.invalidateQueries({ queryKey: CartQueries.keys.all });
+      successToast({ text: t(($) => $.listing.addedToCart) });
+    } catch {
+      errorToast({ text: t(($) => $.listing.addToCartError) });
+    }
+  };
+
+  const onToggleWatch = async () => {
+    try {
+      if (listing.watchedByMe) {
+        await unwatch.mutateAsync({ listingId: listing.id });
+      } else {
+        await watch.mutateAsync({ data: { listingId: listing.id } });
+      }
+      await queryClient.invalidateQueries({ queryKey: ListingQueries.keys.all });
+      await queryClient.invalidateQueries({ queryKey: WatchQueries.keys.all });
+    } catch {
+      errorToast({ text: t(($) => $.listing.watchError) });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        enableBack
+        backProps={{ backLink: { to: "/" } }}
+        title={listing.title}
+      />
+
+      <div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(16rem,22rem)]">
+        <ListingGallery images={listing.images} />
+
+        <Card className="flex flex-col gap-4">
+          <div className="flex items-start justify-between gap-3">
+            <Typography
+              size="title-5"
+              variant="prominent-1"
+            >
+              {formatCents(listing.priceCents)}
+            </Typography>
+            {isOwn ? (
+              <Button
+                size="xs"
+                link={{ to: "/sell/$id", params: { id: listing.id } }}
+              >
+                {t(($) => $.sell.edit)}
+              </Button>
+            ) : (
+              <IconButton
+                size="xs"
+                variant="ghost"
+                color="secondary"
+                label={listing.watchedByMe ? t(($) => $.listing.unwatch) : t(($) => $.listing.watch)}
+                disableTooltip
+                icon={listing.watchedByMe ? <Heart className="fill-current" /> : Heart}
+                onPress={() => void onToggleWatch()}
+              />
+            )}
+          </div>
+
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
+            {listing.quantity > 0
+              ? t(($) => $.listing.inStock, { count: listing.quantity })
+              : t(($) => $.listing.soldOut)}
+          </Typography>
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.listing.shipping)}: {formatCents(listing.shippingCents)} ·{" "}
+            {t(($) => $.listing.shippingDays, { count: listing.shippingDays })}
+          </Typography>
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.listing.seller)}: {listing.sellerName || listing.sellerEmail}
+          </Typography>
+          {listing.category ? (
+            <Typography
+              size="label-3"
+              className="text-text-default-2"
+            >
+              {t(($) => $.listing.category)}: {listing.category.name}
+            </Typography>
+          ) : null}
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
+            {listing.sellerAverageRating != null
+              ? t(($) => $.listing.rating, { rating: listing.sellerAverageRating })
+              : t(($) => $.listing.noRating)}
+          </Typography>
+
+          {listing.description ? (
+            <Typography
+              size="body-3"
+              className="whitespace-pre-wrap text-text-default-2"
+            >
+              {listing.description}
+            </Typography>
+          ) : null}
+
+          {isOwn ? <Typography size="body-3">{t(($) => $.listing.ownListing)}</Typography> : null}
+
+          {canBuy ? (
+            <div className="flex flex-wrap items-end gap-2">
+              <TextInput
+                variant="filled"
+                size="extra-small"
+                value={qty}
+                onChange={setQty}
+                label={t(($) => $.listing.quantity)}
+              />
+              <Button
+                size="xs"
+                isLoading={addToCart.isPending}
+                onPress={() => void onAddToCart()}
+              >
+                {t(($) => $.listing.addToCart)}
+              </Button>
+            </div>
+          ) : null}
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+        >
+          {t(($) => $.listing.reviews)}
+        </Typography>
+        {!reviews || reviews.length === 0 ? (
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.listing.noReviews)}
+          </Typography>
+        ) : (
+          reviews.map((review) => (
+            <Card key={review.id}>
+              <Typography size="label-3">{review.rating}/5</Typography>
+              {review.body ? <Typography size="body-3">{review.body}</Typography> : null}
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import type { ListingModels } from "@/openapi/listing/listing.models";
+
+import { ListingForm } from "./ListingForm";
+
+interface ListingFormPageProps {
+  listing: ListingModels.ListingDto;
+}
+
+export function ListingFormPage({ listing }: ListingFormPageProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        enableBack
+        backProps={{ backLink: { to: "/my-listings" } }}
+        title={t(($) => $.listingForm.editTitle)}
+      />
+      <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

@@ -0,0 +1,137 @@
+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";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { ListingQueries } from "@/openapi/listing/listing.queries";
+import { formatCents } from "@/utils/listing-form";
+
+import { ListingCard } from "./ListingCard";
+import { ListingForm } from "./ListingForm";
+
+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 {
+      await deactivate.mutateAsync({ id });
+      await queryClient.invalidateQueries({ queryKey: ListingQueries.keys.all });
+      successToast({ text: t(($) => $.sell.deactivateSuccess) });
+    } catch {
+      errorToast({ text: t(($) => $.sell.deactivateError) });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title={t(($) => $.sell.title)}
+        actions={
+          <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 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"
+                >
+                  {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 } }}
+                >
+                  {t(($) => $.sell.edit)}
+                </Button>
+                {listing.status === "active" ? (
+                  <Button
+                    size="xs"
+                    variant="outlined"
+                    color="secondary"
+                    onPress={() => void onDeactivate(listing.id)}
+                  >
+                    {t(($) => $.sell.deactivate)}
+                  </Button>
+                ) : null}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}