Merge branch 'mirza_development' into 'master'

edit account and extensions design update

See merge request mirza.shafique/car_common_app!7

assets/icons/ic_email.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.704" height="12.563" viewBox="0 0 15.704 12.563">
+  <g id="email_1_" data-name="email (1)" transform="translate(-1 -4)">
+    <path id="Path_4650" data-name="Path 4650" d="M16.7,5.643A1.928,1.928,0,0,0,14.8,4H2.958a1.928,1.928,0,0,0-1.9,1.643L8.879,10.7Z" transform="translate(-0.027)" fill="#28323a"/>
+    <path id="Path_4651" data-name="Path 4651" d="M9.136,14.382a.523.523,0,0,1-.568,0L1,9.486v7.76a1.933,1.933,0,0,0,1.931,1.931H14.773A1.933,1.933,0,0,0,16.7,17.246V9.485Z" transform="translate(0 -2.614)" fill="#28323a"/>
+  </g>
+</svg>

assets/icons/ic_group_star.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18.179" height="18.292" viewBox="0 0 18.179 18.292">
+  <g id="Group_8208" data-name="Group 8208" transform="translate(6.059 -2.453)">
+    <path id="Subtraction_1" data-name="Subtraction 1" d="M813.651-8223.366a.856.856,0,0,1-.509-.165.871.871,0,0,1-.337-.9l1.05-4.624-3.561-3.12a.87.87,0,0,1-.252-.922.864.864,0,0,1,.744-.6l4.71-.428,1.861-4.356a.87.87,0,0,1,.8-.527.866.866,0,0,1,.8.527l1.861,4.356,4.71.428a.864.864,0,0,1,.744.6.861.861,0,0,1-.254.92l-1.314,1.153a5.444,5.444,0,0,0-2.143-.434,5.507,5.507,0,0,0-5.5,5.5,5.575,5.575,0,0,0,.04.668l-3,1.795A.856.856,0,0,1,813.651-8223.366Z" transform="translate(-816.059 8241.453)" fill="#28323a"/>
+    <g id="gear_2_" data-name="gear (2)" transform="translate(2.097 10.723)">
+      <g id="Group_8179" data-name="Group 8179">
+        <path id="Path_4657" data-name="Path 4657" d="M9.8,4.139,8.65,3.856a3.8,3.8,0,0,0-.265-.631l.535-.892a.294.294,0,0,0-.044-.359l-.83-.83A.293.293,0,0,0,7.687,1.1l-.893.535a3.783,3.783,0,0,0-.628-.263L5.883.223A.294.294,0,0,0,5.6,0H4.424a.293.293,0,0,0-.285.223s-.2.8-.282,1.149a3.77,3.77,0,0,0-.666.284L2.264,1.1a.294.294,0,0,0-.359.044l-.83.83a.294.294,0,0,0-.044.359L1.6,3.29a3.784,3.784,0,0,0-.231.566l-1.15.284A.294.294,0,0,0,0,4.424V5.6a.293.293,0,0,0,.223.285l1.15.283a3.787,3.787,0,0,0,.27.642l-.513.854a.294.294,0,0,0,.044.359l.83.83a.3.3,0,0,0,.359.044l.856-.513a3.783,3.783,0,0,0,.637.268L4.139,9.8a.293.293,0,0,0,.285.223H5.6A.294.294,0,0,0,5.883,9.8L6.166,8.65a3.73,3.73,0,0,0,.651-.277l.87.522a.294.294,0,0,0,.359-.044l.83-.83a.294.294,0,0,0,.044-.359l-.528-.879a3.76,3.76,0,0,0,.258-.617L9.8,5.883a.293.293,0,0,0,.223-.285V4.424A.293.293,0,0,0,9.8,4.139ZM5.011,7.066A2.055,2.055,0,1,1,7.066,5.011,2.058,2.058,0,0,1,5.011,7.066Z" fill="#28323a"/>
+      </g>
+    </g>
+  </g>
+</svg>

