@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/components/Form/Builder/ElementPhoneNumber.js

@@ -1,20 +1,240 @@
-import _isEqual from"lodash/isEqual";import _upperCase from"lodash/upperCase";import _camelCase from"lodash/camelCase";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);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n}from'@shopgate/engage/core/helpers';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInputCountrySelect from'react-phone-number-input/mobile';import PhoneInput from'react-phone-number-input/input-mobile';import{getCountries}from'react-phone-number-input/input';import en from'react-phone-number-input/locale/en';import de from'react-phone-number-input/locale/de';import es from'react-phone-number-input/locale/es';import fr from'react-phone-number-input/locale/fr';import pt from'react-phone-number-input/locale/pt';import flags from'react-phone-number-input/flags';import{useCountriesNames}from'@shopgate/engage/i18n';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import Label from'@shopgate/pwa-ui-shared/TextField/components/Label';import FormHelper from"./FormHelper";var variables=themeConfig.variables,colors=themeConfig.colors;var styles={formField:css({width:'100%',marginBottom:'0px !important'}).toString(),phoneField:css({position:'relative',width:'100%',paddingTop:variables.gap.big*0.75,paddingBottom:variables.gap.big*1.25,' input.PhoneInputInput':{outline:'none',fontSize:'1rem',lineHeight:'1.1875rem',borderRadius:0,paddingBottom:variables.gap.xsmall*1.5,borderBottom:"1px solid ".concat(colors.shade12),'&:focus':{borderBottom:"2px solid ".concat(colors.primary),paddingBottom:variables.gap.xsmall*1.5-1}}}),phoneFieldError:css({' input.PhoneInputInput':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")"),paddingBottom:variables.gap.xsmall*1.5-1}}).toString(),phoneFieldErrorText:css({position:'absolute',width:'100%',bottom:'-10px',fontSize:'0.75rem',lineHeight:0.875,color:"var(--color-state-alert, ".concat(colors.error,")"),overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis',marginLeft:'38px'})};var builtInCountries=getCountries();var locales={en:en,de:de,es:es,fr:fr,pt:pt};/**
+import _extends from "@babel/runtime/helpers/extends";
+import _isEqual from "lodash/isEqual";
+import _upperCase from "lodash/upperCase";
+import _camelCase from "lodash/camelCase";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { parsePhoneNumber } from 'react-phone-number-input';
+import PhoneInputCountrySelect from 'react-phone-number-input/mobile';
+import PhoneInput from 'react-phone-number-input/input-mobile';
+import { getCountries } from 'react-phone-number-input/input';
+import en from 'react-phone-number-input/locale/en';
+import de from 'react-phone-number-input/locale/de';
+import es from 'react-phone-number-input/locale/es';
+import fr from 'react-phone-number-input/locale/fr';
+import pt from 'react-phone-number-input/locale/pt';
+import flags from 'react-phone-number-input/flags';
+import { useCountriesNames } from '@shopgate/engage/i18n';
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/engage';
+import Label from '@shopgate/pwa-ui-shared/TextField/components/Label';
+import FormHelper from "./FormHelper";
+const {
+  variables,
+  colors
+} = themeConfig;
+const styles = {
+  formField: css({
+    width: '100%',
+    marginBottom: '0px !important'
+  }).toString(),
+  phoneField: css({
+    position: 'relative',
+    width: '100%',
+    paddingTop: variables.gap.big * 0.75,
+    paddingBottom: variables.gap.big * 1.25,
+    ' input.PhoneInputInput': {
+      outline: 'none',
+      fontSize: '1rem',
+      lineHeight: '1.1875rem',
+      borderRadius: 0,
+      paddingBottom: variables.gap.xsmall * 1.5,
+      borderBottom: `1px solid ${colors.shade12}`,
+      '&:focus': {
+        borderBottom: `2px solid ${colors.primary}`,
+        paddingBottom: variables.gap.xsmall * 1.5 - 1
+      }
+    }
+  }),
+  phoneFieldError: css({
+    ' input.PhoneInputInput': {
+      borderBottom: `2px solid var(--color-state-alert, ${colors.error})`,
+      paddingBottom: variables.gap.xsmall * 1.5 - 1
+    }
+  }).toString(),
+  phoneFieldErrorText: css({
+    position: 'absolute',
+    width: '100%',
+    bottom: '-10px',
+    fontSize: '0.75rem',
+    lineHeight: 0.875,
+    color: `var(--color-state-alert, ${colors.error})`,
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    marginLeft: '38px'
+  })
+};
+const builtInCountries = getCountries();
+const locales = {
+  en,
+  de,
+  es,
+  fr,
+  pt
+};
+
+/**
  * Renders the reserve form phone input maybe with country selection.
  * @param {Object} props The component props.
  * @returns {JSX.Element}
- */var UnwrappedElementPhoneNumber=React.memo(function(props){var element=props.element,name=props.name,errorText=props.errorText,value=props.value,visible=props.visible,formName=props.formName;var label=element.label,handleChange=element.handleChange,_element$disabled=element.disabled,disabled=_element$disabled===void 0?false:_element$disabled,_element$required=element.required,required=_element$required===void 0?false:_element$required,_element$config=element.config,_element$config2=_element$config===void 0?{}:_element$config,_element$config2$supp=_element$config2.supportedCountries,supportedCountries=_element$config2$supp===void 0?[]:_element$config2$supp,_element$config2$coun=_element$config2.countrySortOrder,countrySortOrder=_element$config2$coun===void 0?[]:_element$config2$coun,_element$config2$user=_element$config2.userLocation,userLocation=_element$config2$user===void 0?{}:_element$config2$user;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];// Maps available countries to correct format.
-var countries=React.useMemo(function(){if(supportedCountries.length===0){return builtInCountries;}return supportedCountries.map(function(country){var pieces=country.split('_');return _upperCase(pieces[0]);});},[supportedCountries]);var countriesNames=useCountriesNames(countries,locales);// Get labels for supported countries.
-var labels=React.useMemo(function(){var output={};if(!countries){return output;}countries.forEach(function(key){var pieces=key.split('_');output[pieces[0]]=countriesNames[key];});return output;},[countries,countriesNames]);var defaultCountry=React.useMemo(function(){var country;if(value){// Try to parse the value to determine a country
-var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){country=phoneNumber.country;}}if(!country&&userLocation){// Take the country from the user location if present
-country=userLocation.country;}if(!country){// If no country could be determined yet, take the country from the language
-var _i18n$getLang$split=i18n.getLang().split('-');var _i18n$getLang$split2=_slicedToArray(_i18n$getLang$split,2);country=_i18n$getLang$split2[1];}// Check if the determined country is included inside the available countries
-if(!countries.includes(country)){if((countrySortOrder===null||countrySortOrder===void 0?void 0:countrySortOrder.length)&&countries.includes(countrySortOrder[0])){// Take first country if the sort order list if present
-var _countrySortOrder=_slicedToArray(countrySortOrder,1);country=_countrySortOrder[0];}else{// Take first country from the list
-var _countries=_slicedToArray(countries,1);country=_countries[0];}}return country;},[countries,countrySortOrder,userLocation,value]);var countryOptionsOrder=React.useMemo(function(){/**
+ */
+const UnwrappedElementPhoneNumber = /*#__PURE__*/React.memo(props => {
+  const {
+    element,
+    name,
+    errorText,
+    value,
+    visible,
+    formName
+  } = props;
+  const {
+    label,
+    handleChange,
+    disabled = false,
+    required = false,
+    config: {
+      supportedCountries = [],
+      countrySortOrder = [],
+      userLocation = {}
+    } = {}
+  } = element;
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  // Maps available countries to correct format.
+  const countries = React.useMemo(() => {
+    if (supportedCountries.length === 0) {
+      return builtInCountries;
+    }
+    return supportedCountries.map(country => {
+      const pieces = country.split('_');
+      return _upperCase(pieces[0]);
+    });
+  }, [supportedCountries]);
+  const countriesNames = useCountriesNames(countries, locales);
+
+  // Get labels for supported countries.
+  const labels = React.useMemo(() => {
+    const output = {};
+    if (!countries) {
+      return output;
+    }
+    countries.forEach(key => {
+      const pieces = key.split('_');
+      output[pieces[0]] = countriesNames[key];
+    });
+    return output;
+  }, [countries, countriesNames]);
+  const defaultCountry = React.useMemo(() => {
+    let country;
+    if (value) {
+      // Try to parse the value to determine a country
+      const phoneNumber = parsePhoneNumber(value || '');
+      if (phoneNumber && phoneNumber.country) {
+        ({
+          country
+        } = phoneNumber);
+      }
+    }
+    if (!country && userLocation) {
+      // Take the country from the user location if present
+      ({
+        country
+      } = userLocation);
+    }
+    if (!country) {
+      // If no country could be determined yet, take the country from the language
+      [, country] = i18n.getLang().split('-');
+    }
+
+    // Check if the determined country is included inside the available countries
+    if (!countries.includes(country)) {
+      if (countrySortOrder?.length && countries.includes(countrySortOrder[0])) {
+        // Take first country if the sort order list if present
+        [country] = countrySortOrder;
+      } else {
+        // Take first country from the list
+        [country] = countries;
+      }
+    }
+    return country;
+  }, [countries, countrySortOrder, userLocation, value]);
+  const countryOptionsOrder = React.useMemo(() => {
+    /**
      * To avoid component errors remove countries from the sort order array that are not part
      * of the counties array.
-     */var sanitizedCountrySortOrder=countrySortOrder.filter(function(countryCode){return countries.includes(countryCode);});var countryListsEqual=_isEqual([].concat(countries).sort(),[].concat(sanitizedCountrySortOrder).sort());/**
+     */
+    const sanitizedCountrySortOrder = countrySortOrder.filter(countryCode => countries.includes(countryCode));
+    const countryListsEqual = _isEqual([...countries].sort(), [...sanitizedCountrySortOrder].sort());
+    /**
      * When list with supported countries has the same entries as the country sort order, we don't
      * need to add a separator to the countryOptionsOrder array since the country picker lists
      * will not show a section with unordered countries.
-     */return sanitizedCountrySortOrder.length?[].concat(sanitizedCountrySortOrder,countryListsEqual?[]:['|']):[];},[countries,countrySortOrder]);var hasCountrySelect=React.useMemo(function(){return countries.length>1;},[countries.length]);var handleChangeWrapped=React.useCallback(function(phoneValue){handleChange(phoneValue,{target:{name:name}});},[handleChange,name]);var phoneClasses=classnames('textField',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({simpleInput:!hasCountrySelect},_camelCase(name),true),"phonePicker",true),"phonePickerError",!!errorText),"validationError",!!errorText),"phonePickerFocused",isFocused),styles.phoneField,true),styles.phoneFieldError,!!errorText));if(!visible){return null;}var Component=hasCountrySelect?PhoneInputCountrySelect:PhoneInput;return React.createElement("div",{className:classnames('formBuilderField','engage__form-phone-number',{validationError:!!errorText})},React.createElement("div",{className:phoneClasses},React.createElement(Label,{label:label,isFocused:isFocused,isFloating:isFocused||!!value}),React.createElement(Component,_extends({defaultCountry:defaultCountry,name:name,value:value||'',onChange:handleChangeWrapped,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},disabled:disabled,required:required,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null},hasCountrySelect?{countryOptionsOrder:countryOptionsOrder,addInternationalOption:false,flags:flags,countries:countries,labels:labels}:{className:'PhoneInputInput'}))),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));});UnwrappedElementPhoneNumber.defaultProps={value:'',visible:true};export default UnwrappedElementPhoneNumber;
+     */
+    return sanitizedCountrySortOrder.length ? [...sanitizedCountrySortOrder, ...(countryListsEqual ? [] : ['|'])] : [];
+  }, [countries, countrySortOrder]);
+  const hasCountrySelect = React.useMemo(() => countries.length > 1, [countries.length]);
+  const handleChangeWrapped = React.useCallback(phoneValue => {
+    handleChange(phoneValue, {
+      target: {
+        name
+      }
+    });
+  }, [handleChange, name]);
+  const phoneClasses = classnames('textField', {
+    simpleInput: !hasCountrySelect,
+    [_camelCase(name)]: true,
+    phonePicker: true,
+    phonePickerError: !!errorText,
+    validationError: !!errorText,
+    phonePickerFocused: isFocused,
+    [styles.phoneField]: true,
+    [styles.phoneFieldError]: !!errorText
+  });
+  if (!visible) {
+    return null;
+  }
+  const Component = hasCountrySelect ? PhoneInputCountrySelect : PhoneInput;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('formBuilderField', 'engage__form-phone-number', {
+      validationError: !!errorText
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: phoneClasses
+  }, /*#__PURE__*/React.createElement(Label, {
+    label: label,
+    isFocused: isFocused,
+    isFloating: isFocused || !!value
+  }), /*#__PURE__*/React.createElement(Component, _extends({
+    defaultCountry: defaultCountry,
+    name: name,
+    value: value || '',
+    onChange: handleChangeWrapped,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    required: required,
+    "aria-invalid": !!errorText,
+    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
+  }, hasCountrySelect ? {
+    countryOptionsOrder,
+    addInternationalOption: false,
+    flags,
+    countries,
+    labels
+  } : {
+    className: 'PhoneInputInput'
+  }))), /*#__PURE__*/React.createElement(FormHelper, {
+    errorText: errorText,
+    element: element,
+    formName: formName,
+    elementName: name
+  }));
+});
+UnwrappedElementPhoneNumber.defaultProps = {
+  value: '',
+  visible: true
+};
+export default UnwrappedElementPhoneNumber;

