\n {/* Platform banner */}\n \n \n \n \n\n \n
\n ) : (\n \n {/* Platform main heading and subheading on the banner */}\n \n \n \n\n \n
\n ) : activeTab === \"04\" ? (\n \n \n
\n\n {/* platform images on the banner */}\n {platformBannerValues.sub_heading}
\n\n {/* image urls to be updated for product_no 02(Edgetrak 4N) */\n activeTab === \"02\" ? (\n \n \n \n\n \n
\n ) : activeTab === \"03\" ? (\n \n
\n \n
\n \n {platformBannerValues.product}\n
\n\n {\n navTo(\"/contact\");\n }}\n >\n \n
\n \n \n redirectToProducts()}\n >\n \n
\n \n \n \n
\n \n Explore options\n
\n Request info
\n \n {platformBannerValues.subscription}\n
\n \n \n \n {/* div added for platform slider in mobile view */}\n \n {\n setMobilePlatformTileActive(e.activeIndex);\n }}\n >\n {mobileTilesSliderArr.map((item: any, index: number) => {\n return (\n \n {/* Platform main heading and subheading on the banner */}\n \n \n \n\n \n
\n ) : index === 3 ? (\n \n \n
\n\n {/* platform images on the banner */}\n {item.sub_heading}
\n\n {/* image urls to be updated for product_no 02(Edgetrak 4N) */\n index === 1 ? (\n \n \n \n\n \n
\n ) : index === 2 ? (\n \n {\n navTo(\"/contact\");\n }}\n >\n \n
\n \n \n \n
\n \n {item.product}\n
\n\n
\n \n \n redirectToProducts()}\n >\n \n \n Explore options\n
\n \n \n
\n \n Request info\n
\n \n {item.subscription}\n
\n \n \n \n );\n })}\n \n \n {products.map((product: any, index: number) => {\n return (\n {\n changePlatformTab(index, product.product_no);\n }}\n >\n
\n );\n })}\n \n \n\n {/* System Overview */}\n {product.product_no}
\n {product.name}
\n \n
\n \n
\n \n 
\n \n
\n \n
\n \n \n Industry-leading, \n \n fully integrated{\" \"}\n \n \n {\" \"}\n asset management platform\n \n
\n \n {/* Site Visibility */}\n
\n\n {/* Real time data collection */}\n \n 
\n \n Site visibility\n
\n \n Securely manage your assets with Rulo’s fully-integrated and\n simplified solution, for less.\n
\n \n 
\n
\n\n {/* Easy to read UI */}\n Reliable data
\n \n EdgeTrak controllers store data on a flash drive before\n forwarding to the cloud. This ensures data is not lost due to\n poor network conditions or power loss.\n
\n \n 
\n
\n\n {/* Equipment integration */}\n Easy-to-read UI
\n \n Using simple user-configurable event settings, manage the status\n of your equipment using a simple and intuitive UI.\n
\n \n 
\n
\n Equipment control
\n \n Start or stop equipment remotely. Change operation modes. If it\n breaks, leaks, loses power, or keeps you up at night—we can help\n you manage it.\n
\n \n
\n \n
\n \n \n \n
\n \n {}}\n spaceBetween={50}\n slidesPerView={\"auto\"}\n autoplay={{ delay: 5000 }}\n onSlideChange={e => {\n setCompanyActive(e.activeIndex);\n }}\n >\n \n \n \n \n \n\n
\n \n \n
\n \n
\n Connect
\n \n {\" \"}\n and\n
\n \n {\" \"}\n Configure\n
\n \n Register your device, connect your equipment and configure\n remotely.\n
\n \n \n
\n \n Rulo controllers have flexible user-configurable inputs and\n outputs that quickly enable connection to equipment and systems.\n
\n \n {/* How it works texts */}\n
\n \n
\n {/* image for how it works */}\n \n Monitor, control\n
\n \n {\" \"}\n and\n
\n \n {\" \"}\n manage\n
\n \n Through realtime analytics and easy-to-read dashboards and\n reports, Rulo gives you everything you need to make key\n decisions on the fly.\n
\n \n 
\n
\n \n {[0, 1].map((item: any) => (\n {\n onClickHomeCompanyDot(item);\n }}\n >\n
\n ))}\n \n
\n {/* product feature table for the desktop/laptop screens */}\n \n
\n \n \n \n
\n \n
\n\n {/* product features items listed with checkboxs for the mobile/tablet screens */}\n \n \n \n
\n
\n | \n {hardware_data.map((data: any, index: number) => {\n return (\n | \n \n \n \n \n \n \n | \n );\n })}\n {features.feature_name} | \n {hardware_data.map((hardware: any, index: number) => {\n return (\n
|---|---|
| \n {hardware_data.map((data: any, index: number) => {\n return (\n | \n \n {data.product_link === \"\" ||\n data.visibility !== \"active\" ? (\n <>\n // \n ) : (\n \n \n \n )}\n \n | \n );\n })}\n
\n {hardware_data.map((data: any) => {\n return (\n
\n \n ) : (\n \n \n \n )}\n \n );\n })}\n \n \n
\n {data.heading}
\n {data.sub_heading}
\n Includes:
\n {features_data_mobile.map((features: any, index: number) => {\n return (\n \n {features[data.id] !== \"\" ? (\n \n
\n );\n })}\n {/* Product sheet button for mobile screen */}\n {data.product_link === \"\" || data.visibility !== \"active\" ? (\n \n \n \n
\n \n \n \n
\n \n
\n \n \n
\n \n Using our self-service platform, securely connect your assets to the cloud and manage them effectively. Empower your people to take action now.\n
\n\n \n Easy set-up / Transparent pricing / Plug and play design\n \n
\n\n
\n \n \n \n \n {/* */}\n \n
\n \n
\n \n {\n navTo(\"/platform\");\n }}\n >\n \n
\n \n \n \n \n
\n Explore options
\n \n
\n \n \n
\n \n \n
\n \n \n With a wide variety of connectivity interfaces and efficient data management, Rulo’s\n EdgeTrak line of controllers let’s you connect everything to the cloud at a low cost.\n
\n\n \n Easy set-up / Transparent pricing / Plug and play design\n \n
\n\n
\n \n {\n navTo(\"/platform\");\n }}\n >\n \n
\n \n \n \n \n
\n Explore options
\n \n
\n \n \n
\n \n \n
\n \n \n Fully remotely configured edge devices help you track performance and optimize your operations.
\n Smart operations management at your fingertips.\n
\n \n Easy set-up / Transparent pricing / Plug and play design\n \n
\n\n
\n \n {\n navTo(\"/platform\");\n }}\n >\n \n
\n \n \n \n \n
\n Explore options
\n \n
\n \n \n \n
\n \n \n
\n \n Our platform was designed for mixed fleet operations. Whether you have equipment from different manufacturers or just different kinds of equipment, we can help you connect them up with little effort.\n
\n\n \n Easy set-up / Transparent pricing / Plug and play design\n \n
\n\n
\n \n \n \n {/* \n \n */}\n
\n \n
\n \n {\n navTo(\"/platform\");\n }}\n >\n \n
\n \n \n \n \n
\n Explore options
\n \n
\n \n
\n \n
\n \n \n\n \n
\n \n
\n \n {\n navTo(\"/platform\");\n }}\n >\n Details\n \n
\n \n
\n \n \n Industry-leading,\n fully integrated {\" \"}\n asset management platform \n
\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n
\n \n \"Reading a digital meter, writing down what you see with a pencil in a tally book, then going home to type it into a computer is wholly wasteful in the world we live in today. The world is moving fast outside of these office walls, and I want a service and technology partner who continues to improve and continues to evolve. I’ve found that in Rulo.\"\n
\n\n
\n Chris W.
\n COO Rimrock Resource Operating, LLC, OK\n \n
\n \n \"It has enhanced the utilization of our time so that we can take on other projects instead of just having to stay and focus on that one thing. It’s a great system and it works perfectly for what we need.\"\n
\n\n
\n Naomi D.
\n Town of Ninnekah, OK\n \n
\n \n \"The Rulo platform is the most versatile, compact, and reliable, remote data collection/control units I have ever worked with. In the 15+ years I have been working in controls, Rulo by far outshines all competitors. I would recommend, and do recommend, this system for any and all customers looking for Data Collection or Remote Operations Applications.\"\n
\n\n
\n Loyd W.
\n Action Energy Services, WY\n \n
\n \n \"Rebellion first met with Rulo in the fall of 2018, it was immediately clear to us that Rulo was going to be our solution. The real kicker for us and this opportunity was the exceptional service at prices that our marginal wells could economically justify. We are currently planning to install pipeline systems, SWD facilities, and multi-pad well sites with different artificial lift, all monitored and automated with Rulo.\"\n
\n\n
\n Eric S.
\n E&P Company, OK\n \n
\n {!smallScreen && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n navTo(\"/industry\");\n }}\n >\n View all\n \n
\n \n \n \n \n
\n {/* Oil / gas
\n \n Reduce downtime. Pump by exception. Get oil pick up\n notifications. And increase productivity.\n
\n Crypto mining
\n \n Power and cooling systems issues are some of the biggest\n causes of downtime. Be in the know, with temperature,\n humidity and power monitoring to increase uptime.\n
\n */}\n Municipality
\n \n Know when you have a power failure or when your back up\n system failed. Avoid spills or low head pump failures.{\" \"}\n
\n \n \n Rental / asset tracking\n
\n \n Know when your equipment is started or stopped. Get a\n notification when fuel is low. Lack of fuel shutdowns can\n quickly become expensive.{\" \"}\n
\n \n Construction
\n \n Using run hours, idle time and fuel consumption, track your\n equipment utilization.{\" \"}\n
\n \n \n Industrial manufacturing\n
\n \n Connect your operations and track your processes.{\" \"}\n
\n \n \n Emissions management\n
\n \n Maintain compliance. Abnormal emissions is a sign of lost\n productivity.{\" \"}\n
\n \n \n Telecommunications\n
\n \n Reduce infrastructure maintenance costs using remote\n monitoring.{\" \"}\n
\n \n Agriculture
\n \n Know when you have a power failure or when your back up\n system failed. Avoid spills or low head pump failures.{\" \"}\n
\n \n {/* \n Emergency response & disaster relief\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam\n faucibus enim auctor magna rhoncus, in vulputate elit tempus.{\" \"}\n
\n */}\n \n \n )}\n {smallScreen && (\n <>\n \n Oil / gas\n
\n \n Reduce downtime. Pump by exception. Get oil pick up\n notifications. And increase productivity.\n
\n \n \n \n Crypto mining\n
\n \n Power and cooling systems issues are some of the\n biggest causes of downtime. Be in the know, with\n temperature, humidity and power monitoring to increase\n uptime.\n
\n \n \n \n Municipality\n
\n \n Know when you have a power failure or when your back\n up system failed. Avoid spills or low head pump\n failures.{\" \"}\n
\n \n \n \n Rental / asset tracking\n
\n \n Know when your equipment is started or stopped. Get a\n notification when fuel is low. Lack of fuel shutdowns\n can quickly become expensive.{\" \"}\n
\n \n \n \n Construction\n
\n \n Using run hours, idle time and fuel consumption, track\n your equipment utilization.{\" \"}\n
\n \n \n \n Industrial manufacturing\n
\n \n Connect your operations and track your processes.{\" \"}\n
\n \n \n \n Emissions management\n
\n \n Maintain compliance. Abnormal emissions is a sign of\n lost productivity.{\" \"}\n
\n \n \n \n Reduce infrastructure maintenance costs using remote\n monitoring.{\" \"}\n
\n \n \n \n Agriculture\n
\n \n Know when you have a power failure or when your back\n up system failed. Avoid spills or low head pump\n failures.{\" \"}\n
\n \n \n \n Emergency response & disaster relief\n
\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam\n faucibus enim auctor magna rhoncus, in vulputate elit tempus.{\" \"}\n
\n */}\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n navTo(\"/benefits\");\n }}\n >\n View all\n \n
\n \n {smallScreen &&\n (benefitsActive[1].is_active ||\n benefitsActive[2].is_active) && (\n \n )}\n {smallScreen &&\n (benefitsActive[1].is_active ||\n benefitsActive[0].is_active) && (\n \n )}\n
\n \n {\n \n {\n if (!smallScreen) {\n if (benefitsActive[0].is_active) changeBenefitsTab(1);\n else if (benefitsActive[1].is_active)\n changeBenefitsTab(2);\n else if (benefitsActive[2].is_active)\n changeBenefitsTab(3);\n else if (benefitsActive[3].is_active)\n changeBenefitsTab(0);\n }\n }}\n />\n {benefitsActive.map((item: any, index: any) => (\n {\n setBenefitsTileOnClick(false);\n scrollHorizontalBenefitsTitleRow(index, \"touch\");\n }}\n >\n {item.title}\n
\n ))}\n \n {benefitsActive[0].is_active && (\n
\n }\n\n \n
\n )}\n {benefitsActive[1].is_active && (\n \n Detailed reports when you want them and easy-to-read\n dashboards when you’re on the go.\n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {benefitsActive[2].is_active && (\n \n Cellular connectivity, like phone calls, sometimes gets\n dropped. We designed our platform with real-world\n connectivity in mind. That’s why all data and alarm logs\n are stored on a flash drive until network connectivity is\n available: so you can get your data. Consistently.\n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {benefitsActive[3].is_active && (\n \n Unlike conventional remote monitoring which polls every\n fifteen minutes, inputs are polled or sampled by the Rulo\n controller multiple times per second. This ensures you\n receive reliable alarms and notifications without adding\n to your data costs.\n
\n \n
\n \n
\n \n \n
\n \n
\n )}\n \n Rulo uses NIST-recommended authentication and encryption\n to give you a secure way to manage your assets.\n
\n \n
\n \n
\n \n \n
\n \n {\n scrollHorizontalBenefitsTitleRow(e.activeIndex, \"callback\");\n }}\n onSwiper={swiper => console.log(swiper)}\n >\n \n \n \n \n \n \n
\n \n \n
\n \n Detailed reports when you want them and easy-to-read\n dashboards when you’re on the go.\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n Cellular connectivity, like phone calls, sometimes gets\n dropped. We designed our platform with real-world\n connectivity in mind. That’s why all data and alarm logs\n are stored on a flash drive until network connectivity is\n available: so you can get your data. Consistently.\n
\n \n
\n \n
\n \n \n \n
\n \n Unlike conventional remote monitoring which polls every\n fifteen minutes, inputs are polled or sampled by the Rulo\n controller multiple times per second. This ensures you\n receive reliable alarms and notifications without adding\n to your data costs.\n
\n \n
\n \n
\n \n \n
\n \n Rulo uses NIST-recommended authentication and encryption\n to give you a secure way to manage your assets.\n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n navTo(\"/company\");\n }}\n >\n Company\n \n
\n \n {}}\n spaceBetween={50}\n slidesPerView={\"auto\"}\n autoplay={{ delay: 5000 }}\n onSlideChange={e => {\n setCompanyActive(e.activeIndex);\n }}\n >\n \n \n \n \n \n \n \n \n \n\n
\n \n \n \n
\n \n
\n \n
\n \n Rulo is at the center{\" \"}\n \n of your operations.\n \n
\n \n The intersection of simplicity, security and cost.\n
\n \n Named after Franz Reuleaux, the 19th-century German\n engineer who advanced the study of machines, a reuleaux\n triangle is a shape made with intersection curves when\n circles are drawn from the vertices of an equilateral\n triangle.\n
\n \n \n
\n \n
\n \n
\n \n
\n \n Operations simplified.\n
\n \n Detailed reports when you want them and easy-to-read\n dashboards when you’re on the go. Rulo’s simple\n installation, and user-friendly mobile interface gives\n new meaning to “out of sight, out of mind.”\n
\n \n \n
\n \n
\n \n
\n \n
\n \n Rulo is the lowest cost solution to install and operate.\n
\n \n When equipment failes to produce at max capcity, it\n costs you time and money, Rulo notifies you when\n equipment activity falls below user-defined thresholds.\n
\n \n \n
\n \n
\n \n
\n \n
\n \n Never sacrifice security.\n
\n \n Protect your assets with banking grade security, Rulo\n adheres to NIST standards for secure communication by\n utilizing TLS 1.2 and 256-bit encryption.\n
\n \n \n
\n \n {[0, 1, 2, 3].map((item: any) => (\n {\n onClickHomeCompanyDot(item);\n }}\n >\n
\n ))}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n navTo(\"/blog\");\n }}\n >\n \n View All\n \n \n
\n \n
\n \n \n \n
\n \n
\n {blogData[0]?.heading}
\n {blogData[0]?.date_time}
\n \n Uniquely positioned{\" \"}\n to serve you\n
\n \n The RULO asset management suite empowers you to take full control of\n your industrial equipment through information and customizable\n automation that you can access anytime, anywhere on any device.\n
\n \n
\n \n \n {/* Commented out the crypto mining tile */}\n {/* \n \n
\n \n {\n setToggleValue(\"\");\n }}\n >\n
\n )}\n \n \n \n \n \n
\n \n \n {/* {isTileClicked && (\n \n \n \n \n \n {toggleValue !== \"oil_gas\" ? (\n {\n getData(\"oil_gas\");\n }}\n >\n \n
\n ) : (\n \n
\n )} */}\n \n 
\n
\n \n
\n \n {industryData?.industry}\n
\n \n {industryData?.description}\n
\n \n
\n \n
*/}\n {/* Use Cases
\n {usecaseData.map((industry: any, index: number) => {\n return (\n \n {industry.name}\n
\n );\n })}\n \n \n
*/}\n {/* \n
\n \n {industryData?.get_details?.brief_desc}\n
\n \n {industryData?.get_details?.supporting_text}\n
\n \n 
{\" \"}\n
\n \n Oil / gas\n
\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Crypto Mining\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link!=\"\"?\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n :<>}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Municipality\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Rental Asset Tracking\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Construction\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Industrial Manufacturing\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Emissions Management\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Telecommunications\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link != \"\" ? (\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n ) : (\n <>\n )}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n />{\" \"}\n {\n window.open(\n industryData?.get_details?.pdf_link,\n \"_blank\"\n );\n }}\n >\n Download case study\n \n
\n \n Emergency response & disaster relief\n
\n \n ) : (\n \n
\n {industryData?.get_details?.pdf_link!=\"\"?\n \n
\n \n \n
\n \n
\n \n {industryData?.industry}\n
\n \n \n {industry.name}\n
\n );\n }\n )}\n \n Use Cases\n
\n {usecaseData.map(\n (industry: any, index: number) => {\n return (\n \n
\n :<>}\n \n \n \n {industryData?.get_details?.brief_desc}\n
\n \n
\n \n \n \n \n \n {isTileClicked && (\n \n {\n navTo(\"/contact\");\n }}\n >\n \n \n Custom Rulo\n
\n \n Not seeing what you need?\n
\n \n Tell us about your specific use case and we’ll work to\n create a Rulo solution that’s built for you.\n
\n\n \n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n {\n setIsTileClicked(false);\n }}\n />\n
\n \n
\n \n )}\n \n
\n Use Cases
\n {usecaseData.map((industry: any, index: number) => {\n return (\n \n {industry.name}\n
\n );\n })}\n \n
\n \n \n
\n ) : (\n <>\n )}\n \n {industryData?.get_details?.brief_desc}\n
\n \n {industryData?.get_details?.supporting_text}\n
\n \n \n {\" \"}\n
\n \n
\n \n
\n \n {industryData?.industry}\n
\n \n {\n setIsTileClicked(false);\n }}\n />\n
\n \n
\n \n )} */}\n \n
\n Use Cases
\n {usecaseData.map((industry: any, index: number) => {\n return (\n \n {industry.name}\n
\n );\n })}\n \n \n
\n \n \n
\n \n {industryData?.get_details?.brief_desc}\n
\n \n {industryData?.get_details?.supporting_text}\n
\n \n \n {\" \"}\n
\n Oil / gas
\n \n {/* Commented out the crypto mining tile */}\n {/* Crypto mining
\n */}\n Municipality
\n \n \n Rental / asset tracking\n
\n \n Construction
\n \n \n Industrial manufacturing\n
\n \n \n Emissions management\n
\n \n Telecommunications
\n \n {/* Commented out the emergency response tile */}\n {/* \n Emergency response & disaster relief\n
\n */}\n \n \n \n \n
\n \n \n {!isContactPage && (\n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n {\n navTo(\"/contact\");\n }}\n >\n \n
\n \n \n Ready to simplify your operations?\n
\n \n 
\n
\n Request a demo unit
\n \n
\n \n );\n};\nexport default Footer;\n","import React, { useState, useCallback, useEffect } from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport \"./Benefits.css\";\nimport ReactInterval from \"react-interval\";\nfunction getWindowDimensions() {\n if (window.innerWidth < 850) {\n return true;\n }\n return false;\n}\nclass Benefits extends React.Component\n
\n \n {\n navToSpecificDiv(\"/links\", \"link1\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n Privacy policy\n {\" \"}\n |\n {\n navToSpecificDiv(\"/links\", \"link2\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\" \"}\n Terms of use\n {\" \"}\n |\n {\n window.open(\"https://www.aurum.rulotech.com/\", \"_blank\");\n }}\n style={{ cursor: \"pointer\" }}\n >\n {\" \"}\n Customer login\n \n
\n \n © 2024 Rulo. All rights reserved.\n
\n \n 
\n
\n \n \n \n \n
\n \n \n {!this.state.is_small_screen && (\n \n Measurable solutions across{\" \"}\n multiple industry verticals \n
\n \n Regardless of industry, RULO’s platform and devices have you\n covered. We’re the most competitively priced equipment management\n solution on the market.\n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n {\n this.setState({ benefitsTileOnClick: false });\n this.scrollTo(1);\n }}\n className={`left_section_sub_text_benefits ${\n this.state.benefitsScrollSection == 1\n ? \"selected_section\"\n : \"\"\n }`}\n >\n Custom reports\n
\n \n {\n this.setState({ benefitsTileOnClick: false });\n this.scrollTo(2);\n }}\n className={`left_section_sub_text_benefits ${\n this.state.benefitsScrollSection == 2\n ? \"selected_section\"\n : \"\"\n }`}\n >\n Consistent logs\n
\n \n {\n this.setState({ benefitsTileOnClick: false });\n this.scrollTo(3);\n }}\n className={`left_section_sub_text_benefits ${\n this.state.benefitsScrollSection == 3\n ? \"selected_section\"\n : \"\"\n }`}\n >\n Reliable edge-generated events\n
\n \n {\n this.setState({ benefitsTileOnClick: false });\n this.scrollTo(4);\n }}\n className={`left_section_sub_text_benefits ${\n this.state.benefitsScrollSection == 4\n ? \"selected_section\"\n : \"\"\n }`}\n >\n Zero-trust security\n
\n \n {\n if (this.state.benefitsScrollSection < 4)\n this.scrollTo(this.state.benefitsScrollSection + 1);\n else this.scrollTo(1);\n }}\n />\n {this.state.benefitsScrollSection == 1 && (\n \n
\n \n \n \n Detailed reports when you want them and easy-to-read\n dashboards when you’re on the go.\n
\n \n \n Custom reports\n
\n \n Rulo’s fully integrated end to end solution let's you\n create custom reports. Whether you want a dashboard\n all your assets or compare data from multiple assets,\n the reports give you full flexibility.\n
\n \n
\n \n )}\n {this.state.benefitsScrollSection == 2 && (\n \n \n \n
\n \n
\n \n \n \n \n We understand that cellular connectivity, like phone\n calls, sometimes get dropped. Our platform was\n designed with real-world connectivity in mind. All\n data and alarm logs are stored on a flash drive\n until network connectivity is available. So, you can\n get your data. Consistently.\n
\n \n \n Flash storage and forward\n
\n \n Poor network connectivity is not a unique problem to\n you. Rulo has the solution.\n
\n \n
\n \n \n \n
\n \n
\n \n \n Delivering reliablity using edge processing\n
\n \n Unlike conventional remote monitoring which polls\n every fifteen minutes, inputs are polled or sampled by\n the Rulo controller multiple times per second. This\n ensures you receive reliable alarms and notifications\n without adding to your data costs.\n
\n \n All alarms are fully remotely configurable by the\n user.\n
\n \n
\n \n \n
\n \n \n Using the device root-of-trust, transport layer\n security (256-bit TLS 1.2), and a single point of\n access using the web portal, Rulo uses\n NIST-recommended authentication and encryption to give\n you a secure way to manage your assets.\n
\n \n \n Never trust, always verify\n
\n \n Many industrial equipment and legacy devices were not\n designed to be connected to the internet. Let us help\n you mitigate the risk of cloud connectivity. Security\n made easy, by Rulo.\n
\n \n \n \n
\n \n \n {/* */}\n
\n \n
\n \n
\n \n Custom reports\n
\n \n Detailed reports when you want them and easy-to-read\n dashboards when you’re on the go.\n
\n \n Rulo’s fully integrated end to end solution let's you\n create custom reports. Whether you want a dashboard all\n your assets or compare data from multiple assets, the\n reports give you full flexibility.\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n Flash storage and forward\n
\n \n We understand that cellular connectivity, like phone\n calls, sometimes get dropped. Our platform was\n designed with real-world connectivity in mind. All\n data and alarm logs are stored on a flash drive until\n network connectivity is available. So, you can get\n your data. Consistently.\n
\n \n Poor network connectivity is not a unique problem to\n you. Rulo has the solution.\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n Delivering reliablity using edge processing\n
\n \n Unlike conventional remote monitoring which polls every\n fifteen minutes, inputs are polled or sampled by the\n Rulo controller multiple times per second. This ensures\n you receive reliable alarms and notifications without\n adding to your data costs.\n
\n \n All alarms are fully remotely configurable by the user.\n
\n \n
\n \n \n
\n \n
\n \n
\n \n Never trust, always verify\n
\n \n Using the device root-of-trust, transport layer security\n (256-bit TLS 1.2), and a single point of access using\n the web portal, Rulo uses NIST-recommended\n authentication and encryption to give you a secure way\n to manage your assets.\n
\n \n Many industrial equipment and legacy devices were not\n designed to be connected to the internet. Let us help\n you mitigate the risk of cloud connectivity. Security\n made easy, by Rulo.\n
\n \n
\n \n \n {/* */}\n
\n \n {/*
\n {/* Analytics grounded in
*/}\n Analytics grounded in{\" \"}\n industrial expertise\n\n
*/}\n Analytics grounded in
\nindustrial expertise
\n\n We are the pioneers in our industry, bringing over many years of\n collective experience to deliver superior data, analytics and\n automation solutions to serve our customers.\n
\n \n
\n {!ismobileview ? (\n <>\n \n \n \n
\n \n \n
\n \n \n What's in a name?{\" \"}\n For us, it's quite a lot.\n
\n \n
\n \n When we sought out to rebrand our company, we kept coming\n back to the principles of Simplicity, Security and Cost.\n We're literally the convergence of three, the Reuleaux\n triangle and the core.\n
\n\n We offer the most user friendly product over any of our\n competitors, at the lowest price around. And we do this\n without sacrificing security.\n
\n\n Founded in 2018, we are the pioneers in our industry,\n bringing over many years of collective experience to deliver\n superior data, analytics and automation solutions to serve\n our customers. Our leaders have spent their entire\n professional careers on how best to manage assets and\n mitigate risk while bringing innovative solutions to market.\n We credit our strength and stability to the collaborative\n partnerships we have built with our customers.\n
\n\n 
\n
\n \n ) : (\n <>\n \n \n
\n \n
\n \n )}\n \n What's in a name?{\" \"}\n For us, it's quite a lot.\n
\n \n
\n \n When we sought out to rebrand our company, we kept coming back\n to the principles of Simplicity, Security and Cost. We're\n literally the convergence of three, the Reuleaux triangle and\n the core.\n
\n\n We offer the most user friendly product over any of our\n competitors, at the lowest price around. And we do this\n without sacrificing security.\n
\n\n Founded in 2018, we are the pioneers in our industry, bringing\n over many years of collective experience to deliver superior\n data, analytics and automation solutions to serve our\n customers. Our leaders have spent their entire professional\n careers on how best to manage assets and mitigate risk while\n bringing innovative solutions to market. We credit our\n strength and stability to the collaborative partnerships we\n have built with our customers.\n
\n\n
\n \n \n \n
\n \n
\n \n
\n {/* \n
\n \n 
\n
\n \n
\n \n
\n President
\n \n
\n Vijay Janardhan
\n \n {\n window.open(\n \"https://www.linkedin.com/in/vijay-janardhan-12aa2a85/\",\n \"_blank\"\n );\n }}\n />\n
\n \n
\n \n Vijay has spent his entire professional career studying,\n analyzing and developing asset management solutions. He\n brings over 20 years of industry experience to Rulo. After\n receiving a Bachelor of Engineering in Mechanical\n Engineering from College of Engineering-Guindy, Chennai,\n India, Vijay continued to dive deep into the world of\n AI-based autonomous systems by earning a dual Masters Degree\n in Electrical and Mechanical Engineering from the University\n of Missouri-Rolla. The vast majority of his career was spent\n at Caterpillar, where he broadened his knowledge of asset\n monitoring and management needs. Vijay further specialized\n in the Oil and Gas Industry, leading global diverse\n cross-functional teams to deliver Advanced Condition\n Monitoring solutions. His findings unveiled a simple idea-\n assets require similar monitoring and intervention needs.\n While there is a broad spectrum of limits and levels, the\n types of monitoring and automation are consistent throughout\n the industry.\n
\n\n Vijay holds 12 patents in his field: 5 in machine\n productivity, 4 in energy storage and power management and 3\n in advanced condition monitoring. Vijay has a deep and\n comprehensive understanding of asset monitoring and the\n associated needs of plant managers to operate at capacity.\n This combined with his love of technology and innovation,\n Vijay brings a unique and comprehensive wealth of knowledge\n to the Rulo leadership team. He is influential in design and\n deployment of current and future releases and is\n instrumental in deploying the Rulo vision.\n
\n\n
*/}\n \n
\n \n 
\n
\n \n
\n \n
\n Advisor
\n \n
\n Brian Edge
\n \n {\n window.open(\n \"https://www.linkedin.com/in/brian-edge/\",\n \"_blank\"\n );\n }}\n />\n
\n \n
\n \n Brian Edge has seven years of industry experience in the\n upstream sector in both technical and operational\n engineering roles. He has worked most major basins onshore\n US, as well as offshore assets in the Gulf of Mexico. One of\n Brian's areas of focus has been finding more efficient ways\n to leverage data to increase productivity, decrease\n expenses, and optimize asset development. Brian holds a B.S.\n in Petroleum Engineering from the University of Oklahoma and\n an MBA from Harvard Business School.\n
\n\n
\n \n
\n \n 
\n
\n \n
\n \n
\n Advisor
\n \n
\n Tyler Hassen
\n \n {\n window.open(\n \"https://www.linkedin.com/in/tyler-hassen-802b4a12/\",\n \"_blank\"\n );\n }}\n />\n
\n \n
\n \n Tyler Hassen is the president of Basin Drilling Tools and\n has served in a variety of executive positions at Basin\n since joining the organization in 2014. Before joining Basin\n Holdings, Tyler worked in the Global Energy Group at Morgan\n Stanley from 2005 to 2008. Mr. Hassen holds an A.B. from\n Princeton University.\n
\n\n
\n \n
\n \n 
\n
\n \n
\n \n
\n Advisor
\n \n
\n Kyle Scholl
\n \n {\n window.open(\n \"https://www.linkedin.com/in/kyle-scholl/\",\n \"_blank\"\n );\n }}\n />\n
\n \n
\n \n Kyle Scholl has over 30 years of international product\n development experience at Caterpillar Inc. including Global\n Product Manager roles in systems and components for Energy &\n Transportation, Construction and Mining machines. He has led\n product development team innovations in engines, electronics\n system integration, drivetrains, and hydraulics\n technologies.\n
\n\n \n
\n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n
\n \n {\n navToWithData(`${blogData[0].id}`, blogData[0]);\n }}\n >\n \n
\n \n {blogData[0]?.heading}
\n {blogData[0]?.date_time}
\n \n \n
\n Read Article
\n \n {visibleBlogData.map((item: any, index: any) => {\n return (\n {\n navToWithData(`${item.id}`, item);\n }}\n >\n
\n );\n })}\n \n\n {showLoadMore && (\n {item.date_time}
\n {item.heading}
\n {item.sub_heading}
\n \n {\n loadMore();\n }}\n >\n Load More\n
\n \n )}\n \n {/* Contact Banner Section */}\n \n \n {/* Contact Form Section */}\n \n \n
\n );\n};\nexport default Contact;\n","import React from 'react';\n\nimport { createFormControl } from './logic/createFormControl';\nimport getProxyFormState from './logic/getProxyFormState';\nimport shouldRenderFormState from './logic/shouldRenderFormState';\nimport {\n FieldErrors,\n FieldNamesMarkedBoolean,\n FieldValues,\n FormState,\n UseFormProps,\n UseFormReturn,\n} from './types';\nimport { useSubscribe } from './useSubscribe';\n\n/**\n * Custom hook to mange the entire form.\n *\n * @remarks\n * [API](https://react-hook-form.com/api/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)\n *\n * @param props - form configuration and validation parameters.\n *\n * @returns methods - individual functions to manage the form state. {@link UseFormReturn}\n *\n * @example\n * ```tsx\n * function App() {\n * const { register, handleSubmit, watch, formState: { errors } } = useForm();\n * const onSubmit = data => console.log(data);\n *\n * console.log(watch(\"example\"));\n *\n * return (\n * \n * );\n * }\n * ```\n */\nexport function useForm<\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object,\n>(\n props: UseFormProps\n \n \n
\n How can we help?
\n \n {/* Form Section */}\n
\n \n \n
\n {/* Blue box Section */}\n \n
\n \n
\n \n Risk free 30-day trial\n
\n \n We’ll send you a module and you can try it out for 30 days. If\n it’s not for you, send it back. Keep it and we’ll charge your\n card and start your subscription*\n
\n \n *Terms and conditions apply\n
\n {/* \n \n
*/}\n \n
\n \n 
\n
\n \n 15425 N. Freeway, Suite 350\n Houston, TX 77090\n
\n\n
\n \n - \n
- \n
Technical support
\n info@rulotech.com\n \n - \n
Sales
\n sales@rulotech.com\n \n - \n
Or call us
\n +1 (281) 949-8989\n \n
\n {/* Banner section for mobile */}\n \n \n {/* Main section for the background */}\n \n {/* For giving the top and bottom padding */}\n \n )}\n {/* Terms of Use/Terms and Conditions section */}\n {links[1].is_active && (\n \n
\n \n )}\n {/* Hardware warranty section */}\n {links[2].is_active && (\n \n
\n \n {/* Section for showing date on banner */}\n
\n \n \n {links.map((link: any, index: number) => {\n return link.is_active ? (\n \n ) : (\n \"\"\n );\n })}\n
\n\n {/* Section for showing the selected link name on banner */}\n \n {links.map((link: any, index: number) => {\n return link.is_active ? (\n \n ) : (\n \"\"\n );\n })}\n
\n \n {/* Left tabs section */}\n
\n {/* Right contents section */}\n \n
\n \n
\n \n \n \n
\n \n {links.map((link: any, index: number) => {\n return (\n {\n changeLink(index);\n }}\n >\n
\n );\n })}\n \n {link.name}\n
\n \n {/* Privacy policy section */}\n {links[0].is_active && (\n \n
\n \n
\n Privacy Policy
\n {links[0].updated_date}
\n \n
\n Terms and Conditions
\n {links[1].updated_date}
\n \n
\n Hardware Warranty
\n {links[2].updated_date}
\n \n
\n \n
\n \n
\n \n \n\n \n
\n \n \n
\n \n
\n \n );\n};\n\nexport default Blogpost;\n","var _path, _path2;\n\nvar _excluded = [\"title\", \"titleId\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport * as React from \"react\";\n\nfunction SvgCheckCircle(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 50,\n height: 50,\n viewBox: \"0 0 50 50\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M45.8337 23.0834V25C45.8311 29.4926 44.3764 33.8639 41.6864 37.4622C38.9965 41.0604 35.2155 43.6927 30.9073 44.9665C26.5991 46.2403 21.9946 46.0873 17.7805 44.5304C13.5663 42.9735 9.96836 40.0961 7.52316 36.3273C5.07796 32.5584 3.91656 28.1002 4.21215 23.6174C4.50775 19.1346 6.24451 14.8674 9.16341 11.4523C12.0823 8.03717 16.027 5.65709 20.4091 4.66701C24.7911 3.67694 29.3759 4.12991 33.4795 5.95838\",\n stroke: \"#00D160\",\n strokeWidth: 3,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M45.8333 8.3335L25 29.1877L18.75 22.9377\",\n stroke: \"#00D160\",\n strokeWidth: 3,\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n })));\n}\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgCheckCircle);\nexport default __webpack_public_path__ + \"static/media/check-circle.28bf005b16fce94c6ed865ad647cbc2f.svg\";\nexport { ForwardRef as ReactComponent };","import React from \"react\";\n\nconst FormStep = ({ step, totalStep }: { step: number; totalStep: number }) => {\n return (\n \n
\n \n
\n \n {blogData.sub_heading}\n
\n {/* {\n (blogData.content as any[]).map((item:any,index:any)=>{\n return(\n {item}
\n )\n })\n } */}\n \n \n 
\n
\n \n - \n {Array.from({ length: totalStep }, (_, i) => i + 1).map(\n (stepVal: number) => (\n
- \n \n {stepVal !== totalStep ? stepVal : \"\"}\n \n \n )\n )}\n
\r\n\t\t\t
\r\n\t)\r\n}\r\n\r\nCountrySelectWithIcon.propTypes = {\r\n\t// Country flag component.\r\n\ticonComponent: PropTypes.elementType,\r\n\r\n\t// Select arrow component.\r\n\tarrowComponent: PropTypes.elementType,\r\n\r\n\t// Set to `true` to render Unicode flag icons instead of SVG images.\r\n\tunicodeFlags: PropTypes.bool\r\n}\r\n\r\nfunction DefaultArrowComponent() {\r\n\treturn \r\n\t\t\t\t\t{getUnicodeFlagIcon(value)}\r\n\t\t\t\t
\r\n\t\t\t}\r\n\r\n\t\t\t{/* Or an SVG flag icon. */}\r\n\t\t\t{!(unicodeFlags && value) &&\r\n\t\t\t\t\r\n}\r\n\r\nfunction getSelectedOption(options, value) {\r\n\tfor (const option of options) {\r\n\t\tif (!option.divider && option.value === value) {\r\n\t\t\treturn option\r\n\t\t}\r\n\t}\r\n}","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport classNames from 'classnames'\r\n\r\n// Default country flag icon.\r\n// `![]()
` is wrapped in a `` to prevent SVGs from exploding in size in IE 11.\r\n// https://github.com/catamphetamine/react-phone-number-input/issues/111\r\nexport default function FlagComponent({\r\n\tcountry,\r\n\tcountryName,\r\n\tflags,\r\n\tflagUrl,\r\n\t...rest\r\n}) {\r\n\tif (flags && flags[country]) {\r\n\t\treturn flags[country]({ title: countryName })\r\n\t}\r\n\treturn (\r\n\t\t![]()
`.\r\n\tcountryName: PropTypes.string.isRequired,\r\n\r\n\t// Country flag icon components.\r\n\t// By default flag icons are inserted as `![]()
`s\r\n\t// with their `src` pointed to `country-flag-icons` gitlab pages website.\r\n\t// There might be cases (e.g. an offline application)\r\n\t// where having a large (3 megabyte) `` flags\r\n\t// bundle is more appropriate.\r\n\t// `import flags from 'react-phone-number-input/flags'`.\r\n\tflags: PropTypes.objectOf(PropTypes.elementType),\r\n\r\n\t// A URL for a country flag icon.\r\n\t// By default it points to `country-flag-icons` gitlab pages website.\r\n\tflagUrl: PropTypes.string.isRequired\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nexport default function InternationalIcon({ aspectRatio, ...rest }) {\r\n\tif (aspectRatio === 1) {\r\n\t\treturn \r\n\t\t\t{title} \r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t{title} \r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tcountry\r\n\t\t\t\t\t?\r\n\t\t\t\t\t
\r\n\t\t)\r\n\t}\r\n\r\n\tCountryIcon.propTypes = {\r\n\t\tcountry: PropTypes.string,\r\n\t\tlabel: PropTypes.string.isRequired,\r\n\t\taspectRatio: PropTypes.number\r\n\t}\r\n\r\n\treturn CountryIcon\r\n}\r\n\r\nexport default createCountryIconComponent({\r\n\t// Must be equal to `defaultProps.flagUrl` in `./PhoneInputWithCountry.js`.\r\n\tflagUrl: 'https://purecatamphetamine.github.io/country-flag-icons/3x2/{XX}.svg',\r\n\tflagComponent: Flag,\r\n\tinternationalIcon: DefaultInternationalIcon\r\n})","import {\r\n\tgetCountryCallingCode,\r\n\tMetadata\r\n} from 'libphonenumber-js/core'\r\n\r\nconst ONLY_DIGITS_REGEXP = /^\\d+$/\r\n\r\nexport default function getInternationalPhoneNumberPrefix(country, metadata) {\r\n\t// Standard international phone number prefix: \"+\" and \"country calling code\".\r\n\tlet prefix = '+' + getCountryCallingCode(country, metadata)\r\n\r\n\t// \"Leading digits\" can't be used to rule out any countries.\r\n\t// So the \"pre-fill with leading digits on country selection\" feature had to be reverted.\r\n\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/10#note_1231042367\r\n\t// // Get \"leading digits\" for a phone number of the country.\r\n\t// // If there're \"leading digits\" then they can be part of the prefix too.\r\n\t// // https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/10\r\n\t// metadata = new Metadata(metadata)\r\n\t// metadata.selectNumberingPlan(country)\r\n\t// // \"Leading digits\" patterns are only defined for about 20% of all countries.\r\n\t// // By definition, matching \"leading digits\" is a sufficient but not a necessary\r\n\t// // condition for a phone number to belong to a country.\r\n\t// // The point of \"leading digits\" check is that it's the fastest one to get a match.\r\n\t// // https://gitlab.com/catamphetamine/libphonenumber-js/blob/master/METADATA.md#leading_digits\r\n\t// const leadingDigits = metadata.numberingPlan.leadingDigits()\r\n\t// if (leadingDigits && ONLY_DIGITS_REGEXP.test(leadingDigits)) {\r\n\t// \tprefix += leadingDigits\r\n\t// }\r\n\r\n\treturn prefix\r\n}","import parsePhoneNumber_, {\r\n\tgetCountryCallingCode,\r\n\tAsYouType,\r\n\tMetadata\r\n} from 'libphonenumber-js/core'\r\n\r\nimport getInternationalPhoneNumberPrefix from './getInternationalPhoneNumberPrefix.js'\r\n\r\n/**\r\n * Decides which country should be pre-selected\r\n * when the phone number input component is first mounted.\r\n * @param {object?} phoneNumber - An instance of `PhoneNumber` class.\r\n * @param {string?} country - Pre-defined country (two-letter code).\r\n * @param {string[]?} countries - A list of countries available.\r\n * @param {object} metadata - `libphonenumber-js` metadata\r\n * @return {string?}\r\n */\r\nexport function getPreSelectedCountry({\r\n\tvalue,\r\n\tphoneNumber,\r\n\tdefaultCountry,\r\n\tgetAnyCountry,\r\n\tcountries,\r\n\trequired,\r\n\tmetadata\r\n}) {\r\n\tlet country\r\n\r\n\t// If can get country from E.164 phone number\r\n\t// then it overrides the `country` passed (or not passed).\r\n\tif (phoneNumber && phoneNumber.country) {\r\n\t\t// `country` will be left `undefined` in case of non-detection.\r\n\t\tcountry = phoneNumber.country\r\n\t} else if (defaultCountry) {\r\n\t\tif (!value || couldNumberBelongToCountry(value, defaultCountry, metadata)) {\r\n\t\t\tcountry = defaultCountry\r\n\t\t}\r\n\t}\r\n\r\n\t// Only pre-select a country if it's in the available `countries` list.\r\n\tif (countries && countries.indexOf(country) < 0) {\r\n\t\tcountry = undefined\r\n\t}\r\n\r\n\t// If there will be no \"International\" option\r\n\t// then some `country` must be selected.\r\n\t// It will still be the wrong country though.\r\n\t// But still country `` can't be left in a broken state.\r\n\tif (!country && required && countries && countries.length > 0) {\r\n\t\tcountry = getAnyCountry()\r\n\t\t// noCountryMatchesTheNumber = true\r\n\t}\r\n\r\n\treturn country\r\n}\r\n\r\n/**\r\n * Generates a sorted list of country `` options.\r\n * @param {string[]} countries - A list of two-letter (\"ISO 3166-1 alpha-2\") country codes.\r\n * @param {object} labels - Custom country labels. E.g. `{ RU: 'Россия', US: 'США', ... }`.\r\n * @param {boolean} addInternationalOption - Whether should include \"International\" option at the top of the list.\r\n * @return {object[]} A list of objects having shape `{ value : string, label : string }`.\r\n */\r\nexport function getCountrySelectOptions({\r\n\tcountries,\r\n\tcountryNames,\r\n\taddInternationalOption,\r\n\t// `locales` are only used in country name comparator:\r\n\t// depending on locale, string sorting order could be different.\r\n\tcompareStringsLocales,\r\n\tcompareStrings: _compareStrings\r\n}) {\r\n\t// Default country name comparator uses `String.localeCompare()`.\r\n\tif (!_compareStrings) {\r\n\t\t_compareStrings = compareStrings\r\n\t}\r\n\r\n\t// Generates a `` option for each country.\r\n\tconst countrySelectOptions = countries.map((country) => ({\r\n\t\tvalue: country,\r\n\t\t// All `locale` country names included in this library\r\n\t\t// include all countries (this is checked at build time).\r\n\t\t// The only case when a country name might be missing\r\n\t\t// is when a developer supplies their own `labels` property.\r\n\t\t// To guard against such cases, a missing country name\r\n\t\t// is substituted by country code.\r\n\t\tlabel: countryNames[country] || country\r\n\t}))\r\n\r\n\t// Sort the list of countries alphabetically.\r\n\tcountrySelectOptions.sort((a, b) => _compareStrings(a.label, b.label, compareStringsLocales))\r\n\r\n\t// Add the \"International\" option to the country list (if suitable)\r\n\tif (addInternationalOption) {\r\n\t\tcountrySelectOptions.unshift({\r\n\t\t\tlabel: countryNames.ZZ\r\n\t\t})\r\n\t}\r\n\r\n\treturn countrySelectOptions\r\n}\r\n\r\n/**\r\n * Parses a E.164 phone number to an instance of `PhoneNumber` class.\r\n * @param {string?} value = E.164 phone number.\r\n * @param {object} metadata - `libphonenumber-js` metadata\r\n * @return {object} Object having shape `{ country: string?, countryCallingCode: string, number: string }`. `PhoneNumber`: https://gitlab.com/catamphetamine/libphonenumber-js#phonenumber.\r\n * @example\r\n * parsePhoneNumber('+78005553535')\r\n */\r\nexport function parsePhoneNumber(value, metadata) {\r\n\treturn parsePhoneNumber_(value || '', metadata)\r\n}\r\n\r\n/**\r\n * Generates national number digits for a parsed phone.\r\n * May prepend national prefix.\r\n * The phone number must be a complete and valid phone number.\r\n * @param {object} phoneNumber - An instance of `PhoneNumber` class.\r\n * @param {object} metadata - `libphonenumber-js` metadata\r\n * @return {string}\r\n * @example\r\n * getNationalNumberDigits({ country: 'RU', phone: '8005553535' })\r\n * // returns '88005553535'\r\n */\r\nexport function generateNationalNumberDigits(phoneNumber) {\r\n\treturn phoneNumber.formatNational().replace(/\\D/g, '')\r\n}\r\n\r\n/**\r\n * Migrates parsed `` `value` for the newly selected `country`.\r\n * @param {string?} phoneDigits - Phone number digits (and `+`) parsed from phone number `` (it's not the same as the `value` property).\r\n * @param {string?} prevCountry - Previously selected country.\r\n * @param {string?} newCountry - Newly selected country. Can't be same as previously selected country.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @param {boolean} useNationalFormat - whether should attempt to convert from international to national number for the new country.\r\n * @return {string?}\r\n */\r\nexport function getPhoneDigitsForNewCountry(phoneDigits, {\r\n\tprevCountry,\r\n\tnewCountry,\r\n\tmetadata,\r\n\tuseNationalFormat\r\n}) {\r\n\tif (prevCountry === newCountry) {\r\n\t\treturn phoneDigits\r\n\t}\r\n\r\n\t// If `parsed_input` is empty\r\n\t// then no need to migrate anything.\r\n\tif (!phoneDigits) {\r\n\t\tif (useNationalFormat) {\r\n\t\t\treturn ''\r\n\t\t} else {\r\n\t\t\tif (newCountry) {\r\n\t\t\t\t// If `phoneDigits` is empty then set `phoneDigits` to\r\n\t\t\t\t// `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\t\treturn getInternationalPhoneNumberPrefix(newCountry, metadata)\r\n\t\t\t}\r\n\t\t\treturn ''\r\n\t\t}\r\n\t}\r\n\r\n\t// If switching to some country.\r\n\t// (from \"International\" or another country)\r\n\t// If switching from \"International\" then `phoneDigits` starts with a `+`.\r\n\t// Otherwise it may or may not start with a `+`.\r\n\tif (newCountry) {\r\n\t\t// If the phone number was entered in international format\r\n\t\t// then migrate it to the newly selected country.\r\n\t\t// The phone number may be incomplete.\r\n\t\t// The phone number entered not necessarily starts with\r\n\t\t// the previously selected country phone prefix.\r\n\t\tif (phoneDigits[0] === '+') {\r\n\t\t\t// If the international phone number is for the new country\r\n\t\t\t// then convert it to local if required.\r\n\t\t\tif (useNationalFormat) {\r\n\t\t\t\t// // If a phone number is being input in international form\r\n\t\t\t\t// // and the country can already be derived from it,\r\n\t\t\t\t// // and if it is the new country, then format as a national number.\r\n\t\t\t\t// const derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(phoneDigits, metadata)\r\n\t\t\t\t// if (derived_country === newCountry) {\r\n\t\t\t\t// \treturn stripCountryCallingCode(phoneDigits, derived_country, metadata)\r\n\t\t\t\t// }\r\n\r\n\t\t\t\t// Actually, the two countries don't necessarily need to match:\r\n\t\t\t\t// the condition could be looser here, because several countries\r\n\t\t\t\t// might share the same international phone number format\r\n\t\t\t\t// (for example, \"NANPA\" countries like US, Canada, etc).\r\n\t\t\t\t// The looser condition would be just \"same nternational phone number format\"\r\n\t\t\t\t// which would mean \"same country calling code\" in the context of `libphonenumber-js`.\r\n\t\t\t\tif (phoneDigits.indexOf('+' + getCountryCallingCode(newCountry, metadata)) === 0) {\r\n\t\t\t\t\treturn stripCountryCallingCode(phoneDigits, newCountry, metadata)\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Simply discard the previously entered international phone number,\r\n\t\t\t\t// because otherwise any \"smart\" transformation like getting the\r\n\t\t\t\t// \"national (significant) number\" part and then prepending the\r\n\t\t\t\t// newly selected country's \"country calling code\" to it\r\n\t\t\t\t// would just be confusing for a user without being actually useful.\r\n\t\t\t\treturn ''\r\n\r\n\t\t\t\t// // Simply strip the leading `+` character\r\n\t\t\t\t// // therefore simply converting all digits into a \"local\" phone number.\r\n\t\t\t\t// // https://github.com/catamphetamine/react-phone-number-input/issues/287\r\n\t\t\t\t// return phoneDigits.slice(1)\r\n\t\t\t}\r\n\r\n\t\t\tif (prevCountry) {\r\n\t\t\t\tconst newCountryPrefix = getInternationalPhoneNumberPrefix(newCountry, metadata)\r\n\t\t\t\tif (phoneDigits.indexOf(newCountryPrefix) === 0) {\r\n\t\t\t\t\treturn phoneDigits\r\n\t\t\t\t} else {\r\n\t\t\t\t\treturn newCountryPrefix\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tconst defaultValue = getInternationalPhoneNumberPrefix(newCountry, metadata)\r\n\t\t\t\t// If `phoneDigits`'s country calling code part is the same\r\n\t\t\t\t// as for the new `country`, then leave `phoneDigits` as is.\r\n\t\t\t\tif (phoneDigits.indexOf(defaultValue) === 0) {\r\n\t\t\t\t\treturn phoneDigits\r\n\t\t\t\t}\r\n\t\t\t\t// If `phoneDigits`'s country calling code part is not the same\r\n\t\t\t\t// as for the new `country`, then set `phoneDigits` to\r\n\t\t\t\t// `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\t\treturn defaultValue\r\n\t\t\t}\r\n\r\n\t\t\t// // If the international phone number already contains\r\n\t\t\t// // any country calling code then trim the country calling code part.\r\n\t\t\t// // (that could also be the newly selected country phone code prefix as well)\r\n\t\t\t// // `phoneDigits` doesn't neccessarily belong to `prevCountry`.\r\n\t\t\t// // (e.g. if a user enters an international number\r\n\t\t\t// // not belonging to any of the reduced `countries` list).\r\n\t\t\t// phoneDigits = stripCountryCallingCode(phoneDigits, prevCountry, metadata)\r\n\r\n\t\t\t// // Prepend country calling code prefix\r\n\t\t\t// // for the newly selected country.\r\n\t\t\t// return e164(phoneDigits, newCountry, metadata) || `+${getCountryCallingCode(newCountry, metadata)}`\r\n\t\t}\r\n\t}\r\n\t// If switching to \"International\" from a country.\r\n\telse {\r\n\t\t// If the phone number was entered in national format.\r\n\t\tif (phoneDigits[0] !== '+') {\r\n\t\t\t// Format the national phone number as an international one.\r\n\t\t\t// The phone number entered not necessarily even starts with\r\n\t\t\t// the previously selected country phone prefix.\r\n\t\t\t// Even if the phone number belongs to whole another country\r\n\t\t\t// it will still be parsed into some national phone number.\r\n\t\t\t//\r\n\t\t\t// Ignore the now-uncovered `|| ''` code branch:\r\n\t\t\t// previously `e164()` function could return an empty string\r\n\t\t\t// even when `phoneDigits` were not empty.\r\n\t\t\t// Now it always returns some `value` when there're any `phoneDigits`.\r\n\t\t\t// Still, didn't remove the `|| ''` code branch just in case\r\n\t\t\t// that logic changes somehow in some future, so there're no\r\n\t\t\t// possible bugs related to that.\r\n\t\t\t//\r\n\t\t\t// (ignore the `|| ''` code branch)\r\n\t\t\t/* istanbul ignore next */\r\n\t\t\treturn e164(phoneDigits, prevCountry, metadata) || ''\r\n\t\t}\r\n\t}\r\n\r\n\treturn phoneDigits\r\n}\r\n\r\n/**\r\n * Converts phone number digits to a (possibly incomplete) E.164 phone number.\r\n * @param {string?} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.\r\n * @param {string?} country\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function e164(number, country, metadata) {\r\n\tif (!number) {\r\n\t\treturn\r\n\t}\r\n\t// If the phone number is being input in international format.\r\n\tif (number[0] === '+') {\r\n\t\t// If it's just the `+` sign then return nothing.\r\n\t\tif (number === '+') {\r\n\t\t\treturn\r\n\t\t}\r\n\t\t// Return a E.164 phone number.\r\n\t\t//\r\n\t\t// Could return `number` \"as is\" here, but there's a possibility\r\n\t\t// that some user might incorrectly input an international number\r\n\t\t// with a \"national prefix\". Such numbers aren't considered valid,\r\n\t\t// but `libphonenumber-js` is \"forgiving\" when it comes to parsing\r\n\t\t// user's input, and this input component follows that behavior.\r\n\t\t//\r\n\t\tconst asYouType = new AsYouType(country, metadata)\r\n\t\tasYouType.input(number)\r\n\t\t// This function would return `undefined` only when `number` is `\"+\"`,\r\n\t\t// but at this point it is known that `number` is not `\"+\"`.\r\n\t\treturn asYouType.getNumberValue()\r\n\t}\r\n\t// For non-international phone numbers\r\n\t// an accompanying country code is required.\r\n\t// The situation when `country` is `undefined`\r\n\t// and a non-international phone number is passed\r\n\t// to this function shouldn't happen.\r\n\tif (!country) {\r\n\t\treturn\r\n\t}\r\n\tconst partial_national_significant_number = getNationalSignificantNumberDigits(number, country, metadata)\r\n\t//\r\n\t// Even if no \"national (significant) number\" digits have been input,\r\n\t// still return a non-`undefined` value.\r\n\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/113\r\n\t//\r\n\t// For example, if the user has selected country `US` and entered `\"1\"`\r\n\t// then that `\"1\"` is just a \"national prefix\" and no \"national (significant) number\"\r\n\t// digits have been input yet. Still, return `\"+1\"` as `value` in such cases,\r\n\t// because otherwise the app would think that the input is empty and mark it as such\r\n\t// while in reality it isn't empty, which might be thought of as a \"bug\", or just\r\n\t// a \"weird\" behavior.\r\n\t//\r\n\t// if (partial_national_significant_number) {\r\n\t\treturn `+${getCountryCallingCode(country, metadata)}${partial_national_significant_number || ''}`\r\n\t// }\r\n}\r\n\r\n/**\r\n * Trims phone number digits if they exceed the maximum possible length\r\n * for a national (significant) number for the country.\r\n * @param {string} number - A possibly incomplete phone number digits string. Can be a possibly incomplete E.164 phone number.\r\n * @param {string} country\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string} Can be empty.\r\n */\r\nexport function trimNumber(number, country, metadata) {\r\n\tconst nationalSignificantNumberPart = getNationalSignificantNumberDigits(number, country, metadata)\r\n\tif (nationalSignificantNumberPart) {\r\n\t\tconst overflowDigitsCount = nationalSignificantNumberPart.length - getMaxNumberLength(country, metadata)\r\n\t\tif (overflowDigitsCount > 0) {\r\n\t\t\treturn number.slice(0, number.length - overflowDigitsCount)\r\n\t\t}\r\n\t}\r\n\treturn number\r\n}\r\n\r\nfunction getMaxNumberLength(country, metadata) {\r\n\t// Get \"possible lengths\" for a phone number of the country.\r\n\tmetadata = new Metadata(metadata)\r\n\tmetadata.selectNumberingPlan(country)\r\n\t// Return the last \"possible length\".\r\n\treturn metadata.numberingPlan.possibleLengths()[metadata.numberingPlan.possibleLengths().length - 1]\r\n}\r\n\r\n// If the phone number being input is an international one\r\n// then tries to derive the country from the phone number.\r\n// (regardless of whether there's any country currently selected)\r\n/**\r\n * @param {string} partialE164Number - A possibly incomplete E.164 phone number.\r\n * @param {string?} country - Currently selected country.\r\n * @param {string[]?} countries - A list of available countries. If not passed then \"all countries\" are assumed.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function getCountryForPartialE164Number(partialE164Number, {\r\n\tcountry,\r\n\tcountries,\r\n\trequired,\r\n\tmetadata\r\n}) {\r\n\tif (partialE164Number === '+') {\r\n\t\t// Don't change the currently selected country yet.\r\n\t\treturn country\r\n\t}\r\n\r\n\tconst derived_country = getCountryFromPossiblyIncompleteInternationalPhoneNumber(partialE164Number, metadata)\r\n\r\n\t// If a phone number is being input in international form\r\n\t// and the country can already be derived from it,\r\n\t// then select that country.\r\n\tif (derived_country && (!countries || (countries.indexOf(derived_country) >= 0))) {\r\n\t\treturn derived_country\r\n\t}\r\n\t// If \"International\" country option has not been disabled\r\n\t// and the international phone number entered doesn't correspond\r\n\t// to the currently selected country then reset the currently selected country.\r\n\telse if (country &&\r\n\t\t!required &&\r\n\t\t!couldNumberBelongToCountry(partialE164Number, country, metadata)) {\r\n\t\treturn undefined\r\n\t}\r\n\r\n\t// Don't change the currently selected country.\r\n\treturn country\r\n}\r\n\r\n/**\r\n * Parses `` value. Derives `country` from `input`. Derives an E.164 `value`.\r\n * @param {string?} phoneDigits — Parsed `` value. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\r\n * @param {string?} prevPhoneDigits — Previous parsed `` value. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\r\n * @param {string?} country - Currently selected country.\r\n * @param {boolean} countryRequired - Is selecting some country required.\r\n * @param {function} getAnyCountry - Can be used to get any country when selecting some country required.\r\n * @param {string[]?} countries - A list of available countries. If not passed then \"all countries\" are assumed.\r\n * @param {boolean} international - Set to `true` to force international phone number format (leading `+`). Set to `false` to force \"national\" phone number format. Is `undefined` by default.\r\n * @param {boolean} limitMaxLength — Whether to enable limiting phone number max length.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {object} An object of shape `{ phoneDigits, country, value }`. `phoneDigits` returned here are a \"normalized\" version of the original `phoneDigits`. The returned `phoneDigits` shouldn't be used anywhere except for passing it as `prevPhoneDigits` parameter to this same function on next input change event.\r\n */\r\nexport function onPhoneDigitsChange(phoneDigits, {\r\n\tprevPhoneDigits,\r\n\tcountry,\r\n\tdefaultCountry,\r\n\tcountryRequired,\r\n\tgetAnyCountry,\r\n\tcountries,\r\n\tinternational,\r\n\tlimitMaxLength,\r\n\tcountryCallingCodeEditable,\r\n\tmetadata\r\n}) {\r\n\tif (international && countryCallingCodeEditable === false) {\r\n\t\tif (country) {\r\n\t\t\t// For international phone numbers written with non-editable country calling code,\r\n\t\t\t// the `` value must always start with that non-editable country calling code.\r\n\t\t\tconst prefix = getInternationalPhoneNumberPrefix(country, metadata)\r\n\t\t\t// If the input value doesn't start with the non-editable country calling code,\r\n\t\t\t// it should be fixed.\r\n\t\t\tif (phoneDigits.indexOf(prefix) !== 0) {\r\n\t\t\t\tlet value\r\n\t\t\t\t// If a phone number input is declared as\r\n\t\t\t\t// `international: true` and `countryCallingCodeEditable: false`,\r\n\t\t\t\t// then the value of the `` is gonna be non-empty at all times,\r\n\t\t\t\t// even before the user has started to input any digits in the input field,\r\n\t\t\t\t// because the country calling code is always there by design.\r\n\t\t\t\t//\r\n\t\t\t\t// The fact that the input value is always non-empty results in a side effect:\r\n\t\t\t\t// whenever a user tabs into such input field, its value gets automatically selected.\r\n\t\t\t\t// If at that moment in time the user starts typing in the national digits of the phone number,\r\n\t\t\t\t// the selected `` value gets automatically replaced by those typed-in digits\r\n\t\t\t\t// so the value changes from `+xxx` to `y`, because inputting anything while having\r\n\t\t\t\t// the `` value selected results in erasing that `` value.\r\n\t\t\t\t//\r\n\t\t\t\t// This component handles such cases by restoring the `` value to what\r\n\t\t\t\t// it should be in such cases: `+xxxy`.\r\n\t\t\t\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/43\r\n\t\t\t\t//\r\n\t\t\t\tconst hasStartedTypingInNationalNumberDigitsHavingInputValueSelected = phoneDigits && phoneDigits[0] !== '+'\r\n\t\t\t\tif (hasStartedTypingInNationalNumberDigitsHavingInputValueSelected) {\r\n\t\t\t\t\t// Fix the input value to what it should be: `y` → `+xxxy`.\r\n\t\t\t\t\tphoneDigits = prefix + phoneDigits\r\n\t\t\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t\t\t} else {\r\n\t\t\t\t\t// In other cases, simply reset the `` value, because there're only two\r\n\t\t\t\t\t// possible cases:\r\n\t\t\t\t\t// * The user has selected the `` value and then hit Delete/Backspace to erase it.\r\n\t\t\t\t\t// * The user has pasted an international phone number for another country calling code,\r\n\t\t\t\t\t// which is considered a non-valid value.\r\n\t\t\t\t\tphoneDigits = prefix\r\n\t\t\t\t}\r\n\t\t\t\treturn {\r\n\t\t\t\t\tphoneDigits,\r\n\t\t\t\t\tvalue,\r\n\t\t\t\t\tcountry\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// If `international` property is `false`, then it means\r\n\t// \"enforce national-only format during input\",\r\n\t// so, if that's the case, then remove all `+` characters,\r\n\t// but only if some country is currently selected.\r\n\t// (not if \"International\" country is selected).\r\n\tif (international === false && country && phoneDigits && phoneDigits[0] === '+') {\r\n\t\tphoneDigits = convertInternationalPhoneDigitsToNational(phoneDigits, country, metadata)\r\n\t}\r\n\r\n\t// Trim the input to not exceed the maximum possible number length.\r\n\tif (phoneDigits && country && limitMaxLength) {\r\n\t\tphoneDigits = trimNumber(phoneDigits, country, metadata)\r\n\t}\r\n\r\n\t// If this `onChange()` event was triggered\r\n\t// as a result of selecting \"International\" country,\r\n\t// then force-prepend a `+` sign if the phone number\r\n\t// `` value isn't in international format.\r\n\t// Also, force-prepend a `+` sign if international\r\n\t// phone number input format is set.\r\n\tif (phoneDigits && phoneDigits[0] !== '+' && (!country || international)) {\r\n\t\tphoneDigits = '+' + phoneDigits\r\n\t}\r\n\r\n\t// If the previously entered phone number\r\n\t// has been entered in international format\r\n\t// and the user decides to erase it,\r\n\t// then also reset the `country`\r\n\t// because it was most likely automatically selected\r\n\t// while the user was typing in the phone number\r\n\t// in international format.\r\n\t// This fixes the issue when a user is presented\r\n\t// with a phone number input with no country selected\r\n\t// and then types in their local phone number\r\n\t// then discovers that the input's messed up\r\n\t// (a `+` has been prepended at the start of their input\r\n\t// and a random country has been selected),\r\n\t// decides to undo it all by erasing everything\r\n\t// and then types in their local phone number again\r\n\t// resulting in a seemingly correct phone number\r\n\t// but in reality that phone number has incorrect country.\r\n\t// https://github.com/catamphetamine/react-phone-number-input/issues/273\r\n\tif (!phoneDigits && prevPhoneDigits && prevPhoneDigits[0] === '+') {\r\n\t\tif (international) {\r\n\t\t\tcountry = undefined\r\n\t\t} else {\r\n\t\t\tcountry = defaultCountry\r\n\t\t}\r\n\t}\r\n\t// Also resets such \"randomly\" selected country\r\n\t// as soon as the user erases the number\r\n\t// digit-by-digit up to the leading `+` sign.\r\n\tif (phoneDigits === '+' && prevPhoneDigits && prevPhoneDigits[0] === '+' && prevPhoneDigits.length > '+'.length) {\r\n\t\tcountry = undefined\r\n\t}\r\n\r\n\t// Generate the new `value` property.\r\n\tlet value\r\n\tif (phoneDigits) {\r\n\t\tif (phoneDigits[0] === '+') {\r\n\t\t\tif (phoneDigits === '+') {\r\n\t\t\t\tvalue = undefined\r\n\t\t\t} else if (country && getInternationalPhoneNumberPrefix(country, metadata).indexOf(phoneDigits) === 0) {\r\n\t\t\t\t// Selected a `country` and started inputting an\r\n\t\t\t\t// international phone number for this country\r\n\t\t\t\t// but hasn't input any \"national (significant) number\" digits yet.\r\n\t\t\t\t// In that case, assume `value` be `undefined`.\r\n\t\t\t\t//\r\n\t\t\t\t// For example, if selected `country` `\"US\"`\r\n\t\t\t\t// and started inputting phone number `\"+1\"`\r\n\t\t\t\t// then `value` `undefined` will be returned from this function.\r\n\t\t\t\t//\r\n\t\t\t\tvalue = undefined\r\n\t\t\t} else {\r\n\t\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t}\r\n\t}\r\n\r\n\t// Derive the country from the phone number.\r\n\t// (regardless of whether there's any country currently selected,\r\n\t// because there could be several countries corresponding to one country calling code)\r\n\tif (value) {\r\n\t\tcountry = getCountryForPartialE164Number(value, {\r\n\t\t\tcountry,\r\n\t\t\tcountries,\r\n\t\t\tmetadata\r\n\t\t})\r\n\t\t// If `international` property is `false`, then it means\r\n\t\t// \"enforce national-only format during input\",\r\n\t\t// so, if that's the case, then remove all `+` characters,\r\n\t\t// but only if some country is currently selected.\r\n\t\t// (not if \"International\" country is selected).\r\n\t\tif (international === false && country && phoneDigits && phoneDigits[0] === '+') {\r\n\t\t\tphoneDigits = convertInternationalPhoneDigitsToNational(phoneDigits, country, metadata)\r\n\t\t\t// Re-calculate `value` because `phoneDigits` has changed.\r\n\t\t\tvalue = e164(phoneDigits, country, metadata)\r\n\t\t}\r\n\t}\r\n\r\n\tif (!country && countryRequired) {\r\n\t\tcountry = defaultCountry || getAnyCountry()\r\n\t}\r\n\r\n\treturn {\r\n\t\t// `phoneDigits` returned here are a \"normalized\" version of the original `phoneDigits`.\r\n\t\t// The returned `phoneDigits` shouldn't be used anywhere except for passing it as\r\n\t\t// `prevPhoneDigits` parameter to this same function on next input change event.\r\n\t\tphoneDigits,\r\n\t\tcountry,\r\n\t\tvalue\r\n\t}\r\n}\r\n\r\nfunction convertInternationalPhoneDigitsToNational(input, country, metadata) {\r\n\t// Handle the case when a user might have pasted\r\n\t// a phone number in international format.\r\n\tif (input.indexOf(getInternationalPhoneNumberPrefix(country, metadata)) === 0) {\r\n\t\t// Create \"as you type\" formatter.\r\n\t\tconst formatter = new AsYouType(country, metadata)\r\n\t\t// Input partial national phone number.\r\n\t\tformatter.input(input)\r\n\t\t// Return the parsed partial national phone number.\r\n\t\tconst phoneNumber = formatter.getNumber()\r\n\t\tif (phoneNumber) {\r\n\t\t\t// Transform the number to a national one,\r\n\t\t\t// and remove all non-digits.\r\n\t\t\treturn phoneNumber.formatNational().replace(/\\D/g, '')\r\n\t\t} else {\r\n\t\t\treturn ''\r\n\t\t}\r\n\t} else {\r\n\t\t// Just remove the `+` sign.\r\n\t\treturn input.replace(/\\D/g, '')\r\n\t}\r\n}\r\n\r\n/**\r\n * Determines the country for a given (possibly incomplete) E.164 phone number.\r\n * @param {string} number - A possibly incomplete E.164 phone number.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string?}\r\n */\r\nexport function getCountryFromPossiblyIncompleteInternationalPhoneNumber(number, metadata) {\r\n\tconst formatter = new AsYouType(null, metadata)\r\n\tformatter.input(number)\r\n\t// // `001` is a special \"non-geograpical entity\" code\r\n\t// // in Google's `libphonenumber` library.\r\n\t// if (formatter.getCountry() === '001') {\r\n\t// \treturn\r\n\t// }\r\n\treturn formatter.getCountry()\r\n}\r\n\r\n/**\r\n * Compares two strings.\r\n * A helper for `Array.sort()`.\r\n * @param {string} a — First string.\r\n * @param {string} b — Second string.\r\n * @param {(string[]|string)} [locales] — The `locales` argument of `String.localeCompare`.\r\n */\r\nexport function compareStrings(a, b, locales) {\r\n // Use `String.localeCompare` if it's available.\r\n // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare\r\n // Which means everyone except IE <= 10 and Safari <= 10.\r\n // `localeCompare()` is available in latest Node.js versions.\r\n /* istanbul ignore else */\r\n if (String.prototype.localeCompare) {\r\n return a.localeCompare(b, locales);\r\n }\r\n /* istanbul ignore next */\r\n return a < b ? -1 : (a > b ? 1 : 0);\r\n}\r\n\r\n/**\r\n * Strips `+${countryCallingCode}` prefix from an E.164 phone number.\r\n * @param {string} number - (possibly incomplete) E.164 phone number.\r\n * @param {string?} country - A possible country for this phone number.\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string}\r\n */\r\nexport function stripCountryCallingCode(number, country, metadata) {\r\n\t// Just an optimization, so that it\r\n\t// doesn't have to iterate through all country calling codes.\r\n\tif (country) {\r\n\t\tconst countryCallingCodePrefix = '+' + getCountryCallingCode(country, metadata)\r\n\r\n\t\t// If `country` fits the actual `number`.\r\n\t\tif (number.length < countryCallingCodePrefix.length) {\r\n\t\t\tif (countryCallingCodePrefix.indexOf(number) === 0) {\r\n\t\t\t\treturn ''\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (number.indexOf(countryCallingCodePrefix) === 0) {\r\n\t\t\t\treturn number.slice(countryCallingCodePrefix.length)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// If `country` doesn't fit the actual `number`.\r\n\t// Try all available country calling codes.\r\n\tfor (const country_calling_code of Object.keys(metadata.country_calling_codes)) {\r\n\t\tif (number.indexOf(country_calling_code) === '+'.length) {\r\n\t\t\treturn number.slice('+'.length + country_calling_code.length)\r\n\t\t}\r\n\t}\r\n\r\n\treturn ''\r\n}\r\n\r\n/**\r\n * Parses a partially entered national phone number digits\r\n * (or a partially entered E.164 international phone number)\r\n * and returns the national significant number part.\r\n * National significant number returned doesn't come with a national prefix.\r\n * @param {string} number - National number digits. Or possibly incomplete E.164 phone number.\r\n * @param {string?} country\r\n * @param {object} metadata - `libphonenumber-js` metadata.\r\n * @return {string} [result]\r\n */\r\nexport function getNationalSignificantNumberDigits(number, country, metadata) {\r\n\t// Create \"as you type\" formatter.\r\n\tconst formatter = new AsYouType(country, metadata)\r\n\t// Input partial national phone number.\r\n\tformatter.input(number)\r\n\t// Return the parsed partial national phone number.\r\n\tconst phoneNumber = formatter.getNumber()\r\n\treturn phoneNumber && phoneNumber.nationalNumber\r\n}\r\n\r\n/**\r\n * Checks if a partially entered E.164 phone number could belong to a country.\r\n * @param {string} number\r\n * @param {string} country\r\n * @return {boolean}\r\n */\r\nexport function couldNumberBelongToCountry(number, country, metadata) {\r\n\tconst intlPhoneNumberPrefix = getInternationalPhoneNumberPrefix(country, metadata)\r\n\tlet i = 0\r\n\twhile (i < number.length && i < intlPhoneNumberPrefix.length) {\r\n\t\tif (number[i] !== intlPhoneNumberPrefix[i]) {\r\n\t\t\treturn false\r\n\t\t}\r\n\t\ti++\r\n\t}\r\n\treturn true\r\n}\r\n\r\n/**\r\n * Gets initial \"phone digits\" (including `+`, if using international format).\r\n * @return {string} [phoneDigits] Returns `undefined` if there should be no initial \"phone digits\".\r\n */\r\nexport function getInitialPhoneDigits({\r\n\tvalue,\r\n\tphoneNumber,\r\n\tdefaultCountry,\r\n\tinternational,\r\n\tuseNationalFormat,\r\n\tmetadata\r\n}) {\r\n\t// If the `value` (E.164 phone number)\r\n\t// belongs to the currently selected country\r\n\t// and `useNationalFormat` is `true`\r\n\t// then convert `value` (E.164 phone number)\r\n\t// to a local phone number digits.\r\n\t// E.g. '+78005553535' -> '88005553535'.\r\n\tif ((international === false || useNationalFormat) && phoneNumber && phoneNumber.country) {\r\n\t\treturn generateNationalNumberDigits(phoneNumber)\r\n\t}\r\n\t// If `international` property is `true`,\r\n\t// meaning \"enforce international phone number format\",\r\n\t// then always show country calling code in the input field.\r\n\tif (!value && international && defaultCountry) {\r\n\t\treturn getInternationalPhoneNumberPrefix(defaultCountry, metadata)\r\n\t}\r\n\treturn value\r\n}","import normalizeArguments from './normalizeArguments.js'\r\nimport parsePhoneNumber_ from './parsePhoneNumber_.js'\r\n\r\nexport default function parsePhoneNumber() {\r\n\tconst { text, options, metadata } = normalizeArguments(arguments)\r\n\treturn parsePhoneNumber_(text, options, metadata)\r\n}\r\n","import {\r\n\tgetInitialPhoneDigits,\r\n\tgetCountryForPartialE164Number,\r\n\tparsePhoneNumber\r\n} from './phoneInputHelpers.js'\r\n\r\nimport getInternationalPhoneNumberPrefix from './getInternationalPhoneNumberPrefix.js'\r\n\r\nimport {\r\n\tisCountrySupportedWithError,\r\n\tgetSupportedCountries\r\n} from './countries.js'\r\n\r\nexport default function getPhoneInputWithCountryStateUpdateFromNewProps(props, prevProps, state) {\r\n\tconst {\r\n\t\tmetadata,\r\n\t\tcountries,\r\n\t\tdefaultCountry: newDefaultCountry,\r\n\t\tvalue: newValue,\r\n\t\treset: newReset,\r\n\t\tinternational,\r\n\t\t// `displayInitialValueAsLocalNumber` property has been\r\n\t\t// superceded by `initialValueFormat` property.\r\n\t\tdisplayInitialValueAsLocalNumber,\r\n\t\tinitialValueFormat\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tdefaultCountry: prevDefaultCountry,\r\n\t\tvalue: prevValue,\r\n\t\treset: prevReset\r\n\t} = prevProps\r\n\r\n\tconst {\r\n\t\tcountry,\r\n\t\tvalue,\r\n\t\t// If the user has already manually selected a country\r\n\t\t// then don't override that already selected country\r\n\t\t// if the `defaultCountry` property changes.\r\n\t\t// That's what `hasUserSelectedACountry` flag is for.\r\n\t\thasUserSelectedACountry\r\n\t} = state\r\n\r\n\tconst _getInitialPhoneDigits = (parameters) => getInitialPhoneDigits({\r\n\t\t...parameters,\r\n\t\tinternational,\r\n\t\tuseNationalFormat: displayInitialValueAsLocalNumber || initialValueFormat === 'national',\r\n\t\tmetadata\r\n\t})\r\n\r\n\t// Some users requested a way to reset the component\r\n\t// (both number `` and country ``).\r\n\t// Whenever `reset` property changes both number ``\r\n\t// and country `` are reset.\r\n\t// It's not implemented as some instance `.reset()` method\r\n\t// because `ref` is forwarded to ``.\r\n\t// It's also not replaced with just resetting `country` on\r\n\t// external `value` reset, because a user could select a country\r\n\t// and then not input any `value`, and so the selected country\r\n\t// would be \"stuck\", if not using this `reset` property.\r\n\t// https://github.com/catamphetamine/react-phone-number-input/issues/300\r\n\tif (newReset !== prevReset) {\r\n\t\treturn {\r\n\t\t\tphoneDigits: _getInitialPhoneDigits({\r\n\t\t\t\tvalue: undefined,\r\n\t\t\t\tdefaultCountry: newDefaultCountry\r\n\t\t\t}),\r\n\t\t\tvalue: undefined,\r\n\t\t\tcountry: newDefaultCountry,\r\n\t\t\thasUserSelectedACountry: undefined\r\n\t\t}\r\n\t}\r\n\r\n\t// `value` is the value currently shown in the component:\r\n\t// it's stored in the component's `state`, and it's not the `value` property.\r\n\t// `prevValue` is \"previous `value` property\".\r\n\t// `newValue` is \"new `value` property\".\r\n\r\n\t// If the default country changed\r\n\t// (e.g. in case of ajax GeoIP detection after page loaded)\r\n\t// then select it, but only if the user hasn't already manually\r\n\t// selected a country, and no phone number has been manually entered so far.\r\n\t// Because if the user has already started inputting a phone number\r\n\t// then they're okay with no country being selected at all (\"International\")\r\n\t// and they don't want to be disturbed, don't want their input to be screwed, etc.\r\n\tif (newDefaultCountry !== prevDefaultCountry) {\r\n\t\tconst isNewDefaultCountrySupported = !newDefaultCountry || isCountrySupportedWithError(newDefaultCountry, metadata)\r\n\t\tconst noValueHasBeenEnteredByTheUser = (\r\n\t\t\t// By default, \"no value has been entered\" means `value` is `undefined`.\r\n\t\t\t!value ||\r\n\t\t\t// When `international` is `true`, and some country has been pre-selected,\r\n\t\t\t// then the `` contains a pre-filled value of `+${countryCallingCode}${leadingDigits}`,\r\n\t\t\t// so in case of `international` being `true`, \"the user hasn't entered anything\" situation\r\n\t\t\t// doesn't just mean `value` is `undefined`, but could also mean `value` is `+${countryCallingCode}`.\r\n\t\t\t(international && value === _getInitialPhoneDigits({\r\n\t\t\t\tvalue: undefined,\r\n\t\t\t\tdefaultCountry: prevDefaultCountry\r\n\t\t\t}))\r\n\t\t)\r\n\t\t// Only update the `defaultCountry` property if no phone number\r\n\t\t// has been entered by the user or pre-set by the application.\r\n\t\tconst noValueHasBeenEntered = !newValue && noValueHasBeenEnteredByTheUser\r\n\t\tif (!hasUserSelectedACountry && isNewDefaultCountrySupported && noValueHasBeenEntered) {\r\n\t\t\treturn {\r\n\t\t\t\tcountry: newDefaultCountry,\r\n\t\t\t\t// If `phoneDigits` is empty, then automatically select the new `country`\r\n\t\t\t\t// and set `phoneDigits` to `+{getCountryCallingCode(newCountry)}`.\r\n\t\t\t\t// The code assumes that \"no phone number has been entered by the user\",\r\n\t\t\t\t// and no `value` property has been passed, so the `phoneNumber` parameter\r\n\t\t\t\t// of `_getInitialPhoneDigits({ value, phoneNumber, ... })` is `undefined`.\r\n\t\t\t\tphoneDigits: _getInitialPhoneDigits({\r\n\t\t\t\t\tvalue: undefined,\r\n\t\t\t\t\tdefaultCountry: newDefaultCountry\r\n\t\t\t\t}),\r\n\t\t\t\t// `value` is `undefined` and it stays so.\r\n\t\t\t\tvalue: undefined\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// If a new `value` is set externally.\r\n\t// (e.g. as a result of an ajax API request\r\n\t// to get user's phone after page loaded)\r\n\t// The first part — `newValue !== prevValue` —\r\n\t// is basically `props.value !== prevProps.value`\r\n\t// so it means \"if value property was changed externally\".\r\n\t// The second part — `newValue !== value` —\r\n\t// is for ignoring the `getDerivedStateFromProps()` call\r\n\t// which happens in `this.onChange()` right after `this.setState()`.\r\n\t// If this `getDerivedStateFromProps()` call isn't ignored\r\n\t// then the country flag would reset on each input.\r\n\tif (!valuesAreEqual(newValue, prevValue) && !valuesAreEqual(newValue, value)) {\r\n\t\tlet phoneNumber\r\n\t\tlet parsedCountry\r\n\t\tif (newValue) {\r\n\t\t\tphoneNumber = parsePhoneNumber(newValue, metadata)\r\n\t\t\tconst supportedCountries = getSupportedCountries(countries, metadata)\r\n\t\t\tif (phoneNumber && phoneNumber.country) {\r\n\t\t\t\t// Ignore `else` because all countries are supported in metadata.\r\n\t\t\t\t/* istanbul ignore next */\r\n\t\t\t\tif (!supportedCountries || supportedCountries.indexOf(phoneNumber.country) >= 0) {\r\n\t\t\t\t\tparsedCountry = phoneNumber.country\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tparsedCountry = getCountryForPartialE164Number(newValue, {\r\n\t\t\t\t\tcountry: undefined,\r\n\t\t\t\t\tcountries: supportedCountries,\r\n\t\t\t\t\tmetadata\r\n\t\t\t\t})\r\n\t\t\t\t// In cases when multiple countries correspond to the same country calling code,\r\n\t\t\t\t// the phone number digits of `newValue` have to be matched against country-specific\r\n\t\t\t\t// regular expressions in order to determine the exact country.\r\n\t\t\t\t// Sometimes, that algorithm can't decide for sure which country does the phone number belong to,\r\n\t\t\t\t// for example when the digits of `newValue` don't match any of those regular expressions.\r\n\t\t\t\t// and the country of the phone number couldn't be determined.\r\n\t\t\t\t// In those cases, people prefer the component to show the flag of the `defaultCountry`\r\n\t\t\t\t// if the phone number could potentially belong to that `defaultCountry`.\r\n\t\t\t\t// At least that's how the component behaves when a user pastes an international\r\n\t\t\t\t// phone number into the input field: for example, when `defaultCountry` is `\"US\"`\r\n\t\t\t\t// and the user pastes value \"+1 555 555 5555\" into the input field, it keep showing \"US\" flag.\r\n\t\t\t\t// So when setting new `value` property externally, the component should behave the same way:\r\n\t\t\t\t// it should select the `defaultCountry` when the new `value` could potentially belong\r\n\t\t\t\t// to that country in cases when the exact country can't be determined.\r\n\t\t\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/413#issuecomment-1536219404\r\n\t\t\t\tif (!parsedCountry) {\r\n\t\t\t\t\tif (newDefaultCountry) {\r\n\t\t\t\t\t\tif (newValue.indexOf(getInternationalPhoneNumberPrefix(newDefaultCountry, metadata)) === 0) {\r\n\t\t\t\t\t\t\tparsedCountry = newDefaultCountry\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\tlet hasUserSelectedACountryUpdate\r\n\t\tif (!newValue) {\r\n\t\t\t// Reset `hasUserSelectedACountry` flag in `state`.\r\n\t\t\thasUserSelectedACountryUpdate = {\r\n\t\t\t\thasUserSelectedACountry: undefined\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn {\r\n\t\t\t...hasUserSelectedACountryUpdate,\r\n\t\t\tphoneDigits: _getInitialPhoneDigits({\r\n\t\t\t\tphoneNumber,\r\n\t\t\t\tvalue: newValue,\r\n\t\t\t\tdefaultCountry: newDefaultCountry\r\n\t\t\t}),\r\n\t\t\tvalue: newValue,\r\n\t\t\tcountry: newValue ? parsedCountry : newDefaultCountry\r\n\t\t}\r\n\t}\r\n\r\n\t// `defaultCountry` didn't change.\r\n\t// `value` didn't change.\r\n\t// `phoneDigits` didn't change, because `value` didn't change.\r\n\t//\r\n\t// So no need to update state.\r\n}\r\n\r\nfunction valuesAreEqual(value1, value2) {\r\n\t// If `value` has been set to `null` externally then convert it to `undefined`.\r\n\t//\r\n\t// For example, `react-hook-form` sets `value` to `null` when the user clears the input.\r\n\t// https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/164\r\n\t// In that case, without this conversion of `null` to `undefined`, it would reset\r\n\t// the selected country to `defaultCountry` because in that case `newValue !== value`\r\n\t// because `null !== undefined`.\r\n\t//\r\n\t// Historically, empty `value` is encoded as `undefined`.\r\n\t// Perhaps empty `value` would be better encoded as `null` instead.\r\n\t// But because that would be a potentially breaking change for some people,\r\n\t// it's left as is for the current \"major\" version of this library.\r\n\t//\r\n\tif (value1 === null) {\r\n\t\tvalue1 = undefined\r\n\t}\r\n\tif (value2 === null) {\r\n\t\tvalue2 = undefined\r\n\t}\r\n\treturn value1 === value2\r\n}","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport classNames from 'classnames'\r\n\r\nimport InputSmart from './InputSmart.js'\r\nimport InputBasic from './InputBasic.js'\r\n\r\nimport { CountrySelectWithIcon as CountrySelect } from './CountrySelect.js'\r\n\r\nimport Flag from './Flag.js'\r\nimport InternationalIcon from './InternationalIcon.js'\r\n\r\nimport {\r\n\tsortCountryOptions,\r\n\tisCountrySupportedWithError,\r\n\tgetSupportedCountries,\r\n\tgetSupportedCountryOptions,\r\n\tgetCountries\r\n} from './helpers/countries.js'\r\n\r\nimport { createCountryIconComponent } from './CountryIcon.js'\r\n\r\nimport {\r\n\tmetadata as metadataPropType,\r\n\tlabels as labelsPropType\r\n} from './PropTypes.js'\r\n\r\nimport {\r\n\tgetPreSelectedCountry,\r\n\tgetCountrySelectOptions,\r\n\tparsePhoneNumber,\r\n\tgenerateNationalNumberDigits,\r\n\tgetPhoneDigitsForNewCountry,\r\n\tgetInitialPhoneDigits,\r\n\tonPhoneDigitsChange,\r\n\te164\r\n} from './helpers/phoneInputHelpers.js'\r\n\r\nimport getPhoneInputWithCountryStateUpdateFromNewProps from './helpers/getPhoneInputWithCountryStateUpdateFromNewProps.js'\r\n\r\nclass PhoneNumberInput_ extends React.PureComponent {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\r\n\t\tthis.inputRef = React.createRef()\r\n\r\n\t\tconst {\r\n\t\t\tvalue,\r\n\t\t\tlabels,\r\n\t\t\tinternational,\r\n\t\t\taddInternationalOption,\r\n\t\t\t// `displayInitialValueAsLocalNumber` property has been\r\n\t\t\t// superceded by `initialValueFormat` property.\r\n\t\t\tdisplayInitialValueAsLocalNumber,\r\n\t\t\tinitialValueFormat,\r\n\t\t\tmetadata\r\n\t\t} = this.props\r\n\r\n\t\tlet {\r\n\t\t\tdefaultCountry,\r\n\t\t\tcountries\r\n\t\t} = this.props\r\n\r\n\t\t// Validate `defaultCountry`.\r\n\t\tif (defaultCountry) {\r\n\t\t\tif (!this.isCountrySupportedWithError(defaultCountry)) {\r\n\t\t\t\tdefaultCountry = undefined\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Validate `countries`.\r\n\t\tcountries = getSupportedCountries(countries, metadata)\r\n\r\n\t\tconst phoneNumber = parsePhoneNumber(value, metadata)\r\n\r\n\t\tthis.CountryIcon = createCountryIconComponent(this.props)\r\n\r\n\t\tconst preSelectedCountry = getPreSelectedCountry({\r\n\t\t\tvalue,\r\n\t\t\tphoneNumber,\r\n\t\t\tdefaultCountry,\r\n\t\t\trequired: !addInternationalOption,\r\n\t\t\tcountries: countries || getCountries(metadata),\r\n\t\t\tgetAnyCountry: () => this.getFirstSupportedCountry({ countries }),\r\n\t\t\tmetadata\r\n\t\t})\r\n\r\n\t\tthis.state = {\r\n\t\t\t// Workaround for `this.props` inside `getDerivedStateFromProps()`.\r\n\t\t\tprops: this.props,\r\n\r\n\t\t\t// The country selected.\r\n\t\t\tcountry: preSelectedCountry,\r\n\r\n\t\t\t// `countries` are stored in `this.state` because they're filtered.\r\n\t\t\t// For example, a developer might theoretically pass some unsupported\r\n\t\t\t// countries as part of the `countries` property, and because of that\r\n\t\t\t// the component uses `this.state.countries` (which are filtered)\r\n\t\t\t// instead of `this.props.countries`\r\n\t\t\t// (which could potentially contain unsupported countries).\r\n\t\t\tcountries,\r\n\r\n\t\t\t// `phoneDigits` state property holds non-formatted user's input.\r\n\t\t\t// The reason is that there's no way of finding out\r\n\t\t\t// in which form should `value` be displayed: international or national.\r\n\t\t\t// E.g. if `value` is `+78005553535` then it could be input\r\n\t\t\t// by a user both as `8 (800) 555-35-35` and `+7 800 555 35 35`.\r\n\t\t\t// Hence storing just `value` is not sufficient for correct formatting.\r\n\t\t\t// E.g. if a user entered `8 (800) 555-35-35`\r\n\t\t\t// then value is `+78005553535` and `phoneDigits` are `88005553535`\r\n\t\t\t// and if a user entered `+7 800 555 35 35`\r\n\t\t\t// then value is `+78005553535` and `phoneDigits` are `+78005553535`.\r\n\t\t\tphoneDigits: getInitialPhoneDigits({\r\n\t\t\t\tvalue,\r\n\t\t\t\tphoneNumber,\r\n\t\t\t\tdefaultCountry,\r\n\t\t\t\tinternational,\r\n\t\t\t\tuseNationalFormat: displayInitialValueAsLocalNumber || initialValueFormat === 'national',\r\n\t\t\t\tmetadata\r\n\t\t\t}),\r\n\r\n\t\t\t// `value` property is duplicated in state.\r\n\t\t\t// The reason is that `getDerivedStateFromProps()`\r\n\t\t\t// needs this `value` to compare to the new `value` property\r\n\t\t\t// to find out if `phoneDigits` needs updating:\r\n\t\t\t// If the `value` property was changed externally\r\n\t\t\t// then it won't be equal to `state.value`\r\n\t\t\t// in which case `phoneDigits` and `country` should be updated.\r\n\t\t\tvalue\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidMount() {\r\n\t\tconst { onCountryChange } = this.props\r\n\t\tlet { defaultCountry } = this.props\r\n\t\tconst { country: selectedCountry } = this.state\r\n\t\tif (onCountryChange) {\r\n\t\t\tif (defaultCountry) {\r\n\t\t\t\tif (!this.isCountrySupportedWithError(defaultCountry)) {\r\n\t\t\t\t\tdefaultCountry = undefined\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\tif (selectedCountry !== defaultCountry) {\r\n\t\t\t\tonCountryChange(selectedCountry)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidUpdate(prevProps, prevState) {\r\n\t\tconst { onCountryChange } = this.props\r\n\t\tconst { country } = this.state\r\n\t\t// Call `onCountryChange` when user selects another country.\r\n\t\tif (onCountryChange && country !== prevState.country) {\r\n\t\t\tonCountryChange(country)\r\n\t\t}\r\n\t}\r\n\r\n\tsetInputRef = (instance) => {\r\n\t\tthis.inputRef.current = instance\r\n\t\tconst { inputRef: ref } = this.props\r\n\t\tif (ref) {\r\n\t\t\tif (typeof ref === 'function') {\r\n\t\t\t\tref(instance)\r\n\t\t\t} else {\r\n\t\t\t\tref.current = instance\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tgetCountrySelectOptions({ countries }) {\r\n\t\tconst {\r\n\t\t\tinternational,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tcountryOptionsOrder,\r\n\t\t\taddInternationalOption,\r\n\t\t\tlabels,\r\n\t\t\tlocales,\r\n\t\t\tmetadata\r\n\t\t} = this.props\r\n\t\treturn this.useMemoCountrySelectOptions(() => {\r\n\t\t\treturn sortCountryOptions(\r\n\t\t\t\tgetCountrySelectOptions({\r\n\t\t\t\t\tcountries: countries || getCountries(metadata),\r\n\t\t\t\t\tcountryNames: labels,\r\n\t\t\t\t\taddInternationalOption: (international && countryCallingCodeEditable === false) ? false : addInternationalOption,\r\n\t\t\t\t\tcompareStringsLocales: locales,\r\n\t\t\t\t\t// compareStrings\r\n\t\t\t\t}),\r\n\t\t\t\tgetSupportedCountryOptions(countryOptionsOrder, metadata)\r\n\t\t\t)\r\n\t\t}, [\r\n\t\t\tcountries,\r\n\t\t\tcountryOptionsOrder,\r\n\t\t\taddInternationalOption,\r\n\t\t\tlabels,\r\n\t\t\tmetadata\r\n\t\t])\r\n\t}\r\n\r\n\tuseMemoCountrySelectOptions(generator, dependencies) {\r\n\t\tif (\r\n\t\t\t!this.countrySelectOptionsMemoDependencies ||\r\n\t\t\t!areEqualArrays(dependencies, this.countrySelectOptionsMemoDependencies)\r\n\t\t) {\r\n\t\t\tthis.countrySelectOptionsMemo = generator()\r\n\t\t\tthis.countrySelectOptionsMemoDependencies = dependencies\r\n\t\t}\r\n\t\treturn this.countrySelectOptionsMemo\r\n\t}\r\n\r\n\tgetFirstSupportedCountry({ countries }) {\r\n\t\tconst countryOptions = this.getCountrySelectOptions({ countries })\r\n\t\treturn countryOptions[0].value\r\n\t}\r\n\r\n\t// A shorthand for not passing `metadata` as a second argument.\r\n\tisCountrySupportedWithError = (country) => {\r\n\t\tconst { metadata } = this.props\r\n\t\treturn isCountrySupportedWithError(country, metadata)\r\n\t}\r\n\r\n\t// Country `` `onChange` handler.\r\n\tonCountryChange = (newCountry) => {\r\n\t\tconst {\r\n\t\t\tinternational,\r\n\t\t\tmetadata,\r\n\t\t\tonChange,\r\n\t\t\tfocusInputOnCountrySelection\r\n\t\t} = this.props\r\n\r\n\t\tconst {\r\n\t\t\tphoneDigits: prevPhoneDigits,\r\n\t\t\tcountry: prevCountry\r\n\t\t} = this.state\r\n\r\n\t\t// After the new `country` has been selected,\r\n\t\t// if the phone number `` holds any digits\r\n\t\t// then migrate those digits for the new `country`.\r\n\t\tconst newPhoneDigits = getPhoneDigitsForNewCountry(prevPhoneDigits, {\r\n\t\t\tprevCountry,\r\n\t\t\tnewCountry,\r\n\t\t\tmetadata,\r\n\t\t\t// Convert the phone number to \"national\" format\r\n\t\t\t// when the user changes the selected country by hand.\r\n\t\t\tuseNationalFormat: !international\r\n\t\t})\r\n\r\n\t\tconst newValue = e164(newPhoneDigits, newCountry, metadata)\r\n\r\n\t\t// Focus phone number `` upon country selection.\r\n\t\tif (focusInputOnCountrySelection) {\r\n\t\t\tthis.inputRef.current.focus()\r\n\t\t}\r\n\r\n\t\t// If the user has already manually selected a country\r\n\t\t// then don't override that already selected country\r\n\t\t// if the `defaultCountry` property changes.\r\n\t\t// That's what `hasUserSelectedACountry` flag is for.\r\n\r\n\t\tthis.setState({\r\n\t\t\tcountry: newCountry,\r\n\t\t\thasUserSelectedACountry: true,\r\n\t\t\tphoneDigits: newPhoneDigits,\r\n\t\t\tvalue: newValue\r\n\t\t},\r\n\t\t() => {\r\n\t\t\t// Update the new `value` property.\r\n\t\t\t// Doing it after the `state` has been updated\r\n\t\t\t// because `onChange()` will trigger `getDerivedStateFromProps()`\r\n\t\t\t// with the new `value` which will be compared to `state.value` there.\r\n\t\t\tonChange(newValue)\r\n\t\t})\r\n\t}\r\n\r\n\t/**\r\n\t * `` `onChange()` handler.\r\n\t * Updates `value` property accordingly (so that they are kept in sync).\r\n\t * @param {string?} input — Either a parsed phone number or an empty string. Examples: `\"\"`, `\"+\"`, `\"+123\"`, `\"123\"`.\r\n\t */\r\n\tonChange = (_phoneDigits) => {\r\n\t\tconst {\r\n\t\t\tdefaultCountry,\r\n\t\t\tonChange,\r\n\t\t\taddInternationalOption,\r\n\t\t\tinternational,\r\n\t\t\tlimitMaxLength,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tmetadata\r\n\t\t} = this.props\r\n\r\n\t\tconst {\r\n\t\t\tcountries,\r\n\t\t\tphoneDigits: prevPhoneDigits,\r\n\t\t\tcountry: currentlySelectedCountry\r\n\t\t} = this.state\r\n\r\n\t\tconst {\r\n\t\t\t// `phoneDigits` returned here are a \"normalized\" version of the original `phoneDigits`.\r\n\t\t\t// The returned `phoneDigits` shouldn't be used anywhere except for passing it as\r\n\t\t\t// `prevPhoneDigits` parameter to the same `onPhoneDigitsChange()` function\r\n\t\t\t// on next input change event.\r\n\t\t\tphoneDigits,\r\n\t\t\tcountry,\r\n\t\t\tvalue\r\n\t\t} = onPhoneDigitsChange(_phoneDigits, {\r\n\t\t\tprevPhoneDigits,\r\n\t\t\tcountry: currentlySelectedCountry,\r\n\t\t\tcountryRequired: !addInternationalOption,\r\n\t\t\tdefaultCountry,\r\n\t\t\tgetAnyCountry: () => this.getFirstSupportedCountry({ countries }),\r\n\t\t\tcountries,\r\n\t\t\tinternational,\r\n\t\t\tlimitMaxLength,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tmetadata\r\n\t\t})\r\n\r\n\t\tconst stateUpdate = {\r\n\t\t\tphoneDigits,\r\n\t\t\tvalue,\r\n\t\t\tcountry\r\n\t\t}\r\n\r\n\t\tif (countryCallingCodeEditable === false) {\r\n\t\t\t// If it simply did `setState({ phoneDigits: intlPrefix })` here,\r\n\t\t\t// then it would have no effect when erasing an inital international prefix\r\n\t\t\t// via Backspace, because `phoneDigits` in `state` wouldn't change\r\n\t\t\t// as a result, because it was `prefix` and it became `prefix`,\r\n\t\t\t// so the component wouldn't rerender, and the user would be able\r\n\t\t\t// to erase the country calling code part, and that part is\r\n\t\t\t// assumed to be non-eraseable. That's why the component is\r\n\t\t\t// forcefully rerendered here.\r\n\t\t\t// https://github.com/catamphetamine/react-phone-number-input/issues/367#issuecomment-721703501\r\n\t\t\tif (!value && phoneDigits === this.state.phoneDigits) {\r\n\t\t\t\t// Force a re-render of the `` in order to reset its value.\r\n\t\t\t\tstateUpdate.forceRerender = {}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tthis.setState(\r\n\t\t\tstateUpdate,\r\n\t\t\t// Update the new `value` property.\r\n\t\t\t// Doing it after the `state` has been updated\r\n\t\t\t// because `onChange()` will trigger `getDerivedStateFromProps()`\r\n\t\t\t// with the new `value` which will be compared to `state.value` there.\r\n\t\t\t() => onChange(value)\r\n\t\t)\r\n\t}\r\n\r\n\t// Toggles the `--focus` CSS class.\r\n\t_onFocus = () => this.setState({ isFocused: true })\r\n\r\n\t// Toggles the `--focus` CSS class.\r\n\t_onBlur = () => this.setState({ isFocused: false })\r\n\r\n\tonFocus = (event) => {\r\n\t\tthis._onFocus()\r\n\t\tconst { onFocus } = this.props\r\n\t\tif (onFocus) {\r\n\t\t\tonFocus(event)\r\n\t\t}\r\n\t}\r\n\r\n\tonBlur = (event) => {\r\n\t\tconst { onBlur } = this.props\r\n\t\tthis._onBlur()\r\n\t\tif (onBlur) {\r\n\t\t\tonBlur(event)\r\n\t\t}\r\n\t}\r\n\r\n\tonCountryFocus = (event) => {\r\n\t\tthis._onFocus()\r\n\t\t// this.setState({ countrySelectFocused: true })\r\n\t\tconst { countrySelectProps } = this.props\r\n\t\tif (countrySelectProps) {\r\n\t\t\tconst { onFocus } = countrySelectProps\r\n\t\t\tif (onFocus) {\r\n\t\t\t\tonFocus(event)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tonCountryBlur = (event) => {\r\n\t\tthis._onBlur()\r\n\t\t// this.setState({ countrySelectFocused: false })\r\n\t\tconst { countrySelectProps } = this.props\r\n\t\tif (countrySelectProps) {\r\n\t\t\tconst { onBlur } = countrySelectProps\r\n\t\t\tif (onBlur) {\r\n\t\t\t\tonBlur(event)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t// `state` holds previous props as `props`, and also:\r\n\t// * `country` — The currently selected country, e.g. `\"RU\"`.\r\n\t// * `value` — The currently entered phone number (E.164), e.g. `+78005553535`.\r\n\t// * `phoneDigits` — The parsed `` value, e.g. `8005553535`.\r\n\t// (and a couple of other less significant properties)\r\n\tstatic getDerivedStateFromProps(props, state) {\r\n\t\treturn {\r\n\t\t\t// Emulate `prevProps` via `state.props`.\r\n\t\t\tprops,\r\n\t\t\t...getPhoneInputWithCountryStateUpdateFromNewProps(props, state.props, state)\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst {\r\n\t\t\t// Generic HTML attributes.\r\n\t\t\tname,\r\n\t\t\tdisabled,\r\n\t\t\treadOnly,\r\n\t\t\tautoComplete,\r\n\t\t\tstyle,\r\n\t\t\tclassName,\r\n\r\n\t\t\t// Number `` properties.\r\n\t\t\tinputRef,\r\n\t\t\tinputComponent,\r\n\t\t\tnumberInputProps,\r\n\t\t\tsmartCaret,\r\n\r\n\t\t\t// Country `` properties.\r\n\t\t\tcountrySelectComponent: CountrySelectComponent,\r\n\t\t\tcountrySelectProps,\r\n\r\n\t\t\t// Container `` properties.\r\n\t\t\tcontainerComponent: ContainerComponent,\r\n\r\n\t\t\t// Get \"rest\" properties (passed through to number ``).\r\n\t\t\tdefaultCountry,\r\n\t\t\tcountries: countriesProperty,\r\n\t\t\tcountryOptionsOrder,\r\n\t\t\tlabels,\r\n\t\t\tflags,\r\n\t\t\tflagComponent,\r\n\t\t\tflagUrl,\r\n\t\t\taddInternationalOption,\r\n\t\t\tinternationalIcon,\r\n\t\t\t// `displayInitialValueAsLocalNumber` property has been\r\n\t\t\t// superceded by `initialValueFormat` property.\r\n\t\t\tdisplayInitialValueAsLocalNumber,\r\n\t\t\tinitialValueFormat,\r\n\t\t\tonCountryChange,\r\n\t\t\tlimitMaxLength,\r\n\t\t\tcountryCallingCodeEditable,\r\n\t\t\tfocusInputOnCountrySelection,\r\n\t\t\treset,\r\n\t\t\tmetadata,\r\n\t\t\tinternational,\r\n\t\t\tlocales,\r\n\t\t\t// compareStrings,\r\n\t\t\t...rest\r\n\t\t} = this.props\r\n\r\n\t\tconst {\r\n\t\t\tcountry,\r\n\t\t\tcountries,\r\n\t\t\tphoneDigits,\r\n\t\t\tisFocused\r\n\t\t} = this.state\r\n\r\n\t\tconst InputComponent = smartCaret ? InputSmart : InputBasic\r\n\r\n\t\tconst countrySelectOptions = this.getCountrySelectOptions({ countries })\r\n\r\n\t\treturn (\r\n\t\t\t