Phone number with ISD codes support in Input widget

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

@@ -159,6 +159,19 @@ describe("Input Widget Functionality", function() {
       });
   });
 
+  it("Input Functionality To check phone number input type", function() {
+    // cy.openPropertyPane("inputwidget");
+    cy.get(widgetsPage.innertext)
+      .click()
+      .clear();
+    cy.selectDropdownValue(commonlocators.dataType, "Phone Number");
+    cy.get(commonlocators.inputCountryCodeChangeType)
+      .invoke("text")
+      .then((text) => {
+        expect(text).to.equal("🇺🇸+1");
+      });
+  });
+
   it("Input label wrapper do not show if lable and tooltip is empty", () => {
     cy.get(".t--input-label-wrapper").should("not.exist");
   });

app/client/cypress/locators/commonlocators.json

@@ -116,6 +116,7 @@
   "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",
   "viewerPage": ".t--app-viewer-page",
   "dropDownOptSelected": "//span[@type='p1']"
 }

app/client/cypress/support/commands.js

@@ -2303,10 +2303,9 @@ Cypress.Commands.add("onClickActions", (forSuccess, forFailure) => {
     .click()
     .type(forSuccess)
     .get("button.t--open-dropdown-Select-type")
-    .click()
-    .get("a.single-select div")
-    .contains(forSuccess)
-    .click();
+    .first()
+    .click({ force: true })
+    .selectOnClickOption(forSuccess);
 
   cy.wait(2000);
   // For Failure
@@ -2322,10 +2321,8 @@ Cypress.Commands.add("onClickActions", (forSuccess, forFailure) => {
     .type(forFailure)
     .get("button.t--open-dropdown-Select-type")
     .last()
-    .click()
-    .get("a.single-select div")
-    .contains(forFailure)
-    .click();
+    .click({ force: true })
+    .selectOnClickOption(forFailure);
 });
 
 Cypress.Commands.add("copyWidget", (widget, widgetLocator) => {

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

@@ -0,0 +1,108 @@
+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;
+`;
+
+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.code,
+      id: item.symbol_native,
+    };
+  });
+};
+
+export const CurrencyDropdownOptions = getCurrencyOptions();
+
+export const getSelectedCurrency = (
+  currencyCountryCode?: string,
+): DropdownOption => {
+  let selectedCurrency: CurrencyOptionProps | undefined = currencyCountryCode
+    ? CurrencyTypeOptions.find((item: CurrencyOptionProps) => {
+        return item.code === currencyCountryCode;
+      })
+    : undefined;
+  if (!selectedCurrency) {
+    selectedCurrency = {
+      code: "US",
+      currency: "USD",
+      currency_name: "US Dollar",
+      label: "United States",
+      phone: "1",
+      symbol_native: "$",
+    };
+  }
+  return {
+    label: `${selectedCurrency.currency} - ${selectedCurrency.currency_name}`,
+    searchText: selectedCurrency.label,
+    value: selectedCurrency.code,
+    id: selectedCurrency.symbol_native,
+  };
+};
+
+interface CurrencyDropdownProps {
+  onCurrencyTypeChange: (currencyCountryCode?: string) => void;
+  options: Array<DropdownOption>;
+  selected: DropdownOption;
+  allowCurrencyChange?: boolean;
+}
+
+export default function CurrencyTypeDropdown(props: CurrencyDropdownProps) {
+  const selectedCurrency = getSelectedCurrency(props.selected.value).id;
+  if (!props.allowCurrencyChange) {
+    return <CurrencyIconWrapper>{selectedCurrency}</CurrencyIconWrapper>;
+  }
+  const dropdownTriggerIcon = (
+    <DropdownTriggerIconWrapper className="t--input-currency-change">
+      {selectedCurrency}
+      <Icon name="downArrow" size={IconSize.XXS} />
+    </DropdownTriggerIconWrapper>
+  );
+  return (
+    <Dropdown
+      containerClassName="currency-type-filter"
+      dropdownHeight="195px"
+      dropdownTriggerIcon={dropdownTriggerIcon}
+      enableSearch
+      height="32px"
+      onSelect={props.onCurrencyTypeChange}
+      optionWidth="260px"
+      options={props.options}
+      searchPlaceholder="Search by currency or country"
+      selected={props.selected}
+      showLabelOnly
+    />
+  );
+}

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

@@ -89,7 +89,6 @@ export const DropdownContainer = styled.div<{ width: string }>`
 const DropdownTriggerWrapper = styled.div<{
   isOpen: boolean;
   disabled?: boolean;
-  height: string;
 }>`
   height: 100%;
   display: flex;
@@ -153,6 +152,10 @@ const Selected = styled.div<{
       ? "box-shadow: 0px 0px 4px 4px rgba(203, 72, 16, 0.18)"
       : null};
   .${Classes.TEXT} {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    width: calc(100% - 10px);
     ${(props) =>
       props.disabled
         ? `color: ${props.theme.colors.dropdown.header.disabledText}`
@@ -511,7 +514,6 @@ export default function Dropdown(props: DropdownProps) {
   const dropdownTrigger = props.dropdownTriggerIcon ? (
     <DropdownTriggerWrapper
       disabled={props.disabled}
-      height={dropdownHeight}
       isOpen={isOpen}
       onClick={onClickHandler}
     >

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

@@ -0,0 +1,108 @@
+import React from "react";
+import styled from "styled-components";
+import Dropdown, { DropdownOption } from "components/ads/Dropdown";
+import Icon, { IconSize } from "components/ads/Icon";
+import { countryToFlag } from "components/designSystems/blueprint/InputComponent/utilties";
+import { ISDCodeOptions, ISDCodeProps } from "constants/ISDCodes";
+
+const DropdownTriggerIconWrapper = styled.div<{ disabled?: boolean }>`
+  padding: 9px 0px 9px 12px;
+  width: 85px;
+  min-width: 85px;
+  opacity: ${(props) => props.disabled && "0.6"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  height: ${(props) => (props.disabled ? 32 : 19)}px;
+  line-height: ${(props) => (props.disabled ? 32 : 19)}px;
+  letter-spacing: -0.24px;
+  color: #090707;
+  position: ${(props) => props.disabled && "absolute"};
+  .code {
+    margin-right: 4px;
+    pointer-events: none;
+  }
+  .icon-dropdown {
+    display: flex;
+    width: 30px;
+    justify-content: space-between;
+  }
+`;
+
+const getISDCodeOptions = (): Array<DropdownOption> => {
+  return ISDCodeOptions.map((item: ISDCodeProps) => {
+    return {
+      leftElement: countryToFlag(item.code),
+      searchText: item.name,
+      label: `${item.name} (${item.dial_code})`,
+      value: item.code,
+      id: item.dial_code,
+    };
+  });
+};
+
+export const ISDCodeDropdownOptions = getISDCodeOptions();
+
+export const getSelectedISDCode = (code?: string): DropdownOption => {
+  let selectedCountry: ISDCodeProps | undefined = code
+    ? ISDCodeOptions.find((item: ISDCodeProps) => {
+        return item.code === code;
+      })
+    : undefined;
+  if (!selectedCountry) {
+    selectedCountry = {
+      name: "United States",
+      dial_code: "+1",
+      code: "US",
+    };
+  }
+  return {
+    label: `${selectedCountry.name} (${selectedCountry.dial_code})`,
+    searchText: selectedCountry.name,
+    value: selectedCountry.code,
+    id: selectedCountry.dial_code,
+  };
+};
+
+interface ISDCodeDropdownProps {
+  onISDCodeChange: (code?: string) => void;
+  options: Array<DropdownOption>;
+  selected: DropdownOption;
+  allowCountryCodeChange?: boolean;
+  disabled: boolean;
+}
+
+export default function ISDCodeDropdown(props: ISDCodeDropdownProps) {
+  const selectedCountry = getSelectedISDCode(props.selected.value);
+  const dropdownTrigger = (
+    <DropdownTriggerIconWrapper
+      className="t--input-country-code-change"
+      disabled={props.disabled}
+    >
+      <div className="icon-dropdown">
+        {selectedCountry.value && countryToFlag(selectedCountry.value)}
+        <Icon name="downArrow" size={IconSize.XXS} />
+      </div>
+      <div className="code">{selectedCountry.id && selectedCountry.id}</div>
+    </DropdownTriggerIconWrapper>
+  );
+  if (props.disabled) {
+    return dropdownTrigger;
+  }
+  return (
+    <Dropdown
+      containerClassName="country-type-filter"
+      dropdownHeight="195px"
+      dropdownTriggerIcon={dropdownTrigger}
+      enableSearch
+      height="32px"
+      onSelect={props.onISDCodeChange}
+      optionWidth="260px"
+      options={props.options}
+      searchPlaceholder="Search by ISD code or country"
+      selected={props.selected}
+      showLabelOnly
+    />
+  );
+}