release/2026-06-05 - Esignture Banner

client/src/components/print-center-jobs/print-center-jobs.component.jsx

@@ -1,5 +1,6 @@
 import { useTreatmentsWithConfig } from "../../feature-flags/splitio-react-replacement";
-import { Card, Col, Input, Row, Space, Typography, Tooltip } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+import { Alert, Button, Card, Col, Input, Row, Space, Typography, Tooltip } from "antd";
 import _ from "lodash";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -17,6 +18,7 @@ import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-spee
 import { bodyshopHasDmsKey, DMS_MAP, getDmsMode } from "../../utils/dmsUtils";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { hasDocumensoApiKey } from "../../utils/esignature.js";
+import useLocalStorage from "../../utils/useLocalStorage";
 
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
@@ -28,6 +30,10 @@ const mapDispatchToProps = () => ({});
 
 export function PrintCenterJobsComponent({ printCenterModal, bodyshop, technician }) {
   const [search, setSearch] = useState("");
+  const [esignatureBannerDismissed, setEsignatureBannerDismissed] = useLocalStorage(
+    "print_center_esignature_banner_dismissed",
+    false
+  );
   const { id: jobId, job } = printCenterModal.context;
   const tempList = TemplateList("job", {});
   const { t } = useTranslation();
@@ -42,6 +48,7 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop, technicia
   const dmsMode = getDmsMode(bodyshop, "off");
   const isReynoldsMode = dmsMode === DMS_MAP.reynolds;
   const esignatureEnabled = hasDocumensoApiKey(bodyshop);
+  const showEsignatureBanner = !esignatureEnabled && !esignatureBannerDismissed;
 
   const Templates = !hasDMSKey
     ? Object.keys(tempList)
@@ -92,6 +99,23 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop, technicia
 
   return (
     <div>
+      {showEsignatureBanner && (
+        <Alert
+          action={
+            <Button
+              aria-label={t("general.actions.close")}
+              icon={<CloseOutlined />}
+              onClick={() => setEsignatureBannerDismissed(true)}
+              size="small"
+              type="text"
+            />
+          }
+          banner
+          title={t("printcenter.banners.esignature_promo")}
+          type="info"
+          className="print-center-esignature-banner"
+        />
+      )}
       <Row gutter={[16, 16]}>
         <Col lg={8} md={12} sm={24}>
           <PrintCenterSpeedPrint jobId={jobId} />

client/src/components/print-center-modal/print-center-modal.styles.scss

@@ -5,3 +5,7 @@
     padding: 0;
   }
 }
+
+.print-center-esignature-banner {
+  margin-bottom: 16px;
+}

client/src/translations/en_us/common.json

@@ -3053,6 +3053,9 @@
       "appointments": {
         "appointment_confirmation": "Appointment Confirmation"
       },
+      "banners": {
+        "esignature_promo": "Tired of getting paper signatures? Try E-Signatures today. Contact sales to add this feature."
+      },
       "bills": {
         "inhouse_invoice": "In House Invoice"
       },

client/src/translations/es/common.json

@@ -3053,6 +3053,9 @@
       "appointments": {
         "appointment_confirmation": ""
       },
+      "banners": {
+        "esignature_promo": "¿Cansado de obtener firmas en papel? Prueba las firmas electrónicas hoy. Contacta a ventas para agregar esta función."
+      },
       "bills": {
         "inhouse_invoice": ""
       },

client/src/translations/fr/common.json

@@ -3053,6 +3053,9 @@
       "appointments": {
         "appointment_confirmation": ""
       },
+      "banners": {
+        "esignature_promo": "Vous en avez assez des signatures papier? Essayez les signatures électroniques dès aujourd'hui. Communiquez avec les ventes pour ajouter cette fonction."
+      },
       "bills": {
         "inhouse_invoice": ""
       },