@shopgate/engage 7.30.2-beta.1 → 7.30.2-beta.3

package/components/View/components/Content/index.js

@@ -110,7 +110,7 @@ let ViewContent = /*#__PURE__*/function (_Component) {
     window.requestAnimationFrame(() => {
       if (this.ref.current === window) {
         window.scrollTo(0, scrollTop || 0);
-      } else if (this.ref.current?.scrollTop) {
+      } else if (typeof this.ref.current?.scrollTop !== 'undefined') {
         this.ref.current.scrollTop = scrollTop || 0;
       }
     });

package/core/actions/getGeolocation.d.ts

@@ -0,0 +1,34 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+import type { GrantPermissionsOptions } from './grantPermissions';
+
+export type GetGeolocationResult = {
+  /**
+   * The longitude of the user's location.
+   */
+  longitude: number;
+  /**
+   * The latitude of the user's location.
+   */
+  latitude: number;
+  /**
+   * The accuracy of the geolocation data, in meters.
+   */
+  accuracy: number;
+}
+
+export type GetGeolocationReject = Error & { code: string }
+
+/**
+ * Determines the current geolocation of the user. When geolocation permissions are not granted yet,
+ * the user will be prompted to grant access.
+ *
+ * When the permissions are granted, the action will resolve with the geolocation data.
+ * Otherwise, it will reject with an error.
+ */
+declare function getGeolocation<State = unknown>(
+  options: Omit<GrantPermissionsOptions, 'permissionId'|'permissionOptions'>
+): ThunkAction<Promise<GetGeolocationResult, GetGeolocationReject>, State, unknown, UnknownAction>;
+
+export default getGeolocation;

package/core/actions/getGeolocation.js

@@ -9,24 +9,24 @@ import GeolocationRequest from "../classes/GeolocationRequest";
  * @param {Object} options Action options.
  * @param {boolean} [options.useSettingsModal=false] Whether in case of declined permissions a modal
  * shall be presented, which redirects to the app settings.
- * @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.
+ * @param {Object} [options.settingsModal={}] Options for the settings modal.
+ * @param {string} options.settingsModal.title Modal title.
+ * @param {string} options.settingsModal.message Modal message.
+ * @param {string} options.settingsModal.confirm Label for the confirm button.
+ * @param {string} options.settingsModal.dismiss Label for the dismiss button.
+ * @param {Object} options.settingsModal.params Additional parameters for i18n strings.
  * @return { Function } A redux thunk.
  */
 const getGeolocation = (options = {}) => async dispatch => {
-  const granted = await dispatch(grantGeolocationPermissions({
-    resolveWithData: true,
-    ...options
+  const result = await dispatch(grantGeolocationPermissions({
+    ...options,
+    resolveWithData: true
   }));
-  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,25 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+import type { GrantPermissionsOptions, GrantPermissionsResult } from './grantPermissions';
+
+export type GrantAppTrackingTransparencyPermissionsResult = 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'|'permissionOptions'> & { resolveWithData: true }
+): ThunkAction<Promise<GrantAppTrackingTransparencyPermissionsResult>, State, unknown, UnknownAction>;
+
+declare function grantAppTrackingTransparencyPermission<State = unknown>(
+  options?: Omit<GrantPermissionsOptions, 'permissionId'|'permissionOptions'> & { resolveWithData?: false | undefined }
+): ThunkAction<Promise<boolean>, State, unknown, UnknownAction>;
+
+export default grantAppTrackingTransparencyPermission;

package/core/actions/grantAppTrackingTransparencyPermission.js

@@ -7,15 +7,34 @@ 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.settingsModal={}] Options for the settings modal.
+ * @param {string} options.settingsModal.title Modal title.
+ * @param {string} options.settingsModal.message Modal message.
+ * @param {string} options.settingsModal.confirm Label for the confirm button.
+ * @param {string} options.settingsModal.dismiss Label for the dismiss button.
+ * @param {Object} options.settingsModal.params Additional parameters for i18n strings.
  * @return { Function } A redux thunk.
  */
 const grantAppTrackingTransparencyPermission = (options = {}) => dispatch => {
   const {
-    meta = {}
+    permissionId,
+    meta = {},
+    settingsModal,
+    // @deprecated modal setting, to be removed in future major release
+    modal,
+    ...rest
   } = options;
+  const settingsModalOptions = settingsModal || modal || {};
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_APP_TRACKING_TRANSPARENCY,
-    meta
+    meta,
+    settingsModal: {
+      message: 'permissions.access_denied.trackingMessage',
+      confirm: 'permissions.access_denied.settings_button',
+      dismiss: 'modal.dismiss',
+      ...settingsModalOptions
+    },
+    ...rest
   }));
 };
 export default grantAppTrackingTransparencyPermission;

package/core/actions/grantCameraPermissions.d.ts

@@ -0,0 +1,25 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+import type { GrantPermissionsOptions, GrantPermissionsResult } from './grantPermissions';
+
+export type GrantCameraPermissionsResult = 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'|'permissionOptions'> & { resolveWithData: true }
+): ThunkAction<Promise<GrantCameraPermissionsResult>, State, unknown, UnknownAction>;
+
+declare function grantCameraPermissions<State = unknown>(
+  options?: Omit<GrantPermissionsOptions, 'permissionId'|'permissionOptions'> & { resolveWithData?: false | undefined }
+): ThunkAction<Promise<boolean>, State, unknown, UnknownAction>;
+
+export default grantCameraPermissions;

package/core/actions/grantCameraPermissions.js

@@ -8,29 +8,35 @@ import grantPermissions from "./grantPermissions";
  * @param {Object} options Action options.
  * @param {boolean} [options.useSettingsModal=false] Whether in case of declined permissions a modal
  * shall be presented, which redirects to the app settings.
- * @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.
+ * @param {Object} [options.settingsModal={}] Options for the settings modal.
+ * @param {string} options.settingsModal.title Modal title.
+ * @param {string} options.settingsModal.message Modal message.
+ * @param {string} options.settingsModal.confirm Label for the confirm button.
+ * @param {string} options.settingsModal.dismiss Label for the dismiss button.
+ * @param {Object} options.settingsModal.params Additional parameters for i18n strings.
  * @return { Function } A redux thunk.
  */
 const grantCameraPermissions = (options = {}) => dispatch => {
   const {
+    permissionId,
     useSettingsModal = false,
-    modal = {}
+    settingsModal,
+    // @deprecated modal setting, to be removed in future major release
+    modal,
+    ...rest
   } = options;
+  const settingsModalOptions = settingsModal || modal || {};
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_CAMERA,
     useSettingsModal,
-    modal: {
+    settingsModal: {
       title: null,
       message: 'permissions.access_denied.camera_message',
       confirm: 'permissions.access_denied.settings_button',
       dismiss: 'common.close',
-      ...modal
-    }
+      ...settingsModalOptions
+    },
+    ...rest
   }));
 };
 export default grantCameraPermissions;

package/core/actions/grantGeolocationPermissions.d.ts

@@ -0,0 +1,37 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+import type { GrantPermissionsOptions, GrantPermissionsResult } from './grantPermissions';
+
+export type GrantGeolocationPermissionsResult = 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'|'permissionOptions'> & 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<GrantGeolocationPermissionsResult>, 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,39 +7,54 @@ 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 {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.
+ * @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.settingsModal={}] Options for the settings modal.
+ * @param {string} options.settingsModal.title Modal title.
+ * @param {string} options.settingsModal.message Modal message.
+ * @param {string} options.settingsModal.confirm Label for the confirm button.
+ * @param {string} options.settingsModal.dismiss Label for the dismiss button.
+ * @param {Object} options.settingsModal.params Additional parameters for i18n strings.
  * @return { Function } A redux thunk.
  */
 const grantGeolocationPermissions = (options = {}) => dispatch => {
   const {
+    permissionId,
     useSettingsModal = false,
-    modal = {},
+    settingsModal,
+    // @deprecated modal setting, to be removed in future major release
+    modal,
     requestPermissions = true,
-    resolveWithData = false
+    resolveWithData = false,
+    requireBackgroundAccess = false,
+    ...rest
   } = options;
+  const settingsModalOptions = settingsModal || modal || {};
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_LOCATION,
+    ...(requireBackgroundAccess ? {
+      permissionOptions: {
+        usage: PERMISSION_USAGE_ALWAYS
+      }
+    } : {}),
     requestPermissions,
     resolveWithData,
     useSettingsModal,
-    modal: {
+    settingsModal: {
       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
-    }
+      ...settingsModalOptions
+    },
+    ...rest
   }));
 };
 export default grantGeolocationPermissions;

package/core/actions/grantPermissions.d.ts

@@ -0,0 +1,155 @@
+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.
+   */
+  permissionOptions?: Record<string, unknown>;
+
+  /**
+   * Whether in case of declined permissions a modal shall be presented, which redirects to the app settings.
+   * Options for the settings modal can be set via `modal` property.
+   * @default false
+   */
+  useSettingsModal?: boolean;
+
+  /**
+   * Whether a rationale modal should be shown before requesting the permission.
+   * Options for the rationale modal can be set via `rationaleModal` property.
+   * @default false
+   */
+  useRationaleModal?: boolean;
+
+  /**
+   * Options for the rationale modal.
+   * @default {}
+   */
+  rationaleModal?: PermissionModalOptions;
+
+  /**
+   * Options for the settings modal.
+   * @default {}
+   */
+  settingsModal?: PermissionModalOptions;
+
+  /**
+   * Options for the settings modal.
+   * @deprecated use `settingsModal` instead
+   * @default {}
+   */
+  modal?: PermissionModalOptions;
+
+  /**
+   * If set to TRUE no permissions will be requested if not already granted. Otherwise only
+   * the current permission status will be checked without prompting the user.
+   * @default false
+   */
+  requestPermissions?: boolean;
+
+  /**
+   * When set to TRUE the promise will resolve with an object
+   * containing the permission status and additional data, instead of a boolean value.
+   * @default 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;

package/core/actions/grantPermissions.js

@@ -1,53 +1,78 @@
 import event from '@shopgate/pwa-core/classes/Event';
 import { openAppSettings } from '@shopgate/engage/core/commands';
 import { showModal } from '@shopgate/engage/core/actions';
-import { PERMISSION_STATUS_DENIED, PERMISSION_STATUS_GRANTED, PERMISSION_STATUS_NOT_DETERMINED, PERMISSION_STATUS_NOT_SUPPORTED, APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, availablePermissionsIds } from '@shopgate/engage/core/constants';
+import { getIsAndroidApp } from '@shopgate/engage/core/selectors';
+import { PERMISSION_ID_LOCATION, PERMISSION_ID_BACKGROUND_LOCATION, PERMISSION_ID_CAMERA, PERMISSION_STATUS_DENIED, PERMISSION_STATUS_GRANTED, PERMISSION_STATUS_NOT_DETERMINED, PERMISSION_STATUS_NOT_SUPPORTED, PERMISSION_USAGE_ALWAYS, APP_EVENT_APPLICATION_WILL_ENTER_FOREGROUND, availablePermissionsIds } from '@shopgate/engage/core/constants';
 import { logger, hasSGJavaScriptBridge, hasWebBridge } from '@shopgate/engage/core/helpers';
 import { softOptInShown, softOptInSelected, hardOptInShown, hardOptInSelected } from "../action-creators";
 import requestAppPermission from "./requestAppPermission";
 import requestAppPermissionStatus from "./requestAppPermissionStatus";
 import { createMockedPermissions } from "../helpers/appPermissions";
 
+// List of permissions that need a timing based user interaction check on Android, since we can't
+// reliably handle this in the native layer.
+const ANDROID_PERMISSIONS_WITH_USER_INTERACTION_CHECK = [PERMISSION_ID_LOCATION, PERMISSION_ID_BACKGROUND_LOCATION, PERMISSION_ID_CAMERA];
+
 /**
  * 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.
  * @param {Object} options Action options.
  * @param {string} options.permissionId The id of the permission to request.
+ * @param {Object} [options.permissionOptions={}] Additional options for the permission request.
  * @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.useRationaleModal=false] Whether a rational modal should be shown
+ * @param {boolean} [options.useRationaleModal=false] Whether a rational modal should be shown that
+ * describes why the permission is needed before requesting the permission.
  * @param {Object} [options.rationaleModal={}] Options for the rationale modal.
  * @param {string} options.rationaleModal.title Modal title.
  * @param {string} options.rationaleModal.message Modal message.
  * @param {string} options.rationaleModal.confirm Label for the confirm button.
  * @param {string} options.rationaleModal.dismiss Label for the dismiss button.
  * @param {Object} options.rationaleModal.params Additional parameters for i18n strings.
- * @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.
+ * @param {Object} [options.settingsModal={}] Options for the settings modal.
+ * @param {string} options.settingsModal.title Modal title.
+ * @param {string} options.settingsModal.message Modal message.
+ * @param {string} options.settingsModal.confirm Label for the confirm button.
+ * @param {string} options.settingsModal.dismiss Label for the dismiss button.
+ * @param {Object} options.settingsModal.params Additional parameters for i18n strings.
  * @param {boolean} [options.requestPermissions=true] If set to TRUE no permissions will be
  * requested if not already granted,
- * @param {boolean} [options.resolveWithData=false] If set to TRUE the Promise will resolve with
- * data if available (e.g. geolocation).
+ * @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.meta={}] Additional meta data used for opt-in tracking actions
  * @return { Function } A redux thunk.
  */
