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