IO-3020 IO-3036 Add additional upsell components.

client/src/pages/accounting-payables/accounting-payables.container.jsx

@@ -13,6 +13,8 @@ import { selectPartnerVersion } from "../../redux/application/application.select
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { Card } from "antd";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -59,11 +61,10 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec
     <div>
       <FeatureWrapperComponent
         featureName="export"
-        noAuth
-        upsellComponent={
-          {
-            //TODO:Upsell
-          }
+        noauth={
+          <Card>
+            <UpsellComponent upsell={upsellEnum.accounting.payables} />
+          </Card>
         }
       >
         <RbacWrapper action="accounting:payables">

client/src/pages/accounting-payments/accounting-payments.container.jsx

@@ -13,6 +13,8 @@ import { checkPartnerStatus } from "../../components/partner-ping/partner-ping.c
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { Card } from "antd";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -57,10 +59,10 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
     <div>
       <FeatureWrapperComponent
         featureName="export"
-        upsellComponent={
-          {
-            //TODO:Upsell
-          }
+        noauth={
+          <Card>
+            <UpsellComponent upsell={upsellEnum.accounting.payments} />
+          </Card>
         }
       >
         <RbacWrapper action="accounting:payments">

client/src/pages/accounting-receivables/accounting-receivables.container.jsx

@@ -13,6 +13,8 @@ import { checkPartnerStatus } from "../../components/partner-ping/partner-ping.c
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -62,10 +64,10 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe
     <div>
       <FeatureWrapperComponent
         featureName="export"
-        upsellComponent={
-          {
-            //TODO:Upsell
-          }
+        noauth={
+          <Card>
+            <UpsellComponent upsell={upsellEnum.accounting.receivables} />
+          </Card>
         }
       >
         <RbacWrapper action="accounting:receivables">

client/src/pages/bills/bills.page.container.jsx

@@ -13,6 +13,8 @@ import BillsPageComponent from "./bills.page.component";
 import { pageLimit } from "../../utils/config";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -55,10 +57,10 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapperComponent
       featureName="bills"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.bills.general} />
+        </Card>
       }
     >
       <RbacWrapper action="bills:list">

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Card, Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -13,6 +13,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ContractCreatePageComponent from "./contract-create.page.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -122,10 +123,10 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
   return (
     <FeatureWrapperComponent
       featureName="courtesycars"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.courtesycars.general} />
+        </Card>
       }
     >
       <RbacWrapper action="contracts:create">

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Card, Form, notification } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ import ContractDetailPageComponent from "./contract-detail.page.component";
 import NotFound from "../../components/not-found/not-found.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -105,15 +106,15 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
   if (error) return <AlertComponent message={error.message} type="error" />;
   if (loading) return <LoadingSpinner />;
 
-  if (!!!data.cccontracts_by_pk) return <NotFound />;
+  if (!data.cccontracts_by_pk) return <NotFound />;
 
   return (
     <FeatureWrapperComponent
       featureName="courtesycars"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.courtesycars.general} />
+        </Card>
       }
     >
       <RbacWrapper action="contracts:detail">

client/src/pages/contracts/contracts.page.container.jsx

@@ -12,6 +12,8 @@ import ContractsPageComponent from "./contracts.page.component";
 import { pageLimit } from "../../utils/config";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -58,10 +60,10 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapperComponent
       featureName="courtesycars"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.courtesycars.general} />
+        </Card>
       }
     >
       <RbacWrapper action="contracts:list">

client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Card, Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,6 +12,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -70,10 +71,10 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
   return (
     <FeatureWrapperComponent
       featureName="courtesycars"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.courtesycars.general} />
+        </Card>
       }
     >
       <RbacWrapper action="courtesycar:create">

client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx

@@ -9,6 +9,8 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import CourtesyCarsPageComponent from "./courtesy-cars.page.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -36,10 +38,10 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })
   return (
     <FeatureWrapperComponent
       featureName="courtesycars"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.courtesycars.general} />
+        </Card>
       }
     >
       <RbacWrapper action="courtesycar:list">

client/src/pages/dashboard/dashboard.container.jsx

@@ -6,6 +6,8 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -34,10 +36,10 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapper
       featureName="dashboard"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.dashboard.general} />
+        </Card>
       }
     >
       <RbacWrapper action="shop:dashboard">

client/src/pages/export-logs/export-logs.page.container.jsx

@@ -6,6 +6,8 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import ExportLogsPage from "./export-logs.page.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -34,10 +36,10 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapperComponent
       featureName="export"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.accounting.receivables} />
+        </Card>
       }
     >
       <RbacWrapper action="accounting:exportlogs">

client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx

@@ -13,6 +13,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobchecklistComponent from "../../components/job-checklist/job-checklist.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -62,10 +64,10 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs, setSelectedHead
   return (
     <FeatureWrapperComponent
       featureName="checklist"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.checklist.general} />
+        </Card>
       }
     >
       <RbacWrapper action="jobs:deliver">

client/src/pages/jobs-intake/jobs-intake.page.container.jsx

@@ -11,9 +11,10 @@ import { QUERY_INTAKE_CHECKLIST } from "../../graphql/bodyshop.queries";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
-import { Result } from "antd";
+import { Card, Result } from "antd";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -66,10 +67,10 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs, setSelectedHeade
   return (
     <FeatureWrapperComponent
       featureName="checklist"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.checklist.general} />
+        </Card>
       }
     >
       <RbacWrapper action="jobs:intake">

client/src/pages/payments-all/payments-all.container.page.jsx

