Revert update checkout UI template

.changeset/eleven-ways-thank.md

@@ -0,0 +1,6 @@
+---
+'@shopify/fixtures-app': patch
+'@shopify/app': patch
+---
+
+Revert change to update Checkout UI template to use the new extension format

fixtures/app/extensions/checkout-ui/shopify.ui.extension.toml

@@ -1,23 +1,15 @@
-name = "checkout_ui_extension"
-api_version = "2022-10"
+type = "checkout_ui_extension"
+name = "checkout-ui"
 
-[capabilities]
-api_access = true
-network_access = true
-block_progress = true
 
-[[extension_points]]
-target = "Checkout::Dynamic::Render"
-module = "./src/CheckoutDynamicRender.jsx"
+extension_points = [
+  'Checkout::Dynamic::Render'
+]
 
-# [[extension_points.metafields]]
+# [[metafields]]
 # namespace = "my-namespace"
 # key = "my-key"
 
-# Read more on extension settings at https://shopify.dev/api/checkout-extensions/checkout/configuration
-# [settings]
-#   [[settings.fields]]
-#   key = "banner_title"
-#   type = "single_line_text_field"
-#   name = "Banner title"
-#   description = "Enter a title for the banner"
+# [[metafields]]
+# namespace = "my-namespace"
+# key = "my-key-2"

fixtures/app/extensions/checkout-ui/src/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {useExtensionApi, render, Banner} from '@shopify/checkout-ui-extensions-react';
+
+render('Checkout::Dynamic::Render', () => <App />);
+
+function App() {
+  const {extensionPoint, i18n} = useExtensionApi();
+  return <Banner>{i18n.translate('welcome', {extensionPoint})}</Banner>;
+}

fixtures/app/package.json

@@ -17,7 +17,7 @@
     "@shopify/admin-ui-extensions": "1.0.1",
     "@shopify/admin-ui-extensions-react": "1.0.1",
     "@shopify/app": "3.40.0",
-    "@shopify/ui-extensions-react": "2022-10",
+    "@shopify/checkout-ui-extensions-react": "^0.23.0",
     "@shopify/cli": "3.40.0",
     "@shopify/customer-account-ui-extensions-react": "^0.0.8",
     "@shopify/post-purchase-ui-extensions": "^0.13.3",

packages/app/src/cli/constants.ts

@@ -66,6 +66,6 @@ export const extensionTypesGroups: {name: string; extensions: string[]}[] = [
   {name: 'Point-of-Sale', extensions: ['pos_ui_extension']},
   {
     name: 'Shopify private',
-    extensions: ['customer_accounts_ui_extension', 'order_routing_location_rule'],
+    extensions: ['customer_accounts_ui_extension', 'ui_extension', 'order_routing_location_rule'],
   },
 ]

packages/app/src/cli/models/extensions/ui-specifications/checkout_ui_extension.ts

@@ -3,7 +3,7 @@ import {BaseUIExtensionSchema} from '../schemas.js'
 import {loadLocalesConfig} from '../../../utilities/extensions/locales-configuration.js'
 import {schema} from '@shopify/cli-kit/node/schema'
 
