Shipping Labels: Handle merging shipments (#15448)

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsDetailView.swift

@@ -6,22 +6,16 @@ struct WooShippingSplitShipmentsDetailView: View {
 
     @ObservedObject var viewModel: WooShippingSplitShipmentsViewModel
 
+    @State private var showingMergeAllSheet = false
+
     var body: some View {
         NavigationView {
             VStack {
                 if viewModel.shipments.count > 1 {
-                    TopTabView(tabs: viewModel.topTabItems,
-                               showContent: false,
-                               selectedTabIndex: $viewModel.selectedShipmentIndex,
-                               tabsContainerHorizontalPadding: nil,
-                               selectedStateColor: .accentColor,
-                               unselectedStateColor: .secondary,
-                               selectedTabIndicatorHeight: Layout.selectedTabIndicatorHeight,
-                               tabPadding: Layout.tabPadding,
-                               tabsNameFont: Font.subheadline.bold(),
-                               tabsIconSize: nil,
-                               tabItemContentHorizontalPadding: Layout.tabItemContentHorizontalPadding,
-                               tabItemContentVerticalPadding: Layout.tabItemContentVerticalPadding)
+                    VStack(spacing: 0) {
+                        topTabView
+                        Divider()
+                    }
                 }
 
                 ScrollView {
@@ -66,10 +60,55 @@ struct WooShippingSplitShipmentsDetailView: View {
         .onAppear {
             viewModel.onAppear()
         }
+        .sheet(isPresented: $showingMergeAllSheet) {
+            mergeAllUnfulfilledSheet
+        }
     }
 }
 
 private extension WooShippingSplitShipmentsDetailView {
+    var topTabView: some View {
+        HStack(spacing: 0) {
+            TopTabView(tabs: viewModel.topTabItems,
+                       showContent: false,
+                       showDividerBelowTabs: false,
+                       selectedTabIndex: $viewModel.selectedShipmentIndex,
+                       tabsContainerHorizontalPadding: nil,
+                       selectedStateColor: .accentColor,
+                       unselectedStateColor: .secondary,
+                       selectedTabIndicatorHeight: Layout.selectedTabIndicatorHeight,
+                       tabPadding: Layout.tabPadding,
+                       tabsNameFont: Font.subheadline.bold(),
+                       tabsIconSize: nil,
+                       tabItemContentHorizontalPadding: Layout.tabItemContentHorizontalPadding,
+                       tabItemContentVerticalPadding: Layout.tabItemContentVerticalPadding)
+            .overlay(alignment: .trailing) {
+                LinearGradient(gradient: Gradient(colors: [.clear, Color(.basicBackground)]), startPoint: .leading, endPoint: .center)
+                    .frame(width: Layout.gradientViewWidth)
+                    .renderedIf(viewModel.selectedShipmentIndex < viewModel.topTabItems.count - 1)
+            }
+
+            removeShipmentMenu
+        }
+    }
+
+    var removeShipmentMenu: some View {
+        Menu {
+            ForEach(viewModel.topTabItems, id: \.name) { tab in
+                Button(String.localizedStringWithFormat(Localization.removeShipmentFormat, tab.name.lowercased())) {
+                    // TODO
+                }
+            }
+            Divider()
+            Button(Localization.mergeAll) {
+                showingMergeAllSheet = true
+            }
+        } label: {
+            Image(systemName: "ellipsis")
+                .padding()
+        }
+    }
+
     var noticeStack: some View {
         VStack(spacing: Layout.contentPadding) {
             if let message = viewModel.instructions {
@@ -97,6 +136,34 @@ private extension WooShippingSplitShipmentsDetailView {
             }
         }
     }
+
+    var mergeAllUnfulfilledSheet: some View {
+        ScrollableVStack(alignment: .leading, spacing: Layout.contentPadding) {
+            Text(Localization.MergeAllUnfulfilledSheet.title)
+                .font(.title3)
+                .bold()
+                .multilineTextAlignment(.leading)
+                .padding(.top)
+
+            Text(Localization.MergeAllUnfulfilledSheet.description)
+                .font(.subheadline)
+                .multilineTextAlignment(.leading)
+
+            Spacer()
+
+            Button(Localization.MergeAllUnfulfilledSheet.confirmCTA) {
+                viewModel.mergeAllUnfulfilledShipments()
+                showingMergeAllSheet = false
+            }
+            .buttonStyle(PrimaryButtonStyle())
+
+            Button(Localization.cancel) {
+                showingMergeAllSheet = false
+            }
+            .buttonStyle(SecondaryButtonStyle())
+        }
+        .presentationDetents([.fraction(0.4), .medium, .large])
+    }
 }
 
 private struct MessageSnackBar<IconContent: View>: View {
@@ -155,6 +222,7 @@ fileprivate extension WooShippingSplitShipmentsDetailView {
         static let tabItemContentHorizontalPadding: CGFloat = 16.0
         static let tabItemContentVerticalPadding: CGFloat = 9.0
         static let cornerRadius: CGFloat = 8
+        static let gradientViewWidth: CGFloat = 32
     }
 
     enum Localization {
@@ -178,6 +246,40 @@ fileprivate extension WooShippingSplitShipmentsDetailView {
             value: "Undo",
             comment: "Button to revert moving items between shipments in the shipping label creation flow"
         )
+        static let cancel = NSLocalizedString(
+            "wooShippingSplitShipmentsDetailView.cancel",
+            value: "Cancel",
+            comment: "Button to dismiss a sheet in the shipping label creation flow"
+        )
+        static let removeShipmentFormat = NSLocalizedString(
+            "wooShippingSplitShipmentsDetailView.removeShipmentFormat",
+            value: "Remove %1$@",
+            comment: "Button to remove a shipment in the shipping label creation flow. " +
+            "The placeholder is the name of a shipment. Reads as: 'Remove shipment 1'."
+        )
+        static let mergeAll = NSLocalizedString(
+            "wooShippingSplitShipmentsDetailView.mergeAll",
+            value: "Merge all unfulfilled",
+            comment: "Button to merge all unfulfilled shipments in the shipping label creation flow."
+        )
+
+        enum MergeAllUnfulfilledSheet {
+            static let title = NSLocalizedString(
+                "wooShippingSplitShipmentsDetailView.mergeAllUnfulfilledSheet.title",
+                value: "Merge all unfulfilled shipments",
+                comment: "Title of the merge all unfulfilled shipments sheet in the shipping label creation flow."
+            )
+            static let description = NSLocalizedString(
+                "wooShippingSplitShipmentsDetailView.mergeAllUnfulfilledSheet.description",
+                value: "This will remove all unfulfilled split shipments and move all items into one shipment",
+                comment: "Message on the merge all unfulfilled shipments sheet in the shipping label creation flow."
+            )
+            static let confirmCTA = NSLocalizedString(
+                "wooShippingSplitShipmentsDetailView.mergeAllUnfulfilledSheet.confirmCTA",
+                value: "Merge all shipments",
+                comment: "Button to confirm merging all unfulfilled shipments sheet in the shipping label creation flow."
+            )
+        }
     }
 }
 

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Split Shipments/WooShippingSplitShipmentsViewModel.swift

@@ -210,6 +210,31 @@ final class WooShippingSplitShipmentsViewModel: ObservableObject {
         undoMovingItemsHandler?()
         movingCompletionMessage = nil
     }
+
+    func mergeAllUnfulfilledShipments() {
+        var mergedShipment = Shipment()
+
+        // TODO-15440: check for fulfilled shipments and remove them from the list.
+        shipments.forEach { shipment in
+            for item in shipment {
+                let matchingItemIndex = mergedShipment.firstIndex(where: {
+                    $0.packageItem.productOrVariationID == item.packageItem.productOrVariationID
+                })
+                if let matchingItemIndex {
+                    // Merge the quantity if the same item is merged to the shipment
+                    let updatedQuantity = item.packageItem.quantity + mergedShipment[matchingItemIndex].packageItem.quantity
+                    let updatedItem = ShippingLabelPackageItem(copy: item.packageItem, quantity: updatedQuantity)
+                    mergedShipment[matchingItemIndex] = CollapsibleShipmentItemCardViewModel(item: updatedItem, currency: order.currency)
+                } else {
+                    // Keep the item as-is
+                    mergedShipment.append(item)
+                }
+            }
+        }
+
+        shipments = [mergedShipment]
+        selectedShipmentIndex = 0
+    }
 }
 
 private extension WooShippingSplitShipmentsViewModel {

WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/TopTabView.swift

@@ -25,7 +25,9 @@ struct TopTabView<Content: View>: View {
     @State private var contentSize: CGSize = .zero
 
     @Binding var showTabs: Bool
+
     private let showContent: Bool
+    private let showDividerBelowTabs: Bool
 
     let tabs: [TopTabItem<Content>]
 
@@ -54,6 +56,7 @@ struct TopTabView<Content: View>: View {
     init(tabs: [TopTabItem<Content>],
          showTabs: Binding<Bool> = .constant(true),
          showContent: Bool = true,
+         showDividerBelowTabs: Bool = true,
          selectedTabIndex: Binding<Int> = .constant(0),
          tabsContainerHorizontalPadding: CGFloat? = 0.0,
          selectedStateColor: Color = Colors.selected,
@@ -67,6 +70,7 @@ struct TopTabView<Content: View>: View {
         self.tabs = tabs
         self._showTabs = showTabs
         self.showContent = showContent
+        self.showDividerBelowTabs = showDividerBelowTabs
         self._selectedTab = selectedTabIndex
         _tabWidths = State(initialValue: [CGFloat](repeating: 0, count: tabs.count))
         self.tabsContainerHorizontalPadding = tabsContainerHorizontalPadding
@@ -151,6 +155,7 @@ struct TopTabView<Content: View>: View {
                     }
                 }
                 Divider()
+                    .renderedIf(showDividerBelowTabs)
             }
 
             if showContent {

WooCommerce/WooCommerceTests/ViewRelated/Shipping Label/WooShipping Create Shipping Labels/Split shipments/WooShippingSplitShipmentsViewModelTests.swift

@@ -467,6 +467,42 @@ final class WooShippingSplitShipmentsViewModelTests: XCTestCase {
         XCTAssertEqual(viewModel.shipments[0][1].packageItem.productOrVariationID, items[1].productOrVariationID)
         XCTAssertEqual(viewModel.shipments[0][1].packageItem.quantity, 1)
     }
+
+    // MARK: - `mergeAllUnfulfilledShipments`
+
+    func test_mergeAllUnfulfilledShipments_updates_shipments_correctly() {
+        // Given
+        let items = [sampleItem(id: 1, weight: 5, value: 10, quantity: 2),
+                     sampleItem(id: 2, weight: 3, value: 2.5, quantity: 1),
+                     sampleItem(id: 3, weight: 4, value: 5, quantity: 3)]
+        let viewModel = WooShippingSplitShipmentsViewModel(order: sampleOrder,
+                                                           config: WooShippingConfig.fake(),
+                                                           items: items,
+                                                           currencySettings: currencySettings,
+                                                           shippingSettingsService: shippingSettingsService)
+
+        // Moving items to 2 new shipments
+        viewModel.shipments.first?.last?.childItemRows.first?.handleTap()
+        viewModel.moveSelectedItems(to: .newShipment)
+        viewModel.shipments.first?.last?.childItemRows.last?.handleTap()
+        viewModel.moveSelectedItems(to: .newShipment)
+
+        // Confidence checks
+        XCTAssertEqual(viewModel.shipments.count, 3)
+
+        // When
+        viewModel.mergeAllUnfulfilledShipments()
+
+        // Then
+        XCTAssertEqual(viewModel.shipments.count, 1)
+        XCTAssertEqual(viewModel.shipments[0].count, 3)
+        XCTAssertEqual(viewModel.shipments[0][0].packageItem.productOrVariationID, items[0].productOrVariationID)
+        XCTAssertEqual(viewModel.shipments[0][0].packageItem.quantity, 2)
+        XCTAssertEqual(viewModel.shipments[0][1].packageItem.productOrVariationID, items[1].productOrVariationID)
+        XCTAssertEqual(viewModel.shipments[0][1].packageItem.quantity, 1)
+        XCTAssertEqual(viewModel.shipments[0][2].packageItem.productOrVariationID, items[2].productOrVariationID)
+        XCTAssertEqual(viewModel.shipments[0][2].packageItem.quantity, 3)
+    }
 }
 
 private extension WooShippingSplitShipmentsViewModelTests {