IO-3020 IO-3036 Add upsell components to several components. Add upsell mask wrapper.

client/src/components/job-bills-total/job-bills-total.component.jsx

@@ -7,8 +7,21 @@ import AlertComponent from "../alert/alert.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import "./job-bills-total.styles.scss";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
-export default function JobBillsTotalComponent({
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+
+export function JobBillsTotalComponent({
+  bodyshop,
   loading,
   bills,
   partsOrders,
@@ -120,10 +133,10 @@ export default function JobBillsTotalComponent({
       warningCallback({ key: "cm", warning: t("jobs.labels.outstanding_credit_memos") });
     }
   }
-
+  const hasBillsAccess = HasFeatureAccess({ bodyshop, featureName: "bills" });
   return (
     <Row gutter={[16, 16]}>
-      <Col md={24} lg={18}>
+      <Col {...(hasBillsAccess ? { md: 24, lg: 18 } : { span: 12 })}>
         <Card title={t("jobs.labels.jobtotals")} style={{ height: "100%" }}>
           <Space wrap size="large">
             <Tooltip
@@ -240,9 +253,6 @@ export default function JobBillsTotalComponent({
               </BlurWrapperComponent>
             </Tooltip>
           </Space>
-          {
-            //TODO:Upsell
-          }
           {showWarning &&
             (discrepWithCms.getAmount() !== 0 ||
               discrepWithLbrAdj.getAmount() !== 0 ||
@@ -321,11 +331,17 @@ export default function JobBillsTotalComponent({
           {showWarning && calculatedCreditsNotReceived.getAmount() > 0 && (
             <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstanding_credit_memos")} />
           )}
-          {
-            //TODO:Upsell
-          }
         </Card>
       </Col>
+      {!hasBillsAccess && (
+        <Col span={6}>
+          <Card style={{ height: "100%" }}>
+            <UpsellComponent upsell={upsellEnum.bills.autoreconcile} disableMask />
+          </Card>
+        </Col>
+      )}
     </Row>
   );
 }
+
+export default connect(mapStateToProps, mapDispatchToProps)(JobBillsTotalComponent);