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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import ImportEntriesModal from '../ImportEntriesModal'
import uploadMutationFile from './graphql/uploadCategoryTranslations.gql'
import entryQueryFile from './graphql/categoryTranslationsUploadRequests.gql'

const bucket = 'category_transl'
const entryHeaders: EntryHeadersCategory[] = [
  'id',
  'name',
  'description',
  'linkId',
  'title',
]
const entryQueryName = 'categoryTranslationsUploadRequests'
const entryName = 'Category'
const fileName = 'category_translate_model'
const paramEntryName = 'categories'
const sheetName = 'category_data'
const uploadMutationName = 'uploadCategoryTranslations'

const settings: ImportEntriesSettings = {
  bucket,
  entryHeaders,
  entryQueryFile,
  entryQueryName,
  entryName,
  fileName,
  paramEntryName,
  sheetName,
  uploadMutationFile,
  uploadMutationName,
}

const CategoryImportModal = ({
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  return (
    <>
      <ImportEntriesModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
        settings={settings}
      />
    </>
  )
}

export default CategoryImportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { SyntheticEvent } from 'react'
import { InputSearch, PageBlock, Spinner } from 'vtex.styleguide'

import useCatalogQuery from '../../hooks/useCatalogQuery'
import { useLocaleSelector } from '../LocaleSelector'
import getSpecificationById from './graphql/getSpecification.gql'
import ErrorHandler from '../ErrorHandler'
import SpecificationsForm from './SpecificationsForm'
import SpecificationExportModal from './SpecificationsExportModal'
import SpecificationImportModal from './SpecificationsImportModal'

const SpecificationsTranslation = ({
  isExportOpen = false,
  handleOpenExport = () => {},
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  const {
    entryInfo,
    isLoadingOrRefetching,
    entryId,
    handleEntryIdInput,
    handleCleanSearch,
    fetchEntry,
    setMemoEntries,
    errorMessage,
  } = useCatalogQuery<FieldsData, { fieldId: number }>(getSpecificationById)
  const { selectedLocale } = useLocaleSelector()

  const handleSubmitSpecification = (e: SyntheticEvent) => {
    e.preventDefault()
    if (!entryId) {
      return
    }
    setMemoEntries({})
    fetchEntry({
      variables: { fieldId: Number(entryId) },
    })
  }
  const { fieldId, ...specificationInfo } = entryInfo?.field || ({} as Field)

  return (
    <>
      <main>
        <div style={{ maxWidth: '340px' }} className="mv7">
          <InputSearch
            value={entryId}
            placeHolder="Search Specification..."
            label="Specification ID"
            size="regular"
            onChange={handleEntryIdInput}
            onSubmit={handleSubmitSpecification}
            onClear={handleCleanSearch}
          />
        </div>
        {fieldId || isLoadingOrRefetching || errorMessage ? (
          <PageBlock
            variation="full"
            title={`Specification info- ${selectedLocale}`}
          >
            {errorMessage ? (
              <ErrorHandler
                errorMessage={errorMessage}
                entryId={entryId}
                entry="Specification"
              />
            ) : isLoadingOrRefetching ? (
              <Spinner />
            ) : (
              <SpecificationsForm
                specificationInfo={specificationInfo}
                specificationId={entryId}
                updateMemoSpecifications={setMemoEntries}
              />
            )}
          </PageBlock>
        ) : null}
      </main>
      <SpecificationExportModal
        isExportOpen={isExportOpen}
        handleOpenExport={handleOpenExport}
      />
      <SpecificationImportModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
      />
    </>
  )
}

export default SpecificationsTranslation

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useState } from 'react'
import { useLazyQuery, useQuery } from 'react-apollo'
import { ModalDialog, ButtonPlain, Dropzone, Tabs, Tab } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import {
  sanitizeImportJSON,
  parseXLSToJSON,
  createModel,
  DOWNLOAD_LIST_SIZE,
} from '../../utils'
import { useLocaleSelector } from '../LocaleSelector'
import WarningAndErrorsImportModal from '../WarningAndErrorsImportModal'
import FIELD_TRANSLATIONS from './graphql/fieldTranslations.gql'
import FIELD_UPLOAD_REQUESTS from './graphql/fieldTranslationsRequests.gql'
import DOWNLOAD_FIELD_TRANSLATION from './graphql/downloadFieldTranslations.gql'
import ExportListItem from '../ExportListItem'

const SPECIFICATION_HEADERS: Array<keyof Field> = ['fieldId']
const SPECIFICATION_DATA = 'specification_data'

const SpecificationExportModal = ({
  isExportOpen = false,
  handleOpenExport = () => {},
}: ComponentProps) => {
  const [errorParsingFile, setErrorParsingFile] = useState('')
  const [loading, setLoading] = useState(false)
  const [errorModal, setErrorModal] = useState(false)
  const [warningModal, setWarningModal] = useState(false)
  const [validationErrors, setValidationErrors] = useState<Message[]>([])
  const [validationWarnings, setValidationWarnings] = useState<Message[]>([])
  const [originalFile, setOriginalFile] = useState<Array<{}>>([])
  const [formattedTranslations, setFormattedTranslations] = useState<
    Blob | undefined
  >(undefined)

  const [tabSelected, setTabSelected] = useState<1 | 2>(1)
  const { selectedLocale } = useLocaleSelector()

  const handleFile = async (files: FileList) => {
    if (loading) {
      return
    }

    setLoading(true)

    try {
      const fileParsed = await parseXLSToJSON(files[0], {
        sheetName: SPECIFICATION_DATA,
      })

      setOriginalFile(fileParsed)

      const [translations, { errors, warnings }] = sanitizeImportJSON({
        data: fileParsed,
        entryHeaders: SPECIFICATION_HEADERS,
        requiredHeaders: ['fieldId'],
      })

      if (errors.length) {
        setValidationErrors(errors)
      }

      if (warnings.length) {
        setValidationWarnings(warnings)
      }

      const blob = new Blob([JSON.stringify(translations, null, 2)], {
        type: 'application/json',
      })

      setFormattedTranslations(blob)
    } catch (e) {
      // The errors being handled on parseXLSToJSON are thrown as strings.
      if (typeof e === 'string') {
        setErrorParsingFile(e)
      } else if (e instanceof Error) {
        setErrorParsingFile(e.message)
      } else {
        setErrorParsingFile('An unknown error occurred')
      }
    } finally {
      setLoading(false)
    }
  }

  const cleanErrors = () => {
    setValidationErrors([])
    setErrorParsingFile('')
    setValidationWarnings([])
    setOriginalFile([])
  }

  const handleReset = () => {
    if (loading) {
      return
    }
    setOriginalFile([])
    setFormattedTranslations(undefined)
    cleanErrors()
  }

  const handleCreateModel = () => {
    createModel(SPECIFICATION_HEADERS, SPECIFICATION_DATA, 'specification')
  }

  const [
    startTranslationUpload,
    { data: newRequest, error: uploadError },
  ] = useLazyQuery<
    {
      fieldTranslations: {
        requestId: string
      }
    },
    {
      locale: string
      fields: Blob
    }
  >(FIELD_TRANSLATIONS, {
    context: {
      headers: {
        'x-vtex-locale': `${selectedLocale}`,
      },
    },
    fetchPolicy: 'no-cache',
  })

  const { data, updateQuery } = useQuery<{
    fieldTranslationsRequests: string[]
  }>(FIELD_UPLOAD_REQUESTS)

  useEffect(() => {
    const { requestId } = newRequest?.fieldTranslations ?? {}

    if (!requestId) {
      return
    }
    updateQuery((prevResult) => {
      return {
        fieldTranslationsRequests: [
          requestId,
          ...(prevResult.fieldTranslationsRequests ?? []),
        ],
      }
    })
    setTabSelected(2)
  }, [newRequest, updateQuery])

  const handleUploadRequest = async () => {
    if (!formattedTranslations) {
      return
    }

    startTranslationUpload({
      variables: {
        locale: selectedLocale,
        fields: formattedTranslations,
      },
    })
  }

  const [download, { data: downloadJson, error: downloadError }] = useLazyQuery<
    TranslationDownload<Field>,
    { requestId: string }
  >(DOWNLOAD_FIELD_TRANSLATION)

  return (
    <ModalDialog
      loading={loading}
      cancelation={{
        label: (
          <FormattedMessage id="admin/catalog-translation.import.modal.cancelation" />
        ),
        onClick: () => {
          handleOpenExport(false)
          cleanErrors()
        },
      }}
      confirmation={{
        label: (
          <FormattedMessage id="admin/catalog-translation.export.modal.confirmation" />
        ),
        onClick: () => {
          if (errorParsingFile) {
            return
          }
          handleUploadRequest()
        },
      }}
      isOpen={isExportOpen}
      onClose={() => {
        handleOpenExport(false)
        cleanErrors()
      }}
    >
      <h3>
        <FormattedMessage
          id="admin/catalog-translation.export.modal.specification-header"
          values={{
            selectedLocale,
          }}
        />
      </h3>
      <div>
        <Tabs>
          <Tab
            label={
              <FormattedMessage id="admin/catalog-translation.export.modal.export-tab" />
            }
            active={tabSelected === 1}
            onClick={() => {
              setTabSelected(1)
              handleReset()
            }}
          >
            <div>
              <div className="mv4">
                <ButtonPlain onClick={handleCreateModel}>
                  <FormattedMessage id="admin/catalog-translation.export.modal.download-button" />
                </ButtonPlain>
              </div>
              <div>
                <Dropzone
                  accept=".xlsx"
                  onDropAccepted={handleFile}
                  onFileReset={handleReset}
                >
                  <div className="pt7">
                    <span className="f4">
                      <FormattedMessage id="admin/catalog-translation.export.modal.dropzone" />
                    </span>
                    <span className="f4 c-link" style={{ cursor: 'pointer' }}>
                      <FormattedMessage id="admin/catalog-translation.export.modal.dropzone-choose-file" />
                    </span>
                  </div>
                </Dropzone>
              </div>
              {errorParsingFile ? (
                <p className="c-danger i f7">{errorParsingFile}</p>
              ) : null}
            </div>
            <ul>
              {originalFile.length ? (
                <li>
                  {originalFile?.length}{' '}
                  <FormattedMessage id="admin/catalog-translation.export.modal.total-entries" />
                </li>
              ) : null}
              {validationWarnings.length ? (
                <li>
                  <ButtonPlain onClick={() => setWarningModal(true)}>
                    {validationWarnings.length}{' '}
                    <FormattedMessage id="admin/catalog-translation.export.modal.total-warnings" />
                  </ButtonPlain>
                </li>
              ) : null}
              {validationErrors.length ? (
                <li>
                  <ButtonPlain
                    variation="danger"
                    onClick={() => setErrorModal(true)}
                  >
                    {validationErrors.length}{' '}
                    <FormattedMessage id="admin/catalog-translation.export.modal.total-errors" />
                  </ButtonPlain>
                </li>
              ) : null}
            </ul>
            {uploadError ? (
              <p className="absolute c-danger i-s bottom-0-m right-0-m mr8">
                <FormattedMessage id="admin/catalog-translation.export.modal.error-uploading" />
              </p>
            ) : null}
          </Tab>
          <Tab
            label={
              <FormattedMessage id="admin/catalog-translation.export.modal.see-files-tab" />
            }
            active={tabSelected === 2}
            onClick={() => setTabSelected(2)}
          >
            <p className="i f7 tr">
              <FormattedMessage id="admin/catalog-translation.export.modal.long-process.warning" />
            </p>
            <table className="w-100 mt7 tc">
              <thead>
                <tr>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.export.modal.table-header.locale" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.export.modal.table-header.requested.by" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.export.modal.table-header.requested.at" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.export.modal.table-header.download" />
                  </th>
                </tr>
              </thead>
              <tbody>
                {data?.fieldTranslationsRequests
                  ?.slice(0, DOWNLOAD_LIST_SIZE)
                  ?.map((requestId) => (
                    <ExportListItem
                      key={requestId}
                      requestId={requestId}
                      download={download}
                      downloadJson={downloadJson?.downloadFieldTranslations}
                      downloadError={downloadError}
                      type="field"
                    />
                  ))}
              </tbody>
            </table>
          </Tab>
        </Tabs>
      </div>
      <WarningAndErrorsImportModal
        isOpen={warningModal}
        modalName="Warning Modal"
        handleClose={setWarningModal}
        data={validationWarnings}
      />
      <WarningAndErrorsImportModal
        isOpen={errorModal}
        modalName="Error Modal"
        handleClose={setErrorModal}
        data={validationErrors}
      />
    </ModalDialog>
  )
}

export default SpecificationExportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, SyntheticEvent } from 'react'
import { Input } from 'vtex.styleguide'
import { useMutation } from 'react-apollo'

