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

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -16,6 +16,7 @@ import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -344,7 +345,6 @@ export function TimeTicketList({
                 <Table.Summary.Cell>{t("general.labels.totals")}</Table.Summary.Cell>
                 <Table.Summary.Cell />
                 <Table.Summary.Cell />
-                <Table.Summary.Cell />
                 <Table.Summary.Cell>{totals.productivehrs.toFixed(1)}</Table.Summary.Cell>
                 <Table.Summary.Cell>{totals.actualhrs.toFixed(1)}</Table.Summary.Cell>
                 <Table.Summary.Cell>
@@ -363,12 +363,9 @@ export function TimeTicketList({
         locale={{
           ...(!hasTimeTicketsAccess && {
             emptyText: (
-              <div>
-                Upsell
-                {
-                  //TODO:Upsell
-                }
-              </div>
+              <Card>
+                <UpsellComponent upsell={upsellEnum.timetickets.general} />
+              </Card>
             )
           })
         }}