feat: finished settings page

goat-community · Sep 8, 2023 · 4b5cfc6 · 4b5cfc6
1 parent aa1b4bc
commit 4b5cfc6
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 59 deletions.
diff --git a/apps/goat/app/[lng]/(dashboard)/layout.tsx b/apps/goat/app/[lng]/(dashboard)/layout.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import { DashboardSidebar } from "@/app/[lng]/(dashboard)/DashboardSidebar";
-import { TranslationSwitcher } from "@/app/[lng]/components/TranslationSwitcher";
-// import { useTranslation } from "@/app/i18/client";
 import { makeStyles } from "@/lib/theme";
 import { signOut } from "next-auth/react";
 import { useState, useRef } from "react";
@@ -53,10 +51,6 @@ const DashboardLayout = ({ children, params: { lng } }: DashboardLayoutProps) =>
   );
 
   const items = [
-    {
-      link: "",
-      icon: () => <TranslationSwitcher lng={lng} />,
-    },
     {
       link: "https://google.com",
       icon: () => (

diff --git a/apps/goat/app/[lng]/(dashboard)/settings/settings/Profile.tsx b/apps/goat/app/[lng]/(dashboard)/settings/settings/Profile.tsx
@@ -3,8 +3,9 @@
 import React from "react";
 import { Box } from "@mui/material";
 import { makeStyles } from "@/lib/theme";
-import { Text } from "@p4b/ui/components/theme";
 import { v4 } from "uuid";
+import { TextField, Grid, Button } from "@mui/material";
+import { useTheme } from "@/lib/theme";
 
 interface tempProfileInfoType {
   label: string;
@@ -13,45 +14,66 @@ interface tempProfileInfoType {
 }
 
 const Profile = () => {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
+  const theme = useTheme();
 
   const informatoryData: tempProfileInfoType[] = [
     {
-      label: "First Name: ",
+      label: "First Name",
       value: "User",
       editable: true,
     },
     {
-      label: "Last Name: ",
+      label: "Last Name",
       value: "Costumer",
       editable: true,
     },
     {
-      label: "Email: ",
+      label: "Email",
       value: "user@gmail.com",
       editable: true,
     },
     {
-      label: "Phone Number: ",
+      label: "Phone Number",
       value: "User",
       editable: true,
     },
     {
-      label: "Participant in organizations: ",
+      label: "Country",
+      value: "Germany",
+      editable: true,
+    },
+    {
+      label: "Timezone",
+      value: "(GMT-12:00) International Date Line West",
+      editable: true,
+    },
+    {
+      label: "Participant in organizations",
       value: "LocalMapping, GOAT, Map4Ci...",
       editable: true,
     },
-  ]
+  ];
 
   return (
     <div>
-      {informatoryData.map((infoData)=>(
-        <Box key={v4()} className={classes.infoRow}>
-          <Text typo="body 1" className={classes.label}>{infoData.label}</Text>
-          <Text typo="body 1">{infoData.value}</Text>
-        </Box>
-      ))}
-      <p style={{textAlign: "center", marginTop: "100px"}}>This data is only temporary</p>
+      <Grid container spacing={2} className={classes.grid}>
+        {informatoryData.map((infoData) => (
+          <Grid key={v4()} item xs={6}>
+            <Box className={classes.infoRow}>
+              <TextField
+                label={infoData.label}
+                className={classes.input}
+                value={infoData.value}
+              />
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+      <Box sx={{margin: `0px ${theme.spacing(3)}px`, marginTop: theme.spacing(2)}}>
+        <Button variant="outlined" color="error" className={classes.button}>Deactivate</Button>
+        <Button variant="contained" color="error" className={cx(classes.deleteButton, classes.button)}>Delete</Button>
+      </Box>
     </div>
   );
 };
@@ -63,8 +85,23 @@ const useStyles = makeStyles({ name: { Profile } })((theme) => ({
   infoRow: {
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(2),
-    margin: `${theme.spacing(3)}px 0px`,
+    gap: theme.spacing(5),
+    margin: `${theme.spacing(3)}px ${theme.spacing(3)}px`,
+  },
+  input: {
+    width: "100%",
+  },
+  grid: {
+    // gap: "20px"
+  },
+  deleteButton: {
+    color: theme.colors.palette.light.main,
+  },
+  button: {
+    display: "block",
+    width: "100%",
+    padding: "14px",
+    margin: `${theme.spacing(3)}px 0px`
   }
 }));
 

diff --git a/apps/goat/app/[lng]/(dashboard)/settings/subscription/page.tsx b/apps/goat/app/[lng]/(dashboard)/settings/subscription/page.tsx
@@ -10,8 +10,8 @@ import Banner from "@p4b/ui/components/Surfaces/Banner";
 import { Button, Text } from "@p4b/ui/components/theme";
 
 import SubscriptionStatusCard from "./SubscriptionStatusCard";
-import type {ISubscriptionStatusCardDataType} from "@/types/dashboard/subscription";
-import type {ISubscriptionCard} from "@/types/dashboard/subscription";
+import type { ISubscriptionStatusCardDataType } from "@/types/dashboard/subscription";
+import type { ISubscriptionCard } from "@/types/dashboard/subscription";
 
 const Subscription = () => {
   const { classes } = useStyles();
@@ -20,24 +20,33 @@ const Subscription = () => {
     return axios(url).then((res) => res.data);
   };
 
-  const { data, error, isLoading } = useSWR("/api/dashboard/subscription", UsersFetcher);
+  const { data, error, isLoading } = useSWR(
+    "/api/dashboard/subscription",
+    UsersFetcher,
+  );
 
   function getSubscriptionDetails(datas: ISubscriptionCard[]) {
-    const visualData: ISubscriptionStatusCardDataType[] = datas.map((data) => ({
-      icon: data.icon,
-      title: data.title,
-      listItems: data.listItems.map((item: string) => (
-        <Text typo="body 2" key={v4()}>
-          {item}
-        </Text>
-      )),
-      action: (
-        <Button className={classes.button} variant="primary">
-          Add seats
-        </Button>
-      ),
-    }));
-    return visualData;
+    if (datas) {
+      const visualData: ISubscriptionStatusCardDataType[] = datas.map(
+        (data) => ({
+          icon: data.icon,
+          title: data.title,
+          listItems: data.listItems.map((item: string) => (
+            <Text typo="body 2" key={v4()}>
+              {item}
+            </Text>
+          )),
+          action: (
+            <Button className={classes.button} variant="primary">
+              Add seats
+            </Button>
+          ),
+        }),
+      );
+      return visualData;
+    } else {
+      return [];
+    }
   }
 
   function beforeLoadedMessage() {
@@ -59,16 +68,20 @@ const Subscription = () => {
   return (
     <div>
       {!isLoading && !error
-        ? [...getSubscriptionDetails([data.subscription]), ...getSubscriptionDetails(data.extensions)].map(
-            (extension) => <SubscriptionStatusCard sectionData={extension} key={v4()} />
-          )
+        ? [
+            ...getSubscriptionDetails([data.subscription]),
+            ...getSubscriptionDetails(data.extensions),
+          ].map((extension) => (
+            <SubscriptionStatusCard sectionData={extension} key={v4()} />
+          ))
         : beforeLoadedMessage()}
       <Banner
         actions={<Button>Subscribe Now</Button>}
         content={
           <Text className={classes.bannerText} typo="body 1">
-            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
-            massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.{" "}
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+            penatibus et magnis dis parturient montes, nascetur ridiculus mus.{" "}
           </Text>
         }
         image="https://s3-alpha-sig.figma.com/img/630a/ef8f/d732bcd1f3ef5d6fe31bc6f94ddfbca8?Expires=1687132800&Signature=aJvQ22UUlmvNjDlrgzV6MjJK~YgohUyT9mh8onGD-HhU5yMI0~ThWZUGVn562ihhRYqlyiR5Rskno84OseNhAN21WqKNOZnAS0TyT3SSUP4t4AZJOmeuwsl2EcgElMzcE0~Qx2X~LWxor1emexxTlWntivbnUeS6qv1DIPwCferjYIwWsiNqTm7whk78HUD1-26spqW3AXVbTtwqz3B8q791QigocHaK9b4f-Ulrk3lsmp8BryHprwgetHlToFNlYYR-SqPFrEeOKNQuEDKH0QzgGv3TX7EfBNL0kgP3Crued~JNth-lIEPCjlDRnFQyNpSiLQtf9r2tH9xIsKA~XQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"

diff --git a/apps/goat/app/api/dashboard/subscription/route.ts b/apps/goat/app/api/dashboard/subscription/route.ts
@@ -4,6 +4,6 @@ import { NextResponse } from "next/server";
 export async function GET() {
   return NextResponse.json({
     subscription: dummySubscription,
-    extensions: extensionSubscriptions,
+     extensionSubscriptions,
   });
 }
diff --git a/apps/goat/components/settings/organization/UserInfoModal.tsx b/apps/goat/components/settings/organization/UserInfoModal.tsx
@@ -23,7 +23,6 @@ const UserInfoModal = (props: UserInfoModal) => {
     {
       id: string;
       extension: string;
-      studyarea: string;
       maxPlaces: number;
       checked: boolean;
       placesLeft: number;
@@ -32,7 +31,6 @@ const UserInfoModal = (props: UserInfoModal) => {
     {
       id: "1",
       extension: "Active mobility",
-      studyarea: "Greater Munich",
       maxPlaces: 3,
       placesLeft: 1,
       // available: "1 of 3 seats available",
@@ -41,23 +39,27 @@ const UserInfoModal = (props: UserInfoModal) => {
     {
       id: "2",
       extension: "Motorised mobility",
-      studyarea: "Greater Munich",
       maxPlaces: 3,
       placesLeft: 0,
       checked: false,
     },
     {
       id: "3",
-      extension: "Active mobility",
-      studyarea: "Berlin",
+      extension: "Healthcare POIs",
       maxPlaces: 3,
       placesLeft: 2,
       checked: false,
     },
     {
       id: "4",
-      extension: "Active mobility",
-      studyarea: "London",
+      extension: "Transport POIs",
+      maxPlaces: 3,
+      placesLeft: 3,
+      checked: false,
+    },
+    {
+      id: "5",
+      extension: "Live traffic data",
       maxPlaces: 3,
       placesLeft: 3,
       checked: false,
@@ -186,7 +188,7 @@ const UserInfoModal = (props: UserInfoModal) => {
                   disabled={!extension.placesLeft && !extension.checked}
                 />
                 <Text typo="body 1">
-                  {extension.extension} - {extension.studyarea}
+                  {extension.extension}
                 </Text>
                 <Text typo="caption" color="secondary">
                   {extension.placesLeft} of {extension.maxPlaces} seats available

diff --git a/apps/goat/public/assets/data/dashboard.ts b/apps/goat/public/assets/data/dashboard.ts
@@ -54,7 +54,6 @@ export const dummyOrganization: ISubscriptionCard = {
     "Next payment: 23 July 2024",
     "Annual payment cycle: 23 July 2023 - 23 July 2024",
     "2 of 12 editors seat available",
-    "Region: Greater Munich",
   ],
 };
 
@@ -65,7 +64,6 @@ export const dummySubscription: ISubscriptionCard = {
     "Next payment: 23 July 2024",
     "Annual payment cycle: 23 July 2023 - 23 July 2024",
     "2 of 12 editors seat available",
-    "Region: Greater Munich",
   ],
 };
 
@@ -77,7 +75,6 @@ export const extensionSubscriptions: ISubscriptionCard[] = [
       "Next payment: 23 July 2024",
       "Annual payment cycle: 23 July 2023 - 23 July 2024",
       "2 of 12 editors seat available",
-      "Region: Greater Munich",
     ],
   },
   {
@@ -87,7 +84,6 @@ export const extensionSubscriptions: ISubscriptionCard[] = [
       "Next payment: 23 July 2024",
       "Annual payment cycle: 23 July 2023 - 23 July 2024",
       "2 of 12 editors seat available",
-      "Region: Greater Munich",
     ],
   },
 ];