package/components/Form/Builder/ElementRadio.js

@@ -1,6 +1,57 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import RadioGroup from'@shopgate/pwa-ui-shared/Form/RadioGroup';import RadioItem from'@shopgate/pwa-ui-shared/Form/RadioGroup/components/Item';import FormHelper from"./FormHelper";/**
+import _camelCase from "lodash/camelCase";
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import RadioGroup from '@shopgate/pwa-ui-shared/Form/RadioGroup';
+import RadioItem from '@shopgate/pwa-ui-shared/Form/RadioGroup/components/Item';
+import FormHelper from "./FormHelper";
+
+/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
- */var ElementRadio=function ElementRadio(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-radio','formBuilderField',{validationError:!!errorText})},React.createElement(RadioGroup,{name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled},Object.keys(element.options).map(function(itemName){return React.createElement(RadioItem,{key:"".concat(name,"_").concat(itemName),id:"".concat(name,"_").concat(_camelCase(itemName)),name:itemName,label:element.options[itemName]});})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementRadio.defaultProps={value:'',visible:true};export default memo(ElementRadio);
+ */
+const ElementRadio = props => {
+  const {
+    element,
+    errorText,
+    name,
+    value,
+    visible,
+    formName
+  } = props;
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(_camelCase(name), 'engage__form-radio', 'formBuilderField', {
+      validationError: !!errorText
+    })
+  }, /*#__PURE__*/React.createElement(RadioGroup, {
+    name: name,
+    label: element.label,
+    value: value,
+    onChange: element.handleChange,
+    errorText: errorText,
+    isControlled: true,
+    translateErrorText: false,
+    showErrorText: false,
+    disabled: element.disabled
+  }, Object.keys(element.options).map(itemName => /*#__PURE__*/React.createElement(RadioItem, {
+    key: `${name}_${itemName}`,
+    id: `${name}_${_camelCase(itemName)}`,
+    name: itemName,
+    label: element.options[itemName]
+  }))), /*#__PURE__*/React.createElement(FormHelper, {
+    errorText: errorText,
+    element: element,
+    formName: formName,
+    elementName: name
+  }));
+};
+ElementRadio.defaultProps = {
+  value: '',
+  visible: true
+};
+export default /*#__PURE__*/memo(ElementRadio);

