@shopgate/engage 7.30.0 → 7.30.1-beta.2

package/a11y/reducers/index.js

@@ -11,8 +11,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @returns {Object} The new state.
  */
-export default function a11y(state = defaultState, action) {
-  /* eslint-disable no-param-reassign */
+export default function a11y(state = defaultState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case A11Y_INCREASE_MODAL_COUNT:
@@ -35,7 +34,5 @@ export default function a11y(state = defaultState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
-
   return producer(state);
 }

package/account/reducers/index.js

@@ -1,6 +1,6 @@
 import { produce } from 'immer';
 import { SUCCESS_LOGOUT } from '@shopgate/engage/core/constants';
-import { FETCH_CUSTOMER_CONTACTS, FETCH_CUSTOMER_CONTACTS_SUCCESS, FETCH_CUSTOMER_CONTACTS_ERROR, FETCH_CUSTOMER, FETCH_CUSTOMER_SUCCESS, FETCH_CUSTOMER_ERROR } from "../constants/actions";
+import { FETCH_CUSTOMER_CONTACTS, FETCH_CUSTOMER_CONTACTS_SUCCESS, FETCH_CUSTOMER_CONTACTS_ERROR, FETCH_CUSTOMER, FETCH_CUSTOMER_SUCCESS, FETCH_CUSTOMER_ERROR } from "../constants";
 const initialState = {
   customer: {
     isFetching: false,
@@ -18,8 +18,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default function checkoutReducer(state = initialState, action) {
-  /* eslint-disable no-param-reassign */
+export default function checkoutReducer(state = initialState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case FETCH_CUSTOMER_CONTACTS:
@@ -64,6 +63,5 @@ export default function checkoutReducer(state = initialState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/app-rating/reducers/index.js

@@ -17,7 +17,7 @@ const defaultState = {
  * @param {Object} action The action object.
  * @return {Object} The new state.
  */
-export default (state = defaultState, action) => {
+export default (state = defaultState, action = {}) => {
   switch (action.type) {
     case APP_RATING_INCREASE_APP_START_COUNT:
       {

package/back-in-stock/reducers/index.js

@@ -12,7 +12,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default (state = initialState, action) => {
+export default (state = initialState, action = {}) => {
   switch (action.type) {
     case FETCH_BACK_IN_STOCK_SUBSCRIPTIONS:
       {

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { TextLink, ProductProperties, QuantityLabel, ConditionalWrapper, MessageBar, SurroundPortals } from '@shopgate/engage/components';
 import { ProductImage, CartUnitQuantityPicker, PriceInfo, ProductName, ITEM_PATH } from '@shopgate/engage/product';

package/cart/components/CartItem/CartItemProductLayoutWide.style.js

@@ -15,7 +15,7 @@ export const imageColumn = css({
   marginRight: variables.gap.small,
   flexShrink: 0,
   flexGrow: 0
-});
+}).toString();
 export const column = css({
   display: 'flex',
   alignItems: 'center',

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useEffect, useRef, useState, Fragment } from 'react';
+import React, { useLayoutEffect, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import { getThemeSettings, showModal, MODAL_PIPELINE_ERROR } from '@shopgate/engage/core';

package/checkout/paymentMethods/stripe/StripeButton.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'glamor';
 import Button from "../../components/PaymentMethodButton";
@@ -16,8 +16,12 @@ const styles = {
 };
 
 /**
- * Stripe
+ * Stripe Payment Button Component
  * @param {Object} props Props
+ * @param {string} props.publishableKey Publishable Key
+ * @param {Function} props.onChange onChange handler
+ * @param {boolean} props.active Whether the method is active
+ * @param {Object} props.activePaymentMeta Active payment meta
  * @returns {JSX}
  */
 const StripeButton = ({

package/checkout/reducers/index.js

@@ -29,8 +29,7 @@ const initialState = {
  * @param {Object} action The redux action.
  * @returns {Object}
  */
-export default function checkoutReducer(state = initialState, action) {
-  /* eslint-disable no-param-reassign */
+export default function checkoutReducer(state = initialState, action = {}) {
   const producer = produce(draft => {
     switch (action.type) {
       case FETCH_CHECKOUT_ORDER:
@@ -88,6 +87,5 @@ export default function checkoutReducer(state = initialState, action) {
         break;
     }
   });
-  /* eslint-enable no-param-reassign */
   return producer(state);
 }

package/components/IntersectionVisibility/index.js

@@ -14,14 +14,13 @@ import 'intersection-observer';
  *     </IntersectionVisibility>
  */
 let IntersectionVisibility = /*#__PURE__*/function (_Component) {
-  function IntersectionVisibility(...args) {
+  /**
+   * Initializes the component state.
+   * @param {Object} props The components props.
+   */
+  function IntersectionVisibility(props) {
     var _this;
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.state = {
-      visible: true,
-      ratio: 1,
-      entries: null
-    };
+    _this = _Component.call(this, props) || this;
     /**
      * @param {Object} ref ref
      */
@@ -47,13 +46,19 @@ let IntersectionVisibility = /*#__PURE__*/function (_Component) {
         entries
       });
     };
+    _this.state = {
+      visible: true,
+      ratio: 1,
+      entries: null
+    };
     return _this;
   }
-  _inheritsLoose(IntersectionVisibility, _Component);
-  var _proto = IntersectionVisibility.prototype;
+
   /**
    * Start the observer when the component is mounted
    */
+  _inheritsLoose(IntersectionVisibility, _Component);
+  var _proto = IntersectionVisibility.prototype;
   _proto.componentDidMount = function componentDidMount() {
     this.io = new IntersectionObserver(this.handleIntersectionEvent, {
       threshold: this.props.thresholds

package/core/actions/getGeolocation.js

@@ -18,15 +18,15 @@ import GeolocationRequest from "../classes/GeolocationRequest";
  * @return { Function } A redux thunk.
  */
 const getGeolocation = (options = {}) => async dispatch => {
-  const granted = await dispatch(grantGeolocationPermissions({
+  const result = await dispatch(grantGeolocationPermissions({
     resolveWithData: true,
     ...options
   }));
-  if (typeof granted === 'object') {
+  if (result?.data) {
     // Other than the app, within browsers we might already have a geolocation.
-    return Promise.resolve(granted);
+    return Promise.resolve(result.data);
   }
-  if (!granted) {
+  if (!result.success) {
     const error = new Error('Geolocation permissions not granted.');
     error.code = GEOLOCATION_ERROR_DENIED;
     throw error;

package/core/actions/grantAppTrackingTransparencyPermission.d.ts

@@ -0,0 +1,24 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+export type { GrantPermissionsOptions, GrantPermissionsResult } from './grantPermissions';
+export type { GrantPermissionsOptions, GrantPermissionsResult };
+
+/**
+ * Determines the current state of the app tracking transparency permissions.
+ * If not already happened, the user will be prompted to grant permissions.
+ *
+ * The action returns a promise which resolves with a boolean value, that indicates the state.
+ *
+ * When the "resolveWithData" option is set to TRUE, the promise will resolve with an object
+ * containing the permission status and additional data, instead of a boolean value.
+ */
+declare function grantAppTrackingTransparencyPermission<State = unknown>(
+  options: Omit<GrantPermissionsOptions, 'permissionId'> & { resolveWithData: true }
+): ThunkAction<Promise<GrantPermissionsResult>, State, unknown, UnknownAction>;
+
+declare function grantAppTrackingTransparencyPermission<State = unknown>(
+  options?: Omit<GrantPermissionsOptions, 'permissionId'> & { resolveWithData?: false | undefined }
+): ThunkAction<Promise<boolean>, State, unknown, UnknownAction>;
+
+export default grantAppTrackingTransparencyPermission;

package/core/actions/grantAppTrackingTransparencyPermission.js

@@ -7,15 +7,31 @@ import grantPermissions from "./grantPermissions";
  * The action returns a promise which resolves with a boolean value, that indicates the state.
  * @param {Object} options Action options.
  * @param {Object} [options.meta={}] Additional meta data used for opt-in tracking actions
+ * @param {Object} [options.modal={}] Options for the settings modal.
+ * @param {string} options.modal.title Modal title.
+ * @param {string} options.modal.message Modal message.
+ * @param {string} options.modal.confirm Label for the confirm button.
+ * @param {string} options.modal.dismiss Label for the dismiss button.
+ * @param {Object} options.modal.params Additional parameters for i18n strings.
  * @return { Function } A redux thunk.
  */
 const grantAppTrackingTransparencyPermission = (options = {}) => dispatch => {
   const {
-    meta = {}
+    permissionId,
+    meta = {},
+    modal = {},
+    ...rest
   } = options;
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_APP_TRACKING_TRANSPARENCY,
-    meta
+    meta,
+    modal: {
+      message: 'permissions.access_denied.trackingMessage',
+      confirm: 'permissions.access_denied.settings_button',
+      dismiss: 'modal.dismiss',
+      ...modal
+    },
+    ...rest
   }));
 };
 export default grantAppTrackingTransparencyPermission;

package/core/actions/grantCameraPermissions.d.ts

@@ -0,0 +1,24 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+export type { GrantPermissionsOptions, GrantPermissionsResult } from './grantPermissions';
+export type { GrantPermissionsOptions, GrantPermissionsResult };
+
+/**
+ * Determines the current state of the camera permissions.
+ * If not already happened, the user will be prompted to grant permissions.
+ *
+ * The action returns a promise which resolves with a boolean value, that indicates the state.
+ *
+ * When the "resolveWithData" option is set to TRUE, the promise will resolve with an object
+ * containing the permission status and additional data, instead of a boolean value.
+ */
+declare function grantCameraPermissions<State = unknown>(
+  options: Omit<GrantPermissionsOptions, 'permissionId'> & { resolveWithData: true }
+): ThunkAction<Promise<GrantPermissionsResult>, State, unknown, UnknownAction>;
+
+declare function grantCameraPermissions<State = unknown>(
+  options?: Omit<GrantPermissionsOptions, 'permissionId'> & { resolveWithData?: false | undefined }
+): ThunkAction<Promise<boolean>, State, unknown, UnknownAction>;
+
+export default grantCameraPermissions;

package/core/actions/grantCameraPermissions.js

@@ -18,8 +18,10 @@ import grantPermissions from "./grantPermissions";
  */
 const grantCameraPermissions = (options = {}) => dispatch => {
   const {
+    permissionId,
     useSettingsModal = false,
-    modal = {}
+    modal = {},
+    ...rest
   } = options;
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_CAMERA,
@@ -30,7 +32,8 @@ const grantCameraPermissions = (options = {}) => dispatch => {
       confirm: 'permissions.access_denied.settings_button',
       dismiss: 'common.close',
       ...modal
-    }
+    },
+    ...rest
   }));
 };
 export default grantCameraPermissions;

package/core/actions/grantGeolocationPermissions.d.ts

@@ -0,0 +1,36 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+import type { GrantPermissionsOptions, GrantPermissionsResult } from './grantPermissions';
+export type { GrantPermissionsOptions, GrantPermissionsResult };
+
+type GeolocationOptions = {
+  /**
+   * Whether to request background location access.
+   *
+   * **Note:** Since background location access will cause extended reviews by Google and Apple,
+   * this feature needs to be explicitly enabled by Shopgate.
+   */
+  requireBackgroundAccess?: boolean;
+}
+
+type GeolocationGrantOptions = Omit<GrantPermissionsOptions, 'permissionId'> & GeolocationOptions;
+
+/**
+ * Determines the current state of the geolocation permissions.
+ * If not already happened, the user will be prompted to grant permissions.
+ *
+ * The action returns a promise which resolves with a boolean value, that indicates the state.
+ *
+ * When the "resolveWithData" option is set to TRUE, the promise will resolve with an object
+ * containing the permission status and additional data, instead of a boolean value.
+ */
+declare function grantGeolocationPermissions<State = unknown>(
+  options: GeolocationGrantOptions & { resolveWithData: true }
+): ThunkAction<Promise<GrantPermissionsResult>, State, unknown, UnknownAction>;
+
+declare function grantGeolocationPermissions<State = unknown>(
+  options?: GeolocationGrantOptions & { resolveWithData?: false | undefined }
+): ThunkAction<Promise<boolean>, State, unknown, UnknownAction>;
+
+export default grantGeolocationPermissions;

package/core/actions/grantGeolocationPermissions.js

@@ -1,4 +1,4 @@
-import { PERMISSION_ID_LOCATION } from '@shopgate/engage/core/constants';
+import { PERMISSION_ID_LOCATION, PERMISSION_USAGE_ALWAYS } from '@shopgate/engage/core/constants';
 import { hasWebBridge } from '@shopgate/engage/core';
 import grantPermissions from "./grantPermissions";
 
@@ -7,12 +7,15 @@ import grantPermissions from "./grantPermissions";
  * If not already happened, the user will be prompted to grant permissions.
  * The action returns a promise which resolves with a boolean value, that indicates the state.
  * @param {Object} options Action options.
+ * @param {boolean} [options.requireBackgroundAccess=false] When set to TRUE, the action will
+ * attempt to request background location permissions,
  * @param {boolean} [options.useSettingsModal=false] Whether in case of declined permissions a modal
  * shall be presented, which redirects to the app settings.
  * @param {boolean} [options.requestPermissions=true] When set to TRUE the logic will not
  * attempt to request permissions, if they are not granted or determined yet.
- * @param {boolean} [options.resolveWithData=false] If set to TRUE, the promise will resolve
- * with data if available.
+ * @param {boolean} [options.resolveWithData=true] When set to TRUE the promise will resolve with
+ * an object containing the permission status and whether the opt-in dialog was shown,
+ * instead of a boolean value.
  * @param {Object} [options.modal={}] Options for the settings modal.
  * @param {string} options.modal.title Modal title.
  * @param {string} options.modal.message Modal message.
@@ -23,23 +26,32 @@ import grantPermissions from "./grantPermissions";
  */
 const grantGeolocationPermissions = (options = {}) => dispatch => {
   const {
+    permissionId,
     useSettingsModal = false,
     modal = {},
     requestPermissions = true,
-    resolveWithData = false
+    resolveWithData = false,
+    requireBackgroundAccess = false,
+    ...rest
   } = options;
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_LOCATION,
+    ...(requireBackgroundAccess ? {
+      permissionOptions: {
+        usage: PERMISSION_USAGE_ALWAYS
+      }
+    } : {}),
     requestPermissions,
     resolveWithData,
     useSettingsModal,
     modal: {
       title: null,
-      message: 'permissions.access_denied.geolocation_message',
+      message: `permissions.access_denied.${requireBackgroundAccess ? 'geolocationMessageBackground' : 'geolocation_message'}`,
       confirm: !hasWebBridge() ? 'permissions.access_denied.settings_button' : null,
       dismiss: 'modal.dismiss',
       ...modal
-    }
+    },
+    ...rest
   }));
 };
 export default grantGeolocationPermissions;

package/core/actions/grantPermissions.d.ts

@@ -0,0 +1,142 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+type PermissionStatus =
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_STATUS_NOT_DETERMINED
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_STATUS_DENIED
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_STATUS_GRANTED
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_STATUS_NOT_SUPPORTED
+
+type PermissionId =
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_ID_LOCATION
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_ID_BACKGROUND_LOCATION
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_ID_CAMERA
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_ID_PUSH
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_ID_APP_TRACKING_TRANSPARENCY
+
+type PermissionUsage =
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_USAGE_ALWAYS
+  | typeof import('@shopgate/engage/core/constants').PERMISSION_USAGE_WHEN_IN_USE
+
+export interface PermissionMeta {
+  permission: 'push' | 'location' | 'backgroundLocation' | 'camera' | 'tracking' ;
+  context: string;
+  contextCounter?: number;
+  usesSoftPushOptIn?: boolean;
+  usesSoftTrackingOptIn?: boolean;
+}
+
+export interface PermissionModalOptions {
+  /**
+   * Modal title.
+   */
+  title?: string | null;
+  /**
+   * Modal message.
+   */
+  message?: string;
+  /**
+   * Label for the confirm button.
+   */
+  confirm?: string;
+  /**
+   * Label for the dismiss button.
+   */
+  dismiss?: string;
+  /**
+   * Additional parameters for i18n strings.
+   */
+  params?: Record<string, unknown>;
+}
+
+export interface GrantPermissionsOptions {
+  /**
+   * The id of the permission to request.
+   */
+  permissionId: PermissionId;
+
+  /**
+   * Additional options for the permission request (forwarded to native).
+   */
+  permissionOptions?: Record<string, unknown>;
+
+  /**
+   * Whether in case of declined permissions a modal shall redirect to app settings.
+   * Options for the settings modal can be set via `modal` property.
+   */
+  useSettingsModal?: boolean;
+
+  /**
+   * Whether a rationale modal should be shown before requesting the permission.
+   * Options for the rationale modal can be set via `rationaleModal` property.
+   */
+  useRationaleModal?: boolean;
+
+  /**
+   * Options for the rationale modal.
+   */
+  rationaleModal?: PermissionModalOptions;
+
+  /**
+   * Options for the settings modal.
+   */
+  modal?: PermissionModalOptions;
+
+  /**
+   * If TRUE, no permissions will be requested if not already granted.
+   * (I.e. only check status.)
+   */
+  requestPermissions?: boolean;
+
+  /**
+   * If TRUE, resolves with a data object instead of a boolean.
+   * Note: your JS default currently sets `resolveWithData = false`.
+   */
+  resolveWithData?: boolean;
+
+  /**
+   * Meta data used for opt-in tracking actions.
+   */
+  meta?: PermissionMeta & Record<string, unknown>;
+}
+
+export interface GrantPermissionsResult {
+  /**
+   * Whether the permission is granted after the action has been processed.
+   */
+  success: boolean;
+  /**
+   * The current status of the permission after the action has been processed.
+   */
+  status?: PermissionStatus;
+  /**
+   * Whether the user was prompted to grant permissions during the process.
+   */
+  optInRequested: boolean;
+  /**
+   * Additional options for the permission, e.g. usage (forwarded from native).
+   */
+  options?: {
+    usage: PermissionUsage;
+  };
+  /**
+   * Might be set when PWA runs in browser mode. In that cause it can contain resolved
+   * location data.
+   */
+  data?: unknown;
+}
+
+/**
+ * Determines the current state of a specific permission for an app feature. If not already
+ * happened, the user will be prompted to grant permissions.
+ *
+ * The action returns a promise which resolves with a boolean value, that indicates the state.
+ *
+ * When the "resolveWithData" option is set to TRUE, the promise will resolve with an object
+ * containing the permission status and additional data, instead of a boolean value.
+ */
+declare function grantPermissions<State = unknown>(
+  options: GrantPermissionsOptions
+): ThunkAction<Promise<GrantPermissionsResult|boolean>, State, unknown, UnknownAction>;
+
+export default grantPermissions;