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={{