feat: Write addProductsToCart mutation logic

Author: Sanjeev Yadav

src/apollo/mutations/addProductsToCart.ts

@@ -0,0 +1,43 @@
+import { gql } from '@apollo/client';
+
+export interface AddProductsToCartDataType {
+  addProductsToCart: {
+    cart: {
+      items: Array<{
+        id: string;
+        product: {
+          name: string;
+          sku: string;
+        };
+        quantity: number;
+      }>;
+    };
+  };
+}
+
+export interface AddProductsToCartVars {
+  cartId: string;
+  cartItems: Array<CartItemInputType>;
+}
+
+export interface CartItemInputType {
+  quantity: number;
+  sku: string;
+}
+
+export const ADD_PRODUCTS_TO_CART = gql`
+  mutation AddProductsToCart($cartId: String!, $cartItems: [CartItemInput!]!) {
+    addProductsToCart(cartId: $cartId, cartItems: $cartItems) {
+      cart {
+        items {
+          id
+          product {
+            name
+            sku
+          }
+          quantity
+        }
+      }
+    }
+  }
+`;

src/apollo/queries/getProductDetails.ts

@@ -19,13 +19,18 @@ export interface ProductDetailsType {
   id: number;
   sku: string;
   name: string;
+  type: ProductTypeEnum;
   description: {
     html: string;
   };
   price_range: PriceRangeType;
   media_gallery: Array<MediaGalleryItemType>;
 }
 
+export enum ProductTypeEnum {
+  SIMPLE = 'SimpleProduct',
+}
+
 export const GET_PRODUCT_DETAILS = gql`
   query GetProductDetails($sku: String) {
     products(filter: { sku: { eq: $sku } }) {
@@ -36,6 +41,7 @@ export const GET_PRODUCT_DETAILS = gql`
         description {
           html
         }
+        type: __typename
         price_range {
           maximum_price {
             final_price {

src/i18n/locales/en.json

@@ -49,7 +49,10 @@
   "productDetailsScreen": {
     "appbarTitle": "Product Details",
     "addToCart": "Add To Cart",
-    "guestUserPromptMessage": "In order to add product to cart, please login or create new account"
+    "guestUserPromptMessage": "In order to add product to cart, please login or create new account",
+    "productTypeNotSupported": "Currently only Simple products are supported",
+    "addToCartSuccessful": "Product added to cart",
+    "addToCartError": "Unable to add product to cart, something went wrong."
   },
   "productListScreen": {
     "appbarTitle": "Products"

src/logic/cart/useCart.ts

@@ -1,28 +1,73 @@
 import { useEffect } from 'react';
-import { useLazyQuery, useQuery } from '@apollo/client';
+import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
+import Toast from 'react-native-simple-toast';
 import {
   IsLoggedInDataType,
   IS_LOGGED_IN,
 } from '../../apollo/queries/isLoggedIn';
 import { GetCartDataType, GET_CART } from '../../apollo/queries/getCart';
+import {
+  AddProductsToCartDataType,
+  AddProductsToCartVars,
+  ADD_PRODUCTS_TO_CART,
+  CartItemInputType,
+} from '../../apollo/mutations/addProductsToCart';
+import { translate } from '../../i18n';
 
 interface Result {
-  data: GetCartDataType | undefined;
+  cartData: GetCartDataType | undefined;
+  loading: boolean;
+  isLoggedIn: boolean;
+  addProductsToCart(arg0: CartItemInputType): void;
 }
 
 export const useCart = (): Result => {
   const { data: { isLoggedIn = false } = {} } = useQuery<IsLoggedInDataType>(
     IS_LOGGED_IN,
   );
-  const [fetchCart, { data }] = useLazyQuery<GetCartDataType>(GET_CART);
+  const [fetchCart, { data: cartData }] = useLazyQuery<GetCartDataType>(
+    GET_CART,
+  );
+  const [_addProductsToCart, { loading, data }] = useMutation<
+    AddProductsToCartDataType,
+    AddProductsToCartVars
+  >(ADD_PRODUCTS_TO_CART, {
+    onCompleted() {
+      Toast.show(
+        translate('productDetailsScreen.addToCartSuccessful', Toast.LONG),
+      );
+    },
+    onError(_error) {
+      Toast.show(
+        translate(
+          _error.message || 'productDetailsScreen.addToCartError',
+          Toast.LONG,
+        ),
+      );
+    },
+  });
 
   useEffect(() => {
     if (isLoggedIn) {
       fetchCart();
     }
   }, [isLoggedIn]);
 
+  const addProductsToCart = (productToAdd: CartItemInputType) => {
+    if (isLoggedIn && cartData?.customerCart.id) {
+      _addProductsToCart({
+        variables: {
+          cartId: cartData.customerCart.id,
+          cartItems: [productToAdd],
+        },
+      });
+    }
+  };
+
   return {
-    data,
+    addProductsToCart,
+    isLoggedIn,
+    cartData,
+    loading,
   };
 };

src/screens/ProductDetailsScreen/ProductDetailsScreen.tsx

@@ -4,17 +4,15 @@ import { Text, ThemeContext, Button } from 'react-native-elements';
 import { RouteProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import HTML from 'react-native-render-html';
-import { useQuery } from '@apollo/client';
+import Toast from 'react-native-simple-toast';
 import { MediaGallery, GenericTemplate } from '../../components';
 import { SPACING } from '../../constants';
 import { AppStackParamList, Routes } from '../../navigation';
 import { useProductDetails } from '../../logic/products/useProductDetails';
 import { getPriceStringFromPriceRange, showLoginPrompt } from '../../logic';
 import { translate } from '../../i18n';
-import {
-  IsLoggedInDataType,
-  IS_LOGGED_IN,
-} from '../../apollo/queries/isLoggedIn';
+import { useCart } from '../../logic/cart/useCart';
+import { ProductTypeEnum } from '../../apollo/queries/getProductDetails';
 
 type Props = {
   navigation: StackNavigationProp<
@@ -34,28 +32,43 @@ const ProductDetailsScreen = ({
   },
 }: Props): React.ReactElement => {
   const {
-    getProductDetails,
-    productDetails,
-    loading,
     error,
+    loading,
+    productDetails,
+    getProductDetails,
   } = useProductDetails({
     sku,
   });
-  const { data } = useQuery<IsLoggedInDataType>(IS_LOGGED_IN);
+  const {
+    isLoggedIn,
+    addProductsToCart,
+    loading: addProductsToCartLoading,
+  } = useCart();
   const { theme } = useContext(ThemeContext);
 
   useEffect(() => {
     getProductDetails();
   }, []);
 
   const handleAddToCart = () => {
-    if (!data?.isLoggedIn) {
+    if (!isLoggedIn) {
       showLoginPrompt(
         translate('productDetailsScreen.guestUserPromptMessage'),
         navigation,
       );
       return;
     }
+
+    if (productDetails?.type === ProductTypeEnum.SIMPLE) {
+      addProductsToCart({
+        quantity: 1,
+        sku: productDetails.sku,
+      });
+    } else {
+      Toast.show(
+        translate('productDetailsScreen.productTypeNotSupported', Toast.LONG),
+      );
+    }
   };
 
   return (
@@ -65,6 +78,7 @@ const ProductDetailsScreen = ({
       errorMessage={error?.message}
       footer={
         <Button
+          loading={addProductsToCartLoading}
           containerStyle={styles.noBorderRadius}
           buttonStyle={styles.noBorderRadius}
           title={translate('productDetailsScreen.addToCart')}