Fix ProductPrice Component when no installments are passed.

vtex-apps · May 30, 2018 · 0062c9f · 0062c9f
1 parent c9a50e3
commit 0062c9f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 58 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Fix _ProductPrice_ Component when no Installments are passed.
 
 ## [1.3.0] - 2018-05-29
 ### Added

diff --git a/react/components/ProductPrice/index.js b/react/components/ProductPrice/index.js
@@ -21,17 +21,24 @@ class Price extends Component {
     showInstallments: false,
   }
 
-  render() {
+  currencyOptions = {
+    style: 'currency',
+    currency: this.context.culture.currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }
+
+  getInstallmentsNode() {
     const {
-      sellingPrice,
-      listPrice,
       installments,
-      showInstallments,
       showLabels,
-      showSavings,
       intl: { formatNumber },
     } = this.props
 
+    if (!installments || isEmpty(installments)) {
+      return null
+    }
+
     const noInterestRateInstallments = installments.filter(
       installment => !installment.InterestRate
     )
@@ -50,19 +57,9 @@ class Price extends Component {
           : current
     )
 
-    const differentPrices =
-      this.props.showListPrice && sellingPrice !== listPrice
-
-    const currencyOptions = {
-      style: 'currency',
-      currency: this.context.culture.currency,
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    }
-
     const formattedInstallmentPrice = formatNumber(
       installment.Value,
-      currencyOptions
+      this.currencyOptions
     )
 
     const [installmentsElement, installmentPriceElement, timesElement] = [
@@ -75,6 +72,46 @@ class Price extends Component {
       </span>
     ))
 
+    return (
+      <div className="vtex-price-installments__container">
+        <div className="vtex-price-installments dib">
+          {showLabels ? (
+            <FormattedMessage
+              id="pricing.installment-display"
+              values={{
+                installments: installmentsElement,
+                installmentPrice: installmentPriceElement,
+                times: timesElement,
+              }}
+            />
+          ) : (
+            <span>
+              {installmentsElement} {timesElement} {installmentPriceElement}
+            </span>
+          )}
+          {!installment.InterestRate && (
+            <span className="pl1">
+              <FormattedMessage id="pricing.interest-free" />
+            </span>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  render() {
+    const {
+      sellingPrice,
+      listPrice,
+      showInstallments,
+      showLabels,
+      showSavings,
+      intl: { formatNumber },
+    } = this.props
+
+    const differentPrices =
+      this.props.showListPrice && sellingPrice !== listPrice
+
     return (
       <div className="vtex-price flex flex-column justify-around">
         {differentPrices && (
@@ -85,7 +122,7 @@ class Price extends Component {
               </div>
             )}
             <div className="vtex-price-list dib ph2 strike">
-              {formatNumber(listPrice, currencyOptions)}
+              {formatNumber(listPrice, this.currencyOptions)}
             </div>
           </div>
         )}
@@ -96,52 +133,26 @@ class Price extends Component {
             </div>
           )}
           <div className="vtex-price-selling dib ph2">
-            {formatNumber(sellingPrice, currencyOptions)}
+            {formatNumber(sellingPrice, this.currencyOptions)}
           </div>
         </div>
-        {showInstallments &&
-          installment && (
-            <div className="vtex-price-installments__container">
-              <div className="vtex-price-installments dib">
-                {showLabels ? (
-                  <FormattedMessage
-                    id="pricing.installment-display"
-                    values={{
-                      installments: installmentsElement,
-                      installmentPrice: installmentPriceElement,
-                      times: timesElement,
-                    }}
-                  />
-                ) : (
-                  <span>
-                    {installmentsElement} {timesElement}{' '}
-                    {installmentPriceElement}
-                  </span>
-                )}
-                {!installment.InterestRate && (
-                  <span className="pl1">
-                    <FormattedMessage id="pricing.interest-free" />
-                  </span>
-                )}
-              </div>
-            </div>
-          )}
+        {showInstallments && this.getInstallmentsNode()}
         {differentPrices &&
           showSavings && (
-            <div className="vtex-price-savings__container">
-              <div className="vtex-price-savings dib">
-                <FormattedMessage
-                  id="pricing.savings"
-                  values={{
-                    savings: formatNumber(
-                      listPrice - sellingPrice,
-                      currencyOptions
-                    ),
-                  }}
-                />
-              </div>
+          <div className="vtex-price-savings__container">
+            <div className="vtex-price-savings dib">
+              <FormattedMessage
+                id="pricing.savings"
+                values={{
+                  savings: formatNumber(
+                    listPrice - sellingPrice,
+                    this.currencyOptions
+                  ),
+                }}
+              />
             </div>
-          )}
+          </div>
+        )}
       </div>
     )
   }