@capillarytech/creatives-library 9.0.56-alpha.3 → 9.0.56-alpha.4

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -13,14 +13,13 @@ 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 injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
-// import injectReducer from '../../utils/injectReducer';
+import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
+import capReducer from '../Cap/reducer';
 import { createCommDefinition, editCommDefinition } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
@@ -41,20 +40,18 @@ import {
   CCS_CHANNEL_DELIVERY_KEY_MAP,
   CCS_CHANNEL_NAME_MAP,
   CCS_CONTENT_TRANSFORMS,
+  REFERENCE_ID_EXISTS,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
 import './CommunicationFlow.scss';
 
-// 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,
-// });
+// Self-injects the same 'cap' reducer CreativesContainer already injects under this key
+// (see CreativesContainer/index.js's withCapReducer) — idempotent, so it's a no-op if the
+// consumer's own store already provides it. Guarantees makeSelectAuthenticated() below never
+// reads an undefined domain, regardless of whether a given consumer (e.g. coupons,
+// cartPromotions) wires up its own 'cap' slice.
+const withCapReducer = injectReducer({ key: 'cap', reducer: capReducer });
 
 const getDeliveryChannels = (contentItems) => {
   const channels = contentItems.map((item) => (item.channel || '').toUpperCase()).filter(Boolean);
@@ -68,7 +65,7 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
 };
 
 // createCommDefinition resolves with the CCS error envelope for 4xx/5xx responses (see api.js request()/checkStatus); duplicate referenceId within the org returns a 409.
-const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === 'REFERENCE_ID_EXISTS';
+const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === REFERENCE_ID_EXISTS;
 
 const CommunicationFlow = ({
   config,
@@ -293,9 +290,19 @@ const CommunicationFlow = ({
             <CapDivider />
           </CapRow>
         );
-      case STEPS.COMMUNICATION_STRATEGY:
+      case STEPS.COMMUNICATION_STRATEGY: {
+        // No visible divider line when there's no content yet (matches the empty-state
+        // design), but the vertical gap above the Channel card must stay either way —
+        // see the `.communication-strategy-row` spacing rule in CommunicationFlow.scss,
+        // which is not tied to whether the divider itself renders.
+        const templateStepFollows = enabledSteps.includes(STEPS.CHANNEL_SELECTION);
+        const hasContent = stepData.contentItems?.length > 0;
         return (
-          <CapRow useLegacy key={step}>
+          <CapRow
+            useLegacy
+            key={step}
+            className={(!templateStepFollows || hasContent) ? '' : 'communication-strategy-row--no-divider'}
+          >
             <CommunicationStrategyStep
               {...commonProps}
               value={stepData.communicationStrategy}
@@ -304,9 +311,10 @@ const CommunicationFlow = ({
               disabled={communicationStrategyData.disabled}
               onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
             />
-            <CapDivider />
+            {(!templateStepFollows || hasContent) && <CapDivider />}
           </CapRow>
         );
+      }
       case STEPS.CHANNEL_SELECTION:
         // Only show ChannelSelectionStep if communication strategy is selected
         if (!stepData.communicationStrategy) {
@@ -322,7 +330,6 @@ const CommunicationFlow = ({
               channelsToHide={contentTemplateData.channelsToHide}
               channelsToDisable={contentTemplateData.channelsToDisable}
               disablePreviewAndTest={!!contentTemplateData.disablePreviewAndTest}
-              autoOpenExistingContent={!!contentTemplateData.autoOpenExistingContent}
               creativesMode={config.mode || 'create'}
               selectedOfferDetails={stepData.selectedOfferDetails}
               incentivesData={{
@@ -376,7 +383,7 @@ const CommunicationFlow = ({
 
 CommunicationFlow.propTypes = {
   config: PropTypes.shape({
-    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona', 'coupons', 'cartPromotions']).isRequired,
     channel: PropTypes.string,
     mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
     channelsToHide: PropTypes.arrayOf(PropTypes.string),
@@ -411,7 +418,6 @@ CommunicationFlow.propTypes = {
         required: PropTypes.bool,
         channels: PropTypes.object,
         disablePreviewAndTest: PropTypes.bool,
-        autoOpenExistingContent: PropTypes.bool,
       }),
       enableIncentives: PropTypes.bool,
       enableDeliverySettings: PropTypes.bool,
@@ -444,8 +450,7 @@ const mapStateToProps = createStructuredSelector({
 const withConnect = connect(mapStateToProps);
 
 export default compose(
-  // withCouponsReducer, // cap-coupons flows disabled
-  // withCouponsSaga,   // cap-coupons flows disabled
+  withCapReducer,
   withConnect,
   injectIntl,
 )(CommunicationFlow);

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -128,15 +128,43 @@
 }
 
 .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 {
+  &__footer.ant-row-legacy {
+    position: absolute !important;
+    left: 0;
+    right: 0;
+    bottom: 0 !important;
     padding: 3.142rem 0 $CAP_SPACE_08;
   }
 }

package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js

@@ -1029,9 +1029,22 @@ describe('step dividers', () => {
         contentItems: [],
       },
     });
-    // Only CommunicationStrategyStep's divider renders — ChannelSelectionStep's own
-    // divider is conditional on content existing, to avoid a dangling line above an
-    // empty "Add creative" state.
+    // Neither divider renders — both CommunicationStrategyStep's and ChannelSelectionStep's
+    // own trailing dividers are conditional on content existing, to avoid a dangling line
+    // around an empty "Add creative" state.
+    expect(container.querySelectorAll('.ant-divider')).toHaveLength(0);
+  });
+
+  it('renders the divider after CommunicationStrategyStep unconditionally when no CHANNEL_SELECTION step follows', () => {
+    const { container } = renderWithFlow({
+      features: {
+        communicationStrategyData: { required: true, options: STRATEGY_OPTIONS },
+        // contentTemplateData.required omitted — no CHANNEL_SELECTION step in this flow.
+      },
+      initialData: {
+        communicationStrategy: SINGLE_TEMPLATE,
+      },
+    });
     expect(container.querySelectorAll('.ant-divider')).toHaveLength(1);
   });
 });

package/v2Containers/CommunicationFlow/constants.js

@@ -292,3 +292,5 @@ export const INCENTIVE_TYPES = [
     value: 'badges', label: <FormattedMessage {...messages.badges} />, isActive: false, disabled: false,
   },
 ];
+
+export const REFERENCE_ID_EXISTS = 'REFERENCE_ID_EXISTS';

package/v2Containers/CommunicationFlow/index.js

@@ -30,7 +30,7 @@ const CommunicationFlowContainer = ({
 
 CommunicationFlowContainer.propTypes = {
   config: PropTypes.shape({
-    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona', 'coupons', 'cartPromotions']).isRequired,
     channel: PropTypes.string, // optional if channel step is skipped
     mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
     channelsToHide: PropTypes.arrayOf(PropTypes.string),

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

@@ -4,9 +4,7 @@
  * Content template selection with channel dropdown
  */
 
-import React, {
-  useState, useCallback, useMemo, useEffect, useRef,
-} from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
@@ -48,7 +46,6 @@ const ChannelSelectionStep = ({
   channelsToHide = [],
   channelsToDisable = [],
   disablePreviewAndTest = false,
-  autoOpenExistingContent = false,
   creativesMode = 'create',
   selectedOfferDetails = [],
   incentivesData,
@@ -121,21 +118,6 @@ const ChannelSelectionStep = ({
     }
   }, [contentItems]);
 
-  // Editing an existing single-channel alert (e.g. CapNotify's rejected-alert edit page) should
-  // land straight in that channel's template editor, not the one-card content list — there's
-  // only ever one item under the SINGLE strategy, so the list is just an extra click. Runs once
-  // on mount only; the ref guard keeps a later content-item change (e.g. after closing/re-saving)
-  // from re-triggering the auto-open.
-  const hasAutoOpenedRef = useRef(false);
-  useEffect(() => {
-    if (hasAutoOpenedRef.current) return;
-    hasAutoOpenedRef.current = true;
-    if (autoOpenExistingContent && contentItems.length > 0) {
-      handleEditContent(contentItems[0].contentId);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const handleDeleteContent = useCallback((contentId) => {
     onChange({ contentItems: contentItems.filter((c) => c.contentId !== contentId) });
   }, [contentItems, onChange]);
@@ -437,7 +419,7 @@ const ChannelSelectionStep = ({
           )}
 
           {contentItems?.length === 0 ? (
-            <CapRow className="content-template-section">
+            <CapRow className={`content-template-section ${contentItems?.length === 0 ? 'no-content-items' : ''}`}>
               <CapDropdown
                 overlay={renderChannelDropdownOverlay() || <CapMenu />}
                 onVisibleChange={handleChannelsVisibleChange}
@@ -571,7 +553,6 @@ ChannelSelectionStep.propTypes = {
   channelsToHide: PropTypes.array,
   channelsToDisable: PropTypes.array,
   disablePreviewAndTest: PropTypes.bool,
-  autoOpenExistingContent: PropTypes.bool,
   creativesMode: PropTypes.oneOf(['create', 'edit', 'preview']),
   selectedOfferDetails: PropTypes.array,
   incentivesData: PropTypes.shape({
@@ -594,7 +575,6 @@ ChannelSelectionStep.defaultProps = {
   channelsToHide: [],
   channelsToDisable: [],
   disablePreviewAndTest: false,
-  autoOpenExistingContent: false,
   creativesMode: 'create',
   selectedOfferDetails: [],
   incentivesData: null,

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

@@ -130,6 +130,10 @@
     border-bottom: 1px solid $CAP_G07;
   }
 
+  .no-content-items {
+    border-bottom: none;
+  }
+
   .add-content-template-button {
     padding: $CAP_SPACE_12 $CAP_SPACE_16;
     align-self: center !important;

package/v2Containers/CreativesContainer/index.js

@@ -164,7 +164,6 @@ export class Creatives extends React.Component {
       isFullMode: props.isFullMode,
       useLocalTemplates,
     });
-
     this.state = {
       isLoadingContent: true,
       templateStep: 1, //modeSelection: for template name and (for email selecting upload or editor), and createTemplate to create template create based on modeSelection