diff --git a/client/src/components/job-lifecycle/job-lifecycle.component.jsx b/client/src/components/job-lifecycle/job-lifecycle.component.jsx index 7f99d08b5..df71c88c3 100644 --- a/client/src/components/job-lifecycle/job-lifecycle.component.jsx +++ b/client/src/components/job-lifecycle/job-lifecycle.component.jsx @@ -9,14 +9,25 @@ 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 { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component"; +import { connect } from "react-redux"; +import { createStructuredSelector } from "reselect"; +import { selectBodyshop } from "../../redux/user/user.selectors"; +const mapStateToProps = createStructuredSelector({ + bodyshop: selectBodyshop +}); +const mapDispatchToProps = (dispatch) => ({ + //setUserLanguage: language => dispatch(setUserLanguage(language)) +}); // show text on bar if text can fit -export function JobLifecycleComponent({ job, statuses, ...rest }) { +export function JobLifecycleComponent({ bodyshop, job, statuses, ...rest }) { const [loading, setLoading] = useState(true); const [lifecycleData, setLifecycleData] = useState(null); const { t } = useTranslation(); // Used for tracking external state changes. - + const hasLifeCycleAccess = HasFeatureAccess({ bodyshop, featureName: "lifecycle" }); const { data } = useQuery( gql` query get_job_test($id: uuid!) { @@ -143,9 +154,11 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) { } style={{ width: "100%" }} > - - - + {!hasLifeCycleAccess && ( + + + + )}
); } - -export default JobLifecycleComponent; +export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent); diff --git a/client/src/components/upsell/upsell.component.jsx b/client/src/components/upsell/upsell.component.jsx index 8857a278d..652cbeab9 100644 --- a/client/src/components/upsell/upsell.component.jsx +++ b/client/src/components/upsell/upsell.component.jsx @@ -13,6 +13,9 @@ import { Button, Card, Result } from "antd"; import i18n from "i18next"; import React, { useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; +import { Link } from "react-router-dom"; +import { store } from "../../redux/store.js"; +import InstanceRenderManager from "../../utils/instanceRenderMgr.js"; import "./upsell.styles.scss"; export default function UpsellComponent({ featureName, subFeatureName, upsell, disableMask }) { @@ -64,174 +67,275 @@ 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 = () => ({ - bills: { - autoreconcile: { - //icon: null, - title: i18n.t("upsell.messages.bills.autoreconcile.title"), - subTitle: i18n.t("upsell.messages.bills.autoreconcile.subtitle"), - extra: - //status: null +export const upsellEnum = () => { + const { currentUser, bodyshop } = store.getState().user; + + 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: ( + + + + ) + //status: null + }, + general: { + //icon: null, + title: i18n.t("upsell.messages.bills.general.title"), + subTitle: i18n.t("upsell.messages.bills.general.subtitle"), + extra: ( + + + + ) + //status: null + } }, - general: { - //icon: null, - title: i18n.t("upsell.messages.bills.general.title"), - subTitle: i18n.t("upsell.messages.bills.general.subtitle"), - extra: - //status: null - } - }, - checklist: { - general: { - //icon: null, - title: i18n.t("upsell.messages.checklist.general.title"), - subTitle: i18n.t("upsell.messages.checklist.general.subtitle"), - extra: - //status: null - } - }, - payments: { - general: { - //icon: null, - title: i18n.t("upsell.messages.payments.general.title"), - subTitle: i18n.t("upsell.messages.payments.general.subtitle"), - extra: - //status: null - } - }, - audit: { - general: { - //icon: null, - title: i18n.t("upsell.messages.audit.general.title"), - subTitle: i18n.t("upsell.messages.audit.general.subtitle"), - extra: - //status: null - } - }, - lifecycle: { - general: { - //icon: null, - title: i18n.t("upsell.messages.lifecycle.general.title"), - subTitle: i18n.t("upsell.messages.lifecycle.general.subtitle"), - extra: - //status: null } - } - }, - media: { - general: { - //icon: null, - title: i18n.t("upsell.messages.media.general.title"), - subTitle: i18n.t("upsell.messages.media.general.subtitle"), - extra: - //status: null } - }, - mobile: { - icon: , - title: i18n.t("upsell.messages.media.mobile.title"), - subTitle: i18n.t("upsell.messages.media.mobile.subtitle"), - extra: - //status: null } - } - }, - timetickets: { - allocations: { - title: i18n.t("upsell.messages.timetickets.allocations.title"), - subTitle: i18n.t("upsell.messages.timetickets.allocations.subtitle"), - extra: - }, - general: { - title: i18n.t("upsell.messages.timetickets.general.title"), - subTitle: i18n.t("upsell.messages.timetickets.general.subtitle"), - extra: - } - }, - smartscheduling: { - general: { - icon: , - title: i18n.t("upsell.messages.smartscheduling.general.title"), - subTitle: i18n.t("upsell.messages.smartscheduling.general.subtitle"), - extra: - }, - hrsdelta: { - icon: , - title: i18n.t("upsell.messages.smartscheduling.hrsdelta.title"), - subTitle: i18n.t("upsell.messages.smartscheduling.hrsdelta.subtitle"), - extra: - }, - datepicker: { - icon: , - title: i18n.t("upsell.messages.smartscheduling.datepicker.title"), - subTitle: i18n.t("upsell.messages.smartscheduling.datepicker.subtitle"), - extra: - } - }, - accounting: { - payables: { - icon: , - title: i18n.t("upsell.messages.accounting.payables.title"), - subTitle: i18n.t("upsell.messages.accounting.payables.subtitle"), - extra: - }, - receivables: { - icon: , - title: i18n.t("upsell.messages.accounting.receivables.title"), - subTitle: i18n.t("upsell.messages.accounting.receivables.subtitle"), - extra: + checklist: { + general: { + //icon: null, + title: i18n.t("upsell.messages.checklist.general.title"), + subTitle: i18n.t("upsell.messages.checklist.general.subtitle"), + extra: ( + + + + ) + //status: null + } }, payments: { - icon: , - title: i18n.t("upsell.messages.accounting.payments.title"), - subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"), - extra: + general: { + //icon: null, + title: i18n.t("upsell.messages.payments.general.title"), + subTitle: i18n.t("upsell.messages.payments.general.subtitle"), + extra: ( + + + + ) + //status: null + } + }, + audit: { + general: { + //icon: null, + title: i18n.t("upsell.messages.audit.general.title"), + subTitle: i18n.t("upsell.messages.audit.general.subtitle"), + extra: ( + + + + ) + //status: null + } + }, + lifecycle: { + general: { + //icon: null, + title: i18n.t("upsell.messages.lifecycle.general.title"), + subTitle: i18n.t("upsell.messages.lifecycle.general.subtitle"), + extra: ( + + + + ) + //status: null } + } + }, + media: { + general: { + //icon: null, + title: i18n.t("upsell.messages.media.general.title"), + subTitle: i18n.t("upsell.messages.media.general.subtitle"), + extra: ( + + + + ) + //status: null } + }, + mobile: { + icon: , + title: i18n.t("upsell.messages.media.mobile.title"), + subTitle: i18n.t("upsell.messages.media.mobile.subtitle"), + extra: ( + + + + ) + //status: null } + } + }, + timetickets: { + allocations: { + title: i18n.t("upsell.messages.timetickets.allocations.title"), + subTitle: i18n.t("upsell.messages.timetickets.allocations.subtitle"), + extra: ( + + + + ) + }, + general: { + title: i18n.t("upsell.messages.timetickets.general.title"), + subTitle: i18n.t("upsell.messages.timetickets.general.subtitle"), + extra: ( + + + + ) + } + }, + smartscheduling: { + general: { + icon: , + title: i18n.t("upsell.messages.smartscheduling.general.title"), + subTitle: i18n.t("upsell.messages.smartscheduling.general.subtitle"), + extra: ( + + + + ) + }, + hrsdelta: { + icon: , + title: i18n.t("upsell.messages.smartscheduling.hrsdelta.title"), + subTitle: i18n.t("upsell.messages.smartscheduling.hrsdelta.subtitle"), + extra: ( + + + + ) + }, + datepicker: { + icon: , + title: i18n.t("upsell.messages.smartscheduling.datepicker.title"), + subTitle: i18n.t("upsell.messages.smartscheduling.datepicker.subtitle"), + extra: ( + + + + ) + } + }, + accounting: { + payables: { + icon: , + title: i18n.t("upsell.messages.accounting.payables.title"), + subTitle: i18n.t("upsell.messages.accounting.payables.subtitle"), + extra: ( + + + + ) + }, + receivables: { + icon: , + title: i18n.t("upsell.messages.accounting.receivables.title"), + subTitle: i18n.t("upsell.messages.accounting.receivables.subtitle"), + extra: ( + + + + ) + }, + payments: { + icon: , + title: i18n.t("upsell.messages.accounting.payments.title"), + subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"), + extra: ( + + + + ) + } + }, + courtesycars: { + general: { + icon: , + title: i18n.t("upsell.messages.courtesycars.general.title"), + subTitle: i18n.t("upsell.messages.courtesycars.general.subtitle"), + extra: ( + + + + ) + } + }, + dashboard: { + general: { + icon: , + title: i18n.t("upsell.messages.dashboard.general.title"), + subTitle: i18n.t("upsell.messages.dashboard.general.subtitle"), + extra: ( + + + + ) + } + }, + visualboard: { + general: { + icon: , + title: i18n.t("upsell.messages.visualboard.general.title"), + subTitle: i18n.t("upsell.messages.visualboard.general.subtitle"), + extra: ( + + + + ) + } + }, + scoreboard: { + general: { + icon: , + title: i18n.t("upsell.messages.scoreboard.general.title"), + subTitle: i18n.t("upsell.messages.scoreboard.general.subtitle"), + extra: ( + + + + ) + } + }, + techconsole: { + general: { + icon: , + title: i18n.t("upsell.messages.techconsole.general.title"), + subTitle: i18n.t("upsell.messages.techconsole.general.subtitle"), + extra: ( + + + + ) + } + }, + csi: { + general: { + icon: , + title: i18n.t("upsell.messages.csi.general.title"), + subTitle: i18n.t("upsell.messages.csi.general.subtitle"), + extra: ( + + + + ) + } } - }, - courtesycars: { - general: { - icon: , - title: i18n.t("upsell.messages.courtesycars.general.title"), - subTitle: i18n.t("upsell.messages.courtesycars.general.subtitle"), - extra: - } - }, - dashboard: { - general: { - icon: , - title: i18n.t("upsell.messages.dashboard.general.title"), - subTitle: i18n.t("upsell.messages.dashboard.general.subtitle"), - extra: - } - }, - visualboard: { - general: { - icon: , - title: i18n.t("upsell.messages.visualboard.general.title"), - subTitle: i18n.t("upsell.messages.visualboard.general.subtitle"), - extra: - } - }, - scoreboard: { - general: { - icon: , - title: i18n.t("upsell.messages.scoreboard.general.title"), - subTitle: i18n.t("upsell.messages.scoreboard.general.subtitle"), - extra: - } - }, - techconsole: { - general: { - icon: , - title: i18n.t("upsell.messages.techconsole.general.title"), - subTitle: i18n.t("upsell.messages.techconsole.general.subtitle"), - extra: - } - }, - csi: { - general: { - icon: , - title: i18n.t("upsell.messages.csi.general.title"), - subTitle: i18n.t("upsell.messages.csi.general.subtitle"), - extra: - } - } -}); + }; +};