Separate logic from layout of Installments component

vtex-apps · Jul 22, 2020 · a232bdc · a232bdc
1 parent a653505
commit a232bdc
Showing 1 changed file with 11 additions and 61 deletions.
diff --git a/react/Installments.tsx b/react/Installments.tsx
@@ -1,11 +1,9 @@
 import React, { useContext } from 'react'
-import { defineMessages, FormattedNumber } from 'react-intl'
+import { defineMessages } from 'react-intl'
 import { ProductContext } from 'vtex.product-context'
-import { FormattedCurrency } from 'vtex.format-currency'
-import { useCssHandles } from 'vtex.css-handles'
-import { IOMessageWithMarkers } from 'vtex.native-types'
 
 import { StorefrontFC, BasicPriceProps } from './types'
+import InstallmentsRenderer from './components/InstallmentsRenderer'
 
 interface Installment {
   Value: number
@@ -14,79 +12,31 @@ interface Installment {
   NumberOfInstallments: number
 }
 
-const CSS_HANDLES = [
-  'installments',
-  'installmentsNumber',
-  'installmentValue',
-  'installmentsTotalValue',
-  'interestRate',
-] as const
-
 const Installments: StorefrontFC<BasicPriceProps> = props => {
   const { message, markers } = props
-  const handles = useCssHandles(CSS_HANDLES)
   const { selectedItem } = useContext(ProductContext)
-
-  const commercialOffer = selectedItem?.sellers[0]?.commertialOffer
+  const commertialOffer = selectedItem?.sellers[0]?.commertialOffer
   if (
-    !commercialOffer?.Installments ||
-    commercialOffer?.Installments?.length === 0
+    !commertialOffer?.Installments ||
+    commertialOffer?.Installments?.length === 0
   ) {
     return null
   }
 
-  const {
-    Value,
-    InterestRate,
-    TotalValuePlusInterestRate,
-    NumberOfInstallments,
-  } = commercialOffer.Installments.reduce(
+  const installments = commertialOffer.Installments.reduce(
     (previous: Installment, current: Installment) =>
       previous.NumberOfInstallments > current.NumberOfInstallments
         ? previous
         : current,
     {}
   )
 
-  const hasInterest = InterestRate !== 0
-
   return (
-    <span className={handles.installments}>
-      <IOMessageWithMarkers
-        message={message}
-        markers={markers}
-        handleBase="installments"
-        values={{
-          installmentsNumber: (
-            <span
-              key="installmentsNumber"
-              className={handles.installmentsNumber}
-            >
-              <FormattedNumber value={NumberOfInstallments} />
-            </span>
-          ),
-          installmentValue: (
-            <span key="installmentValue" className={handles.installmentValue}>
-              <FormattedCurrency value={Value} />
-            </span>
-          ),
-          installmentsTotalValue: (
-            <span
-              key="installmentsTotalValue"
-              className={handles.installmentsTotalValue}
-            >
-              <FormattedCurrency value={TotalValuePlusInterestRate} />
-            </span>
-          ),
-          interestRate: (
-            <span key="interestRate" className={handles.interestRate}>
-              <FormattedNumber value={InterestRate} style="percent" />
-            </span>
-          ),
-          hasInterest,
-        }}
-      />
-    </span>
+    <InstallmentsRenderer
+      message={message}
+      markers={markers}
+      installments={installments}
+    />
   )
 }