Merge pull request #8 from Shchoholiev/feature/SA-169-Add-cart-page-to-Mobile-App

Feature/sa 169 add cart page to mobile app

lib/main.dart

@@ -25,7 +25,6 @@ class MyApp extends StatefulWidget {
   static const Color _selectedColor = Color.fromRGBO(36, 36, 36, 1);
   static const Color _unselectedColor = Color.fromRGBO(144, 144, 144, 1);
 
-  @override
   State<MyApp> createState() => _MyAppState();
 }
 
@@ -109,9 +108,13 @@ class _MyAppState extends State<MyApp> {
   }
 }
 
+
+
+
+
 // Use to seed wishlists for new user
 // final ApiClient client = ApiClient();
-
+//
 // const String startPersonalWishlistMutations = r'''
 //   mutation startPersonalWishlist($dto: WishlistCreateDtoInput!) {
 //   startPersonalWishlist(dto: $dto) {

lib/models/product.dart

@@ -0,0 +1,25 @@
+class Product {
+    Product({
+        required this.id,
+        required this.name,
+        required this.url,
+        required this.imageUrls,
+        required this.rating,
+        required this.price
+});
+
+    String id;
+    String name;
+    String url;
+    List<String> imageUrls;
+    double rating;
+    double price;
+
+    Product.fromJson(Map<String, dynamic> json)
+        : id = json['id'] as String,
+          name = json['name'] as String,
+          url = json['url'] as String,
+          imageUrls = json['imageUrls'] as List<String>,
+          rating = json['rating'] as double,
+          price = json['name'] as double;
+}

lib/screens/cart.dart

