1

CustomKeyboard/View/Buy/KBKeyboardSubscriptionFeatureItemView.h

@@ -0,0 +1,21 @@
+//
+//  KBKeyboardSubscriptionFeatureItemView.h
+//  CustomKeyboard
+//
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// 顶部滚动的功能点 Item（左图右文）
+@interface KBKeyboardSubscriptionFeatureItemView : UIView
+
+- (void)configureWithImage:(UIImage *)image title:(NSString *)title;
+
+/// 根据 title 计算推荐宽度：textWidth + 50（图片 35 + 间距 5 + 左右内边距各 5）
++ (CGFloat)preferredWidthForTitle:(NSString *)title;
+
+@end
+
+NS_ASSUME_NONNULL_END
+

CustomKeyboard/View/Buy/KBKeyboardSubscriptionFeatureItemView.m

@@ -0,0 +1,86 @@
+//
+//  KBKeyboardSubscriptionFeatureItemView.m
+//  CustomKeyboard
+//
+
+#import "KBKeyboardSubscriptionFeatureItemView.h"
+#import "Masonry.h"
+
+@interface KBKeyboardSubscriptionFeatureItemView ()
+@property (nonatomic, strong) UIImageView *iconView;
+@property (nonatomic, strong) UILabel *titleLabel;
+@end
+
+@implementation KBKeyboardSubscriptionFeatureItemView
+
+static const CGFloat kKBFeatureItemPadding = 5.0;
+static const CGFloat kKBFeatureItemIconSize = 35.0;
+static const CGFloat kKBFeatureItemGap = 5.0;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+//        self.layer.cornerRadius = 24;
+//        self.layer.masksToBounds = YES;
+//        self.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.85];
+
+        [self addSubview:self.iconView];
+        [self addSubview:self.titleLabel];
+
+        [self.iconView mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.left.equalTo(self.mas_left).offset(kKBFeatureItemPadding);
+            make.centerY.equalTo(self.mas_centerY);
+            make.width.height.mas_equalTo(kKBFeatureItemIconSize);
+        }];
+
+        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.left.equalTo(self.iconView.mas_right).offset(kKBFeatureItemGap);
+            make.centerY.equalTo(self.mas_centerY);
+            make.right.equalTo(self.mas_right).offset(-kKBFeatureItemPadding);
+        }];
+    }
+    return self;
+}
+
+- (void)configureWithImage:(UIImage *)image title:(NSString *)title {
+    self.iconView.image = image;
+    self.titleLabel.text = title ?: @"";
+}
+
++ (CGFloat)preferredWidthForTitle:(NSString *)title {
+    UIFont *font = [UIFont systemFontOfSize:13 weight:UIFontWeightSemibold];
+    NSString *text = title ?: @"";
+    NSArray<NSString *> *lines = [text componentsSeparatedByCharactersInSet:[NSCharacterSet newlineCharacterSet]];
+    CGFloat maxLineWidth = 0;
+    for (NSString *line in lines) {
+        NSString *trimLine = [line stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
+        if (trimLine.length == 0) { continue; }
+        CGSize size = [trimLine sizeWithAttributes:@{NSFontAttributeName: font}];
+        maxLineWidth = MAX(maxLineWidth, ceil(size.width));
+    }
+    if (maxLineWidth <= 0) { maxLineWidth = 80; }
+
+    CGFloat width = maxLineWidth + 50.0; // 5 + 35 + 5 + 5
+    width = MIN(MAX(width, 120.0), 240.0);
+    return width;
+}
+
+- (UIImageView *)iconView {
+    if (!_iconView) {
+        _iconView = [[UIImageView alloc] init];
+        _iconView.contentMode = UIViewContentModeScaleAspectFit;
+    }
+    return _iconView;
+}
+
+- (UILabel *)titleLabel {
+    if (!_titleLabel) {
+        _titleLabel = [[UILabel alloc] init];
+        _titleLabel.font = [UIFont systemFontOfSize:13 weight:UIFontWeightSemibold];
+        _titleLabel.textColor = [UIColor colorWithHex:0x4A4A4A];
+        _titleLabel.numberOfLines = 0;
+        _titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
+    }
+    return _titleLabel;
+}
+
+@end

CustomKeyboard/View/Buy/KBKeyboardSubscriptionFeatureMarqueeView.h

@@ -0,0 +1,20 @@
+//
+//  KBKeyboardSubscriptionFeatureMarqueeView.h
+//  CustomKeyboard
+//
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/// 顶部功能点横向自动滚动视图
+@interface KBKeyboardSubscriptionFeatureMarqueeView : UIView
+
+/// titles/images 数量不一致时，以较小的 count 为准
+- (void)configureWithTitles:(NSArray<NSString *> *)titles
+                     images:(NSArray<UIImage *> *)images;
+
+@end
+
+NS_ASSUME_NONNULL_END
+

CustomKeyboard/View/Buy/KBKeyboardSubscriptionFeatureMarqueeView.m

@@ -0,0 +1,215 @@
+//
+//  KBKeyboardSubscriptionFeatureMarqueeView.m
+//  CustomKeyboard
+//
+
+#import "KBKeyboardSubscriptionFeatureMarqueeView.h"
+#import "KBKeyboardSubscriptionFeatureItemView.h"
+#import "Masonry.h"
+
+@interface KBKeyboardSubscriptionFeatureMarqueeView ()
+@property (nonatomic, strong) UIScrollView *scrollView;
+@property (nonatomic, strong) UIView *contentView;
+@property (nonatomic, strong) CADisplayLink *displayLink;
+@property (nonatomic, assign) CGFloat loopWidth;
+@property (nonatomic, copy) NSArray<NSDictionary *> *items;
+@end
+
+@implementation KBKeyboardSubscriptionFeatureMarqueeView
+
+static const CGFloat kKBFeatureMarqueeItemSpacing = 12.0;
+static const CGFloat kKBFeatureMarqueeSpeedPerFrame = 0.35f;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        self.backgroundColor = [UIColor clearColor];
+        [self addSubview:self.scrollView];
+        [self.scrollView addSubview:self.contentView];
+
+        [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.edges.equalTo(self);
+        }];
+        [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.top.bottom.equalTo(self.scrollView);
+            make.left.equalTo(self.scrollView);
+            make.height.equalTo(self.scrollView);
+            make.right.equalTo(self.scrollView);
+        }];
+    }
+    return self;
+}
+
+- (void)dealloc {
+    [self stopTicker];
+}
+
+- (void)didMoveToWindow {
+    [super didMoveToWindow];
+    if (self.window) {
+        [self startTickerIfNeeded];
+    } else {
+        [self stopTicker];
+    }
+}
+
+- (void)setHidden:(BOOL)hidden {
+    BOOL oldHidden = self.isHidden;
+    [super setHidden:hidden];
+    if (oldHidden == hidden) { return; }
+    if (hidden) {
+        [self stopTicker];
+    } else if (self.window) {
+        [self startTickerIfNeeded];
+    }
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    // 宽度变化时重新评估是否需要滚动
+    [self rebuildIfNeeded];
+}
+
+#pragma mark - Public
+
+- (void)configureWithTitles:(NSArray<NSString *> *)titles images:(NSArray<UIImage *> *)images {
+    NSInteger count = MIN(titles.count, images.count);
+    if (count <= 0) {
+        self.items = @[];
+        [self rebuildIfNeeded];
+        return;
+    }
+    NSMutableArray *arr = [NSMutableArray arrayWithCapacity:(NSUInteger)count];
+    for (NSInteger i = 0; i < count; i++) {
+        NSString *t = titles[(NSUInteger)i] ?: @"";
+        UIImage *img = images[(NSUInteger)i] ?: [UIImage new];
+        [arr addObject:@{@"title": t, @"image": img}];
+    }
+    self.items = [arr copy];
+    [self rebuildIfNeeded];
+}
+
+#pragma mark - Build
+
+- (void)rebuildIfNeeded {
+    [self.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
+    if (self.items.count == 0) {
+        self.loopWidth = 0;
+        self.scrollView.contentSize = CGSizeZero;
+        self.scrollView.contentOffset = CGPointZero;
+        [self stopTicker];
+        return;
+    }
+
+    BOOL shouldLoop = (self.items.count > 1);
+    NSInteger baseCount = self.items.count;
+
+    NSMutableArray<NSNumber *> *baseWidths = [NSMutableArray arrayWithCapacity:(NSUInteger)baseCount];
+    CGFloat baseTotalWidth = 0;
+    for (NSInteger i = 0; i < baseCount; i++) {
+        NSDictionary *info = self.items[(NSUInteger)i];
+        NSString *title = [info[@"title"] isKindOfClass:NSString.class] ? info[@"title"] : @"";
+        CGFloat w = [KBKeyboardSubscriptionFeatureItemView preferredWidthForTitle:title];
+        [baseWidths addObject:@(w)];
+        baseTotalWidth += w;
+        if (i > 0) { baseTotalWidth += kKBFeatureMarqueeItemSpacing; }
+    }
+
+    NSArray *loopData = shouldLoop ? [self.items arrayByAddingObjectsFromArray:self.items] : self.items;
+    CGFloat totalWidth = shouldLoop ? (baseTotalWidth * 2 + kKBFeatureMarqueeItemSpacing) : baseTotalWidth;
+
+    UIView *previous = nil;
+    for (NSInteger idx = 0; idx < loopData.count; idx++) {
+        NSDictionary *info = loopData[(NSUInteger)idx];
+        UIImage *img = [info[@"image"] isKindOfClass:UIImage.class] ? info[@"image"] : nil;
+        NSString *title = [info[@"title"] isKindOfClass:NSString.class] ? info[@"title"] : @"";
+        CGFloat width = baseWidths[(NSUInteger)(idx % baseCount)].doubleValue;
+
+        KBKeyboardSubscriptionFeatureItemView *itemView = [[KBKeyboardSubscriptionFeatureItemView alloc] init];
+        [itemView configureWithImage:(img ?: [UIImage new]) title:title];
+        [self.contentView addSubview:itemView];
+
+        [itemView mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.top.bottom.equalTo(self.contentView);
+            make.width.mas_equalTo(width);
+            if (previous) {
+                make.left.equalTo(previous.mas_right).offset(kKBFeatureMarqueeItemSpacing);
+            } else {
+                make.left.equalTo(self.contentView.mas_left);
+            }
+        }];
+        previous = itemView;
+    }
+
+    [self.contentView mas_remakeConstraints:^(MASConstraintMaker *make) {
+        make.top.bottom.equalTo(self.scrollView);
+        make.left.equalTo(self.scrollView);
+        make.height.equalTo(self.scrollView);
+        if (previous) {
+            make.right.equalTo(previous.mas_right);
+        } else {
+            make.right.equalTo(self.scrollView);
+        }
+    }];
+
+    CGFloat minWidth = CGRectGetWidth(self.bounds);
+    if (minWidth <= 0) { minWidth = 1; }
+    CGFloat height = CGRectGetHeight(self.bounds);
+    if (height <= 0) { height = 48; }
+
+    CGFloat contentWidth = totalWidth;
+    if (contentWidth <= minWidth) {
+        contentWidth = minWidth;
+        self.loopWidth = 0;
+        [self stopTicker];
+        self.scrollView.contentOffset = CGPointZero;
+    } else {
+        self.loopWidth = shouldLoop ? (baseTotalWidth + kKBFeatureMarqueeItemSpacing) : 0;
+        [self startTickerIfNeeded];
+    }
+    self.scrollView.contentSize = CGSizeMake(contentWidth, height);
+}
+
+#pragma mark - Ticker
+
+- (void)startTickerIfNeeded {
+    if (self.displayLink || self.loopWidth <= 0) { return; }
+    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleTick)];
+    self.displayLink.preferredFramesPerSecond = 60;
+    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
+}
+
+- (void)stopTicker {
+    [self.displayLink invalidate];
+    self.displayLink = nil;
+}
+
+- (void)handleTick {
+    if (self.loopWidth <= 0) { return; }
+    CGFloat nextX = self.scrollView.contentOffset.x + kKBFeatureMarqueeSpeedPerFrame;
+    if (nextX >= self.loopWidth) {
+        nextX -= self.loopWidth;
+    }
+    self.scrollView.contentOffset = CGPointMake(nextX, 0);
+}
+
+#pragma mark - Lazy
+
+- (UIScrollView *)scrollView {
+    if (!_scrollView) {
+        _scrollView = [[UIScrollView alloc] init];
+        _scrollView.showsHorizontalScrollIndicator = NO;
+        _scrollView.scrollEnabled = NO;
+        _scrollView.clipsToBounds = YES;
+    }
+    return _scrollView;
+}
+
+- (UIView *)contentView {
+    if (!_contentView) {
+        _contentView = [[UIView alloc] init];
+    }
+    return _contentView;
+}
+
+@end
+

