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

Shopgate's ENGAGE library.

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}
 */function FulfillmentSelectorAlternativeLocation(_ref){var productId=_ref.productId,show=_ref.show,alternativeLocations=_ref.alternativeLocations,provideAlternativeLocation=_ref.provideAlternativeLocation,widgetSettings=_ref.widgetSettings;var _useFulfillmentSelect=useFulfillmentSelectorState(),_useFulfillmentSelect2=_useFulfillmentSelect.merchantSettings,merchantSettings=_useFulfillmentSelect2===void 0?{}:_useFulfillmentSelect2,selectedLocation=_useFulfillmentSelect.selectedLocation;var _ref2=widgetSettings||{},_ref2$alternativeLoca=_ref2.alternativeLocationOnPDP,_ref2$alternativeLoca2=_ref2$alternativeLoca===void 0?{}:_ref2$alternativeLoca,_ref2$alternativeLoca3=_ref2$alternativeLoca2.radius,radius=_ref2$alternativeLoca3===void 0?50:_ref2$alternativeLoca3;var showAlternative=merchantSettings[MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION]||false;useEffect(function(){if(show&&showAlternative&&productId&&!alternativeLocations){provideAlternativeLocation(productId,{sort:SORT_CLOSEST_LOCATION_WITH_INVENTORY,radius:radius});}},[productId,provideAlternativeLocation,alternativeLocations,radius,show,showAlternative]);if(!show||!showAlternative||!productId){return null;}if(!alternativeLocations||!alternativeLocations.length){return null;}var alternativeLocation=alternativeLocations.find(function(l){return l.code!==(selectedLocation===null||selectedLocation===void 0?void 0:selectedLocation.code);});return React.createElement(SurroundPortals,{portalName:PRODUCT_FULFILLMENT_SELECTOR_ALTERNATIVE_LOCATION,portalProps:{productId:productId,location:alternativeLocation}},alternativeLocation&&React.createElement(Grid,{component:"div",className:gridClassName},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Grid.Item,{className:itemColumn,grow:1,shrink:0,component:"div"},React.createElement("div",{className:locationName},alternativeLocation.name)),React.createElement(Grid.Item,{className:itemColumn,grow:1,shrink:0,component:"div"},React.createElement(StockInfo,{productId:productId,location:alternativeLocation}))),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement("div",{className:locationName},alternativeLocation.name,React.createElement("span",{className:itemSpacer},React.createElement(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}
 */var mapStateToProps=function mapStateToProps(state,props){var _props$widgetSettings,_props$widgetSettings2;return{alternativeLocations:getProductAlternativeLocations(state,{productId:props.productId,params:{sort:SORT_CLOSEST_LOCATION_WITH_INVENTORY,radius:((_props$widgetSettings=props.widgetSettings)===null||_props$widgetSettings===void 0?void 0:(_props$widgetSettings2=_props$widgetSettings.alternativeLocationOnPDP)===null||_props$widgetSettings2===void 0?void 0:_props$widgetSettings2.radius)||50}})};};var mapDispatchToProps={provideAlternativeLocation:provideProductAlternativeLocation};export default withWidgetSettings(connect(mapStateToProps,mapDispatchToProps)(memo(FulfillmentSelectorAlternativeLocation)),'@shopgate/engage/locations');