[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/my-account-extension-example/react/MyAppLink.js from the my-account VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import { intlShape, injectIntl } from 'react-intl'

const MyAppLink = ({ render, intl }) => {
  return render([
    {
      name: intl.formatMessage({ id: 'store/userSupport.link' }),
      path: '/support',
    },
  ])
}

MyAppLink.propTypes = {
  render: PropTypes.func.isRequired,
  intl: intlShape.isRequired,
}

export default injectIntl(MyAppLink)

```


[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/my-account-extension-example/store/interfaces.json from the my-account VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "my-account-page.test-page": {
    "component": "MyAppPage"
  },
  "my-account-link.test-link": {
    "component": "MyAppLink"
  },
  "profile-display.test-display": {
    "component": "BeautyData"
  },
  "profile-input.test-input": {
    "component": "FavColor"
  }
}

```


[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/my-account-extension-example/store/plugins.json from the my-account VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "my-account-pages > my-account-page": "my-account-page.test-page",
  "my-account-menu > my-account-link": "my-account-link.test-link",
  "profile-display-container > profile-display": "profile-display.test-display",
  "profile-input-container > profile-input": "profile-input.test-input"
}

```


[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/my-account-extension-example/react/components/UserSupport.js from the my-account VTEX app.

[Assistant]
Here's the implementation:

```javascript
const UserSupport = () => {
  return (
    <div>
      <h1>User Support</h1>
      <div>How can I help you today?</div>
    </div>
  )
}

export default UserSupport

```


[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/node/resolvers/settings.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

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

declare var process: {
  env: {
    VTEX_APP_ID: string
  }
}

const appId = process.env.VTEX_APP_ID

async function settings(_: unknown, __: unknown, ctx: ServiceContext) {
  const result = (await ctx.clients.apps.getAppSettings(appId)) as Settings

  return {
    useMap: result.addresses && result.addresses.useMap,
    showGenders: result.profile && result.profile.showGenders,
    showMyCards: result.cards && result.cards.showMyCards,
    showMyOrders: result.orders && result.orders.showMyOrders,
    showMyAddresses: result.addresses && result.addresses.showMyAddresses,
    showMyAuthentication: result.authentication && result.authentication.showMyAuthentication,
  }
}

interface Settings {
  addresses?: {
    useMap: boolean
    showMyAddresses: boolean
  }
  profile?: { showGenders: boolean }
  cards?: { showMyCards: boolean }
  orders?: { showMyOrders: boolean }
  authentication?: { showMyAuthentication: boolean }
}

export default settings

```


[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/react/typings/vtex.profile-form.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.profile-form' {
  export const ProfileRules
  export const ProfileSummary
  export const ProfileContainer
}

```


[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/react/typings/vtex.render-runtime.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  export const ExtensionPoint
  export const withRuntimeContext
  export const useRuntime
}

```


[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/react/typings/global.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare global {
  type CssHandlesInput = readonly string[]
  type ValueOf<T extends readonly any[]> = T[number]
  type CssHandles<T extends CssHandlesInput> = Record<ValueOf<T>, string>

  interface Constructable<T> {
    new (): T
  }
  interface Variables<A> {
    variables: A
  }

  interface DeleteAddressArgs {
    addressId: string
  }

  interface SetOptInNewsletterArgs {
    email: string
    isNewsletterOptIn: boolean
  }

  interface UpdateAddressArgs {
    addressId: string
    addressFields: AddressInput
  }

  interface UpdateProfileArgs {
    profile: ProfileInput
  }

  interface UpdateProfilePicture {
    file: any
  }

  interface AddressInput {
    receiverName: string
    complement: string
    neighborhood: string
    country: string
    state: string
    number: string
    street: string
    geoCoordinates: number[]
    postalCode: string
    city: string
    reference: string
    addressName: string
    addressType: string
  }

  interface Address {
    addressId: string
    addressQuery: string | null
    addressType: string
    addressName?: string
    city: string | null
    complement: string | null
    country: string
    neighborhood: string | null
    number: string | null
    postalCode: string | null
    geoCoordinates: number[] | null
    receiverName: string
    reference: string | null
    state: string | null
    street: string | null
    [key: string]: any
    __typename?: string
  }

  interface AddressFormFields {
    [key: string]: {
      disabled: boolean
      value: null | string | number | number[]
      valid?: boolean
      geolocationAutoCompleted?: boolean
      postalCodeAutoCompleted?: boolean
    }
  }

  interface Runtime {
    account: string
    culture: {
      country: string
    }
    query: Record<string, string> | undefined
    rootPath: string | undefined
  }

  interface InjectedContentWrapperProps {
    handleError: () => void
  }

  interface ContentWrapperProps {
    namespace?: string
    titleId: string
    backButton?: {
      titleId: string
      path: string
    }
    headerContent?: (handle: any) => JSX.Element
  }

  interface Profile {
    firstName: string
    lastName: string
    birthDate: string
    gender: string
    homePhone: string
    businessPhone: string
    document: string
    email: string
    tradeName: string
    corporateName: string
    corporateDocument: string
    stateRegistration: string
    isCorporate: string
    customFields?: CustomFields[]
  }

  interface CustomFields {
    key: string
    value: string
  }

  interface ProfileInput {
    email: string
    firstName: string
    lastName: string
    document: string
    birthDate: string
    gender: string
    homePhone: string
    businessPhone: string
    corporateName: string
    corporateDocument: string
    stateRegistration: string
    isCorporate: boolean
  }

  interface Window {
    __RUNTIME__: {
      workspace: string
      account: string
    }
    vtex: {
      orderListRendered?: boolean
    }
  }
}

export {}

```


[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/react/typings/css.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  interface ClassNames {
    [className: string]: string
  }
  const classNames: ClassNames
  export = classNames
}

```


[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/react/typings/vtex.styleguide.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Button
  export const EmptyState
  export const Alert
  export const Modal
  export const Spinner
  export const ModalDialog
  export const Checkbox
}

```


[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/react/utils/getRedirectLogout.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const getBindingAddrQuery = (runtime: Runtime) => {
  const { query: { __bindingAddress: bindingAddress = null } = {} } = runtime

  return new URLSearchParams({
    ...(bindingAddress && { __bindingAddress: bindingAddress }),
  }).toString()
}

const getAbsReturnUrl = (runtime: Runtime) => {
  const { rootPath = '' } = runtime

  const bindingAddrQuery = getBindingAddrQuery(runtime)
  const query = bindingAddrQuery ? `?${bindingAddrQuery}` : ''
  const path = rootPath !== '' ? rootPath : '/'

  return new URL(`${path}${query}`, window.location.href).href
}

const getRedirectLogout = (runtime: Runtime) => {
  const { account, rootPath = '' } = runtime

  const absReturnUrl = getAbsReturnUrl(runtime)

  const searchParams = new URLSearchParams({
    scope: account,
    returnUrl: absReturnUrl,
  }).toString()

  return () =>
    window.location.assign(`${rootPath}/api/vtexid/pub/logout?${searchParams}`)
}

export default getRedirectLogout

```


[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/react/utils/logger.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
export function logGeneralErrors(_error: any, _info: any) {
  // TODO: log in OpenSearch
}

```


[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/react/components/MyAccountWrapper.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-restricted-globals */
import type { FunctionComponent, ReactElement } from 'react'
import { useMemo } from 'react'
import { useRuntime } from 'vtex.render-runtime'

import useDataPixel from '../hooks/useDataPixel'

const MyAccountWrapper: FunctionComponent<{ children: ReactElement }> = ({
  children,
}) => {
  const { account } = useRuntime()

  const pixelEvents = useMemo(() => {
    if (typeof document === 'undefined') {
      return null
    }

    return [
      {
        event: 'pageView',
        pageTitle: document.title,
        pageUrl: location.href,
        referrer:
          document.referrer.indexOf(location.origin) === 0
            ? undefined
            : document.referrer,
        accountName: account,
      },
      {
        event: 'account',
        eventType: 'accountView',
        accountName: account,
        pageTitle: document.title,
        pageUrl: location.href,
        pageCategory: 'MyAccount',
      },
    ]
  }, [account])

  useDataPixel(pixelEvents, 'MyAccount')

  return children
}

export default MyAccountWrapper

```


[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/react/components/AppRouter.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC, ComponentClass } from 'react'
import React, { Component, Fragment } from 'react'
import Media from 'react-media'
import {
  Route,
  Switch,
  Redirect,
  HashRouter,
} from 'vtex.my-account-commons/Router'
import { ExtensionPoint } from 'vtex.render-runtime'

import Addresses from './pages/Addresses'
import Profile from './pages/Profile'
import ProfileEdit from './pages/ProfileEdit'
import AddressCreate from './pages/AddressCreate'
import AddressEdit from './pages/AddressEdit'
import Menu from './Menu'

interface Props {
  blockDocument?: boolean
}

class AppRouter extends Component<Props> {
  public state = { defaultPath: '' }

  private handleDefaultPath = (defaultPath: string) => {
    this.setState({ defaultPath })
  }

  public static getSchema = () => {
    return {
      title: 'My Account Home',
      description: 'Home',
      type: 'object',
      properties: {
        defaultPath: {
          title: 'Default path',
          type: 'string',
          default: '/profile',
        },
      },
    }
  }

  public mapRouteComponent = ({
    path,
    component,
  }: {
    path: string
    component: ComponentClass<void, unknown> | FC
  }) => <Route exact key={path} path={path} component={component} />

  public render() {
    const routes = [
      { path: '/addresses', component: Addresses },
      { path: '/addresses/new', component: AddressCreate },
      { path: '/addresses/edit/:id', component: AddressEdit },
      { path: '/profile', component: Profile },
      {
        path: '/profile/edit',
        component: () => (
          <ProfileEdit blockDocument={this.props.blockDocument} />
        ),
      },
    ]

    return (
      <div className="w-100 mw9 pv7-m pv9-l flex">
        <ExtensionPoint
          id="my-account-defaultPage"
          onSetDefaultPath={this.handleDefaultPath}
        />
        {this.state.defaultPath && (
          <HashRouter>
            <Media query="(max-width: 45em)">
              {matches =>
                matches ? (
                  <Switch>
                    <Route exact path="/" component={Menu} />
                    {routes.map(this.mapRouteComponent)}
                    <Redirect exact from="/" to={this.state.defaultPath} />
                    <ExtensionPoint id="my-account-pages" />
                  </Switch>
                ) : (
                  <Fragment>
                    <Menu />
                    <Switch>
                      {routes.map(this.mapRouteComponent)}
                      <Redirect exact from="/" to={this.state.defaultPath} />
                      <ExtensionPoint id="my-account-pages" />
                    </Switch>
                  </Fragment>
                )
              }
            </Media>
          </HashRouter>
        )}
      </div>
    )
  }
}

export default AppRouter

```


[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/react/__tests__/index.test.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
describe('Hello tests', () => {
  it('should be a success', () => {
    expect(true).toBe(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/react/graphql/settings.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query MyAccountSettings {
  settings: appSettings @context(provider: "vtex.my-account") {
    cacheId
    showGenders
    showMyCards
    showMyOrders
    showMyAddresses
    showMyAuthentication
    useMap
  }
}

```


[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/react/graphql/getPayments.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Payments @context(scope: "private") {
  profile {
    cacheId
    payments {
      id
      paymentSystem
      cardNumber
      address {
        addressId: id
        addressName
        addressType
        city
        complement
        country
        neighborhood
        number
        postalCode
        state
        street
      }
    }
  }
}

```


[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/react/graphql/getProfile.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Profile @context(scope: "private") {
  profile {
    cacheId
    firstName
    lastName
    birthDate
    gender
    homePhone
    businessPhone
    document
    email
    tradeName
    corporateName
    corporateDocument
    stateRegistration
    isCorporate
  }
}

```


[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/react/graphql/updateAddress.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation UpdateAddress($addressId: String, $addressFields: AddressInput) {
  updateAddress(id: $addressId, fields: $addressFields)
    @context(provider: "vtex.store-graphql") {
    cacheId
    addresses: address {
      addressId: id
      addressType
      addressName
      city
      complement
      country
      neighborhood
      number
      postalCode
      geoCoordinates
      receiverName
      reference
      state
      street
    }
  }
}

```


[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/react/graphql/getNewsletterOpt.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query NewsletterOpt @context(scope: "private") {
  profile(customFields: "isNewsletterOptIn") {
    customFields {
      key
      value
    }
  }
}

```


[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/react/graphql/getAddresses.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Addresses @context(scope: "private") {
  profile {
    cacheId
    addresses: address {
      addressId: id
      addressType
      addressName
      city
      complement
      country
      neighborhood
      number
      postalCode
      geoCoordinates
      receiverName
      reference
      state
      street
    }
  }
}

```


[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/react/graphql/storeConfigs.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query StoreConfigs {
  configs: storeConfigs @context(provider: "vtex.store-graphql") {
    geolocation
    googleMapsApiKey
  }

  logistics @context(provider: "vtex.store-graphql") {
    shipsTo
  }
}

```


[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/react/graphql/deleteAddress.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation DeleteAddress($addressId: String) {
  deleteAddress(id: $addressId) {
    cacheId
    addresses: address {
      addressId: id
      addressType
      addressName
      city
      complement
      country
      neighborhood
      number
      postalCode
      geoCoordinates
      receiverName
      reference
      state
      street
    }
  }
}

```


[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/react/graphql/setOptInNewsletter.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation subscribeNewsletter($email: String!, $isNewsletterOptIn: Boolean) {
  subscribeNewsletter(email: $email, isNewsletterOptIn: $isNewsletterOptIn)
    @context(provider: "vtex.store-graphql")
    @context(scope: "private")
}

```


[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/react/graphql/updateProfile.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation UpdateProfile($profile: ProfileInput) {
  updateProfile(fields: $profile) {
    cacheId
    firstName
    lastName
    birthDate
    gender
    homePhone
    businessPhone
    document
    email
    tradeName
    corporateName
    corporateDocument
    stateRegistration
    isCorporate
  }
}

```


[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/react/graphql/saveAddress.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation SaveAddress($address: AddressInput!) {
  saveAddress(address: $address) @context(provider: "vtex.store-graphql") {
    id
    cacheId
  }
}

```


[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/react/graphql/customerGreeting.gql from the my-account VTEX app.

[Assistant]
Here's the implementation:

```graphql
query CustomerGreeting {
  profile @context(provider: "vtex.store-graphql") {
    cacheId
    firstName
    lastName
    profilePicture
  }
}

```


[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/react/hooks/useDataPixel.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useEffect, useRef } from 'react'
// eslint-disable-next-line no-restricted-imports
import { isEmpty } from 'ramda'
import { usePixel } from 'vtex.pixel-manager/PixelContext'

const useDataPixel = (
  data: any[] | null,
  pageIdentifier: any,
  isLoading = false
) => {
  const { push } = usePixel()
  const previousIdRef = useRef(null)

  const previousId = previousIdRef.current

  useEffect(() => {
    if (pageIdentifier && !isLoading && previousId !== pageIdentifier) {
      if (!data || isEmpty(data)) {
        return
      }

      if (Array.isArray(data)) {
        data.forEach(push)
      } else {
        push(data)
      }

      previousIdRef.current = pageIdentifier
    }
  }, [data, isLoading, pageIdentifier, previousId, push])
}

export default useDataPixel

```


[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/react/typings/vtex.pixel-manager/PixelContext.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.pixel-manager/PixelContext' {
  import type { PixelContext } from 'vtex.pixel-manager'

  export const usePixel: PixelContext.usePixel
}

```


[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/react/typings/vtex.address-form/shapes.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.address-form/shapes' {
  export const AddressShape
}

```


[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/react/typings/vtex.address-form/inputs.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.address-form/inputs' {
  export const StyleguideInput
  export const GeolocationInput
}

```


[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/react/typings/vtex.address-form/components.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.address-form/components' {
  export const AddressRules
  export const AddressContainer
  export const CountrySelector
  export const PostalCodeGetter
  export const AddressForm
  export const AutoCompletedFields
  export const AddressSubmitter
  export const GoogleMapsContainer
  export const Map
}

interface GoogleMapsContainerArgs {
  loading: boolean
  googleMaps: 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 my-account/react/typings/vtex.address-form/helpers.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.address-form/helpers' {
  export const addValidation
  export const removeValidation
  export const injectRules
}

```


[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/react/typings/vtex.address-form/index.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.address-form' {
  export const AddressSummary
  export const AddressRules
}

```


[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/react/typings/vtex.my-account-commons/Router.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.my-account-commons/Router' {
  export * from 'react-router-dom'
}

```


[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/react/typings/vtex.my-account-commons/index.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.my-account-commons' {
  export const BaseLoading
  export const SkeletonPiece
  export const SkeletonBox
  export const ContentWrapper
  export const 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/react/typings/graphql/settings.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/settings.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/customerGreeting.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/customerGreeting.gql' {
  import type { DocumentNode } from 'graphql'
  import type { Profile } from 'vtex.store-graphql'

  export interface Result {
    profile: Pick<
      Profile,
      'firstName' | 'lastName' | 'profilePicture' | 'cacheId'
    >
  }

  const value: DocumentNode

  export default value
}

```


[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/react/typings/graphql/updateProfile.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/updateProfile.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/getAddresses.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/getAddresses.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/saveAddress.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/saveAddress.gql' {
  import type { DocumentNode } from 'graphql'
  import type { Address } from 'vtex.store-graphql'
  import { MutationSaveAddressArgs as Args } from 'vtex.store-graphql'

  interface Result {
    saveAddress: Pick<Address, 'id' | 'cacheId'>
  }

  const value: DocumentNode

  export { Args, Result }
  export default value
}

```


[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/react/typings/graphql/deleteAddress.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/deleteAddress.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/updateAddress.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/updateAddress.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/storeConfigs.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/storeConfigs.gql' {
  import type { DocumentNode } from 'graphql'

  export interface Result {
    configs: {
      geolocation: boolean
      googleMapsApiKey?: string
    }
    logistics: {
      shipsTo: string[]
    }
  }

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/getProfile.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/getProfile.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/setOptInNewsletter.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/setOptInNewsletter.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/getPayments.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/getPayments.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/typings/graphql/getNewsletterOpt.gql.d.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*/getNewsletterOpt.gql' {
  import type { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


[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/react/components/shared/withContentWrapper.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ComponentType } from 'react'
import React from 'react'
import { ContentWrapper } from 'vtex.my-account-commons'
import { useCssHandles } from 'vtex.css-handles'

export const withContentWrapper =
  ({
    headerConfig,
    handle,
  }: {
    headerConfig: ContentWrapperProps
    handle?: { contentHandle: string; configHandle: string }
  }) =>
  (WrappedComponent: ComponentType<InjectedContentWrapperProps>) =>
  // eslint-disable-next-line react/display-name
  (props: { [key: string]: unknown }) => {
    const cssHandles = useCssHandles([
      handle?.configHandle,
      handle?.contentHandle,
    ] as const)

    const configs = {
      ...headerConfig,
      headerContent: headerConfig?.headerContent?.(handle?.contentHandle),
      namespace: `${headerConfig.namespace ?? ''} ${
        handle ? cssHandles[handle.configHandle] : ''
      }`,
    }

    return (
      <ContentWrapper {...configs}>
        {({ handleError }: InjectedContentWrapperProps) => (
          <WrappedComponent {...props} handleError={handleError} />
        )}
      </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/react/components/shared/DataEntry.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['dataEntryLabel', 'dataEntryChildren'] as const

const DataEntry: FunctionComponent<Props> = ({ label, children }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)

  return (
    <>
      <label className={`db c-on-base mb3 ${cssHandles.dataEntryLabel}`}>
        {label}
      </label>
      <div className={`light c-on-disabled ${cssHandles.dataEntryChildren}`}>
        {children}
      </div>
    </>
  )
}

interface Props {
  label: string
}

export default DataEntry

```


[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/react/components/shared/Toast.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { Alert } from 'vtex.styleguide'

class Toast extends Component<Props> {
  public state = {
    isClosing: false,
  }

  public static defaultProps = {
    autoClose: 3000,
  }

  private openTimeout: any
  private closeTimeout: any

  public componentDidMount() {
    this.openTimeout = setTimeout(() => {
      this.setState({ isClosing: true }, () => {
        this.closeTimeout = setTimeout(() => {
          this.props.onClose
        }, 3000)
      })
    }, this.props.autoClose)
  }

  public componentWillUnmount() {
    clearTimeout(this.openTimeout)
    clearTimeout(this.closeTimeout)
  }

  public render() {
    const { isClosing } = this.state
    const { onClose, messageId } = this.props

    return (
      <div
        className={`animated ${
          isClosing ? 'fadeOutDown' : 'fadeInUp'
        }  slower bottom--1 fixed z-5 ma7-ns mb5-s left-2-ns w-100-s w-30-ns`}
      >
        <Alert type="success" onClose={onClose}>
          <FormattedMessage id={messageId} />
        </Alert>
      </div>
    )
  }
}

interface Props {
  autoClose: number
  onClose: () => void
  messageId: string
}

export default Toast

```


[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/react/components/shared/withSettings.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { ComponentType } from 'react'
import React from 'react'
import { Query } from 'react-apollo'

import QUERY from '../../graphql/settings.gql'

export function withSettings(
  WrappedComponent: ComponentType<{ settings?: Settings }>
) {
  return function SettingsApplied(props: any) {
    return (
      <Query query={QUERY}>
        {({
          data: { loading, settings },
        }: {
          data: { settings: Settings; loading: boolean }
        }) => <WrappedComponent {...props} settings={!loading && settings} />}
      </Query>
    )
  }
}

export interface Settings {
  showGenders: boolean
  showMyCards: boolean | null
  showMyOrders: boolean | null
  showMyAddresses: boolean | null
  showMyAuthentication: boolean | null
  useMap: boolean
}

```


[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/react/components/shared/ContentBox.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent, ReactElement } from 'react'
import React from 'react'
import { Button } from 'vtex.styleguide'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = [
  'boxContainer',
  'boxContainerBody',
  'boxContainerFooter',
] as const

const ContentBox: FunctionComponent<Props> = ({
  children,
  maxWidthStep,
  shouldAllowGrowing = false,
  lowerButton,
  onLowerButtonClick,
}) => {
  const cssHandles = useCssHandles(CSS_HANDLES)
  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-4 br2 flex flex-column justify-between ${cssHandles.boxContainer}`}
      >
        <main className={`ph7 pv6 ${cssHandles.boxContainerBody}`}>
          {children}
        </main>
        {lowerButton && (
          <footer
            className={`flex justify-end ph3 pb3 ${cssHandles.boxContainerFooter}`}
          >
            <Button
              variation="tertiary"
              size="small"
              onClick={onLowerButtonClick}
            >
              {lowerButton}
            </Button>
          </footer>
        )}
      </article>
    </div>
  )
}

interface Props {
  maxWidthStep?: number
  shouldAllowGrowing?: boolean
  lowerButton?: ReactElement
  onLowerButtonClick?: () => void
}

export default ContentBox

```


[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/react/components/Profile/ProfileFormBox.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { graphql } from 'react-apollo'
import { compose } from 'recompose'
import { ExtensionPoint, withRuntimeContext } from 'vtex.render-runtime'
import { ProfileRules, ProfileContainer } from 'vtex.profile-form'
import { Button } from 'vtex.styleguide'
import { withCssHandles } from 'vtex.css-handles'

import ContentBox from '../shared/ContentBox'
import UpdateProfile from '../../graphql/updateProfile.gql'
import type { Settings } from '../shared/withSettings'
import { withSettings } from '../shared/withSettings'

const CSS_HANDLES = ['profileFormBoxContainer'] as const

class ProfileFormBox extends Component<InnerProps & OutterProps, State> {
  private validatorFunctions: any[]
  private submitterFunctions: any[]

  constructor(props: InnerProps & OutterProps) {
    super(props)
    this.state = {
      isLoading: false,
      valid: true,
    }
    this.validatorFunctions = []
    this.submitterFunctions = []
  }

  public componentDidMount() {
    this.registerValidator(this.validate)
    this.registerSubmitter(this.submit)
  }

  private setStateAsync(state: any) {
    return new Promise(resolve => {
      this.setState(state, resolve)
    })
  }

  private registerValidator = (validator: any) => {
    this.validatorFunctions.push(validator)
  }

  private registerSubmitter = (submitter: any) => {
    this.submitterFunctions.push(submitter)
  }

  private handleSubmit = async ({ valid, profile }: any) => {
    const { onDataSave, onError } = this.props

    await this.setStateAsync({ isLoading: true, valid, profile })
    try {
      const validation$ = this.validatorFunctions.map(validator => validator())
      const validationResults = await Promise.all(validation$)
      const isValid = validationResults.reduce((acc, cur) => acc && cur, true)

      if (!isValid) {
        this.setState({ isLoading: false })

        return
      }

      const submit$ = this.submitterFunctions.map(submitter =>
        submitter(profile)
      )

      await Promise.all(submit$)
      this.setState({ isLoading: false })
      onDataSave()
    } catch (error) {
      onError(error)
    }
  }

  private validate = () => {
    return this.state.valid
  }

  private submit = (profile: ProfileInput) => {
    const { updateProfile } = this.props

    return updateProfile({ variables: { profile } })
  }

  public render() {
    const { profile, settings, runtime, cssHandles, blockDocument } = this.props
    const { isLoading } = this.state
    const showGenders = settings?.showGenders

    if (!profile) return null

    return (
      <div className={cssHandles.profileFormBoxContainer}>
        <ContentBox shouldAllowGrowing maxWidthStep={6}>
          <ProfileRules country={runtime.culture.country} shouldUseIOFetching>
            <ProfileContainer
              defaultProfile={profile}
              onSubmit={this.handleSubmit}
              shouldShowExtendedGenders={showGenders}
              blockDocument={blockDocument}
              SubmitButton={
                <Button type="submit" block size="small" isLoading={isLoading}>
                  <FormattedMessage id="vtex.profile-form@3.x::profile-form.save-changes" />
                </Button>
              }
            >
              <ExtensionPoint
                id="profile-input-container"
                registerValidator={this.registerValidator}
                registerSubmitter={this.registerSubmitter}
              />
            </ProfileContainer>
          </ProfileRules>
        </ContentBox>
      </div>
    )
  }
}

interface State {
  isLoading: boolean
  valid: boolean
}

interface InnerProps {
  settings?: Settings
  runtime: Runtime
  updateProfile: (args: Variables<UpdateProfileArgs>) => void
  cssHandles: CssHandles<typeof CSS_HANDLES>
}
interface OutterProps {
  onDataSave: () => void
  onError: (error: any) => void
  profile: Profile
  blockDocument?: boolean
}

const enhance = compose<InnerProps & OutterProps, OutterProps>(
  graphql(UpdateProfile, { name: 'updateProfile' }),
  withRuntimeContext,
  withSettings,
  withCssHandles(CSS_HANDLES)
)

export default enhance(ProfileFormBox)

```


[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/react/components/Profile/ProfileBox.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable react/prop-types */
import type { FunctionComponent } from 'react'
import React, { Fragment } from 'react'
import { FormattedMessage } from 'react-intl'
import { ExtensionPoint, withRuntimeContext } from 'vtex.render-runtime'
import { ProfileRules, ProfileSummary } from 'vtex.profile-form'
import { useCssHandles } from 'vtex.css-handles'

import ContentBox from '../shared/ContentBox'
import DataEntry from '../shared/DataEntry'

const CSS_HANDLES = [
  'profileBoxContainer',
  'nameContainer',
  'firstNameSubContainer',
  'lastNameSubContainer',
  'emailContainer',
  'genderContainer',
  'documentsSubContainer',
  'genderSubContainer',
  'phoneNumberContainer',
  'dateOfBirthSubContainer',
  'phoneNumberSubContainer',
  'corporateName',
  'tradeName',
  'corporateDocument',
  'businessPhoneContainer',
  'businessPhoneSubContainer',
  'stateRegistration',
] as const

const ProfileBox: FunctionComponent<Props> = ({
  profile,
  onEditClick,
  runtime,
}) => {
  const cssHandles = useCssHandles(CSS_HANDLES)

  if (!profile) return null

  return (
    <div className={cssHandles.profileBoxContainer}>
      <ContentBox
        shouldAllowGrowing
        lowerButton={
          <FormattedMessage id="vtex.store-messages@0.x::commons.edit" />
        }
        onLowerButtonClick={onEditClick}
      >
        <ProfileRules country={runtime.culture.country} shouldUseIOFetching>
          <ProfileSummary profile={profile}>
            {({
              personalData: {
                firstName,
                lastName,
                email,
                document,
                gender,
                birthDate,
                homePhone,
              },
              businessData: {
                corporateName,
                tradeName,
                corporateDocument,
                businessPhone,
                stateRegistration,
              },
              isCorporate,
            }: any) => (
              <Fragment>
                <div
                  className={`flex-ns flex-wrap ${cssHandles.nameContainer}`}
                >
                  <div
                    className={`mb8 flex-auto ${cssHandles.firstNameSubContainer}`}
                  >
                    <DataEntry label={firstName.label}>
                      {firstName.value}
                    </DataEntry>
                  </div>
                  <div
                    className={`mb8 w-50-ns ${cssHandles.lastNameSubContainer}`}
                  >
                    <DataEntry label={lastName.label}>
                      {lastName.value}
                    </DataEntry>
                  </div>
                </div>
                <div className={`mb8 ${cssHandles.emailContainer}`}>
                  <DataEntry label={email.label}>{email.value}</DataEntry>
                </div>
                <div
                  className={`flex-ns flex-wrap ${cssHandles.genderContainer}`}
                >
                  {document?.label && (
                    <div
                      className={`mb8 flex-auto ${cssHandles.documentsSubContainer}`}
                    >
                      <DataEntry label={document.label}>
                        {document.value}
                      </DataEntry>
                    </div>
                  )}
                  <div
                    className={`mb8 w-50-ns ${cssHandles.genderSubContainer}`}
                  >
                    <DataEntry label={gender.label}>{gender.value}</DataEntry>
                  </div>
                </div>
                <div
                  className={`flex-ns flex-wrap ${cssHandles.phoneNumberContainer}`}
                >
                  <div
                    className={`mb8 flex-auto ${cssHandles.dateOfBirthSubContainer}`}
                  >
                    <DataEntry label={birthDate.label}>
                      {birthDate.value}
                    </DataEntry>
                  </div>
                  <div
                    className={`mb8 w-50-ns ${cssHandles.phoneNumberSubContainer}`}
                  >
                    <DataEntry label={homePhone.label}>
                      {homePhone.value}
                    </DataEntry>
                  </div>
                </div>
                {isCorporate && (
                  <Fragment>
                    <div className={`mb8 ${cssHandles.corporateName}`}>
                      <DataEntry label={corporateName.label}>
                        {corporateName.value}
                      </DataEntry>
                    </div>
                    {tradeName?.label && (
                      <div className={`mb8 ${cssHandles.tradeName}`}>
                        <DataEntry label={tradeName.label}>
                          {tradeName.value}
                        </DataEntry>
                      </div>
                    )}
                    {corporateDocument?.label && (
                      <div className={`mb8 ${cssHandles.corporateDocument}`}>
                        <DataEntry label={corporateDocument.label}>
                          {corporateDocument.value}
                        </DataEntry>
                      </div>
                    )}
                    <div
                      className={`flex-ns flex-wrap ${cssHandles.businessPhoneContainer}`}
                    >
                      <div
                        className={`mb8 flex-auto ${cssHandles.businessPhoneSubContainer}`}
                      >
                        <DataEntry label={businessPhone.label}>
                          {businessPhone.value}
                        </DataEntry>
                      </div>
                      {stateRegistration?.label && (
                        <div
                          className={`mb8 w-50-ns ${cssHandles.stateRegistration}`}
                        >
                          <DataEntry label={stateRegistration.label}>
                            {stateRegistration.value}
                          </DataEntry>
                        </div>
                      )}
                    </div>
                  </Fragment>
                )}
              </Fragment>
            )}
          </ProfileSummary>
        </ProfileRules>
        <ExtensionPoint
          id="profile-display-container"
          render={(fields: Array<{ label: string; value: string }>) => (
            <div className="flex-ns flex-wrap">
              {fields.map(
                ({ label, value }: { label: string; value: string }) => (
                  <div className="mb8 w-50-ns" key={label}>
                    <DataEntry label={label}>{value}</DataEntry>
                  </div>
                )
              )}
            </div>
          )}
        />
      </ContentBox>
    </div>
  )
}

interface Props {
  profile: Profile
  runtime: Runtime
  onEditClick: () => void
}

export default withRuntimeContext(ProfileBox)

```


[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/react/components/Profile/NewsletterBox.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { defineMessages, injectIntl } from 'react-intl'
import { graphql } from 'react-apollo'
import { compose } from 'recompose'
import { Checkbox } from 'vtex.styleguide'
import { withCssHandles } from 'vtex.css-handles'

import ContentBox from '../shared/ContentBox'
import GET_NEWSLETTER from '../../graphql/getNewsletterOpt.gql'
import NEWSLETTER_MUTATION from '../../graphql/setOptInNewsletter.gql'

const CSS_HANDLES = [
  'newsletterBoxContainer',
  'newsletterContainerTitle',
  'newsletterContainerMessage',
  'passwordBox',
] as const

const messages = defineMessages({
  optinNewsLetter: {
    id: 'vtex.store-messages@0.x::personalData.newsletterOptIn',
    defaultMessage: '',
  },
  newsletter: {
    id: 'vtex.store-messages@0.x::personalData.newsletter',
    defaultMessage: '',
  },
  newsletterQuestion: {
    id: 'vtex.store-messages@0.x::personalData.newsletterQuestion',
    defaultMessage: '',
  },
})

class NewsletterBox extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      checked: props.isNewsletterOptIn,
    }
  }

  public componentDidUpdate(oldProps: Props) {
    if (oldProps.isNewsletterOptIn !== this.props.isNewsletterOptIn) {
      this.setState({ checked: this.props.isNewsletterOptIn })
    }
  }

  private debounceCall: NodeJS.Timeout | null | number = null

  private handleCheck = () => {
    const { setOptInNewsletter, userEmail } = this.props
    const { checked } = this.state

    clearInterval(this.debounceCall as NodeJS.Timeout)
    this.debounceCall = setTimeout(
      () =>
        setOptInNewsletter({
          variables: {
            email: userEmail,
            isNewsletterOptIn: !checked,
          },
        }),
      500
    )
    this.setState({ checked: !checked })
  }

  public render() {
    const { checked } = this.state
    const {
      cssHandles,
      intl: { formatMessage },
    } = this.props

    return (
      <div className={cssHandles.newsletterBoxContainer}>
        <ContentBox shouldAllowGrowing>
          <div className={cssHandles.newsletterContainerTitle}>
            {formatMessage(messages.newsletter)}
          </div>
          <div
            className={`c-muted-2 pt2 pb6 ${cssHandles.newsletterContainerMessage}`}
          >
            {formatMessage(messages.newsletterQuestion)}
          </div>
          <div className={`${cssHandles.passwordBox} w-100`}>
            <Checkbox
              checked={checked}
              id="newsletterOptIn"
              label={formatMessage(messages.optinNewsLetter)}
              name="newsletterOptIn"
              onChange={this.handleCheck}
            />
          </div>
        </ContentBox>
      </div>
    )
  }
}

interface State {
  checked: boolean
}

interface QueryData {
  profile: Pick<Profile, 'customFields'>
}

interface QueryResult {
  isNewsletterOptIn: boolean
}

interface Mutations {
  setOptInNewsletter: (args: Variables<SetOptInNewsletterArgs>) => Promise<void>
}

interface OuterProps {
  userEmail: string
}
interface InnerProps extends InjectedIntlProps, QueryResult, Mutations {
  cssHandles: CssHandles<typeof CSS_HANDLES>
}

type Props = OuterProps & InnerProps

const enhance = compose<Props, OuterProps>(
  graphql<Props, QueryData, unknown, QueryResult>(GET_NEWSLETTER, {
    props: ({ data }) => ({
      isNewsletterOptIn: data?.profile?.customFields?.[0].value === 'true',
    }),
  }),
  graphql(NEWSLETTER_MUTATION, {
    name: 'setOptInNewsletter',
    options: {
      refetchQueries: ['NewsletterOpt'],
    },
  }),
  injectIntl,
  withCssHandles(CSS_HANDLES)
)

export default enhance(NewsletterBox)

```


[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/react/components/Addresses/AddressForm.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component, Fragment } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { FormattedMessage, injectIntl } from 'react-intl'
import { compose, branch, renderComponent } from 'recompose'
import { graphql } from 'react-apollo'
import {
  AddressContainer,
  AddressForm as AddressFields,
  AddressRules,
  AddressSubmitter,
  AutoCompletedFields,
  CountrySelector,
  GoogleMapsContainer,
  Map,
  PostalCodeGetter,
} from 'vtex.address-form/components'
import { Button } from 'vtex.styleguide'
import { addValidation } from 'vtex.address-form/helpers'
import { StyleguideInput, GeolocationInput } from 'vtex.address-form/inputs'
import { withRuntimeContext } from 'vtex.render-runtime'

import type { Result } from '../../graphql/storeConfigs.gql'
import STORE_CONFIGS from '../../graphql/storeConfigs.gql'
import Loading from '../loaders/FormContent'
import getEmptyAddress from './emptyAddress'

const AUTO_COMPLETABLE_FIELDS = [
  'city',
  'geoCoordinates',
  'neighborhood',
  'number',
  'postalCode',
  'state',
  'street',
]

class AddressForm extends Component<InnerProps & OuterProps, State> {
  constructor(props: InnerProps & OuterProps) {
    super(props)

    let address: Address

    if (props.address === undefined) {
      const { runtime, shipsTo, receiverName, useGeolocation } = props

      let country

      if (useGeolocation) {
        country = runtime.culture.country
      } else {
        country = shipsTo.length > 0 ? shipsTo[0] : runtime.culture.country
      }

      address = getEmptyAddress(country, receiverName ?? '')
    } else {
      address = props.address
    }

    // eslint-disable-next-line @typescript-eslint/naming-convention
    const { __typename, addressName, ...addressValues } = address

    const addressWithValidation = addValidation({
      addressQuery: null,
      ...addressValues,
    })

    // if editing an existing address (address id exists), all fields start as valid
    if (addressValues.addressId) {
      AUTO_COMPLETABLE_FIELDS.forEach(field => {
        if (addressWithValidation[field].value === null) return

        addressWithValidation[field].geolocationAutoCompleted = true
        addressWithValidation[field].postalCodeAutoCompleted = true
        addressWithValidation[field].valid = true
      })
    }

    this.state = { address: addressWithValidation }
  }

  private handleSubmit = (isValid: boolean, address: Address) => {
    const { onSubmit } = this.props

    if (isValid) {
      onSubmit(address)
    }
  }

  private handleAddressChange = (newAddress: AddressFormFields) => {
    const curAddress = this.state.address

    // allow to edit only with geolocation component
    if (
      this.props.useGeolocation &&
      newAddress.addressQuery &&
      !AUTO_COMPLETABLE_FIELDS.some(
        field => newAddress[field]?.geolocationAutoCompleted
      )
    ) {
      AUTO_COMPLETABLE_FIELDS.forEach(field => {
        newAddress[field].value = null
        delete newAddress[field].valid
      })
    }

    const address = { ...curAddress, ...newAddress }

    this.setState({ address })
  }

  private hasGeoCoords() {
    const { address } = this.state

    return (
      address.geoCoordinates.geolocationAutoCompleted ||
      (Array.isArray(address.geoCoordinates.value) &&
        address.geoCoordinates.value.length === 2)
    )
  }

  private hasValidPostalCode() {
    const { address } = this.state

    return (
      address.postalCode.geolocationAutoCompleted ?? address.postalCode.valid
    )
  }

  private hasAutoCompletedFields() {
    const { address } = this.state

    return AUTO_COMPLETABLE_FIELDS.some(
      fieldName =>
        address?.[fieldName].geolocationAutoCompleted ??
        address?.[fieldName].postalCodeAutoCompleted
    )
  }

  private translateCountries() {
    const { shipsTo, intl } = this.props

    return shipsTo.map(code => ({
      label: intl.formatMessage({ id: `country.${code}` }),
      value: code,
    }))
  }

  public render() {
    const { address } = this.state
    const {
      intl,
      submitLabelId,
      isLoading,
      googleMapsApiKey,
      useGeolocation,
      isExistingAddress,
    } = this.props

    const shipCountries = this.translateCountries()
    const hasGeoCoords = this.hasGeoCoords()
    const hasValidPostalCode = this.hasValidPostalCode()
    const hasAutoCompletedFields = this.hasAutoCompletedFields()

    const enhancedAddress = {
      ...address,
      country: {
        ...address.country,
        disabled: !!isExistingAddress,
      },
    }

    return (
      <AddressRules
        country={address.country.value}
        shouldUseIOFetching
        useGeolocation={useGeolocation}
      >
        <AddressContainer
          address={enhancedAddress}
          Input={StyleguideInput}
          onChangeAddress={this.handleAddressChange}
          autoCompletePostalCode
        >
          <Fragment>
            <CountrySelector shipsTo={shipCountries} />

            {useGeolocation && (
              <GoogleMapsContainer
                apiKey={googleMapsApiKey}
                locale={intl.locale}
              >
                {({ loading, googleMaps }: GoogleMapsContainerArgs) => (
                  <Fragment>
                    {!hasAutoCompletedFields && (
                      <GeolocationInput
                        loadingGoogle={loading}
                        googleMaps={googleMaps}
                      />
                    )}

                    {hasGeoCoords && (
                      <Map
                        loadingGoogle={loading}
                        googleMaps={googleMaps}
                        mapProps={{ className: 'mb7 br2 h4' }}
                      />
                    )}
                  </Fragment>
                )}
              </GoogleMapsContainer>
            )}

            {useGeolocation === false && <PostalCodeGetter />}

            {(hasGeoCoords || hasValidPostalCode) && (
              <Fragment>
                {hasAutoCompletedFields && (
                  <div className="mb7">
                    <AutoCompletedFields>
                      <span className="c-link pointer">
                        <FormattedMessage id="vtex.address-form@4.x::address-form.edit" />
                      </span>
                    </AutoCompletedFields>
                  </div>
                )}
                <AddressFields
                  address={address}
                  Input={StyleguideInput}
                  onChangeAddress={this.handleAddressChange}
                  notApplicableLabel={intl.formatMessage({
                    id: 'vtex.store-messages@0.x::addresses.notApplicable',
                  })}
                />
              </Fragment>
            )}

            <AddressSubmitter onSubmit={this.handleSubmit}>
              {(handleSubmit: () => void) => (
                <Button
                  onClick={handleSubmit}
                  block
                  size="small"
                  isLoading={isLoading}
                  disabled={!hasGeoCoords && !hasValidPostalCode}
                >
                  <FormattedMessage id={submitLabelId} />
                </Button>
              )}
            </AddressSubmitter>
          </Fragment>
        </AddressContainer>
      </AddressRules>
    )
  }
}

interface MappedResult {
  googleMapsApiKey?: string
  useGeolocation: boolean
  shipsTo: string[]
  loading: boolean
}

interface InnerProps extends InjectedIntlProps, MappedResult {
  runtime: Runtime
}

interface OuterProps {
  isLoading?: boolean
  submitLabelId: string
  address?: Address
  receiverName?: string
  onError: () => void
  onSubmit: (address: Address) => void
  isExistingAddress?: boolean
}

type Props = InnerProps & OuterProps

interface State {
  address: AddressFormFields
}

export default compose<Props, OuterProps>(
  graphql<
    Record<string, unknown>,
    Result,
    Record<string, unknown>,
    MappedResult
  >(STORE_CONFIGS, {
    props: ({ data }) => ({
      loading: data?.loading ?? false,
      googleMapsApiKey: data?.configs?.googleMapsApiKey,
      useGeolocation: data?.configs?.geolocation ?? false,
      shipsTo: data?.logistics?.shipsTo ?? [],
    }),
  }),
  branch<Props>(({ loading }) => loading, renderComponent(Loading)),
  withRuntimeContext,
  injectIntl
)(AddressForm)

```


[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/react/components/Addresses/AddressBox.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { AddressSummary, AddressRules } from 'vtex.address-form'

import ContentBox from '../shared/ContentBox'

const AddressBox: FunctionComponent<Props> = ({ address, onEditClick }) => {
  return (
    <ContentBox
      lowerButton={
        <FormattedMessage id="vtex.store-messages@0.x::commons.edit" />
      }
      onLowerButtonClick={onEditClick}
    >
      <div className="lighter c-muted-2 lh-copy pv4 w5 h4">
        <AddressRules country={address.country} shouldUseIOFetching>
          <AddressSummary address={address} />
        </AddressRules>
      </div>
    </ContentBox>
  )
}

interface Props {
  address: Address
  onEditClick: () => void
}

export default AddressBox

```


[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/react/components/Addresses/emptyAddress.ts from the my-account VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default function getEmptyAddress(country: string, receiverName: string) {
  return {
    addressId: '',
    addressType: 'residential',
    city: null,
    complement: null,
    country,
    receiverName,
    geoCoordinates: [],
    neighborhood: null,
    number: null,
    postalCode: null,
    reference: null,
    state: null,
    street: null,
    addressQuery: 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 my-account/react/components/Addresses/AddressDeleter.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { graphql } from 'react-apollo'
import { Button } from 'vtex.styleguide'

import MUTATION from '../../graphql/deleteAddress.gql'

class AddressDeleter extends Component<OutterProps & InnerProps> {
  public state = {
    isLoading: false,
  }

  private handleDeleteClick = async () => {
    const { addressId, onAddressDeleted, deleteAddress, onError } = this.props

    if (this.state.isLoading) return

    try {
      this.setState({ isLoading: true })
      await deleteAddress({ variables: { addressId } })
      onAddressDeleted()
    } catch (error) {
      this.setState({ isLoading: false })
      onError()
    }
  }

  public render() {
    const { isLoading } = this.state

    return (
      <div className="mt5">
        <Button
          type="button"
          variation="danger"
          block
          size="small"
          onClick={this.handleDeleteClick}
          isLoading={isLoading}
        >
          <FormattedMessage id="vtex.store-messages@0.x::addresses.deleteAddress" />
        </Button>
      </div>
    )
  }
}

interface OutterProps {
  /** Callback for address deletion */
  onAddressDeleted: () => void
  /** Callback for error during deletion */
  onError: () => void
  /** Id of the address to be deleted */
  addressId: string
}

interface InnerProps {
  /** Mutation for deleting an address */
  deleteAddress: (args: Variables<DeleteAddressArgs>) => void
}

export default graphql<
  OutterProps,
  Record<string, unknown>,
  Record<string, unknown>,
  InnerProps
>(MUTATION, {
  name: 'deleteAddress',
})(AddressDeleter)

```


[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/react/components/Menu/MenuLink.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import type { RouteComponentProps } from 'vtex.my-account-commons/Router'
import { Link, withRouter } from 'vtex.my-account-commons/Router'

const MenuLink: FunctionComponent<Props> = ({ path, name, location }) => {
  return (
    <Link
      to={path}
      className={`
        vtex-account_menu-link f6 no-underline db hover-near-black pv5 mv3 pl5 bl bw2 nowrap ${
          location.pathname.indexOf(path) === -1
            ? 'c-muted-1 b--transparent'
            : 'c-on-base b b--action-primary'
        }`}
    >
      {name}
    </Link>
  )
}

interface Props extends RouteComponentProps {
  path: string
  name: string
}

export default withRouter(MenuLink)

```


[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/react/components/Menu/index.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React, { Component, Fragment } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl, FormattedMessage } from 'react-intl'
import { compose } from 'recompose'
import { ExtensionPoint, withRuntimeContext } from 'vtex.render-runtime'
import { ModalDialog } from 'vtex.styleguide'
import { withCssHandles } from 'vtex.css-handles'

import UserInfo from './UserInfo'
import MenuLink from './MenuLink'
import type { Settings } from '../shared/withSettings'
import { withSettings } from '../shared/withSettings'
import getRedirectLogout from '../../utils/getRedirectLogout'

const CSS_HANDLES = ['css', 'menu', 'menuLinks', 'menuLink'] as const

interface RenderLinksOptions {
  showMyCards: boolean | null
  showMyOrders: boolean | null
  showMyAddresses: boolean | null
  showMyAuthentication: boolean | null
}

function renderLinks(
  links: Link[],
  {
    showMyCards,
    showMyOrders,
    showMyAddresses,
    showMyAuthentication,
  }: RenderLinksOptions
) {
  const linksToDisplay = links.filter(link => {
    if (showMyCards === false && link.path === '/cards') {
      return false
    }

    if (showMyOrders === false && link.path === '/orders') {
      return false
    }

    if (showMyAddresses === false && link.path === '/addresses') {
      return false
    }

    if (showMyAuthentication === false && link.path === '/authentication') {
      return false
    }

    return true
  })

  return linksToDisplay.map(({ name, path }) => (
    <MenuLink path={path} name={name} key={name} />
  ))
}

class Menu extends Component<Props, { isModalOpen: boolean }> {
  public state = { isModalOpen: false }

  private handleModalToggle = () => {
    this.setState(prevState => ({ isModalOpen: !prevState.isModalOpen }))
  }

  public render() {
    const { cssHandles, intl, settings, runtime } = this.props
    const {
      showMyCards = false,
      showMyOrders = false,
      showMyAddresses = false,
      showMyAuthentication = false,
    } = settings || {}

    return (
      <aside
        className={`${cssHandles.menu} pv9 pv0-m-2 ph9 ph7-m ph8-l w-20-m w-100`}
      >
        <UserInfo />
        <nav className={cssHandles.menuLinks}>
          <ExtensionPoint
            id="my-account-menu"
            render={(links: Link[]) =>
              renderLinks(links, {
                showMyCards,
                showMyOrders,
                showMyAddresses,
                showMyAuthentication,
              })
            }
          />
          <Fragment>
            <div
              className={`
                    ${cssHandles.menuLink}
                    f6 no-underline db hover-near-black pv5 mv3 pl5 bl bw2 nowrap c-muted-1 b--transparent pointer
                  `}
              onClick={this.handleModalToggle}
            >
              <FormattedMessage id="vtex.store-messages@0.x::pages.logout" />
            </div>
            <ModalDialog
              centered
              confirmation={{
                onClick: getRedirectLogout(runtime),
                label: intl.formatMessage({
                  id: 'vtex.store-messages@0.x::pages.logout',
                }),
              }}
              cancelation={{
                onClick: this.handleModalToggle,
                label: intl.formatMessage({
                  id: 'vtex.store-messages@0.x::logoutModal.cancel',
                }),
              }}
              isOpen={this.state.isModalOpen}
              onClose={this.handleModalToggle}
            >
              <span className="t-heading-5 pa6">
                <FormattedMessage id="vtex.store-messages@0.x::logoutModal.title" />
              </span>
            </ModalDialog>
          </Fragment>
        </nav>
      </aside>
    )
  }
}

interface Link {
  name: string
  path: string
}

interface Props extends InjectedIntlProps {
  settings?: Settings
  cssHandles: CssHandles<typeof CSS_HANDLES>
  runtime: Runtime
}

export default compose<Props, Record<string, unknown>>(
  injectIntl,
  withSettings,
  withCssHandles(CSS_HANDLES),
  withRuntimeContext
)(Menu)

```


[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/react/components/Menu/UserInfoLoading.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { SkeletonPiece } from 'vtex.my-account-commons'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['shimmer'] as const

const UserInfoLoading: FC = () => {
  const cssHandles = useCssHandles(CSS_HANDLES)

  return (
    <div className="flex items-end mb7">
      <div className="mr5 relative">
        <div className="h3 w3 br-100 bg-light-silver">
          <div className={cssHandles.shimmer} />
        </div>
      </div>
      <div className="flex-auto w3">
        <div className="mb2">
          <SkeletonPiece width={50} />
        </div>
        <SkeletonPiece />
      </div>
    </div>
  )
}

export default UserInfoLoading

```


[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/react/components/Menu/UserInfo.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import { graphql } from 'react-apollo'
import { compose, branch, renderComponent } from 'recompose'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'

import type { Result } from '../../graphql/customerGreeting.gql'
import GREETING from '../../graphql/customerGreeting.gql'
import Loading from './UserInfoLoading'
import PictureRenderer from './ProfilePicture/PictureRenderer'

const CSS_HANDLES = [
  'userInfo',
  'userImage',
  'userGreeting',
  'userName',
  'userGreeting',
] as const

const UserInfo: FunctionComponent<Props> = ({ profilePicture, firstName }) => {
  const cssHandles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`${cssHandles.userInfo} flex flex-wrap items-end mb7`}>
      <div className={`${cssHandles.userImage} relative mr5 h3 w3`}>
        <PictureRenderer imagePath={profilePicture} />
      </div>
      {firstName ? (
        <div>
          <div
            className={`
              ${cssHandles.userGreeting} f5 fw3 c-muted-1 mb2 mt0-l mt2-m
            `}
          >
            <FormattedMessage id="vtex.store-messages@0.x::userInfo.greeting" />
            ,
          </div>
          <div className={`${cssHandles.userName} f4 c-on-base fw3 nowrap`}>
            {firstName}!
          </div>
        </div>
      ) : (
        <div className={`${cssHandles.userGreeting} f4 fw3 nowrap`}>
          <FormattedMessage id="vtex.store-messages@0.x::userInfo.greeting" />!
        </div>
      )}
    </div>
  )
}

interface Props {
  firstName: string
  profilePicture?: string
  loading: boolean
}

const enhance = compose<Props, Record<string, unknown>>(
  graphql<Record<string, unknown>, Result, Record<string, unknown>, Props>(
    GREETING,
    {
      props: ({ data }) => ({
        firstName: data?.profile?.firstName ?? '',
        profilePicture: data?.profile?.profilePicture ?? undefined,
        loading: data ? data.loading : false,
      }),
    }
  ),
  branch<Props>(({ loading }) => loading, renderComponent(Loading))
)

export default enhance(UserInfo)

```


[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/react/components/pages/ProfileEdit.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { compose, branch, renderComponent, withProps } from 'recompose'
import { withRouter } from 'vtex.my-account-commons/Router'

import { withContentWrapper } from '../shared/withContentWrapper'
import ProfileEditLoading from '../loaders/ProfileEditLoading'
import ProfileFormBox from '../Profile/ProfileFormBox'
import GET_PROFILE from '../../graphql/getProfile.gql'

export const headerConfig = {
  titleId: 'vtex.store-messages@0.x::pages.profileEdit',
  backButton: {
    titleId: 'vtex.store-messages@0.x::pages.profile',
    path: '/profile',
  },
}

class ProfileEdit extends Component<Props> {
  private handleGoBack = () => {
    this.props.history.push('/profile?success=true')
  }

  public render() {
    const { profile, handleError, blockDocument } = this.props

    return (
      <ProfileFormBox
        profile={profile}
        onDataSave={this.handleGoBack}
        onError={handleError}
        blockDocument={blockDocument}
      />
    )
  }
}

interface Props extends InjectedContentWrapperProps {
  data: { profile: Profile }
  profile: Profile
  history: any
  blockDocument?: boolean
}

const enhance = compose<Props, { blockDocument?: boolean }>(
  graphql(GET_PROFILE),
  branch<Props>(
    ({ data }) => data.profile == null,
    renderComponent(ProfileEditLoading)
  ),
  withProps(({ data }: Props) => {
    return { profile: data.profile }
  }),
  withRouter,
  withContentWrapper({
    headerConfig,
    handle: { configHandle: 'profileEdit', contentHandle: '' },
  })
)

export default enhance(ProfileEdit)

```


[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/react/components/pages/AddressEdit.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { compose, branch, renderComponent, withProps } from 'recompose'
import { GenericError } from 'vtex.my-account-commons'

import AddressEditLoading from '../loaders/AddressEditLoading'
import AddressForm from '../Addresses/AddressForm'
import AddressDeleter from '../Addresses/AddressDeleter'
import { withContentWrapper } from '../shared/withContentWrapper'
import ContentBox from '../shared/ContentBox'
import GET_ADDRESSES from '../../graphql/getAddresses.gql'
import UPDATE_ADDRESS from '../../graphql/updateAddress.gql'

export const headerConfig = {
  titleId: 'vtex.store-messages@0.x::pages.addressEdit',
  backButton: {
    titleId: 'vtex.store-messages@0.x::pages.addresses',
    path: '/addresses',
  },
}

class AddressEdit extends Component<Props> {
  private handleGoBack = () => {
    this.props.history.push('/addresses?success=true')
  }

  public state = {
    isLoading: false,
  }

  private handleDelete = () => this.handleGoBack()

  private handleSave = (address: Address) => {
    const { updateAddress, handleError } = this.props
    const { addressId, addressQuery, ...addressFields } = address

    this.setState({ isLoading: true })

    updateAddress({
      variables: {
        addressId,
        addressFields: addressFields as AddressInput,
      },
    })
      .then(() => this.handleGoBack())
      .catch(() => {
        handleError()
        this.setState({ isLoading: false })
      })
  }

  public render() {
    const { isLoading } = this.state
    const { addresses, addressId } = this.props
    const address = addresses.find(current => current.addressId === addressId)

    if (!address) {
      return (
        <GenericError errorId="vtex.store-messages@0.x::alert.addressNotFound" />
      )
    }

    const { addressName, ...normalizedAddress } = address

    return (
      <ContentBox shouldAllowGrowing maxWidthStep={6}>
        <AddressForm
          isLoading={isLoading}
          submitLabelId="vtex.store-messages@0.x::addresses.saveAddress"
          address={normalizedAddress}
          isExistingAddress={!!addressId}
          onSubmit={this.handleSave}
          onError={this.props.handleError}
        />
        <AddressDeleter
          addressId={addressId}
          onAddressDeleted={this.handleDelete}
          onError={this.props.handleError}
        />
      </ContentBox>
    )
  }
}

interface Data {
  profile: {
    addresses: Address[]
  }
}

interface Props extends InjectedContentWrapperProps {
  history: any
  addresses: Address[]
  addressId: string
  shipsTo: string[]
  updateAddress: (args: Variables<UpdateAddressArgs>) => Promise<void>
}

const enhance = compose<Props, void>(
  graphql(GET_ADDRESSES),
  graphql(UPDATE_ADDRESS, { name: 'updateAddress' }),
  branch(
    ({ data }: { data: Data }) => data.profile == null,
    renderComponent(AddressEditLoading)
  ),
  withProps(({ data, match }: { data: Data; match: any }) => ({
    addresses: data.profile.addresses,
    addressId: match.params.id,
  })),
  withContentWrapper({
    headerConfig,
    handle: { contentHandle: '', configHandle: 'addressEdit' },
  })
)

export default enhance(AddressEdit)

```


[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/react/components/pages/Profile.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { withRouter } from 'vtex.my-account-commons/Router'
import { compose, branch, renderComponent, withProps } from 'recompose'

import { withContentWrapper } from '../shared/withContentWrapper'
import ProfileLoading from '../loaders/ProfileLoading'
import ProfileBox from '../Profile/ProfileBox'
import Toast from '../shared/Toast'
import GET_PROFILE from '../../graphql/getProfile.gql'
import NewsletterBox from '../Profile/NewsletterBox'

export const headerConfig = {
  titleId: 'vtex.store-messages@0.x::pages.profile',
  hideBackButton: true,
}

class ProfileContainer extends Component<Props> {
  public state = {
    showToast: false,
  }

  public componentDidMount = () => {
    const { location } = this.props

    this.setState({ showToast: location.search.indexOf('success=true') > -1 })
  }

  private handleCloseToast = () => {
    this.setState({ showToast: false })
  }

  private handleGoToEdit = () => {
    this.props.history.push('/profile/edit')
  }

  public render() {
    const { profile } = this.props
    const { showToast } = this.state

    return (
      <main className="flex flex-column-s flex-row-ns">
        <div className="w-60-ns w-100-s">
          <ProfileBox profile={profile} onEditClick={this.handleGoToEdit} />
        </div>
        <div className="w-40-ns w-100-s">
          <NewsletterBox userEmail={profile.email} />
        </div>
        {showToast && (
          <Toast
            messageId="vtex.store-messages@0.x::alert.success"
            onClose={this.handleCloseToast}
          />
        )}
      </main>
    )
  }
}

interface Props {
  location: any
  history: any
  profile: Profile
  data: {
    profile: Profile
  }
}

const enhance = compose<Props, void>(
  graphql(GET_PROFILE),
  branch<Props>(
    ({ data }) => data.profile == null,
    renderComponent(ProfileLoading)
  ),
  withContentWrapper({
    headerConfig,
    handle: { configHandle: 'profile', contentHandle: '' },
  }),
  withProps(({ data }: Props) => ({ profile: data.profile })),
  withRouter
)

export default enhance(ProfileContainer)

```


[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/react/components/pages/AddressCreate.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import type { MutationResult, DataValue } from 'react-apollo'
import { graphql } from 'react-apollo'
import { compose, branch, renderComponent } from 'recompose'
import queryString from 'query-string'
import type { RouteComponentProps } from 'vtex.my-account-commons/Router'
import { withRouter } from 'vtex.my-account-commons/Router'

import { withContentWrapper } from '../shared/withContentWrapper'
import AddressCreateLoading from '../loaders/AddressCreateLoading'
import AddressForm from '../Addresses/AddressForm'
import ContentBox from '../shared/ContentBox'
import type {
  Args,
  Result as SaveAddressResult,
} from '../../graphql/saveAddress.gql'
import SAVE_ADDRESS from '../../graphql/saveAddress.gql'
import type { Result as CustomerInfo } from '../../graphql/customerGreeting.gql'
import CREATE_ADDRESS_INFO from '../../graphql/customerGreeting.gql'

export const headerConfig = {
  titleId: 'vtex.store-messages@0.x::pages.addressCreate',
  backButton: {
    titleId: 'vtex.store-messages@0.x::pages.addresses',
    path: '/addresses',
  },
}

function buildReceiverName(profile: CustomerInfo['profile']): string {
  const lastName = profile.lastName ? ` ${profile.lastName}` : ''

  return `${profile.firstName ?? ''}${lastName}`
}

class AddressCreate extends Component<Props> {
  public state = {
    isLoading: false,
  }

  private handleCreate = (address: Address) => {
    const { saveAddress, handleError, history, location } = this.props
    const { addressId, addressQuery, ...addressFields } = address

    this.setState({ isLoading: true })

    saveAddress({
      variables: {
        address: { ...addressFields } as AddressInput,
      },
    })
      .then(({ data }) => {
        const parsed = queryString.parse(location.search)

        if (parsed.returnUrl && data) {
          history.push({
            pathname: parsed.returnUrl,
            search: queryString.stringify({
              newAddressId: data.saveAddress.id,
            }),
          })
        } else {
          history.goBack()
        }
      })
      .catch(() => {
        handleError()
        this.setState({ isLoading: false })
      })
  }

  public render() {
    const { isLoading } = this.state
    const { receiverName } = this.props

    return (
      <ContentBox shouldAllowGrowing maxWidthStep={6}>
        <AddressForm
          receiverName={receiverName}
          isLoading={isLoading}
          submitLabelId="vtex.store-messages@0.x::addresses.addAddress"
          onSubmit={this.handleCreate}
          onError={this.props.handleError}
        />
      </ContentBox>
    )
  }
}

interface MappedResult {
  loading: boolean
  receiverName: string
  data: DataValue<unknown>
}

type Props = MappedResult &
  RouteComponentProps &
  InjectedContentWrapperProps & {
    saveAddress: (
      args: Variables<Args>
    ) => Promise<MutationResult<SaveAddressResult>>
  }

const enhance = compose<Props, void>(
  graphql<
    Record<string, unknown>,
    CustomerInfo,
    Record<string, unknown>,
    MappedResult
  >(CREATE_ADDRESS_INFO, {
    props: props => ({
      loading: props.data?.loading ?? true,
      data: props.data as DataValue<unknown>,
      receiverName: props.data?.profile
        ? buildReceiverName(props.data?.profile)
        : '',
    }),
  }),
  branch(
    ({ loading }: Props) => loading,
    renderComponent(AddressCreateLoading)
  ),
  graphql(SAVE_ADDRESS, { name: 'saveAddress' }),
  withContentWrapper({
    headerConfig,
    handle: { configHandle: 'addressCreate', contentHandle: '' },
  }),
  withRouter
)

export default enhance(AddressCreate)

```


[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/react/components/pages/Addresses.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { graphql } from 'react-apollo'
import { compose, branch, renderComponent, withProps } from 'recompose'
import { FormattedMessage } from 'react-intl'
import { EmptyState, Button } from 'vtex.styleguide'
import { withRouter, Link } from 'vtex.my-account-commons/Router'
import { withCssHandles } from 'vtex.css-handles'

import { withContentWrapper } from '../shared/withContentWrapper'
import AddressesLoading from '../loaders/AddressesLoading'
import AddressBox from '../Addresses/AddressBox'
import Toast from '../shared/Toast'
import GET_ADRESSES from '../../graphql/getAddresses.gql'

const CSS_HANDLES = ['addressBox'] as const

export const headerConfig = {
  titleId: 'vtex.store-messages@0.x::pages.addresses',
  headerContent(handle: any) {
    return (
      <Link className={handle} to="/addresses/new">
        <Button variation="primary" block size="small">
          <FormattedMessage id="vtex.store-messages@0.x::addresses.addAddress" />
        </Button>
      </Link>
    )
  },
}

function EmptyAddresses() {
  const title = (
    <FormattedMessage id="vtex.store-messages@0.x::addresses.notFound" />
  )

  return <EmptyState title={title} />
}

class Addresses extends Component<Props> {
  public state = {
    showToast: false,
  }

  public componentDidMount = () => {
    const { location } = this.props

    this.setState({ showToast: location.search.indexOf('success=true') > -1 })
  }

  private handleCloseToast = () => {
    this.setState({ showToast: false })
  }

  private handleStartEditing = (address: Address) => {
    window.scroll({ top: 0, left: 0, behavior: 'auto' })
    this.props.history.push(`/addresses/edit/${address.addressId}`)
  }

  public render() {
    const { cssHandles } = this.props

    return (
      <div
        className={`${cssHandles.addressBox} flex flex-wrap-ns items-start-ns relative tl`}
      >
        {this.props.addresses.map(address => (
          <AddressBox
            key={address.addressId}
            address={address}
            onEditClick={() => this.handleStartEditing(address)}
          />
        ))}

        {this.state.showToast && (
          <Toast
            messageId="vtex.store-messages@0.x::alert.success"
            onClose={this.handleCloseToast}
          />
        )}
      </div>
    )
  }
}

interface Data {
  loading: boolean
  profile: {
    addresses: Address[]
  } | null
}

interface Props {
  location: any
  history: any
  addresses: Address[]
  cssHandles: CssHandles<typeof CSS_HANDLES>
}

const enhance = compose<Props, void>(
  graphql(GET_ADRESSES, { options: { fetchPolicy: 'network-only' } }),
  branch(
    ({ data }: { data: Data }) => data.loading,
    renderComponent(AddressesLoading)
  ),
  withContentWrapper({
    headerConfig,
    handle: { configHandle: 'addressList', contentHandle: 'newAddressButton' },
  }),
  branch(
    ({ data }: { data: { profile: { addresses: Address[] } } }) =>
      data.profile == null || data.profile.addresses.length === 0,
    renderComponent(EmptyAddresses)
  ),
  withProps(({ data }: { data: Data }) => ({
    addresses: data.profile && data.profile.addresses,
  })),
  withRouter,
  withCssHandles(CSS_HANDLES)
)

export default enhance(Addresses)

```


[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/react/components/loaders/AddressEditLoading.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import { BaseLoading } from 'vtex.my-account-commons'

import { headerConfig } from '../pages/AddressEdit'
import FormLoader from './FormLoader'

const AddressEditLoading: FunctionComponent<Props> = ({ data }) => {
  return (
    <BaseLoading queryData={data} headerConfig={headerConfig}>
      <FormLoader />
    </BaseLoading>
  )
}

interface Props {
  data: unknown
}

export default AddressEditLoading

```


[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/react/components/loaders/ProfileLoading.tsx from the my-account VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FunctionComponent } from 'react'
import React from 'react'
import {
  SkeletonPiece,
  SkeletonBox,
  BaseLoading,
} from 'vtex.my-account-commons'

import { headerConfig } from '../pages/Profile'

const ProfileLoading: FunctionComponent<Props> = ({ data }) => {
  return (
    <BaseLoading queryData={data} headerConfig={headerConfig}>
      <main className="flex flex-column-s flex-row-ns">
        <div className="w-60-ns w-100-s">
          <SkeletonBox shouldAllowGrowing shouldShowLowerButton>
            <div className="flex flex-wrap mb8 justify-between w5">
              <SkeletonPiece width="40" size="4" />
              <SkeletonPiece width="50" size="4" />
            </div>
            <div className="mb8">
              <SkeletonPiece size="4" />
            </div>
            <div className="flex flex-wrap mb8 justify-between">
              <SkeletonPiece width="30" size="4" />
              <SkeletonPiece width="50" size="4" />
            </div>
            <div className="flex flex-wrap mb8 justify-between">
              <SkeletonPiece width="40" size="4" />
              <SkeletonPiece width="50" size="4" />
            </div>
          </SkeletonBox>
        </div>
        <div className="w-40-ns w-100-s">
          <SkeletonBox shouldAllowGrowing shouldShowLowerButton>
            <SkeletonPiece size="4" />
          </SkeletonBox>
          <SkeletonBox shouldAllowGrowing shouldShowLowerButton>
            <SkeletonPiece size="4" />
          </SkeletonBox>
        </div>
      </main>
    </BaseLoading>
  )
}

interface Props {
  data: any
}

export default ProfileLoading

```