@capillarytech/creatives-library 9.0.14-beta.0 → 9.0.14

package/v2Containers/CommunicationFlow/constants.js

@@ -5,6 +5,8 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 
+export const CAMPAIGNS = 'CAMPAIGNS';
+
 // Step identifiers
 export const STEPS = {
   MESSAGE_TYPE: 'messageType',
@@ -25,13 +27,11 @@ export const MESSAGE_TYPES_OPTIONS = [
 export const COMMUNICATION_STRATEGIES_OPTIONS = [
   {
     value: 'SINGLE_TEMPLATE', label: <FormattedMessage {...messages.singleTemplate} />, disabled: false, isMultiChannel: false,
-  },
-  {
-    value: 'CHANNEL_PRIORITY', label: <FormattedMessage {...messages.channelPriority} />, disabled: false, isMultiChannel: true,
-  },
-  {
-    value: 'AB_TEST', label: <FormattedMessage {...messages.abTest} />, disabled: false, isMultiChannel: true,
-  },
+  }
+];
+
+export const DEFAULT_COMMUNICATION_STRATEGY_OPTIONS = [
+  COMMUNICATION_STRATEGIES_OPTIONS.find((o) => o.value === 'SINGLE_TEMPLATE'),
 ];
 
 export const CHANNEL_PRIORITY = 'CHANNEL_PRIORITY';
@@ -153,8 +153,8 @@ export const CHANNELS = [
 ];
 
 // Delivery settings - channels that show/hide sender details
-export const CHANNELS_WITHOUT_DELIVERY = ['MPUSH', 'MOBILEPUSH', 'INAPP', 'WEBPUSH'];
-export const SENDER_ID_CHANNELS = ['SMS', 'EMAIL', 'VIBER', 'ZALO', 'LINE'];
+export const CHANNELS_WITHOUT_DELIVERY = ['MPUSH', 'MOBILEPUSH', 'INAPP', 'WEBPUSH', 'LINE'];
+export const SENDER_ID_CHANNELS = ['SMS', 'EMAIL', 'VIBER', 'ZALO'];
 export const SENDER_NUMBER_CHANNELS = ['WHATSAPP', 'RCS'];
 
 // Dynamic Controls — default config for the Other Controls section.
@@ -180,6 +180,41 @@ export const DYNAMIC_CONTROLS_CONFIG = [
   },
 ];
 
+// Channels where CommonTestAndPreview has no implementation — hide "Preview and Test" menu item
+export const PREVIEW_TEST_UNSUPPORTED_CHANNELS = ['LINE', 'FACEBOOK', 'CALLTASK', 'WECHAT'];
+
+export const CHANNEL_CONTENT_KEY_MAP = {
+  SMS: 'smsMessageContent',
+  EMAIL: 'emailMessageContent',
+  WHATSAPP: 'whatsappMessageContent',
+  MPUSH: 'mpushMessageContent',
+  MOBILEPUSH: 'mpushMessageContent',
+  INAPP: 'inAppMessageContent',
+  ZALO: 'zaloMessageContent',
+  VIBER: 'viberMessageContent',
+  LINE: 'lineMessageContent',
+  WEBPUSH: 'webPushMessageContent',
+  RCS: 'rcsMessageContent',
+  WECHAT: 'wechatMessageContent',
+  CALLTASK: 'callTaskMessageContent',
+};
+
+export const CHANNEL_DELIVERY_KEY_MAP = {
+  SMS: 'smsDeliverySettings',
+  EMAIL: 'emailDeliverySettings',
+  WHATSAPP: 'whatsappDeliverySettings',
+  MPUSH: 'mpushDeliverySettings',
+  MOBILEPUSH: 'mpushDeliverySettings',
+  INAPP: 'inAppDeliverySettings',
+  ZALO: 'zaloDeliverySettings',
+  VIBER: 'viberDeliverySettings',
+  LINE: 'lineDeliverySettings',
+  WEBPUSH: 'webPushDeliverySettings',
+  RCS: 'rcsDeliverySettings',
+  WECHAT: 'wechatDeliverySettings',
+  CALLTASK: 'callTaskDeliverySettings',
+};
+
 // Incentive types
 export const INCENTIVE_TYPES = [
   {
@@ -197,4 +232,4 @@ export const INCENTIVE_TYPES = [
   {
     value: 'badges', label: <FormattedMessage {...messages.badges} />, isActive: false, disabled: false,
   },
-];
+];

package/v2Containers/CommunicationFlow/index.js

@@ -74,19 +74,21 @@ CommunicationFlowContainer.propTypes = {
       }),
       incentivesData: PropTypes.shape({
         required: PropTypes.bool,
+        enabled: PropTypes.bool,
         types: PropTypes.arrayOf(PropTypes.shape({
           value: PropTypes.string.isRequired,
-          label: PropTypes.string.isRequired,
+          label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
           isActive: PropTypes.bool,
         })),
       }),
       deliverySettingsData: PropTypes.object,
