transfered test files to separate component

client/src/components/job-payments/job-payments.component.jsx

@@ -23,6 +23,8 @@ const mapStateToProps = createStructuredSelector({
 const mapDispatchToProps = (dispatch) => ({
   setPaymentContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "payment" })),
+  setCardPaymentContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "cardPayment" })),
 });
 
 export function JobPayments({
@@ -30,6 +32,7 @@ export function JobPayments({
   jobRO,
   bodyshop,
   setPaymentContext,
+  setCardPaymentContext,
   refetch,
 }) {
   const { t } = useTranslation();
@@ -160,6 +163,16 @@ export function JobPayments({
           >
             {t("menus.header.enterpayment")}
           </Button>
+          <Button
+            onClick={() =>
+              setCardPaymentContext({
+                actions: { refetch: refetch },
+                context: { jobid: job.id, balance },
+              })
+            }
+          >
+            Card Payment
+          </Button>
           <DataLabel
             valueStyle={{ color: balance.getAmount() !== 0 ? "red" : "green" }}
             label={t("payments.labels.balance")}