@bikdotai/bik-component-library 0.0.805 → 0.0.806-beta.1
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/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/cjs/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/cjs/components/feature-announcements/MajorUpdatePopup.js +1 -1
- 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/cjs/src/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/cjs/src/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/src/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/cjs/src/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/cjs/src/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/cjs/src/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js +1 -1
- package/dist/esm/components/feature-announcements/FeatureAnnouncementProvider.js.map +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MajorUpdatePopup.js.map +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js +1 -1
- package/dist/esm/components/feature-announcements/MinorUpdatePopup.js.map +1 -1
- package/dist/esm/src/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts +1 -1
- package/dist/esm/src/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/src/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts +1 -1
- package/dist/esm/src/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts +1 -1
- package/dist/esm/src/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts +2 -2
- package/dist/esm/src/components/bik-layout/MockMenus.d.ts +1 -0
- 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: () => 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 === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\t// Navigate to URL\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} else {\n\t\t\t\t\twindow.location.href = url;\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tonExplore();\n\t\t}\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\n\t\t// Handle based on action type\n\t\tif (action === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\t// Open URL but don't close popup\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\twindow.location.href = 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(closeCallback);\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\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","_ref","feature","currentIndex","totalFeatures","onSkip","onExplore","onPrevious","onNext","setIsClosing","setIsClosingParent","onSecondaryAction","ratio","padding","isClosing","useState","startAnimation","setStartAnimation","transform","setTransform","popupRef","useRef","isVideoPaused","setIsVideoPaused","showPlayIcon","setShowPlayIcon","videoRef","imageAspectRatio","setImageAspectRatio","imageRef","useEffect","handleSecondaryAction","e","preventDefault","stopPropagation","action","_a","secondaryButton","closeCallback","url","_b","redirectionUrl","startsWith","window","open","location","href","hideJoyrideArrow","current","targetButton","findWhatsNewButton","transformValue","calculateCloseTransform","executeAfterAnimation","styles","getMajorPopupStyles","primaryButton","style","_jsx","Object","assign","outerWrapper","children","_jsxs","ref","container","opacity","transition","contentWrapper","imageContainer","productVideo","_Fragment","src","image","autoPlay","muted","loop","playsInline","controls","title","onLoadedMetadata","video","currentTarget","width","videoWidth","height","videoHeight","aspectRatio","Math","abs","videoOverlay","onClick","paused","play","pause","role","tabIndex","onKeyDown","key","PlayIcon","displayImage","alt","onLoad","img","naturalWidth","naturalHeight","onError","target","imagePlaceholder","TEXT","FEATURE_PREVIEW_PLACEHOLDER","contentContainer","skipButtonContainer","callback","handleClose","skipButton","base","onMouseEnter","hover","onMouseLeave","content","dangerouslySetInnerHTML","__html","decodeHTMLEntities","body","actionsWrapper","buttonsGroup","handleExplore","redirectUrl","exploreButton","_c","text","buttonText","DEFAULT_BUTTON_TEXT","_d","_e","rel","undefined","navigationContainer","disabled","navigationButton","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: () => 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 === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\tonExplore();\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} else {\n\t\t\t\t\twindow.location.href = url;\n\t\t\t\t\treturn; // page reloads, skip animation\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tonExplore();\n\t\t}\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\n\t\t// Handle based on action type\n\t\tif (action === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\t// Open URL but don't close popup\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\t// Mark as viewed before internal navigation (page will reload)\n\t\t\t\t\tcloseCallback();\n\t\t\t\t\twindow.location.href = url;\n\t\t\t\t\treturn;\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(closeCallback);\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\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","_ref","feature","currentIndex","totalFeatures","onSkip","onExplore","onPrevious","onNext","setIsClosing","setIsClosingParent","onSecondaryAction","ratio","padding","isClosing","useState","startAnimation","setStartAnimation","transform","setTransform","popupRef","useRef","isVideoPaused","setIsVideoPaused","showPlayIcon","setShowPlayIcon","videoRef","imageAspectRatio","setImageAspectRatio","imageRef","useEffect","handleSecondaryAction","e","preventDefault","stopPropagation","action","_a","secondaryButton","closeCallback","url","_b","redirectionUrl","startsWith","window","location","href","open","hideJoyrideArrow","current","targetButton","findWhatsNewButton","transformValue","calculateCloseTransform","executeAfterAnimation","styles","getMajorPopupStyles","primaryButton","style","_jsx","Object","assign","outerWrapper","children","_jsxs","ref","container","opacity","transition","contentWrapper","imageContainer","productVideo","_Fragment","src","image","autoPlay","muted","loop","playsInline","controls","title","onLoadedMetadata","video","currentTarget","width","videoWidth","height","videoHeight","aspectRatio","Math","abs","videoOverlay","onClick","paused","play","pause","role","tabIndex","onKeyDown","key","PlayIcon","displayImage","alt","onLoad","img","naturalWidth","naturalHeight","onError","target","imagePlaceholder","TEXT","FEATURE_PREVIEW_PLACEHOLDER","contentContainer","skipButtonContainer","callback","handleClose","skipButton","base","onMouseEnter","hover","onMouseLeave","content","dangerouslySetInnerHTML","__html","decodeHTMLEntities","body","actionsWrapper","buttonsGroup","handleExplore","redirectUrl","exploreButton","_c","text","buttonText","DEFAULT_BUTTON_TEXT","_d","_e","rel","undefined","navigationContainer","disabled","navigationButton","Arrow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r,useEffect as i}from"react";import{TEXT as o}from"./constants/index.js";import"../../constants/Theme.js";import"./constants/animations.js";import{getMinorPopupStyles as s}from"./styles/minorPopup.styles.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as a,calculateCloseTransform as c,executeAfterAnimation as d}from"./utils/animationHelpers.js";import{findFeatureTagElement as u}from"./utils/elementHelpers.js";const m=m=>{let{feature:p,currentIndex:f,totalFeatures:g,onSkip:y,onExplore:v,onPrevious:h,onNext:T,setIsClosing:j}=m;var b,O;const[x,B]=n(!1),[E,w]=n(!1),[C,_]=n(""),k=r(null);i((()=>{x&&w(!0)}),[x]);const P=s(E,C);return e("div",Object.assign({ref:k,style:P.container},{children:[t("div",Object.assign({style:P.imageContainer},{children:p.displayImage?t("div",Object.assign({style:P.imageWrapper},{children:t("img",{src:p.displayImage,alt:p.title,style:P.image,onError:e=>{p.image&&(e.target.src=p.image)}})})):t("div",Object.assign({style:P.imagePlaceholder},{children:o.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:P.contentContainer},{children:[e("div",{children:[t("h3",Object.assign({style:P.title},{children:p.title})),t("div",{style:P.content,dangerouslySetInnerHTML:{__html:l(p.content||p.body||"")}})]}),e("div",Object.assign({style:P.actionsContainer},{children:[(null===(b=p.secondaryButton)||void 0===b?void 0:b.text)&&t("span",Object.assign({onClick:()=>{var e,t,n;const r=null===(e=p.secondaryButton)||void 0===e?void 0:e.action,i=y;if("Play Video"===r)v();else if("Open link"===r){const e=null===(t=p.secondaryButton)||void 0===t?void 0:t.redirectionUrl;if(e){e.startsWith("http")
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n,useRef as r,useEffect as i}from"react";import{TEXT as o}from"./constants/index.js";import"../../constants/Theme.js";import"./constants/animations.js";import{getMinorPopupStyles as s}from"./styles/minorPopup.styles.js";import{decodeHTMLEntities as l}from"./utils/htmlHelpers.js";import{hideJoyrideArrow as a,calculateCloseTransform as c,executeAfterAnimation as d}from"./utils/animationHelpers.js";import{findFeatureTagElement as u}from"./utils/elementHelpers.js";const m=m=>{let{feature:p,currentIndex:f,totalFeatures:g,onSkip:y,onExplore:v,onPrevious:h,onNext:T,setIsClosing:j}=m;var b,O;const[x,B]=n(!1),[E,w]=n(!1),[C,_]=n(""),k=r(null);i((()=>{x&&w(!0)}),[x]);const P=s(E,C);return e("div",Object.assign({ref:k,style:P.container},{children:[t("div",Object.assign({style:P.imageContainer},{children:p.displayImage?t("div",Object.assign({style:P.imageWrapper},{children:t("img",{src:p.displayImage,alt:p.title,style:P.image,onError:e=>{p.image&&(e.target.src=p.image)}})})):t("div",Object.assign({style:P.imagePlaceholder},{children:o.FEATURE_PREVIEW_PLACEHOLDER}))})),e("div",Object.assign({style:P.contentContainer},{children:[e("div",{children:[t("h3",Object.assign({style:P.title},{children:p.title})),t("div",{style:P.content,dangerouslySetInnerHTML:{__html:l(p.content||p.body||"")}})]}),e("div",Object.assign({style:P.actionsContainer},{children:[(null===(b=p.secondaryButton)||void 0===b?void 0:b.text)&&t("span",Object.assign({onClick:()=>{var e,t,n;const r=null===(e=p.secondaryButton)||void 0===e?void 0:e.action,i=y;if("Play Video"===r)v();else if("Open link"===r){const e=null===(t=p.secondaryButton)||void 0===t?void 0:t.redirectionUrl;if(e){if(!e.startsWith("http"))return y(),void(window.location.href=e);window.open(e,"_blank","noopener,noreferrer")}}else"Close popup"!==r&&""!==r||null===(n=p.secondaryButton)||void 0===n||n.action;if(a(k.current),k.current&&p.featureTag){const e=u(p.featureTag);if(e){const t=c(k.current,e);_(t)}else _("scale(0)")}else _("scale(0)");null==j||j(!0),B(!0),d(i)},style:P.understoodText},{children:p.secondaryButton.text})),t("button",Object.assign({onClick:()=>{var e,t;const n=null===(e=p.primaryButton)||void 0===e?void 0:e.action;if("Play Video"===n)v();else if("Open link"===n){v();const e=(null===(t=p.primaryButton)||void 0===t?void 0:t.redirectionUrl)||p.redirectUrl;if(e){if(!e.startsWith("http"))return void(window.location.href=e);window.open(e,"_blank","noopener,noreferrer")}}else v();if(a(k.current),k.current&&p.featureTag){const e=p.featureTag.startsWith("#")||p.featureTag.startsWith(".")||p.featureTag.startsWith("[")?p.featureTag:`#${p.featureTag}`,t=document.querySelector(e);if(t){const e=c(k.current,t);_(e)}else _("scale(0)")}else _("scale(0)");null==j||j(!0),B(!0)},style:P.exploreButton},{children:(null===(O=p.primaryButton)||void 0===O?void 0:O.text)||p.buttonText||o.DEFAULT_BUTTON_TEXT}))]}))]}))]}))};export{m as default};
|
|
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 === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\
|
|
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 === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\tonExplore();\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} else {\n\t\t\t\t\twindow.location.href = url;\n\t\t\t\t\treturn; // page reloads, skip animation\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\t// Default action - call onExplore callback\n\t\t\tonExplore();\n\t\t}\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 = onSkip;\n\n\t\t// Handle based on action type\n\t\tif (action === 'Play Video') {\n\t\t\tonExplore();\n\t\t} else if (action === 'Open link') {\n\t\t\t// Open URL\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\t// Mark as viewed before internal navigation (page will reload)\n\t\t\t\t\tonSkip();\n\t\t\t\t\twindow.location.href = url;\n\t\t\t\t\treturn;\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\tif (feature.secondaryButton?.action) {\n\t\t\t\t// Call onSecondaryAction if needed\n\t\t\t}\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(closeCallback);\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","_ref","feature","currentIndex","totalFeatures","onSkip","onExplore","onPrevious","onNext","setIsClosing","setIsClosingParent","isClosing","useState","startAnimation","setStartAnimation","transform","setTransform","popupRef","useRef","useEffect","styles","getMinorPopupStyles","_jsxs","Object","assign","ref","style","container","children","_jsx","imageContainer","displayImage","imageWrapper","src","alt","title","image","onError","e","target","imagePlaceholder","TEXT","FEATURE_PREVIEW_PLACEHOLDER","contentContainer","content","dangerouslySetInnerHTML","__html","decodeHTMLEntities","body","actionsContainer","_a","secondaryButton","text","onClick","handleSecondaryAction","action","closeCallback","url","_b","redirectionUrl","startsWith","window","location","href","open","_c","hideJoyrideArrow","current","featureTag","targetElement","findFeatureTagElement","transformValue","calculateCloseTransform","executeAfterAnimation","understoodText","handleExplore","primaryButton","redirectUrl","targetSelector","document","querySelector","exploreButton","buttonText","DEFAULT_BUTTON_TEXT"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default EventsTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { QueryBuilderNodeProps } from "../../../
|
|
2
|
+
import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
|
|
3
3
|
declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
|
|
4
4
|
export default IGTrigger;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { QueryBuilderAPIData } from "../../../
|
|
1
|
+
import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
|
|
2
2
|
export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];
|
package/dist/esm/src/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { DropdownOption } from "../../../dropdown/type";
|
|
3
|
-
import { QueryBuilderProperty } from "../../
|
|
4
|
-
import { QueryBuilderNodeProps } from "../../
|
|
3
|
+
import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
|
|
4
|
+
import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
|
|
5
5
|
declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
|
|
6
6
|
cacheKey: string;
|
|
7
7
|
propertyAddBtnText: string;
|