Refine Preorder (#605)

* No longer duplicate save payment methods * Save multiple cards/payment methods, fixed standard checkout * Stripe connect specific webhook endpoint * UI improvements
kscalelabs · Nov 15, 2024 · fa13d34 · fa13d34
1 parent a2da8f0
commit fa13d34
Show file tree

Hide file tree

Showing 10 changed files with 200 additions and 67 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -32,6 +32,7 @@ env:
   VITE_STRIPE_PUBLISHABLE_KEY: ${{ secrets.VITE_STRIPE_PUBLISHABLE_KEY }}
   STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
   STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
+  STRIPE_CONNECT_WEBHOOK_SECRET: ${{ secrets.STRIPE_CONNECT_WEBHOOK_SECRET }}
 
 jobs:
   run-tests:

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -85,6 +85,7 @@ export ONSHAPE_SECRET_KEY=''
 export VITE_STRIPE_PUBLISHABLE_KEY=''
 export STRIPE_SECRET_KEY=''
 export STRIPE_WEBHOOK_SECRET=''
+export STRIPE_CONNECT_WEBHOOK_SECRET=''
 ```
 
 ### Google OAuth Configuration
@@ -264,7 +265,13 @@ Run this to recieve stripe webhooks locally:
 stripe listen --forward-to localhost:8080/stripe/webhook
 ```
 
-Make sure to set the `STRIPE_WEBHOOK_SECRET` environment variable to the value
+Run this to recieve stripe connect webhooks locally:
+
+```bash
+stripe listen --forward-connect-to localhost:8080/stripe/connect/webhook
+```
+
+Make sure to set the `STRIPE_WEBHOOK_SECRET` and `STRIPE_CONNECT_WEBHOOK_SECRET` environment variables to the values
 shown in the terminal and source it to the terminal you are running
 `make start-backend` in.
 

diff --git a/env.sh.example b/env.sh.example
@@ -34,3 +34,5 @@ export ONSHAPE_SECRET_KEY=''
 export VITE_STRIPE_PUBLISHABLE_KEY=''
 export STRIPE_SECRET_KEY=''
 export STRIPE_WEBHOOK_SECRET=''
+export STRIPE_CONNECT_WEBHOOK_SECRET=''
+
diff --git a/frontend/src/components/pages/Profile.tsx b/frontend/src/components/pages/Profile.tsx
@@ -293,13 +293,15 @@ export const RenderProfile = (props: RenderProfileProps) => {
               <p>You must complete seller onboarding to sell robots</p>
             )}
           </div>
