improvements to onboarding flow

src/admin/components/onboarding-flow/default/orders/order-detail.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
   ComputerDesktopSolid,
   CurrencyDollarSolid,
-  SquaresPlusSolid,
+  NextJs
 } from "@medusajs/icons";
 import { IconBadge, Heading, Text } from "@medusajs/ui";
 
@@ -26,11 +26,11 @@ const OrderDetailDefault = () => {
       </Text>
       <div className="grid grid-cols-3 gap-4 mt-6 pb-6 mb-6 border-b border-ui-border-base border-solid auto-rows-fr">
         <a
-          href="https://docs.medusajs.com/starters/nextjs-medusa-starter?path=simple-quickstart"
+          href={`https://docs.medusajs.com/modules/overview?ref=onboarding`}
           target="_blank"
           className="flex"
         >
-          <div className="p-3 rounded-rounded flex items-start bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
+          <div className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <IconBadge>
@@ -44,11 +44,11 @@ const OrderDetailDefault = () => {
                 weight="plus"
                 className="mb-1 text-ui-fg-base"
               >
-                Start Selling in 3 Steps
+                Add Commerce Features
               </Text>
               <Text size="small">
-                Go live with a backend, an admin, and a storefront by following
-                these three steps.
+                Learn about all available commerce features and how to
+                add them in your storefront
               </Text>
             </div>
           </div>
@@ -82,15 +82,15 @@ const OrderDetailDefault = () => {
           </div>
         </a>
         <a
-          href="https://docs.medusajs.com/plugins/overview?ref=onboarding"
+          href={`https://docs.medusajs.com/starters/nextjs-medusa-starter?ref=onboarding`}
           target="_blank"
           className="flex"
         >
-          <div className="p-3 rounded-rounded flex items-start bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
+          <div className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <IconBadge>
-                  <SquaresPlusSolid />
+                  <NextJs />
                 </IconBadge>
               </div>
             </div>
@@ -100,11 +100,11 @@ const OrderDetailDefault = () => {
                 weight="plus"
                 className="mb-1 text-ui-fg-base"
               >
-                Install Plugins
+                Install Next.js Quickstart
               </Text>
               <Text size="small">
-                Check out available plugins for payment, fulfillment,
-                search, and more.
+                Install and use the Next.js storefront with
+                your commerce store.
               </Text>
             </div>
           </div>

src/admin/components/onboarding-flow/nextjs/orders/order-detail.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { CurrencyDollarSolid, NextJs, SquaresPlusSolid } from "@medusajs/icons";
+import { CurrencyDollarSolid, NextJs, ComputerDesktopSolid } from "@medusajs/icons";
 import { IconBadge, Heading, Text } from "@medusajs/ui";
 
 const OrderDetailNextjs = () => {
@@ -28,15 +28,15 @@ const OrderDetailNextjs = () => {
       </Text>
       <div className="grid grid-cols-3 gap-4 mt-6 pb-6 mb-6 border-b border-ui-border-base border-solid auto-rows-fr">
         <a
-          href={`https://docs.medusajs.com/plugins/overview${queryParams}`}
+          href={`https://docs.medusajs.com/starters/nextjs-medusa-starter${queryParams}`}
           target="_blank"
           className="flex"
         >
-          <div className="p-3 rounded-rounded flex items-start bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
+          <div className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <IconBadge>
-                  <SquaresPlusSolid />
+                  <NextJs />
                 </IconBadge>
               </div>
             </div>
@@ -46,11 +46,11 @@ const OrderDetailNextjs = () => {
                 weight="plus"
                 className="mb-1 text-ui-fg-base"
               >
-                Install Plugins
+                Build with the Next.js Storefront
               </Text>
               <Text size="small">
-                Install plugins for payment, fulfillment, search, and more, and
-                integrate them in your storefront.
+                Learn about the Next.js starter storefront’s features and how to
+                customize it.
               </Text>
             </div>
           </div>
@@ -77,22 +77,22 @@ const OrderDetailNextjs = () => {
                 Add Commerce Features
               </Text>
               <Text size="small">
-                Learn about all available commerce features in Medusa and how to
+                Learn about all available commerce features and how to
                 add them in your storefront
               </Text>
             </div>
           </div>
         </a>
         <a
-          href={`https://docs.medusajs.com/starters/nextjs-medusa-starter${queryParams}`}
+          href={`https://docs.medusajs.com/recipes${queryParams}`}
           target="_blank"
           className="flex"
         >
-          <div className="p-3 rounded-rounded items-start flex bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
+          <div className="p-3 rounded-rounded flex items-start bg-ui-bg-subtle shadow-elevation-card-rest hover:shadow-elevation-card-hover">
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <IconBadge>
-                  <NextJs />
+                  <ComputerDesktopSolid />
                 </IconBadge>
               </div>
             </div>
@@ -102,11 +102,11 @@ const OrderDetailNextjs = () => {
                 weight="plus"
                 className="mb-1 text-ui-fg-base"
               >
-                Build with the Next.js Storefront
+                Build Custom Use Cases
               </Text>
               <Text size="small">
-                Learn about the Next.js starter storefront’s features and how to
-                customize it.
+                Build a marketplace, subscription-based purchases,
+                or your custom use-cases.
               </Text>
             </div>
           </div>

src/admin/components/onboarding-flow/nextjs/orders/orders-list.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { 
   useAdminProduct,
   useCreateCart,
@@ -13,6 +13,7 @@ const OrdersListNextjs = ({ isComplete, data }: StepContentProps) => {
   const { product } = useAdminProduct(data.product_id);
   const { mutateAsync: createCart, isLoading: cartIsLoading } = useCreateCart()
   const { client } = useMedusa()
+  const [cartId, setCartId] = useState<string | null>(null)
 
   const prepareNextjsCheckout = async () => {
     const variant = product.variants[0] ?? null;
@@ -29,12 +30,18 @@ const OrdersListNextjs = ({ isComplete, data }: StepContentProps) => {
         ]
       })
 
-      window.open(`http://localhost:8000/checkout?cart_id=${cart?.id}&onboarding=true`, "_blank")
+      setCartId(cart?.id)
     } catch (e) {
       console.error(e);
     }
   }
 
+  useEffect(() => {
+    if (!cartId && product) {
+      prepareNextjsCheckout()
+    }
+  }, [cartId, product])
+
   return (
     <>
       <div className="mb-6 flex flex-col gap-2">
@@ -47,16 +54,14 @@ const OrdersListNextjs = ({ isComplete, data }: StepContentProps) => {
       </div>
       <div className="flex gap-2">
         {!isComplete && (
-          <>
-            <Button
-              variant="primary"
-              size="base"
-              onClick={() => prepareNextjsCheckout()}
-              isLoading={cartIsLoading}
-            >
-              Place an order in your storefront
+          <a
+            href={`http://localhost:8000/checkout?cart_id=${cartId}&onboarding=true`}
+            target="_blank"
+          >
+            <Button variant="primary" size="base" isLoading={!cartId || cartIsLoading}>
+            Place an order in your storefront
             </Button>
-          </>
+          </a>
         )}
       </div>
     </>