Pos.draft-order-details.action.render does not work

Extensions
1

This target does not work, when I call api.action.presentModal(); from the menu item, it keeps showing error.

IMG_0514 copy
IMG_0514 copy713×738 26.9 KB

And this extension does not show in the “Other Extension target”.

2

Hey @soulchild :waving_hand: hope all’s well with you. Just out of curiosity, did you delete/reinstall the app? I’m guessing you have already tried that, but just wanted to narrow down what the issue might be there.

If you’re able to generate some POS logs, I can take a look as well. Logs are stored locally on the POS app though, so there’s a bit of a method to send those our way. Steps below:

  1. In the POS App Tap = / More located on the bottom right of the screen
  2. Tap Support > Report a bug
  3. Type: Attention **"Alan G** in the feedback section
  4. Tap Send

I should be able to retrieve those on my end here once they’re sent my way and I can take a look to see if we’re able to narrow down any errors on our end here.

Hope this helps - feel free to ping me here if I can help out further.

3

Hi Alan, thanks for responding. I have deleted / reinstalled the app but the issue still persists.

I have tapped “Report a bug”, filled in the content as you mentioned and tapped “Send”.

Please let me know if you have managed to view the log, thank you.

1 Like
4

Thanks @soulchild - I’ll do some digging into this and loop back with you once I have some next steps.

1 Like
5

Hey @soulchild - thanks for your patience on this! I was able to work with some folks internally and I think we have an answer for you.

If you check inside your shopify.extension.toml file, could you try updating the line target = "pos.home.modal.render" to target = "pos.draft-order-details.action.render"? You’d likely also need to make the same update in the file where you’re implementing the modal.

A find-and-replace-all of pos.home.modal.render with pos.draft-order-details.action.render might work if it is a new project. Hope this helps - let me know if the issue persists and we can keep digging into this :slight_smile:

6

Hi Alan,

In the shopify.extension.toml file, I am already using the target you mentioned, here is the targeting section in my shopify.extension.toml :


# Controls where in POS your extension will be injected,
# and the file that contains your extension’s source code.
[[extensions.targeting]]
module = "./src/MenuItem.js"
target = "pos.draft-order-details.action.menu-item.render"

[[extensions.targeting]]
module = "./src/Action.js"
target = "pos.draft-order-details.action.render"

Here is the src/MenuItem.js file content

import {Button, Dialog, extension} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.draft-order-details.action.menu-item.render',
  (root, api) => {

    const button = root.createComponent(Button, {
      onPress: async () => {
        api.toast.show("Present modal will fail", {duration: 3000});


        api.action.presentModal();
      }
    });

    root.append(button);
  }
);

Here is the Action.js file content (the modal)

import {
  Navigator,
  Screen,
  ScrollView,
  Text,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.draft-order-details.action.render',
  (root, api) => {
    const navigator = root.createComponent(Navigator);
    const screen = root.createComponent(Screen, {
      name: 'DraftOrderDetailsAction',
      title: 'Draft Order Details Action',
    });
    const scrollView = root.createComponent(ScrollView);
    const text = root.createComponent(Text);

    text.append(`ID for current draft order screen: ${api.order.id}`);
    scrollView.append(text);
    screen.append(scrollView);
    navigator.append(screen);
    root.append(navigator);
  }
);

Despite using the correct target, the modal still does not show. I really recommend the staff internally to actually create an extension with this target and run it on the POS and see for themselves :sweat_smile:

7

Thanks for confirming @soulchild - really appreciate you sharing the context there. I’ll go ahead and see if I can replicate this with an extension from scratch and loop back with the team internally. I’ll touch base with you here when I have some more info to share :slight_smile: