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

package/v2Components/NavigationBar/index.js

@@ -67,11 +67,23 @@ export class NavigationBar extends React.Component {
         return {
           selectedProduct: formatMessage(messages.loyaltyProgram),
           helpUrl: LOYALTY_HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            placement: 'bottomRight',
+            className: 'navigation-setting-icon',
+            toolTip: formatMessage(messages.loyaltyCreativeSettings),
+          },
         };
       default:
         return {
           selectedProduct: formatMessage(messages.selectedProductDefault),
           helpUrl: HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            onClickHandler: this.onSettingsIconClick,
+          },
         };
     }
   }
@@ -83,6 +95,16 @@ export class NavigationBar extends React.Component {
     }
   };
 
+  onSettingsIconClick = () => {
+    const { settingsUrl } = this.props;
+    if (settingsUrl) {
+      const stateObj = {
+        page: "settings",
+      };
+      window.history.pushState(stateObj, 'Settings', window.location.replace(settingsUrl));
+    }
+  };
+
   onHelpIconClick = () => {
     const { helpUrl } = this.state;
     if (helpUrl) {
@@ -91,6 +113,7 @@ export class NavigationBar extends React.Component {
   };
 
   getTopbarIcons = (showDocumentationBot = false) => {
+    const { settingsIcon } = this.state;
     const ICONS = [
       {
         iconType: 'help',
@@ -98,6 +121,9 @@ export class NavigationBar extends React.Component {
         onClickHandler: this.onHelpIconClick,
       },
     ];
+    if (settingsIcon) {
+      ICONS.push(settingsIcon);
+    }
     return showDocumentationBot ? ICONS.slice(1) : ICONS; // If showDocumentationBot is true, help icon will be replaced by Aira icon on UI
   };
 
@@ -196,6 +222,7 @@ NavigationBar.propTypes = {
   topbarMenuData: PropTypes.array,
   logout: PropTypes.func,
   changeOrg: PropTypes.func,
+  settingsUrl: PropTypes.string,
   children: PropTypes.node,
   orgSettingsUrl: PropTypes.string,
   intl: intlShape.isRequired,

package/v2Components/NavigationBar/messages.js

@@ -65,5 +65,9 @@ export default defineMessages({
   "selectOrganization": {
     id: `${scope}.selectOrganization`,
     defaultMessage: 'Select organization',
+  },
+  "loyaltyCreativeSettings": {
+    id: `${scope}.loyaltyCreativeSettings`,
+    defaultMessage: 'There are no settings for creatives within Loyalty+. Channel-related settings are available within organisation settings',
   }
 });

package/v2Components/NavigationBar/tests/index.test.js

@@ -71,4 +71,23 @@ describe('NavigationBar', () => {
     const loyaltyProduct = screen.getByText('Loyalty+');
     expect(loyaltyProduct).toBeInTheDocument();
   });
+
+  // Regression: AntD v3 -> v6 migration (CAP-183930) dropped the settings (gear)
+  // icon from the top nav. These tests ensure the gear keeps rendering.
+  it('Should render the settings (gear) icon in the top nav bar', () => {
+    const updatedProps = cloneDeep(props);
+    updatedProps.location.pathname = '/creatives/ui/v2';
+    updatedProps.settingsUrl = '/campaigns/ui/creatives/settings/message';
+    renderComponent(updatedProps);
+    const settingsIcon = document.querySelector('.cap-icon-v2-settings');
+    expect(settingsIcon).toBeInTheDocument();
+  });
+
+  it('Should render the settings (gear) icon for the loyalty product', () => {
+    const updatedProps = cloneDeep(props);
+    updatedProps.location.pathname = '/creatives/ui/v2/loyalty';
+    renderComponent(updatedProps);
+    const settingsIcon = document.querySelector('.cap-icon-v2-settings.navigation-setting-icon');
+    expect(settingsIcon).toBeInTheDocument();
+  });
 });

package/v2Components/NewCallTask/index.js

@@ -16,6 +16,7 @@ import CallTaskPreview from '../CallTaskPreview';
 import messages from './messages';
 import './_newCallTask.scss';
 import { hasStore2DoorFeature } from '../../utils/common';
+import { EDIT } from '../../constants/unified';
 
 const CALL = 'CALL';
 const STOREMAX_WHATSAPP = 'STOREMAX_WHATSAPP';
@@ -27,7 +28,11 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
 
   getInitialState = () => {
     const { templateData, messageDetails, mode } = this.props;
-    const actionType = mode === 'edit' ? messageDetails.messageContent.message_content_id_1.callTaskActionType : CALL;
+    const actionType = mode === EDIT
+      ? (messageDetails?.messageContent?.message_content_id_1?.callTaskActionType
+          || templateData?.callTaskActionType
+          || CALL)
+      : CALL;
     return {
       subject: templateData && templateData.subject ? templateData.subject : '',
       messageBody: templateData && templateData.messageBody ? templateData.messageBody : '',

package/v2Components/TemplatePreview/index.js

@@ -47,7 +47,7 @@ import { handlePreviewInNewTab } from '../../utils/common';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
-import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView, getWhatsappDocPreview } from '../../v2Containers/Whatsapp/utils';
 import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER, TEMPLATE_VARIABLE_REGEX } from '../../v2Containers/Whatsapp/constants';
 import { RCS_BUTTON_TYPES, LEFT, HORIZONTAL, VERTICAL, RIGHT} from '../../v2Containers/Rcs/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
@@ -1234,7 +1234,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         )}
                         {content?.docPreview && (
                           <div className="whatsapp-image">
-                            {content?.docPreview}
+                            {React.isValidElement(content.docPreview)
+                              ? content.docPreview
+                              : getWhatsappDocPreview(content.docPreview)}
                           </div>
                         )}
                         {content?.templateHeaderPreview || ""}

