Merge pull request #168 from medusajs/onboarding-flow

feat: onboarding flow

Author: VariableVic

src/lib/context/store-context.tsx

@@ -11,6 +11,7 @@ import {
 } from "medusa-react"
 import React, { useEffect, useState } from "react"
 import { useCartDropdown } from "./cart-dropdown-context"
+import { useSearchParams } from "next/navigation"
 
 interface VariantInfoProps {
   variantId: string
@@ -57,6 +58,17 @@ export const StoreProvider = ({ children }: StoreProps) => {
   const removeLineItem = useDeleteLineItem(cart?.id!)
   const adjustLineItem = useUpdateLineItem(cart?.id!)
 
+  // check if the user is onboarding and sets the onboarding session storage
+  const searchParams = useSearchParams()
+  const onboardingCartId = searchParams.get("cart_id")
+  const isOnboarding = searchParams.get("onboarding")
+
+  useEffect(() => {
+    if (isOnboarding === "true") {
+      sessionStorage.setItem("onboarding", "true")
+    }
+  }, [isOnboarding])
+
   const storeRegion = (regionId: string, countryCode: string) => {
     if (!IS_SERVER) {
       localStorage.setItem(
@@ -195,7 +207,7 @@ export const StoreProvider = ({ children }: StoreProps) => {
 
   useEffect(() => {
     const ensureCart = async () => {
-      const cartId = getCart()
+      const cartId = onboardingCartId || getCart()
       const region = getRegion()
 
       if (cartId) {

src/modules/order/components/onboarding-cta/index.tsx

@@ -0,0 +1,28 @@
+import Button from "@modules/common/components/button"
+
+const OnboardingCta = ({ orderId }: { orderId: string }) => {
+  const resetOnboarding = () => {
+    window.sessionStorage.setItem("onboarding", "false")
+  }
+
+  return (
+    <div className="max-w-4xl h-full bg-white w-full mb-4">
+      <div className="flex flex-col gap-y-6 center p-10 md:items-center">
+        <span className="text-gray-700 text-xl">
+          Your test order was successfully created! 🎉
+        </span>
+        <span className="text-gray-700 text-small-regular">
+          You can now complete setting up your store in the admin.
+        </span>
+        <a
+          href={`http://localhost:7001/a/orders/?order_id=${orderId}&onboarding_step=setup_finished_nextjs`}
+          onClick={resetOnboarding}
+        >
+          <Button className="md:w-80">Complete setup in admin</Button>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default OnboardingCta

src/modules/order/templates/order-completed-template.tsx

@@ -6,7 +6,8 @@ import Items from "@modules/order/components/items"
 import OrderDetails from "@modules/order/components/order-details"
 import OrderSummary from "@modules/order/components/order-summary"
 import ShippingDetails from "@modules/order/components/shipping-details"
-import React from "react"
+import OnboardingCta from "@modules/order/components/onboarding-cta"
+import React, { useEffect, useState } from "react"
 
 type OrderCompletedTemplateProps = {
   order: Order
@@ -15,9 +16,17 @@ type OrderCompletedTemplateProps = {
 const OrderCompletedTemplate: React.FC<OrderCompletedTemplateProps> = ({
   order,
 }) => {
+  const [isOnboarding, setIsOnboarding] = useState<boolean>(false)
+
+  useEffect(() => {
+    const onboarding = window.sessionStorage.getItem("onboarding")
+    setIsOnboarding(onboarding === "true")
+  }, [])
+
   return (
     <div className="bg-gray-50 py-6 min-h-[calc(100vh-64px)]">
-      <div className="content-container flex justify-center">
+      <div className="content-container flex flex-col justify-center items-center">
+        {isOnboarding && <OnboardingCta orderId={order.id} />}
         <div className="max-w-4xl h-full bg-white w-full">
           <OrderDetails order={order} />
           <Items