[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 admin-messages-catalog/react/components/MessagesExport.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useCallback, useState } from 'react'
import { defineMessages, InjectedIntl, InjectedIntlProps, injectIntl } from 'react-intl'
import {
  Alert,
  Button,
  PageBlock,
  ToastProps,
  withToast
} from 'vtex.styleguide'
import { StepCounterControl } from '../typings/typings'
import { Entity } from '../utils/constants'
import DownloadCatalogDataInstruction from './utils/DownloadCatalogDataInstruction'
import DownloadCatalogRemainingInstructions from './utils/DownloadCatalogRemainingInstructions'
import ExportCatalogInstruction from './utils/ExportCatalogInstruction'
import ExportCatalogRemainingInstructions from './utils/ExportCatalogRemainingInstructions'
import StepCounter from './utils/StepCounter'

const messages = defineMessages({
  catalogExported: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.catalog-exported',
  },
  exportBegan: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.export-began',
  },
  exportCatalog: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.exportCatalog',
  },
  somethingWrong: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.something-wrong',
  },
})

type State = null | 'exporting' | 'exported' | 'error'

export interface ExportInstructionProps extends InjectedIntlProps {
  email: string
}

const getExportInstruction = (entity: Entity, props: ExportInstructionProps) => {
  switch(entity) {
    case 'product':
    case 'sku':
      return <ExportCatalogInstruction {...props} />
    case 'brand':
    case 'category':
      return <DownloadCatalogDataInstruction {...props} />
    default:
      return null
  }
}

const getRemaningInstructions = (entity: Entity, props: InjectedIntlProps) => {
  switch(entity) {
    case 'product':
    case 'sku':
      return <ExportCatalogRemainingInstructions {...props} entity={entity} />
    case 'brand':
    case 'category':
      return <DownloadCatalogRemainingInstructions {...props} entity={entity} />
    default:
      return null
  }
}

interface ButtonProps extends InjectedIntlProps {
  entity: Entity
  exportState: State
  onExportCSV: () => void
}

const ExportButton = ({ entity, intl, exportState, onExportCSV }: ButtonProps) => {
  switch (entity) {
    case 'product':
    case 'sku':
      return (
        <Button
          variation="secondary"
          isLoading={exportState === 'exporting'}
          disabled={exportState === 'exported'}
          onClick={onExportCSV}
        >
          {exportState === 'exported'
            ? intl.formatMessage(messages.catalogExported)
            : intl.formatMessage(messages.exportCatalog)}
        </Button>
      )
    case 'brand':
        return (
          <Button
            variation="secondary"
            href="/_v/private/vtex.admin-messages/v1/brands"
          >
            {intl.formatMessage(messages.exportCatalog)}
          </Button>
        )
    case 'category':
        return (
          <Button
            variation="secondary"
            href="/_v/private/vtex.admin-messages/v1/categories"
          >
            {intl.formatMessage(messages.exportCatalog)}
          </Button>
        )
    default:
      return null
  }
}

interface Props extends ToastProps {
  email: string
  entity: Entity
  exportCSV: () => Promise<any>
  intl: InjectedIntl
  stepCounterControl: StepCounterControl
}

const MessagesExport: FC<Props> = ({
  email,
  entity,
  exportCSV,
  intl,
  showToast,
  stepCounterControl,
}) => {
  const [exportState, setExportState] = useState<State>(null)

  const onExportCSV = useCallback(() => {
    setExportState('exporting')
    exportCSV()
      .catch(() => setExportState('error'))
      .then(() => {
        setExportState('exported')
        showToast(intl.formatMessage(messages.exportBegan))
      })
  }, [])

  return (
    <PageBlock>
      {exportState === 'error' && (
        <div className="mb7">
          <Alert type="error" onClose={() => setExportState(null)}>
            {intl.formatMessage(messages.somethingWrong)}
          </Alert>
        </div>
      )}
      <div className="bb b--muted-4  nh7 ph7 pb7 mb7">
        <div className="flex">
          {getExportInstruction(entity, { email, intl })}
          <div className="flex-grow-1 tr">
            <ExportButton
              entity={entity}
              intl={intl}
              exportState={exportState}
              onExportCSV={onExportCSV}
            />
          </div>
        </div>
      </div>
      {getRemaningInstructions(entity, { intl })}
      <StepCounter intl={intl} {...stepCounterControl} />
    </PageBlock>
  )
}

export default withToast(injectIntl(MessagesExport))

```


[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 admin-messages-catalog/react/graphql/ExportProductCatalog.graphql from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation ExportProductCatalog {
  exportProductCatalog
}

```


