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/cart/context/page.mdx

@@ -22,10 +22,10 @@ export const highlights = [
   ["32", "useRegion", "Use the `useRegion` hook defined in the Region Context guide."],
   ["37", "setItem", "Set the cart's ID in `localStorage` in case it changed."],
   ["45", "fetch", "If the customer doesn't have a cart, create a new one."],
-  ["49", "process.env.NEXT_PUBLIC_PAK", "Pass the Publishable API key to associate the correct sales channel(s)."],
+  ["49", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."],
   ["63", "fetch", "Retrieve the customer's cart."],
-  ["73", "refreshCart", "This function unsets the cart, which triggers the `useEffect` callback to create a cart."],
-  ["89", "useCart", "The hook that child components of the provider use to access the cart."]
+  ["76", "refreshCart", "This function unsets the cart, which triggers the `useEffect` callback to create a cart."],
+  ["92", "useCart", "The hook that child components of the provider use to access the cart."]
 ]
 
 ```tsx highlights={highlights}
@@ -72,7 +72,7 @@ export const CartProvider = ({ children }: CartProviderProps) => {
         method: "POST",
         credentials: "include",
         headers: {
-          "x-publishable-api-key": process.env.NEXT_PUBLIC_PAK || "temp",
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
@@ -88,6 +88,9 @@ export const CartProvider = ({ children }: CartProviderProps) => {
       // retrieve cart
       fetch(`http://localhost:9000/store/carts/${cartId}`, {
         credentials: "include",
+        headers: {
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+        },
       })
       .then((res) => res.json())
       .then(({ cart: dataCart }) => {

www/apps/resources/app/storefront-development/cart/create/page.mdx

@@ -20,7 +20,7 @@ For example:
   <CodeTab label="Fetch API" value="fetch">
 
 export const fetchHighlights = [
-  ["5", "process.env.NEXT_PUBLIC_PAK", "Pass the Publishable API key to associate the correct sales channel(s)."],
+  ["5", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."],
   ["9", "region_id", "Associate the cart with the chosen region for accurate pricing."],
   ["14", "setItem", "Set the cart's ID in the `localStorage`."]
 ]
@@ -30,7 +30,7 @@ export const fetchHighlights = [
     method: "POST",
     credentials: "include",
     headers: {
-      "x-publishable-api-key": process.env.NEXT_PUBLIC_PAK || "temp",
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
@@ -50,7 +50,7 @@ export const highlights = [
   ["8", "region", "Assuming you previously retrieved the chosen region."],
   ["15", "cartId", "Retrieve the cart ID from `localStorage`, if exists."],
   ["21", "", "Send a request to create the cart."],
-  ["26", "process.env.NEXT_PUBLIC_PAK", "Pass the Publishable API key to associate the correct sales channel(s)."],
+  ["26", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "Pass the Publishable API key to associate the correct sales channel(s)."],
   ["30", "region_id", "Associate the cart with the chosen region for accurate pricing."],
   ["35", "setItem", "Set the cart's ID in the `localStorage`."]
 ]
@@ -81,7 +81,7 @@ export const highlights = [
         method: "POST",
         credentials: "include",
         headers: {
-          "x-publishable-api-key": process.env.NEXT_PUBLIC_PAK || "temp",
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
           "Content-Type": "application/json",
         },
         body: JSON.stringify({

www/apps/resources/app/storefront-development/cart/manage-items/page.mdx

@@ -19,7 +19,8 @@ For example:
 export const addHighlights = [
   ["1", "variant_id", "The ID of the selected variant."],
   ["2", "cartId", "Retrieve the cart ID from the `localStorage`."],
-  ["16", "quantity", "You can also allow customers to specify the quantity."]
+  ["13", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "You must pass the publishable API key of all storefront requests."], 
+  ["17", "quantity", "You can also allow customers to specify the quantity."]
 ]
 
 ```ts highlights={addHighlights}
@@ -35,6 +36,7 @@ const addToCart = (variant_id: string) => {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
     },
     body: JSON.stringify({
       variant_id,
@@ -70,6 +72,7 @@ export const updateHighlights = [
   ["3", "quantity", "The new quantity of the item."],
   ["5", "cartId", "Retrieve the cart ID from the `localStorage`."],
   ["12", "itemId", "Pass the item's ID as a path parameter."],
+  ["18", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "You must pass the publishable API key of all storefront requests."], 
 ]
 
 ```ts highlights={updateHighlights}
@@ -90,6 +93,7 @@ const updateQuantity = (
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
     },
     body: JSON.stringify({
       quantity,
@@ -122,7 +126,8 @@ export const deleteHighlights = [
   ["1", "itemId", "The ID of the line item to remove."],
   ["2", "cartId", "Retrieve the cart ID from the `localStorage`."],
   ["9", "itemId", "Pass the item's ID as a path parameter."],
-  ["15", "parent", "The updated cart is returned as the `parent` field."]
+  ["13", "process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY", "You must pass the publishable API key of all storefront requests."], 
+  ["18", "parent", "The updated cart is returned as the `parent` field."]
 ]
 
 ```ts highlights={deleteHighlights}
@@ -137,6 +142,9 @@ const removeItem = (itemId: string) => {
     itemId
   }`, {
     credentials: "include",
+    headers: {
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+    },
     method: "DELETE",
   })
   .then((res) => res.json())

www/apps/resources/app/storefront-development/cart/retrieve/page.mdx

@@ -22,6 +22,9 @@ export const fetchHighlights = [
   ```ts highlights={fetchHighlights}
   fetch(`http://localhost:9000/store/carts/${cartId}`, {
     credentials: "include",
+    headers: {
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+    },
   })
   .then((res) => res.json())
   .then(({ cart }) => {
@@ -37,8 +40,8 @@ export const highlights = [
   ["16", "cartId", "Retrieve the cart ID from `localStorage`."],
   ["18", "TODO", "You can create the cart and set it here as explained in the Create Cart guide."],
   ["22"], ["23"], ["24"], ["25"], ["26"], ["27"], ["28"],
-  ["31", "formatPrice", "This function was previously created to format product prices. You can re-use the same function."],
-  ["34", "currency_code", "If you reuse the `formatPrice` function, pass the currency code as a parameter."],
+  ["34", "formatPrice", "This function was previously created to format product prices. You can re-use the same function."],
+  ["37", "currency_code", "If you reuse the `formatPrice` function, pass the currency code as a parameter."],
 ]
 
   ```tsx highlights={highlights}
@@ -65,6 +68,9 @@ export const highlights = [
 
       fetch(`http://localhost:9000/store/carts/${cartId}`, {
         credentials: "include",
+        headers: {
+          "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+        },
       })
       .then((res) => res.json())
       .then(({ cart: dataCart }) => {

www/apps/resources/app/storefront-development/cart/update/page.mdx

@@ -21,7 +21,7 @@ If a customer changes their region, you must update their cart to be associated
 For example:
 
 export const updateRegionHighlights = [
-  ["8", `"new_id"`, "Pass the new chosen region's ID."]
+  ["11", `"new_id"`, "Pass the new chosen region's ID."]
 ]
 
 ```ts highlights={updateRegionHighlights}
@@ -30,6 +30,9 @@ fetch(`http://localhost:9000/store/carts/${cartId}`, {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
+    headers: {
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+    },
   },
   body: JSON.stringify({
     region_id: "new_id",
@@ -53,7 +56,7 @@ If a guest customer logs in, you must update the cart to be associated with the
 For example:
 
 export const updateCustomerHighlights = [
-  ["8", `"logged_in_id"`, "Pass the logged-in customer's ID."]
+  ["11", `"logged_in_id"`, "Pass the logged-in customer's ID."]
 ]
 
 ```ts highlights={updateCustomerHighlights}
@@ -62,6 +65,9 @@ fetch(`http://localhost:9000/store/carts/${cartId}`, {
   method: "POST",
   headers: {
     "Content-Type": "application/json",
+    headers: {
+      "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY,
+    },
   },
   body: JSON.stringify({
     customer_id: "logged_in_id",