feat(snap-platforms)

packages/snap-platforms/bigCommerce/README.md

@@ -0,0 +1,30 @@
+# BigCommerce Platform
+This platform library gives you helper functions to use with the BigCommerce platform. 
+
+
+## Usage 
+To use the platform library, simply import what you wish to use from `@searchspring/snap-platforms/bigCommerce`.
+
+```jsx
+import { addToCart } from '@searchspring/snap-platforms/bigCommerce';
+
+export const Result = withController(observer((props) => {
+	const { controller, result } = props;
+
+    const config = {
+        idFieldName: `display.mappings.core.sku`,
+        callback: () => console.log('added to cart')
+    }
+
+    return (
+        <div onClick={() => addToCart([result], config)}>Add To Cart</div>
+    )
+}))
+```
+
+## AddToCart
+The `addToCart` function will automatically add products to the cart and then navigate to the cart page. The function takes an array of products (Result Store References) to add, and an optional config. The optional config can take two optional fields, a `callback` and `idFieldName`. 
+
+The `callback` setting takes a function to call after the products are added to the cart, this will get called rather than the automatic redirect to the cart page. 
+
+The `idFieldName` setting takes a stringified path in the result reference, to look for the product id to add. `display.mappings.core.sku` for example. By default it will use `display.mappings.core.uid`.

packages/snap-platforms/bigCommerce/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "snap-platforms-bigcommerce",
+	"private": true,
+	"description": "Snap BigCommerce Platform Library",
+	"main": "../dist/cjs/bigCommerce/src/index.js",
+	"module": "../dist/esm/bigCommerce/src/index.js",
+	"sideEffects": false
+}

packages/snap-platforms/bigCommerce/src/addToCart.test.ts

@@ -0,0 +1,200 @@
+import 'whatwg-fetch';
+import { addToCart } from './addToCart';
+import { Product } from '@searchspring/snap-store-mobx';
+import { MockClient } from '@searchspring/snap-shared';
+import { SearchStore } from '@searchspring/snap-store-mobx';
+import { UrlManager, QueryStringTranslator, reactLinker } from '@searchspring/snap-url-manager';
+import { EventManager } from '@searchspring/snap-event-manager';
+import { Profiler } from '@searchspring/snap-profiler';
+import { Logger } from '@searchspring/snap-logger';
+import { Tracker } from '@searchspring/snap-tracker';
+import { SearchController } from '@searchspring/snap-controller';
+
+const wait = (time = 1) => {
+	return new Promise((resolve) => {
+		setTimeout(resolve, time);
+	});
+};
+
+const urlManager = new UrlManager(new QueryStringTranslator(), reactLinker);
+const services = {
+	urlManager: urlManager,
+};
+let searchConfig = {
+	id: 'search',
+};
+
+const globals = { siteId: '8uyt2m' };
+const searchConfigDefault = {
+	id: 'search',
+	globals: {
+		filters: [],
+	},
+	settings: {},
+};
+let results: any;
+let controller: any;
+let errMock: any;
+
+// @ts-ignore
+const fetchMock = jest.spyOn(global, 'fetch').mockImplementation(() => Promise.resolve({ json: () => Promise.resolve([]), ok: true, status: 200 }));
+const root = 'http://localhost/remote/v1/cart/add';
+
+describe('addToCart', () => {
+	beforeAll(async () => {
+		searchConfig = { ...searchConfigDefault };
+		controller = new SearchController(searchConfig, {
+			client: new MockClient(globals, {}),
+			store: new SearchStore(searchConfig, services),
+			urlManager,
+			eventManager: new EventManager(),
+			profiler: new Profiler(),
+			logger: new Logger(),
+			tracker: new Tracker(globals),
+		});
+
+		await controller.search();
+
+		results = controller.store.results;
+
+		errMock = jest.spyOn(console, 'error').mockImplementation(() => {});
+	});
+
+	it('requires data to exist on the dom', () => {
+		// @ts-ignore
+		addToCart();
+
+		expect(fetchMock).not.toHaveBeenCalled();
+	});
+
+	it('adds data passed', () => {
+		const item = results[0] as Product;
+		addToCart([item]);
+
+		const obj = {
+			product_id: item.id,
+			quantity: item.quantity,
+			action: 'add',
+		};
+		const params = {
+			body: JSON.stringify(obj),
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+			method: 'POST',
+		};
+
+		expect(fetchMock).toHaveBeenCalledWith(root, params);
+
+		fetchMock.mockClear();
+	});
+
+	it('can add multiple quantities', () => {
+		const item = results[0] as Product;
+
+		item.quantity = 4;
+
+		addToCart([item]);
+
+		const obj = {
+			product_id: item.id,
+			quantity: 4,
+			action: 'add',
+		};
+
+		const params = {
+			body: JSON.stringify(obj),
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+			method: 'POST',
+		};
+
+		expect(fetchMock).toHaveBeenCalledWith(root, params);
+
+		fetchMock.mockClear();
+
+		item.quantity = 1;
+	});
+
+	it('can use alternate id column', () => {
+		const config = {
+			idFieldName: 'mappings.core.url',
+		};
+
+		const item = results[0] as Product;
+
+		addToCart([item], config);
+
+		const obj = {
+			product_id: item.mappings.core?.url,
+			quantity: item.quantity,
+			action: 'add',
+		};
+
+		const params = {
+			body: JSON.stringify(obj),
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+			method: 'POST',
+		};
+
+		expect(fetchMock).toHaveBeenCalledWith(root, params);
+
+		fetchMock.mockClear();
+	});
+
+	it('can pass a callback', async () => {
+		const cb = jest.fn();
+		const config = {
+			callback: cb,
+		};
+
+		const item = results[0] as Product;
+
+		addToCart([item], config);
+
+		const obj = {
+			product_id: item.id,
+			quantity: item.quantity,
+			action: 'add',
+		};
+		const params = {
+			body: JSON.stringify(obj),
+			credentials: 'same-origin',
+			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+			method: 'POST',
+		};
+
+		expect(fetchMock).toHaveBeenCalledWith(root, params);
+
+		await wait(10);
+
+		expect(cb).toHaveBeenCalled();
+
+		fetchMock.mockClear();
+	});
+
+	it('can add multiple items', async () => {
+		const items = results.slice(0, 3) as Product[];
+		addToCart(items);
+
+		for (let i = 0; i < items.length; i++) {
+			const obj = {
+				product_id: items[i].id,
+				quantity: items[i].quantity,
+				action: 'add',
+			};
+			const params = {
+				body: JSON.stringify(obj),
+				credentials: 'same-origin',
+				headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+				method: 'POST',
+			};
+
+			await wait(10);
+
+			expect(fetchMock).toHaveBeenCalledWith(root, params);
+		}
+
+		fetchMock.mockClear();
+	});
+});

