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

package/account/components/Profile/Profile.config.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);}import{i18n}from'@shopgate/engage/core';import{generateFormFields}from'@shopgate/engage/account/helper/form';/**
+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{i18n}from'@shopgate/engage/core';import{generateCustomerAttributesFields}from'@shopgate/engage/account/helper/form';/**
  * Generates form configuration.
- * @param {Array} customerAttributes List of customer attributes.
+ * @param {Object} additionalOptions Options for the customer attributes creation helper
+ * @param {Array} additionalOptions.customerAttributes Customer attributes.
+ * @param {Array} additionalOptions.supportedCountries A list of supported countries.
+ * @param {Object} additionalOptions.userLocation User location for better phone picker defaults.
+ * @param {boolean} [additionalOptions.allowPleaseChoose] Allows please choose option for required
+ * attributes.
  * @returns {Object}
- */var generateFormConfig=function generateFormConfig(customerAttributes){return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('account.profile.form.firstName')," *")},middleName:{type:'text',label:"".concat(i18n.text('account.profile.form.middleName'))},lastName:{type:'text',label:"".concat(i18n.text('account.profile.form.lastName')," *")},emailAddress:{type:'email',label:"".concat(i18n.text('account.profile.form.emailAddress')," *"),disabled:true},marketingOptIn:{type:'checkbox',label:i18n.text('account.profile.form.marketing_opt_in_label')}},generateFormFields(customerAttributes,false))};};export default generateFormConfig;
+ */var generateFormConfig=function generateFormConfig(additionalOptions){return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('account.profile.form.firstName')," *")},middleName:{type:'text',label:"".concat(i18n.text('account.profile.form.middleName'))},lastName:{type:'text',label:"".concat(i18n.text('account.profile.form.lastName')," *")},emailAddress:{type:'email',label:"".concat(i18n.text('account.profile.form.emailAddress')," *"),disabled:true},marketingOptIn:{type:'checkbox',label:i18n.text('account.profile.form.marketing_opt_in_label')}},generateCustomerAttributesFields(additionalOptions,false))};};export default generateFormConfig;

package/account/components/Profile/Profile.js

@@ -1 +1 @@
-import React from'react';import{css}from'glamor';import Provider from"./Profile.provider";import AddressBook from"./ProfileAddressBook";import Header from"./ProfileHeader";import Form from"./ProfileForm";var styles={root:css({padding:8}).toString()};/** @returns {JSX} */var Profile=function Profile(){return React.createElement(Provider,null,React.createElement("div",{className:styles.root},React.createElement(Header,null),React.createElement(Form,null),React.createElement(AddressBook,null)));};export default Profile;
+import React,{useRef}from'react';import{css}from'glamor';import Provider from"./Profile.provider";import AddressBook from"./ProfileAddressBook";import Header from"./ProfileHeader";import Form from"./ProfileForm";var styles={root:css({padding:8}).toString()};/** @returns {JSX} */var Profile=function Profile(){var formContainerRef=useRef(null);return React.createElement(Provider,{formContainerRef:formContainerRef},React.createElement("div",{className:styles.root},React.createElement(Header,null),React.createElement(Form,{ref:formContainerRef}),React.createElement(AddressBook,null)));};export default Profile;

package/account/components/Profile/Profile.provider.js

@@ -1,21 +1,22 @@
-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);});};}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,{createContext,useMemo,useEffect,useContext,useCallback}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{useRoute,i18n,historyPush}from'@shopgate/engage/core';import{getMerchantCustomerAttributes}from'@shopgate/engage/core/selectors/merchantSettings';import{useFormState as useForm,convertValidationErrors}from'@shopgate/engage/core/hooks/useFormState';import showModal from'@shopgate/pwa-common/actions/modal/showModal';import{LoadingProvider,ToastProvider}from'@shopgate/pwa-common/providers';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN,useAddressBook}from'@shopgate/engage/checkout';import{PROFILE_ADDRESS_PATH}from"../../constants/routes";import{fetchCustomerContacts}from"../../actions/fetchContacts";import{fetchCustomerData}from"../../actions/fetchCustomer";import{updateCustomerData}from"../../actions/updateCustomer";import{deleteCustomerContact}from"../../actions/deleteContact";import{deleteCustomer as deleteCustomerAction}from"../../actions/deleteCustomer";import{getContacts}from"../../selectors/contacts";import{getCustomer}from"../../selectors/customer";import{extractAttributes,extractDefaultValues}from"../../helper/form";import createConstraints from"./Profile.constraints";var ProfileContext=createContext();/**
+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);});};}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 _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 React,{createContext,useMemo,useEffect,useContext,useCallback,useState}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{getShopSettings}from'@shopgate/engage/core/config';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{useRoute,i18n,historyPush,EVALIDATION}from'@shopgate/engage/core';import{getMerchantCustomerAttributes}from'@shopgate/engage/core/selectors/merchantSettings';import{useFormState as useForm,convertValidationErrors}from'@shopgate/engage/core/hooks/useFormState';import showModal from'@shopgate/pwa-common/actions/modal/showModal';import{LoadingProvider,ToastProvider}from'@shopgate/pwa-common/providers';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN,useAddressBook}from'@shopgate/engage/checkout';import{PROFILE_ADDRESS_PATH}from"../../constants/routes";import{fetchCustomerContacts}from"../../actions/fetchContacts";import{fetchCustomerData}from"../../actions/fetchCustomer";import{updateCustomerData}from"../../actions/updateCustomer";import{deleteCustomerContact}from"../../actions/deleteContact";import{deleteCustomer as deleteCustomerAction}from"../../actions/deleteCustomer";import{getContacts}from"../../selectors/contacts";import{getCustomer}from"../../selectors/customer";import{extractAttributes,extractDefaultValues,convertPipelineValidationErrors}from"../../helper/form";import createConstraints from"./Profile.constraints";var ProfileContext=createContext();/**
  * @returns {Array}
  */export var useProfileContext=function useProfileContext(){return useContext(ProfileContext);};/**
  * @param {Object} state State.
  * @returns {Object}
- */var mapStateToProps=function mapStateToProps(state){return{contacts:getContacts(state),customer:getCustomer(state),merchantCustomerAttributes:getMerchantCustomerAttributes(state)};};/**
+ */var mapStateToProps=function mapStateToProps(state){return{contacts:getContacts(state),customer:getCustomer(state),merchantCustomerAttributes:getMerchantCustomerAttributes(state),shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state)};};/**
  * @param {Function} dispatch Dispatch.
  * @returns {Object}
  */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{fetchContacts:function fetchContacts(){return dispatch(fetchCustomerContacts());},deleteContact:function deleteContact(customerId){return dispatch(deleteCustomerContact(customerId));},deleteCustomer:function deleteCustomer(){return dispatch(deleteCustomerAction());},fetchCustomer:function fetchCustomer(){return dispatch(fetchCustomerData());},updateCustomer:function updateCustomer(customer){return dispatch(updateCustomerData(customer));},showDialog:function showDialog(props){return dispatch(showModal(props));},push:function push(props){return dispatch(historyPush(props));}};};/**
  * @returns {JSX}
- */var ProfileProvider=function ProfileProvider(_ref){var fetchContacts=_ref.fetchContacts,deleteContact=_ref.deleteContact,fetchCustomer=_ref.fetchCustomer,updateCustomer=_ref.updateCustomer,deleteCustomer=_ref.deleteCustomer,push=_ref.push,showDialog=_ref.showDialog,contacts=_ref.contacts,customer=_ref.customer,merchantCustomerAttributes=_ref.merchantCustomerAttributes,children=_ref.children;// Route
-var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useAddressBook=useAddressBook(),isCheckout=_useAddressBook.isCheckout,type=_useAddressBook.type,deleteContactFromOrder=_useAddressBook.deleteContactFromOrder;// Default state.
+ */var ProfileProvider=function ProfileProvider(_ref){var fetchContacts=_ref.fetchContacts,deleteContact=_ref.deleteContact,fetchCustomer=_ref.fetchCustomer,updateCustomer=_ref.updateCustomer,deleteCustomer=_ref.deleteCustomer,push=_ref.push,showDialog=_ref.showDialog,contacts=_ref.contacts,customer=_ref.customer,merchantCustomerAttributes=_ref.merchantCustomerAttributes,children=_ref.children,shopSettings=_ref.shopSettings,userLocation=_ref.userLocation,formContainerRef=_ref.formContainerRef;// Route
+var _useRoute=useRoute(),pathname=_useRoute.pathname;var _useAddressBook=useAddressBook(),isCheckout=_useAddressBook.isCheckout,type=_useAddressBook.type,deleteContactFromOrder=_useAddressBook.deleteContactFromOrder;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),requestErrors=_useState2[0],setRequestErrors=_useState2[1];// Default state.
 var defaultState=useMemo(function(){return customer?_extends({},customer,{marketingOptIn:customer.settings.marketingOptIn||false},extractDefaultValues(customer.attributes)):null;},[customer]);// Saving the form.
-var saveForm=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values){return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:LoadingProvider.setLoading(pathname);_context.prev=1;_context.next=4;return updateCustomer(_extends({firstName:values.firstName},values.middleName?{middleName:values.middleName}:{},{lastName:values.lastName,emailAddress:values.emailAddress,settings:{marketingOptIn:values.marketingOptIn},attributes:extractAttributes(merchantCustomerAttributes,values)}));case 4:_context.next=6;return fetchCustomer();case 6:UIEvents.emit(ToastProvider.ADD,{id:'account.profile.form.success',message:'account.profile.form.success'});_context.next=12;break;case 9:_context.prev=9;_context.t0=_context["catch"](1);UIEvents.emit(ToastProvider.ADD,{id:'account.profile.form.error',message:'account.profile.form.error'});case 12:LoadingProvider.unsetLoading(pathname);case 13:case"end":return _context.stop();}}},_callee,null,[[1,9]]);}));return function(_x){return _ref2.apply(this,arguments);};}(),[fetchCustomer,merchantCustomerAttributes,pathname,updateCustomer]);// Hold profile form state.
-var constraints=useMemo(function(){return createConstraints(merchantCustomerAttributes);},[merchantCustomerAttributes]);var formState=useForm(defaultState,saveForm,constraints);var validationErrors=useMemo(function(){return convertValidationErrors(formState.validationErrors||{});},[formState.validationErrors]);/**
+var saveForm=useCallback(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values){var attributes,validationErrors,code,errors,converted,_converted$validation;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:LoadingProvider.setLoading(pathname);attributes=extractAttributes(merchantCustomerAttributes,values);_context.prev=2;_context.next=5;return updateCustomer(_extends({firstName:values.firstName},values.middleName?{middleName:values.middleName}:{},{lastName:values.lastName,emailAddress:values.emailAddress,settings:{marketingOptIn:values.marketingOptIn},attributes:attributes}));case 5:_context.next=7;return fetchCustomer();case 7:UIEvents.emit(ToastProvider.ADD,{id:'account.profile.form.success',message:'account.profile.form.success'});_context.next=15;break;case 10:_context.prev=10;_context.t0=_context["catch"](2);code=_context.t0.code,errors=_context.t0.errors;if(code===EVALIDATION){converted=convertPipelineValidationErrors(errors,attributes);if((converted===null||converted===void 0?void 0:converted.validation)&&Object.keys(converted.validation).length>0){validationErrors=converted===null||converted===void 0?void 0:(_converted$validation=converted.validation)===null||_converted$validation===void 0?void 0:_converted$validation.attributes;}}UIEvents.emit(ToastProvider.ADD,{id:'account.profile.form.error',message:'account.profile.form.error'});case 15:setRequestErrors(validationErrors||null);LoadingProvider.unsetLoading(pathname);case 17:case"end":return _context.stop();}}},_callee,null,[[2,10]]);}));return function(_x){return _ref2.apply(this,arguments);};}(),[fetchCustomer,merchantCustomerAttributes,pathname,updateCustomer]);// Hold profile form state.
+var constraints=useMemo(function(){return createConstraints(merchantCustomerAttributes);},[merchantCustomerAttributes]);var formState=useForm(defaultState,saveForm,constraints,formContainerRef,120);var validationErrors=useMemo(function(){return convertValidationErrors(formState.validationErrors||requestErrors||{});},[formState.validationErrors,requestErrors]);useEffect(function(){formState.scrollToError();// eslint-disable-next-line react-hooks/exhaustive-deps
+},[formState.scrollToError,requestErrors]);/**
    * Executes callback with confirmation beforehand.
    * @param {string} message String
    */var confirmation=/*#__PURE__*/function(){var _ref3=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(message){var confirmed;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:_context2.next=2;return showDialog({title:i18n.text('account.profile.confirm.title'),message:i18n.text(message),confirm:i18n.text('account.profile.confirm.confirm')});case 2:confirmed=_context2.sent;return _context2.abrupt("return",!!confirmed);case 4:case"end":return _context2.stop();}}},_callee2);}));return function confirmation(_x2){return _ref3.apply(this,arguments);};}();// Deletes a contact.
 /* eslint-disable react-hooks/exhaustive-deps */var deleteContactWrapper=useCallback(/*#__PURE__*/function(){var _ref4=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(contactId){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1){switch(_context3.prev=_context3.next){case 0:_context3.next=2;return confirmation('account.profile.confirm.messageContact');case 2:if(_context3.sent){_context3.next=4;break;}return _context3.abrupt("return");case 4:LoadingProvider.setLoading(pathname);_context3.prev=5;_context3.next=8;return deleteContact(contactId);case 8:_context3.next=10;return fetchContacts();case 10:if(!deleteContactFromOrder){_context3.next=13;break;}_context3.next=13;return deleteContactFromOrder(contactId);case 13:_context3.next=17;break;case 15:_context3.prev=15;_context3.t0=_context3["catch"](5);case 17:LoadingProvider.unsetLoading(pathname);case 18:case"end":return _context3.stop();}}},_callee3,null,[[5,15]]);}));return function(_x3){return _ref4.apply(this,arguments);};}(),[deleteContact,fetchContacts,pathname]);var deleteCustomerWrapper=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(){return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1){switch(_context4.prev=_context4.next){case 0:_context4.next=2;return confirmation('account.profile.confirm.messageCustomer');case 2:if(_context4.sent){_context4.next=4;break;}return _context4.abrupt("return");case 4:LoadingProvider.setLoading(pathname);_context4.prev=5;_context4.next=8;return deleteCustomer();case 8:_context4.next=12;break;case 10:_context4.prev=10;_context4.t0=_context4["catch"](5);case 12:LoadingProvider.unsetLoading(pathname);case 13:case"end":return _context4.stop();}}},_callee4,null,[[5,10]]);})),[deleteContact,fetchContacts,pathname]);/* eslint-enable react-hooks/exhaustive-deps */var editContact=useCallback(function(contact){var editPathname=isCheckout?"".concat(CHECKOUT_ADDRESS_BOOK_CONTACT_PATTERN).replace(':type',type):PROFILE_ADDRESS_PATH;push({pathname:editPathname,state:{contact:contact}});},[isCheckout,push,type]);// Store context value.
