Card component bottom sheet improvements

CHANGELOG.md

@@ -1,5 +1,6 @@
-## 1.1.1
+## 1.2.0
 
+* Improved dynamic viewport of card component.
 * Added the missing loading bottom sheet for the advanced flow google pay component.
 * Updated iOS SDK to v5.13.0.
 

android/src/main/kotlin/com/adyen/checkout/flutter/components/view/DynamicComponentView.kt

@@ -122,17 +122,17 @@ class DynamicComponentView
             }
         }
 
-        private fun calculateFlutterViewportHeight(): Float {
+        private fun calculateFlutterViewportHeight(): Int {
             val componentViewHeightScreenDensity = measuredHeight / screenDensity
-            return componentViewHeightScreenDensity
+            return componentViewHeightScreenDensity.toInt()
         }
 
-        private fun resizeFlutterViewport(viewportHeight: Float) {
+        private fun resizeFlutterViewport(viewportHeight: Int) {
             componentFlutterApi?.onComponentCommunication(
                 ComponentCommunicationModel(
                     type = ComponentCommunicationType.RESIZE,
                     componentId = componentId,
-                    data = viewportHeight.toDouble()
+                    data = viewportHeight
                 )
             ) {}
         }

example/lib/main.dart

@@ -12,6 +12,7 @@ import 'package:adyen_checkout_example/screens/component/apple_pay/apple_pay_adv
 import 'package:adyen_checkout_example/screens/component/apple_pay/apple_pay_navigation_screen.dart';
 import 'package:adyen_checkout_example/screens/component/apple_pay/apple_pay_session_component_screen.dart';
 import 'package:adyen_checkout_example/screens/component/card/card_advanced_component_screen.dart';
+import 'package:adyen_checkout_example/screens/component/card/card_bottom_sheet_screen.dart';
 import 'package:adyen_checkout_example/screens/component/card/card_navigation_screen.dart';
 import 'package:adyen_checkout_example/screens/component/card/card_session_component_screen.dart';
 import 'package:adyen_checkout_example/screens/component/google_pay/google_pay_advanced_component_screen.dart';
@@ -69,6 +70,9 @@ void main() {
       '/cardAdvancedComponentScreen': (context) => CardAdvancedComponentScreen(
             repository: adyenCardComponentRepository,
           ),
+      '/cardBottomSheetScreen': (context) => CardBottomSheetScreen(
+            repository: adyenCardComponentRepository,
+          ),
       '/googlePayNavigation': (context) => const GooglePayNavigationScreen(),
       '/googlePaySessionComponent': (context) =>
           GooglePaySessionsComponentScreen(

example/lib/screens/component/card/card_bottom_sheet_screen.dart

@@ -0,0 +1,127 @@
+// ignore_for_file: unused_local_variable
+
+import 'package:adyen_checkout/adyen_checkout.dart';
+import 'package:adyen_checkout_example/config.dart';
+import 'package:adyen_checkout_example/repositories/adyen_card_component_repository.dart';
+import 'package:adyen_checkout_example/utils/dialog_builder.dart';
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+
+class CardBottomSheetScreen extends StatelessWidget {
+  CardBottomSheetScreen({
+    required this.repository,
+    super.key,
+  });
+
+  final AdyenCardComponentRepository repository;
+  final CardComponentConfiguration cardComponentConfiguration =
+      CardComponentConfiguration(
+    environment: Config.environment,
+    clientKey: Config.clientKey,
+    countryCode: Config.countryCode,
+    shopperLocale: Config.shopperLocale,
+    cardConfiguration: const CardConfiguration(
+      showStorePaymentField: true,
+    ),
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      appBar: AppBar(title: const Text('Card component bottom sheet')),
+      body: SafeArea(
+        child: Center(
+          child: TextButton(
+              child: const Text("Show bottom sheet"),
+              onPressed: () {
+                showModalBottomSheet(
+                  isDismissible: false,
+                  isScrollControlled: true,
+                  context: context,
+                  builder: (BuildContext context) {
+                    return buildModalBottomSheetContent(context);
+                  },
+                );
+              }),
+        ),
+      ),
+    );
+  }
+
+  Widget buildModalBottomSheetContent(BuildContext context) {
+    return SafeArea(
+        child: Padding(
+      padding: MediaQuery.of(context).viewInsets,
+      child: FutureBuilder(
+        future: repository.fetchPaymentMethods(),
+        builder: (BuildContext context,
+            AsyncSnapshot<Map<String, dynamic>> snapshot) {
+          if (snapshot.hasData) {
+            final paymentMethod = _extractPaymentMethod(snapshot.data!);
+            final advancedCheckout = AdvancedCheckout(
+              onSubmit: repository.onSubmit,
+              onAdditionalDetails: repository.onAdditionalDetails,
+            );
+
+            return Container(
+              padding: const EdgeInsets.all(8.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Align(
+                    alignment: Alignment.centerRight,
+                    child: IconButton(
+                      onPressed: () => Navigator.pop(context),
+                      icon: const Icon(Icons.close),
+                    ),
+                  ),
+                  AdyenCardComponent(
+                    configuration: cardComponentConfiguration,
+                    paymentMethod: paymentMethod,
+                    checkout: advancedCheckout,
+                    onPaymentResult: (paymentResult) async {
+                      Navigator.pop(context);
+                      DialogBuilder.showPaymentResultDialog(
+                          paymentResult, context);
+                    },
+                  ),
+                  const Text("Example text")
+                ],
+              ),
+            );
+          } else {
+            return const SizedBox(
+              height: 400,
+              child: Center(
+                child: CircularProgressIndicator(),
+              ),
+            );
+          }
+        },
+      ),
+    ));
+  }
+
+  Map<String, dynamic> _extractPaymentMethod(
+      Map<String, dynamic> paymentMethods) {
+    if (paymentMethods.isEmpty) {
+      return <String, String>{};
+    }
+
+    List paymentMethodList = paymentMethods["paymentMethods"] as List;
+    Map<String, dynamic> paymentMethod = paymentMethodList.firstWhereOrNull(
+            (paymentMethod) => paymentMethod["type"] == "scheme") ??
+        <String, String>{};
+
+    List storedPaymentMethodList =
+        paymentMethods.containsKey("storedPaymentMethods")
+            ? paymentMethods["storedPaymentMethods"] as List
+            : [];
+    Map<String, dynamic> storedPaymentMethod =
+        storedPaymentMethodList.firstOrNull ?? <String, String>{};
+
+    return paymentMethod;
+  }
+}

example/lib/screens/component/card/card_navigation_screen.dart

@@ -32,6 +32,11 @@ class _CardNavigationScreenState extends State<CardNavigationScreen> {
                     context, "/cardAdvancedComponentScreen"),
                 child: const Text("Card component advanced"),
               ),
+              TextButton(
+                onPressed: () =>
+                    Navigator.pushNamed(context, "/cardBottomSheetScreen"),
+                child: const Text("Card component bottom sheet"),
+              ),
             ],
           ),
         ),

