@capillarytech/creatives-library 9.0.56-alpha.6 → 9.0.56-betaa.0

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -13,14 +13,14 @@ import { injectIntl } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
+// import { CouponsCapContainer } from '@capillarytech/cap-coupons'; // Commented - cap-coupons flows disabled
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import injectReducer from '../../utils/injectReducer';
+// import injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
+// import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
-import capReducer from '../Cap/reducer';
-import { createCommDefinition, editCommDefinition } from '../../services/api';
+import { createCentralCommsMetaId, getCentralCommsMetaIds } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -35,20 +35,23 @@ import {
   CHANNELS,
   INCENTIVE_TYPES,
   DYNAMIC_CONTROLS_CONFIG,
-  CCS_STRATEGY_TYPE_SINGLE,
-  CCS_CHANNEL_CONTENT_KEY_MAP,
-  CCS_CHANNEL_DELIVERY_KEY_MAP,
-  CCS_CHANNEL_NAME_MAP,
-  CCS_CONTENT_TRANSFORMS,
-  REFERENCE_ID_EXISTS,
+  CHANNEL_CONTENT_KEY_MAP,
+  CHANNEL_DELIVERY_KEY_MAP,
+  CAMPAIGNS,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
 import './CommunicationFlow.scss';
 
-// Self-injects the same 'cap' reducer CreativesContainer already injects under this key;
-// idempotent, so it's a no-op if the consumer's own store already provides it.
-const withCapReducer = injectReducer({ key: 'cap', reducer: capReducer });
+// Inject couponsCap reducer and saga - commented out (cap-coupons flows disabled)
+// const withCouponsReducer = injectReducer({
+//   key: 'couponsCap',
+//   reducer: CouponsCapContainer.couponsCapReducer,
+// });
+// const withCouponsSaga = injectSaga({
+//   key: 'couponsCapSaga',
+//   saga: CouponsCapContainer.couponsCapSaga,
+// });
 
 const getDeliveryChannels = (contentItems) => {
   const channels = contentItems.map((item) => (item.channel || '').toUpperCase()).filter(Boolean);
@@ -61,9 +64,6 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
   return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
 };
 
-// Duplicate referenceId within the org returns a 409 CCS error envelope.
-const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === REFERENCE_ID_EXISTS;
-
 const CommunicationFlow = ({
   config,
   initialData,
@@ -91,7 +91,6 @@ const CommunicationFlow = ({
     };
   });
   const [validationErrors, setValidationErrors] = useState({});
-  const [saveError, setSaveError] = useState(null);
 
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
@@ -151,111 +150,74 @@ const CommunicationFlow = ({
   }, []);
 
   const handleSave = useCallback(async () => {
-    setSaveError(null);
     const aggregatedData = getAggregatedData();
     const shouldUseCCS = config?.useCCS !== false;
-    let ccsCommDefinition = null;
 
     if (shouldUseCCS) {
-      const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(aggregatedData.communicationStrategy);
-      const contentItem = (aggregatedData.contentItems || [])[0];
-      // Consumer-supplied (e.g. CapNotify's Alert Name field) — CommunicationFlow has no name input of its own.
-      const name = config?.context?.name;
+      const ouId = config?.context?.ouId || -1;
+      const module = config?.context?.module
+        || (config?.consumer ? config.consumer.toUpperCase() : CAMPAIGNS);
 
-      // CCS create only supports SINGLE strategy; CHANNEL_PRIORITY/AB_TEST have no CCS equivalent yet.
-      if (!isMultiChannel && contentItem && name) {
-        const rawChannel = (contentItem.channel || '').toUpperCase();
-        const channel = CCS_CHANNEL_NAME_MAP[rawChannel] || rawChannel;
-        const contentKey = CCS_CHANNEL_CONTENT_KEY_MAP[channel];
-        const deliveryKey = CCS_CHANNEL_DELIVERY_KEY_MAP[channel];
-        const contentTransform = CCS_CONTENT_TRANSFORMS[channel];
-        const contentPayload = contentTransform ? contentTransform(contentItem.templateData) : contentItem.templateData;
-        const { dynamicControls = {} } = aggregatedData;
-        const channelSettings = aggregatedData.deliverySetting?.channelSetting?.[channel] || {};
-        // Optional fields — sent as '' rather than omitted when left blank.
-        const referenceId = config?.context?.referenceId || '';
-        const description = config?.context?.description || '';
+      const channelContentKeyMap = CHANNEL_CONTENT_KEY_MAP;
+      const channelDeliveryKeyMap = CHANNEL_DELIVERY_KEY_MAP;
 
-        const payload = {
-          referenceId,
-          name,
-          description,
-          strategyType: CCS_STRATEGY_TYPE_SINGLE,
-          settings: {
-            additionalSettings: {
-              useTinyUrl: dynamicControls.useTinyUrl ?? false,
-              encryptUrl: dynamicControls.sendToControlCustomers ?? false,
-              linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
-              userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
-            },
-            executionParams: {},
-          },
-          singleChannelStrategy: {
-            variant: {
-              channel,
-              // `channel` spread last so CCS's normalized enum overrides the UI's internal identifier.
-              ...(contentKey && { [contentKey]: { ...contentPayload, channel } }),
-              ...(deliveryKey && { [deliveryKey]: { channelSettings: { ...channelSettings, channel } } }),
-            },
-          },
-        };
+      const contentItems = aggregatedData.contentItems || [];
+      const { dynamicControls = {} } = aggregatedData;
 
-        // existingCommDefinitionId (set when editing, e.g. a rejected alert) creates a new
-        // DRAFT version on the same CommDefinition instead of a new one.
-        const { existingCommDefinitionId } = config?.context || {};
-        const {
-          referenceId: payloadReferenceId,
-          description: payloadDescription,
-          strategyType,
-          settings,
-          singleChannelStrategy,
-        } = payload;
+      const additionalSettings = {
+        useTinyUrl: dynamicControls.useTinyUrl ?? false,
+        encryptUrl: dynamicControls.sendToControlCustomers ?? false,
+        linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
+        userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
+      };
 
+      if (contentItems.length > 0) {
         try {
-          const res = existingCommDefinitionId
-            ? await editCommDefinition(existingCommDefinitionId, {
-              referenceId: payloadReferenceId,
-              description: payloadDescription,
-              strategyType,
-              settings,
-              singleChannelStrategy,
-            })
-            : await createCommDefinition(payload);
-          if (isDuplicateReferenceIdError(res)) {
-            setSaveError(formatMessage(messages.duplicateReferenceIdError));
-            return;
-          }
-          const data = res?.response?.data;
-          if (existingCommDefinitionId) {
-            if (data) {
-              ccsCommDefinition = {
-                id: existingCommDefinitionId,
-                referenceId: referenceId || data.referenceId,
-                version: data.version?.version ?? data.version ?? 1,
-                status: data.status,
+          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] || {}),
+                      },
+                    },
+                  }),
+                },
               };
-            }
-          } else if (data?.id) {
-            ccsCommDefinition = {
-              id: data.id,
-              referenceId: data.referenceId,
-              version: data.version?.version ?? 1,
-              status: data.status,
-            };
+              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 createCommDefinition error:', error);
+          console.error('[CommunicationFlow] CCS createCentralCommsMetaId error:', error);
         }
-      } else if (!name) {
-        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — config.context.name is required');
-      } else if (isMultiChannel) {
-        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — CHANNEL_PRIORITY/AB_TEST strategies are not supported by CCS create yet (SINGLE only)');
-      } else if (!contentItem) {
-        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — no content item found (contentItems is empty)');
       }
     }
 
