web: allow opting out of marketing emails

apps/web/src/components/toggle/index.js

@@ -17,12 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { showBuyDialog } from "../../common/dialog-controller";
 import Tip from "../tip";
 import { isUserPremium } from "../../hooks/use-is-user-premium";
 import { Flex } from "@theme-ui/components";
 import Switch from "../switch";
+import { Loading } from "../icons";
 
 function Toggle(props) {
   const {
@@ -36,9 +37,16 @@ function Toggle(props) {
     testId,
     disabled
   } = props;
+  const [isLoading, setIsLoading] = useState(false);
   const onClick = useCallback(async () => {
-    if (isUserPremium() || !premium || isToggled) onToggled();
-    else {
+    if (isUserPremium() || !premium || isToggled) {
+      setIsLoading(true);
+      try {
+        await onToggled();
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
       await showBuyDialog();
     }
   }, [onToggled, premium, isToggled]);
@@ -60,7 +68,11 @@ function Toggle(props) {
       }}
     >
       <Tip text={title} tip={isToggled ? onTip : offTip} sx={{ mr: 2 }} />
-      <Switch onClick={disabled ? null : onClick} checked={isToggled} />
+      {isLoading ? (
+        <Loading size={18} />
+      ) : (
+        <Switch onClick={disabled ? null : onClick} checked={isToggled} />
+      )}
     </Flex>
   );
 }

apps/web/src/views/settings.js

@@ -1103,6 +1103,18 @@ function Settings() {
                 }
               />
             </Button>
+            <Toggle
+              title="Marketing emails"
+              onTip="We will send you occasional promotional offers & product updates on your email (sent once every month)."
+              offTip={
+                "You will not receive any promotional offers, product updates, and other marketing emails from us."
+              }
+              onToggled={async () => {
+                await db.user.changeMarketingConsent(!user.marketingConsent);
+                await refreshUser();
+              }}
+              isToggled={user.marketingConsent}
+            />
             <Toggle
               title="Enable telemetry"
               onTip="Usage data & crash reports will be sent to us (no 3rd party involved) for analytics. All data is anonymous as mentioned in our privacy policy."