My Account Commons

My Account Commons is a bundle of canonical components that can be used to create new tabs to be inserted on the vtex.my-account app.

DISCLAIMER: In order to this components work, they need to be children of vtex.my-account app.

To import it into your code:

import {
  ContentWrapper,
  BaseLoading,
  GenericError,
} from 'vtex.my-account-commons'

Usages

ContentWrapper

You can use it in your code like a React component with the jsx tag: <ContentWrapper>.

<ContentWrapper
  namespace="my-custom-page"
  title={`${orderTitle} ${orderNumber}`}
  backButton={backButton}>
  {({ handleError }) => children}
</ContentWrapper>
Prop nameTypeDescription
titleStringThe string that will appear on the page title.
titleIdStringIntl message id that will be translated and inserted on the page title.
backbutton.titleStringThe string that will appear as a message on the backbutton.
backbutton.titleIdStringIntl message id that will be translated and inserted as the go back message.
backbutton.pathString!Location which the user will be lead to when hit the backbutton.
headerContentnodeJSX that wil be inserted as children of the vtex.style-guide/PageHeader.
namespaceString!Css namespace that will be added to the page body.

The ContentWrapper uses the render prop pattern and returns to its children an object with the following props:

Render prop

Prop nameTypeDescription
handlErrorFunctionFunction that will be called when the user dismisses the error message.

BaseLoading

This component should be used to implement your own Loader, it analyses the result of a graphql query and displays
the loader Skeleton or an error message if any error occurs with retry option to call refetch on the query.

<BaseLoading queryData={data} headerConfig={object}>
  {children}
</BaseLoading>
Prop nameTypeDescription
queryDataQueryResultApollo Graphql query result.
headerConfigContentWPropsThe props that will be passed to the ContentWrapper.
nameSpaceStringThe name space prop that will be passed to the ContentWrapper. vtex-base-loading is applied if none is passed
parseErrorFunctionFunction that parses the graphql error and returns a messageId.

GenericError

A wrapper for the vtex.styleguide/Alert component.

<GenericError onDismiss={handleError} errorId={error} />
Prop nameTypeDescription
errorStringThe error message that will be displayed on the Alert.
errorIdStringIntl message id that will be translated and inserted on the Alert.
onDismissFunctionFunction that will be called when the user hits the close button.

Disclaimer about react/Router.js file

Read carefully the instructions within the file before editing it.


Did this page help you?