From 6102feec1f659e75740a1fffd97e2fbb3e2b09b0 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Thu, 5 Aug 2021 10:03:08 +0530
Subject: [PATCH 1/7] improved styling and dark mode for add-guest button

---
 pages/[user]/book.tsx    | 59 ++++++++++++++++++++++------------------
 pages/api/book/[user].ts |  2 +-
 styles/globals.css       | 59 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 91 insertions(+), 29 deletions(-)

diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index c96c2439..bce1c3ac 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -16,7 +16,7 @@ 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';
+// import 'react-multi-email/style.css';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -332,33 +332,38 @@ export default function Book(props: any): JSX.Element {
                           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>
-                          );
-                        }}
-                      />                     
-                      }
-
+                      {guestToggle && (
+                        <div>
+                          <label
+                          htmlFor="guests"
+                          className="block text-sm font-medium dark:text-white text-gray-700">
+                          Guests
+                          </label>                         
+                          <ReactMultiEmail
+                          placeholder="guest@example.com"
+                          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>    
                   <div className="mb-4">
                     <label
diff --git a/pages/api/book/[user].ts b/pages/api/book/[user].ts
index cb9894a9..c43e7557 100644
--- a/pages/api/book/[user].ts
+++ b/pages/api/book/[user].ts
@@ -373,7 +373,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const invitee = [{ email: req.body.email, name: req.body.name, timeZone: req.body.timeZone }];
     const guests = req.body.guests.map(guest=>{
-      let g = {
+      const g = {
         'email': guest,
         'name': '',
         'timeZone': req.body.timeZone  
diff --git a/styles/globals.css b/styles/globals.css
index 30beee13..9cc46f30 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -81,10 +81,67 @@
     }
 }
 
+/* !important to style multi-email input */
 .react-multi-email > [type='text'] {
-    --tw-ring-shadow: 0 0 0 0 0;
+    @apply shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md;
 }
 
+.react-multi-email {
+    margin: 0;
+    max-width: 100%;
+    -webkit-box-flex: 1;
+    -ms-flex: 1 0 auto;
+    flex: 1 0 auto;
+    text-align: left;
+    line-height: 1.25rem;
+    padding: 0.75em 0.5rem;
+    padding: 0;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-content: flex-start;
+  }
+
+  .react-multi-email > span[data-placeholder] {
+    display: none;
+    position: absolute;
+    left: 0.8rem;
+    top: 0.75rem;
+    line-height: 1.25rem;
+    font-size: 0.875rem;
+  }
+  
+  .react-multi-email.empty > span[data-placeholder] {
+    display: inline;
+    color: #646b7a;
+  }
+
+  .react-multi-email.focused > span[data-placeholder] {
+    display: none;
+  }
+  
+  .react-multi-email > input {
+    width: 100% !important;
+    display: inline-block !important;
+    @apply mt-1;
+  }
+  
+  .react-multi-email [data-tag] {
+    /* margin: 0.14285714em; */
+    @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;  
+  }
+
+  .react-multi-email [data-tag] [data-tag-item] {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .react-multi-email [data-tag] [data-tag-handle] {
+    margin-left: 0.833em;
+    cursor: pointer;
+  }
+
 /* !important to override react-select */
 .react-select__value-container{
     border: 0 !important;

From 81a3f7f3fc9bd20352eb06a6e84e94a634c293ff Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Thu, 5 Aug 2021 10:31:32 +0530
Subject: [PATCH 2/7] cleaned up code

---
 pages/[user]/book.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index bce1c3ac..34ebdbf8 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -16,7 +16,6 @@ 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);

From dbffcf435ba404440ee555ef4987104a1e50033b Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Thu, 5 Aug 2021 10:37:37 +0530
Subject: [PATCH 3/7] removed unnecessary comment

---
 styles/globals.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles/globals.css b/styles/globals.css
index 9cc46f30..c58783ab 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -128,7 +128,6 @@
   }
   
   .react-multi-email [data-tag] {
-    /* margin: 0.14285714em; */
     @apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;  
   }
 

From 4f4959efb395623c91566f66ca12de5002a2d9db Mon Sep 17 00:00:00 2001
From: nicolas <privat@nicolasjessen.de>
Date: Sat, 7 Aug 2021 01:03:46 +0200
Subject: [PATCH 4/7] Changed readme

---
 README.md | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 2a6bfa3a..8b1901e6 100644
--- a/README.md
+++ b/README.md
@@ -229,16 +229,13 @@ Contributions are what make the open source community such an amazing place to b
 2. On the upper right, click "Develop" => "Build App".
 3. On "OAuth", select "Create".
 4. Name your App.
-5. Choose "Account-level app" as the app type.
+5. Choose "User-managed app" as the app type.
 6. De-select the option to publish the app on the Zoom App Marketplace.
 7. Click "Create".
 8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
 9. Set the Redirect URL for OAuth `<CALENDSO URL>/api/integrations/zoomvideo/callback` replacing CALENDSO URL with the URI at which your application runs.
 10. Also add the redirect URL given above as a whitelist URL and enable "Subdomain check". Make sure, it says "saved" below the form.
-11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". Search for and check the following scopes:
-    1. account:write:admin
-    2. meeting:write:admin
-    3. user:write:admin
+11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". Search for and check the scope `meeting:write`.
 12. Click "Done".
 13. You're good to go. Now you can easily add your Zoom integration in the Calendso settings.
 

From f391ad4d2a2ca4a41471d96d0f35fa61396ebcd6 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Sat, 7 Aug 2021 01:08:55 +0200
Subject: [PATCH 5/7] fix: add missing mailto: in pages/integrations

---
 pages/integrations/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 55294b4d..eeda59d2 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -267,7 +267,7 @@ export default function IntegrationHome({ integrations }) {
               <p>If you want to add your own App here, get in touch with us.</p>
             </div>
             <div className="mt-5">
-              <a href="apps@calendso.com" className="btn btn-white">
+              <a href="mailto:apps@calendso.com" className="btn btn-white">
                 Contact us
               </a>
             </div>

From 588265a3dc66e5c78589f42716541f21c7625a89 Mon Sep 17 00:00:00 2001
From: nicolas <privat@nicolasjessen.de>
Date: Sat, 7 Aug 2021 08:09:08 +0200
Subject: [PATCH 6/7] Use user-managed app for zoom instead

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8b1901e6..78149e12 100644
--- a/README.md
+++ b/README.md
@@ -235,7 +235,7 @@ Contributions are what make the open source community such an amazing place to b
 8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
 9. Set the Redirect URL for OAuth `<CALENDSO URL>/api/integrations/zoomvideo/callback` replacing CALENDSO URL with the URI at which your application runs.
 10. Also add the redirect URL given above as a whitelist URL and enable "Subdomain check". Make sure, it says "saved" below the form.
-11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". Search for and check the scope `meeting:write`.
+11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
 12. Click "Done".
 13. You're good to go. Now you can easily add your Zoom integration in the Calendso settings.
 

From 3bfee8a7bf4aeca7ec2f6ca35078fc9fdab93f45 Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@richelsen.net>
Date: Sun, 8 Aug 2021 22:31:08 +0200
Subject: [PATCH 7/7] replaced Loading... with Loader component

---
 pages/bookings/index.tsx | 3 ++-
 pages/settings/teams.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/pages/bookings/index.tsx b/pages/bookings/index.tsx
index 370eda4a..c48d14ad 100644
--- a/pages/bookings/index.tsx
+++ b/pages/bookings/index.tsx
@@ -9,6 +9,7 @@ import { Menu, Transition } from "@headlessui/react";
 import { DotsHorizontalIcon } from "@heroicons/react/solid";
 import classNames from "@lib/classNames";
 import { ClockIcon, XIcon } from "@heroicons/react/outline";
+import Loader from "@components/Loader";
 
 export default function Bookings({ bookings }) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -17,7 +18,7 @@ export default function Bookings({ bookings }) {
   const router = useRouter();
 
   if (loading) {
-    return <p className="text-gray-400">Loading...</p>;
+    return <Loader />;
   }
 
   async function confirmBookingHandler(booking, confirm: boolean) {
diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx
index 260d06b3..d78299d2 100644
--- a/pages/settings/teams.tsx
+++ b/pages/settings/teams.tsx
@@ -8,6 +8,7 @@ import { getSession, useSession } from "next-auth/client";
 import { UsersIcon } from "@heroicons/react/outline";
 import TeamList from "../../components/team/TeamList";
 import TeamListItem from "../../components/team/TeamListItem";
+import Loader from "@components/Loader";
 
 export default function Teams() {
   const [, loading] = useSession();
@@ -38,7 +39,7 @@ export default function Teams() {
   }, []);
 
   if (loading) {
-    return <p className="text-gray-400">Loading...</p>;
+    return <Loader />;
   }
 
   const createTeam = (e) => {