packages/snap-platforms/bigCommerce/src/addToCart.ts

@@ -0,0 +1,110 @@
+import type { Product } from '@searchspring/snap-store-mobx';
+
+interface config {
+	callback?: () => void;
+	idFieldName?: string; //display.mappings.core.id
+}
+
+type formData = {
+	line_items: {
+		product_id: number;
+		quantity: number;
+	}[];
+};
+
+export const addToCart = async (data: Product[], config?: config) => {
+	const formData: formData = {
+		line_items: [],
+	};
+
+	if (!data) {
+		console.error('Error: no products to add');
+		return false;
+	}
+
+	data.map((item) => {
+		let id: any;
+		if (config?.idFieldName) {
+			let level: any = item;
+			config.idFieldName.split('.').map((field) => {
+				if (level[field]) {
+					level = level[field];
+				} else {
+					console.error('Error: couldnt find column in item data. please check your idFieldName is correct in the config.');
+					return false;
+				}
+			});
+			if (level && level !== item) {
+				id = level;
+			} else {
+				id = item.display.mappings.core?.uid;
+			}
+		} else {
+			id = item.display.mappings.core?.uid;
+		}
+		if (id && item.quantity) {
+			const obj = {
+				product_id: id,
+				quantity: item.quantity,
+			};
+
+			formData.line_items.push(obj);
+		}
+	});
+
+	//first check how many products we are adding
+	if (formData.line_items.length) {
+		for (let i = 0; i < formData.line_items.length; i++) {
+			await addSingleProductv1(formData.line_items[i]);
+		}
+	}
+
+	if (config?.callback) {
+		config.callback();
+	} else {
+		console.log('redirecting');
+		setTimeout(() => (window.location.href = '/cart.php'));
+	}
+};
+
+const addSingleProductv1 = async (item: { product_id: number; quantity: number }) => {
+	const endpoint = {
+		route: `/remote/v1/cart/add`,
+		method: 'POST',
+		accept: 'application/json',
+		content: 'application/json',
+		success: 200,
+	};
+
+	const resource = `${window.location.origin}${endpoint.route}`;
+
+	const init: any = {
+		method: endpoint.method,
+		credentials: 'same-origin',
+		headers: {
+			// note: no authorization
+			Accept: endpoint.accept,
+		},
+	};
+
+	if (item) {
+		init.headers['Content-Type'] = endpoint.content;
+		//clone item..
+		init.body = { ...item };
+		init.body['action'] = 'add';
+		init.body = JSON.stringify(init.body);
+	}
+
+	try {
+		const response = await fetch(resource, init);
+
+		if (response.status === endpoint.success) {
+			const jsonResponse = response.json();
+			return jsonResponse;
+		} else {
+			return new Error(`Error: Snap-platform-bigcommerce addToCart responded with ${response.status}, ${response}`);
+		}
+	} catch (err) {
+		console.error(err);
+	}
+};

packages/snap-platforms/bigCommerce/src/index.ts

@@ -0,0 +1 @@
+export * from './addToCart';

packages/snap-platforms/jest.config.js

@@ -0,0 +1,7 @@
+/* eslint-disable */
+const rootConfig = require('../../jest.base.config.json');
+module.exports = {
+	...rootConfig,
+	displayName: 'snap-toolbox',
+	roots: ['<rootDir>/bigCommerce/src', '<rootDir>/magento2/src', '<rootDir>/shopify/src'],
+};