react-frontend-common-components 0.0.96 → 0.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/app-phone-input/app-phone-input.tsx

@@ -4,16 +4,22 @@ import PhoneInput, { CountryData } from "react-phone-input-2";
 import "./app-phone-input.css";
 
 interface AppPhoneInputProps {
+  countryIsoCode?: string;
   countryCode?: string;
   phone: string;
-  handleChange: (phone: string, countryCode: string, uniCode: string) => void;
+  handleChange: (
+    phone: string,
+    countryCode: string,
+    countryIsoCode: string,
+    uniCode: string
+  ) => void;
   className: string;
   id: string;
 }
 
 const AppPhoneInput = ({
   handleChange,
-  countryCode,
+  countryIsoCode,
   phone,
   className,
   id,
@@ -28,29 +34,28 @@ const AppPhoneInput = ({
       }
     }
   }, [id]);
+
   return (
     <div className={className}>
       <div className={"inputContainer"} ref={wrapperRef}>
         <PhoneInput
-          value={`+${countryCode}${phone}`}
-          country={
-            (countryCode && phone) || (countryCode != "" && phone != "")
-              ? ""
-              : "us"
-          }
+          value={phone}
+          country={countryIsoCode || "us"}
           countryCodeEditable={false}
-          onChange={(phone, country: CountryData) => {
+          enableSearch={true}
+          inputProps={{ required: true }}
+          onChange={(value, country: CountryData) => {
             handleChange(
-              phone.replace(country.dialCode, ""),
+              value, 
               country.dialCode,
-              country.countryCode
+              country.countryCode,
+              country.name
             );
           }}
-          enableSearch={true}
-          inputProps={{ required: true }}
         />
       </div>
     </div>
   );
 };
+
 export default AppPhoneInput;