Back in stock feature

libraries/engage/back-in-stock/actions/index.js

@@ -0,0 +1,113 @@
+import { PipelineRequest } from '@shopgate/engage/core';
+import {
+  ADD_BACK_IN_STOCK_SUBSCRIPTION,
+  ADD_BACK_IN_STOCK_SUBSCRIPTION_ERROR,
+  ADD_BACK_IN_STOCK_SUBSCRIPTION_SUCCESS,
+  FETCH_BACK_IN_STOCK_SUBSCRIPTIONS,
+  FETCH_BACK_IN_STOCK_SUBSCRIPTIONS_ERROR,
+  FETCH_BACK_IN_STOCK_SUBSCRIPTIONS_SUCCESS,
+  REMOVE_BACK_IN_STOCK_SUBSCRIPTION,
+  REMOVE_BACK_IN_STOCK_SUBSCRIPTION_ERROR,
+  REMOVE_BACK_IN_STOCK_SUBSCRIPTION_SUCCESS,
+} from '../constants';
+import {
+  SHOPGATE_USER_ADD_BACK_IN_STOCK_SUBSCRIPTION,
+  SHOPGATE_USER_DELETE_BACK_IN_STOCK_SUBSCRIPTION,
+  SHOPGATE_USER_GET_BACK_IN_STOCK_SUBSCRIPTIONS,
+} from '../constants/Pipelines';
+
+/**
+ * Fetch Back in Stock Subscriptions
+ * @returns {Function}
+ */
+export const fetchBackInStockSubscriptions = () => async (dispatch) => {
+  dispatch({ type: FETCH_BACK_IN_STOCK_SUBSCRIPTIONS });
+
+  try {
+    const { subscriptions } =
+      await new PipelineRequest(SHOPGATE_USER_GET_BACK_IN_STOCK_SUBSCRIPTIONS)
+        .setInput({
+          limit: 100,
+        })
+        .dispatch();
+
+    dispatch({
+      type: FETCH_BACK_IN_STOCK_SUBSCRIPTIONS_SUCCESS,
+      subscriptions,
+    });
+
+    return subscriptions;
+  } catch (error) {
+    dispatch({
+      type: FETCH_BACK_IN_STOCK_SUBSCRIPTIONS_ERROR,
+      error,
+    });
+
+    return null;
+  }
+};
+
+/**
+ * Add a Back in Stock Subscription
+ * @param {Object} props Props.
+ * @param {string} props.productId The product for which the subscription should be added
+ * @returns {Function}
+ */
+export const addBackInStockSubscription = ({ productId }) => async (dispatch) => {
+  dispatch({ type: ADD_BACK_IN_STOCK_SUBSCRIPTION });
+
+  try {
+    const { subscriptions } =
+      await new PipelineRequest(SHOPGATE_USER_ADD_BACK_IN_STOCK_SUBSCRIPTION)
+        .setInput({
+          productCode: productId,
+        })
+        .dispatch();
+
+    dispatch({
+      type: ADD_BACK_IN_STOCK_SUBSCRIPTION_SUCCESS,
+      subscriptions,
+    });
+    return subscriptions;
+  } catch (error) {
+    dispatch({
+      type: ADD_BACK_IN_STOCK_SUBSCRIPTION_ERROR,
+      error,
+    });
+
+    return null;
+  }
+};
+
+/**
+ * Remove a Back in Stock Subscription
+ * @param {Object} props Props.
+ * @param {string} props.subscriptionCode The subscription which should be deleted
+ * @returns {Function}
+ */
+export const removeBackInStockSubscription = ({ subscriptionCode }) => async (dispatch) => {
+  dispatch({ type: REMOVE_BACK_IN_STOCK_SUBSCRIPTION });
+
+  try {
+    const { subscriptions } =
+      await new PipelineRequest(SHOPGATE_USER_DELETE_BACK_IN_STOCK_SUBSCRIPTION)
+        .setInput({
+          subscriptionCode,
+        })
+        .dispatch();
+
+    dispatch({
+      type: REMOVE_BACK_IN_STOCK_SUBSCRIPTION_SUCCESS,
+      subscriptions,
+    });
+    return subscriptions;
+  } catch (error) {
+    dispatch({
+      type: REMOVE_BACK_IN_STOCK_SUBSCRIPTION_ERROR,
+      error,
+    });
+
+    return null;
+  }
+};
+

