Merge branch 'trunk' into issue/8962-product-bundle-ui

Author: rachelmcr

RELEASE-NOTES.txt

@@ -3,6 +3,8 @@
 13.8
 -----
 - [Internal] Orders: Bundled products (within a product bundle) are now indented, to show their relationship to the parent bundle. [https://github.com/woocommerce/woocommerce-ios/pull/9778]
+- [*] Add Products: A new view is display to celebrate when the first product is created in a store. [https://github.com/woocommerce/woocommerce-ios/pull/9790]
+- [*] Product form: a share action is shown in the navigation bar if the product can be shared and no more than one action is displayed, in addition to the more menu > Share. [https://github.com/woocommerce/woocommerce-ios/pull/9789]
 
 13.7
 -----

WooCommerce.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,24 @@
+extension WooAnalyticsEvent {
+    enum ProductForm {
+        /// Event property keys.
+        private enum Key {
+            static let source = "source"
+        }
+
+        /// Tracked when the user taps on the button to share a product.
+        static func productDetailShareButtonTapped(source: ShareProductSource) -> WooAnalyticsEvent {
+            WooAnalyticsEvent(statName: .productDetailShareButtonTapped,
+                              properties: [Key.source: source.rawValue])
+        }
+    }
+}
+
+extension WooAnalyticsEvent.ProductForm {
+    /// Source of the share product action. The raw value is the event property value.
+    enum ShareProductSource: String {
+        /// From product form in the navigation bar.
+        case productForm = "product_form"
+        /// From product form > more menu in the navigation bar.
+        case moreMenu = "more_menu"
+    }
+}

WooCommerce/Classes/Analytics/WooAnalyticsEvent+ProductForm.swift

@@ -713,6 +713,10 @@ public enum WooAnalyticsStat: String {
     case productDescriptionAIGenerationSuccess = "product_description_ai_generation_success"
     case productDescriptionAIGenerationFailed = "product_description_ai_generation_failed"
 
+    // MARK: First created product events
+    case firstCreatedProductShown = "first_created_product_shown"
+    case firstCreatedProductShareTapped = "first_created_product_share_tapped"
+
     // MARK: Jetpack Tunnel Events
     //
     case jetpackTunnelTimeout = "jetpack_tunnel_timeout"

WooCommerce/Classes/Analytics/WooAnalyticsStat.swift

@@ -471,7 +471,8 @@ private extension DashboardViewController {
         let coordinator = AddProductCoordinator(siteID: siteID,
                                                 source: .productOnboarding,
                                                 sourceView: announcementView,
-                                                sourceNavigationController: navigationController)
+                                                sourceNavigationController: navigationController,
+                                                isFirstProduct: true)
         coordinator.onProductCreated = { [weak self] _ in
             guard let self else { return }
             self.viewModel.announcementViewModel = nil // Remove the products onboarding banner

WooCommerce/Classes/ViewRelated/Dashboard/DashboardViewController.swift

@@ -86,7 +86,8 @@ private extension StoreOnboardingCoordinator {
         let coordinator = AddProductCoordinator(siteID: site.siteID,
                                                 source: .storeOnboarding,
                                                 sourceView: nil,
-                                                sourceNavigationController: navigationController)
+                                                sourceNavigationController: navigationController,
+                                                isFirstProduct: true)
         self.addProductCoordinator = coordinator
         coordinator.onProductCreated = { [weak self] _ in
             self?.onTaskCompleted(.addFirstProduct)

WooCommerce/Classes/ViewRelated/Dashboard/Onboarding/StoreOnboardingCoordinator.swift

@@ -29,6 +29,7 @@ final class AddProductCoordinator: Coordinator {
     private let sourceView: UIView?
     private let productImageUploader: ProductImageUploaderProtocol
     private let storage: StorageManagerType
+    private let isFirstProduct: Bool
 
     /// ResultController to to track the current product count.
     ///
@@ -48,29 +49,33 @@ final class AddProductCoordinator: Coordinator {
          sourceBarButtonItem: UIBarButtonItem,
          sourceNavigationController: UINavigationController,
          storage: StorageManagerType = ServiceLocator.storageManager,
-         productImageUploader: ProductImageUploaderProtocol = ServiceLocator.productImageUploader) {
+         productImageUploader: ProductImageUploaderProtocol = ServiceLocator.productImageUploader,
+         isFirstProduct: Bool) {
         self.siteID = siteID
         self.source = source
         self.sourceBarButtonItem = sourceBarButtonItem
         self.sourceView = nil
         self.navigationController = sourceNavigationController
         self.productImageUploader = productImageUploader
         self.storage = storage
+        self.isFirstProduct = isFirstProduct
     }
 
     init(siteID: Int64,
          source: Source,
          sourceView: UIView?,
          sourceNavigationController: UINavigationController,
          storage: StorageManagerType = ServiceLocator.storageManager,
-         productImageUploader: ProductImageUploaderProtocol = ServiceLocator.productImageUploader) {
+         productImageUploader: ProductImageUploaderProtocol = ServiceLocator.productImageUploader,
+         isFirstProduct: Bool) {
         self.siteID = siteID
         self.source = source
         self.sourceBarButtonItem = nil
         self.sourceView = sourceView
         self.navigationController = sourceNavigationController
         self.productImageUploader = productImageUploader
         self.storage = storage
+        self.isFirstProduct = isFirstProduct
     }
 
     required init?(coder aDecoder: NSCoder) {
@@ -235,7 +240,13 @@ private extension AddProductCoordinator {
         let viewModel = ProductFormViewModel(product: model,
                                              formType: .add,
                                              productImageActionHandler: productImageActionHandler)
-        viewModel.onProductCreated = onProductCreated
+        viewModel.onProductCreated = { [weak self] product in
+            guard let self else { return }
+            self.onProductCreated(product)
+            if self.isFirstProduct, let url = URL(string: product.permalink) {
+                self.showFirstProductCreatedView(productURL: url)
+            }
+        }
         let viewController = ProductFormViewController(viewModel: viewModel,
                                                        eventLogger: ProductFormEventLogger(),
                                                        productImageActionHandler: productImageActionHandler,
@@ -289,4 +300,11 @@ private extension AddProductCoordinator {
         }()
         ServiceLocator.analytics.track(event: .ProductsOnboarding.productCreationTypeSelected(type: analyticsType))
     }
+
+    /// Presents the celebratory view for the first created product.
+    ///
+    func showFirstProductCreatedView(productURL: URL) {
+        let viewController = FirstProductCreatedHostingController(productURL: productURL)
+        navigationController.present(UINavigationController(rootViewController: viewController), animated: true)
+    }
 }

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

@@ -0,0 +1,103 @@
+import ConfettiSwiftUI
+import SwiftUI
+
+final class FirstProductCreatedHostingController: UIHostingController<FirstProductCreatedView> {
+    init(productURL: URL) {
+        super.init(rootView: FirstProductCreatedView())
+        rootView.onSharingProduct = { [weak self] in
+            guard let self else { return }
+            SharingHelper.shareURL(url: productURL, from: self.view, in: self)
+            ServiceLocator.analytics.track(.firstCreatedProductShareTapped)
+        }
+    }
+
+    @available(*, unavailable)
+    required dynamic init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        configureTransparentNavigationBar()
+        navigationItem.leftBarButtonItem = UIBarButtonItem(title: Localization.cancel, style: .plain, target: self, action: #selector(dismissView))
+        ServiceLocator.analytics.track(.firstCreatedProductShown)
+    }
+
+    @objc
+    private func dismissView() {
+        dismiss(animated: true)
+    }
+}
+
+private extension FirstProductCreatedHostingController {
+    enum Localization {
+        static let cancel = NSLocalizedString("Dismiss", comment: "Button to dismiss the first created product screen")
+    }
+}
+
+/// Celebratory screen after creating the first product 🎉
+///
+struct FirstProductCreatedView: View {
+    var onSharingProduct: () -> Void = {}
+    @State private var confettiCounter: Int = 0
+
+    var body: some View {
+        GeometryReader { proxy in
+            ScrollableVStack(spacing: Constants.verticalSpacing) {
+                Spacer()
+                Text(Localization.title)
+                    .titleStyle()
+                Image(uiImage: .welcomeImage)
+                Text(Localization.message)
+                    .secondaryBodyStyle()
+                    .multilineTextAlignment(.center)
+                Button(Localization.shareAction,
+                       action: onSharingProduct)
+                    .buttonStyle(PrimaryButtonStyle())
+                    .padding(.horizontal)
+                Spacer()
+            }
+            .padding()
+            .confettiCannon(counter: $confettiCounter,
+                            num: Constants.confettiCount,
+                            rainHeight: proxy.size.height,
+                            radius: proxy.size.width)
+        }
+        .onAppear {
+            confettiCounter += 1
+        }
+        .background(Color(uiColor: .systemBackground))
+    }
+}
+
+private extension FirstProductCreatedView {
+    enum Constants {
+        static let verticalSpacing: CGFloat = 40
+        static let confettiCount: Int = 100
+    }
+    enum Localization {
+        static let title = NSLocalizedString(
+            "First product created 🎉",
+            comment: "Title of the celebratory screen after creating the first product"
+        )
+        static let message = NSLocalizedString(
+            "Congratulations! You're one step closer to getting the new store ready.",
+            comment: "Message on the celebratory screen after creating first product"
+        )
+        static let shareAction = NSLocalizedString(
+            "Share Product",
+            comment: "Title of the action button to share the first created product"
+        )
+    }
+}
+
+struct FirstProductCreatedView_Previews: PreviewProvider {
+    static var previews: some View {
+        FirstProductCreatedView()
+        .environment(\.colorScheme, .light)
+
+        FirstProductCreatedView()
+        .environment(\.colorScheme, .dark)
+        .previewInterfaceOrientation(.landscapeLeft)
+    }
+}

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

@@ -53,6 +53,10 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
         presentationStyle.createExitForm(viewController: self)
     }()
 
+    private lazy var shareBarButtonItem = UIBarButtonItem(barButtonSystemItem: .action,
+                                                          target: self,
+                                                          action: #selector(shareProduct))
+
     private let presentationStyle: ProductFormPresentationStyle
     private let navigationRightBarButtonItemsSubject = PassthroughSubject<[UIBarButtonItem], Never>()
     private var navigationRightBarButtonItems: AnyPublisher<[UIBarButtonItem], Never> {
@@ -281,8 +285,7 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
 
         if viewModel.canShareProduct() {
             actionSheet.addDefaultActionWithTitle(ActionSheetStrings.share) { [weak self] _ in
-                ServiceLocator.analytics.track(.productDetailShareButtonTapped)
-                self?.displayShareProduct()
+                self?.displayShareProduct(from: sender, analyticSource: .moreMenu)
             }
         }
 
@@ -470,6 +473,10 @@ final class ProductFormViewController<ViewModel: ProductFormViewModelProtocol>:
         }
     }
 
+    @objc private func shareProduct() {
+        displayShareProduct(from: shareBarButtonItem, analyticSource: .productForm)
+    }
+
     func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
         let section = tableViewModel.sections[section]
         switch section {
@@ -858,12 +865,14 @@ private extension ProductFormViewController {
         WebviewHelper.launch(url, with: self)
     }
 
-    func displayShareProduct() {
+    func displayShareProduct(from sourceView: UIBarButtonItem, analyticSource: WooAnalyticsEvent.ProductForm.ShareProductSource) {
+        ServiceLocator.analytics.track(event: .ProductForm.productDetailShareButtonTapped(source: analyticSource))
+
         guard let url = URL(string: product.permalink) else {
             return
         }
 
-        SharingHelper.shareURL(url: url, title: product.name, from: view, in: self)
+        SharingHelper.shareURL(url: url, title: product.name, from: sourceView, in: self)
     }
 
     func duplicateProduct() {
@@ -1003,6 +1012,8 @@ private extension ProductFormViewController {
                 return createSaveBarButtonItem()
             case .more:
                 return createMoreOptionsBarButtonItem()
+            case .share:
+                return shareBarButtonItem
             }
         }
 

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

@@ -168,6 +168,11 @@ final class ProductFormViewModel: ProductFormViewModelProtocol {
             buttons.append(.more)
         }
 
+        // Share button if up to one button is visible.
+        if canShareProduct() && buttons.count <= 1 {
+            buttons.insert(.share, at: 0)
+        }
+
         return buttons
     }