@capillarytech/creatives-library 8.0.325 → 8.0.327-alpha.0

package/package.json

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

package/services/api.js

@@ -741,4 +741,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

@@ -29,6 +29,8 @@ import {
   getAssetStatus,
   getBeePopupBuilderToken,
   getCmsAccounts,
+  getMembersLookup,
+  createTestCustomer,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1014,3 +1016,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

@@ -17,6 +17,8 @@ import {
 } from "../v2Containers/CreativesContainer/constants";
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
 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} />
 );
@@ -530,3 +532,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/tagValidations.js

@@ -207,8 +207,7 @@ export const validateIfTagClosed = (value) => {
 export const preprocessHtml = (content) => {
   const replacements = {
     "'": "'",
-    """: "'",
-    '"': "'",
+    """: '"',
     "&": "&",
     "&lt;": "<",
     "&gt;": ">",
@@ -226,7 +225,7 @@ export const preprocessHtml = (content) => {
   });
 
   // Step 2: Perform the standard replacements on the entire content
-  return contentWithStyleFixes?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|"|\n/g, (match) => replacements[match]);
+  return contentWithStyleFixes?.replace(/&#39;|&quot;|&amp;|&lt;|&gt;|\n/g, (match) => replacements[match]);
 };
 
 //this is used to get the subtags from custom or extended tags

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';
@@ -629,6 +634,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/utils/tests/tagValidations.test.js

@@ -242,7 +242,6 @@ describe("validateTags", () => {
       tagsParam,
       location,
       tagModule,
-      waitEventContextTags: {},
     });
 
     expect(result.valid).toEqual(true);
@@ -274,7 +273,6 @@ describe("validateTags", () => {
       tagsParam: tagsParamLocal,
       location,
       tagModule,
-      waitEventContextTags: {},
     });
 
     expect(result.valid).toEqual(true);
@@ -312,7 +310,6 @@ describe("validateTags", () => {
       tagsParam: tagsParamLocal,
       location,
       tagModule,
-      waitEventContextTags: {},
     });
 
     expect(result.valid).toEqual(false);
@@ -338,7 +335,6 @@ describe("validateTags", () => {
       tagsParam: tagsParamUnsubscribe,
       location,
       tagModule,
-      waitEventContextTags: {},
     });
     expect(resultMissing.missingTags).toContain("unsubscribe");
     expect(resultMissing.valid).toBe(false);
@@ -349,7 +345,6 @@ describe("validateTags", () => {
       tagsParam: tagsParamUnsubscribe,
       location,
       tagModule,
-      waitEventContextTags: {},
     });
     expect(resultSkipped.missingTags).not.toContain("unsubscribe");
     expect(resultSkipped.valid).toBe(true);
@@ -365,35 +360,6 @@ describe("validateTags", () => {
     expect(resultWhitespace.valid).toBe(true);
     expect(resultWhitespace.unsupportedTags ?? []).toEqual([]);
   });
-
-  it('should treat tags from waitEventContextTags as supported', () => {
-    const content = 'Hello {{waitEvent.orderId}}';
-    const tagsParam = [];
-    const injectedTagsParams = [];
-    const location = { query: { module: 'DEFAULT' } };
-    const tagModule = null;
-    const waitEventContextTags = {
-      block1: {
-        eventName: 'Order Placed',
-        blockName: 'Wait Block',
-        tags: [{ tagName: 'waitEvent.orderId', label: 'Order ID' }],
-      },
-    };
-
-    const result = validateTags({
-      content,
-      tagsParam,
-      injectedTagsParams,
-      location,
-      tagModule,
-      eventContextTags: [],
-      waitEventContextTags,
-    });
-
-    expect(result.valid).toEqual(true);
-    expect(result.missingTags).toEqual([]);
-    expect(result.isBraceError).toEqual(false);
-  });
 });
 
 describe('validateTags wrapper (v2 consumers)', () => {
@@ -676,7 +642,7 @@ describe('preprocessHtml', () => {
 
   it('should replace " with double quotes', () => {
     const input = 'She said, "Hello, World!"';
-    const expectedOutput = "She said, 'Hello, World!'";
+    const expectedOutput = 'She said, "Hello, World!"';
     expect(preprocessHtml(input)).toEqual(expectedOutput);
   });
 

package/v2Components/CapTagList/index.js

@@ -207,7 +207,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         } else {
           this.props.onSelect(selectedKeys, info);
           this.setState({visible: false});
-          this.setState({expandedKeys: []})
         }
       } else if (info && info.selectedNodes && info.selectedNodes.length > 0 && !info.selectedNodes[0].props.isLeaf) {
         this.handleOnExpand(selectedKeys[0]);
@@ -234,13 +233,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     }
   };
 
-  /** Single-line ellipsis within popover width; full label on hover via CapTooltip. */
-  wrapTreeTitle = (displayNode, text) => (
-    <CapTooltip title={displayNode}>
-      {text || displayNode}
-    </CapTooltip>
-  );
-
   renderDynamicTagFlow = () => {
     this.setState({showModal: true, visible: false});
   };
@@ -288,7 +280,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         if (temp?.length) {
           const tagValue = (
             <CapTreeNode
-              title={disabled ? this.wrapTreeTitle(loyaltyAttrDisableText, val?.name) : this.wrapTreeTitle(val?.name)}
+              title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val?.name}</CapTooltip> : val?.name}
               tag={val}
               key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
               disabled={disabled}
@@ -311,9 +303,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               <CapTreeNode
                 title={
                   childDisabled ? (
-                    this.wrapTreeTitle(key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText, val?.desc || val?.name)
+                    <CapTooltip
+                      title={
+                        key === CUSTOMER_BARCODE_TAG
+                          ? customerBarcodeDisableText
+                          : loyaltyAttrDisableText
+                      }
+                    >
+                      {val?.desc || val?.name}
+                    </CapTooltip>
                   ) : (
-                    this.wrapTreeTitle(val?.desc || val?.name)
+                    val?.desc || val?.name
                   )
                 }
                 tag={val}
@@ -339,9 +339,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             <CapTreeNode
               title={
                 childDisabled ? (
-                  this.wrapTreeTitle(key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText, val?.desc || val?.name)
+                  <CapTooltip
+                    title={
+                      key === CUSTOMER_BARCODE_TAG
+                        ? customerBarcodeDisableText
+                        : loyaltyAttrDisableText
+                    }
+                  >
+                    {val?.desc || val?.name}
+                  </CapTooltip>
                 ) : (
-                  this.wrapTreeTitle(val?.desc || val?.name)
+                  val?.desc || val?.name
                 )
               }
               tag={val}
@@ -399,7 +407,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <CapRow className="cap-tag-list-popover-inner">
+      <CapRow>
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}

