Fix otp view

canopas · Jun 20, 2024 · 3b35edb · 3b35edb
1 parent 3847256
commit 3b35edb
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 84 deletions.
diff --git a/BaseStyle/BaseStyle.xcodeproj/project.pbxproj b/BaseStyle/BaseStyle.xcodeproj/project.pbxproj
@@ -11,6 +11,7 @@
 		A40018A9B957803B8105BEA5 /* Pods_BaseStyle.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 174198EE4AF2FC82DADEB060 /* Pods_BaseStyle.framework */; };
 		D82174BE2BBAD86D00DB42C3 /* ProfileImageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D82174BD2BBAD86D00DB42C3 /* ProfileImageView.swift */; };
 		D8302D9C2B9EE1D2005ACA13 /* PrimaryFloatingButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = D8302D9B2B9EE1D2005ACA13 /* PrimaryFloatingButton.swift */; };
+		D86632962C2410BB009D3EF5 /* OtpTextInputView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D86632952C2410BB009D3EF5 /* OtpTextInputView.swift */; };
 		D887213F2B99992A009DC5BE /* LoaderViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D887213E2B99992A009DC5BE /* LoaderViewModel.swift */; };
 		D89C933F2BC3C0F800FACD16 /* ForwardIcon.swift in Sources */ = {isa = PBXBuildFile; fileRef = D89C933E2BC3C0F800FACD16 /* ForwardIcon.swift */; };
 		D89C93462BC42DE500FACD16 /* MailComposeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D89C93452BC42DE500FACD16 /* MailComposeView.swift */; };
@@ -72,6 +73,7 @@
 		CC9EC1F1C0A5A0821118E6CA /* Pods-BaseStyleTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-BaseStyleTests.debug.xcconfig"; path = "Target Support Files/Pods-BaseStyleTests/Pods-BaseStyleTests.debug.xcconfig"; sourceTree = "<group>"; };
 		D82174BD2BBAD86D00DB42C3 /* ProfileImageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProfileImageView.swift; sourceTree = "<group>"; };
 		D8302D9B2B9EE1D2005ACA13 /* PrimaryFloatingButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PrimaryFloatingButton.swift; sourceTree = "<group>"; };
+		D86632952C2410BB009D3EF5 /* OtpTextInputView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OtpTextInputView.swift; sourceTree = "<group>"; };
 		D887213E2B99992A009DC5BE /* LoaderViewModel.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = LoaderViewModel.swift; path = BaseStyle/Views/LoaderViewModel.swift; sourceTree = SOURCE_ROOT; };
 		D89C933E2BC3C0F800FACD16 /* ForwardIcon.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ForwardIcon.swift; sourceTree = "<group>"; };
 		D89C93452BC42DE500FACD16 /* MailComposeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MailComposeView.swift; sourceTree = "<group>"; };
@@ -297,6 +299,7 @@
 				D8D42AAF2B872E44009B345D /* LoaderView.swift */,
 				D8D14A4F2BA090F000F45FF2 /* ShareSheetView.swift */,
 				D89C93452BC42DE500FACD16 /* MailComposeView.swift */,
+				D86632952C2410BB009D3EF5 /* OtpTextInputView.swift */,
 				D89DBE3B2B88AA1500E5F1BD /* CustomTextField.swift */,
 				D82174BD2BBAD86D00DB42C3 /* ProfileImageView.swift */,
 				D8E244C02B986CD800C6C82A /* ImagePickerView.swift */,
@@ -513,6 +516,7 @@
 				D8D42AAC2B872A7C009B345D /* ToastView.swift in Sources */,
 				D8D42A952B85F8A2009B345D /* Bundle+Extension.swift in Sources */,
 				D89C93462BC42DE500FACD16 /* MailComposeView.swift in Sources */,
+				D86632962C2410BB009D3EF5 /* OtpTextInputView.swift in Sources */,
 				D8E244C12B986CD800C6C82A /* ImagePickerView.swift in Sources */,
 				D89DBE312B8884E300E5F1BD /* SectionHeaderView.swift in Sources */,
 				D8D42A862B85D08F009B345D /* Font+Extension.swift in Sources */,

