Merged in revert/revert-pr-2034 (pull request #2036)

Revert "Feature/IO-3067 implement learn more link for rome upsells (pull request #2034)"
2025-01-02 16:08:29 +00:00
parent 64ee2c1526 7d5a866a5c
commit b7ed6734a0
37 changed files with 243 additions and 349 deletions
--- a/client/src/components/bills-list-table/bills-list-table.component.jsx
+++ b/client/src/components/bills-list-table/bills-list-table.component.jsx
@@ -18,7 +18,7 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockerWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";
 import UpsellComponent from "../upsell/upsell.component";
-import { UpsellEnum } from "../upsell/upsell.component";
+import { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  jobRO: selectJobReadOnly,
@@ -240,7 +240,7 @@ export function BillsListTableComponent({
        onChange={handleTableChange}
        locale={{
          ...(!hasBillsAccess && {
-            emptyText: <UpsellComponent upsell={UpsellEnum().bills.general} />
+            emptyText: <UpsellComponent upsell={upsellEnum().bills.general} />
          })
        }}
      />
--- a/client/src/components/job-audit-trail/job-audit-trail.component.jsx
+++ b/client/src/components/job-audit-trail/job-audit-trail.component.jsx
@@ -10,7 +10,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -147,7 +147,7 @@ export function JobAuditTrail({ bodyshop, currentUser, jobId }) {
      {!hasAuditAccess && (
        <Col span={24}>
          <Card>
-            <UpsellComponent upsell={UpsellEnum().audit.general} disableMask />
+            <UpsellComponent upsell={upsellEnum().audit.general} disableMask />
          </Card>
        </Col>
      )}
--- a/client/src/components/job-bills-total/job-bills-total.component.jsx
+++ b/client/src/components/job-bills-total/job-bills-total.component.jsx
@@ -7,7 +7,7 @@ import AlertComponent from "../alert/alert.component";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import "./job-bills-total.styles.scss";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -336,7 +336,7 @@ export function JobBillsTotalComponent({
      {!hasBillsAccess && (
        <Col span={6}>
          <Card style={{ height: "100%" }}>
-            <UpsellComponent upsell={UpsellEnum().bills.autoreconcile} disableMask />
+            <UpsellComponent upsell={upsellEnum().bills.autoreconcile} disableMask />
          </Card>
        </Col>
      )}
--- a/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
+++ b/client/src/components/job-detail-cards/job-detail-cards.documents.component.jsx
@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { GenerateThumbUrl } from "../jobs-documents-gallery/job-documents.utility";
 import CardTemplate from "./job-detail-cards.template.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 export default function JobDetailCardsDocumentsComponent({ loading, data }) {
  const { t } = useTranslation();
@@ -21,7 +21,7 @@ export default function JobDetailCardsDocumentsComponent({ loading, data }) {
      title={t("jobs.labels.cards.documents")}
      extraLink={`/manage/jobs/${data.id}?tab=documents`}
    >
-      <UpsellComponent disableMask upsell={UpsellEnum().media.general}>
+      <UpsellComponent disableMask upsell={upsellEnum().media.general}>
        {data.documents.length > 0 ? (
          <Carousel autoplay>
            {data.documents.map((item) => (
--- a/client/src/components/job-lifecycle/job-lifecycle.component.jsx
+++ b/client/src/components/job-lifecycle/job-lifecycle.component.jsx
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";

 import "./job-lifecycle.styles.scss";
 import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 // show text on bar if text can fit
 export function JobLifecycleComponent({ job, statuses, ...rest }) {
@@ -144,7 +144,7 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
              style={{ width: "100%" }}
            >
              <Card type="inner" style={{ marginTop: "10px" }}>
-                <UpsellComponent upsell={UpsellEnum().lifecycle.general} />
+                <UpsellComponent upsell={upsellEnum().lifecycle.general} />
              </Card>
              <BlurWrapperComponent featureName="lifecycle" bypass>
                <div
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
+++ b/client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
@@ -18,7 +18,7 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
 });
@@ -133,7 +133,7 @@ function JobsDocumentsComponent({
        {!hasMediaAccess && (
          <Col span={24}>
            <Card>
-              <UpsellComponent disableMask upsell={UpsellEnum().media.general} />
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
            </Card>
          </Col>
        )}
@@ -152,7 +152,7 @@ function JobsDocumentsComponent({
        {hasMediaAccess && !hasMobileAccess && (
          <Col span={24}>
            <Card>
-              <UpsellComponent upsell={UpsellEnum().media.mobile} />
+              <UpsellComponent upsell={upsellEnum().media.mobile} />
            </Card>
          </Col>
        )}
--- a/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
+++ b/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx
@@ -18,7 +18,7 @@ import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-
 import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -117,7 +117,7 @@ export function JobsDocumentsLocalGallery({
        {!hasMediaAccess && (
          <Col span={24}>
            <Card>
-              <UpsellComponent disableMask upsell={UpsellEnum().media.general} />
+              <UpsellComponent disableMask upsell={upsellEnum().media.general} />
            </Card>
          </Col>
        )}
--- a/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.component.jsx
@@ -13,7 +13,7 @@ import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit
 import "./labor-allocations-table.styles.scss";
 import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician
@@ -206,7 +206,7 @@ export function LaborAllocationsTable({
              ...(!hasTimeTicketAccess && {
                emptyText: (
                  <Card>
-                    <UpsellComponent upsell={UpsellEnum().timetickets.allocations} />
+                    <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
                  </Card>
                )
              })
@@ -249,7 +249,7 @@ export function LaborAllocationsTable({
                ...(!hasTimeTicketAccess && {
                  emptyText: (
                    <Card>
-                      <UpsellComponent upsell={UpsellEnum().timetickets.allocations} />
+                      <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
                    </Card>
                  )
                })
--- a/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
+++ b/client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx
@@ -11,7 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import "./labor-allocations-table.styles.scss";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";

 const mapStateToProps = createStructuredSelector({
@@ -269,7 +269,7 @@ export function PayrollLaborAllocationsTable({
              ...(!hasTimeTicketAccess && {
                emptyText: (
                  <Card>
-                    <UpsellComponent upsell={UpsellEnum().timetickets.allocations} />
+                    <UpsellComponent upsell={upsellEnum().timetickets.allocations} />
                  </Card>
                )
              })
--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx
@@ -7,7 +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";
+import { UpsellMaskWrapper, upsellEnum } from "../upsell/upsell.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";

 const mapStateToProps = createStructuredSelector({
@@ -75,7 +75,7 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
        {hasSmartSchedulingAccess ? (
          chartContents
        ) : (
-          <UpsellMaskWrapper upsell={UpsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
+          <UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
        )}
      </BlurWrapperComponent>
    </div>
--- a/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx
@@ -17,7 +17,7 @@ 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 UpsellComponent, { UpsellEnum, UpsellMaskWrapper } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum, UpsellMaskWrapper } from "../upsell/upsell.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";

 const mapStateToProps = createStructuredSelector({
@@ -93,7 +93,7 @@ export function ScheduleCalendarHeaderComponent({
      </table>
      {!hasSmartSchedulingAccess && (
        <Card style={{ maxWidth: "30rem" }}>
-          <UpsellComponent size="small" upsell={UpsellEnum().smartscheduling.hrsdelta} />
+          <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
        </Card>
      )}
    </div>
@@ -135,7 +135,7 @@ export function ScheduleCalendarHeaderComponent({
          )}
          {!hasSmartSchedulingAccess && (
            <Card style={{ maxWidth: "30rem" }}>
-              <UpsellComponent size="small" upsell={UpsellEnum().smartscheduling.hrsdelta} />
+              <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
            </Card>
          )}
        </tbody>
--- a/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
@@ -17,7 +17,7 @@ import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-
 import "./schedule-job-modal.scss";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
-import UpsellComponent, { UpsellEnum } from "../upsell/upsell.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -139,7 +139,7 @@ export function ScheduleJobModalComponent({
                </Button>
              ))}
              {!smartOptions.length > 1 && hasSmartSchedulingAccess && (
-                <UpsellComponent upsell={UpsellEnum().smartscheduling.general} />
+                <UpsellComponent upsell={upsellEnum().smartscheduling.general} />
              )}
            </Space>
          </>
--- a/client/src/components/time-ticket-list/time-ticket-list.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -16,7 +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";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -364,7 +364,7 @@ export function TimeTicketList({
          ...(!hasTimeTicketsAccess && {
            emptyText: (
              <Card>
-                <UpsellComponent upsell={UpsellEnum().timetickets.general} />
+                <UpsellComponent upsell={upsellEnum().timetickets.general} />
              </Card>
            )
          })
--- a/client/src/components/upsell/upsell.component.jsx
+++ b/client/src/components/upsell/upsell.component.jsx
@@ -14,14 +14,10 @@ import i18n from "i18next";
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import "./upsell.styles.scss";
-import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
-import { store } from "../../redux/store.js";
-import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";

 export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) {
  const { t } = useTranslation();
-  const resultProps = upsell || UpsellEnum[featureName][subFeatureName];
+  const resultProps = upsell || upsellEnum[featureName][subFeatureName];

  const componentRef = useRef(null);

@@ -56,7 +52,7 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
 }
 //Kept in the same function as the result props line must mirror and doesnt warrant a separate function.
 export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureName }) {
-  const resultProps = upsell || UpsellEnum[featureName][subFeatureName];
+  const resultProps = upsell || upsellEnum[featureName][subFeatureName];
  return (
    <div className="mask-wrapper">
      <div className="mask-content">{children}</div>
@@ -69,275 +65,173 @@ export function UpsellMaskWrapper({ children, upsell, featureName, subFeatureNam
  );
 }
 //This is kept in this function as pulling it out into it's own util/enum prevents passing JSX as an `extra` prop
-export const UpsellEnum = () => {
-  //Had to use the selector hook as accessing store with store.getState() was causing issues when hot reloading.
-  const currentUser = useSelector((state) => state.user.currentUser);
-  const bodyshop = useSelector((state) => state.user.bodyshop);
-
-  const [first_name, ...last_name] = currentUser?.displayName ? currentUser.displayName.split(" ") : [];
-  const LearnMoreLink = encodeURI(
-    InstanceRenderManager({
-      imex: `https://imexsystems.ca/schedule-a-demo/`,
-      rome: `https://forms.zohopublic.com/rometech/form/ROLearnMore/formperma/0G29z8LgLlvKK8nno-b7s-GHgNXwIFlrMeE0mC394L4?first_name=${first_name || ""}&last_name=${last_name.join(" ") || ""}&shop_name=${bodyshop?.shopname || ""}&email=${currentUser?.email || ""}&shop_phone=${bodyshop?.phone || ""}`
-    })
-  );
-
-  return {
-    bills: {
-      autoreconcile: {
-        //icon: null,
-        title: i18n.t("upsell.messages.bills.autoreconcile.title"),
-        subTitle: i18n.t("upsell.messages.bills.autoreconcile.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null
-      },
-      general: {
-        //icon: null,
-        title: i18n.t("upsell.messages.bills.general.title"),
-        subTitle: i18n.t("upsell.messages.bills.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null
-      }
+export const upsellEnum = () => ({
+  bills: {
+    autoreconcile: {
+      //icon: null,
+      title: i18n.t("upsell.messages.bills.autoreconcile.title"),
+      subTitle: i18n.t("upsell.messages.bills.autoreconcile.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
    },
-    checklist: {
-      general: {
-        //icon: null,
-        title: i18n.t("upsell.messages.checklist.general.title"),
-        subTitle: i18n.t("upsell.messages.checklist.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null
-      }
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.bills.general.title"),
+      subTitle: i18n.t("upsell.messages.bills.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  checklist: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.checklist.general.title"),
+      subTitle: i18n.t("upsell.messages.checklist.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  payments: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.payments.general.title"),
+      subTitle: i18n.t("upsell.messages.payments.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  audit: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.audit.general.title"),
+      subTitle: i18n.t("upsell.messages.audit.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null
+    }
+  },
+  lifecycle: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.lifecycle.general.title"),
+      subTitle: i18n.t("upsell.messages.lifecycle.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null }
+    }
+  },
+  media: {
+    general: {
+      //icon: null,
+      title: i18n.t("upsell.messages.media.general.title"),
+      subTitle: i18n.t("upsell.messages.media.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null }
+    },
+    mobile: {
+      icon: <MobileOutlined />,
+      title: i18n.t("upsell.messages.media.mobile.title"),
+      subTitle: i18n.t("upsell.messages.media.mobile.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      //status: null }
+    }
+  },
+  timetickets: {
+    allocations: {
+      title: i18n.t("upsell.messages.timetickets.allocations.title"),
+      subTitle: i18n.t("upsell.messages.timetickets.allocations.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    general: {
+      title: i18n.t("upsell.messages.timetickets.general.title"),
+      subTitle: i18n.t("upsell.messages.timetickets.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  smartscheduling: {
+    general: {
+      icon: <CalendarOutlined />,
+      title: i18n.t("upsell.messages.smartscheduling.general.title"),
+      subTitle: i18n.t("upsell.messages.smartscheduling.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    hrsdelta: {
+      icon: <CarOutlined />,
+      title: i18n.t("upsell.messages.smartscheduling.hrsdelta.title"),
+      subTitle: i18n.t("upsell.messages.smartscheduling.hrsdelta.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    datepicker: {
+      icon: <CarOutlined />,
+      title: i18n.t("upsell.messages.smartscheduling.datepicker.title"),
+      subTitle: i18n.t("upsell.messages.smartscheduling.datepicker.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  accounting: {
+    payables: {
+      icon: <DollarOutlined />,
+      title: i18n.t("upsell.messages.accounting.payables.title"),
+      subTitle: i18n.t("upsell.messages.accounting.payables.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    },
+    receivables: {
+      icon: <DollarOutlined />,
+      title: i18n.t("upsell.messages.accounting.receivables.title"),
+      subTitle: i18n.t("upsell.messages.accounting.receivables.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
    },
    payments: {
-      general: {
-        //icon: null,
-        title: i18n.t("upsell.messages.payments.general.title"),
-        subTitle: i18n.t("upsell.messages.payments.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null
-      }
-    },
-    audit: {
-      general: {
-        //icon: null,
-        title: i18n.t("upsell.messages.audit.general.title"),
-        subTitle: i18n.t("upsell.messages.audit.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null
-      }
-    },
-    lifecycle: {
-      general: {
-        //icon: null,
-        title: i18n.t("upsell.messages.lifecycle.general.title"),
-        subTitle: i18n.t("upsell.messages.lifecycle.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null }
-      }
-    },
-    media: {
-      general: {
-        //icon: null,
-        title: i18n.t("upsell.messages.media.general.title"),
-        subTitle: i18n.t("upsell.messages.media.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null }
-      },
-      mobile: {
-        icon: <MobileOutlined />,
-        title: i18n.t("upsell.messages.media.mobile.title"),
-        subTitle: i18n.t("upsell.messages.media.mobile.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-        //status: null }
-      }
-    },
-    timetickets: {
-      allocations: {
-        title: i18n.t("upsell.messages.timetickets.allocations.title"),
-        subTitle: i18n.t("upsell.messages.timetickets.allocations.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      },
-      general: {
-        title: i18n.t("upsell.messages.timetickets.general.title"),
-        subTitle: i18n.t("upsell.messages.timetickets.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    smartscheduling: {
-      general: {
-        icon: <CalendarOutlined />,
-        title: i18n.t("upsell.messages.smartscheduling.general.title"),
-        subTitle: i18n.t("upsell.messages.smartscheduling.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      },
-      hrsdelta: {
-        icon: <CarOutlined />,
-        title: i18n.t("upsell.messages.smartscheduling.hrsdelta.title"),
-        subTitle: i18n.t("upsell.messages.smartscheduling.hrsdelta.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      },
-      datepicker: {
-        icon: <CarOutlined />,
-        title: i18n.t("upsell.messages.smartscheduling.datepicker.title"),
-        subTitle: i18n.t("upsell.messages.smartscheduling.datepicker.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    accounting: {
-      payables: {
-        icon: <DollarOutlined />,
-        title: i18n.t("upsell.messages.accounting.payables.title"),
-        subTitle: i18n.t("upsell.messages.accounting.payables.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      },
-      receivables: {
-        icon: <DollarOutlined />,
-        title: i18n.t("upsell.messages.accounting.receivables.title"),
-        subTitle: i18n.t("upsell.messages.accounting.receivables.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      },
-      payments: {
-        icon: <DollarOutlined />,
-        title: i18n.t("upsell.messages.accounting.payments.title"),
-        subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    courtesycars: {
-      general: {
-        icon: <CarOutlined />,
-        title: i18n.t("upsell.messages.courtesycars.general.title"),
-        subTitle: i18n.t("upsell.messages.courtesycars.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    dashboard: {
-      general: {
-        icon: <DashboardOutlined />,
-        title: i18n.t("upsell.messages.dashboard.general.title"),
-        subTitle: i18n.t("upsell.messages.dashboard.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    visualboard: {
-      general: {
-        icon: <BuildOutlined />,
-        title: i18n.t("upsell.messages.visualboard.general.title"),
-        subTitle: i18n.t("upsell.messages.visualboard.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    scoreboard: {
-      general: {
-        icon: <LineChartOutlined />,
-        title: i18n.t("upsell.messages.scoreboard.general.title"),
-        subTitle: i18n.t("upsell.messages.scoreboard.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    techconsole: {
-      general: {
-        icon: <LineChartOutlined />,
-        title: i18n.t("upsell.messages.techconsole.general.title"),
-        subTitle: i18n.t("upsell.messages.techconsole.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
-    },
-    csi: {
-      general: {
-        icon: <StarOutlined />,
-        title: i18n.t("upsell.messages.csi.general.title"),
-        subTitle: i18n.t("upsell.messages.csi.general.subtitle"),
-        extra: (
-          <Link to={LearnMoreLink} target="_blank">
-            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-          </Link>
-        )
-      }
+      icon: <DollarOutlined />,
+      title: i18n.t("upsell.messages.accounting.payments.title"),
+      subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
    }
-  };
-};
+  },
+  courtesycars: {
+    general: {
+      icon: <CarOutlined />,
+      title: i18n.t("upsell.messages.courtesycars.general.title"),
+      subTitle: i18n.t("upsell.messages.courtesycars.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  dashboard: {
+    general: {
+      icon: <DashboardOutlined />,
+      title: i18n.t("upsell.messages.dashboard.general.title"),
+      subTitle: i18n.t("upsell.messages.dashboard.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  visualboard: {
+    general: {
+      icon: <BuildOutlined />,
+      title: i18n.t("upsell.messages.visualboard.general.title"),
+      subTitle: i18n.t("upsell.messages.visualboard.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  scoreboard: {
+    general: {
+      icon: <LineChartOutlined />,
+      title: i18n.t("upsell.messages.scoreboard.general.title"),
+      subTitle: i18n.t("upsell.messages.scoreboard.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  techconsole: {
+    general: {
+      icon: <LineChartOutlined />,
+      title: i18n.t("upsell.messages.techconsole.general.title"),
+      subTitle: i18n.t("upsell.messages.techconsole.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  },
+  csi: {
+    general: {
+      icon: <StarOutlined />,
+      title: i18n.t("upsell.messages.csi.general.title"),
+      subTitle: i18n.t("upsell.messages.csi.general.subtitle"),
+      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+    }
+  }
+});
--- a/client/src/pages/accounting-payables/accounting-payables.container.jsx
+++ b/client/src/pages/accounting-payables/accounting-payables.container.jsx
@@ -13,7 +13,7 @@ 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 UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 import { Card } from "antd";

 const mapStateToProps = createStructuredSelector({
@@ -63,7 +63,7 @@ export function AccountingPayablesContainer({ bodyshop, setBreadcrumbs, setSelec
        featureName="export"
        noauth={
          <Card>
-            <UpsellComponent upsell={UpsellEnum().accounting.payables} />
+            <UpsellComponent upsell={upsellEnum().accounting.payables} />
          </Card>
        }
      >
--- a/client/src/pages/accounting-payments/accounting-payments.container.jsx
+++ b/client/src/pages/accounting-payments/accounting-payments.container.jsx
@@ -13,7 +13,7 @@ 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 UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 import { Card } from "antd";

 const mapStateToProps = createStructuredSelector({
@@ -61,7 +61,7 @@ export function AccountingPaymentsContainer({ bodyshop, setBreadcrumbs, setSelec
        featureName="export"
        noauth={
          <Card>
-            <UpsellComponent upsell={UpsellEnum().accounting.payments} />
+            <UpsellComponent upsell={upsellEnum().accounting.payments} />
          </Card>
        }
      >
--- a/client/src/pages/accounting-receivables/accounting-receivables.container.jsx
+++ b/client/src/pages/accounting-receivables/accounting-receivables.container.jsx
@@ -14,7 +14,7 @@ import { selectPartnerVersion } from "../../redux/application/application.select
 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -66,7 +66,7 @@ export function AccountingReceivablesContainer({ bodyshop, setBreadcrumbs, setSe
        featureName="export"
        noauth={
          <Card>
-            <UpsellComponent upsell={UpsellEnum().accounting.receivables} />
+            <UpsellComponent upsell={upsellEnum().accounting.receivables} />
          </Card>
        }
      >
--- a/client/src/pages/bills/bills.page.container.jsx
+++ b/client/src/pages/bills/bills.page.container.jsx
@@ -14,7 +14,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -59,7 +59,7 @@ export function BillsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
      featureName="bills"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().bills.general} />
+          <UpsellComponent upsell={upsellEnum().bills.general} />
        </Card>
      }
    >
--- a/client/src/pages/contract-create/contract-create.page.container.jsx
+++ b/client/src/pages/contract-create/contract-create.page.container.jsx
@@ -13,7 +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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -125,7 +125,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
      featureName="courtesycars"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().courtesycars.general} />
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
        </Card>
      }
    >
--- a/client/src/pages/contract-detail/contract-detail.page.container.jsx
+++ b/client/src/pages/contract-detail/contract-detail.page.container.jsx
@@ -16,7 +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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -113,7 +113,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
      featureName="courtesycars"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().courtesycars.general} />
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
        </Card>
      }
    >
--- a/client/src/pages/contracts/contracts.page.container.jsx
+++ b/client/src/pages/contracts/contracts.page.container.jsx
@@ -13,7 +13,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -62,7 +62,7 @@ export function ContractsPageContainer({ setBreadcrumbs, setSelectedHeader }) {
      featureName="courtesycars"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().courtesycars.general} />
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
        </Card>
      }
    >
--- a/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
+++ b/client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx
@@ -12,7 +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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -73,7 +73,7 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
      featureName="courtesycars"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().courtesycars.general} />
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
        </Card>
      }
    >
--- a/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
+++ b/client/src/pages/courtesy-cars/courtesy-cars.page.container.jsx
@@ -10,7 +10,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -40,7 +40,7 @@ export function CourtesyCarsPageContainer({ setBreadcrumbs, setSelectedHeader })
      featureName="courtesycars"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().courtesycars.general} />
+          <UpsellComponent upsell={upsellEnum().courtesycars.general} />
        </Card>
      }
    >
--- a/client/src/pages/dashboard/dashboard.container.jsx
+++ b/client/src/pages/dashboard/dashboard.container.jsx
@@ -7,7 +7,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -38,7 +38,7 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
      featureName="dashboard"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().dashboard.general} />
+          <UpsellComponent upsell={upsellEnum().dashboard.general} />
        </Card>
      }
    >
--- a/client/src/pages/export-logs/export-logs.page.container.jsx
+++ b/client/src/pages/export-logs/export-logs.page.container.jsx
@@ -7,7 +7,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -38,7 +38,7 @@ export function ExportsLogPageContainer({ setBreadcrumbs, setSelectedHeader }) {
      featureName="export"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().accounting.receivables} />
+          <UpsellComponent upsell={upsellEnum().accounting.receivables} />
        </Card>
      }
    >
--- a/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
+++ b/client/src/pages/jobs-checklist-view/jobs-checklist-view.page.jsx
@@ -15,7 +15,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -79,7 +79,7 @@ export function JobsChecklistViewContainer({ bodyshop, setBreadcrumbs, setSelect
      featureName="checklist"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().checklist.general} />
+          <UpsellComponent upsell={upsellEnum().checklist.general} />
        </Card>
      }
    >
--- a/client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx
+++ b/client/src/pages/jobs-deliver/jobs-delivery.page.container.jsx
@@ -14,7 +14,7 @@ import JobchecklistComponent from "../../components/job-checklist/job-checklist.
 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -66,7 +66,7 @@ export function JobsDeliverContainer({ bodyshop, setBreadcrumbs, setSelectedHead
      featureName="checklist"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().checklist.general} />
+          <UpsellComponent upsell={upsellEnum().checklist.general} />
        </Card>
      }
    >
--- a/client/src/pages/jobs-intake/jobs-intake.page.container.jsx
+++ b/client/src/pages/jobs-intake/jobs-intake.page.container.jsx
@@ -14,7 +14,7 @@ import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
@@ -69,7 +69,7 @@ export function JobsIntakeContainer({ bodyshop, setBreadcrumbs, setSelectedHeade
      featureName="checklist"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().checklist.general} />
+          <UpsellComponent upsell={upsellEnum().checklist.general} />
        </Card>
      }
    >
--- a/client/src/pages/payments-all/payments-all.container.page.jsx
+++ b/client/src/pages/payments-all/payments-all.container.page.jsx
@@ -14,7 +14,7 @@ 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 UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 import { Card } from "antd";

 const mapStateToProps = createStructuredSelector({
@@ -64,7 +64,7 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
      featureName="payments"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().payments.general} />
+          <UpsellComponent upsell={upsellEnum().payments.general} />
        </Card>
      }
      z
--- a/client/src/pages/production-board/production-board.container.jsx
+++ b/client/src/pages/production-board/production-board.container.jsx
@@ -5,7 +5,7 @@ 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 UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
@@ -44,7 +44,7 @@ export function ProductionBoardContainer({ setBreadcrumbs, bodyshop, setSelected
      featureName="visualboard"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().visualboard.general} />
+          <UpsellComponent upsell={upsellEnum().visualboard.general} />
        </Card>
      }
    >
--- a/client/src/pages/scoreboard/scoreboard.page.container.jsx
+++ b/client/src/pages/scoreboard/scoreboard.page.container.jsx
@@ -15,7 +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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 /**
 * Mapping state to props
@@ -71,7 +71,7 @@ export function ScoreboardContainer({ setBreadcrumbs, setSelectedHeader }) {
      featureName="scoreboard"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().scoreboard.general} />
+          <UpsellComponent upsell={upsellEnum().scoreboard.general} />
        </Card>
      }
    >
--- a/client/src/pages/shift-clock/shift-clock.page.jsx
+++ b/client/src/pages/shift-clock/shift-clock.page.jsx
@@ -3,7 +3,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 export default function ShiftClock() {
  return (
@@ -11,7 +11,7 @@ export default function ShiftClock() {
      featureName="timetickets"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().dashboard.general} />
+          <UpsellComponent upsell={upsellEnum().dashboard.general} />
        </Card>
      }
    >
--- a/client/src/pages/shop-csi/shop-csi.container.page.jsx
+++ b/client/src/pages/shop-csi/shop-csi.container.page.jsx
@@ -13,7 +13,7 @@ import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/appli
 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -56,7 +56,7 @@ export function ShopCsiContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }
      featureName="csi"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().csi.general} />
+          <UpsellComponent upsell={upsellEnum().csi.general} />
        </Card>
      }
    >
--- a/client/src/pages/tech/tech.page.component.jsx
+++ b/client/src/pages/tech/tech.page.component.jsx
@@ -14,7 +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";
+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"));
@@ -87,7 +87,7 @@ export function TechPage({ technician }) {
                featureName="techconsole"
                noauth={
                  <Card>
-                    <UpsellComponent upsell={UpsellEnum().techconsole.general} />
+                    <UpsellComponent upsell={upsellEnum().techconsole.general} />
                  </Card>
                }
              >
--- a/client/src/pages/temporary-docs/temporary-docs.container.jsx
+++ b/client/src/pages/temporary-docs/temporary-docs.container.jsx
@@ -9,7 +9,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -44,7 +44,7 @@ export function TempDocumentsContainer({ setBreadcrumbs, setSelectedHeader }) {
      featureName="media"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().media.general} />
+          <UpsellComponent upsell={upsellEnum().media.general} />
        </Card>
      }
    >
--- a/client/src/pages/time-tickets/time-tickets.container.jsx
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -20,7 +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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -78,7 +78,7 @@ export function TimeTicketsContainer({ bodyshop, setBreadcrumbs, setSelectedHead
      featureName="timetickets"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().timetickets.general} />
+          <UpsellComponent upsell={upsellEnum().timetickets.general} />
        </Card>
      }
    >
--- a/client/src/pages/tt-approvals/tt-approvals.page.container.jsx
+++ b/client/src/pages/tt-approvals/tt-approvals.page.container.jsx
@@ -9,7 +9,7 @@ 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";
+import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
@@ -44,7 +44,7 @@ export function TtApprovalsPage({ setBreadcrumbs, setSelectedHeader }) {
      featureName="timetickets"
      noauth={
        <Card>
-          <UpsellComponent upsell={UpsellEnum().timetickets.general} />
+          <UpsellComponent upsell={upsellEnum().timetickets.general} />
        </Card>
      }
    >