npm - @capillarytech/creatives-library - Versions diffs - 8.0.359-alpha.0 → 8.0.360-alpha.0 - Mend

@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.360-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/index.html CHANGED Viewed

@@ -23,6 +23,7 @@
     <!-- End Google Tag Manager -->
     <script>try{Typekit.load({ async: true });}catch(e){console.log(e)}</script>
     <title>Capillary - Creatives</title>
+    <script>try{window.APP_ENV=__ENV_OBJECT__;}catch(e){window.APP_ENV={};}</script>
   </head>
   <body>
     <noscript>

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.359-alpha.0",
+  "version": "8.0.360-alpha.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/cdnTransformation.js CHANGED Viewed

@@ -422,14 +422,86 @@ export function removeAllCdnLocalStorageItems() {
 }
 /**
- *
- * @param {*} configsResponse
+ * Safe JSON.parse — returns fallback if value is empty or malformed.
+ * Used to parse the JSON-string env vars (qualityCfg, mapping, s3CdnMap) injected via window.APP_ENV.
+ */
+function safeJsonParse(value, fallback) {
+  if (!value) return fallback;
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return fallback;
+  }
+}
+/**
+ * Reads CDN config from window.APP_ENV (injected at container startup by entrypoint.sh)
+ * and populates localStorage via saveCdnConfigs — same shape as the legacy API response.
+ *
+ * Returns true if env config was found and applied, false otherwise (saga falls back to API).
+ *
+ * In deployed containers, window.APP_ENV is populated → no API call. In local dev
+ * (`npm start`), window.APP_ENV is empty → returns false → saga falls back to the API
+ * (legacy path, retained for the rollout window).
+ *
+ * Closes the VAPT info-disclosure surface (CAP-183204) by eliminating the
+ * /getCdnTransformationConfig API response in production.
+ */
+export function initCdnConfigFromEnv() {
+  try {
+    const env = (typeof window !== 'undefined' && window.APP_ENV) || {};
+    // All four fields are required to construct a CDN URL. If any is missing,
+    // partial config would silently make every getCdnUrl call fall through to the
+    // raw S3 URL. Return false so the saga falls back to the API (which may still
+    // have the values during the cluster-by-cluster rollout window).
+    if (!env.CDN_HOSTNAME
+        || !env.CDN_IMG_TRANSFORMATION_URL_SUFFIX
+        || !env.CREATIVE_ASSETS_BUCKET_PATH
+        || !env.S3_CDN_MAP) {
+      return false;
+    }
+    // Parse and validate S3_CDN_MAP before proceeding; malformed or empty map
+    // means CDN lookups would silently fail, so fall back to the API instead.
+    const parsedS3CdnMap = safeJsonParse(env.S3_CDN_MAP, null);
+    if (
+      !parsedS3CdnMap
+      || typeof parsedS3CdnMap !== 'object'
+      || Array.isArray(parsedS3CdnMap)
+      || !Object.keys(parsedS3CdnMap).length
+    ) {
+      return false;
+    }
+    saveCdnConfigs({
+      hostname: env.CDN_HOSTNAME,
+      transformationUrlSuffix: env.CDN_IMG_TRANSFORMATION_URL_SUFFIX,
+      bucketPath: env.CREATIVE_ASSETS_BUCKET_PATH,
+      qualityCfg: safeJsonParse(env.CDN_IMG_QUALITY_CFG, {}),
+      overrideEmailQuality: env.OVERRIDE_IMAGE_QUALITY === 'true',
+      overrideEmailQualityMapping: safeJsonParse(env.IMAGE_QUALITY_MAPPING, []),
+      s3CdnMap: parsedS3CdnMap,
+    });
+    return true;
+  } catch (e) {
+    Bugsnag.leaveBreadcrumb('initCdnConfigFromEnv failed to apply window.APP_ENV');
+    Bugsnag.notify(e, (event) => {
+      event.severity = 'error';
+    });
+    return false;
+  }
+}
+/**
+ *
+ * @param {*} configsResponse
  * This util function saves the getCdnConfigs response into the local storage.
  * The following response items are mapped into the following keys in local storage:
  * hostname -> CREATIVES_CDN_BASE_URL
  * qualityCfg ->CREATIVES_CDN_QUALITY_CONFIG
  * transformationUrlSuffix -> CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX
- *
+ *
  * 1. If configsReponse is empty. All above mentioned keys are deleted from localstorage.
  * 2. If any one of the above keys is missing. The respective keys are deleted from localstorage.
  * 3. Else it is saved into the localstorage.

package/utils/tests/cdnTransformation.test.js CHANGED Viewed

@@ -546,6 +546,133 @@ describe("cdnTransformationTests", () => {
     });
   });
+  describe("initCdnConfigFromEnv()", () => {
+    afterEach(() => {
+      delete window.APP_ENV;
+    });
+    it("returns false when window.APP_ENV is undefined", () => {
+      delete window.APP_ENV;
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    const completeEnv = {
+      CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+      CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+      CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+      OVERRIDE_IMAGE_QUALITY: "false",
+      CDN_IMG_QUALITY_CFG: "{}",
+      IMAGE_QUALITY_MAPPING: "[]",
+      S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+    };
+    it.each([
+      ["CDN_HOSTNAME"],
+      ["CDN_IMG_TRANSFORMATION_URL_SUFFIX"],
+      ["CREATIVE_ASSETS_BUCKET_PATH"],
+      ["S3_CDN_MAP"],
+    ])("returns false when required field %s is missing", (missingKey) => {
+      window.APP_ENV = { ...completeEnv };
+      delete window.APP_ENV[missingKey];
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it.each([
+      ["CDN_HOSTNAME"],
+      ["CDN_IMG_TRANSFORMATION_URL_SUFFIX"],
+      ["CREATIVE_ASSETS_BUCKET_PATH"],
+      ["S3_CDN_MAP"],
+    ])("returns false when required field %s is empty string", (emptyKey) => {
+      window.APP_ENV = { ...completeEnv, [emptyKey]: "" };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it("populates localStorage and returns true for a complete env", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "true",
+        CDN_IMG_QUALITY_CFG: '{"EMAIL":65,"DEFAULT":70}',
+        IMAGE_QUALITY_MAPPING: '[[30,90],[80,85]]',
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(true);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe("https://storage.crm.n.content-cdn.io");
+      expect(localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")).toBe("cdn-cgi/image");
+      expect(localStorage.getItem("CREATIVES_S3_BUCKET_PATH")).toBe("intouch_creative_assets");
+      expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe('{"EMAIL":65,"DEFAULT":70}');
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY")).toBe("true");
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING")).toBe("[[30,90],[80,85]]");
+      expect(JSON.parse(localStorage.getItem("S3_CDN_MAP"))).toEqual({
+        "host.s3.amazonaws.com": { cdn_host: "cdn.example.com", bucket_path: "x" },
+      });
+    });
+    it("uses fallback values for malformed optional JSON env vars (qualityCfg, mapping)", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "false",
+        CDN_IMG_QUALITY_CFG: "not-valid-json{{",
+        IMAGE_QUALITY_MAPPING: "also-broken",
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(true);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe("https://storage.crm.n.content-cdn.io");
+    });
+    it("returns false when S3_CDN_MAP is malformed JSON", () => {
+      window.APP_ENV = { ...completeEnv, S3_CDN_MAP: "}{" };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it.each([
+      ["empty object", "{}"],
+      ["array", '["a","b"]'],
+      ["null", "null"],
+      ["number", "42"],
+      ["string", '"foo"'],
+    ])("returns false when S3_CDN_MAP parses to %s (not a non-empty object)", (_label, value) => {
+      window.APP_ENV = { ...completeEnv, S3_CDN_MAP: value };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it("treats OVERRIDE_IMAGE_QUALITY values other than the string \"true\" as false", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "no",
+        CDN_IMG_QUALITY_CFG: "{}",
+        IMAGE_QUALITY_MAPPING: "[]",
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      cdnUtils.initCdnConfigFromEnv();
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY")).toBe(undefined);
+    });
+    it("returns false and notifies Bugsnag when window.APP_ENV access throws", () => {
+      // Force the `window.APP_ENV` read inside initCdnConfigFromEnv to throw,
+      // which exercises the function's outer catch block.
+      Object.defineProperty(window, "APP_ENV", {
+        get() { throw new Error("APP_ENV access boom"); },
+        configurable: true,
+      });
+      const breadcrumbSpy = jest.spyOn(Bugsnag, "leaveBreadcrumb");
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+      expect(breadcrumbSpy).toHaveBeenCalledWith(
+        "initCdnConfigFromEnv failed to apply window.APP_ENV"
+      );
+      expect(bugsnagSpy).toHaveBeenCalled();
+    });
+  });
   describe("getEmailImageOverrideQuality()",()=>{
     it("Should return quality of last element in array if file size is greater than max provided in array",()=>{
       localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");

package/v2Components/CommonTestAndPreview/UnifiedPreview/PreviewHeader.js CHANGED Viewed

@@ -23,6 +23,7 @@ const PreviewHeader = ({
   showDeviceToggle,
   onDeviceChange,
   channel,
+  setIsFullscreenOpen,
 }) => {
   // Determine if this is SMS, WhatsApp, RCS, InApp, MobilePush, or Viber channel (uses Android/iOS) or other channels (uses Desktop/Mobile)
   const isSmsChannel = channel === CHANNELS.SMS;
@@ -31,8 +32,13 @@ const PreviewHeader = ({
   const isInAppChannel = channel === CHANNELS.INAPP;
   const isMobilePushChannel = channel === CHANNELS.MOBILEPUSH;
   const isViberChannel = channel === CHANNELS.VIBER;
+  const isWebPushChannel = channel === CHANNELS.WEBPUSH;
   const isAndroidIosToggle = isSmsChannel || isWhatsappChannel || isRcsChannel || isInAppChannel || isMobilePushChannel || isViberChannel;
+  const handleOpenFullscreen = () => {
+    setIsFullscreenOpen(true);
+  };
   return (
     <CapRow className="preview-chrome">
       <div className="preview-header">
@@ -80,6 +86,12 @@ const PreviewHeader = ({
             )}
           </CapRow>
         )}
+        {isWebPushChannel && (
+          <CapIcon
+            type="expander"
+            onClick={() => handleOpenFullscreen()}
+          />
+        )}
       </div>
     </CapRow>
   );
@@ -95,6 +107,8 @@ PreviewHeader.propTypes = {
   showDeviceToggle: PropTypes.bool,
   onDeviceChange: PropTypes.func,
   channel: PropTypes.string,
+  isFullscreenOpen: PropTypes.bool,
+  setIsFullscreenOpen: PropTypes.func,
 };
 PreviewHeader.defaultProps = {
@@ -103,6 +117,8 @@ PreviewHeader.defaultProps = {
   showDeviceToggle: false,
   onDeviceChange: () => {},
   channel: null,
+  isFullscreenOpen: false,
+  setIsFullscreenOpen: () => {},
 };
 export default PreviewHeader;

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberCarouselPreviewCards.js ADDED Viewed

@@ -0,0 +1,132 @@
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+const getTrimmedText = (value = '') => (value ?? '').trim();
+const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
+const getCarouselButtonsWithTitles = (card) => (
+  (card?.buttons ?? []).filter((button) => hasTrimmedText(button?.title)).slice(0, 2)
+);
+const getCarouselButtonSlotCount = (cards = []) => {
+  const buttonCounts = cards.map((card) => getCarouselButtonsWithTitles(card).length);
+  return Math.min(2, Math.max(0, ...buttonCounts, 0));
+};
+const ViberCarouselPreviewCards = ({ cards = [] }) => {
+  const previewCards = Array.isArray(cards) && cards.length ? cards : [{}];
+  const carouselButtonSlotCount = useMemo(
+    () => getCarouselButtonSlotCount(previewCards),
+    [previewCards],
+  );
+  const carouselTitleRefs = useRef([]);
+  const [carouselTitleLineCount, setCarouselTitleLineCount] = useState(1);
+  carouselTitleRefs.current = previewCards.map(() => null);
+  useLayoutEffect(() => {
+    let maxLines = 1;
+    carouselTitleRefs.current.forEach((node) => {
+      if (!node) {
+        return;
+      }
+      const { lineHeight } = window.getComputedStyle(node);
+      const parsedLineHeight = parseFloat(lineHeight) || 18;
+      const lines = Math.min(2, Math.max(1, Math.round(node.scrollHeight / parsedLineHeight)));
+      if (lines > maxLines) {
+        maxLines = lines;
+      }
+    });
+    setCarouselTitleLineCount((prev) => (prev === maxLines ? prev : maxLines));
+  }, [previewCards]);
+  return (
+    <CapRow className="viber-carousel-preview-scroll">
+      {previewCards.map((card, index) => {
+        const cardButtons = getCarouselButtonsWithTitles(card);
+        const titleLineClass = `viber-carousel-preview-text-wrap--${carouselTitleLineCount}-line`;
+        return (
+          <CapRow className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
+            {hasTrimmedText(card?.mediaUrl) ? (
+              <CapImage
+                src={card?.mediaUrl}
+                className="viber-carousel-preview-image"
+                alt="Viber carousel card"
+              />
+            ) : (
+              <CapRow className="viber-carousel-preview-image-placeholder" />
+            )}
+            <CapRow className="viber-carousel-preview-card-body">
+              <CapRow className={`viber-carousel-preview-text-wrap ${titleLineClass}`}>
+                {hasTrimmedText(card?.text) ? (
+                  <div
+                    className="viber-carousel-preview-text-inner"
+                    ref={(node) => {
+                      carouselTitleRefs.current[index] = node;
+                    }}
+                  >
+                    <CapLabel type="label15" className="viber-carousel-preview-text">
+                      {card?.text}
+                    </CapLabel>
+                  </div>
+                ) : (
+                  <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
+                )}
+              </CapRow>
+              {carouselButtonSlotCount > 0 && (
+                <CapRow className="viber-carousel-preview-buttons">
+                  {Array.from({ length: carouselButtonSlotCount }).map((_, btnIndex) => {
+                    const cardButton = cardButtons[btnIndex];
+                    const trimmedCardButtonTitle = cardButton
+                      ? getTrimmedText(cardButton?.title)
+                      : '';
+                    if (!trimmedCardButtonTitle) {
+                      return (
+                        <CapRow
+                          className="viber-carousel-preview-button viber-carousel-preview-button-placeholder"
+                          key={`viber-carousel-preview-btn-placeholder-${index}-${btnIndex}`}
+                          aria-hidden="true"
+                        />
+                      );
+                    }
+                    return (
+                      <CapLabel
+                        className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
+                        key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
+                      >
+                        {trimmedCardButtonTitle}
+                      </CapLabel>
+                    );
+                  })}
+                </CapRow>
+              )}
+            </CapRow>
+          </CapRow>
+        );
+      })}
+    </CapRow>
+  );
+};
+ViberCarouselPreviewCards.propTypes = {
+  cards: PropTypes.arrayOf(PropTypes.shape({
+    text: PropTypes.string,
+    mediaUrl: PropTypes.string,
+    buttons: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string,
+      action: PropTypes.string,
+    })),
+  })),
+};
+ViberCarouselPreviewCards.defaultProps = {
+  cards: [],
+};
+export default ViberCarouselPreviewCards;

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js CHANGED Viewed

@@ -24,6 +24,7 @@ import {
 } from '../constants';
 import messages from '../messages';
 import videoPlay from '../../../assets/videoPlay.svg';
+import ViberCarouselPreviewCards from './ViberCarouselPreviewCards';
 // Import device mockup images (same as SMS)
 const smsMobileAndroid = require('../../../assets/Android.png');
@@ -244,43 +245,7 @@ const ViberPreviewContent = ({
                     </CapRow>
                     <CapRow className="viber-carousel-cards-pop">
-                      <CapRow className="viber-carousel-preview-scroll">
-                        {previewCarouselCards?.map((card, index) => (
-                          <CapRow className="viber-carousel-preview-card" key={`viber-carousel-preview-card-${index}`}>
-                            {hasTrimmedText(card?.mediaUrl) ? (
-                              <CapImage
-                                src={card?.mediaUrl}
-                                className="viber-carousel-preview-image"
-                                alt="Viber carousel card"
-                              />
-                            ) : (
-                              <CapRow className="viber-carousel-preview-image-placeholder" />
-                            )}
-                            <CapRow className="viber-carousel-preview-card-body">
-                              {hasTrimmedText(card?.text) ? (
-                                <CapLabel type="label15" className="viber-carousel-preview-text">
-                                  {card?.text}
-                                </CapLabel>
-                              ) : (
-                                <CapLabel type="label15" className="viber-carousel-preview-text-placeholder" />
-                              )}
-                              {(card?.buttons?.filter((cardButton) => hasTrimmedText(cardButton?.title)) ?? [])
-                                .slice(0, 2)
-                                .map((cardButton, btnIndex) => {
-                                  const trimmedCardButtonTitle = getTrimmedText(cardButton?.title);
-                                  return (
-                                    <CapLabel
-                                      className={`viber-carousel-preview-button ${btnIndex === 1 ? 'viber-carousel-preview-button-secondary' : ''}`}
-                                      key={`viber-carousel-preview-btn-${index}-${btnIndex}-${trimmedCardButtonTitle}`}
-                                    >
-                                      {trimmedCardButtonTitle}
-                                    </CapLabel>
-                                  );
-                                })}
-                            </CapRow>
-                          </CapRow>
-                        ))}
-                      </CapRow>
+                      <ViberCarouselPreviewCards cards={previewCarouselCards} />
                     </CapRow>
                   </>
                 )}

package/v2Components/CommonTestAndPreview/UnifiedPreview/WebPushPreviewContent.js ADDED Viewed

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapModal from '@capillarytech/cap-ui-library/CapModal';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import PreviewControls from '../../../v2Containers/WebPush/Create/preview/PreviewControls';
+import PreviewContent from '../../../v2Containers/WebPush/Create/preview/PreviewContent';
+import DevicePreviewContent from '../../../v2Containers/WebPush/Create/preview/DevicePreviewContent';
+import {
+  OS_OPTIONS,
+  DEFAULT_OS,
+  DEFAULT_BROWSER,
+} from '../../../v2Containers/WebPush/Create/preview/constants';
+import { getBrowserOptionsForOS } from '../../../v2Containers/WebPush/Create/preview/config/notificationMappings';
+import messages from '../messages';
+const WebPushPreviewContent = ({
+  notificationTitle,
+  notificationBody,
+  imageSrc,
+  brandIconSrc,
+  buttons,
+  url,
+  isUpdating,
+  error,
+  isFullscreenOpen,
+  setIsFullscreenOpen,
+  selectedCustomer,
+}) => {
+  const [selectedOS, setSelectedOS] = useState(DEFAULT_OS);
+  const [selectedBrowser, setSelectedBrowser] = useState(DEFAULT_BROWSER);
+  const browserOptionsForOS = getBrowserOptionsForOS(selectedOS);
+  // Coerce browser when OS change removes current browser from available options
+  useEffect(() => {
+    const isValid = browserOptionsForOS.some((opt) => opt.value === selectedBrowser);
+    if (!isValid && browserOptionsForOS.length) {
+      setSelectedBrowser(browserOptionsForOS[0].value);
+    }
+  }, [browserOptionsForOS, selectedBrowser]);
+  const handleOSChange = (value) => {
+    setSelectedOS(value);
+  };
+  const handleBrowserChange = (value) => {
+    setSelectedBrowser(value);
+  };
+  const handleCloseFullscreen = () => {
+    setIsFullscreenOpen(false);
+  };
+  if (isUpdating) {
+    return null;
+  }
+  if (error) {
+    return null;
+  }
+  return (
+    <CapRow className="webpush-test-preview-container webpush-preview-container">
+      <CapRow className="webpush-preview-panel">
+        <PreviewControls
+          selectedOS={selectedOS}
+          selectedBrowser={selectedBrowser}
+          osOptions={OS_OPTIONS}
+          browserOptions={browserOptionsForOS}
+          onOSChange={handleOSChange}
+          onBrowserChange={handleBrowserChange}
+          layoutMode="newRow"
+          showStateDropdown={false}
+        />
+        <PreviewContent
+          notificationTitle={notificationTitle}
+          notificationBody={notificationBody}
+          url={url}
+          selectedOS={selectedOS}
+          selectedBrowser={selectedBrowser}
+          notificationState="Collapsed"
+          imageSrc={imageSrc}
+          brandIconSrc={brandIconSrc}
+          buttons={buttons}
+        />
+      </CapRow>
+      <CapModal
+        visible={isFullscreenOpen}
+        onCancel={handleCloseFullscreen}
+        width="90%"
+        centered
+        closable={false}
+        footer={null}
+        title={null}
+        maskClosable
+        className="webpush-fullscreen-modal webpush-preview-container"
+      >
+        <CapRow className="webpush-preview-header">
+          <div className="webpush-heading-container">
+            <CapRow type="flex" className="preview-for">
+              <CapLabel type="label16">
+                <FormattedMessage {...messages.previewFor} />
+              </CapLabel>
+              <CapLabel type="label2">
+                {selectedCustomer ? selectedCustomer.name : <FormattedMessage {...messages.defaultPreview} />}
+              </CapLabel>
+            </CapRow>
+            <CapIcon
+              type="collapse2"
+              onClick={() => handleCloseFullscreen()}
+              className="webpush-fullscreen-close-icon"
+            />
+          </div>
+        </CapRow>
+        <CapDivider className="webpush-fullscreen-divider" />
+        <DevicePreviewContent
+          notificationTitle={notificationTitle}
+          notificationBody={notificationBody}
+          url={url}
+          imageSrc={imageSrc}
+          brandIconSrc={brandIconSrc}
+          buttons={buttons}
+        />
+      </CapModal>
+    </CapRow>
+  );
+};
+WebPushPreviewContent.propTypes = {
+  notificationTitle: PropTypes.string,
+  notificationBody: PropTypes.string,
+  imageSrc: PropTypes.string,
+  brandIconSrc: PropTypes.string,
+  buttons: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      url: PropTypes.string,
+      type: PropTypes.string,
+    })
+  ),
+  url: PropTypes.string,
+  isUpdating: PropTypes.bool,
+  error: PropTypes.string,
+  isFullscreenOpen: PropTypes.bool,
+  setIsFullscreenOpen: PropTypes.func,
+  selectedCustomer: PropTypes.object,
+};
+WebPushPreviewContent.defaultProps = {
+  notificationTitle: '',
+  notificationBody: '',
+  imageSrc: '',
+  brandIconSrc: '',
+  buttons: [],
+  url: '',
+  isUpdating: false,
+  error: null,
+  isFullscreenOpen: false,
+  setIsFullscreenOpen: () => {},
+  selectedCustomer: null,
+};
+export default WebPushPreviewContent;