Sirgalleto/add location modal for order routing extensions

.changeset/sixty-ravens-fix.md

@@ -0,0 +1,6 @@
+---
+'@shopify/ui-extensions': minor
+'@shopify/ui-extensions-react': minor
+---
+
+Add order routing extension targets and API

packages/ui-extensions-react/src/surfaces/admin/components.ts

@@ -72,3 +72,5 @@ export {Thumbnail} from './components/Thumbnail/Thumbnail';
 export type {ThumbnailProps} from './components/Thumbnail/Thumbnail';
 export {URLField} from './components/URLField/URLField';
 export type {URLFieldProps} from './components/URLField/URLField';
+export {InternalLocationList} from './components/InternalLocationList/InternalLocationList';
+export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';

packages/ui-extensions-react/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts

@@ -0,0 +1,7 @@
+import {InternalLocationList as BaseInternalLocationList} from '@shopify/ui-extensions/admin';
+import {createRemoteReactComponent} from '@remote-ui/react';
+
+export const InternalLocationList = createRemoteReactComponent(
+  BaseInternalLocationList,
+);
+export type {InternalLocationListProps} from '@shopify/ui-extensions/admin';

packages/ui-extensions/src/surfaces/admin/api.ts

@@ -5,3 +5,4 @@ export type {ActionExtensionApi} from './api/action/action';
 export type {BlockExtensionApi} from './api/block/block';
 export type {ProductDetailsConfigurationApi} from './api/product-configuration/product-details-configuration';
 export type {ProductVariantDetailsConfigurationApi} from './api/product-configuration/product-variant-details-configuration';
+export type {OrderRoutingRuleApi} from './api/order-routing-rule/order-routing-rule';

packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/data.ts

@@ -0,0 +1,21 @@
+import type {SupportedDefinitionType} from './metafields';
+
+interface Metafield {
+  id?: string | null;
+  key: string;
+  value?: string | null;
+  namespace?: string;
+  type?: SupportedDefinitionType;
+}
+
+interface OrderRoutingRule {
+  label: string;
+  description: string;
+  id: string;
+  priority?: number;
+  metafields: Metafield[];
+}
+
+export interface Data {
+  rule: OrderRoutingRule;
+}

packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/metafields.ts

@@ -0,0 +1,67 @@
+const supportedDefinitionTypes = [
+  'boolean',
+  'collection_reference',
+  'color',
+  'date',
+  'date_time',
+  'dimension',
+  'file_reference',
+  'json',
+  'metaobject_reference',
+  'mixed_reference',
+  'money',
+  'multi_line_text_field',
+  'number_decimal',
+  'number_integer',
+  'page_reference',
+  'product_reference',
+  'rating',
+  'rich_text_field',
+  'single_line_text_field',
+  'product_taxonomy_value_reference',
+  'url',
+  'variant_reference',
+  'volume',
+  'weight',
+  'list.collection_reference',
+  'list.color',
+  'list.date',
+  'list.date_time',
+  'list.dimension',
+  'list.file_reference',
+  'list.metaobject_reference',
+  'list.mixed_reference',
+  'list.number_decimal',
+  'list.number_integer',
+  'list.page_reference',
+  'list.product_reference',
+  'list.rating',
+  'list.single_line_text_field',
+  'list.url',
+  'list.variant_reference',
+  'list.volume',
+  'list.weight',
+] as const;
+
+interface MetafieldUpdateChange {
+  type: 'updateMetafield';
+  key: string;
+  namespace?: string;
+  value: string | number;
+  valueType?: SupportedDefinitionType;
+}
+
+interface MetafieldRemoveChange {
+  type: 'removeMetafield';
+  key: string;
+  namespace: string;
+}
+
+type MetafieldsChange =
+  | MetafieldUpdateChange
+  | MetafieldRemoveChange
+  | MetafieldUpdateChange[]
+  | MetafieldRemoveChange[];
+
+export type SupportedDefinitionType = typeof supportedDefinitionTypes[number];
+export type ApplyMetafieldsChange = (changes: MetafieldsChange[]) => void;

packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts

@@ -0,0 +1,11 @@
+import type {StandardApi} from '../standard/standard';
+import type {ExtensionTarget as AnyExtensionTarget} from '../../extension-targets';
+
+import {ApplyMetafieldsChange} from './metafields';
+import {Data} from './data';
+
+export interface OrderRoutingRuleApi<ExtensionTarget extends AnyExtensionTarget>
+  extends StandardApi<ExtensionTarget> {
+  applyMetafieldsChange: ApplyMetafieldsChange;
+  data: Data;
+}

