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

package/registration/providers/GuestRegistrationProvider.js

@@ -1,22 +1,351 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useMemo,useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import pickBy from'lodash/pickBy';import identity from'lodash/identity';import appConfig from'@shopgate/pwa-common/helpers/config';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{useScrollTo}from'@shopgate/engage/core/hooks/useScrollTo';import{LoadingProvider,i18n,useAsyncMemo,useRoute,SHOP_SETTING_REGISTRATION_MODE_EXTENDED}from'@shopgate/engage/core';import{ADDRESS_TYPE_SHIPPING,ADDRESS_TYPE_PICKUP}from'@shopgate/engage/checkout';import{extractDefaultValues}from"../../account/helper/form";import{GUEST_CHECKOUT_PATTERN,GUEST_CHECKOUT_PAYMENT_PATTERN}from"../../checkout/constants/routes";import Context from"./GuestRegistrationProvider.context";import{generateBillingConstraints,generateShippingConstraints,generatePickupConstraints,generateSelfPickupConstraints,generateExtraConstraints}from"./GuestRegistrationProvider.constraints";import{MARKETING_OPT_IN_DEFAULT,ELEMENT_ID_SHIPPING_CONTACT,ELEMENT_ID_SHIPPING_CONTACT_TOGGLE,ELEMENT_ID_PICKUP_CONTACT}from"../constants";import connect from"./GuestRegistrationProvider.connector";var initialAddressFormState={firstName:'',lastName:'',company:'',address1:'',address2:'',city:'',country:'',postalCode:'',mobile:''};var initialBillingFormState=_extends({},initialAddressFormState);var initialShippingFormState=_extends({},initialAddressFormState);var initialPickupFormState={pickupPerson:'me',firstName:'',lastName:'',mobile:'',emailAddress:''};var initialOptInFormState={marketingOptIn:MARKETING_OPT_IN_DEFAULT};/**
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import pickBy from 'lodash/pickBy';
+import identity from 'lodash/identity';
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import { useFormState } from '@shopgate/engage/core/hooks/useFormState';
+import { useScrollTo } from '@shopgate/engage/core/hooks/useScrollTo';
+import { LoadingProvider, i18n, useAsyncMemo, useRoute, SHOP_SETTING_REGISTRATION_MODE_EXTENDED } from '@shopgate/engage/core';
+import { ADDRESS_TYPE_SHIPPING, ADDRESS_TYPE_PICKUP } from '@shopgate/engage/checkout';
+import { extractDefaultValues } from "../../account/helper/form";
+import { GUEST_CHECKOUT_PATTERN, GUEST_CHECKOUT_PAYMENT_PATTERN } from "../../checkout/constants/routes";
+import Context from "./GuestRegistrationProvider.context";
+import { generateBillingConstraints, generateShippingConstraints, generatePickupConstraints, generateSelfPickupConstraints, generateExtraConstraints } from "./GuestRegistrationProvider.constraints";
+import { MARKETING_OPT_IN_DEFAULT, ELEMENT_ID_SHIPPING_CONTACT, ELEMENT_ID_SHIPPING_CONTACT_TOGGLE, ELEMENT_ID_PICKUP_CONTACT } from "../constants";
+import connect from "./GuestRegistrationProvider.connector";
+const initialAddressFormState = {
+  firstName: '',
+  lastName: '',
+  company: '',
+  address1: '',
+  address2: '',
+  city: '',
+  country: '',
+  postalCode: '',
+  mobile: ''
+};
+const initialBillingFormState = {
+  ...initialAddressFormState
+};
+const initialShippingFormState = {
+  ...initialAddressFormState
+};
+const initialPickupFormState = {
+  pickupPerson: 'me',
+  firstName: '',
+  lastName: '',
+  mobile: '',
+  emailAddress: ''
+};
+const initialOptInFormState = {
+  marketingOptIn: MARKETING_OPT_IN_DEFAULT
+};
+
+/**
  * Converts validation errors into errors for form builder.
  * @param {Object} validationErrors The validation errors.
  * @returns {Array}
- */var convertValidationErrors=function convertValidationErrors(validationErrors){return Object.keys(validationErrors).map(function(key){return{path:key,message:i18n.text(validationErrors[key])};});};/**
+ */
+const convertValidationErrors = validationErrors => Object.keys(validationErrors).map(key => ({
+  path: key,
+  message: i18n.text(validationErrors[key])
+}));
+
+/**
  * @param {Object} props The provider props
  * @returns {JSX}
- */var GuestRegistrationProvider=function GuestRegistrationProvider(_ref){var children=_ref.children,formContainerRef=_ref.formContainerRef,isDataReady=_ref.isDataReady,userLocation=_ref.userLocation,customerAttributes=_ref.customerAttributes,billingAddress=_ref.billingAddress,shippingAddress=_ref.shippingAddress,pickupAddress=_ref.pickupAddress,customer=_ref.customer,billingPickupEquals=_ref.billingPickupEquals,billingShippingEquals=_ref.billingShippingEquals,numberOfAddressLines=_ref.numberOfAddressLines,cartHasDirectShipItems=_ref.cartHasDirectShipItems,orderReserveOnly=_ref.orderReserveOnly,orderNeedsPayment=_ref.orderNeedsPayment,isShippingAddressSelectionEnabled=_ref.isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled=_ref.isPickupContactSelectionEnabled,shopSettings=_ref.shopSettings,submitGuestRegistration=_ref.submitGuestRegistration,prepareCheckout=_ref.prepareCheckout,isLastStackEntry=_ref.isLastStackEntry,historyPop=_ref.historyPop,historyPush=_ref.historyPush;var _useScrollTo=useScrollTo(formContainerRef),scrollTo=_useScrollTo.scrollTo;var isShippingFormEnabled=useMemo(function(){return cartHasDirectShipItems;},[cartHasDirectShipItems]);var getIsShippingFormVisible=useCallback(function(){return isShippingFormEnabled&&!!shippingAddress&&!billingShippingEquals;},[billingShippingEquals,isShippingFormEnabled,shippingAddress]);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isLocked=_useState2[0],setIsLocked=_useState2[1];var _useState3=useState(false),_useState4=_slicedToArray(_useState3,2),isBillingFormSubmitted=_useState4[0],setIsBillingFormSubmitted=_useState4[1];var _useState5=useState(false),_useState6=_slicedToArray(_useState5,2),isShippingFormSubmitted=_useState6[0],setIsShippingFormSubmitted=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),isExtraFormSubmitted=_useState8[0],setIsExtraFormSubmitted=_useState8[1];var _useState9=useState(false),_useState10=_slicedToArray(_useState9,2),isPickupFormSubmitted=_useState10[0],setIsPickupFormSubmitted=_useState10[1];var _useState11=useState(null),_useState12=_slicedToArray(_useState11,2),billingFormRequestErrors=_useState12[0],setBillingFormRequestErrors=_useState12[1];var _useState13=useState(null),_useState14=_slicedToArray(_useState13,2),shippingFormRequestErrors=_useState14[0],setShippingFormRequestErrors=_useState14[1];var _useState15=useState(null),_useState16=_slicedToArray(_useState15,2),pickupFormRequestErrors=_useState16[0],setPickupFormRequestErrors=_useState16[1];var _useState17=useState(null),_useState18=_slicedToArray(_useState17,2),extraFormRequestErrors=_useState18[0],setExtraFormRequestErrors=_useState18[1];var _useState19=useState(getIsShippingFormVisible()),_useState20=_slicedToArray(_useState19,2),isShippingFormVisible=_useState20[0],setIsShippingFormVisible=_useState20[1];var _useState21=useState(generateSelfPickupConstraints()),_useState22=_slicedToArray(_useState21,2),pickupConstraints=_useState22[0],setPickupConstraints=_useState22[1];var _useRoute=useRoute(),_useRoute$query$edit=_useRoute.query.edit,guestRegistrationEditMode=_useRoute$query$edit===void 0?null:_useRoute$query$edit;// Initialize checkout process.
-var _useAsyncMemo=useAsyncMemo(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(!guestRegistrationEditMode){_context.next=2;break;}return _context.abrupt("return",true);case 2:_context.prev=2;setIsLocked(true);_context.next=6;return prepareCheckout({initializePayment:false,initializeOrder:!!isLastStackEntry});case 6:setIsLocked(false);return _context.abrupt("return",true);case 10:_context.prev=10;_context.t0=_context["catch"](2);setIsLocked(false);return _context.abrupt("return",false);case 14:case"end":return _context.stop();}},_callee,null,[[2,10]]);})),[],false),_useAsyncMemo2=_slicedToArray(_useAsyncMemo,1),isInitialized=_useAsyncMemo2[0];useEffect(function(){setIsShippingFormVisible(getIsShippingFormVisible());},[getIsShippingFormVisible,setIsShippingFormVisible]);// Determine values to prefill some form fields
-var userCountry=useMemo(function(){return(userLocation===null||userLocation===void 0?void 0:userLocation.country)||(appConfig===null||appConfig===void 0?void 0:appConfig.marketId)||null;},[userLocation]);var userRegion=useMemo(function(){return(userLocation===null||userLocation===void 0?void 0:userLocation.region)||null;},[userLocation]);// ===== billing form =====
-var defaultBillingFormState=useMemo(function(){return _extends({},initialBillingFormState,{country:userCountry,region:userRegion},pickBy(billingAddress||{},identity));},[billingAddress,userCountry,userRegion]);var billingConstraints=useMemo(function(){return generateBillingConstraints(orderReserveOnly);},[orderReserveOnly]);var handleBillingFormSubmit=useCallback(function(){setIsBillingFormSubmitted(true);},[setIsBillingFormSubmitted]);var billingFormState=useFormState(defaultBillingFormState,handleBillingFormSubmit,billingConstraints,formContainerRef);// ===== shipping form =====
-var defaultShippingFormState=useMemo(function(){return _extends({},initialShippingFormState,{country:userCountry,region:userRegion},!billingShippingEquals?pickBy(shippingAddress||{},identity):{});},[billingShippingEquals,shippingAddress,userCountry,userRegion]);var shippingConstraints=useMemo(function(){return isShippingFormVisible?generateShippingConstraints():{};},[isShippingFormVisible]);var handleShippingFormSubmit=useCallback(function(){setIsShippingFormSubmitted(true);},[setIsShippingFormSubmitted]);var shippingFormState=useFormState(defaultShippingFormState,handleShippingFormSubmit,shippingConstraints,formContainerRef);// ===== pickup contact form =====
-var defaultPickupFormState=useMemo(function(){return _extends({},initialPickupFormState,{},!billingPickupEquals?pickBy(pickupAddress||{},identity):{},{pickupPerson:billingPickupEquals?'me':'someoneElse'});},[billingPickupEquals,pickupAddress]);var handlePickupFormSubmit=useCallback(function(){setIsPickupFormSubmitted(true);},[]);var pickupFormState=useFormState(defaultPickupFormState,handlePickupFormSubmit,pickupConstraints,formContainerRef);useEffect(function(){setPickupConstraints(pickupFormState.values.pickupPerson==='me'?generateSelfPickupConstraints():generatePickupConstraints());},[pickupFormState.values.pickupPerson]);// ===== extra form =====
-var defaultExtraFormState=useMemo(function(){return _extends({},initialOptInFormState,{},extractDefaultValues((customer===null||customer===void 0?void 0:customer.attributes)||[]));},[customer]);var extraConstraints=useMemo(function(){return generateExtraConstraints(customerAttributes);},[customerAttributes]);var handleExtraFormSubmit=useCallback(function(){setIsExtraFormSubmitted(true);},[]);var extraFormState=useFormState(defaultExtraFormState,handleExtraFormSubmit,extraConstraints,formContainerRef);var handleSubmit=useCallback(function(){billingFormState.handleSubmit();shippingFormState.handleSubmit();pickupFormState.handleSubmit();extraFormState.handleSubmit();},[billingFormState,extraFormState,pickupFormState,shippingFormState]);useEffect(function(){if(!isBillingFormSubmitted||!isShippingFormSubmitted||!isPickupFormSubmitted||!isExtraFormSubmitted){return;}// Break the process when one of the forms has validation errors from the constraints
-if(!billingFormState.valid||!shippingFormState.valid||!pickupFormState.valid||!extraFormState.valid){setIsBillingFormSubmitted(false);setIsShippingFormSubmitted(false);setIsPickupFormSubmitted(false);setIsExtraFormSubmitted(false);}/** Async wrapper for submit registration */var fn=/*#__PURE__*/function(){var _ref3=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(){var response,_ref4,errors;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setIsLocked(true);_context2.prev=1;_context2.next=4;return submitGuestRegistration(_extends({billingFormData:billingFormState.values},isShippingFormVisible?{shippingFormData:shippingFormState.values}:{},{},isPickupContactSelectionEnabled?{pickupFormData:pickupFormState.values}:{},{extraFormData:extraFormState.values,processShipping:isShippingAddressSelectionEnabled}));case 4:response=_context2.sent;_context2.next=11;break;case 7:_context2.prev=7;_context2.t0=_context2["catch"](1);setIsLocked(false);return _context2.abrupt("return");case 11:_ref4=response||{},errors=_ref4.errors;if(errors){_context2.next=17;break;}setIsLocked(false);LoadingProvider.setLoading(GUEST_CHECKOUT_PAYMENT_PATTERN);if(guestRegistrationEditMode){historyPop();}else{historyPush({pathname:GUEST_CHECKOUT_PAYMENT_PATTERN});}return _context2.abrupt("return");case 17:// Updated the request validation errors
-setBillingFormRequestErrors((errors===null||errors===void 0?void 0:errors.billingFormData)||null);setShippingFormRequestErrors((errors===null||errors===void 0?void 0:errors.shippingFormData)||null);setPickupFormRequestErrors((errors===null||errors===void 0?void 0:errors.pickupFormData)||null);setExtraFormRequestErrors((errors===null||errors===void 0?void 0:errors.extraFormData)||null);// Release forms for additional submits
-setIsBillingFormSubmitted(false);setIsShippingFormSubmitted(false);setIsPickupFormSubmitted(false);setIsExtraFormSubmitted(false);setIsLocked(false);case 26:case"end":return _context2.stop();}},_callee2,null,[[1,7]]);}));return function fn(){return _ref3.apply(this,arguments);};}();fn();/* eslint-disable react-hooks/exhaustive-deps */},[isBillingFormSubmitted,isShippingFormSubmitted,isPickupFormSubmitted,isExtraFormSubmitted]);/* eslint-enable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */useEffect(function(){billingFormState.scrollToError();},[billingFormRequestErrors,shippingFormRequestErrors,pickupFormRequestErrors,billingFormState.scrollToError]);/* eslint-enable react-hooks/exhaustive-deps */useEffect(function(){if(isLocked){LoadingProvider.setLoading(GUEST_CHECKOUT_PATTERN);return;}LoadingProvider.unsetLoading(GUEST_CHECKOUT_PATTERN);},[isLocked]);useEffect(function(){var timer=setTimeout(function(){if(!guestRegistrationEditMode){return;}var scrollToElement;if(guestRegistrationEditMode===ADDRESS_TYPE_SHIPPING){if(isShippingFormVisible){scrollToElement=ELEMENT_ID_SHIPPING_CONTACT;}else{scrollToElement=ELEMENT_ID_SHIPPING_CONTACT_TOGGLE;}}else if(guestRegistrationEditMode===ADDRESS_TYPE_PICKUP){scrollToElement=ELEMENT_ID_PICKUP_CONTACT;}if(scrollToElement){scrollTo("#".concat(scrollToElement));}},500);return function(){return clearTimeout(timer);};/* eslint-disable react-hooks/exhaustive-deps */},[]);/* eslint-enable react-hooks/exhaustive-deps */var value=useMemo(function(){return{isShippingFormEnabled:isShippingFormEnabled,isShippingFormVisible:isShippingFormVisible,setIsShippingFormVisible:setIsShippingFormVisible,orderReserveOnly:orderReserveOnly,orderNeedsPayment:orderNeedsPayment,guestRegistrationEditMode:guestRegistrationEditMode,defaultBillingFormState:defaultBillingFormState,updateBillingForm:billingFormState.setValues,defaultShippingFormState:defaultShippingFormState,updateShippingForm:shippingFormState.setValues,defaultPickupFormState:defaultPickupFormState,updatePickupForm:pickupFormState.setValues,defaultExtraFormState:defaultExtraFormState,updateExtraForm:extraFormState.setValues,billingFormValidationErrors:convertValidationErrors(billingFormState.validationErrors||billingFormRequestErrors||{}),shippingFormValidationErrors:convertValidationErrors(shippingFormState.validationErrors||shippingFormRequestErrors||{}),pickupFormValidationErrors:convertValidationErrors(pickupFormState.validationErrors||pickupFormRequestErrors||{}),extraFormValidationErrors:convertValidationErrors(extraFormState.validationErrors||extraFormRequestErrors||{}),isShippingAddressSelectionEnabled:isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled:isPickupContactSelectionEnabled,customerAttributes:customerAttributes,numberOfAddressLines:numberOfAddressLines,userLocation:userLocation,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,isLocked:isLocked,handleSubmit:handleSubmit,/**
-       * Handling of registrationMode "simple" is not implemented for checkout. But since
-       * the guest registration is actually an order update and not a real registration, we
-       * hardcode the registration mode here, since the provider value will be used inside
-       * the shared form components.
-       */registrationMode:SHOP_SETTING_REGISTRATION_MODE_EXTENDED,isBillingAddressSelectionEnabled:true};},[isShippingFormEnabled,isShippingFormVisible,defaultBillingFormState,billingFormState.setValues,billingFormState.validationErrors,defaultShippingFormState,shippingFormState.setValues,shippingFormState.validationErrors,defaultExtraFormState,extraFormState.setValues,extraFormState.validationErrors,extraFormRequestErrors,defaultPickupFormState,pickupFormState.setValues,pickupFormState.validationErrors,billingFormRequestErrors,shippingFormRequestErrors,pickupFormRequestErrors,orderReserveOnly,orderNeedsPayment,guestRegistrationEditMode,isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled,customerAttributes,numberOfAddressLines,userLocation,shopSettings.supportedCountries,shopSettings.countrySortOrder,isLocked,handleSubmit]);if(!isDataReady||!isInitialized){return null;}return React.createElement(Context.Provider,{value:value},children);};GuestRegistrationProvider.defaultProps={children:null,customer:null,formContainerRef:null,billingAddress:null,shippingAddress:null,pickupAddress:null,billingPickupEquals:true,billingShippingEquals:true,cartHasDirectShipItems:false,orderReserveOnly:false,orderNeedsPayment:false,numberOfAddressLines:null,isShippingAddressSelectionEnabled:false,isPickupContactSelectionEnabled:false};export default connect(GuestRegistrationProvider);
+ */
+const GuestRegistrationProvider = ({
+  children,
+  formContainerRef,
+  isDataReady,
+  userLocation,
+  customerAttributes,
+  billingAddress,
+  shippingAddress,
+  pickupAddress,
+  customer,
+  billingPickupEquals,
+  billingShippingEquals,
+  numberOfAddressLines,
+  cartHasDirectShipItems,
+  orderReserveOnly,
+  orderNeedsPayment,
+  isShippingAddressSelectionEnabled,
+  isPickupContactSelectionEnabled,
+  shopSettings,
+  submitGuestRegistration,
+  prepareCheckout,
+  isLastStackEntry,
+  historyPop,
+  historyPush
+}) => {
+  const {
+    scrollTo
+  } = useScrollTo(formContainerRef);
+  const isShippingFormEnabled = useMemo(() => cartHasDirectShipItems, [cartHasDirectShipItems]);
+  const getIsShippingFormVisible = useCallback(() => isShippingFormEnabled && !!shippingAddress && !billingShippingEquals, [billingShippingEquals, isShippingFormEnabled, shippingAddress]);
+  const [isLocked, setIsLocked] = useState(false);
+  const [isBillingFormSubmitted, setIsBillingFormSubmitted] = useState(false);
+  const [isShippingFormSubmitted, setIsShippingFormSubmitted] = useState(false);
+  const [isExtraFormSubmitted, setIsExtraFormSubmitted] = useState(false);
+  const [isPickupFormSubmitted, setIsPickupFormSubmitted] = useState(false);
+  const [billingFormRequestErrors, setBillingFormRequestErrors] = useState(null);
+  const [shippingFormRequestErrors, setShippingFormRequestErrors] = useState(null);
+  const [pickupFormRequestErrors, setPickupFormRequestErrors] = useState(null);
+  const [extraFormRequestErrors, setExtraFormRequestErrors] = useState(null);
+  const [isShippingFormVisible, setIsShippingFormVisible] = useState(getIsShippingFormVisible());
+  const [pickupConstraints, setPickupConstraints] = useState(generateSelfPickupConstraints());
+  const {
+    query: {
+      edit: guestRegistrationEditMode = null
+    }
+  } = useRoute();
+
+  // Initialize checkout process.
+  const [isInitialized] = useAsyncMemo(async () => {
+    if (guestRegistrationEditMode) {
+      return true;
+    }
+    try {
+      setIsLocked(true);
+      await prepareCheckout({
+        initializePayment: false,
+        initializeOrder: !!isLastStackEntry
+      });
+      setIsLocked(false);
+      return true;
+    } catch (error) {
+      setIsLocked(false);
+      return false;
+    }
+  }, [], false);
+  useEffect(() => {
+    setIsShippingFormVisible(getIsShippingFormVisible());
+  }, [getIsShippingFormVisible, setIsShippingFormVisible]);
+
+  // Determine values to prefill some form fields
+  const userCountry = useMemo(() => userLocation?.country || appConfig?.marketId || null, [userLocation]);
+  const userRegion = useMemo(() => userLocation?.region || null, [userLocation]);
+
+  // ===== billing form =====
+  const defaultBillingFormState = useMemo(() => ({
+    ...initialBillingFormState,
+    country: userCountry,
+    region: userRegion,
+    ...pickBy(billingAddress || {}, identity)
+  }), [billingAddress, userCountry, userRegion]);
+  const billingConstraints = useMemo(() => generateBillingConstraints(orderReserveOnly), [orderReserveOnly]);
+  const handleBillingFormSubmit = useCallback(() => {
+    setIsBillingFormSubmitted(true);
+  }, [setIsBillingFormSubmitted]);
+  const billingFormState = useFormState(defaultBillingFormState, handleBillingFormSubmit, billingConstraints, formContainerRef);
+
+  // ===== shipping form =====
+  const defaultShippingFormState = useMemo(() => ({
+    ...initialShippingFormState,
+    country: userCountry,
+    region: userRegion,
+    ...(!billingShippingEquals ? pickBy(shippingAddress || {}, identity) : {})
+  }), [billingShippingEquals, shippingAddress, userCountry, userRegion]);
+  const shippingConstraints = useMemo(() => isShippingFormVisible ? generateShippingConstraints() : {}, [isShippingFormVisible]);
+  const handleShippingFormSubmit = useCallback(() => {
+    setIsShippingFormSubmitted(true);
+  }, [setIsShippingFormSubmitted]);
+  const shippingFormState = useFormState(defaultShippingFormState, handleShippingFormSubmit, shippingConstraints, formContainerRef);
+
+  // ===== pickup contact form =====
+  const defaultPickupFormState = useMemo(() => ({
+    ...initialPickupFormState,
+    ...(!billingPickupEquals ? pickBy(pickupAddress || {}, identity) : {}),
+    pickupPerson: billingPickupEquals ? 'me' : 'someoneElse'
+  }), [billingPickupEquals, pickupAddress]);
+  const handlePickupFormSubmit = useCallback(() => {
+    setIsPickupFormSubmitted(true);
+  }, []);
+  const pickupFormState = useFormState(defaultPickupFormState, handlePickupFormSubmit, pickupConstraints, formContainerRef);
+  useEffect(() => {
+    setPickupConstraints(pickupFormState.values.pickupPerson === 'me' ? generateSelfPickupConstraints() : generatePickupConstraints());
+  }, [pickupFormState.values.pickupPerson]);
+
+  // ===== extra form =====
+  const defaultExtraFormState = useMemo(() => ({
+    ...initialOptInFormState,
+    ...extractDefaultValues(customer?.attributes || [])
+  }), [customer]);
+  const extraConstraints = useMemo(() => generateExtraConstraints(customerAttributes), [customerAttributes]);
+  const handleExtraFormSubmit = useCallback(() => {
+    setIsExtraFormSubmitted(true);
+  }, []);
+  const extraFormState = useFormState(defaultExtraFormState, handleExtraFormSubmit, extraConstraints, formContainerRef);
+  const handleSubmit = useCallback(() => {
+    billingFormState.handleSubmit();
+    shippingFormState.handleSubmit();
+    pickupFormState.handleSubmit();
+    extraFormState.handleSubmit();
+  }, [billingFormState, extraFormState, pickupFormState, shippingFormState]);
+  useEffect(() => {
+    if (!isBillingFormSubmitted || !isShippingFormSubmitted || !isPickupFormSubmitted || !isExtraFormSubmitted) {
+      return;
+    }
+
+    // Break the process when one of the forms has validation errors from the constraints
+    if (!billingFormState.valid || !shippingFormState.valid || !pickupFormState.valid || !extraFormState.valid) {
+      setIsBillingFormSubmitted(false);
+      setIsShippingFormSubmitted(false);
+      setIsPickupFormSubmitted(false);
+      setIsExtraFormSubmitted(false);
+    }
+
+    /** Async wrapper for submit registration */
+    const fn = async () => {
+      setIsLocked(true);
+      let response;
+      try {
+        response = await submitGuestRegistration({
+          billingFormData: billingFormState.values,
+          ...(isShippingFormVisible ? {
+            shippingFormData: shippingFormState.values
+          } : {}),
+          ...(isPickupContactSelectionEnabled ? {
+            pickupFormData: pickupFormState.values
+          } : {}),
+          extraFormData: extraFormState.values,
+          processShipping: isShippingAddressSelectionEnabled
+        });
+      } catch (e) {
+        setIsLocked(false);
+        return;
+      }
+      const {
+        errors
+      } = response || {};
+      if (!errors) {
+        setIsLocked(false);
+        LoadingProvider.setLoading(GUEST_CHECKOUT_PAYMENT_PATTERN);
+        if (guestRegistrationEditMode) {
+          historyPop();
+        } else {
+          historyPush({
+            pathname: GUEST_CHECKOUT_PAYMENT_PATTERN
+          });
+        }
+        return;
+      }
+
+      // Updated the request validation errors
+      setBillingFormRequestErrors(errors?.billingFormData || null);
+      setShippingFormRequestErrors(errors?.shippingFormData || null);
+      setPickupFormRequestErrors(errors?.pickupFormData || null);
+      setExtraFormRequestErrors(errors?.extraFormData || null);
+
+      // Release forms for additional submits
+      setIsBillingFormSubmitted(false);
+      setIsShippingFormSubmitted(false);
+      setIsPickupFormSubmitted(false);
+      setIsExtraFormSubmitted(false);
+      setIsLocked(false);
+    };
+    fn();
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, [isBillingFormSubmitted, isShippingFormSubmitted, isPickupFormSubmitted, isExtraFormSubmitted]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    billingFormState.scrollToError();
+  }, [billingFormRequestErrors, shippingFormRequestErrors, pickupFormRequestErrors, billingFormState.scrollToError]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  useEffect(() => {
+    if (isLocked) {
+      LoadingProvider.setLoading(GUEST_CHECKOUT_PATTERN);
+      return;
+    }
+    LoadingProvider.unsetLoading(GUEST_CHECKOUT_PATTERN);
+  }, [isLocked]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (!guestRegistrationEditMode) {
+        return;
+      }
+      let scrollToElement;
+      if (guestRegistrationEditMode === ADDRESS_TYPE_SHIPPING) {
+        if (isShippingFormVisible) {
+          scrollToElement = ELEMENT_ID_SHIPPING_CONTACT;
+        } else {
+          scrollToElement = ELEMENT_ID_SHIPPING_CONTACT_TOGGLE;
+        }
+      } else if (guestRegistrationEditMode === ADDRESS_TYPE_PICKUP) {
+        scrollToElement = ELEMENT_ID_PICKUP_CONTACT;
+      }
+      if (scrollToElement) {
+        scrollTo(`#${scrollToElement}`);
+      }
+    }, 500);
+    return () => clearTimeout(timer);
+    /* eslint-disable react-hooks/exhaustive-deps */
+  }, []);
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const value = useMemo(() => ({
+    isShippingFormEnabled,
+    isShippingFormVisible,
+    setIsShippingFormVisible,
+    orderReserveOnly,
+    orderNeedsPayment,
+    guestRegistrationEditMode,
+    defaultBillingFormState,
+    updateBillingForm: billingFormState.setValues,
+    defaultShippingFormState,
+    updateShippingForm: shippingFormState.setValues,
+    defaultPickupFormState,
+    updatePickupForm: pickupFormState.setValues,
+    defaultExtraFormState,
+    updateExtraForm: extraFormState.setValues,
+    billingFormValidationErrors: convertValidationErrors(billingFormState.validationErrors || billingFormRequestErrors || {}),
+    shippingFormValidationErrors: convertValidationErrors(shippingFormState.validationErrors || shippingFormRequestErrors || {}),
+    pickupFormValidationErrors: convertValidationErrors(pickupFormState.validationErrors || pickupFormRequestErrors || {}),
+    extraFormValidationErrors: convertValidationErrors(extraFormState.validationErrors || extraFormRequestErrors || {}),
+    isShippingAddressSelectionEnabled,
+    isPickupContactSelectionEnabled,
+    customerAttributes,
+    numberOfAddressLines,
+    userLocation,
+    supportedCountries: shopSettings.supportedCountries,
+    countrySortOrder: shopSettings.countrySortOrder,
+    isLocked,
+    handleSubmit,
+    /**
+     * Handling of registrationMode "simple" is not implemented for checkout. But since
+     * the guest registration is actually an order update and not a real registration, we
+     * hardcode the registration mode here, since the provider value will be used inside
+     * the shared form components.
+     */
+    registrationMode: SHOP_SETTING_REGISTRATION_MODE_EXTENDED,
+    isBillingAddressSelectionEnabled: true
+  }), [isShippingFormEnabled, isShippingFormVisible, defaultBillingFormState, billingFormState.setValues, billingFormState.validationErrors, defaultShippingFormState, shippingFormState.setValues, shippingFormState.validationErrors, defaultExtraFormState, extraFormState.setValues, extraFormState.validationErrors, extraFormRequestErrors, defaultPickupFormState, pickupFormState.setValues, pickupFormState.validationErrors, billingFormRequestErrors, shippingFormRequestErrors, pickupFormRequestErrors, orderReserveOnly, orderNeedsPayment, guestRegistrationEditMode, isShippingAddressSelectionEnabled, isPickupContactSelectionEnabled, customerAttributes, numberOfAddressLines, userLocation, shopSettings.supportedCountries, shopSettings.countrySortOrder, isLocked, handleSubmit]);
+  if (!isDataReady || !isInitialized) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, children);
+};
+GuestRegistrationProvider.defaultProps = {
+  children: null,
+  customer: null,
+  formContainerRef: null,
+  billingAddress: null,
+  shippingAddress: null,
+  pickupAddress: null,
+  billingPickupEquals: true,
+  billingShippingEquals: true,
+  cartHasDirectShipItems: false,
+  orderReserveOnly: false,
+  orderNeedsPayment: false,
+  numberOfAddressLines: null,
+  isShippingAddressSelectionEnabled: false,
+  isPickupContactSelectionEnabled: false
+};
+export default connect(GuestRegistrationProvider);

