@shopgate/engage 7.12.7-beta.1 → 7.20.0-beta.10

package/checkout/providers/CheckoutProvider.js

@@ -6,23 +6,23 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGenera
  * Checkout Provider
  * @returns {JSX}
  */var CheckoutProvider=function CheckoutProvider(_ref){var pathPattern=_ref.pathPattern,orderInitialized=_ref.orderInitialized,orderReadOnly=_ref.orderReadOnly,historyReplace=_ref.historyReplace,prepareCheckout=_ref.prepareCheckout,fetchCheckoutOrder=_ref.fetchCheckoutOrder,updateCheckoutOrder=_ref.updateCheckoutOrder,submitCheckoutOrder=_ref.submitCheckoutOrder,showModal=_ref.showModal,children=_ref.children,shopSettings=_ref.shopSettings,billingAddress=_ref.billingAddress,shippingAddress=_ref.shippingAddress,pickupAddress=_ref.pickupAddress,paymentTransactions=_ref.paymentTransactions,fetchCart=_ref.fetchCart,taxLines=_ref.taxLines,userLocation=_ref.userLocation,isDataReady=_ref.isDataReady,fulfillmentSlot=_ref.fulfillmentSlot,orderReserveOnly=_ref.orderReserveOnly,isShippingAddressSelectionEnabled=_ref.isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled=_ref.isPickupContactSelectionEnabled,isGuestCheckout=_ref.isGuestCheckout,campaignAttribution=_ref.campaignAttribution,clearCheckoutCampaign=_ref.clearCheckoutCampaign,checkoutOrder=_ref.order;var _React$useState=React.useState(null),_React$useState2=_slicedToArray(_React$useState,2),paymentButton=_React$useState2[0],setPaymentButton=_React$useState2[1];var paymentHandlerRef=React.useRef(null);var _React$useState3=React.useState(null),_React$useState4=_slicedToArray(_React$useState3,2),paymentData=_React$useState4[0],setPaymentData=_React$useState4[1];var _React$useState5=React.useState(true),_React$useState6=_slicedToArray(_React$useState5,2),isLocked=_React$useState6[0],setLocked=_React$useState6[1];var _React$useState7=React.useState(true),_React$useState8=_slicedToArray(_React$useState7,2),isButtonLocked=_React$useState8[0],setButtonLocked=_React$useState8[1];var _React$useState9=React.useState(true),_React$useState10=_slicedToArray(_React$useState9,2),isLoading=_React$useState10[0],setLoading=_React$useState10[1];var _React$useState11=React.useState(selfPickupConstraints),_React$useState12=_slicedToArray(_React$useState11,2),validationRules=_React$useState12[0],setValidationRules=_React$useState12[1];var _React$useState13=React.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),updateOptIns=_React$useState14[0],_setUpdateOptIns=_React$useState14[1];var defaultOptInFormState=_extends({},initialOptInFormState);var optInFormState=useFormState(defaultOptInFormState,function(){});// Initialize checkout process.
-var _useAsyncMemo=useAsyncMemo(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var _ref3,needsPaymentCheckout,success;return _regeneratorRuntime.wrap(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return prepareCheckout({initializeOrder:!orderInitialized});case 3:_ref3=_context.sent;needsPaymentCheckout=_ref3.needsPayment;success=_ref3.success;setLocked(false);return _context.abrupt("return",{isCheckoutInitialized:success,needsPayment:needsPaymentCheckout});case 10:_context.prev=10;_context.t0=_context["catch"](0);return _context.abrupt("return",{isCheckoutInitialized:false,needsPayment:false});case 13:case"end":return _context.stop();}}},_callee,null,[[0,10]]);})),[],false),_useAsyncMemo2=_slicedToArray(_useAsyncMemo,1),_useAsyncMemo2$=_useAsyncMemo2[0],isCheckoutInitialized=_useAsyncMemo2$.isCheckoutInitialized,needsPayment=_useAsyncMemo2$.needsPayment;// Handle passed errors from external checkout gateway.
+var _useAsyncMemo=useAsyncMemo(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var _ref4,needsPaymentCheckout,success;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return prepareCheckout({initializeOrder:!orderInitialized});case 3:_ref4=_context.sent;needsPaymentCheckout=_ref4.needsPayment;success=_ref4.success;setLocked(false);return _context.abrupt("return",{isCheckoutInitialized:success,needsPayment:needsPaymentCheckout});case 10:_context.prev=10;_context.t0=_context["catch"](0);return _context.abrupt("return",{isCheckoutInitialized:false,needsPayment:false});case 13:case"end":return _context.stop();}},_callee,null,[[0,10]]);})),[],false),_useAsyncMemo2=_slicedToArray(_useAsyncMemo,1),_useAsyncMemo2$=_useAsyncMemo2[0],isCheckoutInitialized=_useAsyncMemo2$.isCheckoutInitialized,needsPayment=_useAsyncMemo2$.needsPayment;// Handle passed errors from external checkout gateway.
 React.useEffect(function(){var urlParams=new URLSearchParams(window.location.search);var errorCode=urlParams.get('errorCode');if(!errorCode){return;}showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});},[showModal]);var submitPromise=React.useRef(null);// Handles submit of the checkout form.
