@redsift/products 12.6.2 → 12.6.4

package/_internal/SignalCardSpfDomain.js

@@ -3,9 +3,9 @@ import React__default, { useMemo, useContext, createContext, forwardRef, useCall
 import classNames from 'classnames';
 import styled, { css } from 'styled-components';
 import pako from 'pako';
-import { interpolateTranslation, mapStatusToDetailedCardColor, isStructuredData, calculateSankeyHeight, create2LevelSankey, extractDmarcData, extractSpfData, extractTlsData, extractFcrdnsData, extractDnssecData, extractThreatIntelligenceData, extractUrlsData, extractBimiData, extractAmpData, extractSubdoData, extractDomainAnalyzerDkimData, extractDomainAnalyzerSpfData, extractDmarcDomainData, extractSpfDomainData, extractMtaStsFullData, extractDkimData, recordStatus } from '@redsift/signal-logic';
+import { interpolateTranslation, mapStatusToDetailedCardColor, isStructuredData, calculateSankeyHeight, create2LevelSankey, extractDmarcData, extractSpfData, extractTlsData, extractFcrdnsData, extractDnssecData, extractThreatIntelligenceData, extractUrlsData, extractBimiData, extractAmpData, extractSubdoData, extractDomainAnalyzerDkimData, extractDomainAnalyzerSpfData, extractDmarcDomainData, extractSpfDomainData, extractMtaStsFullData, extractDkimData, recordStatus, getBimiMakerEligibility } from '@redsift/signal-logic';
 import { useLocalizedStringFormatter, useTheme, Button, Icon, DetailedCard, ButtonLink, Flexbox } from '@redsift/design-system';
-import { mdiHelpCircle, mdiClose, mdiAlert, mdiEmail, mdiEarth, mdiInformationOutline, mdiCheck, mdiInformation, mdiFormatAlignRight, mdiFormatAlignJustify } from '@redsift/icons';
+import { mdiHelpCircle, mdiClose, mdiAlert, mdiEmail, mdiEarth, mdiInformationOutline, mdiCheck, mdiInformation, mdiFormatAlignRight, mdiFormatAlignJustify, mdiOpenInNew } from '@redsift/icons';
 import { createPortal } from 'react-dom';
 
 const COLOR = {
@@ -1960,6 +1960,10 @@ var enUS = {
 	"investigate.recommendations.protocol-google-yahoo-compliance": "Google/Yahoo Compliance",
 	"investigate.dmarc-promo.text": "Sign up for OnDMARC's 14-day free trial and get your domain DMARC compliant today.",
 	"investigate.dmarc-promo.button": "Protect your domain",
+	"investigate.bimi-maker-promo.heading": "Get BIMI easily with guided setup",
+	"investigate.bimi-maker-promo.missing-copy": "Your domain meets the DMARC requirements for BIMI. BIMI Maker guides you step by step through creating your logo and getting started with BIMI certification.",
+	"investigate.bimi-maker-promo.incomplete-copy": "Complete your BIMI setup with step-by-step guidance from BIMI Maker.",
+	"investigate.bimi-maker-promo.button-label": "Get started with BIMI Maker",
 	"investigate.section-titles.bimi-domain": "DMARC Domains",
 	"investigate.section-titles.dmarc-domain": "DMARC Domains",
 	"investigate.card.dmarc.domain-aligned": "The domain is aligned with the From Domain. It can contribute to passing DMARC.",
@@ -2688,6 +2692,10 @@ var frFR = {
 	"investigate.recommendations.protocol-google-yahoo-compliance": "Conformité Google/Yahoo",
 	"investigate.dmarc-promo.text": "Inscrivez-vous pour un essai gratuit de 14 jours d'OnDMARC et rendez votre domaine conforme à DMARC dès aujourd'hui.",
 	"investigate.dmarc-promo.button": "Protégez votre domaine",
+	"investigate.bimi-maker-promo.heading": "Adoptez BIMI facilement grâce à une configuration guidée",
+	"investigate.bimi-maker-promo.missing-copy": "Votre domaine remplit les exigences DMARC de BIMI. BIMI Maker vous guide pas à pas pour créer votre logo et démarrer votre certification BIMI.",
+	"investigate.bimi-maker-promo.incomplete-copy": "Finalisez votre configuration BIMI grâce aux instructions pas à pas de BIMI Maker.",
+	"investigate.bimi-maker-promo.button-label": "Commencer avec BIMI Maker",
 	"investigate.section-titles.bimi-domain": "Domaines DMARC",
 	"investigate.section-titles.dmarc-domain": "Domaines DMARC",
 	"investigate.card.dmarc.domain-aligned": "Le domaine est aligné avec le domaine expéditeur. Il peut contribuer à la réussite de DMARC.",
@@ -3288,7 +3296,7 @@ DescriptionSpacer.displayName = 'DeliverabilityDescriptionSpacer';
 ChartContainer.displayName = 'InfoChartContainer';
 
 const _excluded$7 = ["children", "theme", "type", "useInvestigateColors"];
-const websiteButtonToken$1 = (theme, token, state) => `var(--redsift-color-${theme}-components-website-buttons-primary-website-button-primary-${token}-${state})`;
+const websiteButtonToken$2 = (theme, token, state) => `var(--redsift-color-${theme}-components-website-buttons-primary-website-button-primary-${token}-${state})`;
 const websiteButtonOutlineToken = theme => `var(--redsift-color-${theme}-components-website-buttons-primary-website-button-primary-background-focus-visible-outline)`;
 const StyledSignalCardButton = styled.button`
   box-sizing: border-box;
@@ -3297,7 +3305,7 @@ const StyledSignalCardButton = styled.button`
   let {
     $theme
   } = _ref;
-  return websiteButtonToken$1($theme, 'background', 'default');
+  return websiteButtonToken$2($theme, 'background', 'default');
 }};
   /* Fallback if CSS variables not loaded */
   background-color: var(
@@ -3329,7 +3337,7 @@ const StyledSignalCardButton = styled.button`
   let {
     $theme
   } = _ref2;
-  return websiteButtonToken$1($theme, 'text', 'default');
+  return websiteButtonToken$2($theme, 'text', 'default');
 }};
     /* Fallback if CSS variables not loaded */
     color: white;
@@ -3347,14 +3355,14 @@ const StyledSignalCardButton = styled.button`
     $theme
   } = _ref3;
   return css`
-      background-color: ${websiteButtonToken$1($theme, 'background', 'hover')};
+      background-color: ${websiteButtonToken$2($theme, 'background', 'hover')};
       /* Fallback if CSS variables not loaded */
       background-color: #52184d;
-      color: ${websiteButtonToken$1($theme, 'text', 'hover')};
+      color: ${websiteButtonToken$2($theme, 'text', 'hover')};
       color: white;
 
       .redsift-icon:not(.colored) {
-        color: ${websiteButtonToken$1($theme, 'text', 'hover')};
+        color: ${websiteButtonToken$2($theme, 'text', 'hover')};
         color: white;
       }
     `;
@@ -3367,11 +3375,11 @@ const StyledSignalCardButton = styled.button`
     $theme
   } = _ref4;
   return css`
-      background-color: ${websiteButtonToken$1($theme, 'background', 'active')};
-      color: ${websiteButtonToken$1($theme, 'text', 'active')};
+      background-color: ${websiteButtonToken$2($theme, 'background', 'active')};
+      color: ${websiteButtonToken$2($theme, 'text', 'active')};
 
       .redsift-icon:not(.colored) {
-        color: ${websiteButtonToken$1($theme, 'text', 'active')};
+        color: ${websiteButtonToken$2($theme, 'text', 'active')};
       }
     `;
 }}
@@ -3383,12 +3391,12 @@ const StyledSignalCardButton = styled.button`
     $theme
   } = _ref5;
   return css`
-      background-color: ${websiteButtonToken$1($theme, 'background', 'focus-visible')};
-      color: ${websiteButtonToken$1($theme, 'text', 'focus-visible')};
+      background-color: ${websiteButtonToken$2($theme, 'background', 'focus-visible')};
+      color: ${websiteButtonToken$2($theme, 'text', 'focus-visible')};
       outline: 2px solid ${websiteButtonOutlineToken($theme)};
 
       .redsift-icon:not(.colored) {
-        color: ${websiteButtonToken$1($theme, 'text', 'focus-visible')};
+        color: ${websiteButtonToken$2($theme, 'text', 'focus-visible')};
       }
     `;
 }}
