@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.8

package/locations/providers/FulfillmentProvider.js

@@ -1,50 +1,472 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}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 React,{useState,useMemo,useRef,useEffect,useCallback}from'react';import{logger,i18n,UIEvents}from"../../core";import{withCurrentProduct}from"../../core/hocs/withCurrentProduct";import{FulfillmentContext}from"../locations.context";import{FulfillmentPathSelector}from"../components/FulfillmentPathSelector";import{STAGE_SELECT_STORE,STAGE_RESERVE_FORM,STAGE_RESPONSE_SUCCESS,STAGE_RESPONSE_ERROR,STAGE_FULFILLMENT_METHOD,QUICK_RESERVE,MULTI_LINE_RESERVE,DIRECT_SHIP,ROPIS,BOPIS}from"../constants";import connect from"./FulfillmentProvider.connector";export var EVENT_SET_OPEN='FulfillmentProvider.setOpen';var callback;/**
+import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { logger, i18n, UIEvents } from "../../core";
+import { withCurrentProduct } from "../../core/hocs/withCurrentProduct";
+import { FulfillmentContext } from "../locations.context";
+import { FulfillmentPathSelector } from "../components/FulfillmentPathSelector";
+import { STAGE_SELECT_STORE, STAGE_RESERVE_FORM, STAGE_RESPONSE_SUCCESS, STAGE_RESPONSE_ERROR, STAGE_FULFILLMENT_METHOD, QUICK_RESERVE, MULTI_LINE_RESERVE, DIRECT_SHIP, ROPIS, BOPIS } from "../constants";
+import connect from "./FulfillmentProvider.connector";
+
+/**
+ * @typedef {import('./FulfillmentProvider.types').OwnProps} OwnProps
+ * @typedef {import('./FulfillmentProvider.types').StateProps} StateProps
+ * @typedef {import('./FulfillmentProvider.types').DispatchProps} DispatchProps
+ * @typedef {import('../locations.types').SheetOpenParams} SheetOpenParams
+ * @typedef {import('../locations.types').SheetStage} SheetStage
+ * @typedef {import('../locations.types').Location} Location
+ * @typedef {import('../locations.types').ReservationFormValues} ReservationFormValues
+ * @typedef {import('../locations.types').FulfillmentPath} FulfillmentPath
+ */
+
+/**
+ * @typedef {OwnProps & StateProps & DispatchProps} Props
+ */
+
+export const EVENT_SET_OPEN = 'FulfillmentProvider.setOpen';
+let callback = null;
+
+/**
  * Provides the fulfillment context.
- * @param {Object} props The component props.
- * @returns {JSX}
- */function FulfillmentProvider(props){var children=props.children,locations=props.locations,propsBaseProduct=props.baseProduct,propsProduct=props.product,productLocation=props.location,inventory=props.inventory,userInput=props.userInput,defaultFulfillmentMethod=props.fulfillmentMethod,defaultFulfillmentPath=props.fulfillmentPath,fulfillmentPaths=props.fulfillmentPaths,fulfillmentMethods=props.fulfillmentMethods,enabledFulfillmentMethods=props.enabledFulfillmentMethods,shopSettings=props.shopSettings,selectLocation=props.selectLocation,submitReservation=props.submitReservation,storeFormInput=props.storeFormInput,updateProductsInCart=props.updateProductsInCart,isFetching=props.isFetching,_props$noInventory=props.noInventory,noInventory=_props$noInventory===void 0?false:_props$noInventory,_props$open=props.open,open=_props$open===void 0?false:_props$open,_props$noLocationSele=props.noLocationSelection,noLocationSelection=_props$noLocationSele===void 0?false:_props$noLocationSele,_props$isStoreFinder=props.isStoreFinder,isStoreFinder=_props$isStoreFinder===void 0?false:_props$isStoreFinder,_props$isCart=props.isCart,isCart=_props$isCart===void 0?false:_props$isCart,defaultIsInitialized=props.isInitialized,updatePreferredLocation=props.updatePreferredLocation,_props$restrictMultiL=props.restrictMultiLocationOrders,restrictMultiLocationOrders=_props$restrictMultiL===void 0?false:_props$restrictMultiL,_props$cartProducts=props.cartProducts,cartProducts=_props$cartProducts===void 0?[]:_props$cartProducts,showModal=props.showModal,_props$fulfillmentSch=props.fulfillmentSchedulingEnabled,fulfillmentSchedulingEnabled=_props$fulfillmentSch===void 0?null:_props$fulfillmentSch,_props$activeFulfillm=props.activeFulfillmentSlot,activeFulfillmentSlot=_props$activeFulfillm===void 0?null:_props$activeFulfillm,_props$activeFulfillm2=props.activeFulfillmentSlotLocationCode,activeFulfillmentSlotLocationCode=_props$activeFulfillm2===void 0?null:_props$activeFulfillm2;var _useState=useState(defaultFulfillmentPath||null),_useState2=_slicedToArray(_useState,2),fulfillmentPath=_useState2[0],setFulfillmentPath=_useState2[1];var _useState3=useState(props.changeOnly),_useState4=_slicedToArray(_useState3,2),changeOnly=_useState4[0],setChangeOnly=_useState4[1];var _useState5=useState(open),_useState6=_slicedToArray(_useState5,2),isOpen=_useState6[0],setIsOpen=_useState6[1];var _useState7=useState(props.stage||null),_useState8=_slicedToArray(_useState7,2),stage=_useState8[0],setStage=_useState8[1];var _useState9=useState(null),_useState10=_slicedToArray(_useState9,2),fulfillmentMethod=_useState10[0],setFulfillmentMethod=_useState10[1];var _useState11=useState(null),_useState12=_slicedToArray(_useState11,2),orderNumbers=_useState12[0],setOrderNumbers=_useState12[1];var _useState13=useState(null),_useState14=_slicedToArray(_useState13,2),errors=_useState14[0],setErrors=_useState14[1];var _useState15=useState(propsProduct),_useState16=_slicedToArray(_useState15,2),product=_useState16[0],setProduct=_useState16[1];var _useState17=useState(false),_useState18=_slicedToArray(_useState17,2),isChangeFulfillment=_useState18[0],setIsChangeFulfillment=_useState18[1];var _useState19=useState(null),_useState20=_slicedToArray(_useState19,2),cartItem=_useState20[0],setCartItem=_useState20[1];var _useState21=useState(productLocation),_useState22=_slicedToArray(_useState21,2),storeFinderLocation=_useState22[0],setStoreFinderLocation=_useState22[1];var _useState23=useState(!isFetching),_useState24=_slicedToArray(_useState23,2),isLoading=_useState24[0],setIsLoading=_useState24[1];var isInitialized=useRef(defaultIsInitialized);useEffect(function(){if(defaultFulfillmentMethod){setFulfillmentMethod(defaultFulfillmentMethod);}},[defaultFulfillmentMethod]);var title=useMemo(function(){if(props.title!==null){return i18n.text(props.title);}switch(stage){default:case STAGE_SELECT_STORE:return i18n.text('locations.headline');case STAGE_RESERVE_FORM:return i18n.text('locations.place_reservation');case STAGE_RESPONSE_SUCCESS:return i18n.text('locations.success_heading');case STAGE_RESPONSE_ERROR:return i18n.text('locations.error_heading');case STAGE_FULFILLMENT_METHOD:return i18n.text('locations.change_fulfillment_method');}},[props.title,stage]);/** Effects for updating a state based on new props */useEffect(function(){return setIsOpen(open);},[open]);useEffect(function(){return setProduct(propsProduct);},[propsProduct]);useEffect(function(){// eslint-disable-next-line require-jsdoc
-var exec=/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(!(updatePreferredLocation&&productLocation&&!isInitialized.current)){_context.next=4;break;}isInitialized.current=true;_context.next=4;return selectLocation({location:productLocation,skipLocationSync:true});case 4:case"end":return _context.stop();}},_callee);}));return function exec(){return _ref.apply(this,arguments);};}();exec();},[productLocation,selectLocation,updatePreferredLocation]);useEffect(function(){setIsLoading(isFetching);},[isFetching]);/**
+ * @param {Props} props The component props.
+ * @returns {JSX.Element} The rendered component.
+ */
+const FulfillmentProvider = props => {
+  const {
+    children,
+    locations,
+    baseProduct: propsBaseProduct,
+    product: propsProduct,
+    location: productLocation,
+    inventory,
+    userInput,
+    fulfillmentMethod: defaultFulfillmentMethod,
+    fulfillmentPath: defaultFulfillmentPath,
+    fulfillmentPaths,
+    fulfillmentMethods,
+    enabledFulfillmentMethods,
+    shopSettings,
+    selectLocation,
+    submitReservation,
+    storeFormInput,
+    updateProductsInCart,
+    isFetching,
+    noInventory = false,
+    open = false,
+    noLocationSelection = false,
+    isStoreFinder = false,
+    isCart = false,
+    isInitialized: defaultIsInitialized,
+    updatePreferredLocation,
+    restrictMultiLocationOrders = false,
+    cartProducts = [],
+    showModal,
+    fulfillmentSchedulingEnabled = null,
+    activeFulfillmentSlot = null,
+    activeFulfillmentSlotLocationCode = null
+  } = props;
+  const [fulfillmentPath, setFulfillmentPath] = useState(defaultFulfillmentPath || null);
+  const [changeOnly, setChangeOnly] = useState(props.changeOnly);
+  const [isOpen, setIsOpen] = useState(open);
+  const [stage, setStage] = useState(props.stage || null);
+  const [fulfillmentMethod, setFulfillmentMethod] = useState(null);
+  const [orderNumbers, setOrderNumbers] = useState(null);
+  const [errors, setErrors] = useState(null);
+  const [product, setProduct] = useState(propsProduct);
+  const [isChangeFulfillment, setIsChangeFulfillment] = useState(false);
+  const [cartItem, setCartItem] = useState(null);
+  const [storeFinderLocation, setStoreFinderLocation] = useState(productLocation);
+  const [isLoading, setIsLoading] = useState(!isFetching);
+  const isInitialized = useRef(defaultIsInitialized);
+  useEffect(() => {
+    if (defaultFulfillmentMethod) {
+      setFulfillmentMethod(defaultFulfillmentMethod);
+    }
+  }, [defaultFulfillmentMethod]);
+  const title = useMemo(() => {
+    if (props.title !== null) {
+      return i18n.text(props.title);
+    }
+    switch (stage) {
+      default:
+      case STAGE_SELECT_STORE:
+        return i18n.text('locations.headline');
+      case STAGE_RESERVE_FORM:
+        return i18n.text('locations.place_reservation');
+      case STAGE_RESPONSE_SUCCESS:
+        return i18n.text('locations.success_heading');
+      case STAGE_RESPONSE_ERROR:
+        return i18n.text('locations.error_heading');
+      case STAGE_FULFILLMENT_METHOD:
+        return i18n.text('locations.change_fulfillment_method');
+    }
+  }, [props.title, stage]);
+
+  /** Effects for updating a state based on new props */
+  useEffect(() => setIsOpen(open), [open]);
+  useEffect(() => setProduct(propsProduct), [propsProduct]);
+  useEffect(() => {
+    // eslint-disable-next-line require-jsdoc
+    const exec = async () => {
+      if (updatePreferredLocation && productLocation && !isInitialized.current) {
+        isInitialized.current = true;
+        await selectLocation({
+          location: productLocation,
+          skipLocationSync: true
+        });
+      }
+    };
+    exec();
+  }, [productLocation, selectLocation, updatePreferredLocation]);
+  useEffect(() => {
+    setIsLoading(isFetching);
+  }, [isFetching]);
+
+  /**
    * Checks whether the given stage is currently set.
-   * @param {string} inputStage The stage to check for.
+   * @param {SheetStage} inputStage The stage to check for.
    * @returns {boolean}
-   */function isStage(inputStage){return inputStage===stage;}/**
+   */
+  const isStage = inputStage => inputStage === stage;
+
+  /**
    * Handles opening of the sheet.
-   * @param {Object} params The sheet open parameters.
-   */function handleOpen(params){setIsOpen(true);setStage(function(prevState){return params.stage||prevState;});setChangeOnly(function(prevState){return params.changeOnly||prevState;});setFulfillmentPath(function(prevState){return params.fulfillmentPath||prevState;});callback=params.callback||null;}/**
-   * Is called when the sheet closed.
-   * @param {Object} [location=null] The selected location.
-   * @param {string} [productId=null] The product ID.
-   */function handleClose(){var location=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var productId=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;var orderSuccess=true;if(isStage(STAGE_RESPONSE_ERROR)){orderSuccess=errors===null;}if(isStage(STAGE_RESERVE_FORM)){orderSuccess=null;}if(props.onClose){props.onClose(location,productId,orderSuccess);}else if(callback){callback(location,productId,orderSuccess);callback=null;}setIsOpen(false);setStage(null);setOrderNumbers(null);setErrors(null);setIsChangeFulfillment(false);setFulfillmentMethod(null);}useEffect(function(){UIEvents.addListener(EVENT_SET_OPEN,handleOpen);return function(){UIEvents.removeListener(EVENT_SET_OPEN,handleOpen);};},[]);/**
+   * @param {SheetOpenParams} params The sheet open parameters.
+   */
+  const handleOpen = params => {
+    setIsOpen(true);
+    setStage(prevState => params.stage || prevState);
+    setChangeOnly(prevState => params.changeOnly || prevState);
+    setFulfillmentPath(prevState => params.fulfillmentPath || prevState);
+    callback = params.callback || null;
+  };
+
+  /**
+   * Handles the closing of the sheet.
+   * @param {Location|null} location - The selected location or null if no location is selected.
+   * @param {string|null} productId - The product ID or null if no product is provided.
+   * @returns {void}
+   */
+  const handleClose = (location = null, productId = null) => {
+    let orderSuccess = true;
+    if (isStage(STAGE_RESPONSE_ERROR)) {
+      orderSuccess = errors === null;
+    }
+    if (isStage(STAGE_RESERVE_FORM)) {
+      orderSuccess = null;
+    }
+    if (props.onClose) {
+      props.onClose(location, productId, orderSuccess);
+    } else if (callback) {
+      callback(location, productId, orderSuccess);
+      callback = null;
+    }
+    setIsOpen(false);
+    setStage(null);
+    setOrderNumbers(null);
+    setErrors(null);
+    setIsChangeFulfillment(false);
+    setFulfillmentMethod(null);
+  };
+  useEffect(() => {
+    UIEvents.addListener(EVENT_SET_OPEN, handleOpen);
+    return () => {
+      UIEvents.removeListener(EVENT_SET_OPEN, handleOpen);
+    };
+  }, []);
+
+  /**
    * Handles the sending of the reservation.
-   * @param {Object} values The form values.
-   */function sendReservation(_x){return _sendReservation.apply(this,arguments);}/**
-   * @param {Object} location The selected location.
+   * @param {ReservationFormValues} values The reservation form values.
+   */
+  async function sendReservation(values) {
+    try {
+      const response = await submitReservation(values, product);
+      if (response.errors && response.errors.length > 0) {
+        setStage(STAGE_RESPONSE_ERROR);
+        setOrderNumbers(null);
+        setErrors(response.errors);
+      }
+      setStage(STAGE_RESPONSE_SUCCESS);
+      setOrderNumbers(response.orderNumbers);
+      setErrors(null);
+    } catch (error) {
+      logger.error(error);
+      setStage(STAGE_RESPONSE_ERROR);
+      setOrderNumbers(null);
+      setErrors([error.message]);
+    }
+
+    // Store the user's form in the user data.
+    storeFormInput(values);
+  }
+
+  /**
+   * @param {Location} location The selected location.
    * @returns {boolean}
-   */function _sendReservation(){_sendReservation=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(values){var response;return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:_context3.prev=0;_context3.next=3;return submitReservation(values,product);case 3:response=_context3.sent;if(response.errors&&response.errors.length>0){setStage(STAGE_RESPONSE_ERROR);setOrderNumbers(null);setErrors(response.errors);}setStage(STAGE_RESPONSE_SUCCESS);setOrderNumbers(response.orderNumbers);setErrors(null);_context3.next=16;break;case 10:_context3.prev=10;_context3.t0=_context3["catch"](0);logger.error(_context3.t0);setStage(STAGE_RESPONSE_ERROR);setOrderNumbers(null);setErrors([_context3.t0.message]);case 16:// Store the user's form in the user data.
-storeFormInput(values);case 17:case"end":return _context3.stop();}},_callee3,null,[[0,10]]);}));return _sendReservation.apply(this,arguments);}var confirmSelection=/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(location){var code,name,ropeCartProducts,cartHasDifferentCodes,confirmed,updateData;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:code=location.code,name=location.name;ropeCartProducts=cartProducts.filter(function(cartProduct){var _cartProduct$fulfillm;return[ROPIS,BOPIS].includes(cartProduct===null||cartProduct===void 0?void 0:(_cartProduct$fulfillm=cartProduct.fulfillment)===null||_cartProduct$fulfillm===void 0?void 0:_cartProduct$fulfillm.method);});if(!(!restrictMultiLocationOrders||ropeCartProducts.length===0)){_context2.next=4;break;}return _context2.abrupt("return",true);case 4:if(!(isCart&&ropeCartProducts.length===1)){_context2.next=6;break;}return _context2.abrupt("return",true);case 6:cartHasDifferentCodes=!!ropeCartProducts.map(function(_ref3){var _fulfillment$location;var fulfillment=_ref3.fulfillment;return fulfillment===null||fulfillment===void 0?void 0:(_fulfillment$location=fulfillment.location)===null||_fulfillment$location===void 0?void 0:_fulfillment$location.code;}).filter(Boolean).filter(function(cartProductCode){return cartProductCode!==code;}).length;if(!(ropeCartProducts.length>=1&&!cartHasDifferentCodes)){_context2.next=9;break;}return _context2.abrupt("return",true);case 9:_context2.next=11;return showModal({title:'locations.multi_location_modal.title',message:'locations.multi_location_modal.message',confirm:'locations.multi_location_modal.change_store',dismiss:'common.cancel'});case 11:confirmed=_context2.sent;if(!(confirmed&&ropeCartProducts.length)){_context2.next=18;break;}updateData=ropeCartProducts.map(function(_ref4){var cartItemId=_ref4.id,fulfillment=_ref4.fulfillment;return{cartItemId:cartItemId,fulfillment:{method:fulfillment===null||fulfillment===void 0?void 0:fulfillment.method,location:{code:code,name:name||''}}};});setIsLoading(true);_context2.next=17;return updateProductsInCart(updateData);case 17:setIsLoading(false);case 18:return _context2.abrupt("return",confirmed);case 19:case"end":return _context2.stop();}},_callee2);}));return function confirmSelection(_x2){return _ref2.apply(this,arguments);};}();/**
+   */
+  const confirmSelection = async location => {
+    const {
+      code,
+      name
+    } = location;
+    const ropeCartProducts = cartProducts.filter(cartProduct => [ROPIS, BOPIS].includes(cartProduct?.fulfillment?.method));
+    if (!restrictMultiLocationOrders || ropeCartProducts.length === 0) {
+      return true;
+    }
+    if (isCart && ropeCartProducts.length === 1) {
+      // Location changed for the one and only cart item
+      return true;
+    }
+    const cartHasDifferentCodes = !!ropeCartProducts.map(({
+      fulfillment
+    }) => fulfillment?.location?.code).filter(Boolean).filter(cartProductCode => cartProductCode !== code).length;
+    if (ropeCartProducts.length >= 1 && !cartHasDifferentCodes) {
+      return true;
+    }
+    const confirmed = await showModal({
+      title: 'locations.multi_location_modal.title',
+      message: 'locations.multi_location_modal.message',
+      confirm: 'locations.multi_location_modal.change_store',
+      dismiss: 'common.cancel'
+    });
+    if (confirmed && ropeCartProducts.length) {
+      const updateData = ropeCartProducts.map(({
+        id: cartItemId,
+        fulfillment
+      }) => ({
+        cartItemId,
+        fulfillment: {
+          method: fulfillment?.method,
+          location: {
+            code,
+            name: name || ''
+          }
+        }
+      }));
+      setIsLoading(true);
+      await updateProductsInCart(updateData);
+      setIsLoading(false);
+    }
+    return confirmed;
+  };
+
+  /**
    * Handles multiline reservation.
-   * @param {Object} location The selected location.
-   */function handleMultilineReservation(location){if(product===null||location.code===null){return;}var fulfillment=_extends({method:fulfillmentMethod,location:{code:location.code,name:location.name||''}},fulfillmentSchedulingEnabled&&activeFulfillmentSlotLocationCode===location.code&&(activeFulfillmentSlot===null||activeFulfillmentSlot===void 0?void 0:activeFulfillmentSlot.id)?{slotId:activeFulfillmentSlot.id}:null);if(isChangeFulfillment&&cartItem){updateProductsInCart([{quantity:cartItem.quantity,cartItemId:cartItem.id,fulfillment:fulfillment}]);}handleClose(location,product.id);}/**
+   * @param {Location} location The selected location.
+   * */
+  const handleMultilineReservation = location => {
+    if (product === null || location.code === null) {
+      return;
+    }
+    const fulfillment = {
+      method: fulfillmentMethod,
+      location: {
+        code: location.code,
+        name: location.name || ''
+      },
+      ...(fulfillmentSchedulingEnabled && activeFulfillmentSlotLocationCode === location.code && activeFulfillmentSlot?.id ? {
+        slotId: activeFulfillmentSlot.id
+      } : null)
+    };
+    if (isChangeFulfillment && cartItem) {
+      updateProductsInCart([{
+        quantity: cartItem.quantity,
+        cartItemId: cartItem.id,
+        fulfillment
+      }]);
+    }
+    handleClose(location, product.id);
+  };
+
+  /**
    * Handles quick reservation.
-   */function handleQuickReservation(){setStage(STAGE_RESERVE_FORM);}/**
+   */
+  function handleQuickReservation() {
+    setStage(STAGE_RESERVE_FORM);
+  }
+
+  /**
    * Handles the selection of a store location from the sheet.
-   * @param {Object} location The selected location.
-   */function handleSelectLocation(_x3){return _handleSelectLocation.apply(this,arguments);}/**
+   * @param {Location} location The selected location.
+   * @returns {Promise<void>}
+   */
+  async function handleSelectLocation(location) {
+    if (isLoading) {
+      return;
+    }
+    let selectionConfirmed;
+    if (updatePreferredLocation) {
+      selectionConfirmed = await confirmSelection(location);
+      if (selectionConfirmed) {
+        await selectLocation({
+          location: {
+            code: location.code,
+            name: location.name
+          }
+        });
+      }
+    }
+    if (changeOnly) {
+      if (selectionConfirmed) {
+        handleClose(location, product && product.id);
+      }
+      return;
+    }
+
+    /**
+     * Select the reservation method strategy.
+     * @param {string|FulfillmentPath} method The reservation method.
+     * @param {Location} storeLocation The selected store location.
+     */
+    const handleReservationMethod = (method, storeLocation) => {
+      if (!method) {
+        return;
+      }
+      if (method === QUICK_RESERVE) {
+        handleQuickReservation();
+      }
+      if (method === MULTI_LINE_RESERVE) {
+        handleMultilineReservation(storeLocation);
+      }
+    };
+
+    // No fulfillment path selected yet.
+    if (fulfillmentPath === null) {
+      if (fulfillmentPaths.length > 1) {
+        /**
+         * @param {FulfillmentPath} method - The selected fulfillment path.
+         */
+        FulfillmentPathSelector.open(method => {
+          if (!method) {
+            return;
+          }
+          handleReservationMethod(method, location);
+        });
+      } else if (fulfillmentPaths.length === 1) {
+        handleReservationMethod(fulfillmentPaths[0], location);
+      }
+      return;
+    }
+    if (fulfillmentPath === MULTI_LINE_RESERVE && fulfillmentPaths.includes(MULTI_LINE_RESERVE)) {
+      handleMultilineReservation(location);
+      return;
+    }
+    if (fulfillmentPath === QUICK_RESERVE) {
+      handleQuickReservation();
+    }
+  }
+
+  /**
    * @param {string} method The selected fulfillment method.
    * @param {Object} item The cart item to change.
-   */function _handleSelectLocation(){_handleSelectLocation=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(location){var selectionConfirmed,handleReservationMethod;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:if(!isLoading){_context4.next=2;break;}return _context4.abrupt("return");case 2:if(!updatePreferredLocation){_context4.next=9;break;}_context4.next=5;return confirmSelection(location);case 5:selectionConfirmed=_context4.sent;if(!selectionConfirmed){_context4.next=9;break;}_context4.next=9;return selectLocation({location:{code:location.code,name:location.name}});case 9:if(!changeOnly){_context4.next=12;break;}if(selectionConfirmed){handleClose(location,product&&product.id);}return _context4.abrupt("return");case 12:/**
-     * Select the reservation method strategy.
-     * @param {string} method The reservation method.
-     * @param {Object} storeLocation A store location
-     */handleReservationMethod=function handleReservationMethod(method,storeLocation){if(!method){return;}if(method===QUICK_RESERVE){handleQuickReservation();}if(method===MULTI_LINE_RESERVE){handleMultilineReservation(storeLocation);}};// No fulfillment path selected yet.
-if(!(fulfillmentPath===null)){_context4.next=16;break;}if(fulfillmentPaths.length>1){FulfillmentPathSelector.open(function(method){if(!method){return;}handleReservationMethod(method,location);});}else if(fulfillmentPaths.length===1){handleReservationMethod(fulfillmentPaths[0],location);}return _context4.abrupt("return");case 16:if(!(fulfillmentPath===MULTI_LINE_RESERVE&&fulfillmentPaths.includes(MULTI_LINE_RESERVE))){_context4.next=19;break;}handleMultilineReservation(location);return _context4.abrupt("return");case 19:if(fulfillmentPath===QUICK_RESERVE){handleQuickReservation();}case 20:case"end":return _context4.stop();}},_callee4);}));return _handleSelectLocation.apply(this,arguments);}function handleChangeFulfillmentMethod(method,item){logger.assert(item.product.id===product.id,'Change fulfillment method is called with unexpected product id');setIsChangeFulfillment(true);setCartItem(item);if([ROPIS,BOPIS].includes(method)&&(item.fulfillment===null||item.fulfillment.method===DIRECT_SHIP)){/**
+   */
+  const handleChangeFulfillmentMethod = (method, item) => {
+    logger.assert(item.product.id === product.id, 'Change fulfillment method is called with unexpected product id');
+    setIsChangeFulfillment(true);
+    setCartItem(item);
+    if ([ROPIS, BOPIS].includes(method) && (item.fulfillment === null || item.fulfillment.method === DIRECT_SHIP)) {
+      /**
        * When the fulfillment method of the current cart item was DIRECT_SHIP before, and is
        * switched to a ROPE method, the customer needs to pick a store for the item.
-       */setFulfillmentPath(MULTI_LINE_RESERVE);setStage(STAGE_SELECT_STORE);setFulfillmentMethod(method);setIsOpen(true);return;}if([DIRECT_SHIP,ROPIS,BOPIS].includes(method)){updateProductsInCart([{quantity:item.quantity,cartItemId:item.id,fulfillment:{method:method}}]);handleClose(null,item.product.id);}}var handleSelectStoreFinderLocation=useCallback(function(location){setStoreFinderLocation(location);},[]);var context={stage:stage,title:title,fulfillmentPath:fulfillmentPath,changeOnly:changeOnly,isStage:isStage,isOpen:isOpen,handleOpen:handleOpen,handleClose:handleClose,locations:locations,inventory:inventory,baseProduct:propsBaseProduct,product:product,location:productLocation,storeFinderLocation:storeFinderLocation,userInput:userInput,fulfillmentPaths:fulfillmentPaths,fulfillmentMethods:fulfillmentMethods,enabledFulfillmentMethods:enabledFulfillmentMethods,shopSettings:shopSettings,selectLocation:handleSelectLocation,selectStoreFinderLocation:handleSelectStoreFinderLocation,changeFulfillment:handleChangeFulfillmentMethod,sendReservation:sendReservation,orderNumbers:orderNumbers,errors:errors,noInventory:noInventory,noLocationSelection:noLocationSelection,isStoreFinder:isStoreFinder,isFetching:isFetching,isLoading:isLoading,setIsLoading:setIsLoading,meta:props.meta||undefined};return React.createElement(FulfillmentContext.Provider,{value:context},children);}FulfillmentProvider.defaultProps={open:false,changeOnly:false,updatePreferredLocation:true,fulfillmentMethods:null,title:null};var FulfillmentProviderWrapped=withCurrentProduct(connect(FulfillmentProvider));/**
+       */
+      setFulfillmentPath(MULTI_LINE_RESERVE);
+      setStage(STAGE_SELECT_STORE);
+      setFulfillmentMethod(method);
+      setIsOpen(true);
+      return;
+    }
+    if ([DIRECT_SHIP, ROPIS, BOPIS].includes(method)) {
+      updateProductsInCart([{
+        quantity: item.quantity,
+        cartItemId: item.id,
+        fulfillment: {
+          method
+        }
+      }]);
+      handleClose(null, item.product.id);
+    }
+  };
+  const handleSelectStoreFinderLocation = useCallback(location => {
+    setStoreFinderLocation(location);
+  }, []);
+  const context = {
+    stage,
+    title,
+    fulfillmentPath,
+    changeOnly,
+    isStage,
+    isOpen,
+    handleOpen,
+    handleClose,
+    locations,
+    inventory,
+    baseProduct: propsBaseProduct,
+    product,
+    location: productLocation,
+    storeFinderLocation,
+    userInput,
+    fulfillmentPaths,
+    fulfillmentMethods,
+    enabledFulfillmentMethods,
+    shopSettings,
+    selectLocation: handleSelectLocation,
+    selectStoreFinderLocation: handleSelectStoreFinderLocation,
+    changeFulfillment: handleChangeFulfillmentMethod,
+    sendReservation,
+    orderNumbers,
+    errors,
+    noInventory,
+    noLocationSelection,
+    isStoreFinder,
+    isFetching,
+    isLoading,
+    setIsLoading,
+    meta: props.meta || undefined
+  };
+  return /*#__PURE__*/React.createElement(FulfillmentContext.Provider, {
+    value: context
+  }, children);
+};
+FulfillmentProvider.defaultProps = {
+  open: false,
+  changeOnly: false,
+  updatePreferredLocation: true,
+  fulfillmentMethods: null,
+  title: null,
+  activeFulfillmentSlot: null,
+  activeFulfillmentSlotLocationCode: null,
+  baseProduct: null,
+  cartProducts: [],
+  enabledFulfillmentMethods: [],
+  fulfillmentMethod: null,
+  fulfillmentPath: null,
+  fulfillmentPaths: [],
+  fulfillmentSchedulingEnabled: false,
+  inventory: null,
+  isCart: false,
+  isFetching: false,
+  isInitialized: false,
+  isStoreFinder: false,
+  location: null,
+  locations: [],
+  noInventory: false,
+  noLocationSelection: false,
+  product: null,
+  restrictMultiLocationOrders: false,
+  shopSettings: null,
+  showModal: null,
+  userInput: null,
+  stage: null,
+  onClose: null,
+  meta: null
+};
+const FulfillmentProviderWrapped = withCurrentProduct(connect(FulfillmentProvider));
+
+/**
  * Opens the sheet that is wrapped inside the provider.
- * @param {Object} params The opening parameters.
- * @property {Function} [params.callback] A callback function that's when the sheet closes.
- * @property {string} [params.stage] A specific stage to show.
- * @property {string} [params.fulfillmentPath] The fulfillment path that was chosen.
- * @property {boolean} [params.changeOnly=false] Whether only the location will be changed.
- */export function openSheet(params){UIEvents.emit(EVENT_SET_OPEN,params);}export default FulfillmentProviderWrapped;
+ * @param {SheetOpenParams} params The opening parameters.
+ */
+export const openSheet = params => {
+  UIEvents.emit(EVENT_SET_OPEN, params);
+};
+export default FulfillmentProviderWrapped;

