IO-3020 IO-3036 Add additional upsell components.

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">