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

client/src/components/schedule-calendar-wrapper/localizer.js

@@ -1,10 +1,3 @@
-import isBetween from "dayjs/plugin/isBetween";
-import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
-import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
-import localeData from "dayjs/plugin/localeData";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import minMax from "dayjs/plugin/minMax";
-import utc from "dayjs/plugin/utc";
 import { DateLocalizer } from "react-big-calendar";
 
 function arrayWithHoles(arr) {

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx

@@ -7,6 +7,7 @@ import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart,
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import { UpsellMaskWrapper, upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -47,27 +48,26 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
           <strong>{loadData?.expectedJobCount}</strong>
         </BlurWrapperComponent>
       </Space>
-      <BlurWrapperComponent featureName="smartscheduling">
-        <RadarChart
-          // cx={300}
-          // cy={250}
-          // outerRadius={150}
-          width={800}
-          height={600}
-          data={data}
-        >
-          <PolarGrid />
-          <PolarAngleAxis dataKey="bucket" />
-          <PolarRadiusAxis angle={90} />
-          <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
-          <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
-          <Tooltip />
-          <Legend />
-        </RadarChart>
-      </BlurWrapperComponent>
-      {
-        //TODO:Upsell
-      }
+      <UpsellMaskWrapper upsell={upsellEnum.smartscheduling.general}>
+        <BlurWrapperComponent featureName="smartscheduling">
+          <RadarChart
+            // cx={300}
+            // cy={250}
+            // outerRadius={150}
+            width={800}
+            height={600}
+            data={data}
+          >
+            <PolarGrid />
+            <PolarAngleAxis dataKey="bucket" />
+            <PolarRadiusAxis angle={90} />
+            <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
+            <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
+            <Tooltip />
+            <Legend />
+          </RadarChart>
+        </BlurWrapperComponent>
+      </UpsellMaskWrapper>
     </div>
   );
 

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -1,5 +1,5 @@
 import Icon from "@ant-design/icons";
-import { Popover, Space } from "antd";
+import { Card, Popover, Space } from "antd";
 import _ from "lodash";
 import dayjs from "../../utils/day";
 
@@ -12,14 +12,12 @@ import { createStructuredSelector } from "reselect";
 import { selectScheduleLoad, selectScheduleLoadCalculating } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { default as BlurWrapper, default as BlurWrapperComponent } from "../feature-wrapper/blur-wrapper.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ScheduleBlockDay from "../schedule-block-day/schedule-block-day.component";
 import ScheduleCalendarHeaderGraph from "./schedule-calendar-header-graph.component";
-import InstanceRenderMgr from "../../utils/instanceRenderMgr";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
-import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
+import UpsellComponent, { upsellEnum, UpsellMaskWrapper } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -89,11 +87,11 @@ export function ScheduleCalendarHeaderComponent({
               </BlurWrapperComponent>
             </tr>
           )}
-          {
-            //TODO:Upsell
-          }
         </tbody>
       </table>
+      <Card style={{ maxWidth: "30rem" }}>
+        <UpsellComponent size="small" upsell={upsellEnum.smartscheduling.hrsdelta} />
+      </Card>
     </div>
   );
 
@@ -131,9 +129,9 @@ export function ScheduleCalendarHeaderComponent({
               </BlurWrapperComponent>
             </tr>
           )}
-          {
-            //TODO:Upsell
-          }
+          <Card style={{ maxWidth: "30rem" }}>
+            <UpsellComponent size="small" upsell={upsellEnum.smartscheduling.hrsdelta} />
+          </Card>
         </tbody>
       </table>
     </div>

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -1,21 +1,20 @@
-import dayjs from "../../utils/day";
+import { Alert, Collapse, Space } from "antd";
 import queryString from "query-string";
 import React from "react";
 import { Calendar } from "react-big-calendar";
+import { Trans, useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { selectProblemJobs } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import dayjs from "../../utils/day";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import Event from "../job-at-change/schedule-event.container";
+import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
+import local from "./localizer";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
-import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
-import { selectProblemJobs } from "../../redux/application/application.selectors";
-import { Alert, Collapse, Space } from "antd";
-import { Trans, useTranslation } from "react-i18next";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import local from "./localizer";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,