taking office data from the config

scripts/client.build.ts

@@ -51,7 +51,12 @@ function getBuildConfig(): BuildOptions {
             'icon',
             'timezone',
             'country',
+            'address',
+            'coordinates',
             'city',
+            'directions',
+            'workingHours',
+            'workingDays',
             'allowGuestInvitation',
             'allowDeskReservation',
             'allowRoomReservation',

src/client/components/OfficeFloorMap.tsx

@@ -20,7 +20,7 @@ type PointComponentFunctionProps = (
 ) => Element | JSX.Element
 
 const pointCommonStyle =
-  'rounded-sm border-2 -translate-y-1/2 -translate-x-1/2 hover:scale-105 transition-all delay-100 '
+  'rounded border-2 -translate-y-1/2 -translate-x-1/2 hover:scale-105 transition-all delay-100'
 
 const PointComponent: Record<
   VisitType.Visit | VisitType.RoomReservation,
@@ -34,6 +34,7 @@ const PointComponent: Record<
       color={isSelected ? 'purple' : 'default'}
       className={cn(
         pointCommonStyle,
+        ' w-fit',
         isSelected
           ? 'border-pink-600 bg-accents-pink'
           : 'bg-violet-300 border-violet-300',

src/client/components/ui/Map/mapbox/index.ts

@@ -1,4 +1,3 @@
-import { MutableRefObject } from 'react'
 import { UserMapPin } from '../../../../../modules/users/types'
 import {
   Berlin,
@@ -16,7 +15,13 @@ export const dropMarker = (
   mapboxgl: any,
   map: mapboxgl.Map,
   coords: Coordinates | undefined
-) => (coords ? new mapboxgl.Marker().setLngLat(coords).addTo(map) : null)
+) => {
+  if (coords && coords.length == 2) {
+    return new mapboxgl.Marker({ color: '#E6087B' })
+      .setLngLat(coords)
+      .addTo(map)
+  }
+}
 
 export const getMap = (
   mapboxgl: any,

src/client/config.ts

@@ -21,8 +21,13 @@ export type ClientOfficeConfig = Pick<
   | 'name'
   | 'icon'
   | 'timezone'
+  | 'address'
   | 'country'
   | 'city'
+  | 'coordinates'
+  | 'directions'
+  | 'workingHours'
+  | 'workingDays'
   | 'allowGuestInvitation'
   | 'allowDeskReservation'
   | 'allowRoomReservation'

src/modules/about/client/components/AboutPage.tsx

@@ -4,16 +4,17 @@ import {
   Background,
   ComponentWrapper,
   H1,
-  P,
   H2,
-  Icons,
   H3,
 } from '#client/components/ui'
-import { EventType, Map } from '#client/components/ui/Map'
+import { Map } from '#client/components/ui/Map'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { useDocumentTitle, useOffice } from '#client/utils/hooks'
 import { useVisitsAreas } from '#modules/visits/client/queries'
+import { dropMarker } from '#client/components/ui/Map/mapbox'
+import dayjs from 'dayjs'
+import { useMemo } from 'react'
 
 export const AboutPage: React.FC = () => {
   const page = useStore(stores.router)
@@ -23,6 +24,26 @@ export const AboutPage: React.FC = () => {
   const { data: areas = [] } = useVisitsAreas(office?.id || '')
 
   useDocumentTitle(`About ${office?.name}`)
+
+  const onLoad = (mapboxgl: any, map: mapboxgl.Map) =>
+    dropMarker(mapboxgl, map, office?.coordinates)
+  const events = [
+    {
+      name: 'load',
+      action: onLoad,
+    },
+  ]
+
+  const coreHours = useMemo(() => {
+    if (!office || office.workingHours?.length !== 2) {
+      return ''
+    }
+    return `${dayjs(office.workingHours[0], 'HH:mm').format('hA')} - ${dayjs(
+      office.workingHours[1],
+      'HH:mm'
+    ).format('hA')} ${!!office.workingDays ? `, ${office.workingDays}` : ''}`
+  }, [office])
+
   if (!office) {
     return (
       <Background>
@@ -36,6 +57,7 @@ export const AboutPage: React.FC = () => {
       </Background>
     )
   }
+
   return (
     <Background>
       <Header />
@@ -46,36 +68,46 @@ export const AboutPage: React.FC = () => {
 
           <div className="flex flex-col gap-10">
             <Map
-              centerPoint={[13.437433843390053, 52.49346465299907]}
+              centerPoint={office.coordinates}
               zoom={15}
-              events={[]}
+              events={events}
               className={'h-[300px]'}
             />
             <div className="flex flex-col">
               <H2>Address</H2>
               <p>
-                Glogauer Straße 6, Berlin, <br /> Germany Entrance through the
-                courtyard
+                {office.address}, {office?.city}
               </p>
+              {office.directions && office.directions}
             </div>
+
+            {office &&
+              (office.allowDeskReservation || office?.allowRoomReservation) && (
+                <div>
+                  <H2>Available facilities</H2>
+                  <div className="flex gap-2">
+                    <ul className="list-disc list-inside">
+                      {office.allowDeskReservation && <li>desk bookings</li>}
+                      {office.allowRoomReservation && (
+                        <li>meeting room bookings</li>
+                      )}
+                    </ul>
+                  </div>
+                </div>
+              )}
             <div>
-              <H2>Available facilities</H2>
-              <div className="flex gap-2">
-                <Icons.Clock fillClassName="stroke-black" />{' '}
-                <Icons.Cake fillClassName="stroke-black" />{' '}
-                <Icons.Socks fillClassName="stroke-black" />
-                <Icons.Plane />
-              </div>
-            </div>
-            <div>
-              <H2>Opening hours</H2>
-              <p>9am - 6pm, Monday - Friday</p>
+              {office.workingHours && (
+                <div>
+                  <H2>Opening hours</H2>
+                  <p>{coreHours}</p>
+                </div>
+              )}
               <br />
               <p>
-                We recommend use of the office only during 'core' working hours
-                (9am - 6pm, Monday - Friday). Any earlier or later than this, or
-                on a weekend, and we are unable to guarantee entrance or exit to
-                and from the office spaces.{' '}
+                We recommend use of the hub only during 'core' working hours{' '}
+                {!!coreHours && `(${coreHours})`}. Any earlier or later than
+                this, or on a weekend, and we are unable to guarantee entrance
+                or exit to and from the office spaces.{' '}
               </p>
             </div>
           </div>
@@ -84,13 +116,13 @@ export const AboutPage: React.FC = () => {
           <H1 className="my-10 text-center">Floor plan</H1>
           <div className="flex flex-col gap-20">
             {areas.map((area) => {
-              if (area.id === 'none') {
+              if (area.id === 'none' || !area.available || !area.bookable) {
                 return
               }
               return (
                 <div key={area.id}>
                   <H3>{area.name}</H3>
-                  <img src={area.map} className="" alt={area.map} />
+                  <img className="opacity-80" src={area.map} alt={area.map} />
                 </div>
               )
             })}

src/modules/about/client/components/AboutWidget.tsx

@@ -2,41 +2,44 @@ import { FButton, H2, H3, Icons, WidgetWrapper } from '#client/components/ui'
 import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { useOffice } from '#client/utils/hooks'
+import { useMemo } from 'react'
+import dayjs from 'dayjs'
 
 export const AboutWidget: React.FC = () => {
   const officeId = useStore(stores.officeId)
   const office = useOffice(officeId ?? '')
+  const coreHours = useMemo(() => {
+    if (!office || office.workingHours?.length !== 2) {
+      return ''
+    }
+    return `${dayjs(office.workingHours[0], 'HH:mm').format('hA')} - ${dayjs(
+      office.workingHours[1],
+      'HH:mm'
+    ).format('hA')} ${!!office.workingDays ? `, ${office.workingDays}` : ''}`
+  }, [office])
   return (
     <WidgetWrapper title="About">
       <div className="flex flex-col gap-5">
-        {console.log(office)}
         {<img src="/maps/berlin.png"></img>}
         <div className="flex flex-col">
           {office?.address && (
             <div>
               <H3 className="mb-1">Address</H3>
               <p className="text-text-secondary">
-                {office?.address}
+                {office?.address}, {office?.city}
                 <br />
-                Entrance through the courtyard
+                {office.directions}
               </p>
             </div>
           )}
         </div>
-        <div>
-          <H3 className="mb-1">Available facilities</H3>
-          <div className="flex gap-2">
-            <Icons.Clock fillClassName="stroke-black" />{' '}
-            <Icons.Cake fillClassName="stroke-black" />{' '}
-            <Icons.Socks fillClassName="stroke-black" />
-            <Icons.Plane />
+        {coreHours && (
+          <div>
+            <H3 className="mb-1">Opening hours</H3>
+            <p className="text-text-secondary">{coreHours}</p>
+            <br />
           </div>
-        </div>
-        <div>
-          <H3 className="mb-1">Opening hours</H3>
-          <p className="text-text-secondary">9am - 6pm, Mon - Fri</p>
-          <br />
-        </div>
+        )}
       </div>
       <FButton
         kind="link"

src/modules/users/client/helpers/index.ts

@@ -1,12 +1,6 @@
 import dayjs, { Dayjs } from 'dayjs'
 import dayjsTimezone from 'dayjs/plugin/timezone'
 import dayjsUtc from 'dayjs/plugin/utc'
-import {
-  AuthAddressPair,
-  AuthIds,
-  AuthProvider,
-  AuthExtension,
-} from '#shared/types'
 
 dayjs.extend(dayjsUtc)
 dayjs.extend(dayjsTimezone)

src/server/app-config/schemas.ts

@@ -111,6 +111,15 @@ export const office = z
     timezone: z.string(),
     country: z.string(),
     city: z.string(),
+    coordinates: z.tuple([z.number(), z.number()]).optional(),
+    directions: z.string().optional(),
+    workingHours: z
+      .tuple([
+        z.string().regex(/^([01][0-9]|2[0-4]):[0-5][0-9]$/),
+        z.string().regex(/^([01][0-9]|2[0-4]):[0-5][0-9]$/),
+      ])
+      .optional(),
+    workingDays: z.string().optional(),
     allowGuestInvitation: z.boolean(),
     allowDeskReservation: z.boolean(),
     allowRoomReservation: z.boolean(),