-var contextValue=useMemo(function(){return{contacts:contacts,validationErrors:validationErrors,merchantCustomerAttributes:merchantCustomerAttributes,customer:defaultState,isCheckout:isCheckout,formState:formState,saveForm:formState.handleSubmit,editContact:editContact,deleteContact:deleteContactWrapper,deleteCustomer:deleteCustomerWrapper};},[contacts,merchantCustomerAttributes,isCheckout,defaultState,deleteContactWrapper,deleteCustomerWrapper,editContact,formState,validationErrors]);// Fetch all required data for the profile page.
-useEffect(function(){fetchContacts();fetchCustomer();},[fetchContacts,fetchCustomer]);if(!customer){return null;}return React.createElement(ProfileContext.Provider,{value:contextValue},children);};ProfileProvider.defaultProps={customer:null};export default connect(mapStateToProps,mapDispatchToProps)(ProfileProvider);
+var contextValue=useMemo(function(){return{contacts:contacts,validationErrors:validationErrors,merchantCustomerAttributes:merchantCustomerAttributes,customer:defaultState,isCheckout:isCheckout,supportedCountries:shopSettings.supportedCountries,userLocation:userLocation,formState:formState,saveForm:formState.handleSubmit,editContact:editContact,deleteContact:deleteContactWrapper,deleteCustomer:deleteCustomerWrapper};},[userLocation,shopSettings.supportedCountries,contacts,merchantCustomerAttributes,isCheckout,defaultState,deleteContactWrapper,deleteCustomerWrapper,editContact,formState,validationErrors]);// Fetch all required data for the profile page.
+useEffect(function(){fetchContacts();fetchCustomer();},[fetchContacts,fetchCustomer]);if(!customer){return null;}return React.createElement(ProfileContext.Provider,{value:contextValue},children);};ProfileProvider.defaultProps={customer:null,formContainerRef:null};export default connect(mapStateToProps,mapDispatchToProps)(ProfileProvider);

package/account/components/Profile/ProfileForm.js

