@capillarytech/creatives-library 8.0.353-alpha.3 → 8.0.353-alpha.5

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/PreviewHeader.js

@@ -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,13 @@ const PreviewHeader = ({
             )}
           </CapRow>
         )}
+        {isWebPushChannel && (
+          <CapIcon
+            type="expander"
+            className={device === MOBILE ? ACTIVE : ''}
+            onClick={() => handleOpenFullscreen()}
+          />
+        )}
       </div>
     </CapRow>
   );
@@ -95,6 +108,8 @@ PreviewHeader.propTypes = {
   showDeviceToggle: PropTypes.bool,
   onDeviceChange: PropTypes.func,
   channel: PropTypes.string,
+  isFullscreenOpen: PropTypes.bool,
+  setIsFullscreenOpen: PropTypes.func,
 };
 
 PreviewHeader.defaultProps = {
@@ -103,6 +118,8 @@ PreviewHeader.defaultProps = {
   showDeviceToggle: false,
   onDeviceChange: () => {},
   channel: null,
+  isFullscreenOpen: () => {},
+  setIsFullscreenOpen: () => false,
 };
 
 export default PreviewHeader;

package/v2Components/CommonTestAndPreview/UnifiedPreview/ViberPreviewContent.js

@@ -14,14 +14,7 @@ import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import {
-  ANDROID,
-  IOS,
-  ANDROID_DEVICE_NAME,
-  IOS_DEVICE_NAME,
-  VIBER_ACCOUNT_NAME,
-  MEDIA_TYPE_CAROUSEL,
-} from '../constants';
+import { ANDROID, IOS, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, VIBER_ACCOUNT_NAME } from '../constants';
 import messages from '../messages';
 import videoPlay from '../../../assets/videoPlay.svg';
 
@@ -29,9 +22,6 @@ import videoPlay from '../../../assets/videoPlay.svg';
 const smsMobileAndroid = require('../../../assets/Android.png');
 const smsMobileIos = require('../../../assets/iOS.png');
 
-const getTrimmedText = (value = '') => (value ?? '').trim();
-const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
-
 const ViberPreviewContent = ({
   content,
   device,
@@ -53,34 +43,7 @@ const ViberPreviewContent = ({
     imageURL = '',
     videoParams = {},
     buttonText = '',
-    type = '',
-    cards = [],
-    showCarouselEditorPreview = false,
   } = viberContent;
-  const hasCarouselContent = type === MEDIA_TYPE_CAROUSEL;
-
-  const cardHasMeaningfulContent = (card) => {
-    if (!card || typeof card !== 'object') return false;
-    if (hasTrimmedText(card?.text)) return true;
-    if (hasTrimmedText(card?.mediaUrl)) return true;
-    const buttons = card?.buttons ?? [];
-    return buttons.some((button) => hasTrimmedText(button?.title));
-  };
-
-  const hasMeaningfulCarousel =
-    hasCarouselContent &&
-    Array.isArray(cards) &&
-    cards.length > 0 &&
-    cards.some(cardHasMeaningfulContent);
-
-  const showCarouselInPreview =
-    hasCarouselContent && (Boolean(showCarouselEditorPreview) || hasMeaningfulCarousel);
-
-  const previewCarouselCards =
-    hasCarouselContent && Array.isArray(cards) && cards.length ? cards : hasCarouselContent ? [{}] : [];
-
-  const trimmedMessageContent = getTrimmedText(messageContent);
-  const trimmedButtonText = getTrimmedText(buttonText);
 
   // Get account name (first letter for icon)
   const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
@@ -136,15 +99,8 @@ const ViberPreviewContent = ({
     );
   }
 
-  // Check if there's any content to display (whitespace-only strings do not count)
-  const hasContent = Boolean(
-    trimmedMessageContent
-    || hasTrimmedText(imageURL)
-    || videoParams?.viberVideoSrc
-    || trimmedButtonText
-    || hasMeaningfulCarousel
-    || (hasCarouselContent && showCarouselEditorPreview)
-  );
+  // Check if there's any content to display
+  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;
 
   // Render normal Viber preview
   return (
@@ -171,23 +127,21 @@ const ViberPreviewContent = ({
         {hasContent && (
           <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
             {/* Brand Name Display (from TemplatePreview line 1136) */}
-            <CapRow className={`msg-container viber-preview ${showCarouselInPreview ? 'viber-preview-carousel' : ''}`}>
+            <CapRow className="msg-container viber-preview">
               {/* Account Icon (from TemplatePreview line 1146-1160) */}
-              {!hasCarouselContent && (
-                <CapRow className="viber-account-icon">
-                  {accountIcon}
-                </CapRow>
-              )}
+              <CapRow className="viber-account-icon">
+                {accountIcon}
+              </CapRow>
 
               {/* Message Bubble (from TemplatePreview line 1161-1223) */}
-              <CapRow className={`message-pop align-left viber-message-pop ${showCarouselInPreview ? 'viber-message-pop-carousel' : ''}`}>
+              <CapRow className="message-pop align-left viber-message-pop">
                 {/* Text Viber preview */}
-                {trimmedMessageContent && !hasCarouselContent && (
+                {messageContent && (
                   <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                 )}
 
                 {/* Image Viber preview */}
-                {hasTrimmedText(imageURL) && (
+                {imageURL && (
                   <CapImage
                     src={imageURL}
                     className="viber-image-preview"
@@ -217,78 +171,16 @@ const ViberPreviewContent = ({
                 )}
 
                 {/* Button Viber preview */}
-                {trimmedButtonText && (
+                {buttonText && (
                   <CapLabel className="viber-button-base">
                     <p className="viber-button-card-text">
                       {buttonText}
                     </p>
                   </CapLabel>
                 )}
-                {/* Carousel Viber preview */}
-                {showCarouselInPreview && (
-                  <>
-                    <CapRow className="viber-carousel-message-pop">
-                      {trimmedMessageContent ? (
-                        <CapLabel
-                          type="label15"
-                          className="message-pop-item align-left viber-message-text viber-carousel-message-box-text"
-                        >
-                          {messageContent}
-                        </CapLabel>
-                      ) : (
-                        <CapRow className="viber-carousel-message-box-placeholder" />
-                      )}
-                      <CapLabel type="label1" className="viber-carousel-message-timestamp">
-                        {timestamp}
-                      </CapLabel>
-                    </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>
-                    </CapRow>
-                  </>
-                )}
-                {!showCarouselInPreview && (
-                  <CapLabel type="label1" className="viber-timestamp">
-                    {timestamp}
-                  </CapLabel>
-                )}
+                <CapLabel type="label1" className="viber-timestamp">
+                  {timestamp}
+                </CapLabel>
                 <CapRow className="empty-placeholder" />
               </CapRow>
 
@@ -322,16 +214,6 @@ ViberPreviewContent.propTypes = {
         viberVideoPreviewImg: PropTypes.string,
       }),
       buttonText: PropTypes.string,
-      type: PropTypes.string,
-      cards: PropTypes.arrayOf(PropTypes.shape({
-        text: PropTypes.string,
-        mediaUrl: PropTypes.string,
-        buttons: PropTypes.arrayOf(PropTypes.shape({
-          title: PropTypes.string,
-          action: PropTypes.string,
-        })),
-      })),
-      showCarouselEditorPreview: PropTypes.bool,
     }),
   }),
   device: PropTypes.oneOf([ANDROID, IOS]),

package/v2Components/CommonTestAndPreview/UnifiedPreview/WebPushPreviewContent.js

@@ -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">
+      <div 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}
+        />
+      </div>
+
+      <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;