Choose a version:

customer-account.order.action.menu-item.render
Target

A static extension target that renders as 1 order action on the Order Index and Order Status pages in customer accounts.

Anchor to orderapiOrderApi

The API object provided to this and other customer-account.order extension targets.

Anchor to orderId orderId string required

Was this section helpful?

Anchor to standardapiStandardApi

The base API object provided to this and other customer-account extension targets.

Anchor to authenticatedAccount authenticatedAccount required: Information about the authenticated account.
Anchor to extension extension required: Meta information about the extension.
Anchor to i18n i18n required: Utilities for translating content and formatting values according to the current localization of the user.
Anchor to localization localization required: Details about the language of the buyer.
Anchor to navigation navigation required
Anchor to query query <Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: ; }) => Promise<{ data?: Data; errors?: []; }> required: Used to query the Storefront GraphQL API with a prefetched token.

See storefront api access examples for more information.
Anchor to sessionToken sessionToken required: Provides access to session tokens, which can be used to verify token claims on your app's server.

See session token examples for more information.
Anchor to settings settings StatefulRemoteSubscribable<> required: The settings matching the settings definition written in the shopify.ui.extension.toml file.

See settings examples for more information.

Note
When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.
Anchor to storage storage required: Key-value storage for the extension target.
Anchor to ui ui required: Methods to interact with the extension's UI.
Anchor to version version Version required: The renderer version being used for the extension.
Anchor to extensionPoint extensionPoint Target required: The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.

Deprecated
Deprecated as of version 2023-07, use extension.target instead.

Docs_StandardApi