assets/icons/ic_password.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g id="key_1_" data-name="key (1)" transform="translate(-0.001 0)">
+    <g id="Group_8173" data-name="Group 8173" transform="translate(0.001 0)">
+      <path id="Path_4652" data-name="Path 4652" d="M14.494,1.507A5.154,5.154,0,0,0,5.945,6.741L.138,12.548A.468.468,0,0,0,0,12.879v2.652A.468.468,0,0,0,.47,16H3.122a.468.468,0,0,0,.331-.137l.663-.663a.469.469,0,0,0,.134-.385L4.168,14.1l.987-.093a.468.468,0,0,0,.423-.423L5.67,12.6l.712.083a.461.461,0,0,0,.366-.115.47.47,0,0,0,.157-.35v-.873h.857a.468.468,0,0,0,.331-.137L9.3,10.02a5.077,5.077,0,0,0,5.2-1.22A5.162,5.162,0,0,0,14.494,1.507ZM13.167,4.822a1.406,1.406,0,1,1,0-1.989A1.407,1.407,0,0,1,13.167,4.822Z" transform="translate(-0.001 0)" fill="#28323a"/>
+    </g>
+  </g>
+</svg>

assets/icons/ic_phone_number.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10.198" height="18.697" viewBox="0 0 10.198 18.697">
+  <path id="iphone" d="M8.378,0H2.157A1.991,1.991,0,0,0,.168,1.989V16.708A1.991,1.991,0,0,0,2.157,18.7H8.378a1.991,1.991,0,0,0,1.989-1.989V1.989A1.991,1.991,0,0,0,8.378,0ZM5.267,17a.85.85,0,1,1,.85-.85A.85.85,0,0,1,5.267,17ZM6.542,2.55H3.992a.425.425,0,1,1,0-.85h2.55a.425.425,0,0,1,0,.85Zm0,0" transform="translate(-0.168)" fill="#28323a"/>
+</svg>

assets/icons/ic_star.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.312" height="15.633" viewBox="0 0 16.312 15.633">
+  <g id="star_8_" data-name="star (8)" transform="translate(-0.412 -1.453)">
+    <path id="Path_4654" data-name="Path 4654" d="M144.274,139.235a.866.866,0,0,0-.745-.6l-4.709-.428-1.862-4.356a.866.866,0,0,0-1.595,0l-1.862,4.356-4.709.428a.868.868,0,0,0-.492,1.517l3.56,3.121-1.05,4.623a.866.866,0,0,0,1.29.937l4.061-2.427,4.06,2.427a.867.867,0,0,0,1.29-.937l-1.05-4.623,3.56-3.122A.866.866,0,0,0,144.274,139.235Zm0,0" transform="translate(-127.593 -131.875)" fill="#f47f20"/>
+  </g>
+</svg>

lib/classes/consts.dart

