docs: update docs across projects following publishable API key change in store routes (#9098)

* docs: update docs across projects following publishable API key change in store routes

* rename env variable

* move subscribe route out of store

www/apps/resources/app/storefront-development/regions/context/page.mdx

@@ -21,8 +21,8 @@ export const highlights = [
   ["32", "", "If a region is set, set its ID in the local storage again in case it changed."],
   ["39", "regionId", "Retrieve the selected region from the `localStorage`."],
   ["42", "fetch", "If no region is selected, retrieve the list of regions from the Medusa application and select the first one."],
-  ["51", "fetch", "If a region is selected, retrieve it from the Medusa application."],
-  ["71", "useRegion", "The hook that child components of the provider use to access the region."]
+  ["54", "fetch", "If a region is selected, retrieve it from the Medusa application."],
+  ["77", "useRegion", "The hook that child components of the provider use to access the region."]
 ]
 
 ```tsx highlights={highlights}
@@ -69,6 +69,9 @@ export const RegionProvider = (
       // retrieve regions and select the first one
       fetch(`http://localhost:9000/store/regions`, {
         credentials: "include",
+        headers: {
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+        },
       })
       .then((res) => res.json())
       .then(({ regions }) => {
@@ -78,6 +81,9 @@ export const RegionProvider = (
       // retrieve selected region
       fetch(`http://localhost:9000/store/regions/${regionId}`, {
         credentials: "include",
+        headers: {
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+        },
       })
       .then((res) => res.json())
       .then(({ region: dataRegion }) => {

www/apps/resources/app/storefront-development/regions/list/page.mdx

@@ -14,6 +14,9 @@ To list regions in your storefront, send a request to the [List Regions API rout
   ```ts
   fetch(`http://localhost:9000/store/regions`, {
     credentials: "include",
+    headers: {
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+    },
   })
   .then((res) => res.json())
   .then(({ regions }) => {
@@ -26,7 +29,8 @@ To list regions in your storefront, send a request to the [List Regions API rout
   <CodeTab label="React" value="react">
 
 export const highlights = [
-  ["17"], ["18"], ["19"], ["20"], ["21"], ["22"], ["23"], ["24"]
+  ["17"], ["18"], ["19"], ["20"], ["21"], ["22"], ["23"], ["24"],
+  ["25"], ["26"], ["27"]
 ]
 
   ```tsx highlights={highlights}
@@ -48,6 +52,9 @@ export const highlights = [
 
       fetch(`http://localhost:9000/store/regions`, {
         credentials: "include",
+        headers: {
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+        },
       })
       .then((res) => res.json())
       .then(({ regions: dataRegions }) => {

www/apps/resources/app/storefront-development/regions/store-retrieve-region/page.mdx

@@ -33,6 +33,9 @@ const regionId = localStorage.getItem("region_id")
 
 fetch(`http://localhost:9000/store/regions/${regionId}`, {
   credentials: "include",
+  headers: {
+    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+  },
 })
 .then((res) => res.json())
 .then(({ region }) => {