@globalpayments/vega 2.17.0 → 2.18.1

package/dist/collection/helpers/event-manager/eventID/componentEventIdMap.js

@@ -1,8 +1,8 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaChange, VegaEventClick, VegaDateDblClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaFormSubmit, VegaFormReset, VegaValidate, VegaRemove, VegaCancel, VegaFocus, VegaBlur, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, } from './vegaEventId';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaFormSubmit, VegaFormReset, VegaValidate, VegaRemove, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, } from './vegaEventId';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
-  ['vega-banner', [VegaClose]],
+  ['vega-banner', [VegaClose, VegaActionButtonClick]],
   ['vega-breadcrumb', [VegaClick]],
   ['vega-button', [VegaClick]],
   ['vega-button-circle', [VegaClick]],
@@ -26,6 +26,7 @@ const entries = [
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
   ['vega-input', [VegaChange, VegaFocus, VegaBlur]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
+  ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],
   ['vega-input-select', [VegaChange, VegaSearch]],
   ['vega-item-toggle', [VegaToggleStatus]],

package/dist/collection/helpers/event-manager/eventID/vegaEventId.js

@@ -87,4 +87,6 @@ export const VegaDropdownSearch = new VegaEventID('vegaSearch', 'dropdownSearch'
 export const VegaActionClick = new VegaEventID('vegaActionClick', 'actionClick');
 export const VegaEventClick = new VegaEventID('vegaEventClick', 'eventClick');
 export const VegaDateDblClick = new VegaEventID('vegaDateDblClick', 'dateDblClick');
+export const VegaCountryChange = new VegaEventID('vegaCountryChange', 'countryChange');
+export const VegaActionButtonClick = new VegaEventID('vegaActionButtonClick', 'actionButtonClick');
 export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur];

package/dist/collection/helpers/event-manager/slimmers/childNodesEventPreventSlimmer.js

@@ -8,6 +8,8 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import InternalVegaEventManager from '../internalVegaEventManager';
 import jqueryDelegatedStrategyController from '../event-delegated/jqueryDelegatedStrategyController';
 import internalVegaEventManager from '../internalVegaEventManager';
+import vegaEnvManager from '../../vega-telemetry-helper/vegaEnvManager';
+import { FeatureFlag } from '../../feature-control/featureFlagController';
 /** The ChildNodesEventPreventSlimmer class prevents specified events from propagating to parent elements. */
 export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
   /**
@@ -16,13 +18,15 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
    * @param {VegaEventID[]} eventIds - The eventNames parameter is an array of VegaEventID that represents the names of the events that will be handled by the constructor.
    * @param {HTMLElement} getHostElement - The `getHostElement` parameter is a function that returns an `HTMLElement`. It is used to get the parent element where the events will be attached.
    * @param {boolean | EventPreventOptions} options - add event listener in capture or bubbles.
+   * @param {boolean | EventPreventOptions} needSkipByDefault - should skip event prevent by default
    */
-  constructor(eventIds, getHostElement, options) {
+  constructor(eventIds, getHostElement, options, needSkipByDefault) {
     super();
     // the event names need prevent from child nodes
     this.eventIds = [];
     this.useCapture = false;
     this.isEventListenerAdded = false;
+    this.disabled = false;
     /**
      * prevent the child event
      *
@@ -53,6 +57,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
       this.useCapture = useCapture;
       this.customPreventHandle = customPreventHandle;
     }
+    this.disabled = needSkipByDefault === true ? true : false;
   }
   /**
    * add event listener when component connected, we can call the method manually if the host element not ready when connectedCallback
@@ -67,6 +72,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
     if (!this.isEventListenerAdded) {
       this.setup();
     }
+    this.setSkipEventPreventFlag();
   }
   /**
    * remove the event listener when component disconnect
@@ -74,6 +80,19 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
   destroy() {
     this.addOrRemoveEventListener('remove');
   }
+  /**
+   * The function `setSkipEventPreventFlag` sets a flag on a host element to skip event prevention under certain conditions.
+   */
+  setSkipEventPreventFlag() {
+    if (FeatureFlag.isEnabled('VEGA_REACT.SKIP_NATIVE_EVENT_PREVENT_BY_DEFAULT') &&
+      this.disabled &&
+      this.host &&
+      vegaEnvManager.getVegaEnv().framework === 'react' &&
+      internalVegaEventManager.getSemantics(this.host).namespace === 'native') {
+      const el = this.getHostElement();
+      el.setAttribute('data-vega-no-event-prevent', 'true');
+    }
+  }
   /**
    * add or remove the event from the parent element
    *

package/dist/collection/helpers/event-manager/test/childNodesEventPreventSlimmer.test.js

@@ -9,6 +9,9 @@ import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { ChildNodesEventPreventSlimmer } from '../slimmers/childNodesEventPreventSlimmer';
 import { VegaChange, VegaClick, VegaValidate } from '../eventID/vegaEventId';
 import InternalVegaEventManager from '../internalVegaEventManager';
+import internalVegaEventManager from '../internalVegaEventManager';
+import vegaEnvManager from '../../vega-telemetry-helper/vegaEnvManager';
+import { FeatureFlag } from '../../publicApi';
 describe('ChildNodesEventPreventSlimmer', () => {
   class MockedSlimmer {
     constructor() {
@@ -27,6 +30,23 @@ describe('ChildNodesEventPreventSlimmer', () => {
   __decorate([
     InjectVegaSlimmer()
   ], MockedSlimmer.prototype, "slimmer", void 0);
+  class TestComponent {
+    constructor() {
+      this.slimmer = new ChildNodesEventPreventSlimmer([VegaClick], () => this.parentElement, true, true);
+    }
+    connectedCallback() {
+      methodPlaceholder();
+    }
+    disconnectedCallback() {
+      methodPlaceholder();
+    }
+    componentDidLoad() {
+      methodPlaceholder();
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], TestComponent.prototype, "slimmer", void 0);
   class MockedComponent {
     constructor() {
       this.slimmer = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
@@ -121,6 +141,23 @@ describe('ChildNodesEventPreventSlimmer', () => {
     host.querySelector('span').dispatchEvent(new CustomEvent('vegaClick', { bubbles: true, cancelable: true }));
     expect(mockListener).toBeCalledTimes(2);
   });
+  test('should set skip flag when framework is react and event namespace is native', () => {
+    const mockedComponent = new TestComponent();
+    const host = document.createElement('div');
+    mockedComponent.host = host;
+    host.innerHTML = `<p><span></span></p>`;
+    mockedComponent.parentElement = host.querySelector('p');
+    expect(mockedComponent.parentElement.hasAttribute('data-vega-no-event-prevent')).toBeFalsy();
+    mockedComponent.componentDidLoad();
+    expect(mockedComponent.parentElement.hasAttribute('data-vega-no-event-prevent')).toBeFalsy();
+    spyOn(internalVegaEventManager, 'getSemantics').and.returnValue({ namespace: 'native' });
+    spyOn(vegaEnvManager, 'getVegaEnv').and.returnValue({ framework: 'react' });
+    mockedComponent.componentDidLoad();
+    expect(mockedComponent.parentElement.hasAttribute('data-vega-no-event-prevent')).toBeFalsy();
+    FeatureFlag.enable('VEGA_REACT.SKIP_NATIVE_EVENT_PREVENT_BY_DEFAULT');
+    mockedComponent.componentDidLoad();
+    expect(mockedComponent.parentElement.getAttribute('data-vega-no-event-prevent')).toEqual('true');
+  });
 });
 describe('shadow dom', () => {
   class MockedShadowComponent {

package/dist/collection/helpers/feature-control/featureFlagsMap.js

@@ -159,5 +159,16 @@ const FeatureFlagsMap = {
     createdTimestamp: 1719910557333,
     createdAtVersion: '2.12.0',
   },
+  'VEGA_BANNER_DEPRECATED_ACTION_BUTTON_PROP_VEGA_CLICK': {
+    description: `Feature flag to deprecated the vega-banner component property actionButtons property vegaClick`,
+    createdTimestamp: 1723449433833,
+    createdAtVersion: '2.18.0',
+  },
+  'VEGA_REACT.SKIP_NATIVE_EVENT_PREVENT_BY_DEFAULT': {
+    description: `Feature flag to skip the native event prevent logic in default`,
+    createdTimestamp: 1723996800000,
+    createdAtVersion: '2.18.1',
+    disabledByDefault: true,
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/formatter/string-formatter/custom-formatter-strategy.js

@@ -0,0 +1,48 @@
+/**
+ * Used to format a string using a custom formatter.
+ */
+export class CustomFormatterStrategy {
+  /**
+   * The constructor function takes a CustomStringFormatter parameter and assigns it to the formatter
+   * property of the class.
+   *
+   * @param {CustomStringFormatter} formatter - The `formatter` parameter is an instance of a custom
+   * string formatter class that you are passing to the constructor of the class. This custom string
+   * formatter class likely contains methods or properties related to formatting strings in a specific
+   * way according to your requirements.
+   */
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+  /**
+   * The format function in TypeScript takes a string input and returns the formatted output using a
+   * formatter method.
+   *
+   * @param {string} input - The `format` function takes a string input and passes it to the `formatter`
+   * function to format it.
+   * @returns {string} The `format` function is returning the result of calling the `formatter` function with the
+   * `input` string as its argument.
+   */
+  format(input) {
+    return this.formatter(input);
+  }
+  /**
+   * The function calculates the caret position in a formatted input string.
+   *
+   * @param {string} input - The `input` parameter in the `calculateCaretPosition` function is a string
+   * that represents the text input where you want to calculate the caret position.
+   * @returns {Nullable<number>} The `calculateCaretPosition` function is returning the length of the formatted input
+   * string.
+   */
+  calculateCaretPosition(input) {
+    return this.format(input).length;
+  }
+  /**
+   * Trigger the formatter at init
+   *
+   * @returns {boolean} true
+   */
+  shouldTriggerAtInit() {
+    return true;
+  }
+}

package/dist/collection/helpers/formatter/test/string-formatter/custom-formatter-strategy.test.js

@@ -0,0 +1,7 @@
+import { CustomFormatterStrategy } from '../../string-formatter/custom-formatter-strategy';
+test('custom formatter strategy is working as expected', () => {
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  expect(customFormatterStrategy.format('test')).toBe('TEST');
+  expect(customFormatterStrategy.calculateCaretPosition('test')).toBe(4);
+  expect(customFormatterStrategy.shouldTriggerAtInit()).toBe(true);
+});

package/dist/collection/helpers/slimmers/element-appender-container/defaultWrapper.js

@@ -23,7 +23,9 @@ export class DefaultWrapper {
      */
     this.retrieve = () => {
       const container = document.body;
-      container.append(this.showConfig.appendableElement);
+      if (this.showConfig.appendableElement.parentElement !== container) {
+        container.append(this.showConfig.appendableElement);
+      }
       return container;
     };
   }

package/dist/collection/helpers/slimmers/element-appender-container/positionRelativeToWrapper.js

@@ -26,7 +26,9 @@ export class PositionRelativeToWrapper {
      */
     this.retrieve = () => {
       const container = document.querySelector(this.showConfig.positionRelativeTo);
-      container.append(this.showConfig.appendableElement);
+      if (this.showConfig.appendableElement.parentElement !== container) {
+        container.append(this.showConfig.appendableElement);
+      }
       return container;
     };
   }

package/dist/collection/helpers/slimmers/test/componentUsageRuntimeMetrics.test.js

@@ -55,20 +55,22 @@ describe('VegaComponentUsageRuntimeMetricsSlimmer', () => {
     jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
     const component = new MockedComponentTwo();
     component.componentDidRender();
-    await sleep(100);
-    expect(VegaTelemetryRuntimeMetricsManager.emit).not.toBeCalled();
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).not.toBeCalled();
+    });
   });
   it('should send component usage to telemetry', async () => {
     jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
     const component = new MockedComponent();
     component.componentDidRender();
-    await sleep(100);
-    expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('componentUsage', {
-      componentName: 'MOCKED-COMPONENT',
-      data: {
-        COMPONENT_USED: true,
-        VARIANT_IS_PRIMARY: false,
-      },
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('componentUsage', {
+        componentName: 'MOCKED-COMPONENT',
+        data: {
+          COMPONENT_USED: true,
+          VARIANT_IS_PRIMARY: false,
+        },
+      });
     });
   });
 });