-var handleSubmitOrder=React.useCallback(/*#__PURE__*/function(){var _ref4=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values){var _submitPromise$curren,_submitPromise$curren2,_submitPromise$curren3,_submitPromise$curren4,fulfilledPaymentTransactions,_submitPromise$curren5,_submitPromise$curren6,marketingOptIn,_ref5,paymentTransactionResults,redirectNeeded,_paymentHandlerRef$cu,_submitPromise$curren9,_submitPromise$curren10,_paymentTransactionRe,url,_submitPromise$curren7,_submitPromise$curren8,redirectWanted,_paymentHandlerRef$cu2,_submitPromise$curren11,_submitPromise$curren12,_ref6,_ref7,order;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1){switch(_context2.prev=_context2.next){case 0:setLocked(true);// Update order to set pickup contact.
+var handleSubmitOrder=React.useCallback(/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values){var _submitPromise$curren,_submitPromise$curren2,_submitPromise$curren3,_submitPromise$curren4,fulfilledPaymentTransactions,_submitPromise$curren5,_submitPromise$curren6,marketingOptIn,_ref7,paymentTransactionResults,redirectNeeded,_paymentHandlerRef$cu,_submitPromise$curren9,_submitPromise$curren10,_paymentTransactionRe3,_paymentTransactionRe4,url,_submitPromise$curren7,_submitPromise$curren8,redirectWanted,_paymentHandlerRef$cu2,_submitPromise$curren11,_submitPromise$curren12,_ref8,_ref9,order;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setLocked(true);// Update order to set pickup contact.
 if(orderReadOnly){_context2.next=14;break;}_context2.prev=2;_context2.next=5;return updateCheckoutOrder({notes:values.instructions,addressSequences:[_extends({},billingAddress,{customerContactId:billingAddress.customerContactId||undefined})].concat(isShippingAddressSelectionEnabled?_extends({},shippingAddress,{customerContactId:shippingAddress.customerContactId||undefined}):[],isPickupContactSelectionEnabled?_extends({},values.pickupPerson==='me'?_extends({},billingAddress,{customerContactId:billingAddress.customerContactId||undefined,type:'pickup'}):{type:'pickup',firstName:values.firstName,lastName:values.lastName,mobile:values.mobile,emailAddress:values.emailAddress}):[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 5:_context2.next=12;break;case 7:_context2.prev=7;_context2.t0=_context2["catch"](2);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren=submitPromise.current)===null||_submitPromise$curren===void 0?void 0:(_submitPromise$curren2=_submitPromise$curren.resolve)===null||_submitPromise$curren2===void 0?void 0:_submitPromise$curren2.call(_submitPromise$curren);return _context2.abrupt("return");case 12:_context2.next=25;break;case 14:if(!(isGuestCheckout&&isPickupContactSelectionEnabled&&values.instructions)){_context2.next=25;break;}_context2.prev=15;_context2.next=18;return updateCheckoutOrder({notes:values.instructions});case 18:_context2.next=25;break;case 20:_context2.prev=20;_context2.t1=_context2["catch"](15);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren3=submitPromise.current)===null||_submitPromise$curren3===void 0?void 0:(_submitPromise$curren4=_submitPromise$curren3.resolve)===null||_submitPromise$curren4===void 0?void 0:_submitPromise$curren4.call(_submitPromise$curren3);return _context2.abrupt("return");case 25:// Fulfill using selected payment method.
-fulfilledPaymentTransactions=[];if(!needsPayment){_context2.next=34;break;}_context2.next=29;return paymentHandlerRef.current.fulfillTransaction({paymentTransactions:paymentTransactions});case 29:fulfilledPaymentTransactions=_context2.sent;if(fulfilledPaymentTransactions){_context2.next=34;break;}setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren5=submitPromise.current)===null||_submitPromise$curren5===void 0?void 0:(_submitPromise$curren6=_submitPromise$curren5.resolve)===null||_submitPromise$curren6===void 0?void 0:_submitPromise$curren6.call(_submitPromise$curren5);return _context2.abrupt("return");case 34:_context2.prev=34;if(updateOptIns){marketingOptIn=optInFormState.values.marketingOptIn;}_context2.next=38;return submitCheckoutOrder(_extends({paymentTransactions:fulfilledPaymentTransactions,userAgent:getUserAgent(),platform:'engage',marketingOptIn:marketingOptIn},campaignAttribution?{campaignAttribution:campaignAttribution}:{}));case 38:_ref5=_context2.sent;paymentTransactionResults=_ref5.paymentTransactionResults;redirectNeeded=_ref5.redirectNeeded;if(!(redirectNeeded&&paymentTransactionResults.length)){_context2.next=56;break;}_paymentTransactionRe=paymentTransactionResults[0].redirectParams;_paymentTransactionRe=_paymentTransactionRe===void 0?{}:_paymentTransactionRe;url=_paymentTransactionRe.url;if(!isAvailable()){_context2.next=51;break;}_context2.next=48;return InAppBrowser.openLink({url:url,options:{enableDefaultShare:false}});case 48:// On Close we simply unlock the checkout
-setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren7=submitPromise.current)===null||_submitPromise$curren7===void 0?void 0:(_submitPromise$curren8=_submitPromise$curren7.resolve)===null||_submitPromise$curren8===void 0?void 0:_submitPromise$curren8.call(_submitPromise$curren7);return _context2.abrupt("return");case 51:// Implemented specifically for paypal:
+fulfilledPaymentTransactions=[];if(!needsPayment){_context2.next=34;break;}_context2.next=29;return paymentHandlerRef.current.fulfillTransaction({paymentTransactions:paymentTransactions});case 29:fulfilledPaymentTransactions=_context2.sent;if(fulfilledPaymentTransactions){_context2.next=34;break;}setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren5=submitPromise.current)===null||_submitPromise$curren5===void 0?void 0:(_submitPromise$curren6=_submitPromise$curren5.resolve)===null||_submitPromise$curren6===void 0?void 0:_submitPromise$curren6.call(_submitPromise$curren5);return _context2.abrupt("return");case 34:_context2.prev=34;if(updateOptIns){marketingOptIn=optInFormState.values.marketingOptIn;}_context2.next=38;return submitCheckoutOrder(_extends({paymentTransactions:fulfilledPaymentTransactions,userAgent:getUserAgent(),platform:'engage',marketingOptIn:marketingOptIn},campaignAttribution?{campaignAttribution:campaignAttribution}:{}));case 38:_ref7=_context2.sent;paymentTransactionResults=_ref7.paymentTransactionResults;redirectNeeded=_ref7.redirectNeeded;if(!(redirectNeeded&&paymentTransactionResults.length)){_context2.next=54;break;}_paymentTransactionRe3=paymentTransactionResults[0].redirectParams,_paymentTransactionRe4=_paymentTransactionRe3===void 0?{}:_paymentTransactionRe3,url=_paymentTransactionRe4.url;if(!isAvailable()){_context2.next=49;break;}_context2.next=46;return InAppBrowser.openLink({url:url,options:{enableDefaultShare:false}});case 46:// On Close we simply unlock the checkout
+setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren7=submitPromise.current)===null||_submitPromise$curren7===void 0?void 0:(_submitPromise$curren8=_submitPromise$curren7.resolve)===null||_submitPromise$curren8===void 0?void 0:_submitPromise$curren8.call(_submitPromise$curren7);return _context2.abrupt("return");case 49:// Implemented specifically for paypal:
 // https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
 // In the website we don't want to redirect and instead use to paypal sdk to
 // control the "mini browser" / popup.
-redirectWanted=true;if(paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu=paymentHandlerRef.current)===null||_paymentHandlerRef$cu===void 0?void 0:_paymentHandlerRef$cu.getSupportsRedirect){redirectWanted=paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu2=paymentHandlerRef.current)===null||_paymentHandlerRef$cu2===void 0?void 0:_paymentHandlerRef$cu2.getSupportsRedirect();}if(redirectWanted){window.location.href=url;}else{setLocked(false);}submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren9=submitPromise.current)===null||_submitPromise$curren9===void 0?void 0:(_submitPromise$curren10=_submitPromise$curren9.resolve)===null||_submitPromise$curren10===void 0?void 0:_submitPromise$curren10.call(_submitPromise$curren9,true);return _context2.abrupt("return");case 56:_context2.next=63;break;case 58:_context2.prev=58;_context2.t2=_context2["catch"](34);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren11=submitPromise.current)===null||_submitPromise$curren11===void 0?void 0:(_submitPromise$curren12=_submitPromise$curren11.resolve)===null||_submitPromise$curren12===void 0?void 0:_submitPromise$curren12.call(_submitPromise$curren11);return _context2.abrupt("return");case 63:_context2.next=65;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 65:_ref6=_context2.sent;_ref7=_slicedToArray(_ref6,1);order=_ref7[0];clearCheckoutCampaign();historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});// We don't set locked to false to avoid unnecessary UI changes right before
+redirectWanted=true;if(paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu=paymentHandlerRef.current)===null||_paymentHandlerRef$cu===void 0?void 0:_paymentHandlerRef$cu.getSupportsRedirect){redirectWanted=paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu2=paymentHandlerRef.current)===null||_paymentHandlerRef$cu2===void 0?void 0:_paymentHandlerRef$cu2.getSupportsRedirect();}if(redirectWanted){window.location.href=url;}else{setLocked(false);}submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren9=submitPromise.current)===null||_submitPromise$curren9===void 0?void 0:(_submitPromise$curren10=_submitPromise$curren9.resolve)===null||_submitPromise$curren10===void 0?void 0:_submitPromise$curren10.call(_submitPromise$curren9,true);return _context2.abrupt("return");case 54:_context2.next=61;break;case 56:_context2.prev=56;_context2.t2=_context2["catch"](34);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren11=submitPromise.current)===null||_submitPromise$curren11===void 0?void 0:(_submitPromise$curren12=_submitPromise$curren11.resolve)===null||_submitPromise$curren12===void 0?void 0:_submitPromise$curren12.call(_submitPromise$curren11);return _context2.abrupt("return");case 61:_context2.next=63;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 63:_ref8=_context2.sent;_ref9=_slicedToArray(_ref8,1);order=_ref9[0];clearCheckoutCampaign();historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});// We don't set locked to false to avoid unnecessary UI changes right before
 // going to confirmation page.
