IO-3020 Resolve smart scheduling upsell displays when they shouldn't.

client/src/components/schedule-calendar-wrapper/schedule-calendar-header-graph.component.jsx

@@ -8,6 +8,7 @@ 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 { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -35,21 +36,10 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
       []
     );
   }, [loadData, ssbuckets]);
+  const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });
 
-  const popContent = (
+  const chartContents = (
-    <div>
+    <>
-      <Space>
-        {t("appointments.labels.expectedprodhrs")}
-        <BlurWrapperComponent featureName="smartscheduling">
-          <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
-        </BlurWrapperComponent>
-        {t("appointments.labels.expectedjobs")}
-        <BlurWrapperComponent featureName="smartscheduling">
-          <strong>{loadData?.expectedJobCount}</strong>
-        </BlurWrapperComponent>
-      </Space>
-      <UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>
-        <BlurWrapperComponent featureName="smartscheduling">
       <RadarChart
         // cx={300}
         // cy={250}
@@ -66,8 +56,28 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
         <Tooltip />
         <Legend />
       </RadarChart>
+    </>
+  );
+
+  const popContent = (
+    <div>
+      <Space>
+        {t("appointments.labels.expectedprodhrs")}
+        <BlurWrapperComponent featureName="smartscheduling">
+          <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
+        </BlurWrapperComponent>
+        {t("appointments.labels.expectedjobs")}
+        <BlurWrapperComponent featureName="smartscheduling">
+          <strong>{loadData?.expectedJobCount}</strong>
+        </BlurWrapperComponent>
+      </Space>
+      <BlurWrapperComponent featureName="smartscheduling">
+        {hasSmartSchedulingAccess ? (
+          chartContents
+        ) : (
+          <UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
+        )}
       </BlurWrapperComponent>
-      </UpsellMaskWrapper>
     </div>
   );
 

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -18,6 +18,7 @@ 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 { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -52,6 +53,7 @@ export function ScheduleCalendarHeaderComponent({
 
   const { t } = useTranslation();
   const loadData = load[date.toISOString().substr(0, 10)];
+  const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });
 
   const jobsOutPopup = () => (
     <div onClick={(e) => e.stopPropagation()}>
@@ -89,9 +91,11 @@ export function ScheduleCalendarHeaderComponent({
           )}
         </tbody>
       </table>
+      {!hasSmartSchedulingAccess && (
         <Card style={{ maxWidth: "30rem" }}>
           <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
         </Card>
+      )}
     </div>
   );
 
@@ -129,9 +133,11 @@ export function ScheduleCalendarHeaderComponent({
               </BlurWrapperComponent>
             </tr>
           )}
+          {!hasSmartSchedulingAccess && (
             <Card style={{ maxWidth: "30rem" }}>
               <UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
             </Card>
+          )}
         </tbody>
       </table>
     </div>

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -16,7 +16,7 @@ import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.con
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
-import { BlurWrapper } from "../feature-wrapper/blur-wrapper.component";
+import BlurWrapper from "../feature-wrapper/blur-wrapper.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 
 const mapStateToProps = createStructuredSelector({
@@ -138,7 +138,7 @@ export function ScheduleJobModalComponent({
                   </BlurWrapper>
                 </Button>
               ))}
-              {smartOptions.length > 1 && hasSmartSchedulingAccess && (
+              {!smartOptions.length > 1 && hasSmartSchedulingAccess && (
                 <UpsellComponent upsell={upsellEnum().smartscheduling.general} />
               )}
             </Space>

client/src/components/upsell/upsell.component.jsx

@@ -19,7 +19,6 @@ export default function UpsellComponent({ featureName, subFeatureName, upsell, d
   const { t } = useTranslation();
   const resultProps = upsell || upsellEnum[featureName][subFeatureName];
 
-  console.trace("***LOG  ~ file: upsell.component.jsx:22 ~ UpsellComponent ~ resultProps:", resultProps);
   const componentRef = useRef(null);
 
   useEffect(() => {