Merge pull request #169 from stephb9959/dev

2.6.8

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.6.1",
+  "version": "2.6.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.6.1",
+      "version": "2.6.8",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",
@@ -23,6 +23,7 @@
         "prop-types": "^15.7.2",
         "react": "^17.0.2",
         "react-apexcharts": "^1.3.9",
+        "react-country-flag": "^3.0.2",
         "react-csv": "^2.2.2",
         "react-dom": "^17.0.2",
         "react-flow-renderer": "^9.6.6",
@@ -2944,6 +2945,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ansi-escapes/node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -3943,9 +3956,9 @@
       }
     },
     "node_modules/cliui/node_modules/ansi-regex": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -6740,9 +6753,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.7",
+      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==",
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
       "funding": [
         {
           "type": "individual",
@@ -10915,6 +10928,17 @@
         "react": ">=0.13"
       }
     },
+    "node_modules/react-country-flag": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.0.2.tgz",
+      "integrity": "sha512-JPaz+q3QD0/nZtHBKj5x3O7r/SgSG9kxbymdaIU0RqlDAcorJIe4KV0DFhWIdKh69q5cPVkIVERcMYGZdvXgAA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-csv": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -13308,10 +13332,12 @@
       }
     },
     "node_modules/type-fest": {
-      "version": "0.21.3",
+      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -13570,9 +13596,9 @@
       }
     },
     "node_modules/url-parse": {
-      "version": "1.5.4",
+      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
       "dev": true,
       "dependencies": {
         "querystringify": "^2.1.1",
@@ -14804,9 +14830,9 @@
       }
     },
     "node_modules/yargs/node_modules/ansi-regex": {
-      "version": "4.1.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -17000,6 +17026,14 @@
       "dev": true,
       "requires": {
         "type-fest": "^0.21.3"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.21.3",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+          "dev": true
+        }
       }
     },
     "ansi-html": {
@@ -17780,9 +17814,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "4.1.0",
+          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
           "dev": true
         },
         "emoji-regex": {
@@ -19924,9 +19958,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.14.7",
+      "version": "1.14.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -22983,6 +23017,12 @@
         "prop-types": "^15.5.7"
       }
     },
+    "react-country-flag": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.0.2.tgz",
+      "integrity": "sha512-JPaz+q3QD0/nZtHBKj5x3O7r/SgSG9kxbymdaIU0RqlDAcorJIe4KV0DFhWIdKh69q5cPVkIVERcMYGZdvXgAA==",
+      "requires": {}
+    },
     "react-csv": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-csv/-/react-csv-2.2.2.tgz",