package/components/Form/Builder/ElementSelect.js

@@ -1,6 +1,64 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Select from'@shopgate/pwa-ui-shared/Form/Select';import FormHelper from"./FormHelper";/**
+import _camelCase from "lodash/camelCase";
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Select from '@shopgate/pwa-ui-shared/Form/Select';
+import FormHelper from "./FormHelper";
+
+/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX.Element}
- */var ElementSelect=function ElementSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var label=element.label,placeholder=element.placeholder,required=element.required,options=element.options,disabled=element.disabled,handleChange=element.handleChange;return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-select','formBuilderField',{validationError:!!errorText})},React.createElement(Select,{name:name,required:required,label:label,placeholder:placeholder,value:value,options:options,onChange:handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:disabled,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementSelect.defaultProps={value:'',visible:true};export default memo(ElementSelect);
+ */
+const ElementSelect = props => {
+  const {
+    element,
+    errorText,
+    name,
+    value,
+    visible,
+    formName
+  } = props;
+  if (!visible) {
+    return null;
+  }
+  const {
+    label,
+    placeholder,
+    required,
+    options,
+    disabled,
+    handleChange
+  } = element;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(_camelCase(name), 'engage__form-select', 'formBuilderField', {
+      validationError: !!errorText
+    })
+  }, /*#__PURE__*/React.createElement(Select, {
+    name: name,
+    required: required,
+    label: label,
+    placeholder: placeholder,
+    value: value,
+    options: options,
+    onChange: handleChange,
+    errorText: errorText,
+    isControlled: true,
+    translateErrorText: false,
+    showErrorText: false,
+    disabled: disabled,
+    "aria-invalid": !!errorText,
+    "aria-describedby": errorText.length > 0 ? `ariaError-${name}` : null
+  }), /*#__PURE__*/React.createElement(FormHelper, {
+    errorText: errorText,
+    element: element,
+    formName: formName,
+    elementName: name
+  }));
+};
+ElementSelect.defaultProps = {
+  value: '',
+  visible: true
+};
+export default /*#__PURE__*/memo(ElementSelect);

