@bikdotai/bik-component-library 0.0.852-beta.8 → 0.0.852-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/agent-listing/AgentTableRow.js +1 -1
- package/dist/cjs/components/agent-listing/AgentTableRow.js.map +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js +2 -2
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +2 -2
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/cjs/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/esm/components/agent-listing/AgentTableRow.js +45 -78
- package/dist/esm/components/agent-listing/AgentTableRow.js.map +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +419 -342
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +33 -35
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +47 -48
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/types/props.types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MajorUpdatePopup.js","sources":["../../../../src/components/feature-announcements/MajorUpdatePopup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Arrow from '../../assets/icons/chevronRight2.svg';\nimport PlayIcon from '../../assets/icons/play.svg';\nimport { TEXT } from './constants';\nimport { getMajorPopupStyles } from './styles';\nimport { MajorUpdatePopupProps } from './types';\nimport {\n\tcalculateCloseTransform,\n\tdecodeHTMLEntities,\n\texecuteAfterAnimation,\n\tfindWhatsNewButton,\n\thideJoyrideArrow,\n} from './utils';\n\nconst MajorUpdatePopup: React.FC<MajorUpdatePopupProps> = ({\n\tfeature,\n\tcurrentIndex,\n\ttotalFeatures,\n\tonSkip,\n\tonExplore,\n\tonPrevious,\n\tonNext,\n\tsetIsClosing: setIsClosingParent,\n\tonSecondaryAction,\n\tratio = '16:9',\n\tpadding,\n}) => {\n\tconst [isClosing, setIsClosing] = useState(false);\n\tconst [startAnimation, setStartAnimation] = useState(false);\n\tconst [transform, setTransform] = useState('');\n\tconst popupRef = useRef<HTMLDivElement>(null);\n\tconst [isVideoPaused, setIsVideoPaused] = useState(false);\n\tconst [showPlayIcon, setShowPlayIcon] = useState(true);\n\tconst videoRef = useRef<HTMLVideoElement>(null);\n\tconst [imageAspectRatio, setImageAspectRatio] = useState<\n\t\t'16:9' | '1:1' | '4:3'\n\t>(ratio);\n\n\tconst imageRef = useRef<HTMLImageElement>(null);\n\n\tuseEffect(() => {\n\t\tif (isClosing) {\n\t\t\t// Start the shrink animation immediately\n\t\t\tsetStartAnimation(true);\n\t\t}\n\t}, [isClosing]);\n\n\tconst handleClose = (callback: () => Promise<void> | void): void => {\n\t\thideJoyrideArrow(popupRef.current);\n\n\t\tconst targetButton = findWhatsNewButton();\n\n\t\tif (targetButton && popupRef.current) {\n\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\tpopupRef.current,\n\t\t\t\ttargetButton,\n\t\t\t);\n\t\t\tsetTransform(transformValue);\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t\texecuteAfterAnimation(callback);\n\t};\n\n\tconst handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n\t\tconst img = e.currentTarget;\n\t\tconst width = img.naturalWidth;\n\t\tconst height = img.naturalHeight;\n\n\t\tif (width && height) {\n\t\t\tconst aspectRatio = width / height;\n\n\t\t\t// Determine closest predefined ratio\n\t\t\tif (Math.abs(aspectRatio - 16 / 9) < 0.1) {\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (Math.abs(aspectRatio - 1) < 0.1) {\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t} else if (Math.abs(aspectRatio - 4 / 3) < 0.1) {\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else if (aspectRatio > 1.5) {\n\t\t\t\t// Wide images default to 16:9\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (aspectRatio < 0.9) {\n\t\t\t\t// Tall images default to 4:3\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else {\n\t\t\t\t// Close to square, use 1:1\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleVideoLoadedMetadata = (\n\t\te: React.SyntheticEvent<HTMLVideoElement>,\n\t) => {\n\t\tconst video = e.currentTarget;\n\t\tconst width = video.videoWidth;\n\t\tconst height = video.videoHeight;\n\n\t\tif (width && height) {\n\t\t\tconst aspectRatio = width / height;\n\n\t\t\tif (Math.abs(aspectRatio - 16 / 9) < 0.1) {\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (Math.abs(aspectRatio - 1) < 0.1) {\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t} else if (Math.abs(aspectRatio - 4 / 3) < 0.1) {\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else if (aspectRatio > 1.5) {\n\t\t\t\t// Wide videos default to 16:9\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (aspectRatio < 0.9) {\n\t\t\t\t// Tall videos default to 4:3\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else {\n\t\t\t\t// Close to square, use 1:1\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleExplore = (): void => {\n\t\tconst action = feature.primaryButton?.action;\n\n\t\tif (action === 'Open link') {\n\t\t\tconst url = feature.primaryButton?.redirectionUrl || feature.redirectUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tonExplore(action);\n\n\t\t// Run closing animation in background\n\t\thideJoyrideArrow(popupRef.current);\n\t\tconst targetButton = findWhatsNewButton();\n\t\tif (targetButton && popupRef.current) {\n\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\tpopupRef.current,\n\t\t\t\ttargetButton,\n\t\t\t);\n\t\t\tsetTransform(transformValue);\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t};\n\n\tconst handleSkipClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\thandleClose(onSkip);\n\t};\n\n\tconst handlePreviousClick = (\n\t\te: React.MouseEvent<HTMLButtonElement>,\n\t): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tonPrevious();\n\t};\n\n\tconst handleNextClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tonNext();\n\t};\n\n\tconst handleSecondaryAction = (e: React.MouseEvent): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tconst action = feature.secondaryButton?.action;\n\t\tconst closeCallback = onSecondaryAction || onSkip;\n\t\tlet internalUrl: string | null = null;\n\n\t\t// Handle based on action type\n\t\tif (action === 'Play Video') {\n\t\t\tonExplore('Play Video');\n\t\t} else if (action === 'Open link') {\n\t\t\tconst url = feature.secondaryButton?.redirectionUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t} else {\n\t\t\t\t\tinternalUrl = url;\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (action === 'Close popup' || action === '') {\n\t\t\t// Just close the popup (empty action also closes)\n\t\t\t// callback is executed after closing animation completes\n\t\t}\n\n\t\t// Always close popup after secondary action\n\t\thideJoyrideArrow(popupRef.current);\n\t\tconst targetButton = findWhatsNewButton();\n\t\tif (targetButton && popupRef.current) {\n\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\tpopupRef.current,\n\t\t\t\ttargetButton,\n\t\t\t);\n\t\t\tsetTransform(transformValue);\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t\texecuteAfterAnimation(async () => {\n\t\t\tawait closeCallback();\n\t\t\tif (internalUrl) {\n\t\t\t\twindow.location.href = internalUrl;\n\t\t\t}\n\t\t});\n\t};\n\n\tconst styles = getMajorPopupStyles(\n\t\tstartAnimation,\n\t\ttransform,\n\t\timageAspectRatio,\n\t\tpadding || feature.padding,\n\t\tfeature.primaryButton?.style,\n\t\tfeature.secondaryButton?.style,\n\t);\n\n\tconst handleVideoClick = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (videoRef.current) {\n\t\t\tif (videoRef.current.paused) {\n\t\t\t\tvideoRef.current.play();\n\t\t\t\tsetIsVideoPaused(false);\n\t\t\t\tsetShowPlayIcon(false);\n\t\t\t} else {\n\t\t\t\tvideoRef.current.pause();\n\t\t\t\tsetIsVideoPaused(true);\n\t\t\t\tsetShowPlayIcon(true);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleVideoKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tif (videoRef.current) {\n\t\t\t\tif (videoRef.current.paused) {\n\t\t\t\t\tvideoRef.current.play();\n\t\t\t\t\tsetIsVideoPaused(false);\n\t\t\t\t\tsetShowPlayIcon(false);\n\t\t\t\t} else {\n\t\t\t\t\tvideoRef.current.pause();\n\t\t\t\t\tsetIsVideoPaused(true);\n\t\t\t\t\tsetShowPlayIcon(true);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<div style={styles.outerWrapper}>\n\t\t\t<div\n\t\t\t\tref={popupRef}\n\t\t\t\tstyle={{\n\t\t\t\t\t...styles.container,\n\t\t\t\t\topacity: startAnimation ? 0 : 1,\n\t\t\t\t\ttransition: 'opacity 0.2s ease-in-out, transform 0.3s ease',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<style>{`\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t`}</style>\n\t\t\t\t{/* Content Wrapper - contains image and text side by side */}\n\t\t\t\t<div style={styles.contentWrapper}>\n\t\t\t\t\t{/* Image/Video section */}\n\t\t\t\t\t<div style={styles.imageContainer}>\n\t\t\t\t\t\t{feature.productVideo ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\t\tref={videoRef}\n\t\t\t\t\t\t\t\t\tsrc={feature.productVideo}\n\t\t\t\t\t\t\t\t\tstyle={styles.image}\n\t\t\t\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\t\t\tcontrols\n\t\t\t\t\t\t\t\t\taria-label={`Product video for ${feature.title}`}\n\t\t\t\t\t\t\t\t\tonLoadedMetadata={handleVideoLoadedMetadata}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t{(isVideoPaused || showPlayIcon) && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={styles.videoOverlay}\n\t\t\t\t\t\t\t\t\t\tonClick={handleVideoClick}\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\t\taria-label={isVideoPaused ? 'Play video' : 'Pause video'}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleVideoKeyDown}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlayIcon width={20} height={20} />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : feature.displayImage ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tref={imageRef}\n\t\t\t\t\t\t\t\tsrc={feature.displayImage}\n\t\t\t\t\t\t\t\talt={feature.title}\n\t\t\t\t\t\t\t\tstyle={styles.image}\n\t\t\t\t\t\t\t\tonLoad={handleImageLoad}\n\t\t\t\t\t\t\t\tonError={(e) => {\n\t\t\t\t\t\t\t\t\tif (feature.image) {\n\t\t\t\t\t\t\t\t\t\t(e.target as HTMLImageElement).src = feature.image;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={styles.imagePlaceholder}>\n\t\t\t\t\t\t\t\t{TEXT.FEATURE_PREVIEW_PLACEHOLDER}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Content section */}\n\t\t\t\t\t<div style={styles.contentContainer}>\n\t\t\t\t\t\t{/* Skip Button at top-right */}\n\t\t\t\t\t\t<div style={styles.skipButtonContainer}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonClick={handleSkipClick}\n\t\t\t\t\t\t\t\tstyle={styles.skipButton.base}\n\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\tObject.assign(e.currentTarget.style, styles.skipButton.hover)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\tObject.assign(e.currentTarget.style, styles.skipButton.base)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taria-label=\"Skip feature announcement\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tSkip\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Title */}\n\t\t\t\t\t\t<h3 style={styles.title}>{feature.title}</h3>\n\n\t\t\t\t\t\t{/* Content/Description */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-popup-content\n\t\t\t\t\t\t\tstyle={styles.content}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: decodeHTMLEntities(\n\t\t\t\t\t\t\t\t\tfeature.content || feature.body || '',\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{/* Actions - Buttons and Navigation */}\n\t\t\t\t\t\t<div style={styles.actionsWrapper}>\n\t\t\t\t\t\t\t<div style={styles.buttonsGroup}>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tonClick={handleExplore}\n\t\t\t\t\t\t\t\t\tstyle={styles.exploreButton.base}\n\t\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\tstyles.exploreButton.hover,\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\tstyles.exploreButton.base,\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{feature.primaryButton?.text ||\n\t\t\t\t\t\t\t\t\t\tfeature.buttonText ||\n\t\t\t\t\t\t\t\t\t\tTEXT.DEFAULT_BUTTON_TEXT}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t{/* Secondary Button (Optional) */}\n\t\t\t\t\t\t\t\t{feature.secondaryButton?.text &&\n\t\t\t\t\t\t\t\t\t(feature.secondaryButton?.redirectionUrl &&\n\t\t\t\t\t\t\t\t\tfeature.secondaryButton?.action !== 'Play Video' ? (\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={feature.secondaryButton.redirectionUrl}\n\t\t\t\t\t\t\t\t\t\t\ttarget={\n\t\t\t\t\t\t\t\t\t\t\t\tfeature.secondaryButton.redirectionUrl.startsWith(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'http',\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '_blank'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '_self'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\trel={\n\t\t\t\t\t\t\t\t\t\t\t\tfeature.secondaryButton.redirectionUrl.startsWith(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'http',\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'noopener noreferrer'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={handleSecondaryAction}\n\t\t\t\t\t\t\t\t\t\t\tstyle={styles.secondaryButton.base}\n\t\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.hover,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.base,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{feature.secondaryButton.text}\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\tonClick={handleSecondaryAction}\n\t\t\t\t\t\t\t\t\t\t\tstyle={styles.secondaryButton.base}\n\t\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.hover,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.base,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{feature.secondaryButton.text}\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/* Navigation arrows */}\n\t\t\t\t\t\t\t{totalFeatures > 1 && (\n\t\t\t\t\t\t\t\t<div style={styles.navigationContainer}>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tonClick={handlePreviousClick}\n\t\t\t\t\t\t\t\t\t\tdisabled={currentIndex === 0}\n\t\t\t\t\t\t\t\t\t\tstyle={styles.navigationButton(currentIndex === 0).base}\n\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(false).hover,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(false).base,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label=\"Previous feature\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Arrow style={{ transform: 'rotate(180deg)' }} />\n\t\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tonClick={handleNextClick}\n\t\t\t\t\t\t\t\t\t\tdisabled={currentIndex === totalFeatures - 1}\n\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === totalFeatures - 1,\n\t\t\t\t\t\t\t\t\t\t\t).base\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== totalFeatures - 1) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(false).hover,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== totalFeatures - 1) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === totalFeatures - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t).base,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label=\"Next feature\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Arrow />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{/* Close contentWrapper */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default MajorUpdatePopup;\n"],"names":["MajorUpdatePopup","feature","currentIndex","totalFeatures","onSkip","onExplore","onPrevious","onNext","setIsClosingParent","onSecondaryAction","ratio","padding","isClosing","setIsClosing","useState","startAnimation","setStartAnimation","transform","setTransform","popupRef","useRef","isVideoPaused","setIsVideoPaused","showPlayIcon","setShowPlayIcon","videoRef","imageAspectRatio","setImageAspectRatio","imageRef","useEffect","handleClose","callback","hideJoyrideArrow","targetButton","findWhatsNewButton","transformValue","calculateCloseTransform","executeAfterAnimation","handleImageLoad","img","width","height","aspectRatio","handleVideoLoadedMetadata","video","handleExplore","action","url","handleSkipClick","handlePreviousClick","handleNextClick","handleSecondaryAction","closeCallback","internalUrl","styles","getMajorPopupStyles","handleVideoClick","handleVideoKeyDown","jsx","jsxs","Fragment","PlayIcon","TEXT","decodeHTMLEntities","Arrow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MajorUpdatePopup.js","sources":["../../../../src/components/feature-announcements/MajorUpdatePopup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport Arrow from '../../assets/icons/chevronRight2.svg';\nimport PlayIcon from '../../assets/icons/play.svg';\nimport { TEXT } from './constants';\nimport { getMajorPopupStyles } from './styles';\nimport { MajorUpdatePopupProps } from './types';\nimport {\n\tcalculateCloseTransform,\n\tdecodeHTMLEntities,\n\texecuteAfterAnimation,\n\tfindWhatsNewButton,\n\thideJoyrideArrow,\n} from './utils';\n\nconst MajorUpdatePopup: React.FC<MajorUpdatePopupProps> = ({\n\tfeature,\n\tcurrentIndex,\n\ttotalFeatures,\n\tonSkip,\n\tonExplore,\n\tonPrevious,\n\tonNext,\n\tsetIsClosing: setIsClosingParent,\n\tonSecondaryAction,\n\tratio = '16:9',\n\tpadding,\n}) => {\n\tconst [isClosing, setIsClosing] = useState(false);\n\tconst [startAnimation, setStartAnimation] = useState(false);\n\tconst [transform, setTransform] = useState('');\n\tconst popupRef = useRef<HTMLDivElement>(null);\n\tconst [isVideoPaused, setIsVideoPaused] = useState(false);\n\tconst [showPlayIcon, setShowPlayIcon] = useState(true);\n\tconst videoRef = useRef<HTMLVideoElement>(null);\n\tconst [imageAspectRatio, setImageAspectRatio] = useState<\n\t\t'16:9' | '1:1' | '4:3'\n\t>(ratio);\n\n\tconst imageRef = useRef<HTMLImageElement>(null);\n\n\tuseEffect(() => {\n\t\tif (isClosing) {\n\t\t\t// Start the shrink animation immediately\n\t\t\tsetStartAnimation(true);\n\t\t}\n\t}, [isClosing]);\n\n\tconst handleClose = (callback: () => Promise<void> | void): void => {\n\t\thideJoyrideArrow(popupRef.current);\n\n\t\tconst targetButton = findWhatsNewButton();\n\n\t\tif (targetButton && popupRef.current) {\n\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\tpopupRef.current,\n\t\t\t\ttargetButton,\n\t\t\t);\n\t\t\tsetTransform(transformValue);\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t\texecuteAfterAnimation(callback);\n\t};\n\n\tconst handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n\t\tconst img = e.currentTarget;\n\t\tconst width = img.naturalWidth;\n\t\tconst height = img.naturalHeight;\n\n\t\tif (width && height) {\n\t\t\tconst aspectRatio = width / height;\n\n\t\t\t// Determine closest predefined ratio\n\t\t\tif (Math.abs(aspectRatio - 16 / 9) < 0.1) {\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (Math.abs(aspectRatio - 1) < 0.1) {\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t} else if (Math.abs(aspectRatio - 4 / 3) < 0.1) {\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else if (aspectRatio > 1.5) {\n\t\t\t\t// Wide images default to 16:9\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (aspectRatio < 0.9) {\n\t\t\t\t// Tall images default to 4:3\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else {\n\t\t\t\t// Close to square, use 1:1\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleVideoLoadedMetadata = (\n\t\te: React.SyntheticEvent<HTMLVideoElement>,\n\t) => {\n\t\tconst video = e.currentTarget;\n\t\tconst width = video.videoWidth;\n\t\tconst height = video.videoHeight;\n\n\t\tif (width && height) {\n\t\t\tconst aspectRatio = width / height;\n\n\t\t\tif (Math.abs(aspectRatio - 16 / 9) < 0.1) {\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (Math.abs(aspectRatio - 1) < 0.1) {\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t} else if (Math.abs(aspectRatio - 4 / 3) < 0.1) {\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else if (aspectRatio > 1.5) {\n\t\t\t\t// Wide videos default to 16:9\n\t\t\t\tsetImageAspectRatio('16:9');\n\t\t\t} else if (aspectRatio < 0.9) {\n\t\t\t\t// Tall videos default to 4:3\n\t\t\t\tsetImageAspectRatio('4:3');\n\t\t\t} else {\n\t\t\t\t// Close to square, use 1:1\n\t\t\t\tsetImageAspectRatio('1:1');\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleExplore = (): void => {\n\t\tconst action = feature.primaryButton?.action;\n\n\t\tif (action === 'Open link') {\n\t\t\tconst url = feature.primaryButton?.redirectionUrl || feature.redirectUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tonExplore(action);\n\n\t\t// Run closing animation in background\n\t\thideJoyrideArrow(popupRef.current);\n\t\tconst targetButton = findWhatsNewButton();\n\t\tif (targetButton && popupRef.current) {\n\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\tpopupRef.current,\n\t\t\t\ttargetButton,\n\t\t\t);\n\t\t\tsetTransform(transformValue);\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t};\n\n\tconst handleSkipClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\thandleClose(onSkip);\n\t};\n\n\tconst handlePreviousClick = (\n\t\te: React.MouseEvent<HTMLButtonElement>,\n\t): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tonPrevious();\n\t};\n\n\tconst handleNextClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tonNext();\n\t};\n\n\tconst handleSecondaryAction = (e: React.MouseEvent): void => {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\tconst action = feature.secondaryButton?.action;\n\t\tconst closeCallback: (triggeredAction?: string) => Promise<void> | void =\n\t\t\tonSecondaryAction || onSkip;\n\t\tlet internalUrl: string | null = null;\n\n\t\t// Handle based on action type. 'Play Video' is opened by closeCallback so the\n\t\t// click is not attributed to the primary button via onExplore.\n\t\tif (action === 'Open link') {\n\t\t\tconst url = feature.secondaryButton?.redirectionUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t} else {\n\t\t\t\t\tinternalUrl = url;\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (action === 'Close popup' || action === '') {\n\t\t\t// Just close the popup (empty action also closes)\n\t\t\t// callback is executed after closing animation completes\n\t\t}\n\n\t\t// Always close popup after secondary action\n\t\thideJoyrideArrow(popupRef.current);\n\t\tconst targetButton = findWhatsNewButton();\n\t\tif (targetButton && popupRef.current) {\n\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\tpopupRef.current,\n\t\t\t\ttargetButton,\n\t\t\t);\n\t\t\tsetTransform(transformValue);\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t\texecuteAfterAnimation(async () => {\n\t\t\tawait closeCallback(action);\n\t\t\tif (internalUrl) {\n\t\t\t\twindow.location.href = internalUrl;\n\t\t\t}\n\t\t});\n\t};\n\n\tconst styles = getMajorPopupStyles(\n\t\tstartAnimation,\n\t\ttransform,\n\t\timageAspectRatio,\n\t\tpadding || feature.padding,\n\t\tfeature.primaryButton?.style,\n\t\tfeature.secondaryButton?.style,\n\t);\n\n\tconst handleVideoClick = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (videoRef.current) {\n\t\t\tif (videoRef.current.paused) {\n\t\t\t\tvideoRef.current.play();\n\t\t\t\tsetIsVideoPaused(false);\n\t\t\t\tsetShowPlayIcon(false);\n\t\t\t} else {\n\t\t\t\tvideoRef.current.pause();\n\t\t\t\tsetIsVideoPaused(true);\n\t\t\t\tsetShowPlayIcon(true);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleVideoKeyDown = (e: React.KeyboardEvent) => {\n\t\tif (e.key === 'Enter' || e.key === ' ') {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tif (videoRef.current) {\n\t\t\t\tif (videoRef.current.paused) {\n\t\t\t\t\tvideoRef.current.play();\n\t\t\t\t\tsetIsVideoPaused(false);\n\t\t\t\t\tsetShowPlayIcon(false);\n\t\t\t\t} else {\n\t\t\t\t\tvideoRef.current.pause();\n\t\t\t\t\tsetIsVideoPaused(true);\n\t\t\t\t\tsetShowPlayIcon(true);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<div style={styles.outerWrapper}>\n\t\t\t<div\n\t\t\t\tref={popupRef}\n\t\t\t\tstyle={{\n\t\t\t\t\t...styles.container,\n\t\t\t\t\topacity: startAnimation ? 0 : 1,\n\t\t\t\t\ttransition: 'opacity 0.2s ease-in-out, transform 0.3s ease',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<style>{`\n\t\t\t\t[data-popup-content] ul {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tpadding-left: 20px;\n\t\t\t\t\tlist-style-type: disc;\n\t\t\t\t}\n\t\t\t\t[data-popup-content] ul li {\n\t\t\t\t\tmargin-bottom: 8px;\n\t\t\t\t\tcolor: rgba(255, 255, 255, 0.8);\n\t\t\t\t\tfont-size: 12px;\n\t\t\t\t\tline-height: 16px;\n\t\t\t\t\tfont-family: Inter, sans-serif;\n\t\t\t\t}\n\t\t\t`}</style>\n\t\t\t\t{/* Content Wrapper - contains image and text side by side */}\n\t\t\t\t<div style={styles.contentWrapper}>\n\t\t\t\t\t{/* Image/Video section */}\n\t\t\t\t\t<div style={styles.imageContainer}>\n\t\t\t\t\t\t{feature.productVideo ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\t\tref={videoRef}\n\t\t\t\t\t\t\t\t\tsrc={feature.productVideo}\n\t\t\t\t\t\t\t\t\tstyle={styles.image}\n\t\t\t\t\t\t\t\t\tautoPlay\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\t\t\tcontrols\n\t\t\t\t\t\t\t\t\taria-label={`Product video for ${feature.title}`}\n\t\t\t\t\t\t\t\t\tonLoadedMetadata={handleVideoLoadedMetadata}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t{(isVideoPaused || showPlayIcon) && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={styles.videoOverlay}\n\t\t\t\t\t\t\t\t\t\tonClick={handleVideoClick}\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\t\taria-label={isVideoPaused ? 'Play video' : 'Pause video'}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleVideoKeyDown}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<PlayIcon width={20} height={20} />\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : feature.displayImage ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tref={imageRef}\n\t\t\t\t\t\t\t\tsrc={feature.displayImage}\n\t\t\t\t\t\t\t\talt={feature.title}\n\t\t\t\t\t\t\t\tstyle={styles.image}\n\t\t\t\t\t\t\t\tonLoad={handleImageLoad}\n\t\t\t\t\t\t\t\tonError={(e) => {\n\t\t\t\t\t\t\t\t\tif (feature.image) {\n\t\t\t\t\t\t\t\t\t\t(e.target as HTMLImageElement).src = feature.image;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div style={styles.imagePlaceholder}>\n\t\t\t\t\t\t\t\t{TEXT.FEATURE_PREVIEW_PLACEHOLDER}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Content section */}\n\t\t\t\t\t<div style={styles.contentContainer}>\n\t\t\t\t\t\t{/* Skip Button at top-right */}\n\t\t\t\t\t\t<div style={styles.skipButtonContainer}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tonClick={handleSkipClick}\n\t\t\t\t\t\t\t\tstyle={styles.skipButton.base}\n\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\tObject.assign(e.currentTarget.style, styles.skipButton.hover)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\tObject.assign(e.currentTarget.style, styles.skipButton.base)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taria-label=\"Skip feature announcement\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tSkip\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t{/* Title */}\n\t\t\t\t\t\t<h3 style={styles.title}>{feature.title}</h3>\n\n\t\t\t\t\t\t{/* Content/Description */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tdata-popup-content\n\t\t\t\t\t\t\tstyle={styles.content}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: decodeHTMLEntities(\n\t\t\t\t\t\t\t\t\tfeature.content || feature.body || '',\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{/* Actions - Buttons and Navigation */}\n\t\t\t\t\t\t<div style={styles.actionsWrapper}>\n\t\t\t\t\t\t\t<div style={styles.buttonsGroup}>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tonClick={handleExplore}\n\t\t\t\t\t\t\t\t\tstyle={styles.exploreButton.base}\n\t\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\tstyles.exploreButton.hover,\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\tstyles.exploreButton.base,\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{feature.primaryButton?.text ||\n\t\t\t\t\t\t\t\t\t\tfeature.buttonText ||\n\t\t\t\t\t\t\t\t\t\tTEXT.DEFAULT_BUTTON_TEXT}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t{/* Secondary Button (Optional) */}\n\t\t\t\t\t\t\t\t{feature.secondaryButton?.text &&\n\t\t\t\t\t\t\t\t\t(feature.secondaryButton?.redirectionUrl &&\n\t\t\t\t\t\t\t\t\tfeature.secondaryButton?.action !== 'Play Video' ? (\n\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\thref={feature.secondaryButton.redirectionUrl}\n\t\t\t\t\t\t\t\t\t\t\ttarget={\n\t\t\t\t\t\t\t\t\t\t\t\tfeature.secondaryButton.redirectionUrl.startsWith(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'http',\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '_blank'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '_self'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\trel={\n\t\t\t\t\t\t\t\t\t\t\t\tfeature.secondaryButton.redirectionUrl.startsWith(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'http',\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'noopener noreferrer'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClick={handleSecondaryAction}\n\t\t\t\t\t\t\t\t\t\t\tstyle={styles.secondaryButton.base}\n\t\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.hover,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.base,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{feature.secondaryButton.text}\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\tonClick={handleSecondaryAction}\n\t\t\t\t\t\t\t\t\t\t\tstyle={styles.secondaryButton.base}\n\t\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.hover,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) =>\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.secondaryButton.base,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{feature.secondaryButton.text}\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/* Navigation arrows */}\n\t\t\t\t\t\t\t{totalFeatures > 1 && (\n\t\t\t\t\t\t\t\t<div style={styles.navigationContainer}>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tonClick={handlePreviousClick}\n\t\t\t\t\t\t\t\t\t\tdisabled={currentIndex === 0}\n\t\t\t\t\t\t\t\t\t\tstyle={styles.navigationButton(currentIndex === 0).base}\n\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(false).hover,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== 0) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(false).base,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label=\"Previous feature\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Arrow style={{ transform: 'rotate(180deg)' }} />\n\t\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tonClick={handleNextClick}\n\t\t\t\t\t\t\t\t\t\tdisabled={currentIndex === totalFeatures - 1}\n\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(\n\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === totalFeatures - 1,\n\t\t\t\t\t\t\t\t\t\t\t).base\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonMouseEnter={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== totalFeatures - 1) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(false).hover,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseLeave={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tif (currentIndex !== totalFeatures - 1) {\n\t\t\t\t\t\t\t\t\t\t\t\tObject.assign(\n\t\t\t\t\t\t\t\t\t\t\t\t\te.currentTarget.style,\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyles.navigationButton(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcurrentIndex === totalFeatures - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t).base,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-label=\"Next feature\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Arrow />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{/* Close contentWrapper */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default MajorUpdatePopup;\n"],"names":["MajorUpdatePopup","feature","currentIndex","totalFeatures","onSkip","onExplore","onPrevious","onNext","setIsClosingParent","onSecondaryAction","ratio","padding","isClosing","setIsClosing","useState","startAnimation","setStartAnimation","transform","setTransform","popupRef","useRef","isVideoPaused","setIsVideoPaused","showPlayIcon","setShowPlayIcon","videoRef","imageAspectRatio","setImageAspectRatio","imageRef","useEffect","handleClose","callback","hideJoyrideArrow","targetButton","findWhatsNewButton","transformValue","calculateCloseTransform","executeAfterAnimation","handleImageLoad","img","width","height","aspectRatio","handleVideoLoadedMetadata","video","handleExplore","action","url","handleSkipClick","handlePreviousClick","handleNextClick","handleSecondaryAction","closeCallback","internalUrl","styles","getMajorPopupStyles","handleVideoClick","handleVideoKeyDown","jsx","jsxs","Fragment","PlayIcon","TEXT","decodeHTMLEntities","Arrow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),g=require("./constants/index.js"),S=require("./styles/minorPopup.styles.js"),_=require("./utils/htmlHelpers.js"),d=require("./utils/animationHelpers.js"),A=require("./utils/elementHelpers.js"),w=({feature:e,currentIndex:B,totalFeatures:b,onSkip:x,onExplore:T,onPrevious:q,onNext:U,setIsClosing:u,onSecondaryAction:h})=>{const[m,p]=a.useState(!1),[E,f]=a.useState(!1),[j,c]=a.useState(""),s=a.useRef(null);a.useEffect(()=>{m&&f(!0)},[m]);const v=()=>{const o=e.primaryButton?.action;if(o==="Open link"){const i=e.primaryButton?.redirectionUrl||e.redirectUrl;i&&i.startsWith("http")&&window.open(i,"_blank","noopener,noreferrer")}if(T(o),d.hideJoyrideArrow(s.current),s.current&&e.featureTag){const i=e.featureTag.startsWith("#")||e.featureTag.startsWith(".")||e.featureTag.startsWith("[")?e.featureTag:`#${e.featureTag}`,l=document.querySelector(i);if(l){const r=d.calculateCloseTransform(s.current,l);c(r)}else c("scale(0)")}else c("scale(0)");u?.(!0),p(!0)},C=()=>{const o=e.secondaryButton?.action,i=h||x;let l=null;if(o==="Open link"){const r=e.secondaryButton?.redirectionUrl;r&&(r.startsWith("http")?window.open(r,"_blank","noopener,noreferrer"):l=r)}if(d.hideJoyrideArrow(s.current),s.current&&e.featureTag){const r=A.findFeatureTagElement(e.featureTag);if(r){const y=d.calculateCloseTransform(s.current,r);c(y)}else c("scale(0)")}else c("scale(0)");u?.(!0),p(!0),d.executeAfterAnimation(async()=>{await i(o),l&&(window.location.href=l)})},n=S.getMinorPopupStyles(E,j);return t.jsxs("div",{ref:s,style:n.container,children:[t.jsx("div",{style:n.imageContainer,children:e.displayImage?t.jsx("div",{style:n.imageWrapper,children:t.jsx("img",{src:e.displayImage,alt:e.title,style:n.image,onError:o=>{e.image&&(o.target.src=e.image)}})}):t.jsx("div",{style:n.imagePlaceholder,children:g.TEXT.FEATURE_PREVIEW_PLACEHOLDER})}),t.jsxs("div",{style:n.contentContainer,children:[t.jsxs("div",{children:[t.jsx("h3",{style:n.title,children:e.title}),t.jsx("div",{style:n.content,dangerouslySetInnerHTML:{__html:_.decodeHTMLEntities(e.content||e.body||"")}})]}),t.jsxs("div",{style:n.actionsContainer,children:[e.secondaryButton?.text&&t.jsx("span",{onClick:C,style:n.understoodText,children:e.secondaryButton.text}),t.jsx("button",{onClick:v,style:n.exploreButton,children:e.primaryButton?.text||e.buttonText||g.TEXT.DEFAULT_BUTTON_TEXT})]})]})]})};exports.default=w;
|
|
2
2
|
//# sourceMappingURL=MinorUpdatePopup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MinorUpdatePopup.js","sources":["../../../../src/components/feature-announcements/MinorUpdatePopup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { TEXT } from './constants';\nimport { getMinorPopupStyles } from './styles';\nimport { MinorUpdatePopupProps } from './types';\nimport {\n\tcalculateCloseTransform,\n\tdecodeHTMLEntities,\n\texecuteAfterAnimation,\n\tfindFeatureTagElement,\n\thideJoyrideArrow,\n} from './utils';\n\nconst MinorUpdatePopup: React.FC<MinorUpdatePopupProps> = ({\n\tfeature,\n\tcurrentIndex,\n\ttotalFeatures,\n\tonSkip,\n\tonExplore,\n\tonPrevious,\n\tonNext,\n\tsetIsClosing: setIsClosingParent,\n}) => {\n\tconst [isClosing, setIsClosing] = useState(false);\n\tconst [startAnimation, setStartAnimation] = useState(false);\n\tconst [transform, setTransform] = useState('');\n\tconst popupRef = useRef<HTMLDivElement>(null);\n\n\t// Hide Joyride arrow when closing starts, then trigger animation immediately\n\tuseEffect(() => {\n\t\tif (isClosing) {\n\t\t\t// Start the shrink animation immediately\n\t\t\tsetStartAnimation(true);\n\t\t}\n\t}, [isClosing]);\n\n\tconst handleExplore = (): void => {\n\t\tconst action = feature.primaryButton?.action;\n\n\t\tif (action === 'Open link') {\n\t\t\tconst url = feature.primaryButton?.redirectionUrl || feature.redirectUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tonExplore(action);\n\n\t\t// Run closing animation in background\n\t\thideJoyrideArrow(popupRef.current);\n\t\tif (popupRef.current && feature.featureTag) {\n\t\t\tconst targetSelector =\n\t\t\t\tfeature.featureTag.startsWith('#') ||\n\t\t\t\tfeature.featureTag.startsWith('.') ||\n\t\t\t\tfeature.featureTag.startsWith('[')\n\t\t\t\t\t? feature.featureTag\n\t\t\t\t\t: `#${feature.featureTag}`;\n\t\t\tconst targetElement = document.querySelector(targetSelector);\n\t\t\tif (targetElement) {\n\t\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\t\tpopupRef.current,\n\t\t\t\t\ttargetElement,\n\t\t\t\t);\n\t\t\t\tsetTransform(transformValue);\n\t\t\t} else {\n\t\t\t\tsetTransform('scale(0)');\n\t\t\t}\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t};\n\n\tconst handleSecondaryAction = (): void => {\n\t\tconst action = feature.secondaryButton?.action;\n\t\tconst closeCallback
|
|
1
|
+
{"version":3,"file":"MinorUpdatePopup.js","sources":["../../../../src/components/feature-announcements/MinorUpdatePopup.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { TEXT } from './constants';\nimport { getMinorPopupStyles } from './styles';\nimport { MinorUpdatePopupProps } from './types';\nimport {\n\tcalculateCloseTransform,\n\tdecodeHTMLEntities,\n\texecuteAfterAnimation,\n\tfindFeatureTagElement,\n\thideJoyrideArrow,\n} from './utils';\n\nconst MinorUpdatePopup: React.FC<MinorUpdatePopupProps> = ({\n\tfeature,\n\tcurrentIndex,\n\ttotalFeatures,\n\tonSkip,\n\tonExplore,\n\tonPrevious,\n\tonNext,\n\tsetIsClosing: setIsClosingParent,\n\tonSecondaryAction,\n}) => {\n\tconst [isClosing, setIsClosing] = useState(false);\n\tconst [startAnimation, setStartAnimation] = useState(false);\n\tconst [transform, setTransform] = useState('');\n\tconst popupRef = useRef<HTMLDivElement>(null);\n\n\t// Hide Joyride arrow when closing starts, then trigger animation immediately\n\tuseEffect(() => {\n\t\tif (isClosing) {\n\t\t\t// Start the shrink animation immediately\n\t\t\tsetStartAnimation(true);\n\t\t}\n\t}, [isClosing]);\n\n\tconst handleExplore = (): void => {\n\t\tconst action = feature.primaryButton?.action;\n\n\t\tif (action === 'Open link') {\n\t\t\tconst url = feature.primaryButton?.redirectionUrl || feature.redirectUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tonExplore(action);\n\n\t\t// Run closing animation in background\n\t\thideJoyrideArrow(popupRef.current);\n\t\tif (popupRef.current && feature.featureTag) {\n\t\t\tconst targetSelector =\n\t\t\t\tfeature.featureTag.startsWith('#') ||\n\t\t\t\tfeature.featureTag.startsWith('.') ||\n\t\t\t\tfeature.featureTag.startsWith('[')\n\t\t\t\t\t? feature.featureTag\n\t\t\t\t\t: `#${feature.featureTag}`;\n\t\t\tconst targetElement = document.querySelector(targetSelector);\n\t\t\tif (targetElement) {\n\t\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\t\tpopupRef.current,\n\t\t\t\t\ttargetElement,\n\t\t\t\t);\n\t\t\t\tsetTransform(transformValue);\n\t\t\t} else {\n\t\t\t\tsetTransform('scale(0)');\n\t\t\t}\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t};\n\n\tconst handleSecondaryAction = (): void => {\n\t\tconst action = feature.secondaryButton?.action;\n\t\tconst closeCallback: (triggeredAction?: string) => Promise<void> | void =\n\t\t\tonSecondaryAction || onSkip;\n\t\tlet internalUrl: string | null = null;\n\n\t\t// Handle based on action type. 'Play Video' is opened by closeCallback so the\n\t\t// click is not attributed to the primary button via onExplore.\n\t\tif (action === 'Open link') {\n\t\t\tconst url = feature.secondaryButton?.redirectionUrl;\n\t\t\tif (url) {\n\t\t\t\tconst isExternal = url.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(url, '_blank', 'noopener,noreferrer');\n\t\t\t\t} else {\n\t\t\t\t\tinternalUrl = url;\n\t\t\t\t}\n\t\t\t}\n\t\t} else if (action === 'Close popup' || action === '') {\n\t\t\t// Just close the popup\n\t\t}\n\n\t\t// Always close popup after secondary action\n\t\thideJoyrideArrow(popupRef.current);\n\t\tif (popupRef.current && feature.featureTag) {\n\t\t\tconst targetElement = findFeatureTagElement(feature.featureTag);\n\t\t\tif (targetElement) {\n\t\t\t\tconst transformValue = calculateCloseTransform(\n\t\t\t\t\tpopupRef.current,\n\t\t\t\t\ttargetElement,\n\t\t\t\t);\n\t\t\t\tsetTransform(transformValue);\n\t\t\t} else {\n\t\t\t\tsetTransform('scale(0)');\n\t\t\t}\n\t\t} else {\n\t\t\tsetTransform('scale(0)');\n\t\t}\n\t\tsetIsClosingParent?.(true);\n\t\tsetIsClosing(true);\n\t\texecuteAfterAnimation(async () => {\n\t\t\tawait closeCallback(action);\n\t\t\tif (internalUrl) {\n\t\t\t\twindow.location.href = internalUrl;\n\t\t\t}\n\t\t});\n\t};\n\n\tconst styles = getMinorPopupStyles(startAnimation, transform);\n\n\treturn (\n\t\t<div ref={popupRef} style={styles.container}>\n\t\t\t{/* Image section */}\n\t\t\t<div style={styles.imageContainer}>\n\t\t\t\t{feature.displayImage ? (\n\t\t\t\t\t<div style={styles.imageWrapper}>\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={feature.displayImage}\n\t\t\t\t\t\t\talt={feature.title}\n\t\t\t\t\t\t\tstyle={styles.image}\n\t\t\t\t\t\t\tonError={(e) => {\n\t\t\t\t\t\t\t\tif (feature.image) {\n\t\t\t\t\t\t\t\t\t(e.target as HTMLImageElement).src = feature.image;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<div style={styles.imagePlaceholder}>\n\t\t\t\t\t\t{TEXT.FEATURE_PREVIEW_PLACEHOLDER}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* Content section */}\n\t\t\t<div style={styles.contentContainer}>\n\t\t\t\t<div>\n\t\t\t\t\t<h3 style={styles.title}>{feature.title}</h3>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={styles.content}\n\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t__html: decodeHTMLEntities(feature.content || feature.body || ''),\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Action buttons */}\n\t\t\t\t<div style={styles.actionsContainer}>\n\t\t\t\t\t{/* Secondary Button (if configured, shows as text link on left) */}\n\t\t\t\t\t{feature.secondaryButton?.text && (\n\t\t\t\t\t\t<span onClick={handleSecondaryAction} style={styles.understoodText}>\n\t\t\t\t\t\t\t{feature.secondaryButton.text}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Primary Button (always shows) */}\n\t\t\t\t\t<button onClick={handleExplore} style={styles.exploreButton}>\n\t\t\t\t\t\t{feature.primaryButton?.text ||\n\t\t\t\t\t\t\tfeature.buttonText ||\n\t\t\t\t\t\t\tTEXT.DEFAULT_BUTTON_TEXT}\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default MinorUpdatePopup;\n"],"names":["MinorUpdatePopup","feature","currentIndex","totalFeatures","onSkip","onExplore","onPrevious","onNext","setIsClosingParent","onSecondaryAction","isClosing","setIsClosing","useState","startAnimation","setStartAnimation","transform","setTransform","popupRef","useRef","useEffect","handleExplore","action","url","hideJoyrideArrow","targetSelector","targetElement","transformValue","calculateCloseTransform","handleSecondaryAction","closeCallback","internalUrl","findFeatureTagElement","executeAfterAnimation","styles","getMinorPopupStyles","jsx","e","TEXT","jsxs","decodeHTMLEntities"],"mappings":"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"}
|
|
@@ -1,18 +1,17 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as t, jsxs as r } from "react/jsx-runtime";
|
|
2
2
|
import x from "../../assets/icons/delete.svg.js";
|
|
3
|
-
import
|
|
4
|
-
import S from "../../assets/icons/info.svg.js";
|
|
3
|
+
import g from "../../assets/icons/edit.svg.js";
|
|
5
4
|
import T from "../../assets/icons/playOutline.svg.js";
|
|
6
5
|
import D from "../../assets/icons/vertical_dots.svg.js";
|
|
7
|
-
import { DropdownPopover as
|
|
6
|
+
import { DropdownPopover as S } from "../dropdown/DropdownPopover/index.js";
|
|
8
7
|
import { BikShimmer as C } from "../shimmer/ShimmerComponent/BikShimmer.js";
|
|
9
|
-
import { TitleSmall as L, BodyCaption as O, BodySecondary as
|
|
10
|
-
import { COLORS as
|
|
11
|
-
import { ActionButton as
|
|
12
|
-
import { Tooltip as
|
|
13
|
-
import { Tag as
|
|
14
|
-
import { unwrapDropdownValue as
|
|
15
|
-
const
|
|
8
|
+
import { TitleSmall as L, BodyCaption as O, BodySecondary as p } from "../TypographyStyle.js";
|
|
9
|
+
import { COLORS as o } from "../../constants/Theme.js";
|
|
10
|
+
import { ActionButton as m, BodyGridRow as R, Cell as n, ActionGroup as B } from "./AgentListing.styled.js";
|
|
11
|
+
import { Tooltip as h } from "../tooltips/Tooltip.js";
|
|
12
|
+
import { Tag as P } from "../tag/Tag.js";
|
|
13
|
+
import { unwrapDropdownValue as $ } from "../dropdown/utils.js";
|
|
14
|
+
const k = (e) => {
|
|
16
15
|
switch (e.kind) {
|
|
17
16
|
case "topic":
|
|
18
17
|
return `Topic: ${(e.label ?? "").replace(/_/g, " ").toLowerCase()}`;
|
|
@@ -21,21 +20,21 @@ const I = (e) => {
|
|
|
21
20
|
default:
|
|
22
21
|
return e.label ?? "";
|
|
23
22
|
}
|
|
24
|
-
},
|
|
23
|
+
}, K = ({
|
|
25
24
|
agent: e,
|
|
26
25
|
onRunAgent: u,
|
|
27
26
|
onEditAgent: f,
|
|
28
27
|
onDeleteAgent: a,
|
|
29
28
|
onRowClick: l,
|
|
30
|
-
triggerCountLoading:
|
|
29
|
+
triggerCountLoading: b
|
|
31
30
|
}) => {
|
|
32
|
-
const
|
|
31
|
+
const c = e.status === "live", d = k(e.trigger), y = (i) => {
|
|
33
32
|
i.stopPropagation(), !e.isRunDisabled && u(e);
|
|
34
|
-
},
|
|
33
|
+
}, v = [
|
|
35
34
|
{
|
|
36
35
|
label: "Edit",
|
|
37
36
|
value: "edit",
|
|
38
|
-
leadingIcon: /* @__PURE__ */
|
|
37
|
+
leadingIcon: /* @__PURE__ */ t(g, { width: 16, height: 16, color: o.content.secondary })
|
|
39
38
|
},
|
|
40
39
|
...a ? [
|
|
41
40
|
{
|
|
@@ -49,17 +48,17 @@ const I = (e) => {
|
|
|
49
48
|
display: "flex",
|
|
50
49
|
alignItems: "center",
|
|
51
50
|
gap: 8,
|
|
52
|
-
color:
|
|
51
|
+
color: o.content.negative,
|
|
53
52
|
fontFamily: "Inter",
|
|
54
53
|
fontSize: 14
|
|
55
54
|
},
|
|
56
55
|
children: [
|
|
57
|
-
/* @__PURE__ */
|
|
56
|
+
/* @__PURE__ */ t(
|
|
58
57
|
x,
|
|
59
58
|
{
|
|
60
59
|
width: 16,
|
|
61
60
|
height: 16,
|
|
62
|
-
color:
|
|
61
|
+
color: o.content.negative
|
|
63
62
|
}
|
|
64
63
|
),
|
|
65
64
|
"Delete"
|
|
@@ -68,21 +67,21 @@ const I = (e) => {
|
|
|
68
67
|
)
|
|
69
68
|
}
|
|
70
69
|
] : []
|
|
71
|
-
],
|
|
70
|
+
], w = (i) => {
|
|
72
71
|
i === "edit" ? f(e) : i === "delete" && a?.(e);
|
|
73
|
-
},
|
|
74
|
-
|
|
72
|
+
}, s = /* @__PURE__ */ t(
|
|
73
|
+
m,
|
|
75
74
|
{
|
|
76
75
|
"data-test": `agent-row-run-${e.id}`,
|
|
77
76
|
disabled: e.isRunDisabled,
|
|
78
|
-
onClick:
|
|
77
|
+
onClick: y,
|
|
79
78
|
"aria-label": "Run agent",
|
|
80
|
-
children: /* @__PURE__ */
|
|
79
|
+
children: /* @__PURE__ */ t(
|
|
81
80
|
T,
|
|
82
81
|
{
|
|
83
82
|
width: 20,
|
|
84
83
|
height: 20,
|
|
85
|
-
color:
|
|
84
|
+
color: o.content.secondary
|
|
86
85
|
}
|
|
87
86
|
)
|
|
88
87
|
}
|
|
@@ -95,46 +94,14 @@ const I = (e) => {
|
|
|
95
94
|
onClick: l ? () => l(e) : void 0,
|
|
96
95
|
children: [
|
|
97
96
|
/* @__PURE__ */ r(n, { children: [
|
|
98
|
-
/* @__PURE__ */
|
|
99
|
-
|
|
100
|
-
{
|
|
101
|
-
style: {
|
|
102
|
-
display: "flex",
|
|
103
|
-
alignItems: "center",
|
|
104
|
-
gap: 8,
|
|
105
|
-
minWidth: 0
|
|
106
|
-
},
|
|
107
|
-
children: [
|
|
108
|
-
/* @__PURE__ */ o(L, { numberOfLines: 1, color: t.content.primary, children: e.name }),
|
|
109
|
-
e.sourceBadge ? /* @__PURE__ */ o(c, { body: e.sourceBadge, placement: "top", children: /* @__PURE__ */ o(
|
|
110
|
-
"span",
|
|
111
|
-
{
|
|
112
|
-
style: {
|
|
113
|
-
display: "flex",
|
|
114
|
-
flexShrink: 0,
|
|
115
|
-
cursor: "help"
|
|
116
|
-
},
|
|
117
|
-
"aria-label": "Agent source",
|
|
118
|
-
children: /* @__PURE__ */ o(
|
|
119
|
-
S,
|
|
120
|
-
{
|
|
121
|
-
width: 16,
|
|
122
|
-
height: 16,
|
|
123
|
-
color: t.content.secondary
|
|
124
|
-
}
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
) }) : null
|
|
128
|
-
]
|
|
129
|
-
}
|
|
130
|
-
),
|
|
131
|
-
/* @__PURE__ */ r(O, { numberOfLines: 1, color: t.content.secondary, children: [
|
|
97
|
+
/* @__PURE__ */ t(L, { numberOfLines: 1, color: o.content.primary, children: e.name }),
|
|
98
|
+
/* @__PURE__ */ r(O, { numberOfLines: 1, color: o.content.secondary, children: [
|
|
132
99
|
"Created: ",
|
|
133
100
|
e.createdAtLabel
|
|
134
101
|
] })
|
|
135
102
|
] }),
|
|
136
|
-
/* @__PURE__ */
|
|
137
|
-
/* @__PURE__ */
|
|
103
|
+
/* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(h, { body: d, placement: "top", children: /* @__PURE__ */ t(p, { numberOfLines: 2, color: o.content.primary, children: d }) }) }),
|
|
104
|
+
/* @__PURE__ */ t(n, { align: "right", children: b ? /* @__PURE__ */ t(
|
|
138
105
|
C,
|
|
139
106
|
{
|
|
140
107
|
boxes: [
|
|
@@ -146,41 +113,41 @@ const I = (e) => {
|
|
|
146
113
|
}
|
|
147
114
|
]
|
|
148
115
|
}
|
|
149
|
-
) : /* @__PURE__ */
|
|
150
|
-
/* @__PURE__ */
|
|
151
|
-
|
|
116
|
+
) : /* @__PURE__ */ t(p, { color: o.content.primary, children: e.triggerCount }) }),
|
|
117
|
+
/* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
|
|
118
|
+
P,
|
|
152
119
|
{
|
|
153
|
-
tagText:
|
|
154
|
-
type:
|
|
120
|
+
tagText: c ? "Live" : "Draft",
|
|
121
|
+
type: c ? "positive" : "neutral",
|
|
155
122
|
variant: "regular"
|
|
156
123
|
}
|
|
157
124
|
) }),
|
|
158
|
-
/* @__PURE__ */
|
|
159
|
-
e.isRunDisabled && e.runDisabledTooltip ? /* @__PURE__ */
|
|
160
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ t(n, { align: "center", children: /* @__PURE__ */ r(B, { children: [
|
|
126
|
+
e.isRunDisabled && e.runDisabledTooltip ? /* @__PURE__ */ t(h, { body: e.runDisabledTooltip, placement: "top", children: /* @__PURE__ */ t("span", { style: { display: "flex" }, children: s }) }) : s,
|
|
127
|
+
/* @__PURE__ */ t(
|
|
161
128
|
"span",
|
|
162
129
|
{
|
|
163
130
|
style: { display: "flex" },
|
|
164
131
|
onClick: (i) => i.stopPropagation(),
|
|
165
|
-
children: /* @__PURE__ */
|
|
166
|
-
|
|
132
|
+
children: /* @__PURE__ */ t(
|
|
133
|
+
S,
|
|
167
134
|
{
|
|
168
135
|
"data-test": `agent-row-menu-${e.id}`,
|
|
169
|
-
options:
|
|
136
|
+
options: v,
|
|
170
137
|
placement: "bottom-end",
|
|
171
138
|
width: "160px",
|
|
172
|
-
onSelect: (i) =>
|
|
173
|
-
children: /* @__PURE__ */
|
|
174
|
-
|
|
139
|
+
onSelect: (i) => w($(i)),
|
|
140
|
+
children: /* @__PURE__ */ t(
|
|
141
|
+
m,
|
|
175
142
|
{
|
|
176
143
|
"data-test": `agent-row-menu-button-${e.id}`,
|
|
177
144
|
"aria-label": "More actions",
|
|
178
|
-
children: /* @__PURE__ */
|
|
145
|
+
children: /* @__PURE__ */ t(
|
|
179
146
|
D,
|
|
180
147
|
{
|
|
181
148
|
width: 20,
|
|
182
149
|
height: 20,
|
|
183
|
-
color:
|
|
150
|
+
color: o.content.secondary
|
|
184
151
|
}
|
|
185
152
|
)
|
|
186
153
|
}
|
|
@@ -195,6 +162,6 @@ const I = (e) => {
|
|
|
195
162
|
);
|
|
196
163
|
};
|
|
197
164
|
export {
|
|
198
|
-
|
|
165
|
+
K as AgentTableRow
|
|
199
166
|
};
|
|
200
167
|
//# sourceMappingURL=AgentTableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AgentTableRow.js","sources":["../../../../src/components/agent-listing/AgentTableRow.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport InfoIcon from '@src/assets/icons/info.svg';\nimport PlayOutlineIcon from '@src/assets/icons/playOutline.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownPopover } from '@src/components/dropdown/DropdownPopover';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport BikShimmer from '@src/components/shimmer/ShimmerComponent/BikShimmer';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem, AgentTriggerSummary } from './AgentListing.model';\nimport {\n\tActionButton,\n\tActionGroup,\n\tBodyGridRow,\n\tCell,\n} from './AgentListing.styled';\n\nconst triggerToText = (trigger: AgentTriggerSummary): string => {\n\tswitch (trigger.kind) {\n\t\tcase 'topic':\n\t\t\t// Intent keys arrive snake_cased (e.g. \"order_cancellation\"); show them\n\t\t\t// space-separated and lowercased so the trigger reads as plain words,\n\t\t\t// not a raw key.\n\t\t\treturn `Topic: ${(trigger.label ?? '').replace(/_/g, ' ').toLowerCase()}`;\n\t\tcase 'phrases':\n\t\t\t// No enumerable phrase list (free-text trigger) → just the word.\n\t\t\treturn trigger.items?.length\n\t\t\t\t? `Phrases: ${trigger.items.join(', ')}`\n\t\t\t\t: 'Phrases';\n\t\tcase 'custom':\n\t\tdefault:\n\t\t\treturn trigger.label ?? '';\n\t}\n};\n\ninterface AgentTableRowProps {\n\tagent: AgentListItem;\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\t/** When set, render a delete action (the listing handles confirmation). */\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n\t/** Shimmer the trigger-count cell while the analytics count is still loading. */\n\ttriggerCountLoading?: boolean;\n}\n\nexport const AgentTableRow: React.FC<AgentTableRowProps> = ({\n\tagent,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n\ttriggerCountLoading,\n}) => {\n\tconst isLive = agent.status === 'live';\n\tconst triggerText = triggerToText(agent.trigger);\n\n\tconst handleRun = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (agent.isRunDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tonRunAgent(agent);\n\t};\n\n\t// Edit + Delete live in the \"⋮\" menu beside the run button.\n\tconst menuOptions: SingleOption[] = [\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\tvalue: 'edit',\n\t\t\tleadingIcon: (\n\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.secondary} />\n\t\t\t),\n\t\t},\n\t\t...(onDeleteAgent\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Delete',\n\t\t\t\t\t\tvalue: 'delete',\n\t\t\t\t\t\t// Rendered red (icon + label) via customComponent.\n\t\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.negative,\n\t\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: []),\n\t];\n\n\tconst handleMenuSelect = (value: string | undefined) => {\n\t\tif (value === 'edit') {\n\t\t\tonEditAgent(agent);\n\t\t} else if (value === 'delete') {\n\t\t\tonDeleteAgent?.(agent);\n\t\t}\n\t};\n\n\tconst playButton = (\n\t\t<ActionButton\n\t\t\tdata-test={`agent-row-run-${agent.id}`}\n\t\t\tdisabled={agent.isRunDisabled}\n\t\t\tonClick={handleRun}\n\t\t\taria-label=\"Run agent\"\n\t\t>\n\t\t\t<PlayOutlineIcon\n\t\t\t\twidth={20}\n\t\t\t\theight={20}\n\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t/>\n\t\t</ActionButton>\n\t);\n\n\treturn (\n\t\t<BodyGridRow\n\t\t\tdata-test={`agent-row-${agent.id}`}\n\t\t\tclickable={!!onRowClick}\n\t\t\tonClick={onRowClick ? () => onRowClick(agent) : undefined}\n\t\t>\n\t\t\t<Cell>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleSmall numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t\t{agent.name}\n\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t{/* Provenance: an info icon beside the name reveals where this\n\t\t\t\t\t agent was copied from (source store + agent, or the agent\n\t\t\t\t\t library). Consumer's doc→row mapper builds the tooltip text. */}\n\t\t\t\t\t{agent.sourceBadge ? (\n\t\t\t\t\t\t<Tooltip body={agent.sourceBadge} placement=\"top\">\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\tcursor: 'help',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\taria-label=\"Agent source\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t\t<BodyCaption numberOfLines={1} color={COLORS.content.secondary}>\n\t\t\t\t\tCreated: {agent.createdAtLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t{/* Cell truncates to 2 lines; the tooltip reveals the full trigger. */}\n\t\t\t\t<Tooltip body={triggerText} placement=\"top\">\n\t\t\t\t\t<BodySecondary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t\t{triggerText}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</Tooltip>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"right\">\n\t\t\t\t{triggerCountLoading ? (\n\t\t\t\t\t<BikShimmer\n\t\t\t\t\t\tboxes={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\twidth: '48px',\n\t\t\t\t\t\t\t\theight: '16px',\n\t\t\t\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\t\t\t\tmarginTop: '0',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t{agent.triggerCount}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"center\">\n\t\t\t\t<ActionGroup>\n\t\t\t\t\t{agent.isRunDisabled && agent.runDisabledTooltip ? (\n\t\t\t\t\t\t<Tooltip body={agent.runDisabledTooltip} placement=\"top\">\n\t\t\t\t\t\t\t<span style={{ display: 'flex' }}>{playButton}</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplayButton\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Stop the row's onClick from firing when interacting with the menu. */}\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\tdata-test={`agent-row-menu-${agent.id}`}\n\t\t\t\t\t\t\toptions={menuOptions}\n\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\twidth=\"160px\"\n\t\t\t\t\t\t\tonSelect={(opt) => handleMenuSelect(unwrapDropdownValue(opt))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\t\tdata-test={`agent-row-menu-button-${agent.id}`}\n\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ActionButton>\n\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t</span>\n\t\t\t\t</ActionGroup>\n\t\t\t</Cell>\n\t\t</BodyGridRow>\n\t);\n};\n"],"names":["triggerToText","trigger","AgentTableRow","agent","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","triggerCountLoading","isLive","triggerText","handleRun","e","menuOptions","jsx","EditIcon","COLORS","jsxs","DeleteIcon","handleMenuSelect","value","playButton","ActionButton","PlayOutlineIcon","BodyGridRow","Cell","TitleSmall","Tooltip","InfoIcon","BodyCaption","BodySecondary","BikShimmer","Tag","ActionGroup","DropdownPopover","opt","unwrapDropdownValue","MoreIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AgentTableRow.js","sources":["../../../../src/components/agent-listing/AgentTableRow.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlayOutlineIcon from '@src/assets/icons/playOutline.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownPopover } from '@src/components/dropdown/DropdownPopover';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport BikShimmer from '@src/components/shimmer/ShimmerComponent/BikShimmer';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem, AgentTriggerSummary } from './AgentListing.model';\nimport {\n\tActionButton,\n\tActionGroup,\n\tBodyGridRow,\n\tCell,\n} from './AgentListing.styled';\n\nconst triggerToText = (trigger: AgentTriggerSummary): string => {\n\tswitch (trigger.kind) {\n\t\tcase 'topic':\n\t\t\t// Intent keys arrive snake_cased (e.g. \"order_cancellation\"); show them\n\t\t\t// space-separated and lowercased so the trigger reads as plain words,\n\t\t\t// not a raw key.\n\t\t\treturn `Topic: ${(trigger.label ?? '').replace(/_/g, ' ').toLowerCase()}`;\n\t\tcase 'phrases':\n\t\t\t// No enumerable phrase list (free-text trigger) → just the word.\n\t\t\treturn trigger.items?.length\n\t\t\t\t? `Phrases: ${trigger.items.join(', ')}`\n\t\t\t\t: 'Phrases';\n\t\tcase 'custom':\n\t\tdefault:\n\t\t\treturn trigger.label ?? '';\n\t}\n};\n\ninterface AgentTableRowProps {\n\tagent: AgentListItem;\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\t/** When set, render a delete action (the listing handles confirmation). */\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n\t/** Shimmer the trigger-count cell while the analytics count is still loading. */\n\ttriggerCountLoading?: boolean;\n}\n\nexport const AgentTableRow: React.FC<AgentTableRowProps> = ({\n\tagent,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n\ttriggerCountLoading,\n}) => {\n\tconst isLive = agent.status === 'live';\n\tconst triggerText = triggerToText(agent.trigger);\n\n\tconst handleRun = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (agent.isRunDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tonRunAgent(agent);\n\t};\n\n\t// Edit + Delete live in the \"⋮\" menu beside the run button.\n\tconst menuOptions: SingleOption[] = [\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\tvalue: 'edit',\n\t\t\tleadingIcon: (\n\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.secondary} />\n\t\t\t),\n\t\t},\n\t\t...(onDeleteAgent\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Delete',\n\t\t\t\t\t\tvalue: 'delete',\n\t\t\t\t\t\t// Rendered red (icon + label) via customComponent.\n\t\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.negative,\n\t\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\t\tfontSize: 14,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: []),\n\t];\n\n\tconst handleMenuSelect = (value: string | undefined) => {\n\t\tif (value === 'edit') {\n\t\t\tonEditAgent(agent);\n\t\t} else if (value === 'delete') {\n\t\t\tonDeleteAgent?.(agent);\n\t\t}\n\t};\n\n\tconst playButton = (\n\t\t<ActionButton\n\t\t\tdata-test={`agent-row-run-${agent.id}`}\n\t\t\tdisabled={agent.isRunDisabled}\n\t\t\tonClick={handleRun}\n\t\t\taria-label=\"Run agent\"\n\t\t>\n\t\t\t<PlayOutlineIcon\n\t\t\t\twidth={20}\n\t\t\t\theight={20}\n\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t/>\n\t\t</ActionButton>\n\t);\n\n\treturn (\n\t\t<BodyGridRow\n\t\t\tdata-test={`agent-row-${agent.id}`}\n\t\t\tclickable={!!onRowClick}\n\t\t\tonClick={onRowClick ? () => onRowClick(agent) : undefined}\n\t\t>\n\t\t\t<Cell>\n\t\t\t\t<TitleSmall numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t{agent.name}\n\t\t\t\t</TitleSmall>\n\t\t\t\t<BodyCaption numberOfLines={1} color={COLORS.content.secondary}>\n\t\t\t\t\tCreated: {agent.createdAtLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t{/* Cell truncates to 2 lines; the tooltip reveals the full trigger. */}\n\t\t\t\t<Tooltip body={triggerText} placement=\"top\">\n\t\t\t\t\t<BodySecondary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t\t{triggerText}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</Tooltip>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"right\">\n\t\t\t\t{triggerCountLoading ? (\n\t\t\t\t\t<BikShimmer\n\t\t\t\t\t\tboxes={[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\twidth: '48px',\n\t\t\t\t\t\t\t\theight: '16px',\n\t\t\t\t\t\t\t\tborderRadius: '4px',\n\t\t\t\t\t\t\t\tmarginTop: '0',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t{agent.triggerCount}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"center\">\n\t\t\t\t<ActionGroup>\n\t\t\t\t\t{agent.isRunDisabled && agent.runDisabledTooltip ? (\n\t\t\t\t\t\t<Tooltip body={agent.runDisabledTooltip} placement=\"top\">\n\t\t\t\t\t\t\t<span style={{ display: 'flex' }}>{playButton}</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplayButton\n\t\t\t\t\t)}\n\t\t\t\t\t{/* Stop the row's onClick from firing when interacting with the menu. */}\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\tdata-test={`agent-row-menu-${agent.id}`}\n\t\t\t\t\t\t\toptions={menuOptions}\n\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\twidth=\"160px\"\n\t\t\t\t\t\t\tonSelect={(opt) => handleMenuSelect(unwrapDropdownValue(opt))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\t\tdata-test={`agent-row-menu-button-${agent.id}`}\n\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ActionButton>\n\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t</span>\n\t\t\t\t</ActionGroup>\n\t\t\t</Cell>\n\t\t</BodyGridRow>\n\t);\n};\n"],"names":["triggerToText","trigger","AgentTableRow","agent","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","triggerCountLoading","isLive","triggerText","handleRun","e","menuOptions","jsx","EditIcon","COLORS","jsxs","DeleteIcon","handleMenuSelect","value","playButton","ActionButton","PlayOutlineIcon","BodyGridRow","Cell","TitleSmall","BodyCaption","Tooltip","BodySecondary","BikShimmer","Tag","ActionGroup","DropdownPopover","opt","unwrapDropdownValue","MoreIcon"],"mappings":"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"}
|