import { useLocaleSelector } from '../LocaleSelector'
import translateFieldValues from './graphql/translateSpecification.gql'
import { useAlert } from '../../providers/AlertProvider'
import useFormTranslation from '../../hooks/useFormTranslation'
import ActionButtons from '../ActionButtons'

interface SpecificationsFormProps {
  specificationInfo: FieldInputTranslation
  specificationId: string
  updateMemoSpecifications: (
    value: React.SetStateAction<{
      [Identifier: string]: FieldsData
    }>
  ) => void
}

const SpecificationsForm: FC<SpecificationsFormProps> = ({
  specificationInfo,
  specificationId,
  updateMemoSpecifications,
}) => {
  const {
    formState,
    canEdit,
    handleInputChange,
    changed,
    handleToggleEdit,
  } = useFormTranslation<FieldInputTranslation>(specificationInfo)

  const { isXVtexTenant, selectedLocale } = useLocaleSelector()
  const [translateSpecification, { loading }] = useMutation<
    { translateField: boolean },
    { args: Field; locale: string }
  >(translateFieldValues)

  const { openAlert } = useAlert()
  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault()
    if (loading) {
      return
    }
    const SpecificationArgs = {
      ...formState,
      ...{ fieldId: specificationId },
    }
    try {
      const { data, errors } = await translateSpecification({
        variables: {
          locale: selectedLocale,
          args: SpecificationArgs,
        },
      })
      const { translateField: translateSpecificationResult } = data ?? {}
      if (translateSpecificationResult) {
        updateMemoSpecifications((state) => ({
          ...state,
          ...{ [selectedLocale]: { field: SpecificationArgs } },
        }))
        openAlert('success', 'Specifications')
      }
      if (errors?.length) {
        throw new TypeError('Error translation Specifications')
      }
    } catch (err) {
      openAlert('error', 'Specifications')
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="mb5">
          <Input
            label="Name"
            value={formState.name}
            name="name"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        {isXVtexTenant ? null : (
          <ActionButtons
            toggleEdit={handleToggleEdit}
            canEdit={canEdit}
            changed={changed}
            loading={loading}
          />
        )}
      </form>
    </div>
  )
}
export default SpecificationsForm

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { SyntheticEvent } from 'react'
import { InputSearch, PageBlock, Spinner, PageHeader } from 'vtex.styleguide'
import { useLazyQuery } from 'react-apollo'

import useCatalogQuery from '../../hooks/useCatalogQuery'
import { useLocaleSelector } from '../LocaleSelector'
import getSpecificationById from './graphql/getSpecification.gql'
import GetSpecificationValues from './graphql/getSpecificationValues.gql'
import ErrorHandler from '../ErrorHandler'
import SpecificationsValuesForm from './SpecificationsValuesForm'
import SpecificationExportModal from './SpecificationsExportModal'
import SpecificationImportModal from './SpecificationsImportModal'

interface Specification {
  value: string;
  fieldValueId: string;
  isActive: boolean;
}