@@ -3405,12 +3413,12 @@ const StyledSignalCardButton = styled.button`
     $theme
   } = _ref6;
   return css`
-      background-color: ${websiteButtonToken$1($theme, 'background', 'disabled')};
-      color: ${websiteButtonToken$1($theme, 'text', 'disabled')};
+      background-color: ${websiteButtonToken$2($theme, 'background', 'disabled')};
+      color: ${websiteButtonToken$2($theme, 'text', 'disabled')};
       cursor: not-allowed;
 
       .redsift-icon:not(.colored) {
-        color: ${websiteButtonToken$1($theme, 'text', 'disabled')};
+        color: ${websiteButtonToken$2($theme, 'text', 'disabled')};
       }
     `;
 }}
@@ -5841,11 +5849,11 @@ const StyledBannerText = styled.span`
   max-width: 335px;
 `;
 const ONDMARC_SIGNUP_URL = 'https://iam.redsift.cloud/signup?redirectapp=cloud&product=ondmarc';
-const websiteButtonToken = (token, state) => `var(--redsift-color-light-components-website-buttons-primary-website-button-primary-${token}-${state})`;
+const websiteButtonToken$1 = (token, state) => `var(--redsift-color-light-components-website-buttons-primary-website-button-primary-${token}-${state})`;
 const StyledBannerLink = styled.a`
   box-sizing: border-box;
   align-items: center;
