Call Us bottomsheet

assets/images/phone.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.8208 32C21.3835 32 18.3935 30.8777 15.0994 28.6664C8.43901 24.197 0.644681 15.0246 0.0405801 8.82675C-0.152584 6.84452 0.344486 5.24511 1.51831 4.07128L5.5896 0L13.8796 8.29003L13.2167 8.95292C12.1593 10.0105 10.4265 11.7396 9.18764 12.9701C10.3273 14.6437 12.5273 17.117 14.1505 18.7402C15.687 20.2754 17.465 21.6728 19.0673 22.7431C20.2216 21.5812 21.7753 20.0228 23.046 18.7494L23.7099 18.0859L31.9999 26.3777L27.978 30.3996C26.9077 31.4699 25.495 32 23.8208 32Z" fill="#163A51"/>
+</svg>

assets/images/whatsapp.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3377 4.65039C24.3295 1.65313 20.3289 0.00175781 16.0669 0C7.28466 0 0.13718 7.11309 0.133647 15.8557C0.13247 18.6504 0.866058 21.3785 2.26043 23.7832L0 32L8.44647 29.7949C10.7738 31.0584 13.394 31.7242 16.0604 31.725H16.0671C24.8484 31.725 31.9967 24.6113 32 15.8684C32.0018 11.6313 30.346 7.64746 27.3377 4.65039ZM16.0669 29.0471H16.0614C13.6852 29.0461 11.3547 28.4105 9.32117 27.21L8.8378 26.9242L3.82553 28.2328L5.16338 23.3693L4.8484 22.8707C3.52272 20.7723 2.82269 18.3469 2.82386 15.8566C2.82661 8.59004 8.76754 2.67813 16.0722 2.67813C19.6095 2.6793 22.9346 4.05195 25.4348 6.54316C27.935 9.03438 29.3112 12.3457 29.31 15.8674C29.3068 23.1346 23.3663 29.0471 16.0669 29.0471ZM23.331 19.1762C22.933 18.9777 20.9756 18.0195 20.6105 17.8871C20.2459 17.7549 19.9802 17.6891 19.715 18.0855C19.4495 18.482 18.6867 19.3746 18.4543 19.6389C18.222 19.9033 17.99 19.9365 17.5918 19.7381C17.1936 19.5398 15.9109 19.1213 14.3901 17.7715C13.2068 16.7209 12.4078 15.4234 12.1754 15.027C11.9435 14.6301 12.1735 14.4363 12.3501 14.2184C12.7811 13.6857 13.2126 13.1273 13.3453 12.8631C13.4782 12.5986 13.4116 12.3672 13.3119 12.1689C13.2126 11.9707 12.4164 10.0205 12.0848 9.22695C11.7614 8.45469 11.4334 8.55898 11.1889 8.54688C10.9569 8.53535 10.6914 8.53301 10.4259 8.53301C10.1605 8.53301 9.72917 8.63203 9.36415 9.02891C8.99931 9.42559 7.97095 10.384 7.97095 12.3342C7.97095 14.2844 9.39751 16.1684 9.59651 16.4328C9.79551 16.6973 12.4039 20.6992 16.3974 22.4152C17.3473 22.8238 18.0887 23.0674 18.6671 23.25C19.6208 23.5516 20.4885 23.509 21.1746 23.407C21.9396 23.2932 23.5298 22.4484 23.8618 21.523C24.1935 20.5975 24.1935 19.8043 24.0938 19.6389C23.9945 19.4736 23.729 19.3746 23.331 19.1762Z" fill="#163A51"/>
+</svg>

assets/translations/ar.json

@@ -10,5 +10,8 @@
   "myRequests" : "طلباتي",
   "myAssets" : "ممتلكاتي",
   "contactUs": "اتصل بنا",
-  "welcome" : "مرحبا،"
+  "welcome" : "مرحبا،",
+  "openWhatsapp" : "الإنتقال الى الواتس اب",
+  "callUs" : "إتصل بنا",
+  "liveChat" : "محادثة حية"
 }

assets/translations/en.json

@@ -10,5 +10,8 @@
   "myRequests" : "My Request",
   "myAssets" : "My Assets",
   "contactUs": "Contact Us",
-  "welcome" : "Welcome,"
+  "welcome" : "Welcome,",
+  "openWhatsapp" : "Open WhatsApp",
+  "callUs" : "Call Us",
+  "liveChat" : "Live Chat"
 }

lib/models/enums/translation_keys.dart

@@ -1 +1,17 @@
-enum TranslationKeys { login, enterCredsToLogin, forgotPassword, password, username, requiredField, passwordLengthMessage, overview, myRequests, myAssets, contactUs, welcome }
+enum TranslationKeys {
+  login,
+  enterCredsToLogin,
+  forgotPassword,
+  password,
+  username,
+  requiredField,
+  passwordLengthMessage,
+  overview,
+  myRequests,
+  myAssets,
+  contactUs,
+  welcome,
+  openWhatsapp,
+  liveChat,
+  callUs
+}

lib/new_views/app_style/app_themes.dart

