Mobile app (#3)

* Initial Capacitor Config and plugins

* Add Android project files and resources

* Add local notification scheduling for chores

* Add NotificationAccessSnackbar component for handling notification preferences

* Add capacitor-preferences to Android project

* Update notification Snackbar

* Add local notification scheduling for chores

* Add ionic.config.json file for custom project configuration

* chore: Add environment variables for production deployment

* Add Support for IOS, pass notificaiton token(push notifications)

* Add Capacitor Device support and refactor notification handling

* Refactor GoogleAuth client IDs to use environment variables

* Remove google-services.json to enhance security by eliminating sensitive data from the repository

* Remove environment files to enhance security by eliminating sensitive data from the repository

* Rename project from fe-template to Donetick in ionic.config.json

* Remove GoogleService-Info.plist and Info.plist to enhance security by eliminating sensitive data from the repository

---------

Co-authored-by: Mo Tarbin <mohamad@Mos-MacBook-Pro.local>

src/views/Chores/NotificationAccessSnackbar.jsx

@@ -0,0 +1,87 @@
+import { Capacitor } from '@capacitor/core';
+import { Button, Snackbar, Stack, Typography } from '@mui/joy' 
+import { Preferences } from '@capacitor/preferences';
+import { LocalNotifications } from '@capacitor/local-notifications';
+
+import {React, useEffect, useState} from 'react';
+
+const NotificationAccessSnackbar = () => {
+    
+
+
+    const [open, setOpen] = useState(false);
+
+    if (!Capacitor.isNativePlatform()) {
+        return null;
+    }
+    const getNotificationPreferences = async () => {
+        const ret = await Preferences.get({ key: 'notificationPreferences' });
+        return JSON.parse(ret.value);
+      };
+    
+    useEffect(() => {
+        getNotificationPreferences().then((data) => {
+          // if optOut is true then don't show the snackbar
+          if(data?.optOut === true || data?.granted === true) {
+            return;
+          }
+          setOpen(true);
+        });
+    }
+    , []);
+
+
+
+return (
+
+    <Snackbar
+      // autoHideDuration={5000}
+      variant="solid"
+      color="primary"
+      size="lg"
+      invertedColors
+      open={open}
+      onClose={() => setOpen(false)}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      sx={(theme) => ({
+        background: `linear-gradient(45deg, ${theme.palette.primary[600]} 30%, ${theme.palette.primary[500]} 90%})`,
+        maxWidth: 360,
+      })}
+    >
+      <div>
+        <Typography level="title-lg">Need Notification?</Typography>
+        <Typography sx={{ mt: 1, mb: 2 }}>
+            You need to enable permission to receive notifications, do you want to enable it?
+        </Typography>
+        <Stack direction="row" spacing={1}>
+          <Button variant="solid" color="primary" onClick={() => {
+            const notificationPreferences = { optOut: false };
+            LocalNotifications.requestPermissions().then((resp) => {
+                if (resp.display === 'granted') {
+                    notificationPreferences['granted'] = true; 
+                }
+              })
+              Preferences.set({ key: 'notificationPreferences', value: JSON.stringify(notificationPreferences) });
+              setOpen(false);
+          }}>
+            Yes 
+          </Button>
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => {
+                const notificationPreferences = { optOut: true };
+                Preferences.set({ key: 'notificationPreferences', value: JSON.stringify(notificationPreferences) });
+                setOpen(false);
+            }}
+          >
+            No, Keep it Disabled
+          </Button>
+        </Stack>
+      </div>
+    </Snackbar>
+
+)
+}
+
+export default NotificationAccessSnackbar;