{"version":3,"file":"NotifyForm.IX_I9uEB.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/sWBjRYHhiWHS35GZLyHn/V4RoYuFiKByohSbLodEA/NotifyForm.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useEffect,useRef,useState}from\"react\";import{createPortal}from\"react-dom\";// @ts-ignore Cross-file import: the Framer bundler resolves this, TS does not\nimport{ArrowGlyph,BRAND,DURATION,EASE,FIELD_CSS,HAIRLINE,INK,WHITE,useLeadCapture}from\"https://framerusercontent.com/modules/5mBPxJgaMDYEOueuR7mD/qcMWSMuhlOHnjaCFrdph/useLeadCapture.js\";/**\n * FRANKLIN — GET NOTIFIED\n *\n * One component for every \"Coming soon\" surface. It carries an `interestId`,\n * so a signup says which integration or feature it was for — that identifier\n * is the reason this exists at all. Without it the site collects anonymous\n * email addresses and learns nothing about what to build next.\n *\n * On an integration card this REPLACES the CMS card description rather than\n * sitting under it. A coming-soon card has one thing to say, and the form's\n * own Description says it. Two descriptions competing in 260px is what the\n * swap exists to avoid.\n *\n * Two modes, one form underneath:\n *\n * - Inline The field row sits in the layout. Preferred everywhere it fits.\n * - Dialog A trigger opens a centred panel holding the same row. Only for\n * places too narrow or too dense for a field row.\n *\n * THE FIELD ROW NEVER WRAPS. Input and button are one horizontal flex row with\n * an 8px gap, and the input shrinks (flex 1 1 0, min-width 0) rather than\n * pushing the button onto a second line. That is what makes it survive the\n * 260px integration card and the 390px phone viewport with the same markup.\n * A labelled button leaves the card's field too narrow for its own\n * placeholder, so set Submit to \"Arrow\" there: a square at the row height.\n *\n * Row height and type come from FIELD_CSS in useLeadCapture.tsx, shared with\n * ToolRequestForm so the two forms on /integrations cannot differ. The input\n * uses --trf-ifs rather than a fixed size; see the note in that file for why\n * the input and the button label are two separate variables.\n *\n * Heading and Description are plain strings. Empty means they are not\n * rendered at all.\n *\n * Radius follows the project scale: 8 for controls, 12 for the dialog surface.\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n * @framerIntrinsicWidth 260\n * @framerIntrinsicHeight 44\n */const Z_INDEX=2147483e3;const STYLE_ID=\"franklin-notify-styles\";const DIALOG_CSS=`\n.fk-nf-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;}\n.fk-nf-backdrop{position:absolute;inset:0;background:rgba(8,12,10,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}\n.fk-nf-panel{position:relative;width:100%;max-width:520px;padding:32px;border-radius:12px;box-shadow:0 2em 6em rgba(0,0,0,.5);}\n.fk-nf-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(35,35,35,.06);color:${INK};cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}\n.fk-nf-close:hover{background:rgba(35,35,35,.12);}\n.fk-nf-close:focus-visible{outline:2px solid ${BRAND};outline-offset:2px;}\n.fk-nf-trigger{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;}\n`;/* Re-sync rather than bail when the tag exists: Framer hot-swaps the module\n without reloading the page, so an early return leaves the previous build's\n CSS in place. */function ensureStyles(){if(typeof document===\"undefined\")return;let el=document.getElementById(STYLE_ID);if(!el){el=document.createElement(\"style\");el.id=STYLE_ID;document.head.appendChild(el);}if(el.textContent!==DIALOG_CSS)el.textContent=DIALOG_CSS;}/* \"{name}\" in a string is replaced with the interest label, so one line in the\n property panel serves every integration when it is bound from the CMS. */function fill(template,label){return template.replace(/\\{name\\}/g,label||\"this\");}export default function NotifyForm(props){const{mode,interestId,interestLabel,source,destination,portalId,formId,interestProperty,sourceProperty,endpoint,payloadFormat,fireAndForget,triggerLabel,triggerStyle,heading,description,emailPlaceholder,buttonLabel,submittingLabel,submitStyle,showArrow,successMessage,errorMessage,invalidEmailMessage,consentRequiredMessage,consentMode,consentText,subscriptionTypeId,fieldBackground,buttonBackground,buttonLabelColor,textColor,panelBackground,radius,style}=props;const[email,setEmail]=useState(\"\");const[consent,setConsent]=useState(false);const[trap,setTrap]=useState(\"\");const[hover,setHover]=useState(false);const[isOpen,setIsOpen]=useState(false);const inputRef=useRef(null);const panelRef=useRef(null);const lastFocused=useRef(null);const{status,message,submit,reset}=useLeadCapture({destination,portalId,formId,interestProperty,sourceProperty,endpoint,payloadFormat,fireAndForget,interestId,interestLabel,source,successMessage,errorMessage,invalidEmailMessage,consentRequiredMessage,consentMode,consentText,subscriptionTypeId});ensureStyles();const isCanvas=RenderTarget.current()===RenderTarget.canvas;const showing=isOpen&&!isCanvas;useEffect(()=>{if(!showing)return;const previousOverflow=document.documentElement.style.overflow;document.documentElement.style.overflow=\"hidden\";window.setTimeout(()=>inputRef.current?.focus(),0);const onKeyDown=event=>{if(event.key===\"Escape\"){setIsOpen(false);return;}if(event.key!==\"Tab\")return;const panel=panelRef.current;if(!panel)return;const focusables=panel.querySelectorAll('button, input, [href], [tabindex]:not([tabindex=\"-1\"])');if(!focusables.length)return;const first=focusables[0];const last=focusables[focusables.length-1];if(event.shiftKey&&document.activeElement===first){event.preventDefault();last.focus();}else if(!event.shiftKey&&document.activeElement===last){event.preventDefault();first.focus();}};document.addEventListener(\"keydown\",onKeyDown);return()=>{document.documentElement.style.overflow=previousOverflow;document.removeEventListener(\"keydown\",onKeyDown);};},[showing]);/* Clear the field on success so a second signup starts empty, and so the\n address is not left sitting in the DOM. */useEffect(()=>{if(status===\"success\")setEmail(\"\");},[status]);/* The trigger usually sits INSIDE the card's own on /integrations, so\n the click has to be stopped here or the page navigates to the guide the\n moment the dialog opens. Framer wraps the whole card in one link; this\n is not hypothetical. */function open(event){event?.preventDefault();event?.stopPropagation();/* A fixed overlay on canvas would cover the whole editor, so the\n portal is off there. Say so out loud, otherwise it just looks like\n a trigger that does nothing. */if(isCanvas){console.info(\"[NotifyForm] The dialog opens in Preview, not on canvas.\");return;}lastFocused.current=document.activeElement;reset();setIsOpen(true);}function close(){setIsOpen(false);const previous=lastFocused.current;if(previous&&typeof previous.focus===\"function\")previous.focus();}function handleSubmit(event){event.preventDefault();/* Inline on a card means this form sits inside the card's link too, so\n the same guard the dialog trigger needs applies to submitting. */event.stopPropagation();submit({email,consent,trap});}const submitting=status===\"submitting\";/* The arrow-only square is not a shrunken button, it is the arrow box from\n Franklin's split primary button standing on its own. That is why it is\n square at the row height rather than a smaller pill. */const arrowOnly=submitStyle===\"arrow\"&&mode===\"inline\";/* flex 1 1 0 with min-width 0 is what lets the input give way instead of\n forcing a wrap. A min-width above zero would reintroduce the overflow\n the nowrap row exists to avoid. */const fieldStyle={flex:\"1 1 0%\",minWidth:0,height:\"var(--trf-h)\",padding:\"0 var(--trf-fpx)\",background:fieldBackground,borderRadius:radius,border:`1px solid ${HAIRLINE}`,outline:\"none\",fontFamily:'\"Geist\", sans-serif',fontWeight:400,// 15px on a mouse, 16px on a finger. See FIELD_CSS.\nfontSize:\"var(--trf-ifs)\",lineHeight:\"1.4em\",color:textColor,appearance:\"none\",WebkitAppearance:\"none\",transition:`border-color ${DURATION} ${EASE}`};function renderForm(inDialog){if(status===\"success\"){return /*#__PURE__*/_jsxs(\"div\",{className:\"fk-trf\",style:{display:\"flex\",alignItems:\"center\",justifyContent:inDialog?\"center\":\"flex-start\",minHeight:\"var(--trf-h)\",fontFamily:'\"Geist\", sans-serif',fontSize:15,lineHeight:\"1.4em\",color:textColor},children:[/*#__PURE__*/_jsx(\"style\",{children:FIELD_CSS}),message]});}return /*#__PURE__*/_jsxs(\"form\",{className:\"fk-trf\",onSubmit:handleSubmit,noValidate:true,style:{display:\"flex\",flexDirection:\"column\",gap:10,width:\"100%\"},children:[/*#__PURE__*/_jsx(\"style\",{children:FIELD_CSS}),/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"row\",flexWrap:\"nowrap\",alignItems:\"center\",gap:8,width:\"100%\"},children:[/*#__PURE__*/_jsx(\"input\",{ref:inputRef,type:\"email\",name:\"email\",autoComplete:\"email\",required:true,placeholder:emailPlaceholder,value:email,onChange:e=>setEmail(e.target.value),onClick:e=>e.stopPropagation(),style:fieldStyle,onFocus:e=>e.currentTarget.style.borderColor=BRAND,onBlur:e=>e.currentTarget.style.borderColor=HAIRLINE}),/*#__PURE__*/_jsx(\"input\",{type:\"text\",name:\"company\",tabIndex:-1,autoComplete:\"off\",\"aria-hidden\":\"true\",value:trap,onChange:e=>setTrap(e.target.value),style:{position:\"absolute\",width:1,height:1,opacity:0,pointerEvents:\"none\",left:\"-9999px\"}}),/*#__PURE__*/_jsx(\"button\",{type:\"submit\",disabled:submitting,\"aria-label\":arrowOnly?buttonLabel:undefined,title:arrowOnly?buttonLabel:undefined,onMouseEnter:()=>setHover(true),onMouseLeave:()=>setHover(false),style:{display:\"flex\",alignItems:\"center\",justifyContent:\"center\",gap:arrowOnly?0:8,flex:\"none\",height:\"var(--trf-h)\",width:arrowOnly?\"var(--trf-h)\":undefined,padding:arrowOnly?0:showArrow?\"0 var(--trf-bax) 0 var(--trf-bpx)\":\"0 var(--trf-bpx)\",background:buttonBackground,borderRadius:radius,border:\"none\",cursor:submitting?\"wait\":\"pointer\",fontFamily:'\"Geist\", sans-serif',fontWeight:500,fontSize:\"var(--trf-fs)\",lineHeight:\"var(--trf-lh)\",letterSpacing:\"var(--trf-ls)\",color:buttonLabelColor,whiteSpace:\"nowrap\",opacity:submitting?.6:1,filter:hover&&!submitting?\"brightness(1.35)\":\"brightness(1)\",transition:`filter ${DURATION} ${EASE}, opacity ${DURATION} ${EASE}`},children:arrowOnly?/*#__PURE__*/_jsx(ArrowGlyph,{color:buttonLabelColor}):/*#__PURE__*/_jsxs(_Fragment,{children:[submitting?submittingLabel:buttonLabel,showArrow&&!submitting&&/*#__PURE__*/_jsx(ArrowGlyph,{color:buttonLabelColor})]})})]}),consentMode===\"checkbox\"&&/*#__PURE__*/_jsxs(\"label\",{style:{display:\"flex\",alignItems:\"flex-start\",gap:8,fontFamily:'\"Geist\", sans-serif',fontSize:13,lineHeight:\"1.4em\",color:textColor,opacity:.7,cursor:\"pointer\"},children:[/*#__PURE__*/_jsx(\"input\",{type:\"checkbox\",checked:consent,onChange:e=>setConsent(e.target.checked),onClick:e=>e.stopPropagation(),style:{marginTop:2,accentColor:BRAND}}),/*#__PURE__*/_jsx(\"span\",{children:consentText})]}),consentMode===\"notice\"&&consentText&&/*#__PURE__*/_jsx(\"div\",{style:{fontFamily:'\"Geist\", sans-serif',fontSize:13,lineHeight:\"1.4em\",color:textColor,opacity:.6},children:consentText}),status===\"error\"&&message&&/*#__PURE__*/_jsx(\"div\",{role:\"alert\",style:{fontFamily:'\"Geist\", sans-serif',fontSize:13,lineHeight:\"1.4em\",color:textColor,opacity:.7},children:message})]});}if(mode===\"inline\"){return /*#__PURE__*/_jsxs(\"div\",{style:{...style,width:\"100%\"},children:[heading&&/*#__PURE__*/_jsx(\"div\",{style:{fontFamily:'\"Geist\", sans-serif',fontWeight:500,fontSize:18,lineHeight:\"1.2em\",letterSpacing:\"-0.36px\",color:textColor,marginBottom:description?6:12},children:fill(heading,interestLabel)}),description&&/*#__PURE__*/_jsx(\"div\",{style:{fontFamily:'\"Geist\", sans-serif',fontSize:15,lineHeight:\"1.4em\",color:textColor,opacity:.7,marginBottom:12},children:fill(description,interestLabel)}),renderForm(false)]});}/* Hover goes toward Surface/Brand, never toward accent green. Accent green\n is a surface colour in this system, never a text colour. */const triggerVisual=triggerStyle===\"pill\"?{display:\"inline-flex\",alignItems:\"center\",height:28,padding:\"0 12px\",borderRadius:999,border:`1px solid ${HAIRLINE}`,background:WHITE,fontFamily:'\"Geist\", sans-serif',fontWeight:500,fontSize:12,letterSpacing:\"-0.28px\",color:hover?BRAND:textColor,transition:`color ${DURATION} ${EASE}`}:{display:\"inline-flex\",alignItems:\"center\",gap:4,fontFamily:'\"Geist\", sans-serif',fontWeight:500,fontSize:15,letterSpacing:\"-0.3px\",color:hover?BRAND:textColor,textDecoration:\"underline\",transition:`color ${DURATION} ${EASE}`};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"fk-nf-trigger\",style:{...style,width:\"fit-content\"},onClick:open,onKeyDown:e=>{/* Enter and Space already fire onClick on a