[Feature] #687463 - Call Bubble

lib/blip_ds.dart

@@ -58,6 +58,7 @@ export 'src/services/ds_auth.service.dart' show DSAuthService;
 export 'src/services/ds_bottom_sheet.service.dart' show DSBottomSheetService;
 export 'src/services/ds_dialog.service.dart' show DSDialogService;
 export 'src/services/ds_file.service.dart' show DSFileService;
+export 'src/services/ds_localization.service.dart' show DSLocalizationService;
 export 'src/services/ds_media_format.service.dart' show DSMediaFormatService;
 export 'src/services/ds_toast.service.dart' show DSToastService;
 export 'src/themes/colors/ds_colors.theme.dart' show DSColors;
@@ -133,6 +134,8 @@ export 'src/widgets/chat/ds_contact_message_bubble.widget.dart'
     show DSContactMessageBubble;
 export 'src/widgets/chat/ds_delivery_report_icon.widget.dart'
     show DSDeliveryReportIcon;
+export 'src/widgets/chat/ds_end_calls_message_bubble.widget.dart'
+    show DSEndCallsMessageBubble;
 export 'src/widgets/chat/ds_file_message_bubble.widget.dart'
     show DSFileMessageBubble;
 export 'src/widgets/chat/ds_image_message_bubble.widget.dart'

lib/src/extensions/ds_localization.extension.dart

@@ -0,0 +1,10 @@
+import '../services/ds_localization.service.dart';
+
+extension DSLocalizationExtension on String {
+  translate() {
+    final locale = DSLocalizationService.locale ?? 'pt_BR';
+    final translations =
+        DSLocalizationService.translations?[locale.toString()] ?? {};
+    return translations[this] ?? this;
+  }
+}

lib/src/services/ds_localization.service.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+abstract class DSLocalizationService {
+  static Locale? _locale;
+  static final Map<String, dynamic> _translations = {};
+
+  static setLocale(final Locale locale) => _locale = locale;
+  static setTranslations(final Map<String, dynamic> translations) =>
+      _translations.addAll(translations);
+
+  static Locale? get locale => _locale;
+  static Map<String, dynamic>? get translations => _translations;
+}

lib/src/themes/colors/ds_dark_colors.theme.dart

@@ -2,14 +2,15 @@ import 'package:flutter/material.dart';
 
 /// All Dark [Color] constants that are used by this Design System.
 abstract class DSDarkColors {
+  static const Color surfacePositive = Color(0xFF01562F);
   static const Color surface0 = Color(0xFF424242);
-  static const Color surface1 = Color(0xFF292929);
+  static const Color surface1 = Color(0xFF393939);
   static const Color surface3 = Color(0xFF141414);
-  static const Color contentDefault = Color(0xFFF6F6F6);
+  static const Color contentDefault = Color(0xFFFFFFFF);
+  static const Color success = Color(0xFF355E4B);
+  static const Color positive = Color(0xFF6BFFBC);
+  static const Color error = Color(0xFF7B3D3D);
 
   static const Color extendBlue = Color(0xFF1968F0);
   static const Color extendGreen = Color(0xFF35DE90);
-  static const Color success = Color(0xFF355E4B);
-  static const Color positive = Color(0xFF01562F);
-  static const Color error = Color(0xFF7B3D3D);
 }

lib/src/utils/ds_message_content_type.util.dart

@@ -13,4 +13,5 @@ abstract class DSMessageContentType {
   static const String location = 'application/vnd.lime.location+json';
   static const String applicationJson = 'application/json';
   static const String reply = 'application/vnd.lime.reply+json';
+  static const String callsMedia = 'application/vnd.iris.calls.media+json';
 }

lib/src/widgets/chat/ds_end_calls_message_bubble.widget.dart