-case 70:case"end":return _context2.stop();}}},_callee2,null,[[2,7],[15,20],[34,58]]);}));return function(_x){return _ref4.apply(this,arguments);};}(),[orderReadOnly,isGuestCheckout,isPickupContactSelectionEnabled,needsPayment,fetchCheckoutOrder,fetchCart,clearCheckoutCampaign,historyReplace,updateCheckoutOrder,billingAddress,isShippingAddressSelectionEnabled,shippingAddress,paymentTransactions,updateOptIns,submitCheckoutOrder,campaignAttribution,optInFormState.values]);var handleUpdateShippingMethod=useCallback(/*#__PURE__*/function(){var _ref8=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(selectedShippingMethod){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1){switch(_context3.prev=_context3.next){case 0:setLocked(true);_context3.prev=1;_context3.next=4;return updateCheckoutOrder({addressSequences:[_extends({},billingAddress),_extends({},shippingAddress,{orderSegment:{selectedShippingMethod:selectedShippingMethod}})].concat(isGuestCheckout&&pickupAddress?[_extends({},pickupAddress)]:[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 4:_context3.next=8;break;case 6:_context3.prev=6;_context3.t0=_context3["catch"](1);case 8:_context3.prev=8;_context3.next=11;return fetchCheckoutOrder();case 11:_context3.next=15;break;case 13:_context3.prev=13;_context3.t1=_context3["catch"](8);case 15:setLocked(false);case 16:case"end":return _context3.stop();}}},_callee3,null,[[1,6],[8,13]]);}));return function(_x2){return _ref8.apply(this,arguments);};}(),[billingAddress,pickupAddress,shippingAddress,fetchCheckoutOrder,isGuestCheckout,updateCheckoutOrder]);// Whenever the order is locked we also want to show to loading bar.
+case 68:case"end":return _context2.stop();}},_callee2,null,[[2,7],[15,20],[34,56]]);}));return function(_x){return _ref5.apply(this,arguments);};}(),[orderReadOnly,isGuestCheckout,isPickupContactSelectionEnabled,needsPayment,fetchCheckoutOrder,fetchCart,clearCheckoutCampaign,historyReplace,updateCheckoutOrder,billingAddress,isShippingAddressSelectionEnabled,shippingAddress,paymentTransactions,updateOptIns,submitCheckoutOrder,campaignAttribution,optInFormState.values]);var handleUpdateShippingMethod=useCallback(/*#__PURE__*/function(){var _ref10=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(selectedShippingMethod){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:setLocked(true);_context3.prev=1;_context3.next=4;return updateCheckoutOrder({addressSequences:[_extends({},billingAddress),_extends({},shippingAddress,{orderSegment:{selectedShippingMethod:selectedShippingMethod}})].concat(isGuestCheckout&&pickupAddress?[_extends({},pickupAddress)]:[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 4:_context3.next=8;break;case 6:_context3.prev=6;_context3.t0=_context3["catch"](1);case 8:_context3.prev=8;_context3.next=11;return fetchCheckoutOrder();case 11:_context3.next=15;break;case 13:_context3.prev=13;_context3.t1=_context3["catch"](8);case 15:setLocked(false);case 16:case"end":return _context3.stop();}},_callee3,null,[[1,6],[8,13]]);}));return function(_x2){return _ref10.apply(this,arguments);};}(),[billingAddress,pickupAddress,shippingAddress,fetchCheckoutOrder,isGuestCheckout,updateCheckoutOrder]);// Whenever the order is locked we also want to show to loading bar.
 React.useEffect(function(){if(isLocked){setLoading(true);return;}setLoading(false);},[isLocked]);React.useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathPattern);return;}LoadingProvider.resetLoading(pathPattern);},[isLoading,pathPattern]);// Hold form states.
 var formState=useFormState(defaultPickupPersonState,handleSubmitOrder,validationRules);// When "someone-else" is picked for pickup the validation rules need to change.
 React.useEffect(function(){setValidationRules(formState.values.pickupPerson==='me'||isGuestCheckout?selfPickupConstraints:pickupConstraints);},[formState.values.pickupPerson,isGuestCheckout]);var isOrderable=React.useMemo(function(){return typeof(checkoutOrder===null||checkoutOrder===void 0?void 0:checkoutOrder.isOrderable)!=='undefined'?checkoutOrder.isOrderable:true;},[checkoutOrder]);// Create memoized context value.
 var value=React.useMemo(function(){return{setPaymentHandler:function setPaymentHandler(handler){setPaymentButton(function(){return handler.getCustomPayButton();});paymentHandlerRef.current=handler;},paymentButton:paymentButton,paymentData:paymentData,setPaymentData:setPaymentData,paymentTransactions:paymentTransactions,isLocked:isLocked,isButtonLocked:(isLocked||isButtonLocked)&&needsPayment||!isOrderable,isLoading:isLoading,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,formValidationErrors:convertValidationErrors(formState.validationErrors||{}),formSetValues:formState.setValues,handleSubmitOrder:function handleSubmitOrder(){var promise=new Promise(function(resolve,reject){submitPromise.current={resolve:resolve,reject:reject};});formState.handleSubmit.apply(formState,arguments);return promise;},handleValidation:function handleValidation(){return formState.validate(formState.values);},updateShippingMethod:handleUpdateShippingMethod,defaultPickupPersonState:defaultPickupPersonState,userLocation:userLocation,billingAddress:billingAddress,shippingAddress:shippingAddress,pickupAddress:pickupAddress,taxLines:taxLines,order:checkoutOrder,currencyCode:checkoutOrder===null||checkoutOrder===void 0?void 0:checkoutOrder.currencyCode,needsPayment:needsPayment,orderReserveOnly:orderReserveOnly,isShippingAddressSelectionEnabled:isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled:isPickupContactSelectionEnabled,isGuestCheckout:isGuestCheckout,fulfillmentSlot:fulfillmentSlot,optInFormSetValues:optInFormState.setValues,defaultOptInFormState:defaultOptInFormState,setUpdateOptIns:function setUpdateOptIns(){var val=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;_setUpdateOptIns(val);},setButtonLocked:setButtonLocked,setLoading:setLoading,setLocked:setLocked};},[paymentButton,paymentData,paymentTransactions,isLocked,isButtonLocked,needsPayment,isOrderable,isLoading,shopSettings.supportedCountries,shopSettings.countrySortOrder,formState,handleUpdateShippingMethod,userLocation,billingAddress,shippingAddress,pickupAddress,taxLines,checkoutOrder,orderReserveOnly,isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled,isGuestCheckout,fulfillmentSlot,optInFormState.setValues,defaultOptInFormState]);// Handle deeplinks from external payment site.
 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);/* eslint-enable no-unused-expressions */
