feat: Fetch cart items and display in CartScreen

Author: Sanjeev Yadav

src/apollo/queries/cartItemsFragment.ts

@@ -0,0 +1,41 @@
+import { gql } from '@apollo/client';
+
+export interface CartItemType {
+  id: number;
+  product: {
+    sku: string;
+    name: string;
+    small_image: {
+      url: String;
+    };
+  };
+  prices: {
+    rowTotal: {
+      currency: string;
+      value: number;
+    };
+  };
+  quantity: number;
+}
+
+export const CART_ITEMS_FRAGMENT = gql`
+  fragment CartItemsFragment on Cart {
+    items {
+      id
+      prices {
+        rowTotal: row_total {
+          currency
+          value
+        }
+      }
+      product {
+        name
+        sku
+        small_image {
+          url
+        }
+      }
+      quantity
+    }
+  }
+`;

src/apollo/queries/getCart.ts

@@ -1,19 +1,35 @@
 import { gql } from '@apollo/client';
+import { CartItemType, CART_ITEMS_FRAGMENT } from './cartItemsFragment';
 
 export interface GetCartDataType {
   customerCart: CartType;
 }
 
 export interface CartType {
   id: string;
+  items: Array<CartItemType>;
+  prices: {
+    grandTotal: {
+      value: number;
+      currency: string;
+    };
+  };
   totalQuantity: number;
 }
 
 export const GET_CART = gql`
   query GetCart {
     customerCart {
       id
+      ...CartItemsFragment
+      prices {
+        grandTotal: grand_total {
+          value
+          currency
+        }
+      }
       totalQuantity: total_quantity
     }
   }
+  ${CART_ITEMS_FRAGMENT}
 `;

src/components/ProductListItem/ProductListItem.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { Text, Image, ThemeContext } from 'react-native-elements';
 import { ProductInListType } from '../../apollo/queries/productsFragment';
