@shopgate/engage/checkout/paymentMethods/paypal/PaypalPayButton.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";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 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 _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useLayoutEffect,useEffect,useRef,useState,Fragment}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{getThemeSettings,showModal,MODAL_PIPELINE_ERROR}from'@shopgate/engage/core';import{connect}from'react-redux';import{i18n}from"../../../core/helpers/i18n";import{useCheckoutContext}from"../../hooks/common";import{usePaypal}from"./sdk";var styles={headline:css({fontSize:'1.25rem',fontWeight:'normal',margin:'12px 0 12px 0',color:'var(--color-text-high-emphasis)',textTransform:'none'}).toString()};/**
 * Paypal Pay button
 * @returns {JSX}
 */var PaypalPayButton=function PaypalPayButton(_ref){var disabled=_ref.disabled,onSubmit=_ref.onSubmit,onValidate=_ref.onValidate,showModal=_ref.showModal;var _useCheckoutContext=useCheckoutContext(),paymentData=_useCheckoutContext.paymentData,paymentTransactions=_useCheckoutContext.paymentTransactions;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),paypalActions=_useState2[0],setPaypalActions=_useState2[1];var paypal=usePaypal();var paypalButton=useRef(null);var button=useRef(null);var fundingSource=paymentData===null||paymentData===void 0?void 0:paymentData.meta;// Store form actions inside ref as they would trigger
// rerenders everytime the form changes, but here we
// only need them once validating.
// paypal unfortunately doesn't allow updating button props.
var formActions=useRef({});useEffect(function(){formActions.current={onSubmit:onSubmit,onValidate:onValidate};},[onSubmit,onValidate]);// Trigger rendering the paypal button whenever a property changes.
useLayoutEffect(function(){if(!paypal)return;if(_typeof(fundingSource)==='object')return;if(paypalButton.current){paypalButton.current.close();}var customSettings=getThemeSettings('PayPal')||{};paypalButton.current=paypal.Buttons({fundingSource:fundingSource||paypal.FUNDING.PAYPAL,createOrder:function createOrder(){var _paymentTransactions$;var externalCode=(_paymentTransactions$=paymentTransactions[0])===null||_paymentTransactions$===void 0?void 0:_paymentTransactions$.externalCode;return externalCode;},onInit:function onInit(_,actions){// Here again thanks paypal, there is no way access the actions outside these handlers.
setPaypalActions(actions);},onClick:function onClick(_,actions){// Trigger manual form validation to comply to paypal standards.
var isValid=formActions.current.onValidate();if(isValid&&!disabled){return actions.resolve();}return actions.reject();},onApprove:function(){var _onApprove=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_,actions){var redirect;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return formActions.current.onSubmit();case 2:redirect=_context.sent;if(redirect){showModal({type:MODAL_PIPELINE_ERROR,title:null,confirm:null,dismiss:'modal.ok',message:'checkout.errors.paypalFunding'});actions.restart();}case 4:case"end":return _context.stop();}},_callee);}));function onApprove(_x,_x2){return _onApprove.apply(this,arguments);}return onApprove;}(),style:_extends({label:'pay',color:'white'},customSettings)});paypalButton.current.render(button.current);},[disabled,fundingSource,paymentTransactions,paypal,showModal]);// Sync our internal disabled state with paypals disabled state.
useEffect(function(){if(!paypalActions)return;if(disabled){paypalActions.disable();return;}paypalActions.enable();},[disabled,paypalActions]);if(_typeof(fundingSource)==='object')return null;if(!paypal){return null;}return React.createElement(Fragment,null,React.createElement("h3",{className:styles.headline},i18n.text('checkout.finalizePayment')),React.createElement("div",{ref:button}));};var mapDispatchToProps={showModal:showModal};export default connect(null,mapDispatchToProps)(PaypalPayButton);