package/dist/collection/helpers/ui/test/elementAppender.test.js

@@ -383,3 +383,43 @@ test('should override the positionRelativeTo while set in show method', () => {
   expect(outer.style.position).toEqual('relative');
   drop2.hide();
 });
+test('should append element to body only once when the element is not in', () => {
+  document.body.innerHTML = `<div class='test-parent-host'><div class='test-outer'><div class='test-host'><div class='dropdown'></div></div></div></div>`;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+  });
+  spyOn(document.body, 'append').and.callThrough();
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(document.body);
+  drop1.hide();
+  expect(element).toHaveClass('vega-force-hidden');
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(document.body);
+  expect(document.body.append).toBeCalledTimes(1);
+});
+test('should append element to positionRelativeTo element only once when the element is not in', () => {
+  document.body.innerHTML = `<div class='test-parent-host'><div class='test-outer'><div class='test-host'><div class='dropdown'></div></div></div></div>`;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  const container = document.querySelector('.test-parent-host');
+  const drop1 = new ElementAppender({
+    target: target,
+    appendableElement: element,
+    positionRelativeTo: '.test-parent-host',
+  });
+  spyOn(container, 'append').and.callThrough();
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(container);
+  drop1.hide();
+  expect(element).toHaveClass('vega-force-hidden');
+  drop1.show();
+  expect(element).not.toHaveClass('vega-force-hidden');
+  expect(element.parentElement).toEqual(container);
+  expect(container.append).toBeCalledTimes(1);
+});

