Added -Add guest- button at confirm booking step, and minor code improvement

package.json

@@ -36,6 +36,7 @@
     "react": "17.0.1",
     "react-dates": "^21.8.0",
     "react-dom": "17.0.1",
+    "react-multi-email": "^0.5.3",
     "react-phone-number-input": "^3.1.21",
     "react-select": "^4.3.0",
     "react-timezone-select": "^1.0.2",

pages/[user]/book.tsx

@@ -15,6 +15,8 @@ import Avatar from "../../components/Avatar";
 import Button from "../../components/ui/Button";
 import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
 import Theme from "@components/Theme";
+import { ReactMultiEmail, isEmail } from 'react-multi-email';
+import 'react-multi-email/style.css';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -27,7 +29,8 @@ export default function Book(props: any): JSX.Element {
   const [preferredTimeZone, setPreferredTimeZone] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(false);
-
+  const [guestToggle, setGuestToggle] = useState(false);
+  const [guestEmails, setGuestEmails] = useState([]);
   const locations = props.eventType.locations || [];
 
   const [selectedLocation, setSelectedLocation] = useState<LocationType>(
@@ -44,6 +47,10 @@ export default function Book(props: any): JSX.Element {
     telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters()));
   });
 
+  function toggleGuestEmailInput() {
+    setGuestToggle(!guestToggle);
+  }
+
   const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
 
   // TODO: Move to translations
@@ -85,6 +92,7 @@ export default function Book(props: any): JSX.Element {
         name: event.target.name.value,
         email: event.target.email.value,
         notes: notes,
+        guests: guestEmails,
         timeZone: preferredTimeZone,
         eventTypeId: props.eventType.id,
         rescheduleUid: rescheduleUid,
@@ -106,6 +114,7 @@ export default function Book(props: any): JSX.Element {
         }
       }
 
+      // console.log(payload);
       telemetry.withJitsu((jitsu) =>
         jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())
       );
@@ -316,6 +325,42 @@ export default function Book(props: any): JSX.Element {
                           )}
                         </div>
                       ))}
+                  <div className="mb-4">
+                      {!guestToggle && 
+                        <label
+                          onClick={toggleGuestEmailInput}
+                          htmlFor="guests"
+                          className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
+                          + Additional Guests
+                        </label>       
+
+                      }
+                      {
+                        guestToggle &&
+                        <ReactMultiEmail
+                        placeholder="Input your Email Address"
+                        emails={guestEmails}
+                        onChange={(_emails: string[]) => {
+                          setGuestEmails(_emails);
+                        }}
+                        getLabel={(
+                          email: string,
+                          index: number,
+                          removeEmail: (index: number) => void
+                        ) => {
+                          return (
+                            <div data-tag key={index}>
+                              {email}
+                              <span data-tag-handle onClick={() => removeEmail(index)}>
+                                ×
+                              </span>
+                            </div>
+                          );
+                        }}
+                      />                     
+                      }
+
+                  </div>    
                   <div className="mb-4">
                     <label
                       htmlFor="notes"
@@ -404,10 +449,9 @@ export async function getServerSideProps(context) {
     },
   });
 
-  const eventTypeObject = Object.assign({}, eventType, {
-    periodStartDate: eventType.periodStartDate?.toString() ?? null,
-    periodEndDate: eventType.periodEndDate?.toString() ?? null,
-  });
+  const eventTypeObject = [eventType].map(e => {
+    return ({...e, periodStartDate:e.periodStartDate?.toString() ?? null, periodEndDate:e.periodEndDate?.toString() ?? null,})
+  })[0];
 
   let booking = null;
 

pages/api/book/[user].ts

@@ -371,6 +371,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const rawLocation = req.body.location;
 
+    const invitee = [{ email: req.body.email, name: req.body.name, timeZone: req.body.timeZone }];
+    const guests = req.body.guests.map(guest=>{
+      let g = {
+        'email': guest,
+        'name': '',
+        'timeZone': req.body.timeZone  
+      }
+      return g;
+    });
+    const attendeesList = [...invitee,...guests];
+
     let evt: CalendarEvent = {
       type: selectedEventType.title,
       title: getEventName(req.body.name, selectedEventType.title, selectedEventType.eventName),
@@ -378,7 +389,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       startTime: req.body.start,
       endTime: req.body.end,
       organizer: { email: currentUser.email, name: currentUser.name, timeZone: currentUser.timeZone },
-      attendees: [{ email: req.body.email, name: req.body.name, timeZone: req.body.timeZone }],
+      attendees: attendeesList,
     };
 
     // If phone or inPerson use raw location

styles/globals.css

@@ -81,6 +81,10 @@
     }
 }
 
+.react-multi-email > [type='text'] {
+    --tw-ring-shadow: 0 0 0 0 0;
+}
+
 .loader {
     margin: 80px auto;
     border: 8px solid #f3f3f3; /* Light grey */

yarn.lock

@@ -5211,6 +5211,11 @@ react-moment-proptypes@^1.6.0:
   dependencies:
     moment ">=1.6.0"
 
+react-multi-email@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/react-multi-email/-/react-multi-email-0.5.3.tgz#734a0d4d1af23feef5cb5e635bde23963b0a9e8b"
+  integrity sha512-1AneeJlAwjvzkPV740q2SXes/kW3HKOzR3gs+U7whrHN5nz+yH5Unosf/rvz8kRj/eFwBf6fTzMqlJiupu7S5Q==
+
 react-outside-click-handler@^1.2.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"