fix(mrc): fix ignore translation in component property

packages/manager-react-components/src/components/order/OrderSummary.component.tsx

@@ -6,8 +6,8 @@ import {
 import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 import { Trans, useTranslation } from 'react-i18next';
 import React, { useEffect } from 'react';
-import { Links, LinkType } from '../typography';
 import { useOrderContext } from './Order.context';
+import { Links, LinkType } from '../typography';
 
 export type TOrderSummary = {
   onFinish: () => void;
@@ -52,7 +52,7 @@ export const OrderSummary: React.FC<TOrderSummary> = ({
             t={t}
             i18nKey="order_summary_order_initiated_subtitle"
             components={{
-              OrderLink: (
+              ExternalLink: (
                 <Links
                   type={LinkType.external}
                   target="_blank"
@@ -62,7 +62,7 @@ export const OrderSummary: React.FC<TOrderSummary> = ({
                 />
               ),
             }}
-          ></Trans>
+          />
         </OdsText>
         <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('order_summary_order_initiated_info', { product })}

packages/manager-react-components/src/components/order/translations/Messages_de_DE.json

@@ -4,6 +4,6 @@
   "order_summary_finish": "Beenden",
   "order_summary_product_default_label": "Dienst",
   "order_summary_order_initiated_title": "Bestellung Ihres {{product}} initiiert",
-  "order_summary_order_initiated_subtitle": "Wenn Sie Ihre Bestellung nicht abschließen konnten, füllen Sie bitte diese aus, indem Sie auf den <OrderLink label='lien suivant' />",
+  "order_summary_order_initiated_subtitle": "Wenn Sie Ihre Bestellung nicht abschließen konnten, vervollständigen Sie diese bitte, indem Sie auf <OrderLink label=\"lien suivant\">{{label}}</OrderLink> klicken.",
   "order_summary_order_initiated_info": "Wir werden Sie per E-Mail über die Verfügbarkeit Ihres {{product}} informieren."
 }

packages/manager-react-components/src/components/order/translations/Messages_en_GB.json

@@ -1,9 +1,9 @@
 {
   "order_configuration_cancel": "Cancel",
-  "order_configuration_order": "Order now",
+  "order_configuration_order": "Order",
   "order_summary_finish": "Finish",
   "order_summary_product_default_label": "service",
   "order_summary_order_initiated_title": "Order for your {{product}} initiated",
-  "order_summary_order_initiated_subtitle": "If you were unable to complete your order, please complete it by clicking on the <OrderLink label='lien suivant' />",
+  "order_summary_order_initiated_subtitle": "If you have been unable to complete your order, please complete it by clicking on <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
   "order_summary_order_initiated_info": "We will notify you of the availability of your {{product}} by email."
 }

packages/manager-react-components/src/components/order/translations/Messages_es_ES.json

@@ -4,6 +4,6 @@
   "order_summary_finish": "Finalizar",
   "order_summary_product_default_label": "servicio",
   "order_summary_order_initiated_title": "Contratación de su {{product}} iniciada",
-  "order_summary_order_initiated_subtitle": "Si no ha podido finalizar el pedido, cumplimente los campos haciendo clic en el <OrderLink label='lien suivant' />",
+  "order_summary_order_initiated_subtitle": "Si no ha podido finalizar el pedido, puede completarlo haciendo clic en el <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
   "order_summary_order_initiated_info": "Le informaremos de la disponibilidad de su {{product}} por correo electrónico."
 }

packages/manager-react-components/src/components/order/translations/Messages_fr_CA.json

@@ -4,6 +4,6 @@
   "order_summary_finish": "Terminer",
   "order_summary_product_default_label": "service",
   "order_summary_order_initiated_title": "Commande de votre {{product}} initiée",
-  "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le <OrderLink label='lien suivant' />",
+  "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
   "order_summary_order_initiated_info": "Nous vous informerons de la disponibilité de votre {{product}} par e-mail."
 }

packages/manager-react-components/src/components/order/translations/Messages_fr_FR.json

@@ -4,6 +4,6 @@
   "order_summary_finish": "Terminer",
   "order_summary_product_default_label": "service",
   "order_summary_order_initiated_title": "Commande de votre {{product}} initiée",
-  "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
+  "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le <ExternalLink>lien suivant</ExternalLink>",
   "order_summary_order_initiated_info": "Nous vous informerons de la disponibilité de votre {{product}} par e-mail."
 }

packages/manager-react-components/src/components/order/translations/Messages_it_IT.json

@@ -1,9 +1,9 @@
 {
-  "order_configuration_cancel": "Annulla",
-  "order_configuration_order": "Ordina",
-  "order_summary_finish": "Termina",
+  "order_configuration_cancel": "Annullare",
+  "order_configuration_order": "Ordinare",
+  "order_summary_finish": "Terminare",
   "order_summary_product_default_label": "servizio",
-  "order_summary_order_initiated_title": "Ordine del {{product}} avviato",
-  "order_summary_order_initiated_subtitle": "Se non sei riuscito a completare l'ordine, clicca sul <OrderLink label='lien suivant' />",
+  "order_summary_order_initiated_title": "Ordine del tuo {{product}} avviato",
+  "order_summary_order_initiated_subtitle": "Se non hai potuto finalizzare l’ordine, completalo cliccando su <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
   "order_summary_order_initiated_info": "Ti informeremo della disponibilità del tuo {{product}} via email."
 }

packages/manager-react-components/src/components/order/translations/Messages_pl_PL.json

@@ -2,8 +2,8 @@
   "order_configuration_cancel": "Anuluj",
   "order_configuration_order": "Zamów",
   "order_summary_finish": "Zakończ",
-  "order_summary_product_default_label": "usługa",
-  "order_summary_order_initiated_title": "Zamówienie dla {{product}} zostało zainicjowane",
-  "order_summary_order_initiated_subtitle": "Jeśli nie jesteś w stanie sfinalizować zamówienia, uzupełnij je, klikając na <OrderLink label='lien suivant' />",
-  "order_summary_order_initiated_info": "Powiadomimy Cię e-mailem o dostępności {{product}}."
+  "order_summary_product_default_label": "Usługa",
+  "order_summary_order_initiated_title": "Zamówienie {{product}} jest przetwarzane",
+  "order_summary_order_initiated_subtitle": "Jeżeli nie udało Ci się sfinalizować zamówienia, dokończ je, klikając <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
+  "order_summary_order_initiated_info": "O dostępności {{product}} powiadomimy Cię e-mailem."
 }

packages/manager-react-components/src/components/order/translations/Messages_pt_PT.json

@@ -1,9 +1,9 @@
 {
   "order_configuration_cancel": "Anular",
   "order_configuration_order": "Encomendar",
-  "order_summary_finish": "Terminer",
+  "order_summary_finish": "Concluir",
   "order_summary_product_default_label": "serviço",
   "order_summary_order_initiated_title": "Encomenda do seu {{product}} iniciada",
-  "order_summary_order_initiated_subtitle": "Se não conseguiu finalizar a sua encomenda, agradecemos que a complete clicando no <OrderLink label='lien suivant' />",
+  "order_summary_order_initiated_subtitle": "Se não conseguiu finalizar a sua encomenda, complete-a clicando em <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
   "order_summary_order_initiated_info": "Receberá por e-mail a informação da disponibilidade do seu {{product}}."
 }

packages/manager-react-components/src/components/typography/links/links.component.tsx

@@ -21,6 +21,7 @@ export interface LinksProps {
   color?: ODS_LINK_COLOR;
   download?: string;
   label?: string;
+  children?: string;
   href?: string;
   rel?: string;
   target?: string;
@@ -31,6 +32,7 @@ export interface LinksProps {
 }
 
 export const Links: React.FC<LinksProps> = ({
+  children,
   label,
   onClickReturn,
   type,
@@ -39,7 +41,7 @@ export const Links: React.FC<LinksProps> = ({
   iconAlignment,
   className = '',
   ...props
-}: LinksProps) => (
+}) => (
   <OdsLink
     className={className}
     href={href}
@@ -55,7 +57,7 @@ export const Links: React.FC<LinksProps> = ({
     })}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}
     {...(type === LinkType.external && { icon: ODS_ICON_NAME.externalLink })}
-    label={label}
+    label={label ?? children}
   />
 );
 

packages/manager-react-components/src/components/typography/links/links.spec.tsx

@@ -24,7 +24,7 @@ describe('Links component', () => {
     const linkElement = container.querySelector('[label="Next Page"]');
     expect(linkElement).toBeInTheDocument();
   });
-  it('renders a external link correctly', () => {
+  it('renders a external link correctly with label as prop', () => {
     const props = {
       href: 'https://www.ovhcloud.com/',
       target: '_blank',
@@ -37,4 +37,17 @@ describe('Links component', () => {
 
     expect(linkElement).toBeInTheDocument();
   });
+
+  it('renders a external link correctly with label as children', () => {
+    const props = {
+      href: 'https://www.ovhcloud.com/',
+      target: '_blank',
+      type: LinkType.external,
+    };
+
+    const { container } = render(<Links {...props}>External Page</Links>);
+    const linkElement = container.querySelector('[label="External Page"]');
+
+    expect(linkElement).toBeInTheDocument();
+  });
 });