@shopgate/engage 7.9.5-beta.1 → 7.9.6-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.9.5-beta.1",
+  "version": "7.9.6-beta.1",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -16,12 +16,12 @@
   ],
   "dependencies": {
     "@shopgate/native-modules": "1.0.0-beta.18",
-    "@shopgate/pwa-common": "7.9.5-beta.1",
-    "@shopgate/pwa-common-commerce": "7.9.5-beta.1",
-    "@shopgate/pwa-core": "7.9.5-beta.1",
-    "@shopgate/pwa-ui-ios": "7.9.5-beta.1",
-    "@shopgate/pwa-ui-material": "7.9.5-beta.1",
-    "@shopgate/pwa-ui-shared": "7.9.5-beta.1",
+    "@shopgate/pwa-common": "7.9.6-beta.1",
+    "@shopgate/pwa-common-commerce": "7.9.6-beta.1",
+    "@shopgate/pwa-core": "7.9.6-beta.1",
+    "@shopgate/pwa-ui-ios": "7.9.6-beta.1",
+    "@shopgate/pwa-ui-material": "7.9.6-beta.1",
+    "@shopgate/pwa-ui-shared": "7.9.6-beta.1",
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/product/components/ProductProperties/Content.js

@@ -1,8 +1,8 @@
-import React from'react';import PropTypes from'prop-types';import{isBeta}from"../../../core";import{getGroupsFromProperties}from"./helpers/getGroupsFromProperties";import GroupedProperties from"./GroupedProperties";import Wrapper from"./Wrapper";import Rows from"./Rows";import{groupsContainer}from"./style";/**
+import React,{useMemo}from'react';import PropTypes from'prop-types';import{isBeta}from"../../../core";import{getGroupsFromProperties}from"./helpers/getGroupsFromProperties";import GroupedProperties from"./GroupedProperties";import Wrapper from"./Wrapper";import Rows from"./Rows";import{groupsContainer}from"./style";/**
  * @param {Object} props The component props.
  * @returns {JSX}
- */var Content=function Content(_ref){var properties=_ref.properties;if(!properties){return null;}var groups=getGroupsFromProperties(properties);// Display the simple properties if no groups exist or if not in beta mode.
+ */var Content=function Content(_ref){var properties=_ref.properties;var groups=useMemo(function(){return getGroupsFromProperties(properties);},[properties]);if(!properties){return null;}// Display the simple properties if no groups exist or if not in beta mode.
 if(!isBeta()||!groups||groups.length===0){return React.createElement(Wrapper,null,React.createElement(Rows,{properties:properties}));}/*
     This feature is currently in BETA testing.
     It should only be used for approved BETA Client Projects
-  */return React.createElement("div",{className:groupsContainer},React.createElement(GroupedProperties,{properties:properties,groups:groups}));};Content.defaultProps={properties:null};export default Content;
+  */return React.createElement("div",{className:"".concat(groupsContainer," engage__product__product-properties")},React.createElement(GroupedProperties,{groups:groups}));};Content.defaultProps={properties:null};export default Content;

package/product/components/ProductProperties/GroupedProperties.js

@@ -1,5 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import{Accordion}from'@shopgate/pwa-ui-material';import{i18n}from'@shopgate/engage/core';import Lists from"./Lists";import Wrapper from"./Wrapper";import{accordion}from"./style";/**
+import React from'react';import PropTypes from'prop-types';import{Accordion}from'@shopgate/pwa-ui-material';import{i18n}from'@shopgate/engage/core';import Lists from"./Lists";import ListsHTML from"./ListsHTML";import Wrapper from"./Wrapper";import{accordion}from"./style";/**
  * Renders the properties as groups.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var GroupedProperties=function GroupedProperties(_ref){var properties=_ref.properties,groups=_ref.groups;return groups.map(function(group){return React.createElement("div",{key:group,className:accordion},React.createElement(Accordion,{renderLabel:function renderLabel(){return i18n.text("product.displayGroups.".concat(group));},testId:"product-properties-group-".concat(group)},React.createElement(Wrapper,{dense:true},React.createElement(Lists,{properties:properties.filter(function(property){return property.displayGroup===group;})}))));});};export default GroupedProperties;
+ */var GroupedProperties=function GroupedProperties(_ref){var groups=_ref.groups;return groups.map(function(group){return React.createElement("div",{key:group.key,className:accordion},React.createElement(Accordion,{renderLabel:function renderLabel(){return group.label||i18n.text("product.displayGroups.".concat(group.key));},testId:"product-properties-group-".concat(!group.label?group.key:"".concat(group.key,"-").concat(group.label))},React.createElement(Wrapper,{dense:true,groupName:group.label||group.key,htmlOnly:group.htmlOnly},group.htmlOnly?React.createElement(ListsHTML,{properties:group.properties}):React.createElement(Lists,{properties:group.properties}))));});};export default GroupedProperties;

package/product/components/ProductProperties/ListsHTML.js

@@ -0,0 +1,5 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback}from'react';import PropTypes from'prop-types';import{useNavigation}from'@shopgate/engage/core';import{HtmlSanitizer}from'@shopgate/engage/components';/**
+ * Renders a single properties row with HTML content.
+ * @param {Object} props The component props.
+ * @return {JSX.Element}
+ */var ListsHTML=function ListsHTML(_ref){var properties=_ref.properties;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(pathname,target){push(_extends({pathname:pathname},target&&{state:{target:target}}));},[push]);return properties.map(function(_ref2){var label=_ref2.label,value=_ref2.value,type=_ref2.type;return React.createElement("div",{key:label,className:"engage__product__product-property","data-type":type,"data-label":label},React.createElement(HtmlSanitizer,{settings:{handleClick:handleClick,html:value}},value));});};export default React.memo(ListsHTML);

