@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/locations/providers/FulfillmentProvider.js

@@ -21,7 +21,7 @@ import connect from "./FulfillmentProvider.connector";
 /**
  * @typedef {OwnProps & StateProps & DispatchProps} Props
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export const EVENT_SET_OPEN = 'FulfillmentProvider.setOpen';
 let callback = null;
 
@@ -87,9 +87,6 @@ const FulfillmentProvider = props => {
       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:
@@ -98,6 +95,9 @@ const FulfillmentProvider = props => {
         return i18n.text('locations.error_heading');
       case STAGE_FULFILLMENT_METHOD:
         return i18n.text('locations.change_fulfillment_method');
+      case STAGE_SELECT_STORE:
+      default:
+        return i18n.text('locations.headline');
     }
   }, [props.title, stage]);
 
@@ -126,7 +126,7 @@ const FulfillmentProvider = props => {
    * @param {SheetStage} inputStage The stage to check for.
    * @returns {boolean}
    */
-  const isStage = inputStage => inputStage === stage;
+  const isStage = useCallback(inputStage => inputStage === stage, [stage]);
 
   /**
    * Handles opening of the sheet.
@@ -146,7 +146,7 @@ const FulfillmentProvider = props => {
    * @param {string|null} productId - The product ID or null if no product is provided.
    * @returns {void}
    */
