From 5148b67cac96a20384c8bf6e51be2e10a3f7a7b6 Mon Sep 17 00:00:00 2001
From: Lio B <lionel95200x@users.noreply.github.com>
Date: Fri, 3 Jan 2025 08:48:54 +0100
Subject: [PATCH] fix(pci-savings-plan): add utc date on creation (#14447)

ref: TAPC-1726

Signed-off-by: Lionel Bueno <lionel.bueno.ext@ovhcloud.com>
---
 .../pci-savings-plan/src/pages/listing/index.tsx    | 13 ++++++++++---
 .../pci-savings-plan/src/utils/formatter/date.ts    | 11 +++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx b/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
index 7ad812a83e82..3dd4012e308e 100644
--- a/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
+++ b/packages/manager/apps/pci-savings-plan/src/pages/listing/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, useHref, useNavigate, useParams } from 'react-router-dom';
 import { MutationStatus, useMutationState } from '@tanstack/react-query';
@@ -17,7 +17,7 @@ import {
   OsdsMessage,
   OsdsText,
 } from '@ovhcloud/ods-components/react';
-
+import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { Title } from '@ovh-ux/manager-react-components';
 
 import TableContainer from '@/components/Table/TableContainer';
@@ -27,6 +27,7 @@ import {
   useServiceId,
 } from '@/hooks/useSavingsPlan';
 import { SavingsPlanService } from '@/types';
+import { toLocalDateUTC } from '@/utils/formatter/date';
 
 export const formatDateString = (dateString: string, locale?: string) => {
   const date = new Date(dateString);
@@ -88,6 +89,8 @@ const ListingTablePage: React.FC<ListingProps> = ({
   refetchSavingsPlans,
 }) => {
   const { t } = useTranslation('listing');
+  const { environment } = useContext(ShellContext);
+  const locale = environment.getUserLocale();
 
   const hrefDashboard = useHref('');
   const serviceId = useServiceId();
@@ -160,11 +163,15 @@ const ListingTablePage: React.FC<ListingProps> = ({
       {mutationSpCreate.length > 0 && !lastMutationSpCreate.error?.code && (
         <Banner
           message={t('banner_create_sp', {
-            startDate: lastMutationSpCreate.data.startDate,
+            startDate: toLocalDateUTC(
+              lastMutationSpCreate.data.startDate,
+              locale,
+            ),
           })}
           key={lastMutationSpCreate.submittedAt}
         />
       )}
+
       {mutationSPEditName.length > 0 && (
         <Banner
           message={t('banner_edit_name')}
diff --git a/packages/manager/apps/pci-savings-plan/src/utils/formatter/date.ts b/packages/manager/apps/pci-savings-plan/src/utils/formatter/date.ts
index 93d7a81bd746..c1b4f1f2f341 100644
--- a/packages/manager/apps/pci-savings-plan/src/utils/formatter/date.ts
+++ b/packages/manager/apps/pci-savings-plan/src/utils/formatter/date.ts
@@ -1 +1,12 @@
 export const formatDate = (date: Date) => date.toISOString().split('T')[0];
+
+export const toLocalDateUTC = (date: string, locale: string) =>
+  new Date(date).toLocaleString(locale.replace('_', '-'), {
+    timeZone: 'UTC',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  });