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 name	Type	Description
`title`	`String`	The string that will appear on the page title.
`titleId`	`String`	Intl message id that will be translated and inserted on the page title.
`backbutton.title`	`String`	The string that will appear as a message on the backbutton.
`backbutton.titleId`	`String`	Intl message id that will be translated and inserted as the go back message.
`backbutton.path`	`String!`	Location which the user will be lead to when hit the backbutton.
`headerContent`	`node`	JSX that wil be inserted as children of the `vtex.style-guide/PageHeader`.
`namespace`	`String!`	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 name	Type	Description
`handlError`	`Function`	Function 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 name	Type	Description
`queryData`	`QueryResult`	Apollo Graphql query result.
`headerConfig`	`ContentWProps`	The props that will be passed to the `ContentWrapper`.
`nameSpace`	`String`	The name space prop that will be passed to the `ContentWrapper`. `vtex-base-loading` is applied if none is passed
`parseError`	`Function`	Function that parses the graphql error and returns a messageId.

GenericError

A wrapper for the vtex.styleguide/Alert component.

<GenericError onDismiss={handleError} errorId={error} />

Prop name	Type	Description
`error`	`String`	The error message that will be displayed on the `Alert`.
`errorId`	`String`	Intl message id that will be translated and inserted on the `Alert`.
`onDismiss`	`Function`	Function 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.