package/product/components/ProductProperties/Row.js

@@ -2,4 +2,4 @@ import React from'react';import PropTypes from'prop-types';import{tableCell}from
  * Renders a single properties row.
  * @param {Object} props The component props.
  * @return {JSX.Element}
- */var Row=function Row(_ref){var label=_ref.label,value=_ref.value;return React.createElement("tr",{key:"".concat(label).concat(value)},React.createElement("td",{className:tableCell},React.createElement("span",{dangerouslySetInnerHTML:{__html:label}})),React.createElement("td",{className:tableCell,"data-test-id":"property: ".concat(value)},React.createElement("span",{dangerouslySetInnerHTML:{__html:value}})));};export default React.memo(Row);
+ */var Row=function Row(_ref){var label=_ref.label,value=_ref.value,type=_ref.type;return React.createElement("tr",{className:"engage__product__product-property","data-type":type,"data-label":label},React.createElement("td",{className:tableCell},React.createElement("span",{dangerouslySetInnerHTML:{__html:label}})),React.createElement("td",{className:tableCell,"data-test-id":"property: ".concat(value)},React.createElement("span",{dangerouslySetInnerHTML:{__html:value}})));};Row.defaultProps={type:null};export default React.memo(Row);

package/product/components/ProductProperties/RowHTML.js

@@ -0,0 +1,5 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useCallback}from'react';import PropTypes from'prop-types';import{useNavigation}from'@shopgate/engage/core';import{HtmlSanitizer}from'@shopgate/engage/components';/**
+ * Renders a single properties row with HTML content.
+ * @param {Object} props The component props.
+ * @return {JSX.Element}
+ */var RowHTML=function RowHTML(_ref){var value=_ref.value,label=_ref.label;var _useNavigation=useNavigation(),push=_useNavigation.push;var handleClick=useCallback(function(pathname,target){push(_extends({pathname:pathname},target&&{state:{target:target}}));},[push]);return React.createElement("tr",{className:"engage__product__product-property","data-type":"html","data-label":label},React.createElement("td",{colSpan:2},React.createElement(HtmlSanitizer,{settings:{handleClick:handleClick,html:value}},value)));};export default React.memo(RowHTML);

