transfered test files to separate component

client/src/components/card-payment-modal/card-payment-modal.container..jsx

@@ -0,0 +1,62 @@
+import { Button, Modal } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectCardPayment } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import CardPaymentModalComponent from "./card-payment-modal.component.";
+
+const mapStateToProps = createStructuredSelector({
+  cardPaymentModal: selectCardPayment,
+  bodyshop: selectBodyshop,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleModalVisible: () => dispatch(toggleModalVisible("cardPayment")),
+});
+
+function CardPaymentModalContainer({
+  cardPaymentModal,
+  toggleModalVisible,
+  bodyshop,
+}) {
+  const { context, visible, actions } = cardPaymentModal;
+
+  const handleCancel = () => {
+    toggleModalVisible();
+    actions.refetch();
+  };
+
+  const handleOK = () => {
+    toggleModalVisible();
+    actions.refetch();
+  };
+
+  const handleNewPayment = () => {};
+
+  return (
+    <Modal
+      visible={visible}
+      onOk={handleOK}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="back" onClick={handleCancel}>
+          Go Back
+        </Button>,
+        <Button key="submit" type="primary" onClick={handleNewPayment}>
+          Submit Payment
+        </Button>,
+      ]}
+      width="50%"
+      destroyOnClose
+    >
+      <CardPaymentModalComponent bodyshop={bodyshop} context={context} />
+    </Modal>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CardPaymentModalContainer);