@@ -1,3 +1,3 @@
-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 _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,{useMemo,useCallback}from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{FormBuilder,RippleButton}from'@shopgate/engage/components';import{StylePresets}from'@shopgate/engage/components/Form';import{useProfileContext}from"./Profile.provider";import generateFormConfig from"./Profile.config";var styles={root:css({display:'flex',flexDirection:'column',marginBottom:16}).toString(),form:css(_extends({},StylePresets.OUTLINED_FORM_FIELDS,{},StylePresets.TWO_COLUMN_LAYOUT,{' .container-checkbox':_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{marginRight:'50%'})})).toString(),button:css({'&&':_defineProperty({marginTop:8,marginRight:16,backgroundColor:'var(--color-primary)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{marginRight:0})}).toString(),buttonDelete:css({'&&':_defineProperty({marginTop:8,marginRight:16,border:'1px solid var(--color-state-alert)',backgroundColor:'#fff',color:'var(--color-state-alert)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{marginRight:0})}).toString(),ripple:css({padding:'8px 16px'}).toString(),actions:css(_defineProperty({display:'flex',justifyContent:'flex-end',flexDirection:'row'},responsiveMediaQuery('<md',{webOnly:false}),{marginTop:8,flexDirection:'column-reverse'})).toString()};/**
+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 _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,{useMemo,useCallback,forwardRef}from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{FormBuilder,RippleButton}from'@shopgate/engage/components';import{StylePresets}from'@shopgate/engage/components/Form';import{useProfileContext}from"./Profile.provider";import generateFormConfig from"./Profile.config";var styles={root:css({display:'flex',flexDirection:'column',marginBottom:16}).toString(),form:css(_extends({},StylePresets.OUTLINED_FORM_FIELDS,{},StylePresets.TWO_COLUMN_LAYOUT,{' .container-checkbox':_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{marginRight:'50%'})})).toString(),button:css({'&&':_defineProperty({marginTop:8,marginRight:16,backgroundColor:'var(--color-primary)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{marginRight:0})}).toString(),buttonDelete:css({'&&':_defineProperty({marginTop:8,marginRight:16,border:'1px solid var(--color-state-alert)',backgroundColor:'#fff',color:'var(--color-state-alert)',borderRadius:5,fontSize:14,textTransform:'none',padding:0},responsiveMediaQuery('<md',{webOnly:false}),{marginRight:0})}).toString(),ripple:css({padding:'8px 16px'}).toString(),actions:css(_defineProperty({display:'flex',justifyContent:'flex-end',flexDirection:'row'},responsiveMediaQuery('<md',{webOnly:false}),{marginTop:8,flexDirection:'column-reverse'})).toString()};/**
  * @returns {JSX}
- */var ProfileForm=function ProfileForm(){var _useProfileContext=useProfileContext(),formState=_useProfileContext.formState,customer=_useProfileContext.customer,saveForm=_useProfileContext.saveForm,deleteCustomer=_useProfileContext.deleteCustomer,validationErrors=_useProfileContext.validationErrors,merchantCustomerAttributes=_useProfileContext.merchantCustomerAttributes;var formConfig=useMemo(function(){return generateFormConfig(merchantCustomerAttributes);},[merchantCustomerAttributes]);/* eslint-disable react-hooks/exhaustive-deps */var handleUpdate=useCallback(function(values){formState.setValues(values);},[formState.setValues]);/* eslint-enable react-hooks/exhaustive-deps */if(!customer){return null;}return React.createElement("div",{className:styles.root},React.createElement(FormBuilder,{name:"ProfileForm",className:styles.form,config:formConfig,defaults:customer,validationErrors:validationErrors,handleUpdate:handleUpdate}),React.createElement("div",{className:styles.actions},React.createElement(RippleButton,{className:styles.buttonDelete,rippleClassName:styles.ripple,type:"primary",onClick:deleteCustomer},i18n.text('account.profile.delete')),React.createElement(RippleButton,{className:styles.button,rippleClassName:styles.ripple,type:"primary",onClick:saveForm},i18n.text('account.profile.form.save'))));};export default ProfileForm;
+ */var ProfileForm=forwardRef(function(_,ref){var _useProfileContext=useProfileContext(),formState=_useProfileContext.formState,customer=_useProfileContext.customer,saveForm=_useProfileContext.saveForm,deleteCustomer=_useProfileContext.deleteCustomer,validationErrors=_useProfileContext.validationErrors,merchantCustomerAttributes=_useProfileContext.merchantCustomerAttributes,supportedCountries=_useProfileContext.supportedCountries,userLocation=_useProfileContext.userLocation;var formConfig=useMemo(function(){return generateFormConfig({customerAttributes:merchantCustomerAttributes,supportedCountries:supportedCountries,userLocation:userLocation});},[merchantCustomerAttributes,supportedCountries,userLocation]);/* eslint-disable react-hooks/exhaustive-deps */var handleUpdate=useCallback(function(values){formState.setValues(values);},[formState.setValues]);/* eslint-enable react-hooks/exhaustive-deps */if(!customer){return null;}return React.createElement("div",{className:styles.root,ref:ref},React.createElement(FormBuilder,{name:"ProfileForm",className:styles.form,config:formConfig,defaults:customer,validationErrors:validationErrors,handleUpdate:handleUpdate}),React.createElement("div",{className:styles.actions},React.createElement(RippleButton,{className:styles.buttonDelete,rippleClassName:styles.ripple,type:"primary",onClick:deleteCustomer},i18n.text('account.profile.delete')),React.createElement(RippleButton,{className:styles.button,rippleClassName:styles.ripple,type:"primary",onClick:saveForm},i18n.text('account.profile.form.save'))));});export default ProfileForm;

package/account/helper/form.js

@@ -1,12 +1,15 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _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 sortBy from'lodash/sortBy';import{i18n}from'@shopgate/engage/core';/**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _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 sortBy from'lodash/sortBy';import setWith from'lodash/setWith';import{i18n}from'@shopgate/engage/core';/**
  * @param {Object} attribute Customer attribute.
  * @returns {string}
- */var mapCustomerAttributeType=function mapCustomerAttributeType(attribute){if(attribute.values&&attribute.values.length){if(attribute.type==='collectionOfValues'){return'multiselect';}return'select';}switch(attribute.type){case'number':return'number';case'boolean':return'checkbox';case'date':return'date';default:return'text';}};/**
- * Generates form field config
- * @param {Object} customerAttributes Customer attributes.
- * @param {boolean} allowPleaseChoose Allows please choose option for required attributes.
+ */var mapCustomerAttributeType=function mapCustomerAttributeType(attribute){if(attribute.values&&attribute.values.length){if(attribute.type==='collectionOfValues'){return'multiselect';}return'select';}switch(attribute.type){case'number':return'number';case'boolean':return'checkbox';case'date':return'date';case'callingNumber':return'phone_picker';default:return'text';}};/**
+ * Generates customer attributes form field config
+ * @param {Object} options Options for the helper
+ * @param {Array} options.customerAttributes Customer attributes.
+ * @param {Array} options.supportedCountries A list of supported countries.
+ * @param {Object} options.userLocation User location for better phone picker defaults.
+ * @param {boolean} options.allowPleaseChoose Allows please choose option for required attributes.
  * @returns {Object}
- */export var generateFormFields=function generateFormFields(customerAttributes){var allowPleaseChoose=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;return _extends({},Object.assign.apply(Object,[{}].concat(sortBy(customerAttributes,['sequenceId']).map(function(attribute){return _defineProperty({},"attribute_".concat(attribute.code),_extends({type:mapCustomerAttributeType(attribute),label:"".concat(attribute.name," ").concat(attribute.isRequired?'*':'')},attribute.values?{options:_extends({},!attribute.isRequired?{'':''}:{},{},attribute.isRequired&&attribute.type!=='collectionOfValues'&&allowPleaseChoose?{'':i18n.text('common.please_choose')}:{},{},Object.assign.apply(Object,[{}].concat(sortBy(attribute.values,['sequenceId']).map(function(option){return _defineProperty({},option.code,option.name);}))))}:{}));}))));};/**
+ */export var generateCustomerAttributesFields=function generateCustomerAttributesFields(_ref){var customerAttributes=_ref.customerAttributes,supportedCountries=_ref.supportedCountries,userLocation=_ref.userLocation,_ref$allowPleaseChoos=_ref.allowPleaseChoose,allowPleaseChoose=_ref$allowPleaseChoos===void 0?true:_ref$allowPleaseChoos;return _extends({},Object.assign.apply(Object,[{}].concat(sortBy(customerAttributes,['sequenceId']).map(function(attribute){return _defineProperty({},"attribute_".concat(attribute.code),_extends({type:mapCustomerAttributeType(attribute),label:"".concat(attribute.name," ").concat(attribute.isRequired?'*':'')},attribute.values?{options:_extends({},!attribute.isRequired?{'':''}:{},{},attribute.isRequired&&attribute.type!=='collectionOfValues'&&allowPleaseChoose?{'':i18n.text('common.please_choose')}:{},{},Object.assign.apply(Object,[{}].concat(sortBy(attribute.values,['sequenceId']).map(function(option){return _defineProperty({},option.code,option.name);}))))}:{},{},attribute.type==='callingNumber'?{config:{supportedCountries:supportedCountries,userLocation:userLocation}}:null));}))));};/**
  * Generates form constraints for attributes.
  * @param {Object} customerAttributes Customer attributes.
  * @returns {Object}
@@ -24,7 +27,7 @@ if(attribute.type==='text'||attribute.type==='date'){return value!==null?value.t
  * @param {Object} customerAttributes Customer attributes.
  * @param {Object} formData  Form data.
  * @returns {Object}
- */export var extractAttributes=function extractAttributes(customerAttributes,formData){return customerAttributes.map(function(attribute){return{code:attribute.code,value:mapAttributeType(formData["attribute_".concat(attribute.code)],attribute)};})// Removes wrong numbers (sometimes generated by the formbuilder when emptying the field)
+ */export var extractAttributes=function extractAttributes(customerAttributes,formData){return customerAttributes.map(function(attribute){return{code:attribute.code,value:mapAttributeType(formData["attribute_".concat(attribute.code)],attribute)};})// Removes wrong numbers (sometimes generated by the form builder when emptying the field)
 .filter(function(attribute){return!Number.isNaN(attribute.value);})// Removes all attributes that are empty / no longer set.
 .filter(function(attribute){var _attribute$value,_attribute$value2,_attribute$value2$cod,_attribute$value3,_attribute$value3$,_attribute$value3$$co;return(// Any number.
 typeof attribute.value==='number'||// Non-empty strings.
@@ -37,4 +40,21 @@ attribute.value===true||attribute.value===false||// Object containing the code.
  * @returns {Object}
  */export var extractDefaultValues=function extractDefaultValues(customerAttributes){return Object.assign.apply(Object,[{}].concat(customerAttributes.map(function(attribute){var value=attribute.value;if(value){if(Array.isArray(value)&&value[0]&&_typeof(value[0])==='object'){// Multi select L:95
 value=value.reduce(function(acc,val){return[].concat(acc,[val.code]);},[]);}else if(_typeof(value)==='object'){// Single select L:100
-value=value.code;}else if(value!==true&&value!==false){value=value.toString();}}return _defineProperty({},"attribute_".concat(attribute.code),value);})));};
+value=value.code;}else if(value!==true&&value!==false){value=value.toString();}}return _defineProperty({},"attribute_".concat(attribute.code),value);})));};/**
+ * Converts pipeline validation errors
+ * @param {Array} errors The errors
+ * @param {Array} attributes Attributes that where sent with the register request. Used to retrieve
+ * extra form field for attribute validation errors.
+ * @returns {Object|null}
+ */export var convertPipelineValidationErrors=function convertPipelineValidationErrors(errors){var attributes=arguments.length>1&&arguments[1]!==undefined?arguments[1]:[];if(!Array.isArray(errors)||errors.length===0){return null;}var converted=errors.reduce(function(result,error){var _error$path=error.path,path=_error$path===void 0?[]:_error$path,code=error.code,_error$subentityPath=error.subentityPath,subentityPath=_error$subentityPath===void 0?[]:_error$subentityPath,displayMessage=error.displayMessage;var message=error.message;if(path.length===0&&subentityPath.length===0){result.general.push(error);return result;}var validationPath;if(path.length>0){message=i18n.text('validation.checkField');validationPath=path.slice(2).join('.');}else if(subentityPath.length>0&&subentityPath.includes('attributes')){/**
+       * Validation errors for customer attributes needs special handling. They are sent
+       * as an array to the server, which only includes the fields where an actual value was set.
+       * The subentityPath of attribute validation errors will only contain an array index which
+       * needs to be mapped to tha actual field id.
+       *
+       * So here in the first step, we search for the subentity path entry that comes after the
+       * "attributes" entry and convert it back to an integer which can be used to determine
+       * and entry within the attribute data that was used for the request.
+       */var attributeIndex=parseInt(subentityPath[subentityPath.indexOf('attributes')+1],10);message=i18n.text('validation.checkField');// Retrieve the attribute code to mock a validation path that can be used to find the correct
+// form field.
+validationPath="attributes.attribute_".concat(attributes[attributeIndex].code);}else if(subentityPath.length>0){var field=subentityPath[subentityPath.length-1];if(code===409&&field==='emailAddress'){message=i18n.text('validation.emailConflict');}else{message=i18n.text('validation.checkField');}validationPath=subentityPath.join('.');}if(validationPath){setWith(result.validation,validationPath,displayMessage||message,Object);}return result;},{validation:{},general:[]});return converted;};

package/checkout/components/Checkout/CheckoutSection.js

@@ -1,4 +1,4 @@
-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 _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,{Fragment}from'react';import{css}from'glamor';import classNames from'classnames';import PropTypes from'prop-types';import{Card,Link}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{isIOSTheme}from'@shopgate/engage/core';import CheckoutSectionInfo from"./CheckoutSectionInfo";import CheckoutSectionMessages from"./CheckoutSectionMessages";import{i18n}from"../../../core/helpers/i18n";var colors=themeConfig.colors,variables=themeConfig.variables;var styles={headline:css(_extends({color:colors.shade3,fontSize:'1.25rem',fontWeight:'normal',textTransform:'uppercase',margin:"0 0 ".concat(variables.gap.small,"px 0")},!isIOSTheme()?{color:'var(--color-text-high-emphasis)',textTransform:'none'}:{})),card:css(_extends({display:'flex',flexDirection:'row',fontSize:15,padding:variables.gap.big,width:'100%',overflow:'inherit !important',marginBottom:variables.gap.big},!isIOSTheme()?{background:'var(--color-background-accent)',boxShadow:'none',padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),margin:0}:{})),cardWithForm:css(_extends({},!isIOSTheme()?{background:'inherit !important',boxShadow:'none  !important',padding:'0px !important'}:{})).toString(),table:css({' td':{padding:"".concat(variables.gap.xsmall,"px 0")},' td:last-child':{textAlign:'right',whiteSpace:'pre-wrap',paddingLeft:variables.gap.xsmall},' tr:nth-last-child(2) td':{paddingBottom:8},' tr:last-child td':{paddingTop:8,borderTop:'1px solid #979797',fontWeight:'600'}}),actionsContainer:css({flex:1,display:'table',width:'100%'}).toString(),link:css({fontSize:'0.875rem',color:'var(--color-primary)',textTransform:'uppercase'}).toString(),actions:css({paddingTop:8}).toString(),labelWithInfoIcon:css({paddingRight:variables.gap.small}).toString()};/**
+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,{Fragment}from'react';import{css}from'glamor';import classNames from'classnames';import PropTypes from'prop-types';import{Card,Link}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import CheckoutSectionInfo from"./CheckoutSectionInfo";import CheckoutSectionMessages from"./CheckoutSectionMessages";import{i18n}from"../../../core/helpers/i18n";var variables=themeConfig.variables;var styles={headline:css({fontSize:'1.25rem',fontWeight:'normal',margin:"0 0 ".concat(variables.gap.small,"px 0"),color:'var(--color-text-high-emphasis)',textTransform:'none'}),card:css({display:'flex',flexDirection:'row',fontSize:15,width:'100%',overflow:'inherit !important',marginBottom:variables.gap.big,boxShadow:'none',background:'var(--color-background-accent)',padding:"".concat(variables.gap.small,"px ").concat(variables.gap.big,"px"),margin:0}),cardWithForm:css({background:'inherit !important',boxShadow:'none  !important',padding:'0px !important'}).toString(),table:css({' td':{padding:"".concat(variables.gap.xsmall,"px 0")},' td:last-child':{textAlign:'right',whiteSpace:'pre-wrap',paddingLeft:variables.gap.xsmall},' tr:nth-last-child(2) td':{paddingBottom:8},' tr:last-child td':{paddingTop:8,borderTop:'1px solid #979797',fontWeight:'600'}}),actionsContainer:css({flex:1,display:'table',width:'100%'}).toString(),link:css({fontSize:'0.875rem',color:'var(--color-primary)',textTransform:'uppercase'}).toString(),actions:css({paddingTop:8}).toString(),labelWithInfoIcon:css({paddingRight:variables.gap.small}).toString()};/**
  * CheckoutSection component
  * @returns {JSX}
  */var CheckoutSection=function CheckoutSection(_ref){var title=_ref.title,className=_ref.className,content=_ref.content,children=_ref.children,hasForm=_ref.hasForm,editLink=_ref.editLink,editLabel=_ref.editLabel,id=_ref.id;return React.createElement(Fragment,null,title&&React.createElement("h3",{className:styles.headline,id:id},i18n.text(title)),React.createElement(Card,{className:classNames(styles.card.toString(),_defineProperty({},styles.cardWithForm.toString(),hasForm)),id:!title?id:null},React.createElement("div",{className:"".concat(styles.actionsContainer," ").concat(className)},children||null,content&&React.createElement("table",{className:styles.table},React.createElement("tbody",null,content.map(function(_ref2){var label=_ref2.label,text=_ref2.text,info=_ref2.info,messages=_ref2.messages;var hasMessages=Array.isArray(messages)&&messages.length>0;var hasError=false;if(hasMessages){hasError=!!messages.find(function(_ref3){var type=_ref3.type;return type==='error';});}return React.createElement(Fragment,{key:label},React.createElement("tr",null,React.createElement("td",null,React.createElement(Fragment,null,React.createElement("span",{className:classNames(_defineProperty({},styles.labelWithInfoIcon,!!info))},label),!hasError&&React.createElement(CheckoutSectionInfo,{text:info}))),React.createElement("td",null,text)),hasMessages&&React.createElement("tr",null,React.createElement("td",{colSpan:"2",style:{textAlign:'left',paddingLeft:0}},React.createElement(CheckoutSectionMessages,{messages:messages}),hasError&&React.createElement(CheckoutSectionInfo,{text:info,renderIcon:false}))));})))),editLink?React.createElement("div",{className:styles.actions},React.createElement(Link,{tag:"a",className:styles.link,href:editLink},i18n.text(editLabel))):null));};CheckoutSection.defaultProps={title:null,className:'',children:null,content:null,hasForm:false,editLink:null,editLabel:'checkout.billing.edit',id:null};export default CheckoutSection;

package/checkout/components/ShippingMethods/ShippingMethods.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);});};}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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;}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{hot}from'react-hot-loader/root';import React,{useCallback,useEffect,useMemo,useState}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import CryptoJs from'crypto-js';import sortBy from'lodash/sortBy';import uniqBy from'lodash/uniqBy';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{isIOSTheme,i18n}from'@shopgate/engage/core';import{RadioGroupV2 as RadioGroup,RadioCard,MessageBar,Card,ConditionalWrapper}from'@shopgate/engage/components';import{useCheckoutContext}from'@shopgate/engage/checkout/hooks/common';import ShippingMethod from"./ShippingMethod";import connect from"./connector";var colors=themeConfig.colors,variables=themeConfig.variables;var styles={root:css({padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap[isIOSTheme()?'big':'xbig'],"px")}).toString(),headline:css(_extends({color:colors.shade3,fontSize:'1.25rem',fontWeight:'normal',textTransform:'uppercase',padding:"0 ".concat(variables.gap.small,"px 0 0"),margin:"0 0 ".concat(variables.gap.small,"px 0")},!isIOSTheme()?{color:'var(--color-text-high-emphasis)',textTransform:'none'}:{})).toString(),container:css(_extends({},!isIOSTheme()?{border:'1px solid #eaeaea'}:{},{' li:nth-child(2n)':{background:'var(--color-background-accent)'}})).toString(),containerSingle:css(_extends({},!isIOSTheme()?{padding:variables.gap.small}:{padding:variables.gap.big})).toString(),card:css(_extends({display:'flex',alignItems:'center'},isIOSTheme()?{padding:"".concat(variables.gap.xsmall,"px ").concat(variables.gap.small,"px 0 ").concat(variables.gap.xsmall,"px")}:{})).toString(),errorMessage:css({margin:0}).toString(),iOSCard:css({width:'100%',overflow:'hidden',marginBottom:variables.gap.big}).toString()};/**
+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);});};}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 _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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{hot}from'react-hot-loader/root';import React,{useCallback,useEffect,useMemo,useState}from'react';import PropTypes from'prop-types';import{css}from'glamor';import classNames from'classnames';import CryptoJs from'crypto-js';import sortBy from'lodash/sortBy';import uniqBy from'lodash/uniqBy';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{i18n}from'@shopgate/engage/core';import{RadioGroupV2 as RadioGroup,RadioCard,MessageBar}from'@shopgate/engage/components';import{useCheckoutContext}from'@shopgate/engage/checkout/hooks/common';import ShippingMethod from"./ShippingMethod";import connect from"./connector";var variables=themeConfig.variables;var styles={root:css({padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.xbig,"px")}).toString(),headline:css({fontSize:'1.25rem',fontWeight:'normal',padding:"0 ".concat(variables.gap.small,"px 0 0"),margin:"0 0 ".concat(variables.gap.small,"px 0"),color:'var(--color-text-high-emphasis)',textTransform:'none'}).toString(),container:css({border:'1px solid #eaeaea',' li:nth-child(2n)':{background:'var(--color-background-accent)'}}).toString(),containerSingle:css({padding:variables.gap.small}).toString(),card:css({display:'flex',alignItems:'center'}).toString(),errorMessage:css({margin:0}).toString(),iOSCard:css({width:'100%',overflow:'hidden',marginBottom:variables.gap.big}).toString()};/**
  * Hashes a shipping method
  * @param {Object} method A shipping method
  * @returns {string}
@@ -20,4 +20,4 @@ var dedupedLevels=uniqBy(unsortedLevels,function(_ref4){var _serviceLevel$carrie
 return sortBy(dedupedLevels,['serviceLevel.cost','serviceLevel.name']);},[availableShippingMethods]);var onChange=useCallback(/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(event,value){var _shippingMethod$servi,_shippingMethod$servi2,_shippingMethod$servi3;var shippingMethod;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:// Determine the selected shipping method by its hash
 shippingMethod=shippingMethods.find(function(_ref6){var hash=_ref6.hash;return value===hash;});if(shippingMethod){_context.next=3;break;}return _context.abrupt("return");case 3:// Update the local state
 setSelectedHash(shippingMethod===null||shippingMethod===void 0?void 0:shippingMethod.hash);// Perform the update request
-_context.next=6;return updateShippingMethod({code:shippingMethod===null||shippingMethod===void 0?void 0:shippingMethod.code,serviceLevel:{code:shippingMethod===null||shippingMethod===void 0?void 0:(_shippingMethod$servi=shippingMethod.serviceLevel)===null||_shippingMethod$servi===void 0?void 0:_shippingMethod$servi.code,carrier:{code:shippingMethod===null||shippingMethod===void 0?void 0:(_shippingMethod$servi2=shippingMethod.serviceLevel)===null||_shippingMethod$servi2===void 0?void 0:(_shippingMethod$servi3=_shippingMethod$servi2.carrier)===null||_shippingMethod$servi3===void 0?void 0:_shippingMethod$servi3.code}}});case 6:case"end":return _context.stop();}}},_callee);}));return function(_x,_x2){return _ref5.apply(this,arguments);};}(),[shippingMethods,updateShippingMethod]);if((order===null||order===void 0?void 0:order.status)!=='new'||!orderHasDirectShipItems){return null;}if(shippingMethods.length===0){return React.createElement("div",{className:styles.root},React.createElement("h3",{className:styles.headline},i18n.text('checkout.shippingMethod.title')),React.createElement(MessageBar,{messages:[{type:'error',message:i18n.text("checkout.shippingMethod.errors.".concat(!shippingAddress?'noShippingAddress':'invalidShippingAddress'))}],classNames:{container:styles.errorMessage},showIcons:true}));}return React.createElement("div",{className:styles.root},React.createElement("h3",{className:styles.headline},i18n.text('checkout.shippingMethod.title')),React.createElement(ConditionalWrapper,{condition:isIOSTheme(),wrapper:function wrapper(children){return React.createElement(Card,{className:styles.iOSCard},children);}},shippingMethods.length===1?React.createElement("div",{className:classNames(styles.container,styles.containerSingle)},React.createElement(ShippingMethod,{shippingMethod:shippingMethods[0]})):React.createElement(RadioGroup,{name:"shipping-methods",value:selectedHash,onChange:onChange,component:"ul",classes:{root:styles.container},disabled:isLoading},shippingMethods.map(function(shippingMethod){return React.createElement(RadioCard,{renderCard:CardComponent,value:shippingMethod.hash,key:shippingMethod.hash},React.createElement(ShippingMethod,{shippingMethod:shippingMethod}));}))));};ShippingMethods.defaultProps={orderHasDirectShipItems:false};export default hot(connect(ShippingMethods));
+_context.next=6;return updateShippingMethod({code:shippingMethod===null||shippingMethod===void 0?void 0:shippingMethod.code,serviceLevel:{code:shippingMethod===null||shippingMethod===void 0?void 0:(_shippingMethod$servi=shippingMethod.serviceLevel)===null||_shippingMethod$servi===void 0?void 0:_shippingMethod$servi.code,carrier:{code:shippingMethod===null||shippingMethod===void 0?void 0:(_shippingMethod$servi2=shippingMethod.serviceLevel)===null||_shippingMethod$servi2===void 0?void 0:(_shippingMethod$servi3=_shippingMethod$servi2.carrier)===null||_shippingMethod$servi3===void 0?void 0:_shippingMethod$servi3.code}}});case 6:case"end":return _context.stop();}}},_callee);}));return function(_x,_x2){return _ref5.apply(this,arguments);};}(),[shippingMethods,updateShippingMethod]);if((order===null||order===void 0?void 0:order.status)!=='new'||!orderHasDirectShipItems){return null;}if(shippingMethods.length===0){return React.createElement("div",{className:styles.root},React.createElement("h3",{className:styles.headline},i18n.text('checkout.shippingMethod.title')),React.createElement(MessageBar,{messages:[{type:'error',message:i18n.text("checkout.shippingMethod.errors.".concat(!shippingAddress?'noShippingAddress':'invalidShippingAddress'))}],classNames:{container:styles.errorMessage},showIcons:true}));}return React.createElement("div",{className:styles.root},React.createElement("h3",{className:styles.headline},i18n.text('checkout.shippingMethod.title')),shippingMethods.length===1?React.createElement("div",{className:classNames(styles.container,styles.containerSingle)},React.createElement(ShippingMethod,{shippingMethod:shippingMethods[0]})):React.createElement(RadioGroup,{name:"shipping-methods",value:selectedHash,onChange:onChange,component:"ul",classes:{root:styles.container},disabled:isLoading},shippingMethods.map(function(shippingMethod){return React.createElement(RadioCard,{renderCard:CardComponent,value:shippingMethod.hash,key:shippingMethod.hash},React.createElement(ShippingMethod,{shippingMethod:shippingMethod}));})));};ShippingMethods.defaultProps={orderHasDirectShipItems:false};export default hot(connect(ShippingMethods));

package/checkout/paymentMethods/index.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);});};}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;}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,{useContext,useCallback,useEffect,useMemo,useRef,useState}from'react';import{connect}from'react-redux';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{isIOSTheme}from'@shopgate/engage/core';import{getPaymentMethods}from"../selectors/payment";import{getCheckoutOrder}from"../selectors/order";import CheckoutContext from"../providers/CheckoutProvider.context";import{updateCheckoutOrder}from"../actions/updateCheckoutOrder";import{fetchCheckoutOrder}from"../actions/fetchCheckoutOrder";import{i18n}from"../../core/helpers/i18n";import Context from"./context";import paypal from"./paypal";import stripe from"./stripe";var AVAILABLE_PAYMENT_METHOD=[paypal,stripe];/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";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 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);});};}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 React,{useContext,useCallback,useEffect,useMemo,useRef,useState}from'react';import{connect}from'react-redux';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{getPaymentMethods}from"../selectors/payment";import{getCheckoutOrder}from"../selectors/order";import CheckoutContext from"../providers/CheckoutProvider.context";import{updateCheckoutOrder}from"../actions/updateCheckoutOrder";import{fetchCheckoutOrder}from"../actions/fetchCheckoutOrder";import{i18n}from"../../core/helpers/i18n";import Context from"./context";import paypal from"./paypal";import stripe from"./stripe";var AVAILABLE_PAYMENT_METHOD=[paypal,stripe];/**
  * Maps state to props
  * @param {Object} state State
  * @returns {Object}
@@ -6,7 +6,7 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGenera
  * Dispatch
  * @param {Object} dispatch Dispatch
  * @returns {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{updateOrder:function updateOrder(order){return dispatch(updateCheckoutOrder(order));},fetchOrder:function fetchOrder(){return dispatch(fetchCheckoutOrder());}};};var colors=themeConfig.colors,variables=themeConfig.variables;var styles={headline:css(_extends({color:colors.shade3,fontSize:'1.25rem',fontWeight:'normal',textTransform:'uppercase',margin:"0 0 ".concat(variables.gap.small,"px 0"),marginLeft:16,marginRight:8},!isIOSTheme()?{color:'var(--color-text-high-emphasis)',textTransform:'none'}:{})).toString(),section:css(_extends({marginBottom:0,marginTop:4},isIOSTheme()?{marginBottom:32}:{})).toString(),buttons:css(_extends({marginLeft:16,marginRight:16,marginBottom:16,display:'flex',flexDirection:'row'},isIOSTheme()?{marginBottom:32}:{})).toString()};/**
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{updateOrder:function updateOrder(order){return dispatch(updateCheckoutOrder(order));},fetchOrder:function fetchOrder(){return dispatch(fetchCheckoutOrder());}};};var variables=themeConfig.variables;var styles={headline:css({fontSize:'1.25rem',fontWeight:'normal',margin:"0 0 ".concat(variables.gap.small,"px 0"),marginLeft:16,marginRight:8,color:'var(--color-text-high-emphasis)',textTransform:'none'}).toString(),section:css({marginBottom:0,marginTop:4}).toString(),buttons:css({marginLeft:16,marginRight:16,marginBottom:16,display:'flex',flexDirection:'row'}).toString()};/**
  * PaymentMethodProvider
  * @param {Object} props Props
  * @returns {JSX}

package/checkout/paymentMethods/paypal/PaypalPayButton.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);});};}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(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;}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,{useLayoutEffect,useEffect,useRef,useState,Fragment}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{isIOSTheme,getThemeSettings,showModal,MODAL_PIPELINE_ERROR}from'@shopgate/engage/core';import{connect}from'react-redux';import{i18n}from"../../../core/helpers/i18n";import{useCheckoutContext}from"../../hooks/common";import{usePaypal}from"./sdk";var colors=themeConfig.colors;var styles={headline:css(_extends({color:colors.shade3,fontSize:'1.25rem',fontWeight:'normal',textTransform:'uppercase',margin:'12px 0 12px 0'},!isIOSTheme()?{color:'var(--color-text-high-emphasis)',textTransform:'none'}:{})).toString()};/**
+import _regeneratorRuntime from"@babel/runtime/regenerator";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 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);});};}function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(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 React,{useLayoutEffect,useEffect,useRef,useState,Fragment}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{getThemeSettings,showModal,MODAL_PIPELINE_ERROR}from'@shopgate/engage/core';import{connect}from'react-redux';import{i18n}from"../../../core/helpers/i18n";import{useCheckoutContext}from"../../hooks/common";import{usePaypal}from"./sdk";var styles={headline:css({fontSize:'1.25rem',fontWeight:'normal',margin:'12px 0 12px 0',color:'var(--color-text-high-emphasis)',textTransform:'none'}).toString()};/**
  * Paypal Pay button
  * @returns {JSX}
  */var PaypalPayButton=function PaypalPayButton(_ref){var disabled=_ref.disabled,onSubmit=_ref.onSubmit,onValidate=_ref.onValidate,showModal=_ref.showModal;var _useCheckoutContext=useCheckoutContext(),paymentData=_useCheckoutContext.paymentData,paymentTransactions=_useCheckoutContext.paymentTransactions;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),paypalActions=_useState2[0],setPaypalActions=_useState2[1];var paypal=usePaypal();var paypalButton=useRef(null);var button=useRef(null);var fundingSource=paymentData===null||paymentData===void 0?void 0:paymentData.meta;// Store form actions inside ref as they would trigger