const SpecificationsTranslationValues = ({
  isExportOpen = false,
  handleOpenExport = () => {},
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  const {
    entryInfo,
    entryId,
    handleEntryIdInput,
    handleCleanSearch,
    errorMessage,
  } = useCatalogQuery<FieldsData, { fieldId: number }>(getSpecificationById)
  const { selectedLocale, xVtexTenant } = useLocaleSelector()

  const [getData, { loading, data }] = useLazyQuery(GetSpecificationValues,{
    context: {
      headers: {
        'x-vtex-tenant': `${xVtexTenant}`,
        'x-vtex-locale': `${selectedLocale}`,
      },
    },
    fetchPolicy: 'no-cache',
    notifyOnNetworkStatusChange: true,
    onError: (e) => {
      console.log("Error context")
    },
  })

  const handleSubmitSpecification = (e: SyntheticEvent) => {
    e.preventDefault()
    if (!entryId) {
      return
    }

    getData({
      variables: {
        fieldId: entryId
      },
    })
  }

  const { fieldId, ...specificationInfo } = entryInfo?.field || ({} as Field)

  return (
    <>
      <main>
        <div style={{ maxWidth: '340px' }} className="mv7">
          <InputSearch
            value={entryId}
            placeHolder="Search Specification..."
            label="Specification ID"
            size="regular"
            onChange={handleEntryIdInput}
            onSubmit={handleSubmitSpecification}
            onClear={handleCleanSearch}
          />
        </div>
        {data?.fieldValues && !loading ? (
          <PageBlock
          variation="full"
          title={`Specification info- ${selectedLocale}`}
        >
          <ul>
          {errorMessage ? (
            <ErrorHandler
              errorMessage={errorMessage}
              entryId={entryId}
              entry="Specification"
            />
          ) : loading ? (
            <Spinner />
          ) : (
              <SpecificationsValuesForm
                specificationInfo={specificationInfo}
                specificationValues={data?.fieldValues}
                specificationId={entryId}
              />
            )}
          </ul>
        </PageBlock>
        ) : null}
      </main>
      <SpecificationExportModal
        isExportOpen={isExportOpen}
        handleOpenExport={handleOpenExport}
      />
      <SpecificationImportModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
      />
    </>
  )
}

export default SpecificationsTranslationValues

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import uploadMutationFile from './graphql/uploadFieldTranslationsImport.gql'
import entryQueryFile from './graphql/fieldTranslationsUploadRequests.gql'
import ImportEntriesModal from '../ImportEntriesModal'

const bucket = 'field_translation'
const entryHeaders: EntryHeadersSpecifications[] = ['fieldId', 'name']
const entryQueryName = 'fieldTranslationsUploadRequests'
const entryName = 'Specification'
const fileName = 'specification_translate_model'
const paramEntryName = 'fields'
const sheetHeaders = ['fieldId']
const sheetName = 'specification_data'
const uploadMutationName = 'uploadFieldTranslationsImport'

const settings: ImportEntriesSettings = {
  bucket,
  entryHeaders,
  entryQueryFile,
  entryQueryName,
  entryName,
  fileName,
  paramEntryName,
  sheetHeaders,
  sheetName,
  uploadMutationFile,
  uploadMutationName,
}
const SpecificationImportModal = ({
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  return (
    <>
      <ImportEntriesModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
        settings={settings}
      />
    </>
  )
}

export default SpecificationImportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, SyntheticEvent, useEffect, useState, FormEvent } from 'react'
import { Input, Button } from 'vtex.styleguide'
import { useMutation } from 'react-apollo'
import { FormattedMessage } from 'react-intl'

import { useLocaleSelector } from '../LocaleSelector'
import translateSpecificationValuesMutation from './graphql/translateSpecificationValues.gql'
import { useAlert } from '../../providers/AlertProvider'

interface SpecificationsFormProps {
  specificationInfo: FieldInputTranslation
  specificationId: string
  specificationValues: Specification[]
}

interface Specification {
  value: string;
  fieldValueId: string;
  isActive: boolean;
}

interface SpecificationValue {
  id: string;
  name: string;
}

const SpecificationsValuesForm: FC<SpecificationsFormProps> = ({
  specificationValues,
  specificationId
}) => {
  const { selectedLocale } = useLocaleSelector()
  const [fieldValuesNames, setFieldValuesNames] = useState<SpecificationValue[]>()
  const [changed, setChanged] = useState<boolean>(false)
  const [canEdit, setCanEdit] = useState<boolean>(false)
  const [translateSpecificationValues, {loading}] = useMutation(translateSpecificationValuesMutation);
  const { openAlert } = useAlert()

  useEffect(() => {
    let values: SpecificationValue[] = []
    specificationValues.map(specification => {
      if(specification.isActive) {
        values.push({
          id: specification.fieldValueId,
          name: specification.value
        })
      }
    })
    setFieldValuesNames(values)
  }, [])

  const handleInputChange = (itemId: any , index: number) => (e: FormEvent<HTMLInputElement>) => {
    const { name: fieldName, value } = e.currentTarget

    const newFieldValuesNames = fieldValuesNames?.map(el => {
      if (el.id === itemId) {
        return {...el, name: value};
      }
      return el;
    });
    setFieldValuesNames(newFieldValuesNames)
    setChanged(true)
  }

  const handleToggleEdit = () => {
    setCanEdit(!canEdit)
    setChanged(!changed)
  }

  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault()
    try {
      const { data, errors } = await translateSpecificationValues({
        variables: {
          locale: selectedLocale,
          args: {
            fieldId: specificationId,
            fieldValuesNames: fieldValuesNames
          }
        },
      })

      if(data.translateFieldValues) {
        openAlert('success', 'Specifications Values')
        setCanEdit(!canEdit)
      }
      if (errors?.length) {
        throw new TypeError('Error translation Specifications')
      }
    } catch (err) {
      openAlert('error', 'Specifications')
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="mb5">
          {fieldValuesNames ? fieldValuesNames.map((item: SpecificationValue, index) => {
            return (
              <Input
                key={item.id}
                label="Name"
                value={item.name}
                name="name"
                disabled={!canEdit}
                onChange={handleInputChange(item.id, index)}
              />
            )
          }): null}
        </div>
        <div>
          <span className="mr5">
            <Button type="button" variation="secondary" onClick={handleToggleEdit}>
              {canEdit ? (
                <FormattedMessage id="admin/catalog-translation.action-buttons.cancel" />
              ) : (
                <FormattedMessage id="admin/catalog-translation.action-buttons.edit" />
              )}
            </Button>
          </span>
          <span>
            <Button
              type="submit"
              variation="primary"
              disabled={!changed}
              isLoading={loading}
            >
              <FormattedMessage id="admin/catalog-translation.action-buttons.save" />
            </Button>
          </span>
        </div>
      </form>
    </div>
  )
}
export default SpecificationsValuesForm

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, SyntheticEvent } from 'react'
import { useMutation } from 'react-apollo'
import { Input } from 'vtex.styleguide'

import { useAlert } from '../../providers/AlertProvider'
import useFormTranslation from '../../hooks/useFormTranslation'
import { useLocaleSelector } from '../LocaleSelector'
import translateSKUMutation from './graphql/translateSKU.gql'
import ActionButtons from '../ActionButtons'

interface SKUFormProps {
  SKUInfo: SKUInputTranslation
  SKUId: string
  updateMemoSKU: (
    value: React.SetStateAction<{
      [Identifier: string]: SKUData
    }>
  ) => void
}

const SKUForm: FC<SKUFormProps> = ({ SKUInfo, SKUId, updateMemoSKU }) => {
  const {
    formState,
    canEdit,
    handleInputChange,
    changed,
    handleToggleEdit,
  } = useFormTranslation<SKUInputTranslation>(SKUInfo)

  const { isXVtexTenant, selectedLocale } = useLocaleSelector()
  const [translateSKU, { loading }] = useMutation<
    { translateSKU: boolean },
    { sku: SKU; locale: string }
  >(translateSKUMutation)

  const { openAlert } = useAlert()
  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault()
    if (loading) {
      return
    }
    const SKUArgs = {
      ...formState,
      ...{ id: SKUId },
    }
    try {
      const { data, errors } = await translateSKU({
        variables: {
          locale: selectedLocale,
          sku: SKUArgs,
        },
      })
      const { translateSKU: translateSKUResult } = data ?? {}
      if (translateSKUResult) {
        updateMemoSKU((state) => ({
          ...state,
          ...{ [selectedLocale]: { sku: SKUArgs } },
        }))
        openAlert('success', 'SKU')
      }
      if (errors?.length) {
        throw new TypeError('Error translation SKU')
      }
    } catch (err) {
      openAlert('error', 'SKU')
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="mb5">
          <Input
            label="Name"
            value={formState.name}
            name="name"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        {isXVtexTenant ? null : (
          <ActionButtons
            toggleEdit={handleToggleEdit}
            canEdit={canEdit}
            changed={changed}
            loading={loading}
          />
        )}
      </form>
    </div>
  )
}
export default SKUForm

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useState } from 'react'
import { useLazyQuery, useQuery } from 'react-apollo'

import ExportByCategoryIdModal from '../ExportByCatIdModal'
import { useLocaleSelector } from '../LocaleSelector'
import START_SKU_TRANSLATION from './graphql/startSkuTranslations.gql'
import SKU_TRANSLATION_REQUESTS from './graphql/getSkuTranslationRequests.gql'
import DOWNLOAD_SKU_TRANSLATION from './graphql/downloadSkuTranslations.gql'

interface Props {
  isExportOpen: boolean
  setIsExportOpen: (open: boolean) => void
}