package/components/Form/Builder/ElementText.js

@@ -1,7 +1,71 @@
-import _camelCase from"lodash/camelCase";function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import TextField from'@shopgate/pwa-ui-shared/TextField';import FormHelper from"./FormHelper";import{ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE}from"./Builder.constants";// Map element type to input type
-var mapping=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},ELEMENT_TYPE_TEXT,'text'),ELEMENT_TYPE_NUMBER,'number'),ELEMENT_TYPE_EMAIL,'email'),ELEMENT_TYPE_PASSWORD,'password'),ELEMENT_TYPE_DATE,'date'),ELEMENT_TYPE_PHONE,'tel');/**
+import _camelCase from "lodash/camelCase";
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import TextField from '@shopgate/pwa-ui-shared/TextField';
+import FormHelper from "./FormHelper";
+import { ELEMENT_TYPE_TEXT, ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_EMAIL, ELEMENT_TYPE_PASSWORD, ELEMENT_TYPE_DATE, ELEMENT_TYPE_PHONE } from "./Builder.constants";
+
+// Map element type to input type
+const mapping = {
+  [ELEMENT_TYPE_TEXT]: 'text',
+  [ELEMENT_TYPE_NUMBER]: 'number',
+  [ELEMENT_TYPE_EMAIL]: 'email',
+  [ELEMENT_TYPE_PASSWORD]: 'password',
+  [ELEMENT_TYPE_DATE]: 'date',
+  [ELEMENT_TYPE_PHONE]: 'tel'
+};
+
+/**
  * Takes an element and renders it, if the type matches
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX.Element}
- */var ElementText=function ElementText(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var required=element.required,disabled=element.disabled,handleChange=element.handleChange,label=element.label;var type=mapping[element.type];return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-text','formBuilderField',{validationError:!!errorText})},React.createElement(TextField,{required:required,type:type,name:name,label:label,value:value,onChange:handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementText.defaultProps={value:'',visible:true};export default memo(ElementText);
+ */
+const ElementText = props => {
+  const {
+    element,
+    errorText,
+    name,
+    value,
+    visible,
+    formName
+  } = props;
+  if (!visible) {
+    return null;
+  }
+  const {
+    required,
+    disabled,
+    handleChange,
+    label
+  } = element;
+  const type = mapping[element.type];
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(_camelCase(name), 'engage__form-text', 'formBuilderField', {
+      validationError: !!errorText
+    })
+  }, /*#__PURE__*/React.createElement(TextField, {
+    required: required,
+    type: type,
+    name: name,
+    label: label,
+    value: value,
+    onChange: handleChange,
+    errorText: errorText,
+    isControlled: true,
+    translateErrorText: false,
+    showErrorText: false,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormHelper, {
+    errorText: errorText,
+    element: element,
+    formName: formName,
+    elementName: name
+  }));
+};
+ElementText.defaultProps = {
+  value: '',
+  visible: true
+};
+export default /*#__PURE__*/memo(ElementText);

