robodev 0.24.0 → 0.26.0

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

@@ -1,4 +1,4 @@
-import { Link, Typography } from "@povio/ui";
+import { Link, Tag, Typography } from "@povio/ui";
 import { useTranslation } from "react-i18next";
 
 import type { ListingModels } from "@/openapi/listing/listing.models";
@@ -20,7 +20,11 @@ export function ListingCard({ listing }: ListingCardProps) {
       className="relative overflow-hidden rounded-m border border-elevation-outline-default-1 bg-elevation-fill-default-1 no-underline! shadow-sm transition-all hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2"
     >
       <div className="aspect-video w-full bg-elevation-fill-default-2">
-        <img src={imageSrc} alt="" className="h-full w-full object-cover" />
+        <img
+          src={imageSrc}
+          alt=""
+          className="h-full w-full object-cover"
+        />
       </div>
       <div className="flex flex-col gap-2 p-4">
         <Typography
@@ -31,19 +35,22 @@ export function ListingCard({ listing }: ListingCardProps) {
         >
           {listing.title}
         </Typography>
-        <Typography size="body-3" className="text-text-default-1">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+          className="text-text-default-1"
+        >
           {formatCents(listing.priceCents)}
         </Typography>
         {listing.quantity <= 0 ? (
-          <Typography size="label-3" className="text-text-default-2">
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
             {t(($) => $.sell.soldOut)}
           </Typography>
         ) : null}
-        {listing.category ? (
-          <Typography size="label-3" className="text-text-default-2">
-            {listing.category.name}
-          </Typography>
-        ) : null}
+        {listing.category ? <Tag color="secondary">{listing.category.name}</Tag> : null}
       </div>
     </Link>
   );

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

@@ -1,5 +1,6 @@
-import { Button, TextInput, Typography, useToast } from "@povio/ui/tanstack";
+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";
 
@@ -11,9 +12,10 @@ 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 { getFallbackImageUrl } from "@/utils/image-fallback";
 import { formatCents } from "@/utils/listing-form";
 
+import { ListingGallery } from "./ListingGallery";
+
 interface ListingDetailsPageProps {
   listing: ListingModels.ListingDto;
 }
@@ -30,7 +32,6 @@ export function ListingDetailsPage({ listing }: ListingDetailsPageProps) {
   const { data: reviews } = ReviewQueries.useGetAll({ listingId: listing.id });
   const isOwn = user?.id === listing.sellerId;
   const canBuy = !isOwn && listing.status === "active" && listing.quantity > 0;
-  const imageSrc = listing.images[0]?.url ?? getFallbackImageUrl({ width: 800, height: 450 });
 
   const onAddToCart = async () => {
     try {
@@ -58,39 +59,78 @@ export function ListingDetailsPage({ listing }: ListingDetailsPageProps) {
 
   return (
     <div className="flex flex-col gap-6">
-      <PageHeader enableBack backProps={{ backLink: { to: "/" } }} title={listing.title} />
+      <PageHeader
+        enableBack
+        backProps={{ backLink: { to: "/" } }}
+        title={listing.title}
+      />
 
-      <Card className="max-w-3xl overflow-hidden p-0">
-        <div className="aspect-video w-full bg-elevation-fill-default-2">
-          <img src={imageSrc} alt="" className="h-full w-full object-cover" />
-        </div>
-        <div className="flex flex-col gap-4 p-4">
-          <Typography size="title-5" variant="prominent-1">
-            {formatCents(listing.priceCents)}
-          </Typography>
-          {listing.description ? (
-            <Typography size="body-3" className="whitespace-pre-wrap text-text-default-2">
-              {listing.description}
+      <div className="grid grid-cols-1 items-start gap-6 md: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>
-          ) : null}
-          <Typography size="label-3" className="text-text-default-2">
+            {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 text-interactive-contained-error-idle" /> : 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">
+            <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">
-            {t(($) => $.listing.shipping)}: {formatCents(listing.shippingCents)} ·{" "}
-            {t(($) => $.listing.shippingDays, { count: listing.shippingDays })}
-          </Typography>
-          <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">
+          <Typography
+            size="label-3"
+            className="text-text-default-2"
+          >
             {listing.sellerAverageRating != null
               ? t(($) => $.listing.rating, { rating: listing.sellerAverageRating })
               : t(($) => $.listing.noRating)}
@@ -107,35 +147,54 @@ export function ListingDetailsPage({ listing }: ListingDetailsPageProps) {
                 onChange={setQty}
                 label={t(($) => $.listing.quantity)}
               />
-              <Button size="xs" isLoading={addToCart.isPending} onPress={() => void onAddToCart()}>
+              <Button
+                size="xs"
+                isLoading={addToCart.isPending}
+                onPress={() => void onAddToCart()}
+              >
                 {t(($) => $.listing.addToCart)}
               </Button>
             </div>
           ) : null}
+        </Card>
+      </div>
 
-          {!isOwn ? (
-            <Button
-              size="xs"
-              variant="outlined"
-              color="secondary"
-              onPress={() => void onToggleWatch()}
-            >
-              {listing.watchedByMe ? t(($) => $.listing.unwatch) : t(($) => $.listing.watch)}
-            </Button>
-          ) : (
-            <Button size="xs" link={{ to: "/sell/$id", params: { id: listing.id } }}>
-              {t(($) => $.sell.edit)}
-            </Button>
-          )}
-        </div>
-      </Card>
+      <div className="flex flex-col gap-3">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+        >
+          {t(($) => $.listing.aboutThisItem)}
+        </Typography>
+        {listing.description ? (
+          <Typography
+            size="body-3"
+            className="whitespace-pre-wrap text-text-default-2"
+          >
+            {listing.description}
+          </Typography>
+        ) : (
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
+            {t(($) => $.listing.noDescription)}
+          </Typography>
+        )}
+      </div>
 
-      <div className="flex max-w-3xl flex-col gap-3">
-        <Typography size="title-5" variant="prominent-1">
+      <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">
+          <Typography
+            size="body-3"
+            className="text-text-default-2"
+          >
             {t(($) => $.listing.noReviews)}
           </Typography>
         ) : (

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>
+  );
+}