@capillarytech/creatives-library 8.0.318 → 8.0.320

package/v2Components/SmsFallback/useLocalTemplateList.js

@@ -0,0 +1,92 @@
+import { useState, useCallback, useRef } from 'react';
+
+/**
+ * @param {Object} options
+ * @param {(params: { page: number, search: string, reset: boolean }) => Promise<{ templates: Array, totalCount: number }>} options.fetchTemplates
+ * @param {number} [options.perPage=25]
+ */
+export function useLocalTemplateList({ fetchTemplates, perPage = 25 }) {
+  const [listData, setListData] = useState({ templates: [], totalCount: 0 });
+  const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [search, setSearchState] = useState('');
+  const searchRef = useRef('');
+  /** Drops stale responses when a newer fetch starts (search / reset while a request is in flight). */
+  const fetchGenerationRef = useRef(0);
+  const setSearch = useCallback((value) => {
+    const term = typeof value === 'string' ? value : '';
+    searchRef.current = term;
+    setSearchState(term);
+  }, []);
+  const lastFetchFullPageRef = useRef(false);
+
+  const { templates = [], totalCount = 0 } = listData ?? {};
+  const hasKnownTotal = (totalCount ?? 0) > 0;
+  const hasMoreByTotal = (totalCount ?? 0) > (templates?.length ?? 0);
+  const hasMoreByFullPage =
+    !hasKnownTotal && lastFetchFullPageRef.current && (templates?.length ?? 0) > 0;
+  const canLoadMore = (hasMoreByTotal || hasMoreByFullPage) && !loading;
+
+  const runFetch = useCallback(
+    async ({ page: p = 1, reset = true, search: searchTerm } = {}) => {
+      const term = searchTerm !== undefined ? searchTerm : searchRef.current;
+      const gen = ++fetchGenerationRef.current;
+      setLoading(true);
+      try {
+        const result = await fetchTemplates({ page: p, search: term, reset });
+        if (gen !== fetchGenerationRef.current) {
+          return;
+        }
+        const nextTemplates = result?.templates ?? [];
+        const nextTotalCount = result?.totalCount ?? 0;
+        lastFetchFullPageRef.current = nextTemplates.length >= perPage;
+        setListData((prev) => ({
+          templates: reset ? nextTemplates : [...(prev.templates || []), ...nextTemplates],
+          totalCount: nextTotalCount > 0 ? nextTotalCount : (reset ? 0 : prev.totalCount),
+        }));
+        setPage(p);
+      } catch (e) {
+        if (gen !== fetchGenerationRef.current) {
+          return;
+        }
+        lastFetchFullPageRef.current = false;
+        if (reset) {
+          setListData({ templates: [], totalCount: 0 });
+          setPage(1);
+        }
+      } finally {
+        if (gen === fetchGenerationRef.current) {
+          setLoading(false);
+        }
+      }
+    },
+    [fetchTemplates, perPage]
+  );
+
+  const loadMore = useCallback(() => {
+    if (!canLoadMore) return;
+    runFetch({ page: page + 1, reset: false, search: searchRef.current });
+  }, [canLoadMore, page, runFetch]);
+
+  const reset = useCallback(
+    (searchTerm) => {
+      const term = searchTerm !== undefined ? searchTerm : searchRef.current;
+      setSearch(term);
+      lastFetchFullPageRef.current = false;
+      runFetch({ page: 1, reset: true, search: term });
+    },
+    [runFetch, setSearch]
+  );
+
+  return {
+    templates,
+    totalCount,
+    loading,
+    page,
+    search,
+    setSearch,
+    loadMore,
+    reset,
+    canLoadMore,
+  };
+}

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -18,7 +18,7 @@ import injectReducer from '../../utils/injectReducer';
 import injectSaga from '../../utils/injectSaga';
 
 import CommonTestAndPreview from '../CommonTestAndPreview';
