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>
pull/2766/head^2
Leo Giovanetti 2022-05-16 15:50:53 -03:00 committed by GitHub
parent 3421af10a9
commit 81d917e27a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 46 deletions

View File

@ -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>
);
}

View File

@ -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">

View File

@ -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",