Merge pull request #6522 from woocommerce/issue/6487-coupon-details-update

Coupons: Update coupon details screen following the updated design

Author: itsmeichigo

RELEASE-NOTES.txt

@@ -3,6 +3,7 @@
 8.9
 -----
 - [*] Coupons: Fixed issue loading the coupon list from the local storage on initial load. [https://github.com/woocommerce/woocommerce-ios/pull/6463]
+- [*] Coupons: Update layout of the coupon details screen. [https://github.com/woocommerce/woocommerce-ios/pull/6522]
 - [*] In-Person Payments: Removed collecting L2/L3 data. [https://github.com/woocommerce/woocommerce-ios/pull/6519]
 - [*] Hub Menu: Multiple menu items can no longer be tapped simultaneously. [https://github.com/woocommerce/woocommerce-ios/pull/6484]
 - [*] Jetpack CP: Fixed crash when attempting to access WP-Admin with an invalid URL that has an unsupported scheme. [https://github.com/woocommerce/woocommerce-ios/pull/6502]

WooCommerce/Classes/Model/Coupon+Woo.swift

@@ -115,7 +115,7 @@ extension Coupon {
 
     /// Formatted amount for the coupon
     ///
-    private func formattedAmount(currencySettings: CurrencySettings) -> String {
+    func formattedAmount(currencySettings: CurrencySettings) -> String {
         var amountString: String = ""
         switch discountType {
         case .percent:

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

@@ -9,7 +9,7 @@ final class CouponDetailsHostingController: UIHostingController<CouponDetails> {
         super.init(rootView: CouponDetails(viewModel: viewModel, onDeletion: onDeletion))
         // The navigation title is set here instead of the SwiftUI view's `navigationTitle`
         // to avoid the blinking of the title label when pushed from UIKit view.
-        title = NSLocalizedString("Coupon", comment: "Title of Coupon Details screen")
+        title = viewModel.couponCode
 
         // Set presenting view controller to show the notice presenter here
         rootView.noticePresenter.presentingViewController = self
@@ -50,16 +50,6 @@ struct CouponDetails: View {
         ServiceLocator.analytics.track(.couponDetails, withProperties: ["action": "loaded"])
     }
 
-    private var detailRows: [DetailRow] {
-        [
-            .init(title: Localization.couponCode, content: viewModel.couponCode, action: {}),
-            .init(title: Localization.description, content: viewModel.description, action: {}),
-            .init(title: Localization.discount, content: viewModel.amount, action: {}),
-            .init(title: Localization.applyTo, content: viewModel.productsAppliedTo, action: {}),
-            .init(title: Localization.expiryDate, content: viewModel.expiryDate, action: {})
-        ]
-    }
-
     private var actionSheetButtons: [Alert.Button] {
         var buttons: [Alert.Button] =
         [
@@ -111,11 +101,41 @@ struct CouponDetails: View {
                             ShareSheet(activityItems: [viewModel.shareMessage])
                         }
 
+                    VStack(alignment: .leading, spacing: Constants.verticalSpacing) {
+                        Text(viewModel.couponCode)
+                            .font(.title2)
+                            .bold()
+                        StatusView(label: viewModel.expiryStatus,
+                                   backgroundColor: viewModel.expiryStatusBackgroundColor)
+                    }
+                    .padding(.horizontal, insets: geometry.safeAreaInsets)
+                    .padding(.horizontal, Constants.margin)
+                    .padding(.vertical, Constants.summarySectionVerticalSpacing)
+
+                    Text(viewModel.description)
+                        .bold()
+                        .footnoteStyle()
+                        .renderedIf(viewModel.description.isNotEmpty)
+                        .padding(.horizontal, insets: geometry.safeAreaInsets)
+                        .padding(.horizontal, Constants.margin)
+                        .padding(.bottom, Constants.summarySectionVerticalSpacing)
+
+                    Divider()
+
+                    summarySection
+                        .padding(.horizontal, insets: geometry.safeAreaInsets)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                        .padding(.bottom, Constants.margin)
+                        .background(Color(.listForeground))
+
+                    Divider()
+                    Spacer().frame(height: Constants.margin)
+                    Divider()
+
                     VStack(alignment: .leading, spacing: 0) {
                         Text(Localization.performance)
                             .bold()
                             .padding(Constants.margin)
-                            .padding(.horizontal, insets: geometry.safeAreaInsets)
                         VStack(alignment: .leading, spacing: Constants.verticalSpacing) {
                             HStack(alignment: .firstTextBaseline) {
                                 Text(Localization.discountedOrders)
@@ -151,51 +171,18 @@ struct CouponDetails: View {
                             }
                         }
                     }
+                    .padding(.horizontal, insets: geometry.safeAreaInsets)
                     .padding(.bottom, Constants.margin)
                     .background(Color(.listForeground))
 
                     Divider()
-                    Spacer().frame(height: Constants.margin)
-                    Divider()
-
-                    VStack(alignment: .leading, spacing: 0) {
-                        Text(Localization.detailSectionTitle)
-                            .bold()
-                            .padding(Constants.margin)
-                            .padding(.horizontal, insets: geometry.safeAreaInsets)
-                        ForEach(detailRows) { row in
-                            TitleAndValueRow(title: row.title,
-                                             value: .content(row.content),
-                                             selectionStyle: .none,
-                                             action: row.action)
-                                .padding(.vertical, Constants.verticalSpacing)
-                                .padding(.horizontal, insets: geometry.safeAreaInsets)
-                            Divider()
-                                .padding(.leading, Constants.margin)
-                                .padding(.leading, insets: geometry.safeAreaInsets)
-                        }
-                    }
-                    .background(Color(.listForeground))
-
-                    Spacer().frame(height: Constants.margin)
-                    Divider()
-                    VStack {
-                        NavigationRow(content: {
-                            Text(Localization.usageDetails)
-                                .bodyStyle()
-                        }, action: {
-                            showingUsageDetails = true
-                        }).padding(.horizontal, insets: geometry.safeAreaInsets)
-                    }
-                    .background(Color(.listForeground))
-                    Divider()
                 }
                 NavigationLink(destination: CouponUsageDetails(viewModel: .init(coupon: viewModel.coupon)), isActive: $showingUsageDetails) {
                     EmptyView()
                 }.hidden()
             }
             .background(Color(.listBackground))
-            .ignoresSafeArea(.container, edges: [.horizontal, .bottom])
+            .ignoresSafeArea(.container, edges: [.horizontal])
             .sheet(isPresented: $showingEnableAnalytics) {
                 EnableAnalyticsView(viewModel: .init(siteID: viewModel.siteID),
                                     presentingController: noticePresenter.presentingViewController,
@@ -230,6 +217,54 @@ struct CouponDetails: View {
         .wooNavigationBarStyle()
     }
 
+    private var summarySection: some View {
+        VStack(alignment: .leading, spacing: Constants.summarySectionVerticalSpacing) {
+            Text(Localization.summarySectionTitle)
+                .bold()
+                .padding(.top, Constants.margin)
+
+            VStack(alignment: .leading, spacing: Constants.summarySectionVerticalSpacing) {
+                Text(viewModel.discountType)
+
+                Text(viewModel.summary)
+
+                Text(Localization.individualUse)
+                    .renderedIf(viewModel.individualUseOnly)
+
+                Text(Localization.allowsFreeShipping)
+                    .renderedIf(viewModel.allowsFreeShipping)
+
+                Text(Localization.excludesSaleItems)
+                    .renderedIf(viewModel.excludeSaleItems)
+            }
+
+            VStack(alignment: .leading, spacing: Constants.summarySectionVerticalSpacing) {
+                Text(String.localizedStringWithFormat(Localization.minimumSpend, viewModel.minimumAmount))
+                    .renderedIf(viewModel.minimumAmount.isNotEmpty)
+
+                Text(String.localizedStringWithFormat(Localization.maximumSpend, viewModel.maximumAmount))
+                    .renderedIf(viewModel.maximumAmount.isNotEmpty)
+
+                Text(String.localizedStringWithFormat(Localization.singularLimitPerUser, viewModel.usageLimitPerUser))
+                    .renderedIf(viewModel.usageLimitPerUser == 1)
+
+                Text(String.localizedStringWithFormat(Localization.pluralLimitPerUser, viewModel.usageLimitPerUser))
+                    .renderedIf(viewModel.usageLimitPerUser > 1)
+            }
+            .renderedIf(viewModel.minimumAmount.isNotEmpty ||
+                        viewModel.maximumAmount.isNotEmpty ||
+                        viewModel.usageLimitPerUser > 0)
+
+            Text(String.localizedStringWithFormat(Localization.expiryFormat, viewModel.expiryDate))
+                .renderedIf(viewModel.expiryDate.isNotEmpty)
+
+            Text(String.localizedStringWithFormat(Localization.emailRestriction, viewModel.emailRestrictions.joined(separator: ", ")))
+                .renderedIf(viewModel.emailRestrictions.isNotEmpty)
+        }
+        .bodyStyle()
+        .padding(.horizontal, Constants.margin)
+    }
+
     @ViewBuilder
     private var amountTitleView: some View {
         Text(Localization.amount)
@@ -296,15 +331,49 @@ private extension CouponDetails {
         static let verticalSpacing: CGFloat = 8
         static let errorIconSize: CGFloat = 20
         static let errorIconHorizontalPadding: CGFloat = 4
+        static let summarySectionVerticalSpacing: CGFloat = 24
     }
 
     enum Localization {
-        static let detailSectionTitle = NSLocalizedString("Coupon Details", comment: "Title of Details section in Coupon Details screen")
-        static let couponCode = NSLocalizedString("Coupon Code", comment: "Title of the Coupon Code row in Coupon Details screen")
-        static let description = NSLocalizedString("Description", comment: "Title of the Description row in Coupon Details screen")
-        static let discount = NSLocalizedString("Discount", comment: "Title of the Discount row in Coupon Details screen")
-        static let applyTo = NSLocalizedString("Apply To", comment: "Title of the Apply To row in Coupon Details screen")
-        static let expiryDate = NSLocalizedString("Coupon Expiry Date", comment: "Title of the Coupon Expiry Date row in Coupon Details screen")
+        static let summarySectionTitle = NSLocalizedString("Coupon Summary", comment: "Title of Summary section in Coupon Details screen")
+        static let expiryFormat = NSLocalizedString(
+            "Expires %1$@",
+            comment: "Formatted content for coupon expiry date, reads like: Expires August 4, 2022"
+        )
+        static let allowsFreeShipping = NSLocalizedString(
+            "Allows free shipping",
+            comment: "Text on Coupon Details screen to indicate that the coupon allows free shipping"
+        )
+        static let excludesSaleItems = NSLocalizedString(
+            "Excludes sale items",
+            comment: "Text on Coupon Details screen to indicate that the coupon can not be applied to sale items"
+        )
+        static let individualUse = NSLocalizedString(
+            "Individual use only",
+            comment: "Text on Coupon Details screen to indicate that the coupon can not be applied in conjunction with other coupons"
+        )
+        static let minimumSpend = NSLocalizedString(
+            "Minimum spend of %1$@",
+            comment: "The minimum limit of spending required for a coupon on the Coupon Details screen, reads like: Minimum spend of $20.00"
+        )
+        static let maximumSpend = NSLocalizedString(
+            "Maximum spend of %1$@",
+            comment: "The maximum limit of spending allowed for a coupon on the Coupon Details screen, reads like: Minimum spend of $20.00"
+        )
+        static let singularLimitPerUser = NSLocalizedString(
+            "%1$d use per user",
+            comment: "The singular limit of time for each user to apply a coupon, reads like: 1 use per user"
+        )
+        static let pluralLimitPerUser = NSLocalizedString(
+            "%1$d uses per user",
+            comment: "The plural limit of time for each user to apply a coupon, reads like: 10 uses per user"
+        )
+        static let emailRestriction = NSLocalizedString(
+            "Restricted to customers with emails: %1$@",
+            comment: "Restriction for customers with specified emails to use a coupon, " +
+            "reads like: Restricted to customers with emails: *@a8c.com, *@vip.com"
+        )
+
         static let manageCoupon = NSLocalizedString("Manage Coupon", comment: "Title of the action sheet displayed from the Coupon Details screen")
         static let copyCode = NSLocalizedString("Copy Code", comment: "Action title for copying coupon code from the Coupon Details screen")
         static let couponCopied = NSLocalizedString("Coupon copied", comment: "Notice message displayed when a coupon code is " +