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

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>