Shipping Labels: Fix UI issues with shipping service view (#15718)

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Package and Rate Selection/WooCarrierPackagesSelectionView.swift

@@ -99,15 +99,16 @@ struct WooCarrierPackagesSelectionView: View {
             if viewModel.carrierTabs.isNotEmpty {
                 TopTabView(tabs: viewModel.carrierTabs,
                            showContent: false,
-                           selectedTabIndex: $viewModel.selectedCarriersTabIndex,
+                           selectedTabIndex: viewModel.selectedCarriersTabIndex,
                            tabsContainerHorizontalPadding: nil,
                            selectedStateColor: Color.accentColor,
                            unselectedStateColor: .secondary,
                            selectedTabIndicatorHeight: Constants.selectedTabIndicatorHeight,
                            tabPadding: Constants.tabPadding,
                            tabsNameFont: Font.subheadline.bold(),
                            tabItemContentHorizontalPadding: Constants.tabItemContentHorizontalPadding,
-                           tabItemContentVerticalPadding: Constants.tabItemContentVerticalPadding)
+                           tabItemContentVerticalPadding: Constants.tabItemContentVerticalPadding,
+                           onTabChange: { viewModel.selectedCarriersTabIndex = $0 })
             } else if viewModel.isLoadingPackages {
                 // Loading state
                 loadingStateView

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Package and Rate Selection/WooShippingServiceView.swift

@@ -5,11 +5,11 @@ import SwiftUI
 struct WooShippingServiceView: View {
     @ObservedObject var viewModel: WooShippingServiceViewModel
 
-    private var carriers: [TopTabItem<WooShippingServiceCardListView>] {
+    private var carriers: [TopTabItem<EmptyView>] {
         viewModel.serviceTabs.map { tab in
             TopTabItem(name: tab.id.name,
                        icon: tab.id.logo) {
-                WooShippingServiceCardListView(cards: tab.cards)
+                EmptyView()
             }
         }
     }
@@ -78,12 +78,17 @@ struct WooShippingServiceView: View {
     }
 
     var contentView: some View {
-        TopTabView(tabs: carriers,
-                   tabsContainerHorizontalPadding: 16,
-                   unselectedStateColor: .secondary,
-                   tabsNameFont: .subheadline.bold(),
-                   tabItemContentHorizontalPadding: 6,
-                   tabItemContentVerticalPadding: 12)
+        VStack(spacing: 0) {
+            TopTabView(tabs: carriers,
+                       showContent: false,
+                       tabsContainerHorizontalPadding: 16,
+                       unselectedStateColor: .secondary,
+                       tabsNameFont: .subheadline.bold(),
+                       tabItemContentHorizontalPadding: 6,
+                       tabItemContentVerticalPadding: 12,
+                       onTabChange: { viewModel.selectedTabIndex = $0 })
+            WooShippingServiceCardListView(cards: viewModel.displayedServiceCards)
+        }
         .padding(.horizontal, Layout.padding * -1) // Offset the additional padding in TopTabView
     }
 

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Package and Rate Selection/WooShippingServiceViewModel.swift

@@ -17,6 +17,10 @@ final class WooShippingServiceViewModel: ObservableObject {
     /// Contains the data about available shipping rates, grouped by carrier.
     @Published private(set) var serviceTabs: [WooShippingServiceTab] = []
 
+    @Published var selectedTabIndex: Int = 0
+
+    @Published private(set) var displayedServiceCards: [WooShippingServiceCardViewModel] = []
+
     /// Selected shipping service rate.
     @Published private(set) var selectedRate: WooShippingSelectedRate?
 
@@ -57,6 +61,7 @@ final class WooShippingServiceViewModel: ObservableObject {
         self.stores = stores
         self.analytics = analytics
         self.onSelectRate = onSelectRate
+        observeSelectedTab()
     }
 
     /// Sorts the shipping services by the provided sort order.
@@ -219,6 +224,14 @@ private extension WooShippingServiceViewModel {
         }
         loadingState = state
     }
+
+    func observeSelectedTab() {
+        $serviceTabs.combineLatest($selectedTabIndex)
+            .map { tabs, index in
+                tabs[safe: index]?.cards ?? []
+            }
+            .assign(to: &$displayedServiceCards)
+    }
 }
 
 // MARK: Constants

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

@@ -108,7 +108,7 @@ private extension WooShippingSplitShipmentsView {
             TopTabView(tabs: viewModel.topTabItems,
                        showContent: false,
                        showDividerBelowTabs: false,
-                       selectedTabIndex: $viewModel.selectedShipmentIndex,
+                       selectedTabIndex: viewModel.selectedShipmentIndex,
                        tabsContainerHorizontalPadding: nil,
                        selectedStateColor: .accentColor,
                        unselectedStateColor: .secondary,
@@ -119,7 +119,8 @@ private extension WooShippingSplitShipmentsView {
                        tabsIconAlignment: .trailing,
                        tabsIconForegroundColor: Layout.green,
                        tabItemContentHorizontalPadding: Layout.tabItemContentHorizontalPadding,
-                       tabItemContentVerticalPadding: Layout.tabItemContentVerticalPadding)
+                       tabItemContentVerticalPadding: Layout.tabItemContentVerticalPadding,
+                       onTabChange: { viewModel.selectedShipmentIndex = $0 })
             .overlay(alignment: .trailing) {
                 LinearGradient(gradient: Gradient(colors: [.clear, Color(.basicBackground)]), startPoint: .leading, endPoint: .center)
                     .frame(width: Layout.gradientViewWidth)

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShippingCreateLabelsView.swift

@@ -144,7 +144,7 @@ private extension WooShippingCreateLabelsView {
             TopTabView(tabs: tabs,
                        showContent: false,
                        showDividerBelowTabs: false,
-                       selectedTabIndex: $viewModel.selectedShipmentIndex,
+                       selectedTabIndex: viewModel.selectedShipmentIndex,
                        tabsContainerHorizontalPadding: nil,
                        selectedStateColor: .accentColor,
                        unselectedStateColor: .secondary,
@@ -155,7 +155,8 @@ private extension WooShippingCreateLabelsView {
                        tabsIconAlignment: .trailing,
                        tabsIconForegroundColor: Layout.green,
                        tabItemContentHorizontalPadding: Layout.tabItemContentHorizontalPadding,
-                       tabItemContentVerticalPadding: Layout.tabItemContentVerticalPadding)
+                       tabItemContentVerticalPadding: Layout.tabItemContentVerticalPadding,
+                       onTabChange: { viewModel.selectedShipmentIndex = $0 })
             .overlay(alignment: .trailing) {
                 LinearGradient(gradient: Gradient(colors: [.clear, Color(.basicBackground)]), startPoint: .leading, endPoint: .center)
                     .frame(width: Layout.gradientViewWidth)

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

@@ -23,7 +23,7 @@ struct TopTabView<Content: View>: View {
         case trailing
     }
 
-    @Binding private var selectedTab: Int
+    @State private var selectedTab: Int = 0
     @State private var underlineOffset: CGFloat = 0
     @State private var tabWidths: [CGFloat]
     @GestureState private var dragState: DragState = .inactive
@@ -61,11 +61,13 @@ struct TopTabView<Content: View>: View {
     let tabItemContentHorizontalPadding: CGFloat?
     let tabItemContentVerticalPadding: CGFloat?
 
+    let onTabChange: (Int) -> Void
+
     init(tabs: [TopTabItem<Content>],
          showTabs: Binding<Bool> = .constant(true),
          showContent: Bool = true,
          showDividerBelowTabs: Bool = true,
-         selectedTabIndex: Binding<Int> = .constant(0),
+         selectedTabIndex: Int = 0,
          tabsContainerHorizontalPadding: CGFloat? = 0.0,
          selectedStateColor: Color = Colors.selected,
          unselectedStateColor: Color = .primary,
@@ -76,12 +78,13 @@ struct TopTabView<Content: View>: View {
          tabsIconAlignment: TabsIconAlignment = .leading,
          tabsIconForegroundColor: Color? = nil,
          tabItemContentHorizontalPadding: CGFloat? = nil,
-         tabItemContentVerticalPadding: CGFloat? = nil) {
+         tabItemContentVerticalPadding: CGFloat? = nil,
+         onTabChange: @escaping (Int) -> Void = { _ in }) {
         self.tabs = tabs
         self._showTabs = showTabs
         self.showContent = showContent
         self.showDividerBelowTabs = showDividerBelowTabs
-        self._selectedTab = selectedTabIndex
+        self.selectedTab = selectedTabIndex
         _tabWidths = State(initialValue: [CGFloat](repeating: 0, count: tabs.count))
         self.tabsContainerHorizontalPadding = tabsContainerHorizontalPadding
         self.selectedStateColor = selectedStateColor
@@ -94,6 +97,7 @@ struct TopTabView<Content: View>: View {
         self.tabsIconForegroundColor = tabsIconForegroundColor
         self.tabItemContentHorizontalPadding = tabItemContentHorizontalPadding
         self.tabItemContentVerticalPadding = tabItemContentVerticalPadding
+        self.onTabChange = onTabChange
     }
 
     private func tabItemContentView(_ index: Int, selected: Bool) -> some View {
@@ -189,6 +193,7 @@ struct TopTabView<Content: View>: View {
                                 withAnimation {
                                     selectTab(in: scrollViewProxy, at: newSelectedTab)
                                 }
+                                onTabChange(newSelectedTab)
                             })
                             .coordinateSpace(name: Constants.tabsHorizontalStackNameSpace)
                         }

WooCommerce/WooCommerceTests/ViewRelated/Shipping Label/WooShipping Create Shipping Labels/WooShippingServiceViewModelTests.swift

@@ -295,6 +295,28 @@ final class WooShippingServiceViewModelTests: XCTestCase {
         // Then
         XCTAssertEqual(viewModel.loadingState, .error(.noRatesAvailable(isHAZMAT: true)))
     }
+
+    func test_switching_tab_updates_the_card_list() {
+        // Given
+        let viewModel = WooShippingServiceViewModel(order: Order.fake(),
+                                                    originAddress: WooShippingAddress.fake(),
+                                                    destinationAddress: sampleDestinationAddress(),
+                                                    stores: stores)
+
+        // When
+        viewModel.loadLabelRates(for: samplePackage)
+
+        // Then
+        XCTAssertEqual(viewModel.displayedServiceCards.count, 2)
+        XCTAssertEqual(viewModel.displayedServiceCards.first?.title, "USPS - Media Mail")
+
+        // When
+        viewModel.selectedTabIndex = 1
+
+        // Then
+        XCTAssertEqual(viewModel.displayedServiceCards.count, 1)
+        XCTAssertEqual(viewModel.displayedServiceCards.first?.title, "DHL - Next Day")
+    }
 }
 
 private extension WooShippingServiceViewModelTests {