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",