-    onSave(ccsCommDefinition ? { ...aggregatedData, ccsCommDefinition } : aggregatedData);
+    onSave(aggregatedData);
   }, [getAggregatedData, config, onSave]);
 
   // Call onChange callback when stepData changes
@@ -290,17 +252,9 @@ const CommunicationFlow = ({
             <CapDivider />
           </CapRow>
         );
-      case STEPS.COMMUNICATION_STRATEGY: {
-        // No divider when there's no content yet, but the spacing above the Channel
-        // card must stay either way — see .communication-strategy-row in the scss.
-        const templateStepFollows = enabledSteps.includes(STEPS.CHANNEL_SELECTION);
-        const hasContent = stepData.contentItems?.length > 0;
+      case STEPS.COMMUNICATION_STRATEGY:
         return (
-          <CapRow
-            useLegacy
-            key={step}
-            className={(!templateStepFollows || hasContent) ? '' : 'communication-strategy-row--no-divider'}
-          >
+          <CapRow useLegacy key={step}>
             <CommunicationStrategyStep
               {...commonProps}
               value={stepData.communicationStrategy}
@@ -309,10 +263,9 @@ const CommunicationFlow = ({
               disabled={communicationStrategyData.disabled}
               onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
             />
-            {(!templateStepFollows || hasContent) && <CapDivider />}
+            <CapDivider />
           </CapRow>
         );
-      }
       case STEPS.CHANNEL_SELECTION:
         // Only show ChannelSelectionStep if communication strategy is selected
         if (!stepData.communicationStrategy) {
@@ -327,7 +280,6 @@ const CommunicationFlow = ({
               onChange={(data) => handleStepChange(step, data)}
               channelsToHide={contentTemplateData.channelsToHide}
               channelsToDisable={contentTemplateData.channelsToDisable}
-              disablePreviewAndTest={!!contentTemplateData.disablePreviewAndTest}
               creativesMode={config.mode || 'create'}
               selectedOfferDetails={stepData.selectedOfferDetails}
               incentivesData={{
@@ -338,7 +290,7 @@ const CommunicationFlow = ({
               config={config}
               capData={cap || capData}
             />
-            {stepData.contentItems?.length > 0 && <CapDivider />}
+            <CapDivider />
           </CapRow>
         );
       case STEPS.DYNAMIC_CONTROLS:
@@ -365,11 +317,6 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
-          {saveError && (
-            <CapLabel type="label2" className="communication-flow-container__save-error">
-              {saveError}
-            </CapLabel>
-          )}
           <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>
@@ -381,7 +328,7 @@ const CommunicationFlow = ({
 
 CommunicationFlow.propTypes = {
   config: PropTypes.shape({
-    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona', 'coupons', 'cartPromotions']).isRequired,
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
     channel: PropTypes.string,
     mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
     channelsToHide: PropTypes.arrayOf(PropTypes.string),
@@ -415,7 +362,6 @@ CommunicationFlow.propTypes = {
       contentTemplateData: PropTypes.shape({
         required: PropTypes.bool,
         channels: PropTypes.object,
-        disablePreviewAndTest: PropTypes.bool,
       }),
       enableIncentives: PropTypes.bool,
       enableDeliverySettings: PropTypes.bool,
@@ -448,7 +394,8 @@ const mapStateToProps = createStructuredSelector({
 const withConnect = connect(mapStateToProps);
 
 export default compose(
-  withCapReducer,
+  // withCouponsReducer, // cap-coupons flows disabled
+  // withCouponsSaga,   // cap-coupons flows disabled
   withConnect,
   injectIntl,
 )(CommunicationFlow);

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -128,44 +128,16 @@
 }
 
 .communication-flow-container {
-  // Anchors the Save footer to the bottom of the slidebox's scrollable content
-  // area regardless of how much step content is above it. <CapRow useLegacy>
-  // carries cap-ui-library's `.ant-row-legacy` rule (`display: block !important`),
-  // which silently defeats a plain `display:flex`/`min-height` here unless the
-  // selector is compounded with `.ant-row-legacy` and marked `!important` too.
-  // Deliberately position-based, not flex + margin-top: auto — a flex version
-  // makes this element (and its .ant-row-legacy children) a flex container, and
-  // flexbox's default align-items: stretch leaks into deeply nested descendants
-  // (e.g. ChannelSelectionStep's fixed-width empty-state card), stretching them
-  // to fill the container instead of keeping their own size.
-  &.ant-row-legacy {
-    position: relative !important;
-    min-height: calc(100vh - 6.571rem) !important;
-    padding-bottom: 6rem !important;
-  }
-
   .step-divider {
     margin: $CAP_SPACE_32 0;
   }
 
-  // CommunicationStrategyStep's own trailing divider is hidden until content
-  // exists (no dangling line above an empty "Add creative" state), but the gap
-  // it would have provided (.step-divider's margin) must stay — otherwise the
-  // section sits flush against the Channel card in the empty state.
-  .communication-strategy-row--no-divider {
-    margin-bottom: $CAP_SPACE_32;
-  }
-
   .heading-style {
     margin-bottom: $CAP_SPACE_08;
   }
 
-  &__footer.ant-row-legacy {
-    position: absolute !important;
-    left: 0;
-    right: 0;
-    bottom: 0 !important;
-    padding: 3.142rem 0 $CAP_SPACE_08;
+  &__footer {
+    padding: $CAP_SPACE_16 0 $CAP_SPACE_08;
   }
 }
 

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -19,7 +19,6 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
-import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CommunicationFlow from './index';
 import { CHANNELS, DEFAULT_COMMUNICATION_STRATEGY_OPTIONS, DYNAMIC_CONTROLS_CONFIG } from './constants';
 import {
@@ -42,7 +41,7 @@ const resolveValue = (val) => {
 
 const SENDER_ID_RESOLVERS = {
   [SMS]: (setting) => resolveValue(setting?.gsmSenderId),
-  [EMAIL]: (setting) => resolveValue(setting?.senderId),
+  [EMAIL]: (setting) => resolveValue(setting?.senderEmail),
   [VIBER]: (setting) => resolveValue(setting?.sender) || resolveValue(setting?.gsmSenderId),
   [WHATSAPP]: (setting) => resolveValue(setting?.senderMobNum),
   [RCS]: (setting) => resolveValue(setting?.senderMobNum) || resolveValue(setting?.rcsSender),
@@ -75,8 +74,6 @@ const CommunicationFlowCard = ({
   onChange,
   cap,
   intl,
-  disabled,
-  disabledTooltip,
 }) => {
   const { formatMessage } = intl || {};
   const [showSlideBox, setShowSlideBox] = useState(false);
@@ -94,9 +91,8 @@ const CommunicationFlowCard = ({
   }, [onCancel]);
 
   const handleOpen = useCallback(() => {
-    if (disabled) return;
     setShowSlideBox(true);
-  }, [disabled]);
+  }, []);
 
   const firstItem = savedData?.contentItems?.[0];
   const channelConfig = firstItem
@@ -111,9 +107,6 @@ const CommunicationFlowCard = ({
     const senderIdValue = getSenderIdValue(firstItem, savedData);
     const controls = config?.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG;
     const dynamicControlKeys = Object.keys(savedData?.dynamicControls || {});
-    // Consumers that set showDynamicControls: false render their own "Advanced
-    // controls" section elsewhere, so skip this card's redundant control list.
-    const showDynamicControls = config?.features?.showDynamicControls !== false;
     const channel = firstItem.channel?.toUpperCase();
     const senderLabel = [WHATSAPP, RCS].includes(channel)
       ? formatMessage(messages.senderNumberLabel)
@@ -127,11 +120,7 @@ const CommunicationFlowCard = ({
             <CapLabel type="label8">Message:</CapLabel>
             <CapLabel type="label2">{strategyLabel}</CapLabel>
             {messageTypeLabel && (
-              <CapLabel type="label1">
-(
-                {messageTypeLabel}
-)
-              </CapLabel>
+              <CapLabel type="label1">({messageTypeLabel})</CapLabel>
             )}
           </CapRow>
         )}
@@ -146,41 +135,33 @@ const CommunicationFlowCard = ({
         bodyStyle={{ padding: 0 }}
       >
         <CapRow gutter={0} className="card-body-row">
-          <CapColumn span={showDynamicControls ? 12 : 24} className="card-body-left-col">
+          <CapColumn span={12} className="card-body-left-col">
             <CapRow type="flex" align="middle" className="channel-header-row">
               <CapIcon type={channelConfig?.iconType || 'sms'} size="s" />
               <CapLabel type="label8">{channelConfig?.label || firstItem.channel}</CapLabel>
               {senderIdValue && (
-                <CapLabel type="label1">
-(
-                  {senderLabel}
-:
-                  {senderIdValue}
-)
-                </CapLabel>
+                <CapLabel type="label1">({senderLabel}: {senderIdValue})</CapLabel>
               )}
             </CapRow>
             {getContentBody(firstItem)}
           </CapColumn>
-          {showDynamicControls && (
-            <CapColumn span={12} className="card-body-right-col">
-              <CapLabel type="label8">{formatMessage(messages.dynamicControlsTitle)}</CapLabel>
-              {dynamicControlKeys.map((key) => {
-                const controlConfig = controls.find((c) => c.key === key);
-                if (!controlConfig) return null;
-                return (
-                  <CapRow key={key} type="flex" justify="space-between" className="control-row">
-                    <CapLabel type="label2">{controlConfig.label}</CapLabel>
-                    <CapLabel type="label2">
-                      {savedData.dynamicControls[key]
-                        ? formatMessage(messages.yes)
-                        : formatMessage(messages.no)}
-                    </CapLabel>
-                  </CapRow>
-                );
-              })}
-            </CapColumn>
-          )}
+          <CapColumn span={12} className="card-body-right-col">
+            <CapLabel type="label8">{formatMessage(messages.dynamicControlsTitle)}</CapLabel>
+            {dynamicControlKeys.map((key) => {
+              const controlConfig = controls.find((c) => c.key === key);
+              if (!controlConfig) return null;
+              return (
+                <CapRow key={key} type="flex" justify="space-between" className="control-row">
+                  <CapLabel type="label2">{controlConfig.label}</CapLabel>
+                  <CapLabel type="label2">
+                    {savedData.dynamicControls[key]
+                      ? formatMessage(messages.yes)
+                      : formatMessage(messages.no)}
+                  </CapLabel>
+                </CapRow>
+              );
+            })}
+          </CapColumn>
         </CapRow>
       </CapCard>
     );
@@ -201,17 +182,9 @@ const CommunicationFlowCard = ({
               <CapImage src={addCreativesIllustration} />
             </CapColumn>
             <CapColumn span={14} className="empty-card-action-col">
-              {disabled && disabledTooltip ? (
-                <CapTooltip title={disabledTooltip}>
-                  <CapButton type="secondary" disabled>
-                    {formatMessage(messages.addCreatives)}
-                  </CapButton>
-                </CapTooltip>
-              ) : (
-                <CapButton type="secondary" onClick={handleOpen} disabled={disabled}>
-                  {formatMessage(messages.addCreatives)}
-                </CapButton>
-              )}
+              <CapButton type="secondary" onClick={handleOpen}>
+                {formatMessage(messages.addCreatives)}
+              </CapButton>
             </CapColumn>
           </CapRow>
         </CapCard>
@@ -223,10 +196,10 @@ const CommunicationFlowCard = ({
         <CapSlideBox
           show={showSlideBox}
           handleClose={handleClose}
-          size="size-l"
+          size="size-xl"
           header={(
             <CapHeader
-              title={formatMessage(messages.addContent)}
+              title={formatMessage(messages.addMessage)}
               handleClose={handleClose}
             />
           )}
@@ -254,8 +227,6 @@ CommunicationFlowCard.propTypes = {
   onChange: PropTypes.func,
   cap: PropTypes.object,
   intl: PropTypes.object.isRequired,
-  disabled: PropTypes.bool, // Disables the "Add creatives" trigger (e.g. until a consumer-required field is filled)
-  disabledTooltip: PropTypes.node, // Shown on hover when disabled is true
 };
 
 CommunicationFlowCard.defaultProps = {
@@ -264,8 +235,6 @@ CommunicationFlowCard.defaultProps = {
   onCancel: null,
   onChange: null,
   cap: null,
-  disabled: false,
-  disabledTooltip: null,
 };
 
 export default injectIntl(CommunicationFlowCard);