ALFMOB-22: Add size picker to PDP

Alfie/Alfie.xcodeproj/project.pbxproj

@@ -8,7 +8,7 @@
 
 /* Begin PBXBuildFile section */
 		17036A8A2C1881A7002DD7AB /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = BAEFC2582B84A99000387C00 /* GoogleService-Info.plist */; };
-		490013A72BF608F50028C0FA /* ProductDetailsColorSheet.swift in Sources */ = {isa = PBXBuildFile; fileRef = 490013A62BF608F50028C0FA /* ProductDetailsColorSheet.swift */; };
+		490013A72BF608F50028C0FA /* ProductDetailsColorAndSizeSheet.swift in Sources */ = {isa = PBXBuildFile; fileRef = 490013A62BF608F50028C0FA /* ProductDetailsColorAndSizeSheet.swift */; };
 		49032CD72B694520002C86F5 /* TabBarView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 49032CD62B694520002C86F5 /* TabBarView.swift */; };
 		49032CDA2B6949CD002C86F5 /* HomeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 49032CD92B6949CD002C86F5 /* HomeView.swift */; };
 		49032CE32B694BB7002C86F5 /* BagView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 49032CE22B694BB7002C86F5 /* BagView.swift */; };
@@ -165,7 +165,7 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		490013A62BF608F50028C0FA /* ProductDetailsColorSheet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductDetailsColorSheet.swift; sourceTree = "<group>"; };
+		490013A62BF608F50028C0FA /* ProductDetailsColorAndSizeSheet.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductDetailsColorAndSizeSheet.swift; sourceTree = "<group>"; };
 		490013A92BF60B730028C0FA /* ProductDetailsColorSheetSnapshotTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProductDetailsColorSheetSnapshotTests.swift; sourceTree = "<group>"; };
 		49032CD62B694520002C86F5 /* TabBarView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarView.swift; sourceTree = "<group>"; };
 		49032CD92B6949CD002C86F5 /* HomeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeView.swift; sourceTree = "<group>"; };
@@ -352,7 +352,7 @@
 		490013A82BF60A470028C0FA /* ComplementaryViews */ = {
 			isa = PBXGroup;
 			children = (
-				490013A62BF608F50028C0FA /* ProductDetailsColorSheet.swift */,
+				490013A62BF608F50028C0FA /* ProductDetailsColorAndSizeSheet.swift */,
 			);
 			path = ComplementaryViews;
 			sourceTree = "<group>";
@@ -1289,7 +1289,7 @@
 				49032CE72B694BC6002C86F5 /* ShopView.swift in Sources */,
 				BAE1A0552BA0B8F800DB5276 /* ServiceProvider.swift in Sources */,
 				BA833AF92B90863D0056D3F5 /* WebViewPreload.swift in Sources */,
-				490013A72BF608F50028C0FA /* ProductDetailsColorSheet.swift in Sources */,
+				490013A72BF608F50028C0FA /* ProductDetailsColorAndSizeSheet.swift in Sources */,
 				DA9AC7962B768BD700140F91 /* LocalizableProtocol.swift in Sources */,
 				DA5736F32BCD3BD900FA5107 /* ThemedURL.swift in Sources */,
 				A13968C62B91F47E00AB8806 /* BagDependencyContainer.swift in Sources */,

Alfie/Alfie/Views/ProductDetails/ComplementaryViews/ProductDetailsColorAndSizeSheet.swift

@@ -0,0 +1,173 @@
+import Models
+import StyleGuide
+import SwiftUI
+#if DEBUG
+import Mocks
+#endif
+
+private enum Constants {
+    static let sheetCloseIconSize: CGFloat = 16
+    static let colorCheckmarkSize: CGFloat = 16
+}
+
+enum SheetType {
+    case color
+    case size
+}
+
+struct ProductDetailsColorAndSizeSheet<ViewModel: ProductDetailsViewModelProtocol>: View {
+    @StateObject private var viewModel: ViewModel
+    @Binding private var isPresented: Bool
+    @Binding private var searchText: String
+
+    private let type: SheetType
+
+    private var title: String {
+        // swiftlint:disable vertical_whitespace_between_cases
+        switch type {
+        case .color:
+            LocalizableProductDetails.$color
+        case .size:
+            LocalizableProductDetails.$size
+        }
+        // swiftlint:enable vertical_whitespace_between_cases
+    }
+
+    internal init(viewModel: ViewModel, type: SheetType, isPresented: Binding<Bool>, searchText: Binding<String> = Binding.constant("")) {
+        self._viewModel = StateObject(wrappedValue: viewModel)
+        self._isPresented = isPresented
+        self._searchText = searchText
+        self.type = type
+    }
+
+    var body: some View {
+        VStack {
+            HStack {
+                Text(title)
+                    .font(Font(theme.font.paragraph.normal.withSize(18)))
+                    .foregroundStyle(Colors.primary.mono900)
+
+                Spacer()
+
+                Button {
+                    isPresented = false
+                } label: {
+                    Icon.close.image
+                        .resizable()
+                        .scaledToFit()
+                        .frame(size: Constants.sheetCloseIconSize)
+                        .foregroundStyle(Colors.primary.mono900)
+                }
+            }
+            .padding([.top, .horizontal], Spacing.space200)
+
+            ThemedDivider.horizontalThin
+                .padding(.bottom, Spacing.space100)
+
+            itemsView
+        }
+        .presentationDetents([.medium])
+        .presentationDragIndicator(.hidden)
+    }
+}
+
+private extension ProductDetailsColorAndSizeSheet {
+    @ViewBuilder var itemsView: some View {
+        // swiftlint:disable vertical_whitespace_between_cases
+        switch type {
+        case .color:
+            colorItemsView
+        case .size:
+            sizeItemsView
+        }
+        // swiftlint:enable vertical_whitespace_between_cases
+    }
+
+    @ViewBuilder var colorItemsView: some View {
+        ScrollView {
+            ForEach(viewModel.colorSwatches(filteredBy: searchText)) { item in
+                VStack {
+                    Button {
+                        viewModel.colorSelectionConfiguration.selectedItem = item
+                        isPresented = false
+                    } label: {
+                        HStack(spacing: Spacing.space200) {
+                            ColorSwatchView(
+                                item: item,
+                                swatchSize: .normal,
+                                isSelected: viewModel.colorSelectionConfiguration.selectedItem == item
+                            )
+
+                            Text.build(theme.font.paragraph.normal(item.name.capitalized))
+
+                            Spacer()
+
+                            if viewModel.colorSelectionConfiguration.selectedItem == item {
+                                checkmark
+                            }
+                        }
+                    }
+                    .tint(Colors.primary.black)
+
+                    ThemedDivider.horizontalThin
+                }
+            }
+            .padding(.horizontal, Spacing.space200)
+            .padding(.vertical, Spacing.space100)
+        }
+        .searchable(
+            placeholder: LocalizableProductDetails.$searchColors,
+            placeholderOnFocus: LocalizableProductDetails.$searchColors,
+            searchText: $searchText,
+            theme: .soft,
+            dismissConfiguration: .init(type: .cancel(title: LocalizableSearch.$cancel)),
+            verticalSpacing: Spacing.space200
+        )
+    }
+
+    @ViewBuilder var sizeItemsView: some View {
+        ScrollView {
+            ForEach(viewModel.sizingSelectionConfiguration.items) { item in
+                VStack {
+                    Button {
+                        viewModel.sizingSelectionConfiguration.selectedItem = item
+                        isPresented = false
+                    } label: {
+                        HStack(spacing: Spacing.space200) {
+                            Text.build(theme.font.paragraph.normal(item.name.capitalized))
+
+                            Spacer()
+
+                            if viewModel.sizingSelectionConfiguration.selectedItem == item {
+                                checkmark
+                            }
+                        }
+                    }
+                    .tint(Colors.primary.black)
+
+                    ThemedDivider.horizontalThin
+                }
+            }
+            .padding(.horizontal, Spacing.space200)
+            .padding(.vertical, Spacing.space100)
+        }
+    }
+
+    @ViewBuilder var checkmark: some View {
+        Icon.checkmark.image
+            .resizable()
+            .scaledToFit()
+            .frame(size: Constants.colorCheckmarkSize)
+    }
+}
+
+#if DEBUG
+#Preview {
+    ProductDetailsColorAndSizeSheet(
+        viewModel: MockProductDetailsViewModel(),
+        type: .color,
+        isPresented: .constant(true),
+        searchText: .constant("")
+    )
+}
+#endif

