@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.11

package/locations/components/FulfillmentSelector/FulfillmentSelectorAlternativeLocation.js

@@ -1,8 +1,124 @@
-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";/**
+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};/**
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function FulfillmentSelectorAlternativeLocation({
+  productId,
+  show,
+  alternativeLocations,
+  provideAlternativeLocation,
+  widgetSettings
+}) {
+  const {
+    merchantSettings = {},
+    selectedLocation
+  } = useFulfillmentSelectorState();
+  const {
+    alternativeLocationOnPDP: {
+      radius = 50
+    } = {}
+  } = widgetSettings || {};
+  const showAlternative = merchantSettings[MERCHANT_SETTINGS_PRODUCT_SHOW_ALTERNATIVE_LOCATION] || false;
+  useEffect(() => {
+    if (show && showAlternative && productId && !alternativeLocations) {
+      provideAlternativeLocation(productId, {
+        sort: SORT_CLOSEST_LOCATION_WITH_INVENTORY,
+        radius
+      });
+    }
+  }, [productId, provideAlternativeLocation, alternativeLocations, radius, show, showAlternative]);
+  if (!show || !showAlternative || !productId) {
+    return null;
+  }
+  if (!alternativeLocations || !alternativeLocations.length) {
+    return null;
+  }
+  const alternativeLocation = alternativeLocations.find(l => l.code !== selectedLocation?.code);
+  return /*#__PURE__*/_jsx(SurroundPortals, {
+    portalName: PRODUCT_FULFILLMENT_SELECTOR_ALTERNATIVE_LOCATION,
+    portalProps: {
+      productId,
+      location: alternativeLocation
+    },
+    children: alternativeLocation && /*#__PURE__*/_jsxs(Grid, {
+      component: "div",
+      className: gridClassName,
+      children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
+        appAlways: true,
+        breakpoint: "xs",
+        children: [/*#__PURE__*/_jsx(Grid.Item, {
+          className: itemColumn,
+          grow: 1,
+          shrink: 0,
+          component: "div",
+          children: /*#__PURE__*/_jsx("div", {
+            className: locationName,
+            children: alternativeLocation.name
+          })
+        }), /*#__PURE__*/_jsx(Grid.Item, {
+          className: itemColumn,
+          grow: 1,
+          shrink: 0,
+          component: "div",
+          children: /*#__PURE__*/_jsx(StockInfo, {
+            productId: productId,
+            location: alternativeLocation
+          })
+        })]
+      }), /*#__PURE__*/_jsx(ResponsiveContainer, {
+        webOnly: true,
+        breakpoint: ">xs",
+        children: /*#__PURE__*/_jsxs("div", {
+          className: locationName,
+          children: [alternativeLocation.name, /*#__PURE__*/_jsx("span", {
+            className: itemSpacer,
+            children: /*#__PURE__*/_jsx(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');
+ */
+const mapStateToProps = (state, props) => ({
+  alternativeLocations: getProductAlternativeLocations(state, {
+    productId: props.productId,
+    params: {
+      sort: SORT_CLOSEST_LOCATION_WITH_INVENTORY,
+      radius: props.widgetSettings?.alternativeLocationOnPDP?.radius || 50
+    }
+  })
+});
+const mapDispatchToProps = {
+  provideAlternativeLocation: provideProductAlternativeLocation
+};
+export default withWidgetSettings(connect(mapStateToProps, mapDispatchToProps)(/*#__PURE__*/memo(FulfillmentSelectorAlternativeLocation)), '@shopgate/engage/locations');

package/locations/components/FulfillmentSelector/FulfillmentSelectorBOPIS.js

@@ -1,4 +1,25 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React from'react';import classNames from'classnames';import{i18n}from"../../../core";import{IN_STORE_PICKUP_BOPIS_LABEL}from"../../constants";import{itemRowDisabled}from"./FulfillmentSelectorItem.style";import{useFulfillmentSelectorState}from"./FulfillmentSelector.hooks";/**
+import React from 'react';
+import classNames from 'classnames';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { IN_STORE_PICKUP_BOPIS_LABEL } from "../../constants";
+import { itemRowDisabled } from "./FulfillmentSelectorItem.style";
+import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
+
+/**
  * Renders the FulfillmentSelectorBOPIS components.
- * @returns {JSX}
- */export function FulfillmentSelectorBOPIS(){var _useFulfillmentSelect=useFulfillmentSelectorState(),isBOPISEnabled=_useFulfillmentSelect.isBOPISEnabled,isReady=_useFulfillmentSelect.isReady;var classes=classNames(_defineProperty({},itemRowDisabled.toString(),!isReady||!isBOPISEnabled));return React.createElement("div",{className:classes},i18n.text(IN_STORE_PICKUP_BOPIS_LABEL));}
+ * @returns {JSX.Element}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FulfillmentSelectorBOPIS = () => {
+  const {
+    isBOPISEnabled,
+    isReady
+  } = useFulfillmentSelectorState();
+  const classes = classNames({
+    [itemRowDisabled.toString()]: !isReady || !isBOPISEnabled
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: i18n.text(IN_STORE_PICKUP_BOPIS_LABEL)
+  });
+};

package/locations/components/FulfillmentSelector/FulfillmentSelectorDirectShip.js

@@ -1,5 +1,55 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import*as React from'react';import classNames from'classnames';import{Grid}from'@shopgate/engage/components';import{i18n}from"../../../core";import{Availability}from"../../../product";import{DIRECT_SHIP_LABEL,DIRECT_SHIP}from"../../constants";import{itemRow,itemColumn,itemRowDisabled}from"./FulfillmentSelectorItem.style";import{useFulfillmentSelectorState}from"./FulfillmentSelector.hooks";import{FulfillmentSelectorImpossibleError}from"./FulfillmentSelectorImpossibleError";/**
+import * as React from 'react';
+import classNames from 'classnames';
+import { Grid } from '@shopgate/engage/components';
+import { i18n } from "../../../core";
+import { Availability } from "../../../product";
+import { DIRECT_SHIP_LABEL, DIRECT_SHIP } from "../../constants";
+import { itemRow, itemColumn, itemRowDisabled } from "./FulfillmentSelectorItem.style";
+import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
+import { FulfillmentSelectorImpossibleError } from "./FulfillmentSelectorImpossibleError";
+
+/**
  * Renders the direct ship item label.
- * @param {Object} props The component props.
- * @returns {JSX}
- */export function FulfillmentSelectorDirectShip(){var _useFulfillmentSelect=useFulfillmentSelectorState(),productId=_useFulfillmentSelect.productId,selection=_useFulfillmentSelect.selection,isOrderable=_useFulfillmentSelect.isOrderable,isDirectShipEnabled=_useFulfillmentSelect.isDirectShipEnabled,isReady=_useFulfillmentSelect.isReady;var rowClasses=React.useMemo(function(){return classNames(itemRow,_defineProperty({},itemRowDisabled.toString(),!isReady||!isDirectShipEnabled));},[isDirectShipEnabled,isReady]);var selected=selection===DIRECT_SHIP;if(selected&&!isOrderable){return React.createElement(React.Fragment,null,React.createElement("div",null,i18n.text(DIRECT_SHIP_LABEL)),React.createElement(FulfillmentSelectorImpossibleError,null));}return React.createElement(Grid,{className:rowClasses,component:"div"},React.createElement(Grid.Item,{className:itemColumn,grow:1,shrink:0,component:"div"},i18n.text(DIRECT_SHIP_LABEL)),React.createElement(Grid.Item,{className:itemColumn,grow:1,shrink:0,component:"div"},isReady&&isDirectShipEnabled&&isOrderable&&React.createElement(Availability,{productId:productId,fulfillmentSelection:DIRECT_SHIP})));}
+ * @returns {JSX.Element}
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const FulfillmentSelectorDirectShip = () => {
+  const {
+    productId,
+    selection,
+    isOrderable,
+    isDirectShipEnabled,
+    isReady
+  } = useFulfillmentSelectorState();
+  const rowClasses = React.useMemo(() => classNames(itemRow, {
+    [itemRowDisabled.toString()]: !isReady || !isDirectShipEnabled
+  }), [isDirectShipEnabled, isReady]);
+  const selected = selection === DIRECT_SHIP;
+  if (selected && !isOrderable) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        children: i18n.text(DIRECT_SHIP_LABEL)
+      }), /*#__PURE__*/_jsx(FulfillmentSelectorImpossibleError, {})]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Grid, {
+    className: rowClasses,
+    component: "div",
+    children: [/*#__PURE__*/_jsx(Grid.Item, {
+      className: itemColumn,
+      grow: 1,
+      shrink: 0,
+      component: "div",
+      children: i18n.text(DIRECT_SHIP_LABEL)
+    }), /*#__PURE__*/_jsx(Grid.Item, {
+      className: itemColumn,
+      grow: 1,
+      shrink: 0,
+      component: "div",
+      children: isReady && isDirectShipEnabled && isOrderable && /*#__PURE__*/_jsx(Availability, {
+        productId: productId,
+        fulfillmentSelection: DIRECT_SHIP
+      })
+    })]
+  });
+};

package/locations/components/FulfillmentSelector/FulfillmentSelectorHeader.js

@@ -1,4 +1,17 @@
-import React from'react';import{i18n}from'@shopgate/engage/core';import{container}from"./FulfillmentSelectorHeader.style";/**
+import React from 'react';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { container } from "./FulfillmentSelectorHeader.style";
+
+/**
  * Renders the fulfillment selector title.
- * @returns {JSX}
- */export function FulfillmentSelectorHeader(){return React.createElement("div",{role:"heading",className:container},i18n.text('locations.fulfillment.heading'));}
+ * @returns {JSX.Element}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FulfillmentSelectorHeader = () =>
+/*#__PURE__*/
+// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+_jsx("div", {
+  role: "heading",
+  className: container,
+  children: i18n.text('locations.fulfillment.heading')
+});

package/locations/components/FulfillmentSelector/FulfillmentSelectorHeader.style.js

@@ -1 +1,9 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({fontWeight:500,marginBottom:variables.gap.xsmall});
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const container = css({
+  fontWeight: 500,
+  marginBottom: variables.gap.xsmall
+}).toString();

package/locations/components/FulfillmentSelector/FulfillmentSelectorImpossibleError.js

@@ -1,4 +1,43 @@
-import React,{useMemo,useContext}from'react';import{Availability}from'@shopgate/engage/components';import{i18n,LoadingContext,useRoute}from'@shopgate/engage/core';import{AVAILABILITY_STATE_ALERT}from'@shopgate/engage/product';import{DIRECT_SHIP,ROPIS,BOPIS}from"../../constants";import{useFulfillmentSelectorState}from"./FulfillmentSelector.hooks";import{container}from"./FulfillmentSelectorImpossibleError.style";/**
+import React, { useMemo, useContext } from 'react';
+import { Availability } from '@shopgate/engage/components';
+import { i18n, LoadingContext, useRoute } from '@shopgate/engage/core';
+import { AVAILABILITY_STATE_ALERT } from '@shopgate/engage/product';
+import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
+import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
+import { container } from "./FulfillmentSelectorImpossibleError.style";
+
+/**
  * Renders the "not possible" error for each item.
  * @returns {JSX}
- */export function FulfillmentSelectorImpossibleError(){var _useFulfillmentSelect=useFulfillmentSelectorState(),selection=_useFulfillmentSelect.selection,selectedLocation=_useFulfillmentSelect.selectedLocation;var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useContext=useContext(LoadingContext),isLoading=_useContext.isLoading;var isDirectShip=useMemo(function(){return selection===DIRECT_SHIP;},[selection]);var isInStorePickup=useMemo(function(){return[ROPIS,BOPIS].includes(selection);},[selection]);if(!isDirectShip&&!isInStorePickup||isLoading(pathname)){return null;}var label=i18n.text('locations.fulfillment.error.reserve');if(isDirectShip){label=i18n.text('locations.fulfillment.error.direct_ship');}if(!isDirectShip&&!(selectedLocation===null||selectedLocation===void 0?void 0:selectedLocation.code)){label=i18n.text('locations.fulfillment.error.not_ready');}return React.createElement(Availability,{className:container,showWhenAvailable:true,text:label,state:AVAILABILITY_STATE_ALERT});}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FulfillmentSelectorImpossibleError() {
+  const {
+    selection,
+    selectedLocation
+  } = useFulfillmentSelectorState();
+  const {
+    pathname
+  } = useRoute();
+  const {
+    isLoading
+  } = useContext(LoadingContext);
+  const isDirectShip = useMemo(() => selection === DIRECT_SHIP, [selection]);
+  const isInStorePickup = useMemo(() => [ROPIS, BOPIS].includes(selection), [selection]);
+  if (!isDirectShip && !isInStorePickup || isLoading(pathname)) {
+    return null;
+  }
+  let label = i18n.text('locations.fulfillment.error.reserve');
+  if (isDirectShip) {
+    label = i18n.text('locations.fulfillment.error.direct_ship');
+  }
+  if (!isDirectShip && !selectedLocation?.code) {
+    label = i18n.text('locations.fulfillment.error.not_ready');
+  }
+  return /*#__PURE__*/_jsx(Availability, {
+    className: container,
+    showWhenAvailable: true,
+    text: label,
+    state: AVAILABILITY_STATE_ALERT
+  });
+}

package/locations/components/FulfillmentSelector/FulfillmentSelectorImpossibleError.style.js

@@ -1 +1,4 @@
-import{css}from'glamor';export var container=css({fontSize:'0.625rem'}).toString();
+import { css } from 'glamor';
+export const container = css({
+  fontSize: '0.625rem'
+}).toString();

package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.js

@@ -1,8 +1,79 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import*as React from'react';import classNames from'classnames';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{radioContainer,disabled as radioContainerDisabled,activeIcon,activeIconDisabled,inactiveIcon,inactiveIconDisabled,radio,content}from"./FulfillmentSelectorItem.style";import{useFulfillmentSelectorState}from"./FulfillmentSelector.hooks";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import CheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';
+import UncheckedIcon from '@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';
+import { radioContainer, disabled as radioContainerDisabled, activeIcon, activeIconDisabled, inactiveIcon, inactiveIconDisabled, radio, content } from "./FulfillmentSelectorItem.style";
+import { useFulfillmentSelectorState } from "./FulfillmentSelector.hooks";
+import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
+
+/** @typedef {import('./FulfillmentSelector.types').Selection} Selection */
+
+/**
  * Renders a fulfillment selector radio item.
  * @param {Object} props The component props.
- * @returns {JSX}
- */function FulfillmentSelectorItemUnwrapped(props){var name=props.name,children=props.children,onChange=props.onChange,disabled=props.disabled;var _useFulfillmentSelect=useFulfillmentSelectorState(),selection=_useFulfillmentSelect.selection;var checked=selection===name;/**
+ * @param {Selection} props.name The name of the selection.
+ * @param {React.ReactNode} props.children The child elements.
+ * @param {function(Selection): void} props.onChange The change handler.
+ * @param {boolean} [props.disabled=false] Whether the item is disabled.
+ * @returns {JSX.Element} The rendered component.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FulfillmentSelectorItemUnwrapped = ({
+  name,
+  children,
+  onChange,
+  disabled
+}) => {
+  const {
+    selection
+  } = useFulfillmentSelectorState();
+  const checked = selection === name;
+
+  /**
    * Handle the change to the radio item.
-   * @param {Object} event The change event.
-   */function handleChange(event){event.preventDefault();if(disabled){return;}onChange(name);}var containerClasses=classNames(radioContainer.toString(),_defineProperty({},radioContainerDisabled.toString(),disabled));return React.createElement("label",{htmlFor:name,className:containerClasses,onClick:handleChange,role:"radio","aria-checked":checked,tabIndex:"0"},checked?React.createElement(CheckedIcon,{className:disabled?activeIconDisabled:activeIcon}):React.createElement(UncheckedIcon,{className:disabled?inactiveIconDisabled:inactiveIcon}),React.createElement("input",{type:"radio",checked:checked,name:name,className:radio,readOnly:true}),React.createElement("div",{className:content},children));}FulfillmentSelectorItemUnwrapped.defaultProps={disabled:false};export var FulfillmentSelectorItem=React.memo(FulfillmentSelectorItemUnwrapped);
+   * @param {React.MouseEvent<HTMLLabelElement>} event The click event.
+   */
+  const handleChange = event => {
+    event.preventDefault();
+    if (disabled) {
+      return;
+    }
+    onChange(name);
+  };
+  const containerClasses = classNames(radioContainer.toString(), {
+    [radioContainerDisabled.toString()]: disabled
+  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    _jsxs("label", {
+      htmlFor: name,
+      className: containerClasses,
+      onClick: handleChange
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+      ,
+      role: "radio",
+      "aria-checked": checked,
+      tabIndex: "0",
+      children: [checked ? /*#__PURE__*/_jsx(CheckedIcon, {
+        className: disabled ? activeIconDisabled : activeIcon
+      }) : /*#__PURE__*/_jsx(UncheckedIcon, {
+        className: disabled ? inactiveIconDisabled : inactiveIcon
+      }), /*#__PURE__*/_jsx("input", {
+        type: "radio",
+        checked: checked,
+        name: name,
+        className: radio,
+        readOnly: true
+      }), /*#__PURE__*/_jsx("div", {
+        className: content,
+        children: children
+      })]
+    })
+  );
+};
+FulfillmentSelectorItemUnwrapped.defaultProps = {
+  disabled: false
+};
+export const FulfillmentSelectorItem = /*#__PURE__*/React.memo(FulfillmentSelectorItemUnwrapped);

package/locations/components/FulfillmentSelector/FulfillmentSelectorItem.style.js

@@ -1 +1,60 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var radioContainer=css({display:'flex',flexFlow:'row nowrap',padding:"".concat(variables.gap.xsmall,"px 0")});export var disabled=css({cursor:'not-allowed'});var icon={width:24,height:24,flexShrink:0,marginTop:'-1px',marginRight:variables.gap.small,color:'var(--color-text-medium-emphasis)'};export var inactiveIcon=css(icon).toString();export var inactiveIconDisabled=css(icon,{opacity:0.3}).toString();export var activeIcon=css(icon,{color:"var(--color-primary, ".concat(colors.primary,")")}).toString();export var activeIconDisabled=css(icon,{color:"var(--color-primary, ".concat(colors.primary,")"),opacity:0.3}).toString();export var radio=css({display:'none'});export var content=css({flexGrow:1,color:'var(--color-text-high-emphasis)'});export var itemRow=css({alignContent:'stretch',alignItems:'baseline'}).toString();export var itemRowDisabled=css({opacity:0.3});export var itemSpacer=css({marginLeft:16});export var itemColumn=css({display:'block',width:'50%','&:first-of-type':{paddingRight:variables.gap.small},'&:last-of-type':{textAlign:'right'}}).toString();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables,
+  colors
+} = themeConfig;
+export const radioContainer = css({
+  display: 'flex',
+  flexFlow: 'row nowrap',
+  padding: `${variables.gap.xsmall}px 0`
+});
+export const disabled = css({
+  cursor: 'not-allowed'
+});
+const icon = {
+  width: 24,
+  height: 24,
+  flexShrink: 0,
+  marginTop: '-1px',
+  marginRight: variables.gap.small,
+  color: 'var(--color-text-medium-emphasis)'
+};
+export const inactiveIcon = css(icon).toString();
+export const inactiveIconDisabled = css(icon, {
+  opacity: 0.3
+}).toString();
+export const activeIcon = css(icon, {
+  color: `var(--color-primary, ${colors.primary})`
+}).toString();
+export const activeIconDisabled = css(icon, {
+  color: `var(--color-primary, ${colors.primary})`,
+  opacity: 0.3
+}).toString();
+export const radio = css({
+  display: 'none'
+}).toString();
+export const content = css({
+  flexGrow: 1,
+  color: 'var(--color-text-high-emphasis)'
+}).toString();
+export const itemRow = css({
+  alignContent: 'stretch',
+  alignItems: 'baseline'
+}).toString();
+export const itemRowDisabled = css({
+  opacity: 0.3
+});
+export const itemSpacer = css({
+  marginLeft: 16
+});
+export const itemColumn = css({
+  display: 'block',
+  width: '50%',
+  '&:first-of-type': {
+    paddingRight: variables.gap.small
+  },
+  '&:last-of-type': {
+    textAlign: 'right'
+  }
+}).toString();

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocation.js

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

package/locations/components/FulfillmentSelector/FulfillmentSelectorLocation.style.js

@@ -1 +1,22 @@
-import{css}from'glamor';import{themeVariables,themeColors}from'@shopgate/pwa-common/helpers/config';export var container=css({fontSize:'0.75rem',padding:"0 ".concat(themeVariables.gap.big,"px ").concat(themeVariables.gap.small,"px ").concat(themeVariables.gap.big*3,"px"),marginTop:"-".concat(themeVariables.gap.small,"px"),flexDirection:'column'}).toString();export var alternativeLocation=css({fontSize:'0.825rem',padding:"0 ".concat(themeVariables.gap.big,"px ").concat(themeVariables.gap.small,"px ").concat(themeVariables.gap.big*3,"px")}).toString();export var unavailable=css({color:themeColors.dark,fontSize:'0.625rem',textTransform:'uppercase',letterSpacing:'0.05em',opacity:0.5}).toString();export var locationName=css({color:'var(--color-text-medium-emphasis)'});
+import { css } from 'glamor';
+import { themeVariables, themeColors } from '@shopgate/pwa-common/helpers/config';
+export const container = css({
+  fontSize: '0.75rem',
+  padding: `0 ${themeVariables.gap.big}px ${themeVariables.gap.small}px ${themeVariables.gap.big * 3}px`,
+  marginTop: `-${themeVariables.gap.small}px`,
+  flexDirection: 'column'
+}).toString();
+export const alternativeLocation = css({
+  fontSize: '0.825rem',
+  padding: `0 ${themeVariables.gap.big}px ${themeVariables.gap.small}px ${themeVariables.gap.big * 3}px`
+}).toString();
+export const unavailable = css({
+  color: themeColors.dark,
+  fontSize: '0.625rem',
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+  opacity: 0.5
+}).toString();
+export const locationName = css({
+  color: 'var(--color-text-medium-emphasis)'
+});