kasy-cli 1.2.1

package/templates/firebase/lib/features/subscription/ui/component/premium_content.dart

@@ -0,0 +1,157 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:kasy_kit/components/components.dart';
+import 'package:kasy_kit/core/animations/movefade_anim.dart';
+import 'package:kasy_kit/core/data/models/subscription.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/subscription/ui/component/premium_page_factory.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/premium_background.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/premium_bottom_menu.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/premium_card.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/premium_close_button.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/premium_feature.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/selectable_row.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+class BasicPaywall extends StatelessWidget {
+  final List<SubscriptionProduct> offers;
+  final SubscriptionProduct? selectedOffer;
+  final OnSelectItem<SubscriptionProduct> onSelectItem;
+  final OnTapSubscription? onTap;
+  final OnTap? onTapRestore;
+  final OnTap? onSkip;
+
+  const BasicPaywall({
+    super.key,
+    required this.offers,
+    required this.onSelectItem,
+    required this.onTap,
+    required this.onTapRestore,
+    required this.selectedOffer,
+    required this.onSkip,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return PremiumBackground(
+      bgImagePath: "assets/images/premium-bg.jpg",
+      child: Scaffold(
+        backgroundColor: Colors.transparent,
+        appBar: AppBar(
+          leading: AppCloseButton(
+            onTap: () {
+              onSkip?.call();
+            },
+          ),
+          backgroundColor: Colors.transparent,
+          elevation: 0,
+          toolbarHeight: 32,
+        ),
+        body: SafeArea(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.end,
+            children: [
+              PremiumCard(
+                bgColor: Colors.transparent,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    MoveFadeAnim(
+                      delayInMs: 200,
+                      child: Text(
+                        Translations.of(context).premium.title_1,
+                        textAlign: TextAlign.center,
+                        style: GoogleFonts.albertSans(
+                          fontSize: 32,
+                          fontWeight: FontWeight.w700,
+                          color: context.colors.onPrimary,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(height: KasySpacing.smd),
+                    Wrap(
+                      children: AnimateList(
+                        interval: 150.ms,
+                        delay: 500.ms,
+                        effects: [FadeEffect(duration: 300.ms)],
+                        children: [
+                          PremiumFeature(text: Translations.of(context).premium.feature_1),
+                          PremiumFeature(text: Translations.of(context).premium.feature_2),
+                          PremiumFeature(text: Translations.of(context).premium.feature_3),
+                        ],
+                      ),
+                    ),
+                    const SizedBox(height: KasySpacing.xl),
+                    SelectableRowGroup<SubscriptionProduct>(
+                      // ignore: avoid_redundant_argument_values
+                      brightness: Brightness.light,
+                      items: offers
+                          .map(
+                            (el) => SelectableOption(
+                              /// On iOS you have to show the product title from the store (or Apple will reject the app)
+                              /// On android you can show custom titles using your own translations
+                              label: switch(defaultTargetPlatform) {
+                                TargetPlatform.iOS => el.title ?? '',
+                                TargetPlatform.android when el.durationType == DurationType.lifetime => 
+                                  Translations.of(context).premium.duration_lifetime.toUpperCase(),
+                                TargetPlatform.android when el.durationType == DurationType.year => 
+                                  Translations.of(context).premium.duration_recuring_label_annual.toUpperCase(),
+                                TargetPlatform.android when el.durationType == DurationType.month => 
+                                  Translations.of(context).premium.duration_recuring_label_monthly.toUpperCase(),
+                                TargetPlatform.android when el.durationType == DurationType.week => 
+                                  Translations.of(context).premium.duration_recuring_label_weekly.toUpperCase(),
+                                _ => el.title ?? '',
+                              },
+                              price: el.formattedPrice(context),
+                              sublabel: switch (el.durationType) {
+                                DurationType.week => el.formattedPrice(context),
+                                DurationType.year => el.formattedPrice(context),
+                                DurationType.lifetime => el.formattedPrice(context),
+                                DurationType.month => el.formattedPrice(context),
+                                _ => '--',
+                              },
+                              pricePerOtherDuration: switch (el.durationType) {
+                                DurationType.year => el.pricePerMonth(context),
+                                _ => null,
+                              },
+                              trial: switch(el.trialDays) {
+                                null => null,
+                                _ => Translations.of(context).paywallWithSwitch.withTrial.trial_switch_title(days: el.trialDays!),
+                              },
+                              data: el,
+                            ),
+                          )
+                          .toList(),
+                      onSelectItem: onSelectItem,
+                    ),
+                    const SizedBox(height: KasySpacing.xxl),
+                    MoveFadeAnim(
+                      delayInMs: 350,
+                      child: KasyButton(
+                        key: const ValueKey('premium_subscribe_button'),
+                        label: Translations.of(context).premium.action_button,
+                        isLoading: onTap == null,
+                        expand: true,
+                        onPressed: onTap,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: KasySpacing.md),
+                child: BottomPremiumMenu(
+                  textColor: context.colors.onPrimary,
+                  onTapRestore: onTapRestore,
+                )
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

package/templates/firebase/lib/features/subscription/ui/component/premium_page_factory.dart

@@ -0,0 +1,161 @@
+import 'package:flutter/material.dart';
+import 'package:kasy_kit/core/data/models/subscription.dart';
+import 'package:kasy_kit/features/subscription/ui/component/paywall_minimal.dart';
+import 'package:kasy_kit/features/subscription/ui/component/paywall_row.dart';
+import 'package:kasy_kit/features/subscription/ui/component/paywall_with_switch.dart';
+import 'package:kasy_kit/features/subscription/ui/component/premium_content.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/selectable_row.dart';
+
+typedef OnTapSubscription = void Function();
+
+typedef OnTap = void Function();
+
+/// this is the factory to create a paywall
+/// You can test different paywalls by changing the factory
+/// ex: PaywallFactory.withSwitch
+/// - this is useful to A/B test different paywalls and see which one converts the best
+abstract class PaywallFactory {
+  final String name;
+
+  const PaywallFactory(this.name);
+
+  @factory
+  Widget build({
+    required List<SubscriptionProduct> offers,
+    required SubscriptionProduct? selectedOffer,
+    required OnSelectItem<SubscriptionProduct> onSelectItem,
+    required OnTapSubscription? onTap,
+    required OnTap? onTapRestore,
+    required OnTap? onSkip,
+  });
+
+  Widget buildSending({
+    required List<SubscriptionProduct> offers,
+    required SubscriptionProduct? selectedOffer,
+    required OnSelectItem<SubscriptionProduct> onSelectItem,
+  }) {
+    return build(
+      offers: offers,
+      selectedOffer: selectedOffer,
+      onSelectItem: onSelectItem,
+      onTap: null,
+      onTapRestore: null,
+      onSkip: null,
+    );
+  }
+
+  /// The paywall with switch is a paywall with a switch to toggle the trial offer
+  /// (You have to have 1 offer with a trial period and 1 offer without a trial period)
+  static const withSwitch = _PaywallWithSwitchFactory();
+
+  /// The basic paywall is a simple paywall with a list of offers
+  static const basic = _BasicPaywallFactory();
+
+  /// The basic paywall row is a simple paywall with a list of offers within a row
+  static const basicRow = _BasicPaywallRowFactory();
+
+  /// Minimal paywall: benefits + single CTA. Best for one-plan apps.
+  static const minimal = _PaywallMinimalFactory();
+
+  /// List of all available paywall factories
+  static const List<PaywallFactory> values = [withSwitch, basic, basicRow, minimal];
+}
+
+/// Factory to create a paywall with a switch
+/// The paywall with switch is a paywall with a switch to toggle the trial offer
+class _PaywallWithSwitchFactory extends PaywallFactory {
+  const _PaywallWithSwitchFactory() : super('withSwitch');
+
+  @override
+  Widget build({
+    required List<SubscriptionProduct> offers,
+    required SubscriptionProduct? selectedOffer,
+    required OnSelectItem<SubscriptionProduct> onSelectItem,
+    required OnTapSubscription? onTap,
+    required OnTap? onTapRestore,
+    required OnTap? onSkip,
+  }) {
+    return PaywallWithSwitch(
+      offers: offers,
+      selectedOffer: selectedOffer,
+      onSelectItem: onSelectItem,
+      onTap: onTap,
+      onTapRestore: onTapRestore,
+      onSkip: onSkip,
+    );
+  }
+}
+
+/// Factory to create a basic paywall
+class _BasicPaywallFactory extends PaywallFactory {
+  const _BasicPaywallFactory() : super('basic');
+
+  @override
+  Widget build({
+    required List<SubscriptionProduct> offers,
+    required SubscriptionProduct? selectedOffer,
+    required OnSelectItem<SubscriptionProduct> onSelectItem,
+    required OnTapSubscription? onTap,
+    required OnTap? onTapRestore,
+    required OnTap? onSkip,
+  }) {
+    return BasicPaywall(
+      offers: offers,
+      selectedOffer: selectedOffer,
+      onSelectItem: onSelectItem,
+      onTap: onTap,
+      onTapRestore: onTapRestore,
+      onSkip: onSkip,
+    );
+  }
+}
+
+
+class _PaywallMinimalFactory extends PaywallFactory {
+  const _PaywallMinimalFactory() : super('minimal');
+
+  @override
+  Widget build({
+    required List<SubscriptionProduct> offers,
+    required SubscriptionProduct? selectedOffer,
+    required OnSelectItem<SubscriptionProduct> onSelectItem,
+    required OnTapSubscription? onTap,
+    required OnTap? onTapRestore,
+    required OnTap? onSkip,
+  }) {
+    return PaywallMinimal(
+      offers: offers,
+      selectedOffer: selectedOffer,
+      onSelectItem: onSelectItem,
+      onTap: onTap,
+      onTapRestore: onTapRestore,
+      onSkip: onSkip,
+    );
+  }
+}
+
+class _BasicPaywallRowFactory extends PaywallFactory {
+  const _BasicPaywallRowFactory() : super('basicRow');
+
+  @override
+  Widget build({
+    required List<SubscriptionProduct> offers,
+    required SubscriptionProduct? selectedOffer,
+    required OnSelectItem<SubscriptionProduct> onSelectItem,
+    required OnTapSubscription? onTap,
+    required OnTap? onTapRestore,
+    required OnTap? onSkip,
+    // required PremiumPageArgs? args,
+  }) {
+    return PaywallRow(
+      offers: offers,
+      selectedOffer: selectedOffer,
+      onSelectItem: onSelectItem,
+      onTap: onTap,
+      onTapRestore: onTapRestore,
+      onSkip: onSkip,
+      // args: args,
+      args: null,
+    );
+  }
+}

package/templates/firebase/lib/features/subscription/ui/premium_page.dart

@@ -0,0 +1,139 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:kasy_kit/core/data/api/analytics_api.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/features/subscription/providers/models/premium_state.dart';
+import 'package:kasy_kit/features/subscription/providers/premium_page_provider.dart';
+import 'package:kasy_kit/features/subscription/ui/component/active_premium_content.dart';
+import 'package:kasy_kit/features/subscription/ui/component/premium_page_factory.dart';
+import 'package:kasy_kit/features/subscription/ui/widgets/paywall_empty_state.dart';
+import 'package:kasy_kit/i18n/translations.g.dart';
+
+class PremiumPageArgs {
+  // The redirect route to navigate to after the purchase
+  final String? redirect;
+  // The delay to show the close button
+  final int? delayCloseMs;
+  // Whether to show the trial bottom sheet when the user skip the purchase
+  final bool? showTrialBottomSheet;
+
+  const PremiumPageArgs({
+    this.redirect,
+    this.delayCloseMs,
+    this.showTrialBottomSheet = false,
+  });
+}
+
+/// The premium page is the page where the user can subscribe to the premium offer
+/// It's also named as Paywall
+///
+/// - This page is responsible for displaying the offers or the active subscription
+/// - It also handles the purchase and restore of the subscription
+/// - It also handles the redirection after the purchase see [PremiumPageArgs]
+class PremiumPage extends ConsumerWidget {
+  final PremiumPageArgs? args;
+  final PaywallFactory? paywall;
+
+  const PremiumPage({super.key, this.args, this.paywall});
+
+  bool get hasRedirect => args?.redirect != null;
+
+  void _handleRedirection(BuildContext context) {
+    if (hasRedirect) {
+      context.go(args!.redirect!);
+    }
+  }
+
+  PremiumStateNotifier getNotifier(WidgetRef ref) =>
+      ref.read(premiumStateProvider.notifier);
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final premiumState = ref.watch(premiumStateProvider);
+
+    /// ===============================================
+    /// This is an example of how to get the paywall from the remote config
+    /// You can use this to test different paywalls
+    /// ===============================================
+    // final configuredPaywall = ref
+    //     .read(remoteConfigApiProvider) //
+    //     .subscription
+    //     .paywall;
+
+    // final paywallFactory = switch (configuredPaywall) {
+    //   'withSwitch' => PaywallFactory.withSwitch,
+    //   _ => PaywallFactory.basic,
+    // };
+
+    final paywallFactory = paywall ?? PaywallFactory.minimal;
+
+    return switch (premiumState) {
+      AsyncError() => Center(child: Text(t.premium.error_loading)),
+      AsyncLoading() => Center(
+        child: CircularProgressIndicator.adaptive(
+          valueColor: AlwaysStoppedAnimation<Color>(context.colors.onPrimary),
+        ),
+      ),
+      AsyncData(:final value) => switch (value) {
+        final PremiumStateActive _ => ActivePremiumContent(
+          onTap: (String reason) async {
+            await getNotifier(ref).saveUnsubscribeReason(reason);
+            await getNotifier(ref).unsubscribe();
+          },
+          onExit: () {
+            if (hasRedirect) {
+              _handleRedirection(context);
+            } else if (context.canPop()) {
+              context.pop();
+            } else {
+              context.go('/');
+            }
+          },
+        ),
+        final PremiumStateSending data => paywallFactory.buildSending(
+          offers: data.offers,
+          selectedOffer: data.selectedOffer,
+          onSelectItem: (offer) => getNotifier(ref).selectOffer(offer),
+        ),
+        PremiumStateData(offers: final offers) when offers.isEmpty =>
+          PaywallEmptyState(
+            onSkip: () {
+              ref.read(analyticsApiProvider).logEvent('premium_empty_exit', {});
+              if (hasRedirect) {
+                _handleRedirection(context);
+              } else if (context.canPop()) {
+                context.pop();
+              } else {
+                context.go('/');
+              }
+            },
+            onTapRestore: () =>
+                getNotifier(ref).restore(redirectRoute: args?.redirect),
+          ),
+        final PremiumStateData data => paywallFactory.build(
+          offers: data.offers,
+          selectedOffer: data.selectedOffer,
+          onSelectItem: (offer) => getNotifier(ref).selectOffer(offer),
+          onSkip: () {
+            final analyticsApi = ref.read(analyticsApiProvider);
+            analyticsApi.logEvent('premium_exit', {});
+            if (hasRedirect) {
+              _handleRedirection(context);
+            } else if (context.canPop()) {
+              context.pop();
+            } else {
+              context.go('/');
+            }
+          },
+          onTapRestore: () =>
+              getNotifier(ref).restore(redirectRoute: args?.redirect),
+          onTap: () => getNotifier(ref).purchase(
+            paywall: paywallFactory.name,
+            redirectRoute: args?.redirect,
+          ),
+        ),
+      },
+    };
+  }
+}