Merge pull request #917 from eisbuk/feature/single-account-multiple-a…

…thletes

Feature/single account multiple athletes

common/config/rush/repo-state.json

@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "c8781aa0eecdca84acfe762ce15c915e5bf08828",
+  "pnpmShrinkwrapHash": "fad0f80cd56291c19d54901d4bb76389a9449c1a",
   "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
 }

packages/client/src/AppContent.tsx

@@ -25,6 +25,7 @@ import ErrorBoundaryPage from "@/pages/error_boundary";
 import SlotsPage from "@/pages/slots";
 import LoginPage from "@/pages/login";
 import CustomerAreaPage from "@/pages/customer_area";
+import SelectAccount from "@/pages/select_account";
 import AttendancePrintable from "@/pages/attendance_printable";
 import DebugPage from "@/pages/debug";
 import AdminPreferencesPage from "@/pages/admin_preferences";
@@ -111,6 +112,7 @@ const AppContent: React.FC = () => {
         >
           <Redirect to={PrivateRoutes.Athletes} />
         </PrivateRoute>
+        <Route path={Routes.SelectAccount} component={SelectAccount} />
         <Route
           path={`${Routes.CustomerArea}/:secretKey`}
           component={CustomerAreaPage}

packages/client/src/components/atoms/AddToCalendar/AddToCalendar.tsx

@@ -25,7 +25,7 @@ const AddToCalendar: React.FC = () => {
 
   const { t } = useTranslation();
 
-  const { email } = useSelector(getBookingsCustomer) || {};
+  const { email } = useSelector(getBookingsCustomer(secretKey)) || {};
   const hasBookingsForCalendar = useSelector(getHasBookingsForCalendar);
 
   const { open: openModal } = useSendICSModal({ secretKey, email });

packages/client/src/components/auth/LoginRoute.tsx

@@ -2,14 +2,9 @@ import React from "react";
 import { Route, Redirect, RouteProps } from "react-router-dom";
 import { useSelector } from "react-redux";
 
-import { PrivateRoutes, Routes } from "@eisbuk/shared/ui";
+import { PrivateRoutes } from "@eisbuk/shared/ui";
 
-import {
-  getAllSecretKeys,
-  getIsAdmin,
-  getIsAuthEmpty,
-  getIsAuthLoaded,
-} from "@/store/selectors/auth";
+import { getIsAuthEmpty, getIsAuthLoaded } from "@/store/selectors/auth";
 import Loading from "./Loading";
 
 /**
@@ -21,8 +16,6 @@ import Loading from "./Loading";
 const LoginRoute: React.FC<RouteProps> = (props) => {
   const isAuthEmpty = useSelector(getIsAuthEmpty);
   const isAuthLoaded = useSelector(getIsAuthLoaded);
-  const isAdmin = useSelector(getIsAdmin);
-  const [secretKey] = useSelector(getAllSecretKeys) || [];
 
   switch (true) {
     // Loading screen
@@ -31,16 +24,10 @@ const LoginRoute: React.FC<RouteProps> = (props) => {
     // If auth empty, show login/register screen
     case isAuthEmpty:
       return <Route {...props} />;
-    // If admin, redirect to root page (attendance view)
-    case isAdmin:
-      return <Redirect to={PrivateRoutes.Root} />;
-    // If not admin, but has 'secretKey' redirect to customer area
-    case Boolean(secretKey):
-      return <Redirect to={`${Routes.CustomerArea}/${secretKey}`} />;
-    // Default: auth user exists, but is not admin nor is registered (doesn't have a 'secretKey'):
-    // Redirect to self registration form
+    // If auth exists, redirect to the default route
+    // Any further redirect will be handled by the PrivateRoute component there
     default:
-      return <Redirect to={Routes.SelfRegister} />;
+      return <Redirect to={PrivateRoutes.Root} />;
   }
 };
 

packages/client/src/components/auth/PrivateRoute.tsx

@@ -22,7 +22,7 @@ const PrivateRoute: React.FC<RouteProps> = (props) => {
   const isAuthEmpty = useSelector(getIsAuthEmpty);
   const isAdmin = useSelector(getIsAdmin);
   const isAuthLoaded = useSelector(getIsAuthLoaded);
-  const [secretKey] = useSelector(getAllSecretKeys) || [];
+  const secretKeys = useSelector(getAllSecretKeys) || [];
 
   switch (true) {
     // Display loading state until initial auth is loaded
@@ -37,9 +37,16 @@ const PrivateRoute: React.FC<RouteProps> = (props) => {
     case isAuthEmpty:
       return <Redirect to={Routes.Login} />;
 
-    case Boolean(secretKey):
+    // If there's only one secret key, (user is managing only one account) redirect to that account
+    case secretKeys.length === 1:
+      const [secretKey] = secretKeys as string[];
       return <Redirect to={[Routes.CustomerArea, secretKey].join("/")} />;
 
+    // If there are multiple secret keys (user is managing multiple accounts), redirect to account selection page
+    // Note: This is the private route - this should not affect the behaviour of routes like '/customer_area/:secretKey' or '/self_register'
+    case secretKeys.length > 1:
+      return <Redirect to={Routes.SelectAccount} />;
+
     // The auth exists - user exists in firebase auth, but there's no secret
     // key - redirect to complte registration
     default:

packages/client/src/controllers/AthleteAvatar.tsx

@@ -20,6 +20,10 @@ const AthletAvatatController: React.FC<AthleteAvatarMenuProps> = ({
       content={
         <AthleteAvatarMenu
           {...props}
+          onAthleteClick={({ secretKey }) =>
+            history.push(`${Routes.CustomerArea}/${secretKey}`)
+          }
+          onAddAccount={() => history.push(Routes.SelfRegister)}
           onLogout={async () => {
             await signOut(getAuth());
             history.push(Routes.Login);

packages/client/src/controllers/BookingsCountdown/BookingsCountdownContainer.tsx

@@ -23,11 +23,11 @@ interface Props extends React.HTMLAttributes<HTMLElement> {
  * state to the store (for bookings finalisation).
  */
 const BookingsCountdownContainer: React.FC<Props> = (props) => {
-  const currentDate = useSelector(getCalendarDay);
-  const countdownProps = useSelector(getCountdownProps);
-  const isMonthEmpty = useSelector(getMonthEmptyForBooking);
-  const { id: customerId } = useSelector(getBookingsCustomer) || {};
   const secretKey = useSelector(getSecretKey)!;
+  const currentDate = useSelector(getCalendarDay);
+  const countdownProps = useSelector(getCountdownProps(secretKey));
+  const isMonthEmpty = useSelector(getMonthEmptyForBooking(secretKey));
+  const { id: customerId } = useSelector(getBookingsCustomer(secretKey)) || {};
 
   const { openWithProps: openFinalizeBookingsDialog } =
     useFinalizeBooksingsModal();

packages/client/src/controllers/BookingsCountdown/__tests__/BookingsCountdownContainer.test.tsx

@@ -14,7 +14,7 @@ import { updateLocalDocuments } from "@eisbuk/react-redux-firebase-firestore";
 import BookingsCountdownContainer from "../BookingsCountdownContainer";
 
 import { getNewStore } from "@/store/createStore";
-import { changeCalendarDate } from "@/store/actions/appActions";
+import { changeCalendarDate, storeSecretKey } from "@/store/actions/appActions";
 
 import { renderWithRedux } from "@/__testUtils__/wrappers";
 
@@ -60,13 +60,14 @@ describe("BookingsCountdown", () => {
       })
     );
     store.dispatch(changeCalendarDate(month));
+    store.dispatch(storeSecretKey(saul.secretKey));
     // With test state set up, 'finalize' button should be in the screen for
     // provided 'month'
     renderWithRedux(<BookingsCountdownContainer />, store);
     screen.getByText(i18n.t(ActionButton.FinalizeBookings) as string).click();
     const wantModal = {
       component: "FinalizeBookingsDialog",
-      props: { customerId: saul.id, month },
+      props: expect.objectContaining({ customerId: saul.id, month }),
     };
     const mockDispatchCallPayload = mockDispatch.mock.calls[0][0].payload;
     expect(mockDispatchCallPayload.component).toEqual(wantModal.component);

packages/client/src/controllers/PrivacyPolicyToast/PrivacyPolicyToast.tsx

@@ -17,8 +17,8 @@ const PrivacyPolicyToast: React.FC = () => {
 
   const policyParams = useSelector(getPrivacyPolicy);
 
-  const bookingsCustomer = useSelector(getBookingsCustomer) || {};
   const secretKey = useSelector(getSecretKey) || "";
+  const bookingsCustomer = useSelector(getBookingsCustomer(secretKey)) || {};
 
   const policyAccepted = Boolean(bookingsCustomer.privacyPolicyAccepted);
   const isAdmin = useSelector(getIsAdmin);

packages/client/src/pages/customer_area/index.tsx

@@ -11,7 +11,10 @@ import {
   OrgSubCollection,
 } from "@eisbuk/shared";
 import { Routes } from "@eisbuk/shared/ui";
-import { useFirestoreSubscribe } from "@eisbuk/react-redux-firebase-firestore";
+import {
+  useFirestoreSubscribe,
+  useUpdateSubscription,
+} from "@eisbuk/react-redux-firebase-firestore";
 
 import { getOrganization } from "@/lib/getters";
 
@@ -22,14 +25,17 @@ import ProfileView from "./views/Profile";
 import { useDate } from "./hooks";
 import useSecretKey from "@/hooks/useSecretKey";
 
+import Layout from "@/controllers/Layout";
 import PrivacyPolicyToast from "@/controllers/PrivacyPolicyToast";
 import AthleteAvatar from "@/controllers/AthleteAvatar";
 
 import ErrorBoundary from "@/components/atoms/ErrorBoundary";
 
-import Layout from "@/controllers/Layout";
-
-import { getBookingsCustomer } from "@/store/selectors/bookings";
+import {
+  getBookingsCustomer,
+  getOtherBookingsAccounts,
+} from "@/store/selectors/bookings";
+import { getAllSecretKeys } from "@/store/selectors/auth";
 
 enum Views {
   Book = "BookView",
@@ -50,21 +56,48 @@ const viewsLookup = {
 const CustomerArea: React.FC = () => {
   const secretKey = useSecretKey();
 
+  // We're providing a fallback [secretKey] as we have multiple ways of authenticating. If authenticating
+  // using firebase auth, the user will have all of their secret keys in the store (this is the preferred way).
+  // However, user can simply use a booking link (which includes the secret key). For this method, the user doesn't have
+  // to authenticate with firebase auth, no secret keys will be found in auth section of the store and 'getAllSecretKeys' selector
+  // will return 'undefined'
+  const secretKeysInStore = useSelector(getAllSecretKeys);
+  const secretKeys = secretKeysInStore?.length
+    ? secretKeysInStore
+    : [secretKey];
+
   // Subscribe to necessary collections
   useFirestoreSubscribe(getOrganization(), [
     { collection: OrgSubCollection.SlotsByDay },
     { collection: OrgSubCollection.SlotBookingsCounts },
     { collection: Collection.PublicOrgInfo },
-    { collection: OrgSubCollection.Bookings, meta: { secretKey } },
+    {
+      collection: OrgSubCollection.Bookings,
+      meta: { secretKeys },
+    },
     { collection: BookingSubCollection.BookedSlots, meta: { secretKey } },
     { collection: BookingSubCollection.AttendedSlots, meta: { secretKey } },
     { collection: BookingSubCollection.Calendar, meta: { secretKey } },
   ]);
 
+  useUpdateSubscription(
+    { collection: OrgSubCollection.Bookings, meta: { secretKeys } },
+    [secretKeys]
+  );
+  useUpdateSubscription(
+    { collection: BookingSubCollection.BookedSlots, meta: { secretKey } },
+    [secretKey]
+  );
+  useUpdateSubscription(
+    { collection: BookingSubCollection.AttendedSlots, meta: { secretKey } },
+    [secretKey]
+  );
+
   const calendarNavProps = useDate();
 
   // Get customer data necessary for rendering/functionality
-  const userData = useSelector(getBookingsCustomer) || {};
+  const currentAthlete = useSelector(getBookingsCustomer(secretKey)) || {};
+  const otherAccounts = useSelector(getOtherBookingsAccounts(secretKey));
 
   const [view, setView] = useState<keyof typeof viewsLookup>(Views.Book);
   const CustomerView = viewsLookup[view];
@@ -95,14 +128,19 @@ const CustomerArea: React.FC = () => {
     </>
   );
 
-  if (secretKey && userData.deleted) {
+  if (secretKey && currentAthlete.deleted) {
     return <Redirect to={`${Routes.Deleted}/${secretKey}`} />;
   }
 
   return (
     <Layout
       additionalButtons={additionalButtons}
-      userAvatar={<AthleteAvatar currentAthlete={userData} />}
+      userAvatar={
+        <AthleteAvatar
+          currentAthlete={currentAthlete}
+          otherAccounts={otherAccounts}
+        />
+      }
     >
       {view !== "ProfileView" && (
         <CalendarNav

packages/client/src/pages/customer_area/views/Book.tsx

@@ -22,11 +22,12 @@ import { createModal } from "@/features/modal/useModal";
 const BookView: React.FC = () => {
   const { t } = useTranslation();
 
-  const customer = useSelector(getBookingsCustomer);
+  const secretKey = useSelector(getSecretKey) || "";
+  const customer = useSelector(getBookingsCustomer(secretKey));
   const orgEmail = useSelector(getOrgEmail);
-  const daysToRender = useSelector(getSlotsForBooking);
+  const daysToRender = useSelector(getSlotsForBooking(secretKey));
   const date = useSelector(getCalendarDay);
-  const disabled = !useSelector(getIsBookingAllowed(date));
+  const disabled = !useSelector(getIsBookingAllowed(secretKey, date));
 
   const { handleBooking, handleCancellation } = useBooking();
 

packages/client/src/pages/customer_area/views/Calendar.tsx

@@ -28,7 +28,7 @@ const CalendarView: React.FC = () => {
   const currentDate = useSelector(getCalendarDay);
   const secretKey = useSelector(getSecretKey)!;
 
-  const disabled = !useSelector(getIsBookingAllowed(currentDate));
+  const disabled = !useSelector(getIsBookingAllowed(secretKey, currentDate));
 
   const bookedAndAttendedSlots = useSelector(
     getBookedAndAttendedSlotsForCalendar

packages/client/src/pages/customer_area/views/Profile.tsx

@@ -16,7 +16,8 @@ const CalendarView: React.FC = () => {
   const secretKey = useSelector(getSecretKey)!;
   const defaultCountryCode = useSelector(getDefaultCountryCode);
 
-  const customer = useSelector(getBookingsCustomer) || ({} as Customer);
+  const customer =
+    useSelector(getBookingsCustomer(secretKey)) || ({} as Customer);
 
   return (
     <CustomerForm.Profile

packages/client/src/pages/deleted/index.tsx

@@ -58,9 +58,12 @@ const Deleted: React.FC<Props> = ({ backgroundIndex }: Props) => {
 
   const secretKey = useSecretKey();
   useFirestoreSubscribe(getOrganization(), [
-    { collection: OrgSubCollection.Bookings, meta: { secretKey } },
+    {
+      collection: OrgSubCollection.Bookings,
+      meta: { secretKeys: [secretKey] },
+    },
   ]);
-  const customer = useSelector(getBookingsCustomer);
+  const customer = useSelector(getBookingsCustomer(secretKey));
 
   // If customer's not deleted - you shouldn't be here
   // If there's no customer - the customer is either not yet loaded, or not found - both are valid reasons to stick around

packages/client/src/pages/select_account/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+
+import {
+  useFirestoreSubscribe,
+  useUpdateSubscription,
+} from "@eisbuk/react-redux-firebase-firestore";
+import { OrgSubCollection } from "@eisbuk/shared";
+import { Routes } from "@eisbuk/shared/ui";
+import { LayoutContent } from "@eisbuk/ui";
+
+import Layout from "@/controllers/Layout";
+
+import ErrorBoundary from "@/components/atoms/ErrorBoundary";
+
+import { getOrganization } from "@/lib/getters";
+
+import { getAllSecretKeys } from "@/store/selectors/auth";
+import { getOtherBookingsAccounts } from "@/store/selectors/bookings";
+
+const SelectAccount: React.FC = () => {
+  const secretKeys = useSelector(getAllSecretKeys) || [];
+  const accounts = useSelector(getOtherBookingsAccounts(""));
+
+  // Subscribe to necessary collections
+  useFirestoreSubscribe(getOrganization(), [
+    {
+      collection: OrgSubCollection.Bookings,
+      meta: { secretKeys },
+    },
+  ]);
+
+  useUpdateSubscription(
+    { collection: OrgSubCollection.Bookings, meta: { secretKeys } },
+    [secretKeys]
+  );
+
+  return (
+    <Layout>
+      <LayoutContent>
+        <ErrorBoundary resetKeys={[]}>
+          <div className="px-[44px] py-4">
+            <h1 className="mt-20 text-2xl font-normal leading-none text-gray-700 cursor-normal select-none mb-12">
+              Select account
+            </h1>
+            <div className="w-full grid grid-cols-12 gap-5 ">
+              {accounts?.map((account) => (
+                <Link
+                  className="rounded border border-gray-300 py-4 px-8 col-span-3 hover:bg-gray-50 hover:border-gray-700"
+                  to={`${Routes.CustomerArea}/${account.secretKey}`}
+                >
+                  <span className="text-lg text-gray-700">{account.name}</span>
+                  <br />
+                  <span className="text-lg text-gray-700">
+                    {account.surname}
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </ErrorBoundary>
+      </LayoutContent>
+    </Layout>
+  );
+};
+
+export default SelectAccount;