Merge pull request #45 from mercadolibre/feature/discount-view

Feature/discount view

CHANGELOG.md

@@ -1,6 +1,7 @@
 # v1.8
 🚀 1.8 🚀
 - Added discount tracker and tracking functionality.
+- Discount Box component refactor.
 
 # v1.7
 🚀 1.7 🚀

Example/Example_BusinessComponents/MockData/DiscountData.swift

@@ -10,8 +10,15 @@ import UIKit
 import MLBusinessComponents
 
 class DiscountData: NSObject, MLBusinessDiscountBoxData {
+
+    private let numberOfItems: Int
+
+    init(numberOfItems: Int = 5) {
+        self.numberOfItems = 5 - (min(numberOfItems, 6) - 1)
+    }
+
     func getTitle() -> String? {
-        return "200 descuentos"
+        return Bool.random() ? "200 descuentos" : nil
     }
 
     func getSubtitle() -> String? {
@@ -21,12 +28,27 @@ class DiscountData: NSObject, MLBusinessDiscountBoxData {
     func getItems() -> [MLBusinessSingleItemProtocol] {
         var array: [MLBusinessSingleItemProtocol] = [MLBusinessSingleItemProtocol]()
         array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/McDonald%27s_Golden_Arches.svg/1200px-McDonald%27s_Golden_Arches.svg.png", deepLink: "meli://home"))
-        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRY0eFECzyTCa83gOV3smCYDOSIggdUxSPirwtt5rS3LcWlzefo", deepLink: "meli://home", eventData: ["trackingId":"1"]))
-        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://upload.wikimedia.org/wikipedia/commons/b/b3/Logo-freddo.jpg", eventData: ["trackingId":"2"]))
-        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://urbancomunicacion.com/wp-content/uploads/2017/04/Logotipos-famosos-Starbucks-Urban-comunicacion-1.png", deepLink: "meli://home", eventData: ["trackingId":"3"]))
-        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://i0.wp.com/larchmontla.com/ui/wp-content/uploads/2011/01/images_le-pain-quotidien.gif", deepLink: "meli://home", eventData: ["trackingId":"4"]))
-        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://pbs.twimg.com/profile_images/1124417403566395394/9Wuzg8pf.png", eventData: ["trackingId":"5"]))
-        return array
+        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRY0eFECzyTCa83gOV3smCYDOSIggdUxSPirwtt5rS3LcWlzefo", deepLink: "meli://home"))
+        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://upload.wikimedia.org/wikipedia/commons/b/b3/Logo-freddo.jpg", deepLink: "meli://home"))
+        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://urbancomunicacion.com/wp-content/uploads/2017/04/Logotipos-famosos-Starbucks-Urban-comunicacion-1.png", deepLink: "meli://home"))
+        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://i0.wp.com/larchmontla.com/ui/wp-content/uploads/2011/01/images_le-pain-quotidien.gif", deepLink: "meli://home"))
+        array.append(SingleItemData(title: "Hasta", subtitle: "$ 200", iconImageUrl: "https://pbs.twimg.com/profile_images/1124417403566395394/9Wuzg8pf.png", deepLink: "meli://home"))
+        return Array(array.suffix(from: numberOfItems)).shift(withDistance: Int.random(in: 1...5))
+    }
+}
+
+private extension Array {
+    func shift(withDistance distance: Int = 1) -> Array<Element> {
+        let offsetIndex = distance >= 0 ?
+            self.index(startIndex, offsetBy: distance, limitedBy: endIndex) :
+            self.index(endIndex, offsetBy: distance, limitedBy: startIndex)
+
+        guard let index = offsetIndex else { return self }
+        return Array(self[index ..< endIndex] + self[startIndex ..< index])
+    }
+
+    mutating func shiftInPlace(withDistance distance: Int = 1) {
+        self = shift(withDistance: distance)
     }
 
     func getDiscountTracker() -> MLBusinessDiscountTrackerProtocol? {

Example/Example_BusinessComponents/ViewController.swift

@@ -32,12 +32,12 @@ extension ViewController {
         let newRingView = setupRingView()
         self.ringView = newRingView
         let dividingLineView = setupDividingLineView(bottomOf: newRingView)
-        let discountView = setupDiscountView(bottomOf: dividingLineView)
+        let itemDescriptionView = setupItemDescriptionView(bottomOf: dividingLineView)
+        let crossSellingBoxView = setupCrossSellingBoxView(bottomOf: itemDescriptionView)
+        let discountView = setupDiscountView(numberOfItems: 6, bottomOf: crossSellingBoxView)
         let downloadAppView = setupDownloadAppView(bottomOf: discountView)
-        let crossSellingBoxView = setupCrossSellingBoxView(bottomOf: downloadAppView)
-        let loyaltyHeaderView = setupLoyaltyHeaderView(bottomOf: crossSellingBoxView)
-        let itemDescriptionView = setupItemDescriptionView(bottomOf: loyaltyHeaderView)
-        let animatedButtonView = setupAnimatedButtonView(bottomOf: itemDescriptionView)
+        let loyaltyHeaderView = setupLoyaltyHeaderView(bottomOf: downloadAppView)
+        let animatedButtonView = setupAnimatedButtonView(bottomOf: loyaltyHeaderView)
 
         animatedButtonView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -64).isActive = true
     }
@@ -68,26 +68,20 @@ extension ViewController {
             dividingLineView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -32),
             dividingLineView.topAnchor.constraint(equalTo: targetView.bottomAnchor, constant: 20)
         ])
-
         return dividingLineView
     }
 
