国旗

src/components/UInput/PhoneInput.jsx

@@ -1,33 +1,183 @@
 import styles from "./styles.module.scss";
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
+import SvgIcon from "@components/SvgIcon";
+import {useThemeProvider} from "@contexts/themeContext";
+import {Popover, Typography} from "@mui/material";
+import {useSelector} from "react-redux";
+import {getArea} from "@features/mainSlice";
+import areaCode from "@db/areaCode";
+import RadioBtn from "@components/RadioBtn";
+import MuiDrawer from "@mui/material/Drawer";
+const i18n=global.i18n;
 
 const PhoneInput = ({innerRef, ...props}) => {
     const [country, setCountry] = useState("55");
     const wrapClassName=props.className;
     const message=props.message?props.message:"";
     props.className=props.inputClass?props.inputClass:"";
+    const [showCountrySelect, setShowCountrySelect] = useState(false);
+    const {isMobile} = useThemeProvider();
+    const selectRef = useRef(null);
+    const area=useSelector(getArea);
+    const [searchValue, setSearchValue] = useState("");
     useEffect(() => {
         if (props.onChangeCountry!=null)props.onChangeCountry(country);
     }, [country]);
+    const onChangeAreaCode=(code)=>{
+        setCountry(code);
+        hideASelect();
+    }
+    const showASelect=()=>{
+        setSearchValue("");
+        setShowCountrySelect(true);
+    }
+    const hideASelect=()=>{
+        setShowCountrySelect(false);
+    }
+    const getAllAreaCode=()=>{
+        let list=[];
+        for (let i = 0; i < areaCode.length; i++) {
+            let item=areaCode[i];
+            if (item.areaID===area){
+                let areaCode=item.areaCode;
+                let name=item.en.toLowerCase();
+                if (searchValue!==""){
+                    let lvalue=searchValue.toLowerCase();
+                    if (areaCode.indexOf(lvalue)===-1&&name.indexOf(lvalue)===-1){
+                        continue;
+                    }
+                }
+                if (item.areaCode===country)list.unshift(item);
+                else list.push(item);
+            }
+        }
+        return list;
+    }
+    const renderSearch=()=>{
+        return (
+            <div className={`input-control ${styles.select_search}`}>
+                <SvgIcon className={styles.icon} herf={"icon_Search"}></SvgIcon>
+                <input onChange={e => setSearchValue(e.target.value)}/>
+            </div>
+        )
+    }
+    const renderAreaCodeList=()=>{
+        let list=getAllAreaCode();
+        return (
+            <div className={styles.select_areacode_con}>
+                {
+                    list.map((item,index)=>{
+                        return (
+                            <button key={index} className={`${styles.item} ${country===item.areaCode?styles.active:''}`} onClick={()=>{
+                                onChangeAreaCode(item.areaCode)
+                            }}>
+                                <div className={styles.left}>
+                                    <img className={styles.icon} src={item.icon}/>
+                                    <span className={styles.code}>{"+" + item.areaCode}</span>
+                                    <span className={styles.name}>{item.en}</span>
+                                </div>
+                                <RadioBtn selected={country===item.areaCode} value={item.areaCode} onChange={(value)=>{
+                                    onChangeAreaCode(item.areaCode)
+                                }} />
+                            </button>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    const renderHeader=()=>{
+        return (
+            <div className={styles.header}>
+                {i18n.t("areaCodeSelect.title")}
+            </div>
+        )
+    }
+    const renderDeskSelect = () => {
+        return (
+            <Popover
+                open={showCountrySelect}
+                anchorEl={selectRef.current}
+                onClose={()=>{
+                    hideASelect();
+                }}
+                anchorOrigin={{
+                    vertical: 45,
+                    horizontal: 0,
+                }}
+                sx={{
+                    "& .MuiPopover-paper": {
+                        backgroundColor:'var(--widget);',
+                        borderRadius:'var(--border-radius);',
+                        width:'18rem;',
+                        height:'20rem;',
+                        boxShadow:'var(--widget-shadow);'
+                    }
+                }}
+            >
+                <div className={styles.select_con}>
+                    {renderSearch()}
+                    {renderAreaCodeList()}
+                </div>
+            </Popover>
+        )
+    }
+    const renderMobileSelect=()=>{
+        return (
+            <MuiDrawer open={showCountrySelect}
+                       anchor={"bottom"}
+                       sx={{
+                           "& .MuiDrawer-paper": {
+                               height: "50%",
+                               boxSizing: "border-box",
+                               overflow: 'visible !important',
+                               backgroundColor: 'var(--widget);',
+                               boxShadow: 'var(--widget-shadow);',
+                               borderTopLeftRadius: '1rem',
+                               borderTopRightRadius: '1rem'
+                           },
+                       }}
+                       variant="temporary"
+                       onClose={() => {
+                           hideASelect();
+                       }}>
+                <div className={`${styles.select_con} ${styles.select_con_m}`}>
+                    {renderHeader()}
+                    {renderSearch()}
+                    {renderAreaCodeList()}
+                </div>
+            </MuiDrawer>
+        )
+    }
+    const renderCountrySelect = () => {
+        if (isMobile()) return renderMobileSelect();
+        else return renderDeskSelect();
+    }
     return (
-        <div className={`d-flex flex-column g-6`}>
-            <div className={`input-control ${wrapClassName}`}>
-                <div className={styles.l_phone}>
-                    <div className={styles.country}>
-                        <div>{"+"+country}</div>
+        <>
+            <div className={`d-flex flex-column g-6`}>
+                <div className={`input-control ${wrapClassName}`}>
+                    <div className={styles.l_phone}>
+                        <button ref={selectRef} type={"button"} className={styles.country} onClick={()=>{
+                            showASelect();
+                        }}>
+                            <div>{"+" + country}</div>
+                            <SvgIcon className={styles.icon} herf={"icon_Arrow"}></SvgIcon>
+                        </button>
+                        <div className={styles.line}></div>
+                        <input
+                            type="tel"
+                            ref={innerRef}
+                            {...props}
+                        />
                     </div>
-                    <div className={styles.line}></div>
-                    <input
-                        type="tel"
-                        ref={innerRef}
-                        {...props}
-                    />
                 </div>
+                {
+                    message !== "" ? (<div className="input-prompt-error">{message}</div>) : (<></>)
+                }
             </div>
-            {
-                message!==""?(<div className="input-prompt-error">{message}</div>):(<></>)
-            }
-        </div>
+            {renderCountrySelect()}
+        </>
     )
 }
 

src/components/UInput/styles.module.scss

@@ -20,7 +20,98 @@
     background-color: var(--text);
   }
   & .country{
-    font-size: .75rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: .8rem;
+    color: var(--header);
+    & .icon{
+      width: 0.85rem;
+      height: 0.85rem;
+      fill: var(--text);
+      transform: rotate(90deg);
+    }
+  }
+}
+.select_con{
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0.5rem;
+  gap: 0.75rem;
+  &_m{
+    padding: 1rem;
+  }
+  & .header{
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1rem;
+    color: var(--header);
+    gap: 0.5rem;
+  }
+}
+.select_search{
+  border: 1px solid var(--input-border);
+  background-color: transparent;
+  gap: 0.5rem;
+  & .icon{
+    width: 1.4em;
+    height: 1.4em;
+    fill: var(--text);
+  }
+}
+.select_areacode_con{
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+  & .item{
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border-radius: var(--border-radius);
     color: var(--header);
+    &.active{
+      background: var(--nav-item-hover);
+      font-weight: 600;
+    }
+    & .left{
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      width: 80%;
+      & .icon{
+        width: 1.5rem;
+        height: auto;
+        border-radius: 0.1rem;
+      }
+      & .code{
+        text-align: left;
+        width: 3rem;
+      }
+      & .name{
+        //max-width: 5rem;
+        max-width: 60%;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }

src/db/areaCode.js

@@ -0,0 +1,1540 @@
+const allAreaCode=[
+    {
+        "countryCode": "AD",
+        "areaCode": "376",
+        "en": "Andorra"
+    },
+    {
+        "countryCode": "AE",
+        "areaCode": "971",
+        "en": "United Arab Emirates (‫الإمارات العربية المتحدة‬‎)"
+    },
+    {
+        "countryCode": "AF",
+        "areaCode": "93",
+        "en": "Afghanistan (‫افغانستان‬‎)"
+    },
+    {
+        "countryCode": "AG",
+        "areaCode": "1268",
+        "en": "Antigua and Barbuda"
+    },
+    {
+        "countryCode": "AI",
+        "areaCode": "1264",
+        "en": "Anguilla"
+    },
+    {
+        "countryCode": "AL",
+        "areaCode": "355",
+        "en": "Albania (Shqipëri)"
+    },
+    {
+        "countryCode": "AM",
+        "areaCode": "374",
+        "en": "Armenia (Հայաստան)"
+    },
+    {
+        "countryCode": "AO",
+        "areaCode": "244",
+        "en": "Angola"
+    },
+    {
+        "countryCode": "AQ",
+        "areaCode": "672",
+        "en": "Antarctica"
+    },
+    {
+        "countryCode": "AR",
+        "areaCode": "54",
+        "en": "Argentina"
+    },
+    {
+        "countryCode": "AT",
+        "areaCode": "43",
+        "en": "Austria (Österreich)"
+    },
+    {
+        "countryCode": "AU",
+        "areaCode": "61",
+        "en": "Australia"
+    },
+    {
+        "countryCode": "AW",
+        "areaCode": "297",
+        "en": "Aruba"
+    },
+    {
+        "countryCode": "AX",
+        "areaCode": "35818",
+        "en": "Åland Islands"
+    },
+    {
+        "countryCode": "AZ",
+        "areaCode": "994",
+        "en": "Azerbaijan (Azərbaycan)"
+    },
+    {
+        "countryCode": "BA",
+        "areaCode": "387",
+        "en": "Bosnia and Herzegovina (Босна и Херцеговина)"
+    },
+    {
+        "countryCode": "BB",
+        "areaCode": "1246",
+        "en": "Barbados"
+    },
+    {
+        "countryCode": "BD",
+        "areaCode": "880",
+        "en": "Bangladesh (বাংলাদেশ)"
+    },
+    {
+        "countryCode": "BE",
+        "areaCode": "32",
+        "en": "Belgium (België)"
+    },
+    {
+        "countryCode": "BF",
+        "areaCode": "226",
+        "en": "Burkina Faso"
+    },
+    {
+        "countryCode": "BG",
+        "areaCode": "359",
+        "en": "Bulgaria (България)"
+    },
+    {
+        "countryCode": "BH",
+        "areaCode": "973",
+        "en": "Bahrain (‫البحرين‬‎)"
+    },
+    {
+        "countryCode": "BI",
+        "areaCode": "257",
+        "en": "Burundi (Uburundi)"
+    },
+    {
+        "countryCode": "BJ",
+        "areaCode": "229",
+        "en": "Benin (Bénin)"
+    },
+    {
+        "countryCode": "BM",
+        "areaCode": "1441",
+        "en": "Bermuda"
+    },
+    {
+        "countryCode": "BN",
+        "areaCode": "673",
+        "en": "Brunei"
+    },
+    {
+        "countryCode": "BO",
+        "areaCode": "591",
+        "en": "Bolivia"
+    },
+    {
+        "countryCode": "BQ",
+        "areaCode": "5997",
+        "en": "Caribbean Netherlands"
+    },
+    {
+        "countryCode": "BR",
+        "areaCode": "55",
+        "en": "Brazil (Brasil)"
+    },
+    {
+        "countryCode": "BS",
+        "areaCode": "1242",
+        "en": "Bahamas"
+    },
+    {
+        "countryCode": "BT",
+        "areaCode": "975",
+        "en": "Bhutan (འབྲུག)"
+    },
+    {
+        "countryCode": "BW",
+        "areaCode": "267",
+        "en": "Botswana"
+    },
+    {
+        "countryCode": "BY",
+        "areaCode": "375",
+        "en": "Belarus (Беларусь)"
+    },
+    {
+        "countryCode": "BZ",
+        "areaCode": "501",
+        "en": "Belize"
+    },
+    {
+        "countryCode": "CA",
+        "areaCode": "1",
+        "en": "Canada"
+    },
+    {
+        "countryCode": "CC",
+        "areaCode": "61",
+        "en": "Cocos (Keeling) Islands"
+    },
+    {
+        "countryCode": "CD",
+        "areaCode": "243",
+        "en": "Congo (DRC) (Congo-Kinshasa)"
+    },
+    {
+        "countryCode": "CF",
+        "areaCode": "236",
+        "en": "Central African Republic (République centrafricaine)"
+    },
+    {
+        "countryCode": "CG",
+        "areaCode": "242",
+        "en": "Congo (Republic) (Congo-Brazzaville)"
+    },
+    {
+        "countryCode": "CH",
+        "areaCode": "41",
+        "en": "Switzerland (Schweiz)"
+    },
+    {
+        "countryCode": "CI",
+        "areaCode": "225",
+        "en": "Côte d’Ivoire"
+    },
+    {
+        "countryCode": "CK",
+        "areaCode": "682",
+        "en": "Cook Islands"
+    },
+    {
+        "countryCode": "CL",
+        "areaCode": "56",
+        "en": "Chile"
+    },
+    {
+        "countryCode": "CM",
+        "areaCode": "237",
+        "en": "Cameroon (Cameroun)"
+    },
+    {
+        "countryCode": "CO",
+        "areaCode": "57",
+        "en": "Colombia"
+    },
+    {
+        "countryCode": "CR",
+        "areaCode": "506",
+        "en": "Costa Rica"
+    },
+    {
+        "countryCode": "CV",
+        "areaCode": "238",
+        "en": "Cape Verde (Kabu Verdi)"
+    },
+    {
+        "countryCode": "CW",
+        "areaCode": "5999",
+        "en": "Curaçao"
+    },
+    {
+        "countryCode": "CX",
+        "areaCode": "61",
+        "en": "Christmas Island"
+    },
+    {
+        "countryCode": "CY",
+        "areaCode": "357",
+        "en": "Cyprus (Κύπρος)"
+    },
+    {
+        "countryCode": "CZ",
+        "areaCode": "420",
+        "en": "Czech Republic (Česká republika)"
+    },
+    {
+        "countryCode": "DE",
+        "areaCode": "49",
+        "en": "Germany (Deutschland)"
+    },
+    {
+        "countryCode": "DJ",
+        "areaCode": "253",
+        "en": "Djibouti"
+    },
+    {
+        "countryCode": "DK",
+        "areaCode": "45",
+        "en": "Denmark (Danmark)"
+    },
+    {
+        "countryCode": "DM",
+        "areaCode": "1767",
+        "en": "Dominica"
+    },
+    {
+        "countryCode": "DO",
+        "areaCode": "1809",
+        "en": "Dominican Republic (República Dominicana)"
+    },
+    {
+        "countryCode": "DO1",
+        "areaCode": "1829",
+        "en": "Dominican Republic (República Dominicana)"
+    },
+    {
+        "countryCode": "DO2",
+        "areaCode": "1849",
+        "en": "Dominican Republic (República Dominicana)"
+    },
+    {
+        "countryCode": "DZ",
+        "areaCode": "213",
+        "en": "Algeria (‫الجزائر‬‎)"
+    },
+    {
+        "countryCode": "EC",
+        "areaCode": "593",
+        "en": "Ecuador"
+    },
+    {
+        "countryCode": "EE",
+        "areaCode": "372",
+        "en": "Estonia (Eesti)"
+    },
+    {
+        "countryCode": "EG",
+        "areaCode": "20",
+        "en": "Egypt (‫مصر‬‎)"
+    },
+    {
+        "countryCode": "ER",
+        "areaCode": "291",
+        "en": "Eritrea"
+    },
+    {
+        "countryCode": "ES",
+        "areaCode": "34",
+        "en": "Spain (España)"
+    },
+    {
+        "countryCode": "ET",
+        "areaCode": "251",
+        "en": "Ethiopia"
+    },
+    {
+        "countryCode": "FI",
+        "areaCode": "358",
+        "en": "Finland (Suomi)"
+    },
+    {
+        "countryCode": "FJ",
+        "areaCode": "679",
+        "en": "Fiji"
+    },
+    {
+        "countryCode": "FK",
+        "areaCode": "500",
+        "en": "Falkland Islands (Islas Malvinas)"
+    },
+    {
+        "countryCode": "FM",
+        "areaCode": "691",
+        "en": "Micronesia"
+    },
+    {
+        "countryCode": "FO",
+        "areaCode": "298",
+        "en": "Faroe Islands (Føroyar)"
+    },
+    {
+        "countryCode": "FR",
+        "areaCode": "33",
+        "en": "France"
+    },
+    {
+        "countryCode": "GA",
+        "areaCode": "241",
+        "en": "Gabon"
+    },
+    {
+        "countryCode": "GB",
+        "areaCode": "44",
+        "en": "United Kingdom"
+    },
+    {
+        "countryCode": "GD",
+        "areaCode": "1473",
+        "en": "Grenada"
+    },
+    {
+        "countryCode": "GE",
+        "areaCode": "995",
+        "en": "Georgia (საქართველო)"
+    },
+    {
+        "countryCode": "GF",
+        "areaCode": "594",
+        "en": "French Guiana (Guyane française)"
+    },
+    {
+        "countryCode": "GG",
+        "areaCode": "44",
+        "en": "Guernsey"
+    },
+    {
+        "countryCode": "GH",
+        "areaCode": "233",
+        "en": "Ghana (Gaana)"
+    },
+    {
+        "countryCode": "GI",
+        "areaCode": "350",
+        "en": "Gibraltar"
+    },
+    {
+        "countryCode": "GL",
+        "areaCode": "299",
+        "en": "Greenland (Kalaallit Nunaat)"
+    },
+    {
+        "countryCode": "GM",
+        "areaCode": "220",
+        "en": "Gambia"
+    },
+    {
+        "countryCode": "GN",
+        "areaCode": "224",
+        "en": "Guinea (Guinée)"
+    },
+    {
+        "countryCode": "GP",
+        "areaCode": "590",
+        "en": "Guadeloupe"
+    },
+    {
+        "countryCode": "GQ",
+        "areaCode": "240",
+        "en": "Equatorial Guinea (Guinea Ecuatorial)"
+    },
+    {
+        "countryCode": "GR",
+        "areaCode": "30",
+        "en": "Greece (Ελλάδα)"
+    },
+    {
+        "countryCode": "GS",
+        "areaCode": "500",
+        "en": "South Georgia and the South Sandwich Islands"
+    },
+    {
+        "countryCode": "GT",
+        "areaCode": "502",
+        "en": "Guatemala"
+    },
+    {
+        "countryCode": "GW",
+        "areaCode": "245",
+        "en": "Guinea-Bissau (Guiné Bissau)"
+    },
+    {
+        "countryCode": "GY",
+        "areaCode": "592",
+        "en": "Guyana"
+    },
+    {
+        "countryCode": "HK",
+        "areaCode": "852",
+        "en": "Hong Kong (香港)"
+    },
+    {
+        "countryCode": "HN",
+        "areaCode": "504",
+        "en": "Honduras"
+    },
+    {
+        "countryCode": "HR",
+        "areaCode": "385",
+        "en": "Croatia (Hrvatska)"
+    },
+    {
+        "countryCode": "HT",
+        "areaCode": "509",
+        "en": "Haiti"
+    },
+    {
+        "countryCode": "HU",
+        "areaCode": "36",
+        "en": "Hungary (Magyarország)"
+    },
+    {
+        "countryCode": "ID",
+        "areaCode": "62",
+        "en": "Indonesia"
+    },
+    {
+        "countryCode": "IE",
+        "areaCode": "353",
+        "en": "Ireland"
+    },
+    {
+        "countryCode": "IR",
+        "areaCode": "98",
+        "en": "Iran"
+    },
+    {
+        "countryCode": "IL",
+        "areaCode": "972",
+        "en": "Israel (‫ישראל‬‎)"
+    },
+    {
+        "countryCode": "IN",
+        "areaCode": "91",
+        "en": "India (भारत)"
+    },
+    {
+        "countryCode": "IO",
+        "areaCode": "246",
+        "en": "British Indian Ocean Territory"
+    },
+    {
+        "countryCode": "IQ",
+        "areaCode": "964",
+        "en": "Iraq (‫العراق‬‎)"
+    },
+    {
+        "countryCode": "IS",
+        "areaCode": "354",
+        "en": "Iceland (Ísland)"
+    },
+    {
+        "countryCode": "IT",
+        "areaCode": "39",
+        "en": "Italy (Italia)"
+    },
+    {
+        "countryCode": "JE",
+        "areaCode": "44",
+        "en": "Jersey"
+    },
+    {
+        "countryCode": "JM",
+        "areaCode": "1876",
+        "en": "Jamaica"
+    },
+    {
+        "countryCode": "JO",
+        "areaCode": "962",
+        "en": "Jordan (‫الأردن‬‎)"
+    },
+    {
+        "countryCode": "JP",
+        "areaCode": "81",
+        "en": "Japan (日本)"
+    },
+    {
+        "countryCode": "KE",
+        "areaCode": "254",
+        "en": "Kenya"
+    },
+    {
+        "countryCode": "KG",
+        "areaCode": "996",
+        "en": "Kyrgyzstan (Кыргызстан)"
+    },
+    {
+        "countryCode": "KH",
+        "areaCode": "855",
+        "en": "Cambodia (កម្ពុជា)"
+    },
+    {
+        "countryCode": "KI",
+        "areaCode": "686",
+        "en": "Kiribati"
+    },
+    {
+        "countryCode": "KM",
+        "areaCode": "269",
+        "en": "Comoros (‫جزر القمر‬‎)"
+    },
+    {
+        "countryCode": "KN",
+        "areaCode": "1869",
+        "en": "Saint Kitts and Nevis"
+    },
+    {
+        "countryCode": "KR",
+        "areaCode": "82",
+        "en": "South Korea (대한민국)"
+    },
+    {
+        "countryCode": "KW",
+        "areaCode": "965",
+        "en": "Kuwait (‫الكويت‬‎)"
+    },
+    {
+        "countryCode": "KY",
+        "areaCode": "1345",
+        "en": "Cayman Islands"
+    },
+    {
+        "countryCode": "KZ",
+        "areaCode": "7",
+        "en": "Kazakhstan (Казахстан)"
+    },
+    {
+        "countryCode": "LA",
+        "areaCode": "856",
+        "en": "Laos (ລາວ)"
+    },
+    {
+        "countryCode": "LB",
+        "areaCode": "961",
+        "en": "Lebanon (‫لبنان‬‎)"
+    },
+    {
+        "countryCode": "LC",
+        "areaCode": "1758",
+        "en": "Saint Lucia"
+    },
+    {
+        "countryCode": "LI",
+        "areaCode": "423",
+        "en": "Liechtenstein"
+    },
+    {
+        "countryCode": "LK",
+        "areaCode": "94",
+        "en": "Sri Lanka (ශ්‍රී ලංකාව)"
+    },
+    {
+        "countryCode": "LR",
+        "areaCode": "231",
+        "en": "Liberia"
+    },
+    {
+        "countryCode": "LS",
+        "areaCode": "266",
+        "en": "Lesotho"
+    },
+    {
+        "countryCode": "LT",
+        "areaCode": "370",
+        "en": "Lithuania (Lietuva)"
+    },
+    {
+        "countryCode": "LU",
+        "areaCode": "352",
+        "en": "Luxembourg"
+    },
+    {
+        "countryCode": "LV",
+        "areaCode": "371",
+        "en": "Latvia (Latvija)"
+    },
+    {
+        "countryCode": "LY",
+        "areaCode": "218",
+        "en": "Libya (‫ليبيا‬‎)"
+    },
+    {
+        "countryCode": "MA",
+        "areaCode": "212",
+        "en": "Morocco (‫المغرب‬‎)"
+    },
+    {
+        "countryCode": "MC",
+        "areaCode": "377",
+        "en": "Monaco"
+    },
+    {
+        "countryCode": "MD",
+        "areaCode": "373",
+        "en": "Moldova (Republica Moldova)"
+    },
+    {
+        "countryCode": "ME",
+        "areaCode": "382",
+        "en": "Montenegro (Crna Gora)"
+    },
+    {
+        "countryCode": "MF",
+        "areaCode": "590",
+        "en": "Saint Martin (Saint-Martin (partie française))"
+    },
+    {
+        "countryCode": "MG",
+        "areaCode": "261",
+        "en": "Madagascar (Madagasikara)"
+    },
+    {
+        "countryCode": "MH",
+        "areaCode": "692",
+        "en": "Marshall Islands"
+    },
+    {
+        "countryCode": "MK",
+        "areaCode": "389",
+        "en": "Macedonia (FYROM) (Македонија)"
+    },
+    {
+        "countryCode": "ML",
+        "areaCode": "223",
+        "en": "Mali"
+    },
+    {
+        "countryCode": "MM",
+        "areaCode": "95",
+        "en": "Myanmar (Burma) (မြန်မာ)"
+    },
+    {
+        "countryCode": "MN",
+        "areaCode": "976",
+        "en": "Mongolia (Монгол)"
+    },
+    {
+        "countryCode": "MO",
+        "areaCode": "853",
+        "en": "Macau (澳門)"
+    },
+    {
+        "countryCode": "MQ",
+        "areaCode": "596",
+        "en": "Martinique"
+    },
+    {
+        "countryCode": "MR",
+        "areaCode": "222",
+        "en": "Mauritania (‫موريتانيا‬‎)"
+    },
+    {
+        "countryCode": "MS",
+        "areaCode": "1664",
+        "en": "Montserrat"
+    },
+    {
+        "countryCode": "MT",
+        "areaCode": "356",
+        "en": "Malta"
+    },
+    {
+        "countryCode": "MU",
+        "areaCode": "230",
+        "en": "Mauritius (Moris)"
+    },
+    {
+        "countryCode": "MV",
+        "areaCode": "960",
+        "en": "Maldives"
+    },
+    {
+        "countryCode": "MW",
+        "areaCode": "265",
+        "en": "Malawi"
+    },
+    {
+        "countryCode": "MX",
+        "areaCode": "52",
+        "en": "Mexico (México)"
+    },
+    {
+        "countryCode": "MY",
+        "areaCode": "60",
+        "en": "Malaysia"
+    },
+    {
+        "countryCode": "MZ",
+        "areaCode": "258",
+        "en": "Mozambique (Moçambique)"
+    },
+    {
+        "countryCode": "NA",
+        "areaCode": "264",
+        "en": "Namibia (Namibië)"
+    },
+    {
+        "countryCode": "NC",
+        "areaCode": "687",
+        "en": "New Caledonia (Nouvelle-Calédonie)"
+    },
+    {
+        "countryCode": "NE",
+        "areaCode": "227",
+        "en": "Niger (Nijar)"
+    },
+    {
+        "countryCode": "NF",
+        "areaCode": "672",
+        "en": "Norfolk Island"
+    },
+    {
+        "countryCode": "NG",
+        "areaCode": "234",
+        "en": "Nigeria"
+    },
+    {
+        "countryCode": "NI",
+        "areaCode": "505",
+        "en": "Nicaragua"
+    },
+    {
+        "countryCode": "NL",
+        "areaCode": "31",
+        "en": "Netherlands (Nederland)"
+    },
+    {
+        "countryCode": "NO",
+        "areaCode": "47",
+        "en": "Norway (Norge)"
+    },
+    {
+        "countryCode": "NP",
+        "areaCode": "977",
+        "en": "Nepal (नेपाल)"
+    },
+    {
+        "countryCode": "NR",
+        "areaCode": "674",
+        "en": "Nauru"
+    },
+    {
+        "countryCode": "NU",
+        "areaCode": "683",
+        "en": "Niue"
+    },
+    {
+        "countryCode": "NZ",
+        "areaCode": "64",
+        "en": "New Zealand"
+    },
+    {
+        "countryCode": "OM",
+        "areaCode": "968",
+        "en": "Oman (‫عُمان‬‎)"
+    },
+    {
+        "countryCode": "PA",
+        "areaCode": "507",
+        "en": "Panama (Panamá)"
+    },
+    {
+        "countryCode": "PE",
+        "areaCode": "51",
+        "en": "Peru (Perú)"
+    },
+    {
+        "countryCode": "PF",
+        "areaCode": "689",
+        "en": "French Polynesia (Polynésie française)"
+    },
+    {
+        "countryCode": "PG",
+        "areaCode": "675",
+        "en": "Papua New Guinea"
+    },
+    {
+        "countryCode": "PH",
+        "areaCode": "63",
+        "en": "Philippines"
+    },
+    {
+        "countryCode": "PK",
+        "areaCode": "92",
+        "en": "Pakistan (‫پاکستان‬‎)"
+    },
+    {
+        "countryCode": "PL",
+        "areaCode": "48",
+        "en": "Poland (Polska)"
+    },
+    {
+        "countryCode": "PM",
+        "areaCode": "508",
+        "en": "Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)"
+    },
+    {
+        "countryCode": "PN",
+        "areaCode": "64",
+        "en": "Pitcairn Islands"
+    },
+    {
+        "countryCode": "PS",
+        "areaCode": "970",
+        "en": "Palestine (‫فلسطين‬‎)"
+    },
+    {
+        "countryCode": "PT",
+        "areaCode": "351",
+        "en": "Portugal"
+    },
+    {
+        "countryCode": "PW",
+        "areaCode": "680",
+        "en": "Palau"
+    },
+    {
+        "countryCode": "PY",
+        "areaCode": "595",
+        "en": "Paraguay"
+    },
+    {
+        "countryCode": "QA",
+        "areaCode": "974",
+        "en": "Qatar (‫قطر‬‎)"
+    },
+    {
+        "countryCode": "RE",
+        "areaCode": "262",
+        "en": "Réunion (La Réunion)"
+    },
+    {
+        "countryCode": "RO",
+        "areaCode": "40",
+        "en": "Romania (România)"
+    },
+    {
+        "countryCode": "RS",
+        "areaCode": "381",
+        "en": "Serbia (Србија)"
+    },
+    {
+        "countryCode": "RU",
+        "areaCode": "7",
+        "en": "Russia (Россия)"
+    },
+    {
+        "countryCode": "RW",
+        "areaCode": "250",
+        "en": "Rwanda"
+    },
+    {
+        "countryCode": "SA",
+        "areaCode": "966",
+        "en": "Saudi Arabia (‫المملكة العربية السعودية‬‎)"
+    },
+    {
+        "countryCode": "SB",
+        "areaCode": "677",
+        "en": "Solomon Islands"
+    },
+    {
+        "countryCode": "SC",
+        "areaCode": "248",
+        "en": "Seychelles"
+    },
+    {
+        "countryCode": "SD",
+        "areaCode": "249",
+        "en": "Sudan (‫السودان‬‎)"
+    },
+    {
+        "countryCode": "SE",
+        "areaCode": "46",
+        "en": "Sweden (Sverige)"
+    },
+    {
+        "countryCode": "SG",
+        "areaCode": "65",
+        "en": "Singapore"
+    },
+    {
+        "countryCode": "SH",
+        "areaCode": "290",
+        "en": "Saint Helena"
+    },
+    {
+        "countryCode": "SI",
+        "areaCode": "386",
+        "en": "Slovenia (Slovenija)"
+    },
+    {
+        "countryCode": "SJ",
+        "areaCode": "47",
+        "en": "Svalbard and Jan Mayen"
+    },
+    {
+        "countryCode": "SK",
+        "areaCode": "421",
+        "en": "Slovakia (Slovensko)"
+    },
+    {
+        "countryCode": "SL",
+        "areaCode": "232",
+        "en": "Sierra Leone"
+    },
+    {
+        "countryCode": "SM",
+        "areaCode": "378",
+        "en": "San Marino"
+    },
+    {
+        "countryCode": "SN",
+        "areaCode": "221",
+        "en": "Senegal (Sénégal)"
+    },
+    {
+        "countryCode": "SO",
+        "areaCode": "252",
+        "en": "Somalia (Soomaaliya)"
+    },
+    {
+        "countryCode": "SR",
+        "areaCode": "597",
+        "en": "Suriname"
+    },
+    {
+        "countryCode": "SS",
+        "areaCode": "211",
+        "en": "South Sudan (‫جنوب السودان‬‎)"
+    },
+    {
+        "countryCode": "ST",
+        "areaCode": "239",
+        "en": "São Tomé and Príncipe (São Tomé e Príncipe)"
+    },
+    {
+        "countryCode": "SV",
+        "areaCode": "503",
+        "en": "El Salvador"
+    },
+    {
+        "countryCode": "SX",
+        "areaCode": "1721",
+        "en": "Sint Maarten"
+    },
+    {
+        "countryCode": "SZ",
+        "areaCode": "268",
+        "en": "Swaziland"
+    },
+    {
+        "countryCode": "TC",
+        "areaCode": "1649",
+        "en": "Turks and Caicos Islands"
+    },
+    {
+        "countryCode": "TD",
+        "areaCode": "235",
+        "en": "Chad (Tchad)"
+    },
+    {
+        "countryCode": "TG",
+        "areaCode": "228",
+        "en": "Togo"
+    },
+    {
+        "countryCode": "TH",
+        "areaCode": "66",
+        "en": "Thailand (ไทย)"
+    },
+    {
+        "countryCode": "TJ",
+        "areaCode": "992",
+        "en": "Tajikistan"
+    },
+    {
+        "countryCode": "TK",
+        "areaCode": "690",
+        "en": "Tokelau"
+    },
+    {
+        "countryCode": "TL",
+        "areaCode": "670",
+        "en": "Timor-Leste"
+    },
+    {
+        "countryCode": "TM",
+        "areaCode": "993",
+        "en": "Turkmenistan"
+    },
+    {
+        "countryCode": "TN",
+        "areaCode": "216",
+        "en": "Tunisia (‫تونس‬‎)"
+    },
+    {
+        "countryCode": "TO",
+        "areaCode": "676",
+        "en": "Tonga"
+    },
+    {
+        "countryCode": "TR",
+        "areaCode": "90",
+        "en": "Turkey (Türkiye)"
+    },
+    {
+        "countryCode": "TT",
+        "areaCode": "1868",
+        "en": "Trinidad and Tobago"
+    },
+    {
+        "countryCode": "TV",
+        "areaCode": "688",
+        "en": "Tuvalu"
+    },
+    {
+        "countryCode": "TW",
+        "areaCode": "886",
+        "en": "Taiwan (台灣)"
+    },
+    {
+        "countryCode": "TZ",
+        "areaCode": "255",
+        "en": "Tanzania"
+    },
+    {
+        "countryCode": "UA",
+        "areaCode": "380",
+        "en": "Ukraine (Україна)"
+    },
+    {
+        "countryCode": "UG",
+        "areaCode": "256",
+        "en": "Uganda"
+    },
+    {
+        "countryCode": "UY",
+        "areaCode": "598",
+        "en": "Uruguay"
+    },
+    {
+        "countryCode": "UZ",
+        "areaCode": "998",
+        "en": "Uzbekistan (Oʻzbekiston)"
+    },
+    {
+        "countryCode": "VA",
+        "areaCode": "379",
+        "en": "Vatican City (Città del Vaticano)"
+    },
+    {
+        "countryCode": "VC",
+        "areaCode": "1784",
+        "en": "Saint Vincent and the Grenadines"
+    },
+    {
+        "countryCode": "VE",
+        "areaCode": "58",
+        "en": "Venezuela"
+    },
+    {
+        "countryCode": "VG",
+        "areaCode": "1284",
+        "en": "British Virgin Islands"
+    },
+    {
+        "countryCode": "VN",
+        "areaCode": "84",
+        "en": "Vietnam (Việt Nam)"
+    },
+    {
+        "countryCode": "VU",
+        "areaCode": "678",
+        "en": "Vanuatu"
+    },
+    {
+        "countryCode": "WF",
+        "areaCode": "681",
+        "en": "Wallis and Futuna (Wallis-et-Futuna)"
+    },
+    {
+        "countryCode": "WS",
+        "areaCode": "685",
+        "en": "Samoa"
+    },
+    {
+        "countryCode": "XK",
+        "areaCode": "383",
+        "en": "Kosovo"
+    },
+    {
+        "countryCode": "YE",
+        "areaCode": "967",
+        "en": "Yemen (‫اليمن‬‎)"
+    },
+    {
+        "countryCode": "YT",
+        "areaCode": "262",
+        "en": "Mayotte"
+    },
+    {
+        "countryCode": "ZA",
+        "areaCode": "27",
+        "en": "South Africa"
+    },
+    {
+        "countryCode": "ZM",
+        "areaCode": "260",
+        "en": "Zambia"
+    },
+    {
+        "countryCode": "ZW",
+        "areaCode": "263",
+        "en": "Zimbabwe"
+    }
+];
+const areaCode=[
+    {
+        "id":1,
+        "areaID":1,
+        "countryCode": "BR",
+        "areaCode": "55",
+        "en": "Brazil (Brasil)",
+        "icon":require("@assets/area/BRL.rect.png")
+    },
+    {
+        "id":2,
+        "areaID":2,
+        "countryCode": "MX",
+        "areaCode": "52",
+        "en": "Mexico (México)",
+        "icon":require("@assets/area/MXN.rect.png")
+    },
+    {
+        "id":3,
+        "areaID":3,
+        "countryCode": "RU",
+        "areaCode": "7",
+        "en": "Russia (Россия)",
+        "icon":require("@assets/area/RUB.rect.png")
+    },
+    {
+        "id":4,
+        "areaID":4,
+        "countryCode": "AL",
+        "areaCode": "355",
+        "en": "Albania (Shqipëri)",
+        "icon":require("@assets/area/AL.rect.png")
+    },
+    {
+        "id":5,
+        "areaID":4,
+        "countryCode": "AD",
+        "areaCode": "376",
+        "en": "Andorra",
+        "icon":require("@assets/area/AD.rect.png")
+    },
+    {
+        "id":6,
+        "areaID":4,
+        "countryCode": "AT",
+        "areaCode": "43",
+        "en": "Austria (Österreich)",
+        "icon":require("@assets/area/AT.rect.png")
+    },
+    {
+        "id":7,
+        "areaID":4,
+        "countryCode": "BY",
+        "areaCode": "375",
+        "en": "Belarus (Беларусь)",
+        "icon":require("@assets/area/BY.rect.png")
+    },
+    {
+        "id":8,
+        "areaID":4,
+        "countryCode": "BE",
+        "areaCode": "32",
+        "en": "Belgium (België)",
+        "icon":require("@assets/area/BE.rect.png")
+    },
+    {
+        "id":9,
+        "areaID":4,
+        "countryCode": "BA",
+        "areaCode": "387",
+        "en": "Bosnia and Herzegovina (Босна и Херцеговина)",
+        "icon":require("@assets/area/BA.rect.png")
+    },
+    {
+        "id":10,
+        "areaID":4,
+        "countryCode": "BG",
+        "areaCode": "359",
+        "en": "Bulgaria (България)",
+        "icon":require("@assets/area/BG.rect.png")
+    },
+    {
+        "id":11,
+        "areaID":4,
+        "countryCode": "HR",
+        "areaCode": "385",
+        "en": "Croatia (Hrvatska)",
+        "icon":require("@assets/area/HR.rect.png")
+    },
+    {
+        "id":12,
+        "areaID":4,
+        "countryCode": "CY",
+        "areaCode": "357",
+        "en": "Cyprus (Κύπρος)",
+        "icon":require("@assets/area/CY.rect.png")
+    },
+    {
+        "id":13,
+        "areaID":4,
+        "countryCode": "CZ",
+        "areaCode": "420",
+        "en": "Czech Republic (Česká republika)",
+        "icon":require("@assets/area/CZ.rect.png")
+    },
+    {
+        "id":14,
+        "areaID":4,
+        "countryCode": "DK",
+        "areaCode": "45",
+        "en": "Denmark (Danmark)",
+        "icon":require("@assets/area/DK.rect.png")
+    },
+    {
+        "id":15,
+        "areaID":4,
+        "countryCode": "EE",
+        "areaCode": "372",
+        "en": "Estonia (Eesti)",
+        "icon":require("@assets/area/EE.rect.png")
+    },
+    {
+        "id":16,
+        "areaID":4,
+        "countryCode": "FI",
+        "areaCode": "358",
+        "en": "Finland (Suomi)",
+        "icon":require("@assets/area/FI.rect.png")
+    },
+    {
+        "id":17,
+        "areaID":4,
+        "countryCode": "FR",
+        "areaCode": "33",
+        "en": "France",
+        "icon":require("@assets/area/FR.rect.png")
+    },
+    {
+        "id":18,
+        "areaID":4,
+        "countryCode": "DE",
+        "areaCode": "49",
+        "en": "Germany (Deutschland)",
+        "icon":require("@assets/area/DE.rect.png")
+    },
+    {
+        "id":19,
+        "areaID":4,
+        "countryCode": "GR",
+        "areaCode": "30",
+        "en": "Greece (Ελλάδα)",
+        "icon":require("@assets/area/GR.rect.png")
+    },
+    {
+        "id":20,
+        "areaID":4,
+        "countryCode": "HU",
+        "areaCode": "36",
+        "en": "Hungary (Magyarország)",
+        "icon":require("@assets/area/HU.rect.png")
+    },
+    {
+        "id":21,
+        "areaID":4,
+        "countryCode": "IS",
+        "areaCode": "354",
+        "en": "Iceland (Ísland)",
+        "icon":require("@assets/area/IS.rect.png")
+    },
+    {
+        "id":22,
+        "areaID":4,
+        "countryCode": "IE",
+        "areaCode": "353",
+        "en": "Ireland",
+        "icon":require("@assets/area/IE.rect.png")
+    },
+    {
+        "id":23,
+        "areaID":4,
+        "countryCode": "IT",
+        "areaCode": "39",
+        "en": "Italy (Italia)",
+        "icon":require("@assets/area/IT.rect.png")
+    },
+    {
+        "id":24,
+        "areaID":4,
+        "countryCode": "LV",
+        "areaCode": "371",
+        "en": "Latvia (Latvija)",
+        "icon":require("@assets/area/LV.rect.png")
+    },
+    {
+        "id":25,
+        "areaID":4,
+        "countryCode": "LI",
+        "areaCode": "423",
+        "en": "Liechtenstein",
+        "icon":require("@assets/area/LI.rect.png")
+    },
+    {
+        "id":26,
+        "areaID":4,
+        "countryCode": "LT",
+        "areaCode": "370",
+        "en": "Lithuania (Lietuva)",
+        "icon":require("@assets/area/LT.rect.png")
+    },
+    {
+        "id":27,
+        "areaID":4,
+        "countryCode": "LU",
+        "areaCode": "352",
+        "en": "Luxembourg",
+        "icon":require("@assets/area/LU.rect.png")
+    },
+    {
+        "id":28,
+        "areaID":4,
+        "countryCode": "MT",
+        "areaCode": "356",
+        "en": "Malta",
+        "icon":require("@assets/area/MT.rect.png")
+    },
+    {
+        "id":29,
+        "areaID":4,
+        "countryCode": "MD",
+        "areaCode": "373",
+        "en": "Moldova (Republica Moldova)",
+        "icon":require("@assets/area/MD.rect.png")
+    },
+    {
+        "id":30,
+        "areaID":4,
+        "countryCode": "MC",
+        "areaCode": "377",
+        "en": "Monaco",
+        "icon":require("@assets/area/MC.rect.png")
+    },
+    {
+        "id":31,
+        "areaID":4,
+        "countryCode": "NL",
+        "areaCode": "31",
+        "en": "Netherlands (Nederland)",
+        "icon":require("@assets/area/NL.rect.png")
+    },
+    {
+        "id":32,
+        "areaID":4,
+        "countryCode": "MK",
+        "areaCode": "389",
+        "en": "Macedonia (FYROM) (Македонија)",
+        "icon":require("@assets/area/MK.rect.png")
+    },
+    {
+        "id":33,
+        "areaID":4,
+        "countryCode": "NO",
+        "areaCode": "47",
+        "en": "Norway (Norge)",
+        "icon":require("@assets/area/NO.rect.png")
+    },
+    {
+        "id":34,
+        "areaID":4,
+        "countryCode": "PL",
+        "areaCode": "48",
+        "en": "Poland (Polska)",
+        "icon":require("@assets/area/PL.rect.png")
+    },
+    {
+        "id":35,
+        "areaID":4,
+        "countryCode": "PT",
+        "areaCode": "351",
+        "en": "Portugal",
+        "icon":require("@assets/area/PT.rect.png")
+    },
+    {
+        "id":36,
+        "areaID":4,
+        "countryCode": "RO",
+        "areaCode": "40",
+        "en": "Romania (România)",
+        "icon":require("@assets/area/RO.rect.png")
+    },
+    {
+        "id":37,
+        "areaID":4,
+        "countryCode": "SM",
+        "areaCode": "378",
+        "en": "San Marino",
+        "icon":require("@assets/area/SM.rect.png")
+    },
+    {
+        "id":38,
+        "areaID":4,
+        "countryCode": "RS",
+        "areaCode": "381",
+        "en": "Serbia (Србија)",
+        "icon":require("@assets/area/RS.rect.png")
+    },
+    {
+        "id":39,
+        "areaID":4,
+        "countryCode": "SK",
+        "areaCode": "421",
+        "en": "Slovakia (Slovensko)",
+        "icon":require("@assets/area/SK.rect.png")
+    },
+    {
+        "id":40,
+        "areaID":4,
+        "countryCode": "SI",
+        "areaCode": "386",
+        "en": "Slovenia (Slovenija)",
+        "icon":require("@assets/area/SI.rect.png")
+    },
+    {
+        "id":41,
+        "areaID":4,
+        "countryCode": "ES",
+        "areaCode": "34",
+        "en": "Spain (España)",
+        "icon":require("@assets/area/ES.rect.png")
+    },
+    {
+        "id":42,
+        "areaID":4,
+        "countryCode": "CH",
+        "areaCode": "41",
+        "en": "Switzerland (Schweiz)",
+        "icon":require("@assets/area/CH.rect.png")
+    },
+    {
+        "id":43,
+        "areaID":4,
+        "countryCode": "UA",
+        "areaCode": "380",
+        "en": "Ukraine (Україна)",
+        "icon":require("@assets/area/UA.rect.png")
+    },
+    {
+        "id":44,
+        "areaID":4,
+        "countryCode": "GB",
+        "areaCode": "44",
+        "en": "United Kingdom",
+        "icon":require("@assets/area/GBP.rect.png")
+    },
+    {
+        "id":45,
+        "areaID":4,
+        "countryCode": "VA",
+        "areaCode": "379",
+        "en": "Vatican City (Città del Vaticano)",
+        "icon":require("@assets/area/VA.rect.png")
+    }
+]
+export default areaCode;

src/locales/languages/en_US.json

@@ -657,6 +657,9 @@
     "title": "Area Select",
     "btn_confirm": "Confirm"
   },
+  "areaCodeSelect": {
+    "title": "Area Code Selection"
+  },
   "web": {
     "activity": {
       "redpack_not_available": "There is no RedPack",

src/styles/theme.js

@@ -139,5 +139,9 @@ export default createGlobalStyle`
         light: 'rgba(255, 255, 255, 0.90) !important',
         dark:'rgba(0, 0, 0, 0.90) !important'
     })};
+    --input-border: ${theme('theme', {
+        light:'rgba(0,0,0,0.1)',
+        dark:'rgba(255,255,255,0.1)'
+    })};
   }
 `;