better navigation + added copy

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

@@ -103,6 +103,14 @@ const OrderDetailDefault = () => {
         >
           our documentation
         </a>
+        . If you like Medusa, please{" "}
+        <a 
+          href="https://github.com/medusajs/medusa"
+          target="_blank"
+          className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+        >
+          star us on GitHub
+        </a>
         .
       </div>
     </>

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

@@ -1,25 +1,26 @@
 import React from "react";
-import { ComputerDesktopSolid, CurrencyDollarSolid, ToolsSolid } from "@medusajs/icons";
+import { CurrencyDollarSolid, NextJs, SquaresPlusSolid, ToolsSolid } from "@medusajs/icons";
 import { Badge, Heading, Text } from "@medusajs/ui";
 
 const OrderDetailNextjs = () => {
+  const queryParams = `?ref=onboarding&type=${process.env.MEDUSA_ADMIN_ONBOARDING_TYPE || "nextjs"}`
   return (
     <>
       <Text size="small" className="mb-6">
-        You finished the setup guide 🎉 You now have your first order. Feel free
-        to play around with the order management functionalities, such as
-        capturing payment, creating fulfillments, and more.
+      You finished the setup guide 🎉. You have now a complete ecommerce store with a backend, admin, and a Next.js storefront. Feel free to 
+      play around with each of these components to experience all commerce features that Medusa provides.
       </Text>
       <Heading level="h2" className="text-ui-fg-base pt-6 border-t border-ui-border-base border-solid mb-2">
-        Start developing with Medusa
+        Continue Building your Ecommerce Store
       </Heading>
       <Text size="small">
-        Medusa is a completely customizable commerce solution. We've curated
-        some essential guides to kickstart your development with Medusa.
+        Your ecommerce store provides all basic ecommerce features you need to start selling. 
+        You can add more functionalities, add plugins for third-party integrations, and customize the 
+        storefront’s look and feel to support your use case.
       </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/plugins/overview${queryParams}`}
           target="_blank"
           className="flex"
         >
@@ -29,22 +30,22 @@ const OrderDetailNextjs = () => {
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <Badge type="icon">
-                  <CurrencyDollarSolid />
+                  <SquaresPlusSolid />
                 </Badge>
               </div>
             </div>
             <div>
               <Text size="xsmall" weight="plus" className="mb-1 text-ui-fg-base">
-                Start Selling in 3 Steps
+                Install Plugins
               </Text>
               <Text size="small">
-                Go live with a backend, an admin, and a storefront by following these three steps.
+                Install plugins for payment, fulfillment, search, and more, and integrate them in your storefront.
               </Text>
             </div>
           </div>
         </a>
         <a
-          href="https://docs.medusajs.com/recipes/?ref=onboarding"
+          href={`https://docs.medusajs.com/modules/overview${queryParams}`}
           target="_blank"
           className="flex"
         >
@@ -54,22 +55,22 @@ const OrderDetailNextjs = () => {
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <Badge type="icon">
-                  <ComputerDesktopSolid />
+                  <CurrencyDollarSolid />
                 </Badge>
               </div>
             </div>
             <div>
               <Text size="xsmall" weight="plus" className="mb-1 text-ui-fg-base">
-                Build Custom Use Cases
+                Add Commerce Features
               </Text>
               <Text size="small">
-                Learn how to build a marketplace, subscription-based purchases, or your custom use-case.
+                Learn about all available commerce features in Medusa and how to add them in your storefront
               </Text>
             </div>
           </div>
         </a>
         <a
-          href="https://docs.medusajs.com/beta/?ref=onboarding"
+          href={`https://docs.medusajs.com/starters/nextjs-medusa-starter${queryParams}`}
           target="_blank"
           className="flex"
         >
@@ -79,16 +80,16 @@ const OrderDetailNextjs = () => {
             <div className="mr-4">
               <div className="bg-ui-bg-base rounded-lg border border-ui-border-strong p-1 flex justify-center items-center">
                 <Badge type="icon">
-                  <ToolsSolid />
+                  <NextJs />
                 </Badge>
               </div>
             </div>
             <div>
               <Text size="xsmall" weight="plus" className="mb-1 text-ui-fg-base">
-                Check out beta features
+                Learn more about the Next.js Storefront
               </Text>
               <Text size="small">
-                Learn about hidden beta features and how to enable them in your store.
+                Learn about the Next.js starter storefront’s features and how to customize it.
               </Text>
             </div>
           </div>
@@ -103,6 +104,14 @@ const OrderDetailNextjs = () => {
         >
           our documentation
         </a>
+        . If you like Medusa, please{" "}
+        <a 
+          href="https://github.com/medusajs/medusa"
+          target="_blank"
+          className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+        >
+          star us on GitHub
+        </a>
         .
       </div>
     </>

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

@@ -1,54 +1,15 @@
 import React from "react";
 import { useAdminProduct } from "medusa-react";
-import { useAdminCreateDraftOrder, useCreateCart } from "medusa-react";
-import { useAdminShippingOptions } from "medusa-react";
+import { useCreateCart } from "medusa-react";
 import { useAdminRegions } from "medusa-react";
-import { useMedusa } from "medusa-react";
 import { StepContentProps } from "../../../../widgets/onboarding-flow/onboarding-flow";
 import { Button, Text } from "@medusajs/ui";
 
-const OrdersListNextjs = ({ onNext, isComplete, data }: StepContentProps) => {
+const OrdersListNextjs = ({ isComplete, data }: StepContentProps) => {
   const { product } = useAdminProduct(data.product_id);
-  const { mutateAsync: createDraftOrder, isLoading } =
-    useAdminCreateDraftOrder();
   const { mutateAsync: createCart, isLoading: cartIsLoading } = useCreateCart()
-  const { client } = useMedusa();
 
   const { regions } = useAdminRegions();
-  const { shipping_options } = useAdminShippingOptions();
-
-  const createOrder = async () => {
-    const variant = product.variants[0] ?? null;
-    try {
-      const { draft_order } = await createDraftOrder({
-        email: "customer@medusajs.com",
-        items: [
-          variant
-            ? {
-                quantity: 1,
-                variant_id: variant.id,
-              }
-            : {
-                quantity: 1,
-                title: product.title,
-                unit_price: 50,
-              },
-        ],
-        shipping_methods: [
-          {
-            option_id: shipping_options[0].id,
-          },
-        ],
-        region_id: regions[0].id,
-      });
-
-      const { order } = await client.admin.draftOrders.markPaid(draft_order.id);
-
-      onNext(order);
-    } catch (e) {
-      console.error(e);
-    }
-  }
 
   const prepareNextjsCheckout = async () => {
     const variant = product.variants[0] ?? null;
@@ -73,10 +34,10 @@ const OrdersListNextjs = ({ onNext, isComplete, data }: StepContentProps) => {
     <>
       <div className="mb-6">
         <Text className="mb-2">
-          The last step is to create a sample order using the product(s) you just created. You can then view your order’s details, process its payment, fulfillment, inventory, and more.
+          The last step is to create a sample order using one of your products. You can then view your order’s details, process its payment, fulfillment, inventory, and more.
         </Text>
         <Text>
-          You can either create an order using the Next.js starter, or we can create a sample order for you. By clicking the “Create a Sample Order” button, we’ll generate an order using the product you created and default configurations.
+          You can use the button below to experience hand-first the checkout flow in the Next.js storefront. After placing the order in the storefront, you’ll be directed back here to view the order’s details.
         </Text>
       </div>
       <div className="flex gap-2">
@@ -88,15 +49,7 @@ const OrdersListNextjs = ({ onNext, isComplete, data }: StepContentProps) => {
               onClick={() => prepareNextjsCheckout()}
               isLoading={cartIsLoading}
             >
-              Create an order with the Next.js starter
-            </Button>
-            <Button
-              variant="secondary"
-              size="base"
-              onClick={() => createOrder()}
-              isLoading={isLoading}
-            >
-              Create a sample order
+              Place an order in your storefront
             </Button>
           </>
         )}

src/admin/components/onboarding-flow/nextjs/products/product-detail.tsx

@@ -1,16 +1,10 @@
 import React from "react";
-import { useAdminPublishableApiKeys, useAdminProduct } from "medusa-react";
+import { useAdminProduct } from "medusa-react";
 import { StepContentProps } from "../../../../widgets/onboarding-flow/onboarding-flow";
-import { Button, CodeBlock, Text } from "@medusajs/ui";
+import { Button, Text } from "@medusajs/ui";
 
 const ProductDetailNextjs = ({ onNext, isComplete, data }: StepContentProps) => {
-  const { publishable_api_keys: keys, isLoading } = useAdminPublishableApiKeys({
-    offset: 0,
-    limit: 1,
-  });
   const { product, isLoading: productIsLoading } = useAdminProduct(data?.product_id)
-
-  const api_key = keys?.[0]?.id || "pk_01H0PY648BTMEJR34ZDATXZTD9";
   return (
     <div>
       <Text>On this page, you can view your product's details and edit them.</Text>
@@ -18,41 +12,17 @@ const ProductDetailNextjs = ({ onNext, isComplete, data }: StepContentProps) =>
         You can preview your product using Medusa's Store APIs. You can copy any
         of the following code snippets to try it out.
       </Text>
-      <div>
-        {!isLoading && (
-          <CodeBlock snippets={[
-            {
-              label: "cURL",
-              language: "bash",
-              code: `curl "http://localhost:9000/store/products/${data?.product_id}" -H "x-publishable-key: ${api_key}"`,
-            },
-            {
-              label: "Medusa JS Client",
-              language: "js",
-              code: `// Install the JS Client in your storefront project: @medusajs/medusa-js\n\nimport Medusa from "@medusajs/medusa-js"\n\nconst medusa = new Medusa({ publishableApiKey: "${api_key}"})\nconst product = await medusa.products.retrieve("${data?.product_id}")\nconsole.log(product.id)`,
-            },
-            {
-              label: "Medusa React",
-              language: "tsx",
-              code: `// Install the React SDK and required dependencies in your storefront project:\n// medusa-react @tanstack/react-query @medusajs/medusa\n\nimport { useProduct } from "medusa-react"\n\nconst { product } = useProduct("${data?.product_id}")\nconsole.log(product.id)`,
-            },
-          ]} className="my-6">
-            <CodeBlock.Header />
-            <CodeBlock.Body />
-          </CodeBlock>
-        )}
-      </div>
       <div className="flex gap-2">
         <a
           href={`http://localhost:8000/products/${product?.handle}`}
           target="_blank"
         >
-          <Button variant="secondary" size="base" isLoading={productIsLoading}>
+          <Button variant="primary" size="base" isLoading={productIsLoading}>
             Open preview in Next.js Storefront
           </Button>
         </a>
         {!isComplete && (
-          <Button variant="primary" size="base" onClick={() => onNext()}>
+          <Button variant="secondary" size="base" onClick={() => onNext()}>
             Next step
           </Button>
         )}

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

@@ -15,7 +15,7 @@ const ProductsListNextjs = ({ onNext, isComplete }: StepContentProps) => {
 
   const isLoading = collectionLoading || productLoading;
 
-  const createSample = async (all = false) => {
+  const createSample = async () => {
     try {
       const { collection } = await createCollection({
         title: "Merch",
@@ -36,18 +36,14 @@ const ProductsListNextjs = ({ onNext, isComplete }: StepContentProps) => {
         regions,
         collection_id: collection.id
       })
-      if (all) {
-        await Promise.all(
-          sampleProducts.map(async (sampleProduct, index) => {
-            const createdProduct = await tryCreateProduct(sampleProduct)
-            if (index === 0 && createProduct) {
-              product = createdProduct
-            }
-          })
-        )
-      } else {
-        product = await tryCreateProduct(sampleProducts[0])
-      }
+      await Promise.all(
+        sampleProducts.map(async (sampleProduct, index) => {
+          const createdProduct = await tryCreateProduct(sampleProduct)
+          if (index === 0 && createProduct) {
+            product = createdProduct
+          }
+        })
+      )
       onNext(product);
     } catch (e) {
       console.error(e);
@@ -57,32 +53,23 @@ const ProductsListNextjs = ({ onNext, isComplete }: StepContentProps) => {
   return (
     <div>
       <Text className="mb-2">
-        Create a product and set its general details such as title and
-        description, its price, options, variants, images, and more. You'll then
-        use the product to create a sample order.
+        Create a product and set its general details such as title and description, its price, 
+        options, variants, images, and more. You'll then use the product to create a sample order.
       </Text>
       <Text>
-        You can create a product by clicking the "New Product" button below.
-        Alternatively, if you're not ready to create your own product, we can
-        create one or more sample products for you.
+      You can create a product by clicking the “New Product” button at the top right of the overview below this setup. 
+      If you’re not ready to create a product, we can create some sample products that will
+      help you explore Medusa and the Next.js storefront better.
       </Text>
       {!isComplete && (
         <div className="flex gap-2 mt-6">
           <Button
             variant="primary"
             size="base"
-            onClick={() => createSample(true)}
-            isLoading={isLoading}
-          >
-            Create multiple sample products
-          </Button>
-          <Button
-            variant="secondary"
-            size="base"
             onClick={() => createSample()}
             isLoading={isLoading}
           >
-            Create one sample product
+            Create sample products
           </Button>
         </div>
       )}

src/admin/widgets/onboarding-flow/onboarding-flow.tsx

@@ -117,7 +117,7 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
             },
             {
               id: "preview_product_nextjs",
-              title: "Preview Product",
+              title: "Preview Product in your Next.js Storefront",
               component: ProductDetailNextjs,
               onNext: (withOnComplete = true) => {
                 setStepComplete({
@@ -128,18 +128,22 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
             },
             {
               id: "create_order_nextjs",
-              title: "Create an Order",
+              title: "Create an Order using your Next.js Storefront",
               component: OrdersListNextjs,
               onNext: (order: Order, withOnComplete = true) => {
                 setStepComplete({
                   step_id: "create_order_nextjs",
-                  onComplete: withOnComplete ? () => navigate(`/a/orders/${order.id}`) : undefined,
+                  onComplete: withOnComplete ? () => {
+                    if (!location.pathname.startsWith(`/a/orders/${order.id}`)) {
+                      navigate(`/a/orders/${order.id}`)
+                    }
+                  } : undefined,
                 });
               },
             },
             {
               id: "setup_finished_nextjs",
-              title: "Setup Finished: Start developing with Medusa",
+              title: "Setup Finished: Continue Building your Ecommerce Store",
               component: OrderDetailNextjs,
             },
           ]
@@ -208,6 +212,9 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
     switch (onboardingStep) {
       case "setup_finished_nextjs":
       case "setup_finished":
+        if (!data?.orderId && "order" in props) {
+          return props.order
+        }
         const orderId = data?.orderId || searchParams.get("order_id")
         if (orderId) {
           return (await client.admin.orders.retrieve(orderId)).order
@@ -216,6 +223,9 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
         throw new Error ("Required `order_id` parameter was not passed as a parameter")
       case "preview_product_nextjs":
       case "preview_product":
+        if (!data?.productId && "product" in props) {
+          return props.product
+        }
         const productId = data?.productId || searchParams.get("product_id")
         if (productId) {
           return (await client.admin.products.retrieve(productId)).product
@@ -246,11 +256,9 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
   useEffect(() => {
     const onboardingStep = searchParams.get("onboarding_step") as STEP_ID
     const onboardingStepIndex = findStepIndex(onboardingStep)
-    console.log("onboarding", onboardingStep, onboardingStepIndex, openStep)
     if (onboardingStep && onboardingStepIndex !== -1 && onboardingStep !== openStep) {
       // change current step to the onboarding step
       const openStepIndex = findStepIndex(openStep)
-      console.log(openStepIndex)
 
       if (onboardingStepIndex !== openStepIndex + 1) {
         // can only go forward one step
@@ -300,6 +308,16 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
     mutate({ is_complete: true });
   };
 
+  // used to get text for get started header
+  const getStartedText = () => {
+    switch(process.env.MEDUSA_ADMIN_ONBOARDING_TYPE) {
+      case "nextjs":
+        return "Learn the basics of Medusa by creating your first order using the Next.js storefront."
+      default:
+        return "Learn the basics of Medusa by creating your first order."
+    }
+  }
+
   return (
     <>
       <Container className={clx(
@@ -328,7 +346,7 @@ const OnboardingFlow = (props: OnboardingWidgetProps) => {
                 <div>
                   <Heading level="h1" className="text-ui-fg-base">Get started</Heading>
                   <Text>
-                    Learn the basics of Medusa by creating your first order.
+                    {getStartedText()}
                   </Text>
                 </div>
                 <div className="ml-auto flex items-start gap-2">