[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 b2b-organizations/react/components/CreateOrganizationButton/CreateOrganizationButton.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import {
  IconPencil,
  IconCloudArrowUp,
  Menu,
  MenuItem,
  PageHeaderMenuButton,
  Text,
  useMenuState,
} from '@vtex/admin-ui'
import { UploadModal } from '@vtex/bulk-import-ui'
import { useSWRConfig } from 'swr'

import CreateOrganizationModal from '../CreateOrganizationModal'
import { organizationMessages as messages } from '../../admin/utils/messages'
import { useBulkImportsQuery, useTranslate } from '../../hooks'
import ReportErrorScreen from '../UploadModal/ReportErrorScreen'
import ReportScreen from '../UploadModal/ReportScreen'
import ReportSuccessScreen from '../UploadModal/ReportSuccessScreen'
import { uploadBulkImportFile } from '../../services'
import type {
  BulkImportUploadError,
  FieldValidationError,
  UploadFileData,
  UploadFileResult,
} from '../../types/BulkImport'
import useStartBulkImport from '../../hooks/useStartBulkImport'
import ReportDownloadLink from '../ReportDownloadLink/ReportDownloadLink'
import { UploadingScreen } from '../UploadingScreen'
import { ImportInBulkTooltip } from '../ImportInBulkTooltip'
import {
  B2B_BULK_IMPORT_TEMPLATE_LINK,
  B2B_BULK_IMPORT_BEST_PRACTICES_LINK,
  ORGANIZATION_EDIT,
} from '../../utils/constants'
import { useOrgPermission } from '../../hooks/useOrgPermission'

const CreateOrganizationButton = () => {
  const { formatMessage, translate: t } = useTranslate()
  const menuState = useMenuState()
  const [open, setOpen] = useState(false)
  const [uploadModalOpen, setUploadModalOpen] = useState(false)
  const { mutate } = useSWRConfig()
  const { startBulkImport } = useStartBulkImport()

  const { data } = useBulkImportsQuery()
  const { data: canEditBuyerOrg } = useOrgPermission({
    resourceCode: ORGANIZATION_EDIT,
  })

  const handleUploadFinish = async (result: UploadFileData) => {
    if (result.status === 'success' && result.data?.fileData?.importId) {
      await startBulkImport({ importId: result.data.fileData.importId })
      mutate('/buyer-orgs')
    }
  }

  return (
    <>
      <PageHeaderMenuButton
        state={menuState}
        label={formatMessage(messages.new)}
        labelHidden={false}
        variant="primary"
        disabled={!canEditBuyerOrg}
      />
      <Menu state={menuState} aria-label="actions">
        <MenuItem
          label={formatMessage(messages.addSingle)}
          icon={<IconPencil />}
          onClick={() => setOpen(true)}
        />
        <ImportInBulkTooltip visible={!data}>
          <MenuItem
            label={formatMessage(messages.addBulk)}
            icon={<IconCloudArrowUp />}
            onClick={() => setUploadModalOpen(true)}
            disabled={!data}
          />
        </ImportInBulkTooltip>
      </Menu>
      <CreateOrganizationModal open={open} onOpenChange={setOpen} />
      <UploadModal
        helpContent={
          <Text variant="body">
            {t('helpLinks', {
              'template-link': (content: string) => (
                <a href={B2B_BULK_IMPORT_TEMPLATE_LINK}>{content}</a>
              ),
              'best-practices-link': (content: string) => (
                <a href={B2B_BULK_IMPORT_BEST_PRACTICES_LINK}>{content}</a>
              ),
            })}
          </Text>
        }
        open={uploadModalOpen}
        onOpenChange={setUploadModalOpen}
        uploadFile={uploadBulkImportFile}
        onUploadFinish={handleUploadFinish}
        uploadingScreen={props => <UploadingScreen {...props} />}
        errorScreen={props => (
          <ReportErrorScreen {...(props.data as BulkImportUploadError)} />
        )}
        reportScreen={props => (
          <ReportScreen {...(props.data as FieldValidationError)} />
        )}
        successScreen={props => (
          <ReportSuccessScreen {...(props.data as UploadFileResult)} />
        )}
        reportFooterActionButton={props => (
          <ReportDownloadLink
            downloadLink={
              (props.data as FieldValidationError)?.errorDownloadLink
            }
          />
        )}
      />
    </>
  )
}

export default CreateOrganizationButton

```


[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 b2b-organizations/react/components/UserWidget/UserWidgetTable.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, useEffect, useState } from 'react'
import { useCssHandles } from 'vtex.css-handles'
import { ButtonWithIcon, IconCaretDown } from 'vtex.styleguide'

import { useScroll } from '../../hooks/useScroll'

type UserWidgetTableProps = Readonly<{
  list?: Array<{
    orgId: string
    costId: string
    organizationName: string
    costCenterName: string
  }>
  radioValue: string
  setRadioValue: React.Dispatch<React.SetStateAction<string>>
}>

const CSS_HANDLES = [
  'userWidgetModalTotal',
  'userWidgetModalTableContainer',
  'userWidgetModalTable',
  'userWidgetModalTableRow',
  'userWidgetModalTableRowChecked',
  'userWidgetModalTableRadio',
  'userWidgetModalTableCell',
] as const

const DEFAULT_OFFSET = 15

export function UserWidgetTable(props: UserWidgetTableProps) {
  const handles = useCssHandles(CSS_HANDLES)
  const [offset, setOffset] = useState(DEFAULT_OFFSET)
  const { list = [], radioValue, setRadioValue } = props
  const slicedList = list.slice(0, offset)
  const currentOffset = offset < list.length ? offset : list.length
  const onScrollEnd = () => setOffset((prev: number) => prev + DEFAULT_OFFSET)
  const scrollRef = useScroll<HTMLDivElement>({ onScrollEnd })

  useEffect(() => {
    scrollRef.current?.scrollTo(0, 0)
    setOffset(DEFAULT_OFFSET)
  }, [list.length])

  return (
    <>
      <div
        ref={scrollRef}
        className={`${handles.userWidgetModalTableContainer} mb4`}
      >
        <table className={handles.userWidgetModalTable}>
          <tbody>
            {slicedList.map((organization, index) => {
              const id = [organization.orgId, organization.costId, index].join()

              return (
                <Fragment key={id}>
                  <tr
                    className={`${handles.userWidgetModalTableRow} ${
                      id === radioValue
                        ? handles.userWidgetModalTableRowChecked
                        : ''
                    }`}
                    onClick={() => setRadioValue(id)}
                  >
                    <td className={handles.userWidgetModalTableCell}>
                      <input
                        id={id}
                        value={id}
                        checked={id === radioValue}
                        onChange={(e: any) => setRadioValue(e.target.value)}
                        type="radio"
                        className={handles.userWidgetModalTableRadio}
                      />
                    </td>
                    <td className={handles.userWidgetModalTableCell}>
                      <label htmlFor={id}>
                        {organization.organizationName}
                      </label>
                    </td>
                    <td className={handles.userWidgetModalTableCell}>
                      <label htmlFor={id}>{organization.costCenterName}</label>
                    </td>
                  </tr>
                  {index === slicedList.length - 1 &&
                    list.length > currentOffset && (
                      <tr>
                        <td colSpan={3} align="center">
                          <ButtonWithIcon
                            onClick={onScrollEnd}
                            icon={<IconCaretDown />}
                            variation="tertiary"
                          />
                        </td>
                      </tr>
                    )}
                </Fragment>
              )
            })}
          </tbody>
        </table>
      </div>
      {list.length > DEFAULT_OFFSET && (
        <div className="flex justify-end mb4">
          {currentOffset}/{list.length}
        </div>
      )}
    </>
  )
}

```


[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 b2b-organizations/react/components/SellerWrapper/SellerWrapper.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect } from 'react'
import { useCssHandles } from 'vtex.css-handles'
import { useProduct } from 'vtex.product-context'

import { useSelectSeller } from '../../hooks/useSelectSeller'

type SellerWrapperProps = {
  children: React.ReactNode
}

const CSS_HANDLES = ['sellerWrapper', 'sellerWrapperNoSeller']

const SellerWrapper = ({ children }: SellerWrapperProps) => {
  const handles = useCssHandles(CSS_HANDLES)
  const { currentSelectedItem, selectSeller } = useSelectSeller()

  const productContext = useProduct()
  const { selectedItem } = productContext ?? {}

  useEffect(() => {
    selectSeller({ selectedItem })
  }, [selectedItem, selectSeller])

  const className = currentSelectedItem
    ? `${handles.sellerWrapper}`
    : `${handles.sellerWrapper} ${handles.sellerWrapperNoSeller}`

  return <div className={className}>{children}</div>
}

export default SellerWrapper

```


[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 b2b-organizations/react/components/UploadModal/ReportList.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { ReportListHeader, ReportListItem } from '@vtex/bulk-import-ui'

import type { ImportReportData } from '../../types/BulkImport'
import { useTranslate } from '../../hooks'

export type ReportListProps = {
  data: ImportReportData[]
}

const ReportList = ({ data }: ReportListProps) => {
  const { translate: t } = useTranslate()

  return (
    <>
      {data.map(report => {
        const totalImports = report.success.imports + report.error.imports

        return (
          <Fragment key={report.title}>
            <ReportListHeader
              label={report.title}
              percentage={report.success.percentage}
            />
            <ReportListItem
              tone="secondary"
              showBullet={false}
              label={t('reportInformationListTotal')}
              locators={[totalImports]}
            />
            <ReportListItem
              type="success"
              label={t('reportInformationImportSuccessFully')}
              locators={[
                `${report.success.percentage}%`,
                report.success.imports,
              ]}
            />
            <ReportListItem
              type="error"
              label={t('reportInformationImportFailed')}
              locators={[`${report.error.percentage}%`, report.error.imports]}
            />
          </Fragment>
        )
      })}
    </>
  )
}

export default ReportList

```


[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 b2b-organizations/react/components/UploadModal/ReportScreen.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { ReportInformation, ReportListItem } from '@vtex/bulk-import-ui'
import React from 'react'
import { csx } from '@vtex/admin-ui'

import type { FieldValidationError } from '../../types/BulkImport'
import ReportInformationDetails from './ReportInformationDetails'
import useErrorCount from '../../hooks/useErrorCount'
import { useTranslate } from '../../hooks'

const ReportScreen = (data: FieldValidationError) => {
  const getErrorCount = useErrorCount()

  const { translate: t } = useTranslate()

  const { fileName, validationResult = [], errorDownloadLink } = data

  const errorCount = getErrorCount(validationResult)

  return (
    <>
      <ReportInformation
        status="error"
        title={t('reportScreenTitle', {
          errorCount,
        })}
        description={t('reportScreenDescription', {
          fileName,
          'file-name-link': (content: string) => (
            <a href={errorDownloadLink}>{content}</a>
          ),
        })}
        className={csx({ marginBottom: '$space-4' })}
      />
      <ReportInformationDetails
        variant="Upload"
        validationReportDownloadLink={errorDownloadLink}
      />
      <ReportListItem
        tone="secondary"
        showBullet={false}
        label={t('reportScreenLabel')}
        locators={[errorCount]}
        className={csx({ marginTop: '$space-4' })}
      />
      {validationResult.map(({ name, invalidRows }) => (
        <ReportListItem
          key={name}
          type={invalidRows > 0 ? 'error' : 'success'}
          label={name}
          locators={[invalidRows]}
        />
      ))}
    </>
  )
}

export default ReportScreen

```


[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 b2b-organizations/react/components/UploadModal/ReportErrorScreen.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { ErrorScreen } from '@vtex/bulk-import-ui'

import type { BulkImportUploadError } from '../../types/BulkImport'
import useErrorCount from '../../hooks/useErrorCount'

type ReportErrorScreenProps = BulkImportUploadError | null

const ReportErrorScreen = (data: ReportErrorScreenProps) => {
  const getErrorCount = useErrorCount()

  if (data?.error === 'FieldValidationError') {
    const errorCount = Array.isArray(data.validationResult)
      ? getErrorCount(data.validationResult)
      : undefined

    return <ErrorScreen fileName={data.fileName} errorCount={errorCount} />
  }

  return <ErrorScreen fileName={data?.description} />
}

export default ReportErrorScreen

```


[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 b2b-organizations/react/components/UploadModal/ReportInformationDetails.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { Anchor, Text, csx } from '@vtex/admin-ui'
import React from 'react'

import { useTranslate } from '../../hooks'

export type ReportInformationDetailsProps = {
  variant: 'Import' | 'Upload'
  validationReportDownloadLink?: string
}

const ReportInformationDetails = ({
  variant,
  validationReportDownloadLink,
}: ReportInformationDetailsProps) => {
  const { translate: t } = useTranslate()

  return (
    <>
      <Text
        variant="body"
        className={csx({
          display: 'block',
          marginTop: '$space-3',
          marginBottom: '$space-2',
        })}
      >
        {t(`reportInformationInitial${variant}`, {
          'file-name-link': (content: string) => (
            <a href={validationReportDownloadLink}>{content}</a>
          ),
        })}
      </Text>
      <Text variant="body">
        {t('reportInformationNextSteps')}
        <ul className={csx({ marginLeft: '$space-1' })}>
          <ol>{t('reportInformationStep1')}</ol>
          <ol>{t('reportInformationStep2')}</ol>
          <ol>{t(`reportInformationStep3${variant}`)}</ol>
          <ol>
            {t('reportInformationStep4', {
              'template-link': (content: string) => (
                <Anchor href="/template-link">{content}</Anchor>
              ),
              'best-practices-link': (content: string) => (
                <Anchor href="/best-practices">{content}</Anchor>
              ),
            })}
          </ol>
        </ul>
      </Text>
    </>
  )
}

export default ReportInformationDetails

```


[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 b2b-organizations/react/components/UploadModal/ReportSuccessScreen.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { SuccessScreen } from '@vtex/bulk-import-ui'

import type { UploadFileResult } from '../../types/BulkImport'
import { useTranslate } from '../../hooks'

const ReportSuccessScreen = ({ successCount, fileData }: UploadFileResult) => {
  const { translate: t } = useTranslate()

  const successCountMessage =
    typeof successCount === 'number'
      ? t('reportScreenSuccessCount', { successCount })
      : undefined

  return (
    <SuccessScreen fileName={fileData?.fileName} extra={successCountMessage} />
  )
}

export default ReportSuccessScreen

```


[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 b2b-organizations/react/components/ReportDownloadLink/ReportDownloadLink.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { Button, IconArrowLineDown } from '@vtex/admin-ui'
import React from 'react'

import { useTranslate } from '../../hooks'

type ReportDownloadLinkProps = {
  downloadLink?: string
}

const ReportDownloadLink = ({ downloadLink }: ReportDownloadLinkProps) => {
  const { translate: t } = useTranslate()

  if (!downloadLink) return null

  return (
    <Button
      variant="tertiary"
      iconPosition="end"
      icon={<IconArrowLineDown />}
      onClick={() => window?.location.assign?.(downloadLink)}
    >
      {t('downloadReviewedLink')}
    </Button>
  )
}

export default ReportDownloadLink

```


[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 b2b-organizations/react/components/utils/bytesToSize.ts from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const bytesToSize = (bytes: number) => {
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']

  if (bytes === 0) return '0 Bytes'
  const i = Math.floor(Math.log(bytes) / Math.log(1024))

  if (i === 0) return `${bytes} ${sizes[i]}`

  return `${Math.round(bytes / 1024 ** i)}${sizes[i]}`
}

```


[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 b2b-organizations/react/components/utils/messages.ts from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { defineMessages } from 'react-intl'

const storePrefix = 'store/b2b-organizations.'

export const costCenterMessages = defineMessages({
  toastUpdateSuccess: {
    id: `${storePrefix}costCenter-details.toast.update-success`,
  },
  toastUpdateFailure: {
    id: `${storePrefix}costCenter-details.toast.update-failure`,
  },
  toastDeleteFailure: {
    id: `${storePrefix}costCenter-details.toast.delete-failure`,
  },
  addressEdit: {
    id: `${storePrefix}costCenter-details.address.edit`,
  },
  addressDelete: {
    id: `${storePrefix}costCenter-details.address.delete`,
  },
  pageTitle: {
    id: `${storePrefix}costCenter-details.title`,
  },
  back: {
    id: `${storePrefix}back`,
  },
  costCenterName: {
    id: `${storePrefix}costCenter-details.costCenter-name`,
  },
  addresses: {
    id: `${storePrefix}costCenter-details.addresses`,
  },
  paymentTerms: {
    id: `${storePrefix}costCenter-details.payment-terms`,
  },
  addressesSubtitle: {
    id: `${storePrefix}costCenter-details.addresses.helpText`,
  },
  paymentTermsSubtitle: {
    id: `${storePrefix}costCenter-details.payment-terms.helpText`,
  },
  defaultAddress: {
    id: `${storePrefix}costCenter-details.default-address`,
  },
  duplicateAddress: {
    id: `${storePrefix}costCenter-details.duplicate-address`,
  },
  phoneNumber: {
    id: `${storePrefix}costCenter-details.phoneNumber`,
  },
  phoneNumberHelp: {
    id: `${storePrefix}costCenter-details.phoneNumber.helpText`,
  },
  stateRegistration: {
    id: `${storePrefix}costCenter-details.stateRegistration`,
  },
  stateRegistrationHelp: {
    id: `${storePrefix}costCenter-details.stateRegistration.helpText`,
  },
  businessDocument: {
    id: `${storePrefix}costCenter-details.businessDocument`,
  },
  businessDocumentHelp: {
    id: `${storePrefix}costCenter-details.businessDocument.helpText`,
  },
  deleteConfirm: {
    id: `${storePrefix}costCenter-details.button.delete-confirm`,
  },
  update: {
    id: `${storePrefix}costCenter-details.button.update`,
  },
  add: {
    id: `${storePrefix}costCenter-details.button.add`,
  },
  cancel: {
    id: `${storePrefix}costCenter-details.button.cancel`,
  },
})

export const organizationMessages = defineMessages({
  editUser: {
    id: `${storePrefix}organization-details.edit-user`,
  },
  save: {
    id: `${storePrefix}organization-details.button.save`,
  },
  cancel: {
    id: `${storePrefix}organization-details.button.cancel`,
  },
  removeUser: {
    id: `${storePrefix}organization-details.button.remove-user`,
  },
  email: {
    id: `${storePrefix}user-details.email`,
  },
  costCenter: {
    id: `${storePrefix}user-details.placeholder-costCenter`,
  },
  role: {
    id: `${storePrefix}user-details.placeholder-role`,
  },
  userCostCenter: {
    id: `${storePrefix}user-details.costCenter`,
  },
  userOrganization: {
    id: `${storePrefix}user-details.organization`,
  },
  userRole: {
    id: `${storePrefix}user-details.role`,
  },
  addUser: {
    id: `${storePrefix}organization-details.add-user`,
  },
  addUserHelp: {
    id: `${storePrefix}organization-details.add-user.helpText`,
  },
  add: {
    id: `${storePrefix}organization-details.button.add`,
  },
  name: {
    id: `${storePrefix}user-details.name`,
  },
  toastAddCostCenterSuccess: {
    id: `${storePrefix}organization-details.toast.add-costCenter-success`,
  },
  toastAddCostCenterFailure: {
    id: `${storePrefix}organization-details.toast.add-costCenter-failure`,
  },
  columnName: {
    id: `${storePrefix}organization-details.table.column-name.title`,
  },
  columnAddresses: {
    id: `${storePrefix}organization-details.table.column-addresses.title`,
  },
  pageTitle: {
    id: `${storePrefix}organization-details.title`,
  },
  back: {
    id: `${storePrefix}back`,
  },
  costCenters: {
    id: `${storePrefix}organization-details.costCenters`,
  },
  users: {
    id: `${storePrefix}organization-details.users`,
  },
  showRows: {
    id: `${storePrefix}showRows`,
  },
  checkItOut: {
    id: `${storePrefix}check-it-out`,
  },
  of: {
    id: `${storePrefix}of`,
  },
  invalidSchema: {
    id: `${storePrefix}invalid-schema`,
  },
  autocompleteSearching: {
    id: `${storePrefix}autocomplete-searching`,
  },
  autocompleteSearchingCostCenter: {
    id: `${storePrefix}autocomplete-searching.cost-center`,
  },
  new: {
    id: `${storePrefix}organization-details.button.new`,
  },
  columnEmail: {
    id: `${storePrefix}organization-users.column.email`,
  },
  columnRole: {
    id: `${storePrefix}organization-users.column.role`,
  },
  columnCostCenter: {
    id: `${storePrefix}organization-users.column.costCenter`,
  },
  columnOrganizationName: {
    id: `${storePrefix}organization-users.column.organizationName`,
  },
  searchPlaceholder: {
    id: `${storePrefix}organization-users.table.search.placeholder`,
  },
  emptyState: {
    id: `${storePrefix}organization-users.emptyState`,
  },
  toastAddUserSuccess: {
    id: `${storePrefix}organization-users.toast.add-success`,
  },
  toastUserDuplicated: {
    id: `${storePrefix}organization-users.toast.duplicated`,
  },
  toastUserDuplicatedOrganization: {
    id: `${storePrefix}organization-users.toast.duplicated-organization`,
  },
  toastAddUserFailure: {
    id: `${storePrefix}organization-users.toast.add-failure`,
  },
  toastUpdateUserSuccess: {
    id: `${storePrefix}organization-users.toast.update-success`,
  },
  toastUpdateUserFailure: {
    id: `${storePrefix}organization-users.toast.update-failure`,
  },
  toastRemoveUserSuccess: {
    id: `${storePrefix}organization-users.toast.remove-success`,
  },
  toastRemoveUserFailure: {
    id: `${storePrefix}organization-users.toast.remove-failure`,
  },
  toastImpersonateStarting: {
    id: `${storePrefix}organization-users.toast.impersonate-starting`,
  },
  toastImpersonateSuccess: {
    id: `${storePrefix}organization-users.toast.impersonate-success`,
  },
  toastImpersonateFailure: {
    id: `${storePrefix}organization-users.toast.impersonate-failure`,
  },
  toastImpersonateForbidden: {
    id: `${storePrefix}organization-users.toast.impersonate-forbidden`,
  },
  toastImpersonateIdMissing: {
    id: `${storePrefix}organization-users.toast.impersonate-id-missing`,
  },
  impersonate: {
    id: `${storePrefix}organization-users.impersonate`,
  },
  removeUserConfirm: {
    id: `${storePrefix}organization-details.button.remove-user-confirm`,
  },
  removeUserHelp: {
    id: `${storePrefix}organization-details.remove-user.helpText`,
  },
  salesAdminTitle: {
    id: `${storePrefix}organization-details.sales-admin-title`,
  },
  organizationsWithoutSalesManager: {
    id: `${storePrefix}organization-details.organizations-without-sales-manager-title`,
  },
  organizationsWithoutSalesManagerOK: {
    id: `${storePrefix}organization-details.organizations-without-sales-manager-ok`,
  },
  organizationsWithoutSalesManagerWarning: {
    id: `${storePrefix}organization-details.organizations-without-sales-manager-warning`,
  },
  tradeName: {
    id: `${storePrefix}organizations-details.tradeName`,
  },
  tradeNameHelp: {
    id: `${storePrefix}organizations-details.tradeName.helpText`,
  },
})

export const organizationRequestMessages = defineMessages({
  toastSuccess: {
    id: `${storePrefix}request-new-organization.submit.toast-success`,
  },
  toastFailure: {
    id: `${storePrefix}request-new-organization.submit.toast-failure`,
  },
  toastPending: {
    id: `${storePrefix}request-new-organization.submit.toast-duplicate-pending`,
  },
  toastApproved: {
    id: `${storePrefix}request-new-organization.submit.toast-duplicate-approved`,
  },
  pageTitle: {
    id: `${storePrefix}request-new-organization.title`,
  },
  helpText: {
    id: `${storePrefix}request-new-organization.helpText`,
  },
  organizationName: {
    id: `${storePrefix}request-new-organization.organization-name.label`,
  },
  tradeName: {
    id: `${storePrefix}request-new-organization.tradeName`,
  },
  tradeNameHelp: {
    id: `${storePrefix}request-new-organization.tradeName.helpText`,
  },
  b2bCustomerAdmin: {
    id: `${storePrefix}request-new-organization.b2b-customer-admin.title`,
  },
  b2bCustomerAdminHelpText: {
    id: `${storePrefix}request-new-organization.b2b-customer-admin.helpText`,
  },
  firstName: {
    id: `${storePrefix}request-new-organization.first-name.label`,
  },
  lastName: {
    id: `${storePrefix}request-new-organization.last-name.label`,
  },
  email: {
    id: `${storePrefix}request-new-organization.email.label`,
  },
  defaultCostCenter: {
    id: `${storePrefix}request-new-organization.default-cost-center.title`,
  },
  defaultCostCenterHelpText: {
    id: `${storePrefix}request-new-organization.default-cost-center.helpText`,
  },
  defaultCostCenterName: {
    id: `${storePrefix}request-new-organization.default-cost-center-name.label`,
  },
  phoneNumber: {
    id: `${storePrefix}request-new-organization.phoneNumber`,
  },
  phoneNumberHelp: {
    id: `${storePrefix}request-new-organization.phoneNumber.helpText`,
  },
  businessDocument: {
    id: `${storePrefix}request-new-organization.businessDocument`,
  },
  businessDocumentHelp: {
    id: `${storePrefix}request-new-organization.businessDocument.helpText`,
  },
  stateRegistration: {
    id: `${storePrefix}request-new-organization.stateRegistration`,
  },
  stateRegistrationHelp: {
    id: `${storePrefix}request-new-organization.stateRegistration.helpText`,
  },
})

export const userWidgetMessages = defineMessages({
  role: {
    id: `${storePrefix}user-widget.role`,
  },
  organization: {
    id: `${storePrefix}user-widget.organization`,
  },
  costCenter: {
    id: `${storePrefix}user-widget.costCenter`,
  },
  status: {
    id: `${storePrefix}user-widget.status`,
  },
  active: {
    id: `${storePrefix}user-widget.status.active`,
  },
  onHold: {
    id: `${storePrefix}user-widget.status.on-hold`,
  },
  inactive: {
    id: `${storePrefix}user-widget.status.inactive`,
  },
  manageOrganization: {
    id: `${storePrefix}user-widget.manage-organization`,
  },
  impersonating: {
    id: `${storePrefix}user-widget.impersonating`,
  },
  stopImpersonation: {
    id: `${storePrefix}stop-impersonation`,
  },
  setCurrentOrganization: {
    id: `${storePrefix}set-current-organization`,
  },
  selectCompany: {
    id: `${storePrefix}modal.select-company`,
  },
  search: {
    id: `${storePrefix}modal.search`,
  },
  join: {
    id: `${storePrefix}modal.join`,
  },
  changeOrganization: {
    id: `${storePrefix}change-organization`,
  },
  currentOrganization: {
    id: `${storePrefix}current-organization`,
  },
  organizationsFound: {
    id: `${storePrefix}organizations-found`,
  },
})

```


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

[User] Show me the implementation of b2b-organizations/react/components/ImportInBulkTooltip/ImportInBulkTooltip.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Tooltip } from '@vtex/admin-ui'
import type { ReactNode } from 'react'

import { useTranslate } from '../../hooks'

export type ImportInBulkTooltipProps = {
  visible?: boolean
  children: ReactNode
}

const ImportInBulkTooltip = ({
  visible,
  children,
}: ImportInBulkTooltipProps) => {
  const { translate: t } = useTranslate()

  return visible ? (
    <Tooltip text={t('permissionAlertTooltip') as string} placement="left">
      <div>{children}</div>
    </Tooltip>
  ) : (
    <>{children}</>
  )
}

export default ImportInBulkTooltip

```


[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 b2b-organizations/react/components/ImportInBulkTooltip/index.ts from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default as ImportInBulkTooltip } from './ImportInBulkTooltip'
export type { ImportInBulkTooltipProps } from './ImportInBulkTooltip'

```


[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 b2b-organizations/react/components/ImportAlertList/ImportAlertList.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Stack } from '@vtex/admin-ui'
import type { ImportStatus } from '@vtex/bulk-import-ui'
import { ImportAlert } from '@vtex/bulk-import-ui'

import ImportReportModal from '../ImportReportModal/ImportReportModal'
import useClosedAlerts from '../../hooks/useClosedAlerts'

type ImportAlertData = ImportStatus & {
  importId: string
}

interface ImportAlertListProps {
  /** A list of object with data about the status of this import. */
  data: ImportAlertData[]
}

const ImportAlertList = ({ data }: ImportAlertListProps) => {
  const { closedAlerts, addClosedAlert } = useClosedAlerts()

  const filteredAlert = data.filter(
    itemData => !closedAlerts.find(alertId => alertId === itemData.importId)
  )

  return (
    <Stack>
      {filteredAlert.map(itemData => (
        <ImportAlert
          key={itemData.importId}
          data={itemData}
          onDismiss={() => addClosedAlert(itemData.importId)}
          detailsModal={(open, setOpen) => (
            <ImportReportModal
              onOpenChange={setOpen}
              open={open}
              importId={itemData.importId}
            />
          )}
        />
      ))}
    </Stack>
  )
}

export default ImportAlertList

```


[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 b2b-organizations/react/components/BulkImportList/BulkImportList.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { useBulkImportsQuery } from '../../hooks'
import ImportAlertList from '../ImportAlertList/ImportAlertList'

const BulkImportList = () => {
  const { data, error } = useBulkImportsQuery({
    shouldPoll: true,
  })

  if (error?.message) {
    console.error(error)
  }

  if (data) return <ImportAlertList data={data} />

  return null
}

export default BulkImportList

```


[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 b2b-organizations/react/components/UploadingScreen/index.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
export { default as UploadingScreen } from './UploadingScreen'
export type { UploadingScreenProps } from './UploadingScreen'

```


[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 b2b-organizations/react/components/UploadingScreen/ValidatingScreen.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Flex, Spinner, Text, csx } from '@vtex/admin-ui'

import { useTranslate } from '../../hooks'
import { bytesToSize } from '../utils/bytesToSize'
import type { UploadFileData } from '../../types/BulkImport'
import useBulkImportDetailsQuery from '../../hooks/useBulkImportDetailsQuery'

export type ValidatingScreenProps = {
  importId?: string
  name: string
  size: number
  onUploadFinished: (data: UploadFileData) => void
}

const ValidatingScreen = ({
  name,
  size,
  importId,
  onUploadFinished,
}: ValidatingScreenProps) => {
  const { translate: t } = useTranslate()

  useBulkImportDetailsQuery({
    importId,
    refreshInterval: 5 * 1000,
    onSuccess: data => {
      if (['InValidation', 'InProgress'].includes(data.importState)) return

      if (['ReadyToImport', 'Completed'].includes(data.importState)) {
        onUploadFinished({
          status: 'success',
          data: {
            fileData: {
              ...data,
              percentage: data.percentage.toString(),
            },
          },
        })

        return
      }

      if (
        ['ValidationFailed', 'CompletedWithError', 'Failed'].includes(
          data.importState
        )
      ) {
        onUploadFinished({
          status: 'error',
          showReport: data?.importState === 'ValidationFailed',
          data: {
            error: 'FieldValidationError',
            errorDownloadLink: data?.validationResult?.reportDownloadLink ?? '',
            validationResult: data?.validationResult?.validationResult ?? [],
            fileName: data.fileName,
          },
        })
      }
    },
  })

  return (
    <Flex
      className={csx({ backgroundColor: '$gray05', height: '100%' })}
      align="center"
      direction="column"
      justify="center"
    >
      <Spinner className={csx({ color: '$blue40' })} size={120} />
      <Text
        className={csx({ marginBottom: '$space-3', marginTop: '$space-10' })}
        variant="pageTitle"
      >
        {t('uploading')}
      </Text>
      <div>
        <Text>{name}</Text>
        <Text tone="secondary">
          {' · '}
          {bytesToSize(size)}
        </Text>
      </div>
    </Flex>
  )
}

export default ValidatingScreen

```


[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 b2b-organizations/react/components/UploadingScreen/UploadingScreen.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState } from 'react'
import { UploadingScreen as BulkImportUploadingScreen } from '@vtex/bulk-import-ui'

import type { UploadFileData } from '../../types/BulkImport'
import ValidatingScreen from './ValidatingScreen'
import useValidateBulkImport from '../../hooks/useValidateBulkImport'

export type UploadingScreenProps = {
  name: string
  size: number
  uploadFile: () => Promise<UploadFileData>
  onUploadFinished: (data: UploadFileData) => void
}

export type UploadingStep = 'UPLOADING' | 'VALIDATING'

const UploadingScreen = ({
  uploadFile,
  onUploadFinished: onUploadFinishedProp,
  ...otherProps
}: UploadingScreenProps) => {
  const [step, setStep] = useState<UploadingStep>('UPLOADING')

  const [importId, setImportId] = useState<string | undefined>(undefined)

  const { startBulkImportValidation } = useValidateBulkImport({
    onSuccess: () => {
      setStep('VALIDATING')
    },
  })

  const onUploadFinished = (data: UploadFileData) => {
    if (data.status === 'error') {
      onUploadFinishedProp(data)

      return
    }

    startBulkImportValidation({ importId: data?.data?.fileData?.importId })
    setImportId(data?.data?.fileData?.importId)
  }

  return step === 'UPLOADING' ? (
    <BulkImportUploadingScreen
      {...otherProps}
      uploadFile={uploadFile}
      onUploadFinished={onUploadFinished}
    />
  ) : (
    <ValidatingScreen
      {...otherProps}
      importId={importId}
      onUploadFinished={onUploadFinishedProp}
    />
  )
}

export default UploadingScreen

```


[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 b2b-organizations/react/components/CreateOrganizationModal/index.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
export { default } from './CreateOrganizationModal'

```


[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 b2b-organizations/react/components/CreateOrganizationModal/CreateOrganizationModal.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useState } from 'react'
import { useMutation, useQuery } from 'react-apollo'
import { FormattedMessage, useIntl } from 'react-intl'
import { useToast } from '@vtex/admin-ui'
import { Button, Input, Modal } from 'vtex.styleguide'
import {
  AddressContainer,
  AddressForm,
  AddressRules,
  CountrySelector,
  PostalCodeGetter,
} from 'vtex.address-form'
import { StyleguideInput } from 'vtex.address-form/inputs'
import { addValidation } from 'vtex.address-form/helpers'
import { useRuntime } from 'vtex.render-runtime'

import { getEmptyAddress, isValidAddress } from '../../utils/addresses'
import { validatePhoneNumber } from '../../modules/formValidators'
import { organizationMessages as messages } from '../../admin/utils/messages'
import GET_LOGISTICS from '../../graphql/getLogistics.graphql'
import CREATE_ORGANIZATION from '../../graphql/createOrganization.graphql'
import GET_B2B_CUSTOM_FIELDS from '../../graphql/getB2BCustomFields.graphql'
import {
  INITIAL_FETCH_LIST_OPTIONS,
  useOrganizationsList,
} from '../../organizations/hooks'
import CustomFieldInputList from '../CustomFieldInputList/CustomFieldInputList'

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

const CreateOrganizationModal: React.FC<Props> = ({ open, onOpenChange }) => {
  const { formatMessage } = useIntl()
  const {
    culture: { country },
  } = useRuntime()

  const showToast = useToast()

  const [loadingState, setLoadingState] = useState(false)

  const [newOrganizationName, setNewOrganizationName] = useState('')
  const [newCostCenterName, setNewCostCenterName] = useState('')
  const [newCostCenterPhoneNumber, setNewCostCenterPhoneNumber] = useState('')
  const [
    newCostCenterBusinessDocument,
    setNewCostCenterBusinessDocument,
  ] = useState('')

  const [
    newCostCenterStateRegistration,
    setNewCostCenterStateRegistration,
  ] = useState('')

  const [newCostCenterAddressState, setNewCostCenterAddressState] = useState(
    addValidation(getEmptyAddress(country))
  )

  const { data: logisticsData } = useQuery(GET_LOGISTICS, { ssr: false })
  const [createOrganization] = useMutation(CREATE_ORGANIZATION)
  const { refetch } = useOrganizationsList()

  const translateCountries = () => {
    const { shipsTo = [] } = logisticsData?.logistics ?? {}

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

  //! CUSTOM FIELDS
  const {
    data: defaultCustomFieldsData,
    loading: defaultCustomFieldsDataLoading,
  } = useQuery(GET_B2B_CUSTOM_FIELDS, {
    ssr: false,
  })

  const [orgCustomFieldsState, setOrgCustomFieldsState] = useState<
    CustomField[]
  >([])

  const [
    costCenterCustomFieldsState,
    setCostCenterCustomFieldsState,
  ] = useState<CustomField[]>([])

  useEffect(() => {
    if (defaultCustomFieldsDataLoading) return

    const organizationFieldsToDisplay = defaultCustomFieldsData?.getB2BSettings.organizationCustomFields.filter(
      (item: CustomField) => item.useOnRegistration
    )

    const costCenterFieldsToDisplay = defaultCustomFieldsData?.getB2BSettings.costCenterCustomFields.filter(
      (item: CustomField) => item.useOnRegistration
    )

    setOrgCustomFieldsState(organizationFieldsToDisplay)
    setCostCenterCustomFieldsState(costCenterFieldsToDisplay)
  }, [defaultCustomFieldsData])
  //! CUSTOM FIELDS

  const resetNewOrganizationForm = () => {
    setNewOrganizationName('')
    setNewCostCenterName('')
    setNewCostCenterPhoneNumber('')
    setNewCostCenterBusinessDocument('')
    setNewCostCenterAddressState(addValidation(getEmptyAddress(country)))
  }

  const handleAddNewOrganization = () => {
    setLoadingState(true)
    const newAddress = {
      addressId: newCostCenterAddressState.addressId.value,
      addressType: newCostCenterAddressState.addressType.value,
      city: newCostCenterAddressState.city.value,
      complement: newCostCenterAddressState.complement.value,
      country: newCostCenterAddressState.country.value,
      receiverName: newCostCenterAddressState.receiverName.value,
      geoCoordinates: newCostCenterAddressState.geoCoordinates.value,
      neighborhood: newCostCenterAddressState.neighborhood.value,
      number: newCostCenterAddressState.number.value,
      postalCode: newCostCenterAddressState.postalCode.value,
      reference: newCostCenterAddressState.reference.value,
      state: newCostCenterAddressState.state.value,
      street: newCostCenterAddressState.street.value,
      addressQuery: newCostCenterAddressState.addressQuery.value,
    }

    const variables = {
      input: {
        name: newOrganizationName,
        customFields: orgCustomFieldsState,
        defaultCostCenter: {
          name: newCostCenterName,
          address: newAddress,
          phoneNumber: newCostCenterPhoneNumber,
          businessDocument: newCostCenterBusinessDocument,
          customFields: costCenterCustomFieldsState,
          stateRegistration: newCostCenterStateRegistration,
        },
      },
    }

    createOrganization({ variables })
      .then(() => {
        onOpenChange(false)
        setLoadingState(false)
        resetNewOrganizationForm()
        showToast({
          variant: 'positive',
          message: formatMessage(messages.toastAddOrgSuccess),
        })
        refetch(INITIAL_FETCH_LIST_OPTIONS)
      })
      .catch(error => {
        onOpenChange(false)
        setLoadingState(false)
        console.error(error)
        showToast({
          variant: 'critical',
          message: formatMessage(messages.toastAddOrgFailure),
        })
      })
  }

  const handleNewCostCenterAddressChange = (
    changedAddress: AddressFormFields
  ) => {
    const curAddress = newCostCenterAddressState

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

    setNewCostCenterAddressState(newAddress)
  }

  const handleCloseModal = () => {
    onOpenChange(false)
    resetNewOrganizationForm()
  }

  return (
    <>
      <Modal
        centered
        bottomBar={
          <div className="nowrap">
            <span className="mr4">
              <Button
                variation="tertiary"
                onClick={() => handleCloseModal()}
                disabled={loadingState}
              >
                {formatMessage(messages.cancel)}
              </Button>
            </span>
            <span>
              <Button
                variation="primary"
                onClick={() => handleAddNewOrganization()}
                isLoading={loadingState}
                disabled={
                  !newOrganizationName ||
                  !newCostCenterName ||
                  !isValidAddress(newCostCenterAddressState) ||
                  (newCostCenterPhoneNumber &&
                    !validatePhoneNumber(newCostCenterPhoneNumber))
                }
              >
                {formatMessage(messages.add)}
              </Button>
            </span>
          </div>
        }
        isOpen={open}
        onClose={() => handleCloseModal()}
        closeOnOverlayClick={false}
      >
        <p className="f3 f1-ns fw3 gray">
          <FormattedMessage id="admin/b2b-organizations.organizations-admin.add-organization" />
        </p>
        <div className="w-100 mv6">
          <Input
            size="large"
            label={formatMessage(messages.organizationName)}
            value={newOrganizationName}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              setNewOrganizationName(e.target.value)
            }}
            required
          />
        </div>
        <CustomFieldInputList
          customFields={
            defaultCustomFieldsDataLoading ? null : orgCustomFieldsState
          }
          onChange={setOrgCustomFieldsState}
        />
        <div className="w-100 mv6">
          <FormattedMessage id="admin/b2b-organizations.organizations-admin.add-organization.default-costCenter.helpText" />
        </div>
        <div className="w-100 mv6">
          <Input
            size="large"
            label={formatMessage(messages.defaultCostCenterName)}
            value={newCostCenterName}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              setNewCostCenterName(e.target.value)
            }}
            required
          />
        </div>
        <div className="w-100 mv6">
          <Input
            size="large"
            label={formatMessage(messages.phoneNumber)}
            value={newCostCenterPhoneNumber}
            error={
              newCostCenterPhoneNumber &&
              !validatePhoneNumber(newCostCenterPhoneNumber)
            }
            helpText={formatMessage(messages.phoneNumberHelp)}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              setNewCostCenterPhoneNumber(e.target.value)
            }}
          />
        </div>
        <div className="w-100 mv6">
          <Input
            size="large"
            label={formatMessage(messages.businessDocument)}
            value={newCostCenterBusinessDocument}
            helpText={formatMessage(messages.businessDocumentHelp)}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              setNewCostCenterBusinessDocument(e.target.value)
            }}
          />
        </div>
        <CustomFieldInputList
          customFields={
            defaultCustomFieldsDataLoading ? null : costCenterCustomFieldsState
          }
          onChange={setCostCenterCustomFieldsState}
        />
        <div className="w-100 mv6">
          <Input
            size="large"
            label={formatMessage(messages.stateRegistration)}
            value={newCostCenterStateRegistration}
            helpText={formatMessage(messages.stateRegistrationHelp)}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              setNewCostCenterStateRegistration(e.target.value)
            }}
          />
        </div>
        <AddressRules
          country={newCostCenterAddressState?.country?.value}
          shouldUseIOFetching
          useGeolocation={false}
        >
          <AddressContainer
            address={newCostCenterAddressState}
            Input={StyleguideInput}
            onChangeAddress={handleNewCostCenterAddressChange}
            autoCompletePostalCode
          >
            <CountrySelector shipsTo={translateCountries()} />

            <PostalCodeGetter />

            <AddressForm
              Input={StyleguideInput}
              omitAutoCompletedFields={false}
              omitPostalCodeFields
            />
          </AddressContainer>
        </AddressRules>
      </Modal>
    </>
  )
}

export default CreateOrganizationModal

```


[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 b2b-organizations/react/components/ImportReportModal/ImportReportModal.tsx from the b2b-organizations VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Divider, csx } from '@vtex/admin-ui'
import {
  ErrorScreen,
  ReportInformation,
  ReportModal,
} from '@vtex/bulk-import-ui'

import ReportList from '../UploadModal/ReportList'
import ReportInformationDetails from '../UploadModal/ReportInformationDetails'
import { useTranslate } from '../../hooks'
import useBulkImportDetailsQuery from '../../hooks/useBulkImportDetailsQuery'
import ReportDownloadLink from '../ReportDownloadLink/ReportDownloadLink'

export type ImportReportModalProps = {
  /** The report data id */
  importId: string
  /** Flag indicating if the modal is open or not. * */
  open?: boolean
  /** Function called when the modal's open state changes. * */
  onOpenChange?: (open: boolean) => void
}

const ImportReportModal = ({
  importId,
  open,
  ...otherProps
}: ImportReportModalProps) => {
  const { translate: t, formatDate } = useTranslate()

  const { data, error } = useBulkImportDetailsQuery({ importId })

  const reportDownloadLink = data?.importResult?.reportDownloadLink

  return (
    <ReportModal showTabs={false} open={open} {...otherProps}>
      <ReportModal.Header showDismiss>
        {t('importReportTitle')}
      </ReportModal.Header>
      <ReportModal.Content>
        <ReportModal.TabPanel
          title={t('importReportTabTitle')}
          id="success"
          className={csx({ height: '100%' })}
        >
          {error && <ErrorScreen />}
          {!error && data && (
            <>
              <ReportInformation
                title={t('reportInformationTitle', {
                  fullPercentage: data?.percentage,
                })}
                description={t('reportInformationDescription', {
                  fileName: data?.fileName,
                  userName: data?.importedUserName,
                  uploadDate: formatDate(data?.importedAt),
                })}
                status={data?.percentage >= 100 ? 'success' : 'warning'}
                className={csx({ marginY: '$space-4' })}
              />
              {data?.percentage < 100 && (
                <ReportInformationDetails
                  variant="Import"
                  validationReportDownloadLink={
                    data?.importResult?.reportDownloadLink
                  }
                />
              )}
              <Divider className={csx({ marginY: '$space-4' })} />
              <ReportList data={data.importReportList} />
            </>
          )}
        </ReportModal.TabPanel>
      </ReportModal.Content>
      <ReportModal.Footer
        closeLabel={t('done')}
        actionButton={<ReportDownloadLink downloadLink={reportDownloadLink} />}
      />
    </ReportModal>
  )
}

export default ImportReportModal

```


[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 store-block-course/course/config.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "title": "VTEX Store Block course",
  "tagline": "Learn how to create custom blocks on VTEX Store Framework",
  "description": "Using React and Graphql, you can export your components as VTEX blocks",
  "languages": [
    "en",
    "pt"
  ],
  "steps": [
    {
      "folder": "01_manifest",
      "title": {
        "pt": "Curso de blocos customizados",
        "en": "Custom blocks course"
      },
      "description": {
        "pt": "Neste passo, você irá aprender como se organizam os arquivos em uma app VTEX IO e o que cada campo no manifest.json significa",
        "en": "In this step, you'll learn how an app's files are organized in VTEX IO and what each field of the manifest.json means"
      },
      "challenge": "none"
    }
  ]
}

```


[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 store-block-course/course/README.md from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store Block course

> **This content was moved to another place. We no longer support these courses and learning portal**

To check out this course in our new platform, you can click [here](https://developers.vtex.com/learning/docs/course-store-block-lang-en). You can also have a look at [our new landing page](https://developers.vtex.com/learning), where you can find interesing content for you!

```


[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 store-block-course/course/index.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients, Service, ServiceContext } from "@vtex/api";
import { join } from 'path'

declare global {
  type Context = ServiceContext<IOClients, {}>;
}

const correctionHandler = async (ctx: Context) => {
  const step = ctx.query.step;

  const stepModule = await import(join(__dirname, `./${step}.js`));
  const suite = stepModule.default;

  const results = await Promise.all(
    suite.tests.map(async ({ test, description, failMsg }: any) => {
      try {
        const pass = await test({
          files: [],
          getFile: (name: string) => new Promise(resolve => resolve(name)),
          lib: { }
        });
        return {
          pass,
          ...{
            failMsg: pass ? undefined : failMsg,
            successMsg: description
          }
        };
      } catch (e) {
        return { pass: false, failMsg: e.message || failMsg };
      }
    })
  );

  // Add cache header here, please Mr.
  ctx.status = 200;
  ctx.body = results;
};

export default new Service<any, any>({
  routes: {
    correction: [correctionHandler]
  }
});

```


[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 store-block-course/course/template/README.md from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store Block course template

Here you'll learn how to create awesome Store Framework blocks!

```


[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 store-block-course/course/template/package.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "countdown",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,js,json}\""
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.2.1",
    "prettier": "^1.19.1",
    "typescript": "^3.7.5"
  }
}

```


[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 store-block-course/course/template/manifest.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "countdown",
  "version": "0.0.1",
  "title": "Countdown",
  "description": "Countdown component",
  "defaultLocale": "pt-BR",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.css-handles": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


[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 store-block-course/course/template/messages/pt.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.countdown.title": "Contagem regressiva",
  "editor.countdown.description": "Componente de contagem regressiva"
}

```


[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 store-block-course/course/template/messages/en.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.countdown.title": "Countdown",
  "editor.countdown.description": "Countdown component"
}
```


[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 store-block-course/course/template/messages/context.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.countdown.title": "Countdown",
  "editor.countdown.description": "Countdown component"
}
```


[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 store-block-course/course/template/messages/es.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.countdown.title": "Cuenta regresiva",
  "editor.countdown.description": "Cuenta regresiva component"
}
```


[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 store-block-course/course/template/node/package.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "@vtex/api": "^3.0.0"
  },
  "devDependencies": {
    "@types/node": "8.x",
    "@vtex/api": "^3.0.0",
    "typescript": "3.9.4"
  },
  "resolutions": {
    "**/**/minimist": "^0.2.1",
    "**/**/lodash": "^4.17.17"
  }
}

```


[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 store-block-course/course/template/node/index.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ClientsConfig, LRUCache, Service, ServiceContext } from '@vtex/api'

import { Clients } from './clients'

const TIMEOUT_MS = 5000

const memoryCache = new LRUCache<string, any>({ max: 5000 })

metrics.trackCache('status', memoryCache)

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    status: {
      memoryCache,
    },
  },
}

declare global {
  type Context = ServiceContext<Clients>
}

// Export a service that defines route handlers and client options.
export default new Service<Clients, {}>({
  clients,
  graphql: {
    resolvers: {
      Query: {},
    },
  },
})

```


[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 store-block-course/course/template/react/Countdown.tsx from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface CountdownProps {}

const Countdown: StorefrontFunctionComponent<CountdownProps> = ({}) => {
  return <div />
}

Countdown.schema = {
  title: 'editor.countdown.title',
  description: 'editor.countdown.description',
  type: 'object',
  properties: {},
}

export default Countdown

```


[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 store-block-course/course/template/react/package.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.5.1",
    "graphql": "^14.6.0",
    "typescript": "^3.9.6",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.120.0/public/@types/vtex.render-runtime",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.129.0/public/@types/vtex.styleguide"
  }
}

```


[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 store-block-course/course/template/store/interfaces.json from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "countdown": {
    "component": "Countdown"
  }
}
```


[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 store-block-course/course/template/node/clients/index.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

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

export class Clients extends IOClients {}

```


[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 store-block-course/course/template/node/typings/global.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare const metrics

type GenericObject = Record<string, any>

```


[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 store-block-course/course/template/react/typings/storefront.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = GenericObject>
    extends FunctionComponent<P> {
    getSchema?(props: P): GenericObject
    schema?: GenericObject
  }

  interface StorefrontComponent<P = GenericObject, S = GenericObject>
    extends Component<P, S> {
    getSchema?(props: P): GenericObject
    schema: GenericObject
  }
}

```


[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 store-block-course/course/template/react/typings/vtex.render-runtime.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = ({ id: string }) => GenericObject

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends GenericObject>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


[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 store-block-course/course/template/react/typings/global.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface TimeSplit {
  hours: string
  minutes: string
  seconds: string
}

type GenericObject = Record<string, any>

```


[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 store-block-course/course/template/react/typings/css.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[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 store-block-course/course/template/react/typings/graphql.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


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

[User] Show me the implementation of store-block-course/course/template/react/typings/vtex.styleguide.d.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: any
  }
}

```


[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 store-block-course/course/template/react/utils/time.ts from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { TimeSplit } from '../typings/global'

const SECONDS_IN_MINUTE = 60
const SECONDS_IN_HOUR = 60 * SECONDS_IN_MINUTE

const fillWithZero = (digits: number, number: number): string => {
  const filled = `${'0'.repeat(digits - 1)}${number}`

  return filled.slice(filled.length - digits)
}

export const parseTimeRemaining = (totalSeconds: number): TimeSplit => {
  const hours = Math.floor(totalSeconds / SECONDS_IN_HOUR)
  const minutes = Math.floor(
    (totalSeconds % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE
  )

  const seconds = Math.floor(
    (totalSeconds % SECONDS_IN_HOUR) % SECONDS_IN_MINUTE
  )

  return {
    hours: fillWithZero(2, hours),
    minutes: fillWithZero(2, minutes),
    seconds: fillWithZero(2, seconds),
  }
}

/**
 *
 * @param targetDate ISOString for the date that the countdown will expire
 * @param dispatchFn A function that updates the state of the component
 */
export const tick = (
  targetDate: string,
  dispatchFn: React.Dispatch<React.SetStateAction<TimeSplit>>
) => {
  const ONE_SECOND_IN_MILLIS = 1000
  const finalDate = new Date(targetDate)
  const now = new Date()

  const secondsLeft =
    (finalDate.getTime() - now.getTime()) / ONE_SECOND_IN_MILLIS

  setTimeout(() => {
    dispatchFn(parseTimeRemaining(secondsLeft))
  }, ONE_SECOND_IN_MILLIS)
}

export const getTwoDaysFromNow = () => {
  const today = new Date()

  today.setDate(today.getDate() + 2)

  return today.toISOString()
}

```


[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 store-block-course/course/template/react/__tests__/index.test.tsx from the store-block-course VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'

import Component from '../components/index'

describe('HelloWorld Component', () => {
  const { getByText } = render(<Component />)

  it('should render the example in TypeScript', () => {
    expect(getByText(/This is an example/)).toBeDefined()
  })
})

```


[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 storefront-permissions-ui/messages/nl.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "B2B-informatie",
  "admin/storefront-permissions.button.cancel": "Annuleren",
  "admin/storefront-permissions.button.delete": "B2B-info verwijderen",
  "admin/storefront-permissions.button.save": "Opslaan",
  "admin/storefront-permissions.description": "Rollen en gebruikersbeheer",
  "admin/storefront-permissions.navigation.keywords": "B2B, rollen, profielen",
  "admin/storefront-permissions.navigation.label": "Storefront-machtigingen",
  "admin/storefront-permissions.required": "Vereist",
  "admin/storefront-permissions.tab.new.button": "Nieuw",
  "admin/storefront-permissions.tab.roles": "Rollen",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "Kan geen apps vinden die verbonden zijn met de storefront-machtigingen",
  "admin/storefront-permissions.tab.roles.name.label": "Rol",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "Gebruikers",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "Kan imiteren",
  "admin/storefront-permissions.tab.users.email.label": "E-mailadres",
  "admin/storefront-permissions.tab.users.organization.label": "Organisatie",
  "admin/storefront-permissions.tab.users.costCenter.label": "Kostencentrum",
  "admin/storefront-permissions.tab.users.error": "Fout bij opslaan B2B-info",
  "admin/storefront-permissions.tab.users.name.label": "Naam",
  "admin/storefront-permissions.tab.users.success": "B2B-info opgeslagen",
  "admin/storefront-permissions.title": "Storefront-machtigingen",
  "admin/storefront-permissions.alert-pick": "U moet een kostencentrum kiezen voordat u wijzigingen kunt opslaan",
  "admin/storefront-permissions.searchOrganizations": "Organisaties zoeken...",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```


[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 storefront-permissions-ui/messages/ja.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "B2B 情報",
  "admin/storefront-permissions.button.cancel": "キャンセル",
  "admin/storefront-permissions.button.delete": "B2B 情報を削除する",
  "admin/storefront-permissions.button.save": "保存",
  "admin/storefront-permissions.description": "役割およびユーザー管理",
  "admin/storefront-permissions.navigation.keywords": "B2B, 役割, プロファイル",
  "admin/storefront-permissions.navigation.label": "店頭権限",
  "admin/storefront-permissions.required": "必須",
  "admin/storefront-permissions.tab.new.button": "新規",
  "admin/storefront-permissions.tab.roles": "役割",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "店頭権限に接続したアプリは見つかりませんでした",
  "admin/storefront-permissions.tab.roles.name.label": "役割",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "ユーザー",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "偽装することができます",
  "admin/storefront-permissions.tab.users.email.label": "メール",
  "admin/storefront-permissions.tab.users.organization.label": "組織",
  "admin/storefront-permissions.tab.users.costCenter.label": "コストセンター",
  "admin/storefront-permissions.tab.users.error": "B2B 情報を保存する時にエラーが発生しました",
  "admin/storefront-permissions.tab.users.name.label": "名前",
  "admin/storefront-permissions.tab.users.success": "B2B 情報を保存しました",
  "admin/storefront-permissions.title": "店頭権限",
  "admin/storefront-permissions.alert-pick": "変更を保存する前にコストセンターを選ばなければなりません",
  "admin/storefront-permissions.searchOrganizations": "組織を検索…",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```


[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 storefront-permissions-ui/messages/pt.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "Informações B2B",
  "admin/storefront-permissions.button.cancel": "Cancelar",
  "admin/storefront-permissions.button.delete": "Remover informações B2B",
  "admin/storefront-permissions.button.save": "Salvar",
  "admin/storefront-permissions.description": "Gerenciamento de perfis de acesso e usuários",
  "admin/storefront-permissions.navigation.keywords": "B2B, perfis de acesso, usuários",
  "admin/storefront-permissions.navigation.label": "Permissões da loja",
  "admin/storefront-permissions.required": "Obrigatório",
  "admin/storefront-permissions.tab.new.button": "Criar nova",
  "admin/storefront-permissions.tab.roles": "Perfis de acesso",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "Não foi possível encontrar nenhum app conectado às permissões da loja",
  "admin/storefront-permissions.tab.roles.name.label": "Perfil de acesso",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "Usuários",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "Pode personificar",
  "admin/storefront-permissions.tab.users.email.label": "Email",
  "admin/storefront-permissions.tab.users.organization.label": "Organização",
  "admin/storefront-permissions.tab.users.costCenter.label": "Centro de custo",
  "admin/storefront-permissions.tab.users.error": "Erro ao salvar informações B2B",
  "admin/storefront-permissions.tab.users.name.label": "Nome",
  "admin/storefront-permissions.tab.users.success": "Informações B2B salvas",
  "admin/storefront-permissions.title": "Permissões da loja",
  "admin/storefront-permissions.alert-pick": "Você precisa selecionar um centro de custo antes de salvar as alterações",
  "admin/storefront-permissions.searchOrganizations": "Buscar organizações...",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```


[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 storefront-permissions-ui/messages/en.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "B2B Information",
  "admin/storefront-permissions.button.cancel": "Cancel",
  "admin/storefront-permissions.button.delete": "Remove B2B Info",
  "admin/storefront-permissions.button.save": "Save",
  "admin/storefront-permissions.description": "Roles Management",
  "admin/storefront-permissions.navigation.keywords": "B2B, Roles, Profiles",
  "admin/storefront-permissions.navigation.label": "Storefront Permissions",
  "admin/storefront-permissions.required": "Required",
  "admin/storefront-permissions.tab.new.button": "New",
  "admin/storefront-permissions.tab.roles": "Roles",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "Couldn't find any apps connected to the storefront permissions",
  "admin/storefront-permissions.tab.roles.name.label": "Role Name",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "Users",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "Can impersonate",
  "admin/storefront-permissions.tab.users.email.label": "Email",
  "admin/storefront-permissions.tab.users.organization.label": "Organization",
  "admin/storefront-permissions.tab.users.costCenter.label": "Cost Center",
  "admin/storefront-permissions.tab.users.error": "Error saving B2B info",
  "admin/storefront-permissions.tab.users.name.label": "Name",
  "admin/storefront-permissions.tab.users.success": "B2B info saved",
  "admin/storefront-permissions.title": "Storefront Permissions",
  "admin/storefront-permissions.alert-pick": "You need to choose a cost center before saving changes",
  "admin/storefront-permissions.searchOrganizations": "Search organizations...",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```


[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 storefront-permissions-ui/messages/it.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "Informazioni B2B",
  "admin/storefront-permissions.button.cancel": "Annulla",
  "admin/storefront-permissions.button.delete": "Rimuovi informazioni B2B",
  "admin/storefront-permissions.button.save": "Salva",
  "admin/storefront-permissions.description": "Ruoli e gestione utenti",
  "admin/storefront-permissions.navigation.keywords": "B2B, ruoli, profili",
  "admin/storefront-permissions.navigation.label": "Permessi del negozio",
  "admin/storefront-permissions.required": "Obbligatorio",
  "admin/storefront-permissions.tab.new.button": "Nuovo",
  "admin/storefront-permissions.tab.roles": "Ruoli",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "Non è stato possibile trovare nessuna app associata ai permessi del negozio",
  "admin/storefront-permissions.tab.roles.name.label": "Ruolo",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "Utenti",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "Può impersonare",
  "admin/storefront-permissions.tab.users.email.label": "Email",
  "admin/storefront-permissions.tab.users.organization.label": "Organizzazione",
  "admin/storefront-permissions.tab.users.costCenter.label": "Centro di costo",
  "admin/storefront-permissions.tab.users.error": "Errore durante il salvataggio delle informazioni B2B",
  "admin/storefront-permissions.tab.users.name.label": "Nome",
  "admin/storefront-permissions.tab.users.success": "Informazioni B2B salvate",
  "admin/storefront-permissions.title": "Permessi del negozio",
  "admin/storefront-permissions.alert-pick": "È necessario scegliere un centro di costo prima di salvare le modifiche",
  "admin/storefront-permissions.searchOrganizations": "Cerca organizzazioni...",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```


[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 storefront-permissions-ui/messages/fr.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "Information B2B",
  "admin/storefront-permissions.button.cancel": "Annuler",
  "admin/storefront-permissions.button.delete": "Supprimer les infos B2B",
  "admin/storefront-permissions.button.save": "Sauvegarder",
  "admin/storefront-permissions.description": "Rôles et gestion des utilisateurs",
  "admin/storefront-permissions.navigation.keywords": "B2B, rôles, profiles",
  "admin/storefront-permissions.navigation.label": "Autorisations de la vitrine",
  "admin/storefront-permissions.required": "Requis",
  "admin/storefront-permissions.tab.new.button": "Nouveau",
  "admin/storefront-permissions.tab.roles": "Rôles",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "Impossible de trouver les applications connectées aux autorisations de la vitrine",
  "admin/storefront-permissions.tab.roles.name.label": "Rôle",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "Utilisateurs",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "Peut se faire passer pour",
  "admin/storefront-permissions.tab.users.email.label": "Email",
  "admin/storefront-permissions.tab.users.organization.label": "Organisation",
  "admin/storefront-permissions.tab.users.costCenter.label": "Centre de coûts",
  "admin/storefront-permissions.tab.users.error": "Erreur lors de l’enregistrement des infos B2B",
  "admin/storefront-permissions.tab.users.name.label": "Nom",
  "admin/storefront-permissions.tab.users.success": "Infos B2B enregistrées",
  "admin/storefront-permissions.title": "Autorisations de la vitrine",
  "admin/storefront-permissions.alert-pick": "Vous devez choisir un centre de coûts avant d’enregistrer les modifications",
  "admin/storefront-permissions.searchOrganizations": "Rechercher des organisations...",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```


[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 storefront-permissions-ui/messages/bg.json from the storefront-permissions-ui VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/storefront-permissions.b2bInfo.title": "Информация за B2B",
  "admin/storefront-permissions.button.cancel": "Отказ",
  "admin/storefront-permissions.button.delete": "Премахване на информация за B2B",
  "admin/storefront-permissions.button.save": "Запазване",
  "admin/storefront-permissions.description": "Управление на роли и потребители",
  "admin/storefront-permissions.navigation.keywords": "B2B, роли, профили",
  "admin/storefront-permissions.navigation.label": "Разрешения на витрината",
  "admin/storefront-permissions.required": "Задължително",
  "admin/storefront-permissions.tab.new.button": "Ново",
  "admin/storefront-permissions.tab.roles": "Роли",
  "admin/storefront-permissions.tab.roles.featuresNotFound": "Не са открити приложения, свързани с разрешенията за витрината",
  "admin/storefront-permissions.tab.roles.name.label": "Роля",
  "admin/storefront-permissions.tab.roles.category.label": "Category",
  "admin/storefront-permissions.tab.users": "Потребители",
  "admin/storefront-permissions.tab.users.canImpersonate.label": "Може да въплъщава",
  "admin/storefront-permissions.tab.users.email.label": "Имейл адрес",
  "admin/storefront-permissions.tab.users.organization.label": "Организация",
  "admin/storefront-permissions.tab.users.costCenter.label": "Разходен център",
  "admin/storefront-permissions.tab.users.error": "Грешка при запазването на информацията за B2B",
  "admin/storefront-permissions.tab.users.name.label": "Име",
  "admin/storefront-permissions.tab.users.success": "Информацията за B2B е запазена",
  "admin/storefront-permissions.title": "Разрешения на витрината",
  "admin/storefront-permissions.alert-pick": "Трябва да изберете разходен център, преди да запазите промените",
  "admin/storefront-permissions.searchOrganizations": "Търсене на организации...",
  "admin/storefront-permissions.help.title": "How it works",
  "admin/storefront-permissions.help.text1": "Role Names can be renamed, but categories are fixed.",
  "admin/storefront-permissions.help.text2": "There are three categories available:",
  "admin/storefront-permissions.help.category1": "Store Admin",
  "admin/storefront-permissions.help.category1.text1": "Full access",
  "admin/storefront-permissions.help.category2": "Sales",
  "admin/storefront-permissions.help.category2.text1": "Can manage quotations, sales, and users from the its Organization.",
  "admin/storefront-permissions.help.category2.text2": "It can have different access levels.",
  "admin/storefront-permissions.help.category2.text3": "Can belong to one or many organizations.",
  "admin/storefront-permissions.help.category2.text4": "Sales users can only manage Sales roles.",
  "admin/storefront-permissions.help.category2.text5": "Sales user hierarchy: sales-admin > sales-manager > sales-representative",
  "admin/storefront-permissions.help.category3": "Customers",
  "admin/storefront-permissions.help.category3.text1": "Have access and can manage its own organization.",
  "admin/storefront-permissions.help.category3.text2": "Customers users can only manage users under the Customers roles.",
  "admin/storefront-permissions.help.category3.text3": "Customers users hierarchy: customer-amin > customer-approver > customer-buyer"
}

```