Merge branch 'master' into cloudfront-testing

kscalelabs · Nov 12, 2024 · 3bab2bc · 3bab2bc
2 parents 4cad4fc + 4255cae
commit 3bab2bc
Show file tree

Hide file tree

Showing 26 changed files with 282 additions and 257 deletions.
diff --git a/frontend/src/components/auth/AuthBlock.tsx b/frontend/src/components/auth/AuthBlock.tsx
@@ -25,7 +25,10 @@ const AuthBlock: React.FC<AuthBlockProps> = ({ title, onClosed, signup }) => {
   return (
     <Card className="w-[400px] bg-gray-12 text-gray-12 rounded-lg">
       <CardHeader>
-        <Header title={title} onClosed={onClosed} />
+        <Header
+          title={title ? title : signup ? "Signup" : "Login"}
+          onClosed={onClosed}
+        />
       </CardHeader>
       <AuthBlockInner initialSignup={signup} />
     </Card>

diff --git a/frontend/src/components/auth/AuthProvider.tsx b/frontend/src/components/auth/AuthProvider.tsx
@@ -144,7 +144,7 @@ const AuthProvider = () => {
     <div className="flex flex-col w-full">
       <div className="flex justify-center items-center mb-4">
         <div className="border-t border-gray-300 flex-grow mr-3"></div>
-        <span className="flex-shrink">OR</span>
+        <span className="text-white flex-shrink">OR</span>
         <div className="border-t border-gray-300 flex-grow ml-3"></div>
       </div>
       <div className="flex items-center w-full gap-x-2">

diff --git a/frontend/src/components/auth/RequireAuthentication.tsx b/frontend/src/components/auth/RequireAuthentication.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import AuthBlock from "@/components/auth/AuthBlock";
+import Container from "@/components/ui/container";
 import { useAuthentication } from "@/hooks/useAuth";
 
 interface Props {
@@ -24,16 +25,16 @@ const RequireAuthentication = (props: Props) => {
   return isAuthenticated ? (
     <>{children}</>
   ) : (
-    <>
-      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
-        <div className="relative w-auto my-6 mx-auto max-w-3xl">
-          <div className="border-0 rounded-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
-            <AuthBlock onClosed={onClosed} />
-          </div>
+    <Container className="flex justify-center items-center max-w-xl">
+      <div className="flex flex-col justify-center items-center my-6">
+        <h2 className="text-gray-1 text-xl font-bold mb-4">
+          You must be logged in to view this page
+        </h2>
+        <div className="border-0 rounded-lg">
+          <AuthBlock onClosed={onClosed} />
         </div>
       </div>
-      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
-    </>
+    </Container>
   );
 };
 

diff --git a/frontend/src/components/listing/ListingPayment.tsx b/frontend/src/components/listing/ListingPayment.tsx
@@ -60,6 +60,8 @@ const ListingPayment = ({
           listingId={listingId}
           stripeProductId={stripeProductId}
           label="Purchase Now"
+          inventoryType={inventoryType}
+          inventoryQuantity={inventoryQuantity}
         />
       </div>
     </div>

diff --git a/frontend/src/components/listing/ListingRenderer.tsx b/frontend/src/components/listing/ListingRenderer.tsx
@@ -74,6 +74,14 @@ const ListingRenderer = ({ listing }: { listing: ListingResponse }) => {
             createdAt={createdAt}
           />
 
+          <hr className="border-gray-2 my-4" />
+
+          <ListingDescription
+            listingId={listingId}
+            description={description}
+            edit={canEdit}
+          />
+
           {/* Add payment section if price exists */}
           {isForSale && (
             <>
@@ -93,14 +101,6 @@ const ListingRenderer = ({ listing }: { listing: ListingResponse }) => {
             </>
           )}
 
-          <hr className="border-gray-2 my-4" />
-
-          <ListingDescription
-            listingId={listingId}
-            description={description}
-            edit={canEdit}
-          />
-
           <hr className="border-gray-200 my-4" />
 
           {/* Build this robot */}

diff --git a/frontend/src/components/listings/ListingGridCard.tsx b/frontend/src/components/listings/ListingGridCard.tsx
@@ -1,4 +1,5 @@
 import { paths } from "@/gen/api";
+import { formatPrice } from "@/lib/utils/formatNumber";
 
 import { RenderDescription } from "../listing/ListingDescription";
 
@@ -59,6 +60,20 @@ const ListingGridCard = ({
             />
           </div>
         )}
+        {listing?.price_amount && (
+          <div className="mt-2 text-sm text-gray-300">
+            {formatPrice(listing.price_amount)}
+            {listing.inventory_type === "finite" &&
+              listing.inventory_quantity !== null && (
+                <span className="ml-2 text-gray-400">
+                  ({listing.inventory_quantity} available)
+                </span>
+              )}
+            {listing.inventory_type === "preorder" && (
+              <span className="ml-2 text-gray-400">(Pre-order)</span>
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
@@ -123,7 +123,7 @@ const Navbar = () => {
                     variant="ghost"
                     className="px-3 py-2 text-gray-1"
                   >
-                    <Link to={ROUTES.LOGIN.path}>Sign In</Link>
+                    <Link to={ROUTES.LOGIN.path}>Log In</Link>
                   </Button>
                   <Button
                     asChild

diff --git a/frontend/src/components/orders/OrderCard.tsx b/frontend/src/components/orders/OrderCard.tsx
@@ -80,7 +80,7 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
   return (
     <div className="bg-gray-1 shadow-md rounded-lg p-4 md:p-6 w-full">
       <h2 className="text-gray-12 font-bold text-2xl mb-1">{product.name}</h2>
-      <p className="text-gray-11 mb-2 sm:text-lg">
+      <p className="text-gray-11 mb-1 sm:text-lg">
         Status:{" "}
         <span className={`font-semibold ${getTextColor(order.status)}`}>
           {normalizeStatus(order.status)}
@@ -199,8 +199,8 @@ const OrderCard: React.FC<{ orderWithProduct: OrderWithProduct }> = ({
         </p>
       )}
 
-      <div className="mt-4 text-sm bg-gray-3 p-3 rounded-md text-gray-12">
-        <h3 className="font-semibold text-lg">Shipping Address</h3>
+      <div className="mt-4 text-xs bg-gray-3 p-3 rounded-md text-gray-12">
+        <h3 className="font-semibold">Shipping Address</h3>
         <p>{order.shipping_name}</p>
         <p>{order.shipping_address_line1}</p>
         {order.shipping_address_line2 && <p>{order.shipping_address_line2}</p>}

diff --git a/frontend/src/components/pages/APIKeys.tsx b/frontend/src/components/pages/APIKeys.tsx
@@ -78,7 +78,7 @@ const SingleKey = ({ token, permissions, onDelete }: SingleKeyProps) => {
         </Button>
         <Button
           onClick={() => setIsKeyVisible(!isKeyVisible)}
-          variant="default"
+          variant="outline"
         >
           {isKeyVisible ? "Hide" : "Show Key"}
         </Button>
@@ -150,7 +150,7 @@ const APIKeys = () => {
 
   return (
     <RequireAuthentication>
-      <div className="container mx-auto max-w-4xl shadow-md rounded-lg bg-gray-1 text-gray-12 border bg-card text-card-foreground relative">
+      <div className="container mx-auto max-w-4xl shadow-md rounded-lg bg-gray-12 text-gray-2 border bg-card text-card-foreground relative">
         <div className="p-6">
           <h1 className="text-3xl font-extrabold mb-4">API Keys</h1>
           {apiKeys === null ? (
@@ -191,7 +191,7 @@ const APIKeys = () => {
                 </label>
                 <Button
                   onClick={createKey}
-                  variant="default"
+                  variant="outline"
                   disabled={creatingKey}
                 >
                   Create {readonly ? "Read-only " : "Read-write "}Key

diff --git a/frontend/src/components/pages/About.tsx b/frontend/src/components/pages/About.tsx
@@ -28,7 +28,7 @@ const About = () => {
         <div className="space-y-12">
           <div>
             <div className="gap-4">
-              <a href="https://blog.kscale.dev">Blog</a>
+              <a href="https://kscale.dev/research">Blog</a>
               <a href="https://docs.kscale.dev">Docs</a>
               <a href="https://discord.gg/kscale">Discord</a>
               <a href="https://forms.gle/sKytq8jsJXNEfaFy7">Feedback</a>
@@ -61,7 +61,7 @@ const About = () => {
               <a href="https://www.linkedin.com/in/denys-bezmenov/">Denys</a>
               <a href="https://ivntsng.github.io/ivntsng/">Ivan</a>
               <a href="https://www.jingxiangmo.com/">Jingxiang</a>
-              <a href="https://budzianowski.github.io/">Pawel</a>
+              <a href="https://budzianowski.github.io/">Paweł</a>
               <a href="https://www.linkedin.com/in/ruixu/">Rui</a>
               <a href="https://www.linkedin.com/in/virajtipnis/">Viraj</a>
               <a href="https://wesleymaa.com/">Wesley</a>

diff --git a/frontend/src/components/pages/CreateSell.tsx b/frontend/src/components/pages/CreateSell.tsx
@@ -142,7 +142,7 @@ const CreateSell = () => {
 
   useEffect(() => {
     if (auth.currentUser && slug) {
-      setPreviewUrl(`/item/${auth.currentUser.username}/${slug}`);
+      setPreviewUrl(`/bot/${auth.currentUser.username}/${slug}`);
     }
   }, [auth.currentUser, slug]);
 
@@ -309,6 +309,35 @@ const CreateSell = () => {
     return true;
   };
 
+  const handleInventoryTypeChange = (
+    e: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    const newType = e.target.value as typeof inventoryType;
+    setInventoryType(newType);
+    setValue("inventory_type", newType);
+
+    // Reset related fields based on inventory type
+    if (newType === "infinite") {
+      setValue("inventory_quantity", null);
+      setValue("preorder_release_date", null);
+    } else if (newType === "preorder") {
+      setValue("inventory_quantity", null);
+      setIsReservation(false);
+      setValue("is_reservation", false);
+      setValue("reservation_deposit_amount", null);
+    } else if (newType === "finite") {
+      setValue("preorder_release_date", null);
+    }
+
+    // Trigger validation
+    trigger([
+      "inventory_quantity",
+      "preorder_release_date",
+      "is_reservation",
+      "reservation_deposit_amount",
+    ]);
+  };
+
   return (
     <RequireAuthentication>
       <Container className="max-w-xl">
@@ -453,15 +482,8 @@ const CreateSell = () => {
                     <select
                       className="w-full p-2 rounded-md border border-gray-7 bg-gray-3 text-gray-12"
                       {...register("inventory_type")}
-                      onChange={(e) => {
-                        setInventoryType(
-                          e.target.value as typeof inventoryType,
-                        );
-                        setValue(
-                          "inventory_type",
-                          e.target.value as typeof inventoryType,
-                        );
-                      }}
+                      onChange={handleInventoryTypeChange}
+                      value={inventoryType}
                     >
                       <option value="infinite">Unlimited</option>
                       <option value="finite">Limited Quantity</option>
@@ -479,6 +501,7 @@ const CreateSell = () => {
                     <Input
                       type="number"
                       min="1"
+                      onWheel={(e) => (e.target as HTMLInputElement).blur()} // prevent changing value when scrolling
                       {...register("inventory_quantity", {
                         valueAsNumber: true,
                         validate: (value) =>

diff --git a/frontend/src/components/pages/CreateShare.tsx b/frontend/src/components/pages/CreateShare.tsx
@@ -57,7 +57,7 @@ const CreateShare = () => {
 
   useEffect(() => {
     if (auth.currentUser && slug) {
-      setPreviewUrl(`/item/${auth.currentUser.username}/${slug}`);
+      setPreviewUrl(`/bot/${auth.currentUser.username}/${slug}`);
     }
   }, [auth.currentUser, slug]);
 

diff --git a/frontend/src/components/pages/Login.tsx b/frontend/src/components/pages/Login.tsx
@@ -1,10 +1,14 @@
+import { useNavigate } from "react-router-dom";
+
 import AuthBlock from "@/components/auth/AuthBlock";
 
 const Login = () => {
+  const navigate = useNavigate();
+
   return (
     <div className="mx-8">
       <div className="flex justify-center items-center">
-        <AuthBlock title={<span className="text-gray-2">Welcome back!</span>} />
+        <AuthBlock title="Welcome back!" onClosed={() => navigate(-1)} />
       </div>
     </div>
   );

diff --git a/frontend/src/components/pages/OrderSuccess.tsx b/frontend/src/components/pages/OrderSuccess.tsx
@@ -20,7 +20,7 @@ const OrderSuccess: React.FC = () => {
 
   return (
     <div className="pt-4 min-h-screen">
-      <Card className="mt-8">
+      <Card className="mt-8 max-w-4xl mx-auto">
         <CardContent className="p-6 flex flex-col items-center">
           <CheckCircle className="w-16 h-16 text-green-500 mb-4" />
           <h2 className="text-2xl font-bold mb-2">Order Successful!</h2>
@@ -37,7 +37,7 @@ const OrderSuccess: React.FC = () => {
             <Button asChild>
               <a href="/">Return to Home</a>
             </Button>
-            <Button asChild variant="default">
+            <Button asChild variant="outline">
               <a href="/orders">View Your Orders</a>
             </Button>
           </div>

diff --git a/frontend/src/components/pages/ResearchPage.tsx b/frontend/src/components/pages/ResearchPage.tsx
@@ -105,7 +105,7 @@ const MediumCard: React.FC<{ article: ResearchPost }> = ({ article }) => {
         <div className="p-4">
           <div className="flex items-center gap-2 mb-2">
             <img
-              src={`https://unavatar.io/${article.author}`}
+              src={getAuthorImage(article.author)}
               alt={article.author}
               className="rounded-full h-6 w-6"
             />
@@ -144,4 +144,15 @@ const MediumCard: React.FC<{ article: ResearchPost }> = ({ article }) => {
   );
 };
 
+const getAuthorImage = (author: string): string => {
+  switch (author.toLowerCase()) {
+    case "ben bolte":
+      return "https://miro.medium.com/v2/resize:fill:176:176/1*EuQxKArtHb0orCJcWTPHkA.jpeg";
+    case "paweł budzianowski":
+      return "https://miro.medium.com/v2/resize:fill:40:40/1*REeM2VDUPg7VWMU1UwnsBw.png";
+    default:
+      return "https://miro.medium.com/v2/resize:fill:40:40/1*REeM2VDUPg7VWMU1UwnsBw.png";
+  }
+};
+
 export default MediumArticles;