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

package/package.json

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/PreviewHeader.js

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

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2350,76 +2350,6 @@
     }
   }
 
-  // WebPush Test & Preview Styles
-  .webpush-test-preview-container {
-    width: 100%;
-    position: relative;
-    padding-left: $CAP_SPACE_16;
-    padding-right: $CAP_SPACE_16;
-  }
-
-  .webpush-preview-panel {
-    position: relative;
-    width: 100%;
-  }
-
-  .webpush-expand-btn {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 10;
-    padding: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.06);
-      border-radius: 4px;
-    }
-  }
-
-  .webpush-fullscreen-modal {
-    .webpush-fullscreen-divider {
-      margin-top: 0;
-      margin-bottom: $CAP_SPACE_16;
-    }
-    .ant-modal.cap-modal-v2 {
-      width: 90%;
-      max-width: 100%;
-      margin-top: $CAP_SPACE_40;
-    }
-    // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
-    .webpush-preview-header {
-      background: $CAP_WHITE;
-      overflow: hidden;
-  
-      .preview-divider {
-        margin: 0;
-      }
-  
-      .webpush-heading-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: $CAP_SPACE_16 0 $CAP_SPACE_16 0;
-  
-        .preview-for {
-          gap: $CAP_SPACE_04;
-          align-items: center;
-          b {
-            margin-left: $CAP_SPACE_08;
-          }
-        }
-        
-        .webpush-fullscreen-close-icon {
-          width: $CAP_SPACE_24;
-          height: $CAP_SPACE_24;
-        }
-      }
-    }
-  }
-
   // Responsive adjustments
   @media (max-width: 85.714rem) {
     .unified-preview {

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -6,7 +6,7 @@
  * Routes to channel-specific preview content components
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
@@ -21,7 +21,6 @@ import InAppPreviewContent from './InAppPreviewContent';
 import MobilePushPreviewContent from './MobilePushPreviewContent';
 import ViberPreviewContent from './ViberPreviewContent';
 import ZaloPreviewContent from './ZaloPreviewContent';
-import WebPushPreviewContent from './WebPushPreviewContent';
 import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../constants';
 import messages from '../messages';
 import './_unifiedPreview.scss';
@@ -45,7 +44,6 @@ const UnifiedPreview = ({
    * For Phase 5, we'll render placeholders
    * Phase 6+ will implement actual content components
    */
-  const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);
   const renderChannelContent = () => {
     // Phase 5: Placeholder content for all channels
     // Phase 6+: Import and render actual channel-specific components
@@ -199,40 +197,6 @@ const UnifiedPreview = ({
         );
       }
 
-      case CHANNELS.WEBPUSH: {
-        // WebPush content arrives as a JSON string (from getCurrentContent or preview API response)
-        let webPushOuter = {};
-        try {
-          webPushOuter = typeof content === 'string' ? JSON.parse(content) : (typeof content === 'object' && content !== null ? content : {});
-        } catch (e) {
-          webPushOuter = {};
-        }
-        const webPushInner = webPushOuter?.content || {};
-        const webPushExpandable = webPushInner?.expandableDetails || {};
-        const webPushMedia = webPushExpandable?.media || [];
-        const webPushCtas = webPushExpandable?.ctas || [];
-        const webPushButtons = webPushCtas.map((cta) => ({
-          text: cta?.title || '',
-          url: cta?.actionLink || '',
-          type: cta?.type || '',
-        }));
-        return (
-          <WebPushPreviewContent
-            notificationTitle={webPushInner?.title || ''}
-            notificationBody={webPushInner?.message || ''}
-            imageSrc={webPushMedia[0]?.url || ''}
-            brandIconSrc={webPushInner?.iconImageUrl || ''}
-            buttons={webPushButtons}
-            url={webPushInner?.cta?.actionLink || ''}
-            isUpdating={isUpdating}
-            error={error}
-            isFullscreenOpen={isFullscreenOpen}
-            setIsFullscreenOpen={setIsFullscreenOpen}
-            selectedCustomer={selectedCustomer}
-          />
-        );
-      }
-
       default:
         return (
           <div className="channel-preview-placeholder">
@@ -258,10 +222,9 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={channel !== CHANNELS.WEBPUSH && showDeviceToggle}
+            showDeviceToggle={showDeviceToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
-            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-loading-container">
@@ -284,10 +247,9 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={channel !== CHANNELS.WEBPUSH && showDeviceToggle}
+            showDeviceToggle={showDeviceToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
-            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-error-container">
@@ -313,16 +275,15 @@ const UnifiedPreview = ({
         <PreviewHeader
           selectedCustomer={selectedCustomer}
           device={device}
-          showDeviceToggle={channel !== CHANNELS.WEBPUSH && showDeviceToggle}
+          showDeviceToggle={showDeviceToggle}
           onDeviceChange={onDeviceChange}
           channel={channel}
-          setIsFullscreenOpen={setIsFullscreenOpen}
         />
       )}
 
       {/* Channel-specific preview content */}
       <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
-        {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.WEBPUSH].includes(channel) ? (
+        {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER].includes(channel) ? (
           renderChannelContent()
         ) : (
           <DeviceFrame device={device || DESKTOP}>

package/v2Components/CommonTestAndPreview/constants.js

@@ -85,7 +85,6 @@ export const CHANNELS = {
   MOBILEPUSH: 'MOBILEPUSH',
   VIBER: 'VIBER',
   ZALO: 'ZALO',
-  WEBPUSH: 'WEBPUSH',
 };
 export const CHANNELS_USING_ANDROID_PREVIEW_DEVICE = [CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.INAPP, CHANNELS.MOBILEPUSH];
 
@@ -204,7 +203,6 @@ export const DYNAMIC_URL = 'DYNAMIC_URL';
 export const IMAGE = 'IMAGE';
 export const VIDEO = 'VIDEO';
 export const URL = 'URL';
-export const DAYS = 'DAYS';
 
 // Initial Payload Template (for reference)
 export const INITIAL_PAYLOAD = {

package/v2Components/CommonTestAndPreview/index.js

@@ -81,8 +81,7 @@ import {
   IMAGE,
   VIDEO,
   URL,
-  CHANNELS_USING_ANDROID_PREVIEW_DEVICE,
-  DAYS,
+  CHANNELS_USING_ANDROID_PREVIEW_DEVICE
 } from './constants';
 
 // Import utilities
@@ -611,12 +610,6 @@ const CommonTestAndPreview = (props) => {
           messageBody: contentStr,
         };
 
-      case CHANNELS.WEBPUSH:
-        return {
-          ...basePayload,
-          messageBody: contentStr,
-        };
-
       default:
         return basePayload;
     }
@@ -669,12 +662,6 @@ const CommonTestAndPreview = (props) => {
           templateContent: contentStr,
         };
 
-      case CHANNELS.WEBPUSH:
-        return {
-          templateSubject: formDataObj?.content?.title || '',
-          templateContent: contentStr,
-        };
-
       case CHANNELS.ZALO: {
         // For Zalo, extract content from templateListParams array
         // Combine all variable values into a single string for tag extraction
@@ -1814,42 +1801,6 @@ const CommonTestAndPreview = (props) => {
         };
       }
 
-      case CHANNELS.WEBPUSH: {
-        const webpushData = (typeof formDataObj === 'object' && formDataObj !== null)
-          ? formDataObj
-          : {};
-        const innerContent = webpushData?.content || {};
-
-        const resolvedTitle = resolveTagsInText(innerContent?.title || '', customValuesObj);
-        const resolvedMessage = resolveTagsInText(innerContent?.message || '', customValuesObj);
-
-        return {
-          ...basePayload,
-          webPushMessageContent: {
-            channel: CHANNELS.WEBPUSH,
-            accountId: webpushData?.accountId || null,
-            content: {
-              title: resolvedTitle,
-              message: resolvedMessage,
-              ...(innerContent?.iconImageUrl && { iconImageUrl: innerContent.iconImageUrl }),
-              ...(innerContent?.cta && { cta: innerContent.cta }),
-              ...(innerContent?.expandableDetails && { expandableDetails: innerContent.expandableDetails }),
-            },
-            messageSubject: webpushData?.messageSubject || resolvedTitle || '',
-          },
-          webPushDeliverySettings: {
-            channelSettings: {
-              channel: CHANNELS.WEBPUSH,
-              notificationTtl: {
-                duration: 7,
-                timeUnit: DAYS,
-              },
-            },
-            additionalSettings: {},
-          },
-        };
-      }
-
       default:
         return basePayload;
     }
@@ -1881,7 +1832,7 @@ const CommonTestAndPreview = (props) => {
       contentObj = hasPreviewCallBeenMade && previewDataHtml?.resolvedBody
         ? previewDataHtml.resolvedBody
         : getCurrentContent || '';
-    } else if (channel === CHANNELS.WHATSAPP || channel === CHANNELS.WEBPUSH) {
+    } else if (channel === CHANNELS.WHATSAPP) {
       // For WhatsApp, content is an object with templateMsg, media, CTA, etc.
       // Content comes from WhatsApp component state, passed via content prop
       let resolvedContent = null;

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/PreviewHeader.test.js

@@ -514,163 +514,4 @@ describe('PreviewHeader', () => {
       consoleSpy.mockRestore();
     });
   });
-
-  describe('WEBPUSH channel - Fullscreen expander', () => {
-    it('should render expander icon for WEBPUSH channel', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // expander icon should be present for WEBPUSH
-      const expanderIcon = container.querySelector('[class*="expander"], [aria-label*="expander"], .anticon');
-      expect(expanderIcon).toBeTruthy();
-    });
-
-    it('should NOT render expander icon for non-WEBPUSH channels', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.EMAIL,
-        setIsFullscreenOpen,
-        showDeviceToggle: false,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // No expander icon for EMAIL channel (only device toggle icons may appear)
-      const expanderIcon = container.querySelector('[class*="expander"]');
-      expect(expanderIcon).toBeNull();
-    });
-
-    it('should call setIsFullscreenOpen(true) when expander icon is clicked', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      const expanderIcon = container.querySelector('[class*="expander"]') ||
-        container.querySelector('.anticon');
-      if (expanderIcon) {
-        fireEvent.click(expanderIcon);
-        expect(setIsFullscreenOpen).toHaveBeenCalledWith(true);
-      }
-    });
-
-    it('should render expander icon with ACTIVE class when device is MOBILE', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        device: MOBILE,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // MOBILE device should give ACTIVE class to expander
-      const activeEl = container.querySelector('.active');
-      expect(activeEl).toBeTruthy();
-    });
-
-    it('should render expander icon without ACTIVE class when device is DESKTOP', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        device: DESKTOP,
-        setIsFullscreenOpen,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // DESKTOP device should NOT give ACTIVE class to expander
-      const activeEl = container.querySelector('.active');
-      expect(activeEl).toBeNull();
-    });
-
-    it('should render expander icon alongside device content for WEBPUSH', () => {
-      // Note: suppression of showDeviceToggle for WEBPUSH is done in UnifiedPreview (parent),
-      // not in PreviewHeader itself. PreviewHeader only adds the expander icon for WEBPUSH.
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        setIsFullscreenOpen,
-        showDeviceToggle: false,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <PreviewHeader {...props} />
-        </TestWrapper>
-      );
-
-      // expander icon should be present for WEBPUSH
-      const expanderIcon = container.querySelector('[class*="expander"]') ||
-        container.querySelector('.anticon');
-      expect(expanderIcon).toBeTruthy();
-    });
-
-    it('should accept isFullscreenOpen and setIsFullscreenOpen as props', () => {
-      const setIsFullscreenOpen = jest.fn();
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-        isFullscreenOpen: false,
-        setIsFullscreenOpen,
-      };
-
-      expect(() =>
-        render(
-          <TestWrapper>
-            <PreviewHeader {...props} />
-          </TestWrapper>
-        )
-      ).not.toThrow();
-    });
-
-    it('should use default setIsFullscreenOpen when not provided', () => {
-      const props = {
-        ...defaultProps,
-        channel: CHANNELS.WEBPUSH,
-      };
-
-      expect(() =>
-        render(
-          <TestWrapper>
-            <PreviewHeader {...props} />
-          </TestWrapper>
-        )
-      ).not.toThrow();
-    });
-  });
 });