@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.1

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

@@ -1,110 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * AndroidMobileExpanded Component
- * 
- * Renders the expanded state for Android mobile notifications.
- * Layout structure:
- * - Wrapper (contains all content except arrow):
- *   - Header: Browser icon | Browser name, URL, timestamp (all inline in same row) | Brand icon
- *   - Body: Title text (bold) → Body text (limited to 4 lines with ellipsis) → Media image (if visible)
- * - Arrow icon (^ ) - sibling to wrapper, aligned to top
- */
-const AndroidMobileExpanded = ({
-  icon,
-  selectedBrowser,
-  notificationTitle,
-  notificationBody,
-  displayUrl,
-  brandIcon,
-  shouldShowBrandIcon,
-  shouldShowBrandIconExpanded,
-  mediaImageUrl,
-}) => {
-  // Get browser display name
-  const getBrowserDisplayName = (browser) => {
-    const browserNames = {
-      'Chrome': 'Chrome',
-      'Firefox': 'Firefox',
-      'Edge': 'Edge',
-      'Opera': 'Opera',
-    };
-    return browserNames[browser] || browser;
-  };
-
-  const showBrandIcon = (shouldShowBrandIconExpanded || shouldShowBrandIcon) && brandIcon;
-
-  return (
-    <>
-      {/* Browser icon as separate column, aligned to top */}
-      <div className="android-mobile-expanded-icon">
-        <div className="notification-icon-container">
-          <img src={icon} alt={selectedBrowser} className="notification-icon" />
-        </div>
-      </div>
-      
-      <div className="android-mobile-expanded-wrapper">
-        {/* Top section: header + title with brand icon column */}
-        <div className="android-mobile-expanded-top">
-          <div className="android-mobile-expanded-top-content">
-            <div className="android-mobile-expanded-header">
-              <div className="android-mobile-expanded-header-content">
-                <span className="android-mobile-expanded-browser-name">
-                  {getBrowserDisplayName(selectedBrowser)}
-                </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>
-              </div>
-            </div>
-
-            <div className="android-mobile-expanded-title">{notificationTitle}</div>
-          </div>
-
-          {showBrandIcon && (
-            <div className="notification-brand-icon-container android-mobile-chrome-brand-icon">
-              <img src={brandIcon} alt="Brand icon" className="notification-brand-icon" />
-            </div>
-          )}
-        </div>
-
-        {/* Body container: title, body, media */}
-        <div className="android-mobile-expanded-body">
-          {/* Body text (limited to 4 lines) */}
-          <div className="android-mobile-expanded-body-text">{notificationBody}</div>
-
-          {/* Media image at bottom (if visible) */}
-          {mediaImageUrl && (
-            <div className="android-mobile-expanded-media">
-              <img
-                src={mediaImageUrl}
-                alt="Notification media"
-                className="android-mobile-expanded-media-image"
-              />
-            </div>
-          )}
-        </div>
-      </div>
-      
-      {/* Arrow icon as sibling to wrapper */}
-      <div className="notification-action-arrow android-mobile-expanded-arrow">^</div>
-    </>
-  );
-};
-
-AndroidMobileExpanded.propTypes = {
-  icon: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  displayUrl: PropTypes.string,
-  brandIcon: PropTypes.string,
-  shouldShowBrandIcon: PropTypes.bool,
-  shouldShowBrandIconExpanded: PropTypes.bool,
-  mediaImageUrl: PropTypes.string,
-};
-
-export default AndroidMobileExpanded;
-

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * iOS/iPadOS Notification Header Component
- * 
- * Displays a simple notification header for iOS and iPadOS devices.
- * Layout: Browser icon | Title "now" | Body text
- * 
- * Note: iOS/iPadOS notifications do NOT show:
- * - Brand icon
- * - URL/domain
- * - CTA buttons
- * - Media images
- * - Expanded state
- */
-const IOSHeader = ({
-  icon,
-  selectedBrowser,
-  notificationTitle,
-  notificationBody,
-}) => (
-  <div className="notification-header ios-header">
-    <div className="notification-icon-container">
-      <img src={icon} alt={selectedBrowser} className="notification-icon" />
-    </div>
-    <div className="notification-content ios-content">
-      <div className="notification-title-row">
-        <div className="notification-title">{notificationTitle}</div>
-        <div className="notification-time">now</div>
-      </div>
-      <div className="notification-body">{notificationBody}</div>
-    </div>
-  </div>
-);
-
-IOSHeader.propTypes = {
-  icon: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-};
-
-export default IOSHeader;
-

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