CustomKeyboard/View/Buy/KBKeyboardSubscriptionOptionCell.h

@@ -0,0 +1,18 @@
+//
+//  KBKeyboardSubscriptionOptionCell.h
+//  CustomKeyboard
+//
+//  Created by Mac on 2025/12/17.
+//
+
+#import <UIKit/UIKit.h>
+#import "KBKeyboardSubscriptionProduct.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface KBKeyboardSubscriptionOptionCell : UICollectionViewCell
+- (void)configureWithProduct:(KBKeyboardSubscriptionProduct *)product;
+- (void)applySelected:(BOOL)selected animated:(BOOL)animated;
+@end
+
+NS_ASSUME_NONNULL_END

CustomKeyboard/View/Buy/KBKeyboardSubscriptionOptionCell.m

@@ -0,0 +1,151 @@
+//
+//  KBKeyboardSubscriptionOptionCell.m
+//  CustomKeyboard
+//
+//  Created by Mac on 2025/12/17.
+//
+
+#import "KBKeyboardSubscriptionOptionCell.h"
+@interface KBKeyboardSubscriptionOptionCell()
+@property (nonatomic, strong) UIView *cardView;
+@property (nonatomic, strong) UILabel *titleLabel;
+@property (nonatomic, strong) UILabel *priceLabel;
+@property (nonatomic, strong) UILabel *strikeLabel;
+@property (nonatomic, strong) UIImageView *selectedImageView;
+@end
+@implementation KBKeyboardSubscriptionOptionCell
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        self.contentView.backgroundColor = [UIColor clearColor];
+        [self.contentView addSubview:self.cardView];
+        [self.cardView addSubview:self.titleLabel];
+        [self.cardView addSubview:self.priceLabel];
+        [self.cardView addSubview:self.strikeLabel];
+        [self.cardView addSubview:self.selectedImageView];
+
+        [self.cardView mas_makeConstraints:^(MASConstraintMaker *make) {
+//            make.edges.equalTo(self.contentView);
+            make.left.right.top.equalTo(self.contentView);
+            make.bottom.equalTo(self.contentView).offset(-10);
+        }];
+
+        [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.top.equalTo(self.cardView.mas_top).offset(8);
+            make.left.equalTo(self.cardView.mas_left).offset(10);
+            make.right.equalTo(self.cardView.mas_right).offset(-10);
+        }];
+
+        [self.priceLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.left.equalTo(self.titleLabel.mas_left);
+            make.top.equalTo(self.titleLabel.mas_bottom).offset(8);
+        }];
+
+        [self.strikeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.left.equalTo(self.priceLabel.mas_right).offset(5);
+            make.centerY.equalTo(self.priceLabel);
+        }];
+
+        [self.selectedImageView mas_makeConstraints:^(MASConstraintMaker *make) {
+            make.centerX.equalTo(self.cardView.mas_centerX);
+            make.bottom.equalTo(self.cardView.mas_bottom).offset(10);
+            make.width.mas_equalTo(16);
+            make.height.mas_equalTo(17);
+        }];
+    }
+    return self;
+}
+
+- (void)prepareForReuse {
+    [super prepareForReuse];
+    self.titleLabel.text = @"";
+    self.priceLabel.text = @"";
+    self.strikeLabel.attributedText = nil;
+    self.strikeLabel.hidden = YES;
+    [self applySelected:NO animated:NO];
+}
+
+- (void)configureWithProduct:(KBKeyboardSubscriptionProduct *)product {
+    if (!product) { return; }
+    self.titleLabel.text = [product displayTitle];
+    self.priceLabel.text = [product priceDisplayText];
+    NSString *strike = [product strikePriceDisplayText];
+    if (strike.length > 0) {
+        NSDictionary *attr = @{
+            NSStrikethroughStyleAttributeName: @(NSUnderlineStyleSingle),
+            NSForegroundColorAttributeName: [UIColor colorWithHex:0xCCCCCC],
+            NSFontAttributeName: [UIFont systemFontOfSize:14]
+        };
+        self.strikeLabel.attributedText = [[NSAttributedString alloc] initWithString:strike attributes:attr];
+        self.strikeLabel.hidden = NO;
+    } else {
+        self.strikeLabel.attributedText = nil;
+        self.strikeLabel.hidden = YES;
+    }
+}
+
+- (void)applySelected:(BOOL)selected animated:(BOOL)animated {
+    void (^changes)(void) = ^{
+        self.cardView.layer.borderColor = selected ? [UIColor colorWithHex:0x02BEAC].CGColor : [[UIColor blackColor] colorWithAlphaComponent:0.12].CGColor;
+        self.cardView.layer.borderWidth = selected ? 2.0 : 1.0;
+        self.selectedImageView.alpha = selected ? 1.0 : 0.0;
+    };
+    if (animated) {
+        self.selectedImageView.hidden = NO;
+        [UIView animateWithDuration:0.18 animations:changes completion:^(BOOL finished) {
+            self.selectedImageView.hidden = !selected;
+        }];
+    } else {
+        changes();
+        self.selectedImageView.hidden = !selected;
+    }
+}
+
+- (UIView *)cardView {
+    if (!_cardView) {
+        _cardView = [[UIView alloc] init];
+        _cardView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.96];
+        _cardView.layer.cornerRadius = 20;
+        _cardView.layer.borderWidth = 1.0;
+        _cardView.layer.borderColor = [[UIColor blackColor] colorWithAlphaComponent:0.12].CGColor;
+    }
+    return _cardView;
+}
+
+- (UILabel *)titleLabel {
+    if (!_titleLabel) {
+        _titleLabel = [[UILabel alloc] init];
+        _titleLabel.font = [UIFont systemFontOfSize:13 weight:UIFontWeightSemibold];
+        _titleLabel.numberOfLines = 2;
+        _titleLabel.textColor = [UIColor colorWithHex:0x1B1F1A];
+    }
+    return _titleLabel;
+}
+
+- (UILabel *)priceLabel {
+    if (!_priceLabel) {
+        _priceLabel = [[UILabel alloc] init];
+        _priceLabel.font = [UIFont systemFontOfSize:20 weight:UIFontWeightBold];
+        _priceLabel.textColor = [UIColor colorWithHex:0x1B1F1A];
+    }
+    return _priceLabel;
+}
+
+- (UILabel *)strikeLabel {
+    if (!_strikeLabel) {
+        _strikeLabel = [[UILabel alloc] init];
+        _strikeLabel.textColor = [UIColor colorWithHex:0xCCCCCC];
+        _strikeLabel.hidden = YES;
+    }
+    return _strikeLabel;
+}
+
+- (UIImageView *)selectedImageView {
+    if (!_selectedImageView) {
+        _selectedImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"buy_sel_icon"]];
+        _selectedImageView.contentMode = UIViewContentModeScaleAspectFit;
+        _selectedImageView.hidden = YES;
+        _selectedImageView.alpha = 0.0;
+    }
+    return _selectedImageView;
+}
+@end