-const dependency = {name: '@shopify/ui-extensions-react', version: '2022-10'}
+const dependency = {name: '@shopify/checkout-ui-extensions-react', version: '^0.23.0'}
 
 const CheckoutSchema = BaseUIExtensionSchema.extend({
   extensionPoints: schema.array(schema.string()).optional(),

packages/app/src/cli/models/extensions/ui-specifications/ui_extension.test.ts

@@ -1,18 +1,16 @@
 import {configurationFileNames} from '../../../constants.js'
-
 import * as loadLocales from '../../../utilities/extensions/locales-configuration.js'
 import {UIExtensionInstance, UIExtensionSpec} from '../ui.js'
 import {loadLocalExtensionsSpecifications} from '../specifications.js'
 import {describe, expect, test, vi} from 'vitest'
 import {err, ok} from '@shopify/cli-kit/node/result'
 import {inTemporaryDirectory, mkdir, touchFile} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
-import type {NewExtensionPointSchemaType} from '../../extensions/schemas.js'
 
 describe('ui_extension', async () => {
   interface GetUIExtensionProps {
     directory: string
-    extensionPoints?: NewExtensionPointSchemaType[]
+    extensionPoints?: {target: string; module: string}[]
   }
 
   async function getTestUIExtension({directory, extensionPoints}: GetUIExtensionProps) {
@@ -166,7 +164,7 @@ Please check the configuration in ${tomlPath}`),
   })
 
   describe('deployConfig()', () => {
-    test('returns the deploy config, excluding module for extension points', async () => {
+    test('returns the deploy config', async () => {
       await inTemporaryDirectory(async (tmpDir) => {
         // Given
         const localization = {
@@ -180,7 +178,6 @@ Please check the configuration in ${tomlPath}`),
             {
               target: 'EXTENSION::POINT::A',
               module: './src/ExtensionPointA.js',
-              metafields: [{namespace: 'my-namespace', key: 'my-key'}],
             },
           ],
         })
@@ -192,12 +189,7 @@ Please check the configuration in ${tomlPath}`),
         expect(loadLocales.loadLocalesConfig).toBeCalledWith(tmpDir, uiExtension.configuration.type)
         expect(deployConfig).toStrictEqual({
           localization,
-          extension_points: [
-            {
-              target: 'EXTENSION::POINT::A',
-              metafields: [{namespace: 'my-namespace', key: 'my-key'}],
-            },
-          ],
+          extension_points: uiExtension.configuration.extensionPoints,
           capabilities: uiExtension.configuration.capabilities,
           name: uiExtension.configuration.name,
           api_version: uiExtension.configuration.apiVersion,

packages/app/src/cli/models/extensions/ui-specifications/ui_extension.ts

@@ -9,7 +9,7 @@ import {fileExists} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {outputContent, outputToken} from '@shopify/cli-kit/node/output'
 
-const dependency = {name: '@shopify/ui-extensions-react', version: '2022-10'}
+const dependency = {name: '@shopify/checkout-ui-extensions-react', version: '^0.23.0'}
 
 const UIExtensionSchema = BaseUIExtensionSchema.extend({
   settings: schema
@@ -39,7 +39,7 @@ const spec = createUIExtensionSpecification({
   deployConfig: async (config, directory) => {
     return {
       api_version: config.apiVersion,
-      extension_points: config.extensionPoints.map(({module, ...rest}) => ({...rest})),
+      extension_points: config.extensionPoints,
       capabilities: config.capabilities,
       name: config.name,
       settings: config.settings,

packages/app/src/cli/services/generate.ts

@@ -30,7 +30,6 @@ async function generate(options: GenerateOptions) {
   const token = await ensureAuthenticatedPartners()
   const apiKey = await ensureGenerateContext({...options, token})
   let specifications = await fetchSpecifications({token, apiKey, config: options.config})
-
   const app: AppInterface = await loadApp({directory: options.directory, specifications})
 
   // If the user has specified a type, we need to validate it
@@ -60,9 +59,7 @@ async function generate(options: GenerateOptions) {
       )
     }
   } else {
-    specifications = specifications
-      .filter((spec) => spec.identifier !== 'ui_extension')
-      .filter((spec) => app.extensionsForType(spec).length < spec.registrationLimit)
+    specifications = specifications.filter((spec) => app.extensionsForType(spec).length < spec.registrationLimit)
   }
 
   validateExtensionFlavor(specification, options.template)

packages/app/src/cli/services/generate/extension.test.ts

@@ -18,14 +18,8 @@ import type {ExtensionFlavor} from './extension.js'
 
 vi.mock('@shopify/cli-kit/node/node-package-manager')
 
-async function loadLocalUIExtensionsSpecificationsWithTemplates() {
-  const allUISpecs = await loadLocalUIExtensionsSpecifications()
-
-  return allUISpecs.filter((spec) => spec.identifier !== 'ui_extension')
-}
-
 describe('initialize a extension', async () => {
-  const allUISpecs = await loadLocalUIExtensionsSpecificationsWithTemplates()
+  const allUISpecs = await loadLocalUIExtensionsSpecifications()
   const allFunctionSpecs = await loadLocalFunctionSpecifications()
   const specifications = await loadLocalExtensionsSpecifications()
 
@@ -314,9 +308,9 @@ describe('initialize a extension', async () => {
 })
 
 describe('getRuntimeDependencies', () => {
-  test('does not include React for flavored Vanilla UI extensions', async () => {
+  test('no not include React for flavored Vanilla UI extensions', async () => {
     // Given
-    const allUISpecs = await loadLocalUIExtensionsSpecificationsWithTemplates()
+    const allUISpecs = await loadLocalUIExtensionsSpecifications()
     const extensionFlavor: ExtensionFlavor = 'vanilla-js'
 
     // When/then
@@ -328,7 +322,7 @@ describe('getRuntimeDependencies', () => {
 
   test('includes React for flavored React UI extensions', async () => {
     // Given
-    const allUISpecs = await loadLocalUIExtensionsSpecificationsWithTemplates()
+    const allUISpecs = await loadLocalUIExtensionsSpecifications()
     const extensionFlavor: ExtensionFlavor = 'react'
 
     // When/then
@@ -340,7 +334,7 @@ describe('getRuntimeDependencies', () => {
 
   test('includes the renderer package for UI extensions', async () => {
     // Given
-    const allUISpecs = await loadLocalUIExtensionsSpecificationsWithTemplates()
+    const allUISpecs = await loadLocalUIExtensionsSpecifications()
 
     // When/then
     allUISpecs.forEach((specification) => {

packages/app/templates/ui-extensions/projects/checkout_ui_extension/README.md

@@ -26,32 +26,22 @@ Initially, your extension will have the following files:
   └── extensions
     └── my-checkout-ui-extension
         ├── src
-        │   └── CheckoutDynamicRender.{{ srcFileExtension }} The source code for the CHECKOUT:DYNAMIC::RENDER extension point
+        │   └── index.jsx OR index.js // The index page of the checkout UI extension
         ├── locales
-        │   ├── en.default.json // The default locale for the checkout UI extension. Shared across all extension points.
-        │   └── fr.json // The locale file for non-regional French translations. Shared across all extension points.
+        │   ├── en.default.json // The default locale for the checkout UI extension
+        │   └── fr.json // The locale file for non-regional French translations
         └── shopify.ui.extension.toml // The config file for the checkout UI extension
 
 ```
 
-You can customize your new extension by editing the code in the `src/CheckoutDynamicRender.{{ srcFileExtension }}` file.
+You can customize your new extension by editing the code in the `src/index.js` or `src/index.jsx` file.
 
 > By default, your extension is configured to target the `Checkout::Dynamic::Render` [extension point](https://shopify.dev/api/checkout-extensions/checkout#extension-points). This extension point does not have a single location in the checkout where it will appear; instead, a merchant installing your extension will configure where *they* want your extension to show up.
 > If you are building an extension that is tied to existing UI element in the checkout, such as the cart lines or shipping method, you can change the extension point so that your UI extension will render in the correct location. Check out the list of [all available extension points](https://shopify.dev/api/checkout-extensions/checkout#extension-points) to get some inspiration for the kinds of content you can provide with checkout UI extensions.
 
-You can add new extension points by adding a new entry point to `src/shopify.ui.extension.toml`, e.g:
-
-```` toml
-[[extension_points]]
-target = "Checkout::CartLines::RenderAfter"
-module = "./src/CheckoutCartLinesRenderAfter.{{ srcFileExtension }}"
-````
-
-You would then add a new file at `src/CheckoutCartLinesRenderAfter.{{ srcFileExtension }}`.
 
 To shape your extension you have the following collection of tools available:
-
-* [Checkout UI components](https://shopify.dev/api/checkout-extensions/checkout/components), the visual elements you can render in your checkout extension points.
+* [UI components](https://shopify.dev/api/checkout-extensions/checkout/components), the visual elements you can render in your extension.
 * [Extension APIs](https://shopify.dev/api/checkout-extensions/checkout/extension-points/api), which give you access to read and write data in the checkout.
 
 > If you are using React, there is also a large collection of [React Hooks available](https://shopify.dev/api/checkout-extensions/checkout/extension-points/api#react-hooks) to ease access to these operations, otherwise you'll need to manually subscribe to the subscribable value directly with a callback.

packages/app/templates/ui-extensions/projects/checkout_ui_extension/shopify.ui.extension.toml.liquid

@@ -1,19 +1,18 @@
+type = "{{ type }}"
 name = "{{ name }}"
-api_version = "2022-10"
 
-[capabilities]
-api_access = true
-network_access = true
-block_progress = true
+extension_points = [
+  'Checkout::Dynamic::Render'
+]
 
-[[extension_points]]
-target = "Checkout::Dynamic::Render"
-module = "./src/CheckoutDynamicRender.{{ srcFileExtension }}"
-
-# [[extension_points.metafields]]
+# [[metafields]]
 # namespace = "my-namespace"
 # key = "my-key"
 
+# [[metafields]]
+# namespace = "my-namespace"
+# key = "my-key-2"
+
 # Read more on extension settings at https://shopify.dev/api/checkout-extensions/checkout/configuration
 # [settings]
 #   [[settings.fields]]

packages/app/templates/ui-extensions/projects/checkout_ui_extension/src/index.liquid

@@ -0,0 +1,35 @@
+{%- if flavor contains "react" -%}
+import React from 'react';
+import {
+  useExtensionApi,
+  render,
+  Banner,
+  useTranslate,
+} from '@shopify/checkout-ui-extensions-react';
+
+render('Checkout::Dynamic::Render', () => <App />);
+
+function App() {
+  const {extensionPoint} = useExtensionApi();
+  const translate = useTranslate();
+  return (
+    <Banner title="{{ name }}">
+      {translate('welcome', {extensionPoint})}
+    </Banner>
+  );
+}
+
+{%- else -%}
+import { extend, Banner } from "@shopify/checkout-ui-extensions";
+
+extend("Checkout::Dynamic::Render", (root, { extensionPoint, i18n }) => {
+  root.appendChild(
+    root.createComponent(
+      Banner,
+      { title: "{{ name }}" },
+      i18n.translate('welcome', {extensionPoint})
+    )
+  );
+  root.mount();
+});
+{%- endif -%}

fixtures/app/extensions/checkout-ui/README.md → packages/app/templates/ui-extensions/projects/ui_extension/README.md.liquid

@@ -26,6 +26,7 @@ Initially, your extension will have the following files:
   └── extensions
     └── my-checkout-ui-extension
         ├── src
+        │   └── AdminCheckoutEditorRenderSettings.{{ srcFileExtension }} The source code for the ADMIN::CHECKOUT::EDITOR extension point
         │   └── CheckoutDynamicRender.{{ srcFileExtension }} The source code for the CHECKOUT:DYNAMIC::RENDER extension point
         ├── locales
         │   ├── en.default.json // The default locale for the checkout UI extension. Shared across all extension points.
@@ -34,7 +35,7 @@ Initially, your extension will have the following files:
 
 ```
 
-You can customize your new extension by editing the code in the `src/CheckoutDynamicRender.{{ srcFileExtension }}` file.
+You can customize your new extension by editing the code in the `src/AdminCheckoutEditorRenderSettings.{{ srcFileExtension }}` or `src/CheckoutDynamicRender.{{ srcFileExtension }}` file.
 
 > By default, your extension is configured to target the `Checkout::Dynamic::Render` [extension point](https://shopify.dev/api/checkout-extensions/checkout#extension-points). This extension point does not have a single location in the checkout where it will appear; instead, a merchant installing your extension will configure where *they* want your extension to show up.
 > If you are building an extension that is tied to existing UI element in the checkout, such as the cart lines or shipping method, you can change the extension point so that your UI extension will render in the correct location. Check out the list of [all available extension points](https://shopify.dev/api/checkout-extensions/checkout#extension-points) to get some inspiration for the kinds of content you can provide with checkout UI extensions.
@@ -52,6 +53,7 @@ You would then add a new file at `src/CheckoutCartLinesRenderAfter.{{ srcFileExt
 To shape your extension you have the following collection of tools available:
 
 * [Checkout UI components](https://shopify.dev/api/checkout-extensions/checkout/components), the visual elements you can render in your checkout extension points.
+* Admin UI Extensions for [React](https://github.com/Shopify/ui-extensions/tree/main/packages/admin-ui-extensions-react) & [JavaScript](https://github.com/Shopify/ui-extensions/tree/main/packages/admin-ui-extensions)
 * [Extension APIs](https://shopify.dev/api/checkout-extensions/checkout/extension-points/api), which give you access to read and write data in the checkout.
 
 > If you are using React, there is also a large collection of [React Hooks available](https://shopify.dev/api/checkout-extensions/checkout/extension-points/api#react-hooks) to ease access to these operations, otherwise you'll need to manually subscribe to the subscribable value directly with a callback.