Move functions-cart-checkout-validation-js to 2025-07

pos-ui-extension-cart-line-item-details/package.json.liquid

@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
+{%- endif %}
 }
-{%- endif -%}

pos-ui-extension-cart-line-item-details/src/Action.liquid

@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {cartLineItem} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="CartLineItem" title="Cart Line Item">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Title for this line item: ${cartLineItem.title}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {

pos-ui-extension-cart-line-item-details/src/MenuItem.liquid

@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,

pos-ui-extension-customer-details/package.json.liquid

@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}

pos-ui-extension-customer-details/src/Action.liquid

@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {customer} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="CustomerDetails" title="Customer Details">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Customer ID: ${customer.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from "react";
 
 import {

pos-ui-extension-customer-details/src/Block.liquid

@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {customer, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Customer ID for this customer: ${customer.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from "react";
 
 import {

pos-ui-extension-customer-details/src/MenuItem.liquid

@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from "react";
 import {
   reactExtension,

pos-ui-extension-draft-order-details/package.json.liquid

@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}

pos-ui-extension-draft-order-details/src/Action.liquid

@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {draftOrder} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="DraftOrderDetailsAction" title="Draft Order Details Action">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Draft Order ID: ${draftOrder.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {

pos-ui-extension-draft-order-details/src/Block.liquid

@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {draftOrder, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Draft Order ID for this draft order: ${draftOrder.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {

pos-ui-extension-draft-order-details/src/MenuItem.liquid

@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,

pos-ui-extension-order-details/package.json.liquid

@@ -1,9 +1,14 @@
-{%- if flavor contains "react" -%}
 {
   "name": "{{ handle }}",
   "private": true,
   "version": "1.0.0",
   "license": "UNLICENSED",
+{%- if flavor contains "preact" %}
+  "dependencies": {
+    "preact": "^10.10.x",
+    "@shopify/ui-extensions": "~2025.10.0-rc"
+  }
+{%- elsif flavor contains "react" %}
   "dependencies": {
     "react": "^18.0.0",
     "@shopify/ui-extensions": "2025.7.x",
@@ -13,15 +18,9 @@
   "devDependencies": {
     "@types/react": "^18.0.0"
   }{% endif %}
-}
-{%- else -%}
-{
-  "name": "{{ handle }}",
-  "private": true,
-  "version": "1.0.0",
-  "license": "UNLICENSED",
+{%- else %}
   "dependencies": {
     "@shopify/ui-extensions": "2025.7.x"
   }
-}
-{%- endif -%}
+{%- endif %}
+}

pos-ui-extension-order-details/src/Action.liquid

@@ -1,4 +1,24 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Modal />, document.body);
+};
+
+const Modal = () => {
+  const {order} = shopify;
+  return (
+    <s-pos-navigator>
+      <s-pos-screen name="OrderDetailsAction" title="Order Details Action">
+        <s-pos-scroll-view>
+          <s-pos-text>{`Order ID: ${order.id}`}</s-pos-text>
+        </s-pos-scroll-view>
+      </s-pos-screen>
+    </s-pos-navigator>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {

pos-ui-extension-order-details/src/Block.liquid

@@ -1,4 +1,23 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<Block />, document.body);
+};
+
+const Block = () => {
+  const {order, action} = shopify;
+  return (
+    <s-pos-block action={{title: 'Open action', onPress: action.presentModal}}>
+      <s-pos-block-row>
+        <s-pos-text>This is a block extension</s-pos-text>
+        <s-pos-text>{`Order ID: ${order.id}`}</s-pos-text>
+      </s-pos-block-row>
+    </s-pos-block>
+  );
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 
 import {

pos-ui-extension-order-details/src/MenuItem.liquid

@@ -1,4 +1,17 @@
-{%- if flavor contains "react" -%}
+{%- if flavor contains "preact" -%}
+import {render} from 'preact';
+
+export default async () => {
+  render(<ButtonComponent />, document.body);
+};
+
+const ButtonComponent = () => {
+  const {action} = shopify;
+
+  return <s-pos-button onPress={() => action.presentModal()} />;
+};
+
+{%- elsif flavor contains "react" -%}
 import React from 'react';
 import {
   reactExtension,