Products Onboarding: Bottom Sheets Titles

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorSectionHeaderView.swift

@@ -3,17 +3,20 @@ import UIKit
 /// Renders a section header for the bottom sheet list selector with a main title label.
 ///
 final class BottomSheetListSelectorSectionHeaderView: UITableViewHeaderFooterView {
-    @IBOutlet private weak var label: UILabel!
+    @IBOutlet private weak var title: UILabel!
+    @IBOutlet private weak var subtitle: UILabel!
 
     override func awakeFromNib() {
         super.awakeFromNib()
 
         configureMainView()
-        configureLabel()
+        configureTitle()
+        configureSubtitle()
     }
 
-    func configure(text: String?) {
-        label.text = text
+    func configure(title: String?, subtitle: String?) {
+        self.title.text = title
+        self.subtitle.text = subtitle
     }
 }
 
@@ -22,8 +25,13 @@ private extension BottomSheetListSelectorSectionHeaderView {
         contentView.backgroundColor = .listForeground
     }
 
-    func configureLabel() {
-        label.applySubheadlineStyle()
-        label.textColor = .systemColor(.secondaryLabel)
+    func configureTitle() {
+        title.applyHeadlineStyle()
+        title.textColor = .systemColor(.label)
+    }
+
+    func configureSubtitle() {
+        subtitle.applySubheadlineStyle()
+        subtitle.textColor = .systemColor(.secondaryLabel)
     }
 }

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorSectionHeaderView.xib

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<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">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="21225" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21207"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -15,8 +15,14 @@
             <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
+                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="yNN-dG-kuA">
+                    <rect key="frame" x="16" y="27" width="382" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <nil key="textColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
                 <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MUy-0K-UzK">
-                    <rect key="frame" x="16" y="56" width="382" height="794"/>
+                    <rect key="frame" x="16" y="60" width="382" height="790"/>
                     <fontDescription key="fontDescription" type="system" pointSize="17"/>
                     <nil key="textColor"/>
                     <nil key="highlightedColor"/>
@@ -28,11 +34,15 @@
                 <constraint firstItem="MUy-0K-UzK" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" constant="16" id="GnY-De-657"/>
                 <constraint firstItem="vUN-kp-3ea" firstAttribute="trailing" secondItem="MUy-0K-UzK" secondAttribute="trailing" priority="999" constant="16" id="MnQ-Ob-Wp4"/>
                 <constraint firstItem="vUN-kp-3ea" firstAttribute="bottom" secondItem="MUy-0K-UzK" secondAttribute="bottom" constant="12" id="WDE-us-ZdJ"/>
+                <constraint firstItem="MUy-0K-UzK" firstAttribute="top" secondItem="yNN-dG-kuA" secondAttribute="bottom" constant="12" id="nHE-te-rHP"/>
                 <constraint firstItem="MUy-0K-UzK" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="12" id="nmY-jt-bfb"/>
+                <constraint firstItem="yNN-dG-kuA" firstAttribute="trailing" secondItem="MUy-0K-UzK" secondAttribute="trailing" id="o6t-QX-No4"/>
+                <constraint firstItem="yNN-dG-kuA" firstAttribute="leading" secondItem="MUy-0K-UzK" secondAttribute="leading" id="wb7-Ze-GOP"/>
             </constraints>
             <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
             <connections>
-                <outlet property="label" destination="MUy-0K-UzK" id="Z0t-WU-7ls"/>
+                <outlet property="subtitle" destination="MUy-0K-UzK" id="L6u-fg-l9X"/>
+                <outlet property="title" destination="yNN-dG-kuA" id="hOy-NU-gAA"/>
             </connections>
             <point key="canvasLocation" x="139" y="109"/>
         </view>

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorViewController.swift

@@ -86,14 +86,14 @@ UIViewController, UITableViewDataSource, UITableViewDelegate where Command.Model
     }
 
     func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
-        guard viewProperties.title != nil else {
+        guard viewProperties.title != nil || viewProperties.subtitle != nil else {
             return nil
         }
         guard let header = tableView.dequeueReusableHeaderFooterView(withIdentifier: BottomSheetListSelectorSectionHeaderView.reuseIdentifier)
             as? BottomSheetListSelectorSectionHeaderView else {
                 fatalError()
         }
-        header.configure(text: viewProperties.title)
+        header.configure(title: viewProperties.title, subtitle: viewProperties.subtitle)
         return header
     }
 }
