336 profile page (#360)

* teardown profile card

* run prettier 🤡

* create edit view for profile

* run prettier

* fixing typo on BENSON's work

* importing JEFFEREY's profile information components

* importing background image

* adding name as header

* putting 2 more profile info components on

* changes to play with

* fix eslint

* fixed the destruring issue

* testing first and last name

* restyling the overall template

* added outside wrapper div for all cards component

* styled the user's name and adjusted its position

* imported the figma button to make an exit button.

* fixing the user data import destrurcturing process

* adjusting grid spacing for the name and the exit button

* making the exit button instead of having a fixed styled figma button

* final adjustments on the EXIT button

* added the calender section, required more editing

* prettier

* added the calender component's inserting space for testing purpose

* made adjustments on the top personal panel. Making grids suit for design

* implemented all contents for both membership and additional details panels

* x

* x

* adjusted spacing for top panel

* added onclick icons for each panel

* prettier

* added description text

* implemented footer

* adjusting button position

* refined spacing for personal panel and spacing in general

* moved up the entire section to the top

* changing button text

* made the sign out function and implemented on the sign out button.

* fixed the name of button

* making mobile version 1 column according to BENSON's comment

* prettier

* spaced the button to make it visible while in mobile version

* fixed the date with a function to convert seconds into the date string.

* made a strip function to strip out the GMT

* using the image instead of the component as bg image

* removing the import for bg image

* making responsive background image component to serve for profile page

* writing up storybook file for the responsive background image

* prettier

* importing the responsive background image component into profile page

* footer absolute bottom

* un did the change on full bg img component

* fixed date

* placing the footer at the very bottom

* fixed the opacity applying problem on all children

* x-justify-end for the button fixing the horizontal scrolling issue.

* prettier

* 284 refresh user id token (#355)

* Allowed StripeService.ts to update products.

* Executed yarn prettier command to fix styling issues

* Documented updateProduct method in StripeService.ts

* Add integration tests for updating products in StripeService

Created integration tests to verify the functionality of the updateProduct method in the StripeService class. The tests ensure that products can be successfully updated with the specified fields. Additionally, mocked Stripe SDK methods for retrieving and updating products to simulate interactions with the Stripe API.

* Executed yarn prettier command to fix styling issues

* Added store action to refresh the current users id token.

This commit adds a new action, refreshUserToken, to handle the automatic refresh of the user's ID token after calling getIdToken. The action ensures that the user's token is always up-to-date, eliminates the need for manual token refresh.

* Documented refreshUserToken in store.ts

* Update membership types, make membership selectable on frontend (#356)

* fix payment flow to allow user selection of price

* remove !

* fix errors not displaying on payment

* regenerate

* only rerender on data, loading and error changes

* 353 react calendar (#359)

* Installed react-calendar package

* Copied react-calendar default styling to overwrite with custom styling

* Imported Calendar components css file, so Storybook can recognize stylesheet

* Styled calendar according to figma

* Fixed disabled-tile styling. Added additional styling.

* Create Calendar component using react-calendar package

* Defined Story's for Calendar components showing different state

* Additional styling

* prettier

* spaced the button to make it visible while in mobile version

* fixed the date with a function to convert seconds into the date string.

* made a strip function to strip out the GMT

* using the image instead of the component as bg image

* removing the import for bg image

* making responsive background image component to serve for profile page

* writing up storybook file for the responsive background image

* prettier

* importing the responsive background image component into profile page

* footer absolute bottom

* un did the change on full bg img component

* fixed date

* placing the footer at the very bottom

* fixed the opacity applying problem on all children

* x-justify-end for the button fixing the horizontal scrolling issue.

* prettier

* x

---------

Co-authored-by: bcho892 <[email protected]>
Co-authored-by: AzizP786 <[email protected]>
Co-authored-by: Benson Cho <[email protected]>
Co-authored-by: Logan <[email protected]>

client/src/components/composite/Profile/ProfileCalendarCard/ProfileCalendarCard.tsx

@@ -0,0 +1,31 @@
+import { Card, Typography, CardContent, Stack, Box } from "@mui/material"
+
+function ProfileCalendarCard() {
+  return (
+    <div>
+      <Card
+        sx={{
+          boxShadow: "0px 8px 44px 0px rgba(0, 0, 0, 0.14)",
+          backgroundColor: "white",
+          borderRadius: "15px"
+        }}
+      >
+        <CardContent sx={{ padding: "36px" }}>
+          <Stack spacing={2}>
+            <Typography
+              variant="h5"
+              align="left"
+              color="#457CC3"
+              sx={{ fontWeight: "900" }}
+            >
+              Calendar
+            </Typography>
+            <Box></Box>
+          </Stack>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default ProfileCalendarCard

client/src/components/composite/Profile/UserInformation/UserInformationDisplay.tsx

@@ -0,0 +1,40 @@
+import Button from "components/generic/FigmaButtons/FigmaButton"
+import { UserAdditionalInfo } from "models/User"
+
+interface IUserInformationDisplay {
+  userData?: UserAdditionalInfo
+  editHandler?: () => void
+}
+
+const UserInformationDisplay = ({
+  userData,
+  editHandler
+}: IUserInformationDisplay) => {
+  if (userData) {
+    const { date_of_birth, ...displayableFields } = userData
+    return (
+      <>
+        <Button variant="default-sm" onClick={editHandler}>
+          Edit
+        </Button>
+        <div>
+          {/* TODO: Properly style and name fields */}
+          {Object.keys(displayableFields).map((key) => {
+            const _key = key as keyof typeof displayableFields
+            return (
+              <>
+                <h5>
+                  {_key}: {displayableFields[_key]}
+                </h5>
+              </>
+            )
+          })}
+          <h5>{new Date(date_of_birth.seconds * 1000).toDateString()}</h5>
+        </div>
+      </>
+    )
+  }
+  return <>No Data found</>
+}
+
+export default UserInformationDisplay

client/src/components/composite/Profile/UserInformation/UserInformationEdit.tsx

@@ -0,0 +1,40 @@
+import Button from "components/generic/FigmaButtons/FigmaButton"
+import TextInput from "components/generic/TextInputComponent/TextInput"
+import { UserAdditionalInfo } from "models/User"
+
+interface IUserInformationEdit {
+  userData?: UserAdditionalInfo
+  saveHandler?: () => void
+}
+
+const UserInformationEdit = ({
+  userData,
+  saveHandler
+}: IUserInformationEdit) => {
+  if (userData) {
+    const { date_of_birth, ...displayableFields } = userData
+    return (
+      <>
+        <Button variant="default-sm" onClick={saveHandler}>
+          Save
+        </Button>
+        <div>
+          {/* TODO: Properly style and name fields */}
+          {Object.keys(displayableFields).map((key) => {
+            const _key = key as keyof typeof displayableFields
+            return (
+              <>
+                <h5>{_key}</h5>
+                <TextInput value={(displayableFields[_key] as string) || ""} />
+              </>
+            )
+          })}
+          <h5>{new Date(date_of_birth.seconds * 1000).toDateString()}</h5>
+        </div>
+      </>
+    )
+  }
+  return <>No Data found</>
+}
+
+export default UserInformationEdit

client/src/components/composite/Profile/UserInformation/UserInformationSection.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react"
+import { useSearchParams } from "react-router-dom"
+import UserInformationEdit from "./UserInformationEdit"
+import UserInformationDisplay from "./UserInformationDisplay"
+import { UserAdditionalInfo } from "models/User"
+
+interface IUserInformationSection {
+  userData?: UserAdditionalInfo
+}
+
+const UserInformationSection = ({ userData }: IUserInformationSection) => {
+  const [searchParams] = useSearchParams()
+  const [isEdit, setIsEdit] = useState<boolean>(!!searchParams.get("edit"))
+
+  return (
+    <>
+      {isEdit ? (
+        <UserInformationEdit
+          saveHandler={() => setIsEdit(false)}
+          userData={userData}
+        />
+      ) : (
+        <UserInformationDisplay
+          editHandler={() => setIsEdit(true)}
+          userData={userData}
+        />
+      )}
+    </>
+  )
+}
+
+export default UserInformationSection