const SKUExportModal = ({ isExportOpen, setIsExportOpen }: Props) => {
  const { selectedLocale } = useLocaleSelector()
  const [hasNewRequest, setHasNewRequest] = useState(false)

  const [
    triggerSkuTranslations,
    {
      data: skuTranslationInfo,
      loading: loadingSkuTranslation,
      error: skuTranslationError,
    },
  ] = useLazyQuery<
    SkuTranslationRequest,
    { locale: string; categoryId: string }
  >(START_SKU_TRANSLATION, {
    context: {
      headers: {
        'x-vtex-locale': `${selectedLocale}`,
      },
    },
    fetchPolicy: 'no-cache',
  })

  const { data: translationRequests, updateQuery } = useQuery<
    SkuTranslationRequests
  >(SKU_TRANSLATION_REQUESTS)

  useEffect(() => {
    const { requestId } = skuTranslationInfo?.skuTranslations ?? {}

    // eslint-disable-next-line vtex/prefer-early-return
    if (requestId) {
      updateQuery((prevResult) => {
        return {
          skuTranslationRequests: [
            requestId,
            ...(prevResult.skuTranslationRequests ?? []),
          ],
        }
      })
      setHasNewRequest(true)
    }
  }, [skuTranslationInfo, updateQuery])

  const startDownloadSKU = (categoryId: string) => {
    triggerSkuTranslations({
      variables: {
        locale: selectedLocale,
        categoryId,
      },
    })
  }

  useEffect(() => {
    if (hasNewRequest) {
      setHasNewRequest(false)
    }
  }, [hasNewRequest])

  const [download, { data: downloadJson, error: downloadError }] = useLazyQuery<
    SkuTranslationDownload,
    { requestId: string }
  >(DOWNLOAD_SKU_TRANSLATION)

  return (
    <ExportByCategoryIdModal
      isExportOpen={isExportOpen}
      setIsExportOpen={setIsExportOpen}
      translationRequests={translationRequests?.skuTranslationRequests ?? []}
      startDownload={startDownloadSKU}
      errorTranslation={skuTranslationError}
      loadingTranslations={loadingSkuTranslation}
      hasNewRequest={hasNewRequest}
      download={download}
      downloadJson={downloadJson?.downloadSKUTranslation}
      downloadError={downloadError}
      type="sku"
    />
  )
}

export default SKUExportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { SyntheticEvent } from 'react'
import { InputSearch, PageBlock, Spinner } from 'vtex.styleguide'

import useCatalogQuery from '../../hooks/useCatalogQuery'
import { useLocaleSelector } from '../LocaleSelector'
import getSKUQuery from './graphql/getSKU.gql'
import ErrorHandler from '../ErrorHandler'
import SKUForm from './SKUForm'
import SKUExportModal from './SKUExportModal'
import SKUImportModal from './SKUImportModal'

