@shopgate/engage/locations/components/StockInfoLists/index.js

Shopgate's ENGAGE library.

import React from 'react';
import { css } from 'glamor';
import { connect } from 'react-redux';
import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
import PropTypes from 'prop-types';
import { getPreferredLocation, makeGetLocationInventory } from "../../selectors";
import { I18n, SurroundPortals } from "../../../components";
import { StockInfo } from "../StockInfo";
import { PRODUCT_LOCATION_STOCK_INFO_LIST } from "../../constants/Portals";
import { showInventoryInLists } from "../../helpers/showInventoryInLists";

/**
 * Creates a mapper for redux.
 * @returns {Function}
 *
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const makeMapStateToProps = () => {
  const getInventory = makeGetLocationInventory((_, props) => getPreferredLocation(_, props)?.code, (_, props) => props.productId || props.product?.id);
  return (state, props) => ({
    inventory: getInventory(state, props),
    preferredLocation: getPreferredLocation(state, props),
    showStockInfo: showInventoryInLists(state)
  });
};
const styles = {
  wrapper: css({
    flexDirection: 'row',
    alignItems: 'flex-end',
    fontSize: '0.65rem'
  }),
  text: css({
    margin: '0 !important'
  }).toString(),
  location: css({
    marginLeft: '0 !important'
  })
};

/**
 * Renders visible stock information based on the given location.
 * @param {Object} props The component props.
 * @return {JSX}
 */
const StockInfoLists = ({
  preferredLocation,
  product,
  inventory,
  showStockInfo
}) => {
  if (!showStockInfo || !preferredLocation) {
    return null;
  }
  const portalProps = {
    inventory,
    location: preferredLocation,
    product
  };
  /* eslint-disable jsx-a11y/aria-role */
  return /*#__PURE__*/_jsx(SurroundPortals, {
    portalName: PRODUCT_LOCATION_STOCK_INFO_LIST,
    portalProps: portalProps,
    children: /*#__PURE__*/_jsx("div", {
      className: styles.wrapper,
      role: "text",
      children: /*#__PURE__*/_jsxs(PlaceholderLabel, {
        ready: !!inventory,
        children: [/*#__PURE__*/_jsx(StockInfo, {
          product: product,
          location: preferredLocation
        }), ' ', /*#__PURE__*/_jsx(I18n.Text, {
          string: "locations.stock_info.pick_up_at",
          params: {
            storeName: ''
          },
          className: styles.text
        }), ' ', /*#__PURE__*/_jsx("span", {
          className: styles.location,
          children: preferredLocation.name
        })]
      })
    })
  });
  /* eslint-enable jsx-a11y/aria-role */
};
StockInfoLists.defaultProps = {
  inventory: null,
  preferredLocation: null
};
export default connect(makeMapStateToProps)(StockInfoLists);