237 lines
8.2 KiB
JavaScript
237 lines
8.2 KiB
JavaScript
import {
|
|
AppstoreAddOutlined,
|
|
BuildOutlined,
|
|
CalendarOutlined,
|
|
CarOutlined,
|
|
DashboardOutlined,
|
|
DollarOutlined,
|
|
LineChartOutlined,
|
|
MobileOutlined,
|
|
StarOutlined
|
|
} from "@ant-design/icons";
|
|
import { Button, Card, Result } from "antd";
|
|
import i18n from "i18next";
|
|
import React, { useEffect, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import "./upsell.styles.scss";
|
|
|
|
export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) {
|
|
const { t } = useTranslation();
|
|
const resultProps = upsell || upsellEnum[featureName][subFeatureName];
|
|
const componentRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (disableMask) return;
|
|
const parentElement = componentRef.current?.parentElement;
|
|
if (parentElement) {
|
|
const mask = document.createElement("div");
|
|
mask.style.position = "absolute";
|
|
mask.style.top = 0;
|
|
mask.style.left = 0;
|
|
mask.style.width = "100%";
|
|
mask.style.height = "100%";
|
|
mask.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
|
|
// mask.style.zIndex = 9999;
|
|
parentElement.style.position = "relative";
|
|
|
|
parentElement.prepend(mask);
|
|
|
|
return () => {
|
|
parentElement.removeChild(mask);
|
|
};
|
|
}
|
|
}, [disableMask]);
|
|
|
|
if (!resultProps) return <Result status="info" title={t("upsell.messages.generic")} />;
|
|
return (
|
|
<div ref={componentRef}>
|
|
<Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
|
|
</div>
|
|
);
|
|
}
|
|
//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];
|
|
return (
|
|
<div className="mask-wrapper">
|
|
<div className="mask-content">{children}</div>
|
|
<div className="mask-overlay">
|
|
<Card size="small">
|
|
<Result status="info" icon={<AppstoreAddOutlined />} {...resultProps} />
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
//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 = {
|
|
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
|
|
},
|
|
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: {
|
|
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>
|
|
}
|
|
}
|
|
};
|