@@ -14,6 +14,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { pageLimit } from "../../utils/config";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { Card } from "antd";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -60,11 +62,12 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapperComponent
       featureName="payments"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.payments.general} />
+        </Card>
       }
+      z
     >
       <RbacWrapper action="payments:list">
         <PaymentsListPaginated

client/src/pages/production-board/production-board.container.jsx

@@ -1,13 +1,15 @@
+import { Card } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import ProductionBoardComponent from "./production-board.component";
-import FeatureWrapper from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import ProductionBoardComponent from "./production-board.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -40,10 +42,10 @@ export function ProductionBoardContainer({ setBreadcrumbs, bodyshop, setSelected
   return (
     <FeatureWrapper
       featureName="visualboard"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.visualboard.general} />
+        </Card>
       }
     >
       <RbacWrapper action="production:board">

client/src/pages/scoreboard/scoreboard.page.container.jsx

@@ -1,5 +1,5 @@
 import Icon, { FieldTimeOutlined } from "@ant-design/icons";
-import { Tabs } from "antd";
+import { Card, Tabs } from "antd";
 import queryString from "query-string";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +15,7 @@ import ScoreboardTimeTickets from "../../components/scoreboard-timetickets/score
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 /**
  * Mapping state to props
@@ -68,10 +69,10 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapper
       featureName="scoreboard"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.scoreboard.general} />
+        </Card>
       }
     >
       <RbacWrapper action="scoreboard:view">

client/src/pages/shift-clock/shift-clock.page.jsx

@@ -2,15 +2,17 @@ import React from "react";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import TimeTicketShift from "../../components/time-ticket-shift/time-ticket-shift.container";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 export default function ShiftClock() {
   return (
     <FeatureWrapperComponent
       featureName="timetickets"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.dashboard.general} />
+        </Card>
       }
     >
       <RbacWrapper action="shiftclock:view">

client/src/pages/shop-csi/shop-csi.container.page.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row } from "antd";
+import { Card, Col, Row } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,6 +12,8 @@ import { QUERY_CSI_RESPONSE_PAGINATED } from "../../graphql/csi.queries";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -50,21 +52,30 @@ export function ShopCsiContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }
   if (error) return <AlertComponent message={error.message} type="error" />;
 
   return (
-    <RbacWrapper action="csi:page">
-      <Row gutter={16}>
-        <Col span={10}>
-          <CsiResponseListPaginated
-            refetch={refetch}
-            loading={loading}
-            responses={data ? data.csi : []}
-            total={data ? data.csi_aggregate.aggregate.count : 0}
-          />
-        </Col>
-        <Col span={14}>
-          <CsiResponseFormContainer />
-        </Col>
-      </Row>
-    </RbacWrapper>
+    <FeatureWrapperComponent
+      featureName="csi"
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.csi.general} />
+        </Card>
+      }
+    >
+      <RbacWrapper action="csi:page">
+        <Row gutter={16}>
+          <Col span={10}>
+            <CsiResponseListPaginated
+              refetch={refetch}
+              loading={loading}
+              responses={data ? data.csi : []}
+              total={data ? data.csi_aggregate.aggregate.count : 0}
+            />
+          </Col>
+          <Col span={14}>
+            <CsiResponseFormContainer />
+          </Col>
+        </Row>
+      </RbacWrapper>
+    </FeatureWrapperComponent>
   );
 }
 

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

@@ -1,4 +1,4 @@
-import { FloatButton, Layout } from "antd";
+import { Card, FloatButton, Layout } from "antd";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -14,6 +14,7 @@ import UpdateAlert from "../../components/update-alert/update-alert.component";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import "./tech.page.styles.scss";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component.jsx";
 
 const TimeTicketModalContainer = lazy(() => import("../../components/time-ticket-modal/time-ticket-modal.container"));
 const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx"));
@@ -83,11 +84,11 @@ export function TechPage({ technician }) {
               }
             >
               <FeatureWrapper
-                featureName="tech-console"
-                upsellComponent={
-                  {
-                    //TODO:Upsell
-                  }
+                featureName="techconsole"
+                noauth={
+                  <Card>
+                    <UpsellComponent upsell={upsellEnum.techconsole.general} />
+                  </Card>
                 }
               >
                 <TimeTicketModalContainer />

client/src/pages/temporary-docs/temporary-docs.container.jsx

@@ -8,6 +8,8 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import TemporaryDocsComponent from "./temporary-docs.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -40,10 +42,10 @@ export function TempDocumentsContainer({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapperComponent
       featureName="media"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.media.general} />
+        </Card>
       }
     >
       <RbacWrapper action="temporarydocs:view">

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Col, Row, Space } from "antd";
+import { Card, Col, Row, Space } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wr
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -75,10 +76,10 @@ export function TimeTicketsContainer({ bodyshop, setBreadcrumbs, setSelectedHead
   return (
     <FeatureWrapperComponent
       featureName="timetickets"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.timetickets.general} />
+        </Card>
       }
     >
       <RbacWrapper action="timetickets:list">

client/src/pages/tt-approvals/tt-approvals.page.container.jsx

@@ -8,6 +8,8 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { Card } from "antd";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -40,10 +42,10 @@ export function TtApprovalsPage({ setBreadcrumbs, setSelectedHeader }) {
   return (
     <FeatureWrapperComponent
       featureName="timetickets"
-      upsellComponent={
-        {
-          //TODO:Upsell
-        }
+      noauth={
+        <Card>
+          <UpsellComponent upsell={upsellEnum.timetickets.general} />
+        </Card>
       }
     >
       <RbacWrapper action="ttapprovals:view">