@momo-kits/native-kits 0.152.4-beta.5 → 0.152.4-beta.7

package/ios/OTPKeyboard/OTPKeyboard.swift

@@ -0,0 +1,145 @@
+
+import Foundation
+import SwiftUI
+
+// MARK: - OTPKeyboard
+
+public struct OTPKeyboard: View {
+    // MARK: Lifecycle
+
+    public init(value: Binding<String>, length: Int, content: AnyView? = nil, onChange: ((String) -> Void)? = nil, onClose: @escaping () -> Void) {
+        self._value = value
+        self.length = length
+        self.content = content
+        self.onChange = onChange
+        self.onClose = onClose
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        return VStack {
+            VStack {
+                HStack(){
+                    SwiftUI.Button(action: onClose) {
+                        Image(systemName: "xmark")
+                            .foregroundColor(Colors.text)
+                    }
+                    Spacer()
+                }
+                
+                ZStack(alignment: .trailing) {
+                    ValueView(value, valueLength: length).padding(.trailing, 12)
+                    SwiftUI.Button(action: onClear) {
+                        Image(systemName: "xmark.circle.fill")
+                            .resizable()
+                            .frame(width: 12, height: 12)
+                            .foregroundColor(Colors.text)
+                    }.offset(x: -12)
+                }.frame(minWidth: 148, maxWidth: 180, minHeight: 40)
+                    .background(Colors.card)
+                    .clipShape(Capsule())
+                    .padding(.bottom, Spacing.M)
+            }
+
+            content
+
+            HStack {
+                KeyboardButton("7", action: self.onPressKey)
+                KeyboardButton("8", action: self.onPressKey)
+                KeyboardButton("9", action: self.onPressKey)
+            }
+
+            HStack {
+                KeyboardButton("4", action: self.onPressKey)
+                KeyboardButton("5", action: self.onPressKey)
+                KeyboardButton("6", action: self.onPressKey)
+            }
+
+            HStack {
+                KeyboardButton("1", action: self.onPressKey)
+                KeyboardButton("2", action: self.onPressKey)
+                KeyboardButton("3", action: self.onPressKey)
+            }
+
+            HStack {
+                KeyboardButton("", action: self.onPressKey).disabled(true).opacity(0)
+                KeyboardButton("0", action: self.onPressKey)
+                SwiftUI.Button(action: onPressBack) {
+                    HStack {
+                        Image(
+                            systemName: "delete.backward"
+                        ).foregroundColor(Colors.text)
+                    }
+                }.frame(maxWidth: .infinity, minHeight: 48)
+                    .clipShape(RoundedRectangle(cornerRadius: 8))
+            }
+        }
+        .background(Colors.background)
+        .valueChanged(value: value) { otp in
+            if onChange != nil {
+                self.onChange!(otp)
+            }
+        }
+    }
+
+    public func buildContent(_ content: @escaping () -> AnyView) -> OTPKeyboard {
+        var newSelf = self
+        newSelf.content = content()
+        return newSelf
+    }
+
+    // MARK: Internal
+
+    @Binding var value: String
+    var length: Int
+    var content: AnyView?
+    var onChange: ((String) -> Void)?
+    var onClose: () -> Void
+
+    func onPressKey(key: String) {
+        if value.count < length {
+            value.append(key)
+        }
+    }
+
+    func onPressBack() {
+        if !value.isEmpty {
+            value.removeLast()
+        }
+    }
+
+    func onClear() {
+        value.removeAll()
+    }
+}
+
+// MARK: - ValueView
+
+private struct ValueView: View {
+    // MARK: Lifecycle
+
+    init(_ value: String, valueLength: Int) {
+        self.value = value
+        self.valueLength = valueLength
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        return HStack {
+            ForEach(0 ..< valueLength, id: \.self) { i in
+                if i < value.count {
+                    Circle().foregroundColor(Colors.text).frame(width: 8, height: 8)
+                } else {
+                    Circle().foregroundColor(Colors.textSecondary).frame(width: 8, height: 8)
+                }
+            }
+        }.frame(maxWidth: .infinity, minHeight: 40)
+    }
+
+    // MARK: Internal
+
+    var value: String = ""
+    var valueLength: Int
+}