Alfie/Alfie/Views/ProductDetails/Localisation/LocalizableProductDetails.swift

@@ -14,6 +14,8 @@ struct LocalizableProductDetails: LocalizableProtocol {
     @LocalizableResource<Self>(.errorButtonBackLabel) static var errorButtonBackLabel
     @LocalizableResource<Self>(.color) static var color
     @LocalizableResource<Self>(.searchColors) static var searchColors
+    @LocalizableResource<Self>(.size) static var size
+    @LocalizableResource<Self>(.oneSize) static var oneSize
 
     enum Keys: String, LocalizableKeyProtocol {
         case complementaryInfoDelivery = "KeyComplementaryInfoDelivery"
@@ -29,5 +31,7 @@ struct LocalizableProductDetails: LocalizableProtocol {
         case errorButtonBackLabel = "KeyErrorButtonBackLabel"
         case color = "KeyColor"
         case searchColors = "KeySearchColors"
+        case size = "KeySize"
+        case oneSize = "KeyOneSize"
     }
 }

Alfie/Alfie/Views/ProductDetails/Localisation/LocalizableProductDetails.xcstrings

@@ -100,6 +100,17 @@
         }
       }
     },
+    "KeyOneSize" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "One Size"
+          }
+        }
+      }
+    },
     "KeyOutOfStock" : {
       "extractionState" : "manual",
       "localizations" : {
@@ -143,6 +154,17 @@
           }
         }
       }
+    },
+    "KeySize" : {
+      "extractionState" : "manual",
+      "localizations" : {
+        "en" : {
+          "stringUnit" : {
+            "state" : "translated",
+            "value" : "Size"
+          }
+        }
+      }
     }
   },
   "version" : "1.0"