@@ -111,7 +111,7 @@ private extension BottomSheetListSelectorViewController {
         tableView.dataSource = self
 
         tableView.rowHeight = UITableView.automaticDimension
-        tableView.estimatedSectionHeaderHeight = viewProperties.title != nil ? estimatedSectionHeight : .zero
+        tableView.estimatedSectionHeaderHeight = (viewProperties.title != nil || viewProperties.subtitle != nil) ? estimatedSectionHeight : .zero
         tableView.sectionHeaderHeight = UITableView.automaticDimension
 
         tableView.backgroundColor = .listForeground

WooCommerce/Classes/ViewRelated/BottomSheet/ListSelector/BottomSheetListSelectorViewProperties.swift

@@ -2,4 +2,10 @@
 ///
 struct BottomSheetListSelectorViewProperties {
     let title: String?
+    let subtitle: String?
+
+    init(title: String? = nil, subtitle: String? = nil) {
+        self.title = title
+        self.subtitle = subtitle
+    }
 }

WooCommerce/Classes/ViewRelated/Coupons/Add and Edit Coupons/AddEditCoupon.swift

@@ -73,7 +73,7 @@ struct AddEditCoupon: View {
     @State private var showingDiscountType: Bool = false
 
     private var idiom: UIUserInterfaceIdiom { UIDevice.current.userInterfaceIdiom }
-    private let viewProperties = BottomSheetListSelectorViewProperties(title: Localization.discountTypeSheetTitle)
+    private let viewProperties = BottomSheetListSelectorViewProperties(subtitle: Localization.discountTypeSheetTitle)
 
     private let categorySelectorConfig = ProductCategorySelector.Configuration.categoriesForCoupons
     private let categoryListConfig = ProductCategoryListViewController.Configuration(searchEnabled: true, clearSelectionEnabled: true)

WooCommerce/Classes/ViewRelated/Coupons/CouponListViewController.swift

@@ -302,7 +302,7 @@ private extension CouponListViewController {
 
     @objc private func displayCouponTypeBottomSheet() {
         ServiceLocator.analytics.track(.couponsListCreateTapped)
-        let viewProperties = BottomSheetListSelectorViewProperties(title: Localization.createCouponAction)
+        let viewProperties = BottomSheetListSelectorViewProperties(subtitle: Localization.createCouponAction)
         let command = DiscountTypeBottomSheetListSelectorCommand(selected: nil) { [weak self] selectedType in
             guard let self = self else { return }
             self.presentedViewController?.dismiss(animated: true, completion: nil)

WooCommerce/Classes/ViewRelated/Orders/Order Creation/FlowCoordinator/AddOrderCoordinator.swift

@@ -53,7 +53,7 @@ final class AddOrderCoordinator: Coordinator {
 // MARK: Navigation
 private extension AddOrderCoordinator {
     func presentOrderTypeBottomSheet() {
-        let viewProperties = BottomSheetListSelectorViewProperties(title: nil)
+        let viewProperties = BottomSheetListSelectorViewProperties(subtitle: nil)
         let command = OrderTypeBottomSheetListSelectorCommand() { selectedBottomSheetOrderType in
             self.navigationController.dismiss(animated: true)
             self.presentOrderCreationFlow(bottomSheetOrderType: selectedBottomSheetOrderType)

WooCommerce/Classes/ViewRelated/Products/Add Product/AddProductCoordinator.swift

@@ -86,9 +86,11 @@ private extension AddProductCoordinator {
     /// Presents a bottom sheet for users to choose if they want a create a product manually or via a template.
     ///
     func presentProductCreationTypeBottomSheet() {
-        let title = NSLocalizedString("How do you want to start?",
+        let title = NSLocalizedString("Add a product",
                                       comment: "Message title of bottom sheet for selecting a template or manual product")
-        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let subtitle = NSLocalizedString("How do you want to start?",
+                                         comment: "Message subtitle of bottom sheet for selecting a template or manual product")
+        let viewProperties = BottomSheetListSelectorViewProperties(title: title, subtitle: subtitle)
         let command = ProductCreationTypeSelectorCommand { selectedCreationType in
             self.trackProductCreationType(selectedCreationType)
             self.presentProductTypeBottomSheet(creationType: selectedCreationType)
@@ -100,9 +102,13 @@ private extension AddProductCoordinator {
     /// Presents a bottom sheet for users to choose if what kind of product they want to create.
     ///
     func presentProductTypeBottomSheet(creationType: ProductCreationType) {
-        let title = NSLocalizedString("Select a product type",
-                                      comment: "Message title of bottom sheet for selecting a product type to create a product")
-        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let title: String? = {
+            guard creationType == .template else { return nil }
+            return NSLocalizedString("Choose a template", comment: "Message title of bottom sheet for selecting a template or manual product")
+        }()
+        let subtitle = NSLocalizedString("Select a product type",
+                                         comment: "Message subtitle of bottom sheet for selecting a product type to create a product")
+        let viewProperties = BottomSheetListSelectorViewProperties(title: title, subtitle: subtitle)
         let command = ProductTypeBottomSheetListSelectorCommand(selected: nil) { selectedBottomSheetProductType in
             ServiceLocator.analytics.track(.addProductTypeSelected, withProperties: ["product_type": selectedBottomSheetProductType.productType.rawValue])
             self.navigationController.dismiss(animated: true) {

WooCommerce/Classes/ViewRelated/Products/Edit Product/Downloadable Files/File List/ProductDownloadListViewController.swift

@@ -161,7 +161,7 @@ extension ProductDownloadListViewController {
 
     @objc private func addButtonTapped(_ sender: UIButton) {
         let title = Localization.bottomSheetTitle
-        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let viewProperties = BottomSheetListSelectorViewProperties(subtitle: title)
         let actions = viewModel.bottomSheetActions
         let dataSource = DownloadableFileBottomSheetListSelectorCommand(actions: actions) { [weak self] action in
             self?.dismiss(animated: true) { [weak self] in

WooCommerce/Classes/ViewRelated/Products/Edit Product/ProductFormViewController.swift

@@ -713,7 +713,7 @@ private extension ProductFormViewController {
     func moreDetailsButtonTapped(button: UIButton) {
         let title = NSLocalizedString("Add more details",
                                       comment: "Title of the bottom sheet from the product form to add more product details.")
-        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let viewProperties = BottomSheetListSelectorViewProperties(subtitle: title)
         let actions = viewModel.actionsFactory.bottomSheetActions()
         let dataSource = ProductFormBottomSheetListSelectorCommand(actions: actions) { [weak self] action in
                                                                     self?.dismiss(animated: true) { [weak self] in
@@ -1151,7 +1151,7 @@ private extension ProductFormViewController {
     func editProductType(cell: UITableViewCell?) {
         let title = NSLocalizedString("Change product type",
                                       comment: "Message title of bottom sheet for selecting a product type")
-        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let viewProperties = BottomSheetListSelectorViewProperties(subtitle: title)
         let productType = BottomSheetProductType(productType: viewModel.productModel.productType, isVirtual: viewModel.productModel.virtual)
         let command = ProductTypeBottomSheetListSelectorCommand(selected: productType) { [weak self] (selectedProductType) in
             self?.dismiss(animated: true, completion: nil)

WooCommerce/Classes/ViewRelated/Products/ProductsViewController.swift

@@ -665,7 +665,7 @@ private extension ProductsViewController {
         ServiceLocator.analytics.track(.productListViewSortingOptionsTapped)
         let title = NSLocalizedString("Sort by",
                                       comment: "Message title for sort products action bottom sheet")
-        let viewProperties = BottomSheetListSelectorViewProperties(title: title)
+        let viewProperties = BottomSheetListSelectorViewProperties(subtitle: title)
         let command = ProductsSortOrderBottomSheetListSelectorCommand(selected: sortOrder) { [weak self] selectedSortOrder in
             self?.dismiss(animated: true, completion: nil)
             guard let selectedSortOrder = selectedSortOrder as ProductsSortOrder? else {