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

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

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WindowsChromeExpanded Basic Rendering should render correctly with default props 1`] = `
+<div
+  className="windows-chrome-expanded-wrapper"
+>
+  <div
+    className="windows-chrome-body"
+  >
+    <div
+      className="windows-chrome-header-row"
+    >
+      <div
+        className="notification-icon-container windows-chrome-browser-icon"
+      >
+        <img
+          alt="Chrome browser"
+          className="notification-icon"
+          src="https://example.com/chrome-icon.png"
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
+          }
+        />
+      </div>
+      <div
+        className="windows-chrome-browser-title"
+      >
+        Google Chrome
+      </div>
+      <div
+        className="windows-chrome-header-actions"
+      >
+        <span
+          className="windows-chrome-menu-text"
+        >
+          <img
+            alt="Menu"
+            className="windows-chrome-menu-icon"
+            src="test-file-stub"
+          />
+        </span>
+        <span
+          className="windows-chrome-close-text"
+        >
+          <img
+            alt="Close"
+            className="windows-chrome-close-icon"
+            src="test-file-stub"
+          />
+        </span>
+      </div>
+    </div>
+    <div
+      className="windows-chrome-content-row"
+    >
+      <div
+        className="windows-chrome-text-block"
+      >
+        <div
+          className="windows-chrome-title"
+        >
+          Test Notification Title
+        </div>
+        <div
+          className="windows-chrome-body-text"
+        >
+          Test notification body text
+        </div>
+        <div
+          className="windows-chrome-url"
+        >
+          example.com
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,50 @@
+import {
+  BROWSER_OPTIONS,
+  PREVIEW_VARIANTS,
+} from '../constants';
+
+/**
+ * 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 };
+};
+
+