Custom fields: Entry point logic in Product Details

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -984,7 +984,7 @@ extension UIImage {
     /// Custom Fields Icon
     ///
     static var customFieldsImage: UIImage {
-        return UIImage.gridicon(.alignLeft, size: CGSize(width: 24, height: 24))
+        return UIImage.gridicon(.grid, size: CGSize(width: 24, height: 24))
     }
 
     /// Print Icon

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

@@ -491,12 +491,12 @@ extension OrderDetailsViewModel {
                     viewModel: CustomFieldsListViewModel(customFields: customFields),
                     onBackButtonTapped: {
                     // Restore the hidden navigation bar
-                    viewController.navigationController?.setNavigationBarHidden(false, animated: true)
+                    viewController.navigationController?.setNavigationBarHidden(false, animated: false)
                 })
             )
 
             // Hide the navigation bar as `CustomFieldsListView` will create its own toolbar.
-            viewController.navigationController?.setNavigationBarHidden(true, animated: true)
+            viewController.navigationController?.setNavigationBarHidden(true, animated: false)
             viewController.navigationController?.pushViewController(customFieldsView, animated: true)
         case .seeReceipt:
             let countryCode = configurationLoader.configuration.countryCode

WooCommerce/Classes/ViewRelated/Custom Fields/CustomFieldsListView.swift

@@ -42,6 +42,7 @@ struct CustomFieldsListView: View {
                         presentationMode.wrappedValue.dismiss()
                     }, label: {
                         Image(systemName: "chevron.backward")
+                            .headlineLinkStyle()
                     })
                 }
 
@@ -64,9 +65,8 @@ struct CustomFieldsListView: View {
                     }
                 }
             }
+            .wooNavigationBarStyle()
         }
-        .wooNavigationBarStyle()
-        .navigationViewStyle(.stack)
     }
 }
 

WooCommerce/Classes/ViewRelated/Products/Edit Product/BottomSheetListSelector/ProductFormBottomSheetAction.swift

@@ -12,6 +12,7 @@ enum ProductFormBottomSheetAction {
     case editLinkedProducts
     case editReviews
     case editDownloadableFiles
+    case editCustomFields
 
     init?(productFormAction: ProductFormEditAction) {
         switch productFormAction {
@@ -33,6 +34,8 @@ enum ProductFormBottomSheetAction {
             self = .editReviews
         case .downloadableFiles:
             self = .editDownloadableFiles
+        case .customFields:
+            self = .editCustomFields
         default:
             return nil
         }
@@ -69,6 +72,11 @@ extension ProductFormBottomSheetAction {
         case .editDownloadableFiles:
             return NSLocalizedString("Downloadable files",
                                      comment: "Title of the product form bottom sheet action for editing downloadable files.")
+        case .editCustomFields:
+            return NSLocalizedString("productFormBottomSheetAction.customFieldsTitle",
+                                     value: "Custom Fields",
+                                     comment: "Title of the product form bottom sheet action for custom fields")
+
         }
     }
 
@@ -101,6 +109,11 @@ extension ProductFormBottomSheetAction {
         case .editDownloadableFiles:
             return NSLocalizedString("Include downloadable files with purchases",
                                      comment: "Subtitle of the product form bottom sheet action for editing downloadable files.")
+
+        case .editCustomFields:
+            return NSLocalizedString("productFormBottomSheetAction.customFieldsSubtitle",
+                                     value: "View and edit custom fields",
+                                     comment: "Subtitle of the product form bottom sheet action for custom fields")
         }
     }
 }

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

