@shopgate/engage 7.27.0-beta.3 → 7.27.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/account/components/Profile/Profile.config.js +2 -2
- package/account/components/ProfileContact/ProfileContact.config.js +2 -2
- package/cart/components/Substitution/index.js +2 -2
- package/cart/components/Substitution/style.js +1 -1
- package/checkout/components/Checkout/CheckoutPickupContactForm.config.js +2 -2
- package/components/Form/Builder/Builder.js +7 -7
- package/components/Form/Builder/ElementCheckbox.js +1 -1
- package/components/Form/Builder/ElementMultiSelect.js +1 -1
- package/components/Form/Builder/ElementPhoneNumber.js +3 -3
- package/components/Form/Builder/ElementRadio.js +1 -1
- package/components/Form/Builder/ElementSelect.js +2 -2
- package/components/Form/Builder/ElementText.js +2 -2
- package/components/Form/Builder/FormHelper.js +2 -2
- package/components/Form/Builder/stylePresets.js +1 -1
- package/components/MessageBar/MessageBar.js +5 -3
- package/components/MessageBar/MessageBar.style.js +1 -1
- package/components/Toggle/index.js +2 -2
- package/components/Toggle/style.js +1 -1
- package/core/hooks/useFormState.js +1 -1
- package/orders/components/OrderDetails/OrderDetailsAuthenticateForm.config.js +2 -2
- package/package.json +7 -7
- package/registration/components/GuestRegistration/GuestRegistrationFormPickup.config.js +2 -2
- package/registration/components/Registration/RegistrationFormBase.config.js +1 -1
- package/registration/components/Registration/RegistrationFormBilling.config.js +2 -2
- package/registration/components/Registration/RegistrationFormBilling.js +1 -1
- package/registration/components/Registration/RegistrationFormShipping.config.js +1 -1
- package/registration/components/Registration/RegistrationFormToggle.js +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n}from'@shopgate/engage/core';import{generateCustomerAttributesFields}from'@shopgate/engage/account/helper/form';/**
|
|
1
|
+
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n}from'@shopgate/engage/core/helpers';import{generateCustomerAttributesFields}from'@shopgate/engage/account/helper/form';/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} additionalOptions Options for the customer attributes creation helper
|
|
4
4
|
* @param {Array} additionalOptions.customerAttributes Customer attributes.
|
|
@@ -8,4 +8,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
|
|
|
8
8
|
* @param {boolean} [additionalOptions.allowPleaseChoose] Allows please choose option for required
|
|
9
9
|
* attributes.
|
|
10
10
|
* @returns {Object}
|
|
11
|
-
*/var generateFormConfig=function generateFormConfig(additionalOptions){return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('account.profile.form.firstName')," *")},middleName:{type:'text',label:"".concat(i18n.text('account.profile.form.middleName'))},lastName:{type:'text',label:"".concat(i18n.text('account.profile.form.lastName')," *")},emailAddress:{type:'email',label:"".concat(i18n.text('account.profile.form.emailAddress')," *"),disabled:true},marketingOptIn:{type:'checkbox',label:i18n.text('account.profile.form.marketing_opt_in_label')}},generateCustomerAttributesFields(additionalOptions,false))};};export default generateFormConfig;
|
|
11
|
+
*/var generateFormConfig=function generateFormConfig(additionalOptions){return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('account.profile.form.firstName')," *"),required:true},middleName:{type:'text',label:"".concat(i18n.text('account.profile.form.middleName'))},lastName:{type:'text',label:"".concat(i18n.text('account.profile.form.lastName')," *"),required:true},emailAddress:{type:'email',label:"".concat(i18n.text('account.profile.form.emailAddress')," *"),required:true,disabled:true},marketingOptIn:{type:'checkbox',label:i18n.text('account.profile.form.marketing_opt_in_label')}},generateCustomerAttributesFields(additionalOptions,false))};};export default generateFormConfig;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n}from'@shopgate/engage/core';import{ADDRESS_TYPE_SHIPPING,ADDRESS_TYPE_BILLING}from'@shopgate/engage/checkout';/**
|
|
1
|
+
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n}from'@shopgate/engage/core/helpers';import{ADDRESS_TYPE_SHIPPING,ADDRESS_TYPE_BILLING}from'@shopgate/engage/checkout';/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} options Options for the helper
|
|
4
4
|
* @param {Array} options.supportedCountries A list of supported countries.
|
|
@@ -8,4 +8,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
|
|
|
8
8
|
* @param {string} options.type An address type
|
|
9
9
|
* @param {number} options.numberOfAddressLines The number of address lines
|
|
10
10
|
* @returns {Object}
|
|
11
|
-
*/export var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation,isCheckout=_ref.isCheckout,type=_ref.type,numberOfAddressLines=_ref.numberOfAddressLines;return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('account.profile.form.firstName')," *")}},!isCheckout?{middleName:{type:'text',label:"".concat(i18n.text('account.profile.form.middleName'))}}:{},{lastName:{type:'text',label:"".concat(i18n.text('account.profile.form.lastName')," *")}},!isCheckout?{emailAddress:{type:'email',label:"".concat(i18n.text('account.profile.form.emailAddress')," *")},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}:{},{address1:{type:'text',label:"".concat(i18n.text('account.profile.form.address1')," *")}},numberOfAddressLines>=2?{address2:{type:'text',label:i18n.text('account.profile.form.address2')}}:{},{},numberOfAddressLines>=3?{address3:{type:'text',label:i18n.text('account.profile.form.address3')}}:{},{},numberOfAddressLines>=4?{address4:{type:'text',label:i18n.text('account.profile.form.address4')}}:{},{postalCode:{type:'text',label:"".concat(i18n.text('account.profile.form.postalCode')," *")},city:{type:'text',label:"".concat(i18n.text('account.profile.form.city')," *")},country:{type:'country',label:"".concat(i18n.text('account.profile.form.country')," *"),countries:supportedCountries},region:{type:'province',label:"".concat(i18n.text('account.profile.form.region')," *"),required:true}},!isCheckout||type===ADDRESS_TYPE_BILLING?{isDefaultBilling:{type:'checkbox',label:i18n.text(!isCheckout?'account.profile.form.default_billing':'account.profile.form.save_default_billing')}}:{},{},!isCheckout||type===ADDRESS_TYPE_SHIPPING?{isDefaultShipping:{type:'checkbox',label:i18n.text(!isCheckout?'account.profile.form.default_shipping':'account.profile.form.save_default_shipping')}}:{})};};export default generateFormConfig;
|
|
11
|
+
*/export var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation,isCheckout=_ref.isCheckout,type=_ref.type,numberOfAddressLines=_ref.numberOfAddressLines;return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('account.profile.form.firstName')," *"),required:true}},!isCheckout?{middleName:{type:'text',label:"".concat(i18n.text('account.profile.form.middleName'))}}:{},{lastName:{type:'text',label:"".concat(i18n.text('account.profile.form.lastName')," *"),required:true}},!isCheckout?{emailAddress:{type:'email',label:"".concat(i18n.text('account.profile.form.emailAddress')," *"),required:true},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),required:true,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}:{},{address1:{type:'text',label:"".concat(i18n.text('account.profile.form.address1')," *"),required:true}},numberOfAddressLines>=2?{address2:{type:'text',label:i18n.text('account.profile.form.address2')}}:{},{},numberOfAddressLines>=3?{address3:{type:'text',label:i18n.text('account.profile.form.address3')}}:{},{},numberOfAddressLines>=4?{address4:{type:'text',label:i18n.text('account.profile.form.address4')}}:{},{postalCode:{type:'text',label:"".concat(i18n.text('account.profile.form.postalCode')," *"),required:true},city:{type:'text',label:"".concat(i18n.text('account.profile.form.city')," *"),required:true},country:{type:'country',label:"".concat(i18n.text('account.profile.form.country')," *"),required:true,countries:supportedCountries},region:{type:'province',label:"".concat(i18n.text('account.profile.form.region')," *"),required:true}},!isCheckout||type===ADDRESS_TYPE_BILLING?{isDefaultBilling:{type:'checkbox',label:i18n.text(!isCheckout?'account.profile.form.default_billing':'account.profile.form.save_default_billing')}}:{},{},!isCheckout||type===ADDRESS_TYPE_SHIPPING?{isDefaultShipping:{type:'checkbox',label:i18n.text(!isCheckout?'account.profile.form.default_shipping':'account.profile.form.save_default_shipping')}}:{})};};export default generateFormConfig;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{Toggle}from'@shopgate/engage/components';import{root,checkbox,
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{Toggle}from'@shopgate/engage/components';import{root,checkbox,rightSpace,text}from"./style";import connect from"./connector";/**
|
|
2
2
|
* Renders the cart reservation card label.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
4
|
* @returns {JSX.Element}
|
|
5
|
-
*/var Substitution=function Substitution(_ref){var id=_ref.id,onChange=_ref.onChange,checked=_ref.checked,className=_ref.className,label=_ref.label,disabled=_ref.disabled;return React.createElement("div",{className:classNames(root,className)},React.createElement("
|
|
5
|
+
*/var Substitution=function Substitution(_ref){var id=_ref.id,onChange=_ref.onChange,checked=_ref.checked,className=_ref.className,label=_ref.label,disabled=_ref.disabled;return React.createElement("div",{className:classNames(root,className)},React.createElement("label",{"aria-hidden":true,className:text,htmlFor:id,id:"".concat(id,"-label")},label),React.createElement("div",{className:rightSpace},React.createElement(Toggle,{className:checkbox,checked:checked,id:id,onChange:onChange,disabled:disabled})));};Substitution.defaultProps={className:undefined,disabled:false,checked:false};/**
|
|
6
6
|
* Gate component for Substitution.
|
|
7
7
|
* @param {Object} props The component props.
|
|
8
8
|
* @returns {JSX}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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{css}from'glamor';import{themeVariables}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var gap=themeVariables.gap;export var root=css({padding:gap.big,display:'flex',flexDirection:'row',justifyContent:'
|
|
1
|
+
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{css}from'glamor';import{themeVariables}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var gap=themeVariables.gap;export var root=css({padding:gap.big,display:'flex',flexDirection:'row',justifyContent:'flex-end',alignItems:'baseline',flex:1}).toString();export var checkbox=css({marginLeft:8}).toString();export var text=css({flexGrow:0}).toString();export var rightSpace=css(_defineProperty({flex:1,display:'flex',justifyContent:'flex-end',alignItems:'baseline',flexGrow:0},responsiveMediaQuery('>xs',{webOnly:true}),{flex:0})).toString();
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{i18n}from'@shopgate/engage/core';var pickupFieldActions=[{type:'setVisibility',rules:[{context:'pickupPerson',type:'oneOf',data:['someoneElse']}]}];/**
|
|
1
|
+
import{i18n}from'@shopgate/engage/core/helpers';var pickupFieldActions=[{type:'setVisibility',rules:[{context:'pickupPerson',type:'oneOf',data:['someoneElse']}]}];/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} options Options for the helper
|
|
4
4
|
* @param {Array} options.supportedCountries A list of supported countries.
|
|
5
5
|
* @param {Array} options.countrySortOrder Sort order for supported countries.
|
|
6
6
|
* @param {Object} options.userLocation User location for better phone picker defaults.
|
|
7
7
|
* @returns {Object}
|
|
8
|
-
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation;return{fields:{instructions:{type:'text',label:i18n.text('checkout.pickup_contact.form.instructions')},pickupPerson:{type:'radio',label:i18n.text('checkout.pickup_contact.form.who_will_pickup'),options:{me:i18n.text('checkout.pickup_contact.form.me'),someoneElse:i18n.text('checkout.pickup_contact.form.someone_else')}},firstName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *")},lastName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *")},emailAddress:{type:'email',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *")},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),actions:pickupFieldActions,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}};};export default generateFormConfig;
|
|
8
|
+
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation;return{fields:{instructions:{type:'text',label:i18n.text('checkout.pickup_contact.form.instructions')},pickupPerson:{type:'radio',label:i18n.text('checkout.pickup_contact.form.who_will_pickup'),options:{me:i18n.text('checkout.pickup_contact.form.me'),someoneElse:i18n.text('checkout.pickup_contact.form.someone_else')}},firstName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *"),required:true},lastName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *"),required:true},emailAddress:{type:'email',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *"),required:true},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),required:true,actions:pickupFieldActions,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}};};export default generateFormConfig;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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";/**
|
|
1
|
+
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{I18n}from'@shopgate/engage/components';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";/**
|
|
2
2
|
* Optional select element
|
|
3
3
|
* @type {Object}
|
|
4
4
|
*/var emptySelectOption={'':''};/**
|
|
@@ -41,11 +41,11 @@ hasErrors?Object.keys(validationErrors).map(function(k){return{path:k,message:va
|
|
|
41
41
|
* @param {string} formName Name of the form
|
|
42
42
|
* @param {Object} element The data of the element to be rendered
|
|
43
43
|
* @param {string} elementErrorText The error text to be shown for this specific element
|
|
44
|
-
* @returns {JSX}
|
|
45
|
-
*/_defineProperty(_this2,"renderElement",function(formName,element,elementErrorText){var elementName="".concat(_this2.props.name,"_").concat(element.id);var elementValue=
|
|
44
|
+
* @returns {JSX.Element}
|
|
45
|
+
*/_defineProperty(_this2,"renderElement",function(formName,element,elementErrorText){var formData=_this2.state.formData;var elementName="".concat(_this2.props.name,"_").concat(element.id);var elementValue=formData[element.id];var elementVisible=_this2.state.elementVisibility[element.id]||false;// Take a dynamic REACT element based on its type
|
|
46
46
|
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
|
|
47
47
|
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
|
|
48
|
-
var countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});elementData.options=countryElement&&
|
|
48
|
+
var countryElement=_this2.formElements.find(function(el){return el.type===ELEMENT_TYPE_COUNTRY;});elementData.options=countryElement&&formData[countryElement.id]?buildProvinceList(formData[countryElement.id],// Auto-select with "empty" when not required
|
|
49
49
|
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
|
|
50
50
|
var formElements=buildFormElements(props.config,_this2.elementChangeHandler);// Compute defaults
|
|
51
51
|
var formDefaults=buildFormDefaults(formElements,props.defaults);// Assign defaults to state
|
|
@@ -57,9 +57,9 @@ var _countryElement=_this2.formElements.find(function(el){return el.type===ELEME
|
|
|
57
57
|
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
|
|
58
58
|
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:/**
|
|
59
59
|
* Renders the component based on the given config
|
|
60
|
-
* @return {JSX}
|
|
61
|
-
*/function render(){var _this3=this;// Convert validation errors for easier handling
|
|
62
|
-
var validationErrors=buildValidationErrorList(this.props.validationErrors);return React.createElement(Form,{className:_camelCase(
|
|
60
|
+
* @return {JSX.Element}
|
|
61
|
+
*/function render(){var _this3=this;var _this$props=this.props,name=_this$props.name,className=_this$props.className,onSubmit=_this$props.onSubmit;// Convert validation errors for easier handling
|
|
62
|
+
var validationErrors=buildValidationErrorList(this.props.validationErrors);var validationErrorsAmount=Object.entries(validationErrors).length;return React.createElement(Form,{className:_camelCase(name),onSubmit:onSubmit},validationErrorsAmount>0&&React.createElement("div",{className:"sr-only"},React.createElement(I18n.Text,{string:"login.errorAmount",params:{amount:validationErrorsAmount}})),React.createElement("div",{className:className},this.formElements.map(function(element){return React.createElement(Fragment,{key:"".concat(name,"_").concat(element.id)},React.createElement(Portal,{name:"".concat(sanitizePortalName(name),".").concat(sanitizePortalName(element.id),".").concat(BEFORE),props:{formName:name,errorText:validationErrors[element.id]||'',element:element}}),React.createElement(Portal,{name:"".concat(sanitizePortalName(name),".").concat(sanitizePortalName(element.id)),props:{formName:name,errorText:validationErrors[element.id]||'',element:element}},_this3.renderElement(name,element,validationErrors[element.id]||'')),React.createElement(Portal,{name:"".concat(sanitizePortalName(name),".").concat(sanitizePortalName(element.id),".").concat(AFTER),props:{formName: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:[]/**
|
|
63
63
|
* Initializes the component.
|
|
64
64
|
* @param {Object} props The components props.
|
|
65
65
|
*/});export default Builder;
|
|
@@ -3,4 +3,4 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
|
|
|
3
3
|
* @param {Object} props Component props.
|
|
4
4
|
* @param {Object} props.element The data of the element to be rendered
|
|
5
5
|
* @returns {JSX}
|
|
6
|
-
*/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);
|
|
6
|
+
*/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,elementName:name}));};ElementCheckbox.defaultProps={value:false,visible:true};export default memo(ElementCheckbox);
|
|
@@ -3,4 +3,4 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
|
|
|
3
3
|
* @param {Object} props Component props.
|
|
4
4
|
* @param {Object} props.element The data of the element to be rendered
|
|
5
5
|
* @returns {JSX}
|
|
6
|
-
*/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);
|
|
6
|
+
*/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,required:element===null||element===void 0?void 0:element.required,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,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null})),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,elementName:name}));};ElementMultiSelect.defaultProps={value:'',visible:true};export default memo(ElementMultiSelect);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
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};/**
|
|
1
|
+
import _isEqual from"lodash/isEqual";import _upperCase from"lodash/upperCase";import _camelCase from"lodash/camelCase";function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n}from'@shopgate/engage/core/helpers';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInputCountrySelect from'react-phone-number-input/mobile';import PhoneInput from'react-phone-number-input/input-mobile';import{getCountries}from'react-phone-number-input/input';import en from'react-phone-number-input/locale/en';import de from'react-phone-number-input/locale/de';import es from'react-phone-number-input/locale/es';import fr from'react-phone-number-input/locale/fr';import pt from'react-phone-number-input/locale/pt';import flags from'react-phone-number-input/flags';import{useCountriesNames}from'@shopgate/engage/i18n';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import Label from'@shopgate/pwa-ui-shared/TextField/components/Label';import FormHelper from"./FormHelper";var variables=themeConfig.variables,colors=themeConfig.colors;var styles={formField:css({width:'100%',marginBottom:'0px !important'}).toString(),phoneField:css({position:'relative',width:'100%',paddingTop:variables.gap.big*0.75,paddingBottom:variables.gap.big*1.25,' input.PhoneInputInput':{outline:'none',fontSize:'1rem',lineHeight:'1.1875rem',borderRadius:0,paddingBottom:variables.gap.xsmall*1.5,borderBottom:"1px solid ".concat(colors.shade12),'&:focus':{borderBottom:"2px solid ".concat(colors.primary),paddingBottom:variables.gap.xsmall*1.5-1}}}),phoneFieldError:css({' input.PhoneInputInput':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")"),paddingBottom:variables.gap.xsmall*1.5-1}}).toString(),phoneFieldErrorText:css({position:'absolute',width:'100%',bottom:'-10px',fontSize:'0.75rem',lineHeight:0.875,color:"var(--color-state-alert, ".concat(colors.error,")"),overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis',marginLeft:'38px'})};var builtInCountries=getCountries();var locales={en:en,de:de,es:es,fr:fr,pt:pt};/**
|
|
2
2
|
* Renders the reserve form phone input maybe with country selection.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
4
|
* @returns {JSX.Element}
|
|
5
|
-
*/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.
|
|
5
|
+
*/var UnwrappedElementPhoneNumber=React.memo(function(props){var element=props.element,name=props.name,errorText=props.errorText,value=props.value,visible=props.visible,formName=props.formName;var label=element.label,handleChange=element.handleChange,_element$disabled=element.disabled,disabled=_element$disabled===void 0?false:_element$disabled,_element$required=element.required,required=_element$required===void 0?false:_element$required,_element$config=element.config,_element$config2=_element$config===void 0?{}:_element$config,_element$config2$supp=_element$config2.supportedCountries,supportedCountries=_element$config2$supp===void 0?[]:_element$config2$supp,_element$config2$coun=_element$config2.countrySortOrder,countrySortOrder=_element$config2$coun===void 0?[]:_element$config2$coun,_element$config2$user=_element$config2.userLocation,userLocation=_element$config2$user===void 0?{}:_element$config2$user;var _React$useState=React.useState(false),_React$useState2=_slicedToArray(_React$useState,2),isFocused=_React$useState2[0],setIsFocused=_React$useState2[1];// Maps available countries to correct format.
|
|
6
6
|
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.
|
|
7
7
|
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
|
|
8
8
|
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
|
|
|
17
17
|
* When list with supported countries has the same entries as the country sort order, we don't
|
|
18
18
|
* need to add a separator to the countryOptionsOrder array since the country picker lists
|
|
19
19
|
* will not show a section with unordered countries.
|
|
20
|
-
*/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;
|
|
20
|
+
*/return sanitizedCountrySortOrder.length?[].concat(sanitizedCountrySortOrder,countryListsEqual?[]:['|']):[];},[countries,countrySortOrder]);var hasCountrySelect=React.useMemo(function(){return countries.length>1;},[countries.length]);var handleChangeWrapped=React.useCallback(function(phoneValue){handleChange(phoneValue,{target:{name:name}});},[handleChange,name]);var phoneClasses=classnames('textField',_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({simpleInput:!hasCountrySelect},_camelCase(name),true),"phonePicker",true),"phonePickerError",!!errorText),"validationError",!!errorText),"phonePickerFocused",isFocused),styles.phoneField,true),styles.phoneFieldError,!!errorText));if(!visible){return null;}var Component=hasCountrySelect?PhoneInputCountrySelect:PhoneInput;return React.createElement("div",{className:classnames('formBuilderField','engage__form-phone-number',{validationError:!!errorText})},React.createElement("div",{className:phoneClasses},React.createElement(Label,{label:label,isFocused:isFocused,isFloating:isFocused||!!value}),React.createElement(Component,_extends({defaultCountry:defaultCountry,name:name,value:value||'',onChange:handleChangeWrapped,onFocus:function onFocus(){return setIsFocused(true);},onBlur:function onBlur(){return setIsFocused(false);},disabled:disabled,required:required,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null},hasCountrySelect?{countryOptionsOrder:countryOptionsOrder,addInternationalOption:false,flags:flags,countries:countries,labels:labels}:{className:'PhoneInputInput'}))),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));});UnwrappedElementPhoneNumber.defaultProps={value:'',visible:true};export default UnwrappedElementPhoneNumber;
|
|
@@ -3,4 +3,4 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
|
|
|
3
3
|
* @param {Object} props Component props.
|
|
4
4
|
* @param {Object} props.element The data of the element to be rendered
|
|
5
5
|
* @returns {JSX}
|
|
6
|
-
*/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);
|
|
6
|
+
*/var ElementRadio=function ElementRadio(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-radio','formBuilderField',{validationError:!!errorText})},React.createElement(RadioGroup,{name:name,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:element.disabled},Object.keys(element.options).map(function(itemName){return React.createElement(RadioItem,{key:"".concat(name,"_").concat(itemName),id:"".concat(name,"_").concat(_camelCase(itemName)),name:itemName,label:element.options[itemName]});})),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementRadio.defaultProps={value:'',visible:true};export default memo(ElementRadio);
|
|
@@ -2,5 +2,5 @@ import _camelCase from"lodash/camelCase";import React,{memo}from'react';import P
|
|
|
2
2
|
* Takes an element and renders it, if the type matches
|
|
3
3
|
* @param {Object} props Component props.
|
|
4
4
|
* @param {Object} props.element The data of the element to be rendered
|
|
5
|
-
* @returns {JSX}
|
|
6
|
-
*/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:
|
|
5
|
+
* @returns {JSX.Element}
|
|
6
|
+
*/var ElementSelect=function ElementSelect(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var label=element.label,placeholder=element.placeholder,required=element.required,options=element.options,disabled=element.disabled,handleChange=element.handleChange;return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-select','formBuilderField',{validationError:!!errorText})},React.createElement(Select,{name:name,required:required,label:label,placeholder:placeholder,value:value,options:options,onChange:handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:disabled,"aria-invalid":!!errorText,"aria-describedby":errorText.length>0?"ariaError-".concat(name):null}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementSelect.defaultProps={value:'',visible:true};export default memo(ElementSelect);
|
|
@@ -3,5 +3,5 @@ var mapping=_defineProperty(_defineProperty(_defineProperty(_defineProperty(_def
|
|
|
3
3
|
* Takes an element and renders it, if the type matches
|
|
4
4
|
* @param {Object} props Component props.
|
|
5
5
|
* @param {Object} props.element The data of the element to be rendered
|
|
6
|
-
* @returns {JSX}
|
|
7
|
-
*/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:
|
|
6
|
+
* @returns {JSX.Element}
|
|
7
|
+
*/var ElementText=function ElementText(props){var element=props.element,errorText=props.errorText,name=props.name,value=props.value,visible=props.visible,formName=props.formName;if(!visible){return null;}var required=element.required,disabled=element.disabled,handleChange=element.handleChange,label=element.label;var type=mapping[element.type];return React.createElement("div",{className:classNames(_camelCase(name),'engage__form-text','formBuilderField',{validationError:!!errorText})},React.createElement(TextField,{required:required,type:type,name:name,label:label,value:value,onChange:handleChange,errorText:errorText,isControlled:true,translateErrorText:false,showErrorText:false,disabled:disabled}),React.createElement(FormHelper,{errorText:errorText,element:element,formName:formName,elementName:name}));};ElementText.defaultProps={value:'',visible:true};export default memo(ElementText);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from'react';import PropTypes from'prop-types';import ErrorTextCmp from'@shopgate/pwa-ui-shared/FormElement/components/ErrorText';import{SurroundPortals}from'@shopgate/engage/components';import{sanitizePortalName}from"./helpers/common";/**
|
|
2
2
|
* Component for error texts
|
|
3
3
|
* @param {Object} props Component props.
|
|
4
|
-
* @returns {JSX}
|
|
5
|
-
*/var FormHelper=function FormHelper(_ref){var errorText=_ref.errorText,element=_ref.element,formName=_ref.formName;return React.createElement("div",{className:"formHelper"},React.createElement(SurroundPortals,{portalName:"".concat(sanitizePortalName(formName),".").concat(sanitizePortalName(element.id),".formHelper"),portalProps:{formName:formName,element:element,errorText:errorText}},!!errorText&&React.createElement(ErrorTextCmp,{errorText:errorText,translate:false})));};FormHelper.defaultProps={errorText:null};export default FormHelper;
|
|
4
|
+
* @returns {JSX.Element}
|
|
5
|
+
*/var FormHelper=function FormHelper(_ref){var errorText=_ref.errorText,element=_ref.element,formName=_ref.formName,elementName=_ref.elementName;return React.createElement("div",{className:"formHelper"},React.createElement(SurroundPortals,{portalName:"".concat(sanitizePortalName(formName),".").concat(sanitizePortalName(element.id),".formHelper"),portalProps:{formName:formName,element:element,errorText:errorText}},!!errorText&&React.createElement(ErrorTextCmp,{errorText:errorText,translate:false,elementName:elementName,ariaHidden:true})));};FormHelper.defaultProps={errorText:null,elementName:null};export default FormHelper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
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{themeConfig}from'@shopgate/engage';import{responsiveMediaQuery}from'@shopgate/engage/styles';var colors=themeConfig.colors;export var TWO_COLUMN_LAYOUT=_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{display:'flex',flexDirection:'row',flexWrap:'wrap',margin:-8,marginTop:16,marginBottom:8,'>div':{flex:'1 1 50%',padding:'0 8px',maxWidth:'50%'},'>.phonePicker':{marginLeft:8,marginRight:8,flexBasis:'calc(50% - 16px)'}});export var OUTLINED_FORM_FIELDS={' .formHelper':{minHeight:32,' .errorText':{position:'relative',textOverflow:'unset',whiteSpace:'unset',lineHeight:'15px',bottom:'unset',padding:'8px 8px 8px 16px'}},' .formBuilderField':{' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker':{marginBottom:'unset',paddingBottom:'unset'}},' .radioGroup + .formHelper, .checkbox + .formHelper':{minHeight:16},' .checkbox':{paddingBottom:0},' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker':{paddingBottom:8,background:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:0,marginBottom:32,borderTopLeftRadius:4,borderTopRightRadius:4,borderBottom:"1px solid ".concat(colors.shade12)},' .phonePickerError':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")")},' .phonePickerFocused:not(.phonePickerError)':{borderBottom:'2px solid var(--color-primary)'},' .formElement:not(.radioGroup) label':{paddingLeft:24,color:'var(--color-text-low-emphasis)',transform:'translate3d(0, -18px, 0) scale3d(0.75, 0.75, 0.75)'},' .textField label':{paddingLeft:17,color:'var(--color-text-low-emphasis)','.floating':{transform:'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'}},' .formElement:not(.radioGroup) select, .formElement .info-field':{paddingLeft:16,color:'var(--color-text-high-emphasis)'},' .formElement:not(.radioGroup):not(.checkbox) svg':{marginTop:8,right:8},' .formElement:not(.radioGroup) .placeholder':{paddingLeft:20,color:'var(--color-text-low-emphasis)'},' .formElement.disabled, .textField.disabled':{' input, select, svg':{opacity:0.28},' .label':{opacity:0.6}},' .textField input':{paddingLeft:16,color:'var(--color-text-high-emphasis)'},' .underline':{marginBottom:0,borderBottom:'none'},' .errorText':{bottom:-20,paddingLeft:16},' .phonePicker':{paddingTop:24,paddingBottom:2},' .textField.phonePicker:not(.simpleInput) .label':{
|
|
1
|
+
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{themeConfig}from'@shopgate/engage';import{responsiveMediaQuery}from'@shopgate/engage/styles';var colors=themeConfig.colors;export var TWO_COLUMN_LAYOUT=_defineProperty({},responsiveMediaQuery('>=md',{webOnly:false}),{display:'flex',flexDirection:'row',flexWrap:'wrap',margin:-8,marginTop:16,marginBottom:8,'>div':{flex:'1 1 50%',padding:'0 8px',maxWidth:'50%'},'>.phonePicker':{marginLeft:8,marginRight:8,flexBasis:'calc(50% - 16px)'}});export var OUTLINED_FORM_FIELDS={' .formHelper':{minHeight:32,' .errorText':{position:'relative',textOverflow:'unset',whiteSpace:'unset',lineHeight:'15px',bottom:'unset',padding:'8px 8px 8px 16px'}},' .formBuilderField':{' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker':{marginBottom:'unset',paddingBottom:'unset'}},' .radioGroup + .formHelper, .checkbox + .formHelper':{minHeight:16},' .checkbox':{paddingBottom:0},' .textField, .formElement:not(.radioGroup):not(.checkbox), .phonePicker':{paddingBottom:8,background:"var(--color-background-accent, ".concat(colors.shade8,")"),padding:0,marginBottom:32,borderTopLeftRadius:4,borderTopRightRadius:4,borderBottom:"1px solid ".concat(colors.shade12)},' .phonePickerError':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,")")},' .phonePickerFocused:not(.phonePickerError)':{borderBottom:'2px solid var(--color-primary)'},' .formElement:not(.radioGroup) label':{paddingLeft:24,color:'var(--color-text-low-emphasis)',transform:'translate3d(0, -18px, 0) scale3d(0.75, 0.75, 0.75)'},' .textField label':{paddingLeft:17,color:'var(--color-text-low-emphasis)','.floating':{transform:'translate3d(3px, -18px, 0) scale3d(0.75, 0.75, 0.75)'}},' .formElement:not(.radioGroup) select, .formElement .info-field':{paddingLeft:16,color:'var(--color-text-high-emphasis)'},' .formElement:not(.radioGroup):not(.checkbox) svg':{marginTop:8,right:8},' .formElement:not(.radioGroup) .placeholder':{paddingLeft:20,color:'var(--color-text-low-emphasis)'},' .formElement.disabled, .textField.disabled':{' input, select, svg':{opacity:0.28},' .label':{opacity:0.6}},' .textField input':{paddingLeft:16,color:'var(--color-text-high-emphasis)'},' .underline':{marginBottom:0,borderBottom:'none'},' .errorText':{bottom:-20,paddingLeft:16},' .phonePicker':{paddingTop:24,paddingBottom:2},' .textField.phonePicker:not(.simpleInput) .label':{paddingLeft:70,'&.floating':{paddingLeft:0}},' .textField.phonePicker:not(.simpleInput) input':{paddingLeft:0},' .phonePicker > .PhoneInputInput':{paddingLeft:16,width:'100%'},' .phonePicker .PhoneInputInput':{borderBottom:'none',color:'var(--color-text-high-emphasis)','&:focus':{borderBottom:'none'},'::placeholder':{color:'var(--color-text-low-emphasis)'}},' .phonePicker .errorText':{marginLeft:-8},' .PhoneInputCountryIcon':{marginBottom:8,marginLeft:16},' .PhoneInputCountrySelectArrow':{marginRight:6,marginLeft:10,marginBottom:8},' .placeholder':{color:colors.shade12}};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import{hot}from'react-hot-loader/root';import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n,errorBehavior}from'@shopgate/engage/core';import StopIcon from'@shopgate/pwa-ui-shared/icons/StopIcon';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import WarningIcon from'@shopgate/pwa-ui-shared/icons/WarningIcon';import*as styles from"./MessageBar.style";var iconMapping={info:InfoIcon,warning:WarningIcon,error:StopIcon};/**
|
|
1
|
+
import{hot}from'react-hot-loader/root';import*as React from'react';import PropTypes from'prop-types';import classnames from'classnames';import{i18n,errorBehavior}from'@shopgate/engage/core/helpers';import StopIcon from'@shopgate/pwa-ui-shared/icons/StopIcon';import InfoIcon from'@shopgate/pwa-ui-shared/icons/InfoIcon';import WarningIcon from'@shopgate/pwa-ui-shared/icons/WarningIcon';import*as styles from"./MessageBar.style";var iconMapping={info:InfoIcon,warning:WarningIcon,error:StopIcon};/**
|
|
2
2
|
* The MessageBar component.
|
|
3
3
|
* @param {Object} props The component props.
|
|
4
4
|
* @property {Array} props.messages The message content.
|
|
5
5
|
* @property {Object} props.classNames Styling.
|
|
6
|
-
* @
|
|
7
|
-
|
|
6
|
+
* @property {boolean} props.raised whether to use specific styling.
|
|
7
|
+
* @property {boolean} props.showIcons whether to show icons.
|
|
8
|
+
* @return {JSX.Element}
|
|
9
|
+
*/var MessageBar=function MessageBar(_ref){var messages=_ref.messages,classNames=_ref.classNames,raised=_ref.raised,showIcons=_ref.showIcons;var containerClass=React.useMemo(function(){if(raised){return classnames(styles.containerRaised,classNames.containerRaised);}return classnames(styles.container,classNames.container);},[classNames.container,classNames.containerRaised,raised]);return React.createElement("div",{className:containerClass,role:messages.length>0?'alert':null},messages.map(function(item){var _item$type=item.type,type=_item$type===void 0?'info':_item$type,message=item.message,_item$messageParams=item.messageParams,messageParams=_item$messageParams===void 0?null:_item$messageParams,_item$additionalParam=item.additionalParams,additionalParams=_item$additionalParam===void 0?null:_item$additionalParam,_item$translated=item.translated,translated=_item$translated===void 0?false:_item$translated;var _item$icon=item.icon,Icon=_item$icon===void 0?null:_item$icon;if(Icon===null&&showIcons){Icon=iconMapping[type];}var messageOutput=!translated?errorBehavior.getErrorMessage(message,messageParams||additionalParams):message;return React.createElement("div",{key:"".concat(type,"-").concat(message),className:classnames(styles[type]?styles[type]():null,classNames.message,Icon?styles.withIcon:null),"aria-live":"assertive","aria-atomic":"true"},Icon&&React.createElement(Icon,{className:classnames(classNames.icon,styles.icon)}),React.createElement("span",{className:"sr-only"},"".concat(i18n.text("cart.message_type_".concat(type)),": ").concat(messageOutput)),React.createElement("span",{"aria-hidden":true,className:Icon?styles.messageToIcon:null},messageOutput));}));};MessageBar.defaultProps={classNames:{container:null,containerRaised:null,message:null,icon:null},raised:false,showIcons:false};export default hot(React.memo(MessageBar));
|
|
@@ -8,4 +8,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
|
|
|
8
8
|
* @returns {string}
|
|
9
9
|
*/export var error=function error(){return css(messageBase,_defineProperty({background:themeColors.error,color:themeColors.light},responsiveMediaQuery('>xs',{webOnly:true}),_extends({},getMessageColors(themeColors.error),{' > svg':{color:themeColors.error}}))).toString();};/**
|
|
10
10
|
* @returns {string}
|
|
11
|
-
*/export var warning=function warning(){return css(messageBase,_defineProperty({background:themeColors.warning,color:themeColors.light},responsiveMediaQuery('>xs',{webOnly:true}),_extends({},getMessageColors(themeColors.warning),{' > svg':{color:themeColors.warning}}))).toString();};export var
|
|
11
|
+
*/export var warning=function warning(){return css(messageBase,_defineProperty({background:themeColors.warning,color:themeColors.light},responsiveMediaQuery('>xs',{webOnly:true}),_extends({},getMessageColors(themeColors.warning),{' > svg':{color:themeColors.warning}}))).toString();};export var withIcon=css({display:'flex',minWidth:'100%',alignItems:'center'}).toString();export var icon=css({flexGrow:0,flexShrink:0}).toString();export var messageToIcon=css({flexGrow:1,paddingLeft:themeVariables.gap.big});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{label,checkbox,
|
|
1
|
+
import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{label,checkbox,thumb,container}from"./style";/**
|
|
2
2
|
* The Toggle component
|
|
3
3
|
* @param {Object} props The component props
|
|
4
4
|
* @returns {JSX.Element}
|
|
5
|
-
*/var Toggle=function Toggle(_ref){var id=_ref.id,checked=_ref.checked,className=_ref.className,onChange=_ref.onChange,disabled=_ref.disabled;return React.createElement("div",{className:className},React.createElement("div",{className:container},React.createElement("input",{type:"checkbox",id:id,className:classNames(checkbox
|
|
5
|
+
*/var Toggle=function Toggle(_ref){var id=_ref.id,checked=_ref.checked,className=_ref.className,onChange=_ref.onChange,disabled=_ref.disabled;return React.createElement("div",{className:className},React.createElement("div",{className:container},React.createElement("input",{type:"checkbox",id:id,className:classNames(checkbox),checked:checked,"aria-checked":checked,onChange:onChange,disabled:disabled,"aria-labelledby":"".concat(id,"-label")}),React.createElement("div",{className:label}),React.createElement("div",{className:thumb})));};Toggle.defaultProps={checked:false,className:null,onChange:null,disabled:false};export default Toggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var container=css({position:'relative',marginBottom:-4}).toString();export var label=css({display:'block',height:20,width:44,background:'#898989',borderRadius:100,cursor:'pointer',bottom:-4,transition:'all .3s ease'}).toString();export var checkbox=css({
|
|
1
|
+
var _css;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{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var container=css({position:'relative',marginBottom:-4}).toString();export var label=css({display:'block',height:20,width:44,background:'#898989',borderRadius:100,cursor:'pointer',bottom:-4,transition:'all .3s ease'}).toString();export var checkbox=css((_css={},_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css,":checked ~ .".concat(label),{background:"var(--color-primary, ".concat(colors.primary,")"),opacity:0.5}),':checked ~ div',{left:20,background:"var(--color-primary, ".concat(colors.primary,")")}),":disabled ~ .".concat(label),{background:'#D5D5D5',pointerEvents:'none',filter:'none'}),':disabled ~ div',{background:'#BCBDBC',filter:'none'}),"position",'absolute'),"opacity",0),"width",'100%'),"height",'100%'),"top",0),"left",0),_defineProperty(_defineProperty(_defineProperty(_css,"margin",0),"zIndex",2),"cursor",'pointer'))).toString();export var thumb=css({position:'absolute',left:-2,top:-3,display:'block',width:26,height:26,borderRadius:100,background:'white',boxShadow:'0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0,0,0,.12)',content:' ',transition:'all .3s ease',pointerEvents:'none',zIndex:100}).toString();
|
|
@@ -13,7 +13,7 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";import _debounce fro
|
|
|
13
13
|
* to influence scroll behavior.
|
|
14
14
|
* @returns {{ handleChange, handleSubmit, values, valid, validationErrors: ?Object, isSubmitting }}
|
|
15
15
|
*/export function useFormState(initialState,complete){var validationConstraints=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var formContainerRef=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var validationErrorScrollOffset=arguments.length>4&&arguments[4]!==undefined?arguments[4]:10;var _useScrollTo=useScrollTo(formContainerRef,validationErrorScrollOffset),scrollTo=_useScrollTo.scrollTo;// Submit lock prevents the form from being submitted multiple times
|
|
16
|
-
var submitLock=useRef(false);var _useState=useState(initialState),_useState2=_slicedToArray(_useState,2),values=_useState2[0],setValues=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isSubmitting=_useState4[0],setSubmitting=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),changed=_useState6[0],setChanged=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),ignoreErrors=_useState8[0],setIgnoreErrors=_useState8[1];var _useValidation=useValidation(validationConstraints),valid=_useValidation.valid,validationErrors=_useValidation.validationErrors,validate=_useValidation.validate,reset=_useValidation.reset;var scrollToError=useCallback(function(){scrollTo('.validationError');},[scrollTo]);// -- CHANGED ---------------
|
|
16
|
+
var submitLock=useRef(false);var _useState=useState(initialState),_useState2=_slicedToArray(_useState,2),values=_useState2[0],setValues=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isSubmitting=_useState4[0],setSubmitting=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),changed=_useState6[0],setChanged=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),ignoreErrors=_useState8[0],setIgnoreErrors=_useState8[1];var _useValidation=useValidation(validationConstraints),valid=_useValidation.valid,validationErrors=_useValidation.validationErrors,validate=_useValidation.validate,reset=_useValidation.reset;var scrollToError=useCallback(function(){var errorElement=document.querySelector('.validationError');if(errorElement){scrollTo('.validationError');var inputElement=errorElement.querySelector('input, select, textarea');if(inputElement){inputElement.focus();}}},[scrollTo]);// -- CHANGED ---------------
|
|
17
17
|
useEffect(function(){var isEqual=JSON.stringify(values)===JSON.stringify(initialState);if(!isEqual&&!changed){setChanged(true);}else if(isEqual&&changed){setChanged(false);}},[changed,initialState,values]);// -- IS_SUBMITTING ---------
|
|
18
18
|
/* eslint-disable react-hooks/exhaustive-deps */useEffect(function(){if(!isSubmitting){return;}var mounted=true;if((valid===true||ignoreErrors)&&!submitLock.current){submitLock.current=true;_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return complete(values);case 2:if(mounted){setSubmitting(false);setChanged(false);submitLock.current=false;}case 3:case"end":return _context.stop();}},_callee);}))();}// eslint-disable-next-line consistent-return
|
|
19
19
|
return function(){mounted=false;};},[isSubmitting,valid,ignoreErrors]);/* eslint-enable react-hooks/exhaustive-deps */useEffect(function(){scrollToError();},[isSubmitting,scrollToError]);useEffect(function(){return function(){submitLock.current=false;};},[]);// -- VALIDATION ON SUBMIT ---------
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{i18n}from'@shopgate/engage/core';/**
|
|
1
|
+
import{i18n}from'@shopgate/engage/core/helpers';/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} options Options for the helper
|
|
4
4
|
* @param {Array} options.supportedCountries A list of supported countries.
|
|
5
5
|
* @param {Array} options.countrySortOrder Sort order for supported countries.
|
|
6
6
|
* @param {Object} options.userLocation User location for better phone picker defaults.
|
|
7
7
|
* @returns {Object}
|
|
8
|
-
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation;return{fields:{email:{type:'email',label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *")},phone:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}};};export default generateFormConfig;
|
|
8
|
+
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation;return{fields:{email:{type:'email',label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *"),required:true},phone:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),required:true,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}};};export default generateFormConfig;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.27.
|
|
3
|
+
"version": "7.27.1-beta.1",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@shopgate/native-modules": "1.0.0-beta.25",
|
|
19
|
-
"@shopgate/pwa-common": "7.27.
|
|
20
|
-
"@shopgate/pwa-common-commerce": "7.27.
|
|
21
|
-
"@shopgate/pwa-core": "7.27.
|
|
22
|
-
"@shopgate/pwa-ui-ios": "7.27.
|
|
23
|
-
"@shopgate/pwa-ui-material": "7.27.
|
|
24
|
-
"@shopgate/pwa-ui-shared": "7.27.
|
|
19
|
+
"@shopgate/pwa-common": "7.27.1-beta.1",
|
|
20
|
+
"@shopgate/pwa-common-commerce": "7.27.1-beta.1",
|
|
21
|
+
"@shopgate/pwa-core": "7.27.1-beta.1",
|
|
22
|
+
"@shopgate/pwa-ui-ios": "7.27.1-beta.1",
|
|
23
|
+
"@shopgate/pwa-ui-material": "7.27.1-beta.1",
|
|
24
|
+
"@shopgate/pwa-ui-shared": "7.27.1-beta.1",
|
|
25
25
|
"@stripe/react-stripe-js": "^1.16.5",
|
|
26
26
|
"@stripe/stripe-js": "^1.3.1",
|
|
27
27
|
"@virtuous/conductor": "~2.5.0",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{i18n}from'@shopgate/engage/core';var pickupFieldActions=[{type:'setVisibility',rules:[{context:'pickupPerson',type:'oneOf',data:['someoneElse']}]}];/**
|
|
1
|
+
import{i18n}from'@shopgate/engage/core/helpers';var pickupFieldActions=[{type:'setVisibility',rules:[{context:'pickupPerson',type:'oneOf',data:['someoneElse']}]}];/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} options Options for the helper
|
|
4
4
|
* @param {Array} options.supportedCountries A list of supported countries.
|
|
5
5
|
* @param {Array} options.countrySortOrder Sort order for supported countries.
|
|
6
6
|
* @param {Object} options.userLocation User location for better phone picker defaults.
|
|
7
7
|
* @returns {Object}
|
|
8
|
-
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation;return{fields:{pickupPerson:{type:'radio',label:i18n.text('checkout.pickup_contact.form.who_will_pickup'),options:{me:i18n.text('checkout.pickup_contact.form.me'),someoneElse:i18n.text('checkout.pickup_contact.form.someone_else')}},firstName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *")},lastName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *")},emailAddress:{type:'email',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *")},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),actions:pickupFieldActions,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}};};export default generateFormConfig;
|
|
8
|
+
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation;return{fields:{pickupPerson:{type:'radio',label:i18n.text('checkout.pickup_contact.form.who_will_pickup'),options:{me:i18n.text('checkout.pickup_contact.form.me'),someoneElse:i18n.text('checkout.pickup_contact.form.someone_else')}},firstName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *"),required:true},lastName:{type:'text',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *"),required:true},emailAddress:{type:'email',actions:pickupFieldActions,label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *"),required:true},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),required:true,actions:pickupFieldActions,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}}};};export default generateFormConfig;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n,SHOP_SETTING_REGISTRATION_MODE_SIMPLE,SHOP_SETTING_REGISTRATION_MODE_EXTENDED}from'@shopgate/engage/core';/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @returns {Object}
|
|
4
|
-
*/var generateFormConfig=function generateFormConfig(_ref){var _ref$registrationMode=_ref.registrationMode,registrationMode=_ref$registrationMode===void 0?SHOP_SETTING_REGISTRATION_MODE_EXTENDED:_ref$registrationMode;return{fields:_extends({},registrationMode===SHOP_SETTING_REGISTRATION_MODE_SIMPLE?{firstName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *")},lastName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *")}}:null,{emailAddress:{type:'email',label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *")},password:{type:'password',label:i18n.text('checkout.pickup_contact.form.password')},passwordConfirm:{type:'password',label:i18n.text('checkout.pickup_contact.form.passwordConfirm')}})};};export default generateFormConfig;
|
|
4
|
+
*/var generateFormConfig=function generateFormConfig(_ref){var _ref$registrationMode=_ref.registrationMode,registrationMode=_ref$registrationMode===void 0?SHOP_SETTING_REGISTRATION_MODE_EXTENDED:_ref$registrationMode;return{fields:_extends({},registrationMode===SHOP_SETTING_REGISTRATION_MODE_SIMPLE?{firstName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *"),required:true},lastName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *"),required:true}}:null,{emailAddress:{type:'email',label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *"),required:true},password:{type:'password',label:i18n.text('checkout.pickup_contact.form.password'),required:true},passwordConfirm:{type:'password',label:i18n.text('checkout.pickup_contact.form.passwordConfirm'),required:true}})};};export default generateFormConfig;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n}from'@shopgate/engage/core';/**
|
|
1
|
+
function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import{i18n}from'@shopgate/engage/core/helpers';/**
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} params Additional parameters
|
|
4
4
|
* @returns {Object}
|
|
5
|
-
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation,numberOfAddressLines=_ref.numberOfAddressLines,isGuest=_ref.isGuest,_ref$isReserveOnly=_ref.isReserveOnly,isReserveOnly=_ref$isReserveOnly===void 0?false:_ref$isReserveOnly;return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *")},lastName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *")}},isGuest?{emailAddress:{type:'email',label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *")}}:{},{mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}},!isGuest||isGuest&&!isReserveOnly?_extends({companyName:{type:'text',label:i18n.text('checkout.pickup_contact.form.company')},address1:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.address1')," *")}},numberOfAddressLines>=2?{address2:{type:'text',label:i18n.text('account.profile.form.address2')}}:{},{},numberOfAddressLines>=3?{address3:{type:'text',label:i18n.text('account.profile.form.address3')}}:{},{},numberOfAddressLines>=4?{address4:{type:'text',label:i18n.text('account.profile.form.address4')}}:{},{postalCode:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.postalCode')," *")},city:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.city')," *")},country:{type:'country',label:"".concat(i18n.text('checkout.pickup_contact.form.country')," *"),countries:supportedCountries},region:{type:'province',label:"".concat(i18n.text('checkout.pickup_contact.form.region')," *"),required:true}}):{})};};export default generateFormConfig;
|
|
5
|
+
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation,numberOfAddressLines=_ref.numberOfAddressLines,isGuest=_ref.isGuest,_ref$isReserveOnly=_ref.isReserveOnly,isReserveOnly=_ref$isReserveOnly===void 0?false:_ref$isReserveOnly;return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *"),required:true},lastName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *"),required:true}},isGuest?{emailAddress:{type:'email',label:"".concat(i18n.text('checkout.pickup_contact.form.emailAddress')," *"),required:true}}:{},{mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),required:true,config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}}},!isGuest||isGuest&&!isReserveOnly?_extends({companyName:{type:'text',label:i18n.text('checkout.pickup_contact.form.company')},address1:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.address1')," *"),required:true}},numberOfAddressLines>=2?{address2:{type:'text',label:i18n.text('account.profile.form.address2')}}:{},{},numberOfAddressLines>=3?{address3:{type:'text',label:i18n.text('account.profile.form.address3')}}:{},{},numberOfAddressLines>=4?{address4:{type:'text',label:i18n.text('account.profile.form.address4')}}:{},{postalCode:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.postalCode')," *"),required:true},city:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.city')," *"),required:true},country:{type:'country',label:"".concat(i18n.text('checkout.pickup_contact.form.country')," *"),countries:supportedCountries,required:true},region:{type:'province',label:"".concat(i18n.text('checkout.pickup_contact.form.region')," *"),required:true}}):{})};};export default generateFormConfig;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React,{useMemo,useCallback}from'react';import PropTypes from'prop-types';import{FormBuilder}from'@shopgate/engage/components';import{useRegistration}from"../../hooks";import Section from"../../../checkout/components/Checkout/CheckoutSection";import{ELEMENT_ID_BILLING_CONTACT}from"../../constants";import generateFormConfig from"./RegistrationFormBilling.config";import{form,section}from"./RegistrationContent.style";/**
|
|
2
2
|
* The RegistrationFormBilling component.
|
|
3
3
|
* @param {Object} props The component props
|
|
4
|
-
* @returns {JSX}
|
|
4
|
+
* @returns {JSX.Element}
|
|
5
5
|
*/var RegistrationFormBilling=function RegistrationFormBilling(_ref){var isGuest=_ref.isGuest;var _useRegistration=useRegistration(isGuest),supportedCountries=_useRegistration.supportedCountries,countrySortOrder=_useRegistration.countrySortOrder,userLocation=_useRegistration.userLocation,defaultBillingFormState=_useRegistration.defaultBillingFormState,billingFormValidationErrors=_useRegistration.billingFormValidationErrors,updateBillingForm=_useRegistration.updateBillingForm,numberOfAddressLines=_useRegistration.numberOfAddressLines,orderReserveOnly=_useRegistration.orderReserveOnly,isBillingAddressSelectionEnabled=_useRegistration.isBillingAddressSelectionEnabled;var formConfig=useMemo(function(){return generateFormConfig({supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation,numberOfAddressLines:numberOfAddressLines,isGuest:isGuest,isReserveOnly:orderReserveOnly});},[countrySortOrder,isGuest,numberOfAddressLines,orderReserveOnly,supportedCountries,userLocation]);var title=useMemo(function(){if(isGuest&&orderReserveOnly){return'registration.headlines.billing_address_reserve';}return'registration.headlines.billing_address';},[isGuest,orderReserveOnly]);var handleUpdate=useCallback(function(values){updateBillingForm(values);},[updateBillingForm]);if(!isBillingAddressSelectionEnabled){return null;}return React.createElement(Section,{title:title,className:section,hasForm:true,id:ELEMENT_ID_BILLING_CONTACT},React.createElement(FormBuilder,{className:form,name:"RegistrationBilling",config:formConfig,defaults:defaultBillingFormState,validationErrors:billingFormValidationErrors,handleUpdate:handleUpdate}));};RegistrationFormBilling.defaultProps={isGuest:false};export default RegistrationFormBilling;
|
|
@@ -2,4 +2,4 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
|
|
|
2
2
|
* Generates form configuration.
|
|
3
3
|
* @param {Object} params Additional parameters
|
|
4
4
|
* @returns {Object}
|
|
5
|
-
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation,numberOfAddressLines=_ref.numberOfAddressLines;return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *")},lastName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *")},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation}},companyName:{type:'text',label:i18n.text('checkout.pickup_contact.form.company')},address1:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.address1')," *")}},numberOfAddressLines>=2?{address2:{type:'text',label:i18n.text('account.profile.form.address2')}}:{},{},numberOfAddressLines>=3?{address3:{type:'text',label:i18n.text('account.profile.form.address3')}}:{},{},numberOfAddressLines>=4?{address4:{type:'text',label:i18n.text('account.profile.form.address4')}}:{},{postalCode:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.postalCode')," *")},city:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.city')," *")},country:{type:'country',label:"".concat(i18n.text('checkout.pickup_contact.form.country')," *"),countries:supportedCountries},region:{type:'province',label:"".concat(i18n.text('checkout.pickup_contact.form.region')," *"),required:true}})};};export default generateFormConfig;
|
|
5
|
+
*/var generateFormConfig=function generateFormConfig(_ref){var supportedCountries=_ref.supportedCountries,countrySortOrder=_ref.countrySortOrder,userLocation=_ref.userLocation,numberOfAddressLines=_ref.numberOfAddressLines;return{fields:_extends({firstName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.firstName')," *"),required:true},lastName:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.lastName')," *"),required:true},mobile:{type:'phone_picker',label:"".concat(i18n.text('checkout.pickup_contact.form.mobile')," *"),config:{supportedCountries:supportedCountries,countrySortOrder:countrySortOrder,userLocation:userLocation},required:true},companyName:{type:'text',label:i18n.text('checkout.pickup_contact.form.company')},address1:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.address1')," *"),required:true}},numberOfAddressLines>=2?{address2:{type:'text',label:i18n.text('account.profile.form.address2')}}:{},{},numberOfAddressLines>=3?{address3:{type:'text',label:i18n.text('account.profile.form.address3')}}:{},{},numberOfAddressLines>=4?{address4:{type:'text',label:i18n.text('account.profile.form.address4')}}:{},{postalCode:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.postalCode')," *"),required:true},city:{type:'text',label:"".concat(i18n.text('checkout.pickup_contact.form.city')," *"),required:true},country:{type:'country',label:"".concat(i18n.text('checkout.pickup_contact.form.country')," *"),required:true,countries:supportedCountries},region:{type:'province',label:"".concat(i18n.text('checkout.pickup_contact.form.region')," *"),required:true}})};};export default generateFormConfig;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React,{useCallback}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{i18n}from'@shopgate/engage/core';import{Toggle}from'@shopgate/engage/components';import{ELEMENT_ID_SHIPPING_CONTACT_TOGGLE}from"../../constants";import{useRegistration}from"../../hooks";var styles={root:css({display:'flex',justifyContent:'space-between',paddingBottom:24}).toString(),label:css({paddingRight:8}).toString()};/**
|
|
2
2
|
* @param {Object} props The component props
|
|
3
|
-
* @returns {JSX}
|
|
4
|
-
*/var RegistrationFormToggle=function RegistrationFormToggle(_ref){var isGuest=_ref.isGuest;var _useRegistration=useRegistration(isGuest),isShippingAddressSelectionEnabled=_useRegistration.isShippingAddressSelectionEnabled,isShippingFormVisible=_useRegistration.isShippingFormVisible,setIsShippingFormVisible=_useRegistration.setIsShippingFormVisible;var handleChange=useCallback(function(e){setIsShippingFormVisible(e.target.checked);},[setIsShippingFormVisible]);if(!isShippingAddressSelectionEnabled){return null;}return React.createElement("div",{className:styles.root,id:ELEMENT_ID_SHIPPING_CONTACT_TOGGLE},React.createElement("
|
|
3
|
+
* @returns {JSX.Element}
|
|
4
|
+
*/var RegistrationFormToggle=function RegistrationFormToggle(_ref){var isGuest=_ref.isGuest;var _useRegistration=useRegistration(isGuest),isShippingAddressSelectionEnabled=_useRegistration.isShippingAddressSelectionEnabled,isShippingFormVisible=_useRegistration.isShippingFormVisible,setIsShippingFormVisible=_useRegistration.setIsShippingFormVisible;var handleChange=useCallback(function(e){setIsShippingFormVisible(e.target.checked);},[setIsShippingFormVisible]);if(!isShippingAddressSelectionEnabled){return null;}return React.createElement("div",{className:styles.root,id:ELEMENT_ID_SHIPPING_CONTACT_TOGGLE},React.createElement("label",{"aria-hidden":true,className:styles.label,htmlFor:"toggle-shipping-form",id:"toggle-shipping-form-label"},i18n.text('registration.different_shipping_address_label')),React.createElement(Toggle,{id:"toggle-shipping-form",checked:isShippingFormVisible,onChange:handleChange}));};RegistrationFormToggle.defaultProps={isGuest:false};export default RegistrationFormToggle;
|