@shopgate/engage/locations/components/FulfillmentSelector/FulfillmentSelectorLocation.js

Shopgate's ENGAGE library.

import React, { useCallback, useMemo, Fragment } from 'react';
import classNames from 'classnames';
import intersection from 'lodash/intersection';
import { Grid, ResponsiveContainer, SurroundPortals } from '@shopgate/engage/components';
import { ROPIS, BOPIS, DIRECT_SHIP } from "../../constants";
import { i18n } from "../../../core";
import { isProductAvailable } from "../../helpers";
import { ChangeLocationButton } from "../ChangeLocationButton";
import { StockInfo } from "../StockInfo";
import { FulfillmentSelectorImpossibleError } from "./FulfillmentSelectorImpossibleError";
import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
import { container, unavailable, locationName } from "./FulfillmentSelectorLocation.style";
import { itemRow, itemColumn, itemSpacer } from "./FulfillmentSelectorItem.style";
import { PRODUCT_FULFILLMENT_SELECTOR_LOCATION } from "../../constants/Portals";
import { FulfillmentSelectorLocationMethodNotAvailable } from "./FulfillmentSelectorLocationMethodNotAvailable";
import FulfillmentSelectorAlternativeLocation from "./FulfillmentSelectorAlternativeLocation";

/**
 * The FulfillmentSelectorLocation component
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export function FulfillmentSelectorLocation() {
  const {
    selection,
    preferredLocation,
    selectedLocation,
    inventory,
    handleChange,
    isReady,
    isROPISEnabled,
    isBOPISEnabled,
    userFulfillmentMethod,
    productFulfillmentMethods,
    shopFulfillmentMethods,
    locationFulfillmentMethods,
    useLocationFulfillmentMethods,
    productId
  } = useFulfillmentSelectorState();
  const usedLocation = selectedLocation || preferredLocation;
  const selected = [ROPIS, BOPIS].includes(selection);
  const isOrderable = isProductAvailable(usedLocation || {}, inventory || {});
  const handleChangeLocation = useCallback(() => {
    if (selected) {
      handleChange(userFulfillmentMethod, true);
    }
  }, [handleChange, selected, userFulfillmentMethod]);
  const locationSupportsFulfillmentMethod = useMemo(() => {
    if (!useLocationFulfillmentMethods || !selected) {
      return true;
    }
    return locationFulfillmentMethods.includes(userFulfillmentMethod);
  }, [locationFulfillmentMethods, selected, useLocationFulfillmentMethods, userFulfillmentMethod]);
  const selectionAvailableForProduct = useMemo(() => intersection(shopFulfillmentMethods || [], productFulfillmentMethods || []).filter(entry => entry !== DIRECT_SHIP).includes(selection), [shopFulfillmentMethods, productFulfillmentMethods, selection]);
  if (!isReady || preferredLocation && !inventory) {
    return null;
  }
  const isRopeMethodEnabled = isROPISEnabled || isBOPISEnabled || selectionAvailableForProduct;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(SurroundPortals, {
      portalName: PRODUCT_FULFILLMENT_SELECTOR_LOCATION,
      portalProps: {
        productId,
        location: usedLocation,
        inventory
      },
      children: [isRopeMethodEnabled && isOrderable && usedLocation && /*#__PURE__*/_jsxs(Grid, {
        className: classNames(itemRow, container),
        component: "div",
        children: [/*#__PURE__*/_jsxs(Grid, {
          component: "div",
          children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
            appAlways: true,
            breakpoint: "xs",
            children: [/*#__PURE__*/_jsx(Grid.Item, {
              className: itemColumn,
              grow: 1,
              shrink: 0,
              component: "div",
              children: /*#__PURE__*/_jsx("div", {
                className: locationName,
                children: usedLocation.name
              })
            }), /*#__PURE__*/_jsx(Grid.Item, {
              className: itemColumn,
              grow: 1,
              shrink: 0,
              component: "div",
              children: /*#__PURE__*/_jsx(StockInfo, {
                productId: productId,
                location: usedLocation
              })
            })]
          }), /*#__PURE__*/_jsxs(ResponsiveContainer, {
            webOnly: true,
            breakpoint: ">xs",
            children: [/*#__PURE__*/_jsx("div", {
              children: /*#__PURE__*/_jsx("div", {
                className: locationName,
                children: usedLocation.name
              })
            }), /*#__PURE__*/_jsx("div", {
              className: itemSpacer,
              children: /*#__PURE__*/_jsx(StockInfo, {
                productId: productId,
                location: usedLocation
              })
            })]
          })]
        }), selectionAvailableForProduct && !locationSupportsFulfillmentMethod ? /*#__PURE__*/_jsx(FulfillmentSelectorLocationMethodNotAvailable, {
          method: userFulfillmentMethod
        }) : null, /*#__PURE__*/_jsx(ChangeLocationButton, {
          onClick: handleChangeLocation,
          disabled: !selected
        })]
      }), isRopeMethodEnabled && selected && !isOrderable && /*#__PURE__*/_jsxs("div", {
        className: container,
        children: [/*#__PURE__*/_jsx("div", {
          className: locationName,
          children: usedLocation?.name || ''
        }), /*#__PURE__*/_jsx(FulfillmentSelectorImpossibleError, {}), /*#__PURE__*/_jsx(ChangeLocationButton, {
          onClick: handleChangeLocation
        })]
      }), false && !isRopeMethodEnabled ? /*#__PURE__*/_jsx("div", {
        className: classNames(unavailable, container),
        children: i18n.text('locations.no_available')
      }) : null]
    }), /*#__PURE__*/_jsx(FulfillmentSelectorAlternativeLocation, {
      show: !!isRopeMethodEnabled && !!usedLocation && !!inventory && !isOrderable,
      productId: productId
    })]
  });
}