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

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

@@ -17,6 +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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -66,6 +67,8 @@ export function ScheduleJobModalComponent({
     }
   };
 
+  const hasSmartSchedulingAccess = HasFeatureAccess({ bodyshop, featureName: "smartscheduling" });
+
   return (
     <Row gutter={[16, 16]}>
       <Col span={12}>
@@ -110,30 +113,34 @@ export function ScheduleJobModalComponent({
                   {t("appointments.actions.calculate")}
                 </LockWrapperComponent>
               </Button>
+
               {smartOptions.map((d, idx) => (
-                <BlurWrapper featureName="smartscheduling" key={idx}>
-                  <Button
-                    className="imex-flex-row__margin"
-                    disabled={!HasFeatureAccess({ bodyshop, featureName: "smartscheduling" })}
-                    onClick={() => {
-                      const ssDate = dayjs(d);
-                      if (ssDate.isBefore(dayjs())) {
-                        form.setFieldsValue({ start: dayjs() });
-                      } else {
-                        form.setFieldsValue({
-                          start: dayjs(d).add(8, "hour")
-                        });
-                      }
-                      handleDateBlur();
-                    }}
-                  >
-                    <DateFormatter includeDay>{d}</DateFormatter>
-                  </Button>
-                </BlurWrapper>
+                <Button
+                  key={idx}
+                  className="imex-flex-row__margin"
+                  disabled={!hasSmartSchedulingAccess}
+                  onClick={() => {
+                    const ssDate = dayjs(d);
+                    if (ssDate.isBefore(dayjs())) {
+                      form.setFieldsValue({ start: dayjs() });
+                    } else {
+                      form.setFieldsValue({
+                        start: dayjs(d).add(8, "hour")
+                      });
+                    }
+                    handleDateBlur();
+                  }}
+                >
+                  <BlurWrapper featureName="smartscheduling">
+                    <span>
+                      <DateFormatter includeDay>{d}</DateFormatter>
+                    </span>
+                  </BlurWrapper>
+                </Button>
               ))}
-              {
-                //TODO:Upsell
-              }
+              {smartOptions.length > 1 && hasSmartSchedulingAccess && (
+                <UpsellComponent upsell={upsellEnum.smartscheduling.general} />
+              )}
             </Space>
           </>
         }