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

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -6,7 +6,7 @@
  * - Configured state: shows a two-column CapCard with pen icon, channel preview (left), dynamic controls (right)
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import { CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -19,6 +19,7 @@ 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 {
@@ -41,7 +42,7 @@ const resolveValue = (val) => {
 
 const SENDER_ID_RESOLVERS = {
   [SMS]: (setting) => resolveValue(setting?.gsmSenderId),
-  [EMAIL]: (setting) => resolveValue(setting?.senderEmail),
+  [EMAIL]: (setting) => resolveValue(setting?.senderId),
   [VIBER]: (setting) => resolveValue(setting?.sender) || resolveValue(setting?.gsmSenderId),
   [WHATSAPP]: (setting) => resolveValue(setting?.senderMobNum),
   [RCS]: (setting) => resolveValue(setting?.senderMobNum) || resolveValue(setting?.rcsSender),
@@ -74,11 +75,21 @@ const CommunicationFlowCard = ({
   onChange,
   cap,
   intl,
+  disabled,
+  disabledTooltip,
 }) => {
   const { formatMessage } = intl || {};
   const [showSlideBox, setShowSlideBox] = useState(false);
   const [savedData, setSavedData] = useState(initialData || null);
 
+  // On a hard reload of an edit page, initialData is available but savedData is not yet set.
+  // This effect ensures that savedData is initialized from initialData in that case.
+  useEffect(() => {
+    if (initialData && !savedData) {
+      setSavedData(initialData);
+    }
+  }, [initialData]);
+
   const handleSave = useCallback((data) => {
     setSavedData(data);
     setShowSlideBox(false);
@@ -91,8 +102,9 @@ const CommunicationFlowCard = ({
   }, [onCancel]);
 
   const handleOpen = useCallback(() => {
+    if (disabled) return;
     setShowSlideBox(true);
-  }, []);
+  }, [disabled]);
 
   const firstItem = savedData?.contentItems?.[0];
   const channelConfig = firstItem
@@ -107,6 +119,9 @@ 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)
@@ -120,7 +135,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>
         )}
@@ -135,33 +154,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((control) => control.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>
     );
@@ -182,9 +209,17 @@ const CommunicationFlowCard = ({
               <CapImage src={addCreativesIllustration} />
             </CapColumn>
             <CapColumn span={14} className="empty-card-action-col">
-              <CapButton type="secondary" onClick={handleOpen}>
-                {formatMessage(messages.addCreatives)}
-              </CapButton>
+              {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>
+              )}
             </CapColumn>
           </CapRow>
         </CapCard>
@@ -196,10 +231,10 @@ const CommunicationFlowCard = ({
         <CapSlideBox
           show={showSlideBox}
           handleClose={handleClose}
-          size="size-xl"
+          size="size-l"
           header={(
             <CapHeader
-              title={formatMessage(messages.addMessage)}
+              title={formatMessage(messages.addContent)}
               handleClose={handleClose}
             />
           )}
@@ -227,6 +262,8 @@ 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 = {
@@ -235,6 +272,8 @@ CommunicationFlowCard.defaultProps = {
   onCancel: null,
   onChange: null,
   cap: null,
+  disabled: false,
+  disabledTooltip: null,
 };
 
 export default injectIntl(CommunicationFlowCard);