@@ -24844,10 +24884,12 @@
       }
     },
     "type-fest": {
-      "version": "0.21.3",
+      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-      "dev": true
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "type-is": {
       "version": "1.6.18",
@@ -25062,9 +25104,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.4",
+      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
       "dev": true,
       "requires": {
         "querystringify": "^2.1.1",
@@ -25983,9 +26025,9 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "4.1.0",
+          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
           "dev": true
         },
         "emoji-regex": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.6.1",
+  "version": "2.6.8",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
@@ -17,6 +17,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
+    "react-country-flag": "^3.0.2",
     "react-csv": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-flow-renderer": "^9.6.6",

src/components/ConfigurationDisplay/index.js

@@ -37,7 +37,7 @@ const ConfigurationDisplay = ({ getData, deviceConfig }) => {
           <CopyToClipboardButton
             t={t}
             size="sm"
-            content={JSON.stringify(deviceConfig?.configuration ?? {})}
+            content={JSON.stringify(deviceConfig?.configuration ?? {}, null, 4)}
           />
         </h5>
         <CRow>

src/components/DeviceListTable/Table/index.js

@@ -27,6 +27,7 @@ import ReactTooltip from 'react-tooltip';
 import { v4 as createUuid } from 'uuid';
 import { cleanBytesString } from 'utils/helper';
 import { DeviceBadge, LoadingButton } from 'ucentral-libs';
+import ReactCountryFlag from 'react-country-flag';
 import styles from './index.module.scss';
 
 const DeviceListTable = ({
@@ -324,11 +325,18 @@ const DeviceListTable = ({
               ipAddress: (item) => (
                 <td className="align-middle">
                   <CPopover
-                    content={item.ipAddress ? item.ipAddress : t('common.na')}
+                    content={`${item.locale !== '' ? `${item.locale} - ` : ''}${item.ipAddress}`}
                     placement="top"
                   >
                     <div style={{ width: 'calc(8vw)' }} className="text-truncate align-middle">
-                      {item.ipAddress}
+                      {item.locale !== '' && item.ipAddress !== '' && (
+                        <ReactCountryFlag
+                          style={{ width: '24px', height: '24px' }}
+                          countryCode={item?.locale}
+                          svg
+                        />
+                      )}
+                      {`  ${item.ipAddress}`}
                     </div>
                   </CPopover>
                 </td>

src/components/InterfaceStatistics/LatestStatisticsModal.js

@@ -5,7 +5,7 @@ import { cilX } from '@coreui/icons';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import axiosInstance from 'utils/axiosInstance';
-import { useAuth, useDevice } from 'ucentral-libs';
+import { useAuth, useDevice, CopyToClipboardButton } from 'ucentral-libs';
 
 const LatestStatisticsModal = ({ show, toggle }) => {
   const { t } = useTranslation();
@@ -51,6 +51,13 @@ const LatestStatisticsModal = ({ show, toggle }) => {
         </div>
       </CModalHeader>
       <CModalBody>
+        <div style={{ textAlign: 'right' }}>
+          <CopyToClipboardButton
+            t={t}
+            size="lg"
+            content={JSON.stringify(latestStats ?? {}, null, 4)}
+          />
+        </div>
         <pre className="ignore">{JSON.stringify(latestStats, null, 2)}</pre>
       </CModalBody>
     </CModal>

src/components/WifiAnalysis/WifiAnalysis.js

@@ -23,7 +23,7 @@ const WifiAnalysisTable = ({ t, data, loading }) => {
   };
   const columns = [
     { key: 'radio', label: '#', _style: { width: '1%' } },
-    { key: 'bssid', label: 'BSSID', _style: { width: '1%' } },
+    { key: 'station', label: 'Station ID', _style: { width: '1%' } },
     { key: 'vendor', label: t('wifi_analysis.vendor'), _style: { width: '15%' }, sorter: false },
     { key: 'mode', label: t('wifi_analysis.mode'), _style: { width: '1%' }, sorter: false },
     { key: 'ssid', label: 'SSID', _style: { width: '15%' } },
@@ -84,12 +84,12 @@ const WifiAnalysisTable = ({ t, data, loading }) => {
         sorter
         sorterValue={{ column: 'radio', asc: true }}
         scopedSlots={{
-          bssid: (item) => (
+          station: (item) => (
             <td
               className="text-center align-middle"
               style={{ fontFamily: 'monospace', fontSize: '0.96rem' }}
             >
-              {item.bssid}
+              {item.station}
             </td>
           ),
           radio: (item) => <td className="text-center align-middle">{item.radio.radio}</td>,

src/components/WifiAnalysis/index.js

@@ -152,7 +152,7 @@ const WifiAnalysis = () => {
                 const data = {
                   radio: radioInfo,
                   ...extractIp(stat.data, association.bssid),
-                  bssid: association.bssid,
+                  station: association.station,
                   ssid: ssid.ssid,
                   rssi: association.rssi ? parseDbm(association.rssi) : '-',
                   mode: ssid.mode,

src/pages/DevicePage/Details.js

@@ -15,12 +15,17 @@ import {
 import CIcon from '@coreui/icons-react';
 import { cilSync } from '@coreui/icons';
 import { prettyDate } from 'utils/helper';
-import { CopyToClipboardButton, HideTextButton } from 'ucentral-libs';
+import { CopyToClipboardButton, HideTextButton, useAuth } from 'ucentral-libs';
+import { getCountryFromLocale } from 'utils/countries';
+import ReactCountryFlag from 'react-country-flag';
+import axiosInstance from 'utils/axiosInstance';
 
 import styles from './index.module.scss';
 
 const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats }) => {
   const [showPassword, setShowPassword] = useState(false);
+  const [subName, setSubName] = useState('');
+  const { currentToken, endpoints } = useAuth();
 
   const toggleShowPassword = () => {
     setShowPassword(!showPassword);
@@ -32,21 +37,51 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
     return showPassword ? password : '******';
   };
 
-  const displayExtra = (key, value, extraData) => {
+  const getSubData = async (subId) => {
-    if (!extraData || !extraData[key]) return value;
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
 
-    if (!localStorage.getItem('owprov-ui') || key === 'owner') return extraData[key].name;
+    axiosInstance
+      .get(`${endpoints.owsec}/api/v1/subuser/${subId}`, options)
+      .then((response) => setSubName(response.data.name ?? ''))
+      .catch(() => setSubName(''));
+  };
+
+  const getSubscriber = () => {
+    if (!deviceConfig?.subscriber || deviceConfig.subscriber === '') return '';
+    getSubData(deviceConfig.subscriber);
 
     return (
       <CLink
         className="c-subheader-nav-link align-self-center"
         aria-current="page"
-        href={`${localStorage.getItem('owprov-ui')}/#/${key === 'entity' ? 'entity' : 'venue'}/${
+        href={`${localStorage.getItem('owprov-ui')}/#/subscriber/${deviceConfig.subscriber}`}
-          extraData[key].id
-        }`}
         target="_blank"
       >
-        {extraData[key].name}
+        {subName !== '' ? subName : deviceConfig.subscriber}
+      </CLink>
+    );
+  };
+
+  const displayExtra = (key, value, extraData) => {
+    if (!extraData || !extraData[key]) return value;
+
+    if (!localStorage.getItem('owprov-ui')) return extraData[key].name;
+
+    return (
+      <CLink
+        className="c-subheader-nav-link align-self-center"
+        aria-current="page"
+        href={`${localStorage.getItem('owprov-ui')}/#/${
+          key === 'entity' ? 'entity' : 'venue'
+        }/${value}`}
+        target="_blank"
+      >
+        {!extraData || !extraData[key] ? value : extraData[key].name}
       </CLink>
     );
   };
@@ -99,13 +134,13 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
                 />
               </CCol>
               <CCol className="border-left" lg="2" xl="1" xxl="1">
-                <CLabel>{t('configuration.owner')}:</CLabel>
+                <CLabel>{t('inventory.subscriber')}:</CLabel>
               </CCol>
               <CCol lg="2" xl="3" xxl="3">
-                {deviceConfig?.owner}
+                {getSubscriber()}
               </CCol>
               <CCol lg="2" xl="1" xxl="1">
-                <CLabel>{t('common.mac')}:</CLabel>
+                <CLabel>MAC:</CLabel>
               </CCol>
               <CCol className="border-right" lg="2" xl="3" xxl="3">
                 {deviceConfig?.macAddress}
@@ -117,25 +152,16 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
                 {deviceConfig?.deviceType}
               </CCol>
               <CCol className="border-left" lg="2" xl="1" xxl="1">
-                <CLabel>
+                <CLabel>{t('entity.entity')}:</CLabel>
-                  {deviceConfig?.venue?.substring(0, 3) === 'ent'
-                    ? t('entity.entity')
-                    : t('inventory.venue')}
-                  :
-                </CLabel>
               </CCol>
               <CCol lg="2" xl="3" xxl="3">
-                {deviceConfig?.venue?.substring(0, 3) === 'ent'
+                {deviceConfig?.entity !== ''
                   ? displayExtra(
                       'entity',
                       deviceConfig?.venue?.slice(4),
                       deviceConfig?.extendedInfo,
                     )
-                  : displayExtra(
+                  : ''}
-                      'venue',
-                      deviceConfig?.venue?.slice(4),
-                      deviceConfig?.extendedInfo,
-                    )}
               </CCol>
               <CCol lg="2" xl="1" xxl="1">
                 <CLabel>{t('common.manufacturer')}:</CLabel>
@@ -149,6 +175,37 @@ const DeviceDetails = ({ t, loading, getData, status, deviceConfig, lastStats })
               <CCol lg="2" xl="3" xxl="3">
                 {prettyDate(deviceConfig?.createdTimestamp)}
               </CCol>
+              <CCol className="border-left" lg="2" xl="1" xxl="1">
+                <CLabel>{t('inventory.venue')}:</CLabel>
+              </CCol>
+              <CCol lg="2" xl="3" xxl="3">
+                {deviceConfig?.venue !== ''
+                  ? displayExtra('venue', deviceConfig?.venue?.slice(4), deviceConfig?.extendedInfo)
+                  : ''}
+              </CCol>
+              <CCol lg="2" xl="1" xxl="1">
+                <CLabel>Locale:</CLabel>
+              </CCol>
+              <CCol className="border-right" lg="2" xl="3" xxl="3">
+                {deviceConfig?.locale !== '' && (
+                  <ReactCountryFlag
+                    style={{ width: '24px', height: '24px' }}
+                    countryCode={deviceConfig?.locale}
+                    svg
+                  />
+                )}
+                {'  '}
+                {deviceConfig?.locale && deviceConfig?.locale !== ''
+                  ? `${deviceConfig.locale} - `
+                  : 'Unknown'}
+                {getCountryFromLocale(deviceConfig?.locale ?? '')}
+              </CCol>
+              <CCol lg="2" xl="1" xxl="1">
+                <CLabel>{t('common.modified')}: </CLabel>
+              </CCol>
+              <CCol lg="2" xl="3" xxl="3">
+                {prettyDate(deviceConfig?.modified)}
+              </CCol>
               <CCol className="border-left" lg="2" xl="1" xxl="1">
                 <CLabel>{t('configuration.location')}:</CLabel>
               </CCol>

src/utils/countries.js

@@ -0,0 +1,253 @@
+export const COUNTRY_LIST = [
+  { value: 'US', label: 'United States' },
+  { value: 'CA', label: 'Canada' },
+  { value: 'AF', label: 'Afghanistan' },
+  { value: 'AX', label: 'Aland Islands' },
+  { value: 'AL', label: 'Albania' },
+  { value: 'DZ', label: 'Algeria' },
+  { value: 'AS', label: 'American Samoa' },
+  { value: 'AD', label: 'Andorra' },
+  { value: 'AO', label: 'Angola' },
+  { value: 'AI', label: 'Anguilla' },
+  { value: 'AQ', label: 'Antarctica' },
+  { value: 'AG', label: 'Antigua And Barbuda' },
+  { value: 'AR', label: 'Argentina' },
+  { value: 'AM', label: 'Armenia' },
+  { value: 'AN', label: 'Netherlands Antilles' },
+  { value: 'AW', label: 'Aruba' },
+  { value: 'AU', label: 'Australia' },
+  { value: 'AT', label: 'Austria' },
+  { value: 'AZ', label: 'Azerbaijan' },
+  { value: 'BS', label: 'Bahamas' },
+  { value: 'BH', label: 'Bahrain' },
+  { value: 'BD', label: 'Bangladesh' },
+  { value: 'BB', label: 'Barbados' },
+  { value: 'BY', label: 'Belarus' },
+  { value: 'BE', label: 'Belgium' },
+  { value: 'BZ', label: 'Belize' },
+  { value: 'BJ', label: 'Benin' },
+  { value: 'BM', label: 'Bermuda' },
+  { value: 'BT', label: 'Bhutan' },
+  { value: 'BO', label: 'Bolivia' },
+  { value: 'BA', label: 'Bosnia And Herzegovina' },
+  { value: 'BW', label: 'Botswana' },
+  { value: 'BV', label: 'Bouvet Island' },
+  { value: 'BR', label: 'Brazil' },
+  { value: 'IO', label: 'British Indian Ocean Territory' },
+  { value: 'BN', label: 'Brunei Darussalam' },
+  { value: 'BG', label: 'Bulgaria' },
+  { value: 'BF', label: 'Burkina Faso' },
+  { value: 'BI', label: 'Burundi' },
+  { value: 'KH', label: 'Cambodia' },
+  { value: 'CM', label: 'Cameroon' },
+  { value: 'CA', label: 'Canada' },
+  { value: 'CV', label: 'Cape Verde' },
+  { value: 'KY', label: 'Cayman Islands' },
+  { value: 'CF', label: 'Central African Republic' },
+  { value: 'TD', label: 'Chad' },
+  { value: 'CL', label: 'Chile' },
+  { value: 'CN', label: 'China' },
+  { value: 'CX', label: 'Christmas Island' },
+  { value: 'CC', label: 'Cocos (Keeling) Islands' },
+  { value: 'CO', label: 'Colombia' },
+  { value: 'KM', label: 'Comoros' },
+  { value: 'CG', label: 'Congo' },
+  { value: 'CD', label: 'Congo, Democratic Republic' },
+  { value: 'CK', label: 'Cook Islands' },
+  { value: 'CR', label: 'Costa Rica' },
+  { value: 'CI', label: "Cote D'Ivoire" },
+  { value: 'HR', label: 'Croatia' },
+  { value: 'CU', label: 'Cuba' },
+  { value: 'CY', label: 'Cyprus' },
+  { value: 'CZ', label: 'Czech Republic' },
+  { value: 'DK', label: 'Denmark' },
+  { value: 'DJ', label: 'Djibouti' },
+  { value: 'DM', label: 'Dominica' },
+  { value: 'DO', label: 'Dominican Republic' },
+  { value: 'EC', label: 'Ecuador' },
+  { value: 'EG', label: 'Egypt' },
+  { value: 'SV', label: 'El Salvador' },
+  { value: 'GQ', label: 'Equatorial Guinea' },
+  { value: 'ER', label: 'Eritrea' },
+  { value: 'EE', label: 'Estonia' },
+  { value: 'ET', label: 'Ethiopia' },
+  { value: 'FK', label: 'Falkland Islands (Malvinas)' },
+  { value: 'FO', label: 'Faroe Islands' },
+  { value: 'FJ', label: 'Fiji' },
+  { value: 'FI', label: 'Finland' },
+  { value: 'FR', label: 'France' },
+  { value: 'GF', label: 'French Guiana' },
+  { value: 'PF', label: 'French Polynesia' },
+  { value: 'TF', label: 'French Southern Territories' },
+  { value: 'GA', label: 'Gabon' },
+  { value: 'GM', label: 'Gambia' },
+  { value: 'GE', label: 'Georgia' },
+  { value: 'DE', label: 'Germany' },
+  { value: 'GH', label: 'Ghana' },
+  { value: 'GI', label: 'Gibraltar' },
+  { value: 'GR', label: 'Greece' },
+  { value: 'GL', label: 'Greenland' },
+  { value: 'GD', label: 'Grenada' },
+  { value: 'GP', label: 'Guadeloupe' },
+  { value: 'GU', label: 'Guam' },
+  { value: 'GT', label: 'Guatemala' },
+  { value: 'GG', label: 'Guernsey' },
+  { value: 'GN', label: 'Guinea' },
+  { value: 'GW', label: 'Guinea-Bissau' },
+  { value: 'GY', label: 'Guyana' },
+  { value: 'HT', label: 'Haiti' },
+  { value: 'HM', label: 'Heard Island & Mcdonald Islands' },
+  { value: 'VA', label: 'Holy See (Vatican City State)' },
+  { value: 'HN', label: 'Honduras' },
+  { value: 'HK', label: 'Hong Kong' },
+  { value: 'HU', label: 'Hungary' },
+  { value: 'IS', label: 'Iceland' },
+  { value: 'IN', label: 'India' },
+  { value: 'ID', label: 'Indonesia' },
+  { value: 'IR', label: 'Iran, Islamic Republic Of' },
+  { value: 'IQ', label: 'Iraq' },
+  { value: 'IE', label: 'Ireland' },
+  { value: 'IM', label: 'Isle Of Man' },
+  { value: 'IL', label: 'Israel' },
+  { value: 'IT', label: 'Italy' },
+  { value: 'JM', label: 'Jamaica' },
+  { value: 'JP', label: 'Japan' },
+  { value: 'JE', label: 'Jersey' },
+  { value: 'JO', label: 'Jordan' },
+  { value: 'KZ', label: 'Kazakhstan' },
+  { value: 'KE', label: 'Kenya' },
+  { value: 'KI', label: 'Kiribati' },
+  { value: 'KR', label: 'Korea' },
+  { value: 'KW', label: 'Kuwait' },
+  { value: 'KG', label: 'Kyrgyzstan' },
+  { value: 'LA', label: "Lao People's Democratic Republic" },
+  { value: 'LV', label: 'Latvia' },
+  { value: 'LB', label: 'Lebanon' },
+  { value: 'LS', label: 'Lesotho' },
+  { value: 'LR', label: 'Liberia' },
+  { value: 'LY', label: 'Libyan Arab Jamahiriya' },
+  { value: 'LI', label: 'Liechtenstein' },
+  { value: 'LT', label: 'Lithuania' },
+  { value: 'LU', label: 'Luxembourg' },
+  { value: 'MO', label: 'Macao' },
+  { value: 'MK', label: 'Macedonia' },
+  { value: 'MG', label: 'Madagascar' },
+  { value: 'MW', label: 'Malawi' },
+  { value: 'MY', label: 'Malaysia' },
+  { value: 'MV', label: 'Maldives' },
+  { value: 'ML', label: 'Mali' },
+  { value: 'MT', label: 'Malta' },
+  { value: 'MH', label: 'Marshall Islands' },
+  { value: 'MQ', label: 'Martinique' },
+  { value: 'MR', label: 'Mauritania' },
+  { value: 'MU', label: 'Mauritius' },
+  { value: 'YT', label: 'Mayotte' },
+  { value: 'MX', label: 'Mexico' },
+  { value: 'FM', label: 'Micronesia, Federated States Of' },
+  { value: 'MD', label: 'Moldova' },
+  { value: 'MC', label: 'Monaco' },
+  { value: 'MN', label: 'Mongolia' },
+  { value: 'ME', label: 'Montenegro' },
+  { value: 'MS', label: 'Montserrat' },
+  { value: 'MA', label: 'Morocco' },
+  { value: 'MZ', label: 'Mozambique' },
+  { value: 'MM', label: 'Myanmar' },
+  { value: 'NA', label: 'Namibia' },
+  { value: 'NR', label: 'Nauru' },
+  { value: 'NP', label: 'Nepal' },
+  { value: 'NL', label: 'Netherlands' },
+  { value: 'AN', label: 'Netherlands Antilles' },
+  { value: 'NC', label: 'New Caledonia' },
+  { value: 'NZ', label: 'New Zealand' },
+  { value: 'NI', label: 'Nicaragua' },
+  { value: 'NE', label: 'Niger' },
+  { value: 'NG', label: 'Nigeria' },
+  { value: 'NU', label: 'Niue' },
+  { value: 'NF', label: 'Norfolk Island' },
+  { value: 'MP', label: 'Northern Mariana Islands' },
+  { value: 'NO', label: 'Norway' },
+  { value: 'OM', label: 'Oman' },
+  { value: 'PK', label: 'Pakistan' },
+  { value: 'PW', label: 'Palau' },
+  { value: 'PS', label: 'Palestinian Territory, Occupied' },
+  { value: 'PA', label: 'Panama' },
+  { value: 'PG', label: 'Papua New Guinea' },
+  { value: 'PY', label: 'Paraguay' },
+  { value: 'PE', label: 'Peru' },
+  { value: 'PH', label: 'Philippines' },
+  { value: 'PN', label: 'Pitcairn' },
+  { value: 'PL', label: 'Poland' },
+  { value: 'PT', label: 'Portugal' },
+  { value: 'PR', label: 'Puerto Rico' },
+  { value: 'QA', label: 'Qatar' },
+  { value: 'RE', label: 'Reunion' },
+  { value: 'RO', label: 'Romania' },
+  { value: 'RU', label: 'Russian Federation' },
+  { value: 'RW', label: 'Rwanda' },
+  { value: 'BL', label: 'Saint Barthelemy' },
+  { value: 'SH', label: 'Saint Helena' },
+  { value: 'KN', label: 'Saint Kitts And Nevis' },
+  { value: 'LC', label: 'Saint Lucia' },
+  { value: 'MF', label: 'Saint Martin' },
+  { value: 'PM', label: 'Saint Pierre And Miquelon' },
+  { value: 'VC', label: 'Saint Vincent And Grenadines' },
+  { value: 'WS', label: 'Samoa' },
+  { value: 'SM', label: 'San Marino' },
+  { value: 'ST', label: 'Sao Tome And Principe' },
+  { value: 'SA', label: 'Saudi Arabia' },
+  { value: 'SN', label: 'Senegal' },
+  { value: 'RS', label: 'Serbia' },
+  { value: 'SC', label: 'Seychelles' },
+  { value: 'SL', label: 'Sierra Leone' },
+  { value: 'SG', label: 'Singapore' },
+  { value: 'SK', label: 'Slovakia' },
+  { value: 'SI', label: 'Slovenia' },
+  { value: 'SB', label: 'Solomon Islands' },
+  { value: 'SO', label: 'Somalia' },
+  { value: 'ZA', label: 'South Africa' },
+  { value: 'GS', label: 'South Georgia And Sandwich Isl.' },
+  { value: 'ES', label: 'Spain' },
+  { value: 'LK', label: 'Sri Lanka' },
+  { value: 'SD', label: 'Sudan' },
+  { value: 'SR', label: 'Surilabel' },
+  { value: 'SJ', label: 'Svalbard And Jan Mayen' },
+  { value: 'SZ', label: 'Swaziland' },
+  { value: 'SE', label: 'Sweden' },
+  { value: 'CH', label: 'Switzerland' },
+  { value: 'SY', label: 'Syrian Arab Republic' },
+  { value: 'TW', label: 'Taiwan' },
+  { value: 'TJ', label: 'Tajikistan' },
+  { value: 'TZ', label: 'Tanzania' },
+  { value: 'TH', label: 'Thailand' },
+  { value: 'TL', label: 'Timor-Leste' },
+  { value: 'TG', label: 'Togo' },
+  { value: 'TK', label: 'Tokelau' },
+  { value: 'TO', label: 'Tonga' },
+  { value: 'TT', label: 'Trinidad And Tobago' },
+  { value: 'TN', label: 'Tunisia' },
+  { value: 'TR', label: 'Turkey' },
+  { value: 'TM', label: 'Turkmenistan' },
+  { value: 'TC', label: 'Turks And Caicos Islands' },
+  { value: 'TV', label: 'Tuvalu' },
+  { value: 'UG', label: 'Uganda' },
+  { value: 'UA', label: 'Ukraine' },
+  { value: 'AE', label: 'United Arab Emirates' },
+  { value: 'GB', label: 'United Kingdom' },
+  { value: 'US', label: 'United States' },
+  { value: 'UM', label: 'United States Outlying Islands' },
+  { value: 'UY', label: 'Uruguay' },
+  { value: 'UZ', label: 'Uzbekistan' },
+  { value: 'VU', label: 'Vanuatu' },
+  { value: 'VE', label: 'Venezuela' },
+  { value: 'VN', label: 'Viet Nam' },
+  { value: 'VG', label: 'Virgin Islands, British' },
+  { value: 'VI', label: 'Virgin Islands, U.S.' },
+  { value: 'WF', label: 'Wallis And Futuna' },
+  { value: 'EH', label: 'Western Sahara' },
+  { value: 'YE', label: 'Yemen' },
+  { value: 'ZM', label: 'Zambia' },
+  { value: 'ZW', label: 'Zimbabwe' },
+];
+
+export const getCountryFromLocale = (locale) =>
+  COUNTRY_LIST.find((country) => country.value === locale)?.label ?? '';