@openeventkit/event-site 2.0.125-beta.1 → 2.0.125

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.125-beta.1",
+  "version": "2.0.125",
   "author": "Tipit LLC",
   "dependencies": {
+    "@emotion/cache": "^11.13.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/react": "^3.0.1",
     "@mdx-js/runtime": "^1.6.22",
     "@mui/base": "^5.0.0-beta.40",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/system": "^5.16.7",
     "@mux/mux-player-react": "^1.14.1",
     "@ncwidgets/file-relation": "^0.8.0",
     "@ncwidgets/id": "^0.8.1",
@@ -21,14 +25,14 @@
     "@sentry/integrations": "^7.39.0",
     "@sentry/react": "^7.39.0",
     "@sentry/webpack-plugin": "^1.20.0",
-    "@supabase/supabase-js": "^1.35.6",
+    "@supabase/supabase-js": "2.45.1",
     "@types/googlemaps": "^3.39.9",
     "@types/markerclustererplus": "^2.1.33",
     "@types/react": "^16.9.42",
     "@vimeo/player": "^2.16.3",
     "ably": "^1.2.34",
     "assert": "^2.1.0",
-    "attendee-to-attendee-widget": "3.1.0",
+    "attendee-to-attendee-widget": "3.1.1-beta.32",
     "autoprefixer": "10.4.14",
     "awesome-bootstrap-checkbox": "^1.0.1",
     "axios": "^0.19.2",

package/src/components/AttendeeToAttendeeWidgetComponent.js

@@ -59,7 +59,13 @@ const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
     linked_in_profile,
     twitter_name,
     wechat_user,
-    public_profile_show_fullname } = idpProfile || {};
+    public_profile_show_fullname,
+    public_profile_show_email,
+    public_profile_allow_chat_with_me,
+    public_profile_show_photo,
+    public_profile_show_social_media_info,
+    public_profile_show_bio
+  } = idpProfile || {};
 
   useEffect(() => {
     if (!user || !userProfile || !idpProfile) return;
@@ -127,6 +133,12 @@ const AttendeesWidgetComponent = ({ user, event, chatSettings }) => {
           .flatMap((st) => st.badge.features)
           .filter((v, i, a) => a.map((item) => item.id).indexOf(v.id) === i),
       bio: bio,
+      showEmail: public_profile_show_email === true,
+      allowChatWithMe: public_profile_allow_chat_with_me === true,
+      showFullName: public_profile_show_fullname === true,
+      showProfilePic: public_profile_show_photo === true,
+      showSocialInfo: public_profile_show_social_media_info === true,
+      showBio: public_profile_show_bio === true,
       hasPermission: (permission) => {
         const isAdmin =  groups &&
             groups.map((g) => g.slug).filter((g) => adminGroups.includes(g))
@@ -186,6 +198,20 @@ const mapState = ({ settingState }) => ({
 export const AttendeesWidget = connect(mapState)(AttendeesWidgetComponent);
 
 const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
+  const chatProps = {
+    streamApiKey: getEnvVariable(STREAM_IO_API_KEY),
+    apiBaseUrl: getEnvVariable(IDP_BASE_URL),
+    chatApiBaseUrl: getEnvVariable(CHAT_API_BASE_URL),
+    onAuthError: (err, res) => console.log(err),
+    openDir: "left",
+    activity: null,
+    getAccessToken: async () => {
+      const accessToken = await getAccessToken();
+      //console.log("AttendeesList->getAccessToken", accessToken);
+      return accessToken;
+    },
+  };
+  
   const trackerRef = useRef();
 
   const handleLogout = useCallback(() => {
@@ -237,11 +263,15 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
     wechat_user,
     public_profile_show_fullname,
     public_profile_show_email,
-    public_profile_allow_chat_with_me
+    public_profile_allow_chat_with_me,
+    public_profile_show_photo,
+    public_profile_show_social_media_info,
+    public_profile_show_bio
   } = user.idpProfile;
 
   const widgetProps = {
     user: {
+      id: sub,
       idpUserId: sub,
       fullName: public_profile_show_fullname ? `${given_name} ${family_name}` : `${given_name}`,
       email: email,
@@ -260,11 +290,17 @@ const AccessTracker = ({ user, isLoggedUser, summitPhase, chatSettings }) => {
           .flatMap((st) => st.badge.features)
           .filter((v, i, a) => a.map((item) => item.id).indexOf(v.id) === i),
       bio: bio,
-      showEmail: public_profile_show_email,
-      allowChatWithMe: public_profile_allow_chat_with_me ?? true
+      showEmail: public_profile_show_email === true,
+      allowChatWithMe: public_profile_allow_chat_with_me === true,
+      showFullName: public_profile_show_fullname === true,
+      showProfilePic: public_profile_show_photo === true,
+      showSocialInfo: public_profile_show_social_media_info === true,
+      showBio: public_profile_show_bio === true
     },
     summitId: parseInt(getEnvVariable(SUMMIT_ID)),
-    ...sbAuthProps,
+    keepAliveEnabled: true,
+    ...chatProps,
+    ...sbAuthProps
   };
 
   if (!chatSettings.enabled) return null;

package/src/components/AvatarEditorModal/index.js

@@ -0,0 +1,250 @@
+import React, { useState, useRef, useEffect } from "react";
+import AvatarEditor from "react-avatar-editor";
+import { Box, Typography, Slider, Modal } from "@mui/material";
+import { Button, IconButton } from "../ui";
+import { styled } from "@mui/system";
+import {
+  //Close as CloseIcon,
+  CameraAlt as CameraAltIcon,
+  RotateLeft as RotateLeftIcon,
+  RotateRight as RotateRightIcon,
+} from "@mui/icons-material";
+import { create_UUID } from "@utils/uuidGenerator";
+
+const CustomSlider = styled(Slider)(({ theme }) => ({
+  color: "var(--color-primary)"
+}));
+
+const AvatarEditorModal = ({
+  userProfile,
+  open,
+  changePicture,
+  handleClose
+}) => {
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+
+  const [image, setImage] = useState(userProfile.picture || null);
+  const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
+  const [scale, setScale] = useState(1);
+  const [rotate, setRotate] = useState(0);
+  const [newImage, setNewImage] = useState(false);
+
+  useEffect(() => {
+    setImage(userProfile.picture);
+  }, [userProfile.picture]);
+
+  const handleNewImage = (e) => {
+    setImage(e.target.files[0]);
+    setNewImage(true);
+  };
+
+  const handleScale = (e, newValue) => {
+    setScale(newValue);
+    setNewImage(true);
+  };
+
+  const handlePositionChange = (newPosition) => {
+    setPosition(newPosition);
+    setNewImage(true);
+  };
+
+  const rotateLeft = () => {
+    setRotate((prev) => prev - 22.5);
+    setNewImage(true);
+  };
+
+  const rotateRight = () => {
+    setRotate((prev) => prev + 22.5);
+    setNewImage(true);
+  };
+
+  const handleSave = () => {
+    if (editorRef.current && newImage) {
+      const canvas = editorRef.current.getImage().toDataURL();
+      fetch(canvas)
+        .then((res) => res.blob())
+        .then((blob) => {
+          const file = new File([blob], `${create_UUID()}.png`, { type: blob.type });
+          changePicture(file);
+        });
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="avatar-modal-title"
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <Box
+        sx={{
+          width: { xs: "100%", sm: 400 },
+          bgcolor: "var(--color_background_light)",
+          color: "var(--color_text_dark)",
+          display: "flex",
+          flexDirection: "column",
+          position: "relative",
+          border: "1px solid #dbdbdb"
+        }}
+      >
+        <Box
+          sx={{
+            padding: "7.5px 15px",
+            display: "flex",
+            alignItems: "center",
+            borderBottom: "1px solid #dbdbdb"
+          }}
+        >
+          <Typography
+            id="avatar-modal-title"
+            component="h2"
+            sx={{
+              fontWeight: "bold",
+              color: "var(--color_text_dark)",
+              fontFamily: "var(--font_family)",
+              fontSize: "18px"
+            }}
+          >
+            Edit Profile Picture
+          </Typography>
+          <IconButton
+            onClick={handleClose}
+            sx={{
+              ml: "auto",
+              fontSize: "16px",
+              padding: 0
+            }}
+          >
+            <i className="fa fa-times" />
+          </IconButton>
+        </Box>
+        <Box
+          sx={{
+            padding: "20px",
+            textAlign: "center",
+            position: "relative"
+          }}
+        >
+          <AvatarEditor
+            ref={editorRef}
+            image={image}
+            width={200}
+            height={200}
+            border={50}
+            color={[0, 0, 0, 0.8]}
+            position={position}
+            onPositionChange={handlePositionChange}
+            scale={scale}
+            rotate={rotate}
+          />
+          <IconButton
+            onClick={() => fileInputRef.current.click()}
+            sx={{
+              position: "absolute",
+              top: "79.5%",
+              right: "44%",
+              color: "#fff"
+            }}
+          >
+            <CameraAltIcon fontSize="inherit" />
+          </IconButton>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".jpg,.jpeg,.png"
+            style={{ display: "none" }}
+            onChange={handleNewImage}
+          />
+        </Box>
+        <Box
+          sx={{
+            px: "20px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px"
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: "20px",
+              justifyContent: "center"
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "1.5rem",
+                fontFamily: "var(--font_family)"
+              }
+            }>
+              Zoom
+            </Typography>
+            <CustomSlider
+              value={scale}
+              min={0}
+              max={2}
+              step={0.01}
+              onChange={handleScale}
+              sx={{ flex: 1, mx: 2 }}
+            />
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center"
+            }}
+          >
+            <Typography
+              sx={{
+                fontSize: "1.5rem",
+                fontFamily: "var(--font_family)"
+              }}
+            >
+              Rotate
+            </Typography>
+            <Box
+              sx={{
+                display: "flex",
+                flex: 1,
+                justifyContent: "center",
+                gap: "20px"
+              }}
+            >
+              <IconButton onClick={rotateLeft}>
+                <RotateLeftIcon fontSize="inherit" />
+              </IconButton>
+              <IconButton onClick={rotateRight}>
+                <RotateRightIcon fontSize="inherit" />
+              </IconButton>
+            </Box>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            backgroundColor: "var(--color_background_light)",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "20px",
+            gap: "20px"
+          }}
+        >
+          <Button onClick={handleClose}>
+            Discard
+          </Button>
+          <Button onClick={handleSave} disabled={!newImage}>
+            Update
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default AvatarEditorModal;

package/src/components/Navbar/index.js

@@ -1,13 +1,9 @@
 import * as React from "react";
 import { useMemo } from "react";
 import { connect } from "react-redux";
+import { navigate } from "gatsby";
 import NavbarTemplate from "./template";
 
-import {
-  updateProfile,
-  updateProfilePicture
-} from "../../actions/user-actions";
-
 import { userHasAccessLevel, VirtualAccessLevel } from "@utils/authorizedGroups";
 import { getDefaultLocation } from "@utils/loginUtils";
 
@@ -21,11 +17,8 @@ const Navbar = ({
   summitPhase,
   summit,
   isLoggedUser,
-  idpLoading,
   idpProfile,
   userProfile,
-  updateProfile,
-  updateProfilePicture,
   eventRedirect
 }) => {
 
@@ -105,20 +98,21 @@ const Navbar = ({
            passPageRestriction;
   };
 
+  const handleLogoClick = () => navigate(isLoggedUser ? defaultPath : "/");
+
+  const handleProfileIconClick = () => navigate("/a/profile");
+
   return (
     <NavbarTemplate
-      data={navbarContent.items.filter(showItem)}
+      items={navbarContent.items.filter(showItem)}
       summit={summit}
+      logo={summit?.logo}
+      onLogoClick={handleLogoClick}
       isLoggedUser={isLoggedUser}
-      idpLoading={idpLoading}
       idpProfile={idpProfile}
-      hasVirtualBadge={hasVirtualBadge}
-      updateProfile={updateProfile}
-      updateProfilePicture={updateProfilePicture}
-      defaultPath={defaultPath}
-      logo={summit?.logo}
+      onProfileIconClick={handleProfileIconClick}
     />
-  )
+  );
 };
 
 
@@ -129,17 +123,13 @@ const mapStateToProps = ({
   loggedUserState,
   userState
 }) => ({
-  summitPhase: clockState.summit_phase,
   summit: summitState.summit,
+  summitPhase: clockState.summit_phase,
   isLoggedUser: loggedUserState.isLoggedUser,
   idpProfile: userState.idpProfile,
-  idpLoading: userState.loadingIDP,
   userProfile: userState.userProfile,
   // TODO: move to site settings i/o marketing page settings
   eventRedirect: settingState.marketingPageSettings.eventRedirect
 });
 
-export default connect(mapStateToProps, {
-  updateProfile,
-  updateProfilePicture
-})(Navbar);
+export default connect(mapStateToProps, {})(Navbar);

package/src/components/Navbar/template.js

@@ -1,108 +1,88 @@
 import React, { useState } from "react";
-
 import Link from "../Link";
-import ProfilePopupComponent from "../ProfilePopupComponent";
 import LogoutButton from "../LogoutButton";
 
 import styles from "../../styles/navbar.module.scss";
 
 const NavbarTemplate = ({
-  data,
+  items,
+  logo,
   summit,
   isLoggedUser,
-  idpLoading,
   idpProfile,
-  updateProfile,
-  updateProfilePicture,
-  defaultPath,
-  logo
+  onLogoClick,
+  onProfileIconClick
 }) => {
   const [active, setActive] = useState(false);
-  const [showProfile, setShowProfile] = useState(false);
 
-  const toggleHamburger = () => {
-    // toggle the active boolean in the state
-    setActive(!active);
-  };
+  const toggleHamburger = () => setActive(!active);
+
+  const navBarActiveClass = active ? styles.isActive : "";
+
+  const renderLogo = () => {
+    if (!logo && !summit?.name) return null;
+
+    const logoContent = logo ? <img src={logo} alt={summit?.name || "Logo"} /> : <h4>{summit.name}</h4>;
 
-  const handleTogglePopup = () => {
-    if (showProfile) {
-      document.body.classList.remove("is-clipped");
-    } else {
-      document.body.classList.add("is-clipped");
-    }
-    setShowProfile(!showProfile);
+    return onLogoClick ? (
+      <button className={`link ${styles.navbarItem}`} onClick={onLogoClick}>
+        {logoContent}
+      </button>
+    ) : (
+      <div className={styles.navbarItem}>{logoContent}</div>
+    );
   };
 
-  const navBarActiveClass = active ? styles.isActive : "";
+  const renderProfileIcon = () => {
+    if (!isLoggedUser || !idpProfile?.picture) return null;
 
-  return (
-    <React.Fragment>
-      <nav
-        className={`${styles.navbar}`}
-        role="navigation"
-        aria-label="main navigation"
-      >
-        <div className={styles.navbarBrand}>
-          <Link
-            to={isLoggedUser ? defaultPath : "/"}
-            className={styles.navbarItem}
-          >
-            {logo && <img src={logo} alt={summit.name} />}
-          </Link>
+    const profilePic = (
+      <img alt={idpProfile?.name} className={styles.profilePic} src={idpProfile.picture} />
+    );
 
-          <button
-            className={`link ${styles.navbarBurger} ${styles.burger} ${navBarActiveClass}`}
-            aria-label="menu"
-            aria-expanded="false"
-            data-target="navbar"
-            onClick={() => toggleHamburger()}
-          >
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-          </button>
-        </div>
+    return onProfileIconClick ? (
+      <div className={styles.navbarItem}>
+        <button className="link" onClick={onProfileIconClick}>
+          {profilePic}
+        </button>
+      </div>
+    ) : (
+      <div className={styles.navbarItem}>{profilePic}</div>
+    );
+  };
 
-        <div
-          id="navbar"
-          className={`${styles.navbarMenu} ${navBarActiveClass}`}
+  return (
+    <nav className={styles.navbar} role="navigation" aria-label="main navigation">
+      <div className={styles.navbarBrand}>
+        {renderLogo()}
+        <button
+          className={`link ${styles.navbarBurger} ${styles.burger} ${navBarActiveClass}`}
+          aria-label="menu"
+          aria-expanded="false"
+          data-target="navbar"
+          onClick={toggleHamburger}
         >
-          <div className={styles.navbarStart} />
-          <div className={styles.navbarEnd}>
-            {data.map((item, index) => (
-              <div className={styles.navbarItem} key={index}>
-                <Link to={item.link} className={styles.link}>
-                  <span>{item.title}</span>
-                </Link>
-              </div>
-            ))}
-            {isLoggedUser && (
-              <div className={styles.navbarItem}>
-                <button className="link" onClick={() => handleTogglePopup()}>
-                  <img
-                    alt="profile pic"
-                    className={styles.profilePic}
-                    src={idpProfile?.picture}
-                  />
-                </button>
-                {showProfile && (
-                  <ProfilePopupComponent
-                    userProfile={idpProfile}
-                    showProfile={showProfile}
-                    idpLoading={idpLoading}
-                    changePicture={updateProfilePicture}
-                    changeProfile={updateProfile}
-                    closePopup={() => handleTogglePopup()}
-                  />
-                )}
-              </div>
-            )}
-            <LogoutButton styles={styles} isLoggedUser={isLoggedUser} />
-          </div>
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+          <span aria-hidden="true" />
+        </button>
+      </div>
+
+      <div id="navbar" className={`${styles.navbarMenu} ${navBarActiveClass}`}>
+        <div className={styles.navbarStart} />
+        <div className={styles.navbarEnd}>
+          {items?.map((item, index) => (
+            <div className={styles.navbarItem} key={index}>
+              <Link to={item.link} className={styles.link}>
+                <span>{item.title}</span>
+              </Link>
+            </div>
+          ))}
+          {renderProfileIcon()}
+          <LogoutButton styles={styles} isLoggedUser={isLoggedUser} />
         </div>
-      </nav>
-    </React.Fragment>
+      </div>
+    </nav>
   );
 };
 

package/src/components/ui/Button/index.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Button as BaseButton } from "@mui/base";
+import { styled } from "@mui/system";
+
+const StyledButton = styled(BaseButton)({
+  width: "100%",
+  height: "5.5rem",
+  color: "var(--color_input_text_color)",
+  backgroundColor: "var(--color_input_background_color)",
+  borderColor: "var(--color_input_border_color)",
+  borderStyle: "solid",
+  borderWidth: 1,
+  borderRadius: 4,
+  fontSize: "1.5rem",
+  fontFamily: "var(--font_family)",
+  justifyContent: "center",
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  padding: "calc(0.5em - 1px) 1em",
+  display: "inline-flex",
+  alignItems: "center",
+  lineHeight: 1.5,
+  ":disabled": {
+    opacity: 0.65
+  }
+});
+
+const Button = ({
+  children,
+  ...rest
+}) => {
+  return (
+    <StyledButton 
+      {...rest}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+export default Button;