@momo-kits/native-kits 0.167.1-beta.9 → 0.167.1-duo-search.1-debug

package/ios/Template/TrustBanner/TrustBanner.swift

@@ -12,14 +12,14 @@ import SDWebImageSwiftUI
 let jsonUrl = "https://static.momocdn.net/app/json/component-kits/design_system.json"
 
 public struct TrustBannerData: Decodable {
-    let content: [String: String]
-    let subContent: [String: String]
-    let pciImage: String
-    let sslImage: String
-    let urlConfig: String
-    let icons: [String]
-    let momoImage: String
-    
+    public let content: [String: String]
+    public let subContent: [String: String]
+    public let pciImage: String?
+    public let momoImage: String?
+    public let sslImage: String?
+    public let icons: [String]?
+    public let urlConfig: String
+
     enum CodingKeys: String, CodingKey {
         case content
         case subContent
@@ -29,6 +29,38 @@ public struct TrustBannerData: Decodable {
         case momoImage
         case urlConfig = "url_config"
     }
+
+    public init(
+        content: [String: String] = ["vi": "", "en": ""],
+        subContent: [String: String] = ["vi": "", "en": ""],
+        pciImage: String? = nil,
+        momoImage: String? = nil,
+        sslImage: String? = nil,
+        icons: [String]? = nil,
+        urlConfig: String = ""
+    ) {
+        self.content = content
+        self.subContent = subContent
+        self.pciImage = pciImage
+        self.momoImage = momoImage
+        self.sslImage = sslImage
+        self.icons = icons
+        self.urlConfig = urlConfig
+    }
+
+    // Missing keys fall back to the init defaults, like the Compose data class.
+    public init(from decoder: Decoder) throws {
+        let container = try decoder.container(keyedBy: CodingKeys.self)
+        self.init(
+            content: try container.decodeIfPresent([String: String].self, forKey: .content) ?? ["vi": "", "en": ""],
+            subContent: try container.decodeIfPresent([String: String].self, forKey: .subContent) ?? ["vi": "", "en": ""],
+            pciImage: try container.decodeIfPresent(String.self, forKey: .pciImage),
+            momoImage: try container.decodeIfPresent(String.self, forKey: .momoImage),
+            sslImage: try container.decodeIfPresent(String.self, forKey: .sslImage),
+            icons: try container.decodeIfPresent([String].self, forKey: .icons),
+            urlConfig: try container.decodeIfPresent(String.self, forKey: .urlConfig) ?? ""
+        )
+    }
 }
 
 let defaultBanner = TrustBannerData(
@@ -39,15 +71,15 @@ let defaultBanner = TrustBannerData(
         "en": "Learn more"
     ],
     pciImage: "https://static.momocdn.net/app/img/kits/trustBanner/pci.png",
+    momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png",
     sslImage: "https://static.momocdn.net/app/img/kits/trustBanner/ssl.png",
-    urlConfig: "login_and_security",
     icons: [
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_viettinbank.png",
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_agribank.png",
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_vietcombank.png",
         "https://static.momocdn.net/app/img/kits/trustBanner/ic_bidv.png"
     ],
-    momoImage: "https://static.momocdn.net/app/img/kits/trustBanner/ic_secu.png"
+    urlConfig: "login_and_security"
 )
 
 public struct TrustBanner: View {
@@ -60,22 +92,25 @@ public struct TrustBanner: View {
         self.onPress = onPress
     }
 
+    private var banner: TrustBannerData {
+        applicationEnvironment.config?.trustBanner ?? defaultBanner
+    }
+
     func onPressSecurity() {
-        if (onPress != nil) {
-            onPress!(applicationEnvironment.config?.trustBanner?.urlConfig ?? defaultBanner.urlConfig)
-        }
+        onPress?(banner.urlConfig)
     }
-    
-    
+
+
     public var body: some View {
         HStack(alignment: .center, spacing: 8) {
-            WebImage(url: URL(string: applicationEnvironment.config?.trustBanner?.momoImage ?? defaultBanner.momoImage))
-                .resizable()
-                .scaledToFit()
-                .frame(width: 64, height: 64)
+            if let momoImage = banner.momoImage {
+                WebImage(url: URL(string: momoImage))
+                    .resizable()
+                    .scaledToFit()
+                    .frame(width: 64, height: 64)
+            }
             VStack(alignment: .leading){
-                Text(applicationEnvironment.config?.trustBanner?.content[localize.currentLanguage]
-                     ?? localize.translateData(defaultBanner.content))
+                Text(localize.translateData(banner.content))
                     .foregroundColor(Color(hex: "484848"))
                     .lineLimit(2)
                     .font(.system(size: 13, weight: Font.Weight.regular))
@@ -84,8 +119,7 @@ public struct TrustBanner: View {
                     .padding(.bottom, 8)
                 HStack {
                     HStack(spacing: 0) {
-                        Text(applicationEnvironment.config?.trustBanner?.subContent[localize.currentLanguage]
-                             ?? localize.translateData(defaultBanner.subContent))
+                        Text(localize.translateData(banner.subContent))
                             .foregroundColor(Colors.pink03)
                             .font(.system(size: 13, weight: .bold))
                             .ignoreBoldTextSetting()
@@ -98,14 +132,18 @@ public struct TrustBanner: View {
                     
                     Spacer()
                     HStack{
-                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.pciImage ?? defaultBanner.pciImage))
-                            .resizable()
-                            .scaledToFit()
-                            .frame(width: 24, height: 20)
-                        WebImage(url:  URL(string: applicationEnvironment.config?.trustBanner?.sslImage ?? defaultBanner.sslImage))
-                            .resizable()
-                            .scaledToFit()
-                            .frame(width: 52, height: 20)
+                        if let pciImage = banner.pciImage {
+                            WebImage(url: URL(string: pciImage))
+                                .resizable()
+                                .scaledToFit()
+                                .frame(width: 24, height: 20)
+                        }
+                        if let sslImage = banner.sslImage {
+                            WebImage(url: URL(string: sslImage))
+                                .resizable()
+                                .scaledToFit()
+                                .frame(width: 52, height: 20)
+                        }
                     }
                 }
                 

package/ios/Typography/FontScale.swift

@@ -30,9 +30,9 @@ public struct FontScale: Equatable {
     public func callAsFunction(_ size: CGFloat) -> CGFloat {
         guard useOSScaleRate else { return size * userScaleRate }
 
-        // Device width is read live rather than snapshotted, matching Compose's
-        // getScreenDimensions() read inside scaleSize(), so a rotation or split-view resize counts.
-        let deviceScale = UIScreen.main.bounds.width / Self.defaultScreenSize
+        // Short side, not width: landscape must not inflate every font (and so every popup's height).
+        let bounds = UIScreen.main.bounds.size
+        let deviceScale = min(bounds.width, bounds.height) / Self.defaultScreenSize
 
         var deviceScaled = size
         var osScaled = size

package/ios/native-kits.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'MoMoUIKits'
-  s.version          = '0.167.1-beta.9'
+  s.version          = '0.167.1-duo-search.1'
   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.9'
+  s.version          = '0.167.1-duo-search.1'
   s.summary          = 'Demo browser for MoMoUIKits SwiftUI components'
   s.homepage         = 'https://momo.vn'
   s.license          = { :type => 'MIT' }

package/ios-demo/README.md

@@ -0,0 +1,120 @@
+# MoMoUIKitsDemo
+
+SwiftUI demo browser for `MoMoUIKits`.
+
+The package can optionally host a Compose UIKits screen by receiving a
+`UIViewController` factory from the host app. It does not import the KMP
+`shared` module directly.
+
+SwiftUI mode reuses the full demo screen set from
+`sample/iosApp/iosApp/Demo`, including the sample `HomeView` registry and demo
+screens for all currently available components.
+
+## CocoaPods
+
+In the host app `Podfile`, include both local pods:
+
+```ruby
+pod 'MoMoUIKits', :path => '../momo-native-kits/ios/native-kits.podspec'
+pod 'MoMoUIKitsDemo', :path => '../momo-native-kits/ios-demo'
+```
+
+Adjust the relative paths to match the host app checkout.
+
+## Host App Usage
+
+```swift
+import MoMoUIKitsDemo
+import shared
+
+class UIKitsViewController: BaseComposeAppViewController {
+  override func getViewController() -> UIViewController? {
+    let params = self.application.data as? [String: Any]
+
+    return MoMoUIKitsDemoViewControllerFactory.make(
+      context: MoMoUIKitsDemoContext(
+        appId: params?["appId"] as? String ?? "",
+        appCode: params?["code"] as? String ?? "",
+        appName: params?["name"] as? String,
+        appIcon: params?["icon"] as? String ?? ""
+      ),
+      composeViewController: {
+        UIKitsScreenComposeViewControllerKt.UIKitsScreenComposeViewController(
+          params: params
+        )
+      }
+    )
+  }
+
+  override func viewDidDisappear(_ animated: Bool) {
+    super.viewDidDisappear(animated)
+    composeViewController = nil
+  }
+}
+```
+
+If the host does not pass `composeViewController`, the demo opens directly in
+SwiftUI mode.
+
+## Included SwiftUI Demos
+
+The pod includes the sample demo screens for:
+
+- Animated Header
+- Avatar
+- Badge
+- Baseline View
+- Bottom Tab
+- Button
+- Carousel
+- Checkbox
+- Chip
+- Collapse
+- DateTimePicker
+- Divider
+- Header User
+- Icon Button
+- Image
+- Information
+- Input
+- Input DropDown
+- Input Money
+- Input OTP
+- Input Phone Number
+- Input Search
+- Input TextArea
+- Loader
+- Navigation
+- Pagination
+- Popup Display
+- Popup Notify
+- Popup Promotion
+- Progress Info
+- Radio
+- Rating
+- Skeleton
+- Slider
+- SnackBar
+- Stepper
+- Steps
+- Suggest Action
+- Swipe
+- Switch
+- TabView
+- Tag
+- Theme
+- Title
+- Tooltip
+- Typography
+- Uploader
+
+## Validation Notes
+
+Validated locally with:
+
+```sh
+pod ipc spec ios/MoMoUIKits.podspec
+pod ipc spec ios-demo/MoMoUIKitsDemo.podspec
+pod lib lint ios/MoMoUIKits.podspec --allow-warnings --skip-import-validation
+pod lib lint ios-demo/MoMoUIKitsDemo.podspec --allow-warnings --skip-import-validation --include-podspecs=ios/MoMoUIKits.podspec
+```

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

@@ -0,0 +1,80 @@
+//
+//  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; `compressTabBar` folds the tab bar instead of the toolbar when the side bar
+//  is short (HIG "Tab bar compressed").
+//
+
+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 compressTabBar = false
+
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            DuoTabDemoContent(useShortcut: useShortcut, compressTabBar: compressTabBar)
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct DuoTabDemoContent: View {
+    let useShortcut: Bool
+    let compressTabBar: 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: {}),
+            compressionBehavior: compressTabBar ? .tabBar : .toolbar
+        )
+    }
+
+    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

@@ -51,6 +51,7 @@ public let ScreenUsages: [ScreenUsage] = [
     ScreenUsage(title: "InputTextArea", destination: AnyView(InputTextAreaDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
     ScreenUsage(title: "InputSearch", destination: AnyView(InputSearchDemo()), icon: getIcon(icon: "FormInput"), hostsOwnChrome: true),
     ScreenUsage(title: "PopupNotify", destination: AnyView(PopupNotifyDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
+    ScreenUsage(title: "PopupDisplay", destination: AnyView(PopupDisplayDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
     ScreenUsage(title: "PopupPromotion", destination: AnyView(PopupPromotionDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
     ScreenUsage(title: "SnackBar", destination: AnyView(SnackBarDemo()), icon: getIcon(icon: "Popup"), hostsOwnChrome: true),
     ScreenUsage(title: "Switch", destination: AnyView(SwitchDemo()), icon: getIcon(icon: "Toggle"), hostsOwnChrome: true),
@@ -84,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")),

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

@@ -0,0 +1,173 @@
+//
+//  IPhoneDuoDemo.swift
+//  Example
+//
+//  Mirrors RN `app/screens/IPhoneDuo`: the live screen layout, an extended header + search
+//  + footer screen, the Duo tab bars, the popup / bottom sheet behaviour and a grid to scroll.
+//
+
+import MoMoUIKits
+import SwiftUI
+
+private let gridRows: [[Int]] = [[12], [6, 6], [4, 4, 4], [3, 3, 3, 3]]
+
+// enough rows to scroll, so the header glass and side bar can be checked
+private let scrollRows: [[Int]] = Array(repeating: gridRows, count: 4).flatMap { $0 }
+
+struct IPhoneDuoDemo: View {
+    var body: some View {
+        if #available(iOS 16.0, *) {
+            IPhoneDuoDemoContent()
+        } else {
+            Text("Requires iOS 16+").padding()
+        }
+    }
+}
+
+@available(iOS 16.0, *)
+private struct IPhoneDuoDemoContent: View {
+    @EnvironmentObject private var navigator: Navigator
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.M) {
+            VStack(spacing: 0) {
+                ForEach(info, id: \.0) { label, value in
+                    HStack {
+                        MomoText(label, typography: .bodyDefaultRegular)
+                        Spacer()
+                        MomoText(value, typography: .headerSSemibold)
+                    }
+                    .padding(.vertical, Spacing.XS)
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+
+            VStack(spacing: Spacing.S) {
+                demoButton("Extended header + footer") {
+                    navigator.push({ DuoGridScreen() }, options: extendedOptions)
+                }
+                demoButton("Glass tab bar") {
+                    navigator.push({ DuoTabDemo(useShortcut: false) }, options: tabOptions)
+                }
+                demoButton("Glass tab bar + useShortcut") {
+                    navigator.push({ DuoTabDemo(useShortcut: true) }, options: tabOptions)
+                }
+                demoButton("Glass tab bar + compress tab bar") {
+                    navigator.push({ DuoTabDemo(useShortcut: true, compressTabBar: true) }, options: tabOptions)
+                }
+                demoButton("Bottom sheet: iPhone Duo safe area") {
+                    navigator.showBottomSheet({ BottomSheetSafeArea() }, isSurface: true, header: .title("Safe area"))
+                }
+                demoButton("PopupNotify") {
+                    navigator.showModal {
+                        PopupNotify(props: PopupNotifyProps(
+                            image: "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png",
+                            title: "Title",
+                            description: String(repeating: "Check lại một nhịp auto chuyển sang dạng CTA. ", count: 8),
+                            primary: PopupAction(title: "Đồng ý", onPress: { navigator.hideOverplay() }),
+                            secondary: PopupAction(title: "Đóng", onPress: { navigator.hideOverplay() }),
+                            onIconClose: { navigator.hideOverplay() }
+                        ))
+                    }
+                }
+            }
+            .padding(.horizontal, Spacing.M)
+
+            DuoGrid()
+        }
+        .padding(.vertical, Spacing.M)
+    }
+
+    private var info: [(String, String)] {
+        let insets = layout.insets
+        return [
+            ("iPhone Duo", layout.isIPhoneDuo ? "yes" : "no"),
+            ("Window", "\(Int(layout.width)) x \(Int(layout.height))"),
+            ("Safe area (T R B L)", "\(Int(insets.top)) \(Int(insets.trailing)) \(Int(insets.bottom)) \(Int(insets.leading))"),
+            ("Content inset (L R)", "\(Int(layout.insetLeft)) \(Int(layout.insetRight))"),
+            ("Content width", "\(Int(layout.contentWidth))"),
+            ("Header height", "\(Int(layout.headerHeight))"),
+            ("Side bar", layout.sideBar.map { "\($0.edge == .left ? "left" : "right"), \(Int($0.width))pt, top \(Int($0.top))" } ?? "none"),
+        ]
+    }
+
+    private var extendedOptions: NavigationOptions {
+        NavigationOptions(
+            title: "Extended",
+            headerType: .extended,
+            headerRightData: HeaderRightData(useShortcut: true),
+            footer: { AnyView(MoMoUIKits.Button(title: "Footer action", action: {}, size: .large)) }
+        )
+    }
+
+    private var tabOptions: NavigationOptions {
+        NavigationOptions(title: "Duo tabs", headerType: .none, scrollable: false)
+    }
+
+    private func demoButton(_ title: String, action: @escaping () -> Void) -> some View {
+        MoMoUIKits.Button(title: title, action: action, type: .secondary, size: .small)
+    }
+}
+
+private struct DuoGridScreen: View {
+    var body: some View {
+        DuoGrid().padding(.vertical, Spacing.M)
+    }
+}
+
+private struct DuoGrid: View {
+    var body: some View {
+        VStack(spacing: Spacing.M) {
+            ForEach(scrollRows.indices, id: \.self) { row in
+                SectionView {
+                    ForEach(scrollRows[row].indices, id: \.self) { index in
+                        let span = scrollRows[row][index]
+                        ItemView(widthSpan: span) {
+                            MomoText("span \(span)", typography: .descriptionDefaultRegular)
+                                .frame(maxWidth: .infinity)
+                                .frame(height: 48)
+                                .background(Colors.black04)
+                                .clipShape(RoundedRectangle(cornerRadius: Radius.S))
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Markers on the content edges show the side safe area inside the sheet.
+private struct BottomSheetSafeArea: View {
+    @Environment(\.screenLayout) private var layout
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: Spacing.XS) {
+            HStack {
+                marker("← content edge")
+                Spacer()
+                marker("content edge →")
+            }
+            .padding(.bottom, Spacing.S)
+            MomoText("Window: \(Int(layout.width)) × \(Int(layout.height))", typography: .bodyDefaultRegular)
+            MomoText(
+                "Insets: top \(Int(layout.insets.top)) · right \(Int(layout.insets.trailing)) · bottom \(Int(layout.insets.bottom)) · left \(Int(layout.insets.leading))",
+                typography: .bodyDefaultRegular
+            )
+            MomoText(
+                "On iPhone Duo: the outer display keeps a full-width sheet with content inside the side safe area; the inner display centers the sheet, still attached to the bottom edge. Other devices are unchanged.",
+                typography: .descriptionDefaultRegular,
+                color: Colors.black12
+            )
+        }
+        .padding(.vertical, Spacing.M)
+    }
+
+    private func marker(_ text: String) -> some View {
+        MomoText(text, typography: .labelSMedium, color: Colors.pink03)
+            .padding(.vertical, Spacing.XS)
+            .padding(.horizontal, Spacing.S)
+            .background(Colors.black04)
+            .clipShape(RoundedRectangle(cornerRadius: Radius.XS))
+    }
+}

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

@@ -160,6 +160,7 @@ private struct PopupDisplayDemoContent: View {
                 errorCode: errorCode,
                 isShowCloseIcon: showCloseIcon
             )
+            .padding(.horizontal, Spacing.M)
         }
     }
 }

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

@@ -26,7 +26,7 @@ private struct PopupNotifyPreview: View {
     private func show() {
         navigator.showModal {
             PopupNotify(props: PopupNotifyProps(
-                image: "https://i.imgur.com/s70S9s9.png",
+                image: "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png",
                 title: "Title",
                 description: "Check lại một nhịp auto chuyển sang dạng CTA.",
                 error: "9004",
@@ -50,7 +50,7 @@ private let popupDirectionList: [PlaygroundOption] = [
 @available(iOS 16.0, *)
 private struct PopupNotifyPlayground: View {
     @EnvironmentObject private var navigator: Navigator
-    @State private var image = "https://i.imgur.com/s70S9s9.png"
+    @State private var image = "https://static.momocdn.net/app/img/popup_permission/img_permission_popup_camera.png"
     @State private var title = "Title"
     @State private var description = "Check lại một nhịp auto chuyển sang dạng CTA."
     @State private var error = "9004"

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

@@ -37,6 +37,7 @@ private struct PopupPromotionPreview: View {
     private func show(_ url: String) {
         navigator.showModal {
             PopupPromotion(imageUrl: url, onIconClose: { navigator.hideOverplay() }, onAction: { navigator.hideOverplay() })
+                .padding(.horizontal, Spacing.M)
         }
     }
 }
@@ -62,6 +63,7 @@ private struct PopupPromotionPlayground: View {
     private func show() {
         navigator.showModal {
             PopupPromotion(imageUrl: imageUrl, onIconClose: { navigator.hideOverplay() }, onAction: { navigator.hideOverplay() })
+                .padding(.horizontal, Spacing.M)
         }
     }
 }

package/local.properties

@@ -0,0 +1,8 @@
+## This file must *NOT* be checked into Version Control Systems,
+# as it contains information specific to your local configuration.
+#
+# Location of the SDK. This is only used by Gradle.
+# For customization when using a Version Control System, please read the
+# header note.
+#Tue Oct 06 18:08:41 GMT+07:00 2026
+sdk.dir=/Users/vu.nguyen15/Library/Android/sdk

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/native-kits",
-  "version": "0.167.1-beta.9",
+  "version": "0.167.1-duo-search.1-debug",
   "private": false,
   "dependeNavigationncies": {},
   "devDependencies": {},