const SKUTranslation = ({
  isExportOpen = false,
  handleOpenExport = () => {},
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  const {
    entryInfo,
    isLoadingOrRefetching,
    entryId,
    handleEntryIdInput,
    handleCleanSearch,
    fetchEntry,
    setMemoEntries,
    errorMessage,
  } = useCatalogQuery<SKUData, { identifier: { field: 'id'; value: string } }>(
    getSKUQuery
  )

  const { selectedLocale } = useLocaleSelector()

  const handleSubmitSKUId = (e: SyntheticEvent) => {
    e.preventDefault()
    if (!entryId) {
      return
    }
    setMemoEntries({})
    fetchEntry({
      variables: { identifier: { field: 'id', value: entryId } },
    })
  }
  const { id, ...SKUInfo } = entryInfo?.sku || ({} as SKU)

  return (
    <>
      <main>
        <div style={{ maxWidth: '340px' }} className="mv7">
          <InputSearch
            value={entryId}
            placeHolder="Search SKU..."
            label="SKU ID"
            size="regular"
            onChange={handleEntryIdInput}
            onSubmit={handleSubmitSKUId}
            onClear={handleCleanSearch}
          />
        </div>
        {id || isLoadingOrRefetching || errorMessage ? (
          <PageBlock variation="full" title={`SKU info- ${selectedLocale}`}>
            {errorMessage ? (
              <ErrorHandler
                errorMessage={errorMessage}
                entryId={entryId}
                entry="SKU"
              />
            ) : isLoadingOrRefetching ? (
              <Spinner />
            ) : (
              <SKUForm
                SKUInfo={SKUInfo}
                SKUId={entryId}
                updateMemoSKU={setMemoEntries}
              />
            )}
          </PageBlock>
        ) : null}
      </main>
      <SKUExportModal
        isExportOpen={isExportOpen}
        setIsExportOpen={handleOpenExport}
      />
      <SKUImportModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
      />
    </>
  )
}

export default SKUTranslation

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import uploadMutationFile from './graphql/uploadSkuTranslation.gql'
import entryQueryFile from './graphql/skuUploadRequests.gql'
import ImportEntriesModal from '../ImportEntriesModal'

const bucket = 'sku_translation'
const entryHeaders: EntryHeadersProduct[] = [
  'id',
  'name'
]
const entryQueryName = 'skuTranslationsUploadRequests'
const entryName = 'Sku'
const fileName = 'sku_translate_model'
const paramEntryName = 'skus'
const sheetName = 'sku_data'
const uploadMutationName = 'uploadSkuTranslations'

const settings: ImportEntriesSettings = {
  bucket,
  entryHeaders,
  entryQueryFile,
  entryQueryName,
  entryName,
  fileName,
  paramEntryName,
  sheetName,
  uploadMutationFile,
  uploadMutationName,
}

const ProductImportModal = ({
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  return (
    <>
      <ImportEntriesModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
        settings={settings}
      />
    </>
  )
}

export default ProductImportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { useMutation, useQuery } from 'react-apollo'
import { ModalDialog, ButtonPlain, Dropzone, Tabs, Tab } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import { sanitizeImportJSON, parseXLSToJSON, createModel } from '../../utils'
import { useLocaleSelector } from '../LocaleSelector'
import WarningAndErrorsImportModal from '../WarningAndErrorsImportModal'
import UPLOAD_COLLECTION_TRANSLATION from './graphql/uploadCollectionTranslation.gql'
import UPLOAD_COLLECTION_REQUESTS from './graphql/collectionUploadRequests.gql'
import ImportStatusList from '../ImportStatusList'

const COLLECTION_HEADERS: Array<keyof Collection> = ['id', 'name']
const COLLECTION_DATA = 'collection_data'
const UPLOAD_LIST_SIZE = 10

const CollectionImportModal = ({
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  const [errorParsingFile, setErrorParsingFile] = useState('')
  const [loading, setLoading] = useState(false)
  const [errorModal, setErrorModal] = useState(false)
  const [warningModal, setWarningModal] = useState(false)
  const [validtionErrors, setValidationErrors] = useState<Message[]>([])
  const [validtionWarnings, setValidationWarnings] = useState<Message[]>([])
  const [originalFile, setOriginalFile] = useState<Array<{}>>([])
  const [formattedTranslations, setFormattedTranslations] = useState<
    Blob | undefined
  >(undefined)

  const [tabSelected, setTabSelected] = useState<1 | 2>(1)
  const { selectedLocale, xVtexTenant } = useLocaleSelector()

  const handleFile = async (files: FileList) => {
    if (loading) {
      return
    }

    setLoading(true)

    try {
      const fileParsed = await parseXLSToJSON(files[0], {
        sheetName: COLLECTION_DATA,
      })

      setOriginalFile(fileParsed)

      const [translations, { errors, warnings }] = sanitizeImportJSON({
        data: fileParsed,
        entryHeaders: COLLECTION_HEADERS,
        requiredHeaders: ['id'],
      })

      if (errors.length) {
        setValidationErrors(errors)
      }

      if (warnings.length) {
        setValidationWarnings(warnings)
      }

      const blob = new Blob([JSON.stringify(translations, null, 2)], {
        type: 'application/json',
      })

      setFormattedTranslations(blob)
    } catch (e) {
      // The errors being handled on parseXLSToJSON are thrown as strings.
      if (typeof e === 'string') {
        setErrorParsingFile(e)
      } else if (e instanceof Error) {
        setErrorParsingFile(e.message)
      } else {
        setErrorParsingFile('An unknown error occurred')
      }
    } finally {
      setLoading(false)
    }
  }

  const cleanErrors = () => {
    setValidationErrors([])
    setErrorParsingFile('')
    setValidationWarnings([])
    setOriginalFile([])
  }

  const handleReset = () => {
    if (loading) {
      return
    }
    setOriginalFile([])
    setFormattedTranslations(undefined)
    cleanErrors()
  }

  const handleCreateModel = () => {
    createModel(COLLECTION_HEADERS, COLLECTION_DATA, 'collection')
  }

  const [startCollectionUpload, { error: uploadError }] = useMutation<
    {
      uploadCollectionTranslations: string
    },
    {
      locale: string
      collections: Blob
      xVtexTenant: string
    }
  >(UPLOAD_COLLECTION_TRANSLATION)

  const { data, updateQuery } = useQuery<{
    collectionTranslationsUploadRequests: string[]
  }>(UPLOAD_COLLECTION_REQUESTS)

  const handleUploadRequest = async () => {
    if (!formattedTranslations) {
      return
    }

    const { data: newRequest } = await startCollectionUpload({
      variables: {
        locale: selectedLocale,
        collections: formattedTranslations,
        xVtexTenant,
      },
    })
    // eslint-disable-next-line vtex/prefer-early-return
    if (newRequest?.uploadCollectionTranslations) {
      updateQuery((prevResult) => {
        return {
          collectionTranslationsUploadRequests: [
            newRequest.uploadCollectionTranslations,
            ...(prevResult.collectionTranslationsUploadRequests ?? []),
          ],
        }
      })
      setTabSelected(2)
    }
  }

  return (
    <ModalDialog
      loading={loading}
      cancelation={{
        label: (
          <FormattedMessage id="admin/catalog-translation.import.modal.cancelation" />
        ),
        onClick: () => {
          handleOpenImport(false)
          cleanErrors()
        },
      }}
      confirmation={{
        label: (
          <FormattedMessage id="admin/catalog-translation.import.modal.confirmation" />
        ),
        onClick: () => {
          if (errorParsingFile) {
            return
          }
          handleUploadRequest()
        },
      }}
      isOpen={isImportOpen}
      onClose={() => {
        handleOpenImport(false)
        cleanErrors()
      }}
    >
      <h3>
        <FormattedMessage
          id="admin/catalog-translation.import.modal.header.collections"
          values={{
            selectedLocale,
          }}
        />
      </h3>
      <div>
        <Tabs>
          <Tab
            label={
              <FormattedMessage id="admin/catalog-translation.import.modal.import-tab" />
            }
            active={tabSelected === 1}
            onClick={() => {
              setTabSelected(1)
              handleReset()
            }}
          >
            <div>
              <div className="mv4">
                <ButtonPlain onClick={handleCreateModel}>
                  <FormattedMessage id="admin/catalog-translation.import.modal.download-button" />
                </ButtonPlain>
              </div>
              <div>
                <Dropzone
                  accept=".xlsx"
                  onDropAccepted={handleFile}
                  onFileReset={handleReset}
                >
                  <div className="pt7">
                    <span className="f4">
                      <FormattedMessage id="admin/catalog-translation.import.modal.dropzone" />
                    </span>
                    <span className="f4 c-link" style={{ cursor: 'pointer' }}>
                      <FormattedMessage id="admin/catalog-translation.import.modal.dropzone-choose-file" />
                    </span>
                  </div>
                </Dropzone>
              </div>
              {errorParsingFile ? (
                <p className="c-danger i f7">{errorParsingFile}</p>
              ) : null}
            </div>
            <ul>
              {originalFile.length ? (
                <li>
                  {originalFile?.length}{' '}
                  <FormattedMessage id="admin/catalog-translation.import.modal.total-entries" />
                </li>
              ) : null}
              {validtionWarnings.length ? (
                <li>
                  <ButtonPlain onClick={() => setWarningModal(true)}>
                    {validtionWarnings.length}{' '}
                    <FormattedMessage id="admin/catalog-translation.import.modal.total-warnings" />
                  </ButtonPlain>
                </li>
              ) : null}
              {validtionErrors.length ? (
                <li>
                  <ButtonPlain
                    variation="danger"
                    onClick={() => setErrorModal(true)}
                  >
                    {validtionErrors.length}{' '}
                    <FormattedMessage id="admin/catalog-translation.import.modal.total-errors" />
                  </ButtonPlain>
                </li>
              ) : null}
            </ul>
            {uploadError ? (
              <p className="absolute c-danger i-s bottom-0-m right-0-m mr8">
                <FormattedMessage id="admin/catalog-translation.import.modal.error-uploading" />
              </p>
            ) : null}
          </Tab>
          <Tab
            label={
              <FormattedMessage id="admin/catalog-translation.import.modal.request-tab" />
            }
            active={tabSelected === 2}
            onClick={() => {
              setTabSelected(2)
              handleReset()
            }}
          >
            <table className="w-100 mt7 tc">
              <thead>
                <tr>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.import.modal.table-header.locale" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.import.modal.table-header.translated-by" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.import.modal.table-header.created-at" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.import.modal.table-header.progress" />
                  </th>
                  <th>
                    <FormattedMessage id="admin/catalog-translation.import.modal.table-header.total-translated" />
                  </th>
                </tr>
              </thead>
              <tbody>
                {data?.collectionTranslationsUploadRequests
                  ?.slice(0, UPLOAD_LIST_SIZE)
                  .map((requestId) => (
                    <ImportStatusList
                      requestId={requestId}
                      key={requestId}
                      bucket="collection_transl"
                    />
                  ))}
              </tbody>
            </table>
          </Tab>
        </Tabs>
      </div>
      <WarningAndErrorsImportModal
        isOpen={warningModal}
        modalName="Warning Modal"
        handleClose={setWarningModal}
        data={validtionWarnings}
      />
      <WarningAndErrorsImportModal
        isOpen={errorModal}
        modalName="Error Modal"
        handleClose={setErrorModal}
        data={validtionErrors}
      />
    </ModalDialog>
  )
}

export default CollectionImportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { SyntheticEvent, useEffect, useMemo, useState } from 'react'
import {
  InputSearch,
  PageBlock,
  Spinner,
  ModalDialog,
  Checkbox,
} from 'vtex.styleguide'
import { useLazyQuery, useQuery } from 'react-apollo'
import { MessageListV2, IndexedMessages } from 'vtex.messages'
import { FormattedMessage, useIntl } from 'react-intl'

import useCatalogQuery from '../../hooks/useCatalogQuery'
import { useLocaleSelector } from '../LocaleSelector'
import ErrorHandler from '../ErrorHandler'
import getCollectionById from './graphql/getCollections.gql'
import getAllCollections from './graphql/getAllCollections.gql'
import CollectionsForm from './CollectionForm'
import QUERY_MESSAGES from './graphql/messages.gql'
import { formatCollectionFromMessages, parseJSONToXLS } from '../../utils'
import CollectionImportModal from './CollectionImportModal'

interface CollectionTranslations {
  collectionTranslations: Collection[]
}

const CollectionsTranslation = ({
  isExportOpen = false,
  isImportOpen = false,
  handleOpenExport = () => {},
  handleOpenImport = () => {},
}: ComponentProps) => {
  const {
    entryInfo,
    isLoadingOrRefetching,
    entryId,
    handleEntryIdInput,
    handleCleanSearch,
    fetchEntry,
    setMemoEntries,
    errorMessage,
  } = useCatalogQuery<CollectionsData, { fieldId: number }>(getCollectionById)

  const { selectedLocale, xVtexTenant } = useLocaleSelector()
  const [fetchMessages, setFetchMessages] = useState(false)
  const [messagesTranslations, setMessagesTranslations] = useState(
    {} as { userTranslations: MessageListV2[] }
  )
  const intl = useIntl()
  /* Transfer Modal */
  const [onlyActive, setOnlyActive] = useState(true)
  const [downloading, setDownloading] = useState(false)
  const [hasError, setHasError] = useState(false)

  const handleSubmitSpecification = (e: SyntheticEvent) => {
    e.preventDefault()
    if (!entryId) {
      return
    }
    setMemoEntries({})
    fetchEntry({
      variables: { fieldId: Number(entryId) },
    })
    setFetchMessages(true)
  }

  const { refetch, loading: loadingMessages, error: errorMessages } = useQuery<
    { userTranslations: MessageListV2[] },
    { args: IndexedMessages }
  >(QUERY_MESSAGES, {
    ssr: false,
    skip: !entryId || !entryInfo?.collection.name || !fetchMessages,
    onCompleted: (data) => {
      setMessagesTranslations(data)
      setFetchMessages(false)
    },
    fetchPolicy: 'no-cache',
    variables: {
      args: {
        from: xVtexTenant,
        messages: [
          {
            content: entryInfo?.collection.name,
            context: entryId,
          },
        ],
      },
    },
  })

  const translatedCollectionNames = useMemo(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (messagesTranslations.userTranslations && entryInfo) {
      const [userFormTranslation] = messagesTranslations.userTranslations
      const { translations, context, srcLang } = userFormTranslation
      return formatCollectionFromMessages({
        translations,
        context: context ?? '',
        srcLang,
        originalMessage: entryInfo.collection.name,
      })
    }
    return {}
  }, [messagesTranslations, entryInfo])

  const collectionInfo =
    translatedCollectionNames[selectedLocale] ??
    translatedCollectionNames[xVtexTenant] ??
    {}

  const handleUpdateMessage = async () => {
    const { data } = await refetch({
      args: {
        from: xVtexTenant,
        messages: [
          {
            content: entryInfo?.collection.name,
            context: entryId,
          },
        ],
      },
    })
    setMessagesTranslations(data)
  }

  const [fetchCollections, { data, error }] = useLazyQuery<
    CollectionTranslations,
    { locale: string; active?: boolean; xVtexTenant: string }
  >(getAllCollections, {
    context: {
      headers: {
        'x-vtex-locale': `${selectedLocale}`,
      },
    },
    fetchPolicy: 'no-cache',
  })

  const downloadCollections = () => {
    setHasError(false)
    setDownloading(true)
    fetchCollections({
      variables: { active: onlyActive, locale: selectedLocale, xVtexTenant },
    })
  }

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (data && downloading) {
      parseJSONToXLS(data.collectionTranslations, {
        fileName: `collection-data-${selectedLocale}`,
        sheetName: 'collection_data',
      })

      setDownloading(false)
      handleOpenExport(false)
    }
  }, [data, selectedLocale, downloading, handleOpenExport])

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (error) {
      setDownloading(false)
      setHasError(true)
    }
  }, [error])

  return (
    <>
      <main>
        <div style={{ maxWidth: '340px' }} className="mv7">
          <InputSearch
            value={entryId}
            placeholder="Search collections..."
            label={
              <FormattedMessage id="admin/catalog-translation.collections.search-label" />
            }
            size="regular"
            onChange={handleEntryIdInput}
            onSubmit={handleSubmitSpecification}
            onClear={handleCleanSearch}
          />
        </div>
        {collectionInfo.name ||
        isLoadingOrRefetching ||
        loadingMessages ||
        errorMessage ||
        errorMessages ? (
          <PageBlock
            variation="full"
            title={
              <FormattedMessage
                id="admin/catalog-translation.collections.block-header"
                values={{ selectedLocale }}
              />
            }
          >
            {errorMessage ? (
              <ErrorHandler
                errorMessage={errorMessage || (errorMessages?.message ?? '')}
                entryId={entryId}
                entry={intl.formatMessage({
                  id: 'admin/catalog-translation.entry-type.collection',
                })}
              />
            ) : isLoadingOrRefetching || loadingMessages ? (
              <Spinner />
            ) : (
              <CollectionsForm
                collectionInfo={collectionInfo}
                srcMessage={translatedCollectionNames[xVtexTenant]?.name ?? ''}
                updateMemoCollections={handleUpdateMessage}
              />
            )}
          </PageBlock>
        ) : null}
      </main>
      <ModalDialog
        loading={downloading}
        cancelation={{
          label: 'Cancel',
          onClick: () => {
            handleOpenExport(false)
            setHasError(false)
          },
        }}
        confirmation={{
          label: 'Export Collections',
          onClick: downloadCollections,
        }}
        isOpen={isExportOpen}
        onClose={() => {
          handleOpenExport(false)
          setHasError(false)
        }}
      >
        <div>
          <h3>Export Collections Data for {selectedLocale}</h3>
          <Checkbox
            label="Export only active collections"
            name="active-selection"
            value={onlyActive}
            checked={onlyActive}
            onChange={() => setOnlyActive(!onlyActive)}
          />
        </div>
        {hasError ? (
          <p className="absolute c-danger i-s bottom-0-m right-0-m mr8">
            There was an error exporting collections. Please try again.
          </p>
        ) : null}
      </ModalDialog>
      <CollectionImportModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
      />
    </>
  )
}