package/checkout/paymentMethods/stripe/StripeCreditCard.js

@@ -1,4 +1,4 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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 _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,{useContext}from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{isIOSTheme,i18n}from'@shopgate/engage/core';import{TextField}from'@shopgate/engage/components';import{getCSSCustomProp}from'@shopgate/engage/styles';import{CardNumberElement,CardCvcElement,CardExpiryElement}from'@stripe/react-stripe-js';import Section from"../../components/Checkout/CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import StripeContext from"./StripeProvider.context";var colors=themeConfig.colors;var styles={root:css({padding:'0 16px',display:'flex',flexDirection:'column',flex:'0 0 auto',' .formElement':_extends({},!isIOSTheme()?{background:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:0,marginBottom:38,borderTopLeftRadius:4,borderTopRightRadius:4,borderBottom:"1px solid ".concat(colors.shade12)}:{}),' .formElement label':_extends({},!isIOSTheme()?{color:'var(--color-text-low-emphasis)',paddingLeft:24}:{}),' .underline':_extends({},!isIOSTheme()?{marginBottom:0,borderBottom:'none'}:{}),' .errorText':_extends({},!isIOSTheme()?{bottom:-20,left:18}:{}),' .StripeElement':_extends({},!isIOSTheme()?{paddingLeft:16}:{})}).toString(),secondRow:css({display:'flex',flexDirection:'row'}).toString(),cvc:css({flex:1.5,marginRight:16}).toString(),expiry:css({flex:1}).toString()};/* eslint-disable react/prop-types */ /**
+function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{useContext}from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import{i18n}from'@shopgate/engage/core';import{TextField}from'@shopgate/engage/components';import{getCSSCustomProp}from'@shopgate/engage/styles';import{CardNumberElement,CardCvcElement,CardExpiryElement}from'@stripe/react-stripe-js';import Section from"../../components/Checkout/CheckoutSection";import{useCheckoutContext}from"../../hooks/common";import StripeContext from"./StripeProvider.context";var colors=themeConfig.colors;var styles={root:css({padding:'0 16px',display:'flex',flexDirection:'column',flex:'0 0 auto',' .formElement':{background:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:0,marginBottom:38,borderTopLeftRadius:4,borderTopRightRadius:4,borderBottom:"1px solid ".concat(colors.shade12)},' .formElement label':{color:'var(--color-text-low-emphasis)',paddingLeft:24},' .underline':{marginBottom:0,borderBottom:'none'},' .errorText':{bottom:-20,left:18},' .StripeElement':{paddingLeft:16}}).toString(),secondRow:css({display:'flex',flexDirection:'row'}).toString(),cvc:css({flex:1.5,marginRight:16}).toString(),expiry:css({flex:1}).toString()};/* eslint-disable react/prop-types */ /**
  * Wrapper
  * @param {Object} Element element
  * @returns {Object}

package/checkout/providers/CheckoutProvider.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);});};}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 _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;}/* eslint-disable no-unused-expressions */import React,{useCallback}from'react';import{isAvailable,InAppBrowser,Linking}from'@shopgate/native-modules';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{i18n,useAsyncMemo,getUserAgent,LoadingProvider}from'@shopgate/engage/core';import{MARKETING_OPT_IN_DEFAULT}from'@shopgate/engage/registration/constants';import Context from"./CheckoutProvider.context";import connect from"./CheckoutProvider.connector";import{pickupConstraints,selfPickupConstraints}from"./CheckoutProvider.constraints";import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants/routes";import{hasWebBridge}from"../../core";var defaultPickupPersonState={pickupPerson:'me',firstName:'',lastName:'',mobile:'',email:'',firstName2:'',lastName2:'',mobile2:'',email2:''};/**
+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);});};}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 _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;}/* eslint-disable no-unused-expressions */import React,{useCallback}from'react';import{isAvailable,InAppBrowser,Linking}from'@shopgate/native-modules';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{i18n,useAsyncMemo,getUserAgent,LoadingProvider}from'@shopgate/engage/core';import{MARKETING_OPT_IN_DEFAULT}from'@shopgate/engage/registration/constants';import Context from"./CheckoutProvider.context";import connect from"./CheckoutProvider.connector";import{pickupConstraints,selfPickupConstraints}from"./CheckoutProvider.constraints";import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants/routes";var defaultPickupPersonState={pickupPerson:'me',firstName:'',lastName:'',mobile:'',email:'',firstName2:'',lastName2:'',mobile2:'',email2:''};/**
  * Converts validation errors into errors for form builder.
  * @param {Object} validationErrors The validation errors.
  * @returns {Array}
