Merge pull request #63 from Purchasely/feat/searchable-products

feat: searchable and more detailed products list

Author: El-Fitz

Example/Packages/Sources/PurchaselyExampleApp/PurchaselySampleV2App.swift

@@ -9,7 +9,9 @@ import SwiftUI
 
 @main
 public struct PurchaselySampleV2App: App {
-    public init() { }
+    public init() {
+        UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).backgroundColor = .white
+    }
 
     public var body: some Scene {
         WindowGroup {

Example/Packages/Sources/PurchaselyExampleApp/Screens/Products/ProductsView.swift

@@ -15,8 +15,7 @@ class ProductTest {
 }
 
 struct ProductsView: View {
-    
-    @State private var searchText = ""
+
     @StateObject var viewModel = ProductsViewModel()
 
     var body: some View {
@@ -28,11 +27,9 @@ struct ProductsView: View {
                 .frame(maxHeight: 1)
                 .navigationBarTitle("Products and Plans", displayMode: .inline)
 
-            VStack {
-                ProductListView()
-            }
-            .padding(.top, 16)
-            .background(Color.white)
+            ProductListView()
+                .background(Color.white)
+                .searchable(text: $viewModel.searchQuery, prompt: "Products and Plans")
 
         }.frame(maxWidth: .infinity,
                 maxHeight: .infinity,
@@ -42,42 +39,25 @@ struct ProductsView: View {
 }
 
 extension ProductsView {
-    
-    @ViewBuilder
+
     func ProductListView() -> some View {
         List {
-            ForEach(viewModel.plyProducts, id: \.vendorId) { plyProduct in
+            ForEach(viewModel.searchResults, id: \.vendorId) { plyProduct in
                 Section(content: {
                     PlansView(plyProduct)
                 }, header: {
                     ProductTitleView(plyProduct)
                 })
             }
-        }.listRowSpacing(10)
-            .scrollContentBackground(.hidden)
+        }
+        .listRowSpacing(10)
+        .scrollContentBackground(.hidden)
     }
 
-    @ViewBuilder
     func PlansView(_ plyProduct: SampleProductObject) -> some View {
-        ForEach(plyProduct.plans) { plan in
-            VStack(alignment: .leading) {
-                Text(plan.vendorId)
-                    .bold()
-                Text(plan.name)
-                Text(plan.appleProductId)
-                Button {
-                    UIPasteboard.general.string = plan.vendorId
-                } label: {
-                    Image(systemName: "doc.on.doc")
-                        .foregroundColor(.white)
-                        .padding(.trailing)
-                }
-            }
-            .listRowBackground(Color.mainLight)
-        }
+        ForEach(plyProduct.plans, content: PlanView.init(plan:))
     }
 
-    @ViewBuilder
     func ProductTitleView(_ plyProduct: SampleProductObject) -> some View {
         HStack {
             VStack(alignment: .leading) {
@@ -87,8 +67,8 @@ extension ProductsView {
 
                 Text(plyProduct.vendorId)
                     .font(.body)
-            }.padding(.trailing, 16)
-            
+            }
+            Spacer()
             ZStack {
                 Capsule()
                     .frame(width: 80, height: 30)
@@ -102,6 +82,77 @@ extension ProductsView {
     }
 }
 
+struct PlanView: View {
+    @State var isExpanded: Bool = false
+
+    let plan: SamplePlanObject
+    
+    init(plan: SamplePlanObject) {
+        self.plan = plan
+    }
+
+    var body: some View {
+        VStack(alignment: .leading) {
+            HStack {
+                Text(plan.name)
+                    .font(.headline)
+                Spacer()
+                Button {
+                    UIPasteboard.general.string = plan.vendorId
+                } label: {
+                    Image(systemName: "doc.on.doc")
+                        .foregroundColor(.white)
+                        .frame(width: 35, height: 35)
+                }
+                .buttonStyle(.plain)
+            }
+            HStack {
+                VStack(alignment: .leading) {
+                    Text(plan.vendorId)
+                    Text(plan.appleProductId)
+                }
+                .foregroundStyle(.secondary)
+                .fontWeight(.semibold)
+                Spacer()
+                Button(action: {
+                    isExpanded.toggle()
+                }, label: {
+                    Image(systemName: isExpanded ? "chevron.up" : "chevron.down")
+                        .frame(width: 35, height: 35)
+                })
+                .buttonStyle(.plain)
+                .font(.body)
+            }
+            if isExpanded {
+                Spacer()
+                    .frame(height: 20)
+                labelWithValue("localized price", with: plan.plyPlan.localizedPrice())
+                labelWithValue("localized full price", with: plan.plyPlan.localizedFullPrice())
+                labelWithValue("localized intro. price", with: plan.plyPlan.localizedIntroductoryPrice())
+                labelWithValue("localized full intro. price", with: plan.plyPlan.localizedFullIntroductoryPrice())
+                Divider()
+                labelWithValue("intro. period", with: plan.plyPlan.introductoryPeriod())
+                labelWithValue("localized period", with: plan.plyPlan.localizedPeriod())
+                labelWithValue("localized intro. period", with: plan.plyPlan.localizedIntroductoryPeriod())
+                Divider()
+                labelWithValue("duration", with: plan.plyPlan.duration)
+                labelWithValue("intro. duration", with: plan.plyPlan.introductoryDuration())
+                labelWithValue("localized intro. duration", with: plan.plyPlan.localizedIntroductoryDuration())
+                Divider()
+                labelWithValue("amount", with: plan.plyPlan.amount)
+                labelWithValue("currency code", with: plan.plyPlan.currencyCode)
+                labelWithValue("currency symbol", with: plan.plyPlan.currencySymbol)
+            }
+        }
+        .font(.subheadline)
+        .listRowBackground(Color.mainLight)
+    }
+    
+    func labelWithValue<T: CustomStringConvertible>(_ string: String, with value: T?) -> Text {
+        Text("\(string): \(value?.description ?? "nil")")
+    }
+}
+
 #Preview {
     ProductsView()
 }

Example/Packages/Sources/PurchaselyExampleApp/Screens/Products/ProductsViewModel.swift

@@ -5,6 +5,7 @@
 //  Created by Florian Huet on 22/12/2023.
 //
 
+import Combine
 import Foundation
 import Purchasely
 
@@ -15,6 +16,8 @@ struct SamplePlanObject: Identifiable {
     var vendorId: String
     var appleProductId: String
     var offers: [String]
+    
+    var plyPlan: PLYPlan
 }
 
 struct SampleProductObject: Identifiable, Hashable {
@@ -34,11 +37,22 @@ struct SampleProductObject: Identifiable, Hashable {
 
 class ProductsViewModel: ObservableObject {
 
-    @Published var plyProducts: [SampleProductObject] = []
+    @Published private var plyProducts: [SampleProductObject] = []
     @Published var plyPlansStringList: [String] = []
     @Published var offersForPlan: [String] = []
-    
+    @Published var searchQuery: String = ""
+
+    @Published var searchResults: [SampleProductObject] = []
+
     init() {
+        $plyProducts
+            .combineLatest($searchQuery.map(\.localizedLowercase)) { (products: [SampleProductObject], query: String) -> [SampleProductObject] in
+                if query.isEmpty {
+                    return products
+                }
+                return products.compactMap(match(query: query))
+            }
+            .assign(to: &$searchResults)
         loadProducts()
     }
 
@@ -50,8 +64,11 @@ class ProductsViewModel: ObservableObject {
                 SamplePlanObject(name: $0.name ?? "",
                                  vendorId: $0.vendorId,
                                  appleProductId: $0.appleProductId ?? "",
-                                 offers: $0.promoOffers.map { $0.vendorId }) })
+                                 offers: $0.promoOffers.map { $0.vendorId },
+                                 plyPlan: $0) }
+                .sorted(by: { $0.name < $1.name }))
             }
+            .sorted(by: { $0.name < $1.name })
 
             for product in self.plyProducts {
                 for plan in product.plans {
@@ -76,3 +93,30 @@ class ProductsViewModel: ObservableObject {
         offersForPlan = []
     }
 }
+
+fileprivate func match(query: String) -> (_ product: SampleProductObject) -> SampleProductObject? {
+    return { product in
+        if product.name.lowercased().contains(query) || product.vendorId.lowercased().contains(query) {
+            return product
+        }
+
+        let filteredPlans = product.plans.filter(match(query: query))
+        
+        guard !filteredPlans.isEmpty else { return nil }
+
+        return SampleProductObject(
+            id: product.id,
+            vendorId: product.vendorId,
+            name: product.name,
+            plans: filteredPlans
+        )
+    }
+}
+
+fileprivate func match(query: String) -> (_ plan: SamplePlanObject) -> Bool {
+    return { plan in
+        plan.name.contains(query) ||
+        plan.vendorId.contains(query) ||
+        plan.appleProductId.contains(query)
+    }
+}