fix(pci.savings-plan): fix layout and pr return (#14811)

ref: TAPC-1454 Signed-off-by: Eric Ciccotti <[email protected]> Co-authored-by: Eric Ciccotti <[email protected]>
ovh · Jan 9, 2025 · 103150d · 103150d
1 parent 9bd68ca
commit 103150d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx b/packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx
@@ -26,6 +26,7 @@ import { MutationStatus, useMutationState } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import clsx from 'clsx';
 import useTechnicalInfo, { usePricingInfo } from '@/hooks/useCatalogCommercial';
 import {
   getMutationKeyCreateSavingsPlan,
@@ -55,9 +56,10 @@ const COMMON_SPACING = 'my-4';
 
 export const DescriptionWrapper: React.FC<{
   children: string;
-}> = ({ children }) => {
+  className?: string;
+}> = ({ children, className }) => {
   return (
-    <div className={COMMON_SPACING}>
+    <div className={clsx(COMMON_SPACING, className)}>
       <OdsText>{children}</OdsText>
     </div>
   );
@@ -272,7 +274,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
       <Block>
         <Subtitle>{t('select_model')}</Subtitle>
         {isInstance && (
-          <div className={COMMON_SPACING}>
+          <div className="mb-[16px] mt-[12px]">
             <OdsTabs slot="top">
               {tabsList.map((tab) => (
                 <OdsTab
@@ -290,7 +292,7 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
           {t(getDescriptionInstanceKey(instanceCategory))}
         </DescriptionWrapper>
         {!isTechnicalInfoLoading ? (
-          <div className="flex flex-row w-full overflow-x-auto">
+          <div className="flex flex-row w-full overflow-x-auto mb-[32px]">
             {currentInstanceSelected.technical?.map(({ name, technical }) => (
               <TileTechnicalInfo
                 key={name}
@@ -307,10 +309,10 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
       </Block>
       <Block>
         <Subtitle>{t('select_quantity')}</Subtitle>
-        <DescriptionWrapper>
+        <DescriptionWrapper className="mb-[12px]">
           {t('select_quantity_description')}
         </DescriptionWrapper>
-        <OdsCard className="flex flex-row items-center mr-5 p-4 text-center justify-between w-full">
+        <OdsCard className="flex flex-row items-center mr-5 p-4 text-center justify-between w-full mb-[32px] mt-[16px]">
           <OdsText>{t('quantity_label')}</OdsText>
           <OdsQuantity
             onOdsChange={(event: OdsInputChangeEvent) => {
@@ -395,9 +397,9 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
         <label htmlFor="checkbox-label">
           <OdsText>{t('legal_checkbox')}</OdsText>
         </label>
-        <LegalLinks />
+        <LegalLinks className="mr-[5px]" />
       </Block>
-      <div className="flex mt-8">
+      <div className="flex mt-[40px]">
         <OdsButton
           data-testid="cta-cancel-button"
           label={t('cta_cancel')}

diff --git a/packages/manager/apps/pci-savings-plan/src/components/LegalLinks/LegalLinks.tsx b/packages/manager/apps/pci-savings-plan/src/components/LegalLinks/LegalLinks.tsx
@@ -2,13 +2,19 @@ import { Links, LinkType } from '@ovh-ux/manager-react-components';
 import React from 'react';
 import { useSavingsPlanContract } from '@/hooks/useSavingsPlan';
 
-const LegalLinks = () => {
+type TLegalLinksProps = {
+  className?: string;
+};
+
+const LegalLinks: React.FC<TLegalLinksProps> = ({ className = '' }) => {
   const { data = [] } = useSavingsPlanContract();
 
   return (
     <>
       {data.map((link) => (
         <Links
+          className={className}
+          data-testid={link.name}
           key={link.name}
           label={link.name}
           href={link.url}

diff --git a/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx b/packages/manager/apps/pci-savings-plan/src/components/SimpleTile/SimpleTile.tsx
@@ -13,7 +13,7 @@ const SimpleTile: React.FC<React.PropsWithChildren<{
       {
         'cursor-pointer': onClick,
         'cursor-default': !onClick,
-        'bg-[--ods-color-primary-050] border-[--ods-color-primary-500] border-2': isActive,
+        'border-[--ods-color-primary-500] border-2': isActive,
       },
       className,
     )}