Merge pull request #18 from bandisast/master

Add a delete-account page for compliance, & mini css fixes
plante-app-team · Jan 24, 2024 · c4501d4 · c4501d4
2 parents 3400c10 + b1dd239
commit c4501d4
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 3 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en"> <!-- Note: this might not be compatible with our i18n plugin and might cause problems with screen reading-->
 
 <head>
   <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description"
     content="Plante is vegan app where you can find vegan products in stores all around the world!" />

diff --git a/src/App.js b/src/App.js
@@ -5,6 +5,7 @@ import createHistory from 'history/createBrowserHistory';
 import ReactGA from 'react-ga';
 import Introduction from './components/introduction/Introduction';
 import HelpUs from './components/helpUs/helpUs';
+import DeleteAccount from './components/deleteAccount/deleteAccount'
 
 const history = createHistory()
 ReactGA.initialize('G-1BK09BE5RZ');
@@ -25,6 +26,7 @@ function App() {
           <Switch>
             <Route exact path="/" component={Introduction} />
             <Route exact path="/help-us" component={HelpUs} />
+            <Route exact path="/delete-account" component={DeleteAccount} />
           </Switch>
 
         </div>

diff --git a/src/components/deleteAccount/deleteAccount.js b/src/components/deleteAccount/deleteAccount.js
@@ -0,0 +1,101 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Stack from 'react-bootstrap/Stack';
+import Col from 'react-bootstrap/Col';
+import { useTranslation } from 'react-i18next';
+import classes from './deleteAccount.module.css';
+import { Discord, Facebook, Instagram } from 'react-bootstrap-icons';
+
+
+
+const DeleteAccount = () => {
+    const { t, i18n } = useTranslation();
+
+    return (
+        <div className={classes.background} >
+            <Container className="h-100 d-flex flex-column text-md-start text-center" fluid>
+                <Row className="h-100">
+                    <Col dm={6} className={[classes.leftColumn, classes.marginTop].join(' ')}>
+                        <Row className={classes.informationRow}>
+                            <Col>
+                                <h1 className={classes.planteTitle}>
+                                    {t('landingpage.appTitle')}
+                                </h1>
+                                <h4>
+                                Delete my account
+                                </h4>
+                                <p>
+                                To delete your Plante account, please follow next steps:
+                                </p>
+                                <span>
+                                <ul>
+                                    <li>Open the app on Android</li>
+                                    <li>Open your profile (bottom-right)</li>
+                                    <li>Open App Settings (top-right)</li>
+                                    <li>Click "Help and feedback"</li>
+                                    <li>Click "Delete my account"</li>
+                                    <li>Follow the displayed instructions</li>
+                                </ul>
+                                </span>
+                                <p>
+                                Your account will be deleted immediately.
+                                </p>
+
+                                <p>
+                                Please note that while this action will erase all of your personal information, the products and stores that you have created in the app will not be deleted, since they're stored on the servers of Open Food Facts and Open Street Map projects (without any of your personal information).
+                                </p>
+
+                                <Row className="text-md-start text-center" lg="auto">
+                                    <Col>
+                                        <a target="_blank" rel="noreferrer" href='https://play.google.com/store/apps/details?id=vegancheckteam.plante&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img className={classes.downloadButton} alt='Get it on Google Play' src={process.env.PUBLIC_URL + '/assets/' + i18n.resolvedLanguage + '/google-play-badge.png'} /></a>
+                                    </Col>
+                                    <Col>
+                                        <a href='https://apps.apple.com/us/app/plante/id1574070382' rel="noreferrer" target="_blank"><img className={classes.downloadButton} alt='Download on the App Store' src={process.env.PUBLIC_URL + '/assets/' + i18n.resolvedLanguage + '/apple-app-store-badge.svg'} /></a>
+                                    </Col>
+                                </Row>
+                                <Row>
+                                    <Col className={classes.socialMediaMargin}>
+                                        <Stack gap={2}>
+                                            <Row>
+                                                <Col>
+                                                    <h5 className={classes.socialMediaTitle}>
+
+                                                    </h5>
+                                                </Col>
+                                            </Row>
+                                            <Row className="text-md-start text-center" lg="auto">
+                                                <Col>
+                                                    <a href="https://www.facebook.com/Plante-Vegan-App-103275182070684" target="_blank" rel="noreferrer">
+                                                        <Facebook className={classes.socialMediaIcon} />
+                                                    </a>
+                                                </Col>
+
+                                                <Col>
+                                                    <a href="https://discord.gg/kXgXrTVpGY" target="_blank" rel="noreferrer">
+                                                        <Discord className={classes.socialMediaIcon} />
+                                                    </a>
+
+                                                </Col>
+                                                <Col>
+                                                    <a href={t('landingpage.instagram')} target="_blank" rel="noreferrer">
+                                                        <Instagram className={classes.socialMediaIcon} />
+                                                    </a>
+                                                </Col>
+                                            </Row>
+                                        </Stack>
+                                    </Col>
+                                </Row>
+                            </Col>
+                        </Row>
+
+                    </Col>
+                    <Col sm={6} className='d-md-block d-none'>
+                    </Col>
+                </Row>
+            </Container>
+        </div>
+    );
+};
+
+export default DeleteAccount;
diff --git a/src/components/deleteAccount/deleteAccount.module.css b/src/components/deleteAccount/deleteAccount.module.css
@@ -0,0 +1,39 @@
+.planteTitle{
+    font-weight: 900;
+}
+
+.marginTop{
+    margin-top: 6rem !important;
+}
+
+.downloadButton {
+    height: 50px;
+    width: auto;
+}
+
+.socialMediaTitle {
+    font-weight: 800;
+    font-size: 50;
+}
+
+.socialMediaIcon{
+    height: 24px;
+    width: 24px;
+    color: #326243;
+}
+
+.socialMediaMargin{
+    margin-top: 3rem !important;
+}
+
+@media screen and (min-width: 640px) {
+    .leftColumn{
+        margin-left: 5rem !important;
+    }
+    .languageRow{
+        min-height: 20%;
+    }
+
+}
+
+
diff --git a/src/components/introduction/Introduction.module.css b/src/components/introduction/Introduction.module.css
@@ -23,6 +23,7 @@
 @media screen and (min-width: 640px) {
     .leftColumn{
         margin-left: 5rem !important;
+        width: 100%;
     }
     .languageRow{
         height: 20%;
@@ -41,6 +42,7 @@
     }
 }
 
+
 .downloadColumn{
     max-width: 185px;
 }

diff --git a/src/components/languageSelector.js b/src/components/languageSelector.js
@@ -22,7 +22,7 @@ const LanguageSelector = () => {
         i18n.changeLanguage(e.target.value)
     }
     return (
-        <ButtonGroup aria-label="Basic example">
+        <ButtonGroup style={{ flexWrap: "wrap", justifyContent: "center", alignItems: "center" }} aria-label="Basic example">
             {
                 Object.entries(languagesTranslation).map(([key, value]) => <Button variant={i18n.resolvedLanguage === key ? 'primary' : "secondary"} className={classes.selectedButton} value={key} onClick={changeLanguageHandler}>{value}</Button>
                 )

diff --git a/src/components/languageSelector.module.css b/src/components/languageSelector.module.css
@@ -1,3 +1,10 @@
 .selectedButton {
     box-shadow: 5px 10px #EBF0EB;
+    width: 15%
 }
+
+@media screen and (max-width: 640px) {
+    .selectedButton {
+    width: 15%;
+    }
+}