Add to cart

Author: imranhsayed

src/components/cart/add-to-cart.js

@@ -2,6 +2,8 @@ import { isEmpty } from 'lodash';
 
 import axios from 'axios';
 import { ADD_TO_CART_ENDPOINT } from '../../utils/constants/endpoints';
+import { getSession, storeSession } from '../../utils/cart/session';
+import { getAddOrViewCartConfig, getAddToCartConfig } from '../../utils/cart/api';
 
 const AddToCart = ( { product } ) => {
 
@@ -10,18 +12,19 @@ const AddToCart = ( { product } ) => {
 	}
 
 	const addToCart = ( productId, qty = 1 ) => {
-		axios.post( 'http://localhost:8888/wp-json/rae/v1/cart/items/', {
+		const storedSession = getSession();
+		const addOrViewCartConfig = getAddOrViewCartConfig();
+		axios.post( ADD_TO_CART_ENDPOINT, {
 				product_id: productId,
 				quantity: qty,
 			},
-			{
-				withCredentials: true,
-				headers: {
-					'X-Headless-CMS': true,
-				},
-			} )
+			addOrViewCartConfig,
+		)
 			.then( ( res ) => {
-				console.log( 'card added', res );
+				
+				if ( ! isEmpty( storedSession ) ) {
+					storeSession( res?.headers?.[ 'x-wc-session' ] );
+				}
 				viewCart();
 			} )
 			.catch( err => {
@@ -30,12 +33,8 @@ const AddToCart = ( { product } ) => {
 	};
 
 	const viewCart = () => {
-		axios.get( 'http://localhost:8888/wp-json/rae/v1/cart/items/', {
-			withCredentials: true,
-			headers: {
-				'X-Headless-CMS': true,
-			},
-		} )
+		const addOrViewCartConfig = getAddOrViewCartConfig();
+		axios.get( ADD_TO_CART_ENDPOINT, addOrViewCartConfig )
 			.then( ( res ) => {
 				console.log( 'res', res );
 			} )
@@ -46,8 +45,10 @@ const AddToCart = ( { product } ) => {
 
 
 	return (
-		<button className="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow" onClick={ () => addToCart( product?.id ) }>Add to cart</button>
+		<button
+			className="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow"
+			onClick={ () => addToCart( product?.id ) }>Add to cart</button>
 	);
-}
+};
 
-export default AddToCart
+export default AddToCart;

src/utils/cart/api.js

@@ -0,0 +1,19 @@
+import { getSession } from './session';
+import { isEmpty } from 'lodash';
+
+export const getAddOrViewCartConfig = () => {
+	
+	const config = {
+		headers: {
+			'X-Headless-CMS': true,
+		},
+	}
+	
+	const storedSession = getSession();
+	
+	if ( !isEmpty( storedSession ) ) {
+		config.headers['x-wc-session'] = storedSession;
+	}
+	
+	return config;
+}

src/utils/cart/session.js

@@ -0,0 +1,14 @@
+import { isEmpty } from 'lodash';
+
+export const storeSession = ( session ) => {
+	
+	if ( isEmpty( session ) ) {
+		return null;
+	}
+	
+	localStorage.setItem( 'x-wc-session', session );
+}
+
+export const getSession = () => {
+	return localStorage.getItem( 'x-wc-session' );
+}