kasy-cli 1.31.9 → 1.31.11

package/templates/firebase/lib/features/subscriptions/ui/component/paywall_minimal.dart

@@ -4,6 +4,7 @@ import 'package:google_fonts/google_fonts.dart';
 import 'package:kasy_kit/components/components.dart';
 import 'package:kasy_kit/core/data/models/subscription.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/features/subscriptions/ui/component/premium_page_factory.dart';
 import 'package:kasy_kit/features/subscriptions/ui/widgets/paywall_empty_state.dart';
 import 'package:kasy_kit/features/subscriptions/ui/widgets/premium_background_gradient.dart';
@@ -15,6 +16,10 @@ import 'package:kasy_kit/i18n/translations.g.dart';
 
 /// Minimal paywall: benefits list + single CTA.
 /// Best for apps with one plan or when you want a clean, focused layout.
+///
+/// Responsive: on phones (small) it fills the screen with the CTA pinned to the
+/// bottom. On tablet/desktop (medium+) the content is centered in a max-width
+/// column so it never stretches edge-to-edge or leaves a big empty gap.
 class PaywallMinimal extends StatelessWidget {
   final List<SubscriptionProduct> offers;
   final SubscriptionProduct? selectedOffer;
@@ -23,6 +28,10 @@ class PaywallMinimal extends StatelessWidget {
   final OnTap? onTapRestore;
   final OnTap? onSkip;
 
+  /// Max content width on tablet/desktop. Keeps the paywall readable and
+  /// centered instead of stretched across a wide viewport.
+  static const double _maxContentWidth = 460;
+
   const PaywallMinimal({
     super.key,
     required this.offers,
@@ -42,105 +51,175 @@ class PaywallMinimal extends StatelessWidget {
       return PaywallEmptyState(onTapRestore: onTapRestore, onSkip: onSkip);
     }
 
+    return Scaffold(
+      backgroundColor: context.colors.primary,
+      body: PremiumBackgroundGradient(
+        child: SafeArea(
+          child: LayoutBuilder(
+            builder: (context, constraints) {
+              final bool compact =
+                  DeviceType.fromWidth(constraints.maxWidth) == DeviceType.small;
+              return compact ? _compactLayout(context) : _wideLayout(context);
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  // --- Phone: full-height column, CTA pinned to the bottom. -----------------
+  Widget _compactLayout(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: KasySpacing.pageHorizontalGutter,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          Align(alignment: Alignment.topRight, child: _closeButton()),
+          const SizedBox(height: KasySpacing.lg),
+          _title(context),
+          const SizedBox(height: KasySpacing.lg),
+          ..._features(context),
+          const Spacer(),
+          _price(context),
+          const SizedBox(height: KasySpacing.smd),
+          _cta(context),
+          const SizedBox(height: KasySpacing.md),
+          _bottomMenu(context),
+          const SizedBox(height: KasySpacing.lg),
+        ],
+      ),
+    );
+  }
+
+  // --- Tablet/Desktop: centered max-width column, close pinned to corner. ---
+  Widget _wideLayout(BuildContext context) {
+    return Stack(
+      children: [
+        Center(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: _maxContentWidth),
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.symmetric(
+                horizontal: KasySpacing.lg,
+                vertical: KasySpacing.xxl,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  _title(context),
+                  const SizedBox(height: KasySpacing.xl),
+                  ..._features(context),
+                  const SizedBox(height: KasySpacing.xl),
+                  _price(context),
+                  const SizedBox(height: KasySpacing.smd),
+                  _cta(context),
+                  const SizedBox(height: KasySpacing.md),
+                  _bottomMenu(context),
+                ],
+              ),
+            ),
+          ),
+        ),
+        Positioned(
+          top: KasySpacing.sm,
+          right: KasySpacing.md,
+          child: _closeButton(),
+        ),
+      ],
+    );
+  }
+
+  // --- Shared content blocks (same widgets across breakpoints). -------------
+
+  Widget _closeButton() => AppCloseButton(onTap: () => onSkip?.call());
+
+  Widget _title(BuildContext context) {
+    return Animate(
+      effects: const [
+        FadeEffect(
+          delay: Duration(milliseconds: 100),
+          duration: Duration(milliseconds: 300),
+        ),
+      ],
+      child: Text(
+        Translations.of(context).premium.title_1,
+        textAlign: TextAlign.center,
+        style: GoogleFonts.albertSans(
+          fontSize: 28,
+          fontWeight: FontWeight.w700,
+          color: context.colors.onPrimary,
+          letterSpacing: -0.8,
+        ),
+      ),
+    );
+  }
+
+  List<Widget> _features(BuildContext context) {
     final translations = Translations.of(context).premium;
     final features = [
       translations.feature_1,
       translations.feature_2,
       translations.feature_3,
     ];
+    return [
+      ...AnimateList(
+        interval: 120.ms,
+        delay: 300.ms,
+        effects: [FadeEffect(duration: 300.ms)],
+        children: features.map((text) => PremiumFeature(text: text)).toList(),
+      ),
+    ];
+  }
 
-    return Scaffold(
-      backgroundColor: context.colors.primary,
-      body: PremiumBackgroundGradient(
-        child: SafeArea(
-          child: Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: KasySpacing.pageHorizontalGutter,
-            ),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                Align(
-                  alignment: Alignment.topRight,
-                  child: AppCloseButton(onTap: () => onSkip?.call()),
-                ),
-                const SizedBox(height: KasySpacing.lg),
-                Animate(
-                  effects: const [
-                    FadeEffect(
-                      delay: Duration(milliseconds: 100),
-                      duration: Duration(milliseconds: 300),
-                    ),
-                  ],
-                  child: Text(
-                    translations.title_1,
-                    textAlign: TextAlign.center,
-                    style: GoogleFonts.albertSans(
-                      fontSize: 28,
-                      fontWeight: FontWeight.w700,
-                      color: context.colors.onPrimary,
-                      letterSpacing: -0.8,
-                    ),
-                  ),
-                ),
-                const SizedBox(height: KasySpacing.lg),
-                ...AnimateList(
-                  interval: 120.ms,
-                  delay: 300.ms,
-                  effects: [FadeEffect(duration: 300.ms)],
-                  children: features
-                      .map((text) => PremiumFeature(text: text))
-                      .toList(),
-                ),
-                const Spacer(),
-                Animate(
-                  effects: const [
-                    FadeEffect(
-                      delay: Duration(milliseconds: 400),
-                      duration: Duration(milliseconds: 300),
-                    ),
-                    ScaleEffect(
-                      delay: Duration(milliseconds: 400),
-                      duration: Duration(milliseconds: 500),
-                      curve: Curves.easeOut,
-                    ),
-                  ],
-                  child: Text(
-                    _effectiveOffer.formattedPrice(context),
-                    textAlign: TextAlign.center,
-                    style: context.textTheme.titleLarge?.copyWith(
-                      fontWeight: FontWeight.w600,
-                      color: context.colors.onPrimary,
-                    ),
-                  ),
-                ),
-                const SizedBox(height: KasySpacing.smd),
-                Animate(
-                  effects: const [
-                    FadeEffect(
-                      delay: Duration(milliseconds: 500),
-                      duration: Duration(milliseconds: 300),
-                    ),
-                  ],
-                  child: KasyButton(
-                    label: translations.action_button,
-                    variant: KasyButtonVariant.inverse,
-                    isLoading: onTap == null,
-                    expand: true,
-                    onPressed: onTap,
-                  ),
-                ),
-                const SizedBox(height: KasySpacing.md),
-                BottomPremiumMenu(
-                  textColor: context.colors.onPrimary,
-                  onTapRestore: onTapRestore,
-                ),
-                const SizedBox(height: KasySpacing.lg),
-              ],
-            ),
-          ),
+  Widget _price(BuildContext context) {
+    return Animate(
+      effects: const [
+        FadeEffect(
+          delay: Duration(milliseconds: 400),
+          duration: Duration(milliseconds: 300),
+        ),
+        ScaleEffect(
+          delay: Duration(milliseconds: 400),
+          duration: Duration(milliseconds: 500),
+          curve: Curves.easeOut,
+        ),
+      ],
+      child: Text(
+        _effectiveOffer.formattedPrice(context),
+        textAlign: TextAlign.center,
+        style: context.textTheme.titleLarge?.copyWith(
+          fontWeight: FontWeight.w600,
+          color: context.colors.onPrimary,
+        ),
+      ),
+    );
+  }
+
+  Widget _cta(BuildContext context) {
+    return Animate(
+      effects: const [
+        FadeEffect(
+          delay: Duration(milliseconds: 500),
+          duration: Duration(milliseconds: 300),
         ),
+      ],
+      child: KasyButton(
+        label: Translations.of(context).premium.action_button,
+        variant: KasyButtonVariant.inverse,
+        isLoading: onTap == null,
+        expand: true,
+        onPressed: onTap,
       ),
     );
   }
+
+  Widget _bottomMenu(BuildContext context) {
+    return BottomPremiumMenu(
+      textColor: context.colors.onPrimary,
+      onTapRestore: onTapRestore,
+    );
+  }
 }