admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Patrick Fic
2024-12-16 10:26:03 -08:00
parent 54b8f564e4
commit 98f7147378
4 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,6 +36,28 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
[]
);
}, [loadData, ssbuckets]);
const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });
const chartContents = (
<>
<RadarChart
// cx={300}
// cy={250}
// outerRadius={150}
width={800}
height={600}
data={data}
>
<PolarGrid />
<PolarAngleAxis dataKey="bucket" />
<PolarRadiusAxis angle={90} />
<Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
<Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
<Tooltip />
<Legend />
</RadarChart>
</>
);
const popContent = (
<div>
@@ -48,26 +71,13 @@ export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
<strong>{loadData?.expectedJobCount}</strong>
</BlurWrapperComponent>
</Space>
<UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>
<BlurWrapperComponent featureName="smartscheduling">
<RadarChart
// cx={300}
// cy={250}
// outerRadius={150}
width={800}
height={600}
data={data}
>
<PolarGrid />
<PolarAngleAxis dataKey="bucket" />
<PolarRadiusAxis angle={90} />
<Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
<Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
<Tooltip />
<Legend />
</RadarChart>
</BlurWrapperComponent>
</UpsellMaskWrapper>
<BlurWrapperComponent featureName="smartscheduling">
{hasSmartSchedulingAccess ? (
chartContents
) : (
<UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
)}
</BlurWrapperComponent>
</div>
);

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

@@ -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>
<Card style={{ maxWidth: "30rem" }}>
<UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
</Card>
{!hasSmartSchedulingAccess && (
<Card style={{ maxWidth: "30rem" }}>
<UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
</Card>
)}
</div>
);
@@ -129,9 +133,11 @@ export function ScheduleCalendarHeaderComponent({
</BlurWrapperComponent>
</tr>
)}
<Card style={{ maxWidth: "30rem" }}>
<UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
</Card>
{!hasSmartSchedulingAccess && (
<Card style={{ maxWidth: "30rem" }}>
<UpsellComponent size="small" upsell={upsellEnum().smartscheduling.hrsdelta} />
</Card>
)}
</tbody>
</table>
</div>

4
client/src/components/schedule-job-modal/schedule-job-modal.component.jsx
View File

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

1
client/src/components/upsell/upsell.component.jsx
View File

@@ -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(() => {