libraries/engage/back-in-stock/components/BackInStockButton/index.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { themeConfig } from '@shopgate/engage';
+import {
+  Link,
+  CheckedIcon,
+  NotificationIcon,
+} from '@shopgate/engage/components';
+import { BACK_IN_STOCK_PATTERN } from '@shopgate/engage/back-in-stock';
+import { i18n } from '@shopgate/engage/core';
+import styles from './style';
+
+const { colors } = themeConfig;
+/**
+ * This component renders a button to subscribe a product or a hint
+ * that the product is already subscribed
+ * @param {Object} props The component props
+ * @param {boolean} props.isLinkToBackInStockEnabled Whether the link to the back in
+ * stock page is active
+ * @param {Object} props.subscription The subscription
+ * @param {Function} props.onClick Action to subscribe the product
+ * @return {JSX}
+ */
+const BackInStockButton = ({
+  onClick,
+  isLinkToBackInStockEnabled = false,
+  subscription,
+}) => {
+  if (subscription?.status === 'active') {
+    return (
+      <Link
+        href={BACK_IN_STOCK_PATTERN}
+        disabled={!isLinkToBackInStockEnabled}
+        className={styles.backInStockMessageContainer}
+        tag="span"
+      >
+        <CheckedIcon color={colors.success} className={styles.icon} />
+        <span className={styles.backInStockMessage}>{i18n.text('back_in_stock.we_will_remind_you')}</span>
+      </Link>
+    );
+  }
+
+  return (
+    <div>
+      {/* eslint-disable-next-line max-len */}
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */}
+      <a role="button" onClick={onClick} className={styles.button}>
+        <div className={styles.buttonContent}>
+          <NotificationIcon color={colors.primary} />
+          <span className={styles.buttonText}>{i18n.text('back_in_stock.get_notified')}</span>
+        </div>
+      </a>
+    </div>);
+};
+
+BackInStockButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  isLinkToBackInStockEnabled: PropTypes.bool,
+  subscription: PropTypes.shape(),
+};
+
+BackInStockButton.defaultProps = {
+  isLinkToBackInStockEnabled: false,
+  subscription: null,
+};
+
+export default BackInStockButton;

libraries/engage/back-in-stock/components/BackInStockButton/style.js

@@ -0,0 +1,31 @@
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/engage';
+
+export default {
+  button: css({
+    color: themeConfig.colors.primary,
+  }).toString(),
+  buttonContent: css({
+    display: 'flex',
+    alignItems: 'center',
+  }).toString(),
+  backInStockMessageContainer: css({
+    display: 'inline',
+    alignItems: 'center',
+    textAlign: 'end',
+    lineHeight: '20px',
+  }).toString(),
+  backInStockMessage: css({
+    marginLeft: '4px',
+    verticalAlign: 'middle',
+    fontSize: '0.875rem',
+  }).toString(),
+  buttonText: css({
+    marginLeft: '4px',
+    fontSize: '0.875rem',
+  }).toString(),
+  icon: css({
+    verticalAlign: 'middle',
+    display: 'inline',
+  }).toString(),
+};

libraries/engage/back-in-stock/components/BackInStockButtonPortal/connector.js

@@ -0,0 +1,32 @@
+import { connect } from 'react-redux';
+import {
+  getIsBackInStockEnabled,
+  makeGetSubscriptionByProduct,
+} from '@shopgate/engage/back-in-stock';
+import { addBackInStockSubscription } from '@shopgate/engage/back-in-stock/actions';
+import {
+  getProductAvailability,
+  makeGetProductType,
+} from '@shopgate/engage/product';
+import { grantPushPermissions } from '@shopgate/engage/core';
+
+/**
+ * @return {Object} The extended component props.
+ */
+const makeMapStateToProps = () => {
+  const getProductType = makeGetProductType();
+  const getSubscriptionByProduct = makeGetSubscriptionByProduct();
+  return (state, props) => ({
+    subscription: getSubscriptionByProduct(state, props),
+    productType: getProductType(state, props),
+    stock: getProductAvailability(state, props),
+    isBackInStockEnabled: getIsBackInStockEnabled(state, props),
+  });
+};
+
+const mapDispatchToProps = {
+  addBackInStockSubscription,
+  grantPushPermissions,
+};
+
+export default connect(makeMapStateToProps, mapDispatchToProps);

libraries/engage/back-in-stock/components/BackInStockButtonPortal/index.jsx