-import { CHANNELS } from '../CommonTestAndPreview/constants';
+import { CHANNELS, RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../CommonTestAndPreview/constants';
 import * as commonTestAndPreviewActions from '../CommonTestAndPreview/actions';
 import { commonTestAndPreviewSaga } from '../CommonTestAndPreview/sagas';
 import commonTestAndPreviewReducer from '../CommonTestAndPreview/reducer';
@@ -78,6 +78,12 @@ TestAndPreviewSlidebox.propTypes = {
   content: PropTypes.string,
   beeInstance: PropTypes.object,
   currentTab: PropTypes.number,
+  smsFallbackContent: PropTypes.shape({
+    templateContent: PropTypes.string,
+    senderId: PropTypes.string,
+    templateName: PropTypes.string,
+    [RCS_SMS_FALLBACK_VAR_MAPPED_PROP]: PropTypes.object,
+  }),
   // Redux props are passed through
   actions: PropTypes.object.isRequired,
   extractedTags: PropTypes.array.isRequired,
@@ -113,6 +119,7 @@ TestAndPreviewSlidebox.defaultProps = {
   wecrmAccounts: [],
   isLoadingSenderDetails: false,
   orgUnitId: -1,
+  smsFallbackContent: null,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Components/TestAndPreviewSlidebox/sagas.js

@@ -34,6 +34,7 @@ import {
   GET_PREFILLED_VALUES_SUCCESS,
   GET_PREFILLED_VALUES_FAILURE,
 } from './constants';
+import { extractPreviewFromLiquidResponse } from '../CommonTestAndPreview/previewApiUtils';
 
 // Search Customers Saga
 export function* searchCustomersSaga(action) {
@@ -80,11 +81,12 @@ export function* updatePreviewSaga(action) {
     const customValues = action.payload.resolvedTags;
 
     const response = yield call(Api.updateEmailPreview, action.payload);
-    if (response?.data) {
+    const previewPayload = extractPreviewFromLiquidResponse(response);
+    if (previewPayload) {
       yield put({
         type: UPDATE_PREVIEW_SUCCESS,
         payload: {
-          previewData: response.data,
+          previewData: previewPayload,
           customValues, // Pass custom values to be preserved
         },
       });
@@ -221,8 +223,13 @@ export function* createMessageMetaSaga(action) {
 export function* getPrefilledValuesSaga(action) {
   try {
     const response = yield call(Api.updateEmailPreview, action.payload);
-    if (response?.data) {
-      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: response?.data?.resolvedTagValues } });
+    const body =
+      response?.data !== undefined && response?.data !== null
+        ? response.data
+        : response;
+    const resolvedTagValues = body?.resolvedTagValues;
+    if (resolvedTagValues != null) {
+      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: resolvedTagValues } });
     } else {
       yield put({ type: GET_PREFILLED_VALUES_FAILURE, payload: { error: response.error || 'Failed to fetch prefilled values' } });
     }

package/v2Components/TestAndPreviewSlidebox/tests/saga.test.js

@@ -136,7 +136,9 @@ describe('TestAndPreviewSlidebox Sagas', () => {
   describe('updatePreviewSaga', () => {
     it('should handle successful preview update', () => {
       const mockResponse = {
-        data: 'Test Preview Data',
+        data: {
+          resolvedBody: 'Test Preview Data',
+        },
       };
       const customValues = { test: 'value' };
       return expectSaga(sagas.updatePreviewSaga, {

package/v2Components/VarSegmentMessageEditor/constants.js

@@ -0,0 +1,2 @@
+/** Default prefix before variable name in variable-slot placeholders. */
+export const VAR_SEGMENT_PLACEHOLDER_PREFIX = 'enter the value for ';

package/v2Components/VarSegmentMessageEditor/index.js

@@ -0,0 +1,125 @@
+/**
+ * Shared message editor that renders template text with {{var}} and/or DLT `{#var#}` segments as
+ * variable inputs and static text as headings.
+ * Reused by RCS (title/description), SmsTrai Edit (SMS fallback), and WhatsApp (edit message/header).
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import {
+  splitTemplateVarString,
+  DEFAULT_MUSTACHE_VAR_REGEX,
+  isAnyTemplateVarToken,
+} from '../../utils/templateVarUtils';
+
+import './index.scss';
+import { VAR_SEGMENT_PLACEHOLDER_PREFIX } from './constants';
+
+const { TextArea } = CapInput;
+
+export function VarSegmentMessageEditor({
+  templateString = '',
+  valueMap = {},
+  onChange,
+  onFocus,
+  placeholderPrefix = VAR_SEGMENT_PLACEHOLDER_PREFIX,
+  getPlaceholder,
+  wrapperClassName = 'rcs_text_area_wrapper',
+  rowClassName = 'rcs-edit-template-message-input',
+  headingClassName = 'rcs-edit-template-message-split',
+  varRegex,
+  readOnly = false,
+  disabled = false,
+  footerContent,
+  renderVarFooter,
+}) {
+  const segments = splitTemplateVarString(templateString, varRegex || DEFAULT_MUSTACHE_VAR_REGEX);
+  if (!segments?.length) return null;
+
+  return (
+    <div className={wrapperClassName}>
+      <CapRow className={rowClassName}>
+        {segments.map((segmentToken, segmentIndex) => {
+          const isVar =
+            typeof segmentToken === 'string' && isAnyTemplateVarToken(segmentToken);
+          if (isVar) {
+            const varSegmentFieldId = `${segmentToken}_${segmentIndex}`;
+            const slotValueFromMap = valueMap?.[varSegmentFieldId];
+            // Missing key: show empty (not the raw {{…}} token) so cleared slots and incomplete maps
+            // cannot resurrect the token; placeholder still guides the user.
+            const value =
+              slotValueFromMap !== undefined && slotValueFromMap !== null ? slotValueFromMap : '';
+            if (readOnly) {
+              return (
+                <CapHeading
+                  key={varSegmentFieldId}
+                  type="h4"
+                  className={`${headingClassName} var-segment-message-editor__read-only-value`.trim()}
+                >
+                  {value}
+                </CapHeading>
+              );
+            }
+            const fromGet = getPlaceholder && getPlaceholder(segmentToken, segmentIndex);
+            const placeholder =
+              fromGet !== undefined && fromGet !== null && fromGet !== ''
+                ? fromGet
+                : `${placeholderPrefix}${segmentToken}`;
+            return (
+              <div key={varSegmentFieldId} className="var-segment-message-editor__var-slot">
+                <TextArea
+                  id={varSegmentFieldId}
+                  placeholder={placeholder}
+                  autosize={{ minRows: 1, maxRows: 3 }}
+                  value={value}
+                  onFocus={() => onFocus && onFocus(varSegmentFieldId)}
+                  onChange={(e) =>
+                    onChange && onChange(varSegmentFieldId, e?.target?.value ?? '')}
+                  disabled={disabled}
+                />
+                {renderVarFooter
+                  ? renderVarFooter(segmentToken, segmentIndex, varSegmentFieldId)
+                  : null}
+              </div>
+            );
+          }
+          if (segmentToken) {
+            return (
+              <CapHeading
+                key={`static_${segmentIndex}_${segmentToken}`}
+                type="h4"
+                className={headingClassName}
+              >
+                {segmentToken}
+              </CapHeading>
+            );
+          }
+          return null;
+        })}
+      </CapRow>
+      {footerContent}
+    </div>
+  );
+}
+
+VarSegmentMessageEditor.propTypes = {
+  templateString: PropTypes.string,
+  valueMap: PropTypes.object,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  placeholderPrefix: PropTypes.string,
+  getPlaceholder: PropTypes.func,
+  wrapperClassName: PropTypes.string,
+  rowClassName: PropTypes.string,
+  headingClassName: PropTypes.string,
+  varRegex: PropTypes.object,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  footerContent: PropTypes.node,
+  /** Optional hint below a variable field (e.g. DLT `{#var#}` max length). */
+  renderVarFooter: PropTypes.func,
+};
+
+export default VarSegmentMessageEditor;

package/v2Components/VarSegmentMessageEditor/index.scss

@@ -0,0 +1,46 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
+/* Same look as RCS edit message block: background, spacing, text color */
+.rcs_text_area_wrapper {
+  .rcs-edit-template-message-input {
+    background-color: $CAP_G10;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16 $CAP_SPACE_16;
+  }
+
+  .rcs-edit-template-message-split {
+    margin: 0 0 $CAP_SPACE_04 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: $FONT_COLOR_04;
+    font-weight: 500;
+  }
+
+  /* Variable chips: match RCS edit (white field, light border, 4px radius) */
+  .rcs-edit-template-message-input .ant-input,
+  .rcs-edit-template-message-input textarea.ant-input {
+    margin: 0 0 0.125rem 0;
+    border-radius: 0.25rem;
+    border: 0.0625rem solid $CAP_G07;
+    background-color: $CAP_WHITE;
+    overflow: hidden;
+  }
+
+  /* Small gap between tag border and the next line (static text) */
+  .rcs-edit-template-message-input :not(:first-child) {
+    margin-top: $CAP_SPACE_08;
+  }
+
+  .rcs-edit-template-message-input > *:last-child {
+    margin-bottom: 0;
+  }
+
+  .var-segment-message-editor__var-slot {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+.var-segment-message-editor__read-only-value {
+  margin: 0;
+}

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -0,0 +1,291 @@
+/**
+ * CommunicationFlow - Orchestrator Component
+ *
+ * Manages the step flow, validation, and data aggregation.
+ * Renders steps based on config and calls callbacks with aggregated data.
+ */
+
+import React, {
+  useState, useCallback, useMemo, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+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 injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
+// import injectReducer from '../../utils/injectReducer';
+import { makeSelectAuthenticated } from '../Cap/selectors';
+import DynamicControlsStep from './steps/DynamicControlsStep';
+import MessageTypeStep from './steps/MessageTypeStep';
+import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
+import ChannelSelectionStep from './steps/ChannelSelectionStep';
+import {
+  STEPS,
+  CHANNEL_PRIORITY,
+  AB_TEST,
+} 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,
+// });
+
+const CommunicationFlow = ({
+  config,
+  initialData,
+  onSave,
+  onCancel, // eslint-disable-line
+  onChange,
+  intl,
+  capData, // From Redux - contains user/org info needed by CouponsWrapper
+}) => {
+  const { formatMessage } = intl || {};
+  const { messageTypeData = {}, communicationStrategyData = {}, contentTemplateData = {} } = config?.features || {};
+  // Initialize step data from initialData or defaults
+  const [stepData, setStepData] = useState(() => {
+    const defaultMessageType = messageTypeData.defaultOption?.value || null;
+    return {
+      messageType: initialData?.messageType || defaultMessageType,
+      communicationStrategy: initialData?.communicationStrategy || null,
+      channel: initialData?.channel || config.channel || null,
+      channels: initialData?.channels || [],
+      selectedOfferDetails: initialData?.selectedOfferDetails || [],
+      contentItems: initialData?.contentItems || [],
+      deliverySetting: initialData?.deliverySetting || {},
+      dynamicControls: initialData?.dynamicControls || {},
+    };
+  });
+  const [validationErrors, setValidationErrors] = useState({});
+
+  // Memoize enabled steps
+  const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
+
+  /**
+   * Get aggregated data from all steps
+   */
+  const getAggregatedData = useCallback(() => {
+    const { communicationStrategy } = stepData;
+    const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(communicationStrategy);
+
+    return {
+      messageType: stepData.messageType,
+      communicationStrategy: stepData.communicationStrategy,
+      channel: isMultiChannel ? null : stepData.channel,
+      channels: isMultiChannel ? stepData.channels : [],
+      selectedOfferDetails: stepData.selectedOfferDetails,
+      contentItems: stepData.contentItems || [],
+      deliverySetting: stepData.deliverySetting,
+      dynamicControls: stepData.dynamicControls,
+    };
+  }, [stepData]);
+
+  /**
+   * Handle step data change
+   */
+  const handleStepChange = useCallback((step, data) => {
+    setStepData((prevStepData) => ({
+      ...prevStepData,
+      ...data,
+    }));
+    setValidationErrors((prevErrors) => ({
+      ...prevErrors,
+      [step]: null, // Clear validation error for this step
+    }));
+  }, []);
+
+  // Call onChange callback when stepData changes
+  useEffect(() => {
+    if (onChange) {
+      onChange(getAggregatedData());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepData]);
+
+  /**
+   * Render all enabled steps
+   */
+  const renderSteps = useCallback(() => enabledSteps.map((step) => {
+    const commonProps = {
+      value: stepData,
+      onChange: (data) => handleStepChange(step, data),
+      error: validationErrors[step],
+    };
+
+    switch (step) {
+      case STEPS.MESSAGE_TYPE:
+        return (
+          <CapRow key={step}>
+            <MessageTypeStep
+              {...commonProps}
+              value={stepData.messageType}
+              options={messageTypeData.options}
+              defaultOption={messageTypeData.defaultOption}
+              onChange={(messageType) => handleStepChange(step, { messageType })}
+            />
+            <CapDivider />
+          </CapRow>
+        );
+      case STEPS.COMMUNICATION_STRATEGY:
+        return (
+          <CapRow key={step}>
+            <CommunicationStrategyStep
+              {...commonProps}
+              value={stepData.communicationStrategy}
+              // messageType={stepData.messageType}
+              options={communicationStrategyData.options}
+              disabled={communicationStrategyData.disabled}
+              onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
+            />
+            <CapDivider />
+          </CapRow>
+        );
+      case STEPS.CHANNEL_SELECTION:
+        // Only show ChannelSelectionStep if communication strategy is selected
+        if (!stepData.communicationStrategy) {
+          return null;
+        }
+        return (
+          <CapRow key={step}>
+            <ChannelSelectionStep
+              {...commonProps}
+              value={stepData}
+              channels={contentTemplateData.channels}
+              onChange={(data) => handleStepChange(step, data)}
+              channelsToHide={contentTemplateData.channelsToHide}
+              channelsToDisable={contentTemplateData.channelsToDisable}
+              creativesMode={config.mode || 'create'}
+              selectedOfferDetails={stepData.selectedOfferDetails}
+              incentivesData={config.features?.incentivesData}
+              deliverySettingsData={config.features?.deliverySettingsData}
+              config={config}
+              capData={capData}
+            />
+            <CapDivider />
+          </CapRow>
+        );
+      // This will be added back in when coupons/points are integrated so keeping it commented out for now
+      // case STEPS.INCENTIVES:
+      //   return (
+      //     <IncentivesStep
+      //       key={step}
+      //       {...commonProps}
+      //       value={stepData.selectedOfferDetails}
+      //       onChange={(selectedOfferDetails) => handleStepChange(step, { selectedOfferDetails })}
+      //     />
+      //   );
+      case STEPS.DYNAMIC_CONTROLS:
+        // Only show DynamicControlsStep if communication strategy is selected
+        if (!stepData.communicationStrategy) {
+          return null;
+        }
+        return (
+          <DynamicControlsStep
+            key={step}
+            {...commonProps}
+            value={{ dynamicControls: stepData.dynamicControls }}
+            controls={config.features?.dynamicControlsData?.controls || []}
+            onChange={(data) => handleStepChange(step, { dynamicControls: data.dynamicControls })}
+          />
+        );
+      default:
+        return null;
+    }
+  }), [enabledSteps, stepData, validationErrors, config, handleStepChange, messageTypeData, communicationStrategyData, contentTemplateData]);
+
+  return (
+    <CapRow className="communication-flow-container">
+      {renderSteps()}
+      {onSave && (
+        <CapRow className="communication-flow-container__footer">
+          <CapButton type="primary" onClick={() => onSave(getAggregatedData())}>
+            {formatMessage(messages.save)}
+          </CapButton>
+        </CapRow>
+      )}
+    </CapRow>
+  );
+};
+
+CommunicationFlow.propTypes = {
+  config: PropTypes.shape({
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    channel: PropTypes.string,
+    mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
+    channelsToHide: PropTypes.arrayOf(PropTypes.string),
+    channelsToDisable: PropTypes.arrayOf(PropTypes.string),
+    features: PropTypes.shape({
+      enableMessageType: PropTypes.bool,
+      enableCommunicationStrategy: PropTypes.bool,
+      messageTypeData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        }),
+        required: PropTypes.bool,
+      }),
+      communicationStrategyData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        }),
+        required: PropTypes.bool,
+        disabled: PropTypes.bool,
+      }),
+      contentTemplateData: PropTypes.shape({
+        required: PropTypes.bool,
+        channels: PropTypes.object,
+      }),
+      enableIncentives: PropTypes.bool,
+      enableDeliverySettings: PropTypes.bool,
+      enableOtherSettings: PropTypes.bool,
+      incentivesTypes: PropTypes.arrayOf(PropTypes.oneOf(['coupons', 'points', 'promotions', 'giftVouchers', 'badges'])),
+    }),
+    context: PropTypes.object,
+  }).isRequired,
+  initialData: PropTypes.object,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
+  intl: PropTypes.object.isRequired,
+  capData: PropTypes.object,
+};
+
+CommunicationFlow.defaultProps = {
+  initialData: null,
+  onChange: null,
+  capData: {},
+};
+
+const mapStateToProps = createStructuredSelector({
+  capData: makeSelectAuthenticated(),
+});
+
+const withConnect = connect(mapStateToProps);
+
+export default compose(
+  // withCouponsReducer, // cap-coupons flows disabled
+  // withCouponsSaga,   // cap-coupons flows disabled
+  withConnect,
+  injectIntl,
+)(CommunicationFlow);

package/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -0,0 +1,25 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+// .slidebox-content-container is a DOM ancestor of .communication-flow-container
+// (the outer CapSlideBox wraps this component), so it cannot be scoped as a
+// descendant selector — it must remain at root level to match correctly.
+.slidebox-content-container {
+  padding: 0 $CAP_SPACE_48 !important; // 48px left and right, 0 top and bottom
+  .slidebox-footer {
+    padding: 0 $CAP_SPACE_48 !important;
+  }
+}
+
+.communication-flow-container {
+  .step-divider {
+    margin: $CAP_SPACE_32 0;
+  }
+
+  .heading-style {
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__footer {
+    padding: $CAP_SPACE_16 0 $CAP_SPACE_08;
+  }
+}