@momo-kits/native-kits 0.163.1-beta.2-debug → 0.163.1-beta.20-debug

package/ios/Application/Localize.swift

@@ -0,0 +1,309 @@
+//
+//  Localize.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `application/Localize.kt`, itself a port of
+//  momo-kits React Native's `Application/Localize.ts`. Holds the merged
+//  dictionary (kit defaults + host overrides) and the active language,
+//  switched at runtime via `changeLanguage`. `Localize` is an `ObservableObject`
+//  so a language switch republishes to consumers of `translate`/`translateData`,
+//  mirroring Compose's snapshot-state-backed `language`.
+//
+
+import Foundation
+import SwiftUI
+
+/// Translation dictionary keyed by language; both `vi` and `en` are required.
+public struct LocalizationObject {
+    public var vi: [String: String]
+    public var en: [String: String]
+
+    public init(vi: [String: String] = [:], en: [String: String] = [:]) {
+        self.vi = vi
+        self.en = en
+    }
+}
+
+public final class Localize: ObservableObject {
+    public static let VI = "vi"
+    public static let EN = "en"
+
+    private var assets: LocalizationObject
+    @Published public private(set) var currentLanguage: String = Localize.VI
+
+    public init(_ translations: LocalizationObject = LocalizationObject()) {
+        self.assets = Localize.merge(base: Localize.defaultLanguage, override: translations)
+    }
+
+    public func changeLanguage(_ language: String?) {
+        currentLanguage = (language == Localize.EN) ? Localize.EN : Localize.VI
+    }
+
+    public func translate(_ key: String) -> String {
+        let dictionary = currentLanguage == Localize.EN ? assets.en : assets.vi
+        if let value = dictionary[key], !value.isEmpty { return value }
+        return key
+    }
+
+    public func translateData(_ data: [String: String]) -> String {
+        if let value = data[currentLanguage] { return value }
+        let body = data.map { "\"\($0.key)\":\"\($0.value)\"" }.joined(separator: ",")
+        return "{\(body)}"
+    }
+
+    public func translateData(vi: String, en: String) -> String {
+        currentLanguage == Localize.EN ? en : vi
+    }
+
+    /// Existing keys win (mirrors Compose: `merge(translations, assets)`).
+    public func addTranslations(_ translations: LocalizationObject) {
+        assets = Localize.merge(base: translations, override: assets)
+    }
+
+    private static func merge(base: LocalizationObject, override: LocalizationObject) -> LocalizationObject {
+        LocalizationObject(
+            vi: base.vi.merging(override.vi) { _, new in new },
+            en: base.en.merging(override.en) { _, new in new }
+        )
+    }
+
+    private static let defaultLanguage = LocalizationObject(
+        vi: [
+            "errorCode": "Mã lỗi: ",
+            "seeMore": "Xem thêm",
+            "cancel": "Huỷ",
+            "done": "Xong",
+            "confirm": "Xác nhận",
+            "month": "tháng",
+            "day": "ngày",
+            "choose": "Chọn",
+            "sent": "Đã gửi",
+            "received": "Đã tiếp nhận",
+            "processing": "Đang xử lý",
+            "processed": "Đã xử lý",
+            "addImg": "Thêm hình",
+            "chooseBtn": "Chọn button",
+            "imgEg": "Hình ảnh tham khảo",
+            "filter": "Sắp xếp",
+            "shipping": "Đang giao hàng",
+            "men": "Nam",
+            "women": "Nữ",
+            "more": "Khác",
+            "expDate": "Ngày hết hạn",
+            "exp": "HSD",
+            "inActive": "Chưa kích hoạt",
+            "voucherRemindHour": "Hết hạn sau {hours} giờ",
+            "voucherRemindMinute": "Hết hạn sau {minutes} phút",
+            "voucherRemindSecond": "Hết hạn sau {seconds} giây",
+            "voucherRemindDay": "Hết hạn sau {days} ngày",
+            "chooseRoundtrip": "Chọn vé khứ hồi",
+            "depart": "Ngày đi",
+            "return": "Ngày về",
+            "departing": "Đi",
+            "returning": "Về",
+            "jan": "Tháng 1",
+            "feb": "Tháng 2",
+            "mar": "Tháng 3",
+            "apr": "Tháng 4",
+            "may": "Tháng 5",
+            "jun": "Tháng 6",
+            "jul": "Tháng 7",
+            "aug": "Tháng 8",
+            "sep": "Tháng 9",
+            "oct": "Tháng 10",
+            "nov": "Tháng 11",
+            "dec": "Tháng 12",
+            "mon": "T2",
+            "tue": "T3",
+            "wed": "T4",
+            "thu": "T5",
+            "fri": "T6",
+            "sat": "T7",
+            "sun": "CN",
+            "showLunar": "Hiển thị lịch âm",
+            "newYear": "Tết Dương lịch",
+            "valentine": "Ngày Lễ Tình nhân",
+            "womenDay": "Ngày Quốc tế Phụ nữ",
+            "liberationDay": "Ngày giải phóng Miền Nam thống nhất đất nước",
+            "laborDay": "Ngày Quốc tế Lao động",
+            "childrenDay": "Ngày Quốc tế Thiếu nhi",
+            "nationalDay": "Quốc khánh nước CHXHCN Việt Nam",
+            "womenDayVN": "Ngày Phụ nữ Việt Nam",
+            "teacherDay": "Ngày Nhà giáo Việt Nam",
+            "christmasEve": "Ngày Lễ Giáng Sinh",
+            "christmas": "Ngày Lễ Giáng Sinh",
+            "lunarNewYear": "Tết Nguyên Đán",
+            "hungKingDay": "Giỗ Tổ Hùng Vương",
+            "balance": "Số dư trong ví",
+            "chooseDate": "Chọn ngày tháng năm",
+            "year": "năm",
+            "hour": "giờ",
+            "minute": "phút",
+            "from": "Từ",
+            "to": "Đến",
+            "connected": "Đã kết nối",
+            "disconnected": "Mất kết nối",
+            "hide": "Ẩn",
+            "viewAllTitle": "Xem tất cả",
+            "headerTitle": "Lịch sử thanh toán",
+            "SHORTEN": "THU GỌN",
+            "viewMoreBank": "XEM THÊM (${otherItemCount} ngân hàng)",
+            "transaction_success": "Thành công",
+            "transaction_fail": "Thất bại",
+            "transaction_processing": "Đang xử lý",
+            "viewMore": "Xem thêm",
+            "shorten": "Thu gọn",
+            "Payment": "Thanh toán ${serviceName}",
+            "currencyUnit": "đ",
+            "Month": "Tháng",
+            "save": "Lưu",
+            "favoriteIn": "Thêm dịch vụ yêu thích",
+            "favoriteOut": "Xóa dịch vụ yêu thích",
+            "deviceIn": "Thêm vào thiết bị",
+            "setting": "Cài đặt",
+            "transaction": "Lịch sử giao dịch",
+            "share": "Chia sẽ dịch vụ",
+            "information": "Thông tin chung",
+            "tutorial": "Hướng dẫn sử dụng",
+            "question": "Câu hỏi thường gặp",
+            "support": "Trung tâm hỗ trợ",
+            "skip": "Bỏ qua",
+            "enterPhoneNumber": "Vui lòng nhập số điện thoại",
+            "invalidPhoneNumber": "Số điện thoại không đúng",
+        ],
+        en: [
+            "seeMore": "See more",
+            "cancel": "Cancel",
+            "done": "Done",
+            "confirm": "Confirm",
+            "month": "month",
+            "day": "day",
+            "choose": "Choose",
+            "sent": "Sent",
+            "received": "Received",
+            "processing": "Processing",
+            "processed": "Done",
+            "addImg": "Add image",
+            "chooseBtn": "Choose button",
+            "imgEg": "Example images",
+            "filter": "Filter",
+            "shipping": "Shipping",
+            "men": "Men",
+            "women": "Women",
+            "more": "More",
+            "expDate": "Expiration date",
+            "exp": "EXP",
+            "inActive": "Not Activated",
+            "voucherRemindHour": "Revoke after {hours} hours",
+            "voucherRemindMinute": "Revoke after {minutes} minutes",
+            "voucherRemindSecond": "Revoke after {seconds} seconds",
+            "voucherRemindDay": "Revoke after {days} days",
+            "chooseRoundtrip": "Choose roundtrip ticket",
+            "depart": "Departing",
+            "return": "Returning",
+            "departing": "De",
+            "returning": "Re",
+            "jan": "January",
+            "feb": "February",
+            "mar": "March",
+            "apr": "April",
+            "may": "May",
+            "jun": "June",
+            "jul": "July",
+            "aug": "August",
+            "sep": "September",
+            "oct": "October",
+            "nov": "November",
+            "dec": "December",
+            "mon": "Mon",
+            "tue": "Tue",
+            "wed": "Wed",
+            "thu": "Thu",
+            "fri": "Fri",
+            "sat": "Sat",
+            "sun": "Sun",
+            "showLunar": "Show Lunar Calendar",
+            "newYear": "New Year's Day",
+            "valentine": "Valentine's Day",
+            "womenDay": "International Women's Day",
+            "liberationDay": "Liberation Day",
+            "laborDay": "Internation Labor's Day",
+            "childrenDay": "International Labor's Day",
+            "nationalDay": "National Day",
+            "womenDayVN": "Vietnamese Women's Day",
+            "teacherDay": "Teacher's Day",
+            "christmasEve": "Christmas Eve",
+            "christmas": "Christmas Day",
+            "lunarNewYear": "Lunar New Year",
+            "hungKingDay": "Hung Kings' Festival",
+            "balance": "Wallet Balance",
+            "chooseDate": "Choose date",
+            "year": "year",
+            "hour": "hour",
+            "minute": "minute",
+            "from": "From",
+            "to": "To",
+            "connected": "Connected",
+            "disconnected": "Disconnected",
+            "hide": "Hide",
+            "viewAllTitle": "View all",
+            "headerTitle": "Transaction history",
+            "SHORTEN": "SHORTEN",
+            "viewMoreBank": "VIEW MORE (${otherItemCount} banks)",
+            "transaction_success": "Success",
+            "transaction_fail": "Fail",
+            "transaction_processing": "Processing",
+            "viewMore": "View more",
+            "shorten": "Shorten",
+            "Payment": "${serviceName} payment",
+            "currencyUnit": "VND",
+            "Month": "Month",
+            "save": "Save",
+            "favoriteIn": "Add to favorite services",
+            "favoriteOut": "Remove to favorite services",
+            "deviceIn": "Add to device",
+            "setting": "Settings",
+            "transaction": "Transaction History",
+            "share": "Share",
+            "information": "Information",
+            "tutorial": "Instruction",
+            "question": "FAQ",
+            "support": "Support center",
+            "errorCode": "Error code: ",
+            "skip": "Skip",
+            "enterPhoneNumber": "Please enter your phone number",
+            "invalidPhoneNumber": "Invalid phone number",
+        ]
+    )
+}
+
+/// Snapshots `currentLanguage` alongside the instance so SwiftUI sees an environment
+/// *change* on `changeLanguage`: the `Localize` reference alone never changes, and
+/// `@Environment` does not subscribe to `@Published` the way `@EnvironmentObject` does.
+private struct LocalizeBox: Equatable {
+    let localize: Localize
+    let language: String
+
+    init(_ localize: Localize) {
+        self.localize = localize
+        self.language = localize.currentLanguage
+    }
+
+    static func == (lhs: LocalizeBox, rhs: LocalizeBox) -> Bool {
+        lhs.localize === rhs.localize && lhs.language == rhs.language
+    }
+}
+
+private struct LocalizeKey: EnvironmentKey {
+    /// A default-constructed `Localize` already carries the full kit dictionary, so a
+    /// consumer that never injects one renders untranslated-but-correct text instead of
+    /// trapping the way `@EnvironmentObject` does.
+    static let defaultValue = LocalizeBox(Localize())
+}
+
+public extension EnvironmentValues {
+    var localize: Localize {
+        get { self[LocalizeKey.self].localize }
+        set { self[LocalizeKey.self] = LocalizeBox(newValue) }
+    }
+}