package/locations/providers/FulfillmentProvider.types.js

@@ -1 +1,50 @@
-import*as React from'react';
+/* eslint-disable max-len */
+/**
+ * @typedef {import('../../product/product.types').Product} Product
+ * @typedef {import('../locations.types').Location} Location
+ * @typedef {import('../locations.types').ReservationFormValues} ReservationFormValues
+ * @typedef {import('../locations.types').ReservationResponse} ReservationResponse
+ * @typedef {import('../locations.types').SheetStage} SheetStage
+ * @typedef {import('../../cart/cart.types').AddToCartProduct} AddToCartProduct
+ * @typedef {import('../../cart/cart.types').Item} Item
+ * @typedef {import('../../core/config/config.types').ShopSettings} ShopSettings
+ */
+
+/**
+ * @typedef {Object} OwnProps
+ * @property {React.ReactNode} children
+ * @property {boolean} [open]
+ * @property {string} [title]
+ * @property {boolean} [changeOnly]
+ * @property {(location: Location|null, productId: string|null, orderSuccess?: boolean|null) => void} [onClose]
+ * @property {Object<string, any>} [meta]
+ * @property {SheetStage} [stage]
+ * @property {boolean} [updatePreferredLocation]
+ * @property {boolean} [restrictMultiLocationOrders]
+ * @property {boolean} [isCart]
+ * @property {Object[]} [cartProducts]
+ * @property {boolean} [fulfillmentSchedulingEnabled]
+ * @property {string} [activeFulfillmentSlotLocationCode]
+ * @property {Object} [activeFulfillmentSlot]
+ */
+
+/**
+ * @typedef {Object} StateProps
+ * @property {Location[]|null} locations
+ * @property {ReservationFormValues|null} userInput
+ * @property {string[]} fulfillmentPaths
+ * @property {string[]} [fulfillmentMethods]
+ * @property {ShopSettings} [shopSettings]
+ * @property {any} inventory
+ * @mixes Product
+ */
+
+/**
+ * @typedef {Object} DispatchProps
+ * @property {function({location: Location}):void} selectLocation
+ * @property {function(ReservationFormValues, Product|null):Promise<ReservationResponse>} submitReservation
+ * @property {function(ReservationFormValues):void} storeFormInput
+ * @property {function(AddToCartProduct[]):void} addProductsToCart
+ * @property {function(Item[]):void} updateProductsInCart
+ */
+/* eslint-enable max-len */

