@shopgate/pwa-common 7.30.0-alpha.8 → 7.30.0-beta.1

package/providers/loading/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
@@ -6,52 +7,30 @@ import LoadingContext from "./context";
 /**
  * The LoadingProvider component.
  */
-class LoadingProvider extends Component {
-  /**
-   * Adds or increases the loading counter for a path.
-   * @param {string} path The path which loads.
-   */
-  static setLoading(path) {
-    UIEvents.emit(LoadingProvider.SET, path);
-  }
-
-  /**
-   * Resets the loading counter for a path.
-   * @param {string} path The path which loads.
-   */
-  static resetLoading(path) {
-    UIEvents.emit(LoadingProvider.RESET, path);
-  }
-
-  /**
-   * Decreases the loading counter for a path.
-   * @param {string} path The path which loads.
-   */
-  static unsetLoading(path) {
-    UIEvents.emit(LoadingProvider.UNSET, path);
-  }
-
+import { jsx as _jsx } from "react/jsx-runtime";
+let LoadingProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function LoadingProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Adds or increases the loading counter for a path.
      * @param {string} path The path which loads.
      */
-    this.setLoading = path => {
+    _this.setLoading = path => {
       const {
         loading
-      } = this;
+      } = _this;
       const newLoading = {
         ...loading,
         [path]: loading[path] ? loading[path] + 1 : 1
       };
 
       // Immediately updates state due to multiple sets before actual rerender.
-      this.loading = newLoading;
-      this.setState({
+      _this.loading = newLoading;
+      _this.setState({
         loading: newLoading
       });
     };
@@ -59,15 +38,15 @@ class LoadingProvider extends Component {
      * Resets the loading counter for a path.
      * @param {string} path The path which loads.
      */
-    this.resetLoading = path => {
+    _this.resetLoading = path => {
       const {
         [path]: removedPath,
         ...remaining
-      } = this.loading;
+      } = _this.loading;
 
       // Immediately updates state due to multiple sets before actual rerender.
-      this.loading = remaining;
-      this.setState({
+      _this.loading = remaining;
+      _this.setState({
         loading: remaining
       });
     };
@@ -75,15 +54,15 @@ class LoadingProvider extends Component {
      * Decreases the loading counter for a path.
      * @param {string} path The path which loads.
      */
-    this.unsetLoading = path => {
+    _this.unsetLoading = path => {
       const {
         loading
-      } = this;
+      } = _this;
       if (typeof loading[path] === 'undefined') {
         return;
       }
       if (loading[path] <= 1) {
-        this.resetLoading(path);
+        _this.resetLoading(path);
         return;
       }
       const newLoading = {
@@ -92,8 +71,8 @@ class LoadingProvider extends Component {
       };
 
       // Immediately updates state due to multiple sets before actual rerender.
-      this.loading = newLoading;
-      this.setState({
+      _this.loading = newLoading;
+      _this.setState({
         loading: newLoading
       });
     };
@@ -102,44 +81,79 @@ class LoadingProvider extends Component {
      * @param {string} path The path it inspect.
      * @return {boolean}
      */
-    this.isLoading = path => {
+    _this.isLoading = path => {
       const {
         loading
-      } = this.state;
+      } = _this.state;
       return !!loading[path];
     };
-    this.loading = {};
-    this.state = {
+    _this.loading = {};
+    _this.contextValue = null;
+    _this.state = {
       loading: {}
     };
-    UIEvents.addListener(this.constructor.SET, this.setLoading);
-    UIEvents.addListener(this.constructor.RESET, this.resetLoading);
-    UIEvents.addListener(this.constructor.UNSET, this.unsetLoading);
+    UIEvents.addListener(_this.constructor.SET, _this.setLoading);
+    UIEvents.addListener(_this.constructor.RESET, _this.resetLoading);
+    UIEvents.addListener(_this.constructor.UNSET, _this.unsetLoading);
+    return _this;
   }
 
   /**
    * Removes the event listeners when the component unmounts.
    */
-  componentWillUnmount() {
+  _inheritsLoose(LoadingProvider, _Component);
+  /**
+   * Adds or increases the loading counter for a path.
+   * @param {string} path The path which loads.
+   */
+  LoadingProvider.setLoading = function setLoading(path) {
+    UIEvents.emit(LoadingProvider.SET, path);
+  }
+
+  /**
+   * Resets the loading counter for a path.
+   * @param {string} path The path which loads.
+   */;
+  LoadingProvider.resetLoading = function resetLoading(path) {
+    UIEvents.emit(LoadingProvider.RESET, path);
+  }
+
+  /**
+   * Decreases the loading counter for a path.
+   * @param {string} path The path which loads.
+   */;
+  LoadingProvider.unsetLoading = function unsetLoading(path) {
+    UIEvents.emit(LoadingProvider.UNSET, path);
+  };
+  var _proto = LoadingProvider.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     UIEvents.removeListener(this.constructor.SET, this.setLoading);
     UIEvents.removeListener(this.constructor.RESET, this.resetLoading);
     UIEvents.removeListener(this.constructor.UNSET, this.unsetLoading);
-  }
+  };
   /**
    * @return {JSX}
    */
-  render() {
-    const value = {
-      loading: this.state.loading,
+  _proto.render = function render() {
+    const {
+      loading
+    } = this.state;
+    const nextValue = {
+      loading,
       setLoading: this.setLoading,
       unsetLoading: this.unsetLoading,
       isLoading: this.isLoading
     };
-    return /*#__PURE__*/React.createElement(LoadingContext.Provider, {
-      value: value
-    }, this.props.children);
-  }
-}
+    if (!this.contextValue || this.contextValue.loading !== loading) {
+      this.contextValue = nextValue;
+    }
+    return /*#__PURE__*/_jsx(LoadingContext.Provider, {
+      value: this.contextValue,
+      children: this.props.children
+    });
+  };
+  return LoadingProvider;
+}(Component);
 LoadingProvider.SET = 'loading_set';
 LoadingProvider.RESET = 'loading_reset';
 LoadingProvider.UNSET = 'loading_unset';

package/providers/toast/index.js

@@ -1,8 +1,11 @@
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { UIEvents } from '@shopgate/pwa-core';
 import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import ToastContext from "./context";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   variables: {
     toast: {
@@ -14,23 +17,24 @@ const {
 /**
  * The ToastProvider component
  */
-class ToastProvider extends Component {
+let ToastProvider = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(props) {
-    super(props);
+  function ToastProvider(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
     /**
      * Adds a new, unique, toast to the list.
      * @param {Object} toast The toast object to add.
      */
-    this.addToast = toast => {
+    _this.addToast = toast => {
       if (!toast.message) {
         return;
       }
       const {
         toasts
-      } = this.state;
+      } = _this.state;
 
       // Check if the toast id already is present.
       const found = toasts.find(({
@@ -54,56 +58,63 @@ class ToastProvider extends Component {
           duration: toast.duration || duration
         });
       }
-      this.setState({
+      _this.setState({
         toasts
       });
     };
     /**
      * Removes the first toast from the list.
      */
-    this.removeToast = () => {
+    _this.removeToast = () => {
       const {
         toasts
-      } = this.state;
+      } = _this.state;
       toasts.shift();
-      this.setState({
+      _this.setState({
         toasts
       });
     };
-    this.flushToasts = () => {
-      if (this.state.toasts.length) {
-        this.setState({
+    _this.flushToasts = () => {
+      if (_this.state.toasts.length) {
+        _this.setState({
           toasts: []
         });
       }
     };
-    this.state = {
+    _this.state = {
       toasts: []
     };
-    UIEvents.addListener(this.constructor.ADD, this.addToast);
-    UIEvents.addListener(this.constructor.FLUSH, this.flushToasts);
+    UIEvents.addListener(_this.constructor.ADD, _this.addToast);
+    UIEvents.addListener(_this.constructor.FLUSH, _this.flushToasts);
+    return _this;
   }
 
   /**
    * Returns the context value to be passed to consumers.
    * @returns {Object}
    */
-  get provided() {
-    return {
-      addToast: this.addToast,
-      removeToast: this.removeToast,
-      toasts: this.state.toasts
-    };
-  }
+  _inheritsLoose(ToastProvider, _Component);
+  var _proto = ToastProvider.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(ToastContext.Provider, {
-      value: this.provided
-    }, this.props.children);
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(ToastContext.Provider, {
+      value: this.provided,
+      children: this.props.children
+    });
+  };
+  return _createClass(ToastProvider, [{
+    key: "provided",
+    get: function () {
+      return {
+        addToast: this.addToast,
+        removeToast: this.removeToast,
+        toasts: this.state.toasts
+      };
+    }
+  }]);
+}(Component);
 ToastProvider.ADD = 'toast_add';
 ToastProvider.FLUSH = 'toast_flush';
 export default ToastProvider;

package/reducers/modal/index.js

@@ -9,7 +9,7 @@ import { CREATE_MODAL, REMOVE_MODAL } from "../../constants/ActionTypes";
 export default function modalReducer(state = [], action) {
   switch (action.type) {
     case CREATE_MODAL:
-      return [...state, action.options];
+      return [].concat(state, [action.options]);
     case REMOVE_MODAL:
       return state.filter(modal => modal.id !== action.id);
     default:

package/store/index.js

@@ -46,7 +46,7 @@ export function configureStore(reducers, subscribers) {
   if (appConfig.benchmark) {
     benchmarkController.startup();
   }
-  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware(...[thunk, ...(appConfig.benchmark ? [benchmarkMiddleware] : []), streams, logger]), persistState({
+  const store = createStore(makeRootReducer(reducers), getInitialState(), composeWithDevTools(applyMiddleware.apply(void 0, [thunk].concat(appConfig.benchmark ? [benchmarkMiddleware] : [], [streams, logger])), persistState({
     key: storeKey,
     paths: persistedReducers.getAll()
   })));

package/subscriptions/helpers/buildRegisterUrl.js

@@ -15,6 +15,7 @@ const getRegisterUrl = (url, redirect = '') => {
   const redirectTo = redirect && !redirect.startsWith(CHECKOUT_PATH) ? redirect : INDEX_PATH;
 
   // Build the callback data.
+
   parsed.query.sgcloud_callback_data = JSON.stringify({
     redirectTo
   });

package/components/Input/components/DateInput.js

@@ -1,273 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import DayPicker from 'react-day-picker';
-import MomentLocaleUtils from 'react-day-picker/moment';
-import 'react-day-picker/lib/style.css';
-import { css } from 'glamor';
-import classNames from 'classnames';
-import moment from 'moment';
-import CalendarIcon from '@shopgate/pwa-ui-shared/icons/CalendarIcon';
-import appConfig, { themeConfig } from '@shopgate/pwa-common/helpers/config';
-import Backdrop from '@shopgate/pwa-common/components/Backdrop';
-import { i18n } from '@shopgate/engage/core/helpers';
-import SimpleInput from "./SimpleInput";
-const {
-  variables
-} = themeConfig;
-const locale = appConfig.language.substring(0, 2);
-
-/**
- * @param {Object|string} date The input date
- * @returns {string}
- */
-const getDateFromISO = date => {
-  const result = moment(date);
-  if (!result.isValid()) {
-    return null;
-  }
-  return result.toDate();
-};
-
-/**
- * @param {Object|string} date The input date
- * @param {boolean} validate Should the date be validated
- * @returns {string}
- */
-const getISOFormattedDate = (date, validate = true) => {
-  const result = moment(date, 'L', locale);
-  if (validate && !result.isValid()) {
-    return '';
-  }
-  return result.format(moment.HTML5_FMT.DATE);
-};
-
-/**
- * @param {Object|string} date The input date
- * @returns {string}
- */
-const getLocaleFormattedDate = date => {
-  const result = moment(date);
-  if (!result.isValid()) {
-    return '';
-  }
-  return result.format('L');
-};
-const styles = {
-  selectBox: css({
-    WebkitAppearance: 'none',
-    border: '1px solid var(--color-text-low-emphasis)',
-    padding: '2px 16px 2px 6px',
-    marginRight: 7,
-    backgroundImage: 'url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDA1LjQ1NiA0MDUuNDU2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDUuNDU2IDQwNS40NTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4NCjxnPg0KCTxwYXRoIGQ9Ik03NC4xMzQsNjQuMTQ3Yy00Ljk4NSwwLjA3OC05LjkxMSwyLjE2My0xMy40MzgsNS42ODhsLTU1LDU1QzIuMDk2LDEyOC40MzIsMCwxMzMuNDkyLDAsMTM4LjU4MyAgIHMyLjA5NiwxMC4xNTEsNS42OTcsMTMuNzVsMTgzLjI4MSwxODMuMjgxYzMuNTk5LDMuNjAxLDguNjU5LDUuNjk3LDEzLjc1LDUuNjk3czEwLjE1MS0yLjA5NiwxMy43NS01LjY5N2wxODMuMjgxLTE4My4yODEgICBjMy42MDEtMy41OTksNS42OTctOC42NTksNS42OTctMTMuNzVzLTIuMDk2LTEwLjE1MS01LjY5Ny0xMy43NWwtNTUtNTVjLTMuNTk4LTMuNTkxLTguNjUxLTUuNjgxLTEzLjczNC01LjY4MSAgIGMtNS4wODMsMC0xMC4xMzYsMi4wOS0xMy43MzQsNS42ODFMMjAyLjcyOCwxODQuMzk3TDg4LjE2Niw2OS44MzNDODQuNDk5LDY2LjE2OSw3OS4zMTgsNjQuMDcsNzQuMTM0LDY0LjE0N0w3NC4xMzQsNjQuMTQ3eiIgZmlsbD0iIzk2OTY5NiIvPg0KPC9nPg0KPC9zdmc+DQo=)',
-    backgroundPosition: 'right 4px top 50%',
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 10,
-    borderRadius: 0,
-    outline: 0,
-    cursor: 'pointer'
-  }).toString(),
-  iconWrapper: css({
-    position: 'absolute',
-    right: variables.gap.small,
-    top: '50%',
-    cursor: 'pointer',
-    color: 'var(--color-text-high-emphasis)'
-  }).toString(),
-  pickerWrapper: css({
-    position: 'relative',
-    zIndex: 12
-  }).toString(),
-  picker: css({
-    left: 'inherit !important',
-    right: 5,
-    ' .DayPicker-Day': {
-      padding: '3px !important'
-    },
-    ' .DayPicker-Day--selected': {
-      backgroundColor: 'var(--color-primary) !important'
-    },
-    ' .DayPicker-Footer': {
-      textAlign: 'center'
-    },
-    ' .DayPicker-TodayButton': {
-      color: 'var(--color-primary) !important'
-    },
-    ' .DayPicker-TodayButton:hover': {
-      backgroundColor: 'var(--color-primary) !important',
-      color: '#fff !important'
-    },
-    ' .DayPicker-Caption': {
-      padding: '0 !important'
-    },
-    ' .DayPicker-NavButton': {
-      right: '.5em !important'
-    }
-  }).toString(),
-  pickerTop: css({
-    bottom: 30
-  }).toString(),
-  hidden: css({
-    display: 'none'
-  }).toString()
-};
-const currentYear = new Date().getFullYear();
-const fromMonth = new Date(currentYear - 100, 11);
-const toMonth = new Date(currentYear + 10, 11);
-
-/**
- * @param {Object} props The components props
- * @returns {JSX}
- */
-const Caption = ({
-  date,
-  localeUtils,
-  onChange
-}) => {
-  const months = localeUtils.getMonths(locale);
-  const years = [];
-  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
-    years.push(i);
-  }
-  const handleChange = function handleChange(e) {
-    const {
-      year,
-      month
-    } = e.target.form;
-    onChange(new Date(year.value, month.value));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "DayPicker-Caption"
-  }, /*#__PURE__*/React.createElement("select", {
-    name: "month",
-    onChange: handleChange,
-    value: date.getMonth(),
-    className: styles.selectBox
-  }, months.map((month, i) => /*#__PURE__*/React.createElement("option", {
-    key: month,
-    value: i
-  }, month))), /*#__PURE__*/React.createElement("select", {
-    name: "year",
-    onChange: handleChange,
-    value: date.getFullYear(),
-    className: styles.selectBox
-  }, years.map(year => /*#__PURE__*/React.createElement("option", {
-    key: year,
-    value: year
-  }, year))));
-};
-/**
- * @param {Object} props The components props
- * @returns {JSX}
- */
-const DateInput = ({
-  onFocusChange,
-  onChange,
-  type,
-  value,
-  ...rest
-}) => {
-  const wrapperRef = useRef(null);
-  const [inputValue, setInputValue] = useState(getLocaleFormattedDate(value));
-  const [pickerValue, setPickerValue] = useState(getDateFromISO(value));
-  const [isFocused, setIsFocused] = useState(false);
-  const [pickerVisible, setPickerVisible] = useState(false);
-  useEffect(() => {
-    const updated = getLocaleFormattedDate(value);
-    if (updated) {
-      setInputValue(updated);
-      setPickerValue(getDateFromISO(value));
-    }
-  }, [value]);
-  const needsPositionTop = useCallback(() => {
-    const element = wrapperRef.current;
-    if (!element) {
-      return false;
-    }
-    const {
-      top,
-      height
-    } = element.getBoundingClientRect();
-    const distToBottom = document.body.offsetHeight - (top + height);
-    return distToBottom <= 300;
-  }, [wrapperRef]);
-  const handleInputValueChange = useCallback(val => {
-    setInputValue(val);
-  }, []);
-  const handleFocusChange = useCallback((focused, e) => {
-    if (!focused) {
-      setPickerValue(getDateFromISO(getISOFormattedDate(inputValue)));
-      onChange(inputValue.length !== 0 ? getISOFormattedDate(inputValue, false) : null);
-    }
-    setIsFocused(focused);
-    onFocusChange(focused, e);
-  }, [inputValue, onChange, onFocusChange]);
-  const handlePickerChange = useCallback(date => {
-    setPickerVisible(false);
-    setPickerValue(date);
-    setInputValue(getLocaleFormattedDate(date));
-    onChange(getISOFormattedDate(date));
-  }, [onChange]);
-  const handleMonthChange = useCallback(date => {
-    setPickerValue(date);
-  }, []);
-  const handleIconClick = useCallback(() => {
-    setPickerVisible(!pickerVisible);
-  }, [pickerVisible]);
-  const handleBackdropClick = useCallback(() => {
-    setPickerVisible(false);
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: wrapperRef
-  }, /*#__PURE__*/React.createElement(SimpleInput, _extends({}, rest, {
-    attributes: {
-      placeholder: isFocused ? i18n.text('formats.date.pattern') : null
-    },
-    value: inputValue,
-    type: "text",
-    onFocusChange: handleFocusChange,
-    onChange: handleInputValueChange
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.iconWrapper,
-    onClick: handleIconClick,
-    role: "button",
-    tabIndex: "0",
-    onKeyDown: handleIconClick
-  }, /*#__PURE__*/React.createElement(CalendarIcon, null))), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.pickerWrapper, {
-      [styles.hidden]: !pickerVisible
-    })
-  }, /*#__PURE__*/React.createElement(DayPicker, {
-    className: classNames('DayPickerInput-Overlay', styles.picker, {
-      [styles.pickerTop]: needsPositionTop()
-    }),
-    onDayClick: handlePickerChange,
-    selectedDays: pickerValue,
-    localeUtils: MomentLocaleUtils,
-    locale: locale,
-    todayButton: i18n.text('locations.your_current_timeslot.today'),
-    onTodayButtonClick: handlePickerChange,
-    month: pickerValue,
-    showOutsideDays: true,
-    captionElement: ({
-      date,
-      localeUtils
-    }) => /*#__PURE__*/React.createElement(Caption, {
-      date: date,
-      localeUtils: localeUtils,
-      onChange: handleMonthChange
-    })
-  })), pickerVisible && /*#__PURE__*/React.createElement(Backdrop, {
-    isVisible: true,
-    level: 11,
-    opacity: 0,
-    onClick: handleBackdropClick
-  }));
-};
-DateInput.defaultProps = {
-  onFocusChange: () => {},
-  onChange: () => {},
-  type: null,
-  value: null
-};
-export default DateInput;