package/product/components/ProductProperties/Rows.js

@@ -1,5 +1,5 @@
-import React from'react';import PropTypes from'prop-types';import Row from"./Row";/**
+import React from'react';import PropTypes from'prop-types';import Row from"./Row";import RowHTML from"./RowHTML";/**
  * Renders rows of product properties.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var Rows=function Rows(_ref){var properties=_ref.properties;return properties.map(function(_ref2){var value=_ref2.value,label=_ref2.label;return React.createElement(Row,{key:"".concat(label,"-").concat(value),label:label,value:value});});};export default React.memo(Rows);
+ */var Rows=function Rows(_ref){var properties=_ref.properties;return properties.map(function(_ref2){var value=_ref2.value,label=_ref2.label,type=_ref2.type;if(type==='html'){return React.createElement(RowHTML,{key:label,value:value,label:label});}return React.createElement(Row,{key:"".concat(label,"-").concat(value),label:label,value:value,type:type});});};export default React.memo(Rows);

package/product/components/ProductProperties/Wrapper.js

@@ -2,4 +2,4 @@ function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj
  * Renders the general properties wrapper table.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var Wrapper=function Wrapper(_ref){var _cxs;var children=_ref.children,dense=_ref.dense;return React.createElement("div",{className:cxs((_cxs={},_defineProperty(_cxs,container,!dense),_defineProperty(_cxs,containerDense,dense),_cxs))},React.createElement("table",null,React.createElement("thead",null),React.createElement("tbody",null,children)));};Wrapper.defaultProps={dense:false};export default React.memo(Wrapper);
+ */var Wrapper=function Wrapper(_ref){var _cxs;var children=_ref.children,dense=_ref.dense,groupName=_ref.groupName,htmlOnly=_ref.htmlOnly;return React.createElement("div",{className:cxs('engage__product__product-property-group',(_cxs={},_defineProperty(_cxs,container,!dense),_defineProperty(_cxs,containerDense,dense),_cxs)),"data-group-name":groupName.toLowerCase()},htmlOnly?children:React.createElement("table",null,React.createElement("thead",null),React.createElement("tbody",null,children)));};Wrapper.defaultProps={dense:false,htmlOnly:false,groupName:''};export default React.memo(Wrapper);

package/product/components/ProductProperties/helpers/getGroupsFromProperties.js

@@ -1,5 +1,10 @@
-/**
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}/**
  * Collects all display groups from the properties.
  * @param {Array} [properties=null] The properties to parse.
  * @returns {Array}
- */export function getGroupsFromProperties(){var properties=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var groups=[];if(properties===null){return groups;}properties.forEach(function(property){if(property.displayGroup&&!groups.includes(property.displayGroup)){groups.push(property.displayGroup);}});return groups;}
+ */export function getGroupsFromProperties(){var properties=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;var groups=[];if(properties===null){return groups;}properties.forEach(function(property){if(!property.displayGroup){// Do not proceed when not displayGroup is available
+return;}var key=property.displayGroup;var label=null;if(property.displayGroup==='custom'){key="".concat(property.displayGroup,"-").concat(property.customDisplayGroupName);if(property.customDisplayGroupName){label=property.customDisplayGroupName;}}// Check if the groups array already contains a group with the key
+var existingGroup=groups.find(function(group){return group.key===key;});if(!existingGroup){// Add a new group storage when there isn't one already
+existingGroup={key:key,label:label,properties:[]};groups.push(existingGroup);}// Add current property to the storage
+existingGroup.properties.push(property);});return groups.map(function(group){return _extends({},group,{// Check if the current group just contains html properties to allow special handling
+htmlOnly:group.properties.length?group.properties.every(function(_ref){var type=_ref.type;return type==='html';}):false});});}