feat: add locales for resources components

packages/app-elements/src/locales/en.ts

@@ -8,7 +8,19 @@ const resources = {
   addresses: {
     name: 'Address',
     name_other: 'Addresses',
-    attributes: {}
+    attributes: {
+      billing_info: 'Billing info',
+      city: 'City',
+      company: 'Company',
+      country_code: 'Country',
+      first_name: 'First name',
+      last_name: 'Last name',
+      line_1: 'Address',
+      notes: 'Notes',
+      phone: 'Phone',
+      state_code: 'State',
+      zip_code: 'ZIP code'
+    }
   },
   adjustments: {
     name: 'Adjustment',
@@ -188,22 +200,27 @@ type IsStringLiteral<T> =
 
 const en = {
   common: {
+    add_another: 'Add another',
     add_resource: 'Add {{resource}}',
     add_up_to: 'You can add up to {{limit}} {{resource}}.',
     all_items: 'All items',
     amount: 'Amount',
     apply: 'Apply',
+    apply_filters: 'Apply filters',
     back: 'Back',
     go_back: 'Go back',
     cancel: 'Cancel',
     clear_text: 'Clear text',
     close: 'Close',
     continue: 'Continue',
+    create: 'Create',
     create_resource: 'Create {{resource}}',
     currency: 'Currency',
+    custom_time_range: 'Custom Time Range',
     download_file: 'Download file',
     download_json: 'Download JSON',
     edit: 'Edit',
+    edit_details: 'Edit details',
     edit_resource: 'Edit {{resource}}',
     filters: 'Filters',
     from: 'From',
@@ -213,14 +230,24 @@ const en = {
     manage_resource: 'Manage {{resource}}',
     metadata: 'Metadata',
     new: 'New',
+    no_address: 'No address',
     no_items: 'No items',
+    no_metadata: 'No metadata',
     no_results_found: 'No results found',
+    no_textsearch_filter_set: 'No textSearch filter set',
     not_authorized: 'Not authorized',
     not_authorized_description: 'You are not authorized to access this page.',
     not_handled: 'Not handled',
+    reference: 'Reference',
+    reference_origin: 'Reference origin',
+    remove: 'Remove',
+    restocked: 'Restocked',
     search: 'Search...',
     see_all: 'See all',
+    select: 'Select...',
     select_resource: 'Select {{resource}}',
+    swap: 'Swap',
+    unit_price: 'Unit price',
     update: 'Update',
     updated: 'Updated',
     view_logs: 'View logs',
@@ -248,7 +275,8 @@ const en = {
       minimum: 'Minimum',
       maximum: 'Maximum',
       drag_here_or: 'drag and drop it here or',
-      browse_files: 'browse files'
+      browse_files: 'browse files',
+      required_field: 'Required field'
     },
     routes: {
       missing_configuration:
@@ -280,6 +308,19 @@ const en = {
         'Dear customer,\nplease follow this link to checkout your order #{{number}: \n{{url}}\nThank you,\nThe {{organization}} team',
       share_whatsapp_text:
         'Please follow this link to checkout your order *#{{number}}*: {{url}}'
+    },
+    filters_instructions: {
+      order_status: 'Order status',
+      payment_status: 'Payment status',
+      fulfillment_status: 'Fulfillment status',
+      archived: 'Archived',
+      only_archived: 'Only archived',
+      hide_archived: 'Hide archived',
+      show_all: 'Show all, both archived and not',
+      time_range: 'Time range',
+      search: 'Search',
+      name: 'Name',
+      amount: 'Amount'
     }
   },
   resources,

packages/app-elements/src/locales/it.ts

@@ -2,22 +2,27 @@ import type en from './en'
 
 const it: typeof en = {
   common: {
+    add_another: 'Aggiungi un altro',
     add_resource: 'Aggiungi {{resource}}',
     add_up_to: 'Puoi aggiungere fino a {{limit}} {{resource}}.',
     all_items: 'Tutti gli elementi',
     amount: 'Importo',
     apply: 'Applica',
+    apply_filters: 'Applica filtri',
     back: 'Indietro',
     go_back: 'Torna indietro',
     cancel: 'Annulla',
     close: 'Chiudi',
     clear_text: 'Svuota testo',
     continue: 'Continua',
+    create: 'Crea',
     create_resource: 'Crea {{resource}}',
     currency: 'Valuta',
+    custom_time_range: 'Intervallo di tempo personalizzato',
     download_file: 'Scarica file',
     download_json: 'Scarica JSON',
     edit: 'Modifica',
+    edit_details: 'Modifica dettagli',
     edit_resource: 'Modifica {{resource}}',
     filters: 'Filtri',
     from: 'Dal',
@@ -27,15 +32,25 @@ const it: typeof en = {
     manage_resource: 'Gestisci {{resource}}',
     metadata: 'Metadati',
     new: 'Nuovo',
+    no_address: 'Nessun indirizzo',
     no_items: 'Nessun elemento',
+    no_metadata: 'Nessun metadato',
     no_results_found: 'Nessun risultato trovato',
+    no_textsearch_filter_set: 'Nessun filtro di ricerca testuale impostato',
     not_authorized: 'Non autorizzato',
     not_authorized_description:
       'Non sei autorizzato ad accedere a questa pagina.',
     not_handled: 'Non gestito',
+    reference: 'Referenza',
+    reference_origin: 'Origine referenza',
+    remove: 'Rimuovi',
+    restocked: 'Rifornito',
     search: 'Cerca...',
     see_all: 'Vedi tutti',
+    select: 'Seleziona...',
     select_resource: 'Seleziona {{resource}}',
+    swap: 'Scambia',
+    unit_price: 'Prezzo unitario',
     update: 'Aggiorna',
     updated: 'Aggiornato',
     view_logs: 'Visualizza i log',
@@ -63,7 +78,8 @@ const it: typeof en = {
       minimum: 'Minimo',
       maximum: 'Massimo',
       drag_here_or: 'trascina qui o',
-      browse_files: 'seleziona file'
+      browse_files: 'seleziona file',
+      required_field: 'Campo richiesto'
     },
     generic_select_autocomplete_hint: 'Digita per cercare più opzioni.',
     routes: {
@@ -98,13 +114,38 @@ const it: typeof en = {
         'Gentile cliente,\nClicca su questo link per completare il tuo ordine #{{number}}: {{url}}\n\nGrazie,\nIl team di {{organization}}',
       share_whatsapp_text:
         'Apri questo link per completare il tuo ordine *#{{number}}*: {{url}}'
+    },
+    filters_instructions: {
+      order_status: 'Stato ordine',
+      payment_status: 'Stato pagamento',
+      fulfillment_status: 'Stato spedizione',
+      archived: 'Archiviati',
+      only_archived: 'Solo archiviati',
+      hide_archived: 'Nascondi archiviati',
+      show_all: 'Mostra tutti, sia archiviati che non',
+      time_range: 'Intervallo di tempo',
+      search: 'Cerca',
+      name: 'Nome',
+      amount: 'Importo'
     }
   },
   resources: {
     addresses: {
       name: 'Indirizzo',
       name_other: 'Indirizzi',
-      attributes: {}
+      attributes: {
+        billing_info: 'Informazione di fatturazione',
+        city: 'Città',
+        company: 'Azienda',
+        country_code: 'Paese',
+        first_name: 'Nome',
+        last_name: 'Cognome',
+        line_1: 'Indirizzo',
+        notes: 'Note',
+        phone: 'Telefono',
+        state_code: 'Provincia',
+        zip_code: 'CAP'
+      }
     },
     adjustments: {
       name: 'Modifica',

packages/app-elements/src/mocks/stubs.ts

@@ -23,3 +23,18 @@ vi.stubGlobal(`IntersectionObserver`, MockIntersectionObserver)
 const intersectionEntry = {
   isIntersecting: true
 } as unknown as IntersectionObserverEntry
+
+vi.mock('react-i18next', () => ({
+  // this mock makes sure any components using the translate hook can use it without a warning being shown
+  useTranslation: () => {
+    return {
+      t: (i18nKey: string) => i18nKey,
+      i18n: {}
+    }
+  }
+}))
+
+vi.mock('i18next', () => ({
+  // this mock makes sure any components using the translate hook can use it without a warning being shown
+  t: (i18nKey: string) => i18nKey
+}))

packages/app-elements/src/ui/resources/ResourceAddress/ResourceAddress.test.tsx

@@ -100,8 +100,10 @@ describe('ResourceAddress', () => {
       fireEvent.click(editButton)
     })
 
-    const saveAddressButton = getByText('Update address')
-    expect(getByText('Edit address')).toBeVisible()
+    const saveAddressButton = getByText(
+      'common.update resources.addresses.name'
+    )
+    expect(getByText('common.edit resources.addresses.name')).toBeVisible()
     expect(saveAddressButton).toBeVisible()
     await waitFor(() => {
       fireEvent.click(saveAddressButton)
@@ -136,9 +138,11 @@ describe('ResourceAddress', () => {
       fireEvent.click(editButton)
     })
 
-    expect(getByText('New address')).toBeVisible()
+    expect(getByText('common.new resources.addresses.name')).toBeVisible()
 
-    const createAddressButton = getByText('Create address')
+    const createAddressButton = getByText(
+      'common.create resources.addresses.name'
+    )
     expect(createAddressButton).toBeVisible()
 
     fireEvent.keyDown(getByText('Select...'), {
@@ -149,31 +153,46 @@ describe('ResourceAddress', () => {
     fireEvent.click(getByText('Angola'))
 
     await waitFor(() => {
-      fireEvent.change(getByLabelText('First name'), {
-        target: { value: 'John' }
-      })
+      fireEvent.change(
+        getByLabelText('resources.addresses.attributes.first_name'),
+        {
+          target: { value: 'John' }
+        }
+      )
 
-      fireEvent.change(getByLabelText('Last name'), {
-        target: { value: 'Doe' }
-      })
+      fireEvent.change(
+        getByLabelText('resources.addresses.attributes.last_name'),
+        {
+          target: { value: 'Doe' }
+        }
+      )
 
-      fireEvent.change(getByLabelText('Address'), {
-        target: { value: 'Via tutti' }
-      })
+      fireEvent.change(
+        getByLabelText('resources.addresses.attributes.line_1'),
+        {
+          target: { value: 'Via tutti' }
+        }
+      )
 
-      fireEvent.change(getByLabelText('City'), {
+      fireEvent.change(getByLabelText('resources.addresses.attributes.city'), {
         target: { value: 'Milan' }
       })
 
-      fireEvent.change(getByLabelText('State code'), {
-        target: { value: 'FR' }
-      })
+      fireEvent.change(
+        getByLabelText('resources.addresses.attributes.state_code'),
+        {
+          target: { value: 'FR' }
+        }
+      )
 
-      fireEvent.change(getByLabelText('ZIP code'), {
-        target: { value: '20090' }
-      })
+      fireEvent.change(
+        getByLabelText('resources.addresses.attributes.zip_code'),
+        {
+          target: { value: '20090' }
+        }
+      )
 
-      fireEvent.change(getByLabelText('Phone'), {
+      fireEvent.change(getByLabelText('resources.addresses.attributes.phone'), {
         target: { value: '-' }
       })
     })

packages/app-elements/src/ui/resources/ResourceAddress/ResourceAddress.tsx

@@ -1,3 +1,4 @@
+import { t } from '#providers/I18NProvider'
 import { useTokenProvider } from '#providers/TokenProvider'
 import { Button } from '#ui/atoms/Button'
 import { Hr } from '#ui/atoms/Hr'
@@ -184,7 +185,7 @@ export const ResourceAddress = withSkeletonTemplate<ResourceAddressProps>(
                 weight={title == null ? 'bold' : undefined}
                 variant={title != null ? 'info' : undefined}
               >
-                no address
+                {t('common.no_address')}
               </Text>
             )}
           </div>

packages/app-elements/src/ui/resources/ResourceAddress/ResourceAddressForm.tsx

@@ -1,4 +1,5 @@
 import { useCoreSdkProvider } from '#providers/CoreSdkProvider'
+import { t } from '#providers/I18NProvider'
 import { Button } from '#ui/atoms/Button'
 import { withSkeletonTemplate } from '#ui/atoms/SkeletonTemplate'
 import { Spacer } from '#ui/atoms/Spacer'
@@ -78,7 +79,8 @@ export const ResourceAddressForm =
               disabled={methods.formState.isSubmitting}
               className='w-full'
             >
-              {address == null ? 'Create' : 'Update'} address
+              {address == null ? t('common.create') : t('common.update')}{' '}
+              {t('resources.addresses.name')}
             </Button>
             <Spacer top='2'>
               <HookedValidationApiError apiError={apiError} />