ios/Classes/components/card/BaseCardComponent.swift

@@ -129,7 +129,7 @@ class BaseCardComponent: NSObject, FlutterPlatformView, UIScrollViewDelegate {
     private func sendHeightUpdate() {
         guard let viewHeight = cardComponent?.viewController.preferredContentSize.height else { return }
         let additionalViewportSpace = determineAdditionalViewportSpace()
-        let roundedViewHeight = Double(round(100 * (viewHeight + additionalViewportSpace) / 100))
+        let roundedViewHeight = Int(viewHeight + additionalViewportSpace)
         let componentCommunicationModel = ComponentCommunicationModel(
             type: ComponentCommunicationType.resize,
             componentId: componentId,
@@ -145,7 +145,7 @@ class BaseCardComponent: NSObject, FlutterPlatformView, UIScrollViewDelegate {
         if isStoredPaymentMethod {
             return 256.0
         } else {
-            return 8.0
+            return 0
         }
     }
 }

lib/src/components/card/base_card_component.dart

@@ -21,7 +21,6 @@ abstract class BaseCardComponent extends StatefulWidget {
   final bool isStoredPaymentMethod;
   final Set<Factory<OneSequenceGestureRecognizer>>? gestureRecognizers;
   final AdyenLogger adyenLogger;
-  final StreamController<double> resizeStream = StreamController.broadcast();
   abstract final String componentId;
   abstract final Map<String, dynamic> creationParams;
   abstract final String viewType;
@@ -41,9 +40,6 @@ abstract class BaseCardComponent extends StatefulWidget {
 
   void onFinished(PaymentResultDTO? paymentResultDTO);
 
-  void onResize(ComponentCommunicationModel event) =>
-      resizeStream.add(event.data as double);
-
   void onResult(ComponentCommunicationModel event) {
     final paymentResult = event.paymentResult;
     if (paymentResult == null) {
@@ -79,6 +75,8 @@ class _BaseCardComponentState extends State<BaseCardComponent> {
   final ComponentFlutterApi _componentFlutterApi = ComponentFlutterApi.instance;
   late StreamSubscription<ComponentCommunicationModel>
       _componentCommunicationStream;
+  int? previousViewportHeight;
+  int? viewportHeight;
 
   @override
   void initState() {
@@ -87,30 +85,25 @@ class _BaseCardComponentState extends State<BaseCardComponent> {
         .componentCommunicationStream.stream
         .where((communicationModel) =>
             communicationModel.componentId == widget.componentId)
-        .listen(widget.handleComponentCommunication);
+        .listen(_onComponentCommunication);
 
     super.initState();
   }
 
   @override
   Widget build(BuildContext context) {
-    return StreamBuilder(
-        stream: widget.resizeStream.stream.distinct(),
-        builder: (BuildContext context, AsyncSnapshot snapshot) {
-          return CardComponentContainer(
-            snapshot: snapshot,
-            cardWidgetKey: _cardWidgetKey,
-            initialViewHeight: widget.initialViewHeight,
-            cardWidget: _cardWidget,
-          );
-        });
+    return CardComponentContainer(
+      cardWidgetKey: _cardWidgetKey,
+      initialViewPortHeight: widget.initialViewHeight,
+      viewportHeight: viewportHeight,
+      cardWidget: _cardWidget,
+    );
   }
 
   @override
   void dispose() {
     _componentCommunicationStream.cancel();
     _componentFlutterApi.dispose();
-    widget.resizeStream.close();
     super.dispose();
   }
 
@@ -139,4 +132,25 @@ class _BaseCardComponentState extends State<BaseCardComponent> {
         throw UnsupportedError('Unsupported platform');
     }
   }
+
+  void _onComponentCommunication(event) {
+    if (event.type case ComponentCommunicationType.resize) {
+      _resizeViewport(event);
+    } else if (event.type case ComponentCommunicationType.result) {
+      widget.onResult(event);
+    } else {
+      widget.handleComponentCommunication(event);
+    }
+  }
+
+  void _resizeViewport(event) {
+    final newViewportHeight = event.data is int ? event.data : null;
+    if (newViewportHeight != previousViewportHeight &&
+        newViewportHeight != null) {
+      setState(() {
+        previousViewportHeight = viewportHeight;
+        viewportHeight = newViewportHeight;
+      });
+    }
+  }
 }

lib/src/components/card/card_advanced_component.dart

@@ -46,10 +46,6 @@ class CardAdvancedComponent extends BaseCardComponent {
       _onSubmit(event);
     } else if (event.type case ComponentCommunicationType.additionalDetails) {
       _onAdditionalDetails(event);
-    } else if (event.type case ComponentCommunicationType.result) {
-      onResult(event);
-    } else if (event.type case ComponentCommunicationType.resize) {
-      onResize(event);
     }
   }
 

lib/src/components/card/card_component_container.dart

@@ -4,14 +4,15 @@ import 'package:flutter/material.dart';
 class CardComponentContainer extends StatelessWidget {
   const CardComponentContainer({
     super.key,
-    required this.snapshot,
+    required this.viewportHeight,
     required this.cardWidgetKey,
-    required this.initialViewHeight,
+    required this.initialViewPortHeight,
     required this.cardWidget,
   });
 
-  final double initialViewHeight;
-  final AsyncSnapshot snapshot;
+  final double bottomSpacing = 8;
+  final double initialViewPortHeight;
+  final int? viewportHeight;
   final Key cardWidgetKey;
   final Widget cardWidget;
 
@@ -22,16 +23,16 @@ class CardComponentContainer extends StatelessWidget {
         AnimatedOpacity(
           duration: const Duration(milliseconds: 300),
           curve: Curves.fastOutSlowIn,
-          opacity: snapshot.data != null ? 1 : 0,
+          opacity: viewportHeight != null ? 1 : 0,
           child: SizedBox(
             key: cardWidgetKey,
-            height: _determineHeight(snapshot),
+            height: _determineHeight(viewportHeight),
             child: cardWidget,
           ),
         ),
-        if (snapshot.data == null)
+        if (viewportHeight == null)
           SizedBox(
-            height: initialViewHeight,
+            height: initialViewPortHeight,
             child: _buildLoadingWidget(),
           )
       ],
@@ -47,14 +48,7 @@ class CardComponentContainer extends StatelessWidget {
     }
   }
 
-  double _determineHeight(AsyncSnapshot<dynamic> snapshot) {
-    switch (snapshot.data) {
-      case null:
-        return initialViewHeight;
-      case > 0:
-        return snapshot.data;
-      default:
-        return initialViewHeight;
-    }
+  double _determineHeight(int? height) {
+    return height == null ? initialViewPortHeight : height + bottomSpacing;
   }
 }

lib/src/components/card/card_session_component.dart

@@ -37,13 +37,7 @@ class CardSessionComponent extends BaseCardComponent {
       };
 
   @override
-  void handleComponentCommunication(ComponentCommunicationModel event) {
-    if (event.type case ComponentCommunicationType.result) {
-      onResult(event);
-    } else if (event.type case ComponentCommunicationType.resize) {
-      onResize(event);
-    }
-  }
+  void handleComponentCommunication(ComponentCommunicationModel event) {}
 
   @override
   void onFinished(PaymentResultDTO? paymentResultDTO) {