package/dist/collection/helpers/validator/rules/inputPhoneNumberRequiredRule.js

@@ -0,0 +1,58 @@
+/**
+ * A rule that checks if input phone number is empty or not
+ *
+ * @implements {FormFieldValidationRule<string>}
+ */
+export class InputPhoneNumberRequiredRule {
+  constructor(phoneNumberValueGetter) {
+    this.phoneNumberValueGetter = phoneNumberValueGetter;
+  }
+  /**
+   * It checks if the input is a valid value.
+   *
+   * @param {unknown} input - The value of the input field.
+   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Invalid value ${input} for input phone number`);
+    }
+    const isValid = this.phoneNumberValueGetter() !== '';
+    return {
+      isValid,
+      message: isValid ? '' : 'This field is required',
+    };
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * If the input is undefined or null, return true, otherwise return true if the input is a string.
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean}A boolean.
+   */
+  isAcceptedInputType(input) {
+    if (input === undefined || input === null)
+      return true;
+    return typeof input === 'string';
+  }
+}

package/dist/collection/helpers/validator/rules/validPhoneNumberRule.js

@@ -0,0 +1,108 @@
+import { getCountryCallingCode, parsePhoneNumber } from 'libphonenumber-js';
+/**
+ * A rule that checks if it's a valid phone number
+ *
+ * @implements {FormFieldValidationRule<string>}
+ */
+export class ValidPhoneNumberRule {
+  constructor(countryCodeGetter) {
+    this.countryCodeGetter = countryCodeGetter;
+    /**
+     * Generate an invalid result
+     *
+     * @param {string} message Error message
+     * @returns {EvaluateResult} invalid validation result
+     */
+    this.invalidResult = (message) => ({
+      isValid: false,
+      message,
+    });
+    /**
+     * Generate a valid result
+     *
+     * @returns {EvaluateResult} invalid validation result
+     */
+    this.validResult = () => ({
+      isValid: true,
+      message: '',
+    });
+  }
+  /**
+   * It checks if the phone number is valid.
+   *
+   * @param {string} input - The input value to be evaluated.
+   * @returns {EvaluateResult} an object with two properties: isValid and message.
+   */
+  evaluate(input) {
+    return this.isValidPhoneNumberForCountry(input, this.countryCodeGetter());
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} The return value is a boolean that indicates whether the input can be evaluated.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * The function `isAcceptedInputType` checks if the input is a string and not equal to a specific
+   * country calling code.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * In the `isAcceptedInputType` function, it checks if the `input` is a string and not equal to a
+   * specific country calling code.
+   * @returns {boolean} a boolean value based on whether the input is a string and not equal to the country calling
+   * code with a plus sign appended to it.
+   */
+  isAcceptedInputType(input) {
+    return typeof input === 'string' && input !== `+${getCountryCallingCode(this.countryCodeGetter())}`;
+  }
+  /**
+   * The function `isValidPhoneNumberForCountry` validates a phone number for a specific country code.
+   *
+   * @param {string} number - The `number` parameter is a string representing a phone number that you
+   * want to validate.
+   * @param {VegaCountryCode} countryCode - The `countryCode` parameter in the `isValidPhoneNumberForCountry`
+   * function is of type `VegaCountryCode`. It is used to specify the country for which the phone number
+   * should be validated. The function attempts to parse the input phone number with the specified
+   * country code and performs validation checks to determine if the
+   * @returns {EvaluateResult} The `isValidPhoneNumberForCountry` function returns an `EvaluateResult` object. This object
+   * contains information about whether the phone number provided is valid for the specified country
+   * code. The function may return a valid result if the phone number is valid for the country code, an
+   * invalid result if the phone number is not valid or does not belong to the specified country, or an
+   * error message if an exception occurs during
+   */
+  isValidPhoneNumberForCountry(number, countryCode) {
+    try {
+      const phoneNumber = parsePhoneNumber(number, {
+        defaultCountry: countryCode,
+        // Demand that the entire input string must be a phone number.
+        // Otherwise, it would "extract" a phone number from an input string.
+        extract: false,
+      });
+      if (phoneNumber.country && phoneNumber.country !== countryCode) {
+        return this.invalidResult(`Phone number is valid but it belongs to country ${phoneNumber.country}, not country ${countryCode}`);
+      }
+      if (!phoneNumber.isValid()) {
+        return this.invalidResult(`Phone number is not valid`);
+      }
+      return this.validResult();
+    }
+    catch (_a) {
+      return this.invalidResult(`Phone number is not valid`);
+    }
+  }
+}

