Merge pull request #172 from medusajs/feat/onboarding

feat: add onboarding CTA to product page

Author: VariableVic

src/app/api/categories/[category]/[subcategory]/route.ts

@@ -11,7 +11,7 @@ type ProductCategoryResponse = ProductCategoryDTO & {
 
 /**
  * This endpoint uses the serverless Product Module to retrieve a category and its products by handle.
- * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * The module connects directly to your Medusa database to retrieve and manipulate data, without the need for a dedicated server.
  * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
  */
 export async function GET(

src/app/api/categories/route.ts

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation"
 
 /**
  * This endpoint uses the serverless Product Module to list and count all product categories.
- * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * The module connects directly to your Medusa database to retrieve and manipulate data, without the need for a dedicated server.
  * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
  */
 export async function GET(request: NextRequest) {

src/app/api/collections/[handle]/route.ts

@@ -6,7 +6,7 @@ import getPrices from "@lib/util/get-product-prices"
 
 /**
  * This endpoint uses the serverless Product Module to retrieve a collection and its products by handle.
- * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * The module connects directly to your Medusa database to retrieve and manipulate data, without the need for a dedicated server.
  * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
  */
 export async function GET(

src/app/api/collections/route.ts

@@ -4,7 +4,7 @@ import { notFound } from "next/navigation"
 
 /**
  * This endpoint uses the serverless Product Module to list and count all product collections.
- * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * The module connects directly to your Medusa database to retrieve and manipulate data, without the need for a dedicated server.
  * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
  */
 export async function GET(request: NextRequest) {

src/app/api/products/[handle]/route.ts

@@ -5,7 +5,7 @@ import { initialize as initializeProductModule } from "@medusajs/product"
 
 /**
  * This endpoint uses the serverless Product Module to retrieve a product by handle.
- * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * The module connects directly to your Medusa database to retrieve and manipulate data, without the need for a dedicated server.
  * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
  */
 export async function GET(

src/app/api/products/route.ts

@@ -11,7 +11,7 @@ import { notFound } from "next/navigation"
 
 /**
  * This endpoint uses the serverless Product Module to retrieve a list of products.
- * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * The module connects directly to your Medusa database to retrieve and manipulate data, without the need for a dedicated server.
  * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
  */
 export async function GET(request: NextRequest) {

src/modules/products/components/product-onboarding-cta/index.tsx

@@ -0,0 +1,21 @@
+import Button from "@modules/common/components/button"
+
+const ProductOnboardingCta = () => {
+  return (
+    <div className="max-w-4xl h-full bg-gray-100 w-full mb-4 p-8">
+      <div className="flex flex-col gap-y-6 center">
+        <span className="text-gray-700 text-xl">
+          Your demo product was successfully created! 🎉
+        </span>
+        <span className="text-gray-700 text-small-regular">
+          You can now continue setting up your store in the admin.
+        </span>
+        <a href="http://localhost:7001/a/orders?onboarding_step=create_order_nextjs">
+          <Button className="md:w-80">Continue setup in admin</Button>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default ProductOnboardingCta

src/modules/products/templates/index.tsx

@@ -1,24 +1,32 @@
 "use client"
 
+import React, { useEffect, useRef, useState } from "react"
 import { ProductProvider } from "@lib/context/product-context"
 import { useIntersection } from "@lib/hooks/use-in-view"
+import ProductInfo from "@modules/products/templates/product-info"
 import ProductTabs from "@modules/products/components/product-tabs"
 import RelatedProducts from "@modules/products/components/related-products"
-import ProductInfo from "@modules/products/templates/product-info"
-import React, { useRef } from "react"
-import ImageGallery from "../components/image-gallary"
-import MobileActions from "../components/mobile-actions"
+import ImageGallery from "@modules/products/components/image-gallary"
+import MobileActions from "@modules/products/components/mobile-actions"
+import ProductOnboardingCta from "@modules/products/components/product-onboarding-cta"
 import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
 
 type ProductTemplateProps = {
   product: PricedProduct
 }
 
 const ProductTemplate: React.FC<ProductTemplateProps> = ({ product }) => {
+  const [isOnboarding, setIsOnboarding] = useState<boolean>(false)
+
   const info = useRef<HTMLDivElement>(null)
 
   const inView = useIntersection(info, "0px")
 
+  useEffect(() => {
+    const onboarding = window.sessionStorage.getItem("onboarding")
+    setIsOnboarding(onboarding === "true")
+  }, [])
+
   return (
     <ProductProvider product={product}>
       <div className="content-container flex flex-col small:flex-row small:items-start py-6 relative">
@@ -29,6 +37,7 @@ const ProductTemplate: React.FC<ProductTemplateProps> = ({ product }) => {
           className="small:sticky small:top-20 w-full py-8 small:py-0 small:max-w-[344px] medium:max-w-[400px] flex flex-col gap-y-12"
           ref={info}
         >
+          {isOnboarding && <ProductOnboardingCta />}
           <ProductInfo product={product} />
           <ProductTabs product={product} />
         </div>