-import { getPriceStringFromPriceRange } from '../../logic';
+import { formatPrice } from '../../logic';
 import { DIMENS } from '../../constants';
 
 interface Props {
@@ -45,7 +45,7 @@ const ProductListItem = ({
         {renderImage()}
         <Text style={styles.name}>{item.name}</Text>
         <Text style={styles.price}>
-          {getPriceStringFromPriceRange(item.price_range)}
+          {formatPrice(item.price_range.maximum_price.final_price)}
         </Text>
       </View>
     </TouchableOpacity>

src/constants/dimens.ts

@@ -17,6 +17,10 @@ const DIMENS = Object.freeze({
     borderWidth: moderateScale(StyleSheet.hairlineWidth),
     appbarIconSize: moderateScale(23),
   },
+  cartScreen: {
+    imageSize: moderateScale(100),
+    totalPriceFontSize: moderateScale(16),
+  },
   categoryListItem: {
     imageWidth: moderateScale(70),
     imageHeight: moderateScale(70),

src/i18n/locales/en.json

@@ -22,6 +22,9 @@
     "lastName": "Last Name",
     "register": "Register",
     "logout": "Logout",
+    "quantity": "Qty",
+    "price": "price",
+    "total": "Total",
     "pluralizationExample": {
       "one": "You have 1 item",
       "other": "You have %{count} items",
@@ -33,7 +36,10 @@
   },
   "cartScreen": {
     "appbarTitle": "Cart",
-    "guestUserPromptMessage": "In order to view cart, please login or create new account"
+    "guestUserPromptMessage": "In order to view cart, please login or create new account",
+    "cartEmptyTitle": "Hey, it feels so light!",
+    "cartEmptyMessage": "There is nothing in your bag. Let's add some items.",
+    "placeOrderButton": "Place Order"
   },
   "categoriesScreen": {
     "appbarTitle": "Category"

src/logic/cart/useCart.ts

@@ -1,5 +1,10 @@
 import { useEffect } from 'react';
-import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
+import {
+  ApolloError,
+  useLazyQuery,
+  useMutation,
+  useQuery,
+} from '@apollo/client';
 import Toast from 'react-native-simple-toast';
 import {
   IsLoggedInDataType,
@@ -16,7 +21,9 @@ import { translate } from '../../i18n';
 
 interface Result {
   cartData: GetCartDataType | undefined;
-  loading: boolean;
+  cartLoading: boolean;
+  cartError: ApolloError | undefined;
+  addToCartLoading: boolean;
   isLoggedIn: boolean;
   addProductsToCart(arg0: CartItemInputType): void;
 }
@@ -25,10 +32,11 @@ export const useCart = (): Result => {
   const { data: { isLoggedIn = false } = {} } = useQuery<IsLoggedInDataType>(
     IS_LOGGED_IN,
   );
-  const [fetchCart, { data: cartData }] = useLazyQuery<GetCartDataType>(
-    GET_CART,
-  );
-  const [_addProductsToCart, { loading, data }] = useMutation<
+  const [
+    fetchCart,
+    { data: cartData, loading: cartLoading, error: cartError },
+  ] = useLazyQuery<GetCartDataType>(GET_CART);
+  const [_addProductsToCart, { loading: addToCartLoading, data }] = useMutation<
     AddProductsToCartDataType,
     AddProductsToCartVars
   >(ADD_PRODUCTS_TO_CART, {
@@ -68,6 +76,8 @@ export const useCart = (): Result => {
     addProductsToCart,
     isLoggedIn,
     cartData,
-    loading,
+    cartLoading,
+    cartError,
+    addToCartLoading,
   };
 };

src/logic/utils/price.test.ts

@@ -1,7 +1,4 @@
-import {
-  getCurrencySymbolFromCode,
-  getPriceStringFromPriceRange,
-} from './price';
+import { getCurrencySymbolFromCode, formatPrice } from './price';
 import { currencySymbols } from '../../../magento.config';
 
 describe('price.js', () => {
@@ -31,23 +28,19 @@ describe('price.js', () => {
     });
   });
 
-  describe('getPriceStringFromPriceRange()', () => {
+  describe('formatPrice()', () => {
     test('should return correct string', () => {
       // Setup
       const currencyCode = 'USD';
-      const price = 29.99;
-      const priceRange = {
-        maximum_price: {
-          final_price: {
-            currency: currencyCode,
-            value: price,
-          },
-        },
+      const value = 29.99;
+      const price = {
+        currency: currencyCode,
+        value,
       };
-      const expectedResult = `${currencySymbols[currencyCode]} ${price}`;
+      const expectedResult = `${currencySymbols[currencyCode]} ${value}`;
 
       // Exercise
-      const result = getPriceStringFromPriceRange(priceRange);
+      const result = formatPrice(price);
 
       // Verify
       expect(result).toBe(expectedResult);

src/logic/utils/price.ts

@@ -1,14 +1,13 @@
 import { currencySymbols } from '../../../magento.config';
-import { PriceRangeType } from '../../apollo/queries/getCategoryProducts';
 
 export const getCurrencySymbolFromCode = (currencyCode: string) => {
   return currencySymbols[currencyCode] ?? currencyCode;
 };
 
-export const getPriceStringFromPriceRange = (
-  priceRange: PriceRangeType,
-): string => {
-  return `${getCurrencySymbolFromCode(
-    priceRange.maximum_price.final_price.currency,
-  )} ${priceRange.maximum_price.final_price.value}`;
-};
+export const formatPrice = ({
+  currency,
+  value,
+}: {
+  currency: string;
+  value: number;
+}): string => `${getCurrencySymbolFromCode(currency)} ${value}`;

src/screens/CartScreen/CartFooter.tsx

@@ -0,0 +1,58 @@
+import React, { useContext, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button, Text, ThemeContext } from 'react-native-elements';
+import { DIMENS, SPACING } from '../../constants';
+import { translate } from '../../i18n';
+import { formatPrice } from '../../logic';
+
+type Props = {
+  grandTotal?: {
+    currency: string;
+    value: number;
+  };
+  handlePlaceOrder(): void;
+};
+
+export const CartFooter = ({
+  grandTotal,
+  handlePlaceOrder,
+}: Props): React.ReactElement => {
+  const { theme } = useContext(ThemeContext);
+  const containerStyle = useMemo(
+    () => ({
+      backgroundColor: theme.colors?.white,
+      borderColor: theme.colors?.divider,
+    }),
+    [theme],
+  );
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {grandTotal && (
+        <Text h4 h4Style={styles.totalPrice}>{`${translate(
+          'common.total',
+        )} : ${formatPrice(grandTotal)}`}</Text>
+      )}
+      <Button
+        containerStyle={styles.placeOrder}
+        title={translate('cartScreen.placeOrderButton')}
+        onPress={handlePlaceOrder}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: SPACING.small,
+    borderTopWidth: DIMENS.common.borderWidth,
+  },
+  totalPrice: {
+    fontSize: DIMENS.cartScreen.totalPriceFontSize,
+  },
+  placeOrder: {
+    flex: 1,
+    marginStart: SPACING.large,
+  },
+});

src/screens/CartScreen/CartListItem.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Image, ListItem } from 'react-native-elements';
+import { translate } from '../../i18n';
+import { DIMENS } from '../../constants';
+import { CartItemType } from '../../apollo/queries/cartItemsFragment';
+import { formatPrice } from '../../logic';
+
+type Props = {
+  item: CartItemType;
+  index: number;
+  onPress(arg0: number): void;
+  onRemovePress(arg0: Number): void;
+};
+
+const CartListItem = ({
+  item,
+  index,
+  onPress,
+  onRemovePress,
+}: Props): React.ReactElement => {
+  const renderImage = () => {
+    const uri = `${item.product.small_image.url}?width=${DIMENS.cartScreen.imageSize}`;
+    return <Image source={{ uri }} style={styles.image} />;
+  };
+
+  return (
+    <ListItem onPress={() => onPress(index)} bottomDivider>
+      {renderImage()}
+      <ListItem.Content>
+        <ListItem.Title>{item.product.name}</ListItem.Title>
+        <ListItem.Subtitle>{`${translate('common.quantity')} : ${
+          item.quantity
+        }`}</ListItem.Subtitle>
+        <ListItem.Subtitle>{`${translate('common.price')} : ${formatPrice(
+          item.prices.rowTotal,
+        )}`}</ListItem.Subtitle>
+      </ListItem.Content>
+      <ListItem.Chevron name="delete" onPress={() => onRemovePress(index)} />
+    </ListItem>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    height: DIMENS.cartScreen.imageSize,
+    width: DIMENS.cartScreen.imageSize,
+  },
+});
+
+export default CartListItem;