@capillarytech/creatives-library 8.0.309 → 8.0.310

package/v2Containers/Zalo/index.js

@@ -270,15 +270,23 @@ export const Zalo = (props) => {
       validateTags({
         content: message,
         tagsParam: tags,
+        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
+        eventContextTags,
         isFullMode,
       }) || {};
-    const { isBraceError } = tagValidationResponse;
+    const { unsupportedTags = [], isBraceError } = tagValidationResponse;
+    let tagError = '';
+    if (unsupportedTags.length > 0) {
+      tagError = formatMessage(globalMessages.unsupportedTagsValidationError, {
+        unsupportedTags,
+      });
+    }
     if (isBraceError) {
-      return formatMessage(globalMessages.unbalanacedCurlyBraces);
+      tagError = formatMessage(globalMessages.unbalanacedCurlyBraces);
     }
-    return '';
+    return tagError;
   };
 
   //this function is used for checking errror validation in this it validate tags error and length error

package/v2Components/CommonTestAndPreview/AddTestCustomer.js

@@ -1,42 +0,0 @@
-import PropTypes from "prop-types";
-import { FormattedMessage } from "react-intl";
-import CapButton from "@capillarytech/cap-ui-library/CapButton";
-import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
-import messages from "./messages";
-import React from "react";
-
-const AddTestCustomerButton = ({
-  searchValue,
-  handleAddTestCustomer
-}) => (
-  <CapButton
-    onClick={handleAddTestCustomer}
-    type="flat"
-    size="small"
-    className="test-customer-add-btn"
-    prefix={
-      <CapIcon
-        type="add-profile"
-        className="add-test-customer-icon"
-      />
-    }
-  >
-    <FormattedMessage
-      {...messages.addTestCustomerWithValue}
-      values={{
-        searchValue: (
-          <span className="test-customer-add-btn-value" title={searchValue || ""}>
-            "{searchValue}"
-          </span>
-        ),
-      }}
-    />
-  </CapButton>
-);
-
-AddTestCustomerButton.propTypes = {
-  searchValue: PropTypes.string.isRequired,
-  handleAddTestCustomer: PropTypes.func.isRequired
-};
-
-export default AddTestCustomerButton;

package/v2Components/CommonTestAndPreview/CustomerCreationModal.js

