UI extension not showing on Thank You page

[julianozapiet]

Please list the package(s) involved in the issue, and include the version you are using

• ui-extensions v2023.10.x
• ui-extensions-react v2023.10.x

Describe the bug

After deploying the checkout extensions and adding the block in the Thank you page via checkout editor, the extension shows just fine in the editor preview, but it does not render at all on the actual Thank you page of the store, when an order is placed.

If the extension is also exported to the order status page, it will show correctly on both checkout editor and on the real order status page.

Steps to reproduce the behavior:

1. Add extension on the Thank you page via checkout editor.
2. Verify that the extension is rendered in the editor preview.

Expected behavior

Extension should render on the real Thank you page when an order is created

Screenshots

Additional context

I've tried on different themes/stores/fresh installs of the app but the problem persists.

[dnagoda]

Hi @julianozapiet 👋

Just wanted to collect a little more information about your use case.

• Are you using the purchase.thank-you.block.render target?
• I'm noticing a difference between the thank-you page you're seeing in the checkout editor (has map) and the example being displayed without the extension (no map). Can you please provide the URL you're seeing for the thank-you page where the extension is not displayed? It can leave the host off if you like. I just need the path and query params.
• And, just to confirm (should be the case since you can see the thank-you page in the editor) you've enabled extensibility for the thank-you page in the shops admin Settings / Checkout area?

[julianozapiet]

Hey @dnagoda thanks for getting back!

Are you using the purchase.thank-you.block.render target?

Yes, this is on my shopify.extension.toml file:

[[extensions.targeting]]
target = "purchase.thank-you.block.render"
module = "./src/Checkout.tsx"

And this is how i export it in Checkout.tsx:

function Confirmation() {
    return <Text>Lorem ipsum dolor sit amet</Text>;
}

export const thankYouBlock = reactExtension('purchase.thank-you.block.render', () => <Confirmation />);

Can you please provide the URL you're seeing for the thank-you page where the extension is not displayed?

This is one example: https://juliano-checkout-2.myshopify.com/checkouts/do/cea7b95d701d2e682c3c99bd160b1ac0/thank-you

you've enabled extensibility for the thank-you page in the shops admin Settings / Checkout area?

Yes, this is how it looks like:

[dnagoda]

Thanks.

This looks like a Draft Order based on the URL you provided. Unfortunately, extensibility is not fully supported on draft orders. We're working on it, but there's no public ETA yet.

[julianozapiet]

Thanks for explaining @dnagoda

[abaileyb]

@dnagoda is this going to be solved for the next api release?

[dnagoda]

@abaileyb The public roadmap is a good place to track this. We currently have "Support for UI extensions in draft order invoice checkouts" scheduled for release June 2024.