package/ios/Popup/PopupDisplay.swift

@@ -0,0 +1,284 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+// MARK: - PopupButtonDirection
+
+public enum PopupButtonDirection {
+    case row
+    case column
+    case auto
+}
+
+// MARK: - PopupButtonType
+
+public enum PopupButtonType {
+    case text
+    case button
+}
+
+extension View {
+    func measureLineHeights(font: Font,
+                            oneLine: Binding<CGFloat>,
+                            twoLines: Binding<CGFloat>) -> some View {
+        overlay(
+            VStack(spacing: 0) {
+                Text("A")
+                    .font(font)
+                    .lineLimit(1)
+                    .fixedSize()
+                    .background(
+                        GeometryReader { g in
+                            Color.clear.onAppear { oneLine.wrappedValue = g.size.height }
+                        }
+                    )
+                    .hidden()
+
+                Text("A\nA")
+                    .font(font)
+                    .lineLimit(2)
+                    .fixedSize(horizontal: false, vertical: true)
+                    .background(
+                        GeometryReader { g in
+                            Color.clear.onAppear { twoLines.wrappedValue = g.size.height }
+                        }
+                    )
+                    .hidden()
+            }
+            .frame(width: 0, height: 0)
+        )
+    }
+}
+
+// MARK: - PopupDisplay
+
+public struct PopupDisplay: View {
+    // MARK: Lifecycle
+
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", url: String = "", buttonDirection: PopupButtonDirection = .column, buttonType: PopupButtonType = .button, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, errorCode: String = "", isShowCloseIcon: Bool = true) {
+        self._isPresented = isPresented
+        self.title = title
+        self.description = description
+        self.url = url
+        self.buttonDirection = buttonDirection
+        self.buttonType = buttonType
+        self.onPressAction = onPressAction
+        self.onPressCloseButton = onPressCloseButton
+        self.onClose = onClose
+        self.closeButtonTitle = closeButtonTitle
+        self.actionButtonTitle = actionButtonTitle
+        self.errorCode = errorCode
+        self.isShowCloseIcon = isShowCloseIcon
+    }
+
+    // MARK: Public
+    
+    @State private var oneLineH: CGFloat = 0
+    @State private var twoLineH: CGFloat = 0
+
+    private var fallbackLH: CGFloat { UIFont.preferredFont(forTextStyle: .body).lineHeight }
+    private var perLine: CGFloat { max(twoLineH - oneLineH, oneLineH > 0 ? oneLineH : fallbackLH) }
+
+    private func heightForLines(lines: CGFloat) -> CGFloat {
+        guard oneLineH > 0 && twoLineH > 0 else { return ceil(fallbackLH * lines) }
+        return ceil(oneLineH + max(0, lines - 1) * (twoLineH - oneLineH))
+    }
+    private var maxHeight8_5: CGFloat { heightForLines(lines: 8.5) }
+
+
+    @State private var textHeight: CGFloat = .zero
+    @State private var isScrollable = false
+    
+    public var body: some View {
+        var shouldUseColumn: Bool {
+            buttonDirection == .column || (buttonDirection == .auto && (closeButtonTitle.count > 12 || actionButtonTitle.count > 12))
+        }
+
+        VStack(spacing: 12) {
+            ZStack(alignment: .topTrailing) {
+                if(isShowCloseIcon) {
+                    SwiftUI.Button(action: onClose) {
+                        Image(systemName: "xmark.circle.fill")
+                            .resizable()
+                            .frame(width: 22, height: 22)
+                            .overlay(RoundedRectangle(cornerRadius: Radius.L).stroke(Colors.black01, lineWidth: 2))
+                    }.foregroundColor(Colors.black20)
+                        .background(Colors.black01.cornerRadius(15))
+                        .padding(.trailing, -11)
+                        .padding(.top, -11)
+                        .zIndex(1)
+                        .accessibility(identifier: "ic_popup_close")
+                }
+                
+                VStack(spacing: 0) {
+                    if(!url.isEmpty) {
+                        WebImage(url: URL(string: url), isAnimating: .constant(true))
+                            .resizable()
+                            .placeholder {
+                                Rectangle()
+                                    .fill(Color.gray.opacity(0.3))
+                                    .frame(maxWidth: .infinity, maxHeight: 184)
+                            }
+                            .aspectRatio(1.777, contentMode: .fit)
+                            .frame(maxWidth: .infinity, alignment: .center)
+                            .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
+                            .clipped()
+                    }
+                    VStack(alignment: .leading, spacing: 0) {
+                        Text(title)
+                            .foregroundColor(.black)
+                            .font(.header_default_semibold)
+                            .padding(.top, 24)
+                            .padding(.bottom, 8)
+                            .lineLimit(2)
+                            .accessibility(identifier: "title_popup_permission")
+                        
+                        Group {
+                            if isScrollable {
+                                ScrollView(showsIndicators: false) {
+                                    Text(description)
+                                        .font(.body_default_regular)
+                                        .foregroundColor(Colors.black17)
+                                        .multilineTextAlignment(.leading)
+                                        .background(GeometryReader { geo in
+                                            Color.clear.onAppear { textHeight = geo.size.height }
+                                        })
+                                        .measureLineHeights(font: .body_default_regular,
+                                                            oneLine: $oneLineH,
+                                                            twoLines: $twoLineH)
+                                }
+                                // Cap the visible height to ~8.5 lines
+                                .frame(height: min(maxHeight8_5, textHeight))
+                            } else {
+                                Text(description)
+                                    .font(.body_default_regular)
+                                    .foregroundColor(Colors.black17)
+                                    .multilineTextAlignment(.leading)
+                                    .background(GeometryReader { geo in
+                                        Color.clear.onAppear {
+                                            textHeight = geo.size.height
+                                            // Trigger scroll at ~8.5 lines
+                                            isScrollable = textHeight > maxHeight8_5
+                                        }
+                                    })
+                                    .measureLineHeights(font: .body_default_regular,
+                                                        oneLine: $oneLineH,
+                                                        twoLines: $twoLineH)
+                            }
+                        }
+                        .padding(.bottom, 8)
+                        
+                        if(!errorCode.isEmpty) {
+                            Text("Mã lỗi: " + errorCode)
+                                .foregroundColor(Colors.black12)
+                                .font(.description_xs_regular)
+                                .lineLimit(1)
+                                .padding(.bottom, 8)
+                        }
+                    }
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .padding(.horizontal, 24)
+                    .padding(.bottom, 16)
+                    
+                    if shouldUseColumn {
+                        if buttonType == .text {
+                            ColumnTextButtons
+                        } else {
+                            ColumnButtons
+                        }
+                    } else {
+                        if buttonType == .text {
+                            RowTextButtons
+                        } else {
+                            RowButtons
+                        }
+                    }
+                }
+                .fixedSize(horizontal: false, vertical: true)
+            }
+        }
+            .background(Color.white.cornerRadius(15))
+            .padding(.horizontal, 12)
+            .accessibilityElement(children: .ignore)
+            .accessibility(identifier: "popup_notify")
+    }
+
+    // MARK: Internal
+
+    @Binding var isPresented: Bool
+    var title: String
+    var description: String
+    var url: String
+    var buttonDirection: PopupButtonDirection
+    var buttonType: PopupButtonType
+    var onPressAction: () -> Void
+    var onPressCloseButton: () -> Void
+    var onClose: () -> Void
+    var actionButtonTitle: String
+    var closeButtonTitle: String
+    var errorCode: String
+    var isShowCloseIcon: Bool
+
+    var RowTextButtons: some View {
+        HStack {
+            SwiftUI.Button(action: onPressCloseButton) {
+                Text(closeButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.black09)
+                .padding(.trailing, 12)
+
+            SwiftUI.Button(action: onPressAction) {
+                Text(actionButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.primary)
+        }
+        .frame(maxWidth: .infinity, alignment: .trailing)
+        .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
+    }
+
+    var ColumnTextButtons: some View {
+        VStack(alignment: .trailing) {
+            SwiftUI.Button(action: onPressAction) {
+                Text(actionButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.primary)
+                .padding(.bottom, 6)
+
+            SwiftUI.Button(action: onPressCloseButton) {
+                Text(closeButtonTitle)
+                    .font(.action2)
+            }.foregroundColor(Colors.black09)
+        }
+        .frame(maxWidth: .infinity, alignment: .trailing)
+        .padding(EdgeInsets(top: 0, leading: 0, bottom: 24, trailing: 24))
+    }
+
+    var RowButtons: some View {
+        HStack {
+            if(!closeButtonTitle.isEmpty) {
+                Button(title: closeButtonTitle, action: onPressCloseButton, type: .text, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            }
+            Button(title: actionButtonTitle, action: onPressAction, size: .medium)
+                .accessibility(identifier: "btn_popup_allow")
+        }
+        .frame(maxWidth: .infinity, alignment: .center)
+        .padding(.horizontal, 24)
+        .padding(.bottom, 24)
+    }
+
+    var ColumnButtons: some View {
+        VStack(alignment: .trailing) {
+            Button(
+                title: actionButtonTitle,
+                action: onPressAction,
+                size: .medium
+            ).accessibility(identifier: "btn_popup_allow")
+            if(!closeButtonTitle.isEmpty) {
+                Button(title: closeButtonTitle, action: onPressCloseButton, type: .text, size: .medium).accessibility(identifier: "btn_popup_cancel")
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .trailing)
+        .padding(.horizontal, 24)
+        .padding(.bottom, 24)
+    }
+
+}

package/ios/Popup/PopupInput.swift

@@ -0,0 +1,96 @@
+import SDWebImageSwiftUI
+import SwiftUI
+
+public struct PopupInput: View {
+    // MARK: Lifecycle
+
+    public init(isPresented: Binding<Bool>, title: String = "", description: String = "", numberOfButtons: Int = 1, actionButtonTitle: String = "", closeButtonTitle: String = "", onPressAction: @escaping () -> Void = {}, onPressCloseButton: @escaping () -> Void = {}, onClose: @escaping () -> Void = {}, inputPlaceholder: String = "", inputValue: Binding<String> = Binding.constant(""), onTextChange: ((String) -> Void)? = nil) {
+        self._isPresented = isPresented
+        self._inputValue = inputValue
+        self.title = title
+        self.description = description
+        self.onPressAction = onPressAction
+        self.onPressCloseButton = onPressCloseButton
+        self.onClose = onClose
+        self.inputPlaceholder = inputPlaceholder
+        self.onTextChange = onTextChange
+        self.numberOfButtons = numberOfButtons
+        self.closeButtonTitle = closeButtonTitle
+        self.actionButtonTitle = actionButtonTitle
+    }
+
+    // MARK: Public
+
+    public var body: some View {
+        VStack(spacing: 12) {
+            ZStack(alignment: .topTrailing) {
+                SwiftUI.Button(action: onPressClose) {
+                    Image(systemName: "xmark.circle.fill")
+                        .resizable()
+                        .frame(width: 16, height: 16)
+                }.foregroundColor(Colors.black20)
+                    .background(Colors.black01.cornerRadius(8))
+                    .offset(x: 6, y: -6)
+                    .zIndex(1)
+
+                VStack {
+                    VStack(alignment: .leading) {
+                        Text(title)
+                            .foregroundColor(.black)
+                            .font(.headerText1)
+                            .padding(.top, 12)
+                            .padding(.bottom, 24)
+
+                        Text(description)
+                            .foregroundColor(.black)
+                            .font(.paragraph)
+                            .opacity(0.6)
+                            .multilineTextAlignment(.leading)
+                            .padding(.bottom, 20)
+                    }.padding(.horizontal, 24)
+
+                    Input($inputValue, placeholder: inputPlaceholder, onChange: onTextChange)
+                        .padding(.horizontal, 24)
+
+                    if numberOfButtons == 1 {
+                        Button(title: actionButtonTitle, action: onPressAction)
+                            .padding(.horizontal, 24)
+                            .padding(.bottom, 24)
+                    } else {
+                        HStack {
+                            Button(title: closeButtonTitle, action: onPressCloseButton, type: .secondary)
+                            Button(title: actionButtonTitle, action: onPressAction)
+                        }.padding(.horizontal, 24)
+                            .padding(.bottom, 24)
+                    }
+
+                }.clipped()
+            }
+        }
+        .background(Color.white.cornerRadius(8))
+        .shadow(color: .black.opacity(0.08), radius: 2, x: 0, y: 0)
+        .shadow(color: .black.opacity(0.16), radius: 24, x: 0, y: 0)
+        .padding(.horizontal, 40)
+    }
+
+    // MARK: Internal
+
+    @Binding var isPresented: Bool
+    @Binding var inputValue: String
+    var title: String
+    var description: String
+    var onPressAction: () -> Void
+    var onPressCloseButton: () -> Void
+    var onClose: () -> Void
+    var inputPlaceholder: String
+    var onTextChange: ((String) -> Void)?
+    var numberOfButtons: Int
+    var actionButtonTitle: String
+    var closeButtonTitle: String
+
+
+    func onPressClose(){
+        isPresented = false
+        onClose()
+    }
+}

package/ios/Popup/PopupPromotion.swift

@@ -0,0 +1,73 @@
+import SwiftUI
+import SDWebImageSwiftUI
+
+public struct PopupPromotion: View {
+    var imageUrl: String
+    var onIconClose: (() -> Void)?
+    var onAction: (() -> Void)?
+
+
+    public init(
+        imageUrl: String,
+        onIconClose: (() -> Void)? = nil,
+        onAction: (() -> Void)? = nil
+    ) {
+        self.imageUrl = imageUrl
+        self.onIconClose = onIconClose
+        self.onAction = onAction
+    }
+
+    public var body: some View {
+        VStack(spacing: 8) {
+            if(imageUrl.isEmpty) {
+                Icon(source: "media_fail", size: UIScreen.main.bounds.width - Spacing.XL * 2)
+            }
+            else {
+                WebImage(url: URL(string: imageUrl)!)
+                    .resizable()
+                    .placeholder {
+                        Color.gray
+                            .aspectRatio(0.72, contentMode: .fit)
+                            .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2)
+                            .clipped()
+                    }
+                    .scaledToFill()
+                    .aspectRatio(0.72, contentMode: .fit)
+                    .frame(maxWidth: UIScreen.main.bounds.width - Spacing.XL * 2, alignment: .center)
+                    .clipped()
+                    .onTapGesture {
+                        onAction?()
+                    }
+            }
+            buildCloseIcon()
+                .accessibility(identifier: "ic_popup_close")
+        }
+        .accessibilityElement(children: .ignore)
+        .accessibility(identifier: "popup_promotion")
+    }
+
+    @ViewBuilder
+    private func buildCloseIcon() -> some View {
+        HStack(alignment: .center, spacing: 0) {
+            SwiftUI.Button(action: {
+                onIconClose?()
+            }) {
+                ZStack {
+                    Circle()
+                        .strokeBorder(Colors.black01, lineWidth: 2)
+                        .background(Circle().fill(Colors.black17))
+                        .frame(width: 22, height: 22)
+
+                    Icon(source: "navigation_close", size: 16,  color: Colors.black01)
+                }
+                .frame(width: 40, height: 40)
+                .padding(8)
+                .zIndex(1)
+            }
+        }
+    }
+
+}
+
+
+