Merge pull request #19638 from wordpress-mobile/task/192012-jetpack-migration-flow-success-card

Jetpack migration flow - add success card

Author: Gio2018

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/BlogDashboardViewController.swift

@@ -134,6 +134,7 @@ final class BlogDashboardViewController: UIViewController {
     private func setupCollectionView() {
         collectionView.isScrollEnabled = !embeddedInScrollView
         collectionView.backgroundColor = .listBackground
+        collectionView.register(DashboardMigrationSuccessCell.self, forCellWithReuseIdentifier: DashboardMigrationSuccessCell.self.defaultReuseID)
         collectionView.register(DashboardQuickActionsCardCell.self, forCellWithReuseIdentifier: DashboardQuickActionsCardCell.self.defaultReuseID)
         DashboardCard.allCases.forEach {
             collectionView.register($0.cell, forCellWithReuseIdentifier: $0.cell.defaultReuseID)
@@ -224,8 +225,9 @@ extension BlogDashboardViewController {
 
         let section = NSCollectionLayoutSection(group: group)
         let isQuickActionSection = viewModel.isQuickActionsSection(sectionIndex)
+        let isMigrationSuccessCardSection = viewModel.isMigrationSuccessCardSection(sectionIndex)
         let horizontalInset = isQuickActionSection ? 0 : Constants.horizontalSectionInset
-        let bottomInset = isQuickActionSection ? 0 : Constants.verticalSectionInset
+        let bottomInset = isQuickActionSection || isMigrationSuccessCardSection ? 0 : Constants.verticalSectionInset
         section.contentInsets = NSDirectionalEdgeInsets(top: Constants.verticalSectionInset,
                                                         leading: horizontalInset,
                                                         bottom: bottomInset,

WordPress/Classes/ViewRelated/Blog/Blog Dashboard/ViewModel/BlogDashboardViewModel.swift

@@ -3,13 +3,15 @@ import UIKit
 import CoreData
 
 enum DashboardSection: Int, CaseIterable {
+    case migrationSuccess
     case quickActions
     case cards
 }
 
 typealias BlogID = Int
 
 enum DashboardItem: Hashable {
+    case migrationSuccess
     case quickActions(BlogID)
     case cards(DashboardCardModel)
 }
@@ -61,6 +63,10 @@ class BlogDashboardViewModel {
                     cellConfigurable.configure(blog: blog, viewController: viewController, apiResponse: cardModel.apiResponse)
                 }
                 return cell
+            case .migrationSuccess:
+                let cellType = DashboardMigrationSuccessCell.self
+                let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellType.defaultReuseID, for: indexPath) as? DashboardMigrationSuccessCell
+                return cell
             }
 
         }
@@ -101,7 +107,14 @@ class BlogDashboardViewModel {
     }
 
     func isQuickActionsSection(_ sectionIndex: Int) -> Bool {
-        return sectionIndex == DashboardSection.quickActions.rawValue
+        let showMigration = MigrationSuccessCardView.shouldShowMigrationSuccessCard && !WPDeviceIdentification.isiPad()
+        let targetIndex = showMigration ? DashboardSection.quickActions.rawValue : DashboardSection.quickActions.rawValue - 1
+        return sectionIndex == targetIndex
+    }
+
+    func isMigrationSuccessCardSection(_ sectionIndex: Int) -> Bool {
+        let showMigration = MigrationSuccessCardView.shouldShowMigrationSuccessCard && !WPDeviceIdentification.isiPad()
+        return showMigration ? sectionIndex == DashboardSection.migrationSuccess.rawValue : false
     }
 }
 
@@ -148,7 +161,13 @@ private extension BlogDashboardViewModel {
         let items = cards.map { DashboardItem.cards($0) }
         let dotComID = blog.dotComID?.intValue ?? 0
         var snapshot = DashboardSnapshot()
-        snapshot.appendSections(DashboardSection.allCases)
+        if MigrationSuccessCardView.shouldShowMigrationSuccessCard, !WPDeviceIdentification.isiPad() {
+            snapshot.appendSections(DashboardSection.allCases)
+            snapshot.appendItems([.migrationSuccess], toSection: .migrationSuccess)
+        } else {
+            snapshot.appendSections([.quickActions, .cards])
+        }
+
         snapshot.appendItems([.quickActions(dotComID)], toSection: .quickActions)
         snapshot.appendItems(items, toSection: .cards)
         return snapshot

WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.h

@@ -19,6 +19,7 @@ typedef NS_ENUM(NSUInteger, BlogDetailsSectionCategory) {
     BlogDetailsSectionCategoryConfigure,
     BlogDetailsSectionCategoryExternal,
     BlogDetailsSectionCategoryRemoveSite,
+    BlogDetailsSectionCategoryMigrationSuccess,
 };
 
 typedef NS_ENUM(NSUInteger, BlogDetailsSubsection) {
@@ -38,6 +39,7 @@ typedef NS_ENUM(NSUInteger, BlogDetailsSubsection) {
     BlogDetailsSubsectionPeople,
     BlogDetailsSubsectionPlugins,
     BlogDetailsSubsectionHome,
+    BlogDetailsSubsectionMigrationSuccess,
 };
 
 

WordPress/Classes/ViewRelated/Blog/Blog Details/BlogDetailsViewController.m

@@ -28,6 +28,7 @@
 static NSString *const QuickStartHeaderViewNibName = @"BlogDetailsSectionHeaderView";
 static NSString *const BlogDetailsQuickStartCellIdentifier = @"BlogDetailsQuickStartCell";
 static NSString *const BlogDetailsSectionFooterIdentifier = @"BlogDetailsSectionFooterView";
+static NSString *const BlogDetailsMigrationSuccessCellIdentifier = @"BlogDetailsMigrationSuccessCell";
 
 NSString * const WPBlogDetailsRestorationID = @"WPBlogDetailsID";
 NSString * const WPBlogDetailsBlogKey = @"WPBlogDetailsBlogKey";
@@ -353,6 +354,7 @@ - (void)viewDidLoad
     [self.tableView registerNib:qsHeaderViewNib forHeaderFooterViewReuseIdentifier:BlogDetailsSectionHeaderViewIdentifier];
     [self.tableView registerClass:[QuickStartCell class] forCellReuseIdentifier:BlogDetailsQuickStartCellIdentifier];
     [self.tableView registerClass:[BlogDetailsSectionFooterView class] forHeaderFooterViewReuseIdentifier:BlogDetailsSectionFooterIdentifier];
+    [self.tableView registerClass:[MigrationSuccessCell class] forCellReuseIdentifier:BlogDetailsMigrationSuccessCellIdentifier];
 
     self.hasLoggedDomainCreditPromptShownEvent = NO;
 
@@ -441,6 +443,7 @@ - (void)showDetailViewForSubsection:(BlogDetailsSubsection)section
         case BlogDetailsSubsectionReminders:
         case BlogDetailsSubsectionDomainCredit:
         case BlogDetailsSubsectionHome:
+        case BlogDetailsSubsectionMigrationSuccess:
             self.restorableSelectedIndexPath = indexPath;
             [self.tableView selectRowAtIndexPath:indexPath
                                         animated:NO
@@ -554,6 +557,7 @@ - (NSIndexPath *)indexPathForSubsection:(BlogDetailsSubsection)subsection
     switch (subsection) {
         case BlogDetailsSubsectionReminders:
         case BlogDetailsSubsectionHome:
+        case BlogDetailsSubsectionMigrationSuccess:
             return [NSIndexPath indexPathForRow:0 inSection:section];
         case BlogDetailsSubsectionDomainCredit:
             return [NSIndexPath indexPathForRow:0 inSection:section];
@@ -731,6 +735,10 @@ - (void)configureTableViewData
     if (AppConfiguration.showsQuickActions && ![self isDashboardEnabled]) {
         [marr addObject:[self quickActionsSectionViewModel]];
     }
+    if (MigrationSuccessCardView.shouldShowMigrationSuccessCard == YES) {
+        [marr addObject:[self migrationSuccessSectionViewModel]];
+    }
+
     if ([DomainCreditEligibilityChecker canRedeemDomainCreditWithBlog:self.blog]) {
         if (!self.hasLoggedDomainCreditPromptShownEvent) {
             [WPAnalytics track:WPAnalyticsStatDomainCreditPromptShown];
@@ -1152,6 +1160,11 @@ - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(N
         return cell;
     }
 
+    if (section.category == BlogDetailsSectionCategoryMigrationSuccess && MigrationSuccessCardView.shouldShowMigrationSuccessCard == YES) {
+        MigrationSuccessCell *cell = [tableView dequeueReusableCellWithIdentifier:BlogDetailsMigrationSuccessCellIdentifier];
+        return cell;
+    }
+
     BlogDetailsRow *row = [section.rows objectAtIndex:indexPath.row];
     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:row.identifier];
     cell.accessibilityHint = row.accessibilityHint;

WordPress/Jetpack/AppImages.xcassets/wp-migration-success-card-icon.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "wp-migratrion-success-card-icon.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Jetpack/AppImages.xcassets/wp-migration-success-card-icon.imageset/wp-migratrion-success-card-icon.pdf

@@ -0,0 +1,28 @@
+import UIKit
+
+class DashboardMigrationSuccessCell: UICollectionViewCell, Reusable {
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setup() {
+        let view = MigrationSuccessCardView() {
+            // TODO: add card presentation logic here
+        }
+        view.translatesAutoresizingMaskIntoConstraints = false
+        contentView.addSubview(view)
+        contentView.pinSubviewToAllEdges(view)
+    }
+}
+
+extension DashboardMigrationSuccessCell: BlogDashboardCardConfigurable {
+    func configure(blog: Blog, viewController: BlogDashboardViewController?, apiResponse: BlogDashboardRemoteEntity?) {
+
+    }
+}

WordPress/Jetpack/Classes/ViewRelated/WordPress-to-Jetpack Migration/Success card/DashboardMigrationSuccessCell.swift

@@ -0,0 +1,85 @@
+import UIKit
+
+@objc
+class MigrationSuccessCardView: UIView {
+
+    private var onTap: (() -> Void)?
+
+    private lazy var iconImageView: UIImageView = {
+        let imageView = UIImageView(image: UIImage(named: Appearance.iconImageName))
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.layer.cornerRadius = 8
+        imageView.layer.cornerCurve = .continuous
+        imageView.clipsToBounds = true
+        return imageView
+    }()
+
+    private lazy var iconView: UIView = {
+        let view = UIView()
+        view.addSubview(iconImageView)
+        return view
+    }()
+
+    private lazy var descriptionLabel: UILabel = {
+        let label = UILabel()
+        label.text = Appearance.descriptionText
+        label.font = Appearance.descriptionFont
+        label.numberOfLines = 0
+        label.adjustsFontForContentSizeCategory = true
+        return label
+    }()
+
+    private lazy var mainStackView: UIStackView = {
+        let stackView = UIStackView(arrangedSubviews: [iconView, descriptionLabel])
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        stackView.axis = .horizontal
+        stackView.spacing = 16
+        return stackView
+    }()
+
+    @objc
+    private func viewTapped() {
+        onTap?()
+    }
+
+    init(onTap: (() -> Void)? = nil) {
+        self.onTap = onTap
+        super.init(frame: .zero)
+        addSubview(mainStackView)
+        pinSubviewToAllEdges(mainStackView, insets: UIEdgeInsets(allEdges: 16))
+        NSLayoutConstraint.activate([
+            iconImageView.heightAnchor.constraint(equalToConstant: 32),
+            iconImageView.widthAnchor.constraint(equalToConstant: 32),
+            iconImageView.centerXAnchor.constraint(equalTo: iconView.centerXAnchor),
+            iconImageView.centerYAnchor.constraint(equalTo: iconView.centerYAnchor),
+            iconView.widthAnchor.constraint(equalTo: iconImageView.widthAnchor)
+        ])
+        backgroundColor = .listForeground
+        layer.cornerRadius = 10
+        clipsToBounds = true
+        addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(viewTapped)))
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private enum Appearance {
+        static let iconImageName = "wp-migration-success-card-icon"
+        static let descriptionText = NSLocalizedString("wp.migration.successcard.description",
+                                                       value: "Please delete the WordPress app",
+                                                       comment: "Description of the jetpack migration success card, used in My site.")
+        static let descriptionFont = WPStyleGuide.fontForTextStyle(.subheadline, fontWeight: .regular)
+    }
+}
+
+// TODO: This extension is temporary, and should be replaced by the actual condition to check, and placed in the proper location
+extension MigrationSuccessCardView {
+    @objc
+    static var shouldShowMigrationSuccessCard: Bool {
+
+        AppConfiguration.isJetpack && showCard
+    }
+
+    private static let showCard = false
+}

WordPress/Jetpack/Classes/ViewRelated/WordPress-to-Jetpack Migration/Success card/MigrationSuccessCardView.swift

@@ -0,0 +1,47 @@
+import UIKit
+
+@objc
+class MigrationSuccessCell: UITableViewCell {
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+        setup()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setup() {
+        let view = MigrationSuccessCardView() {
+            // TODO: add card presentation logic here
+        }
+        view.translatesAutoresizingMaskIntoConstraints = false
+        contentView.addSubview(view)
+        contentView.pinSubviewToAllEdges(view)
+    }
+}
+
+class MigrationSuccessRow: ImmuTableRow {
+    var action: ImmuTableAction?
+
+    func configureCell(_ cell: UITableViewCell) {
+
+    }
+
+    static let cell = ImmuTableCell.class(MigrationSuccessCell.self)
+}
+
+extension BlogDetailsViewController {
+
+    @objc func migrationSuccessSectionViewModel() -> BlogDetailsSection {
+        let row = BlogDetailsRow()
+        row.callback = {}
+
+        let section = BlogDetailsSection(title: nil,
+                                         rows: [row],
+                                         footerTitle: nil,
+                                         category: .migrationSuccess)
+        return section
+    }
+}