Add intl message

vtex-apps · May 27, 2022 · b77cf5a · b77cf5a
1 parent 062e074
commit b77cf5a
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/messages/context.json b/messages/context.json
@@ -20,5 +20,6 @@
   "admin/storefront-permissions.tab.users.name.label": "admin/storefront-permissions.tab.users.name.label",
   "admin/storefront-permissions.tab.users.success": "admin/storefront-permissions.tab.users.success",
   "admin/storefront-permissions.title": "admin/storefront-permissions.title",
-  "admin/storefront-permissions.alert-pick": "admin/storefront-permissions.alert-pick"
+  "admin/storefront-permissions.alert-pick": "admin/storefront-permissions.alert-pick",
+  "admin/storefront-permissions.searchOrganizations": "admin/storefront-permissions.searchOrganizations"
 }
diff --git a/messages/en.json b/messages/en.json
@@ -20,5 +20,6 @@
   "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 pick a cost center before you can save changes"
+  "admin/storefront-permissions.alert-pick": "You need to pick a cost center before you can save changes",
+  "admin/storefront-permissions.searchOrganizations": "Search organizations..."
 }
diff --git a/react/components/OrganizationsAutocomplete.tsx b/react/components/OrganizationsAutocomplete.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { useQuery } from 'react-apollo'
 import { AutocompleteInput } from 'vtex.styleguide'
+import { useIntl } from 'react-intl'
 
+import { messages } from './customers-admin'
 import GET_ORGANIZATIONS from '../queries/listOrganizations.gql'
 import GET_ORGANIZATION_BY_ID from '../queries/getOrganization.graphql'
 
@@ -20,6 +22,7 @@ interface Props {
 }
 
 const OrganizationsAutocomplete = ({ onChange, organizationId }: Props) => {
+  const { formatMessage } = useIntl()
   const [term, setTerm] = useState('')
   const [hasChanged, setHasChanged] = useState(false)
   const [values, setValues] = useState([] as any)
@@ -91,7 +94,7 @@ const OrganizationsAutocomplete = ({ onChange, organizationId }: Props) => {
       setTerm(_term)
     },
     onClear,
-    placeholder: 'Search organization...',
+    placeholder: formatMessage(messages.searchOrganizations),
     value: term,
   }
 

diff --git a/react/components/customers-admin.tsx b/react/components/customers-admin.tsx
@@ -12,7 +12,7 @@ import GET_COST from '../queries/costCentersByOrg.gql'
 import SAVE_USER from '../mutations/saveUser.gql'
 import DELETE_USER from '../mutations/deleteUser.gql'
 
-const messages = defineMessages({
+export const messages = defineMessages({
   b2bInfo: {
     id: 'admin/storefront-permissions.b2bInfo.title',
     defaultMessage: 'B2B Information',
@@ -70,6 +70,10 @@ const messages = defineMessages({
     id: 'admin/storefront-permissions.tab.users.error',
     defaultMessage: 'Error saving B2B info',
   },
+  searchOrganizations: {
+    id: 'admin/storefront-permissions.searchOrganizations',
+    defaultMessage: 'Search organizations...',
+  },
 })
 
 const parseOptions = (options: any) => {