fix(pci-vouchers): use translation component for the banners

ref: PRB0040912 Signed-off-by: Sachin Ramesh <[email protected]>
ovh · Oct 18, 2024 · 211e7b8 · 211e7b8
1 parent 5f9f457
commit 211e7b8
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 23 deletions.
diff --git a/packages/manager/apps/pci-vouchers/src/pages/AddVoucherPage.tsx b/packages/manager/apps/pci-vouchers/src/pages/AddVoucherPage.tsx
@@ -1,11 +1,10 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Translation } from 'react-i18next';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import AddVoucherModal from '@/components/vouchers/AddVoucherModal';
 
 export default function AddVoucherPage() {
   const { projectId } = useParams();
-  const { t } = useTranslation('common');
   const { addError, addSuccess } = useNotifications();
   const navigate = useNavigate();
   const onClose = () => {
@@ -17,14 +16,23 @@ export default function AddVoucherPage() {
       projectId={projectId}
       onClose={onClose}
       onSuccess={() => {
-        addSuccess(t('cpb_vouchers_add_success'));
+        addSuccess(
+          <Translation ns="common">
+            {(t) => t('cpb_vouchers_add_success')}
+          </Translation>,
+          true,
+        );
       }}
       onError={(error: Error) => {
         addError(
-          <>
-            {t('cpb_vouchers_add_error')}
-            {error && ` (${error.message})`}
-          </>,
+          <Translation ns="common">
+            {(t) =>
+              t('cpb_vouchers_add_error', {
+                message: error?.message || null,
+              })
+            }
+          </Translation>,
+          true,
         );
       }}
     />

diff --git a/packages/manager/apps/pci-vouchers/src/pages/BuyCreditPage.tsx b/packages/manager/apps/pci-vouchers/src/pages/BuyCreditPage.tsx
@@ -1,12 +1,11 @@
 import { useNavigate, useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
+import { Translation } from 'react-i18next';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import BuyCreditModal from '@/components/vouchers/BuyCreditModal';
 import style from '@/components/common.module.css';
 
 export default function BuyCreditPage() {
   const { projectId } = useParams();
-  const { t } = useTranslation('common');
   const { addError, addSuccess } = useNotifications();
   const navigate = useNavigate();
   const onClose = () => {
@@ -20,24 +19,33 @@ export default function BuyCreditPage() {
         onClose={onClose}
         onSuccess={(amount, url) => {
           addSuccess(
-            <span
-              className={style.linkContainer}
-              dangerouslySetInnerHTML={{
-                __html: t('cpb_vouchers_add_credit_success', {
-                  amount,
-                  url,
-                  interpolation: { escapeValue: false },
-                }),
-              }}
-            ></span>,
+            <Translation ns="common">
+              {(t) => (
+                <span
+                  className={style.linkContainer}
+                  dangerouslySetInnerHTML={{
+                    __html: t('cpb_vouchers_add_credit_success', {
+                      amount,
+                      url,
+                      interpolation: { escapeValue: false },
+                    }),
+                  }}
+                ></span>
+              )}
+            </Translation>,
+            true,
           );
         }}
         onError={(error: Error) => {
           addError(
-            <>
-              {t('cpb_vouchers_add_error')}
-              {error && ` (${error.message})`}
-            </>,
+            <Translation ns="common">
+              {(t) =>
+                t('cpb_vouchers_add_error', {
+                  message: error?.message || null,
+                })
+              }
+            </Translation>,
+            true,
           );
         }}
       />