package/registration/providers/RegistrationProvider.actions.js

@@ -1,8 +1,110 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";var _excluded=["marketingOptIn"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import{EVALIDATION,getRegistrationMode,SHOP_SETTING_REGISTRATION_MODE_SIMPLE}from'@shopgate/engage/core';import{extractAttributes,convertPipelineValidationErrors}from'@shopgate/engage/account/helper/form';import{getMerchantCustomerAttributes}from'@shopgate/engage/core/selectors/merchantSettings';import{submitRegistration as submit}from"../actions";/**
+import { EVALIDATION, getRegistrationMode, SHOP_SETTING_REGISTRATION_MODE_SIMPLE } from '@shopgate/engage/core';
+import { extractAttributes, convertPipelineValidationErrors } from '@shopgate/engage/account/helper/form';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { submitRegistration as submit } from "../actions";
+
+/**
  * Submits registration form data.
  * @param {Object} baseFormData Data from the base form
  * @param {Object} shippingFormData Data from the shipping form
  * @param {Object} additionalData Additional data for the request.
  * @returns {Function}
- */export var submitRegistration=function submitRegistration(_ref){var baseFormData=_ref.baseFormData,billingFormData=_ref.billingFormData,shippingFormData=_ref.shippingFormData,additionalFormData=_ref.additionalFormData;return(/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(dispatch,getState){var customerAttributes,registrationMode,marketingOptIn,attributeData,attributes,emailAddress,password,firstName,lastName,customer,errors,code,validationErrors,converted,_converted$validation3,_converted$validation4,_converted$validation5,_converted$validation6,_converted$validation7,_converted$validation2,errEmailAddress,errPassword,billing,shipping,extra;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:customerAttributes=getMerchantCustomerAttributes(getState());registrationMode=getRegistrationMode(getState());marketingOptIn=additionalFormData.marketingOptIn,attributeData=_objectWithoutProperties(additionalFormData,_excluded);attributes=extractAttributes(customerAttributes,attributeData);emailAddress=baseFormData.emailAddress,password=baseFormData.password;if(registrationMode===SHOP_SETTING_REGISTRATION_MODE_SIMPLE){firstName=baseFormData.firstName;lastName=baseFormData.lastName;}else{firstName=billingFormData.firstName;lastName=billingFormData.lastName;}customer={firstName:firstName,lastName:lastName,emailAddress:emailAddress,password:password,attributes:attributes,settings:{marketingOptIn:marketingOptIn}};if(registrationMode!==SHOP_SETTING_REGISTRATION_MODE_SIMPLE){// No contacts creation at "simple" registration mode
-customer.contacts=[_extends({},billingFormData,{emailAddress:emailAddress,isDefaultBilling:true,isDefaultShipping:!shippingFormData})].concat(shippingFormData?[_extends({},shippingFormData,{emailAddress:emailAddress,isDefaultBilling:false,isDefaultShipping:true})]:[]);}_context.prev=8;_context.next=11;return dispatch(submit(customer));case 11:_context.next=18;break;case 13:_context.prev=13;_context.t0=_context["catch"](8);code=_context.t0.code;validationErrors=_context.t0.errors;if(code===EVALIDATION){errors=validationErrors;}case 18:converted=convertPipelineValidationErrors(errors,attributes);if(!((converted===null||converted===void 0?void 0:converted.validation)&&Object.keys(converted.validation).length>0)){_context.next=25;break;}_converted$validation2=converted.validation,errEmailAddress=_converted$validation2.emailAddress,errPassword=_converted$validation2.password;billing=(converted===null||converted===void 0?void 0:(_converted$validation3=converted.validation)===null||_converted$validation3===void 0?void 0:(_converted$validation4=_converted$validation3.contacts)===null||_converted$validation4===void 0?void 0:_converted$validation4['0'])||{};shipping=(converted===null||converted===void 0?void 0:(_converted$validation5=converted.validation)===null||_converted$validation5===void 0?void 0:(_converted$validation6=_converted$validation5.contacts)===null||_converted$validation6===void 0?void 0:_converted$validation6['1'])||{};extra=(converted===null||converted===void 0?void 0:(_converted$validation7=converted.validation)===null||_converted$validation7===void 0?void 0:_converted$validation7.attributes)||{};return _context.abrupt("return",{errors:{baseFormData:_extends({},errEmailAddress?{emailAddress:errEmailAddress}:{},{},errPassword?{password:errPassword}:{}),billingFormData:_extends({},billing),shippingFormData:_extends({},shipping),extraFormData:_extends({},extra)}});case 25:return _context.abrupt("return",null);case 26:case"end":return _context.stop();}},_callee,null,[[8,13]]);}));return function(_x,_x2){return _ref2.apply(this,arguments);};}());};
+ */
+export const submitRegistration = ({
+  baseFormData,
+  billingFormData,
+  shippingFormData,
+  additionalFormData
+}) => async (dispatch, getState) => {
+  const customerAttributes = getMerchantCustomerAttributes(getState());
+  const registrationMode = getRegistrationMode(getState());
+  const {
+    marketingOptIn,
+    ...attributeData
+  } = additionalFormData;
+  const attributes = extractAttributes(customerAttributes, attributeData);
+  const {
+    emailAddress,
+    password
+  } = baseFormData;
+  let firstName;
+  let lastName;
+  if (registrationMode === SHOP_SETTING_REGISTRATION_MODE_SIMPLE) {
+    ({
+      firstName,
+      lastName
+    } = baseFormData);
+  } else {
+    ({
+      firstName,
+      lastName
+    } = billingFormData);
+  }
+  const customer = {
+    firstName,
+    lastName,
+    emailAddress,
+    password,
+    attributes,
+    settings: {
+      marketingOptIn
+    }
+  };
+  if (registrationMode !== SHOP_SETTING_REGISTRATION_MODE_SIMPLE) {
+    // No contacts creation at "simple" registration mode
+    customer.contacts = [{
+      ...billingFormData,
+      emailAddress,
+      isDefaultBilling: true,
+      isDefaultShipping: !shippingFormData
+    }, ...(shippingFormData ? [{
+      ...shippingFormData,
+      emailAddress,
+      isDefaultBilling: false,
+      isDefaultShipping: true
+    }] : [])];
+  }
+  let errors;
+  try {
+    await dispatch(submit(customer));
+  } catch ({
+    code,
+    errors: validationErrors
+  }) {
+    if (code === EVALIDATION) {
+      errors = validationErrors;
+    }
+  }
+  const converted = convertPipelineValidationErrors(errors, attributes);
+  if (converted?.validation && Object.keys(converted.validation).length > 0) {
+    const {
+      emailAddress: errEmailAddress,
+      password: errPassword
+    } = converted.validation;
+    const billing = converted?.validation?.contacts?.['0'] || {};
+    const shipping = converted?.validation?.contacts?.['1'] || {};
+    const extra = converted?.validation?.attributes || {};
+    return {
+      errors: {
+        baseFormData: {
+          ...(errEmailAddress ? {
+            emailAddress: errEmailAddress
+          } : {}),
+          ...(errPassword ? {
+            password: errPassword
+          } : {})
+        },
+        billingFormData: {
+          ...billing
+        },
+        shippingFormData: {
+          ...shipping
+        },
+        extraFormData: {
+          ...extra
+        }
+      }
+    };
+  }
+  return null;
+};

