@shopgate/engage/checkout/providers/CheckoutProvider.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}/* eslint-disable no-unused-expressions */import React,{useCallback}from'react';import{isAvailable,InAppBrowser,Linking}from'@shopgate/native-modules';import{useFormState}from'@shopgate/engage/core/hooks/useFormState';import{i18n,useAsyncMemo,getUserAgent,LoadingProvider}from'@shopgate/engage/core';import{MARKETING_OPT_IN_DEFAULT}from'@shopgate/engage/registration/constants';import Context from"./CheckoutProvider.context";import connect from"./CheckoutProvider.connector";import{pickupConstraints,selfPickupConstraints}from"./CheckoutProvider.constraints";import{CHECKOUT_CONFIRMATION_PATTERN}from"../constants/routes";var defaultPickupPersonState={pickupPerson:'me',firstName:'',lastName:'',mobile:'',email:'',firstName2:'',lastName2:'',mobile2:'',email2:''};/**
 * Converts validation errors into errors for form builder.
 * @param {Object} validationErrors The validation errors.
 * @returns {Array}
 */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};/**
 * 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;/**
     * @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 */