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
GitHub
parent
3421af10a9
commit
81d917e27a
|
|
@ -1,10 +1,11 @@
|
||||||
import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
|
import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
|
||||||
import React, { useState } from "react";
|
import { useState } from "react";
|
||||||
import { UseFormReturn } from "react-hook-form";
|
import { UseFormReturn } from "react-hook-form";
|
||||||
import { Frequency as RRuleFrequency } from "rrule";
|
import { Frequency as RRuleFrequency } from "rrule";
|
||||||
|
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import { RecurringEvent } from "@calcom/types/Calendar";
|
import { RecurringEvent } from "@calcom/types/Calendar";
|
||||||
|
import { Alert } from "@calcom/ui/Alert";
|
||||||
|
|
||||||
import Select from "@components/ui/form/Select";
|
import Select from "@components/ui/form/Select";
|
||||||
|
|
||||||
|
|
@ -40,15 +41,17 @@ export default function RecurringEventController({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="block items-start sm:flex">
|
||||||
{!paymentEnabled && (
|
<div className="min-w-48 mb-4 sm:mb-0">
|
||||||
<div className="block items-start sm:flex">
|
<label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
|
||||||
<div className="min-w-48 mb-4 sm:mb-0">
|
{t("recurring_event")}
|
||||||
<label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
|
</label>
|
||||||
{t("recurring_event")}
|
</div>
|
||||||
</label>
|
<div className={!paymentEnabled ? "w-full" : ""}>
|
||||||
</div>
|
{paymentEnabled ? (
|
||||||
<div className="w-full">
|
<Alert severity="warning" title={t("warning_payment_recurring_event")} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<div className="relative flex items-start">
|
<div className="relative flex items-start">
|
||||||
<div className="flex h-5 items-center">
|
<div className="flex h-5 items-center">
|
||||||
<input
|
<input
|
||||||
|
|
@ -136,9 +139,9 @@ export default function RecurringEventController({
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
</div>
|
</>
|
||||||
</div>
|
)}
|
||||||
)}
|
</div>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
import showToast from "@calcom/lib/notification";
|
import showToast from "@calcom/lib/notification";
|
||||||
import { StripeData } from "@calcom/stripe/server";
|
import { StripeData } from "@calcom/stripe/server";
|
||||||
import { RecurringEvent } from "@calcom/types/Calendar";
|
import { RecurringEvent } from "@calcom/types/Calendar";
|
||||||
|
import { Alert } from "@calcom/ui/Alert";
|
||||||
import Button from "@calcom/ui/Button";
|
import Button from "@calcom/ui/Button";
|
||||||
import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
||||||
import Switch from "@calcom/ui/Switch";
|
import Switch from "@calcom/ui/Switch";
|
||||||
|
|
@ -1732,7 +1733,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||||
<SuccessRedirectEdit<typeof formMethods>
|
<SuccessRedirectEdit<typeof formMethods>
|
||||||
formMethods={formMethods}
|
formMethods={formMethods}
|
||||||
eventType={eventType}></SuccessRedirectEdit>
|
eventType={eventType}></SuccessRedirectEdit>
|
||||||
{hasPaymentIntegration && !recurringEventDefined && (
|
{hasPaymentIntegration && (
|
||||||
<>
|
<>
|
||||||
<hr className="border-neutral-200" />
|
<hr className="border-neutral-200" />
|
||||||
<div className="block sm:flex">
|
<div className="block sm:flex">
|
||||||
|
|
@ -1746,40 +1747,44 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||||
|
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="block items-center sm:flex">
|
{recurringEventDefined ? (
|
||||||
<div className="w-full">
|
<Alert severity="warning" title={t("warning_recurring_event_payment")} />
|
||||||
<div className="relative flex items-start">
|
) : (
|
||||||
<div className="flex h-5 items-center">
|
<div className="block items-center sm:flex">
|
||||||
<input
|
<div className="w-full">
|
||||||
onChange={(event) => {
|
<div className="relative flex items-start">
|
||||||
setRequirePayment(event.target.checked);
|
<div className="flex h-5 items-center">
|
||||||
if (!event.target.checked) {
|
<input
|
||||||
formMethods.setValue("price", 0);
|
onChange={(event) => {
|
||||||
}
|
setRequirePayment(event.target.checked);
|
||||||
}}
|
if (!event.target.checked) {
|
||||||
id="requirePayment"
|
formMethods.setValue("price", 0);
|
||||||
name="requirePayment"
|
}
|
||||||
type="checkbox"
|
}}
|
||||||
className="text-primary-600 h-4 w-4 rounded border-gray-300"
|
id="requirePayment"
|
||||||
defaultChecked={requirePayment}
|
name="requirePayment"
|
||||||
/>
|
type="checkbox"
|
||||||
</div>
|
className="text-primary-600 h-4 w-4 rounded border-gray-300"
|
||||||
<div className="text-sm ltr:ml-3 rtl:mr-3">
|
defaultChecked={requirePayment}
|
||||||
<p className="text-neutral-900">
|
/>
|
||||||
{t("require_payment")} (0.5% +{" "}
|
</div>
|
||||||
<IntlProvider locale="en">
|
<div className="text-sm ltr:ml-3 rtl:mr-3">
|
||||||
<FormattedNumber
|
<p className="text-neutral-900">
|
||||||
value={0.1}
|
{t("require_payment")} (0.5% +{" "}
|
||||||
style="currency"
|
<IntlProvider locale="en">
|
||||||
currency={currency}
|
<FormattedNumber
|
||||||
/>
|
value={0.1}
|
||||||
</IntlProvider>{" "}
|
style="currency"
|
||||||
{t("commission_per_transaction")})
|
currency={currency}
|
||||||
</p>
|
/>
|
||||||
|
</IntlProvider>{" "}
|
||||||
|
{t("commission_per_transaction")})
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
{requirePayment && (
|
{requirePayment && (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
|
|
|
||||||
|
|
@ -251,6 +251,8 @@
|
||||||
"booking_submitted_recurring": "Your recurring meeting has been submitted",
|
"booking_submitted_recurring": "Your recurring meeting has been submitted",
|
||||||
"booking_confirmed": "Your booking has been confirmed",
|
"booking_confirmed": "Your booking has been confirmed",
|
||||||
"booking_confirmed_recurring": "Your recurring meeting 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.",
|
"enter_new_password": "Enter the new password you'd like for your account.",
|
||||||
"reset_password": "Reset Password",
|
"reset_password": "Reset Password",
|
||||||
"change_your_password": "Change your password",
|
"change_your_password": "Change your password",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue