@shopgate/engage 6.23.0-beta.3 → 6.23.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "6.23.0-beta.3",
+  "version": "6.23.0-beta.5",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -15,12 +15,12 @@
     "connect"
   ],
   "dependencies": {
-    "@shopgate/pwa-common": "6.23.0-beta.3",
-    "@shopgate/pwa-common-commerce": "6.23.0-beta.3",
-    "@shopgate/pwa-core": "6.23.0-beta.3",
-    "@shopgate/pwa-ui-ios": "6.23.0-beta.3",
-    "@shopgate/pwa-ui-material": "6.23.0-beta.3",
-    "@shopgate/pwa-ui-shared": "6.23.0-beta.3",
+    "@shopgate/pwa-common": "6.23.0-beta.5",
+    "@shopgate/pwa-common-commerce": "6.23.0-beta.5",
+    "@shopgate/pwa-core": "6.23.0-beta.5",
+    "@shopgate/pwa-ui-ios": "6.23.0-beta.5",
+    "@shopgate/pwa-ui-material": "6.23.0-beta.5",
+    "@shopgate/pwa-ui-shared": "6.23.0-beta.5",
     "@virtuous/conductor": "~2.4.0",
     "babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
     "babel-plugin-transform-es3-property-literals": "^6.8.0",

package/tracking/components/CookieConsentModal/index.js

@@ -1,4 +1,4 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import{Grid,I18n,Button,Modal,Link}from'@shopgate/engage/components';import{appConfig}from'@shopgate/engage';import{PRIVACY_PATH}from'@shopgate/engage/page';import classNames from'classnames';import connect from"./connector";import cookieImage from"./cookieConsent.svg";import styles from"./style";/**
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{Grid,I18n,Button,Modal,Link}from'@shopgate/engage/components';import{appConfig}from'@shopgate/engage';import{PRIVACY_PATH}from'@shopgate/engage/page';import classNames from'classnames';import connect from"./connector";import cookieImage from"./tracking-opt-in.svg";import styles from"./style";/**
  * The cookie consent modal component.
  * @param {Object} props The component props.
  * @returns {JSX.Element}

package/tracking/components/CookieConsentModal/tracking-opt-in.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 895 895" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-197.772,-376.125)">
+        <g transform="matrix(1.28727,0,0,1.28727,-185.288,-236.524)">
+            <g transform="matrix(1.25456,0,0,1.25456,-164.192,-209.593)">
+                <circle cx="645" cy="823.354" r="276.929" style="fill:rgb(235,235,235);"/>
+            </g>
+            <g transform="matrix(17.6233,0,0,17.6233,433.521,611.874)">
+                <path d="M12,0C8.629,2.866 6.516,3 3,3L3,14.535C3,19.138 6.203,20.339 12,24C17.797,20.339 21,19.138 21,14.535L21,3C17.484,3 15.371,2.866 12,0Z" style="fill:rgb(255,115,115);fill-rule:nonzero;"/>
+                <path d="M12.99,-1.164C12.419,-1.649 11.581,-1.649 11.01,-1.164C8.014,1.383 6.125,1.472 3,1.472C2.156,1.472 1.472,2.156 1.472,3L1.472,14.535C1.472,17.357 2.45,19.137 4.32,20.771C5.891,22.144 8.2,23.407 11.184,25.292C11.682,25.607 12.318,25.607 12.816,25.292C15.8,23.407 18.109,22.144 19.68,20.771C21.55,19.137 22.528,17.357 22.528,14.535L22.528,3C22.528,2.156 21.844,1.472 21,1.472C17.875,1.472 15.986,1.383 12.99,-1.164ZM12,0C8.629,2.866 6.516,3 3,3L3,14.535C3,19.138 6.203,20.339 12,24C17.797,20.339 21,19.138 21,14.535L21,3C17.484,3 15.371,2.866 12,0Z" style="fill:rgb(216,216,216);"/>
+            </g>
+            <g transform="matrix(24.4351,0,0,24.4351,340.416,541.775)">
+                <path d="M15.762,8.047L11.381,12.522L9.166,10.399L7.93,11.638L11.381,15L17,9.285L15.762,8.047Z" style="fill:white;fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>

package/tracking/components/PrivacySettings/connector.js

@@ -1,8 +1,8 @@
-import{connect}from'react-redux';import{acceptAllCookies,acceptSelectedCookies}from"../../actions";import{getAreComfortCookiesAccepted,getAreStatisticsCookiesAccepted}from"../../selectors/cookieConsent";/**
+import{connect}from'react-redux';import{acceptAllCookies,acceptSelectedCookies}from"../../actions";import{getAreComfortCookiesAcceptedInternal,getAreStatisticsCookiesAcceptedInternal}from"../../selectors/cookieConsent";/**
  * Maps the contents of the state to the component props.
  * @param {Object} state The current application state.
  * @return {Object} The extended component props.
- */var mapStateToProps=function mapStateToProps(state){return{comfortCookiesAcceptedState:getAreComfortCookiesAccepted(state),statisticsCookiesAcceptedState:getAreStatisticsCookiesAccepted(state)};};/**
+ */var mapStateToProps=function mapStateToProps(state){return{comfortCookiesAcceptedState:getAreComfortCookiesAcceptedInternal(state),statisticsCookiesAcceptedState:getAreStatisticsCookiesAcceptedInternal(state)};};/**
  * Connects the dispatch function to a callable function in the props.
  * @return {Object} The extended component props.
  */var mapDispatchToProps={acceptAllCookies:acceptAllCookies,acceptSelectedCookies:acceptSelectedCookies};export default connect(mapStateToProps,mapDispatchToProps);

package/tracking/selectors/cookieConsent.js

@@ -8,22 +8,26 @@ import{createSelector}from'reselect';/**
  * @returns {Object} whether cookies have been accepted by the user.
  */export var getCookieSettingsState=function getCookieSettingsState(state){var _state$tracking2;return(state===null||state===void 0?void 0:(_state$tracking2=state.tracking)===null||_state$tracking2===void 0?void 0:_state$tracking2.cookieSettings)||{};};/**
  * Selects the property of the comfort cookie settings.
+ * @private This selector is intended to be used internally. When a cookie consent status needs
+ * to be checked for a feature, please use `getAreComfortCookiesAccepted` instead.
  * @returns {boolean|null} whether comfort cookies have been selected by the user.
- */export var getAreComfortCookiesAccepted=createSelector(getCookieSettingsState,function(settingsState){return settingsState.comfortCookiesAccepted;});/**
+ */export var getAreComfortCookiesAcceptedInternal=createSelector(getCookieSettingsState,function(settingsState){return settingsState.comfortCookiesAccepted;});/**
  * Selects the property of the statistics cookie settings.
+ * @private This selector is intended to be used internally. When a cookie consent status needs
+ * to be checked for a feature, please use `getAreStatisticsCookiesAccepted` instead.
  * @returns {boolean|null} whether statistics cookies have been selected by the user.
- */export var getAreStatisticsCookiesAccepted=createSelector(getCookieSettingsState,function(settingsState){return settingsState.statisticsCookiesAccepted;});/**
- * Selects the property of the comfort cookie settings
- * and returns true for tracking in case cookie feature is not activated (i.e. null)
+ */export var getAreStatisticsCookiesAcceptedInternal=createSelector(getCookieSettingsState,function(settingsState){return settingsState.statisticsCookiesAccepted;});/**
+ * Determines if comfort cookies where accepted in the cookie consent process. When cookie
+ * consent is inactive, the selector will also return true.
  * @returns {boolean} whether comfort cookies are set and should activate tracking.
- */export var getAreComfortCookiesSet=createSelector(getCookieSettingsState,function(settingsState){if(settingsState.comfortCookiesAccepted===null)return true;return settingsState.comfortCookiesAccepted;});/**
- * Selects the property of the statistics cookie settings
- * and returns true for tracking in case cookie feature is not activated (i.e. null)
+ */export var getAreComfortCookiesAccepted=createSelector(getCookieSettingsState,function(settingsState){if(settingsState.comfortCookiesAccepted===null)return true;return settingsState.comfortCookiesAccepted;});/**
+ * Determines if statistics cookies where accepted in the cookie consent process. When cookie
+ * consent is inactive, the selector will also return true.
  * @returns {boolean} whether statistics cookies are set and should activate tracking.
- */export var getAreStatisticsCookiesSet=createSelector(getCookieSettingsState,function(settingsState){if(settingsState.statisticsCookiesAccepted===null)return true;return settingsState.statisticsCookiesAccepted;});/**
+ */export var getAreStatisticsCookiesAccepted=createSelector(getCookieSettingsState,function(settingsState){if(settingsState.statisticsCookiesAccepted===null)return true;return settingsState.statisticsCookiesAccepted;});/**
  * Selects the visibility property of the cookie consent modal.
  * @returns {boolean} whether cookie consent modal is shown.
- */export var getIsCookieConsentModalVisible=createSelector(getCookieConsentModalState,getAreComfortCookiesAccepted,getAreStatisticsCookiesAccepted,function(modalState,comfortCookiesState,statisticsCookiesState){return modalState.isCookieConsentModalVisible&&comfortCookiesState===null&&statisticsCookiesState===null;});/**
+ */export var getIsCookieConsentModalVisible=createSelector(getCookieConsentModalState,getAreComfortCookiesAcceptedInternal,getAreStatisticsCookiesAcceptedInternal,function(modalState,comfortCookiesState,statisticsCookiesState){return modalState.isCookieConsentModalVisible&&comfortCookiesState===null&&statisticsCookiesState===null;});/**
  * Selects the cookie consent settings property.
  * @returns {boolean} whether cookie consent settings have been chosen by the user.
  */export var getIsCookieConsentHandled=createSelector(getCookieSettingsState,function(settingsState){return(settingsState===null||settingsState===void 0?void 0:settingsState.comfortCookiesAccepted)!==null||(settingsState===null||settingsState===void 0?void 0:settingsState.statisticsCookiesAccepted)!==null;});

package/tracking/selectors/index.js

@@ -1 +1 @@
-export{getAreComfortCookiesSet}from"./cookieConsent";export{getAreStatisticsCookiesSet}from"./cookieConsent";
+export{getAreComfortCookiesAccepted}from"./cookieConsent";export{getAreStatisticsCookiesAccepted}from"./cookieConsent";

package/tracking/subscriptions/cookieConsent.js

@@ -1,4 +1,4 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{main$,appDidStart$}from'@shopgate/engage/core/streams';import{ROUTE_WILL_LEAVE}from'@shopgate/engage/core/constants';import{PRIVACY_SETTINGS_PATTERN}from'@shopgate/engage/tracking/constants';import{appSupportsCookieConsent}from'@shopgate/engage/core/helpers';import{grantAppTrackingTransparencyPermission}from'@shopgate/engage/core/actions';import{handleCookieConsent,showCookieConsentModal}from"../action-creators";import{getIsCookieConsentHandled,getAreComfortCookiesSet,getAreStatisticsCookiesSet}from"../selectors/cookieConsent";import{appConfig}from"../../index";/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{main$,appDidStart$}from'@shopgate/engage/core/streams';import{ROUTE_WILL_LEAVE}from'@shopgate/engage/core/constants';import{PRIVACY_SETTINGS_PATTERN}from'@shopgate/engage/tracking/constants';import{appSupportsCookieConsent}from'@shopgate/engage/core/helpers';import{grantAppTrackingTransparencyPermission}from'@shopgate/engage/core/actions';import{handleCookieConsent,showCookieConsentModal}from"../action-creators";import{getIsCookieConsentHandled,getAreComfortCookiesAccepted,getAreStatisticsCookiesAccepted}from"../selectors/cookieConsent";import{appConfig}from"../../index";/**
  * stream which gets triggered when the user navigates back from privacy settings page
  * and cookie consent modal needs to be shown again.
  * @type {Observable}
@@ -9,6 +9,6 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGenera
      * if merchant has not activated the cookie feature OR if merchant has activated cookie feature
      * and user has chosen cookies already trigger stream to run code that depends on the cookie
      * consent.
-     */if(!(!isCookieConsentActivated||isCookieConsentActivated&&isCookieConsentHandled||!appSupportsCookieConsent())){_context.next=12;break;}comfortCookiesAccepted=getAreComfortCookiesSet(state);statisticsCookiesAccepted=getAreStatisticsCookiesSet(state);dispatch(handleCookieConsent({comfortCookiesAccepted:comfortCookiesAccepted,statisticsCookiesAccepted:statisticsCookiesAccepted}));if(!(appSupportsCookieConsent()&&(comfortCookiesAccepted||statisticsCookiesAccepted))){_context.next=11;break;}_context.next=11;return dispatch(grantAppTrackingTransparencyPermission());case 11:return _context.abrupt("return");case 12:// if merchant has activated cookie feature but user has not chosen cookies yet:
+     */if(!(!isCookieConsentActivated||isCookieConsentActivated&&isCookieConsentHandled||!appSupportsCookieConsent())){_context.next=12;break;}comfortCookiesAccepted=getAreComfortCookiesAccepted(state);statisticsCookiesAccepted=getAreStatisticsCookiesAccepted(state);dispatch(handleCookieConsent({comfortCookiesAccepted:comfortCookiesAccepted,statisticsCookiesAccepted:statisticsCookiesAccepted}));if(!(appSupportsCookieConsent()&&(comfortCookiesAccepted||statisticsCookiesAccepted))){_context.next=11;break;}_context.next=11;return dispatch(grantAppTrackingTransparencyPermission());case 11:return _context.abrupt("return");case 12:// if merchant has activated cookie feature but user has not chosen cookies yet:
 // show cookie consent modal to make user choose them
 if(isCookieConsentActivated&&!isCookieConsentHandled){dispatch(showCookieConsentModal());}case 13:case"end":return _context.stop();}}},_callee);}));return function(_x){return _ref4.apply(this,arguments);};}());subscribe(navigateBackToCookieModal$,function(_ref5){var dispatch=_ref5.dispatch,getState=_ref5.getState;var isCookieConsentActivated=appConfig.cookieConsent.isCookieConsentActivated;var isCookieConsentHandled=getIsCookieConsentHandled(getState());if(isCookieConsentActivated&&!isCookieConsentHandled){dispatch(showCookieConsentModal());}});}

package/tracking/components/CookieConsentModal/cookieConsent.svg

@@ -1,62 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 1107 791" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,-88.9596,-502.577)">
-        <g transform="matrix(1.28381,0,0,1.28381,-145.009,-328.293)">
-            <g>
-                <g transform="matrix(0.738616,0,0,0.7166,142.625,351.19)">
-                    <path d="M1052.9,1091.68C1052.9,1062.46 1029.88,1038.73 1001.53,1038.73L244.024,1038.73C215.667,1038.73 192.646,1062.46 192.646,1091.68L192.646,1219.08C192.646,1248.3 215.667,1272.03 244.024,1272.03L1001.53,1272.03C1029.88,1272.03 1052.9,1248.3 1052.9,1219.08L1052.9,1091.68Z" style="fill:rgb(193,193,193);"/>
-                </g>
-                <g transform="matrix(0.859568,0,0,0.833947,80.1965,145.713)">
-                    <path d="M1052.9,1091.68C1052.9,1062.46 1029.88,1038.73 1001.53,1038.73L244.024,1038.73C215.667,1038.73 192.646,1062.46 192.646,1091.68L192.646,1219.08C192.646,1248.3 215.667,1272.03 244.024,1272.03L1001.53,1272.03C1029.88,1272.03 1052.9,1248.3 1052.9,1219.08L1052.9,1091.68Z" style="fill:rgb(216,216,216);"/>
-                </g>
-                <g transform="matrix(1.00203,0,0,0.972164,-10.791,-90.8989)">
-                    <path d="M1052.9,1091.68C1052.9,1062.46 1029.88,1038.73 1001.53,1038.73L244.024,1038.73C215.667,1038.73 192.646,1062.46 192.646,1091.68L192.646,1219.08C192.646,1248.3 215.667,1272.03 244.024,1272.03L1001.53,1272.03C1029.88,1272.03 1052.9,1248.3 1052.9,1219.08L1052.9,1091.68Z" style="fill:rgb(235,235,235);"/>
-                </g>
-                <g transform="matrix(1.00203,0,0,0.972164,-10.791,-362.62)">
-                    <path d="M1052.9,1091.68C1052.9,1062.46 1029.88,1038.73 1001.53,1038.73L244.024,1038.73C215.667,1038.73 192.646,1062.46 192.646,1091.68L192.646,1219.08C192.646,1248.3 215.667,1272.03 244.024,1272.03L1001.53,1272.03C1029.88,1272.03 1052.9,1248.3 1052.9,1219.08L1052.9,1091.68Z" style="fill:rgb(235,235,235);"/>
-                </g>
-            </g>
-            <g transform="matrix(1.00052,0,0,1,-19.3912,30.3377)">
-                <path d="M953.776,1037.91C953.776,1035.43 951.762,1033.42 949.281,1033.42L424.519,1033.42C422.039,1033.42 420.025,1035.43 420.025,1037.91L420.025,1061.27C420.025,1063.75 422.039,1065.77 424.519,1065.77L949.281,1065.77C951.762,1065.77 953.776,1063.75 953.776,1061.27L953.776,1037.91Z" style="fill:rgb(187,196,198);fill-opacity:0.65;"/>
-            </g>
-            <g transform="matrix(0.823791,0,0,1,54.8392,-16.3916)">
-                <path d="M953.776,1037.91C953.776,1035.43 951.33,1033.42 948.317,1033.42L425.484,1033.42C422.471,1033.42 420.025,1035.43 420.025,1037.91L420.025,1061.27C420.025,1063.75 422.471,1065.77 425.484,1065.77L948.317,1065.77C951.33,1065.77 953.776,1063.75 953.776,1061.27L953.776,1037.91Z" style="fill:rgb(187,196,198);fill-opacity:0.65;"/>
-            </g>
-            <g transform="matrix(0.904048,0,0,1,21.129,-67.1309)">
-                <path d="M953.776,1037.91C953.776,1035.43 951.547,1033.42 948.801,1033.42L424.999,1033.42C422.254,1033.42 420.025,1035.43 420.025,1037.91L420.025,1061.27C420.025,1063.75 422.254,1065.77 424.999,1065.77L948.801,1065.77C951.547,1065.77 953.776,1063.75 953.776,1061.27L953.776,1037.91Z" style="fill:rgb(187,196,198);fill-opacity:0.65;"/>
-            </g>
-            <g transform="matrix(1.02071,0,0,1.04641,-38.8586,-763.331)">
-                <path d="M393.702,1679.71C393.702,1660.56 377.767,1645.02 358.141,1645.02L287.019,1645.02C267.393,1645.02 251.458,1660.56 251.458,1679.71L251.458,1749.29C251.458,1768.44 267.393,1783.98 287.019,1783.98L358.141,1783.98C377.767,1783.98 393.702,1768.44 393.702,1749.29L393.702,1679.71Z" style="fill:rgb(255,115,115);"/>
-                <clipPath id="_clip1">
-                    <path d="M393.702,1679.71C393.702,1660.56 377.767,1645.02 358.141,1645.02L287.019,1645.02C267.393,1645.02 251.458,1660.56 251.458,1679.71L251.458,1749.29C251.458,1768.44 267.393,1783.98 287.019,1783.98L358.141,1783.98C377.767,1783.98 393.702,1768.44 393.702,1749.29L393.702,1679.71Z"/>
-                </clipPath>
-                <g clip-path="url(#_clip1)">
-                    <g transform="matrix(0.76313,0,0,0.744387,148.731,1102.32)">
-                        <path d="M226.411,745.537L243.421,797.888L298.467,797.888L253.934,830.243L270.944,882.594L226.411,850.239L181.879,882.594L198.889,830.243L154.356,797.888L209.402,797.888L226.411,745.537Z" style="fill:white;"/>
-                    </g>
-                </g>
-            </g>
-            <g transform="matrix(0.933678,0,0,1,8.6838,-241.981)">
-                <path d="M953.776,1037.91C953.776,1035.43 951.617,1033.42 948.959,1033.42L424.841,1033.42C422.183,1033.42 420.025,1035.43 420.025,1037.91L420.025,1061.27C420.025,1063.75 422.183,1065.77 424.841,1065.77L948.959,1065.77C951.617,1065.77 953.776,1063.75 953.776,1061.27L953.776,1037.91Z" style="fill:rgb(187,196,198);fill-opacity:0.65;"/>
-            </g>
-            <g transform="matrix(1,0,0,1,-19.173,-288.71)">
-                <path d="M953.776,1037.91C953.776,1035.43 951.761,1033.42 949.279,1033.42L424.522,1033.42C422.04,1033.42 420.025,1035.43 420.025,1037.91L420.025,1061.27C420.025,1063.75 422.04,1065.77 424.522,1065.77L949.279,1065.77C951.761,1065.77 953.776,1063.75 953.776,1061.27L953.776,1037.91Z" style="fill:rgb(187,196,198);fill-opacity:0.65;"/>
-            </g>
-            <g transform="matrix(0.844941,0,0,1,45.9556,-337.889)">
-                <path d="M953.776,1037.91C953.776,1035.43 951.391,1033.42 948.453,1033.42L425.347,1033.42C422.409,1033.42 420.025,1035.43 420.025,1037.91L420.025,1061.27C420.025,1063.75 422.409,1065.77 425.347,1065.77L948.453,1065.77C951.391,1065.77 953.776,1063.75 953.776,1061.27L953.776,1037.91Z" style="fill:rgb(187,196,198);fill-opacity:0.65;"/>
-            </g>
-            <g transform="matrix(1.02071,0,0,1.04641,-38.8586,-1035.65)">
-                <path d="M393.702,1679.71C393.702,1660.56 377.767,1645.02 358.141,1645.02L287.019,1645.02C267.393,1645.02 251.458,1660.56 251.458,1679.71L251.458,1749.29C251.458,1768.44 267.393,1783.98 287.019,1783.98L358.141,1783.98C377.767,1783.98 393.702,1768.44 393.702,1749.29L393.702,1679.71Z" style="fill:rgb(255,115,115);"/>
-                <clipPath id="_clip2">
-                    <path d="M393.702,1679.71C393.702,1660.56 377.767,1645.02 358.141,1645.02L287.019,1645.02C267.393,1645.02 251.458,1660.56 251.458,1679.71L251.458,1749.29C251.458,1768.44 267.393,1783.98 287.019,1783.98L358.141,1783.98C377.767,1783.98 393.702,1768.44 393.702,1749.29L393.702,1679.71Z"/>
-                </clipPath>
-                <g clip-path="url(#_clip2)">
-                    <g transform="matrix(0.979712,0,0,0.955649,69.3286,762.785)">
-                        <text x="193.673px" y="1041.62px" style="font-family:'HelveticaNeue-Bold', 'Helvetica Neue';font-weight:700;font-size:128px;fill:white;">%</text>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>