@@ -25,4 +25,4 @@ var value=React.useMemo(function(){return{setPaymentHandler:function setPaymentH
 React.useEffect(function(){if(!isAvailable())return undefined;/**
      * @param {Object} event Event
      */var listener=/*#__PURE__*/function(){var _ref9=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(event){var _ref10,_ref10$link,link,_link$match,_link$match2,_,_scheme,path,_ref11,_ref12,order;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1){switch(_context4.prev=_context4.next){case 0:_ref10=(event===null||event===void 0?void 0:event.detail)||{},_ref10$link=_ref10.link,link=_ref10$link===void 0?'':_ref10$link;/* eslint-disable-next-line no-unused-vars */_link$match=link.match(/(.*):\/\/([a-zA-Z0-9-/]*)(.*)/),_link$match2=_slicedToArray(_link$match,3),_=_link$match2[0],_scheme=_link$match2[1],path=_link$match2[2];// Order is done, fetch again to retrieve infos for success page
-if(!(path==='payment/success')){_context4.next=11;break;}_context4.next=5;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 5:_ref11=_context4.sent;_ref12=_slicedToArray(_ref11,1);order=_ref12[0];historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});_context4.next=12;break;case 11:if(path==='payment/error'){showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});}case 12:case"end":return _context4.stop();}}},_callee4);}));return function listener(_x3){return _ref9.apply(this,arguments);};}();Linking.addEventListener('deepLinkOpened',listener);return function(){Linking.removeEventListener('deepLinkOpened',listener);};},[fetchCart,fetchCheckoutOrder,historyReplace,showModal]);if(!isDataReady||!isCheckoutInitialized){return null;}return React.createElement(Context.Provider,{value:value},children);};CheckoutProvider.defaultProps={orderInitialized:false,orderReadOnly:false,orderReserveOnly:false,isShippingAddressSelectionEnabled:false,isPickupContactSelectionEnabled:false,isGuestCheckout:false};export default connect(CheckoutProvider);
+if(!(path==='payment/success')){_context4.next=11;break;}_context4.next=5;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 5:_ref11=_context4.sent;_ref12=_slicedToArray(_ref11,1);order=_ref12[0];historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});_context4.next=12;break;case 11:if(path==='payment/error'){showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});}case 12:case"end":return _context4.stop();}}},_callee4);}));return function listener(_x3){return _ref9.apply(this,arguments);};}();Linking.addEventListener('deepLinkOpened',listener);return function(){Linking.removeEventListener('deepLinkOpened',listener);};},[fetchCart,fetchCheckoutOrder,historyReplace,showModal]);if(!isDataReady||!isCheckoutInitialized){return null;}return React.createElement(Context.Provider,{value:value},children);};CheckoutProvider.defaultProps={orderInitialized:false,orderReadOnly:false,orderReserveOnly:false,isShippingAddressSelectionEnabled:false,isPickupContactSelectionEnabled:false,isGuestCheckout:false};export default connect(CheckoutProvider);/* eslint-enable no-unused-expressions */