@@ -259,8 +259,8 @@ private extension DefaultProductFormTableViewModel {
     func customFieldsRow() -> ProductFormSection.SettingsRow.ViewModel {
         return ProductFormSection.SettingsRow.ViewModel(
             icon: UIImage.customFieldsImage,
-            title: Localization.customFieldsTitle,
-            details: Localization.customFieldsDetails
+            title: Localization.customFieldsRowTitle,
+            details: Localization.customFieldsRowDetails
         )
     }
 
@@ -790,14 +790,14 @@ private extension DefaultProductFormTableViewModel.Localization {
                                                     comment: "Format of the sale period on the Price Settings row until a certain date")
 
         // Custom fields
-        static let customFieldsTitle = NSLocalizedString(
-            "defaultProductFormTableViewModel.customFieldsDetails",
+        static let customFieldsRowTitle = NSLocalizedString(
+            "defaultProductFormTableViewModel.customFieldsRowTitle",
             value: "Custom Fields",
             comment: "Title for the Custom Fields row"
         )
 
-        static let customFieldsDetails = NSLocalizedString(
-            "defaultProductFormTableViewModel.customFieldsDetails",
+        static let customFieldsRowDetails = NSLocalizedString(
+            "defaultProductFormTableViewModel.customFieldsRowDetails",
             value: "View and edit the product's custom fields",
             comment: "Details text for the Custom Fields row"
         )

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

@@ -64,34 +64,41 @@ struct ProductFormActionsFactory: ProductFormActionsFactoryProtocol {
     private let variationsPrice: VariationsPrice
 
     private let stores: StoresManager
+    private let featureFlagService: FeatureFlagService
 
     private let isLinkedProductsPromoEnabled: Bool
     private let linkedProductsPromoCampaign = LinkedProductsPromoCampaign()
     private var linkedProductsPromoViewModel: FeatureAnnouncementCardViewModel {
         .init(analytics: ServiceLocator.analytics,
               configuration: linkedProductsPromoCampaign.configuration)
     }
-    private let isCustomFieldsEnabled: Bool
+
+    private var isCustomFieldsEnabled: Bool {
+        /// Custom fields should only be available on .edit form type. For other cases:
+        /// - .add: The API requires product ID is required to save custom fields, so it can't be added during product creation.
+        /// - .readonly: Hide Custom Fields setting as it won't be useful in this context.
+        featureFlagService.isFeatureFlagEnabled(.viewEditCustomFieldsInProductsAndOrders)
+        && formType == .edit
+    }
 
     // TODO: Remove default parameter
     init(product: EditableProductModel,
          formType: ProductFormType,
          canPromoteWithBlaze: Bool = false,
          addOnsFeatureEnabled: Bool = true,
          isLinkedProductsPromoEnabled: Bool = false,
-         isCustomFieldsEnabled: Bool =
-         ServiceLocator.featureFlagService.isFeatureFlagEnabled(.viewEditCustomFieldsInProductsAndOrders),
          variationsPrice: VariationsPrice = .unknown,
-         stores: StoresManager = ServiceLocator.stores) {
+         stores: StoresManager = ServiceLocator.stores,
+         featureFlagService: FeatureFlagService = ServiceLocator.featureFlagService) {
         self.product = product
         self.formType = formType
         self.canPromoteWithBlaze = canPromoteWithBlaze
         self.editable = formType != .readonly
         self.addOnsFeatureEnabled = addOnsFeatureEnabled
         self.variationsPrice = variationsPrice
         self.isLinkedProductsPromoEnabled = isLinkedProductsPromoEnabled
-        self.isCustomFieldsEnabled = isCustomFieldsEnabled
         self.stores = stores
+        self.featureFlagService = featureFlagService
     }
 
     /// Returns an array of actions that are visible in the product form primary section.
@@ -172,7 +179,6 @@ private extension ProductFormActionsFactory {
 
         let actions: [ProductFormEditAction?] = [
             .priceSettings(editable: editable, hideSeparator: false),
-            isCustomFieldsEnabled ? .customFields: nil,
             shouldShowReviewsRow ? .reviews: nil,
             shouldShowShippingSettingsRow ? .shippingSettings(editable: editable): nil,
             .inventorySettings(editable: canEditInventorySettingsRow),
@@ -183,7 +189,8 @@ private extension ProductFormActionsFactory {
             .downloadableFiles(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: canEditProductType)
+            .productType(editable: canEditProductType),
+            isCustomFieldsEnabled ? .customFields: nil,
         ]
         return actions.compactMap { $0 }
     }
@@ -206,7 +213,8 @@ private extension ProductFormActionsFactory {
             .tags(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: canEditProductType)
+            .productType(editable: canEditProductType),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -227,7 +235,8 @@ private extension ProductFormActionsFactory {
             .tags(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: canEditProductType)
+            .productType(editable: canEditProductType),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -257,7 +266,8 @@ private extension ProductFormActionsFactory {
             .tags(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: canEditProductType)
+            .productType(editable: canEditProductType),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -279,7 +289,8 @@ private extension ProductFormActionsFactory {
             .tags(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: false)
+            .productType(editable: false),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -301,7 +312,8 @@ private extension ProductFormActionsFactory {
             .tags(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: false)
+            .productType(editable: false),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -327,7 +339,8 @@ private extension ProductFormActionsFactory {
             .downloadableFiles(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: canEditProductType)
+            .productType(editable: canEditProductType),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -359,7 +372,8 @@ private extension ProductFormActionsFactory {
                 .tags(editable: editable),
                 .shortDescription(editable: editable),
                 .linkedProducts(editable: editable),
-                .productType(editable: canEditProductType)
+                .productType(editable: canEditProductType),
+                isCustomFieldsEnabled ? .customFields: nil
             ]
         }()
 
@@ -381,7 +395,8 @@ private extension ProductFormActionsFactory {
             .tags(editable: editable),
             .shortDescription(editable: editable),
             .linkedProducts(editable: editable),
-            .productType(editable: false)
+            .productType(editable: false),
+            isCustomFieldsEnabled ? .customFields: nil
         ]
         return actions.compactMap { $0 }
     }
@@ -398,8 +413,7 @@ private extension ProductFormActionsFactory {
             // The price settings action is always visible in the settings section.
             return true
         case .customFields:
-            // The custom fields action is always visible in the settings section.
-            return true
+            return product.product.customFields.isNotEmpty
         case .subscriptionFreeTrial:
             // The Free trial row is always visible in the settings section for a subscription product.
             return true

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

@@ -4,6 +4,7 @@ import Photos
 import UIKit
 import WordPressUI
 import Yosemite
+import SwiftUI
 import protocol Storage.StorageManagerType
 
 /// The entry UI for adding/editing a Product.
@@ -456,8 +457,7 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
                 eventLogger.logPriceSettingsTapped()
                 editPriceSettings()
             case .customFields:
-                // TODO-13493: add tap handling.
-                return
+                showCustomFields()
             case .reviews:
                 ServiceLocator.analytics.track(.productDetailViewReviewsTapped)
                 showReviews()
@@ -957,6 +957,8 @@ private extension ProductFormViewController {
                                                                         case .editDownloadableFiles:
                                                                             ServiceLocator.analytics.track(.productDetailViewDownloadableFilesTapped)
                                                                             self?.showDownloadableFiles()
+                                                                        case .editCustomFields:
+                                                                            self?.showCustomFields()
                                                                         }
                                                                     }
         }
@@ -1481,6 +1483,33 @@ private extension ProductFormViewController {
     }
 }
 
+// MARK: Action - Show Custom Fields
+private extension ProductFormViewController {
+    func showCustomFields() {
+        guard let product = product as? EditableProductModel else {
+            return
+        }
+
+        let customFields = product.product.customFields.map {
+            CustomFieldViewModel(metadata: $0)
+        }
+
+        let customFieldsView = UIHostingController(
+            rootView: CustomFieldsListView(
+                isEditable: true,
+                viewModel: CustomFieldsListViewModel(customFields: customFields),
+                onBackButtonTapped: { [weak self] in
+                    // Restore the hidden navigation bar
+                    self?.navigationController?.setNavigationBarHidden(false, animated: false)
+            })
+        )
+
+        // Hide the navigation bar as `CustomFieldsListView` will create its own toolbar.
+        navigationController?.setNavigationBarHidden(true, animated: false)
+        navigationController?.pushViewController(customFieldsView, animated: true)
+    }
+}
+
 // MARK: Action - Show Product Reviews Settings
 //
 private extension ProductFormViewController {

WooCommerce/WooCommerceTests/Mocks/MockFeatureFlagService.swift

@@ -20,6 +20,7 @@ struct MockFeatureFlagService: FeatureFlagService {
     private let blazeEvergreenCampaigns: Bool
     private let blazeCampaignObjective: Bool
     private let revampedShippingLabelCreation: Bool
+    private let viewEditCustomFieldsInProductsAndOrders: Bool
     private let favoriteProducts: Bool
 
     init(isInboxOn: Bool = false,
@@ -40,6 +41,7 @@ struct MockFeatureFlagService: FeatureFlagService {
          blazeEvergreenCampaigns: Bool = false,
          blazeCampaignObjective: Bool = false,
          revampedShippingLabelCreation: Bool = false,
+         viewEditCustomFieldsInProductsAndOrders: Bool = false,
          favoriteProducts: Bool = false) {
         self.isInboxOn = isInboxOn
         self.isShowInboxCTAEnabled = isShowInboxCTAEnabled
@@ -59,6 +61,7 @@ struct MockFeatureFlagService: FeatureFlagService {
         self.blazeEvergreenCampaigns = blazeEvergreenCampaigns
         self.blazeCampaignObjective = blazeCampaignObjective
         self.revampedShippingLabelCreation = revampedShippingLabelCreation
+        self.viewEditCustomFieldsInProductsAndOrders = viewEditCustomFieldsInProductsAndOrders
         self.favoriteProducts = favoriteProducts
     }
 
@@ -100,6 +103,8 @@ struct MockFeatureFlagService: FeatureFlagService {
             return blazeCampaignObjective
         case .revampedShippingLabelCreation:
             return revampedShippingLabelCreation
+        case .viewEditCustomFieldsInProductsAndOrders:
+            return viewEditCustomFieldsInProductsAndOrders
         case .favoriteProducts:
             return favoriteProducts
         default: