docs: add Sanity integration guide (#10152)

* docs: add integrate to Sanity guide

* address PR feedback

* added more screenshots

* edit introduction

* added meta images + changes

www/apps/resources/.content.eslintrc.mjs

@@ -154,6 +154,7 @@ export default [
       "@typescript-eslint/ban-ts-comment": "off",
       "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
       "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/no-unused-expressions": "warn",
     },
   },
 ]

www/apps/resources/app/architectural-modules/event/create/page.mdx

@@ -21,18 +21,18 @@ Create the file `src/modules/my-event/service.ts` that holds the implementation
 The Event Module's main service must extend the `AbstractEventBusModuleService` class imported from `@medusajs/framework/utils`:
 
 ```ts title="src/modules/my-event/service.ts"
-import { AbstractEventBusModuleService } from "@medusajs/framework/utils";
+import { AbstractEventBusModuleService } from "@medusajs/framework/utils"
-import { Message } from "@medusajs/types";
+import { Message } from "@medusajs/types"
 
 class MyEventService extends AbstractEventBusModuleService {
   async emit<T>(data: Message<T> | Message<T>[], options: Record<string, unknown>): Promise<void> {
-    throw new Error("Method not implemented.");
+    throw new Error("Method not implemented.")
   }
   async releaseGroupedEvents(eventGroupId: string): Promise<void> {
-    throw new Error("Method not implemented.");
+    throw new Error("Method not implemented.")
   }
   async clearGroupedEvents(eventGroupId: string): Promise<void> {
-    throw new Error("Method not implemented.");
+    throw new Error("Method not implemented.")
   }
 }
 

www/apps/resources/app/commerce-modules/auth/create-actor-type/page.mdx

@@ -382,8 +382,8 @@ export const deleteManagerWorkflow = createWorkflow(
         app_metadata: {
           // the ID is of the format `{actor_type}_id`.
           manager_id: input.id,
-        }
+        },
-      }
+      },
     })
 
     const authIdentity = transform(

www/apps/resources/app/commerce-modules/cart/extend/page.mdx

@@ -513,8 +513,8 @@ export const updateCustomFromCartWorkflow = createWorkflow(
       entity: "cart",
       fields: ["custom.*"],
       filters: {
-        id: input.cart.id
+        id: input.cart.id,
-      }
+      },
     })
 
     // TODO create, update, or delete Custom record

www/apps/resources/app/commerce-modules/customer/extend/page.mdx

@@ -526,7 +526,7 @@ export const updateCustomFromCustomerWorkflow = createWorkflow(
       fields: ["custom.*"],
       filters: {
         id: input.customer.id,
-      }
+      },
     })
 
     // TODO create, update, or delete Custom record

www/apps/resources/app/commerce-modules/product/extend/page.mdx

@@ -532,7 +532,7 @@ export const updateCustomFromProductWorkflow = createWorkflow(
       fields: ["custom.*"],
       filters: {
         id: input.product.id,
-      }
+      },
     })
 
     // TODO create, update, or delete Custom record
@@ -549,7 +549,7 @@ Next, replace the `TODO` with the following:
 ```ts title="src/workflows/update-custom-from-product/index.ts"
 const created = when({
   input,
-  products
+  products,
 }, (data) => 
   !data.products[0].custom && 
   data.input.additional_data?.custom_name?.length > 0
@@ -583,7 +583,7 @@ Next, replace the new `TODO` with the following:
 ```ts title="src/workflows/update-custom-from-product/index.ts"
 const deleted = when({
   input,
-  products
+  products,
 }, (data) => 
   data.products[0].custom && (
     data.input.additional_data?.custom_name === null || 
@@ -592,13 +592,13 @@ const deleted = when({
 )
 .then(() => {
   deleteCustomStep({
-    custom: products[0].custom
+    custom: products[0].custom,
   })
 
   dismissRemoteLinkStep({
     [HELLO_MODULE]: {
-      custom_id: products[0].custom.id
+      custom_id: products[0].custom.id,
-    }
+    },
   })
 
   return products[0].custom.id
@@ -614,12 +614,12 @@ Finally, replace the new `TODO` with the following:
 ```ts title="src/workflows/update-custom-from-product/index.ts"
 const updated = when({
   input,
-  products
+  products,
 }, (data) => data.products[0].custom && data.input.additional_data?.custom_name?.length > 0)
 .then(() => {
   const custom = updateCustomStep({
     id: products[0].custom.id,
-    custom_name: input.additional_data.custom_name
+    custom_name: input.additional_data.custom_name,
   })
 
   return custom

www/apps/resources/app/commerce-modules/promotion/extend/page.mdx

@@ -538,7 +538,7 @@ export const updateCustomFromPromotionWorkflow = createWorkflow(
       fields: ["custom.*"],
       filters: {
         id: input.promotion.id,
-      }
+      },
     })
 
     // TODO create, update, or delete Custom record
@@ -555,7 +555,7 @@ Next, replace the `TODO` with the following:
 ```ts title="src/workflows/update-custom-from-promotion/index.ts"
 const created = when({
   input,
-  promotions
+  promotions,
 }, (data) => 
   !data.promotions[0].custom && 
   data.input.additional_data?.custom_name?.length > 0
@@ -589,7 +589,7 @@ Next, replace the new `TODO` with the following:
 ```ts title="src/workflows/update-custom-from-promotion/index.ts"
 const deleted = when({
   input,
-  promotions
+  promotions,
 }, (data) => 
   data.promotions[0].custom && (
     data.input.additional_data?.custom_name === null || 
@@ -598,13 +598,13 @@ const deleted = when({
 )
 .then(() => {
   deleteCustomStep({
-    custom: promotions[0].custom
+    custom: promotions[0].custom,
   })
 
   dismissRemoteLinkStep({
     [HELLO_MODULE]: {
-      custom_id: promotions[0].custom.id
+      custom_id: promotions[0].custom.id,
-    }
+    },
   })
 
   return promotions[0].custom.id
@@ -620,12 +620,12 @@ Finally, replace the new `TODO` with the following:
 ```ts title="src/workflows/update-custom-from-promotion/index.ts"
 const updated = when({
   input,
-  promotions
+  promotions,
 }, (data) => data.promotions[0].custom && data.input.additional_data?.custom_name?.length > 0)
 .then(() => {
   const custom = updateCustomStep({
     id: promotions[0].custom.id,
-    custom_name: input.additional_data.custom_name
+    custom_name: input.additional_data.custom_name,
   })
 
   return custom

www/apps/resources/app/contribution-guidelines/admin-translations/page.mdx

@@ -90,8 +90,8 @@ export const languages: Language[] = [
     code: "da",
     display_name: "Danish",
     ltr: true,
-    date_locale: da
+    date_locale: da,
-  }
+  },
 ]
 ```
 

www/apps/resources/app/integrations/page.mdx

@@ -50,3 +50,18 @@ Learn how to create a payment provider in [this guide](/references/payment/provi
     }
   ]}
 />
+
+---
+
+## Guides
+
+The following guides are step-by-step guides on how to integrate Medusa to third-party systems.
+
+<CardList
+  items={[
+    {
+      href: "/integrations/guides/sanity",
+      title: "Sanity"
+    }
+  ]}
+/>

www/apps/resources/app/recipes/digital-products/examples/standard/page.mdx

@@ -1681,17 +1681,17 @@ import {
   createWorkflow,
   transform,
   when,
-  WorkflowResponse
+  WorkflowResponse,
 } from "@medusajs/framework/workflows-sdk"
 import {
   completeCartWorkflow,
   useQueryGraphStep,
   createRemoteLinkStep,
   createOrderFulfillmentWorkflow,
-  emitEventStep
+  emitEventStep,
 } from "@medusajs/medusa/core-flows"
 import {
-  Modules
+  Modules,
 } from "@medusajs/framework/utils"
 import createDigitalProductOrderStep from "./steps/create-digital-product-order"
 import { DIGITAL_PRODUCT_MODULE } from "../../modules/digital-product"
@@ -1705,8 +1705,8 @@ const createDigitalProductOrderWorkflow = createWorkflow(
   (input: WorkflowInput) => {
     const { id } = completeCartWorkflow.runAsStep({
       input: {
-        id: input.cart_id
+        id: input.cart_id,
-      }
+      },
     })
 
     const { data: orders } = useQueryGraphStep({
@@ -1715,18 +1715,18 @@ const createDigitalProductOrderWorkflow = createWorkflow(
         "*",
         "items.*",
         "items.variant.*",
-        "items.variant.digital_product.*"
+        "items.variant.digital_product.*",
       ],
       filters: {
-        id
+        id,
       },
       options: {
-        throwIfKeyNotFound: true
+        throwIfKeyNotFound: true,
-      }
+      },
     })
 
     const itemsWithDigitalProducts = transform({
-      orders
+      orders,
     },
     (data) => {
         return data.orders[0].items.filter((item) => item.variant.digital_product !== undefined)
@@ -1740,37 +1740,37 @@ const createDigitalProductOrderWorkflow = createWorkflow(
       const { 
         digital_product_order,
       } = createDigitalProductOrderStep({
-        items: orders[0].items
+        items: orders[0].items,
       })
   
       createRemoteLinkStep([{
         [DIGITAL_PRODUCT_MODULE]: {
-          digital_product_order_id: digital_product_order.id
+          digital_product_order_id: digital_product_order.id,
         },
         [Modules.ORDER]: {
-          order_id: id
+          order_id: id,
-        }
+        },
       }])
 
       createOrderFulfillmentWorkflow.runAsStep({
         input: {
           order_id: id,
           items: transform({
-            itemsWithDigitalProducts
+            itemsWithDigitalProducts,
           }, (data) => {
             return data.itemsWithDigitalProducts.map((item) => ({
               id: item.id,
-              quantity: item.quantity
+              quantity: item.quantity,
             }))
-          })
+          }),
-        }
+        },
       })
   
       emitEventStep({
         eventName: "digital_product_order.created",
         data: {
-          id: digital_product_order.id
+          id: digital_product_order.id,
-        }
+        },
       })
 
       return digital_product_order
@@ -1778,7 +1778,7 @@ const createDigitalProductOrderWorkflow = createWorkflow(
 
     return new WorkflowResponse({
       order: orders[0],
-      digital_product_order
+      digital_product_order,
     })
   }
 )
