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

package/v2Containers/WebPush/Create/preview/config/notificationMappings.js

@@ -1,527 +0,0 @@
-import chromeIcon from '../assets/chrome-icon.png';
-import safariIcon from '../assets/safari-icon.svg';
-import operaIcon from '../assets/opera-icon.svg';
-import firefoxIcon from '../assets/firefox-icon.svg';
-import edgeIcon from '../assets/edge-icon.png';
-import topSvg from '../assets/Top.svg';
-import iosSvg from '../assets/iOS.svg';
-import lightSvg from '../assets/Light.svg';
-import {
-  BROWSER_OPTIONS,
-} from '../constants';
-
-// macOS Chrome variant definition
-const MACOS_CHROME_VARIANT = {
-  frameAsset: topSvg,
-  icon: chromeIcon,
-  notificationClassName: 'macos-chrome',
-  states: {
-    Collapsed: {
-      supportsExpanded: false,
-      showMedia: false,
-      showCtas: false,
-      position: { custom: { x: 580, y: 57 } },
-    },
-    Expanded: {
-      supportsExpanded: true,
-      showMedia: true,
-      showCtas: true,
-      position: { custom: { x: 580, y: 57 } },
-    },
-  },
-};
-
-/**
- * Preview variants describe which OS+Browser+State combinations are supported,
- * along with assets, style classes, and positioning data.
- */
-export const PREVIEW_VARIANTS = {
-  macOS: {
-    Chrome: MACOS_CHROME_VARIANT,
-    Safari: {
-      frameAsset: topSvg,
-      icon: safariIcon,
-      notificationClassName: 'macos-safari',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, y: 57 } },
-        },
-      },
-    },
-    Opera: {
-      frameAsset: topSvg,
-      icon: operaIcon,
-      notificationClassName: 'macos-opera',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, y: 57 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: true,
-          position: { custom: { x: 580, y: 57 } },
-        },
-      },
-    },
-    Firefox: {
-      frameAsset: topSvg,
-      icon: firefoxIcon,
-      notificationClassName: 'macos-firefox',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, y: 57 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: true,
-          position: { custom: { x: 580, y: 57 } },
-        },
-      },
-    },
-    Edge: {
-      frameAsset: topSvg,
-      icon: edgeIcon,
-      notificationClassName: 'macos-edge',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, y: 57 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: true,
-          position: { custom: { x: 580, y: 57 } },
-        },
-      },
-    },
-  },
-  Windows: {
-    Chrome: {
-      frameAsset: topSvg,
-      icon: chromeIcon,
-      notificationClassName: 'windows-chrome',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-      },
-    },
-    Firefox: {
-      frameAsset: topSvg,
-      icon: firefoxIcon,
-      notificationClassName: 'windows-firefox',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-      },
-    },
-    Edge: {
-      frameAsset: topSvg,
-      icon: edgeIcon,
-      notificationClassName: 'windows-edge',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-      },
-    },
-    Opera: {
-      frameAsset: topSvg,
-      icon: operaIcon,
-      notificationClassName: 'windows-opera',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 580, bottom: 55 } },
-        },
-      },
-    },
-  },
-  'Android (Mobile)': {
-    Chrome: {
-      frameAsset: iosSvg,
-      icon: chromeIcon,
-      notificationClassName: 'android-mobile-chrome',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Firefox: {
-      frameAsset: iosSvg,
-      icon: firefoxIcon,
-      notificationClassName: 'android-mobile-firefox',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Edge: {
-      frameAsset: iosSvg,
-      icon: edgeIcon,
-      notificationClassName: 'android-mobile-edge',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Opera: {
-      frameAsset: iosSvg,
-      icon: operaIcon,
-      notificationClassName: 'android-mobile-opera',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-  },
-  'Android (Tablet)': {
-    Chrome: {
-      frameAsset: lightSvg,
-      icon: chromeIcon,
-      notificationClassName: 'android-tablet-chrome',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Firefox: {
-      frameAsset: lightSvg,
-      icon: firefoxIcon,
-      notificationClassName: 'android-tablet-firefox',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Edge: {
-      frameAsset: lightSvg,
-      icon: edgeIcon,
-      notificationClassName: 'android-tablet-edge',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Opera: {
-      frameAsset: lightSvg,
-      icon: operaIcon,
-      notificationClassName: 'android-tablet-opera',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-        Expanded: {
-          supportsExpanded: true,
-          showMedia: true,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-  },
-  iOS: {
-    Chrome: {
-      frameAsset: iosSvg,
-      icon: chromeIcon,
-      notificationClassName: 'ios-chrome',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Safari: {
-      frameAsset: iosSvg,
-      icon: safariIcon,
-      notificationClassName: 'ios-safari',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Firefox: {
-      frameAsset: iosSvg,
-      icon: firefoxIcon,
-      notificationClassName: 'ios-firefox',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Edge: {
-      frameAsset: iosSvg,
-      icon: edgeIcon,
-      notificationClassName: 'ios-edge',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-    Opera: {
-      frameAsset: iosSvg,
-      icon: operaIcon,
-      notificationClassName: 'ios-opera',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 28, y: 210 } },
-        },
-      },
-    },
-  },
-  iPadOS: {
-    Chrome: {
-      frameAsset: lightSvg,
-      icon: chromeIcon,
-      notificationClassName: 'ipados-chrome',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Safari: {
-      frameAsset: lightSvg,
-      icon: safariIcon,
-      notificationClassName: 'ipados-safari',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Firefox: {
-      frameAsset: lightSvg,
-      icon: firefoxIcon,
-      notificationClassName: 'ipados-firefox',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Edge: {
-      frameAsset: lightSvg,
-      icon: edgeIcon,
-      notificationClassName: 'ipados-edge',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-    Opera: {
-      frameAsset: lightSvg,
-      icon: operaIcon,
-      notificationClassName: 'ipados-opera',
-      states: {
-        Collapsed: {
-          supportsExpanded: false,
-          showMedia: false,
-          showCtas: false,
-          position: { custom: { x: 78, y: 265 } },
-        },
-      },
-    },
-  },
-  // TODO: Add additional OS + browser variants here. Ensure positioning stays anchored to the device frame.
-};
-
-/**
- * Returns the browser options allowed for a given OS.
- * Safari is supported on macOS, iOS, and iPadOS.
- * All browsers are supported on macOS, iOS, and iPadOS: Chrome, Safari, Opera, Firefox, Edge.
- * Other OSes exclude Safari.
- */
-export const getBrowserOptionsForOS = (os) => {
-  if (os === 'macOS' || os === 'iOS' || os === 'iPadOS') {
-    return BROWSER_OPTIONS;
-  }
-  return BROWSER_OPTIONS.filter((option) => option.value !== 'Safari');
-};
-
-/**
- * Returns the supported states for an OS+Browser pair.
- */
-export const getSupportedStates = (os, browser) => {
-  const states = PREVIEW_VARIANTS[os]?.[browser]?.states;
-  return states ? Object.keys(states) : [];
-};
-
-/**
- * Given a desired state, returns the best-fit state that is supported.
- */
-export const coerceStateForVariant = (os, browser, desiredState) => {
-  const supportedStates = getSupportedStates(os, browser);
-  if (!supportedStates.length) return null;
-  if (supportedStates.includes(desiredState)) return desiredState;
-  return supportedStates[0];
-};
-
-/**
- * Fetches the resolved variant config for OS+Browser+State.
- * Returns { variant, stateKey, stateConfig } or null if unsupported.
- */
-export const getResolvedVariant = (os, browser, state) => {
-  const variant = PREVIEW_VARIANTS[os]?.[browser];
-  if (!variant) return null;
-  const stateKey = coerceStateForVariant(os, browser, state);
-  if (!stateKey) return null;
-  const stateConfig = variant.states[stateKey];
-  return { variant, stateKey, stateConfig };
-};
-
-

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

@@ -1,162 +0,0 @@
-/**
- * Preview Constants
- * 
- * Centralized constants for preview dropdown options and device configurations.
- * This file ensures DRY (Don't Repeat Yourself) principles by providing
- * a single source of truth for all preview-related options.
- */
-
-/**
- * Operating System Options
- * Available OS/Device types for preview selection
- */
-export const OS_OPTIONS = [
-  { value: 'macOS', label: 'macOS' },
-  { value: 'iOS', label: 'iOS' },
-  { value: 'iPadOS', label: 'iPadOS' },
-  { value: 'Windows', label: 'Windows' },
-  { value: 'Android (Mobile)', label: 'Android (Mobile)' },
-  { value: 'Android (Tablet)', label: 'Android (Tablet)' },
-];
-
-/**
- * Browser Options
- * Available browsers for preview selection
- */
-export const BROWSER_OPTIONS = [
-  { value: 'Chrome', label: 'Chrome' },
-  { value: 'Firefox', label: 'Firefox' },
-  { value: 'Edge', label: 'Edge' },
-  { value: 'Safari', label: 'Safari' },
-  { value: 'Opera', label: 'Opera' },
-];
-
-/**
- * Notification State Options
- * Available states for notification preview (Collapsed/Expanded)
- */
-export const STATE_OPTIONS = [
-  { value: 'Collapsed', label: 'Collapsed' },
-  { value: 'Expanded', label: 'Expanded' },
-];
-
-/**
- * Notification State Values
- * Individual state constants for use in components
- */
-export const NOTIFICATION_STATE_COLLAPSED = 'Collapsed';
-export const NOTIFICATION_STATE_EXPANDED = 'Expanded';
-
-/**
- * Default Selection Values
- */
-export const DEFAULT_OS = 'macOS';
-export const DEFAULT_BROWSER = 'Chrome';
-export const DEFAULT_STATE = 'Collapsed';
-
-/**
- * Layout Mode Constants
- * Available layout modes for PreviewControls component
- */
-export const LAYOUT_MODE = {
-  INLINE: 'inline',
-  NEW_ROW: 'newRow',
-  COMPACT: 'compact',
-};
-
-/**
- * Select Width Constants
- * Width values for dropdown selects based on layout mode
- */
-export const SELECT_WIDTH = {
-  COMPACT: '11rem',
-  FULL: '100%',
-};
-
-
-/**
- * Device Frame Dimensions (in pixels)
- * 
- * These are the natural dimensions of the device frame SVG assets.
- * Used for calculating notification positions relative to device frames.
- * 
- * Note: These dimensions are based on the actual rendered SVG sizes.
- * If SVG assets are updated, these values should be updated accordingly.
- */
-export const DEVICE_FRAME_DIMENSIONS = {
-  // Top.svg - Used for macOS and Windows
-  'macOS': { width: 952, height: 647 },
-  'Windows': { width: 952, height: 647 },
-  // iOS.svg - Used for iOS and Android (Mobile)
-  'iOS': { width: 380, height: 778 },
-  'Android (Mobile)': { width: 380, height: 778 },
-  // Light.svg - Used for iPadOS and Android (Tablet)
-  'iPadOS': { width: 640, height: 888 },
-  'Android (Tablet)': { width: 640, height: 888 },
-};
-
-/**
- * Operating System Name Constants
- * Individual OS name values for use in components
- */
-export const OS_MACOS = 'macOS';
-export const OS_IOS = 'iOS';
-export const OS_IPADOS = 'iPadOS';
-export const OS_WINDOWS = 'Windows';
-export const OS_ANDROID_MOBILE = 'Android (Mobile)';
-export const OS_ANDROID_TABLET = 'Android (Tablet)';
-
-/**
- * Browser Name Constants
- * Individual browser name values for use in components
- */
-export const BROWSER_CHROME = 'Chrome';
-export const BROWSER_FIREFOX = 'Firefox';
-export const BROWSER_EDGE = 'Edge';
-export const BROWSER_SAFARI = 'Safari';
-export const BROWSER_OPERA = 'Opera';
-
-/**
- * Browser Name Constants (lowercase)
- * Lowercase browser names used in class names and comparisons
- */
-export const BROWSER_CHROME_LOWER = 'chrome';
-export const BROWSER_FIREFOX_LOWER = 'firefox';
-export const BROWSER_EDGE_LOWER = 'edge';
-export const BROWSER_SAFARI_LOWER = 'safari';
-export const BROWSER_OPERA_LOWER = 'opera';
-
-/**
- * Browsers that Support Brand Icon
- * List of browsers that support brand icon display
- */
-export const BRAND_ICON_SUPPORTED_BROWSERS = [
-  BROWSER_CHROME_LOWER,
-  BROWSER_EDGE_LOWER,
-  BROWSER_OPERA_LOWER,
-  BROWSER_FIREFOX_LOWER,
-];
-
-/**
- * Browser Display Name Mapping
- * Maps browser names to their full display names for UI
- */
-export const BROWSER_DISPLAY_NAMES = {
-  [BROWSER_CHROME]: 'Google Chrome',
-  [BROWSER_FIREFOX]: 'Mozilla Firefox',
-  [BROWSER_EDGE]: 'Microsoft Edge',
-  [BROWSER_OPERA]: 'Opera',
-};
-
-
-/**
- * Dummy CTA Button Data
- * Placeholder data for CTA buttons in expanded notification preview
- * TODO: Replace with actual CTA buttons from form/props
- */
-export const DUMMY_CTA_BUTTONS = [
-  { id: '1', label: 'Features', icon: '⚡' },
-  { id: '2', label: 'Signup for Free', icon: '📋' },
-];
-
-