authenticatedAccount
Information about the authenticated account.
```
AuthenticatedAccount
```
extension
Meta information about the extension.
```
Extension
```
extensionPoint
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
```
Target
```
i18n
Utilities for translating content and formatting values according to the current `localization` of the user.
```
I18n
```
localization
Details about the language of the buyer.
```
Localization
```
navigation
```
StandardExtensionNavigation
```
query
Used to query the Storefront GraphQL API with a prefetched token. See [storefront api access examples](/docs/api/customer-account-ui-extensions/apis/storefront-api#examples) for more information.
```
<Data = unknown, Variables = { [key: string]: unknown; }>(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>
```
sessionToken
Provides access to session tokens, which can be used to verify token claims on your app's server. See [session token examples](/docs/api/customer-account-ui-extensions/apis/session-token#examples) for more information.
```
SessionToken
```
settings
The settings matching the settings definition written in the [`shopify.ui.extension.toml`](/docs/api/customer-account-ui-extensions/configuration) file. See [settings examples](/docs/api/customer-account-ui-extensions/apis/order-status-api/settings#examples) for more information. > Note: When an extension is being installed in the editor, the settings will be empty until a merchant sets a value. In that case, this object will be updated in real time as a merchant fills in the settings.
```
StatefulRemoteSubscribable<ExtensionSettings>
```
storage
Key-value storage for the extension target.
```
Storage
```
ui
Methods to interact with the extension's UI.
```
Ui
```
version
The renderer version being used for the extension.
```
Version
```

export interface Docs_StandardApi extends Omit<StandardApi<any>, 'router'> {}

AuthenticatedAccount

customer
Provides the customer information of the authenticated customer.
```
StatefulRemoteSubscribable<Customer | undefined>
```
purchasingCompany
Provides the company info of the authenticated business customer. If the customer is not authenticated or is not a business customer, this value is `undefined`.
```
StatefulRemoteSubscribable<PurchasingCompany | undefined>
```

export interface AuthenticatedAccount {
  /**
   * Provides the company info of the authenticated business customer.
   * If the customer is not authenticated or is not a business customer, this value is `undefined`.
   */
  purchasingCompany: StatefulRemoteSubscribable<PurchasingCompany | undefined>;
  /**
   * Provides the customer information of the authenticated customer.
   */
  customer: StatefulRemoteSubscribable<Customer | undefined>;
}

Customer

Information about the authenticated customer. {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).

id
Customer ID.
```
string
```

export interface Customer {
  /**
   * Customer ID.
   *
   * @example 'gid://shopify/Customer/123'
   */
  id: string;
}

PurchasingCompany

company
Include information of the company of the logged in business customer.
```
Company
```

export interface PurchasingCompany {
  /**
   * Include information of the company of the logged in business customer.
   */
  company: Company;
}

Company

id
Company ID.
```
string
```

export interface Company {
  /**
   * Company ID.
   */
  id: string;
}

Extension

Meta information about an extension target.

apiVersion
The API version that was set in the extension config file.
```
ApiVersion
```
capabilities
The allowed capabilities of the extension, defined in your [shopify.ui.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
```
StatefulRemoteSubscribable<Capability[]>
```
editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
```
Editor
```
rendered
Whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout. Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
```
StatefulRemoteSubscribable<boolean>
```
scriptUrl
The URL to the script that started the extension target.
```
string
```
target
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
```
Target
```
version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```
string
```

export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
  /**
   * The API version that was set in the extension config file.
   *
   * @example '2023-04', '2023-07'
   */
  apiVersion: ApiVersion;

  /**
   * The allowed capabilities of the extension, defined
   * in your [shopify.ui.extension.toml](/docs/api/checkout-ui-extensions/configuration) file.
   *
   * * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
   *
   * * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
   *
   * * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
   */
  capabilities: StatefulRemoteSubscribable<Capability[]>;

  /**
   * Information about the editor where the extension is being rendered.
   *
   * The value is undefined if the extension is not rendering in an editor.
   */
  editor?: Editor;

  /**
   * Whether your extension is currently rendered to the screen.
   *
   * Shopify might render your extension before it's visible in the UI,
   * typically to pre-render extensions that will appear on a later step of the
   * checkout.
   *
   * Your extension might also continue to run after the buyer has navigated away
   * from where it was rendered. The extension continues running so that
   * your extension is immediately available to render if the buyer navigates back.
   */
  rendered: StatefulRemoteSubscribable<boolean>;

  /**
   * The URL to the script that started the extension target.
   */
  scriptUrl: string;

  /**
   * The identifier that specifies where in Shopify’s UI your code is being
   * injected. This will be one of the targets you have included in your
   * extension’s configuration file.
   *
   * @example 'customer-account.order-status.block.render'
   * @see /docs/api/checkout-ui-extensions/unstable/extension-targets-overview
   * @see /docs/apps/app-extensions/configuration#targets
   */
  target: Target;

  /**
   * The published version of the running extension target.
   *
   * For unpublished extensions, the value is `undefined`.
   *
   * @example 3.0.10
   */
  version?: string;
}

ApiVersion

Union of supported API versions

'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable'

Capability

The capabilities an extension has access to. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing. * [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can register buyer consent decisions that will be honored on Shopify-managed services. * [`iframe.sources`](/docs/api/checkout-ui-extensions/configuration#iframe): the extension can embed an external URL in an iframe.

'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing' | 'collect_buyer_consent.customer_privacy' | 'iframe.sources'

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
"checkout"
```

export interface Editor {
  /**
   * Indicates whether the extension is rendering in the checkout editor.
   */
  type: 'checkout';
}

I18n

formatCurrency
Returns a localized currency value. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. It uses the buyer's locale by default.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
formatDate
Returns a localized date value. This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses the buyer's locale by default. Formatting options can be passed in as options.
```
(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string
```
formatNumber
Returns a localized number. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. It uses the buyer's locale by default.
```
(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string
```
translate
Returns translated content in the buyer's locale, as supported by the extension. - `options.count` is a special numeric value used in pluralization. - The other option keys and values are treated as replacements for interpolation. - If the replacements are all primitives, then `translate()` returns a single string. - If replacements contain UI components, then `translate()` returns an array of elements.
```
I18nTranslate
```

export interface I18n {
  /**
   * Returns a localized number.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `decimal` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatNumber: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized currency value.
   *
   * This function behaves like the standard `Intl.NumberFormat()`
   * with a style of `currency` applied. It uses the buyer's locale by default.
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatCurrency: (
    number: number | bigint,
    options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,
  ) => string;

  /**
   * Returns a localized date value.
   *
   * This function behaves like the standard `Intl.DateTimeFormatOptions()` and uses
   * the buyer's locale by default. Formatting options can be passed in as
   * options.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat0
   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options
   *
   * @param options.inExtensionLocale - if true, use the extension's locale
   */
  formatDate: (
    date: Date,
    options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,
  ) => string;

  /**
   * Returns translated content in the buyer's locale,
   * as supported by the extension.
   *
   * - `options.count` is a special numeric value used in pluralization.
   * - The other option keys and values are treated as replacements for interpolation.
   * - If the replacements are all primitives, then `translate()` returns a single string.
   * - If replacements contain UI components, then `translate()` returns an array of elements.
   */
  translate: I18nTranslate;
}

I18nTranslate

This defines the i18n.translate() signature.

export interface I18nTranslate {
  /**
   * This returns a translated string matching a key in a locale file.
   *
   * @example translate("banner.title")
   */
  <ReplacementType = string>(
    key: string,
    options?: {[placeholderKey: string]: ReplacementType | string | number},
  ): ReplacementType extends string | number
    ? string
    : (string | ReplacementType)[];
}

Localization

extensionLanguage
This is the buyer's language, as supported by the extension. If the buyer's actual language is not supported by the extension, this is the fallback locale used for translations. For example, if the buyer's language is 'fr-CA' but your extension only supports translations for 'fr', then the `isoCode` for this language is 'fr'. If your extension does not provide french translations at all, this value is the default locale for your extension (that is, the one matching your .default.json file).
```
StatefulRemoteSubscribable<Language>
```
language
The language the buyer sees in the customer account hub.
```
StatefulRemoteSubscribable<Language>
```

export interface Localization {
  /**
   * The language the buyer sees in the customer account hub.
   */
  language: StatefulRemoteSubscribable<Language>;

  /**
   * This is the buyer's language, as supported by the extension.
   * If the buyer's actual language is not supported by the extension,
   * this is the fallback locale used for translations.
   *
   * For example, if the buyer's language is 'fr-CA' but your extension
   * only supports translations for 'fr', then the `isoCode` for this
   * language is 'fr'. If your extension does not provide french
   * translations at all, this value is the default locale for your
   * extension (that is, the one matching your .default.json file).
   */
  extensionLanguage: StatefulRemoteSubscribable<Language>;
}

Language

isoCode
The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
```
string
```

export interface Language {
  /**
   * The BCP-47 language tag. It may contain a dash followed by an ISO 3166-1 alpha-2 region code.
   *
   * @example 'en' for English, or 'en-US' for English local to United States.
   * @see https://en.wikipedia.org/wiki/IETF_language_tag
   * @see https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
   */
  isoCode: string;
}

StandardExtensionNavigation

navigate
The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
```
NavigateFunction
```

export interface StandardExtensionNavigation {
  /**
   * The navigate() method navigates to a specific URL, updating any provided state in the history entries list.
   */
  navigate: NavigateFunction;
}

NavigateFunction

export interface NavigateFunction {
  /**
   * Navigates to a specific URL, updating any provided state in the history entries list.
   * @param url The destination URL to navigate to.
   */
  (url: string, options?: NavigationOptions): void;
}

StorefrontApiVersion

Union of supported storefront API versions

'2022-04' | '2022-07' | '2022-10' | '2023-01' | '2023-04' | '2023-07' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | 'unstable'

GraphQLError

GraphQL error returned by the Shopify Storefront APIs.

extensions
```
{ requestId: string; code: string; }
```
message
```
string
```

export interface GraphQLError {
  message: string;
  extensions: {
    requestId: string;
    code: string;
  };
}

SessionToken

get
Requests a session token that hasn't expired. You should call this method every time you need to make a request to your backend in order to get a valid token. This method will return cached tokens when possible, so you don’t need to worry about storing these tokens yourself.
```
() => Promise<string>
```

export interface SessionToken {
  /**
   * Requests a session token that hasn't expired. You should call this method every
   * time you need to make a request to your backend in order to get a valid token.
   * This method will return cached tokens when possible, so you don’t need to worry
   * about storing these tokens yourself.
   */
  get(): Promise<string>;
}

ExtensionSettings

The merchant-defined setting values for the extension.

[key: string]
```
string | number | boolean | undefined
```

export interface ExtensionSettings {
  [key: string]: string | number | boolean | undefined;
}

Storage

A key-value storage object for extension targets. Stored data is only available to this specific app but can be shared across multiple extension targets. The storage backend is implemented with `localStorage` and should persist for ... days However, data persistence isn't guaranteed.

delete
Delete stored data by key.
```
(key: string) => Promise<void>
```
read
Read and return a stored value by key. The stored data is deserialized from JSON and returned as its original primitive. Returns `null` if no stored data exists.
```
<T = unknown>(key: string) => Promise<T>
```
write
Write stored data for this key. The data must be serializable to JSON.
```
(key: string, data: any) => Promise<void>
```

export interface Storage {
  /**
   * Read and return a stored value by key.
   *
   * The stored data is deserialized from JSON and returned as
   * its original primitive.
   *
   * Returns `null` if no stored data exists.
   */
  read<T = unknown>(key: string): Promise<T | null>;

  /**
   * Write stored data for this key.
   *
   * The data must be serializable to JSON.
   */
  write(key: string, data: any): Promise<void>;

  /**
   * Delete stored data by key.
   */
  delete(key: string): Promise<void>;
}

Ui

forceDataRefresh
Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful. To request access to this API: 1. Go to your partner dashboard and click **Apps**. 2. Select the app you need to request access for. 3. Click **API access**. 4. Under **Access force data refresh**, click **Request access**.
```
(content: string) => Promise<void>
```
overlay
An overlay is a contextual element on top of the main interface that provides additional information or functionality.
```
{ close(overlayId: string): void; }
```
toast
The Toast API displays a non-disruptive message that displays at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. How to use: - Use toasts to confirm successful actions. - Aim for two words. - Use noun + past tense verb format. For example, \`Changes saved\`. For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
```
{ show(content: string): void; }
```

export interface Ui {
  /**
   * An overlay is a contextual element on top of the main interface that provides additional information or functionality.
   */
  overlay: {
    close(overlayId: string): void;
  };
  /**
   * The Toast API displays a non-disruptive message that displays at the bottom
   * of the interface to provide quick, at-a-glance feedback on the outcome
   * of an action.
   *
   * How to use:
   *
   * - Use toasts to confirm successful actions.
   *
   * - Aim for two words.
   *
   * - Use noun + past tense verb format. For example, \`Changes saved\`.
   *
   * For errors, or information that needs to persist on the page, use a [banner](/docs/api/checkout-ui-extensions/unstable/components/feedback/banner) component.
   */
  toast: {
    show(content: string): void;
  };
  /**
   * Refresh data so the surrounding information on the page is updated. The `content` string will appear in a toast message after refresh, to confirm the action was successful.
   *
   * To request access to this API:
   *
   * 1. Go to your partner dashboard and click **Apps**.
   *
   * 2. Select the app you need to request access for.
   *
   * 3. Click **API access**.
   *
   * 4. Under **Access force data refresh**, click **Request access**.
   */
  forceDataRefresh(content: string): Promise<void>;
}

Was this section helpful?

Anchor to buttonpropsButtonProps

Supported props for Buttons used in order actions.

children only support text.

Omit onPress and to to trigger the customer-account.order.action.render extension target on press.

Anchor to to to string required: Destination URL to link to.

E.g. extension:/ to navigate to the Full-page extension.
Anchor to accessibilityLabel accessibilityLabel string: A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to loading loading boolean Default: false: Replaces content with a loading indicator.
Anchor to loadingLabel loadingLabel string: Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.
Anchor to onPress onPress () => void: Callback that is run when the button is pressed.

Docs_OrderActionMenu_Button

accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
loading
Replaces content with a loading indicator.
```
boolean
```
loadingLabel
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
```
string
```
onPress
Callback that is run when the button is pressed.
```
() => void
```
to
Destination URL to link to. E.g. `extension:/` to navigate to the Full-page extension.
```
string
```

export interface Docs_OrderActionMenu_Button
  extends Pick<
    ButtonProps,
    'onPress' | 'loading' | 'loadingLabel' | 'disabled' | 'accessibilityLabel'
  > {
  /**
   * Destination URL to link to.
   *
   * E.g. `extension:/` to navigate to the Full-page extension.
   */
  to: ButtonProps['to'];
}

Was this section helpful?

Customer account order menu item extension example

import React from "react";

import {

Button,

reactExtension,

useApi,

} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(

"customer-account.order.action.menu-item.render",

() => <MenuActionItemExtension />

);

function MenuActionItemExtension() {

const {i18n} = useApi<"customer-account.order.action.menu-item.render">()

return <Button>{i18n.translate("menuItem.button")}</Button>;

}

examples

Customer account order menu item extension example

React

import React from "react";
import {
  Button,
  reactExtension,
  useApi,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
  "customer-account.order.action.menu-item.render",
  () => <MenuActionItemExtension />
);

function MenuActionItemExtension() {
  const {i18n} = useApi<"customer-account.order.action.menu-item.render">()
  return <Button>{i18n.translate("menuItem.button")}</Button>;
}

Javascript

import {Button, extension} from '@shopify/ui-extensions/customer-account';

export default extension(
  'customer-account.order.action.menu-item.render',
  (root) => {
    root.appendChild(
      root.createComponent(
        Button,
        undefined,
        'Edit Order'
      ),
    );
  },
);

Anchor to examplesExamples

Additional examples for menu item extensions.

Was this section helpful?

Loading your data before rendering the menu item

React

import React from "react";

import {

Button,

reactExtension,

useApi,

} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(

"customer-account.order.action.menu-item.render",

async () => {

const data = await fetchMenuItems();

return <MenuActionItemExtension data={data}/>

}

);

interface Props {

data: any;

}

function MenuActionItemExtension(props: Props) {

return <Button to={props.data.url}>{props.data.itemName}</Button>;

}

function fetchMenuItems() {

throw new Error("Function not implemented.");

}

examples

Loading your data before rendering the menu item

React

import React from "react";
import {
  Button,
  reactExtension,
  useApi,
} from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
  "customer-account.order.action.menu-item.render",
  async () => {
    const data = await fetchMenuItems();

    return <MenuActionItemExtension data={data}/>
  }
);

interface Props {
  data: any;
}

function MenuActionItemExtension(props: Props) {
  return <Button to={props.data.url}>{props.data.itemName}</Button>;
}

function fetchMenuItems() {
  throw new Error("Function not implemented.");
}

Anchor to relatedRelated

LimitationsOrder status page

customer-account.order.action.menu-item.renderTarget

Anchor to orderapiOrderApi

OrderApi

Anchor to standardapiStandardApi

Docs_StandardApi

AuthenticatedAccount

Customer

PurchasingCompany

Company

Extension

ApiVersion

Capability

Editor

I18n

I18nTranslate

Localization

Language

StandardExtensionNavigation

NavigateFunction

StorefrontApiVersion

GraphQLError

SessionToken

ExtensionSettings

Storage

Ui

Anchor to buttonpropsButtonProps

Docs_OrderActionMenu_Button

examples

Customer account order menu item extension example

React

Javascript

Anchor to examplesExamples

examples

Loading your data before rendering the menu item

React

Anchor to relatedRelated

customer-account.order.action.menu-item.render
Target