-    private func setupDiscountView(bottomOf targetView: UIView) -> MLBusinessDiscountBoxView {
-        let discountView = MLBusinessDiscountBoxView(DiscountData())
+    private func setupDiscountView(numberOfItems: Int, bottomOf targetView: UIView) -> MLBusinessDiscountBoxView {
+        let discountView = MLBusinessDiscountBoxView(DiscountData(numberOfItems: numberOfItems))
         containerView.addSubview(discountView)
         NSLayoutConstraint.activate([
             discountView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
             discountView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -16),
             discountView.topAnchor.constraint(equalTo: targetView.bottomAnchor, constant: 16)
         ])
-
         discountView.addTapAction { (selectedIndex, deepLink, trackId) in
-            // To test update data feature.
-            if selectedIndex == 0 {
-                // discountView.update(DiscountDataForTestUpdate())
-            } else {
-                // discountView.update(DiscountData())
-            }
+            print("EBC: index \(selectedIndex), deeplink: \(deepLink ?? ""), trackId: \(trackId ?? "")")
+            discountView.update(DiscountData(numberOfItems: Int.random(in: 1...6)))
         }
         return discountView
     }

Source/Components/CrossSelling/MLBusinessCrossSellingBoxView.swift

@@ -49,7 +49,9 @@ extension MLBusinessCrossSellingBoxView {
 
     private func buildIconImage() -> UIImageView {
         let icon = UIImageView()
-        icon.setRemoteImage(imageUrl: viewData.getIconUrl(), placeHolderRadius: iconImageSize/2)
+        icon.layer.cornerRadius =  iconImageSize / 2
+        icon.layer.masksToBounds = true
+        icon.setRemoteImage(imageUrl: viewData.getIconUrl())
         icon.translatesAutoresizingMaskIntoConstraints = false
         icon.contentMode = .scaleAspectFit
         self.addSubview(icon)

Source/Components/Discount/Internal/MLBusinessDiscountSingleItemView.swift

@@ -10,7 +10,7 @@ import Foundation
 import UIKit
 import MLUI
 
-final class MLBusinessDiscountSingleItemView: UIView {
+final class MLBusinessDiscountSingleItemView: PressableView {
     static let itemHeight: CGFloat = 128
     static let iconImageSize: CGFloat = 56
     private let iconCornerRadius: CGFloat = 28
@@ -26,6 +26,8 @@ final class MLBusinessDiscountSingleItemView: UIView {
         self.itemIndex = itemIndex
         self.itemSection = itemSection
         super.init(frame: .zero)
+        self.pressableDelegate = self
+        self.pressableAnimator = HightlightViewAnimator()
         render()
     }
 
@@ -46,13 +48,10 @@ extension MLBusinessDiscountSingleItemView {
         self.layer.cornerRadius = 6
 
         let icon: UIImageView = UIImageView()
+        icon.layer.cornerRadius = iconCornerRadius
+        icon.layer.masksToBounds = true
         icon.prepareForAutolayout(.clear)
-        icon.setRemoteImage(imageUrl: discountSingleItem.iconImageUrlForItem(), placeHolderRadius: iconCornerRadius, success: { [weak self] _ in
-            if let weakSelf = self {
-                icon.layer.cornerRadius = weakSelf.iconCornerRadius
-                icon.layer.masksToBounds = true
-            }
-        })
+        icon.setRemoteImage(imageUrl: discountSingleItem.iconImageUrlForItem())
 
         self.addSubview(icon)
         icon.contentMode = .scaleAspectFill
@@ -103,23 +102,29 @@ extension MLBusinessDiscountSingleItemView {
             iconOverlay.widthAnchor.constraint(equalToConstant: MLBusinessDiscountSingleItemView.iconImageSize),
             iconOverlay.topAnchor.constraint(equalTo: self.topAnchor, constant: itemHeightMargin),
             iconOverlay.centerXAnchor.constraint(equalTo: self.centerXAnchor)
-            ])
-
-        let tapGesture = UILongPressGestureRecognizer(target: self, action: #selector(self.didTapOnButton))
-        tapGesture.minimumPressDuration = 0
-        self.addGestureRecognizer(tapGesture)
+        ])
     }
+}
 
-    // MARK: Tap Selector
-    @objc private func didTapOnButton(gesture: UITapGestureRecognizer) {
-        if gesture.state == UITapGestureRecognizer.State.began {
-            if self.discountSingleItem.deepLinkForItem() != nil {
-                self.backgroundColor = UIColor(red:0.96, green:0.96, blue:0.96, alpha:1.0)
-            }
+extension MLBusinessDiscountSingleItemView: PressableDelegate {
+    func didTap(view: PressableView) {
+        if let _ = discountSingleItem.deepLinkForItem() {
             delegate?.didTap(item: discountSingleItem, index: itemIndex, section: itemSection)
-        } else if gesture.state == UITapGestureRecognizer.State.ended {
-            self.backgroundColor = .white
         }
     }
+}
 
+private class HightlightViewAnimator: PressableAnimator {
+    var selectedColor: UIColor? = UIColor(white: 0, alpha: 0.04)
+    var unselectedColor: UIColor? = .clear
+
+    func animate(view: PressableView, highlighted: Bool) {
+        if highlighted {
+            view.backgroundColor = selectedColor
+        } else {
+            UIView.animate(withDuration: 0.3, animations: {
+                view.backgroundColor = self.unselectedColor
+            })
+        }
+    }
 }