@@ -1970,7 +1970,7 @@ export const fulfillWorkflowHighlights = [
 ```ts title="src/workflows/fulfill-digital-order/index.ts" highlights={fulfillWorkflowHighlights} collapsibleLines="1-10" expandMoreLabel="Show Imports"
 import {
   createWorkflow,
-  WorkflowResponse
+  WorkflowResponse,
 } from "@medusajs/framework/workflows-sdk"
 import {
   useQueryGraphStep,
@@ -1990,18 +1990,18 @@ export const fulfillDigitalOrderWorkflow = createWorkflow(
         "*",
         "products.*",
         "products.medias.*",
-        "order.*"
+        "order.*",
       ],
       filters: {
         id,
       },
       options: {
-        throwIfKeyNotFound: true
+        throwIfKeyNotFound: true,
-      }
+      },
     })
 
     sendDigitalOrderNotificationStep({
-      digital_product_order: digitalProductOrders[0]
+      digital_product_order: digitalProductOrders[0],
     })
 
     return new WorkflowResponse(

www/apps/resources/app/recipes/marketplace/examples/vendors/page.mdx

@@ -1145,7 +1145,7 @@ export const createVendorOrdersWorkflowHighlights = [
 ```ts title="src/workflows/marketplace/create-vendor-orders/index.ts" collapsibleLines="1-13" expandMoreLabel="Show Imports"
 import { 
   createWorkflow,
-  WorkflowResponse
+  WorkflowResponse,
 } from "@medusajs/framework/workflows-sdk"
 import { 
   useQueryGraphStep,
@@ -1165,21 +1165,21 @@ const createVendorOrdersWorkflow = createWorkflow(
   (input: WorkflowInput) => {
     const { data: carts } = useQueryGraphStep({
       entity: "cart",
-      fields: ['items.*'],
+      fields: ["items.*"],
       filters: { id: input.cart_id },
       options: {
-        throwIfKeyNotFound: true
+        throwIfKeyNotFound: true,
-      }
+      },
     })
 
     const { id: orderId } = completeCartWorkflow.runAsStep({
       input: {
-        id: carts[0].id
+        id: carts[0].id,
-      }
+      },
     })
 
     const { vendorsItems } = groupVendorItemsStep({
-      cart: carts[0].id
+      cart: carts[0].id,
     })
     
     const order = getOrderDetailWorkflow.runAsStep({
@@ -1200,17 +1200,17 @@ const createVendorOrdersWorkflow = createWorkflow(
 
     const { 
       orders: vendorOrders, 
-      linkDefs
+      linkDefs,
     } = createVendorOrdersStep({
       parentOrder: order,
-      vendorsItems
+      vendorsItems,
     })
 
     createRemoteLinkStep(linkDefs)
 
     return new WorkflowResponse({
       parent_order: order,
-      vendor_orders: vendorOrders
+      vendor_orders: vendorOrders,
     })
   }
 )

www/apps/resources/app/recipes/subscriptions/examples/standard/page.mdx

@@ -600,15 +600,15 @@ export const createSubscriptionWorkflowHighlights = [
 ```ts title="src/workflows/create-subscription/index.ts" highlights={createSubscriptionWorkflowHighlights} collapsibleLines="1-13" expandMoreLabel="Show Imports"
 import { 
   createWorkflow,
-  WorkflowResponse
+  WorkflowResponse,
 } from "@medusajs/framework/workflows-sdk"
 import { 
   createRemoteLinkStep,
   completeCartWorkflow,
-  useQueryGraphStep
+  useQueryGraphStep,
 } from "@medusajs/medusa/core-flows"
 import { 
-  SubscriptionInterval
+  SubscriptionInterval,
 } from "../../modules/subscription/types"
 import createSubscriptionStep from "./steps/create-subscription"
 
@@ -625,33 +625,33 @@ const createSubscriptionWorkflow = createWorkflow(
   (input: WorkflowInput) => {
     const { id } = completeCartWorkflow.runAsStep({
       input: {
-        id: input.cart_id
+        id: input.cart_id,
-      }
+      },
     })
 
     const { data: orders } = useQueryGraphStep({
       entity: "order",
       fields: ["*", "id", "customer_id"],
       filters: {
-        id
+        id,
       },
       options: {
-        throwIfKeyNotFound: true
+        throwIfKeyNotFound: true,
-      }
+      },
     })
 
     const { subscription, linkDefs } = createSubscriptionStep({
       cart_id: input.cart_id,
       order_id: orders[0].id,
       customer_id: orders[0].customer_id,
-      subscription_data: input.subscription_data
+      subscription_data: input.subscription_data,
     })
 
     createRemoteLinkStep(linkDefs)
 
     return new WorkflowResponse({
       subscription: subscription,
-      order: orders[0]
+      order: orders[0],
     })
   }
 )
@@ -1786,14 +1786,14 @@ import {
   useQueryGraphStep,
   createPaymentSessionsWorkflow,
   createRemoteLinkStep,
-  capturePaymentStep
+  capturePaymentStep,
 } from "@medusajs/medusa/core-flows"
 import { 
-  SubscriptionData
+  SubscriptionData,
 } from "../../modules/subscription/types"
 import { 
   authorizePaymentSessionStep,
-  createPaymentCollectionsStep
+  createPaymentCollectionsStep,
 } from "@medusajs/medusa/core-flows"
 import createSubscriptionOrderStep from "./steps/create-subscription-order"
 import updateSubscriptionStep from "./steps/update-subscription"
@@ -1819,21 +1819,21 @@ const createSubscriptionOrderWorkflow = createWorkflow(
         "cart.shipping_methods.tax_lines.*",
         "cart.shipping_methods.adjustments.*",
         "cart.payment_collection.*",
-        "cart.payment_collection.payment_sessions.*"
+        "cart.payment_collection.payment_sessions.*",
       ],
       filters: {
-        id: [input.subscription.id]
+        id: [input.subscription.id],
       },
       options: {
-        throwIfKeyNotFound: true
+        throwIfKeyNotFound: true,
-      }
+      },
     })
 
     const payment_collection = createPaymentCollectionsStep([{
       region_id: carts[0].region_id,
       currency_code: carts[0].currency_code,
       amount: carts[0].payment_collection.amount,
-      metadata: carts[0].payment_collection.metadata
+      metadata: carts[0].payment_collection.metadata,
     }])[0]
 
     const paymentSession = createPaymentSessionsWorkflow.runAsStep({
@@ -1841,34 +1841,34 @@ const createSubscriptionOrderWorkflow = createWorkflow(
         payment_collection_id: payment_collection.id,
         provider_id: carts[0].payment_collection.payment_sessions[0].provider_id,
         data: carts[0].payment_collection.payment_sessions[0].data,
-        context: carts[0].payment_collection.payment_sessions[0].context
+        context: carts[0].payment_collection.payment_sessions[0].context,
-      }
+      },
     })
 
     const payment = authorizePaymentSessionStep({
       id: paymentSession.id,
-      context: paymentSession.context
+      context: paymentSession.context,
     })
 
     const { order, linkDefs } = createSubscriptionOrderStep({
       subscription: input.subscription,
       cart: carts[0],
-      payment_collection
+      payment_collection,
     })
 
     createRemoteLinkStep(linkDefs)
 
     capturePaymentStep({
       payment_id: payment.id,
-      amount: payment.amount
+      amount: payment.amount,
     })
 
     updateSubscriptionStep({
-      subscription_id: input.subscription.id
+      subscription_id: input.subscription.id,
     })
 
     return new WorkflowResponse({
-      order
+      order,
     })
   }
 )

www/apps/resources/generated/edit-dates.mjs

@@ -119,7 +119,7 @@ export const generatedEditDates = {
   "app/deployment/medusa-application/railway/page.mdx": "2024-11-11T11:50:10.517Z",
   "app/deployment/storefront/vercel/page.mdx": "2024-07-26T07:21:31+00:00",
   "app/deployment/page.mdx": "2024-07-25T09:55:22+03:00",
-  "app/integrations/page.mdx": "2024-10-15T12:26:39.839Z",
+  "app/integrations/page.mdx": "2024-11-19T10:09:54.075Z",
   "app/medusa-cli/page.mdx": "2024-08-28T11:25:32.382Z",
   "app/medusa-container-resources/page.mdx": "2024-09-30T08:43:53.173Z",
   "app/medusa-workflows-reference/page.mdx": "2024-09-30T08:43:53.174Z",
@@ -3251,5 +3251,6 @@ export const generatedEditDates = {
   "references/product/interfaces/product.FilterableProductProps/page.mdx": "2024-11-12T09:36:53.124Z",
   "references/types/HttpTypes/interfaces/types.HttpTypes.AdminBatchProductVariantRequest/page.mdx": "2024-11-12T09:36:22.780Z",
   "references/types/WorkflowTypes/ProductWorkflow/interfaces/types.WorkflowTypes.ProductWorkflow.ExportProductsDTO/page.mdx": "2024-11-12T09:36:24.232Z",
-  "app/contribution-guidelines/admin-translations/page.mdx": "2024-11-14T08:54:15.369Z"
+  "app/contribution-guidelines/admin-translations/page.mdx": "2024-11-14T08:54:15.369Z",
+  "app/integrations/guides/sanity/page.mdx": "2024-11-19T10:07:24.519Z"
 }

www/apps/resources/generated/files-map.mjs

@@ -591,6 +591,10 @@ export const filesMap = [
     "filePath": "/www/apps/resources/app/examples/page.mdx",
     "pathname": "/examples"
   },
+  {
+    "filePath": "/www/apps/resources/app/integrations/guides/sanity/page.mdx",
+    "pathname": "/integrations/guides/sanity"
+  },
   {
     "filePath": "/www/apps/resources/app/integrations/page.mdx",
     "pathname": "/integrations"

www/apps/resources/generated/sidebar.mjs

@@ -7973,7 +7973,73 @@ export const generatedSidebar = [
     "type": "link",
     "path": "/integrations",
     "title": "Integrations",
-    "children": []
+    "isChildSidebar": true,
+    "children": [
+      {
+        "loaded": true,
+        "isPathHref": true,
+        "type": "category",
+        "title": "File",
+        "children": [
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "path": "/architectural-modules/file/s3",
+            "title": "AWS",
+            "children": []
+          }
+        ]
+      },
+      {
+        "loaded": true,
+        "isPathHref": true,
+        "type": "category",
+        "title": "Notification",
+        "children": [
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "path": "/architectural-modules/notification/sendgrid",
+            "title": "SendGrid",
+            "children": []
+          }
+        ]
+      },
+      {
+        "loaded": true,
+        "isPathHref": true,
+        "type": "category",
+        "title": "Payment",
+        "children": [
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "path": "/commerce-modules/payment/payment-provider/stripe",
+            "title": "Stripe",
+            "children": []
+          }
+        ]
+      },
+      {
+        "loaded": true,
+        "isPathHref": true,
+        "type": "category",
+        "title": "Guides",
+        "children": [
+          {
+            "loaded": true,
+            "isPathHref": true,
+            "type": "link",
+            "path": "/integrations/guides/sanity",
+            "title": "Sanity",
+            "children": []
+          }
+        ]
+      }
+    ]
   },
   {
     "loaded": true,

www/apps/resources/sidebar.mjs

@@ -1742,6 +1742,53 @@ export const sidebar = sidebarAttachHrefCommonOptions([
     type: "link",
     path: "/integrations",
     title: "Integrations",
+    isChildSidebar: true,
+    children: [
+      {
+        type: "category",
+        title: "File",
+        children: [
+          {
+            type: "link",
+            path: "/architectural-modules/file/s3",
+            title: "AWS",
+          },
+        ],
+      },
+      {
+        type: "category",
+        title: "Notification",
+        children: [
+          {
+            type: "link",
+            path: "/architectural-modules/notification/sendgrid",
+            title: "SendGrid",
+          },
+        ],
+      },
+      {
+        type: "category",
+        title: "Payment",
+        children: [
+          {
+            type: "link",
+            path: "/commerce-modules/payment/payment-provider/stripe",
+            title: "Stripe",
+          },
+        ],
+      },
+      {
+        type: "category",
+        title: "Guides",
+        children: [
+          {
+            type: "link",
+            path: "/integrations/guides/sanity",
+            title: "Sanity",
+          },
+        ],
+      },
+    ],
   },
   {
     type: "link",