Added elements for mobile payments. BOD-90

client/src/pages/manage/manage.page.component.jsx

@@ -165,15 +165,20 @@ export function Manage({ match, conflict }) {
                 <LoadingSpinner message={t("general.labels.loadingapp")} />
               }
             >
+              <Elements stripe={stripePromise}>
+                <PaymentModalContainer />
+              </Elements>
               <BreadCrumbs />
               <EnterInvoiceModalContainer />
               <JobCostingModal />
               <EmailOverlayContainer />
               <TimeTicketModalContainer />
               <PrintCenterModalContainer />
-              <Elements stripe={stripePromise}>
-                <PaymentModalContainer />
-              </Elements>
+              <Route
+                exact
+                path={`${match.path}/_test`}
+                component={TestComponent}
+              />
               <Route exact path={`${match.path}`} component={ManageRootPage} />
               <Route
                 exact
@@ -338,7 +343,6 @@ export function Manage({ match, conflict }) {
                 path={`${match.path}/scoreboard`}
                 component={Scoreboard}
               />
-
               <Route
                 exact
                 path={`${match.path}/timetickets`}

client/src/pages/mobile-payment/mobile-payment.component.jsx

@@ -0,0 +1,93 @@
+import axios from "axios";
+import React, { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { auth, logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { TemplateList } from "../../utils/TemplateConstants";
+import {
+  PaymentRequestButtonElement,
+  useStripe,
+  Elements,
+  useElements,
+} from "@stripe/react-stripe-js";
+
+export default function MobilePaymentComponent() {
+  const stripe = useStripe();
+
+  const [paymentRequest, setPaymentRequest] = useState(null);
+  useEffect(() => {
+    if (stripe) {
+      console.log("in useeff");
+      const pr = stripe.paymentRequest({
+        country: "CA",
+        displayItems: [{ label: "Deductible", amount: 1 }],
+        currency: "cad",
+        total: {
+          label: "Demo total",
+          amount: 1,
+        },
+        requestPayerName: true,
+        requestPayerEmail: true,
+      });
+
+      console.log("pr", pr);
+      // Check the availability of the Payment Request API.
+      pr.canMakePayment().then((result) => {
+        console.log("result", result);
+        if (result) {
+          setPaymentRequest(pr);
+        } else {
+          var details = {
+            total: { label: "", amount: { currency: "CAD", value: "0.00" } },
+          };
+          // new PaymentRequest(
+          //   [{ supportedMethods: ["basic-card"] }],
+          //   {}
+          //   //  details
+          // ).show();
+        }
+      });
+    }
+  }, [stripe]);
+
+  if (paymentRequest) {
+    // paymentRequest.on("paymentmethod", async (ev) => {
+    //     //Call server side to get the client secret
+    //   // Confirm the PaymentIntent without handling potential next actions (yet).
+    //   const { error: confirmError } = await stripe.confirmCardPayment(
+    //     clientSecret,
+    //     { payment_method: ev.paymentMethod.id },
+    //     { handleActions: false }
+    //   );
+
+    //   if (confirmError) {
+    //     // Report to the browser that the payment failed, prompting it to
+    //     // re-show the payment interface, or show an error message and close
+    //     // the payment interface.
+    //     ev.complete("fail");
+    //   } else {
+    //     // Report to the browser that the confirmation was successful, prompting
+    //     // it to close the browser payment method collection interface.
+    //     ev.complete("success");
+    //     // Let Stripe.js handle the rest of the payment flow.
+    //     const { error, paymentIntent } = await stripe.confirmCardPayment(
+    //       clientSecret
+    //     );
+    //     if (error) {
+    //       // The payment failed -- ask your customer for a new payment method.
+    //     } else {
+    //       // The payment has succeeded.
+    //     }
+    //   }
+    // });
+    return (
+      <div style={{ height: "300px" }}>
+        <PaymentRequestButtonElement options={{ paymentRequest }} />
+      </div>
+    );
+  }
+
+  return <div></div>;
+}

client/src/pages/mobile-payment/mobile-payment.container.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import MobilePaymentComponent from "./mobile-payment.component";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+
+const stripePromise = new Promise((resolve, reject) => {
+  resolve(
+    loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
+      stripeAccount: "acct_1Fa7lFIEahEZW8b4",
+    })
+  );
+});
+
+export default function MobilePaymentContainer() {
+  return (
+    <div>
+      The mobile payment container.
+      <Elements stripe={stripePromise}>
+        <MobilePaymentComponent />
+      </Elements>
+    </div>
+  );
+}