docs: added note in API reference clarifying what schemas are (#11116)

* docs: added note in API reference clarifying what schemas are

* add yarn lock

www/apps/api-reference/components/Tags/Section/Schema/index.tsx

@@ -7,6 +7,8 @@ import {
   Badge,
   CodeBlock,
   isElmWindow,
+  Link,
+  Note,
   useIsBrowser,
   useScrollController,
   useSidebar,
@@ -20,6 +22,7 @@ import { InView } from "react-intersection-observer"
 import checkElementInViewport from "../../../../utils/check-element-in-viewport"
 import { singular } from "pluralize"
 import clsx from "clsx"
+import { useArea } from "../../../../providers/area"
 
 export type TagSectionSchemaProps = {
   schema: SchemaObject
@@ -29,6 +32,7 @@ export type TagSectionSchemaProps = {
 const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
   const paramsRef = useRef<HTMLDivElement>(null)
   const { addItems, setActivePath, activePath } = useSidebar()
+  const { displayedArea } = useArea()
   const tagSlugName = useMemo(() => getSectionId([tagName]), [tagName])
   const formattedName = useMemo(
     () => singular(tagName).replaceAll(" ", ""),
@@ -129,6 +133,16 @@ const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
             mainContent={
               <div>
                 <h2>{formattedName} Object</h2>
+                <Note>
+                  This object&apos;s schema is as returned by Medusa&apos;s{" "}
+                  {displayedArea} API routes. However, the related model in the
+                  Medusa application may support more fields and relations. To
+                  view the models in the Medusa application and their relations,
+                  visit the{" "}
+                  <Link href="https://docs.medusajs.com/resources/commerce-modules">
+                    Commerce Modules Documentation
+                  </Link>
+                </Note>
                 <h4 className="border-medusa-border-base border-b py-1.5 mt-2">
                   Fields
                 </h4>

www/apps/api-reference/providers/area.tsx

@@ -1,12 +1,13 @@
 "use client"
 
 import type { Area } from "@/types/openapi"
-import { usePrevious, useSearch } from "docs-ui"
-import { createContext, useContext, useEffect, useState } from "react"
+import { capitalize, usePrevious, useSearch } from "docs-ui"
+import { createContext, useContext, useEffect, useMemo, useState } from "react"
 
 type AreaContextType = {
   area: Area
   prevArea: Area | undefined
+  displayedArea: string
   setArea: (value: Area) => void
 }
 
@@ -22,6 +23,10 @@ const AreaProvider = ({ area: passedArea, children }: AreaProviderProps) => {
   const prevArea = usePrevious(area)
   const { defaultFilters, setDefaultFilters } = useSearch()
 
+  const displayedArea = useMemo(() => {
+    return capitalize(area)
+  }, [area])
+
   useEffect(() => {
     if (!defaultFilters.includes(`${area}-v2`)) {
       setDefaultFilters([`${area}-v2`])
@@ -34,6 +39,7 @@ const AreaProvider = ({ area: passedArea, children }: AreaProviderProps) => {
         area,
         prevArea,
         setArea,
+        displayedArea,
       }}
     >
       {children}

www/apps/api-reference/providers/page-title.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { createContext, useEffect } from "react"
-import { capitalize, useSidebar } from "docs-ui"
+import { useSidebar } from "docs-ui"
 import { useArea } from "./area"
 import { SidebarItemLink } from "types"
 
@@ -13,10 +13,10 @@ type PageTitleProviderProps = {
 
 const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
   const { activePath, activeItem } = useSidebar()
-  const { area } = useArea()
+  const { displayedArea } = useArea()
 
   useEffect(() => {
-    const titleSuffix = `Medusa ${capitalize(area)} API Reference`
+    const titleSuffix = `Medusa ${displayedArea} API Reference`
 
     if (!activePath?.length) {
       document.title = titleSuffix
@@ -33,7 +33,7 @@ const PageTitleProvider = ({ children }: PageTitleProviderProps) => {
         }
       }
     }
-  }, [activePath, area, activeItem])
+  }, [activePath, displayedArea, activeItem])
 
   return (
     <PageTitleContext.Provider value={null}>