diff --git a/pos-ui-extension-cash-management/package.json.liquid b/pos-ui-extension-cash-management/package.json.liquid new file mode 100644 index 00000000..92a7ba9e --- /dev/null +++ b/pos-ui-extension-cash-management/package.json.liquid @@ -0,0 +1,27 @@ +{%- if flavor contains "react" -%} +{ + "name": "{{ handle }}", + "private": true, + "version": "1.0.0", + "license": "UNLICENSED", + "dependencies": { + "react": "^18.0.0", + "@shopify/ui-extensions": "2025.10.x", + "@shopify/ui-extensions-react": "2025.10.x", + "react-reconciler": "0.29.0" + }{% if flavor contains "typescript" %}, + "devDependencies": { + "@types/react": "^18.0.0" + }{% endif %} +} +{%- else -%} +{ + "name": "{{ handle }}", + "private": true, + "version": "1.0.0", + "license": "UNLICENSED", + "dependencies": { + "@shopify/ui-extensions": "2025.10.x" + } +} +{%- endif -%} diff --git a/pos-ui-extension-cash-management/shopify.extension.toml.liquid b/pos-ui-extension-cash-management/shopify.extension.toml.liquid new file mode 100644 index 00000000..19f6e832 --- /dev/null +++ b/pos-ui-extension-cash-management/shopify.extension.toml.liquid @@ -0,0 +1,28 @@ +# The version of APIs your extension will receive. Learn more: +# https://shopify.dev/docs/api/usage/versioning +api_version = "2025-10" + +[[extensions]] +type = "ui_extension" +name = "{{ name }}" +{% if uid %}uid = "{{ uid }}"{% endif %} +handle = "{{ handle }}" +description = "A {{ flavor }} POS UI extension" + +# Controls where in POS your extension will be injected, +# and the file that contains your extension’s source code. +[[extensions.targeting]] +module = "./src/Action.{{ srcFileExtension }}" +target = "pos.cash-tracking-session-details.action.render" + +[[extensions.targeting]] +module = "./src/Block.{{ srcFileExtension }}" +target = "pos.cash-tracking-session-details.block.render" + +[[extensions.targeting]] +module = "./src/MenuItem.{{ srcFileExtension }}" +target = "pos.cash-tracking-session-details.action.menu-item.render" + +[[extensions.targeting]] +module = "./src/Banner.{{ srcFileExtension }}" +target = "pos.cash-tracking-session-details.block.render-before" \ No newline at end of file diff --git a/pos-ui-extension-cash-management/src/Action.liquid b/pos-ui-extension-cash-management/src/Action.liquid new file mode 100644 index 00000000..46619b65 --- /dev/null +++ b/pos-ui-extension-cash-management/src/Action.liquid @@ -0,0 +1,55 @@ +{%- if flavor contains "react" -%} +import React from 'react'; + +import { + Text, + Screen, + ScrollView, + Navigator, + reactExtension, + useApi, +} from '@shopify/ui-extensions-react/point-of-sale'; + +const Modal = () => { + {% if flavor contains "typescript" %}const api = useApi<"pos.cash-tracking-session-details.action.render">(); + {% else %}const api = useApi(); + {% endif %} + return ( + + + + This is a modal extension + + + + ); +}; + +export default reactExtension('pos.cash-tracking-session-details.action.render', () => ( + +)); +{%- else -%} +import { + Navigator, + Screen, + ScrollView, + Text, + extension, +} from '@shopify/ui-extensions/point-of-sale'; + +export default extension('pos.cash-tracking-session-details.action.render', (root, api) => { + const navigator = root.createComponent(Navigator); + const screen = root.createComponent(Screen, { + name: 'CashManagement', + title: 'Cash Management', + }); + const scrollView = root.createComponent(ScrollView); + const text = root.createComponent(Text); + + text.append('This is a modal extension'); + scrollView.append(text); + screen.append(scrollView); + navigator.append(screen); + root.append(navigator); +}); +{%- endif -%} diff --git a/pos-ui-extension-cash-management/src/Banner.liquid b/pos-ui-extension-cash-management/src/Banner.liquid new file mode 100644 index 00000000..793bd5cb --- /dev/null +++ b/pos-ui-extension-cash-management/src/Banner.liquid @@ -0,0 +1,33 @@ +{%- if flavor contains "react" -%} +import React from 'react'; + +import { + Banner, + useApi, + reactExtension, +} from '@shopify/ui-extensions-react/point-of-sale'; + +const Banner = () => { + {% if flavor contains "typescript" %}const api = useApi<"pos.cash-tracking-session-details.block.render-before">(); + {% else %}const api = useApi(); + {% endif %} + {% raw %}return ( + + );{% endraw %} +}; + +export default reactExtension('pos.cash-tracking-session-details.block.render-before', () => ( + +)); +{%- else -%} +import { + Banner, + extension, +} from '@shopify/ui-extensions/point-of-sale'; + +export default extension('pos.cash-tracking-session-details.block.render-before', (root, api) => { + const banner = root.createComponent(Banner, { title: 'This is a banner extension', variant: 'alert', visible: true }); + + root.append(banner); +}); +{%- endif -%} diff --git a/pos-ui-extension-cash-management/src/Block.liquid b/pos-ui-extension-cash-management/src/Block.liquid new file mode 100644 index 00000000..89c50d8f --- /dev/null +++ b/pos-ui-extension-cash-management/src/Block.liquid @@ -0,0 +1,51 @@ +{%- if flavor contains "react" -%} +import React from 'react'; + +import { + Text, + useApi, + reactExtension, + POSBlock, + POSBlockRow, +} from '@shopify/ui-extensions-react/point-of-sale'; + +const Block = () => { + {% if flavor contains "typescript" %}const api = useApi<"pos.cash-tracking-session-details.block.render">(); + {% else %}const api = useApi(); + {% endif %} + {% raw %}return ( + + + {'This is a block extension'} + + + );{% endraw %} +}; + +export default reactExtension('pos.cash-tracking-session-details.block.render', () => ( + +)); +{%- else -%} +import { + POSBlock, + Text, + POSBlockRow, + extension, +} from '@shopify/ui-extensions/point-of-sale'; + +export default extension('pos.cash-tracking-session-details.block.render', (root, api) => { + const block = root.createComponent(POSBlock, { + action: {title: 'Open action', onPress: api.action.presentModal}, + }); + + const mainText = root.createComponent(Text); + mainText.append('This is a block extension'); + + const blockMainRow = root.createComponent(POSBlockRow); + blockMainRow.append(mainText); + + block.append(blockMainRow); + + root.append(block); +}); +{%- endif -%} diff --git a/pos-ui-extension-cash-management/src/MenuItem.liquid b/pos-ui-extension-cash-management/src/MenuItem.liquid new file mode 100644 index 00000000..b98d0544 --- /dev/null +++ b/pos-ui-extension-cash-management/src/MenuItem.liquid @@ -0,0 +1,35 @@ +{%- if flavor contains "react" -%} +import React from 'react'; +import { + reactExtension, + Button, + useApi, +} from '@shopify/ui-extensions-react/point-of-sale'; + +const ButtonComponent = () => { + {% if flavor contains "typescript" %}const api = useApi<"pos.cash-tracking-session-details.action.menu-item.render">(); + {% else %}const api = useApi(); + {% endif %} + return