package/components/Form/Builder/Builder.js

@@ -1,9 +1,4 @@
-import _camelCase from"lodash/camelCase";var _defineProperty2;function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(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;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component,Fragment}from'react';import PropTypes from'prop-types';import{logger}from'@shopgate/pwa-core/helpers';import Portal from'@shopgate/pwa-common/components/Portal';import{BEFORE,AFTER}from'@shopgate/pwa-common/constants/Portals';import{Form}from'..';import ActionListener from"./classes/ActionListener";import{ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_SELECT,ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE,ELEMENT_TYPE_CHECKBOX,ELEMENT_TYPE_RADIO,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE,ELEMENT_TYPE_PHONE_PICKER,ELEMENT_TYPE_MULTISELECT}from"./Builder.constants";import ElementText from"./ElementText";import ElementSelect from"./ElementSelect";import ElementMultiSelect from"./ElementMultiSelect";import ElementRadio from"./ElementRadio";import ElementCheckbox from"./ElementCheckbox";import ElementPhoneNumber from"./ElementPhoneNumber";import buildFormElements from"./helpers/buildFormElements";import buildFormDefaults from"./helpers/buildFormDefaults";import buildCountryList from"./helpers/buildCountryList";import buildProvinceList from"./helpers/buildProvinceList";import buildValidationErrorList from"./helpers/buildValidationErrorList";/**
- * Takes a string and converts it to a part to be used in a portal name
- * @package FormBuilder
- * @param {string} s The string to be sanitized
- * @return {string}
- */var sanitize=function sanitize(s){return s.replace(/[\\._]/,'-');};/**
+import _camelCase from"lodash/camelCase";var _defineProperty2;function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(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;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}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,{Component,Fragment}from'react';import PropTypes from'prop-types';import{logger}from'@shopgate/pwa-core/helpers';import Portal from'@shopgate/pwa-common/components/Portal';import{BEFORE,AFTER}from'@shopgate/pwa-common/constants/Portals';import{Form}from'..';import ActionListener from"./classes/ActionListener";import{ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_SELECT,ELEMENT_TYPE_COUNTRY,ELEMENT_TYPE_PROVINCE,ELEMENT_TYPE_CHECKBOX,ELEMENT_TYPE_RADIO,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE,ELEMENT_TYPE_PHONE_PICKER,ELEMENT_TYPE_MULTISELECT}from"./Builder.constants";import ElementText from"./ElementText";import ElementSelect from"./ElementSelect";import ElementMultiSelect from"./ElementMultiSelect";import ElementRadio from"./ElementRadio";import ElementCheckbox from"./ElementCheckbox";import ElementPhoneNumber from"./ElementPhoneNumber";import buildFormElements from"./helpers/buildFormElements";import buildFormDefaults from"./helpers/buildFormDefaults";import buildCountryList from"./helpers/buildCountryList";import buildProvinceList from"./helpers/buildProvinceList";import buildValidationErrorList from"./helpers/buildValidationErrorList";import{sanitizePortalName}from"./helpers/common";/**
  * Optional select element
  * @type {Object}
  */var emptySelectOption={'':''};/**
@@ -22,11 +17,11 @@ _this.formElements.forEach(function(formElement){if(!finalState.elementVisibilit
 _this.setState(finalState);// Transform to external structure (unavailable ones will be set undefined)
 var updateData={};_this.formElements.forEach(function(el){if(el.custom){if(updateData.customAttributes===undefined){updateData.customAttributes={};}updateData.customAttributes[el.id]=finalState.formData[el.id];}else{updateData[el.id]=finalState.formData[el.id];}});// Trigger the given update action of the parent and provide all new validation errors to it
 _this.props.handleUpdate(updateData,hasErrors,// Output validation errors in the same structure (array) as the component takes them
-hasErrors?Object.keys(validationErrors).map(function(k){return{path:k,message:validationErrors[k]};}):[]);});_defineProperty(_assertThisInitialized(_this),"renderElement",function(element,elementErrorText){var elementName="".concat(_this.props.name,"_").concat(element.id);var elementValue=_this.state.formData[element.id];var elementVisible=_this.state.elementVisibility[element.id]||false;// Take a dynamic REACT element based on its type
+hasErrors?Object.keys(validationErrors).map(function(k){return{path:k,message:validationErrors[k]};}):[]);});_defineProperty(_assertThisInitialized(_this),"renderElement",function(formName,element,elementErrorText){var elementName="".concat(_this.props.name,"_").concat(element.id);var elementValue=_this.state.formData[element.id];var elementVisible=_this.state.elementVisibility[element.id]||false;// Take a dynamic REACT element based on its type
 var Element=_this.getFormElementComponent(element.type);if(!Element){logger.error("Unknown form element type: ".concat(element.type));return null;}// Country and province elements have their data injected, if not already present
 var elementData=element;switch(element.type){case ELEMENT_TYPE_COUNTRY:{elementData.options=element.options||_this.countryList;break;}case ELEMENT_TYPE_PROVINCE:{// Province selection only makes sense with a country being selected, or from custom options
 var countryElement=_this.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});elementData.options=countryElement&&_this.state.formData[countryElement.id]?buildProvinceList(_this.state.formData[countryElement.id],// Auto-select with "empty" when not required
-element.required?null:emptySelectOption):{};break;}default:break;}return React.createElement(Element,{name:elementName,element:elementData,errorText:elementErrorText,value:elementValue,visible:elementVisible});});_this.state={elementVisibility:{},formData:{}};// Reorganize form elements into a structure that can be easily rendered
+element.required?null:emptySelectOption):{};break;}default:break;}return React.createElement(Element,{name:elementName,element:elementData,errorText:elementErrorText,value:elementValue,visible:elementVisible,formName:formName});});_this.state={elementVisibility:{},formData:{}};// Reorganize form elements into a structure that can be easily rendered
 var formElements=buildFormElements(props.config,_this.elementChangeHandler);// Compute defaults
 var formDefaults=buildFormDefaults(formElements,props.defaults);// Assign defaults to state
 _this.state.formData=formDefaults;// Handle fixed visibilities
@@ -43,7 +38,7 @@ var _newState=_this.state;_this.formElements.forEach(function(element){_newState
    * Renders the component based on the given config
    * @return {JSX}
    */value:function render(){var _this2=this;// Convert validation errors for easier handling
-var validationErrors=buildValidationErrorList(this.props.validationErrors);return React.createElement(Form,{className:_camelCase(this.props.name),onSubmit:this.props.onSubmit},React.createElement("div",{className:this.props.className},this.formElements.map(function(element){return React.createElement(Fragment,{key:"".concat(_this2.props.name,"_").concat(element.id)},React.createElement(Portal,{name:"".concat(sanitize(_this2.props.name),".").concat(sanitize(element.id),".").concat(BEFORE)}),React.createElement(Portal,{name:"".concat(sanitize(_this2.props.name),".").concat(sanitize(element.id))},_this2.renderElement(element,validationErrors[element.id]||'')),React.createElement(Portal,{name:"".concat(sanitize(_this2.props.name),".").concat(sanitize(element.id),".").concat(AFTER)}));})));}}]);return Builder;}(Component);_defineProperty(Builder,"defaultElements",(_defineProperty2={},_defineProperty(_defineProperty2,ELEMENT_TYPE_EMAIL,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PASSWORD,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_TEXT,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_NUMBER,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_SELECT,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_MULTISELECT,ElementMultiSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_COUNTRY,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_PROVINCE,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_CHECKBOX,ElementCheckbox),_defineProperty(_defineProperty2,ELEMENT_TYPE_RADIO,ElementRadio),_defineProperty(_defineProperty2,ELEMENT_TYPE_DATE,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PHONE,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PHONE_PICKER,ElementPhoneNumber),_defineProperty2));_defineProperty(Builder,"defaultProps",{className:null,defaults:{},elements:Builder.defaultElements,onSubmit:function onSubmit(){},validationErrors:[]/**
+var validationErrors=buildValidationErrorList(this.props.validationErrors);return React.createElement(Form,{className:_camelCase(this.props.name),onSubmit:this.props.onSubmit},React.createElement("div",{className:this.props.className},this.formElements.map(function(element){return React.createElement(Fragment,{key:"".concat(_this2.props.name,"_").concat(element.id)},React.createElement(Portal,{name:"".concat(sanitizePortalName(_this2.props.name),".").concat(sanitizePortalName(element.id),".").concat(BEFORE),props:{formName:_this2.props.name,errorText:validationErrors[element.id]||'',element:element}}),React.createElement(Portal,{name:"".concat(sanitizePortalName(_this2.props.name),".").concat(sanitizePortalName(element.id)),props:{formName:_this2.props.name,errorText:validationErrors[element.id]||'',element:element}},_this2.renderElement(_this2.props.name,element,validationErrors[element.id]||'')),React.createElement(Portal,{name:"".concat(sanitizePortalName(_this2.props.name),".").concat(sanitizePortalName(element.id),".").concat(AFTER),props:{formName:_this2.props.name,errorText:validationErrors[element.id]||'',element:element}}));})));}}]);return Builder;}(Component);_defineProperty(Builder,"defaultElements",(_defineProperty2={},_defineProperty(_defineProperty2,ELEMENT_TYPE_EMAIL,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PASSWORD,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_TEXT,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_NUMBER,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_SELECT,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_MULTISELECT,ElementMultiSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_COUNTRY,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_PROVINCE,ElementSelect),_defineProperty(_defineProperty2,ELEMENT_TYPE_CHECKBOX,ElementCheckbox),_defineProperty(_defineProperty2,ELEMENT_TYPE_RADIO,ElementRadio),_defineProperty(_defineProperty2,ELEMENT_TYPE_DATE,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PHONE,ElementText),_defineProperty(_defineProperty2,ELEMENT_TYPE_PHONE_PICKER,ElementPhoneNumber),_defineProperty2));_defineProperty(Builder,"defaultProps",{className:null,defaults:{},elements:Builder.defaultElements,onSubmit:function onSubmit(){},validationErrors:[]/**
    * Initializes the component.
    * @param {Object} props The components props.
    */});export default Builder;