-  const handleClose = (location = null, productId = null) => {
+  const handleClose = useCallback((location = null, productId = null) => {
     let orderSuccess = true;
     if (isStage(STAGE_RESPONSE_ERROR)) {
       orderSuccess = errors === null;
@@ -166,7 +166,7 @@ const FulfillmentProvider = props => {
     setErrors(null);
     setIsChangeFulfillment(false);
     setFulfillmentMethod(null);
-  };
+  }, [errors, isStage, props]);
   useEffect(() => {
     UIEvents.addListener(EVENT_SET_OPEN, handleOpen);
     return () => {
@@ -178,7 +178,7 @@ const FulfillmentProvider = props => {
    * Handles the sending of the reservation.
    * @param {ReservationFormValues} values The reservation form values.
    */
-  async function sendReservation(values) {
+  const sendReservation = useCallback(async values => {
     try {
       const response = await submitReservation(values, product);
       if (response.errors && response.errors.length > 0) {
@@ -198,13 +198,13 @@ const FulfillmentProvider = props => {
 
     // Store the user's form in the user data.
     storeFormInput(values);
-  }
+  }, [product, storeFormInput, submitReservation]);
 
   /**
    * @param {Location} location The selected location.
    * @returns {boolean}
    */
-  const confirmSelection = async location => {
+  const confirmSelection = useCallback(async location => {
     const {
       code,
       name
@@ -248,13 +248,13 @@ const FulfillmentProvider = props => {
       setIsLoading(false);
     }
     return confirmed;
-  };
+  }, [cartProducts, isCart, restrictMultiLocationOrders, showModal, updateProductsInCart]);
 
   /**
    * Handles multiline reservation.
    * @param {Location} location The selected location.
-   * */
-  const handleMultilineReservation = location => {
+   */
+  const handleMultilineReservation = useCallback(location => {
     if (product === null || location.code === null) {
       return;
     }
@@ -276,7 +276,7 @@ const FulfillmentProvider = props => {
       }]);
     }
     handleClose(location, product.id);
-  };
+  }, [activeFulfillmentSlot?.id, activeFulfillmentSlotLocationCode, cartItem, fulfillmentMethod, fulfillmentSchedulingEnabled, handleClose, isChangeFulfillment, product, updateProductsInCart]);
 
   /**
    * Handles quick reservation.
@@ -290,7 +290,7 @@ const FulfillmentProvider = props => {
    * @param {Location} location The selected location.
    * @returns {Promise<void>}
    */
-  async function handleSelectLocation(location) {
+  const handleSelectLocation = useCallback(async location => {
     if (isLoading) {
       return;
     }
@@ -354,13 +354,13 @@ const FulfillmentProvider = props => {
     if (fulfillmentPath === QUICK_RESERVE) {
       handleQuickReservation();
     }
-  }
+  }, [changeOnly, confirmSelection, fulfillmentPath, fulfillmentPaths, handleClose, handleMultilineReservation, isLoading, product, selectLocation, updatePreferredLocation]);
 
   /**
    * @param {string} method The selected fulfillment method.
    * @param {Object} item The cart item to change.
    */
-  const handleChangeFulfillmentMethod = (method, item) => {
+  const handleChangeFulfillmentMethod = useCallback((method, item) => {
     logger.assert(item.product.id === product.id, 'Change fulfillment method is called with unexpected product id');
     setIsChangeFulfillment(true);
     setCartItem(item);
@@ -385,11 +385,11 @@ const FulfillmentProvider = props => {
       }]);
       handleClose(null, item.product.id);
     }
-  };
+  }, [handleClose, product?.id, updateProductsInCart]);
   const handleSelectStoreFinderLocation = useCallback(location => {
     setStoreFinderLocation(location);
   }, []);
-  const context = {
+  const context = useMemo(() => ({
     stage,
     title,
     fulfillmentPath,
@@ -422,10 +422,11 @@ const FulfillmentProvider = props => {
     isLoading,
     setIsLoading,
     meta: props.meta || undefined
-  };
-  return /*#__PURE__*/React.createElement(FulfillmentContext.Provider, {
-    value: context
-  }, children);
+  }), [changeOnly, enabledFulfillmentMethods, errors, fulfillmentMethods, fulfillmentPath, fulfillmentPaths, handleChangeFulfillmentMethod, handleClose, handleSelectLocation, handleSelectStoreFinderLocation, inventory, isFetching, isLoading, isOpen, isStage, isStoreFinder, locations, noInventory, noLocationSelection, orderNumbers, product, productLocation, props.meta, propsBaseProduct, sendReservation, shopSettings, stage, storeFinderLocation, title, userInput]);
+  return /*#__PURE__*/_jsx(FulfillmentContext.Provider, {
+    value: context,
+    children: children
+  });
 };
 FulfillmentProvider.defaultProps = {
   open: false,

package/locations/providers/StoreDetailsProvider.js

@@ -10,6 +10,7 @@ import { StoreDetailsContext } from "./StoreDetailsContext";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreDetailsProvider = ({
   children,
   selectGlobalLocation,
@@ -44,9 +45,10 @@ const StoreDetailsProvider = ({
     isRouteLocationPreferred,
     selectLocation: selectLocationCb
   }), [isRouteLocationPreferred, nearbyLocations, preferredLocation, routeLocation, selectLocationCb]);
-  return /*#__PURE__*/React.createElement(StoreDetailsContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(StoreDetailsContext.Provider, {
+    value: value,
+    children: children
+  });
 };
 StoreDetailsProvider.defaultProps = {
   children: null

package/locations/providers/StoreFinderProvider.js

@@ -12,6 +12,7 @@ import { useNavigation } from "../../core";
  * @param {Object} props The component props
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const StoreFinderProvider = ({
   children,
   locations,
@@ -61,9 +62,10 @@ const StoreFinderProvider = ({
     storeFinderSearch,
     setIsLoading
   }), [isFetching, locations, selectLocationCb, selectedLocation, shopSettings, storeFinderSearch, userSearch, setIsLoading]);
-  return /*#__PURE__*/React.createElement(StoreFinderContext.Provider, {
-    value: value
-  }, children);
+  return /*#__PURE__*/_jsx(StoreFinderContext.Provider, {
+    value: value,
+    children: children
+  });
 };
 StoreFinderProvider.defaultProps = {
   children: null,

package/login/components/ForgotPassword/ForgotPassword.js

@@ -11,6 +11,7 @@ import connect from "./ForgotPassword.connector";
  * @param {Object} props The component props.
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ForgotPassword = ({
   resetPassword,
   goBack
@@ -43,56 +44,69 @@ const ForgotPassword = ({
   const handleBackToLogin = useCallback(() => {
     goBack();
   }, [goBack]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement("div", {
-    className: headline
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "login.forgot_password"
-  })), !showSuccess ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: subline
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "login.reset_password.subline"
-  })), /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit,
-    className: form
-  }, /*#__PURE__*/React.createElement(TextField, {
-    type: "email",
-    name: "email",
-    className: input,
-    label: "login.email",
-    value: email,
-    onChange: value => setEmail(value),
-    errorText: validationError
-  }), /*#__PURE__*/React.createElement("div", {
-    className: buttonContainer
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    className: button,
-    type: "secondary",
-    disabled: loading
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "common.submit"
-  }))))) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: resetInstructions
-  }, /*#__PURE__*/React.createElement("span", {
-    /* eslint-disable react/no-danger */
-    dangerouslySetInnerHTML: {
-      __html: i18n.text('login.reset_password.reset_instructions', {
-        email: `<span class="${resetInstructionsEmail}">${email}</span>`
+  return /*#__PURE__*/_jsxs("div", {
+    className: container,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: headline,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "login.forgot_password"
       })
-    }
-    /* eslint-enable react/no-danger */
-  })), /*#__PURE__*/React.createElement("div", {
-    className: goBackButtonContainer
-  }, /*#__PURE__*/React.createElement(RippleButton, {
-    flat: true,
-    className: goBackButton,
-    type: "secondary",
-    onClick: handleBackToLogin
-  }, /*#__PURE__*/React.createElement(ArrowIcon, {
-    className: goBackButtonIcon
-  }), /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "login.reset_password.back_to_login"
-  })))));
+    }), !showSuccess ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: subline,
+        children: /*#__PURE__*/_jsx(I18n.Text, {
+          string: "login.reset_password.subline"
+        })
+      }), /*#__PURE__*/_jsxs("form", {
+        onSubmit: handleSubmit,
+        className: form,
+        children: [/*#__PURE__*/_jsx(TextField, {
+          type: "email",
+          name: "email",
+          className: input,
+          label: "login.email",
+          value: email,
+          onChange: value => setEmail(value),
+          errorText: validationError
+        }), /*#__PURE__*/_jsx("div", {
+          className: buttonContainer,
+          children: /*#__PURE__*/_jsx(RippleButton, {
+            className: button,
+            type: "secondary",
+            disabled: loading,
+            children: /*#__PURE__*/_jsx(I18n.Text, {
+              string: "common.submit"
+            })
+          })
+        })]
+      })]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: resetInstructions,
+        children: /*#__PURE__*/_jsx("span", {
+          /* eslint-disable react/no-danger */
+          dangerouslySetInnerHTML: {
+            __html: i18n.text('login.reset_password.reset_instructions', {
+              email: `<span class="${resetInstructionsEmail}">${email}</span>`
+            })
+          }
+          /* eslint-enable react/no-danger */
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: goBackButtonContainer,
+        children: /*#__PURE__*/_jsxs(RippleButton, {
+          flat: true,
+          className: goBackButton,
+          type: "secondary",
+          onClick: handleBackToLogin,
+          children: [/*#__PURE__*/_jsx(ArrowIcon, {
+            className: goBackButtonIcon
+          }), /*#__PURE__*/_jsx(I18n.Text, {
+            string: "login.reset_password.back_to_login"
+          })]
+        })
+      })]
+    })]
+  });
 };
 export default connect(ForgotPassword);

