pos. return. post. action. renderTarget
Target
A full-screen extension target that renders when a pos.return.post.action.menu-item.render
target calls for it
Note
This is part of a POS UI Extensions developer preview. More information to come.
Was this section helpful?
Action
import React from 'react';
import {
Navigator,
Screen,
ScrollView,
Text,
reactExtension,
useApi,
} from '@shopify/ui-extensions-react/point-of-sale';
const ReturnAction = () => {
const api = useApi<'pos.return.post.action.render'>();
return (
<Navigator>
<Screen name="ReturnDetails" title="Return Details">
<ScrollView>
<Text>{`Order ID: ${api.order.id}`}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.return.post.action.render', () => (
<ReturnAction />
));
examples
Action
React
import React from 'react'; import { Navigator, Screen, ScrollView, Text, reactExtension, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const ReturnAction = () => { const api = useApi<'pos.return.post.action.render'>(); return ( <Navigator> <Screen name="ReturnDetails" title="Return Details"> <ScrollView> <Text>{`Order ID: ${api.order.id}`}</Text> </ScrollView> </Screen> </Navigator> ); }; export default reactExtension('pos.return.post.action.render', () => ( <ReturnAction /> ));
TS
import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension('pos.return.post.action.render', (root, api) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'ReturnDetails', title: 'Return Details', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append(`Order ID: ${api.order.id}`); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); });