diff --git a/apps/web/components/UpgradeToProDialog.tsx b/apps/web/components/UpgradeToProDialog.tsx new file mode 100644 index 0000000000..066cfc70b5 --- /dev/null +++ b/apps/web/components/UpgradeToProDialog.tsx @@ -0,0 +1,54 @@ +import { InformationCircleIcon } from "@heroicons/react/outline"; +import { Trans } from "next-i18next"; + +import Button from "@calcom/ui/Button"; +import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog"; + +import { useLocale } from "@lib/hooks/useLocale"; + +export function UpgradeToProDialog({ + modalOpen, + setModalOpen, + children, +}: { + modalOpen: boolean; + setModalOpen: (open: boolean) => void; + children: React.ReactNode; +}) { + const { t } = useLocale(); + return ( + + +
+
+
+
+ +
+
+
+

{children}

+

+ + You can + + upgrade here + + . + +

+
+
+ + + +
+ + + ); +} diff --git a/apps/web/lib/isSuccessRedirectAvailable.tsx b/apps/web/lib/isSuccessRedirectAvailable.tsx new file mode 100644 index 0000000000..cca3745224 --- /dev/null +++ b/apps/web/lib/isSuccessRedirectAvailable.tsx @@ -0,0 +1,14 @@ +import { Team, User } from ".prisma/client"; + +export function isSuccessRedirectAvailable( + eventType: { + users: { + plan: User["plan"]; + }[]; + } & { + team: Partial | null; + } +) { + // As Team Event is available in PRO plan only, just check if it's a team event. + return eventType.users[0]?.plan !== "FREE" || eventType.team; +} diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx index 0ac4511439..7cb5b3c375 100644 --- a/apps/web/pages/event-types/[type].tsx +++ b/apps/web/pages/event-types/[type].tsx @@ -23,7 +23,7 @@ import utc from "dayjs/plugin/utc"; import { GetServerSidePropsContext } from "next"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; -import { Controller, Noop, useForm } from "react-hook-form"; +import { Controller, Noop, useForm, UseFormReturn } from "react-hook-form"; import { FormattedNumber, IntlProvider } from "react-intl"; import Select, { Props as SelectProps } from "react-select"; import { JSONObject } from "superjson/dist/types"; @@ -42,6 +42,7 @@ import { QueryCell } from "@lib/QueryCell"; import { asStringOrThrow, asStringOrUndefined } from "@lib/asStringOrNull"; import { getSession } from "@lib/auth"; import { HttpError } from "@lib/core/http/error"; +import { isSuccessRedirectAvailable } from "@lib/isSuccessRedirectAvailable"; import { LocationType } from "@lib/location"; import prisma from "@lib/prisma"; import { slugify } from "@lib/slugify"; @@ -52,8 +53,10 @@ import { ClientSuspense } from "@components/ClientSuspense"; import DestinationCalendarSelector from "@components/DestinationCalendarSelector"; import Loader from "@components/Loader"; import Shell from "@components/Shell"; +import { UpgradeToProDialog } from "@components/UpgradeToProDialog"; import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent"; import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm"; +import Badge from "@components/ui/Badge"; import InfoBadge from "@components/ui/InfoBadge"; import CheckboxField from "@components/ui/form/CheckboxField"; import CheckedSelect from "@components/ui/form/CheckedSelect"; @@ -86,6 +89,53 @@ type OptionTypeBase = { disabled?: boolean; }; +const SuccessRedirectEdit = >({ + eventType, + formMethods, +}: { + eventType: inferSSRProps["eventType"]; + formMethods: T; +}) => { + const { t } = useLocale(); + const proUpgradeRequired = !isSuccessRedirectAvailable(eventType); + const [modalOpen, setModalOpen] = useState(false); + return ( + <> +
+
+
+ +
+
+ { + if (proUpgradeRequired) { + e.preventDefault(); + setModalOpen(true); + } + }} + readOnly={proUpgradeRequired} + type="url" + className="focus:border-primary-500 focus:ring-primary-500 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm" + placeholder={t("external_redirect_url")} + defaultValue={eventType.successRedirectUrl || ""} + {...formMethods.register("successRedirectUrl")} + /> +
+ + {t("redirect_url_upgrade_description")} + +
+ + ); +}; + type AvailabilityOption = { label: string; value: number; @@ -166,13 +216,21 @@ const EventTypePage = (props: inferSSRProps) => { ); }, onError: (err) => { + let message = ""; if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } if (err.data?.code === "UNAUTHORIZED") { - const message = `${err.data.code}: You are not able to update this event`; + message = `${err.data.code}: You are not able to update this event`; + } + + if (err.data?.code === "PARSE_ERROR") { + message = `${err.data.code}: ${err.message}`; + } + + if (message) { showToast(message, "error"); } }, @@ -432,6 +490,7 @@ const EventTypePage = (props: inferSSRProps) => { integration: string; externalId: string; }; + successRedirectUrl: string; }>({ defaultValues: { locations: eventType.locations || [], @@ -1508,7 +1567,9 @@ const EventTypePage = (props: inferSSRProps) => { - + + formMethods={formMethods} + eventType={eventType}> {hasPaymentIntegration && ( <>
@@ -1831,6 +1892,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => id: true, avatar: true, email: true, + plan: true, locale: true, }); @@ -1890,6 +1952,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => beforeEventBuffer: true, afterEventBuffer: true, slotInterval: true, + successRedirectUrl: true, team: { select: { slug: true, diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx index e69abd8869..9b90cb4b03 100644 --- a/apps/web/pages/settings/profile.tsx +++ b/apps/web/pages/settings/profile.tsx @@ -1,9 +1,7 @@ -import { InformationCircleIcon } from "@heroicons/react/outline"; import { TrashIcon } from "@heroicons/react/solid"; import crypto from "crypto"; import { GetServerSidePropsContext } from "next"; import { signOut } from "next-auth/react"; -import { Trans } from "next-i18next"; import { useRouter } from "next/router"; import { ComponentProps, FormEvent, RefObject, useEffect, useMemo, useRef, useState } from "react"; import Select from "react-select"; @@ -12,7 +10,7 @@ import TimezoneSelect, { ITimezone } from "react-timezone-select"; import showToast from "@calcom/lib/notification"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; -import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog"; +import { Dialog, DialogTrigger } from "@calcom/ui/Dialog"; import { TextField } from "@calcom/ui/form/fields"; import { QueryCell } from "@lib/QueryCell"; @@ -33,11 +31,13 @@ import Avatar from "@components/ui/Avatar"; import Badge from "@components/ui/Badge"; import ColorPicker from "@components/ui/colorpicker"; +import { UpgradeToProDialog } from "../../components/UpgradeToProDialog"; + type Props = inferSSRProps; function HideBrandingInput(props: { hideBrandingRef: RefObject; user: Props["user"] }) { const { t } = useLocale(); - const [modelOpen, setModalOpen] = useState(false); + const [modalOpen, setModalOpen] = useState(false); return ( <> @@ -61,39 +61,9 @@ function HideBrandingInput(props: { hideBrandingRef: RefObject setModalOpen(true); }} /> - - -
-
-
-
- -
-
-
-

{t("remove_cal_branding_description")}

-

- - You can - - upgrade here - - . - -

-
-
- - - -
- - + + {t("remove_cal_branding_description")} + ); } diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx index bdd9d4d894..0afba68a4e 100644 --- a/apps/web/pages/success.tsx +++ b/apps/web/pages/success.tsx @@ -8,10 +8,11 @@ import { createEvent } from "ics"; import { GetServerSidePropsContext } from "next"; import Link from "next/link"; import { useRouter } from "next/router"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import { sdkActionManager } from "@calcom/embed-core"; import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { EventType, Team, User } from "@calcom/prisma/client"; import Button from "@calcom/ui/Button"; import { EmailInput } from "@calcom/ui/form/fields"; @@ -19,6 +20,7 @@ import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull"; import { getEventName } from "@lib/event"; import useTheme from "@lib/hooks/useTheme"; import { isBrandingHidden } from "@lib/isBrandingHidden"; +import { isSuccessRedirectAvailable } from "@lib/isSuccessRedirectAvailable"; import prisma from "@lib/prisma"; import { isBrowserLocale24h } from "@lib/timeFormat"; import { inferSSRProps } from "@lib/types/inferSSRProps"; @@ -32,6 +34,111 @@ dayjs.extend(utc); dayjs.extend(toArray); dayjs.extend(timezone); +function redirectToExternalUrl(url: string) { + window.parent.location.href = url; +} + +/** + * Redirects to external URL with query params from current URL. + * Query Params and Hash Fragment if present in external URL are kept intact. + */ +function RedirectionToast({ url }: { url: string }) { + const [timeRemaining, setTimeRemaining] = useState(10); + const [isToastVisible, setIsToastVisible] = useState(true); + const parsedSuccessUrl = new URL(document.URL); + const parsedExternalUrl = new URL(url); + + /* @ts-ignore */ //https://stackoverflow.com/questions/49218765/typescript-and-iterator-type-iterableiteratort-is-not-an-array-type + for (let [name, value] of parsedExternalUrl.searchParams.entries()) { + parsedSuccessUrl.searchParams.set(name, value); + } + + const urlWithSuccessParams = + parsedExternalUrl.origin + + parsedExternalUrl.pathname + + "?" + + parsedSuccessUrl.searchParams.toString() + + parsedExternalUrl.hash; + + const { t } = useLocale(); + const timerRef = useRef(null); + + useEffect(() => { + timerRef.current = window.setInterval(() => { + if (timeRemaining > 0) { + setTimeRemaining((timeRemaining) => { + return timeRemaining - 1; + }); + } else { + redirectToExternalUrl(urlWithSuccessParams); + window.clearInterval(timerRef.current as number); + } + }, 1000); + return () => { + window.clearInterval(timerRef.current as number); + }; + }, [timeRemaining, urlWithSuccessParams]); + + if (!isToastVisible) { + return null; + } + + return ( + <> + {/* z-index just higher than Success Message Box */} +
+
+
+
+
+

+ Redirecting to {url} ... + + You are being redirected to {url} in {timeRemaining}{" "} + {timeRemaining === 1 ? "second" : "seconds"}. + +

+
+
+ +
+
+ +
+
+
+
+
+ + ); +} + export default function Success(props: inferSSRProps) { const { t } = useLocale(); const router = useRouter(); @@ -114,6 +221,9 @@ export default function Success(props: inferSSRProps) />
+ {isSuccessRedirectAvailable(eventType) && eventType.successRedirectUrl ? ( + + ) : null}