@capillarytech/creatives-library 8.0.298 → 8.0.299-alpha.1

package/v2Components/CommonTestAndPreview/CustomerCreationModal.js

@@ -0,0 +1,284 @@
+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" text-align="left" 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"
+    >
+      <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">
+        <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

@@ -0,0 +1,72 @@
+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, CapLabel } 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/SendTestMessage.js

@@ -24,6 +24,9 @@ const SendTestMessage = ({
   channel,
   isSendingTestMessage,
   formatMessage,
+  renderAddTestCustomerButton,
+  searchValue,
+  setSearchValue,
   deliverySettings,
   senderDetailsOptions,
   wecrmAccounts,
@@ -31,57 +34,77 @@ const SendTestMessage = ({
   isLoadingSenderDetails,
   smsTraiDltEnabled,
   registeredSenderIds,
-}) => (
-  <CapStepsAccordian
-    showNumberSteps={false}
-    isChevronIcon
-    expandIconPosition="right"
-    items={[
-      {
-        header: <CapHeader
-          size="regular"
-          description={<FormattedMessage {...messages.testMessageDescription} />}
-          title={<FormattedMessage {...messages.sendTestMessage} />}
-        />,
-        content: (
-          <CapRow className="send-test-content">
-            <CapHeader size="label1" title={<FormattedMessage {...messages.testCustomers} />} />
-            <CapTreeSelect
-              className="test-customers-tree-select"
-              loading={isFetchingTestCustomers || isFetchingTestGroups}
-              treeData={testEntitiesTreeData}
-              onChange={handleTestEntitiesChange}
-              value={selectedTestEntities}
-              multiple
-              placeholder={formatMessage(messages.testCustomersPlaceholder)}
+}) => {
+  const addCustomerContent = renderAddTestCustomerButton ? renderAddTestCustomerButton() : null;
+  return (
+    <CapStepsAccordian
+      showNumberSteps={false}
+      isChevronIcon
+      expandIconPosition="right"
+      items={[
+        {
+          header: (
+            <CapHeader
+              size="regular"
+              description={<FormattedMessage {...messages.testMessageDescription} />}
+              title={<FormattedMessage {...messages.sendTestMessage} />}
             />
-            {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
-              <DeliverySettings
-                channel={channel}
-                deliverySettings={deliverySettings || {}}
-                senderDetailsOptions={senderDetailsOptions || []}
-                wecrmAccounts={wecrmAccounts || []}
-                onSaveDeliverySettings={onSaveDeliverySettings}
-                isLoadingSenderDetails={isLoadingSenderDetails}
-                formatMessage={formatMessage}
-                smsTraiDltEnabled={smsTraiDltEnabled}
-                registeredSenderIds={registeredSenderIds}
-                whatsappAccountFromForm={
-                  channel === CHANNELS.WHATSAPP && formData?.accountName
-                    ? { accountName: formData.accountName }
-                    : undefined
-                }
+          ),
+          content: (
+            <CapRow className="send-test-content">
+              <CapHeader size="label1" title={<FormattedMessage {...messages.testCustomers} />} />
+              <CapTreeSelect
+                className="test-customers-tree-select"
+                dropdownMatchSelectWidth
+                dropdownClassName="test-customers-tree-select-dropdown"
+                listHeight={280}
+                loading={isFetchingTestCustomers || isFetchingTestGroups}
+                treeData={testEntitiesTreeData}
+                onChange={handleTestEntitiesChange}
+                value={selectedTestEntities}
+                showSearch
+                searchValue={searchValue}
+                onSearch={setSearchValue}
+                treeNodeFilterProp="title"
+                {...(addCustomerContent ? { notFoundContent: addCustomerContent } : {})}
+                multiple
+                placeholder={formatMessage(messages.testCustomersPlaceholder)}
+                dropdownStyle={{ zIndex: 900, maxHeight: 320 }}
+                placement="bottomLeft"
+                getPopupContainer={(node) => node.closest('.send-test-section') || document.body}
               />
-            )}
-            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}>
-              <FormattedMessage {...messages.sendTestButton} />
-            </CapButton>
-          </CapRow>),
-        key: 1,
-      },
-    ]}
-  />
-);
+              {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
+                <DeliverySettings
+                  channel={channel}
+                  deliverySettings={deliverySettings || {}}
+                  senderDetailsOptions={senderDetailsOptions || []}
+                  wecrmAccounts={wecrmAccounts || []}
+                  onSaveDeliverySettings={onSaveDeliverySettings}
+                  isLoadingSenderDetails={isLoadingSenderDetails}
+                  formatMessage={formatMessage}
+                  smsTraiDltEnabled={smsTraiDltEnabled}
+                  registeredSenderIds={registeredSenderIds}
+                  whatsappAccountFromForm={
+                    channel === CHANNELS.WHATSAPP && formData?.accountName
+                      ? { accountName: formData.accountName }
+                      : undefined
+                  }
+                />
+              )}
+              <CapButton
+                onClick={handleSendTestMessage}
+                disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}
+              >
+                <FormattedMessage {...messages.sendTestButton} />
+              </CapButton>
+            </CapRow>
+          ),
+          key: 1,
+        },
+      ]}
+    />
+  );
+};
 
 SendTestMessage.propTypes = {
   isFetchingTestCustomers: PropTypes.bool.isRequired,
@@ -94,6 +117,9 @@ SendTestMessage.propTypes = {
   channel: PropTypes.string,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  renderAddTestCustomerButton: PropTypes.func,
+  searchValue: PropTypes.string,
+  setSearchValue: PropTypes.func,
   deliverySettings: PropTypes.object,
   senderDetailsOptions: PropTypes.array,
   wecrmAccounts: PropTypes.array,
@@ -106,6 +132,9 @@ SendTestMessage.propTypes = {
 SendTestMessage.defaultProps = {
   formData: undefined,
   channel: undefined,
+  renderAddTestCustomerButton: undefined,
+  searchValue: '',
+  setSearchValue: undefined,
   deliverySettings: {},
   senderDetailsOptions: [],
   wecrmAccounts: [],