@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}
 */export function FulfillmentSelectorLocation(){var _useFulfillmentSelect=useFulfillmentSelectorState(),selection=_useFulfillmentSelect.selection,preferredLocation=_useFulfillmentSelect.preferredLocation,selectedLocation=_useFulfillmentSelect.selectedLocation,inventory=_useFulfillmentSelect.inventory,handleChange=_useFulfillmentSelect.handleChange,isReady=_useFulfillmentSelect.isReady,isROPISEnabled=_useFulfillmentSelect.isROPISEnabled,isBOPISEnabled=_useFulfillmentSelect.isBOPISEnabled,userFulfillmentMethod=_useFulfillmentSelect.userFulfillmentMethod,productFulfillmentMethods=_useFulfillmentSelect.productFulfillmentMethods,shopFulfillmentMethods=_useFulfillmentSelect.shopFulfillmentMethods,locationFulfillmentMethods=_useFulfillmentSelect.locationFulfillmentMethods,useLocationFulfillmentMethods=_useFulfillmentSelect.useLocationFulfillmentMethods,productId=_useFulfillmentSelect.productId;var usedLocation=selectedLocation||preferredLocation;var selected=[ROPIS,BOPIS].includes(selection);var isOrderable=isProductAvailable(usedLocation||{},inventory||{});var handleChangeLocation=useCallback(function(){if(selected){handleChange(userFulfillmentMethod,true);}},[handleChange,selected,userFulfillmentMethod]);var locationSupportsFulfillmentMethod=useMemo(function(){if(!useLocationFulfillmentMethods||!selected){return true;}return locationFulfillmentMethods.includes(userFulfillmentMethod);},[locationFulfillmentMethods,selected,useLocationFulfillmentMethods,userFulfillmentMethod]);var selectionAvailableForProduct=useMemo(function(){return intersection(shopFulfillmentMethods||[],productFulfillmentMethods||[]).filter(function(entry){return entry!==DIRECT_SHIP;}).includes(selection);},[shopFulfillmentMethods,productFulfillmentMethods,selection]);if(!isReady||preferredLocation&&!inventory){return null;}var isRopeMethodEnabled=isROPISEnabled||isBOPISEnabled||selectionAvailableForProduct;return React.createElement(Fragment,null,React.createElement(SurroundPortals,{portalName:PRODUCT_FULFILLMENT_SELECTOR_LOCATION,portalProps:{productId:productId,location:usedLocation,inventory:inventory}},isRopeMethodEnabled&&isOrderable&&usedLocation&&React.createElement(Grid,{className:classNames(itemRow,container),component:"div"},React.createElement(Grid,{component:"div"},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Grid.Item,{className:itemColumn,grow:1,shrink:0,component:"div"},React.createElement("div",{className:locationName},usedLocation.name)),React.createElement(Grid.Item,{className:itemColumn,grow:1,shrink:0,component:"div"},React.createElement(StockInfo,{productId:productId,location:usedLocation}))),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement("div",null,React.createElement("div",{className:locationName},usedLocation.name)),React.createElement("div",{className:itemSpacer},React.createElement(StockInfo,{productId:productId,location:usedLocation})))),selectionAvailableForProduct&&!locationSupportsFulfillmentMethod?React.createElement(FulfillmentSelectorLocationMethodNotAvailable,{method:userFulfillmentMethod}):null,React.createElement(ChangeLocationButton,{onClick:handleChangeLocation,disabled:!selected})),isRopeMethodEnabled&&selected&&!isOrderable&&React.createElement("div",{className:container},React.createElement("div",{className:locationName},(usedLocation===null||usedLocation===void 0?void 0:usedLocation.name)||''),React.createElement(FulfillmentSelectorImpossibleError,null),React.createElement(ChangeLocationButton,{onClick:handleChangeLocation})),false&&!isRopeMethodEnabled?React.createElement("div",{className:classNames(unavailable,container)},i18n.text('locations.no_available')):null),React.createElement(FulfillmentSelectorAlternativeLocation,{show:!!isRopeMethodEnabled&&!!usedLocation&&!!inventory&&!isOrderable,productId:productId}));}