@shopgate/engage/checkout/paymentMethods/index.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 _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,{useContext,useCallback,useEffect,useMemo,useRef,useState}from'react';import{connect,useStore}from'react-redux';import PropTypes from'prop-types';import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{getPaymentMethods}from"../selectors/payment";import{getCheckoutOrder}from"../selectors/order";import CheckoutContext from"../providers/CheckoutProvider.context";import{updateCheckoutOrder}from"../actions/updateCheckoutOrder";import{fetchCheckoutOrder}from"../actions/fetchCheckoutOrder";import{i18n}from"../../core/helpers/i18n";import Context from"./context";import paypal from"./paypal";import stripe from"./stripe";var AVAILABLE_PAYMENT_METHOD=[paypal,stripe];/**
 * Maps state to props
 * @param {Object} state State
 * @returns {Object}
 */var mapStateToProps=function mapStateToProps(state){return{order:getCheckoutOrder(state),paymentMethods:getPaymentMethods(state)};};/**
 * Dispatch
 * @param {Object} dispatch Dispatch
 * @returns {Object}
 */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{updateOrder:function updateOrder(order){return dispatch(updateCheckoutOrder(order));},fetchOrder:function fetchOrder(){return dispatch(fetchCheckoutOrder());}};};var variables=themeConfig.variables;var styles={headline:css({fontSize:'1.25rem',fontWeight:'normal',margin:"0 0 ".concat(variables.gap.small,"px 0"),marginLeft:16,marginRight:8,color:'var(--color-text-high-emphasis)',textTransform:'none'}).toString(),section:css({marginBottom:0,marginTop:4}).toString(),buttons:css({marginLeft:16,marginRight:16,marginBottom:16,display:'flex',flexDirection:'row'}).toString()};/**
 * PaymentMethodProvider
 * @param {Object} props Props
 * @returns {JSX}
 */var PaymentMethodProvider=function PaymentMethodProvider(_ref){var order=_ref.order,paymentMethods=_ref.paymentMethods,fetchOrder=_ref.fetchOrder,updateOrder=_ref.updateOrder;var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activePaymentMeta=_useState2[0],setActivePaymentMeta=_useState2[1];var _useContext=useContext(CheckoutContext),setPaymentHandler=_useContext.setPaymentHandler,setPaymentData=_useContext.setPaymentData,needsPayment=_useContext.needsPayment,setButtonLocked=_useContext.setButtonLocked,setLocked=_useContext.setLocked;var paymentMethodRef=useRef();// Set active payment method to the orders first transaction.
var paymentMethodCode=useMemo(function(){var _order$paymentTransac;var transaction=(_order$paymentTransac=order.paymentTransactions)===null||_order$paymentTransac===void 0?void 0:_order$paymentTransac[0];if(!transaction)return null;return transaction.paymentMethod.code;},[order]);var paymentData=useMemo(function(){return paymentMethods===null||paymentMethods===void 0?void 0:paymentMethods.find(function(p){return p.code===paymentMethodCode;});},[paymentMethodCode,paymentMethods]);var paymentImpl=useMemo(function(){return AVAILABLE_PAYMENT_METHOD.find(function(method){var _paymentData$paymentP;return method.code===(paymentData===null||paymentData===void 0?void 0:(_paymentData$paymentP=paymentData.paymentProvider)===null||_paymentData$paymentP===void 0?void 0:_paymentData$paymentP.code);});},[paymentData]);// Global transaction handler
// Currently simply redirect fulfill request to the active payment method.
useEffect(function(){setPaymentHandler({getSupportsRedirect:(paymentImpl===null||paymentImpl===void 0?void 0:paymentImpl.getSupportsRedirect)||function(){return true;},getCustomPayButton:function getCustomPayButton(){return paymentImpl===null||paymentImpl===void 0?void 0:paymentImpl.payButton;},fulfillTransaction:function(){var _fulfillTransaction=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2){var paymentTransactions,resolved;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:paymentTransactions=_ref2.paymentTransactions;_context.next=3;return paymentMethodRef.current.fulfillTransaction({paymentTransactions:paymentTransactions});case 3:resolved=_context.sent;return _context.abrupt("return",resolved);case 5:case"end":return _context.stop();}},_callee);}));function fulfillTransaction(_x){return _fulfillTransaction.apply(this,arguments);}return fulfillTransaction;}()});},[paymentImpl,setButtonLocked,setPaymentHandler]);// Map configured payment methods
var availablePaymentMethods=useMemo(function(){return paymentMethods.map(function(method){return _extends({},AVAILABLE_PAYMENT_METHOD.find(function(m){return m.code===method.paymentProvider.code;}),{internalCode:method.code,settings:method.settings});});},[paymentMethods]);// Change payment method.
var handleChangePayment=useCallback(/*#__PURE__*/function(){var _ref3=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(code){var meta,_args2=arguments;return _regeneratorRuntime.wrap(function _callee2$(_context2){while(1)switch(_context2.prev=_context2.next){case 0:meta=_args2.length>1&&_args2[1]!==undefined?_args2[1]:null;if(!(paymentMethodCode===code)){_context2.next=5;break;}setActivePaymentMeta(meta);setPaymentData({meta:meta});return _context2.abrupt("return");case 5:setLocked(true);_context2.next=8;return updateOrder({paymentTransactions:[{paymentMethod:{code:code}}]});case 8:_context2.next=10;return fetchOrder();case 10:setActivePaymentMeta(meta);setPaymentData({meta:meta});setLocked(false);case 13:case"end":return _context2.stop();}},_callee2);}));return function(_x2){return _ref3.apply(this,arguments);};}(),[setPaymentData,paymentMethodCode,setLocked,updateOrder,fetchOrder]);// API for the underlying payment methods.
var paymentMethodApi=useMemo(function(){return{registerPaymentMethod:function registerPaymentMethod(api){setButtonLocked(false);paymentMethodRef.current=api;}};},[setButtonLocked]);var store=useStore();// Ignore for ROPIS.
if(!needsPayment){return null;}// Render the respective payment method provider.
var _ref4=paymentImpl||{},Provider=_ref4.provider,Content=_ref4.content;return React.createElement(Context.Provider,{value:paymentMethodApi},React.createElement("div",{className:styles.section},React.createElement("h3",{className:styles.headline},i18n.text('checkout.payment.title')),React.createElement("div",{className:styles.buttons},availablePaymentMethods.map(function(method){return React.createElement(method.button,{key:method.internalCode,settings:method.settings,onChange:function onChange(meta){return handleChangePayment(method.internalCode,meta);},active:method.internalCode===paymentMethodCode,activePaymentMeta:activePaymentMeta});})),paymentImpl?React.createElement(Provider/**
             * 2025-01-10: Not 100% sure why a context is being passed here. It seems to work
             * without it, but since the payment component implementation has a high complexity,
             * but isn't really used right now in production shops, i kept it for now.
             * To enable compatibility with react-redux > 7, the "store" prop was added so that
             * Redux connected child components can still access the store.
             * Should be revisited when the "native checkout" gets relevance.
             */,{context:Context,store:store,data:paymentData,activePaymentMeta:activePaymentMeta},React.createElement(Content,null)):null));};PaymentMethodProvider.defaultProps={order:null,paymentMethods:null};export default connect(mapStateToProps,mapDispatchToProps)(PaymentMethodProvider);