+     */var listener=/*#__PURE__*/function(){var _ref11=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(event){var _ref12,_ref12$link,link,_link$match,_link$match2,_,_scheme,path,_ref15,_ref16,order;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:_ref12=(event===null||event===void 0?void 0:event.detail)||{},_ref12$link=_ref12.link,link=_ref12$link===void 0?'':_ref12$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:_ref15=_context4.sent;_ref16=_slicedToArray(_ref15,1);order=_ref16[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 _ref11.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/ChipLayout/index.js

@@ -0,0 +1,38 @@
+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 _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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}from'react';import PropTypes from'prop-types';import debounce from'lodash/debounce';import I18n from'@shopgate/pwa-common/components/I18n';import RippleButton from'@shopgate/pwa-ui-shared/RippleButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import styles from"./style";var variables=themeConfig.variables;/**
+ * The height of one row.
+ * @type {number}
+ */export var CHIP_ROW_HEIGHT=34;/**
+ * The minimum width that a chip should have.
+ * @type {number}
+ */export var CHIP_MINIMUM_WIDTH=60;/**
+ * The ChipLayout component.
+ */var ChipLayout=/*#__PURE__*/function(_Component){function ChipLayout(){var _this2;_classCallCheck(this,ChipLayout);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,ChipLayout,[].concat(args));/**
+   * Debounced, eg. layout effect
+   */_defineProperty(_this2,"processHiddenElementsDebounced",debounce(_this2.processHiddenElements,50));return _this2;}_inherits(ChipLayout,_Component);return _createClass(ChipLayout,[{key:"componentDidMount",value:/**
+   * When the component mounts we need to initially process all children.
+   */function componentDidMount(){this.processHiddenElementsDebounced();}/**
+   * Eveyry time pathname or other prop changes this callback is called.
+   * This funtion will start processing hidden elements in order to check if "more" button
+   * should be rendered.
+   *
+   * It must be done on every prop change, including the pathname.
+   * Sometimes this component is rendered invisible, then since `.processHiddenElements` uses
+   * refs.clientHeight it would always be zero.
+   */},{key:"componentDidUpdate",value:function componentDidUpdate(){this.processHiddenElementsDebounced();}/**
+   * Returns the maximum height the container should have.
+   * @returns {number}
+   */},{key:"maxContentHeight",get:function get(){// 8 -> container padding.
+return CHIP_ROW_HEIGHT*this.props.maxRows+8;}/**
+   * Returns the more button styles.
+   * @return {string} The store button class name.
+   */},{key:"moreButtonStyles",get:function get(){if(this.props.invertMoreButton){return styles.moreButtonInverted;}return styles.moreButton;}/**
+   * Loops through all children to make sure the more button appears if there is too much content.
+   */},{key:"processHiddenElements",value:function processHiddenElements(){var _this3=this;if(!this.containerRef){return;}// Find out if there are overflowing elements.
+var lastVisibleElement=0;var showMoreButton=this.containerRef.scrollHeight>this.containerRef.clientHeight;var containerHeight=this.containerRef.clientHeight;var chips=Array.from(this.layoutRef.children);this.moreButtonRef.style.display=showMoreButton?'block':'none';this.layoutRef.style.minHeight=showMoreButton?"".concat(this.maxContentHeight,"px"):'0px';// If the more button is not visible we don't need to process anything.
+if(!showMoreButton){return;}// Hide or show chips that are hidden due to overflow.
+chips.forEach(function(child,index){var isVisible=child.offsetTop+child.clientHeight<containerHeight;child.setAttribute('style',"display: ".concat(isVisible?'flex':'none',";"));if(isVisible){lastVisibleElement=index;}});// Hide the more button if previous assumption was incorrect.
+if(lastVisibleElement===chips.length-1){this.moreButtonRef.style.display='none';return;}// Hide elements so that the 'more button' has enough space.
+chips.slice(0,lastVisibleElement+1).reverse().every(function(element){var offsetBottom=element.offsetTop+element.clientHeight;if(_this3.moreButtonRef.offsetTop>offsetBottom){return true;}var buttonSpaceRequired=_this3.moreButtonRef.clientWidth+variables.gap.big;var elementRight=_this3.containerRef.clientWidth-(element.offsetLeft+element.clientWidth);var spaceDiff=buttonSpaceRequired-elementRight;var remainingChipWidth=element.clientWidth-spaceDiff;if(remainingChipWidth>CHIP_MINIMUM_WIDTH){element.setAttribute('style',"max-width: ".concat(remainingChipWidth,"px"));return false;}if(element.offsetTop!==chips[lastVisibleElement].offsetTop){element.setAttribute('style','display: none');return false;}element.setAttribute('style','display: none');return true;});}},{key:"render",value:/**
+   * Renders the component.
+   * @returns {JSX}
+   */function render(){var _this4=this;return React.createElement("div",{ref:function ref(element){_this4.containerRef=element;},className:"".concat(styles.container(this.maxContentHeight)," engage__chip-layout")},React.createElement("div",{ref:function ref(element){_this4.layoutRef=element;},className:styles.layout},this.props.children),React.createElement("div",{ref:function ref(element){_this4.moreButtonRef=element;},className:styles.moreButtonWrapper},React.createElement(RippleButton,{fill:true,type:"plain",className:this.moreButtonStyles,onClick:this.props.handleMoreButton},React.createElement(I18n.Text,{string:this.props.moreLabel}))));}}]);}(Component);_defineProperty(ChipLayout,"defaultProps",{children:null,handleMoreButton:function handleMoreButton(){},invertMoreButton:false,maxRows:2,moreLabel:'more',pathname:''});export default ChipLayout;

package/components/ChipLayout/spec.js

@@ -0,0 +1,5 @@
+import React from'react';import{mount}from'enzyme';import Chip from'@shopgate/pwa-ui-shared/Chip';import ChipsLayout from"./index";/**
+ * Since the component uses the <Measure> component it needs an actual
+ * browser to be tested as it needs a full browser that supports styling and
+ * width/height calculation.
+ */describe('<ChipsLayout />',function(){it('should render with one chip',function(){var Component=React.createElement(ChipsLayout,null,React.createElement(Chip,{id:"some-id"},"foo"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(1);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');});it('should render with two chips',function(){var Component=React.createElement(ChipsLayout,null,React.createElement(Chip,{id:"some-id"},"foo"),React.createElement(Chip,{id:"some-other-id"},"bar"));var wrapper=mount(Component);expect(wrapper).toMatchSnapshot();expect(wrapper.find(Chip).length).toEqual(2);expect(wrapper.find(Chip).at(0).find('button').at(1).text()).toEqual('foo');expect(wrapper.find(Chip).at(1).find('button').at(1).text()).toEqual('bar');});});

package/components/ChipLayout/style.js

@@ -0,0 +1,5 @@
+function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;/**
+ * Returns the styling based on the container height.
+ * @param {number} height The maximum height for the container.
+ * @returns {string}
+ */var container=function container(height){return css({position:'relative',maxHeight:height,overflow:'hidden',marginBottom:variables.gap.small}).toString();};var layout=css({display:'flex',alignContent:'flex-start',flexWrap:'wrap',padding:'8px 5px',overflow:'hidden'}).toString();var moreButtonWrapper=css({position:'absolute',right:0,bottom:6,marginLeft:'auto'}).toString();var moreButtonBase={marginLeft:'auto',outline:0,padding:9,fontSize:'0.8rem',fontWeight:500,textTransform:'uppercase'};var moreButton=css(_extends({},moreButtonBase)).toString();var moreButtonInverted=css(_extends({},moreButtonBase)).toString();export default{container:container,layout:layout,moreButtonWrapper:moreButtonWrapper,moreButton:moreButton,moreButtonInverted:moreButtonInverted};

package/components/ConditionalWrapper/ConditionalWrapper.js

@@ -1,5 +1,10 @@
-/**
+import PropTypes from'prop-types';/**
  * Conditionally wraps React children with another component.
  * @param {Object} props The component props.
  * @returns {JSX}
- */var ConditionalWrapper=function ConditionalWrapper(_ref){var condition=_ref.condition,wrapper=_ref.wrapper,children=_ref.children;return condition?wrapper(children):children;};export default ConditionalWrapper;
+ */var ConditionalWrapper=function ConditionalWrapper(_ref){var condition=_ref.condition,wrapper=_ref.wrapper,wrapperFalsy=_ref.wrapperFalsy,children=_ref.children;if(condition){return wrapper(children);}return typeof wrapperFalsy==='function'?wrapperFalsy(children):children;};ConditionalWrapper.propTypes={/**
+   * When set to `true`, the component children will be wrapped by the React component which is
+   * defined in `wrapper`.
+   * When the to `false`, the component children will be wrapped by the React component which is
+   * optionally defined in `wrapperFalsy`.
+   */condition:PropTypes.bool.isRequired,children:PropTypes.node,wrapper:PropTypes.elementType,wrapperFalsy:PropTypes.elementType};ConditionalWrapper.defaultProps={children:null,wrapper:null,wrapperFalsy:null};export default ConditionalWrapper;

package/components/Footer/Footer.js

@@ -1,24 +1,24 @@
-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;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{APP_FOOTER_CONTENT_BEFORE,APP_FOOTER_CONTENT_AFTER}from'@shopgate/pwa-common/constants/Portals';import{getAbsoluteHeight,getStyle}from'@shopgate/pwa-common/helpers/dom';import{SHEET_EVENTS}from'@shopgate/pwa-ui-shared/Sheet';import{footer,updateInsetBackgroundColor,updateFooterHeight}from"./Footer.style";var APP_FOOTER_ID='AppFooter';var DATA_IGNORED='data-footer-inset-update-ignore';/**
+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 _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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,{PureComponent}from'react';import PropTypes from'prop-types';import Portal from'@shopgate/pwa-common/components/Portal';import UIEvents from'@shopgate/pwa-core/emitters/ui';import{APP_FOOTER_CONTENT_BEFORE,APP_FOOTER_CONTENT_AFTER}from'@shopgate/pwa-common/constants/Portals';import{getAbsoluteHeight,getStyle}from'@shopgate/pwa-common/helpers/dom';import{SHEET_EVENTS}from'@shopgate/pwa-ui-shared/Sheet';import{footer,updateInsetBackgroundColor,updateFooterHeight}from"./Footer.style";var APP_FOOTER_ID='AppFooter';var DATA_IGNORED='data-footer-inset-update-ignore';/**
  * The footer component.
- */var Footer=/*#__PURE__*/function(_PureComponent){_inherits(Footer,_PureComponent);function Footer(){var _getPrototypeOf2;var _this;_classCallCheck(this,Footer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=_possibleConstructorReturn(this,(_getPrototypeOf2=_getPrototypeOf(Footer)).call.apply(_getPrototypeOf2,[this].concat(args)));_defineProperty(_assertThisInitialized(_this),"ref",React.createRef());_defineProperty(_assertThisInitialized(_this),"hide",function(){if(_this.ref.current){updateFooterHeight(0);}});_defineProperty(_assertThisInitialized(_this),"show",function(){if(_this.ref.current){updateFooterHeight(getAbsoluteHeight(_this.ref.current));}});return _this;}_createClass(Footer,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){_this2.performFooterUpdate();}});observer.observe(this.ref.current,{attributes:true,childList:true,subtree:true});UIEvents.addListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.addListener(SHEET_EVENTS.CLOSE,this.show);}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,this.show);}},{key:"getInsetBackgroundColor",/**
+ */var Footer=/*#__PURE__*/function(_PureComponent){function Footer(){var _this2;_classCallCheck(this,Footer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_callSuper(this,Footer,[].concat(args));_defineProperty(_this2,"ref",React.createRef());/** Perform hide action */_defineProperty(_this2,"hide",function(){if(_this2.ref.current){updateFooterHeight(0);}});/** Perform show action */_defineProperty(_this2,"show",function(){if(_this2.ref.current){updateFooterHeight(getAbsoluteHeight(_this2.ref.current));}});return _this2;}_inherits(Footer,_PureComponent);return _createClass(Footer,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;this.performFooterUpdate();var observer=new MutationObserver(function(mutations){var update=mutations.filter(function(mutation){return mutation.target.getAttribute(DATA_IGNORED)!=='true';}).length>0;if(update){_this3.performFooterUpdate();}});observer.observe(this.ref.current,{attributes:true,childList:true,subtree:true});UIEvents.addListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.addListener(SHEET_EVENTS.CLOSE,this.show);}/** @inheritDoc */},{key:"componentWillUnmount",value:function componentWillUnmount(){UIEvents.removeListener(SHEET_EVENTS.OPEN,this.hide);UIEvents.removeListener(SHEET_EVENTS.CLOSE,this.show);}},{key:"getInsetBackgroundColor",value:/**
    * Retrieves the background color for the footer inset.
    * @param {NodeList} elements The DOM elements to inspect.
    * @returns {string|null}
-   */value:function getInsetBackgroundColor(elements){var _this3=this;/**
+   */function getInsetBackgroundColor(elements){var _this4=this;/**
      * The background color of the bottom inset needs to identical to the last entry of the footer.
      * So we loop backwards to the elements to find the first visible one.
      */var color=Array.from(elements).reverse().reduce(function(result,element){var ignore=element.getAttribute(DATA_IGNORED)==='true';if(result||ignore){// Nothing to do, since the color was already determined or the element can be ignored.
 return result;}if(element.id===APP_FOOTER_ID){// Inspect core portal.
-return _this3.getInsetBackgroundColor(element.children);}if('clientHeight'in element){// Take the background color of the last visible element from the end of the footer.
+return _this4.getInsetBackgroundColor(element.children);}if('clientHeight'in element){// Take the background color of the last visible element from the end of the footer.
 return getStyle(element,'backgroundColor');}// Nothing happened within this loop - proceed with the next one.
-return result;},null);if(color==='rgba(0, 0, 0, 0)'||color==='transparent'){return null;}return color||null;}/** Perform hide action */},{key:"performFooterUpdate",/**
+return result;},null);if(color==='rgba(0, 0, 0, 0)'||color==='transparent'){return null;}return color||null;}},{key:"performFooterUpdate",value:/**
    * Performs an update of the footer: background color, height.
-   */value:function performFooterUpdate(){if(this.ref.current){updateFooterHeight(getAbsoluteHeight(this.ref.current));updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));}}/**
+   */function performFooterUpdate(){if(this.ref.current){updateFooterHeight(getAbsoluteHeight(this.ref.current));updateInsetBackgroundColor(this.getInsetBackgroundColor(this.ref.current.children));}}/**
    * Checks if the footer has visible content.
    * @returns {boolean}
    */},{key:"hasVisibleContent",value:function hasVisibleContent(){if(this.ref.current){var elements=this.ref.current.parentElement.querySelectorAll("div.".concat(footer.toString()," > *:not(#").concat(APP_FOOTER_ID,"), #").concat(APP_FOOTER_ID," > *"));return Array.from(elements).filter(function(element){return element.getAttribute(DATA_IGNORED)!=='true'&&element.clientHeight>0;}).length>0;}return false;}/**
    * @returns {JSX}
-   */},{key:"render",value:function render(){return React.createElement("div",{className:footer,ref:this.ref},React.createElement(Portal,{name:APP_FOOTER_CONTENT_BEFORE}),React.createElement("div",{id:APP_FOOTER_ID},this.props.children),React.createElement(Portal,{name:APP_FOOTER_CONTENT_AFTER}));}}]);return Footer;}(PureComponent);_defineProperty(Footer,"defaultProps",{children:null/**
+   */},{key:"render",value:function render(){return React.createElement("div",{className:"".concat(footer," engage__footer"),ref:this.ref},React.createElement(Portal,{name:APP_FOOTER_CONTENT_BEFORE}),React.createElement("div",{id:APP_FOOTER_ID},this.props.children),React.createElement(Portal,{name:APP_FOOTER_CONTENT_AFTER}));}}]);}(PureComponent);_defineProperty(Footer,"defaultProps",{children:null/**
    * Sets up the DOM Mutation Observer to take care that the footer inset always has the correct
    * background color, which matches the background color of the last element within the footer.
    */});export default Footer;

