kasy-cli 1.2.1

package/templates/firebase/lib/features/subscription/ui/widgets/premium_banner.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+typedef PremiumWideBannerOnTap = void Function();
+
+class PremiumWideBanner extends StatelessWidget {
+  final Color bgColor;
+  final String imagePath;
+  final String smallText;
+  final String title;
+  final PremiumWideBannerOnTap onTap;
+
+  const PremiumWideBanner({
+    super.key,
+    required this.bgColor,
+    required this.imagePath,
+    required this.smallText,
+    required this.title,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {
+      return Material(
+        color: Colors.transparent,
+        child: Ink(
+          // height: 116,
+          width: constraints.maxWidth,
+          decoration: BoxDecoration(
+            color: bgColor,
+            // border: Border.all(color: borderColor),
+          ),
+          child: InkWell(
+            onTap: () => onTap(),
+            child: Row(
+              children: [
+                Image.asset(
+                  imagePath,
+                  width: constraints.maxWidth * 0.32,
+                  // height: 116,
+                  fit: BoxFit.cover,
+                ),
+                const SizedBox(width: KasySpacing.lg),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        smallText.toUpperCase(),
+                        style: GoogleFonts.albertSans(
+                          fontSize: 12,
+                          fontWeight: FontWeight.w700,
+                          color: context.colors.premiumBannerText,
+                        ),
+                      ),
+                      const SizedBox(height: KasySpacing.sm),
+                      Text(
+                        title,
+                        style: GoogleFonts.albertSans(
+                          fontSize: 20,
+                          fontWeight: FontWeight.w400,
+                          color: context.colors.onPrimary,
+                        ),
+                        overflow: TextOverflow.clip,
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: KasySpacing.lg),
+              ],
+            ),
+          ),
+        ),
+      );
+    });
+  }
+}

package/templates/firebase/lib/features/subscription/ui/widgets/premium_bottom_menu.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/config/features.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/environnements.dart';
+import 'package:kasy_kit/features/subscription/ui/component/premium_page_factory.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+/// The bottom menu of the premium page
+/// - It contains the restore button, terms and privacy buttons
+/// You must show this on your paywall pages to be compliant with the app store guidelines
+/// -------------------------------
+/// Privacy    Restore     Terms
+/// -------------------------------
+class BottomPremiumMenu extends StatelessWidget {
+  final OnTap? onTapRestore;
+  final Color? textColor;
+
+  const BottomPremiumMenu({super.key, this.onTapRestore, this.textColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        _buildPrivacyButton(context),
+        if (!kIsWeb || !revenuecatWeb) _buildRestoreButton(context),
+        _buildTermsButton(context),
+      ],
+    );
+  }
+
+  Widget _buildTermsButton(BuildContext context) {
+    final translations = Translations.of(context).premium;
+    final color = textColor ?? context.colors.muted;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.sm),
+      child: KasyButton(
+        variant: KasyButtonVariant.ghost,
+        label: translations.terms,
+        size: KasyButtonSize.small,
+        foregroundColor: color,
+        fontWeight: FontWeight.w500,
+        onPressed: () {
+          switch (defaultTargetPlatform) {
+            case TargetPlatform.iOS:
+              launchUrl(Uri.parse(
+                "https://www.apple.com/legal/internet-services/itunes/dev/stdeula/",
+              ));
+            case TargetPlatform.android:
+            default:
+              launchUrl(Uri.parse(kTermsUrl));
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildPrivacyButton(BuildContext context) {
+    final translations = Translations.of(context).premium;
+    final color = textColor ?? context.colors.muted;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.sm),
+      child: KasyButton(
+        variant: KasyButtonVariant.ghost,
+        label: translations.privacy,
+        size: KasyButtonSize.small,
+        foregroundColor: color,
+        fontWeight: FontWeight.w500,
+        onPressed: () => launchUrl(Uri.parse(kPrivacyUrl)),
+      ),
+    );
+  }
+
+  Widget _buildRestoreButton(BuildContext context) {
+    final translations = Translations.of(context).premium;
+    final color = textColor ?? context.colors.muted;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: KasySpacing.sm),
+      child: onTapRestore != null
+          ? KasyButton(
+              variant: KasyButtonVariant.ghost,
+              label: translations.restore_action,
+              size: KasyButtonSize.small,
+              foregroundColor: color,
+              fontWeight: FontWeight.w500,
+              onPressed: onTapRestore,
+            )
+          : KasyButton.iconOnly(
+              icon: KasyIcons.refresh,
+              variant: KasyButtonVariant.ghost,
+              foregroundColor: color,
+              isLoading: true,
+              onPressed: null,
+              semanticLabel: translations.restore_action,
+              size: KasyButtonSize.small,
+            ),
+    );
+  }
+}

