Problem with Order Attributes after deploying app. #2495
Description
Please list the package(s) involved in the issue, and include the version you are using
@shopify/app: 3.57.1
@shopify/cli: 3.57.1
@shopify/ui-extensions: 2024.1.2
@shopify/ui-extensions-react: 2024.1.2
Describe the bug
We've built an app that based on cart attribute displays specific information on Thank You and Order Status pages. Everything looks good on development store when we run tests. We use cart attributes that are set in the custom checkout links, like this: https://store.myshopify.com/cart/48162535702810:2?checkout[shipping_address][country]=UK&attributes[fslink]=44480315949225:1
When we deploy the app on production stores this is not working though - the box is not shown. Is there anything else we're missing out that should be configured specifically for production stores?
Orders on production stores do contain mentioned order attributes when we view their details.
Expected behavior
Same behavior on development and production store.
Additional context
Sample code:
import {useCallback, useEffect, useState} from 'react';
import {
reactExtension,
Banner,
InlineStack,
View,
Heading,
Text,
Button,
useStorage,
useApi,
useAttributeValues,
} from '@shopify/ui-extensions-react/checkout';
const thankYouBlock = reactExtension("purchase.thank-you.block.render", () => <Attribution />);
export { thankYouBlock };
function Attribution() {
let secondLink = '';
const [lsLink] = useAttributeValues(['fslink']
if(lsLink !== undefined) {
secondLink += lsLink;
}
let finalLink = 'https://store.myshopify.com/cart/'+secondLink;
if(secondLink == '') {
return null;
}
return (
<View border="base" borderWidth="1" padding="base" borderRadius="base">
<Text>Lorem Ipsum</Text>
<InlineStack inlineAlignment="end">
<Button kind="primary" appearance="monochrome" to={ finalLink }>Submit</Button>
</InlineStack>
</View>
);
}