@shopgate/engage/locations/components/Cart/CartItemProductChangeLocation.js

Shopgate's ENGAGE library.

import noop from 'lodash/noop';
import React, { useEffect, useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { FulfillmentSheet } from "../FulfillmentSheet";
import { isProductAvailable } from "../../helpers";
import { STAGE_SELECT_STORE } from "../../constants";
import connect from "./CartItemProductChangeLocation.connector";

/**
 * @typedef {import('./CartItemProductChangeLocation.types').OwnProps} OwnProps
 * @typedef {import('./CartItemProductChangeLocation.types').DispatchProps} DispatchProps
 */

/**
 * @typedef {OwnProps & DispatchProps} Props
 */

/**
 * @param {Props} props The component props.
 * @returns {JSX.Element|null}
 */
import { jsx as _jsx } from "react/jsx-runtime";
const CartItemProductChangeLocation = props => {
  const {
    cartItem,
    updateProductInCart,
    fetchProductLocations,
    registerAction
  } = props;
  const [opened, setOpened] = useState(false);
  const [fulfillmentMethod, setFulfillmentMethod] = useState(null);

  /**
   * Register cart item action
   */
  useEffect(() => {
    if (!registerAction || !cartItem) {
      return;
    }
    registerAction('changeLocation', currentFulfillmentMethod => {
      fetchProductLocations(cartItem.product.id);
      setOpened(true);
      setFulfillmentMethod(currentFulfillmentMethod);
    });
  }, [cartItem, fetchProductLocations, registerAction]);

  /**
   * Select location callback
   * @param {Object|null} location
   */
  const onLocationSelect = useCallback(location => {
    setTimeout(() => setOpened(false), 500);
    if (!location || !isProductAvailable(location, location?.inventory)) {
      return;
    }
    updateProductInCart(cartItem.id, cartItem.quantity, location, fulfillmentMethod);
    setFulfillmentMethod(fulfillmentMethod);
  }, [cartItem.id, cartItem.quantity, fulfillmentMethod, updateProductInCart]);
  const {
    fulfillment
  } = cartItem;
  if (!opened || !fulfillment) {
    return null;
  }
  return /*#__PURE__*/_jsx(FulfillmentSheet, {
    stage: STAGE_SELECT_STORE,
    open: true,
    title: "locations.headline",
    changeOnly: true,
    productId: cartItem.product.id,
    updatePreferredLocation: true,
    onClose: onLocationSelect,
    isCart: true
  });
};
CartItemProductChangeLocation.defaultProps = {
  registerAction: noop
};
export default connect(CartItemProductChangeLocation);