package/dist/collection/helpers/validator/test/rules/inputPhoneNumberRequiredRule.test.js

@@ -0,0 +1,105 @@
+import { InputPhoneNumberRequiredRule } from '../../rules/inputPhoneNumberRequiredRule';
+test('return result as expect if input can evaluate', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(rule.canEvaluate('123')).toEqual(true);
+  expect(rule.canEvaluate('')).toEqual(true);
+  expect(rule.canEvaluate(' ')).toEqual(true);
+  expect(rule.canEvaluate(undefined)).toEqual(true);
+  expect(rule.canEvaluate(null)).toEqual(true);
+  expect(rule.canEvaluate('123', {
+    touched: true,
+    modified: true,
+    disabled: false,
+    visible: true,
+  })).toEqual(true);
+});
+test('return result as expect if input can not evaluate', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(rule.canEvaluate(123)).toEqual(false);
+  expect(rule.canEvaluate(false)).toEqual(false);
+  expect(rule.canEvaluate('123', {
+    touched: true,
+    modified: true,
+    disabled: false,
+    visible: false,
+  })).toEqual(false);
+});
+test('return evaluate result as expect as false', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '');
+  expect(rule.evaluate(null)).toEqual({
+    isValid: false,
+    message: `This field is required`,
+  });
+  expect(rule.evaluate(undefined)).toEqual({
+    isValid: false,
+    message: `This field is required`,
+  });
+  expect(rule.evaluate('123')).toEqual({
+    isValid: false,
+    message: `This field is required`,
+  });
+  expect(rule.evaluate('')).toEqual({
+    isValid: false,
+    message: `This field is required`,
+  });
+  expect(rule.evaluate(' ')).toEqual({
+    isValid: false,
+    message: `This field is required`,
+  });
+});
+test('return evaluate result as expect as true', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(rule.evaluate(null)).toEqual({
+    isValid: true,
+    message: '',
+  });
+  expect(rule.evaluate(undefined)).toEqual({
+    isValid: true,
+    message: '',
+  });
+  expect(rule.evaluate('123')).toEqual({
+    isValid: true,
+    message: '',
+  });
+  expect(rule.evaluate('')).toEqual({
+    isValid: true,
+    message: '',
+  });
+  expect(rule.evaluate(' ')).toEqual({
+    isValid: true,
+    message: '',
+  });
+});
+test('should not show error message if status is disabled or invisible', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(rule.shouldShowError({
+    touched: true,
+    modified: true,
+    disabled: true,
+    visible: false,
+  })).toEqual(false);
+});
+test('should show error message if status is not disabled or invisible', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(rule.shouldShowError({
+    touched: true,
+    modified: true,
+    disabled: false,
+    visible: true,
+  })).toEqual(true);
+});
+test('should not show error message if status is not touched or not modified', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(rule.shouldShowError({
+    touched: false,
+    modified: false,
+    disabled: false,
+    visible: true,
+  })).toEqual(false);
+});
+test('throw error as expect if set a error value', () => {
+  const rule = new InputPhoneNumberRequiredRule(() => '456');
+  expect(() => {
+    rule.evaluate(1);
+  }).toThrow('Invalid value 1 for input phone number');
+});