CustomKeyboard/View/Buy/KBKeyboardSubscriptionView.h

@@ -0,0 +1,31 @@
+//
+//  KBKeyboardSubscriptionView.h
+//  CustomKeyboard
+//
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@class KBKeyboardSubscriptionProduct;
+@class KBKeyboardSubscriptionView;
+
+@protocol KBKeyboardSubscriptionViewDelegate <NSObject>
+@optional
+- (void)subscriptionViewDidTapClose:(KBKeyboardSubscriptionView *)view;
+- (void)subscriptionView:(KBKeyboardSubscriptionView *)view didTapPurchaseForProduct:(KBKeyboardSubscriptionProduct *)product;
+@end
+
+/// 键盘内的订阅弹层
+@interface KBKeyboardSubscriptionView : UIView
+
+@property (nonatomic, weak) id<KBKeyboardSubscriptionViewDelegate> delegate;
+
+/// 首次展示时调用，内部会自动请求订阅商品
+- (void)refreshProductsIfNeeded;
+/// 外部强制刷新
+- (void)reloadProducts;
+
+@end
+
+NS_ASSUME_NONNULL_END

CustomKeyboard/View/Buy/KBKeyboardSubscriptionView.m

@@ -0,0 +1,456 @@
+//
+//  KBKeyboardSubscriptionView.m
+//  CustomKeyboard
+//
+
+#import "KBKeyboardSubscriptionView.h"
+#import "KBKeyboardSubscriptionProduct.h"
+#import "KBNetworkManager.h"
+#import "KBFullAccessManager.h"
+#import "KBKeyboardSubscriptionFeatureMarqueeView.h"
+#import "KBKeyboardSubscriptionOptionCell.h"
+#import "KBConfig.h"
+
+#import <MJExtension/MJExtension.h>
+
+static NSString * const kKBKeyboardSubscriptionCellId = @"kKBKeyboardSubscriptionCellId";
+
+static id KBKeyboardSubscriptionSanitizeJSON(id obj) {
+    if (!obj || obj == (id)kCFNull) { return nil; }
+    if ([obj isKindOfClass:[NSDictionary class]]) {
+        NSDictionary *dict = (NSDictionary *)obj;
+        NSMutableDictionary *result = [NSMutableDictionary dictionaryWithCapacity:dict.count];
+        [dict enumerateKeysAndObjectsUsingBlock:^(id key, id value, BOOL *stop) {
+            (void)stop;
+            if (![key isKindOfClass:[NSString class]]) { return; }
+            id sanitized = KBKeyboardSubscriptionSanitizeJSON(value);
+            if (!sanitized) { return; }
+            result[key] = sanitized;
+        }];
+        return result;
+    }
+    if ([obj isKindOfClass:[NSArray class]]) {
+        NSArray *arr = (NSArray *)obj;
+        NSMutableArray *result = [NSMutableArray arrayWithCapacity:arr.count];
+        for (id item in arr) {
+            id sanitized = KBKeyboardSubscriptionSanitizeJSON(item);
+            if (!sanitized) { continue; }
+            [result addObject:sanitized];
+        }
+        return result;
+    }
+    return obj;
+}
+
+@interface KBKeyboardSubscriptionView () <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout>
+@property (nonatomic, strong) UIImageView *cardView;
+@property (nonatomic, strong) UIButton *closeButton;
+@property (nonatomic, strong) KBKeyboardSubscriptionFeatureMarqueeView *featureMarqueeView;
+@property (nonatomic, strong) UICollectionView *collectionView;
+@property (nonatomic, strong) UIButton *purchaseButton;
+@property (nonatomic, strong) UILabel *agreementLabel;
+@property (nonatomic, strong) UIButton *agreementButton;
+@property (nonatomic, strong) UIActivityIndicatorView *loadingIndicator;
+@property (nonatomic, strong) UILabel *emptyLabel;
+@property (nonatomic, copy) NSArray<KBKeyboardSubscriptionProduct *> *products;
+@property (nonatomic, copy, nullable) NSArray *productsRawJSON;
+@property (nonatomic, assign) NSInteger selectedIndex;
+@property (nonatomic, assign) BOOL didLoadOnce;
+@property (nonatomic, assign, getter=isLoading) BOOL loading;
+@end
+
+@implementation KBKeyboardSubscriptionView
+
+- (instancetype)initWithFrame:(CGRect)frame {
+    if (self = [super initWithFrame:frame]) {
+        self.backgroundColor = [UIColor clearColor];
+        _selectedIndex = NSNotFound;
+        [self setupCardView];
+        [self setupFeatureItems];
+    }
+    return self;
+}
+
+#pragma mark - Public
+
+- (void)refreshProductsIfNeeded {
+    if (!self.didLoadOnce) {
+        [self fetchProducts];
+    }
+}
+
+- (void)reloadProducts {
+    [self fetchProducts];
+}
+
+#pragma mark - UI
+
+- (void)setupCardView {
+    [self addSubview:self.cardView];
+    [self.cardView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.equalTo(self.mas_left).offset(0);
+        make.right.equalTo(self.mas_right).offset(0);
+        make.top.equalTo(self.mas_top).offset(0);
+        make.bottom.equalTo(self.mas_bottom).offset(0);
+    }];
+
+    [self.cardView addSubview:self.closeButton];
+    [self.cardView addSubview:self.featureMarqueeView];
+    [self.cardView addSubview:self.collectionView];
+    [self.cardView addSubview:self.purchaseButton];
+    [self.cardView addSubview:self.agreementLabel];
+    [self.cardView addSubview:self.agreementButton];
+    [self.cardView addSubview:self.loadingIndicator];
+    [self.cardView addSubview:self.emptyLabel];
+
+    [self.closeButton mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.equalTo(self.cardView.mas_left).offset(12);
+        make.top.equalTo(self.cardView.mas_top).offset(25);
+        make.width.height.mas_equalTo(28);
+    }];
+
+    [self.featureMarqueeView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.equalTo(self.closeButton.mas_right).offset(5);
+        make.centerY.equalTo(self.closeButton);
+        make.right.equalTo(self.cardView.mas_right).offset(-12);
+        make.height.mas_equalTo(48);
+    }];
+
+    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.right.equalTo(self).inset(16);
+        make.top.equalTo(self.featureMarqueeView.mas_bottom).offset(0);
+        make.height.mas_equalTo(76);
+    }];
+
+    [self.purchaseButton mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.left.equalTo(self.cardView.mas_left).offset(16);
+        make.right.equalTo(self.cardView.mas_right).offset(-16);
+        make.top.equalTo(self.collectionView.mas_bottom).offset(20);
+//        make.bottom.equalTo(self.agreementLabel.mas_top).offset(-16);
+        make.height.mas_greaterThanOrEqualTo(@45);
+    }];
+    
+    [self.agreementLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.centerX.equalTo(self.cardView.mas_centerX);
+        make.top.equalTo(self.purchaseButton.mas_bottom).offset(8);
+    }];
+    
+    [self.agreementButton mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.centerX.equalTo(self.cardView.mas_centerX);
+        make.top.equalTo(self.agreementLabel.mas_bottom).offset(4);
+    }];
+
+   
+
+    
+
+    [self.loadingIndicator mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.center.equalTo(self.collectionView);
+    }];
+
+    [self.emptyLabel mas_makeConstraints:^(MASConstraintMaker *make) {
+        make.center.equalTo(self.collectionView);
+    }];
+
+    [self updatePurchaseButtonState];
+}
+
+- (void)setupFeatureItems {
+    NSArray *titles = @[
+        KBLocalized(@"Wireless Sub-ai\nDialogue"),
+        KBLocalized(@"Personalized\nKeyboard"),
+        KBLocalized(@"Chat\nPersona"),
+        KBLocalized(@"Emotional\nCounseling")
+    ];
+    NSArray *images = @[
+        [UIImage imageNamed:@"home_ai_icon"] ?: [UIImage new],
+        [UIImage imageNamed:@"home_keyboard_icon"] ?: [UIImage new],
+        [UIImage imageNamed:@"home_chat_icon"] ?: [UIImage new],
+        [UIImage imageNamed:@"home_emotion_icon"] ?: [UIImage new]
+    ];
+    [self.featureMarqueeView configureWithTitles:titles images:images];
+}
+
+#pragma mark - Actions
+
+- (void)onTapClose {
+    if ([self.delegate respondsToSelector:@selector(subscriptionViewDidTapClose:)]) {
+        [self.delegate subscriptionViewDidTapClose:self];
+    }
+}
+
+- (void)onTapPurchase {
+    if (self.selectedIndex == NSNotFound || self.selectedIndex >= self.products.count) {
+        [KBHUD showInfo:KBLocalized(@"Please select a product")];
+        return;
+    }
+    KBKeyboardSubscriptionProduct *product = self.products[self.selectedIndex];
+    [self kb_persistPrefillPayloadForProduct:product];
+    if ([self.delegate respondsToSelector:@selector(subscriptionView:didTapPurchaseForProduct:)]) {
+        [self.delegate subscriptionView:self didTapPurchaseForProduct:product];
+    }
+}
+
+- (void)onTapAgreement {
+    [KBHUD showInfo:KBLocalized(@"Agreement coming soon")];
+}
+
+#pragma mark - Data
+
+- (void)fetchProducts {
+    if (self.isLoading) { return; }
+    if (![[KBFullAccessManager shared] hasFullAccess]) {
+        [KBHUD showInfo:KBLocalized(@"Enable Full Access to continue")];
+        return;
+    }
+    self.loading = YES;
+    self.emptyLabel.hidden = YES;
+    [self.loadingIndicator startAnimating];
+    NSDictionary *params = @{@"type": @"subscription"};
+    __weak typeof(self) weakSelf = self;
+    [[KBNetworkManager shared] GET:API_SUBSCRIPTION_PRODUCT_LIST
+                        parameters:params
+                           headers:nil
+                         completion:^(NSDictionary *json, NSURLResponse *response, NSError *error) {
+        dispatch_async(dispatch_get_main_queue(), ^{
+            __strong typeof(weakSelf) self = weakSelf;
+            if (!self) { return; }
+            self.loading = NO;
+            [self.loadingIndicator stopAnimating];
+            if (error) {
+                NSString *tip = error.localizedDescription ?: KBLocalized(@"Network error");
+                [KBHUD showInfo:tip];
+                self.products = @[];
+                self.productsRawJSON = nil;
+                self.selectedIndex = NSNotFound;
+                [self.collectionView reloadData];
+                self.emptyLabel.hidden = NO;
+                [self updatePurchaseButtonState];
+                return;
+            }
+            id dataObj = json[@"data"];
+            if (![dataObj isKindOfClass:[NSArray class]]) {
+                dataObj = json[@"list"];
+            }
+            if (![dataObj isKindOfClass:[NSArray class]]) {
+                self.products = @[];
+                self.productsRawJSON = nil;
+                self.selectedIndex = NSNotFound;
+                [self.collectionView reloadData];
+                self.emptyLabel.hidden = NO;
+                [self updatePurchaseButtonState];
+                return;
+            }
+            id sanitized = KBKeyboardSubscriptionSanitizeJSON(dataObj);
+            self.productsRawJSON = [sanitized isKindOfClass:NSArray.class] ? (NSArray *)sanitized : nil;
+            NSArray *models = [KBKeyboardSubscriptionProduct mj_objectArrayWithKeyValuesArray:(NSArray *)dataObj];
+            self.products = models ?: @[];
+            self.selectedIndex = self.products.count > 0 ? 0 : NSNotFound;
+            self.emptyLabel.hidden = self.products.count > 0;
+            [self.collectionView reloadData];
+            [self selectCurrentProductAnimated:NO];
+            [self updatePurchaseButtonState];
+            self.didLoadOnce = YES;
+        });
+    }];
+}
+
+- (void)kb_persistPrefillPayloadForProduct:(KBKeyboardSubscriptionProduct *)product {
+    if (![product isKindOfClass:KBKeyboardSubscriptionProduct.class]) { return; }
+    if (![self.productsRawJSON isKindOfClass:NSArray.class] || self.productsRawJSON.count == 0) { return; }
+    NSUserDefaults *ud = [[NSUserDefaults alloc] initWithSuiteName:AppGroup];
+    if (!ud) { return; }
+    NSMutableDictionary *payload = [NSMutableDictionary dictionary];
+    payload[@"ts"] = @((long long)floor([NSDate date].timeIntervalSince1970));
+    payload[@"src"] = @"keyboard";
+    if (product.productId.length) {
+        payload[@"productId"] = product.productId;
+    }
+    if (self.selectedIndex != NSNotFound) {
+        payload[@"selectedIndex"] = @(self.selectedIndex);
+    }
+    payload[@"products"] = self.productsRawJSON;
+    [ud setObject:payload forKey:AppGroup_SubscriptionPrefillPayload];
+    [ud synchronize];
+}
+
+- (void)selectCurrentProductAnimated:(BOOL)animated {
+    if (self.selectedIndex == NSNotFound || self.selectedIndex >= self.products.count) { return; }
+    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.selectedIndex inSection:0];
+    [self.collectionView selectItemAtIndexPath:indexPath animated:animated scrollPosition:UICollectionViewScrollPositionCenteredHorizontally];
+    KBKeyboardSubscriptionOptionCell *cell = (KBKeyboardSubscriptionOptionCell *)[self.collectionView cellForItemAtIndexPath:indexPath];
+    if ([cell isKindOfClass:KBKeyboardSubscriptionOptionCell.class]) {
+        [cell applySelected:YES animated:animated];
+    }
+}
+
+- (void)updatePurchaseButtonState {
+    BOOL enabled = (self.products.count > 0);
+    self.purchaseButton.enabled = enabled;
+    self.purchaseButton.alpha = enabled ? 1.0 : 0.5;
+}
+
+#pragma mark - UICollectionView DataSource
+
+- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
+    return self.products.count;
+}
+
+- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
+    KBKeyboardSubscriptionOptionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kKBKeyboardSubscriptionCellId forIndexPath:indexPath];
+    if (indexPath.item < self.products.count) {
+        KBKeyboardSubscriptionProduct *product = self.products[indexPath.item];
+        [cell configureWithProduct:product];
+        BOOL selected = (indexPath.item == self.selectedIndex);
+        [cell applySelected:selected animated:NO];
+    } else {
+        [cell configureWithProduct:nil];
+        [cell applySelected:NO animated:NO];
+    }
+    return cell;
+}
+
+#pragma mark - UICollectionView Delegate
+
+- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
+    if (indexPath.item >= self.products.count) { return; }
+    NSInteger previous = self.selectedIndex;
+    self.selectedIndex = indexPath.item;
+    if (previous != NSNotFound && previous != indexPath.item) {
+        NSIndexPath *prev = [NSIndexPath indexPathForItem:previous inSection:0];
+        KBKeyboardSubscriptionOptionCell *prevCell = (KBKeyboardSubscriptionOptionCell *)[collectionView cellForItemAtIndexPath:prev];
+        [prevCell applySelected:NO animated:YES];
+    }
+    KBKeyboardSubscriptionOptionCell *cell = (KBKeyboardSubscriptionOptionCell *)[collectionView cellForItemAtIndexPath:indexPath];
+    [cell applySelected:YES animated:YES];
+}
+
+#pragma mark - Layout
+
+- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+//    CGFloat width = MIN(MAX(collectionView.bounds.size.width * 0.56, 150), 220);
+    return CGSizeMake(160, collectionView.bounds.size.height);
+}
+
+- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
+    return 12.0;
+}
+
+- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
+    return UIEdgeInsetsMake(0, 0, 0, 0);
+}
+
+#pragma mark - Lazy
+
+- (UIImageView *)cardView {
+    if (!_cardView) {
+        _cardView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"keybord_bg_icon"]];
+//        _cardView.layer.cornerRadius = 20;
+//        _cardView.layer.masksToBounds = YES;
+        _cardView.userInteractionEnabled = YES;
+        _cardView.contentMode = UIViewContentModeScaleAspectFill;
+    }
+    return _cardView;
+}
+
+- (UIButton *)closeButton {
+    if (!_closeButton) {
+        _closeButton = [UIButton buttonWithType:UIButtonTypeSystem];
+        _closeButton.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.7];
+        _closeButton.layer.cornerRadius = 14;
+        _closeButton.layer.masksToBounds = YES;
+        [_closeButton setTitle:@"✕" forState:UIControlStateNormal];
+        [_closeButton setTitleColor:[UIColor colorWithHex:0x666666] forState:UIControlStateNormal];
+        _closeButton.titleLabel.font = [UIFont systemFontOfSize:14 weight:UIFontWeightSemibold];
+        [_closeButton addTarget:self action:@selector(onTapClose) forControlEvents:UIControlEventTouchUpInside];
+    }
+    return _closeButton;
+}
+
+- (KBKeyboardSubscriptionFeatureMarqueeView *)featureMarqueeView {
+    if (!_featureMarqueeView) {
+        _featureMarqueeView = [[KBKeyboardSubscriptionFeatureMarqueeView alloc] init];
+    }
+    return _featureMarqueeView;
+}
+
+- (UICollectionView *)collectionView {
+    if (!_collectionView) {
+        UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
+        layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
+        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
+        _collectionView.backgroundColor = [UIColor clearColor];
+        _collectionView.showsHorizontalScrollIndicator = NO;
+        _collectionView.dataSource = self;
+        _collectionView.delegate = self;
+        [_collectionView registerClass:KBKeyboardSubscriptionOptionCell.class forCellWithReuseIdentifier:kKBKeyboardSubscriptionCellId];
+    }
+    return _collectionView;
+}
+
+- (UIButton *)purchaseButton {
+    if (!_purchaseButton) {
+        _purchaseButton = [UIButton buttonWithType:UIButtonTypeSystem];
+        _purchaseButton.layer.cornerRadius = 26;
+        _purchaseButton.layer.masksToBounds = YES;
+        [_purchaseButton setTitle:KBLocalized(@"Recharge Now") forState:UIControlStateNormal];
+        _purchaseButton.titleLabel.font = [UIFont systemFontOfSize:16 weight:UIFontWeightSemibold];
+        [_purchaseButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
+        [_purchaseButton setBackgroundImage:[self imageWithColor:[UIColor colorWithHex:0x02BEAC]] forState:UIControlStateNormal];
+        [_purchaseButton addTarget:self action:@selector(onTapPurchase) forControlEvents:UIControlEventTouchUpInside];
+    }
+    return _purchaseButton;
+}
+
+- (UILabel *)agreementLabel {
+    if (!_agreementLabel) {
+        _agreementLabel = [[UILabel alloc] init];
+        _agreementLabel.text = KBLocalized(@"By clicking \"pay\", you agree to the");
+        _agreementLabel.font = [UIFont systemFontOfSize:11];
+        _agreementLabel.textColor = [UIColor colorWithHex:0x4A4A4A];
+    }
+    return _agreementLabel;
+}
+
+- (UIButton *)agreementButton {
+    if (!_agreementButton) {
+        _agreementButton = [UIButton buttonWithType:UIButtonTypeSystem];
+        [_agreementButton setTitle:KBLocalized(@"Membership Agreement") forState:UIControlStateNormal];
+        _agreementButton.titleLabel.font = [UIFont systemFontOfSize:11 weight:UIFontWeightSemibold];
+        [_agreementButton setTitleColor:[UIColor colorWithHex:0x02BEAC] forState:UIControlStateNormal];
+        [_agreementButton addTarget:self action:@selector(onTapAgreement) forControlEvents:UIControlEventTouchUpInside];
+    }
+    return _agreementButton;
+}
+
+- (UIActivityIndicatorView *)loadingIndicator {
+    if (!_loadingIndicator) {
+        _loadingIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleMedium];
+        _loadingIndicator.hidesWhenStopped = YES;
+    }
+    return _loadingIndicator;
+}
+
+- (UILabel *)emptyLabel {
+    if (!_emptyLabel) {
+        _emptyLabel = [[UILabel alloc] init];
+        _emptyLabel.text = KBLocalized(@"No products available");
+        _emptyLabel.font = [UIFont systemFontOfSize:13];
+        _emptyLabel.textColor = [[UIColor blackColor] colorWithAlphaComponent:0.4];
+        _emptyLabel.textAlignment = NSTextAlignmentCenter;
+        _emptyLabel.hidden = YES;
+    }
+    return _emptyLabel;
+}
+
+- (UIImage *)imageWithColor:(UIColor *)color {
+    CGSize size = CGSizeMake(1, 1);
+    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
+    [color setFill];
+    UIRectFill(CGRectMake(0, 0, size.width, size.height));
+    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
+    UIGraphicsEndImageContext();
+    return image;
+}
+
+@end