package/components/Form/Builder/ElementCheckbox.js

@@ -1,6 +1,6 @@
-import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Checkbox from'@shopgate/pwa-ui-shared/Form/Checkbox';/**
+import _camelCase from"lodash/camelCase";import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import Checkbox from'@shopgate/pwa-ui-shared/Form/Checkbox';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 ElementCheckbox=function ElementCheckbox(props){var element=props.element,errorText=props.errorText,value=props.value,name=props.name,visible=props.visible;if(!visible){return null;}return React.createElement("div",{className:classNames('container-checkbox',_camelCase(name),{validationError:!!errorText})},React.createElement(Checkbox,{name:name,errorText:errorText,checked:!!value,label:element.label,onChange:element.handleChange,translateErrorText:false,disabled:element.disabled}));};ElementCheckbox.defaultProps={value:false,visible:true};export default memo(ElementCheckbox);
+ */var ElementCheckbox=function ElementCheckbox(props){var element=props.element,errorText=props.errorText,value=props.value,name=props.name,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames('container-checkbox',_camelCase(name),'formBuilderField',{validationError:!!errorText})},React.createElement(Checkbox,{name:name,errorText:errorText,checked:!!value,label:element.label,onChange:element.handleChange,translateErrorText:false,showErrorText:false,disabled:element.disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));};ElementCheckbox.defaultProps={value:false,visible:true};export default memo(ElementCheckbox);

package/components/Form/Builder/ElementMultiSelect.js