export default CollectionsTranslation

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { SyntheticEvent } from 'react'
import { Input } from 'vtex.styleguide'
import { useMutation } from 'react-apollo'
import { SaveArgsV2 } from 'vtex.messages'
import { FormattedMessage } from 'react-intl'

import { useLocaleSelector } from '../LocaleSelector'
import { useAlert } from '../../providers/AlertProvider'
import useFormTranslation from '../../hooks/useFormTranslation'
import ActionButtons from '../ActionButtons'
import TRANSLATE_MESSAGES from './graphql/translateMessages.gql'

interface CollectionsFormProps {
  collectionInfo: Collections
  srcMessage: string
  updateMemoCollections: () => void
}

const CollectionsForm = ({
  collectionInfo,
  srcMessage,
  updateMemoCollections,
}: CollectionsFormProps) => {
  const { isXVtexTenant, selectedLocale, xVtexTenant } = useLocaleSelector()
  const { openAlert } = useAlert()
  const {
    formState,
    canEdit,
    handleInputChange,
    changed,
    handleToggleEdit,
  } = useFormTranslation<CollectionsName>(collectionInfo)

  const [translateCollection, { loading }] = useMutation<
    { saveV2: boolean },
    { saveArgs: SaveArgsV2 }
  >(TRANSLATE_MESSAGES)
  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault()
    if (loading) {
      return
    }
    const saveArgs: SaveArgsV2 = {
      messages: [
        {
          srcLang: xVtexTenant,
          context: collectionInfo.id,
          srcMessage,
          targetMessage: formState.name,
        },
      ],
      to: selectedLocale,
    }
    try {
      const { data, errors } = await translateCollection({
        variables: {
          saveArgs,
        },
      })
      const { saveV2: translateCollectionResponse } = data ?? {}
      if (translateCollectionResponse) {
        openAlert('success', 'Collections')
        updateMemoCollections()
      }
      if (errors?.length) {
        throw new TypeError('Error translation Collections')
      }
    } catch (err) {
      openAlert('error', 'Collections')
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="mb5">
          <Input
            label={
              <FormattedMessage id="admin/catalog-translation.form-fields.name" />
            }
            value={formState.name}
            name="name"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
            required
          />
        </div>
        {isXVtexTenant ? null : (
          <ActionButtons
            toggleEdit={handleToggleEdit}
            canEdit={canEdit}
            changed={changed}
            loading={loading}
          />
        )}
      </form>
    </div>
  )
}

export default CollectionsForm

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import uploadMutationFile from './graphql/uploadProductTranslation.gql'
import entryQueryFile from './graphql/productUploadRequests.gql'
import ImportEntriesModal from '../ImportEntriesModal'

const bucket = 'product_translation'
const entryHeaders: EntryHeadersProduct[] = [
  'id',
  'name',
  'title',
  'description',
  'shortDescription',
  'linkId',
  'metaTagDescription',
]
const entryQueryName = 'productTranslationsUploadRequests'
const entryName = 'Product'
const fileName = 'product_translate_model'
const paramEntryName = 'products'
const sheetName = 'product_data'
const uploadMutationName = 'uploadProductTranslations'

const settings: ImportEntriesSettings = {
  bucket,
  entryHeaders,
  entryQueryFile,
  entryQueryName,
  entryName,
  fileName,
  paramEntryName,
  sheetName,
  uploadMutationFile,
  uploadMutationName,
}

const ProductImportModal = ({
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  return (
    <>
      <ImportEntriesModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
        settings={settings}
      />
    </>
  )
}

export default ProductImportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { useState, useEffect } from 'react'
import { useLazyQuery, useQuery } from 'react-apollo'

import { useLocaleSelector } from '../LocaleSelector'
import START_PRODUCT_TRANSLATION from './graphql/startProductTranslations.gql'
import PROD_TRANSLATION_REQUESTS from './graphql/getProductTranslationRequests.gql'
import ExportByCategoryIdModal from '../ExportByCatIdModal'
import DOWNLOAD_PRODUCT_TRANSLATION from './graphql/downloadProductTranslations.gql'

interface Props {
  isExportOpen: boolean
  setIsExportOpen: (open: boolean) => void
}

const ProductExportModal = ({ isExportOpen, setIsExportOpen }: Props) => {
  const { selectedLocale } = useLocaleSelector()
  const [hasNewRequest, setHasNewRequest] = useState(false)

  const [
    triggerProductTranslations,
    {
      data: productTranslationInfo,
      loading: loadingProdTranslation,
      error: prodTranslationError,
    },
  ] = useLazyQuery<
    ProductTranslationRequest,
    { locale: string; categoryId: string }
  >(START_PRODUCT_TRANSLATION, {
    context: {
      headers: {
        'x-vtex-locale': `${selectedLocale}`,
      },
    },
    fetchPolicy: 'no-cache',
  })

  const { data: translationRequests, updateQuery } = useQuery<
    ProdTranslationRequests
  >(PROD_TRANSLATION_REQUESTS)

  useEffect(() => {
    const { requestId } = productTranslationInfo?.productTranslations ?? {}

    // eslint-disable-next-line vtex/prefer-early-return
    if (requestId) {
      updateQuery((prevResult) => {
        return {
          productTranslationRequests: [
            requestId,
            ...(prevResult.productTranslationRequests ?? []),
          ],
        }
      })
      setHasNewRequest(true)
    }
  }, [productTranslationInfo, updateQuery])

  const startDownloadProducts = (categoryId: string) => {
    triggerProductTranslations({
      variables: { locale: selectedLocale, categoryId },
    })
  }

  useEffect(() => {
    if (hasNewRequest) {
      setHasNewRequest(false)
    }
  }, [hasNewRequest])

  const [download, { data: downloadJson, error: downloadError }] = useLazyQuery<
    ProductTranslationDownload,
    { requestId: string }
  >(DOWNLOAD_PRODUCT_TRANSLATION)

  return (
    <ExportByCategoryIdModal
      isExportOpen={isExportOpen}
      setIsExportOpen={setIsExportOpen}
      translationRequests={
        translationRequests?.productTranslationRequests ?? []
      }
      startDownload={startDownloadProducts}
      errorTranslation={prodTranslationError}
      loadingTranslations={loadingProdTranslation}
      hasNewRequest={hasNewRequest}
      download={download}
      downloadJson={downloadJson?.downloadProductTranslation}
      downloadError={downloadError}
      type="product"
    />
  )
}

export default ProductExportModal

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, SyntheticEvent } from 'react'
import { Input, Textarea } from 'vtex.styleguide'
import { useMutation } from 'react-apollo'

