Add string syntax example to intents docs

Author: andrewmcgov

packages/ui-extensions/docs/surfaces/customer-account/reference/apis/intents.doc.ts

@@ -11,7 +11,7 @@ const data: ReferenceEntityTemplateSchema = {
   defaultExample: {
     description: '',
     codeblock: {
-      title: 'Replace payment method',
+      title: 'Replace payment method with object syntax',
       tabs: [
         {
           code: '../examples/apis/intents.example.jsx',
@@ -46,7 +46,6 @@ Where:
       title: 'IntentAction',
       description: `Supported actions that can be performed on resources.
 - \`create\`: Opens a creation workflow for a new resource
-- \`edit\`: Opens an editing workflow for an existing resource (requires \`value\` parameter)
 - \`open\`: Opens a workflow for an existing resource (requires \`value\` parameter)`,
       type: 'IntentAction',
     },
@@ -73,24 +72,19 @@ Where:
   ],
   examples: {
     description: 'Intents for each Shopify resource type',
-    exampleGroups: [
+    examples: [
       {
-        title: 'Subscription Contract',
-        examples: [
-          {
-            description:
-              'Replace the payment method on an active subscription contract. Opens a modal with vaulted cards.',
-            codeblock: {
-              title: 'Replace payment method',
-              tabs: [
-                {
-                  code: '../examples/apis/intents.example.jsx',
-                  language: 'jsx',
-                },
-              ],
+        description:
+          'Replace the payment method on an active subscription contract. Opens a modal with vaulted cards.',
+        codeblock: {
+          title: 'Replace payment method with string syntax',
+          tabs: [
+            {
+              code: '../examples/apis/intents.string.example.jsx',
+              language: 'jsx',
             },
-          },
-        ],
+          ],
+        },
       },
     ],
   },

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/intents.example.jsx

@@ -7,13 +7,15 @@ export default async () => {
 
 function Extension() {
   async function handleReplacePaymentMethod() {
-    const activity = await intents.invoke({
-      action: 'open',
-      type: 'shopify/SubscriptionContract',
-      value:
-        'gid://shopify/SubscriptionContract/123',
-      data: {field: 'paymentMethod'},
-    });
+    const activity = await shopify.intents.invoke(
+      {
+        action: 'open',
+        type: 'shopify/SubscriptionContract',
+        value:
+          'gid://shopify/SubscriptionContract/123',
+        data: {field: 'paymentMethod'},
+      },
+    );
 
     const response = await activity.complete;
 

packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/intents.string.example.jsx

@@ -0,0 +1,31 @@
+import '@shopify/ui-extensions/preact';
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  async function handleReplacePaymentMethod() {
+    const activity = await shopify.intents.invoke(
+      'open:shopify/SubscriptionContract,gid://shopify/SubscriptionContract/123?field=paymentMethod',
+    );
+
+    const response = await activity.complete;
+
+    if (response.code === 'ok') {
+      console.log(
+        'Intent completed successfully',
+        response.data,
+      );
+    }
+  }
+
+  return (
+    <s-button
+      onClick={handleReplacePaymentMethod}
+    >
+      Edit subscription payment method
+    </s-button>
+  );
+}