Merge pull request #6171 from woocommerce/issue/5765-performance-section-loading-indicators

Coupons: Improve UX for the Performance section on Coupon Details screen

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Coupons/CouponDetails/CouponDetails.swift

@@ -83,14 +83,20 @@ struct CouponDetails: View {
                                     .secondaryBodyStyle()
                                 Text(viewModel.discountedOrdersCount)
                                     .font(.title)
+                                Spacer()
                             }
                             .frame(maxWidth: .infinity, alignment: .leading)
 
                             VStack(alignment: .leading, spacing: Constants.verticalSpacing) {
                                 Text(Localization.amount)
                                     .secondaryBodyStyle()
-                                Text(viewModel.discountedAmount)
-                                    .font(.title)
+                                if let amount = viewModel.discountedAmount {
+                                    Text(amount)
+                                        .font(.title)
+                                } else {
+                                    ActivityIndicator(isAnimating: .constant(true), style: .medium)
+                                }
+                                Spacer()
                             }
                             .padding(.leading, Constants.margin)
                             .frame(maxWidth: .infinity, alignment: .leading)

WooCommerce/Classes/ViewRelated/Coupons/CouponDetails/CouponDetailsViewModel.swift

@@ -42,7 +42,7 @@ final class CouponDetailsViewModel: ObservableObject {
 
     /// Total amount deducted from orders that applied the coupon
     ///
-    @Published private(set) var discountedAmount: String = ""
+    @Published private(set) var discountedAmount: String?
 
     /// The current coupon
     ///
@@ -61,7 +61,6 @@ final class CouponDetailsViewModel: ObservableObject {
         self.coupon = coupon
         self.stores = stores
         self.currencySettings = currencySettings
-        self.discountedAmount = formatStringAmount("0")
         populateDetails()
     }
 
@@ -102,6 +101,10 @@ private extension CouponDetailsViewModel {
     func populateDetails() {
         couponCode = coupon.code
         description = coupon.description
+        discountedOrdersCount = "\(coupon.usageCount)"
+        if coupon.usageCount == 0 {
+            discountedAmount = formatStringAmount("0")
+        }
 
         switch coupon.discountType {
         case .percent:

WooCommerce/WooCommerceTests/ViewRelated/Coupons/CouponDetailsViewModelTests.swift

@@ -144,10 +144,10 @@ final class CouponDetailsViewModelTests: XCTestCase {
         XCTAssertEqual(viewModel.amount, "10%")
     }
 
-    func test_coupon_performance_is_correct() {
+    func test_coupon_performance_is_correct_with_usage_count_equal_to_0() {
         // Given
-        let sampleCoupon = Coupon.fake()
-        let sampleReport = CouponReport.fake().copy(amount: 220.0, ordersCount: 10)
+        let sampleCoupon = Coupon.fake().copy(usageCount: 0)
+        let sampleReport = CouponReport.fake().copy(amount: 0, ordersCount: 0)
         let stores = MockStoresManager(sessionManager: .makeForTesting())
         let viewModel = CouponDetailsViewModel(coupon: sampleCoupon, stores: stores, currencySettings: CurrencySettings())
         XCTAssertEqual(viewModel.discountedOrdersCount, "0")
@@ -164,6 +164,31 @@ final class CouponDetailsViewModelTests: XCTestCase {
         }
         viewModel.loadCouponReport()
 
+        // Then
+        XCTAssertEqual(viewModel.discountedOrdersCount, "0")
+        XCTAssertEqual(viewModel.discountedAmount, "$0.00")
+    }
+
+    func test_coupon_performance_is_correct_with_usage_count_larger_than_0() {
+        // Given
+        let sampleCoupon = Coupon.fake().copy(usageCount: 10)
+        let sampleReport = CouponReport.fake().copy(amount: 220.0, ordersCount: 10)
+        let stores = MockStoresManager(sessionManager: .makeForTesting())
+        let viewModel = CouponDetailsViewModel(coupon: sampleCoupon, stores: stores, currencySettings: CurrencySettings())
+        XCTAssertEqual(viewModel.discountedOrdersCount, "10")
+        XCTAssertEqual(viewModel.discountedAmount, nil)
+
+        // When
+        stores.whenReceivingAction(ofType: CouponAction.self) { action in
+            switch action {
+            case let .loadCouponReport(_, _, _, onCompletion):
+                onCompletion(.success(sampleReport))
+            default:
+                break
+            }
+        }
+        viewModel.loadCouponReport()
+
         // Then
         XCTAssertEqual(viewModel.discountedOrdersCount, "10")
         XCTAssertEqual(viewModel.discountedAmount, "$220.00")