packages/ui-extensions/src/surfaces/admin/components.ts

@@ -80,3 +80,5 @@ export {Thumbnail} from './components/Thumbnail/Thumbnail';
 export type {ThumbnailProps} from './components/Thumbnail/Thumbnail';
 export {URLField} from './components/URLField/URLField';
 export type {URLFieldProps} from './components/URLField/URLField';
+export {InternalLocationList} from './components/InternalLocationList/InternalLocationList';
+export type {InternalLocationListProps} from './components/InternalLocationList/InternalLocationList';

packages/ui-extensions/src/surfaces/admin/components/InternalLocationList/InternalLocationList.ts

@@ -0,0 +1,76 @@
+import {createRemoteComponent} from '@remote-ui/core';
+
+export interface Location {
+  /**
+   * A unique identifier for the location.
+   */
+  id: string;
+
+  /**
+   * The name of the location.
+   */
+  name: string;
+}
+
+export interface LocationGroup {
+  /**
+   * An array of locations within the group.
+   */
+  locations: Location[];
+
+  /**
+   * The label for the location group.
+   */
+  label: string;
+
+  /**
+   * A unique identifier for the location group.
+   */
+  id: string;
+}
+
+export interface InternalLocationListProps {
+  /**
+   * An array of location groups.
+   */
+  locationGroups: LocationGroup[];
+
+  /**
+   * Callback when a location group is moved.
+   * It receives the old index and the new index as parameters.
+   */
+  onMoveGroup: (oldIndex: number, newIndex: number) => void;
+
+  /**
+   * Callback when a location group is renamed.
+   * It receives the id of the group and the new name as parameters.
+   */
+  onRenameGroup: (id: string, name: string) => void;
+
+  /**
+   * Callback when a location group is deleted.
+   * It receives the id of the group as a parameter.
+   */
+  onDeleteGroup: (id: string) => void;
+
+  /**
+   * Callback when a tag is moved from one group to another.
+   * It receives the id of the tag, the old group index, and the new group index as parameters.
+   */
+  onMoveTag: (
+    tagId: number,
+    oldGroupIndex: number,
+    newGroupIndex: number,
+  ) => void;
+
+  /**
+   * Callback when a new group is created.
+   * It receives the id of the new group as a parameter.
+   */
+  onCreateGroup: (id: string) => void;
+}
+
+export const InternalLocationList = createRemoteComponent<
+  'InternalLocationList',
+  InternalLocationListProps
+>('InternalLocationList');

packages/ui-extensions/src/surfaces/admin/extension-targets.ts

@@ -8,6 +8,7 @@ import type {
   BlockExtensionApi,
   ProductDetailsConfigurationApi,
   ProductVariantDetailsConfigurationApi,
+  OrderRoutingRuleApi,
 } from './api';
 import {AnyComponentBuilder} from '../../shared';
 
@@ -37,13 +38,19 @@ type ProductConfigurationComponents = AnyComponentBuilder<
   >
 >;
 
+type OrderRoutingComponents = AnyComponentBuilder<
+  Pick<Components, 'InternalLocationList'>
+>;
+
 /**
  * See the [list of available components](/docs/api/admin-extensions/components).
  */
 type AllComponents = AnyComponentBuilder<
   Omit<
     Components,
-    'CustomerSegmentTemplate' | 'InternalCustomerSegmentTemplate'
+    | 'CustomerSegmentTemplate'
+    | 'InternalCustomerSegmentTemplate'
+    | 'InternalLocationList'
   >
 >;
 
@@ -207,6 +214,20 @@ export interface ExtensionTargets {
     ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,
     ProductConfigurationComponents
   >;
+
+  /**
+   * Renders Order Routing Rule Configuration on order routing settings.
+   *
+   * See the [list of available components](/docs/api/admin-extensions/components).
+   */
+  'admin.settings.internal-order-routing-rule.render': RenderExtension<
+    OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,
+    AllComponents | OrderRoutingComponents
+  >;
+  'admin.settings.order-routing-rule.render': RenderExtension<
+    OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,
+    AllComponents
+  >;
 }
 
 export type ExtensionTarget = keyof ExtensionTargets;