fix(pci.savings-plan): fix banner notifications management

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

packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx

@@ -1,5 +1,5 @@
 import { usePciUrl } from '@ovh-ux/manager-pci-common';
-import { Subtitle } from '@ovh-ux/manager-react-components';
+import { Subtitle, useNotifications } from '@ovh-ux/manager-react-components';
 import {
   ODS_BUTTON_VARIANT,
   ODS_ICON_NAME,
@@ -21,13 +21,24 @@ import {
   OdsTabs,
   OdsText,
 } from '@ovhcloud/ods-components/react';
-import React, { FC, Suspense, useEffect, useMemo, useState } from 'react';
+import React, {
+  FC,
+  Suspense,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { MutationStatus, useMutationState } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+<<<<<<< HEAD
 import clsx from 'clsx';
+=======
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+>>>>>>> 093c7d31a0 (fix(pci.savings-plan): fix banner notifications management)
 import useTechnicalInfo, { usePricingInfo } from '@/hooks/useCatalogCommercial';
 import {
   getMutationKeyCreateSavingsPlan,
@@ -46,7 +57,7 @@ import {
   Resource,
   ResourceType,
 } from '../../types/CreatePlan.type';
-import { formatDate } from '../../utils/formatter/date';
+import { formatDate, toLocalDateUTC } from '../../utils/formatter/date';
 import { isValidSavingsPlanName } from '../../utils/savingsPlan';
 import Commitment from '../Commitment/Commitment';
 import SimpleTile from '../SimpleTile/SimpleTile';
@@ -431,7 +442,12 @@ export const CreatePlanFormContainer = ({
 }: {
   isDiscoveryProject: boolean;
 }) => {
+  const { environment } = useContext(ShellContext);
+  const locale = environment.getUserLocale();
+
   const { t } = useTranslation('create');
+  const { addSuccess } = useNotifications();
+  const { t: tListing } = useTranslation('listing');
 
   const [instanceCategory, setInstanceCategory] = useState<
     InstanceTechnicalName
@@ -460,7 +476,13 @@ export const CreatePlanFormContainer = ({
     }
   }, [technicalList]);
 
-  const { mutate: onCreatePlan } = useSavingsPlanCreate();
+  const { mutate: onCreatePlan } = useSavingsPlanCreate(async (data) => {
+    addSuccess(
+      tListing('banner_create_sp', {
+        startDate: toLocalDateUTC(data.startDate, locale),
+      }),
+    );
+  });
 
   const sortedPriceByDuration = [...pricingByDuration].sort(
     (a, b) => a.duration - b.duration,

packages/manager/apps/pci-savings-plan/src/hooks/useSavingsPlan.tsx

@@ -100,12 +100,18 @@ export const getMutationKeySPChangePeriod = (
   serviceId: number,
 ) => ['savings-plan', serviceId, 'change-period', savingsPlanId];
 
-export const useSavingsPlanChangePeriod = (savingsPlanId: string) => {
+export const useSavingsPlanChangePeriod = (
+  savingsPlanId: string,
+  onSuccess?: () => void,
+) => {
   const { refetch } = useSavingsPlan();
   const serviceId = useServiceId();
 
   return useMutation({
-    onSuccess: () => refetch(),
+    onSuccess: async () => {
+      onSuccess?.();
+      refetch();
+    },
     mutationKey: getMutationKeySPChangePeriod(savingsPlanId, serviceId),
     mutationFn: ({
       periodEndAction,
@@ -131,28 +137,37 @@ export const getMutationKeyCreateSavingsPlan = (serviceId: number) => [
   'create',
 ];
 
-export const useSavingsPlanEditName = (savingsPlanId: string) => {
+export const useSavingsPlanEditName = (
+  savingsPlanId: string,
+  onSuccess?: () => void,
+) => {
   const { refetch } = useSavingsPlan();
   const serviceId = useServiceId();
 
   return useMutation({
-    onSuccess: () => refetch(),
     mutationKey: getMutationKeySPEditName(savingsPlanId, serviceId),
     mutationFn: ({ displayName }: { displayName: string }) =>
       putSubscribedSavingsPlanEditName(serviceId, savingsPlanId, displayName),
+    onSuccess: async () => {
+      onSuccess?.();
+      refetch();
+    },
   });
 };
 
-export const useSavingsPlanCreate = () => {
+export const useSavingsPlanCreate = (
+  onSuccess?: (data: SavingsPlanService) => void,
+) => {
   const { refetch } = useSavingsPlan();
   const serviceId = useServiceId();
   const navigate = useNavigate();
   const { projectId } = useParams();
 
   return useMutation({
     onSuccess: async () => {
-      const { data } = await refetch();
-      if (data?.length) {
+      const { data: refetchData } = await refetch();
+      if (refetchData?.length) {
+        onSuccess?.(refetchData[0]);
         navigate(getSavingsPlansUrl(projectId));
       }
     },

packages/manager/apps/pci-savings-plan/src/pages/listing/edit-name/index.tsx

@@ -1,23 +1,30 @@
 import React, { startTransition, Suspense } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { UpdateNameModal } from '@ovh-ux/manager-react-components';
+import {
+  UpdateNameModal,
+  useNotifications,
+} from '@ovh-ux/manager-react-components';
 import { useSavingsPlan, useSavingsPlanEditName } from '@/hooks/useSavingsPlan';
 import { REGEX } from '@/utils/savingsPlan';
 
 const EditNameChildren = () => {
+  const { t } = useTranslation('edit-name');
+  const { t: tListing } = useTranslation('listing');
+  const { t: tCreate } = useTranslation('create');
+
   const navigate = useNavigate();
   const { savingsPlanId } = useParams();
+  const { addSuccess } = useNotifications();
 
   const { data: savingsPlan } = useSavingsPlan();
-  const { mutate: editName } = useSavingsPlanEditName(savingsPlanId);
+  const { mutate: editName } = useSavingsPlanEditName(savingsPlanId, () => {
+    addSuccess(tListing('banner_edit_name'));
+  });
   const [searchParams] = useSearchParams();
 
   const currentPlan = savingsPlan?.find((plan) => plan.id === savingsPlanId);
 
-  const { t } = useTranslation('edit-name');
-  const { t: tCreate } = useTranslation('create');
-
   return (
     <>
       {currentPlan ? (

packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx

@@ -1,22 +1,19 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { MutationStatus, useMutationState } from '@tanstack/react-query';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Outlet, useHref, useNavigate, useParams } from 'react-router-dom';
-import { ShellContext } from '@ovh-ux/manager-react-shell-client';
+import { Outlet, useNavigate, useParams } from 'react-router-dom';
 
 import { ODS_BUTTON_SIZE, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
-import { OdsButton, OdsMessage, OdsText } from '@ovhcloud/ods-components/react';
+import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 
-import { Title } from '@ovh-ux/manager-react-components';
+import {
+  Notifications,
+  Title,
+  useNotifications,
+} from '@ovh-ux/manager-react-components';
 
 import TableContainer from '@/components/Table/TableContainer';
-import {
-  getMutationKeyCreateSavingsPlan,
-  useSavingsPlan,
-  useServiceId,
-} from '@/hooks/useSavingsPlan';
-import { SavingsPlanService } from '@/types';
-import { toLocalDateUTC } from '@/utils/formatter/date';
+import { useSavingsPlan } from '@/hooks/useSavingsPlan';
+import { ListingProps } from '@/types/CreatePlan.type';
 
 export const formatDateString = (dateString: string, locale?: string) => {
   const date = new Date(dateString);
@@ -31,42 +28,7 @@ export const formatDateString = (dateString: string, locale?: string) => {
     : '-';
 };
 
-const Banner = ({ message }: { message: string }) => {
-  const [showBanner, setShowBanner] = useState(true);
-
-  useEffect(() => {
-    if (message) {
-      setShowBanner(true);
-    }
-  }, [message]);
-  return (
-    showBanner && (
-      <OdsMessage
-        color="success"
-        className="my-4"
-        onOdsRemove={() => setShowBanner(false)}
-      >
-        <OdsText className="inline-block">{message}</OdsText>
-      </OdsMessage>
-    )
-  );
-};
-
-export interface ListingProps {
-  data: SavingsPlanService[];
-  refetchSavingsPlans: () => void;
-}
-
-type MutationInfo<Data = void> = {
-  submittedAt: number;
-  error?: {
-    code: string;
-  };
-  status: MutationStatus;
-  data?: Data;
-};
-
-const getMutationFilters = (filters: (string | number)[]) => ({
+export const getMutationFilters = (filters: (string | number)[]) => ({
   filters: { mutationKey: filters },
 });
 
@@ -75,44 +37,9 @@ const ListingTablePage: React.FC<ListingProps> = ({
   refetchSavingsPlans,
 }) => {
   const { t } = useTranslation('listing');
-  const { environment } = useContext(ShellContext);
-  const locale = environment.getUserLocale();
-
   const navigate = useNavigate();
-  const hrefDashboard = useHref('');
-  const serviceId = useServiceId();
   const { projectId } = useParams();
-  const mutationSPChangePeriod = useMutationState<
-    MutationInfo<SavingsPlanService> & {
-      variables: {
-        periodEndAction: 'REACTIVATE' | 'ACTIVATE';
-      };
-    }
-  >(getMutationFilters(['savings-plan', serviceId, 'change-period']));
-
-  const mutationSPEditName = useMutationState<MutationInfo>(
-    getMutationFilters(['savings-plan', serviceId, 'edit-name']),
-  );
-
-  const mutationSpCreate = useMutationState<MutationInfo<SavingsPlanService>>(
-    getMutationFilters(getMutationKeyCreateSavingsPlan(serviceId)),
-  );
-
-  const lastMutationEditName =
-    mutationSPEditName[mutationSPEditName.length - 1];
-  const lastMutationChangePeriod =
-    mutationSPChangePeriod[mutationSPChangePeriod.length - 1];
-  const lastMutationSpCreate = mutationSpCreate[mutationSpCreate.length - 1];
-
-  const renewBannerMessage = t(
-    lastMutationChangePeriod?.variables.periodEndAction === 'REACTIVATE'
-      ? 'banner_renew_activate'
-      : 'banner_renew_deactivate',
-    {
-      planName: lastMutationChangePeriod?.data?.displayName,
-      endDate: lastMutationChangePeriod?.data?.endDate,
-    },
-  );
+  const { clearNotifications } = useNotifications();
 
   return (
     <>
@@ -122,39 +49,17 @@ const ListingTablePage: React.FC<ListingProps> = ({
           icon="plus"
           size={ODS_BUTTON_SIZE.sm}
           variant={ODS_BUTTON_VARIANT.outline}
-          onClick={() =>
-            navigate(`/pci/projects/${projectId}/savings-plan/new`)
-          }
+          onClick={() => {
+            clearNotifications();
+            navigate(`/pci/projects/${projectId}/savings-plan/new`);
+          }}
           label={t('createSavingsPlan')}
         />
       </div>
       <OdsText preset="span" className="inline-block my-4">
         {t('informationMessage')}
       </OdsText>
-      {mutationSPChangePeriod.length > 0 && (
-        <Banner
-          message={renewBannerMessage}
-          key={lastMutationChangePeriod.submittedAt}
-        />
-      )}
-      {mutationSpCreate.length > 0 && !lastMutationSpCreate.error?.code && (
-        <Banner
-          message={t('banner_create_sp', {
-            startDate: toLocalDateUTC(
-              lastMutationSpCreate.data.startDate,
-              locale,
-            ),
-          })}
-          key={lastMutationSpCreate.submittedAt}
-        />
-      )}
-
-      {mutationSPEditName.length > 0 && (
-        <Banner
-          message={t('banner_edit_name')}
-          key={lastMutationEditName.submittedAt}
-        />
-      )}
+      <Notifications />
       <TableContainer data={data} refetchSavingsPlans={refetchSavingsPlans} />
     </>
   );

packages/manager/apps/pci-savings-plan/src/pages/listing/renew-modal/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
 import Errors from '@/components/Error/Error';
 import RenewModal from '@/components/Modal/RenewModal';
 import {
@@ -11,18 +13,35 @@ import { SavingsPlanPlanedChangeStatus } from '@/types/api.type';
 const RenewModalPage = () => {
   const navigate = useNavigate();
   const { savingsPlanId } = useParams();
-
   const { data: savingsPlan, error, isError } = useSavingsPlan();
-  const { mutate: changePeriod } = useSavingsPlanChangePeriod(savingsPlanId);
+  const { t: tListing } = useTranslation('listing');
+  const { addSuccess } = useNotifications();
+
+  const currentPlan = savingsPlan?.find((plan) => plan.id === savingsPlanId);
+  const periodEndAction = currentPlan?.periodEndAction === 'REACTIVATE';
+
+  const { mutate: changePeriod } = useSavingsPlanChangePeriod(
+    savingsPlanId,
+    async () => {
+      addSuccess(
+        tListing(
+          currentPlan?.periodEndAction === 'REACTIVATE'
+            ? 'banner_renew_activate'
+            : 'banner_renew_deactivate',
+          {
+            planName: currentPlan.displayName,
+            endDate: currentPlan.endDate,
+          },
+        ),
+      );
+    },
+  );
   const [searchParams] = useSearchParams();
 
   if (isError || error) {
     return <Errors error={error.message} />;
   }
 
-  const currentPlan = savingsPlan?.find((plan) => plan.id === savingsPlanId);
-  const periodEndAction = currentPlan?.periodEndAction === 'REACTIVATE';
-
   const goToPrevious = () =>
     navigate({ pathname: '..', search: searchParams.toString() });