@@ -101,7 +101,7 @@ class MyAssets {
   static String bnLogo = "${assetPath}images/bn_logo.svg";
   static String icCar = "${assetPath}images/ic_car.svg";
   static String icEdit = "${assetPath}icons/ic_edit.svg";
-  static String icEmail = "${assetPath}images/ic_email.svg";
+  static String icEmail = "${assetPath}icons/ic_email.svg";
   static String icLock = "${assetPath}images/ic_lock.svg";
   static String icLogout = "${assetPath}images/ic_logout.svg";
   static String icMobile = "${assetPath}images/ic_mobile.svg";
@@ -109,6 +109,10 @@ class MyAssets {
   static String icNotification = "${assetPath}images/ic_notification.svg";
   static String logo = "${assetPath}images/logo.svg";
   static String splashLogo = "${assetPath}images/splash_logo.svg";
+  static String icGroupStar = "${assetPath}icons/ic_group_star.svg";
+  static String icPassword = "${assetPath}icons/ic_password.svg";
+  static String icPhoneNumber = "${assetPath}icons/ic_phone_number.svg";
+  static String icStar= "${assetPath}icons/ic_star.svg";
 
   //PNG
   static String icWorldPng = "${assetPath}images/ic_world.png";

lib/config/routes.dart

@@ -53,6 +53,9 @@ class AppRoutes {
   static const String dashboard = "/dashboard";
 
 
+  //Subcriptions
+  static final String mySubscriptionsPage = "/mySubscriptionsPage";
+  static final String subscriptionsPage = "/subscriptionsPage";
 
   static const String initialRoute = splash;
 

lib/views/user/edit_account_page.dart

@@ -10,6 +10,7 @@ import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
 import 'package:provider/provider.dart';
 import '../../theme/colors.dart';
 
@@ -28,130 +29,107 @@ class _EditAccountPageState extends State<EditAccountPage> {
   Widget build(BuildContext context) {
     UserVM userVM = context.read<UserVM>();
     return Scaffold(
-      appBar: CustomAppBar( isRemoveBackButton: true, title: LocaleKeys.editAccount.tr()),
+      appBar: CustomAppBar(isRemoveBackButton: true, title: LocaleKeys.editAccount.tr()),
       body: Container(
         width: double.infinity,
         height: double.infinity,
-        padding: const EdgeInsets.all(20),
+        padding: const EdgeInsets.all(21),
         child: Column(
           children: [
-            20.height,
+            Column(
-            Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisAlignment: MainAxisAlignment.start,
               children: [
-                SvgPicture.asset(
+                showItem(
-                  MyAssets.icLock,
+                  icon: MyAssets.icEmail,
-                  color: MyColors.darkPrimaryColor,
+                  title: LocaleKeys.changeEmail.tr(),
-                  width: 16,
+                  onTap: () {
+                    navigateWithName(context, AppRoutes.changeEmailPage);
+                  },
+                ),
+                const Divider(
+                  height: 1,
                 ),
-                20.width,
+                showItem(
-                Expanded(child: LocaleKeys.changePassword.tr().toText(isBold: true, fontSize: 12)),
+                  icon: MyAssets.icPassword,
-                ElevatedButton(
+                  title: LocaleKeys.changePassword.tr(),
-                  style: ElevatedButton.styleFrom(
+                  onTap: () {
-                    textStyle: const TextStyle(color: Colors.white),
-                    backgroundColor: MyColors.darkPrimaryColor,
-                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
-                  ),
-                  onPressed: () {
                     navigateWithName(context, AppRoutes.changePassword);
                   },
-                  child: Text(
-                    LocaleKeys.change.tr(),
-                    style: const TextStyle(
-                      fontSize: 14, letterSpacing: -0.48,
-                      fontWeight: FontWeight.w600,
-                      height: 23 / 24,
-                    ),
-                  ),
                 ),
-              ],
+                const Divider(
-            ),
+                  height: 1,
-            15.height,
-            Row(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisAlignment: MainAxisAlignment.start,
-              children: [
-                SvgPicture.asset(
-                  "assets/images/ic_mobile.svg",
-                  color: MyColors.darkPrimaryColor,
-                  width: 16,
                 ),
-                20.width,
+                showItem(
-                Expanded(child: LocaleKeys.changeMobile.tr().toText(isBold: true, fontSize: 12)),
+                  icon: MyAssets.icPhoneNumber,
-                LocaleKeys.verify.tr().toText(color: Colors.green, fontSize: 12),
+                  title: LocaleKeys.changeMobile.tr(),
-                20.width,
+                  onTap: () {
-                ElevatedButton(
-                  style: ElevatedButton.styleFrom(
-                    textStyle: const TextStyle(color: Colors.white),
-                    backgroundColor: MyColors.darkPrimaryColor,
-                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
-                  ),
-                  onPressed: () {
                     navigateWithName(context, AppRoutes.changeMobilePage);
                   },
-                  child: Text(
+                ),
-                    LocaleKeys.change.tr(),
+                const Divider(
-                    style: const TextStyle(fontSize: 14, height: 23 / 24,fontWeight: FontWeight.w600),
+                  height: 1,
-                  ),
+                ),
-                )
               ],
-            ),
+            ).toWhiteContainer(width: double.infinity, pading: EdgeInsets.symmetric(horizontal: 12)),
-            20.height,
+            21.height,
-            Row(
+            Column(
-              crossAxisAlignment: CrossAxisAlignment.center,
-              mainAxisAlignment: MainAxisAlignment.start,
               children: [
-                SvgPicture.asset(
+                showItem(
-                  MyAssets.icEmail,
+                  icon: MyAssets.icStar,
-                  color: MyColors.darkPrimaryColor,
+                  title: "My Subscriptions",
-                  width: 16,
+                  subTitle: "Silver",
+                  onTap: () {
+                    navigateWithName(context, AppRoutes.mySubscriptionsPage);
+                  },
                 ),
-                20.width,
+                const Divider(
-                Expanded(child: LocaleKeys.changeEmail.tr().toText(isBold: true, fontSize: 12)),
+                  height: 1,
-                InkWell(
-                  child: ((AppState().getUser.data!.userInfo!.isEmailVerified ?? false) ? LocaleKeys.verified.tr() : LocaleKeys.verify.tr()).toText(
-                    color: Colors.green,
-                    fontSize: 12,
-                  ),
-                  onTap: (AppState().getUser.data!.userInfo!.isEmailVerified ?? false)
-                      ? null
-                      : () async {
-                          await userVM.verifyEmail(context, email: email, userID: userID);
-                        },
                 ),
-                20.width,
+                showItem(
-                ElevatedButton(
+                  icon: MyAssets.icGroupStar,
-                  style: ElevatedButton.styleFrom(
+                  title: "Subscriptions",
-                    textStyle: const TextStyle(color: Colors.white),
+                  onTap: () {
-                    backgroundColor: MyColors.darkPrimaryColor,
+                    navigateWithName(context, AppRoutes.subscriptionsPage);
-                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
-                  ),
-                  onPressed: () {
-                    navigateWithName(context, AppRoutes.changeEmailPage);
                   },
-                  child: Text(
-                    LocaleKeys.change.tr(),
-                    style: const TextStyle(fontSize: 14, height: 23 / 24, fontWeight: FontWeight.w600),
-                  ),
                 ),
               ],
-            )
+            ).toWhiteContainer(width: double.infinity, pading: EdgeInsets.symmetric(horizontal: 12)),
+          ],
+        ),
+      ),
+    );
+  }
 
-            // ListTile(
+  Widget showItem({required String icon, required String title, required VoidCallback onTap, String? subTitle}) {
-            //   leading: SvgPicture.asset("assets/images/ic_mobile.svg"),
+    return InkWell(
-            //   title: "Change Mobile".toText12(),
+      onTap: onTap,
-            //   onTap: () {
+      child: Padding(
-            //     navigateWithName(context, AppRoutes.changeMobilePage);
+        padding: const EdgeInsets.symmetric(vertical: 12),
-            //   },
+        child: Row(
-            // ),
+          crossAxisAlignment: CrossAxisAlignment.center,
-            // ListTile(
+          children: [
-            //   leading: Icon(Icons.email_outlined, color: Colors.blue,),
+            SizedBox(
-            //   title: "Change Email".toText12(),
+              width: 16,
-            //   onTap: () {
+              height: 16,
-            //     navigateWithName(context, AppRoutes.changeEmailPage);
+              child: SvgPicture.asset(
-            //   },
+                icon,
-            // ),
+                color: subTitle == null ? MyColors.black : MyColors.primaryColor,
+              ),
+            ),
+            12.width,
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  title.toText(isBold: true, fontSize: 14),
+                  if (subTitle != null) subTitle.toText(fontSize: 14, color: MyColors.primaryColor),
+                ],
+              ),
+            ),
+            const Icon(
+              Icons.arrow_forward,
+              size: 16,
+            ),
           ],
         ),
       ),

lib/widgets/extensions/extensions_widget.dart

@@ -23,13 +23,13 @@ extension ExtendedText on Widget {
 }
 
 extension ContainerExt on Widget {
-  Widget toWhiteContainer({required double width, required double allPading, EdgeInsets? margin, VoidCallback? onTap}) {
+  Widget toWhiteContainer({required double width, double? allPading, EdgeInsets? pading, EdgeInsets? margin, VoidCallback? onTap, Color? backgroundColor}) {
     return InkWell(
       onTap: onTap,
       child: Container(
-        decoration: const BoxDecoration(
+        decoration: BoxDecoration(
-          color: MyColors.white,
+          color: backgroundColor ?? MyColors.white,
-          boxShadow: [
+          boxShadow: const [
             BoxShadow(
               blurRadius: 8,
               spreadRadius: 3,
@@ -38,7 +38,7 @@ extension ContainerExt on Widget {
             ),
           ],
         ),
-        padding: EdgeInsets.all(allPading),
+        padding: pading ?? EdgeInsets.all(allPading ?? 0),
         margin: margin,
         child: this,
       ),
@@ -90,7 +90,7 @@ extension ContainerExt on Widget {
       );
 }
 
-extension ImageExt on Image {
+extension ImageExt on Widget {
   Widget toCircle({required double borderRadius}) {
     return ClipRRect(
       clipBehavior: Clip.hardEdge,