cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/CommunicationFlow/constants.js

@@ -0,0 +1,200 @@
+/**
+ * CommunicationFlow Constants
+ */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+
+// Step identifiers
+export const STEPS = {
+  MESSAGE_TYPE: 'messageType',
+  COMMUNICATION_STRATEGY: 'communicationStrategy',
+  CHANNEL_SELECTION: 'channelSelection',
+  INCENTIVES: 'incentives',
+  DELIVERY_SETTINGS: 'deliverySettings',
+  DYNAMIC_CONTROLS: 'dynamicControls',
+};
+
+// Message Type values
+export const MESSAGE_TYPES_OPTIONS = [
+  { value: 'promotional', label: <FormattedMessage {...messages.promotional} />, disabled: false },
+  { value: 'transactional', label: <FormattedMessage {...messages.transactional} />, disabled: false },
+];
+
+// Communication Strategy values
+export const COMMUNICATION_STRATEGIES_OPTIONS = [
+  {
+    value: 'SINGLE_TEMPLATE', label: <FormattedMessage {...messages.singleTemplate} />, disabled: false, isMultiChannel: false,
+  },
+  {
+    value: 'CHANNEL_PRIORITY', label: <FormattedMessage {...messages.channelPriority} />, disabled: false, isMultiChannel: true,
+  },
+  {
+    value: 'AB_TEST', label: <FormattedMessage {...messages.abTest} />, disabled: false, isMultiChannel: true,
+  },
+];
+
+export const CHANNEL_PRIORITY = 'CHANNEL_PRIORITY';
+export const AB_TEST = 'AB_TEST';
+export const SINGLE_TEMPLATE = 'SINGLE_TEMPLATE';
+
+// Channel config - single source of truth for CreativesContainer and TemplatesV2
+// paneKey: TemplatesV2 defaultPanes object key (for channelsToHide)
+// channelProp: CreativesContainer channel prop (must match pane.key for tab to be active)
+export const CHANNELS = [
+  {
+    value: 'SMS',
+    label: <FormattedMessage {...messages.sms} />,
+    iconType: 'sms',
+    isActive: true,
+    paneKey: 'sms',
+    channelProp: 'sms',
+  },
+  {
+    value: 'EMAIL',
+    label: <FormattedMessage {...messages.email} />,
+    iconType: 'email',
+    isActive: true,
+    paneKey: 'email',
+    channelProp: 'email',
+  },
+  {
+    value: 'MOBILEPUSH',
+    label: <FormattedMessage {...messages.mobilePush} />,
+    iconType: 'mpush',
+    isActive: true,
+    paneKey: 'mPush',
+    channelProp: 'mobilepush',
+  },
+  {
+    value: 'INAPP',
+    label: <FormattedMessage {...messages.inApp} />,
+    iconType: 'mpush',
+    isActive: true,
+    paneKey: 'inApp',
+    channelProp: 'inapp',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'WHATSAPP',
+    label: <FormattedMessage {...messages.whatsApp} />,
+    iconType: 'whatsapp',
+    isActive: true,
+    paneKey: 'whatsapp',
+    channelProp: 'whatsapp',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'WECHAT',
+    label: <FormattedMessage {...messages.weChat} />,
+    iconType: 'wechat',
+    isActive: false,
+    paneKey: 'weChat',
+    channelProp: 'wechat',
+  },
+  {
+    value: 'LINE',
+    label: <FormattedMessage {...messages.line} />,
+    iconType: 'line',
+    isActive: true,
+    paneKey: 'line',
+    channelProp: 'line',
+  },
+  {
+    value: 'VIBER',
+    label: <FormattedMessage {...messages.viber} />,
+    iconType: 'viber',
+    isActive: true,
+    paneKey: 'viber',
+    channelProp: 'viber',
+  },
+  {
+    value: 'FACEBOOK',
+    label: <FormattedMessage {...messages.facebook} />,
+    iconType: 'facebook',
+    isActive: true,
+    paneKey: 'facebook',
+    channelProp: 'facebook',
+  },
+  {
+    value: 'RCS',
+    label: <FormattedMessage {...messages.rcs} />,
+    iconType: 'rcs',
+    isActive: true,
+    paneKey: 'rcs',
+    channelProp: 'rcs',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'ZALO',
+    label: <FormattedMessage {...messages.zalo} />,
+    iconType: 'zalo',
+    isActive: true,
+    paneKey: 'zalo',
+    channelProp: 'zalo',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'WEBPUSH',
+    label: <FormattedMessage {...messages.webPush} />,
+    iconType: 'webpush',
+    isActive: true,
+    paneKey: 'webpush',
+    channelProp: 'webpush',
+  },
+  {
+    value: 'CALLTASK',
+    label: <FormattedMessage {...messages.callTask} />,
+    iconType: 'call',
+    isActive: true,
+    paneKey: 'callTask',
+    channelProp: 'call_task', // Must match TemplatesV2 pane.key
+  },
+];
+
+// Delivery settings - channels that show/hide sender details
+export const CHANNELS_WITHOUT_DELIVERY = ['MPUSH', 'MOBILEPUSH', 'INAPP', 'WEBPUSH'];
+export const SENDER_ID_CHANNELS = ['SMS', 'EMAIL', 'VIBER', 'ZALO', 'LINE'];
+export const SENDER_NUMBER_CHANNELS = ['WHATSAPP', 'RCS'];
+
+// Dynamic Controls — default config for the Other Controls section.
+// label and description are resolved via FormattedMessage so consumers
+// get translated strings without needing to hardcode copy in their config.
+export const DYNAMIC_CONTROLS_CONFIG = [
+  {
+    key: 'sendToControlCustomers',
+    label: <FormattedMessage {...messages.sendToControlCustomers} />,
+  },
+  {
+    key: 'sendToBrandPocs',
+    label: <FormattedMessage {...messages.sendToBrandPocs} />,
+  },
+  {
+    key: 'useTinyUrl',
+    label: <FormattedMessage {...messages.useTinyUrl} />,
+  },
+  {
+    key: 'overrideDailyLimit',
+    label: <FormattedMessage {...messages.overrideDailyLimit} />,
+    description: <FormattedMessage {...messages.overrideDailyLimitDesc} />,
+  },
+];
+
+// Incentive types
+export const INCENTIVE_TYPES = [
+  {
+    value: 'coupons', label: <FormattedMessage {...messages.coupons} />, isActive: true, disabled: false,
+  },
+  {
+    value: 'points', label: <FormattedMessage {...messages.points} />, isActive: true, disabled: false,
+  },
+  {
+    value: 'promotions', label: <FormattedMessage {...messages.promotions} />, isActive: true, disabled: false,
+  },
+  {
+    value: 'giftVouchers', label: <FormattedMessage {...messages.giftVouchers} />, isActive: false, disabled: false,
+  },
+  {
+    value: 'badges', label: <FormattedMessage {...messages.badges} />, isActive: false, disabled: false,
+  },
+];