package/templates/firebase/lib/features/subscription/ui/widgets/premium_card.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+class PremiumCard extends StatelessWidget {
+  final Color bgColor;
+  final Widget child;
+
+  const PremiumCard({super.key, required this.bgColor, required this.child});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: bgColor,
+        borderRadius: KasyRadius.lgBorderRadius,
+      ),
+      padding: const EdgeInsets.fromLTRB(
+        KasySpacing.lg,
+        KasySpacing.lg,
+        KasySpacing.lg,
+        KasySpacing.smd,
+      ),
+      child: child,
+    );
+  }
+}

package/templates/firebase/lib/features/subscription/ui/widgets/premium_close_button.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+class AppCloseButtonComponent extends ConsumerWidget {
+  final ValueNotifier<bool> showCloseBtn;
+
+  final VoidCallback? onTap;
+
+  const AppCloseButtonComponent({
+    super.key,
+    required this.showCloseBtn,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return ValueListenableBuilder(
+      valueListenable: showCloseBtn,
+      builder: (context, value, child) {
+        if (value) {
+          return AppCloseButton(onTap: onTap);
+        }
+        return const SizedBox.shrink();
+      },
+    );
+  }
+}
+
+class AppCloseButton extends StatelessWidget {
+  final VoidCallback? onTap;
+
+  const AppCloseButton({super.key, this.onTap});
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTapUp: (_) {
+          onTap?.call();
+        },
+        child: Ink(
+          width: 32,
+          height: 32,
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: context.colors.onBackground.withValues(alpha: 0.6),
+          ),
+          child: Center(
+            child: Icon(
+              KasyIcons.close,
+              color: context.colors.background,
+              size: 21,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/subscription/ui/widgets/premium_feature.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+
+class PremiumFeature extends StatelessWidget {
+  final String text;
+
+  const PremiumFeature({
+    super.key,
+    required this.text,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: KasySpacing.sm),
+      child: Row(
+        children: [
+          Icon(
+            KasyIcons.check,
+            color: context.colors.onPrimary,
+            size: 24,
+          ),
+          const SizedBox(width: KasySpacing.md),
+          Expanded(
+            child: Text(
+              text,
+              style: GoogleFonts.albertSans(
+                fontSize: 16,
+                fontWeight: FontWeight.w500,
+                color: context.colors.onPrimary,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/subscription/ui/widgets/selectable_col.dart

@@ -0,0 +1,377 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:kasy_kit/core/haptics/kasy_haptics.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/selectable_row.dart';
+
+
+class SelectableColGroup<T> extends StatefulWidget {
+
+  final List<SelectableOption<T>> items;
+
+  final OnSelectItem<T> onSelectItem;
+
+  final int initialSelectedIndex;
+
+  // A brightness to adapt the colors of the selectable cols
+  // we usually not stick to the theme brightness because
+  // paywalls try to sometimes contrast with the app theme so we need to set it manually
+  final Brightness brightness;
+
+  const SelectableColGroup({
+    super.key,
+    required this.items,
+    required this.onSelectItem,
+    this.initialSelectedIndex = 0,
+    required this.brightness,
+  });
+
+  @override
+  State<SelectableColGroup> createState() => _SelectableColGroupState<T>();
+}
+
+class _SelectableColGroupState<T> extends State<SelectableColGroup<T>> {
+  int selectedIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    selectedIndex = widget.initialSelectedIndex;
+  }
+
+  OnSelectItem<T> get onSelectItem => widget.onSelectItem;
+
+  @override
+  Widget build(BuildContext context) {
+    return IntrinsicHeight(
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        spacing: KasySpacing.smd,
+        children: [
+          for (var i = 0; i < widget.items.length; i++)
+            Expanded(
+              child: GestureDetector(
+                onTap: () {
+                  setState(() {
+                    if (selectedIndex == i) {
+                      return;
+                    }
+                    KasyHaptics.heavy(context);
+                    selectedIndex = i;
+                    onSelectItem(widget.items[i].data);
+                  });
+                },
+                child: Animate(
+                  effects: [
+                    FadeEffect(
+                      delay: Duration(milliseconds: 100 + 100 * i),
+                      duration: const Duration(milliseconds: 500),
+                    ),
+                  ],
+                  child: SelectableCol.fromOption(
+                    key: ValueKey('item_$i'),
+                    widget.items[i],
+                    selected: selectedIndex == i,
+                    brightness: widget.brightness,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+class SelectableCol extends StatefulWidget {
+  final bool selected;
+  final String label;
+  final String price;
+  final String sublabel;
+  final String? trial;
+  final String? promotion;
+  final bool disabled;
+  final IconData? icon;
+  final Brightness? brightness;
+
+  const SelectableCol({
+    super.key,
+    this.icon,
+    required this.selected,
+    required this.label,
+    required this.price,
+    required this.sublabel,
+    this.promotion,
+    this.disabled = false,
+    this.trial,
+    this.brightness,
+  });
+
+  factory SelectableCol.fromOption(
+    SelectableOption option, {
+    Key? key,
+    required bool selected,
+    required Brightness brightness,
+  }) {
+    return SelectableCol(
+      key: key,
+      selected: selected,
+      label: option.label,
+      price: option.price,
+      sublabel: option.sublabel,
+      trial: option.trial,
+      promotion: option.promotion,
+      icon: option.icon,
+      brightness: brightness,
+    );
+  }
+
+  @override
+  State<SelectableCol> createState() => _SelectableColState();
+}
+
+class _SelectableColState extends State<SelectableCol>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+  late final Animation<double> _opacityAnimation;
+
+  @override
+  void didUpdateWidget(covariant SelectableCol oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.selected != widget.selected && widget.selected) {
+      _controller.forward();
+    } else if (oldWidget.selected != widget.selected && !widget.selected) {
+      _controller.reverse();
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 500),
+      vsync: this,
+    );
+    _opacityAnimation = Tween(
+      begin: 0.0,
+      end: 1.0,
+    ).animate(
+      CurvedAnimation(parent: _controller, curve: Curves.ease),
+    );
+    if (widget.selected) {
+      _controller.forward();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) => SizedBox(
+        height: 150,
+        child: Opacity(
+          opacity: widget.disabled ? .6 : 1,
+          child: ClipRRect(
+            borderRadius: KasyRadius.lgBorderRadius,
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
+              child: Container(
+                decoration: BoxDecoration(
+                  color: context.colors.primary.withValues(alpha: .1),
+                  borderRadius: KasyRadius.lgBorderRadius,
+                  border: Border.all(
+                    width: 3,
+                    strokeAlign: BorderSide.strokeAlignCenter,
+                    color: widget.selected
+                        ? context.colors.primary
+                            .withValues(alpha: _opacityAnimation.value)
+                        : context.colors.primary
+                            .withValues(alpha: .3 * _opacityAnimation.value + .15),
+                  ),
+                ),
+                // padding: const EdgeInsets.symmetric(horizontal: 21, vertical: 4),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    const Spacer(),
+                    if (widget.promotion != null)
+                      Padding(
+                        padding: const EdgeInsets.only(bottom: KasySpacing.sm, left: KasySpacing.xs, right: KasySpacing.xs),
+                        child: Container(
+                          decoration: BoxDecoration(
+                            color: context.colors.onBackground,
+                            borderRadius: KasyRadius.lgBorderRadius,
+                          ),
+                          padding: const EdgeInsets.symmetric(horizontal: KasySpacing.xs),
+                          child: Text(
+                            widget.promotion!.toUpperCase(),
+                            textAlign: TextAlign.center,
+                            style: context.textTheme.labelSmall?.copyWith(
+                              fontWeight: FontWeight.w600,
+                              letterSpacing: 0.5,
+                              color: context.colors.background,
+                            ),
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ),
+                    if(widget.icon != null)
+                      Padding(
+                        padding: const EdgeInsets.only(bottom: 2), // pixel-level icon alignment — intentional exception
+                        child: Icon(
+                          widget.icon, 
+                          size: 24, 
+                          color: switch(widget.brightness) {
+                            Brightness.light => context.colors.onBackground,
+                            _ => context.colors.background,
+                          },
+                        ),
+                      ),
+                    Flexible(
+                      flex: 0,
+                      child: Text(
+                        widget.label.toUpperCase(),
+                        style: context.textTheme.titleLarge?.copyWith(
+                          fontSize: 21,
+                          fontWeight: FontWeight.w700,
+                          color: switch(widget.brightness) {
+                            Brightness.light => context.colors.onBackground,
+                            _ => context.colors.background,
+                          },
+                        ),
+                        textAlign: TextAlign.center,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
+                    ),
+                    const SizedBox(height: KasySpacing.xs),
+                    Text(
+                      widget.price,
+                      style: context.textTheme.bodyLarge?.copyWith(
+                        fontWeight: FontWeight.w500,
+                        color: switch(widget.brightness) {
+                          Brightness.light => context.colors.onBackground,
+                          _ => context.colors.background,
+                        },
+                      ),
+                      maxLines: 1,
+                      textAlign: TextAlign.center,
+                    ),
+                    if(widget.sublabel.isNotEmpty)
+                      Text(
+                        widget.sublabel,
+                        style: context.textTheme.bodyLarge?.copyWith(
+                          fontWeight: FontWeight.w400,
+                          color: switch(widget.brightness) {
+                            Brightness.light => context.colors.onBackground.withValues(alpha: .7),
+                            _ => context.colors.background,
+                          },
+                        ),
+                        maxLines: 1,
+                        textAlign: TextAlign.center,
+                      ),
+                    const Spacer(),
+                    if (widget.trial != null)
+                      Flexible(
+                        flex: 0,
+                        child: Container(
+                          decoration: BoxDecoration(
+                            color: context.colors.primary,
+                            borderRadius: const BorderRadius.only(
+                              bottomLeft: Radius.circular(KasyRadius.lg),
+                              bottomRight: Radius.circular(KasyRadius.lg),
+                            ),
+                          ),
+                          padding: const EdgeInsets.symmetric(vertical: KasySpacing.xs),
+                          child: Text(
+                            widget.trial!,
+                            textAlign: TextAlign.center,
+                            style: context.textTheme.bodySmall?.copyWith(
+                              fontWeight: FontWeight.w500,
+                              color: context.colors.background,
+                            ),
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class RoundRadioBox extends StatelessWidget {
+  final Color bgColor;
+  final Color borderColor;
+  final IconData? icon;
+  final double iconOpacity;
+  final double iconSize;
+
+  const RoundRadioBox({
+    super.key,
+    required this.bgColor,
+    required this.borderColor,
+    this.iconOpacity = 1,
+    this.iconSize = 1,
+    this.icon,
+  });
+
+  factory RoundRadioBox.selected(
+    BuildContext context, {
+    double iconOpacity = 1,
+    double iconSize = 1,
+  }) {
+    return RoundRadioBox(
+      bgColor: context.colors.primary,
+      borderColor: context.colors.onBackground.withValues(alpha: .3),
+      icon: KasyIcons.check,
+      iconOpacity: iconOpacity,
+      iconSize: iconSize,
+    );
+  }
+
+  // ignore: avoid_unused_constructor_parameters
+  factory RoundRadioBox.unselected(BuildContext context) {
+    return RoundRadioBox(
+      bgColor: context.colors.outline,
+      borderColor: context.colors.onBackground.withValues(alpha: .3),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 28,
+      height: 28,
+      decoration: BoxDecoration(
+        color: bgColor,
+        shape: BoxShape.circle,
+        border: Border.all(
+          color: borderColor,
+          width: 2,
+        ),
+      ),
+      child: Center(
+        child: icon != null
+            ? Opacity(
+                opacity: iconOpacity,
+                child: Transform.scale(
+                  scale: iconSize,
+                  child: Icon(icon, color: context.colors.onPrimary, size: 21),
+                ),
+              )
+            : const SizedBox.shrink(),
+      ),
+    );
+  }
+}