incorporate paypal checking out

change paypal checkout and confirm screens load inside new website
and not redirecting users to old site.

jam-ui/src/components/dashboard/JKDashboardMain.js

@@ -52,6 +52,7 @@ import JKCheckout from '../shopping-cart/JKCheckout';
 import JKCheckoutSuccess from '../shopping-cart/JKCheckoutSuccess';
 import JKMyJamTracks from '../jamtracks/JKMyJamTracks';
 import JKJamTrackShow from '../jamtracks/JKJamTrackShow';
+import JKPayPalConfirmation from '../shopping-cart/JKPayPalConfirmation';
 
 
 //import loadable from '@loadable/component';
@@ -307,6 +308,7 @@ function JKDashboardMain() {
           <PrivateRoute path="/jamtracks" component={JKJamTracksFilter} />
           <PrivateRoute path="/my-jamtracks" component={JKMyJamTracks} />
           <PrivateRoute path="/shopping-cart" component={JKShoppingCart} />
+          <PrivateRoute path="/checkout/paypal/confirm" component={JKPayPalConfirmation} />
           <PrivateRoute path="/checkout/success" component={JKCheckoutSuccess} />
           <PrivateRoute path="/checkout" component={JKCheckout} />
           <PrivateRoute path="/applaunch" component={JKAppLaunch} />

jam-ui/src/components/public/JKDownloadsLegacy.js

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react'
 import { detectOS, isAppleSilicon } from '../../helpers/utils'
 import { getClientDownloads } from '../../helpers/rest'
 import { Link } from 'react-router-dom'
-const DownloadButtonWindowsLegacy = '../../assets/img/downloads/Download-Button-Windows-Legacy.svg'
-const DownloadButtonMacLegacy = '../../assets/img/downloads/Download-Button-Mac-Legacy.svg'
+const DownloadButtonWindowsLegacy = '/img/downloads/Download-Button-Windows-Legacy.svg'
+const DownloadButtonMacLegacy = '/img/downloads/Download-Button-Mac-Legacy.svg'
 
 const JKDownloadsLegacy = () => {
   const [currentOS, setCurrentOS] = useState(null)

jam-ui/src/components/shopping-cart/JKCheckout.js

@@ -284,6 +284,7 @@ const JKCheckout = () => {
 
   const handoverToPaypal = () => {
     // Handover to Paypal
+    setSubmitting(true);
     window.location = `${process.env.REACT_APP_CLIENT_BASE_URL}/paypal/checkout/start`;
   };
 

jam-ui/src/components/shopping-cart/JKPayPalConfirmation.js

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react'
+import ContentWithAsideLayout from '../../layouts/ContentWithAsideLayout';
+import CheckoutAside from './checkout/CheckoutAside';
+import { useResponsive } from '@farfetch/react-context-responsive';
+import { useShoppingCart } from '../../hooks/useShoppingCart';
+import FalconCardHeader from '../common/FalconCardHeader';
+import { Card, CardBody, Button } from 'reactstrap';
+import { useContext } from 'react';
+import AppContext from '../../context/Context';
+import { paypalPlaceOrder } from '../../helpers/rest';
+import { toast } from 'react-toastify';
+import { useHistory } from 'react-router-dom';
+
+const JKPayPalConfirmation = () => {
+  const { greaterThan } = useResponsive();
+  const { cartTotal: payableTotal, loading: cartLoading, getCartItems, shoppingCart } = useShoppingCart();
+  const { currency } = useContext(AppContext);
+  const history = useHistory();
+  const [submitting, setSubmitting] = useState(false);
+
+
+  useEffect(() => {
+    getCartItems()
+  }, [])
+
+  const placeOrder = () => {
+    setSubmitting(true);
+    paypalPlaceOrder()
+      .then(res => {
+        console.log(res);
+        toast.success('PayPal Order Placed');
+        history.push('/my-jamtracks');
+      })
+      .catch(err => {
+        if(err.status === 404){
+          toast.error('PayPal authorization has expired. Please restart the PayPal confirmation process.');
+        }else if(err.status === 422){
+          toast.error(`PayPal Purchase Error: ${err.message}`);
+        }else {
+          toast.error('PayPal Error. please contact support@jamkazam.com');
+        }
+      }).finally(() => {
+        setSubmitting(false);
+      });
+  }
+
+  const cancelOrder = () => {
+    history.push('/jamtracks');
+  }
+
+  return (
+    <div style={{ width: greaterThan.sm ? '75%' : '100%' }} className="mx-auto">
+      <ContentWithAsideLayout
+        aside={cartLoading ? <div>Cart Loading...</div> : <CheckoutAside shoppingCart={shoppingCart} />}
+        isStickyAside={false}
+      >
+        <Card className="mb-3">
+          <FalconCardHeader title="Confirm your PayPal Payment" titleTag="h5" />
+          <CardBody>
+            <p>You have not yet made a payment via Paypal. Please review your purchase and confirm or cancel.</p>
+            {cartLoading ? <div>Loading...</div> :
+              <div>
+                <h5 className='my-3'>Payable Total: {currency}{payableTotal}</h5>
+                <Button color="primary" className='fs--1 me-2 mr-2' onClick={placeOrder}>
+                  {submitting ? 'Processing...' : 'Confirm Payment' }
+                </Button>
+                <Button outline
+                  color="secondary"
+                  disabled={submitting}
+                  className="fs--1" onClick={cancelOrder}>Cancel Payment</Button>
+              </div>
+            }
+
+          </CardBody>
+        </Card>
+      </ContentWithAsideLayout>
+    </div>
+  )
+}
+
+export default JKPayPalConfirmation

jam-ui/src/helpers/rest.js

@@ -661,3 +661,15 @@ export const getClientDownloads = () => {
       .catch(error => reject(error));
   });
 }
+
+//paypalPlaceOrder
+export const paypalPlaceOrder = (options = {}) => {
+  return new Promise((resolve, reject) => {
+    apiFetch(`/paypal/checkout/confirm`, {
+      method: 'POST',
+      body: JSON.stringify(options)
+    })
+      .then(response => resolve(response))
+      .catch(error => reject(error));
+  });
+};

web/app/controllers/api_pay_pal_controller.rb

@@ -10,7 +10,8 @@ class ApiPayPalController < ApiController
   end
 
   def start_checkout
-    cancel_path = params[:path] ? params[:path] : ERB::Util.url_encode('/client#/checkoutPayment')
+    #cancel_path = params[:path] ? params[:path] : ERB::Util.url_encode('/client#/checkoutPayment')
+    cancel_url = params[:path] ? params[:path] : ERB::Util.url_encode(ApplicationHelper.spa_base_uri(request) + '/checkout')
 
     tax = true
     tax_rate = tax ? 0.0825 : 0
@@ -26,8 +27,8 @@ class ApiPayPalController < ApiController
             :Version => "117.0",
             :SetExpressCheckoutRequestDetails =>
                 {
-                    :ReturnURL => ApplicationHelper.base_uri(request) + '/auth/paypal/checkout',
-                    :CancelURL => ApplicationHelper.base_uri(request) + '/auth/paypal/checkout?cancel=1&path=' + cancel_path,
+                    :ReturnURL => ApplicationHelper.spa_base_uri(request) + '/checkout/paypal/confirm',
+                    :CancelURL => cancel_url,
                   #  :NoShipping => "1",
                   #  :ReqConfirmShipping => "0",
                   #  :ReqBillingAddress => "1",

web/app/controllers/sessions_controller.rb

@@ -50,7 +50,7 @@ class SessionsController < ApplicationController
     # on failure, cancel=1
 
     if params[:cancel] == '1' || params[:cancel] == 1
-      redirect_to params[:path] ? params[:path] : '/client#/jamtrack'
+      redirect_to params[:path] ? params[:path] : ApplicationHelper.spa_base_uri(request) + '/jamtracks'
       return
     end
 
@@ -85,7 +85,8 @@ class SessionsController < ApplicationController
       puts "Paypal params: #{params.inspect}"
     end
 
-    redirect_to '/client#/paypal/confirm'
+    #redirect_to '/client#/paypal/confirm'
+    redirect_to ApplicationHelper.spa_base_uri(request) + '/checkout/paypal/confirm'
   end
 
 # OAuth docs