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

Shopgate's ENGAGE library.

function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import{hot}from'react-hot-loader/root';import React,{useState,useEffect,useCallback,useMemo}from'react';import{SurroundPortals}from"../../../components";import{DIRECT_SHIP,ROPIS,BOPIS,STAGE_SELECT_STORE,PRODUCT_FULFILLMENT_SELECTOR}from"../../constants";import{FulfillmentSheet}from"../FulfillmentSheet";import{FulfillmentSelectorContext}from"./FulfillmentSelector.context";import{FulfillmentSelectorHeader}from"./FulfillmentSelectorHeader";import{FulfillmentSelectorItem}from"./FulfillmentSelectorItem";import{FulfillmentSelectorDirectShip}from"./FulfillmentSelectorDirectShip";import{FulfillmentSelectorBOPIS}from"./FulfillmentSelectorBOPIS";import{FulfillmentSelectorROPIS}from"./FulfillmentSelectorROPIS";import{FulfillmentSelectorAddToCart}from"./FulfillmentSelectorAddToCart";import{FulfillmentSelectorLocation}from"./FulfillmentSelectorLocation";import{container}from"./FulfillmentSelector.style";import connect from"./FulfillmentSelector.connector";/**
 * Renders the fulfillment selector radio button group.
 * @param {Object} props The component props.
 * @returns {JSX}
 */function FulfillmentSelector(props){var productId=props.productId,merchantSettings=props.merchantSettings,shopFulfillmentMethods=props.shopFulfillmentMethods,productFulfillmentMethods=props.productFulfillmentMethods,locationFulfillmentMethods=props.locationFulfillmentMethods,useLocationFulfillmentMethods=props.useLocationFulfillmentMethods,preferredLocation=props.preferredLocation,inventory=props.inventory,conditioner=props.conditioner,isDirectShipEnabled=props.isDirectShipEnabled,isROPISEnabled=props.isROPISEnabled,isBOPISEnabled=props.isBOPISEnabled,storeFulfillmentMethod=props.storeFulfillmentMethod,userFulfillmentMethod=props.userFulfillmentMethod,fulfillmentPaths=props.fulfillmentPaths,isOrderable=props.isOrderable,isReady=props.isReady;var _useState=useState(userFulfillmentMethod),_useState2=_slicedToArray(_useState,2),selection=_useState2[0],setSelection=_useState2[1];var _useState3=useState(preferredLocation),_useState4=_slicedToArray(_useState3,2),selectedLocation=_useState4[0],setSelectedLocation=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isOpen=_useState6[0],setIsOpen=_useState6[1];var usedLocation=selectedLocation||preferredLocation;// Initialize fo selection once it is available.
useEffect(function(){if(!selection&&userFulfillmentMethod){setSelection(userFulfillmentMethod);}},[selection,userFulfillmentMethod]);// Initialize location selection once it is available.
useEffect(function(){if(!selectedLocation&&preferredLocation){setSelectedLocation(preferredLocation);}},[preferredLocation,selectedLocation]);var fulfillmentMethodFallback=useMemo(function(){if(!shopFulfillmentMethods){return null;}var states=[isDirectShipEnabled,isBOPISEnabled,isROPISEnabled];return[DIRECT_SHIP,BOPIS,ROPIS].find(function(method,index){return states[index]&&shopFulfillmentMethods.includes(method);})||null;},[isBOPISEnabled,isDirectShipEnabled,isROPISEnabled,shopFulfillmentMethods]);/**
   * Determine and set a default fulfillment method when none was set before.
   */useEffect(function(){if(!shopFulfillmentMethods){return;}/**
     * The user has already set a fulfillment method which is supported by the shop, so we don't
     * need to apply the fallback. We don't check against the product fulfillment methods to
     * avoid too much auto magic when navigating through catalogs with different set up products.
     */if(userFulfillmentMethod&&shopFulfillmentMethods.includes(userFulfillmentMethod)){return;}if(fulfillmentMethodFallback!==userFulfillmentMethod){setSelection(fulfillmentMethodFallback);storeFulfillmentMethod(fulfillmentMethodFallback);}},[fulfillmentMethodFallback,isBOPISEnabled,isDirectShipEnabled,isROPISEnabled,shopFulfillmentMethods,storeFulfillmentMethod,userFulfillmentMethod]);useEffect(function(){if((preferredLocation===null||preferredLocation===void 0?void 0:preferredLocation.code)!==(selectedLocation===null||selectedLocation===void 0?void 0:selectedLocation.code)){setSelectedLocation(preferredLocation);}},[preferredLocation,selectedLocation,shopFulfillmentMethods]);/**
   * Updates the selected location when the sheet closes.
   */var handleClose=useCallback(function(newLocationData){setIsOpen(false);if(!newLocationData&&(!usedLocation||!usedLocation.code)){// Reset the UI back to directShip if there was no location selected already
setSelection(fulfillmentMethodFallback);return;}if(newLocationData){// Update the selected location only when the selection was done for the same product.
setSelectedLocation(newLocationData.location);}},[fulfillmentMethodFallback,usedLocation]);/**
   * Whenever the pick-up selection is made, open the
   * store selector sheet and use the new location.
   */var handleChange=useCallback(function(method){var changeOnly=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;conditioner.without('fulfillment-inventory').check().then(function(passed){if(!passed){return;}setSelection(method);storeFulfillmentMethod(method);var isValidRopeSelection=[ROPIS,BOPIS].includes(method)&&!!preferredLocation&&!!preferredLocation.code;if(!changeOnly&&(isOpen||isValidRopeSelection)){return;}if(method===DIRECT_SHIP){setSelectedLocation(null);return;}setIsOpen(true);FulfillmentSheet.open({stage:STAGE_SELECT_STORE,callback:handleClose,changeOnly:changeOnly});});},[conditioner,handleClose,isOpen,preferredLocation,storeFulfillmentMethod]);var shopHasRopeMethods=useMemo(function(){if(!Array.isArray(shopFulfillmentMethods)){return false;}return shopFulfillmentMethods.filter(function(method){return method!==DIRECT_SHIP;}).length>0;},[shopFulfillmentMethods]);if(!shopHasRopeMethods){return null;}var context={selection:selection,selectedLocation:selectedLocation,inventory:inventory,preferredLocation:preferredLocation,isDirectShipEnabled:isDirectShipEnabled,isBOPISEnabled:isBOPISEnabled,isROPISEnabled:isROPISEnabled,isReady:isReady,productId:productId,handleChange:handleChange,conditioner:conditioner,merchantSettings:merchantSettings,fulfillmentPaths:fulfillmentPaths,userFulfillmentMethod:userFulfillmentMethod,isOrderable:isOrderable,shopFulfillmentMethods:shopFulfillmentMethods,productFulfillmentMethods:productFulfillmentMethods,locationFulfillmentMethods:locationFulfillmentMethods,useLocationFulfillmentMethods:useLocationFulfillmentMethods};return React.createElement(FulfillmentSelectorContext.Provider,{value:context},React.createElement(SurroundPortals,{portalName:PRODUCT_FULFILLMENT_SELECTOR},React.createElement("div",{className:container,role:"radiogroup",tabIndex:"0"},React.createElement(FulfillmentSelectorHeader,null),shopFulfillmentMethods.includes(DIRECT_SHIP)&&React.createElement(FulfillmentSelectorItem,{name:DIRECT_SHIP,onChange:handleChange,disabled:!isReady||!isDirectShipEnabled},React.createElement(FulfillmentSelectorDirectShip,null)),shopFulfillmentMethods.includes(BOPIS)&&React.createElement(FulfillmentSelectorItem,{name:BOPIS,onChange:handleChange,disabled:!isReady||!isBOPISEnabled},React.createElement(FulfillmentSelectorBOPIS,null)),shopFulfillmentMethods.includes(ROPIS)&&React.createElement(FulfillmentSelectorItem,{name:ROPIS,onChange:handleChange,disabled:!isReady||!isROPISEnabled},React.createElement(FulfillmentSelectorROPIS,null)))),React.createElement(FulfillmentSelectorLocation,null),React.createElement(FulfillmentSelectorAddToCart,null));}export default hot(connect(React.memo(FulfillmentSelector)));