@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.11

package/checkout/paymentMethods/index.js

@@ -1,28 +1,197 @@
-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];/**
+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";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const 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)};};/**
+ */
+const mapStateToProps = state => ({
+  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()};/**
+ */
+const mapDispatchToProps = dispatch => ({
+  updateOrder: order => dispatch(updateCheckoutOrder(order)),
+  fetchOrder: () => dispatch(fetchCheckoutOrder())
+});
+const {
+  variables
+} = themeConfig;
+const styles = {
+  headline: css({
+    fontSize: '1.25rem',
+    fontWeight: 'normal',
+    margin: `0 0 ${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);
+ */
+const PaymentMethodProvider = ({
+  order,
+  paymentMethods,
+  fetchOrder,
+  updateOrder
+}) => {
+  const [activePaymentMeta, setActivePaymentMeta] = useState(null);
+  const {
+    setPaymentHandler,
+    setPaymentData,
+    needsPayment,
+    setButtonLocked,
+    setLocked
+  } = useContext(CheckoutContext);
+  const paymentMethodRef = useRef();
+
+  // Set active payment method to the orders first transaction.
+  const paymentMethodCode = useMemo(() => {
+    const transaction = order.paymentTransactions?.[0];
+    if (!transaction) return null;
+    return transaction.paymentMethod.code;
+  }, [order]);
+  const paymentData = useMemo(() => paymentMethods?.find(p => p.code === paymentMethodCode), [paymentMethodCode, paymentMethods]);
+  const paymentImpl = useMemo(() => AVAILABLE_PAYMENT_METHOD.find(method => method.code === paymentData?.paymentProvider?.code), [paymentData]);
+
+  // Global transaction handler
+  // Currently simply redirect fulfill request to the active payment method.
+  useEffect(() => {
+    setPaymentHandler({
+      getSupportsRedirect: paymentImpl?.getSupportsRedirect || (() => true),
+      getCustomPayButton: () => paymentImpl?.payButton,
+      fulfillTransaction: async ({
+        paymentTransactions
+      }) => {
+        const resolved = await paymentMethodRef.current.fulfillTransaction({
+          paymentTransactions
+        });
+        return resolved;
+      }
+    });
+  }, [paymentImpl, setButtonLocked, setPaymentHandler]);
+
+  // Map configured payment methods
+  const availablePaymentMethods = useMemo(() => paymentMethods.map(method => ({
+    ...AVAILABLE_PAYMENT_METHOD.find(m => m.code === method.paymentProvider.code),
+    internalCode: method.code,
+    settings: method.settings
+  })), [paymentMethods]);
+
+  // Change payment method.
+  const handleChangePayment = useCallback(async (code, meta = null) => {
+    if (paymentMethodCode === code) {
+      setActivePaymentMeta(meta);
+      setPaymentData({
+        meta
+      });
+      return;
+    }
+    setLocked(true);
+    await updateOrder({
+      paymentTransactions: [{
+        paymentMethod: {
+          code
+        }
+      }]
+    });
+    await fetchOrder();
+    setActivePaymentMeta(meta);
+    setPaymentData({
+      meta
+    });
+    setLocked(false);
+  }, [setPaymentData, paymentMethodCode, setLocked, updateOrder, fetchOrder]);
+
+  // API for the underlying payment methods.
+  const paymentMethodApi = useMemo(() => ({
+    registerPaymentMethod: api => {
+      setButtonLocked(false);
+      paymentMethodRef.current = api;
+    }
+  }), [setButtonLocked]);
+  const store = useStore();
+
+  // Ignore for ROPIS.
+  if (!needsPayment) {
+    return null;
+  }
+
+  // Render the respective payment method provider.
+  const {
+    provider: Provider,
+    content: Content
+  } = paymentImpl || {};
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: paymentMethodApi,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: styles.section,
+      children: [/*#__PURE__*/_jsx("h3", {
+        className: styles.headline,
+        children: i18n.text('checkout.payment.title')
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.buttons,
+        children: availablePaymentMethods.map(method => /*#__PURE__*/_jsx(method.button, {
+          settings: method.settings,
+          onChange: meta => handleChangePayment(method.internalCode, meta),
+          active: method.internalCode === paymentMethodCode,
+          activePaymentMeta: activePaymentMeta
+        }, method.internalCode))
+      }), paymentImpl ? /*#__PURE__*/_jsx(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,
+        children: /*#__PURE__*/_jsx(Content, {})
+      }) : null]
+    })
+  });
+};
+PaymentMethodProvider.defaultProps = {
+  order: null,
+  paymentMethods: null
+};
+export default connect(mapStateToProps, mapDispatchToProps)(PaymentMethodProvider);

package/checkout/paymentMethods/paypal/PaypalButton.js

@@ -1,5 +1,22 @@
-import React from'react';import{isAvailable}from'@shopgate/native-modules';import PaypalButtonWeb from"./PaypalButtonWeb";import PaypalButtonApp from"./PaypalButtonApp";/**
+import React from 'react';
+import { isAvailable } from '@shopgate/native-modules';
+import PaypalButtonWeb from "./PaypalButtonWeb";
+import PaypalButtonApp from "./PaypalButtonApp";
+
+/**
  * Paypal
  * @param {Object} props Props
  * @returns {JSX}
- */var PaypalButton=function PaypalButton(props){if(!isAvailable()){return React.createElement(PaypalButtonWeb,props);}return React.createElement(PaypalButtonApp,props);};export default PaypalButton;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const PaypalButton = props => {
+  if (!isAvailable()) {
+    return /*#__PURE__*/_jsx(PaypalButtonWeb, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(PaypalButtonApp, {
+    ...props
+  });
+};
+export default PaypalButton;

package/checkout/paymentMethods/paypal/PaypalButtonApp.js

@@ -1,4 +1,54 @@
-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);});};}import React,{useEffect}from'react';import{css}from'glamor';import PropTypes from'prop-types';import{PayPalRiskCheck}from'@shopgate/native-modules';import{useCheckoutContext}from"../../hooks/common";import Button from"../../components/PaymentMethodButton";import paypalLogoUrl from"./paypal_logo.png";var styles={logo:css({width:'60%'}).toString()};/**
+import React, { useEffect } from 'react';
+import { css } from 'glamor';
+import PropTypes from 'prop-types';
+import { PayPalRiskCheck } from '@shopgate/native-modules';
+import { useCheckoutContext } from "../../hooks/common";
+import Button from "../../components/PaymentMethodButton";
+import paypalLogoUrl from "./paypal_logo.png";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  logo: css({
+    width: '60%'
+  }).toString()
+};
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var PaypalButtonApp=function PaypalButtonApp(props){var settings=props.settings;var _useCheckoutContext=useCheckoutContext(),setLocked=_useCheckoutContext.setLocked;useEffect(function(){if(!settings)return;/** Async handler */var handler=/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:if(!(PayPalRiskCheck===null||PayPalRiskCheck===void 0?void 0:PayPalRiskCheck.setup)){_context.next=10;break;}setLocked(true);_context.prev=2;_context.next=5;return PayPalRiskCheck.setup(settings.env==='sandbox');case 5:_context.next=9;break;case 7:_context.prev=7;_context.t0=_context["catch"](2);case 9:setLocked(false);case 10:case"end":return _context.stop();}},_callee,null,[[2,7]]);}));return function handler(){return _ref.apply(this,arguments);};}();handler();},[setLocked,settings]);return React.createElement(Button,props,React.createElement("img",{className:styles.logo,src:paypalLogoUrl,alt:"PayPal"}));};PaypalButtonApp.defaultProps={settings:null};export default PaypalButtonApp;
+ */
+const PaypalButtonApp = props => {
+  const {
+    settings
+  } = props;
+  const {
+    setLocked
+  } = useCheckoutContext();
+  useEffect(() => {
+    if (!settings) return;
+    /** Async handler */
+    const handler = async () => {
+      if (PayPalRiskCheck?.setup) {
+        setLocked(true);
+        try {
+          await PayPalRiskCheck.setup(settings.env === 'sandbox');
+        } catch (e) {
+          //
+        }
+        setLocked(false);
+      }
+    };
+    handler();
+  }, [setLocked, settings]);
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    children: /*#__PURE__*/_jsx("img", {
+      className: styles.logo,
+      src: paypalLogoUrl,
+      alt: "PayPal"
+    })
+  });
+};
+PaypalButtonApp.defaultProps = {
+  settings: null
+};
+export default PaypalButtonApp;

package/checkout/paymentMethods/paypal/PaypalButtonWeb.js

@@ -1,8 +1,94 @@
-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()};/**
+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";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const 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;
+ */
+const PaypalButton = ({
+  settings,
+  onChange,
+  activePaymentMeta: activeFundingSource,
+  active
+}) => {
+  const {
+    setLocked,
+    order
+  } = useCheckoutContext();
+  const paypal = usePaypal();
+
+  // Initialize paypal sdk.
+  useEffect(() => {
+    if (!settings || !order) return;
+    /** Async handler */
+    const handler = async () => {
+      setLocked(true);
+      try {
+        await loadWebSdk(settings, order);
+      } catch (e) {
+        //
+      }
+      setLocked(false);
+    };
+    handler();
+  }, [order, setLocked, settings]);
+
+  // Create paypal markers (just logic-less logos for each payment method).
+  const marks = useMemo(() => {
+    if (!paypal) return [];
+    return paypal.getFundingSources().map(fundingSource => {
+      const mark = window.paypal.Marks({
+        fundingSource
+      });
+      if (!mark.isEligible()) return null;
+      return [mark, fundingSource];
+    }).filter(m => !!m);
+  }, [paypal]);
+
+  // Render marks to dom once ready.
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      marks.forEach(([mark], index) => {
+        mark.render(`#sg-paypal-button-${index}`);
+      });
+    }, []);
+  }, [marks]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: marks.map(([, fundingSource], index) => {
+      const isButtonActive = fundingSource === paypal.FUNDING.PAYPAL && !activeFundingSource ? active : active && fundingSource === activeFundingSource;
+      return /*#__PURE__*/_jsx(Button, {
+        onChange: () => onChange(fundingSource),
+        active: isButtonActive,
+        children: /*#__PURE__*/_jsx("div", {
+          id: `sg-paypal-button-${index}`,
+          className: styles.button
+        })
+      }, fundingSource);
+    })
+  });
+};
+PaypalButton.defaultProps = {
+  settings: null,
+  activePaymentMeta: null
+};
+export default PaypalButton;

