@momo-kits/native-kits 0.167.1-duo.2-debug → 0.167.1-duo.3-debug

package/ios/Popup/PopupDisplay.swift

@@ -55,6 +55,7 @@ extension View {
 
 public struct PopupDisplay: View {
     @Environment(\.localize) private var localize
+    @Environment(\.screenLayout) private var layout
 
     // MARK: Lifecycle
 
@@ -91,6 +92,7 @@ public struct PopupDisplay: View {
 
     @State private var textHeight: CGFloat = .zero
     @State private var isScrollable = false
+    @State private var actionsHeight: CGFloat = 0
     
     public var body: some View {
         var shouldUseColumn: Bool {
@@ -114,89 +116,103 @@ public struct PopupDisplay: View {
                 }
                 
                 VStack(spacing: 0) {
-                    if(!url.isEmpty) {
-                        WebImage(url: URL(string: url), isAnimating: .constant(true))
-                            .resizable()
-                            .placeholder {
-                                Rectangle()
-                                    .fill(Color.gray.opacity(0.3))
+                    // scrolls when iPhone Duo landscape is too short; actions stay visible
+                    PopupScrollBody(maxHeight: layout.popupMaxHeight.map { $0 - actionsHeight }) {
+                        VStack(spacing: 0) {
+                            if(!url.isEmpty) {
+                                WebImage(url: URL(string: url), isAnimating: .constant(true))
+                                    .resizable()
+                                    .placeholder {
+                                        Rectangle()
+                                            .fill(Color.gray.opacity(0.3))
+                                            .aspectRatio(1.777, contentMode: .fit)
+                                            .frame(maxWidth: .infinity, maxHeight: 184)
+                                    }
                                     .aspectRatio(1.777, contentMode: .fit)
-                                    .frame(maxWidth: .infinity, maxHeight: 184)
+                                    .frame(maxWidth: .infinity, alignment: .center)
+                                    .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
+                                    .clipped()
                             }
-                            .aspectRatio(1.777, contentMode: .fit)
-                            .frame(maxWidth: .infinity, alignment: .center)
-                            .clipShape(RoundedCorner(radius: 15, corners: [.topLeft, .topRight]))
-                            .clipped()
-                    }
-                    VStack(alignment: .leading, spacing: 0) {
-                        MomoText(title, typography: .headerDefaultBold)
-                            .padding(.top, 24)
-                            .padding(.bottom, 8)
-                            .lineLimit(2)
-                            .accessibility(identifier: "title_popup_permission")
+                            VStack(alignment: .leading, spacing: 0) {
+                                MomoText(title, typography: .headerDefaultBold)
+                                    .padding(.top, 24)
+                                    .padding(.bottom, 8)
+                                    .lineLimit(2)
+                                    .accessibility(identifier: "title_popup_permission")
                         
-                        Group {
-                            if isScrollable {
-                                ScrollView(showsIndicators: false) {
-                                    MomoText(description, typography: .bodyDefaultRegular)
-                                        .multilineTextAlignment(.leading)
-                                        .background(GeometryReader { geo in
-                                            Color.clear.onAppear { textHeight = geo.size.height }
-                                        })
-                                        .measureLineHeights(font: .body_default_regular,
-                                                            oneLine: $oneLineH,
-                                                            twoLines: $twoLineH)
-                                        .accessibility(identifier: "description_popup_permission")
-                                }
-                                // Cap the visible height to ~8.5 lines
-                                .frame(height: min(maxHeight8_5, textHeight))
-                            } else {
-                                MomoText(description, typography: .bodyDefaultRegular)
-                                    .multilineTextAlignment(.leading)
-                                    .background(GeometryReader { geo in
-                                        Color.clear.onAppear {
-                                            textHeight = geo.size.height
-                                            // Trigger scroll at ~8.5 lines
-                                            isScrollable = textHeight > maxHeight8_5
+                                Group {
+                                    if isScrollable {
+                                        ScrollView(showsIndicators: false) {
+                                            MomoText(description, typography: .bodyDefaultRegular)
+                                                .multilineTextAlignment(.leading)
+                                                .background(GeometryReader { geo in
+                                                    Color.clear.onAppear { textHeight = geo.size.height }
+                                                })
+                                                .measureLineHeights(font: .body_default_regular,
+                                                                    oneLine: $oneLineH,
+                                                                    twoLines: $twoLineH)
+                                                .accessibility(identifier: "description_popup_permission")
                                         }
-                                    })
-                                    .measureLineHeights(font: .body_default_regular,
-                                                        oneLine: $oneLineH,
-                                                        twoLines: $twoLineH)
-                                    .accessibility(identifier: "description_popup_permission")
-                            }
-                        }
-                        .padding(.bottom, 8)
-                        
-                        if(!errorCode.isEmpty) {
-                            MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
-                                .lineLimit(1)
+                                        // Cap the visible height to ~8.5 lines
+                                        .frame(height: min(maxHeight8_5, textHeight))
+                                    } else {
+                                        MomoText(description, typography: .bodyDefaultRegular)
+                                            .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)
+                                            .accessibility(identifier: "description_popup_permission")
+                                    }
+                                }
                                 .padding(.bottom, 8)
+                        
+                                if(!errorCode.isEmpty) {
+                                    MomoText(localize.translate("errorCode") + errorCode, typography: .descriptionXsRegular, color: Colors.black12)
+                                        .lineLimit(1)
+                                        .padding(.bottom, 8)
+                                }
+                            }
+                            .frame(maxWidth: .infinity, alignment: .leading)
+                            .padding(.horizontal, 24)
+                            .padding(.bottom, 16)
                         }
                     }
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                    .padding(.horizontal, 24)
-                    .padding(.bottom, 16)
-                    
-                    if shouldUseColumn {
-                        if buttonType == .text {
-                            ColumnTextButtons
-                        } else {
-                            ColumnButtons
-                        }
-                    } else {
-                        if buttonType == .text {
-                            RowTextButtons
+
+                    Group {
+                        if shouldUseColumn {
+                            if buttonType == .text {
+                                ColumnTextButtons
+                            } else {
+                                ColumnButtons
+                            }
                         } else {
-                            RowButtons
+                            if buttonType == .text {
+                                RowTextButtons
+                            } else {
+                                RowButtons
+                            }
                         }
                     }
+                    .background(
+                        GeometryReader { proxy in
+                            Color.clear
+                                .onAppear { actionsHeight = proxy.size.height }
+                                .onChange(of: proxy.size.height) { actionsHeight = $0 }
+                        }
+                    )
                 }
                 .fixedSize(horizontal: false, vertical: true)
             }
         }
             .background(Color.white.cornerRadius(15))
-            .frame(maxWidth: popupMaxWidth - 24)
+            .frame(maxWidth: layout.popupMaxWidth)
             .padding(.horizontal, 12)
             .accessibilityElement(children: .ignore)
             .accessibility(identifier: "popup_notify")

package/ios/Popup/PopupLayout.swift

@@ -0,0 +1,45 @@
+import SwiftUI
+
+// Width of a system alert on the iPhone Duo inner display, in both orientations (RN Popup/utils.ts).
+private let duoPopupMaxWidth: CGFloat = 440
+
+extension ScreenLayout {
+    var isDuoDevice: Bool { isIPhoneDuoDevice(windowSize: CGSize(width: width, height: height)) }
+
+    /// Card width cap; other devices keep the full window width minus the popup's own padding.
+    var popupMaxWidth: CGFloat {
+        isDuoDevice ? min(width - Spacing.XL * 2, duoPopupMaxWidth) : .infinity
+    }
+
+    /// Room left for a popup on iPhone Duo, where landscape is too short for it; nil elsewhere.
+    var popupMaxHeight: CGFloat? {
+        guard isDuoDevice else { return nil }
+        return height - duoTopInset - insets.bottom - Spacing.XL * 2
+    }
+}
+
+/// Scrolls `content` once it is taller than `maxHeight`; otherwise sizes to it.
+struct PopupScrollBody<Content: View>: View {
+    let maxHeight: CGFloat?
+    @ViewBuilder let content: () -> Content
+
+    @State private var contentHeight: CGFloat = 0
+
+    var body: some View {
+        if let maxHeight {
+            ScrollView(.vertical, showsIndicators: false) {
+                content()
+                    .background(
+                        GeometryReader { proxy in
+                            Color.clear
+                                .onAppear { contentHeight = proxy.size.height }
+                                .onChange(of: proxy.size.height) { contentHeight = $0 }
+                        }
+                    )
+            }
+            .frame(height: min(contentHeight, max(maxHeight, 0)))
+        } else {
+            content()
+        }
+    }
+}

package/ios/Popup/PopupNotify.swift

@@ -3,12 +3,6 @@ import SwiftUI
 
 public typealias PopupActionDirection = PopupButtonDirection
 
-// Portrait width in landscape too, so aspect-ratio images don't push popups past the screen height.
-var popupMaxWidth: CGFloat {
-    let size = UIScreen.main.bounds.size
-    return min(size.width, size.height)
-}
-
 public struct PopupNotifyProps {
     public var image: String
     public var title: String
@@ -46,10 +40,12 @@ public struct PopupNotifyProps {
 public struct PopupNotify: View {
     @Environment(\.localize) private var localize
     @Environment(\.momoFontScale) private var fontScale
+    @Environment(\.screenLayout) private var layout
 
     public let props: PopupNotifyProps
 
     @State private var descriptionHeight: CGFloat = 0
+    @State private var actionsHeight: CGFloat = 0
 
     private var errorCodePrefix: String {
         localize.translate("errorCode")
@@ -77,37 +73,26 @@ public struct PopupNotify: View {
     public var body: some View {
         ZStack(alignment: .topTrailing) {
             VStack(spacing: 0) {
-                if !props.image.isEmpty {
-                    popupImage
-                }
-
-                VStack(alignment: .leading, spacing: 0) {
-                    MomoText(
-                        props.title,
-                        typography: .headerDefaultBold,
-                        maxLines: 2,
-                        accessibilityId: "title_popup_permission"
-                    )
-                    .padding(.bottom, Spacing.S)
-
-                    descriptionContent
-
-                    if !props.error.isEmpty {
-                        MomoText(
-                            errorCodePrefix + props.error,
-                            typography: .descriptionXsRegular,
-                            color: Colors.black12,
-                            maxLines: 1
-                        )
-                        .padding(.top, Spacing.S)
+                // scrolls when iPhone Duo landscape is too short; actions stay visible
+                PopupScrollBody(maxHeight: layout.popupMaxHeight.map { $0 - actionsHeight }) {
+                    VStack(spacing: 0) {
+                        if !props.image.isEmpty {
+                            popupImage
+                        }
+                        textContent
                     }
                 }
-                .frame(maxWidth: .infinity, alignment: .leading)
-                .padding(Spacing.XL)
 
                 actionButtons
                     .padding(.horizontal, Spacing.XL)
                     .padding(.bottom, Spacing.XL)
+                    .background(
+                        GeometryReader { proxy in
+                            Color.clear
+                                .onAppear { actionsHeight = proxy.size.height }
+                                .onChange(of: proxy.size.height) { actionsHeight = $0 }
+                        }
+                    )
             }
             .background(Colors.black01)
             .clipShape(RoundedRectangle(cornerRadius: Radius.L))
@@ -117,12 +102,38 @@ public struct PopupNotify: View {
                     .offset(x: 11, y: -11)
             }
         }
-        .frame(maxWidth: popupMaxWidth - Spacing.M * 2)
+        .frame(maxWidth: layout.popupMaxWidth)
         .padding(.horizontal, Spacing.M)
         .accessibilityElement(children: .ignore)
         .accessibilityIdentifier("popup_notify")
     }
 
+    private var textContent: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            MomoText(
+                props.title,
+                typography: .headerDefaultBold,
+                maxLines: 2,
+                accessibilityId: "title_popup_permission"
+            )
+            .padding(.bottom, Spacing.S)
+
+            descriptionContent
+
+            if !props.error.isEmpty {
+                MomoText(
+                    errorCodePrefix + props.error,
+                    typography: .descriptionXsRegular,
+                    color: Colors.black12,
+                    maxLines: 1
+                )
+                .padding(.top, Spacing.S)
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(Spacing.XL)
+    }
+
     private var popupImage: some View {
         WebImage(url: URL(string: props.image), isAnimating: .constant(true))
             .resizable()

package/ios/Popup/PopupPromotion.swift

@@ -3,6 +3,7 @@ import SDWebImageSwiftUI
 
 public struct PopupPromotion: View {
     @Environment(\.appTheme) private var theme
+    @Environment(\.screenLayout) private var layout
 
     var imageUrl: String
     var onIconClose: (() -> Void)?
@@ -19,22 +20,33 @@ public struct PopupPromotion: View {
         self.onAction = onAction
     }
 
+    private static let aspectRatio: CGFloat = 0.72
+    // close button row under the image: stack spacing + padded 40pt button
+    private static let closeRowHeight: CGFloat = 8 + 40 + Spacing.S * 2
+
+    // fit the portrait image by height when iPhone Duo leaves too little room
+    private var imageWidth: CGFloat {
+        let width = min(layout.width - Spacing.XL * 2, layout.popupMaxWidth)
+        guard let maxHeight = layout.popupMaxHeight else { return width }
+        return min(width, (maxHeight - Self.closeRowHeight) * Self.aspectRatio)
+    }
+
     public var body: some View {
         VStack(spacing: 8) {
             if(imageUrl.isEmpty) {
-                Icon(source: "media_fail", size: popupMaxWidth - Spacing.XL * 2)
+                Icon(source: "media_fail", size: imageWidth)
             }
             else {
                 WebImage(url: URL(string: imageUrl)!)
                     .resizable()
                     .placeholder {
                         Color.gray
-                            .aspectRatio(0.72, contentMode: .fit)
-                            .frame(maxWidth: popupMaxWidth - Spacing.XL * 2)
+                            .aspectRatio(Self.aspectRatio, contentMode: .fit)
+                            .frame(maxWidth: imageWidth)
                             .clipped()
                     }
-                    .aspectRatio(0.72, contentMode: .fit)
-                    .frame(maxWidth: popupMaxWidth - Spacing.XL * 2, alignment: .center)
+                    .aspectRatio(Self.aspectRatio, contentMode: .fit)
+                    .frame(maxWidth: imageWidth, alignment: .center)
                     .clipped()
                     .onTapGesture {
                         onAction?()

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-beta.4'
+  s.version          = '0.167.1-duo.3'
   s.summary          = 'MoMoUIKits for iOS'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/MoMoUIKitsDemo.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKitsDemo'
-  s.version          = '0.167.1-beta.4'
+  s.version          = '0.167.1-duo.3'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/DuoTabDemo.swift

@@ -0,0 +1,76 @@
+//
+//  DuoTabDemo.swift
+//  Example
+//
+//  Mirrors RN `app/screens/IPhoneDuo/DuoTabUsage`: glass rail in the Duo side bar, floating
+//  glass bar when unfolded portrait. `useShortcut` gives the tallest side bar header, for the
+//  overlap review.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let swatches = [Colors.pink03, Colors.orange03, Colors.green03]
+private let history = (1...18).map { "Giao dịch #\($0)" }
+
+struct DuoTabDemo: View {
+    let useShortcut: Bool
+
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DuoTabDemoContent(useShortcut: useShortcut)
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct DuoTabDemoContent: View {
+    let useShortcut: Bool
+
+    var body: some View {
+        BottomTab(
+            items: [
+                tab("DuoMoMo", label: "MoMo", icon: "basic_home", title: "MoMo"),
+                tab("DuoPromotion", label: "Ưu đãi", icon: "shopping_coupon", title: "Ưu đãi", badge: ""),
+                tab("DuoHistory", label: "Lịch sử GD", icon: "time_clock_reset", title: "Lịch sử giao dịch", badge: "3"),
+                tab("DuoMe", label: "Tôi", icon: "basic_person", title: "Tôi"),
+            ],
+            floatingButton: BottomTabFloatingButton(icon: "navigation_full_screen", label: "Quét mọi QR", onPress: {})
+        )
+    }
+
+    private func tab(_ name: String, label: String, icon: String, title: String, badge: String? = nil) -> BottomTabItem {
+        BottomTabItem(
+            name: name,
+            label: label,
+            icon: icon,
+            badgeLabel: badge,
+            options: NavigationOptions(title: title, headerRightData: HeaderRightData(useShortcut: useShortcut)),
+            screen: { DuoTabList() }
+        )
+    }
+}
+
+private struct DuoTabList: View {
+    var body: some View {
+        VStack(spacing: 0) {
+            ForEach(history.indices, id: \.self) { index in
+                if index > 0 { MomoDivider() }
+                HStack(spacing: Spacing.M) {
+                    RoundedRectangle(cornerRadius: Radius.S)
+                        .fill(swatches[index % swatches.count])
+                        .frame(width: Spacing.XL, height: Spacing.XL)
+                    MomoText(history[index], typography: .bodyDefaultRegular)
+                    Spacer()
+                }
+                .padding(.vertical, Spacing.M)
+            }
+        }
+        .padding(.horizontal, Spacing.M)
+        .background(Colors.black01)
+        .clipShape(RoundedRectangle(cornerRadius: Radius.M))
+        .padding(Spacing.M)
+    }
+}

package/ios-demo/Sources/MoMoUIKitsDemo/SampleDemos/Home.swift

@@ -85,6 +85,7 @@ public let ScreenUsages: [ScreenUsage] = [
     ScreenUsage(title: "DateTimePicker", destination: AnyView(DateTimePickerDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
     ScreenUsage(title: "Navigation", destination: AnyView(NavigationDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Bottom Tab", destination: AnyView(BottomTabDemo()), icon: getIcon(icon: "Layout"), hostsOwnChrome: true),
+    ScreenUsage(title: "iPhone Duo", destination: AnyView(IPhoneDuoDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Animated Header", destination: AnyView(AnimatedHeaderDemo()), icon: getIcon(icon: "Layout")),
     ScreenUsage(title: "Theme", destination: AnyView(ThemeDemo()), icon: getIcon(icon: "Typography")),
     ScreenUsage(title: "Localize", destination: AnyView(LocalizeDemo()), icon: getIcon(icon: "Typography")),