package/v2Components/CapTagList/style.scss

@@ -1,53 +1,5 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables";
 
-// Tag list popover: keep overlay width aligned with search (250px); tree rows ellipsis + tooltip for full text
-.cap-tag-list-popover-overlay.ant-popover {
-  .ant-popover-inner-content {
-    max-width: 20rem;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-}
-
-.cap-tag-list-popover-inner {
-  max-width: 20rem;
-  min-width: 0;
-  box-sizing: border-box;
-
-  .ant-tree.cap-tree-v2.ant-tree-icon-hide {
-    width: 100%;
-    max-width: 100%;
-
-    ul {
-      max-width: 100%;
-    }
-
-    li {
-      overflow: hidden;
-      max-width: 100%;
-    }
-
-    li .ant-tree-node-content-wrapper {
-      width: calc(100% - 3.5rem); // leave room for switcher (~24px)
-      max-width: calc(100% - 3.5rem);
-      overflow: hidden;
-      vertical-align: top;
-      box-sizing: border-box;
-    }
-
-    .cap-tag-list-tree-title-wrap {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 100%;
-      vertical-align: top;
-      margin-top: 0.5rem;
-    }
-  }
-}
-
 @media (max-height: 25rem) {
   .ant-tree.cap-tree-v2.ant-tree-icon-hide {
     height: 8.5714rem;

package/v2Components/CapTagListWithInput/index.js

@@ -27,7 +27,6 @@ export const CapTagListWithInput = (props) => {
     userLocale = 'en',
     eventContextTags = [],
     restrictPersonalization = false,
-    waitEventContextTags = {},
     // CapInput props
     inputId,
     inputValue = '',
@@ -78,7 +77,6 @@ export const CapTagListWithInput = (props) => {
             userLocale={userLocale}
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
             style={tagListStyle}
             popoverPlacement={popoverPlacement}
             restrictPersonalization={restrictPersonalization}
@@ -118,7 +116,6 @@ CapTagListWithInput.propTypes = {
   userLocale: PropTypes.string,
   eventContextTags: PropTypes.array,
   restrictPersonalization: PropTypes.bool,
-  waitEventContextTags: PropTypes.object,
 
   // CapInput props
   inputId: PropTypes.string.isRequired,
@@ -157,7 +154,6 @@ CapTagListWithInput.defaultProps = {
   userLocale: 'en',
   eventContextTags: [],
   restrictPersonalization: false,
-  waitEventContextTags: {},
   inputValue: '',
   inputSize: 'default',
   inputRequired: false,

package/v2Components/CapWhatsappCTA/index.js

@@ -52,7 +52,6 @@ export const CapWhatsappCTA = (props) => {
     injectedTags = {},
     selectedOfferDetails = [],
     eventContextTags = [],
-    waitEventContextTags = {},
   } = props;
   const { formatMessage } = intl;
   const invalidVarRegex = /{{(.*?)}}/g;
@@ -284,7 +283,6 @@ export const CapWhatsappCTA = (props) => {
                   injectedTags={injectedTags}
                   selectedOfferDetails={selectedOfferDetails}
                   eventContextTags={eventContextTags}
-                  waitEventContextTags={waitEventContextTags}
                 />
               </CapColumn>
             )}

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;