@@ -1,284 +0,0 @@
-import CapModal from "@capillarytech/cap-ui-library/CapModal";
-import CapButton from "@capillarytech/cap-ui-library/CapButton";
-import CapInput from "@capillarytech/cap-ui-library/CapInput";
-import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
-import CapRow from "@capillarytech/cap-ui-library/CapRow";
-import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
-import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
-import { FormattedMessage, injectIntl } from "react-intl";
-import messages from "./messages";
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { CHANNELS, IDENTIFIER_TYPE_EMAIL, IDENTIFIER_TYPE_MOBILE, INPUT_HAS_ERROR_CLASS } from "./constants";
-import { getMembersLookup } from '../../services/api';
-import { isValidEmail, isValidMobile, formatPhoneNumber } from "../../utils/commonUtils";
-
-const CustomerCreationModal = ({
-  customerModal,
-  setCustomerModal,
-  channel,
-  customerData,
-  setCustomerData,
-  onSave,
-  intl,
-}) => {
-  const [validationErrors, setValidationErrors] = useState({
-    email: "",
-    mobile: ""
-  });
-  const [isLoading, setIsLoading] = useState(false);
-  const [lookupLoading, setLookupLoading] = useState(null); // null | IDENTIFIER_TYPE_EMAIL | IDENTIFIER_TYPE_MOBILE
-
-  // Refs to track the latest values for async validation
-  const latestEmailRef = useRef(customerData.email || "");
-  const latestMobileRef = useRef(customerData.mobile || "");
-
-  // Helper function to render validation errors
-  const renderValidationError = (error) => {
-    if (!error) return null;
-
-    return (
-      <div className="customer-creation-modal-validation-error">
-        {typeof error === 'string' ? error : <FormattedMessage {...error} />}
-      </div>
-    );
-  };
-
-  // Check if required fields are filled based on channel
-  const isRequiredFieldMissing = () => {
-    if (channel === CHANNELS.EMAIL && !customerData.email) {
-      return true;
-    }
-    if (channel === CHANNELS.SMS && !customerData.mobile) {
-      return true;
-    }
-    return false;
-  };
-
-  // Check if save button should be disabled
-  const isSaveDisabled = () => {
-    return (
-      validationErrors.email ||
-      validationErrors.mobile ||
-      isRequiredFieldMissing() ||
-      !!lookupLoading
-    );
-  };
-
-  // Perform lookup (same logic as in index.js)
-  const performLookup = useCallback(async (identifierType, value) => {
-    try {
-      const response = await getMembersLookup(identifierType, value);
-      const success = response?.success && !response?.status?.isError;
-      const res = response?.response || {};
-      const exists = res.exists || false;
-      const details = res.customerDetails || [];
-      if (!success) {
-        const errorMessage = response?.message || response?.status?.message
-        if (errorMessage?.toLowerCase().includes("merged customer found")) {
-          return { success: true, exists: true, details: [] };
-        }
-      }
-
-      return { success, exists, details };
-    } catch (error) {
-      return { success: false, exists: false, details: [] };
-    }
-  }, []);
-
-  // Handle validation and lookup for email or mobile
-  const handleLookupValidation = useCallback(async (type, value) => {
-    const isEmail = type === IDENTIFIER_TYPE_EMAIL;
-    const ref = isEmail ? latestEmailRef : latestMobileRef;
-    const field = isEmail ? IDENTIFIER_TYPE_EMAIL : IDENTIFIER_TYPE_MOBILE;
-
-    if (!value) {
-      if (ref.current === value) {
-        setValidationErrors(prev => ({ ...prev, [field]: "" }));
-      }
-      return;
-    }
-
-    if (isEmail && !isValidEmail(value)) {
-      if (ref.current === value) {
-        setValidationErrors(prev => ({ ...prev, [IDENTIFIER_TYPE_EMAIL]: "Please enter a valid email address" }));
-      }
-      return;
-    }
-    if (!isEmail && !isValidMobile(value)) {
-      if (ref.current === value) {
-        setValidationErrors(prev => ({ ...prev, [IDENTIFIER_TYPE_MOBILE]: "Please enter a valid mobile number" }));
-      }
-      return;
-    }
-
-    setLookupLoading(field);
-    try {
-      const { success, exists } = await performLookup(type, value);
-
-      if (ref.current === value) {
-        if (success && exists) {
-          setValidationErrors(prev => ({
-            ...prev,
-            [field]: isEmail ? messages.emailAlreadyExists : messages.mobileAlreadyExists
-          }));
-        } else {
-          setValidationErrors(prev => ({ ...prev, [field]: "" }));
-        }
-      }
-    } finally {
-      setLookupLoading(null);
-    }
-  }, [performLookup]);
-
-  // Debounce timer refs
-  const emailTimeoutRef = React.useRef(null);
-  const mobileTimeoutRef = React.useRef(null);
-
-  // Handle email change with debounced validation
-  const handleEmailChange = (e) => {
-    const email = e.target.value;
-    latestEmailRef.current = email; // Update the latest email ref
-    setCustomerData({ ...customerData, email });
-
-    // Clear previous timeout
-    if (emailTimeoutRef.current) {
-      clearTimeout(emailTimeoutRef.current);
-    }
-
-    // Set new timeout for validation
-    emailTimeoutRef.current = setTimeout(() => {
-      handleLookupValidation(IDENTIFIER_TYPE_EMAIL, email);
-    }, 500);
-  };
-
-  // Handle mobile change with debounced validation
-  const handleMobileChange = (e) => {
-    const rawValue = e.target.value;
-    const formattedMobile = formatPhoneNumber(rawValue);
-    latestMobileRef.current = formattedMobile; // Update the latest mobile ref
-    setCustomerData({ ...customerData, mobile: formattedMobile });
-
-    // Clear previous timeout
-    if (mobileTimeoutRef.current) {
-      clearTimeout(mobileTimeoutRef.current);
-    }
-
-    // Set new timeout for validation
-    mobileTimeoutRef.current = setTimeout(() => {
-      handleLookupValidation(IDENTIFIER_TYPE_MOBILE, formattedMobile);
-    }, 500);
-  };
-
-  // Update refs when customerData changes externally
-  useEffect(() => {
-    latestEmailRef.current = customerData.email || "";
-    latestMobileRef.current = customerData.mobile || "";
-  }, [customerData.email, customerData.mobile]);
-
-  // Cleanup timeouts on unmount
-  useEffect(() => {
-    return () => {
-      if (emailTimeoutRef.current) {
-        clearTimeout(emailTimeoutRef.current);
-      }
-      if (mobileTimeoutRef.current) {
-        clearTimeout(mobileTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <CapModal
-      visible={customerModal[0]}
-      onCancel={() => setCustomerModal([false, ""])}
-      centered={true}
-      width={500}
-      maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
-      footer={
-        <CapRow justify="start" gutter={8}>
-            <CapButton
-              type="primary"
-              onClick={() => onSave(validationErrors, setIsLoading)}
-              disabled={isSaveDisabled() || lookupLoading}
-              loading={isLoading}
-            >
-              <FormattedMessage {...messages.saveButton} />
-            </CapButton>
-            <CapButton
-              type="secondary"
-              onClick={() => setCustomerModal([false, ""])}
-              disabled={isLoading || lookupLoading}
-            >
-              <FormattedMessage {...messages.cancelButton} />
-            </CapButton>
-        </CapRow>
-      }
-      title={<FormattedMessage {...messages.customerCreationModalTitle} />}
-      wrapClassName="common-test-preview-modal-wrap"
-      className={`common-test-preview-modal${lookupLoading ? ' customer-creation-modal--lookup-loading' : ''}`}
-    >
-      <CapRow className="customer-creation-modal-row">
-        <CapColumn span={24}>
-          <span className="customer-creation-modal-description">
-            <FormattedMessage {...messages.customerCreationModalDescription} />
-          </span>
-        </CapColumn>
-      </CapRow>
-
-      <CapRow className="customer-creation-modal-row">
-        <CapColumn span={24}>
-          <CapLabel type="label1" className="customer-creation-modal-label">
-            <FormattedMessage {...messages.customerName} /> <span className="customer-creation-modal-optional">(Optional)</span>
-          </CapLabel>
-          <CapInput
-            value={customerData.name || ""}
-            onChange={e =>
-              setCustomerData({ ...customerData, name: e.target.value })
-            }
-            placeholder={intl.formatMessage(messages.customerNamePlaceholder)}
-            size="default"
-            className="customer-creation-modal-input"
-          />
-        </CapColumn>
-      </CapRow>
-
-      <CapRow className="customer-creation-modal-row customer-creation-modal-row--email">
-        <CapColumn span={24}>
-          <CapLabel type="label1" className="customer-creation-modal-label">
-            <FormattedMessage {...messages.customerEmail} /> {channel !== CHANNELS.EMAIL && <span className="customer-creation-modal-optional">(Optional)</span>}
-          </CapLabel>
-          <CapInput
-            value={customerData.email || ""}
-            onChange={handleEmailChange}
-            placeholder={intl.formatMessage(messages.customerEmailPlaceholder)}
-            size="default"
-            className={`customer-creation-modal-input${validationErrors.email ? INPUT_HAS_ERROR_CLASS : ''}`}
-            disabled={!!lookupLoading}
-            suffix={lookupLoading === IDENTIFIER_TYPE_EMAIL ? <CapSpin size="small" /> : null}
-          />
-          {renderValidationError(validationErrors.email)}
-        </CapColumn>
-      </CapRow>
-
-      <CapRow className="customer-creation-modal-row customer-creation-modal-row--last">
-        <CapColumn span={24}>
-          <CapLabel type="label1" className="customer-creation-modal-label">
-            <FormattedMessage {...messages.customerMobile} /> {channel !== CHANNELS.SMS && <span className="customer-creation-modal-optional">(Optional)</span>}
-          </CapLabel>
-          <CapInput
-            value={customerData.mobile || ""}
-            onChange={handleMobileChange}
-            placeholder={intl.formatMessage(messages.customerMobilePlaceholder)}
-            size="default"
-            className={`customer-creation-modal-input${validationErrors.mobile ? INPUT_HAS_ERROR_CLASS : ''}`}
-            disabled={!!lookupLoading}
-            suffix={lookupLoading === IDENTIFIER_TYPE_MOBILE ? <CapSpin size="small" /> : null}
-          />
-          {renderValidationError(validationErrors.mobile)}
-        </CapColumn>
-      </CapRow>
-    </CapModal>
-  );
-};
-
-export default injectIntl(CustomerCreationModal);

package/v2Components/CommonTestAndPreview/ExistingCustomerModal.js

@@ -1,72 +0,0 @@
-import CapModal from "@capillarytech/cap-ui-library/CapModal";
-import { FormattedMessage, injectIntl } from "react-intl";
-import messages from "./messages";
-import React, { useState } from "react";
-import { CapCard, CapRow, CapColumn } from "@capillarytech/cap-ui-library";
-import { CHANNELS } from "./constants";
-import CapButton from "@capillarytech/cap-ui-library/CapButton";    
-import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
-
-
-const ExistingCustomerModal = ({ customerModal, setCustomerModal, customerData, channel, onSave, intl }) => {
-  const [isLoading, setIsLoading] = useState(false);
-  return (
-    <CapModal
-      visible={customerModal[0]}
-      onCancel={() => setCustomerModal([false, ""])}
-      centered={true}
-      width={500}
-      maskStyle={{ backgroundColor: 'rgba(244, 245, 247, 0.9)' }}
-      footer={
-        <CapRow justify="start">
-          <CapButton
-            type="primary"
-            onClick={() => onSave({},setIsLoading)}
-            loading={isLoading}
-          >
-            <FormattedMessage {...messages.saveButton} />
-          </CapButton>
-        <CapButton
-          type="secondary"
-          onClick={() => setCustomerModal([false, ""])}
-          disabled={isLoading}
-        >
-          <FormattedMessage {...messages.cancelButton} />
-        </CapButton>
-      </CapRow>
-      }
-      title={intl.formatMessage(messages.customerCreationModalTitle)}
-      wrapClassName="common-test-preview-modal-wrap existing-customer-modal-wrap"
-      className="common-test-preview-modal"
-    >
-      <div className="existing-customer-modal">
-        <CapRow className="existing-customer-modal-intro-row">
-          <FormattedMessage {...messages.existingCustomerModalDescription} />
-        </CapRow>
-        <CapCard className="existing-customer-modal-card">
-          <CapRow className="existing-customer-modal-card-row">
-            <CapColumn className="existing-customer-modal-avatar">
-              <CapIcon type="user-profile" className="existing-customer-modal-avatar-icon" />
-            </CapColumn>
-            <CapColumn className="existing-customer-modal-details">
-              <CapRow className="existing-customer-modal-name">
-                {customerData.name || "-"}
-              </CapRow>
-              <CapColumn className="existing-customer-modal-meta">
-                {channel === CHANNELS.EMAIL && customerData.email && (
-                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerEmail} />: </span> {customerData.email}</CapRow>
-                )}
-                {channel === CHANNELS.SMS && customerData.mobile && (
-                  <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerMobile} />: </span>{customerData.mobile}</CapRow>
-                )}
-                <CapRow><span className="existing-customer-modal-meta-label"><FormattedMessage {...messages.customerID} />: </span>{customerData.customerId}</CapRow>
-              </CapColumn>
-            </CapColumn>
-          </CapRow>
-        </CapCard>
-      </div>
-    </CapModal>
-  );
-};
-
-export default injectIntl(ExistingCustomerModal);

package/v2Components/CommonTestAndPreview/tests/AddTestCustomer.test.js

@@ -1,66 +0,0 @@
-/**
- * Tests for AddTestCustomerButton Component
- *
- * The parent (index.js) only renders this button when channel is EMAIL/SMS and value is valid.
- * This component always renders the button when mounted; visibility is the parent's responsibility.
- */
-
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
-import AddTestCustomerButton from '../AddTestCustomer';
-
-const mockMessages = {
-  'app.v2Components.TestAndPreviewSlidebox.addTestCustomerWithValue': 'Add {searchValue} as Test Customer',
-};
-
-const TestWrapper = ({ children }) => (
-  <IntlProvider locale="en" messages={mockMessages}>
-    {children}
-  </IntlProvider>
-);
-
-describe('AddTestCustomerButton', () => {
-  const defaultProps = {
-    searchValue: 'user@example.com',
-    handleAddTestCustomer: jest.fn(),
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should render button with searchValue in message', () => {
-    render(
-      <TestWrapper>
-        <AddTestCustomerButton {...defaultProps} />
-      </TestWrapper>
-    );
-    const button = screen.getByRole('button', { name: /add.*test customer/i });
-    expect(button).toBeTruthy();
-  });
-
-  it('should show searchValue in button text', () => {
-    render(
-      <TestWrapper>
-        <AddTestCustomerButton {...defaultProps} searchValue="user@example.com" />
-      </TestWrapper>
-    );
-    expect(screen.getByRole('button', { name: /user@example.com/i })).toBeTruthy();
-  });
-
-  it('should call handleAddTestCustomer when button is clicked', () => {
-    const handleAddTestCustomer = jest.fn();
-    render(
-      <TestWrapper>
-        <AddTestCustomerButton
-          searchValue="user@example.com"
-          handleAddTestCustomer={handleAddTestCustomer}
-        />
-      </TestWrapper>
-    );
-    const button = screen.getByRole('button', { name: /add.*test customer/i });
-    fireEvent.click(button);
-    expect(handleAddTestCustomer).toHaveBeenCalledTimes(1);
-  });
-});