package/components/Form/Builder/Builder.js

@@ -1,44 +1,65 @@
-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";/**
+import _camelCase from"lodash/camelCase";var _excluded=["validationErrors"];var _Builder,_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 _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}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={'':''};/**
  * Takes a form configuration and handles rendering and updates of the form fields.
  * Note: Only one country and one province element is supported per FormBuilder instance.
- */var Builder=/*#__PURE__*/function(_Component){_inherits(Builder,_Component);function Builder(props){var _this;_classCallCheck(this,Builder);_this=_possibleConstructorReturn(this,_getPrototypeOf(Builder).call(this,props));// Prepare internal state
-_defineProperty(_assertThisInitialized(_this),"getFormElementComponent",function(type){return _this.props.elements[type]||Builder.defaultElements[type]||null;});_defineProperty(_assertThisInitialized(_this),"elementSortFunc",function(element1,element2){// Keep current sort order when no specific sort order was set for both
+ */var Builder=/*#__PURE__*/function(_Component){function Builder(props){var _this2;_classCallCheck(this,Builder);_this2=_callSuper(this,Builder,[props]);// Prepare internal state
+/**
+   * Retrieves a form element REACT component by the given type or null if the type is unknown.
+   * @param {string} type The type value of the element to return.
+   * @returns {*|ElementText|ElementSelect|ElementCheckbox|ElementRadio|null}
+   */_defineProperty(_this2,"getFormElementComponent",function(type){return _this2.props.elements[type]||Builder.defaultElements[type]||null;});/**
+   * Sorts the elements by "sortOrder" property
+   *
+   * @typedef {Object} FormElement
+   * @property {number} sortOrder
+   *
+   * @param {FormElement} element1 First element
+   * @param {FormElement} element2 Second element
+   * @returns {number}
+   */_defineProperty(_this2,"elementSortFunc",function(element1,element2){// Keep current sort order when no specific sort order was set for both
 if(element1.sortOrder===undefined||element2.sortOrder===undefined){return 0;}// Sort in ascending order of sortOrder otherwise
-return element1.sortOrder-element2.sortOrder;});_defineProperty(_assertThisInitialized(_this),"elementChangeHandler",function(elementId,value){// "newState" is the state changes before any form actions have been applied
-var newState=_extends({},_this.state,{formData:_extends({},_this.state.formData,_defineProperty({},elementId,value))});// Handle context sensitive functionality by via "action" listener and use the "new" state
-var updatedNewState=_this.actionListener.notify(elementId,_this.state,newState);// Form actions can append validation errors by adding that field to the new state
+return element1.sortOrder-element2.sortOrder;});/**
+   * Element change handler based on it's type. It takes a state change and performs form actions on
+   * in to allow customization. The final result is then written to the component state.
+   * @param {string} elementId Element to create the handler for
+   * @param {string} value Element value
+   */_defineProperty(_this2,"elementChangeHandler",function(elementId,value){// "newState" is the state changes before any form actions have been applied
+var newState=_extends({},_this2.state,{formData:_extends({},_this2.state.formData,_defineProperty({},elementId,value))});// Handle context sensitive functionality by via "action" listener and use the "new" state
+var updatedNewState=_this2.actionListener.notify(elementId,_this2.state,newState);// Form actions can append validation errors by adding that field to the new state
 // Split out validation errors from final state and
-var _updatedNewState$vali=updatedNewState.validationErrors,validationErrors=_updatedNewState$vali===void 0?{}:_updatedNewState$vali,finalState=_objectWithoutProperties(updatedNewState,["validationErrors"]);// "hasErrors" is true, when a visible + required field is empty or validation errors appeared!
+var _updatedNewState$vali=updatedNewState.validationErrors,validationErrors=_updatedNewState$vali===void 0?{}:_updatedNewState$vali,finalState=_objectWithoutProperties(updatedNewState,_excluded);// "hasErrors" is true, when a visible + required field is empty or validation errors appeared!
 var hasErrors=Object.keys(validationErrors).length>0;// Check "required" fields for all visible elements and enable rendering on changes
-_this.formElements.forEach(function(formElement){if(!finalState.elementVisibility[formElement.id]||!formElement.required){return;}var tmpVal=finalState.formData[formElement.id];var tmpResult=tmpVal===null||tmpVal===undefined||tmpVal===''||tmpVal===false;hasErrors=hasErrors||tmpResult;});// Handle state internally and send an "onChange" event to parent if this finished
-_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(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,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
+_this2.formElements.forEach(function(formElement){if(!finalState.elementVisibility[formElement.id]||!formElement.required){return;}var tmpVal=finalState.formData[formElement.id];var tmpResult=tmpVal===null||tmpVal===undefined||tmpVal===''||tmpVal===false;hasErrors=hasErrors||tmpResult;});// Handle state internally and send an "onChange" event to parent if this finished
+_this2.setState(finalState);// Transform to external structure (unavailable ones will be set undefined)
+var updateData={};_this2.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
+_this2.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]};}):[]);});/**
+   * Takes an element of any type and renders it depending on type.
+   * Also puts portals around the element.
+   * @param {string} formName Name of the form
+   * @param {Object} element The data of the element to be rendered
+   * @param {string} elementErrorText The error text to be shown for this specific element
+   * @returns {JSX}
+   */_defineProperty(_this2,"renderElement",function(formName,element,elementErrorText){var elementName="".concat(_this2.props.name,"_").concat(element.id);var elementValue=_this2.state.formData[element.id];var elementVisible=_this2.state.elementVisibility[element.id]||false;// Take a dynamic REACT element based on its type
+var Element=_this2.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||_this2.countryList;break;}case ELEMENT_TYPE_PROVINCE:{// Province selection only makes sense with a country being selected, or from custom options
+var countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});elementData.options=countryElement&&_this2.state.formData[countryElement.id]?buildProvinceList(_this2.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,formName:formName});});_this2.state={elementVisibility:{},formData:{}};// Reorganize form elements into a structure that can be easily rendered
+var formElements=buildFormElements(props.config,_this2.elementChangeHandler);// Compute defaults
 var formDefaults=buildFormDefaults(formElements,props.defaults);// Assign defaults to state
