@capillarytech/creatives-library 8.0.297 → 8.0.299-alpha.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.297",
+  "version": "8.0.299-alpha.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -735,4 +735,21 @@ export const getBeePopupBuilderToken = () => {
   return request(url, getAPICallObject('GET'));
 };
 
+/**
+ * Look up member by identifier (email or mobile) for add test customer flow.
+ * Uses standard API auth headers (no x-cap-ct) to avoid CORS preflight issues with node layer.
+ * @param {string} identifierType - 'email' or 'mobile'
+ * @param {string} identifierValue - email address or mobile number
+ * @returns {Promise} Promise resolving to { success, response: { exists, customerDetails } }
+ */
+export const getMembersLookup = (identifierType, identifierValue) => {
+  const url = `${API_ENDPOINT}/members?identifierType=${encodeURIComponent(identifierType)}&identifierValue=${encodeURIComponent(identifierValue)}`;
+  return request(url, getAPICallObject('GET'));
+};
+
+export const createTestCustomer = (payload) => {
+  const url = `${API_ENDPOINT}/testCustomers`;
+  return request(url, getAPICallObject('POST', payload));
+};
+
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -28,6 +28,8 @@ import {
   getAssetStatus,
   getBeePopupBuilderToken,
   getCmsAccounts,
+  getMembersLookup,
+  createTestCustomer,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1007,3 +1009,86 @@ describe('getCmsAccounts', () => {
     expect(result).toBeInstanceOf(Promise);
   });
 });
+
+describe('getMembersLookup', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ success: true, response: { exists: false, customerDetails: [] } }),
+    }));
+  });
+
+  it('should return a Promise', () => {
+    const result = getMembersLookup('email', 'user@example.com');
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it('should be callable with identifierType and identifierValue', () => {
+    expect(typeof getMembersLookup).toBe('function');
+    const result = getMembersLookup('mobile', '9123456789');
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it('should call fetch with correct URL encoding and GET method', () => {
+    global.fetch.mockClear();
+    getMembersLookup('email', 'user+test@example.com');
+    expect(global.fetch).toHaveBeenCalled();
+    const calls = global.fetch.mock.calls;
+    const withEncoding = calls.find(
+      (c) =>
+        c[0] &&
+        String(c[0]).includes('members') &&
+        String(c[0]).includes('identifierType=email') &&
+        String(c[0]).includes('user%2Btest%40example.com')
+    );
+    if (withEncoding) {
+      const [url, options] = withEncoding;
+      expect(url).toContain('identifierType=email');
+      expect(url).toContain('identifierValue=user%2Btest%40example.com');
+      expect(options?.method || 'GET').toBe('GET');
+    }
+    const anyMembersCall = calls.find((c) => c[0] && String(c[0]).includes('members'));
+    expect(anyMembersCall).toBeDefined();
+    expect(anyMembersCall[0]).toContain('identifierType=');
+    expect(anyMembersCall[0]).toContain('identifierValue=');
+    expect(anyMembersCall[1]?.method || 'GET').toBe('GET');
+  });
+});
+
+describe('createTestCustomer', () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({ success: true }),
+    }));
+  });
+
+  it('should return a Promise', () => {
+    const payload = { customer: { email: 'test@example.com', firstName: 'Test' } };
+    const result = createTestCustomer(payload);
+    expect(result).toBeInstanceOf(Promise);
+  });
+
+  it('should accept customerId payload for existing customer', () => {
+    const payload = { customerId: 'cust-123' };
+    const result = createTestCustomer(payload);
+    expect(result).toBeInstanceOf(Promise);
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('testCustomers');
+    expect(lastCall[1].method).toBe('POST');
+    expect(lastCall[1].body).toBe(JSON.stringify(payload));
+  });
+
+  it('should call fetch with /testCustomers URL and POST method', () => {
+    const payload = { customer: { email: 'n@b.co', firstName: 'N' } };
+    createTestCustomer(payload);
+    expect(global.fetch).toHaveBeenCalled();
+    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
+    expect(lastCall[0]).toContain('testCustomers');
+    expect(lastCall[1].method).toBe('POST');
+    expect(lastCall[1].body).toBe(JSON.stringify(payload));
+  });
+});

package/utils/commonUtils.js