@@ -9,9 +9,7 @@ class AppThemes {
     indicatorColor: AppColor.primary50,
     scaffoldBackgroundColor: AppColor.backgroundLight,
     colorScheme: const ColorScheme.light(primary: AppColor.primary50, onPrimary: Colors.white, secondary: Colors.white, onSecondary: AppColor.neutral70),
-    floatingActionButtonTheme: const FloatingActionButtonThemeData(
-      backgroundColor: AppColor.backgroundDark,
-    ),
+    floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor: AppColor.backgroundDark),
     bottomNavigationBarTheme: BottomNavigationBarThemeData(
       type: BottomNavigationBarType.fixed,
       unselectedLabelStyle: ThemeData.light().textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
@@ -21,6 +19,11 @@ class AppThemes {
       backgroundColor: Colors.white,
     ),
     appBarTheme: const AppBarTheme(backgroundColor: AppColor.backgroundLight, titleTextStyle: TextStyle(color: AppColor.neutral50)),
+    cardTheme: ThemeData.light().cardTheme.copyWith(
+          elevation: 3,
+          shadowColor: Colors.white.withOpacity(0.05),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+        ),
   );
 
   static ThemeData darkTheme = ThemeData.dark().copyWith(
@@ -39,5 +42,10 @@ class AppThemes {
       backgroundColor: AppColor.neutral60,
     ),
     appBarTheme: const AppBarTheme(backgroundColor: AppColor.backgroundDark, titleTextStyle: TextStyle(color: AppColor.neutral30)),
+    cardTheme: ThemeData.dark().cardTheme.copyWith(
+          elevation: 3,
+          shadowColor: Colors.white.withOpacity(0.05),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+        ),
   );
 }

lib/new_views/pages/land_page/contact_us_bottom_sheet.dart

@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:test_sa/extensions/context_extension.dart';
+import 'package:test_sa/extensions/int_extensions.dart';
+import 'package:test_sa/models/enums/translation_keys.dart';
+
+import '../../app_style/app_color.dart';
+
+class ContactUsBottomSheet extends StatelessWidget {
+  const ContactUsBottomSheet({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 300.toScreenHeight,
+      clipBehavior: Clip.antiAlias,
+      decoration: BoxDecoration(
+        color: Theme.of(context).scaffoldBackgroundColor,
+        borderRadius: const BorderRadius.only(
+          topRight: Radius.circular(30),
+          topLeft: Radius.circular(30),
+        ),
+      ),
+      padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
+      child: Column(
+        children: [
+          Container(
+            width: 40.toScreenWidth,
+            height: 5.toScreenHeight,
+            decoration: BoxDecoration(color: AppColor.neutral40, borderRadius: BorderRadius.circular(30)),
+          ),
+          Align(
+            alignment: AlignmentDirectional.centerStart,
+            child: Padding(
+              padding: EdgeInsets.symmetric(vertical: 16.toScreenHeight),
+              child: Text(
+                context.translate(TranslationKeys.contactUs),
+                style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600),
+              ),
+            ),
+          ),
+          Row(
+            children: [
+              Expanded(child: _ContactCard(iconName: "phone", title: context.translate(TranslationKeys.callUs), subtitle: "+966 546345567")),
+              16.width,
+              Expanded(
+                child: _ContactCard(
+                  iconName: "whatsapp",
+                  title: context.translate(TranslationKeys.liveChat),
+                  subtitle: context.translate(TranslationKeys.openWhatsapp),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _ContactCard extends StatelessWidget {
+  final String iconName, title, subtitle;
+  const _ContactCard({
+    Key key,
+    @required this.iconName,
+    @required this.title,
+    @required this.subtitle,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: Padding(
+        padding: EdgeInsets.all(16.toScreenWidth),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SvgPicture.asset(
+              "assets/images/$iconName.svg",
+              width: 32.toScreenWidth,
+              color: context.isDark ? AppColor.primary40 : AppColor.primary70,
+            ),
+            30.height,
+            Text(
+              title,
+              style: Theme.of(context).textTheme.titleLarge?.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50),
+            ),
+            Text(
+              subtitle,
+              style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/new_views/pages/land_page/land_page.dart

@@ -4,10 +4,13 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:test_sa/extensions/int_extensions.dart';
 import 'package:test_sa/new_views/common_widgets/app_bar/home_app_bar.dart';
+import 'package:test_sa/new_views/pages/land_page/my_assets_page.dart';
+import 'package:test_sa/new_views/pages/land_page/my_requests_page.dart';
 
 import '../../common_widgets/app_bottom_nav_bar.dart';
 import '../../common_widgets/app_drawer.dart';
 import '../../common_widgets/app_floating_button.dart';
+import 'contact_us_bottom_sheet.dart';
 import 'dashboard_page.dart';
 
 class LandPage extends StatefulWidget {
@@ -23,9 +26,8 @@ class _LandPageState extends State<LandPage> {
   int currentPageIndex = 0;
   final List<Widget> _pages = const <Widget>[
     DashboardPage(),
-    Text('Index 1'),
-    Text('Index 2'),
-    Text('Index 3'),
+    MyRequestsPage(),
+    MyAssetsPage(),
   ];
 
   @override
@@ -64,9 +66,18 @@ class _LandPageState extends State<LandPage> {
         bottomNavigationBar: AppBottomNavigationBar(
           selectedIndex: currentPageIndex,
           onPressed: (index) {
+            if (index == 3) {
+              showModalBottomSheet(
+                context: context,
+                useSafeArea: true,
+                backgroundColor: Colors.transparent,
+                builder: (context) => const ContactUsBottomSheet(),
+              );
+            } else {
               setState(() {
                 currentPageIndex = index;
               });
+            }
           },
         ),
       ),

lib/new_views/pages/land_page/my_assets_page.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+class MyAssetsPage extends StatelessWidget {
+  const MyAssetsPage({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      body: Center(
+        child: Text("My Assets"),
+      ),
+    );
+  }
+}

lib/new_views/pages/land_page/my_requests_page.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+class MyRequestsPage extends StatelessWidget {
+  const MyRequestsPage({Key key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const Scaffold(
+      body: Center(
+        child: Text("My Requests"),
+      ),
+    );
+  }
+}