package/v2Containers/Cap/index.js

@@ -18,7 +18,7 @@ import * as locationActions from '../LanguageProvider/actions';
 import * as appActions from '../App/actions';
 import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
-import { publicPath } from '../../config/path';
+import { engagePlusPublicPath, publicPath } from '../../config/path';
 import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
@@ -30,6 +30,7 @@ import {
   REQUEST,
   DEFAULT,
   ENABLE_PRODUCT_SUPPORT_VIDEOS,
+  CAMPAIGN_SETTINGS_URL,
 } from './constants';
 import './_cap.scss';
 import { Switch } from 'react-router';
@@ -528,6 +529,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   changeOrg={this.changeOrg}
                   isCreativesAccessible={isCreativesAccessible}
                   logout={this.logout}
+                  settingsUrl={`${engagePlusPublicPath}${CAMPAIGN_SETTINGS_URL}`}
                   orgSettingsUrl={ORG_SETTINGS_URL}
                   loggedIn={isLoggedIn}
                   topbarMenuData={topbarMenuDataOptions}

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -20,6 +20,7 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 // import injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
 // import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
+import { createCentralCommsMetaId, getCentralCommsMetaIds } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -28,6 +29,15 @@ import {
   STEPS,
   CHANNEL_PRIORITY,
   AB_TEST,
+  DEFAULT_COMMUNICATION_STRATEGY_OPTIONS,
+  CHANNELS_WITHOUT_DELIVERY,
+  MESSAGE_TYPES_OPTIONS,
+  CHANNELS,
+  INCENTIVE_TYPES,
+  DYNAMIC_CONTROLS_CONFIG,
+  CHANNEL_CONTENT_KEY_MAP,
+  CHANNEL_DELIVERY_KEY_MAP,
+  CAMPAIGNS,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
@@ -43,6 +53,17 @@ import './CommunicationFlow.scss';
 //   saga: CouponsCapContainer.couponsCapSaga,
 // });
 
+const getDeliveryChannels = (contentItems) => {
+  const channels = contentItems.map((item) => (item.channel || '').toUpperCase()).filter(Boolean);
+  const unique = [...new Set(channels)];
+  return unique.filter((channel) => !CHANNELS_WITHOUT_DELIVERY.includes(channel));
+};
+
+const hasDeliverySettingForChannel = (channelSetting, channel) => {
+  const settings = channelSetting[channel];
+  return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
+};
+
 const CommunicationFlow = ({
   config,
   initialData,
@@ -50,13 +71,14 @@ const CommunicationFlow = ({
   onCancel, // eslint-disable-line
   onChange,
   intl,
-  capData, // From Redux - contains user/org info needed by CouponsWrapper
+  cap, // From parent consumer (e.g. campaigns passes campaignCap) — takes priority over Redux capData
+  capData, // From Redux - fallback when cap is not provided by consumer
 }) => {
   const { formatMessage } = intl || {};
   const { messageTypeData = {}, communicationStrategyData = {}, contentTemplateData = {} } = config?.features || {};
   // Initialize step data from initialData or defaults
   const [stepData, setStepData] = useState(() => {
-    const defaultMessageType = messageTypeData.defaultOption?.value || null;
+    const defaultMessageType = messageTypeData.defaultOption?.value || MESSAGE_TYPES_OPTIONS?.[1]?.value || null;
     return {
       messageType: initialData?.messageType || defaultMessageType,
       communicationStrategy: initialData?.communicationStrategy || null,
@@ -73,6 +95,27 @@ const CommunicationFlow = ({
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
 
+  const isSaveDisabled = useMemo(() => {
+    const strategyRequired = enabledSteps.includes(STEPS.COMMUNICATION_STRATEGY);
+    const templateRequired = enabledSteps.includes(STEPS.CHANNEL_SELECTION);
+    const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(stepData.communicationStrategy);
+
+    if (strategyRequired && !stepData.communicationStrategy) return true;
+    if (templateRequired && !isMultiChannel && (!stepData.contentItems || stepData.contentItems.length === 0)) return true;
+
+    const deliverySettingsEnabled = !!config?.features?.deliverySettingsData;
+    if (deliverySettingsEnabled && templateRequired) {
+      const deliveryChannels = getDeliveryChannels(stepData.contentItems || []);
+      const channelSetting = stepData.deliverySetting?.channelSetting || {};
+      const anyChannelMissingSenderDetails = deliveryChannels.some(
+        (channel) => !hasDeliverySettingForChannel(channelSetting, channel),
+      );
+      if (anyChannelMissingSenderDetails) return true;
+    }
+
+    return false;
+  }, [enabledSteps, stepData.communicationStrategy, stepData.contentItems, stepData.deliverySetting, config?.features?.deliverySettingsData]);
+
   /**
    * Get aggregated data from all steps
    */
@@ -106,6 +149,77 @@ const CommunicationFlow = ({
     }));
   }, []);
 
+  const handleSave = useCallback(async () => {
+    const aggregatedData = getAggregatedData();
+    const shouldUseCCS = config?.useCCS !== false;
+
+    if (shouldUseCCS) {
+      const ouId = config?.context?.ouId || -1;
+      const module = config?.context?.module
+        || (config?.consumer ? config.consumer.toUpperCase() : CAMPAIGNS);
+
+      const channelContentKeyMap = CHANNEL_CONTENT_KEY_MAP;
+      const channelDeliveryKeyMap = CHANNEL_DELIVERY_KEY_MAP;
+
+      const contentItems = aggregatedData.contentItems || [];
+      const { dynamicControls = {} } = aggregatedData;
+
+      const additionalSettings = {
+        useTinyUrl: dynamicControls.useTinyUrl ?? false,
+        encryptUrl: dynamicControls.sendToControlCustomers ?? false,
+        linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
+        userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
+      };
+
+      if (contentItems.length > 0) {
+        try {
+          const responses = await Promise.all(
+            contentItems.map((item) => {
+              const channel = (item.channel || '').toUpperCase();
+              const contentKey = channelContentKeyMap[channel];
+              const deliveryKey = channelDeliveryKeyMap[channel];
+              const payload = {
+                centralCommsPayload: {
+                  ouId,
+                  channel,
+                  module,
+                  executionParams: {},
+                  clientName: 'EMF',
+                  ...(contentKey && {
+                    [contentKey]: { channel, ...item.templateData },
+                  }),
+                  ...(deliveryKey && {
+                    [deliveryKey]: {
+                      additionalSettings,
+                      channelSettings: {
+                        channel,
+                        ...(aggregatedData.deliverySetting?.channelSetting?.[channel] || {}),
+                      },
+                    },
+                  }),
+                },
+              };
+              return createCentralCommsMetaId(payload);
+            }),
+          );
+
+          const metaIds = responses
+            .map((res) => res?.response?.data?.id)
+            .filter(Boolean)
+            .join(',');
+
+          if (metaIds) {
+            const getResponse = await getCentralCommsMetaIds(metaIds);
+          }
+        } catch (error) {
+          console.error('[CommunicationFlow] CCS createCentralCommsMetaId error:', error);
+        }
+      }
+    }
+
+    onSave(aggregatedData);
+  }, [getAggregatedData, config, onSave]);
+
   // Call onChange callback when stepData changes
   useEffect(() => {
     if (onChange) {
@@ -131,8 +245,8 @@ const CommunicationFlow = ({
             <MessageTypeStep
               {...commonProps}
               value={stepData.messageType}
-              options={messageTypeData.options}
-              defaultOption={messageTypeData.defaultOption}
+              options={messageTypeData.options || MESSAGE_TYPES_OPTIONS}
+              defaultOption={messageTypeData.defaultOption || MESSAGE_TYPES_OPTIONS?.[1]}
               onChange={(messageType) => handleStepChange(step, { messageType })}
             />
             <CapDivider />
@@ -145,7 +259,7 @@ const CommunicationFlow = ({
               {...commonProps}
               value={stepData.communicationStrategy}
               // messageType={stepData.messageType}
-              options={communicationStrategyData.options}
+              options={communicationStrategyData.options || DEFAULT_COMMUNICATION_STRATEGY_OPTIONS}
               disabled={communicationStrategyData.disabled}
               onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
             />
@@ -162,30 +276,23 @@ const CommunicationFlow = ({
             <ChannelSelectionStep
               {...commonProps}
               value={stepData}
-              channels={contentTemplateData.channels}
+              channels={contentTemplateData.channels || CHANNELS}
               onChange={(data) => handleStepChange(step, data)}
               channelsToHide={contentTemplateData.channelsToHide}
               channelsToDisable={contentTemplateData.channelsToDisable}
               creativesMode={config.mode || 'create'}
               selectedOfferDetails={stepData.selectedOfferDetails}
-              incentivesData={config.features?.incentivesData}
+              incentivesData={{
+                ...config.features?.incentivesData,
+                types: config.features?.incentivesData?.types || INCENTIVE_TYPES,
+              }}
               deliverySettingsData={config.features?.deliverySettingsData}
               config={config}
-              capData={capData}
+              capData={cap || capData}
             />
             <CapDivider />
           </CapRow>
         );
-      // This will be added back in when coupons/points are integrated so keeping it commented out for now
-      // case STEPS.INCENTIVES:
-      //   return (
-      //     <IncentivesStep
-      //       key={step}
-      //       {...commonProps}
-      //       value={stepData.selectedOfferDetails}
-      //       onChange={(selectedOfferDetails) => handleStepChange(step, { selectedOfferDetails })}
-      //     />
-      //   );
       case STEPS.DYNAMIC_CONTROLS:
         // Only show DynamicControlsStep if communication strategy is selected
         if (!stepData.communicationStrategy) {
@@ -196,7 +303,7 @@ const CommunicationFlow = ({
             key={step}
             {...commonProps}
             value={{ dynamicControls: stepData.dynamicControls }}
-            controls={config.features?.dynamicControlsData?.controls || []}
+            controls={config.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG}
             onChange={(data) => handleStepChange(step, { dynamicControls: data.dynamicControls })}
           />
         );
@@ -210,7 +317,7 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
-          <CapButton type="primary" onClick={() => onSave(getAggregatedData())}>
+          <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>
         </CapRow>
@@ -262,18 +369,21 @@ CommunicationFlow.propTypes = {
       incentivesTypes: PropTypes.arrayOf(PropTypes.oneOf(['coupons', 'points', 'promotions', 'giftVouchers', 'badges'])),
     }),
     context: PropTypes.object,
+    useCCS: PropTypes.bool,
   }).isRequired,
   initialData: PropTypes.object,
   onSave: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   onChange: PropTypes.func,
   intl: PropTypes.object.isRequired,
+  cap: PropTypes.object,
   capData: PropTypes.object,
 };
 
 CommunicationFlow.defaultProps = {
   initialData: null,
   onChange: null,
+  cap: null,
   capData: {},
 };
 

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -10,6 +10,123 @@
   }
 }
 
+// Mobilepush preview styles for CommunicationFlowCard (CapCard context, no .MOBILEPUSH wrapper)
+.communication-flow-summary-card {
+  border-color: $CAP_G12;
+  width: 40rem;
+
+  .summary-card-title-row {
+    gap: 0.25rem;
+  }
+
+  .card-body-row {
+    height: 10.125rem;
+    display: flex;
+  }
+
+  .card-body-left-col {
+    padding: 1rem;
+    border-right: 0.0625rem solid $CAP_G12;
+    height: 100%;
+    overflow: auto;
+
+    .channel-header-row {
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .card-body-right-col {
+    padding: 1rem;
+    height: 100%;
+    overflow: auto;
+
+    .control-row {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .mobilepush-container {
+    background-color: $CAP_WHITE;
+    padding: $CAP_SPACE_12;
+    .app-header {
+      color: #5D5D5D;
+      font-weight: 600;
+      padding: 0.285rem 0.571rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .app-header-left {
+        display: flex;
+        align-items: center;
+        div {
+          overflow-wrap: break-word;
+        }
+        .app-icon {
+          width: 0.857rem;
+          height: 0.857rem;
+          border-radius: 50%;
+          background-color: #737070;
+          margin-right: $CAP_SPACE_06;
+        }
+      }
+    }
+    .mobilepush-message {
+      padding-left: 1.65rem;
+    }
+    .mobilepush-image {
+      width: 100%;
+      height: 7.5rem;
+      margin-top: 0.625rem;
+    }
+    .mobilepush-image-padding {
+      padding-left: 1.65rem;
+    }
+    .scroll-container {
+      overflow-x: auto;
+      display: flex;
+      padding-top: $CAP_SPACE_06;
+      padding-right: $CAP_SPACE_06;
+      white-space: nowrap;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      height: 100%;
+      width: 100%;
+      margin-left: 1.65rem;
+      .whatsapp-carousel-container {
+        padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
+        border-radius: $CAP_SPACE_06;
+        background-color: $CAP_WHITE;
+        width: 80%;
+        flex-shrink: 0;
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+        .whatsapp-carousel-card {
+          margin: $CAP_SPACE_02;
+        }
+      }
+    }
+    .actions {
+      background-color: $CAP_WHITE;
+      height: auto;
+      padding: $CAP_SPACE_08;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: $CAP_SPACE_08;
+      .action {
+        font-weight: 600;
+        color: #1970DA;
+        height: 1.25rem;
+      }
+    }
+  }
+}
+
 .communication-flow-container {
   .step-divider {
     margin: $CAP_SPACE_32 0;
@@ -23,3 +140,40 @@
     padding: $CAP_SPACE_16 0 $CAP_SPACE_08;
   }
 }
+
+.communication-flow-card-empty {
+  width: 30rem;
+  border-color: $CAP_G12;
+
+  .empty-card-body-row {
+    height: 100%;
+  }
+
+  .empty-card-illustration-col {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .empty-card-action-col {
+    padding: 1.5rem 1rem;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.slide-box-wrapper {
+  .cap-slide-box-v2-container {
+    .slidebox-header,
+    .slidebox-content-container,
+    .slidebox-footer {
+      margin-bottom: 0;
+      padding: 0;
+      &.has-footer {
+        overflow-x: hidden;
+      }
+    }
+  }
+}