@@ -0,0 +1,225 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:graphql/client.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:shopping_assistant_mobile_client/models/product.dart';
+import 'package:shopping_assistant_mobile_client/network/api_client.dart';
+
+
+class CartScreen extends StatefulWidget {
+  CartScreen({super.key, required this.wishlistId});
+
+  final String wishlistId;
+
+  @override
+  State<CartScreen> createState() => _CartScreenState(wishlistId: wishlistId);
+}
+
+class _CartScreenState extends State<CartScreen> {
+  _CartScreenState({required this.wishlistId});
+
+  var client = ApiClient();
+
+  final String wishlistId;
+
+  late Future _productsFuture;
+  late List<Product> _products;
+
+  @override
+  void initState(){
+    super.initState();
+    _productsFuture = _fetchProducts();
+  }
+
+  Future _fetchProducts() async {
+    const String productsPageFromPersonalWishlistQuery = r'''
+    query ProductsPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
+      productsPageFromPersonalWishlist(
+        wishlistId: $wishlistId,
+        pageNumber: $pageNumber,
+        pageSize: $pageSize
+    ) {
+        items {
+            id
+            url
+            name
+            rating
+            price
+            imagesUrls
+        }
+    }
+}''';
+
+    QueryOptions queryOptions = QueryOptions(
+        document: gql(productsPageFromPersonalWishlistQuery),
+        variables: <String, dynamic>{
+          'wishlistId': wishlistId,
+          'pageNumber': 1,
+          'pageSize': 10,
+        });
+
+    var result = await client.query(queryOptions);
+    print(result);
+
+    _products = List<Map<String, dynamic>>.from(
+        result?['productsPageFromPersonalWishlist']['items'])
+      .map((e) => Product.fromJson(e))
+      .toList();
+
+    return;
+  }
+
+  @override
+  Widget build(BuildContext context){
+    return FutureBuilder(
+        future: _productsFuture,
+        builder: (context, snapshot) {
+      if (snapshot.hasError) {
+        return Center(
+          child: Text('Error: ${snapshot.error}'),
+        );
+      } else if (snapshot.connectionState == ConnectionState.done) {
+        // Data loaded successfully, display the widget
+        return Scaffold(
+          appBar: AppBar(
+            title: Text("Cart"),
+            centerTitle: true,
+            leading: IconButton(
+              icon: Icon(Icons.arrow_back),
+              onPressed: () {
+                Navigator.pop(context);
+              },
+            ),
+          ),
+          body: _products.length == 0 ?
+            Center(child: Text("The cart is empty", style: TextStyle(fontSize: 18),),)
+            : ListView.builder(
+              padding: EdgeInsets.symmetric(vertical: 30),
+              itemCount: _products.length,
+              itemBuilder: (context, index){
+                return CartItem(product: _products[index]);
+              }
+            ),
+          backgroundColor: Colors.white,
+        );
+      };
+
+      return Center(
+        child: CircularProgressIndicator(),
+      );
+    }
+    );
+  }
+}
+
+class CartItem extends StatelessWidget{
+  CartItem({
+    super.key,
+    required Product product,
+}) : _product = product;
+
+  final Product _product;
+
+
+  Widget _buildRatingStar(int index) {
+    int whole = _product.rating.floor().toInt();
+    double fractional = _product.rating - whole;
+
+    if (index < whole) {
+      return Icon(Icons.star, color: Colors.yellow[600], size: 20);
+    }
+    if (fractional >= 0.25 && fractional <= 0.75) {
+      return Icon(Icons.star_half, color: Colors.yellow[600], size: 20);
+    }
+    if (fractional > 0.75) {
+      return Icon(Icons.star, color: Colors.yellow[600], size: 20);
+    }else {
+      return Icon(Icons.star_border, color: Colors.grey, size: 20);
+    }
+  }
+
+  List<Widget> _buildRatingStars() {
+    List<Widget> stars = [];
+    for (int i = 0; i < 5; i++) {
+      stars.add(_buildRatingStar(i));
+    }
+    return stars;
+  }
+
+
+  Future<void> _launchUrl(String url) async {
+    final Uri uri = Uri.parse(url);
+    if (!await launchUrl(uri)) throw 'Could not launch $url';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      height: 140,
+      margin: EdgeInsets.all(10),
+      padding: EdgeInsets.all(10),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.5),
+              spreadRadius: 2,
+              blurRadius: 2,
+              offset: Offset(1, 2),
+            )
+          ]
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
+          Container(
+            width: 100,
+            alignment: Alignment.center,
+            child: Image(image: NetworkImage(_product.imageUrls[0]),),
+          ),
+          SizedBox(width: 20),
+          Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    _product.name,
+                    style: const TextStyle(fontSize: 13),
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 3,
+                  ),
+                  Row(
+                    children: [
+                      Row(
+                        children: <Widget>[
+                          Text(_product.rating.toStringAsFixed(1), style: TextStyle(fontSize: 14))
+                        ] + _buildRatingStars(),
+                      ),
+                      Text("\$" + _product.price.toStringAsFixed(2), style: TextStyle(fontSize: 14)),
+                    ],
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  ),
+                  Container(
+                    width: double.infinity,
+                    height: 35,
+                    child: ElevatedButton.icon(
+                      onPressed: () => _launchUrl(_product.url),
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: Colors.blue,
+                        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                      ),
+                      icon: SvgPicture.asset("../assets/icons/amazon.svg", height: 15),
+                      label: Text(""),
+                    ),
+                  )
+                ],
+              )
+          )
+        ],
+      ),
+    );
+  }
+}

lib/screens/wishlists.dart

@@ -3,6 +3,7 @@ import 'package:flutter_svg/svg.dart';
 import 'package:graphql/client.dart';
 import 'package:shopping_assistant_mobile_client/models/wishlist.dart';
 import 'package:shopping_assistant_mobile_client/network/api_client.dart';
+import 'package:shopping_assistant_mobile_client/screens/cart.dart';
 
 import 'chat.dart';
 
