[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/clients/externalPrice.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext } from '@vtex/api'
import { ExternalClient } from '@vtex/api'

import type { InputItem } from '../typings/externalPrice'
import ENV from '../env'

export interface ExternalPriceClient {
  getPrice: (item: InputItem) => Promise<number | undefined>
}

export default class ExternalPrice
  extends ExternalClient
  implements ExternalPriceClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(ENV.SERVICE_ENDPOINT, context, options)
  }

  public async getPrice(item: InputItem): Promise<number | undefined> {
    const result = await this.http.get(item.skuId, {
      metric: 'get-price',
    })

    // parse payload and return price as number

    return result
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/clients/profileSystemClient.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext, RequestConfig } from '@vtex/api'
import { JanusClient } from '@vtex/api'
import type { AxiosError } from 'axios'

import { statusToError } from '../utils/statusCodeUtils'
import type { CurrentProfile, Profile } from '../typings/profileSystem'

const FIVE_SECONDS_MS = 5 * 1000

export class ProfileSystemClient extends JanusClient {
  private baseUrl = '/api/profile-system/pvt/profiles'

  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, {
      ...options,
      headers: {
        ...options?.headers,
        VtexIdClientAutCookie: context.authToken,
      },
      timeout: FIVE_SECONDS_MS,
    })
  }

  public getProfileInfo = (user: CurrentProfile, customFields?: string) =>
    this.get<Profile>(
      `${this.baseUrl}/${this.getUserIdentification(user)}/personalData`,
      {
        metric: 'profile-system-getProfileInfo',
        params: {
          extraFields: customFields,
        },
      }
    )

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch<AxiosError>(statusToError)

  private getUserIdentification = (user: CurrentProfile) =>
    user.userId ?? encodeURIComponent(user.email)
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/clients/externalPriceMock.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClient } from '@vtex/api'

import type { ExternalPriceClient, } from './externalPrice'
import type { InputItem } from '../typings/externalPrice'

