react-frontend-common-components 0.0.12 → 0.0.15

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

@@ -1,9 +1,8 @@
-import React, { lazy, Suspense } from "react";
+import React from "react";
 import "react-intl-tel-input/dist/main.css";
+import IntlTelInput from "react-intl-tel-input";
 import "./app-phone-field.css";
 
-const IntlTelInput = lazy(() => import("react-intl-tel-input"));
-
 interface AppPhoneFieldProps {
   phone: string;
   setPhone: (phone: string) => void;
@@ -22,41 +21,39 @@ const AppPhoneField = ({
   className,
 }: AppPhoneFieldProps) => {
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <div className={`appPhoneField ${className}`}>
-        <div className={"intelWrapper"}>
-          <IntlTelInput
-            containerClassName={`${"intltelinput"} intl-tel-input`}
-            inputClassName={`${"customintlinput"} custom-intl-input`}
-            separateDialCode={true}
-            defaultCountry="ae"
-            placeholder="50-1234567"
-            preferredCountries={["ae"]}
-            value={phone}
-            onPhoneNumberChange={(isValid, value, country, fullNumber) => {
-              if (!isNaN(Number(value))) {
-                setPhone(value);
-                setCustomerCountryCode("+" + country.dialCode);
-                setPhoneError("");
-              } else if (value === "") {
-                setPhoneError("");
-              } else {
-                setPhoneError("You can only enter numbers.");
-              }
-            }}
-            onSelectFlag={(
-              currentNumber,
-              selectedCountryData,
-              fullNumber,
-              isValid
-            ) => {
-              setCustomerCountryCode("+" + selectedCountryData.dialCode);
-            }}
-          />
-        </div>
-        <p className={"error"}>{phoneError && phoneError}</p>
+    <div className={`appPhoneField ${className}`}>
+      <div className={"intelWrapper"}>
+        <IntlTelInput
+          containerClassName={`${"intltelinput"} intl-tel-input`}
+          inputClassName={`${"customintlinput"} custom-intl-input`}
+          separateDialCode={true}
+          defaultCountry="ae"
+          placeholder="50-1234567"
+          preferredCountries={["ae"]}
+          value={phone}
+          onPhoneNumberChange={(isValid, value, country, fullNumber) => {
+            if (!isNaN(Number(value))) {
+              setPhone(value);
+              setCustomerCountryCode("+" + country.dialCode);
+              setPhoneError("");
+            } else if (value === "") {
+              setPhoneError("");
+            } else {
+              setPhoneError("You can only enter numbers.");
+            }
+          }}
+          onSelectFlag={(
+            currentNumber,
+            selectedCountryData,
+            fullNumber,
+            isValid
+          ) => {
+            setCustomerCountryCode("+" + selectedCountryData.dialCode);
+          }}
+        />
       </div>
-    </Suspense>
+      <p className={"error"}>{phoneError && phoneError}</p>
+    </div>
   );
 };