[Bug] billingAddress is no longer available on the Customer Order Status page

edhgoose · January 23, 2025, 5:33pm

A series of errors have occurred that means that some functionality which was available is no longer available.

The useBillingAddress functionality was working correctly on the Shopify Order Status page.

We’ve noticed that since 2025-01 - I believe specifically this commit, a change has been introduced which means that the useBillingAddress functionality no longer works.

We get an error that:

“@shopify/ui-extensions-react/customer-account” has no exported member useBillingAddress.

I believe this is related to this GitHub Issue where it was revealed that the implementations of the useBillingAddress for checkout and for thank you pages were different (much to our surprise!)

Referring back to the documentation, I appreciate that the documentation does say that this is only available for purchase targets.

However, our clients expect this functionality to be available and we’ve built our extension off it.

We’d like the useBillingAddress functionality to be restored to the Order Status page.

We would also most appreciate if it was possible to share hooks across different pages - the Order Status and Thank You pages in particular are extremely similar, and clients expect them to be the same.

Kenza_Iraki · January 23, 2025, 6:11pm

Hey @edhgoose!

useBillingAddress was never exposed from “@shopify/ui-extensions-react/customer-account. Did you use to import it from “@shopify/ui-extensions-react/checkout?

Answering your two points:

useBillingAddress should be available to customer accounts extensions on the order status page, and it isn’t.
Sharing code between checkout and customer accounts extensions is a terrible experience and/or isn’t possible in some cases.

For 1 - we’ll be fixing this ASAP, thanks for reporting.

For 2 - we’re kicking off a project in the next few weeks that will address this.

edhgoose · January 23, 2025, 6:15pm

Thanks @Kenza_Iraki - yes, that’s spot on.

If it helps, we basically have an extension which displays the same UI on the Thank You and Order Status pages.

We (I understand wrongly) were importing all the hooks from the checkout namespace, and it was merrily working.

I’m undertaking a large refactor now to split them up as they’d stopped working on my local machine after upgrading.

And that’s how I discovered the useBillingAddress mistake.

Here’s a few relevant lines of code - our extension is open source:

github.com/mention-me/ShopifyAppV2

extensions/order-status-ui/src/hooks/useReferrerEntryPoint.ts

2f9e68dac


      
          import { useContext, useEffect } from "react";
          import { EntryPointForReferrerType, EntryPointOfferAndLink } from "@api/entry-point-api/src/types";
          import { APP_NAME, APP_VERSION, SHOPIFY_PREVIEW_MODE_FLAG } from "../../../../shared/constants";
          import { getDomainForEnvironment, isValidEnvironment, parseShopifyId } from "../../../../shared/utils";
          import {
          	useBillingAddress,
          	useCustomer,
          	useDiscountAllocations,
          	useDiscountCodes,
          	useEmail,
          	useExtensionEditor,
          	useLanguage,
          	useLocalizationCountry,
          	useShop,
          	useTotalAmount,
          } from "@shopify/ui-extensions-react/checkout";

github.com/mention-me/ShopifyAppV2

extensions/order-status-ui/src/hooks/useReferrerEntryPoint.ts