package/locations/providers/StoreDetailsContext.js

@@ -1 +1,2 @@
-import{createContext}from'react';export var StoreDetailsContext=createContext({});
+import { createContext } from 'react';
+export const StoreDetailsContext = /*#__PURE__*/createContext({});

package/locations/providers/StoreDetailsProvider.js

@@ -1,6 +1,54 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useMemo,useCallback}from'react';import{useSelector}from'react-redux';import PropTypes from'prop-types';import{useRoute}from'@shopgate/engage/core/hooks';import{getPreferredLocation,makeGetLocation,makeGetNearbyLocationsByLocationCode}from"../selectors";import connect from"./StoreFinder.connector";import{StoreDetailsContext}from"./StoreDetailsContext";/**
+import React, { useMemo, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useRoute } from '@shopgate/engage/core/hooks';
+import { getPreferredLocation, makeGetLocation, makeGetNearbyLocationsByLocationCode } from "../selectors";
+import connect from "./StoreFinder.connector";
+import { StoreDetailsContext } from "./StoreDetailsContext";
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var StoreDetailsProvider=function StoreDetailsProvider(_ref){var children=_ref.children,selectGlobalLocation=_ref.selectGlobalLocation,selectLocation=_ref.selectLocation;var _useRoute=useRoute(),locationCode=_useRoute.params.code;var getLocation=useMemo(function(){return makeGetLocation(function(){return locationCode;});},[locationCode]);var routeLocation=useSelector(getLocation);var preferredLocation=useSelector(getPreferredLocation);var isRouteLocationPreferred=useMemo(function(){return preferredLocation&&routeLocation&&preferredLocation.code===routeLocation.code;},[preferredLocation,routeLocation]);var getNearbyLocations=useMemo(function(){return makeGetNearbyLocationsByLocationCode(locationCode);},[locationCode]);var nearbyLocations=useSelector(getNearbyLocations);var selectLocationCb=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(location){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return selectLocation({location:location,showToast:true});case 2:if(location.code!==(preferredLocation===null||preferredLocation===void 0?void 0:preferredLocation.code)){// Only dispatch selectGlobalLocation when location really changed, since this action
-// might clear product data from the resultsByHash product storage.
-selectGlobalLocation(location);}case 3:case"end":return _context.stop();}},_callee);}));return function(_x){return _ref2.apply(this,arguments);};}(),[preferredLocation,selectLocation,selectGlobalLocation]);var value=useMemo(function(){return{preferredLocation:preferredLocation,routeLocation:routeLocation,nearbyLocations:nearbyLocations,isRouteLocationPreferred:isRouteLocationPreferred,selectLocation:selectLocationCb};},[isRouteLocationPreferred,nearbyLocations,preferredLocation,routeLocation,selectLocationCb]);return React.createElement(StoreDetailsContext.Provider,{value:value},children);};StoreDetailsProvider.defaultProps={children:null};export default connect(StoreDetailsProvider);
+ */
+const StoreDetailsProvider = ({
+  children,
+  selectGlobalLocation,
+  selectLocation
+}) => {
+  const {
+    params: {
+      code: locationCode
+    }
+  } = useRoute();
+  const getLocation = useMemo(() => makeGetLocation(() => locationCode), [locationCode]);
+  const routeLocation = useSelector(getLocation);
+  const preferredLocation = useSelector(getPreferredLocation);
+  const isRouteLocationPreferred = useMemo(() => preferredLocation && routeLocation && preferredLocation.code === routeLocation.code, [preferredLocation, routeLocation]);
+  const getNearbyLocations = useMemo(() => makeGetNearbyLocationsByLocationCode(locationCode), [locationCode]);
+  const nearbyLocations = useSelector(getNearbyLocations);
+  const selectLocationCb = useCallback(async location => {
+    await selectLocation({
+      location,
+      showToast: true
+    });
+    if (location.code !== preferredLocation?.code) {
+      // Only dispatch selectGlobalLocation when location really changed, since this action
+      // might clear product data from the resultsByHash product storage.
+      selectGlobalLocation(location);
+    }
+  }, [preferredLocation, selectLocation, selectGlobalLocation]);
+  const value = useMemo(() => ({
+    preferredLocation,
+    routeLocation,
+    nearbyLocations,
+    isRouteLocationPreferred,
+    selectLocation: selectLocationCb
+  }), [isRouteLocationPreferred, nearbyLocations, preferredLocation, routeLocation, selectLocationCb]);
+  return /*#__PURE__*/React.createElement(StoreDetailsContext.Provider, {
+    value: value
+  }, children);
+};
+StoreDetailsProvider.defaultProps = {
+  children: null
+};
+export default connect(StoreDetailsProvider);