-          <div className="flex gap-2 mb-8">
-            <Button
-              onClick={() => navigate(ROUTES.ORDERS.path)}
-              variant="outline"
-            >
-              Orders
-            </Button>
+          <div className="flex sm:flex-row flex-col gap-2 mb-8">
+            <Tooltip content="View your orders" position="bottom">
+              <Button
+                onClick={() => navigate(ROUTES.ORDERS.path)}
+                variant="outline"
+              >
+                Orders
+              </Button>
+            </Tooltip>
             {!user.stripe_connect_account_id ? (
               <Tooltip content="Start selling on K-Scale" position="bottom">
                 <Button

diff --git a/frontend/src/components/pages/SellerDashboard.tsx b/frontend/src/components/pages/SellerDashboard.tsx
@@ -46,21 +46,15 @@ export default function SellerDashboard() {
         <h1 className="text-3xl font-bold my-4">Seller Dashboard</h1>
 
         <h2 className="text-lg font-semibold mb-2">Account Status</h2>
-        <div className="flex gap-2 bg-gray-11 text-gray-1 px-3 py-2 items-center rounded-lg">
+        <div className="flex gap-2 bg-gray-11 text-gray-1 px-3 py-2 items-start sm:items-center rounded-lg">
           <Check />
           <p>
             Your K-Scale seller account is active and ready to receive payments.
           </p>
         </div>
 
         <div className="mt-8">
-          <div className="flex gap-2 items-center">
-            <Button
-              variant="outline"
-              onClick={() => navigate(ROUTES.BOTS.SELL.path)}
-            >
-              Sell a Robot on K-Scale
-            </Button>
+          <div className="flex sm:flex-row flex-col gap-2 items-start sm:items-center">
             <a
               href={`https://dashboard.stripe.com/${auth.currentUser?.stripe_connect_account_id}`}
               target="_blank"
@@ -69,6 +63,12 @@ export default function SellerDashboard() {
             >
               Open Stripe Dashboard
             </a>
+            <Button
+              variant="outline"
+              onClick={() => navigate(ROUTES.BOTS.SELL.path)}
+            >
+              Sell a Robot on K-Scale
+            </Button>
           </div>
         </div>
       </div>

diff --git a/frontend/src/components/ui/Input/Input.tsx b/frontend/src/components/ui/Input/Input.tsx
@@ -6,9 +6,17 @@ const Input = React.forwardRef<
   HTMLInputElement,
   React.InputHTMLAttributes<HTMLInputElement>
 >(({ className, type, ...props }, ref) => {
+  // Add wheel event handler to prevent scroll adjusting number inputs
+  const handleWheel = (e: React.WheelEvent<HTMLInputElement>) => {
+    if (type === "number") {
+      e.currentTarget.blur();
+    }
+  };
+
   return (
     <input
       type={type}
+      onWheel={handleWheel}
       className={cn(
         `flex h-10 w-full rounded-md
         border border-gray-7 px-3 py-2 text-sm

diff --git a/frontend/src/gen/api.ts b/frontend/src/gen/api.ts
@@ -923,14 +923,37 @@ export interface paths {
         };
         get?: never;
         put?: never;
-        /** Stripe Webhook */
+        /**
+         * Stripe Webhook
+         * @description Handle direct account webhooks (non-Connect events)
+         */
         post: operations["stripe_webhook_stripe_webhook_post"];
         delete?: never;
         options?: never;
         head?: never;
         patch?: never;
         trace?: never;
     };
+    "/stripe/connect/webhook": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Stripe Connect Webhook
+         * @description Handle Connect account webhooks
+         */
+        post: operations["stripe_connect_webhook_stripe_connect_webhook_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/stripe/create-checkout-session": {
         parameters: {
             query?: never;
@@ -1759,7 +1782,7 @@ export interface components {
              * Status
              * @enum {string}
              */
-            status: "processing" | "in_development" | "being_assembled" | "shipped" | "delivered" | "cancelled" | "refunded" | "failed";
+            status: "processing" | "in_development" | "being_assembled" | "shipped" | "delivered" | "preorder_placed" | "cancelled" | "refunded" | "failed";
             /** Amount */
             amount: number;
             /** Currency */
@@ -1794,6 +1817,14 @@ export interface components {
             shipping_postal_code?: string | null;
             /** Shipping Country */
             shipping_country?: string | null;
+            /** Shipped At */
+            shipped_at?: number | null;
+            /** Delivered At */
+            delivered_at?: number | null;
+            /** Cancelled At */
+            cancelled_at?: number | null;
+            /** Refunded At */
+            refunded_at?: number | null;
         };
         /** OrderWithProduct */
         OrderWithProduct: {
@@ -3750,6 +3781,28 @@ export interface operations {
             };
         };
     };
+    stripe_connect_webhook_stripe_connect_webhook_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        [key: string]: string;
+                    };
+                };
+            };
+        };
+    };
     create_checkout_session_stripe_create_checkout_session_post: {
         parameters: {
             query?: never;

diff --git a/store/app/model.py b/store/app/model.py
@@ -577,6 +577,7 @@ def create(cls, user_id: str, listing_id: str, is_upvote: bool) -> Self:
     "being_assembled",
     "shipped",
     "delivered",
+    "preorder_placed",
     "cancelled",
     "refunded",
     "failed",
@@ -608,6 +609,10 @@ class Order(StoreBaseModel):
     shipping_state: str | None = None
     shipping_postal_code: str | None = None
     shipping_country: str | None = None
+    shipped_at: int | None = None
+    delivered_at: int | None = None
+    cancelled_at: int | None = None
+    refunded_at: int | None = None
 
     @classmethod
     def create(