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

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

@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DevicePreviewContent Basic Rendering should render correctly with default props 1`] = `
+<CapRow>
+  <CapColumn
+    span={24}
+  >
+    <MockPreviewControls
+      browserOptions={
+        Array [
+          Object {
+            "label": "Chrome",
+            "value": "Chrome",
+          },
+          Object {
+            "label": "Firefox",
+            "value": "Firefox",
+          },
+          Object {
+            "label": "Edge",
+            "value": "Edge",
+          },
+          Object {
+            "label": "Safari",
+            "value": "Safari",
+          },
+          Object {
+            "label": "Opera",
+            "value": "Opera",
+          },
+        ]
+      }
+      layoutMode="compact"
+      onBrowserChange={[Function]}
+      onOSChange={[Function]}
+      onStateChange={[Function]}
+      osOptions={
+        Array [
+          Object {
+            "label": "macOS",
+            "value": "macOS",
+          },
+          Object {
+            "label": "iOS",
+            "value": "iOS",
+          },
+          Object {
+            "label": "iPadOS",
+            "value": "iPadOS",
+          },
+          Object {
+            "label": "Windows",
+            "value": "Windows",
+          },
+          Object {
+            "label": "Android (Mobile)",
+            "value": "Android (Mobile)",
+          },
+          Object {
+            "label": "Android (Tablet)",
+            "value": "Android (Tablet)",
+          },
+        ]
+      }
+      selectedBrowser="Chrome"
+      selectedOS="macOS"
+      selectedState="Collapsed"
+      showStateDropdown={true}
+      stateDropdownDisabled={false}
+      stateOptions={
+        Array [
+          Object {
+            "label": "Collapsed",
+            "value": "Collapsed",
+          },
+          Object {
+            "label": "Expanded",
+            "value": "Expanded",
+          },
+        ]
+      }
+    />
+    <div
+      className="device-preview-container"
+    >
+      <div
+        className="device-frame-wrapper"
+      >
+        <div
+          className="device-frame-asset"
+        >
+          <img
+            alt="macOS device frame"
+            className="device-frame"
+            src="test-file-stub"
+          />
+          <div
+            className="device-notification-wrapper"
+            style={
+              Object {
+                "left": "580px",
+                "position": "absolute",
+                "top": "57px",
+                "zIndex": 10,
+              }
+            }
+          >
+            <MockNotificationContainer
+              brandIconSrc="https://example.com/icon.png"
+              buttons={Array []}
+              className="macos-chrome"
+              enableCtas={false}
+              enableMedia={false}
+              icon="test-file-stub"
+              imageSrc="https://example.com/image.jpg"
+              notificationBody="Test notification body text"
+              notificationState="Collapsed"
+              notificationTitle="Test Notification Title"
+              selectedBrowser="Chrome"
+              selectedOS="macOS"
+              showSeparateIOSCTAs={true}
+              supportsExpanded={false}
+              url="https://www.example.com"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </CapColumn>
+</CapRow>
+`;

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

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotificationContainer Basic Rendering should render correctly with default props 1`] = `
+<div
+  className="notification-container macos-chrome collapsed"
+>
+  <NotificationHeader
+    brandIcon=""
+    displayUrl="example.com"
+    icon="test-file-stub"
+    isExpanded={false}
+    notificationBody="Test notification body text"
+    notificationTitle="Test Notification Title"
+    selectedBrowser="Chrome"
+    shouldShowBrandIcon={false}
+  />
+</div>
+`;
+
+exports[`NotificationContainer Snapshot Tests should match snapshot for Android Mobile Chrome expanded 1`] = `
+<div
+  className="notification-container android-mobile-chrome expanded"
+>
+  <AndroidMobileExpanded
+    brandIcon=""
+    ctaButtons={Array []}
+    displayUrl="example.com"
+    enableCtas={true}
+    icon="test-file-stub"
+    mediaImageUrl=""
+    notificationBody="Test notification body text"
+    notificationTitle="Test Notification Title"
+    selectedBrowser="Chrome"
+    shouldShowBrandIcon={false}
+    shouldShowBrandIconExpanded={false}
+  />
+</div>
+`;
+
+exports[`NotificationContainer Snapshot Tests should match snapshot for Windows Chrome expanded 1`] = `
+<div
+  className="notification-container windows-chrome expanded windows-chrome-expanded"
+>
+  <WindowsChromeExpanded
+    brandIcon=""
+    browserName="Google Chrome"
+    ctaButtons={Array []}
+    displayUrl="example.com"
+    enableBrandIconPreview={true}
+    enableCtas={true}
+    icon="test-file-stub"
+    mediaImageUrl=""
+    notificationBody="Test notification body text"
+    notificationTitle="Test Notification Title"
+  />
+</div>
+`;
+
+exports[`NotificationContainer Snapshot Tests should match snapshot for iOS Safari collapsed 1`] = `
+<div
+  className="notification-container ios-safari collapsed"
+>
+  <IOSHeader
+    icon="test-file-stub"
+    notificationBody="Test notification body text"
+    notificationTitle="Test Notification Title"
+    selectedBrowser="Safari"
+  />
+</div>
+`;
+
+exports[`NotificationContainer Snapshot Tests should match snapshot for macOS Chrome collapsed 1`] = `
+<div
+  className="notification-container macos-chrome collapsed"
+>
+  <NotificationHeader
+    brandIcon=""
+    displayUrl="example.com"
+    icon="test-file-stub"
+    isExpanded={false}
+    notificationBody="Test notification body text"
+    notificationTitle="Test Notification Title"
+    selectedBrowser="Chrome"
+    shouldShowBrandIcon={false}
+  />
+</div>
+`;
+
+exports[`NotificationContainer Snapshot Tests should match snapshot for macOS Chrome expanded 1`] = `
+<div
+  className="notification-container macos-chrome expanded"
+>
+  <NotificationHeader
+    brandIcon=""
+    displayUrl="example.com"
+    icon="test-file-stub"
+    isExpanded={true}
+    notificationBody="Test notification body text"
+    notificationTitle="Test Notification Title"
+    selectedBrowser="Chrome"
+    shouldShowBrandIcon={false}
+  />
+  <NotificationExpandedContent
+    brandIcon=""
+    ctaButtons={Array []}
+    enableCtas={true}
+    mediaImageUrl=""
+    shouldRenderExpandedMedia={false}
+    shouldShowBrandIconInExpandedMac={false}
+  />
+</div>
+`;

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

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PreviewControls Basic Rendering should render correctly with default props 1`] = `
+<Fragment>
+  <CapRow
+    className="preview-controls"
+  >
+    <CapColumn
+      className="preview-control-os"
+      span={12}
+    >
+      <CapLabel
+        className="preview-control-label"
+        fontWeight="bold"
+        type="label1"
+      >
+        <FormattedMessage
+          defaultMessage="Operating system"
+          id="creatives.containersV2.WebPush.operatingSystem"
+          values={Object {}}
+        />
+      </CapLabel>
+      <_Class
+        labelPosition="top"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "label": "macOS",
+              "value": "macOS",
+            },
+            Object {
+              "label": "iOS",
+              "value": "iOS",
+            },
+            Object {
+              "label": "iPadOS",
+              "value": "iPadOS",
+            },
+            Object {
+              "label": "Windows",
+              "value": "Windows",
+            },
+            Object {
+              "label": "Android (Mobile)",
+              "value": "Android (Mobile)",
+            },
+            Object {
+              "label": "Android (Tablet)",
+              "value": "Android (Tablet)",
+            },
+          ]
+        }
+        value="macOS"
+        width="100%"
+      />
+    </CapColumn>
+    <CapColumn
+      className="preview-control-browser"
+      span={12}
+    >
+      <CapLabel
+        className="preview-control-label"
+        fontWeight="bold"
+        type="label1"
+      >
+        <FormattedMessage
+          defaultMessage="Browser"
+          id="creatives.containersV2.WebPush.browser"
+          values={Object {}}
+        />
+      </CapLabel>
+      <_Class
+        labelPosition="top"
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "label": "Chrome",
+              "value": "Chrome",
+            },
+            Object {
+              "label": "Firefox",
+              "value": "Firefox",
+            },
+            Object {
+              "label": "Edge",
+              "value": "Edge",
+            },
+            Object {
+              "label": "Safari",
+              "value": "Safari",
+            },
+            Object {
+              "label": "Opera",
+              "value": "Opera",
+            },
+          ]
+        }
+        value="Chrome"
+        width="100%"
+      />
+    </CapColumn>
+  </CapRow>
+  <CapRow
+    className="preview-controls-state"
+  >
+    <CapColumn
+      className="preview-control-state"
+      span={12}
+    >
+      <CapLabel
+        className="preview-control-label"
+        fontWeight="bold"
+        type="label1"
+      >
+        <FormattedMessage
+          defaultMessage="State"
+          id="creatives.containersV2.WebPush.state"
+          values={Object {}}
+        />
+      </CapLabel>
+      <_Class
+        labelPosition="top"
+        onChange={[MockFunction]}
+        options={
+          Array [
+            Object {
+              "label": "Collapsed",
+              "value": "Collapsed",
+            },
+            Object {
+              "label": "Expanded",
+              "value": "Expanded",
+            },
+          ]
+        }
+        value="Collapsed"
+        width="100%"
+      />
+    </CapColumn>
+  </CapRow>
+</Fragment>
+`;

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

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WebPushPreview Basic Rendering should render correctly with default props 1`] = `
+<CapRow
+  className="webpush-preview-container"
+>
+  <CapColumn
+    span={24}
+  >
+    <PreviewControls
+      browserOptions={
+        Array [
+          Object {
+            "label": "Chrome",
+            "value": "Chrome",
+          },
+          Object {
+            "label": "Firefox",
+            "value": "Firefox",
+          },
+          Object {
+            "label": "Edge",
+            "value": "Edge",
+          },
+          Object {
+            "label": "Safari",
+            "value": "Safari",
+          },
+          Object {
+            "label": "Opera",
+            "value": "Opera",
+          },
+        ]
+      }
+      layoutMode="newRow"
+      onBrowserChange={[Function]}
+      onOSChange={[Function]}
+      osOptions={
+        Array [
+          Object {
+            "label": "macOS",
+            "value": "macOS",
+          },
+          Object {
+            "label": "iOS",
+            "value": "iOS",
+          },
+          Object {
+            "label": "iPadOS",
+            "value": "iPadOS",
+          },
+          Object {
+            "label": "Windows",
+            "value": "Windows",
+          },
+          Object {
+            "label": "Android (Mobile)",
+            "value": "Android (Mobile)",
+          },
+          Object {
+            "label": "Android (Tablet)",
+            "value": "Android (Tablet)",
+          },
+        ]
+      }
+      selectedBrowser="Chrome"
+      selectedOS="macOS"
+      showStateDropdown={false}
+    />
+    <PreviewContent
+      brandIconSrc="https://example.com/icon.png"
+      buttons={Array []}
+      imageSrc="https://example.com/image.jpg"
+      notificationBody="Test notification body text"
+      notificationState="Collapsed"
+      notificationTitle="Test Notification Title"
+      selectedBrowser="Chrome"
+      selectedOS="macOS"
+      url="https://www.example.com"
+    />
+    <PreviewDisclaimer />
+    <CapRow
+      className="preview-all-devices-button"
+    >
+      <CapColumn
+        span={24}
+      >
+        <CapButton
+          className="preview-all-devices-trigger"
+          data-test-id="webpush-preview-toggle"
+          isAddBtn={false}
+          onClick={[Function]}
+          type="flat"
+        >
+          <FormattedMessage
+            defaultMessage="Preview in all devices"
+            id="creatives.containersV2.WebPush.previewInAllDevices"
+            values={Object {}}
+          />
+        </CapButton>
+      </CapColumn>
+    </CapRow>
+  </CapColumn>
+  <MockCapSlideBox
+    className="webpush-preview-slidebox"
+    content={
+      <DevicePreviewContent
+        brandIconSrc="https://example.com/icon.png"
+        buttons={Array []}
+        imageSrc="https://example.com/image.jpg"
+        layoutMode="compact"
+        notificationBody="Test notification body text"
+        notificationTitle="Test Notification Title"
+        url="https://www.example.com"
+      />
+    }
+    handleClose={[Function]}
+    header={
+      <FormattedMessage
+        defaultMessage="Web push notification preview"
+        id="creatives.containersV2.WebPush.webPushNotificationPreview"
+        values={Object {}}
+      />
+    }
+    show={false}
+    size="size-xl"
+  />
+</CapRow>
+`;