2f9e68dac


      
          
          	const { isoCode: languageOrLocale } = useLanguage();
          	const country = useLocalizationCountry();
          
          	const locale = useLocale(languageOrLocale, country?.isoCode, defaultLocale, localeChoiceMethod);
          
          	const email = useEmail();
          	const customer = useCustomer();
          
          	const money = useTotalAmount();
          	const billingAddress = useBillingAddress();
          
          	const discountCodes = useDiscountCodes();
          	const discountAllocations = useDiscountAllocations();
          
          	useEffect(() => {
          		// The Mention Me API supports multiple discount codes, comma separated.
          		const codes = discountCodes.map((discountCode) => {
          			return discountCode.code;
          		}).join(",");

This is now no longer working.

Appreciate the quick response - let me know if I can help at all with testing (1) or (2)!

AndyPye · January 25, 2025, 9:21am

Arrived here through following activity on the previously-referenced GitHub issue. We have the same issue as @edhgoose described above – we built an extension that was available on both OSP and TYP back in the days when both resided on the checkout surface, which subsequently got destroyed by the decision to move OSP to the customer accounts surface. We only have a tiny team working on our UI extensions and have not been able to dedicate the resources to refactoring our code to make sharing between the two surfaces work, and it seems from a quick initial check that the 2025-01 update to the Shopify packages indeed forces our hand on this matter. This is unfortunate because there has never been any guidance from the beginning that Shopify expected app developers to build their extensions using a very specific code structure (i.e. don’t consume Shopify-provided hooks directly in our own shared hooks). Perhaps in hindsight this is “obvious” since it’s always likely to be worth considering having a buffer layer between internal and third-party code, but I’d wager that the vast majority of people building UI extensions took the same approach that we did and have subsequently been forced to do additional, unplanned work as a consequence of the path chosen for the UI extension surfaces

@Kenza_Iraki re.:

we’re kicking off a project in the next few weeks that will address this

This sounds promising! Are you able to give us any sense of what the scope of that might be and when any potential benefits would be available to developers? I’m hoping that the end result of this will be a unified developer experience across all extension surfaces rather than each surface feeling like a separate entity with its own interface, expected ways of doing such basic things as retrieving data etc. (as an example, we were quite shocked to find that we’re forced to use an API call to retrieve metafields in the customer account surface, when they’re exposed “natively” via the JS library in other surfaces) but appreciate that that might be wishful thinking… Thanks!

edhgoose · January 27, 2025, 6:46pm

Hey @Kenza_Iraki,

We’ve just deployed an update to our app, and we’ve noticed that we can no longer get the billing address to work on the order status page.

I believe I may have been wrong that the issue was related to the Shopify UI Extension version - but something has changed somewhere along the lines such that the Order Status no longer provides the billing address.

We’ve had to inform our clients that this functionality is broken.

Do you have a timeframe on when this might be restored? I hope it’s a relatively small change, given the data must be available?

Thanks,
Ed

Robin-Shopify · January 27, 2025, 7:06pm

Hey @dhgoose,

Does your app have level 2 access to protected customer data?

It’s required to get access to billing and shipping address.

edhgoose · January 27, 2025, 9:07pm

Yes @Robin-Shopify - the problem is that the hook doesn’t exist at all. There is no useBillingAddress anymore, even though it used to function.

Do you have an estimated time to fix?

Robin-Shopify · January 27, 2025, 9:17pm

Hey @dhgoose,

I see. Your previous message made it sound to me like you lost access to the billing address for reasons unrelated to a missing hook. FYI extension APIs are available outside of their respective hooks as well. So if you use the more generic useApi hook, you’d still be able to access the billing address.

const api = useApi();
console.log(api.billingAddress)

That said, the useBillingAddress should be available soon.

edhgoose · January 27, 2025, 9:49pm

Ah. That’s just what I needed! Thank you.

I can confirm we’re now able to use this and the data is available.

I appreciate it @Robin-Shopify!

Topic		Replies	Views
[Feature Request] Support for useSelectedPaymentOptions for the Order Status Page Extensions checkout-ui-ext	0	4	January 20, 2025
POS UI extension and Post Purchase checkout extension unable to coexist? Extensions checkout-ui-ext , pos-extensions	3	44	November 26, 2024
Help Needed: Address Field 1 and Address Field 2 Returning Undefined in Checkout UI Extension Extensions checkout-ui-ext	1	18	January 7, 2025
(REGRESSION) useApplyShippingAddressChange hook on one-page checkout changes back to the first saved address Extensions checkout-ui-ext	7	79	February 4, 2025
Checkout UI extension shippingAddress oneTimeUse is undefined Extensions checkout-ui-ext	5	31	January 9, 2025

[Bug] billingAddress is no longer available on the Customer Order Status page

Related topics