[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 admin-messages-catalog/react/graphql/GetUserEmail.graphql from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```graphql
query GetUserEmail {
  topbarData {
    profile {
      email
    }
  }
}

```


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

[User] Show me the implementation of admin-messages-catalog/react/graphql/AddTranslations.graphql from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation AddTranslations($translations: [MessagesFromProvider]!, $entity: Entity!, $language: String!) {
  addTranslations(translations: $translations, entity: $entity, language: $language) {
    # Returns provider of failed translations
    provider
  }
}

```


[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 admin-messages-catalog/react/components/utils/ExportCatalogRemainingInstructions.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, InjectedIntlProps } from 'react-intl'
import { Entity } from '../../utils/constants'
import ColumnBox from './ColumnBox'
import Instruction from './Instruction'

const messages = defineMessages({
  instruction1: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.instruction1',
  },
  instruction2: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.instruction2',
  },
  instruction3: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.instruction3',
  },
  instruction4: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.instruction4',
  },
  instruction5: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.instruction5',
  },
})

interface Props extends InjectedIntlProps {
  entity: Entity
}

const ExportCatalogRemainingInstructions = ({ entity, intl }: Props) => (
  <>
    <Instruction intl={intl} message={messages.instruction2} />
    <Instruction intl={intl} message={messages.instruction3} />
    <div>
      <Instruction intl={intl} message={messages.instruction4} />
      <ColumnBox entity={entity} />
    </div>
    <Instruction intl={intl} message={messages.instruction5} />
  </>
)

export default ExportCatalogRemainingInstructions

```


[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 admin-messages-catalog/react/components/utils/Instruction.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage, InjectedIntlProps } from 'react-intl'

interface InstructionProps extends InjectedIntlProps {
  message: FormattedMessage.MessageDescriptor
}

const Instruction = ({ intl, message }: InstructionProps) => (
  <p className="mv7">{intl.formatMessage(message)}</p>
)

export default Instruction

```


[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 admin-messages-catalog/react/components/utils/LanguagePicker.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Dispatch, FC, SetStateAction } from 'react'
import { defineMessages, FormattedMessage, InjectedIntl } from 'react-intl'

import { Dropdown } from 'vtex.styleguide'

import { SupportedLocale } from '../../typings/typings'

const {
  english,
  french,
  pickLang,
  portuguese,
  spanish,
  targetLang,
} = defineMessages({
  english: {
    defaultMessage: '',
    id: 'admin/messages.messages-upload.pick-lang.en',
  },
  french: {
    defaultMessage: '',
    id: 'admin/messages.messages-upload.pick-lang.fr',
  },
  pickLang: {
    defaultMessage: '',
    id: 'admin/messages.messages-upload.pick-lang',
  },
  portuguese: {
    defaultMessage: '',
    id: 'admin/messages.messages-upload.pick-lang.pt',
  },
  spanish: {
    defaultMessage: '',
    id: 'admin/messages.messages-upload.pick-lang.es',
  },
  targetLang: {
    defaultMessage: '',
    id: 'admin/messages.messages-upload.target-lang',
  },
})

export const LOCALE_TO_MESSAGE: Record<
  SupportedLocale,
  FormattedMessage.MessageDescriptor
> = {
  en: english,
  es: spanish,
  fr: french,
  pt: portuguese,
}

function getLanguageOptions(intl: InjectedIntl) {
  return [
    {
      label: intl.formatMessage(LOCALE_TO_MESSAGE.en),
      value: 'en',
    },
    {
      label: intl.formatMessage(LOCALE_TO_MESSAGE.pt),
      value: 'pt',
    },
    {
      label: intl.formatMessage(LOCALE_TO_MESSAGE.es),
      value: 'es',
    },
    {
      label: intl.formatMessage(LOCALE_TO_MESSAGE.fr),
      value: 'fr',
    },
  ]
}

const onChangeLanguage = (setLocale: (lang: SupportedLocale) => void) => (
  _: React.ChangeEvent,
  value: string
) => setLocale(value as SupportedLocale)

interface Props {
  intl: InjectedIntl
  locale: SupportedLocale | null
  setLocale: Dispatch<SetStateAction<SupportedLocale | null>>
}

const LanguagePicker: FC<Props> = ({ intl, locale, setLocale }) => {
  return (
    <div className="flex items-center mv7">
      <div className="flex-grow-1">
        <p className="mb1 mt0">
          {intl.formatMessage(targetLang)}
        </p>
      </div>
      <div className="w-40 tr">
        <Dropdown
          placeholder={intl.formatMessage(pickLang)}
          onChange={onChangeLanguage(setLocale)}
          options={getLanguageOptions(intl)}
          value={locale || ''}
        />
      </div>
    </div>
  )
}

export default LanguagePicker
```


[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 admin-messages-catalog/react/components/utils/StepCounter.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { defineMessages, InjectedIntl } from 'react-intl'

import { Button } from 'vtex.styleguide'
import { StepCounterControl } from '../../typings/typings'

const messages = defineMessages({
  back: {
    defaultMessage: '',
    id: 'admin/messages.back',
  },
  next: {
    defaultMessage: '',
    id: 'admin/messages.next',
  },
  stepCounter: {
    defaultMessage: '',
    id: 'admin/messages.stepCounter',
  },
})

interface Props extends StepCounterControl {
  intl: InjectedIntl
  removeBack?: boolean
  nextDisabled?: boolean
}

const StepCounter: FC<Props> = ({
  intl,
  back,
  current,
  next,
  nextDisabled,
  removeBack,
  total,
}) => {
  return (
    <div className="flex items-center">
      <div className="c-muted-1 f6">
        {intl.formatMessage(messages.stepCounter, { current, total })}
      </div>
      <div className="flex-grow-1 tr">
        {current === 1 || removeBack ? null : (
          <span className="mh2">
            <Button variation="tertiary" onClick={back}>
              {intl.formatMessage(messages.back)}
            </Button>
          </span>
        )}
        {current === total ? null : (
          <span className="mh2">
            <Button disabled={nextDisabled} onClick={next}>
              {intl.formatMessage(messages.next)}
            </Button>
          </span>
        )}
      </div>
    </div>
  )
}

export default StepCounter

```


[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 admin-messages-catalog/react/components/utils/DownloadCatalogRemainingInstructions.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, InjectedIntlProps } from 'react-intl'
import { Entity } from '../../utils/constants'
import ColumnBox from './ColumnBox'
import Instruction from './Instruction'

const messages = defineMessages({
  instruction2: {
    defaultMessage: '',
    id: 'admin/messages.catalog.download.instruction2',
  },
  instruction3: {
    defaultMessage: '',
    id: 'admin/messages.catalog.download.instruction3',
  },
  instruction4: {
    defaultMessage: '',
    id: 'admin/messages.catalog.download.instruction4',
  },
})

interface Props extends InjectedIntlProps {
  entity: Entity
}

const DownloadCatalogRemainingInstructions = ({ entity, intl }: Props) => (
  <>
    <Instruction intl={intl} message={messages.instruction2} />
    <div>
      <Instruction intl={intl} message={messages.instruction3} />
      <ColumnBox entity={entity} />
    </div>
    <Instruction intl={intl} message={messages.instruction4} />
  </>
)

export default DownloadCatalogRemainingInstructions

```


[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 admin-messages-catalog/react/components/utils/ExportCatalogInstruction.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import { ExportInstructionProps } from '../MessagesExport'

const messages = defineMessages({
  instruction1: {
    defaultMessage: '',
    id: 'admin/messages.catalog.export.instruction1',
  },
})

const ExportCatalogInstruction = ({
  email,
  intl,
}: ExportInstructionProps) => (
  <div>
    <p className="mb1 mt0">{intl.formatMessage(messages.instruction1)}</p>
    <p className="t-mini c-muted-2 mt1 pl5">{email}</p>
  </div>
)

export default ExportCatalogInstruction

```


[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 admin-messages-catalog/react/components/utils/DownloadCatalogDataInstruction.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import { ExportInstructionProps } from '../MessagesExport'

const messages = defineMessages({
  instruction: {
    defaultMessage: '',
    id: 'admin/messages.catalog.download.instruction1',
  },
})

const DownloadCatalogDataInstruction = ({ intl }: ExportInstructionProps) => (
  <p className="mb1 mt0">{intl.formatMessage(messages.instruction)}</p>
)

export default DownloadCatalogDataInstruction

```


[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 admin-messages-catalog/react/components/utils/ColumnBox.tsx from the admin-messages-catalog VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { defineMessages, InjectedIntlProps, injectIntl } from 'react-intl'
import { Box } from 'vtex.styleguide'

import { BrandTranslatableField } from '../../../node/clients/catalogGraphQL/brand'
import { CategoryTranslatableField } from '../../../node/clients/catalogGraphQL/category'
import { ProductTranslatableField } from '../../../node/clients/catalogGraphQL/product'
import { SKUTranslatableField } from '../../../node/clients/catalogGraphQL/sku'
import { Entity, ENTITY_FIELDS } from '../../utils/constants'

interface ReactIntlMessage {
  id: string
  defaultMessage?: string
}

const productMessages: Record<keyof ProductTranslatableField, ReactIntlMessage> = defineMessages({
  description: { defaultMessage: '', id: 'admin/messages.catalog.product.description' },
  descriptionShort: { defaultMessage: '', id: 'admin/messages.catalog.product.descriptionShort' },
  // keywords: { defaultMessage: '', id: 'admin/messages.catalog.product.keywords' },
  metaTagDescription: { defaultMessage: '', id: 'admin/messages.catalog.product.metaTagDescription' },
  name: { defaultMessage: '', id: 'admin/messages.catalog.product.name' },
  titleTag: { defaultMessage: '', id: 'admin/messages.catalog.product.titleTag' },
})

const skuMessages: Record<keyof SKUTranslatableField, ReactIntlMessage>  = defineMessages({
  name: { defaultMessage: '', id: 'admin/messages.catalog.sku.name' },
  // nameComplete: { defaultMessage: '', id: 'admin/messages.catalog.sku.name-complete' },
})

const brandMessages: Record<keyof BrandTranslatableField, ReactIntlMessage> = defineMessages({
  // metaTagDescription: { defaultMessage: '', id: 'admin/messages.catalog.brand.metaTagDescription' },
  name: { defaultMessage: '', id: 'admin/messages.catalog.brand.name' },
  // title: { defaultMessage: '', id: 'admin/messages.catalog.brand.title' },
})

const categoryMessages: Record<keyof CategoryTranslatableField, ReactIntlMessage> = defineMessages({
  // MetaTagDescription: { defaultMessage: '', id: 'admin/messages.catalog.category.metaTagDescription' },
  name: { defaultMessage: '', id: 'admin/messages.catalog.category.name' },
  title: { defaultMessage: '', id: 'admin/messages.catalog.category.title' },
})

const entityMessages: Record<Entity, ReactIntl.Messages> = {
  brand: brandMessages,
  category: categoryMessages,
  product: productMessages,
  sku: skuMessages,
  specification: {},
}

interface ColumnProps extends InjectedIntlProps {
  entity: Entity
  field: string
}

const ColumnDescription: FC<ColumnProps> = ({ entity, field, intl }) => {
  return (
    <p>
      <span className="mr3 fw5">{ENTITY_FIELDS[entity][field]}</span>{' '}
      <span className="f6">{intl.formatMessage(entityMessages[entity][field])}</span>
    </p>
  )
}

interface Props extends InjectedIntlProps {
  entity: Entity
}

const getTranslatableFields = (entity: Entity) => {
  return Object.keys(ENTITY_FIELDS[entity])
}

const ColumnsBox: FC<Props> = ({ entity, intl }) => (
  <Box noPadding>
    <div className="c-muted-1 ph5 pv2">
      {getTranslatableFields(entity).map((field: string) => (
        <ColumnDescription
          entity={entity}
          field={field}
          intl={intl}
          key={field}
        />
      ))}
    </div>
  </Box>
)

export default injectIntl(ColumnsBox)
```


[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 address-locator/messages/pt.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/address-locator.address-search-label": "Digite o seu endereço abaixo",
  "store/address-locator.address-search-placeholder": "Rua, cidade, estado",
  "store/address-locator.address-search-number-label": "Número",
  "store/address-locator.address-search-number-placeholder": "ex 90",
  "store/address-locator.address-search-street-label": "Endereço",
  "store/address-locator.address-search-street-placeholder": "ex Avenida Paulista",
  "store/address-locator.address-search-neighborhood-label": "Bairro",
  "store/address-locator.address-search-neighborhood-placeholder": "ex Botafogo",
  "store/address-locator.address-search-postalCode-label": "CEP",
  "store/address-locator.address-search-postalCode-placeholder": "ex 00000-000",
  "store/address-locator.address-search-complement-label": "Complemento Opcional",
  "store/address-locator.address-search-complement-placeholder": "ex 302",
  "store/address-locator.address-search-not-found-error": "Endereço não encontrado. Por favor, tente outro endereço.",
  "store/address-locator.address-search-timeout-error": "Timeout",
  "store/address-locator.address-search-position-unavailable-error": "Position unavailable",
  "store/address-locator.address-search-position-denied-error": "Geolocation permission denied",
  "store/address-locator.address-search-button": "Entregar neste endereço",
  "store/address-locator.address-search-invalid-address": "O endereço informado deve conter nome da rua, bairro, cidade e estado",
  "store/address-locator.address-page-title": "Onde quer sua entrega?",
  "store/address-locator.address-redeem-recurring": "Comprando de novo?",
  "store/address-locator.address-redeem-button": "Buscar endereço",
  "admin/address-locator.address-manager-title": "Seus Endereços",
  "admin/address-locator.address-manager-description": "Adicione e gerencie seus Endereços",
  "admin/address-locator.address-manager.logo-title": "Logo",
  "store/address-locator.pickup-button": "Encontre um ponto de retirada",
  "store/address-locator.graphql-error": "Encontramos problemas. Por favor, tente novamente",
  "store/address-manager.address-list": "Endereços anteriores",
  "store/profile-form.field.homePhone": "Digite o seu telefone abaixo",
  "store/profile-form.error.INVALID_FIELD": "Número de telefone inválido",
  "store/profile-form.error.EMPTY_FIELD": "Campo obrigatório",
  "store/profile-form.error.NOT_FOUND": "Não encontramos uma conta com este telefone"
}

```


[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 address-locator/messages/ar-SA.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/address-locator.address-search-label": "أدخل عنوانك في الأسفل",
  "store/address-locator.address-search-placeholder": "الشارع، المدينة، الولاية",
  "store/address-locator.address-search-number-label": "الرقم",
  "store/address-locator.address-search-number-placeholder": "ex 90",
  "store/address-locator.address-search-street-label": "الشارع",
  "store/address-locator.address-search-street-placeholder": "شارع ex 4th",
  "store/address-locator.address-search-neighborhood-label": "المنطقة",
  "store/address-locator.address-search-neighborhood-placeholder": "مثال: بروكلين",
  "store/address-locator.address-search-postalCode-label": "الرمز البريدي",
  "store/address-locator.address-search-postalCode-placeholder": "ex 1000",
  "store/address-locator.address-search-complement-label": "إكمال اختياري",
  "store/address-locator.address-search-complement-placeholder": "ex 302",
  "store/address-locator.address-search-not-found-error": "لم يتم العثور على العنوان. الرجاء محاولة عنوان آخر.",
  "store/address-locator.address-search-timeout-error": "مهلة الموضع",
  "store/address-locator.address-search-position-unavailable-error": "موضع غير متاح",
  "store/address-locator.address-search-position-denied-error": "تم رفض إذن تحديد الموقع الجغرافي",
  "store/address-locator.address-search-button": "طلب على هذا العنوان",
  "store/address-locator.address-search-invalid-address": "يجب أن يحتوي العنوان على أسماء الشارع والمنطقة والمدينة والولاية",
  "store/address-locator.address-page-title": "أين تريد إرسال التوصيل الخاص بك؟",
  "store/address-locator.address-redeem-recurring": "طلب مرة أخرى؟",
  "store/address-locator.address-redeem-button": "البحث عن عنوان",
  "admin/address-locator.address-manager-title": "عناوينك",
  "admin/address-locator.address-manager-description": "إضافة وإدارة عناوينك",
  "admin/address-locator.address-manager.logo-title": "الشعار",
  "store/address-locator.pickup-button": "ايحاد نقطة التقاط",
  "store/address-locator.graphql-error": "لقد حدث خطأ. الرجاء المحاولة مرة أخرى",
  "store/address-manager.address-list": "العناوين السابقة",
  "store/profile-form.field.homePhone": "اكتب رقم هاتفك أدناه",
  "store/profile-form.error.INVALID_FIELD": "رقم هاتف غير صالح",
  "store/profile-form.error.EMPTY_FIELD": "حقل مطلوب",
  "store/profile-form.error.NOT_FOUND": "لم نتمكن من العثور على حساب بهذا الهاتف"
}

```


[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 address-locator/messages/en.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/address-locator.address-search-label": "Enter your address below",
  "store/address-locator.address-search-placeholder": "Street, city, state",
  "store/address-locator.address-search-number-label": "Number",
  "store/address-locator.address-search-number-placeholder": "ex 90",
  "store/address-locator.address-search-street-label": "Street",
  "store/address-locator.address-search-street-placeholder": "ex 4th Avenue",
  "store/address-locator.address-search-neighborhood-label": "Neighborhood",
  "store/address-locator.address-search-neighborhood-placeholder": "ex Brooklyn",
  "store/address-locator.address-search-postalCode-label": "Zip Code",
  "store/address-locator.address-search-postalCode-placeholder": "ex 1000",
  "store/address-locator.address-search-complement-label": "Complement Optional",
  "store/address-locator.address-search-complement-placeholder": "ex 302",
  "store/address-locator.address-search-not-found-error": "Address not found. Please try another address.",
  "store/address-locator.address-search-timeout-error": "Position timeout",
  "store/address-locator.address-search-position-unavailable-error": "Position unavailable",
  "store/address-locator.address-search-position-denied-error": "Geolocation permission denied",
  "store/address-locator.address-search-button": "Order on this address",
  "store/address-locator.address-search-invalid-address": "The address must contain street, neighborhood, city and state names",
  "store/address-locator.address-page-title": "Where do you want your delivery?",
  "store/address-locator.address-redeem-recurring": "Ordering again?",
  "store/address-locator.address-redeem-button": "Find address",
  "admin/address-locator.address-manager-title": "Your Addresses",
  "admin/address-locator.address-manager-description": "Add and manage your Addresses",
  "admin/address-locator.address-manager.logo-title": "Logo",
  "store/address-locator.pickup-button": "Find a pickup point",
  "store/address-locator.graphql-error": "An error has ocurred. Please try again",
  "store/address-manager.address-list": "Previous Addresses",
  "store/profile-form.field.homePhone": "Type your phone below",
  "store/profile-form.error.INVALID_FIELD": "Invalid phone number",
  "store/profile-form.error.EMPTY_FIELD": "Required field",
  "store/profile-form.error.NOT_FOUND": "We couldn't find an account with this phone"
}

```


[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 address-locator/messages/context.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/address-locator.address-search-label": "store/address-locator.address-search-label",
  "store/address-locator.address-search-placeholder": "store/address-locator.address-search-placeholder",
  "store/address-locator.address-search-number-label": "store/address-locator.address-search-number-label",
  "store/address-locator.address-search-number-placeholder": "store/address-locator.address-search-number-placeholder",
  "store/address-locator.address-search-street-label": "store/address-locator.address-search-street-label",
  "store/address-locator.address-search-street-placeholder": "store/address-locator.address-search-street-placeholder",
  "store/address-locator.address-search-neighborhood-label": "store/address-locator.address-search-neighborhood-label",
  "store/address-locator.address-search-neighborhood-placeholder": "store/address-locator.address-search-neighborhood-placeholder",
  "store/address-locator.address-search-postalCode-label": "store/address-locator.address-search-postalCode-label",
  "store/address-locator.address-search-postalCode-placeholder": "store/address-locator.address-search-postalCode-placeholder",
  "store/address-locator.address-search-complement-label": "store/address-locator.address-search-complement-label",
  "store/address-locator.address-search-complement-placeholder": "store/address-locator.address-search-complement-placeholder",
  "store/address-locator.address-search-not-found-error": "store/address-locator.address-search-not-found-error",
  "store/address-locator.address-search-timeout-error": "store/address-locator.address-search-timeout-error",
  "store/address-locator.address-search-position-unavailable-error": "store/address-locator.address-search-position-unavailable-error",
  "store/address-locator.address-search-position-denied-error": "store/address-locator.address-search-position-denied-error",
  "store/address-locator.address-search-button": "store/address-locator.address-search-button",
  "store/address-locator.address-search-invalid-address": "store/address-locator.address-search-invalid-address",
  "store/address-locator.address-page-title": "store/address-locator.address-page-title",
  "store/address-locator.address-redeem-recurring": "store/address-locator.address-redeem-recurring",
  "store/address-locator.address-redeem-button": "store/address-locator.address-redeem-button",
  "admin/address-locator.address-manager-title": "admin/address-locator.address-manager-title",
  "admin/address-locator.address-manager-description": "admin/address-locator.address-manager-description",
  "admin/address-locator.address-manager.logo-title": "admin/address-locator.address-manager.logo-title",
  "store/address-locator.pickup-button": "store/address-locator.pickup-button",
  "store/address-locator.graphql-error": "store/address-locator.graphql-error",
  "store/address-manager.address-list": "store/address-manager.address-list",
  "store/profile-form.field.homePhone": "store/profile-form.field.homePhone",
  "store/profile-form.error.INVALID_FIELD": "store/profile-form.error.INVALID_FIELD",
  "store/profile-form.error.EMPTY_FIELD": "store/profile-form.error.EMPTY_FIELD",
  "store/profile-form.error.NOT_FOUND": "store/profile-form.error.NOT_FOUND"
}

```


[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 address-locator/messages/es.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/address-locator.address-search-label": "Introduzca su dirección abajo",
  "store/address-locator.address-search-placeholder": "Calle, ciudad, estado",
  "store/address-locator.address-search-number-label": "Número",
  "store/address-locator.address-search-number-placeholder": "ex 90",
  "store/address-locator.address-search-street-label": "Calle",
  "store/address-locator.address-search-street-placeholder": "ex Av. Juarez",
  "store/address-locator.address-search-neighborhood-label": "Barrio",
  "store/address-locator.address-search-neighborhood-placeholder": "ex Centro",
  "store/address-locator.address-search-postalCode-label": "Código Postal",
  "store/address-locator.address-search-postalCode-placeholder": "ex 1000",
  "store/address-locator.address-search-complement-label": "Complemento Opcional",
  "store/address-locator.address-search-complement-placeholder": "ex 302",
  "store/address-locator.address-search-not-found-error": "Dirección no encontrada. Por favor, intente otra dirección.",
  "store/address-locator.address-search-timeout-error": "Expiró el tiempo de espera",
  "store/address-locator.address-search-position-unavailable-error": "Posición no disponible",
  "store/address-locator.address-search-position-denied-error": "Permiso de geolocalización denegado",
  "store/address-locator.address-search-button": "Entregar en esta dirección",
  "store/address-locator.address-search-invalid-address": "La ubicación indicada debe contener el nombre de la calle, el barrio, la ciudad y el estado",
  "store/address-locator.address-page-title": "¿A donde quieres enviar tu pedido?",
  "store/address-locator.address-redeem-recurring": "¿Comprando de nuevo?",
  "store/address-locator.address-redeem-button": "Buscar dirección",
  "admin/address-locator.address-manager-title": "Sus Direcciones",
  "admin/address-locator.address-manager-description": "Agregar y gestionar sus Direcciones",
  "admin/address-locator.address-manager.logo-title": "Logotipo",
  "store/address-locator.pickup-button": "Busca un punto de retirada",
  "store/address-locator.graphql-error": "Encontramos problemas. Por favor, inténtelo de nuevo",
  "store/address-manager.address-list": "Direcciones anteriores",
  "store/profile-form.field.homePhone": "Introduzca su teléfono a continuación",
  "store/profile-form.error.INVALID_FIELD": "Numero de telefono invalido",
  "store/profile-form.error.EMPTY_FIELD": "Required field",
  "store/profile-form.error.NOT_FOUND": "No pudimos encontrar una cuenta con este teléfono"
}

```


[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 address-locator/docs/README.md from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```markdown
# address-locator
VTEX address locator app to delivery store

```


[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 address-locator/react/AddressRedeem.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import AddressRedeem from './components/AddressRedeem/index'
export default AddressRedeem

```


[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 address-locator/react/global.css from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```css
.vtex-address-locator__address-redeem input[name="homePhone"] {
  padding-left: 4.5rem;
}

/* TODO: make modal accept configuring its size in order to
 * render the styling below obsolete */
 @media (min-width: 64rem) {
  .vtex-modal__modal {
    max-width: 96rem !important;
    max-height: 64rem !important;
  }
}

.vtex-modal__close-icon {
  z-index: 9;
}

.vh-80 {
  height: 80vh;
}

.pac-container {
  z-index: 10001;
}

/*
.input-icon--flag img {
  width: 19px;
}

.address-search .vtex-input-prefix__group, .vtex-address-locator__address-redeem .vtex-input-prefix__group {
  margin-bottom: 1rem;
}

.address-search .vtex-input-prefix__group input, .vtex-address-locator__address-redeem .vtex-input-prefix__group input {
  font-size: .85rem;
  text-overflow: ellipsis;
}

.vtex-address-locator .vtex-tab__button {
  border: none;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;
}

.vtex-address-locator .vtex-tabs__nav {
  border: none;
}

.vtex-address-locator .vtex-tabs__content,
.vtex-address-locator .vtex-tab__button.c-on-muted {
  background: #fff;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.vtex-address-locator .vtex-tabs__content {
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.address-search .vtex-input__label, .vtex-address-locator__address-redeem .vtex-input__label {
  color: #727273;
  font-size: 0.85rem;
}

.vtex-address-locator .vtex-input--icon-right input {
  padding-right: 4rem;
  padding-left: 1rem;
}

.vtex-address-locator .vtex-input--icon-left input {
  padding-left: 4rem;
  padding-right: 1rem;
}

.input-icon {
  top: 1.4rem;
  font-size: .85rem;
  color: #3f3f40;
}

.vtex-address-locator .vtex-input-icon--location img {
  border-left: 1px solid #f1f1f2;
}

.vtex-address-manager__bar {
  background: #25354d;
}

.vtex-address-manager__address {
  flex: 1;
  text-overflow: ellipsis;
}

.vtex-address-manager__icon {
  margin: auto;
}

.vtex-modal__modal, .vtex-modal__overlay {
  padding: 0!important;
}

.vtex-modal__modal {
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: 0;
}

.input--icon-left .input-icon {
  top: 1.4rem;
}

.vtex-address-locator__address-redeem .vtex-profile-form__homePhone {
  padding-bottom: 0;
}

.vtex-address-locator__address-redeem .vtex-button {
  width: 100%;
}

.vtex-address-locator__address-list {
  background: #f2f4f5;
}

@media (min-width: 768px) {
  .vtex-modal__modal {
    height: auto;
    top: 6rem;
  }
}
*/
```


[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 address-locator/react/ChangeAddress.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ChangeAddress from './components/ChangeAddress/index'
export default ChangeAddress

```


[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 address-locator/react/index.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import AddressManager from './components/AddressManager/index'
export default AddressManager

```


[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 address-locator/react/PickupSelector.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PickupSelector from './components/PickupSelector/index'
export default PickupSelector

```


[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 address-locator/react/package.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "classnames": "^2.2.6",
    "country-iso-2-to-3": "^1.0.1",
    "country-iso-3-to-2": "1.0.0",
    "hoist-non-react-statics": "^3.1.0",
    "libphonenumber-js": "^1.7.14",
    "query-string": "^6.2.0",
    "ramda": "^0.26.1",
    "react-apollo": "^2.5.8",
    "react-content-loader": "^3.2.0",
    "react-google-maps": "^9.4.5",
    "recompose": "^0.30.0",
    "svg-country-flags": "^1.2.6"
  },
  "version": "2.4.1"
}

```


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

[User] Show me the implementation of address-locator/react/AddressSearch.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import AddressSearch from './components/AddressSearch/index'
export default AddressSearch

```


[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 address-locator/react/AddressChallenge.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import AddressChallenge from './components/AddressChallenge/index'

export default AddressChallenge

```


[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 address-locator/store/blocks.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "address-manager": {
    "blocks": ["address-search", "address-redeem", "pickup-selector"]
  },
  "change-address": {
    "blocks": ["address-search", "pickup-selector"]
  }
}

```


[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 address-locator/store/interfaces.json from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "address-manager": {
    "required": ["address-search"],
    "allowed": ["address-redeem", "pickup-selector"],
    "component": "index"
  },
  "challenge.address": {
    "component": "AddressChallenge"
  },
  "store.address": {
    "before": ["header"],
    "required": ["address-manager"]
  },
  "change-address": {
    "required": ["address-search"],
    "allowed": ["pickup-selector"],
    "component": "ChangeAddress"
  },
  "address-search": {
    "component": "AddressSearch"
  },
  "address-redeem": {
    "component": "AddressRedeem"
  },
  "pickup-selector": {
    "component": "PickupSelector"
  }
}

```


[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 address-locator/react/queries/logistics.gql from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```graphql
query logistics {
  logistics {
    googleMapsKey
  }
}

```


[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 address-locator/react/queries/nearPickupPoints.gql from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```graphql
query NearPickupPoints($lat: String!, $long: String!) {
  nearPickupPoints(lat: $lat, long: $long) {
    items {
      friendlyName
      id
      seller
      distance
      businessHours {
        openingTime
        closingTime
        dayOfWeek
      }
      address {
        id
        addressId
        street
        number
        receiverName
        complement
        neighborhood
        country
        state
        geoCoordinates
        postalCode
        city
        reference
        addressName
        addressType
      }
    }
  }
}

```


[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 address-locator/react/queries/documents.gql from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```graphql
query documents($acronym: String, $fields: [String], $where: String) {
  documents(acronym: $acronym, fields: $fields, where: $where) {
    fields {
      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 address-locator/react/utils/getCurrentPositionPromise.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
const GEOLOCATION_TIMEOUT = 30 * 1000
const MAXIMUM_AGE = 3 * 1000

const getCurrentPositionPromise = () => {
  const geolocationOptions = {
    enableHighAccuracy: true,
    timeout: GEOLOCATION_TIMEOUT,
    maximumAge: MAXIMUM_AGE,
  }
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      position => resolve(position),
      error => reject(error.code),
      geolocationOptions
    )
  })
}

export default getCurrentPositionPromise

```


[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 address-locator/react/utils/transformAnimationStyle.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
function transformAnimationStyle(quantity, isPickupOpen) {
  return {
    transition: 'transform 300ms',
    transform: `translate3d(${isPickupOpen ? `-${quantity}` : '0'}, 0, 0)`,
  }
}

export default transformAnimationStyle

```


[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 address-locator/react/utils/getCountryDialCode.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { getCountryCallingCode } from 'libphonenumber-js'
import convertIso3To2 from 'country-iso-3-to-2'

const getCountryDialCode = country => {
  const countryString = country.length === 3 ? convertIso3To2(country) : country
  return getCountryCallingCode(countryString)
}

export default getCountryDialCode

```


[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 address-locator/react/utils/newAddress.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import getGGUID from './Gguid'

export const newAddress = (address) => {
  const {
    addressType,
    city,
    complement,
    country,
    geoCoordinates,
    neighborhood,
    number,
    postalCode,
    receiverName,
    reference,
    state,
    street,
    addressQuery,
    addressId,
  } = address

  return {
    addressId: addressId || getGGUID(),
    addressType: addressType || 'residential',
    city: city || null,
    complement: complement || null,
    country: country || null,
    geoCoordinates: geoCoordinates || [],
    neighborhood: neighborhood || null,
    number: number || null,
    postalCode: postalCode || null,
    receiverName: receiverName || null,
    reference: reference || null,
    state: state || null,
    street: street || null,
    addressQuery: addressQuery || '',
  }
}

```


[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 address-locator/react/utils/Gguid.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
let gguid = 1

export default function getGGUID() {
  return (gguid++ * new Date().getTime() * -1).toString()
}

```


[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 address-locator/react/components/StyleguideInput.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { intlShape, injectIntl } from 'react-intl'
import Input from 'vtex.styleguide/Input'
import { ProfileFieldShape, RuleFieldShape } from 'vtex.profile-form'

const StyleguideInput = props => {
  const { field, data, options, inputRef, onChange, onBlur, intl } = props

  return (
    <div
      className={`vtex-profile-form__${field.name} ${field.hidden ? 'dn' : ''}`}
    >
      <Input
        name={field.name}
        label={intl.formatMessage({
          id: `store/profile-form.field.${field.label}`,
        })}
        value={data.value || ''}
        errorMessage={
          data.error &&
          intl.formatMessage({
            id: `store/profile-form.error.${data.error}`,
          })
        }
        placeholder={
          !field.required
            ? intl.formatMessage({ id: 'store/profile-form.optional' })
            : null
        }
        onChange={onChange}
        onBlur={onBlur}
        ref={inputRef}
        maxLength={field.maxLength}
        {...options}
      />
    </div>
  )
}

StyleguideInput.propTypes = {
  /** Rules for the field this input represents */
  field: RuleFieldShape.isRequired,
  /** Data this input will display */
  data: ProfileFieldShape.isRequired,
  /** Additional options to modify this input */
  options: PropTypes.object,
  /** Ref function to control this input from outside */
  inputRef: PropTypes.func,
  /** Function to be called when input changes */
  onChange: PropTypes.func.isRequired,
  /** Function to be called when input blurs */
  onBlur: PropTypes.func.isRequired,
  /** React-intl utility */
  intl: intlShape.isRequired,
}

export default injectIntl(StyleguideInput)

```


[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 address-locator/react/components/AddressContext.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { createContext, useContext } from 'react'
import AddressOrderFormProvider from './AddressOrderFormProvider'

const AddressContext = createContext({})

export default AddressContext

export const withAddress = WrappedComponent => props => (
  <AddressContext.Consumer>
    {context => <WrappedComponent {...props} {...context} />}
  </AddressContext.Consumer>
)

export const useAddress = () => useContext(AddressContext)

export const withAddressProvider = WrappedComponent => props => (
  <AddressOrderFormProvider>
    <WrappedComponent { ...props} />
  </AddressOrderFormProvider>
)

```


[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 address-locator/react/components/AddressOrderFormProvider.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useMemo } from 'react'
import { graphql, compose } from 'react-apollo'
import { pick } from 'ramda'

import {
  updateOrderFormProfile,
  updateOrderFormShipping,
  updateOrderFormCheckin,
} from 'vtex.store-resources/Mutations'
import { address as addressQuery } from 'vtex.store-resources/Queries'

import AddressContext from './AddressContext'

const AddressOrderFormProvider = ({
  children,
  updateOrderFormProfile,
  updateOrderFormShipping,
  updateOrderFormCheckin,
  addressQuery,
}) => {
  const { orderForm, loading, refetch } = addressQuery
  const value = useMemo(() => {
    return {
      address: {
        orderForm,
        loading,
        refetch,
        updateOrderFormProfile,
        updateOrderFormShipping,
        updateOrderFormCheckin,
      },
    }
  }, [
    orderForm,
    loading,
    refetch,
    updateOrderFormProfile,
    updateOrderFormShipping,
    updateOrderFormCheckin,
  ])
  return (
    <AddressContext.Provider value={value}>{children}</AddressContext.Provider>
  )
}

const optionsRefetch = {
  refetchQueries: [{ query: addressQuery }],
}

export default compose(
  graphql(addressQuery, {
    name: 'addressQuery',
    options: () => ({ ssr: false }),
  }),
  graphql(updateOrderFormProfile, {
    name: 'updateOrderFormProfile',
    options: optionsRefetch,
  }),
  graphql(updateOrderFormShipping, {
    name: 'updateOrderFormShipping',
    options: optionsRefetch,
  }),
  graphql(updateOrderFormCheckin, {
    name: 'updateOrderFormCheckin',
    options: optionsRefetch,
  })
)(AddressOrderFormProvider)

```


[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 address-locator/react/components/Card.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

const Card = ({ children }) => (
  <div className="w-100 flex justify-center">
    <div className="ph6 ph9-ns pv7 pv8-ns bg-base shadow-2 br2 mh5 mv5 mw6 w-100">
      {children}
    </div>
  </div>
)

Card.propTypes = {
  children: PropTypes.node,
}

export default Card
```


[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 address-locator/react/components/Loader.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ContentLoader from 'react-content-loader'

const Loader = props => (
  <ContentLoader
    height={60}
    width={100}
    speed={2}
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
    {...props}
  >
    <rect x="0" y="0" rx="1" ry="1" width="50" height="10" />
    <rect x="0" y="15" rx="1" ry="1" width="100" height="20" />
    <rect x="0" y="40" rx="1" ry="1" width="100" height="20" />
  </ContentLoader>
)

export default Loader

```


[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 address-locator/react/components/AddressManager/AddressPage.css from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```css
@keyframes appear {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.spinnerAppear {
  opacity: 0;
  animation: appear 3s;
  animation-fill-mode: forwards;
}
```


[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 address-locator/react/components/AddressManager/index.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useEffect, useCallback } from 'react'
import queryString from 'query-string'
import { head, path } from 'ramda'
import { useRuntime } from 'vtex.render-runtime'

import { useAddress, withAddressProvider } from '../AddressContext'
import AddressPage from './AddressPage'

import '../../global.css'

const redirectToReturnURL = navigate => {
  try {
    const parsedQueryString = queryString.parse(window.location.search)
    const returnURL = (parsedQueryString && parsedQueryString.returnUrl) || ''
    const cleanUrl = head(returnURL) === '/' ? returnURL : `/${returnURL}`
    navigate({ to: cleanUrl })
  } catch (e) {
    // Unable to redirect
  }
}

const AddressManager = props => {
  const { address } = useAddress()
  const { navigate } = useRuntime()

  const redirect = useCallback(() => redirectToReturnURL(navigate), [navigate])

  useEffect(() => {
    if (!!path(['orderForm', 'shippingData', 'address'], address)) {
      redirect()
    }
  }, [address, redirect])
  return <AddressPage {...props} onSelectAddress={redirect} />
}

AddressManager.schema = {
  title: 'admin/address-locator.address-manager-title',
  description: 'admin/address-locator.address-manager-description',
  type: 'object',
  properties: {
    logoUrl: {
      type: 'string',
      title: 'admin/address-locator.address-manager.logo-title',
      widget: {
        'ui:widget': 'image-uploader',
      },
    },
  },
}

export default withAddressProvider(AddressManager)

```


[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 address-locator/react/components/AddressManager/AddressPage.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { memo, useCallback, useState, useRef } from 'react'
import PropTypes from 'prop-types'
import { Spinner } from 'vtex.styleguide'
import { ExtensionPoint, useRuntime } from 'vtex.render-runtime'

import Card from '../Card'

import { useAddress } from '../AddressContext'

const transformAnimationStyle = (quantity, isPickupOpen) => ({
  transition: 'transform 300ms',
  transform: `translate3d(${isPickupOpen ? `-${quantity}` : '0'}, 0, 0)`,
})

/**
 * Component that allows the user to locate his address, by inserting, searching, retrieving and
 * saving it into orderform.
 * Configure the key for Google Geolocation API, by inserting it on the admin logistics section.
 */
const AddressPage = ({ onSelectAddress }) => {
  const { address } = useAddress()
  const {
    hints: { phone: isPhone },
  } = useRuntime()
  const [isPickupOpen, setPickupOpen] = useState(false)
  const wrapperRef = useRef(null)
  const handlePickupClick = useCallback(() => {
    setPickupOpen(true)
  }, [setPickupOpen])

  const handleOrderFormUpdated = useCallback(() => {
    onSelectAddress && onSelectAddress()
  }, [onSelectAddress])

  const closeModal = useCallback(() => {
    setPickupOpen(false)
  }, [setPickupOpen])

  if (address.loading) {
    return (
      <div
        className="flex flex-grow-1 items-center justify-center"
        style={{
          height: 750,
        }}
      >
        <Spinner />
      </div>
    )
  }

  return (
    <div ref={wrapperRef}>
      <div
        className="vtex-address-modal__address-page"
        style={transformAnimationStyle('110%', isPickupOpen && isPhone)}
      >
        <Card>
          <ExtensionPoint
            id="address-search"
            onUpdateOrderForm={handleOrderFormUpdated}
          />
          <ExtensionPoint
            id="pickup-selector"
            onConfirm={handleOrderFormUpdated}
            onFindPickupClick={handlePickupClick}
            isPickupOpen={isPickupOpen}
            parentRef={isPhone && wrapperRef}
            closeModal={closeModal}
          />
        </Card>
        <Card>
          <ExtensionPoint id="address-redeem" />
        </Card>
      </div>
    </div>
  )
}

AddressPage.propTypes = {
  onSelectAddress: PropTypes.func,
}

export default memo(AddressPage)

```


[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 address-locator/react/components/AddressRedeem/AddressRedeemForm.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useMemo } from 'react'
import PropTypes from 'prop-types'
import { find, propEq } from 'ramda'
import { FormattedMessage } from 'react-intl'
import Button from 'vtex.styleguide/Button'
import { ProfileField } from 'vtex.profile-form'
import convertIso3To2 from 'country-iso-3-to-2'
import examples from 'libphonenumber-js/examples.mobile.json'
import { getExampleNumber } from 'libphonenumber-js'
import { useRuntime } from 'vtex.render-runtime'

import StyleguideInput from '../StyleguideInput'
import CountryIcon from './CountryIcon'

const isDisabled = profilePhone =>
  !profilePhone.value || !profilePhone.value.length

const AddressRedeemForm = ({
  loading,
  rules,
  profile,
  onFieldUpdate,
  onSubmit,
}) => {
  const {
    culture: { country },
  } = useRuntime()
  const countryIso2 = convertIso3To2(country)
  const phonePlaceholder = useMemo(
    () => getExampleNumber(countryIso2, examples).formatNational(),
    [country]
  )
  const homePhoneField = {
    ...find(propEq('name', 'homePhone'), rules.personalFields),
    required: true,
  }

  const profilePhone = profile[homePhoneField.name]
  return (
    <form
      className="vtex-address-locator__address-redeem w-100"
      onSubmit={onSubmit}
    >
      <div className="mb5 relative input--icon-left">
        <ProfileField
          field={homePhoneField}
          data={profilePhone}
          onFieldUpdate={onFieldUpdate}
          options={{
            placeholder: phonePlaceholder,
            size: 'large',
            inputmode: 'numeric',
            type: 'tel',
            prefix: <CountryIcon country={countryIso2} size={20} />,
          }}
          Input={StyleguideInput}
        />
      </div>
      <Button
        type="submit"
        isLoading={loading}
        disabled={isDisabled(profilePhone)}
        block
      >
        <FormattedMessage id="store/address-locator.address-redeem-button" />
      </Button>
    </form>
  )
}

AddressRedeemForm.propTypes = {
  /* Query loading state */
  loading: PropTypes.bool.isRequired,
  /* Submit event handler */
  onSubmit: PropTypes.func.isRequired,
  /* Input change event handler */
  onFieldUpdate: PropTypes.func.isRequired,
  /* Profile Form rules object for the store country */
  rules: PropTypes.shape({
    country: PropTypes.string,
    personalFields: PropTypes.arrayOf(
      PropTypes.shape({
        display: PropTypes.func,
        label: PropTypes.string,
        mask: PropTypes.func,
        maxLength: PropTypes.number,
        name: PropTypes.string,
        submit: PropTypes.func,
        validate: PropTypes.func,
      })
    ),
  }).isRequired,
  profile: PropTypes.shape({
    homePhone: PropTypes.shape({
      value: PropTypes.string,
      touched: PropTypes.bool,
      error: PropTypes.string,
    }),
  }).isRequired,
}

export default AddressRedeemForm

```


[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 address-locator/react/components/AddressRedeem/AddressRedeemQueryWrapper.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useState } from 'react'
import { find, head, prop, propEq, path } from 'ramda'
import { withApollo } from 'react-apollo'
import { modules } from 'vtex.profile-form'
import { useRuntime } from 'vtex.render-runtime'

import AddressRedeemForm from './AddressRedeemForm'
import documentsQuery from '../../queries/documents.gql'
import getCountryDialCode from '../../utils/getCountryDialCode'
import { useAddress } from '../AddressContext'

const { addValidation } = modules

/**
 * Component responsible for retrieving the user's address by his phone number
 */

const AddressRedeemQueryWrapper = ({ rules, client }) => {
  const {
    culture: { country },
  } = useRuntime()
  const { address } = useAddress()
  const [queryLoading, updateQueryLoading] = useState(false)
  const [profile, updateProfile] = useState(() =>
    addValidation({ homePhone: '' }, rules)
  )

  const handleFieldUpdate = field =>
    updateProfile(oldProfile => ({ ...oldProfile, ...field }))

  const updateAddressProfile = async ({ email }) => {
    let hasError = false
    try {
      const response = await address.updateOrderFormProfile({
        variables: {
          orderFormId: address.orderForm.orderFormId,
          fields: { email },
        },
      })
      hasError = Boolean(
        path(['data', 'updateOrderFormProfile', 'orderForm'], response)
      )
    } catch (e) {
      hasError = true
    }
    if (hasError) {
      // Show error to user
    }
  }

  const handleSubmit = async e => {
    e.preventDefault()
    if (profile.homePhone.error) {
      return
    }
    updateQueryLoading(true)

    try {
      const { data = { documents: [] } } = await client.query({
        query: documentsQuery,
        variables: {
          acronym: 'CL',
          fields: ['email'],
          where: `homePhone=+${getCountryDialCode(
            country
          )}${profile.homePhone.value.replace(/\D/g, '')}`,
        },
      })
      const fields = prop('fields', head(data.documents))
      if (!fields) throw new Error('Profile not found')

      const { value: email } = find(propEq('key', 'email'), fields)
      await updateAddressProfile({ email })
    } catch (e) {
      updateProfile(oldProfile => ({
        ...oldProfile,
        homePhone: { ...oldProfile.homePhone, error: 'NOT_FOUND' },
      }))
    }
    updateQueryLoading(false)
  }

  return (
    <AddressRedeemForm
      rules={rules}
      profile={profile}
      loading={queryLoading}
      country={country}
      onSubmit={handleSubmit}
      onFieldUpdate={handleFieldUpdate}
    />
  )
}

export default withApollo(AddressRedeemQueryWrapper)

```


[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 address-locator/react/components/AddressRedeem/AddressRedeem.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Fragment } from 'react'
import { FormattedMessage } from 'react-intl'

import { useAddress } from '../AddressContext'
import Loader from '../Loader'
import AddressRedeemQueryWrapper from './AddressRedeemQueryWrapper'

const LoaderView = () => (
  <div className="pv7 ph6 br2 bg-white">
    <Loader style={{ width: '100%', height: '100%' }} />
  </div>
)

const AddressRedeem = ({ rules }) => {
  const {
    address: { loading: isLoading },
  } = useAddress()

  return (
    <Fragment>
      <h2 className="t-heading-2 mt0 mb4">
        <FormattedMessage id="store/address-locator.address-redeem-recurring" />
      </h2>
      <div className="vtex-address-modal__redeem">
        {isLoading ? (
          <LoaderView />
        ) : (
          <AddressRedeemQueryWrapper rules={rules} />
        )}
      </div>
    </Fragment>
  )
}

export default AddressRedeem

```


[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 address-locator/react/components/AddressRedeem/index.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { useRuntime } from 'vtex.render-runtime'
import { ProfileRules } from 'vtex.profile-form'

import AddressRedeem from './AddressRedeem'

/**
 * Component responsible for retrieving the user's address by his phone number
 */

const ProfileRulesWrapper = () => {
  const {
    culture: { country },
  } = useRuntime()
  return (
    <ProfileRules country={country} shouldUseIOFetching>
      <AddressRedeem />
    </ProfileRules>
  )
}

export default ProfileRulesWrapper

```


[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 address-locator/react/components/AddressRedeem/CountryIcon.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { memo, useState } from 'react'
import getCountryDialCode from '../../utils/getCountryDialCode'

const CountryIcon = ({ size, country }) => {
  const [flagSource, setFlagSource] = useState(undefined)

  if (flagSource === undefined) {
    import(`svg-country-flags/png100px/${country.toLowerCase()}.png`)
      .then(src => setFlagSource(src.default))
      .catch(() => setFlagSource(null))
    return null
  }

  const dialCode = getCountryDialCode(country)
  return (
    <div className="flex items-center">
      {flagSource && (
        <img
          className="pr2"
          style={{ objectFit: 'contain' }}
          src={flagSource}
          width={size}
          height={size}
        />
      )}
      <p>{`+${dialCode}`}</p>
    </div>
  )
}

export default memo(CountryIcon)

```


[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 address-locator/react/components/PickupSelector/index.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useState, useCallback, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Button, Spinner, Modal } from 'vtex.styleguide'
import { AddressRules } from 'vtex.address-form'
import { useRuntime } from 'vtex.render-runtime'
import { createPortal } from 'react-dom'
import { FormattedMessage } from 'react-intl'

import { useAddress } from '../AddressContext'
import PickupModalContainer from './PickupModalContainer'
import transformAnimationStyle from '../../utils/transformAnimationStyle'

const PickupWrapper = ({ children, parentRef, closeModal }) => {
  if (!parentRef.current) {
    return (
      <Modal centered isOpen onClose={closeModal} showTopBar={false}>
        <div className="vw-90 vh-80">{children}</div>
      </Modal>
    )
  }

  return createPortal(children, parentRef.current)
}

const PickupSelector = ({
  loading,
  onConfirm,
  onFindPickupClick,
  isPickupOpen,
  parentRef,
  closeModal,
}) => {
  const [isFetching, setFetching] = useState(false)
  const { address } = useAddress()
  const {
    culture: { country },
  } = useRuntime()

  const onHandlePickedSLA = useCallback(
    async pickupPoint => {
      setFetching(true)
      try {
        await address.updateOrderFormCheckin({
          variables: {
            orderFormId: address.orderForm.orderFormId,
            checkin: { isCheckedIn: true, pickupPointId: pickupPoint.id },
          },
        })
      } catch (err) {
        // Show user that pickup point choice failed?
      }

      setFetching(false)
      onConfirm && onConfirm()
    },
    [setFetching, address, onConfirm]
  )

  if (!isPickupOpen) {
    return (
      <Fragment>
        <Button variation="tertiary" block onClick={onFindPickupClick}>
          <FormattedMessage id="store/address-locator.pickup-button" />
        </Button>
      </Fragment>
    )
  }
  const isLoading = isFetching || loading
  const animationStyle = !!parentRef.current
    ? {
        left: '100%',
        ...transformAnimationStyle('100%', isPickupOpen),
      }
    : {}

  return (
    <PickupWrapper parentRef={parentRef} closeModal={closeModal}>
      {
        <AddressRules country={country} shouldUseIOFetching>
          <div
            className="w-100 center absolute top-0 bottom-0 left-0 right-0"
            style={animationStyle}
          >
            {isLoading ? (
              <div className="w-100 h-100 flex items-center justify-center">
                <Spinner />
              </div>
            ) : (
              <PickupModalContainer handlePickedSLA={onHandlePickedSLA} />
            )}
          </div>
        </AddressRules>
      }
    </PickupWrapper>
  )
}

PickupSelector.propTypes = {
  loading: PropTypes.bool,
  onConfirm: PropTypes.func.isRequired,
  onFindPickupClick: PropTypes.func,
  isPickupOpen: PropTypes.bool,
  parentRef: PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.any) }),
  closeModal: PropTypes.func,
}

export default PickupSelector

```


[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 address-locator/react/components/PickupSelector/PickupModalContainer.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useEffect, useMemo, useCallback, useReducer } from 'react'
import PropTypes from 'prop-types'
import { injectIntl } from 'react-intl'
import { graphql, withApollo } from 'react-apollo'
import { compose } from 'recompose'
import { path } from 'ramda'
import { PickupPointsSelector } from 'vtex.pickup-points-selector'
import { helpers } from 'vtex.address-form'
import { useRuntime } from 'vtex.render-runtime'

import nearPickupPointsQuery from '../../queries/nearPickupPoints.gql'
import logisticsQuery from '../../queries/logistics.gql'
import { newAddress } from '../../utils/newAddress'
import getCurrentPositionPromise from '../../utils/getCurrentPositionPromise'

const { injectRules, addValidation } = helpers

function reducer(state, action) {
  const args = action.args || {}
  switch (action.type) {
    case 'SET_GEOLOCATION_PERMISSION': {
      return {
        ...state,
        hasGeolocationPermission: args.hasGeolocationPermission,
      }
    }
    case 'SAVE_NULL_PICKUP_POINTS': {
      return {
        ...state,
        pickupOptions: [],
        pickupPoints: [],
        isSearching: false,
      }
    }
    case 'SAVE_PICKUP_POINTS': {
      return {
        ...state,
        pickupOptions: args.pickupOptions,
        pickupPoints: args.pickupPoints,
        isSearching: false,
        selectedPickupPoint: args.selectedPickupPoint,
      }
    }
    case 'BEGIN_ADDRESS_SEARCH': {
      return {
        ...state,
        isSearching: true,
        searchAddress: args.searchAddress,
      }
    }
    case 'SELECT_PICKUP_POINT': {
      return {
        ...state,
        selectedPickupPoint: args.selectedPickupPoint,
      }
    }
    default:
      return state
  }
}

const initialState = {
  hasGeolocationPermission: undefined,
  pickupOptions: [],
  searchAddress: addValidation(newAddress({ addressType: 'search' })),
  selectedPickupPoint: null,
  pickupPoints: [],
  isSearching: true,
}

const convertPickupPointToOption = pickupPoint => {
  if (!pickupPoint) return pickupPoint
  return {
    id: pickupPoint.id,
    shippingEstimate: '40m',
    deliveryChannel: 'pickup-in-point',
    shippingEstimateDate: null,
    lockTTL: null,
    availableDeliveryWindows: [],
    deliveryWindow: null,
    listPrice: 0,
    tax: 0,
    price: 0,
    pickupStoreInfo: {
      isPickupStore: true,
      ...pickupPoint,
    },
  }
}

const PickupModalContainer = ({
  handlePickedSLA,
  logisticsQuery,
  intl,
  rules,
  client,
  onConfirm,
}) => {
  const {
    culture: { country, currency },
  } = useRuntime()
  const [state, dispatch] = useReducer(reducer, initialState)
  const {
    hasGeolocationPermission,
    pickupOptions,
    searchAddress,
    selectedPickupPoint,
    pickupPoints,
    isSearching,
  } = state

  const storePreferencesData = useMemo(
    () => ({
      countryCode: country,
      currencySymbol: currency,
    }),
    [country, currency]
  )

  const changeActivePickupDetails = useCallback(
    ({ pickupPoint }) =>
      dispatch({
        type: 'SELECT_PICKUP_POINT',
        args: { selectedPickupPoint: pickupPoint },
      }),
    [dispatch]
  )

  const changeActiveSLAOption = useCallback(
    () => handlePickedSLA(selectedPickupPoint),
    [handlePickedSLA, selectedPickupPoint]
  )

  const savePickupPoints = useCallback(
    pickupPoints => {
      if (!pickupPoints) {
        dispatch({ type: 'SAVE_NULL_PICKUP_POINTS' })
        return
      }
      const pickupOptions = pickupPoints.map(convertPickupPointToOption)
      const newSelectedPickupPoint = pickupOptions[0]
      dispatch({
        type: 'SAVE_PICKUP_POINTS',
        args: {
          pickupOptions,
          pickupPoints,
          selectedPickupPoint: newSelectedPickupPoint,
        },
      })
    },
    [dispatch]
  )

  const handleSearchAddressChange = useCallback(
    async address => {
      const cleanAddress = addValidation(newAddress(address))
      dispatch({
        type: 'BEGIN_ADDRESS_SEARCH',
        args: {
          searchAddress: cleanAddress,
        },
      })
      if (cleanAddress.geoCoordinates.value.length < 2) {
        savePickupPoints(null)
      }

      const [long, lat] = cleanAddress.geoCoordinates.value
      try {
        const response = await client.query({
          query: nearPickupPointsQuery,
          variables: { lat: lat.toString(), long: long.toString() },
        })
        const pickupPoints = path(
          ['data', 'nearPickupPoints', 'items'],
          response
        )
        savePickupPoints(pickupPoints)
      } catch (err) {
        savePickupPoints(null)
      }
    },
    [dispatch, savePickupPoints, client]
  )

  const handlePickupConfirm = useCallback(
    options => {
      onConfirm && onConfirm(options)
    },
    [onConfirm]
  )

  useEffect(() => {
    getCurrentPositionPromise()
      .then(() =>
        dispatch({
          type: 'SET_GEOLOCATION_PERMISSION',
          args: { hasGeolocationPermission: true },
        })
      )
      .catch(() =>
        dispatch({
          type: 'SET_GEOLOCATION_PERMISSION',
          args: { hasGeolocationPermission: false },
        })
      )
  }, [dispatch])
  if (logisticsQuery.loading || hasGeolocationPermission === undefined) {
    return null
  }

  return (
    <PickupPointsSelector
      askForGeolocation={hasGeolocationPermission}
      changeActivePickupDetails={changeActivePickupDetails}
      changeActiveSLAOption={changeActiveSLAOption}
      googleMapsKey={logisticsQuery.logistics.googleMapsKey}
      intl={intl}
      isPickupDetailsActive={false}
      items={[]}
      logisticsInfo={[]}
      onAddressChange={handleSearchAddressChange}
      pickupOptions={pickupOptions}
      rules={rules}
      searchAddress={searchAddress}
      selectedPickupPoint={selectedPickupPoint}
      storePreferencesData={storePreferencesData}
      pickupPoints={pickupPoints}
      isSearching={isSearching}
      height="100%"
      onConfirm={handlePickupConfirm}
    />
  )
}

PickupModalContainer.propTypes = {
  client: PropTypes.object,
  handlePickedSLA: PropTypes.func,
  intl: PropTypes.object,
  logisticsQuery: PropTypes.object,
  rules: PropTypes.object,
  storePreferencesData: PropTypes.object,
  onConfirm: PropTypes.func,
}

export default compose(
  withApollo,
  graphql(logisticsQuery, {
    name: 'logisticsQuery',
  }),
  injectRules,
  injectIntl
)(PickupModalContainer)

```


[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 address-locator/react/components/ChangeAddress/index.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { useCallback, useState, useRef } from 'react'
import Spinner from 'vtex.styleguide/Spinner'
import { useModal } from 'vtex.modal/ModalContext'
import { ExtensionPoint } from 'vtex.render-runtime'

import { useAddress, withAddressProvider } from '../AddressContext'

import AddressList from './AddressList'
import '../../global.css'
import transformAnimationStyle from '../../utils/transformAnimationStyle'

/**
 * Component responsible for displaying and managing user's address using address.
 */

const ChangeAddress = () => {
  const { address } = useAddress()
  const { closeModal } = useModal()
  const [isPickupOpen, setPickupOpen] = useState(false)
  const [isLoading, setLoading] = useState(false)
  const wrapperRef = useRef(null)

  const handleSelectAddress = useCallback(
    async setAddress => {
      const { orderFormId } = address.orderForm
      setLoading(true)
      const orderForm = await address
        .updateOrderFormShipping({
          variables: {
            orderFormId,
            address: setAddress,
          },
        })
        .catch(() => null)
      setLoading(false)
      if (!orderForm) {
        // TODO: Display error
      }
      closeModal && closeModal()
    },
    [address, closeModal]
  )

  const handleOrderFormUpdated = useCallback(() => {
    closeModal && closeModal()
  }, [closeModal])

  const handlePickupConfirm = useCallback(() => {
    setPickupOpen(false)
    handleOrderFormUpdated()
  }, [handleOrderFormUpdated, setPickupOpen])

  const handlePickupClick = useCallback(() => {
    setPickupOpen(true)
  }, [setPickupOpen])
  return (
    <div
      className="overflow-hidden relative br2 flex items-center nh6 nh8-ns nb8 pa8 nt5 nt6-ns"
      style={{
        minHeight: isPickupOpen ? '75vh' : '50vh',
      }}
      ref={wrapperRef}
    >
      <div style={transformAnimationStyle('110%', isPickupOpen)}>
        <ExtensionPoint
          id="address-search"
          onUpdateOrderForm={handleOrderFormUpdated}
        />
        <ExtensionPoint
          id="pickup-selector"
          loading={isLoading}
          onConfirm={handlePickupConfirm}
          onFindPickupClick={handlePickupClick}
          isPickupOpen={isPickupOpen}
          parentRef={wrapperRef}
        />
        {!isLoading ? (
          <AddressList onSelectAddress={handleSelectAddress} />
        ) : (
          <div className="flex flex-grow-1 justify-center items-center">
            <Spinner />
          </div>
        )}
      </div>
    </div>
  )
}

export default withAddressProvider(ChangeAddress)

```


[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 address-locator/react/components/ChangeAddress/AddressListItem.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import { pick } from 'ramda'

const AddressListItem = ({ address, onSelectAddress, isLastAddress }) => {
  const handleClick = () => {
    const addressFields = pick(
      [
        'addressType',
        'city',
        'complement',
        'neighborhood',
        'number',
        'postalCode',
        'street',
        'state',
        'receiverName',
        'country',
        'geoCoordinates',
      ],
      address
    )
    onSelectAddress && onSelectAddress(addressFields)
  }

  const { street, number, neighborhood, city } = address
  return (
    <div
      tabIndex={0}
      className={`${!isLastAddress && 'bb b--muted-4'} pv4 dim pointer`}
      onClick={handleClick}
      onKeyDown={e => e.key === 'Enter' && handleClick()}
    >
      <p className="ma0 t-body c-on-base">{`${street}, ${number}`}</p>
      <span className="f7 t-small c-muted-2">
        {!neighborhood ? city : `${neighborhood}, ${city}`}
      </span>
    </div>
  )
}

AddressListItem.propTypes = {
  address: PropTypes.object.isRequired,
  onSelectAddress: PropTypes.func,
  isLastAddress: PropTypes.bool,
}

export default AddressListItem

```


[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 address-locator/react/components/ChangeAddress/AddressList.js from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { memo, useMemo } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { pathOr, uniq } from 'ramda'

import { useAddress } from '../AddressContext'
import AddressListItem from './AddressListItem'

const MAX_ADDRESS_QUANTITY = 5

const AddressList = ({ onSelectAddress }) => {
  const { address } = useAddress()
  const availableAddresses = useMemo(() => {
    const filtered = pathOr(
      [],
      ['orderForm', 'shippingData', 'availableAddresses'],
      address
    )
      .filter(
        address =>
          address.city &&
          address.street &&
          address.number &&
          address.addressType !== 'pickup'
      )
      .reverse()
    return uniq(filtered).slice(0, MAX_ADDRESS_QUANTITY)
  }, [address])

  if (availableAddresses.length === 0) {
    return null
  }

  return (
    <div className="vtex-address-locator__address-list pa5">
      <FormattedMessage id="store/address-manager.address-list">
        {text => <span className="t-small f6 c-muted-1">{text}</span>}
      </FormattedMessage>
      {availableAddresses.map((address, key) => (
        <AddressListItem
          key={key}
          address={address}
          isLastAddress={key === availableAddresses.length - 1}
          onSelectAddress={onSelectAddress}
        />
      ))}
    </div>
  )
}

AddressList.propTypes = {
  /* Function that will be called when selecting an address */
  onSelectAddress: PropTypes.func,
}

export default memo(AddressList)

```