Added payments schema and connected to stripe BOD-146 BOD-147

client/src/pages/manage/manage.page.component.jsx

@@ -1,22 +1,29 @@
+import { Elements } from "@stripe/react-stripe-js";
 import { BackTop, Layout } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { Route, Switch } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
 import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
+import ConflictComponent from "../../components/conflict/conflict.component";
 import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
 import FcmNotification from "../../components/fcm-notification/fcm-notification.component";
 import FooterComponent from "../../components/footer/footer.component";
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectInstanceConflict } from "../../redux/user/user.selectors";
 //Component Imports
 import HeaderContainer from "../../components/header/header.container";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
-import ConflictComponent from "../../components/conflict/conflict.component";
-
+import {
+  selectInstanceConflict,
+  selectBodyshop,
+} from "../../redux/user/user.selectors";
 import "./manage.page.styles.scss";
+import { loadStripe } from "@stripe/stripe-js";
+import { client } from "../../App/App.container";
+import { QUERY_STRIPE_ID } from "../../graphql/bodyshop.queries";
+
 const ManageRootPage = lazy(() =>
   import("../manage-root/manage-root.page.container")
 );
@@ -79,6 +86,9 @@ const EnterInvoiceModalContainer = lazy(() =>
 const TimeTicketModalContainer = lazy(() =>
   import("../../components/time-ticket-modal/time-ticket-modal.container")
 );
+const PaymentModalContainer = lazy(() =>
+  import("../../components/payment-modal/payment-modal.container")
+);
 const ProductionListPage = lazy(() =>
   import("../production-list/production-list.container")
 );
@@ -105,13 +115,20 @@ const ShopCsiPageContainer = lazy(() =>
 
 const { Header, Content, Footer } = Layout;
 
+const stripePromise = new Promise((resolve, reject) => {
+  client.query({ query: QUERY_STRIPE_ID }).then((resp) => {
+    resolve(
+      loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY, {
+        stripeAccount: resp.data.bodyshops[0].stripe_acct_id || "",
+      })
+    );
+  });
+});
+
 const mapStateToProps = createStructuredSelector({
-  //currentUser: selectCurrentUser
   conflict: selectInstanceConflict,
 });
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
+const mapDispatchToProps = (dispatch) => ({});
 
 export function Manage({ match, conflict }) {
   const { t } = useTranslation();
@@ -145,6 +162,10 @@ export function Manage({ match, conflict }) {
                 <EmailOverlayContainer />
                 <TimeTicketModalContainer />
                 <PrintCenterModalContainer />
+                <Elements stripe={stripePromise}>
+                  <PaymentModalContainer />
+                </Elements>
+
                 <Route
                   exact
                   path={`${match.path}`}