import { useLocaleSelector } from '../LocaleSelector'
import translateProductMutation from './graphql/translateProduct.gql'
import { useAlert } from '../../providers/AlertProvider'
import useFormTranslation from '../../hooks/useFormTranslation'
import ActionButtons from '../ActionButtons'

interface ProductFormProps {
  productInfo: ProductInputTranslation
  productId: string
  updateMemoProducts: (
    value: React.SetStateAction<{
      [Identifier: string]: ProductData
    }>
  ) => void
}

const ProductForm: FC<ProductFormProps> = ({
  productInfo,
  productId,
  updateMemoProducts,
}) => {
  const {
    formState,
    canEdit,
    handleInputChange,
    changed,
    handleToggleEdit,
  } = useFormTranslation<ProductInputTranslation>(productInfo)

  const { isXVtexTenant, selectedLocale } = useLocaleSelector()

  const [translateProduct, { loading }] = useMutation<
    { translateProduct: boolean },
    { product: Product; locale: string }
  >(translateProductMutation)

  const { openAlert } = useAlert()

  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault()
    if (loading) {
      return
    }
    const productArgs = {
      ...formState,
      ...{ id: productId },
    }
    try {
      const { data, errors } = await translateProduct({
        variables: {
          locale: selectedLocale,
          product: productArgs,
        },
      })
      const { translateProduct: translateProductResult } = data ?? {}
      if (translateProductResult) {
        updateMemoProducts((state) => ({
          ...state,
          ...{ [selectedLocale]: { product: productArgs } },
        }))
        openAlert('success', 'product')
      }
      if (errors?.length) {
        throw new TypeError('Error translation product')
      }
    } catch (err) {
      openAlert('error', 'product')
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div className="mb5">
          <Input
            label="Name"
            value={formState.name}
            name="name"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        <div className="mb5">
          <Textarea
            resize="none"
            label="Description"
            value={formState.description}
            name="description"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        <div className="mb5">
          <Textarea
            resize="none"
            label="Short Description"
            value={formState.shortDescription}
            name="shortDescription"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        <div className="mb5">
          <Textarea
            resize="none"
            label="Meta Tag Description"
            value={formState.metaTagDescription}
            name="metaTagDescription"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        <div className="mb5">
          <Input
            label="Title"
            value={formState.title}
            name="title"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
          />
        </div>
        <div className="mb5">
          <Input
            label="Link Id"
            value={formState.linkId}
            name="linkId"
            disabled={isXVtexTenant || !canEdit}
            onChange={handleInputChange}
            pattern="^[^\s]+$"
            helpText={<p>Link ID cannot have whitespaces</p>}
          />
        </div>
        {isXVtexTenant ? null : (
          <ActionButtons
            toggleEdit={handleToggleEdit}
            canEdit={canEdit}
            changed={changed}
            loading={loading}
          />
        )}
      </form>
    </div>
  )
}

export default ProductForm

```


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

[Assistant]
Here's the implementation:

```tsx
import React, { SyntheticEvent } from 'react'
import { InputSearch, PageBlock, Spinner } from 'vtex.styleguide'

import { useLocaleSelector } from '../LocaleSelector'
import getProductQuery from './graphql/getProduct.gql'
import ProductForm from './ProductForm'
import ErrorHandler from '../ErrorHandler'
import useCatalogQuery from '../../hooks/useCatalogQuery'
import ProductExportModal from './ProductExportModal'
import ProductImportModal from './ProductImportModal'

const ProductTranslation = ({
  isExportOpen = false,
  handleOpenExport = () => {},
  isImportOpen = false,
  handleOpenImport = () => {},
}: ComponentProps) => {
  const {
    entryInfo,
    isLoadingOrRefetching,
    entryId,
    handleCleanSearch,
    handleEntryIdInput,
    fetchEntry,
    setMemoEntries,
    errorMessage,
  } = useCatalogQuery<
    ProductData,
    { identifier: { value: string; field: 'id' } }
  >(getProductQuery)

  const { selectedLocale } = useLocaleSelector()

  const handleSubmitProductId = (e: SyntheticEvent) => {
    e.preventDefault()
    if (!entryId) {
      return
    }
    setMemoEntries({})
    fetchEntry({
      variables: { identifier: { field: 'id', value: entryId } },
    })
  }

  const { id, ...productInfo } = entryInfo?.product || ({} as Product)

  return (
    <>
      <main>
        <div className="flex">
          <div style={{ maxWidth: '340px' }} className="mv7">
            <InputSearch
              value={entryId}
              placehoder="Search product..."
              label="Product Id"
              size="regular"
              onChange={handleEntryIdInput}
              onSubmit={handleSubmitProductId}
              onClear={handleCleanSearch}
            />
          </div>
        </div>
        {id || isLoadingOrRefetching || errorMessage ? (
          <PageBlock
            variation="full"
            title={`Product Info - ${selectedLocale}`}
          >
            {errorMessage ? (
              <ErrorHandler
                errorMessage={errorMessage}
                entryId={entryId}
                entry="Product"
              />
            ) : isLoadingOrRefetching ? (
              <Spinner />
            ) : (
              <ProductForm
                productInfo={productInfo}
                productId={entryId}
                updateMemoProducts={setMemoEntries}
              />
            )}
          </PageBlock>
        ) : null}
      </main>
      <ProductExportModal
        isExportOpen={isExportOpen}
        setIsExportOpen={handleOpenExport}
      />
      <ProductImportModal
        isImportOpen={isImportOpen}
        handleOpenImport={handleOpenImport}
      />
    </>
  )
}

export default ProductTranslation

```


[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-catalog-translations/react/components/BrandTranslation/graphql/getAllBrands.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getAllBrands($locale: String!, $active: Boolean) {
  brandTranslations(locale: $locale, active: $active)
    @context(provider: "vtex.admin-catalog-translation") {
    id
    name
    text
    siteTitle
    active
  }
}

```


