@shopgate/engage
Version:
Shopgate's ENGAGE library.
8 lines • 3.94 kB
JavaScript
import _regeneratorRuntime from"@babel/runtime/regenerator";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 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 React,{Fragment,useLayoutEffect,useEffect,useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{useCheckoutContext}from"../../hooks/common";import Button from"../../components/PaymentMethodButton";import{loadWebSdk,usePaypal}from"./sdk";var styles={button:css({' .paypal-mark':{' img':{height:25,background:'transparent'},background:'transparent',border:'none',margin:0,padding:0}}).toString()};/**
* Paypal
* @param {Object} props Props
* @returns {JSX}
*/var PaypalButton=function PaypalButton(_ref){var settings=_ref.settings,_onChange=_ref.onChange,activeFundingSource=_ref.activePaymentMeta,active=_ref.active;var _useCheckoutContext=useCheckoutContext(),setLocked=_useCheckoutContext.setLocked,order=_useCheckoutContext.order;var paypal=usePaypal();// Initialize paypal sdk.
useEffect(function(){if(!settings||!order)return;/** Async handler */var handler=/*#__PURE__*/function(){var _ref2=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setLocked(true);_context.prev=1;_context.next=4;return loadWebSdk(settings,order);case 4:_context.next=8;break;case 6:_context.prev=6;_context.t0=_context["catch"](1);case 8:setLocked(false);case 9:case"end":return _context.stop();}},_callee,null,[[1,6]]);}));return function handler(){return _ref2.apply(this,arguments);};}();handler();},[order,setLocked,settings]);// Create paypal markers (just logic-less logos for each payment method).
var marks=useMemo(function(){if(!paypal)return[];return paypal.getFundingSources().map(function(fundingSource){var mark=window.paypal.Marks({fundingSource:fundingSource});if(!mark.isEligible())return null;return[mark,fundingSource];}).filter(function(m){return!!m;});},[paypal]);// Render marks to dom once ready.
useLayoutEffect(function(){requestAnimationFrame(function(){marks.forEach(function(_ref3,index){var _ref4=_slicedToArray(_ref3,1),mark=_ref4[0];mark.render("#sg-paypal-button-".concat(index));});},[]);},[marks]);return React.createElement(Fragment,null,marks.map(function(_ref5,index){var _ref6=_slicedToArray(_ref5,2),fundingSource=_ref6[1];var isButtonActive=fundingSource===paypal.FUNDING.PAYPAL&&!activeFundingSource?active:active&&fundingSource===activeFundingSource;return React.createElement(Button,{key:fundingSource,onChange:function onChange(){return _onChange(fundingSource);},active:isButtonActive},React.createElement("div",{id:"sg-paypal-button-".concat(index),className:styles.button}));}));};PaypalButton.defaultProps={settings:null,activePaymentMeta:null};export default PaypalButton;