-_this.state.formData=formDefaults;// Handle fixed visibilities
+_this2.state.formData=formDefaults;// Handle fixed visibilities
 formElements.forEach(function(element){// Assume as visible except it's explicitly set to "false"
-_this.state.elementVisibility[element.id]=element.visible!==false;});_this.actionListener=new ActionListener(buildProvinceList,formDefaults);_this.actionListener.attachAll(formElements);// Sort the elements after attaching action listeners to keep action hierarchy same as creation
-_this.formElements=formElements.sort(_this.elementSortFunc);// Assemble combined country/province list based on the config element
-var _countryElement=_this.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});if(_countryElement){_this.countryList=buildCountryList(_countryElement,emptySelectOption);var provinceElement=_this.formElements.find(function(el){return el.type===ELEMENT_TYPE_PROVINCE;});if(provinceElement&&provinceElement.required&&!!formDefaults[_countryElement.id]&&!formDefaults[provinceElement.id]){// Set default for province field for given country
-var _Object$keys=Object.keys(buildProvinceList(formDefaults[_countryElement.id])),_Object$keys2=_slicedToArray(_Object$keys,1),first=_Object$keys2[0];if(first){_this.state.formData[provinceElement.id]=first;}}}// Final form initialization, by triggering actionListeners and enable rendering for elements
-var _newState=_this.state;_this.formElements.forEach(function(element){_newState=_this.actionListener.notify(element.id,_this.state,_newState);});_this.state=_newState;return _this;}/**
-   * Retrieves a form element REACT component by the given type or null if the type is unknown.
-   * @param {string} type The type value of the element to return.
-   * @returns {*|ElementText|ElementSelect|ElementCheckbox|ElementRadio|null}
-   */_createClass(Builder,[{key:"render",/**
+_this2.state.elementVisibility[element.id]=element.visible!==false;});_this2.actionListener=new ActionListener(buildProvinceList,formDefaults);_this2.actionListener.attachAll(formElements);// Sort the elements after attaching action listeners to keep action hierarchy same as creation
+_this2.formElements=formElements.sort(_this2.elementSortFunc);// Assemble combined country/province list based on the config element
+var _countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});if(_countryElement){_this2.countryList=buildCountryList(_countryElement,emptySelectOption);var provinceElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_PROVINCE;});if(provinceElement&&provinceElement.required&&!!formDefaults[_countryElement.id]&&!formDefaults[provinceElement.id]){// Set default for province field for given country
+var _Object$keys3=Object.keys(buildProvinceList(formDefaults[_countryElement.id])),_Object$keys4=_slicedToArray(_Object$keys3,1),first=_Object$keys4[0];if(first){_this2.state.formData[provinceElement.id]=first;}}}// Final form initialization, by triggering actionListeners and enable rendering for elements
+var _newState=_this2.state;_this2.formElements.forEach(function(element){_newState=_this2.actionListener.notify(element.id,_this2.state,_newState);});_this2.state=_newState;return _this2;}_inherits(Builder,_Component);return _createClass(Builder,[{key:"render",value:/**
    * 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(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:[]/**
+   */function render(){var _this3=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(_this3.props.name,"_").concat(element.id)},React.createElement(Portal,{name:"".concat(sanitizePortalName(_this3.props.name),".").concat(sanitizePortalName(element.id),".").concat(BEFORE),props:{formName:_this3.props.name,errorText:validationErrors[element.id]||'',element:element}}),React.createElement(Portal,{name:"".concat(sanitizePortalName(_this3.props.name),".").concat(sanitizePortalName(element.id)),props:{formName:_this3.props.name,errorText:validationErrors[element.id]||'',element:element}},_this3.renderElement(_this3.props.name,element,validationErrors[element.id]||'')),React.createElement(Portal,{name:"".concat(sanitizePortalName(_this3.props.name),".").concat(sanitizePortalName(element.id),".").concat(AFTER),props:{formName:_this3.props.name,errorText:validationErrors[element.id]||'',element:element}}));})));}}]);}(Component);_Builder=Builder;_defineProperty(Builder,"defaultElements",(_defineProperty2={},_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty2,ELEMENT_TYPE_EMAIL,ElementText),ELEMENT_TYPE_PASSWORD,ElementText),ELEMENT_TYPE_TEXT,ElementText),ELEMENT_TYPE_NUMBER,ElementText),ELEMENT_TYPE_SELECT,ElementSelect),ELEMENT_TYPE_MULTISELECT,ElementMultiSelect),ELEMENT_TYPE_COUNTRY,ElementSelect),ELEMENT_TYPE_PROVINCE,ElementSelect),ELEMENT_TYPE_CHECKBOX,ElementCheckbox),ELEMENT_TYPE_RADIO,ElementRadio),_defineProperty(_defineProperty(_defineProperty(_defineProperty2,ELEMENT_TYPE_DATE,ElementText),ELEMENT_TYPE_PHONE,ElementText),ELEMENT_TYPE_PHONE_PICKER,ElementPhoneNumber)));_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

