feat(pci-rancher): add upgrade tile

ref: TAPC-644
Signed-off-by: Eric Ciccotti <[email protected]>

packages/manager/apps/pci-rancher/public/translations/dashboard/Messages_fr_FR.json

@@ -47,5 +47,8 @@
   "updateOfferModaleTitle": "Changer d'offre",
   "updateOfferModalDescription": "Vous êtes sur le point de modifier votre offre actuelle pour l'offre {{availableServicePlan}}. Vous serez facturé {{planPricing}} HT / heure par vCPUs orchestrés. Cette opération prendra effet immédiatement et n'a pas d'impact sur vos « downstream clusters » ni les données de votre Rancher managé. Veuillez confirmer si vous souhaitez continuer.",
   "updateOfferPending": "Votre changement d’offre a bien été pris en compte. Merci de patienter, cela peut prendre quelques minutes",
-  "updateOfferError": "Une erreur s'est produite : {{errorMessage}}"
+  "updateOfferError": "Une erreur s'est produite : {{errorMessage}}",
+  "upgradePlanTitle": "Passez à l’offre Standard",
+  "upgradePlanDescription": "Créez ou enregistrez des « downstream clusters » avec n’importe quel cloud public supporté par Rancher ou sur un cloud privé automatisable (ex. VMware vSphere), y compris les scénarios supportés par l’offre OVHcloud Edition.",
+  "upgradePlanButton": "Améliorer mon offre"
 }

packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.component.tsx

@@ -28,6 +28,7 @@ import { useTranslation } from 'react-i18next';
 
 import { MutationStatus } from '@tanstack/react-query';
 import {
+  RancherPlanName,
   RancherService,
   RancherVersion,
   ResourceStatus,
@@ -125,6 +126,8 @@ const RancherDetail = ({
     isReadyStatus &&
     !updateSoftwareResponseType;
 
+  const isEligibleForUpgrade = plan === RancherPlanName.OVHCLOUD_EDITION;
+
   return (
     <div className="max-w-4xl">
       <Notifications></Notifications>
@@ -256,6 +259,28 @@ const RancherDetail = ({
             </div>
           </OsdsTile>
         </div>
+        {isEligibleForUpgrade && (
+          <div className="p-3">
+            <OsdsTile
+              className="w-full flex-col bg-[--ods-color-blue-100] border-none"
+              inline
+              rounded
+            >
+              <div className="flex flex-col w-full">
+                <CommonTitle>{t('upgradePlanTitle')}</CommonTitle>
+                <OsdsText color={ODS_THEME_COLOR_INTENT.text} className="my-5">
+                  {t('upgradePlanDescription')}
+                </OsdsText>
+                <LinkIcon
+                  iconName={ODS_ICON_NAME.ARROW_RIGHT}
+                  href={hrefUpdateOffer}
+                  text={t('upgradePlanButton')}
+                  isDisabled={!isReadyStatus}
+                />
+              </div>
+            </OsdsTile>
+          </div>
+        )}
       </div>
     </div>
   );

packages/manager/apps/pci-rancher/src/components/layout-helpers/Dashboard/RancherDetail/RancherDetail.test.tsx

@@ -3,7 +3,7 @@ import dashboardTranslation from '@translation/dashboard/Messages_fr_FR.json';
 import updateTranslation from '@translation/updateSoftware/Messages_fr_FR.json';
 import { versionsMocked } from '@/_mock_/version';
 import { rancherMocked } from '@/_mock_/rancher';
-import { ResourceStatus } from '@/types/api.type';
+import { RancherPlanName, ResourceStatus } from '@/types/api.type';
 
 import { fireEvent, render, waitFor } from '@/utils/test/test.provider';
 import RancherDetail, { RancherDetailProps } from './RancherDetail.component';
@@ -182,5 +182,25 @@ describe('RancherDetail', () => {
       expect(updateSoftwareLabel).toBeNull();
       expect(updateSoftwareButton).toBeNull();
     });
+    it('should render upgrade plan information when isEligibleForUpgrade is true', async () => {
+      const screen = await setupSpecTest();
+
+      const upgradePlanTitle = screen.getByText(
+        dashboardTranslation.upgradePlanTitle,
+      );
+      const upgradePlanDescription = screen.getByText(
+        dashboardTranslation.upgradePlanDescription,
+      );
+      const upgradePlanButton = screen.getByText(
+        dashboardTranslation.upgradePlanButton,
+      );
+
+      expect(upgradePlanTitle).toBeInTheDocument();
+      expect(upgradePlanDescription).toBeInTheDocument();
+      expect(upgradePlanButton).toBeInTheDocument();
+
+      const linkIcon = screen.getByText(dashboardTranslation.upgradePlanButton);
+      expect(linkIcon).not.toBeDisabled();
+    });
   });
 });