package/checkout/paymentMethods/paypal/PaypalPayButton.js

@@ -1,12 +1,126 @@
-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()};/**
+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";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const 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);
+ */
+const PaypalPayButton = ({
+  // eslint-disable-next-line no-shadow
+  disabled,
+  onSubmit,
+  onValidate,
+  showModal
+}) => {
+  const {
+    paymentData,
+    paymentTransactions
+  } = useCheckoutContext();
+  const [paypalActions, setPaypalActions] = useState(null);
+  const paypal = usePaypal();
+  const paypalButton = useRef(null);
+  const button = useRef(null);
+  const fundingSource = 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.
+  const formActions = useRef({});
+  useEffect(() => {
+    formActions.current = {
+      onSubmit,
+      onValidate
+    };
+  }, [onSubmit, onValidate]);
+
+  // Trigger rendering the paypal button whenever a property changes.
+  useLayoutEffect(() => {
+    if (!paypal) return;
+    if (typeof fundingSource === 'object') return;
+    if (paypalButton.current) {
+      paypalButton.current.close();
+    }
+    const customSettings = getThemeSettings('PayPal') || {};
+    paypalButton.current = paypal.Buttons({
+      fundingSource: fundingSource || paypal.FUNDING.PAYPAL,
+      createOrder: () => {
+        const externalCode = paymentTransactions[0]?.externalCode;
+        return externalCode;
+      },
+      onInit: (_, actions) => {
+        // Here again thanks paypal, there is no way access the actions outside these handlers.
+        setPaypalActions(actions);
+      },
+      onClick: (_, actions) => {
+        // Trigger manual form validation to comply to paypal standards.
+        const isValid = formActions.current.onValidate();
+        if (isValid && !disabled) {
+          return actions.resolve();
+        }
+        return actions.reject();
+      },
+      onApprove: async (_, actions) => {
+        const redirect = await formActions.current.onSubmit();
+        if (redirect) {
+          showModal({
+            type: MODAL_PIPELINE_ERROR,
+            title: null,
+            confirm: null,
+            dismiss: 'modal.ok',
+            message: 'checkout.errors.paypalFunding'
+          });
+          actions.restart();
+        }
+      },
+      style: {
+        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(() => {
+    if (!paypalActions) return;
+    if (disabled) {
+      paypalActions.disable();
+      return;
+    }
+    paypalActions.enable();
+  }, [disabled, paypalActions]);
+  if (typeof fundingSource === 'object') return null;
+  if (!paypal) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("h3", {
+      className: styles.headline,
+      children: i18n.text('checkout.finalizePayment')
+    }), /*#__PURE__*/_jsx("div", {
+      ref: button
+    })]
+  });
+};
+const mapDispatchToProps = {
+  showModal
+};
+export default connect(null, mapDispatchToProps)(PaypalPayButton);

package/checkout/paymentMethods/paypal/PaypalProvider.js

@@ -1,6 +1,43 @@
-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);});};}import{useEffect,useContext}from'react';import PropTypes from'prop-types';import{isAvailable,PayPalRiskCheck}from'@shopgate/native-modules';import PaymentContext from"../context";/**
+import { useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { isAvailable, PayPalRiskCheck } from '@shopgate/native-modules';
+import PaymentContext from "../context";
+
+/**
  * Paypal provider
  * @return {JSX}
- */var PaypalProvider=function PaypalProvider(_ref){var activeFundingSource=_ref.activePaymentMeta;var _useContext=useContext(PaymentContext),registerPaymentMethod=_useContext.registerPaymentMethod;useEffect(function(){// Register payment method.
-registerPaymentMethod({// Paypal doesn't need to fulfill any transactions.
-fulfillTransaction:function(){var _fulfillTransaction=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2){var paymentTransactions,_paymentTransactions$,id;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:paymentTransactions=_ref2.paymentTransactions;if(!isAvailable()){_context.next=10;break;}id=paymentTransactions===null||paymentTransactions===void 0?void 0:(_paymentTransactions$=paymentTransactions[0])===null||_paymentTransactions$===void 0?void 0:_paymentTransactions$.id;_context.prev=3;_context.next=6;return PayPalRiskCheck.submit(id);case 6:_context.next=10;break;case 8:_context.prev=8;_context.t0=_context["catch"](3);case 10:return _context.abrupt("return",[]);case 11:case"end":return _context.stop();}},_callee,null,[[3,8]]);}));function fulfillTransaction(_x){return _fulfillTransaction.apply(this,arguments);}return fulfillTransaction;}()});},[activeFundingSource,registerPaymentMethod]);return null;};PaypalProvider.propTypes={activePaymentMeta:PropTypes.string};PaypalProvider.defaultProps={activePaymentMeta:null};export default PaypalProvider;
+ */
+const PaypalProvider = ({
+  activePaymentMeta: activeFundingSource
+}) => {
+  const {
+    registerPaymentMethod
+  } = useContext(PaymentContext);
+  useEffect(() => {
+    // Register payment method.
+    registerPaymentMethod({
+      // Paypal doesn't need to fulfill any transactions.
+      fulfillTransaction: async ({
+        paymentTransactions
+      }) => {
+        if (isAvailable()) {
+          const id = paymentTransactions?.[0]?.id;
+          try {
+            await PayPalRiskCheck.submit(id);
+          } catch (e) {
+            //
+          }
+        }
+        return [];
+      }
+    });
+  }, [activeFundingSource, registerPaymentMethod]);
+  return null;
+};
+PaypalProvider.propTypes = {
+  activePaymentMeta: PropTypes.string
+};
+PaypalProvider.defaultProps = {
+  activePaymentMeta: null
+};
+export default PaypalProvider;

package/checkout/paymentMethods/paypal/index.js

@@ -1 +1,13 @@
-import{isAvailable}from'@shopgate/native-modules';import Provider from"./PaypalProvider";import Button from"./PaypalButton";import PayButton from"./PaypalPayButton";import{hasWebBridge}from"../../../core";export default{code:'paypal',provider:Provider,button:Button,content:function content(){return null;},payButton:!isAvailable()?PayButton:null,getSupportsRedirect:function getSupportsRedirect(){return!hasWebBridge();}};
+import { isAvailable } from '@shopgate/native-modules';
+import Provider from "./PaypalProvider";
+import Button from "./PaypalButton";
+import PayButton from "./PaypalPayButton";
+import { hasWebBridge } from "../../../core";
+export default {
+  code: 'paypal',
+  provider: Provider,
+  button: Button,
+  content: () => null,
+  payButton: !isAvailable() ? PayButton : null,
+  getSupportsRedirect: () => !hasWebBridge()
+};