package/orders/components/OrderDetails/OrderDetails.js

@@ -9,6 +9,7 @@ import OrderDetailsPrivateProvider from "../../providers/OrderDetailsPrivateProv
  * The OrderDetails components
  * @returns {JSX}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const OrderDetails = () => {
   const {
     params: {
@@ -17,12 +18,14 @@ const OrderDetails = () => {
     }
   } = useRoute();
   if (orderNumber) {
-    return /*#__PURE__*/React.createElement(OrderDetailsPrivateProvider, {
-      orderNumber: orderNumber
-    }, /*#__PURE__*/React.createElement(OrderDetailsOrder, null));
+    return /*#__PURE__*/_jsx(OrderDetailsPrivateProvider, {
+      orderNumber: orderNumber,
+      children: /*#__PURE__*/_jsx(OrderDetailsOrder, {})
+    });
   }
-  return /*#__PURE__*/React.createElement(OrderDetailsProvider, {
-    orderId: orderId
-  }, /*#__PURE__*/React.createElement(OrderDetailsContent, null));
+  return /*#__PURE__*/_jsx(OrderDetailsProvider, {
+    orderId: orderId,
+    children: /*#__PURE__*/_jsx(OrderDetailsContent, {})
+  });
 };
 export default OrderDetails;

package/orders/components/OrderDetails/OrderDetailsAuthenticate.js

@@ -8,6 +8,7 @@ import { container, form, submitButton, loginLink, messageBarContainer } from ".
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderDetailsAuthenticate = () => {
   const {
     pathname
@@ -45,52 +46,67 @@ const OrderDetailsAuthenticate = () => {
   if (!showForm && !messages) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "<=xs"
-  }, messages && /*#__PURE__*/React.createElement(MessageBar, {
-    messages: messages,
-    showIcons: true,
-    classNames: {
-      container: messageBarContainer
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: container
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    webOnly: true,
-    breakpoint: ">xs"
-  }, messages && /*#__PURE__*/React.createElement(MessageBar, {
-    messages: messages,
-    showIcons: true,
-    classNames: {
-      container: messageBarContainer
-    }
-  })), showForm && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "order_details.authenticate.instructions"
-  }), !isUserLoggedIn && /*#__PURE__*/React.createElement(Fragment, null, ' ', /*#__PURE__*/React.createElement(Link, {
-    className: loginLink,
-    tag: "span",
-    href: LOGIN_PATH,
-    state: {
-      redirect: {
-        location: pathname
-      }
-    }
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "order_details.authenticate.or_login"
-  })))), /*#__PURE__*/React.createElement(FormBuilder, {
-    className: form,
-    name: "orderDetailsAuthenticate",
-    config: formConfig,
-    defaults: defaultFormState,
-    validationErrors: validationErrors,
-    handleUpdate: handleUpdate,
-    onSubmit: handleSubmit
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(RippleButton, {
-    type: "secondary",
-    onClick: handleSubmit,
-    disabled: isLoading,
-    className: submitButton
-  }, i18n.text('common.submit'))))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+      appAlways: true,
+      breakpoint: "<=xs",
+      children: messages && /*#__PURE__*/_jsx(MessageBar, {
+        messages: messages,
+        showIcons: true,
+        classNames: {
+          container: messageBarContainer
+        }
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: container,
+      children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
+        webOnly: true,
+        breakpoint: ">xs",
+        children: messages && /*#__PURE__*/_jsx(MessageBar, {
+          messages: messages,
+          showIcons: true,
+          classNames: {
+            container: messageBarContainer
+          }
+        })
+      }), showForm && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsxs("p", {
+          children: [/*#__PURE__*/_jsx(I18n.Text, {
+            string: "order_details.authenticate.instructions"
+          }), !isUserLoggedIn && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [' ', /*#__PURE__*/_jsx(Link, {
+              className: loginLink,
+              tag: "span",
+              href: LOGIN_PATH,
+              state: {
+                redirect: {
+                  location: pathname
+                }
+              },
+              children: /*#__PURE__*/_jsx(I18n.Text, {
+                string: "order_details.authenticate.or_login"
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsx(FormBuilder, {
+          className: form,
+          name: "orderDetailsAuthenticate",
+          config: formConfig,
+          defaults: defaultFormState,
+          validationErrors: validationErrors,
+          handleUpdate: handleUpdate,
+          onSubmit: handleSubmit
+        }), /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(RippleButton, {
+            type: "secondary",
+            onClick: handleSubmit,
+            disabled: isLoading,
+            className: submitButton,
+            children: i18n.text('common.submit')
+          })
+        })]
+      })]
+    })]
+  });
 };
 export default OrderDetailsAuthenticate;