+      showDynamicControls: PropTypes.bool,
       dynamicControlsData: PropTypes.shape({
-        required: PropTypes.bool,
         controls: PropTypes.array,
       }),
     }),
     context: PropTypes.object, // ouId, campaignId, programId, etc.
+    useCCS: PropTypes.bool, // If false, skips CCS bulk-claim-approve on save. Defaults to true.
   }).isRequired,
   initialData: PropTypes.object, // for edit/preview mode
   onSave: PropTypes.func.isRequired, // (data) => void - called when user saves
@@ -100,3 +102,4 @@ CommunicationFlowContainer.defaultProps = {
 };
 
 export default CommunicationFlowContainer;
+export { default as CommunicationFlowCard } from './CommunicationFlowCard';

package/v2Containers/CommunicationFlow/messages.js

@@ -150,6 +150,18 @@ export default {
     id: `${prefix}.addContentTemplate`,
     defaultMessage: 'Content template',
   },
+  addCreatives: {
+    id: `${prefix}.addCreatives`,
+    defaultMessage: 'Add creatives',
+  },
+  addCreative: {
+    id: `${prefix}.addCreative`,
+    defaultMessage: 'Add creative',
+  },
+  channel: {
+    id: `${prefix}.channel`,
+    defaultMessage: 'Channel',
+  },
   edit: {
     id: `${prefix}.edit`,
     defaultMessage: 'Edit',
@@ -302,6 +314,14 @@ export default {
     id: `${prefix}.dynamicControlsTitle`,
     defaultMessage: 'Other controls',
   },
+  yes: {
+    id: `${prefix}.yes`,
+    defaultMessage: 'Yes',
+  },
+  no: {
+    id: `${prefix}.no`,
+    defaultMessage: 'No',
+  },
   whatsappBusinessAccount: {
     id: `${prefix}.whatsappBusinessAccount`,
     defaultMessage: 'WhatsApp Business account',

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.js

@@ -17,11 +17,16 @@ import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
 import CreativesContainer from '../../../CreativesContainer';
+import TestAndPreviewSlidebox from '../../../../v2Components/TestAndPreviewSlidebox';
 import { DeliverySettingsSection } from '../DeliverySettingsStep';
-import { CHANNELS } from '../../constants';
-import { VIBER, MOBILE_PUSH, MPUSH, SMS, EMAIL } from '../../../CreativesContainer/constants';
+import { CHANNELS, PREVIEW_TEST_UNSUPPORTED_CHANNELS } from '../../constants';
+import {
+  VIBER, MOBILE_PUSH, MPUSH, SMS, EMAIL, WEBPUSH, ZALO, INAPP, WHATSAPP, WECHAT, RCS, FTP, BEE,
+} from '../../../CreativesContainer/constants';
+import getContentBody from '../../utils/getContentBody';
+import extractContentForPreview from './extractContentForPreview';
 // TemplatesV2 pane keys (for channelsToHide) - derived from CHANNELS + FTP
-const CREATIVES_PANE_KEYS = [...CHANNELS?.map((channel) => channel?.paneKey), 'FTP'];
+const CREATIVES_PANE_KEYS = [...CHANNELS?.map((channel) => channel?.paneKey), FTP];
 // Channels that TemplatesV2 shows only when enableNewChannels includes them (not in commonChannels)
 const ENABLE_NEW_CHANNELS = CHANNELS.filter((channel) => channel.requiresEnableNewChannels).map((channel) => channel?.value);
 import messages from '../../messages';
@@ -32,6 +37,7 @@ import './ChannelSelectionStep.scss';
 
 const generateContentId = () => `content_${Date.now()}`;
 
+
 const ChannelSelectionStep = ({
   value,
   channels, // eslint-disable-line
@@ -46,6 +52,7 @@ const ChannelSelectionStep = ({
   error,
   intl,
   capData, // From Redux - contains user/org info needed by CouponsWrapper
+  config,
 }) => {
   const contentItems = value?.contentItems || [];
   const [showCreativesContainer, setShowCreativesContainer] = useState(false);
@@ -54,6 +61,8 @@ const ChannelSelectionStep = ({
   const [showChannelsMenu, setShowChannelsMenu] = useState(false);
   // Keyed by contentId (or 'standalone' for the empty-state button) so each dropdown controls its own open state
   const [showIncentivesMenuMap, setShowIncentivesMenuMap] = useState({});
+  const [showTestAndPreview, setShowTestAndPreview] = useState(false);
+  const [testAndPreviewItem, setTestAndPreviewItem] = useState(null);
   const { formatMessage } = intl || {};
 
   // Available channels (filter out hidden ones)
@@ -160,14 +169,25 @@ const ChannelSelectionStep = ({
   /** Map channel to CapCustomCard type for styling (like adiona getEngagementCardType) */
   const getCardType = (channel) => {
     const upperCaseChannel = channel?.toUpperCase();
-    const mapping = { MOBILEPUSH: MPUSH, MPUSH: MPUSH };
-    return mapping[upperCaseChannel] || channel;
+    // Return "MOBILEPUSH" so the CapCustomCard wrapper gets that CSS class (scoped mobilepush styles).
+    // CapCustomCard renders JSX content directly when isNewMobilePush=true, bypassing getMpushContent.
+    if ([MOBILE_PUSH, MPUSH].includes(upperCaseChannel)) return MOBILE_PUSH;
+    // INAPP and WECHAT: CapCustomCard has special-case content handlers that expect a raw template
+    // object (versions.base), not JSX. Returning undefined causes it to fall through to the
+    // default branch which renders content directly.
+    if ([INAPP, WECHAT].includes(upperCaseChannel)) return undefined;
+    return channel;
   };
 
+
   const handlePreviewContent = useCallback((item) => {
-    // Placeholder for preview - can be wired to Preview slidebox when available
-    // eslint-disable-next-line no-console
-    console.log('Preview content', item?.contentId);
+    setTestAndPreviewItem(item);
+    setShowTestAndPreview(true);
+  }, []);
+
+  const handleCloseTestAndPreview = useCallback(() => {
+    setShowTestAndPreview(false);
+    setTestAndPreviewItem(null);
   }, []);
 
   const handleChannelSelect = (channelValue) => {
@@ -197,7 +217,7 @@ const ChannelSelectionStep = ({
   };
 
   const handleChannelMenuClick = ({ key }) => {
-    // key should be the channel value (e.g., 'SMS', 'EMAIL', etc.)
+    // key should be the channel value (e.g., SMS, EMAIL, etc.)
     handleChannelSelect(key);
     setShowChannelsMenu(false);
   };
@@ -244,7 +264,7 @@ const ChannelSelectionStep = ({
 
     // Filter out FTP and ensure only active channels are shown
     const filteredChannels = availableChannels.filter((channel) => {
-      const isFTP = channel.value === 'FTP' || channel.value === 'ftp';
+      const isFTP = [FTP, FTP.toLowerCase()].includes(channel.value);
       const isHidden = channelsToHide.includes(channel.value);
       const isDisabled = channelsToDisable.includes(channel.value);
       return !isFTP && !isHidden && channel.isActive;
@@ -303,7 +323,7 @@ const ChannelSelectionStep = ({
     const iconType = channelConfig?.iconType || 'sms';
     const channelLabel = channelConfig?.label || item.channel;
     const senderDetailsText = getSenderDetailsDisplay(item);
-    const hasIncentiveOptions = incentivesData && availableIncentiveTypes?.some((i) => i.value !== 'coupons' && i.value !== 'points');
+    const hasIncentiveOptions = incentivesData?.enabled && availableIncentiveTypes?.some((incentiveType) => incentiveType.value !== 'coupons' && incentiveType.value !== 'points');
 
     const card = {
       title: (
@@ -314,9 +334,9 @@ const ChannelSelectionStep = ({
       ),
       content: (
         <CapRow className="content-card-body">
-          <CapLabel type="label2" className="content-preview-text">
-            {getContentPreview(item)}
-          </CapLabel>
+          <CapRow className="content-preview-text">
+            {getContentBody(item)}
+          </CapRow>
           {senderDetailsText && (
             <CapRow type="flex" align="middle" justify="space-between" className="sender-details-row">
               <CapLabel type="label2">{senderDetailsText}</CapLabel>
@@ -326,6 +346,7 @@ const ChannelSelectionStep = ({
         </CapRow>
       ),
       cardType: getCardType(item.channel),
+      isNewMobilePush: [MOBILE_PUSH, MPUSH].includes(item.channel?.toUpperCase()),
       extra: (
         <CapDropdown
           overlay={
@@ -337,13 +358,15 @@ const ChannelSelectionStep = ({
               >
                  {formatMessage(messages.edit)}
               </CapMenu.Item>
-              <CapMenu.Item
-                id="preview-menu-item"
-                className="ant-dropdown-menu-item"
-                onClick={() => handlePreviewContent(item)}
-              >
-                {formatMessage(messages.previewAndTest)}
-              </CapMenu.Item>
+              {!PREVIEW_TEST_UNSUPPORTED_CHANNELS.includes(item?.channel?.toUpperCase()) && (
+                <CapMenu.Item
+                  id="preview-menu-item"
+                  className="ant-dropdown-menu-item"
+                  onClick={() => handlePreviewContent(item)}
+                >
+                  {formatMessage(messages.previewAndTest)}
+                </CapMenu.Item>
+              )}
               <CapMenu.Item
                 id="delete-menu-item"
                 onClick={() => handleDeleteContent(item.contentId)}
@@ -392,23 +415,26 @@ const ChannelSelectionStep = ({
           useLegacy
           className={`content-template-container ${contentItems?.length > 0 ? 'content-template-container--has-content' : ''}`}
         >
+          {contentItems?.length === 0 && (
+            <CapHeading type="label2" className="content-card-channel-header">
+              {formatMessage(messages.channel)}
+            </CapHeading>
+          )}
+
           {contentItems?.length === 0 ? (
             <CapRow className="content-template-section">
-              <CapHeading type="h5">
-                {formatMessage(messages.addMessageContentAndIncentive)}
-              </CapHeading>
-
               <CapDropdown
-                overlay={renderChannelDropdownOverlay()}
+                overlay={renderChannelDropdownOverlay() || <CapMenu />}
                 onVisibleChange={handleChannelsVisibleChange}
                 visible={showChannelsMenu}
               >
                 <CapButton
                   isAddBtn
-                  type="primary"
+                  type="secondary"
                   className="add-content-template-button"
+                  onClick={() => renderChannelDropdownOverlay() !== null && setShowChannelsMenu(true)}
                 >
-                  {formatMessage(messages.addContentTemplate)}
+                  {formatMessage(messages.addCreative)}
                 </CapButton>
               </CapDropdown>
             </CapRow>
@@ -420,7 +446,7 @@ const ChannelSelectionStep = ({
           )}
 
           {contentItems?.length === 0 &&
-            incentivesData &&
+            incentivesData?.enabled &&
             availableIncentiveTypes?.some((i) => i.value !== 'coupons' && i.value !== 'points') && (
               <CapRow type="flex" justify="center" align="middle" className="incentive-section">
                 <CapDropdown
@@ -460,12 +486,25 @@ const ChannelSelectionStep = ({
         <CreativesContainer
           key={`creatives-${selectedChannel}-${editingContentId || 'create'}`}
           channel={selectedChannelConfig.channelProp}
-          creativesMode={editingContentId ? 'edit' : creativesMode}
+          creativesMode={editingContentId ? 'edit' : 'create'}
           getCreativesData={handleCreativesData}
           handleCloseCreatives={handleCloseCreatives}
           isFullMode={false}
           messageDetails={{ type: 'default' }}
-          templateData={editingContentId ? contentItems.find((c) => c.contentId === editingContentId)?.templateData : null}
+          templateData={editingContentId ? (() => {
+            const saved = contentItems.find((c) => c.contentId === editingContentId)?.templateData;
+            // getTemplateData in CreativesContainer reads 'content', 'accountId', 'messageSubject' at
+            // top-level and needs 'type' for SlideBoxContent to set isEditWebPush. Our stored WEBPUSH
+            // templateData wraps those fields inside messageContent.content, so extract them here.
+            if (saved?.channel?.toUpperCase() === WEBPUSH && saved?.messageContent?.content) {
+              return { ...saved.messageContent.content, type: WEBPUSH };
+            }
+            return saved;
+          })() : null}
+          editor={(() => {
+            const saved = contentItems.find((c) => c.contentId === editingContentId)?.templateData;
+            return (saved?.is_drag_drop === true || saved?.is_drag_drop === 1) ? BEE : undefined;
+          })()}
           selectedOfferDetails={selectedOfferDetails}
           channelsToHide={[
             ...(channelsToHide || []),
@@ -473,10 +512,31 @@ const ChannelSelectionStep = ({
           ]}
           channelsToDisable={channelsToDisable}
           enableNewChannels={ENABLE_NEW_CHANNELS}
+          cap={capData}
         />
       )}
 
       {/* cap-coupons flows disabled - Coupons and Points slideboxes commented out */}
+
+      {showTestAndPreview && testAndPreviewItem && (() => {
+        const { content, formData, accountId, sourceAccountIdentifier, accountName } = extractContentForPreview(testAndPreviewItem);
+        const upperChannel = testAndPreviewItem?.channel?.toUpperCase();
+        const messageMetaConfigId = testAndPreviewItem?.templateData?.templateConfigs?.templateId || null;
+        return (
+          <TestAndPreviewSlidebox
+            show={showTestAndPreview}
+            onClose={handleCloseTestAndPreview}
+            channel={upperChannel}
+            content={content}
+            formData={formData}
+            messageMetaConfigId={messageMetaConfigId}
+            orgUnitId={config?.context?.ouId}
+            accountId={accountId}
+            sourceAccountIdentifier={sourceAccountIdentifier}
+            accountName={accountName}
+          />
+        );
+      })()}
     </>
   );
 };
@@ -500,11 +560,13 @@ ChannelSelectionStep.propTypes = {
   incentivesData: PropTypes.shape({
     types: PropTypes.array,
     required: PropTypes.bool,
+    enabled: PropTypes.bool,
   }),
   deliverySettingsData: PropTypes.object,
   error: PropTypes.string,
   intl: PropTypes.object.isRequired,
   capData: PropTypes.object, // Cap data from Redux (user/org info)
+  config: PropTypes.object,
 };
 
 ChannelSelectionStep.defaultProps = {
@@ -518,6 +580,7 @@ ChannelSelectionStep.defaultProps = {
   selectedOfferDetails: [],
   incentivesData: null,
   capData: {},
+  config: {},
 };
 
 export default injectIntl(ChannelSelectionStep);

package/v2Containers/CommunicationFlow/steps/ChannelSelectionStep/ChannelSelectionStep.scss

@@ -111,12 +111,19 @@
     }
   }
 
-  // Empty state styles - unchanged from original
+  .content-card-channel-header {
+    width: 100%;
+    padding: 1rem 0 0 1rem;
+    align-self: flex-start;
+    font-weight: bold;
+  }
+
+  // Empty state styles
   .content-template-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
     height: 15.75rem;
     width: 100%;
     padding: 0 1rem;
@@ -124,12 +131,8 @@
   }
 
   .add-content-template-button {
-    margin-top: $CAP_SPACE_16;
-    padding: $CAP_SPACE_12;
-    padding-right: $CAP_SPACE_16;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16;
+    align-self: center !important;
   }
 
   .incentive-section {