Alert to describe exclusion of options (#2770)

* Alert to describe exclusion of options

* Update apps/web/pages/event-types/[type].tsx

Co-authored-by: Omar López <zomars@me.com>

* Update apps/web/components/eventtype/RecurringEventController.tsx

Co-authored-by: Omar López <zomars@me.com>

* Formatting

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Omar López <zomars@me.com>

apps/web/components/eventtype/RecurringEventController.tsx

@@ -1,10 +1,11 @@
 import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
-import React, { useState } from "react";
+import { useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { Frequency as RRuleFrequency } from "rrule";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RecurringEvent } from "@calcom/types/Calendar";
+import { Alert } from "@calcom/ui/Alert";
 
 import Select from "@components/ui/form/Select";
 
@@ -40,15 +41,17 @@ export default function RecurringEventController({
     }));
 
   return (
-    <>
-      {!paymentEnabled && (
     <div className="block items-start sm:flex">
       <div className="min-w-48 mb-4 sm:mb-0">
         <label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
           {t("recurring_event")}
         </label>
       </div>
-          <div className="w-full">
+      <div className={!paymentEnabled ? "w-full" : ""}>
+        {paymentEnabled ? (
+          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
+        ) : (
+          <>
             <div className="relative flex items-start">
               <div className="flex h-5 items-center">
                 <input
@@ -136,9 +139,9 @@ export default function RecurringEventController({
                 </div>
               </CollapsibleContent>
             </Collapsible>
-          </div>
-        </div>
-      )}
           </>
+        )}
+      </div>
+    </div>
   );
 }

apps/web/pages/event-types/[type].tsx

@@ -38,6 +38,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { StripeData } from "@calcom/stripe/server";
 import { RecurringEvent } from "@calcom/types/Calendar";
+import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
@@ -1732,7 +1733,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <SuccessRedirectEdit<typeof formMethods>
                           formMethods={formMethods}
                           eventType={eventType}></SuccessRedirectEdit>
-                        {hasPaymentIntegration && !recurringEventDefined && (
+                        {hasPaymentIntegration && (
                           <>
                             <hr className="border-neutral-200" />
                             <div className="block sm:flex">
@@ -1746,6 +1747,9 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
 
                               <div className="flex flex-col">
                                 <div className="w-full">
+                                  {recurringEventDefined ? (
+                                    <Alert severity="warning" title={t("warning_recurring_event_payment")} />
+                                  ) : (
                                     <div className="block items-center sm:flex">
                                       <div className="w-full">
                                         <div className="relative flex items-start">
@@ -1780,6 +1784,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                         </div>
                                       </div>
                                     </div>
+                                  )}
                                 </div>
                                 {requirePayment && (
                                   <div className="w-full">

apps/web/public/static/locales/en/common.json

@@ -251,6 +251,8 @@
   "booking_submitted_recurring": "Your recurring meeting has been submitted",
   "booking_confirmed": "Your booking has been confirmed",
   "booking_confirmed_recurring": "Your recurring meeting has been confirmed",
+  "warning_recurring_event_payment": "Payments are not supported with Recurring Events yet",
+  "warning_payment_recurring_event": "Recurring events are not supported with Payments yet",
   "enter_new_password": "Enter the new password you'd like for your account.",
   "reset_password": "Reset Password",
   "change_your_password": "Change your password",