Added payment type to modal and lists BOD-230

client/src/components/jobs-detail-financial/jobs-detail-financial.component.jsx

@@ -37,6 +37,7 @@ export function JobsDetailFinancials({ job, bodyshop }) {
                   <th>{t("payments.fields.payer")}</th>
                   <th>{t("payments.fields.amount")}</th>
                   <th>{t("payments.fields.memo")}</th>
+                  <th>{t("payments.fields.type")}</th>
                   <th>{t("payments.fields.transactionid")}</th>
                   <th>{t("payments.fields.stripeid")}</th>
                 </tr>
@@ -52,6 +53,7 @@ export function JobsDetailFinancials({ job, bodyshop }) {
                       <CurrencyFormatter>{p.amount}</CurrencyFormatter>
                     </td>
                     <td>{p.memo}</td>
+                    <td>{p.type}</td>
                     <td>{p.transactionid}</td>
                     <td>
                       {p.stripeid ? (

client/src/components/payment-form/payment-form.component.jsx

@@ -1,5 +1,5 @@
 import { CardElement } from "@stripe/react-stripe-js";
-import { Checkbox, Form, Input, Radio } from "antd";
+import { Checkbox, Form, Input, Radio, Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -65,6 +65,25 @@ export function PaymentFormComponent({
         <Input />
       </Form.Item>
 
+      <Form.Item
+        label={t("payments.labels.type")}
+        name="type"
+        rules={[
+          {
+            required: true,
+            message: t("general.validation.required"),
+          },
+        ]}
+      >
+        <Select>
+          <Select.Option value="Visa">Visa</Select.Option>
+          <Select.Option value="Mastercard">Mastercard</Select.Option>
+          <Select.Option value="AMEX">AMEX</Select.Option>
+          <Select.Option value="Discover">Discover</Select.Option>
+          <Select.Option value="Cash">Cash</Select.Option>
+        </Select>
+      </Form.Item>
+
       <Form.Item
         label={t("payments.labels.electronicpayment")}
         name="useStripe"

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -78,6 +78,11 @@ export default function PaymentsListPaginated({
       dataIndex: "memo",
       key: "memo",
     },
+    {
+      title: t("payments.fields.type"),
+      dataIndex: "type",
+      key: "type",
+    },
     {
       title: t("payments.fields.transactionid"),
       dataIndex: "transactionid",

client/src/graphql/payments.queries.js

@@ -36,6 +36,7 @@ export const QUERY_ALL_PAYMENTS_PAGINATED = gql`
       }
       transactionid
       memo
+      type
       amount
       stripeid
       exportedat

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

@@ -1,17 +1,8 @@
-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,
+  useStripe
 } from "@stripe/react-stripe-js";
+import React, { useEffect, useState } from "react";
 
 export default function MobilePaymentComponent() {
   const stripe = useStripe();
@@ -39,9 +30,9 @@ export default function MobilePaymentComponent() {
         if (result) {
           setPaymentRequest(pr);
         } else {
-          var details = {
-            total: { label: "", amount: { currency: "CAD", value: "0.00" } },
-          };
+          // var details = {
+          //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
+          // };
           // new PaymentRequest(
           //   [{ supportedMethods: ["basic-card"] }],
           //   {}
@@ -53,35 +44,36 @@ export default function MobilePaymentComponent() {
   }, [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 }
-    //   );
+    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.
-    //     }
-    //   }
-    // });
+      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.
+          console.log('paymentIntent', paymentIntent)
+        }
+      }
+    });
     return (
       <div style={{ height: "300px" }}>
         <PaymentRequestButtonElement options={{ paymentRequest }} />

client/src/translations/en_us/common.json

@@ -1054,7 +1054,8 @@
 				"electronicpayment": "Use Electronic Payment Processing?",
 				"new": "New Payment",
 				"signup": "Please contact support to sign up for electronic payments.",
-				"title": "Payments"
+				"title": "Payments",
+				"type": "Type"
 			},
 			"successes": {
 				"payment": "Payment created successfully. ",

client/src/translations/es/common.json

@@ -1054,7 +1054,8 @@
 				"electronicpayment": "",
 				"new": "",
 				"signup": "",
-				"title": ""
+				"title": "",
+				"type": ""
 			},
 			"successes": {
 				"payment": "",

client/src/translations/fr/common.json

@@ -1054,7 +1054,8 @@
 				"electronicpayment": "",
 				"new": "",
 				"signup": "",
-				"title": ""
+				"title": "",
+				"type": ""
 			},
 			"successes": {
 				"payment": "",