@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/index.scss

@@ -0,0 +1,134 @@
+@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;
+  }
+
+  .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;
+    }
+  }
+
+  .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;
+
+      .optional-text {
+        color: $CAP_G05;
+        font-weight: normal;
+        padding: 0;
+        margin: 0.1rem;
+      }
+    }
+
+    .webpush-on-click-behaviour {
+      font-weight: $FONT_WEIGHT_MEDIUM;
+      color: $CAP_G16;
+      margin: 0;
+    }
+  }
+
+  .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;
+
+    .optional-text {
+      color: $CAP_G05;
+      font-weight: normal;
+      padding: 0;
+      margin: 0.1rem;
+    }
+  }
+
+  .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;
+    // NOTE: reuse the below spacing here when technical blocker for "add image URL" is resolved
+    // and we can show the section again
+    // 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_G16;
+    }
+  }
+
+  // Font-family override: needed when used in library mode where parent repo's root font-family differs
+  .ant-radio-wrapper {
+    font-family: 'Roboto', open-sans, sans-serif;
+    
+    span {
+      font-family: 'Roboto', open-sans, sans-serif;
+    }
+  }
+}
+

package/v2Containers/WebPush/Create/messages.js

@@ -0,0 +1,203 @@
+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 up to: 5MB',
+  },
+  sizeLimitBrandIcon: {
+    id: `${scope}.sizeLimitBrandIcon`,
+    defaultMessage: 'Size up to: 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',
+  },
+  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/DevicePreviewContent.js

@@ -0,0 +1,228 @@
+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,
+  DEVICE_ASSET_MAP,
+} from './constants';
+import {
+  getBrowserOptionsForOS,
+  getResolvedVariant,
+  coerceStateForVariant,
+  getSupportedStates,
+} from './config/notificationMappings';
+import './preview.scss';
+
+/**
+ * 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,
+  buttons = [],
+  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]);
+
+  // Disable State dropdown when there's only one option (e.g., iOS, iPadOS)
+  // Note: Can extend to pass tooltip message: { disabled: true, tooltip: "Only Collapsed state is supported" }
+  const stateDropdownDisabled = useMemo(() => {
+    return stateOptionsForVariant.length <= 1;
+  }, [stateOptionsForVariant]);
+
+  // 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] || DEVICE_ASSET_MAP['macOS'];
+  }, [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]);
+
+  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}
+          stateDropdownDisabled={stateDropdownDisabled}
+        />
+
+        {/* Background Container - Preview Section */} 
+        <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. 
+                  notificationPosition is computed from variant configuration and device frame measurements. */}
+              <div
+                ref={notificationRef}
+                className={`device-notification-wrapper ${resolvedVariant ? '' : 'preview-unavailable'}`.trim()}
+                style={{
+                  position: 'absolute',
+                  left: `${notificationPosition?.x || 0}px`,
+                  ...(notificationPosition?.bottom !== undefined
+                    ? { bottom: `${notificationPosition.bottom}px` }
+                    : { top: `${notificationPosition?.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}
+                    enableCtas={buttons.length > 0}
+                    className={resolvedVariant.variant.notificationClassName}
+                    imageSrc={imageSrc}
+                    brandIconSrc={brandIconSrc}
+                    buttons={buttons}
+                    showSeparateIOSCTAs={true}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </CapColumn>
+    </CapRow>
+  );
+};
+
+DevicePreviewContent.propTypes = {
+  notificationTitle: PropTypes.string,
+  notificationBody: PropTypes.string,
+  url: PropTypes.string,
+  imageSrc: PropTypes.string,
+  brandIconSrc: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      url: PropTypes.string,
+      type: PropTypes.string,
+    })
+  ),
+  layoutMode: PropTypes.oneOf([LAYOUT_MODE.COMPACT, LAYOUT_MODE.INLINE, LAYOUT_MODE.NEW_ROW]),
+};
+
+DevicePreviewContent.defaultProps = {
+  notificationTitle: '',
+  notificationBody: '',
+  url: '',
+  imageSrc: '',
+  brandIconSrc: '',
+  buttons: [],
+  layoutMode: LAYOUT_MODE.COMPACT,
+};
+
+export default DevicePreviewContent;
+