diff --git a/BaseStyle/BaseStyle/CustomUI/OtpTextInputView.swift b/BaseStyle/BaseStyle/CustomUI/OtpTextInputView.swift
@@ -0,0 +1,53 @@
+//
+//  OtpTextInputView.swift
+//  BaseStyle
+//
+//  Created by Amisha Italiya on 20/06/24.
+//
+
+import SwiftUI
+
+public struct OtpTextInputView: View {
+
+    private let OTP_TOTAL_CHARACTERS = 6
+
+    @Binding var text: String
+
+    var isFocused: FocusState<Bool>.Binding
+    var keyboardType: UIKeyboardType
+
+    var onOtpVerify: (() -> Void)?
+
+    public init(text: Binding<String>, isFocused: FocusState<Bool>.Binding,
+                keyboardType: UIKeyboardType = .numberPad, onOtpVerify: ( () -> Void)? = nil) {
+        self._text = text
+        self.isFocused = isFocused
+        self.keyboardType = keyboardType
+        self.onOtpVerify = onOtpVerify
+    }
+
+    public var body: some View {
+        VStack(alignment: .center, spacing: 10) {
+            TextField("", text: $text)
+                .kerning(16)
+                .tint(primaryColor)
+                .font(.subTitle1(34))
+                .foregroundColor(primaryText)
+                .multilineTextAlignment(.center)
+                .keyboardType(keyboardType)
+                .textContentType(.oneTimeCode)
+                .disableAutocorrection(true)
+                .focused(isFocused)
+                .onChange(of: text) { newValue in
+                    if newValue.count == OTP_TOTAL_CHARACTERS {
+                        onOtpVerify?()
+                        UIApplication.shared.endEditing()
+                    }
+                }
+
+            Divider()
+                .background(outlineColor)
+                .padding(.horizontal, 60)
+        }
+    }
+}
diff --git a/Splito/UI/Home/Groups/Add Member/JoinMemberView.swift b/Splito/UI/Home/Groups/Add Member/JoinMemberView.swift
@@ -13,18 +13,29 @@ struct JoinMemberView: View {
     @StateObject var viewModel: JoinMemberViewModel
 
     @State var selectedField: Int = 0
+    @FocusState private var isFocused: Bool
 
     var body: some View {
         VStack(alignment: .center, spacing: 30) {
             VSpacer(40)
 
             HeaderTextView(title: "Enter the Invite Code", alignment: .center)
 
-            JoinWithCodeView(code: $viewModel.code, selectedField: $selectedField)
+            OtpTextInputView(text: $viewModel.code, isFocused: $isFocused,
+                             keyboardType: .alphabet, onOtpVerify: nil)
+                .onAppear {
+                    if viewModel.code.isEmpty {
+                        isFocused = true
+                    } else {
+                        isFocused = false
+                        UIApplication.shared.endEditing()
+                    }
+                }
 
             SubtitleTextView(text: "Get the code from the group creator to join.")
 
-            PrimaryButton(text: "Join Group", isEnabled: !viewModel.code.isEmpty, showLoader: viewModel.showLoader, onClick: viewModel.joinMemberWithCode)
+            PrimaryButton(text: "Join Group", isEnabled: !viewModel.code.isEmpty,
+                          showLoader: viewModel.showLoader, onClick: viewModel.joinMemberWithCode)
 
             Spacer()
         }
@@ -37,53 +48,6 @@ struct JoinMemberView: View {
     }
 }
 
-private struct JoinWithCodeView: View {
-
-    @Binding var code: String
-    @Binding var selectedField: Int
-
-    private let CODE_TOTAL_CHARACTERS = 6
-    @FocusState private var isFocused: Bool
-
-    var body: some View {
-        VStack(alignment: .center, spacing: 10) {
-            TextField("Code", text: $code)
-                .font(.subTitle1(34))
-                .foregroundColor(primaryText)
-                .kerning(16)
-                .multilineTextAlignment(.center)
-                .keyboardType(.alphabet)
-                .textContentType(.oneTimeCode)
-                .disableAutocorrection(true)
-                .focused($isFocused)
-                .onChange(of: code) { newValue in
-                    if newValue.count > CODE_TOTAL_CHARACTERS {
-                        code = String(newValue.prefix(CODE_TOTAL_CHARACTERS))
-                    }
-                    if newValue.count == CODE_TOTAL_CHARACTERS {
-                        UIApplication.shared.endEditing()
-                    }
-                }
-
-            Divider()
-                .background(outlineColor)
-                .padding(.horizontal, 60)
-        }
-        .onAppear {
-            if code.isEmpty {
-                isFocused = true
-            } else {
-                isFocused = false
-                UIApplication.shared.endEditing()
-            }
-        }
-        .padding(.horizontal, 16)
-        .onChange(of: selectedField) { newValue in
-            isFocused = (newValue == 1)
-        }
-    }
-}
-
 #Preview {
     JoinMemberView(viewModel: JoinMemberViewModel(router: .init(root: .JoinMemberView)))
 }