@@ -0,0 +1,82 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Portal } from '@shopgate/engage/components';
+import { AVAILABILITY_STATE_OK } from '@shopgate/engage/product';
+import {
+  BackInStockButton,
+  PRODUCT_BACK_IN_STOCK,
+  PRODUCT_BACK_IN_STOCK_AFTER,
+  PRODUCT_BACK_IN_STOCK_BEFORE,
+} from '@shopgate/engage/back-in-stock';
+
+import { withCurrentProduct } from '@shopgate/engage/core';
+import connect from './connector';
+
+/**
+ * The BackInStockButtonPortal component.
+ * @param {Object} props The component props.
+ * @param {boolean} props.isBackInStockEnabled Whether the back in stock feature is enabled
+ * @param {string} props.productId The product id
+ * @param {string} props.variantId The variant id
+ * @param {string} props.productType The product type
+ * @param {Object} props.stock The product stock info
+ * @param {Function} props.addBackInStockSubscription Add product to back in stock list
+ * @param {Function} props.grantPushPermissions Request / Set push permission
+ * @param {Object} props.subscription The subscription
+ * @return {JSX}
+ */
+const BackInStockButtonPortal = ({
+  productType,
+  stock,
+  productId,
+  variantId,
+  addBackInStockSubscription,
+  isBackInStockEnabled,
+  grantPushPermissions,
+  subscription,
+}) => {
+  const showBackInStock = productType !== 'parent' &&
+    productType !== null &&
+    stock?.state !== AVAILABILITY_STATE_OK &&
+    isBackInStockEnabled;
+
+  return (
+    <Fragment>
+      <Portal name={PRODUCT_BACK_IN_STOCK_BEFORE} />
+      <Portal name={PRODUCT_BACK_IN_STOCK}>
+        {showBackInStock &&
+          <BackInStockButton
+            subscription={subscription}
+            isLinkToBackInStockEnabled
+            onClick={async () => {
+              const allowed = await grantPushPermissions();
+              if (allowed) {
+                addBackInStockSubscription({ productId: variantId ?? productId });
+              }
+            }}
+          />}
+      </Portal>
+      <Portal name={PRODUCT_BACK_IN_STOCK_AFTER} />
+    </Fragment>
+  );
+};
+
+BackInStockButtonPortal.propTypes = {
+  addBackInStockSubscription: PropTypes.func.isRequired,
+  grantPushPermissions: PropTypes.func.isRequired,
+  isBackInStockEnabled: PropTypes.bool.isRequired,
+  productId: PropTypes.string.isRequired,
+  productType: PropTypes.string,
+  stock: PropTypes.shape(),
+  subscription: PropTypes.shape(),
+  variantId: PropTypes.string,
+};
+
+BackInStockButtonPortal.defaultProps = {
+  subscription: null,
+  productType: null,
+  variantId: null,
+  stock: null,
+};
+
+export default withCurrentProduct(connect(BackInStockButtonPortal));

libraries/engage/back-in-stock/components/CharacteristicsButton/connector.js

@@ -0,0 +1,39 @@
+import { connect } from 'react-redux';
+import {
+  getIsBackInStockEnabled,
+  makeGetSubscriptionByCharacteristics,
+} from '@shopgate/engage/back-in-stock';
+import {
+  getVariantAvailabilityByCharacteristics,
+} from '@shopgate/pwa-common-commerce/product';
+import { addBackInStockSubscription } from '@shopgate/engage/back-in-stock/actions';
+import grantPushPermissions from '@shopgate/engage/core/actions/grantPushPermissions';
+import {
+  makeGetProductByCharacteristics,
+} from '@shopgate/engage/product';
+
+/**
+ * @return {Object} The extended component props.
+ */
+const makeMapStateToProps = () => {
+  const getProductByCharacteristics = makeGetProductByCharacteristics();
+  const getSubscriptionByCharacteristics = makeGetSubscriptionByCharacteristics();
+
+  return (state, props) => {
+    const variant = getProductByCharacteristics(state, props) || {};
+    return ({
+      variant,
+      availability: getVariantAvailabilityByCharacteristics(state, props),
+      subscription: getSubscriptionByCharacteristics(state, props),
+      isBackInStockEnabled: getIsBackInStockEnabled(state, props),
+    });
+  };
+};
+
+const mapDispatchToProps = {
+  addBackInStockSubscription,
+  grantPushPermissions,
+
+};
+
+export default connect(makeMapStateToProps, mapDispatchToProps);