Merge pull request #2862 from Shopify/merge-apis-from-unstable

Merge apis from unstable

Author: vividviolet

.changeset/famous-parents-punch.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Defaulting to string type for enabled features passed to the templates

.changeset/lemon-dots-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add Picker

.changeset/slimy-knives-decide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add discount function settings api

.changeset/sweet-toes-taste.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': patch
+---
+
+Sync picker and resourcePicker docs with app-bridge

packages/ui-extensions/docs/surfaces/admin/screenshots/admin.product-purchase-option.action.render.png

@@ -43,6 +43,18 @@ const data: LandingTemplateSchema = {
           url: '/docs/api/admin-extensions/api/network-features',
           type: 'globe',
         },
+        {
+          subtitle: 'Using Forms',
+          name: 'Use the Form component to integrate with the contextual save bar of the resource page',
+          url: '#using-forms',
+          type: 'tool',
+        },
+        {
+          subtitle: 'Picking resources',
+          name: 'Prompt the user to select resources',
+          url: '#picking-resources',
+          type: 'tool',
+        },
       ],
     },
     {
@@ -120,6 +132,47 @@ const data: LandingTemplateSchema = {
         ],
       },
     },
+    {
+      type: 'GenericAccordion',
+      title: 'Picking Resources',
+      sectionContent:
+        "Use the Resource Picker and Picker API's to allow users to select resources for your extension to use.",
+      anchorLink: 'picking-resources',
+      accordionContent: [
+        {
+          title: 'Resource Picker',
+          description:
+            'Use the `resourcePicker` API to display a search-based interface to help users find and select one or more products, collections, or product variants, and then return the selected resources to your extension. Both the app and the user must have the necessary permissions to access the resources selected.',
+          image: 'resource-picker.png',
+          codeblock: {
+            title: 'resourcePicker',
+            tabs: [
+              {
+                title: 'Selecting a product',
+                language: 'tsx',
+                code: './examples/resource-picker-product.jsx',
+              },
+            ],
+          },
+        },
+        {
+          title: 'Picker',
+          description:
+            'Use the `picker` API to display a search-based interface to help users find and select one or more custom data types that you provide, such as product reviews, email templates, or subscription options.',
+          image: 'picker.png',
+          codeblock: {
+            title: 'picker',
+            tabs: [
+              {
+                title: 'Selecting an email template',
+                language: 'tsx',
+                code: './examples/picker-email-template.jsx',
+              },
+            ],
+          },
+        },
+      ],
+    },
     {
       type: 'Generic',
       title: 'Deploying',

packages/ui-extensions/docs/surfaces/admin/screenshots/admin.product-variant-purchase-option.action.render.png

@@ -0,0 +1,52 @@
+import { render } from 'preact';
+
+export default function extension() {
+  render(<Extension />, document.body);
+}
+
+function Extension() {
+  const { picker } = shopify;
+
+  const handleSelectEmailTemplate = async () => {
+    const pickerInstance = await picker({
+      heading: 'Select a template',
+      multiple: false,
+      headers: [
+        { content: 'Templates' },
+        { content: 'Created by' },
+        { content: 'Times used', type: 'number' },
+      ],
+      items: [
+        {
+          id: '1',
+          heading: 'Full width, 1 column',
+          data: ['Karine Ruby', '0'],
+          badges: [{ content: 'Draft', tone: 'info' }, { content: 'Marketing' }],
+        },
+        {
+          id: '2',
+          heading: 'Large graphic, 3 column',
+          data: ['Charlie Mitchell', '5'],
+          badges: [
+            { content: 'Published', tone: 'success' },
+            { content: 'New feature' },
+          ],
+          selected: true,
+        },
+        {
+          id: '3',
+          heading: 'Promo header, 2 column',
+          data: ['Russell Winfield', '10'],
+          badges: [{ content: 'Published', tone: 'success' }],
+        },
+      ],
+    });
+
+    const selected = await pickerInstance.selected;
+    console.log(selected);
+  };
+
+  return (
+    <s-button onClick={handleSelectEmailTemplate}>Select email template</s-button>
+  );
+}