♻️ Refacto price

BouyguesTelecom · Dec 17, 2024 · 4e64b6c · 4e64b6c
1 parent 44f4c6f
commit 4e64b6c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 40 deletions.
diff --git a/packages/react/components/price/Price.tsx b/packages/react/components/price/Price.tsx
@@ -3,10 +3,11 @@ import clsx from 'clsx'
 import { PriceProps } from './PriceProps'
 import { has, is } from '@/services/classify'
 import { Text, TextMarkup } from '../text'
-import { Alignable, TypographyBold, TypographyColor } from '@/objects'
+import { Alignable } from '@/objects'
 import { checkCents } from './PriceHelpers'
 import { hashClass } from '@/helpers'
 import { useTrilogyContext } from '@/context'
+import { PriceLevel } from './PriceEnum'
 
 /**
  * Price Component
@@ -18,7 +19,6 @@ import { useTrilogyContext } from '@/context'
  * @param inverted {boolean} Inverted Price Color
  * @param children {React.ReactNode}
  * @param align {Alignable} Price alignement
- * @param inline {boolean} Inline display Price
  * @param accessibilityLabel {string} Accessibility label
  * @param overline {string} Price overline
  * @param oldAmount {boolean} old Amount Price
@@ -33,7 +33,7 @@ const Price = ({
   mention,
   period,
   hideCents = false,
-  level,
+  level = PriceLevel.ONE,
   inverted,
   align,
   accessibilityLabel,
@@ -52,52 +52,42 @@ const Price = ({
 
   let amountComponent = null
   let oldAmountComponent = null
-  const tagAmountComponent = null
 
-  if (oldAmount) {
-    const isNegativeStrike = oldAmount && oldAmount < 0
-    const absoluteAmountStrike = oldAmount && Math.abs(oldAmount)
-    const absoluteWholeStrike = absoluteAmountStrike && Math.floor(absoluteAmountStrike)
-    const wholeStrike = isNegativeStrike && absoluteWholeStrike ? -absoluteWholeStrike : absoluteWholeStrike
-
-    let cents = checkCents(absoluteAmountStrike.toString().split(/[.,]/)[1]?.substring(0, 2) || '')
-    cents = (cents && cents.length === 1 && `${cents}0`) || cents
-    const centsDisplayed = (!hideCents && `€${cents}`) || '€'
-
-    oldAmountComponent = (
-      <span aria-hidden='true' className={classesStrike} {...others}>
-        <Text markup={TextMarkup.SPAN}>{`${wholeStrike}`}</Text>
+  const getAmoutContent = (amount: number, cents: string) => {
+    return (
+      <>
+        <Text markup={TextMarkup.SPAN}>{amount}</Text>
         <span className={hashClass(styled, clsx('price-details'))}>
           <span className={hashClass(styled, clsx('cents'))}>
-            {centsDisplayed === '€' ? <>&nbsp;{centsDisplayed}</> : centsDisplayed}
+            &nbsp;€{hideCents ? '' : cents}
             {mention && <sup>{mention}</sup>}
           </span>
           {period && <span className={hashClass(styled, clsx('period'))}>/{period}</span>}
         </span>
+      </>
+    )
+  }
+
+  if (oldAmount) {
+    const wholeStrike = oldAmount < 0 ? Math.ceil(oldAmount) : Math.floor(oldAmount)
+
+    const cents = checkCents(oldAmount.toString().split('.')[1]?.substring(0, 2) ?? '00')
+
+    oldAmountComponent = (
+      <span aria-hidden='true' className={classesStrike} {...others}>
+        {getAmoutContent(wholeStrike, cents)}
       </span>
     )
   }
 
   if (amount) {
-    const isNegative = amount < 0
-    const absoluteAmount = Math.abs(amount)
-    const absoluteWhole = Math.floor(absoluteAmount)
-    const whole = isNegative ? -absoluteWhole : absoluteWhole
+    const whole = amount < 0 ? Math.ceil(amount) : Math.floor(amount)
 
-    let cents = checkCents(absoluteAmount.toString().split(/[.,]/)[1]?.substring(0, 2) || '')
-    cents = (cents && cents.length === 1 && `${cents}0`) || cents
-    const centsDisplayed = (!hideCents && `€${cents}`) || '€'
+    const cents = checkCents(amount.toString().split('.')[1]?.substring(0, 2) ?? '00')
 
     amountComponent = (
       <span aria-hidden='true' aria-label={accessibilityLabel} className={classes} {...others}>
-        <Text markup={TextMarkup.SPAN}>{`${whole}`}</Text>
-        <span className={hashClass(styled, clsx('price-details'))}>
-          <span className={hashClass(styled, clsx('cents'))}>
-            {centsDisplayed === '€' ? <>&nbsp;{centsDisplayed}</> : centsDisplayed}
-            {mention && <sup>{mention}</sup>}
-          </span>
-          {period && <span className={hashClass(styled, clsx('period'))}>/{period}</span>}
-        </span>
+        {getAmoutContent(whole, cents)}
       </span>
     )
   }
@@ -109,7 +99,7 @@ const Price = ({
         styled,
         clsx(
           'price-container',
-          is(`level-${level || '1'}`),
+          is(`level-${level}`),
           (align == Alignable.ALIGNED_START && is('justified-left')) ||
             (align == Alignable.ALIGNED_CENTER && is('justified-center')) ||
             (align == Alignable.ALIGNED_END && is('justified-right')) ||
@@ -120,7 +110,6 @@ const Price = ({
       {overline && <p className={hashClass(styled, clsx('overline'))}>{overline}</p>}
       {oldAmountComponent}
       {amountComponent}
-      {tagAmountComponent}
       {accessibilityLabel && <p className='sr-only'>{accessibilityLabel}</p>}
     </div>
   )

diff --git a/packages/react/components/price/PriceHelpers.ts b/packages/react/components/price/PriceHelpers.ts
@@ -1,7 +1,3 @@
 export const checkCents = (text: string): string => {
-  let result = text
-  if (text.length === 1) {
-    result += '0'
-  }
-  return result
+  return text.length === 1 ? `${text}0` : text
 }