APP::ERROR::PERMISSION

[SuryanshuTiwari]

Describe the bug

Using shopify app-bridge to create a scanner component in embedded reactjs application. This shopify article suggested to upgrade the app bridge version but it is not helping as well.

To Reproduce

Steps to reproduce the behaviour:

1- Create a new react application 2- create a camera component which will be used to open the scanner. 3- Use the below code.

config = {
        // The client ID provided for your application in the Partner Dashboard.
        apiKey: 'apiKey',
        // The host of the specific shop that's embedding your app. This value is provided by Shopify as a URL query parameter that's appended to your application URL when your app is loaded inside the Shopify admin.
        host: new URLSearchParams(window.location.search).get("host"),
    };`

var app = createApp(config);

const scanner = Scanner.create(app);

const handleClick = async () => {
  app.subscribe(Scanner.Action.CAPTURE, payload => {       
    window.alert(JSON.stringify(payload))
  });

 scanner.dispatch(Scanner.Action.OPEN_CAMERA)
};

return (
    <div className="container" onClick={handleClick}>
      <img
        className="image-container"
        src={camera}
        alt="camera"
        width={100}
        height={100}
      />
    </div>
  );
};

If applicable, add screenshots to help explain your problem.

Expected behaviour

Upon clicking the camera image, the barcode scanner should open.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

"dependencies": {
    "@shopify/app-bridge": "^3.7.10",
    "@shopify/app-bridge-react": "^3.7.10",
    "@shopify/app-bridge-types": "^0.0.6",
    "@shopify/polaris": "^12.15.0",
    "@shopify/shopify-api": "^9.2.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Additional Question

Can we use scanner component for web apps? or is it only for android devices?

[MitchLillie]

Hi @SuryanshuTiwari! Thanks for the report. At the moment scanner is only available for POS and mobile apps, per the docs. The Scanner feature is not supported in web.

Was this related to the issue you reported earlier? If so please close that ticket as well. Thanks!

[SuryanshuTiwari]

Greetings @MitchLillie. I was wondering the same. Thanks for the clearance.

Closed the earlier ticket as well.