package/orders/components/OrderDetails/OrderDetailsContent.js

@@ -8,16 +8,20 @@ import { headline } from "./OrderDetailsContent.style";
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderDetailsContent = () => {
   const {
     errorMessage,
     showForm,
     order
   } = useOrderDetails();
-  return /*#__PURE__*/React.createElement(Fragment, null, (showForm || order || errorMessage) && /*#__PURE__*/React.createElement("div", {
-    className: headline
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "titles.order_details"
-  })), /*#__PURE__*/React.createElement(OrderDetailsAuthenticate, null), /*#__PURE__*/React.createElement(OrderDetailsOrder, null));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [(showForm || order || errorMessage) && /*#__PURE__*/_jsx("div", {
+      className: headline,
+      children: /*#__PURE__*/_jsx(I18n.Text, {
+        string: "titles.order_details"
+      })
+    }), /*#__PURE__*/_jsx(OrderDetailsAuthenticate, {}), /*#__PURE__*/_jsx(OrderDetailsOrder, {})]
+  });
 };
 export default OrderDetailsContent;

package/orders/components/OrderDetails/OrderDetailsOrder.js

@@ -11,6 +11,7 @@ import { root, contactsWrapper, contact, cartWrapper, summaryWrapper, summary, s
  * The OrderDetailsOrder component
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const OrderDetailsOrder = () => {
   const {
     isUserLoggedIn,
@@ -37,44 +38,48 @@ const OrderDetailsOrder = () => {
   if (!order || !cartItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: root
-  }, /*#__PURE__*/React.createElement(OrderDetailsOrderHeader, {
-    order: order
-  }), /*#__PURE__*/React.createElement("div", {
-    className: contactsWrapper
-  }, !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/React.createElement(CheckoutConfirmationOrderContact, {
-    order: order,
-    className: contact
-  }) : /*#__PURE__*/React.createElement(CheckoutConfirmationBilledTo, {
-    order: order,
-    className: contact
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationShippedTo, {
-    order: order,
-    className: contact
-  }), /*#__PURE__*/React.createElement(CheckoutConfirmationPickUpContact, {
-    order: order,
-    className: contact
-  }), /*#__PURE__*/React.createElement(OrderDetailsOrderPickupLocation, {
-    order: order,
-    className: contact
-  })), /*#__PURE__*/React.createElement("div", {
-    className: cartWrapper
-  }, /*#__PURE__*/React.createElement(CartItems, {
-    cartItems: cartItems,
-    onFocus: () => {},
-    editable: false,
-    multiLineReservation: true,
-    isOrderDetails: true,
-    isDirectShipOnly: isDirectShipOnly,
-    currencyOverride: currencyOverride
-  })), /*#__PURE__*/React.createElement("div", {
-    className: summaryWrapper
-  }, /*#__PURE__*/React.createElement(CheckoutConfirmationOrderSummary, {
-    order: order,
-    className: summary
-  }), /*#__PURE__*/React.createElement(SupplementalContent, {
-    className: supplemental
-  })));
+  return /*#__PURE__*/_jsxs("div", {
+    className: root,
+    children: [/*#__PURE__*/_jsx(OrderDetailsOrderHeader, {
+      order: order
+    }), /*#__PURE__*/_jsxs("div", {
+      className: contactsWrapper,
+      children: [!isUserLoggedIn && isReserveOnly ? /*#__PURE__*/_jsx(CheckoutConfirmationOrderContact, {
+        order: order,
+        className: contact
+      }) : /*#__PURE__*/_jsx(CheckoutConfirmationBilledTo, {
+        order: order,
+        className: contact
+      }), /*#__PURE__*/_jsx(CheckoutConfirmationShippedTo, {
+        order: order,
+        className: contact
+      }), /*#__PURE__*/_jsx(CheckoutConfirmationPickUpContact, {
+        order: order,
+        className: contact
+      }), /*#__PURE__*/_jsx(OrderDetailsOrderPickupLocation, {
+        order: order,
+        className: contact
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: cartWrapper,
+      children: /*#__PURE__*/_jsx(CartItems, {
+        cartItems: cartItems,
+        onFocus: () => {},
+        editable: false,
+        multiLineReservation: true,
+        isOrderDetails: true,
+        isDirectShipOnly: isDirectShipOnly,
+        currencyOverride: currencyOverride
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: summaryWrapper,
+      children: [/*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
+        order: order,
+        className: summary
+      }), /*#__PURE__*/_jsx(SupplementalContent, {
+        className: supplemental
+      })]
+    })]
+  });
 };
 export default OrderDetailsOrder;