Disable address autofill option

src/Popup/Components/CheckBox.tsx

@@ -1,8 +1,9 @@
+import { ChangeEvent } from 'react'
 import { Label, Checkbox } from 'theme-ui'
 
 interface CheckBoxProps {
   title: string
-  onChange?: () => void
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
   checked?: boolean
 }
 

src/Popup/Pages/AutofillPage/handleAutofillAddress.ts

@@ -0,0 +1,17 @@
+const handleAutofillAddress = (value: boolean) => {
+  console.log(!value)
+  chrome.privacy.services.autofillAddressEnabled.clear({}, () => {
+    chrome.privacy.services.autofillAddressEnabled.set(
+      {
+        value: !value,
+      },
+      () => {
+        chrome.storage.local.set({
+          autofillAddress: value,
+        })
+      }
+    )
+  })
+}
+
+export default handleAutofillAddress

src/Popup/Pages/AutofillPage/index.tsx

@@ -1,5 +1,5 @@
 import { Text } from 'theme-ui'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, ChangeEvent } from 'react'
 import Page from '../../Components/Page'
 import CheckBox from '../../Components/CheckBox'
 // import { autofillData } from '../../../types'
@@ -8,6 +8,7 @@ import TableRow from '../../Components/TableRow'
 import { Button } from 'theme-ui'
 import addresses from '../../../utils/addresses'
 import FooterLink from '../../Components/FooterLink'
+import handleAutofillAddress from './handleAutofillAddress'
 
 interface AutofillPageProps {
   tab: string
@@ -16,6 +17,7 @@ interface AutofillPageProps {
 }
 
 const AutofillPage = ({ tab, autofillData }: AutofillPageProps) => {
+  const [autofillAddress, setAutofillAddress] = useState(false)
   const [country, setCountry] = useState('')
   const [city, setCity] = useState('')
   const [region, setRegion] = useState('')
@@ -24,6 +26,12 @@ const AutofillPage = ({ tab, autofillData }: AutofillPageProps) => {
   const [phone, setPhone] = useState('9057814565')
   // const [configuration, setConfiguration] = useState('default')
 
+  useEffect(() => {
+    chrome.storage.local.get(['autofillAddress'], (storage) => {
+      storage.autofillAddress && setAutofillAddress(storage.autofillAddress)
+    })
+  }, [])
+
   useEffect(() => {
     // chrome.storage.local.get(['configuration', 'autofillData'], (storage) => {
     //   storage.configuration && setConfiguration(storage.configuration)
@@ -103,9 +111,19 @@ const AutofillPage = ({ tab, autofillData }: AutofillPageProps) => {
   //   // }
   // }
 
+  const changeCheckBoxValue = (e: ChangeEvent<HTMLInputElement>) => {
+    console.log(e.target.checked)
+    handleAutofillAddress(e.target.checked)
+    setAutofillAddress(e.target.checked)
+  }
+
   return (
     <Page isCurrentTab={tab === 'autofill'} title={'Autofill'}>
-      <CheckBox title={'Disable Built-In Address Autofill'} />
+      <CheckBox
+        title={'Disable Built-In Address Autofill'}
+        onChange={changeCheckBoxValue}
+        checked={autofillAddress}
+      />
       {/* <CheckBox title={'Automatically Autofill'} /> */}
       <Table>
         <TableRow title="Country" value={country} />