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

package/v2Containers/WebPush/Create/index.scss

@@ -1,123 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
-@import './components/buttons';
-
-.webpush-container {
-  .creatives-webpush-title,
-  .creatives-webpush-message,
-  .creatives-webpush-media {
-    display: flex;
-    flex-direction: column;
-    gap: $CAP_SPACE_08;
-    position: relative;
-  }
-
-  .creatives-webpush-title {
-    margin-bottom: $CAP_SPACE_12;
-  }
-
-  .webpush-title,
-  .webpush-message,
-  .webpush-media-type {
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    color: $CAP_G16;
-    margin: 0;
-    font-size: 14px;
-  }
-
-  .creatives-webpush-brand-icon {
-    display: flex;
-    flex-direction: column;
-    gap: $CAP_SPACE_08;
-
-    .webpush-brand-icon {
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      color: $CAP_G16;
-      margin: 0;
-      font-size: 14px;
-    }
-  }
-
-  .creatives-webpush-buttons-links {
-    display: flex;
-    flex-direction: column;
-    gap: 0.65rem;
-
-    .webpush-buttons-links {
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      color: $CAP_G16;
-      margin: 0;
-      font-size: 16px;
-
-      .optional-text {
-        color: $CAP_G05;
-        font-size: $FONT_SIZE_M;
-        font-weight: normal;
-        padding: 0;
-        margin: 0.1rem;
-      }
-    }
-
-    .webpush-on-click-behaviour {
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      color: $CAP_G16;
-      margin: 0;
-      font-size: 14px;
-    }
-  }
-
-  .creatives-webpush-actions {
-    margin-bottom: $CAP_SPACE_24;
-  }
-
-  .webpush-character-count {
-    position: absolute;
-    bottom: -0.8rem;
-    right: 0;
-    color: $CAP_G05;
-    pointer-events: none;
-  }
-
-  .webpush-message-divider {
-    margin-top: $CAP_SPACE_36;
-  }
-
-  .webpush-title-taglist,
-  .webpush-message-taglist {
-    margin-bottom: -2.5625rem; // approx -41px
-  }
-
-  .webpush-buttons-section-heading {
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    color: $CAP_G16;
-    margin: 0;
-    margin-bottom: 0.6rem;
-    font-size: 14px;
-  }
-
-  .webpush-image-upload-method {
-    margin-top: $CAP_SPACE_16;
-    margin-bottom: $CAP_SPACE_16;
-  }
-
-  .webpush-image-upload-section,
-  .webpush-image-url-section {
-    display: flex;
-    flex-direction: column;
-    gap: $CAP_SPACE_12;
-    margin-top: $CAP_SPACE_16;
-  }
-
-  .webpush-image-specs {
-    display: flex;
-    justify-content: space-between;
-    margin-top: $CAP_SPACE_08;
-    
-    .image-dimension,
-    .image-size,
-    .image-format {
-      color: $CAP_WHITE;
-      font-size: $FONT_SIZE_S;
-    }
-  }
-}
-

package/v2Containers/WebPush/Create/messages.js

