Iago/notif nativas

.env.example

@@ -2,4 +2,4 @@ REACT_APP_CARDAPIO_API_URL=
 REACT_APP_PLANILHA_API_URL=
 REACT_APP_COMUNICADOS_API_URL=
 REACT_APP_ULTIMO_COMUNICADO_API_URL=
-
+REACT_APP_REGISTRO_TOKEN=

package.json

@@ -1,73 +1,74 @@
 {
-  "name": "front",
-  "version": "0.1.0",
-  "private": true,
-  "homepage": "./",
-  "dependencies": {
-    "@fontsource/bebas-neue": "^4.5.9",
-    "@fontsource/nunito": "^4.5.12",
-    "@fontsource/quicksand": "^4.5.12",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^17.0.45",
-    "@types/react": "^18.0.26",
-    "@types/react-datepicker": "^4.15.0",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.26",
-    "copy-to-clipboard": "^3.3.3",
-    "gh-pages": "^4.0.0",
-    "react": "^18.2.0",
-    "react-datepicker": "^4.18.0",
-    "react-dom": "^18.2.0",
-    "react-ga4": "^2.1.0",
-    "react-hook-form": "^7.45.4",
-    "react-router-dom": "^5.3.3",
-    "react-scripts": "5.0.1",
-    "react-toastify": "^9.1.2",
-    "serve": "^14.2.0",
-    "styled-components": "^5.3.6",
-    "typescript": "^4.9.4",
-    "web-vitals": "^2.1.4",
-    "workbox-background-sync": "^6.5.4",
-    "workbox-broadcast-update": "^6.5.4",
-    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-google-analytics": "^6.5.4",
-    "workbox-navigation-preload": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-range-requests": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4",
-    "workbox-streams": "^6.5.4"
-  },
-  "scripts": {
-    "predeploy": "npm run build",
-    "deploy": "gh-pages -d build",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+    "name": "front",
+    "version": "0.1.0",
+    "private": true,
+    "homepage": "./",
+    "dependencies": {
+        "@fontsource/bebas-neue": "^4.5.9",
+        "@fontsource/nunito": "^4.5.12",
+        "@fontsource/quicksand": "^4.5.12",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0",
+        "@types/jest": "^27.5.2",
+        "@types/node": "^17.0.45",
+        "@types/react": "^18.0.26",
+        "@types/react-datepicker": "^4.15.0",
+        "@types/react-dom": "^18.0.10",
+        "@types/react-router-dom": "^5.3.3",
+        "@types/styled-components": "^5.1.26",
+        "copy-to-clipboard": "^3.3.3",
+        "firebase": "^10.10.0",
+        "gh-pages": "^4.0.0",
+        "react": "^18.2.0",
+        "react-datepicker": "^4.18.0",
+        "react-dom": "^18.2.0",
+        "react-ga4": "^2.1.0",
+        "react-hook-form": "^7.45.4",
+        "react-router-dom": "^5.3.4",
+        "react-scripts": "5.0.1",
+        "react-toastify": "^9.1.2",
+        "serve": "^14.2.0",
+        "styled-components": "^5.3.6",
+        "typescript": "^4.9.4",
+        "web-vitals": "^2.1.4",
+        "workbox-background-sync": "^6.5.4",
+        "workbox-broadcast-update": "^6.5.4",
+        "workbox-cacheable-response": "^6.5.4",
+        "workbox-core": "^6.5.4",
+        "workbox-expiration": "^6.5.4",
+        "workbox-google-analytics": "^6.5.4",
+        "workbox-navigation-preload": "^6.5.4",
+        "workbox-precaching": "^6.5.4",
+        "workbox-range-requests": "^6.5.4",
+        "workbox-routing": "^6.5.4",
+        "workbox-strategies": "^6.5.4",
+        "workbox-streams": "^6.5.4"
+    },
+    "scripts": {
+        "predeploy": "npm run build",
+        "deploy": "gh-pages -d build",
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }

public/index.html

@@ -2,19 +2,21 @@
 <html lang="pt-br">
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
     <link rel="icon" type="image/x-icon" href="%PUBLIC_URL%/iconeBandejapp.png">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/iconeBandejapp.png">
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+
     <meta name="theme-color" content="#FD720F" />
     <meta name="description" content="Aplicação Oficial do Restaurante Universitário" />
 
     <!-- IOS -->
     <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Setando a possibilidade de variação das características -->
 
-    <!-- Definição da barra de notificação -->
+    <!-- Definição da barra de notificação no IOS -->
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
 
-    <!-- Definição das telas de inicialização -->
+    <!-- Definição das telas de inicialização do IOS -->
     <link rel="apple-touch-startup-image" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="./splash_screens/iPhone_14_Pro_Max_landscape.png">
     <link rel="apple-touch-startup-image" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="./splash_screens/iPhone_14_Pro_landscape.png">
     <link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="./splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png">
@@ -56,17 +58,10 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>BandejApp</title>
   </head>
+
   <body>
     <div id="root">
 

public/manifest.json

@@ -13,6 +13,8 @@
     "short_name": "BandejApp",
     "description": "Aplicação Oficial do Restaurante Universitário",
 
+    "gcm_sender_id": "1047645357942",
+
     "icons": [
         {
             "src": "./icons/maskable_icon_x48.png",

src/Components/Dia/index.tsx

@@ -10,6 +10,7 @@ type horario = {
         almoco: IPratoProps;
         janta: IPratoProps;
     } | undefined;
+    ru: string | null;
 }
 
 function clean_str(myStr : string | undefined){
@@ -19,7 +20,7 @@ function clean_str(myStr : string | undefined){
     return clean_string;
 }
 
-export default function Dia({hora, cardapio}: horario) {
+export default function Dia({hora, cardapio, ru}: horario) {
     return (
         <DiaDiv>
             <Gluten>
@@ -29,42 +30,54 @@ export default function Dia({hora, cardapio}: horario) {
 
             <Menu style={{display: hora===0? 'flex':'none'}}>
                 <Prato
+                ru={ru}
                 emoji={0}
                 descricao={clean_str(cardapio?.almoco.entrada)}/>
                 <Prato
+                ru={ru}
                 emoji={1}
                 descricao={clean_str(cardapio?.almoco.pratoPrincipal)}/>
                 <Prato
+                ru={ru}
                 emoji={2}
                 descricao={clean_str(cardapio?.almoco.pratoVeg)}/>
                 <Prato
+                ru={ru}
                 emoji={3}
                 descricao={clean_str(cardapio?.almoco.guarnicao)}/>
                 <Prato
+                ru={ru}
                 emoji={4}
                 descricao={clean_str(cardapio?.almoco.acompanhamento)}/>
                 <Prato
+                ru={ru}
                 emoji={5}
                 descricao={clean_str(cardapio?.almoco.sobremesa)}/>
             </Menu>
 
             <Menu style={{display: hora===1? 'flex':'none'}}>
                 <Prato
+                ru={ru}
                 emoji={0}
                 descricao={clean_str(cardapio?.janta.entrada)}/>
                 <Prato
+                ru={ru}
                 emoji={1}
                 descricao={clean_str(cardapio?.janta.pratoPrincipal)}/>
                 <Prato
+                ru={ru}
                 emoji={2}
                 descricao={clean_str(cardapio?.janta.pratoVeg)}/>
                 <Prato
+                ru={ru}
                 emoji={3}
                 descricao={clean_str(cardapio?.janta.guarnicao)}/>
                 <Prato
+                ru={ru}
                 emoji={4}
                 descricao={clean_str(cardapio?.janta.acompanhamento)}/>
                 <Prato
+                ru={ru}
                 emoji={5}
                 descricao={clean_str(cardapio?.janta.sobremesa)}/>
             </Menu>

src/Components/DownPop/index.tsx

@@ -0,0 +1,34 @@
+import { CloseImg, PopText, PopupDiv } from "./style";
+import Download from '../../Assets/Cardapio/download.svg';
+import { useEffect, useState } from "react";
+import Close from '../../Assets/Popup/close.svg';
+
+export default function DownPop() {
+    const [visibility, setVisibility] = useState(false);
+
+    const isIos = () => {
+        const userAgent = window.navigator.userAgent.toLowerCase();
+        return /iphone|ipad|ipod/.test(userAgent);
+    }
+    // Detects if device is in standalone mode
+    const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
+
+    useEffect(() => {
+        if (isIos() && !isInStandaloneMode()) setVisibility(true);
+        else setVisibility(false);
+    }, []);
+
+    return (
+        <PopupDiv style={{ display: (visibility)? 'flex':'none'}}>
+            <PopText>
+                Instale esse aplicativo no seu Iphone: aperte
+                <img width="15" height="15" src={Download} alt="Ícone de download" />
+                e depois Adicionar à tela inicial.
+            </PopText>
+
+            <CloseImg id="closeButton" src={Close} alt="Ícone para fechar"
+                onClick={() => setVisibility(false)}
+            />
+        </PopupDiv>
+    );
+}

src/Components/PopUpIOS/style.tsx → src/Components/DownPop/style.tsx

@@ -2,14 +2,18 @@ import styled from "styled-components";
 import { global } from "../../globalStyle";
 
 export const PopupDiv = styled.div `
-    display: flex;
+    display: none;
     width: 90%;
+
     position: fixed;
-    bottom: 0;
-    margin-bottom: 10px;
+    bottom: 10px;
+    left: 5%;
+    z-index: 2;
+
     border-radius: 3.5vw;
     background: ${global.colors.laranja};
     font-family: ${global.fonts.nunito};
+
     &:after {
         content: "";
         position: absolute;

src/Components/DropDown/index.tsx

@@ -49,7 +49,7 @@ export default function DropDown(
 
         if (containerSelecionado && elementoPrimeiraOpcao && seta)
         containerSelecionado.insertBefore(elementoPrimeiraOpcao, seta);
-    }, [])
+    }, [opcaoInicial])
 
 
     const arruma = () => {

src/Components/Global/index.tsx

@@ -1,16 +1,27 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import { BlurDiv, PopOuterDiv } from "./style";
 import { PopupContext } from "../../Contexts/PopupContext";
 
+import DownPop from "../DownPop";
+import { useLocation } from "react-router-dom";
+
 export default function GlobalComponents() {
 
-    const {mostrarPopup} = useContext(PopupContext);
+    const { mostrarPopup } = useContext(PopupContext);
+    const { pathname } = useLocation();
+
+    mostrarPopup();
+    useEffect(() => {
+        document.getElementById('BlurDiv')?.setAttribute('style', 'display: none;');
+    }, [pathname]);
 
     return (
-        <>
+        <div>
             <BlurDiv id="BlurDiv"/>
 
-            <PopOuterDiv id="popOuter" onClick={() => mostrarPopup('')}/>
-        </>
+            <PopOuterDiv id="popOuter" onClick={() => mostrarPopup()}/>
+
+            <DownPop/>
+        </div>
     );
 }