IO-3067 Correct Rome Learn More Link.

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%" }}
             >
-              <Card type="inner" style={{ marginTop: "10px" }}>
+              {!hasLifeCycleAccess && (
-                <UpsellComponent upsell={upsellEnum().lifecycle.general} />
+                <Card type="inner" style={{ marginTop: "10px" }}>
-              </Card>
+                  <UpsellComponent upsell={upsellEnum().lifecycle.general} />
+                </Card>
+              )}
               <BlurWrapperComponent featureName="lifecycle" bypass>
                 <div
                   id="bar-container"
@@ -302,5 +315,4 @@ export function JobLifecycleComponent({ job, statuses, ...rest }) {
     </Card>
   );
 }
-
+export default connect(mapStateToProps, mapDispatchToProps)(JobLifecycleComponent);
-export default JobLifecycleComponent;

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
     </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 = () => ({
+export const upsellEnum = () => {
-  bills: {
+  const { currentUser, bodyshop } = store.getState().user;
-    autoreconcile: {
+
-      //icon: null,
+  const [first_name, ...last_name] = currentUser?.displayName ? currentUser.displayName.split(" ") : [];
-      title: i18n.t("upsell.messages.bills.autoreconcile.title"),
+  const LearnMoreLink = encodeURI(
-      subTitle: i18n.t("upsell.messages.bills.autoreconcile.subtitle"),
+    InstanceRenderManager({
-      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+      imex: `https://imexsystems.ca/schedule-a-demo/`,
-      //status: null
+      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: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null
+      },
+      general: {
+        //icon: null,
+        title: i18n.t("upsell.messages.bills.general.title"),
+        subTitle: i18n.t("upsell.messages.bills.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null
+      }
     },
-    general: {
+    checklist: {
-      //icon: null,
+      general: {
-      title: i18n.t("upsell.messages.bills.general.title"),
+        //icon: null,
-      subTitle: i18n.t("upsell.messages.bills.general.subtitle"),
+        title: i18n.t("upsell.messages.checklist.general.title"),
-      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+        subTitle: i18n.t("upsell.messages.checklist.general.subtitle"),
-      //status: null
+        extra: (
-    }
+          <Link to={LearnMoreLink} target="_blank">
-  },
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
-  checklist: {
+          </Link>
-    general: {
+        )
-      //icon: null,
+        //status: 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 />,
+      general: {
-      title: i18n.t("upsell.messages.accounting.payments.title"),
+        //icon: null,
-      subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"),
+        title: i18n.t("upsell.messages.payments.general.title"),
-      extra: <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+        subTitle: i18n.t("upsell.messages.payments.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null
+      }
+    },
+    audit: {
+      general: {
+        //icon: null,
+        title: i18n.t("upsell.messages.audit.general.title"),
+        subTitle: i18n.t("upsell.messages.audit.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null
+      }
+    },
+    lifecycle: {
+      general: {
+        //icon: null,
+        title: i18n.t("upsell.messages.lifecycle.general.title"),
+        subTitle: i18n.t("upsell.messages.lifecycle.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null }
+      }
+    },
+    media: {
+      general: {
+        //icon: null,
+        title: i18n.t("upsell.messages.media.general.title"),
+        subTitle: i18n.t("upsell.messages.media.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null }
+      },
+      mobile: {
+        icon: <MobileOutlined />,
+        title: i18n.t("upsell.messages.media.mobile.title"),
+        subTitle: i18n.t("upsell.messages.media.mobile.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+        //status: null }
+      }
+    },
+    timetickets: {
+      allocations: {
+        title: i18n.t("upsell.messages.timetickets.allocations.title"),
+        subTitle: i18n.t("upsell.messages.timetickets.allocations.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      },
+      general: {
+        title: i18n.t("upsell.messages.timetickets.general.title"),
+        subTitle: i18n.t("upsell.messages.timetickets.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    smartscheduling: {
+      general: {
+        icon: <CalendarOutlined />,
+        title: i18n.t("upsell.messages.smartscheduling.general.title"),
+        subTitle: i18n.t("upsell.messages.smartscheduling.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      },
+      hrsdelta: {
+        icon: <CarOutlined />,
+        title: i18n.t("upsell.messages.smartscheduling.hrsdelta.title"),
+        subTitle: i18n.t("upsell.messages.smartscheduling.hrsdelta.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      },
+      datepicker: {
+        icon: <CarOutlined />,
+        title: i18n.t("upsell.messages.smartscheduling.datepicker.title"),
+        subTitle: i18n.t("upsell.messages.smartscheduling.datepicker.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    accounting: {
+      payables: {
+        icon: <DollarOutlined />,
+        title: i18n.t("upsell.messages.accounting.payables.title"),
+        subTitle: i18n.t("upsell.messages.accounting.payables.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      },
+      receivables: {
+        icon: <DollarOutlined />,
+        title: i18n.t("upsell.messages.accounting.receivables.title"),
+        subTitle: i18n.t("upsell.messages.accounting.receivables.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      },
+      payments: {
+        icon: <DollarOutlined />,
+        title: i18n.t("upsell.messages.accounting.payments.title"),
+        subTitle: i18n.t("upsell.messages.accounting.payments.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    courtesycars: {
+      general: {
+        icon: <CarOutlined />,
+        title: i18n.t("upsell.messages.courtesycars.general.title"),
+        subTitle: i18n.t("upsell.messages.courtesycars.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    dashboard: {
+      general: {
+        icon: <DashboardOutlined />,
+        title: i18n.t("upsell.messages.dashboard.general.title"),
+        subTitle: i18n.t("upsell.messages.dashboard.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    visualboard: {
+      general: {
+        icon: <BuildOutlined />,
+        title: i18n.t("upsell.messages.visualboard.general.title"),
+        subTitle: i18n.t("upsell.messages.visualboard.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    scoreboard: {
+      general: {
+        icon: <LineChartOutlined />,
+        title: i18n.t("upsell.messages.scoreboard.general.title"),
+        subTitle: i18n.t("upsell.messages.scoreboard.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    techconsole: {
+      general: {
+        icon: <LineChartOutlined />,
+        title: i18n.t("upsell.messages.techconsole.general.title"),
+        subTitle: i18n.t("upsell.messages.techconsole.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
+    },
+    csi: {
+      general: {
+        icon: <StarOutlined />,
+        title: i18n.t("upsell.messages.csi.general.title"),
+        subTitle: i18n.t("upsell.messages.csi.general.subtitle"),
+        extra: (
+          <Link to={LearnMoreLink} target="_blank">
+            <Button type="primary">{i18n.t("upsell.cta.learnmore")}</Button>
+          </Link>
+        )
+      }
     }
-  },
+  };
-  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>
-    }
-  }
-});