@@ -1,72 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const NotificationExpandedContent = ({
-  shouldRenderExpandedMedia,
-  shouldShowBrandIconInExpandedMac,
-  brandIcon,
-  mediaImageUrl,
-  enableCtas,
-  ctaButtons,
-}) => (
-  <div className="notification-expanded-content">
-    {shouldRenderExpandedMedia && (
-      <div className="notification-media">
-        {shouldShowBrandIconInExpandedMac ? (
-          <img
-            src={brandIcon}
-            alt="Brand icon"
-            className="notification-media-image"
-          />
-        ) : (
-          mediaImageUrl && (
-            <img
-              src={mediaImageUrl}
-              alt="Notification media"
-              className="notification-media-image"
-            />
-          )
-        )}
-      </div>
-    )}
-
-    {enableCtas && ctaButtons && ctaButtons.length > 0 && (
-      <div className="notification-actions">
-        {ctaButtons.map((button) => (
-          <div key={button.id} className="notification-action-item">
-            <div className="notification-action-divider"></div>
-            <button
-              type="button"
-              className="notification-action-button"
-            >
-              {button.icon && (
-                <span className="notification-action-icon">{button.icon}</span>
-              )}
-              <span className="notification-action-label">{button.label}</span>
-            </button>
-          </div>
-        ))}
-        {/* Note: OS/Browser adds a "Settings" or "Unsubscribe" button from its side */}
-        {/* This could be included later if needed for more accurate preview */}
-      </div>
-    )}
-  </div>
-);
-
-NotificationExpandedContent.propTypes = {
-  shouldRenderExpandedMedia: PropTypes.bool,
-  shouldShowBrandIconInExpandedMac: PropTypes.bool,
-  brandIcon: PropTypes.string,
-  mediaImageUrl: PropTypes.string,
-  enableCtas: PropTypes.bool,
-  ctaButtons: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      label: PropTypes.string,
-      icon: PropTypes.string,
-    })
-  ),
-};
-
-export default NotificationExpandedContent;
-

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

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const NotificationHeader = ({
-  icon,
-  selectedBrowser,
-  notificationTitle,
-  displayUrl,
-  notificationBody,
-  shouldShowBrandIcon,
-  brandIcon,
-  isExpanded,
-}) => (
-  <div className="notification-header">
-    {/* Left rail: browser icon */}
-    <div className="notification-icon-container">
-      <img src={icon} alt={selectedBrowser} className="notification-icon" />
-    </div>
-
-    {/* Center rail: notification text (title, url, body) */}
-    <div className="notification-content">
-      <div className="notification-title">{notificationTitle}</div>
-      <div className="notification-url">{displayUrl}</div>
-      <div className="notification-body">{notificationBody}</div>
-    </div>
-
-    {/* Right rail: optional brand icon (macOS + Chrome, collapsed only) */}
-    {shouldShowBrandIcon && (
-      <div className="notification-brand-icon-container">
-        <img src={brandIcon} alt="Brand icon" className="notification-brand-icon" />
-      </div>
-    )}
-    {/* Menu and expand/collapse icons - shown in macOS + Chrome expanded notification */}
-    {isExpanded && (
-      <div className="notification-header-actions">
-        <div className="notification-action-menu">⋯</div>
-        <div className="notification-action-arrow">⌄</div>
-      </div>
-    )}
-  </div>
-);
-
-NotificationHeader.propTypes = {
-  icon: PropTypes.string.isRequired,
-  selectedBrowser: PropTypes.string.isRequired,
-  notificationTitle: PropTypes.string,
-  displayUrl: PropTypes.string,
-  notificationBody: PropTypes.string,
-  shouldShowBrandIcon: PropTypes.bool,
-  brandIcon: PropTypes.string,
-  isExpanded: PropTypes.bool,
-};
-
-export default NotificationHeader;
-

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const WindowsChromeExpanded = ({
-  icon,
-  brandIcon,
-  enableBrandIconPreview,
-  notificationTitle,
-  notificationBody,
-  displayUrl,
-  browserName = 'Google Chrome',
-  mediaImageUrl = '',
-}) => (
-  <div className="windows-chrome-expanded-wrapper">
-    {mediaImageUrl && (
-      <div className="windows-chrome-banner">
-        <img
-          src={mediaImageUrl}
-          alt="Notification banner"
-          className="windows-chrome-banner-image"
-        />
-      </div>
-    )}
-
-    <div className="windows-chrome-body">
-      <div className="windows-chrome-header-row">
-        <div className="notification-icon-container windows-chrome-browser-icon">
-          {/* Inline style kept: Ensures browser icon img fills container; SCSS only styles container, not img element */}
-          <img src={icon} alt="Chrome browser" className="notification-icon" style={{ width: '100%', height: '100%' }} />
-        </div>
-        <div className="windows-chrome-browser-title">{browserName}</div>
-        <div className="windows-chrome-header-actions">
-          <span className="windows-chrome-menu-text">...</span>
-          <span className="windows-chrome-close-text">x</span>
-        </div>
-      </div>
-
-      <div className="windows-chrome-content-row">
-        {enableBrandIconPreview && Boolean(brandIcon) && (
-          <div className="notification-brand-icon-container windows-chrome-brand-icon">
-            <img
-              src={brandIcon}
-              alt="Brand icon"
-              className="notification-brand-icon"
-            />
-          </div>
-        )}
-        <div className="windows-chrome-text-block">
-          <div className="windows-chrome-title">{notificationTitle}</div>
-          <div className="windows-chrome-body-text">{notificationBody}</div>
-          <div className="windows-chrome-url">{displayUrl}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-WindowsChromeExpanded.propTypes = {
-  icon: PropTypes.string.isRequired,
-  brandIcon: PropTypes.string,
-  enableBrandIconPreview: PropTypes.bool,
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  displayUrl: PropTypes.string,
-  browserName: PropTypes.string,
-  mediaImageUrl: PropTypes.string,
-};
-
-export default WindowsChromeExpanded;
-