feat: add onboarding cat to product page

Author: VariableVic

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 test 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>