-  background-color: ${websiteButtonToken('background', 'default')};
+  background-color: ${websiteButtonToken$1('background', 'default')};
   background-color: var(
     --redsift-color-light-components-website-buttons-primary-website-button-primary-background-default,
     #63224a
@@ -5871,7 +5879,7 @@ const StyledBannerLink = styled.a`
 
   &,
   svg {
-    color: ${websiteButtonToken('text', 'default')};
+    color: ${websiteButtonToken$1('text', 'default')};
     color: var(--redsift-color-light-components-website-buttons-primary-website-button-primary-text-default, white);
   }
 
@@ -5884,8 +5892,8 @@ const StyledBannerLink = styled.a`
   }
 
   &:active {
-    background-color: ${websiteButtonToken('background', 'active')};
-    color: ${websiteButtonToken('text', 'active')};
+    background-color: ${websiteButtonToken$1('background', 'active')};
+    color: ${websiteButtonToken$1('text', 'active')};
   }
 `;
 const ExternalLinkIcon = () => /*#__PURE__*/React__default.createElement("svg", {
@@ -5900,7 +5908,7 @@ const ExternalLinkIcon = () => /*#__PURE__*/React__default.createElement("svg",
   d: "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z",
   fill: "currentColor"
 }));
-const StyledDSButtonLinkWrapper = styled.div`
+const StyledDSButtonLinkWrapper$1 = styled.div`
   flex: 1 0 0%;
 
   .redsift-button-link {
@@ -5940,7 +5948,7 @@ const DmarcPromoBanner = _ref => {
     onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(),
     target: "_blank",
     rel: "noopener noreferrer"
-  }, buttonLabel, /*#__PURE__*/React__default.createElement(ExternalLinkIcon, null)) : /*#__PURE__*/React__default.createElement(StyledDSButtonLinkWrapper, null, /*#__PURE__*/React__default.createElement(ButtonLink, {
+  }, buttonLabel, /*#__PURE__*/React__default.createElement(ExternalLinkIcon, null)) : /*#__PURE__*/React__default.createElement(StyledDSButtonLinkWrapper$1, null, /*#__PURE__*/React__default.createElement(ButtonLink, {
     href: href,
     onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(),
     target: "_blank",
@@ -9578,7 +9586,171 @@ const buildPublishedCertificateSections = (cert, pem, t, now, assertionMarkType)
   return sections;
 };
 
-const _excluded$2 = ["jmap", "onHeightChange", "useInvestigateColors", "isCollapsible", "areAllCollapsed", "onCollapseAll", "className"];
+/** Default BIMI Maker destination. Absolute, so it works from any consumer origin (DS-125). */
+const BIMI_MAKER_URL = 'https://redsift.com/tools/bimi-maker';
+const StyledPromo = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 24px 0 16px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid rgba(99, 34, 74, 0.15);
+  background: linear-gradient(
+      71deg,
+      rgba(237, 21, 83, 0.07) 2.5%,
+      rgba(140, 101, 255, 0.07) 51%,
+      rgba(107, 183, 255, 0.07) 100%
+    ),
+    #fff;
+`;
+const StyledPromoText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 10000 1 300px;
+  min-width: 0;
+`;
+const StyledPromoHeading = styled.p`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.5;
+  font-family: var(--sc-font-heading);
+  color: var(--sc-text-heading, var(--sc-text-color));
+`;
+const StyledPromoCopy = styled.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: var(--sc-font-body);
+  color: var(--sc-text-color);
+`;
+const websiteButtonToken = (token, state) => `var(--redsift-color-light-components-website-buttons-primary-website-button-primary-${token}-${state})`;
+
+/**
+ * Website-token primary button, used under `useInvestigateColors` like DmarcPromoBanner's link.
+ * Unlike that link it has a visible `:focus-visible` ring (DS-125 AC: visible focus state), and it
+ * may wrap, so the label never overflows a 320px viewport.
+ */
+const StyledPromoLink = styled.a`
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex: 1 0 auto;
+  max-width: 100%;
+  min-height: 48px;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: var(
+    --redsift-color-light-components-website-buttons-primary-website-button-primary-background-default,
+    #63224a
+  );
+  font-family: var(--redsift-typography-website-button-font-family, 'Space Grotesk', sans-serif);
+  font-size: var(--redsift-typography-website-button-font-size, 18px);
+  font-weight: var(--redsift-typography-website-button-font-weight, 500);
+  line-height: var(--redsift-typography-website-button-line-height, 1.5);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 200ms ease-out, color 200ms ease-out, outline-offset 75ms ease-out;
+  -webkit-font-smoothing: antialiased;
+
+  &,
+  svg {
+    color: var(--redsift-color-light-components-website-buttons-primary-website-button-primary-text-default, white);
+  }
+
+  &:hover {
+    background-color: var(
+      --redsift-color-light-components-website-buttons-primary-website-button-primary-background-hover,
+      #52184d
+    );
+  }
+
+  &:active {
+    background-color: ${websiteButtonToken('background', 'active')};
+  }
+
+  &:focus-visible {
+    outline: 2px solid
+      var(
+        --redsift-color-light-components-website-buttons-primary-website-button-primary-background-focus-visible-outline,
+        #63224a
+      );
+    outline-offset: 4px;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+const StyledDSButtonLinkWrapper = styled.div`
+  flex: 1 0 auto;
+  max-width: 100%;
+
+  .redsift-button-link {
+    box-sizing: border-box;
+    width: 100%;
+    text-decoration: none;
+  }
+
+  /* The DS Button's :focus-visible only swaps to its hover colour (outline: none), so keyboard
+     focus would look like hover. Add a ring (DS-125 AC: visible focus state). */
+  .redsift-button-link:focus-visible {
+    outline: 2px solid var(--redsift-color-primary-n, #4285f4);
+    outline-offset: 4px;
+  }
+`;
+const OpenInNewIcon = () => /*#__PURE__*/React__default.createElement("svg", {
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  focusable: "false",
+  height: "24",
+  width: "24"
+}, /*#__PURE__*/React__default.createElement("path", {
+  fill: "currentColor",
+  d: mdiOpenInNew
+}));
+/**
+ * BIMI Maker promotion on the BIMI card (DS-125). Opens in a new tab, like every signal-card CTA:
+ * navigating away would discard a one-shot Investigate result.
+ */
+const BimiMakerPromo = _ref => {
+  let {
+    reason,
+    href = BIMI_MAKER_URL,
+    onClick,
+    useInvestigateColors = false
+  } = _ref;
+  const {
+    t
+  } = useSignalCardTranslation('investigate');
+  const label = t('bimi-maker-promo.button-label');
+  const handleClick = () => onClick === null || onClick === void 0 ? void 0 : onClick(reason);
+  return /*#__PURE__*/React__default.createElement(StyledPromo, {
+    "data-testid": "bimi-maker-promo",
+    "data-reason": reason
+  }, /*#__PURE__*/React__default.createElement(StyledPromoText, null, /*#__PURE__*/React__default.createElement(StyledPromoHeading, null, t('bimi-maker-promo.heading')), /*#__PURE__*/React__default.createElement(StyledPromoCopy, null, reason === 'missing' ? t('bimi-maker-promo.missing-copy') : t('bimi-maker-promo.incomplete-copy'))), useInvestigateColors ? /*#__PURE__*/React__default.createElement(StyledPromoLink, {
+    href: href,
+    onClick: handleClick,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, label, /*#__PURE__*/React__default.createElement(OpenInNewIcon, null)) : /*#__PURE__*/React__default.createElement(StyledDSButtonLinkWrapper, null, /*#__PURE__*/React__default.createElement(ButtonLink, {
+    href: href,
+    onClick: handleClick,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    rightIcon: mdiOpenInNew
+  }, label)));
+};
+
+const _excluded$2 = ["jmap", "onHeightChange", "bimiMakerPromo", "useInvestigateColors", "isCollapsible", "areAllCollapsed", "onCollapseAll", "className"];
 const COMPONENT_NAME$2 = 'SignalCardBimi';
 const CLASSNAME$2 = 'redsift-signal-card-bimi';
 
@@ -9596,6 +9768,7 @@ const SignalCardBimi = /*#__PURE__*/forwardRef((props, ref) => {
         extsecrep
       },
       onHeightChange,
+      bimiMakerPromo,
       useInvestigateColors = false,
       isCollapsible,
       areAllCollapsed: areAllCollapsedProp,
@@ -9622,6 +9795,13 @@ const SignalCardBimi = /*#__PURE__*/forwardRef((props, ref) => {
   }, [bimi, t, extsecrep.dmarc]);
   const isDeclinationToPublish = (bimi === null || bimi === void 0 ? void 0 : bimi.bimiRecordStatus) === recordStatus.DECLINATION_TO_PUBLISH;
 
+  // The eligibility rule lives in signal-logic (WEB-1339) so the website, OnDMARC and the results
+  // email agree; the DS only decides whether to render it. Not gated on AI recommendations.
+  // Not memoised: the rule checks certificate expiry against the current time, so a memo keyed on
+  // `bimi` would keep a stale answer across an expiry, and the check is cheap.
+  const bimiMakerReason = bimiMakerPromo ? getBimiMakerEligibility(bimi) : null;
+  const bimiMakerOptions = typeof bimiMakerPromo === 'object' ? bimiMakerPromo : undefined;
+
   // Inject SVGLogo into SVG section (React-specific, can't come from signal-logic)
   const svgSection = useMemo(() => {
     var _length, _bimi$svgErrors, _errors$length, _bimi$logo, _bimi$logo$errors;
@@ -9819,7 +9999,12 @@ const SignalCardBimi = /*#__PURE__*/forwardRef((props, ref) => {
     onCollapseAll: onCollapseAll,
     "data-testid": "signal-card-bimi",
     "data-card-type": cardType
-  }, restProps));
+  }, restProps), bimiMakerReason && /*#__PURE__*/React__default.createElement(BimiMakerPromo, {
+    reason: bimiMakerReason,
+    href: bimiMakerOptions === null || bimiMakerOptions === void 0 ? void 0 : bimiMakerOptions.href,
+    onClick: bimiMakerOptions === null || bimiMakerOptions === void 0 ? void 0 : bimiMakerOptions.onClick,
+    useInvestigateColors: useInvestigateColors
+  }));
 });
 SignalCardBimi.className = CLASSNAME$2;
 SignalCardBimi.displayName = COMPONENT_NAME$2;