Added elements for mobile payments. BOD-90

client/src/components/_test/test.component.jsx

@@ -1,11 +1,17 @@
 import axios from "axios";
-import React from "react";
+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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -15,86 +21,53 @@ const mapDispatchToProps = (dispatch) => ({
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(function Test({ bodyshop, setEmailOptions }) {
-  const handle = async () => {
-    const response = await axios.post(
-      "/accounting/iif/receivables",
-      { jobId: "661dd1d5-bf06-426f-8bd2-bd9e41de8eb1" },
-      {
-        headers: {
-          Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
+function Test({ bodyshop, setEmailOptions }) {
+  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: 1099 }],
+        currency: "cad",
+        total: {
+          label: "Demo total",
+          amount: 1099,
         },
-      }
-    );
-    console.log("handle -> result", response);
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-    const link = document.createElement("a");
-    link.href = url;
-    link.setAttribute(
-      "download",
-      response.headers.filename || "receivables.iif"
-    ); //or any other extension
-    document.body.appendChild(link);
-    link.click();
-  };
+        requestPayerName: true,
+        requestPayerEmail: true,
+      });
 
-  const handleLocal = async () => {
-    try {
-      const response = await axios.post(
-        "http://localhost:1337/qb/receivables",
-        { jobId: "661dd1d5-bf06-426f-8bd2-bd9e41de8eb1" },
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken(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();
         }
-      );
-      console.log("handle -> result", response);
-    } catch (error) {
-      console.log("error", JSON.stringify(error));
+      });
     }
-  };
+  }, [stripe]);
 
-  const handleQbxml = async () => {
-    const response = await axios.post(
-      "/accounting/qbxml/receivables",
-      { jobId: "661dd1d5-bf06-426f-8bd2-bd9e41de8eb1" },
-      {
-        headers: {
-          Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
-        },
-      }
+  if (paymentRequest) {
+    console.log("****************render");
+    return (
+      <div style={{ height: "300px" }}>
+        <PaymentRequestButtonElement options={{ paymentRequest }} />
+      </div>
     );
-    console.log("handle -> XML", response);
-
-    try {
-      const response2 = await axios.post(
-        "http://localhost:1337/qb/receivables",
-        response.data,
-        {
-          headers: {
-            Authorization: `Bearer ${await auth.currentUser.getIdToken(true)}`,
-          },
-        }
-      );
-      console.log("handle -> result", response2);
-    } catch (error) {
-      console.log("error", error, JSON.stringify(error));
-    }
-
-    // const url = window.URL.createObjectURL(new Blob([response.data]));
-    // const link = document.createElement("a");
-    // link.href = url;
-    // link.setAttribute(
-    //   "download",
-    //   response.headers.filename || "receivables.iif"
-    // ); //or any other extension
-    // document.body.appendChild(link);
-    // link.click();
-  };
+  }
 
   return (
     <div>
@@ -116,9 +89,6 @@ export default connect(
       >
         send email
       </button>
-      <button onClick={handle}>Hit with Header.</button>
-      <button onClick={handleLocal}>Hit Localhost with Header.</button>
-      <button onClick={handleQbxml}>Qbxml</button>
       <button
         onClick={() => {
           logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
@@ -128,4 +98,6 @@ export default connect(
       </button>
     </div>
   );
-});
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Test);