@capillarytech/creatives-library 9.0.13 → 9.0.14

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;
+      }
+    }
+  }
+}

package/v2Containers/CommunicationFlow/CommunicationFlowCard.js

@@ -0,0 +1,240 @@
+/**
+ * CommunicationFlowCard
+ *
+ * Card-based entry point for CommunicationFlow.
+ * - Empty state: shows an "Add" button that opens CommunicationFlow in a CapSlideBox (create mode)
+ * - Configured state: shows a two-column CapCard with pen icon, channel preview (left), dynamic controls (right)
+ */
+
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { CAP_G09 } from '@capillarytech/cap-ui-library/styled/variables';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapCard from '@capillarytech/cap-ui-library/CapCard';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+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 CommunicationFlow from './index';
+import { CHANNELS, DEFAULT_COMMUNICATION_STRATEGY_OPTIONS, DYNAMIC_CONTROLS_CONFIG } from './constants';
+import {
+  VIBER, SMS, EMAIL, WHATSAPP, RCS, ZALO,
+} from '../CreativesContainer/constants';
+import getContentBody from './utils/getContentBody';
+import messages from './messages';
+import addCreativesIllustration from '../Assets/images/addCreativesIllustration.svg';
+import './CommunicationFlow.scss';
+
+const resolveValue = (val) => {
+  if (val == null || val === '') return null;
+  if (Array.isArray(val)) return resolveValue(val[0]);
+  if (typeof val === 'object') {
+    const inner = val.value ?? val.label;
+    return inner != null ? resolveValue(inner) : null;
+  }
+  return String(val) || null;
+};
+
+const SENDER_ID_RESOLVERS = {
+  [SMS]: (setting) => resolveValue(setting?.gsmSenderId),
+  [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),
+  [ZALO]: (setting) => resolveValue(setting?.zaloSenderId),
+};
+
+const getSenderIdValue = (item, savedData) => {
+  const channel = item?.channel?.toUpperCase();
+  const channelSetting = savedData?.deliverySetting?.channelSetting?.[channel] || {};
+  return SENDER_ID_RESOLVERS[channel]?.(channelSetting) ?? null;
+};
+
+const getStrategyLabel = (config, strategyValue) => {
+  const options = config?.features?.communicationStrategyData?.options || DEFAULT_COMMUNICATION_STRATEGY_OPTIONS;
+  const match = options.find((option) => option.value === strategyValue);
+  return match?.label || strategyValue || '';
+};
+
+const getMessageTypeLabel = (config, messageTypeValue) => {
+  const options = config?.features?.messageTypeData?.options || [];
+  const match = options.find((option) => option.value === messageTypeValue);
+  return match?.label || messageTypeValue || null;
+};
+
+const CommunicationFlowCard = ({
+  config,
+  initialData,
+  onSave,
+  onCancel,
+  onChange,
+  cap,
+  intl,
+}) => {
+  const { formatMessage } = intl || {};
+  const [showSlideBox, setShowSlideBox] = useState(false);
+  const [savedData, setSavedData] = useState(initialData || null);
+
+  const handleSave = useCallback((data) => {
+    setSavedData(data);
+    setShowSlideBox(false);
+    onSave?.(data);
+  }, [onSave]);
+
+  const handleClose = useCallback(() => {
+    setShowSlideBox(false);
+    onCancel?.();
+  }, [onCancel]);
+
+  const handleOpen = useCallback(() => {
+    setShowSlideBox(true);
+  }, []);
+
+  const firstItem = savedData?.contentItems?.[0];
+  const channelConfig = firstItem
+    ? CHANNELS.find((c) => c.value === firstItem.channel || c.channelProp === firstItem.channel?.toLowerCase())
+    : null;
+
+  const renderSummaryCard = () => {
+    if (!firstItem) return null;
+
+    const strategyLabel = getStrategyLabel(config, savedData?.communicationStrategy);
+    const messageTypeLabel = getMessageTypeLabel(config, savedData?.messageType);
+    const senderIdValue = getSenderIdValue(firstItem, savedData);
+    const controls = config?.features?.dynamicControlsData?.controls || DYNAMIC_CONTROLS_CONFIG;
+    const dynamicControlKeys = Object.keys(savedData?.dynamicControls || {});
+    const channel = firstItem.channel?.toUpperCase();
+    const senderLabel = [WHATSAPP, RCS].includes(channel)
+      ? formatMessage(messages.senderNumberLabel)
+      : formatMessage(messages.senderIdLabel);
+
+    return (
+      <CapCard
+        className="communication-flow-summary-card"
+        title={(
+          <CapRow type="flex" align="middle" className="summary-card-title-row">
+            <CapLabel type="label8">Message:</CapLabel>
+            <CapLabel type="label2">{strategyLabel}</CapLabel>
+            {messageTypeLabel && (
+              <CapLabel type="label1">({messageTypeLabel})</CapLabel>
+            )}
+          </CapRow>
+        )}
+        extra={(
+          <CapIcon
+            type="edit"
+            onClick={handleOpen}
+            style={{ cursor: 'pointer' }}
+          />
+        )}
+        headStyle={{ background: CAP_G09, width: '100%' }}
+        bodyStyle={{ padding: 0 }}
+      >
+        <CapRow gutter={0} className="card-body-row">
+          <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>
+              )}
+            </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>
+        </CapRow>
+      </CapCard>
+    );
+  };
+
+  const flowMode = savedData ? 'edit' : 'create';
+  const flowConfig = { ...config, mode: flowMode };
+
+  return (
+    <>
+      {!firstItem ? (
+        <CapCard
+          className="communication-flow-card-empty"
+          bodyStyle={{ padding: 0, height: 152 }}
+        >
+          <CapRow type="flex" align="middle" gutter={0} className="empty-card-body-row">
+            <CapColumn span={10} className="empty-card-illustration-col">
+              <CapImage src={addCreativesIllustration} />
+            </CapColumn>
+            <CapColumn span={14} className="empty-card-action-col">
+              <CapButton type="secondary" onClick={handleOpen}>
+                {formatMessage(messages.addCreatives)}
+              </CapButton>
+            </CapColumn>
+          </CapRow>
+        </CapCard>
+      ) : (
+        renderSummaryCard()
+      )}
+
+      <CapRow className="slide-box-wrapper">
+        <CapSlideBox
+          show={showSlideBox}
+          handleClose={handleClose}
+          size="size-xl"
+          header={(
+            <CapHeader
+              title={formatMessage(messages.addMessage)}
+              handleClose={handleClose}
+            />
+          )}
+          content={(
+            <CommunicationFlow
+              config={flowConfig}
+              initialData={savedData}
+              onSave={handleSave}
+              onCancel={handleClose}
+              onChange={onChange}
+              cap={cap}
+            />
+          )}
+        />
+      </CapRow>
+    </>
+  );
+};
+
+CommunicationFlowCard.propTypes = {
+  config: PropTypes.object.isRequired,
+  initialData: PropTypes.object,
+  onSave: PropTypes.func,
+  onCancel: PropTypes.func,
+  onChange: PropTypes.func,
+  cap: PropTypes.object,
+  intl: PropTypes.object.isRequired,
+};
+
+CommunicationFlowCard.defaultProps = {
+  initialData: null,
+  onSave: null,
+  onCancel: null,
+  onChange: null,
+  cap: null,
+};
+
+export default injectIntl(CommunicationFlowCard);

package/v2Containers/CommunicationFlow/DemoPage.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CommunicationFlowCard } from './index';
+
+const CommunicationFlowDemoPage = () => {
+  const config = {
+    consumer: 'PROGRAM',
+    mode: 'create',
+    useCCS: true,
+    features: {
+      messageTypeData: {
+        required: false,
+      },
+      communicationStrategyData: {
+        required: true,
+        disabled: false,
+      },
+      contentTemplateData: {
+        required: true,
+        channelsToHide: [],
+        channelsToDisable: [],
+      },
+      incentivesData: {
+        required: false,
+      },
+      deliverySettingsData: {
+        required: false,
+        deliverySettings: [{}],
+      },
+      showDynamicControls: true,
+    },
+    context: {
+      orgUnitId: '1231',
+      campaignId: '456789',
+    },
+  };
+
+  const handleSave = (data) => {
+    // eslint-disable-next-line no-console
+    console.log('Save called with data:', data);
+  };
+
+  return (
+    <CommunicationFlowCard config={config} onSave={handleSave} />
+  );
+};
+
+export default CommunicationFlowDemoPage;