@@ -3,4 +3,4 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
  * @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,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);
+ */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),'engage__form-checkbox','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

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

package/components/Form/Builder/ElementRadio.js

@@ -3,4 +3,4 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
  * @param {Object} props Component props.
  * @param {Object} props.element The data of the element to be rendered
  * @returns {JSX}
- */var ElementRadio=function ElementRadio(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),'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);
+ */var ElementRadio=function ElementRadio(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-radio','formBuilderField',{validationError:!!errorText})},React.createElement(RadioGroup,{name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled},Object.keys(element.options).map(function(itemName){return React.createElement(RadioItem,{key:"".concat(name,"_").concat(itemName),id:"".concat(name,"_").concat(_camelCase(itemName)),name:itemName,label:element.options[itemName]});})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName}));};ElementRadio.defaultProps={value:'',visible:true};export default memo(ElementRadio);

package/components/Form/Builder/ElementSelect.js

@@ -3,4 +3,4 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
  * @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,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);
+ */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),'engage__form-select','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 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);/**
+import _camelCase from"lodash/camelCase";function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{memo}from'react';import PropTypes from'prop-types';import classNames from'classnames';import TextField from'@shopgate/pwa-ui-shared/TextField';import FormHelper from"./FormHelper";import{ELEMENT_TYPE_TEXT,ELEMENT_TYPE_NUMBER,ELEMENT_TYPE_EMAIL,ELEMENT_TYPE_PASSWORD,ELEMENT_TYPE_DATE,ELEMENT_TYPE_PHONE}from"./Builder.constants";// Map element type to input type
+var mapping=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},ELEMENT_TYPE_TEXT,'text'),ELEMENT_TYPE_NUMBER,'number'),ELEMENT_TYPE_EMAIL,'email'),ELEMENT_TYPE_PASSWORD,'password'),ELEMENT_TYPE_DATE,'date'),ELEMENT_TYPE_PHONE,'tel');/**
  * 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,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);
+ */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),'engage__form-text','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/classes/ActionListener.constants.js

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