@shopify/ui-extensions 2023.7.3 → 2023.10.1

package/src/surfaces/admin/components/AdminAction/AdminAction.ts

@@ -16,6 +16,11 @@ export interface AdminActionProps {
    * Sets the Secondary action button of the container. This component must a button component.
    */
   secondaryAction?: RemoteFragment;
+
+  /**
+   * Sets the loading state of the action modal
+   */
+  loading?: boolean;
 }
 /**
  * AdminAction is a component used by Admin Action extensions to configure a primary and secondary action and title.

package/src/surfaces/admin/components/AdminBlock/AdminBlock.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'AdminBlock',
-  featureFlag: 'admin_extensibility',
   description:
     'This component is similar to the AdminBlock, providing a deeper integration with the container your UI is rendered into. However, this only applies to Block Extensions which render inline on a resource page.',
   requires: '',

package/src/surfaces/admin/components/BlockStack/BlockStack.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'BlockStack',
-  featureFlag: 'admin_extensibility',
   description:
     "This structures layout elements along the vertical axis of the page. It's useful for vertical alignment.",
   requires: '',

package/src/surfaces/admin/components/Box/Box.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Box',
-  featureFlag: 'admin_extensibility',
   description:
     'This is your foundational structural element for composing UI. It can be styled using predefined tokens. Use it to build your layout.',
   requires: '',

package/src/surfaces/admin/components/Button/Button.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Button',
-  featureFlag: 'admin_extensibility',
   description:
     'Use this component when you want to provide users the ability to perform specific actions, like saving data.',
   requires: '',

package/src/surfaces/admin/components/Button/Button.ts

@@ -82,6 +82,18 @@ interface ButtonAnchorProps extends CommonProps {
    */
   to?: AnchorProps['href'];
 
+  /**
+   * Tells browsers to download the linked resource instead of navigating to it.
+   * Optionally accepts filename value to rename file.
+   */
+  download?: boolean | string;
+
+  /**
+   * Specifies where to display the linked URL
+   * @default '_self'
+   */
+  target?: '_blank' | '_self';
+
   /**
    * Callback when a link is pressed. If `href` is set,
    * it will execute the callback and then navigate to the location specified by `href`.

package/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Checkbox',
-  featureFlag: 'admin_extensibility',
   description:
     'Use this component when you want to provide users with a clear selection option, such as for agreeing to terms and conditions or selecting multiple options from a list.',
   requires: '',

package/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.doc.ts

@@ -0,0 +1,42 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'CustomerSegmentTemplate',
+  description:
+    'CustomerSegmentTemplate is used to configure a template rendered in the **Customers** section of the Shopify admin. Templates can be applied in the [customer segment editor](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.',
+  requires:
+    'use of the [admin.customers.segmentation-templates.render](/docs/api/admin-extensions/api/extension-targets#extensiontargets-propertydetail-admincustomerssegmentationtemplatesrender) target.',
+  isVisualComponent: true,
+  thumbnail: 'customersegmenttemplate-thumbnail.png',
+  type: '',
+  definitions: [
+    {
+      title: 'CustomerSegmentTemplateProps',
+      description: '',
+      type: 'CustomerSegmentTemplateProps',
+    },
+  ],
+  category: 'Components',
+  subCategory: 'Other',
+  defaultExample: {
+    image: 'customersegmenttemplate-default',
+    codeblock: {
+      title: 'Simple CustomerSegmentTemplate implementation',
+      tabs: [
+        {
+          title: 'React',
+          code: './examples/CustomerSegmentTemplate.example.tsx',
+          language: 'tsx',
+        },
+        {
+          title: 'JS',
+          code: './examples/CustomerSegmentTemplate.example.ts',
+          language: 'js',
+        },
+      ],
+    },
+  },
+  related: [],
+};
+
+export default data;

package/src/surfaces/admin/components/CustomerSegmentTemplate/CustomerSegmentTemplate.ts

@@ -0,0 +1,45 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+/**
+ * Reserved namespace and key for the customer standard metafield used in the template's query.
+ * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard
+ */
+type CustomerStandardMetafieldDependency = 'facts.birth_date';
+
+export interface CustomerSegmentTemplateProps {
+  /**
+   * The localized title of the template.
+   */
+  title: string;
+  /**
+   * The localized description of the template. An array can be used for multiple paragraphs.
+   */
+  description: string | string[];
+  /**
+   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
+   */
+  query: string;
+  /**
+   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
+   */
+  queryToInsert?: string;
+  /**
+   * The list of customer standard metafields or custom metafields used in the template's query.
+   */
+  dependencies?: {
+    standardMetafields?: CustomerStandardMetafieldDependency[];
+    customMetafields?: string[];
+  };
+  /**
+   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
+   */
+  createdOn?: string;
+}
+
+/**
+ * Customer segmentation templates are used to give merchants a starting point to create segments.
+ */
+export const CustomerSegmentTemplate = createRemoteComponent<
+  'CustomerSegmentTemplate',
+  CustomerSegmentTemplateProps
+>('CustomerSegmentTemplate');