diff --git a/Splito/UI/Home/Groups/Group/Group Options/Transactions/GroupTransactionsRouteView.swift b/Splito/UI/Home/Groups/Group/Group Options/Transactions/GroupTransactionsRouteView.swift
@@ -2,7 +2,7 @@
 //  GroupTransactionsRouteView.swift
 //  Splito
 //
-//  Created by Nirali Sonani on 20/06/24.
+//  Created by Amisha Italiya on 20/06/24.
 //
 
 import BaseStyle
@@ -25,12 +25,21 @@ struct GroupTransactionsRouteView: View {
             switch route {
             case .TransactionListView(let groupId):
                 GroupTransactionListView(viewModel: GroupTransactionListViewModel(router: appRoute, groupId: groupId))
+
             case .TransactionDetailView(let transactionId, let groupId):
-                GroupTransactionDetailView(viewModel: GroupTransactionDetailViewModel(router: appRoute, transactionId: transactionId, groupId: groupId))
+                GroupTransactionDetailView(
+                    viewModel: GroupTransactionDetailViewModel(
+                        router: appRoute, transactionId: transactionId, groupId: groupId
+                    )
+                )
             case .GroupPaymentView(let transactionId, let groupId, let payerId, let receiverId, let amount):
-                GroupPaymentView(viewModel: GroupPaymentViewModel(router: appRoute, transactionId: transactionId, groupId: groupId,
-                                                                  payerId: payerId, receiverId: receiverId,
-                                                                  amount: amount, dismissPaymentFlow: dismissPaymentFlow))
+                GroupPaymentView(
+                    viewModel: GroupPaymentViewModel(
+                        router: appRoute, transactionId: transactionId,
+                        groupId: groupId, payerId: payerId, receiverId: receiverId,
+                        amount: amount, dismissPaymentFlow: dismissPaymentFlow
+                    )
+                )
             default:
                 EmptyRouteView(routeName: self)
             }

diff --git a/Splito/UI/Login/PhoneLogin/VerifyOtp/VerifyOtpView.swift b/Splito/UI/Login/PhoneLogin/VerifyOtp/VerifyOtpView.swift
@@ -102,37 +102,14 @@ private struct PhoneLoginOtpView: View {
 
     var body: some View {
         VStack(spacing: 0) {
-            VStack(alignment: .center, spacing: 0) {
-                TextField("", text: $otp)
-                    .font(.subTitle1(34))
-                    .foregroundColor(primaryText)
-                    .kerning(16)
-                    .multilineTextAlignment(.center)
-                    .keyboardType(.numberPad)
-                    .textContentType(.oneTimeCode)
-                    .disableAutocorrection(true)
-                    .focused($isFocused)
-                    .onChange(of: otp) { newValue in
-                        if newValue.count > OTP_TOTAL_CHARACTERS {
-                            otp = String(newValue.prefix(OTP_TOTAL_CHARACTERS))
-                        }
-                        if newValue.count == OTP_TOTAL_CHARACTERS {
-                            onVerify()
-                            UIApplication.shared.endEditing()
-                        }
+            OtpTextInputView(text: $otp, isFocused: $isFocused, onOtpVerify: onVerify)
+                .onAppear {
+                    if otp.isEmpty {
+                        isFocused = true
+                    } else {
+                        isFocused = false
+                        UIApplication.shared.endEditing()
                     }
-
-                Divider()
-                    .background(outlineColor)
-                    .padding(.horizontal, 60)
-            }
-            .onAppear {
-                if otp.isEmpty {
-                    isFocused = true
-                } else {
-                    isFocused = false
-                    UIApplication.shared.endEditing()
-                }
             }
 
             VSpacer(40)