POS Cart problem

[Turco]

Hi,

I'm trying to create and observe a cart in POS. I used the shopify-cli to create an app and followed the tutorial and doc to fetch a cart but it seems that doesn't work.

import React, { useState } from "react";
import createApp from "@shopify/app-bridge/development";
import { Features, Cart, Group, Toast } from "@shopify/app-bridge/actions";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";

import "@shopify/polaris/styles.css";

function App() {
  const [isLoading, setIsLoading] = useState(false);
  const [isCartAvailable, setIsCartAvailable] = useState(false);
  const [fetchResponse, setFetchResponse] = useState("Loading status");
  const [payloadResponse, setPayloadResponse] = useState("Loading payload");
  const [debugString, setDebugString] = useState("Debug String");

  const app = createApp({
    apiKey: API_KEY,
    shopOrigin: Cookies.get("shopOrigin"),
  });
  const config = {
    apiKey: API_KEY,
    shopOrigin: Cookies.get("shopOrigin"),
  };

  const unsubscribe = app.subscribe(Features.ActionType.UPDATE, function () {
    app.featuresAvailable(Group.Cart).then((features) => {
      const hasFetchCart = features.Cart[Cart.Action.FETCH];
      setFetchResponse(JSON.stringify(features));
      if (hasFetchCart) {
        unsubscribe();
        var lineItemPayload = {
          price: 20,
          quantity: 1,
          title: "Bab Low - Blue Jay // White Soles",
        };

        const cart = Cart.create(app);
        setPayloadResponse("not ok");

        cart.subscribe(Cart.Action.UPDATE, (payload) => {
          setPayloadResponse("ok");
          setPayloadResponse(JSON.stringify(payload));
        });
        setIsCartAvailable(true);
        setDebugString("before dispatch");
        cart.dispatch(Cart.Action.ADD_LINE_ITEM, {
          data: lineItemPayload,
        });
        setDebugString("after dispatch");
      } else {
        setIsCartAvailable(false);
        var toastOptions = {
          message: "Cart is not available",
          duration: 5000,
          isError: true,
        };
        var toastError = Toast.create(app, toastOptions);
        toastError.dispatch(Toast.Action.SHOW);
      }
      setIsLoading(true);
    });
  });

  return (
    <>
      {isLoading ? (
        <Provider config={config}>
          {isCartAvailable ? (
            <h1>Cart Available</h1>
          ) : (
            <h1>Cart is not Available</h1>
          )}
        </Provider>
      ) : (
        <h1>Loading</h1>
      )}
      <h2>{fetchResponse}</h2>
      <h2>{payloadResponse}</h2>
      <h2>{debugString}</h2>
    </>
  );
}

export default App;

This is my index.js. I embedded the app and use the link to make the app appear in the cart page of the POS app and it does. The problem are the results:

in the admin it shows this:

Loading

Loading status

Loading payload

Debug String

as expected but in the POS app it shows this:

Cart Available
{"Cart":{"ADD_CUSTOMER_ADDRESS":{"Dispatch":false,"Subscribe":false},"ADD_LINE_ITEM":{"Dispatch":false,"Subscribe":false},"CLEAR":{"Dispatch":false,"Subscribe":false},"FETCH":{"Dispatch":false,"Subscribe":false},"REMOVE_CUSTOMER":{"Dispatch":false,"Subscribe":false},"REMOVE_DISCOUNT":{"Dispatch":false,"Subscribe":false},"REMOVE_LINE_ITEM":{"Dispatch":false,"Subscribe":false},"REMOVE_LINE_ITEM_DISCOUNT":{"Dispatch":false,"Subscribe":false},"REMOVE_LINE_ITEM_PROPERTIES":{"Dispatch":false,"Subscribe":false},"REMOVE_PROPERTIES":{"Dispatch":false,"Subscribe":false},"SET_CUSTOMER":{"Dispatch":false,"Subscribe":false},"SET_DISCOUNT":{"Dispatch":false,"Subscribe":false},"SET_LINE_ITEM_DISCOUNT":{"Dispatch":false,"Subscribe":false},"SET_LINE_ITEM_PROPERTIES":{"Dispatch":false,"Subscribe":false},"SET_PROPERTIES":{"Dispatch":false,"Subscribe":false},"UPDATE":{"Dispatch":false,"Subscribe":false},"UPDATE_CUSTOMER_ADDRESS":{"Dispatch":false,"Subscribe":false},"UPDATE_LINE_ITEM":{"Dispatch":false,"Subscribe":false}}}
not ok
after dispatch

the "not ok" shows that the dispatch didn't work and the permission are all false for the cart. I tried to watch other similar questions but I didn't find anything.

I am currently using a Shopify POS app for android ver: 3.53.0

[policenauts1 · Accepted solution]

I've done a lot of stuff with Cart before, but I wasn't aware a tutorial existed - I just followed the App Bridge documentation examples here: https://shopify.dev/tools/app-bridge/actions/cart. The best thing I can suggest to get it working is to first start with a bare bones add line item payload to cart action (you can already assume hasFetchCart is true on your Android device running POS). And after that, then add in the check for whether it has a cart - and then after that, add in a subscribe for cart update, so on and so forth. And also make sure your app has write_orders scope permission. Good luck. 

[Turco]

Thanks! I was missing the right permission, thank you very much

[Ruzen]

Hey ,
 Could you please tell me how you solved the issue? That would be very great of you. Thank you

[JasonWeber0]

I created a custom APP using Shopify CLI and the POS link in my partner account dashboard.

But I can't see the Link on the cart edit screen. 
Do I need to write an actual interactive code here to see the link? 
I'd like to apply discount based on the customer tag. 
Can you please advise what's wrong?
I verified that I embedded my app on Shopify POS.
Thanks!