package/src/surfaces/admin/components/CustomerSegmentTemplate/examples/CustomerSegmentTemplate.example.ts

@@ -0,0 +1,17 @@
+import {extension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'admin.customers.segmentation-templates.render',
+  (root, {i18n}) => {
+    const template = root.createComponent(CustomerSegmentTemplate, {
+      title: i18n.translate('template.title'),
+      description: i18n.translate('template.description'),
+      query: "number_of_orders > 0'",
+      createdOn: new Date('2023-01-15').toISOString(),
+    });
+
+    root.appendChild(template);
+
+    root.mount();
+  },
+);

package/src/surfaces/admin/components/CustomerSegmentTemplate/examples/CustomerSegmentTemplate.example.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {reactExtension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';
+
+function App() {
+  return (
+    <CustomerSegmentTemplate
+        title="My Customer Segment Template"
+        description="Description of the segment"
+        query="number_of_orders > 0"
+        createdOn={new Date('2023-01-15').toISOString()}
+    />
+  );
+}
+
+export default reactExtension('Playground', () => <App />);

package/src/surfaces/admin/components/Divider/Divider.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Divider',
-  featureFlag: 'admin_extensibility',
   description:
     'Use this to create a clear visual separation between different elements in your user interface.',
   requires: '',

package/src/surfaces/admin/components/EmailField/EmailField.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'EmailField',
-  featureFlag: 'admin_extensibility',
   description: 'Use this when you need users to provide their email addresses.',
   requires: '',
   thumbnail: 'emailfield-thumbnail.png',

package/src/surfaces/admin/components/Form/Form.doc.ts

@@ -2,9 +2,8 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Form',
-  featureFlag: 'admin_extensibility',
   description:
-    'Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also handles form submission and reset actions.',
+    'Use this component when you want to collect input from users. It provides a structure for various input fields and controls, such as text fields, checkboxes, and buttons. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.',
   requires: '',
   thumbnail: 'form-thumbnail.png',
   isVisualComponent: true,

package/src/surfaces/admin/components/Heading/Heading.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Heading',
-  featureFlag: 'admin_extensibility',
   description:
     "Use this to display a title. It's similar to the h1-h6 tags in HTML",
   requires: '',

package/src/surfaces/admin/components/HeadingGroup/HeadingGroup.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'HeadingGroup',
-  featureFlag: 'admin_extensibility',
   description:
     'This groups headings together, much like the hgroup element in HTML.',
   requires: '',

package/src/surfaces/admin/components/Icon/Icon.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Icon',
-  featureFlag: 'admin_extensibility',
   description:
     'This component renders an icon from a predefined list. Choose the one that suits your needs.',
   requires: '',

package/src/surfaces/admin/components/Image/Image.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Image',
-  featureFlag: 'admin_extensibility',
   description: 'Use this when you want to display an image.',
   requires: '',
   thumbnail: 'image-thumbnail.png',

package/src/surfaces/admin/components/InlineStack/InlineStack.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'InlineStack',
-  featureFlag: 'admin_extensibility',
   description:
     "Use this to organize layout elements along the horizontal axis of the page. It's great for horizontal alignment.",
   requires: '',

package/src/surfaces/admin/components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate.ts

@@ -0,0 +1,68 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export type CustomerSegmentTemplateIcon =
+  | 'categoriesMajor'
+  | 'firstVisitMajor'
+  | 'heartMajor'
+  | 'marketingMajor'
+  | 'checkoutMajor'
+  | 'ordersMajor'
+  | 'locationMajor'
+  | 'emailNewsletterMajor'
+  | 'firstOrderMajor'
+  | 'billingStatementDollarMajor'
+  | 'diamondAlertMajor'
+  | 'abandonedCartMajor'
+  | 'calendarMajor'
+  | 'productsMajor'
+  | 'globeMajor'
+  | 'flagMajor'
+  | 'uploadMajor'
+  | 'buyButtonMajor'
+  | 'followUpEmailMajor'
+  | 'confettiMajor'
+  | 'viewMajor';
+
+export type CustomerSegmentTemplateCategory =
+  | 'firstTimeBuyers'
+  | 'highValueCustomers'
+  | 'reEngageCustomers'
+  | 'abandonedCheckout'
+  | 'purchaseBehaviour'
+  | 'location';
+
+/**
+ * Reserved namespace and key for the customer standard metafield used in the template's query.
+ * More info - https://shopify.dev/docs/apps/custom-data/metafields/definitions/standard
+ */
+type CustomerStandardMetafieldDependency = 'facts.birth_date';
+
+export interface InternalCustomerSegmentTemplateProps {
+  /* Localized title of the template. */
+  title: string;
+  /* Localized description(s) of the template. */
+  description: string | string[];
+  /* Icon identifier for the template. */
+  icon: CustomerSegmentTemplateIcon;
+  /* Code snippet to render in the template with syntax highlighting. */
+  query: string;
+  /* Code snippet to insert in the segment editor. If missing, `query` will be used. */
+  queryToInsert?: string;
+  /* List of customer standard metafields or custom metafields used in the template's query. */
+  dependencies?: {
+    standardMetafields?: CustomerStandardMetafieldDependency[];
+    customMetafields?: string[];
+  };
+  /* ISO 8601-encoded date and time string. A "New" badge will be rendered for recently introduced templates. */
+  createdOn?: string;
+  /* The category in which the template will be visible. The template will show in its respective category and aggregate sections. */
+  category: CustomerSegmentTemplateCategory;
+}
+
+/**
+ * Customer segment templates are used to give merchants a starting point to create segments.
+ */
+export const InternalCustomerSegmentTemplate = createRemoteComponent<
+  'InternalCustomerSegmentTemplate',
+  InternalCustomerSegmentTemplateProps
+>('InternalCustomerSegmentTemplate');

package/src/surfaces/admin/components/InternalCustomerSegmentTemplate/examples/InternalCustomerSegmentTemplate.example.ts

@@ -0,0 +1,45 @@
+import {
+  extension,
+  InternalCustomerSegmentTemplate,
+} from '@shopify/ui-extensions/admin';
+
+export default extension(
+  'admin.customers.segmentation-templates.render',
+  (root, {i18n, __enabledFeatures}) => {
+    const b2bEnabled =
+      __enabledFeatures.includes('b2bEnabled');
+    const companiesTemplate = root.createComponent(
+      InternalCustomerSegmentTemplate,
+      {
+        title: i18n.translate('companies.title'),
+        description: i18n.translate('companies.description'),
+        icon: 'buyButtonMajor',
+        query: 'companies IS NOT NULL',
+        dateAdded: new Date('2023-01-15').toISOString(),
+        category: 'reEngageCustomers',
+      },
+    );
+
+    const locationTemplate = root.createComponent(
+      InternalCustomerSegmentTemplate,
+      {
+        title: i18n.translate('location.title'),
+        description: [
+          i18n.translate('location.firstParagraph'),
+          i18n.translate('location.secondParagraph'),
+        ],
+        icon: 'locationMajor',
+        query: "customer_cities CONTAINS 'US-NY-NewYorkCity'",
+        category: 'location',
+      },
+    );
+
+    if (b2bEnabled) {
+      root.appendChild(companiesTemplate);
+    }
+
+    root.appendChild(locationTemplate);
+
+    root.mount();
+  },
+);

package/src/surfaces/admin/components/Link/Link.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Link',
-  featureFlag: 'admin_extensibility',
   description:
     'This is an interactive component that directs users to a specified URL. It even supports custom protocols.',
   requires: '',

package/src/surfaces/admin/components/NumberField/NumberField.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'NumberField',
-  featureFlag: 'admin_extensibility',
   description:
     'This component is specifically designed for numeric data entry.',
   requires: '',

package/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'PasswordField',
-  featureFlag: 'admin_extensibility',
   description:
     'This component is for secure input, it obfuscates any text that users enter.',
   requires: '',

package/src/surfaces/admin/components/Pressable/Pressable.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Pressable',
-  featureFlag: 'admin_extensibility',
   description:
     'Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.',
   requires: '',

package/src/surfaces/admin/components/Select/Select.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Select',
-  featureFlag: 'admin_extensibility',
   description:
     'Use this when you want to give users a predefined list of options to choose from.',
   requires: '',

package/src/surfaces/admin/components/Text/Text.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'Text',
-  featureFlag: 'admin_extensibility',
   description:
     'This component renders text. Remember, you can also add your own styling.',
   requires: '',

package/src/surfaces/admin/components/TextArea/TextArea.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'TextArea',
-  featureFlag: 'admin_extensibility',
   description:
     'This component is perfect when you need to allow users to input larger amounts of text, such as for comments, feedback, or any other multi-line input.',
   requires: '',

package/src/surfaces/admin/components/TextField/TextField.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'TextField',
-  featureFlag: 'admin_extensibility',
   description:
     'This is your go-to component when you need to let users input textual information.',
   requires: '',

package/src/surfaces/admin/components/URLField/URLField.doc.ts

@@ -2,7 +2,6 @@ import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'URLField',
-  featureFlag: 'admin_extensibility',
   description: 'This is the right component for letting users enter a URL.',
   requires: '',
   thumbnail: 'urlfield-thumbnail.png',

package/src/surfaces/admin/components.ts

@@ -10,8 +10,8 @@ export {Button} from './components/Button/Button';
 export type {ButtonProps} from './components/Button/Button';
 export {Checkbox} from './components/Checkbox/Checkbox';
 export type {CheckboxProps} from './components/Checkbox/Checkbox';
-export {CustomerSegmentationTemplate} from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
-export type {CustomerSegmentationTemplateProps} from './components/CustomerSegmentationTemplate/CustomerSegmentationTemplate';
+export {CustomerSegmentTemplate} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
+export type {CustomerSegmentTemplateProps} from './components/CustomerSegmentTemplate/CustomerSegmentTemplate';
 export {Divider} from './components/Divider/Divider';
 export type {DividerProps} from './components/Divider/Divider';
 export {EmailField} from './components/EmailField/EmailField';
@@ -26,6 +26,12 @@ export {Icon} from './components/Icon/Icon';
 export type {IconProps} from './components/Icon/Icon';
 export {InlineStack} from './components/InlineStack/InlineStack';
 export type {InlineStackProps} from './components/InlineStack/InlineStack';
+export {InternalCustomerSegmentTemplate} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
+export type {
+  InternalCustomerSegmentTemplateProps,
+  CustomerSegmentTemplateIcon,
+  CustomerSegmentTemplateCategory,
+} from './components/InternalCustomerSegmentTemplate/InternalCustomerSegmentTemplate';
 export {Image} from './components/Image/Image';
 export type {ImageProps} from './components/Image/Image';
 export {Link} from './components/Link/Link';