@@ -0,0 +1,272 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../../enums/ds_align.enum.dart';
+import '../../enums/ds_border_radius.enum.dart';
+import '../../extensions/ds_localization.extension.dart';
+import '../../extensions/ds_string.extension.dart';
+import '../../models/ds_message_bubble_style.model.dart';
+import '../../themes/colors/ds_colors.theme.dart';
+import '../../themes/icons/ds_icons.dart';
+import '../animations/ds_spinner_loading.widget.dart';
+import '../buttons/ds_button.widget.dart';
+import '../texts/ds_caption_small_text.widget.dart';
+import '../texts/ds_caption_text.widget.dart';
+import 'audio/ds_audio_player.widget.dart';
+import 'ds_message_bubble.widget.dart';
+
+class DSEndCallsMessageBubble extends StatelessWidget {
+  final DSAlign align;
+  final List<DSBorderRadius> borderRadius;
+  final DSMessageBubbleStyle style;
+  final Map<String, dynamic> content;
+  final Future<String?> Function(String)? onAsyncFetchSession;
+  final StreamController _streamController = StreamController<bool>();
+  final Map<String, dynamic>? translations;
+
+  bool get _isCallAnswered => ['completed', 'answer'].contains(
+        content['status'].toString().toLowerCase(),
+      );
+
+  bool get _isInbound =>
+      content['direction'].toString().toLowerCase() == 'inbound';
+
+  bool get _isLightBubbleBackground => style.isLightBubbleBackground(align);
+  bool get _isDefaultBubbleColors => style.isDefaultBubbleBackground(align);
+
+  Color get _foregroundColor => _isLightBubbleBackground
+      ? DSColors.neutralDarkCity
+      : DSColors.neutralLightSnow;
+
+  DSEndCallsMessageBubble({
+    super.key,
+    required this.align,
+    required this.content,
+    required this.onAsyncFetchSession,
+    this.borderRadius = const [DSBorderRadius.all],
+    DSMessageBubbleStyle? style,
+    this.translations,
+  }) : style = style ?? DSMessageBubbleStyle();
+
+  @override
+  Widget build(BuildContext context) {
+    return DSMessageBubble(
+      borderRadius: borderRadius,
+      align: align,
+      style: style,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Column(
+                children: [
+                  Row(
+                    children: [
+                      Padding(
+                        padding: const EdgeInsets.only(right: 8.0),
+                        child: Column(
+                          children: [
+                            Container(
+                              decoration: BoxDecoration(
+                                color: _isCallAnswered
+                                    ? DSColors.success
+                                    : DSColors.error,
+                                borderRadius: const BorderRadius.all(
+                                  Radius.circular(
+                                    8.0,
+                                  ),
+                                ),
+                              ),
+                              width: 30,
+                              height: 30,
+                              child: Icon(
+                                _isCallAnswered
+                                    ? _isInbound
+                                        ? DSIcons.voip_receiving_outline
+                                        : DSIcons.voip_calling_outline
+                                    : DSIcons.voip_ended_outline,
+                                size: 20.0,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          DSCaptionText(
+                            'calls.voice-text'.translate(),
+                            fontWeight: FontWeight.bold,
+                            color: _foregroundColor,
+                          ),
+                          DSCaptionSmallText(
+                            _isCallAnswered
+                                ? 'calls.answered'.translate()
+                                : 'calls.unanswered'.translate(),
+                            color: _foregroundColor,
+                          ),
+                        ],
+                      ),
+                    ],
+                  ),
+                ],
+              ),
+              Flexible(
+                child: Column(
+                  children: [
+                    FutureBuilder(
+                      future:
+                          content['identification'].toString().asPhoneNumber(),
+                      builder: (context, snapshot) {
+                        if (snapshot.connectionState == ConnectionState.done) {
+                          return DSCaptionSmallText(
+                            snapshot.data,
+                            color: _foregroundColor,
+                          );
+                        }
+                        return const DSSpinnerLoading();
+                      },
+                    )
+                  ],
+                ),
+              ),
+            ],
+          ),
+          if (_isCallAnswered && onAsyncFetchSession != null)
+            StreamBuilder(
+              stream: _streamController.stream,
+              builder: (_, __) {
+                return FutureBuilder<String?>(
+                  future: onAsyncFetchSession!(
+                    content['sessionId'],
+                  ),
+                  builder: (_, snapshot) {
+                    return switch (snapshot.connectionState) {
+                      ConnectionState.waiting => _buildLoading(),
+                      ConnectionState.done => snapshot.hasError
+                          ? _buildError()
+                          : snapshot.data?.isEmpty ?? true
+                              ? const SizedBox.shrink()
+                              : _buildAudioPlayer(snapshot.data!),
+                      _ => const SizedBox.shrink(),
+                    };
+                  },
+                );
+              },
+            )
+        ],
+      ),
+    );
+  }
+
+  Widget _buildContainer(final Widget child) => SizedBox(
+        height: 60.0,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 8.0),
+          child: Container(
+            decoration: BoxDecoration(
+              color: _isLightBubbleBackground
+                  ? DSColors.neutralLightWhisper
+                  : DSColors.neutralDarkDesk,
+              borderRadius: const BorderRadius.all(
+                Radius.circular(
+                  8.0,
+                ),
+              ),
+            ),
+            child: child,
+          ),
+        ),
+      );
+
+  Widget _buildAudioPlayer(final String data) => _buildContainer(
+        Padding(
+          padding: const EdgeInsets.only(right: 8.0),
+          child: DSAudioPlayer(
+            uri: Uri.parse(data),
+            controlForegroundColor: _isLightBubbleBackground
+                ? DSColors.neutralDarkRooftop
+                : DSColors.neutralLightSnow,
+            labelColor: _isLightBubbleBackground
+                ? DSColors.neutralDarkCity
+                : DSColors.neutralLightSnow,
+            bufferActiveTrackColor: _isLightBubbleBackground
+                ? DSColors.neutralMediumWave
+                : DSColors.neutralMediumElephant,
+            bufferInactiveTrackColor: _isLightBubbleBackground
+                ? DSColors.neutralDarkRooftop
+                : DSColors.neutralLightBox,
+            sliderActiveTrackColor: _isLightBubbleBackground
+                ? DSColors.primaryNight
+                : DSColors.primaryLight,
+            sliderThumbColor: _isLightBubbleBackground
+                ? DSColors.neutralDarkRooftop
+                : DSColors.neutralLightSnow,
+            speedForegroundColor: _isLightBubbleBackground
+                ? DSColors.neutralDarkCity
+                : DSColors.neutralLightSnow,
+            speedBorderColor: _isLightBubbleBackground
+                ? _isDefaultBubbleColors
+                    ? DSColors.neutralMediumSilver
+                    : DSColors.neutralDarkCity
+                : _isDefaultBubbleColors
+                    ? DSColors.disabledText
+                    : DSColors.neutralLightSnow,
+          ),
+        ),
+      );
+
+  Widget _buildLoading() => _buildContainer(
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Row(
+            children: [
+              const DSSpinnerLoading(),
+              Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: DSCaptionText(
+                  'calls.preparing-record'.translate(),
+                  color: _foregroundColor,
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+
+  Widget _buildError() => _buildContainer(
+        Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              DSCaptionText(
+                'calls.load-record'.translate(),
+                color: _foregroundColor,
+              ),
+              DSButton(
+                onPressed: () => _streamController.add(true),
+                borderColor: _isLightBubbleBackground
+                    ? DSColors.neutralMediumSilver
+                    : DSColors.disabledText,
+                foregroundColor: _isLightBubbleBackground
+                    ? DSColors.neutralDarkCity
+                    : DSColors.neutralLightSnow,
+                backgroundColor: _isLightBubbleBackground
+                    ? DSColors.neutralLightWhisper
+                    : DSColors.neutralDarkDesk,
+                trailingIcon: const Icon(
+                  DSIcons.refresh_outline,
+                  size: 25.0,
+                ),
+                autoSize: true,
+              )
+            ],
+          ),
+        ),
+      );
+}

