@capillarytech/creatives-library 9.0.55-alpha.2 → 9.0.55-alpha.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.55-alpha.2",
+  "version": "9.0.55-alpha.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -137,7 +137,7 @@
   }
 
   &__footer {
-    padding: 4.142rem 0 $CAP_SPACE_08;
+    padding: 3.142rem 0 $CAP_SPACE_08;
   }
 }
 

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -111,6 +111,11 @@ const CommunicationFlowCard = ({
     const senderIdValue = getSenderIdValue(firstItem, savedData);
     const controls = config?.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG;
     const dynamicControlKeys = Object.keys(savedData?.dynamicControls || {});
+    // Mirrors getEnabledSteps.js's own gate on this flag (which skips the in-slidebox
+    // DynamicControlsStep) — consumers like CapNotify that set showDynamicControls:
+    // false render their own "Advanced controls" section elsewhere, so this summary
+    // card's right column would otherwise show a redundant, always-empty control list.
+    const showDynamicControls = config?.features?.showDynamicControls !== false;
     const channel = firstItem.channel?.toUpperCase();
     const senderLabel = [WHATSAPP, RCS].includes(channel)
       ? formatMessage(messages.senderNumberLabel)
@@ -124,7 +129,11 @@ const CommunicationFlowCard = ({
             <CapLabel type="label8">Message:</CapLabel>
             <CapLabel type="label2">{strategyLabel}</CapLabel>
             {messageTypeLabel && (
-              <CapLabel type="label1">({messageTypeLabel})</CapLabel>
+              <CapLabel type="label1">
+(
+                {messageTypeLabel}
+)
+              </CapLabel>
             )}
           </CapRow>
         )}
@@ -139,33 +148,41 @@ const CommunicationFlowCard = ({
         bodyStyle={{ padding: 0 }}
       >
         <CapRow gutter={0} className="card-body-row">
-          <CapColumn span={12} className="card-body-left-col">
+          <CapColumn span={showDynamicControls ? 12 : 24} 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>
-          <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>
+          {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>
+          )}
         </CapRow>
       </CapCard>
     );
@@ -211,7 +228,7 @@ const CommunicationFlowCard = ({
           size="size-l"
           header={(
             <CapHeader
-              title={formatMessage(messages.addMessage)}
+              title={formatMessage(messages.addContent)}
               handleClose={handleClose}
             />
           )}

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

@@ -1000,3 +1000,22 @@ describe('optional chaining safety', () => {
     expect(screen.getByRole('button', { name: /^save$/i })).toBeDisabled();
   });
 });
+
+describe('step dividers', () => {
+  it('renders exactly one divider when the strategy and channel-selection steps render together', () => {
+    const { container } = renderWithFlow({
+      features: {
+        communicationStrategyData: { required: true, options: STRATEGY_OPTIONS },
+        contentTemplateData: { required: true, channels: CHANNELS },
+      },
+      initialData: {
+        communicationStrategy: SINGLE_TEMPLATE,
+        contentItems: [{ channel: 'SMS', templateData: {} }],
+      },
+    });
+    // Only ChannelSelectionStep's own divider (after the content-preview card) should
+    // render — CommunicationStrategyStep no longer emits one of its own, otherwise two
+    // dividers would stack back-to-back with nothing between them.
+    expect(container.querySelectorAll('.ant-divider')).toHaveLength(1);
+  });
+});

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

@@ -202,6 +202,26 @@ describe('CommunicationFlowCard', () => {
       renderCard({ initialData: makeSavedData() });
       expect(screen.getByText('Other controls')).toBeInTheDocument();
     });
+
+    it('hides the Other controls column when config.features.showDynamicControls is false', () => {
+      renderCard({
+        config: { ...baseConfig, features: { showDynamicControls: false } },
+        initialData: makeSavedData({
+          dynamicControls: {
+            sendToControlCustomers: false, sendToBrandPocs: false, useTinyUrl: false, overrideDailyLimit: false,
+          },
+        }),
+      });
+      expect(screen.queryByText('Other controls')).not.toBeInTheDocument();
+    });
+
+    it('still shows the Other controls column when showDynamicControls is unset (Engagement Module default)', () => {
+      renderCard({
+        config: { ...baseConfig, features: {} },
+        initialData: makeSavedData(),
+      });
+      expect(screen.getByText('Other controls')).toBeInTheDocument();
+    });
   });
 
   describe('channel config resolution', () => {

package/v2Containers/CommunicationFlow/messages.js

@@ -64,9 +64,9 @@ export default {
   },
 
   // Slidebox header
-  addMessage: {
-    id: `${prefix}.addMessage`,
-    defaultMessage: 'Add message',
+  addContent: {
+    id: `${prefix}.addContent`,
+    defaultMessage: 'Add content',
   },
 
   // Step prompts

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

@@ -407,10 +407,6 @@ const ChannelSelectionStep = ({
   return (
     <>
       <CapRow className="channel-selection-step">
-        <CapHeading type="h3" className="margin-b-8">
-          {formatMessage(messages.contentTemplate)}
-        </CapHeading>
-
         <CapRow
           useLegacy
           className={`content-template-container ${contentItems?.length > 0 ? 'content-template-container--has-content' : ''}`}