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

package/checkout/providers/CheckoutProvider.js

@@ -1,28 +1,460 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}/* eslint-disable no-unused-expressions */import React,{useCallback}from'react';import{isAvailable,InAppBrowser,Linking}from'@shopgate/native-modules';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{i18n,useAsyncMemo,getUserAgent,LoadingProvider}from'@shopgate/engage/core';import{MARKETING_OPT_IN_DEFAULT}from'@shopgate/engage/registration/constants';import Context from"./CheckoutProvider.context";import connect from"./CheckoutProvider.connector";import{pickupConstraints,selfPickupConstraints}from"./CheckoutProvider.constraints";import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants/routes";var defaultPickupPersonState={pickupPerson:'me',firstName:'',lastName:'',mobile:'',email:'',firstName2:'',lastName2:'',mobile2:'',email2:''};/**
+import "core-js/modules/web.url-search-params.js";
+/* eslint-disable no-unused-expressions */
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { isAvailable, InAppBrowser, Linking } from '@shopgate/native-modules';
+import { useFormState } from '@shopgate/engage/core/hooks/useFormState';
+import { i18n, useAsyncMemo, getUserAgent, LoadingProvider } from '@shopgate/engage/core';
+import { MARKETING_OPT_IN_DEFAULT } from '@shopgate/engage/registration/constants';
+import PropTypes from 'prop-types';
+import Context from "./CheckoutProvider.context";
+import connect from "./CheckoutProvider.connector";
+import { pickupConstraints, selfPickupConstraints } from "./CheckoutProvider.constraints";
+import { CHECKOUT_CONFIRMATION_PATTERN } from "../constants/routes";
+
+/* eslint-disable max-len */
+/**
+ * Props for the CheckoutProvider component.
+ * @typedef {Object} CheckoutProviderProps
+ * @property {boolean} [orderInitialized=false] - Indicates if the order is initialized.
+ * @property {boolean} [orderReadOnly=false] - Indicates if the order is read-only.
+ * @property {string} pathPattern - The path pattern for the checkout.
+ * @property {React.ReactNode} children - The child components.
+ * @property {Object} shopSettings - The shop settings.
+ * @property {Array} paymentTransactions - The payment transactions.
+ * @property {Object} billingAddress - The billing address.
+ * @property {Object} shippingAddress - The shipping address.
+ * @property {Object} fulfillmentSlot - The fulfillment slot.
+ * @property {Object} pickupAddress - The pickup address.
+ * @property {Array} taxLines - The tax lines.
+ * @property {Object} userLocation - The user location.
+ * @property {boolean} isDataReady - Indicates if the data is ready.
+ * @property {boolean} [orderReserveOnly=false] - Indicates if the order is reserve-only.
+ * @property {boolean} [isShippingAddressSelectionEnabled=false] - Indicates if shipping address selection is enabled.
+ * @property {boolean} [isPickupContactSelectionEnabled=false] - Indicates if pickup contact selection is enabled.
+ * @property {boolean} [isGuestCheckout=false] - Indicates if guest checkout is enabled.
+ * @property {Object} campaignAttribution - The campaign attribution data.
+ * @property {Object} order - The checkout order.
+ * @property {Function} fetchCart - Function to fetch the cart.
+ * @property {Function} prepareCheckout - Function to prepare the checkout.
+ * @property {Function} fetchCheckoutOrder - Function to fetch the checkout order.
+ * @property {Function} updateCheckoutOrder - Function to update the checkout order.
+ * @property {Function} submitCheckoutOrder - Function to submit the checkout order.
+ * @property {Function} historyReplace - Function to replace the history.
+ * @property {Function} showModal - Function to show a modal.
+ * @property {Function} clearCheckoutCampaign - Function to clear the checkout campaign.
+ */
+/* eslint-enable max-len */
+
+const defaultPickupPersonState = {
+  pickupPerson: 'me',
+  firstName: '',
+  lastName: '',
+  mobile: '',
+  email: '',
+  firstName2: '',
+  lastName2: '',
+  mobile2: '',
+  email2: ''
+};
+
+/**
  * Converts validation errors into errors for form builder.
  * @param {Object} validationErrors The validation errors.
  * @returns {Array}
- */var convertValidationErrors=function convertValidationErrors(validationErrors){return Object.keys(validationErrors).map(function(key){return{path:key,message:i18n.text(validationErrors[key])};});};var initialOptInFormState={marketingOptIn:MARKETING_OPT_IN_DEFAULT};/**
+ */
+const convertValidationErrors = validationErrors => Object.keys(validationErrors).map(key => ({
+  path: key,
+  message: i18n.text(validationErrors[key])
+}));
+const initialOptInFormState = {
+  marketingOptIn: MARKETING_OPT_IN_DEFAULT
+};
+
+/**
  * Checkout Provider
- * @returns {JSX}
- */var CheckoutProvider=function CheckoutProvider(_ref){var pathPattern=_ref.pathPattern,orderInitialized=_ref.orderInitialized,orderReadOnly=_ref.orderReadOnly,historyReplace=_ref.historyReplace,prepareCheckout=_ref.prepareCheckout,fetchCheckoutOrder=_ref.fetchCheckoutOrder,updateCheckoutOrder=_ref.updateCheckoutOrder,submitCheckoutOrder=_ref.submitCheckoutOrder,showModal=_ref.showModal,children=_ref.children,shopSettings=_ref.shopSettings,billingAddress=_ref.billingAddress,shippingAddress=_ref.shippingAddress,pickupAddress=_ref.pickupAddress,paymentTransactions=_ref.paymentTransactions,fetchCart=_ref.fetchCart,taxLines=_ref.taxLines,userLocation=_ref.userLocation,isDataReady=_ref.isDataReady,fulfillmentSlot=_ref.fulfillmentSlot,orderReserveOnly=_ref.orderReserveOnly,isShippingAddressSelectionEnabled=_ref.isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled=_ref.isPickupContactSelectionEnabled,isGuestCheckout=_ref.isGuestCheckout,campaignAttribution=_ref.campaignAttribution,clearCheckoutCampaign=_ref.clearCheckoutCampaign,checkoutOrder=_ref.order;var _React$useState=React.useState(null),_React$useState2=_slicedToArray(_React$useState,2),paymentButton=_React$useState2[0],setPaymentButton=_React$useState2[1];var paymentHandlerRef=React.useRef(null);var _React$useState3=React.useState(null),_React$useState4=_slicedToArray(_React$useState3,2),paymentData=_React$useState4[0],setPaymentData=_React$useState4[1];var _React$useState5=React.useState(true),_React$useState6=_slicedToArray(_React$useState5,2),isLocked=_React$useState6[0],setLocked=_React$useState6[1];var _React$useState7=React.useState(true),_React$useState8=_slicedToArray(_React$useState7,2),isButtonLocked=_React$useState8[0],setButtonLocked=_React$useState8[1];var _React$useState9=React.useState(true),_React$useState10=_slicedToArray(_React$useState9,2),isLoading=_React$useState10[0],setLoading=_React$useState10[1];var _React$useState11=React.useState(selfPickupConstraints),_React$useState12=_slicedToArray(_React$useState11,2),validationRules=_React$useState12[0],setValidationRules=_React$useState12[1];var _React$useState13=React.useState(false),_React$useState14=_slicedToArray(_React$useState13,2),updateOptIns=_React$useState14[0],_setUpdateOptIns=_React$useState14[1];var defaultOptInFormState=_extends({},initialOptInFormState);var optInFormState=useFormState(defaultOptInFormState,function(){});// Initialize checkout process.
-var _useAsyncMemo=useAsyncMemo(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){var _ref4,needsPaymentCheckout,success;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.prev=0;_context.next=3;return prepareCheckout({initializeOrder:!orderInitialized});case 3:_ref4=_context.sent;needsPaymentCheckout=_ref4.needsPayment;success=_ref4.success;setLocked(false);return _context.abrupt("return",{isCheckoutInitialized:success,needsPayment:needsPaymentCheckout});case 10:_context.prev=10;_context.t0=_context["catch"](0);return _context.abrupt("return",{isCheckoutInitialized:false,needsPayment:false});case 13:case"end":return _context.stop();}},_callee,null,[[0,10]]);})),[],false),_useAsyncMemo2=_slicedToArray(_useAsyncMemo,1),_useAsyncMemo2$=_useAsyncMemo2[0],isCheckoutInitialized=_useAsyncMemo2$.isCheckoutInitialized,needsPayment=_useAsyncMemo2$.needsPayment;// Handle passed errors from external checkout gateway.
-React.useEffect(function(){var urlParams=new URLSearchParams(window.location.search);var errorCode=urlParams.get('errorCode');if(!errorCode){return;}showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});},[showModal]);var submitPromise=React.useRef(null);// Handles submit of the checkout form.
-var handleSubmitOrder=React.useCallback(/*#__PURE__*/function(){var _ref5=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values){var _submitPromise$curren,_submitPromise$curren2,_submitPromise$curren3,_submitPromise$curren4,fulfilledPaymentTransactions,_submitPromise$curren5,_submitPromise$curren6,marketingOptIn,_ref7,paymentTransactionResults,redirectNeeded,_paymentHandlerRef$cu,_submitPromise$curren9,_submitPromise$curren10,_paymentTransactionRe3,_paymentTransactionRe4,url,_submitPromise$curren7,_submitPromise$curren8,redirectWanted,_paymentHandlerRef$cu2,_submitPromise$curren11,_submitPromise$curren12,_ref8,_ref9,order;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:setLocked(true);// Update order to set pickup contact.
-if(orderReadOnly){_context2.next=14;break;}_context2.prev=2;_context2.next=5;return updateCheckoutOrder({notes:values.instructions,addressSequences:[_extends({},billingAddress,{customerContactId:billingAddress.customerContactId||undefined})].concat(isShippingAddressSelectionEnabled?_extends({},shippingAddress,{customerContactId:shippingAddress.customerContactId||undefined}):[],isPickupContactSelectionEnabled?_extends({},values.pickupPerson==='me'?_extends({},billingAddress,{customerContactId:billingAddress.customerContactId||undefined,type:'pickup'}):{type:'pickup',firstName:values.firstName,lastName:values.lastName,mobile:values.mobile,emailAddress:values.emailAddress}):[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 5:_context2.next=12;break;case 7:_context2.prev=7;_context2.t0=_context2["catch"](2);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren=submitPromise.current)===null||_submitPromise$curren===void 0?void 0:(_submitPromise$curren2=_submitPromise$curren.resolve)===null||_submitPromise$curren2===void 0?void 0:_submitPromise$curren2.call(_submitPromise$curren);return _context2.abrupt("return");case 12:_context2.next=25;break;case 14:if(!(isGuestCheckout&&isPickupContactSelectionEnabled&&values.instructions)){_context2.next=25;break;}_context2.prev=15;_context2.next=18;return updateCheckoutOrder({notes:values.instructions});case 18:_context2.next=25;break;case 20:_context2.prev=20;_context2.t1=_context2["catch"](15);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren3=submitPromise.current)===null||_submitPromise$curren3===void 0?void 0:(_submitPromise$curren4=_submitPromise$curren3.resolve)===null||_submitPromise$curren4===void 0?void 0:_submitPromise$curren4.call(_submitPromise$curren3);return _context2.abrupt("return");case 25:// Fulfill using selected payment method.
-fulfilledPaymentTransactions=[];if(!needsPayment){_context2.next=34;break;}_context2.next=29;return paymentHandlerRef.current.fulfillTransaction({paymentTransactions:paymentTransactions});case 29:fulfilledPaymentTransactions=_context2.sent;if(fulfilledPaymentTransactions){_context2.next=34;break;}setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren5=submitPromise.current)===null||_submitPromise$curren5===void 0?void 0:(_submitPromise$curren6=_submitPromise$curren5.resolve)===null||_submitPromise$curren6===void 0?void 0:_submitPromise$curren6.call(_submitPromise$curren5);return _context2.abrupt("return");case 34:_context2.prev=34;if(updateOptIns){marketingOptIn=optInFormState.values.marketingOptIn;}_context2.next=38;return submitCheckoutOrder(_extends({paymentTransactions:fulfilledPaymentTransactions,userAgent:getUserAgent(),platform:'engage',marketingOptIn:marketingOptIn},campaignAttribution?{campaignAttribution:campaignAttribution}:{}));case 38:_ref7=_context2.sent;paymentTransactionResults=_ref7.paymentTransactionResults;redirectNeeded=_ref7.redirectNeeded;if(!(redirectNeeded&&paymentTransactionResults.length)){_context2.next=54;break;}_paymentTransactionRe3=paymentTransactionResults[0].redirectParams,_paymentTransactionRe4=_paymentTransactionRe3===void 0?{}:_paymentTransactionRe3,url=_paymentTransactionRe4.url;if(!isAvailable()){_context2.next=49;break;}_context2.next=46;return InAppBrowser.openLink({url:url,options:{enableDefaultShare:false}});case 46:// On Close we simply unlock the checkout
-setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren7=submitPromise.current)===null||_submitPromise$curren7===void 0?void 0:(_submitPromise$curren8=_submitPromise$curren7.resolve)===null||_submitPromise$curren8===void 0?void 0:_submitPromise$curren8.call(_submitPromise$curren7);return _context2.abrupt("return");case 49:// Implemented specifically for paypal:
-// https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
-// In the website we don't want to redirect and instead use to paypal sdk to
-// control the "mini browser" / popup.
-redirectWanted=true;if(paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu=paymentHandlerRef.current)===null||_paymentHandlerRef$cu===void 0?void 0:_paymentHandlerRef$cu.getSupportsRedirect){redirectWanted=paymentHandlerRef===null||paymentHandlerRef===void 0?void 0:(_paymentHandlerRef$cu2=paymentHandlerRef.current)===null||_paymentHandlerRef$cu2===void 0?void 0:_paymentHandlerRef$cu2.getSupportsRedirect();}if(redirectWanted){window.location.href=url;}else{setLocked(false);}submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren9=submitPromise.current)===null||_submitPromise$curren9===void 0?void 0:(_submitPromise$curren10=_submitPromise$curren9.resolve)===null||_submitPromise$curren10===void 0?void 0:_submitPromise$curren10.call(_submitPromise$curren9,true);return _context2.abrupt("return");case 54:_context2.next=61;break;case 56:_context2.prev=56;_context2.t2=_context2["catch"](34);setLocked(false);submitPromise===null||submitPromise===void 0?void 0:(_submitPromise$curren11=submitPromise.current)===null||_submitPromise$curren11===void 0?void 0:(_submitPromise$curren12=_submitPromise$curren11.resolve)===null||_submitPromise$curren12===void 0?void 0:_submitPromise$curren12.call(_submitPromise$curren11);return _context2.abrupt("return");case 61:_context2.next=63;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 63:_ref8=_context2.sent;_ref9=_slicedToArray(_ref8,1);order=_ref9[0];clearCheckoutCampaign();historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});// We don't set locked to false to avoid unnecessary UI changes right before
-// going to confirmation page.
-case 68:case"end":return _context2.stop();}},_callee2,null,[[2,7],[15,20],[34,56]]);}));return function(_x){return _ref5.apply(this,arguments);};}(),[orderReadOnly,isGuestCheckout,isPickupContactSelectionEnabled,needsPayment,fetchCheckoutOrder,fetchCart,clearCheckoutCampaign,historyReplace,updateCheckoutOrder,billingAddress,isShippingAddressSelectionEnabled,shippingAddress,paymentTransactions,updateOptIns,submitCheckoutOrder,campaignAttribution,optInFormState.values]);var handleUpdateShippingMethod=useCallback(/*#__PURE__*/function(){var _ref10=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(selectedShippingMethod){return _regeneratorRuntime.wrap(function _callee3$(_context3){while(1)switch(_context3.prev=_context3.next){case 0:setLocked(true);_context3.prev=1;_context3.next=4;return updateCheckoutOrder({addressSequences:[_extends({},billingAddress),_extends({},shippingAddress,{orderSegment:{selectedShippingMethod:selectedShippingMethod}})].concat(isGuestCheckout&&pickupAddress?[_extends({},pickupAddress)]:[]),primaryBillToAddressSequenceIndex:0,primaryShipToAddressSequenceIndex:1});case 4:_context3.next=8;break;case 6:_context3.prev=6;_context3.t0=_context3["catch"](1);case 8:_context3.prev=8;_context3.next=11;return fetchCheckoutOrder();case 11:_context3.next=15;break;case 13:_context3.prev=13;_context3.t1=_context3["catch"](8);case 15:setLocked(false);case 16:case"end":return _context3.stop();}},_callee3,null,[[1,6],[8,13]]);}));return function(_x2){return _ref10.apply(this,arguments);};}(),[billingAddress,pickupAddress,shippingAddress,fetchCheckoutOrder,isGuestCheckout,updateCheckoutOrder]);// Whenever the order is locked we also want to show to loading bar.
-React.useEffect(function(){if(isLocked){setLoading(true);return;}setLoading(false);},[isLocked]);React.useEffect(function(){if(isLoading){LoadingProvider.setLoading(pathPattern);return;}LoadingProvider.resetLoading(pathPattern);},[isLoading,pathPattern]);// Hold form states.
-var formState=useFormState(defaultPickupPersonState,handleSubmitOrder,validationRules);// When "someone-else" is picked for pickup the validation rules need to change.
-React.useEffect(function(){setValidationRules(formState.values.pickupPerson==='me'||isGuestCheckout?selfPickupConstraints:pickupConstraints);},[formState.values.pickupPerson,isGuestCheckout]);var isOrderable=React.useMemo(function(){return typeof(checkoutOrder===null||checkoutOrder===void 0?void 0:checkoutOrder.isOrderable)!=='undefined'?checkoutOrder.isOrderable:true;},[checkoutOrder]);// Create memoized context value.
-var value=React.useMemo(function(){return{setPaymentHandler:function setPaymentHandler(handler){setPaymentButton(function(){return handler.getCustomPayButton();});paymentHandlerRef.current=handler;},paymentButton:paymentButton,paymentData:paymentData,setPaymentData:setPaymentData,paymentTransactions:paymentTransactions,isLocked:isLocked,isButtonLocked:(isLocked||isButtonLocked)&&needsPayment||!isOrderable,isLoading:isLoading,supportedCountries:shopSettings.supportedCountries,countrySortOrder:shopSettings.countrySortOrder,formValidationErrors:convertValidationErrors(formState.validationErrors||{}),formSetValues:formState.setValues,handleSubmitOrder:function handleSubmitOrder(){var promise=new Promise(function(resolve,reject){submitPromise.current={resolve:resolve,reject:reject};});formState.handleSubmit.apply(formState,arguments);return promise;},handleValidation:function handleValidation(){return formState.validate(formState.values);},updateShippingMethod:handleUpdateShippingMethod,defaultPickupPersonState:defaultPickupPersonState,userLocation:userLocation,billingAddress:billingAddress,shippingAddress:shippingAddress,pickupAddress:pickupAddress,taxLines:taxLines,order:checkoutOrder,currencyCode:checkoutOrder===null||checkoutOrder===void 0?void 0:checkoutOrder.currencyCode,needsPayment:needsPayment,orderReserveOnly:orderReserveOnly,isShippingAddressSelectionEnabled:isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled:isPickupContactSelectionEnabled,isGuestCheckout:isGuestCheckout,fulfillmentSlot:fulfillmentSlot,optInFormSetValues:optInFormState.setValues,defaultOptInFormState:defaultOptInFormState,setUpdateOptIns:function setUpdateOptIns(){var val=arguments.length>0&&arguments[0]!==undefined?arguments[0]:true;_setUpdateOptIns(val);},setButtonLocked:setButtonLocked,setLoading:setLoading,setLocked:setLocked};},[paymentButton,paymentData,paymentTransactions,isLocked,isButtonLocked,needsPayment,isOrderable,isLoading,shopSettings.supportedCountries,shopSettings.countrySortOrder,formState,handleUpdateShippingMethod,userLocation,billingAddress,shippingAddress,pickupAddress,taxLines,checkoutOrder,orderReserveOnly,isShippingAddressSelectionEnabled,isPickupContactSelectionEnabled,isGuestCheckout,fulfillmentSlot,optInFormState.setValues,defaultOptInFormState]);// Handle deeplinks from external payment site.
-React.useEffect(function(){if(!isAvailable())return undefined;/**
+ * @returns {JSX.Element}
+ */
+const CheckoutProvider = ({
+  pathPattern,
+  orderInitialized,
+  orderReadOnly,
+  historyReplace,
+  prepareCheckout,
+  fetchCheckoutOrder,
+  updateCheckoutOrder,
+  submitCheckoutOrder,
+  showModal,
+  children,
+  shopSettings,
+  billingAddress,
+  shippingAddress,
+  pickupAddress,
+  paymentTransactions,
+  fetchCart,
+  taxLines,
+  userLocation,
+  isDataReady,
+  fulfillmentSlot,
+  orderReserveOnly,
+  isShippingAddressSelectionEnabled,
+  isPickupContactSelectionEnabled,
+  isGuestCheckout,
+  campaignAttribution,
+  clearCheckoutCampaign,
+  order: checkoutOrder
+}) => {
+  const [paymentButton, setPaymentButton] = useState(null);
+  const paymentHandlerRef = useRef(null);
+  const [paymentData, setPaymentData] = useState(null);
+  const [isLocked, setLocked] = useState(true);
+  const [isButtonLocked, setButtonLocked] = useState(true);
+  const [isLoading, setLoading] = useState(true);
+  const [validationRules, setValidationRules] = useState(selfPickupConstraints);
+  const [updateOptIns, setUpdateOptIns] = useState(false);
+  const defaultOptInFormState = {
+    ...initialOptInFormState
+  };
+  const optInFormState = useFormState(defaultOptInFormState, () => {});
+
+  // Initialize checkout process.
+  const [{
+    isCheckoutInitialized,
+    needsPayment
+  }] = useAsyncMemo(async () => {
+    try {
+      const {
+        needsPayment: needsPaymentCheckout,
+        success
+      } = await prepareCheckout({
+        initializeOrder: !orderInitialized
+      });
+      setLocked(false);
+      return {
+        isCheckoutInitialized: success,
+        needsPayment: needsPaymentCheckout
+      };
+    } catch (error) {
+      return {
+        isCheckoutInitialized: false,
+        needsPayment: false
+      };
+    }
+  }, [], false);
+
+  // Handle passed errors from external checkout gateway.
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const errorCode = urlParams.get('errorCode');
+    if (!errorCode) {
+      return;
+    }
+    showModal({
+      title: null,
+      confirm: null,
+      dismiss: 'modal.ok',
+      message: 'checkout.errors.payment.genericExternal'
+    });
+  }, [showModal]);
+  const submitPromise = useRef(null);
+
+  // Handles submit of the checkout form.
+  const handleSubmitOrder = useCallback(async values => {
+    setLocked(true);
+
+    // Update order to set pickup contact.
+    if (!orderReadOnly) {
+      try {
+        await updateCheckoutOrder({
+          notes: values.instructions,
+          addressSequences: [{
+            ...billingAddress,
+            customerContactId: billingAddress.customerContactId || undefined
+          }, ...(isShippingAddressSelectionEnabled ? {
+            ...shippingAddress,
+            customerContactId: shippingAddress.customerContactId || undefined
+          } : []), ...(isPickupContactSelectionEnabled ? {
+            // When the customer is picking up himself we just take the
+            // billing address as pickup address.
+            ...(values.pickupPerson === 'me' ? {
+              ...billingAddress,
+              customerContactId: billingAddress.customerContactId || undefined,
+              type: 'pickup'
+            } : {
+              type: 'pickup',
+              firstName: values.firstName,
+              lastName: values.lastName,
+              mobile: values.mobile,
+              emailAddress: values.emailAddress
+            })
+          } : [])],
+          primaryBillToAddressSequenceIndex: 0,
+          primaryShipToAddressSequenceIndex: 1
+        });
+      } catch (error) {
+        setLocked(false);
+        submitPromise?.current?.resolve?.();
+        return;
+      }
+    } else if (isGuestCheckout && isPickupContactSelectionEnabled && values.instructions) {
+      try {
+        await updateCheckoutOrder({
+          notes: values.instructions
+        });
+      } catch (error) {
+        setLocked(false);
+        submitPromise?.current?.resolve?.();
+        return;
+      }
+    }
+
+    // Fulfill using selected payment method.
+    let fulfilledPaymentTransactions = [];
+    if (needsPayment) {
+      fulfilledPaymentTransactions = await paymentHandlerRef.current.fulfillTransaction({
+        paymentTransactions
+      });
+      if (!fulfilledPaymentTransactions) {
+        setLocked(false);
+        submitPromise?.current?.resolve?.();
+        return;
+      }
+    }
+
+    // Submit fulfilled payment transaction to complete order.
+    try {
+      let marketingOptIn;
+      if (updateOptIns) {
+        ({
+          marketingOptIn
+        } = optInFormState.values);
+      }
+      const {
+        paymentTransactionResults,
+        redirectNeeded
+      } = await submitCheckoutOrder({
+        paymentTransactions: fulfilledPaymentTransactions,
+        userAgent: getUserAgent(),
+        platform: 'engage',
+        marketingOptIn,
+        ...(campaignAttribution ? {
+          campaignAttribution
+        } : {})
+      });
+
+      // Check if api requested a external redirect.
+      if (redirectNeeded && paymentTransactionResults.length) {
+        const {
+          redirectParams: {
+            url
+          } = {}
+        } = paymentTransactionResults[0];
+        if (isAvailable()) {
+          // Open the link in the native webview.
+          await InAppBrowser.openLink({
+            url,
+            options: {
+              enableDefaultShare: false
+            }
+          });
+          // On Close we simply unlock the checkout
+          setLocked(false);
+          submitPromise?.current?.resolve?.();
+          return;
+        }
+
+        // Implemented specifically for paypal:
+        // https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
+        // In the website we don't want to redirect and instead use to paypal sdk to
+        // control the "mini browser" / popup.
+        let redirectWanted = true;
+        if (paymentHandlerRef?.current?.getSupportsRedirect) {
+          redirectWanted = paymentHandlerRef?.current?.getSupportsRedirect();
+        }
+        if (redirectWanted) {
+          window.location.href = url;
+        } else {
+          setLocked(false);
+        }
+        submitPromise?.current?.resolve?.(true);
+        return;
+      }
+    } catch (error) {
+      setLocked(false);
+      submitPromise?.current?.resolve?.();
+      return;
+    }
+
+    // Order is done, fetch again to retrieve infos for success page
+    const [order] = await Promise.all([fetchCheckoutOrder(), fetchCart()]);
+    clearCheckoutCampaign();
+    historyReplace({
+      pathname: CHECKOUT_CONFIRMATION_PATTERN,
+      state: {
+        order
+      }
+    });
+
+    // We don't set locked to false to avoid unnecessary UI changes right before
+    // going to confirmation page.
+  }, [orderReadOnly, isGuestCheckout, isPickupContactSelectionEnabled, needsPayment, fetchCheckoutOrder, fetchCart, clearCheckoutCampaign, historyReplace, updateCheckoutOrder, billingAddress, isShippingAddressSelectionEnabled, shippingAddress, paymentTransactions, updateOptIns, submitCheckoutOrder, campaignAttribution, optInFormState.values]);
+  const handleUpdateShippingMethod = useCallback(async selectedShippingMethod => {
+    setLocked(true);
+    try {
+      await updateCheckoutOrder({
+        addressSequences: [{
+          ...billingAddress
+        }, {
+          ...shippingAddress,
+          orderSegment: {
+            selectedShippingMethod
+          }
+        }, ...(isGuestCheckout && pickupAddress ? [{
+          ...pickupAddress
+        }] : [])],
+        primaryBillToAddressSequenceIndex: 0,
+        primaryShipToAddressSequenceIndex: 1
+      });
+    } catch (e) {
+      // Nothing to see here
+    }
+    try {
+      await fetchCheckoutOrder();
+    } catch (e) {
+      // Nothing to see here
+    }
+    setLocked(false);
+  }, [billingAddress, pickupAddress, shippingAddress, fetchCheckoutOrder, isGuestCheckout, updateCheckoutOrder]);
+
+  // Whenever the order is locked we also want to show to loading bar.
+  useEffect(() => {
+    if (isLocked) {
+      setLoading(true);
+      return;
+    }
+    setLoading(false);
+  }, [isLocked]);
+  useEffect(() => {
+    if (isLoading) {
+      LoadingProvider.setLoading(pathPattern);
+      return;
+    }
+    LoadingProvider.resetLoading(pathPattern);
+  }, [isLoading, pathPattern]);
+
+  // Hold form states.
+  const formState = useFormState(defaultPickupPersonState, handleSubmitOrder, validationRules);
+
+  // When "someone-else" is picked for pickup the validation rules need to change.
+  useEffect(() => {
+    setValidationRules(formState.values.pickupPerson === 'me' || isGuestCheckout ? selfPickupConstraints : pickupConstraints);
+  }, [formState.values.pickupPerson, isGuestCheckout]);
+  const isOrderable = useMemo(() => typeof checkoutOrder?.isOrderable !== 'undefined' ? checkoutOrder.isOrderable : true, [checkoutOrder]);
+
+  // Create memoized context value.
+  const value = useMemo(() => ({
+    setPaymentHandler: handler => {
+      setPaymentButton(() => handler.getCustomPayButton());
+      paymentHandlerRef.current = handler;
+    },
+    paymentButton,
+    paymentData,
+    setPaymentData,
+    paymentTransactions,
+    isLocked,
+    isButtonLocked: (isLocked || isButtonLocked) && needsPayment || !isOrderable,
+    isLoading,
+    supportedCountries: shopSettings.supportedCountries,
+    countrySortOrder: shopSettings.countrySortOrder,
+    formValidationErrors: convertValidationErrors(formState.validationErrors || {}),
+    formSetValues: formState.setValues,
+    handleSubmitOrder: (...params) => {
+      const promise = new Promise((resolve, reject) => {
+        submitPromise.current = {
+          resolve,
+          reject
+        };
+      });
+      formState.handleSubmit(...params);
+      return promise;
+    },
+    handleValidation: () => formState.validate(formState.values),
+    updateShippingMethod: handleUpdateShippingMethod,
+    defaultPickupPersonState,
+    userLocation,
+    billingAddress,
+    shippingAddress,
+    pickupAddress,
+    taxLines,
+    order: checkoutOrder,
+    currencyCode: checkoutOrder?.currencyCode,
+    needsPayment,
+    orderReserveOnly,
+    isShippingAddressSelectionEnabled,
+    isPickupContactSelectionEnabled,
+    isGuestCheckout,
+    fulfillmentSlot,
+    optInFormSetValues: optInFormState.setValues,
+    defaultOptInFormState,
+    setUpdateOptIns: (val = true) => {
+      setUpdateOptIns(val);
+    },
+    setButtonLocked,
+    setLoading,
+    setLocked
+  }), [paymentButton, paymentData, paymentTransactions, isLocked, isButtonLocked, needsPayment, isOrderable, isLoading, shopSettings.supportedCountries, shopSettings.countrySortOrder, formState, handleUpdateShippingMethod, userLocation, billingAddress, shippingAddress, pickupAddress, taxLines, checkoutOrder, orderReserveOnly, isShippingAddressSelectionEnabled, isPickupContactSelectionEnabled, isGuestCheckout, fulfillmentSlot, optInFormState.setValues, defaultOptInFormState]);
+
+  // Handle deeplinks from external payment site.
+  useEffect(() => {
+    if (!isAvailable()) return undefined;
+
+    /**
      * @param {Object} event Event
-     */var listener=/*#__PURE__*/function(){var _ref11=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(event){var _ref12,_ref12$link,link,_link$match,_link$match2,_,_scheme,path,_ref15,_ref16,order;return _regeneratorRuntime.wrap(function _callee4$(_context4){while(1)switch(_context4.prev=_context4.next){case 0:_ref12=(event===null||event===void 0?void 0:event.detail)||{},_ref12$link=_ref12.link,link=_ref12$link===void 0?'':_ref12$link;/* eslint-disable-next-line no-unused-vars */_link$match=link.match(/(.*):\/\/([a-zA-Z0-9-/]*)(.*)/),_link$match2=_slicedToArray(_link$match,3),_=_link$match2[0],_scheme=_link$match2[1],path=_link$match2[2];// Order is done, fetch again to retrieve infos for success page
-if(!(path==='payment/success')){_context4.next=11;break;}_context4.next=5;return Promise.all([fetchCheckoutOrder(),fetchCart()]);case 5:_ref15=_context4.sent;_ref16=_slicedToArray(_ref15,1);order=_ref16[0];historyReplace({pathname:CHECKOUT_CONFIRMATION_PATTERN,state:{order:order}});_context4.next=12;break;case 11:if(path==='payment/error'){showModal({title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.payment.genericExternal'});}case 12:case"end":return _context4.stop();}},_callee4);}));return function listener(_x3){return _ref11.apply(this,arguments);};}();Linking.addEventListener('deepLinkOpened',listener);return function(){Linking.removeEventListener('deepLinkOpened',listener);};},[fetchCart,fetchCheckoutOrder,historyReplace,showModal]);if(!isDataReady||!isCheckoutInitialized){return null;}return React.createElement(Context.Provider,{value:value},children);};CheckoutProvider.defaultProps={orderInitialized:false,orderReadOnly:false,orderReserveOnly:false,isShippingAddressSelectionEnabled:false,isPickupContactSelectionEnabled:false,isGuestCheckout:false};export default connect(CheckoutProvider);/* eslint-enable no-unused-expressions */
+     */
+    const listener = async event => {
+      const {
+        link = ''
+      } = event?.detail || {};
+      /* eslint-disable-next-line no-unused-vars */
+      const [_, _scheme, path] = link.match(/(.*):\/\/([a-zA-Z0-9-/]*)(.*)/);
+
+      // Order is done, fetch again to retrieve infos for success page
+      if (path === 'payment/success') {
+        const [order] = await Promise.all([fetchCheckoutOrder(), fetchCart()]);
+        historyReplace({
+          pathname: CHECKOUT_CONFIRMATION_PATTERN,
+          state: {
+            order
+          }
+        });
+      } else if (path === 'payment/error') {
+        showModal({
+          title: null,
+          confirm: null,
+          dismiss: 'modal.ok',
+          message: 'checkout.errors.payment.genericExternal'
+        });
+      }
+    };
+    Linking.addEventListener('deepLinkOpened', listener);
+    return () => {
+      Linking.removeEventListener('deepLinkOpened', listener);
+    };
+  }, [fetchCart, fetchCheckoutOrder, historyReplace, showModal]);
+  if (!isDataReady || !isCheckoutInitialized) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: value
+  }, children);
+};
+CheckoutProvider.defaultProps = {
+  orderInitialized: false,
+  orderReadOnly: false,
+  orderReserveOnly: false,
+  isShippingAddressSelectionEnabled: false,
+  isPickupContactSelectionEnabled: false,
+  isGuestCheckout: false,
+  campaignAttribution: null
+};
+export default connect(CheckoutProvider);
+/* eslint-enable no-unused-expressions */

package/checkout/reducers/index.js

@@ -1,6 +1,93 @@
-import{produce}from'immer';import{FETCH_CHECKOUT_ORDER,FETCH_CHECKOUT_ORDER_SUCCESS,FETCH_CHECKOUT_ORDER_ERROR,CLEAR_CHECKOUT_ORDER,FETCH_PAYMENT_METHODS,FETCH_PAYMENT_METHODS_SUCCESS,FETCH_PAYMENT_METHODS_ERROR,ADD_CHECKOUT_CAMPAIGN,CLEAR_CHECKOUT_CAMPAIGN}from"../constants/actionTypes";var initialState={paymentMethods:{isFetching:false,data:[]},checkoutOrder:{isFetching:false,data:null,errors:[]},checkoutSubmit:{errors:[]},checkoutCampaign:{code:null,sentTime:null,receivedTime:null,notificationId:null,locale:null,distributionIndex:null}};/**
+import { produce } from 'immer';
+import { FETCH_CHECKOUT_ORDER, FETCH_CHECKOUT_ORDER_SUCCESS, FETCH_CHECKOUT_ORDER_ERROR, CLEAR_CHECKOUT_ORDER, FETCH_PAYMENT_METHODS, FETCH_PAYMENT_METHODS_SUCCESS, FETCH_PAYMENT_METHODS_ERROR, ADD_CHECKOUT_CAMPAIGN, CLEAR_CHECKOUT_CAMPAIGN } from "../constants/actionTypes";
+const initialState = {
+  paymentMethods: {
+    isFetching: false,
+    data: []
+  },
+  checkoutOrder: {
+    isFetching: false,
+    data: null,
+    errors: []
+  },
+  checkoutSubmit: {
+    errors: []
+  },
+  checkoutCampaign: {
+    code: null,
+    sentTime: null,
+    receivedTime: null,
+    notificationId: null,
+    locale: null,
+    distributionIndex: null
+  }
+};
+
+/**
  * The reducer for all checkout related state.
  * @param {Object} state The application state.
  * @param {Object} action The redux action.
  * @returns {Object}
- */export default function checkoutReducer(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:initialState;var action=arguments.length>1?arguments[1]:undefined;/* eslint-disable no-param-reassign */var producer=produce(function(draft){switch(action.type){case FETCH_CHECKOUT_ORDER:{draft.checkoutOrder.isFetching=true;break;}case FETCH_CHECKOUT_ORDER_SUCCESS:{draft.checkoutOrder.isFetching=false;draft.checkoutOrder.errors=[];draft.checkoutOrder.data=action.order;break;}case FETCH_CHECKOUT_ORDER_ERROR:{draft.checkoutOrder.isFetching=false;draft.checkoutOrder.errors=action.errors;break;}case CLEAR_CHECKOUT_ORDER:{draft.checkoutOrder.isFetching=false;draft.checkoutOrder.errors=[];draft.checkoutOrder.data=null;break;}case FETCH_PAYMENT_METHODS:{draft.paymentMethods.isFetching=true;break;}case FETCH_PAYMENT_METHODS_SUCCESS:{draft.paymentMethods.isFetching=false;draft.paymentMethods.data=action.paymentMethods;break;}case FETCH_PAYMENT_METHODS_ERROR:{draft.paymentMethods.isFetching=false;break;}case ADD_CHECKOUT_CAMPAIGN:{draft.checkoutCampaign=action.data;break;}case CLEAR_CHECKOUT_CAMPAIGN:{draft.checkoutCampaign=initialState.checkoutCampaign;break;}default:break;}});/* eslint-enable no-param-reassign */return producer(state);}
+ */
+export default function checkoutReducer(state = initialState, action) {
+  /* eslint-disable no-param-reassign */
+  const producer = produce(draft => {
+    switch (action.type) {
+      case FETCH_CHECKOUT_ORDER:
+        {
+          draft.checkoutOrder.isFetching = true;
+          break;
+        }
+      case FETCH_CHECKOUT_ORDER_SUCCESS:
+        {
+          draft.checkoutOrder.isFetching = false;
+          draft.checkoutOrder.errors = [];
+          draft.checkoutOrder.data = action.order;
+          break;
+        }
+      case FETCH_CHECKOUT_ORDER_ERROR:
+        {
+          draft.checkoutOrder.isFetching = false;
+          draft.checkoutOrder.errors = action.errors;
+          break;
+        }
+      case CLEAR_CHECKOUT_ORDER:
+        {
+          draft.checkoutOrder.isFetching = false;
+          draft.checkoutOrder.errors = [];
+          draft.checkoutOrder.data = null;
+          break;
+        }
+      case FETCH_PAYMENT_METHODS:
+        {
+          draft.paymentMethods.isFetching = true;
+          break;
+        }
+      case FETCH_PAYMENT_METHODS_SUCCESS:
+        {
+          draft.paymentMethods.isFetching = false;
+          draft.paymentMethods.data = action.paymentMethods;
+          break;
+        }
+      case FETCH_PAYMENT_METHODS_ERROR:
+        {
+          draft.paymentMethods.isFetching = false;
+          break;
+        }
+      case ADD_CHECKOUT_CAMPAIGN:
+        {
+          draft.checkoutCampaign = action.data;
+          break;
+        }
+      case CLEAR_CHECKOUT_CAMPAIGN:
+        {
+          draft.checkoutCampaign = initialState.checkoutCampaign;
+          break;
+        }
+      default:
+        break;
+    }
+  });
+  /* eslint-enable no-param-reassign */
+  return producer(state);
+}

package/checkout/selectors/campaign.js

@@ -1,5 +1,23 @@
-import{createSelector}from'reselect';/**
+import { createSelector } from 'reselect';
+
+/**
  * Returns all checkout campaign data
  * @param {Object} state The application state.
  * @returns {Array}
- */export var getCheckoutCampaign=function getCheckoutCampaign(state){return state.checkout.checkoutCampaign;};export var getCampaignAttribution=createSelector(getCheckoutCampaign,function(campaign){var campaignCode=campaign.campaignCode,channel=campaign.channel,distributionIndex=campaign.distributionIndex;if(!campaignCode){return null;}return{campaignCode:campaignCode,channel:channel,distributionIndex:distributionIndex};});
+ */
+export const getCheckoutCampaign = state => state.checkout.checkoutCampaign;
+export const getCampaignAttribution = createSelector(getCheckoutCampaign, campaign => {
+  const {
+    campaignCode,
+    channel,
+    distributionIndex
+  } = campaign;
+  if (!campaignCode) {
+    return null;
+  }
+  return {
+    campaignCode,
+    channel,
+    distributionIndex
+  };
+});

package/checkout/selectors/guestCheckout.js

@@ -1,5 +1,13 @@
-import{createSelector}from'reselect';import{isUserLoggedIn}from'@shopgate/engage/user';import{getCheckoutOrder,getIsReserveOnly}from"./order";/**
+import { createSelector } from 'reselect';
+import { isUserLoggedIn } from '@shopgate/engage/user';
+import { getCheckoutOrder, getIsReserveOnly } from "./order";
+
+/**
  * Returns whether a guest checkout session is currently active.
- */export var isGuestCheckoutActive=createSelector(isUserLoggedIn,getCheckoutOrder,function(userLoggedIn,checkoutOrder){return!userLoggedIn&&!!checkoutOrder;});/**
+ */
+export const isGuestCheckoutActive = createSelector(isUserLoggedIn, getCheckoutOrder, (userLoggedIn, checkoutOrder) => !userLoggedIn && !!checkoutOrder);
+
+/**
  * Returns all required fields for current guest checkout session.
- */export var getRequiredGuestCheckoutFields=createSelector(getIsReserveOnly,function(isReserveOnly){return['firstName','lastName','emailAddress','mobile'].concat(!isReserveOnly?['address1','postalCode','city','country']:[]);});
+ */
+export const getRequiredGuestCheckoutFields = createSelector(getIsReserveOnly, isReserveOnly => ['firstName', 'lastName', 'emailAddress', 'mobile', ...(!isReserveOnly ? ['address1', 'postalCode', 'city', 'country'] : [])]);