lib/src/widgets/utils/ds_card.widget.dart

@@ -18,6 +18,7 @@ import '../chat/audio/ds_audio_message_bubble.widget.dart';
 import '../chat/ds_application_json_message_bubble.widget.dart';
 import '../chat/ds_carrousel.widget.dart';
 import '../chat/ds_contact_message_bubble.widget.dart';
+import '../chat/ds_end_calls_message_bubble.widget.dart';
 import '../chat/ds_file_message_bubble.widget.dart';
 import '../chat/ds_image_message_bubble.widget.dart';
 import '../chat/ds_location_message_bubble.widget.dart';
@@ -49,6 +50,7 @@ class DSCard extends StatelessWidget {
     this.showRequestLocationButton = false,
     this.replyContent,
     this.isUploading = false,
+    this.onAsyncFetchSession,
   }) : style = style ?? DSMessageBubbleStyle();
 
   final String type;
@@ -66,6 +68,7 @@ class DSCard extends StatelessWidget {
   final bool showRequestLocationButton;
   final DSReplyContent? replyContent;
   final bool isUploading;
+  final Future<String?> Function(String)? onAsyncFetchSession;
 
   @override
   Widget build(BuildContext context) {
@@ -167,6 +170,15 @@ class DSCard extends StatelessWidget {
           avatarConfig: avatarConfig,
         );
 
+      case DSMessageContentType.callsMedia:
+        return DSEndCallsMessageBubble(
+          align: align,
+          borderRadius: borderRadius,
+          style: style,
+          content: content,
+          onAsyncFetchSession: onAsyncFetchSession,
+        );
+
       default:
         return DSUnsupportedContentMessageBubble(
           align: align,