package/registration/providers/RegistrationProvider.connector.js

@@ -1,6 +1,30 @@
-import{connect}from'react-redux';import{getShopSettings,getConfigFetching}from'@shopgate/engage/core/config';import{getNumberOfAddressLines,getRegistrationMode}from'@shopgate/engage/core';import{hasDirectShipItems}from'@shopgate/engage/cart';import{getPreferredLocationAddress}from'@shopgate/engage/locations/selectors';import{getMerchantCustomerAttributes}from'@shopgate/engage/core/selectors/merchantSettings';import{submitRegistration}from"./RegistrationProvider.actions";/**
+import { connect } from 'react-redux';
+import { getShopSettings, getConfigFetching } from '@shopgate/engage/core/config';
+import { getNumberOfAddressLines, getRegistrationMode } from '@shopgate/engage/core';
+import { hasDirectShipItems } from '@shopgate/engage/cart';
+import { getPreferredLocationAddress } from '@shopgate/engage/locations/selectors';
+import { getMerchantCustomerAttributes } from '@shopgate/engage/core/selectors/merchantSettings';
+import { submitRegistration } from "./RegistrationProvider.actions";
+
+/**
  * @returns {Function}
- */function makeMapStateToProps(){/**
+ */
+function makeMapStateToProps() {
+  /**
    * @param {Object} state The application state.
    * @returns {Object}
-   */return function(state){return{isDataReady:!getConfigFetching(state),shopSettings:getShopSettings(state),userLocation:getPreferredLocationAddress(state),customerAttributes:getMerchantCustomerAttributes(state),cartHasDirectShipItems:hasDirectShipItems(state),numberOfAddressLines:getNumberOfAddressLines(state),registrationMode:getRegistrationMode(state)};};}var mapDispatchToProps={submitRegistration:submitRegistration};export default connect(makeMapStateToProps,mapDispatchToProps);
+   */
+  return state => ({
+    isDataReady: !getConfigFetching(state),
+    shopSettings: getShopSettings(state),
+    userLocation: getPreferredLocationAddress(state),
+    customerAttributes: getMerchantCustomerAttributes(state),
+    cartHasDirectShipItems: hasDirectShipItems(state),
+    numberOfAddressLines: getNumberOfAddressLines(state),
+    registrationMode: getRegistrationMode(state)
+  });
+}
+const mapDispatchToProps = {
+  submitRegistration
+};
+export default connect(makeMapStateToProps, mapDispatchToProps);