Merge pull request #9778 from woocommerce/issue/8962-product-bundle-ui

[Product Bundles] Display product bundle hierarchy in order details

Author: rachelmcr

RELEASE-NOTES.txt

@@ -2,6 +2,7 @@
 
 13.8
 -----
+- [Internal] Orders: Bundled products (within a product bundle) are now indented, to show their relationship to the parent bundle. [https://github.com/woocommerce/woocommerce-ios/pull/9778]
 - [*] Add Products: A new view is display to celebrate when the first product is created in a store. [https://github.com/woocommerce/woocommerce-ios/pull/9790]
 - [*] Product form: a share action is shown in the navigation bar if the product can be shared and no more than one action is displayed, in addition to the more menu > Share. [https://github.com/woocommerce/woocommerce-ios/pull/9789]
 

WooCommerce/Classes/Tools/AggregateData/AggregateDataHelper.swift

@@ -142,4 +142,11 @@ final class AggregateDataHelper {
 
         return filtered.sorted()
     }
+
+    static func isChildItemWithParent(_ item: AggregateOrderItem, in items: [AggregateOrderItem]) -> Bool {
+        guard let parentID = item.parent else {
+            return false
+        }
+        return items.contains(where: { $0.itemID == parentID.description })
+    }
 }

WooCommerce/Classes/ViewModels/Order Details/OrderDetailsDataSource.swift

@@ -815,9 +815,11 @@ private extension OrderDetailsDataSource {
         }()
 
         let addOns = filterAddOns(of: aggregateItem)
+        let isChildWithParent = AggregateDataHelper.isChildItemWithParent(aggregateItem, in: aggregateOrderItems)
         let itemViewModel = ProductDetailsCellViewModel(aggregateItem: aggregateItem.copy(imageURL: imageURL),
                                                         currency: order.currency,
-                                                        hasAddOns: addOns.isNotEmpty)
+                                                        hasAddOns: addOns.isNotEmpty,
+                                                        isChildWithParent: isChildWithParent)
 
         cell.configure(item: itemViewModel, imageService: imageService)
         cell.accessibilityIdentifier = "single-product-cell"

WooCommerce/Classes/ViewModels/Order Details/Refunded Products/RefundedProductsDataSource.swift

@@ -113,10 +113,12 @@ private extension RefundedProductsDataSource {
     func configureRefundedProduct(_ cell: ProductDetailsTableViewCell, at indexPath: IndexPath) {
         let refundedProduct = refundedProducts[indexPath.row]
         let product = lookUpProduct(by: refundedProduct.productOrVariationID)
+        let isChildWithParent = AggregateDataHelper.isChildItemWithParent(refundedProduct, in: refundedProducts)
         let refundedProductViewModel = ProductDetailsCellViewModel(aggregateItem: refundedProduct,
-                                                                    currency: order.currency,
-                                                                    product: product,
-                                                                    hasAddOns: false)
+                                                                   currency: order.currency,
+                                                                   product: product,
+                                                                   hasAddOns: false,
+                                                                   isChildWithParent: isChildWithParent)
         let imageService = ServiceLocator.imageService
 
         cell.selectionStyle = .default

WooCommerce/Classes/ViewModels/Order Details/Refunded Products/RefundedProductsViewModel.swift

@@ -16,8 +16,7 @@ final class RefundedProductsViewModel {
     /// The datasource that will be used to render the Refunded Products screen.
     ///
     private(set) lazy var dataSource: RefundedProductsDataSource = {
-        let sortedItems = refundedProducts.sorted(by: { ($0.productID, $0.variationID) < ($1.productID, $1.variationID) })
-        return RefundedProductsDataSource(order: order, refundedProducts: sortedItems)
+        RefundedProductsDataSource(order: order, refundedProducts: refundedProducts)
     }()
 
     /// Designated initializer.

WooCommerce/Classes/ViewModels/ProductDetailsCellViewModel.swift

@@ -79,6 +79,10 @@ struct ProductDetailsCellViewModel {
     ///
     let hasAddOns: Bool
 
+    /// Whether the item is a child with a parent item.
+    ///
+    let isChildProduct: Bool
+
     // MARK: - Initializers
 
     private init(currency: String,
@@ -90,7 +94,8 @@ struct ProductDetailsCellViewModel {
                  price: NSDecimalNumber?,
                  skuText: String?,
                  attributes: [VariationAttributeViewModel],
-                 hasAddOns: Bool) {
+                 hasAddOns: Bool,
+                 isChildProduct: Bool) {
         self.imageURL = imageURL
         self.name = name
         let quantity = NumberFormatter.localizedString(from: positiveQuantity as NSDecimalNumber, number: .decimal)
@@ -117,6 +122,8 @@ struct ProductDetailsCellViewModel {
             let itemPrice = currencyFormatter.formatAmount(price, with: currency) ?? String()
             return Localization.subtitle(quantity: quantity, price: itemPrice, attributes: attributes)
         }()
+
+        self.isChildProduct = isChildProduct
     }
 
     /// Order Item initializer
@@ -125,7 +132,8 @@ struct ProductDetailsCellViewModel {
          currency: String,
          formatter: CurrencyFormatter = CurrencyFormatter(currencySettings: ServiceLocator.currencySettings),
          product: Product? = nil,
-         hasAddOns: Bool) {
+         hasAddOns: Bool,
+         isChildWithParent: Bool) {
         self.init(currency: currency,
                   currencyFormatter: formatter,
                   imageURL: product?.imageURL,
@@ -135,7 +143,8 @@ struct ProductDetailsCellViewModel {
                   price: item.price,
                   skuText: item.sku,
                   attributes: item.attributes.map { VariationAttributeViewModel(orderItemAttribute: $0) },
-                  hasAddOns: hasAddOns)
+                  hasAddOns: hasAddOns,
+                  isChildProduct: isChildWithParent)
     }
 
     /// Aggregate Order Item initializer
@@ -144,7 +153,8 @@ struct ProductDetailsCellViewModel {
          currency: String,
          formatter: CurrencyFormatter = CurrencyFormatter(currencySettings: ServiceLocator.currencySettings),
          product: Product? = nil,
-         hasAddOns: Bool) {
+         hasAddOns: Bool,
+         isChildWithParent: Bool) {
         self.init(currency: currency,
                   currencyFormatter: formatter,
                   imageURL: aggregateItem.imageURL ?? product?.imageURL,
@@ -154,7 +164,8 @@ struct ProductDetailsCellViewModel {
                   price: aggregateItem.price,
                   skuText: aggregateItem.sku,
                   attributes: aggregateItem.attributes.map { VariationAttributeViewModel(orderItemAttribute: $0) },
-                  hasAddOns: hasAddOns)
+                  hasAddOns: hasAddOns,
+                  isChildProduct: isChildWithParent)
     }
 
     /// Refunded Order Item initializer
@@ -172,7 +183,8 @@ struct ProductDetailsCellViewModel {
                   price: refundedItem.price,
                   skuText: refundedItem.sku,
                   attributes: [], // Attributes are not supported for a refund item yet.
-                  hasAddOns: false) // AddOns are not supported for a refund item yet.
+                  hasAddOns: false, // AddOns are not supported for a refund item yet.
+                  isChildProduct: false) // Parent/child relationships are not supported for a refund item.
     }
 }
 

WooCommerce/Classes/ViewRelated/Orders/Order Details/Product List Section/Product Details/AggregatedProductListViewController.swift

@@ -73,10 +73,12 @@ extension AggregatedProductListViewController: UITableViewDataSource {
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         let item = itemAtIndexPath(indexPath)
         let product = viewModel.lookUpProduct(by: item.productOrVariationID)
+        let isChildWithParent = AggregateDataHelper.isChildItemWithParent(item, in: items)
         let itemViewModel = ProductDetailsCellViewModel(aggregateItem: item,
                                                         currency: viewModel.order.currency,
                                                         product: product,
-                                                        hasAddOns: false)
+                                                        hasAddOns: false,
+                                                        isChildWithParent: isChildWithParent)
         let cell = tableView.dequeueReusableCell(PickListTableViewCell.self, for: indexPath)
         cell.selectionStyle = .default
         cell.configure(item: itemViewModel, imageService: imageService)

WooCommerce/Classes/ViewRelated/Orders/Order Details/Product List Section/ProductDetailsTableViewCell.swift

@@ -40,6 +40,10 @@ final class ProductDetailsTableViewCell: UITableViewCell {
     ///
     @IBOutlet private var viewAddOnsIndicator: UIImageView!
 
+    /// The leading constraint for the productImageView.
+    ///
+    @IBOutlet var productImageLeadingConstraint: NSLayoutConstraint!
+
     /// Assign this closure to be notified when the "viewAddOns" button us tapped
     ///
     var onViewAddOnsTouchUp: (() -> Void)?
@@ -124,6 +128,16 @@ private extension ProductDetailsTableViewCell {
     func configureSelectionStyle() {
         selectionStyle = .none
     }
+
+    /// Adds padding between the leading margin and the product image if the product is a child product.
+    ///
+    func configureChildProductPadding(isChildProduct: Bool) {
+        if isChildProduct {
+            productImageLeadingConstraint.constant = Constants.childProductLeadingPadding
+        } else {
+            productImageLeadingConstraint.constant = 0
+        }
+    }
 }
 
 
@@ -144,6 +158,7 @@ extension ProductDetailsTableViewCell {
         subtitleLabel.text = item.subtitle
         skuLabel.text = item.sku
         viewAddOnsStackView.isHidden = !item.hasAddOns
+        configureChildProductPadding(isChildProduct: item.isChildProduct)
     }
 }
 
@@ -152,4 +167,8 @@ private extension ProductDetailsTableViewCell {
     enum Localization {
         static let viewAddOns = NSLocalizedString("View Add-Ons", comment: "Title of the button on the order detail item to navigate to add-ons")
     }
+
+    enum Constants {
+        static let childProductLeadingPadding: CGFloat = 44
+    }
 }

WooCommerce/Classes/ViewRelated/Orders/Order Details/Product List Section/ProductDetailsTableViewCell.xib

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -107,6 +107,7 @@
             <connections>
                 <outlet property="nameLabel" destination="14R-zK-tgC" id="LmK-XT-zbU"/>
                 <outlet property="priceLabel" destination="pPE-SE-pY7" id="ir4-Ou-SuU"/>
+                <outlet property="productImageLeadingConstraint" destination="WkU-sH-Aqw" id="tnC-rs-zLU"/>
                 <outlet property="productImageView" destination="p6h-Fq-FjW" id="bIw-1F-5GW"/>
                 <outlet property="skuLabel" destination="7JH-rt-n9v" id="U07-2n-W3b"/>
                 <outlet property="subtitleLabel" destination="IBM-H2-zE2" id="acc-K8-vmg"/>

WooCommerce/Classes/ViewRelated/Orders/Order Details/Review Order/ReviewOrderViewModel.swift

@@ -198,7 +198,12 @@ extension ReviewOrderViewModel {
     func productDetailsCellViewModel(for item: AggregateOrderItem) -> ProductDetailsCellViewModel {
         let product = filterProduct(for: item)
         let addOns = filterAddons(for: item)
-        return ProductDetailsCellViewModel(aggregateItem: item, currency: order.currency, product: product, hasAddOns: !addOns.isEmpty)
+        let isChildWithParent = AggregateDataHelper.isChildItemWithParent(item, in: aggregateOrderItems)
+        return ProductDetailsCellViewModel(aggregateItem: item,
+                                           currency: order.currency,
+                                           product: product,
+                                           hasAddOns: !addOns.isEmpty,
+                                           isChildWithParent: isChildWithParent)
     }
 
     /// Get shipment tracking at specified index of order.