package/app/v2Containers/CommunicationFlow/index.js

@@ -0,0 +1,102 @@
+/**
+ * CommunicationFlow - Public Entry Point
+ *
+ * Single entry for consumers. Wires config + callbacks and renders
+ * the CommunicationFlow orchestrator component.
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import CommunicationFlow from './CommunicationFlow';
+import { hasSupportEngagementModule } from '../../utils/common';
+
+const CommunicationFlowContainer = ({
+  config,
+  initialData,
+  onSave,
+  onCancel,
+  onChange,
+  ...otherProps
+}) => {
+  if (!hasSupportEngagementModule()) {
+    return null;
+  }
+
+  return (
+    <CommunicationFlow
+      config={config}
+      initialData={initialData}
+      onSave={onSave}
+      onCancel={onCancel}
+      onChange={onChange}
+      {...otherProps}
+    />
+  );
+};
+
+CommunicationFlowContainer.propTypes = {
+  config: PropTypes.shape({
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    channel: PropTypes.string, // optional if channel step is skipped
+    mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
+    channelsToHide: PropTypes.arrayOf(PropTypes.string),
+    channelsToDisable: PropTypes.arrayOf(PropTypes.string),
+    features: PropTypes.shape({
+      messageTypeData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        }),
+        required: PropTypes.bool,
+      }),
+      communicationStrategyData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        }),
+        required: PropTypes.bool,
+        disabled: PropTypes.bool,
+      }),
+      contentTemplateData: PropTypes.shape({
+        required: PropTypes.bool,
+        channels: PropTypes.array,
+        channelsToHide: PropTypes.arrayOf(PropTypes.string),
+        channelsToDisable: PropTypes.arrayOf(PropTypes.string),
+      }),
+      incentivesData: PropTypes.shape({
+        required: PropTypes.bool,
+        types: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+          isActive: PropTypes.bool,
+        })),
+      }),
+      deliverySettingsData: PropTypes.object,
+      dynamicControlsData: PropTypes.shape({
+        required: PropTypes.bool,
+        controls: PropTypes.array,
+      }),
+    }),
+    context: PropTypes.object, // ouId, campaignId, programId, etc.
+  }).isRequired,
+  initialData: PropTypes.object, // for edit/preview mode
+  onSave: PropTypes.func.isRequired, // (data) => void - called when user saves
+  onCancel: PropTypes.func.isRequired, // () => void - called when user cancels
+  onChange: PropTypes.func, // (data) => void - optional, called on data changes
+};
+
+CommunicationFlowContainer.defaultProps = {
+  initialData: null,
+  onChange: null,
+};
+
+export default CommunicationFlowContainer;

package/app/v2Containers/CommunicationFlow/messages.js

@@ -0,0 +1,346 @@
+/**
+ * CommunicationFlow Messages (i18n)
+ */
+
+const prefix = 'creatives.v2Containers.CommunicationFlow';
+
+export default {
+  // Step titles
+  stepMessageType: {
+    id: `${prefix}.stepMessageType`,
+    defaultMessage: 'Message Type',
+  },
+  stepCommunicationStrategy: {
+    id: `${prefix}.stepCommunicationStrategy`,
+    defaultMessage: 'Communication Strategy',
+  },
+  stepChannelSelection: {
+    id: `${prefix}.stepChannelSelection`,
+    defaultMessage: 'Channel Selection',
+  },
+  stepIncentives: {
+    id: `${prefix}.stepIncentives`,
+    defaultMessage: 'Incentives',
+  },
+  stepDeliverySettings: {
+    id: `${prefix}.stepDeliverySettings`,
+    defaultMessage: 'Delivery Settings',
+  },
+  stepOtherSettings: {
+    id: `${prefix}.stepOtherSettings`,
+    defaultMessage: 'Other Settings',
+  },
+
+  // Validation messages
+  messageTypeRequired: {
+    id: `${prefix}.messageTypeRequired`,
+    defaultMessage: 'Message type is required',
+  },
+  communicationStrategyRequired: {
+    id: `${prefix}.communicationStrategyRequired`,
+    defaultMessage: 'Communication strategy is required',
+  },
+  channelSelectionRequired: {
+    id: `${prefix}.channelSelectionRequired`,
+    defaultMessage: 'Channel selection is required',
+  },
+
+  // Action buttons
+  next: {
+    id: `${prefix}.next`,
+    defaultMessage: 'Next',
+  },
+  back: {
+    id: `${prefix}.back`,
+    defaultMessage: 'Back',
+  },
+  cancel: {
+    id: `${prefix}.cancel`,
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: `${prefix}.save`,
+    defaultMessage: 'Save',
+  },
+
+  // Slidebox header
+  addMessage: {
+    id: `${prefix}.addMessage`,
+    defaultMessage: 'Add message',
+  },
+
+  // Step prompts
+  messageTypeHeading: {
+    id: `${prefix}.messageTypeHeading`,
+    defaultMessage: 'Message type',
+  },
+  communicationStrategyHeading: {
+    id: `${prefix}.communicationStrategyHeading`,
+    defaultMessage: 'Communication strategy',
+  },
+  communicationStrategyPlaceholder: {
+    id: `${prefix}.communicationStrategyPlaceholder`,
+    defaultMessage: 'Select strategy',
+  },
+  promotional: {
+    id: `${prefix}.promotional`,
+    defaultMessage: 'Promotional',
+  },
+  transactional: {
+    id: `${prefix}.transactional`,
+    defaultMessage: 'Transactional',
+  },
+  singleTemplate: {
+    id: `${prefix}.singleTemplate`,
+    defaultMessage: 'Single template',
+  },
+  channelPriority: {
+    id: `${prefix}.channelPriority`,
+    defaultMessage: 'Channel priority',
+  },
+  abTest: {
+    id: `${prefix}.abTest`,
+    defaultMessage: 'A/B Test',
+  },
+  singleChannel: {
+    id: `${prefix}.singleChannel`,
+    defaultMessage: 'Single channel',
+  },
+  multipleChannel: {
+    id: `${prefix}.multipleChannel`,
+    defaultMessage: 'Multiple channel',
+  },
+  incentivesPrompt: {
+    id: `${prefix}.incentivesPrompt`,
+    defaultMessage: 'Incentives',
+  },
+  incentivesPlaceholder: {
+    id: `${prefix}.incentivesPlaceholder`,
+    defaultMessage: 'Select incentives',
+  },
+  deliverySettingsPrompt: {
+    id: `${prefix}.deliverySettingsPrompt`,
+    defaultMessage: 'Delivery settings',
+  },
+  deliverySettingsPlaceholder: {
+    id: `${prefix}.deliverySettingsPlaceholder`,
+    defaultMessage: 'Select delivery settings',
+  },
+  otherSettingsPrompt: {
+    id: `${prefix}.otherSettingsPrompt`,
+    defaultMessage: 'Other settings',
+  },
+  otherSettingsPlaceholder: {
+    id: `${prefix}.otherSettingsPlaceholder`,
+    defaultMessage: 'Select other settings',
+  },
+  addMessageContentAndIncentive: {
+    id: `${prefix}.addMessageContentAndIncentive`,
+    defaultMessage: 'Add message content and incentive',
+  },
+  contentTemplate: {
+    id: `${prefix}.contentTemplate`,
+    defaultMessage: 'Content template',
+  },
+  addedContent: {
+    id: `${prefix}.addedContent`,
+    defaultMessage: 'Added content',
+  },
+  addContentTemplate: {
+    id: `${prefix}.addContentTemplate`,
+    defaultMessage: 'Content template',
+  },
+  edit: {
+    id: `${prefix}.edit`,
+    defaultMessage: 'Edit',
+  },
+  delete: {
+    id: `${prefix}.delete`,
+    defaultMessage: 'Delete',
+  },
+  previewAndTest: {
+    id: `${prefix}.previewAndTest`,
+    defaultMessage: 'Preview and Test',
+  },
+  remove: {
+    id: `${prefix}.remove`,
+    defaultMessage: 'Remove',
+  },
+  senderDetails: {
+    id: `${prefix}.senderDetails`,
+    defaultMessage: 'Sender details',
+  },
+  saveChanges: {
+    id: `${prefix}.saveChanges`,
+    defaultMessage: 'Save changes',
+  },
+  senderIdLabel: {
+    id: `${prefix}.senderIdLabel`,
+    defaultMessage: 'Sender ID',
+  },
+  senderNumberLabel: {
+    id: `${prefix}.senderNumberLabel`,
+    defaultMessage: 'Sender number',
+  },
+  viberAccountLabel: {
+    id: `${prefix}.viberAccountLabel`,
+    defaultMessage: 'Viber account',
+  },
+  accountLabel: {
+    id: `${prefix}.accountLabel`,
+    defaultMessage: 'Account',
+  },
+  smsDomain: {
+    id: `${prefix}.smsDomain`,
+    defaultMessage: 'SMS Domain',
+  },
+  emailDomainLabel: {
+    id: `${prefix}.emailDomainLabel`,
+    defaultMessage: 'Email Domain',
+  },
+  emailSenderName: {
+    id: `${prefix}.emailSenderName`,
+    defaultMessage: 'Sender name',
+  },
+  emailReplyToId: {
+    id: `${prefix}.emailReplyToId`,
+    defaultMessage: 'Reply-to ID',
+  },
+  reset: {
+    id: `${prefix}.reset`,
+    defaultMessage: 'Reset',
+  },
+  select: {
+    id: `${prefix}.select`,
+    defaultMessage: 'Select',
+  },
+  addIncentive: {
+    id: `${prefix}.addIncentive`,
+    defaultMessage: 'Add incentive',
+  },
+  optional: {
+    id: `${prefix}.optional`,
+    defaultMessage: '(Optional)',
+  },
+  sms: {
+    id: `${prefix}.sms`,
+    defaultMessage: 'SMS',
+  },
+  email: {
+    id: `${prefix}.email`,
+    defaultMessage: 'Email',
+  },
+  mobilePush: {
+    id: `${prefix}.mobilePush`,
+    defaultMessage: 'Mobile push',
+  },
+  inApp: {
+    id: `${prefix}.inApp`,
+    defaultMessage: 'In-app',
+  },
+  whatsApp: {
+    id: `${prefix}.whatsApp`,
+    defaultMessage: 'WhatsApp',
+  },
+  weChat: {
+    id: `${prefix}.weChat`,
+    defaultMessage: 'WeChat',
+  },
+  line: {
+    id: `${prefix}.line`,
+    defaultMessage: 'Line',
+  },
+  viber: {
+    id: `${prefix}.viber`,
+    defaultMessage: 'Viber',
+  },
+  facebook: {
+    id: `${prefix}.facebook`,
+    defaultMessage: 'Facebook',
+  },
+  rcs: {
+    id: `${prefix}.rcs`,
+    defaultMessage: 'RCS',
+  },
+  zalo: {
+    id: `${prefix}.zalo`,
+    defaultMessage: 'Zalo',
+  },
+  callTask: {
+    id: `${prefix}.callTask`,
+    defaultMessage: 'Call task',
+  },
+  webPush: {
+    id: `${prefix}.webPush`,
+    defaultMessage: 'Web push',
+  },
+  incentives: {
+    id: `${prefix}.incentives`,
+    defaultMessage: 'Incentives',
+  },
+  coupons: {
+    id: `${prefix}.coupons`,
+    defaultMessage: 'Coupons',
+  },
+  points: {
+    id: `${prefix}.points`,
+    defaultMessage: 'Points',
+  },
+  promotions: {
+    id: `${prefix}.promotions`,
+    defaultMessage: 'Promotions',
+  },
+  giftVouchers: {
+    id: `${prefix}.giftVouchers`,
+    defaultMessage: 'Gift vouchers',
+  },
+  badges: {
+    id: `${prefix}.badges`,
+    defaultMessage: 'Badges',
+  },
+  dynamicControlsTitle: {
+    id: `${prefix}.dynamicControlsTitle`,
+    defaultMessage: 'Other controls',
+  },
+  whatsappBusinessAccount: {
+    id: `${prefix}.whatsappBusinessAccount`,
+    defaultMessage: 'WhatsApp Business account',
+  },
+  whatsappAccountTooltip: {
+    id: `${prefix}.whatsappAccountTooltip`,
+    defaultMessage: 'Message template selected belongs to this account',
+  },
+  rcsAccountLabel: {
+    id: `${prefix}.rcsAccountLabel`,
+    defaultMessage: 'RCS account',
+  },
+  // Dynamic Controls toggle labels and descriptions
+  sendToControlCustomers: {
+    id: `${prefix}.sendToControlCustomers`,
+    defaultMessage: 'Send to control customers',
+  },
+  sendToBrandPocs: {
+    id: `${prefix}.sendToBrandPocs`,
+    defaultMessage: 'Send to brand POCs',
+  },
+  useTinyUrl: {
+    id: `${prefix}.useTinyUrl`,
+    defaultMessage: 'Use tiny URL',
+  },
+  overrideDailyLimit: {
+    id: `${prefix}.overrideDailyLimit`,
+    defaultMessage: 'Override daily communication limit',
+  },
+  overrideDailyLimitDesc: {
+    id: `${prefix}.overrideDailyLimitDesc`,
+    defaultMessage: "Customers will still receive this message even if they've already reached their daily message limit",
+  },
+  domainGatewayError: {
+    id: `${prefix}.domainGatewayError`,
+    defaultMessage: 'Domain gateway id is not found for the selected channel. Please contact the gateway team to register them with Capillary.',
+  },
+  senderNotConfiguredError: {
+    id: `${prefix}.senderNotConfiguredError`,
+    defaultMessage: 'Selected domain gateway id is not correct. Please change the domain id or contact the gateway team to register them with Capillary.',
+  },
+};