Phone number with ISD codes support in Input widget

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Input_spec.js

@@ -138,6 +138,42 @@ describe("Input Widget Functionality", function() {
       .click()
       .clear();
   });
+
+  it("Input Functionality To check currency input type", function() {
+    // cy.openPropertyPane("inputwidget");
+    cy.selectDropdownValue(commonlocators.dataType, "Currency");
+    cy.togglebar(commonlocators.allowCurrencyChange);
+    cy.testJsontext("regex", "");
+    cy.selectDropdownValue(commonlocators.currencyType, "EUR - Euro");
+    cy.selectDropdownValue(commonlocators.decimalType, "1");
+
+    cy.get(widgetsPage.innertext)
+      .click()
+      .clear()
+      .type("13242.22");
+
+    cy.get(commonlocators.inputCurrencyChangeType)
+      .invoke("text")
+      .then((text) => {
+        expect(text).to.equal("€");
+      });
+    cy.get(widgetsPage.innertext)
+      .invoke("attr", "value")
+      .then((text) => {
+        expect(text).to.equal("13,242.2");
+      });
+  });
+
+  it("Input Functionality To check phone number input type", function() {
+    // cy.openPropertyPane("inputwidget");
+    cy.selectDropdownValue(commonlocators.dataType, "Phone Number");
+    cy.selectDropdownValue(commonlocators.phoneNumberCodeType, "India (+91)");
+    cy.get(commonlocators.inputCountryCodeChangeType)
+      .invoke("text")
+      .then((text) => {
+        expect(text).to.equal("🇮🇳+91");
+      });
+  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/cypress/locators/commonlocators.json

@@ -109,5 +109,11 @@
   "paginationButton": ".rc-pagination-item",
   "switchWidgetActive": ".t--switch-widget-active",
   "switchWidgetInActive": ".t--switch-widget-inactive",
-  "switchWidgetLoading": ".t--switch-widget-loading"
+  "switchWidgetLoading": ".t--switch-widget-loading",
+  "currencyType": ".t--property-control-currency  .bp3-popover-target",
+  "phoneNumberCodeType": ".t--property-control-defaultcountrycode  .bp3-popover-target",
+  "decimalType": ".t--property-control-decimals  .bp3-popover-target",
+  "allowCurrencyChange": ".t--property-control-allowcurrencychange input[type='checkbox']",
+  "inputCurrencyChangeType": ".t--input-currency-change",
+  "inputCountryCodeChangeType": ".t--input-country-code-change"
 }

app/client/cypress/support/commands.js

@@ -795,6 +795,16 @@ Cypress.Commands.add("selectDateFormat", (value) => {
     .click();
 });
 
+Cypress.Commands.add("selectDropdownValue", (element, value) => {
+  cy.get(element)
+    .last()
+    .click();
+  cy.get(".t--dropdown-option")
+    .children()
+    .contains(value)
+    .click();
+});
+
 Cypress.Commands.add("assertDateFormat", () => {
   cy.get(".t--draggable-datepickerwidget2 input")
     .first()

app/client/src/components/ads/CurrencyCodeDropdown.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import styled from "styled-components";
+import Dropdown, { DropdownOption } from "components/ads/Dropdown";
+import { CurrencyTypeOptions, CurrencyOptionProps } from "constants/Currency";
+import Icon, { IconSize } from "components/ads/Icon";
+import { countryToFlag } from "components/designSystems/blueprint/InputComponent/utilties";
+
+const DropdownTriggerIconWrapper = styled.div`
+  height: 19px;
+  padding: 9px 5px 9px 12px;
+  width: 40px;
+  height: 19px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  line-height: 19px;
+  letter-spacing: -0.24px;
+  color: #090707;
+`;
+
+const CurrencyIconWrapper = styled.span`
+  height: 100%;
+  padding: 6px 4px 6px 12px;
+  width: 28px;
+  position: absolute;
+  left: 0;
+  z-index: 16;
+  font-size: 14px;
+  line-height: 19px;
+  letter-spacing: -0.24px;
+  color: #090707;
+`;
+
+export const getCurrencyOptions = (): Array<DropdownOption> => {
+  return CurrencyTypeOptions.map((item: CurrencyOptionProps) => {
+    return {
+      leftElement: countryToFlag(item.code),
+      searchText: item.label,
+      label: `${item.currency} - ${item.currency_name}`,
+      value: item.currency,
+    };
+  });
+};
+
+export const getSelectedCurrency = (currencyType?: string): DropdownOption => {
+  const selectedCurrency: CurrencyOptionProps | undefined = currencyType
+    ? CurrencyTypeOptions.find((item: CurrencyOptionProps) => {
+        return item.currency === currencyType;
+      })
+    : undefined;
+  if (selectedCurrency) {
+    return {
+      label: `${selectedCurrency.currency} - ${selectedCurrency.currency_name}`,
+      searchText: selectedCurrency.label,
+      value: selectedCurrency.currency,
+      id: selectedCurrency.symbol_native,
+    };
+  }
+  return CurrencyTypeOptions[0];
+};
+
+interface CurrencyDropdownProps {
+  onCurrencyTypeChange: (code?: string) => void;
+  options: Array<DropdownOption>;
+  selected: DropdownOption;
+  allowCurrencyChange?: boolean;
+}
+
+export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) {
+  if (!props.allowCurrencyChange) {
+    return (
+      <CurrencyIconWrapper>
+        {getSelectedCurrency(props.selected.value).id}
+      </CurrencyIconWrapper>
+    );
+  }
+  const dropdownTriggerIcon = (
+    <DropdownTriggerIconWrapper className="t--input-currency-change">
+      {getSelectedCurrency(props.selected.value).id}
+      <Icon name="downArrow" size={IconSize.XXS} />
+    </DropdownTriggerIconWrapper>
+  );
+  return (
+    <Dropdown
+      containerClassName="currency-type-filter"
+      dropdownHeight="195px"
+      dropdownTriggerIcon={dropdownTriggerIcon}
+      enableSearch
+      onSelect={props.onCurrencyTypeChange}
+      optionWidth="260px"
+      options={props.options}
+      searchPlaceholder="Search by currency or country"
+      selected={props.selected}
+      showLabelOnly
+    />
+  );
+}