[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-catalog-translations/react/components/BrandTranslation/graphql/translateBrand.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation TranslateBrand($brand: BrandInputTranslation!, $locale: Locale) {
  translateBrand(brand: $brand, locale: $locale)
    @context(provider: "vtex.catalog-graphql")
}

```


[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-catalog-translations/react/components/BrandTranslation/graphql/getBrand.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getBrand($id: ID!) {
  brand(id: $id) @context(provider: "vtex.catalog-graphql") {
    id
    name
    text
    siteTitle
  }
}

```


[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-catalog-translations/react/components/BrandTranslation/graphql/uploadBrandTranslation.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadBrandTranslations($locale: String!, $brands: Upload!) {
  uploadBrandTranslations(locale: $locale, brands: $brands)
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/BrandTranslation/graphql/brandUploadRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query brandTranslationsUploadRequests {
  brandTranslationsUploadRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/CategoryTranslation/graphql/translateCategory.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation translateCategory($args: CategoryInputTranslation, $locale: Locale) {
  translateCategory(category: $args, locale: $locale)
    @context(provider: "vtex.catalog-graphql")
}

```


[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-catalog-translations/react/components/CategoryTranslation/graphql/getCategory.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getCategory($id: ID!) {
  category(id: $id) @context(provider: "vtex.catalog-graphql") {
    id
    name
    title
    description
    linkId
  }
}

```


[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-catalog-translations/react/components/CategoryTranslation/graphql/uploadCategoryTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadCategoryTranslations($locale: String!, $categories: Upload!) {
  uploadCategoryTranslations(locale: $locale, categories: $categories)
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/CategoryTranslation/graphql/categoryTranslationsUploadRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query categoryTranslationsUploadRequests {
  categoryTranslationsUploadRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/CategoryTranslation/graphql/getAllCategories.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getAllCategories($locale: String!, $active: Boolean) {
  categoryTranslations(locale: $locale, active: $active)
    @context(provider: "vtex.admin-catalog-translation") {
    id
    name
    title
    description
    locale
    linkId
  }
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/downloadFieldTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query downloadFieldTranslations($requestId: String!) {
  downloadFieldTranslations(requestId: $requestId)
    @context(provider: "vtex.admin-catalog-translation") {
    fieldId
    name
  }
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/uploadFieldTranslationsImport.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadFieldTranslationsImport($locale: String!, $fields: Upload!) {
  uploadFieldTranslationsImport(locale: $locale, fields: $fields)
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/fieldTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query fieldTranslations($locale: String!, $fields: Upload!) {
  fieldTranslations(locale: $locale, fields: $fields)
    @context(provider: "vtex.admin-catalog-translation") {
    requestId
  }
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/fieldTranslationsUploadRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query fieldTranslationsUploadRequests {
  fieldTranslationsUploadRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/translateSpecificationValues.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation translateFieldValues($args: FieldValueInputTranslation, $locale: Locale) {
  translateFieldValues(fieldValues: $args, locale: $locale)
    @context(provider: "vtex.catalog-graphql")
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/getSpecificationValues.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query GetSpecificationValues($fieldId: ID!) {
  fieldValues(fieldId: $fieldId) @context(provider: "vtex.catalog-graphql") {
    fieldId
    fieldValueId
    isActive
    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 admin-catalog-translations/react/components/SpecificationsTranslation/graphql/getSpecification.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query GetSpecification($fieldId: ID!) {
  field(id: $fieldId) @context(provider: "vtex.catalog-graphql") {
    fieldId
    name
  }
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/fieldTranslationsRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query fieldTranslationsRequests {
  fieldTranslationsRequests @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/SpecificationsTranslation/graphql/translateSpecification.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation translateSpecification($args: FieldInputTranslation, $locale: Locale) {
  translateField(field: $args, locale: $locale)
    @context(provider: "vtex.catalog-graphql")
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/downloadSkuTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query downloadSkuTranslations($requestId: String!) {
  downloadSKUTranslation(requestId: $requestId)
    @context(provider: "vtex.admin-catalog-translation") {
    id
    name
    locale
  }
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/getSkuTranslationRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getSkuTranslationRequests {
  skuTranslationRequests @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/uploadSkuTranslation.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadSkuTranslations($locale: String!, $skus: Upload!) {
  uploadSkuTranslations(locale: $locale, skus: $skus)
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/translateSKU.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation TranslateSKU($sku: SKUInputTranslation!, $locale: Locale!) {
  translateSKU(sku: $sku, locale: $locale)
    @context(provider: "vtex.catalog-graphql")
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/startSkuTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query startSkuTranslations($locale: String!, $categoryId: String!) {
  skuTranslations(locale: $locale, categoryId: $categoryId)
    @context(provider: "vtex.admin-catalog-translation") {
    requestId
  }
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/skuUploadRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query skuTranslationsUploadRequests {
  skuTranslationsUploadRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/SKUTranslation/graphql/getSKU.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query GetSKU($identifier: SKUUniqueIdentifier) {
  sku(identifier: $identifier) @context(provider: "vtex.catalog-graphql") {
    id
    name
  }
}

```


[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-catalog-translations/react/components/CollectionsTranslation/graphql/uploadCollectionTranslation.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadCollectionTranslations(
  $locale: String!
  $collections: Upload!
  $xVtexTenant: String!
) {
  uploadCollectionTranslations(
    locale: $locale
    collections: $collections
    xVtexTenant: $xVtexTenant
  ) @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/CollectionsTranslation/graphql/collectionUploadRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query collectionTranslationsUploadRequests {
  collectionTranslationsUploadRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/CollectionsTranslation/graphql/translateMessages.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation translateMessages($saveArgs: SaveArgsV2!) {
  saveV2(args: $saveArgs) @context(provider: "vtex.messages")
}

```


[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-catalog-translations/react/components/CollectionsTranslation/graphql/getAllCollections.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getAllCollections(
  $locale: String!
  $active: Boolean
  $xVtexTenant: String!
) {
  collectionTranslations(
    locale: $locale
    active: $active
    xVtexTenant: $xVtexTenant
  ) @context(provider: "vtex.admin-catalog-translation") {
    id
    name
    locale
  }
}

```


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

[Assistant]
Here's the implementation:

```graphql
query messages($args: IndexedMessages!) {
  userTranslations(args: $args) @context(provider: "vtex.messages") {
    context
    srcLang
    translations {
      lang
      translation
    }
  }
}

```


[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-catalog-translations/react/components/CollectionsTranslation/graphql/getCollections.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query GetCollection($fieldId: ID!) {
  collection(id: $fieldId) @context(provider: "vtex.catalog-graphql") {
    id
    name
  }
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/productUploadRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query productTranslationsUploadRequests {
  productTranslationsUploadRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/uploadProductTranslation.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadProductTranslations($locale: String!, $products: Upload!) {
  uploadProductTranslations(locale: $locale, products: $products)
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/getProductTranslationRequests.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getProdTranslationRequests {
  productTranslationRequests
    @context(provider: "vtex.admin-catalog-translation")
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/startProductTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query startProductTranslations($locale: String!, $categoryId: String!) {
  productTranslations(locale: $locale, categoryId: $categoryId)
    @context(provider: "vtex.admin-catalog-translation") {
    requestId
  }
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/translateProduct.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation TranslateProduct(
  $product: ProductInputTranslation!
  $locale: Locale!
) {
  translateProduct(product: $product, locale: $locale)
    @context(provider: "vtex.catalog-graphql")
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/getProduct.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query GetProduct($identifier: ProductUniqueIdentifier) {
  product(identifier: $identifier) @context(provider: "vtex.catalog-graphql") {
    id
    name
    description
    shortDescription
    metaTagDescription
    title
    linkId
  }
}

```


[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-catalog-translations/react/components/ProductTranslation/graphql/downloadProductTranslations.gql from the admin-catalog-translations VTEX app.

[Assistant]
Here's the implementation:

```graphql
query downloadProductTranslations($requestId: String!) {
  downloadProductTranslation(requestId: $requestId)
    @context(provider: "vtex.admin-catalog-translation") {
    id
    name
    description
    shortDescription
    title
    locale
    linkId
  }
}

```


[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 marketplace-financial-commission-cron/docs/README.md from the marketplace-financial-commission-cron VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Marketplace Financial Commission Cron

Application used exclusively for the Financial Commission project and installed together with the `vtex.marketplace-financial-commission` app. For more information [click here](https://github.com/vtex-apps/marketplace-financial-commission).

The application has the function of calling the endpoints responsible for generating the dashboard and generating invoices.

    > 1. Call the `dashboard/generate` endpoint, from the `vtex.marketplace-financial-commission` app, to generate the dashboard data. The cron job is triggered in the middle of the night.
    > 2. Call the `invoice/generate` endpoint, from the `vtex.marketplace-financial-commission` app, to generate the invoice data. The cron job is triggered in the middle of the night.

## Install

```powershell
vtex install vtex.marketplace-financial-commission-cron@1.1.x
```

In order for it to work correctly in the account to be installed, it must have been previously installed `vtex.marketplace-financial-commission` app.

When the app is installed it automatically triggers the `dashboard/generate` enpoint and generates the information of the last 30 days.

## External Invoice

If the integration type configuration used in the marketplace of the `vtex.marketplace-financial-commission` app is set to `external`, the calls to the above mentioned `dashboard/generate` and `invoice/generate`  endpoints will not be triggered.

## Events

The `events` directory contains the schedulers to be created, which are activated when the application is installed. The `setupScheduleDashboard` file contains the process of sending the request for the generation of the last 30 days.

![image](https://user-images.githubusercontent.com/14004558/186959432-d1287f28-5f2c-4d97-9ba8-c9687467743d.png)

En el directorio `configs\schedulerTemplate` se encuentra la configuracion de los scheduler.

![image](https://user-images.githubusercontent.com/14004558/186959391-72b98072-a9ba-4859-aed1-46c9028c7f9a.png)

```


[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 marketplace-financial-commission-cron/node/routes.ts from the marketplace-financial-commission-cron VTEX app.

[Assistant]
Here's the implementation:

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

import { generateDashboard } from './middlewares/dashboard/generateDashboard'
import { generateInvoice } from './middlewares/invoice/generateInvoice'
import { schedulerAuthenticationDashboard } from './middlewares/scheduler/schedulerAuthenticationDashboard'
import { schedulerAuthenticationInvoice } from './middlewares/scheduler/schedulerAuthenticationInvoice'

const routes = {
  dashboardGenerate: method({
    POST: [schedulerAuthenticationDashboard, generateDashboard],
  }),
  invoiceGenerate: method({
    POST: [schedulerAuthenticationInvoice, generateInvoice],
  }),
}

export { routes }

```


[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 marketplace-financial-commission-cron/node/service.json from the marketplace-financial-commission-cron VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 60,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "dashboardGenerate": {
      "path": "/_v/scheduler/dashboard/generate",
      "public": true
    },
    "invoiceGenerate": {
      "path": "/_v/scheduler/invoice/generate",
      "public": true
    }
  },
  "events": {
    "setupSchedulerDashboard": {
      "sender": "apps",
      "topics": ["setup"]
    },
    "setupSchedulerInvoice": {
      "sender": "apps",
      "topics": ["setup"]
    }
  }
}

```