added the card payment option on actions and menu

client/src/components/header/header.component.jsx

@@ -70,6 +70,8 @@ const mapDispatchToProps = (dispatch) => ({
   setReportCenterContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "reportCenter" })),
   signOutStart: () => dispatch(signOutStart()),
+  setCardPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
 });
 
 function Header({
@@ -83,6 +85,7 @@ function Header({
   setPaymentContext,
   setReportCenterContext,
   recentItems,
+  setCardPaymentContext,
 }) {
   const { Simple_Inventory } = useTreatments(
     ["Simple_Inventory"],
@@ -240,6 +243,19 @@ function Header({
           >
             {t("menus.header.enterpayment")}
           </Menu.Item>
+          {/* TODO: Enter Card Payment */}
+          <Menu.Item
+            key="entercardpayments"
+            onClick={() => {
+              setCardPaymentContext({
+                actions: {},
+                context: null,
+              });
+            }}
+            icon={<Icon component={FaCreditCard} />}
+          >
+            {t("menus.header.entercardpayment")}
+          </Menu.Item>
           <Menu.Divider key="div5" />
           <Menu.Item key="timetickets" icon={<FieldTimeOutlined />}>
             <Link to="/manage/timetickets">

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.component.jsx

@@ -38,6 +38,8 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(setModalContext({ context: context, modal: "jobCosting" })),
   setTimeTicketContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "timeTicket" })),
+  setCardPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
 });
 
 export function JobsDetailHeaderActions({
@@ -51,6 +53,7 @@ export function JobsDetailHeaderActions({
   setJobCostingContext,
   jobRO,
   setTimeTicketContext,
+  setCardPaymentContext,
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
@@ -221,6 +224,19 @@ export function JobsDetailHeaderActions({
       >
         {t("menus.header.enterpayment")}
       </Menu.Item>
+      {/* TODO: Add Card payment */}
+      <Menu.Item
+        key="entercardpayments"
+        disabled={!job.converted}
+        onClick={() => {
+          setCardPaymentContext({
+            actions: {},
+            context: { jobid: job.id },
+          });
+        }}
+      >
+        {t("menus.header.entercardpayment")}
+      </Menu.Item>
       <Menu.Item key="cccontract" disabled={jobRO || !job.converted}>
         <Link
           to={{

client/src/graphql/payment_response.queries.js

@@ -0,0 +1,40 @@
+import { gql } from "@apollo/client";
+
+export const INSERT_PAYMENT_RESPONSE = gql`
+  mutation INSERT_PAYMENT_RESPONSE(
+    $paymentResponse: [payment_response_insert_input!]!
+  ) {
+    insert_payment_response(objects: $paymentResponse) {
+      returning {
+        id
+      }
+    }
+  }
+`;
+
+export const QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID = gql`
+  query QUERY_PAYMENT_RESPONSE_BY_PK($paymentid: uuid!) {
+    payment_response(where: { paymentid: { _eq: $paymentid } }) {
+      id
+      amount
+      declinereason
+      ext_paymentid
+      successful
+      response
+    }
+  }
+`;
+
+export const QUERY_RO_AND_OWNER_BY_JOB_PK = gql`
+  query GET_JOB_OWNER($jobid: uuid!) {
+    jobs_by_pk(id: $jobid) {
+      ro_number
+      owner {
+        ownr_fn
+        ownr_ln
+        ownr_ea
+        ownr_zip
+      }
+    }
+  }
+`;