Add examples for localized discounts tutorial

Author: kangjoa

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Modal.jsx

@@ -0,0 +1,46 @@
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const {i18n} = shopify;
+  // [START localization.format-points]
+  const percentageDiscount = 25.5;
+  const formattedPercentageDiscount = i18n.formatNumber(percentageDiscount);
+  // [END localization.format-points]
+  // [START localization.format-balance]
+  const fixedDiscountAmount = 10;
+  const formattedFixedDiscountAmount = i18n.formatCurrency(fixedDiscountAmount, {currency: 'CAD'});
+  // [END localization.format-balance]
+  // [START localization.translate-points]
+  const itemCount = shopify.cart.current.value.lineItems.length;
+  // [END localization.translate-points]
+  const onButtonClick = (type, title, amount) => {
+    shopify.cart.applyCartDiscount(type, title, amount);
+    // [START localization.translate-balance]
+    shopify.toast.show(i18n.translate('discountApplied'));
+    // [END localization.translate-balance]
+  };
+
+  return (
+    // [START localization.build-ui]
+    <s-page heading={i18n.translate('modalTitle')}>
+      <s-scroll-box>
+      <s-stack gap="base">
+        <s-text>
+          {i18n.translate('itemCount', {count: itemCount})}
+        </s-text>
+        <s-button onClick={() => onButtonClick('Percentage', '25% off', '25')}>
+          {formattedPercentageDiscount}%
+        </s-button>
+        <s-button onClick={() => onButtonClick('FixedAmount', '$10 off', '10')}>
+          {formattedFixedDiscountAmount}
+        </s-button>
+        </s-stack>
+      </s-scroll-box>
+    </s-page>
+  );
+}
+// [END localization.build-ui]

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/Tile.jsx

@@ -0,0 +1,32 @@
+import {render} from 'preact';
+import {useState, useEffect} from 'preact/hooks';
+
+export default async () => {
+  render(<Extension />, document.body);
+}
+
+function Extension() {
+  const {i18n} = shopify;
+  
+  const shouldDisable = (subtotal) => {
+    return Number(subtotal) <= 100;
+  };
+
+  const [disabled, setDisabled] = useState(shouldDisable(shopify.cart.current.value.subtotal));
+  
+  useEffect(() => {
+    const unsubscribe = shopify.cart.current.subscribe((cart) => {
+      setDisabled(shouldDisable(cart.subtotal));
+    });
+    return unsubscribe;
+  }, []);
+
+  return (
+    <s-tile
+      heading={i18n.translate('name')}
+      subheading={i18n.translate('availableDiscounts')}
+      onClick={() => shopify.action.presentModal()}
+      disabled={disabled}
+    />
+  );
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/en.default.json

@@ -0,0 +1,11 @@
+{
+  "name": "Discount",
+  "itemCount": {
+    "zero": "No items in cart",
+    "one": "{{count}} item in cart",
+    "other": "{{count}} items in cart"
+  },
+  "availableDiscounts": "View discount options",
+  "discountApplied": "Discount applied!",
+  "modalTitle": "Choose a discount"
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/locales/fr.json

@@ -0,0 +1,11 @@
+{
+  "name": "Réduction",
+  "itemCount": {
+    "zero": "Aucun article dans le panier",
+    "one": "{{count}} article dans le panier",
+    "other": "{{count}} articles dans le panier"
+  },
+  "availableDiscounts": "Voir les options de réduction",
+  "discountApplied": "Réduction appliquée!",
+  "modalTitle": "Choisir une réduction"
+}

packages/ui-extensions/docs/surfaces/point-of-sale/mdxExamples/localized-discount-example/shopify.extension.toml

@@ -0,0 +1,21 @@
+api_version = "2025-10"
+
+[[extensions]]
+type = "ui_extension"
+# Change the merchant-facing name of the extension in locales/en.default.json
+name = "t:name"
+uid = "11fd348b-1de3-4793-6892-baa416fc3df29b4377b5"
+handle = "discount"
+description = "Add discount"
+
+# module: file that contains your extension’s source code
+# target: location where your extension appears in POS
+# [START config.setup-targets]
+[[extensions.targeting]]
+module = "./src/Tile.jsx"
+target = "pos.home.tile.render"
+
+[[extensions.targeting]]
+module = "./src/Modal.jsx"
+target = "pos.home.modal.render"
+# [END config.setup-targets]