package/v2Containers/WebPush/Create/utils/payloadBuilder.js

@@ -0,0 +1,94 @@
+import {
+  WEBPUSH,
+  WEBPUSH_MEDIA_TYPES,
+  IMAGE_UPLOAD_METHODS,
+  BRAND_ICON_OPTIONS,
+  ON_CLICK_BEHAVIOUR_OPTIONS,
+  ACTION_TYPES,
+} from '../../constants';
+
+/**
+ * Creates the payload structure for Web Push template creation/editing
+ * @param {Object} params - All parameters needed to build the payload
+ * @returns {Object} The formatted Web Push payload
+ */
+export const createWebPushPayload = ({
+  templateName,
+  notificationTitle,
+  message,
+  mediaType,
+  accountId,
+  isFullMode,
+  imageSrc,
+  imageUrl,
+  imageUploadMethod,
+  brandIconOption,
+  brandIconSrc,
+  brandIconUrl,
+  buttons,
+  onClickBehaviour,
+  redirectUrl,
+}) => {
+  const trimmedTemplateName = (templateName || '').trim();
+  const trimmedTitle = (notificationTitle || '').trim();
+  const trimmedMessage = (message || '').trim();
+
+  const webpushContent = {
+    title: trimmedTitle,
+    message: trimmedMessage,
+    ...(mediaType && mediaType !== WEBPUSH_MEDIA_TYPES.NONE ? { mediaType } : {}),
+  };
+
+  // Add image data if media type is IMAGE
+  if (mediaType === WEBPUSH_MEDIA_TYPES.IMAGE) {
+    if (imageUploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && imageSrc) {
+      webpushContent.image = imageSrc;
+    } else if (imageUploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && imageSrc) {
+      // Use imageSrc (uploaded secure_file_path) instead of imageUrl
+      // NOTE: To move upload to save event, check imageUrl exists but imageSrc is empty, upload, then use secure_file_path
+      webpushContent.image = imageSrc;
+    }
+  }
+
+  // Add brand icon data if option is not DONT_SHOW
+  if (brandIconOption !== BRAND_ICON_OPTIONS.DONT_SHOW && brandIconSrc) {
+    webpushContent.brandIcon = brandIconSrc;
+  }
+
+  // Add on-click behaviour for the notification body
+  if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && redirectUrl) {
+    webpushContent.onClickAction = {
+      type: ACTION_TYPES.URL,
+      url: redirectUrl.trim(),
+    };
+  } else if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.OPEN_SITE) {
+    webpushContent.onClickAction = {
+      type: ACTION_TYPES.OPEN_SITE,
+    };
+  }
+
+  // Add CTA buttons if any exist
+  if (buttons?.length > 0) {
+    webpushContent.ctas = buttons.map((button) => ({
+      actionText: button.text,
+      type: ACTION_TYPES.URL,
+      actionLink: button.url,
+    }));
+  }
+
+  return {
+    name: (isFullMode ? trimmedTemplateName : trimmedTitle) || trimmedTitle,
+    type: WEBPUSH,
+    definition: {
+      accountId,
+    },
+    versions: {
+      base: {
+        content: {
+          webpush: webpushContent,
+        },
+      },
+    },
+  };
+};
+