passing country as prop instead of countryCode as it is not unique

packages/pebble-web/src/components/PhoneNumberInput.tsx

@@ -11,12 +11,12 @@ import {
 import { labelStyle } from "./styles/Input.styles";
 import { colors } from "pebble-shared";
 
-export default class PhoneNumberInput<
-  OptionType = string
-> extends React.Component<PhoneNumberInputProps<OptionType>> {
-  onCountrySelect = (countryCode: OptionType) => {
+export default class PhoneNumberInput<OptionType> extends React.Component<
+  PhoneNumberInputProps<OptionType>
+> {
+  onCountrySelect = (country: OptionType) => {
     this.props.onChange({
-      countryCode,
+      country,
       phone: this.props.phone
     });
   };
@@ -27,15 +27,16 @@ export default class PhoneNumberInput<
       return;
     }
     this.props.onChange({
-      countryCode: this.props.countryCode,
+      country: this.props.country,
       phone: _value
     });
   };
 
   render() {
     const {
       phone,
-      countryCode,
+      codeExtractor,
+      country,
       className,
       selectProps,
       inputProps,
@@ -57,8 +58,8 @@ export default class PhoneNumberInput<
         <Select<OptionType>
           placeholder=""
           onChange={this.onCountrySelect}
-          value={countryCode + ""}
-          selected={countryCode}
+          value={codeExtractor(country) + ""}
+          selected={country}
           {...selectProps}
           className={cx(selectStyle, selectProps && selectProps.className)}
         >

packages/pebble-web/src/components/__tests__/__snapshots__/phonenumberinput.test.tsx.snap

@@ -284,7 +284,7 @@ exports[`Component: Select default snapshot 1`] = `
               id="phone-select-input-test"
               onChange={[Function]}
               readOnly={true}
-              value="+1"
+              value="+91"
             />
             <label
               className="emotion-2 _pebble_input_label_focused"

packages/pebble-web/src/components/__tests__/phonenumberinput.test.tsx

@@ -11,13 +11,15 @@ import countries from "./fixtures/countrycodes";
 
 const SELECT_INPUT_ID = "phone-select-input-test";
 const PHONE_INPUT_ID = "phone-test-input-test";
+type Country = typeof countries[0];
 
-function getComponent(props: Partial<PhoneNumberInputProps> = {}) {
+function getComponent(props: Partial<PhoneNumberInputProps<Country>> = {}) {
   return (
     <PhoneNumberInput
       onChange={() => {}}
       phone=""
-      countryCode="+1"
+      country={countries[0]}
+      codeExtractor={(country: Country) => country.country_code}
       {...props}
       selectProps={{
         inputProps: {
@@ -36,7 +38,7 @@ function getComponent(props: Partial<PhoneNumberInputProps> = {}) {
       {countries.map(country => (
         <Option
           key={country.id}
-          value={country.country_code}
+          value={country}
           label={`${country.name} (${country.country_code})`}
         />
       ))}
@@ -86,7 +88,7 @@ describe("Component: Select", () => {
     expect(
       spy.calledWith({
         phone: "99997876",
-        countryCode: "+1"
+        country: countries[0]
       })
     ).toBeTruthy();
   });
@@ -128,7 +130,7 @@ describe("Component: Select", () => {
     expect(
       spy.calledWith({
         phone: "",
-        countryCode: "+1"
+        country: countries[0]
       })
     ).toBeTruthy();
   });
@@ -142,14 +144,11 @@ describe("Component: Select", () => {
     );
 
     component.find(`#${SELECT_INPUT_ID}`).simulate("click");
-    component
-      .find(Option)
-      .at(0)
-      .simulate("click");
+    component.find(Option).at(1).simulate("click");
     expect(
       spy.calledWith({
         phone: "",
-        countryCode: countries[0].country_code
+        country: countries[1]
       })
     ).toBeTruthy();
   });
@@ -160,7 +159,8 @@ describe("Component: Select", () => {
       getComponent({
         onChange: spy,
         phone: "998127",
-        countryCode: countries[0].country_code
+        country: countries[0],
+        codeExtractor: (country: Country) => country.country_code
       })
     );
 
@@ -169,6 +169,6 @@ describe("Component: Select", () => {
         .value
     ).toEqual("998127");
     const props = component.find(Select).props();
-    expect(props.selected).toEqual(countries[0].country_code);
+    expect(props.selected).toEqual(countries[0]);
   });
 });

packages/pebble-web/src/components/typings/PhoneNumberInput.ts

@@ -2,16 +2,17 @@ import { SingleSelectProps } from "./Select";
 import { SimpleInputProps } from "./Input";
 import { Omit } from "utility-types";
 
-export interface PhoneNumberInputProps<OptionType = string> {
-  countryCode: OptionType;
+export interface PhoneNumberInputProps<OptionType> {
+  country: OptionType;
   phone: string;
   onChange: ({
-    countryCode,
+    country,
     phone
   }: {
-    countryCode: OptionType;
+    country: OptionType;
     phone: string;
   }) => void;
+  codeExtractor: (country: OptionType) => string;
 
   // Optional
   className?: string;

packages/pebble-web/stories/phoneNumberInput.story.tsx

@@ -9,30 +9,31 @@ import countries from "../src/components/__tests__/fixtures/countrycodes";
 import { action } from "@storybook/addon-actions";
 
 interface State {
-  countryCode: string;
+  country: typeof countries[0];
   phone: string;
 }
 
 storiesOf("Components/PhoneNumberInput", module).add(
   "Material",
-  withState<State>({ countryCode: "+91", phone: "" })(({ store }) => (
+  withState<State>({ country: countries[0], phone: "" })(({ store }) => (
     <PhoneNumberInput
-      countryCode={store.state.countryCode}
+      country={store.state.country}
+      codeExtractor={country => country.country_code}
       phone={store.state.phone}
       placeholder="Alternate Phone Number"
       onChange={arg => {
-        const { countryCode, phone } = arg;
+        const { country, phone } = arg;
         action("onChange")(arg);
         store.set({
-          countryCode: `${countryCode}`,
+          country,
           phone
         });
       }}
     >
       {countries.map(country => (
         <Option
           key={country.id}
-          value={country.country_code}
+          value={country}
           label={`${country.name} (${country.country_code})`}
         />
       ))}