@@ -18,6 +18,8 @@ import {
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
 import { checkSupport, extractNames, skipTags as defaultSkipTags, isInsideLiquidBlock } from "./tagValidations";
 import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
+import { EMAIL_REGEX, PHONE_REGEX } from '../v2Components/CommonTestAndPreview/constants';
+
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
 );
@@ -587,3 +589,11 @@ export const checkForPersonalizationTokens = (formData) => {
   }
   return false;
 };
+
+export const isValidEmail = (email) => EMAIL_REGEX.test(email);
+export const isValidMobile = (mobile) => PHONE_REGEX.test(mobile);
+
+export const formatPhoneNumber = (phone) => {
+  if (!phone) return '';
+  return String(phone).replace(/[^\d]/g, '');
+};

package/utils/tests/commonUtil.test.js

@@ -8,6 +8,11 @@ import {
   validateCarouselCards,
   hasPersonalizationTags,
   checkForPersonalizationTokens,
+  isValidEmail,
+  isValidMobile,
+  formatPhoneNumber,
+  getMessageForDevice,
+  getTitleForDevice,
 } from "../commonUtils";
 import { skipTags } from "../tagValidations";
 import { SMS_TRAI_VAR } from '../../v2Containers/SmsTrai/Edit/constants';
@@ -586,6 +591,170 @@ describe("validateLiquidTemplateContent", () => {
   });
 });
 
