Merge pull request #7788 from woocommerce/issue/7777-reply-to-reviews-ui

[Review Replies] Add reply button to product review detail

Author: rachelmcr

Experiments/Experiments/DefaultFeatureFlagService.swift

@@ -37,6 +37,8 @@ public struct DefaultFeatureFlagService: FeatureFlagService {
             return true
         case .orderCreationSearchCustomers:
             return buildConfig == .localDeveloper || buildConfig == .alpha
+        case .replyToProductReviews:
+            return buildConfig == .localDeveloper || buildConfig == .alpha
         default:
             return true
         }

Experiments/Experiments/FeatureFlag.swift

@@ -77,4 +77,8 @@ public enum FeatureFlag: Int {
     /// Enables the Search Customers functionality in the Order Creation screen
     ///
     case orderCreationSearchCustomers
+
+    /// Enables replying to product reviews
+    ///
+    case replyToProductReviews
 }

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -804,6 +804,12 @@ extension UIImage {
             .imageFlippedForRightToLeftLayoutDirection()
     }
 
+    /// Reply Icon
+    ///
+    static var replyImage: UIImage {
+        return UIImage.gridicon(.reply)
+    }
+
     /// Search Icon - used in `UIBarButtonItem`
     ///
     static var searchBarButtonItemImage: UIImage {

WooCommerce/Classes/ViewRelated/Reviews/Cells/NoteDetailsCommentTableViewCell.swift

@@ -56,6 +56,10 @@ final class NoteDetailsCommentTableViewCell: UITableViewCell {
     ///
     @IBOutlet private var approvalButton: UIButton!
 
+    /// Button: Reply
+    ///
+    @IBOutlet var replyButton: UIButton!
+
     /// Custom UIView: Rating star view
     ///
     @IBOutlet private var starRatingView: RatingView!
@@ -76,6 +80,10 @@ final class NoteDetailsCommentTableViewCell: UITableViewCell {
     ///
     var onUnapprove: (() -> Void)?
 
+    /// Closure to be executed whenever the Reply Button is pressed.
+    ///
+    var onReply: (() -> Void)?
+
 
     /// Indicates if the Spam Button is enabled (or not!)
     ///
@@ -123,6 +131,17 @@ final class NoteDetailsCommentTableViewCell: UITableViewCell {
         }
     }
 
+    /// Indicates if the Reply Button is enabled (or not!)
+    ///
+    var isReplyEnabled: Bool {
+        get {
+            return replyButton.isHidden
+        }
+        set {
+            replyButton.isHidden = !newValue
+        }
+    }
+
     /// Title: Usually displays the Author's Name.
     ///
     var titleText: String? {
@@ -222,6 +241,10 @@ private extension NoteDetailsCommentTableViewCell {
         approvalButton.accessibilityLabel = Approve.normalLabel
         approvalButton.accessibilityIdentifier = "single-review-approval-button"
 
+        replyButton.applyNoteDetailsActionStyle(icon: .replyImage)
+        replyButton.setTitle(Reply.normalTitle, for: .normal)
+        replyButton.accessibilityLabel = Reply.normalLabel
+        replyButton.accessibilityIdentifier = "single-review-reply-button"
     }
 
     func configureTitleLabel() {
@@ -240,7 +263,7 @@ private extension NoteDetailsCommentTableViewCell {
     /// Setup: Default Action(s) Style
     ///
     func configureDefaultAppearance() {
-        let buttons = [spamButton, trashButton, approvalButton].compactMap { $0 }
+        let buttons = [spamButton, trashButton, approvalButton, replyButton].compactMap { $0 }
 
         for button in buttons {
             refreshAppearance(button: button)
@@ -299,6 +322,13 @@ private extension NoteDetailsCommentTableViewCell {
 
         onClick?()
     }
+
+    /// Reply Button Callback
+    ///
+    @IBAction func replyWasPressed(_ sender: UIButton) {
+        sender.animateImageOverlay(style: .explosion)
+        onReply?()
+    }
 }
 
 
@@ -328,6 +358,14 @@ private struct Approve {
 }
 
 
+// MARK: - Reply Button: Strings!
+//
+private struct Reply {
+    static let normalTitle      = NSLocalizedString("Reply", comment: "Reply to a comment")
+    static let normalLabel      = NSLocalizedString("Opens a text view to reply to the comment", comment: "Reply to a comment. Spoken Hint.")
+}
+
+
 // MARK: - Star View: Defaults
 //
 private struct Star {

WooCommerce/Classes/ViewRelated/Reviews/Cells/NoteDetailsCommentTableViewCell.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="20037" 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="20020"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -49,13 +49,13 @@
                                         <rect key="frame" x="56" y="0.0" width="232" height="40"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="750" verticalHuggingPriority="249" horizontalCompressionResistancePriority="250" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MB2-nk-Fuo">
-                                                <rect key="frame" x="0.0" y="0.0" width="232" height="24"/>
+                                                <rect key="frame" x="0.0" y="0.0" width="232" height="25.5"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleHeadline"/>
                                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                 <nil key="highlightedColor"/>
                                             </label>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="750" horizontalCompressionResistancePriority="250" text="Subtitle" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontForContentSizeCategory="YES" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6d4-9R-dcK">
-                                                <rect key="frame" x="0.0" y="24" width="232" height="16"/>
+                                                <rect key="frame" x="0.0" y="25.5" width="232" height="14.5"/>
                                                 <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
                                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                 <nil key="highlightedColor"/>
@@ -98,15 +98,15 @@
                                 <rect key="frame" x="0.0" y="160" width="288" height="52"/>
                                 <subviews>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="qUJ-uA-W4N" customClass="VerticalButton" customModule="WooCommerce" customModuleProvider="target">
-                                        <rect key="frame" x="0.0" y="0.0" width="89.5" height="52"/>
+                                        <rect key="frame" x="0.0" y="0.0" width="64.5" height="52"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
                                         <state key="normal" title="Spam"/>
                                         <connections>
                                             <action selector="spamWasPressed:" destination="ba1-rz-4HV" eventType="touchUpInside" id="QoL-XB-ViB"/>
                                         </connections>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="6As-Iw-caM" customClass="VerticalButton" customModule="WooCommerce" customModuleProvider="target">
-                                        <rect key="frame" x="99.5" y="0.0" width="89" height="52"/>
+                                        <rect key="frame" x="74.5" y="0.0" width="64.5" height="52"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
                                         <state key="normal" title="Trash">
                                             <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
@@ -116,13 +116,22 @@
                                         </connections>
                                     </button>
                                     <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="uc0-Kk-Npt" customClass="VerticalButton" customModule="WooCommerce" customModuleProvider="target">
-                                        <rect key="frame" x="198.5" y="0.0" width="89.5" height="52"/>
+                                        <rect key="frame" x="149" y="0.0" width="64.5" height="52"/>
                                         <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
                                         <state key="normal" title="Approve"/>
                                         <connections>
                                             <action selector="approveWasPressed:" destination="ba1-rz-4HV" eventType="touchUpInside" id="XrG-F9-l5a"/>
                                         </connections>
                                     </button>
+                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="jZy-9J-G3f" userLabel="Reply Button" customClass="VerticalButton" customModule="WooCommerce" customModuleProvider="target">
+                                        <rect key="frame" x="223.5" y="0.0" width="64.5" height="52"/>
+                                        <fontDescription key="fontDescription" style="UICTFontTextStyleFootnote"/>
+                                        <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
+                                        <state key="normal" title="Reply"/>
+                                        <connections>
+                                            <action selector="replyWasPressed:" destination="ba1-rz-4HV" eventType="touchUpInside" id="jZu-dE-X4p"/>
+                                        </connections>
+                                    </button>
                                 </subviews>
                                 <constraints>
                                     <constraint firstAttribute="height" constant="52" id="gD3-cL-zcL"/>
@@ -143,6 +152,7 @@
                 <outlet property="approvalButton" destination="uc0-Kk-Npt" id="tZL-iM-Q2H"/>
                 <outlet property="detailsLabel" destination="6d4-9R-dcK" id="pCn-M7-He8"/>
                 <outlet property="gravatarImageView" destination="qcp-iw-3SL" id="e8j-K5-3V4"/>
+                <outlet property="replyButton" destination="jZy-9J-G3f" id="uvH-7W-9fm"/>
                 <outlet property="spamButton" destination="qUJ-uA-W4N" id="Gbe-6K-KhN"/>
                 <outlet property="starRatingView" destination="1Iy-55-tos" id="bcq-5i-2Gp"/>
                 <outlet property="textView" destination="FpQ-yp-a6e" id="qCC-ZC-o7p"/>

WooCommerce/Classes/ViewRelated/Reviews/ReviewDetailsViewController.swift

@@ -2,6 +2,7 @@ import UIKit
 import Yosemite
 import Gridicons
 import SafariServices
+import Experiments
 
 
 // MARK: - ReviewDetailsViewController
@@ -44,13 +45,16 @@ final class ReviewDetailsViewController: UIViewController {
     ///
     private var rows = [Row]()
 
+    private let featureFlagService: FeatureFlagService
+
     /// Designated Initializer
     ///
-    init(productReview: ProductReview, product: Product?, notification: Note?) {
+    init(productReview: ProductReview, product: Product?, notification: Note?, featureFlagService: FeatureFlagService = ServiceLocator.featureFlagService) {
         self.productReview = productReview
         self.siteID = productReview.siteID
         self.product = product
         self.notification = notification
+        self.featureFlagService = featureFlagService
         super.init(nibName: nil, bundle: nil)
     }
 
@@ -332,6 +336,7 @@ private extension ReviewDetailsViewController {
         commentCell.isTrashEnabled    = true
         commentCell.isSpamEnabled     = true
         commentCell.isApproveSelected = productReview.status == .approved
+        commentCell.isReplyEnabled    = featureFlagService.isFeatureFlagEnabled(.replyToProductReviews)
 
         let reviewID = productReview.reviewID
         let reviewSiteID = productReview.siteID
@@ -378,6 +383,10 @@ private extension ReviewDetailsViewController {
 
             self.moderateReview(siteID: reviewSiteID, reviewID: reviewID, doneStatus: .spam, undoStatus: .unspam)
         }
+
+        commentCell.onReply = {
+            // TODO: Open a text view to send a comment reply to the product review
+        }
     }
 }
 

WooCommerce/WooCommerceTests/Extensions/IconsTests.swift

@@ -668,4 +668,8 @@ final class IconsTests: XCTestCase {
     func test_lock_icon_is_not_nil() {
         XCTAssertNotNil(UIImage.lockImage)
     }
+
+    func test_reply_icon_is_not_nil() {
+        XCTAssertNotNil(UIImage.replyImage)
+    }
 }