feat (localization): Add FE translations for italian (#1148)

* add italian language in selector * add italian translations for FE part * fix customer portal date format based on locale * fix document locale handling in customer portal * fix linter issues * use LocaleEnum instead of string * fix linter issues
getlago · Aug 24, 2023 · c89ad63 · c89ad63
1 parent b3935b8
commit c89ad63
Show file tree

Hide file tree

Showing 11 changed files with 97 additions and 12 deletions.
diff --git a/ditto/base.json b/ditto/base.json
@@ -980,6 +980,7 @@
   "text_6408d64fb486aa006163f043": "credit_note.created",
   "text_641394c4c936000079c5639a": "Leave this field free so the user does not receive their invoices by mail.",
   "text_6437d8583c62bc00c393d923": "German",
+  "text_64e4ce3b2fa8940053c8a583": "Italian",
   "text_64188b3d9735d5007d712249": "$730.00",
   "text_64188b3d9735d5007d71225c": "Your invoice from {{organization}} #LAG-1234-567-981",
   "text_64188b3d9735d5007d712260": "<[email protected]>",

diff --git a/ditto/index.js b/ditto/index.js
@@ -114,6 +114,7 @@ module.exports = {
     "base": require('./-wip---customer---customer-portal__base.json'),
     "de": require('./-wip---customer---customer-portal__de.json'),
     "fr": require('./-wip---customer---customer-portal__fr.json'),
+    "it": require('./-wip---customer---customer-portal__it.json'),
     "nb": require('./-wip---customer---customer-portal__nb.json')
   },
   "project_632b49dccdbed9536c8497ab": {
@@ -144,6 +145,7 @@ module.exports = {
     "base": require('./-wip---settings---email-invoices-to-final-customers__base.json'),
     "de": require('./-wip---settings---email-invoices-to-final-customers__de.json'),
     "fr": require('./-wip---settings---email-invoices-to-final-customers__fr.json'),
+    "it": require('./-wip---settings---email-invoices-to-final-customers__it.json'),
     "nb": require('./-wip---settings---email-invoices-to-final-customers__nb.json')
   },
   "project_63e27c4800ff170963670e71": {

diff --git a/ditto/it.json b/ditto/it.json
@@ -0,0 +1,57 @@
+{
+  "text_641d6ae1d947c400671e6abb": "Qualcosa è andato storto",
+  "text_641d6aee014c8d00c1425cdd": "Ti preghiamo di aggiornare la pagina o di contattarci se l'errore persiste.",
+  "text_641d6b00ef96c1008754734d": "Aggiorna la pagina",
+  "text_641d6b0c5a725b00af12bd76": "La fattura non può essere trovata",
+  "text_641d6b1ae9019c00b59fe250": "Potresti inserire un'altra parola chiave?",
+  "text_6419c64eace749372fc72b03": "Fornito da",
+  "text_6419c64eace749372fc72b07": "Informazioni cliente",
+  "text_6419c64eace749372fc72b0b": "Nome non fornito",
+  "text_6419c64eace749372fc72b0f": "Nome",
+  "text_6419c64eace749372fc72b13": "Nome legale non fornito",
+  "text_6419c64eace749372fc72b17": "Nome legale",
+  "text_6419c64eace749372fc72b23": "Email non fornita",
+  "text_6419c64eace749372fc72b27": "Email",
+  "text_6419c64eace749372fc72b2b": "Indirizzo non fornito",
+  "text_6419c64eace749372fc72b2f": "Indirizzo",
+  "text_6419c64eace749372fc72b33": "Cerca fatture",
+  "text_6419c64eace749372fc72b37": "Cronologia fatture",
+  "text_6419c64eace749372fc72b3b": "Attualmente non ci sono fatture associate a questo cliente. Controlla più tardi o contattaci se riscontri problemi.",
+  "text_647ddd5220412a009bfd36f4": "Numero legale",
+  "text_647ddd5f54fefd00c5754bca": "Numero legale non fornito",
+  "text_6480a70109b61a005b2092df": "Numero di identificazione fiscale",
+  "text_6480a707530c5c0053cd11e1": "Numero di identificazione fiscale non fornito",
+  "text_6419c64eace749372fc72b39": "Data Emissione",
+  "text_6419c64eace749372fc72b3c": "Numero Fattura",
+  "text_6419c64eace749372fc72b3e": "Importo",
+  "text_6419c64eace749372fc72b40": "Pagamento",
+  "text_6419c64eace749372fc72b44": "Non pagate",
+  "text_6419c64eace749372fc72b54": "Pagate",
+  "text_6419c64eace749372fc72b62": "Scarica PDF",
+  "text_641c6acee4bc20004e62c534": "Qualcosa è andato storto, il token non è valido o è scaduto",
+  "__variant-name": "Italian",
+  "__variant-description": "",
+  "text_64188b3d9735d5007d712249": "730,00 $",
+  "text_64188b3d9735d5007d71225c": "La tua fattura da {{organization}} #LAG-1234-567-981",
+  "text_64188b3d9735d5007d712260": "<[email protected]>",
+  "text_64188b3d9735d5007d712262": "Ai tuoi clienti",
+  "text_64188b3d9735d5007d712266": "Fattura da {{organization}}",
+  "text_64188b3d9735d5007d71226a": "Totale dovuto il 01 settembre 2023",
+  "text_64188b3d9735d5007d71226c": "Numero Fattura",
+  "text_64188b3d9735d5007d71226e": "LAG-1234-567-981",
+  "text_64188b3d9735d5007d712270": "Data Emissione",
+  "text_64188b3d9735d5007d712272": "01 Set. 2023",
+  "text_64188b3d9735d5007d712274": "Scarica la fattura per ulteriori dettagli",
+  "text_64188b3d9735d5007d712276": "Domande? Contattaci all'indirizzo",
+  "text_64188b3d9735d5007d712278": "Fornito da",
+  "text_64188b3d9735d5007d712271": "La tua nota di credito da {{organization}} #LAG-1234-567-981-CN001",
+  "text_64188b3d9735d5007d71227b": "Nota di credito da {{organization}}",
+  "text_64188b3d9735d5007d71227d": "730,00 $",
+  "text_64188b3d9735d5007d71227e": "Accreditato sul saldo cliente il 01 Set. 2023",
+  "text_64188b3d9735d5007d71227f": "Numero Nota di Credito",
+  "text_64188b3d9735d5007d712280": "LAG-1234-567-981-CN001",
+  "text_64188b3d9735d5007d712281": "Numero Fattura",
+  "text_64188b3d9735d5007d712282": "LAG-1234-567-981",
+  "text_64188b3d9735d5007d712283": "Data Emissione",
+  "text_64188b3d9735d5007d712284": "01 Set. 2023"
+}
diff --git a/scripts/MergeTranslationFiles.js b/scripts/MergeTranslationFiles.js
@@ -6,7 +6,7 @@ const glob = require('glob')
 
 const DITTO_DIR = './ditto/'
 
-const AVAILABLE_LOCALES = { en: 'en', fr: 'fr', nb: 'nb', de: 'de' }
+const AVAILABLE_LOCALES = { en: 'en', fr: 'fr', nb: 'nb', de: 'de', it: 'it' }
 
 /**
  * Get all files which match a given path

diff --git a/src/components/customerPortal/PortalInvoiceListItem.tsx b/src/components/customerPortal/PortalInvoiceListItem.tsx
@@ -13,6 +13,7 @@ import {
   Tooltip,
 } from '~/components/designSystem'
 import { theme, NAV_HEIGHT } from '~/styles'
+import { LocaleEnum } from '~/core/translations'
 import { addToast } from '~/core/apolloClient'
 import {
   PortalInvoiceListItemFragment,
@@ -49,6 +50,7 @@ interface PortalInvoiceListItemProps {
   invoice: PortalInvoiceListItemFragment
   translate: Function
   className?: string
+  documentLocale: LocaleEnum
 }
 
 const mapStatusConfig = (paymentStatus: InvoicePaymentStatusTypeEnum) => {
@@ -60,9 +62,10 @@ const mapStatusConfig = (paymentStatus: InvoicePaymentStatusTypeEnum) => {
 }
 
 export const PortalInvoiceListItem = memo(
-  ({ className, invoice, translate }: PortalInvoiceListItemProps) => {
+  ({ className, invoice, translate, documentLocale }: PortalInvoiceListItemProps) => {
     const { id, issuingDate, number, paymentStatus, totalAmountCents, currency } = invoice
     const statusConfig = mapStatusConfig(paymentStatus)
+
     const [downloadInvoice] = useDownloadCustomerPortalInvoiceMutation({
       onCompleted(data) {
         const fileUrl = data?.downloadCustomerPortalInvoice?.fileUrl
@@ -92,7 +95,9 @@ export const PortalInvoiceListItem = memo(
       <Item className={className}>
         <GridItem>
           <Typography color="grey700" noWrap>
-            {DateTime.fromISO(issuingDate).toFormat('LLL. dd, yyyy')}
+            {DateTime.fromISO(issuingDate).toLocaleString(DateTime.DATE_MED, {
+              locale: documentLocale,
+            })}
           </Typography>
           <Typography variant="captionCode" color="grey700">
             {number}

diff --git a/src/components/customerPortal/PortalInvoicesList.tsx b/src/components/customerPortal/PortalInvoicesList.tsx
@@ -10,6 +10,7 @@ import { theme, NAV_HEIGHT, HEADER_TABLE_HEIGHT } from '~/styles'
 import { GenericPlaceholder } from '~/components/GenericPlaceholder'
 import ErrorImage from '~/public/images/maneki/error.svg'
 import EmptyImage from '~/public/images/maneki/empty.svg'
+import { LocaleEnum } from '~/core/translations'
 import { useDebouncedSearch } from '~/hooks/useDebouncedSearch'
 import { SearchInput } from '~/components/SearchInput'
 
@@ -39,9 +40,10 @@ gql`
 
 interface PortalCustomerInvoicesProps {
   translate: Function
+  documentLocale: LocaleEnum
 }
 
-export const PortalInvoicesList = ({ translate }: PortalCustomerInvoicesProps) => {
+export const PortalInvoicesList = ({ translate, documentLocale }: PortalCustomerInvoicesProps) => {
   const [getInvoices, { data, loading, error, fetchMore, variables }] =
     useCustomerPortalInvoicesLazyQuery({
       notifyOnNetworkStatusChange: true,
@@ -142,6 +144,7 @@ export const PortalInvoicesList = ({ translate }: PortalCustomerInvoicesProps) =
                         key={`portal-invoice-list-item-${invoice.id}`}
                         invoice={invoice}
                         translate={translate}
+                        documentLocale={documentLocale}
                       />
                     )
                   })}

diff --git a/src/core/translations/documentLocales.ts b/src/core/translations/documentLocales.ts
@@ -7,4 +7,5 @@ export const DocumentLocales: documentLocalesType = {
   en: 'English',
   de: 'German',
   nb: 'Norwegian (Bokmål)',
+  it: 'Italian',
 }
diff --git a/src/core/translations/types.ts b/src/core/translations/types.ts
@@ -11,5 +11,6 @@ export enum LocaleEnum {
   fr = 'fr', // French
   nb = 'nb', // Norwegian
   de = 'de', // German
+  it = 'it', // Italian
 }
 export type Locale = keyof typeof LocaleEnum
diff --git a/src/pages/auth/PortalInit.tsx b/src/pages/auth/PortalInit.tsx
@@ -9,7 +9,7 @@ import { Avatar, Icon, Typography } from '~/components/designSystem'
 import { useContextualLocale } from '~/hooks/core/useContextualLocale'
 import { useGetPortalLocaleQuery } from '~/generated/graphql'
 import Logo from '~/public/images/logo/lago-logo-grey.svg'
-import { Locale } from '~/core/translations'
+import { Locale, LocaleEnum } from '~/core/translations'
 import { theme } from '~/styles'
 
 import CustomerPortal from '../customerPortal/CustomerPortal'
@@ -43,11 +43,12 @@ const PortalInit = () => {
     nextFetchPolicy: 'network-only',
     skip: !isPortalAuthenticated || !token,
   })
-  const { translateWithContextualLocal: translate } = useContextualLocale(
+
+  const documentLocale =
     (data?.customerPortalUser?.billingConfiguration?.documentLocale as Locale) ||
-      (data?.customerPortalOrganization?.billingConfiguration?.documentLocale as Locale) ||
-      'en'
-  )
+    (data?.customerPortalOrganization?.billingConfiguration?.documentLocale as Locale) ||
+    'en'
+  const { translateWithContextualLocal: translate } = useContextualLocale(documentLocale)
 
   useEffect(() => {
     if (token) {
@@ -79,7 +80,7 @@ const PortalInit = () => {
           </InlineItems>
         </CenteredErrorWrapper>
       ) : (
-        <CustomerPortal translate={translate} />
+        <CustomerPortal translate={translate} documentLocale={LocaleEnum[documentLocale]} />
       )}
     </>
   )

diff --git a/src/pages/customerPortal/CustomerPortal.tsx b/src/pages/customerPortal/CustomerPortal.tsx
@@ -7,6 +7,7 @@ import { Skeleton, Typography } from '~/components/designSystem'
 import Logo from '~/public/images/logo/lago-logo-grey.svg'
 import { PortalCustomerInfos } from '~/components/customerPortal/PortalCustomerInfos'
 import PortalInvoicesList from '~/components/customerPortal/PortalInvoicesList'
+import { LocaleEnum } from '~/core/translations'
 
 gql`
   query getPortalOrgaInfos {
@@ -20,9 +21,10 @@ gql`
 
 interface CutsomerPortalProps {
   translate: Function
+  documentLocale: LocaleEnum
 }
 
-const CustomerPortal = ({ translate }: CutsomerPortalProps) => {
+const CustomerPortal = ({ translate, documentLocale }: CutsomerPortalProps) => {
   const { data, loading } = useGetPortalOrgaInfosQuery()
 
   return (
@@ -55,7 +57,7 @@ const CustomerPortal = ({ translate }: CutsomerPortalProps) => {
       </PageHeader>
 
       <PortalCustomerInfos translate={translate} />
-      <PortalInvoicesList translate={translate} />
+      <PortalInvoicesList translate={translate} documentLocale={documentLocale} />
     </PageWrapper>
   )
 }

diff --git a/src/pages/settings/EmailScenarioConfig.tsx b/src/pages/settings/EmailScenarioConfig.tsx
@@ -41,6 +41,8 @@ const mapLanguageKey = (language: LocaleEnum) => {
       return 'text_640a0b75228ef90063296eb5'
     case LocaleEnum.de:
       return 'text_6437d8583c62bc00c393d923'
+    case LocaleEnum.it:
+      return 'text_64e4ce3b2fa8940053c8a583'
     default:
       return 'text_6407684eaf41130074c4b2f7'
   }
@@ -198,6 +200,16 @@ const EmailScenarioConfig = () => {
                   >
                     {translate(mapLanguageKey(LocaleEnum.de))}
                   </Button>
+                  <Button
+                    align="left"
+                    variant={invoiceLanguage === LocaleEnum.it ? 'secondary' : 'quaternary'}
+                    onClick={() => {
+                      closePopper()
+                      setInvoiceLanguage(LocaleEnum.it)
+                    }}
+                  >
+                    {translate(mapLanguageKey(LocaleEnum.it))}
+                  </Button>
                   <Button
                     align="left"
                     variant={invoiceLanguage === LocaleEnum.nb ? 'secondary' : 'quaternary'}