From 81d917e27a2bbba9954d89d5a1d568474fca3557 Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Mon, 16 May 2022 15:50:53 -0300
Subject: [PATCH] Alert to describe exclusion of options (#2770)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../eventtype/RecurringEventController.tsx    | 31 +++++----
 apps/web/pages/event-types/[type].tsx         | 69 ++++++++++---------
 apps/web/public/static/locales/en/common.json |  2 +
 3 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/apps/web/components/eventtype/RecurringEventController.tsx b/apps/web/components/eventtype/RecurringEventController.tsx
index 7511a24ee2..518805fa96 100644
--- a/apps/web/components/eventtype/RecurringEventController.tsx
+++ b/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="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={!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>
   );
 }
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 02f5213923..dae70aa507 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/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,40 +1747,44 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
 
                               <div className="flex flex-col">
                                 <div className="w-full">
-                                  <div className="block items-center sm:flex">
-                                    <div className="w-full">
-                                      <div className="relative flex items-start">
-                                        <div className="flex h-5 items-center">
-                                          <input
-                                            onChange={(event) => {
-                                              setRequirePayment(event.target.checked);
-                                              if (!event.target.checked) {
-                                                formMethods.setValue("price", 0);
-                                              }
-                                            }}
-                                            id="requirePayment"
-                                            name="requirePayment"
-                                            type="checkbox"
-                                            className="text-primary-600  h-4 w-4 rounded border-gray-300"
-                                            defaultChecked={requirePayment}
-                                          />
-                                        </div>
-                                        <div className="text-sm ltr:ml-3 rtl:mr-3">
-                                          <p className="text-neutral-900">
-                                            {t("require_payment")} (0.5% +{" "}
-                                            <IntlProvider locale="en">
-                                              <FormattedNumber
-                                                value={0.1}
-                                                style="currency"
-                                                currency={currency}
-                                              />
-                                            </IntlProvider>{" "}
-                                            {t("commission_per_transaction")})
-                                          </p>
+                                  {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">
+                                          <div className="flex h-5 items-center">
+                                            <input
+                                              onChange={(event) => {
+                                                setRequirePayment(event.target.checked);
+                                                if (!event.target.checked) {
+                                                  formMethods.setValue("price", 0);
+                                                }
+                                              }}
+                                              id="requirePayment"
+                                              name="requirePayment"
+                                              type="checkbox"
+                                              className="text-primary-600  h-4 w-4 rounded border-gray-300"
+                                              defaultChecked={requirePayment}
+                                            />
+                                          </div>
+                                          <div className="text-sm ltr:ml-3 rtl:mr-3">
+                                            <p className="text-neutral-900">
+                                              {t("require_payment")} (0.5% +{" "}
+                                              <IntlProvider locale="en">
+                                                <FormattedNumber
+                                                  value={0.1}
+                                                  style="currency"
+                                                  currency={currency}
+                                                />
+                                              </IntlProvider>{" "}
+                                              {t("commission_per_transaction")})
+                                            </p>
+                                          </div>
                                         </div>
                                       </div>
                                     </div>
-                                  </div>
+                                  )}
                                 </div>
                                 {requirePayment && (
                                   <div className="w-full">
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index af287e6656..b299b4d5fc 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/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",