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

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -6,7 +6,7 @@
  * Routes to channel-specific preview content components
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
@@ -21,8 +21,22 @@ import InAppPreviewContent from './InAppPreviewContent';
 import MobilePushPreviewContent from './MobilePushPreviewContent';
 import ViberPreviewContent from './ViberPreviewContent';
 import ZaloPreviewContent from './ZaloPreviewContent';
-import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../constants';
+import WebPushPreviewContent from './WebPushPreviewContent';
+import CapTab from '@capillarytech/cap-ui-library/CapTab';
+import {
+  CHANNELS,
+  DESKTOP,
+  TABLET,
+  MOBILE,
+  ANDROID,
+  IOS,
+  PREVIEW_TAB_RCS,
+  PREVIEW_TAB_SMS_FALLBACK,
+  PREVIEW_TAB_KEYS,
+  RCS_SMS_FALLBACK_VAR_MAPPED_PROP,
+} from '../constants';
 import messages from '../messages';
+import { getFallbackResolvedContent } from '../../../utils/templateVarUtils';
 import './_unifiedPreview.scss';
 
 const UnifiedPreview = ({
@@ -38,12 +52,30 @@ const UnifiedPreview = ({
   lastModified,
   updatedByName,
   showHeader, // Default to true for Test and Preview flow, false for channel component previews
+  smsFallbackContent,
+  smsFallbackResolvedText,
+  activePreviewTab,
+  onPreviewTabChange,
 }) => {
+  const hasFallbackSmsTemplate = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
+  const showRcsSmsFallbackTabs = channel === CHANNELS.RCS && hasFallbackSmsTemplate;
+  const rawFallbackTemplate = smsFallbackContent?.templateContent ?? smsFallbackContent?.content ?? '';
+  const rcsFallbackVarMapped = smsFallbackContent?.[RCS_SMS_FALLBACK_VAR_MAPPED_PROP] ?? {};
+  const hasRcsFallbackVarMapped = Object.keys(rcsFallbackVarMapped).length > 0;
+  // When no varmap is present, show raw template so {{tags}} remain visible in the preview.
+  // Only apply slot substitution when varmap entries exist or a resolved text is available.
+  const smsFallbackDisplayContent =
+    smsFallbackResolvedText != null && smsFallbackResolvedText !== ''
+      ? smsFallbackResolvedText
+      : hasRcsFallbackVarMapped
+        ? getFallbackResolvedContent(rawFallbackTemplate, rcsFallbackVarMapped)
+        : rawFallbackTemplate;
   /**
    * Render channel-specific preview content
    * 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
@@ -124,6 +156,21 @@ const UnifiedPreview = ({
       case CHANNELS.RCS: {
         // RCS content is an object with rcsTitle, rcsDesc, rcsImageSrc, suggestions, etc.
         const rcsContent = typeof content === 'object' ? content : {};
+
+        if (showRcsSmsFallbackTabs && activePreviewTab === PREVIEW_TAB_SMS_FALLBACK) {
+          return (
+            <SmsPreviewContent
+              content={smsFallbackDisplayContent}
+              device={ANDROID}
+              isUpdating={isUpdating}
+              error={error}
+              formatMessage={formatMessage}
+              senderId={smsFallbackContent?.senderId}
+              showHeader={showHeader}
+            />
+          );
+        }
+
         return (
           <RcsPreviewContent
             content={rcsContent}
@@ -197,6 +244,45 @@ 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 { content: webPushInner = {} } = webPushOuter;
+        const {
+          title,
+          message,
+          iconImageUrl,
+          cta,
+          expandableDetails = {},
+        } = webPushInner;
+        const { media: webPushMedia = [], ctas: webPushCtas = [] } = expandableDetails;
+        const webPushButtons = webPushCtas.map(({ title: text = '', actionLink: url = '', type = '' }) => ({
+          text,
+          url,
+          type,
+        }));
+        return (
+          <WebPushPreviewContent
+            notificationTitle={title || ''}
+            notificationBody={message || ''}
+            imageSrc={webPushMedia[0]?.url || ''}
+            brandIconSrc={iconImageUrl || ''}
+            buttons={webPushButtons}
+            url={cta?.actionLink || ''}
+            isUpdating={isUpdating}
+            error={error}
+            isFullscreenOpen={isFullscreenOpen}
+            setIsFullscreenOpen={setIsFullscreenOpen}
+            selectedCustomer={selectedCustomer}
+          />
+        );
+      }
+
       default:
         return (
           <div className="channel-preview-placeholder">
@@ -212,6 +298,8 @@ const UnifiedPreview = ({
     }
   };
 
+  const showToggle = channel !== CHANNELS.WEBPUSH && showDeviceToggle;
+
   /**
    * Render loading state for all channels
    */
@@ -222,9 +310,10 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showDeviceToggle}
+            showDeviceToggle={showToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
+            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-loading-container">
@@ -247,9 +336,10 @@ const UnifiedPreview = ({
           <PreviewHeader
             selectedCustomer={selectedCustomer}
             device={device}
-            showDeviceToggle={showDeviceToggle}
+            showDeviceToggle={showToggle}
             onDeviceChange={onDeviceChange}
             channel={channel}
+            setIsFullscreenOpen={setIsFullscreenOpen}
           />
         )}
         <CapRow className="preview-error-container">
@@ -268,6 +358,96 @@ const UnifiedPreview = ({
    * PreviewHeader is shown only when showHeader is true (for Test and Preview flow)
    * Channel-specific content will be in separate files in future phases
    */
+  if (showRcsSmsFallbackTabs) {
+    const renderPane = ({ paneChannel, paneDevice, paneShowDeviceToggle, paneContent }) => (
+      <CapRow className="unified-preview-tab-pane">
+        {showHeader && (
+          <PreviewHeader
+            selectedCustomer={selectedCustomer}
+            device={paneDevice}
+            showDeviceToggle={paneShowDeviceToggle}
+            onDeviceChange={onDeviceChange}
+            channel={paneChannel}
+          />
+        )}
+
+        <CapRow className={`preview-content-container ${!showHeader ? 'preview-content-container-no-header' : ''}`}>
+          {paneContent}
+        </CapRow>
+
+       
+      </CapRow>
+    );
+
+    return (
+      <CapRow className="unified-preview unified-preview-rcs-tabs">
+        <CapTab
+          activeKey={activePreviewTab}
+          onChange={onPreviewTabChange}
+          panes={[
+            {
+              tab: formatMessage(messages.rcsTab),
+              key: PREVIEW_TAB_RCS,
+              content: renderPane({
+                paneChannel: CHANNELS.RCS,
+                paneDevice: device,
+                paneShowDeviceToggle: showDeviceToggle,
+                paneContent: (
+                  <RcsPreviewContent
+                    content={typeof content === 'object' ? content : {}}
+                    device={device}
+                    isUpdating={isUpdating}
+                    error={error}
+                    formatMessage={formatMessage}
+                    senderId={content?.senderId}
+                    showHeader={showHeader}
+                  />
+                ),
+              }),
+            },
+            {
+              tab: formatMessage(messages.smsFallbackTab),
+              key: PREVIEW_TAB_SMS_FALLBACK,
+              content: renderPane({
+                paneChannel: CHANNELS.SMS,
+                paneDevice: device,
+                paneShowDeviceToggle: showDeviceToggle,
+                paneContent: (
+                  <SmsPreviewContent
+                    content={smsFallbackDisplayContent}
+                    device={device}
+                    isUpdating={isUpdating}
+                    error={error}
+                    formatMessage={formatMessage}
+                    senderId={smsFallbackContent?.senderId}
+                    showHeader={showHeader}
+                  />
+                ),
+              }),
+            },
+          ]}
+        />
+        {(lastModified || updatedByName) && (
+          <CapRow className="preview-metadata">
+            {lastModified && (
+              <span className="metadata-item">
+                {formatMessage(messages.lastModified)}
+                :
+                {' '}
+                {lastModified}
+              </span>
+            )}
+            {updatedByName && (
+              <span className="metadata-item">
+                {formatMessage(messages.byAuthor, { name: updatedByName })}
+              </span>
+            )}
+          </CapRow>
+        )}
+      </CapRow>
+    );
+  }
+
   return (
     <CapRow className="unified-preview">
       {/* PreviewHeader - shown only in Test and Preview flow, hidden in channel component previews */}
@@ -275,15 +455,16 @@ const UnifiedPreview = ({
         <PreviewHeader
           selectedCustomer={selectedCustomer}
           device={device}
-          showDeviceToggle={showDeviceToggle}
+          showDeviceToggle={showToggle}
           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].includes(channel) ? (
+        {[CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.WHATSAPP, CHANNELS.RCS, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.WEBPUSH].includes(channel) ? (
           renderChannelContent()
         ) : (
           <DeviceFrame device={device || DESKTOP}>
@@ -305,9 +486,7 @@ const UnifiedPreview = ({
           )}
           {updatedByName && (
             <span className="metadata-item">
-              {formatMessage(messages.by)}
-              {' '}
-              {updatedByName}
+              {formatMessage(messages.byAuthor, { name: updatedByName })}
             </span>
           )}
         </CapRow>
@@ -319,7 +498,7 @@ const UnifiedPreview = ({
 UnifiedPreview.propTypes = {
   // Core
   channel: PropTypes.oneOf(Object.values(CHANNELS)).isRequired,
-  content: PropTypes.object.isRequired,
+  content: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
 
   // Display options
   device: PropTypes.oneOf([DESKTOP, TABLET, MOBILE, ANDROID, IOS]),
@@ -348,6 +527,15 @@ UnifiedPreview.propTypes = {
 
   // Header display
   showHeader: PropTypes.bool, // Show PreviewHeader (true for Test and Preview flow, false for channel component previews)
+
+  // RCS: SMS fallback preview support (same shape as SmsFallback / RCS smsFallbackData)
+  smsFallbackContent: PropTypes.shape({
+    templateContent: PropTypes.string,
+    senderId: PropTypes.string,
+    templateName: PropTypes.string,
+  }),
+  activePreviewTab: PropTypes.oneOf(PREVIEW_TAB_KEYS),
+  onPreviewTabChange: PropTypes.func,
 };
 
 UnifiedPreview.defaultProps = {
@@ -360,6 +548,10 @@ UnifiedPreview.defaultProps = {
   lastModified: null,
   updatedByName: null,
   showHeader: true, // Default to true for Test and Preview flow
+  smsFallbackContent: null,
+  smsFallbackResolvedText: undefined,
+  activePreviewTab: PREVIEW_TAB_RCS,
+  onPreviewTabChange: () => {},
 };
 
 export default UnifiedPreview;

package/v2Components/CommonTestAndPreview/_commonTestAndPreview.scss

@@ -213,6 +213,10 @@
   margin-right: 0.5rem;
 }
 
+.cap-slide-box-v2.common-test-and-preview-slidebox .cap-slide-box-v2-container {
+  z-index: 10030;
+}
+
 .common-test-and-preview-slidebox {
 
   .ant-modal-mask,
@@ -486,6 +490,13 @@
       }
     }
 
+    .tags-section-title {
+      margin: $CAP_SPACE_12 0;
+      display: block;
+      color: $CAP_G01;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+    }
+
     .values-table {
       margin-bottom: $CAP_SPACE_16;
       border: $CAP_SPACE_01 solid $CAP_G12;

package/v2Components/CommonTestAndPreview/constants.js

@@ -66,7 +66,6 @@ export const GET_WECRM_ACCOUNTS_REQUESTED = 'app/CommonTestAndPreview/GET_WECRM_
 export const GET_WECRM_ACCOUNTS_SUCCESS = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_SUCCESS';
 export const GET_WECRM_ACCOUNTS_FAILURE = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_FAILURE';
 
-
 // ============================================
 // CUSTOMER MODAL TYPE (test customer addition)
 // ============================================
@@ -85,8 +84,46 @@ 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];
+
+/** Unified preview tab keys when RCS shows RCS + SMS fallback panes. */
+export const PREVIEW_TAB_RCS = 'rcs';
+export const PREVIEW_TAB_SMS_FALLBACK = 'smsFallback';
+export const PREVIEW_TAB_KEYS = [PREVIEW_TAB_RCS, PREVIEW_TAB_SMS_FALLBACK];
+
+/** Channels whose Test & Preview defaults to Android/iOS device frame (not desktop). */
+export const CHANNELS_USING_ANDROID_PREVIEW_DEVICE = [
+  CHANNELS.SMS,
+  CHANNELS.WHATSAPP,
+  CHANNELS.RCS,
+  CHANNELS.INAPP,
+  CHANNELS.MOBILEPUSH,
+  CHANNELS.VIBER,
+];
+
+/** RCS createMessageMeta test payload — rich card envelope literals. */
+export const RCS_TEST_META_CONTENT_TYPE_RICHCARD = 'RICHCARD';
+export const RCS_TEST_META_CARD_TYPE_STANDALONE = 'STANDALONE';
+export const RCS_TEST_META_CARD_ORIENTATION_VERTICAL = 'VERTICAL';
+export const RCS_TEST_META_CARD_WIDTH_SMALL = 'SMALL';
+
+/** React key fallback when a custom-values section has no `key` or title id. */
+export const CUSTOM_VALUES_EDITOR_SECTION_FALLBACK_KEY = 'section';
+
+/**
+ * Matches at least one `{{variableName}}` token in SMS / RCS fallback template text.
+ */
+export const SMS_MUSTACHE_TAG_PATTERN = /\{\{[^}]+\}\}/;
+
+/** TRAI DLT `{#…#}` placeholders (same idea as `COMBINED_SMS_TEMPLATE_VAR_REGEX` in unified constants). */
+export const SMS_DLT_HASH_TAG_PATTERN = /\{\#[^#]*\#\}/;
+
+/**
+ * Key on `smsFallbackContent` passed into Test & Preview — RCS slot map from SmsTraiEdit
+ * (`onRcsFallbackEditorStateChange`), merged before tag extraction like the embedded SMS editor.
+ */
+export const RCS_SMS_FALLBACK_VAR_MAPPED_PROP = 'rcsSmsFallbackVarMapped';
 
 // ============================================
 // DEVICE CONSTANTS
@@ -203,6 +240,7 @@ 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 = {