robodev 0.23.0 → 0.24.0

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

@@ -0,0 +1,152 @@
+import { Button, TextInput, Typography, useToast } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+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 { getFallbackImageUrl } from "@/utils/image-fallback";
+import { formatCents } from "@/utils/listing-form";
+
+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 imageSrc = listing.images[0]?.url ?? getFallbackImageUrl({ width: 800, height: 450 });
+
+  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} />
+
+      <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}
+            </Typography>
+          ) : null}
+          <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">
+            {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">
+            {listing.sellerAverageRating != null
+              ? t(($) => $.listing.rating, { rating: listing.sellerAverageRating })
+              : t(($) => $.listing.noRating)}
+          </Typography>
+
+          {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}
+
+          {!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 max-w-3xl 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/ListingFormPage.tsx

@@ -0,0 +1,243 @@
+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),
+});
+
+interface ListingFormPageProps {
+  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)}
+      />
+
+      <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>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { Button, Typography, useToast } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+import { Plus } from "lucide-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";
+
+export function MyListingsPage() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { successToast, errorToast } = useToast();
+  const { data, isLoading } = ListingQueries.useGetAll({ mine: "true" });
+  const deactivate = ListingQueries.useDeleteApiListingsById();
+  const listings = data ?? [];
+
+  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={
+          <Button size="xs" icon={Plus} link={{ to: "/sell" }}>
+            {t(($) => $.sell.create)}
+          </Button>
+        }
+      />
+
+      {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>
+  );
+}