+describe("isValidEmail", () => {
+  it("returns true for valid email addresses", () => {
+    expect(isValidEmail("user@example.com")).toBe(true);
+    expect(isValidEmail("test.user@domain.co")).toBe(true);
+    expect(isValidEmail("a@b.co")).toBe(true);
+  });
+
+  it("returns false for invalid email addresses", () => {
+    expect(isValidEmail("")).toBe(false);
+    expect(isValidEmail("invalid")).toBe(false);
+    expect(isValidEmail("@nodomain.com")).toBe(false);
+    expect(isValidEmail("noatsign.com")).toBe(false);
+    expect(isValidEmail("missingtld@domain")).toBe(false);
+    expect(isValidEmail("  user@example.com  ")).toBe(false);
+  });
+
+  it("returns true for edge case single-char local part", () => {
+    expect(isValidEmail("x@y.co")).toBe(true);
+  });
+});
+
+describe("isValidMobile", () => {
+  it("returns true for valid mobile numbers (8-15 digits, no leading zero)", () => {
+    expect(isValidMobile("12345678")).toBe(true);
+    expect(isValidMobile("9123456789")).toBe(true);
+    expect(isValidMobile("123456789012345")).toBe(true);
+  });
+
+  it("returns false for invalid mobile numbers", () => {
+    expect(isValidMobile("")).toBe(false);
+    expect(isValidMobile("01234567")).toBe(false);
+    expect(isValidMobile("1234567")).toBe(false);
+    expect(isValidMobile("1234567890123456")).toBe(false);
+    expect(isValidMobile("abc12345678")).toBe(false);
+    expect(isValidMobile("12345 67890")).toBe(false);
+  });
+
+  it("returns true for exactly 8 and exactly 15 digits", () => {
+    expect(isValidMobile("12345678")).toBe(true);
+    expect(isValidMobile("123456789012345")).toBe(true);
+  });
+});
+
+describe("formatPhoneNumber", () => {
+  it("returns empty string for falsy input", () => {
+    expect(formatPhoneNumber("")).toBe("");
+    expect(formatPhoneNumber(null)).toBe("");
+    expect(formatPhoneNumber(undefined)).toBe("");
+  });
+
+  it("strips non-digit characters", () => {
+    expect(formatPhoneNumber("91 234 567 890")).toBe("91234567890");
+    expect(formatPhoneNumber("+91-234567890")).toBe("91234567890");
+    expect(formatPhoneNumber("(123) 456-7890")).toBe("1234567890");
+  });
+
+  it("returns digits-only string unchanged", () => {
+    expect(formatPhoneNumber("9123456789")).toBe("9123456789");
+  });
+
+  it("returns empty string for whitespace-only input", () => {
+    expect(formatPhoneNumber("   ")).toBe("");
+  });
+});
+
+describe("hasPersonalizationTags", () => {
+  it("returns true when text has liquid tags {{ }}", () => {
+    expect(hasPersonalizationTags("Hello {{name}}")).toBe(true);
+    expect(hasPersonalizationTags("{{foo}}")).toBe(true);
+  });
+
+  it("returns true when text has bracket tags [ ]", () => {
+    expect(hasPersonalizationTags("Hello [event.name]")).toBe(true);
+    expect(hasPersonalizationTags("[tag]")).toBe(true);
+  });
+
+  it("returns false for empty or no tags", () => {
+    expect(hasPersonalizationTags("")).toBeFalsy();
+    expect(hasPersonalizationTags()).toBeFalsy();
+    expect(hasPersonalizationTags("plain text")).toBe(false);
+    expect(hasPersonalizationTags("only {{ open")).toBe(false);
+  });
+
+  it("returns false when only [ or only ] present without matching pair", () => {
+    expect(hasPersonalizationTags("only [ open")).toBe(false);
+    expect(hasPersonalizationTags("only ] close")).toBe(false);
+  });
+
+  it("returns true when liquid tags have content with spaces", () => {
+    expect(hasPersonalizationTags("Hello {{ customer.name }}")).toBe(true);
+  });
+});
+
+describe("getMessageForDevice", () => {
+  it("returns message for device from templateData", () => {
+    const templateData = {
+      versions: {
+        android: { base: { expandableDetails: { message: "Android msg" } } },
+        ios: { base: { expandableDetails: { message: "iOS msg" } } },
+      },
+    };
+    expect(getMessageForDevice(templateData, "android")).toBe("Android msg");
+    expect(getMessageForDevice(templateData, "ios")).toBe("iOS msg");
+  });
+
+  it("returns undefined for missing path", () => {
+    expect(getMessageForDevice(null, "android")).toBeUndefined();
+    expect(getMessageForDevice({}, "android")).toBeUndefined();
+    expect(getMessageForDevice({ versions: {} }, "android")).toBeUndefined();
+  });
+
+  it("returns undefined when base exists but expandableDetails is missing", () => {
+    expect(getMessageForDevice({ versions: { android: { base: {} } } }, "android")).toBeUndefined();
+  });
+});
+
+describe("getTitleForDevice", () => {
+  it("returns title for device from templateData", () => {
+    const templateData = {
+      versions: {
+        android: { base: { title: "Android title" } },
+        ios: { base: { title: "iOS title" } },
+      },
+    };
+    expect(getTitleForDevice(templateData, "android")).toBe("Android title");
+    expect(getTitleForDevice(templateData, "ios")).toBe("iOS title");
+  });
+
+  it("returns empty string for missing title", () => {
+    expect(getTitleForDevice(null, "android")).toBe("");
+    expect(getTitleForDevice({}, "android")).toBe("");
+    expect(getTitleForDevice({ versions: { android: { base: {} } } }, "android")).toBe("");
+  });
+
+  it("returns empty string when base.title is undefined", () => {
+    expect(getTitleForDevice({ versions: { android: { base: { title: undefined } } } }, "android")).toBe("");
+  });
+});
+
+describe("checkForPersonalizationTokens", () => {
+  it("returns true when formData contains liquid or bracket tokens", () => {
+    expect(checkForPersonalizationTokens({ 0: { content: "Hi {{name}}" } })).toBe(true);
+    expect(checkForPersonalizationTokens({ tab1: { message: "Hello [event.id]" } })).toBe(true);
+  });
+
+  it("returns false for empty or no tokens", () => {
+    expect(checkForPersonalizationTokens(null)).toBe(false);
+    expect(checkForPersonalizationTokens({})).toBe(false);
+    expect(checkForPersonalizationTokens({ 0: { content: "plain" } })).toBe(false);
+  });
+
+  it("returns false for non-object formData", () => {
+    expect(checkForPersonalizationTokens("string")).toBe(false);
+  });
+
+  it("returns true for two-level nested object containing token", () => {
+    expect(checkForPersonalizationTokens({ tab: { body: "Hi {{name}}" } })).toBe(true);
+  });
+
+  it("returns false for formData with array value (no string tokens)", () => {
+    expect(checkForPersonalizationTokens({ 0: { items: ["a", "b"] } })).toBe(false);
+  });
+});
+
 describe("validateMobilePushContent", () => {
   const formatMessage = jest.fn(msg => msg.id);
   const messages = {

package/v2Components/CommonTestAndPreview/AddTestCustomer.js

@@ -0,0 +1,42 @@
+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

@@ -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);