package/components/Form/Builder/FormHelper.js

@@ -1,5 +1,36 @@
-import React from'react';import PropTypes from'prop-types';import ErrorTextCmp from'@shopgate/pwa-ui-shared/FormElement/components/ErrorText';import{SurroundPortals}from'@shopgate/engage/components';import{sanitizePortalName}from"./helpers/common";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import ErrorTextCmp from '@shopgate/pwa-ui-shared/FormElement/components/ErrorText';
+import { SurroundPortals } from '@shopgate/engage/components';
+import { sanitizePortalName } from "./helpers/common";
+
+/**
  * Component for error texts
  * @param {Object} props Component props.
  * @returns {JSX.Element}
- */var FormHelper=function FormHelper(_ref){var errorText=_ref.errorText,element=_ref.element,formName=_ref.formName,elementName=_ref.elementName;return React.createElement("div",{className:"formHelper"},React.createElement(SurroundPortals,{portalName:"".concat(sanitizePortalName(formName),".").concat(sanitizePortalName(element.id),".formHelper"),portalProps:{formName:formName,element:element,errorText:errorText}},!!errorText&&React.createElement(ErrorTextCmp,{errorText:errorText,translate:false,elementName:elementName,ariaHidden:true})));};FormHelper.defaultProps={errorText:null,elementName:null};export default FormHelper;
+ */
+const FormHelper = ({
+  errorText,
+  element,
+  formName,
+  elementName
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "formHelper"
+}, /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: `${sanitizePortalName(formName)}.${sanitizePortalName(element.id)}.formHelper`,
+  portalProps: {
+    formName,
+    element,
+    errorText
+  }
+}, !!errorText && /*#__PURE__*/React.createElement(ErrorTextCmp, {
+  errorText: errorText,
+  translate: false,
+  elementName: elementName,
+  ariaHidden: true
+})));
+FormHelper.defaultProps = {
+  errorText: null,
+  elementName: null
+};
+export default FormHelper;