-const grantPermissions = (options = {}) => dispatch => new Promise(async resolve => {
+const grantPermissions = (options = {}) => (dispatch, getState
+// eslint-disable-next-line no-async-promise-executor
+) => new Promise(async resolve => {
   const {
     permissionId,
+    permissionOptions,
     useSettingsModal = false,
     useRationaleModal = false,
     rationaleModal: rationaleModalOptions = {},
-    modal: modalOptions = {},
+    settingsModal,
+    // @deprecated options, to be removed in future major release
+    modal,
     requestPermissions = true,
     resolveWithData = false,
     meta = {}
   } = options;
+  if (modal) {
+    logger.warn('grantPermissions: The "modal" option is deprecated and will be removed in the future. Please use the "settingsModal" option instead.');
+  }
+
+  // In case the deprecated "modal" option is used, we want to use this for the settings modal, to
+  const settingsModalOptions = settingsModal || modal || {};
   let dispatchMock;
+  let optInRequested = false;
+  const isAndroidApp = getIsAndroidApp(getState());
   if (!hasSGJavaScriptBridge() || hasWebBridge()) {
     /**
      * The fallbackStatus will be used at browsers that don't support the permissions API. By
@@ -60,30 +85,54 @@ const grantPermissions = (options = {}) => dispatch => new Promise(async resolve
   }
   if (!availablePermissionsIds.includes(permissionId)) {
     logger.error('grandPermissions: %s is no valid permission id', permissionId);
-    resolve(false);
+    resolve(resolveWithData ? {
+      success: false,
+      optInRequested
+    } : false);
     return;
   }
   let status;
+  let appPermissionOptions;
   let data;
 
   // Check the current status of the camera permissions.
   ({
-    status
+    status,
+    options: appPermissionOptions
   } = await dispatch(requestAppPermissionStatus({
     permissionId,
     dispatchMock
   })));
 
+  // When the location permission is requested for "always" usage and the permissions where already
+  // granted for "whenInUse" we need to trigger the permission request again to get extended
+  // permissions.
+  const upgradeLocationPermission = permissionId === PERMISSION_ID_LOCATION && permissionOptions?.usage === PERMISSION_USAGE_ALWAYS && status === PERMISSION_STATUS_GRANTED;
+
   // Stop the process when the permission type is not supported.
   if (status === PERMISSION_STATUS_NOT_SUPPORTED) {
-    resolve(false);
+    resolve(resolveWithData ? {
+      success: false,
+      optInRequested,
+      status,
+      ...(appPermissionOptions ? {
+        options: appPermissionOptions
+      } : {})
+    } : false);
     return;
   }
 
   // The user never seen the permissions dialog yet, or temporary denied the permissions (Android).
-  if (status === PERMISSION_STATUS_NOT_DETERMINED) {
+  if (status === PERMISSION_STATUS_NOT_DETERMINED || upgradeLocationPermission) {
     if (!requestPermissions) {
-      resolve(false);
+      resolve(resolveWithData ? {
+        success: false,
+        optInRequested,
+        status,
+        ...(appPermissionOptions ? {
+          options: appPermissionOptions
+        } : {})
+      } : false);
       return;
     }
     if (useRationaleModal) {
@@ -101,7 +150,14 @@ const grantPermissions = (options = {}) => dispatch => new Promise(async resolve
         meta
       }));
       if (requestAllowed === false) {
-        resolve(false);
+        resolve(resolveWithData ? {
+          success: false,
+          optInRequested,
+          status,
+          ...(appPermissionOptions ? {
+            options: appPermissionOptions
+          } : {})
+        } : false);
         return;
       }
     }
@@ -109,15 +165,42 @@ const grantPermissions = (options = {}) => dispatch => new Promise(async resolve
       permissionId,
       meta
     }));
+    const tsBeforeRequest = Date.now();
+    let nativeRequestDuration;
 
     // Trigger the native permissions dialog.
     ({
       status,
-      data
+      data,
+      options: appPermissionOptions,
+      duration: nativeRequestDuration
     } = await dispatch(requestAppPermission({
       permissionId,
-      dispatchMock
+      dispatchMock,
+      ...(permissionOptions ? {
+        options: permissionOptions
+      } : {})
     })));
+    let wasUserInteraction = true;
+
+    /**
+     * On iOS it's not possible to get "notDetermined" status for "always" location permissions.
+     * So we might run into this decision branch of the code for when "always" permissions are
+     * requested, even if we don't know if a dialog will be shown.
+     * We can only guess that the user interacted with the dialog and if we might need to show
+     * the settings modal.
+     *
+     * Additionally, at some permissions requests on Android we can't prevent that the
+     * getPermissions request returns "notDetermined" since there is an user option to ask for
+     * permission acceptance every time its needed. So we also need to try a user interaction guess.
+     */
+    if (upgradeLocationPermission || isAndroidApp && ANDROID_PERMISSIONS_WITH_USER_INTERACTION_CHECK.includes(permissionId)) {
+      // When available, use the duration of the native request as heuristic for user interaction.
+      // It's more accurate, since it won't include the time that communication with the app takes.
+      const requestDuration = typeof nativeRequestDuration === 'number' ? nativeRequestDuration : Date.now() - tsBeforeRequest;
+      wasUserInteraction = requestDuration > 1000;
+    }
+    optInRequested = wasUserInteraction;
     dispatch(hardOptInSelected({
       permissionId,
       status,
@@ -126,34 +209,67 @@ const grantPermissions = (options = {}) => dispatch => new Promise(async resolve
 
     // The user denied the permissions within the native dialog.
     if ([PERMISSION_STATUS_DENIED, PERMISSION_STATUS_NOT_DETERMINED].includes(status)) {
-      resolve(false);
-      return;
+      if (wasUserInteraction) {
+        resolve(resolveWithData ? {
+          success: false,
+          optInRequested,
+          status,
+          ...(appPermissionOptions ? {
+            options: appPermissionOptions
+          } : {})
+        } : false);
+        return;
+      }
     }
   }
   if (status === PERMISSION_STATUS_GRANTED) {
-    resolve(resolveWithData && data ? data : true);
+    resolve(resolveWithData ? {
+      success: true,
+      optInRequested,
+      status,
+      ...(appPermissionOptions ? {
+        options: appPermissionOptions
+      } : {}),
+      ...(data !== undefined ? {
+        data
+      } : {})
+    } : true);
     return;
   }
 
   // The user permanently denied the permissions before.
   if (status === PERMISSION_STATUS_DENIED) {
     if (!useSettingsModal) {
-      resolve(false);
+      resolve(resolveWithData ? {
+        success: false,
+        optInRequested,
+        status,
+        ...(appPermissionOptions ? {
+          options: appPermissionOptions
+        } : {})
+      } : false);
       return;
     }
 
     // Present a modal that describes the situation, and allows the user to enter the app settings.
     const openSettings = await dispatch(showModal({
-      title: modalOptions.title || null,
-      message: modalOptions.message,
-      confirm: modalOptions.confirm,
-      dismiss: modalOptions.dismiss,
-      params: modalOptions.params
+      title: settingsModalOptions.title || null,
+      message: settingsModalOptions.message,
+      confirm: settingsModalOptions.confirm ?? 'permissions.access_denied.settings_button',
+      dismiss: settingsModalOptions.dismiss ?? 'modal.dismiss',
+      params: settingsModalOptions.params
     }));
 
     // The user just closed the modal.
     if (!openSettings) {
-      resolve(false);
+      resolve(resolveWithData ? {
+        success: false,
+        optInRequested,
+        status,
+        ...(appPermissionOptions ? {
+          options: appPermissionOptions
+        } : {})
+      } : false);
       return;
     }
 
@@ -167,7 +283,14 @@ const grantPermissions = (options = {}) => dispatch => new Promise(async resolve
       } = await dispatch(requestAppPermissionStatus({
         permissionId
       })));
-      resolve(status === PERMISSION_STATUS_GRANTED);
+      resolve(resolveWithData ? {
+        success: status === PERMISSION_STATUS_GRANTED,
+        optInRequested,
+        status,
+        ...(appPermissionOptions ? {
+          options: appPermissionOptions
+        } : {})
+      } : status === PERMISSION_STATUS_GRANTED);
     };
 
     /**
@@ -180,6 +303,15 @@ const grantPermissions = (options = {}) => dispatch => new Promise(async resolve
     setTimeout(() => {
       openAppSettings();
     }, 0);
+    return;
   }
+  resolve(resolveWithData ? {
+    success: false,
+    optInRequested,
+    status,
+    ...(appPermissionOptions ? {
+      options: appPermissionOptions
+    } : {})
+  } : false);
 });
 export default grantPermissions;

package/core/actions/grantPushPermissions.d.ts

@@ -0,0 +1,25 @@
+import type { UnknownAction } from 'redux';
+import type { ThunkAction } from 'redux-thunk';
+
+import type { GrantPermissionsOptions,  GrantPermissionsResult } from './grantPermissions';
+
+export type GrantPushPermissionsResult = GrantPermissionsResult;
+
+/**
+ * Determines the current state of the push 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 grantPushPermissions<State = unknown>(
+  options: Omit<GrantPermissionsOptions, 'permissionId'|'permissionOptions'> & { resolveWithData: true }
+): ThunkAction<Promise<GrantPushPermissionsResult>, State, unknown, UnknownAction>;
+
+declare function grantPushPermissions<State = unknown>(
+  options?: Omit<GrantPermissionsOptions, 'permissionId'|'permissionOptions'> & { resolveWithData?: false | undefined }
+): ThunkAction<Promise<boolean>, State, unknown, UnknownAction>;
+
+export default grantPushPermissions;

package/core/actions/grantPushPermissions.js

@@ -15,35 +15,43 @@ import grantPermissions from "./grantPermissions";
  * @param {string} options.rationaleModal.confirm Label for the confirm button.
  * @param {string} options.rationaleModal.dismiss Label for the dismiss button.
  * @param {Object} options.rationaleModal.params Additional parameters for i18n strings.
- * @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.
+ * @param {Object} [options.settingsModal={}] Options for the settings modal.
+ * @param {string} options.settingsModal.title Modal title.
+ * @param {string} options.settingsModal.message Modal message.
+ * @param {string} options.settingsModal.confirm Label for the confirm button.
+ * @param {string} options.settingsModal.dismiss Label for the dismiss button.
+ * @param {Object} options.settingsModal.params Additional parameters for i18n strings.
  * @param {Object} [options.meta={}] Additional meta data used for opt-in tracking actions
+ * @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.
  * @return { Function } A redux thunk.
  */
 const grantPushPermissions = (options = {}) => dispatch => {
   const {
+    permissionId,
     useSettingsModal = true,
     useRationaleModal = false,
-    modal = {},
+    settingsModal = {},
     rationaleModal = {},
-    meta = {}
+    meta = {},
+    ...rest
   } = options;
+  const settingsModalOptions = settingsModal || {};
   return dispatch(grantPermissions({
     permissionId: PERMISSION_ID_PUSH,
     useSettingsModal,
     useRationaleModal,
-    modal: {
+    settingsModal: {
       title: null,
       message: 'permissions.access_denied.push_message',
       confirm: 'permissions.access_denied.settings_button',
-      ...modal
+      dismiss: 'modal.dismiss',
+      ...settingsModalOptions
     },
     rationaleModal,
-    meta
+    meta,
+    ...rest
   }));
 };
 export default grantPushPermissions;

package/core/actions/requestAppPermission.js

@@ -8,6 +8,8 @@ import { appPermissionStatusReceived } from "../action-creators";
  * Additionally it propagates the received status via the APP_PERMISSION_STATUS_RECEIVED action.
  * @param {Object} params The action params
  * @param {string} params.permissionId The desired app permission id
+ * @param {Object} [params.options={}] Additional options for the permission request.
+ * E.g. the usage object for geolocation permissions.
  * @param {Function} [params.dispatchMock=null] An optional mock for the request dispatch logic.
  * Usually used when PWA is running inside a browser and app command logic can be simulated via
  * browser APIs like for geolocation access.
@@ -15,6 +17,7 @@ import { appPermissionStatusReceived } from "../action-creators";
  */
 const requestAppPermission = ({
   permissionId,
+  options: requestOptions,
   dispatchMock: dispatchMockParam
 }) => async dispatch => {
   let dispatchMock = dispatchMockParam;
@@ -26,11 +29,15 @@ const requestAppPermission = ({
   const [{
     status,
     options,
-    data
+    data,
+    duration
   } = {
     status: PERMISSION_STATUS_NOT_SUPPORTED
   }] = (await requestAppPermissions([{
-    permissionId
+    permissionId,
+    ...(requestOptions ? {
+      options: requestOptions
+    } : {})
   }], dispatchMock)) ?? [];
   dispatch(appPermissionStatusReceived({
     permissionId,
@@ -39,7 +46,9 @@ const requestAppPermission = ({
   }));
   return {
     status,
-    data
+    options,
+    data,
+    duration
   };
 };
 export default requestAppPermission;

package/core/actions/requestAppPermissionStatus.js

@@ -36,7 +36,8 @@ const requestAppPermissionStatus = ({
     options
   }));
   return {
-    status
+    status,
+    options
   };
 };
 export default requestAppPermissionStatus;

package/core/constants/index.js

@@ -45,4 +45,27 @@ export const EMPTY_OBJECT = Object.freeze({});
  * Helper constant that can be used as a return value in Redux selectors to prevent
  * unnecessary re-renders.
  */
-export const EMPTY_ARRAY = Object.freeze([]);
+export const EMPTY_ARRAY = Object.freeze([]);
+
+/**
+ * Virtual route to trigger a location permission request to the app.
+ */
+export const PERMISSION_REQUEST_ROUTE_LOCATION = '/permissions/location';
+/**
+ * Virtual route to trigger a background location permission request to the app.
+ */
+export const PERMISSION_REQUEST_ROUTE_LOCATION_BACKGROUND = '/permissions/location_background';
+/**
+ * Virtual route to trigger a push permission request to the app.
+ */
+export const PERMISSION_REQUEST_ROUTE_PUSH = '/permissions/push';
+/**
+ * Virtual route to trigger an app tracking transparency permission request to the app.
+ */
+export const PERMISSION_REQUEST_ROUTE_TRACKING = '/permissions/tracking';
+
+/**
+ * Virtual route to trigger a camera permission request to the app.
+ */
+export const PERMISSION_REQUEST_ROUTE_CAMERA = '/permissions/camera';
+export const PERMISSION_REQUEST_ROUTES = [PERMISSION_REQUEST_ROUTE_LOCATION, PERMISSION_REQUEST_ROUTE_LOCATION_BACKGROUND, PERMISSION_REQUEST_ROUTE_PUSH, PERMISSION_REQUEST_ROUTE_TRACKING, PERMISSION_REQUEST_ROUTE_CAMERA];

package/core/router/permissionRouteRedirectHandler.js

@@ -0,0 +1,117 @@
+import { showModal } from '@shopgate/engage/core/actions';
+import { logger } from "../helpers";
+import { PERMISSION_REQUEST_ROUTE_LOCATION, PERMISSION_REQUEST_ROUTE_LOCATION_BACKGROUND, PERMISSION_REQUEST_ROUTE_PUSH, PERMISSION_REQUEST_ROUTE_TRACKING, PERMISSION_REQUEST_ROUTE_CAMERA, PERMISSION_STATUS_GRANTED } from "../constants";
+import { grantPushPermissions, grantAppTrackingTransparencyPermission, grantGeolocationPermissions, grantCameraPermissions } from "../actions";
+
+/**
+ * @typedef {import('redux-thunk').ThunkDispatch<
+ *   import('../store').RootState,
+ *   any,
+ *   import('redux').AnyAction
+ * >} AppDispatch
+ */
+
+/**
+ * @typedef {import('../actions/grantPermissions').GrantPermissionsResult} GrantPermissionsResult
+ */
+
+/**
+ * Handler for redirect collection handlers related to permission requests.
+ * @param {{ action: any, dispatch: AppDispatch }} params Handler params
+ */
+export const permissionRouteRedirectHandler = async ({
+  action,
+  dispatch
+}) => {
+  const {
+    route: {
+      pathname
+    } = {}
+  } = action;
+
+  /**
+   * @type {GrantPermissionsResult | undefined}
+   */
+  let result;
+  let grantedMessage;
+  const metaBase = {
+    context: 'permissionRoute'
+  };
+  switch (pathname) {
+    case PERMISSION_REQUEST_ROUTE_LOCATION:
+      {
+        result = await dispatch(grantGeolocationPermissions({
+          useSettingsModal: true,
+          resolveWithData: true,
+          meta: {
+            ...metaBase,
+            permission: 'location'
+          }
+        }));
+        grantedMessage = 'permissions.accessGranted.locationMessage';
+        break;
+      }
+    case PERMISSION_REQUEST_ROUTE_LOCATION_BACKGROUND:
+      {
+        result = await dispatch(grantGeolocationPermissions({
+          useSettingsModal: true,
+          requireBackgroundAccess: true,
+          resolveWithData: true,
+          meta: {
+            ...metaBase,
+            permission: 'backgroundLocation'
+          }
+        }));
+        grantedMessage = 'permissions.accessGranted.backgroundLocationMessage';
+        break;
+      }
+    case PERMISSION_REQUEST_ROUTE_PUSH:
+      {
+        result = await dispatch(grantPushPermissions({
+          useSettingsModal: true,
+          resolveWithData: true,
+          meta: {
+            ...metaBase,
+            permission: 'push'
+          }
+        }));
+        grantedMessage = 'permissions.accessGranted.pushMessage';
+        break;
+      }
+    case PERMISSION_REQUEST_ROUTE_TRACKING:
+      {
+        result = await dispatch(grantAppTrackingTransparencyPermission({
+          useSettingsModal: true,
+          resolveWithData: true,
+          meta: {
+            ...metaBase,
+            permission: 'tracking'
+          }
+        }));
+        grantedMessage = 'permissions.accessGranted.trackingMessage';
+        break;
+      }
+    case PERMISSION_REQUEST_ROUTE_CAMERA:
+      {
+        result = await dispatch(grantCameraPermissions({
+          useSettingsModal: true,
+          resolveWithData: true,
+          meta: {
+            ...metaBase,
+            permission: 'camera'
+          }
+        }));
+        grantedMessage = 'permissions.accessGranted.cameraMessage';
+        break;
+      }
+    default:
+      logger.warn('Unknown permission request route', pathname);
+  }
+  if (result?.status === PERMISSION_STATUS_GRANTED && result?.optInRequested === false) {
+    dispatch(showModal({
+      message: grantedMessage,
+      confirm: 'modal.ok',
+      dismiss: ''
+    }));
+  }
+};

package/core/subscriptions/app.js

@@ -1,14 +1,15 @@
 import { appWillStart$ } from '@shopgate/engage/core/streams';
-import { configuration } from '@shopgate/engage/core/collections';
+import { configuration, redirects } from '@shopgate/engage/core/collections';
 import { hasNewServices, appSupportsAndroidEdgeToEdge, updateAndroidNavigationBarColor } from '@shopgate/engage/core/helpers';
 import { CONFIGURATION_COLLECTION_KEY_BASE_URL } from '@shopgate/engage/core/constants';
 import { appConfig } from '@shopgate/engage';
 import { reloadApp$ } from "../streams";
 import { reloadApp } from "../action-creators";
+import { PERMISSION_REQUEST_ROUTE_LOCATION, PERMISSION_REQUEST_ROUTE_LOCATION_BACKGROUND, PERMISSION_REQUEST_ROUTE_PUSH, PERMISSION_REQUEST_ROUTE_TRACKING, PERMISSION_REQUEST_ROUTE_CAMERA } from "../constants";
+import { permissionRouteRedirectHandler } from "../router/permissionRouteRedirectHandler";
 const {
   androidNavigationBarDefaultColor
 } = appConfig;
-
 /**
  * App subscriptions
  * @param {Function} subscribe The subscribe function
@@ -29,6 +30,26 @@ export default function app(subscribe) {
         color: androidNavigationBarDefaultColor
       });
     }
+
+    // Register redirects for app permission request routes
+    redirects.set(PERMISSION_REQUEST_ROUTE_LOCATION, permissionRouteRedirectHandler, {
+      showLoading: false
+    });
+    redirects.set(PERMISSION_REQUEST_ROUTE_LOCATION_BACKGROUND, permissionRouteRedirectHandler, {
+      showLoading: false
+    });
+    redirects.set(PERMISSION_REQUEST_ROUTE_PUSH, permissionRouteRedirectHandler, {
+      showLoading: false
+    });
+    redirects.set(PERMISSION_REQUEST_ROUTE_TRACKING, permissionRouteRedirectHandler, {
+      showLoading: false
+    });
+    redirects.set(PERMISSION_REQUEST_ROUTE_CAMERA, permissionRouteRedirectHandler, {
+      showLoading: false
+    });
+    redirects.set(PERMISSION_REQUEST_ROUTE_CAMERA, permissionRouteRedirectHandler, {
+      showLoading: false
+    });
   });
   subscribe(reloadApp$, () => {
     // A deployed app can only be reloaded on the base url. So we first set this as current route

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.30.2-beta.1",
+  "version": "7.30.2-beta.3",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.30.2-beta.1",
-    "@shopgate/pwa-common-commerce": "7.30.2-beta.1",
-    "@shopgate/pwa-core": "7.30.2-beta.1",
-    "@shopgate/pwa-ui-ios": "7.30.2-beta.1",
-    "@shopgate/pwa-ui-material": "7.30.2-beta.1",
-    "@shopgate/pwa-ui-shared": "7.30.2-beta.1",
+    "@shopgate/pwa-common": "7.30.2-beta.3",
+    "@shopgate/pwa-common-commerce": "7.30.2-beta.3",
+    "@shopgate/pwa-core": "7.30.2-beta.3",
+    "@shopgate/pwa-ui-ios": "7.30.2-beta.3",
+    "@shopgate/pwa-ui-material": "7.30.2-beta.3",
+    "@shopgate/pwa-ui-shared": "7.30.2-beta.3",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",
@@ -49,6 +49,7 @@
     "lodash": "^4.17.23",
     "prop-types": "~15.8.1",
     "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-redux": "^8.1.3",
     "redux": "^5.0.1",
     "redux-mock-store": "^1.5.4",

package/tracking/subscriptions/cookieConsent.js

@@ -1,9 +1,8 @@
 import { appDidStart$ } from '@shopgate/engage/core/streams';
-import { appSupportsCookieConsent } from '@shopgate/engage/core/helpers';
-import { grantAppTrackingTransparencyPermission, historyReset, historyPop } from '@shopgate/engage/core/actions';
+import { historyReset, historyPop } from '@shopgate/engage/core/actions';
 import { softOptInShown } from '@shopgate/engage/core/action-creators';
 import { handleCookieConsent, showCookieConsentModal, hideCookieConsentModal } from "../action-creators";
-import { getIsCookieConsentHandled, getAreComfortCookiesAccepted, getAreStatisticsCookiesAccepted, getCookieConsentTrackingMeta } from "../selectors/cookieConsent";
+import { getIsCookieConsentHandled, getAreComfortCookiesAccepted, getAreStatisticsCookiesAccepted, getCookieConsentTrackingMeta, getIsCookieConsentActivated } from "../selectors/cookieConsent";
 import { cookieConsentInitializedByUserInternal$, privacySettingsConfirmedWithoutChangeInternal$, cookieConsentModalShouldToggleInternal$ } from "../streams/cookieConsent";
 
 /**
@@ -31,12 +30,7 @@ export default function cookieConsent(subscribe) {
         comfortCookiesAccepted,
         statisticsCookiesAccepted
       }));
-      if (appSupportsCookieConsent() && (comfortCookiesAccepted || statisticsCookiesAccepted)) {
-        await dispatch(grantAppTrackingTransparencyPermission({
-          meta: trackingMeta
-        }));
-      }
-    } else {
+    } else if (getIsCookieConsentActivated(state)) {
       // if merchant has activated cookie feature but user has not chosen cookies yet:
       // show cookie consent modal to make user choose them
       dispatch(softOptInShown({