@@ -1,199 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const scope = 'creatives.containersV2.WebPush';
-
-export default defineMessages({
-  creativeName: {
-    id: `${scope}.creativeName`,
-    defaultMessage: 'Creative name',
-  },
-  creativeNamePlaceholder: {
-    id: `${scope}.creativeNamePlaceholder`,
-    defaultMessage: 'Enter creative name',
-  },
-  notificationTitle: {
-    id: `${scope}.notificationTitle`,
-    defaultMessage: 'Notification Title',
-  },
-  notificationTitlePlaceholder: {
-    id: `${scope}.notificationTitlePlaceholder`,
-    defaultMessage: 'Enter notification title',
-  },
-  message: {
-    id: `${scope}.message`,
-    defaultMessage: 'Message',
-  },
-  messagePlaceholder: {
-    id: `${scope}.messagePlaceholder`,
-    defaultMessage: 'Enter message',
-  },
-  mediaType: {
-    id: `${scope}.mediaType`,
-    defaultMessage: 'Media Type',
-  },
-  emptyTemplateErrorMessage: {
-    id: `${scope}.emptyTemplateErrorMessage`,
-    defaultMessage: 'Template name cannot be empty',
-  },
-  titleRequired: {
-    id: `${scope}.titleRequired`,
-    defaultMessage: 'Title is required',
-  },
-  messageRequired: {
-    id: `${scope}.messageRequired`,
-    defaultMessage: 'Message is required',
-  },
-  saveTemplate: {
-    id: `${scope}.saveTemplate`,
-    defaultMessage: 'Save Template',
-  },
-  accountRequired: {
-    id: `${scope}.accountRequired`,
-    defaultMessage: 'Select an account to create a template',
-  },
-  brandIconLogo: {
-    id: `${scope}.brandIconLogo`,
-    defaultMessage: 'Brand icon/logo',
-  },
-  dontShow: {
-    id: `${scope}.dontShow`,
-    defaultMessage: "Don't show",
-  },
-  uploadImage: {
-    id: `${scope}.uploadImage`,
-    defaultMessage: 'Upload image',
-  },
-  addImageUrl: {
-    id: `${scope}.addImageUrl`,
-    defaultMessage: 'Add image URL',
-  },
-  buttonsAndLinks: {
-    id: `${scope}.buttonsAndLinks`,
-    defaultMessage: 'Buttons and links',
-  },
-  optional: {
-    id: `${scope}.optional`,
-    defaultMessage: '(Optional)',
-  },
-  onClickBehaviour: {
-    id: `${scope}.onClickBehaviour`,
-    defaultMessage: 'On-click behaviour',
-  },
-  openSite: {
-    id: `${scope}.openSite`,
-    defaultMessage: 'Open site',
-  },
-  redirectToSpecificUrl: {
-    id: `${scope}.redirectToSpecificUrl`,
-    defaultMessage: 'Redirect to specific URL',
-  },
-  characterCount: {
-    id: `${scope}.characterCount`,
-    defaultMessage: 'Character count: {currentLength}/{maxLength}',
-  },
-  sizeLimit: {
-    id: `${scope}.sizeLimit`,
-    defaultMessage: 'Size upto: 5MB',
-  },
-  sizeLimitBrandIcon: {
-    id: `${scope}.sizeLimitBrandIcon`,
-    defaultMessage: 'Size upto: 1MB',
-  },
-  formatTypes: {
-    id: `${scope}.formatTypes`,
-    defaultMessage: 'Format: JPEG, JPG, PNG',
-  },
-  enterUrl: {
-    id: `${scope}.enterUrl`,
-    defaultMessage: 'Enter URL',
-  },
-  urlRequired: {
-    id: `${scope}.urlRequired`,
-    defaultMessage: 'URL is required',
-  },
-  urlInvalid: {
-    id: `${scope}.urlInvalid`,
-    defaultMessage: 'Please enter a valid URL',
-  },
-  buttons: {
-    id: `${scope}.buttons`,
-    defaultMessage: 'Buttons',
-  },
-  addPrimaryButton: {
-    id: `${scope}.addPrimaryButton`,
-    defaultMessage: 'Add primary button',
-  },
-  addSecondaryButton: {
-    id: `${scope}.addSecondaryButton`,
-    defaultMessage: 'Add secondary button',
-  },
-  addButton: {
-    id: `${scope}.addButton`,
-    defaultMessage: 'Add button',
-  },
-  buttonText: {
-    id: `${scope}.buttonText`,
-    defaultMessage: 'Button text',
-  },
-  buttonTextPlaceholder: {
-    id: `${scope}.buttonTextPlaceholder`,
-    defaultMessage: 'Enter button text',
-  },
-  buttonUrlLabel: {
-    id: `${scope}.buttonUrlLabel`,
-    defaultMessage: 'URL',
-  },
-  buttonUrlPlaceholder: {
-    id: `${scope}.buttonUrlPlaceholder`,
-    defaultMessage: 'Enter URL',
-  },
-  saveButton: {
-    id: `${scope}.saveButton`,
-    defaultMessage: 'Save',
-  },
-  deleteButton: {
-    id: `${scope}.deleteButton`,
-    defaultMessage: 'Delete',
-  },
-  cancelButton: {
-    id: `${scope}.cancelButton`,
-    defaultMessage: 'Cancel',
-  },
-  buttonTextRequired: {
-    id: `${scope}.buttonTextRequired`,
-    defaultMessage: 'Button text is required',
-  },
-  buttonUrlRequired: {
-    id: `${scope}.buttonUrlRequired`,
-    defaultMessage: 'Button URL is required',
-  },
-  buttonUrlInvalid: {
-    id: `${scope}.buttonUrlInvalid`,
-    defaultMessage: 'Please enter a valid URL',
-  },
-  addLabels: {
-    id: `${scope}.addLabels`,
-    defaultMessage: 'Add labels',
-  },
-  previewInAllDevices: {
-    id: `${scope}.previewInAllDevices`,
-    defaultMessage: 'Preview in all devices',
-  },
-  webPushNotificationPreview: {
-    id: `${scope}.webPushNotificationPreview`,
-    defaultMessage: 'Web push notification preview',
-  },
-  operatingSystem: {
-    id: `${scope}.operatingSystem`,
-    defaultMessage: 'Operating system',
-  },
-  browser: {
-    id: `${scope}.browser`,
-    defaultMessage: 'Browser',
-  },
-  state: {
-    id: `${scope}.state`,
-    defaultMessage: 'State',
-  },
-});
-

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

