@shopgate/engage
Version:
Shopgate's ENGAGE library.
124 lines (122 loc) • 4.45 kB
JavaScript
import React, { useEffect, memo } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { withWidgetSettings } from '@shopgate/engage/core';
import { Grid, ResponsiveContainer, SurroundPortals } from '@shopgate/engage/components';
import { MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION } from "../../../core/constants";
import { provideProductAlternativeLocation } from "../../action-creators";
import { StockInfo } from "../StockInfo";
import { locationName, alternativeLocation as gridClassName } from "./FulfillmentSelectorLocation.style";
import { itemColumn, itemSpacer } from "./FulfillmentSelectorItem.style";
import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
import { PRODUCT_FULFILLMENT_SELECTOR_ALTERNATIVE_LOCATION } from "../../constants/Portals";
import { getProductAlternativeLocations } from "../../selectors";
import { SORT_CLOSEST_LOCATION_WITH_INVENTORY } from "../../constants";
/**
* The FulfillmentSelectorLocation component
* @returns {JSX}
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function FulfillmentSelectorAlternativeLocation({
productId,
show,
alternativeLocations,
provideAlternativeLocation,
widgetSettings
}) {
const {
merchantSettings = {},
selectedLocation
} = useFulfillmentSelectorState();
const {
alternativeLocationOnPDP: {
radius = 50
} = {}
} = widgetSettings || {};
const showAlternative = merchantSettings[MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION] || false;
useEffect(() => {
if (show && showAlternative && productId && !alternativeLocations) {
provideAlternativeLocation(productId, {
sort: SORT_CLOSEST_LOCATION_WITH_INVENTORY,
radius
});
}
}, [productId, provideAlternativeLocation, alternativeLocations, radius, show, showAlternative]);
if (!show || !showAlternative || !productId) {
return null;
}
if (!alternativeLocations || !alternativeLocations.length) {
return null;
}
const alternativeLocation = alternativeLocations.find(l => l.code !== selectedLocation?.code);
return /*#__PURE__*/_jsx(SurroundPortals, {
portalName: PRODUCT_FULFILLMENT_SELECTOR_ALTERNATIVE_LOCATION,
portalProps: {
productId,
location: alternativeLocation
},
children: alternativeLocation && /*#__PURE__*/_jsxs(Grid, {
component: "div",
className: gridClassName,
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: alternativeLocation.name
})
}), /*#__PURE__*/_jsx(Grid.Item, {
className: itemColumn,
grow: 1,
shrink: 0,
component: "div",
children: /*#__PURE__*/_jsx(StockInfo, {
productId: productId,
location: alternativeLocation
})
})]
}), /*#__PURE__*/_jsx(ResponsiveContainer, {
webOnly: true,
breakpoint: ">xs",
children: /*#__PURE__*/_jsxs("div", {
className: locationName,
children: [alternativeLocation.name, /*#__PURE__*/_jsx("span", {
className: itemSpacer,
children: /*#__PURE__*/_jsx(StockInfo, {
productId: productId,
location: alternativeLocation
})
})]
})
})]
})
});
}
FulfillmentSelectorAlternativeLocation.defaultProps = {
alternativeLocations: null,
productId: null,
widgetSettings: null
};
/**
* @param {Object} state The current application state.
* @param {Object} props The component props.
* @return {Object}
*/
const mapStateToProps = (state, props) => ({
alternativeLocations: getProductAlternativeLocations(state, {
productId: props.productId,
params: {
sort: SORT_CLOSEST_LOCATION_WITH_INVENTORY,
radius: props.widgetSettings?.alternativeLocationOnPDP?.radius || 50
}
})
});
const mapDispatchToProps = {
provideAlternativeLocation: provideProductAlternativeLocation
};
export default withWidgetSettings(connect(mapStateToProps, mapDispatchToProps)(/*#__PURE__*/memo(FulfillmentSelectorAlternativeLocation)), '@shopgate/engage/locations');