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
parent
3421af10a9
commit
81d917e27a
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue