[Customer Account UI Extension] Order Status page does not work properly on Developer Preview store.

[an_autoserve]

I am trying to implement Customer Account UI extension on my app. I know that the extension is only in developer preview at the time but I want to prepare for when the extension release for public use.

I want to display additional information on the Order Status page when my customers checkout. This is the tutorial that I followed:

https://shopify.dev/docs/apps/customer-accounts/build-inline-extensions/order-status?framework=react

I followed the exact steps as instructed by the tutorial. The last step instructed me to open the developer preview and click the preview link on one of my extension target.

Below is the the page that I expected to see:

Instead, click on the preview link redirects me on to the information page

Digging deeper into the extension's documentation confused me even more. The extension is currently in developer preview, which should mean I should have no problem getting it to work on a development store (Checkout and Customer Accounts Extensibility preview enabled on my dev store). However, in the documentation, Customer Account UI is listed under Checkout UI extension and was specified to only work with Shopify Plus plan.

This is extremely confusing to me and hope that someone from the Shopify team can help clear this up.

[Liam]

Hi An_autoserve - just to confirm, you're seeing a checkout page loading instead of the customer account page? The preview link generated by the CLI should be loading a customer account experience page, then you'll need to navigate to the Order status page of a customer account to see the screenshot that's in the docs. 

[Liam]

Is there a way you could share your code with us on an open GitHub repo or similar?

[an_autoserve]

@Liam Hi Liam, this is our code for the component file as well as the toml file. I cannot share the github link since they're from my company. 

component:

import {
  BlockStack,
  reactExtension,
  TextBlock,
  Link,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
     "customer-account.order-status.customer-information.render-after",
     () => <PromotionBanner />
);

function PromotionBanner() {
   return (
      <BlockStack inlineAlignment="center">
        <TextBlock>
          {`🎉 You've earned 1,000 points from this order. You've been upgraded to Platinum tier. `}
          <Link>View rewards</Link>
         </TextBlock>
       </BlockStack>
    );
}

toml file:

# Learn more about configuring your Customer account UI extension:
# https://shopify.dev/api/customer-account-ui-extensions/unstable/configuration

# The version of APIs your extension will receive. Learn more:
# https://shopify.dev/docs/api/usage/versioning
api_version = "unstable"

[[extensions]]
type = "ui_extension"
name = "delivery-date-order-status"
handle = "delivery-date-order-status"

# Controls where in Shopify your extension will be injected,
# and the file that contains your extension’s source code. Learn more:
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/extension-targets-overview

[[extensions.targeting]]
module = "./src/PointBlockExtension.tsx"
target = "customer-account.order-status.customer-information.render-after"

[extensions.capabilities]
# Gives your extension access to directly query Shopify’s storefront API.
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/configuration#api-access
api_access = true

# Gives your extension access to make external network calls, using the
# JavaScript `fetch()` API. Learn more:
# https://shopify.dev/docs/api/customer-account-ui-extensions/unstable/configuration#network-access
# network_access = true

 our dev store has been configured with "Checkout and Customer Accounts Extensibility preview" feature.

[Liam]

Hi again - our team has looked into this more and have said that depending on the extension point being used, you may be redirected to the checkout page. In this situation you'll have to checkout and then reload the page to be redirected from the Thank You Page to the Order Details Page. This will happen with any extension point that deals with an individual order given that we don’t know if you already have an order for this customer on your store.

Hope this helps,