robodev 0.23.0 → 0.25.0

package/templates/marketplace/apps/fe/src/components/features/auth/LoginPage.tsx

@@ -0,0 +1,111 @@
+import { Alert, Button, PasswordInput, TextButton, TextInput, Typography, useForm } from "@povio/ui/tanstack";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useAuth } from "@/hooks/useAuth";
+import { UserAuthModels } from "@/openapi/userAuth/userAuth.models";
+import { UserAuthQueries } from "@/openapi/userAuth/userAuth.queries";
+
+export function LoginPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { updateTokens, userPromise } = useAuth();
+
+  const [error, setError] = useState<string | null>(null);
+
+  const loginMutation = UserAuthQueries.useUserAuthLocalPasswordLogin();
+
+  const form = useForm({
+    zodSchema: UserAuthModels.UserAuthPasswordLoginRequestSchema,
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const completeLogin = async (tokens: UserAuthModels.AuthnTokenResponse) => {
+    updateTokens?.(tokens.accessToken, tokens.refreshToken);
+    const user = await userPromise?.();
+    if (user === null) {
+      throw new Error(t(($) => $.auth.login.form.loginFailed));
+    }
+    await navigate({ to: "/" });
+  };
+
+  const onSubmit = async (data: UserAuthModels.UserAuthPasswordLoginRequest) => {
+    setError(null);
+    try {
+      const tokens = await loginMutation.mutateAsync({ data });
+      await completeLogin(tokens);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : t(($) => $.auth.login.form.loginFailed));
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-3">
+        <Typography
+          variant="prominent-1"
+          size="title-2"
+          as="h2"
+          className="text-text-default-1"
+        >
+          {t(($) => $.auth.login.form.title)}
+        </Typography>
+      </div>
+
+      {error && (
+        <Alert
+          color="error"
+          text={error}
+        />
+      )}
+
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-8"
+      >
+        <div className="flex flex-col gap-4">
+          <TextInput
+            field={{ form, name: "email" }}
+            label={t(($) => $.auth.login.form.email)}
+            placeholder={t(($) => $.auth.login.form.emailPlaceholder)}
+            size="default"
+          />
+
+          <PasswordInput
+            field={{ form, name: "password" }}
+            label={t(($) => $.auth.login.form.password)}
+            placeholder={t(($) => $.auth.login.form.passwordPlaceholder)}
+            size="default"
+          />
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <Button
+            width="fill"
+            type="submit"
+            isDisabled={loginMutation.isPending}
+            isLoading={loginMutation.isPending}
+          >
+            {t(($) => $.auth.login.form.submit)}
+          </Button>
+
+        </div>
+      </form>
+
+      <div className="flex justify-center gap-1 border-elevation-outline-default-1 border-t pt-6">
+        <Typography
+          size="label-2"
+          className="text-text-default-2"
+        >
+          {t(($) => $.auth.login.form.noAccount)}
+        </Typography>
+
+        <TextButton link={{ to: "/register" }}>{t(($) => $.auth.login.form.registerLink)}</TextButton>
+      </div>
+    </div>
+  );
+}

package/templates/marketplace/apps/fe/src/components/features/auth/RegisterPage.tsx

@@ -0,0 +1,143 @@
+import { Alert, Button, PasswordInput, TextButton, TextInput, Typography, useForm } from "@povio/ui/tanstack";
+import { useNavigate } from "@tanstack/react-router";
+import { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+
+import { useAuth } from "@/hooks/useAuth";
+import { UserAuthModels } from "@/openapi/userAuth/userAuth.models";
+import { UserAuthQueries } from "@/openapi/userAuth/userAuth.queries";
+
+export function RegisterPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { updateTokens, userPromise } = useAuth();
+
+  const [error, setError] = useState<string | null>(null);
+
+  const registerMutation = UserAuthQueries.useRegister();
+  const registerFormSchema = useMemo(
+    () =>
+      UserAuthModels.UserAuthPasswordRegisterRequestSchema.extend({
+        confirmPassword: z.string().min(
+          1,
+          t(($) => $.auth.register.form.confirmPasswordRequired),
+        ),
+      }).refine((data) => data.password === data.confirmPassword, {
+        path: ["confirmPassword"],
+        message: t(($) => $.auth.register.form.passwordsDoNotMatch),
+      }),
+    [t],
+  );
+
+  const form = useForm({
+    zodSchema: registerFormSchema,
+    defaultValues: {
+      email: "",
+      name: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const onSubmit = async (formData: z.infer<typeof registerFormSchema>) => {
+    setError(null);
+    const data: UserAuthModels.UserAuthPasswordRegisterRequest = {
+      email: formData.email,
+      name: formData.name,
+      password: formData.password,
+    };
+
+    try {
+      const tokens = await registerMutation.mutateAsync({ data });
+      updateTokens?.(tokens.accessToken, tokens.refreshToken);
+      const user = await userPromise?.();
+      if (user === null) {
+        throw new Error(t(($) => $.auth.register.form.registrationFailed));
+      }
+      await navigate({ to: "/" });
+    } catch (error) {
+      setError(error instanceof Error ? error.message : t(($) => $.auth.register.form.registrationFailed));
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <Typography
+        variant="prominent-1"
+        size="title-2"
+        as="h2"
+        className="text-center text-text-default-1"
+      >
+        {t(($) => $.auth.register.form.title)}
+      </Typography>
+
+      {error && (
+        <Alert
+          color="error"
+          text={error}
+        />
+      )}
+
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-8"
+      >
+        <div className="flex flex-col gap-4">
+          <TextInput
+            field={{ form, name: "email" }}
+            label={t(($) => $.auth.register.form.email)}
+            placeholder={t(($) => $.auth.register.form.emailPlaceholder)}
+          />
+
+          <TextInput
+            field={{ form, name: "name" }}
+            label={t(($) => $.auth.register.form.name)}
+            placeholder={t(($) => $.auth.register.form.namePlaceholder)}
+          />
+
+          <PasswordInput
+            field={{ form, name: "password" }}
+            label={t(($) => $.auth.register.form.password)}
+            placeholder={t(($) => $.auth.register.form.passwordPlaceholder)}
+          />
+
+          <div className="flex flex-col gap-2">
+            <PasswordInput
+              field={{ form, name: "confirmPassword" }}
+              label={t(($) => $.auth.register.form.confirmPassword)}
+              placeholder={t(($) => $.auth.register.form.confirmPasswordPlaceholder)}
+            />
+
+            <Typography
+              size="label-2"
+              className="text-text-default-2"
+            >
+              {t(($) => $.auth.register.form.passwordRequirements)}
+            </Typography>
+          </div>
+        </div>
+
+        <Button
+          width="fill"
+          type="submit"
+          isDisabled={registerMutation.isPending}
+          isLoading={registerMutation.isPending}
+        >
+          {t(($) => $.auth.register.form.submit)}
+        </Button>
+      </form>
+
+      <div className="flex justify-center gap-1">
+        <Typography
+          size="label-2"
+          className="text-text-default-2"
+        >
+          {t(($) => $.auth.register.form.hasAccount)}
+        </Typography>
+
+        <TextButton link={{ to: "/login" }}>{t(($) => $.auth.register.form.loginLink)}</TextButton>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,76 @@
+import { Button, TextInput, Typography } from "@povio/ui/tanstack";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { CategoryQueries } from "@/openapi/category/category.queries";
+import { ListingQueries } from "@/openapi/listing/listing.queries";
+
+import { ListingCard } from "./ListingCard";
+
+export function BrowsePage() {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [categoryId, setCategoryId] = useState<string | undefined>();
+  const { data: categories } = CategoryQueries.useGetAll();
+  const { data, isLoading } = ListingQueries.usePaginate({
+    page: 1,
+    limit: 20,
+    search: search.trim() || undefined,
+    categoryId,
+  });
+  const listings = data?.items ?? [];
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.browse.title)} />
+
+      <div className="flex flex-col gap-3">
+        <TextInput
+          variant="filled"
+          size="extra-small"
+          value={search}
+          onChange={setSearch}
+          label={t(($) => $.browse.search)}
+          placeholder={t(($) => $.browse.searchPlaceholder)}
+        />
+        <div className="flex flex-wrap gap-1">
+          <Button
+            size="xs"
+            variant={categoryId ? "outlined" : "contained"}
+            color={categoryId ? "secondary" : "primary"}
+            onPress={() => setCategoryId(undefined)}
+          >
+            {t(($) => $.browse.allCategories)}
+          </Button>
+          {(categories ?? []).map((category) => (
+            <Button
+              key={category.id}
+              size="xs"
+              variant={categoryId === category.id ? "contained" : "outlined"}
+              color={categoryId === category.id ? "primary" : "secondary"}
+              onPress={() => setCategoryId(category.id)}
+            >
+              {category.name}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {isLoading ? (
+        <LoadingState />
+      ) : listings.length === 0 ? (
+        <Typography size="body-3" className="text-text-default-2">
+          {t(($) => $.browse.empty)}
+        </Typography>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          {listings.map((listing) => (
+            <ListingCard key={listing.id} listing={listing} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,88 @@
+import { Button, TextInput, Typography, useToast } from "@povio/ui/tanstack";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { CartQueries } from "@/openapi/cart/cart.queries";
+import { formatCents } from "@/utils/listing-form";
+
+export function CartPage() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+  const { errorToast } = useToast();
+  const { data, isLoading } = CartQueries.useGetAll();
+  const updateItem = CartQueries.useUpdate();
+  const removeItem = CartQueries.useDeleteApiCartById();
+  const items = data ?? [];
+
+  const onQty = async (id: string, quantity: number) => {
+    try {
+      await updateItem.mutateAsync({ id, data: { quantity } });
+      await queryClient.invalidateQueries({ queryKey: CartQueries.keys.all });
+    } catch {
+      errorToast({ text: t(($) => $.cart.updateError) });
+    }
+  };
+
+  const onRemove = async (id: string) => {
+    try {
+      await removeItem.mutateAsync({ id });
+      await queryClient.invalidateQueries({ queryKey: CartQueries.keys.all });
+    } catch {
+      errorToast({ text: t(($) => $.cart.removeError) });
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title={t(($) => $.cart.title)}
+        actions={
+          items.length > 0 ? (
+            <Button size="xs" link={{ to: "/checkout" }}>
+              {t(($) => $.cart.checkout)}
+            </Button>
+          ) : null
+        }
+      />
+
+      {isLoading ? (
+        <LoadingState />
+      ) : items.length === 0 ? (
+        <Typography size="body-3" className="text-text-default-2">
+          {t(($) => $.cart.empty)}
+        </Typography>
+      ) : (
+        <div className="flex flex-col gap-4">
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="flex flex-col gap-2 border-elevation-outline-default-1 border-b pb-4"
+            >
+              <Typography size="title-5">{item.listing.title}</Typography>
+              <Typography size="body-3">{formatCents(item.listing.priceCents)}</Typography>
+              <div className="flex flex-wrap items-end gap-2">
+                <TextInput
+                  variant="filled"
+                  size="extra-small"
+                  value={String(item.quantity)}
+                  onChange={(value) => void onQty(item.id, Number(value) || 1)}
+                  label={t(($) => $.cart.quantity)}
+                />
+                <Button
+                  size="xs"
+                  variant="outlined"
+                  color="secondary"
+                  onPress={() => void onRemove(item.id)}
+                >
+                  {t(($) => $.cart.remove)}
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,193 @@
+import { Button, TextInput, Typography, useForm, 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 { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import { CartQueries } from "@/openapi/cart/cart.queries";
+import { CheckoutModels } from "@/openapi/checkout/checkout.models";
+import { CheckoutQueries } from "@/openapi/checkout/checkout.queries";
+import { PurchaseQueries } from "@/openapi/purchase/purchase.queries";
+
+export function CheckoutPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { successToast, errorToast } = useToast();
+  const { data: cart, isLoading } = CartQueries.useGetAll();
+  const checkout = CheckoutQueries.useCreate();
+  const [cardNumber, setCardNumber] = useState("4242424242424242");
+  const [expiry, setExpiry] = useState("12/28");
+  const [cvc, setCvc] = useState("123");
+  const form = useForm({
+    zodSchema: CheckoutModels.CheckoutRequestSchema,
+    defaultValues: {
+      shippingName: "",
+      shippingLine1: "",
+      shippingLine2: "",
+      shippingCity: "",
+      shippingRegion: "",
+      shippingPostal: "",
+      shippingCountry: "",
+      last4: undefined,
+    },
+  });
+
+  const onSubmit = async (data: CheckoutModels.CheckoutRequest) => {
+    const last4 = cardNumber.replace(/\D/g, "").slice(-4);
+    try {
+      await checkout.mutateAsync({
+        data: {
+          shippingName: data.shippingName,
+          shippingLine1: data.shippingLine1,
+          shippingLine2: data.shippingLine2,
+          shippingCity: data.shippingCity,
+          shippingRegion: data.shippingRegion,
+          shippingPostal: data.shippingPostal,
+          shippingCountry: data.shippingCountry,
+          last4: last4 && last4.length === 4 ? last4 : undefined,
+        },
+      });
+      await queryClient.invalidateQueries({ queryKey: CartQueries.keys.all });
+      await queryClient.invalidateQueries({ queryKey: PurchaseQueries.keys.all });
+      successToast({ text: t(($) => $.checkout.success) });
+      await navigate({ to: "/orders" });
+    } catch {
+      errorToast({ text: t(($) => $.checkout.error) });
+    }
+  };
+
+  if (isLoading) return <LoadingState />;
+  if (!cart || cart.length === 0) {
+    return (
+      <div className="flex flex-col gap-6">
+        <PageHeader title={t(($) => $.checkout.title)} />
+        <Typography size="body-3" className="text-text-default-2">
+          {t(($) => $.checkout.empty)}
+        </Typography>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader title={t(($) => $.checkout.title)} />
+      <form onSubmit={form.handleSubmit(onSubmit)} className="flex max-w-xl flex-col gap-4">
+        <Typography size="title-5" variant="prominent-1">
+          {t(($) => $.checkout.shipping)}
+        </Typography>
+        <RowInputWrapper label={t(($) => $.checkout.name)} isRequired>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingName" }}
+            label={t(($) => $.checkout.name)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.line1)} isRequired>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingLine1" }}
+            label={t(($) => $.checkout.line1)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.line2)}>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingLine2" }}
+            label={t(($) => $.checkout.line2)}
+            hideLabel
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.city)} isRequired>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingCity" }}
+            label={t(($) => $.checkout.city)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.region)}>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingRegion" }}
+            label={t(($) => $.checkout.region)}
+            hideLabel
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.postal)} isRequired>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingPostal" }}
+            label={t(($) => $.checkout.postal)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.country)} isRequired>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "shippingCountry" }}
+            label={t(($) => $.checkout.country)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+
+        <Typography size="title-5" variant="prominent-1">
+          {t(($) => $.checkout.card)}
+        </Typography>
+        <RowInputWrapper label={t(($) => $.checkout.cardNumber)}>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            value={cardNumber}
+            onChange={setCardNumber}
+            label={t(($) => $.checkout.cardNumber)}
+            hideLabel
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.expiry)}>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            value={expiry}
+            onChange={setExpiry}
+            label={t(($) => $.checkout.expiry)}
+            hideLabel
+          />
+        </RowInputWrapper>
+        <RowInputWrapper label={t(($) => $.checkout.cvc)}>
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            value={cvc}
+            onChange={setCvc}
+            label={t(($) => $.checkout.cvc)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <div className="flex justify-end">
+          <Button type="submit" size="xs" isLoading={checkout.isPending}>
+            {t(($) => $.checkout.submit)}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { Link, Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import type { ListingModels } from "@/openapi/listing/listing.models";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
+import { formatCents } from "@/utils/listing-form";
+
+interface ListingCardProps {
+  listing: ListingModels.ListingDto;
+}
+
+export function ListingCard({ listing }: ListingCardProps) {
+  const { t } = useTranslation();
+  const imageSrc = listing.images[0]?.url ?? getFallbackImageUrl({ width: 400, height: 300 });
+
+  return (
+    <Link
+      to="/listings/$id"
+      params={{ id: listing.id }}
+      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" />
+      </div>
+      <div className="flex flex-col gap-2 p-4">
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+          as="h3"
+          className="min-w-0 text-text-default-1"
+        >
+          {listing.title}
+        </Typography>
+        <Typography size="body-3" className="text-text-default-1">
+          {formatCents(listing.priceCents)}
+        </Typography>
+        {listing.quantity <= 0 ? (
+          <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}
+      </div>
+    </Link>
+  );
+}