@@ -1,241 +0,0 @@
-import React, { useState, useMemo, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import PreviewControls from './PreviewControls';
-import NotificationContainer from './NotificationContainer';
-import {
-  OS_OPTIONS,
-  STATE_OPTIONS,
-  DEFAULT_OS,
-  DEFAULT_BROWSER,
-  DEFAULT_STATE,
-  LAYOUT_MODE,
-} from './constants';
-import {
-  getBrowserOptionsForOS,
-  getResolvedVariant,
-  coerceStateForVariant,
-  getSupportedStates,
-} from './config/notificationMappings';
-// Device frame SVG assets
-import topSvg from './assets/Top.svg';
-import iosSvg from './assets/iOS.svg';
-import lightSvg from './assets/Light.svg';
-import './preview.scss';
-
-/**
- * Device-to-Asset Mapping
- * Maps OS/Device types to their corresponding device frame SVG assets
- */
-const DEVICE_ASSET_MAP = {
-  'macOS': topSvg,
-  'Windows': topSvg,
-  'iOS': iosSvg,
-  'Android (Mobile)': iosSvg,
-  'iPadOS': lightSvg,
-  'Android (Tablet)': lightSvg,
-};
-
-/**
- * DevicePreviewContent Component
- * 
- * Displays device frame previews with web push notifications positioned
- * relative to device frames. This component will be used inside the
- * "Preview in all devices" SlideBox.
- * 
- * The component renders:
- * - Dropdown controls for OS, Browser, and State selection
- * - A background container (100% width, height determined by device frame, #F4F5F7 background)
- * - Device frames centered within the container
- * - Notification previews positioned relative to device frames (Phase 4)
- * 
- * NOTIFICATION POSITIONING SYSTEM:
- * 
- * The notification position is configured using x, y coordinates relative to the device frame.
- * Position is calculated relative to device frame boundaries, not background container.
- * 
- * @param {string} notificationTitle - Title of the notification
- * @param {string} notificationBody - Body text of the notification
- * @param {string} url - URL for the notification
- * @param {string} layoutMode - Layout mode for controls: LAYOUT_MODE.COMPACT, LAYOUT_MODE.INLINE, or LAYOUT_MODE.NEW_ROW (default: LAYOUT_MODE.COMPACT)
- */
-const DevicePreviewContent = ({
-  notificationTitle,
-  notificationBody,
-  url,
-  imageSrc,
-  brandIconSrc,
-  layoutMode = LAYOUT_MODE.COMPACT,
-}) => {
-  // State for device selection
-  const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
-  const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
-  const [selectedState, setSelectedState] = useState(DEFAULT_STATE);
-
-  // Filtered browser options per OS
-  const browserOptionsForOS = useMemo(() => getBrowserOptionsForOS(selectedOS), [selectedOS]);
-
-  // Coerce browser when OS changes and current browser is unsupported
-  useEffect(() => {
-    const hasBrowser = browserOptionsForOS.some((option) => option.value === selectedBrowser);
-    if (!hasBrowser && browserOptionsForOS.length) {
-      setSelectedBrowser(browserOptionsForOS[0].value);
-    }
-  }, [browserOptionsForOS, selectedBrowser]);
-
-  // Coerce state when OS/Browser changes and current state is unsupported
-  useEffect(() => {
-    const coercedState = coerceStateForVariant(selectedOS, selectedBrowser, selectedState);
-    if (coercedState && coercedState !== selectedState) {
-      setSelectedState(coercedState);
-    }
-  }, [selectedOS, selectedBrowser, selectedState]);
-
-  const stateOptionsForVariant = useMemo(() => {
-    const supportedStates = getSupportedStates(selectedOS, selectedBrowser);
-    if (!supportedStates.length) return STATE_OPTIONS;
-    return supportedStates.map((state) => ({ value: state, label: state }));
-  }, [selectedOS, selectedBrowser]);
-
-  // Refs for measuring device frame and notification dimensions
-  const deviceFrameRef = useRef(null);
-  const notificationRef = useRef(null);
-
-  // Get the device frame asset for the selected OS
-  const deviceFrameAsset = useMemo(() => {
-    return DEVICE_ASSET_MAP[selectedOS] || topSvg;
-  }, [selectedOS]);
-
-  const resolvedVariant = useMemo(() => {
-    return getResolvedVariant(selectedOS, selectedBrowser, selectedState);
-  }, [selectedOS, selectedBrowser, selectedState]);
-
-  // Notification position using x, y coordinates from variant configuration
-  const notificationPosition = useMemo(() => {
-    if (resolvedVariant?.stateConfig?.position?.custom) {
-      return resolvedVariant.stateConfig.position.custom;
-    }
-    // Fallback to origin (0, 0) if no position configured
-    return { x: 0, y: 0 };
-  }, [resolvedVariant]);
-
-  // Store position in state for Phase 5 (when we'll apply it to notification element)
-  const [calculatedPosition, setCalculatedPosition] = useState(notificationPosition);
-
-  // Update calculated position when dependencies change
-  useEffect(() => {
-    setCalculatedPosition(notificationPosition);
-  }, [notificationPosition]);
-
-  const handleOSChange = (value) => {
-    setSelectedOS(value);
-  };
-
-  const handleBrowserChange = (value) => {
-    setSelectedBrowser(value);
-  };
-
-  const handleStateChange = (value) => {
-    setSelectedState(value);
-  };
-
-  return (
-    <CapRow>
-      <CapColumn span={24}>
-        {/* Dropdown Controls */}
-        <PreviewControls
-          selectedOS={selectedOS}
-          selectedBrowser={selectedBrowser}
-          selectedState={selectedState}
-          osOptions={OS_OPTIONS}
-          browserOptions={browserOptionsForOS}
-          stateOptions={stateOptionsForVariant}
-          onOSChange={handleOSChange}
-          onBrowserChange={handleBrowserChange}
-          onStateChange={handleStateChange}
-          layoutMode={layoutMode}
-          showStateDropdown={true}
-        />
-
-        {/* Background Container - Preview Section */}
-        {/* 
-          Background: #F4F5F7
-          Padding: 24px 16px 16px 16px
-          Width: 100% (responsive)
-          Height: Determined by device frame content
-        */}
-        <div className="device-preview-container">
-          {/* Device Frame Display */}
-          {/* Device frames are centered horizontally and vertically within the container */}
-          <div className="device-frame-wrapper">
-            <div className="device-frame-asset">
-              <img
-                ref={deviceFrameRef}
-                src={deviceFrameAsset}
-                alt={`${selectedOS} device frame`}
-                className="device-frame"
-              />
-              {/* Notification preview positioned relative to the device frame image */}
-              {/* Inline styles kept: Dynamic positioning calculated at runtime based on OS/browser/state selection.
-                  These values change with user interaction and cannot be moved to static SCSS. 
-                  calculatedPosition is computed from variant configuration and device frame measurements. */}
-              <div
-                ref={notificationRef}
-                className={`device-notification-wrapper ${resolvedVariant ? '' : 'preview-unavailable'}`.trim()}
-                style={{
-                  position: 'absolute',
-                  left: `${calculatedPosition?.x || 0}px`,
-                  ...(calculatedPosition?.bottom !== undefined
-                    ? { bottom: `${calculatedPosition.bottom}px` }
-                    : { top: `${calculatedPosition?.y || 0}px` }),
-                  zIndex: 10,
-                }}
-              >
-                {resolvedVariant && (
-                  <NotificationContainer
-                    notificationTitle={notificationTitle}
-                    notificationBody={notificationBody}
-                    url={url}
-                    selectedOS={selectedOS}
-                    selectedBrowser={selectedBrowser}
-                    notificationState={resolvedVariant.stateKey}
-                    icon={resolvedVariant.variant.icon}
-                    supportsExpanded={resolvedVariant.stateConfig.supportsExpanded}
-                    enableMedia={resolvedVariant.stateConfig.showMedia}
-                    // CTA buttons intentionally disabled per requirement change; do not enable unless confirmed.
-                    enableCtas={false}
-                    className={resolvedVariant.variant.notificationClassName}
-                    imageSrc={imageSrc}
-                    brandIconSrc={brandIconSrc}
-                  />
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </CapColumn>
-    </CapRow>
-  );
-};
-
-DevicePreviewContent.propTypes = {
-  notificationTitle: PropTypes.string,
-  notificationBody: PropTypes.string,
-  url: PropTypes.string,
-  imageSrc: PropTypes.string,
-  brandIconSrc: PropTypes.string,
-  layoutMode: PropTypes.oneOf([LAYOUT_MODE.COMPACT, LAYOUT_MODE.INLINE, LAYOUT_MODE.NEW_ROW]),
-};
-
-DevicePreviewContent.defaultProps = {
-  notificationTitle: '',
-  notificationBody: '',
-  url: '',
-  imageSrc: '',
-  brandIconSrc: '',
-  layoutMode: LAYOUT_MODE.COMPACT,
-};
-
-export default DevicePreviewContent;
-