export default class ExternalPrice extends IOClient implements ExternalPriceClient {
  public async getPrice(item: InputItem): Promise<number | undefined> {
    return Number(item.skuId) * 10
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/clients/index.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from '@vtex/api'

import ExternalPrice from './externalPriceMock'
import PricingClient from './pricingClient'
import { ProfileSystemClient } from './profileSystemClient'

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {
  public get externalPrice() {
    return this.getOrSet('externalPrice', ExternalPrice)
  }

  public get pricing() {
    return this.getOrSet('pricing', PricingClient)
  }

  public get profileSystem() {
    return this.getOrSet('profileSystem', ProfileSystemClient)
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/clients/pricingClient.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext } from '@vtex/api'
import { ExternalClient } from '@vtex/api'

import type { Quote } from '../typings/externalPrice'

export default class PricingClient extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(`http://${context.account}.myvtex.com/api/pricing`, context, {
      ...options,
      headers: {
        ...options?.headers,
        Accept: 'application/vnd.vtex.pricing.v3+json',
        'Cache-Control': 'no-cache',
        'Content-Type': 'application/json',
        'X-Vtex-Use-Https': 'true',
        VtexIdclientAutcookie: context.authToken ?? '',
      },
    })
  }

  public getPrice(skuId: string | number, priceTable: string | undefined) {
    return this.http.get<Quote>(`/prices/${skuId}/computed/${priceTable}`)
  }
}

export interface Context {
  categories: Record<string, never>
  brands: Record<string, never>
  markupRange: null
  dateRange: null
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/typings/profileSystem.d.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Address {
  id?: string
  userId?: string
  receiverName?: string
  complement?: string
  neighborhood?: string
  country?: string
  state?: string
  number?: string
  street?: string
  postalCode?: string
  city?: string
  reference?: string
  addressName?: string
  addressType?: string
  geoCoordinates?: string
}

export interface Profile {
  firstName?: string
  lastName?: string
  profilePicture?: string
  email: string
  document?: string
  userId?: string
  birthDate?: string
  gender?: string
  homePhone?: string
  businessPhone?: string
  isCorporate?: boolean
  corporateName?: string
  corporateDocument?: string
  stateRegistration?: string
  approved?: boolean
  addresses?: Address[]
  tradeName?: string
  payments?: PaymentProfile[]
  customFields?: ProfileCustomField[]
  priceTables: string
}

interface CurrentProfile {
  email: string
  userId?: string
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/typings/staleFromVBaseWhileRevalidate.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface StaleRevalidateData<T> {
  ttl: Date
  data: T
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/typings/externalPrice.d.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Maybe } from '@vtex/api'

export type Quote = {
  skuId: string
  listPrice: number
  costPrice: number
  sellingPrice: number
  priceValidUntil: string
  tradePolicyId?: string
}

export type InputItem = {
  skuId: string
  quantity: number
  index: number
}

export type ExternalPriceInput = {
  context: {
    email: string
  }
  item: InputItem
}

export type ExternalPriceResponse = {
  message: string
  item: {
    index: number
    skuId: string
    price: number
    costPrice: Maybe<number>
    listPrice: Maybe<number>
    priceValidUntil: string
    priceTables: string
    sellingPrice: Maybe<number>
    tradePolicyId: Maybe<string>
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/typings/global.d.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { RecorderState, ServiceContext } from '@vtex/api'
import type { Clients } from '../clients'
import type { Quote, ExternalPriceInput } from './externalPrice'

declare global {
  type Context<TState extends State = State> = ServiceContext<Clients, TState>

  interface State extends RecorderState {
    quote?: Quote
    body: ExternalPriceInput
    pricingAccount: string
  }

  type Next = () => Promise<void>
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/utils/staleFromVBaseWhileRevalidate.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable max-params */
import { createHash } from 'crypto'

import type { VBase } from '@vtex/api'

import type { StaleRevalidateData } from '../typings/staleFromVBaseWhileRevalidate'

const getTTL = (expirationInMinutes?: number) => {
  const ttl = new Date()

  ttl.setMinutes(ttl.getMinutes() + (expirationInMinutes ?? 30))

  return ttl
}

const revalidate = async <T>(
  vbase: VBase,
  bucket: string,
  filePath: string,
  endDate: Date,
  validateFunction: (params?: unknown) => Promise<T>,
  params?: unknown
) => {
  const data = await validateFunction(params)
  const revalidatedData = { data, ttl: endDate }

  vbase
    .saveJSON<StaleRevalidateData<T>>(bucket, filePath, revalidatedData)
    .catch()

  return data
}

const normalizedJSONFile = (filePath: string) =>
  `${createHash('md5').update(filePath).digest('hex')}.json`

export const staleFromVBaseWhileRevalidate = async <T>(
  vbase: VBase,
  bucket: string,
  filePath: string,
  validateFunction: (params?: any) => Promise<T>,
  params?: unknown,
  options?: { expirationInMinutes?: number }
): Promise<T> => {
  const normalizedFilePath = normalizedJSONFile(filePath)
  const cachedData = (await vbase
    .getJSON<StaleRevalidateData<T>>(bucket, normalizedFilePath, true)
    .catch()) as StaleRevalidateData<T>

  if (!cachedData) {
    const endDate = getTTL(options?.expirationInMinutes)

    // eslint-disable-next-line no-return-await
    return await revalidate<T>(
      vbase,
      bucket,
      normalizedFilePath,
      endDate,
      validateFunction,
      params
    )
  }

  const { data, ttl } = cachedData as StaleRevalidateData<T>

  const today = new Date()
  const ttlDate = new Date(ttl)

  if (today < ttlDate) {
    return data
  }

  const endDate = getTTL(options?.expirationInMinutes)

  revalidate<T>(
    vbase,
    bucket,
    normalizedFilePath,
    endDate,
    validateFunction,
    params
  )

  return data
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/utils/statusCodeUtils.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { AxiosError } from 'axios'
import { AuthenticationError, ForbiddenError, UserInputError } from '@vtex/api'

export function isNotSuccessCode(statusCode: number) {
  return statusCode < 200 || statusCode > 299
}

export const statusToError = (e: AxiosError) => {
  if (!e.response) throw e

  const { response } = e as AxiosError

  if (!response?.status) throw e

  const { status } = response

  if (status === 401) throw new AuthenticationError(e)

  if (status === 403) throw new ForbiddenError(e)

  if (status === 400) throw new UserInputError(e)

  throw e
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/__tests__/simple.test.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
// You can import your files here for testing them
//
// More info: https://github.com/sapegin/jest-cheat-sheet

describe('simpleTest', () => {
  it('one test case', async () => {
    expect(0.2 + 0.1).not.toBe(0.3)
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/handlers/formatResponse.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { ExternalPriceResponse, Quote } from '../typings/externalPrice'

export async function formatResponse(ctx: Context) {
  const { state, body } = ctx
  const quote = state.quote as Quote

  // Checkout service expect prices coming from Pricing Service to be multiplied by 100
  const response: ExternalPriceResponse = {
    message: 'Price quoted successfully.',
    item: {
      price: quote.sellingPrice * 100,
      priceTables: quote.tradePolicyId ?? '',
      index: body.item.index,
      skuId: quote.skuId,
      listPrice: quote.listPrice * 100,
      costPrice: quote.costPrice * 100,
      sellingPrice: quote.sellingPrice * 100,
      priceValidUntil: quote.priceValidUntil,
      tradePolicyId: quote.tradePolicyId,
    },
  }

  ctx.body = response
  ctx.status = 200
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/handlers/validate.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { json } from 'co-body'
import { UserInputError } from '@vtex/api'

export async function validate(ctx: Context, next: Next) {
  ctx.body = await json(ctx.req)

  const { item } = ctx.body

  if (!item?.skuId) {
    const error = new UserInputError('Item.SkuId is required')

    ctx.vtex.logger.error({
      message: 'ExternalPriceApp_Validate',
      error,
    })

    throw error
  }

  await next()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/handlers/fetchPriceTable.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Profile } from '../typings/profileSystem'
import { staleFromVBaseWhileRevalidate } from '../utils/staleFromVBaseWhileRevalidate'

export async function fetchPriceTables(ctx: Context) {
  const { clients, body } = ctx

  const { profileSystem } = clients

  let currentProfile: Profile | null = null

  const getPriceTable = async (params: { email: string }) => {
    const { email } = params

    return (await profileSystem.getProfileInfo(
      {
        email,
        userId: email,
      },
      'priceTables'
    )) as Profile
  }

  if (body.context.email) {
    try {
      currentProfile = await staleFromVBaseWhileRevalidate<Profile>(
        clients.vbase,
        'user-price-tables',
        body.context.email,
        getPriceTable,
        { email: body.context.email as string },
        { expirationInMinutes: 60 }
      )
    } catch (e) {
      ctx.vtex.logger.warn({
        message: 'ExternalPriceApp_FetchPriceTables_NoProfile',
        e,
      })

      throw e
    }
  }

  return currentProfile
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of ffm-segment-prices-node-template/node/handlers/fetchPrice.ts from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { NotFoundError } from '@vtex/api'

import type { Profile } from '../typings/profileSystem'
import { fetchPriceTables } from './fetchPriceTable'

export async function fetchPrice(ctx: Context, next: Next) {
  const { clients, body } = ctx

  const { pricing } = clients

  const currentProfile: Profile | null = await fetchPriceTables(ctx)

  const price = await pricing.getPrice(
    body.item.skuId,
    currentProfile?.priceTables ?? '1'
  )

  if (!price) {
    const error = new NotFoundError('Price not found')

    ctx.vtex.logger.error({
      message: 'ExternalPriceApp_FetchPrice_Noprice',
      error,
    })

    throw error
  }

  ctx.state.quote = {
    ...price,
    skuId: body.item.skuId,
  }

  await next()
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/sl.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Pojavila se je napaka pri povezavi s sistmeom, poskusite ponovno naložiti stran.",
  "alert.unauthenticated": "Mora biti preverjeni, da lahko nadaljujete s tem dejanjem.",
  "alert.reload": "Ponovno nalaganje",
  "alert.unknownError": "Pojavila se je napaka, poskusite znova.",
  "commons.back": "Vrnitev",
  "progressBar.package.progress": "Stanje paketa",
  "progressBar.order.status": "Stanje naročila"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/nl.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Er was een fout in de verbinding met het systeem, probeer de pagina opnieuw te laden.",
  "alert.unauthenticated": "U moet worden geverifieerd om door te gaan met deze actie.",
  "alert.reload": "Herladen",
  "alert.unknownError": "Er is een fout opgetreden. Probeer het nog eens.",
  "commons.back": "Keer terug",
  "progressBar.package.progress": "Pakketstatus",
  "progressBar.order.status": "Bestelstatus"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/de.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Es gab einen Fehler beim Verbindungsaufbau mit dem System, versuchen Sie, die Seite neu zu laden.",
  "alert.unauthenticated": "Sie müssen authentifiziert werden, um mit dieser Aktion fortzufahren.",
  "alert.reload": "Neu laden",
  "alert.unknownError": "Es ist ein Fehler aufgetreten, versuchen Sie es erneut.",
  "commons.back": "Return",
  "progressBar.package.progress": "Status des Pakets",
  "progressBar.order.status": "Bestellstatus"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/ru.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Возникала ошибка соединения с системой, попробуйте перезагрузить страницу.",
  "alert.unauthenticated": "Вы должны авторизоваться, чтобы продолжить это действие.",
  "alert.reload": "Перезагрузить",
  "alert.unknownError": "Возникла ошибка, попробуйте снова.",
  "commons.back": "Вернуться",
  "progressBar.package.progress": "Статус отправления",
  "progressBar.order.status": "Статус заказа"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/pl.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Wystąpił błąd podczas łączenia z systemem, spróbuj przeładować stronę.",
  "alert.unauthenticated": "Musisz być uwierzytelniony, aby kontynuować to działanie.",
  "alert.reload": "Przeładuj",
  "alert.unknownError": "Wystąpił błąd, spróbuj ponownie.",
  "commons.back": "Powrót",
  "progressBar.package.progress": "Status paczki",
  "progressBar.order.status": "Status zamówienia"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/uk.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Помилка підключення до системи, спробуйте перезавантажити сторінку.",
  "alert.unauthenticated": "Щоб виконати цю дію, вам потрібно пройти автентифікацію.",
  "alert.reload": "Перезавантаження",
  "alert.unknownError": "Сталася помилка, спробуйте знову.",
  "commons.back": "Повернутися",
  "progressBar.package.progress": "Статус посилки",
  "progressBar.order.status": "Статус замовлення"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/fi.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Virhe muodostettaessa yhteyttä järjestelmään. Kokeile ladata sivu uudelleen.",
  "alert.unauthenticated": "Sinut täytyy todentaa, jotta voit suorittaa tämän toiminnon.",
  "alert.reload": "Lataa uudelleen",
  "alert.unknownError": "Tapahtui virhe, yritä uudelleen.",
  "commons.back": "Palaa",
  "progressBar.package.progress": "Paketin tila",
  "progressBar.order.status": "Tilauksen tila"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/sk.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Pri pripájaní k systému sa vyskytla chyba, skúste stránku načítať znova.",
  "alert.unauthenticated": "Aby ste mohli pokračovať v tejto akcii, musíte byť overení.",
  "alert.reload": "Znova načítať",
  "alert.unknownError": "Vyskytla sa chyba, skúste to znova.",
  "commons.back": "Vrátiť sa",
  "progressBar.package.progress": "Stav balíka",
  "progressBar.order.status": "Stav objednávky"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/pt.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Houve um erro de comunicação com o sistema, tente recarregar a página.",
  "alert.unauthenticated": "Você precisa se identificar para realizar esta ação.",
  "alert.reload": "Recarregar",
  "alert.unknownError": "Ocorreu um erro, tente novamente.",
  "commons.back": "Voltar",
  "progressBar.package.progress": "Status do pacote",
  "progressBar.order.status": "Status do pedido"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/en.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "There was an error connecting with the system, try reloading the page.",
  "alert.unauthenticated": "You need to be authenticated to proceed with this action.",
  "alert.reload": "Reload",
  "alert.unknownError": "An error occurred, try again.",
  "commons.back": "Return",
  "progressBar.package.progress": "Package status",
  "progressBar.order.status": "Order status"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/it.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Si è verificato un errore nel collegamento con il sistema, prova a ricaricare la pagina.",
  "alert.unauthenticated": "Devi essere autenticato per procedere con quest'azione.",
  "alert.reload": "Ricarica",
  "alert.unknownError": "Si è verificato un errore, si prega di riprovare.",
  "commons.back": "Indietro",
  "progressBar.package.progress": "Stato del pacco",
  "progressBar.order.status": "Stato dell'ordine"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/fr.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Une erreur de connexion au système s'est produite. Veuillez essayer de recharger la page.",
  "alert.unauthenticated": "Vous devez être authentifié pour poursuivre cette action.",
  "alert.reload": "Recharger",
  "alert.unknownError": "Une erreur est survenue, veuillez réessayer.",
  "commons.back": "Retour",
  "progressBar.package.progress": "Statut du colis",
  "progressBar.order.status": "Statut de la commande"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/el.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Προέκυψε σφάλμα στη σύνδεση με το σύστημα, δοκιμάστε να ξαναφορτώσετε τη σελίδα.",
  "alert.unauthenticated": "Πρέπει να επαληθευτεί η ταυτότητά σας για να προχωρήσετε σε αυτή την ενέργεια.",
  "alert.reload": "Επαναφόρτωση",
  "alert.unknownError": "Προέκυψε σφάλμα, δοκιμάστε ξανά.",
  "commons.back": "Επιστροφή",
  "progressBar.package.progress": "Κατάσταση συσκευασίας",
  "progressBar.order.status": "Κατάσταση παραγγελίας"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/bg.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Възникна грешка при свързване със системата, опитайте да презаредите страницата.",
  "alert.unauthenticated": "Трябва да се удостоверите, за да продължите с това действие.",
  "alert.reload": "Презареждане",
  "alert.unknownError": "Възникна грешка, опитайте отново.",
  "commons.back": "Връщане",
  "progressBar.package.progress": "Статус на пакета",
  "progressBar.order.status": "Статус на поръчката"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/ro.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "A apărut o eroare la conectarea cu sistemul, încearcă să reîncarci pagina.",
  "alert.unauthenticated": "Trebuie să fii autentificat pentru a realiza această acțiune.",
  "alert.reload": "Reîncarcă",
  "alert.unknownError": "A apărut o eroare, încearcă din nou.",
  "commons.back": "Întoarce-te",
  "progressBar.package.progress": "Statusul pachetului",
  "progressBar.order.status": "Status comandă"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/ca.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "S'ha produït un error en connectar amb el sistema. Proveu de recarregar la pàgina.",
  "alert.unauthenticated": "Se us ha d'autenticar per poder continuar amb aquesta acció.",
  "alert.reload": "Recarrega",
  "alert.unknownError": "S'ha produït un error. Torneu-ho a provar.",
  "commons.back": "Torna",
  "progressBar.package.progress": "Estat del paquet",
  "progressBar.order.status": "Estat de la comanda"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/context.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "alert.connectionError",
  "alert.unauthenticated": "alert.unauthenticated",
  "alert.reload": "alert.reload",
  "alert.unknownError": "alert.unknownError",
  "commons.back": "commons.back",
  "progressBar.package.progress": "progressBar.package.progress",
  "progressBar.order.status": "progressBar.order.status"
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/ko.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "시스템에 연결하는 동안 오류가 발생했습니다. 페이지를 다시 로딩하십시오.",
  "alert.unauthenticated": "이 작업을 수행하려면 인증을 받아야 합니다.",
  "alert.reload": "다시 로딩",
  "alert.unknownError": "오류가 발생했습니다. 다시 시도하십시오.",
  "commons.back": "반품",
  "progressBar.package.progress": "패키지 상태",
  "progressBar.order.status": "주문 상태"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/da.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Der opstod en fejl under forbindelse med systemet, prøv at indlæse siden igen.",
  "alert.unauthenticated": "Du skal godkendes for at fortsætte med denne handling.",
  "alert.reload": "Genindlæs",
  "alert.unknownError": "Der opstod en fejl, prøv igen.",
  "commons.back": "Gå tilbage",
  "progressBar.package.progress": "Pakkestatus",
  "progressBar.order.status": "Ordrestatus"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/sv.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Det uppstod ett fel vid anslutningen till systemet, försök att ladda om sidan igen.",
  "alert.unauthenticated": "Du måste verifieras för att fortsätta med den här åtgärden.",
  "alert.reload": "Ladda om",
  "alert.unknownError": "Ett fel uppstod, försök igen.",
  "commons.back": "Återgå",
  "progressBar.package.progress": "Förpackningsstatus",
  "progressBar.order.status": "Beställningsstatus"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/messages/es.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "alert.connectionError": "Hubo un error al conectar con el sistema, intente cargar la página nuevamente.",
  "alert.unauthenticated": "Debe estar autenticado para continuar con esta acción.",
  "alert.reload": "Recargar",
  "alert.unknownError": "Se produjo un error, inténtalo de nuevo.",
  "commons.back": "Atrás",
  "progressBar.package.progress": "Estado del paquete",
  "progressBar.order.status": "Estado del pedido"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/docs/README.md from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```markdown
# 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:

```js
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>`.

```jsx
<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.

```jsx
<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.

```jsx
<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.

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/SkeletonPiece.tsx from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import './style.global.css'

import React, { FunctionComponent } from 'react'

const SkeletonPiece: FunctionComponent<Props> = ({ width, size }) => (
  <div
    className={`bg-muted-5 w-${width} ${
      size ? `pa${size}` : 'h-100'
    } relative overflow-hidden`}
  >
    <div className="shimmer" />
  </div>
)

SkeletonPiece.defaultProps = {
  width: '100',
}

interface Props {
  width?:
    | '10'
    | '20'
    | '25'
    | '30'
    | '33'
    | '34'
    | '40'
    | '50'
    | '60'
    | '70'
    | '75'
    | '80'
    | '90'
    | '100'
    | 'third'
    | 'two-thirds'
  size?: '0' | '1' | '2' | '3' | '4' | '5' | '6'
}

export default SkeletonPiece

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/SkeletonBox.tsx from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

import SkeletonPiece from './SkeletonPiece'

const SkeletonBox: FunctionComponent<Props> = ({
  children,
  maxWidthStep,
  shouldAllowGrowing,
  shouldShowLowerButton,
}) => {
  const widthClass = maxWidthStep ? `mw${maxWidthStep}-ns` : ''
  const flexClass = shouldAllowGrowing ? 'flex-auto' : 'flex-none'

  return (
    <div className={`pb5 pr5-ns ${flexClass} ${widthClass}`}>
      <article className="ba bw1 b--muted-5 br2 h-100 flex flex-column justify-between">
        <main className="ph7 pv6">{children}</main>
        {shouldShowLowerButton && (
          <footer className="flex justify-end ph7 pb6 pt3">
            <SkeletonPiece width="50" size="4" />
          </footer>
        )}
      </article>
    </div>
  )
}

SkeletonBox.defaultProps = {
  shouldAllowGrowing: false,
}

interface Props {
  maxWidthStep?: number
  shouldAllowGrowing?: boolean
  shouldShowLowerButton?: boolean
}

export default SkeletonBox

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/GenericError.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import GenericError from './components/GenericError'

export default GenericError

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/style.global.css from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```css
/* Skeleton animation */
@keyframes shimmer-anim {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(50%, 0, 0);
  }
}

.shimmer {
  width: 200%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  background-size: 50% 100%;
  animation: shimmer-anim 0.7s linear infinite;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/Router.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import * as ReactRouterDom from 'react-router-dom'

/*
  IMPORTANT: READ BEFORE MAKING ANY EDITIONS IN THIS FILE

  This file's goal is to make the use of react-router-dom
  unified through all the apps within the My Account ecosystem.
  Delete this if a better solution for the problem of
  having multiple versions of the router comes up.
*/

export default ReactRouterDom

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/package.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit",
    "lint:locales": "intl-equalizer",
    "test": "vtex-test-tools test",
    "test:watch": "vtex-test-tools test:watch"
  },
  "dependencies": {
    "lodash": "^4.17.11",
    "react": "^16.3.2",
    "react-intl": "^2.4.0",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "^1.0.4",
    "recompose": "^0.30.0"
  },
  "devDependencies": {
    "@types/graphql": "^14.0.7",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.11.3",
    "@types/react": "^16.8.8",
    "@types/react-dates": "^17.1.5",
    "@types/react-intl": "^2.3.17",
    "@types/react-outside-click-handler": "^1.2.0",
    "@types/recompose": "^0.30.5",
    "@vtex/delivery-packages": "^2.17.0",
    "@vtex/test-tools": "^3.1.0",
    "apollo-client": "^2.5.1",
    "typescript": "3.9.7"
  },
  "version": "0.16.1"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/ContentWrapper.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ContentWrapper from './components/ContentWrapper'

export default ContentWrapper

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/BaseLoading.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import BaseLoading from './components/BaseLoading'

export default BaseLoading

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/utils.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import reduce from 'lodash/reduce'
import { FormattedMessage } from 'react-intl'

function estimateShipping(deliveryPackage) {
  const {
    shippingEstimate: slaShippingEstimate,
    shippingEstimateDate: slaShippingEstimateDate,
  } = deliveryPackage

  if (!slaShippingEstimate) {
    return slaShippingEstimateDate != null
      ? {
          date: slaShippingEstimateDate,
        }
      : null
  }

  const shippingEstimateParts = slaShippingEstimate.match(/\d+|[a-zA-Z]+/g)

  // There's a bug in the API that makes shippingEstimate not to have a unit.
  // This is the case this if is fixing
  if (!shippingEstimateParts || shippingEstimateParts.length <= 1) {
    return {
      date: slaShippingEstimateDate,
    }
  }

  const estimateValue = shippingEstimateParts[0]
  const estimateType = shippingEstimateParts[1]

  if (slaShippingEstimateDate) {
    const isEstimateInHoursOrMinutes =
      estimateType.indexOf('h') !== -1 || estimateType.indexOf('m') !== -1

    return {
      date: slaShippingEstimateDate,
      isEstimateInHoursOrMinutes,
    }
  }

  const estimateValueInt = parseInt(estimateValue)

  const label = (
    <FormattedMessage
      id={`order.shippingEstimate.${estimateType}`}
      values={{ timeAmount: estimateValueInt }}
    />
  )

  return {
    unit: estimateValueInt,
    type: estimateType,
    label: label,
  }
}

function reduceBundleItems(items) {
  return reduce(
    items,
    (acc, item) => {
      acc = acc.concat(item)
      acc = acc.concat(...checkForAttachments(item))

      if (item.bundleItems && item.bundleItems.length > 0) {
        acc = acc.concat(
          item.bundleItems.map((bundleItem) =>
            addBundleItemFlagAndParentItemQuantity(item, bundleItem)
          )
        )
        acc = acc.concat(...item.bundleItems.map(checkForAttachments))
      }

      return acc
    },
    []
  )
}

function fixImageUrl(imageUrl, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT) {
  return changeImageUrlSize(
    replaceHttpToRelativeProtocol(cleanImageUrl(imageUrl)),
    width,
    height
  )
}

export default { fixImageUrl, reduceBundleItems, estimateShipping }

const DEFAULT_WIDTH = 50
const DEFAULT_HEIGHT = 50
const DEFAULT_HDF = 1

const baseUrlRegex = new RegExp(/.+ids\/(\d+)(?:-(\d+)-(\d+)|)\//)
const sizeRegex = new RegExp(/-(\d+)-(\d+)/)

function changeImageUrlSize(
  imageUrl,
  width,
  height,
  highDensityFactor = DEFAULT_HDF
) {
  // imageUrl example http://omniera.vteximg.com.br/arquivos/ids/155401-135-135/CAN-09-04--1-.jpg
  if (!imageUrl || !width || !height) return undefined
  const widthCalc = width * highDensityFactor
  const heightCalc = height * highDensityFactor
  if (imageUrl.slice(-1) !== '/') {
    return `${imageUrl}?width=${widthCalc}&height=${heightCalc}&aspect=true`
  }
  const resizedImageUrl = imageUrl.slice(0, -1) // Remove last "/"
  return `${resizedImageUrl}-${widthCalc}-${heightCalc}`
}

function replaceHttpToRelativeProtocol(url) {
  if (!url) {
    return undefined
  }
  return url.replace(/https:\/\/|http:\/\//, '//')
}

function cleanImageUrl(imageUrl) {
  let resizedImageUrl = imageUrl
  const result = baseUrlRegex.exec(imageUrl)
  if (result && result.length > 0) {
    if (
      result.length === 4 &&
      result[2] !== undefined &&
      result[3] !== undefined
    ) {
      resizedImageUrl = result[0].replace(sizeRegex, '')
    } else {
      resizedImageUrl = result[0]
    }
    return resizedImageUrl
  }
  return resizedImageUrl
}

function checkForAttachments(item) {
  if (item.attachments && item.attachments.length > 0) {
    return item.attachments.map(addAttachmentFlag)
  }

  return []
}

function addAttachmentFlag(attachment) {
  return {
    ...attachment,
    isAttachment: true,
  }
}

function addBundleItemFlagAndParentItemQuantity(product, bundleItem) {
  return {
    ...bundleItem,
    parentItemQuantity: product.quantity,
    isBundleItem: true,
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/ProgressBarBundle.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import {
  progressBarStates,
  packageProgressBarStates,
} from './components/ProgressBar/constants'
import {
  generatePackageProgressBarStates,
  generateProgressBarStates,
  getCurrentProgressBarState
} from './components/ProgressBar/utils'
import OrderStatus from './components/ProgressBar/OrderStatus'
import ProgressBar from './components/ProgressBar/ProgressBar'
import ProgressBarSection from './components/ProgressBar/ProgressBarSection'
import PackageStatus from './components/ProgressBar/PackageProgressBar/PackageStatus'
import PackageProgressBar from './components/ProgressBar/PackageProgressBar/PackageProgressBar'
import PackageProgressBarSection from './components/ProgressBar/PackageProgressBar/PackageProgressBarSection'

const constants = {
  progressBarStates,
  packageProgressBarStates,
}

const utils = {
  generatePackageProgressBarStates,
  generateProgressBarStates,
  getCurrentProgressBarState
}

export default {
  constants,
  utils,
  OrderStatus,
  ProgressBar,
  ProgressBarSection,
  PackageProgressBar,
  PackageProgressBarSection,
  PackageStatus,
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/mocks/DeliveredOrder.ts from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  orderId: '811912939493-01',
  sequence: '1306300',
  marketplaceOrderId: '',
  marketplaceServicesEndpoint:
    'http://portal.vtexcommerce.com.br/api/oms?an=qamarketplace',
  sellerOrderId: '00-811912939493-01',
  origin: 'Marketplace',
  affiliateId: '',
  salesChannel: '1',
  merchantName: null,
  status: 'invoiced',
  statusDescription: 'Faturado',
  value: 10163,
  creationDate: '2018-02-19T14:49:02.6223868+00:00',
  lastChange: '2018-02-19T19:22:14.2313636+00:00',
  orderGroup: '811912939493',
  totals: [
    {
      id: 'Items',
      name: 'Total dos Itens',
      value: 10064,
    },
    {
      id: 'Discounts',
      name: 'Total dos Descontos',
      value: -1500,
    },
    {
      id: 'Shipping',
      name: 'Total do Frete',
      value: 1599,
    },
    {
      id: 'Tax',
      name: 'Total da Taxa',
      value: 0,
    },
  ],
  items: [
    {
      uniqueId: '8711D11DCD3341678013164883F07931',
      id: '15',
      productId: '4',
      ean: 'produtohomologação',
      lockId: '00-811912939493-01',
      itemAttachment: {
        content: {},
        name: null,
      },
      attachments: [],
      quantity: 1,
      seller: '1',
      name: 'Novalgina',
      refId: 'produtohomologação',
      price: 5764,
      listPrice: 8000,
      manualPrice: null,
      priceTags: [
        {
          name:
            'discount@price-e518d70e-6da2-47bb-9e1a-6540a1a214c6#1c2d2b41-b7ff-4157-9d4c-2cce8eb508f5',
          value: -1500,
          isPercentual: false,
          identifier: 'e518d70e-6da2-47bb-9e1a-6540a1a214c6',
          rawValue: -15.0,
        },
      ],
      imageUrl:
        'http://qamarketplace.vteximg.com.br/arquivos/ids/155400-55-55/Novalgina.jpg?v=635985172600570000',
      detailUrl: '/novalgina/p',
      components: [],
      bundleItems: [],
      params: [],
      offerings: [],
      sellerSku: '15',
      priceValidUntil: null,
      commission: 0,
      tax: 0,
      preSaleDate: null,
      additionalInfo: {
        brandName: 'Marca Exemplo',
        brandId: '2000000',
        categoriesIds: '/4/5/',
        productClusterId: '135',
        commercialConditionId: '1',
        dimension: {
          cubicweight: 0.1667,
          height: 10.0,
          length: 10.0,
          weight: 10.0,
          width: 10.0,
        },
        offeringInfo: null,
        offeringType: null,
        offeringTypeId: null,
      },
      measurementUnit: 'un',
      unitMultiplier: 1.0,
      sellingPrice: 4264,
      isGift: false,
      shippingPrice: null,
      rewardValue: 0,
      freightCommission: 0,
    },
    {
      uniqueId: 'F41B33B78B2244BFBB7EE7E453282A52',
      id: '111',
      productId: '96',
      ean: '7896292001404',
      lockId: '00-811912939493-01',
      itemAttachment: {
        content: {},
        name: null,
      },
      attachments: [],
      quantity: 1,
      seller: '1',
      name: 'Açúcar Light Magro 500g',
      refId: '156062',
      price: 3300,
      listPrice: 1000,
      manualPrice: null,
      priceTags: [],
      imageUrl:
        'http://qamarketplace.vteximg.com.br/arquivos/ids/155463-55-55/mambo.png?v=636053048039670000',
      detailUrl: '/acucar-light-magro-500g/p',
      components: [],
      bundleItems: [],
      params: [],
      offerings: [],
      sellerSku: '111',
      priceValidUntil: null,
      commission: 0,
      tax: 0,
      preSaleDate: null,
      additionalInfo: {
        brandName: 'Mambo',
        brandId: '2000003',
        categoriesIds: '/9/10/',
        productClusterId: '',
        commercialConditionId: '1',
        dimension: {
          cubicweight: 0.0002,
          height: 1.0,
          length: 1.0,
          weight: 1.0,
          width: 1.0,
        },
        offeringInfo: null,
        offeringType: null,
        offeringTypeId: null,
      },
      measurementUnit: 'un',
      unitMultiplier: 1.0,
      sellingPrice: 3300,
      isGift: false,
      shippingPrice: null,
      rewardValue: 0,
      freightCommission: 0,
    },
    {
      uniqueId: '06901310CA6C4794A9B57EE8D5886372',
      id: '79',
      productId: '64',
      ean: '7896292001084',
      lockId: '00-811912939493-01',
      itemAttachment: {
        content: {},
        name: null,
      },
      attachments: [],
      quantity: 1,
      seller: '1',
      name: 'Achocolatado Diet sem Lactose New Choco 210g',
      refId: '208754',
      price: 1000,
      listPrice: 1000,
      manualPrice: null,
      priceTags: [],
      imageUrl:
        'http://qamarketplace.vteximg.com.br/arquivos/ids/155431-55-55/mambo.png?v=636053047861800000',
      detailUrl: '/achocolatado-diet-sem-lactose-new-choco-210g/p',
      components: [],
      bundleItems: [],
      params: [],
      offerings: [],
      sellerSku: '79',
      priceValidUntil: null,
      commission: 0,
      tax: 0,
      preSaleDate: null,
      additionalInfo: {
        brandName: 'Mambo',
        brandId: '2000003',
        categoriesIds: '/9/10/',
        productClusterId: '',
        commercialConditionId: '1',
        dimension: {
          cubicweight: 0.0002,
          height: 1.0,
          length: 1.0,
          weight: 1.0,
          width: 1.0,
        },
        offeringInfo: null,
        offeringType: null,
        offeringTypeId: null,
      },
      measurementUnit: 'un',
      unitMultiplier: 1.0,
      sellingPrice: 1000,
      isGift: false,
      shippingPrice: null,
      rewardValue: 0,
      freightCommission: 0,
    },
  ],
  marketplaceItems: [],
  clientProfileData: {
    id: 'clientProfileData',
    email: 'breno@mailinator.com',
    firstName: 'Breno',
    lastName: 'Calazans',
    documentType: 'cpf',
    document: '01239526113',
    phone: '+552222222222',
    corporateName: null,
    tradeName: null,
    corporateDocument: null,
    stateInscription: null,
    corporatePhone: null,
    isCorporate: false,
    userProfileId: '2f217ab3-d389-49a8-88e3-72bf372a4343',
    customerClass: null,
  },
  giftRegistryData: null,
  marketingData: null,
  ratesAndBenefitsData: {
    id: 'ratesAndBenefitsData',
    rateAndBenefitsIdentifiers: [
      {
        description: null,
        featured: false,
        id: 'e518d70e-6da2-47bb-9e1a-6540a1a214c6',
        name: 'Desconto no Sku 15',
        matchedParameters: {
          'product@CatalogSystem': '4|inclusive',
        },
      },
    ],
  },
  shippingData: {
    id: 'shippingData',
    address: {
      addressType: 'residential',
      receiverName: 'auto auto',
      addressId: '-1456253174642',
      postalCode: '22251-030',
      city: 'Rio de Janeiro',
      state: 'RJ',
      country: 'BRA',
      street: 'Rua Assunção',
      number: '2',
      neighborhood: 'Botafogo',
      complement: null,
      reference: null,
      geoCoordinates: [],
    },
    logisticsInfo: [
      {
        itemIndex: 0,
        selectedSla: 'Normal',
        lockTTL: '8d',
        price: 1454,
        listPrice: 1454,
        sellingPrice: 1454,
        deliveryWindow: null,
        deliveryCompany: 'Transportadora',
        shippingEstimate: '7d',
        shippingEstimateDate: '2018-02-26T14:48:41.6499371+00:00',
        slas: [
          {
            id: 'Normal',
            name: 'Normal',
            shippingEstimate: '7d',
            deliveryWindow: null,
            price: 1454,
            deliveryChannel: 'delivery',
            pickupStoreInfo: {
              additionalInfo: null,
              address: null,
              dockId: null,
              friendlyName: null,
              isPickupStore: false,
            },
          },
        ],
        shipsTo: ['BRA'],
        deliveryIds: [
          {
            courierId: '1',
            courierName: 'Transportadora',
            dockId: '1',
            quantity: 1,
            warehouseId: '169cdbc',
          },
        ],
        deliveryChannel: 'delivery',
        pickupStoreInfo: {
          additionalInfo: null,
          address: null,
          dockId: null,
          friendlyName: null,
          isPickupStore: false,
        },
        addressId: '-1456253174642',
      },
      {
        itemIndex: 1,
        selectedSla: 'PAC',
        lockTTL: '8d',
        price: 0,
        listPrice: 0,
        sellingPrice: 0,
        deliveryWindow: null,
        deliveryCompany: '[Teste QA] Nao Mexer',
        shippingEstimate: '3bd',
        shippingEstimateDate: '2018-02-22T14:48:41.6499371+00:00',
        slas: [
          {
            id: 'PAC',
            name: 'PAC',
            shippingEstimate: '3bd',
            deliveryWindow: null,
            price: 0,
            deliveryChannel: 'delivery',
            pickupStoreInfo: {
              additionalInfo: null,
              address: null,
              dockId: null,
              friendlyName: null,
              isPickupStore: false,
            },
          },
        ],
        shipsTo: ['BRA'],
        deliveryIds: [
          {
            courierId: '155ad08',
            courierName: '[Teste QA] Nao Mexer',
            dockId: '1125a08',
            quantity: 1,
            warehouseId: '1f995ee',
          },
        ],
        deliveryChannel: 'delivery',
        pickupStoreInfo: {
          additionalInfo: null,
          address: null,
          dockId: null,
          friendlyName: null,
          isPickupStore: false,
        },
        addressId: '-1456253174642',
      },
      {
        itemIndex: 2,
        selectedSla: 'Normal',
        lockTTL: '8d',
        price: 145,
        listPrice: 145,
        sellingPrice: 145,
        deliveryWindow: null,
        deliveryCompany: 'Transportadora',
        shippingEstimate: '7d',
        shippingEstimateDate: '2018-02-26T14:48:41.6499371+00:00',
        slas: [
          {
            id: 'Normal',
            name: 'Normal',
            shippingEstimate: '7d',
            deliveryWindow: null,
            price: 145,
            deliveryChannel: 'delivery',
            pickupStoreInfo: {
              additionalInfo: null,
              address: null,
              dockId: null,
              friendlyName: null,
              isPickupStore: false,
            },
          },
        ],
        shipsTo: ['BRA'],
        deliveryIds: [
          {
            courierId: '1',
            courierName: 'Transportadora',
            dockId: '1',
            quantity: 1,
            warehouseId: '169cdbc',
          },
        ],
        deliveryChannel: 'delivery',
        pickupStoreInfo: {
          additionalInfo: null,
          address: null,
          dockId: null,
          friendlyName: null,
          isPickupStore: false,
        },
        addressId: '-1456253174642',
      },
    ],
    trackingHints: null,
    selectedAddresses: [
      {
        addressId: '-1456253174642',
        addressType: 'residential',
        receiverName: 'auto auto',
        street: 'Rua Assunção',
        number: '2',
        complement: null,
        neighborhood: 'Botafogo',
        postalCode: '22251-030',
        city: 'Rio de Janeiro',
        state: 'RJ',
        country: 'BRA',
        reference: null,
        geoCoordinates: [],
      },
    ],
  },
  paymentData: {
    transactions: [
      {
        isActive: true,
        transactionId: '314EE37078174BB3A1BB80BB7396B826',
        merchantName: 'QAMARKETPLACE',
        payments: [
          {
            id: '7C6BC1C46FB943A2B4AB0147B99412AB',
            paymentSystem: '4',
            paymentSystemName: 'Mastercard',
            value: 10163,
            installments: 1,
            referenceValue: 10163,
            cardHolder: null,
            cardNumber: null,
            firstDigits: '555500',
            lastDigits: '2222',
            cvv2: null,
            expireMonth: null,
            expireYear: null,
            url: null,
            giftCardId: null,
            giftCardName: null,
            giftCardCaption: null,
            redemptionCode: null,
            group: 'creditCard',
            tid: '46422942',
            dueDate: null,
            connectorResponses: {
              Tid: '46422942',
              ReturnCode: null,
              Message: null,
              authId: '422942',
            },
          },
        ],
      },
    ],
  },
  packageAttachment: {
    packages: [
      {
        items: [
          {
            itemIndex: 1,
            quantity: 1,
            price: 3300,
            description: null,
          },
        ],
        courier: 'Transportadora',
        invoiceNumber: '123312',
        invoiceValue: 3300,
        invoiceUrl: null,
        issuanceDate: '2018-02-19T03:00:00.0000000+00:00',
        trackingNumber: '123233',
        invoiceKey: null,
        trackingUrl: 'facebook.com.br',
        embeddedInvoice: '',
        type: 'Output',
        courierStatus: {
          status: 'unknown',
          finished: true,
          data: [],
        },
      },
      {
        items: [
          {
            itemIndex: 2,
            quantity: 1,
            price: 1000,
            description: null,
          },
        ],
        courier: 'Teste CHECKOUT Sedex',
        invoiceNumber: '4213423423',
        invoiceValue: 1000,
        invoiceUrl: null,
        issuanceDate: '2018-02-19T03:00:00.0000000+00:00',
        trackingNumber: '4132244343',
        invoiceKey: null,
        trackingUrl: 'vtex.com.br',
        embeddedInvoice: '',
        type: 'Output',
        courierStatus: {
          status: 'unknown',
          finished: true,
          data: [],
        },
      },
      {
        items: [
          {
            itemIndex: 0,
            quantity: 1,
            price: 4264,
            description: null,
          },
        ],
        courier: '[Teste QA] Nao Mexer',
        invoiceNumber: '432243344',
        invoiceValue: 4264,
        invoiceUrl: '',
        issuanceDate: '2018-02-19T03:00:00.0000000+00:00',
        trackingNumber: '443214',
        invoiceKey: null,
        trackingUrl: 'g1.com.br',
        embeddedInvoice: '',
        type: 'Output',
        courierStatus: {
          status: 'unknown',
          finished: true,
          data: [],
        },
      },
    ],
  },
  sellers: [
    {
      id: '1',
      name: 'qamarketplace',
      logo: '',
    },
  ],
  callCenterOperatorData: null,
  followUpEmail: '10299ccd675d4cfb8749dfe2c808a421@ct.vtex.com.br',
  lastMessage: null,
  hostname: 'qamarketplace',
  changesAttachment: null,
  openTextField: null,
  roundingError: 0,
  orderFormId: 'fd0ea0aa66ce45768e21e044b4c8b513',
  commercialConditionData: null,
  isCompleted: true,
  customData: null,
  storePreferencesData: {
    countryCode: 'BRA',
    currencyCode: 'BRL',
    currencyFormatInfo: {
      CurrencyDecimalDigits: 2,
      CurrencyDecimalSeparator: ',',
      CurrencyGroupSeparator: '.',
      CurrencyGroupSize: 3,
      StartsWithCurrencySymbol: true,
    },
    currencyLocale: 1046,
    currencySymbol: 'R$',
    timeZone: 'E. South America Standard Time',
  },
  allowCancellation: true,
  allowEdition: true,
  isCheckedIn: false,
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/mocks/NotDeliveredOrder.ts from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default {
  orderId: '834081519069-01',
  sequence: '549600',
  marketplaceOrderId: '',
  marketplaceServicesEndpoint:
    'http://portal.vtexcommerce.com.br/api/oms?an=vtexgame1',
  sellerOrderId: '00-834081519069-01',
  origin: 'Marketplace',
  affiliateId: '',
  salesChannel: '1',
  merchantName: null,
  status: 'invoiced',
  statusDescription: 'Faturado',
  value: 6798,
  creationDate: '2018-05-23T00:26:05.7454162+00:00',
  lastChange: '2018-07-27T14:05:43.8509746+00:00',
  orderGroup: '834081519069',
  totals: [
    {
      id: 'Items',
      name: 'Total dos Itens',
      value: 6298,
    },
    {
      id: 'Discounts',
      name: 'Total dos Descontos',
      value: 0,
    },
    {
      id: 'Shipping',
      name: 'Total do Frete',
      value: 500,
    },
    {
      id: 'Tax',
      name: 'Total da Taxa',
      value: 0,
    },
  ],
  items: [
    {
      uniqueId: '44FE5E7665F54255A5A6810CEFD4465E',
      id: '31',
      productId: '20',
      ean: null,
      lockId: '00-834081519069-01',
      itemAttachment: {
        content: {},
        name: null,
      },
      attachments: [],
      quantity: 1,
      seller: '1',
      name: 'Camisa Seleção Brasileira',
      refId: '00001',
      price: 3999,
      listPrice: 1000,
      manualPrice: null,
      priceTags: [],
      imageUrl:
        'http://vtexgame1.vteximg.com.br/arquivos/ids/155369-55-55/Azul-Talla-S_0.jpg?v=635833511570300000',
      detailUrl: '/polera-de-futbol-nike-manga-corta-20/p',
      components: [],
      bundleItems: [],
      params: [],
      offerings: [],
      sellerSku: '31',
      priceValidUntil: null,
      commission: 0,
      tax: 0,
      preSaleDate: null,
      additionalInfo: {
        brandName: 'Marca Exemplo',
        brandId: '2000000',
        categoriesIds: '/1/2/3/',
        productClusterId: '135',
        commercialConditionId: '1',
        dimension: {
          cubicweight: 0.2,
          height: 20.0,
          length: 3.0,
          weight: 50.0,
          width: 20.0,
        },
        offeringInfo: null,
        offeringType: null,
        offeringTypeId: null,
      },
      measurementUnit: 'un',
      unitMultiplier: 1.0,
      sellingPrice: 3999,
      isGift: false,
      shippingPrice: null,
      rewardValue: 0,
      freightCommission: 0,
      priceDefinitions: null,
    },
    {
      uniqueId: '981EC2B9AB804B5990DDD0C904CDA0F5',
      id: '33',
      productId: '22',
      ean: 'Name*\t Camisa Vasco Preta',
      lockId: '00-834081519069-01',
      itemAttachment: {
        content: {},
        name: null,
      },
      attachments: [],
      quantity: 1,
      seller: '1',
      name: 'Camisa Vasco Preta',
      refId: null,
      price: 2299,
      listPrice: 3400,
      manualPrice: null,
      priceTags: [],
      imageUrl:
        'http://vtexgame1.vteximg.com.br/arquivos/ids/155639-55-55/ximi.png?v=636562111639370000',
      detailUrl: '/camisa-vasco-preta/p',
      components: [],
      bundleItems: [],
      params: [],
      offerings: [],
      sellerSku: '33',
      priceValidUntil: null,
      commission: 0,
      tax: 0,
      preSaleDate: null,
      additionalInfo: {
        brandName: 'Marca 1',
        brandId: '2000001',
        categoriesIds: '/1/2/',
        productClusterId: '135',
        commercialConditionId: '1',
        dimension: {
          cubicweight: 19.665,
          height: 46.0,
          length: 45.0,
          weight: 45.0,
          width: 57.0,
        },
        offeringInfo: null,
        offeringType: null,
        offeringTypeId: null,
      },
      measurementUnit: 'un',
      unitMultiplier: 1.0,
      sellingPrice: 2299,
      isGift: false,
      shippingPrice: null,
      rewardValue: 0,
      freightCommission: 0,
      priceDefinitions: null,
    },
  ],
  marketplaceItems: [],
  clientProfileData: {
    id: 'clientProfileData',
    email: 'ana.motta@vtex.com.br',
    firstName: 'Ana Luiza',
    lastName: 'Gomes',
    documentType: 'cpf',
    document: '09498512485',
    phone: '+5583991119209',
    corporateName: null,
    tradeName: null,
    corporateDocument: null,
    stateInscription: null,
    corporatePhone: null,
    isCorporate: false,
    userProfileId: 'a8c24a30-cbab-4a16-b53c-b48489975d7e',
    customerClass: null,
  },
  giftRegistryData: null,
  marketingData: null,
  ratesAndBenefitsData: {
    id: 'ratesAndBenefitsData',
    rateAndBenefitsIdentifiers: [],
  },
  shippingData: {
    id: 'shippingData',
    address: {
      addressType: 'residential',
      receiverName: 'Ana Luiza Gomes',
      addressId: '-4564401032532',
      postalCode: '22225-800',
      city: 'Rio de Janeiro',
      state: 'RJ',
      country: 'BRA',
      street: 'Praia de Botafogo',
      number: '260',
      neighborhood: 'Botafogo',
      complement: null,
      reference: null,
      geoCoordinates: [],
    },
    logisticsInfo: [
      {
        itemIndex: 0,
        selectedSla: 'PAC',
        lockTTL: '7d',
        price: 500,
        listPrice: 500,
        sellingPrice: 500,
        deliveryWindow: null,
        deliveryCompany: 'PAC',
        shippingEstimate: '8bd',
        shippingEstimateDate: '2018-06-02T00:26:44.4700669+00:00',
        slas: [
          {
            id: 'PAC',
            name: 'PAC',
            shippingEstimate: '8bd',
            deliveryWindow: null,
            price: 500,
            deliveryChannel: 'delivery',
            pickupStoreInfo: {
              additionalInfo: null,
              address: null,
              dockId: null,
              friendlyName: null,
              isPickupStore: false,
            },
            polygonName: null,
          },
        ],
        shipsTo: ['BRA'],
        deliveryIds: [
          {
            courierId: '1',
            courierName: 'PAC',
            dockId: '1e76746',
            quantity: 1,
            warehouseId: '139edf2',
          },
        ],
        deliveryChannel: 'delivery',
        pickupStoreInfo: {
          additionalInfo: null,
          address: null,
          dockId: null,
          friendlyName: null,
          isPickupStore: false,
        },
        addressId: '-4564401032532',
        polygonName: null,
      },
      {
        itemIndex: 1,
        selectedSla: 'Econômica',
        lockTTL: '7d',
        price: 0,
        listPrice: 0,
        sellingPrice: 0,
        deliveryWindow: null,
        deliveryCompany: 'Baratex',
        shippingEstimate: '10bd',
        shippingEstimateDate: '2018-06-06T00:26:44.4700669+00:00',
        slas: [
          {
            id: 'Econômica',
            name: 'Econômica',
            shippingEstimate: '10bd',
            deliveryWindow: null,
            price: 0,
            deliveryChannel: 'delivery',
            pickupStoreInfo: {
              additionalInfo: null,
              address: null,
              dockId: null,
              friendlyName: null,
              isPickupStore: false,
            },
            polygonName: null,
          },
          {
            id: 'normal',
            name: 'normal',
            shippingEstimate: '11bd',
            deliveryWindow: null,
            price: 199,
            deliveryChannel: 'delivery',
            pickupStoreInfo: {
              additionalInfo: null,
              address: null,
              dockId: null,
              friendlyName: null,
              isPickupStore: false,
            },
            polygonName: null,
          },
        ],
        shipsTo: ['BRA'],
        deliveryIds: [
          {
            courierId: '10014ba',
            courierName: 'Baratex',
            dockId: '11d7fbf',
            quantity: 1,
            warehouseId: '14a6ebe',
          },
        ],
        deliveryChannel: 'delivery',
        pickupStoreInfo: {
          additionalInfo: null,
          address: null,
          dockId: null,
          friendlyName: null,
          isPickupStore: false,
        },
        addressId: '-4564401032532',
        polygonName: null,
      },
    ],
    trackingHints: null,
    selectedAddresses: [
      {
        addressId: '-4564401032532',
        addressType: 'residential',
        receiverName: 'Ana Luiza Gomes',
        street: 'Praia de Botafogo',
        number: '260',
        complement: null,
        neighborhood: 'Botafogo',
        postalCode: '22225-800',
        city: 'Rio de Janeiro',
        state: 'RJ',
        country: 'BRA',
        reference: null,
        geoCoordinates: [],
      },
    ],
  },
  paymentData: {
    transactions: [
      {
        isActive: true,
        transactionId: 'C84FAB684A44487CA716C49A18A6C5B6',
        merchantName: 'VTEXGAME1',
        payments: [
          {
            id: 'DD838CC148374CB48F745077A0EB405A',
            paymentSystem: '2',
            paymentSystemName: 'Visa',
            value: 6798,
            installments: 1,
            referenceValue: 6798,
            cardHolder: null,
            cardNumber: null,
            firstDigits: '444433',
            lastDigits: '1111',
            cvv2: null,
            expireMonth: null,
            expireYear: null,
            url: null,
            giftCardId: null,
            giftCardName: null,
            giftCardCaption: null,
            redemptionCode: null,
            group: 'creditCard',
            tid: '63374265',
            dueDate: null,
            connectorResponses: {
              Tid: '63374265',
              ReturnCode: null,
              Message: null,
              authId: '374265',
            },
          },
        ],
      },
    ],
  },
  packageAttachment: {
    packages: [
      {
        items: [
          {
            itemIndex: 1,
            quantity: 1,
            price: 2299,
            description: null,
          },
        ],
        courier: 'PAC',
        invoiceNumber: '1111',
        invoiceValue: 2299,
        invoiceUrl: 'www.uol.com.br',
        issuanceDate: '2018-07-27T03:00:00.0000000+00:00',
        trackingNumber: '1232213',
        invoiceKey: null,
        trackingUrl: 'facebook.com',
        embeddedInvoice: '',
        type: 'Output',
        courierStatus: {
          status: 'unknown',
          finished: true,
          data: [],
        },
      },
      {
        items: [
          {
            itemIndex: 0,
            quantity: 1,
            price: 3999,
            description: null,
          },
        ],
        courier: 'PAC',
        invoiceNumber: '1234',
        invoiceValue: 4499,
        invoiceUrl: 'www.uol.com.br',
        issuanceDate: '2018-07-27T03:00:00.0000000+00:00',
        trackingNumber: '2222',
        invoiceKey: null,
        trackingUrl: 'www.visa.com.br',
        embeddedInvoice: '',
        type: 'Output',
        courierStatus: {
          status: 'ok',
          finished: false,
          data: [],
        },
      },
    ],
  },
  sellers: [
    {
      id: '1',
      name: 'vtexgame1',
      logo: '',
    },
  ],
  callCenterOperatorData: null,
  followUpEmail: '14fb1186974c4f379123fae55cbff4db@ct.vtex.com.br',
  lastMessage: null,
  hostname: 'vtexgame1',
  invoiceData: null,
  changesAttachment: null,
  openTextField: null,
  roundingError: 0,
  orderFormId: 'b4c2f5dc1b49419fb87878a61014b522',
  commercialConditionData: null,
  isCompleted: true,
  customData: null,
  storePreferencesData: {
    countryCode: 'BRA',
    currencyCode: 'BRL',
    currencyFormatInfo: {
      CurrencyDecimalDigits: 2,
      CurrencyDecimalSeparator: ',',
      CurrencyGroupSeparator: '.',
      CurrencyGroupSize: 3,
      StartsWithCurrencySymbol: true,
    },
    currencyLocale: 1046,
    currencySymbol: 'R$',
    timeZone: 'E. South America Standard Time',
  },
  allowCancellation: false,
  allowEdition: false,
  isCheckedIn: false,
  marketplace: {
    baseURL: 'http://portal.vtexcommerce.com.br/api/oms?an=vtexgame1',
    isCertified: null,
    name: 'vtexgame1',
  },
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/components/GenericError.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { intlShape, injectIntl } from 'react-intl'
import { Alert } from 'vtex.styleguide'

const GenericError = ({ error, errorId, onDismiss, intl }) => {
  return (
    <div className="mb5">
      <Alert type="error" onClose={onDismiss}>
        {errorId ? intl.formatMessage({ id: errorId }) : error}
      </Alert>
    </div>
  )
}

GenericError.propTypes = {
  error: PropTypes.string,
  errorId: PropTypes.string,
  onDismiss: PropTypes.func,
  intl: intlShape.isRequired,
}

export default injectIntl(GenericError)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/components/ContentWrapper.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import ReactRouterPropTypes from 'react-router-prop-types'
import { injectIntl, intlShape } from 'react-intl'
import { PageHeader } from 'vtex.styleguide'

import GenericError from './GenericError'

class ContentWrapper extends Component {
  state = {
    shouldShowError: false,
  }

  handleError = () => {
    this.setState({ shouldShowError: true })
  }

  handleDismissError = () => {
    this.setState({ shouldShowError: false })
  }

  render() {
    const {
      children,
      intl,
      title,
      titleId,
      backButton,
      history,
      headerContent,
      namespace,
      hideBackButton = false,
    } = this.props
    const { shouldShowError } = this.state

    const backButtonConfigs = {
      linkLabel: backButton
        ? backButton.title
          ? backButton.title
          : intl.formatMessage({ id: backButton.titleId })
        : intl.formatMessage({ id: 'commons.back' }),
      onLinkClick: () => history.push(backButton ? backButton.path : '/'),
    }

    return (
      <section className="vtex-account__page w-100 w-80-m">
        <header>
          <div className="db dn-m">
            <PageHeader
              title={title || intl.formatMessage({ id: titleId })}
              {...backButtonConfigs}
            >
              {headerContent}
            </PageHeader>
          </div>
          <div className="db-m dn">
            <PageHeader
              title={title || intl.formatMessage({ id: titleId })}
              {...(!hideBackButton && backButtonConfigs)}
            >
              {headerContent}
            </PageHeader>
          </div>
        </header>
        <main className={`vtex-account__page-body ${namespace} w-100 pa4-s`}>
          {shouldShowError && (
            <div className="w-100 flex justify-around">
              <div className="w-50-ns w-80-s">
                <GenericError
                  onDismiss={this.handleDismissError}
                  errorId="alert.unknownError"
                />
              </div>
            </div>
          )}
          {children({ handleError: this.handleError })}
        </main>
      </section>
    )
  }
}

ContentWrapper.propTypes = {
  intl: intlShape.isRequired,
  children: PropTypes.func.isRequired,
  namespace: PropTypes.string.isRequired,
  title: PropTypes.string,
  titleId: PropTypes.string,
  backButton: PropTypes.shape({
    title: PropTypes.string,
    titleId: PropTypes.string,
    path: PropTypes.string.isRequired,
  }),
  history: ReactRouterPropTypes.history.isRequired,
  hideBackButton: PropTypes.bool,
  headerContent: PropTypes.node,
}

export default injectIntl(withRouter(ContentWrapper))

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/components/ReloadableError.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { intlShape, injectIntl } from 'react-intl'
import { Alert } from 'vtex.styleguide'

const ReloadableError = ({ errorId, onReload, intl }) => {
  return (
    <Alert
      type="error"
      action={{
        label: intl.formatMessage({ id: 'alert.reload' }),
        onClick: onReload,
      }}>
      {intl.formatMessage({ id: errorId })}
    </Alert>
  )
}

ReloadableError.propTypes = {
  errorId: PropTypes.string.isRequired,
  onReload: PropTypes.func.isRequired,
  intl: intlShape.isRequired,
}

export default injectIntl(ReloadableError)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/components/BaseLoading.js from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'

import ReloadableError from './ReloadableError'
import ContentWrapper from './ContentWrapper'

class BaseLoading extends Component {
  state = {
    isLoading: true,
  }

  componentDidUpdate = prevProps => {
    if (prevProps.queryData.loading !== this.props.queryData.loading) {
      this.setState({ isLoading: false })
    }
  }

  handleReload = () => {
    this.setState({ isLoading: true })

    this.props.queryData.refetch().catch(() => {
      this.setState({ isLoading: false })
    })
  }

  render() {
    const { isLoading } = this.state
    const {
      headerConfig,
      children,
      queryData,
      namespace,
      parseError,
    } = this.props

    let errorMessageId
    if (queryData.error) {
      if (parseError) {
        errorMessageId = parseError(queryData.error)
      }

      if (!errorMessageId) {
        errorMessageId =
          queryData.error.toString().indexOf('not authenticated') > -1
            ? 'alert.unauthenticated'
            : 'alert.connectionError'
      }
    }

    const content = isLoading
      ? children
      : errorMessageId && (
          <div className="mt7">
            <ReloadableError
              errorId={errorMessageId}
              onReload={this.handleReload}
            />
          </div>
        )

    return (
      <ContentWrapper
        namespace={namespace || 'vtex-base-loading'}
        {...headerConfig}>
        {() => <Fragment>{content}</Fragment>}
      </ContentWrapper>
    )
  }
}

const headerConfigPropTypes = PropTypes.shape({
  title: PropTypes.string,
  titleId: PropTypes.string,
  backButton: PropTypes.shape({
    title: PropTypes.string,
    titleId: PropTypes.string,
    path: PropTypes.string.isRequired,
  }),
  headerContent: PropTypes.node,
})

BaseLoading.propTypes = {
  namespace: PropTypes.string,
  parseError: PropTypes.func,
  queryData: PropTypes.any.isRequired,
  headerConfig: headerConfigPropTypes.isRequired,
  children: PropTypes.any.isRequired,
}

export default BaseLoading

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/__tests__/getOrderProgress.test.ts from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```typescript
import packagify from '@vtex/delivery-packages'

import getOrderProgress from '../components/ProgressBar/getOrderProgress'
import {
  FIRST_STEP,
  SECOND_STEP,
  THIRD_STEP,
  FOURTH_STEP,
  FIFTH_STEP,
} from '../components/ProgressBar/constants'
import deliveredOrder from '../mocks/NotDeliveredOrder'
import notDeliveredOrder from '../mocks/NotDeliveredOrder'

describe('getOrderProgress', () => {
  it('Should return undefined when status is not mapped', () => {
    const progress = getOrderProgress('order-cancelled', [])
    expect(progress).toEqual(undefined)
  })

  it('Should map status order-created to the first step of the progress bar', () => {
    const progress = getOrderProgress('order-created', [])

    expect(progress).toEqual(FIRST_STEP)
  })

  it('Should map status order-completed to the first step of the progress bar', () => {
    const progress = getOrderProgress('order-completed', [])

    expect(progress).toEqual(FIRST_STEP)
  })

  it('Should map status on-order-completed to the first step of the progress bar', () => {
    const progress = getOrderProgress('on-order-completed', [])

    expect(progress).toEqual(FIRST_STEP)
  })

  it('Should map status payment-pending to the second step of the progress bar', () => {
    const progress = getOrderProgress('payment-pending', [])

    expect(progress).toEqual(SECOND_STEP)
  })

  it('Should map status approve-payment to the second step of the progress bar', () => {
    const progress = getOrderProgress('approve-payment', [])

    expect(progress).toEqual(SECOND_STEP)
  })

  it('Should map status payment-approved to the third step of the progress bar', () => {
    const progress = getOrderProgress('payment-approved', [])

    expect(progress).toEqual(THIRD_STEP)
  })

  it('Should map status ready-for-handling to the third step of the progress bar', () => {
    const progress = getOrderProgress('ready-for-handling', [])

    expect(progress).toEqual(THIRD_STEP)
  })

  it('Should map status authorize-fullfilment to the third step of the progress bar', () => {
    const progress = getOrderProgress('authorize-fullfilment', [])

    expect(progress).toEqual(THIRD_STEP)
  })

  it('Should map status release-to-fullfilment to the third step of the progress bar', () => {
    const progress = getOrderProgress('release-to-fulfillment', [])

    expect(progress).toEqual(THIRD_STEP)
  })

  it('Should map status handling to the third step of the progress bar', () => {
    const progress = getOrderProgress('handling', [])

    expect(progress).toEqual(THIRD_STEP)
  })

  it('Should map status invoice to the third step of the progress bar', () => {
    const progress = getOrderProgress('invoice', [])

    expect(progress).toEqual(THIRD_STEP)
  })

  it('Should map status invoiced to the fourth step of the progress bar', () => {
    const progress = getOrderProgress('invoiced', [])

    expect(progress).toEqual(FOURTH_STEP)
  })

  it('Should map to the fifth step of the progress bar since all packages were delivered and its status is invoiced', () => {
    const packages = packagify(deliveredOrder)

    const progress = getOrderProgress(deliveredOrder.status, packages)

    expect(progress).toEqual(FOURTH_STEP)
  })

  it('Should map to the fourth step of the progress bar since all packages were not delivered even though its status is invoiced', () => {
    const packages = packagify(notDeliveredOrder)

    const progress = getOrderProgress(notDeliveredOrder.status, packages)

    expect(progress).toEqual(FOURTH_STEP)
  })
  it('Should return FIFTH_STEP since all packages have courierStatus.data with length greater than 1', () => {
    const packages = [
      {
        items: [[Object]],
        package: {
          items: [Array],
          invoiceNumber: '243433',
          invoiceValue: 5699,
          invoiceUrl: '',
          trackingNumber: '423243423',
          trackingUrl: 'http://ufcg.edu.br',
          courierStatus: {
            status: 'unknown',
            finished: false,
            data: [
              {
                lastChange: '2015-06-23T00:00:00.0000000+00:00',
                city: 'Rio de Janeiro',
                state: 'RJ',
                description: 'Coletado pela transportadora',
              },
            ],
          },
          index: 0,
        },
        item: undefined,
      },
    ]

    const progress = getOrderProgress('invoiced', packages)

    expect(progress).toEqual(FIFTH_STEP)
  })

  it('Should return FOURTH_STEP since there are packages that do not have courierStatus.data with length greater than 1', () => {
    const packages = [
      {
        package: {
          trackingNumber: '423243423',
          trackingUrl: 'http://ufcg.edu.br',
          type: 'Output',
          courierStatus: {
            status: 'unknown',
            finished: false,
            data: [
              {
                lastChange: '2015-06-23T00:00:00.0000000+00:00',
                city: 'Rio de Janeiro',
                state: 'RJ',
                description: 'Coletado pela transportadora',
              },
            ],
          },
          index: 0,
        },
        item: undefined,
      },
      {
        items: [[Object]],
        package: {
          invoiceNumber: '243433',
          trackingNumber: '423243423',
          trackingUrl: 'http://ufcg.edu.br',
          courierStatus: null,
          index: 0,
        },
        item: undefined,
      },
    ]

    const progress = getOrderProgress('invoiced', packages)

    expect(progress).toEqual(FOURTH_STEP)
  })
})

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of my-account-commons/react/__tests__/getPackageProgress.test.ts from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  FIRST_STEP,
  SECOND_STEP,
  THIRD_STEP,
} from '../components/ProgressBar/constants'

import getPackageProgress from '../components/ProgressBar/PackageProgressBar/getPackageProgress'
import deliveredOrder from '../mocks/DeliveredOrder'
import notDeliveredOrder from '../mocks/NotDeliveredOrder'

describe('getPackageProgress', () => {
  it('Should return null when the order has less than 2 packages', () => {
    const pack = {
      courier: 'Teste CHECKOUT Sedex',
      trackingNumber: '4132244343',
      invoiceKey: null,
      trackingUrl: 'vtex.com.br',
      courierStatus: {
        status: 'unknown',
        finished: true,
        data: [],
      },
    }
    expect(getPackageProgress(pack, notDeliveredOrder.status, [pack])).toEqual(
      null
    )
  })

  it('Should return null when the order progress bar hasnt get to the third step yet', () => {
    expect(
      getPackageProgress(
        deliveredOrder.packageAttachment.packages[0],
        'payment-pending',
        deliveredOrder.packageAttachment.packages
      )
    ).toEqual(null)
  })

  it('Should return FIRST_STEP when the package does not have courierStatus as finished, nor trackingUrl and trackingNumber ', () => {
    const pack = {
      items: [
        {
          itemIndex: 1,
          quantity: 1,
          price: 3300,
          description: null,
        },
      ],
      courier: 'Transportadora',
      trackingNumber: null,
      trackingUrl: null,
      courierStatus: {
        status: 'unknown',
        finished: false,
        data: [],
      },
    }
    expect(
      getPackageProgress(
        pack,
        deliveredOrder.status,
        deliveredOrder.packageAttachment.packages
      )
    ).toEqual(FIRST_STEP)
  })

  it('Should return SECOND_STEP when package has trackingUrl or trackingNumber', () => {
    const pack = {
      items: [
        {
          itemIndex: 1,
          quantity: 1,
          price: 3300,
          description: null,
        },
      ],
      courier: 'Transportadora',
      trackingUrl: 'jadlog.com.br',
      trackingNumber: '24343',
      courierStatus: {
        status: 'unknown',
        finished: false,
        data: [],
      },
    }
    expect(
      getPackageProgress(
        pack,
        deliveredOrder.status,
        deliveredOrder.packageAttachment.packages
      )
    ).toEqual(SECOND_STEP)
  })

  it('Should return THIRD_STEP when package has courierStatus as finished', () => {
    const pack = {
      items: [
        {
          itemIndex: 1,
          quantity: 1,
          price: 3300,
          description: null,
        },
      ],
      courier: 'Transportadora',
      trackingUrl: null,
      trackingNumber: null,
      courierStatus: {
        status: 'unknown',
        finished: true,
        data: [],
      },
    }

    expect(
      getPackageProgress(
        pack,
        deliveredOrder.status,
        deliveredOrder.packageAttachment.packages
      )
    ).toEqual(THIRD_STEP)
  })
})

```