package/dist/collection/helpers/validator/test/rules/validPhoneNumberRule.test.js

@@ -0,0 +1,74 @@
+import { ValidPhoneNumberRule } from '../../rules/validPhoneNumberRule';
+describe('ValidPhoneNumberRule', () => {
+  test('return true if input can be evaluated', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    expect(rule.canEvaluate('+13023334444')).toEqual(true);
+    expect(rule.canEvaluate('+13023334444', {
+      touched: true,
+      modified: true,
+      disabled: false,
+      visible: true,
+    })).toEqual(true);
+  });
+  test('return false if input can not be evaluated', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    expect(rule.canEvaluate(false)).toEqual(false);
+    expect(rule.canEvaluate(123)).toEqual(false);
+    expect(rule.canEvaluate('+123', {
+      touched: true,
+      modified: true,
+      disabled: false,
+      visible: false,
+    })).toEqual(false);
+  });
+  test('return the valid evaluate result with phone numbers', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    expect(rule.evaluate('+13023334444')).toEqual({
+      isValid: true,
+      message: ``,
+    });
+    expect(rule.evaluate('+13433111111')).toEqual({
+      isValid: false,
+      message: `Phone number is valid but it belongs to country CA, not country US`,
+    });
+    expect(rule.evaluate('+134331111')).toEqual({
+      isValid: false,
+      message: `Phone number is not valid`,
+    });
+    expect(rule.evaluate('1')).toEqual({
+      isValid: false,
+      message: `Phone number is not valid`,
+    });
+    expect(rule.evaluate('+123')).toEqual({
+      isValid: false,
+      message: `Phone number is not valid`,
+    });
+  });
+  test('should not show error message if status is disabled or invisible', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    expect(rule.shouldShowError({
+      touched: true,
+      modified: true,
+      disabled: true,
+      visible: false,
+    })).toEqual(false);
+  });
+  test('should show error message if status is not disabled or invisible', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    expect(rule.shouldShowError({
+      touched: true,
+      modified: true,
+      disabled: false,
+      visible: true,
+    })).toEqual(true);
+  });
+  test('should not show error message if status is not touched or not modified', () => {
+    const rule = new ValidPhoneNumberRule(() => 'US');
+    expect(rule.shouldShowError({
+      touched: false,
+      modified: false,
+      disabled: false,
+      visible: true,
+    })).toEqual(false);
+  });
+});