@@ -1,6 +1,6 @@
-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 SelectContextChoices from'@shopgate/pwa-ui-shared/Form/SelectContextChoices';import ResponsiveContainer from"../../ResponsiveContainer/ResponsiveContainer";/**
+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 SelectContextChoices from'@shopgate/pwa-ui-shared/Form/SelectContextChoices';import ResponsiveContainer from"../../ResponsiveContainer/ResponsiveContainer";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 ElementMultiSelect=function ElementMultiSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible;if(!visible){return null;}var values=[].concat(value).filter(Boolean);return React.createElement("div",{className:classNames(_camelCase(name),{validationError:!!errorText})},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Select,{name:name,label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,disabled:element.disabled,multiple:true})),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(SelectContextChoices,{label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText})));};ElementMultiSelect.defaultProps={value:'',visible:true};export default memo(ElementMultiSelect);
+ */var ElementMultiSelect=function ElementMultiSelect(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 values=[].concat(value).filter(Boolean);return React.createElement("div",{className:classNames(_camelCase(name),'formBuilderField',{validationError:!!errorText})},React.createElement(ResponsiveContainer,{appAlways:true,breakpoint:"xs"},React.createElement(Select,{name:name,label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled,multiple:true})),React.createElement(ResponsiveContainer,{webOnly:true,breakpoint:">xs"},React.createElement(SelectContextChoices,{label:element.label,placeholder:element.placeholder,value:values,options:element.options,onChange:element.handleChange,errorText:errorText,showErrorText:false})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));};ElementMultiSelect.defaultProps={value:'',visible:true};export default memo(ElementMultiSelect);

package/components/Form/Builder/ElementPhoneNumber.js

@@ -1,8 +1,8 @@
-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;}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 classnames from'classnames';import{i18n}from'@shopgate/engage/core';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInput from'react-phone-number-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 TextField from'@shopgate/pwa-ui-shared/TextField';import{useCountriesNames}from'@shopgate/engage/i18n';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';var variables=themeConfig.variables,colors=themeConfig.colors;var styles={formField:css({width:'100%',paddingBottom:variables.gap.small}).toString(),phoneField:css({position:'relative',width:'100%',paddingTop:variables.gap.big*0.75,paddingBottom:variables.gap.big*1.25,marginBottom:variables.gap.small,' 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 _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;}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 classnames from'classnames';import{i18n}from'@shopgate/engage/core';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInput from'react-phone-number-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 TextField from'@shopgate/pwa-ui-shared/TextField';import{useCountriesNames}from'@shopgate/engage/i18n';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';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};/**
  * 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 _classnames;var element=props.element,name=props.name,errorText=props.errorText,value=props.value,visible=props.visible;var label=element.label,handleChange=element.handleChange,_element$default=element["default"],defaultValue=_element$default===void 0?'':_element$default,_element$disabled=element.disabled,disabled=_element$disabled===void 0?false:_element$disabled,_element$config=element.config;_element$config=_element$config===void 0?{}:_element$config;var _element$config$suppo=_element$config.supportedCountries,supportedCountries=_element$config$suppo===void 0?[]:_element$config$suppo,_element$config$userL=_element$config.userLocation,userLocation=_element$config$userL===void 0?{}:_element$config$userL;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 UnwrappedElementPhoneNumber=React.memo(function(props){var _classnames;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$default=element["default"],defaultValue=_element$default===void 0?'':_element$default,_element$disabled=element.disabled,disabled=_element$disabled===void 0?false:_element$disabled,_element$config=element.config;_element$config=_element$config===void 0?{}:_element$config;var _element$config$suppo=_element$config.supportedCountries,supportedCountries=_element$config$suppo===void 0?[]:_element$config$suppo,_element$config$userL=_element$config.userLocation,userLocation=_element$config$userL===void 0?{}:_element$config$userL;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){return builtInCountries;}var sortedCountries=[].concat(builtInCountries);var sanitizedSupportedCountries=supportedCountries.map(function(country){var pieces=country.split('_');return pieces[0];});sanitizedSupportedCountries.forEach(function(country){sortedCountries.splice(sortedCountries.indexOf(country),1);});return[].concat(sanitizedSupportedCountries,sortedCountries);},[supportedCountries]);var countriesNames=useCountriesNames(supportedCountries,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]);// Sets the default country based on the users location.
-var defaultCountry=React.useMemo(function(){if(!defaultValue&&!value&&userLocation){return userLocation.country;}var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){return phoneNumber.country;}if(userLocation){return userLocation.country;}return i18n.getLang().split('-')[1];},[defaultValue,userLocation,value]);var handleChangeWrapped=React.useCallback(function(phoneValue){handleChange(phoneValue,{target:{name:name}});},[handleChange,name]);var phoneClasses=classnames((_classnames={},_defineProperty(_classnames,_camelCase(name),true),_defineProperty(_classnames,"phonePicker",true),_defineProperty(_classnames,"phonePickerError",!!errorText),_defineProperty(_classnames,"validationError",!!errorText),_defineProperty(_classnames,"phonePickerFocused",isFocused),_defineProperty(_classnames,styles.phoneField,true),_defineProperty(_classnames,styles.phoneFieldError,!!errorText),_classnames));if(!visible){return null;}if(!countries||countries.length===0){return React.createElement(TextField,{name:name,value:value,onChange:handleChange,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},label:label,className:classnames(styles.formField,{validationError:!!errorText}),errorText:errorText,disabled:disabled});}return React.createElement("div",{className:phoneClasses},React.createElement(PhoneInput,{defaultCountry:defaultCountry,addInternationalOption:false,flags:flags,name:name,value:value||'',onChange:handleChangeWrapped,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},placeholder:label,countries:countries,labels:labels,disabled:disabled}),!!errorText&&React.createElement("div",{className:"errorText ".concat(styles.phoneFieldErrorText)},errorText));});export default UnwrappedElementPhoneNumber;
+var defaultCountry=React.useMemo(function(){if(!defaultValue&&!value&&userLocation){return userLocation.country;}var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){return phoneNumber.country;}if(userLocation){return userLocation.country;}return i18n.getLang().split('-')[1];},[defaultValue,userLocation,value]);var handleChangeWrapped=React.useCallback(function(phoneValue){handleChange(phoneValue,{target:{name:name}});},[handleChange,name]);var phoneClasses=classnames((_classnames={},_defineProperty(_classnames,_camelCase(name),true),_defineProperty(_classnames,"phonePicker",true),_defineProperty(_classnames,"phonePickerError",!!errorText),_defineProperty(_classnames,"validationError",!!errorText),_defineProperty(_classnames,"phonePickerFocused",isFocused),_defineProperty(_classnames,styles.phoneField,true),_defineProperty(_classnames,styles.phoneFieldError,!!errorText),_classnames));if(!visible){return null;}if(!countries||countries.length===0){return React.createElement(React.Fragment,null,React.createElement(TextField,{name:name,value:value,onChange:handleChange,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},label:label,className:classnames(styles.formField,{validationError:!!errorText}),disabled:disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));}return React.createElement("div",{className:"formBuilderField"},React.createElement("div",{className:phoneClasses},React.createElement(PhoneInput,{defaultCountry:defaultCountry,addInternationalOption:false,flags:flags,name:name,value:value||'',onChange:handleChangeWrapped,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},placeholder:label,countries:countries,labels:labels,disabled:disabled,countryOptionsOrder:supportedCountries.length?[].concat(supportedCountries,['|']):[]})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));});export default UnwrappedElementPhoneNumber;

package/components/Form/Builder/ElementRadio.js

@@ -1,6 +1,6 @@
-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 _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;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),{validationError:!!errorText})},React.createElement(RadioGroup,{name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText: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]});})));};ElementRadio.defaultProps={value:'',visible:true};export default memo(ElementRadio);
+ */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),'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}));};ElementRadio.defaultProps={value:'',visible:true};export default memo(ElementRadio);

package/components/Form/Builder/ElementSelect.js

@@ -1,6 +1,6 @@
-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 _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}
- */var ElementSelect=function ElementSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),{validationError:!!errorText})},React.createElement(Select,{name:name,label:element.label,placeholder:element.placeholder,value:value,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,disabled:element.disabled}));};ElementSelect.defaultProps={value:'',visible:true};export default memo(ElementSelect);
+ */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;}return React.createElement("div",{className:classNames(_camelCase(name),'formBuilderField',{validationError:!!errorText})},React.createElement(Select,{name:name,label:element.label,placeholder:element.placeholder,value:value,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));};ElementSelect.defaultProps={value:'',visible:true};export default memo(ElementSelect);

package/components/Form/Builder/ElementText.js

@@ -1,7 +1,7 @@
-import _camelCase from"lodash/camelCase";var _mapping;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{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
+import _camelCase from"lodash/camelCase";var _mapping;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=(_mapping={},_defineProperty(_mapping,ELEMENT_TYPE_TEXT,'text'),_defineProperty(_mapping,ELEMENT_TYPE_NUMBER,'number'),_defineProperty(_mapping,ELEMENT_TYPE_EMAIL,'email'),_defineProperty(_mapping,ELEMENT_TYPE_PASSWORD,'password'),_defineProperty(_mapping,ELEMENT_TYPE_DATE,'date'),_defineProperty(_mapping,ELEMENT_TYPE_PHONE,'tel'),_mapping);/**
  * 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 ElementText=function ElementText(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible;if(!visible){return null;}var type=mapping[element.type];return React.createElement("div",{className:classNames(_camelCase(name),{validationError:!!errorText})},React.createElement(TextField,{type:type,name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,disabled:element.disabled}));};ElementText.defaultProps={value:'',visible:true};export default memo(ElementText);
+ */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 type=mapping[element.type];return React.createElement("div",{className:classNames(_camelCase(name),'formBuilderField',{validationError:!!errorText})},React.createElement(TextField,{type:type,name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));};ElementText.defaultProps={value:'',visible:true};export default memo(ElementText);

package/components/Form/Builder/FormHelper.js

@@ -0,0 +1,5 @@
+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}
+ */var FormHelper=function FormHelper(_ref){var errorText=_ref.errorText,element=_ref.element,formName=_ref.formName;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})));};FormHelper.defaultProps={errorText:null};export default FormHelper;

package/components/Form/Builder/helpers/common.js

@@ -0,0 +1,6 @@
+/**
+ * Takes a string and converts it to a part to be used in a portal name
+ * @package FormBuilder
+ * @param {string} s The string to be sanitized
+ * @return {string}
+ */export var sanitizePortalName=function sanitizePortalName(s){return s.replace(/[\\._]/,'-');};