@@ -264,7 +265,7 @@ class _WishlistItemState extends State<WishlistItem> {
                           context,
                           MaterialPageRoute(
                               builder: (context) =>
-                                  Text('Cart ' + widget._wishlist.id)))),
+                                  CartScreen(wishlistId: widget._wishlist.id)))),
                       behavior: HitTestBehavior.opaque,
                       child: Container(
                         padding: EdgeInsets.symmetric(

pubspec.lock

@@ -53,10 +53,10 @@ packages:
     dependency: transitive
     description:
       name: connectivity_plus
-      sha256: b502a681ba415272ecc41400bd04fe543ed1a62632137dc84d25a91e7746f55f
+      sha256: "224a77051d52a11fbad53dd57827594d3bd24f945af28bd70bab376d68d437f0"
       url: "https://pub.dev"
     source: hosted
-    version: "5.0.1"
+    version: "5.0.2"
   connectivity_plus_platform_interface:
     dependency: transitive
     description:
@@ -85,10 +85,10 @@ packages:
     dependency: transitive
     description:
       name: dbus
-      sha256: "6f07cba3f7b3448d42d015bfd3d53fe12e5b36da2423f23838efc1d5fb31a263"
+      sha256: "365c771ac3b0e58845f39ec6deebc76e3276aa9922b0cc60840712094d9047ac"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.8"
+    version: "0.7.10"
   fake_async:
     dependency: transitive
     description:
@@ -134,6 +134,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.3"
+  flutter_spinkit:
+    dependency: "direct main"
+    description:
+      name: flutter_spinkit
+      sha256: b39c753e909d4796906c5696a14daf33639a76e017136c8d82bf3e620ce5bb8e
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.2.0"
   flutter_svg:
     dependency: "direct main"
     description:
@@ -156,50 +164,50 @@ packages:
     dependency: transitive
     description:
       name: gql
-      sha256: e5225e3be4d7eb4027406ab07cb68ad3a089deb3f7f6dc46edbdec78f2e5549f
+      sha256: aa3e0be4548353007b6e6fd24fcad0ce8c1179f9cb2ae5239d392fddb84a5ce5
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.1-alpha+1696717343881"
+    version: "1.0.1-alpha+1700868214564"
   gql_dedupe_link:
     dependency: transitive
     description:
       name: gql_dedupe_link
-      sha256: "79625bc8029755ce6b26483adf0255c6b6114acc56e7ef81469a99f1ce2296db"
+      sha256: e97e3f9490add43ba96cf5cc02d9d10a3723965c0bcc7bb1e04ef4f2e7a31a00
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.4-alpha+1696717344020"
+    version: "2.0.4-alpha+1700868214643"
   gql_error_link:
     dependency: transitive
     description:
       name: gql_error_link
-      sha256: bfdb543137da89448cc5d003fd029c2e8718931d39d4a7dedb16f9169862fbb9
+      sha256: "93901458f3c050e33386dedb0ca7173e08cebd7078e4e0deca4bf23ab7a71f63"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0"
+    version: "1.0.0+1"
   gql_exec:
     dependency: transitive
     description:
       name: gql_exec
-      sha256: da419a3ebaae7672ed662c42d754ffba996347af7fe0ca031f1dd699334994d8
+      sha256: "394944626fae900f1d34343ecf2d62e44eb984826189c8979d305f0ae5846e38"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.1-alpha+1696717343896"
+    version: "1.1.1-alpha+1699813812660"
   gql_http_link:
     dependency: transitive
     description:
       name: gql_http_link
-      sha256: "0789d397d46ce274942fcc73e18a080cd2584296dadc33d8ae53d0666d7fe981"
+      sha256: "1f922eed1b7078fdbfd602187663026f9f659fe9a9499e2207b5d5e01617f658"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.1"
+    version: "1.0.1+1"
   gql_link:
     dependency: transitive
     description:
       name: gql_link
-      sha256: bcbb09ae8b200f413aa2d21fbf6ce4c4ac1ac443e81c612f29ef1587f4c84122
+      sha256: "48dbf63b4831d800a2ce9675c9fecea3c9f2801de92072c7644a4bc52aa26c13"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.1-alpha+1696717343909"
+    version: "1.0.1-alpha+1700868214578"
   gql_transform_link:
     dependency: transitive
     description:
@@ -272,6 +280,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
+  logger:
+    dependency: "direct main"
+    description:
+      name: logger
+      sha256: "6bbb9d6f7056729537a4309bda2e74e18e5d9f14302489cc1e93f33b3fe32cac"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2+1"
   matcher:
     dependency: transitive
     description:
@@ -396,10 +412,10 @@ packages:
     dependency: transitive
     description:
       name: plugin_platform_interface
-      sha256: da3fdfeccc4d4ff2da8f8c556704c08f912542c5fb3cf2233ed75372384a034d
+      sha256: f4f88d4a900933e7267e2b353594774fc0d07fb072b47eedcd5b54e1ea3269f8
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.6"
+    version: "2.1.7"
   rxdart:
     dependency: transitive
     description:
@@ -525,6 +541,70 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.2"
+  url_launcher:
+    dependency: "direct main"
+    description:
+      name: url_launcher
+      sha256: e9aa5ea75c84cf46b3db4eea212523591211c3cf2e13099ee4ec147f54201c86
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.2.2"
+  url_launcher_android:
+    dependency: transitive
+    description:
+      name: url_launcher_android
+      sha256: "31222ffb0063171b526d3e569079cf1f8b294075ba323443fdc690842bfd4def"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.2.0"
+  url_launcher_ios:
+    dependency: transitive
+    description:
+      name: url_launcher_ios
+      sha256: bba3373219b7abb6b5e0d071b0fe66dfbe005d07517a68e38d4fc3638f35c6d3
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.2.1"
+  url_launcher_linux:
+    dependency: transitive
+    description:
+      name: url_launcher_linux
+      sha256: "9f2d390e096fdbe1e6e6256f97851e51afc2d9c423d3432f1d6a02a8a9a8b9fd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0"
+  url_launcher_macos:
+    dependency: transitive
+    description:
+      name: url_launcher_macos
+      sha256: b7244901ea3cf489c5335bdacda07264a6e960b1c1b1a9f91e4bc371d9e68234
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0"
+  url_launcher_platform_interface:
+    dependency: transitive
+    description:
+      name: url_launcher_platform_interface
+      sha256: "980e8d9af422f477be6948bdfb68df8433be71f5743a188968b0c1b887807e50"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  url_launcher_web:
+    dependency: transitive
+    description:
+      name: url_launcher_web
+      sha256: "7fd2f55fe86cea2897b963e864dc01a7eb0719ecc65fcef4c1cc3d686d718bb2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
+  url_launcher_windows:
+    dependency: transitive
+    description:
+      name: url_launcher_windows
+      sha256: "7754a1ad30ee896b265f8d14078b0513a4dba28d358eabb9d5f339886f4a1adc"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0"
   uuid:
     dependency: "direct main"
     description:
@@ -585,10 +665,10 @@ packages:
     dependency: transitive
     description:
       name: win32
-      sha256: "350a11abd2d1d97e0cc7a28a81b781c08002aa2864d9e3f192ca0ffa18b06ed3"
+      sha256: b0f37db61ba2f2e9b7a78a1caece0052564d1bc70668156cf3a29d676fe4e574
       url: "https://pub.dev"
     source: hosted
-    version: "5.0.9"
+    version: "5.1.1"
   xdg_directories:
     dependency: transitive
     description:
@@ -615,4 +695,4 @@ packages:
     version: "3.1.2"
 sdks:
   dart: ">=3.1.4 <4.0.0"
-  flutter: ">=3.7.0"
+  flutter: ">=3.13.0"

pubspec.yaml

@@ -32,6 +32,7 @@ dependencies:
     sdk: flutter
   flutter_spinkit: ^5.0.0
   logger: ^2.0.2+1
+  url_launcher: ^6.0.12
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.