Add i18n support

packages/app-elements/package.json

@@ -45,6 +45,9 @@
     "@types/react-datepicker": "^7.0.0",
     "@types/react-dom": "^18.3.1",
     "classnames": "^2.5.1",
+    "i18next": "^24.0.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-resources-to-backend": "^1.2.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
@@ -55,6 +58,7 @@
     "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
+    "react-i18next": "^15.1.3",
     "react-select": "^5.8.3",
     "react-tooltip": "^5.28.0",
     "swr": "^2.2.5",

packages/app-elements/src/dictionaries/customers.ts

@@ -1,4 +1,5 @@
 import type { Customer } from '@commercelayer/sdk'
+import { t } from 'i18next'
 import type { DisplayStatus } from './types'
 
 export interface CustomerDisplayStatus extends DisplayStatus {}
@@ -9,35 +10,35 @@ export function getCustomerDisplayStatus(
   switch (customerObj.status) {
     case 'prospect':
       return {
-        label: 'Prospect',
+        label: t('resources.customers.attributes.status.prospect'),
         icon: 'chatCircle',
         color: 'orange',
-        task: 'Prospect'
+        task: t('resources.customers.attributes.status.prospect')
       }
 
     case 'acquired':
       return {
-        label: 'Acquired',
+        label: t('resources.customers.attributes.status.acquired'),
         icon: 'check',
         color: 'orange',
-        task: 'Acquired'
+        task: t('resources.customers.attributes.status.acquired')
       }
 
     case 'repeat':
       return {
-        label: 'Repeat',
+        label: t('resources.customers.attributes.status.repeat'),
         icon: 'arrowUpRight',
         color: 'orange',
-        task: 'Repeat'
+        task: t('resources.customers.attributes.status.repeat')
       }
   }
 }
 
 export function getCustomerStatusName(status: Customer['status']): string {
   const dictionary: Record<typeof status, string> = {
-    prospect: 'Prospect',
-    acquired: 'Acquired',
-    repeat: 'Repeat'
+    prospect: t('resources.customers.attributes.status.prospect'),
+    acquired: t('resources.customers.attributes.status.acquired'),
+    repeat: t('resources.customers.attributes.status.repeat')
   }
 
   return dictionary[status]

packages/app-elements/src/dictionaries/orders.ts

@@ -1,5 +1,6 @@
 import type { StatusIconProps } from '#ui/atoms/StatusIcon'
 import type { Order } from '@commercelayer/sdk'
+import { t } from 'i18next'
 import type { DisplayStatus } from './types'
 export interface OrderDisplayStatus extends DisplayStatus {
   label: string
@@ -14,10 +15,10 @@ export function getOrderDisplayStatus(order: Order): OrderDisplayStatus {
 
   if (order.status === 'editing') {
     return {
-      label: 'Editing',
+      label: t('resources.orders.attributes.status.editing'),
       icon: 'pencilSimple',
       color: 'orange',
-      task: 'Editing'
+      task: t('resources.orders.attributes.status.editing')
     }
   }
 
@@ -31,79 +32,81 @@ export function getOrderDisplayStatus(order: Order): OrderDisplayStatus {
     case 'placed:free:unfulfilled':
     case 'placed:free:not_required':
       return {
-        label: 'Placed',
+        label: t('resources.orders.attributes.status.placed'),
         icon: 'arrowDown',
         color: 'orange',
-        task: 'Awaiting approval'
+        task: t('apps.orders.tasks.awaiting_approval')
       }
 
     case 'placed:unpaid:unfulfilled':
       return {
-        label: 'Placed',
+        label: t('resources.orders.attributes.status.placed'),
         icon: 'x',
         color: 'red',
-        task: 'Error to cancel'
+        task: t('apps.orders.tasks.error_to_cancel')
       }
 
     case 'approved:authorized:unfulfilled':
     case 'approved:authorized:not_required':
       return {
-        label: 'Approved',
+        label: t('resources.orders.attributes.status.approved'),
         icon: 'creditCard',
         color: 'orange',
-        task: 'Payment to capture'
+        task: t('apps.orders.tasks.payment_to_capture')
       }
 
     case 'approved:paid:in_progress':
     case 'approved:partially_refunded:in_progress':
       return {
-        label: 'In progress',
+        label: t('apps.orders.display_status.in_progress'),
         icon: 'arrowClockwise',
         color: 'orange',
-        task: 'Fulfillment in progress'
+        task: t('apps.orders.tasks.fulfillment_in_progress')
       }
 
     case 'approved:authorized:in_progress':
       return {
-        label: 'In progress (Manual)',
+        label: t('apps.orders.display_status.in_progress_manual'),
         icon: 'arrowClockwise',
         color: 'orange',
-        task: 'Fulfillment in progress'
+        task: t('apps.orders.tasks.fulfillment_in_progress')
       }
 
     case 'approved:paid:fulfilled':
       return {
-        label: 'Fulfilled',
+        label: t('resources.orders.attributes.fulfillment_status.fulfilled'),
         icon: 'check',
         color: 'green'
       }
 
     // TODO: This could be a gift-card and what If i do return?
     case 'approved:free:fulfilled':
       return {
-        label: 'Fulfilled',
+        label: t('resources.orders.attributes.fulfillment_status.fulfilled'),
         icon: 'check',
         color: 'green'
       }
 
     case 'approved:paid:not_required':
     case 'approved:partially_refunded:not_required':
       return {
-        label: 'Approved',
+        label: t('resources.orders.attributes.status.approved'),
         icon: 'check',
         color: 'green'
       }
 
     case 'approved:free:not_required':
       return {
-        label: 'Approved',
+        label: t('resources.orders.attributes.status.approved'),
         icon: 'check',
         color: 'green'
       }
 
     case 'approved:partially_refunded:fulfilled':
       return {
-        label: 'Part. refunded',
+        label: t(
+          'resources.orders.attributes.payment_status.partially_refunded'
+        ),
         icon: 'check',
         color: 'green'
       }
@@ -114,14 +117,14 @@ export function getOrderDisplayStatus(order: Order): OrderDisplayStatus {
     case 'cancelled:unpaid:unfulfilled':
     case 'cancelled:free:unfulfilled':
       return {
-        label: 'Cancelled',
+        label: t('resources.orders.attributes.status.cancelled'),
         icon: 'x',
         color: 'gray'
       }
 
     case 'cancelled:refunded:fulfilled':
       return {
-        label: 'Cancelled',
+        label: t('resources.orders.attributes.status.cancelled'),
         icon: 'x',
         color: 'gray'
       }
@@ -130,14 +133,14 @@ export function getOrderDisplayStatus(order: Order): OrderDisplayStatus {
     case 'pending:authorized:unfulfilled':
     case 'pending:free:unfulfilled':
       return {
-        label: 'Pending',
+        label: t('resources.orders.attributes.status.pending'),
         icon: 'shoppingBag',
         color: 'white'
       }
 
     default:
       return {
-        label: `Not handled: (${combinedStatus})`,
+        label: `${t('common.not_handled')}: (${combinedStatus})`,
         icon: 'warning',
         color: 'white'
       }
@@ -148,16 +151,20 @@ export function getOrderTransactionName(
   type: NonNullable<Order['transactions']>[number]['type']
 ): { pastTense: string; singular: string } {
   const pastTenseDictionary: Record<typeof type, string> = {
-    authorizations: 'authorized',
-    captures: 'captured',
-    refunds: 'refunded',
-    voids: 'voided'
+    authorizations: t(
+      'resources.orders.attributes.payment_status.authorized'
+    ).toLowerCase(),
+    captures: t('apps.orders.details.payment_captured').toLowerCase(),
+    refunds: t(
+      'resources.orders.attributes.payment_status.refunded'
+    ).toLowerCase(),
+    voids: t('resources.orders.attributes.payment_status.voided').toLowerCase()
   }
   const singularDictionary: Record<typeof type, string> = {
-    authorizations: 'Payment authorization',
-    captures: 'Payment capture',
-    refunds: 'Refund',
-    voids: 'Void'
+    authorizations: t('apps.orders.details.payment_authorization'),
+    captures: t('apps.orders.details.payment_capture'),
+    refunds: t('apps.orders.details.payment_refund'),
+    voids: t('apps.orders.details.payment_void')
   }
 
   return {
@@ -168,13 +175,13 @@ export function getOrderTransactionName(
 
 export function getOrderStatusName(status: Order['status']): string {
   const dictionary: Record<typeof status, string> = {
-    approved: 'Approved',
-    cancelled: 'Cancelled',
-    draft: 'Draft',
-    editing: 'Editing',
-    pending: 'Pending',
-    placed: 'Placed',
-    placing: 'Placing'
+    approved: t('resources.orders.attributes.status.approved'),
+    cancelled: t('resources.orders.attributes.status.cancelled'),
+    draft: t('resources.orders.attributes.status.draft'),
+    editing: t('resources.orders.attributes.status.editing'),
+    pending: t('resources.orders.attributes.status.pending'),
+    placed: t('resources.orders.attributes.status.placed'),
+    placing: t('resources.orders.attributes.status.placing')
   }
 
   return dictionary[status]
@@ -184,16 +191,24 @@ export function getOrderPaymentStatusName(
   status: Order['payment_status']
 ): string {
   const dictionary: Record<typeof status, string> = {
-    authorized: 'Authorized',
-    paid: 'Paid',
-    unpaid: 'Unpaid',
-    free: 'Free',
-    voided: 'Voided',
-    refunded: 'Refunded',
-    partially_authorized: 'Part. authorized',
-    partially_paid: 'Part. paid',
-    partially_refunded: 'Part. refunded',
-    partially_voided: 'Part. voided'
+    authorized: t('resources.orders.attributes.payment_status.authorized'),
+    paid: t('resources.orders.attributes.payment_status.paid'),
+    unpaid: t('resources.orders.attributes.payment_status.unpaid'),
+    free: t('resources.orders.attributes.payment_status.free'),
+    voided: t('resources.orders.attributes.payment_status.voided'),
+    refunded: t('resources.orders.attributes.payment_status.refunded'),
+    partially_authorized: t(
+      'resources.orders.attributes.payment_status.partially_authorized'
+    ),
+    partially_paid: t(
+      'resources.orders.attributes.payment_status.partially_paid'
+    ),
+    partially_refunded: t(
+      'resources.orders.attributes.payment_status.partially_refunded'
+    ),
+    partially_voided: t(
+      'resources.orders.attributes.payment_status.partially_voided'
+    )
   }
 
   return dictionary[status]
@@ -203,10 +218,16 @@ export function getOrderFulfillmentStatusName(
   status: Order['fulfillment_status']
 ): string {
   const dictionary: Record<typeof status, string> = {
-    unfulfilled: 'Unfulfilled',
-    in_progress: 'In progress',
-    fulfilled: 'Fulfilled',
-    not_required: 'Not required'
+    unfulfilled: t(
+      'resources.orders.attributes.fulfillment_status.unfulfilled'
+    ),
+    in_progress: t(
+      'resources.orders.attributes.fulfillment_status.in_progress'
+    ),
+    fulfilled: t('resources.orders.attributes.fulfillment_status.fulfilled'),
+    not_required: t(
+      'resources.orders.attributes.fulfillment_status.not_required'
+    )
   }
 
   return dictionary[status]

packages/app-elements/src/dictionaries/promotions.ts

@@ -1,5 +1,6 @@
 import { getEventDateInfo } from '#helpers/date'
 import type { Promotion } from '@commercelayer/sdk'
+import { t } from 'i18next'
 import type { DisplayStatus } from './types'
 
 interface PromotionDisplayStatus extends DisplayStatus {
@@ -12,7 +13,7 @@ export function getPromotionDisplayStatus(
   if (promotion.disabled_at != null) {
     return {
       status: 'disabled',
-      label: 'Disabled',
+      label: t('resources.promotions.attributes.status.disabled'),
       icon: 'minus',
       color: 'lightGray'
     }
@@ -29,7 +30,7 @@ export function getPromotionDisplayStatus(
   ) {
     return {
       status: 'used',
-      label: 'Expired',
+      label: t('resources.promotions.attributes.status.expired'),
       icon: 'flag',
       color: 'gray'
     }
@@ -39,23 +40,23 @@ export function getPromotionDisplayStatus(
     case 'past':
       return {
         status: 'expired',
-        label: 'Expired',
+        label: t('resources.promotions.attributes.status.expired'),
         icon: 'flag',
         color: 'gray'
       }
 
     case 'upcoming':
       return {
         status: 'upcoming',
-        label: 'Upcoming',
+        label: t('apps.promotions.display_status.upcoming'),
         icon: 'calendarBlank',
         color: 'gray'
       }
 
     case 'active':
       return {
         status: 'active',
-        label: 'Active',
+        label: t('resources.promotions.attributes.status.active'),
         icon: 'pulse',
         color: 'green'
       }