@capillarytech/creatives-library 8.0.258 → 8.0.260-alpha.0

package/v2Containers/WebPush/Create/messages.js

@@ -195,6 +195,14 @@ export default defineMessages({
     id: `${scope}.state`,
     defaultMessage: 'State',
   },
+  previewDisclaimer: {
+    id: `${scope}.previewDisclaimer`,
+    defaultMessage: "For the most accurate desktop preview, switch to full screen under 'Preview in all devices'.",
+  },
+  notificationTime: {
+    id: `${scope}.notificationTime`,
+    defaultMessage: '2:29 PM',
+  },
   templateIdMissingError: {
     id: `${scope}.templateIdMissingError`,
     defaultMessage: 'Unable to save template: Template ID is missing. Please refresh the page and try again.',

package/v2Containers/WebPush/Create/preview/PreviewControls.js

@@ -77,7 +77,7 @@ const PreviewControls = ({
   const renderStateDropdown = useMemo(() => {
     if (isStateDropdownDisabled) {
       return (
-        <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
+        <div className="preview-control-disabled-wrapper">
           {stateDropdownContent}
         </div>
       );
@@ -205,7 +205,7 @@ const PreviewControls = ({
     return (
       <div key={key} className={`preview-control ${className}`}>
         {disabled ? (
-          <div style={{ pointerEvents: 'none', opacity: 0.6 }}>
+          <div className="preview-control-disabled-wrapper">
             {controlContent}
           </div>
         ) : (

package/v2Containers/WebPush/Create/preview/PreviewDisclaimer.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import messages from '../messages';
 import './preview.scss';
 
 /**
@@ -13,7 +15,7 @@ const PreviewDisclaimer = () => (
   <CapRow className="preview-disclaimer">
     <CapColumn span={24}>
       <CapLabel type="label2" className="disclaimer-text">
-        For the most accurate desktop preview, switch to full screen under &apos;Preview in all devices&apos;.
+        <FormattedMessage {...messages.previewDisclaimer} />
       </CapLabel>
     </CapColumn>
   </CapRow>

package/v2Containers/WebPush/Create/preview/components/AndroidMobileChromeHeader.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import androidArrowDownIcon from '../assets/android-arrow-down.svg';
+import messages from '../../messages';
 
 const AndroidMobileChromeHeader = ({
   icon,
@@ -17,7 +19,9 @@ const AndroidMobileChromeHeader = ({
     <div className="notification-content android-mobile-chrome-content">
       <div className="notification-title-row">
         <div className="notification-title">{notificationTitle}</div>
-        <div className="notification-time">2:29 PM</div>
+        <div className="notification-time">
+          <FormattedMessage {...messages.notificationTime} />
+        </div>
       </div>
       <div className="notification-body">{notificationBody}</div>
     </div>

package/v2Containers/WebPush/Create/preview/components/AndroidMobileExpanded.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
 import androidArrowUpIcon from '../assets/android-arrow-up.svg';
 import { BROWSER_DISPLAY_NAMES_ANDROID } from '../constants';
+import messages from '../../messages';
 
 /**
  * AndroidMobileExpanded Component
@@ -53,7 +55,9 @@ const AndroidMobileExpanded = ({
                 </span>
                 <span className="android-mobile-expanded-domain-time">
                   <span className="android-mobile-expanded-domain">{displayUrl}</span>
-                  <span className="android-mobile-expanded-time">2:29 PM</span>
+                  <span className="android-mobile-expanded-time">
+                  <FormattedMessage {...messages.notificationTime} />
+                </span>
                 </span>
               </div>
             </div>

package/v2Containers/WebPush/Create/preview/components/tests/__snapshots__/AndroidMobileExpanded.test.js.snap

@@ -46,7 +46,11 @@ exports[`AndroidMobileExpanded Basic Rendering should render correctly with defa
               <span
                 className="android-mobile-expanded-time"
               >
-                2:29 PM
+                <FormattedMessage
+                  defaultMessage="2:29 PM"
+                  id="creatives.containersV2.WebPush.notificationTime"
+                  values={Object {}}
+                />
               </span>
             </span>
           </div>

package/v2Containers/WebPush/Create/preview/preview.scss

@@ -28,6 +28,13 @@
     }
   }
 
+  // Wrapper for disabled dropdown (State when Windows, or when stateDropdownDisabled)
+  // Scoped under container to avoid conflicts; keeps controls visible but non-interactive
+  .preview-control-disabled-wrapper {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
   .preview-controls-compact {
     display: block;
     margin-bottom: 16px;