package/ios/Application/MaxApi.swift

@@ -0,0 +1,18 @@
+//
+//  MaxApi.swift
+//  MoMoUIKits
+//
+//  Swift mirror of the host-app bridge exposed on Kotlin as `vn.momo.maxapi.IMaxApi`
+//  (`LocalMaxApi`). `IMaxApi` itself is an external compiled dependency with no
+//  source in this repo, so this protocol intentionally exposes only the methods
+//  this kit's Kotlin source actually calls (`track`, `dismiss`, `getLanguage`) —
+//  not a full guess at IMaxApi's real surface.
+//
+
+import Foundation
+
+public protocol MaxApi {
+    func track(eventName: String, params: [String: Any?])
+    func dismiss(completion: (() -> Void)?)
+    func getLanguage(callback: @escaping ([String: Any?]?) -> Void)
+}

package/ios/Application/Navigation/BottomTab/BottomTab.swift

@@ -0,0 +1,104 @@
+//
+//  BottomTab.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomTab` (navigation/bottomtab/BottomTab.kt).
+//  Hosts a set of tabbed screens, each wrapped in `StackScreen` chrome built
+//  from that tab's `NavigationOptions`, with a `BottomTabBar` pinned to the
+//  bottom. Switching tabs cross-fades + scales the content (parity with Compose).
+//
+
+import SwiftUI
+
+@available(iOS 16.0, *)
+public struct BottomTab: View {
+    private let items: [BottomTabItem]
+    private let floatingButton: BottomTabFloatingButton?
+
+    @EnvironmentObject private var navigator: Navigator
+    @State private var selectedIndex: Int = 0
+
+    public init(items: [BottomTabItem], floatingButton: BottomTabFloatingButton? = nil) {
+        self.items = items
+        self.floatingButton = floatingButton
+    }
+
+    private var bottomInset: CGFloat { safeAreaBottomInset() }
+    private var reservedBottom: CGFloat { BOTTOM_TAB_BAR_HEIGHT + bottomInset + Spacing.S }
+
+    public var body: some View {
+        ZStack(alignment: .bottom) {
+            // Tab content area, inset above the bar.
+            ZStack {
+                ForEach(items.indices, id: \.self) { index in
+                    if index == selectedIndex {
+                        tabScreen(for: index)
+                            .transition(.scale(scale: 0.97).combined(with: .opacity))
+                    }
+                }
+            }
+            .padding(.bottom, reservedBottom)
+            .animation(.easeInOut(duration: 0.2), value: selectedIndex)
+
+            // Tab bar + home-indicator filler.
+            VStack(spacing: 0) {
+                BottomTabBar(
+                    items: items,
+                    floatingButton: floatingButton,
+                    selectedIndex: selectedIndex,
+                    onTabSelected: { index in
+                        if index != selectedIndex { selectedIndex = index }
+                    }
+                )
+                Colors.black01
+                    .frame(height: bottomInset + Spacing.S)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .ignoresSafeArea(edges: .bottom)
+        .preference(key: IsBottomTabRootKey.self, value: true)
+    }
+
+    @ViewBuilder
+    private func tabScreen(for index: Int) -> some View {
+        let item = items[index]
+        let options = item.options ?? NavigationOptions()
+        StackScreen(
+            backgroundColor: options.backgroundColor,
+            headerTransparent: options.headerTransparent,
+            fullScreenContent: options.fullScreenContent,
+            tintColor: options.tintColor ?? Colors.black17,
+            isBack: !options.hiddenBack,
+            headerType: options.headerType,
+            useAnimated: options.useAnimated,
+            title: options.title,
+            headerTitle: options.headerTitle,
+            titlePosition: options.titlePosition,
+            // Tab back: non-first tab returns to the first tab, first tab
+            // delegates to the navigator (mirrors Compose's onBackHandler).
+            goBack: options.hiddenBack ? nil : {
+                if index != 0 { selectedIndex = 0 } else { navigator.onBackSafe() }
+            },
+            scrollable: options.scrollable,
+            scrollToTopCallback: options.scrollToTopCallback,
+            useAvoidKeyboard: options.useAvoidKeyboard,
+            keyboardShouldPersistTaps: options.keyboardShouldPersistTaps,
+            footer: options.footer,
+            headerRight: options.resolvedHeaderRight,
+            animatedHeader: options.animatedHeader,
+            layoutOffset: options.layoutOffset,
+            inputSearchProps: options.inputSearchProps,
+            fabProps: options.fabProps,
+            content: { item.screen() }
+        )
+    }
+}
+
+/// Bottom safe-area inset (home indicator).
+@available(iOS 16.0, *)
+private func safeAreaBottomInset() -> CGFloat {
+    let bottomInset = UIApplication.shared.connectedScenes
+        .compactMap { ($0 as? UIWindowScene)?.keyWindow?.safeAreaInsets.bottom }
+        .first ?? 0
+    return min(bottomInset, 21)
+}

package/ios/Application/Navigation/BottomTab/BottomTabBar.swift

@@ -0,0 +1,215 @@
+//
+//  BottomTabBar.swift
+//  MoMoUIKits
+//
+//  SwiftUI mirror of Compose's `BottomTabBar` (navigation/bottomtab/BottomTabBar.kt).
+//  Renders the row of tab items, an animated selection indicator, a top shadow,
+//  badges/dots, and an optional center floating button (with the curved notch).
+//
+
+import SwiftUI
+
+// MARK: - Models
+
+/// Mirrors Compose's `BottomTabItem`.
+public struct BottomTabItem: Identifiable {
+    public let id = UUID()
+    public let name: String
+    public let label: String
+    public let icon: String
+    public let showDot: Bool
+    public let badgeLabel: String?
+    public let options: NavigationOptions?
+    public let screen: () -> AnyView
+
+    public init(
+        name: String,
+        label: String,
+        icon: String,
+        showDot: Bool = false,
+        badgeLabel: String? = nil,
+        options: NavigationOptions? = nil,
+        @ViewBuilder screen: @escaping () -> some View
+    ) {
+        self.name = name
+        self.label = label
+        self.icon = icon
+        self.showDot = showDot
+        self.badgeLabel = badgeLabel
+        self.options = options
+        self.screen = { AnyView(screen()) }
+    }
+}
+
+/// Mirrors Compose's `BottomTabFloatingButton`.
+public struct BottomTabFloatingButton {
+    public let icon: String
+    public let label: String
+    public let onPress: () -> Void
+
+    public init(icon: String, label: String, onPress: @escaping () -> Void) {
+        self.icon = icon
+        self.label = label
+        self.onPress = onPress
+    }
+}
+
+let bottomTabFloatingButtonWidth: CGFloat = 75
+let BOTTOM_TAB_BAR_HEIGHT: CGFloat = 64
+
+// MARK: - Tab bar
+
+struct BottomTabBar: View {
+    let items: [BottomTabItem]
+    let floatingButton: BottomTabFloatingButton?
+    let selectedIndex: Int
+    let onTabSelected: (Int) -> Void
+
+    private var screenWidth: CGFloat { UIScreen.main.bounds.width }
+    private var mid: Int { items.count / 2 }
+
+    private var tabWidth: CGFloat {
+        if floatingButton != nil {
+            return (screenWidth - bottomTabFloatingButtonWidth) / CGFloat(items.count)
+        }
+        return screenWidth / CGFloat(items.count)
+    }
+
+    private var indicatorOffset: CGFloat {
+        let adjust: CGFloat = (floatingButton != nil && selectedIndex >= mid) ? bottomTabFloatingButtonWidth : 0
+        return tabWidth * CGFloat(selectedIndex) + tabWidth / 2 - screenWidth / 2 + adjust
+    }
+
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            HStack(spacing: 0) {
+                if floatingButton == nil {
+                    tabItems(from: 0, to: items.count)
+                } else {
+                    tabItems(from: 0, to: mid)
+                    Spacer()
+                        .frame(width: bottomTabFloatingButtonWidth)
+                        .padding(.horizontal, Spacing.XXS)
+                    tabItems(from: mid, to: items.count)
+                }
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: BOTTOM_TAB_BAR_HEIGHT)
+            .background(Colors.black01)
+
+            // Animated selection indicator.
+            RoundedRectangle(cornerRadius: 2)
+                .fill(Colors.primary)
+                .frame(width: 44, height: 2)
+                .offset(x: indicatorOffset, y: -BOTTOM_TAB_BAR_HEIGHT + 2)
+                .animation(.easeInOut(duration: 0.25), value: selectedIndex)
+
+            // Top shadow.
+            LinearGradient(
+                colors: [Color.black.opacity(0.05), .clear],
+                startPoint: .bottom,
+                endPoint: .top
+            )
+            .frame(height: 6)
+            .frame(maxWidth: .infinity)
+            .offset(y: -BOTTOM_TAB_BAR_HEIGHT)
+
+            if let floatingButton {
+                CenterFloatingButton(data: floatingButton)
+            }
+        }
+    }
+
+    @ViewBuilder
+    private func tabItems(from: Int, to: Int) -> some View {
+        ForEach(from..<to, id: \.self) { index in
+            TabBarItem(
+                item: items[index],
+                selected: index == selectedIndex,
+                onClick: { onTabSelected(index) }
+            )
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+
+// MARK: - Tab item
+
+private struct TabBarItem: View {
+    let item: BottomTabItem
+    let selected: Bool
+    let onClick: () -> Void
+
+    private var tintColor: Color { selected ? Colors.primary : Colors.black10 }
+
+    /// Mirrors Compose's `formatLabel`: hide a badge that is the number "0".
+    private var badgeLabel: String? {
+        guard let label = item.badgeLabel else { return nil }
+        if let n = Int(label), n == 0 { return nil }
+        return label
+    }
+
+    var body: some View {
+        ZStack(alignment: .topTrailing) {
+            VStack(spacing: 0) {
+                Icon(source: item.icon, size: 28, color: tintColor)
+                    .padding(Spacing.XS)
+                MomoText(
+                    item.label,
+                    typography: selected ? .labelXsMedium : .descriptionXsRegular,
+                    color: tintColor,
+                    textAlign: .center,
+                    maxLines: 1
+                )
+                    .truncationMode(.tail)
+            }
+            .frame(maxWidth: .infinity, maxHeight: .infinity)
+            .padding(.horizontal, Spacing.S)
+            .padding(.vertical, Spacing.S)
+
+            if let badgeLabel {
+                if badgeLabel.isEmpty {
+                    BadgeDot(size: .small)
+                        .offset(x: -Spacing.S, y: Spacing.XS)
+                } else {
+                    Badge(label: badgeLabel)
+                        .offset(x: -Spacing.XS, y: 0)
+                }
+            } else if item.showDot {
+                BadgeDot(size: .small)
+                    .offset(x: -Spacing.S, y: Spacing.XS)
+            }
+        }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .padding(.horizontal, Spacing.XXS)
+        .contentShape(Rectangle())
+        .onTapGesture { onClick() }
+    }
+}
+
+// MARK: - Center floating button
+
+private struct CenterFloatingButton: View {
+    let data: BottomTabFloatingButton
+
+    var body: some View {
+        VStack(spacing: 0) {
+            CurvedContainer()
+            Circle()
+                .fill(Colors.primary)
+                .frame(width: 48, height: 48)
+                .overlay(Icon(source: data.icon, size: 28, color: .white))
+            Spacer().frame(height: 4)
+            MomoText(data.label, typography: .labelXsMedium, color: Colors.black01, textAlign: .center, maxLines: 1)
+                .frame(maxWidth: .infinity)
+                .frame(height: 14)
+                .background(Colors.primary)
+                .clipShape(RoundedRectangle(cornerRadius: Radius.XL))
+        }
+        .frame(width: bottomTabFloatingButtonWidth)
+        .padding(.horizontal, Spacing.XXS)
+        .padding(.vertical, Spacing.S)
+        .contentShape(Rectangle())
+        .onTapGesture { data.onPress() }
+    }
+}