Show QR Code Scan results

libraries/commerce/category/actions/fetchCategory.js

@@ -27,13 +27,13 @@ const fetchCategory = categoryId => (dispatch, getState) => {
       dispatch(fetchCategoryChildren(categoryId));
     }
 
-    return;
+    return Promise.resolve(category);
   }
 
   // No data at all. So we have the fetch the category with children included
   dispatch(requestCategory(categoryId));
 
-  new PipelineRequest(pipelines.SHOPGATE_CATALOG_GET_CATEGORY)
+  return new PipelineRequest(pipelines.SHOPGATE_CATALOG_GET_CATEGORY)
     .setInput({
       categoryId,
       includeChildren: true,

libraries/commerce/category/helpers/index.js

@@ -0,0 +1,10 @@
+import { bin2hex } from '@shopgate/pwa-common/helpers/data';
+import { CATEGORY_PATH } from '../constants';
+
+/**
+ * Generate category route for navigation.
+ * @param {string} id category Id
+ * @returns {string}
+ */
+export const getCategoryRoute = id => `${CATEGORY_PATH}/${bin2hex(id)}`;
+

libraries/commerce/category/index.js

@@ -15,3 +15,6 @@ export * from './selectors';
 
 // STREAMS
 export * from './streams';
+
+// HELPERS
+export * from './helpers';

libraries/commerce/category/selectors/index.js

@@ -14,6 +14,24 @@ const getCategoriesState = createSelector(
   state => state.categoriesById
 );
 
+/**
+ * Retrieves a category by id from state.
+ * @param {Object} state The current application state.
+ * @param {Object} props The component props.
+ * @return {Object|null} The category.
+ */
+export const getCategoryById = createSelector(
+  getCategoriesState,
+  (state, props) => props.categoryId,
+  (categoriesState, categoryId) => {
+    if (!categoriesState || !categoriesState[categoryId]) {
+      return null;
+    }
+
+    return categoriesState[categoryId];
+  }
+);
+
 /**
  * Retrieves the full category children collection from the state.
  * @param {Object} state The application state.

libraries/commerce/product/actions/fetchProductsById.js

@@ -19,7 +19,8 @@ const fetchProductsById = (productIds, componentId = null) => (dispatch, getStat
     return;
   }
 
-  dispatch(fetchProducts({
+  // eslint-disable-next-line consistent-return
+  return dispatch(fetchProducts({
     ...componentId && { id: componentId },
     params: {
       productIds: missingIds,

libraries/commerce/scanner/actions/handleBarCode.js

@@ -0,0 +1,36 @@
+import showModal from '@shopgate/pwa-common/actions/modal/showModal';
+import Scanner from '@shopgate/pwa-core/classes/Scanner';
+import { historyReplace } from '@shopgate/pwa-common/actions/router';
+import fetchProductsByQuery from '@shopgate/pwa-common-commerce/product/actions/fetchProductsByQuery';
+import { getProductRoute } from '@shopgate/pwa-common-commerce/product/helpers';
+import { getSearchRoute } from '@shopgate/pwa-common-commerce/search/helpers';
+
+/**
+ * Handle bar code
+ * @param {string} [payload=''] bar code payload
+ * @return {Function} A redux thunk.
+ */
+export default payload => async (dispatch) => {
+  const {
+    totalProductCount,
+    products,
+  } = await dispatch(fetchProductsByQuery(2, payload));
+
+  if (!totalProductCount) {
+    dispatch(showModal({
+      dismiss: null,
+      confirm: 'modal.ok',
+      title: 'modal.title_error',
+      message: 'scanner.noResult.barCode',
+    })).then(Scanner.start); // Continue scanning
+  } else if (Number(totalProductCount) === 1) {
+    dispatch(historyReplace({
+      pathname: getProductRoute(products[0].id),
+    }));
+  } else {
+    dispatch(historyReplace({
+      pathname: getSearchRoute(payload),
+    }));
+  }
+};
+

libraries/commerce/scanner/actions/handleBarCode.spec.js

@@ -0,0 +1,67 @@
+import Scanner from '@shopgate/pwa-core/classes/Scanner';
+import { historyReplace } from '@shopgate/pwa-common/actions/router';
+import showModal from '@shopgate/pwa-common/actions/modal/showModal';
+import fetchProductsByQuery from '@shopgate/pwa-common-commerce/product/actions/fetchProductsByQuery';
+import { getProductRoute } from '@shopgate/pwa-common-commerce/product/helpers';
+import { getSearchRoute } from '@shopgate/pwa-common-commerce/search/helpers';
+import handleBarCode from './handleBarCode';
+
+jest.mock('@shopgate/pwa-common/actions/router', () => ({
+  historyReplace: jest.fn(),
+}));
+jest.mock('@shopgate/pwa-common/actions/modal/showModal', () => (
+  jest.fn(options => Promise.resolve(options))
+));
+jest.mock('@shopgate/pwa-common-commerce/product/actions/fetchProductsByQuery');
+
+describe('handleBarCode', () => {
+  const dispatch = jest.fn(action => action);
+  const scannerStart = jest.spyOn(Scanner, 'start').mockImplementation(() => {});
+
+  const modalContent = {
+    dismiss: null,
+    confirm: 'modal.ok',
+    title: 'modal.title_error',
+    message: 'scanner.noResult.barCode',
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should show modal when products not found', async () => {
+    fetchProductsByQuery.mockResolvedValue({
+      totalProductCount: 0,
+    });
+
+    await handleBarCode('111111')(dispatch);
+    expect(fetchProductsByQuery).toHaveBeenCalledWith(2, '111111');
+    expect(showModal).toHaveBeenCalledWith(modalContent);
+    expect(scannerStart).toHaveBeenCalledTimes(1);
+  });
+
+  it('should navigate to PDP when 1 product is found', async () => {
+    fetchProductsByQuery.mockResolvedValue({
+      totalProductCount: 1,
+      products: [{ id: '222222' }],
+    });
+
+    await handleBarCode('222222')(dispatch);
+    expect(fetchProductsByQuery).toHaveBeenCalledWith(2, '222222');
+    expect(historyReplace).toHaveBeenCalledWith({
+      pathname: getProductRoute('222222'),
+    });
+  });
+
+  it('should navigate to search when more products are found', async () => {
+    fetchProductsByQuery.mockReturnValue(Promise.resolve({
+      totalProductCount: 2,
+    }));
+
+    await handleBarCode('333333')(dispatch);
+    expect(fetchProductsByQuery).toHaveBeenCalledWith(2, '333333');
+    expect(historyReplace).toHaveBeenCalledWith({
+      pathname: getSearchRoute('333333'),
+    });
+  });
+});

libraries/commerce/scanner/actions/handleQrCode.js

@@ -0,0 +1,92 @@
+import Scanner from '@shopgate/pwa-core/classes/Scanner';
+import { historyPop, historyReplace } from '@shopgate/pwa-common/actions/router';
+import { fetchPageConfig } from '@shopgate/pwa-common/actions/page';
+import { getPageConfigById } from '@shopgate/pwa-common/selectors/page';
+import showModal from '@shopgate/pwa-common/actions/modal/showModal';
+import { fetchProductsById, getProductById } from '@shopgate/pwa-common-commerce/product';
+import { fetchCategory, getCategoryById } from '@shopgate/pwa-common-commerce/category';
+import {
+  QR_CODE_TYPE_CATEGORY,
+  QR_CODE_TYPE_COUPON,
+  QR_CODE_TYPE_HOMEPAGE,
+  QR_CODE_TYPE_PAGE,
+  QR_CODE_TYPE_PRODUCT,
+  QR_CODE_TYPE_PRODUCT_WITH_COUPON,
+  QR_CODE_TYPE_SEARCH,
+} from '../constants';
+import { parse2dsQrCode } from '../helpers';
+
+/**
+ * Handle qr code
+ * @param {string} [payload=''] qr code payload
+ * @return {Function} A redux thunk.
+ */
+export default payload => async (dispatch, getState) => {
+  const { type, link, data } = parse2dsQrCode(payload) || {};
+  if (!type) {
+    return;
+  }
+
+  /** Show modal and continue scanning */
+  const notFound = () => {
+    dispatch(showModal({
+      dismiss: null,
+      confirm: 'modal.ok',
+      title: 'modal.title_error',
+      message: 'scanner.noResult.qrCode',
+    })).then(Scanner.start); // Continue scanning after modal dismiss
+  };
+
+  switch (type) {
+    case QR_CODE_TYPE_HOMEPAGE:
+    case QR_CODE_TYPE_SEARCH:
+      dispatch(historyReplace({
+        pathname: link,
+      }));
+      break;
+    case QR_CODE_TYPE_COUPON:
+      dispatch(historyPop({
+        pathname: link,
+      }));
+      break;
+    case QR_CODE_TYPE_PRODUCT:
+    case QR_CODE_TYPE_PRODUCT_WITH_COUPON:
+      // Force to fetch missing products
+      await dispatch(fetchProductsById([data.productId]));
+
+      // Check from a store
+      if (!getProductById(getState(), data)) {
+        notFound();
+      } else {
+        dispatch(historyReplace({
+          pathname: link,
+        }));
+      }
+      break;
+    case QR_CODE_TYPE_CATEGORY:
+      await dispatch(fetchCategory(data.categoryId));
+
+      if (!getCategoryById(getState(), data)) {
+        notFound();
+      } else {
+        dispatch(historyReplace({
+          pathname: link,
+        }));
+      }
+      break;
+    case QR_CODE_TYPE_PAGE:
+      // Force to fetch missing products
+      await dispatch(fetchPageConfig(data.pageId));
+
+      if (!getPageConfigById(getState(), data)) {
+        notFound();
+      } else {
+        dispatch(historyReplace({
+          pathname: link,
+        }));
+      }
+      break;
+    default:
+  }
+};
+