package/components/Form/Builder/classes/ActionListener.constants.js

@@ -1,2 +1,22 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}export var ACTION_TYPE_UPDATE_PROVINCE_ELEMENT='updateProvinceElement';export var ACTION_TYPE_SET_VISIBILITY='setVisibility';export var ACTION_TYPE_SET_VALUE='setValue';export var ACTION_TYPE_TRANSFORM='transform';export var ACTION_SET_VALUE_FIXED='fixed';export var ACTION_SET_VALUE_COPY_FROM='copyFrom';export var ACTION_SET_VALUE_LENGTH_OF='lengthOf';export var ACTION_RULE_TYPE_NOT_IN='notIn';export var ACTION_RULE_TYPE_ONE_OF='oneOf';export var ACTION_RULE_TYPE_BOOLEAN='boolean';export var ACTION_RULE_TYPE_REGEX='regex';// Rule data is formatted as array
-export var ACTION_RULE_DATA_TYPES=_defineProperty(_defineProperty(_defineProperty(_defineProperty({},ACTION_RULE_TYPE_NOT_IN,'array'),ACTION_RULE_TYPE_ONE_OF,'array'),ACTION_RULE_TYPE_BOOLEAN,'boolean'),ACTION_RULE_TYPE_REGEX,'string');export var ACTION_RULES_CONCAT_METHOD_ALL='all';export var ACTION_RULES_CONCAT_METHOD_ANY='any';export var ACTION_RULES_CONCAT_METHOD_NONE='none';
+export const ACTION_TYPE_UPDATE_PROVINCE_ELEMENT = 'updateProvinceElement';
+export const ACTION_TYPE_SET_VISIBILITY = 'setVisibility';
+export const ACTION_TYPE_SET_VALUE = 'setValue';
+export const ACTION_TYPE_TRANSFORM = 'transform';
+export const ACTION_SET_VALUE_FIXED = 'fixed';
+export const ACTION_SET_VALUE_COPY_FROM = 'copyFrom';
+export const ACTION_SET_VALUE_LENGTH_OF = 'lengthOf';
+export const ACTION_RULE_TYPE_NOT_IN = 'notIn';
+export const ACTION_RULE_TYPE_ONE_OF = 'oneOf';
+export const ACTION_RULE_TYPE_BOOLEAN = 'boolean';
+export const ACTION_RULE_TYPE_REGEX = 'regex';
+
+// Rule data is formatted as array
+export const ACTION_RULE_DATA_TYPES = {
+  [ACTION_RULE_TYPE_NOT_IN]: 'array',
+  [ACTION_RULE_TYPE_ONE_OF]: 'array',
+  [ACTION_RULE_TYPE_BOOLEAN]: 'boolean',
+  [ACTION_RULE_TYPE_REGEX]: 'string'
+};
+export const ACTION_RULES_CONCAT_METHOD_ALL = 'all';
+export const ACTION_RULES_CONCAT_METHOD_ANY = 'any';
+export const ACTION_RULES_CONCAT_METHOD_NONE = 'none';