From d2a16ab01e4adb24d9a118e0cf8020c2e767eabe Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 8 Jun 2022 08:52:36 +0200
Subject: [PATCH] add all missing information to mobile view

---
 .../booking/pages/AvailabilityPage.tsx        | 63 ++++++++++++++++---
 1 file changed, 54 insertions(+), 9 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 8d54dd5ed0806a..0f6ed009b428c4 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -260,12 +260,6 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                             {eventType.description}
                           </p>
                         )}
-                        {eventType.locations.length === 1 && (
-                          <p className="text-gray-600 dark:text-white">
-                            <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                            {locationKeyToString(eventType.locations[0], t)}
-                          </p>
-                        )}
                         {eventType.locations.length === 1 && (
                           <p className="text-gray-600 dark:text-white">
                             {Object.values(AppStoreLocationType).includes(
@@ -279,10 +273,59 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                             {locationKeyToString(eventType.locations[0], t)}
                           </p>
                         )}
+                        {eventType.locations.length > 1 && (
+                          <div className="flex-warp flex text-gray-600 dark:text-white">
+                            <div className="mr-[10px] ml-[2px] -mt-1 ">
+                              <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                            </div>
+                            <p>
+                              {eventType.locations.map((el, i, arr) => {
+                                return (
+                                  <span key={el.type}>
+                                    {locationKeyToString(el, t)}{" "}
+                                    {arr.length - 1 !== i && (
+                                      <span className="font-light"> {t("or_lowercase")} </span>
+                                    )}
+                                  </span>
+                                );
+                              })}
+                            </p>
+                          </div>
+                        )}
                         <p className="text-gray-600 dark:text-white">
-                          <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+                          <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                           {eventType.length} {t("minutes")}
                         </p>
+                        {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
+                          <div className="text-gray-600 dark:text-white">
+                            <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                            <p className="mb-1 -ml-2 inline px-2 py-1">
+                              {t("every_for_freq", {
+                                freq: t(
+                                  `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
+                                ),
+                              })}
+                            </p>
+                            <input
+                              type="number"
+                              min="1"
+                              max={eventType.recurringEvent.count}
+                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              defaultValue={eventType.recurringEvent.count}
+                              onChange={(event) => {
+                                setRecurringEventCount(parseInt(event?.target.value));
+                              }}
+                            />
+                            <p className="inline text-gray-600 dark:text-white">
+                              {t(
+                                `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`,
+                                {
+                                  count: recurringEventCount,
+                                }
+                              )}
+                            </p>
+                          </div>
+                        )}
                         {eventType.price > 0 && (
                           <div className="text-gray-600 dark:text-white">
                             <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
@@ -295,6 +338,8 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                             </IntlProvider>
                           </div>
                         )}
+                        <TimezoneDropdown />
+
                         <div className="md:hidden">
                           {booking?.startTime && rescheduleUid && (
                             <div>
@@ -356,7 +401,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                       </div>
                     )}
                     {eventType.locations.length === 1 && (
-                      <p className="text-gray-600  dark:text-white">
+                      <p className="text-gray-600 dark:text-white">
                         {Object.values(AppStoreLocationType).includes(
                           eventType.locations[0].type as unknown as AppStoreLocationType
                         ) ? (
@@ -369,7 +414,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                       </p>
                     )}
                     {eventType.locations.length > 1 && (
-                      <div className="flex-warp flex  text-gray-600 dark:text-white">
+                      <div className="flex-warp flex text-gray-600 dark:text-white">
                         <div className="mr-[10px] ml-[2px] -mt-1 ">
                           <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
                         </div>